refactor: rename to Science Article Template Editor, remove MDX export, fix settings drawer

- Rename project from "Collab Editor" to "Science Article Template Editor"
across README, package.json, HTML titles, and docs
- Remove MDX export: delete to-mdx.ts, serializers, UI button, and
registerComponentSerializers; use editor.getText() for agent context
- Settings drawer: flatten Advanced accordion, fix toggle clipping
(ml: 0), widen to 380px, use slotProps.paper (MUI v9)

Made-with: Cursor

README.md

@@ -1,5 +1,5 @@
 ---
-title: Collab Editor
+title: Science Article Template Editor
 emoji: ✏️
 colorFrom: purple
 colorTo: blue
@@ -11,9 +11,9 @@ hf_oauth_scopes:
   - manage-repos
 ---
 
-# Collab Editor
+# Science Article Template Editor
 
-Collaborative real-time article editor with MDX export. Built with TipTap, Yjs, and Hocuspocus.
+Collaborative real-time scientific article editor. Built with TipTap, Yjs, and Hocuspocus.
 
 ## Features
 

backend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "collab-editor-backend",
+  "name": "science-article-template-editor-backend",
   "version": "0.1.0",
   "private": true,
   "type": "module",

backend/src/publisher/html-renderer.ts

@@ -11,14 +11,23 @@ import { getServerExtensions } from "./extensions.js";
 export interface PublishAuthor {
   name: string;
   url?: string;
+  affiliationIndices: number[];
   affiliationNames: string[];
 }
 
+export interface PublishAffiliation {
+  name: string;
+  url?: string;
+}
+
 export interface PublishMeta {
   title: string;
+  subtitle?: string;
   description: string;
   authors: PublishAuthor[];
+  affiliations: PublishAffiliation[];
   date: string;
+  doi?: string;
   ogImage?: string;
 }
 
@@ -100,49 +109,112 @@ body {
   align-items: start;
 }
 
-.article-header {
-  margin-bottom: 2rem;
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid var(--border);
+/* Hero section */
+.article-hero {
+  width: 100%;
+  padding: 64px 16px 16px;
+  text-align: center;
 }
 
-.article-header h1 {
-  font-size: 2.5rem;
-  font-weight: 700;
-  color: var(--text-heading);
-  line-height: 1.2;
-  margin: 0 0 0.5rem;
+.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-header .authors {
-  color: var(--text-secondary);
-  font-size: 0.9375rem;
-  margin-bottom: 0.25rem;
+.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;
 }
 
-.article-header .author-link {
-  color: var(--accent-light);
-  text-decoration: none;
+/* Meta bar */
+.article-meta {
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  padding: 1rem 0;
+  font-size: 0.9rem;
 }
 
-.article-header .author-link:hover {
-  text-decoration: underline;
+.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-header .author-affiliation {
+.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);
-  font-size: 0.8125rem;
-  margin-left: 0.25rem;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
 }
 
-.article-header .author-affiliation::before { content: "("; }
-.article-header .author-affiliation::after  { content: ")"; }
+.article-meta .meta-cell p { margin: 0; }
 
-.article-header .date {
-  color: var(--text-tertiary);
-  font-size: 0.8125rem;
+.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 */
@@ -381,6 +453,15 @@ dialog.lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; bo
     <div class="toc-mobile-sidebar__body" id="toc-mobile-placeholder"></div>
   </aside>
 
+  <!-- Hero -->
+  <section class="article-hero">
+    <h1>${safeTitle}</h1>
+    ${meta.subtitle ? `<p class="hero-desc">${escapeHtml(meta.subtitle)}</p>` : ""}
+  </section>
+
+  <!-- Meta bar -->
+  ${renderMetaBar(meta)}
+
   <section class="content-grid">
     <nav class="table-of-contents" aria-label="Table of Contents">
       <div class="title">Table of Contents</div>
@@ -388,12 +469,6 @@ dialog.lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; bo
     </nav>
 
     <article>
-      <header class="article-header">
-        <h1>${safeTitle}</h1>
-        ${meta.authors.length > 0 ? `<div class="authors">${renderAuthors(meta.authors)}</div>` : ""}
-        ${meta.date ? `<p class="date">${escapeHtml(formatDate(meta.date))}</p>` : ""}
-      </header>
-
       <div class="tiptap">
         ${enrichedBody}
       </div>
@@ -719,16 +794,59 @@ function escapeHtml(str: string): string {
     .replace(/'/g, "&#039;");
 }
 
-function renderAuthors(authors: PublishAuthor[]): string {
-  return authors.map((a) => {
-    const name = a.url
-      ? `<a href="${escapeHtml(a.url)}" class="author-link" target="_blank" rel="noopener">${escapeHtml(a.name)}</a>`
-      : `<span class="author-name">${escapeHtml(a.name)}</span>`;
-    const affil = a.affiliationNames.length > 0
-      ? `<span class="author-affiliation">${escapeHtml(a.affiliationNames.join(", "))}</span>`
-      : "";
-    return `<span class="author">${name}${affil}</span>`;
-  }).join('<span class="author-sep">, </span>');
+function renderMetaBar(meta: PublishMeta): string {
+  const hasContent = meta.authors.length > 0 || meta.date || meta.doi;
+  if (!hasContent) return "";
+
+  const multipleAff = meta.affiliations.length > 1;
+  const cells: string[] = [];
+
+  // Authors cell
+  if (meta.authors.length > 0) {
+    const items = meta.authors.map((a, i) => {
+      const name = a.url
+        ? `<a href="${escapeHtml(a.url)}" class="author-link" target="_blank" rel="noopener">${escapeHtml(a.name)}</a>`
+        : escapeHtml(a.name);
+      const sup = multipleAff && a.affiliationIndices.length > 0
+        ? `<sup>${a.affiliationIndices.join(",")}</sup>`
+        : "";
+      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>`);
+  }
+
+  // Affiliations cell
+  if (meta.affiliations.length > 0) {
+    let affContent: string;
+    if (multipleAff) {
+      const items = meta.affiliations.map((aff) => {
+        const name = aff.url
+          ? `<a href="${escapeHtml(aff.url)}" target="_blank" rel="noopener">${escapeHtml(aff.name)}</a>`
+          : escapeHtml(aff.name);
+        return `<li>${name}</li>`;
+      }).join("");
+      affContent = `<ol class="affiliations-list">${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>`);
+  }
+
+  // Published cell
+  if (meta.date) {
+    cells.push(`<div class="meta-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>`);
+  }
+
+  return `<header class="article-meta"><div class="meta-container">${cells.join("")}</div></header>`;
 }
 
 function formatDate(dateStr: string): string {

backend/src/publisher/index.ts

@@ -152,18 +152,21 @@ export async function publishDocument(docName: string, token?: string): Promise<
   // Extract content
   const { json, frontmatter, authors, affiliations } = extractFromYDoc(ydoc);
 
-  // Build metadata - authors come from Y.Array, date from "published" scalar
   const meta: PublishMeta = {
     title: (frontmatter.title as string) || docName,
+    subtitle: (frontmatter.subtitle as string) || undefined,
     description: (frontmatter.description as string) || "",
     authors: authors.map((a) => ({
       name: a.name,
       url: a.url,
+      affiliationIndices: a.affiliations || [],
       affiliationNames: (a.affiliations || [])
         .map((idx) => affiliations[idx - 1]?.name)
         .filter(Boolean) as string[],
     })),
+    affiliations: affiliations.map((a) => ({ name: a.name, url: a.url })),
     date: (frontmatter.published as string) || (frontmatter.date as string) || new Date().toISOString(),
+    doi: (frontmatter.doi as string) || undefined,
   };
 
   const css = loadCSS();

backend/src/server.ts

@@ -321,7 +321,7 @@ function sendLoginPage(res: express.Response) {
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Collab Editor</title>
+  <title>Science Article Template Editor</title>
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body { display: flex; align-items: center; justify-content: center; height: 100vh;

docs/embed-studio.md

@@ -2,13 +2,13 @@
 
 ## Overview
 
-The Embed Studio is a dedicated UI mode within the collab-editor for creating, editing, and previewing HTML embed visualizations (D3.js charts). It isolates the dataviz workflow from the article editing flow, providing a focused chat + preview experience similar to the standalone [dataviz-agent-space](https://huggingface.co/spaces/tfrere/dataviz-agent-space).
+The Embed Studio is a dedicated UI mode within the editor for creating, editing, and previewing HTML embed visualizations (D3.js charts). It isolates the dataviz workflow from the article editing flow, providing a focused chat + preview experience similar to the standalone [dataviz-agent-space](https://huggingface.co/spaces/tfrere/dataviz-agent-space).
 
 ## Context
 
 The research-article-template uses `<HtmlEmbed>` components to embed self-contained D3.js charts into articles. These are `.html` files in `app/src/content/embeds/` with strict conventions (scoped CSS, IIFE scripts, ColorPalettes, responsive, etc.) documented in `.ai/skills/create-html-embed/directives.md`.
 
-In the collab-editor, users need to create and iterate on these charts without leaving the editor. The Embed Studio solves this by providing a dedicated panel with an AI assistant specialized in D3 chart generation.
+In the editor, users need to create and iterate on these charts without leaving the editor. The Embed Studio solves this by providing a dedicated panel with an AI assistant specialized in D3 chart generation.
 
 ## Storage
 

frontend/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Collab Editor</title>
+    <title>Science Article Template Editor</title>
   </head>
   <body>
     <div id="root"></div>

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "collab-editor-frontend",
+  "name": "science-article-template-editor-frontend",
   "version": "0.1.0",
   "private": true,
   "type": "module",

frontend/src/App.tsx

@@ -5,16 +5,16 @@ import type * as Y from "yjs";
 import {
   Box,
   Chip,
-  Collapse,
-  Paper,
   IconButton,
   Tooltip,
+  Typography,
 } from "@mui/material";
 import UndoIcon from "@mui/icons-material/Undo";
 import RedoIcon from "@mui/icons-material/Redo";
-import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
 import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 import PublishOutlinedIcon from "@mui/icons-material/PublishOutlined";
+import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutlined";
+import CloseIcon from "@mui/icons-material/Close";
 import {
   Button,
   Dialog,
@@ -23,13 +23,14 @@ import {
   DialogContentText,
   DialogActions,
   CircularProgress,
+  Badge,
 } from "@mui/material";
 import { Editor } from "./editor/Editor";
 import { CommentsSidebar } from "./components/CommentsSidebar";
 import { CommentDialog } from "./components/CommentDialog";
 import { ChatPanel } from "./components/ChatPanel";
+import { TableOfContents } from "./components/TableOfContents";
 import { useAgentChat } from "./hooks/useAgentChat";
-import { toMdx } from "./export/to-mdx";
 import type { CommentStore } from "./editor/comments";
 import type { FrontmatterStore } from "./editor/frontmatter/frontmatter-store";
 import { FrontmatterHero } from "./editor/frontmatter/FrontmatterHero";
@@ -64,8 +65,6 @@ export default function App() {
   const [commentStore, setCommentStore] = useState<CommentStore | null>(null);
   const [frontmatterStore, setFrontmatterStore] = useState<FrontmatterStore | null>(null);
   const [settingsMap, setSettingsMap] = useState<Y.Map<any> | null>(null);
-  const [mdxOutput, setMdxOutput] = useState("");
-  const [showExport, setShowExport] = useState(false);
   const [commentDialogOpen, setCommentDialogOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [publishDialogOpen, setPublishDialogOpen] = useState(false);
@@ -74,6 +73,7 @@ export default function App() {
   const selectionRange = useRef<{ from: number; to: number } | null>(null);
   const [hasSelection, setHasSelection] = useState(false);
   const [undoManager, setUndoManager] = useState<UndoManager | null>(null);
+  const [chatOpen, setChatOpen] = useState(false);
 
   const agentChat = useAgentChat({ editor: editorInstance, undoManager, frontmatterStore });
 
@@ -97,14 +97,6 @@ export default function App() {
     setEditorInstance(editor);
   }, []);
 
-  const handleExport = () => {
-    if (!editorRef.current) return;
-    const json = editorRef.current.getJSON();
-    const fm = frontmatterStore?.getAll();
-    setMdxOutput(toMdx(json, fm));
-    setShowExport((v) => !v);
-  };
-
   const onCommentStoreReady = useCallback((store: CommentStore) => {
     setCommentStore(store);
   }, []);
@@ -221,11 +213,6 @@ export default function App() {
             <SettingsOutlinedIcon sx={{ fontSize: 18 }} />
           </IconButton>
         </Tooltip>
-        <Tooltip title="Export MDX" arrow>
-          <IconButton size="small" onClick={handleExport} sx={{ color: "text.disabled" }}>
-            <FileDownloadOutlinedIcon sx={{ fontSize: 18 }} />
-          </IconButton>
-        </Tooltip>
         <Box sx={{ width: "1px", height: 16, bgcolor: "divider", mx: 0.5 }} />
         <Tooltip title="Publish article" arrow>
           <IconButton
@@ -250,100 +237,144 @@ export default function App() {
         />
       </Box>
 
-      {/* 3-column layout: chat | editor | comments */}
+      {/* Single scroll container */}
       <Box
+        ref={editorContainerCallback}
         sx={{
           flex: 1,
-          display: "grid",
-          gridTemplateColumns: "280px 1fr 240px",
-          minHeight: 0,
-          overflow: "hidden",
+          overflowY: "auto",
+          overflowX: "hidden",
         }}
       >
-        {/* Chat - fixed, own scroll */}
-        <Box
-          sx={{
-            borderRight: "1px solid",
-            borderColor: "divider",
-            overflow: "hidden",
-            display: "flex",
-          }}
-        >
-          <ChatPanel
-            messages={agentChat.messages}
-            isLoading={agentChat.isLoading}
-            error={agentChat.error}
-            input={agentChat.input}
-            hasSelection={hasSelection}
-            onSend={agentChat.sendMessage}
-            onQuickAction={agentChat.sendQuickAction}
-            onSetInput={agentChat.setInput}
-            onStop={agentChat.stop}
-            onNewChat={() => window.location.reload()}
-          />
-        </Box>
-
-        {/* Editor - scrolls independently */}
         <Box
-          ref={editorContainerCallback}
           sx={{
-            overflowY: "auto",
-            overflowX: "hidden",
-            py: 4,
+            display: "grid",
+            gridTemplateColumns: "200px 1fr 240px",
+            gridTemplateRows: "auto 1fr",
+            minHeight: "100%",
           }}
         >
-          <FrontmatterHero store={frontmatterStore} />
-
-          <Editor
-            docName={docName}
-            user={user}
-            editorRef={editorRef}
-            onCommentStoreReady={onCommentStoreReady}
-            onFrontmatterStoreReady={onFrontmatterStoreReady}
-            onSettingsMapReady={onSettingsMapReady}
-            onEditorReady={onEditorReady}
-            onUndoManagerReady={setUndoManager}
-            onAddComment={handleAddComment}
-          />
-
-          <Collapse in={showExport}>
-            <Paper
-              variant="outlined"
-              sx={{
-                mt: 4,
-                mx: "auto",
-                maxWidth: 680,
-                p: 2.5,
-                fontFamily: "monospace",
-                fontSize: "0.8rem",
-                whiteSpace: "pre-wrap",
-                maxHeight: 400,
-                overflow: "auto",
-                color: "text.secondary",
-              }}
-            >
-              {mdxOutput}
-            </Paper>
-          </Collapse>
+          {/* Hero - center column only, row 1 */}
+          <Box sx={{ gridColumn: 2, gridRow: 1, pt: 4 }}>
+            <FrontmatterHero store={frontmatterStore} />
+          </Box>
+
+          {/* TOC - left column, row 2, sticky */}
+          <Box sx={{ gridColumn: 1, gridRow: 2 }}>
+            <Box sx={{ position: "sticky", top: 16 }}>
+              <TableOfContents editor={editorInstance} />
+            </Box>
+          </Box>
+
+          {/* Editor - center column, row 2 */}
+          <Box sx={{ gridColumn: 2, gridRow: 2, pb: 4 }}>
+            <Editor
+              docName={docName}
+              user={user}
+              editorRef={editorRef}
+              onCommentStoreReady={onCommentStoreReady}
+              onFrontmatterStoreReady={onFrontmatterStoreReady}
+              onSettingsMapReady={onSettingsMapReady}
+              onEditorReady={onEditorReady}
+              onUndoManagerReady={setUndoManager}
+              onAddComment={handleAddComment}
+            />
+          </Box>
+
+          {/* Comments - right column, row 2 */}
+          <Box sx={{ gridColumn: 3, gridRow: 2, pl: 2, py: 2 }}>
+            <CommentsSidebar
+              editor={editorInstance}
+              commentStore={commentStore}
+              user={user}
+              editorContainer={containerEl}
+            />
+          </Box>
         </Box>
+      </Box>
 
-        {/* Comments - fixed, own scroll */}
+      {/* Floating chat - bottom left */}
+      {chatOpen ? (
         <Box
           sx={{
-            overflowY: "auto",
-            overflowX: "hidden",
-            pl: 2,
-            py: 2,
+            position: "fixed",
+            bottom: 16,
+            left: 16,
+            width: 360,
+            height: 520,
+            maxHeight: "calc(100vh - 80px)",
+            borderRadius: 3,
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
+            bgcolor: "background.paper",
+            border: "1px solid",
+            borderColor: "divider",
+            boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
+            zIndex: 1300,
           }}
         >
-          <CommentsSidebar
-            editor={editorInstance}
-            commentStore={commentStore}
-            user={user}
-            editorContainer={containerEl}
-          />
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              px: 1.5,
+              py: 0.75,
+              borderBottom: "1px solid",
+              borderColor: "divider",
+              flexShrink: 0,
+            }}
+          >
+            <Typography variant="caption" sx={{ fontWeight: 600, color: "text.secondary", fontSize: "0.7rem" }}>
+              AI Assistant
+            </Typography>
+            <IconButton size="small" onClick={() => setChatOpen(false)} sx={{ color: "text.disabled" }}>
+              <CloseIcon sx={{ fontSize: 16 }} />
+            </IconButton>
+          </Box>
+          <Box sx={{ flex: 1, overflow: "hidden", display: "flex" }}>
+            <ChatPanel
+              messages={agentChat.messages}
+              isLoading={agentChat.isLoading}
+              error={agentChat.error}
+              input={agentChat.input}
+              hasSelection={hasSelection}
+              onSend={agentChat.sendMessage}
+              onQuickAction={agentChat.sendQuickAction}
+              onSetInput={agentChat.setInput}
+              onStop={agentChat.stop}
+              onNewChat={() => window.location.reload()}
+            />
+          </Box>
         </Box>
-      </Box>
+      ) : (
+        <Tooltip title="AI Assistant" placement="right" arrow>
+          <IconButton
+            onClick={() => setChatOpen(true)}
+            sx={{
+              position: "fixed",
+              bottom: 20,
+              left: 20,
+              width: 48,
+              height: 48,
+              bgcolor: "primary.main",
+              color: "primary.contrastText",
+              boxShadow: "0 4px 16px rgba(0,0,0,0.3)",
+              zIndex: 1300,
+              "&:hover": { bgcolor: "primary.dark" },
+            }}
+          >
+            <Badge
+              color="error"
+              variant="dot"
+              invisible={!agentChat.isLoading}
+            >
+              <ChatBubbleOutlineIcon sx={{ fontSize: 22 }} />
+            </Badge>
+          </IconButton>
+        </Tooltip>
+      )}
 
       <CommentDialog
         open={commentDialogOpen}

frontend/src/components/TableOfContents.tsx

@@ -0,0 +1,235 @@
+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;
+
+interface TocItem {
+  id: string;
+  text: string;
+  level: number;
+  pos: number;
+}
+
+interface TocNode extends TocItem {
+  children: TocNode[];
+}
+
+function extractHeadings(editor: Editor): TocItem[] {
+  const items: TocItem[] = [];
+  editor.state.doc.descendants((node, pos) => {
+    if (node.type.name === "heading") {
+      const level = node.attrs.level as number;
+      const text = node.textContent;
+      if (text.trim()) {
+        items.push({ id: `heading-${pos}`, text, level, pos });
+      }
+    }
+  });
+  return items;
+}
+
+function buildTree(headings: TocItem[]): TocNode[] {
+  const root: TocNode[] = [];
+  const stack: TocNode[] = [];
+
+  for (const h of headings) {
+    const node: TocNode = { ...h, children: [] };
+
+    while (stack.length > 0 && stack[stack.length - 1].level >= h.level) {
+      stack.pop();
+    }
+
+    if (stack.length === 0) {
+      root.push(node);
+    } else {
+      stack[stack.length - 1].children.push(node);
+    }
+
+    stack.push(node);
+  }
+
+  return root;
+}
+
+interface TableOfContentsProps {
+  editor: Editor | null;
+}
+
+export function TableOfContents({ editor }: TableOfContentsProps) {
+  const [headings, setHeadings] = useState<TocItem[]>([]);
+  const [activePos, setActivePos] = useState<number | null>(null);
+  const rafRef = useRef(0);
+
+  useEffect(() => {
+    if (!editor) return;
+    const update = () => setHeadings(extractHeadings(editor));
+    update();
+    editor.on("update", update);
+    return () => { editor.off("update", update); };
+  }, [editor]);
+
+  useEffect(() => {
+    if (!editor || headings.length === 0) return;
+
+    const detect = () => {
+      const domHeadings = Array.from(
+        editor.view.dom.querySelectorAll("h1, h2, h3, h4, h5, h6"),
+      ).filter((el) => (el as HTMLElement).textContent?.trim());
+
+      let activeIdx = -1;
+      for (let i = domHeadings.length - 1; i >= 0; i--) {
+        if (domHeadings[i].getBoundingClientRect().top <= SCROLL_OFFSET_PX) {
+          activeIdx = i;
+          break;
+        }
+      }
+      setActivePos(activeIdx >= 0 && activeIdx < headings.length ? headings[activeIdx].pos : null);
+    };
+
+    const onScroll = () => {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(detect);
+    };
+
+    detect();
+    document.addEventListener("scroll", onScroll, { capture: true, passive: true });
+    return () => {
+      document.removeEventListener("scroll", onScroll, { capture: true });
+      cancelAnimationFrame(rafRef.current);
+    };
+  }, [editor, headings]);
+
+  const tree = useMemo(() => buildTree(headings), [headings]);
+
+  const expandedPositions = useMemo(() => {
+    const set = new Set<number>();
+    if (activePos == null) return set;
+
+    const walk = (nodes: TocNode[], ancestors: number[]): boolean => {
+      for (const node of nodes) {
+        if (node.pos === activePos) {
+          ancestors.forEach((p) => set.add(p));
+          set.add(node.pos);
+          return true;
+        }
+        if (node.children.length > 0 && walk(node.children, [...ancestors, node.pos])) {
+          return true;
+        }
+      }
+      return false;
+    };
+    walk(tree, []);
+    return set;
+  }, [tree, activePos]);
+
+  const scrollTo = useCallback((pos: number) => {
+    if (!editor) return;
+    editor.chain().focus().setTextSelection(pos).run();
+    const dom = editor.view.domAtPos(pos);
+    const el = dom.node instanceof HTMLElement ? dom.node : dom.node.parentElement;
+    el?.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, [editor]);
+
+  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>
+    );
+  }
+
+  const renderList = (nodes: TocNode[], isRoot: boolean) => (
+    <Box
+      component="ul"
+      sx={{
+        m: 0,
+        mb: isRoot ? 0 : "6px",
+        pl: isRoot ? 0 : "1em",
+        listStyle: "none",
+      }}
+    >
+      {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) => {
+                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>
+            {hasChildren && (
+              <Box
+                sx={{
+                  overflow: "hidden",
+                  maxHeight: isExpanded ? 500 : 0,
+                  opacity: isExpanded ? 1 : 0,
+                  transition: "max-height 200ms ease, opacity 200ms ease",
+                }}
+              >
+                {renderList(node.children, false)}
+              </Box>
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+
+  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",
+        }}
+      >
+        {renderList(tree, true)}
+      </Box>
+    </Box>
+  );
+}

frontend/src/editor/Editor.tsx

@@ -33,13 +33,10 @@ import { CitationPanel } from "./CitationPanel";
 import { createCommentStore, CommentStore } from "./comments";
 import { createFrontmatterStore, FrontmatterStore } from "./frontmatter/frontmatter-store";
 import { seedFrontmatter } from "./frontmatter/seed-frontmatter";
-import { COMPONENTS, createWrapperExtension, createAtomicExtension, registerComponentSerializers } from "./components";
+import { COMPONENTS, createWrapperExtension, createAtomicExtension } from "./components";
 import { uploadImage } from "./upload";
 import { DEFAULT_CONTENT, SEED_CITATIONS } from "./default-content";
 
-// Auto-register MDX serializers for all custom components (once)
-registerComponentSerializers();
-
 const lowlight = createLowlight(all);
 
 interface EditorProps {

frontend/src/editor/components/index.ts

@@ -1,5 +1,4 @@
 export { COMPONENTS } from "./registry";
 export type { ComponentDef, ComponentField } from "./registry";
 export { createWrapperExtension, createAtomicExtension } from "./factory";
-export { registerComponentSerializers } from "./serializers";
 export { getComponentSlashItems } from "./slash-items";

frontend/src/editor/components/serializers.ts

@@ -1,41 +0,0 @@
-// ---------------------------------------------------------------------------
-// Auto-register MDX serializers for every component in the registry.
-//
-// Call `registerComponentSerializers()` once at startup (side-effect import).
-// ---------------------------------------------------------------------------
-
-import { registerSerializer, serializeNode } from "../../export/serializers/index";
-import { COMPONENTS } from "./registry";
-import type { ComponentDef } from "./registry";
-
-function serializeAttrs(def: ComponentDef, attrs: Record<string, unknown>): string {
-  const parts: string[] = [];
-
-  for (const f of def.fields) {
-    const val = attrs[f.name];
-    if (val === undefined || val === null || val === f.default) continue;
-
-    if (f.type === "boolean") {
-      if (val) parts.push(f.name);
-    } else {
-      parts.push(`${f.name}="${String(val)}"`);
-    }
-  }
-
-  return parts.length ? ` ${parts.join(" ")}` : "";
-}
-
-export function registerComponentSerializers() {
-  for (const def of COMPONENTS) {
-    registerSerializer(def.name, (node) => {
-      const attrStr = serializeAttrs(def, node.attrs ?? {});
-
-      if (def.kind === "atomic") {
-        return `<${def.tag}${attrStr} />`;
-      }
-
-      const inner = node.content?.map(serializeNode).join("\n\n") ?? "";
-      return `<${def.tag}${attrStr}>\n${inner}\n</${def.tag}>`;
-    });
-  }
-}

frontend/src/editor/frontmatter/FrontmatterHero.tsx

@@ -1,11 +1,11 @@
 import { useState, useRef, useEffect, type KeyboardEvent } from "react";
 import {
   Box,
-  Typography,
   Chip,
   IconButton,
-  Tooltip,
   TextField,
+  Tooltip,
+  Typography,
 } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import CloseIcon from "@mui/icons-material/Close";
@@ -22,143 +22,233 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
   const [showAuthorForm, setShowAuthorForm] = useState(false);
 
   if (!data) {
-    return <Box sx={{ maxWidth: 680, mx: "auto", mb: 4, px: 2 }} />;
+    return <Box sx={{ width: "100%", mb: 4 }} />;
   }
 
-  const hasContent = data.title || data.subtitle || data.authors.length > 0;
+  const hasAuthors = data.authors.length > 0;
+  const hasAffiliations = data.affiliations.length > 0;
+  const multipleAffiliations = data.affiliations.length > 1;
+  const hasMeta = hasAuthors || data.published || data.doi;
 
   return (
-    <Box sx={{ maxWidth: 680, mx: "auto", mb: 4, px: 2 }}>
-      {/* Title */}
-      <EditableText
-        value={data.title}
-        placeholder="Article title"
-        onChange={(v) => update("title", v)}
-        typographySx={{
-          fontSize: "2.2rem",
-          fontWeight: 700,
-          lineHeight: 1.2,
-          letterSpacing: "-0.02em",
-          color: "text.primary",
-          mb: 0.5,
-        }}
-        multiline
-      />
-
-      {/* Subtitle */}
-      <EditableText
-        value={data.subtitle}
-        placeholder="Subtitle (optional)"
-        onChange={(v) => update("subtitle", v)}
-        typographySx={{
-          fontSize: "1.15rem",
-          fontWeight: 400,
-          lineHeight: 1.5,
-          color: "text.secondary",
-          mb: 2.5,
-        }}
-      />
+    <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>
 
-      {/* Authors + Affiliations */}
-      <Box sx={{ mb: 2 }}>
-        <Box sx={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 0.75 }}>
-          {data.authors.map((author, i) => (
-            <AuthorChip
-              key={`author-${i}`}
-              author={author}
-              affiliations={data.affiliations}
-              onEdit={() => setEditingAuthorIdx(i)}
-              onRemove={() => store?.removeAuthor(i)}
-            />
-          ))}
-          <Tooltip title="Add author" arrow>
-            <IconButton
-              size="small"
-              onClick={() => setShowAuthorForm(true)}
-              sx={{ color: "text.disabled", border: "1px dashed", borderColor: "divider", borderRadius: 1, p: 0.5 }}
-            >
-              <AddIcon sx={{ fontSize: 14 }} />
-            </IconButton>
-          </Tooltip>
+        <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>
 
-        {/* Affiliation footnotes */}
-        {data.affiliations.length > 0 && (
-          <Box sx={{ color: "text.disabled", mt: 0.75, fontSize: "0.7rem" }}>
-            {data.affiliations.map((aff, i) => (
-              <span key={`aff-${i}`}>
-                <sup>{i + 1}</sup>{" "}
-                {aff.url ? (
-                  <a href={aff.url} style={{ color: "inherit", textDecoration: "underline" }} target="_blank" rel="noopener noreferrer">
-                    {aff.name}
-                  </a>
+      {/* Meta bar - matches published template */}
+      {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,
+            }}
+          >
+            {/* Authors cell */}
+            <MetaCell label="Authors">
+              <Box sx={{ display: "flex", flexWrap: "wrap", m: 0, p: 0, listStyle: "none" }} component="ul">
+                {data.authors.map((author, i) => (
+                  <Box component="li" key={`author-${i}`} sx={{ whiteSpace: "nowrap", p: 0 }}>
+                    <Box
+                      component="span"
+                      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" }}>
+                          {author.name}
+                        </Box>
+                      ) : (
+                        author.name
+                      )}
+                      {multipleAffiliations && author.affiliations?.length > 0 && (
+                        <sup>{author.affiliations.join(",")}</sup>
+                      )}
+                    </Box>
+                    {i < data.authors.length - 1 && <>,&nbsp;</>}
+                  </Box>
+                ))}
+                <Box component="li" sx={{ p: 0, display: "inline-flex", alignItems: "center", ml: 0.5 }}>
+                  <Tooltip title="Add author" arrow>
+                    <IconButton
+                      size="small"
+                      onClick={() => setShowAuthorForm(true)}
+                      sx={{ color: "text.disabled", p: 0.25 }}
+                    >
+                      <AddIcon sx={{ fontSize: 14 }} />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
+              </Box>
+            </MetaCell>
+
+            {/* Affiliations cell */}
+            {hasAffiliations && (
+              <MetaCell label="Affiliations">
+                {multipleAffiliations ? (
+                  <Box component="ol" sx={{ m: 0, pl: "1.25em" }}>
+                    {data.affiliations.map((aff, i) => (
+                      <Box component="li" key={`aff-${i}`} sx={{ m: 0 }}>
+                        {aff.url ? (
+                          <a href={aff.url} target="_blank" rel="noopener noreferrer" style={{ color: "inherit" }}>
+                            {aff.name}
+                          </a>
+                        ) : (
+                          aff.name
+                        )}
+                      </Box>
+                    ))}
+                  </Box>
                 ) : (
-                  aff.name
+                  <Box>
+                    {data.affiliations[0].url ? (
+                      <a href={data.affiliations[0].url} target="_blank" rel="noopener noreferrer" style={{ color: "inherit" }}>
+                        {data.affiliations[0].name}
+                      </a>
+                    ) : (
+                      data.affiliations[0].name
+                    )}
+                  </Box>
                 )}
-                {i < data.affiliations.length - 1 ? "   " : ""}
-              </span>
-            ))}
+              </MetaCell>
+            )}
+
+            {/* Published cell */}
+            <MetaCell label="Published">
+              <EditableText
+                value={data.published}
+                placeholder="Date"
+                onChange={(v) => update("published", v)}
+                typographySx={{ fontSize: "0.9rem", color: "text.primary" }}
+                inline
+              />
+            </MetaCell>
+
+            {/* DOI cell */}
+            <MetaCell label="DOI">
+              <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>
+      )}
+
+      {/* Author forms */}
+      <Box sx={{ maxWidth: 680, mx: "auto", px: 2 }}>
+        {showAuthorForm && (
+          <AuthorInlineForm
+            affiliations={data.affiliations}
+            onSubmit={(author, newAff) => {
+              if (newAff) {
+                const idx = store!.addAffiliation(newAff);
+                author.affiliations = [...author.affiliations, idx];
+              }
+              store?.addAuthor(author);
+              setShowAuthorForm(false);
+            }}
+            onCancel={() => setShowAuthorForm(false)}
+          />
         )}
-      </Box>
 
-      {/* Meta line: date + DOI */}
-      <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, flexWrap: "wrap" }}>
-        <EditableText
-          value={data.published}
-          placeholder="Publication date"
-          onChange={(v) => update("published", v)}
-          typographySx={{ fontSize: "0.8rem", color: "text.disabled" }}
-          inline
-        />
-        {data.published && data.doi && (
-          <Box component="span" sx={{ color: "text.disabled", fontSize: "0.8rem" }}>-</Box>
+        {editingAuthorIdx !== null && data.authors[editingAuthorIdx] && (
+          <AuthorInlineForm
+            initial={data.authors[editingAuthorIdx]}
+            affiliations={data.affiliations}
+            onSubmit={(author, newAff) => {
+              if (newAff) {
+                const idx = store!.addAffiliation(newAff);
+                author.affiliations = [...author.affiliations, idx];
+              }
+              store?.updateAuthor(editingAuthorIdx, author);
+              setEditingAuthorIdx(null);
+            }}
+            onCancel={() => setEditingAuthorIdx(null)}
+          />
         )}
-        <EditableText
-          value={data.doi}
-          placeholder="DOI"
-          onChange={(v) => update("doi", v)}
-          typographySx={{ fontSize: "0.8rem", color: "text.disabled", fontFamily: "monospace" }}
-          inline
-        />
       </Box>
+    </Box>
+  );
+}
 
-      {/* Separator */}
-      {hasContent && (
-        <Box sx={{ borderBottom: "1px solid", borderColor: "divider", mt: 3, mb: 1 }} />
-      )}
-
-      {/* Author forms */}
-      {showAuthorForm && (
-        <AuthorInlineForm
-          affiliations={data.affiliations}
-          onSubmit={(author, newAff) => {
-            if (newAff) {
-              const idx = store!.addAffiliation(newAff);
-              author.affiliations = [...author.affiliations, idx];
-            }
-            store?.addAuthor(author);
-            setShowAuthorForm(false);
-          }}
-          onCancel={() => setShowAuthorForm(false)}
-        />
-      )}
+// ---- Meta cell (labeled column in the meta bar) ----
 
-      {editingAuthorIdx !== null && data.authors[editingAuthorIdx] && (
-        <AuthorInlineForm
-          initial={data.authors[editingAuthorIdx]}
-          affiliations={data.affiliations}
-          onSubmit={(author, newAff) => {
-            if (newAff) {
-              const idx = store!.addAffiliation(newAff);
-              author.affiliations = [...author.affiliations, idx];
-            }
-            store?.updateAuthor(editingAuthorIdx, author);
-            setEditingAuthorIdx(null);
-          }}
-          onCancel={() => setEditingAuthorIdx(null)}
-        />
-      )}
+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>
   );
 }
@@ -172,9 +262,10 @@ interface EditableTextProps {
   typographySx?: Record<string, any>;
   multiline?: boolean;
   inline?: boolean;
+  center?: boolean;
 }
 
-function EditableText({ value, placeholder, onChange, typographySx = {}, multiline, inline }: EditableTextProps) {
+function EditableText({ value, placeholder, onChange, typographySx = {}, multiline, inline, center }: EditableTextProps) {
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(value);
   const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
@@ -211,6 +302,7 @@ function EditableText({ value, placeholder, onChange, typographySx = {}, multili
 
   const displayValue = value || placeholder;
   const isEmpty = !value;
+  const textAlign = center ? "center" : undefined;
 
   if (editing) {
     return (
@@ -230,6 +322,7 @@ function EditableText({ value, placeholder, onChange, typographySx = {}, multili
               disableUnderline: true,
               sx: {
                 ...typographySx,
+                textAlign,
                 p: 0,
                 m: 0,
               },
@@ -245,6 +338,7 @@ function EditableText({ value, placeholder, onChange, typographySx = {}, multili
       onClick={() => setEditing(true)}
       sx={{
         ...typographySx,
+        textAlign,
         cursor: "text",
         opacity: isEmpty ? 0.35 : 1,
         borderRadius: 1,
@@ -262,45 +356,6 @@ function EditableText({ value, placeholder, onChange, typographySx = {}, multili
   );
 }
 
-// ---- Author chip ----
-
-function AuthorChip({
-  author,
-  affiliations,
-  onEdit,
-  onRemove,
-}: {
-  author: Author;
-  affiliations: Affiliation[];
-  onEdit: () => void;
-  onRemove: () => void;
-}) {
-  const affIndices = author.affiliations || [];
-
-  return (
-    <Chip
-      label={
-        affIndices.length > 0
-          ? `${author.name} (${affIndices.join(",")})`
-          : author.name
-      }
-      size="small"
-      onClick={onEdit}
-      onDelete={onRemove}
-      deleteIcon={<CloseIcon sx={{ fontSize: 12 }} />}
-      sx={{
-        fontSize: "0.8rem",
-        height: 26,
-        bgcolor: "rgba(255,255,255,0.06)",
-        border: "1px solid",
-        borderColor: "divider",
-        cursor: "pointer",
-        "&:hover": { borderColor: "text.disabled" },
-      }}
-    />
-  );
-}
-
 // ---- Author inline form ----
 
 function AuthorInlineForm({

frontend/src/editor/frontmatter/SettingsDrawer.tsx

@@ -9,12 +9,8 @@ import {
   Switch,
   Divider,
   IconButton,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { useState, useEffect } from "react";
 import { useFrontmatter } from "./useFrontmatter";
 import type { FrontmatterStore, FrontmatterData } from "./frontmatter-store";
@@ -49,17 +45,19 @@ export function SettingsDrawer({ open, onClose, store, settingsMap }: SettingsDr
       anchor="right"
       open={open}
       onClose={onClose}
-      PaperProps={{
-        sx: {
-          width: 320,
-          bgcolor: "background.paper",
-          backgroundImage: "none",
-          borderLeft: "1px solid",
-          borderColor: "divider",
+      slotProps={{
+        paper: {
+          sx: {
+            width: 380,
+            bgcolor: "background.paper",
+            backgroundImage: "none",
+            borderLeft: "1px solid",
+            borderColor: "divider",
+          },
         },
       }}
     >
-      <Box sx={{ p: 2, display: "flex", flexDirection: "column", height: "100%" }}>
+      <Box sx={{ px: 2.5, py: 2, display: "flex", flexDirection: "column", height: "100%" }}>
         {/* Header */}
         <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 }}>
           <Typography variant="subtitle2" sx={{ fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "text.secondary", fontSize: "0.75rem" }}>
@@ -133,6 +131,7 @@ export function SettingsDrawer({ open, onClose, store, settingsMap }: SettingsDr
 
           {/* Toggles */}
           <FormControlLabel
+            sx={{ ml: 0 }}
             control={
               <Switch
                 size="small"
@@ -144,6 +143,7 @@ export function SettingsDrawer({ open, onClose, store, settingsMap }: SettingsDr
           />
 
           <FormControlLabel
+            sx={{ ml: 0 }}
             control={
               <Switch
                 size="small"
@@ -154,58 +154,42 @@ export function SettingsDrawer({ open, onClose, store, settingsMap }: SettingsDr
             label={<Typography variant="body2" sx={{ fontSize: "0.85rem" }}>Auto-collapse TOC</Typography>}
           />
 
-          {/* Advanced */}
-          <Accordion
-            disableGutters
-            elevation={0}
-            sx={{
-              bgcolor: "transparent",
-              "&:before": { display: "none" },
-              border: "1px solid",
-              borderColor: "divider",
-              borderRadius: "8px !important",
-            }}
-          >
-            <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ fontSize: 16 }} />}>
-              <Typography variant="caption" sx={{ fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "text.secondary" }}>
-                Advanced
-              </Typography>
-            </AccordionSummary>
-            <AccordionDetails sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-              <FieldGroup label="Licence">
-                <TextField
-                  size="small"
-                  fullWidth
-                  multiline
-                  minRows={2}
-                  placeholder="e.g. CC BY 4.0 (HTML allowed)"
-                  value={data.licence}
-                  onChange={(e) => update("licence", e.target.value)}
-                />
-              </FieldGroup>
-
-              <FieldGroup label="SEO thumbnail image">
-                <TextField
-                  size="small"
-                  fullWidth
-                  placeholder="https://..."
-                  value={data.seoThumbImage}
-                  onChange={(e) => update("seoThumbImage", e.target.value)}
-                />
-              </FieldGroup>
-
-              <FormControlLabel
-                control={
-                  <Switch
-                    size="small"
-                    checked={data.pdfProOnly}
-                    onChange={(_, v) => update("pdfProOnly", v)}
-                  />
-                }
-                label={<Typography variant="body2" sx={{ fontSize: "0.85rem" }}>PDF Pro only</Typography>}
+          <Divider />
+
+          {/* Licence / SEO / PDF Pro */}
+          <FieldGroup label="Licence">
+            <TextField
+              size="small"
+              fullWidth
+              multiline
+              minRows={2}
+              placeholder="e.g. CC BY 4.0 (HTML allowed)"
+              value={data.licence}
+              onChange={(e) => update("licence", e.target.value)}
+            />
+          </FieldGroup>
+
+          <FieldGroup label="SEO thumbnail image">
+            <TextField
+              size="small"
+              fullWidth
+              placeholder="https://..."
+              value={data.seoThumbImage}
+              onChange={(e) => update("seoThumbImage", e.target.value)}
+            />
+          </FieldGroup>
+
+          <FormControlLabel
+            sx={{ ml: 0 }}
+            control={
+              <Switch
+                size="small"
+                checked={data.pdfProOnly}
+                onChange={(_, v) => update("pdfProOnly", v)}
               />
-            </AccordionDetails>
-          </Accordion>
+            }
+            label={<Typography variant="body2" sx={{ fontSize: "0.85rem" }}>PDF Pro only</Typography>}
+          />
         </Box>
       </Box>
     </Drawer>

frontend/src/editor/frontmatter/seed-frontmatter.ts

@@ -12,7 +12,7 @@ export function seedFrontmatter(store: FrontmatterStore) {
     subtitle: "How model size, data, and compute interact",
     description: "An empirical study of scaling behavior across model size, data, and compute budgets.",
     published: "Apr. 13, 2026",
-    doi: "10.1234/collab-editor.2026",
+    doi: "10.1234/science-article-template-editor.2026",
     template: "article",
   });
 

frontend/src/export/serializers/index.ts

@@ -1,133 +0,0 @@
-import type { JSONContent } from "@tiptap/core";
-
-type Serializer = (node: JSONContent) => string;
-
-const serializers: Record<string, Serializer> = {};
-
-export function registerSerializer(type: string, fn: Serializer) {
-  serializers[type] = fn;
-}
-
-export function serializeNode(node: JSONContent): string {
-  const fn = serializers[node.type!];
-  if (fn) return fn(node);
-  if (node.text) return serializeMarks(node);
-  if (node.content) return node.content.map(serializeNode).join("");
-  return "";
-}
-
-function serializeMarks(node: JSONContent): string {
-  let text = node.text || "";
-  if (!node.marks) return text;
-
-  for (const mark of node.marks) {
-    switch (mark.type) {
-      case "bold":
-        text = `**${text}**`;
-        break;
-      case "italic":
-        text = `*${text}*`;
-        break;
-      case "strike":
-        text = `~~${text}~~`;
-        break;
-      case "code":
-        text = `\`${text}\``;
-        break;
-      case "link":
-        text = `[${text}](${mark.attrs?.href || ""})`;
-        break;
-    }
-  }
-
-  return text;
-}
-
-function inlineContent(node: JSONContent): string {
-  if (!node.content) return "";
-  return node.content.map(serializeNode).join("");
-}
-
-// --- Built-in serializers ---
-
-registerSerializer("paragraph", (node) => inlineContent(node));
-
-registerSerializer("heading", (node) => {
-  const level = node.attrs?.level || 1;
-  const prefix = "#".repeat(level);
-  return `${prefix} ${inlineContent(node)}`;
-});
-
-registerSerializer("bulletList", (node) => {
-  if (!node.content) return "";
-  return node.content
-    .map((item) => {
-      const inner = item.content?.map(serializeNode).join("\n") || "";
-      return `- ${inner}`;
-    })
-    .join("\n");
-});
-
-registerSerializer("orderedList", (node) => {
-  if (!node.content) return "";
-  return node.content
-    .map((item, i) => {
-      const inner = item.content?.map(serializeNode).join("\n") || "";
-      return `${i + 1}. ${inner}`;
-    })
-    .join("\n");
-});
-
-registerSerializer("blockquote", (node) => {
-  if (!node.content) return "";
-  const inner = node.content.map(serializeNode).join("\n");
-  return inner
-    .split("\n")
-    .map((line) => `> ${line}`)
-    .join("\n");
-});
-
-registerSerializer("codeBlock", (node) => {
-  const lang = node.attrs?.language || "";
-  const code = inlineContent(node);
-  return `\`\`\`${lang}\n${code}\n\`\`\``;
-});
-
-registerSerializer("horizontalRule", () => "---");
-
-registerSerializer("hardBreak", () => "  \n");
-
-registerSerializer("listItem", (node) => {
-  if (!node.content) return "";
-  return node.content.map(serializeNode).join("\n");
-});
-
-// --- Inline atoms ---
-
-registerSerializer("glossary", (node) => {
-  const term = node.attrs?.term || "";
-  const definition = node.attrs?.definition || "";
-  return `<Glossary term="${term}" definition="${definition}">${term}</Glossary>`;
-});
-
-registerSerializer("footnote", (node) => {
-  return `[^fn]: ${node.attrs?.content || ""}`;
-});
-
-// --- Stack (multi-column) ---
-
-registerSerializer("stack", (node) => {
-  const layout = node.attrs?.layout || "2-column";
-  const gap = node.attrs?.gap || "medium";
-  const attrs: string[] = [];
-  if (layout !== "2-column") attrs.push(`layout="${layout}"`);
-  if (gap !== "medium") attrs.push(`gap="${gap}"`);
-  const attrStr = attrs.length ? ` ${attrs.join(" ")}` : "";
-  const inner = node.content?.map(serializeNode).join("\n\n") ?? "";
-  return `<Stack${attrStr}>\n${inner}\n</Stack>`;
-});
-
-registerSerializer("stackColumn", (node) => {
-  if (!node.content) return "";
-  return node.content.map(serializeNode).join("\n\n");
-});

frontend/src/export/to-mdx.ts

@@ -1,70 +0,0 @@
-import type { JSONContent } from "@tiptap/core";
-import { serializeNode } from "./serializers/index";
-import type { FrontmatterData } from "../editor/frontmatter/frontmatter-store";
-
-export function toMdx(doc: JSONContent, frontmatter?: FrontmatterData): string {
-  const body = doc.content
-    ? doc.content.map((node) => serializeNode(node)).join("\n\n")
-    : "";
-
-  if (!frontmatter) return body;
-
-  const yaml = serializeFrontmatter(frontmatter);
-  if (!yaml) return body;
-
-  return `---\n${yaml}---\n\n${body}`;
-}
-
-function serializeFrontmatter(fm: FrontmatterData): string {
-  const lines: string[] = [];
-
-  if (fm.title) lines.push(`title: ${yamlString(fm.title)}`);
-  if (fm.subtitle) lines.push(`subtitle: ${yamlString(fm.subtitle)}`);
-  if (fm.description) lines.push(`description: ${yamlString(fm.description)}`);
-
-  if (fm.authors.length > 0) {
-    lines.push("authors:");
-    for (const author of fm.authors) {
-      lines.push(`  - name: ${yamlString(author.name)}`);
-      if (author.url) lines.push(`    url: ${yamlString(author.url)}`);
-      if (author.affiliations.length > 0) {
-        lines.push(`    affiliations: [${author.affiliations.join(", ")}]`);
-      }
-    }
-  }
-
-  if (fm.affiliations.length > 0) {
-    lines.push("affiliations:");
-    for (const aff of fm.affiliations) {
-      lines.push(`  - name: ${yamlString(aff.name)}`);
-      if (aff.url) lines.push(`    url: ${yamlString(aff.url)}`);
-    }
-  }
-
-  if (fm.published) lines.push(`published: ${yamlString(fm.published)}`);
-  if (fm.template !== "article") lines.push(`template: ${yamlString(fm.template)}`);
-  if (fm.banner && fm.banner !== "banner.html") lines.push(`banner: ${yamlString(fm.banner)}`);
-  if (fm.doi) lines.push(`doi: ${yamlString(fm.doi)}`);
-  if (!fm.showPdf) lines.push("showPdf: false");
-  if (fm.tableOfContentsAutoCollapse) lines.push("tableOfContentsAutoCollapse: true");
-  if (fm.licence) lines.push(`licence: ${yamlString(fm.licence)}`);
-  if (fm.pdfProOnly) lines.push("pdfProOnly: true");
-  if (fm.seoThumbImage) lines.push(`seoThumbImage: ${yamlString(fm.seoThumbImage)}`);
-
-  if (fm.links.length > 0) {
-    lines.push("links:");
-    for (const link of fm.links) {
-      lines.push(`  - label: ${yamlString(link.label)}`);
-      lines.push(`    url: ${yamlString(link.url)}`);
-    }
-  }
-
-  return lines.length > 0 ? lines.join("\n") + "\n" : "";
-}
-
-function yamlString(value: string): string {
-  if (/[\n:"{}[\],&*?|>!%@`#]/.test(value) || value !== value.trim()) {
-    return `"${value.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
-  }
-  return `"${value}"`;
-}

frontend/src/hooks/useAgentChat.ts

@@ -7,7 +7,6 @@ import { useCallback, useRef, useState } from "react";
 import type { Editor } from "@tiptap/core";
 import type { UndoManager } from "yjs";
 import type { UIMessage } from "ai";
-import { toMdx } from "../export/to-mdx";
 import type { FrontmatterStore } from "../editor/frontmatter/frontmatter-store";
 
 interface UseAgentChatOptions {
@@ -29,7 +28,7 @@ export function useAgentChat({ editor, undoManager, frontmatterStore }: UseAgent
     const { from, to } = editor.state.selection;
     const hasSelection = from !== to;
 
-    const document = toMdx(editor.getJSON());
+    const document = editor.getText("\n");
     const selection = hasSelection
       ? editor.state.doc.textBetween(from, to, "\n")
       : undefined;