MobileReality · gitsad · May 12, 2026 · May 12, 2026 · May 12, 2026 · May 12, 2026
diff --git a/.changeset/silent-tires-shave.md b/.changeset/silent-tires-shave.md
@@ -0,0 +1,5 @@
+---
+"@mobile-reality/mdma-demo": patch
+---
+
+Add SVG logo with gradient hexagon symbol and vector MDMA text; integrate logo into top nav header and favicon; update README with new logo, mdma-3.gif, and Docs link alongside Live Demo
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -14,11 +14,11 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
 
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@a8198c4bff370c8506180b035930dea56dbd5288 # v5
 
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
         with:
           node-version: 22
           cache: pnpm

diff --git a/.github/workflows/deploy-demo.yml b/.github/workflows/deploy-demo.yml
@@ -22,11 +22,11 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@f40ffcd9367d9f12939873eb1018b921a783ffaa # v4
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
         with:
           node-version: 22
           cache: pnpm
@@ -37,7 +37,7 @@ jobs:
       - name: Build packages and demo
         run: pnpm --filter @mobile-reality/mdma-demo... build
 
-      - uses: actions/upload-pages-artifact@v3
+      - uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3
         with:
           path: demo/dist
 
@@ -48,5 +48,5 @@ jobs:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     steps:
-      - uses: actions/deploy-pages@v4
+      - uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4
         id: deployment
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -14,11 +14,11 @@ jobs:
       packages: write
       pull-requests: write
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
 
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@a8198c4bff370c8506180b035930dea56dbd5288 # v5
 
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
         with:
           node-version: 22
           cache: pnpm
@@ -28,7 +28,7 @@ jobs:
       - run: pnpm build
 
       - name: Create Release Pull Request or Publish
-        uses: changesets/action@v1
+        uses: changesets/action@63a615b9cd06ba9a3e6d13796c7fbcb080a60a0b # v1.8.0
         with:
           publish: pnpm release
         env:

diff --git a/README.md b/README.md
@@ -1,11 +1,15 @@
 <p align="center">
-  <img src="assets/logo.png" alt="MDMA Logo" width="600" />
+  <img src="assets/logo.svg" alt="MDMA Logo" width="160" />
 </p>
 
 <h1 align="center">MDMA</h1>
 <p align="center">Markdown Document with Mounted Applications</p>
 <p align="center">Interactive documents from Markdown. Built for next gen-apps</p>
-<p align="center"><a href="https://mobilereality.github.io/mdma/">🚀 Live Demo</a></p>
+<p align="center">
+  <a href="https://mobilereality.github.io/mdma/">🚀 Live Demo</a>
+  &nbsp;&nbsp;·&nbsp;&nbsp;
+  <a href="https://mobilereality.github.io/mdma/#/docs">📖 Docs</a>
+</p>
 
 
 ## Why MDMA?
@@ -15,7 +19,7 @@ AI conversations today are plain text — the user reads a response and manually
 No custom UI per use case. No parsing free-form text. The AI generates structured, validated components and your frontend renders them instantly.
 
 <p align="center">
-  <img src="assets/mdma-2.gif" alt="MDMA Demo" width="800" />
+  <img src="assets/mdma-3.gif" alt="MDMA Demo" width="800" />
 </p>
 
 ## What is MDMA?

diff --git a/assets/logo.svg b/assets/logo.svg
diff --git a/assets/mdma-3.gif b/assets/mdma-3.gif
diff --git a/demo/index.html b/demo/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/mdma/logo.svg" />
     <title>MDMA - Interactive Document Demo</title>
   </head>
   <body>

diff --git a/demo/package.json b/demo/package.json
@@ -15,6 +15,7 @@
     "@mobile-reality/mdma-runtime": "workspace:*",
     "@mobile-reality/mdma-spec": "workspace:*",
     "@mobile-reality/mdma-validator": "workspace:*",
+    "highlight.js": "^11.11.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "recharts": "^3.7.0",

diff --git a/demo/public/logo.svg b/demo/public/logo.svg
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
@@ -1,7 +1,9 @@
 import { useState, useEffect, useRef } from 'react';
+import logoUrl from '../../assets/logo.svg';
 import { AgentChatView } from './AgentChatView.js';
 import { ChatView } from './ChatView.js';
 import { CustomChatView } from './CustomChatView.js';
+import { DocsView } from './DocsView.js';
 import { HomeView } from './HomeView.js';
 import { ValidatorView } from './ValidatorView.js';
 
@@ -23,7 +25,7 @@ function navigate(to: string) {
 
 // ── Nav config ───────────────────────────────────────────────────────────────
 
-type Route = '/' | '/chat' | '/author' | '/custom' | '/validator';
+type Route = '/' | '/chat' | '/author' | '/custom' | '/validator' | '/docs';
 
 interface NavItem {
   path: Route;
@@ -50,7 +52,10 @@ const NAV_GROUPS: NavGroup[] = [
   },
   {
     label: 'Tools',
-    items: [{ path: '/validator', label: 'Validator', icon: '🔍' }],
+    items: [
+      { path: '/validator', label: 'Validator', icon: '🔍' },
+      { path: '/docs', label: 'Docs', icon: '📖' },
+    ],
   },
 ];
 
@@ -88,9 +93,9 @@ export function App() {
       <header className="demo-header">
         <div className="demo-header-left">
           <button type="button" className="demo-title-link" onClick={() => navigate('/')}>
-            <h1 className="demo-title">MDMA</h1>
+            <img src={logoUrl} alt="MDMA" className="demo-logo" />
           </button>
-          <span className="demo-subtitle">Interactive Document Demo</span>
+          <span className="demo-subtitle">The open standard for AI-generated interactive UI</span>
         </div>
         {route !== '/' && (
           <div className="demo-header-right">
@@ -144,6 +149,8 @@ export function App() {
 
       {route === '/' ? (
         <HomeView />
+      ) : route === '/docs' ? (
+        <DocsView />
       ) : route === '/validator' ? (
         <ValidatorView />
       ) : route === '/custom' ? (

diff --git a/demo/src/DocsView.tsx b/demo/src/DocsView.tsx
@@ -0,0 +1 @@
+export { DocsView } from './docs/DocsView.js';
diff --git a/demo/src/HomeView.tsx b/demo/src/HomeView.tsx
@@ -1,3 +1,11 @@
+const DOCS_ITEM = {
+  path: '/docs',
+  label: 'Docs',
+  icon: '📖',
+  description:
+    'Browse the full MDMA documentation — components, packages, validator rules, MCP server, prompt matrix, and more.',
+};
+
 const SECTIONS = [
   {
     label: 'Agentic',
@@ -54,11 +62,23 @@ export function HomeView() {
   return (
     <div className="home-view">
       <div className="home-hero">
-        <h2 className="home-hero-title">MDMA Demo</h2>
-        <p className="home-hero-sub">Choose a mode to get started</p>
+        <h2 className="home-hero-title">MDMA</h2>
+        <p className="home-hero-sub">The open standard for AI-generated interactive UI</p>
       </div>
 
       <div className="home-sections">
+        <button
+          type="button"
+          className="home-card home-card--featured"
+          onClick={() => navigate(DOCS_ITEM.path)}
+        >
+          <span className="home-card-icon">{DOCS_ITEM.icon}</span>
+          <div className="home-card-featured-body">
+            <span className="home-card-label">{DOCS_ITEM.label}</span>
+            <span className="home-card-desc">{DOCS_ITEM.description}</span>
+          </div>
+        </button>
+
         {SECTIONS.map((section) => (
           <div key={section.label} className="home-section">
             <div className="home-section-header">

diff --git a/demo/src/docs/Code.tsx b/demo/src/docs/Code.tsx
@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import hljs from 'highlight.js/lib/core';
+import hljsBash from 'highlight.js/lib/languages/bash';
+import hljsJson from 'highlight.js/lib/languages/json';
+import hljsTypeScript from 'highlight.js/lib/languages/typescript';
+import hljsXml from 'highlight.js/lib/languages/xml';
+import hljsYaml from 'highlight.js/lib/languages/yaml';
+
+hljs.registerLanguage('bash', hljsBash);
+hljs.registerLanguage('json', hljsJson);
+hljs.registerLanguage('typescript', hljsTypeScript);
+hljs.registerLanguage('xml', hljsXml);
+hljs.registerLanguage('yaml', hljsYaml);
+
+const LANG_MAP: Record<string, string> = {
+  ts: 'typescript',
+  tsx: 'typescript',
+  mdma: 'yaml',
+  bash: 'bash',
+  json: 'json',
+  text: 'plaintext',
+  code: 'plaintext',
+};
+
+function HighlightedCode({ html, fallback }: { html: string | null; fallback: string }) {
+  if (!html) return <code>{fallback}</code>;
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: content is hljs output, not user input
+  return <code dangerouslySetInnerHTML={{ __html: html }} />;
+}
+
+export function Code({ children, lang }: { children: string; lang?: string }) {
+  const [copied, setCopied] = useState(false);
+
+  function copy() {
+    navigator.clipboard.writeText(children).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }
+
+  const hljsLang = LANG_MAP[lang ?? 'code'] ?? 'plaintext';
+  const highlighted =
+    hljsLang !== 'plaintext' && hljs.getLanguage(hljsLang)
+      ? hljs.highlight(children, { language: hljsLang }).value
+      : null;
+
+  return (
+    <div className="docs-code-block">
+      <div className="docs-code-header">
+        <span className="docs-code-lang">{lang ?? 'code'}</span>
+        <button type="button" className="docs-code-copy" onClick={copy}>
+          {copied ? '✓ Copied' : 'Copy'}
+        </button>
+      </div>
+      <pre className="docs-code">
+        <HighlightedCode html={highlighted} fallback={children} />
+      </pre>
+    </div>
+  );
+}