feat: adopt template CSS architecture, hero/TOC/color alignment

- Copy template foundation CSS (_variables, _reset, _base, _layout,
_print) and component CSS (_code, _table, _tag, _card, _mermaid)
- Extract hero styles from HeroArticle.astro into shared _hero.css
- Extract TOC styles from TableOfContents.astro into shared _toc.css
- Create _editor-tokens.css for editor-specific design tokens
- Scope _reset.css and _base.css global styles to article area
to avoid overriding MUI portals (Dialog, Menu, Tooltip)
- Exclude _button.css and _form.css from editor (bare element
selectors conflict with MUI components)
- Align FrontmatterHero class names with template (.hero, .meta,
.meta-container-cell, .authors, .affiliations)
- Align publisher HTML renderer class names accordingly
- Fix TOC sticky positioning (align-self:stretch + sticky wrapper)
- Add hue-based color picker (OKLCH slider like template ColorPicker)
synced via Yjs settings, driving both MUI theme and CSS variables
- Align editor link styles with template (--primary-color)
- Add PostCSS config for @custom-media support
- Remove "Welcome to Collaborative Editor" from default content

Made-with: Cursor

backend/src/hf-storage.ts

@@ -1,4 +1,4 @@
-import { uploadFile, downloadFile, createRepo, type RepoDesignation } from "@huggingface/hub";
+import { uploadFile, downloadFile, createRepo, commit, type CommitFile, type RepoDesignation } from "@huggingface/hub";
 
 const SPACE_ID = process.env.SPACE_ID || "";
 
@@ -188,6 +188,15 @@ export async function pullPublishedAssets(
 
 // ---------- Published Assets ----------
 
+/**
+ * Build the public resolve URL for a published asset.
+ * Useful to pre-compute og:image / pdf URLs before HTML generation.
+ */
+export function getPublishedAssetUrl(docName: string, filename: string): string {
+  const safeName = sanitizeName(docName);
+  return `https://huggingface.co/datasets/${HF_DATASET_ID}/resolve/main/published/${safeName}/${filename}`;
+}
+
 interface PublishedPayload {
   html: string;
   pdf: Buffer | null;
@@ -206,46 +215,49 @@ export async function uploadPublishedAssets(
   const safeName = sanitizeName(docName);
   const base = `published/${safeName}`;
 
-  await uploadFile({
-    repo,
-    file: { path: `${base}/index.html`, content: new Blob([payload.html]) },
-    accessToken,
-    commitTitle: `publish ${safeName}: HTML`,
-  });
+  const operations: CommitFile[] = [
+    {
+      operation: "addOrUpdate",
+      path: `${base}/index.html`,
+      content: new Blob([payload.html]),
+    },
+    {
+      operation: "addOrUpdate",
+      path: `${base}/meta.json`,
+      content: new Blob([JSON.stringify(payload.meta, null, 2)]),
+    },
+  ];
 
   const baseUrl = `https://huggingface.co/datasets/${HF_DATASET_ID}/resolve/main/${base}`;
   let pdfUrl: string | null = null;
   let thumbUrl: string | null = null;
 
   if (payload.pdf) {
-    await uploadFile({
-      repo,
-      file: { path: `${base}/article.pdf`, content: new Blob([new Uint8Array(payload.pdf)]) },
-      accessToken,
-      commitTitle: `publish ${safeName}: PDF`,
+    operations.push({
+      operation: "addOrUpdate",
+      path: `${base}/article.pdf`,
+      content: new Blob([new Uint8Array(payload.pdf)]),
     });
     pdfUrl = `${baseUrl}/article.pdf`;
   }
 
   if (payload.thumbnail) {
-    await uploadFile({
-      repo,
-      file: { path: `${base}/thumb.jpg`, content: new Blob([new Uint8Array(payload.thumbnail)]) },
-      accessToken,
-      commitTitle: `publish ${safeName}: thumbnail`,
+    operations.push({
+      operation: "addOrUpdate",
+      path: `${base}/thumb.jpg`,
+      content: new Blob([new Uint8Array(payload.thumbnail)]),
     });
     thumbUrl = `${baseUrl}/thumb.jpg`;
   }
 
-  await uploadFile({
+  await commit({
     repo,
-    file: {
-      path: `${base}/meta.json`,
-      content: new Blob([JSON.stringify(payload.meta, null, 2)]),
-    },
+    operations,
+    title: `publish ${safeName}`,
     accessToken,
-    commitTitle: `publish ${safeName}: metadata`,
   });
 
+  console.log(`[hf-storage] published ${safeName} (${operations.length} files, single commit)`);
+
   return { htmlUrl: `${baseUrl}/index.html`, pdfUrl, thumbUrl };
 }

backend/src/publisher/extensions.ts

@@ -246,6 +246,13 @@ const COMPONENT_DEFS: ComponentDefLite[] = [
       { name: "html", type: "string", default: "" },
     ],
   },
+  {
+    name: "mermaid",
+    kind: "atomic",
+    fields: [
+      { name: "code", type: "string", default: "" },
+    ],
+  },
 ];
 
 function makeServerWrapperExt(def: ComponentDefLite) {

backend/src/publisher/html-renderer.ts

@@ -7,6 +7,7 @@
 
 import { generateHTML } from "@tiptap/html";
 import { getServerExtensions } from "./extensions.js";
+import type { PublishCSS } from "./index.js";
 
 export interface PublishAuthor {
   name: string;
@@ -29,6 +30,7 @@ export interface PublishMeta {
   date: string;
   doi?: string;
   ogImage?: string;
+  pdfUrl?: string;
 }
 
 /**
@@ -37,8 +39,7 @@ export interface PublishMeta {
 export function renderArticleHTML(
   json: Record<string, unknown>,
   meta: PublishMeta,
-  cssTokens: string,
-  cssArticle: string
+  css: PublishCSS
 ): string {
   const extensions = getServerExtensions();
 
@@ -84,315 +85,33 @@ export function renderArticleHTML(
   <!-- highlight.js theme -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css">
 
-  <style>
-${cssTokens}
-${cssArticle}
-
-/* Published article layout */
-body {
-  margin: 0;
-  padding: 0;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-}
-
-/* Grid: TOC | Article | (empty right) */
-.content-grid {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0 24px;
-  margin-top: 40px;
-  display: grid;
-  grid-template-columns: 260px minmax(0, 680px) 260px;
-  gap: 32px;
-  align-items: start;
-}
-
-/* Hero section */
-.article-hero {
-  width: 100%;
-  padding: 64px 16px 16px;
-  text-align: center;
-}
-
-.article-hero h1 {
-  font-size: clamp(34px, 5vw, 54px);
-  font-weight: 800;
-  line-height: 1.12;
-  letter-spacing: -0.02em;
-  margin: 0 auto 8px;
-  max-width: 780px;
-  text-wrap: balance;
-  color: var(--text-heading);
-}
-
-.article-hero .hero-desc {
-  color: var(--text-tertiary);
-  font-style: italic;
-  margin: 0 auto 16px;
-  max-width: 55%;
-  font-size: 1.15em;
-  line-height: 1.6;
-}
-
-/* Meta bar */
-.article-meta {
-  border-top: 1px solid var(--border);
-  border-bottom: 1px solid var(--border);
-  padding: 1rem 0;
-  font-size: 0.9rem;
-}
-
-.article-meta .meta-container {
-  max-width: 980px;
-  margin: 0 auto;
-  padding: 0 16px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 8px;
-  flex-wrap: wrap;
-  row-gap: 12px;
-}
-
-.article-meta .meta-cell {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-width: 400px;
-}
-
-.article-meta .meta-cell h3 {
-  margin: 0;
-  font-size: 12px;
-  font-weight: 400;
-  color: var(--text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
-}
-
-.article-meta .meta-cell p { margin: 0; }
-
-.article-meta .authors-list {
-  margin: 0;
-  list-style: none;
-  padding-left: 0;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.article-meta .authors-list li {
-  white-space: nowrap;
-  padding: 0;
-}
-
-.article-meta .author-link {
-  color: var(--accent-light);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  text-decoration-thickness: 0.06em;
-}
-
-.article-meta .author-link:hover {
-  color: var(--text-primary);
-}
-
-.article-meta .affiliations-list {
-  margin: 0;
-  padding-left: 1.25em;
-}
-
-.article-meta .affiliations-list li { margin: 0; }
-
-.article-meta .doi-link {
-  color: var(--accent-light);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  font-family: monospace;
-}
-
-@media (max-width: 768px) {
-  .article-hero .hero-desc { max-width: 90%; }
-  .article-meta .meta-container { flex-direction: column; }
-}
-
-/* Theme toggle */
-.theme-toggle {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 0.5rem;
-  cursor: pointer;
-  font-size: 1.2rem;
-  line-height: 1;
-  z-index: 100;
-}
-
-/* ---------- Table of Contents (desktop sticky) ---------- */
-.table-of-contents {
-  position: sticky;
-  top: 32px;
-  margin-top: 12px;
-}
-
-.table-of-contents .title {
-  font-weight: 600;
-  font-size: 14px;
-  margin-bottom: 8px;
-  color: var(--text-primary);
-}
-
-.table-of-contents nav {
-  border-left: 1px solid var(--border);
-  padding-left: 16px;
-  font-size: 13px;
-}
-
-.table-of-contents nav ul {
-  margin: 0 0 6px;
-  padding-left: 1em;
-}
-
-.table-of-contents nav li {
-  list-style: none;
-  margin: 0.25em 0;
-}
-
-.table-of-contents nav a,
-.table-of-contents nav a:link,
-.table-of-contents nav a:visited {
-  color: var(--text-primary);
-  text-decoration: none;
-  border-bottom: none;
-}
-
-.table-of-contents nav > ul > li > a {
-  font-weight: 700;
-}
-
-.table-of-contents nav a:hover {
-  text-decoration: underline solid var(--text-tertiary);
-}
-
-.table-of-contents nav a.active {
-  text-decoration: underline;
-}
+  <!-- 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>
 
-/* Collapsible sub-sections */
-.table-of-contents nav.toc-collapsible li > ul,
-.toc-mobile-sidebar nav.toc-collapsible li > ul {
-  overflow: hidden;
-  transition: height 200ms ease;
-}
+  <style>
+/* Template foundation */
+${css.variables}
+${css.reset}
 
-/* ---------- Mobile TOC toggle ---------- */
-.toc-mobile-toggle {
-  display: none;
-  position: fixed;
-  top: 1rem;
-  left: 1rem;
-  z-index: 200;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 1px solid var(--border);
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2px 12px rgba(0,0,0,.08);
-  transition: transform 150ms ease, box-shadow 150ms ease;
-}
-.toc-mobile-toggle:active { transform: scale(0.92); }
-
-/* ---------- Mobile backdrop ---------- */
-.toc-mobile-backdrop {
-  display: none;
-  position: fixed;
-  inset: 0;
-  z-index: 201;
-  background: rgba(0,0,0,.4);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 250ms ease;
-}
-.toc-mobile-backdrop.open { opacity: 1; pointer-events: auto; }
-
-/* ---------- Mobile sidebar ---------- */
-.toc-mobile-sidebar {
-  display: none;
-  position: fixed;
-  top: 0; left: 0; bottom: 0;
-  z-index: 202;
-  width: min(320px, 85vw);
-  background: var(--bg-primary);
-  border-right: 1px solid var(--border);
-  transform: translateX(-100%);
-  transition: transform 300ms cubic-bezier(.4,0,.2,1);
-  flex-direction: column;
-}
-.toc-mobile-sidebar.open { transform: translateX(0); }
+/* 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; }
 
-.toc-mobile-sidebar__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-.toc-mobile-sidebar__title { font-weight: 700; font-size: 15px; color: var(--text-primary); }
-.toc-mobile-sidebar__close {
-  background: none; border: none; color: var(--text-tertiary);
-  cursor: pointer; padding: 6px; border-radius: 6px;
-  display: flex; align-items: center; justify-content: center;
-  transition: color 150ms ease, background 150ms ease;
-}
-.toc-mobile-sidebar__close:hover { color: var(--text-primary); background: var(--bg-secondary); }
+${css.editorTokens}
+${css.base}
+${css.layout}
+${css.components}
+${css.article}
+${css.print}
 
-.toc-mobile-sidebar__body {
-  flex: 1;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  padding: 0.75rem 1rem 1.5rem;
-}
-.toc-mobile-sidebar nav ul { margin: 0 0 6px; padding-left: 1em; }
-.toc-mobile-sidebar nav li { list-style: none; margin: 0.35em 0; }
-.toc-mobile-sidebar nav a,
-.toc-mobile-sidebar nav a:link,
-.toc-mobile-sidebar nav a:visited {
-  color: var(--text-primary);
-  text-decoration: none;
-  border-bottom: none;
-  font-size: 14px;
-  line-height: 1.5;
-}
-.toc-mobile-sidebar nav > ul > li > a { font-weight: 700; }
-.toc-mobile-sidebar nav a:hover { text-decoration: underline solid var(--text-tertiary); }
-.toc-mobile-sidebar nav a.active { color: var(--accent-light); text-decoration: underline; }
-
-/* ---------- Responsive: collapse below 1100px ---------- */
-@media (max-width: 1100px) {
-  .content-grid {
-    overflow: hidden;
-    display: block;
-    padding: 0 16px;
-    margin-top: 0.5rem;
-  }
-  .table-of-contents { position: static; display: none; }
-  .toc-mobile-toggle { display: flex; }
-  .toc-mobile-backdrop { display: block; }
-  .toc-mobile-sidebar { display: flex; }
-}
+/* Publisher-only overrides */
 
 /* Accordion as details/summary */
 details[data-component="accordion"] {
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 0;
   margin: 1em 0;
@@ -402,7 +121,7 @@ details[data-component="accordion"] > summary {
   padding: 0.75rem 1rem;
   cursor: pointer;
   font-weight: 600;
-  color: var(--text-heading-secondary);
+  color: var(--text-color);
   list-style: none;
   user-select: none;
 }
@@ -419,16 +138,22 @@ details[data-component="accordion"] > summary::before {
 details[data-component="accordion"][open] > summary::before { transform: rotate(90deg); }
 details[data-component="accordion"] > .accordion-content { padding: 0 1rem 1rem; }
 
+/* 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; }
-
-/* Print */
-@media print {
-  .table-of-contents, .toc-mobile-toggle, .toc-mobile-backdrop, .toc-mobile-sidebar, .theme-toggle { display: none !important; }
-  .content-grid { display: block !important; }
-}
   </style>
 </head>
 <body>
@@ -454,7 +179,7 @@ dialog.lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; bo
   </aside>
 
   <!-- Hero -->
-  <section class="article-hero">
+  <section class="hero">
     <h1>${safeTitle}</h1>
     ${meta.subtitle ? `<p class="hero-desc">${escapeHtml(meta.subtitle)}</p>` : ""}
   </section>
@@ -770,6 +495,16 @@ function postProcess(html: string, biblioHtml: string): string {
     }
   );
 
+  // 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,
@@ -813,7 +548,7 @@ function renderMetaBar(meta: PublishMeta): string {
       const sep = i < meta.authors.length - 1 ? ",&nbsp;" : "";
       return `<li>${name}${sup}${sep}</li>`;
     }).join("");
-    cells.push(`<div class="meta-cell"><h3>Authors</h3><ul class="authors-list">${items}</ul></div>`);
+    cells.push(`<div class="meta-container-cell"><h3>Authors</h3><ul class="authors">${items}</ul></div>`);
   }
 
   // Affiliations cell
@@ -826,27 +561,32 @@ function renderMetaBar(meta: PublishMeta): string {
           : escapeHtml(aff.name);
         return `<li>${name}</li>`;
       }).join("");
-      affContent = `<ol class="affiliations-list">${items}</ol>`;
+      affContent = `<ol class="affiliations">${items}</ol>`;
     } else {
       const aff = meta.affiliations[0];
       affContent = aff.url
         ? `<p><a href="${escapeHtml(aff.url)}" target="_blank" rel="noopener">${escapeHtml(aff.name)}</a></p>`
         : `<p>${escapeHtml(aff.name)}</p>`;
     }
-    cells.push(`<div class="meta-cell"><h3>Affiliations</h3>${affContent}</div>`);
+    cells.push(`<div class="meta-container-cell"><h3>Affiliations</h3>${affContent}</div>`);
   }
 
   // Published cell
   if (meta.date) {
-    cells.push(`<div class="meta-cell"><h3>Published</h3><p>${escapeHtml(formatDate(meta.date))}</p></div>`);
+    cells.push(`<div class="meta-container-cell"><h3>Published</h3><p>${escapeHtml(formatDate(meta.date))}</p></div>`);
   }
 
   // DOI cell
   if (meta.doi) {
-    cells.push(`<div class="meta-cell"><h3>DOI</h3><p><a href="https://doi.org/${escapeHtml(meta.doi)}" class="doi-link" target="_blank" rel="noopener">${escapeHtml(meta.doi)}</a></p></div>`);
+    cells.push(`<div class="meta-container-cell"><h3>DOI</h3><p><a href="https://doi.org/${escapeHtml(meta.doi)}" class="doi-link" target="_blank" rel="noopener">${escapeHtml(meta.doi)}</a></p></div>`);
+  }
+
+  // PDF download cell
+  if (meta.pdfUrl) {
+    cells.push(`<div class="meta-container-cell"><h3>PDF</h3><p><a href="${escapeHtml(meta.pdfUrl)}" class="pdf-link" target="_blank" rel="noopener" download>Download PDF</a></p></div>`);
   }
 
-  return `<header class="article-meta"><div class="meta-container">${cells.join("")}</div></header>`;
+  return `<header class="meta"><div class="meta-container">${cells.join("")}</div></header>`;
 }
 
 function formatDate(dateStr: string): string {

backend/src/publisher/index.ts

@@ -15,6 +15,7 @@ import { isPdfEnabled, generatePdfAndThumbnail } from "./pdf-generator.js";
 import {
   isHfStorageEnabled,
   uploadPublishedAssets,
+  getPublishedAssetUrl,
 } from "../hf-storage.js";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -24,31 +25,60 @@ function docPath(name: string) {
   return join(DATA_DIR, `${name.replace(/[^a-zA-Z0-9_-]/g, "_")}.yjs`);
 }
 
+export interface PublishCSS {
+  variables: string;
+  reset: string;
+  base: string;
+  layout: string;
+  print: string;
+  editorTokens: string;
+  article: string;
+  components: string;
+}
+
 /**
  * Load CSS files for injection into the published HTML.
+ * Reads the template CSS foundation + editor extensions.
  * Tries multiple paths: dev source, Docker copy, relative fallback.
  */
-function loadCSS(): { tokens: string; article: string } {
+function loadCSS(): PublishCSS {
   const candidates = [
     join(__dirname, "..", "..", "..", "frontend", "src", "styles"),
     join(__dirname, "..", "..", "frontend-styles"),
     join(__dirname, "..", "frontend-styles"),
   ];
 
+  const readSafe = (p: string) => (existsSync(p) ? readFileSync(p, "utf-8") : "");
+
   for (const dir of candidates) {
-    const tokensPath = join(dir, "tokens.css");
-    const articlePath = join(dir, "article.css");
-    if (existsSync(tokensPath) && existsSync(articlePath)) {
+    const varsPath = join(dir, "_variables.css");
+    const basePath = join(dir, "_base.css");
+    if (existsSync(varsPath) && existsSync(basePath)) {
       console.log("[publish] CSS found at:", dir);
+
+      const componentFiles = [
+        "_code.css", "_button.css", "_table.css", "_tag.css",
+        "_card.css", "_form.css", "_mermaid.css", "_hero.css", "_toc.css",
+      ];
+      const componentsCss = componentFiles
+        .map((f) => readSafe(join(dir, "components", f)))
+        .join("\n");
+
       return {
-        tokens: readFileSync(tokensPath, "utf-8"),
-        article: readFileSync(articlePath, "utf-8"),
+        variables: readFileSync(varsPath, "utf-8"),
+        reset: readSafe(join(dir, "_reset.css")),
+        base: readFileSync(basePath, "utf-8"),
+        layout: readSafe(join(dir, "_layout.css")),
+        print: readSafe(join(dir, "_print.css")),
+        editorTokens: readSafe(join(dir, "_editor-tokens.css")),
+        article: readSafe(join(dir, "article.css")),
+        components: componentsCss,
       };
     }
   }
 
   console.warn("[publish] CSS files not found, tried:", candidates);
-  return { tokens: "", article: "" };
+  return { variables: "", reset: "", base: "", layout: "", print: "", editorTokens: "", article: "", components: "" };
 }
 
 interface AuthorObj {
@@ -169,14 +199,22 @@ export async function publishDocument(docName: string, token?: string): Promise<
     doi: (frontmatter.doi as string) || undefined,
   };
 
+  // Pre-compute public URLs so og:image and PDF link are embedded in HTML
+  const useHf = isHfStorageEnabled();
+  if (useHf && isPdfEnabled()) {
+    meta.ogImage = getPublishedAssetUrl(docName, "thumb.jpg");
+    meta.pdfUrl = getPublishedAssetUrl(docName, "article.pdf");
+  }
+
   const css = loadCSS();
-  console.log("[publish] CSS tokens length:", css.tokens.length, "article length:", css.article.length);
+  console.log("[publish] CSS variables length:", css.variables.length, "article length:", css.article.length);
   console.log("[publish] Meta:", JSON.stringify(meta));
 
-  const html = renderArticleHTML(json, meta, css.tokens, css.article);
+  // First pass: generate HTML with og:image + PDF link pre-injected
+  let html = renderArticleHTML(json, meta, css);
   console.log("[publish] Generated HTML length:", html.length);
 
-  // Generate PDF + thumbnail
+  // Generate PDF + thumbnail from the HTML
   let pdf: Buffer | null = null;
   let thumbnail: Buffer | null = null;
 
@@ -187,11 +225,15 @@ export async function publishDocument(docName: string, token?: string): Promise<
       thumbnail = assets.thumbnail;
     } catch (err) {
       console.error("[publish] PDF generation failed:", err);
+      // Clear URLs from meta if generation failed
+      if (!thumbnail) delete meta.ogImage;
+      if (!pdf) delete meta.pdfUrl;
+      html = renderArticleHTML(json, meta, css);
     }
   }
 
   // Try uploading to HF dataset
-  if (isHfStorageEnabled()) {
+  if (useHf) {
     try {
       const urls = await uploadPublishedAssets(docName, {
         html,
@@ -207,17 +249,26 @@ export async function publishDocument(docName: string, token?: string): Promise<
 
   // Local storage (primary when HF disabled, fallback when HF fails)
   const { writeFileSync, mkdirSync } = await import("fs");
-  const publishDir = join(DATA_DIR, "published", docName.replace(/[^a-zA-Z0-9_-]/g, "_"));
+  const safeDirName = docName.replace(/[^a-zA-Z0-9_-]/g, "_");
+  const publishDir = join(DATA_DIR, "published", safeDirName);
   mkdirSync(publishDir, { recursive: true });
+
+  // For local storage, rewrite meta with local URLs
+  if (thumbnail) meta.ogImage = `/published/${safeDirName}/thumb.jpg`;
+  else delete meta.ogImage;
+  if (pdf) meta.pdfUrl = `/published/${safeDirName}/article.pdf`;
+  else delete meta.pdfUrl;
+  html = renderArticleHTML(json, meta, css);
+
   writeFileSync(join(publishDir, "index.html"), html);
   if (pdf) writeFileSync(join(publishDir, "article.pdf"), pdf);
   if (thumbnail) writeFileSync(join(publishDir, "thumb.jpg"), thumbnail);
   writeFileSync(join(publishDir, "meta.json"), JSON.stringify(meta, null, 2));
 
   return {
-    htmlUrl: `/published/${docName}/index.html`,
-    pdfUrl: pdf ? `/published/${docName}/article.pdf` : null,
-    thumbUrl: thumbnail ? `/published/${docName}/thumb.jpg` : null,
+    htmlUrl: `/published/${safeDirName}/index.html`,
+    pdfUrl: pdf ? `/published/${safeDirName}/article.pdf` : null,
+    thumbUrl: thumbnail ? `/published/${safeDirName}/thumb.jpg` : null,
     success: true,
   };
 }

frontend/package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "collab-editor-frontend",
+  "name": "research-article-template-editor-frontend",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "collab-editor-frontend",
+      "name": "research-article-template-editor-frontend",
       "version": "0.1.0",
       "dependencies": {
         "@ai-sdk/react": "^3.0.160",
@@ -36,6 +36,7 @@
         "ai": "^6.0.158",
         "katex": "^0.16.45",
         "lowlight": "^3.2.0",
+        "mermaid": "^11.14.0",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",
         "tippy.js": "^6.3.7",
@@ -46,6 +47,7 @@
         "@types/react": "^18.3.0",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.0",
+        "postcss-custom-media": "^12.0.1",
         "vite": "^6.0.0"
       }
     },
@@ -113,6 +115,19 @@
         "react": "^18 || ~19.0.1 || ~19.1.2 || ^19.2.1"
       }
     },
+    "node_modules/@antfu/install-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+      "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^1.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -402,6 +417,142 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@braintree/sanitize-url": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-7.1.2.tgz",
+      "integrity": "sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==",
+      "license": "MIT"
+    },
+    "node_modules/@chevrotain/cst-dts-gen": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-12.0.0.tgz",
+      "integrity": "sha512-fSL4KXjTl7cDgf0B5Rip9Q05BOrYvkJV/RrBTE/bKDN096E4hN/ySpcBK5B24T76dlQ2i32Zc3PAE27jFnFrKg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/gast": "12.0.0",
+        "@chevrotain/types": "12.0.0"
+      }
+    },
+    "node_modules/@chevrotain/gast": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-12.0.0.tgz",
+      "integrity": "sha512-1ne/m3XsIT8aEdrvT33so0GUC+wkctpUPK6zU9IlOyJLUbR0rg4G7ZiApiJbggpgPir9ERy3FRjT6T7lpgetnQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/types": "12.0.0"
+      }
+    },
+    "node_modules/@chevrotain/regexp-to-ast": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@chevrotain/regexp-to-ast/-/regexp-to-ast-12.0.0.tgz",
+      "integrity": "sha512-p+EW9MaJwgaHguhoqwOtx/FwuGr+DnNn857sXWOi/mClXIkPGl3rn7hGNWvo31HA3vyeQxjqe+H36yZJwYU8cA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@chevrotain/types": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-12.0.0.tgz",
+      "integrity": "sha512-S+04vjFQKeuYw0/eW3U52LkAHQsB1ASxsPGsLPUyQgrZ2iNNibQrsidruDzjEX2JYfespXMG0eZmXlhA6z7nWA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@chevrotain/utils": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-12.0.0.tgz",
+      "integrity": "sha512-lB59uJoaGIfOOL9knQqQRfhl9g7x8/wqFkp13zTdkRu1huG9kg6IJs1O8hqj9rs6h7orGxHJUKb+mX3rPbWGhA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@csstools/cascade-layer-name-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-3.0.0.tgz",
+      "integrity": "sha512-/3iksyevwRfSJx5yH0RkcrcYXwuhMQx3Juqf40t97PeEy2/Mz2TItZ/z/216qpe4GgOyFBP8MKIwVvytzHmfIQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/media-query-list-parser": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-5.0.0.tgz",
+      "integrity": "sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@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",
@@ -1064,6 +1215,23 @@
         }
       }
     },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.0.tgz",
+      "integrity": "sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==",
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@iconify/types": "^2.0.0",
+        "mlly": "^1.8.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1116,6 +1284,15 @@
       "integrity": "sha512-QZqem4QuAnAyzfz+Gj5/+SLxqwCAw2qmt7732ZXodr6VDWGeYLG6w1i/vYLa55JQM9wRuBKLmXmiZ2P0LtE5rw==",
       "license": "MIT"
     },
+    "node_modules/@mermaid-js/parser": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-1.1.0.tgz",
+      "integrity": "sha512-gxK9ZX2+Fex5zu8LhRQoMeMPEHbc73UKZ0FQ54YrQtUxE1VVhMwzeNtKRPAu5aXks4FasbMe4xB4bWrmq6Jlxw==",
+      "license": "MIT",
+      "dependencies": {
+        "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",
@@ -2385,6 +2562,259 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+      "integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -2392,6 +2822,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
+    },
     "node_modules/@types/hast": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -2471,6 +2907,13 @@
         "@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",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -2483,6 +2926,16 @@
       "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
       "license": "MIT"
     },
+    "node_modules/@upsetjs/venn.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@upsetjs/venn.js/-/venn.js-2.0.0.tgz",
+      "integrity": "sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==",
+      "license": "MIT",
+      "optionalDependencies": {
+        "d3-selection": "^3.0.0",
+        "d3-transition": "^3.0.1"
+      }
+    },
     "node_modules/@vercel/oidc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@vercel/oidc/-/oidc-3.1.0.tgz",
@@ -2513,6 +2966,18 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/ai": {
       "version": "6.0.158",
       "resolved": "https://registry.npmjs.org/ai/-/ai-6.0.158.tgz",
@@ -2630,6 +3095,35 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chevrotain": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-12.0.0.tgz",
+      "integrity": "sha512-csJvb+6kEiQaqo1woTdSAuOWdN0WTLIydkKrBnS+V5gZz0oqBrp4kQ35519QgK6TpBThiG3V1vNSHlIkv4AglQ==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@chevrotain/cst-dts-gen": "12.0.0",
+        "@chevrotain/gast": "12.0.0",
+        "@chevrotain/regexp-to-ast": "12.0.0",
+        "@chevrotain/types": "12.0.0",
+        "@chevrotain/utils": "12.0.0"
+      },
+      "engines": {
+        "node": ">=22.0.0"
+      }
+    },
+    "node_modules/chevrotain-allstar": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/chevrotain-allstar/-/chevrotain-allstar-0.4.1.tgz",
+      "integrity": "sha512-PvVJm3oGqrveUVW2Vt/eZGeiAIsJszYweUcYwcskg9e+IubNYKKD+rHHem7A6XVO22eDAL+inxNIGAzZ/VIWlA==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash-es": "^4.17.21"
+      },
+      "peerDependencies": {
+        "chevrotain": "^12.0.0"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2648,12 +3142,27 @@
         "node": ">= 12"
       }
     },
+    "node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "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",
+      "integrity": "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==",
+      "license": "MIT",
+      "dependencies": {
+        "layout-base": "^1.0.0"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -2691,39 +3200,564 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
-    "node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+    "node_modules/cytoscape": {
+      "version": "3.33.2",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.2.tgz",
+      "integrity": "sha512-sj4HXd3DokGhzZAdjDejGvTPLqlt84vNFN8m7bGsOzDY5DyVcxIb2ejIXat2Iy7HxWhdT/N1oKyheJ5YdpsGuw==",
       "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
+      "peer": true,
       "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
+        "node": ">=0.10"
       }
     },
-    "node_modules/dequal": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+    "node_modules/cytoscape-cose-bilkent": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz",
+      "integrity": "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==",
       "license": "MIT",
-      "engines": {
-        "node": ">=6"
+      "dependencies": {
+        "cose-base": "^1.0.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
       }
     },
-    "node_modules/devlop": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
-      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+    "node_modules/cytoscape-fcose": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz",
+      "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==",
       "license": "MIT",
       "dependencies": {
-        "dequal": "^2.0.0"
+        "cose-base": "^2.2.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
+    "node_modules/cytoscape-fcose/node_modules/cose-base": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz",
+      "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==",
+      "license": "MIT",
+      "dependencies": {
+        "layout-base": "^2.0.0"
+      }
+    },
+    "node_modules/cytoscape-fcose/node_modules/layout-base": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz",
+      "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==",
+      "license": "MIT"
+    },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-sankey/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dagre-d3-es": {
+      "version": "7.0.14",
+      "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.14.tgz",
+      "integrity": "sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg==",
+      "license": "MIT",
+      "dependencies": {
+        "d3": "^7.9.0",
+        "lodash-es": "^4.17.21"
+      }
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.20.tgz",
+      "integrity": "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/delaunator": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.1.0.tgz",
+      "integrity": "sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
       },
       "funding": {
         "type": "github",
@@ -2740,6 +3774,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.3.tgz",
+      "integrity": "sha512-Oj6pzI2+RqBfFG+qOaOLbFXLQ90ARpcGG6UePL82bJLtdsa6CYJD7nmiU8MW9nQNOtCHV3lZ/Bzq1X0QYbBZCA==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.335",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.335.tgz",
@@ -2917,6 +3960,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/hachure-fill": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.5.2.tgz",
+      "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",
@@ -2954,6 +4003,18 @@
       "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",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "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",
@@ -2970,6 +4031,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -3061,6 +4131,35 @@
         "katex": "cli.js"
       }
     },
+    "node_modules/khroma": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/khroma/-/khroma-2.1.0.tgz",
+      "integrity": "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw=="
+    },
+    "node_modules/langium": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/langium/-/langium-4.2.2.tgz",
+      "integrity": "sha512-JUshTRAfHI4/MF9dH2WupvjSXyn8JBuUEWazB8ZVJUtXutT0doDlAv1XKbZ1Pb5sMexa8FF4CFBc0iiul7gbUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@chevrotain/regexp-to-ast": "~12.0.0",
+        "chevrotain": "~12.0.0",
+        "chevrotain-allstar": "~0.4.1",
+        "vscode-languageserver": "~9.0.1",
+        "vscode-languageserver-textdocument": "~1.0.11",
+        "vscode-uri": "~3.1.0"
+      },
+      "engines": {
+        "node": ">=20.10.0",
+        "npm": ">=10.2.3"
+      }
+    },
+    "node_modules/layout-base": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz",
+      "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==",
+      "license": "MIT"
+    },
     "node_modules/lib0": {
       "version": "0.2.117",
       "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.117.tgz",
@@ -3103,6 +4202,12 @@
       "integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==",
       "license": "MIT"
     },
+    "node_modules/lodash-es": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+      "license": "MIT"
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3158,12 +4263,71 @@
         "markdown-it": "bin/markdown-it.mjs"
       }
     },
+    "node_modules/marked": {
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-16.4.2.tgz",
+      "integrity": "sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/mdurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
       "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
       "license": "MIT"
     },
+    "node_modules/mermaid": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.14.0.tgz",
+      "integrity": "sha512-GSGloRsBs+JINmmhl0JDwjpuezCsHB4WGI4NASHxL3fHo3o/BRXTxhDLKnln8/Q0lRFRyDdEjmk1/d5Sn1Xz8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@braintree/sanitize-url": "^7.1.1",
+        "@iconify/utils": "^3.0.2",
+        "@mermaid-js/parser": "^1.1.0",
+        "@types/d3": "^7.4.3",
+        "@upsetjs/venn.js": "^2.0.0",
+        "cytoscape": "^3.33.1",
+        "cytoscape-cose-bilkent": "^4.1.0",
+        "cytoscape-fcose": "^2.2.0",
+        "d3": "^7.9.0",
+        "d3-sankey": "^0.12.3",
+        "dagre-d3-es": "7.0.14",
+        "dayjs": "^1.11.19",
+        "dompurify": "^3.3.1",
+        "katex": "^0.16.25",
+        "khroma": "^2.1.0",
+        "lodash-es": "^4.17.23",
+        "marked": "^16.3.0",
+        "roughjs": "^4.6.6",
+        "stylis": "^4.3.6",
+        "ts-dedent": "^2.2.0",
+        "uuid": "^11.1.0"
+      }
+    },
+    "node_modules/mermaid/node_modules/stylis": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
+      "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
+      "license": "MIT"
+    },
+    "node_modules/mlly": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
+      "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.3"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3211,6 +4375,12 @@
       "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==",
       "license": "MIT"
     },
+    "node_modules/package-manager-detector": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.6.0.tgz",
+      "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",
@@ -3241,6 +4411,12 @@
         "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",
@@ -3256,6 +4432,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -3276,6 +4458,33 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/points-on-curve": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/points-on-curve/-/points-on-curve-0.2.0.tgz",
+      "integrity": "sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==",
+      "license": "MIT"
+    },
+    "node_modules/points-on-path": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/points-on-path/-/points-on-path-0.2.1.tgz",
+      "integrity": "sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==",
+      "license": "MIT",
+      "dependencies": {
+        "path-data-parser": "0.1.0",
+        "points-on-curve": "0.2.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.9",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.9.tgz",
@@ -3296,6 +4505,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -3305,6 +4515,35 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-custom-media": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-12.0.1.tgz",
+      "integrity": "sha512-66syE14+VeqkUf0rRX0bvbTCbNRJF132jD+ceo8th1dap2YJEAqpdh5uG98CE3IbgHT7m9XM0GIlOazNWqQdeA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/cascade-layer-name-parser": "^3.0.0",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0",
+        "@csstools/media-query-list-parser": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -3618,6 +4857,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.3.tgz",
+      "integrity": "sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==",
+      "license": "Unlicense"
+    },
     "node_modules/rollup": {
       "version": "4.60.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
@@ -3669,6 +4914,30 @@
       "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
       "license": "MIT"
     },
+    "node_modules/roughjs": {
+      "version": "4.6.6",
+      "resolved": "https://registry.npmjs.org/roughjs/-/roughjs-4.6.6.tgz",
+      "integrity": "sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "hachure-fill": "^0.5.2",
+        "path-data-parser": "^0.1.0",
+        "points-on-curve": "^0.2.0",
+        "points-on-path": "^0.2.1"
+      }
+    },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -3750,6 +5019,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/tinyexec": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.1.1.tgz",
+      "integrity": "sha512-VKS/ZaQhhkKFMANmAOhhXVoIfBXblQxGX1myCQ2faQrfmobMftXeJPcZGp0gS07ocvGJWDLZGyOZDadDBqYIJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
@@ -3776,12 +5054,27 @@
         "@popperjs/core": "^2.9.0"
       }
     },
+    "node_modules/ts-dedent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
+      "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.10"
+      }
+    },
     "node_modules/uc.micro": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
       "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
       "license": "MIT"
     },
+    "node_modules/ufo": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.3.tgz",
+      "integrity": "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==",
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -3822,6 +5115,19 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.2.tgz",
@@ -3898,6 +5204,55 @@
         }
       }
     },
+    "node_modules/vscode-jsonrpc": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
+      "integrity": "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/vscode-languageserver": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-9.0.1.tgz",
+      "integrity": "sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==",
+      "license": "MIT",
+      "dependencies": {
+        "vscode-languageserver-protocol": "3.17.5"
+      },
+      "bin": {
+        "installServerIntoExtension": "bin/installServerIntoExtension"
+      }
+    },
+    "node_modules/vscode-languageserver-protocol": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz",
+      "integrity": "sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==",
+      "license": "MIT",
+      "dependencies": {
+        "vscode-jsonrpc": "8.2.0",
+        "vscode-languageserver-types": "3.17.5"
+      }
+    },
+    "node_modules/vscode-languageserver-textdocument": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
+      "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==",
+      "license": "MIT"
+    },
+    "node_modules/vscode-languageserver-types": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz",
+      "integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==",
+      "license": "MIT"
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
+      "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
+      "license": "MIT"
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",

frontend/package.json

@@ -37,6 +37,7 @@
     "ai": "^6.0.158",
     "katex": "^0.16.45",
     "lowlight": "^3.2.0",
+    "mermaid": "^11.14.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "tippy.js": "^6.3.7",
@@ -47,6 +48,7 @@
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.0",
+    "postcss-custom-media": "^12.0.1",
     "vite": "^6.0.0"
   }
 }

frontend/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "postcss-custom-media": {},
+  },
+};

frontend/src/App.tsx

@@ -1,7 +1,8 @@
-import { useRef, useState, useCallback, useEffect } from "react";
+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 {
   Box,
   Chip,
@@ -13,6 +14,8 @@ 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";
+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 {
@@ -74,6 +77,27 @@ export default function App() {
   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
+  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);
+      }
+    };
+    sync();
+    settingsMap.observe(sync);
+    return () => settingsMap.unobserve(sync);
+  }, [settingsMap]);
 
   const agentChat = useAgentChat({ editor: editorInstance, undoManager, frontmatterStore });
 
@@ -168,7 +192,9 @@ export default function App() {
   }, [commentStore, user]);
 
   return (
+    <ThemeProvider theme={muiTheme}>
     <Box
+      className="editor-app"
       sx={{
         height: "100vh",
         display: "flex",
@@ -238,36 +264,25 @@ export default function App() {
       </Box>
 
       {/* Single scroll container */}
-      <Box
+      <div
         ref={editorContainerCallback}
-        sx={{
-          flex: 1,
-          overflowY: "auto",
-          overflowX: "hidden",
-        }}
+        style={{ flex: 1, overflowY: "auto", overflowX: "hidden" }}
       >
-        <Box
-          sx={{
-            display: "grid",
-            gridTemplateColumns: "200px 1fr 240px",
-            gridTemplateRows: "auto 1fr",
-            minHeight: "100%",
-          }}
-        >
+        <div className="content-grid">
           {/* Hero - center column only, row 1 */}
-          <Box sx={{ gridColumn: 2, gridRow: 1, pt: 4 }}>
+          <div className="content-grid__hero">
             <FrontmatterHero store={frontmatterStore} />
-          </Box>
+          </div>
 
           {/* TOC - left column, row 2, sticky */}
-          <Box sx={{ gridColumn: 1, gridRow: 2 }}>
-            <Box sx={{ position: "sticky", top: 16 }}>
+          <div className="content-grid__toc">
+            <div className="table-of-contents--sticky">
               <TableOfContents editor={editorInstance} />
-            </Box>
-          </Box>
+            </div>
+          </div>
 
           {/* Editor - center column, row 2 */}
-          <Box sx={{ gridColumn: 2, gridRow: 2, pb: 4 }}>
+          <div className="content-grid__editor">
             <Editor
               docName={docName}
               user={user}
@@ -279,19 +294,19 @@ export default function App() {
               onUndoManagerReady={setUndoManager}
               onAddComment={handleAddComment}
             />
-          </Box>
+          </div>
 
           {/* Comments - right column, row 2 */}
-          <Box sx={{ gridColumn: 3, gridRow: 2, pl: 2, py: 2 }}>
+          <div className="content-grid__comments">
             <CommentsSidebar
               editor={editorInstance}
               commentStore={commentStore}
               user={user}
               editorContainer={containerEl}
             />
-          </Box>
-        </Box>
-      </Box>
+          </div>
+        </div>
+      </div>
 
       {/* Floating chat - bottom left */}
       {chatOpen ? (
@@ -442,5 +457,6 @@ export default function App() {
         </DialogActions>
       </Dialog>
     </Box>
+    </ThemeProvider>
   );
 }

frontend/src/components/TableOfContents.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
-import { Box, Typography } from "@mui/material";
 import type { Editor } from "@tiptap/core";
 
 const SCROLL_OFFSET_PX = 80;
@@ -133,103 +132,53 @@ export function TableOfContents({ editor }: TableOfContentsProps) {
 
   if (!editor || headings.length === 0) {
     return (
-      <Box sx={{ px: 2, pt: 3 }}>
-        <Typography variant="caption" sx={{ color: "text.disabled", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", fontSize: "0.65rem" }}>
-          Table of contents
-        </Typography>
-        <Typography variant="caption" sx={{ color: "text.disabled", display: "block", mt: 1, fontSize: "0.7rem" }}>
-          Headings will appear here as you write.
-        </Typography>
-      </Box>
+      <div className="table-of-contents">
+        <div className="toc-title">Table of contents</div>
+        <div className="toc-empty">Headings will appear here as you write.</div>
+      </div>
     );
   }
 
   const renderList = (nodes: TocNode[], isRoot: boolean) => (
-    <Box
-      component="ul"
-      sx={{
-        m: 0,
-        mb: isRoot ? 0 : "6px",
-        pl: isRoot ? 0 : "1em",
-        listStyle: "none",
-      }}
-    >
+    <ul>
       {nodes.map((node) => {
         const isExpanded = expandedPositions.has(node.pos);
         const hasChildren = node.children.length > 0;
 
         return (
-          <Box component="li" key={node.id} sx={{ my: "0.25em" }}>
-            <Box
-              component="a"
-              onClick={(e: React.MouseEvent) => {
+          <li key={node.id}>
+            <a
+              className={activePos === node.pos ? "active" : undefined}
+              onClick={(e) => {
                 e.preventDefault();
                 scrollTo(node.pos);
               }}
-              sx={{
-                cursor: "pointer",
-                fontSize: "13px",
-                lineHeight: 1.5,
-                fontWeight: isRoot ? 700 : 400,
-                color: "text.secondary",
-                textDecoration: activePos === node.pos ? "underline" : "none",
-                textUnderlineOffset: "3px",
-                transition: "color 120ms ease",
-                "&:hover": {
-                  textDecoration: "underline solid",
-                  textDecorationColor: "text.disabled",
-                },
-              }}
             >
               {node.text}
-            </Box>
+            </a>
             {hasChildren && (
-              <Box
-                sx={{
-                  overflow: "hidden",
+              <div
+                className="toc-children"
+                style={{
                   maxHeight: isExpanded ? 500 : 0,
                   opacity: isExpanded ? 1 : 0,
-                  transition: "max-height 200ms ease, opacity 200ms ease",
                 }}
               >
                 {renderList(node.children, false)}
-              </Box>
+              </div>
             )}
-          </Box>
+          </li>
         );
       })}
-    </Box>
+    </ul>
   );
 
   return (
-    <Box sx={{ px: 1, pt: 3 }}>
-      <Typography
-        variant="caption"
-        sx={{
-          color: "text.disabled",
-          fontWeight: 600,
-          textTransform: "uppercase",
-          letterSpacing: "0.05em",
-          fontSize: "0.65rem",
-          pl: "16px",
-          mb: 1,
-          display: "block",
-        }}
-      >
-        Table of contents
-      </Typography>
-
-      <Box
-        component="nav"
-        sx={{
-          borderLeft: "1px solid",
-          borderColor: "divider",
-          pl: "16px",
-          fontSize: "13px",
-        }}
-      >
+    <div className="table-of-contents">
+      <div className="toc-title">Table of contents</div>
+      <nav>
         {renderList(tree, true)}
-      </Box>
-    </Box>
+      </nav>
+    </div>
   );
 }

frontend/src/editor/components/MermaidView.tsx

@@ -0,0 +1,179 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+import type { NodeViewProps } from "@tiptap/react";
+import mermaid from "mermaid";
+
+let mermaidInitialized = false;
+
+function ensureMermaidInit() {
+  if (mermaidInitialized) return;
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: "neutral",
+    securityLevel: "loose",
+    fontFamily: "var(--default-font-family)",
+  });
+  mermaidInitialized = true;
+}
+
+export function MermaidNodeView({ node, updateAttributes }: NodeViewProps) {
+  const code = (node.attrs.code as string) || "";
+  const [editing, setEditing] = useState(!code);
+  const [draft, setDraft] = useState(code);
+  const [svgHtml, setSvgHtml] = useState("");
+  const [error, setError] = useState("");
+  const renderIdRef = useRef(0);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (!editing) setDraft(code);
+  }, [code, editing]);
+
+  useEffect(() => {
+    if (editing && textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.selectionStart = textareaRef.current.value.length;
+    }
+  }, [editing]);
+
+  const renderDiagram = useCallback(async (src: string) => {
+    if (!src.trim()) {
+      setSvgHtml("");
+      setError("");
+      return;
+    }
+    ensureMermaidInit();
+    const id = `mermaid-${++renderIdRef.current}`;
+    try {
+      const { svg } = await mermaid.render(id, src);
+      setSvgHtml(svg);
+      setError("");
+    } catch (err: any) {
+      setError(err?.message || "Invalid diagram");
+      const stale = document.getElementById(id);
+      stale?.remove();
+    }
+  }, []);
+
+  useEffect(() => {
+    renderDiagram(code);
+  }, [code, renderDiagram]);
+
+  const commit = useCallback(() => {
+    setEditing(false);
+    if (draft !== code) {
+      updateAttributes({ code: draft });
+    }
+  }, [draft, code, updateAttributes]);
+
+  return (
+    <NodeViewWrapper data-component="mermaid">
+      <div
+        contentEditable={false}
+        style={{
+          border: "1px solid var(--border-color)",
+          borderRadius: 8,
+          overflow: "hidden",
+          margin: "0.75em 0",
+          userSelect: "none",
+        }}
+      >
+        {/* Header */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "6px 12px",
+            borderBottom: "1px solid var(--border-color)",
+            background: "var(--surface-bg)",
+          }}
+        >
+          <span style={{ fontSize: 12, fontWeight: 600, color: "var(--muted-color)" }}>
+            ◈ Mermaid
+          </span>
+          <button
+            onClick={() => {
+              if (editing) commit();
+              else setEditing(true);
+            }}
+            style={{
+              background: "none",
+              border: "1px solid var(--border-color)",
+              borderRadius: 4,
+              padding: "2px 10px",
+              fontSize: 11,
+              color: "var(--muted-color)",
+              cursor: "pointer",
+            }}
+          >
+            {editing ? "Done" : "Edit"}
+          </button>
+        </div>
+
+        {/* Code editor (shown when editing) */}
+        {editing && (
+          <div style={{ borderBottom: "1px solid var(--border-color)" }}>
+            <textarea
+              ref={textareaRef}
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              onBlur={commit}
+              onKeyDown={(e) => {
+                if (e.key === "Escape") {
+                  setDraft(code);
+                  setEditing(false);
+                }
+                if (e.key === "Tab") {
+                  e.preventDefault();
+                  const ta = e.currentTarget;
+                  const start = ta.selectionStart;
+                  const end = ta.selectionEnd;
+                  const val = ta.value;
+                  const updated = val.substring(0, start) + "  " + val.substring(end);
+                  setDraft(updated);
+                  requestAnimationFrame(() => {
+                    ta.selectionStart = ta.selectionEnd = start + 2;
+                  });
+                }
+              }}
+              spellCheck={false}
+              style={{
+                width: "100%",
+                minHeight: 120,
+                padding: "12px 16px",
+                border: "none",
+                outline: "none",
+                resize: "vertical",
+                fontFamily: "var(--font-mono)",
+                fontSize: 13,
+                lineHeight: 1.5,
+                background: "var(--code-bg)",
+                color: "var(--text-color)",
+                boxSizing: "border-box",
+              }}
+            />
+          </div>
+        )}
+
+        {/* Preview */}
+        {error ? (
+          <div style={{ padding: "16px", color: "var(--danger-color, #dc2626)", fontSize: 12 }}>
+            {error}
+          </div>
+        ) : svgHtml ? (
+          <div
+            style={{ padding: "16px", display: "flex", justifyContent: "center" }}
+            dangerouslySetInnerHTML={{ __html: svgHtml }}
+          />
+        ) : (
+          <div style={{ padding: "24px", textAlign: "center", color: "var(--muted-color)", fontSize: 13 }}>
+            Click "Edit" to write a Mermaid diagram
+          </div>
+        )}
+      </div>
+    </NodeViewWrapper>
+  );
+}
+
+MermaidNodeView.displayName = "MermaidView";

frontend/src/editor/components/factory.ts

@@ -9,6 +9,7 @@ import { ReactNodeViewRenderer } from "@tiptap/react";
 import type { ComponentDef } from "./registry";
 import { makeWrapperView } from "./WrapperView";
 import { makeAtomicView } from "./AtomicView";
+import { MermaidNodeView } from "./MermaidView";
 
 /**
  * Build a TipTap Node for a "wrapper" component (has editable children).
@@ -128,7 +129,8 @@ export function createAtomicExtension(def: ComponentDef) {
     },
 
     addNodeView() {
-      return ReactNodeViewRenderer(makeAtomicView(def));
+      const View = def.name === "mermaid" ? MermaidNodeView : makeAtomicView(def);
+      return ReactNodeViewRenderer(View);
     },
   });
 }

frontend/src/editor/components/registry.ts

@@ -160,4 +160,15 @@ export const COMPONENTS: ComponentDef[] = [
       { name: "html", type: "string", label: "HTML", default: "", 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" },
+    ],
+  },
 ];

frontend/src/editor/default-content.ts

@@ -3,10 +3,6 @@
  * Covers every block/mark type supported by the editor.
  */
 export const DEFAULT_CONTENT = `
-<h1>Welcome to the Collaborative Editor</h1>
-
-<p>This demo article showcases <strong>every content type</strong> available in the editor. Feel free to edit, delete, or rewrite anything — the AI assistant in the left panel can help you.</p>
-
 <h2>Text formatting</h2>
 
 <p>You can make text <strong>bold</strong>, <em>italic</em>, or <s>strikethrough</s>. Combine them for <strong><em>bold italic</em></strong>. Use <code>inline code</code> for technical terms, and add <a href="https://huggingface.co">links</a> to external resources.</p>
@@ -149,6 +145,8 @@ print(tokenizer.decode(outputs[0], skip_special_tokens=True))</code></pre>
 
 <div data-component="htmlEmbed" src="d3-scaling-chart.html" title="Interactive scaling law visualization" desc="Explore how model size, data, and compute interact." wide="false" downloadable="true"></div>
 
+<div data-component="mermaid" code="graph TD\n  A[Data Collection] --> B[Preprocessing]\n  B --> C[Training]\n  C --> D{Evaluation}\n  D -->|Pass| E[Deploy]\n  D -->|Fail| B"></div>
+
 <p>The concept of <span data-type="glossary" term="Scaling law" definition="A power-law relationship between model size, dataset size, compute budget, and performance."></span> has become central to modern AI research. Early work<span data-type="footnote" content="Hestness et al. (2017) observed similar scaling behavior in vision and translation tasks before the scaling laws paper formalized the framework."></span> suggested these relationships hold across modalities.</p>
 
 <div data-component="stack" layout="2-column" gap="medium"><div data-type="stack-column"><p><strong>Column A</strong></p><p>Multi-column layouts let you place content side by side. Each column is fully editable.</p></div><div data-type="stack-column"><p><strong>Column B</strong></p><p>Use the layout selector in the header to switch between 2, 3, or 4 columns.</p></div></div>

frontend/src/editor/frontmatter/FrontmatterHero.tsx

@@ -22,7 +22,7 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
   const [showAuthorForm, setShowAuthorForm] = useState(false);
 
   if (!data) {
-    return <Box sx={{ width: "100%", mb: 4 }} />;
+    return <div className="hero" />;
   }
 
   const hasAuthors = data.authors.length > 0;
@@ -31,170 +31,126 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
   const hasMeta = hasAuthors || data.published || data.doi;
 
   return (
-    <Box sx={{ width: "100%", mb: 2 }}>
-      {/* Hero section - centered title + subtitle */}
-      <Box sx={{ textAlign: "center", pt: 4, pb: 2, px: 2 }}>
-        <Box sx={{ maxWidth: 780, mx: "auto" }}>
-          <EditableText
-            value={data.title}
-            placeholder="Article title"
-            onChange={(v) => update("title", v)}
-            typographySx={{
-              fontSize: "clamp(34px, 5vw, 54px)",
-              fontWeight: 800,
-              lineHeight: 1.12,
-              letterSpacing: "-0.02em",
-              color: "text.primary",
-              mb: 1,
-              textWrap: "balance",
-            }}
-            multiline
-            center
-          />
-        </Box>
+    <div>
+      {/* Hero section - uses .hero from _hero.css (same as HeroArticle.astro) */}
+      <section className="hero">
+        <EditableText
+          value={data.title}
+          placeholder="Article title"
+          onChange={(v) => update("title", v)}
+          className="hero-title"
+          multiline
+        />
 
-        <Box sx={{ maxWidth: "55%", mx: "auto" }}>
-          <EditableText
-            value={data.subtitle}
-            placeholder="Subtitle (optional)"
-            onChange={(v) => update("subtitle", v)}
-            typographySx={{
-              fontSize: "1.15em",
-              fontWeight: 400,
-              lineHeight: 1.6,
-              color: "text.secondary",
-              fontStyle: "italic",
-            }}
-            center
-          />
-        </Box>
-      </Box>
+        <EditableText
+          value={data.subtitle}
+          placeholder="Subtitle (optional)"
+          onChange={(v) => update("subtitle", v)}
+          className="hero-desc"
+        />
+      </section>
 
-      {/* Meta bar - matches published template */}
+      {/* Meta bar - uses .meta from _hero.css (same as HeroArticle.astro) */}
       {hasMeta && (
-        <Box
-          sx={{
-            borderTop: "1px solid",
-            borderBottom: "1px solid",
-            borderColor: "divider",
-            py: 2,
-            fontSize: "0.9rem",
-          }}
-        >
-          <Box
-            sx={{
-              maxWidth: 980,
-              mx: "auto",
-              px: 2,
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "space-between",
-              gap: 1,
-              flexWrap: "wrap",
-              rowGap: 1.5,
-            }}
-          >
+        <header className="meta" aria-label="Article meta information">
+          <div className="meta-container">
             {/* Authors cell */}
-            <MetaCell label="Authors">
-              <Box sx={{ display: "flex", flexWrap: "wrap", m: 0, p: 0, listStyle: "none" }} component="ul">
+            <div className="meta-container-cell">
+              <h3>Authors</h3>
+              <ul className="authors">
                 {data.authors.map((author, i) => (
-                  <Box component="li" key={`author-${i}`} sx={{ whiteSpace: "nowrap", p: 0 }}>
-                    <Box
-                      component="span"
+                  <li key={`author-${i}`}>
+                    <span
+                      className="author-editable"
                       onClick={() => setEditingAuthorIdx(i)}
-                      sx={{
-                        cursor: "pointer",
-                        borderRadius: 0.5,
-                        transition: "background 0.15s",
-                        "&:hover": { bgcolor: "rgba(255,255,255,0.06)" },
-                      }}
                     >
                       {author.url ? (
-                        <Box component="span" sx={{ color: "primary.main", textDecoration: "underline", textUnderlineOffset: "2px", textDecorationThickness: "0.06em" }}>
+                        <a href={author.url} target="_blank" rel="noopener noreferrer">
                           {author.name}
-                        </Box>
+                        </a>
                       ) : (
                         author.name
                       )}
                       {multipleAffiliations && author.affiliations?.length > 0 && (
                         <sup>{author.affiliations.join(",")}</sup>
                       )}
-                    </Box>
+                    </span>
                     {i < data.authors.length - 1 && <>,&nbsp;</>}
-                  </Box>
+                  </li>
                 ))}
-                <Box component="li" sx={{ p: 0, display: "inline-flex", alignItems: "center", ml: 0.5 }}>
+                <li className="author-add-btn">
                   <Tooltip title="Add author" arrow>
                     <IconButton
                       size="small"
                       onClick={() => setShowAuthorForm(true)}
-                      sx={{ color: "text.disabled", p: 0.25 }}
+                      sx={{ color: "var(--muted-color)", p: 0.25 }}
                     >
                       <AddIcon sx={{ fontSize: 14 }} />
                     </IconButton>
                   </Tooltip>
-                </Box>
-              </Box>
-            </MetaCell>
+                </li>
+              </ul>
+            </div>
 
             {/* Affiliations cell */}
             {hasAffiliations && (
-              <MetaCell label="Affiliations">
+              <div className="meta-container-cell">
+                <h3>Affiliations</h3>
                 {multipleAffiliations ? (
-                  <Box component="ol" sx={{ m: 0, pl: "1.25em" }}>
+                  <ol className="affiliations">
                     {data.affiliations.map((aff, i) => (
-                      <Box component="li" key={`aff-${i}`} sx={{ m: 0 }}>
+                      <li key={`aff-${i}`}>
                         {aff.url ? (
-                          <a href={aff.url} target="_blank" rel="noopener noreferrer" style={{ color: "inherit" }}>
+                          <a href={aff.url} target="_blank" rel="noopener noreferrer">
                             {aff.name}
                           </a>
                         ) : (
                           aff.name
                         )}
-                      </Box>
+                      </li>
                     ))}
-                  </Box>
+                  </ol>
                 ) : (
-                  <Box>
+                  <p>
                     {data.affiliations[0].url ? (
-                      <a href={data.affiliations[0].url} target="_blank" rel="noopener noreferrer" style={{ color: "inherit" }}>
+                      <a href={data.affiliations[0].url} target="_blank" rel="noopener noreferrer">
                         {data.affiliations[0].name}
                       </a>
                     ) : (
                       data.affiliations[0].name
                     )}
-                  </Box>
+                  </p>
                 )}
-              </MetaCell>
+              </div>
             )}
 
             {/* Published cell */}
-            <MetaCell label="Published">
+            <div className="meta-container-cell">
+              <h3>Published</h3>
               <EditableText
                 value={data.published}
                 placeholder="Date"
                 onChange={(v) => update("published", v)}
-                typographySx={{ fontSize: "0.9rem", color: "text.primary" }}
                 inline
               />
-            </MetaCell>
+            </div>
 
             {/* DOI cell */}
-            <MetaCell label="DOI">
+            <div className="meta-container-cell">
+              <h3>DOI</h3>
               <EditableText
                 value={data.doi}
                 placeholder="10.xxxx/xxxxx"
                 onChange={(v) => update("doi", v)}
-                typographySx={{ fontSize: "0.9rem", color: "text.primary", fontFamily: "monospace" }}
                 inline
               />
-            </MetaCell>
-          </Box>
-        </Box>
+            </div>
+          </div>
+        </header>
       )}
 
-      {/* Author forms */}
-      <Box sx={{ maxWidth: 680, mx: "auto", px: 2 }}>
+      {/* Author forms (editor-only, MUI is fine here) */}
+      <div style={{ maxWidth: 680, margin: "0 auto", padding: "0 16px" }}>
         {showAuthorForm && (
           <AuthorInlineForm
             affiliations={data.affiliations}
@@ -225,47 +181,23 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
             onCancel={() => setEditingAuthorIdx(null)}
           />
         )}
-      </Box>
-    </Box>
+      </div>
+    </div>
   );
 }
 
-// ---- Meta cell (labeled column in the meta bar) ----
-
-function MetaCell({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <Box sx={{ display: "flex", flexDirection: "column", gap: 1, maxWidth: 400 }}>
-      <Typography
-        component="h3"
-        sx={{
-          m: 0,
-          fontSize: "12px",
-          fontWeight: 400,
-          color: "text.disabled",
-          textTransform: "uppercase",
-          letterSpacing: "0.02em",
-        }}
-      >
-        {label}
-      </Typography>
-      <Box sx={{ m: 0 }}>{children}</Box>
-    </Box>
-  );
-}
-
-// ---- Editable text field (click-to-edit) ----
+// ---- Editable text field (click-to-edit, editor-only behavior) ----
 
 interface EditableTextProps {
   value: string;
   placeholder: string;
   onChange: (value: string) => void;
-  typographySx?: Record<string, any>;
+  className?: string;
   multiline?: boolean;
   inline?: boolean;
-  center?: boolean;
 }
 
-function EditableText({ value, placeholder, onChange, typographySx = {}, multiline, inline, center }: EditableTextProps) {
+function EditableText({ value, placeholder, onChange, className, multiline, inline }: EditableTextProps) {
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(value);
   const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
@@ -302,11 +234,10 @@ function EditableText({ value, placeholder, onChange, typographySx = {}, multili
 
   const displayValue = value || placeholder;
   const isEmpty = !value;
-  const textAlign = center ? "center" : undefined;
 
   if (editing) {
     return (
-      <Box sx={{ display: inline ? "inline-flex" : "flex" }}>
+      <span className={className} style={{ display: inline ? "inline-flex" : "flex" }}>
         <TextField
           inputRef={inputRef}
           value={draft}
@@ -320,43 +251,30 @@ function EditableText({ value, placeholder, onChange, typographySx = {}, multili
           slotProps={{
             input: {
               disableUnderline: true,
-              sx: {
-                ...typographySx,
-                textAlign,
-                p: 0,
-                m: 0,
-              },
+              sx: { p: 0, m: 0, font: "inherit", color: "inherit", textAlign: "inherit" },
             },
           }}
         />
-      </Box>
+      </span>
     );
   }
 
   return (
-    <Box
+    <span
+      className={`editable-text ${className || ""}`}
       onClick={() => setEditing(true)}
-      sx={{
-        ...typographySx,
-        textAlign,
-        cursor: "text",
-        opacity: isEmpty ? 0.35 : 1,
-        borderRadius: 1,
-        transition: "background 0.15s",
-        px: 0.5,
-        mx: -0.5,
+      style={{
         display: inline ? "inline" : "block",
-        "&:hover": {
-          bgcolor: "rgba(255,255,255,0.04)",
-        },
+        opacity: isEmpty ? 0.35 : 1,
+        cursor: "text",
       }}
     >
       {displayValue}
-    </Box>
+    </span>
   );
 }
 
-// ---- Author inline form ----
+// ---- Author inline form (editor-only, MUI is fine) ----
 
 function AuthorInlineForm({
   initial,

frontend/src/editor/frontmatter/HueSlider.tsx

@@ -0,0 +1,196 @@
+import { useRef, useState, useEffect, useCallback } from "react";
+import { Box, Typography } from "@mui/material";
+
+const L = 0.75;
+const C = 0.12;
+
+const COLOR_NAMES = [
+  { name: "Candy Apple Red", hue: 0 },
+  { name: "Boiling Magma", hue: 15 },
+  { name: "Aerospace Orange", hue: 25 },
+  { name: "Burtuqali Orange", hue: 33 },
+  { name: "American Orange", hue: 40 },
+  { name: "Cheese", hue: 48 },
+  { name: "Amber", hue: 55 },
+  { name: "Demonic Yellow", hue: 65 },
+  { name: "Bat-Signal", hue: 72 },
+  { name: "Bright Yellow Green", hue: 85 },
+  { name: "Lasting Lime", hue: 95 },
+  { name: "Bright Green", hue: 110 },
+  { name: "Chlorophyll Green", hue: 120 },
+  { name: "Green Screen", hue: 130 },
+  { name: "Cathode Green", hue: 148 },
+  { name: "Booger Buster", hue: 160 },
+  { name: "Enthusiasm", hue: 170 },
+  { name: "Ice Ice Baby", hue: 180 },
+  { name: "Vivid Sky Blue", hue: 195 },
+  { name: "Azure", hue: 214 },
+  { name: "Blue Ribbon", hue: 225 },
+  { name: "Icelandic Water", hue: 238 },
+  { name: "Blue Pencil", hue: 250 },
+  { name: "Electric Ultramarine", hue: 260 },
+  { name: "Purple Climax", hue: 275 },
+  { name: "Amethyst Ganzstar", hue: 285 },
+  { name: "Electric Purple", hue: 295 },
+  { name: "Phlox", hue: 305 },
+  { name: "Brusque Pink", hue: 315 },
+  { name: "Bright Magenta", hue: 325 },
+  { name: "Pink", hue: 335 },
+  { name: "Hot Flamingoes", hue: 345 },
+  { name: "Carmine Red", hue: 355 },
+];
+
+function getColorName(hue: number): string {
+  let best = COLOR_NAMES[0].name;
+  let bestDist = 361;
+  for (const c of COLOR_NAMES) {
+    const d = Math.abs(c.hue - hue);
+    const dist = Math.min(d, 360 - d);
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = c.name;
+    }
+  }
+  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);
+  const b = c * Math.sin(hRad);
+
+  const l_ = l + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = l - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = l - 0.0894841775 * a - 1.291485548 * b;
+
+  const ll = l_ * l_ * l_;
+  const mm = m_ * m_ * m_;
+  const ss = s_ * s_ * s_;
+
+  const toSrgb = (u: number) =>
+    u <= 0.0031308 ? 12.92 * u : 1.055 * Math.pow(Math.max(0, u), 1 / 2.4) - 0.055;
+
+  const r = toSrgb(+4.0767416621 * ll - 3.3077115913 * mm + 0.2309699292 * ss);
+  const g = toSrgb(-1.2684380046 * ll + 2.6097574011 * mm - 0.3413193965 * ss);
+  const bVal = toSrgb(-0.0041960863 * ll - 0.7034186147 * mm + 1.707614701 * ss);
+
+  const clamp = (v: number) => Math.max(0, Math.min(255, Math.round(v * 255)));
+  const hex = (v: number) => clamp(v).toString(16).padStart(2, "0");
+  return `#${hex(r)}${hex(g)}${hex(bVal)}`;
+}
+
+interface HueSliderProps {
+  hue: number;
+  onChange: (hue: number) => void;
+}
+
+export function HueSlider({ hue, onChange }: HueSliderProps) {
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const [dragging, setDragging] = useState(false);
+
+  const hexColor = oklchToHex(L, C, hue);
+  const colorName = getColorName(hue);
+
+  const hueFromClientX = useCallback((clientX: number) => {
+    const rect = sliderRef.current?.getBoundingClientRect();
+    if (!rect) return hue;
+    const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+    return (x / rect.width) * 360;
+  }, [hue]);
+
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    e.preventDefault();
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    setDragging(true);
+    onChange(hueFromClientX(e.clientX));
+  }, [hueFromClientX, onChange]);
+
+  const handlePointerMove = useCallback((e: React.PointerEvent) => {
+    if (!dragging) return;
+    onChange(hueFromClientX(e.clientX));
+  }, [dragging, hueFromClientX, onChange]);
+
+  const handlePointerUp = useCallback(() => {
+    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); }
+    if (e.key === "ArrowRight") { e.preventDefault(); onChange((hue + step) % 360); }
+  }, [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={{
+            width: 44,
+            height: 44,
+            borderRadius: "8px",
+            bgcolor: hexColor,
+            border: "1px solid",
+            borderColor: "divider",
+            flexShrink: 0,
+          }}
+        />
+        <Box sx={{ minWidth: 0 }}>
+          <Typography variant="body2" sx={{ fontWeight: 700, fontSize: "0.8rem", lineHeight: 1.3 }}>
+            {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
+        ref={sliderRef}
+        role="slider"
+        tabIndex={0}
+        aria-label="Hue"
+        aria-valuemin={0}
+        aria-valuemax={360}
+        aria-valuenow={Math.round(hue)}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onKeyDown={handleKeyDown}
+        sx={{
+          position: "relative",
+          height: 16,
+          borderRadius: "10px",
+          border: "1px solid",
+          borderColor: "divider",
+          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={{
+            position: "absolute",
+            top: "50%",
+            left: `${(hue / 360) * 100}%`,
+            width: 14,
+            height: 14,
+            borderRadius: "50%",
+            border: "2px solid #fff",
+            transform: "translate(-50%, -50%)",
+            bgcolor: 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>
+  );
+}
+
+export { oklchToHex, L as OKLCH_L, C as OKLCH_C };

frontend/src/editor/frontmatter/SettingsDrawer.tsx

@@ -15,6 +15,7 @@ import { useState, useEffect } 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";
 
 interface SettingsDrawerProps {
   open: boolean;
@@ -26,12 +27,15 @@ interface SettingsDrawerProps {
 export function SettingsDrawer({ open, onClose, store, settingsMap }: SettingsDrawerProps) {
   const { data, update } = useFrontmatter(store);
   const [citationStyle, setCitationStyle] = useState("apa");
+  const [hue, setHue] = useState(47);
 
   useEffect(() => {
     if (!settingsMap) return;
     const sync = () => {
-      const val = settingsMap.get("citationStyle");
-      if (val) setCitationStyle(val as string);
+      const cit = settingsMap.get("citationStyle");
+      if (cit) setCitationStyle(cit as string);
+      const h = settingsMap.get("primaryHue");
+      if (h !== undefined) setHue(h as number);
     };
     sync();
     settingsMap.observe(sync);
@@ -127,6 +131,17 @@ export function SettingsDrawer({ open, onClose, store, settingsMap }: SettingsDr
             </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 */}
@@ -206,3 +221,4 @@ function FieldGroup({ label, children }: { label: string; children: React.ReactN
     </Box>
   );
 }
+

frontend/src/main.tsx

@@ -1,17 +1,34 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { ThemeProvider, CssBaseline } from "@mui/material";
-import { theme } from "./theme";
+import { CssBaseline } from "@mui/material";
 import App from "./App";
-import "./styles/tokens.css";
+
+// Template foundation (source of truth - same as research-article-template)
+import "./styles/_variables.css";
+import "./styles/_reset.css";
+import "./styles/_base.css";
+import "./styles/_layout.css";
+import "./styles/_print.css";
+import "./styles/components/_code.css";
+import "./styles/components/_table.css";
+import "./styles/components/_tag.css";
+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.
+
+// Editor extensions
+import "./styles/_editor-tokens.css";
 import "./styles/article.css";
+import "./styles/toc.css";
 import "./styles/editing.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <App />
-    </ThemeProvider>
+    <CssBaseline />
+    <App />
   </React.StrictMode>
 );

frontend/src/styles/_base.css

@@ -0,0 +1,174 @@
+@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 {
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.content-grid main {
+  color: var(--text-color);
+}
+
+.content-grid main p {
+  margin: 0 0 var(--spacing-3);
+}
+
+.content-grid main h2 {
+  font-weight: 600;
+  font-size: clamp(22px, 2.6vw, 32px);
+  line-height: 1.2;
+  margin: var(--spacing-10) 0 var(--spacing-5);
+  padding-bottom: var(--spacing-2);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.content-grid main h3 {
+  font-weight: 700;
+  font-size: clamp(18px, 2.1vw, 22px);
+  line-height: 1.25;
+  margin: var(--spacing-8) 0 var(--spacing-4);
+}
+
+.content-grid main h4 {
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 16px;
+  line-height: 1.2;
+  margin: var(--spacing-6) 0 var(--spacing-4);
+}
+
+.content-grid main a {
+  color: var(--primary-color);
+  text-decoration: none;
+  background: var(--surface-bg);
+  border-bottom: 1px solid color-mix(in srgb, var(--primary-color, #007AFF) 40%, transparent);
+}
+
+.content-grid main a:hover {
+  color: var(--primary-color-hover);
+  border-bottom: 1px solid color-mix(in srgb, var(--primary-color, #007AFF) 40%, transparent);
+}
+
+/* Do not underline heading links inside the article (not the TOC) */
+.content-grid main h2 a,
+.content-grid main h3 a,
+.content-grid main h4 a,
+.content-grid main h5 a,
+.content-grid main h6 a {
+  color: inherit;
+  background: none;
+  border-bottom: none;
+  text-decoration: none;
+}
+
+.content-grid main h2 a:hover,
+.content-grid main h3 a:hover,
+.content-grid main h4 a:hover,
+.content-grid main h5 a:hover,
+.content-grid main h6 a:hover {
+  color: inherit;
+  border-bottom: none;
+  text-decoration: none;
+}
+
+.content-grid main ul,
+.content-grid main ol {
+  padding-left: 24px;
+  margin: 0 0 var(--spacing-3);
+}
+
+.content-grid main li {
+  margin-bottom: var(--spacing-2);
+}
+
+.content-grid main li:last-child {
+  margin-bottom: 0;
+}
+
+.content-grid main blockquote {
+  border-left: 2px solid var(--border-color);
+  padding-left: var(--spacing-4);
+  font-style: italic;
+  color: var(--muted-color);
+  margin: var(--spacing-4) 0;
+}
+
+.content-grid main hr {
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  margin: var(--spacing-5) 0;
+}
+
+.muted {
+  color: var(--muted-color);
+}
+
+[data-footnote-ref] {
+  margin-left: 4px;
+}
+
+.content-grid main mark {
+  background-color: color-mix(in srgb, var(--primary-color, #007AFF) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
+  color: inherit;
+  padding: 4px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+  margin: 46px 0;
+}
+
+.feature-card {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
+  ;
+  background: color-mix(in srgb, var(--primary-color, #007AFF) 05%, transparent) !important;
+  border-radius: 8px;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.feature-card strong {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-color);
+  color: var(--primary-color) !important;
+  margin-bottom: 0px !important;
+}
+
+.feature-card span {
+  font-size: 12px;
+  color: var(--muted-color);
+  color: var(--primary-color) !important;
+  margin-bottom: 0px !important;
+  opacity: 1;
+}
+
+.katex .tag {
+  background: none;
+  border: none;
+  opacity: 0.4;
+}

frontend/src/styles/_editor-tokens.css

@@ -0,0 +1,105 @@
+/* -----------------------------------------------------------------------
+   Editor-specific design tokens
+   
+   Extends _variables.css with tokens needed only by the collaborative
+   editor UI (not the published article). Syntax highlighting, hover
+   states, accent variants, shadows, tooltips, etc.
+   ----------------------------------------------------------------------- */
+
+:root {
+  /* Text variants (editor chrome) */
+  --text-heading: var(--neutral-900);
+  --text-heading-secondary: #222;
+  --text-strong: #000;
+  --text-faint: #aaa;
+
+  /* Background variants (editor chrome) */
+  --bg-hover: rgba(0, 0, 0, 0.03);
+  --bg-overlay: rgba(0, 0, 0, 0.5);
+  --bg-tooltip: #ffffff;
+  --bg-code-block: #fafafa;
+
+  /* Border variants */
+  --border-light: #eeeeee;
+  --border-focus: rgba(124, 58, 237, 0.5);
+
+  /* Accent (editor interactive elements - links, citations) */
+  --accent: #7c3aed;
+  --accent-light: #958DF1;
+  --accent-bg: rgba(124, 58, 237, 0.08);
+  --accent-bg-hover: rgba(124, 58, 237, 0.15);
+  --accent-text: #6d28d9;
+
+  /* Syntax highlighting (One Dark inspired) */
+  --code-text: #d63384;
+  --code-comment: #6a737d;
+  --code-keyword: #8250df;
+  --code-string: #0a6640;
+  --code-number: #b35900;
+  --code-variable: #d63384;
+  --code-type: #b35900;
+  --code-function: #0550ae;
+  --code-tag: #d63384;
+  --code-attr: #b35900;
+  --code-symbol: #0a6640;
+  --code-meta: #0550ae;
+  --code-deletion: #d63384;
+
+  /* Danger */
+  --danger-color: #dc2626;
+  --danger-bg: rgba(220, 38, 38, 0.08);
+  --danger-bg-hover: rgba(220, 38, 38, 0.15);
+
+  /* Shadows */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
+
+  /* KaTeX */
+  --katex-color: #1a1a1a;
+}
+
+[data-theme="dark"] {
+  --text-heading: #fff;
+  --text-heading-secondary: rgba(255, 255, 255, 0.9);
+  --text-strong: rgba(255, 255, 255, 0.95);
+  --text-faint: rgba(255, 255, 255, 0.25);
+
+  --bg-hover: rgba(255, 255, 255, 0.03);
+  --bg-overlay: rgba(0, 0, 0, 0.5);
+  --bg-tooltip: #1e1e2e;
+  --bg-code-block: rgba(255, 255, 255, 0.03);
+
+  --border-light: rgba(255, 255, 255, 0.06);
+  --border-focus: rgba(149, 141, 241, 0.5);
+
+  --accent: #7c3aed;
+  --accent-light: #958DF1;
+  --accent-bg: rgba(149, 141, 241, 0.15);
+  --accent-bg-hover: rgba(149, 141, 241, 0.25);
+  --accent-text: #b4aef7;
+
+  --code-text: #e06c75;
+  --code-comment: #5c6370;
+  --code-keyword: #c678dd;
+  --code-string: #98c379;
+  --code-number: #d19a66;
+  --code-variable: #e06c75;
+  --code-type: #e5c07b;
+  --code-function: #61afef;
+  --code-tag: #e06c75;
+  --code-attr: #d19a66;
+  --code-symbol: #56b6c2;
+  --code-meta: #61afef;
+  --code-deletion: #e06c75;
+
+  --danger-color: #e06c75;
+  --danger-bg: rgba(224, 108, 117, 0.12);
+  --danger-bg-hover: rgba(224, 108, 117, 0.25);
+
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
+
+  --katex-color: rgba(255, 255, 255, 0.85);
+}

frontend/src/styles/_layout.css

@@ -0,0 +1,363 @@
+/* ============================================================================ */
+/* Layout – 3-column grid (Table of Contents / Article / Aside) */
+/* ============================================================================ */
+
+.content-grid {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 var(--content-padding-x);
+  margin-top: 40px;
+  display: grid;
+  grid-template-columns: 260px minmax(0, 680px) 260px;
+  gap: 32px;
+  align-items: start;
+}
+
+.content-grid>main {
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.content-grid>main>*:first-child {
+  margin-top: 0;
+}
+
+@media (--bp-content-collapse) {
+  .content-grid {
+    overflow: hidden;
+    display: block;
+    margin-top: var(--spacing-2);
+  }
+
+  .content-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .table-of-contents {
+    position: static;
+    display: none;
+  }
+
+  .toc-mobile-toggle {
+    display: flex;
+  }
+
+  .toc-mobile-backdrop {
+    display: block;
+  }
+
+  .toc-mobile-sidebar {
+    display: flex;
+  }
+
+  .footer-inner {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .footer-inner>.footer-heading {
+    grid-column: auto;
+    margin-top: 16px;
+  }
+
+  .footer-inner {
+    display: block;
+    padding: 40px 16px;
+  }
+}
+
+
+
+/* ============================================================================ */
+/* Width helpers – slightly wider than main column, and full-width to viewport */
+/* ---------------------------------------------------------------------------- */
+
+.wide,
+.full-width {
+  box-sizing: border-box;
+  position: relative;
+  z-index: var(--z-elevated);
+  background-color: var(--page-bg);
+}
+
+.wide {
+  /* Target up to ~1100px while staying within viewport minus page gutters */
+  width: min(1100px, 100vw - var(--content-padding-x) * 4);
+  margin-left: 50%;
+  transform: translateX(-50%);
+  padding: calc(var(--content-padding-x)*4);
+  border-radius: calc(var(--button-radius)*4);
+  background-color: var(--page-bg);
+  -webkit-mask:
+    linear-gradient(to right, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%),
+    linear-gradient(to bottom, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%);
+  -webkit-mask-composite: intersect;
+  mask:
+    linear-gradient(to right, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%),
+    linear-gradient(to bottom, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%);
+  mask-composite: intersect;
+}
+
+.wide>* {
+  margin-bottom: 0 !important;
+}
+
+.full-width {
+  /* Span the full viewport width and center relative to viewport */
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+  padding: calc(var(--content-padding-x)*4);
+  border-radius: calc(var(--button-radius)*4);
+  background-color: var(--page-bg);
+  -webkit-mask:
+    linear-gradient(to bottom, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%);
+  mask:
+    linear-gradient(to bottom, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%);
+}
+
+.full-width figure figcaption {
+  text-align: center !important;
+}
+
+@media (--bp-content-collapse) {
+
+  .wide,
+  .full-width {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    padding: 0;
+    transform: none;
+  }
+}
+
+/* ============================================================================ */
+/* Theme toggle placement                                                       */
+/* ============================================================================ */
+
+#theme-toggle {
+  position: absolute;
+  top: var(--spacing-4);
+  left: var(--spacing-4);
+  margin: 0;
+  z-index: var(--z-overlay);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid var(--border-color);
+  background: var(--page-bg);
+  box-shadow: 0 2px 12px rgba(0,0,0,.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  cursor: pointer;
+  color: var(--text-color);
+  transition: transform 150ms ease, box-shadow 150ms ease;
+}
+#theme-toggle:active {
+  transform: scale(0.92);
+}
+
+@media (--bp-content-collapse) {
+  #theme-toggle {
+    display: none;
+  }
+}
+
+/* ------------------------------------------------------------------------- */
+/* Hero meta bar responsiveness                                               */
+/* Two columns at collapse breakpoint, then one column below small screens    */
+/* ------------------------------------------------------------------------- */
+@media (--bp-md) {
+  header.meta .meta-container {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 12px;
+    column-gap: 8px;
+    max-width: 100%;
+    padding: 0 var(--spacing-4);
+  }
+
+  header.meta .meta-container .meta-container-cell {
+    flex: 1 1 calc(50% - 8px);
+    min-width: 0;
+  }
+}
+
+@media (--bp-xxs) {
+  header.meta .meta-container .meta-container-cell {
+    flex-basis: 100%;
+    text-align: center;
+  }
+
+  /* Center ordered list numbers within meta (e.g., affiliations) */
+  header.meta .affiliations {
+    list-style-position: inside;
+    padding-left: 0;
+    margin-left: 0;
+  }
+
+  header.meta .affiliations li {
+    text-align: center;
+  }
+}
+
+
+/* ------------------------------------------------------------------------- */
+/* D3 neural embed responsiveness                                            */
+/* Stack canvas (left) over network (right) on small screens                 */
+/* ------------------------------------------------------------------------- */
+@media (--bp-md) {
+  .d3-neural .panel {
+    flex-direction: column;
+  }
+
+  .d3-neural .panel .left {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .d3-neural .panel .right {
+    flex: 0 0 auto;
+    width: 100%;
+    min-width: 0;
+  }
+}
+
+/* ============================================================================ */
+/* Auto figure numbering                                                        */
+/* Applies a CSS counter across all figure-bearing components:                  */
+/* Reference (.reference-wrapper), Image (.image-wrapper figure),               */
+/* and HtmlEmbed (.html-embed)                                                  */
+/* ============================================================================ */
+
+.content-grid > main {
+  counter-reset: figure;
+}
+
+/* Increment on every figure-like component */
+.content-grid > main .reference-wrapper,
+.content-grid > main .image-wrapper > figure,
+.content-grid > main figure.html-embed {
+  counter-increment: figure;
+}
+
+/* Display "Figure N · " before each figcaption */
+.content-grid > main .reference-wrapper .reference__caption::before,
+.content-grid > main .image-wrapper > figure > figcaption::before,
+.content-grid > main figure.html-embed > .html-embed__desc::before {
+  content: "Figure " counter(figure) " · ";
+  font-weight: 600;
+}
+
+/* ============================================================================ */
+/* "paper" template - academic project-page layout (single centered column)     */
+/* Activated by frontmatter `template: "paper"` -> data-template="paper"        */
+/* Reference: academic project pages like diffusion-cot.github.io               */
+/* ============================================================================ */
+
+/* ---- Paper hero banner: placed between meta and content in index.astro ---- */
+
+.paper-hero-banner {
+  max-width: 920px;
+  margin: 32px auto 0;
+  padding: 0 16px;
+}
+
+.paper-hero-banner :global(.html-embed) {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.paper-hero-banner :global(.html-embed__card) {
+  border-radius: 8px;
+}
+
+/* Thin separator between banner area and content */
+[data-template="paper"] .paper-hero-banner + .content-grid {
+  margin-top: 48px;
+  border-top: 1px solid var(--border-color);
+  padding-top: 40px;
+}
+
+/* When no banner, separator is directly below meta */
+[data-template="paper"] .meta + .content-grid,
+[data-template="paper"] .hero-paper-meta + .content-grid {
+  margin-top: 32px;
+  border-top: 1px solid var(--border-color);
+  padding-top: 40px;
+}
+
+/* ---- Content grid: single centered column, no TOC ---- */
+
+[data-template="paper"] .content-grid {
+  grid-template-columns: minmax(0, 780px);
+  justify-content: center;
+  margin-top: 0;
+}
+
+[data-template="paper"] .table-of-contents {
+  display: none;
+}
+
+/* ---- Typography: clean left-aligned headings ---- */
+
+[data-template="paper"] .content-grid > main h2 {
+  text-align: left;
+  font-size: 1.75em;
+  font-weight: 700;
+  margin-top: 2.5em;
+  margin-bottom: 0.8em;
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+[data-template="paper"] .content-grid > main h2 a {
+  background: none;
+}
+
+[data-template="paper"] .content-grid > main h2:first-child,
+[data-template="paper"] .content-grid > main > *:first-child h2 {
+  margin-top: 0;
+}
+
+[data-template="paper"] .content-grid > main h3 {
+  font-size: 1.3em;
+  font-weight: 600;
+  margin-top: 2em;
+  margin-bottom: 0.6em;
+}
+
+/* ---- No figure numbering ---- */
+
+[data-template="paper"] .content-grid > main {
+  counter-reset: none;
+}
+
+[data-template="paper"] .content-grid > main .reference-wrapper .reference__caption::before,
+[data-template="paper"] .content-grid > main .image-wrapper > figure > figcaption::before,
+[data-template="paper"] .content-grid > main figure.html-embed > .html-embed__desc::before {
+  content: none;
+}
+
+/* ---- Footer: simple single-column block layout ---- */
+
+[data-template="paper"] .footer-inner {
+  display: block;
+  max-width: 780px;
+}
+
+[data-template="paper"] .references-block > .footer-heading,
+[data-template="paper"] .reuse-block > .footer-heading {
+  text-align: left;
+  padding-right: 0;
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+
+[data-template="paper"] .template-credit p {
+  margin-top: 32px;
+}

frontend/src/styles/_print.css

@@ -0,0 +1,128 @@
+/* ============================================================================ */
+/* Print styles */
+/* ========================================================================= */
+@media print {
+
+  html,
+  body {
+    background: #fff;
+  }
+
+  /* Margins handled by Playwright; avoid extra global margins */
+  body {
+    margin: 0;
+  }
+
+  /* Keep the banner (hero), hide non-essential UI elements */
+  #theme-toggle {
+    display: none !important;
+  }
+
+  /* Links: remove underline and background */
+  .content-grid main a {
+    text-decoration: none;
+    background: none;
+    border-bottom: 1px solid rgba(0, 0, 0, .2);
+  }
+
+  /* Avoid breaks inside complex blocks */
+  .content-grid main pre,
+  .content-grid main blockquote,
+  .content-grid main table,
+  .content-grid main figure {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
+  /* Soft page breaks around main headings */
+  .content-grid main h2 {
+    page-break-before: auto;
+    page-break-after: avoid;
+    break-after: avoid-page;
+  }
+
+  /* Small icon labels not needed when printing */
+  .code-lang-chip {
+    display: none !important;
+  }
+
+  /* Adjust more contrasty colors for print */
+  :root {
+    --surface-bg: #fff;
+    --border-color: rgba(0, 0, 0, .2);
+    --link-underline: rgba(0, 0, 0, .3);
+    --link-underline-hover: rgba(0, 0, 0, .4);
+  }
+
+  /* Force single column to reduce widows/orphans and awkward breaks */
+  .content-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  .table-of-contents,
+  .right-aside,
+  .toc-mobile-toggle,
+  .toc-mobile-backdrop,
+  .toc-mobile-sidebar {
+    display: none !important;
+  }
+
+  main>nav:first-of-type {
+    display: none !important;
+  }
+
+  /* Avoid page breaks inside complex visual blocks */
+  .hero,
+  .hero-banner,
+  .html-embed__card,
+  .js-plotly-plot,
+  figure,
+  pre,
+  table,
+  blockquote,
+  .wide,
+  .full-width,
+  .stack > *,
+  .card,
+  .palettes,
+  .palette-card,
+  .color-picker,
+  .note {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
+  /* Prefer keeping header+lead together */
+  .hero {
+    page-break-after: avoid;
+  }
+
+  /* Center the hero banner and constrain all its children generically */
+  .hero-banner {
+    width: 100% !important;
+    max-width: 980px !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    overflow: hidden;
+  }
+
+  .hero-banner > *,
+  .hero-banner svg,
+  .hero-banner canvas,
+  .hero-banner img,
+  .hero-banner video {
+    max-width: 100% !important;
+    width: 100% !important;
+    height: auto !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    display: block;
+  }
+}
+
+
+@media print {
+  .meta-container-cell--pdf {
+    display: none !important;
+  }
+}

frontend/src/styles/_reset.css

@@ -0,0 +1,25 @@
+html { box-sizing: border-box; }
+*, *::before, *::after { box-sizing: inherit; }
+body { margin: 0; }
+audio { display: block; width: 100%; }
+
+img,
+picture {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  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/_variables.css

@@ -0,0 +1,126 @@
+/* ============================================================================ */
+/* Design Tokens */
+/* ============================================================================ */
+:root {
+  /* Neutrals */
+  --neutral-900: rgb(17, 24, 39);
+  --neutral-600: rgb(107, 114, 128);
+  --neutral-400: rgb(185, 185, 185);
+  --neutral-300: rgb(228, 228, 228);
+  --neutral-200: rgb(245, 245, 245);
+  --neutral-50: rgb(249, 250, 251);
+
+  --default-font-family: Source Sans Pro, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* Brand (OKLCH base + derived states) */
+  --primary-base: oklch(0.75 0.12 47);
+  --primary-color: var(--primary-base);
+  --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
+  --primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);
+  --on-primary: #ffffff;
+
+  /* Semantic colors */
+  --danger-color: oklch(0.65 0.19 25);
+  --success-color: oklch(0.65 0.15 145);
+  --info-color: oklch(0.65 0.12 230);
+
+  /* Text & Surfaces */
+  --page-bg: #fff;
+  --surface-bg: #f9f9f9;
+  --text-color: rgba(0, 0, 0, .85);
+  --transparent-page-contrast: rgba(255, 255, 255, .85);
+  --muted-color: rgba(0, 0, 0, .6);
+  --border-color: rgba(0, 0, 0, .1);
+  --code-bg: #f6f8fa;
+
+  /* Links */
+  --link-underline: var(--primary-color);
+  --link-underline-hover: var(--primary-color-hover);
+
+  /* Spacing scale */
+  --spacing-1: 8px;
+  --spacing-2: 12px;
+  --spacing-3: 16px;
+  --spacing-4: 24px;
+  --spacing-5: 32px;
+  --spacing-6: 40px;
+  --spacing-7: 48px;
+  --spacing-8: 56px;
+  --spacing-9: 64px;
+  --spacing-10: 72px;
+
+  /* Custom Media aliases compiled by PostCSS */
+  @custom-media --bp-xxs (max-width: 320px);
+  @custom-media --bp-xs (max-width: 480px);
+  @custom-media --bp-sm (max-width: 640px);
+  @custom-media --bp-md (max-width: 768px);
+  @custom-media --bp-lg (max-width: 1024px);
+  @custom-media --bp-xl (max-width: 1280px);
+  @custom-media --bp-content-collapse (max-width: 1100px);
+
+  /* Layout */
+  --content-padding-x: 16px;
+  /* default page gutter */
+  --block-spacing-y: var(--spacing-4);
+  /* default vertical spacing between block components */
+
+  /* Config */
+  --palette-count: 8;
+
+  /* Button tokens */
+  --button-radius: 6px;
+  --button-padding-x: 16px;
+  --button-padding-y: 10px;
+  --button-font-size: 14px;
+  --button-icon-padding: 8px;
+  /* Big button */
+  --button-big-padding-x: 16px;
+  --button-big-padding-y: 12px;
+  --button-big-font-size: 16px;
+  --button-big-icon-padding: 12px;
+
+  /* Table tokens */
+  --table-border-radius: 8px;
+  --table-header-bg: oklch(from var(--surface-bg) calc(l - 0.02) c h);
+  --table-row-odd-bg: oklch(from var(--surface-bg) calc(l - 0.01) c h);
+
+  /* Z-index */
+  --z-base: 0;
+  --z-content: 1;
+  --z-elevated: 10;
+  --z-overlay: 1000;
+  --z-modal: 1100;
+  --z-tooltip: 1200;
+
+  /* Charts (global) */
+  --axis-color: var(--muted-color);
+  --tick-color: var(--text-color);
+  --grid-color: rgba(0, 0, 0, .08);
+}
+
+/* ============================================================================ */
+/* Dark Theme Overrides */
+/* ============================================================================ */
+[data-theme="dark"] {
+  --page-bg: #0f1115;
+  --surface-bg: #07080a;
+  --text-color: rgba(255, 255, 255, .9);
+  --muted-color: rgba(255, 255, 255, .7);
+  --border-color: rgba(255, 255, 255, .15);
+  --code-bg: #12151b;
+  --transparent-page-contrast: rgba(0, 0, 0, .85);
+
+  /* Charts (global) */
+  --axis-color: var(--muted-color);
+  --tick-color: var(--muted-color);
+  --grid-color: rgba(255, 255, 255, .10);
+
+  /* Primary (lower L in dark) */
+  --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
+  --primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);
+  --on-primary: #0f1115;
+
+  color-scheme: dark;
+  background: var(--page-bg);
+}

frontend/src/styles/article.css

@@ -8,10 +8,10 @@
 /* Base typography */
 .tiptap {
   outline: none;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-family: var(--default-font-family);
   font-size: 1rem;
   line-height: 1.7;
-  color: var(--text-primary);
+  color: var(--text-color);
   max-width: 780px;
   margin-left: auto;
   margin-right: auto;
@@ -51,7 +51,7 @@
 .tiptap h3 {
   font-size: 1.2rem;
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--text-color);
   line-height: 1.4;
   margin: 1.5em 0 0.3em;
 }
@@ -78,10 +78,10 @@
 
 /* Blockquote */
 .tiptap blockquote {
-  border-left: 3px solid var(--border);
+  border-left: 3px solid var(--border-color);
   padding-left: 1rem;
   margin: 1em 0;
-  color: var(--text-secondary);
+  color: var(--muted-color);
 }
 
 .tiptap blockquote p {
@@ -91,7 +91,7 @@
 /* Inline code */
 .tiptap code {
   font-family: "SFMono-Regular", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
-  background: var(--bg-code);
+  background: var(--code-bg);
   padding: 0.15em 0.4em;
   border-radius: 4px;
   font-size: 0.88em;
@@ -111,7 +111,7 @@
 .tiptap pre code {
   background: none;
   padding: 0;
-  color: var(--text-secondary);
+  color: var(--muted-color);
   font-size: 0.875rem;
   line-height: 1.6;
 }
@@ -196,7 +196,7 @@
 /* Horizontal rule */
 .tiptap hr {
   border: none;
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-color);
   margin: 2em 0;
 }
 
@@ -220,8 +220,8 @@
 }
 
 .tiptap th {
-  background: var(--bg-code);
-  color: var(--text-secondary);
+  background: var(--code-bg);
+  color: var(--muted-color);
   font-weight: 600;
   font-size: 0.8125rem;
   text-transform: uppercase;
@@ -229,26 +229,27 @@
 }
 
 .tiptap td {
-  color: var(--text-primary);
+  color: var(--text-color);
 }
 
 .tiptap tr:hover td {
   background: var(--bg-hover);
 }
 
-/* Links */
+/* Links - aligned with template (_base.css .content-grid main a) */
 .tiptap a,
 .tiptap .editor-link {
-  color: var(--accent-light);
-  text-decoration: underline;
-  text-decoration-color: rgba(149, 141, 241, 0.4);
+  color: var(--primary-color);
+  text-decoration: none;
+  border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
   text-underline-offset: 2px;
-  transition: text-decoration-color 0.15s;
+  transition: border-color 0.15s;
 }
 
 .tiptap a:hover,
 .tiptap .editor-link:hover {
-  text-decoration-color: rgba(149, 141, 241, 0.8);
+  color: var(--primary-color-hover);
+  border-bottom-color: color-mix(in srgb, var(--primary-color) 70%, transparent);
 }
 
 /* Bold */
@@ -273,7 +274,7 @@
 }
 
 .tiptap [data-type="inline-math"] .tiptap-mathematics-render:hover {
-  background: var(--bg-code);
+  background: var(--code-bg);
 }
 
 /* Math - block */
@@ -322,7 +323,7 @@
   left: 50%;
   transform: translateX(-50%);
   background: var(--bg-tooltip);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 0.75rem;
   min-width: 240px;
@@ -342,7 +343,7 @@
 }
 
 .citation-tooltip-journal {
-  color: var(--text-secondary);
+  color: var(--muted-color);
   font-size: 0.75rem;
   font-style: italic;
   line-height: 1.3;
@@ -380,7 +381,7 @@
 .bibliography-block {
   margin: 2em 0 1em;
   padding-top: 1.5em;
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-color);
 }
 
 .bibliography-title {
@@ -399,7 +400,7 @@
 .bibliography-content {
   font-size: 0.875rem;
   line-height: 1.7;
-  color: var(--text-secondary);
+  color: var(--muted-color);
 }
 
 .bibliography-content .csl-entry {
@@ -436,7 +437,7 @@
   left: 50%;
   transform: translateX(-50%);
   background: var(--bg-tooltip);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 10px 14px;
   min-width: 200px;
@@ -454,7 +455,7 @@
 
 .glossary-tooltip-def {
   font-size: 12px;
-  color: var(--text-secondary);
+  color: var(--muted-color);
   line-height: 1.5;
 }
 
@@ -493,7 +494,7 @@
   left: 50%;
   transform: translateX(-50%);
   background: var(--bg-tooltip);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 10px 14px;
   min-width: 220px;
@@ -504,7 +505,7 @@
 
 .footnote-tooltip-content {
   font-size: 12px;
-  color: var(--text-secondary);
+  color: var(--muted-color);
   line-height: 1.5;
 }
 

frontend/src/styles/components/_button.css

@@ -0,0 +1,58 @@
+button, .button {
+    appearance: none;
+    background: linear-gradient(15deg, var(--primary-color) 0%, var(--primary-color-hover) 35%);
+    color: white;
+    border: 1px solid transparent;
+    border-radius: var(--button-radius);
+    padding: var(--button-padding-y) var(--button-padding-x);
+    font-size: var(--button-font-size);
+    line-height: 1;
+    cursor: pointer;
+    display: inline-block;
+    text-decoration: none;
+    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s ease;
+  }
+  /* Icon-only buttons: equal X/Y padding */
+  button:has(> svg:only-child),
+  .button:has(> svg:only-child) {
+    padding: var(--button-icon-padding);
+  }
+  button:hover, .button:hover {
+    filter: brightness(96%);
+  }
+  button:active, .button:active {
+    transform: translateY(1px);
+  }
+  button:focus-visible, .button:focus-visible {
+    outline: none;
+  }
+  button:disabled, .button:disabled {
+    opacity: .6;
+    cursor: not-allowed;
+  }
+  
+  /* Ghost/Muted button: subtle outline, primary color text/border */
+  .button--ghost {
+    background: transparent !important;
+    color: var(--primary-color) !important;
+    border-color: var(--primary-color) !important;
+  }
+  .button--ghost:hover {
+    color: var(--primary-color-hover) !important;
+    border-color: var(--primary-color-hover) !important;
+    filter: none;
+  }
+  
+  /* Big button: larger padding and font size */
+  .button.button--big {
+    padding: var(--button-big-padding-y) var(--button-big-padding-x);
+    font-size: var(--button-big-font-size);
+  }
+  .button.button--big:has(> svg:only-child) {
+    padding: var(--button-big-icon-padding);
+  }
+  
+  .button-group .button {
+    margin: 5px;
+  }
+  

frontend/src/styles/components/_card.css

@@ -0,0 +1,138 @@
+.card {
+    background: var(--surface-bg);
+    border: 1px solid var(--border-color) !important;
+    border-radius: 12px;
+    padding: var(--spacing-3);
+    z-index: calc(var(--z-elevated) + 1);
+    position: relative;
+    margin-bottom: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    transition: all 0.2s ease;
+    overflow: hidden;
+    text-decoration: none;
+    color: inherit;
+    display: block;
+}
+
+.card:hover {
+    text-decoration: none;
+    color: inherit;
+}
+
+.card.no-padding,
+.card.card--p0 {
+    padding: 0;
+}
+
+.card:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+
+.card figcaption {
+    color: var(--text-color) !important;
+    font-weight: 600 !important;
+    font-size: 1rem !important;
+    text-align: center !important;
+    padding: var(--spacing-3) !important;
+    margin: 0 !important;
+}
+
+.card .image-wrapper,
+.card .image-wrapper figure {
+    margin: 0 !important;
+    width: 100% !important;
+    display: block !important;
+}
+
+.card img {
+    border-radius: 8px 8px 0 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    height: 120px !important;
+    object-fit: cover !important;
+    display: block !important;
+    border-bottom: 1px solid var(--border-color) !important;
+    transition: all 0.2s ease;
+}
+
+.card.template-card img {
+    height: auto !important;
+    object-fit: contain !important;
+}
+
+
+.card h3,
+.card h4,
+.card h5 {
+    margin-top: 0 !important;
+    font-weight: 900 !important;
+    width: 100%;
+}
+
+.card::after {
+    display: none !important;
+}
+
+.card-title-container {
+    padding: var(--spacing-3) var(--spacing-4) var(--spacing-4) var(--spacing-4);
+}
+
+.card-title {
+    color: var(--text-color);
+    font-size: 0.9rem;
+    margin: 0 0 var(--spacing-1) 0 !important;
+    font-weight: 600;
+    line-height: 1.4;
+    white-space: normal;
+}
+
+.card-subtitle {
+    color: var(--muted-color);
+    font-size: 0.75rem;
+    margin: 0 !important;
+    line-height: 1.5;
+    white-space: normal;
+}
+
+.card-cta {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--surface-bg);
+    border: 2px dashed var(--border-color) !important;
+}
+
+.card-cta:hover {
+    transform: none;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    border: 2px dashed var(--border-color) !important;
+}
+
+.card-cta-content {
+    text-align: center;
+    padding: var(--spacing-4);
+}
+
+.card-cta h3,
+.card-cta h4,
+.card-cta h5 {
+    color: var(--text-color);
+    font-weight: 900 !important;
+    margin-bottom: var(--spacing-1) !important;
+}
+
+.card-cta p {
+    color: var(--muted-color);
+    font-size: 0.9rem;
+    margin: 0 !important;
+}
+
+@media print {
+    .card,
+    .card-cta {
+        box-shadow: none;
+    }
+}

frontend/src/styles/components/_code.css

@@ -0,0 +1,357 @@
+/* ============================================================================ */
+/* Inline code */
+/* ============================================================================ */
+code {
+  font-size: 14px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  border-radius: 0.3em;
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+p code,
+.note code {
+  white-space: nowrap;
+  padding: calc(var(--spacing-1)/3) calc(var(--spacing-1)/2);
+}
+
+
+/* ============================================================================ */
+/* Shiki code blocks */
+/* ============================================================================ */
+.astro-code {
+  position: relative;
+  border: 1px solid var(--border-color);
+  background-color: var(--surface-bg) !important;
+  border-radius: 6px;
+  padding: 0;
+  font-size: 14px;
+  --code-gutter-width: 2.5em;
+}
+
+/* Shared sizing & horizontal scroll for code containers */
+.astro-code,
+section.content-grid pre {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  -webkit-overflow-scrolling: touch;
+  padding: 0;
+  margin-bottom: var(--block-spacing-y) !important;
+  overflow-x: auto;
+}
+
+section.content-grid pre.astro-code {
+  margin: 0;
+  padding: var(--spacing-1) 0;
+}
+
+section.content-grid pre code {
+  display: inline-block;
+  min-width: 100%;
+}
+
+/* Plain-text blocks: always wrap lines (prompts, prose, etc.) */
+.astro-code[data-language="text"] {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.astro-code[data-language="text"] .line {
+  display: block;
+}
+
+/* Wrap long lines only on small screens to prevent layout overflow */
+@media (--bp-content-collapse) {
+
+  .astro-code,
+  section.content-grid pre {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  section.content-grid pre code {
+    white-space: pre-wrap;
+    display: block;
+    min-width: 0;
+  }
+}
+
+/* Themes */
+[data-theme='light'] .astro-code {
+  background-color: var(--code-bg);
+}
+
+/* Apply token color from per-span vars exposed by Shiki dual themes */
+[data-theme='light'] .astro-code span {
+  color: var(--shiki-light) !important;
+}
+
+[data-theme='dark'] .astro-code span {
+  color: var(--shiki-dark) !important;
+}
+
+/* Optional: boost contrast for light theme */
+[data-theme='light'] .astro-code {
+  --shiki-foreground: #24292f;
+  --shiki-background: #ffffff;
+}
+
+/* Line numbers for Shiki-rendered code blocks */
+.astro-code code {
+  counter-reset: astro-code-line;
+  display: block;
+  background: none;
+  border: none;
+}
+
+.astro-code .line {
+  display: inline-block;
+  position: relative;
+  padding-left: calc(var(--code-gutter-width) + var(--spacing-1));
+  min-height: 1.25em;
+}
+
+.astro-code .line::before {
+  counter-increment: astro-code-line;
+  content: counter(astro-code-line);
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: calc(var(--code-gutter-width));
+  text-align: right;
+  color: var(--muted-color);
+  opacity: .3;
+  user-select: none;
+  padding-right: var(--spacing-2);
+  border-right: 1px solid var(--border-color);
+}
+
+.astro-code .line:empty::after {
+  content: "\00a0";
+}
+
+/* Hide trailing empty line added by parsers */
+.astro-code code>.line:last-child:empty {
+  display: none;
+}
+
+/* ============================================================================ */
+/* Non-Shiki pre wrapper (rehype) */
+/* ============================================================================ */
+.code-card {
+  position: relative;
+}
+
+.code-card .code-copy {
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  z-index: 3;
+  display: none;
+}
+
+.code-card:hover .code-copy {
+  display: block;
+}
+
+.code-card .code-copy svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+  fill: currentColor;
+}
+
+.code-card pre {
+  margin: 0 0 var(--spacing-1);
+}
+
+/* When no copy button (single-line), keep the label in the top-right corner */
+.code-card.no-copy::after {
+  top: 8px;
+  right: 8px;
+}
+
+/* ============================================================================ */
+/* Contextual overrides */
+/* ============================================================================ */
+/* Inside Accordions: remove padding and border on code containers */
+.accordion .astro-code {
+  padding: 0;
+  border: none;
+}
+
+.accordion .astro-code {
+  margin-bottom: 0 !important;
+}
+
+.accordion .code-output {
+  border: none;
+  border-top: 1px solid var(--border-color) !important;
+}
+
+.accordion pre {
+  margin-bottom: 0 !important;
+}
+
+.accordion .code-card pre {
+  margin: 0 !important;
+}
+
+/* ============================================================================ */
+/* Language/extension vignette (bottom-right, discreet) */
+/* ============================================================================ */
+/* .astro-code::after {
+  content: attr(data-language);
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  font-size: 10px;
+  line-height: 1;
+  text-transform: uppercase;
+  color: var(--muted-color);
+  background: var(--surface-bg);
+  border-top: 1px solid var(--border-color);
+  border-left: 1px solid var(--border-color);
+  opacity: 1;
+  border-radius: 8px 0 0 0; 
+  padding: 4px 6px;
+  pointer-events: none;
+} */
+
+/* Fallback if Shiki uses data-lang instead of data-language */
+/* .astro-code[data-lang]::after { content: attr(data-lang); }
+.astro-code[data-language="typescript"]::after { content: "ts"; }
+.astro-code[data-language="tsx"]::after { content: "tsx"; }
+.astro-code[data-language="javascript"]::after,
+.astro-code[data-language="node"]::after,
+.astro-code[data-language="jsx"]::after { content: "js"; }
+.astro-code[data-language="python"]::after { content: "py"; }
+.astro-code[data-language="bash"]::after,
+.astro-code[data-language="shell"]::after,
+.astro-code[data-language="sh"]::after { content: "sh"; }
+.astro-code[data-language="markdown"]::after { content: "md"; }
+.astro-code[data-language="yaml"]::after,
+.astro-code[data-language="yml"]::after { content: "yml"; }
+.astro-code[data-language="html"]::after { content: "html"; }
+.astro-code[data-language="css"]::after { content: "css"; }
+.astro-code[data-language="json"]::after { content: "json"; } */
+
+/* In Accordions, keep same bottom-right placement */
+.accordion .astro-code::after {
+  right: 0;
+  bottom: 0;
+}
+
+/* ============================================================================ */
+/* Results blocks glued to code blocks */
+/* ============================================================================ */
+.code-output {
+  position: relative;
+  background: oklch(from var(--code-bg) calc(l - 0.005) c h);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  margin-top: 0;
+  margin-bottom: var(--block-spacing-y);
+  padding: 0 !important;
+}
+
+.code-output pre {
+  padding: calc(var(--spacing-3) + 6px) var(--spacing-3) var(--spacing-3) var(--spacing-3) !important;
+}
+
+/* If immediately following a code container, keep tight visual connection */
+.code-card+.code-output,
+.astro-code+.code-output,
+section.content-grid pre+.code-output {
+  margin-top: 0;
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  box-shadow: inset 0 8px 12px -12px rgba(0, 0, 0, 0.15);
+}
+
+/* Remove bottom margin on code when immediately followed by results */
+.astro-code:has(+ .code-output) {
+  margin-bottom: 0 !important;
+}
+
+.code-card:has(+ .code-output) .astro-code {
+  margin-bottom: 0 !important;
+}
+
+section.content-grid pre:has(+ .code-output) {
+  margin-bottom: 0 !important;
+}
+
+/* Remove bottom border radius on code when followed by results */
+.astro-code:has(+ .code-output) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.code-card:has(+ .code-output) .astro-code {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+section.content-grid pre:has(+ .code-output) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Small top-left label */
+.code-output::before {
+  content: "Output";
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--muted-color);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  border-top: none;
+  border-right: none;
+  border-radius: 0 0 0 6px;
+  padding: 10px 10px;
+}
+
+/* Very subtle top shadow so results feels under the code */
+.code-output {}
+
+.code-output> :where(*):first-child {
+  margin-top: 0 !important;
+}
+
+.code-output> :where(*):last-child {
+  margin-bottom: 0 !important;
+}
+
+/* ============================================================================ */
+/* Optional filename tag above code blocks */
+/* ============================================================================ */
+.code-filename {
+  display: inline-block;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--muted-color);
+  background: var(--surface-bg);
+  border: 1px solid var(--border-color);
+  border-bottom: none;
+  border-radius: 6px 6px 0 0;
+  padding: 4px 8px;
+  margin: 0;
+}
+
+.code-filename+.code-card .astro-code,
+.code-filename+.astro-code,
+.code-filename+section.content-grid pre {
+  border-top-left-radius: 0;
+  border-top-right-radius: 6px;
+}

frontend/src/styles/components/_form.css

@@ -0,0 +1,243 @@
+/* ============================================================================ */
+/* Form Elements - Modern Minimal Design */
+/* ============================================================================ */
+
+/* Select styling with modern chevron */
+select {
+  background-color: var(--page-bg);
+  border: 1px solid color-mix(in srgb, var(--primary-color) 50%, var(--border-color));
+  border-radius: var(--button-radius);
+  padding: var(--button-padding-y) calc(var(--button-padding-x)*2) var(--button-padding-y) var(--button-padding-x);
+  font-family: var(--default-font-family);
+  font-size: var(--button-font-size);
+  color: var(--text-color);
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8.825L1.175 4 2.35 2.825 6 6.475 9.65 2.825 10.825 4z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right calc(var(--button-padding-x) + 2px) center;
+  background-size: 12px;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+select:hover,
+select:focus,
+select:active {
+  border-color: var(--primary-color);
+}
+
+select:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(from var(--primary-color) r g b / 0.1);
+}
+
+select:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--surface-bg);
+}
+
+/* Dark theme select chevron */
+[data-theme="dark"] select {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23bbb' d='M6 8.825L1.175 4 2.35 2.825 6 6.475 9.65 2.825 10.825 4z'/%3E%3C/svg%3E");
+}
+
+/* Checkbox styling */
+input[type="checkbox"] {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border-color);
+  border-radius: 3px;
+  background-color: var(--page-bg);
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+  margin-right: var(--spacing-2);
+}
+
+input[type="checkbox"]:hover {
+  border-color: var(--primary-color);
+}
+
+input[type="checkbox"]:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(from var(--primary-color) r g b / 0.1);
+}
+
+input[type="checkbox"]:checked {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+input[type="checkbox"]:checked::before {
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 4px;
+  width: 4px;
+  height: 8px;
+  border: solid var(--on-primary);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+input[type="checkbox"]:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Radio button styling */
+input[type="radio"] {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border-color);
+  border-radius: 50%;
+  background-color: var(--page-bg);
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+  margin-right: var(--spacing-2);
+}
+
+input[type="radio"]:hover {
+  border-color: var(--primary-color);
+}
+
+input[type="radio"]:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(from var(--primary-color) r g b / 0.1);
+}
+
+input[type="radio"]:checked {
+  border-color: var(--primary-color);
+}
+
+input[type="radio"]:checked::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--primary-color);
+}
+
+input[type="radio"]:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Input text styling for consistency */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="url"],
+input[type="search"],
+textarea {
+  appearance: none;
+  background-color: var(--page-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--button-radius);
+  padding: var(--button-padding-y) var(--button-padding-x);
+  font-family: var(--default-font-family);
+  font-size: var(--button-font-size);
+  color: var(--text-color);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  width: 100%;
+}
+
+input[type="text"]:hover,
+input[type="email"]:hover,
+input[type="password"]:hover,
+input[type="number"]:hover,
+input[type="url"]:hover,
+input[type="search"]:hover,
+textarea:hover {
+  border-color: var(--primary-color);
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="number"]:focus,
+input[type="url"]:focus,
+input[type="search"]:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(from var(--primary-color) r g b / 0.1);
+}
+
+input[type="text"]:disabled,
+input[type="email"]:disabled,
+input[type="password"]:disabled,
+input[type="number"]:disabled,
+input[type="url"]:disabled,
+input[type="search"]:disabled,
+textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--surface-bg);
+}
+
+/* Label styling */
+label {
+  display: flex;
+  align-items: center;
+  font-size: var(--button-font-size);
+  color: var(--text-color);
+  cursor: pointer;
+  margin-bottom: 0;
+  line-height: 1.4;
+  user-select: none;
+}
+
+/* Form group spacing */
+.form-group {
+  margin-bottom: var(--spacing-4);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.form-group label {
+  margin-bottom: 0;
+}
+
+/* Alternative: for vertical form groups */
+.form-group.vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.form-group.vertical label {
+  margin-bottom: var(--spacing-1);
+}
+
+/* For inline form elements */
+.form-inline {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-bottom: var(--spacing-3);
+}
+
+.form-inline label {
+  margin-bottom: 0;
+}
+
+/* Ensure labels in flex containers don't break alignment */
+div[style*="display: flex"] label,
+div[class*="flex"] label {
+  margin-bottom: 0 !important;
+  align-self: center;
+}

frontend/src/styles/components/_hero.css

@@ -0,0 +1,136 @@
+/* ============================================================================ */
+/* Hero + Meta bar                                                             */
+/* Extracted from HeroArticle.astro scoped styles.                             */
+/* Shared between editor (FrontmatterHero.tsx) and publisher (html-renderer).  */
+/* ============================================================================ */
+
+/* ---- Hero section ---- */
+
+.hero {
+  width: 100%;
+  padding: 64px 16px 16px;
+  text-align: center;
+}
+
+.hero-title {
+  font-size: clamp(34px, 5vw, 54px);
+  font-weight: 800;
+  line-height: 1.12;
+  letter-spacing: -0.02em;
+  margin: 0 auto 8px;
+  max-width: 780px;
+  text-wrap: balance;
+}
+
+.hero-title[data-title-size="md"] {
+  font-size: clamp(28px, 4vw, 44px);
+}
+
+.hero-title[data-title-size="sm"] {
+  font-size: clamp(24px, 3.2vw, 38px);
+}
+
+.hero-banner {
+  max-width: 980px;
+  margin: 0 auto;
+  aspect-ratio: 5 / 2;
+  overflow: hidden;
+}
+
+.hero-desc {
+  color: var(--muted-color);
+  font-style: italic;
+  margin: 0 auto 16px;
+  max-width: 55%;
+}
+
+@media (max-width: 768px) {
+  .hero-banner { aspect-ratio: auto; }
+  .hero-desc { max-width: 90%; }
+}
+
+/* ---- Meta bar ---- */
+
+.meta {
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  padding: 1rem 0;
+  font-size: 0.9rem;
+}
+
+.meta-container {
+  max-width: 980px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 0 auto;
+  padding: 0 var(--content-padding-x, 16px);
+  gap: 8px;
+  flex-wrap: wrap;
+  row-gap: 12px;
+}
+
+.meta-container a:not(.button) {
+  color: var(--primary-color);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 0.06em;
+  text-decoration-color: var(--link-underline);
+  transition: text-decoration-color 0.15s ease-in-out;
+}
+
+.meta-container a:hover {
+  text-decoration-color: var(--link-underline-hover);
+}
+
+.meta-container-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 400px;
+}
+
+.meta-container-cell h3 {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--muted-color);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.meta-container-cell p {
+  margin: 0;
+}
+
+.authors {
+  margin: 0;
+  list-style-type: none;
+  padding-left: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.authors li {
+  white-space: nowrap;
+  padding: 0;
+}
+
+.affiliations {
+  margin: 0;
+  padding-left: 1.25em;
+}
+
+.affiliations li {
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .meta-container-cell:nth-child(even) { text-align: right; }
+  .meta-container-cell:last-child:nth-child(odd) {
+    flex-grow: 0;
+    flex-basis: auto;
+    margin-left: auto;
+    text-align: right;
+  }
+}

frontend/src/styles/components/_mermaid.css

@@ -0,0 +1,250 @@
+.mermaid .nodeLabel p {
+    color: var(--text-color) !important;
+}
+
+.mermaid .cluster-label .nodeLabel {
+    color: var(--text-color) !important;
+}
+
+/* Styles pour le texte des subgraphs/clusters - gérer les foreignObject */
+.mermaid .cluster-label text,
+.mermaid .cluster-label .nodeLabel text,
+.mermaid .cluster-label foreignObject,
+.mermaid .cluster-label foreignObject div,
+.mermaid .cluster-label foreignObject span {
+    color: var(--text-color) !important;
+    fill: var(--text-color) !important;
+}
+
+/* Styles spécifiques pour les clusters/subgraphs */
+.mermaid .cluster rect {
+    fill: transparent !important;
+    stroke: var(--border-color) !important;
+    stroke-width: 1px !important;
+}
+
+.mermaid .cluster-label {
+    color: var(--text-color) !important;
+    fill: var(--text-color) !important;
+}
+
+/* Masquer le flicker pendant la conversion */
+.mermaid-zoom-wrapper.converting {
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+}
+
+.mermaid-zoom-wrapper.converting .mermaid {
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+}
+
+/* Assurer que les diagrammes Mermaid prennent toute la largeur */
+.mermaid {
+    width: 100% !important;
+    max-width: 100% !important;
+    display: block !important;
+}
+
+/* Styles pour les SVG Mermaid */
+.mermaid svg {
+    width: 100% !important;
+    max-width: 100% !important;
+    height: auto !important;
+}
+
+/* Styles pour les wrappers de zoom Mermaid */
+.mermaid-zoom-wrapper {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    cursor: zoom-in;
+    position: relative;
+}
+
+.mermaid-zoom-wrapper .mermaid {
+    width: 100% !important;
+    max-width: 100% !important;
+    display: block !important;
+}
+
+.mermaid-zoom-wrapper .mermaid svg {
+    width: 100% !important;
+    max-width: 100% !important;
+    height: auto !important;
+    display: block !important;
+}
+
+/* Styles pour les nœuds avec bords arrondis et bordure interne */
+.mermaid rect:not(.flowchart-link),
+.mermaid .node rect,
+.mermaid .nodeLabel rect,
+.mermaid .cluster rect {
+    rx: 8px !important;
+    ry: 8px !important;
+    stroke: color-mix(in srgb, var(--text-color) 20%, transparent) !important;
+    stroke-width: 1px !important;
+    /* Décalage pour créer l'effet de bordure interne */
+}
+
+/* Styles pour les diagrammes Mermaid zoomables */
+.mermaid-zoom-wrapper:hover {
+    opacity: 0.95;
+    transition: opacity 0.2s ease;
+}
+
+/* Appliquer le même style que les images zoomables */
+.mermaid-zoom-wrapper[data-zoomable="1"] {
+    cursor: zoom-in;
+}
+
+/* Styles pour le mode zoom ouvert */
+.medium-zoom--opened .mermaid-zoom-wrapper {
+    cursor: zoom-out;
+}
+
+/* Exclure les images Mermaid du filtre d'inversion en mode sombre */
+/* Le filtre global s'applique à .medium-zoom-image--opened */
+/* Nous devons être plus spécifique pour les images Mermaid */
+
+/* Exception pour les images Mermaid - pas de filtre d'inversion */
+:global([data-theme="dark"]) .mermaid-zoom-wrapper img:global(.medium-zoom-image--opened) {
+    filter: none !important;
+}
+
+/* Alternative: cibler directement l'image dans le wrapper Mermaid */
+:global([data-theme="dark"]) .mermaid-zoom-wrapper :global(.medium-zoom-image--opened) {
+    filter: none !important;
+}
+
+/* Encore plus spécifique: cibler l'image générée par notre script */
+:global([data-theme="dark"]) .mermaid-zoom-wrapper img[data-zoomable="1"]:global(.medium-zoom-image--opened) {
+    filter: none !important;
+}
+
+/* Forcer un z-index très élevé pour medium-zoom (au-dessus de tout) */
+:global(.medium-zoom-overlay) {
+    z-index: 9999999 !important;
+}
+
+:global(.medium-zoom-image--opened) {
+    z-index: 10000000 !important;
+}
+
+/* Cibler la classe spécifique mermaid-zoom-image */
+:global([data-theme="dark"]) .mermaid-zoom-image:global(.medium-zoom-image--opened) {
+    filter: none !important;
+}
+
+/* Overlay medium-zoom avec z-index très élevé pour Mermaid */
+:global(.medium-zoom-overlay):has(.mermaid-zoom-wrapper) {
+    z-index: 9999999 !important;
+}
+
+/* Z-index très élevé pour les images Mermaid */
+:global(.mermaid-zoom-image):global(.medium-zoom-image--opened) {
+    z-index: 10000000 !important;
+}
+
+:global(.mermaid-zoom-wrapper):has(:global(.medium-zoom-image--opened)) {
+    z-index: 10000000 !important;
+}
+
+/* Masquer les autres diagrammes quand un est zoomé */
+:global(.medium-zoom--opened) .mermaid-zoom-wrapper {
+    opacity: 0;
+    z-index: calc(var(--z-base) - 1);
+    transition: opacity 0.3s ease;
+}
+
+/* Le diagramme zoomé reste visible */
+:global(.medium-zoom--opened) .mermaid-zoom-wrapper:has(.medium-zoom--opened) {
+    opacity: 1;
+    z-index: var(--z-overlay);
+}
+
+/* Fallback pour les navigateurs sans support :has() */
+:global(.medium-zoom--opened) .mermaid-zoom-wrapper.zoom-active {
+    opacity: 1 !important;
+    z-index: var(--z-overlay) !important;
+}
+
+/* Styles spécifiques pour différents types de diagrammes */
+
+/* Flowchart/Graph - styles généraux */
+.mermaid .node rect,
+.mermaid .node circle,
+.mermaid .node ellipse,
+.mermaid .label rect {
+    rx: 8px !important;
+    ry: 8px !important;
+}
+
+/* Flowchart - nœuds principaux */
+.mermaid .flowchart-node rect,
+.mermaid .flowchart-label rect {
+    rx: 8px !important;
+    ry: 8px !important;
+}
+
+/* Sequence diagram */
+.mermaid .actor rect,
+.mermaid .participant rect {
+    rx: 8px !important;
+    ry: 8px !important;
+}
+
+/* ER diagram */
+.mermaid .entityBox rect,
+.mermaid .er .entityBox rect {
+    rx: 6px !important;
+    ry: 6px !important;
+}
+
+/* Gantt chart */
+.mermaid .section0 rect,
+.mermaid .section1 rect,
+.mermaid .section2 rect,
+.mermaid .section3 rect {
+    rx: 4px !important;
+    ry: 4px !important;
+}
+
+/* Gitgraph */
+.mermaid .commit rect {
+    rx: 12px !important;
+    ry: 12px !important;
+}
+
+/* Mindmap */
+.mermaid .mindmap-node rect {
+    rx: 10px !important;
+    ry: 10px !important;
+}
+
+/* Sankey */
+.mermaid .sankey .node rect {
+    rx: 4px !important;
+    ry: 4px !important;
+}
+
+/* Timeline */
+.mermaid .timeline rect {
+    rx: 6px !important;
+    ry: 6px !important;
+}
+
+/* Pie chart */
+.mermaid .pieTitleText {
+    rx: 8px !important;
+    ry: 8px !important;
+}
+
+/* Journey */
+.mermaid .journey .section0 rect,
+.mermaid .journey .section1 rect,
+.mermaid .journey .section2 rect,
+.mermaid .journey .section3 rect {
+    rx: 8px !important;
+    ry: 8px !important;
+}

frontend/src/styles/components/_table.css

@@ -0,0 +1,121 @@
+.content-grid main table {
+  border-collapse: collapse;
+  table-layout: auto;
+  margin: 0;
+  background-color: var(--surface-bg);
+}
+
+.content-grid main th,
+.content-grid main td {
+  border-bottom: 1px solid var(--border-color);
+  padding: 6px 8px;
+  font-size: 15px;
+  white-space: nowrap;
+  /* prevent squashing; allow horizontal scroll instead */
+  word-break: auto-phrase;
+  /* white-space: break-spaces; */
+  vertical-align: top;
+}
+
+.content-grid main thead th {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.content-grid main thead th {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.content-grid main thead th {
+  background: var(--table-header-bg);
+  padding-top: 10px;
+  padding-bottom: 10px;
+  font-weight: 600;
+}
+
+.content-grid main hr {
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  margin: var(--spacing-5) 0;
+}
+
+/* Scroll wrapper: keeps table 100% width but enables horizontal scroll when needed */
+.content-grid main .table-scroll {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border: 1px solid var(--border-color);
+  border-radius: var(--table-border-radius);
+  background: var(--surface-bg);
+  margin: 0 0 var(--block-spacing-y);
+}
+
+.content-grid main .table-scroll>table {
+  width: fit-content;
+  min-width: 100%;
+  max-width: none;
+}
+
+/* Vertical dividers between columns (no outer right border) */
+.content-grid main .table-scroll>table th,
+.content-grid main .table-scroll>table td {
+  border-right: 1px solid var(--border-color);
+}
+
+.content-grid main .table-scroll>table th:last-child,
+.content-grid main .table-scroll>table td:last-child {
+  border-right: none;
+}
+
+.content-grid main .table-scroll>table thead th:first-child {
+  border-top-left-radius: var(--table-border-radius);
+}
+
+.content-grid main .table-scroll>table thead th:last-child {
+  border-top-right-radius: var(--table-border-radius);
+}
+
+.content-grid main .table-scroll>table tbody tr:last-child td:first-child {
+  border-bottom-left-radius: var(--table-border-radius);
+}
+
+.content-grid main .table-scroll>table tbody tr:last-child td:last-child {
+  border-bottom-right-radius: var(--table-border-radius);
+}
+
+/* Zebra striping for odd rows */
+.content-grid main .table-scroll>table tbody tr:nth-child(odd) td {
+  background: var(--table-row-odd-bg);
+}
+
+/* Remove bottom border on last row */
+.content-grid main .table-scroll>table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Accordion context: remove outer borders/radius and fit content flush */
+.accordion .accordion__content .table-scroll {
+  border: none;
+  border-radius: 0;
+  margin: 0;
+  margin-bottom: 0 !important;
+}
+
+/* Ensure no bottom margin even if table isn't wrapped (fallback) */
+.accordion .accordion__content table {
+  margin: 0 !important;
+}
+
+.accordion .accordion__content .table-scroll>table thead th:first-child,
+.accordion .accordion__content .table-scroll>table thead th:last-child,
+.accordion .accordion__content .table-scroll>table tbody tr:last-child td:first-child,
+.accordion .accordion__content .table-scroll>table tbody tr:last-child td:last-child {
+  border-radius: 0;
+}
+
+/* Fallback for browsers without fit-content support */
+@supports not (width: fit-content) {
+  .content-grid main .table-scroll>table {
+    width: max-content;
+    min-width: 100%;
+  }
+}

frontend/src/styles/components/_tag.css

@@ -0,0 +1,14 @@
+.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 1;
+  border-radius: var(--button-radius);
+  background: var(--surface-bg);
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+}

frontend/src/styles/components/_toc.css

@@ -0,0 +1,55 @@
+/* ============================================================================ */
+/* Table of Contents                                                           */
+/* Extracted from TableOfContents.astro scoped styles.                         */
+/* Shared between editor and publisher.                                        */
+/* ============================================================================ */
+
+.table-of-contents {
+  position: sticky;
+  top: 32px;
+  margin-top: 12px;
+}
+
+.table-of-contents nav {
+  border-left: 1px solid var(--border-color);
+  padding-left: 16px;
+  font-size: 13px;
+}
+
+.table-of-contents .title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.table-of-contents nav ul {
+  margin: 0 0 6px;
+  padding-left: 1em;
+}
+
+.table-of-contents nav li {
+  list-style: none;
+  margin: 0.25em 0;
+}
+
+.table-of-contents nav a,
+.table-of-contents nav a:link,
+.table-of-contents nav a:visited {
+  color: var(--text-color);
+  text-decoration: none;
+  border-bottom: none;
+  background: none;
+  cursor: pointer;
+}
+
+.table-of-contents nav > ul > li > a {
+  font-weight: 700;
+}
+
+.table-of-contents nav a:hover {
+  text-decoration: underline solid var(--muted-color);
+}
+
+.table-of-contents nav a.active {
+  text-decoration: underline;
+}

frontend/src/styles/editing.css

@@ -6,6 +6,43 @@
    block handles, slash menu, upload UI, panels, etc.
    ----------------------------------------------------------------------- */
 
+/* ---- Editor grid overrides ---- */
+/* The template _layout.css defines .content-grid for the published
+   3-column layout (260px toc | 680px article | 260px).
+   The editor uses a different column ratio for the editing UI. */
+
+.editor-app .content-grid {
+  grid-template-columns: 200px 1fr 240px;
+  grid-template-rows: auto 1fr;
+  max-width: none;
+  margin-top: 0;
+  padding: 0;
+  gap: 0;
+}
+
+.content-grid__hero {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.content-grid__toc {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.content-grid__editor {
+  grid-column: 2;
+  grid-row: 2;
+  padding-top: 24px;
+  padding-bottom: 32px;
+}
+
+.content-grid__comments {
+  grid-column: 3;
+  grid-row: 2;
+  padding: 16px 0 16px 16px;
+}
+
 /* Math editing */
 .tiptap [data-type="inline-math"] {
   cursor: pointer;
@@ -19,7 +56,7 @@
   font-family: "SFMono-Regular", "Fira Code", monospace;
   font-size: 0.85em;
   color: var(--code-text);
-  background: var(--bg-code);
+  background: var(--code-bg);
   padding: 0.1em 0.4em;
   border-radius: 3px;
   outline: none;
@@ -60,7 +97,7 @@
 
 .comment-mark.resolved {
   background: transparent;
-  border-bottom: 1px dashed var(--border);
+  border-bottom: 1px dashed var(--border-color);
 }
 
 /* Collaboration cursors */
@@ -99,7 +136,7 @@
 
 /* Image upload card */
 .image-upload-card {
-  border: 2px dashed var(--border);
+  border: 2px dashed var(--border-color);
   border-radius: 12px;
   padding: 2.5rem 1.5rem;
   margin: 1em 0;
@@ -112,7 +149,7 @@
 }
 
 .image-upload-card:hover {
-  border-color: var(--text-tertiary);
+  border-color: var(--muted-color);
   background: var(--bg-hover);
 }
 
@@ -151,13 +188,13 @@
 }
 
 .image-upload-btn.secondary {
-  background: var(--bg-code);
-  color: var(--text-secondary);
+  background: var(--code-bg);
+  color: var(--muted-color);
 }
 
 .image-upload-btn.secondary:hover {
-  background: var(--bg-code);
-  color: var(--text-primary);
+  background: var(--code-bg);
+  color: var(--text-color);
 }
 
 .image-upload-card-hint {
@@ -178,10 +215,10 @@
 .image-upload-url-input {
   width: 100%;
   padding: 0.5rem 0.75rem;
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-color);
   border-radius: 6px;
-  background: var(--bg-code);
-  color: var(--text-primary);
+  background: var(--code-bg);
+  color: var(--text-color);
   font-size: 0.8125rem;
   font-family: inherit;
   outline: none;
@@ -235,8 +272,8 @@
 }
 
 .block-handle-btn:hover {
-  color: var(--text-secondary);
-  background: var(--bg-code);
+  color: var(--muted-color);
+  background: var(--code-bg);
 }
 
 .block-handle-grip {
@@ -250,7 +287,7 @@
 /* Slash menu */
 .slash-menu {
   background: var(--bg-surface);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-color);
   border-radius: 10px;
   padding: 0.35rem;
   min-width: 220px;
@@ -270,14 +307,14 @@
   background: none;
   width: 100%;
   text-align: left;
-  color: var(--text-primary);
+  color: var(--text-color);
   font-size: 0.875rem;
   font-family: inherit;
 }
 
 .slash-menu-item:hover,
 .slash-menu-item.is-selected {
-  background: var(--bg-code);
+  background: var(--code-bg);
 }
 
 .slash-menu-item-icon {
@@ -287,8 +324,8 @@
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  background: var(--bg-code);
-  color: var(--text-secondary);
+  background: var(--code-bg);
+  color: var(--muted-color);
   font-size: 0.9rem;
   flex-shrink: 0;
 }
@@ -300,22 +337,22 @@
 
 .slash-menu-item-title {
   font-weight: 500;
-  color: var(--text-primary);
+  color: var(--text-color);
   font-size: 0.875rem;
 }
 
 .slash-menu-item-desc {
   font-size: 0.75rem;
-  color: var(--text-tertiary);
+  color: var(--muted-color);
 }
 
 /* Footnote editing controls */
 .footnote-tooltip-input {
   width: 100%;
-  background: var(--bg-code);
-  border: 1px solid var(--border);
+  background: var(--code-bg);
+  border: 1px solid var(--border-color);
   border-radius: 4px;
-  color: var(--text-primary);
+  color: var(--text-color);
   font-size: 12px;
   padding: 6px 8px;
   resize: vertical;
@@ -369,7 +406,7 @@
 
 .citation-panel {
   background: var(--bg-surface);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-color);
   border-radius: 12px;
   width: 480px;
   max-height: 80vh;
@@ -397,7 +434,7 @@
 .citation-panel-close {
   background: none;
   border: none;
-  color: var(--text-tertiary);
+  color: var(--muted-color);
   font-size: 1.4rem;
   cursor: pointer;
   padding: 0;
@@ -405,7 +442,7 @@
 }
 
 .citation-panel-close:hover {
-  color: var(--text-primary);
+  color: var(--text-color);
 }
 
 .citation-panel-body {
@@ -419,10 +456,10 @@
 .citation-input {
   width: 100%;
   padding: 0.55rem 0.75rem;
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-color);
   border-radius: 6px;
-  background: var(--bg-code);
-  color: var(--text-primary);
+  background: var(--code-bg);
+  color: var(--text-color);
   font-size: 0.8125rem;
   font-family: inherit;
   outline: none;
@@ -504,7 +541,7 @@
 }
 
 .citation-library-item:hover {
-  background: var(--bg-code);
+  background: var(--code-bg);
 }
 
 .citation-library-info {
@@ -516,13 +553,13 @@
 }
 
 .citation-library-meta {
-  color: var(--text-secondary);
+  color: var(--muted-color);
   font-size: 0.75rem;
   font-weight: 500;
 }
 
 .citation-library-title {
-  color: var(--text-tertiary);
+  color: var(--muted-color);
   font-size: 0.75rem;
   white-space: nowrap;
   overflow: hidden;
@@ -554,3 +591,37 @@
 .citation-library-insert:hover {
   background: var(--accent-bg-hover);
 }
+
+/* ---- Hero editable elements ---- */
+
+.editable-text {
+  border-radius: 4px;
+  transition: background 0.15s;
+  padding: 2px 4px;
+}
+
+/* Negative margin to visually align padding - but NOT on elements
+   that rely on margin: auto for centering (e.g. .hero-desc). */
+.editable-text:not(.hero-desc):not(.hero-title) {
+  margin: -2px -4px;
+}
+
+.editable-text:hover {
+  background: var(--bg-hover);
+}
+
+.author-editable {
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.15s;
+}
+
+.author-editable:hover {
+  background: var(--bg-hover);
+}
+
+.author-add-btn {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 4px;
+}

frontend/src/styles/toc.css

@@ -0,0 +1,52 @@
+/* -----------------------------------------------------------------------
+   Table of contents - Editor overrides
+   
+   Base styles are in components/_toc.css (from template).
+   This file adds editor-specific adjustments (smaller TOC column,
+   tighter padding, collapse animation).
+   ----------------------------------------------------------------------- */
+
+/* The template's _layout.css sets align-items:start on .content-grid,
+   which prevents grid cells from stretching. The TOC cell MUST stretch
+   to full row height so the sticky child has room to travel. */
+.content-grid__toc {
+  align-self: stretch;
+}
+
+.content-grid__toc .table-of-contents--sticky {
+  position: sticky;
+  top: 0;
+}
+
+/* Override the template's own sticky (handled by --sticky wrapper instead) */
+.content-grid__toc .table-of-contents {
+  position: static;
+  margin-top: 0;
+  padding: 24px 8px 0;
+}
+
+.content-grid__toc .table-of-contents .title {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Collapse animation for React-driven expand/collapse */
+.toc-children {
+  overflow: hidden;
+  transition: max-height 200ms ease, opacity 200ms ease;
+}
+
+/* Ensure TOC empty message inherits article font */
+.toc-empty {
+  font-size: 12px;
+  color: var(--muted-color);
+  padding-top: 4px;
+}
+
+/* TOC title label */
+.toc-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 8px;
+}

frontend/src/theme.ts

@@ -1,36 +1,47 @@
 import { createTheme } from "@mui/material/styles";
 
-export const theme = createTheme({
-  palette: {
-    mode: "dark",
-    background: {
-      default: "#0f0f0f",
-      paper: "#1a1a1a",
+/**
+ * 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",
     },
-    primary: {
-      main: "#958DF1",
+    typography: {
+      fontFamily:
+        '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     },
-    text: {
-      primary: "#e0e0e0",
-      secondary: "#888",
+    shape: {
+      borderRadius: 8,
     },
-    divider: "#2a2a2a",
-  },
-  typography: {
-    fontFamily:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  },
-  shape: {
-    borderRadius: 8,
-  },
-  components: {
-    MuiIconButton: {
-      styleOverrides: {
-        root: {
-          borderRadius: 6,
-          padding: 6,
+    components: {
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            borderRadius: 6,
+            padding: 6,
+          },
         },
       },
     },
-  },
-});
+  });
+}
+
+export const DEFAULT_HUE = 47;
+export const DEFAULT_PRIMARY = "#c87533";
+
+export const theme = buildTheme(DEFAULT_PRIMARY);