regen.mde 0.2.2 → 0.7.0

package/editor-web/src/main.jsx

@@ -1,399 +1,1044 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { EditorContent, useEditor } from "@tiptap/react";
-import { BubbleMenu, FloatingMenu } from "@tiptap/react/menus";
-import StarterKit from "@tiptap/starter-kit";
-import { Link } from "@tiptap/extension-link";
-import { Placeholder } from "@tiptap/extension-placeholder";
-import { Image } from "@tiptap/extension-image";
-import { Table } from "@tiptap/extension-table";
-import { TableRow } from "@tiptap/extension-table-row";
-import { TableHeader } from "@tiptap/extension-table-header";
-import { TableCell } from "@tiptap/extension-table-cell";
-import { TaskList } from "@tiptap/extension-task-list";
-import { TaskItem } from "@tiptap/extension-task-item";
-import { marked } from "marked";
-import TurndownService from "turndown";
-import "./styles.css";
-
-const turndown = new TurndownService({
-  headingStyle: "atx",
-  bulletListMarker: "-",
-  codeBlockStyle: "fenced",
-});
-
-const bridge = {
-  nextId: 1,
-  pending: new Map(),
-  call(method, params = {}) {
-    const id = this.nextId++;
-    const payload = { id, method, params };
-    return new Promise((resolve, reject) => {
-      this.pending.set(id, { resolve, reject });
-      if (window.chrome?.webview) {
-        window.chrome.webview.postMessage(payload);
-      } else {
-        reject(new Error("Native bridge is not available."));
-      }
-    });
-  },
-};
-
-if (window.chrome?.webview) {
-  window.chrome.webview.addEventListener("message", (event) => {
-    const message = event.data;
-    const pending = bridge.pending.get(message.id);
-    if (!pending) return;
-    bridge.pending.delete(message.id);
-    if (message.ok) pending.resolve(message.result);
-    else pending.reject(new Error(message.error || "Native bridge failed."));
-  });
-}
-
-function markdownToHtml(markdown) {
-  return marked.parse(markdown || "", { gfm: true, breaks: false });
-}
-
-function htmlToMarkdown(html) {
-  return turndown.turndown(html || "");
-}
-
-function ToolbarButton({ label, title, active, disabled, onClick, className = "" }) {
-  return (
-    <button type="button" title={title || label} className={`${active ? "active" : ""} ${className}`.trim()} disabled={disabled} onClick={onClick}>
-      {label}
-    </button>
-  );
-}
-
-function App() {
-  const [markdown, setMarkdown] = React.useState("# regen.mde\n\nOpen a Markdown or Word file to begin.");
-  const [markdownPath, setMarkdownPath] = React.useState("");
-  const [workingPath, setWorkingPath] = React.useState("");
-  const [sourcePath, setSourcePath] = React.useState("");
-  const [exportPath, setExportPath] = React.useState("");
-  const [originalFormat, setOriginalFormat] = React.useState("");
-  const [status, setStatus] = React.useState("Ready");
-  const [mode, setMode] = React.useState("compare");
-  const [theme, setTheme] = React.useState(() => {
-    const saved = window.localStorage?.getItem("build-corpus-editor-theme");
-    if (saved === "dark" || saved === "light") return saved;
-    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  });
-  const [dirty, setDirty] = React.useState(false);
-  const [largeFile, setLargeFile] = React.useState(false);
-
-  const editor = useEditor({
-    extensions: [
-      StarterKit,
-      Link.configure({ openOnClick: false, autolink: true }),
-      Placeholder.configure({ placeholder: "Start writing..." }),
-      Image.configure({ inline: false, allowBase64: true }),
-      Table.configure({ resizable: true }),
-      TableRow,
-      TableHeader,
-      TableCell,
-      TaskList,
-      TaskItem.configure({ nested: true }),
-    ],
-    content: markdownToHtml(markdown),
-    immediatelyRender: false,
-    onUpdate({ editor }) {
-      const next = htmlToMarkdown(editor.getHTML());
-      setMarkdown(next);
-      setDirty(true);
-    },
-  });
-
-  const loadDocument = React.useCallback(async (path) => {
-    setStatus("Opening...");
-    const doc = await bridge.call("open", { path });
-    const format = doc.originalFormat || "";
-    const isMarkdown = format === "markdown";
-    setMarkdownPath(doc.workingPath || (isMarkdown ? doc.sourcePath || "" : ""));
-    setWorkingPath(doc.workingPath || "");
-    setSourcePath(doc.sourcePath || "");
-    setExportPath("");
-    setOriginalFormat(format);
-    setMarkdown(doc.content || "");
-    setLargeFile((doc.content || "").length > 50000);
-    editor?.commands.setContent(markdownToHtml(doc.content || ""));
-    setDirty(false);
-    setMode((doc.content || "").length > 50000 ? "markdown" : "compare");
-    setStatus(`Opened ${doc.sourcePath}`);
-  }, [editor]);
-
-  React.useEffect(() => {
-    bridge.call("startup").then((startup) => {
-      if (startup.initialPath) loadDocument(startup.initialPath);
-    }).catch((error) => setStatus(error.message));
-  }, [loadDocument]);
-
-  React.useEffect(() => {
-    if (editor && !dirty) editor.commands.setContent(markdownToHtml(markdown));
-  }, [editor, markdown, dirty]);
-
-  React.useEffect(() => {
-    window.localStorage?.setItem("build-corpus-editor-theme", theme);
-  }, [theme]);
-
-  async function chooseOpen() {
-    try {
-      const result = await bridge.call("chooseOpen");
-      if (result?.path) await loadDocument(result.path);
-    } catch (error) {
-      setStatus(error.message);
-    }
-  }
-
-  async function save() {
-    try {
-      setStatus("Saving...");
-      const result = await bridge.call("save", { path: markdownPath, content: markdown });
-      setMarkdownPath(result.output);
-      setWorkingPath(result.output);
-      setDirty(false);
-      setStatus(`Saved Markdown ${result.output}`);
-    } catch (error) {
-      setStatus(error.message);
-    }
-  }
-
-  async function saveAs(format) {
-    try {
-      setStatus("Saving as...");
-      const smokeOut = window.__REGEN_MDEDITOR_SMOKE_OUT;
-      const method = smokeOut ? "saveAsDirect" : "saveAs";
-      const params = { suggestedPath: markdownPath || sourcePath || workingPath, format, content: markdown };
-      if (smokeOut) {
-        const extension = format === "word" ? ".docx" : ".md";
-        params.targetPath = `${smokeOut}\\ui-save-as-${format}${extension}`;
-      }
-      const result = await bridge.call(method, params);
-      if (result?.output) {
-        if (format === "markdown") {
-          setMarkdownPath(result.output);
-          setWorkingPath(result.output);
-          setDirty(false);
-          setStatus(`Saved Markdown ${result.output}`);
-        } else {
-          setExportPath(result.output);
-          setStatus(`Exported Word ${result.output}`);
-        }
-      }
-    } catch (error) {
-      setStatus(error.message);
-    }
-  }
-
-  function setLink() {
-    const previous = editor?.getAttributes("link").href || "";
-    const href = window.prompt("URL", previous);
-    if (href === null) return;
-    if (href.trim() === "") {
-      editor?.chain().focus().unsetLink().run();
-    } else {
-      editor?.chain().focus().extendMarkRange("link").setLink({ href: href.trim() }).run();
-    }
-  }
-
-  async function insertImageFile() {
-    try {
-      const result = await bridge.call("chooseImage");
-      if (result?.src) {
-        editor?.chain().focus().setImage({ src: result.src, alt: result.alt || "" }).run();
-      }
-    } catch (error) {
-      setStatus(error.message);
-    }
-  }
-
-  function insertImageUrl() {
-    const src = window.prompt("Image URL");
-    if (src) editor?.chain().focus().setImage({ src: src.trim() }).run();
-  }
-
-  function syncSource(next) {
-    setMarkdown(next);
-    setDirty(true);
-    if (editor && next.length <= 50000) editor.commands.setContent(markdownToHtml(next));
-  }
-
-  React.useEffect(() => {
-    if (!window.__REGEN_MDEDITOR_SMOKE_OUT) return undefined;
-    window.__REGEN_MDEDITOR_SMOKE_API = {
-      appendMarkdown(text) {
-        const next = `${markdown}${text}`;
-        syncSource(next);
-        return next;
-      },
-    };
-    return () => {
-      delete window.__REGEN_MDEDITOR_SMOKE_API;
-    };
-  }, [markdown, editor]);
-
-  const canUseRich = Boolean(editor) && !largeFile;
-  const visiblePath = sourcePath || markdownPath || workingPath || "No file open";
-  const formatLabel = originalFormat ? originalFormat.toUpperCase() : "NEW";
-  const wordCount = markdown.trim() ? markdown.trim().split(/\s+/).length : 0;
-  const tableCount = (markdown.match(/\n\|/g) || []).length > 1 ? 1 : 0;
-  const imageCount = (markdown.match(/!\[[^\]]*]\(/g) || []).length;
-  const linkCount = (markdown.match(/https?:\/\//g) || []).length;
-  const confidence = Math.max(18, Math.min(94, 92 - imageCount * 8 - tableCount * 5));
-  const sourceBadge = formatLabel === "MARKDOWN" ? "MD" : formatLabel === "NEW" ? "NEW" : formatLabel;
-  const sourceText = sourcePath ? `${formatLabel} source loaded` : "No source loaded";
-  const draftText = markdownPath ? "Markdown target selected" : "Unsaved Markdown draft";
-  const exportText = exportPath ? "Word export written" : "Word export ready";
-  const nextTheme = theme === "dark" ? "light" : "dark";
-
-  return (
-    <main className="app-shell" data-theme={theme}>
-      <aside className="brand-rail" aria-label="Primary tools">
-        <div className="mark">BC</div>
-        <div className="rail-item active">Ed</div>
-        <div className="rail-item">Cv</div>
-        <div className="rail-item">Tb</div>
-        <div className="rail-item">Im</div>
-        <div className="rail-item">Qa</div>
-        <div />
-        <div className="rail-item">?</div>
-      </aside>
-
-      <header className="topbar">
-        <div className="file-title">
-          <strong>regen.mde</strong>
-          <span title={visiblePath}>{visiblePath}</span>
-        </div>
-        <div className="actions">
-          <button className="ghost" onClick={chooseOpen}>Open</button>
-          <button onClick={save} disabled={!markdownPath}>Save MD</button>
-          <button onClick={() => saveAs("markdown")}>Save MD As...</button>
-          <button onClick={() => saveAs("word")}>Export Word...</button>
-          <button className="ghost" onClick={() => setTheme(nextTheme)}>{theme === "dark" ? "Light" : "Dark"}</button>
-          <button className="primary" onClick={() => setStatus(`Checked ${wordCount} words, ${tableCount} tables, ${imageCount} images, ${linkCount} links`)}>Run Check</button>
-        </div>
-      </header>
-
-      <section className="side-panel left-panel">
-        <h2 className="panel-title">Document Flow</h2>
-        <div className="source-card">
-          <strong>{sourceText}</strong>
-          <p>{dirty ? "The Markdown draft has unsaved changes." : "The Markdown draft is in sync with its save target."}</p>
-        </div>
-        <div className="format-flow">
-          <div className="flow-step">
-            <div className="badge">{sourceBadge}</div>
-            <div><b>Original</b><small>{sourcePath || "Choose a file to begin"}</small></div>
-            <small>{sourcePath ? "loaded" : "empty"}</small>
-          </div>
-          <div className="flow-step">
-            <div className="badge">MD</div>
-            <div><b>Working draft</b><small>{draftText}</small></div>
-            <small>{dirty ? "dirty" : "saved"}</small>
-          </div>
-          <div className="flow-step">
-            <div className="badge">DOCX</div>
-            <div><b>Word export</b><small>{exportText}</small></div>
-            <small>{exportPath ? "done" : "ready"}</small>
-          </div>
-        </div>
-
-        <h2 className="panel-title">Insert</h2>
-        <div className="insert-grid">
-          <button className="insert-tile" disabled={!canUseRich} onClick={() => editor?.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}><b>Table</b>Rows, columns, headers</button>
-          <button className="insert-tile" disabled={!canUseRich} onClick={insertImageFile}><b>Image</b>File with alt text</button>
-          <button className="insert-tile" disabled={!canUseRich} onClick={() => editor?.chain().focus().toggleBlockquote().run()}><b>Callout</b>Note or quotation</button>
-          <button className="insert-tile" disabled={!canUseRich} onClick={() => editor?.chain().focus().toggleTaskList().run()}><b>Task</b>Checklist block</button>
-        </div>
-      </section>
-
-      <section className={`workspace ${mode}`}>
-        <div className="mode-strip">
-          <div className="segmented" aria-label="Editor mode">
-            <button className={mode === "preview" ? "active" : ""} onClick={() => setMode("preview")} disabled={largeFile}>Preview</button>
-            <button className={mode === "compare" ? "active" : ""} onClick={() => setMode("compare")} disabled={largeFile}>Compare</button>
-            <button className={mode === "markdown" ? "active" : ""} onClick={() => setMode("markdown")}>Markdown</button>
-          </div>
-          <div className="actions">
-            <button className="ghost" disabled={!canUseRich} onClick={() => editor?.chain().focus().undo().run()}>Undo</button>
-            <button className="ghost" disabled={!canUseRich} onClick={() => editor?.chain().focus().redo().run()}>Redo</button>
-            <button className="ghost" disabled={!canUseRich} onClick={setLink}>Link</button>
-          </div>
-        </div>
-
-        {largeFile && <div className="large-file-notice">Large file: rich preview is paused for performance. Markdown mode stays fully editable.</div>}
-
-        <div className="canvas-wrap">
-          {mode !== "markdown" && !largeFile && editor && (
-            <section className="page-area">
-              <article className="page rich">
-                <p className="page-label">{formatLabel === "NEW" ? "New Markdown draft" : `Converted from ${formatLabel}`}</p>
-                <BubbleMenu editor={editor} options={{ placement: "top" }} className="bubble-menu">
-                  <ToolbarButton label="B" title="Bold" active={editor?.isActive("bold")} onClick={() => editor?.chain().focus().toggleBold().run()} />
-                  <ToolbarButton label="I" title="Italic" active={editor?.isActive("italic")} onClick={() => editor?.chain().focus().toggleItalic().run()} />
-                  <ToolbarButton label="S" title="Strike" active={editor?.isActive("strike")} onClick={() => editor?.chain().focus().toggleStrike().run()} />
-                  <ToolbarButton label="Code" active={editor?.isActive("code")} onClick={() => editor?.chain().focus().toggleCode().run()} />
-                  <ToolbarButton label="Link" active={editor?.isActive("link")} onClick={setLink} />
-                </BubbleMenu>
-                <FloatingMenu editor={editor} options={{ placement: "right-start" }} className="floating-menu">
-                  <ToolbarButton label="H1" onClick={() => editor?.chain().focus().toggleHeading({ level: 1 }).run()} />
-                  <ToolbarButton label="H2" onClick={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()} />
-                  <ToolbarButton label="List" onClick={() => editor?.chain().focus().toggleBulletList().run()} />
-                  <ToolbarButton label="Table" onClick={() => editor?.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()} />
-                  <ToolbarButton label="Image" onClick={insertImageFile} />
-                </FloatingMenu>
-                <EditorContent editor={editor} />
-              </article>
-            </section>
-          )}
-
-          {(mode === "compare" || mode === "markdown" || largeFile) && (
-            <aside className="markdown-pane">
-              <textarea className="source" value={markdown} onChange={(event) => syncSource(event.target.value)} spellCheck="false" />
-            </aside>
-          )}
-        </div>
-      </section>
-
-      <aside className="side-panel right-panel">
-        <h2 className="panel-title">Output Health</h2>
-        <div className="source-card">
-          <strong>Round-trip confidence</strong>
-          <p>Tables, images, links, and headings are tracked as conversion risks.</p>
-          <div className="meter" aria-label="Round-trip confidence"><span style={{ width: `${confidence}%` }} /></div>
-        </div>
-
-        <h2 className="panel-title">Table Tools</h2>
-        <div className="tool-group">
-          <button disabled={!canUseRich || !editor?.isActive("table")} onClick={() => editor?.chain().focus().addRowAfter().run()}>Row +</button>
-          <button disabled={!canUseRich || !editor?.isActive("table")} onClick={() => editor?.chain().focus().addColumnAfter().run()}>Col +</button>
-          <button disabled={!canUseRich || !editor?.isActive("table")} onClick={() => editor?.chain().focus().deleteRow().run()}>Row -</button>
-          <button disabled={!canUseRich || !editor?.isActive("table")} onClick={() => editor?.chain().focus().deleteColumn().run()}>Col -</button>
-          <button disabled={!canUseRich || !editor?.isActive("table")} onClick={() => editor?.chain().focus().toggleHeaderRow().run()}>Header</button>
-          <button disabled={!canUseRich || !editor?.isActive("table")} onClick={() => editor?.chain().focus().deleteTable().run()}>Delete</button>
-        </div>
-
-        <h2 className="panel-title">Image Tools</h2>
-        <div className="tool-group">
-          <button disabled={!canUseRich} onClick={insertImageFile}>File</button>
-          <button disabled={!canUseRich} onClick={insertImageUrl}>URL</button>
-        </div>
-
-        <div className="checklist">
-          <div className="check"><span className="dot" /><div><b>Markdown target</b><br />{markdownPath || "Choose Save MD As..."}</div></div>
-          <div className="check"><span className="dot" /><div><b>Word export</b><br />{exportPath || "Ready to export with template hook."}</div></div>
-          <div className="check"><span className={imageCount ? "dot warn" : "dot"} /><div><b>Images</b><br />{imageCount} detected. Asset folder policy still needs final pass.</div></div>
-          <div className="check"><span className={tableCount ? "dot warn" : "dot"} /><div><b>Tables</b><br />{tableCount} detected. Advanced cell controls are surfaced here.</div></div>
-        </div>
-      </aside>
-
-      <footer className="statusbar">
-        <span>{status}{exportPath ? ` - Last Word export: ${exportPath}` : ""}</span>
-        <span>Words {wordCount} | Tables {tableCount} | Images {imageCount} | Links {linkCount}</span>
-      </footer>
-    </main>
-  );
-}
-
-createRoot(document.getElementById("root")).render(<App />);
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { BubbleMenu, FloatingMenu } from "@tiptap/react/menus";
+import StarterKit from "@tiptap/starter-kit";
+import { Link } from "@tiptap/extension-link";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { Image } from "@tiptap/extension-image";
+import { Table } from "@tiptap/extension-table";
+import { TableRow } from "@tiptap/extension-table-row";
+import { TableHeader } from "@tiptap/extension-table-header";
+import { TableCell } from "@tiptap/extension-table-cell";
+import { TaskList } from "@tiptap/extension-task-list";
+import { TaskItem } from "@tiptap/extension-task-item";
+import CodeMirror from "@uiw/react-codemirror";
+import { markdown as markdownLanguage } from "@codemirror/lang-markdown";
+import { marked } from "marked";
+import TurndownService from "turndown";
+import "./styles.css";
+
+const APP_VERSION = "0.6.0";
+
+const turndown = new TurndownService({
+  headingStyle: "atx",
+  bulletListMarker: "-",
+  codeBlockStyle: "fenced",
+});
+
+function normalizeCellMarkdown(markdown) {
+  return String(markdown || "")
+    .replace(/\n+/g, " ")
+    .replace(/\|/g, "\\|")
+    .trim();
+}
+
+turndown.addRule("gfmStrike", {
+  filter: ["del", "s", "strike"],
+  replacement(content) {
+    return `~~${content}~~`;
+  },
+});
+
+turndown.addRule("gfmTaskItem", {
+  filter(node) {
+    return node.nodeName === "LI" && (node.getAttribute("data-type") === "taskItem" || node.hasAttribute("data-checked"));
+  },
+  replacement(content, node) {
+    const checked = node.getAttribute("data-checked") === "true" ? "x" : " ";
+    return `- [${checked}] ${content.replace(/\n+/g, " ").trim()}\n`;
+  },
+});
+
+turndown.addRule("gfmTable", {
+  filter: "table",
+  replacement(_content, node) {
+    const rows = Array.from(node.querySelectorAll("tr"));
+    if (!rows.length) return "";
+    const matrix = rows
+      .map((row) => Array.from(row.children)
+        .filter((cell) => cell.matches("th,td"))
+        .map((cell) => normalizeCellMarkdown(turndown.turndown(cell.innerHTML))))
+      .filter((row) => row.length);
+    if (!matrix.length) return "";
+    const columnCount = Math.max(...matrix.map((row) => row.length));
+    const normalizedRows = matrix.map((row) => Array.from({ length: columnCount }, (_, index) => row[index] || " "));
+    const header = normalizedRows[0];
+    const body = normalizedRows.slice(1);
+    const headerLine = `| ${header.join(" | ")} |`;
+    const separatorLine = `| ${Array.from({ length: columnCount }, () => "---").join(" | ")} |`;
+    const bodyLines = body.map((row) => `| ${row.join(" | ")} |`);
+    return `\n\n${[headerLine, separatorLine, ...bodyLines].join("\n")}\n\n`;
+  },
+});
+
+const RICH_EDITOR_LIMIT = 50000;
+
+const bridge = {
+  nextId: 1,
+  pending: new Map(),
+  call(method, params = {}) {
+    const id = this.nextId++;
+    const payload = { id, method, params };
+    return new Promise((resolve, reject) => {
+      this.pending.set(id, { resolve, reject });
+      if (window.chrome?.webview) {
+        window.chrome.webview.postMessage(payload);
+      } else {
+        reject(new Error("Native bridge is not available."));
+      }
+    });
+  },
+};
+
+if (window.chrome?.webview) {
+  window.chrome.webview.addEventListener("message", (event) => {
+    const message = event.data;
+    const pending = bridge.pending.get(message.id);
+    if (!pending) return;
+    bridge.pending.delete(message.id);
+    if (message.ok) pending.resolve(message.result);
+    else pending.reject(new Error(message.error || "Native bridge failed."));
+  });
+}
+
+function markdownToHtml(markdown) {
+  return marked.parse(markdown || "", { gfm: true, breaks: false });
+}
+
+function htmlToMarkdown(html) {
+  return turndown.turndown(html || "");
+}
+
+function findEnclosingSyntax(markdown, start, end, prefix, suffix = prefix) {
+  const before = markdown.lastIndexOf(prefix, Math.max(0, start - 1));
+  if (before < 0) return null;
+  const close = markdown.indexOf(suffix, Math.max(end, before + prefix.length));
+  if (close < 0) return null;
+  if (start < before + prefix.length || end > close) return null;
+  if (prefix === "*" && (markdown[before - 1] === "*" || markdown[before + 1] === "*" || markdown[close - 1] === "*" || markdown[close + 1] === "*")) {
+    return null;
+  }
+  if (prefix === "`" && markdown.slice(before + prefix.length, close).includes("\n")) {
+    return null;
+  }
+  return { open: before, close };
+}
+
+function ReadOnlyMarkdownPreview({ markdown, formatLabel, pageAreaRef, onScroll }) {
+  const deferredMarkdown = React.useDeferredValue(markdown);
+  const html = React.useMemo(() => markdownToHtml(deferredMarkdown), [deferredMarkdown]);
+
+  return (
+    <section className="page-area" ref={pageAreaRef} onScroll={onScroll}>
+      <article className="page readonly-preview">
+        <p className="page-label">{formatLabel === "NEW" ? "New Markdown draft" : `Converted from ${formatLabel}`}</p>
+        <div className="rendered-markdown" dangerouslySetInnerHTML={{ __html: html }} />
+      </article>
+    </section>
+  );
+}
+
+function ToolbarButton({ label, title, active, disabled, onClick, className = "" }) {
+  return (
+    <button type="button" title={title || label} className={`${active ? "active" : ""} ${className}`.trim()} disabled={disabled} onClick={onClick}>
+      {label}
+    </button>
+  );
+}
+
+function App() {
+  const [markdown, setMarkdown] = React.useState("# regen-mde\n\nOpen a Markdown or Word file to begin.");
+  const [markdownPath, setMarkdownPath] = React.useState("");
+  const [workingPath, setWorkingPath] = React.useState("");
+  const [sourcePath, setSourcePath] = React.useState("");
+  const [exportPath, setExportPath] = React.useState("");
+  const [originalFormat, setOriginalFormat] = React.useState("");
+  const [status, setStatus] = React.useState("Ready");
+  const [mode, setMode] = React.useState("markdown");
+  const [theme, setTheme] = React.useState(() => {
+    const saved = window.localStorage?.getItem("build-corpus-editor-theme");
+    if (saved === "dark" || saved === "light") return saved;
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  });
+  const [dirty, setDirty] = React.useState(false);
+  const [largeFile, setLargeFile] = React.useState(false);
+  const [moveSources, setMoveSources] = React.useState(false);
+  const sourceViewRef = React.useRef(null);
+  const pageAreaRef = React.useRef(null);
+  const scrollSyncRef = React.useRef(false);
+  const [sourceScroller, setSourceScroller] = React.useState(null);
+  const [sourceSelectionRange, setSourceSelectionRange] = React.useState({ start: 0, end: 0, ready: false });
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Link.configure({ openOnClick: false, autolink: true }),
+      Placeholder.configure({ placeholder: "Start writing..." }),
+      Image.configure({ inline: false, allowBase64: true }),
+      Table.configure({ resizable: true }),
+      TableRow,
+      TableHeader,
+      TableCell,
+      TaskList,
+      TaskItem.configure({ nested: true }),
+    ],
+    content: markdownToHtml(markdown),
+    immediatelyRender: false,
+    onUpdate({ editor }) {
+      const next = htmlToMarkdown(editor.getHTML());
+      setMarkdown(next);
+      setDirty(true);
+    },
+  });
+
+  const loadDocument = React.useCallback(async (path) => {
+    setStatus("Opening...");
+    const doc = await bridge.call("open", { path });
+    const format = doc.originalFormat || "";
+    const isMarkdown = format === "markdown";
+    setMarkdownPath(doc.workingPath || (isMarkdown ? doc.sourcePath || "" : ""));
+    setWorkingPath(doc.workingPath || "");
+    setSourcePath(doc.sourcePath || "");
+    setExportPath("");
+    setOriginalFormat(format);
+    setMarkdown(doc.content || "");
+    const isLarge = (doc.content || "").length > RICH_EDITOR_LIMIT;
+    setLargeFile(isLarge);
+    if (!isLarge) editor?.commands.setContent(markdownToHtml(doc.content || ""));
+    setDirty(false);
+    setMode(isLarge ? "raw" : "markdown");
+    setStatus(`Opened ${doc.sourcePath}`);
+  }, [editor]);
+
+  React.useEffect(() => {
+    bridge.call("startup").then((startup) => {
+      if (startup.initialPath) loadDocument(startup.initialPath);
+    }).catch((error) => setStatus(error.message));
+  }, [loadDocument]);
+
+  React.useEffect(() => {
+    if (editor && !dirty && markdown.length <= RICH_EDITOR_LIMIT) editor.commands.setContent(markdownToHtml(markdown));
+  }, [editor, markdown, dirty]);
+
+  React.useEffect(() => {
+    window.localStorage?.setItem("build-corpus-editor-theme", theme);
+  }, [theme]);
+
+  async function chooseOpen() {
+    try {
+      const result = await bridge.call("chooseOpen");
+      if (result?.path) await loadDocument(result.path);
+    } catch (error) {
+      setStatus(error.message);
+    }
+  }
+
+  async function save() {
+    try {
+      setStatus("Saving...");
+      const result = await bridge.call("save", { path: markdownPath, content: markdown });
+      setMarkdownPath(result.output);
+      setWorkingPath(result.output);
+      setDirty(false);
+      setStatus(`Saved Markdown ${result.output}`);
+    } catch (error) {
+      setStatus(error.message);
+    }
+  }
+
+  async function saveAs(format) {
+    try {
+      setStatus("Saving as...");
+      const smokeOut = window.__REGEN_MDEDITOR_SMOKE_OUT;
+      const method = smokeOut ? "saveAsDirect" : "saveAs";
+      const params = { suggestedPath: markdownPath || sourcePath || workingPath, format, content: markdown };
+      if (smokeOut) {
+        const extension = format === "word" ? ".docx" : ".md";
+        params.targetPath = `${smokeOut}\\ui-save-as-${format}${extension}`;
+      }
+      const result = await bridge.call(method, params);
+      if (result?.output) {
+        if (format === "markdown") {
+          setMarkdownPath(result.output);
+          setWorkingPath(result.output);
+          setDirty(false);
+          setStatus(`Saved Markdown ${result.output}`);
+        } else {
+          setExportPath(result.output);
+          setStatus(`Exported Word ${result.output}`);
+        }
+      }
+    } catch (error) {
+      setStatus(error.message);
+    }
+  }
+
+  function setLink() {
+    const previous = editor?.getAttributes("link").href || "";
+    const href = window.prompt("URL", previous);
+    if (href === null) return;
+    if (href.trim() === "") {
+      editor?.chain().focus().unsetLink().run();
+    } else {
+      editor?.chain().focus().extendMarkRange("link").setLink({ href: href.trim() }).run();
+    }
+  }
+
+  async function insertImageFile() {
+    try {
+      const result = await bridge.call("chooseImage");
+      if (result?.src) {
+        editor?.chain().focus().setImage({ src: result.src, alt: result.alt || "" }).run();
+      }
+    } catch (error) {
+      setStatus(error.message);
+    }
+  }
+
+  function insertImageUrl() {
+    const src = window.prompt("Image URL");
+    if (src) editor?.chain().focus().setImage({ src: src.trim() }).run();
+  }
+
+  async function convertFolder() {
+    try {
+      const selected = await bridge.call("chooseFolder");
+      if (!selected?.path) return;
+      setStatus("Converting folder...");
+      const result = await bridge.call("convertBatch", { path: selected.path, moveSources });
+      setStatus(`Converted ${result.outputs?.length || 0} files from ${result.input}`);
+    } catch (error) {
+      setStatus(error.message);
+    }
+  }
+
+  async function inlineImages() {
+    try {
+      setStatus("Inlining images...");
+      const result = await bridge.call("inlineImages", { content: markdown, basePath: markdownPath || workingPath || sourcePath });
+      setMarkdown(result.content || markdown);
+      setDirty(true);
+      setLargeFile((result.content || markdown).length > RICH_EDITOR_LIMIT);
+      setMode("raw");
+      setStatus(`Inlined ${result.converted || 0} images${result.skipped?.length ? `; skipped ${result.skipped.length}` : ""}`);
+    } catch (error) {
+      setStatus(error.message);
+    }
+  }
+
+  function syncSource(next) {
+    setMarkdown(next);
+    setLargeFile(next.length > RICH_EDITOR_LIMIT);
+    setDirty(true);
+    if (editor && next.length <= RICH_EDITOR_LIMIT) editor.commands.setContent(markdownToHtml(next));
+  }
+
+  function syncScrollRatio(from, to) {
+    if (!from || !to) return;
+    const fromRange = Math.max(1, from.scrollHeight - from.clientHeight);
+    const toRange = Math.max(0, to.scrollHeight - to.clientHeight);
+    const ratio = from.scrollTop / fromRange;
+    to.scrollTop = ratio * toRange;
+  }
+
+  const handlePreviewScroll = React.useCallback((event) => {
+    if (mode !== "split" || scrollSyncRef.current) return;
+    scrollSyncRef.current = true;
+    syncScrollRatio(event.currentTarget, sourceViewRef.current?.scrollDOM);
+    window.requestAnimationFrame(() => {
+      scrollSyncRef.current = false;
+    });
+  }, [mode]);
+
+  React.useEffect(() => {
+    if (!sourceScroller) return undefined;
+    function handleSourceScroll(event) {
+      if (mode !== "split" || scrollSyncRef.current) return;
+      scrollSyncRef.current = true;
+      syncScrollRatio(event.currentTarget, pageAreaRef.current);
+      window.requestAnimationFrame(() => {
+        scrollSyncRef.current = false;
+      });
+    }
+    sourceScroller.addEventListener("scroll", handleSourceScroll, { passive: true });
+    return () => sourceScroller.removeEventListener("scroll", handleSourceScroll);
+  }, [mode, sourceScroller]);
+
+  function updateSourceSelection(next, selectionStart, selectionEnd) {
+    syncSource(next);
+    setSourceSelectionRange({ start: selectionStart, end: selectionEnd, ready: true });
+    window.requestAnimationFrame(() => {
+      const view = sourceViewRef.current;
+      if (!view) return;
+      view.focus();
+      view.dispatch({ selection: { anchor: selectionStart, head: selectionEnd } });
+    });
+  }
+
+  function sourceSelection() {
+    const view = sourceViewRef.current;
+    if (view) {
+      const range = view.state.selection.main;
+      if (sourceSelectionRange.ready && range.from === 0 && range.to === 0 && (sourceSelectionRange.start !== 0 || sourceSelectionRange.end !== 0)) {
+        return sourceSelectionRange;
+      }
+      return { start: range.from, end: range.to, ready: true };
+    }
+    return sourceSelectionRange.ready ? sourceSelectionRange : { start: markdown.length, end: markdown.length };
+  }
+
+  function wrapSelection(prefix, suffix = prefix, placeholder = "text") {
+    const { start, end } = sourceSelection();
+    const selected = markdown.slice(start, end);
+    if (selected && selected.startsWith(prefix) && selected.endsWith(suffix)) {
+      const unwrapped = selected.slice(prefix.length, selected.length - suffix.length);
+      const next = `${markdown.slice(0, start)}${unwrapped}${markdown.slice(end)}`;
+      updateSourceSelection(next, start, start + unwrapped.length);
+      return;
+    }
+    if (start >= prefix.length && markdown.slice(start - prefix.length, start) === prefix && markdown.slice(end, end + suffix.length) === suffix) {
+      const next = `${markdown.slice(0, start - prefix.length)}${selected}${markdown.slice(end + suffix.length)}`;
+      updateSourceSelection(next, start - prefix.length, end - prefix.length);
+      return;
+    }
+    const enclosing = findEnclosingSyntax(markdown, start, end, prefix, suffix);
+    if (enclosing) {
+      const next = `${markdown.slice(0, enclosing.open)}${markdown.slice(enclosing.open + prefix.length, enclosing.close)}${markdown.slice(enclosing.close + suffix.length)}`;
+      const shift = start > enclosing.open ? prefix.length : 0;
+      updateSourceSelection(next, Math.max(enclosing.open, start - shift), Math.max(enclosing.open, end - shift));
+      return;
+    }
+    const inserted = selected || placeholder;
+    const next = `${markdown.slice(0, start)}${prefix}${inserted}${suffix}${markdown.slice(end)}`;
+    updateSourceSelection(next, start + prefix.length, start + prefix.length + inserted.length);
+  }
+
+  function toggleLinePrefix(marker, familyRegex = null) {
+    const { start, end } = sourceSelection();
+    const lineStart = markdown.lastIndexOf("\n", Math.max(0, start - 1)) + 1;
+    const lineEndIndex = markdown.indexOf("\n", start);
+    const lineEnd = lineEndIndex === -1 ? markdown.length : lineEndIndex;
+    const line = markdown.slice(lineStart, lineEnd);
+    const activeMatch = familyRegex ? line.match(familyRegex) : (line.startsWith(marker) ? [marker] : null);
+    if (activeMatch) {
+      const removeLength = activeMatch[0].length;
+      const next = `${markdown.slice(0, lineStart)}${line.slice(removeLength)}${markdown.slice(lineEnd)}`;
+      updateSourceSelection(next, Math.max(lineStart, start - removeLength), Math.max(lineStart, end - removeLength));
+      return;
+    }
+    const next = `${markdown.slice(0, lineStart)}${marker}${markdown.slice(lineStart)}`;
+    updateSourceSelection(next, start + marker.length, end + marker.length);
+  }
+
+  function markdownSyntaxActive(prefix, suffix = prefix) {
+    const { start, end } = sourceSelection();
+    return Boolean(findEnclosingSyntax(markdown, start, end, prefix, suffix));
+  }
+
+  function activeMarkdownSyntax(prefixes) {
+    const { start, end } = sourceSelection();
+    return prefixes.find((marker) => findEnclosingSyntax(markdown, start, end, marker, marker)) || "";
+  }
+
+  function toggleItalic() {
+    const activeMarker = activeMarkdownSyntax(["*", "_"]);
+    wrapSelection(activeMarker || "*", activeMarker || "*", "italic");
+  }
+
+  function linePrefixActive(pattern) {
+    const { start } = sourceSelection();
+    const lineStart = markdown.lastIndexOf("\n", Math.max(0, start - 1)) + 1;
+    const lineEndIndex = markdown.indexOf("\n", start);
+    const lineEnd = lineEndIndex === -1 ? markdown.length : lineEndIndex;
+    return pattern.test(markdown.slice(lineStart, lineEnd));
+  }
+
+  function insertSnippet(snippet, cursorOffset = snippet.length) {
+    const { start, end } = sourceSelection();
+    const next = `${markdown.slice(0, start)}${snippet}${markdown.slice(end)}`;
+    updateSourceSelection(next, start + cursorOffset, start + cursorOffset);
+  }
+
+  React.useEffect(() => {
+    if (!window.__REGEN_MDEDITOR_SMOKE_OUT) return undefined;
+    window.__REGEN_MDEDITOR_SMOKE_API = {
+      appendMarkdown(text) {
+        const next = `${markdown}${text}`;
+        syncSource(next);
+        return next;
+      },
+      setMarkdown(text) {
+        const next = String(text || "");
+        syncSource(next);
+        return next;
+      },
+      setSelection(start, end = start) {
+        const view = sourceViewRef.current;
+        if (!view) throw new Error("Markdown editor view is not ready.");
+        const anchor = Math.max(0, Math.min(Number(start) || 0, view.state.doc.length));
+        const head = Math.max(0, Math.min(Number(end) || anchor, view.state.doc.length));
+        view.focus();
+        view.dispatch({ selection: { anchor, head } });
+        setSourceSelectionRange({ start: anchor, end: head, ready: true });
+        return `${anchor}:${head}`;
+      },
+      appendRichText(text) {
+        if (!editor) throw new Error("Rich editor is not ready.");
+        const paragraphs = String(text)
+          .split(/\n{2,}/)
+          .map((part) => part.trim())
+          .filter(Boolean)
+          .map((part) => `<p>${part.replace(/[&<>"']/g, (char) => ({
+            "&": "&amp;",
+            "<": "&lt;",
+            ">": "&gt;",
+            '"': "&quot;",
+            "'": "&#39;",
+          }[char]))}</p>`)
+          .join("");
+        editor.chain().focus().insertContent(paragraphs || "<p></p>").run();
+        return htmlToMarkdown(editor.getHTML());
+      },
+      getMarkdown() {
+        return markdown;
+      },
+    };
+    return () => {
+      delete window.__REGEN_MDEDITOR_SMOKE_API;
+    };
+  }, [markdown, editor]);
+
+  const canUseRich = !largeFile;
+  const visiblePath = sourcePath || markdownPath || workingPath || "No file open";
+  const formatLabel = originalFormat ? originalFormat.toUpperCase() : "NEW";
+  const wordCount = markdown.trim() ? markdown.trim().split(/\s+/).length : 0;
+  const tableCount = (markdown.match(/\n\|/g) || []).length > 1 ? 1 : 0;
+  const imageCount = (markdown.match(/!\[[^\]]*]\(/g) || []).length;
+  const linkCount = (markdown.match(/https?:\/\//g) || []).length;
+  const confidence = Math.max(18, Math.min(94, 92 - imageCount * 8 - tableCount * 5));
+  const sourceBadge = formatLabel === "MARKDOWN" ? "MD" : formatLabel === "NEW" ? "NEW" : formatLabel;
+  const sourceText = sourcePath ? `${formatLabel} source loaded` : "No source loaded";
+  const draftText = markdownPath ? "Markdown target selected" : "Unsaved Markdown draft";
+  const exportText = exportPath ? "Word export written" : "Word export ready";
+  const nextTheme = theme === "dark" ? "light" : "dark";
+  const markdownToolbarDisabled = false;
+  const codeMirrorExtensions = React.useMemo(() => [markdownLanguage()], []);
+  const codeMirrorTheme = "light";
+
+  return (
+    <main className="app-shell" data-theme={theme}>
+      <aside className="brand-rail" aria-label="Primary tools">
+        <div className="mark">BC</div>
+        <div className="rail-item active">Ed</div>
+        <div className="rail-item">Cv</div>
+        <div className="rail-item">Tb</div>
+        <div className="rail-item">Im</div>
+        <div className="rail-item">Qa</div>
+        <div />
+        <div className="rail-item">?</div>
+      </aside>
+
+      <header className="topbar">
+        <div className="file-title">
+          <strong>regen-mde</strong>
+          <span title={visiblePath}>{visiblePath}</span>
+        </div>
+        <div className="actions">
+          <button className="ghost" onClick={chooseOpen}>Open</button>
+          <button onClick={save} disabled={!markdownPath}>Save MD</button>
+          <button onClick={() => saveAs("markdown")}>Save MD As...</button>
+          <button onClick={() => saveAs("word")}>Export Word...</button>
+          <button className="ghost" onClick={inlineImages} disabled={!markdown}>Inline Images</button>
+          <button className="ghost" onClick={convertFolder}>Convert Folder</button>
+          <button className="ghost" onClick={() => setTheme(nextTheme)}>{theme === "dark" ? "Light" : "Dark"}</button>
+          <button className="primary" onClick={() => setStatus(`Checked ${wordCount} words, ${tableCount} tables, ${imageCount} images, ${linkCount} links`)}>Run Check</button>
+        </div>
+      </header>
+
+      <section className="side-panel left-panel">
+        <h2 className="panel-title">Document Flow</h2>
+        <div className="source-card">
+          <strong>{sourceText}</strong>
+          <p>{dirty ? "The Markdown draft has unsaved changes." : "The Markdown draft is in sync with its save target."}</p>
+          <label className="batch-option"><input type="checkbox" checked={moveSources} onChange={(event) => setMoveSources(event.target.checked)} /> Move processed files to sources</label>
+        </div>
+        <div className="format-flow">
+          <div className="flow-step">
+            <div className="badge">{sourceBadge}</div>
+            <div><b>Original</b><small>{sourcePath || "Choose a file to begin"}</small></div>
+            <small>{sourcePath ? "loaded" : "empty"}</small>
+          </div>
+          <div className="flow-step">
+            <div className="badge">MD</div>
+            <div><b>Working draft</b><small>{draftText}</small></div>
+            <small>{dirty ? "dirty" : "saved"}</small>
+          </div>
+          <div className="flow-step">
+            <div className="badge">DOCX</div>
+            <div><b>Word export</b><small>{exportText}</small></div>
+            <small>{exportPath ? "done" : "ready"}</small>
+          </div>
+        </div>
+
+        <h2 className="panel-title">Insert</h2>
+        <div className="insert-grid">
+          <button className="insert-tile" disabled={!canUseRich} onClick={() => editor?.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}><b>Table</b>Rows, columns, headers</button>
+          <button className="insert-tile" disabled={!canUseRich} onClick={insertImageFile}><b>Image</b>File with alt text</button>
+          <button className="insert-tile" disabled={!canUseRich} onClick={() => editor?.chain().focus().toggleBlockquote().run()}><b>Callout</b>Note or quotation</button>
+          <button className="insert-tile" disabled={!canUseRich} onClick={() => editor?.chain().focus().toggleTaskList().run()}><b>Task</b>Checklist block</button>
+        </div>
+      </section>
+
+      <section className={`workspace ${mode} ${largeFile ? "large" : ""}`}>
+        <div className="mode-strip">
+          <div className="segmented" aria-label="Editor mode">
+            <button className={mode === "markdown" ? "active" : ""} onClick={() => setMode("markdown")}>Markdown</button>
+            <button className={mode === "raw" ? "active" : ""} onClick={() => setMode("raw")}>Raw</button>
+            <button className={mode === "split" ? "active" : ""} onClick={() => setMode("split")}>Split Screen</button>
+          </div>
+          <div className="actions">
+            <button className="ghost" disabled={!canUseRich} onClick={() => editor?.chain().focus().undo().run()}>Undo</button>
+            <button className="ghost" disabled={!canUseRich} onClick={() => editor?.chain().focus().redo().run()}>Redo</button>
+            <button className="ghost" disabled={!canUseRich} onClick={setLink}>Link</button>
+          </div>
+        </div>
+
+        <div className="canvas-wrap">
+          {mode !== "raw" && canUseRich && editor && (
+            <section className="page-area" ref={pageAreaRef} onScroll={handlePreviewScroll}>
+              <article className="page rich">
+                <p className="page-label">{formatLabel === "NEW" ? "New Markdown draft" : `Converted from ${formatLabel}`}</p>
+                <BubbleMenu editor={editor} options={{ placement: "top" }} className="bubble-menu">
+                  <ToolbarButton label="B" title="Bold" active={editor?.isActive("bold")} onClick={() => editor?.chain().focus().toggleBold().run()} />
+                  <ToolbarButton label="I" title="Italic" active={editor?.isActive("italic")} onClick={() => editor?.chain().focus().toggleItalic().run()} />
+                  <ToolbarButton label="S" title="Strike" active={editor?.isActive("strike")} onClick={() => editor?.chain().focus().toggleStrike().run()} />
+                  <ToolbarButton label="Code" active={editor?.isActive("code")} onClick={() => editor?.chain().focus().toggleCode().run()} />
+                  <ToolbarButton label="Link" active={editor?.isActive("link")} onClick={setLink} />
+                </BubbleMenu>
+                <FloatingMenu editor={editor} options={{ placement: "right-start" }} className="floating-menu">
+                  <ToolbarButton label="H1" onClick={() => editor?.chain().focus().toggleHeading({ level: 1 }).run()} />
+                  <ToolbarButton label="H2" onClick={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()} />
+                  <ToolbarButton label="List" onClick={() => editor?.chain().focus().toggleBulletList().run()} />
+                  <ToolbarButton label="Table" onClick={() => editor?.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()} />
+                  <ToolbarButton label="Image" onClick={insertImageFile} />
+                </FloatingMenu>
+                <EditorContent editor={editor} />
+              </article>
+            </section>
+          )}
+
+          {mode !== "raw" && !canUseRich && (
+            <ReadOnlyMarkdownPreview markdown={markdown} formatLabel={formatLabel} pageAreaRef={pageAreaRef} onScroll={handlePreviewScroll} />
+          )}
+
+          {(mode === "split" || mode === "raw") && (
+            <aside className="markdown-pane editable-markdown">
+              <div className="markdown-toolbar" aria-label="Markdown formatting" onMouseDown={(event) => event.preventDefault()}>
+                <button className={linePrefixActive(/^# /) ? "active" : ""} disabled={markdownToolbarDisabled} onClick={() => toggleLinePrefix("# ", /^#{1,6} /)}>H1</button>
+                <button className={linePrefixActive(/^## /) ? "active" : ""} disabled={markdownToolbarDisabled} onClick={() => toggleLinePrefix("## ", /^#{1,6} /)}>H2</button>
+                <button className={markdownSyntaxActive("**") ? "active" : ""} disabled={markdownToolbarDisabled} onClick={() => wrapSelection("**", "**", "bold")}>B</button>
+                <button className={activeMarkdownSyntax(["*", "_"]) ? "active" : ""} disabled={markdownToolbarDisabled} onClick={toggleItalic}>I</button>
+                <button className={linePrefixActive(/^- /) ? "active" : ""} disabled={markdownToolbarDisabled} onClick={() => toggleLinePrefix("- ")}>List</button>
+                <button className={linePrefixActive(/^> /) ? "active" : ""} disabled={markdownToolbarDisabled} onClick={() => toggleLinePrefix("> ")}>Quote</button>
+                <button className={markdownSyntaxActive("`") ? "active" : ""} disabled={markdownToolbarDisabled} onClick={() => wrapSelection("`", "`", "code")}>Code</button>
+                <button disabled={markdownToolbarDisabled} onClick={() => wrapSelection("[", "](https://example.com)", "link")}>Link</button>
+                <button disabled={markdownToolbarDisabled} onClick={() => insertSnippet("![image](assets/image.png)", 2)}>Image</button>
+                <button disabled={markdownToolbarDisabled} onClick={() => insertSnippet("\n| Column | Value |\n| --- | --- |\n| Item | Detail |\n", 3)}>Table</button>
+              </div>
+              <CodeMirror
+                className="source code-source"
+                value={markdown}
+                height="100%"
+                basicSetup={{
+                  lineNumbers: true,
+                  foldGutter: true,
+                  highlightActiveLine: true,
+                  highlightSelectionMatches: true,
+                }}
+                extensions={codeMirrorExtensions}
+                theme={codeMirrorTheme}
+                onCreateEditor={(view) => {
+                  sourceViewRef.current = view;
+                  const range = view.state.selection.main;
+                  setSourceSelectionRange({ start: range.from, end: range.to, ready: true });
+                  setSourceScroller(view.scrollDOM);
+                }}
+                onUpdate={(viewUpdate) => {
+                  if (!viewUpdate.selectionSet) return;
+                  const range = viewUpdate.state.selection.main;
+                  setSourceSelectionRange({ start: range.from, end: range.to, ready: true });
+                }}
+                onChange={(value) => syncSource(value)}
+              />
+            </aside>
+          )}
+        </div>
+      </section>
+
+      <aside className="side-panel right-panel">
+        <h2 className="panel-title">Output Health</h2>
+        <div className="source-card">
+          <strong>Round-trip confidence</strong>
+          <p>Tables, images, links, and headings are tracked as conversion risks.</p>
+          <div className="meter" aria-label="Round-trip confidence"><span style={{ width: `${confidence}%` }} /></div>
+        </div>
+
+        <h2 className="panel-title">Table Tools</h2>
+        <div className="tool-group">
+          <button disabled={!canUseRich || !editor?.isActive("table")} onClick={() => editor?.chain().focus().addRowAfter().run()}>Row +</button>
+          <button disabled={!canUseRich || !editor?.isActive("table")} onClick={() => editor?.chain().focus().addColumnAfter().run()}>Col +</button>
+          <button disabled={!canUseRich || !editor?.isActive("table")} onClick={() => editor?.chain().focus().deleteRow().run()}>Row -</button>
+          <button disabled={!canUseRich || !editor?.isActive("table")} onClick={() => editor?.chain().focus().deleteColumn().run()}>Col -</button>
+          <button disabled={!canUseRich || !editor?.isActive("table")} onClick={() => editor?.chain().focus().toggleHeaderRow().run()}>Header</button>
+          <button disabled={!canUseRich || !editor?.isActive("table")} onClick={() => editor?.chain().focus().deleteTable().run()}>Delete</button>
+        </div>
+
+        <h2 className="panel-title">Image Tools</h2>
+        <div className="tool-group">
+          <button disabled={!canUseRich} onClick={insertImageFile}>File</button>
+          <button disabled={!canUseRich} onClick={insertImageUrl}>URL</button>
+        </div>
+
+        <div className="checklist">
+          <div className="check"><span className="dot" /><div><b>Markdown target</b><br />{markdownPath || "Choose Save MD As..."}</div></div>
+          <div className="check"><span className="dot" /><div><b>Word export</b><br />{exportPath || "Ready to export with template hook."}</div></div>
+          <div className="check"><span className={imageCount ? "dot warn" : "dot"} /><div><b>Images</b><br />{imageCount} detected. Asset folder policy still needs final pass.</div></div>
+          <div className="check"><span className={tableCount ? "dot warn" : "dot"} /><div><b>Tables</b><br />{tableCount} detected. Advanced cell controls are surfaced here.</div></div>
+        </div>
+      </aside>
+
+      <footer className="statusbar">
+        <span>{status}{exportPath ? ` - Last Word export: ${exportPath}` : ""}</span>
+        <span>Words {wordCount} | Tables {tableCount} | Images {imageCount} | Links {linkCount}</span>
+      </footer>
+    </main>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Compose mode — WezTerm pop-up prompt editor.
+// Launched with `--compose --pane-id <id>`. A blank scratch document with
+// voice dictation (block-tracked), drag-drop image/file → local path insertion,
+// and a "Send to terminal" action that bracket-pastes plain UTF-8 into the
+// captured WezTerm pane (no Enter — the user reviews and submits).
+// ---------------------------------------------------------------------------
+
+function ComposeApp({ paneId, dropDir }) {
+  const textareaRef = React.useRef(null);
+  const [status, setStatus] = React.useState("Ready — dictate, type, paste, or drop files.");
+  const [voiceState, setVoiceState] = React.useState("Voice idle");
+  const [recognizing, setRecognizing] = React.useState(false);
+  const [blockCount, setBlockCount] = React.useState(0);
+  const [sending, setSending] = React.useState(false);
+  const [dragging, setDragging] = React.useState(false);
+
+  // Block tracking: each dictation/insertion segment separated by a pause is a
+  // "block". "Delete last block" removes the most recently inserted block.
+  const snapshotRef = React.useRef("");
+  const blocksRef = React.useRef([]);
+  const pendingBlockRef = React.useRef(null);
+  const pauseTimerRef = React.useRef(null);
+  const recognitionRef = React.useRef(null);
+
+  const getValue = () => textareaRef.current?.value ?? "";
+  const setValue = (next) => {
+    if (textareaRef.current) textareaRef.current.value = next;
+    snapshotRef.current = next;
+  };
+
+  const refreshBlockCount = React.useCallback(() => {
+    setBlockCount(blocksRef.current.length);
+  }, []);
+
+  function replaceRange(start, end, text) {
+    const el = textareaRef.current;
+    if (!el) return;
+    const value = el.value;
+    el.value = value.slice(0, start) + text + value.slice(end);
+    const pos = start + text.length;
+    el.selectionStart = pos;
+    el.selectionEnd = pos;
+    snapshotRef.current = el.value;
+  }
+
+  function insertText(text, source = "manual") {
+    const el = textareaRef.current;
+    if (!el) return;
+    const start = el.selectionStart ?? el.value.length;
+    const end = el.selectionEnd ?? start;
+    replaceRange(start, end, text);
+    if (text.trim()) {
+      blocksRef.current.push({ start, end: start + text.length, text, source, at: Date.now() });
+      refreshBlockCount();
+    }
+    el.focus();
+  }
+
+  function commonDiff(before, after) {
+    let start = 0;
+    while (start < before.length && start < after.length && before[start] === after[start]) start += 1;
+    let beforeEnd = before.length;
+    let afterEnd = after.length;
+    while (beforeEnd > start && afterEnd > start && before[beforeEnd - 1] === after[afterEnd - 1]) {
+      beforeEnd -= 1;
+      afterEnd -= 1;
+    }
+    return { start, removed: before.slice(start, beforeEnd), inserted: after.slice(start, afterEnd) };
+  }
+
+  function finalizePendingBlock() {
+    const pending = pendingBlockRef.current;
+    if (pending && pending.text.trim()) {
+      blocksRef.current.push({ ...pending, end: pending.start + pending.text.length, at: Date.now() });
+      refreshBlockCount();
+    }
+    pendingBlockRef.current = null;
+  }
+
+  function handleInput() {
+    const current = getValue();
+    const diff = commonDiff(snapshotRef.current, current);
+    if (diff.inserted) {
+      if (!pendingBlockRef.current) {
+        pendingBlockRef.current = { start: diff.start, text: diff.inserted, source: "type" };
+      } else {
+        pendingBlockRef.current.text += diff.inserted;
+      }
+      clearTimeout(pauseTimerRef.current);
+      pauseTimerRef.current = setTimeout(finalizePendingBlock, 1300);
+    }
+    snapshotRef.current = current;
+  }
+
+  function deleteLastBlock() {
+    finalizePendingBlock();
+    const block = blocksRef.current.pop();
+    refreshBlockCount();
+    if (!block) {
+      setStatus("No blocks to delete.");
+      return;
+    }
+    const value = getValue();
+    const idx = value.lastIndexOf(block.text);
+    if (idx >= 0) {
+      replaceRange(idx, idx + block.text.length, "");
+      setStatus(`Deleted last block (${block.source}).`);
+    }
+    textareaRef.current?.focus();
+  }
+
+  function clearAll() {
+    setValue("");
+    pendingBlockRef.current = null;
+    blocksRef.current = [];
+    refreshBlockCount();
+    setStatus("Cleared.");
+    textareaRef.current?.focus();
+  }
+
+  async function handleDrop(event) {
+    event.preventDefault();
+    setDragging(false);
+    const files = [...(event.dataTransfer?.files || [])];
+    const text = event.dataTransfer?.getData("text/plain");
+    if (files.length === 0 && text) {
+      insertText(text, "drop");
+      return;
+    }
+    for (const file of files) {
+      try {
+        setStatus(`Saving ${file.name}...`);
+        const base64 = await fileToBase64(file);
+        const info = await bridge.call("saveDroppedFile", {
+          fileName: file.name || "drop.bin",
+          mimeType: file.type || "application/octet-stream",
+          data: base64,
+        });
+        const snippet = info.isImage
+          ? `\n[Image saved locally]\n${info.path}\n`
+          : `\n[File saved locally]\n${info.path}\n`;
+        insertText(snippet, info.isImage ? "image-drop" : "file-drop");
+        setStatus(`Inserted local path for ${file.name}.`);
+      } catch (error) {
+        setStatus(`Drop failed: ${error.message}`);
+      }
+    }
+  }
+
+  function fileToBase64(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = String(reader.result || "");
+        const comma = result.indexOf(",");
+        resolve(comma >= 0 ? result.slice(comma + 1) : result);
+      };
+      reader.onerror = () => reject(reader.error || new Error("Could not read file."));
+      reader.readAsDataURL(file);
+    });
+  }
+
+  function setupVoice() {
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SpeechRecognition) {
+      setVoiceState("Speech API unavailable — Windows dictation (Win+H) still works.");
+      return null;
+    }
+    const recognition = new SpeechRecognition();
+    recognition.continuous = true;
+    recognition.interimResults = false;
+    recognition.lang = "en-US";
+    recognition.onstart = () => {
+      setRecognizing(true);
+      setVoiceState("Voice listening...");
+    };
+    recognition.onend = () => {
+      setRecognizing(false);
+      setVoiceState("Voice idle");
+      // Each utterance boundary finalizes a dictation block.
+      finalizePendingBlock();
+    };
+    recognition.onerror = (event) => setVoiceState(`Voice error: ${event.error}`);
+    recognition.onresult = (event) => {
+      for (let i = event.resultIndex; i < event.results.length; i += 1) {
+        if (event.results[i].isFinal) {
+          const transcript = event.results[i][0].transcript.trim();
+          if (transcript) {
+            // A dictated utterance is its own block (do not merge via diff).
+            finalizePendingBlock();
+            insertText(`${transcript} `, "voice");
+            finalizePendingBlock();
+          }
+        }
+      }
+    };
+    return recognition;
+  }
+
+  React.useEffect(() => {
+    recognitionRef.current = setupVoice();
+    textareaRef.current?.focus();
+    return () => {
+      try {
+        recognitionRef.current?.stop();
+      } catch {
+        /* ignore */
+      }
+      clearTimeout(pauseTimerRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  function toggleVoice() {
+    const recognition = recognitionRef.current;
+    if (!recognition) return;
+    if (recognizing) recognition.stop();
+    else recognition.start();
+  }
+
+  async function send() {
+    finalizePendingBlock();
+    const content = getValue();
+    if (!content.trim()) {
+      setStatus("Nothing to send.");
+      return;
+    }
+    setSending(true);
+    setStatus("Sending to terminal...");
+    try {
+      const result = await bridge.call("sendToPane", { content, paneId });
+      setStatus(`Pasted into pane ${result.paneId}. Review in the terminal, then press Enter to submit.`);
+      // Close the pop-up after a successful paste so focus returns to the pane.
+      setTimeout(() => window.close(), 200);
+    } catch (error) {
+      setStatus(`Send failed: ${error.message}`);
+      setSending(false);
+    }
+  }
+
+  // Keyboard: Ctrl+Enter sends, Ctrl+Backspace-style shortcut for delete block.
+  function handleKeyDown(event) {
+    if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+      event.preventDefault();
+      send();
+    }
+  }
+
+  return (
+    <main className="compose-shell" data-theme="dark">
+      <header className="compose-topbar">
+        <div className="compose-title">
+          <strong>WezTerm Prompt Editor</strong>
+          <span>{paneId ? `Pane ${paneId}` : "No pane bound"}{dropDir ? ` · drops → ${dropDir}` : ""}</span>
+        </div>
+        <div className="compose-actions">
+          <button type="button" className={recognizing ? "active" : ""} onClick={toggleVoice}>
+            {recognizing ? "Stop Voice" : "Start Voice"}
+          </button>
+          <button type="button" onClick={deleteLastBlock}>Delete Last Block</button>
+          <button type="button" onClick={clearAll}>Clear</button>
+          <button type="button" className="primary" onClick={send} disabled={sending}>
+            {sending ? "Sending..." : "Send to terminal"}
+          </button>
+        </div>
+      </header>
+
+      <section
+        className={`compose-editor-wrap${dragging ? " dragging" : ""}`}
+        onDragOver={(event) => {
+          event.preventDefault();
+          setDragging(true);
+        }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={handleDrop}
+      >
+        <textarea
+          ref={textareaRef}
+          className="compose-editor"
+          spellCheck
+          autoFocus
+          placeholder="Dictate, type, paste, or drop files here. Images are saved to a temp folder and inserted as a local path. Ctrl+Enter sends."
+          onInput={handleInput}
+          onKeyDown={handleKeyDown}
+        />
+      </section>
+
+      <footer className="compose-statusbar">
+        <span>{status}</span>
+        <span>{voiceState}</span>
+        <span>{blockCount} block{blockCount === 1 ? "" : "s"}</span>
+        <span>regen-mde v{APP_VERSION}</span>
+      </footer>
+    </main>
+  );
+}
+
+// Decide which surface to mount: compose mode (pop-up prompt editor) or the
+// full document editor. We ask the native host before rendering so we never
+// flash the wrong UI.
+function bootstrap() {
+  const rootEl = document.getElementById("root");
+  const root = createRoot(rootEl);
+
+  const mountFull = () => root.render(<App />);
+
+  if (!window.chrome?.webview) {
+    // Running outside the native host (e.g. dev) — default to the full editor.
+    mountFull();
+    return;
+  }
+
+  bridge
+    .call("composeInfo")
+    .then((info) => {
+      if (info?.composeMode) {
+        root.render(<ComposeApp paneId={info.paneId || ""} dropDir={info.dropDir || ""} />);
+      } else {
+        mountFull();
+      }
+    })
+    .catch(() => mountFull());
+}
+
+bootstrap();