regen.mde 0.2.2

package/dist/windows-editor/wwwroot/assets/index-_dwMNNsm.css

@@ -0,0 +1 @@
+:root{color-scheme:light;font-family:Segoe UI,Inter,system-ui,sans-serif;background:#fbf8f0;color:#192028;--ink: oklch(24% .018 250);--muted: oklch(47% .022 250);--paper: oklch(98% .011 92);--panel: oklch(95% .014 92);--line: oklch(82% .018 92);--soft: oklch(91% .022 92);--accent: oklch(56% .135 176);--accent-dark: oklch(36% .09 176);--warning: oklch(52% .12 23);--violet: oklch(60% .11 284);--source: oklch(20% .022 250);--source-ink: oklch(93% .016 92);--shadow: 0 24px 70px rgba(34, 38, 46, .18);--button-bg: oklch(99% .006 92);--button-hover: oklch(94% .034 176);--topbar-bg: rgba(252, 249, 240, .94);--panel-bg: rgba(248, 245, 236, .96);--card-bg: oklch(99% .006 92);--page-bg: oklch(99% .005 92);--page-ink: oklch(27% .018 250);--rail-bg: oklch(28% .026 250);--rail-item-bg: oklch(37% .04 250);--grid-line-strong: rgba(41, 143, 132, .08);--grid-line-soft: rgba(41, 143, 132, .05);--warning-bg: oklch(93% .044 72);--warning-border: oklch(74% .075 72);--warning-ink: oklch(35% .075 72);--bubble-bg: oklch(24% .022 250);--bubble-line: oklch(35% .025 250);--bubble-ink: oklch(94% .01 92);--table-head: oklch(92% .025 92)}[data-theme=dark]{color-scheme:dark;--ink: oklch(91% .014 250);--muted: oklch(68% .018 250);--paper: oklch(20% .018 250);--panel: oklch(26% .018 250);--line: oklch(38% .022 250);--soft: oklch(16% .018 250);--accent: oklch(65% .13 176);--accent-dark: oklch(88% .058 176);--warning: oklch(71% .14 68);--violet: oklch(71% .1 284);--source: oklch(14% .018 250);--source-ink: oklch(90% .012 92);--shadow: 0 24px 80px rgba(0, 0, 0, .46);--button-bg: oklch(27% .018 250);--button-hover: oklch(32% .038 176);--topbar-bg: rgba(25, 29, 36, .96);--panel-bg: rgba(29, 33, 40, .96);--card-bg: oklch(24% .018 250);--page-bg: oklch(96% .008 92);--page-ink: oklch(25% .018 250);--rail-bg: oklch(13% .02 250);--rail-item-bg: oklch(24% .03 250);--grid-line-strong: rgba(86, 205, 190, .08);--grid-line-soft: rgba(86, 205, 190, .045);--warning-bg: oklch(25% .044 68);--warning-border: oklch(48% .11 68);--warning-ink: oklch(84% .09 68);--bubble-bg: oklch(91% .012 92);--bubble-line: oklch(72% .02 92);--bubble-ink: oklch(20% .022 250);--table-head: oklch(90% .018 92)}*{box-sizing:border-box}body{margin:0;min-width:920px}button{min-height:28px;border:1px solid var(--line);border-radius:5px;padding:4px 9px;background:var(--button-bg);color:var(--ink);font:600 12px/1 Segoe UI,system-ui,sans-serif;letter-spacing:0;cursor:pointer}button:hover:not(:disabled),button.active{border-color:var(--accent);background:var(--button-hover);color:var(--accent-dark)}button:disabled{cursor:default;opacity:.42}button.primary{background:var(--accent);border-color:#006453;border-color:oklch(45% .11 176);color:#f2fbf8}button.ghost{background:transparent}main.app-shell{width:100vw;height:100vh;min-height:720px;display:grid;grid-template-columns:58px 260px minmax(560px,1fr) 320px;grid-template-rows:48px 1fr 30px;overflow:hidden;background:linear-gradient(90deg,var(--grid-line-strong) 0 1px,transparent 1px 72px),linear-gradient(var(--grid-line-soft) 0 1px,transparent 1px 72px),var(--paper)}.brand-rail{grid-row:1 / 4;border-right:1px solid var(--line);background:var(--rail-bg);color:#e7e4dc;display:grid;grid-template-rows:64px repeat(5,42px) 1fr 42px;place-items:center}.mark{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--accent);color:#f2fbf8;font-weight:800}.rail-item{width:34px;height:34px;border-radius:7px;display:grid;place-items:center;color:#c7c4bc;font-size:12px;font-weight:700}.rail-item.active{background:var(--rail-item-bg);color:#fbf8f1}.topbar{grid-column:2 / 5;border-bottom:1px solid var(--line);background:var(--topbar-bg);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 14px}.file-title{min-width:0;display:flex;align-items:baseline;gap:10px}.file-title strong{font-size:15px}.file-title span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font:12px/1.2 Consolas,Cascadia Mono,monospace}.actions{display:flex;align-items:center;gap:6px}.side-panel{border-color:var(--line);background:var(--panel-bg);padding:14px;overflow:auto}.left-panel{grid-row:2 / 3;grid-column:2 / 3;border-right:1px solid var(--line)}.right-panel{grid-row:2 / 3;grid-column:4 / 5;border-left:1px solid var(--line)}.panel-title{margin:0 0 10px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase}.source-card,.check{border:1px solid var(--line);border-radius:7px;background:var(--card-bg)}.source-card{padding:12px;margin-bottom:12px}.source-card strong{display:block;font-size:13px;margin-bottom:5px}.source-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.4}.format-flow,.checklist{display:grid;gap:8px;margin:14px 0}.flow-step{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:9px;min-height:42px;padding:7px;border:1px solid var(--line);border-radius:7px;background:var(--panel)}.badge{height:26px;border-radius:5px;display:grid;place-items:center;background:#c0dfd6;color:#003d32;color:oklch(32% .07 176);font-weight:800;font-size:10px}.flow-step small{display:block;color:var(--muted);font-size:11px}.insert-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.insert-tile{min-height:58px;border:1px solid var(--line);border-radius:7px;padding:9px;background:var(--card-bg);font-size:12px;text-align:left}.insert-tile b{display:block;margin-bottom:5px}.workspace{grid-row:2 / 3;grid-column:3 / 4;min-width:0;display:grid;grid-template-rows:42px auto 1fr;background:var(--soft)}.mode-strip{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 14px}.segmented{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:7px;background:var(--card-bg)}.segmented button{border:0;min-height:24px;background:transparent}.segmented button.active{background:var(--ink);color:#fbf8f1}.large-file-notice{padding:8px 14px;border-bottom:1px solid var(--warning-border);background:var(--warning-bg);color:var(--warning-ink);font-size:12px}.canvas-wrap{min-height:0;display:grid;grid-template-columns:minmax(360px,1fr) minmax(300px,.72fr);overflow:hidden}.workspace.preview .canvas-wrap,.workspace.markdown .canvas-wrap{grid-template-columns:1fr}.workspace.preview .markdown-pane,.workspace.markdown .page-area{display:none}.page-area{min-width:0;overflow:auto;padding:26px 38px 60px}.page{position:relative;width:min(760px,100%);min-height:900px;margin:0 auto;padding:58px 64px;border:1px solid oklch(84% .014 92);border-radius:6px;background:var(--page-bg);box-shadow:var(--shadow)}.page-label{margin:0 0 18px;color:var(--warning);font-size:11px;font-weight:800;text-transform:uppercase}.rich .ProseMirror{min-height:720px;outline:none;color:var(--page-ink);line-height:1.62}.rich .ProseMirror h1{margin:0 0 18px;max-width:14ch;font-size:42px;line-height:.98}.rich .ProseMirror h2{margin-top:32px;font-size:25px}.rich .ProseMirror p,.rich .ProseMirror li{font-size:15px}.rich .ProseMirror blockquote{margin:24px 0;padding:15px;border:1px solid oklch(78% .055 176);border-radius:7px;background:color-mix(in oklch,var(--accent) 14%,var(--page-bg))}.rich .ProseMirror table{width:100%;margin:22px 0;border-collapse:collapse;font-size:13px}.rich .ProseMirror th,.rich .ProseMirror td{border:1px solid oklch(78% .016 92);padding:8px;text-align:left}.rich .ProseMirror th{background:var(--table-head)}.rich img{max-width:100%;height:auto;border-radius:5px}.markdown-pane{min-width:0;overflow:auto;padding:18px;background:var(--source);color:var(--source-ink)}.source{width:100%;min-height:100%;border:0;resize:none;outline:none;background:transparent;color:inherit;font:13px/1.55 Consolas,Cascadia Mono,monospace}.bubble-menu,.floating-menu{display:flex;align-items:center;gap:3px;padding:5px;border:1px solid var(--bubble-line);border-radius:8px;background:var(--bubble-bg);box-shadow:0 16px 32px #181c2438}.floating-menu{background:var(--card-bg);border-color:var(--line)}.bubble-menu button{min-width:28px;border-color:#3e4c5a;background:transparent;color:var(--bubble-ink)}.floating-menu button{min-width:28px;min-height:26px}.meter{height:8px;overflow:hidden;border-radius:999px;background:#d8d4c7;margin-top:10px}.meter span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--violet))}.check{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start;padding:8px;font-size:12px}.dot{width:16px;height:16px;margin-top:1px;border-radius:999px;background:var(--accent)}.dot.warn{background:var(--warning)}.tool-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:12px}.tool-group button{min-width:0}.statusbar{grid-column:2 / 5;border-top:1px solid var(--line);background:#f5f2e9;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 12px;font-size:12px}.statusbar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1120px){body{min-width:760px}main.app-shell{grid-template-columns:52px 1fr;grid-template-rows:48px 1fr 30px}.topbar,.statusbar{grid-column:2 / 3}.left-panel,.right-panel{display:none}.workspace{grid-column:2 / 3}.canvas-wrap{grid-template-columns:1fr}.workspace.compare .markdown-pane{display:none}}

package/dist/windows-editor/wwwroot/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>regen.mde</title>
+    <script>
+      window.__REGEN_MDEDITOR_ERROR = "";
+      window.addEventListener("error", function (event) {
+        window.__REGEN_MDEDITOR_ERROR = event.message || "window error";
+      });
+      window.addEventListener("unhandledrejection", function (event) {
+        window.__REGEN_MDEDITOR_ERROR = event.reason && event.reason.message ? event.reason.message : String(event.reason || "unhandled rejection");
+      });
+    </script>
+    <script type="module" crossorigin src="./assets/index-DjJ6xmhy.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-_dwMNNsm.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/editor-web/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>regen.mde</title>
+    <script>
+      window.__REGEN_MDEDITOR_ERROR = "";
+      window.addEventListener("error", function (event) {
+        window.__REGEN_MDEDITOR_ERROR = event.message || "window error";
+      });
+      window.addEventListener("unhandledrejection", function (event) {
+        window.__REGEN_MDEDITOR_ERROR = event.reason && event.reason.message ? event.reason.message : String(event.reason || "unhandled rejection");
+      });
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/editor-web/src/main.jsx

@@ -0,0 +1,399 @@
+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 />);