regen.mde 0.7.0 → 0.8.1

package/dist/windows-editor/wwwroot/assets/index-CtOv7qsC.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(99% .005 92);--source-ink: oklch(27% .018 250);--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(96% .008 92);--source-ink: oklch(25% .018 250);--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)}main.app-shell.left-collapsed{grid-template-columns:58px 44px minmax(560px,1fr) 320px}main.app-shell.right-collapsed{grid-template-columns:58px 260px minmax(560px,1fr) 44px}main.app-shell.left-collapsed.right-collapsed{grid-template-columns:58px 44px minmax(560px,1fr) 44px}.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}.side-panel.collapsed{overflow:hidden;padding:8px 5px}.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-chrome{min-height:28px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.left-panel .panel-chrome{flex-direction:row-reverse}.panel-toggle{width:28px;min-width:28px;height:28px;min-height:28px;display:grid;place-items:center;padding:0;font-size:17px;line-height:1}.side-panel.collapsed .panel-chrome{height:100%;min-height:0;flex-direction:column;justify-content:flex-start;margin:0}.side-panel.collapsed .panel-title{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;margin:10px 0 0;max-height:calc(100vh - 150px);overflow:hidden;text-overflow:ellipsis}.side-panel.collapsed .panel-body{display:none}.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}.batch-option{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--text);font-size:12px;line-height:1.35}.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;min-height:0;display:grid;grid-template-rows:42px 1fr;overflow:hidden;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}.canvas-wrap{min-height:0;height:100%;display:grid;grid-template-columns:minmax(360px,1fr) minmax(300px,.72fr);overflow:hidden}.workspace.markdown .canvas-wrap,.workspace.markdown.large .canvas-wrap{grid-template-columns:1fr}.workspace.split .canvas-wrap{grid-template-columns:minmax(360px,1fr) minmax(300px,.72fr)}.workspace.raw .canvas-wrap{grid-template-columns:1fr}.workspace.markdown .markdown-pane,.workspace.raw .page-area{display:none}.page-area{min-width:0;min-height:0;height:100%;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,.rendered-markdown h1{margin:0 0 18px;max-width:14ch;font-size:42px;line-height:.98}.rich .ProseMirror h2,.rendered-markdown h2{margin-top:32px;font-size:25px}.rich .ProseMirror p,.rich .ProseMirror li,.rendered-markdown p,.rendered-markdown li{font-size:15px}.rich .ProseMirror blockquote,.rendered-markdown 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,.rendered-markdown table{width:100%;margin:22px 0;border-collapse:collapse;font-size:13px}.rich .ProseMirror th,.rich .ProseMirror td,.rendered-markdown th,.rendered-markdown td{border:1px solid oklch(78% .016 92);padding:8px;text-align:left}.rich .ProseMirror th,.rendered-markdown th{background:var(--table-head)}.rich img,.rendered-markdown img{max-width:100%;height:auto;border-radius:5px}.readonly-preview{color:var(--page-ink);line-height:1.62}.rendered-markdown{min-height:720px}.rendered-markdown pre{overflow:auto;padding:12px;border-radius:6px;background:color-mix(in oklch,var(--page-ink) 8%,var(--page-bg))}.rendered-markdown code{font-family:Consolas,Cascadia Mono,monospace}.markdown-pane{min-width:0;min-height:0;height:100%;overflow:auto;padding:18px;background:var(--source);color:var(--source-ink);border-left:1px solid var(--line)}.editable-markdown{display:flex;flex-direction:column;gap:10px}.markdown-toolbar{display:flex;flex-wrap:wrap;gap:4px;padding-bottom:8px;border-bottom:1px solid var(--line)}.markdown-toolbar button{min-width:30px;min-height:26px;border-color:var(--line);background:color-mix(in oklch,var(--page-ink) 4%,var(--source));color:var(--source-ink)}.source{width:100%;min-height:0;flex:1;border:0;outline:none;background:transparent;color:inherit;font:13px/1.55 Consolas,Cascadia Mono,monospace}.code-source,.code-source>div,.code-source [class*=cm-theme],.code-source .cm-editor,.code-source .cm-scroller{min-height:0;height:100%}.code-source .cm-editor{border-radius:6px;border:1px solid oklch(84% .014 92);background:var(--source);color:var(--source-ink)}.code-source .cm-scroller{background:var(--source);color:var(--source-ink);font-family:Consolas,Cascadia Mono,monospace;font-size:13px;line-height:1.55}.code-source .cm-content{color:var(--source-ink)}.code-source .cm-gutters{border-right:1px solid var(--line);background:var(--source);color:var(--muted)}.code-source .cm-lineNumbers .cm-gutterElement{min-width:26px;padding:0 6px 0 2px;color:var(--muted);font-size:10px;opacity:.52}.code-source .cm-activeLine,.code-source .cm-activeLineGutter{background:color-mix(in oklch,var(--accent) 8%,transparent)}.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:840px){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.split .canvas-wrap{grid-template-columns:minmax(340px,1fr) minmax(280px,.78fr)}}.compose-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;width:100vw;background:#101214;color:#eef1f4;font-family:Segoe UI,Inter,system-ui,sans-serif}.compose-topbar,.compose-statusbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;background:#181b1f;border-bottom:1px solid #353b44}.compose-statusbar{border-bottom:0;border-top:1px solid #353b44;color:#9ca8b4;font-size:12.5px;gap:14px}.compose-statusbar span:first-child{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compose-title{display:flex;flex-direction:column;gap:2px;min-width:0}.compose-title strong{font-size:16px}.compose-title span{font-size:12px;color:#9ca8b4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compose-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.compose-actions button{min-height:34px;border:1px solid #353b44;background:#20242a;color:#eef1f4;border-radius:6px;padding:0 12px;font:inherit;font-size:13px;cursor:pointer}.compose-actions button:hover{border-color:#9cc7ff}.compose-actions button.active{border-color:#65d0a4;color:#65d0a4}.compose-actions button.primary{background:#65d0a4;color:#06120d;border-color:#65d0a4;font-weight:650}.compose-actions button.primary:disabled{opacity:.6;cursor:default}.compose-editor-wrap{padding:14px;min-height:0;display:flex}.compose-editor-wrap.dragging{outline:3px solid #9cc7ff;outline-offset:-10px}.compose-editor{width:100%;height:100%;resize:none;border:1px solid #353b44;border-radius:8px;background:#0c0e10;color:#eef1f4;padding:16px;font:15px/1.55 Cascadia Code,Consolas,monospace;outline:none}.compose-editor:focus{border-color:#9cc7ff}

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

@@ -1,22 +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-C_VxJk4k.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-Wt9zSjIw.css">
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
+<!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-BB0sbZaD.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CtOv7qsC.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/editor-web/index.html

@@ -1,21 +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>
+<!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

@@ -163,7 +163,9 @@ function App() {
   });
   const [dirty, setDirty] = React.useState(false);
   const [largeFile, setLargeFile] = React.useState(false);
-  const [moveSources, setMoveSources] = React.useState(false);
+  const [moveSources, setMoveSources] = React.useState(false);
+  const [leftPanelCollapsed, setLeftPanelCollapsed] = React.useState(() => window.localStorage?.getItem("build-corpus-editor-left-panel") === "collapsed");
+  const [rightPanelCollapsed, setRightPanelCollapsed] = React.useState(() => window.localStorage?.getItem("build-corpus-editor-right-panel") === "collapsed");
   const sourceViewRef = React.useRef(null);
   const pageAreaRef = React.useRef(null);
   const scrollSyncRef = React.useRef(false);
@@ -221,9 +223,17 @@ function App() {
     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]);
+  React.useEffect(() => {
+    window.localStorage?.setItem("build-corpus-editor-theme", theme);
+  }, [theme]);
+
+  React.useEffect(() => {
+    window.localStorage?.setItem("build-corpus-editor-left-panel", leftPanelCollapsed ? "collapsed" : "open");
+  }, [leftPanelCollapsed]);
+
+  React.useEffect(() => {
+    window.localStorage?.setItem("build-corpus-editor-right-panel", rightPanelCollapsed ? "collapsed" : "open");
+  }, [rightPanelCollapsed]);
 
   async function chooseOpen() {
     try {
@@ -527,7 +537,7 @@ function App() {
   const codeMirrorTheme = "light";
 
   return (
-    <main className="app-shell" data-theme={theme}>
+    <main className={`app-shell${leftPanelCollapsed ? " left-collapsed" : ""}${rightPanelCollapsed ? " right-collapsed" : ""}`} data-theme={theme}>
       <aside className="brand-rail" aria-label="Primary tools">
         <div className="mark">BC</div>
         <div className="rail-item active">Ed</div>
@@ -556,39 +566,53 @@ function App() {
         </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={`side-panel left-panel${leftPanelCollapsed ? " collapsed" : ""}`}>
+        <div className="panel-chrome">
+          <button
+            type="button"
+            className="panel-toggle"
+            aria-label={leftPanelCollapsed ? "Expand Document Flow panel" : "Collapse Document Flow panel"}
+            aria-expanded={!leftPanelCollapsed}
+            onClick={() => setLeftPanelCollapsed((collapsed) => !collapsed)}
+            title={leftPanelCollapsed ? "Expand Document Flow" : "Collapse Document Flow"}
+          >
+            <span aria-hidden="true">≡</span>
+          </button>
+          <h2 className="panel-title">Document Flow</h2>
+        </div>
+        <div className="panel-body">
+          <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>
+        </div>
+      </section>
 
       <section className={`workspace ${mode} ${largeFile ? "large" : ""}`}>
         <div className="mode-strip">
@@ -676,37 +700,51 @@ function App() {
         </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>
+      <aside className={`side-panel right-panel${rightPanelCollapsed ? " collapsed" : ""}`}>
+        <div className="panel-chrome">
+          <h2 className="panel-title">Output Health</h2>
+          <button
+            type="button"
+            className="panel-toggle"
+            aria-label={rightPanelCollapsed ? "Expand Output Health panel" : "Collapse Output Health panel"}
+            aria-expanded={!rightPanelCollapsed}
+            onClick={() => setRightPanelCollapsed((collapsed) => !collapsed)}
+            title={rightPanelCollapsed ? "Expand Output Health" : "Collapse Output Health"}
+          >
+            <span aria-hidden="true">≡</span>
+          </button>
+        </div>
+        <div className="panel-body">
+          <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>
+        </div>
+      </aside>
 
       <footer className="statusbar">
         <span>{status}{exportPath ? ` - Last Word export: ${exportPath}` : ""}</span>

package/editor-web/src/styles.css

@@ -113,20 +113,32 @@ 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;
+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);
-}
-
+    var(--paper);
+}
+
+main.app-shell.left-collapsed {
+  grid-template-columns: 58px 44px minmax(560px, 1fr) 320px;
+}
+
+main.app-shell.right-collapsed {
+  grid-template-columns: 58px 260px minmax(560px, 1fr) 44px;
+}
+
+main.app-shell.left-collapsed.right-collapsed {
+  grid-template-columns: 58px 44px minmax(560px, 1fr) 44px;
+}
+
 .brand-rail {
   grid-row: 1 / 4;
   border-right: 1px solid var(--line);
@@ -201,30 +213,82 @@ main.app-shell {
   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);
-}
+.side-panel {
+  border-color: var(--line);
+  background: var(--panel-bg);
+  padding: 14px;
+  overflow: auto;
+}
+
+.side-panel.collapsed {
+  overflow: hidden;
+  padding: 8px 5px;
+}
+
+.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;
+  border-left: 1px solid var(--line);
+}
+
+.panel-chrome {
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.left-panel .panel-chrome {
+  flex-direction: row-reverse;
+}
+
+.panel-toggle {
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  min-height: 28px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  font-size: 17px;
+  line-height: 1;
+}
+
+.side-panel.collapsed .panel-chrome {
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin: 0;
+}
+
+.side-panel.collapsed .panel-title {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  white-space: nowrap;
+  margin: 10px 0 0;
+  max-height: calc(100vh - 150px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.side-panel.collapsed .panel-body {
+  display: none;
+}
+
+.panel-title {
+  margin: 0 0 10px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 800;
   text-transform: uppercase;
 }
 
@@ -685,12 +749,12 @@ main.app-shell {
   white-space: nowrap;
 }
 
-@media (max-width: 1120px) {
-  body {
-    min-width: 760px;
-  }
-
-  main.app-shell {
+@media (max-width: 840px) {
+  body {
+    min-width: 760px;
+  }
+
+  main.app-shell {
     grid-template-columns: 52px 1fr;
     grid-template-rows: 48px 1fr 30px;
   }

package/editor-web/vite.config.js

@@ -1,13 +1,13 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import path from "node:path";
-
-export default defineConfig({
-  root: path.resolve(import.meta.dirname),
-  base: "./",
-  plugins: [react()],
-  build: {
-    outDir: "../desktop/BuildCorpusEditor/wwwroot",
-    emptyOutDir: true,
-  },
-});
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "node:path";
+
+export default defineConfig({
+  root: path.resolve(import.meta.dirname),
+  base: "./",
+  plugins: [react()],
+  build: {
+    outDir: "../desktop/BuildCorpusEditor/wwwroot",
+    emptyOutDir: true,
+  },
+});

package/examples/build-corpus.config.example.json

@@ -1,21 +1,21 @@
-{
-  "conversion": {
-    "equations": "tex",
-    "images": "assets"
-  },
-  "output": {
-    "out": ".codex/build-corpus/out",
-    "out_same_dir": false
-  },
-  "s3": {
-    "bucket": "build-corpus-assets",
-    "public_base_url": "https://assets.example.com",
-    "prefix": "build-corpus",
-    "endpoint_url": "https://ACCOUNT_ID.r2.cloudflarestorage.com",
-    "region_name": "auto",
-    "access_key_id": "%R2_ACCESS_KEY_ID%",
-    "secret_access_key": "%R2_SECRET_ACCESS_KEY%",
-    "cache_control": "public, max-age=31536000, immutable",
-    "acl": null
-  }
-}
+{
+  "conversion": {
+    "equations": "tex",
+    "images": "assets"
+  },
+  "output": {
+    "out": ".codex/build-corpus/out",
+    "out_same_dir": false
+  },
+  "s3": {
+    "bucket": "build-corpus-assets",
+    "public_base_url": "https://assets.example.com",
+    "prefix": "build-corpus",
+    "endpoint_url": "https://ACCOUNT_ID.r2.cloudflarestorage.com",
+    "region_name": "auto",
+    "access_key_id": "%R2_ACCESS_KEY_ID%",
+    "secret_access_key": "%R2_SECRET_ACCESS_KEY%",
+    "cache_control": "public, max-age=31536000, immutable",
+    "acl": null
+  }
+}