carbon-tokenization

Running

tfrere HF Staff commited on Apr 20

Commit

76fc93a

1 Parent(s): f5f4567

feat(frontend): editor refresh (embed studio, comment popover, shiki, top bar, hooks, styles)

- New top bar + publish dialog + sync indicator + mobile TOC sidebar replace the previous
floating actions and full sidebar stack
- Add EmbedStudio chat panel wired to the backend embed agent (embed-tools + stream handler),
with fullBleed iframe mode for banner rendering and double-buffered previews
- Swap legacy comments sidebar for a floating CommentPopover anchored to the active thread
- Shiki-based code block extension + scroll guard on top of TipTap v3; richer frontmatter
settings (hue slider, template variant, SEO) and Editor footer
- Shared hooks (useTheme, useEmbedChat, usePublishStatus) and a singleton MutationObserver
so all components subscribe to theme changes from the same source
- Reorganize CSS into scoped modules (_ui, _footer, _embed, _embed-studio, _hero, _mermaid,
_toc, _form, _code, tokens, layout, publisher, print) and drop the dead postcss config
- Add frontend vitest suite + tsconfig(+node) + vite-env typings + typed utils/types modules

Made-with: Cursor

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

frontend/index.html +12 -0
frontend/package-lock.json +0 -0
frontend/package.json +10 -5
frontend/postcss.config.js +0 -5
frontend/src/App.tsx +474 -194
frontend/src/components/ChatPanel.tsx +145 -32
frontend/src/components/CommentPopover.tsx +293 -0
frontend/src/components/CommentsSidebar.tsx +0 -212
frontend/src/components/EmbedStudio.tsx +346 -0
frontend/src/components/MobileTocSidebar.tsx +66 -0
frontend/src/components/PublishDialog.tsx +141 -0
frontend/src/components/SyncIndicator.tsx +80 -0
frontend/src/components/TableOfContents.tsx +94 -33
frontend/src/components/TopBar.tsx +139 -0
frontend/src/editor/BlockHandle.tsx +24 -25
frontend/src/editor/CitationView.tsx +7 -102
frontend/src/editor/Editor.tsx +118 -49
frontend/src/editor/EditorFooter.tsx +166 -0
frontend/src/editor/FloatingActions.tsx +0 -128
frontend/src/editor/SlashMenu.tsx +49 -0
frontend/src/editor/StackView.tsx +19 -47
frontend/src/editor/comments.ts +24 -2
frontend/src/editor/components/AtomicView.tsx +23 -14
frontend/src/editor/components/MermaidView.tsx +39 -6
frontend/src/editor/components/WrapperView.tsx +49 -18
frontend/src/editor/components/factory.ts +44 -89
frontend/src/editor/components/index.ts +1 -1
frontend/src/editor/components/registry.ts +2 -2
frontend/src/editor/default-content.ts +281 -95
frontend/src/editor/embeds/HtmlEmbedView.tsx +274 -0
frontend/src/editor/embeds/build-doc.ts +22 -0
frontend/src/editor/embeds/embed-store.ts +99 -0
frontend/src/editor/extensions/citation.ts +84 -0
frontend/src/editor/extensions/code-block-shiki.tsx +300 -0
frontend/src/editor/extensions/collaboration-cursor-v3.ts +5 -1
frontend/src/editor/extensions/scroll-guard.ts +57 -0
frontend/src/editor/extensions/stack.ts +37 -0
frontend/src/editor/frontmatter/FrontmatterHero.tsx +299 -168
frontend/src/editor/frontmatter/HueSlider.tsx +3 -5
frontend/src/editor/frontmatter/SettingsDrawer.tsx +9 -0
frontend/src/editor/frontmatter/frontmatter-store.ts +17 -13
frontend/src/editor/frontmatter/seed-frontmatter.ts +15 -5
frontend/src/hooks/useAgentChat.ts +39 -8
frontend/src/hooks/useEmbedChat.ts +221 -0
frontend/src/hooks/usePublishStatus.ts +49 -0
frontend/src/hooks/useTheme.ts +67 -0
frontend/src/main.tsx +12 -3
frontend/src/styles/_editor-tokens.css +0 -105
frontend/src/styles/_layout.css +20 -36
frontend/src/styles/_print.css +143 -39

frontend/index.html CHANGED Viewed

@@ -4,6 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Research Article Template Editor</title>
   </head>
   <body>
     <div id="root"></div>

     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Research Article Template Editor</title>
+    <script>
+      (function() {
+        try {
+          var saved = localStorage.getItem('theme');
+          if (saved) {
+            document.documentElement.setAttribute('data-theme', saved);
+          } else {
+            localStorage.setItem('theme', 'dark');
+          }
+        } catch(e) {}
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>

frontend/package-lock.json CHANGED Viewed

The diff for this file is too large to render. See raw diff

frontend/package.json CHANGED Viewed

@@ -6,14 +6,16 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
   },
   "dependencies": {
     "@ai-sdk/react": "^3.0.160",
     "@floating-ui/dom": "^1.7.6",
     "@hocuspocus/provider": "^3.4.4",
     "@tiptap/core": "^3.22.3",
-    "@tiptap/extension-code-block-lowlight": "^3.22.3",
     "@tiptap/extension-collaboration": "^3.22.3",
     "@tiptap/extension-image": "^3.22.3",
     "@tiptap/extension-link": "^3.22.3",
@@ -32,11 +34,13 @@
     "@types/katex": "^0.16.8",
     "ai": "^6.0.158",
     "katex": "^0.16.45",
-    "lowlight": "^3.2.0",
     "lucide-react": "^1.8.0",
     "mermaid": "^11.14.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "tippy.js": "^6.3.7",
     "yjs": "^13.6.0",
     "zod": "^4.3.6"
@@ -45,7 +49,8 @@
     "@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"
   }
 }

   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@ai-sdk/react": "^3.0.160",
     "@floating-ui/dom": "^1.7.6",
     "@hocuspocus/provider": "^3.4.4",
     "@tiptap/core": "^3.22.3",
     "@tiptap/extension-collaboration": "^3.22.3",
     "@tiptap/extension-image": "^3.22.3",
     "@tiptap/extension-link": "^3.22.3",
     "@types/katex": "^0.16.8",
     "ai": "^6.0.158",
     "katex": "^0.16.45",
     "lucide-react": "^1.8.0",
     "mermaid": "^11.14.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "shiki": "^4.0.2",
     "tippy.js": "^6.3.7",
     "yjs": "^13.6.0",
     "zod": "^4.3.6"
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^6.0.3",
+    "vite": "^6.0.0",
+    "vitest": "^4.1.4"
   }
 }

frontend/postcss.config.js DELETED Viewed

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

frontend/src/App.tsx CHANGED Viewed

@@ -1,89 +1,163 @@
-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 { Tooltip } from "./components/Tooltip";
-import {
-  Undo2,
-  Redo2,
-  Settings,
-  Upload,
-  MessageCircle,
-  X,
-} from "lucide-react";
-import { oklchToHex, OKLCH_L, OKLCH_C } from "./editor/frontmatter/HueSlider";
 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 type { CommentStore } from "./editor/comments";
 import type { FrontmatterStore } from "./editor/frontmatter/frontmatter-store";
 import { FrontmatterHero } from "./editor/frontmatter/FrontmatterHero";
 import { SettingsDrawer } from "./editor/frontmatter/SettingsDrawer";
-const DEFAULT_HUE = 47;
-const COLORS = [
-  "#958DF1", "#F98181", "#FBBC88", "#FAF594",
-  "#70CFF8", "#94FADB", "#B9F18D", "#C4B5FD",
-];
-function colorFromName(name: string): string {
-  let hash = 0;
-  for (let i = 0; i < name.length; i++) hash = (hash * 31 + name.charCodeAt(i)) | 0;
-  return COLORS[Math.abs(hash) % COLORS.length];
-}
-function randomFallbackUser(): CollabUser {
-  const names = ["Alice", "Bob", "Carol", "Dave", "Eve", "Frank", "Grace", "Heidi"];
-  const name = names[Math.floor(Math.random() * names.length)];
-  return { name, color: colorFromName(name) };
-}
-export interface CollabUser {
-  name: string;
-  color: string;
-  avatarUrl?: string;
-}
 export default function App() {
-  const [user, setUser] = useState<CollabUser>(randomFallbackUser);
   useEffect(() => {
     fetch("/api/auth/status", { credentials: "include" })
       .then((r) => r.json())
       .then((data) => {
         if (data.authenticated && data.user) {
           setUser({
-            name: data.user.fullName || data.user.name,
             color: colorFromName(data.user.name),
             avatarUrl: data.user.avatarUrl || undefined,
           });
         }
       })
       .catch(() => {});
   }, []);
-  const docName = "default";
   const editorRef = useRef<TiptapEditor | null>(null);
   const editorContainerRef = useRef<HTMLDivElement | null>(null);
   const publishDialogRef = useRef<HTMLDialogElement>(null);
   const [editorInstance, setEditorInstance] = useState<TiptapEditor | null>(null);
   const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);
   const [commentStore, setCommentStore] = useState<CommentStore | null>(null);
   const [frontmatterStore, setFrontmatterStore] = useState<FrontmatterStore | null>(null);
   const [settingsMap, setSettingsMap] = useState<Y.Map<any> | null>(null);
   const [commentDialogOpen, setCommentDialogOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
-  const [publishState, setPublishState] = useState<"idle" | "loading" | "success" | "error">("idle");
   const [publishError, setPublishError] = useState("");
   const selectionRange = useRef<{ from: number; to: number } | null>(null);
-  const [hasSelection, setHasSelection] = useState(false);
-  const [undoManager, setUndoManager] = useState<UndoManager | null>(null);
-  const [chatOpen, setChatOpen] = useState(false);
   // Sync primary hue from Yjs settings to CSS variables
   useEffect(() => {
@@ -91,9 +165,9 @@ export default function App() {
     const sync = () => {
       const h = settingsMap.get("primaryHue") as number | undefined;
       if (h !== undefined) {
-        const oklch = `oklch(${OKLCH_L} ${OKLCH_C} ${h})`;
-        document.documentElement.style.setProperty("--primary-color", oklch);
-        document.documentElement.style.setProperty("--primary-color-hover", oklch);
       }
     };
     sync();
@@ -101,8 +175,17 @@ export default function App() {
     return () => settingsMap.unobserve(sync);
   }, [settingsMap]);
-  const agentChat = useAgentChat({ editor: editorInstance, undoManager, frontmatterStore });
   useEffect(() => {
     if (!editorInstance) return;
     const handler = () => {
@@ -113,6 +196,189 @@ export default function App() {
     return () => { editorInstance.off("selectionUpdate", handler); };
   }, [editorInstance]);
   const editorContainerCallback = useCallback((node: HTMLDivElement | null) => {
     editorContainerRef.current = node;
     setContainerEl(node);
@@ -123,21 +389,25 @@ export default function App() {
     setEditorInstance(editor);
   }, []);
-  const onCommentStoreReady = useCallback((store: CommentStore) => {
-    setCommentStore(store);
   }, []);
-  const onFrontmatterStoreReady = useCallback((store: FrontmatterStore) => {
-    setFrontmatterStore(store);
-  }, []);
-  const onSettingsMapReady = useCallback((map: Y.Map<any>) => {
-    setSettingsMap(map);
-  }, []);
   const openPublishDialog = useCallback(() => {
     setPublishState("idle");
     setPublishError("");
     publishDialogRef.current?.showModal();
   }, []);
@@ -145,9 +415,18 @@ export default function App() {
     publishDialogRef.current?.close();
   }, []);
   const handlePublish = useCallback(async () => {
     setPublishState("loading");
     setPublishError("");
     try {
       const res = await fetch("/api/publish", {
         method: "POST",
@@ -155,24 +434,78 @@ export default function App() {
         credentials: "include",
         body: JSON.stringify({ docName }),
       });
       if (!res.ok) {
         const data = await res.json().catch(() => ({ error: "Publish failed" }));
         throw new Error(data.error || "Publish failed");
       }
-      setPublishState("success");
     } catch (err: any) {
       setPublishState("error");
       setPublishError(err.message || "Unknown error");
     }
   }, [docName]);
   const handleAddComment = useCallback(() => {
     const editor = editorRef.current;
     if (!editor) return;
     const { from, to } = editor.state.selection;
     if (from === to) return;
     selectionRange.current = { from, to };
     setCommentDialogOpen(true);
   }, []);
@@ -203,78 +536,47 @@ export default function App() {
     selectionRange.current = null;
   }, [commentStore, user]);
   return (
-    <div
-      className="editor-app"
-      style={{
-        height: "100vh",
-        display: "flex",
-        flexDirection: "column",
-        background: "var(--ed-bg)",
-        overflow: "hidden",
-      }}
-    >
-      {/* Top bar */}
-      <div className="top-bar">
-        <Tooltip title="Undo">
-          <button
-            className="icon-btn"
-            onClick={() => editorInstance?.commands.undo()}
-            aria-label="Undo"
-          >
-            <Undo2 size={18} />
-          </button>
-        </Tooltip>
-        <Tooltip title="Redo">
-          <button
-            className="icon-btn"
-            onClick={() => editorInstance?.commands.redo()}
-            aria-label="Redo"
-          >
-            <Redo2 size={18} />
-          </button>
-        </Tooltip>
-        <span className="divider-v" />
-        <Tooltip title="Article settings">
-          <button
-            className="icon-btn"
-            onClick={() => setSettingsOpen(true)}
-            aria-label="Article settings"
-          >
-            <Settings size={18} />
-          </button>
-        </Tooltip>
-        <span className="divider-v" />
-        <Tooltip title="Publish article">
-          <button
-            className="icon-btn icon-btn--primary"
-            onClick={openPublishDialog}
-            aria-label="Publish article"
-          >
-            <Upload size={18} />
-          </button>
-        </Tooltip>
-        <span
-          className="chip"
-          style={{ backgroundColor: user.color, color: "#000", marginLeft: 4 }}
-        >
-          {user.avatarUrl && <img src={user.avatarUrl} alt="" />}
-          {user.name}
-        </span>
-      </div>
-      {/* Single scroll container */}
       <div
         ref={editorContainerCallback}
-        style={{ flex: 1, overflowY: "auto", overflowX: "hidden" }}
       >
         <div className="content-grid">
           <div className="content-grid__hero">
-            <FrontmatterHero store={frontmatterStore} />
           </div>
           <div className="content-grid__toc">
             <div className="table-of-contents--sticky">
-              <TableOfContents editor={editorInstance} />
             </div>
           </div>
           <div className="content-grid__editor">
@@ -284,46 +586,41 @@ export default function App() {
               editorRef={editorRef}
               onCommentStoreReady={onCommentStoreReady}
               onFrontmatterStoreReady={onFrontmatterStoreReady}
               onSettingsMapReady={onSettingsMapReady}
               onEditorReady={onEditorReady}
               onUndoManagerReady={setUndoManager}
               onAddComment={handleAddComment}
             />
           </div>
-          <div className="content-grid__comments">
-            <CommentsSidebar
-              editor={editorInstance}
-              commentStore={commentStore}
-              user={user}
-              editorContainer={containerEl}
-            />
-          </div>
         </div>
       </div>
-      {/* Floating chat */}
       {chatOpen ? (
         <div className="chat-floating">
-          <div className="chat-floating__header">
-            <span className="chat-floating__title">AI Assistant</span>
-            <button className="icon-btn" onClick={() => setChatOpen(false)} aria-label="Close chat">
-              <X size={16} />
-            </button>
-          </div>
-          <div className="chat-floating__body">
-            <ChatPanel
-              messages={agentChat.messages}
-              isLoading={agentChat.isLoading}
-              error={agentChat.error}
-              input={agentChat.input}
-              hasSelection={hasSelection}
-              onSend={agentChat.sendMessage}
-              onQuickAction={agentChat.sendQuickAction}
-              onSetInput={agentChat.setInput}
-              onStop={agentChat.stop}
-              onNewChat={() => window.location.reload()}
-            />
-          </div>
         </div>
       ) : (
         <Tooltip title="AI Assistant" placement="right">
@@ -350,53 +647,36 @@ export default function App() {
         settingsMap={settingsMap}
       />
-      {/* Publish dialog (native <dialog>) */}
-      <dialog
         ref={publishDialogRef}
-        className="ed-dialog"
         onClose={closePublishDialog}
-      >
-        <h2 className="ed-dialog__title">
-          {publishState === "success" ? "Published!" : "Publish article"}
-        </h2>
-        <div className="ed-dialog__body">
-          {publishState === "idle" && (
-            <p>
-              This will generate a static HTML page, PDF, and thumbnail
-              from the current document. Visitors without edit access
-              will see the published version.
-            </p>
-          )}
-          {publishState === "loading" && (
-            <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "8px 0" }}>
-              <span className="spinner" />
-              <p style={{ margin: 0 }}>Publishing...</p>
-            </div>
-          )}
-          {publishState === "success" && (
-            <p>
-              Article published successfully. Visitors will now see
-              the updated version.
-            </p>
-          )}
-          {publishState === "error" && (
-            <p style={{ color: "var(--ed-error)" }}>
-              {publishError || "An error occurred while publishing."}
-            </p>
-          )}
-        </div>
-        <div className="ed-dialog__actions">
-          {publishState === "idle" && (
-            <>
-              <button className="btn" onClick={closePublishDialog}>Cancel</button>
-              <button className="btn btn--primary" onClick={handlePublish}>Publish</button>
-            </>
-          )}
-          {(publishState === "success" || publishState === "error") && (
-            <button className="btn" onClick={closePublishDialog}>Close</button>
-          )}
-        </div>
-      </dialog>
     </div>
   );
 }

+import { useRef, useState, useCallback, useEffect } from "react";
 import { Editor as TiptapEditor } from "@tiptap/core";
 import { UndoManager } from "yjs";
 import type * as Y from "yjs";
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import { MessageCircle } from "lucide-react";
 import { Tooltip } from "./components/Tooltip";
+import { oklchFromHue } from "#shared/theme";
 import { Editor } from "./editor/Editor";
+import { CommentMarginIcons } from "./components/CommentPopover";
 import { CommentDialog } from "./components/CommentDialog";
+import { ChatPanel, type ModelOption } from "./components/ChatPanel";
 import { TableOfContents } from "./components/TableOfContents";
+import { TopBar } from "./components/TopBar";
+import { PublishDialog, type PublishState, type PublishStageEvent } from "./components/PublishDialog";
+import { MobileTocSidebar } from "./components/MobileTocSidebar";
 import { useAgentChat } from "./hooks/useAgentChat";
+import { usePublishStatus } from "./hooks/usePublishStatus";
 import type { CommentStore } from "./editor/comments";
 import type { FrontmatterStore } from "./editor/frontmatter/frontmatter-store";
+import type { EmbedStore } from "./editor/embeds/embed-store";
 import { FrontmatterHero } from "./editor/frontmatter/FrontmatterHero";
 import { SettingsDrawer } from "./editor/frontmatter/SettingsDrawer";
+import { EditorFooter } from "./editor/EditorFooter";
+import { EmbedStudio } from "./components/EmbedStudio";
+import type { UIMessage } from "ai";
+import { loadMessages, saveMessages } from "./utils/chat-persistence";
+import { stableFallbackUser, colorFromName, type CollabUser } from "./utils/user";
+// Re-exported for any downstream code that still imports from App.tsx
+export type { CollabUser } from "./utils/user";
 export default function App() {
+  // --- Identity & auth ---------------------------------------------------
+  const [user, setUser] = useState<CollabUser>(stableFallbackUser);
+  const [loginUrl, setLoginUrl] = useState<string | null>(null);
+  const [isAuthenticated, setIsAuthenticated] = useState(true);
+  const [chatUserId, setChatUserId] = useState(() => user.name);
   useEffect(() => {
     fetch("/api/auth/status", { credentials: "include" })
       .then((r) => r.json())
       .then((data) => {
+        setIsAuthenticated(data.authenticated);
         if (data.authenticated && data.user) {
+          const name = data.user.fullName || data.user.name;
           setUser({
+            name,
             color: colorFromName(data.user.name),
             avatarUrl: data.user.avatarUrl || undefined,
           });
+          setChatUserId(data.user.name);
+          setLoginUrl(null);
+        } else if (data.loginUrl) {
+          setLoginUrl(data.loginUrl);
         }
       })
       .catch(() => {});
   }, []);
+  // --- Document / editor refs -------------------------------------------
+  const docName = "default";
   const editorRef = useRef<TiptapEditor | null>(null);
   const editorContainerRef = useRef<HTMLDivElement | null>(null);
+  const providerRef = useRef<HocuspocusProvider | null>(null);
   const publishDialogRef = useRef<HTMLDialogElement>(null);
   const [editorInstance, setEditorInstance] = useState<TiptapEditor | null>(null);
   const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);
   const [commentStore, setCommentStore] = useState<CommentStore | null>(null);
   const [frontmatterStore, setFrontmatterStore] = useState<FrontmatterStore | null>(null);
+  const [embedStore, setEmbedStore] = useState<EmbedStore | null>(null);
   const [settingsMap, setSettingsMap] = useState<Y.Map<any> | null>(null);
+  const [undoManager, setUndoManager] = useState<UndoManager | null>(null);
+  const [isEditorReady, setIsEditorReady] = useState(false);
+  const [hasSelection, setHasSelection] = useState(false);
+  // --- UI state ---------------------------------------------------------
   const [commentDialogOpen, setCommentDialogOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [chatOpen, setChatOpen] = useState(false);
+  const [embedStudioSrc, setEmbedStudioSrc] = useState<string | null>(null);
+  const [tocSidebarOpen, setTocSidebarOpen] = useState(false);
+  const [tocAutoCollapse, setTocAutoCollapse] = useState(false);
+  const [publishState, setPublishState] = useState<PublishState>("idle");
   const [publishError, setPublishError] = useState("");
+  const [publishStage, setPublishStage] = useState<PublishStageEvent | null>(null);
+  const [yDoc, setYDoc] = useState<Y.Doc | null>(null);
   const selectionRange = useRef<{ from: number; to: number } | null>(null);
+  const publishStatus = usePublishStatus(yDoc);
+  // --- Theme ------------------------------------------------------------
+  const [theme, setTheme] = useState<"light" | "dark">(() => {
+    return (document.documentElement.getAttribute("data-theme") as "light" | "dark") || "dark";
+  });
+  useEffect(() => {
+    const saved = localStorage.getItem("theme") as "light" | "dark" | null;
+    if (saved) {
+      document.documentElement.setAttribute("data-theme", saved);
+      setTheme(saved);
+    }
+  }, []);
+  const toggleTheme = useCallback(() => {
+    const next = theme === "dark" ? "light" : "dark";
+    document.documentElement.setAttribute("data-theme", next);
+    localStorage.setItem("theme", next);
+    setTheme(next);
+  }, [theme]);
+  // --- Model list -------------------------------------------------------
+  const [models, setModels] = useState<ModelOption[]>([]);
+  const [selectedModel, setSelectedModel] = useState("");
+  const modelRef = useRef("");
+  useEffect(() => {
+    fetch("/api/models")
+      .then((r) => r.json())
+      .then((data: ModelOption[]) => {
+        setModels(data);
+        if (data.length > 0 && !modelRef.current) {
+          setSelectedModel(data[0].id);
+          modelRef.current = data[0].id;
+        }
+      })
+      .catch(() => {});
+  }, []);
+  const handleModelChange = useCallback((id: string) => {
+    setSelectedModel(id);
+    modelRef.current = id;
+  }, []);
+  // --- Effects tied to stores -------------------------------------------
+  // Sync TOC auto-collapse flag from frontmatter
+  useEffect(() => {
+    if (!frontmatterStore) return;
+    const sync = () => {
+      setTocAutoCollapse(frontmatterStore.get("tableOfContentsAutoCollapse") as boolean);
+    };
+    sync();
+    return frontmatterStore.observe(sync);
+  }, [frontmatterStore]);
+  // Fallback: dismiss spinner after 5s even if sync hasn't fired
+  useEffect(() => {
+    if (isEditorReady) return;
+    const id = setTimeout(() => setIsEditorReady(true), 5000);
+    return () => clearTimeout(id);
+  }, [isEditorReady]);
   // Sync primary hue from Yjs settings to CSS variables
   useEffect(() => {
     const sync = () => {
       const h = settingsMap.get("primaryHue") as number | undefined;
       if (h !== undefined) {
+        // Only override --primary-base: _variables.css derives --primary-color
+        // and --primary-color-hover from it via CSS relative-color syntax.
+        document.documentElement.style.setProperty("--primary-base", oklchFromHue(h));
       }
     };
     sync();
     return () => settingsMap.unobserve(sync);
   }, [settingsMap]);
+  // Listen for embed studio open events from HtmlEmbedView
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const src = (e as CustomEvent).detail?.src;
+      if (src) setEmbedStudioSrc(src);
+    };
+    window.addEventListener("open-embed-studio", handler);
+    return () => window.removeEventListener("open-embed-studio", handler);
+  }, []);
+  // Track whether the editor has a non-empty selection (for chat quick actions)
   useEffect(() => {
     if (!editorInstance) return;
     const handler = () => {
     return () => { editorInstance.off("selectionUpdate", handler); };
   }, [editorInstance]);
+  // --- Chat / agent -----------------------------------------------------
+  const chatUserIdRef = useRef(chatUserId);
+  chatUserIdRef.current = chatUserId;
+  const handleArticleChatChange = useCallback((msgs: UIMessage[]) => {
+    saveMessages(chatUserIdRef.current, "article", msgs);
+  }, []);
+  const agentChat = useAgentChat({
+    editor: editorInstance,
+    undoManager,
+    frontmatterStore,
+    modelRef,
+    onMessagesChange: handleArticleChatChange,
+  });
+  // Restore persisted messages after mount and when user identity changes
+  const agentSetMessagesRef = useRef(agentChat.setMessages);
+  agentSetMessagesRef.current = agentChat.setMessages;
+  const chatUserIdLoadedRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (chatUserIdLoadedRef.current === chatUserId) return;
+    chatUserIdLoadedRef.current = chatUserId;
+    const stored = loadMessages(chatUserId, "article");
+    if (stored && stored.length > 0) {
+      agentSetMessagesRef.current(stored);
+    }
+  }, [chatUserId]);
+  // Dev-only hook: let the demo recording script script-drive the main
+  // chat panel. The Playwright trio script dispatches `__demo-chat` to:
+  //   - open the floating chat panel,
+  //   - inject a fake user prompt + assistant reply,
+  //   - optionally rewrite a paragraph in the editor body,
+  // all without waiting for a real LLM round-trip.
+  useEffect(() => {
+    if (!import.meta.env.DEV) return;
+    const handler = (event: Event) => {
+      const detail = (event as CustomEvent).detail as
+        | {
+            open?: boolean;
+            messages?: UIMessage[];
+            replace?: { from: string; to: string };
+          }
+        | undefined;
+      if (typeof detail?.open === "boolean") setChatOpen(detail.open);
+      if (Array.isArray(detail?.messages)) {
+        agentSetMessagesRef.current(detail.messages);
+      }
+      if (detail?.replace && editorRef.current) {
+        const editor = editorRef.current;
+        const target = detail.replace.from;
+        const replacement = detail.replace.to;
+        // Robust target lookup: ProseMirror text can be split across
+        // multiple text nodes within the same block (marks, Yjs splits),
+        // so we walk textblocks and search the joined textContent rather
+        // than individual text nodes. `textBetween` on the block gives
+        // us a char-accurate string whose offsets map directly to PM
+        // positions inside that block.
+        let from = -1;
+        let to = -1;
+        editor.state.doc.descendants((node, pos) => {
+          if (from !== -1) return false;
+          if (node.isTextblock) {
+            const text = node.textBetween(0, node.content.size, "\n", "\n");
+            const idx = text.indexOf(target);
+            if (idx !== -1) {
+              from = pos + 1 + idx;
+              to = from + target.length;
+              return false;
+            }
+          }
+          return true;
+        });
+        if (from === -1 || to === -1) {
+          console.warn(
+            "[__demo-chat] replace target not found:",
+            target.slice(0, 40) + (target.length > 40 ? "..." : ""),
+          );
+          return;
+        }
+        // Resolve the paragraph DOM element once so we can both scroll
+        // it into view AND flag it with a highlight class for the
+        // duration of the animation (see `.demo-agent-rewriting` in
+        // _ui.css). Without that visual cue the rewrite can be hard
+        // to spot when the chat panel is open and the viewer's eyes
+        // are in the chat.
+        //
+        // If the demo script previously marked this paragraph as
+        // `.demo-agent-pending` (badge + breathing border) we prefer
+        // that element: it's the exact node the viewer has been looking
+        // at while the chat was streaming. Falling back to a PM
+        // position lookup keeps the handler usable outside the demo.
+        let paragraphEl: HTMLElement | null =
+          document.querySelector<HTMLElement>(".demo-agent-pending");
+        if (!paragraphEl) {
+          try {
+            const domAt = editor.view.domAtPos(from);
+            let el: HTMLElement | null =
+              domAt.node instanceof HTMLElement
+                ? domAt.node
+                : domAt.node.parentElement;
+            while (el && el.nodeName !== "P" && !/^H[1-6]$/.test(el.nodeName)) {
+              el = el.parentElement;
+            }
+            paragraphEl = el;
+          } catch {
+            /* non-fatal */
+          }
+        }
+        // Animated rewrite: highlight target first so the viewer sees
+        // what the agent is about to change, then delete and retype the
+        // replacement character by character for a visible, live feel.
+        editor.chain().focus().setTextSelection({ from, to }).run();
+        if (paragraphEl) {
+          // Swap pending -> rewriting so the badge stays visible but
+          // the border animation ramps up from "thinking" to "writing".
+          paragraphEl.classList.remove("demo-agent-pending");
+          paragraphEl.classList.add("demo-agent-rewriting");
+          if (typeof paragraphEl.scrollIntoView === "function") {
+            paragraphEl.scrollIntoView({
+              behavior: "smooth",
+              block: "center",
+            });
+          }
+        }
+        const startPos = from;
+        const originalLength = to - from;
+        window.setTimeout(() => {
+          if (!editorRef.current) return;
+          editorRef.current
+            .chain()
+            .focus()
+            .setTextSelection({ from: startPos, to: startPos + originalLength })
+            .deleteSelection()
+            .run();
+          let i = 0;
+          const total = replacement.length;
+          const step = () => {
+            if (!editorRef.current) return;
+            if (i >= total) {
+              // Animation done: remove the highlight after a brief
+              // settle delay so the viewer can see the final result
+              // glow once before it fades back to normal.
+              if (paragraphEl) {
+                window.setTimeout(
+                  () => paragraphEl?.classList.remove("demo-agent-rewriting"),
+                  700,
+                );
+              }
+              return;
+            }
+            const nextChunk = Math.min(
+              total - i,
+              1 + Math.floor(Math.random() * 2),
+            );
+            const slice = replacement.slice(i, i + nextChunk);
+            editorRef.current
+              .chain()
+              .focus()
+              .insertContentAt(startPos + i, slice)
+              .run();
+            i += nextChunk;
+            window.setTimeout(step, 22 + Math.random() * 26);
+          };
+          step();
+        }, 520);
+      }
+    };
+    window.addEventListener("__demo-chat", handler);
+    return () => window.removeEventListener("__demo-chat", handler);
+  }, []);
+  // --- Editor lifecycle callbacks ---------------------------------------
   const editorContainerCallback = useCallback((node: HTMLDivElement | null) => {
     editorContainerRef.current = node;
     setContainerEl(node);
     setEditorInstance(editor);
   }, []);
+  const onProviderReady = useCallback((provider: HocuspocusProvider) => {
+    providerRef.current = provider;
+    setYDoc(provider.document);
+    provider.on("synced", () => setIsEditorReady(true));
   }, []);
+  const onCommentStoreReady = useCallback((store: CommentStore) => setCommentStore(store), []);
+  const onFrontmatterStoreReady = useCallback((store: FrontmatterStore) => setFrontmatterStore(store), []);
+  const onEmbedStoreReady = useCallback((store: EmbedStore) => setEmbedStore(store), []);
+  const onSettingsMapReady = useCallback((map: Y.Map<any>) => setSettingsMap(map), []);
+  // --- Publish flow -----------------------------------------------------
+  const publishEventSourceRef = useRef<EventSource | null>(null);
   const openPublishDialog = useCallback(() => {
     setPublishState("idle");
     setPublishError("");
+    setPublishStage(null);
     publishDialogRef.current?.showModal();
   }, []);
     publishDialogRef.current?.close();
   }, []);
+  useEffect(() => {
+    return () => {
+      publishEventSourceRef.current?.close();
+      publishEventSourceRef.current = null;
+    };
+  }, []);
   const handlePublish = useCallback(async () => {
     setPublishState("loading");
     setPublishError("");
+    setPublishStage(null);
     try {
       const res = await fetch("/api/publish", {
         method: "POST",
         credentials: "include",
         body: JSON.stringify({ docName }),
       });
+      if (res.status === 409) {
+        const data = await res.json().catch(() => ({ error: "Publish already in progress" }));
+        throw new Error(
+          data.userName
+            ? `${data.userName} is already publishing. Please wait.`
+            : "A publish is already in progress. Please wait."
+        );
+      }
       if (!res.ok) {
         const data = await res.json().catch(() => ({ error: "Publish failed" }));
         throw new Error(data.error || "Publish failed");
       }
+      const { jobId } = (await res.json()) as { jobId: string };
+      if (!jobId) throw new Error("No job id returned");
+      // Open the SSE stream and forward stage events to the dialog.
+      const es = new EventSource(`/api/publish/stream?jobId=${encodeURIComponent(jobId)}`, {
+        withCredentials: true,
+      });
+      publishEventSourceRef.current = es;
+      es.addEventListener("stage", (e: MessageEvent) => {
+        try {
+          const payload = JSON.parse(e.data) as PublishStageEvent;
+          setPublishStage(payload);
+        } catch {
+          // ignore malformed payloads
+        }
+      });
+      es.addEventListener("done", (e: MessageEvent) => {
+        try {
+          const payload = JSON.parse(e.data) as { success: boolean; error?: string };
+          if (payload.success) {
+            setPublishState("success");
+          } else {
+            setPublishState("error");
+            setPublishError(payload.error || "Publish failed");
+          }
+        } catch {
+          setPublishState("error");
+          setPublishError("Malformed server event");
+        } finally {
+          es.close();
+          publishEventSourceRef.current = null;
+        }
+      });
+      es.onerror = () => {
+        // Network blip or server closed the stream unexpectedly. If we haven't
+        // already reached a terminal state, mark the publish as errored.
+        if (es.readyState === EventSource.CLOSED) {
+          publishEventSourceRef.current = null;
+          setPublishState((prev) => (prev === "loading" ? "error" : prev));
+          setPublishError((prev) => prev || "Connection to publish stream lost");
+        }
+      };
     } catch (err: any) {
       setPublishState("error");
       setPublishError(err.message || "Unknown error");
     }
   }, [docName]);
+  // --- Comment flow -----------------------------------------------------
   const handleAddComment = useCallback(() => {
     const editor = editorRef.current;
     if (!editor) return;
     const { from, to } = editor.state.selection;
     if (from === to) return;
     selectionRange.current = { from, to };
     setCommentDialogOpen(true);
   }, []);
     selectionRange.current = null;
   }, [commentStore, user]);
+  // --- Render -----------------------------------------------------------
   return (
+    <div className="editor-app">
+      <TopBar
+        editorInstance={editorInstance}
+        providerRef={providerRef}
+        docName={docName}
+        theme={theme}
+        user={user}
+        loginUrl={loginUrl}
+        isAuthenticated={isAuthenticated}
+        isPublishing={publishStatus.active}
+        publishingUserName={publishStatus.userName}
+        onToggleTheme={toggleTheme}
+        onOpenSettings={() => setSettingsOpen(true)}
+        onOpenPublish={openPublishDialog}
+        onOpenMobileToc={() => setTocSidebarOpen(true)}
+      />
+      {!isEditorReady && (
+        <div className="editor-loading-overlay">
+          <span className="spinner spinner--lg" />
+        </div>
+      )}
       <div
         ref={editorContainerCallback}
+        className={isEditorReady ? "editor-scroll editor-scroll--ready" : "editor-scroll"}
       >
         <div className="content-grid">
           <div className="content-grid__hero">
+            <FrontmatterHero store={frontmatterStore} embedStore={embedStore} />
           </div>
           <div className="content-grid__toc">
             <div className="table-of-contents--sticky">
+              <TableOfContents
+                editor={editorInstance}
+                scrollContainer={containerEl}
+                autoCollapse={tocAutoCollapse}
+              />
             </div>
           </div>
           <div className="content-grid__editor">
               editorRef={editorRef}
               onCommentStoreReady={onCommentStoreReady}
               onFrontmatterStoreReady={onFrontmatterStoreReady}
+              onEmbedStoreReady={onEmbedStoreReady}
               onSettingsMapReady={onSettingsMapReady}
               onEditorReady={onEditorReady}
               onUndoManagerReady={setUndoManager}
+              onProviderReady={onProviderReady}
               onAddComment={handleAddComment}
             />
           </div>
         </div>
+        <EditorFooter store={frontmatterStore} editor={editorInstance} />
+        <CommentMarginIcons
+          editor={editorInstance}
+          commentStore={commentStore}
+          user={user}
+        />
       </div>
       {chatOpen ? (
         <div className="chat-floating">
+          <ChatPanel
+            messages={agentChat.messages}
+            isLoading={agentChat.isLoading}
+            error={agentChat.error}
+            input={agentChat.input}
+            hasSelection={hasSelection}
+            models={models}
+            selectedModel={selectedModel}
+            onModelChange={handleModelChange}
+            onSend={agentChat.sendMessage}
+            onQuickAction={agentChat.sendQuickAction}
+            onSetInput={agentChat.setInput}
+            onStop={agentChat.stop}
+            onNewChat={() => agentChat.clearMessages()}
+            onClose={() => setChatOpen(false)}
+          />
         </div>
       ) : (
         <Tooltip title="AI Assistant" placement="right">
         settingsMap={settingsMap}
       />
+      {embedStudioSrc && (
+        <EmbedStudio
+          key={embedStudioSrc}
+          src={embedStudioSrc}
+          embedStore={embedStore}
+          modelRef={modelRef}
+          userId={chatUserId}
+          onClose={() => setEmbedStudioSrc(null)}
+        />
+      )}
+      <MobileTocSidebar
+        open={tocSidebarOpen}
+        editor={editorInstance}
+        scrollContainer={containerEl}
+        autoCollapse={tocAutoCollapse}
+        theme={theme}
+        onClose={() => setTocSidebarOpen(false)}
+        onToggleTheme={toggleTheme}
+      />
+      <PublishDialog
         ref={publishDialogRef}
+        state={publishState}
+        error={publishError}
+        docName={docName}
+        stageEvent={publishStage}
         onClose={closePublishDialog}
+        onPublish={handlePublish}
+      />
     </div>
   );
 }

frontend/src/components/ChatPanel.tsx CHANGED Viewed

@@ -1,17 +1,29 @@
 import { useState, useRef, useEffect, type KeyboardEvent } from "react";
 import { Tooltip } from "./Tooltip";
 import {
   Send,
   Square,
   Plus,
   Sparkles,
   AlignLeft,
   Expand,
   SpellCheck,
   Languages,
   Shrink,
 } from "lucide-react";
 import type { UIMessage } from "ai";
 interface ChatPanelProps {
   messages: UIMessage[];
@@ -19,11 +31,15 @@ interface ChatPanelProps {
   error: Error | undefined;
   input: string;
   hasSelection: boolean;
   onSend: (content: string) => void;
   onQuickAction: (action: string) => void;
   onSetInput: (value: string) => void;
   onStop: () => void;
   onNewChat: () => void;
 }
 const QUICK_ACTIONS = [
@@ -35,17 +51,49 @@ const QUICK_ACTIONS = [
   { id: "simplify", label: "Simplify", Icon: AlignLeft },
 ];
 export function ChatPanel({
   messages,
   isLoading,
   error,
   input,
   hasSelection,
   onSend,
   onQuickAction,
   onSetInput,
   onStop,
   onNewChat,
 }: ChatPanelProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -70,16 +118,51 @@ export function ChatPanel({
     }
   };
   return (
     <div className="chat-panel">
       {/* Header */}
       <div className="chat-panel__header">
-        <span className="chat-panel__label">Assistant</span>
-        <Tooltip title="New conversation">
-          <button className="icon-btn" onClick={onNewChat} aria-label="New conversation">
-            <Plus size={16} />
-          </button>
-        </Tooltip>
       </div>
       {/* Messages */}
@@ -94,11 +177,8 @@ export function ChatPanel({
           <MessageBubble key={msg.id} message={msg} />
         ))}
-        {isLoading && messages.length > 0 && !messages[messages.length - 1]?.content && (
-          <div className="chat-panel__thinking">
-            <span className="spinner" style={{ width: 12, height: 12, borderWidth: 2 }} />
-            <span>Thinking...</span>
-          </div>
         )}
         {error && (
@@ -162,7 +242,7 @@ function MessageBubble({ message }: { message: UIMessage }) {
   const parts = message.parts ?? [];
   const textParts = parts.filter((p) => p.type === "text");
-  const toolParts = parts.filter((p) => p.type === "tool-invocation");
   const textContent = textParts.length > 0
     ? textParts.map((p) => (p as { type: "text"; text: string }).text).join("")
     : (message as any).content ?? "";
@@ -173,23 +253,19 @@ function MessageBubble({ message }: { message: UIMessage }) {
     <div className="chat-bubble">
       {textContent && (
         <div className={`chat-bubble__text ${isUser ? "chat-bubble__text--user" : ""}`}>
-          {textContent}
         </div>
       )}
       {toolParts.map((part, i) => {
-        const tool = part as { type: "tool-invocation"; toolInvocation: { toolName: string; state: string; result?: unknown } };
         return (
           <div key={i} className="chat-bubble__tool">
             <Sparkles size={12} />
-            <span>
-              {toolLabel(tool.toolInvocation.toolName)}
-              {tool.toolInvocation.state === "result" && tool.toolInvocation.result
-                ? ` - ${tool.toolInvocation.result}`
-                : tool.toolInvocation.state === "call"
-                  ? " (executing...)"
-                  : ""}
-            </span>
           </div>
         );
       })}
@@ -197,14 +273,51 @@ function MessageBubble({ message }: { message: UIMessage }) {
   );
 }
-function toolLabel(name: string): string {
-  const labels: Record<string, string> = {
-    replaceSelection: "Replaced selection",
-    insertAtCursor: "Inserted text",
-    applyDiff: "Applied edit",
-    updateFrontmatter: "Updated metadata",
-    addAuthor: "Added author",
-    removeAuthor: "Removed author",
-  };
-  return labels[name] || name;
 }

 import { useState, useRef, useEffect, type KeyboardEvent } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { Tooltip } from "./Tooltip";
 import {
   Send,
   Square,
   Plus,
+  X,
   Sparkles,
   AlignLeft,
   Expand,
   SpellCheck,
   Languages,
   Shrink,
+  Loader,
 } from "lucide-react";
 import type { UIMessage } from "ai";
+import { isToolPart, normalizeToolPart } from "../utils/ai-tool-parts";
+export interface ModelOption {
+  id: string;
+  label: string;
+  context: string;
+  cost: string;
+}
 interface ChatPanelProps {
   messages: UIMessage[];
   error: Error | undefined;
   input: string;
   hasSelection: boolean;
+  models: ModelOption[];
+  selectedModel: string;
+  onModelChange: (modelId: string) => void;
   onSend: (content: string) => void;
   onQuickAction: (action: string) => void;
   onSetInput: (value: string) => void;
   onStop: () => void;
   onNewChat: () => void;
+  onClose?: () => void;
 }
 const QUICK_ACTIONS = [
   { id: "simplify", label: "Simplify", Icon: AlignLeft },
 ];
+function TokenGauge({ tokens, ratio }: { tokens: number; ratio: number }) {
+  const r = 8;
+  const circ = 2 * Math.PI * r;
+  const offset = circ * (1 - ratio);
+  const color = ratio > 0.8 ? "var(--ed-error)" : ratio > 0.5 ? "#ff9800" : "var(--ed-text-disabled)";
+  const label = tokens < 1000 ? `${tokens}` : `${(tokens / 1000).toFixed(1)}k`;
+  if (tokens === 0) return null;
+  return (
+    <Tooltip title={`~${label} tokens used`}>
+      <div className="token-gauge" style={{ display: "inline-flex", alignItems: "center", cursor: "default" }}>
+        <svg width="18" height="18" viewBox="0 0 20 20" style={{ transform: "rotate(-90deg)" }}>
+          <circle cx="10" cy="10" r={r} fill="none" stroke="var(--ed-border)" strokeWidth="2" />
+          <circle
+            cx="10" cy="10" r={r}
+            fill="none" stroke={color} strokeWidth="2"
+            strokeDasharray={circ}
+            strokeDashoffset={offset}
+            strokeLinecap="round"
+            style={{ transition: "stroke-dashoffset 300ms ease, stroke 300ms ease" }}
+          />
+        </svg>
+      </div>
+    </Tooltip>
+  );
+}
 export function ChatPanel({
   messages,
   isLoading,
   error,
   input,
   hasSelection,
+  models,
+  selectedModel,
+  onModelChange,
   onSend,
   onQuickAction,
   onSetInput,
   onStop,
   onNewChat,
+  onClose,
 }: ChatPanelProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
     }
   };
+  const estimatedTokens = messages.reduce((sum, msg) => {
+    const text = msg.parts
+      ?.filter((p) => p.type === "text")
+      .map((p) => (p as { type: "text"; text: string }).text)
+      .join("") ?? "";
+    return sum + Math.ceil(text.length / 4);
+  }, 0);
+  const selectedModelInfo = models.find((m) => m.id === selectedModel);
+  const contextLimit = selectedModelInfo
+    ? parseFloat(selectedModelInfo.context) * 1000
+    : 200_000;
+  const usageRatio = Math.min(estimatedTokens / contextLimit, 1);
   return (
     <div className="chat-panel">
       {/* Header */}
       <div className="chat-panel__header">
+        <span className="chat-panel__label">AI Assistant</span>
+        <div className="chat-panel__header-right">
+          <TokenGauge tokens={estimatedTokens} ratio={usageRatio} />
+          {models.length > 0 && (
+            <select
+              className="chat-panel__model-select"
+              value={selectedModel}
+              onChange={(e) => onModelChange(e.target.value)}
+            >
+              {models.map((m) => (
+                <option key={m.id} value={m.id}>
+                  {m.label} ({m.context}) {m.cost}
+                </option>
+              ))}
+            </select>
+          )}
+          <Tooltip title="New conversation">
+            <button className="icon-btn icon-btn--sm" onClick={onNewChat} aria-label="New conversation">
+              <Plus size={14} />
+            </button>
+          </Tooltip>
+          {onClose && (
+            <button className="icon-btn icon-btn--sm" onClick={onClose} aria-label="Close chat">
+              <X size={14} />
+            </button>
+          )}
+        </div>
       </div>
       {/* Messages */}
           <MessageBubble key={msg.id} message={msg} />
         ))}
+        {isLoading && messages.length > 0 && (
+          <AgentStatus messages={messages} />
         )}
         {error && (
   const parts = message.parts ?? [];
   const textParts = parts.filter((p) => p.type === "text");
+  const toolParts = parts.filter(isToolPart);
   const textContent = textParts.length > 0
     ? textParts.map((p) => (p as { type: "text"; text: string }).text).join("")
     : (message as any).content ?? "";
     <div className="chat-bubble">
       {textContent && (
         <div className={`chat-bubble__text ${isUser ? "chat-bubble__text--user" : ""}`}>
+          {isUser ? textContent : (
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{textContent}</ReactMarkdown>
+          )}
         </div>
       )}
       {toolParts.map((part, i) => {
+        const tool = normalizeToolPart(part);
+        if (!tool) return null;
         return (
           <div key={i} className="chat-bubble__tool">
             <Sparkles size={12} />
+            <span>{toolLabel(tool.toolName, tool.state)}</span>
           </div>
         );
       })}
   );
 }
+const TOOL_LABELS: Record<string, [string, string]> = {
+  replaceSelection: ["Replacing selection...", "Replaced selection"],
+  insertAtCursor: ["Inserting text...", "Inserted text"],
+  applyDiff: ["Applying edit...", "Applied edit"],
+  updateFrontmatter: ["Updating metadata...", "Updated metadata"],
+  addAuthor: ["Adding author...", "Added author"],
+  removeAuthor: ["Removing author...", "Removed author"],
+};
+function toolLabel(name: string, state: string): string {
+  const pair = TOOL_LABELS[name];
+  if (!pair) return name;
+  return state === "result" ? pair[1] : pair[0];
+}
+function AgentStatus({ messages }: { messages: UIMessage[] }) {
+  const last = messages[messages.length - 1];
+  if (!last) return null;
+  if (last.role === "assistant") {
+    const parts = last.parts ?? [];
+    const runningTools = parts
+      .map((p) => normalizeToolPart(p))
+      .filter((t): t is NonNullable<typeof t> => t !== null && t.state !== "result")
+      .map((t) => t.toolName);
+    if (runningTools.length > 0) {
+      const label = TOOL_LABELS[runningTools[runningTools.length - 1]];
+      const text = label ? label[0] : runningTools[runningTools.length - 1];
+      return (
+        <div className="chat-panel__thinking">
+          <Loader size={13} className="spin" />
+          <span className="shimmer-text">{text}</span>
+        </div>
+      );
+    }
+    const hasText = parts.some((p) => p.type === "text" && (p as any).text?.trim());
+    if (hasText) return null;
+  }
+  return (
+    <div className="chat-panel__thinking">
+      <Loader size={13} className="spin" />
+      <span className="shimmer-text">Thinking...</span>
+    </div>
+  );
 }

frontend/src/components/CommentPopover.tsx ADDED Viewed

	@@ -0,0 +1,293 @@

+import { useState, useEffect, useCallback, useRef } from "react";
+import { CheckCircle, Trash2, Send, MessageCircle } from "lucide-react";
+import type { Editor } from "@tiptap/core";
+import type { CommentStore, CommentData } from "../editor/comments";
+interface Props {
+  editor: Editor | null;
+  commentStore: CommentStore | null;
+  user: { name: string; color: string; avatarUrl?: string };
+}
+interface CommentPosition {
+  id: string;
+  top: number;
+}
+function buildMarkPositions(editor: Editor): Map<string, number> {
+  const map = new Map<string, number>();
+  editor.state.doc.descendants((node, pos) => {
+    for (const mark of node.marks) {
+      if (mark.type.name === "comment" && !map.has(mark.attrs.commentId)) {
+        map.set(mark.attrs.commentId, pos);
+      }
+    }
+  });
+  return map;
+}
+export function CommentMarginIcons({ editor, commentStore, user }: Props) {
+  const [positions, setPositions] = useState<CommentPosition[]>([]);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [activeComment, setActiveComment] = useState<CommentData | null>(null);
+  const [replyText, setReplyText] = useState("");
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const replyInputRef = useRef<HTMLTextAreaElement>(null);
+  const activeIdRef = useRef<string | null>(null);
+  activeIdRef.current = activeId;
+  const updatePositions = useCallback(() => {
+    if (!editor || !commentStore) return;
+    if (activeIdRef.current) return; // freeze while popover open
+    const comments = commentStore.getAll().filter((c) => !c.resolved);
+    if (comments.length === 0) {
+      setPositions([]);
+      return;
+    }
+    const scrollParent = editor.view.dom.closest(".editor-scroll");
+    if (!scrollParent) return;
+    const scrollTop = scrollParent.scrollTop;
+    const scrollRect = scrollParent.getBoundingClientRect();
+    const markPos = buildMarkPositions(editor);
+    const result: CommentPosition[] = [];
+    for (const c of comments) {
+      const pos = markPos.get(c.id);
+      if (pos === undefined) continue;
+      try {
+        const coords = editor.view.coordsAtPos(pos);
+        const top = coords.top - scrollRect.top + scrollTop;
+        result.push({ id: c.id, top });
+      } catch { /* not mapped */ }
+    }
+    result.sort((a, b) => a.top - b.top);
+    const MIN_GAP = 32;
+    for (let i = 1; i < result.length; i++) {
+      if (result[i].top < result[i - 1].top + MIN_GAP) {
+        result[i].top = result[i - 1].top + MIN_GAP;
+      }
+    }
+    setPositions(result);
+  }, [editor, commentStore]);
+  useEffect(() => {
+    updatePositions();
+    if (!commentStore) return;
+    return commentStore.observe(updatePositions);
+  }, [commentStore, updatePositions]);
+  useEffect(() => {
+    if (!editor) return;
+    const scrollParent = editor.view.dom.closest(".editor-scroll");
+    if (!scrollParent) return;
+    let timer = 0;
+    const debounced = () => {
+      clearTimeout(timer);
+      timer = window.setTimeout(updatePositions, 120);
+    };
+    scrollParent.addEventListener("scroll", debounced, { passive: true });
+    editor.on("update", debounced);
+    return () => {
+      scrollParent.removeEventListener("scroll", debounced);
+      editor.off("update", debounced);
+      clearTimeout(timer);
+    };
+  }, [editor, updatePositions]);
+  // Also open popover when clicking on a comment-mark in the text
+  useEffect(() => {
+    if (!editor || !commentStore) return;
+    const handleSelection = () => {
+      const { from, to } = editor.state.selection;
+      if (from !== to) return;
+      const resolved = editor.state.doc.resolve(from);
+      for (const mark of resolved.marks()) {
+        if (mark.type.name === "comment" && mark.attrs.commentId) {
+          const id = mark.attrs.commentId as string;
+          const comment = commentStore.get(id);
+          if (comment && !comment.resolved) {
+            setActiveId(id);
+            setActiveComment(comment);
+            setReplyText("");
+            return;
+          }
+        }
+      }
+    };
+    editor.on("selectionUpdate", handleSelection);
+    return () => { editor.off("selectionUpdate", handleSelection); };
+  }, [editor, commentStore]);
+  // Refresh active comment data from store
+  useEffect(() => {
+    if (!activeId || !commentStore) return;
+    const refresh = () => {
+      const updated = commentStore.get(activeId);
+      if (updated) setActiveComment(updated);
+      else { setActiveComment(null); setActiveId(null); }
+    };
+    return commentStore.observe(refresh);
+  }, [activeId, commentStore]);
+  // Recalculate positions when popover closes (unfreeze)
+  const prevActiveId = useRef<string | null>(null);
+  useEffect(() => {
+    if (prevActiveId.current && !activeId) {
+      setTimeout(updatePositions, 50);
+    }
+    prevActiveId.current = activeId;
+  }, [activeId, updatePositions]);
+  // Close on outside click
+  useEffect(() => {
+    if (!activeId) return;
+    const handler = (e: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+        const target = e.target as HTMLElement;
+        if (target.closest(".comment-margin-icon")) return;
+        setActiveId(null);
+        setActiveComment(null);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [activeId]);
+  const handleIconClick = (id: string) => {
+    if (!commentStore) return;
+    if (activeId === id) {
+      setActiveId(null);
+      setActiveComment(null);
+      return;
+    }
+    const comment = commentStore.get(id);
+    if (!comment) return;
+    setActiveId(id);
+    setActiveComment(comment);
+    setReplyText("");
+  };
+  const handleReply = () => {
+    if (!replyText.trim() || !commentStore || !activeId) return;
+    commentStore.addReply(activeId, {
+      id: `r_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`,
+      author: user.name,
+      authorColor: user.color,
+      text: replyText.trim(),
+      createdAt: Date.now(),
+    });
+    setReplyText("");
+    setTimeout(() => replyInputRef.current?.focus(), 50);
+  };
+  const removeMarkAndData = useCallback((id: string) => {
+    if (!commentStore || !editor) return;
+    commentStore.remove(id);
+    const { doc, tr } = editor.state;
+    const markType = editor.schema.marks.comment;
+    doc.descendants((node, pos) => {
+      node.marks.forEach((mark) => {
+        if (mark.type === markType && mark.attrs.commentId === id) {
+          tr.removeMark(pos, pos + node.nodeSize, markType);
+        }
+      });
+    });
+    editor.view.dispatch(tr);
+    setActiveId(null);
+    setActiveComment(null);
+  }, [commentStore, editor]);
+  const activePos = positions.find((p) => p.id === activeId);
+  const formatTime = (ts: number) =>
+    new Date(ts).toLocaleString(undefined, {
+      month: "short", day: "numeric", hour: "2-digit", minute: "2-digit",
+    });
+  return (
+    <div className="comment-margin-strip">
+      {positions.map((p) => (
+        <div
+          key={p.id}
+          className={`comment-margin-icon ${activeId === p.id ? "comment-margin-icon--active" : ""}`}
+          style={{ top: p.top }}
+          onClick={() => handleIconClick(p.id)}
+        >
+          <MessageCircle size={14} />
+        </div>
+      ))}
+      {activeComment && activePos && (
+        <div
+          ref={popoverRef}
+          className="comment-popover"
+          style={{ top: activePos.top }}
+        >
+          <div className="comment-popover__thread">
+            <div className="comment-popover__message">
+              <div className="comment-popover__header">
+                <span className="comment-popover__author" style={{ color: activeComment.authorColor }}>
+                  {activeComment.author}
+                </span>
+                <span className="comment-popover__time">{formatTime(activeComment.createdAt)}</span>
+              </div>
+              <div className="comment-popover__text">{activeComment.text}</div>
+            </div>
+            {activeComment.replies.map((reply) => (
+              <div key={reply.id} className="comment-popover__message comment-popover__reply">
+                <div className="comment-popover__header">
+                  <span className="comment-popover__author" style={{ color: reply.authorColor }}>
+                    {reply.author}
+                  </span>
+                  <span className="comment-popover__time">{formatTime(reply.createdAt)}</span>
+                </div>
+                <div className="comment-popover__text">{reply.text}</div>
+              </div>
+            ))}
+          </div>
+          <div className="comment-popover__input-row">
+            <textarea
+              ref={replyInputRef}
+              className="comment-popover__input"
+              rows={1}
+              placeholder="Reply..."
+              value={replyText}
+              onChange={(e) => setReplyText(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  handleReply();
+                }
+              }}
+            />
+            <button
+              className="comment-popover__send"
+              onClick={handleReply}
+              disabled={!replyText.trim()}
+              aria-label="Send reply"
+            >
+              <Send size={14} />
+            </button>
+          </div>
+          <div className="comment-popover__actions">
+            <button className="comment-popover__resolve" onClick={() => removeMarkAndData(activeComment.id)}>
+              <CheckCircle size={14} />
+              Resolve
+            </button>
+            <button className="comment-popover__delete" onClick={() => removeMarkAndData(activeComment.id)}>
+              <Trash2 size={14} />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/CommentsSidebar.tsx DELETED Viewed

@@ -1,212 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-import { Tooltip } from "./Tooltip";
-import { CheckCircle, Trash2 } from "lucide-react";
-import type { Editor } from "@tiptap/core";
-import type { CommentStore, CommentData } from "../editor/comments";
-interface CommentsSidebarProps {
-  editor: Editor | null;
-  commentStore: CommentStore | null;
-  user: { name: string; color: string; avatarUrl?: string };
-  editorContainer: HTMLElement | null;
-}
-interface PositionedComment extends CommentData {
-  top: number;
-}
-export function CommentsSidebar({ editor, commentStore, user, editorContainer }: CommentsSidebarProps) {
-  const [comments, setComments] = useState<CommentData[]>([]);
-  const [positioned, setPositioned] = useState<PositionedComment[]>([]);
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const sidebarRef = useRef<HTMLDivElement>(null);
-  const refresh = useCallback(() => {
-    if (!commentStore) return;
-    setComments(commentStore.getAll());
-  }, [commentStore]);
-  useEffect(() => {
-    if (!commentStore) return;
-    refresh();
-    return commentStore.observe(refresh);
-  }, [commentStore, refresh]);
-  const updatePositions = useCallback(() => {
-    if (!editor || !editorContainer) return;
-    const view = editor.view;
-    const containerRect = editorContainer.getBoundingClientRect();
-    const active = comments.filter((c) => !c.resolved);
-    const result: PositionedComment[] = [];
-    for (const comment of active) {
-      let markPos = -1;
-      view.state.doc.descendants((node, pos) => {
-        if (markPos >= 0) return false;
-        for (const mark of node.marks) {
-          if (mark.type.name === "comment" && mark.attrs.commentId === comment.id) {
-            markPos = pos;
-            return false;
-          }
-        }
-      });
-      if (markPos >= 0) {
-        try {
-          const coords = view.coordsAtPos(markPos);
-          const top = coords.top - containerRect.top;
-          result.push({ ...comment, top });
-        } catch {
-          // Position not available yet
-        }
-      }
-    }
-    result.sort((a, b) => a.top - b.top);
-    const MIN_GAP = 80;
-    for (let i = 1; i < result.length; i++) {
-      if (result[i].top < result[i - 1].top + MIN_GAP) {
-        result[i].top = result[i - 1].top + MIN_GAP;
-      }
-    }
-    setPositioned(result);
-  }, [editor, editorContainer, comments]);
-  const posTimerRef = useRef(0);
-  useEffect(() => {
-    updatePositions();
-    const debouncedPositions = () => {
-      clearTimeout(posTimerRef.current);
-      posTimerRef.current = window.setTimeout(updatePositions, 200);
-    };
-    const editorEl = editor?.view?.dom;
-    const scrollTarget = editorContainer;
-    if (editorEl) {
-      if (scrollTarget) {
-        scrollTarget.addEventListener("scroll", debouncedPositions, { passive: true });
-      }
-      const observer = new MutationObserver(debouncedPositions);
-      observer.observe(editorEl, { childList: true, subtree: true, characterData: true });
-      return () => {
-        scrollTarget?.removeEventListener("scroll", debouncedPositions);
-        observer.disconnect();
-        clearTimeout(posTimerRef.current);
-      };
-    }
-  }, [editor, editorContainer, updatePositions]);
-  const handleResolve = (id: string) => {
-    if (!commentStore) return;
-    commentStore.resolve(id, user.name);
-  };
-  const handleDelete = (id: string) => {
-    if (!commentStore || !editor) return;
-    commentStore.remove(id);
-    const { doc, tr } = editor.state;
-    const markType = editor.schema.marks.comment;
-    doc.descendants((node, pos) => {
-      node.marks.forEach((mark) => {
-        if (mark.type === markType && mark.attrs.commentId === id) {
-          tr.removeMark(pos, pos + node.nodeSize, markType);
-        }
-      });
-    });
-    editor.view.dispatch(tr);
-  };
-  return (
-    <div ref={sidebarRef} style={{ position: "relative", width: "100%", minHeight: "100%" }}>
-      {positioned.map((c) => (
-        <div
-          key={c.id}
-          style={{
-            position: "absolute",
-            top: c.top,
-            left: 0,
-            right: 0,
-            transition: "top 0.2s ease",
-          }}
-        >
-          <CommentCard
-            comment={c}
-            active={activeId === c.id}
-            onResolve={() => handleResolve(c.id)}
-            onDelete={() => handleDelete(c.id)}
-            onClick={() => setActiveId(activeId === c.id ? null : c.id)}
-          />
-        </div>
-      ))}
-    </div>
-  );
-}
-function CommentCard({
-  comment,
-  active,
-  onResolve,
-  onDelete,
-  onClick,
-}: {
-  comment: CommentData;
-  active?: boolean;
-  onResolve: () => void;
-  onDelete: () => void;
-  onClick: () => void;
-}) {
-  const time = new Date(comment.createdAt).toLocaleString(undefined, {
-    month: "short",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-  return (
-    <div
-      className={`comment-card surface ${active ? "comment-card--active" : ""}`}
-      style={{ borderLeftColor: comment.authorColor }}
-      onClick={onClick}
-    >
-      <div className="comment-card__header">
-        <span
-          className="chip"
-          style={{ backgroundColor: comment.authorColor, color: "#000" }}
-        >
-          {comment.author}
-        </span>
-        <span className="comment-card__time">{time}</span>
-      </div>
-      <div className="comment-card__text">{comment.text}</div>
-      <div className="comment-card__actions">
-        <Tooltip title="Resolve">
-          <button
-            className="icon-btn icon-btn--success"
-            onClick={(e) => { e.stopPropagation(); onResolve(); }}
-            aria-label="Resolve"
-          >
-            <CheckCircle size={16} />
-          </button>
-        </Tooltip>
-        <Tooltip title="Delete">
-          <button
-            className="icon-btn icon-btn--danger"
-            onClick={(e) => { e.stopPropagation(); onDelete(); }}
-            aria-label="Delete"
-          >
-            <Trash2 size={16} />
-          </button>
-        </Tooltip>
-      </div>
-    </div>
-  );
-}

frontend/src/components/EmbedStudio.tsx ADDED Viewed

	@@ -0,0 +1,346 @@

+import { useState, useEffect, useRef, useMemo, useCallback, type KeyboardEvent } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { X, Send, Square, Code, Eye, Plus, Loader } from "lucide-react";
+import type { UIMessage } from "ai";
+import type { EmbedStore } from "../editor/embeds/embed-store";
+import { buildDoc } from "../editor/embeds/build-doc";
+import { useEmbedChat } from "../hooks/useEmbedChat";
+import { useTheme } from "../hooks/useTheme";
+import { isToolPart, normalizeToolPart } from "../utils/ai-tool-parts";
+interface EmbedStudioProps {
+  src: string;
+  embedStore: EmbedStore | null;
+  modelRef: React.RefObject<string>;
+  userId: string;
+  onClose: () => void;
+}
+const EMBED_TOOL_LABELS: Record<string, [string, string]> = {
+  createEmbed: ["Creating chart...", "Created chart"],
+  patchEmbed: ["Updating chart...", "Updated chart"],
+  readEmbed: ["Reading chart...", "Read chart"],
+};
+function embedToolLabel(name: string, state: string): string {
+  const pair = EMBED_TOOL_LABELS[name];
+  if (!pair) return name;
+  return state === "result" ? pair[1] : pair[0];
+}
+function MessageBubble({ message }: { message: UIMessage }) {
+  const isUser = message.role === "user";
+  return (
+    <div className={`es-message ${isUser ? "es-message--user" : "es-message--ai"}`}>
+      {message.parts.map((part, i) => {
+        if (part.type === "text") {
+          return (
+            <div key={i} className="es-message__text">
+              {isUser ? part.text : (
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{part.text}</ReactMarkdown>
+              )}
+            </div>
+          );
+        }
+        if (isToolPart(part)) {
+          const tool = normalizeToolPart(part);
+          if (!tool) return null;
+          return (
+            <div key={i} className="es-message__tool">
+              <span className="es-message__tool-name">
+                {embedToolLabel(tool.toolName, tool.state)}
+              </span>
+            </div>
+          );
+        }
+        return null;
+      })}
+    </div>
+  );
+}
+function EmbedAgentStatus({ messages }: { messages: UIMessage[] }) {
+  const last = messages[messages.length - 1];
+  if (!last) return null;
+  if (last.role === "assistant") {
+    const parts = last.parts ?? [];
+    const runningTools = parts
+      .map((p) => normalizeToolPart(p))
+      .filter((t): t is NonNullable<typeof t> => t !== null && t.state !== "result")
+      .map((t) => t.toolName);
+    if (runningTools.length > 0) {
+      const pair = EMBED_TOOL_LABELS[runningTools[runningTools.length - 1]];
+      const text = pair ? pair[0] : runningTools[runningTools.length - 1];
+      return (
+        <div className="chat-panel__thinking">
+          <Loader size={13} className="spin" />
+          <span className="shimmer-text">{text}</span>
+        </div>
+      );
+    }
+    const hasText = parts.some((p: any) => p.type === "text" && p.text?.trim());
+    if (hasText) return null;
+  }
+  return (
+    <div className="chat-panel__thinking">
+      <Loader size={13} className="spin" />
+      <span className="shimmer-text">Thinking...</span>
+    </div>
+  );
+}
+export function EmbedStudio({ src, embedStore, modelRef, userId, onClose }: EmbedStudioProps) {
+  const { isDark, primaryColor } = useTheme();
+  const [html, setHtml] = useState("");
+  const [viewMode, setViewMode] = useState<"preview" | "code">("preview");
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  // Iframe double-buffer
+  const frameA = useRef<HTMLIFrameElement>(null);
+  const frameB = useRef<HTMLIFrameElement>(null);
+  const [activeFrame, setActiveFrame] = useState<"a" | "b">("a");
+  const activeRef = useRef<"a" | "b">("a");
+  activeRef.current = activeFrame;
+  const chat = useEmbedChat({ embedStore, src, modelRef, userId });
+  // Sync from embed store
+  useEffect(() => {
+    if (!embedStore || !src) return;
+    setHtml(embedStore.get(src));
+    return embedStore.observeKey(src, setHtml);
+  }, [embedStore, src]);
+  // Build srcdoc
+  const srcdoc = useMemo(() => {
+    if (!html) return "";
+    return buildDoc(html, { isDark, primaryColor });
+  }, [html, isDark, primaryColor]);
+  // Load srcdoc into inactive frame
+  useEffect(() => {
+    if (!srcdoc) return;
+    const next = activeRef.current === "a" ? "b" : "a";
+    const frame = next === "a" ? frameA.current : frameB.current;
+    if (frame) frame.srcdoc = srcdoc;
+  }, [srcdoc]);
+  const handleFrameLoad = useCallback((slot: "a" | "b") => {
+    if (slot !== activeRef.current) {
+      setActiveFrame(slot);
+    }
+  }, []);
+  // Auto-scroll messages
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [chat.messages]);
+  // Dev-only hook: let demo scripts inject a fake assistant reply into
+  // the embed chat so the recording shows the agent "responding"
+  // without waiting for a real LLM round-trip.
+  useEffect(() => {
+    if (!import.meta.env.DEV) return;
+    const handler = (event: Event) => {
+      const detail = (event as CustomEvent).detail as
+        | { messages?: UIMessage[] }
+        | undefined;
+      if (Array.isArray(detail?.messages)) {
+        chat.setMessages(detail.messages);
+      }
+    };
+    window.addEventListener("__demo-embed-chat", handler);
+    return () => window.removeEventListener("__demo-embed-chat", handler);
+  }, [chat]);
+  const handleSend = useCallback(() => {
+    const text = chat.input.trim();
+    if (!text || chat.isLoading) return;
+    chat.sendMessage(text);
+    chat.setInput("");
+  }, [chat]);
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend],
+  );
+  const handleTextareaInput = useCallback(() => {
+    const ta = textareaRef.current;
+    if (ta) {
+      ta.style.height = "auto";
+      ta.style.height = Math.min(ta.scrollHeight, 160) + "px";
+    }
+  }, []);
+  const frameStyle = (slot: "a" | "b"): React.CSSProperties => ({
+    position: "absolute",
+    inset: 0,
+    border: "none",
+    width: "100%",
+    height: "100%",
+    transition: "opacity 120ms ease",
+    opacity: activeFrame === slot ? 1 : 0,
+    zIndex: activeFrame === slot ? 2 : 1,
+  });
+  return (
+    <div className="embed-studio">
+      {/* Header */}
+      <div className="es-header">
+        <div className="es-header__left">
+          <span className="es-header__icon">📊</span>
+          <span className="es-header__title">Embed Studio</span>
+          <code className="es-header__src">{src}</code>
+        </div>
+        <div className="es-header__actions">
+          <button
+            className="embed-btn"
+            onClick={() => chat.clearMessages()}
+            aria-label="New conversation"
+            title="New conversation"
+          >
+            <Plus size={16} />
+          </button>
+          <button
+            className="embed-btn"
+            onClick={onClose}
+            aria-label="Close Embed Studio"
+          >
+            <X size={16} />
+          </button>
+        </div>
+      </div>
+      {/* Body: split panel */}
+      <div className="es-body">
+        {/* Left: Chat */}
+        <div className="es-chat">
+          <div className="es-chat__messages">
+            {chat.messages.length === 0 && (
+              <div className="es-chat__empty">
+                <p>Describe the chart you want to create.</p>
+                <p className="es-chat__hint">
+                  Example: "Create a bar chart showing model sizes with categorical colors"
+                </p>
+              </div>
+            )}
+            {chat.messages.map((msg) => (
+              <MessageBubble key={msg.id} message={msg} />
+            ))}
+            {chat.isLoading && chat.messages.length > 0 && (
+              <EmbedAgentStatus messages={chat.messages} />
+            )}
+            <div ref={messagesEndRef} />
+          </div>
+          {/* Input */}
+          <div className="es-chat__input-area">
+            {chat.error && (
+              <div className="es-chat__error">
+                {chat.error.message || "An error occurred"}
+              </div>
+            )}
+            <div className="es-chat__input-row">
+              <textarea
+                ref={textareaRef}
+                value={chat.input}
+                onChange={(e) => chat.setInput(e.target.value)}
+                onKeyDown={handleKeyDown}
+                onInput={handleTextareaInput}
+                placeholder="Describe your chart..."
+                rows={1}
+                className="es-chat__textarea"
+              />
+              {chat.isLoading ? (
+                <button
+                  className="es-chat__send-btn"
+                  onClick={chat.stop}
+                  aria-label="Stop"
+                >
+                  <Square size={16} />
+                </button>
+              ) : (
+                <button
+                  className="es-chat__send-btn"
+                  onClick={handleSend}
+                  disabled={!chat.input.trim()}
+                  aria-label="Send"
+                >
+                  <Send size={16} />
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+        {/* Right: Preview */}
+        <div className="es-preview">
+          <div className="es-preview__toolbar">
+            <button
+              className={`es-preview__tab ${viewMode === "preview" ? "es-preview__tab--active" : ""}`}
+              onClick={() => setViewMode("preview")}
+            >
+              <Eye size={14} />
+              Preview
+            </button>
+            <button
+              className={`es-preview__tab ${viewMode === "code" ? "es-preview__tab--active" : ""}`}
+              onClick={() => setViewMode("code")}
+            >
+              <Code size={14} />
+              Code
+            </button>
+            <div style={{ flex: 1 }} />
+            <button className="embed-btn embed-btn-primary" onClick={onClose}>
+              Save & Close
+            </button>
+          </div>
+          {/* Both panels always mounted - toggle with hidden class to preserve iframe state */}
+          <div className={`es-preview__frame-container ${viewMode !== "preview" ? "es-hidden" : ""}`}>
+            {html ? (
+              <>
+                <iframe
+                  ref={frameA}
+                  title="Chart preview A"
+                  sandbox="allow-scripts"
+                  onLoad={() => handleFrameLoad("a")}
+                  style={frameStyle("a")}
+                />
+                <iframe
+                  ref={frameB}
+                  title="Chart preview B"
+                  sandbox="allow-scripts"
+                  onLoad={() => handleFrameLoad("b")}
+                  style={frameStyle("b")}
+                />
+              </>
+            ) : (
+              <div className="es-preview__empty">
+                <span style={{ fontSize: 32, opacity: 0.4 }}>📊</span>
+                <p>Chart preview will appear here</p>
+              </div>
+            )}
+          </div>
+          <div className={`es-preview__code ${viewMode !== "code" ? "es-hidden" : ""}`}>
+            <pre className="es-preview__pre">
+              <code>{html || "// No chart HTML yet"}</code>
+            </pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/MobileTocSidebar.tsx ADDED Viewed

	@@ -0,0 +1,66 @@

+import type { Editor as TiptapEditor } from "@tiptap/core";
+import { Sun, Moon, X } from "lucide-react";
+import { TableOfContents } from "./TableOfContents";
+interface Props {
+  open: boolean;
+  editor: TiptapEditor | null;
+  scrollContainer: HTMLElement | null;
+  autoCollapse: boolean;
+  theme: "light" | "dark";
+  onClose: () => void;
+  onToggleTheme: () => void;
+}
+/**
+ * Full-height drawer shown on narrow viewports when the user hits the
+ * hamburger button in the top bar. Hosts the table of contents and the
+ * theme toggle (there is no room for the desktop chrome at that width).
+ */
+export function MobileTocSidebar({
+  open,
+  editor,
+  scrollContainer,
+  autoCollapse,
+  theme,
+  onClose,
+  onToggleTheme,
+}: Props) {
+  return (
+    <>
+      <div
+        className={`toc-mobile-backdrop${open ? " open" : ""}`}
+        onClick={onClose}
+      />
+      <aside className={`toc-mobile-sidebar${open ? " open" : ""}`}>
+        <div className="toc-mobile-sidebar__header">
+          <span className="toc-mobile-sidebar__title">Contents</span>
+          <div className="toc-mobile-sidebar__actions">
+            <button
+              className="toc-mobile-sidebar__theme"
+              onClick={onToggleTheme}
+              aria-label="Toggle theme"
+            >
+              {theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}
+            </button>
+            <button
+              className="toc-mobile-sidebar__close"
+              onClick={onClose}
+              aria-label="Close"
+            >
+              <X size={16} />
+            </button>
+          </div>
+        </div>
+        <div className="toc-mobile-sidebar__body">
+          <TableOfContents
+            editor={editor}
+            scrollContainer={scrollContainer}
+            autoCollapse={autoCollapse}
+            onNavigate={onClose}
+          />
+        </div>
+      </aside>
+    </>
+  );
+}

frontend/src/components/PublishDialog.tsx ADDED Viewed

	@@ -0,0 +1,141 @@

+import { forwardRef } from "react";
+import { Eye } from "lucide-react";
+export type PublishState = "idle" | "loading" | "success" | "error";
+/**
+ * Stage events emitted by the backend during publish. Kept in sync with
+ * `PublishStage` in `backend/src/publisher/index.ts` and the sub-stages
+ * emitted by `pdf-generator.ts`. We accept `string` so an unknown stage
+ * never breaks the UI.
+ */
+export type PublishStage =
+  | "extract"
+  | "bibliography"
+  | "render"
+  | "load"
+  | "thumbnail"
+  | "pdf-setup"
+  | "pdf-toc"
+  | "rasterize"
+  | "pdf-render"
+  | "write"
+  | "upload"
+  | string;
+export interface PublishStageEvent {
+  stage: PublishStage;
+  detail?: {
+    index?: number;
+    total?: number;
+    entries?: number;
+  };
+}
+interface Props {
+  state: PublishState;
+  error: string;
+  docName: string;
+  stageEvent: PublishStageEvent | null;
+  onClose: () => void;
+  onPublish: () => void;
+}
+const STAGE_LABELS: Record<string, string> = {
+  extract: "Extracting content",
+  bibliography: "Formatting references",
+  render: "Rendering HTML",
+  load: "Loading article",
+  thumbnail: "Capturing thumbnail",
+  "pdf-setup": "Preparing PDF layout",
+  "pdf-toc": "Building table of contents",
+  rasterize: "Rasterizing embeds",
+  "pdf-render": "Rendering PDF",
+  write: "Writing files",
+  upload: "Uploading to storage",
+};
+function formatStage(event: PublishStageEvent | null): string {
+  if (!event) return "Publishing...";
+  const base = STAGE_LABELS[event.stage] ?? "Publishing...";
+  if (event.stage === "rasterize" && event.detail?.index && event.detail?.total) {
+    return `${base} (${event.detail.index}/${event.detail.total})`;
+  }
+  return base;
+}
+/**
+ * Native `<dialog>` shown when the user clicks "Publish" in the top bar.
+ * Displays live stage progress during the long PDF pipeline (typically
+ * 15-25s) thanks to the Server-Sent Events stream from `/api/publish/stream`.
+ */
+export const PublishDialog = forwardRef<HTMLDialogElement, Props>(function PublishDialog(
+  { state, error, docName, stageEvent, onClose, onPublish },
+  ref
+) {
+  const stageLabel = formatStage(stageEvent);
+  return (
+    <dialog ref={ref} className="ed-dialog" onClose={onClose}>
+      <h2 className="ed-dialog__title">
+        {state === "success" ? "Published!" : "Publish article"}
+      </h2>
+      <div className="ed-dialog__body">
+        {state === "idle" && (
+          <p>
+            This will generate a static HTML page, a print-optimized PDF,
+            and a thumbnail from the current document. The process
+            typically takes 15-25 seconds. Other collaborators can keep
+            editing while you publish.
+          </p>
+        )}
+        {state === "loading" && (
+          <div style={{ display: "flex", flexDirection: "column", gap: 8, padding: "8px 0" }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+              <span className="spinner" />
+              <p style={{ margin: 0 }}>{stageLabel}</p>
+            </div>
+            <p style={{ margin: 0, fontSize: "0.85em", opacity: 0.7 }}>
+              Rasterizing embeds and rendering a print-ready PDF can take
+              a moment. Keep this tab open until it finishes.
+            </p>
+          </div>
+        )}
+        {state === "success" && (
+          <>
+            <p>
+              Article published successfully. Visitors will now see
+              the updated version.
+            </p>
+            <a
+              href={`/published/${docName}/index.html`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="btn btn--primary"
+              style={{ display: "inline-flex", alignItems: "center", gap: 6, textDecoration: "none", marginTop: 4 }}
+            >
+              <Eye size={16} />
+              View published article
+            </a>
+          </>
+        )}
+        {state === "error" && (
+          <p style={{ color: "var(--ed-error)" }}>
+            {error || "An error occurred while publishing."}
+          </p>
+        )}
+      </div>
+      <div className="ed-dialog__actions">
+        {state === "idle" && (
+          <>
+            <button className="btn" onClick={onClose}>Cancel</button>
+            <button className="btn btn--primary" onClick={onPublish}>Publish</button>
+          </>
+        )}
+        {(state === "success" || state === "error") && (
+          <button className="btn" onClick={onClose}>Close</button>
+        )}
+      </div>
+    </dialog>
+  );
+});

frontend/src/components/SyncIndicator.tsx ADDED Viewed

	@@ -0,0 +1,80 @@

+import { useEffect, useRef, useState } from "react";
+import type { Editor as TiptapEditor } from "@tiptap/core";
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import { Cloud, CloudOff, Loader2 } from "lucide-react";
+import { Tooltip } from "./Tooltip";
+type SyncStatus = "connected" | "syncing" | "saved" | "disconnected";
+interface Props {
+  editorInstance: TiptapEditor | null;
+  providerRef: { current: HocuspocusProvider | null };
+}
+/**
+ * Tiny connection/saving indicator for the editor top bar. Listens to the
+ * Hocuspocus provider (`connect` / `disconnect` / `synced`) and the TipTap
+ * editor (`update`) to flip between "Saved", "Saving..." and "Offline".
+ */
+export function SyncIndicator({ editorInstance, providerRef }: Props) {
+  const [status, setStatus] = useState<SyncStatus>("disconnected");
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    const provider = providerRef.current;
+    if (!provider) return;
+    const onConnect = () => setStatus("saved");
+    const onDisconnect = () => setStatus("disconnected");
+    const onSynced = () => setStatus("saved");
+    provider.on("connect", onConnect);
+    provider.on("disconnect", onDisconnect);
+    provider.on("synced", onSynced);
+    const wsProvider = (provider as any).configuration?.websocketProvider;
+    setStatus(wsProvider?.status === "connected" ? "saved" : "disconnected");
+    return () => {
+      provider.off("connect", onConnect);
+      provider.off("disconnect", onDisconnect);
+      provider.off("synced", onSynced);
+    };
+  }, [providerRef]);
+  useEffect(() => {
+    const editor = editorInstance;
+    const provider = providerRef.current;
+    if (!editor || !provider) return;
+    const onUpdate = () => {
+      setStatus("syncing");
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => {
+        const wsProvider = (provider as any).configuration?.websocketProvider;
+        setStatus(wsProvider?.status === "connected" ? "saved" : "disconnected");
+      }, 1500);
+    };
+    editor.on("update", onUpdate);
+    return () => { editor.off("update", onUpdate); };
+  }, [editorInstance, providerRef]);
+  const label =
+    status === "saved" ? "Saved" :
+    status === "syncing" ? "Saving..." :
+    status === "connected" ? "Connected" :
+    "Offline";
+  const tooltip =
+    status === "saved" ? "All changes saved" :
+    status === "syncing" ? "Saving..." :
+    status === "connected" ? "Connected" :
+    "Disconnected";
+  return (
+    <Tooltip title={tooltip}>
+      <span className={`sync-indicator sync-indicator--${status}`}>
+        {status === "syncing" && <Loader2 size={14} className="spin" />}
+        {status === "saved" && <Cloud size={14} />}
+        {status === "connected" && <Cloud size={14} />}
+        {status === "disconnected" && <CloudOff size={14} />}
+        <span className="sync-indicator__label">{label}</span>
+      </span>
+    </Tooltip>
+  );
+}

frontend/src/components/TableOfContents.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import type { Editor } from "@tiptap/core";
-const SCROLL_OFFSET_PX = 80;
 interface TocItem {
   id: string;
@@ -51,64 +51,120 @@ function buildTree(headings: TocItem[]): TocNode[] {
   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);
   const debounceRef = useRef(0);
   useEffect(() => {
     if (!editor) return;
     setHeadings(extractHeadings(editor));
     const debouncedUpdate = () => {
       clearTimeout(debounceRef.current);
       debounceRef.current = window.setTimeout(
         () => setHeadings(extractHeadings(editor)),
-        300,
       );
     };
     editor.on("update", debouncedUpdate);
     return () => {
       editor.off("update", debouncedUpdate);
       clearTimeout(debounceRef.current);
     };
   }, [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]);
@@ -135,11 +191,13 @@ export function TableOfContents({ editor }: TableOfContentsProps) {
   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 (
@@ -170,9 +228,12 @@ export function TableOfContents({ editor }: TableOfContentsProps) {
             {hasChildren && (
               <div
                 className="toc-children"
-                style={{
-                  maxHeight: isExpanded ? 500 : 0,
                   opacity: isExpanded ? 1 : 0,
                 }}
               >
                 {renderList(node.children, false)}

 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import type { Editor } from "@tiptap/core";
+const SCROLL_OFFSET_PX = 100;
 interface TocItem {
   id: string;
   return root;
 }
+/**
+ * Resolve ProseMirror position to the closest heading DOM element.
+ */
+function resolveHeadingElement(editor: Editor, pos: number): HTMLElement | null {
+  try {
+    const dom = editor.view.domAtPos(pos + 1);
+    let el: HTMLElement | null =
+      dom.node instanceof HTMLElement ? dom.node : dom.node.parentElement;
+    while (el && !/^H[1-6]$/i.test(el.tagName)) {
+      el = el.parentElement;
+    }
+    return el;
+  } catch {
+    return null;
+  }
+}
 interface TableOfContentsProps {
   editor: Editor | null;
+  scrollContainer?: HTMLElement | null;
+  autoCollapse?: boolean;
+  onNavigate?: () => void;
 }
+export function TableOfContents({ editor, scrollContainer, autoCollapse = false, onNavigate }: TableOfContentsProps) {
   const [headings, setHeadings] = useState<TocItem[]>([]);
   const [activePos, setActivePos] = useState<number | null>(null);
   const debounceRef = useRef(0);
   useEffect(() => {
     if (!editor) return;
     setHeadings(extractHeadings(editor));
+    // 60ms debounce: short enough that headings typed by any collaborator
+    // (local or remote via Yjs) appear in the TOC with no perceptible lag
+    // while still coalescing bursts of per-keystroke updates.
     const debouncedUpdate = () => {
       clearTimeout(debounceRef.current);
       debounceRef.current = window.setTimeout(
         () => setHeadings(extractHeadings(editor)),
+        60,
       );
     };
     editor.on("update", debouncedUpdate);
+    // Yjs remote transactions also fire "transaction" - listen to both so
+    // the TOC keeps pace with collaborators editing in other browsers.
+    editor.on("transaction", debouncedUpdate);
     return () => {
       editor.off("update", debouncedUpdate);
+      editor.off("transaction", debouncedUpdate);
       clearTimeout(debounceRef.current);
     };
   }, [editor]);
+  // Scroll-spy via IntersectionObserver - no per-frame scroll work.
+  //
+  // Semantics: active heading = the *topmost visible heading inside the scroll
+  // container's reading zone* (below the SCROLL_OFFSET_PX top margin).
+  // This is intentionally different from the publisher-side TOC which uses a
+  // "last heading scrolled past the offset line" rule (see
+  // `backend/src/publisher/html-renderer.ts`). Rationale:
+  //  - Editor: users navigate non-linearly (click TOC, jump, split view). The
+  //    topmost-visible rule reacts instantly when a heading enters the
+  //    reading zone, so the sidebar always reflects what the user is looking
+  //    at.
+  //  - Publisher: readers scroll linearly through the article. The
+  //    last-scrolled-past rule matches classic docs UX (MDN, Docusaurus) and
+  //    keeps the active entry stable while reading body text between
+  //    headings.
+  // Both use IntersectionObserver as the primitive; only the selection logic
+  // differs. Do not "unify" the two without considering the UX implications.
   useEffect(() => {
     if (!editor || headings.length === 0) return;
+    const root = scrollContainer ?? null;
+    const visibleSet = new Map<Element, number>();
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            visibleSet.set(entry.target, headings.findIndex(
+              (h) => resolveHeadingElement(editor, h.pos) === entry.target,
+            ));
+          } else {
+            visibleSet.delete(entry.target);
+          }
         }
+        let bestIdx = -1;
+        for (const idx of visibleSet.values()) {
+          if (idx >= 0 && (bestIdx < 0 || idx < bestIdx)) bestIdx = idx;
+        }
+        if (visibleSet.size > 0) {
+          setActivePos(bestIdx >= 0 ? headings[bestIdx].pos : null);
+        }
+      },
+      {
+        root,
+        rootMargin: `-${SCROLL_OFFSET_PX}px 0px 0px 0px`,
+        threshold: 0,
+      },
+    );
+    const elements: HTMLElement[] = [];
+    for (const h of headings) {
+      const el = resolveHeadingElement(editor, h.pos);
+      if (el) {
+        observer.observe(el);
+        elements.push(el);
+      }
+    }
+    return () => observer.disconnect();
+  }, [editor, headings, scrollContainer]);
   const tree = useMemo(() => buildTree(headings), [headings]);
   const scrollTo = useCallback((pos: number) => {
     if (!editor) return;
+    const el = resolveHeadingElement(editor, pos);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
     editor.chain().focus().setTextSelection(pos).run();
+    onNavigate?.();
+  }, [editor, onNavigate]);
   if (!editor || headings.length === 0) {
     return (
             {hasChildren && (
               <div
                 className="toc-children"
+                style={autoCollapse ? {
+                  gridTemplateRows: isExpanded ? "1fr" : "0fr",
                   opacity: isExpanded ? 1 : 0,
+                } : {
+                  gridTemplateRows: "1fr",
+                  opacity: 1,
                 }}
               >
                 {renderList(node.children, false)}

frontend/src/components/TopBar.tsx ADDED Viewed

	@@ -0,0 +1,139 @@

+import type { Editor as TiptapEditor } from "@tiptap/core";
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import { Undo2, Redo2, Settings, Upload, Eye, Sun, Moon, Menu, LogIn } from "lucide-react";
+import { Tooltip } from "./Tooltip";
+import { SyncIndicator } from "./SyncIndicator";
+import type { CollabUser } from "../utils/user";
+interface TopBarProps {
+  editorInstance: TiptapEditor | null;
+  providerRef: { current: HocuspocusProvider | null };
+  docName: string;
+  theme: "light" | "dark";
+  user: CollabUser;
+  loginUrl: string | null;
+  isAuthenticated: boolean;
+  /** True while any collaborator has a publish in progress. */
+  isPublishing?: boolean;
+  /** Name of the user who initiated the running publish, if known. */
+  publishingUserName?: string | null;
+  onToggleTheme: () => void;
+  onOpenSettings: () => void;
+  onOpenPublish: () => void;
+  onOpenMobileToc: () => void;
+}
+/**
+ * Top toolbar of the editor: TOC drawer button (mobile only via CSS),
+ * undo/redo, article settings, preview, theme toggle, publish action, sync
+ * indicator, and the current user chip / sign-in link.
+ */
+export function TopBar({
+  editorInstance,
+  providerRef,
+  docName,
+  theme,
+  user,
+  loginUrl,
+  isAuthenticated,
+  isPublishing = false,
+  publishingUserName = null,
+  onToggleTheme,
+  onOpenSettings,
+  onOpenPublish,
+  onOpenMobileToc,
+}: TopBarProps) {
+  const publishTooltip = isPublishing
+    ? publishingUserName
+      ? `${publishingUserName} is publishing...`
+      : "Publish in progress..."
+    : "Publish article";
+  return (
+    <div className="top-bar">
+      <button
+        className="icon-btn top-bar__toc-toggle"
+        onClick={onOpenMobileToc}
+        aria-label="Table of contents"
+      >
+        <Menu size={18} />
+      </button>
+      <Tooltip title="Undo">
+        <button
+          className="icon-btn"
+          onClick={() => editorInstance?.commands.undo()}
+          aria-label="Undo"
+        >
+          <Undo2 size={18} />
+        </button>
+      </Tooltip>
+      <Tooltip title="Redo">
+        <button
+          className="icon-btn"
+          onClick={() => editorInstance?.commands.redo()}
+          aria-label="Redo"
+        >
+          <Redo2 size={18} />
+        </button>
+      </Tooltip>
+      <span className="divider-v" />
+      <Tooltip title="Article settings">
+        <button
+          className="icon-btn"
+          onClick={onOpenSettings}
+          aria-label="Article settings"
+        >
+          <Settings size={18} />
+        </button>
+      </Tooltip>
+      <Tooltip title="Preview article">
+        <button
+          className="icon-btn"
+          onClick={() => window.open(`/api/preview/${docName}`, "_blank")}
+          aria-label="Preview article"
+        >
+          <Eye size={18} />
+        </button>
+      </Tooltip>
+      <Tooltip title={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}>
+        <button
+          className="icon-btn"
+          onClick={onToggleTheme}
+          aria-label="Toggle theme"
+        >
+          {theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
+        </button>
+      </Tooltip>
+      <span className="divider-v" />
+      <Tooltip title={publishTooltip}>
+        <button
+          className="icon-btn icon-btn--primary"
+          onClick={onOpenPublish}
+          aria-label="Publish article"
+          disabled={isPublishing}
+          aria-busy={isPublishing || undefined}
+        >
+          <Upload size={18} />
+        </button>
+      </Tooltip>
+      <SyncIndicator editorInstance={editorInstance} providerRef={providerRef} />
+      {loginUrl && !isAuthenticated ? (
+        <a
+          href={loginUrl}
+          className="chip chip--login"
+          style={{ marginLeft: 4, textDecoration: "none" }}
+        >
+          <LogIn size={14} />
+          Sign in with HF
+        </a>
+      ) : (
+        <span
+          className="chip"
+          style={{ backgroundColor: user.color, color: "#000", marginLeft: 4 }}
+        >
+          {user.avatarUrl && <img src={user.avatarUrl} alt="" />}
+          {user.name}
+        </span>
+      )}
+    </div>
+  );
+}

frontend/src/editor/BlockHandle.tsx CHANGED Viewed

@@ -60,35 +60,33 @@ export function BlockHandle({ editor, containerEl }: BlockHandleProps) {
     [containerEl, editor, show],
   );
-  // Find the nearest block for a given mouse Y position
-  const findBlockAtY = useCallback(
-    (clientY: number): HTMLElement | null => {
       if (!containerEl) return null;
-      const blocks = containerEl.querySelectorAll<HTMLElement>(BLOCK_SELECTOR);
-      let closest: HTMLElement | null = null;
-      let closestDist = Infinity;
-      for (const block of blocks) {
-        const rect = block.getBoundingClientRect();
-        if (clientY >= rect.top && clientY <= rect.bottom) return block;
-        const dist = Math.min(
-          Math.abs(clientY - rect.top),
-          Math.abs(clientY - rect.bottom),
-        );
-        if (dist < closestDist) {
-          closestDist = dist;
-          closest = block;
-        }
-      }
-      return closestDist < 40 ? closest : null;
     },
     [containerEl],
   );
-  // Listen on the whole container (not just .tiptap) for wider hover zone
   useEffect(() => {
     if (!containerEl) return;
     const handleMouseMove = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
       // Direct block hover (inside editor content)
@@ -98,13 +96,13 @@ export function BlockHandle({ editor, containerEl }: BlockHandleProps) {
         return;
       }
-      // Hovering in the left margin area - find nearest block by Y
       if (
         handleRef.current?.contains(target) ||
         target === containerEl ||
         target.classList.contains("tiptap")
       ) {
-        const block = findBlockAtY(e.clientY);
         if (block) {
           positionHandle(block);
         }
@@ -122,8 +120,9 @@ export function BlockHandle({ editor, containerEl }: BlockHandleProps) {
       containerEl.removeEventListener("mousemove", handleMouseMove);
       containerEl.removeEventListener("mouseleave", handleMouseLeave);
       clearTimeout(hideTimer.current);
     };
-  }, [containerEl, positionHandle, findBlockAtY, scheduleHide]);
   const handleAdd = () => {
     if (!activeBlockRef.current || !editor) return;
@@ -269,7 +268,7 @@ export function BlockHandle({ editor, containerEl }: BlockHandleProps) {
         onClick={handleAdd}
         title="Add block below"
       >
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
           <path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
         </svg>
       </button>
@@ -280,7 +279,7 @@ export function BlockHandle({ editor, containerEl }: BlockHandleProps) {
         onDragEnd={handleDragEnd}
         title="Drag to reorder"
       >
-        <svg width="10" height="14" viewBox="0 0 10 14" fill="none">
           <circle cx="3" cy="2" r="1.2" fill="currentColor" />
           <circle cx="7" cy="2" r="1.2" fill="currentColor" />
           <circle cx="3" cy="7" r="1.2" fill="currentColor" />

     [containerEl, editor, show],
   );
+  // Find the nearest block using elementFromPoint (O(1) instead of O(n))
+  const findBlockAtPoint = useCallback(
+    (clientX: number, clientY: number): HTMLElement | null => {
       if (!containerEl) return null;
+      // Sample a few X positions to handle margin hover
+      const tiptapEl = containerEl.querySelector<HTMLElement>(".tiptap");
+      const centerX = tiptapEl
+        ? tiptapEl.getBoundingClientRect().left + 20
+        : clientX;
+      const el = document.elementFromPoint(centerX, clientY) as HTMLElement | null;
+      if (!el) return null;
+      return el.closest<HTMLElement>(BLOCK_SELECTOR);
     },
     [containerEl],
   );
+  // Listen on the whole container with throttle (~50ms)
   useEffect(() => {
     if (!containerEl) return;
+    let throttleId = 0;
+    const THROTTLE_MS = 50;
     const handleMouseMove = (e: MouseEvent) => {
+      if (throttleId) return;
+      throttleId = window.setTimeout(() => { throttleId = 0; }, THROTTLE_MS);
       const target = e.target as HTMLElement;
       // Direct block hover (inside editor content)
         return;
       }
+      // Hovering in the left margin area - find nearest block by point
       if (
         handleRef.current?.contains(target) ||
         target === containerEl ||
         target.classList.contains("tiptap")
       ) {
+        const block = findBlockAtPoint(e.clientX, e.clientY);
         if (block) {
           positionHandle(block);
         }
       containerEl.removeEventListener("mousemove", handleMouseMove);
       containerEl.removeEventListener("mouseleave", handleMouseLeave);
       clearTimeout(hideTimer.current);
+      clearTimeout(throttleId);
     };
+  }, [containerEl, positionHandle, findBlockAtPoint, scheduleHide]);
   const handleAdd = () => {
     if (!activeBlockRef.current || !editor) return;
         onClick={handleAdd}
         title="Add block below"
       >
+        <svg width="18" height="18" viewBox="0 0 14 14" fill="none">
           <path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
         </svg>
       </button>
         onDragEnd={handleDragEnd}
         title="Drag to reorder"
       >
+        <svg width="14" height="18" viewBox="0 0 10 14" fill="none">
           <circle cx="3" cy="2" r="1.2" fill="currentColor" />
           <circle cx="7" cy="2" r="1.2" fill="currentColor" />
           <circle cx="3" cy="7" r="1.2" fill="currentColor" />

frontend/src/editor/CitationView.tsx CHANGED Viewed

@@ -1,88 +1,17 @@
 import { NodeViewWrapper } from "@tiptap/react";
-import { useEffect, useState, useRef, useCallback } from "react";
 import type { NodeViewProps } from "@tiptap/react";
-type CitationStyle = "apa" | "ieee" | "vancouver" | "chicago-author-date" | "harvard1";
-const NUMERIC_STYLES = new Set<CitationStyle>(["ieee", "vancouver"]);
 export function CitationView({ node, editor, getPos }: NodeViewProps) {
   const key = node.attrs.key as string;
-  const [label, setLabel] = useState(`[${key}]`);
-  const [style, setStyle] = useState<CitationStyle>("apa");
   const [showTooltip, setShowTooltip] = useState(false);
-  const [entry, setEntry] = useState<any>(null);
   const tooltipTimer = useRef<ReturnType<typeof setTimeout>>();
   const wrapperRef = useRef<HTMLSpanElement>(null);
-  // Observe citation data + settings
-  useEffect(() => {
-    const citationsMap = (editor.storage.citation as any)?.citationsMap;
-    const settingsMap = (editor.storage.citation as any)?.settingsMap;
-    const updateEntry = () => {
-      if (!citationsMap) return;
-      setEntry(citationsMap.get(key) || null);
-    };
-    const updateStyle = () => {
-      if (!settingsMap) return;
-      const val = settingsMap.get("citationStyle");
-      if (val) setStyle(val as CitationStyle);
-    };
-    updateEntry();
-    updateStyle();
-    if (citationsMap) citationsMap.observe(updateEntry);
-    if (settingsMap) settingsMap.observe(updateStyle);
-    return () => {
-      if (citationsMap) citationsMap.unobserve(updateEntry);
-      if (settingsMap) settingsMap.unobserve(updateStyle);
-    };
-  }, [key, editor]);
-  // Recompute label when entry or style changes
-  useEffect(() => {
-    let newLabel: string;
-    if (!entry) {
-      newLabel = `[${key}]`;
-    } else if (NUMERIC_STYLES.has(style)) {
-      const order = getDocumentCitationOrder(editor);
-      const idx = order.indexOf(key);
-      const num = idx >= 0 ? idx + 1 : "?";
-      newLabel = style === "ieee" ? `[${num}]` : `(${num})`;
-    } else {
-      newLabel = formatAuthorDate(entry);
-    }
-    setLabel(newLabel);
-    // Persist label into node attrs for server-side HTML generation
-    const pos = getPos();
-    if (typeof pos === "number" && node.attrs.label !== newLabel) {
-      editor.commands.command(({ tr }) => {
-        tr.setNodeMarkup(pos, undefined, { ...node.attrs, label: newLabel });
-        return true;
-      });
-    }
-  }, [entry, style, key, editor]);
-  // Re-format when doc changes (for numeric order updates)
-  useEffect(() => {
-    if (!NUMERIC_STYLES.has(style)) return;
-    const onUpdate = () => {
-      if (!entry) return;
-      const order = getDocumentCitationOrder(editor);
-      const idx = order.indexOf(key);
-      const num = idx >= 0 ? idx + 1 : "?";
-      setLabel(style === "ieee" ? `[${num}]` : `(${num})`);
-    };
-    editor.on("update", onUpdate);
-    return () => { editor.off("update", onUpdate); };
-  }, [editor, style, key, entry]);
   const handleMouseEnter = useCallback(() => {
     tooltipTimer.current = setTimeout(() => setShowTooltip(true), 300);
@@ -101,6 +30,8 @@ export function CitationView({ node, editor, getPos }: NodeViewProps) {
     setShowTooltip(false);
   }, [editor, getPos]);
   return (
     <NodeViewWrapper
       as="span"
@@ -138,29 +69,3 @@ export function CitationView({ node, editor, getPos }: NodeViewProps) {
     </NodeViewWrapper>
   );
 }
-function getDocumentCitationOrder(editor: any): string[] {
-  const seen: string[] = [];
-  editor.state.doc.descendants((node: any) => {
-    if (node.type.name === "citation" && node.attrs.key) {
-      const k = node.attrs.key as string;
-      if (!seen.includes(k)) seen.push(k);
-    }
-  });
-  return seen;
-}
-function formatAuthorDate(entry: any): string {
-  const authors = entry.author;
-  if (!authors?.length) return `(${entry.id || "?"})`;
-  const year = entry.issued?.["date-parts"]?.[0]?.[0] || "n.d.";
-  const first = authors[0].family || authors[0].literal || "?";
-  if (authors.length === 1) return `(${first}, ${year})`;
-  if (authors.length === 2) {
-    const second = authors[1].family || authors[1].literal || "?";
-    return `(${first} & ${second}, ${year})`;
-  }
-  return `(${first} et al., ${year})`;
-}

 import { NodeViewWrapper } from "@tiptap/react";
+import { useState, useRef, useCallback } from "react";
 import type { NodeViewProps } from "@tiptap/react";
 export function CitationView({ node, editor, getPos }: NodeViewProps) {
   const key = node.attrs.key as string;
+  const label = (node.attrs.label as string) || `[${key}]`;
   const [showTooltip, setShowTooltip] = useState(false);
   const tooltipTimer = useRef<ReturnType<typeof setTimeout>>();
   const wrapperRef = useRef<HTMLSpanElement>(null);
+  const getEntry = useCallback(() => {
+    return (editor.storage.citation as any)?.citationsMap?.get(key) ?? null;
+  }, [editor, key]);
   const handleMouseEnter = useCallback(() => {
     tooltipTimer.current = setTimeout(() => setShowTooltip(true), 300);
     setShowTooltip(false);
   }, [editor, getPos]);
+  const entry = showTooltip ? getEntry() : null;
   return (
     <NodeViewWrapper
       as="span"
     </NodeViewWrapper>
   );
 }

frontend/src/editor/Editor.tsx CHANGED Viewed

@@ -4,11 +4,10 @@ import StarterKit from "@tiptap/starter-kit";
 import Collaboration from "@tiptap/extension-collaboration";
 import { CollaborationCursorV3 } from "./extensions/collaboration-cursor-v3";
 import Placeholder from "@tiptap/extension-placeholder";
-import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 // Link is included in StarterKit v3, configured via StarterKit options
 import Mathematics from "@tiptap/extension-mathematics";
 import "katex/dist/katex.min.css";
-import { all, createLowlight } from "lowlight";
 import * as Y from "yjs";
 import { UndoManager } from "yjs";
 import { HocuspocusProvider } from "@hocuspocus/provider";
@@ -24,20 +23,19 @@ import { Comment } from "./extensions/comment";
 import { CollaborationUndo } from "./extensions/collaboration-undo";
 import { SlashCommands } from "./extensions/slash-commands";
 import { ImageUpload } from "./extensions/image-upload";
-import { Citation } from "./extensions/citation";
 import { Bibliography } from "./extensions/bibliography";
 import { Glossary } from "./extensions/glossary";
 import { Footnote } from "./extensions/footnote";
 import { Stack, StackColumn } from "./extensions/stack";
 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 } from "./components";
 import { uploadImage } from "./upload";
-import { DEFAULT_CONTENT, SEED_CITATIONS } from "./default-content";
-const lowlight = createLowlight(all);
 interface EditorProps {
   docName: string;
@@ -45,9 +43,11 @@ interface EditorProps {
   editorRef: MutableRefObject<TiptapEditor | null>;
   onCommentStoreReady: (store: CommentStore) => void;
   onFrontmatterStoreReady: (store: FrontmatterStore) => void;
   onSettingsMapReady?: (map: Y.Map<any>) => void;
   onEditorReady: (editor: TiptapEditor | null) => void;
   onUndoManagerReady?: (manager: UndoManager) => void;
   onAddComment?: () => void;
 }
@@ -57,16 +57,22 @@ export function Editor({
   editorRef,
   onCommentStoreReady,
   onFrontmatterStoreReady,
   onSettingsMapReady,
   onEditorReady,
   onUndoManagerReady,
   onAddComment,
 }: EditorProps) {
-  const ydoc = useMemo(() => new Y.Doc(), []);
   const undoManagerCallbackRef = useRef(onUndoManagerReady);
   undoManagerCallbackRef.current = onUndoManagerReady;
-  const provider = useMemo(() => {
     const wsUrl =
       window.location.protocol === "https:"
         ? `wss://${window.location.host}/collab`
@@ -75,18 +81,20 @@ export function Editor({
     const tokenMatch = document.cookie.match(/(?:^|;\s*)hf_access_token=([^;]*)/);
     const token = tokenMatch ? decodeURIComponent(tokenMatch[1]) : undefined;
-    return new HocuspocusProvider({
       url: wsUrl,
       name: docName,
       document: ydoc,
       token: token || "",
     });
-  }, [docName, ydoc]);
   const citationsMap = useMemo(() => ydoc.getMap("citations"), [ydoc]);
   const settingsMap = useMemo(() => ydoc.getMap("settings"), [ydoc]);
   const commentStore = useMemo(() => createCommentStore(ydoc), [ydoc]);
   const frontmatterStore = useMemo(() => createFrontmatterStore(ydoc), [ydoc]);
   const [showCitationPanel, setShowCitationPanel] = useState(false);
   useEffect(() => {
@@ -97,16 +105,26 @@ export function Editor({
     onFrontmatterStoreReady(frontmatterStore);
   }, [frontmatterStore, onFrontmatterStoreReady]);
   useEffect(() => {
     onSettingsMapReady?.(settingsMap);
   }, [settingsMap, onSettingsMapReady]);
   useEffect(() => {
     return () => {
-      provider.destroy();
-      ydoc.destroy();
     };
-  }, [provider, ydoc]);
   const editor = useEditor(
     {
@@ -160,9 +178,9 @@ export function Editor({
             HTMLAttributes: { class: "editor-link" },
           },
         } as any),
-        CodeBlockLowlight.configure({ lowlight }),
         Placeholder.configure({
-          placeholder: 'Type "/" for commands...',
         }),
         Collaboration.configure({
           document: ydoc,
@@ -190,54 +208,84 @@ export function Editor({
         Footnote,
         Stack,
         StackColumn,
-        ...COMPONENTS.filter((d) => d.kind === "wrapper").map(createWrapperExtension),
-        ...COMPONENTS.filter((d) => d.kind === "atomic").map(createAtomicExtension),
         CollaborationUndo.configure({
           onUndoManagerReady: (um) => undoManagerCallbackRef.current?.(um),
         }),
         Comment,
       ],
     },
     [ydoc, provider],
   );
-  const seededRef = useRef(false);
   useEffect(() => {
-    if (!editor || seededRef.current) return;
-    const seed = () => {
-      if (seededRef.current) return;
-      seededRef.current = true;
-      const meta = ydoc.getMap("meta");
-      if (meta.get("seeded")) return;
-      const fragment = ydoc.getXmlFragment("default");
-      if (fragment.length > 0) return;
       ydoc.transact(() => {
-        meta.set("seeded", true);
       });
-      editor.commands.setContent(DEFAULT_CONTENT);
-      seedFrontmatter(frontmatterStore);
-      for (const [key, entry] of Object.entries(SEED_CITATIONS)) {
-        if (!citationsMap.has(key)) citationsMap.set(key, entry);
-      }
-      if (!settingsMap.has("citationStyle")) {
-        settingsMap.set("citationStyle", "apa");
-      }
-    };
-    const onSync = () => {
-      setTimeout(seed, 150);
     };
-    provider.on("synced", onSync);
-    return () => {
-      provider.off("synced", onSync);
     };
-  }, [editor, provider, ydoc, frontmatterStore]);
   useEffect(() => {
     if (!editor) return;
@@ -247,12 +295,33 @@ export function Editor({
   useEffect(() => {
     if (!editor) return;
     if (!editor.storage.citation) {
-      editor.storage.citation = {} as any;
     }
-    editor.storage.citation.citationsMap = citationsMap;
-    editor.storage.citation.settingsMap = settingsMap;
   }, [editor, citationsMap, settingsMap]);
   useEffect(() => {
     const handler = () => setShowCitationPanel(true);
     window.addEventListener("open-citation-panel", handler);

 import Collaboration from "@tiptap/extension-collaboration";
 import { CollaborationCursorV3 } from "./extensions/collaboration-cursor-v3";
 import Placeholder from "@tiptap/extension-placeholder";
 // Link is included in StarterKit v3, configured via StarterKit options
 import Mathematics from "@tiptap/extension-mathematics";
 import "katex/dist/katex.min.css";
+import { CodeBlockShiki } from "./extensions/code-block-shiki";
 import * as Y from "yjs";
 import { UndoManager } from "yjs";
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import { CollaborationUndo } from "./extensions/collaboration-undo";
 import { SlashCommands } from "./extensions/slash-commands";
 import { ImageUpload } from "./extensions/image-upload";
+import { Citation, citationLabelKey } from "./extensions/citation";
 import { Bibliography } from "./extensions/bibliography";
 import { Glossary } from "./extensions/glossary";
 import { Footnote } from "./extensions/footnote";
 import { Stack, StackColumn } from "./extensions/stack";
+import { ScrollGuard } from "./extensions/scroll-guard";
 import { CitationPanel } from "./CitationPanel";
 import { createCommentStore, CommentStore } from "./comments";
 import { createFrontmatterStore, FrontmatterStore } from "./frontmatter/frontmatter-store";
+import { createEmbedStore, EmbedStore } from "./embeds/embed-store";
+import { COMPONENTS, createComponentExtension } from "./components";
 import { uploadImage } from "./upload";
+import { loadDemoContent } from "./load-demo";
 interface EditorProps {
   docName: string;
   editorRef: MutableRefObject<TiptapEditor | null>;
   onCommentStoreReady: (store: CommentStore) => void;
   onFrontmatterStoreReady: (store: FrontmatterStore) => void;
+  onEmbedStoreReady?: (store: EmbedStore) => void;
   onSettingsMapReady?: (map: Y.Map<any>) => void;
   onEditorReady: (editor: TiptapEditor | null) => void;
   onUndoManagerReady?: (manager: UndoManager) => void;
+  onProviderReady?: (provider: HocuspocusProvider) => void;
   onAddComment?: () => void;
 }
   editorRef,
   onCommentStoreReady,
   onFrontmatterStoreReady,
+  onEmbedStoreReady,
+  onProviderReady,
   onSettingsMapReady,
   onEditorReady,
   onUndoManagerReady,
   onAddComment,
 }: EditorProps) {
+  const ydocRef = useRef<Y.Doc | null>(null);
+  if (!ydocRef.current) ydocRef.current = new Y.Doc();
+  const ydoc = ydocRef.current;
   const undoManagerCallbackRef = useRef(onUndoManagerReady);
   undoManagerCallbackRef.current = onUndoManagerReady;
+  const providerRef = useRef<HocuspocusProvider | null>(null);
+  if (!providerRef.current) {
     const wsUrl =
       window.location.protocol === "https:"
         ? `wss://${window.location.host}/collab`
     const tokenMatch = document.cookie.match(/(?:^|;\s*)hf_access_token=([^;]*)/);
     const token = tokenMatch ? decodeURIComponent(tokenMatch[1]) : undefined;
+    providerRef.current = new HocuspocusProvider({
       url: wsUrl,
       name: docName,
       document: ydoc,
       token: token || "",
     });
+  }
+  const provider = providerRef.current;
   const citationsMap = useMemo(() => ydoc.getMap("citations"), [ydoc]);
   const settingsMap = useMemo(() => ydoc.getMap("settings"), [ydoc]);
   const commentStore = useMemo(() => createCommentStore(ydoc), [ydoc]);
   const frontmatterStore = useMemo(() => createFrontmatterStore(ydoc), [ydoc]);
+  const embedStore = useMemo(() => createEmbedStore(ydoc), [ydoc]);
   const [showCitationPanel, setShowCitationPanel] = useState(false);
   useEffect(() => {
     onFrontmatterStoreReady(frontmatterStore);
   }, [frontmatterStore, onFrontmatterStoreReady]);
+  useEffect(() => {
+    onEmbedStoreReady?.(embedStore);
+  }, [embedStore, onEmbedStoreReady]);
   useEffect(() => {
     onSettingsMapReady?.(settingsMap);
   }, [settingsMap, onSettingsMapReady]);
+  useEffect(() => {
+    onProviderReady?.(provider);
+  }, [provider, onProviderReady]);
   useEffect(() => {
     return () => {
+      providerRef.current?.destroy();
+      providerRef.current = null;
+      ydocRef.current?.destroy();
+      ydocRef.current = null;
     };
+  }, []);
   const editor = useEditor(
     {
             HTMLAttributes: { class: "editor-link" },
           },
         } as any),
+        CodeBlockShiki,
         Placeholder.configure({
+          placeholder: 'Type "/" for commands, or "/demo" to load sample content...',
         }),
         Collaboration.configure({
           document: ydoc,
         Footnote,
         Stack,
         StackColumn,
+        ...COMPONENTS.map(createComponentExtension),
         CollaborationUndo.configure({
           onUndoManagerReady: (um) => undoManagerCallbackRef.current?.(um),
         }),
         Comment,
+        ScrollGuard,
       ],
     },
     [ydoc, provider],
   );
   useEffect(() => {
+    if (!editor) return;
+    const handler = () => {
+      loadDemoContent(editor, frontmatterStore, citationsMap, settingsMap, embedStore);
+    };
+    window.addEventListener("load-demo-content", handler);
+    return () => window.removeEventListener("load-demo-content", handler);
+  }, [editor, frontmatterStore, citationsMap, settingsMap, embedStore]);
+  useEffect(() => {
+    if (!editor) return;
+    const handler = () => {
+      // Wipe body
+      editor.commands.setContent("<p></p>");
+      // Wipe frontmatter: keep template sane, empty everything else.
+      frontmatterStore.setAll({
+        title: "",
+        subtitle: "",
+        description: "",
+        authors: [],
+        affiliations: [],
+        published: "",
+        template: "article",
+        banner: "",
+        doi: "",
+        showPdf: true,
+        tableOfContentsAutoCollapse: false,
+        licence: "",
+        pdfProOnly: false,
+        seoThumbImage: "",
+        links: [],
+      });
+      // Wipe citations and settings
       ydoc.transact(() => {
+        citationsMap.forEach((_, key) => citationsMap.delete(key));
+        settingsMap.forEach((_, key) => settingsMap.delete(key));
       });
+      // Wipe all embed HTML (banner + charts)
+      for (const key of embedStore.keys()) {
+        embedStore.remove(key);
+      }
     };
+    window.addEventListener("reset-article", handler);
+    return () => window.removeEventListener("reset-article", handler);
+  }, [editor, frontmatterStore, citationsMap, settingsMap, embedStore, ydoc]);
+  // Dev-only hook used by the demo recording script (backend/demo/trio.ts).
+  // Lets the script swap the banner HTML deterministically, simulating a
+  // successful Embed Studio agent run without depending on the LLM backend.
+  useEffect(() => {
+    if (!import.meta.env.DEV) return;
+    const handler = (event: Event) => {
+      const detail = (event as CustomEvent).detail as
+        | { html?: string; key?: string }
+        | undefined;
+      const html = detail?.html;
+      if (!html || !embedStore) return;
+      const key = detail?.key || "banner.html";
+      embedStore.set(key, html);
+      frontmatterStore.set("banner", key);
     };
+    window.addEventListener("__demo-set-banner", handler);
+    return () => window.removeEventListener("__demo-set-banner", handler);
+  }, [embedStore, frontmatterStore]);
   useEffect(() => {
     if (!editor) return;
   useEffect(() => {
     if (!editor) return;
     if (!editor.storage.citation) {
+      editor.storage.citation = { citationsMap: null, settingsMap: null };
     }
+    editor.storage.citation!.citationsMap = citationsMap;
+    editor.storage.citation!.settingsMap = settingsMap;
+    // When Yjs citation data or style changes, signal the citation-label
+    // plugin to recompute all labels in a single batched transaction.
+    const signal = () => {
+      if (editor.isDestroyed) return;
+      editor.view.dispatch(editor.state.tr.setMeta(citationLabelKey, true));
+    };
+    citationsMap.observe(signal);
+    settingsMap.observe(signal);
+    return () => {
+      citationsMap.unobserve(signal);
+      settingsMap.unobserve(signal);
+    };
   }, [editor, citationsMap, settingsMap]);
+  useEffect(() => {
+    if (!editor) return;
+    if (!editor.storage.htmlEmbed) {
+      editor.storage.htmlEmbed = {} as any;
+    }
+    (editor.storage.htmlEmbed as any).embedStore = embedStore;
+  }, [editor, embedStore]);
   useEffect(() => {
     const handler = () => setShowCitationPanel(true);
     window.addEventListener("open-citation-panel", handler);

frontend/src/editor/EditorFooter.tsx ADDED Viewed

	@@ -0,0 +1,166 @@

+import { useEffect, useState, useCallback, useRef } from "react";
+import type { Editor as TiptapEditor } from "@tiptap/core";
+import type { FrontmatterStore, FrontmatterData } from "./frontmatter/frontmatter-store";
+function extractYear(dateStr?: string): number | undefined {
+  if (!dateStr) return undefined;
+  const d = new Date(dateStr);
+  if (!Number.isNaN(d.getTime())) return d.getFullYear();
+  const m = dateStr.match(/(19|20)\d{2}/);
+  return m ? Number(m[0]) : undefined;
+}
+function buildCitationText(data: FrontmatterData): string {
+  const names = data.authors.map((a) => a.name).filter(Boolean);
+  const year = extractYear(data.published);
+  const title = (data.title || "Untitled").replace(/\s+/g, " ").trim();
+  return `${names.join(", ")}${year ? ` (${year})` : ""}. "${title}".`;
+}
+function buildBibtex(data: FrontmatterData): string {
+  const names = data.authors.map((a) => a.name).filter(Boolean);
+  const title = (data.title || "Untitled").replace(/\s+/g, " ").trim();
+  const year = extractYear(data.published);
+  const keyAuthor = (names[0] || "article").split(/\s+/).slice(-1)[0].toLowerCase();
+  const keyTitle = title.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "");
+  const bibKey = `${keyAuthor}${year ?? ""}_${keyTitle}`;
+  const parts = [`  title={${title}}`, `  author={${names.join(" and ")}}`];
+  if (year) parts.push(`  year={${year}}`);
+  if (data.doi) parts.push(`  doi={${data.doi}}`);
+  return `@misc{${bibKey},\n${parts.join(",\n")}\n}`;
+}
+interface FootnoteItem {
+  index: number;
+  content: string;
+}
+function collectFootnotes(editor: TiptapEditor): FootnoteItem[] {
+  const items: FootnoteItem[] = [];
+  let i = 0;
+  editor.state.doc.descendants((node) => {
+    if (node.type.name === "footnote") {
+      i++;
+      items.push({ index: i, content: (node.attrs.content as string) || "" });
+    }
+  });
+  return items;
+}
+function getBibliographyHtml(editor: TiptapEditor): string {
+  let html = "";
+  editor.state.doc.descendants((node) => {
+    if (node.type.name === "bibliography" && node.attrs.renderedHtml) {
+      html = node.attrs.renderedHtml as string;
+    }
+  });
+  return html;
+}
+interface EditorFooterProps {
+  store: FrontmatterStore | null;
+  editor: TiptapEditor | null;
+}
+export function EditorFooter({ store, editor }: EditorFooterProps) {
+  const [data, setData] = useState<FrontmatterData | null>(null);
+  const [biblioHtml, setBiblioHtml] = useState("");
+  const [footnotes, setFootnotes] = useState<FootnoteItem[]>([]);
+  useEffect(() => {
+    if (!store) return;
+    const sync = () => setData(store.getAll());
+    sync();
+    return store.observe(sync);
+  }, [store]);
+  const refreshEditorData = useCallback(() => {
+    if (!editor) return;
+    setBiblioHtml(getBibliographyHtml(editor));
+    setFootnotes(collectFootnotes(editor));
+  }, [editor]);
+  const footerTimerRef = useRef(0);
+  useEffect(() => {
+    if (!editor) return;
+    refreshEditorData();
+    const debouncedRefresh = () => {
+      clearTimeout(footerTimerRef.current);
+      footerTimerRef.current = window.setTimeout(refreshEditorData, 500);
+    };
+    editor.on("update", debouncedRefresh);
+    return () => {
+      editor.off("update", debouncedRefresh);
+      clearTimeout(footerTimerRef.current);
+    };
+  }, [editor, refreshEditorData]);
+  if (!data) return null;
+  const citation = buildCitationText(data);
+  const bibtex = buildBibtex(data);
+  return (
+    <footer className="footer">
+      <div className="footer-inner">
+        <section className="citation-block">
+          <p className="footer-heading" role="heading" aria-level={2}>Citation</p>
+          <p>For attribution in academic contexts, please cite this work as</p>
+          <pre className="citation short">{citation}</pre>
+          <p>BibTeX citation</p>
+          <pre className="citation long">{bibtex}</pre>
+        </section>
+        {data.doi && (
+          <section className="doi-block">
+            <p className="footer-heading" role="heading" aria-level={2}>DOI</p>
+            <p>
+              <a href={`https://doi.org/${data.doi}`} target="_blank" rel="noopener noreferrer">
+                {data.doi}
+              </a>
+            </p>
+          </section>
+        )}
+        {data.licence && (
+          <section className="reuse-block">
+            <p className="footer-heading" role="heading" aria-level={2}>Reuse</p>
+            <p dangerouslySetInnerHTML={{ __html: data.licence }} />
+          </section>
+        )}
+        {biblioHtml && (
+          <section className="references-block">
+            <p className="footer-heading" role="heading" aria-level={2}>References</p>
+            <div
+              className="bibliography-content"
+              dangerouslySetInnerHTML={{ __html: biblioHtml }}
+            />
+          </section>
+        )}
+        {footnotes.length > 0 && (
+          <section className="references-block">
+            <p className="footer-heading" role="heading" aria-level={2}>Footnotes</p>
+            <ol className="footnotes-list">
+              {footnotes.map((fn) => (
+                <li key={fn.index} id={`fn-${fn.index}`}>
+                  <p>{fn.content || "Empty footnote"}</p>
+                </li>
+              ))}
+            </ol>
+          </section>
+        )}
+        <div className="template-credit">
+          <p>
+            Made with ❤️ with{" "}
+            <a href="https://huggingface.co/spaces/tfrere/research-article-template" target="_blank" rel="noopener noreferrer">
+              research article template
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

frontend/src/editor/FloatingActions.tsx DELETED Viewed

@@ -1,128 +0,0 @@
-import { FloatingMenu } from "@tiptap/react";
-import type { Editor } from "@tiptap/core";
-import { useState } from "react";
-import { Tooltip } from "../components/Tooltip";
-import {
-  Plus,
-  Heading2,
-  Heading3,
-  Quote,
-  List,
-  ListOrdered,
-  Braces,
-  Minus,
-  Sigma,
-} from "lucide-react";
-interface FloatingActionsProps {
-  editor: Editor;
-}
-export function FloatingActions({ editor }: FloatingActionsProps) {
-  const [open, setOpen] = useState(false);
-  const insert = (fn: () => void) => {
-    fn();
-    setOpen(false);
-  };
-  return (
-    <FloatingMenu
-      editor={editor}
-      tippyOptions={{
-        duration: 150,
-        placement: "left-start",
-        offset: [-4, 0],
-      }}
-    >
-      <div className="floating-actions">
-        <Tooltip title="Insert block" placement="left">
-          <button
-            className={`floating-actions__toggle ${open ? "floating-actions__toggle--open" : ""}`}
-            onClick={() => setOpen(!open)}
-            aria-label="Insert block"
-          >
-            <Plus />
-          </button>
-        </Tooltip>
-        {open && (
-          <div className="floating-actions__panel surface">
-            <Tooltip title="Heading 2">
-              <button
-                className="icon-btn"
-                onClick={() => insert(() => editor.chain().focus().toggleHeading({ level: 2 }).run())}
-                aria-label="Heading 2"
-              >
-                <Heading2 size={18} />
-              </button>
-            </Tooltip>
-            <Tooltip title="Heading 3">
-              <button
-                className="icon-btn"
-                onClick={() => insert(() => editor.chain().focus().toggleHeading({ level: 3 }).run())}
-                aria-label="Heading 3"
-              >
-                <Heading3 size={18} />
-              </button>
-            </Tooltip>
-            <Tooltip title="Quote">
-              <button
-                className="icon-btn"
-                onClick={() => insert(() => editor.chain().focus().toggleBlockquote().run())}
-                aria-label="Quote"
-              >
-                <Quote size={18} />
-              </button>
-            </Tooltip>
-            <Tooltip title="Bullet list">
-              <button
-                className="icon-btn"
-                onClick={() => insert(() => editor.chain().focus().toggleBulletList().run())}
-                aria-label="Bullet list"
-              >
-                <List size={18} />
-              </button>
-            </Tooltip>
-            <Tooltip title="Numbered list">
-              <button
-                className="icon-btn"
-                onClick={() => insert(() => editor.chain().focus().toggleOrderedList().run())}
-                aria-label="Numbered list"
-              >
-                <ListOrdered size={18} />
-              </button>
-            </Tooltip>
-            <Tooltip title="Code block">
-              <button
-                className="icon-btn"
-                onClick={() => insert(() => editor.chain().focus().toggleCodeBlock().run())}
-                aria-label="Code block"
-              >
-                <Braces size={18} />
-              </button>
-            </Tooltip>
-            <Tooltip title="Equation">
-              <button
-                className="icon-btn"
-                onClick={() => insert(() => editor.chain().focus().insertBlockMath({ latex: "E = mc^2" }).run())}
-                aria-label="Equation"
-              >
-                <Sigma size={18} />
-              </button>
-            </Tooltip>
-            <Tooltip title="Divider">
-              <button
-                className="icon-btn"
-                onClick={() => insert(() => editor.chain().focus().setHorizontalRule().run())}
-                aria-label="Divider"
-              >
-                <Minus size={18} />
-              </button>
-            </Tooltip>
-          </div>
-        )}
-      </div>
-    </FloatingMenu>
-  );
-}

frontend/src/editor/SlashMenu.tsx CHANGED Viewed

@@ -110,6 +110,55 @@ const BUILT_IN_ITEMS: SlashItem[] = [
       editor.chain().focus().insertStack(2).run();
     },
   },
 ];
 const ITEMS: SlashItem[] = [...BUILT_IN_ITEMS, ...getComponentSlashItems()];

       editor.chain().focus().insertStack(2).run();
     },
   },
+  {
+    title: "New Chart",
+    description: "Create a D3 chart with AI (Embed Studio)",
+    icon: "📊",
+    command: (editor) => {
+      const id = `d3-chart-${Date.now().toString(36)}`;
+      const src = `${id}.html`;
+      (editor.chain().focus() as any).inserthtmlEmbed().run();
+      // Find the just-inserted htmlEmbed node and set its src
+      setTimeout(() => {
+        const { doc } = editor.state;
+        let targetPos = -1;
+        doc.descendants((node, pos) => {
+          if (node.type.name === "htmlEmbed" && !node.attrs.src) {
+            targetPos = pos;
+            return false;
+          }
+        });
+        if (targetPos >= 0) {
+          editor.view.dispatch(
+            editor.state.tr.setNodeMarkup(targetPos, undefined, {
+              ...editor.state.doc.nodeAt(targetPos)?.attrs,
+              src,
+              title: "New chart",
+            }),
+          );
+        }
+        window.dispatchEvent(
+          new CustomEvent("open-embed-studio", { detail: { src } }),
+        );
+      }, 50);
+    },
+  },
+  {
+    title: "Load demo content",
+    description: "Replace document with a full demo article",
+    icon: "📄",
+    command: () => {
+      window.dispatchEvent(new CustomEvent("load-demo-content"));
+    },
+  },
+  {
+    title: "Reset article",
+    description: "Wipe document, banner, frontmatter and citations",
+    icon: "🗑",
+    command: () => {
+      window.dispatchEvent(new CustomEvent("reset-article"));
+    },
+  },
 ];
 const ITEMS: SlashItem[] = [...BUILT_IN_ITEMS, ...getComponentSlashItems()];

frontend/src/editor/StackView.tsx CHANGED Viewed

@@ -11,14 +11,21 @@ const GAP_MAP: Record<string, string> = {
 const LAYOUT_OPTIONS = ["2-column", "3-column", "4-column"];
 const GAP_OPTIONS = ["small", "medium", "large"];
-export function StackView({ node, updateAttributes }: NodeViewProps) {
   const layout = (node.attrs.layout as string) || "2-column";
   const gap = (node.attrs.gap as string) || "medium";
   const colCount = parseInt(layout) || 2;
   const handleLayoutChange = useCallback(
-    (e: React.ChangeEvent<HTMLSelectElement>) => updateAttributes({ layout: e.target.value }),
-    [updateAttributes],
   );
   const handleGapChange = useCallback(
@@ -27,42 +34,15 @@ export function StackView({ node, updateAttributes }: NodeViewProps) {
   );
   return (
-    <NodeViewWrapper data-component="stack">
-      <div
-        style={{
-          border: "1px solid rgba(255,255,255,0.1)",
-          borderRadius: 8,
-          background: "rgba(255,255,255,0.02)",
-          margin: "0.75em 0",
-          overflow: "hidden",
-        }}
-      >
-        {/* Header */}
-        <div
-          contentEditable={false}
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            padding: "6px 12px",
-            borderBottom: "1px solid rgba(255,255,255,0.1)",
-            userSelect: "none",
-          }}
-        >
-          <span style={{ fontSize: 14, lineHeight: 1 }}>▥</span>
-          <span style={{ fontSize: 13, fontWeight: 600, color: "rgba(255,255,255,0.6)" }}>Stack</span>
           <select
             value={layout}
             onChange={handleLayoutChange}
-            style={{
-              background: "rgba(255,255,255,0.06)",
-              border: "1px solid rgba(255,255,255,0.1)",
-              borderRadius: 4,
-              color: "rgba(255,255,255,0.8)",
-              fontSize: 12,
-              padding: "2px 6px",
-              outline: "none",
-            }}
           >
             {LAYOUT_OPTIONS.map((opt) => (
               <option key={opt} value={opt}>{opt}</option>
@@ -71,15 +51,7 @@ export function StackView({ node, updateAttributes }: NodeViewProps) {
           <select
             value={gap}
             onChange={handleGapChange}
-            style={{
-              background: "rgba(255,255,255,0.06)",
-              border: "1px solid rgba(255,255,255,0.1)",
-              borderRadius: 4,
-              color: "rgba(255,255,255,0.8)",
-              fontSize: 12,
-              padding: "2px 6px",
-              outline: "none",
-            }}
           >
             {GAP_OPTIONS.map((opt) => (
               <option key={opt} value={opt}>{opt}</option>
@@ -87,13 +59,13 @@ export function StackView({ node, updateAttributes }: NodeViewProps) {
           </select>
         </div>
-        {/* Columns rendered by ProseMirror via NodeViewContent */}
         <div
           style={{
             display: "grid",
             gridTemplateColumns: `repeat(${colCount}, 1fr)`,
             gap: GAP_MAP[gap] || "16px",
-            padding: "8px 12px",
           }}
         >
           <NodeViewContent className="stack-columns" />

 const LAYOUT_OPTIONS = ["2-column", "3-column", "4-column"];
 const GAP_OPTIONS = ["small", "medium", "large"];
+export function StackView({ node, updateAttributes, editor, getPos }: NodeViewProps) {
   const layout = (node.attrs.layout as string) || "2-column";
   const gap = (node.attrs.gap as string) || "medium";
   const colCount = parseInt(layout) || 2;
   const handleLayoutChange = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      const newLayout = e.target.value;
+      const newColCount = parseInt(newLayout) || 2;
+      const pos = getPos();
+      if (typeof pos === "number") {
+        editor.commands.setStackColumns(pos, newColCount);
+      }
+    },
+    [editor, getPos],
   );
   const handleGapChange = useCallback(
   );
   return (
+    <NodeViewWrapper data-component="stack" className="stack-wrapper">
+      <div className="stack-container">
+        <div contentEditable={false} className="stack-header">
+          <span className="stack-header-icon">▥</span>
+          <span className="stack-header-label">Stack</span>
           <select
             value={layout}
             onChange={handleLayoutChange}
+            className="stack-header-select"
           >
             {LAYOUT_OPTIONS.map((opt) => (
               <option key={opt} value={opt}>{opt}</option>
           <select
             value={gap}
             onChange={handleGapChange}
+            className="stack-header-select"
           >
             {GAP_OPTIONS.map((opt) => (
               <option key={opt} value={opt}>{opt}</option>
           </select>
         </div>
         <div
+          className="stack-grid"
           style={{
             display: "grid",
             gridTemplateColumns: `repeat(${colCount}, 1fr)`,
             gap: GAP_MAP[gap] || "16px",
+            padding: "10px 12px",
           }}
         >
           <NodeViewContent className="stack-columns" />

frontend/src/editor/comments.ts CHANGED Viewed

@@ -1,5 +1,13 @@
 import * as Y from "yjs";
 export interface CommentData {
   id: string;
   author: string;
@@ -9,14 +17,24 @@ export interface CommentData {
   resolved: boolean;
   resolvedBy?: string;
   resolvedAt?: number;
 }
 export function createCommentStore(ydoc: Y.Doc) {
   const ymap = ydoc.getMap<CommentData>("comments");
   return {
-    add(comment: CommentData) {
-      ymap.set(comment.id, comment);
     },
     resolve(id: string, resolvedBy: string) {
@@ -45,6 +63,10 @@ export function createCommentStore(ydoc: Y.Doc) {
       ymap.delete(id);
     },
     getAll(): CommentData[] {
       const comments: CommentData[] = [];
       ymap.forEach((value) => comments.push(value));

 import * as Y from "yjs";
+export interface ReplyData {
+  id: string;
+  author: string;
+  authorColor: string;
+  text: string;
+  createdAt: number;
+}
 export interface CommentData {
   id: string;
   author: string;
   resolved: boolean;
   resolvedBy?: string;
   resolvedAt?: number;
+  replies: ReplyData[];
 }
 export function createCommentStore(ydoc: Y.Doc) {
   const ymap = ydoc.getMap<CommentData>("comments");
   return {
+    add(comment: Omit<CommentData, "replies">) {
+      ymap.set(comment.id, { ...comment, replies: [] });
+    },
+    addReply(commentId: string, reply: ReplyData) {
+      const comment = ymap.get(commentId);
+      if (!comment) return;
+      ymap.set(commentId, {
+        ...comment,
+        replies: [...comment.replies, reply],
+      });
     },
     resolve(id: string, resolvedBy: string) {
       ymap.delete(id);
     },
+    get(id: string): CommentData | undefined {
+      return ymap.get(id);
+    },
     getAll(): CommentData[] {
       const comments: CommentData[] = [];
       ymap.forEach((value) => comments.push(value));

frontend/src/editor/components/AtomicView.tsx CHANGED Viewed

@@ -21,12 +21,21 @@ function AtomicFieldRow({
 }) {
   if (field.type === "boolean") {
     return (
-      <label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "rgba(255,255,255,0.5)", cursor: "pointer" }}>
         <input
           type="checkbox"
           checked={!!value}
           onChange={(e) => onChange(e.target.checked)}
-          style={{ accentColor: "#7c3aed" }}
         />
         {field.label}
       </label>
@@ -36,15 +45,15 @@ function AtomicFieldRow({
   if (field.type === "select" && field.options) {
     return (
       <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-        <span style={{ fontSize: 12, color: "rgba(255,255,255,0.4)", minWidth: 60 }}>{field.label}</span>
         <select
           value={String(value ?? field.default ?? "")}
           onChange={(e) => onChange(e.target.value)}
           style={{
-            background: "rgba(255,255,255,0.06)",
-            border: "1px solid rgba(255,255,255,0.1)",
             borderRadius: 4,
-            color: "rgba(255,255,255,0.8)",
             fontSize: 12,
             padding: "2px 6px",
             outline: "none",
@@ -61,17 +70,17 @@ function AtomicFieldRow({
   return (
     <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-      <span style={{ fontSize: 12, color: "rgba(255,255,255,0.4)", minWidth: 60 }}>{field.label}</span>
       <input
         type="text"
         value={String(value ?? "")}
         placeholder={field.placeholder || field.label}
         onChange={(e) => onChange(e.target.value)}
         style={{
-          background: "rgba(255,255,255,0.04)",
-          border: "1px solid rgba(255,255,255,0.08)",
           borderRadius: 4,
-          color: "rgba(255,255,255,0.85)",
           fontSize: 13,
           padding: "4px 8px",
           outline: "none",
@@ -100,9 +109,9 @@ export function makeAtomicView(def: ComponentDef) {
         <div
           contentEditable={false}
           style={{
-            border: "1px dashed rgba(255,255,255,0.15)",
             borderRadius: 8,
-            background: "rgba(255,255,255,0.02)",
             margin: "0.75em 0",
             padding: "12px 16px",
             userSelect: "none",
@@ -111,11 +120,11 @@ export function makeAtomicView(def: ComponentDef) {
           {/* Header */}
           <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: def.fields.length > 0 ? 10 : 0 }}>
             <span style={{ fontSize: 16, lineHeight: 1 }}>{def.icon}</span>
-            <span style={{ fontSize: 13, fontWeight: 600, color: "rgba(255,255,255,0.6)" }}>
               {def.label}
             </span>
             {primaryValue && (
-              <span style={{ fontSize: 12, color: "rgba(255,255,255,0.35)", fontFamily: "monospace" }}>
                 {primaryValue}
               </span>
             )}

 }) {
   if (field.type === "boolean") {
     return (
+      <label
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          fontSize: 12,
+          color: "var(--muted-color)",
+          cursor: "pointer",
+        }}
+      >
         <input
           type="checkbox"
           checked={!!value}
           onChange={(e) => onChange(e.target.checked)}
+          style={{ accentColor: "var(--primary-color)" }}
         />
         {field.label}
       </label>
   if (field.type === "select" && field.options) {
     return (
       <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <span style={{ fontSize: 12, color: "var(--muted-color)", minWidth: 60 }}>{field.label}</span>
         <select
           value={String(value ?? field.default ?? "")}
           onChange={(e) => onChange(e.target.value)}
           style={{
+            background: "var(--surface-bg)",
+            border: "1px solid var(--border-color)",
             borderRadius: 4,
+            color: "var(--text-color)",
             fontSize: 12,
             padding: "2px 6px",
             outline: "none",
   return (
     <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+      <span style={{ fontSize: 12, color: "var(--muted-color)", minWidth: 60 }}>{field.label}</span>
       <input
         type="text"
         value={String(value ?? "")}
         placeholder={field.placeholder || field.label}
         onChange={(e) => onChange(e.target.value)}
         style={{
+          background: "var(--surface-bg)",
+          border: "1px solid var(--border-color)",
           borderRadius: 4,
+          color: "var(--text-color)",
           fontSize: 13,
           padding: "4px 8px",
           outline: "none",
         <div
           contentEditable={false}
           style={{
+            border: "1px dashed var(--border-color)",
             borderRadius: 8,
+            background: "var(--surface-bg)",
             margin: "0.75em 0",
             padding: "12px 16px",
             userSelect: "none",
           {/* Header */}
           <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: def.fields.length > 0 ? 10 : 0 }}>
             <span style={{ fontSize: 16, lineHeight: 1 }}>{def.icon}</span>
+            <span style={{ fontSize: 13, fontWeight: 600, color: "var(--text-color)" }}>
               {def.label}
             </span>
             {primaryValue && (
+              <span style={{ fontSize: 12, color: "var(--muted-color)", fontFamily: "monospace" }}>
                 {primaryValue}
               </span>
             )}

frontend/src/editor/components/MermaidView.tsx CHANGED Viewed

@@ -3,17 +3,24 @@ 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) {
@@ -24,6 +31,7 @@ export function MermaidNodeView({ node, updateAttributes }: NodeViewProps) {
   const [error, setError] = useState("");
   const renderIdRef = useRef(0);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   useEffect(() => {
     if (!editing) setDraft(code);
@@ -59,6 +67,31 @@ export function MermaidNodeView({ node, updateAttributes }: NodeViewProps) {
     renderDiagram(code);
   }, [code, renderDiagram]);
   const commit = useCallback(() => {
     setEditing(false);
     if (draft !== code) {
@@ -164,7 +197,7 @@ export function MermaidNodeView({ node, updateAttributes }: NodeViewProps) {
         ) : svgHtml ? (
           <div
             style={{ padding: "16px", display: "flex", justifyContent: "center" }}
-            dangerouslySetInnerHTML={{ __html: svgHtml }}
           />
         ) : (
           <div style={{ padding: "24px", textAlign: "center", color: "var(--muted-color)", fontSize: 13 }}>

 import type { NodeViewProps } from "@tiptap/react";
 import mermaid from "mermaid";
+let currentMermaidTheme: string | null = null;
+function getMermaidTheme(): "dark" | "neutral" {
+  return document.documentElement.getAttribute("data-theme") === "dark"
+    ? "dark"
+    : "neutral";
+}
+function ensureMermaidInit(forceReinit = false) {
+  const desired = getMermaidTheme();
+  if (currentMermaidTheme === desired && !forceReinit) return;
   mermaid.initialize({
     startOnLoad: false,
+    theme: desired,
     securityLevel: "loose",
     fontFamily: "var(--default-font-family)",
   });
+  currentMermaidTheme = desired;
 }
 export function MermaidNodeView({ node, updateAttributes }: NodeViewProps) {
   const [error, setError] = useState("");
   const renderIdRef = useRef(0);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const previewRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (!editing) setDraft(code);
     renderDiagram(code);
   }, [code, renderDiagram]);
+  // Update shadow DOM only when svgHtml changes (not on every render)
+  useEffect(() => {
+    const el = previewRef.current;
+    if (!el || !svgHtml) return;
+    const shadow = el.shadowRoot ?? el.attachShadow({ mode: "open" });
+    shadow.innerHTML = `<div style="display:flex;justify-content:center">${svgHtml}</div>`;
+  }, [svgHtml]);
+  useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.attributeName === "data-theme") {
+          ensureMermaidInit(true);
+          renderDiagram(code);
+          break;
+        }
+      }
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+    return () => observer.disconnect();
+  }, [code, renderDiagram]);
   const commit = useCallback(() => {
     setEditing(false);
     if (draft !== code) {
         ) : svgHtml ? (
           <div
             style={{ padding: "16px", display: "flex", justifyContent: "center" }}
+            ref={previewRef}
           />
         ) : (
           <div style={{ padding: "24px", textAlign: "center", color: "var(--muted-color)", fontSize: 13 }}>

frontend/src/editor/components/WrapperView.tsx CHANGED Viewed

@@ -32,12 +32,21 @@ function FieldInput({
 }) {
   if (field.type === "boolean") {
     return (
-      <label style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 12, color: "rgba(255,255,255,0.5)", cursor: "pointer" }}>
         <input
           type="checkbox"
           checked={!!value}
           onChange={(e) => onChange(e.target.checked)}
-          style={{ accentColor: "#7c3aed" }}
         />
         {field.label}
       </label>
@@ -50,10 +59,10 @@ function FieldInput({
         value={String(value ?? field.default ?? "")}
         onChange={(e) => onChange(e.target.value)}
         style={{
-          background: "rgba(255,255,255,0.06)",
-          border: "1px solid rgba(255,255,255,0.1)",
           borderRadius: 4,
-          color: "rgba(255,255,255,0.8)",
           fontSize: 12,
           padding: "2px 6px",
           outline: "none",
@@ -76,8 +85,8 @@ function FieldInput({
       style={{
         background: "transparent",
         border: "none",
-        borderBottom: "1px solid rgba(255,255,255,0.1)",
-        color: "rgba(255,255,255,0.9)",
         fontSize: 14,
         fontWeight: 600,
         padding: "2px 0",
@@ -121,8 +130,13 @@ export function makeWrapperView(def: ComponentDef) {
     const isNote = def.name === "note";
     const isQuote = def.name === "quoteBlock";
     const isSidenote = def.name === "sidenote";
-    const wrapperStyle: React.CSSProperties = isNote
       ? {
           borderLeft: `2px solid ${borderColor}`,
           borderTopRightRadius: 8,
@@ -145,13 +159,29 @@ export function makeWrapperView(def: ComponentDef) {
               fontSize: "0.9rem",
               color: "var(--muted-color)",
             }
-          : {
-              border: `1px solid ${borderColor}`,
-              borderRadius: "var(--table-border-radius, 8px)",
-              background: bgColor,
-              margin: "0.75em 0",
-              overflow: "hidden",
-            };
     return (
       <NodeViewWrapper
@@ -187,7 +217,7 @@ export function makeWrapperView(def: ComponentDef) {
               />
             </div>
           ) : (
-            <span style={{ flex: 1, fontSize: 13, fontWeight: 600, color: "rgba(255,255,255,0.6)" }}>
               {def.label}
             </span>
           )}
@@ -208,8 +238,9 @@ export function makeWrapperView(def: ComponentDef) {
                 fontSize: 14,
                 transition: "transform 200ms ease",
                 transform: collapsed ? "rotate(-90deg)" : "rotate(0deg)",
-                color: "rgba(255,255,255,0.4)",
                 flexShrink: 0,
               }}
             >
               ▾
@@ -221,7 +252,7 @@ export function makeWrapperView(def: ComponentDef) {
         <div
           style={{
             display: collapsed ? "none" : "block",
-            padding: isNote ? "0 18px 12px" : isQuote ? "0" : isSidenote ? "0 30px" : "8px 12px",
           }}
         >
           <NodeViewContent className="component-content" />

 }) {
   if (field.type === "boolean") {
     return (
+      <label
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          fontSize: 12,
+          color: "var(--muted-color)",
+          cursor: "pointer",
+        }}
+      >
         <input
           type="checkbox"
           checked={!!value}
           onChange={(e) => onChange(e.target.checked)}
+          style={{ accentColor: "var(--primary-color)" }}
         />
         {field.label}
       </label>
         value={String(value ?? field.default ?? "")}
         onChange={(e) => onChange(e.target.value)}
         style={{
+          background: "var(--surface-bg)",
+          border: "1px solid var(--border-color)",
           borderRadius: 4,
+          color: "var(--text-color)",
           fontSize: 12,
           padding: "2px 6px",
           outline: "none",
       style={{
         background: "transparent",
         border: "none",
+        borderBottom: "1px solid var(--border-color)",
+        color: "var(--text-color)",
         fontSize: 14,
         fontWeight: 600,
         padding: "2px 0",
     const isNote = def.name === "note";
     const isQuote = def.name === "quoteBlock";
     const isSidenote = def.name === "sidenote";
+    const isWideOrFull = def.name === "wide" || def.name === "fullWidth";
+    // NOTE: for wide/fullWidth we intentionally DO NOT set any inline margin.
+    // The `margin` shorthand would collapse to `margin-left: 0` and defeat the
+    // CSS viewport-breakout (see article.css `.node-wide` / `.node-fullWidth`).
+    // Vertical spacing for those two is applied from CSS via `margin-block`.
+    const wrapperStyle: React.CSSProperties | undefined = isNote
       ? {
           borderLeft: `2px solid ${borderColor}`,
           borderTopRightRadius: 8,
               fontSize: "0.9rem",
               color: "var(--muted-color)",
             }
+          : isWideOrFull
+            ? undefined
+            : {
+                border: `1px solid ${borderColor}`,
+                borderRadius: "var(--table-border-radius, 8px)",
+                background: bgColor,
+                margin: "0.75em 0",
+                overflow: "hidden",
+              };
+    if (isSidenote) {
+      return (
+        <NodeViewWrapper
+          data-component={def.name}
+          className="sidenote-wrapper-node"
+        >
+          <div className="sidenote-content-area">
+            <NodeViewContent className="component-content" />
+          </div>
+          <span contentEditable={false} className="sidenote-badge">¶</span>
+        </NodeViewWrapper>
+      );
+    }
     return (
       <NodeViewWrapper
               />
             </div>
           ) : (
+            <span style={{ flex: 1, fontSize: 13, fontWeight: 600, color: "var(--muted-color)" }}>
               {def.label}
             </span>
           )}
                 fontSize: 14,
                 transition: "transform 200ms ease",
                 transform: collapsed ? "rotate(-90deg)" : "rotate(0deg)",
+                color: "var(--muted-color)",
                 flexShrink: 0,
+                opacity: 0.6,
               }}
             >
               ▾
         <div
           style={{
             display: collapsed ? "none" : "block",
+            padding: isNote ? "0 18px 12px" : isQuote ? "0" : "8px 12px",
           }}
         >
           <NodeViewContent className="component-content" />

frontend/src/editor/components/factory.ts CHANGED Viewed

@@ -1,7 +1,9 @@
 // ---------------------------------------------------------------------------
-// Extension factories
 //
-// Generate TipTap Node extensions from ComponentDef declarations.
 // ---------------------------------------------------------------------------
 import { Node, mergeAttributes } from "@tiptap/core";
@@ -10,97 +12,43 @@ 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).
- *
- * The resulting node:
- * - belongs to the "block" group
- * - accepts block+ content (paragraphs, lists, code, …)
- * - stores each field as a node attribute
- * - exposes an `insert<Tag>` command
- * - renders via a generic React NodeView parameterised by the def
- */
-export function createWrapperExtension(def: ComponentDef) {
-  const commandName = `insert${def.tag}`;
-  return Node.create({
-    name: def.name,
-    group: "block",
-    content: def.content || "block+",
-    defining: true,
-    isolating: true,
-    addAttributes() {
-      const attrs: Record<string, { default: unknown }> = {};
-      for (const f of def.fields) {
-        attrs[f.name] = { default: f.default ?? null };
-      }
-      return attrs;
-    },
-    parseHTML() {
-      return [{ tag: `div[data-component="${def.name}"]` }];
-    },
-    renderHTML({ HTMLAttributes }) {
-      return [
-        "div",
-        mergeAttributes(HTMLAttributes, { "data-component": def.name }),
-        0, // ProseMirror content hole
-      ];
-    },
-    addCommands() {
-      return {
-        [commandName]:
-          () =>
-          ({ commands }: { commands: any }) => {
-            const attrs: Record<string, unknown> = {};
-            for (const f of def.fields) {
-              attrs[f.name] = f.default ?? null;
-            }
-            return commands.insertContent({
-              type: def.name,
-              attrs,
-              content: [{ type: "paragraph" }],
-            });
-          },
-      } as any;
-    },
-    addNodeView() {
-      return ReactNodeViewRenderer(makeWrapperView(def));
-    },
-  });
 }
 /**
- * Build a TipTap Node for an "atomic" component (no editable children).
  *
- * The resulting node:
- * - belongs to the "block" group
- * - is an atom (no ProseMirror content inside)
- * - stores each field as a node attribute
- * - exposes an `insert<Tag>` command
- * - renders via a generic placeholder NodeView
  */
-export function createAtomicExtension(def: ComponentDef) {
   const commandName = `insert${def.tag}`;
   return Node.create({
     name: def.name,
     group: "block",
-    atom: true,
-    draggable: true,
-    selectable: true,
     addAttributes() {
-      const attrs: Record<string, { default: unknown }> = {};
-      for (const f of def.fields) {
-        attrs[f.name] = { default: f.default ?? null };
-      }
-      return attrs;
     },
     parseHTML() {
@@ -108,10 +56,8 @@ export function createAtomicExtension(def: ComponentDef) {
     },
     renderHTML({ HTMLAttributes }) {
-      return [
-        "div",
-        mergeAttributes(HTMLAttributes, { "data-component": def.name }),
-      ];
     },
     addCommands() {
@@ -119,18 +65,27 @@ export function createAtomicExtension(def: ComponentDef) {
         [commandName]:
           () =>
           ({ commands }: { commands: any }) => {
-            const attrs: Record<string, unknown> = {};
-            for (const f of def.fields) {
-              attrs[f.name] = f.default ?? null;
-            }
-            return commands.insertContent({ type: def.name, attrs });
           },
       } as any;
     },
     addNodeView() {
-      const View = def.name === "mermaid" ? MermaidNodeView : makeAtomicView(def);
       return ReactNodeViewRenderer(View);
     },
   });
 }

 // ---------------------------------------------------------------------------
+// Extension factory
 //
+// Generates TipTap Node extensions from ComponentDef declarations.
+// A single factory handles both "wrapper" (editable children) and
+// "atomic" (self-closing) components based on def.kind.
 // ---------------------------------------------------------------------------
 import { Node, mergeAttributes } from "@tiptap/core";
 import { makeWrapperView } from "./WrapperView";
 import { makeAtomicView } from "./AtomicView";
 import { MermaidNodeView } from "./MermaidView";
+import { makeHtmlEmbedView } from "../embeds/HtmlEmbedView";
+function buildAttrSchema(fields: ComponentDef["fields"]) {
+  const attrs: Record<string, { default: unknown }> = {};
+  for (const f of fields) {
+    attrs[f.name] = { default: f.default ?? null };
+  }
+  return attrs;
+}
+function buildDefaultAttrs(fields: ComponentDef["fields"]) {
+  const attrs: Record<string, unknown> = {};
+  for (const f of fields) {
+    attrs[f.name] = f.default ?? null;
+  }
+  return attrs;
 }
 /**
+ * Build a TipTap Node extension for any component definition.
  *
+ * - "wrapper" components have editable ProseMirror content (block+).
+ * - "atomic" components are self-closing atoms with no inner editing.
  */
+export function createComponentExtension(def: ComponentDef) {
+  const isWrapper = def.kind === "wrapper";
   const commandName = `insert${def.tag}`;
   return Node.create({
     name: def.name,
     group: "block",
+    ...(isWrapper
+      ? { content: def.content || "block+", defining: true, isolating: true }
+      : { atom: true, draggable: true, selectable: true }),
     addAttributes() {
+      return buildAttrSchema(def.fields);
     },
     parseHTML() {
     },
     renderHTML({ HTMLAttributes }) {
+      const base = mergeAttributes(HTMLAttributes, { "data-component": def.name });
+      return isWrapper ? ["div", base, 0] : ["div", base];
     },
     addCommands() {
         [commandName]:
           () =>
           ({ commands }: { commands: any }) => {
+            const content: any = { type: def.name, attrs: buildDefaultAttrs(def.fields) };
+            if (isWrapper) content.content = [{ type: "paragraph" }];
+            return commands.insertContent(content);
           },
       } as any;
     },
     addNodeView() {
+      if (isWrapper) {
+        return ReactNodeViewRenderer(makeWrapperView(def));
+      }
+      let View;
+      if (def.name === "mermaid") View = MermaidNodeView;
+      else if (def.name === "htmlEmbed") View = makeHtmlEmbedView(def);
+      else View = makeAtomicView(def);
       return ReactNodeViewRenderer(View);
     },
   });
 }
+/** @deprecated Use createComponentExtension instead */
+export const createWrapperExtension = createComponentExtension;
+/** @deprecated Use createComponentExtension instead */
+export const createAtomicExtension = createComponentExtension;

frontend/src/editor/components/index.ts CHANGED Viewed

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

 export { COMPONENTS } from "./registry";
 export type { ComponentDef, ComponentField } from "./registry";
+export { createComponentExtension, createWrapperExtension, createAtomicExtension } from "./factory";
 export { getComponentSlashItems } from "./slash-items";

frontend/src/editor/components/registry.ts CHANGED Viewed

@@ -79,7 +79,7 @@ const UI_META: Record<string, UIMeta> = {
   },
   htmlEmbed: {
     tag: "HtmlEmbed", icon: "📊", label: "HTML Embed", description: "Embed an external HTML visualization",
-    fieldMeta: { src: { label: "Source file", placeholder: "d3-chart.html" }, title: { label: "Title", placeholder: "Chart title…" }, desc: { label: "Description", placeholder: "Chart description…" }, wide: { label: "Wide" }, downloadable: { label: "Downloadable" } },
   },
   hfUser: {
     tag: "HfUser", icon: "👤", label: "HF User card", description: "Hugging Face user profile card",
@@ -91,7 +91,7 @@ const UI_META: Record<string, UIMeta> = {
   },
   mermaid: {
     tag: "Mermaid", icon: "◈", label: "Mermaid diagram", description: "Flowchart, sequence, Gantt, etc.",
-    fieldMeta: { code: { label: "Code", placeholder: "graph TD\\n  A --> B" } },
   },
 };

   },
   htmlEmbed: {
     tag: "HtmlEmbed", icon: "📊", label: "HTML Embed", description: "Embed an external HTML visualization",
+    fieldMeta: { src: { label: "Source file", placeholder: "d3-chart.html" }, title: { label: "Title", placeholder: "Chart title…" }, desc: { label: "Description", placeholder: "Chart description…" }, wide: { label: "Wide" }, downloadable: { label: "Downloadable" }, height: { label: "Height (px)", placeholder: "400" } },
   },
   hfUser: {
     tag: "HfUser", icon: "👤", label: "HF User card", description: "Hugging Face user profile card",
   },
   mermaid: {
     tag: "Mermaid", icon: "◈", label: "Mermaid diagram", description: "Flowchart, sequence, Gantt, etc.",
+    fieldMeta: { code: { label: "Code", placeholder: "graph LR\\n  A --> B" } },
   },
 };

frontend/src/editor/default-content.ts CHANGED Viewed

@@ -3,169 +3,294 @@
  * Covers every block/mark type supported by the editor.
  */
 export const DEFAULT_CONTENT = `
-<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>
-<h2>Lists</h2>
-<h3>Unordered list</h3>
-<ul>
-  <li>First item with some context</li>
-  <li>Second item — supports <strong>rich formatting</strong> inside</li>
-  <li>Third item with <code>inline code</code></li>
-</ul>
-<h3>Ordered list</h3>
 <ol>
-  <li>Prepare the dataset</li>
-  <li>Fine-tune the model</li>
-  <li>Evaluate on the test split</li>
-  <li>Deploy to production</li>
 </ol>
-<h2>Blockquote</h2>
-<blockquote>
-  <p>"The best way to predict the future is to invent it." — Alan Kay</p>
-</blockquote>
-<h2>Code block</h2>
-<pre><code class="language-python">import torch
-from transformers import AutoModelForCausalLM, AutoTokenizer
-model_id = "meta-llama/Llama-3-8B"
-tokenizer = AutoTokenizer.from_pretrained(model_id)
-model = AutoModelForCausalLM.from_pretrained(
-    model_id,
-    torch_dtype=torch.bfloat16,
-    device_map="auto",
-)
-prompt = "The future of AI is"
-inputs = tokenizer(prompt, return_tensors="pt").to(model.device)
-outputs = model.generate(**inputs, max_new_tokens=100)
-print(tokenizer.decode(outputs[0], skip_special_tokens=True))</code></pre>
-<h2>Table</h2>
 <table>
   <tr>
     <th>Model</th>
     <th>Parameters</th>
-    <th>MMLU</th>
-    <th>HellaSwag</th>
   </tr>
   <tr>
-    <td>LLaMA 3 8B</td>
-    <td>8B</td>
-    <td>66.6</td>
-    <td>82.0</td>
   </tr>
   <tr>
-    <td>LLaMA 3 70B</td>
-    <td>70B</td>
-    <td>79.5</td>
-    <td>87.3</td>
   </tr>
   <tr>
-    <td>GPT-4</td>
-    <td>~1.8T</td>
-    <td>86.4</td>
-    <td>95.3</td>
   </tr>
   <tr>
-    <td>Mixtral 8x7B</td>
-    <td>46.7B</td>
-    <td>70.6</td>
-    <td>84.4</td>
   </tr>
 </table>
-<h2>Mathematics</h2>
-<p>Inline math works with double dollars: the quadratic formula is <span data-type="inline-math" data-latex="x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}"></span> and Euler's identity is <span data-type="inline-math" data-latex="e^{i\\pi} + 1 = 0"></span>.</p>
-<p>Block equations use triple dollars. Here is a standard autoregressive loss:</p>
-<div data-type="block-math" data-latex="\\mathcal{L}(\\theta) = -\\sum_{t=1}^{T} \\log P(x_t \\mid x_{<t}; \\theta)"></div>
-<p>And the full variational trajectory decomposition:</p>
-<div data-type="block-math" data-latex="\\begin{aligned} \\log p_\\theta(\\mathcal{D}) &amp;= \\log \\sum_{i=0}^N p_\\theta((o,a)_i) \\\\ &amp;= \\log \\sum_{i=0}^N \\int_{\\text{supp}(Z)} p_\\theta((o,a)_i \\mid z)\\, p(z) \\\\ &amp;= \\log \\sum_{i=0}^N \\int_{\\text{supp}(Z)} \\frac{q_\\theta(z \\mid (o,a)_i)}{q_\\theta(z \\mid (o,a)_i)} \\cdot p_\\theta((o,a)_i \\mid z)\\, p(z) \\\\ &amp;= \\log \\sum_{i=0}^N \\mathbb{E}_{z \\sim p_\\theta(\\bullet \\mid (o,a)_i)} \\left[ \\frac{p(z)}{q_\\theta(z \\mid (o,a)_i)} \\cdot p_\\theta((o,a)_i \\mid z) \\right] \\end{aligned}"></div>
-<h2>Scientific references</h2>
-<p>The editor supports academic citations. The Transformer architecture <span data-type="citation" key="vaswani2017"></span> revolutionized natural language processing by introducing the self-attention mechanism.<span data-type="footnote" content="The original Transformer paper was presented at NeurIPS 2017 and has since become the most cited paper in machine learning history."></span> Large-scale pretraining <span data-type="citation" key="devlin2019"></span> demonstrated that unsupervised objectives on massive corpora produce powerful general-purpose representations.</p>
-<p>More recently, scaling laws <span data-type="citation" key="kaplan2020"></span> have shown predictable relationships between model size, dataset size, and performance.<span data-type="footnote" content="The power-law relationships described in the scaling laws paper hold across several orders of magnitude, from models with 768 parameters to those with over 1.5 billion."></span></p>
-<hr />
-<h2>Horizontal rule</h2>
-<p>Use a horizontal rule to visually separate sections:</p>
-<hr />
-<h2>Nested content</h2>
-<p>Lists can contain multiple levels of formatting. Blockquotes can hold structured content:</p>
-<blockquote>
-  <p><strong>Note:</strong> This editor supports real-time collaboration. Open this page in another tab to see cursors sync live.</p>
-</blockquote>
-<h3>A deeper heading level</h3>
-<p>Heading levels go from H1 down to H3, giving you a clear document hierarchy. The floating menu on the left lets you insert any block type, and the bubble toolbar appears when you select text.</p>
-<h2>Custom components</h2>
-<p>The editor supports rich custom components from the research article template. Use the <code>/</code> slash menu to insert them.</p>
-<div data-component="accordion" title="Implementation details" open="false"><p>The model was fine-tuned using LoRA adapters with rank 16 on 4× A100 GPUs. Training took approximately 12 hours on the full dataset. We used a cosine learning rate schedule with warm-up over the first 10% of steps.</p></div>
-<div data-component="note" title="Important" emoji="💡" variant="info"><p>All experiments were conducted with mixed-precision (bf16) training. Results may vary slightly with different random seeds.</p></div>
 <div data-component="quoteBlock" author="Ilya Sutskever" source="NeurIPS 2024 keynote"><p>If you have a very large neural network and you train it on a very large dataset, you get very good results. It really is that simple.</p></div>
-<div data-component="note" title="Warning" emoji="⚠️" variant="danger"><p>Do not use these scaling estimates for production capacity planning without accounting for inference overhead and memory constraints.</p></div>
-<div data-component="wide"><p>This content stretches beyond the normal column width, useful for wide tables, figures or visualizations that need extra horizontal space.</p></div>
-<div data-component="fullWidth"><p>This content spans the entire page width. It is ideal for large figures, panoramic images, or full-bleed data visualizations.</p></div>
-<div data-component="sidenote"><p>Scaling laws were first systematically studied in the context of neural machine translation before being generalized to language models.</p></div>
-<div data-component="reference" id="fig-scaling" caption="Log-linear relationship between compute budget and model performance across three orders of magnitude."><p>[ Figure placeholder — insert an image or chart here ]</p></div>
-<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>
-<div data-component="hfUser" username="tfrere" name="Thibaud Frere" url="https://huggingface.co/tfrere"></div>
-<h2>What's next?</h2>
-<p>Try asking the AI assistant to:</p>
 <ul>
-  <li>Rewrite a paragraph in a different tone</li>
-  <li>Expand a section with more detail</li>
-  <li>Fix grammar or spelling errors</li>
-  <li>Translate content to another language</li>
-  <li>Add a new section on a specific topic</li>
 </ul>
-<p>Select some text and use the quick actions, or type a message in the chat panel. All AI edits can be undone with <code>Cmd+Z</code>.</p>
 <div data-type="bibliography"></div>
 `;
@@ -228,4 +353,65 @@ export const SEED_CITATIONS: Record<string, any> = {
     "container-title": "arXiv preprint arXiv:2001.08361",
     DOI: "10.48550/arXiv.2001.08361",
   },
 };

  * Covers every block/mark type supported by the editor.
  */
 export const DEFAULT_CONTENT = `
+<h2>Introduction</h2>
+<p>Recent work has revealed remarkably predictable relationships between the scale of neural language models and their performance. As <span data-type="glossary" term="Scaling law" definition="A power-law relationship between model size, dataset size, compute budget, and performance."></span> research matures, practitioners increasingly rely on these empirical regularities to guide decisions about model architecture, training data, and compute allocation.</p>
+<div data-component="sidenote"><p>The concept of scaling laws in deep learning predates the current LLM era. Similar power-law behaviors were observed in machine translation and image classification as early as 2017.</p></div>
+<p>This paper presents an empirical study of <span data-type="glossary" term="Neural scaling" definition="The phenomenon where model performance improves as a power law with increasing model size, data, or compute."></span> behavior across three key axes: model size (number of parameters), dataset size (number of tokens), and compute budget (FLOPs). Building on the foundational work of <span data-type="citation" key="kaplan2020"></span> and subsequent refinements by <span data-type="citation" key="hoffmann2022"></span>, we investigate how these relationships hold across different architectural variants and training regimes.<span data-type="footnote" content="Our experiments span five orders of magnitude in compute, from single-GPU runs to multi-node clusters with 256 GPUs."></span></p>
+<p>We make the following contributions:</p>
 <ol>
+  <li>A comprehensive benchmark of scaling behavior across <strong>five model families</strong> ranging from 125M to 70B parameters</li>
+  <li>An analysis of <em>compute-optimal training</em>, extending the Chinchilla framework to mixture-of-experts architectures</li>
+  <li>Practical guidelines for resource allocation in large-scale training campaigns</li>
 </ol>
+<h2>Background</h2>
+<h3>The Transformer architecture</h3>
+<p>The <span data-type="glossary" term="Transformer" definition="A neural network architecture based entirely on self-attention mechanisms, introduced by Vaswani et al. (2017)."></span> architecture <span data-type="citation" key="vaswani2017"></span> forms the backbone of all models studied in this work. At its core, the self-attention mechanism computes a weighted combination of value vectors, where weights are determined by the compatibility between query and key vectors:</p>
+<div data-type="block-math" data-latex="\\text{Attention}(Q, K, V) = \\text{softmax}\\!\\left(\\frac{QK^\\top}{\\sqrt{d_k}}\\right) V"></div>
+<p>where <span data-type="inline-math" data-latex="Q \\in \\mathbb{R}^{n \\times d_k}"></span> are queries, <span data-type="inline-math" data-latex="K \\in \\mathbb{R}^{m \\times d_k}"></span> are keys, and <span data-type="inline-math" data-latex="V \\in \\mathbb{R}^{m \\times d_v}"></span> are values. The scaling factor <span data-type="inline-math" data-latex="\\sqrt{d_k}"></span> prevents the dot products from growing too large in magnitude.<span data-type="footnote" content="Without this scaling factor, the softmax function would be pushed into regions where it has extremely small gradients, making training unstable."></span></p>
+<h3>Pre-training objectives</h3>
+<p>All models in our study are trained with the standard autoregressive language modeling objective. Given a sequence of tokens <span data-type="inline-math" data-latex="x_1, x_2, \\ldots, x_T"></span>, the model maximizes:</p>
+<div data-type="block-math" data-latex="\\mathcal{L}(\\theta) = -\\sum_{t=1}^{T} \\log P_\\theta(x_t \\mid x_{<t})"></div>
+<p>This objective naturally decomposes across sequence positions, enabling efficient parallelization. Prior work <span data-type="citation" key="devlin2019"></span> demonstrated that bidirectional objectives can yield superior representations for downstream tasks, but autoregressive training remains the dominant paradigm for generative models.</p>
+<h4>Loss decomposition</h4>
+<p>For analysis purposes, we decompose the training loss into contributions from different frequency bins:</p>
+<div data-type="block-math" data-latex="\\begin{aligned} \\mathcal{L}_{\\text{total}} &= \\mathcal{L}_{\\text{high-freq}} + \\mathcal{L}_{\\text{mid-freq}} + \\mathcal{L}_{\\text{low-freq}} \\\\ &= -\\sum_{t \\in H} \\log P(x_t \\mid x_{<t}) - \\sum_{t \\in M} \\log P(x_t \\mid x_{<t}) - \\sum_{t \\in L} \\log P(x_t \\mid x_{<t}) \\end{aligned}"></div>
+<p>where <span data-type="inline-math" data-latex="H, M, L"></span> partition the vocabulary by token frequency. This decomposition reveals that scaling primarily benefits predictions on rare tokens.</p>
+<h2>Experimental setup</h2>
+<h3>Model configurations</h3>
+<p>We train five model families spanning three orders of magnitude in parameter count. All models use the standard decoder-only Transformer architecture with rotary position embeddings (RoPE) and SwiGLU activations.</p>
 <table>
   <tr>
     <th>Model</th>
     <th>Parameters</th>
+    <th>Layers</th>
+    <th>Hidden dim</th>
+    <th>Heads</th>
   </tr>
   <tr>
+    <td>Small</td>
+    <td>125M</td>
+    <td>12</td>
+    <td>768</td>
+    <td>12</td>
   </tr>
   <tr>
+    <td>Medium</td>
+    <td>1.3B</td>
+    <td>24</td>
+    <td>2048</td>
+    <td>16</td>
+  </tr>
+  <tr>
+    <td>Large</td>
+    <td>6.7B</td>
+    <td>32</td>
+    <td>4096</td>
+    <td>32</td>
   </tr>
   <tr>
+    <td>XL</td>
+    <td>13B</td>
+    <td>40</td>
+    <td>5120</td>
+    <td>40</td>
   </tr>
   <tr>
+    <td>XXL</td>
+    <td>70B</td>
+    <td>80</td>
+    <td>8192</td>
+    <td>64</td>
   </tr>
 </table>
+<h3>Training infrastructure</h3>
+<div data-component="accordion" title="Hardware and software details" open="false"><p>All experiments were conducted on clusters of NVIDIA A100 80GB GPUs connected via NVLink and InfiniBand. We used a custom distributed training framework built on PyTorch FSDP with mixed-precision (bf16) training. Gradient checkpointing was enabled for models above 6.7B parameters to fit within GPU memory constraints.</p></div>
+<p>The following code snippet illustrates our distributed training configuration:</p>
+<pre><code class="language-python">import torch
+from torch.distributed.fsdp import FullyShardedDataParallel as FSDP
+from transformers import AutoModelForCausalLM, AutoConfig
+config = AutoConfig.from_pretrained("meta-llama/Llama-3-8B")
+config.use_cache = False
+model = AutoModelForCausalLM.from_config(config)
+model = FSDP(
+    model,
+    mixed_precision=MixedPrecision(
+        param_dtype=torch.bfloat16,
+        reduce_dtype=torch.float32,
+        buffer_dtype=torch.bfloat16,
+    ),
+    sharding_strategy=ShardingStrategy.FULL_SHARD,
+    activation_checkpointing=True,
+)
+optimizer = torch.optim.AdamW(model.parameters(), lr=3e-4, weight_decay=0.1)
+scheduler = CosineAnnealingLR(optimizer, T_max=total_steps, eta_min=3e-5)</code></pre>
+<div data-component="note" title="Reproducibility" emoji="💡" variant="info"><p>All experiments use a fixed random seed (42) for weight initialization and data shuffling. However, non-determinism in CUDA operations means exact reproducibility across hardware configurations is not guaranteed. We report means and standard deviations across three independent runs for each configuration.</p></div>
+<h3>Dataset</h3>
+<p>We train on a deduplicated mixture of web text, books, and scientific papers totaling 2.4 trillion tokens. The mixture weights were optimized following the approach of <span data-type="citation" key="brown2020"></span>, with upsampling of high-quality sources.</p>
+<h2>Scaling behavior</h2>
+<h3>Compute-optimal training</h3>
+<p>Our central finding confirms and extends the <span data-type="glossary" term="Chinchilla scaling" definition="The observation by Hoffmann et al. (2022) that compute-optimal training requires scaling model size and data size in roughly equal proportions."></span> hypothesis: for a given compute budget <span data-type="inline-math" data-latex="C"></span>, the optimal model size <span data-type="inline-math" data-latex="N^*"></span> and token count <span data-type="inline-math" data-latex="D^*"></span> follow power laws:</p>
+<div data-type="block-math" data-latex="N^* \\propto C^{0.50}, \\quad D^* \\propto C^{0.50}"></div>
+<p>The interactive visualization below shows the scaling relationship across our model suite:</p>
+<div data-component="htmlEmbed" src="d3-scaling-chart.html" title="Compute-performance scaling" desc="Validation loss as a function of training compute (FLOPs) for each model size." wide="false" downloadable="true"></div>
+<h3>Memory requirements</h3>
+<h4>Training memory breakdown</h4>
+<p>Understanding memory consumption is critical for capacity planning. Training memory consists of four components: model parameters, gradients, optimizer states, and activations.<span data-type="footnote" content="With Adam optimizer, optimizer states include first and second moment estimates, each requiring the same memory as the model parameters. This means optimizer states alone consume 2× the parameter memory."></span> The chart below shows how these components scale across model sizes and sequence lengths:</p>
+<div data-component="htmlEmbed" src="d3-memory-bar.html" title="Training memory breakdown" desc="Memory consumption by component across model sizes and sequence lengths. Use the dropdowns to explore different configurations." wide="false" downloadable="true"></div>
+<div data-component="note" title="Practical constraint" emoji="⚠️" variant="danger"><p>The 70B model requires at minimum 4-way tensor parallelism at sequence length 4096 with selective recomputation. Without activation checkpointing, memory requirements exceed 1.5 TB, making training infeasible even on 8×A100 nodes.</p></div>
+<h4>Activation checkpointing strategies</h4>
+<p>We evaluate three recomputation strategies and find that <strong>selective recomputation</strong> (checkpointing only attention layers) provides the best trade-off between memory savings and compute overhead:</p>
+<ul>
+  <li><strong>None</strong>: full activation storage, maximum memory, fastest wall-clock time</li>
+  <li><strong>Selective</strong>: checkpoint attention blocks only, ~75% memory reduction in activations with &lt;5% throughput loss</li>
+  <li><strong>Full</strong>: checkpoint every layer, ~94% activation memory reduction but 30-40% throughput penalty</li>
+</ul>
+<h2>Evaluation</h2>
+<h3>Benchmark performance</h3>
+<p>We evaluate all models on a suite of standard benchmarks. The table below summarizes key results:</p>
+<table>
+  <tr>
+    <th>Model</th>
+    <th>MMLU</th>
+    <th>HellaSwag</th>
+    <th>ARC-C</th>
+    <th>TruthfulQA</th>
+  </tr>
+  <tr>
+    <td>Small (125M)</td>
+    <td>26.1</td>
+    <td>31.2</td>
+    <td>22.8</td>
+    <td>42.1</td>
+  </tr>
+  <tr>
+    <td>Medium (1.3B)</td>
+    <td>34.7</td>
+    <td>52.6</td>
+    <td>31.4</td>
+    <td>38.9</td>
+  </tr>
+  <tr>
+    <td>Large (6.7B)</td>
+    <td>52.3</td>
+    <td>74.1</td>
+    <td>45.6</td>
+    <td>35.2</td>
+  </tr>
+  <tr>
+    <td>XL (13B)</td>
+    <td>61.8</td>
+    <td>80.4</td>
+    <td>53.2</td>
+    <td>39.7</td>
+  </tr>
+  <tr>
+    <td>XXL (70B)</td>
+    <td>72.4</td>
+    <td>86.9</td>
+    <td>62.1</td>
+    <td>44.3</td>
+  </tr>
+</table>
+<div data-component="sidenote"><p>TruthfulQA shows a U-shaped pattern with model scale: medium-sized models perform worst as they are large enough to memorize common misconceptions but not large enough to reason past them.</p></div>
+<h3>Classification analysis</h3>
+<p>To understand where scaling helps most, we analyze per-class performance on a 10-class text classification task. The confusion matrices below compare our baseline (1.3B) and improved (6.7B) models:</p>
+<div data-component="wide"><div data-component="htmlEmbed" src="d3-confusion-matrix.html" title="Confusion matrix comparison" desc="Per-class classification accuracy for baseline (1.3B, left) vs improved (6.7B, right). The delta matrix (right) highlights classes with the largest gains." wide="false"></div></div>
+<p>The delta matrix reveals that scaling disproportionately benefits classes 2, 3, 5, and 8 (categories with high inter-class confusion at smaller scales), while already well-separated classes (0, 7, 9) see modest improvements.</p>
+<h2>Analysis</h2>
+<h3>Training dynamics</h3>
 <div data-component="quoteBlock" author="Ilya Sutskever" source="NeurIPS 2024 keynote"><p>If you have a very large neural network and you train it on a very large dataset, you get very good results. It really is that simple.</p></div>
+<p>While the quote above captures the high-level intuition, the reality is more nuanced. Our experiments reveal several non-obvious phenomena during training:</p>
+<div data-component="mermaid" code="graph LR\n  A[Initialize model] --> B[Warmup phase]\n  B --> C{Loss plateau?}\n  C -->|No| D[Continue training]\n  D --> C\n  C -->|Yes| E[Increase learning rate]\n  E --> F{Loss decreases?}\n  F -->|Yes| D\n  F -->|No| G[Reduce batch size]\n  G --> D"></div>
+<h4>Phase transitions</h4>
+<p>We observe distinct <strong>phase transitions</strong> in model capabilities as training progresses. These transitions are characterized by sudden improvements in specific task categories, consistent with the "emergence" hypothesis <span data-type="citation" key="wei2022"></span>.<span data-type="footnote" content="The emergence hypothesis suggests that certain capabilities appear abruptly at specific scale thresholds, rather than improving gradually. This remains a topic of active debate in the field, with some researchers arguing that emergent abilities may be artifacts of evaluation metrics rather than genuine phase transitions in model behavior."></span></p>
+<div data-component="stack" layout="2-column" gap="medium"><div data-type="stack-column"><p><strong>Early training (0-20% tokens)</strong></p><p>Models acquire basic syntax, word co-occurrence statistics, and simple factual associations. Loss decreases rapidly following a power law. All model sizes show similar learning curves during this phase.</p></div><div data-type="stack-column"><p><strong>Late training (80-100% tokens)</strong></p><p>Larger models continue improving on complex reasoning tasks while smaller models plateau. The gap between model sizes widens, with diminishing returns for the smallest models. Multi-step reasoning capabilities emerge only in models above 6.7B parameters.</p></div></div>
+<h3>Compute efficiency</h3>
+<p>A critical finding is the relationship between total compute <span data-type="inline-math" data-latex="C"></span> and achieved loss <span data-type="inline-math" data-latex="L"></span>:</p>
+<div data-type="block-math" data-latex="L(C) = \\left(\\frac{C_0}{C}\\right)^{\\alpha_C} + L_\\infty"></div>
+<p>where <span data-type="inline-math" data-latex="\\alpha_C \\approx 0.050"></span> is the compute scaling exponent and <span data-type="inline-math" data-latex="L_\\infty"></span> represents the irreducible loss.<span data-type="footnote" content="The irreducible loss corresponds to the entropy of natural language itself and cannot be reduced by any model regardless of scale. Estimates place it around 1.69 nats for English text."></span> This implies that reducing loss by 10% requires approximately <span data-type="inline-math" data-latex="7.2\\times"></span> more compute.</p>
+<div data-component="note" title="Cost implications" emoji="💰" variant="info"><p>At current cloud GPU prices ($2/GPU-hour for A100), training a 70B parameter model for 2T tokens costs approximately <strong>$2.4M</strong>. Scaling to 400B parameters at compute-optimal token counts would cost an estimated <strong>$45M</strong>, highlighting the importance of getting scaling predictions right before committing resources.</p></div>
+<h2>Discussion</h2>
+<h3>Limitations</h3>
+<div data-component="note" title="Important caveats" emoji="⚠️" variant="danger"><p>Our scaling laws are fit on models up to 70B parameters and may not extrapolate reliably beyond this range. The power-law fits assume a fixed architecture family; mixture-of-experts models, retrieval-augmented systems, and other architectural innovations may follow different scaling trajectories.</p></div>
+<p>Several limitations should be considered when interpreting our results:</p>
+<ol>
+  <li>All models share the same tokenizer. Tokenizer choice can significantly affect apparent scaling behavior, particularly for multilingual or code-heavy evaluations.</li>
+  <li>We focus exclusively on pre-training loss. The relationship between pre-training loss and downstream task performance is complex and task-dependent.</li>
+  <li>Our compute estimates do not include the cost of hyperparameter search, which can add 2-5× overhead for novel architectures.</li>
+</ol>
+<h3>Broader impact</h3>
+<blockquote>
+  <p>"The ability to predict model performance before training enables more responsible allocation of computational resources and reduces wasteful experimentation."</p>
+</blockquote>
+<p>Scaling laws have implications beyond pure research. They enable organizations to make informed decisions about resource investment, potentially reducing the carbon footprint of unnecessary large-scale training runs.</p>
+<div data-component="fullWidth"><p>This research was conducted as part of the Hugging Face Science initiative, which aims to advance open research in machine learning. All models, training code, and evaluation scripts are available under the Apache 2.0 license at <a href="https://huggingface.co">huggingface.co</a>.</p></div>
+<h2>Conclusion</h2>
+<p>We have presented a comprehensive empirical study of scaling laws for neural language models, confirming the power-law relationship between compute and performance across five model sizes. Our key findings include:</p>
 <ul>
+  <li>Compute-optimal training follows the <span data-type="inline-math" data-latex="N^* \\propto C^{0.50}"></span> scaling predicted by the Chinchilla framework</li>
+  <li>Memory requirements scale super-linearly with sequence length due to activation storage</li>
+  <li>Scaling disproportionately benefits rare tokens and high-confusion classes</li>
+  <li>Phase transitions in model capabilities emerge at predictable compute thresholds</li>
 </ul>
+<p>These results provide actionable guidance for practitioners planning large-scale training campaigns. Future work should extend this analysis to multimodal models, investigate the interaction between scaling and alignment training, and develop theoretical frameworks that explain the observed power-law behavior.</p>
+<div data-component="accordion" title="Acknowledgments" open="false"><p>We thank the Hugging Face compute team for providing access to GPU clusters, the open-source contributors who maintain the training infrastructure, and the anonymous reviewers for their insightful feedback. Special thanks to the BigScience and EleutherAI communities for inspiring this line of research.</p></div>
+<hr />
+<div data-component="hfUser" username="tfrere" name="Thibaud Frere" url="https://huggingface.co/tfrere"></div>
 <div data-type="bibliography"></div>
 `;
     "container-title": "arXiv preprint arXiv:2001.08361",
     DOI: "10.48550/arXiv.2001.08361",
   },
+  brown2020: {
+    id: "brown2020",
+    type: "paper-conference",
+    title: "Language models are few-shot learners",
+    author: [
+      { family: "Brown", given: "Tom B." },
+      { family: "Mann", given: "Benjamin" },
+      { family: "Ryder", given: "Nick" },
+      { family: "Subbiah", given: "Melanie" },
+      { family: "Kaplan", given: "Jared" },
+      { family: "Dhariwal", given: "Prafulla" },
+      { family: "Neelakantan", given: "Arvind" },
+      { family: "Shyam", given: "Pranav" },
+      { family: "Sastry", given: "Girish" },
+      { family: "Askell", given: "Amanda" },
+    ],
+    issued: { "date-parts": [[2020]] },
+    "container-title": "Advances in Neural Information Processing Systems",
+    volume: "33",
+    DOI: "10.48550/arXiv.2005.14165",
+  },
+  hoffmann2022: {
+    id: "hoffmann2022",
+    type: "article-journal",
+    title: "Training compute-optimal large language models",
+    author: [
+      { family: "Hoffmann", given: "Jordan" },
+      { family: "Borgeaud", given: "Sebastian" },
+      { family: "Mensch", given: "Arthur" },
+      { family: "Buchatskaya", given: "Elena" },
+      { family: "Cai", given: "Trevor" },
+      { family: "Rutherford", given: "Eliza" },
+      { family: "de Las Casas", given: "Diego" },
+      { family: "Hendricks", given: "Lisa Anne" },
+      { family: "Welbl", given: "Johannes" },
+      { family: "Clark", given: "Aidan" },
+    ],
+    issued: { "date-parts": [[2022]] },
+    "container-title": "arXiv preprint arXiv:2203.15556",
+    DOI: "10.48550/arXiv.2203.15556",
+  },
+  wei2022: {
+    id: "wei2022",
+    type: "article-journal",
+    title: "Emergent abilities of large language models",
+    author: [
+      { family: "Wei", given: "Jason" },
+      { family: "Tay", given: "Yi" },
+      { family: "Bommasani", given: "Rishi" },
+      { family: "Raffel", given: "Colin" },
+      { family: "Zoph", given: "Barret" },
+      { family: "Borgeaud", given: "Sebastian" },
+      { family: "Yogatama", given: "Dani" },
+      { family: "Bosma", given: "Maarten" },
+      { family: "Zhou", given: "Denny" },
+      { family: "Metzler", given: "Donald" },
+    ],
+    issued: { "date-parts": [[2022]] },
+    "container-title": "Transactions on Machine Learning Research",
+    DOI: "10.48550/arXiv.2206.07682",
+  },
 };

frontend/src/editor/embeds/HtmlEmbedView.tsx ADDED Viewed

	@@ -0,0 +1,274 @@

+import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+import type { NodeViewProps } from "@tiptap/react";
+import type { ComponentDef, ComponentField } from "../components/registry";
+import { buildDoc, DEFAULT_EMBED_HEIGHT } from "./build-doc";
+import type { EmbedStore } from "./embed-store";
+import { useTheme } from "../../hooks/useTheme";
+/**
+ * Resolve embed store from the editor's storage.
+ * The store is injected by Editor.tsx into editor.storage.htmlEmbed.embedStore.
+ */
+function useEmbedStore(editor: NodeViewProps["editor"]): EmbedStore | null {
+  return (editor.storage.htmlEmbed as any)?.embedStore ?? null;
+}
+function FieldRow({
+  field,
+  value,
+  onChange,
+}: {
+  field: ComponentField;
+  value: unknown;
+  onChange: (val: unknown) => void;
+}) {
+  if (field.type === "boolean") {
+    return (
+      <label className="embed-field-row embed-field-checkbox">
+        <input
+          type="checkbox"
+          checked={!!value}
+          onChange={(e) => onChange(e.target.checked)}
+        />
+        {field.label}
+      </label>
+    );
+  }
+  return (
+    <div className="embed-field-row">
+      <span className="embed-field-label">{field.label}</span>
+      <input
+        type="text"
+        value={String(value ?? "")}
+        placeholder={field.placeholder || field.label}
+        onChange={(e) => onChange(e.target.value)}
+        className="embed-field-input"
+      />
+    </div>
+  );
+}
+/** Safely parse the stored height attribute (legacy: string; new: number). */
+function parseStoredHeight(raw: unknown): number {
+  if (typeof raw === "number" && raw > 0) return Math.round(raw);
+  const n = parseInt(String(raw ?? ""), 10);
+  return Number.isFinite(n) && n > 0 ? n : DEFAULT_EMBED_HEIGHT;
+}
+export function makeHtmlEmbedView(def: ComponentDef) {
+  function HtmlEmbedNodeView({ node, updateAttributes, editor }: NodeViewProps) {
+    const src = (node.attrs.src as string) || "";
+    const title = (node.attrs.title as string) || "";
+    const storedHeight = parseStoredHeight(node.attrs.height);
+    const { isDark, primaryColor } = useTheme();
+    const embedStore = useEmbedStore(editor);
+    const [html, setHtml] = useState("");
+    const [iframeHeight, setIframeHeight] = useState(storedHeight);
+    const [showSettings, setShowSettings] = useState(false);
+    const iframeRef = useRef<HTMLIFrameElement>(null);
+    // Sync from embed store
+    useEffect(() => {
+      if (!embedStore || !src) return;
+      setHtml(embedStore.get(src));
+      return embedStore.observeKey(src, setHtml);
+    }, [embedStore, src]);
+    // Build full document for srcdoc.
+    // NOTE: only depends on `html` – theme changes are pushed via postMessage
+    // below so we don't reload the iframe (which would lose chart state).
+    const srcdoc = useMemo(() => {
+      if (!html) return "";
+      return buildDoc(html, { isDark, primaryColor });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [html]);
+    // Hot-swap theme inside the iframe without reload.
+    useEffect(() => {
+      const frame = iframeRef.current;
+      if (!frame || !html) return;
+      const win = frame.contentWindow;
+      if (!win) return;
+      const send = () => {
+        try {
+          win.postMessage(
+            {
+              type: "setTheme",
+              theme: isDark ? "dark" : "light",
+              primaryColor,
+            },
+            "*",
+          );
+        } catch {
+          /* cross-origin / not yet loaded – will retry on load */
+        }
+      };
+      send();
+      const onLoad = () => send();
+      frame.addEventListener("load", onLoad);
+      return () => frame.removeEventListener("load", onLoad);
+    }, [isDark, primaryColor, html]);
+    // Listen for height reports from the iframe.
+    // - Apply immediately to the visible iframe (React state) for smooth resize.
+    // - Debounce the PM transaction (node attribute) so document history isn't
+    //   polluted with noisy updates during animations.
+    const lastPersistedRef = useRef<number>(storedHeight);
+    const persistTimerRef = useRef(0);
+    useEffect(() => {
+      const handler = (e: MessageEvent) => {
+        if (e.data?.type !== "embedResize") return;
+        const frame = iframeRef.current;
+        if (!frame || e.source !== frame.contentWindow) return;
+        const h = Math.max(0, Math.ceil(e.data.height));
+        if (!h) return;
+        setIframeHeight((prev) => (prev === h ? prev : h));
+        if (h !== lastPersistedRef.current) {
+          clearTimeout(persistTimerRef.current);
+          persistTimerRef.current = window.setTimeout(() => {
+            if (h !== lastPersistedRef.current) {
+              lastPersistedRef.current = h;
+              updateAttributes({ height: h });
+            }
+          }, 800);
+        }
+      };
+      window.addEventListener("message", handler);
+      return () => {
+        window.removeEventListener("message", handler);
+        clearTimeout(persistTimerRef.current);
+      };
+    }, [updateAttributes]);
+    // Reset persisted tracker when the underlying node attribute changes from
+    // the outside (undo/redo, collab remote update).
+    useEffect(() => {
+      lastPersistedRef.current = storedHeight;
+    }, [storedHeight]);
+    const handleFieldChange = useCallback(
+      (fieldName: string, value: unknown) => {
+        updateAttributes({ [fieldName]: value });
+      },
+      [updateAttributes],
+    );
+    const hasContent = !!html;
+    // Metadata fields (exclude height - managed automatically from iframe)
+    const editableFields = def.fields.filter((f) => f.name !== "height");
+    return (
+      <NodeViewWrapper data-component="htmlEmbed">
+        <div contentEditable={false} className="embed-view">
+          {/* Header */}
+          <div className="embed-header">
+            <div className="embed-header-left">
+              <span className="embed-header-icon">📊</span>
+              <span className="embed-header-label">
+                {title || src || "HTML Embed"}
+              </span>
+              {src && title && (
+                <span className="embed-header-src">{src}</span>
+              )}
+            </div>
+            <div className="embed-header-actions">
+              <button
+                className="embed-btn"
+                onClick={() => setShowSettings(!showSettings)}
+                title="Settings"
+              >
+                {showSettings ? "Close" : "Settings"}
+              </button>
+              {hasContent && (
+                <button
+                  className="embed-btn embed-btn-primary"
+                  onClick={() => {
+                    window.dispatchEvent(
+                      new CustomEvent("open-embed-studio", { detail: { src } }),
+                    );
+                  }}
+                  title="Open Embed Studio"
+                >
+                  Edit
+                </button>
+              )}
+            </div>
+          </div>
+          {/* Settings panel */}
+          {showSettings && (
+            <div className="embed-settings">
+              {editableFields.map((f) => (
+                <FieldRow
+                  key={f.name}
+                  field={f}
+                  value={node.attrs[f.name]}
+                  onChange={(v) => handleFieldChange(f.name, v)}
+                />
+              ))}
+            </div>
+          )}
+          {/* Preview */}
+          {hasContent ? (
+            <div className="embed-preview">
+              <iframe
+                ref={iframeRef}
+                srcDoc={srcdoc}
+                title={title || src || "Chart preview"}
+                sandbox="allow-scripts allow-same-origin"
+                className="embed-iframe"
+                style={{
+                  height: iframeHeight,
+                  minHeight: Math.min(storedHeight, 120),
+                }}
+              />
+            </div>
+          ) : (
+            <div className="embed-empty">
+              {src ? (
+                <>
+                  <span className="embed-empty-icon">📊</span>
+                  <span>
+                    No content for <code>{src}</code>
+                  </span>
+                  <button
+                    className="embed-btn embed-btn-primary"
+                    onClick={() => {
+                      window.dispatchEvent(
+                        new CustomEvent("open-embed-studio", { detail: { src } }),
+                      );
+                    }}
+                  >
+                    Create Chart
+                  </button>
+                </>
+              ) : (
+                <>
+                  <span className="embed-empty-icon">📊</span>
+                  <span>Set a source filename in settings to link an embed</span>
+                  <button
+                    className="embed-btn"
+                    onClick={() => setShowSettings(true)}
+                  >
+                    Open Settings
+                  </button>
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      </NodeViewWrapper>
+    );
+  }
+  HtmlEmbedNodeView.displayName = "HtmlEmbedView";
+  return HtmlEmbedNodeView;
+}

frontend/src/editor/embeds/build-doc.ts ADDED Viewed

	@@ -0,0 +1,22 @@

+// Editor-side wrapper around the shared embed srcdoc builder.
+// Keeping this thin shim avoids churning every import site, and preserves
+// the editor-specific call signature (isDark / primaryColor).
+import { buildEmbedSrcdoc, DEFAULT_EMBED_HEIGHT } from "#shared/embed-doc";
+export { DEFAULT_EMBED_HEIGHT };
+interface BuildDocOptions {
+  isDark: boolean;
+  primaryColor?: string;
+  /** Edge-to-edge mode used for banner embeds. See buildEmbedSrcdoc. */
+  fullBleed?: boolean;
+}
+export function buildDoc(htmlFragment: string, opts: BuildDocOptions): string {
+  return buildEmbedSrcdoc(htmlFragment, {
+    isDark: opts.isDark,
+    primaryColor: opts.primaryColor,
+    fullBleed: opts.fullBleed,
+  });
+}

frontend/src/editor/embeds/embed-store.ts ADDED Viewed

	@@ -0,0 +1,99 @@

+import * as Y from "yjs";
+/**
+ * Collaborative store for HTML embed content, backed by Y.Map("embeds").
+ *
+ * Each key is a filename (e.g. "d3-scaling-chart.html") and the value is
+ * the raw HTML fragment (not a full document - buildDoc wraps it for display).
+ *
+ * The ProseMirror htmlEmbed node only stores the `src` attribute as a
+ * reference key. The actual HTML lives here so multiple collaborators
+ * can edit chart content concurrently.
+ */
+export function createEmbedStore(ydoc: Y.Doc) {
+  const ymap = ydoc.getMap<string>("embeds");
+  function get(src: string): string {
+    return ymap.get(src) ?? "";
+  }
+  function set(src: string, html: string) {
+    ymap.set(src, html);
+  }
+  function has(src: string): boolean {
+    return ymap.has(src);
+  }
+  function remove(src: string) {
+    ymap.delete(src);
+  }
+  function rename(oldSrc: string, newSrc: string) {
+    const html = ymap.get(oldSrc);
+    if (html !== undefined) {
+      ydoc.transact(() => {
+        ymap.set(newSrc, html);
+        ymap.delete(oldSrc);
+      });
+    }
+  }
+  /** Apply a search/replace patch to an existing embed. */
+  function patch(src: string, search: string, replace: string): boolean {
+    const html = ymap.get(src);
+    if (!html || !html.includes(search)) return false;
+    ymap.set(src, html.replace(search, replace));
+    return true;
+  }
+  function keys(): string[] {
+    return Array.from(ymap.keys());
+  }
+  function getAll(): Record<string, string> {
+    const result: Record<string, string> = {};
+    ymap.forEach((val, key) => {
+      result[key] = val;
+    });
+    return result;
+  }
+  /**
+   * Observe changes to any embed.
+   * Returns an unsubscribe function.
+   */
+  function observe(callback: () => void) {
+    ymap.observe(callback);
+    return () => ymap.unobserve(callback);
+  }
+  /**
+   * Observe changes to a specific embed key.
+   * Returns an unsubscribe function.
+   */
+  function observeKey(src: string, callback: (html: string) => void) {
+    const handler = (event: Y.YMapEvent<string>) => {
+      if (event.keysChanged.has(src)) {
+        callback(ymap.get(src) ?? "");
+      }
+    };
+    ymap.observe(handler);
+    return () => ymap.unobserve(handler);
+  }
+  return {
+    get,
+    set,
+    has,
+    remove,
+    rename,
+    patch,
+    keys,
+    getAll,
+    observe,
+    observeKey,
+  };
+}
+export type EmbedStore = ReturnType<typeof createEmbedStore>;

frontend/src/editor/extensions/citation.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Node, mergeAttributes } from "@tiptap/core";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 import { CitationView } from "../CitationView";
 declare module "@tiptap/core" {
@@ -10,6 +11,24 @@ declare module "@tiptap/core" {
   }
 }
 export const Citation = Node.create({
   name: "citation",
   group: "inline",
@@ -54,6 +73,71 @@ export const Citation = Node.create({
     };
   },
   addNodeView() {
     return ReactNodeViewRenderer(CitationView);
   },

 import { Node, mergeAttributes } from "@tiptap/core";
 import { ReactNodeViewRenderer } from "@tiptap/react";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { CitationView } from "../CitationView";
 declare module "@tiptap/core" {
   }
 }
+export const citationLabelKey = new PluginKey("citation-labels");
+type CitationStyle = "apa" | "ieee" | "vancouver" | "chicago-author-date" | "harvard1";
+const NUMERIC_STYLES = new Set<CitationStyle>(["ieee", "vancouver"]);
+function formatAuthorDate(entry: any): string {
+  const authors = entry.author;
+  if (!authors?.length) return `(${entry.id || "?"})`;
+  const year = entry.issued?.["date-parts"]?.[0]?.[0] || "n.d.";
+  const first = authors[0].family || authors[0].literal || "?";
+  if (authors.length === 1) return `(${first}, ${year})`;
+  if (authors.length === 2) {
+    const second = authors[1].family || authors[1].literal || "?";
+    return `(${first} & ${second}, ${year})`;
+  }
+  return `(${first} et al., ${year})`;
+}
 export const Citation = Node.create({
   name: "citation",
   group: "inline",
     };
   },
+  addProseMirrorPlugins() {
+    const ext = this;
+    return [
+      new Plugin({
+        key: citationLabelKey,
+        appendTransaction(transactions, _oldState, newState) {
+          const docChanged = transactions.some((tr) => tr.docChanged);
+          const signaled = transactions.some((tr) => tr.getMeta(citationLabelKey));
+          if (!docChanged && !signaled) return null;
+          const storage = ext.editor.storage.citation;
+          const citationsMap = storage?.citationsMap;
+          const settingsMap = storage?.settingsMap;
+          const style = (settingsMap?.get("citationStyle") || "apa") as CitationStyle;
+          // Single pass: collect all citations with their positions
+          const order: string[] = [];
+          const nodes: { pos: number; key: string; currentLabel: string }[] = [];
+          newState.doc.descendants((node, pos) => {
+            if (node.type.name === "citation" && node.attrs.key) {
+              const k = node.attrs.key as string;
+              if (!order.includes(k)) order.push(k);
+              nodes.push({ pos, key: k, currentLabel: node.attrs.label as string });
+            }
+          });
+          if (nodes.length === 0) return null;
+          const updates: { pos: number; key: string; label: string }[] = [];
+          for (const { pos, key, currentLabel } of nodes) {
+            const entry = citationsMap?.get(key);
+            let newLabel: string;
+            if (!entry) {
+              newLabel = `[${key}]`;
+            } else if (NUMERIC_STYLES.has(style)) {
+              const idx = order.indexOf(key);
+              const num = idx >= 0 ? idx + 1 : "?";
+              newLabel = style === "ieee" ? `[${num}]` : `(${num})`;
+            } else {
+              newLabel = formatAuthorDate(entry);
+            }
+            if (newLabel !== currentLabel) {
+              updates.push({ pos, key, label: newLabel });
+            }
+          }
+          if (updates.length === 0) return null;
+          const tr = newState.tr;
+          for (let i = updates.length - 1; i >= 0; i--) {
+            const { pos, key, label } = updates[i];
+            tr.setNodeMarkup(pos, undefined, { key, label });
+          }
+          return tr;
+        },
+      }),
+    ];
+  },
   addNodeView() {
     return ReactNodeViewRenderer(CitationView);
   },

frontend/src/editor/extensions/code-block-shiki.tsx ADDED Viewed

	@@ -0,0 +1,300 @@

+import { findChildren } from "@tiptap/core";
+import { CodeBlock, type CodeBlockOptions } from "@tiptap/extension-code-block";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import type { Node as ProsemirrorNode } from "@tiptap/pm/model";
+import type { EditorView } from "@tiptap/pm/view";
+import type { Element as HastElement, ElementContent, Root as HastRoot } from "hast";
+import {
+  getSharedHighlighter,
+  isSupportedLang,
+  normalizeLang,
+  SHIKI_THEMES,
+  type ShikiHighlighter,
+} from "#shared/shiki-config";
+/**
+ * TipTap code block with Shiki-powered syntax highlighting.
+ *
+ * Architecture mirrors `@tiptap/extension-code-block-lowlight`:
+ *   1. Extends the base `CodeBlock` node (input rules, keymap, etc.).
+ *   2. Registers a ProseMirror plugin that produces a `DecorationSet` from
+ *      a Shiki `codeToHast()` call for every `codeBlock` in the document.
+ *   3. Token coloring uses `Decoration.inline` with `style`/`class` (rendered
+ *      by PM as wrapping spans). Line numbers use `Decoration.widget`: one
+ *      `<span class="code-line-num">` inserted at each source line start.
+ *
+ * Why widgets for numbers (not CSS counters): PM merges overlapping inline
+ * decorations into a single flat span per text range, so an outer `.line`
+ * decoration would NOT produce a nesting parent usable by `counter-increment`.
+ * A widget at line start is a standalone DOM node, which the same CSS can
+ * style identically in the editor and in the published output (the publisher
+ * transformer injects the exact same `<span class="code-line-num">` markup).
+ *
+ * The language label (e.g. "python") is rendered by pure CSS using
+ * `pre::after { content: attr(data-lang) }` - no extra DOM.
+ *
+ * Because Shiki is async (WASM engine + grammars), decorations stay empty
+ * until the shared highlighter resolves. A view-level hook then dispatches a
+ * refresh transaction, causing the whole doc to re-decorate at once.
+ */
+/**
+ * Walks Shiki's token tree inside a single `<span class="line">` and pushes
+ * one `Decoration.inline` per leaf text node, inheriting `style`/`class`
+ * from ancestors. The `line` class itself is stripped from class propagation
+ * because it only marks Shiki's line wrapper, not the tokens.
+ */
+/**
+ * Read the class list off a hast element. Shiki emits a plain `class` string
+ * (not the JSX-style `className` array), so we inspect both to be robust
+ * against upstream changes.
+ */
+function readHastClasses(node: HastElement): string[] {
+  const props = node.properties ?? {};
+  const raw = props.class ?? props.className;
+  if (Array.isArray(raw)) return raw.map(String).filter(Boolean);
+  if (typeof raw === "string") return raw.split(/\s+/).filter(Boolean);
+  return [];
+}
+function walkLineTokens(
+  nodes: readonly ElementContent[],
+  offset: number,
+  out: Decoration[],
+  styleStack: readonly string[] = [],
+  classStack: readonly string[] = [],
+): number {
+  for (const node of nodes) {
+    if (node.type === "text") {
+      const len = node.value.length;
+      if (len > 0 && (styleStack.length > 0 || classStack.length > 0)) {
+        const attrs: Record<string, string> = {};
+        if (styleStack.length > 0) attrs.style = styleStack.join(";");
+        if (classStack.length > 0) attrs.class = classStack.join(" ");
+        out.push(Decoration.inline(offset, offset + len, attrs));
+      }
+      offset += len;
+      continue;
+    }
+    if (node.type === "element") {
+      const rawStyle = node.properties?.style;
+      const style = typeof rawStyle === "string" ? rawStyle : "";
+      const classes = readHastClasses(node).filter((c) => c !== "line");
+      const nextStyleStack = style ? [...styleStack, style] : styleStack;
+      const nextClassStack = classes.length ? [...classStack, ...classes] : classStack;
+      offset = walkLineTokens(node.children, offset, out, nextStyleStack, nextClassStack);
+    }
+  }
+  return offset;
+}
+/**
+ * Extract the `<code>` node's children from a Shiki hast root, skipping the
+ * outer `<pre>` and `<code>` wrappers (their styles would leak onto tokens).
+ */
+function getCodeChildren(hast: HastRoot): readonly ElementContent[] {
+  const pre = hast.children.find((c): c is HastElement => c.type === "element" && c.tagName === "pre");
+  if (!pre) return [];
+  const code = pre.children.find((c): c is HastElement => c.type === "element" && c.tagName === "code");
+  return code ? code.children : [];
+}
+function isLineElement(node: ElementContent): node is HastElement {
+  if (node.type !== "element") return false;
+  return readHastClasses(node).includes("line");
+}
+function buildLineNumberWidget(n: number): HTMLSpanElement {
+  const span = document.createElement("span");
+  span.className = "code-line-num";
+  span.textContent = String(n);
+  span.setAttribute("contenteditable", "false");
+  span.setAttribute("aria-hidden", "true");
+  return span;
+}
+interface DecorationBuildCtx {
+  doc: ProsemirrorNode;
+  name: string;
+  highlighter: ShikiHighlighter | null;
+  defaultLanguage: string | null;
+}
+function buildDecorations({ doc, name, highlighter, defaultLanguage }: DecorationBuildCtx): DecorationSet {
+  const decorations: Decoration[] = [];
+  const blocks = findChildren(doc, (node) => node.type.name === name);
+  for (const block of blocks) {
+    const text = block.node.textContent;
+    // Always emit line-number widgets, even before the highlighter resolves,
+    // so the gutter appears immediately on page load instead of flashing in
+    // ~100ms later when Shiki is ready. Each widget captures its own line
+    // number via a block-scoped const to avoid the classic let-in-closure
+    // pitfall (all widgets would otherwise render the final line number).
+    {
+      const n = 1;
+      const pos = block.pos + 1;
+      decorations.push(
+        Decoration.widget(pos, () => buildLineNumberWidget(n), {
+          side: -1,
+          key: `cln-${block.pos}-${n}`,
+          ignoreSelection: true,
+        }),
+      );
+    }
+    let lineNo = 1;
+    for (let i = 0; i < text.length; i++) {
+      if (text.charCodeAt(i) === 10 /* \n */) {
+        lineNo += 1;
+        const n = lineNo;
+        const pos = block.pos + 1 + i + 1;
+        decorations.push(
+          Decoration.widget(pos, () => buildLineNumberWidget(n), {
+            side: -1,
+            key: `cln-${block.pos}-${n}`,
+            ignoreSelection: true,
+          }),
+        );
+      }
+    }
+    if (!highlighter || !text) continue;
+    const raw = block.node.attrs.language || defaultLanguage || "";
+    const lang = normalizeLang(raw);
+    let hast: HastRoot;
+    try {
+      hast = highlighter.codeToHast(text, {
+        lang: isSupportedLang(lang) ? lang : "text",
+        themes: SHIKI_THEMES,
+        defaultColor: false,
+      }) as HastRoot;
+    } catch {
+      continue;
+    }
+    const children = getCodeChildren(hast);
+    let offset = block.pos + 1;
+    for (const child of children) {
+      if (child.type === "text") {
+        offset += child.value.length;
+        continue;
+      }
+      if (!isLineElement(child)) continue;
+      offset = walkLineTokens(child.children, offset, decorations);
+    }
+  }
+  return DecorationSet.create(doc, decorations);
+}
+const shikiPluginKey = new PluginKey<DecorationSet>("shiki");
+function createShikiPlugin(name: string, defaultLanguage: string | null): Plugin<DecorationSet> {
+  let highlighter: ShikiHighlighter | null = null;
+  const build = (doc: ProsemirrorNode) =>
+    buildDecorations({ doc, name, highlighter, defaultLanguage });
+  return new Plugin<DecorationSet>({
+    key: shikiPluginKey,
+    state: {
+      init: (_cfg, { doc }) => build(doc),
+      apply(tr, decorationSet, oldState, newState) {
+        if (tr.getMeta(shikiPluginKey)?.refresh) return build(tr.doc);
+        const oldNodeName = oldState.selection.$head.parent.type.name;
+        const newNodeName = newState.selection.$head.parent.type.name;
+        const oldNodes = findChildren(oldState.doc, (node) => node.type.name === name);
+        const newNodes = findChildren(newState.doc, (node) => node.type.name === name);
+        const needsRebuild =
+          tr.docChanged &&
+          ([oldNodeName, newNodeName].includes(name) ||
+            newNodes.length !== oldNodes.length ||
+            tr.steps.some((step) => {
+              const s = step as unknown as { from?: number; to?: number };
+              return (
+                s.from !== undefined &&
+                s.to !== undefined &&
+                oldNodes.some((n) => n.pos >= (s.from as number) && n.pos + n.node.nodeSize <= (s.to as number))
+              );
+            }));
+        if (needsRebuild) return build(tr.doc);
+        return decorationSet.map(tr.mapping, tr.doc);
+      },
+    },
+    props: {
+      decorations(state) {
+        return shikiPluginKey.getState(state);
+      },
+    },
+    view(view: EditorView) {
+      let cancelled = false;
+      getSharedHighlighter().then((h) => {
+        if (cancelled) return;
+        highlighter = h;
+        if (!view.isDestroyed) {
+          view.dispatch(view.state.tr.setMeta(shikiPluginKey, { refresh: true }));
+        }
+      });
+      return {
+        destroy() {
+          cancelled = true;
+        },
+      };
+    },
+  });
+}
+export const CodeBlockShiki = CodeBlock.extend<CodeBlockOptions>({
+  addProseMirrorPlugins() {
+    const parentPlugins = this.parent?.() || [];
+    return [
+      ...parentPlugins,
+      createShikiPlugin(this.name, this.options.defaultLanguage ?? null),
+    ];
+  },
+  addNodeView() {
+    return ({ node, HTMLAttributes }) => {
+      const pre = document.createElement("pre");
+      pre.classList.add("shiki");
+      for (const [key, value] of Object.entries(HTMLAttributes)) {
+        if (value !== undefined && value !== null && value !== false) {
+          pre.setAttribute(key, String(value));
+        }
+      }
+      const code = document.createElement("code");
+      pre.append(code);
+      const applyLang = (n: ProsemirrorNode) => {
+        const raw = (n.attrs.language as string | null | undefined) || "";
+        const normalized = raw ? normalizeLang(raw) : "";
+        if (normalized) {
+          pre.dataset.lang = normalized;
+          code.className = `language-${normalized}`;
+        } else {
+          delete pre.dataset.lang;
+          code.className = "";
+        }
+      };
+      applyLang(node);
+      return {
+        dom: pre,
+        contentDOM: code,
+        update(updatedNode) {
+          if (updatedNode.type.name !== "codeBlock") return false;
+          applyLang(updatedNode);
+          return true;
+        },
+      };
+    };
+  },
+});

frontend/src/editor/extensions/collaboration-cursor-v3.ts CHANGED Viewed

@@ -63,6 +63,10 @@ export const CollaborationCursorV3 = Extension.create<CollaborationCursorOptions
   },
   addCommands() {
     return {
       updateUser:
         (attributes: Record<string, any>) =>
@@ -71,7 +75,7 @@ export const CollaborationCursorV3 = Extension.create<CollaborationCursorOptions
           this.options.provider.awareness.setLocalStateField("user", this.options.user);
           return true;
         },
-    };
   },
   addProseMirrorPlugins() {

   },
   addCommands() {
+    // In Tiptap v3, custom commands must be declared via module augmentation of
+    // `Commands<ReturnType>` to satisfy `Partial<RawCommands>`. We don't need
+    // that here: the command is used internally via `editor.commands.updateUser`
+    // with a runtime cast, so we widen the return type to keep typing simple.
     return {
       updateUser:
         (attributes: Record<string, any>) =>
           this.options.provider.awareness.setLocalStateField("user", this.options.user);
           return true;
         },
+    } as any;
   },
   addProseMirrorPlugins() {

frontend/src/editor/extensions/scroll-guard.ts ADDED Viewed

	@@ -0,0 +1,57 @@

+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { ySyncPluginKey } from "@tiptap/y-tiptap";
+/**
+ * Prevents ProseMirror's scrollIntoView from firing after remote Yjs sync
+ * transactions. The y-tiptap binding calls tr.scrollIntoView() whenever
+ * _isLocalCursorInView() is true, but that check uses window dimensions
+ * instead of the actual scroll container. This fights the user's manual
+ * scroll, causing a "stuck then resume" feeling.
+ *
+ * Strategy: a filterTransaction hook sets a module-level flag when it
+ * sees a remote-origin sync transaction, and handleScrollToSelection
+ * suppresses the scroll while the flag is set. The flag is cleared
+ * asynchronously after the synchronous dispatch cycle completes.
+ */
+let _blockScroll = false;
+export const ScrollGuard = Extension.create({
+  name: "scrollGuard",
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey("scroll-guard"),
+        filterTransaction(tr) {
+          const meta = tr.getMeta(ySyncPluginKey);
+          if (meta?.isChangeOrigin) {
+            _blockScroll = true;
+            queueMicrotask(() => { _blockScroll = false; });
+          }
+          return true;
+        },
+      }),
+    ];
+  },
+  addOptions() {
+    return {};
+  },
+  onBeforeCreate() {
+    const existing = this.editor.options.editorProps?.handleScrollToSelection;
+    this.editor.setOptions({
+      editorProps: {
+        ...this.editor.options.editorProps,
+        handleScrollToSelection(view) {
+          if (_blockScroll) return true;
+          if (existing) return existing.call(this, view);
+          return false;
+        },
+      },
+    });
+  },
+});

frontend/src/editor/extensions/stack.ts CHANGED Viewed

@@ -6,6 +6,7 @@ declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     stack: {
       insertStack: (columns?: number) => ReturnType;
     };
   }
 }
@@ -67,6 +68,42 @@ export const Stack = Node.create({
             content: cols,
           });
         },
     };
   },

   interface Commands<ReturnType> {
     stack: {
       insertStack: (columns?: number) => ReturnType;
+      setStackColumns: (pos: number, columns: number) => ReturnType;
     };
   }
 }
             content: cols,
           });
         },
+      setStackColumns:
+        (pos, columns) =>
+        ({ tr, state, dispatch }) => {
+          const target = Math.min(Math.max(columns, 2), 4);
+          const node = state.doc.nodeAt(pos);
+          if (!node || node.type.name !== "stack") return false;
+          const current = node.childCount;
+          if (current === target) {
+            tr.setNodeMarkup(pos, undefined, { ...node.attrs, layout: `${target}-column` });
+            dispatch?.(tr);
+            return true;
+          }
+          tr.setNodeMarkup(pos, undefined, { ...node.attrs, layout: `${target}-column` });
+          if (target > current) {
+            const colType = state.schema.nodes.stackColumn;
+            const pType = state.schema.nodes.paragraph;
+            const insertPos = pos + node.nodeSize - 1;
+            for (let i = 0; i < target - current; i++) {
+              tr.insert(insertPos + i, colType.create(null, pType.create()));
+            }
+          } else {
+            let removeFrom = pos + 1;
+            for (let i = 0; i < target; i++) {
+              removeFrom += node.child(i).nodeSize;
+            }
+            const removeTo = pos + node.nodeSize - 1;
+            tr.delete(removeFrom, removeTo);
+          }
+          dispatch?.(tr);
+          return true;
+        },
     };
   },

frontend/src/editor/frontmatter/FrontmatterHero.tsx CHANGED Viewed

@@ -1,18 +1,86 @@
-import { useState, useRef, useEffect, type KeyboardEvent } from "react";
 import { Tooltip } from "../../components/Tooltip";
-import { Plus, X } from "lucide-react";
 import { useFrontmatter } from "./useFrontmatter";
 import type { FrontmatterStore, Author, Affiliation } from "./frontmatter-store";
 interface FrontmatterHeroProps {
   store: FrontmatterStore | null;
 }
-export function FrontmatterHero({ store }: FrontmatterHeroProps) {
   const { data, update } = useFrontmatter(store);
   const [editingAuthorIdx, setEditingAuthorIdx] = useState<number | null>(null);
   const [showAuthorForm, setShowAuthorForm] = useState(false);
   if (!data) {
     return <div className="hero" />;
   }
@@ -20,7 +88,6 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
   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 (
     <div>
@@ -33,19 +100,81 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
           multiline
         />
         <EditableText
           value={data.subtitle}
           placeholder="Subtitle (optional)"
           onChange={(v) => update("subtitle", v)}
           className="hero-desc"
         />
       </section>
-      {hasMeta && (
-        <header className="meta" aria-label="Article meta information">
-          <div className="meta-container">
-            <div className="meta-container-cell">
-              <h3>Authors</h3>
               <ul className="authors">
                 {data.authors.map((author, i) => (
                   <li key={`author-${i}`}>
@@ -80,80 +209,78 @@ export function FrontmatterHero({ store }: FrontmatterHeroProps) {
                   </Tooltip>
                 </li>
               </ul>
-            </div>
-            {hasAffiliations && (
-              <div className="meta-container-cell">
-                <h3>Affiliations</h3>
-                {multipleAffiliations ? (
-                  <ol className="affiliations">
-                    {data.affiliations.map((aff, i) => (
-                      <li key={`aff-${i}`}>
-                        {aff.url ? (
-                          <a href={aff.url} target="_blank" rel="noopener noreferrer">
-                            {aff.name}
-                          </a>
-                        ) : (
-                          aff.name
-                        )}
-                      </li>
-                    ))}
-                  </ol>
-                ) : (
-                  <p>
-                    {data.affiliations[0].url ? (
-                      <a href={data.affiliations[0].url} target="_blank" rel="noopener noreferrer">
-                        {data.affiliations[0].name}
-                      </a>
-                    ) : (
-                      data.affiliations[0].name
-                    )}
-                  </p>
-                )}
-              </div>
             )}
             <div className="meta-container-cell">
-              <h3>Published</h3>
-              <EditableText
-                value={data.published}
-                placeholder="Date"
-                onChange={(v) => update("published", v)}
-                inline
-              />
             </div>
-            <div className="meta-container-cell">
-              <h3>DOI</h3>
-              <EditableText
-                value={data.doi}
-                placeholder="10.xxxx/xxxxx"
-                onChange={(v) => update("doi", v)}
-                inline
-              />
-            </div>
           </div>
-        </header>
-      )}
-      <div style={{ maxWidth: 680, margin: "0 auto", padding: "0 16px" }}>
-        {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)}
-          />
-        )}
         {editingAuthorIdx !== null && data.authors[editingAuthorIdx] && (
           <AuthorInlineForm
             initial={data.authors[editingAuthorIdx]}
             affiliations={data.affiliations}
             onSubmit={(author, newAff) => {
@@ -182,93 +309,71 @@ interface 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);
   useEffect(() => {
-    if (!editing) setDraft(value);
-  }, [value, editing]);
   useEffect(() => {
-    if (editing) {
-      inputRef.current?.focus();
-      if (inputRef.current) {
-        const el = inputRef.current;
-        el.selectionStart = el.selectionEnd = el.value.length;
-      }
     }
-  }, [editing]);
   const commit = () => {
-    setEditing(false);
     if (draft !== value) onChange(draft);
   };
   const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === "Enter" && !multiline) {
       e.preventDefault();
-      commit();
     }
     if (e.key === "Escape") {
       setDraft(value);
-      setEditing(false);
     }
   };
-  const displayValue = value || placeholder;
-  const isEmpty = !value;
-  if (editing) {
-    const Tag = multiline ? "textarea" : "input";
-    return (
-      <span className={className} style={{ display: inline ? "inline-flex" : "flex" }}>
-        <Tag
-          ref={inputRef as any}
-          className="form-input"
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onBlur={commit}
-          onKeyDown={handleKeyDown}
-          placeholder={placeholder}
-          style={{
-            font: "inherit",
-            color: "inherit",
-            textAlign: "inherit",
-            background: "transparent",
-            border: "none",
-            padding: 0,
-            margin: 0,
-            width: "100%",
-            outline: "none",
-            resize: multiline ? "vertical" : "none",
-          }}
-        />
-      </span>
-    );
-  }
   return (
     <span
       className={`editable-text ${className || ""}`}
-      onClick={() => setEditing(true)}
-      style={{
-        display: inline ? "inline" : "block",
-        opacity: isEmpty ? 0.35 : 1,
-        cursor: "text",
-      }}
     >
-      {displayValue}
     </span>
   );
 }
 function AuthorInlineForm({
   initial,
   affiliations,
   onSubmit,
   onCancel,
 }: {
   initial?: Author;
   affiliations: Affiliation[];
   onSubmit: (author: Author, newAffiliation?: Affiliation) => void;
@@ -279,10 +384,30 @@ function AuthorInlineForm({
   const [affIndices, setAffIndices] = useState<number[]>(initial?.affiliations || []);
   const [newAffName, setNewAffName] = useState("");
   const nameRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
-    nameRef.current?.focus();
-  }, []);
   const handleSubmit = () => {
     if (!name.trim()) return;
@@ -293,6 +418,11 @@ function AuthorInlineForm({
     );
   };
   const toggleAff = (idx: number) => {
     setAffIndices((prev) =>
       prev.includes(idx) ? prev.filter((i) => i !== idx) : [...prev, idx],
@@ -300,54 +430,55 @@ function AuthorInlineForm({
   };
   return (
-    <div className="author-form">
-      <span className="author-form__title">
         {initial ? "Edit author" : "Add author"}
-      </span>
-      <div className="author-form__row">
-        <input
-          ref={nameRef}
-          className="form-input"
-          placeholder="Name"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
-        />
         <input
           className="form-input"
-          placeholder="URL (optional)"
-          value={url}
-          onChange={(e) => setUrl(e.target.value)}
           onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
         />
       </div>
-      {affiliations.length > 0 && (
-        <div className="author-form__chips">
-          {affiliations.map((aff, i) => (
-            <span
-              key={`aff-select-${i}`}
-              className={`chip chip--clickable ${affIndices.includes(i + 1) ? "" : "chip--outlined"}`}
-              style={affIndices.includes(i + 1) ? { background: "var(--primary-color)", color: "#000" } : {}}
-              onClick={() => toggleAff(i + 1)}
-            >
-              {i + 1}. {aff.name}
-            </span>
-          ))}
-        </div>
-      )}
-      <input
-        className="form-input"
-        placeholder="New affiliation (optional), e.g. Hugging Face"
-        value={newAffName}
-        onChange={(e) => setNewAffName(e.target.value)}
-        onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
-      />
-      <div className="author-form__actions">
-        <button className="btn" onClick={onCancel}>Cancel</button>
         <button
           className="btn btn--primary"
           onClick={handleSubmit}
@@ -356,6 +487,6 @@ function AuthorInlineForm({
           {initial ? "Save" : "Add"}
         </button>
       </div>
-    </div>
   );
 }

+import { useState, useRef, useEffect, useMemo, type KeyboardEvent } from "react";
 import { Tooltip } from "../../components/Tooltip";
+import { Plus, ImagePlus, BarChart3, Trash2 } from "lucide-react";
 import { useFrontmatter } from "./useFrontmatter";
+import { buildDoc } from "../embeds/build-doc";
+import { useTheme } from "../../hooks/useTheme";
+import { uploadImage } from "../upload";
 import type { FrontmatterStore, Author, Affiliation } from "./frontmatter-store";
+import type { EmbedStore } from "../embeds/embed-store";
+const BANNER_KEY = "banner.html";
+const CHART_PLACEHOLDER_HTML = `<div class="d3-chart" style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--muted-color);font-family:system-ui;">
+  <p style="margin:0;font-size:14px;">Generating chart...</p>
+</div>`;
+function makeImageBannerHtml(url: string) {
+  return `<div style="width:100%;height:100%;overflow:hidden;">
+  <img src="${url}" alt="Banner" style="width:100%;height:100%;object-fit:cover;display:block;" />
+</div>`;
+}
 interface FrontmatterHeroProps {
   store: FrontmatterStore | null;
+  embedStore?: EmbedStore | null;
 }
+export function FrontmatterHero({ store, embedStore }: FrontmatterHeroProps) {
   const { data, update } = useFrontmatter(store);
   const [editingAuthorIdx, setEditingAuthorIdx] = useState<number | null>(null);
   const [showAuthorForm, setShowAuthorForm] = useState(false);
+  const bannerSrc = data?.banner || "";
+  const [bannerHtml, setBannerHtml] = useState("");
+  const [uploadingBanner, setUploadingBanner] = useState(false);
+  const bannerFileRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (!embedStore || !bannerSrc) { setBannerHtml(""); return; }
+    setBannerHtml(embedStore.get(bannerSrc));
+    return embedStore.observeKey(bannerSrc, setBannerHtml);
+  }, [embedStore, bannerSrc]);
+  const { isDark, primaryColor } = useTheme();
+  const bannerSrcdoc = useMemo(() => {
+    if (!bannerHtml) return "";
+    // Banner iframes are size-constrained by the parent (5:2 aspect ratio),
+    // so we render them edge-to-edge: no body padding, full height chain.
+    // primaryColor must be forwarded so banners using `--primary-color`
+    // pick up the article's accent (otherwise they fall back to the
+    // generic #4e79a7 from buildEmbedSrcdoc).
+    return buildDoc(bannerHtml, { isDark, primaryColor, fullBleed: true });
+  }, [bannerHtml, isDark, primaryColor]);
+  const handleBannerUpload = async (file: File) => {
+    if (!embedStore || !file.type.startsWith("image/")) return;
+    setUploadingBanner(true);
+    try {
+      const url = await uploadImage(file);
+      embedStore.set(BANNER_KEY, makeImageBannerHtml(url));
+      update("banner", BANNER_KEY);
+    } catch (err) {
+      console.error("[banner-upload]", err);
+    } finally {
+      setUploadingBanner(false);
+    }
+  };
+  const handleCreateChart = () => {
+    if (!embedStore) return;
+    embedStore.set(BANNER_KEY, CHART_PLACEHOLDER_HTML);
+    update("banner", BANNER_KEY);
+    window.dispatchEvent(
+      new CustomEvent("open-embed-studio", { detail: { src: BANNER_KEY } }),
+    );
+  };
+  const handleRemoveBanner = () => {
+    if (!embedStore) return;
+    embedStore.remove(bannerSrc || BANNER_KEY);
+    update("banner", "");
+  };
   if (!data) {
     return <div className="hero" />;
   }
   const hasAuthors = data.authors.length > 0;
   const hasAffiliations = data.affiliations.length > 0;
   const multipleAffiliations = data.affiliations.length > 1;
   return (
     <div>
           multiline
         />
+        {bannerSrcdoc ? (
+          <div className="hero-banner hero-banner--filled">
+            <iframe
+              srcDoc={bannerSrcdoc}
+              title="Banner"
+              sandbox="allow-scripts allow-same-origin"
+              style={{ width: "100%", height: "100%", border: "none", display: "block", background: "transparent" }}
+            />
+            {embedStore && (
+              <Tooltip title="Remove banner">
+                <button
+                  type="button"
+                  className="hero-banner-remove"
+                  onClick={handleRemoveBanner}
+                  aria-label="Remove banner"
+                >
+                  <Trash2 size={14} />
+                </button>
+              </Tooltip>
+            )}
+          </div>
+        ) : embedStore ? (
+          <div className="hero-banner hero-banner--empty" aria-label="Banner placeholder">
+            <input
+              ref={bannerFileRef}
+              type="file"
+              accept="image/*"
+              style={{ display: "none" }}
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file) handleBannerUpload(file);
+                e.target.value = "";
+              }}
+            />
+            <div className="hero-banner-empty__inner">
+              <p className="hero-banner-empty__hint">
+                Add a banner to set the mood of your article.
+              </p>
+              <div className="hero-banner-empty__actions">
+                <button
+                  type="button"
+                  className="btn"
+                  disabled={uploadingBanner}
+                  onClick={() => bannerFileRef.current?.click()}
+                >
+                  <ImagePlus size={16} />
+                  <span>{uploadingBanner ? "Uploading..." : "Upload image"}</span>
+                </button>
+                <button
+                  type="button"
+                  className="btn"
+                  onClick={handleCreateChart}
+                >
+                  <BarChart3 size={16} />
+                  <span>Create chart</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        ) : null}
         <EditableText
           value={data.subtitle}
           placeholder="Subtitle (optional)"
           onChange={(v) => update("subtitle", v)}
           className="hero-desc"
+          multiline
         />
       </section>
+      <header className="meta" aria-label="Article meta information">
+        <div className="meta-container">
+          <div className="meta-container-cell">
+            <h3>Authors</h3>
+            {hasAuthors ? (
               <ul className="authors">
                 {data.authors.map((author, i) => (
                   <li key={`author-${i}`}>
                   </Tooltip>
                 </li>
               </ul>
+            ) : (
+              <button
+                className="meta-placeholder-btn"
+                onClick={() => setShowAuthorForm(true)}
+              >
+                <Plus size={14} />
+                <span>Add author</span>
+              </button>
             )}
+          </div>
+          {hasAffiliations && (
             <div className="meta-container-cell">
+              <h3>Affiliations</h3>
+              {multipleAffiliations ? (
+                <ol className="affiliations">
+                  {data.affiliations.map((aff, i) => (
+                    <li key={`aff-${i}`}>
+                      {aff.url ? (
+                        <a href={aff.url} target="_blank" rel="noopener noreferrer">
+                          {aff.name}
+                        </a>
+                      ) : (
+                        aff.name
+                      )}
+                    </li>
+                  ))}
+                </ol>
+              ) : (
+                <p>
+                  {data.affiliations[0].url ? (
+                    <a href={data.affiliations[0].url} target="_blank" rel="noopener noreferrer">
+                      {data.affiliations[0].name}
+                    </a>
+                  ) : (
+                    data.affiliations[0].name
+                  )}
+                </p>
+              )}
             </div>
+          )}
+          <div className="meta-container-cell">
+            <h3>Published</h3>
+            <EditableText
+              value={data.published}
+              placeholder="Date"
+              onChange={(v) => update("published", v)}
+              inline
+            />
           </div>
+        </div>
+      </header>
+      <AuthorInlineForm
+        open={showAuthorForm}
+        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)}
+      />
+      <div style={{ maxWidth: 680, margin: "0 auto", padding: "0 16px" }}>
         {editingAuthorIdx !== null && data.authors[editingAuthorIdx] && (
           <AuthorInlineForm
+            open={true}
             initial={data.authors[editingAuthorIdx]}
             affiliations={data.affiliations}
             onSubmit={(author, newAff) => {
 }
 function EditableText({ value, placeholder, onChange, className, multiline, inline }: EditableTextProps) {
   const [draft, setDraft] = useState(value);
   const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
   useEffect(() => {
+    setDraft(value);
+  }, [value]);
   useEffect(() => {
+    if (multiline && inputRef.current instanceof HTMLTextAreaElement) {
+      autoResize(inputRef.current);
     }
+  }, [draft, multiline]);
+  const autoResize = (el: HTMLTextAreaElement) => {
+    el.style.height = "0";
+    el.style.height = `${el.scrollHeight}px`;
+  };
   const commit = () => {
     if (draft !== value) onChange(draft);
   };
   const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === "Enter" && !multiline) {
       e.preventDefault();
+      (e.target as HTMLElement).blur();
     }
     if (e.key === "Escape") {
       setDraft(value);
+      (e.target as HTMLElement).blur();
     }
   };
+  const Tag = multiline ? "textarea" : "input";
+  const inputCls = inline
+    ? "editable-text-input editable-text-input--inline"
+    : "editable-text-input";
   return (
     <span
       className={`editable-text ${className || ""}`}
+      style={{ display: inline ? "inline" : "block" }}
     >
+      <Tag
+        ref={inputRef as any}
+        className={inputCls}
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        rows={multiline ? 1 : undefined}
+      />
     </span>
   );
 }
 function AuthorInlineForm({
+  open,
   initial,
   affiliations,
   onSubmit,
   onCancel,
 }: {
+  open: boolean;
   initial?: Author;
   affiliations: Affiliation[];
   onSubmit: (author: Author, newAffiliation?: Affiliation) => void;
   const [affIndices, setAffIndices] = useState<number[]>(initial?.affiliations || []);
   const [newAffName, setNewAffName] = useState("");
   const nameRef = useRef<HTMLInputElement>(null);
+  const dialogRef = useRef<HTMLDialogElement>(null);
   useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      setName(initial?.name || "");
+      setUrl(initial?.url || "");
+      setAffIndices(initial?.affiliations || []);
+      setNewAffName("");
+      dialog.showModal();
+      setTimeout(() => nameRef.current?.focus(), 50);
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open, initial]);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const onClose = () => onCancel();
+    dialog.addEventListener("close", onClose);
+    return () => dialog.removeEventListener("close", onClose);
+  }, [onCancel]);
   const handleSubmit = () => {
     if (!name.trim()) return;
     );
   };
+  const handleCancel = () => {
+    dialogRef.current?.close();
+    onCancel();
+  };
   const toggleAff = (idx: number) => {
     setAffIndices((prev) =>
       prev.includes(idx) ? prev.filter((i) => i !== idx) : [...prev, idx],
   };
   return (
+    <dialog ref={dialogRef} className="ed-dialog ed-dialog--author">
+      <h3 className="ed-dialog__title">
         {initial ? "Edit author" : "Add author"}
+      </h3>
+      <div className="ed-dialog__body">
+        <div className="author-form__row">
+          <input
+            ref={nameRef}
+            className="form-input"
+            placeholder="Name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
+          />
+          <input
+            className="form-input"
+            placeholder="URL (optional)"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
+          />
+        </div>
+        {affiliations.length > 0 && (
+          <div className="author-form__chips" style={{ marginTop: 12 }}>
+            {affiliations.map((aff, i) => (
+              <span
+                key={`aff-select-${i}`}
+                className={`chip chip--clickable ${affIndices.includes(i + 1) ? "" : "chip--outlined"}`}
+                style={affIndices.includes(i + 1) ? { background: "var(--primary-color)", color: "#000" } : {}}
+                onClick={() => toggleAff(i + 1)}
+              >
+                {i + 1}. {aff.name}
+              </span>
+            ))}
+          </div>
+        )}
         <input
           className="form-input"
+          placeholder="New affiliation (optional), e.g. Hugging Face"
+          value={newAffName}
+          onChange={(e) => setNewAffName(e.target.value)}
           onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
+          style={{ marginTop: 12 }}
         />
       </div>
+      <div className="ed-dialog__actions">
+        <button className="btn" onClick={handleCancel}>Cancel</button>
         <button
           className="btn btn--primary"
           onClick={handleSubmit}
           {initial ? "Save" : "Add"}
         </button>
       </div>
+    </dialog>
   );
 }

frontend/src/editor/frontmatter/HueSlider.tsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import { useRef, useState, useCallback } from "react";
-const L = 0.75;
-const C = 0.12;
 const COLOR_NAMES = [
   { name: "Candy Apple Red", hue: 0 },
@@ -87,7 +85,7 @@ 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) => {
@@ -184,4 +182,4 @@ export function HueSlider({ hue, onChange }: HueSliderProps) {
   );
 }
-export { oklchToHex, L as OKLCH_L, C as OKLCH_C };

 import { useRef, useState, useCallback } from "react";
+import { OKLCH_L, OKLCH_C } from "#shared/theme";
 const COLOR_NAMES = [
   { name: "Candy Apple Red", hue: 0 },
   const sliderRef = useRef<HTMLDivElement>(null);
   const [dragging, setDragging] = useState(false);
+  const hexColor = oklchToHex(OKLCH_L, OKLCH_C, hue);
   const colorName = getColorName(hue);
   const hueFromClientX = useCallback((clientX: number) => {
   );
 }
+export { oklchToHex };

frontend/src/editor/frontmatter/SettingsDrawer.tsx CHANGED Viewed

@@ -130,6 +130,15 @@ export function SettingsDrawer({ open, onClose, store, settingsMap }: SettingsDr
             <hr className="divider-h" />
             <FieldGroup label="Licence">
               <textarea
                 className="form-input"

             <hr className="divider-h" />
+            <FieldGroup label="DOI">
+              <input
+                className="form-input"
+                placeholder="10.xxxx/xxxxx"
+                value={data.doi}
+                onChange={(e) => update("doi", e.target.value)}
+              />
+            </FieldGroup>
             <FieldGroup label="Licence">
               <textarea
                 className="form-input"

frontend/src/editor/frontmatter/frontmatter-store.ts CHANGED Viewed

@@ -95,21 +95,25 @@ export function createFrontmatterStore(ydoc: Y.Doc) {
   function setAll(data: Partial<FrontmatterData>) {
     ydoc.transact(() => {
       for (const [key, value] of Object.entries(data)) {
         if (value === undefined) continue;
-        if (key === "authors" && Array.isArray(value)) {
-          yAuthors.delete(0, yAuthors.length);
-          yAuthors.push(value);
-        } else if (key === "affiliations" && Array.isArray(value)) {
-          yAffiliations.delete(0, yAffiliations.length);
-          yAffiliations.push(value);
-        } else if (key === "links" && Array.isArray(value)) {
-          yLinks.delete(0, yLinks.length);
-          yLinks.push(value);
-        } else {
-          ymap.set(key, value);
-        }
       }
     });
   }

   function setAll(data: Partial<FrontmatterData>) {
     ydoc.transact(() => {
+      // `Object.entries` widens the value type to the full union of fields, so
+      // we narrow manually per key before pushing into the typed Y.Array.
+      if (data.authors !== undefined) {
+        yAuthors.delete(0, yAuthors.length);
+        yAuthors.push(data.authors);
+      }
+      if (data.affiliations !== undefined) {
+        yAffiliations.delete(0, yAffiliations.length);
+        yAffiliations.push(data.affiliations);
+      }
+      if (data.links !== undefined) {
+        yLinks.delete(0, yLinks.length);
+        yLinks.push(data.links);
+      }
       for (const [key, value] of Object.entries(data)) {
         if (value === undefined) continue;
+        if (key === "authors" || key === "affiliations" || key === "links") continue;
+        ymap.set(key, value);
       }
     });
   }

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

@@ -1,12 +1,15 @@
 import type { FrontmatterStore } from "./frontmatter-store";
 /**
- * Populate frontmatter with demo data when a new document is created.
- * Only writes if the title is empty (avoids overwriting existing docs).
  */
-export function seedFrontmatter(store: FrontmatterStore) {
-  if (store.get("title")) return;
-  if ((store.get("authors") as any[]).length > 0) return;
   store.setAll({
     title: "Scaling Laws for Neural Language Models",
@@ -15,8 +18,15 @@ export function seedFrontmatter(store: FrontmatterStore) {
     published: "Apr. 13, 2026",
     doi: "10.1234/research-article-template-editor.2026",
     template: "article",
   });
   store.addAffiliation({ name: "Hugging Face", url: "https://huggingface.co" });
   store.addAffiliation({ name: "MIT", url: "https://mit.edu" });

 import type { FrontmatterStore } from "./frontmatter-store";
 /**
+ * Populate frontmatter with demo data.
+ * When force=true (explicit user action), overwrites existing data.
+ * When force=false, skips if the document already has content.
  */
+export function seedFrontmatter(store: FrontmatterStore, force = false) {
+  if (!force) {
+    if (store.get("title")) return;
+    if ((store.get("authors") as any[]).length > 0) return;
+  }
   store.setAll({
     title: "Scaling Laws for Neural Language Models",
     published: "Apr. 13, 2026",
     doi: "10.1234/research-article-template-editor.2026",
     template: "article",
+    banner: "banner.html",
+    tableOfContentsAutoCollapse: true,
   });
+  if (force) {
+    store.set("authors", []);
+    store.set("affiliations", []);
+  }
   store.addAffiliation({ name: "Hugging Face", url: "https://huggingface.co" });
   store.addAffiliation({ name: "MIT", url: "https://mit.edu" });

frontend/src/hooks/useAgentChat.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import {
   DefaultChatTransport,
   lastAssistantMessageIsCompleteWithToolCalls,
 } from "ai";
-import { useCallback, useRef, useState } from "react";
 import type { Editor } from "@tiptap/core";
 import type { UndoManager } from "yjs";
 import type { UIMessage } from "ai";
@@ -13,14 +13,19 @@ interface UseAgentChatOptions {
   editor: Editor | null;
   undoManager: UndoManager | null;
   frontmatterStore: FrontmatterStore | null;
 }
 const transport = new DefaultChatTransport({ api: "/api/chat" });
-export function useAgentChat({ editor, undoManager, frontmatterStore }: UseAgentChatOptions) {
   const pendingSelectionRef = useRef<{ from: number; to: number } | null>(null);
   const agentBatchActiveRef = useRef(false);
   const [input, setInput] = useState("");
   const getEditorContext = useCallback(() => {
     if (!editor) return {};
@@ -28,7 +33,7 @@ export function useAgentChat({ editor, undoManager, frontmatterStore }: UseAgent
     const { from, to } = editor.state.selection;
     const hasSelection = from !== to;
-    const document = editor.getText("\n");
     const selection = hasSelection
       ? editor.state.doc.textBetween(from, to, "\n")
       : undefined;
@@ -255,6 +260,7 @@ export function useAgentChat({ editor, undoManager, frontmatterStore }: UseAgent
   const { addToolOutput, ...chat } = useChat({
     transport,
     sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
     async onToolCall({ toolCall }) {
@@ -266,7 +272,8 @@ export function useAgentChat({ editor, undoManager, frontmatterStore }: UseAgent
         toolCallId: toolCall.toolCallId,
       });
-      addToolOutput({
         toolCallId: toolCall.toolCallId,
         output: result,
       });
@@ -282,13 +289,25 @@ export function useAgentChat({ editor, undoManager, frontmatterStore }: UseAgent
     },
   });
   const sendMessage = useCallback(
     (content: string) => {
       endAgentBatch();
       const context = getEditorContext();
-      chat.sendMessage({ text: content }, { body: { context } });
     },
-    [chat, getEditorContext, endAgentBatch],
   );
   const sendQuickAction = useCallback(
@@ -311,20 +330,32 @@ export function useAgentChat({ editor, undoManager, frontmatterStore }: UseAgent
       };
       const prompt = prompts[action] || action;
-      chat.sendMessage({ text: prompt }, { body: { context } });
     },
-    [chat, getEditorContext, endAgentBatch],
   );
   const isLoading =
     chat.status === "streaming" || chat.status === "submitted";
   return {
     messages: chat.messages as UIMessage[],
     isLoading,
     error: chat.error,
     sendMessage,
     sendQuickAction,
     input,
     setInput,
     stop: chat.stop,

   DefaultChatTransport,
   lastAssistantMessageIsCompleteWithToolCalls,
 } from "ai";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { Editor } from "@tiptap/core";
 import type { UndoManager } from "yjs";
 import type { UIMessage } from "ai";
   editor: Editor | null;
   undoManager: UndoManager | null;
   frontmatterStore: FrontmatterStore | null;
+  modelRef: React.RefObject<string>;
+  initialMessages?: UIMessage[];
+  onMessagesChange?: (messages: UIMessage[]) => void;
 }
 const transport = new DefaultChatTransport({ api: "/api/chat" });
+export function useAgentChat({ editor, undoManager, frontmatterStore, modelRef, initialMessages, onMessagesChange }: UseAgentChatOptions) {
   const pendingSelectionRef = useRef<{ from: number; to: number } | null>(null);
   const agentBatchActiveRef = useRef(false);
   const [input, setInput] = useState("");
+  const onMessagesChangeRef = useRef(onMessagesChange);
+  onMessagesChangeRef.current = onMessagesChange;
   const getEditorContext = useCallback(() => {
     if (!editor) return {};
     const { from, to } = editor.state.selection;
     const hasSelection = from !== to;
+    const document = editor.getText({ blockSeparator: "\n" });
     const selection = hasSelection
       ? editor.state.doc.textBetween(from, to, "\n")
       : undefined;
   const { addToolOutput, ...chat } = useChat({
     transport,
+    messages: initialMessages,
     sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
     async onToolCall({ toolCall }) {
         toolCallId: toolCall.toolCallId,
       });
+      (addToolOutput as (args: { tool: string; toolCallId: string; output: unknown }) => void)({
+        tool: toolCall.toolName as string,
         toolCallId: toolCall.toolCallId,
         output: result,
       });
     },
   });
+  // Persist when a conversation round completes (status back to "ready")
+  const prevStatusRef = useRef(chat.status);
+  useEffect(() => {
+    const wasActive = prevStatusRef.current === "streaming" || prevStatusRef.current === "submitted";
+    prevStatusRef.current = chat.status;
+    if (wasActive && chat.status === "ready" && chat.messages.length > 0) {
+      onMessagesChangeRef.current?.(chat.messages as UIMessage[]);
+    }
+  }, [chat.status, chat.messages]);
   const sendMessage = useCallback(
     (content: string) => {
       endAgentBatch();
       const context = getEditorContext();
+      const model = modelRef.current;
+      chat.sendMessage({ text: content }, { body: { context, model } });
     },
+    [chat, getEditorContext, endAgentBatch, modelRef],
   );
   const sendQuickAction = useCallback(
       };
       const prompt = prompts[action] || action;
+      const model = modelRef.current;
+      chat.sendMessage({ text: prompt }, { body: { context, model } });
     },
+    [chat, getEditorContext, endAgentBatch, modelRef],
   );
   const isLoading =
     chat.status === "streaming" || chat.status === "submitted";
+  const clearMessages = useCallback(() => {
+    chat.setMessages([]);
+    onMessagesChangeRef.current?.([]);
+  }, [chat]);
+  const setMessages = useCallback((msgs: UIMessage[]) => {
+    chat.setMessages(msgs);
+  }, [chat]);
   return {
     messages: chat.messages as UIMessage[],
     isLoading,
     error: chat.error,
     sendMessage,
     sendQuickAction,
+    clearMessages,
+    setMessages,
     input,
     setInput,
     stop: chat.stop,

frontend/src/hooks/useEmbedChat.ts ADDED Viewed

	@@ -0,0 +1,221 @@

+import { useChat } from "@ai-sdk/react";
+import {
+  DefaultChatTransport,
+  lastAssistantMessageIsCompleteWithToolCalls,
+} from "ai";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { UIMessage } from "ai";
+import type { EmbedStore } from "../editor/embeds/embed-store";
+import { loadMessages, saveMessages } from "../utils/chat-persistence";
+interface UseEmbedChatOptions {
+  embedStore: EmbedStore | null;
+  /** Current embed src key (filename) */
+  src: string;
+  modelRef: React.RefObject<string>;
+  userId: string;
+}
+const MAX_EMBED_SIZE = 512_000;
+const transport = new DefaultChatTransport({ api: "/api/embed-chat" });
+function scopeKey(src: string): string {
+  return `embed:${src}`;
+}
+export function useEmbedChat({ embedStore, src, modelRef, userId }: UseEmbedChatOptions) {
+  const [input, setInput] = useState("");
+  const srcRef = useRef(src);
+  srcRef.current = src;
+  const userIdRef = useRef(userId);
+  userIdRef.current = userId;
+  // Guard: only allow sendAutomaticallyWhen AFTER the user has sent at
+  // least one message in this session. Prevents auto-send on mount when
+  // restored messages end with completed tool calls.
+  const userHasSentRef = useRef(false);
+  const getEmbedContext = useCallback(() => {
+    if (!embedStore || !srcRef.current) return {};
+    const embedHtml = embedStore.get(srcRef.current);
+    const isBanner = srcRef.current === "banner.html";
+    return {
+      embedHtml: embedHtml || undefined,
+      isBanner,
+    };
+  }, [embedStore]);
+  const executeToolCall = useCallback(
+    (toolCall: { toolName: string; args: unknown; toolCallId: string }) => {
+      if (!embedStore) return "Embed store not available";
+      const currentSrc = srcRef.current;
+      if (!currentSrc) return "No embed src specified";
+      switch (toolCall.toolName) {
+        case "createEmbed": {
+          const { html, title } = toolCall.args as {
+            html: string;
+            title?: string;
+            source?: string;
+          };
+          if (!html?.trim()) return "ERROR: html cannot be empty";
+          const stripped = html.trim();
+          if (stripped.length > MAX_EMBED_SIZE) {
+            return `ERROR: chart too large (${stripped.length} bytes, max ${MAX_EMBED_SIZE}). Simplify the code.`;
+          }
+          embedStore.set(currentSrc, stripped);
+          const lines = stripped.split("\n").length;
+          return `chart created (${lines} lines, ${stripped.length} chars)${title ? ` - "${title}"` : ""}`;
+        }
+        case "patchEmbed": {
+          const { search, replace } = toolCall.args as {
+            search: string;
+            replace: string;
+          };
+          const current = embedStore.get(currentSrc);
+          if (!current) {
+            return "ERROR: no chart exists yet. Use createEmbed first.";
+          }
+          if (!search) {
+            return "ERROR: search block cannot be empty";
+          }
+          if (!current.includes(search)) {
+            return (
+              "ERROR: search block not found in current chart. " +
+              "Call readEmbed to see the exact current content, then retry."
+            );
+          }
+          const patched = current.replace(search, replace);
+          if (patched.length > MAX_EMBED_SIZE) {
+            return `ERROR: patch would exceed size limit (${patched.length} bytes, max ${MAX_EMBED_SIZE}).`;
+          }
+          embedStore.set(currentSrc, patched);
+          return "patch applied successfully";
+        }
+        case "readEmbed": {
+          const current = embedStore.get(currentSrc);
+          if (!current) return "(no chart yet)";
+          return current;
+        }
+        default:
+          return `Unknown tool: ${toolCall.toolName}`;
+      }
+    },
+    [embedStore],
+  );
+  const { addToolOutput, setMessages: chatSetMessages, ...chat } = useChat({
+    transport,
+    // No initialMessages - we restore via setMessages below to match
+    // the proven pattern used by the global chat.
+    sendAutomaticallyWhen(ctx) {
+      if (!userHasSentRef.current) return false;
+      return lastAssistantMessageIsCompleteWithToolCalls(ctx);
+    },
+    async onToolCall({ toolCall }) {
+      if (toolCall.dynamic) return;
+      const result = executeToolCall({
+        toolName: toolCall.toolName as string,
+        args: toolCall.input,
+        toolCallId: toolCall.toolCallId,
+      });
+      (addToolOutput as (args: { tool: string; toolCallId: string; output: unknown }) => void)({
+        tool: toolCall.toolName as string,
+        toolCallId: toolCall.toolCallId,
+        output: result,
+      });
+    },
+    onError(error) {
+      console.error("[embed-chat] error:", error);
+    },
+  });
+  // --- Restore persisted messages on mount (same pattern as global chat) ---
+  const chatSetMessagesRef = useRef(chatSetMessages);
+  chatSetMessagesRef.current = chatSetMessages;
+  useEffect(() => {
+    const key = scopeKey(src);
+    const stored = loadMessages(userId, key);
+    if (stored && stored.length > 0) {
+      chatSetMessagesRef.current(stored);
+    }
+    // Only run once on mount (src/userId are stable per keyed instance)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  // --- Persistence: save to localStorage ---------------------------------
+  const messagesRef = useRef(chat.messages);
+  messagesRef.current = chat.messages;
+  const persist = useCallback(() => {
+    const msgs = messagesRef.current as UIMessage[];
+    const key = scopeKey(srcRef.current);
+    const uid = userIdRef.current;
+    if (msgs.length > 0) {
+      saveMessages(uid, key, msgs);
+    } else {
+      saveMessages(uid, key, []);
+    }
+  }, []);
+  // Save after each completed round (streaming/submitted -> ready)
+  const prevStatusRef = useRef(chat.status);
+  useEffect(() => {
+    const prev = prevStatusRef.current;
+    const curr = chat.status;
+    prevStatusRef.current = curr;
+    const wasActive = prev === "streaming" || prev === "submitted";
+    if (wasActive && curr === "ready" && chat.messages.length > 0) {
+      persist();
+    }
+  }, [chat.status, chat.messages, persist]);
+  // Save on unmount (covers close-while-streaming)
+  useEffect(() => () => persist(), [persist]);
+  const sendMessage = useCallback(
+    (content: string) => {
+      userHasSentRef.current = true;
+      const context = getEmbedContext();
+      const model = modelRef.current;
+      chat.sendMessage({ text: content }, { body: { context, model } });
+    },
+    [chat, getEmbedContext, modelRef],
+  );
+  const isLoading =
+    chat.status === "streaming" || chat.status === "submitted";
+  const clearMessages = useCallback(() => {
+    chatSetMessages([]);
+    saveMessages(userIdRef.current, scopeKey(srcRef.current), []);
+  }, [chatSetMessages]);
+  return {
+    messages: chat.messages as UIMessage[],
+    isLoading,
+    error: chat.error,
+    sendMessage,
+    clearMessages,
+    input,
+    setInput,
+    stop: chat.stop,
+    /**
+     * Imperative setter on the underlying chat. Exposed so dev-only demo
+     * scripts can inject a fake assistant reply (used to record the demo
+     * video without waiting for a real LLM round-trip). DO NOT use in
+     * production code paths.
+     */
+    setMessages: chatSetMessages,
+  };
+}

frontend/src/hooks/usePublishStatus.ts ADDED Viewed

	@@ -0,0 +1,49 @@

+import { useEffect, useState } from "react";
+import type * as Y from "yjs";
+export interface PublishStatus {
+  active: boolean;
+  userName: string | null;
+  startedAt: number | null;
+  jobId: string | null;
+}
+const INACTIVE: PublishStatus = {
+  active: false,
+  userName: null,
+  startedAt: null,
+  jobId: null,
+};
+/**
+ * Observe the `publish-status` Y.Map on a document. The backend populates
+ * this map at the start and end of a publish so that all connected editors
+ * can disable their Publish button while a publish is running.
+ *
+ * `doc` may be `null` while the provider is still connecting; the hook simply
+ * returns an inactive status in that case and re-subscribes when `doc` is set.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function usePublishStatus(doc: Y.Doc | null): PublishStatus {
+  const [status, setStatus] = useState<PublishStatus>(INACTIVE);
+  useEffect(() => {
+    if (!doc) {
+      setStatus(INACTIVE);
+      return;
+    }
+    const map = doc.getMap("publish-status");
+    const read = (): PublishStatus => ({
+      active: (map.get("active") as boolean) === true,
+      userName: (map.get("userName") as string | null | undefined) ?? null,
+      startedAt: (map.get("startedAt") as number | null | undefined) ?? null,
+      jobId: (map.get("jobId") as string | null | undefined) ?? null,
+    });
+    setStatus(read());
+    const observer = () => setStatus(read());
+    map.observe(observer);
+    return () => map.unobserve(observer);
+  }, [doc]);
+  return status;
+}

frontend/src/hooks/useTheme.ts ADDED Viewed

	@@ -0,0 +1,67 @@

+import { useState, useEffect } from "react";
+/**
+ * Shared singleton observer for data-theme + --primary-color.
+ * Only one MutationObserver runs regardless of how many components subscribe.
+ */
+type ThemeListener = (isDark: boolean, primaryColor: string) => void;
+const listeners = new Set<ThemeListener>();
+let observer: MutationObserver | null = null;
+let cachedDark = document.documentElement.getAttribute("data-theme") === "dark";
+let cachedColor =
+  getComputedStyle(document.documentElement)
+    .getPropertyValue("--primary-color")
+    .trim() || "#4e79a7";
+function notify() {
+  const dark = document.documentElement.getAttribute("data-theme") === "dark";
+  const color =
+    getComputedStyle(document.documentElement)
+      .getPropertyValue("--primary-color")
+      .trim() || "#4e79a7";
+  const changed = dark !== cachedDark || color !== cachedColor;
+  cachedDark = dark;
+  cachedColor = color;
+  if (changed) {
+    for (const fn of listeners) fn(dark, color);
+  }
+}
+function subscribe(fn: ThemeListener): () => void {
+  listeners.add(fn);
+  if (!observer) {
+    observer = new MutationObserver(notify);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme", "style"],
+    });
+  }
+  return () => {
+    listeners.delete(fn);
+    if (listeners.size === 0 && observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  };
+}
+export function useTheme(): { isDark: boolean; primaryColor: string } {
+  const [isDark, setIsDark] = useState(cachedDark);
+  const [primaryColor, setPrimaryColor] = useState(cachedColor);
+  useEffect(() => {
+    return subscribe((dark, color) => {
+      setIsDark(dark);
+      setPrimaryColor(color);
+    });
+  }, []);
+  return { isDark, primaryColor };
+}
+export function useIsDark(): boolean {
+  const { isDark } = useTheme();
+  return isDark;
+}

frontend/src/main.tsx CHANGED Viewed

@@ -13,19 +13,28 @@ 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";
 import "./styles/components/_button.css";
 import "./styles/components/_form.css";
 // Editor chrome UI
 import "./styles/_ui.css";
-// 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>

 import "./styles/components/_tag.css";
 import "./styles/components/_card.css";
 import "./styles/components/_mermaid.css";
+import "./styles/components/_embed.css";
+import "./styles/components/_embed-studio.css";
 import "./styles/components/_hero.css";
 import "./styles/components/_toc.css";
 import "./styles/components/_button.css";
 import "./styles/components/_form.css";
+import "./styles/components/_footer.css";
 // Editor chrome UI
 import "./styles/_ui.css";
+// Design tokens (light/dark theming for editor + article)
+import "./styles/tokens.css";
 import "./styles/article.css";
 import "./styles/toc.css";
+// Editor-only styles (split by concern - loaded after shared styles)
+import "./styles/editor/_layout.css";
+import "./styles/editor/_chrome.css";
+import "./styles/editor/_block-tools.css";
+import "./styles/editor/_panels.css";
+import "./styles/editor/_hero-editable.css";
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>

frontend/src/styles/_editor-tokens.css DELETED Viewed

@@ -1,105 +0,0 @@
-/* -----------------------------------------------------------------------
-   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 CHANGED Viewed

@@ -3,13 +3,16 @@
 /* ============================================================================ */
 .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;
 }
@@ -23,14 +26,11 @@
   margin-top: 0;
 }
-@media (--bp-content-collapse) {
   .content-grid {
     overflow: hidden;
     display: block;
     margin-top: var(--spacing-2);
-  }
-  .content-grid {
     grid-template-columns: 1fr;
   }
@@ -39,20 +39,10 @@
     display: none;
   }
-  .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;
-  }
 }
@@ -109,8 +99,7 @@
   text-align: center !important;
 }
-@media (--bp-content-collapse) {
   .wide,
   .full-width {
     width: 100%;
@@ -149,7 +138,7 @@
   transform: scale(0.92);
 }
-@media (--bp-content-collapse) {
   #theme-toggle {
     display: none;
   }
@@ -157,9 +146,9 @@
 /* ------------------------------------------------------------------------- */
 /* 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;
@@ -175,13 +164,12 @@
   }
 }
-@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;
@@ -195,19 +183,15 @@
 /* ------------------------------------------------------------------------- */
-/* 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%;

 /* ============================================================================ */
 .content-grid {
+  max-width: var(--layout-max-width);
   margin: 0 auto;
   padding: 0 var(--content-padding-x);
   margin-top: 40px;
   display: grid;
+  grid-template-columns:
+    var(--layout-toc-width)
+    minmax(0, var(--layout-content-width))
+    var(--layout-sidenote-width);
+  gap: var(--layout-gap);
   align-items: start;
 }
   margin-top: 0;
 }
+@media (max-width: 1100px) {
   .content-grid {
     overflow: hidden;
     display: block;
     margin-top: var(--spacing-2);
     grid-template-columns: 1fr;
   }
     display: none;
   }
+  /* Footer responsive styles live in components/_footer.css to keep all
+     footer-related selectors in one place (the heading selectors need to
+     descend past `display: contents` wrappers, so they cannot use a direct
+     child combinator). */
 }
   text-align: center !important;
 }
+@media (max-width: 1100px) {
   .wide,
   .full-width {
     width: 100%;
   transform: scale(0.92);
 }
+@media (max-width: 1100px) {
   #theme-toggle {
     display: none;
   }
 /* ------------------------------------------------------------------------- */
 /* Hero meta bar responsiveness                                               */
+/* Two columns at md breakpoint, then one column on very small screens.       */
 /* ------------------------------------------------------------------------- */
+@media (max-width: 768px) {
   header.meta .meta-container {
     display: flex;
     flex-wrap: wrap;
   }
 }
+@media (max-width: 320px) {
   header.meta .meta-container .meta-container-cell {
     flex-basis: 100%;
     text-align: center;
   }
   header.meta .affiliations {
     list-style-position: inside;
     padding-left: 0;
 /* ------------------------------------------------------------------------- */
+/* D3 neural embed responsiveness                                             */
+/* Stack canvas (left) over network (right) on small screens.                 */
 /* ------------------------------------------------------------------------- */
+@media (max-width: 768px) {
   .d3-neural .panel {
     flex-direction: column;
   }
+  .d3-neural .panel .left,
   .d3-neural .panel .right {
     flex: 0 0 auto;
     width: 100%;

frontend/src/styles/_print.css CHANGED Viewed

@@ -1,6 +1,16 @@
 /* ============================================================================ */
-/* Print styles */
-/* ========================================================================= */
 @media print {
   html,
@@ -8,16 +18,49 @@
     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;
@@ -25,15 +68,6 @@
     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;
@@ -41,12 +75,18 @@
     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);
@@ -54,27 +94,12 @@
     --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,
@@ -92,12 +117,13 @@
     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;
@@ -110,7 +136,8 @@
   .hero-banner svg,
   .hero-banner canvas,
   .hero-banner img,
-  .hero-banner video {
     max-width: 100% !important;
     width: 100% !important;
     height: auto !important;
@@ -118,11 +145,88 @@
     margin-right: auto !important;
     display: block;
   }
-}
-@media print {
   .meta-container-cell--pdf {
     display: none !important;
   }
-}

 /* ============================================================================ */
+/* Print styles                                                                  */
+/* ============================================================================ */
+/*
+ * The .pdf-toc node is injected at print time by the PDF generator. It is
+ * hidden in the browser (web view of the published article) and shown only
+ * when emulating print media during PDF generation.
+ */
+.pdf-toc {
+  display: none;
+}
 @media print {
   html,
     background: #fff;
   }
+  /* Margins are handled by Playwright; avoid extra global margins */
   body {
     margin: 0;
   }
+  /* Paragraphs: balanced break behaviour for long-form reading */
+  p,
+  li,
+  blockquote {
+    orphans: 3;
+    widows: 3;
+  }
+  p {
+    hyphens: auto;
+    -webkit-hyphens: auto;
+  }
+  /* Hide non-essential UI */
+  #theme-toggle,
+  .toc-mobile-toggle,
+  .toc-mobile-backdrop,
+  .toc-mobile-sidebar,
+  .right-aside,
+  .sync-indicator,
+  .top-bar {
     display: none !important;
   }
+  /* Sidebar TOC is replaced by .pdf-toc in print */
+  .table-of-contents {
+    display: none !important;
+  }
+  main > nav:first-of-type {
+    display: none !important;
+  }
+  /* Force single column to reduce widows/orphans and awkward breaks */
+  .content-grid {
+    grid-template-columns: 1fr !important;
+  }
   /* Links: remove underline and background */
   .content-grid main a {
     text-decoration: none;
     border-bottom: 1px solid rgba(0, 0, 0, .2);
   }
   /* Soft page breaks around main headings */
   .content-grid main h2 {
     page-break-before: auto;
     break-after: avoid-page;
   }
+  .content-grid main h3,
+  .content-grid main h4 {
+    break-after: avoid-page;
+    page-break-after: avoid;
+  }
   /* Small icon labels not needed when printing */
   .code-lang-chip {
     display: none !important;
   }
+  /* More contrasty colors for print */
   :root {
     --surface-bg: #fff;
     --border-color: rgba(0, 0, 0, .2);
     --link-underline-hover: rgba(0, 0, 0, .4);
   }
+  /* Avoid breaks inside complex visual blocks */
   .hero,
   .hero-banner,
+  .html-embed,
   .html-embed__card,
+  .html-embed-container,
   .js-plotly-plot,
   figure,
   pre,
     page-break-inside: avoid;
   }
+  /* Keep hero + meta together at the top of page 1 */
   .hero {
     page-break-after: avoid;
+    break-after: avoid;
   }
+  /* Constrain hero banner after rasterization */
   .hero-banner {
     width: 100% !important;
     max-width: 980px !important;
   .hero-banner svg,
   .hero-banner canvas,
   .hero-banner img,
+  .hero-banner video,
+  .html-embed-container > img {
     max-width: 100% !important;
     width: 100% !important;
     height: auto !important;
     margin-right: auto !important;
     display: block;
   }
+  /* References / bibliography: start on a new page and stay together */
+  .references-block,
+  .bibliography-content {
+    break-before: page;
+    page-break-before: always;
+  }
+  .bibliography-title {
+    break-after: avoid;
+    page-break-after: avoid;
+  }
+  /* Footer: the web view uses a 3-column grid (~1160px wide) that does
+     not fit the ~673px printable width. Drop the grid so each block
+     flows naturally, headings stacked above their content. */
+  .footer-inner { display: block; }
+  .citation-block,
+  .references-block,
+  .reuse-block,
+  .doi-block,
+  .template-credit { display: block; }
+  .footer-heading {
+    text-align: left !important;
+    padding-right: 0 !important;
+  }
+  /* PDF TOC: visible only in print */
+  .pdf-toc {
+    display: block;
+    break-after: page;
+    page-break-after: always;
+    max-width: 780px;
+    margin: 0 auto 12mm;
+    padding: 0 16px;
+  }
+  .pdf-toc__title {
+    font-size: 1.3rem;
+    margin: 0 0 12px;
+    border-bottom: 1px solid rgba(0, 0, 0, .2);
+    padding-bottom: 8px;
+  }
+  .pdf-toc__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .pdf-toc__item {
+    margin: 4px 0;
+    font-size: 0.95rem;
+    line-height: 1.4;
+  }
+  .pdf-toc__item--sub {
+    margin-left: 20px;
+    font-size: 0.88rem;
+    color: rgba(0, 0, 0, .7);
+  }
+  .pdf-toc__item a {
+    color: inherit;
+    text-decoration: none;
+    border-bottom: none;
+  }
+  /* Meta container (authors, affiliations, PDF link): keep tight under hero */
+  .meta-container,
+  .hero-meta {
+    break-after: avoid;
+    page-break-after: avoid;
+  }
+  /* Hide the PDF download cell in the generated PDF itself (self-referential) */
   .meta-container-cell--pdf {
     display: none !important;
   }
+  /* Hide published-side tooltips in print */
+  .pub-tooltip {
+    display: none !important;
+  }
+}