refactor: remove MUI, unify publisher pipeline, add shared component registry

Phase 1 - Publisher pipeline:
- Extract ~370 lines of inline CSS from html-renderer.ts into _publisher.css
- Create shared/component-defs.ts as single source of truth for component definitions
- Replace 6 regex blocks in postProcess() with linkedom DOM manipulation
- Add GET /api/preview/:docName for testing renders without publishing
- Add 12 snapshot tests for each postProcess transformation (46 tests total)

Phase 2 - Remove MUI:
- Replace all MUI components with native HTML elements + custom CSS
- Create _ui.css with editor chrome styles using --ed-* CSS tokens
- Create Tooltip.tsx using Floating UI (lightweight replacement)
- Replace @mui /icons-material with lucide-react
- Delete theme.ts, remove @mui /* and @emotion /* dependencies

Phase 3 - Documentation:
- Add docs/ARCHITECTURE.md covering CSS layers, HF Spaces constraints,
shared registry, publisher pipeline, and test coverage

Made-with: Cursor

Dockerfile

@@ -5,6 +5,7 @@ WORKDIR /app/frontend
 COPY frontend/package.json frontend/package-lock.json* frontend/.npmrc* ./
 RUN npm install
 COPY frontend/ ./
+COPY backend/src/shared/ ../backend/src/shared/
 RUN npm run build
 
 # --- Stage 2: Build backend ---

backend/package-lock.json

@@ -34,6 +34,7 @@
         "ai": "^6.0.158",
         "dotenv": "^17.4.1",
         "express": "^4.21.0",
+        "linkedom": "^0.18.12",
         "lowlight": "^3.3.0",
         "multer": "^2.1.1",
         "playwright": "^1.59.1",
@@ -2014,6 +2015,12 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
     "node_modules/buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -2195,6 +2202,40 @@
       "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
       "license": "MIT"
     },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cssom": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
+      "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -2255,6 +2296,73 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dotenv": {
       "version": "17.4.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.1.tgz",
@@ -2697,6 +2805,31 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/html-escaper": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",
+      "integrity": "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==",
+      "license": "MIT"
+    },
+    "node_modules/htmlparser2": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.1.0.tgz",
+      "integrity": "sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "entities": "^7.0.1"
+      }
+    },
     "node_modules/http-errors": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
@@ -3098,6 +3231,30 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/linkedom": {
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/linkedom/-/linkedom-0.18.12.tgz",
+      "integrity": "sha512-jalJsOwIKuQJSeTvsgzPe9iJzyfVaEJiEXl+25EkKevsULHvMJzpNqwvj1jOESWdmgKDiXObyjOYwlUqG7wo1Q==",
+      "license": "ISC",
+      "dependencies": {
+        "css-select": "^5.1.0",
+        "cssom": "^0.5.0",
+        "html-escaper": "^3.0.3",
+        "htmlparser2": "^10.0.0",
+        "uhyphen": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "canvas": ">= 2"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/linkify-it": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
@@ -3322,6 +3479,18 @@
         }
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -4174,6 +4343,12 @@
       "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
       "license": "MIT"
     },
+    "node_modules/uhyphen": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/uhyphen/-/uhyphen-0.2.0.tgz",
+      "integrity": "sha512-qz3o9CHXmJJPGBdqzab7qAYuW8kQGKNEuoHFYrBwV6hWIMcpAmxDLXojcHfFr9US1Pe6zUswEIJIbLI610fuqA==",
+      "license": "ISC"
+    },
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",

backend/package.json

@@ -37,6 +37,7 @@
     "ai": "^6.0.158",
     "dotenv": "^17.4.1",
     "express": "^4.21.0",
+    "linkedom": "^0.18.12",
     "lowlight": "^3.3.0",
     "multer": "^2.1.1",
     "playwright": "^1.59.1",

backend/src/publisher/extensions.ts

@@ -8,6 +8,7 @@
  */
 
 import { Node, mergeAttributes, type Extensions } from "@tiptap/core";
+import { SHARED_COMPONENT_DEFS, type SharedComponentDef } from "../shared/component-defs.js";
 import StarterKit from "@tiptap/starter-kit";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import Mathematics from "@tiptap/extension-mathematics";
@@ -173,89 +174,9 @@ const StackServer = Node.create({
   },
 });
 
-// ---- Generic wrapper/atomic components from the registry ----
+// ---- Generic wrapper/atomic components from the shared registry ----
 
-interface ComponentDefLite {
-  name: string;
-  kind: "wrapper" | "atomic";
-  fields: { name: string; type: string; default?: unknown }[];
-  content?: string;
-}
-
-const COMPONENT_DEFS: ComponentDefLite[] = [
-  {
-    name: "accordion",
-    kind: "wrapper",
-    fields: [
-      { name: "title", type: "string", default: "Details" },
-      { name: "open", type: "boolean", default: false },
-    ],
-  },
-  {
-    name: "note",
-    kind: "wrapper",
-    fields: [
-      { name: "title", type: "string", default: "" },
-      { name: "emoji", type: "string", default: "" },
-      { name: "variant", type: "select", default: "neutral" },
-    ],
-  },
-  {
-    name: "quoteBlock",
-    kind: "wrapper",
-    fields: [
-      { name: "author", type: "string", default: "" },
-      { name: "source", type: "string", default: "" },
-    ],
-  },
-  { name: "wide", kind: "wrapper", fields: [] },
-  { name: "fullWidth", kind: "wrapper", fields: [] },
-  { name: "sidenote", kind: "wrapper", fields: [] },
-  {
-    name: "reference",
-    kind: "wrapper",
-    fields: [
-      { name: "id", type: "string", default: "" },
-      { name: "caption", type: "string", default: "" },
-    ],
-  },
-  {
-    name: "htmlEmbed",
-    kind: "atomic",
-    fields: [
-      { name: "src", type: "string", default: "" },
-      { name: "title", type: "string", default: "" },
-      { name: "desc", type: "string", default: "" },
-      { name: "wide", type: "boolean", default: false },
-      { name: "downloadable", type: "boolean", default: false },
-    ],
-  },
-  {
-    name: "hfUser",
-    kind: "atomic",
-    fields: [
-      { name: "username", type: "string", default: "" },
-      { name: "name", type: "string", default: "" },
-      { name: "url", type: "string", default: "" },
-    ],
-  },
-  {
-    name: "rawHtml",
-    kind: "atomic",
-    fields: [
-      { name: "html", type: "string", default: "" },
-    ],
-  },
-  {
-    name: "mermaid",
-    kind: "atomic",
-    fields: [
-      { name: "code", type: "string", default: "" },
-    ],
-  },
-];
-
-function makeServerWrapperExt(def: ComponentDefLite) {
+function makeServerWrapperExt(def: SharedComponentDef) {
   return Node.create({
     name: def.name,
     group: "block",
@@ -280,7 +201,7 @@ function makeServerWrapperExt(def: ComponentDefLite) {
   });
 }
 
-function makeServerAtomicExt(def: ComponentDefLite) {
+function makeServerAtomicExt(def: SharedComponentDef) {
   return Node.create({
     name: def.name,
     group: "block",
@@ -303,8 +224,8 @@ function makeServerAtomicExt(def: ComponentDefLite) {
 }
 
 export function getServerExtensions(): Extensions {
-  const wrappers = COMPONENT_DEFS.filter((d) => d.kind === "wrapper").map(makeServerWrapperExt);
-  const atomics = COMPONENT_DEFS.filter((d) => d.kind === "atomic").map(makeServerAtomicExt);
+  const wrappers = SHARED_COMPONENT_DEFS.filter((d) => d.kind === "wrapper").map(makeServerWrapperExt);
+  const atomics = SHARED_COMPONENT_DEFS.filter((d) => d.kind === "atomic").map(makeServerAtomicExt);
 
   return [
     StarterKit.configure({

backend/src/publisher/html-renderer.ts

@@ -6,6 +6,7 @@
  */
 
 import { generateHTML } from "@tiptap/html";
+import { parseHTML } from "linkedom";
 import { getServerExtensions } from "./extensions.js";
 import type { PublishCSS } from "./index.js";
 
@@ -105,411 +106,16 @@ export function renderArticleHTML(
   </script>
 
   <style>
-/* Template foundation */
 ${css.variables}
 ${css.reset}
-
-/* Published page global reset (not needed in editor where MUI handles body) */
-body { font-family: var(--default-font-family); color: var(--text-color); }
-html { font-size: 16px; line-height: 1.6; background-color: var(--page-bg); overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 80px; }
-
 ${css.editorTokens}
 ${css.base}
 ${css.layout}
 ${css.components}
 ${css.article}
 ${css.print}
+${css.publisher}
 
-/* Publisher-only overrides */
-
-/* Theme toggle icon wrapper (from ThemeToggle.astro) */
-#theme-toggle .icon-wrapper {
-  display: grid;
-  place-items: center;
-  width: 20px;
-  height: 20px;
-}
-#theme-toggle .icon-wrapper .icon {
-  grid-area: 1 / 1;
-  filter: none !important;
-}
-#theme-toggle .icon-wrapper.animated .icon {
-  transition: opacity 0.35s ease;
-}
-#theme-toggle .icon-wrapper.spin-cw { animation: spin-cw 0.5s cubic-bezier(0.4,0,0.2,1); }
-#theme-toggle .icon-wrapper.spin-ccw { animation: spin-ccw 0.5s cubic-bezier(0.4,0,0.2,1); }
-@keyframes spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-@keyframes spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
-
-/* Note component - aligned with template Note.astro */
-div[data-component="note"] {
-  background: var(--surface-bg);
-  border-left: 2px solid var(--border-color);
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
-  padding: 20px 18px;
-  margin: var(--block-spacing-y, 1em) 0;
-}
-div[data-component="note"][variant="info"] {
-  border-left-color: #f39c12;
-  background: color-mix(in oklab, #f39c12 10%, var(--surface-bg));
-}
-div[data-component="note"][variant="success"] {
-  border-left-color: #2ecc71;
-  background: color-mix(in oklab, #2ecc71 8%, var(--surface-bg));
-}
-div[data-component="note"][variant="danger"] {
-  border-left-color: #e74c3c;
-  background: color-mix(in oklab, #e74c3c 8%, var(--surface-bg));
-}
-div[data-component="note"] .note__title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-color);
-  margin-bottom: 6px;
-}
-div[data-component="note"] > *:first-child { margin-top: 0; }
-div[data-component="note"] > *:last-child { margin-bottom: 0; }
-
-/* Quote component - aligned with template Quote.astro */
-div[data-component="quoteBlock"] {
-  position: relative;
-  margin: 32px 0;
-  max-width: 600px;
-  padding: 0;
-  border: none;
-  background: none;
-}
-div[data-component="quoteBlock"]::before {
-  content: '\\201C';
-  position: absolute;
-  top: -24px;
-  left: -30px;
-  font-size: 8rem;
-  font-weight: 400;
-  color: var(--text-color);
-  opacity: 0.05;
-  z-index: -1;
-  line-height: 1;
-  pointer-events: none;
-}
-div[data-component="quoteBlock"] .quote-text {
-  font-size: 1.5rem;
-  line-height: 1.4;
-  font-weight: 400;
-  letter-spacing: -0.01em;
-  color: var(--text-color);
-}
-div[data-component="quoteBlock"] .quote-footer {
-  font-size: 0.875rem;
-  color: var(--muted-color);
-  margin-top: 12px;
-}
-div[data-component="quoteBlock"] .quote-author::before {
-  content: '\\2014\\00A0';
-  font-style: normal;
-}
-div[data-component="quoteBlock"] .quote-author {
-  font-weight: 500;
-  font-style: italic;
-  color: var(--text-color);
-  opacity: 0.85;
-}
-div[data-component="quoteBlock"] .quote-source {
-  font-weight: 500;
-  font-style: italic;
-  color: var(--text-color);
-  opacity: 0.85;
-}
-div[data-component="quoteBlock"] > *:first-child { margin-top: 0; }
-div[data-component="quoteBlock"] > *:last-child { margin-bottom: 0; }
-
-/* Sidenote component - aligned with template Sidenote.astro */
-div[data-component="sidenote"] {
-  font-size: 0.9rem;
-  color: var(--muted-color);
-  padding: 0 30px;
-  margin: 1em 0;
-}
-div[data-component="sidenote"] > *:first-child { margin-top: 0; }
-div[data-component="sidenote"] > *:last-child { margin-bottom: 0; }
-
-/* Reference wrapper - aligned with template Reference.astro */
-div[data-component="reference"] {
-  margin: 0 0 var(--spacing-4, 1rem);
-}
-div[data-component="reference"] .reference__caption {
-  text-align: left;
-  font-size: 0.9rem;
-  color: var(--muted-color);
-  margin-top: 6px;
-}
-div[data-component="reference"] > *:first-child { margin-top: 0; }
-div[data-component="reference"] > *:last-child { margin-bottom: 0; }
-
-/* Stack / multi-column layout - aligned with template Stack.astro */
-div[data-component="stack"] {
-  display: grid;
-  gap: 1rem;
-  margin: var(--block-spacing-y, 1.5em) 0;
-  width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-div[data-component="stack"][data-layout="2-column"] { grid-template-columns: repeat(2, 1fr); }
-div[data-component="stack"][data-layout="3-column"] { grid-template-columns: repeat(3, 1fr); }
-div[data-component="stack"][data-layout="4-column"] { grid-template-columns: repeat(4, 1fr); }
-div[data-component="stack"][data-layout="auto"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
-div[data-component="stack"]:not([data-layout]) { grid-template-columns: repeat(2, 1fr); }
-div[data-component="stack"][data-gap="small"] { gap: 0.5rem; }
-div[data-component="stack"][data-gap="large"] { gap: 2rem; }
-div[data-type="stack-column"] { min-width: 0; overflow: hidden; word-wrap: break-word; overflow-wrap: break-word; }
-div[data-type="stack-column"] > *:first-child { margin-top: 0; }
-div[data-type="stack-column"] > *:last-child { margin-bottom: 0; }
-@media (max-width: 768px) {
-  div[data-component="stack"][data-layout="2-column"],
-  div[data-component="stack"][data-layout="3-column"],
-  div[data-component="stack"][data-layout="4-column"],
-  div[data-component="stack"][data-layout="auto"],
-  div[data-component="stack"]:not([data-layout]) { grid-template-columns: 1fr !important; }
-}
-@media (min-width: 769px) and (max-width: 1100px) {
-  div[data-component="stack"][data-layout="3-column"],
-  div[data-component="stack"][data-layout="4-column"],
-  div[data-component="stack"][data-layout="auto"] { grid-template-columns: repeat(2, 1fr) !important; }
-}
-
-/* Wide / full-width helpers */
-div[data-component="wide"] {
-  width: min(1100px, 100vw - 64px);
-  margin-left: 50%;
-  transform: translateX(-50%);
-}
-div[data-component="fullWidth"] {
-  width: 100vw;
-  margin-left: calc(50% - 50vw);
-}
-
-/* Accordion - aligned with template Accordion.astro */
-details[data-component="accordion"] {
-  border: 1px solid var(--border-color);
-  border-radius: var(--table-border-radius, 8px);
-  background: var(--surface-bg);
-  padding: 0;
-  margin: 0 0 var(--spacing-4, 1em);
-  transition: box-shadow 180ms ease, border-color 180ms ease;
-}
-details[data-component="accordion"][open] {
-  border-color: color-mix(in oklab, var(--border-color), var(--primary-color) 20%);
-}
-details[data-component="accordion"] > summary {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
-  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
-  cursor: pointer;
-  font-weight: 600;
-  color: var(--text-color);
-  list-style: none;
-  user-select: none;
-}
-details[data-component="accordion"][open] > summary {
-  border-bottom: 1px solid var(--border-color);
-}
-details[data-component="accordion"] > summary::-webkit-details-marker { display: none; }
-details[data-component="accordion"] > summary::marker { content: ""; }
-details[data-component="accordion"] > summary::after {
-  content: '';
-  display: inline-block;
-  width: 0.5em;
-  height: 0.5em;
-  border-right: 2px solid currentColor;
-  border-bottom: 2px solid currentColor;
-  transform: rotate(-45deg);
-  transition: transform 220ms ease;
-  opacity: 0.6;
-  flex-shrink: 0;
-}
-details[data-component="accordion"][open] > summary::after {
-  transform: rotate(45deg);
-}
-details[data-component="accordion"] > .accordion-content {
-  padding: 8px;
-}
-details[data-component="accordion"] > .accordion-content > *:first-child { margin-top: 0; }
-details[data-component="accordion"] > .accordion-content > *:last-child { margin-bottom: 0; }
-
-/* Footer */
-.footer {
-  contain: layout style;
-  font-size: 0.8em;
-  line-height: 1.7em;
-  margin-top: 60px;
-  margin-bottom: 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  color: rgba(0, 0, 0, 0.5);
-}
-
-.footer-inner {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 60px 16px 48px;
-  display: grid;
-  grid-template-columns: 220px minmax(0, 680px) 260px;
-  gap: 32px;
-  align-items: start;
-}
-
-.citation-block,
-.references-block,
-.reuse-block,
-.doi-block {
-  display: contents;
-}
-
-.citation-block > .footer-heading,
-.references-block > .footer-heading,
-.reuse-block > .footer-heading,
-.doi-block > .footer-heading {
-  grid-column: 1;
-  font-size: 15px;
-  font-weight: 600;
-  margin: 0;
-  text-align: right;
-  padding-right: 30px;
-}
-
-.citation-block > :not(.footer-heading),
-.references-block > :not(.footer-heading),
-.reuse-block > :not(.footer-heading),
-.doi-block > :not(.footer-heading) {
-  grid-column: 2;
-}
-
-.citation-block .footer-heading { margin: 0 0 8px; }
-
-.citation-block p,
-.reuse-block p,
-.doi-block p,
-.footnotes ol,
-.footnotes ol p,
-.references { margin-top: 0; }
-
-.footnote-ref a {
-  color: var(--primary-color, #958DF1);
-  text-decoration: none;
-  font-size: 0.8em;
-}
-.footnote-ref a:hover { text-decoration: underline; }
-.footnotes ol { padding-left: 1.5em; }
-.footnotes li { margin-bottom: 0.5em; font-size: 0.9rem; color: var(--muted-color, #888); }
-.footnotes li p { margin: 0; }
-.footnote-backref { text-decoration: none; margin-left: 4px; }
-
-.citation {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 11px;
-  line-height: 15px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  background: rgba(0, 0, 0, 0.02);
-  padding: 10px 18px;
-  border-radius: 3px;
-  color: rgba(150, 150, 150, 1);
-  overflow: hidden;
-  margin-top: -12px;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-.citation a { color: rgba(0, 0, 0, 0.6); text-decoration: underline; }
-.citation.short { margin-top: -4px; }
-
-.citation-inline {
-  color: var(--primary-color, #958df1);
-  text-decoration: none;
-  text-decoration-line: underline;
-  text-decoration-color: transparent;
-  text-underline-offset: 2px;
-  cursor: pointer;
-  transition: text-decoration-color 0.15s;
-}
-.citation-inline:hover {
-  text-decoration-color: currentColor;
-}
-
-.bibliography-content .csl-entry {
-  margin-bottom: 0.75em;
-  padding-left: 1.5em;
-  text-indent: -1.5em;
-  font-size: 0.9em;
-  line-height: 1.5;
-}
-.bibliography-content .csl-entry:target {
-  background: rgba(149, 141, 241, 0.1);
-  border-radius: 4px;
-  padding: 4px 4px 4px 1.5em;
-}
-
-.references-block .footer-heading { margin: 0; }
-.references-block ol { padding: 0 0 0 15px; }
-.references-block li { margin-bottom: 1em; }
-.references-block a { color: var(--text-color); }
-
-.footer a {
-  color: var(--primary-color);
-  border-bottom: 1px solid var(--link-underline);
-  text-decoration: none;
-}
-.footer a:hover {
-  color: var(--primary-color-hover);
-  border-bottom-color: var(--link-underline-hover);
-}
-
-.template-credit { display: contents; }
-.template-credit p {
-  grid-column: 2;
-  margin: 24px 0 0 0;
-  font-size: 0.85em;
-  color: rgba(0, 0, 0, 0.5);
-}
-.template-credit a { color: rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
-.template-credit a:hover { color: rgba(0, 0, 0, 0.8); border-bottom-color: rgba(0, 0, 0, 0.3); }
-
-[data-theme="dark"] .footer { border-top-color: rgba(255, 255, 255, 0.15); color: rgba(200, 200, 200, 0.8); }
-[data-theme="dark"] .citation { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.15); color: rgba(200, 200, 200, 1); }
-[data-theme="dark"] .citation a { color: rgba(255, 255, 255, 0.75); }
-[data-theme="dark"] .bibliography-content .csl-entry:target { background: rgba(149, 141, 241, 0.15); }
-[data-theme="dark"] .footer a { color: var(--primary-color); }
-[data-theme="dark"] .template-credit p { color: rgba(200, 200, 200, 0.6); }
-[data-theme="dark"] .template-credit a { color: rgba(200, 200, 200, 0.7); border-bottom-color: rgba(255, 255, 255, 0.2); }
-[data-theme="dark"] .template-credit a:hover { color: rgba(200, 200, 200, 0.9); border-bottom-color: rgba(255, 255, 255, 0.35); }
-
-@media (max-width: 1100px) {
-  .footer-inner { grid-template-columns: 1fr; gap: 16px; display: block; padding: 40px 16px; }
-  .footer-inner > .footer-heading { grid-column: auto; margin-top: 16px; }
-}
-
-@media (min-width: 768px) {
-  .references-block ol { padding: 0 0 0 30px; margin-left: -30px; }
-}
-
-/* PDF download link */
-a.pdf-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4em;
-  color: var(--accent-color, #4493f8);
-  text-decoration: none;
-  font-weight: 500;
-}
-a.pdf-link:hover { text-decoration: underline; }
-a.pdf-link::before { content: "\\1F4C4"; }
-
-/* Image lightbox dialog */
-dialog.lightbox { border: none; background: transparent; padding: 0; max-width: 95vw; max-height: 95vh; }
-dialog.lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }
-dialog.lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; border-radius: 4px; }
   </style>
 </head>
 <body>
@@ -944,120 +550,132 @@ function extractBibliographyHtml(json: Record<string, unknown>): string {
 }
 
 /**
- * Post-process the raw generateHTML output:
- * - Inject bibliography HTML (extracted before generateHTML)
+ * Post-process the raw generateHTML output using linkedom DOM manipulation:
  * - Transform accordion divs into <details><summary>
- * - Transform htmlEmbed into iframes
+ * - Convert inline citation spans into anchor links
+ * - Inject bibliography HTML with entry anchors
+ * - Transform mermaid divs into <pre class="mermaid">
+ * - Transform htmlEmbed divs into iframes
+ * - Collect footnotes and append a footnotes section
  */
 function postProcess(html: string, biblioHtml: string, citationData?: CitationData): string {
-  let result = html;
-
-  // Accordion: div[data-component="accordion"] → <details><summary>
-  result = result.replace(
-    /<div[^>]*data-component="accordion"[^>]*>([\s\S]*?)<\/div>/g,
-    (_match, inner) => {
-      const titleMatch = inner.match(/data-title="([^"]*)"/);
-      const openMatch = inner.match(/data-open="true"/);
-      const title = titleMatch ? titleMatch[1] : "Details";
-      return `<details data-component="accordion"${openMatch ? " open" : ""}>
-        <summary>${escapeHtml(title)}</summary>
-        <div class="accordion-content">${inner}</div>
-      </details>`;
-    }
-  );
+  const { document } = parseHTML(`<!DOCTYPE html><html><body>${html}</body></html>`);
+
+  // 1. Accordion: div[data-component="accordion"] -> <details><summary>
+  for (const div of [...document.querySelectorAll('div[data-component="accordion"]')]) {
+    const title = div.getAttribute("title") || "Details";
+    const isOpen = div.getAttribute("open") === "true";
+
+    const details = document.createElement("details");
+    details.setAttribute("data-component", "accordion");
+    if (isOpen) details.setAttribute("open", "");
+
+    const summary = document.createElement("summary");
+    summary.textContent = title;
+    details.appendChild(summary);
+
+    const content = document.createElement("div");
+    content.className = "accordion-content";
+    while (div.firstChild) content.appendChild(div.firstChild);
+    details.appendChild(content);
+
+    div.replaceWith(details);
+  }
 
-  // Inline citations: replace <span data-type="citation" ...>label</span>
-  // with proper numbered links pointing to bibliography entries.
+  // 2. Inline citations: span[data-type="citation"] -> <a> links
   const NUMERIC_STYLES = new Set(["ieee", "vancouver"]);
   const isNumeric = citationData ? NUMERIC_STYLES.has(citationData.style) : false;
   const citationKeyOrder: string[] = [];
 
-  result = result.replace(
-    /<span[^>]*data-type="citation"[^>]*>[\s\S]*?<\/span>/g,
-    (match) => {
-      const keyMatch = match.match(/(?:\skey="|data-key=")([^"]*)"/);
-      if (!keyMatch) return match;
-      const key = keyMatch[1];
+  for (const span of [...document.querySelectorAll('span[data-type="citation"]')]) {
+    const key = span.getAttribute("key") || span.getAttribute("data-key");
+    if (!key) continue;
 
-      if (!citationKeyOrder.includes(key)) citationKeyOrder.push(key);
-      const idx = citationKeyOrder.indexOf(key) + 1;
+    if (!citationKeyOrder.includes(key)) citationKeyOrder.push(key);
+    const idx = citationKeyOrder.indexOf(key) + 1;
 
-      // Extract the label text from the original HTML
-      const labelMatch = match.match(/>([^<]*)<\/span>/);
-      const originalLabel = labelMatch ? labelMatch[1] : `[${key}]`;
+    const originalLabel = span.textContent || `[${key}]`;
+    const displayLabel = isNumeric ? `[${idx}]` : originalLabel;
 
-      // For numeric styles, always use number; for author-date, keep original label
-      const displayLabel = isNumeric ? `[${idx}]` : originalLabel;
+    const a = document.createElement("a");
+    a.setAttribute("href", `#ref-${key}`);
+    a.className = "citation-inline";
+    a.setAttribute("id", `cite-${key}-${idx}`);
+    a.setAttribute("title", key);
+    a.textContent = displayLabel;
 
-      return `<a href="#ref-${escapeHtml(key)}" class="citation-inline" id="cite-${escapeHtml(key)}-${idx}" title="${escapeHtml(key)}">${displayLabel}</a>`;
-    }
-  );
-
-  // Bibliography: replace empty placeholder with the pre-extracted HTML.
-  // Add id anchors to bibliography entries for citation linking.
-  result = result.replace(
-    /<div([^>]*data-type="bibliography"[^>]*)><\/div>/gi,
-    (_match, attrs: string) => {
-      const cleanAttrs = attrs.replace(/\s*renderedhtml="[^"]*"/i, "");
-      if (biblioHtml) {
-        // Wrap bibliography HTML with entry anchors
-        let enrichedBiblio = biblioHtml;
-        if (citationData && citationData.orderedKeys.length > 0) {
-          enrichedBiblio = addBibliographyAnchors(biblioHtml, citationData.orderedKeys);
-        }
-        return `<div${cleanAttrs}><h2 class="bibliography-title">References</h2><div class="bibliography-content">${enrichedBiblio}</div></div>`;
+    span.replaceWith(a);
+  }
+
+  // 3. Bibliography: inject pre-formatted HTML into the placeholder
+  for (const div of [...document.querySelectorAll('div[data-type="bibliography"]')]) {
+    div.removeAttribute("renderedhtml");
+
+    if (biblioHtml) {
+      let enrichedBiblio = biblioHtml;
+      if (citationData && citationData.orderedKeys.length > 0) {
+        enrichedBiblio = addBibliographyAnchors(biblioHtml, citationData.orderedKeys);
       }
-      return `<div${cleanAttrs}><p class="bibliography-empty">No citations</p></div>`;
-    }
-  );
-
-  // Mermaid: div[data-component="mermaid"] → <pre class="mermaid">code</pre>
-  result = result.replace(
-    /<div[^>]*data-component="mermaid"[^>]*><\/div>/g,
-    (match) => {
-      const codeMatch = match.match(/data-code="([^"]*)"/);
-      const code = codeMatch ? codeMatch[1].replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#039;/g, "'") : "";
-      return `<pre class="mermaid">${escapeHtml(code)}</pre>`;
-    }
-  );
-
-  // HtmlEmbed: div[data-component="htmlEmbed"] → iframe with srcdoc
-  result = result.replace(
-    /<div[^>]*data-component="htmlEmbed"[^>]*data-src="([^"]*)"[^>]*><\/div>/g,
-    (_match, src) => {
-      return `<div class="html-embed-container">
-        <iframe srcdoc="" data-embed-src="${escapeHtml(src)}" 
-                style="width:100%;border:none;min-height:400px;"
-                loading="lazy" sandbox="allow-scripts"></iframe>
-      </div>`;
-    }
-  );
-
-  // Footnotes: collect all <span data-type="footnote">, number them,
-  // replace inline markers with superscript links, and append a
-  // footnotes section at the bottom.
-  const footnotes: string[] = [];
-  result = result.replace(
-    /<span[^>]*data-type="footnote"[^>]*>[\s\S]*?<\/span>/g,
-    (match) => {
-      const contentMatch = match.match(/(?:data-content|title)="([^"]*)"/);
-      const raw = contentMatch ? contentMatch[1] : "";
-      const text = raw
-        .replace(/&amp;/g, "&").replace(/&lt;/g, "<")
-        .replace(/&gt;/g, ">").replace(/&quot;/g, '"')
-        .replace(/&#039;/g, "'");
-      footnotes.push(text);
-      const idx = footnotes.length;
-      return `<sup class="footnote-ref"><a href="#fn-${idx}" id="fnref-${idx}">[${idx}]</a></sup>`;
+      div.innerHTML = `<h2 class="bibliography-title">References</h2><div class="bibliography-content">${enrichedBiblio}</div>`;
+    } else {
+      div.innerHTML = `<p class="bibliography-empty">No citations</p>`;
     }
-  );
+  }
+
+  // 4. Mermaid: div[data-component="mermaid"] -> <pre class="mermaid">
+  for (const div of [...document.querySelectorAll('div[data-component="mermaid"]')]) {
+    const code = div.getAttribute("code") || div.getAttribute("data-code") || "";
+    const pre = document.createElement("pre");
+    pre.className = "mermaid";
+    pre.textContent = code;
+    div.replaceWith(pre);
+  }
 
-  if (footnotes.length > 0) {
-    const items = footnotes
+  // 5. HtmlEmbed: div[data-component="htmlEmbed"] -> iframe with srcdoc
+  for (const div of [...document.querySelectorAll('div[data-component="htmlEmbed"]')]) {
+    const src = div.getAttribute("src") || div.getAttribute("data-src") || "";
+
+    const container = document.createElement("div");
+    container.className = "html-embed-container";
+
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute("srcdoc", "");
+    iframe.setAttribute("data-embed-src", src);
+    iframe.setAttribute("style", "width:100%;border:none;min-height:400px;");
+    iframe.setAttribute("loading", "lazy");
+    iframe.setAttribute("sandbox", "allow-scripts");
+    container.appendChild(iframe);
+
+    div.replaceWith(container);
+  }
+
+  // 6. Footnotes: collect span[data-type="footnote"], replace with superscript links
+  const footnoteSpans = [...document.querySelectorAll('span[data-type="footnote"]')];
+  const footnoteTexts: string[] = [];
+
+  for (const span of footnoteSpans) {
+    const text = span.getAttribute("content") || span.getAttribute("data-content") || span.getAttribute("title") || "";
+    footnoteTexts.push(text);
+    const idx = footnoteTexts.length;
+
+    const sup = document.createElement("sup");
+    sup.className = "footnote-ref";
+    const a = document.createElement("a");
+    a.setAttribute("href", `#fn-${idx}`);
+    a.setAttribute("id", `fnref-${idx}`);
+    a.textContent = `[${idx}]`;
+    sup.appendChild(a);
+
+    span.replaceWith(sup);
+  }
+
+  let result = document.body.innerHTML;
+
+  if (footnoteTexts.length > 0) {
+    const items = footnoteTexts
       .map((text, i) => `<li id="fn-${i + 1}"><p>${escapeHtml(text)} <a href="#fnref-${i + 1}" class="footnote-backref" aria-label="Back to text">\u21A9</a></p></li>`)
       .join("\n");
-    const footnotesSection = `<section class="footnotes"><h2>Footnotes</h2><ol>${items}</ol></section>`;
-    result += footnotesSection;
+    result += `<section class="footnotes"><h2>Footnotes</h2><ol>${items}</ol></section>`;
   }
 
   return result;
@@ -1066,18 +684,16 @@ function postProcess(html: string, biblioHtml: string, citationData?: CitationDa
 /**
  * Add id anchors to bibliography entries so inline citations can link to them.
  * citation-js outputs entries as <div class="csl-entry"> elements.
- * We wrap each one with an id matching the citation key.
+ * Uses linkedom for reliable DOM manipulation.
  */
 function addBibliographyAnchors(html: string, orderedKeys: string[]): string {
-  let idx = 0;
-  return html.replace(
-    /<div class="csl-entry">/g,
-    () => {
-      const key = orderedKeys[idx] || `entry-${idx}`;
-      idx++;
-      return `<div class="csl-entry" id="ref-${key}">`;
-    }
-  );
+  const { document } = parseHTML(`<!DOCTYPE html><html><body>${html}</body></html>`);
+  const entries = document.querySelectorAll(".csl-entry");
+  entries.forEach((entry, idx) => {
+    const key = orderedKeys[idx] || `entry-${idx}`;
+    entry.setAttribute("id", `ref-${key}`);
+  });
+  return document.body.innerHTML;
 }
 
 function escapeHtml(str: string): string {

backend/src/publisher/index.ts

@@ -32,6 +32,7 @@ export interface PublishCSS {
   editorTokens: string;
   article: string;
   components: string;
+  publisher: string;
 }
 
 /**
@@ -82,7 +83,6 @@ function loadCSS(): PublishCSS {
         .map((f) => readSafe(join(dir, "components", f)))
         .join("\n");
 
-      // Read all CSS, resolve @custom-media, then split back
       const variablesRaw = readFileSync(varsPath, "utf-8");
       const resetRaw = readSafe(join(dir, "_reset.css"));
       const baseRaw = readFileSync(basePath, "utf-8");
@@ -90,9 +90,10 @@ function loadCSS(): PublishCSS {
       const printRaw = readSafe(join(dir, "_print.css"));
       const editorTokensRaw = readSafe(join(dir, "_editor-tokens.css"));
       const articleRaw = readSafe(join(dir, "article.css"));
+      const publisherRaw = readSafe(join(dir, "_publisher.css"));
 
       // @custom-media declarations live in _variables.css - resolve across all files
-      const allRaw = [variablesRaw, resetRaw, baseRaw, layoutRaw, printRaw, editorTokensRaw, articleRaw, componentsCss].join("\n/* __CSS_BOUNDARY__ */\n");
+      const allRaw = [variablesRaw, resetRaw, baseRaw, layoutRaw, printRaw, editorTokensRaw, articleRaw, componentsCss, publisherRaw].join("\n/* __CSS_BOUNDARY__ */\n");
       const resolved = resolveCustomMedia(allRaw);
       const parts = resolved.split("/* __CSS_BOUNDARY__ */");
 
@@ -105,12 +106,13 @@ function loadCSS(): PublishCSS {
         editorTokens: parts[5]?.trim() ?? "",
         article: parts[6]?.trim() ?? "",
         components: parts[7]?.trim() ?? "",
+        publisher: parts[8]?.trim() ?? "",
       };
     }
   }
 
   console.warn("[publish] CSS files not found, tried:", candidates);
-  return { variables: "", reset: "", base: "", layout: "", print: "", editorTokens: "", article: "", components: "" };
+  return { variables: "", reset: "", base: "", layout: "", print: "", editorTokens: "", article: "", components: "", publisher: "" };
 }
 
 interface AuthorObj {
@@ -234,6 +236,54 @@ export interface PublishResult {
   error?: string;
 }
 
+/**
+ * Render a preview HTML of the document without saving or uploading anything.
+ * Useful for testing the publisher pipeline.
+ */
+export async function previewDocument(docName: string): Promise<{ html: string } | { error: string }> {
+  const p = docPath(docName);
+  if (!existsSync(p)) return { error: "Document not found" };
+
+  const ydoc = new Y.Doc();
+  const data = readFileSync(p);
+  Y.applyUpdate(ydoc, new Uint8Array(data));
+
+  const { json, frontmatter, authors, affiliations } = extractFromYDoc(ydoc);
+  const citationData = extractCitationsFromYDoc(ydoc, json);
+
+  const meta: PublishMeta = {
+    title: (frontmatter.title as string) || docName,
+    subtitle: (frontmatter.subtitle as string) || undefined,
+    description: (frontmatter.description as string) || "",
+    authors: authors.map((a) => ({
+      name: a.name,
+      url: a.url,
+      affiliationIndices: a.affiliations || [],
+      affiliationNames: (a.affiliations || [])
+        .map((idx) => affiliations[idx - 1]?.name)
+        .filter(Boolean) as string[],
+    })),
+    affiliations: affiliations.map((a) => ({ name: a.name, url: a.url })),
+    date: (frontmatter.published as string) || (frontmatter.date as string) || new Date().toISOString(),
+    doi: (frontmatter.doi as string) || undefined,
+    licence: (frontmatter.licence as string) || (frontmatter.license as string) || undefined,
+  };
+
+  const css = loadCSS();
+
+  let biblioHtml = "";
+  if (citationData.entries.length > 0) {
+    try {
+      biblioHtml = await formatBibliographyServer(citationData.entries, citationData.style);
+    } catch (err) {
+      console.error("[preview] bibliography formatting failed:", err);
+    }
+  }
+
+  const html = renderArticleHTML(json, meta, css, citationData, biblioHtml);
+  return { html };
+}
+
 /**
  * Run the full publish pipeline for a document.
  */

backend/src/server.ts

@@ -23,7 +23,7 @@ import {
   flushAll,
 } from "./hf-storage.js";
 import { resolveUser, extractToken, isOAuthEnabled, handleOAuthAuthorize, handleOAuthCallback } from "./auth.js";
-import { publishDocument } from "./publisher/index.js";
+import { publishDocument, previewDocument } from "./publisher/index.js";
 import { DATA_DIR, docPath, sanitizeName } from "./utils.js";
 
 const PORT = parseInt(process.env.PORT || "8080", 10);
@@ -222,6 +222,42 @@ app.post("/api/chat", handleChat);
 
 app.use("/api/citations", citationsRouter);
 
+// ---------- Preview (render without saving) ----------
+
+app.get("/api/preview/:docName", async (req, res) => {
+  const docName = req.params.docName || DEFAULT_DOC_NAME;
+
+  if (oauthEnabled) {
+    const token = extractToken(req.headers.cookie);
+    const user = await resolveUser(token);
+    if (!user || !user.canEdit) {
+      res.status(403).json({ error: "Unauthorized" });
+      return;
+    }
+  }
+
+  try {
+    // Flush the live Hocuspocus doc to disk first
+    const conn = await hocuspocus.openDirectConnection(docName);
+    if (conn.document) {
+      const update = Y.encodeStateAsUpdate(conn.document);
+      writeFileSync(docPath(docName), Buffer.from(update));
+    }
+    await conn.disconnect();
+
+    const result = await previewDocument(docName);
+    if ("error" in result) {
+      res.status(404).json({ error: result.error });
+      return;
+    }
+    res.setHeader("Content-Type", "text/html; charset=utf-8");
+    res.send(result.html);
+  } catch (err: any) {
+    console.error("[preview] error:", err);
+    res.status(500).json({ error: err.message || "Preview failed" });
+  }
+});
+
 // ---------- Publish ----------
 
 app.post("/api/publish", async (req, res) => {

backend/src/shared/component-defs.ts

@@ -0,0 +1,94 @@
+// ---------------------------------------------------------------------------
+// Shared component definitions
+//
+// Single source of truth for the MDX component registry.
+// Both the frontend editor and the backend publisher import this file.
+// ---------------------------------------------------------------------------
+
+export interface SharedField {
+  name: string;
+  type: "string" | "boolean" | "select";
+  default?: unknown;
+  options?: string[];
+}
+
+export interface SharedComponentDef {
+  name: string;
+  kind: "wrapper" | "atomic";
+  fields: SharedField[];
+  /** ProseMirror content expression (wrapper only, defaults to "block+") */
+  content?: string;
+}
+
+export const SHARED_COMPONENT_DEFS: SharedComponentDef[] = [
+  {
+    name: "accordion",
+    kind: "wrapper",
+    fields: [
+      { name: "title", type: "string", default: "Details" },
+      { name: "open", type: "boolean", default: false },
+    ],
+  },
+  {
+    name: "note",
+    kind: "wrapper",
+    fields: [
+      { name: "title", type: "string", default: "" },
+      { name: "emoji", type: "string", default: "" },
+      { name: "variant", type: "select", default: "neutral", options: ["neutral", "info", "success", "danger"] },
+    ],
+  },
+  {
+    name: "quoteBlock",
+    kind: "wrapper",
+    fields: [
+      { name: "author", type: "string", default: "" },
+      { name: "source", type: "string", default: "" },
+    ],
+  },
+  { name: "wide", kind: "wrapper", fields: [] },
+  { name: "fullWidth", kind: "wrapper", fields: [] },
+  { name: "sidenote", kind: "wrapper", fields: [] },
+  {
+    name: "reference",
+    kind: "wrapper",
+    fields: [
+      { name: "id", type: "string", default: "" },
+      { name: "caption", type: "string", default: "" },
+    ],
+  },
+  {
+    name: "htmlEmbed",
+    kind: "atomic",
+    fields: [
+      { name: "src", type: "string", default: "" },
+      { name: "title", type: "string", default: "" },
+      { name: "desc", type: "string", default: "" },
+      { name: "wide", type: "boolean", default: false },
+      { name: "downloadable", type: "boolean", default: false },
+    ],
+  },
+  {
+    name: "hfUser",
+    kind: "atomic",
+    fields: [
+      { name: "username", type: "string", default: "" },
+      { name: "name", type: "string", default: "" },
+      { name: "url", type: "string", default: "" },
+    ],
+  },
+  {
+    name: "rawHtml",
+    kind: "atomic",
+    fields: [
+      { name: "html", type: "string", default: "" },
+    ],
+  },
+  {
+    name: "mermaid",
+    kind: "atomic",
+    fields: [
+      { name: "code", type: "string", default: "" },
+    ],
+  },
+];

backend/tests/__snapshots__/html-renderer-snapshot.test.ts.snap

@@ -0,0 +1,475 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`snapshot - full render > matches snapshot for a typical article 1`] = `
+"<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Test Article</title>
+  <meta name="description" content="A test article">
+  <meta name="author" content="Alice">
+
+  <!-- Open Graph -->
+  <meta property="og:type" content="article">
+  <meta property="og:title" content="Test Article">
+  <meta property="og:description" content="A test article">
+  
+  <meta property="article:published_time" content="2025-01-01">
+  <meta property="article:author" content="Alice">
+
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Test Article">
+  <meta name="twitter:description" content="A test article">
+  
+
+  <!-- KaTeX CSS -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css"
+        integrity="sha384-zh0CIslj3dQfMxK3pZnPJAb3bprHitCE2vBz9TyOTICAn3fso5GYa90qPNMBclov"
+        crossorigin="anonymous">
+
+  <!-- highlight.js for code syntax highlighting -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css">
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
+  <script>hljs.highlightAll();</script>
+
+  <!-- Mermaid (renders <pre class="mermaid"> blocks) -->
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+    mermaid.initialize({ startOnLoad: true, theme: 'neutral' });
+  </script>
+
+  <style>
+
+
+
+
+
+
+
+
+
+
+  </style>
+</head>
+<body>
+  <button id="theme-toggle" aria-label="Toggle color theme">
+    <span class="icon-wrapper">
+      <svg class="icon icon--sun" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="23"/><line x1="1" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="23" y2="12"/><line x1="4.22" y1="4.22" x2="6.34" y2="6.34"/><line x1="17.66" y1="17.66" x2="19.78" y2="19.78"/><line x1="4.22" y1="19.78" x2="6.34" y2="17.66"/><line x1="17.66" y1="6.34" x2="19.78" y2="4.22"/>
+      </svg>
+      <svg class="icon icon--moon" style="opacity:0" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+      </svg>
+    </span>
+  </button>
+
+  <!-- Mobile TOC toggle -->
+  <button class="toc-mobile-toggle" aria-label="Open table of contents" aria-expanded="false">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
+    </svg>
+  </button>
+  <div class="toc-mobile-backdrop" aria-hidden="true"></div>
+  <aside class="toc-mobile-sidebar" aria-label="Table of Contents">
+    <div class="toc-mobile-sidebar__header">
+      <span class="toc-mobile-sidebar__title">Table of Contents</span>
+      <button class="toc-mobile-sidebar__close" aria-label="Close">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+        </svg>
+      </button>
+    </div>
+    <div class="toc-mobile-sidebar__body" id="toc-mobile-placeholder"></div>
+  </aside>
+
+  <!-- Hero -->
+  <section class="hero">
+    <h1 class="hero-title">Test Article</h1>
+    
+  </section>
+
+  <!-- Meta bar -->
+  <header class="meta"><div class="meta-container"><div class="meta-container-cell"><h3>Authors</h3><ul class="authors"><li>Alice</li></ul></div><div class="meta-container-cell"><h3>Affiliations</h3><p>MIT</p></div><div class="meta-container-cell"><h3>Published</h3><p>January 1, 2025</p></div></div></header>
+
+  <section class="content-grid">
+    <nav class="table-of-contents" aria-label="Table of Contents">
+      <div class="title">Table of Contents</div>
+      <div id="toc-placeholder"></div>
+    </nav>
+
+    <main>
+      <div class="tiptap">
+        <h2>Introduction</h2><p>This is a test article with a <a title="ref1" id="cite-ref1-1" class="citation-inline" href="#ref-ref1">Ref (2024)</a> citation.</p><p>A footnote here<sup class="footnote-ref"><a id="fnref-1" href="#fn-1">[1]</a></sup></p><div data-type="bibliography" class="bibliography-block"><h2 class="bibliography-title">References</h2><div class="bibliography-content"><div id="ref-ref1" class="csl-entry">Reference One. 2024.</div></div></div><section class="footnotes"><h2>Footnotes</h2><ol><li id="fn-1"><p>Important detail <a href="#fnref-1" class="footnote-backref" aria-label="Back to text">↩</a></p></li></ol></section>
+      </div>
+    </main>
+  </section>
+
+  <!-- Footer -->
+  <footer class="footer"><div class="footer-inner">
+    <section class="citation-block">
+      <p class="footer-heading" role="heading" aria-level="2">Citation</p>
+      <p>For attribution in academic contexts, please cite this work as</p>
+      <pre class="citation short">Alice (2025). &quot;Test Article&quot;.</pre>
+      <p>BibTeX citation</p>
+      <pre class="citation long">@misc{alice2025_test_article,
+  title={Test Article},
+  author={Alice},
+  year={2025}
+}</pre>
+    </section>
+    <section class="references-block"></section>
+    <div class="template-credit">
+      <p>Made with &#10084;&#65039; with <a href="https://huggingface.co/spaces/tfrere/research-article-template" target="_blank" rel="noopener noreferrer">research article template</a></p>
+    </div></div></footer>
+
+  <!-- Image lightbox -->
+  <dialog class="lightbox" id="lightbox">
+    <img id="lightbox-img" src="" alt="">
+  </dialog>
+
+  <script>
+  (function() {
+    // Theme toggle (matches template ThemeToggle.astro)
+    var btn = document.getElementById('theme-toggle');
+    var sunIcon = btn && btn.querySelector('.icon--sun');
+    var moonIcon = btn && btn.querySelector('.icon--moon');
+    var wrapper = btn && btn.querySelector('.icon-wrapper');
+    var media = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
+    var prefersDark = media && media.matches;
+    var saved = localStorage.getItem('theme');
+
+    function applyTheme(mode) {
+      document.documentElement.dataset.theme = mode;
+      if (sunIcon && moonIcon) {
+        sunIcon.style.opacity = mode === 'dark' ? '0' : '1';
+        moonIcon.style.opacity = mode === 'dark' ? '1' : '0';
+      }
+    }
+    applyTheme(saved || (prefersDark ? 'dark' : 'light'));
+    requestAnimationFrame(function() { if (wrapper) wrapper.classList.add('animated'); });
+
+    if (!saved && media) {
+      var syncSystem = function(e) { applyTheme(e.matches ? 'dark' : 'light'); };
+      if (media.addEventListener) media.addEventListener('change', syncSystem);
+    }
+
+    if (btn) {
+      btn.addEventListener('click', function() {
+        var next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
+        localStorage.setItem('theme', next);
+        if (wrapper) {
+          var cls = next === 'dark' ? 'spin-cw' : 'spin-ccw';
+          wrapper.classList.remove('spin-cw', 'spin-ccw');
+          void wrapper.offsetWidth;
+          wrapper.classList.add(cls);
+          wrapper.addEventListener('animationend', function() { wrapper.classList.remove(cls); }, { once: true });
+        }
+        applyTheme(next);
+      });
+    }
+
+    // Lightbox
+    document.querySelectorAll('.tiptap img').forEach(function(img) {
+      img.style.cursor = 'zoom-in';
+      img.addEventListener('click', function() {
+        var lbImg = document.getElementById('lightbox-img');
+        var lbDlg = document.getElementById('lightbox');
+        if (lbImg) lbImg.src = img.src;
+        if (lbDlg && lbDlg.showModal) lbDlg.showModal();
+      });
+    });
+    var lb = document.getElementById('lightbox');
+    if (lb) lb.addEventListener('click', function(e) { if (e.target === this) this.close(); });
+
+    // Glossary
+    document.querySelectorAll('[data-type="glossary"]').forEach(function(el) { el.setAttribute('tabindex', '0'); });
+
+    // ---- Table of Contents ----
+    var holder = document.getElementById('toc-placeholder');
+    var holderMobile = document.getElementById('toc-mobile-placeholder');
+    var articleRoot = document.querySelector('.content-grid main');
+    if (!articleRoot) return;
+    var headings = articleRoot.querySelectorAll('h2, h3, h4');
+    if (!headings.length) return;
+    var headingsArr = Array.from(headings);
+
+    // Unique IDs
+    var usedIds = {};
+    var slugify = function(s) { return String(s||'').toLowerCase().trim().replace(/\\s+/g,'_').replace(/[^a-z0-9_-]/g,''); };
+    headingsArr.forEach(function(h) {
+      var id = (h.id||'').trim() || slugify(h.textContent) || 'section';
+      var c = id, n = 2;
+      while (usedIds[c]) c = id+'-'+(n++);
+      if (h.id !== c) h.id = c;
+      usedIds[c] = true;
+    });
+
+    // Build nested nav with data-heading-idx
+    var nav = document.createElement('nav');
+    var ulStack = [document.createElement('ul')];
+    nav.appendChild(ulStack[0]);
+    var levelOf = function(tag) { return tag==='H2'?2:tag==='H3'?3:4; };
+    var prev = 2, hIdx = 0;
+    headingsArr.forEach(function(h) {
+      var lvl = levelOf(h.tagName);
+      while (lvl > prev) { var ul = document.createElement('ul'); var last = ulStack[ulStack.length-1].lastElementChild; if (last) last.appendChild(ul); ulStack.push(ul); prev++; }
+      while (lvl < prev) { ulStack.pop(); prev--; }
+      var li = document.createElement('li');
+      var a = document.createElement('a');
+      a.href = '#'+h.id; a.textContent = h.textContent;
+      li.appendChild(a);
+      li.setAttribute('data-heading-idx', String(hIdx++));
+      ulStack[ulStack.length-1].appendChild(li);
+    });
+
+    if (holder) holder.appendChild(nav);
+    var navClone = nav.cloneNode(true);
+    if (holderMobile) holderMobile.appendChild(navClone);
+
+    // Mark navs as collapsible
+    nav.classList.add('toc-collapsible');
+    navClone.classList.add('toc-collapsible');
+
+    var allLinks = [].concat(
+      holder ? Array.from(holder.querySelectorAll('a')) : [],
+      holderMobile ? Array.from(holderMobile.querySelectorAll('a')) : []
+    );
+
+    // Click handler for smooth scroll with offset
+    var SCROLL_OFFSET = 80;
+    allLinks.forEach(function(link) {
+      link.addEventListener('click', function(e) {
+        var href = link.getAttribute('href');
+        if (!href || href.charAt(0) !== '#') return;
+        var el = document.getElementById(href.slice(1));
+        if (!el) return;
+        e.preventDefault();
+        var top = el.getBoundingClientRect().top + window.scrollY - SCROLL_OFFSET;
+        window.scrollTo({ top: top, behavior: 'smooth' });
+        history.pushState(null, '', href);
+      });
+    });
+
+    // ---- Auto-collapse logic ----
+    var isMobile = window.matchMedia('(max-width: 1100px)');
+
+    function getItemsWithChildren(navEl) {
+      if (!navEl) return [];
+      return Array.from(navEl.querySelectorAll('li[data-heading-idx]')).filter(function(li) {
+        return li.querySelector(':scope > ul');
+      });
+    }
+
+    function getAncestorIndices(items, targetIdx) {
+      var toExpand = {};
+      var activeLi = null;
+      function find(li) {
+        if (Number(li.getAttribute('data-heading-idx')) === targetIdx) return li;
+        var ul = li.querySelector(':scope > ul');
+        if (!ul) return null;
+        var children = ul.querySelectorAll(':scope > li[data-heading-idx]');
+        for (var i = 0; i < children.length; i++) { var f = find(children[i]); if (f) return f; }
+        return null;
+      }
+      for (var i = 0; i < items.length; i++) { activeLi = find(items[i]); if (activeLi) break; }
+      if (!activeLi) return toExpand;
+      toExpand[targetIdx] = true;
+      var cur = activeLi;
+      while (cur) {
+        var parent = cur.parentElement ? cur.parentElement.closest('li[data-heading-idx]') : null;
+        if (parent) { toExpand[Number(parent.getAttribute('data-heading-idx'))] = true; cur = parent; }
+        else break;
+      }
+      return toExpand;
+    }
+
+    function applyCollapseState(navEl, activeIdx) {
+      if (!navEl) return;
+      var items = getItemsWithChildren(navEl);
+      var ancestors = getAncestorIndices(items, activeIdx);
+
+      items.forEach(function(li) {
+        var sub = li.querySelector(':scope > ul');
+        if (!sub) return;
+        var idx = Number(li.getAttribute('data-heading-idx'));
+        var allDesc = li.querySelectorAll('li[data-heading-idx]');
+        var related = [idx];
+        allDesc.forEach(function(d) { related.push(Number(d.getAttribute('data-heading-idx'))); });
+        var shouldExpand = related.some(function(i) { return ancestors[i]; });
+
+        if (shouldExpand) {
+          li.classList.remove('collapsed');
+          sub.style.height = 'auto';
+        } else {
+          li.classList.add('collapsed');
+          sub.style.height = '0px';
+        }
+      });
+    }
+
+    function expandAll(navEl) {
+      if (!navEl) return;
+      getItemsWithChildren(navEl).forEach(function(li) {
+        li.classList.remove('collapsed');
+        var sub = li.querySelector(':scope > ul');
+        if (sub) sub.style.height = 'auto';
+      });
+    }
+
+    // Initial state: collapse all except first section
+    function initCollapse() {
+      if (isMobile.matches) {
+        expandAll(holder ? holder.querySelector('nav') : null);
+        expandAll(holderMobile ? holderMobile.querySelector('nav') : null);
+      } else {
+        applyCollapseState(holder ? holder.querySelector('nav') : null, 0);
+        applyCollapseState(holderMobile ? holderMobile.querySelector('nav') : null, 0);
+      }
+    }
+    initCollapse();
+
+    isMobile.addEventListener('change', function() {
+      if (isMobile.matches) {
+        expandAll(holder ? holder.querySelector('nav') : null);
+        expandAll(holderMobile ? holderMobile.querySelector('nav') : null);
+      } else {
+        applyCollapseState(holder ? holder.querySelector('nav') : null, prevActiveIdx);
+        applyCollapseState(holderMobile ? holderMobile.querySelector('nav') : null, prevActiveIdx);
+      }
+    });
+
+    // ---- Scroll tracking ----
+    var OFFSET = 60, lastScrollTime = 0, prevActiveIdx = 0;
+
+    function onScroll() {
+      var now = performance.now();
+      if (now - lastScrollTime < 50) return;
+      lastScrollTime = now;
+      requestAnimationFrame(function() {
+        var activeIdx = -1, activeId = null;
+        for (var i = headingsArr.length - 1; i >= 0; i--) {
+          if (headingsArr[i].getBoundingClientRect().top - OFFSET <= 0) {
+            activeIdx = i; activeId = headingsArr[i].id; break;
+          }
+        }
+        allLinks.forEach(function(l) {
+          if (activeId && l.getAttribute('href') === '#'+activeId) l.classList.add('active');
+          else l.classList.remove('active');
+        });
+        if (activeIdx !== prevActiveIdx && activeIdx >= 0 && !isMobile.matches) {
+          prevActiveIdx = activeIdx;
+          applyCollapseState(holder ? holder.querySelector('nav') : null, activeIdx);
+        }
+        if (activeIdx >= 0) prevActiveIdx = activeIdx;
+      });
+    }
+    window.addEventListener('scroll', onScroll, { passive: true });
+    onScroll();
+
+    // ---- Mobile sidebar ----
+    var sidebar = document.querySelector('.toc-mobile-sidebar');
+    var backdrop = document.querySelector('.toc-mobile-backdrop');
+    var toggleBtn = document.querySelector('.toc-mobile-toggle');
+    var closeBtn = document.querySelector('.toc-mobile-sidebar__close');
+
+    function openSidebar() {
+      sidebar.classList.add('open'); backdrop.classList.add('open');
+      toggleBtn.setAttribute('aria-expanded','true');
+      document.body.style.overflow = 'hidden';
+      requestAnimationFrame(function() {
+        var active = sidebar.querySelector('a.active');
+        if (active) {
+          var body = sidebar.querySelector('.toc-mobile-sidebar__body');
+          if (body) body.scrollTop = Math.max(0, active.offsetTop - body.offsetTop - body.clientHeight/3);
+        }
+      });
+    }
+    function closeSidebar() {
+      sidebar.classList.remove('open'); backdrop.classList.remove('open');
+      toggleBtn.setAttribute('aria-expanded','false');
+      document.body.style.overflow = '';
+    }
+    if (toggleBtn) toggleBtn.addEventListener('click', openSidebar);
+    if (closeBtn) closeBtn.addEventListener('click', closeSidebar);
+    if (backdrop) backdrop.addEventListener('click', closeSidebar);
+    if (holderMobile) holderMobile.addEventListener('click', function(e) { if (e.target.closest && e.target.closest('a')) closeSidebar(); });
+    document.addEventListener('keydown', function(e) { if (e.key==='Escape' && sidebar.classList.contains('open')) closeSidebar(); });
+
+    // ---- Footer: move references & footnotes ----
+    (function() {
+      var footer = document.querySelector('footer.footer');
+      if (!footer) return;
+      var target = footer.querySelector('.references-block');
+      if (!target) return;
+      var contentRoot = document.querySelector('.content-grid main') || document.body;
+
+      var ensureHeading = function(text) {
+        var exists = Array.from(target.children).some(function(c) {
+          return c.classList.contains('footer-heading') && c.textContent.trim().toLowerCase() === text.toLowerCase();
+        });
+        if (!exists) {
+          var h = document.createElement('p');
+          h.className = 'footer-heading';
+          h.setAttribute('role', 'heading');
+          h.setAttribute('aria-level', '2');
+          h.textContent = text;
+          target.appendChild(h);
+        }
+      };
+
+      var moveIntoFooter = function(el, headingText) {
+        if (!el) return false;
+        var firstH = el.querySelector(':scope > h1, :scope > h2, :scope > h3, :scope > .footer-heading, :scope > .bibliography-title');
+        if (firstH) {
+          var t = (firstH.textContent || '').trim().toLowerCase();
+          if (t === headingText.toLowerCase() || t.includes('reference') || t.includes('bibliograph')) firstH.remove();
+        }
+        ensureHeading(headingText);
+        target.appendChild(el);
+        return true;
+      };
+
+      var findAllOutsideFooter = function(selectors) {
+        var results = [];
+        for (var i = 0; i < selectors.length; i++) {
+          var els = contentRoot.querySelectorAll(selectors[i]);
+          els.forEach(function(el) { if (!footer.contains(el) && results.indexOf(el) === -1) results.push(el); });
+        }
+        return results;
+      };
+
+      var findFirst = function(selectors) { var a = findAllOutsideFooter(selectors); return a.length ? a[0] : null; };
+
+      var run = function() {
+        if (footer.dataset.processed === 'true') return;
+        var refs = findAllOutsideFooter(['[data-type="bibliography"]', '#bibliography-references-list', '#references', '#refs', '.bibliography']);
+        var notes = findFirst(['.footnotes', 'section.footnotes', 'div.footnotes']);
+        var moved = false;
+        refs.forEach(function(el) { if (moveIntoFooter(el, 'References')) moved = true; });
+        if (moveIntoFooter(notes, 'Footnotes')) moved = true;
+        if (moved) footer.dataset.processed = 'true';
+      };
+
+      run();
+      if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', run, { once: true });
+      window.addEventListener('load', function() { setTimeout(run, 100); }, { once: true });
+      setTimeout(run, 300);
+    })();
+
+    // Hash navigation
+    if (window.location.hash) {
+      var target = document.querySelector(window.location.hash);
+      if (target) setTimeout(function() { target.scrollIntoView({block:'start'}); }, 100);
+    }
+    window.addEventListener('popstate', function() {
+      var h = window.location.hash;
+      if (h) { var t = document.querySelector(h); if (t) t.scrollIntoView({block:'start'}); }
+      else window.scrollTo({top:0});
+    });
+  })();
+  </script>
+</body>
+</html>"
+`;

backend/tests/html-renderer-snapshot.test.ts

@@ -0,0 +1,209 @@
+import { describe, it, expect } from "vitest";
+import { renderArticleHTML, type PublishMeta, type CitationData } from "../src/publisher/html-renderer.js";
+import type { PublishCSS } from "../src/publisher/index.js";
+
+const EMPTY_CSS: PublishCSS = {
+  variables: "",
+  reset: "",
+  base: "",
+  layout: "",
+  print: "",
+  editorTokens: "",
+  article: "",
+  components: "",
+  publisher: "",
+};
+
+const BASIC_META: PublishMeta = {
+  title: "Test Article",
+  description: "A test article",
+  authors: [{ name: "Alice", affiliationIndices: [1], affiliationNames: ["MIT"] }],
+  affiliations: [{ name: "MIT" }],
+  date: "2025-01-01",
+};
+
+function minimalDoc(content: any[]) {
+  return { type: "doc", content };
+}
+
+describe("renderArticleHTML", () => {
+  it("produces a complete HTML document", () => {
+    const json = minimalDoc([{ type: "paragraph", content: [{ type: "text", text: "Hello world" }] }]);
+    const html = renderArticleHTML(json, BASIC_META, EMPTY_CSS);
+    expect(html).toContain("<!DOCTYPE html>");
+    expect(html).toContain("<title>Test Article</title>");
+    expect(html).toContain("Hello world");
+  });
+
+  it("escapes HTML in meta fields", () => {
+    const meta: PublishMeta = { ...BASIC_META, title: 'Title with "quotes" & <tags>' };
+    const json = minimalDoc([{ type: "paragraph" }]);
+    const html = renderArticleHTML(json, meta, EMPTY_CSS);
+    expect(html).toContain("&amp;");
+    expect(html).toContain("&lt;tags&gt;");
+    expect(html).not.toContain('<tags>');
+  });
+
+  it("renders PDF download link when pdfUrl is set", () => {
+    const meta: PublishMeta = { ...BASIC_META, pdfUrl: "/published/test/article.pdf" };
+    const json = minimalDoc([{ type: "paragraph" }]);
+    const html = renderArticleHTML(json, meta, EMPTY_CSS);
+    expect(html).toContain("Download PDF");
+    expect(html).toContain("/published/test/article.pdf");
+  });
+});
+
+describe("postProcess - accordion", () => {
+  it("transforms accordion div into details/summary", () => {
+    const json = minimalDoc([{
+      type: "accordion",
+      attrs: { title: "My Section", open: false },
+      content: [{ type: "paragraph", content: [{ type: "text", text: "Inner content" }] }],
+    }]);
+    const html = renderArticleHTML(json, BASIC_META, EMPTY_CSS);
+    expect(html).toContain("<details");
+    expect(html).toContain("<summary>");
+    expect(html).toContain("Inner content");
+  });
+});
+
+describe("postProcess - citations", () => {
+  it("replaces citation spans with anchor links", () => {
+    const json = minimalDoc([{
+      type: "paragraph",
+      content: [
+        { type: "text", text: "See " },
+        { type: "citation", attrs: { key: "smith2024", label: "Smith (2024)" } },
+      ],
+    }]);
+    const citationData: CitationData = {
+      entries: [{ id: "smith2024", title: "Test Paper" }],
+      orderedKeys: ["smith2024"],
+      style: "apa",
+    };
+    const html = renderArticleHTML(json, BASIC_META, EMPTY_CSS, citationData);
+    expect(html).toContain('href="#ref-smith2024"');
+    expect(html).toContain("citation-inline");
+  });
+
+  it("uses numeric labels for IEEE style", () => {
+    const json = minimalDoc([{
+      type: "paragraph",
+      content: [
+        { type: "citation", attrs: { key: "doe2023", label: "Doe (2023)" } },
+      ],
+    }]);
+    const citationData: CitationData = {
+      entries: [{ id: "doe2023" }],
+      orderedKeys: ["doe2023"],
+      style: "ieee",
+    };
+    const html = renderArticleHTML(json, BASIC_META, EMPTY_CSS, citationData);
+    expect(html).toContain("[1]");
+  });
+});
+
+describe("postProcess - footnotes", () => {
+  it("collects footnotes and appends a footnotes section", () => {
+    const json = minimalDoc([{
+      type: "paragraph",
+      content: [
+        { type: "text", text: "Text" },
+        { type: "footnote", attrs: { content: "This is a footnote" } },
+      ],
+    }]);
+    const html = renderArticleHTML(json, BASIC_META, EMPTY_CSS);
+    expect(html).toContain('class="footnote-ref"');
+    expect(html).toContain('id="fn-1"');
+    expect(html).toContain("This is a footnote");
+    expect(html).toContain('class="footnotes"');
+  });
+
+  it("numbers multiple footnotes sequentially", () => {
+    const json = minimalDoc([{
+      type: "paragraph",
+      content: [
+        { type: "footnote", attrs: { content: "First note" } },
+        { type: "text", text: " and " },
+        { type: "footnote", attrs: { content: "Second note" } },
+      ],
+    }]);
+    const html = renderArticleHTML(json, BASIC_META, EMPTY_CSS);
+    expect(html).toContain('id="fn-1"');
+    expect(html).toContain('id="fn-2"');
+    expect(html).toContain("First note");
+    expect(html).toContain("Second note");
+  });
+});
+
+describe("postProcess - mermaid", () => {
+  it("transforms mermaid div into pre.mermaid", () => {
+    const json = minimalDoc([{
+      type: "mermaid",
+      attrs: { code: "graph TD\n  A --> B" },
+    }]);
+    const html = renderArticleHTML(json, BASIC_META, EMPTY_CSS);
+    expect(html).toContain('class="mermaid"');
+    expect(html).toContain("graph TD");
+  });
+});
+
+describe("postProcess - htmlEmbed", () => {
+  it("transforms htmlEmbed div into iframe", () => {
+    const json = minimalDoc([{
+      type: "htmlEmbed",
+      attrs: { src: "d3-chart.html", title: "Chart", desc: "" },
+    }]);
+    const html = renderArticleHTML(json, BASIC_META, EMPTY_CSS);
+    expect(html).toContain("html-embed-container");
+    expect(html).toContain('data-embed-src="d3-chart.html"');
+    expect(html).toContain("<iframe");
+  });
+});
+
+describe("postProcess - bibliography", () => {
+  it("injects bibliography HTML into the placeholder", () => {
+    const json = minimalDoc([
+      { type: "paragraph", content: [{ type: "citation", attrs: { key: "test2024", label: "[1]" } }] },
+      { type: "bibliography", attrs: { renderedHtml: "" } },
+    ]);
+    const citationData: CitationData = {
+      entries: [{ id: "test2024" }],
+      orderedKeys: ["test2024"],
+      style: "apa",
+    };
+    const biblioHtml = '<div class="csl-entry">Test entry</div>';
+    const html = renderArticleHTML(json, BASIC_META, EMPTY_CSS, citationData, biblioHtml);
+    expect(html).toContain("bibliography-content");
+    expect(html).toContain('id="ref-test2024"');
+    expect(html).toContain("Test entry");
+  });
+});
+
+describe("snapshot - full render", () => {
+  it("matches snapshot for a typical article", () => {
+    const json = minimalDoc([
+      { type: "heading", attrs: { level: 2 }, content: [{ type: "text", text: "Introduction" }] },
+      { type: "paragraph", content: [
+        { type: "text", text: "This is a test article with a " },
+        { type: "citation", attrs: { key: "ref1", label: "Ref (2024)" } },
+        { type: "text", text: " citation." },
+      ] },
+      { type: "paragraph", content: [
+        { type: "text", text: "A footnote here" },
+        { type: "footnote", attrs: { content: "Important detail" } },
+      ] },
+      { type: "bibliography", attrs: { renderedHtml: "" } },
+    ]);
+
+    const citationData: CitationData = {
+      entries: [{ id: "ref1", title: "Reference One" }],
+      orderedKeys: ["ref1"],
+      style: "apa",
+    };
+    const biblioHtml = '<div class="csl-entry">Reference One. 2024.</div>';
+
+    const html = renderArticleHTML(json, BASIC_META, EMPTY_CSS, citationData, biblioHtml);
+    expect(html).toMatchSnapshot();
+  });
+});

backend/tests/publisher.test.ts

@@ -39,6 +39,7 @@ const EMPTY_CSS = {
   editorTokens: "",
   article: "",
   components: "",
+  publisher: "",
 };
 
 // ── 1.1 Y.Doc Extraction ──────────────────────────────────────────

backend/tests/security.test.ts

@@ -15,6 +15,7 @@ const EMPTY_CSS = {
   editorTokens: "",
   article: "",
   components: "",
+  publisher: "",
 };
 
 const BASE_META: PublishMeta = {

docs/ARCHITECTURE.md

@@ -0,0 +1,154 @@
+# Architecture
+
+## Overview
+
+The collab-editor is a collaborative article editor built for Hugging Face Spaces. It runs as a single Docker container serving both the backend (Express + Hocuspocus) and the frontend (React + TipTap).
+
+```
+┌─────────────────────────────────────────────────────────┐
+│  Docker Container (port 8080)                           │
+│                                                         │
+│  ┌──────────────────┐   ┌────────────────────────────┐  │
+│  │  Express Server   │   │  Hocuspocus (Y.js collab) │  │
+│  │                   │   │                            │  │
+│  │  /api/*           │   │  /collab (WebSocket)       │  │
+│  │  /published/*     │   │                            │  │
+│  │  /editor          │   │                            │  │
+│  │  / (published)    │   │                            │  │
+│  └──────────────────┘   └────────────────────────────┘  │
+│                                                         │
+│  ┌──────────────────┐   ┌────────────────────────────┐  │
+│  │  Publisher        │   │  Frontend (static)         │  │
+│  │  (HTML renderer)  │   │  /editor -> SPA            │  │
+│  │  (PDF generator)  │   │  React + TipTap            │  │
+│  └──────────────────┘   └────────────────────────────┘  │
+└─────────────────────────────────────────────────────────┘
+```
+
+## Key directories
+
+| Path | Description |
+|------|-------------|
+| `backend/src/server.ts` | Express server, routes, WebSocket setup |
+| `backend/src/publisher/` | HTML rendering, PDF generation, bibliography formatting |
+| `backend/src/publisher/html-renderer.ts` | Converts TipTap JSON to static HTML page |
+| `backend/src/publisher/extensions.ts` | Server-side TipTap extensions (mirrors frontend) |
+| `backend/src/shared/component-defs.ts` | Shared component definitions (single source of truth) |
+| `frontend/src/editor/` | TipTap editor, toolbars, components |
+| `frontend/src/editor/components/registry.ts` | Component registry (imports from shared defs) |
+| `frontend/src/styles/` | All CSS files |
+| `frontend/src/styles/_publisher.css` | Publisher-only CSS (injected into static HTML) |
+| `frontend/src/styles/_ui.css` | Editor chrome CSS (buttons, dialogs, drawers) |
+
+## Styling architecture
+
+### CSS layers
+
+The project uses three CSS layers:
+
+1. **Template CSS** (`_variables.css`, `_base.css`, `_layout.css`, `article.css`, `components/`)
+   - Defines the article's visual identity
+   - Uses CSS custom properties (`--text-color`, `--surface-bg`, `--primary-color`, etc.)
+   - Shared between the editor preview and the published output
+
+2. **Editor chrome CSS** (`_ui.css`)
+   - Styles the editor UI: toolbars, sidebars, dialogs, forms
+   - Uses `--ed-*` custom properties for the dark editor theme
+   - Only loaded in the editor, never in published output
+
+3. **Publisher CSS** (`_publisher.css`)
+   - Styles specific to the published static HTML page
+   - Footer layout, bibliography, footnotes, citation links, theme toggle
+   - Only injected by the HTML renderer, never loaded in the editor
+
+### No CSS-in-JS
+
+The project does not use MUI, Emotion, or any CSS-in-JS library. All styling is done via:
+- CSS custom properties for theming
+- Vanilla CSS files with BEM-like class naming
+- `Floating UI` for tooltip positioning (lightweight, no CSS-in-JS)
+
+### Color theming
+
+- The article area uses `data-theme="light"` / `data-theme="dark"` with CSS variable overrides
+- The editor chrome is always dark, using `--ed-*` tokens
+- The primary accent color is controlled via `--primary-color` (synced via Yjs settings)
+
+## HF Spaces constraints
+
+### Iframe embedding
+
+When deployed as a HF Space, the app runs inside an iframe. This affects:
+
+- **Viewport width**: the iframe is ~968px wide, not the full browser width
+- **No `target="_top"` navigation**: links open within the iframe unless using `target="_blank"`
+- **OAuth flow**: the OAuth callback URL must match the Space URL
+- **CSP restrictions**: sandboxed iframes may restrict certain APIs
+
+### Two-page architecture
+
+| URL | What it serves |
+|-----|----------------|
+| `/` | Published article (static HTML) or login prompt |
+| `/editor` | The SPA editor (requires authentication) |
+
+This means:
+- The published article is a completely standalone HTML file
+- It does NOT load React or any JS framework
+- The editor is a separate React SPA at `/editor`
+
+### CSS cascade
+
+Because the published HTML is self-contained (all CSS inlined in `<style>`), there are no CSS conflicts with the HF Spaces iframe CSS. The editor uses Vite's CSS pipeline.
+
+## Shared component registry
+
+Component definitions (name, kind, fields, defaults) are defined once in `backend/src/shared/component-defs.ts`. This file is the single source of truth.
+
+- **Backend** (`extensions.ts`): imports `SHARED_COMPONENT_DEFS` to generate TipTap server extensions for `generateHTML()`
+- **Frontend** (`registry.ts`): imports `SHARED_COMPONENT_DEFS` via Vite alias `#shared` and decorates each entry with UI metadata (icon, label, description, placeholders)
+
+Adding a new component:
+1. Add the entry to `shared/component-defs.ts`
+2. Add UI metadata to `frontend/src/editor/components/registry.ts` in `UI_META`
+3. Add CSS for the published view to `frontend/src/styles/_publisher.css`
+
+## Publisher pipeline
+
+```
+Y.Doc -> TiptapTransformer -> JSON -> generateHTML() -> postProcess() -> full HTML page
+                                                                            |
+                                                                            v
+                                                                    PDF (Playwright)
+                                                                            |
+                                                                            v
+                                                                    Upload to HF dataset
+```
+
+### Post-processing (linkedom)
+
+The `postProcess()` function uses `linkedom` for DOM manipulation instead of regex:
+- Accordion `<div>` -> `<details>/<summary>`
+- Citation `<span>` -> `<a>` links with bibliography anchors
+- Bibliography placeholder -> formatted HTML with entry IDs
+- Mermaid `<div>` -> `<pre class="mermaid">`
+- HtmlEmbed `<div>` -> `<iframe>`
+- Footnotes -> superscript links + appended section
+
+### Preview endpoint
+
+`GET /api/preview/:docName` renders the HTML without saving or uploading. Useful for testing the publisher pipeline.
+
+## Testing
+
+Tests use Vitest. Run with `npm test` from `backend/`.
+
+| Test file | What it covers |
+|-----------|----------------|
+| `tests/publisher.test.ts` | Y.Doc extraction, HTML generation, post-processing, idempotency |
+| `tests/html-renderer-snapshot.test.ts` | Snapshot tests for each postProcess transformation |
+| `tests/security.test.ts` | XSS prevention in published HTML |
+| `tests/css-resolution.test.ts` | @custom-media resolution |
+| `tests/utils.test.ts` | Path sanitization utilities |
+| `tests/auth.test.ts` | Token extraction, OAuth configuration |
+| `tests/hf-storage.test.ts` | HF dataset storage configuration |

frontend/package-lock.json

@@ -9,12 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "@ai-sdk/react": "^3.0.160",
-        "@emotion/react": "^11.14.0",
-        "@emotion/styled": "^11.14.1",
         "@floating-ui/dom": "^1.7.6",
         "@hocuspocus/provider": "^3.4.4",
-        "@mui/icons-material": "^9.0.0",
-        "@mui/material": "^9.0.0",
         "@tiptap/core": "^3.22.3",
         "@tiptap/extension-code-block-lowlight": "^3.22.3",
         "@tiptap/extension-collaboration": "^3.22.3",
@@ -36,6 +32,7 @@
         "ai": "^6.0.158",
         "katex": "^0.16.45",
         "lowlight": "^3.2.0",
+        "lucide-react": "^1.8.0",
         "mermaid": "^11.14.0",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",
@@ -132,6 +129,7 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
       "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.28.5",
@@ -195,6 +193,7 @@
       "version": "7.29.1",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
       "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.0",
@@ -228,6 +227,7 @@
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
       "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -237,6 +237,7 @@
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
       "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.28.6",
@@ -278,6 +279,7 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
       "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -287,6 +289,7 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
       "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -320,6 +323,7 @@
       "version": "7.29.2",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.2.tgz",
       "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.29.0"
@@ -363,19 +367,11 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/runtime": {
-      "version": "7.29.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
-      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
       "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.28.6",
@@ -390,6 +386,7 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
       "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
@@ -408,6 +405,7 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
       "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -553,154 +551,6 @@
         "@csstools/css-tokenizer": "^4.0.0"
       }
     },
-    "node_modules/@emotion/babel-plugin": {
-      "version": "11.13.5",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
-      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/runtime": "^7.18.3",
-        "@emotion/hash": "^0.9.2",
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/serialize": "^1.3.3",
-        "babel-plugin-macros": "^3.1.0",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^4.0.0",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7",
-        "stylis": "4.2.0"
-      }
-    },
-    "node_modules/@emotion/cache": {
-      "version": "11.14.0",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
-      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/sheet": "^1.4.0",
-        "@emotion/utils": "^1.4.2",
-        "@emotion/weak-memoize": "^0.4.0",
-        "stylis": "4.2.0"
-      }
-    },
-    "node_modules/@emotion/hash": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
-      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/is-prop-valid": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
-      "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/memoize": "^0.9.0"
-      }
-    },
-    "node_modules/@emotion/memoize": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
-      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/react": {
-      "version": "11.14.0",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
-      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.13.5",
-        "@emotion/cache": "^11.14.0",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
-        "@emotion/utils": "^1.4.2",
-        "@emotion/weak-memoize": "^0.4.0",
-        "hoist-non-react-statics": "^3.3.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@emotion/serialize": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
-      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/hash": "^0.9.2",
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/unitless": "^0.10.0",
-        "@emotion/utils": "^1.4.2",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@emotion/sheet": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
-      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/styled": {
-      "version": "11.14.1",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
-      "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.13.5",
-        "@emotion/is-prop-valid": "^1.3.0",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
-        "@emotion/utils": "^1.4.2"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.0.0-rc.0",
-        "react": ">=16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@emotion/unitless": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
-      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
-      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/@emotion/utils": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
-      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/weak-memoize": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
-      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
-      "license": "MIT"
-    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -1236,6 +1086,7 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -1257,6 +1108,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1266,12 +1118,14 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1293,240 +1147,6 @@
         "langium": "^4.0.0"
       }
     },
-    "node_modules/@mui/core-downloads-tracker": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.0.0.tgz",
-      "integrity": "sha512-uwQNGkhv0lf7ufxw6QXev77BW6pWbW+7uxYjU5+rfp4lBkFtMEgJCsarTM3Tn+i0lGx6+Ol2u88JdGXr0GDskA==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      }
-    },
-    "node_modules/@mui/icons-material": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.0.0.tgz",
-      "integrity": "sha512-oDwyvI6LgjWRC9MBcSGvLkPud9S9ELgSBQFYxa1rYcZn6Br55dn22SyvsPDMsn0G8OndFk53iMT45W5mNqrogw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.2"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@mui/material": "^9.0.0",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/material": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.0.0.tgz",
-      "integrity": "sha512-+VP/oQCDhDR87NQQgXnNBG8dwy6GNuQLnenS1pZvkbn2dKFSxRSRMybTpH9xUxXP+316mlYDy5CSbYtusnCWtw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.29.2",
-        "@mui/core-downloads-tracker": "^9.0.0",
-        "@mui/system": "^9.0.0",
-        "@mui/types": "^9.0.0",
-        "@mui/utils": "^9.0.0",
-        "@popperjs/core": "^2.11.8",
-        "@types/react-transition-group": "^4.4.12",
-        "clsx": "^2.1.1",
-        "csstype": "^3.2.3",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.4",
-        "react-transition-group": "^4.4.5"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^9.0.0",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@mui/material-pigment-css": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/private-theming": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.0.0.tgz",
-      "integrity": "sha512-JtuZoaiCqwD6vjgYu6Xp3T7DZkrxJlgtDz5yESzhI34fEX5hHMh2VJUbuL9UOg8xrfIFMrq6dcYoH/7Zi4G0RA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.2",
-        "@mui/utils": "^9.0.0",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/styled-engine": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.0.0.tgz",
-      "integrity": "sha512-9RLGdX4Jg0aQPRuvqh/OLzYSPlgd5zyEw5/1HIRfdavSiOd03WtUaGZH9/w1RoTYuRKwpgy0hpIFaMHIqPVIWg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.2",
-        "@emotion/cache": "^11.14.0",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/sheet": "^1.4.0",
-        "csstype": "^3.2.3",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.4.1",
-        "@emotion/styled": "^11.3.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/system": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-9.0.0.tgz",
-      "integrity": "sha512-YnC5Zg6j04IxiLc/boAKs0464jfZlLFVa7mf5E8lF0XOtZVUvG6R6gJK50lgUYdaaLdyLfxF6xR7LaPuEpeT/g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.2",
-        "@mui/private-theming": "^9.0.0",
-        "@mui/styled-engine": "^9.0.0",
-        "@mui/types": "^9.0.0",
-        "@mui/utils": "^9.0.0",
-        "clsx": "^2.1.1",
-        "csstype": "^3.2.3",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/types": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-9.0.0.tgz",
-      "integrity": "sha512-i1cuFCAWN44b3AJWO7mh7tuh1sqbQSeVr/94oG0TX5uXivac8XalgE4/6fQZcmGZigzbQ35IXxj/4jLpRIBYZg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.2"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/utils": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.0.0.tgz",
-      "integrity": "sha512-bQcqyg/gjULUqTuyUjSAFr6LQGLvtkNtDbJerAtoUn9kGZ0hg5QJiN1PLHMLbeFpe3te1831uq7GFl2ITokGdg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.2",
-        "@mui/types": "^9.0.0",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.4"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@opentelemetry/api": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
@@ -2865,12 +2485,6 @@
       "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
       "license": "MIT"
     },
-    "node_modules/@types/parse-json": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
-      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
-      "license": "MIT"
-    },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
@@ -2898,15 +2512,6 @@
         "@types/react": "^18.0.0"
       }
     },
-    "node_modules/@types/react-transition-group": {
-      "version": "4.4.12",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
-      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -3002,21 +2607,6 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "license": "Python-2.0"
     },
-    "node_modules/babel-plugin-macros": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
-      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "cosmiconfig": "^7.0.0",
-        "resolve": "^1.19.0"
-      },
-      "engines": {
-        "node": ">=10",
-        "npm": ">=6"
-      }
-    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.18",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.18.tgz",
@@ -3065,15 +2655,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001787",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001787.tgz",
@@ -3124,15 +2705,6 @@
         "chevrotain": "^12.0.0"
       }
     },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -3148,12 +2720,6 @@
       "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
       "license": "MIT"
     },
-    "node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "license": "MIT"
-    },
     "node_modules/cose-base": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz",
@@ -3163,31 +2729,6 @@
         "layout-base": "^1.0.0"
       }
     },
-    "node_modules/cosmiconfig": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
-      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.2.1",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/cosmiconfig/node_modules/yaml": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
-      "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
-      "license": "ISC",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/crelt": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
@@ -3720,6 +3261,7 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -3764,16 +3306,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/dompurify": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.3.tgz",
@@ -3802,24 +3334,6 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/error-ex": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
-      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
-      "license": "MIT",
-      "dependencies": {
-        "is-arrayish": "^0.2.1"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/esbuild": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
@@ -3920,12 +3434,6 @@
         }
       }
     },
-    "node_modules/find-root": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
-      "license": "MIT"
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3941,15 +3449,6 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -3966,18 +3465,6 @@
       "integrity": "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==",
       "license": "MIT"
     },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/highlight.js": {
       "version": "11.11.1",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
@@ -3988,21 +3475,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "node_modules/hoist-non-react-statics/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "license": "MIT"
-    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -4015,22 +3487,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/import-fresh": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
-      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "license": "MIT",
-      "dependencies": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/internmap": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
@@ -4040,27 +3496,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "license": "MIT"
-    },
-    "node_modules/is-core-module": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
-      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "license": "MIT",
-      "dependencies": {
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/isomorphic.js": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
@@ -4081,6 +3516,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
       "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
@@ -4089,12 +3525,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "license": "MIT"
-    },
     "node_modules/json-schema": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
@@ -4181,12 +3611,6 @@
         "url": "https://github.com/sponsors/dmonad"
       }
     },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "license": "MIT"
-    },
     "node_modules/linkify-it": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
@@ -4246,6 +3670,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.8.0.tgz",
+      "integrity": "sha512-WuvlsjngSk7TnTBJ1hsCy3ql9V9VOdcPkd3PKcSmM34vJD8KG6molxz7m7zbYFgICwsanQWmJ13JlYs4Zp7Arw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/markdown-it": {
       "version": "14.1.1",
       "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
@@ -4332,6 +3765,7 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -4360,15 +3794,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/orderedmap": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
@@ -4381,57 +3806,12 @@
       "integrity": "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==",
       "license": "MIT"
     },
-    "node_modules/parent-module": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "license": "MIT",
-      "dependencies": {
-        "callsites": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/parse-json": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "error-ex": "^1.3.1",
-        "json-parse-even-better-errors": "^2.3.0",
-        "lines-and-columns": "^1.1.6"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/path-data-parser": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/path-data-parser/-/path-data-parser-0.1.0.tgz",
       "integrity": "sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==",
       "license": "MIT"
     },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "license": "MIT"
-    },
-    "node_modules/path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -4442,6 +3822,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -4544,23 +3925,6 @@
         "postcss": "^8.4"
       }
     },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
-    },
-    "node_modules/prop-types/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "license": "MIT"
-    },
     "node_modules/prosemirror-changeset": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.4.0.tgz",
@@ -4795,12 +4159,6 @@
         "react": "^18.3.1"
       }
     },
-    "node_modules/react-is": {
-      "version": "19.2.5",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.5.tgz",
-      "integrity": "sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==",
-      "license": "MIT"
-    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -4811,52 +4169,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
-      }
-    },
-    "node_modules/resolve": {
-      "version": "1.22.12",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
-      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "is-core-module": "^2.16.1",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/resolve-from": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/robust-predicates": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.3.tgz",
@@ -4957,15 +4269,6 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -4976,24 +4279,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/stylis": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
-      "license": "MIT"
-    },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/swr": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/swr/-/swr-2.4.1.tgz",

frontend/package.json

@@ -10,12 +10,8 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^3.0.160",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
     "@floating-ui/dom": "^1.7.6",
     "@hocuspocus/provider": "^3.4.4",
-    "@mui/icons-material": "^9.0.0",
-    "@mui/material": "^9.0.0",
     "@tiptap/core": "^3.22.3",
     "@tiptap/extension-code-block-lowlight": "^3.22.3",
     "@tiptap/extension-collaboration": "^3.22.3",
@@ -37,6 +33,7 @@
     "ai": "^6.0.158",
     "katex": "^0.16.45",
     "lowlight": "^3.2.0",
+    "lucide-react": "^1.8.0",
     "mermaid": "^11.14.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",

frontend/src/App.tsx

@@ -2,33 +2,16 @@ import { useRef, useState, useCallback, useEffect, useMemo } from "react";
 import { Editor as TiptapEditor } from "@tiptap/core";
 import { UndoManager } from "yjs";
 import type * as Y from "yjs";
-import { ThemeProvider } from "@mui/material/styles";
+import { Tooltip } from "./components/Tooltip";
 import {
-  Avatar,
-  Box,
-  Chip,
-  IconButton,
-  Tooltip,
-  Typography,
-} from "@mui/material";
-import UndoIcon from "@mui/icons-material/Undo";
-import RedoIcon from "@mui/icons-material/Redo";
-import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
-import PublishOutlinedIcon from "@mui/icons-material/PublishOutlined";
-import { buildTheme, DEFAULT_PRIMARY, DEFAULT_HUE } from "./theme";
+  Undo2,
+  Redo2,
+  Settings,
+  Upload,
+  MessageCircle,
+  X,
+} from "lucide-react";
 import { oklchToHex, OKLCH_L, OKLCH_C } from "./editor/frontmatter/HueSlider";
-import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutlined";
-import CloseIcon from "@mui/icons-material/Close";
-import {
-  Button,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogContentText,
-  DialogActions,
-  CircularProgress,
-  Badge,
-} from "@mui/material";
 import { Editor } from "./editor/Editor";
 import { CommentsSidebar } from "./components/CommentsSidebar";
 import { CommentDialog } from "./components/CommentDialog";
@@ -40,6 +23,8 @@ import type { FrontmatterStore } from "./editor/frontmatter/frontmatter-store";
 import { FrontmatterHero } from "./editor/frontmatter/FrontmatterHero";
 import { SettingsDrawer } from "./editor/frontmatter/SettingsDrawer";
 
+const DEFAULT_HUE = 47;
+
 const COLORS = [
   "#958DF1", "#F98181", "#FBBC88", "#FAF594",
   "#70CFF8", "#94FADB", "#B9F18D", "#C4B5FD",
@@ -85,6 +70,7 @@ export default function App() {
 
   const editorRef = useRef<TiptapEditor | null>(null);
   const editorContainerRef = useRef<HTMLDivElement | null>(null);
+  const publishDialogRef = useRef<HTMLDialogElement>(null);
   const [editorInstance, setEditorInstance] = useState<TiptapEditor | null>(null);
   const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);
   const [commentStore, setCommentStore] = useState<CommentStore | null>(null);
@@ -92,25 +78,19 @@ export default function App() {
   const [settingsMap, setSettingsMap] = useState<Y.Map<any> | null>(null);
   const [commentDialogOpen, setCommentDialogOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
-  const [publishDialogOpen, setPublishDialogOpen] = useState(false);
   const [publishState, setPublishState] = useState<"idle" | "loading" | "success" | "error">("idle");
   const [publishError, setPublishError] = useState("");
   const selectionRange = useRef<{ from: number; to: number } | null>(null);
   const [hasSelection, setHasSelection] = useState(false);
   const [undoManager, setUndoManager] = useState<UndoManager | null>(null);
   const [chatOpen, setChatOpen] = useState(false);
-  const [primaryHue, setPrimaryHue] = useState(DEFAULT_HUE);
-
-  const primaryHex = useMemo(() => oklchToHex(OKLCH_L, OKLCH_C, primaryHue), [primaryHue]);
-  const muiTheme = useMemo(() => buildTheme(primaryHex), [primaryHex]);
 
-  // Sync primary hue from Yjs settings + push to CSS variables
+  // Sync primary hue from Yjs settings to CSS variables
   useEffect(() => {
     if (!settingsMap) return;
     const sync = () => {
       const h = settingsMap.get("primaryHue") as number | undefined;
       if (h !== undefined) {
-        setPrimaryHue(h);
         const oklch = `oklch(${OKLCH_L} ${OKLCH_C} ${h})`;
         document.documentElement.style.setProperty("--primary-color", oklch);
         document.documentElement.style.setProperty("--primary-color-hover", oklch);
@@ -155,6 +135,16 @@ export default function App() {
     setSettingsMap(map);
   }, []);
 
+  const openPublishDialog = useCallback(() => {
+    setPublishState("idle");
+    setPublishError("");
+    publishDialogRef.current?.showModal();
+  }, []);
+
+  const closePublishDialog = useCallback(() => {
+    publishDialogRef.current?.close();
+  }, []);
+
   const handlePublish = useCallback(async () => {
     setPublishState("loading");
     setPublishError("");
@@ -214,81 +204,64 @@ export default function App() {
   }, [commentStore, user]);
 
   return (
-    <ThemeProvider theme={muiTheme}>
-    <Box
+    <div
       className="editor-app"
-      sx={{
+      style={{
         height: "100vh",
         display: "flex",
         flexDirection: "column",
-        bgcolor: "background.default",
+        background: "var(--ed-bg)",
         overflow: "hidden",
       }}
     >
-      {/* Top bar - minimal */}
-      <Box
-        sx={{
-          flexShrink: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "flex-end",
-          px: 2,
-          py: 0.75,
-          gap: 0.5,
-        }}
-      >
-        <Tooltip title="Undo" arrow>
-          <IconButton
-            size="small"
+      {/* Top bar */}
+      <div className="top-bar">
+        <Tooltip title="Undo">
+          <button
+            className="icon-btn"
             onClick={() => editorInstance?.commands.undo()}
-            sx={{ color: "text.disabled" }}
+            aria-label="Undo"
           >
-            <UndoIcon sx={{ fontSize: 18 }} />
-          </IconButton>
+            <Undo2 size={18} />
+          </button>
         </Tooltip>
-        <Tooltip title="Redo" arrow>
-          <IconButton
-            size="small"
+        <Tooltip title="Redo">
+          <button
+            className="icon-btn"
             onClick={() => editorInstance?.commands.redo()}
-            sx={{ color: "text.disabled" }}
+            aria-label="Redo"
           >
-            <RedoIcon sx={{ fontSize: 18 }} />
-          </IconButton>
+            <Redo2 size={18} />
+          </button>
         </Tooltip>
-        <Box sx={{ width: "1px", height: 16, bgcolor: "divider", mx: 0.5 }} />
-        <Tooltip title="Article settings" arrow>
-          <IconButton size="small" onClick={() => setSettingsOpen(true)} sx={{ color: "text.disabled" }}>
-            <SettingsOutlinedIcon sx={{ fontSize: 18 }} />
-          </IconButton>
+        <span className="divider-v" />
+        <Tooltip title="Article settings">
+          <button
+            className="icon-btn"
+            onClick={() => setSettingsOpen(true)}
+            aria-label="Article settings"
+          >
+            <Settings size={18} />
+          </button>
         </Tooltip>
-        <Box sx={{ width: "1px", height: 16, bgcolor: "divider", mx: 0.5 }} />
-        <Tooltip title="Publish article" arrow>
-          <IconButton
-            size="small"
-            onClick={() => { setPublishState("idle"); setPublishDialogOpen(true); }}
-            sx={{ color: "primary.main" }}
+        <span className="divider-v" />
+        <Tooltip title="Publish article">
+          <button
+            className="icon-btn icon-btn--primary"
+            onClick={openPublishDialog}
+            aria-label="Publish article"
           >
-            <PublishOutlinedIcon sx={{ fontSize: 18 }} />
-          </IconButton>
+            <Upload size={18} />
+          </button>
         </Tooltip>
-        <Chip
-          avatar={
-            user.avatarUrl
-              ? <Avatar src={user.avatarUrl} sx={{ width: 18, height: 18 }} />
-              : undefined
-          }
-          label={user.name}
-          size="small"
-          sx={{
-            bgcolor: user.color,
-            color: "#000",
-            fontWeight: 600,
-            fontSize: "0.65rem",
-            height: 22,
-            ml: 0.5,
-          }}
-        />
-      </Box>
+        <span
+          className="chip"
+          style={{ backgroundColor: user.color, color: "#000", marginLeft: 4 }}
+        >
+          {user.avatarUrl && <img src={user.avatarUrl} alt="" />}
+          {user.name}
+        </span>
+      </div>
 
       {/* Single scroll container */}
       <div
@@ -296,19 +269,14 @@ export default function App() {
         style={{ flex: 1, overflowY: "auto", overflowX: "hidden" }}
       >
         <div className="content-grid">
-          {/* Hero - center column only, row 1 */}
           <div className="content-grid__hero">
             <FrontmatterHero store={frontmatterStore} />
           </div>
-
-          {/* TOC - left column, row 2, sticky */}
           <div className="content-grid__toc">
             <div className="table-of-contents--sticky">
               <TableOfContents editor={editorInstance} />
             </div>
           </div>
-
-          {/* Editor - center column, row 2 */}
           <div className="content-grid__editor">
             <Editor
               docName={docName}
@@ -322,8 +290,6 @@ export default function App() {
               onAddComment={handleAddComment}
             />
           </div>
-
-          {/* Comments - right column, row 2 */}
           <div className="content-grid__comments">
             <CommentsSidebar
               editor={editorInstance}
@@ -335,47 +301,16 @@ export default function App() {
         </div>
       </div>
 
-      {/* Floating chat - bottom left */}
+      {/* Floating chat */}
       {chatOpen ? (
-        <Box
-          sx={{
-            position: "fixed",
-            bottom: 16,
-            left: 16,
-            width: 360,
-            height: 520,
-            maxHeight: "calc(100vh - 80px)",
-            borderRadius: 3,
-            overflow: "hidden",
-            display: "flex",
-            flexDirection: "column",
-            bgcolor: "background.paper",
-            border: "1px solid",
-            borderColor: "divider",
-            boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
-            zIndex: 1300,
-          }}
-        >
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              px: 1.5,
-              py: 0.75,
-              borderBottom: "1px solid",
-              borderColor: "divider",
-              flexShrink: 0,
-            }}
-          >
-            <Typography variant="caption" sx={{ fontWeight: 600, color: "text.secondary", fontSize: "0.7rem" }}>
-              AI Assistant
-            </Typography>
-            <IconButton size="small" onClick={() => setChatOpen(false)} sx={{ color: "text.disabled" }}>
-              <CloseIcon sx={{ fontSize: 16 }} />
-            </IconButton>
-          </Box>
-          <Box sx={{ flex: 1, overflow: "hidden", display: "flex" }}>
+        <div className="chat-floating">
+          <div className="chat-floating__header">
+            <span className="chat-floating__title">AI Assistant</span>
+            <button className="icon-btn" onClick={() => setChatOpen(false)} aria-label="Close chat">
+              <X size={16} />
+            </button>
+          </div>
+          <div className="chat-floating__body">
             <ChatPanel
               messages={agentChat.messages}
               isLoading={agentChat.isLoading}
@@ -388,33 +323,17 @@ export default function App() {
               onStop={agentChat.stop}
               onNewChat={() => window.location.reload()}
             />
-          </Box>
-        </Box>
+          </div>
+        </div>
       ) : (
-        <Tooltip title="AI Assistant" placement="right" arrow>
-          <IconButton
+        <Tooltip title="AI Assistant" placement="right">
+          <button
+            className={`chat-fab ${agentChat.isLoading ? "badge-dot" : "badge-dot badge-dot--hidden"}`}
             onClick={() => setChatOpen(true)}
-            sx={{
-              position: "fixed",
-              bottom: 20,
-              left: 20,
-              width: 48,
-              height: 48,
-              bgcolor: "primary.main",
-              color: "primary.contrastText",
-              boxShadow: "0 4px 16px rgba(0,0,0,0.3)",
-              zIndex: 1300,
-              "&:hover": { bgcolor: "primary.dark" },
-            }}
+            aria-label="AI Assistant"
           >
-            <Badge
-              color="error"
-              variant="dot"
-              invisible={!agentChat.isLoading}
-            >
-              <ChatBubbleOutlineIcon sx={{ fontSize: 22 }} />
-            </Badge>
-          </IconButton>
+            <MessageCircle size={22} />
+          </button>
         </Tooltip>
       )}
 
@@ -431,59 +350,53 @@ export default function App() {
         settingsMap={settingsMap}
       />
 
-      <Dialog
-        open={publishDialogOpen}
-        onClose={() => setPublishDialogOpen(false)}
-        maxWidth="xs"
-        fullWidth
+      {/* Publish dialog (native <dialog>) */}
+      <dialog
+        ref={publishDialogRef}
+        className="ed-dialog"
+        onClose={closePublishDialog}
       >
-        <DialogTitle>
+        <h2 className="ed-dialog__title">
           {publishState === "success" ? "Published!" : "Publish article"}
-        </DialogTitle>
-        <DialogContent>
+        </h2>
+        <div className="ed-dialog__body">
           {publishState === "idle" && (
-            <DialogContentText>
+            <p>
               This will generate a static HTML page, PDF, and thumbnail
               from the current document. Visitors without edit access
               will see the published version.
-            </DialogContentText>
+            </p>
           )}
           {publishState === "loading" && (
-            <Box sx={{ display: "flex", alignItems: "center", gap: 2, py: 2 }}>
-              <CircularProgress size={24} />
-              <DialogContentText sx={{ m: 0 }}>
-                Publishing...
-              </DialogContentText>
-            </Box>
+            <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "8px 0" }}>
+              <span className="spinner" />
+              <p style={{ margin: 0 }}>Publishing...</p>
+            </div>
           )}
           {publishState === "success" && (
-            <DialogContentText>
+            <p>
               Article published successfully. Visitors will now see
               the updated version.
-            </DialogContentText>
+            </p>
           )}
           {publishState === "error" && (
-            <DialogContentText color="error">
+            <p style={{ color: "var(--ed-error)" }}>
               {publishError || "An error occurred while publishing."}
-            </DialogContentText>
+            </p>
           )}
-        </DialogContent>
-        <DialogActions>
+        </div>
+        <div className="ed-dialog__actions">
           {publishState === "idle" && (
             <>
-              <Button onClick={() => setPublishDialogOpen(false)}>Cancel</Button>
-              <Button variant="contained" onClick={handlePublish}>
-                Publish
-              </Button>
+              <button className="btn" onClick={closePublishDialog}>Cancel</button>
+              <button className="btn btn--primary" onClick={handlePublish}>Publish</button>
             </>
           )}
-          {publishState === "loading" && null}
           {(publishState === "success" || publishState === "error") && (
-            <Button onClick={() => setPublishDialogOpen(false)}>Close</Button>
+            <button className="btn" onClick={closePublishDialog}>Close</button>
           )}
-        </DialogActions>
-      </Dialog>
-    </Box>
-    </ThemeProvider>
+        </div>
+      </dialog>
+    </div>
   );
 }

frontend/src/components/ChatPanel.tsx

@@ -1,22 +1,16 @@
 import { useState, useRef, useEffect, type KeyboardEvent } from "react";
+import { Tooltip } from "./Tooltip";
 import {
-  Box,
-  Typography,
-  IconButton,
-  TextField,
-  Tooltip,
-  Chip,
-  CircularProgress,
-} from "@mui/material";
-import SendIcon from "@mui/icons-material/Send";
-import StopIcon from "@mui/icons-material/Stop";
-import AddIcon from "@mui/icons-material/Add";
-import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
-import ShortTextIcon from "@mui/icons-material/ShortText";
-import ExpandIcon from "@mui/icons-material/Expand";
-import SpellcheckIcon from "@mui/icons-material/Spellcheck";
-import TranslateIcon from "@mui/icons-material/Translate";
-import CompressIcon from "@mui/icons-material/Compress";
+  Send,
+  Square,
+  Plus,
+  Sparkles,
+  AlignLeft,
+  Expand,
+  SpellCheck,
+  Languages,
+  Shrink,
+} from "lucide-react";
 import type { UIMessage } from "ai";
 
 interface ChatPanelProps {
@@ -33,12 +27,12 @@ interface ChatPanelProps {
 }
 
 const QUICK_ACTIONS = [
-  { id: "rewrite", label: "Rewrite", icon: <AutoFixHighIcon sx={{ fontSize: 14 }} /> },
-  { id: "expand", label: "Expand", icon: <ExpandIcon sx={{ fontSize: 14 }} /> },
-  { id: "summarize", label: "Summarize", icon: <CompressIcon sx={{ fontSize: 14 }} /> },
-  { id: "fix-grammar", label: "Fix grammar", icon: <SpellcheckIcon sx={{ fontSize: 14 }} /> },
-  { id: "translate", label: "Translate", icon: <TranslateIcon sx={{ fontSize: 14 }} /> },
-  { id: "simplify", label: "Simplify", icon: <ShortTextIcon sx={{ fontSize: 14 }} /> },
+  { id: "rewrite", label: "Rewrite", Icon: Sparkles },
+  { id: "expand", label: "Expand", Icon: Expand },
+  { id: "summarize", label: "Summarize", Icon: Shrink },
+  { id: "fix-grammar", label: "Fix grammar", Icon: SpellCheck },
+  { id: "translate", label: "Translate", Icon: Languages },
+  { id: "simplify", label: "Simplify", Icon: AlignLeft },
 ];
 
 export function ChatPanel({
@@ -77,56 +71,23 @@ export function ChatPanel({
   };
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        width: "100%",
-      }}
-    >
+    <div className="chat-panel">
       {/* Header */}
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          px: 1.5,
-          py: 1,
-          borderBottom: "1px solid",
-          borderColor: "divider",
-          flexShrink: 0,
-        }}
-      >
-        <Typography variant="caption" sx={{ fontWeight: 600, color: "text.secondary", letterSpacing: "0.05em", textTransform: "uppercase" }}>
-          Assistant
-        </Typography>
-        <Tooltip title="New conversation" arrow>
-          <IconButton size="small" onClick={onNewChat} sx={{ color: "text.disabled" }}>
-            <AddIcon sx={{ fontSize: 16 }} />
-          </IconButton>
+      <div className="chat-panel__header">
+        <span className="chat-panel__label">Assistant</span>
+        <Tooltip title="New conversation">
+          <button className="icon-btn" onClick={onNewChat} aria-label="New conversation">
+            <Plus size={16} />
+          </button>
         </Tooltip>
-      </Box>
+      </div>
 
       {/* Messages */}
-      <Box
-        ref={scrollRef}
-        sx={{
-          flex: 1,
-          overflow: "auto",
-          px: 1.5,
-          py: 1,
-          display: "flex",
-          flexDirection: "column",
-          gap: 1.5,
-        }}
-      >
+      <div ref={scrollRef} className="chat-panel__messages">
         {messages.length === 0 && (
-          <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", flex: 1, opacity: 0.4 }}>
-            <Typography variant="caption" sx={{ textAlign: "center", maxWidth: 200 }}>
-              Ask me to write, edit, expand, or improve your article.
-            </Typography>
-          </Box>
+          <div className="chat-panel__empty">
+            Ask me to write, edit, expand, or improve your article.
+          </div>
         )}
 
         {messages.map((msg) => (
@@ -134,106 +95,65 @@ export function ChatPanel({
         ))}
 
         {isLoading && messages.length > 0 && !messages[messages.length - 1]?.content && (
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1, px: 1 }}>
-            <CircularProgress size={12} sx={{ color: "text.disabled" }} />
-            <Typography variant="caption" sx={{ color: "text.disabled" }}>
-              Thinking...
-            </Typography>
-          </Box>
+          <div className="chat-panel__thinking">
+            <span className="spinner" style={{ width: 12, height: 12, borderWidth: 2 }} />
+            <span>Thinking...</span>
+          </div>
         )}
 
         {error && (
-          <Box sx={{ px: 1, py: 0.5, bgcolor: "error.dark", borderRadius: 1, opacity: 0.8 }}>
-            <Typography variant="caption" sx={{ color: "error.contrastText" }}>
-              {error.message}
-            </Typography>
-          </Box>
+          <div className="chat-panel__error">
+            {error.message}
+          </div>
         )}
-      </Box>
+      </div>
 
       {/* Quick actions */}
       {hasSelection && (
-        <Box
-          sx={{
-            display: "flex",
-            flexWrap: "wrap",
-            gap: 0.5,
-            px: 1.5,
-            py: 0.75,
-            borderTop: "1px solid",
-            borderColor: "divider",
-            flexShrink: 0,
-          }}
-        >
+        <div className="chat-panel__actions">
           {QUICK_ACTIONS.map((action) => (
-            <Chip
+            <button
               key={action.id}
-              label={action.label}
-              icon={action.icon}
-              size="small"
-              variant="outlined"
+              className="chip chip--outlined chip--clickable"
               onClick={() => onQuickAction(action.id)}
-              sx={{
-                fontSize: "0.65rem",
-                height: 24,
-                cursor: "pointer",
-                borderColor: "divider",
-                "&:hover": { borderColor: "text.secondary", bgcolor: "action.hover" },
-              }}
-            />
+              style={{ height: 24, fontSize: "0.65rem", gap: 3 }}
+            >
+              <action.Icon size={12} />
+              {action.label}
+            </button>
           ))}
-        </Box>
+        </div>
       )}
 
       {/* Input */}
-      <Box
-        sx={{
-          px: 1.5,
-          py: 1,
-          borderTop: "1px solid",
-          borderColor: "divider",
-          flexShrink: 0,
-        }}
-      >
-        <Box sx={{ display: "flex", gap: 0.5, alignItems: "flex-end" }}>
-          <TextField
-            multiline
-            maxRows={4}
-            fullWidth
-            size="small"
+      <div className="chat-panel__input">
+        <div className="chat-panel__input-row">
+          <textarea
+            className="chat-panel__textarea"
+            rows={1}
             placeholder="Ask anything..."
             value={inputValue}
             onChange={(e) => onSetInput(e.target.value)}
             onKeyDown={handleKeyDown}
-            variant="standard"
-            slotProps={{
-              input: {
-                disableUnderline: true,
-                sx: {
-                  fontSize: "0.85rem",
-                  lineHeight: 1.5,
-                  py: 0.5,
-                },
-              },
-            }}
           />
           {isLoading ? (
-            <IconButton size="small" onClick={onStop} sx={{ color: "warning.main", flexShrink: 0 }}>
-              <StopIcon sx={{ fontSize: 18 }} />
-            </IconButton>
+            <button className="icon-btn" onClick={onStop} aria-label="Stop" style={{ color: "#ff9800", flexShrink: 0 }}>
+              <Square size={18} />
+            </button>
           ) : (
-            <IconButton
-              size="small"
+            <button
+              className="icon-btn"
               onClick={handleSubmit}
               disabled={!inputValue.trim()}
-              sx={{ color: inputValue.trim() ? "primary.main" : "text.disabled", flexShrink: 0 }}
+              aria-label="Send"
+              style={{ color: inputValue.trim() ? "var(--primary-color)" : "var(--ed-text-disabled)", flexShrink: 0 }}
             >
-              <SendIcon sx={{ fontSize: 18 }} />
-            </IconButton>
+              <Send size={18} />
+            </button>
           )}
-        </Box>
-      </Box>
-    </Box>
+        </div>
+      </div>
+    </div>
   );
 }
 
@@ -250,59 +170,30 @@ function MessageBubble({ message }: { message: UIMessage }) {
   if (!textContent && message.role === "assistant" && toolParts.length === 0) return null;
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
+    <div className="chat-bubble">
       {textContent && (
-        <Box
-          sx={{
-            alignSelf: isUser ? "flex-end" : "flex-start",
-            maxWidth: "95%",
-            px: 1.5,
-            py: 0.75,
-            borderRadius: 2,
-            bgcolor: isUser ? "rgba(149, 141, 241, 0.15)" : "transparent",
-          }}
-        >
-          <Typography
-            variant="body2"
-            sx={{
-              fontSize: "0.8rem",
-              lineHeight: 1.6,
-              color: isUser ? "text.primary" : "text.secondary",
-              whiteSpace: "pre-wrap",
-              wordBreak: "break-word",
-            }}
-          >
-            {textContent}
-          </Typography>
-        </Box>
+        <div className={`chat-bubble__text ${isUser ? "chat-bubble__text--user" : ""}`}>
+          {textContent}
+        </div>
       )}
 
       {toolParts.map((part, i) => {
         const tool = part as { type: "tool-invocation"; toolInvocation: { toolName: string; state: string; result?: unknown } };
         return (
-          <Box
-            key={i}
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              gap: 0.5,
-              px: 1.5,
-              opacity: 0.6,
-            }}
-          >
-            <AutoFixHighIcon sx={{ fontSize: 12 }} />
-            <Typography variant="caption" sx={{ fontSize: "0.65rem" }}>
+          <div key={i} className="chat-bubble__tool">
+            <Sparkles size={12} />
+            <span>
               {toolLabel(tool.toolInvocation.toolName)}
               {tool.toolInvocation.state === "result" && tool.toolInvocation.result
                 ? ` - ${tool.toolInvocation.result}`
                 : tool.toolInvocation.state === "call"
                   ? " (executing...)"
                   : ""}
-            </Typography>
-          </Box>
+            </span>
+          </div>
         );
       })}
-    </Box>
+    </div>
   );
 }
 

frontend/src/components/CommentDialog.tsx

@@ -1,11 +1,4 @@
-import { useState, useEffect, useRef } from "react";
-import {
-  Dialog,
-  DialogContent,
-  TextField,
-  Button,
-  Box,
-} from "@mui/material";
+import { useState, useEffect, useRef, useCallback } from "react";
 
 interface CommentDialogProps {
   open: boolean;
@@ -15,66 +8,70 @@ interface CommentDialogProps {
 
 export function CommentDialog({ open, onClose, onSubmit }: CommentDialogProps) {
   const [text, setText] = useState("");
-  const inputRef = useRef<HTMLInputElement>(null);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
-    if (open) {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    if (open && !dialog.open) {
+      dialog.showModal();
       setText("");
-      setTimeout(() => inputRef.current?.focus(), 100);
+      setTimeout(() => inputRef.current?.focus(), 50);
+    } else if (!open && dialog.open) {
+      dialog.close();
     }
   }, [open]);
 
+  const handleClose = useCallback(() => {
+    dialogRef.current?.close();
+    onClose();
+  }, [onClose]);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const onCancel = () => onClose();
+    dialog.addEventListener("close", onCancel);
+    return () => dialog.removeEventListener("close", onCancel);
+  }, [onClose]);
+
   const handleSubmit = () => {
     if (!text.trim()) return;
     onSubmit(text.trim());
     setText("");
-    onClose();
+    handleClose();
   };
 
   return (
-    <Dialog
-      open={open}
-      onClose={onClose}
-      maxWidth="xs"
-      fullWidth
-      PaperProps={{
-        sx: {
-          bgcolor: "background.paper",
-          backgroundImage: "none",
-        },
-      }}
-    >
-      <DialogContent sx={{ p: 2 }}>
-        <TextField
-          inputRef={inputRef}
-          multiline
-          minRows={2}
-          maxRows={4}
-          fullWidth
-          size="small"
+    <dialog ref={dialogRef} className="ed-dialog">
+      <div className="ed-dialog__body" style={{ padding: "16px" }}>
+        <textarea
+          ref={inputRef}
+          className="form-input"
+          rows={3}
           placeholder="Add your comment..."
           value={text}
           onChange={(e) => setText(e.target.value)}
           onKeyDown={(e) => {
             if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleSubmit();
           }}
-          sx={{ mb: 1.5 }}
+          style={{ marginBottom: 12 }}
         />
-        <Box sx={{ display: "flex", gap: 1, justifyContent: "flex-end" }}>
-          <Button size="small" onClick={onClose} sx={{ textTransform: "none" }}>
+        <div className="ed-dialog__actions" style={{ padding: 0 }}>
+          <button className="btn" onClick={handleClose}>
             Cancel
-          </Button>
-          <Button
-            size="small"
-            variant="contained"
+          </button>
+          <button
+            className="btn btn--primary"
             onClick={handleSubmit}
             disabled={!text.trim()}
-            sx={{ textTransform: "none" }}
           >
             Comment
-          </Button>
-        </Box>
-      </DialogContent>
-    </Dialog>
+          </button>
+        </div>
+      </div>
+    </dialog>
   );
 }

frontend/src/components/CommentsSidebar.tsx

@@ -1,15 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import {
-  Box,
-  Typography,
-  IconButton,
-  Chip,
-  Paper,
-  Tooltip,
-  Fade,
-} from "@mui/material";
-import CheckCircleOutlinedIcon from "@mui/icons-material/CheckCircleOutlined";
-import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
+import { Tooltip } from "./Tooltip";
+import { CheckCircle, Trash2 } from "lucide-react";
 import type { Editor } from "@tiptap/core";
 import type { CommentStore, CommentData } from "../editor/comments";
 
@@ -41,7 +32,6 @@ export function CommentsSidebar({ editor, commentStore, user, editorContainer }:
     return commentStore.observe(refresh);
   }, [commentStore, refresh]);
 
-  // Compute Y positions of comment marks in the editor
   const updatePositions = useCallback(() => {
     if (!editor || !editorContainer) return;
 
@@ -74,7 +64,6 @@ export function CommentsSidebar({ editor, commentStore, user, editorContainer }:
       }
     }
 
-    // Avoid overlaps: push comments down if they'd overlap the previous one
     result.sort((a, b) => a.top - b.top);
     const MIN_GAP = 80;
     for (let i = 1; i < result.length; i++) {
@@ -118,11 +107,6 @@ export function CommentsSidebar({ editor, commentStore, user, editorContainer }:
     commentStore.resolve(id, user.name);
   };
 
-  const handleUnresolve = (id: string) => {
-    if (!commentStore) return;
-    commentStore.unresolve(id);
-  };
-
   const handleDelete = (id: string) => {
     if (!commentStore || !editor) return;
     commentStore.remove(id);
@@ -140,30 +124,28 @@ export function CommentsSidebar({ editor, commentStore, user, editorContainer }:
   };
 
   return (
-    <Box ref={sidebarRef} sx={{ position: "relative", width: "100%", minHeight: "100%" }}>
-      {/* Positioned comments */}
+    <div ref={sidebarRef} style={{ position: "relative", width: "100%", minHeight: "100%" }}>
       {positioned.map((c) => (
-        <Fade in key={c.id}>
-          <Box
-            sx={{
-              position: "absolute",
-              top: c.top,
-              left: 0,
-              right: 0,
-              transition: "top 0.2s ease",
-            }}
-          >
-            <CommentCard
-              comment={c}
-              active={activeId === c.id}
-              onResolve={() => handleResolve(c.id)}
-              onDelete={() => handleDelete(c.id)}
-              onClick={() => setActiveId(activeId === c.id ? null : c.id)}
-            />
-          </Box>
-        </Fade>
+        <div
+          key={c.id}
+          style={{
+            position: "absolute",
+            top: c.top,
+            left: 0,
+            right: 0,
+            transition: "top 0.2s ease",
+          }}
+        >
+          <CommentCard
+            comment={c}
+            active={activeId === c.id}
+            onResolve={() => handleResolve(c.id)}
+            onDelete={() => handleDelete(c.id)}
+            onClick={() => setActiveId(activeId === c.id ? null : c.id)}
+          />
+        </div>
       ))}
-    </Box>
+    </div>
   );
 }
 
@@ -188,53 +170,43 @@ function CommentCard({
   });
 
   return (
-    <Paper
-      variant="outlined"
+    <div
+      className={`comment-card surface ${active ? "comment-card--active" : ""}`}
+      style={{ borderLeftColor: comment.authorColor }}
       onClick={onClick}
-      sx={{
-        p: 1.25,
-        cursor: "pointer",
-        borderLeft: 3,
-        borderLeftColor: comment.authorColor,
-        borderColor: active ? "primary.main" : "divider",
-        bgcolor: active ? "rgba(149,141,241,0.05)" : "background.paper",
-        transition: "all 0.15s",
-        "&:hover": { borderColor: "primary.main" },
-      }}
     >
-      <Box sx={{ display: "flex", alignItems: "center", gap: 0.5, mb: 0.5 }}>
-        <Chip
-          label={comment.author}
-          size="small"
-          sx={{
-            bgcolor: comment.authorColor,
-            color: "#000",
-            fontWeight: 600,
-            fontSize: "0.65rem",
-            height: 18,
-          }}
-        />
-        <Typography variant="caption" sx={{ color: "text.disabled", ml: "auto", fontSize: "0.65rem" }}>
-          {time}
-        </Typography>
-      </Box>
-
-      <Typography variant="body2" sx={{ fontSize: "0.8rem", color: "text.primary", mb: 0.75, lineHeight: 1.5 }}>
-        {comment.text}
-      </Typography>
-
-      <Box sx={{ display: "flex", gap: 0.25 }}>
-        <Tooltip title="Resolve" arrow>
-          <IconButton size="small" onClick={(e) => { e.stopPropagation(); onResolve(); }} sx={{ color: "success.main", p: 0.5 }}>
-            <CheckCircleOutlinedIcon sx={{ fontSize: 16 }} />
-          </IconButton>
+      <div className="comment-card__header">
+        <span
+          className="chip"
+          style={{ backgroundColor: comment.authorColor, color: "#000" }}
+        >
+          {comment.author}
+        </span>
+        <span className="comment-card__time">{time}</span>
+      </div>
+
+      <div className="comment-card__text">{comment.text}</div>
+
+      <div className="comment-card__actions">
+        <Tooltip title="Resolve">
+          <button
+            className="icon-btn icon-btn--success"
+            onClick={(e) => { e.stopPropagation(); onResolve(); }}
+            aria-label="Resolve"
+          >
+            <CheckCircle size={16} />
+          </button>
         </Tooltip>
-        <Tooltip title="Delete" arrow>
-          <IconButton size="small" onClick={(e) => { e.stopPropagation(); onDelete(); }} sx={{ color: "error.main", p: 0.5 }}>
-            <DeleteOutlinedIcon sx={{ fontSize: 16 }} />
-          </IconButton>
+        <Tooltip title="Delete">
+          <button
+            className="icon-btn icon-btn--danger"
+            onClick={(e) => { e.stopPropagation(); onDelete(); }}
+            aria-label="Delete"
+          >
+            <Trash2 size={16} />
+          </button>
         </Tooltip>
-      </Box>
-    </Paper>
+      </div>
+    </div>
   );
 }

frontend/src/components/Tooltip.tsx

@@ -0,0 +1,55 @@
+import { useState, useRef, useCallback, useEffect, type ReactNode } from "react";
+import { computePosition, offset, flip, shift, type Placement } from "@floating-ui/dom";
+
+interface TooltipProps {
+  title: string;
+  placement?: Placement;
+  children: ReactNode;
+}
+
+export function Tooltip({ title, placement = "top", children }: TooltipProps) {
+  const triggerRef = useRef<HTMLSpanElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+
+  const reposition = useCallback(() => {
+    const trigger = triggerRef.current;
+    const tip = tooltipRef.current;
+    if (!trigger || !tip) return;
+
+    computePosition(trigger, tip, {
+      placement,
+      strategy: "fixed",
+      middleware: [offset(6), flip(), shift({ padding: 8 })],
+    }).then(({ x, y }) => {
+      tip.style.left = `${x}px`;
+      tip.style.top = `${y}px`;
+    });
+  }, [placement]);
+
+  useEffect(() => {
+    if (open) reposition();
+  }, [open, reposition]);
+
+  if (!title) return <>{children}</>;
+
+  return (
+    <>
+      <span
+        ref={triggerRef}
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+        onFocus={() => setOpen(true)}
+        onBlur={() => setOpen(false)}
+        style={{ display: "inline-flex" }}
+      >
+        {children}
+      </span>
+      {open && (
+        <div ref={tooltipRef} className="ed-tooltip" role="tooltip">
+          {title}
+        </div>
+      )}
+    </>
+  );
+}

frontend/src/editor/BubbleToolbar.tsx

@@ -1,15 +1,17 @@
 import { BubbleMenu } from "@tiptap/react/menus";
 import type { Editor } from "@tiptap/core";
-import { Box, IconButton, Divider, Tooltip } from "@mui/material";
-import FormatBoldIcon from "@mui/icons-material/FormatBold";
-import FormatItalicIcon from "@mui/icons-material/FormatItalic";
-import StrikethroughSIcon from "@mui/icons-material/StrikethroughS";
-import CodeIcon from "@mui/icons-material/Code";
-import FormatQuoteIcon from "@mui/icons-material/FormatQuote";
-import LinkIcon from "@mui/icons-material/Link";
-import TitleIcon from "@mui/icons-material/Title";
-import ChatBubbleOutlinedIcon from "@mui/icons-material/ChatBubbleOutlined";
-import FunctionsIcon from "@mui/icons-material/Functions";
+import { Tooltip } from "../components/Tooltip";
+import {
+  Bold,
+  Italic,
+  Strikethrough,
+  Code,
+  Quote,
+  Link,
+  Heading2,
+  MessageCircle,
+  Sigma,
+} from "lucide-react";
 
 interface BubbleToolbarProps {
   editor: Editor;
@@ -28,22 +30,17 @@ function Btn({
   children: React.ReactNode;
 }) {
   return (
-    <Tooltip title={tooltip} arrow placement="top">
-      <IconButton
+    <Tooltip title={tooltip} placement="top">
+      <button
+        className={`icon-btn ${active ? "icon-btn--active" : ""}`}
         onMouseDown={(e) => {
           e.preventDefault();
           onClick();
         }}
-        size="small"
-        sx={{
-          color: active ? "#fff" : "rgba(255,255,255,0.6)",
-          "&:hover": { color: "#fff" },
-          borderRadius: 1,
-          p: 0.75,
-        }}
+        aria-label={tooltip}
       >
         {children}
-      </IconButton>
+      </button>
     </Tooltip>
   );
 }
@@ -61,91 +58,76 @@ export function BubbleToolbar({ editor, onAddComment }: BubbleToolbarProps) {
       editor={editor}
       options={{ placement: "top", offset: 6 }}
     >
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          gap: 0.25,
-          bgcolor: "#1a1a1a",
-          border: "1px solid #333",
-          borderRadius: 2,
-          px: 0.5,
-          py: 0.25,
-          boxShadow: "0 4px 20px rgba(0,0,0,0.4)",
-        }}
-      >
+      <div className="bubble-toolbar">
         <Btn
           onClick={() => editor.chain().focus().toggleBold().run()}
           active={editor.isActive("bold")}
           tooltip="Bold"
         >
-          <FormatBoldIcon sx={{ fontSize: 18 }} />
+          <Bold size={18} />
         </Btn>
         <Btn
           onClick={() => editor.chain().focus().toggleItalic().run()}
           active={editor.isActive("italic")}
           tooltip="Italic"
         >
-          <FormatItalicIcon sx={{ fontSize: 18 }} />
+          <Italic size={18} />
         </Btn>
         <Btn
           onClick={() => editor.chain().focus().toggleStrike().run()}
           active={editor.isActive("strike")}
           tooltip="Strikethrough"
         >
-          <StrikethroughSIcon sx={{ fontSize: 18 }} />
+          <Strikethrough size={18} />
         </Btn>
         <Btn
           onClick={() => editor.chain().focus().toggleCode().run()}
           active={editor.isActive("code")}
           tooltip="Code"
         >
-          <CodeIcon sx={{ fontSize: 18 }} />
+          <Code size={18} />
         </Btn>
         <Btn
           onClick={() => editor.chain().focus().insertInlineMath({ latex: "x^2" }).run()}
           active={editor.isActive("inlineMath")}
           tooltip="Inline math"
         >
-          <FunctionsIcon sx={{ fontSize: 18 }} />
+          <Sigma size={18} />
         </Btn>
 
-        <Divider orientation="vertical" flexItem sx={{ mx: 0.25, borderColor: "#444" }} />
+        <span className="divider-v" />
 
         <Btn
           onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
           active={editor.isActive("heading", { level: 2 })}
           tooltip="Heading"
         >
-          <TitleIcon sx={{ fontSize: 18 }} />
+          <Heading2 size={18} />
         </Btn>
         <Btn
           onClick={() => editor.chain().focus().toggleBlockquote().run()}
           active={editor.isActive("blockquote")}
           tooltip="Quote"
         >
-          <FormatQuoteIcon sx={{ fontSize: 18 }} />
+          <Quote size={18} />
         </Btn>
         <Btn
           onClick={setLink}
           active={editor.isActive("link")}
           tooltip="Link"
         >
-          <LinkIcon sx={{ fontSize: 18 }} />
+          <Link size={18} />
         </Btn>
 
         {onAddComment && (
           <>
-            <Divider orientation="vertical" flexItem sx={{ mx: 0.25, borderColor: "#444" }} />
-            <Btn
-              onClick={onAddComment}
-              tooltip="Comment"
-            >
-              <ChatBubbleOutlinedIcon sx={{ fontSize: 18 }} />
+            <span className="divider-v" />
+            <Btn onClick={onAddComment} tooltip="Comment">
+              <MessageCircle size={18} />
             </Btn>
           </>
         )}
-      </Box>
+      </div>
     </BubbleMenu>
   );
 }

frontend/src/editor/FloatingActions.tsx

@@ -1,15 +1,18 @@
 import { FloatingMenu } from "@tiptap/react";
 import type { Editor } from "@tiptap/core";
 import { useState } from "react";
-import { Box, IconButton, Tooltip, Fade, Paper } from "@mui/material";
-import AddIcon from "@mui/icons-material/Add";
-import TitleIcon from "@mui/icons-material/Title";
-import FormatQuoteIcon from "@mui/icons-material/FormatQuote";
-import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
-import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
-import DataObjectIcon from "@mui/icons-material/DataObject";
-import HorizontalRuleIcon from "@mui/icons-material/HorizontalRule";
-import FunctionsIcon from "@mui/icons-material/Functions";
+import { Tooltip } from "../components/Tooltip";
+import {
+  Plus,
+  Heading2,
+  Heading3,
+  Quote,
+  List,
+  ListOrdered,
+  Braces,
+  Minus,
+  Sigma,
+} from "lucide-react";
 
 interface FloatingActionsProps {
   editor: Editor;
@@ -32,112 +35,94 @@ export function FloatingActions({ editor }: FloatingActionsProps) {
         offset: [-4, 0],
       }}
     >
-      <Box sx={{ display: "flex", alignItems: "flex-start", gap: 0.5 }}>
-        <Tooltip title="Insert block" arrow placement="left">
-          <IconButton
-            size="small"
+      <div className="floating-actions">
+        <Tooltip title="Insert block" placement="left">
+          <button
+            className={`floating-actions__toggle ${open ? "floating-actions__toggle--open" : ""}`}
             onClick={() => setOpen(!open)}
-            sx={{
-              color: open ? "text.primary" : "text.disabled",
-              border: "1px solid",
-              borderColor: open ? "divider" : "transparent",
-              transition: "all 0.15s",
-              "&:hover": { color: "text.primary", borderColor: "divider" },
-              transform: open ? "rotate(45deg)" : "none",
-              p: 0.5,
-            }}
+            aria-label="Insert block"
           >
-            <AddIcon sx={{ fontSize: 20 }} />
-          </IconButton>
+            <Plus />
+          </button>
         </Tooltip>
 
-        <Fade in={open} timeout={150}>
-          <Paper
-            variant="outlined"
-            sx={{
-              display: open ? "flex" : "none",
-              gap: 0.25,
-              px: 0.5,
-              py: 0.25,
-              bgcolor: "background.paper",
-              boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
-            }}
-          >
-            <Tooltip title="Heading 2" arrow>
-              <IconButton
-                size="small"
+        {open && (
+          <div className="floating-actions__panel surface">
+            <Tooltip title="Heading 2">
+              <button
+                className="icon-btn"
                 onClick={() => insert(() => editor.chain().focus().toggleHeading({ level: 2 }).run())}
-                sx={{ color: "text.secondary", p: 0.75 }}
+                aria-label="Heading 2"
               >
-                <TitleIcon sx={{ fontSize: 18 }} />
-              </IconButton>
+                <Heading2 size={18} />
+              </button>
             </Tooltip>
-            <Tooltip title="Heading 3" arrow>
-              <IconButton
-                size="small"
+            <Tooltip title="Heading 3">
+              <button
+                className="icon-btn"
                 onClick={() => insert(() => editor.chain().focus().toggleHeading({ level: 3 }).run())}
-                sx={{ color: "text.secondary", fontSize: "0.75rem", fontWeight: 700, p: 0.75 }}
+                aria-label="Heading 3"
               >
-                H3
-              </IconButton>
+                <Heading3 size={18} />
+              </button>
             </Tooltip>
-            <Tooltip title="Quote" arrow>
-              <IconButton
-                size="small"
+            <Tooltip title="Quote">
+              <button
+                className="icon-btn"
                 onClick={() => insert(() => editor.chain().focus().toggleBlockquote().run())}
-                sx={{ color: "text.secondary", p: 0.75 }}
+                aria-label="Quote"
               >
-                <FormatQuoteIcon sx={{ fontSize: 18 }} />
-              </IconButton>
+                <Quote size={18} />
+              </button>
             </Tooltip>
-            <Tooltip title="Bullet list" arrow>
-              <IconButton
-                size="small"
+            <Tooltip title="Bullet list">
+              <button
+                className="icon-btn"
                 onClick={() => insert(() => editor.chain().focus().toggleBulletList().run())}
-                sx={{ color: "text.secondary", p: 0.75 }}
+                aria-label="Bullet list"
               >
-                <FormatListBulletedIcon sx={{ fontSize: 18 }} />
-              </IconButton>
+                <List size={18} />
+              </button>
             </Tooltip>
-            <Tooltip title="Numbered list" arrow>
-              <IconButton
-                size="small"
+            <Tooltip title="Numbered list">
+              <button
+                className="icon-btn"
                 onClick={() => insert(() => editor.chain().focus().toggleOrderedList().run())}
-                sx={{ color: "text.secondary", p: 0.75 }}
+                aria-label="Numbered list"
               >
-                <FormatListNumberedIcon sx={{ fontSize: 18 }} />
-              </IconButton>
+                <ListOrdered size={18} />
+              </button>
             </Tooltip>
-            <Tooltip title="Code block" arrow>
-              <IconButton
-                size="small"
+            <Tooltip title="Code block">
+              <button
+                className="icon-btn"
                 onClick={() => insert(() => editor.chain().focus().toggleCodeBlock().run())}
-                sx={{ color: "text.secondary", p: 0.75 }}
+                aria-label="Code block"
               >
-                <DataObjectIcon sx={{ fontSize: 18 }} />
-              </IconButton>
+                <Braces size={18} />
+              </button>
             </Tooltip>
-            <Tooltip title="Equation" arrow>
-              <IconButton
-                size="small"
+            <Tooltip title="Equation">
+              <button
+                className="icon-btn"
                 onClick={() => insert(() => editor.chain().focus().insertBlockMath({ latex: "E = mc^2" }).run())}
-                sx={{ color: "text.secondary", p: 0.75 }}
+                aria-label="Equation"
               >
-                <FunctionsIcon sx={{ fontSize: 18 }} />
-              </IconButton>
+                <Sigma size={18} />
+              </button>
             </Tooltip>
-            <Tooltip title="Divider" arrow>
-              <IconButton
-                size="small"
+            <Tooltip title="Divider">
+              <button
+                className="icon-btn"
                 onClick={() => insert(() => editor.chain().focus().setHorizontalRule().run())}
-                sx={{ color: "text.secondary", p: 0.75 }}
+                aria-label="Divider"
               >
-                <HorizontalRuleIcon sx={{ fontSize: 18 }} />
-              </IconButton>
+                <Minus size={18} />
+              </button>
             </Tooltip>
-          </Paper>
-        </Fade>
-      </Box>
+          </div>
+        )}
+      </div>
     </FloatingMenu>
   );
 }

frontend/src/editor/components/registry.ts

@@ -4,8 +4,13 @@
 // Each entry describes a custom MDX component that can be used inside the
 // editor.  Factories (factory.ts) consume these definitions to auto-generate
 // TipTap extensions, NodeViews, slash-menu items and MDX serializers.
+//
+// Structural data (name, kind, fields, content) comes from the shared module.
+// This file adds UI metadata (tag, icon, label, description, placeholders).
 // ---------------------------------------------------------------------------
 
+import { SHARED_COMPONENT_DEFS, type SharedComponentDef } from "#shared/component-defs";
+
 export interface ComponentField {
   name: string;
   type: "string" | "boolean" | "select";
@@ -34,141 +39,87 @@ export interface ComponentDef {
   content?: string;
 }
 
-// ---------------------------------------------------------------------------
-// Registry — add new components here
-// ---------------------------------------------------------------------------
+// UI metadata per component (tag, icon, label, description, field labels/placeholders)
+interface UIMeta {
+  tag: string;
+  icon: string;
+  label: string;
+  description: string;
+  fieldMeta: Record<string, { label: string; placeholder?: string }>;
+}
 
-export const COMPONENTS: ComponentDef[] = [
-  {
-    name: "accordion",
-    tag: "Accordion",
-    icon: "▸",
-    label: "Accordion",
-    description: "Collapsible content section",
-    kind: "wrapper",
-    fields: [
-      { name: "title", type: "string", label: "Title", default: "Details", placeholder: "Section title…" },
-      { name: "open", type: "boolean", label: "Open by default", default: false },
-    ],
+const UI_META: Record<string, UIMeta> = {
+  accordion: {
+    tag: "Accordion", icon: "▸", label: "Accordion", description: "Collapsible content section",
+    fieldMeta: { title: { label: "Title", placeholder: "Section title…" }, open: { label: "Open by default" } },
   },
-  {
-    name: "note",
-    tag: "Note",
-    icon: "ℹ",
-    label: "Note / Callout",
-    description: "Highlighted callout box",
-    kind: "wrapper",
-    fields: [
-      { name: "title", type: "string", label: "Title", default: "", placeholder: "Optional title…" },
-      { name: "emoji", type: "string", label: "Emoji", default: "", placeholder: "e.g. 💡" },
-      {
-        name: "variant",
-        type: "select",
-        label: "Variant",
-        default: "neutral",
-        options: ["neutral", "info", "success", "danger"],
-      },
-    ],
+  note: {
+    tag: "Note", icon: "ℹ", label: "Note / Callout", description: "Highlighted callout box",
+    fieldMeta: { title: { label: "Title", placeholder: "Optional title…" }, emoji: { label: "Emoji", placeholder: "e.g. 💡" }, variant: { label: "Variant" } },
   },
-  {
-    name: "quoteBlock",
-    tag: "Quote",
-    icon: "❝",
-    label: "Quote block",
-    description: "Quote with author attribution",
-    kind: "wrapper",
-    fields: [
-      { name: "author", type: "string", label: "Author", default: "", placeholder: "Author name…" },
-      { name: "source", type: "string", label: "Source", default: "", placeholder: "Book, URL…" },
-    ],
+  quoteBlock: {
+    tag: "Quote", icon: "❝", label: "Quote block", description: "Quote with author attribution",
+    fieldMeta: { author: { label: "Author", placeholder: "Author name…" }, source: { label: "Source", placeholder: "Book, URL…" } },
   },
-  {
-    name: "wide",
-    tag: "Wide",
-    icon: "↔",
-    label: "Wide",
-    description: "Wider-than-column container",
-    kind: "wrapper",
-    fields: [],
+  wide: {
+    tag: "Wide", icon: "↔", label: "Wide", description: "Wider-than-column container",
+    fieldMeta: {},
   },
-  {
-    name: "fullWidth",
-    tag: "FullWidth",
-    icon: "⟷",
-    label: "Full width",
-    description: "Full-width container",
-    kind: "wrapper",
-    fields: [],
+  fullWidth: {
+    tag: "FullWidth", icon: "⟷", label: "Full width", description: "Full-width container",
+    fieldMeta: {},
   },
-  {
-    name: "sidenote",
-    tag: "Sidenote",
-    icon: "¶",
-    label: "Sidenote",
-    description: "Margin note alongside content",
-    kind: "wrapper",
-    fields: [],
+  sidenote: {
+    tag: "Sidenote", icon: "¶", label: "Sidenote", description: "Margin note alongside content",
+    fieldMeta: {},
   },
-  {
-    name: "reference",
-    tag: "Reference",
-    icon: "🏷",
-    label: "Reference / Figure",
-    description: "Captioned figure with anchor ID",
-    kind: "wrapper",
-    fields: [
-      { name: "id", type: "string", label: "ID", default: "", placeholder: "fig-1" },
-      { name: "caption", type: "string", label: "Caption", default: "", placeholder: "Figure caption…" },
-    ],
+  reference: {
+    tag: "Reference", icon: "🏷", label: "Reference / Figure", description: "Captioned figure with anchor ID",
+    fieldMeta: { id: { label: "ID", placeholder: "fig-1" }, caption: { label: "Caption", placeholder: "Figure caption…" } },
   },
-  {
-    name: "htmlEmbed",
-    tag: "HtmlEmbed",
-    icon: "📊",
-    label: "HTML Embed",
-    description: "Embed an external HTML visualization",
-    kind: "atomic",
-    fields: [
-      { name: "src", type: "string", label: "Source file", default: "", placeholder: "d3-chart.html" },
-      { name: "title", type: "string", label: "Title", default: "", placeholder: "Chart title…" },
-      { name: "desc", type: "string", label: "Description", default: "", placeholder: "Chart description…" },
-      { name: "wide", type: "boolean", label: "Wide", default: false },
-      { name: "downloadable", type: "boolean", label: "Downloadable", default: false },
-    ],
+  htmlEmbed: {
+    tag: "HtmlEmbed", icon: "📊", label: "HTML Embed", description: "Embed an external HTML visualization",
+    fieldMeta: { src: { label: "Source file", placeholder: "d3-chart.html" }, title: { label: "Title", placeholder: "Chart title…" }, desc: { label: "Description", placeholder: "Chart description…" }, wide: { label: "Wide" }, downloadable: { label: "Downloadable" } },
   },
-  {
-    name: "hfUser",
-    tag: "HfUser",
-    icon: "👤",
-    label: "HF User card",
-    description: "Hugging Face user profile card",
-    kind: "atomic",
-    fields: [
-      { name: "username", type: "string", label: "Username", default: "", placeholder: "username" },
-      { name: "name", type: "string", label: "Display name", default: "", placeholder: "Full Name" },
-      { name: "url", type: "string", label: "URL", default: "", placeholder: "https://huggingface.co/username" },
-    ],
+  hfUser: {
+    tag: "HfUser", icon: "👤", label: "HF User card", description: "Hugging Face user profile card",
+    fieldMeta: { username: { label: "Username", placeholder: "username" }, name: { label: "Display name", placeholder: "Full Name" }, url: { label: "URL", placeholder: "https://huggingface.co/username" } },
   },
-  {
-    name: "rawHtml",
-    tag: "RawHtml",
-    icon: "</>",
-    label: "Raw HTML",
-    description: "Inject raw HTML content",
-    kind: "atomic",
-    fields: [
-      { name: "html", type: "string", label: "HTML", default: "", placeholder: "<div>…</div>" },
-    ],
+  rawHtml: {
+    tag: "RawHtml", icon: "</>", label: "Raw HTML", description: "Inject raw HTML content",
+    fieldMeta: { html: { label: "HTML", placeholder: "<div>…</div>" } },
   },
-  {
-    name: "mermaid",
-    tag: "Mermaid",
-    icon: "◈",
-    label: "Mermaid diagram",
-    description: "Flowchart, sequence, Gantt, etc.",
-    kind: "atomic",
-    fields: [
-      { name: "code", type: "string", label: "Code", default: "graph TD\n  A[Start] --> B{Decision}\n  B -->|Yes| C[OK]\n  B -->|No| D[End]", placeholder: "graph TD\\n  A --> B" },
-    ],
+  mermaid: {
+    tag: "Mermaid", icon: "◈", label: "Mermaid diagram", description: "Flowchart, sequence, Gantt, etc.",
+    fieldMeta: { code: { label: "Code", placeholder: "graph TD\\n  A --> B" } },
   },
-];
+};
+
+function buildComponentDef(shared: SharedComponentDef): ComponentDef {
+  const ui = UI_META[shared.name];
+  if (!ui) throw new Error(`Missing UI_META for component "${shared.name}"`);
+
+  return {
+    name: shared.name,
+    tag: ui.tag,
+    icon: ui.icon,
+    label: ui.label,
+    description: ui.description,
+    kind: shared.kind,
+    content: shared.content,
+    fields: shared.fields.map((f) => ({
+      name: f.name,
+      type: f.type,
+      default: f.default,
+      options: f.options,
+      label: ui.fieldMeta[f.name]?.label ?? f.name,
+      placeholder: ui.fieldMeta[f.name]?.placeholder,
+    })),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Registry - built from shared definitions + UI metadata
+// ---------------------------------------------------------------------------
+
+export const COMPONENTS: ComponentDef[] = SHARED_COMPONENT_DEFS.map(buildComponentDef);

frontend/src/editor/frontmatter/FrontmatterHero.tsx

@@ -1,14 +1,6 @@
 import { useState, useRef, useEffect, type KeyboardEvent } from "react";
-import {
-  Box,
-  Chip,
-  IconButton,
-  TextField,
-  Tooltip,
-  Typography,
-} from "@mui/material";
-import AddIcon from "@mui/icons-material/Add";
-import CloseIcon from "@mui/icons-material/Close";
+import { Tooltip } from "../../components/Tooltip";
+import { Plus, X } from "lucide-react";
 import { useFrontmatter } from "./useFrontmatter";
 import type { FrontmatterStore, Author, Affiliation } from "./frontmatter-store";
 
@@ -32,7 +24,6 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
 
   return (
     <div>
-      {/* Hero section - uses .hero from _hero.css (same as HeroArticle.astro) */}
       <section className="hero">
         <EditableText
           value={data.title}
@@ -50,11 +41,9 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
         />
       </section>
 
-      {/* Meta bar - uses .meta from _hero.css (same as HeroArticle.astro) */}
       {hasMeta && (
         <header className="meta" aria-label="Article meta information">
           <div className="meta-container">
-            {/* Authors cell */}
             <div className="meta-container-cell">
               <h3>Authors</h3>
               <ul className="authors">
@@ -79,20 +68,20 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
                   </li>
                 ))}
                 <li className="author-add-btn">
-                  <Tooltip title="Add author" arrow>
-                    <IconButton
-                      size="small"
+                  <Tooltip title="Add author">
+                    <button
+                      className="icon-btn"
                       onClick={() => setShowAuthorForm(true)}
-                      sx={{ color: "var(--muted-color)", p: 0.25 }}
+                      aria-label="Add author"
+                      style={{ padding: 2 }}
                     >
-                      <AddIcon sx={{ fontSize: 14 }} />
-                    </IconButton>
+                      <Plus size={14} />
+                    </button>
                   </Tooltip>
                 </li>
               </ul>
             </div>
 
-            {/* Affiliations cell */}
             {hasAffiliations && (
               <div className="meta-container-cell">
                 <h3>Affiliations</h3>
@@ -124,7 +113,6 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
               </div>
             )}
 
-            {/* Published cell */}
             <div className="meta-container-cell">
               <h3>Published</h3>
               <EditableText
@@ -135,7 +123,6 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
               />
             </div>
 
-            {/* DOI cell */}
             <div className="meta-container-cell">
               <h3>DOI</h3>
               <EditableText
@@ -145,12 +132,10 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
                 inline
               />
             </div>
-
           </div>
         </header>
       )}
 
-      {/* Author forms (editor-only, MUI is fine here) */}
       <div style={{ maxWidth: 680, margin: "0 auto", padding: "0 16px" }}>
         {showAuthorForm && (
           <AuthorInlineForm
@@ -187,8 +172,6 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
   );
 }
 
-// ---- Editable text field (click-to-edit, editor-only behavior) ----
-
 interface EditableTextProps {
   value: string;
   placeholder: string;
@@ -237,23 +220,28 @@ function EditableText({ value, placeholder, onChange, className, multiline, inli
   const isEmpty = !value;
 
   if (editing) {
+    const Tag = multiline ? "textarea" : "input";
     return (
       <span className={className} style={{ display: inline ? "inline-flex" : "flex" }}>
-        <TextField
-          inputRef={inputRef}
+        <Tag
+          ref={inputRef as any}
+          className="form-input"
           value={draft}
           onChange={(e) => setDraft(e.target.value)}
           onBlur={commit}
           onKeyDown={handleKeyDown}
-          multiline={multiline}
-          fullWidth={!inline}
-          variant="standard"
           placeholder={placeholder}
-          slotProps={{
-            input: {
-              disableUnderline: true,
-              sx: { p: 0, m: 0, font: "inherit", color: "inherit", textAlign: "inherit" },
-            },
+          style={{
+            font: "inherit",
+            color: "inherit",
+            textAlign: "inherit",
+            background: "transparent",
+            border: "none",
+            padding: 0,
+            margin: 0,
+            width: "100%",
+            outline: "none",
+            resize: multiline ? "vertical" : "none",
           }}
         />
       </span>
@@ -275,8 +263,6 @@ function EditableText({ value, placeholder, onChange, className, multiline, inli
   );
 }
 
-// ---- Author inline form (editor-only, MUI is fine) ----
-
 function AuthorInlineForm({
   initial,
   affiliations,
@@ -314,78 +300,62 @@ function AuthorInlineForm({
   };
 
   return (
-    <Box
-      sx={{
-        mt: 2,
-        p: 2,
-        border: "1px solid",
-        borderColor: "divider",
-        borderRadius: 2,
-        bgcolor: "background.paper",
-        display: "flex",
-        flexDirection: "column",
-        gap: 1.5,
-      }}
-    >
-      <Typography variant="caption" sx={{ fontWeight: 600, color: "text.secondary", textTransform: "uppercase", letterSpacing: "0.05em" }}>
+    <div className="author-form">
+      <span className="author-form__title">
         {initial ? "Edit author" : "Add author"}
-      </Typography>
+      </span>
 
-      <Box sx={{ display: "flex", gap: 1 }}>
-        <TextField
-          inputRef={nameRef}
-          size="small"
-          label="Name"
+      <div className="author-form__row">
+        <input
+          ref={nameRef}
+          className="form-input"
+          placeholder="Name"
           value={name}
           onChange={(e) => setName(e.target.value)}
           onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
-          fullWidth
         />
-        <TextField
-          size="small"
-          label="URL (optional)"
+        <input
+          className="form-input"
+          placeholder="URL (optional)"
           value={url}
           onChange={(e) => setUrl(e.target.value)}
           onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
-          fullWidth
         />
-      </Box>
+      </div>
 
       {affiliations.length > 0 && (
-        <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
+        <div className="author-form__chips">
           {affiliations.map((aff, i) => (
-            <Chip
+            <span
               key={`aff-select-${i}`}
-              label={`${i + 1}. ${aff.name}`}
-              size="small"
-              variant={affIndices.includes(i + 1) ? "filled" : "outlined"}
+              className={`chip chip--clickable ${affIndices.includes(i + 1) ? "" : "chip--outlined"}`}
+              style={affIndices.includes(i + 1) ? { background: "var(--primary-color)", color: "#000" } : {}}
               onClick={() => toggleAff(i + 1)}
-              sx={{ fontSize: "0.7rem", height: 22, cursor: "pointer" }}
-            />
+            >
+              {i + 1}. {aff.name}
+            </span>
           ))}
-        </Box>
+        </div>
       )}
 
-      <TextField
-        size="small"
-        label="New affiliation (optional)"
-        placeholder="e.g. Hugging Face"
+      <input
+        className="form-input"
+        placeholder="New affiliation (optional), e.g. Hugging Face"
         value={newAffName}
         onChange={(e) => setNewAffName(e.target.value)}
         onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
       />
 
-      <Box sx={{ display: "flex", gap: 1, justifyContent: "flex-end" }}>
-        <Chip label="Cancel" size="small" onClick={onCancel} sx={{ cursor: "pointer" }} />
-        <Chip
-          label={initial ? "Save" : "Add"}
-          size="small"
-          color="primary"
+      <div className="author-form__actions">
+        <button className="btn" onClick={onCancel}>Cancel</button>
+        <button
+          className="btn btn--primary"
           onClick={handleSubmit}
           disabled={!name.trim()}
-          sx={{ cursor: "pointer" }}
-        />
-      </Box>
-    </Box>
+        >
+          {initial ? "Save" : "Add"}
+        </button>
+      </div>
+    </div>
   );
 }

frontend/src/editor/frontmatter/HueSlider.tsx

@@ -1,5 +1,4 @@
-import { useRef, useState, useEffect, useCallback } from "react";
-import { Box, Typography } from "@mui/material";
+import { useRef, useState, useCallback } from "react";
 
 const L = 0.75;
 const C = 0.12;
@@ -54,7 +53,6 @@ function getColorName(hue: number): string {
   return best;
 }
 
-// OKLCH -> sRGB -> hex
 function oklchToHex(l: number, c: number, h: number): string {
   const hRad = (h * Math.PI) / 180;
   const a = c * Math.cos(hRad);
@@ -115,7 +113,6 @@ export function HueSlider({ hue, onChange }: HueSliderProps) {
     setDragging(false);
   }, []);
 
-  // Keyboard support
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
     const step = e.shiftKey ? 10 : 2;
     if (e.key === "ArrowLeft") { e.preventDefault(); onChange(((hue - step) % 360 + 360) % 360); }
@@ -123,32 +120,29 @@ export function HueSlider({ hue, onChange }: HueSliderProps) {
   }, [hue, onChange]);
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
-      {/* Swatch + info */}
-      <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
-        <Box
-          sx={{
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        <div
+          style={{
             width: 44,
             height: 44,
-            borderRadius: "8px",
-            bgcolor: hexColor,
-            border: "1px solid",
-            borderColor: "divider",
+            borderRadius: 8,
+            backgroundColor: hexColor,
+            border: "1px solid var(--ed-border)",
             flexShrink: 0,
           }}
         />
-        <Box sx={{ minWidth: 0 }}>
-          <Typography variant="body2" sx={{ fontWeight: 700, fontSize: "0.8rem", lineHeight: 1.3 }}>
+        <div style={{ minWidth: 0 }}>
+          <div style={{ fontWeight: 700, fontSize: "0.8rem", lineHeight: 1.3, color: "var(--ed-text)" }}>
             {colorName}
-          </Typography>
-          <Typography variant="caption" sx={{ color: "text.secondary", fontSize: "0.7rem", fontFamily: "monospace" }}>
-            {hexColor.toUpperCase()} - {Math.round(hue)}°
-          </Typography>
-        </Box>
-      </Box>
-
-      {/* Hue slider */}
-      <Box
+          </div>
+          <div style={{ color: "var(--ed-text-secondary)", fontSize: "0.7rem", fontFamily: "monospace" }}>
+            {hexColor.toUpperCase()} - {Math.round(hue)}&deg;
+          </div>
+        </div>
+      </div>
+
+      <div
         ref={sliderRef}
         role="slider"
         tabIndex={0}
@@ -160,21 +154,18 @@ export function HueSlider({ hue, onChange }: HueSliderProps) {
         onPointerMove={handlePointerMove}
         onPointerUp={handlePointerUp}
         onKeyDown={handleKeyDown}
-        sx={{
+        style={{
           position: "relative",
           height: 16,
-          borderRadius: "10px",
-          border: "1px solid",
-          borderColor: "divider",
+          borderRadius: 10,
+          border: "1px solid var(--ed-border)",
           background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
           cursor: "ew-resize",
           touchAction: "none",
-          "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: 2 },
         }}
       >
-        {/* Knob */}
-        <Box
-          sx={{
+        <div
+          style={{
             position: "absolute",
             top: "50%",
             left: `${(hue / 360) * 100}%`,
@@ -183,13 +174,13 @@ export function HueSlider({ hue, onChange }: HueSliderProps) {
             borderRadius: "50%",
             border: "2px solid #fff",
             transform: "translate(-50%, -50%)",
-            bgcolor: hexColor,
+            backgroundColor: hexColor,
             boxShadow: "0 0 0 1px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3)",
             pointerEvents: "none",
           }}
         />
-      </Box>
-    </Box>
+      </div>
+    </div>
   );
 }
 

frontend/src/editor/frontmatter/SettingsDrawer.tsx

@@ -1,21 +1,9 @@
-import {
-  Drawer,
-  Box,
-  Typography,
-  TextField,
-  Select,
-  MenuItem,
-  FormControlLabel,
-  Switch,
-  Divider,
-  IconButton,
-} from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-import { useState, useEffect } from "react";
+import { X } from "lucide-react";
+import { useState, useEffect, useCallback } from "react";
 import { useFrontmatter } from "./useFrontmatter";
 import type { FrontmatterStore, FrontmatterData } from "./frontmatter-store";
 import type * as Y from "yjs";
-import { HueSlider, oklchToHex, OKLCH_L, OKLCH_C } from "./HueSlider";
+import { HueSlider } from "./HueSlider";
 
 interface SettingsDrawerProps {
   open: boolean;
@@ -42,183 +30,160 @@ export function SettingsDrawer({ open, onClose, store, settingsMap }: SettingsDr
     return () => settingsMap.unobserve(sync);
   }, [settingsMap]);
 
+  const handleEscape = useCallback((e: KeyboardEvent) => {
+    if (e.key === "Escape") onClose();
+  }, [onClose]);
+
+  useEffect(() => {
+    if (open) {
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }
+  }, [open, handleEscape]);
+
   if (!data) return null;
 
   return (
-    <Drawer
-      anchor="right"
-      open={open}
-      onClose={onClose}
-      slotProps={{
-        paper: {
-          sx: {
-            width: 380,
-            bgcolor: "background.paper",
-            backgroundImage: "none",
-            borderLeft: "1px solid",
-            borderColor: "divider",
-          },
-        },
-      }}
-    >
-      <Box sx={{ px: 2.5, py: 2, display: "flex", flexDirection: "column", height: "100%" }}>
-        {/* Header */}
-        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 }}>
-          <Typography variant="subtitle2" sx={{ fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "text.secondary", fontSize: "0.75rem" }}>
-            Article settings
-          </Typography>
-          <IconButton size="small" onClick={onClose} sx={{ color: "text.disabled" }}>
-            <CloseIcon sx={{ fontSize: 16 }} />
-          </IconButton>
-        </Box>
-
-        <Box sx={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column", gap: 2.5 }}>
-          {/* Template */}
-          <FieldGroup label="Template">
-            <Select
-              size="small"
-              fullWidth
-              value={data.template}
-              onChange={(e) => update("template", e.target.value as FrontmatterData["template"])}
-            >
-              <MenuItem value="article">Article (full layout)</MenuItem>
-              <MenuItem value="paper">Paper (single column)</MenuItem>
-            </Select>
-          </FieldGroup>
-
-          {/* Description (SEO) */}
-          <FieldGroup label="Description (SEO)">
-            <TextField
-              size="small"
-              fullWidth
-              multiline
-              minRows={2}
-              maxRows={4}
-              placeholder="Short description for meta tags..."
-              value={data.description}
-              onChange={(e) => update("description", e.target.value)}
-            />
-          </FieldGroup>
-
-          {/* Banner */}
-          <FieldGroup label="Banner embed">
-            <TextField
-              size="small"
-              fullWidth
-              placeholder="banner.html"
-              value={data.banner}
-              onChange={(e) => update("banner", e.target.value)}
-            />
-          </FieldGroup>
-
-          {/* Citation style (collaborative via Y.Map) */}
-          <FieldGroup label="Citation style">
-            <Select
-              size="small"
-              fullWidth
-              value={citationStyle}
-              onChange={(e) => {
-                const val = e.target.value;
-                setCitationStyle(val);
-                settingsMap?.set("citationStyle", val);
-              }}
-            >
-              <MenuItem value="apa">APA (7th edition)</MenuItem>
-              <MenuItem value="ieee">IEEE</MenuItem>
-              <MenuItem value="vancouver">Vancouver</MenuItem>
-              <MenuItem value="chicago-author-date">Chicago (author-date)</MenuItem>
-              <MenuItem value="harvard1">Harvard</MenuItem>
-            </Select>
-          </FieldGroup>
-
-          {/* Primary color (hue slider like the template) */}
-          <FieldGroup label="Primary color">
-            <HueSlider
-              hue={hue}
-              onChange={(h) => {
-                setHue(h);
-                settingsMap?.set("primaryHue", h);
-              }}
-            />
-          </FieldGroup>
-
-          <Divider />
-
-          {/* Toggles */}
-          <FormControlLabel
-            sx={{ ml: 0 }}
-            control={
-              <Switch
-                size="small"
-                checked={data.showPdf}
-                onChange={(_, v) => update("showPdf", v)}
+    <>
+      <div className={`drawer-backdrop ${open ? "open" : ""}`} onClick={onClose} />
+      <aside className={`drawer-panel ${open ? "open" : ""}`}>
+        <div className="settings-drawer">
+          <div className="settings-drawer__header">
+            <span className="settings-drawer__title">Article settings</span>
+            <button className="icon-btn" onClick={onClose} aria-label="Close">
+              <X size={16} />
+            </button>
+          </div>
+
+          <div className="settings-drawer__body">
+            <FieldGroup label="Template">
+              <select
+                className="form-select"
+                value={data.template}
+                onChange={(e) => update("template", e.target.value as FrontmatterData["template"])}
+              >
+                <option value="article">Article (full layout)</option>
+                <option value="paper">Paper (single column)</option>
+              </select>
+            </FieldGroup>
+
+            <FieldGroup label="Description (SEO)">
+              <textarea
+                className="form-input"
+                rows={3}
+                placeholder="Short description for meta tags..."
+                value={data.description}
+                onChange={(e) => update("description", e.target.value)}
+              />
+            </FieldGroup>
+
+            <FieldGroup label="Banner embed">
+              <input
+                className="form-input"
+                placeholder="banner.html"
+                value={data.banner}
+                onChange={(e) => update("banner", e.target.value)}
               />
-            }
-            label={<Typography variant="body2" sx={{ fontSize: "0.85rem" }}>Show PDF download</Typography>}
-          />
-
-          <FormControlLabel
-            sx={{ ml: 0 }}
-            control={
-              <Switch
-                size="small"
-                checked={data.tableOfContentsAutoCollapse}
-                onChange={(_, v) => update("tableOfContentsAutoCollapse", v)}
+            </FieldGroup>
+
+            <FieldGroup label="Citation style">
+              <select
+                className="form-select"
+                value={citationStyle}
+                onChange={(e) => {
+                  const val = e.target.value;
+                  setCitationStyle(val);
+                  settingsMap?.set("citationStyle", val);
+                }}
+              >
+                <option value="apa">APA (7th edition)</option>
+                <option value="ieee">IEEE</option>
+                <option value="vancouver">Vancouver</option>
+                <option value="chicago-author-date">Chicago (author-date)</option>
+                <option value="harvard1">Harvard</option>
+              </select>
+            </FieldGroup>
+
+            <FieldGroup label="Primary color">
+              <HueSlider
+                hue={hue}
+                onChange={(h) => {
+                  setHue(h);
+                  settingsMap?.set("primaryHue", h);
+                }}
               />
-            }
-            label={<Typography variant="body2" sx={{ fontSize: "0.85rem" }}>Auto-collapse TOC</Typography>}
-          />
-
-          <Divider />
-
-          {/* Licence / SEO / PDF Pro */}
-          <FieldGroup label="Licence">
-            <TextField
-              size="small"
-              fullWidth
-              multiline
-              minRows={2}
-              placeholder="e.g. CC BY 4.0 (HTML allowed)"
-              value={data.licence}
-              onChange={(e) => update("licence", e.target.value)}
+            </FieldGroup>
+
+            <hr className="divider-h" />
+
+            <SwitchField
+              label="Show PDF download"
+              checked={data.showPdf}
+              onChange={(v) => update("showPdf", v)}
             />
-          </FieldGroup>
-
-          <FieldGroup label="SEO thumbnail image">
-            <TextField
-              size="small"
-              fullWidth
-              placeholder="https://..."
-              value={data.seoThumbImage}
-              onChange={(e) => update("seoThumbImage", e.target.value)}
+
+            <SwitchField
+              label="Auto-collapse TOC"
+              checked={data.tableOfContentsAutoCollapse}
+              onChange={(v) => update("tableOfContentsAutoCollapse", v)}
             />
-          </FieldGroup>
-
-          <FormControlLabel
-            sx={{ ml: 0 }}
-            control={
-              <Switch
-                size="small"
-                checked={data.pdfProOnly}
-                onChange={(_, v) => update("pdfProOnly", v)}
+
+            <hr className="divider-h" />
+
+            <FieldGroup label="Licence">
+              <textarea
+                className="form-input"
+                rows={2}
+                placeholder="e.g. CC BY 4.0 (HTML allowed)"
+                value={data.licence}
+                onChange={(e) => update("licence", e.target.value)}
               />
-            }
-            label={<Typography variant="body2" sx={{ fontSize: "0.85rem" }}>PDF Pro only</Typography>}
-          />
-        </Box>
-      </Box>
-    </Drawer>
+            </FieldGroup>
+
+            <FieldGroup label="SEO thumbnail image">
+              <input
+                className="form-input"
+                placeholder="https://..."
+                value={data.seoThumbImage}
+                onChange={(e) => update("seoThumbImage", e.target.value)}
+              />
+            </FieldGroup>
+
+            <SwitchField
+              label="PDF Pro only"
+              checked={data.pdfProOnly}
+              onChange={(v) => update("pdfProOnly", v)}
+            />
+          </div>
+        </div>
+      </aside>
+    </>
   );
 }
 
 function FieldGroup({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <Box>
-      <Typography variant="caption" sx={{ color: "text.secondary", fontWeight: 500, mb: 0.5, display: "block", fontSize: "0.75rem" }}>
-        {label}
-      </Typography>
+    <div>
+      <label className="field-label">{label}</label>
       {children}
-    </Box>
+    </div>
   );
 }
 
+function SwitchField({ label, checked, onChange }: { label: string; checked: boolean; onChange: (v: boolean) => void }) {
+  return (
+    <label className="form-switch-label">
+      <span className="form-switch">
+        <input
+          type="checkbox"
+          role="switch"
+          checked={checked}
+          onChange={(e) => onChange(e.target.checked)}
+        />
+        <span className="form-switch__track" />
+        <span className="form-switch__thumb" />
+      </span>
+      {label}
+    </label>
+  );
+}

frontend/src/main.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { CssBaseline } from "@mui/material";
 import App from "./App";
 
 // Template foundation (source of truth - same as research-article-template)
@@ -16,9 +15,11 @@ import "./styles/components/_card.css";
 import "./styles/components/_mermaid.css";
 import "./styles/components/_hero.css";
 import "./styles/components/_toc.css";
-// _button.css and _form.css are NOT imported here: they style bare
-// <button>, <input>, <select>, <label> globally and would override MUI.
-// The publisher injects them in the static HTML where there is no MUI.
+import "./styles/components/_button.css";
+import "./styles/components/_form.css";
+
+// Editor chrome UI
+import "./styles/_ui.css";
 
 // Editor extensions
 import "./styles/_editor-tokens.css";
@@ -28,7 +29,6 @@ import "./styles/editing.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <CssBaseline />
     <App />
   </React.StrictMode>
 );

frontend/src/styles/_base.css

@@ -1,14 +1,6 @@
 @import "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200..900;1,200..900&display=swap";
 
-/*
- * Template originally sets html { font-size; line-height; background-color;
- * overflow-x }. In the editor we scope font-size/line-height to the article
- * area so MUI portals (Dialog, Menu, Tooltip) keep their own defaults.
- */
-
-.content-grid,
-.hero,
-.meta {
+html {
   font-size: 16px;
   line-height: 1.6;
 }

frontend/src/styles/_publisher.css

@@ -0,0 +1,397 @@
+/* ============================================================================ */
+/* Publisher-only CSS overrides                                                */
+/* Injected into the published static HTML. Not used in the editor.            */
+/* ============================================================================ */
+
+/* Published page global reset */
+body { font-family: var(--default-font-family); color: var(--text-color); }
+html { font-size: 16px; line-height: 1.6; background-color: var(--page-bg); overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 80px; }
+
+/* Theme toggle icon wrapper (from ThemeToggle.astro) */
+#theme-toggle .icon-wrapper {
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+}
+#theme-toggle .icon-wrapper .icon {
+  grid-area: 1 / 1;
+  filter: none !important;
+}
+#theme-toggle .icon-wrapper.animated .icon {
+  transition: opacity 0.35s ease;
+}
+#theme-toggle .icon-wrapper.spin-cw { animation: spin-cw 0.5s cubic-bezier(0.4,0,0.2,1); }
+#theme-toggle .icon-wrapper.spin-ccw { animation: spin-ccw 0.5s cubic-bezier(0.4,0,0.2,1); }
+@keyframes spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+@keyframes spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
+
+/* Note component - aligned with template Note.astro */
+div[data-component="note"] {
+  background: var(--surface-bg);
+  border-left: 2px solid var(--border-color);
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding: 20px 18px;
+  margin: var(--block-spacing-y, 1em) 0;
+}
+div[data-component="note"][variant="info"] {
+  border-left-color: #f39c12;
+  background: color-mix(in oklab, #f39c12 10%, var(--surface-bg));
+}
+div[data-component="note"][variant="success"] {
+  border-left-color: #2ecc71;
+  background: color-mix(in oklab, #2ecc71 8%, var(--surface-bg));
+}
+div[data-component="note"][variant="danger"] {
+  border-left-color: #e74c3c;
+  background: color-mix(in oklab, #e74c3c 8%, var(--surface-bg));
+}
+div[data-component="note"] .note__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-color);
+  margin-bottom: 6px;
+}
+div[data-component="note"] > *:first-child { margin-top: 0; }
+div[data-component="note"] > *:last-child { margin-bottom: 0; }
+
+/* Quote component - aligned with template Quote.astro */
+div[data-component="quoteBlock"] {
+  position: relative;
+  margin: 32px 0;
+  max-width: 600px;
+  padding: 0;
+  border: none;
+  background: none;
+}
+div[data-component="quoteBlock"]::before {
+  content: '\201C';
+  position: absolute;
+  top: -24px;
+  left: -30px;
+  font-size: 8rem;
+  font-weight: 400;
+  color: var(--text-color);
+  opacity: 0.05;
+  z-index: -1;
+  line-height: 1;
+  pointer-events: none;
+}
+div[data-component="quoteBlock"] .quote-text {
+  font-size: 1.5rem;
+  line-height: 1.4;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  color: var(--text-color);
+}
+div[data-component="quoteBlock"] .quote-footer {
+  font-size: 0.875rem;
+  color: var(--muted-color);
+  margin-top: 12px;
+}
+div[data-component="quoteBlock"] .quote-author::before {
+  content: '\2014\00A0';
+  font-style: normal;
+}
+div[data-component="quoteBlock"] .quote-author {
+  font-weight: 500;
+  font-style: italic;
+  color: var(--text-color);
+  opacity: 0.85;
+}
+div[data-component="quoteBlock"] .quote-source {
+  font-weight: 500;
+  font-style: italic;
+  color: var(--text-color);
+  opacity: 0.85;
+}
+div[data-component="quoteBlock"] > *:first-child { margin-top: 0; }
+div[data-component="quoteBlock"] > *:last-child { margin-bottom: 0; }
+
+/* Sidenote component - aligned with template Sidenote.astro */
+div[data-component="sidenote"] {
+  font-size: 0.9rem;
+  color: var(--muted-color);
+  padding: 0 30px;
+  margin: 1em 0;
+}
+div[data-component="sidenote"] > *:first-child { margin-top: 0; }
+div[data-component="sidenote"] > *:last-child { margin-bottom: 0; }
+
+/* Reference wrapper - aligned with template Reference.astro */
+div[data-component="reference"] {
+  margin: 0 0 var(--spacing-4, 1rem);
+}
+div[data-component="reference"] .reference__caption {
+  text-align: left;
+  font-size: 0.9rem;
+  color: var(--muted-color);
+  margin-top: 6px;
+}
+div[data-component="reference"] > *:first-child { margin-top: 0; }
+div[data-component="reference"] > *:last-child { margin-bottom: 0; }
+
+/* Stack / multi-column layout - aligned with template Stack.astro */
+div[data-component="stack"] {
+  display: grid;
+  gap: 1rem;
+  margin: var(--block-spacing-y, 1.5em) 0;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+div[data-component="stack"][data-layout="2-column"] { grid-template-columns: repeat(2, 1fr); }
+div[data-component="stack"][data-layout="3-column"] { grid-template-columns: repeat(3, 1fr); }
+div[data-component="stack"][data-layout="4-column"] { grid-template-columns: repeat(4, 1fr); }
+div[data-component="stack"][data-layout="auto"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
+div[data-component="stack"]:not([data-layout]) { grid-template-columns: repeat(2, 1fr); }
+div[data-component="stack"][data-gap="small"] { gap: 0.5rem; }
+div[data-component="stack"][data-gap="large"] { gap: 2rem; }
+div[data-type="stack-column"] { min-width: 0; overflow: hidden; word-wrap: break-word; overflow-wrap: break-word; }
+div[data-type="stack-column"] > *:first-child { margin-top: 0; }
+div[data-type="stack-column"] > *:last-child { margin-bottom: 0; }
+@media (max-width: 768px) {
+  div[data-component="stack"][data-layout="2-column"],
+  div[data-component="stack"][data-layout="3-column"],
+  div[data-component="stack"][data-layout="4-column"],
+  div[data-component="stack"][data-layout="auto"],
+  div[data-component="stack"]:not([data-layout]) { grid-template-columns: 1fr !important; }
+}
+@media (min-width: 769px) and (max-width: 1100px) {
+  div[data-component="stack"][data-layout="3-column"],
+  div[data-component="stack"][data-layout="4-column"],
+  div[data-component="stack"][data-layout="auto"] { grid-template-columns: repeat(2, 1fr) !important; }
+}
+
+/* Wide / full-width helpers */
+div[data-component="wide"] {
+  width: min(1100px, 100vw - 64px);
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+div[data-component="fullWidth"] {
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+}
+
+/* Accordion - aligned with template Accordion.astro */
+details[data-component="accordion"] {
+  border: 1px solid var(--border-color);
+  border-radius: var(--table-border-radius, 8px);
+  background: var(--surface-bg);
+  padding: 0;
+  margin: 0 0 var(--spacing-4, 1em);
+  transition: box-shadow 180ms ease, border-color 180ms ease;
+}
+details[data-component="accordion"][open] {
+  border-color: color-mix(in oklab, var(--border-color), var(--primary-color) 20%);
+}
+details[data-component="accordion"] > summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--text-color);
+  list-style: none;
+  user-select: none;
+}
+details[data-component="accordion"][open] > summary {
+  border-bottom: 1px solid var(--border-color);
+}
+details[data-component="accordion"] > summary::-webkit-details-marker { display: none; }
+details[data-component="accordion"] > summary::marker { content: ""; }
+details[data-component="accordion"] > summary::after {
+  content: '';
+  display: inline-block;
+  width: 0.5em;
+  height: 0.5em;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform 220ms ease;
+  opacity: 0.6;
+  flex-shrink: 0;
+}
+details[data-component="accordion"][open] > summary::after {
+  transform: rotate(45deg);
+}
+details[data-component="accordion"] > .accordion-content {
+  padding: 8px;
+}
+details[data-component="accordion"] > .accordion-content > *:first-child { margin-top: 0; }
+details[data-component="accordion"] > .accordion-content > *:last-child { margin-bottom: 0; }
+
+/* Footer */
+.footer {
+  contain: layout style;
+  font-size: 0.8em;
+  line-height: 1.7em;
+  margin-top: 60px;
+  margin-bottom: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.footer-inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 60px 16px 48px;
+  display: grid;
+  grid-template-columns: 220px minmax(0, 680px) 260px;
+  gap: 32px;
+  align-items: start;
+}
+
+.citation-block,
+.references-block,
+.reuse-block,
+.doi-block {
+  display: contents;
+}
+
+.citation-block > .footer-heading,
+.references-block > .footer-heading,
+.reuse-block > .footer-heading,
+.doi-block > .footer-heading {
+  grid-column: 1;
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0;
+  text-align: right;
+  padding-right: 30px;
+}
+
+.citation-block > :not(.footer-heading),
+.references-block > :not(.footer-heading),
+.reuse-block > :not(.footer-heading),
+.doi-block > :not(.footer-heading) {
+  grid-column: 2;
+}
+
+.citation-block .footer-heading { margin: 0 0 8px; }
+
+.citation-block p,
+.reuse-block p,
+.doi-block p,
+.footnotes ol,
+.footnotes ol p,
+.references { margin-top: 0; }
+
+.footnote-ref a {
+  color: var(--primary-color, #958DF1);
+  text-decoration: none;
+  font-size: 0.8em;
+}
+.footnote-ref a:hover { text-decoration: underline; }
+.footnotes ol { padding-left: 1.5em; }
+.footnotes li { margin-bottom: 0.5em; font-size: 0.9rem; color: var(--muted-color, #888); }
+.footnotes li p { margin: 0; }
+.footnote-backref { text-decoration: none; margin-left: 4px; }
+
+.citation {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 11px;
+  line-height: 15px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.02);
+  padding: 10px 18px;
+  border-radius: 3px;
+  color: rgba(150, 150, 150, 1);
+  overflow: hidden;
+  margin-top: -12px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.citation a { color: rgba(0, 0, 0, 0.6); text-decoration: underline; }
+.citation.short { margin-top: -4px; }
+
+.citation-inline {
+  color: var(--primary-color, #958df1);
+  text-decoration: none;
+  text-decoration-line: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 2px;
+  cursor: pointer;
+  transition: text-decoration-color 0.15s;
+}
+.citation-inline:hover {
+  text-decoration-color: currentColor;
+}
+
+.bibliography-content .csl-entry {
+  margin-bottom: 0.75em;
+  padding-left: 1.5em;
+  text-indent: -1.5em;
+  font-size: 0.9em;
+  line-height: 1.5;
+}
+.bibliography-content .csl-entry:target {
+  background: rgba(149, 141, 241, 0.1);
+  border-radius: 4px;
+  padding: 4px 4px 4px 1.5em;
+}
+
+.references-block .footer-heading { margin: 0; }
+.references-block ol { padding: 0 0 0 15px; }
+.references-block li { margin-bottom: 1em; }
+.references-block a { color: var(--text-color); }
+
+.footer a {
+  color: var(--primary-color);
+  border-bottom: 1px solid var(--link-underline);
+  text-decoration: none;
+}
+.footer a:hover {
+  color: var(--primary-color-hover);
+  border-bottom-color: var(--link-underline-hover);
+}
+
+.template-credit { display: contents; }
+.template-credit p {
+  grid-column: 2;
+  margin: 24px 0 0 0;
+  font-size: 0.85em;
+  color: rgba(0, 0, 0, 0.5);
+}
+.template-credit a { color: rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
+.template-credit a:hover { color: rgba(0, 0, 0, 0.8); border-bottom-color: rgba(0, 0, 0, 0.3); }
+
+[data-theme="dark"] .footer { border-top-color: rgba(255, 255, 255, 0.15); color: rgba(200, 200, 200, 0.8); }
+[data-theme="dark"] .citation { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.15); color: rgba(200, 200, 200, 1); }
+[data-theme="dark"] .citation a { color: rgba(255, 255, 255, 0.75); }
+[data-theme="dark"] .bibliography-content .csl-entry:target { background: rgba(149, 141, 241, 0.15); }
+[data-theme="dark"] .footer a { color: var(--primary-color); }
+[data-theme="dark"] .template-credit p { color: rgba(200, 200, 200, 0.6); }
+[data-theme="dark"] .template-credit a { color: rgba(200, 200, 200, 0.7); border-bottom-color: rgba(255, 255, 255, 0.2); }
+[data-theme="dark"] .template-credit a:hover { color: rgba(200, 200, 200, 0.9); border-bottom-color: rgba(255, 255, 255, 0.35); }
+
+@media (max-width: 1100px) {
+  .footer-inner { grid-template-columns: 1fr; gap: 16px; display: block; padding: 40px 16px; }
+  .footer-inner > .footer-heading { grid-column: auto; margin-top: 16px; }
+}
+
+@media (min-width: 768px) {
+  .references-block ol { padding: 0 0 0 30px; margin-left: -30px; }
+}
+
+/* PDF download link */
+a.pdf-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  color: var(--accent-color, #4493f8);
+  text-decoration: none;
+  font-weight: 500;
+}
+a.pdf-link:hover { text-decoration: underline; }
+a.pdf-link::before { content: "\1F4C4"; }
+
+/* Image lightbox dialog */
+dialog.lightbox { border: none; background: transparent; padding: 0; max-width: 95vw; max-height: 95vh; }
+dialog.lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }
+dialog.lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; border-radius: 4px; }

frontend/src/styles/_reset.css

@@ -1,6 +1,10 @@
 html { box-sizing: border-box; }
 *, *::before, *::after { box-sizing: inherit; }
-body { margin: 0; }
+body {
+  margin: 0;
+  font-family: var(--default-font-family);
+  color: var(--text-color);
+}
 audio { display: block; width: 100%; }
 
 img,
@@ -11,15 +15,3 @@ picture {
   position: relative;
   z-index: var(--z-elevated);
 }
-
-/*
- * Article-specific font and color are scoped to the article area
- * to avoid overriding MUI theme on portals (Dialog, Menu, Tooltip).
- * The template's original `body { font-family; color }` is moved here.
- */
-.content-grid,
-.hero,
-.meta {
-  font-family: var(--default-font-family);
-  color: var(--text-color);
-}

frontend/src/styles/_ui.css

@@ -0,0 +1,554 @@
+/* ============================================================================ */
+/* Editor Chrome UI Components                                                 */
+/* Replaces MUI: always-dark editor shell using CSS custom properties.         */
+/* ============================================================================ */
+
+:root {
+  --ed-bg: #0f0f0f;
+  --ed-surface: #1a1a1a;
+  --ed-surface-hover: #222;
+  --ed-text: #e0e0e0;
+  --ed-text-secondary: #888;
+  --ed-text-disabled: #555;
+  --ed-border: #2a2a2a;
+  --ed-radius: 8px;
+  --ed-radius-sm: 6px;
+  --ed-success: #66bb6a;
+  --ed-error: #f44336;
+}
+
+/* ---- Icon button ---- */
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: var(--ed-radius-sm);
+  color: var(--ed-text-disabled);
+  transition: color 0.15s, background-color 0.15s;
+  line-height: 0;
+}
+.icon-btn:hover {
+  color: var(--ed-text);
+  background: rgba(255, 255, 255, 0.08);
+}
+.icon-btn:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+}
+.icon-btn svg { width: 18px; height: 18px; }
+.icon-btn--active { color: var(--primary-color); }
+.icon-btn--primary { color: var(--primary-color); }
+
+/* ---- Button ---- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 6px 14px;
+  border-radius: var(--ed-radius-sm);
+  font-size: 0.85rem;
+  font-weight: 500;
+  font-family: inherit;
+  color: var(--ed-text-secondary);
+  transition: all 0.15s;
+}
+.btn:hover { color: var(--ed-text); background: rgba(255, 255, 255, 0.06); }
+.btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
+.btn--primary { background: var(--primary-color); color: #000; font-weight: 600; }
+.btn--primary:hover { background: var(--primary-color-hover); color: #000; }
+.btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ---- Chip ---- */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 0.65rem;
+  font-weight: 600;
+  line-height: 1;
+  height: 22px;
+  white-space: nowrap;
+}
+.chip--sm { height: 18px; padding: 1px 6px; }
+.chip--outlined { border: 1px solid var(--ed-border); background: transparent; }
+.chip--clickable { cursor: pointer; }
+.chip--clickable:hover { filter: brightness(1.1); }
+.chip img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
+
+/* ---- Surface (replaces MUI Paper) ---- */
+.surface {
+  background: var(--ed-surface);
+  border: 1px solid var(--ed-border);
+  border-radius: var(--ed-radius);
+}
+
+/* ---- Dividers ---- */
+.divider-v { width: 1px; height: 16px; background: var(--ed-border); margin: 0 4px; flex-shrink: 0; }
+.divider-h { border: none; height: 1px; background: var(--ed-border); margin: 0; }
+
+/* ---- Spinner ---- */
+.spinner {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 2.5px solid rgba(255, 255, 255, 0.15);
+  border-top-color: var(--primary-color);
+  border-radius: 50%;
+  animation: ed-spin 0.8s linear infinite;
+}
+@keyframes ed-spin { to { transform: rotate(360deg); } }
+
+/* ---- Badge dot ---- */
+.badge-dot { position: relative; }
+.badge-dot::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 8px;
+  height: 8px;
+  background: var(--ed-error);
+  border-radius: 50%;
+  pointer-events: none;
+}
+.badge-dot--hidden::after { display: none; }
+
+/* ---- Native dialog ---- */
+dialog.ed-dialog {
+  border: 1px solid var(--ed-border);
+  border-radius: var(--ed-radius);
+  background: var(--ed-surface);
+  color: var(--ed-text);
+  padding: 0;
+  max-width: 400px;
+  width: 90vw;
+}
+dialog.ed-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
+.ed-dialog__title { padding: 16px 20px 8px; font-size: 1.1rem; font-weight: 600; margin: 0; }
+.ed-dialog__body { padding: 8px 20px 16px; font-size: 0.9rem; color: var(--ed-text-secondary); line-height: 1.6; }
+.ed-dialog__body p { margin: 0; }
+.ed-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 20px 16px; }
+
+/* ---- Drawer ---- */
+.drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: var(--z-overlay, 1000);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s;
+}
+.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
+
+.drawer-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 380px;
+  background: var(--ed-surface);
+  border-left: 1px solid var(--ed-border);
+  z-index: var(--z-modal, 1100);
+  transform: translateX(100%);
+  transition: transform 0.25s ease;
+  overflow-y: auto;
+}
+.drawer-panel.open { transform: translateX(0); }
+
+/* ---- Form input / textarea ---- */
+.form-input {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  background: var(--ed-bg);
+  border: 1px solid var(--ed-border);
+  border-radius: var(--ed-radius-sm);
+  color: var(--ed-text);
+  font-size: 0.875rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.form-input:focus { border-color: var(--primary-color); }
+.form-input::placeholder { color: var(--ed-text-disabled); }
+textarea.form-input { resize: vertical; min-height: 60px; }
+
+/* ---- Form select ---- */
+.form-select {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  background: var(--ed-bg);
+  border: 1px solid var(--ed-border);
+  border-radius: var(--ed-radius-sm);
+  color: var(--ed-text);
+  font-size: 0.875rem;
+  font-family: inherit;
+  outline: none;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+.form-select:focus { border-color: var(--primary-color); }
+
+/* ---- Switch ---- */
+.form-switch-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--ed-text);
+}
+.form-switch {
+  position: relative;
+  display: inline-block;
+  width: 34px;
+  height: 20px;
+  flex-shrink: 0;
+}
+.form-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
+.form-switch__track {
+  position: absolute;
+  inset: 0;
+  background: var(--ed-border);
+  border-radius: 10px;
+  transition: background 0.2s;
+}
+.form-switch input:checked + .form-switch__track { background: var(--primary-color); }
+.form-switch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s;
+  pointer-events: none;
+}
+.form-switch input:checked ~ .form-switch__thumb { transform: translateX(14px); }
+.form-switch input:focus-visible + .form-switch__track {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+}
+
+/* ---- Field group label ---- */
+.field-label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--ed-text-secondary);
+  margin-bottom: 4px;
+}
+
+/* ---- Tooltip ---- */
+.ed-tooltip {
+  position: fixed;
+  z-index: var(--z-tooltip, 1200);
+  pointer-events: none;
+  background: #333;
+  color: #fff;
+  font-size: 0.7rem;
+  padding: 4px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  line-height: 1.4;
+}
+
+/* ---- Bubble toolbar ---- */
+.bubble-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 8px;
+  padding: 2px 4px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+.bubble-toolbar .icon-btn { color: rgba(255, 255, 255, 0.6); padding: 6px; }
+.bubble-toolbar .icon-btn:hover { color: #fff; background: none; }
+.bubble-toolbar .icon-btn--active { color: #fff; }
+.bubble-toolbar .divider-v { height: 16px; background: #444; margin: 0 2px; }
+
+/* ---- Floating actions ---- */
+.floating-actions { display: flex; align-items: flex-start; gap: 4px; }
+.floating-actions__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  background: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: var(--ed-radius-sm);
+  color: var(--ed-text-disabled);
+  transition: all 0.15s;
+  line-height: 0;
+}
+.floating-actions__toggle:hover { color: var(--ed-text); border-color: var(--ed-border); }
+.floating-actions__toggle--open {
+  color: var(--ed-text);
+  border-color: var(--ed-border);
+  transform: rotate(45deg);
+}
+.floating-actions__toggle svg { width: 20px; height: 20px; }
+.floating-actions__panel {
+  display: flex;
+  gap: 2px;
+  padding: 2px 4px;
+  animation: fadeIn 0.15s ease;
+}
+.floating-actions__panel .icon-btn { color: var(--ed-text-secondary); padding: 6px; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } }
+
+/* ---- Comment card ---- */
+.comment-card {
+  padding: 10px;
+  cursor: pointer;
+  border-left: 3px solid;
+  border-radius: var(--ed-radius);
+  transition: all 0.15s;
+}
+.comment-card:hover { border-color: var(--primary-color); }
+.comment-card--active {
+  border-color: var(--primary-color);
+  background: rgba(149, 141, 241, 0.05);
+}
+.comment-card__header { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
+.comment-card__time { font-size: 0.65rem; color: var(--ed-text-disabled); margin-left: auto; }
+.comment-card__text { font-size: 0.8rem; color: var(--ed-text); line-height: 1.5; margin-bottom: 6px; }
+.comment-card__actions { display: flex; gap: 2px; }
+.comment-card__actions .icon-btn { padding: 4px; }
+.comment-card__actions .icon-btn--success { color: var(--ed-success); }
+.comment-card__actions .icon-btn--danger { color: var(--ed-error); }
+
+/* ---- Top bar ---- */
+.top-bar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 6px 16px;
+  gap: 4px;
+}
+
+/* ---- Chat panel (floating) ---- */
+.chat-floating {
+  position: fixed;
+  bottom: 16px;
+  left: 16px;
+  width: 360px;
+  height: 520px;
+  max-height: calc(100vh - 80px);
+  border-radius: 12px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: var(--ed-surface);
+  border: 1px solid var(--ed-border);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  z-index: var(--z-overlay, 1300);
+}
+.chat-floating__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--ed-border);
+  flex-shrink: 0;
+}
+.chat-floating__title {
+  font-weight: 600;
+  color: var(--ed-text-secondary);
+  font-size: 0.7rem;
+}
+.chat-floating__body { flex: 1; overflow: hidden; display: flex; }
+
+/* ---- Chat FAB ---- */
+.chat-fab {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: none;
+  background: var(--primary-color);
+  color: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  z-index: var(--z-overlay, 1300);
+  transition: background 0.15s;
+  line-height: 0;
+}
+.chat-fab:hover { background: var(--primary-color-hover); }
+.chat-fab svg { width: 22px; height: 22px; }
+
+/* ---- Author form ---- */
+.author-form {
+  margin-top: 16px;
+  padding: 16px;
+  border: 1px solid var(--ed-border);
+  border-radius: var(--ed-radius);
+  background: var(--ed-surface);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.author-form__title {
+  font-weight: 600;
+  color: var(--ed-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.7rem;
+}
+.author-form__row { display: flex; gap: 8px; }
+.author-form__chips { display: flex; flex-wrap: wrap; gap: 4px; }
+.author-form__actions { display: flex; gap: 8px; justify-content: flex-end; }
+
+/* ---- Settings drawer ---- */
+.settings-drawer { padding: 20px; display: flex; flex-direction: column; height: 100%; }
+.settings-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+.settings-drawer__title {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ed-text-secondary);
+  font-size: 0.75rem;
+}
+.settings-drawer__body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
+
+/* ---- Chat panel ---- */
+.chat-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+.chat-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--ed-border);
+  flex-shrink: 0;
+}
+.chat-panel__label {
+  font-weight: 600;
+  color: var(--ed-text-secondary);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+}
+.chat-panel__messages {
+  flex: 1;
+  overflow: auto;
+  padding: 8px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.chat-panel__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  opacity: 0.4;
+  text-align: center;
+  font-size: 0.75rem;
+  max-width: 200px;
+  margin: 0 auto;
+}
+.chat-panel__thinking {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+  font-size: 0.75rem;
+  color: var(--ed-text-disabled);
+}
+.chat-panel__error {
+  padding: 4px 8px;
+  background: rgba(244, 67, 54, 0.15);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  color: var(--ed-error);
+}
+.chat-panel__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 6px 12px;
+  border-top: 1px solid var(--ed-border);
+  flex-shrink: 0;
+}
+.chat-panel__input {
+  padding: 8px 12px;
+  border-top: 1px solid var(--ed-border);
+  flex-shrink: 0;
+}
+.chat-panel__input-row {
+  display: flex;
+  gap: 4px;
+  align-items: flex-end;
+}
+.chat-panel__textarea {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--ed-text);
+  font-size: 0.85rem;
+  font-family: inherit;
+  line-height: 1.5;
+  padding: 4px 0;
+  resize: none;
+  outline: none;
+}
+.chat-panel__textarea::placeholder { color: var(--ed-text-disabled); }
+
+/* ---- Chat bubbles ---- */
+.chat-bubble { display: flex; flex-direction: column; gap: 4px; }
+.chat-bubble__text {
+  max-width: 95%;
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 0.8rem;
+  line-height: 1.6;
+  color: var(--ed-text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.chat-bubble__text--user {
+  align-self: flex-end;
+  background: rgba(149, 141, 241, 0.15);
+  color: var(--ed-text);
+}
+.chat-bubble__tool {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 12px;
+  opacity: 0.6;
+  font-size: 0.65rem;
+  color: var(--ed-text-secondary);
+}

frontend/src/theme.ts

@@ -1,47 +0,0 @@
-import { createTheme } from "@mui/material/styles";
-
-/**
- * Build a MUI theme whose primary color matches the article's
- * --primary-color CSS variable (stored in Yjs settings).
- */
-export function buildTheme(primaryColor: string) {
-  return createTheme({
-    palette: {
-      mode: "dark",
-      background: {
-        default: "#0f0f0f",
-        paper: "#1a1a1a",
-      },
-      primary: {
-        main: primaryColor,
-      },
-      text: {
-        primary: "#e0e0e0",
-        secondary: "#888",
-      },
-      divider: "#2a2a2a",
-    },
-    typography: {
-      fontFamily:
-        '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    components: {
-      MuiIconButton: {
-        styleOverrides: {
-          root: {
-            borderRadius: 6,
-            padding: 6,
-          },
-        },
-      },
-    },
-  });
-}
-
-export const DEFAULT_HUE = 47;
-export const DEFAULT_PRIMARY = "#c87533";
-
-export const theme = buildTheme(DEFAULT_PRIMARY);

frontend/vite.config.ts

@@ -1,8 +1,14 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { resolve } from "path";
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      "#shared": resolve(__dirname, "../backend/src/shared"),
+    },
+  },
   server: {
     port: 5678,
     proxy: {