@1agh/maude 0.24.0 → 0.25.0

package/plugins/design/dev-server/client/app.jsx

@@ -3,9 +3,15 @@
 // Renders: file tree, tabs, viewport (iframes), status bar, design-system view, comments.
 // Universal — no project tokens needed; styling lives in client/styles/.
 
-import { useState, useEffect, useRef, useMemo, useCallback, Fragment } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
+// Trusted tool→cursor resolver (shares the single TOOL_CURSORS source with the
+// canvas runtime). canvas-cursors.ts is dependency-free (a type-only Tool
+// import that Bun erases), so this pulls only string constants into the client
+// bundle — no React, no input-router. See the tool-cursor handler below.
+import { resolveToolCursor } from '../canvas-cursors.ts';
+
 const SYSTEM_TAB = '__system__';
 const THEME_STORE = 'mdcc-theme';
 const SHOW_HIDDEN_STORE = 'mdcc-show-hidden';
@@ -41,7 +47,9 @@ function readJsonStore(key, fallback) {
   try {
     const v = localStorage.getItem(key);
     return v ? JSON.parse(v) : fallback;
-  } catch { return fallback; }
+  } catch {
+    return fallback;
+  }
 }
 
 // Section default-open: working sections (project + non-DS canvas groups)
@@ -98,8 +106,8 @@ function canvasUrl(p, cfg, opts) {
   // tokens file. The top-level cfg.tokensCssRel is the legacy default
   // (`system/colors_and_type.css`) and usually doesn't exist post-bootstrap.
   const tokens = specMatch
-    ? (specDsEntry?.tokensCssRel || `system/${specMatch[1]}/colors_and_type.css`)
-    : (ds0?.tokensCssRel || cfg?.tokensCssRel);
+    ? specDsEntry?.tokensCssRel || `system/${specMatch[1]}/colors_and_type.css`
+    : ds0?.tokensCssRel || cfg?.tokensCssRel;
   if (tokens) params.set('tokens', tokens);
   if (cfg?.componentsCssRel) params.set('components', cfg.componentsCssRel);
   if (specMatch) {
@@ -192,7 +200,9 @@ function groupBySidecar(files) {
 function buildTree(paths, stripPrefix) {
   const root = {};
   for (const p of paths) {
-    const stripped = p.startsWith(stripPrefix) ? p.slice(stripPrefix.length).replace(/^\/+/, '') : p;
+    const stripped = p.startsWith(stripPrefix)
+      ? p.slice(stripPrefix.length).replace(/^\/+/, '')
+      : p;
     const parts = stripped.split('/');
     let node = root;
     for (let i = 0; i < parts.length; i++) {
@@ -215,22 +225,28 @@ function filterTree(node, query) {
   const q = query.toLowerCase();
   const out = {};
   let any = false;
-  const dirs = Object.keys(node).filter(k => k !== '_files');
+  const dirs = Object.keys(node).filter((k) => k !== '_files');
   for (const d of dirs) {
     const filtered = filterTree(node[d], query);
-    if (filtered) { out[d] = filtered; any = true; }
+    if (filtered) {
+      out[d] = filtered;
+      any = true;
+    }
   }
   if (node._files) {
-    const files = node._files.filter(f =>
-      f.name.toLowerCase().includes(q) || f.path.toLowerCase().includes(q)
+    const files = node._files.filter(
+      (f) => f.name.toLowerCase().includes(q) || f.path.toLowerCase().includes(q)
     );
-    if (files.length) { out._files = files; any = true; }
+    if (files.length) {
+      out._files = files;
+      any = true;
+    }
   }
   return any ? out : null;
 }
 
 function openCount(comments) {
-  return (comments || []).filter(c => c.status !== 'resolved').length;
+  return (comments || []).filter((c) => c.status !== 'resolved').length;
 }
 
 function timeAgo(iso) {
@@ -249,7 +265,9 @@ function timeAgo(iso) {
 }
 
 function totalCounts(commentsByFile) {
-  let all = 0, open = 0, resolved = 0;
+  let all = 0,
+    open = 0,
+    resolved = 0;
   for (const list of Object.values(commentsByFile || {})) {
     for (const c of list || []) {
       all++;
@@ -264,7 +282,17 @@ function totalCounts(commentsByFile) {
 
 function Icon({ d, size = 14, color }) {
   return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color || 'currentColor'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none' }}>
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color || 'currentColor'}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{ flex: 'none' }}
+    >
       <path d={d} />
     </svg>
   );
@@ -291,9 +319,11 @@ function DirRow({ name, depth, defaultOpen, children }) {
         tabIndex={-1}
         className="tp-row dir"
         style={{ paddingLeft: TREE_INDENT_BASE + depth * TREE_INDENT_STEP + 'px' }}
-        onClick={() => setOpen(v => !v)}
+        onClick={() => setOpen((v) => !v)}
       >
-        <span className="glyph" aria-hidden="true">{open ? '▾' : '▸'}</span>
+        <span className="glyph" aria-hidden="true">
+          {open ? '▾' : '▸'}
+        </span>
         <span className="name">{name}</span>
       </button>
       {open && children}
@@ -322,7 +352,9 @@ function DsFolderRow({ name, dsName, depth, defaultOpen, active, onOpenSystem, c
           aria-label={open ? 'Collapse design system' : 'Expand design system'}
           title={open ? 'Collapse' : 'Expand'}
         >
-          <span className="glyph" aria-hidden="true">{open ? '▾' : '▸'}</span>
+          <span className="glyph" aria-hidden="true">
+            {open ? '▾' : '▸'}
+          </span>
         </button>
         <button
           type="button"
@@ -354,19 +386,38 @@ function FileRow({ file, activePath, onOpen, openCount: oc, depth, kind, sidecar
       aria-selected={isSel}
       aria-disabled={inert ? 'true' : undefined}
       tabIndex={isSel ? 0 : -1}
-      className={'tp-row' + (isSel ? ' sel' : '') + (kind === 'runtime' ? ' muted' : '') + (sidecar ? ' sidecar' : '')}
+      className={
+        'tp-row' +
+        (isSel ? ' sel' : '') +
+        (kind === 'runtime' ? ' muted' : '') +
+        (sidecar ? ' sidecar' : '')
+      }
       style={{ paddingLeft: TREE_INDENT_BASE + depth * TREE_INDENT_STEP + 'px' }}
-      title={file.path + (oc ? ` — ${oc} open` : (inert ? ' (file index only)' : ''))}
-      onClick={() => { if (!inert) onOpen(file.path); }}
+      title={file.path + (oc ? ` — ${oc} open` : inert ? ' (file index only)' : '')}
+      onClick={() => {
+        if (!inert) onOpen(file.path);
+      }}
     >
-      <span className="glyph" aria-hidden="true">{isSel ? '▸' : '·'}</span>
+      <span className="glyph" aria-hidden="true">
+        {isSel ? '▸' : '·'}
+      </span>
       <span className="name">{label}</span>
       {oc > 0 && <span className="badge">{oc}</span>}
     </button>
   );
 }
 
-function CanvasRow({ primary, sidecars, depth, kind, activePath, onOpen, openCount: oc, showHidden, forceOpen }) {
+function CanvasRow({
+  primary,
+  sidecars,
+  depth,
+  kind,
+  activePath,
+  onOpen,
+  openCount: oc,
+  showHidden,
+  forceOpen,
+}) {
   const hasSidecars = sidecars.length > 0;
   const [openState, setOpenState] = useState(false);
   // Sidecars are only revealed when the user opts in via `showHidden` — the
@@ -420,24 +471,39 @@ function CanvasRow({ primary, sidecars, depth, kind, activePath, onOpen, openCou
         <span className="name">{displayName(primary.name)}</span>
         {oc > 0 && <span className="badge">{oc}</span>}
       </button>
-      {open && sidecars.map((sc) => (
-        <FileRow
-          key={sc.path}
-          file={sc}
-          activePath={activePath}
-          onOpen={onOpen}
-          openCount={0}
-          depth={depth + 1}
-          kind={kind}
-          sidecar
-        />
-      ))}
+      {open &&
+        sidecars.map((sc) => (
+          <FileRow
+            key={sc.path}
+            file={sc}
+            activePath={activePath}
+            onOpen={onOpen}
+            openCount={0}
+            depth={depth + 1}
+            kind={kind}
+            sidecar
+          />
+        ))}
     </Fragment>
   );
 }
 
-function Tree({ node, activePath, onOpen, commentsByFile, depth = 1, kind, showHidden, search, dsFolders, activeDsName, onOpenSystem }) {
-  const dirs = Object.keys(node).filter(k => k !== '_files').sort();
+function Tree({
+  node,
+  activePath,
+  onOpen,
+  commentsByFile,
+  depth = 1,
+  kind,
+  showHidden,
+  search,
+  dsFolders,
+  activeDsName,
+  onOpenSystem,
+}) {
+  const dirs = Object.keys(node)
+    .filter((k) => k !== '_files')
+    .sort();
   const files = node._files || [];
   // VS Code-style sidecar grouping. Canvas (`.tsx`/`.html`) becomes the primary
   // row; same-basename non-canvas files (`.meta.json`, `.css`, …) collapse
@@ -456,10 +522,12 @@ function Tree({ node, activePath, onOpen, commentsByFile, depth = 1, kind, showH
   return (
     <Fragment>
       {canvases.map((entry) => {
-        const forceOpen = hasSearch && entry.sidecars.some((sc) => {
-          const q = search.toLowerCase();
-          return sc.name.toLowerCase().includes(q) || sc.path.toLowerCase().includes(q);
-        });
+        const forceOpen =
+          hasSearch &&
+          entry.sidecars.some((sc) => {
+            const q = search.toLowerCase();
+            return sc.name.toLowerCase().includes(q) || sc.path.toLowerCase().includes(q);
+          });
         return (
           <CanvasRow
             key={entry.primary.path}
@@ -475,18 +543,19 @@ function Tree({ node, activePath, onOpen, commentsByFile, depth = 1, kind, showH
           />
         );
       })}
-      {showHidden && orphans.map((entry) => (
-        <FileRow
-          key={entry.primary.path}
-          file={entry.primary}
-          activePath={activePath}
-          onOpen={onOpen}
-          openCount={openCount(commentsByFile[entry.primary.path])}
-          depth={depth}
-          kind={kind}
-        />
-      ))}
-      {dirs.map(d => {
+      {showHidden &&
+        orphans.map((entry) => (
+          <FileRow
+            key={entry.primary.path}
+            file={entry.primary}
+            activePath={activePath}
+            onOpen={onOpen}
+            openCount={openCount(commentsByFile[entry.primary.path])}
+            depth={depth}
+            kind={kind}
+          />
+        ))}
+      {dirs.map((d) => {
         const dsMatch = dsFolderByName?.get(d);
         const childTree = (
           <Tree
@@ -531,12 +600,12 @@ function Tree({ node, activePath, onOpen, commentsByFile, depth = 1, kind, showH
 // project / DS identity; the mock keeps these tight (1 line). Labels are
 // keyed by the server-provided `kind` (PROJECT / DS / UI / RUNTIME).
 const SECTION_META = {
-  project:  { title: 'PROJECT',                pillFromCount: false },
+  project: { title: 'PROJECT', pillFromCount: false },
   // Design-system group: pill shows the number of DSes (one row per DS folder
   // inside). Computed in Sidebar from `g.dsFolders.length`.
-  ds:       { title: 'DESIGN SYSTEM',          pillFromDsCount: true },
-  canvas:   { title: 'UI CANVASES',            pillFromCount: true },
-  runtime:  { title: 'RUNTIME · GITIGNORED',   pillFromCount: true },
+  ds: { title: 'DESIGN SYSTEM', pillFromDsCount: true },
+  canvas: { title: 'UI CANVASES', pillFromCount: true },
+  runtime: { title: 'RUNTIME · GITIGNORED', pillFromCount: true },
 };
 
 function sectionMetaFor(g) {
@@ -544,14 +613,27 @@ function sectionMetaFor(g) {
   if (g.kind === 'runtime') return SECTION_META.runtime;
   // canvas-kind groups: "Design system" → ds, anything else → canvas label
   if (g.label === 'Design system') return SECTION_META.ds;
-  if (g.label === 'UI kit')        return SECTION_META.canvas;
+  if (g.label === 'UI kit') return SECTION_META.canvas;
   return { title: g.label.toUpperCase(), pillFromCount: true };
 }
 
-function Sidebar({ groups, activePath, activeDsName, onOpen, onOpenSystem, wsConnected, search, setSearch, commentsByFile, showHidden, sectionsExpanded, onToggleSection }) {
+function Sidebar({
+  groups,
+  activePath,
+  activeDsName,
+  onOpen,
+  onOpenSystem,
+  wsConnected,
+  search,
+  setSearch,
+  commentsByFile,
+  showHidden,
+  sectionsExpanded,
+  onToggleSection,
+}) {
   const filteredGroups = useMemo(() => {
     if (!search) return groups;
-    return groups.map(g => ({ ...g, tree: filterTree(g.tree, search), filtered: !!search }));
+    return groups.map((g) => ({ ...g, tree: filterTree(g.tree, search), filtered: !!search }));
   }, [groups, search]);
 
   // Mock uses `42 / 42` — total openable canvases, not every listed file.
@@ -564,7 +646,8 @@ function Sidebar({ groups, activePath, activeDsName, onOpen, onOpenSystem, wsCon
   }, [groups]);
   const htmlShown = useMemo(() => {
     let total = 0;
-    for (const g of filteredGroups) for (const p of g.paths || []) if (CANVAS_EXT_RE.test(p)) total++;
+    for (const g of filteredGroups)
+      for (const p of g.paths || []) if (CANVAS_EXT_RE.test(p)) total++;
     return total;
   }, [filteredGroups]);
 
@@ -584,18 +667,27 @@ function Sidebar({ groups, activePath, activeDsName, onOpen, onOpenSystem, wsCon
           type="search"
           placeholder="filter (⌘F)"
           value={search}
-          onChange={e => setSearch(e.target.value)}
+          onChange={(e) => setSearch(e.target.value)}
           aria-label="Filter files"
         />
         {search ? (
-          <button className="search-clear" onClick={() => setSearch('')} title="Clear (Esc)" aria-label="Clear search">×</button>
+          <button
+            className="search-clear"
+            onClick={() => setSearch('')}
+            title="Clear (Esc)"
+            aria-label="Clear search"
+          >
+            ×
+          </button>
         ) : (
-          <span className="search-kbd" aria-hidden="true">/</span>
+          <span className="search-kbd" aria-hidden="true">
+            /
+          </span>
         )}
       </div>
 
       <div className="tree-panel-body" role="tree" aria-label="Project file tree">
-        {filteredGroups.map(g => {
+        {filteredGroups.map((g) => {
           // Hide gitignored runtime / orphan-only project sections by default.
           // Active search overrides — if the user typed a query, they want hits
           // wherever they live.
@@ -604,9 +696,10 @@ function Sidebar({ groups, activePath, activeDsName, onOpen, onOpenSystem, wsCon
           // Counter pill counts canvases only — sidecars + orphans inflate the
           // raw `paths.length` and the FILES header already filters this way.
           const canvasCount = (g.paths || []).filter((p) => CANVAS_EXT_RE.test(p)).length;
-          const pill = meta.pill
-            || (meta.pillFromDsCount ? String(g.dsFolders?.length || 0) : null)
-            || (meta.pillFromCount ? String(canvasCount || g.paths?.length || 0) : null);
+          const pill =
+            meta.pill ||
+            (meta.pillFromDsCount ? String(g.dsFolders?.length || 0) : null) ||
+            (meta.pillFromCount ? String(canvasCount || g.paths?.length || 0) : null);
           const hasItems = g.tree && Object.keys(g.tree).length > 0;
           const isDs = g.label === 'Design system';
           const isProject = g.kind === 'project';
@@ -628,29 +721,30 @@ function Sidebar({ groups, activePath, activeDsName, onOpen, onOpenSystem, wsCon
                 aria-expanded={sectionOpen}
                 title={sectionOpen ? 'Collapse section' : 'Expand section'}
               >
-                <span className="chev" aria-hidden="true">{chev}</span>
+                <span className="chev" aria-hidden="true">
+                  {chev}
+                </span>
                 <span className="section-label">{meta.title}</span>
                 {pill && <span className="pill">{pill}</span>}
               </button>
-              {sectionOpen && (hasItems ? (
-                <Tree
-                  node={g.tree}
-                  activePath={activePath}
-                  onOpen={onOpen}
-                  commentsByFile={commentsByFile}
-                  depth={1}
-                  kind={g.kind}
-                  showHidden={showHidden}
-                  search={search}
-                  dsFolders={g.dsFolders}
-                  activeDsName={activeDsName}
-                  onOpenSystem={isDs ? onOpenSystem : undefined}
-                />
-              ) : (
-                <div className="tp-empty">
-                  {search ? 'No matches.' : 'Empty.'}
-                </div>
-              ))}
+              {sectionOpen &&
+                (hasItems ? (
+                  <Tree
+                    node={g.tree}
+                    activePath={activePath}
+                    onOpen={onOpen}
+                    commentsByFile={commentsByFile}
+                    depth={1}
+                    kind={g.kind}
+                    showHidden={showHidden}
+                    search={search}
+                    dsFolders={g.dsFolders}
+                    activeDsName={activeDsName}
+                    onOpenSystem={isDs ? onOpenSystem : undefined}
+                  />
+                ) : (
+                  <div className="tp-empty">{search ? 'No matches.' : 'Empty.'}</div>
+                ))}
             </Fragment>
           );
         })}
@@ -664,7 +758,9 @@ function Sidebar({ groups, activePath, activeDsName, onOpen, onOpenSystem, wsCon
 function HelpModal({ open, onClose }) {
   useEffect(() => {
     if (!open) return;
-    function onKey(e) { if (e.key === 'Escape') onClose(); }
+    function onKey(e) {
+      if (e.key === 'Escape') onClose();
+    }
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
   }, [open, onClose]);
@@ -673,112 +769,286 @@ function HelpModal({ open, onClose }) {
     <div
       className="help-modal-backdrop"
       role="presentation"
-      onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
     >
-      <div className="help-modal" role="dialog" aria-modal="true" aria-labelledby="help-modal-title">
+      <div
+        className="help-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="help-modal-title"
+      >
         <header className="help-modal-hd">
-          <span className="title" id="help-modal-title">Help · shortcuts &amp; commands</span>
+          <span className="title" id="help-modal-title">
+            Help · shortcuts &amp; commands
+          </span>
           <span className="sku">MDCC-DEV-SRV / v{MDCC_VERSION}</span>
-          <button type="button" className="help-modal-close" aria-label="Close (Esc)" onClick={onClose}>×</button>
+          <button
+            type="button"
+            className="help-modal-close"
+            aria-label="Close (Esc)"
+            onClick={onClose}
+          >
+            ×
+          </button>
         </header>
         <div className="help-modal-body">
           <details open>
             <summary>Canvas selection &amp; tools</summary>
-        <ul>
-          <li><kbd>V</kbd> <span>move tool — Cmd+click to select, Cmd+Shift to multi</span></li>
-          <li><kbd>H</kbd> <span>hand tool — bare drag pans (no Space needed)</span></li>
-          <li><kbd>C</kbd> <span>comment tool — hover paints, click drops a pin</span></li>
-          <li><kbd>⌘</kbd> + hover <span>preview deepest element under cursor</span></li>
-          <li><kbd>⌘</kbd> + click <span>select that element (replace)</span></li>
-          <li><kbd>⌘⇧</kbd> + click <span>add deepest to selection (multi)</span></li>
-          <li>right-click <span>context menu (Copy CSS / Fit / Reset...)</span></li>
-          <li><kbd>Esc</kbd> in canvas <span>clear selection + close menu</span></li>
-        </ul>
-      </details>
-      <details>
-        <summary>Annotation tools</summary>
-        <ul>
-          <li><kbd>B</kbd> <span>pen — freehand stroke</span></li>
-          <li><kbd>R</kbd> <span>rectangle — drag to define corners</span></li>
-          <li><kbd>O</kbd> <span>ellipse — drag from center outward</span></li>
-          <li><kbd>A</kbd> <span>arrow — drag tail → tip</span></li>
-          <li><kbd>E</kbd> <span>eraser — click or drag over strokes to remove</span></li>
-          <li><kbd>V</kbd> + click stroke <span>select annotation (Shift+click to multi)</span></li>
-          <li><kbd>V</kbd> + drag empty <span>marquee-select strokes that overlap</span></li>
-          <li>double-click rect/ellipse <span>add text inside the shape</span></li>
-          <li>arrow keys <span>nudge selected annotation 1 unit (Shift = 10)</span></li>
-          <li><kbd>Backspace</kbd> <span>delete selected annotations</span></li>
-          <li><kbd>⇧P</kbd> <span>presentation — hide annotations for clean screenshot</span></li>
-        </ul>
-      </details>
-      <details>
-        <summary>Tabs &amp; canvas</summary>
-        <ul>
-          <li>click in tree <span>open tab</span></li>
-          <li><kbd>×</kbd> on tab <span>close tab</span></li>
-          <li><kbd>⌘R</kbd> <span>reload iframe</span></li>
-          <li><kbd>/</kbd> <span>focus search</span></li>
-          <li><kbd>⌘⇧M</kbd> <span>toggle comments panel</span></li>
-        </ul>
-      </details>
-      <details>
-        <summary>Slash commands</summary>
-        <ul className="cmds">
-          <li><code>/design:edit "<i>feedback</i>"</code><span>edit + 4-iter multi-axis loop</span></li>
-          <li><code>/design:edit "<i>…</i>" --perfect</code><span>8-iter polish (4.5/5 aspiration)</span></li>
-          <li><code>/design:edit "<i>…</i>" --no-critic</code><span>raw edit, skip loop</span></li>
-          <li><code>/design:edit "<i>…</i>" --opt-out=<i>scope</i></code><span>override DS scope (palette/aesthetic/full)</span></li>
-          <li><code>/design:new "<i>Name</i>" "<i>brief</i>"</code><span>scaffold canvas</span></li>
-          <li><code>/design:new "<i>…</i>" --opt-out=aesthetic</code><span>scaffold off-system canvas (gradients/radii/type free)</span></li>
-          <li><code>/design:critic</code><span>review panel (routed)</span></li>
-          <li><code>/design:critic --all</code><span>10-critic sweep</span></li>
-          <li><code>/design:critic --agent signature-moment-critic</code><span>aspiration axis only</span></li>
-          <li><code>/design:rollback</code><span>undo last edit</span></li>
-          <li><code>/design:screenshot</code><span>capture canvas</span></li>
-          <li><code>/design:setup-docs</code><span>refresh README + INDEX</span></li>
-          <li><code>/design:handoff</code><span>migrate to apps/</span></li>
-        </ul>
-      </details>
-      <details>
-        <summary>Opt-out scope</summary>
-        <ul>
-          <li><strong>palette</strong> <span>default — tokens + rootClass kept; local namespace overrides colors only. DS aesthetic still enforced.</span></li>
-          <li><strong>aesthetic</strong> <span>palette + gradients/off-ladder radii/alt type/decorative SVG flags allowed.</span></li>
-          <li><strong>full</strong> <span>DS treated as advisory. Type/radii/aesthetic up to canvas.</span></li>
-          <li><em>A11y enforced at every scope</em> <span>contrast, focus, semantics, motion, touch targets — never relaxed.</span></li>
-          <li>Persisted on canvas's <code>.meta.json</code> <code>opt_out_scope</code> field — subsequent <code>/design:edit</code> iterations inherit.</li>
-          <li>Inferred from brief ("modern", "vibrant", "off-system") with one-shot AskUserQuestion before iter-1 critics fire.</li>
-        </ul>
-      </details>
-      <details>
-        <summary>Auto-critic loop</summary>
-        <ul>
-          <li><strong>Default</strong> <span>4 iter · aspiration ≥ 4.0 · stable-but-bland exit</span></li>
-          <li><strong>--perfect</strong> <span>8 iter · aspiration ≥ 4.5 · broader divergence tolerance</span></li>
-          <li><strong>--perfect --all</strong> <span>every critic incl. aspiration · portfolio-grade</span></li>
-          <li>Exit: <code>solid</code> · <code>stable-but-bland</code> · <code>max-reached</code> · <code>divergent</code></li>
-          <li><em>stable-but-bland</em> = correctness clean, aspiration plateau — surface for review with lowest 2 axes named</li>
-          <li>When <code>opt_out_scope ∈ &#123;aesthetic, full&#125;</code>: iter-1 checkpoint fires — pick (a) run loop, (b) skip auto-loop and review iter 1, (c) a11y-only check.</li>
-        </ul>
-      </details>
-      <details>
-        <summary>Pin-to-element flow</summary>
-        <ol>
-          <li>Open canvas tab</li>
-          <li><kbd>⌘</kbd>+click element</li>
-          <li>Status bar shows ● selector</li>
-          <li>Run <code>/design:edit "<i>change just this</i>"</code></li>
-          <li>Reload iframe (<kbd>⌘R</kbd>)</li>
-        </ol>
-      </details>
+            <ul>
+              <li>
+                <kbd>V</kbd> <span>move tool — Cmd+click to select, Cmd+Shift to multi</span>
+              </li>
+              <li>
+                <kbd>H</kbd> <span>hand tool — bare drag pans (no Space needed)</span>
+              </li>
+              <li>
+                <kbd>C</kbd> <span>comment tool — hover paints, click drops a pin</span>
+              </li>
+              <li>
+                <kbd>⌘</kbd> + hover <span>preview deepest element under cursor</span>
+              </li>
+              <li>
+                <kbd>⌘</kbd> + click <span>select that element (replace)</span>
+              </li>
+              <li>
+                <kbd>⌘⇧</kbd> + click <span>add deepest to selection (multi)</span>
+              </li>
+              <li>
+                right-click <span>context menu (Copy CSS / Fit / Reset...)</span>
+              </li>
+              <li>
+                <kbd>Esc</kbd> in canvas <span>clear selection + close menu</span>
+              </li>
+            </ul>
+          </details>
+          <details>
+            <summary>Annotation tools</summary>
+            <ul>
+              <li>
+                <kbd>B</kbd> <span>pen — freehand stroke</span>
+              </li>
+              <li>
+                <kbd>R</kbd> <span>rectangle — drag to define corners</span>
+              </li>
+              <li>
+                <kbd>O</kbd> <span>ellipse — drag from center outward</span>
+              </li>
+              <li>
+                <kbd>A</kbd> <span>arrow — drag tail → tip</span>
+              </li>
+              <li>
+                <kbd>E</kbd> <span>eraser — click or drag over strokes to remove</span>
+              </li>
+              <li>
+                <kbd>V</kbd> + click stroke <span>select annotation (Shift+click to multi)</span>
+              </li>
+              <li>
+                <kbd>V</kbd> + drag empty <span>marquee-select strokes that overlap</span>
+              </li>
+              <li>
+                double-click rect/ellipse <span>add text inside the shape</span>
+              </li>
+              <li>
+                arrow keys <span>nudge selected annotation 1 unit (Shift = 10)</span>
+              </li>
+              <li>
+                <kbd>Backspace</kbd> <span>delete selected annotations</span>
+              </li>
+              <li>
+                <kbd>⇧P</kbd> <span>presentation — hide annotations for clean screenshot</span>
+              </li>
+            </ul>
+          </details>
+          <details>
+            <summary>Tabs &amp; canvas</summary>
+            <ul>
+              <li>
+                click in tree <span>open tab</span>
+              </li>
+              <li>
+                <kbd>×</kbd> on tab <span>close tab</span>
+              </li>
+              <li>
+                <kbd>⌘R</kbd> <span>reload iframe</span>
+              </li>
+              <li>
+                <kbd>/</kbd> <span>focus search</span>
+              </li>
+              <li>
+                <kbd>⌘⇧M</kbd> <span>toggle comments panel</span>
+              </li>
+            </ul>
+          </details>
+          <details>
+            <summary>Slash commands</summary>
+            <ul className="cmds">
+              <li>
+                <code>
+                  /design:edit "<i>feedback</i>"
+                </code>
+                <span>edit + 4-iter multi-axis loop</span>
+              </li>
+              <li>
+                <code>
+                  /design:edit "<i>…</i>" --perfect
+                </code>
+                <span>8-iter polish (4.5/5 aspiration)</span>
+              </li>
+              <li>
+                <code>
+                  /design:edit "<i>…</i>" --no-critic
+                </code>
+                <span>raw edit, skip loop</span>
+              </li>
+              <li>
+                <code>
+                  /design:edit "<i>…</i>" --opt-out=<i>scope</i>
+                </code>
+                <span>override DS scope (palette/aesthetic/full)</span>
+              </li>
+              <li>
+                <code>
+                  /design:new "<i>Name</i>" "<i>brief</i>"
+                </code>
+                <span>scaffold canvas</span>
+              </li>
+              <li>
+                <code>
+                  /design:new "<i>…</i>" --opt-out=aesthetic
+                </code>
+                <span>scaffold off-system canvas (gradients/radii/type free)</span>
+              </li>
+              <li>
+                <code>/design:critic</code>
+                <span>review panel (routed)</span>
+              </li>
+              <li>
+                <code>/design:critic --all</code>
+                <span>10-critic sweep</span>
+              </li>
+              <li>
+                <code>/design:critic --agent signature-moment-critic</code>
+                <span>aspiration axis only</span>
+              </li>
+              <li>
+                <code>/design:rollback</code>
+                <span>undo last edit</span>
+              </li>
+              <li>
+                <code>/design:screenshot</code>
+                <span>capture canvas</span>
+              </li>
+              <li>
+                <code>/design:setup-docs</code>
+                <span>refresh README + INDEX</span>
+              </li>
+              <li>
+                <code>/design:handoff</code>
+                <span>migrate to apps/</span>
+              </li>
+            </ul>
+          </details>
+          <details>
+            <summary>Opt-out scope</summary>
+            <ul>
+              <li>
+                <strong>palette</strong>{' '}
+                <span>
+                  default — tokens + rootClass kept; local namespace overrides colors only. DS
+                  aesthetic still enforced.
+                </span>
+              </li>
+              <li>
+                <strong>aesthetic</strong>{' '}
+                <span>
+                  palette + gradients/off-ladder radii/alt type/decorative SVG flags allowed.
+                </span>
+              </li>
+              <li>
+                <strong>full</strong>{' '}
+                <span>DS treated as advisory. Type/radii/aesthetic up to canvas.</span>
+              </li>
+              <li>
+                <em>A11y enforced at every scope</em>{' '}
+                <span>contrast, focus, semantics, motion, touch targets — never relaxed.</span>
+              </li>
+              <li>
+                Persisted on canvas's <code>.meta.json</code> <code>opt_out_scope</code> field —
+                subsequent <code>/design:edit</code> iterations inherit.
+              </li>
+              <li>
+                Inferred from brief ("modern", "vibrant", "off-system") with one-shot
+                AskUserQuestion before iter-1 critics fire.
+              </li>
+            </ul>
+          </details>
+          <details>
+            <summary>Auto-critic loop</summary>
+            <ul>
+              <li>
+                <strong>Default</strong>{' '}
+                <span>4 iter · aspiration ≥ 4.0 · stable-but-bland exit</span>
+              </li>
+              <li>
+                <strong>--perfect</strong>{' '}
+                <span>8 iter · aspiration ≥ 4.5 · broader divergence tolerance</span>
+              </li>
+              <li>
+                <strong>--perfect --all</strong>{' '}
+                <span>every critic incl. aspiration · portfolio-grade</span>
+              </li>
+              <li>
+                Exit: <code>solid</code> · <code>stable-but-bland</code> · <code>max-reached</code>{' '}
+                · <code>divergent</code>
+              </li>
+              <li>
+                <em>stable-but-bland</em> = correctness clean, aspiration plateau — surface for
+                review with lowest 2 axes named
+              </li>
+              <li>
+                When <code>opt_out_scope ∈ &#123;aesthetic, full&#125;</code>: iter-1 checkpoint
+                fires — pick (a) run loop, (b) skip auto-loop and review iter 1, (c) a11y-only
+                check.
+              </li>
+            </ul>
+          </details>
+          <details>
+            <summary>Pin-to-element flow</summary>
+            <ol>
+              <li>Open canvas tab</li>
+              <li>
+                <kbd>⌘</kbd>+click element
+              </li>
+              <li>Status bar shows ● selector</li>
+              <li>
+                Run{' '}
+                <code>
+                  /design:edit "<i>change just this</i>"
+                </code>
+              </li>
+              <li>
+                Reload iframe (<kbd>⌘R</kbd>)
+              </li>
+            </ol>
+          </details>
           <details>
             <summary>Comments</summary>
             <ol>
-              <li><kbd>⌘</kbd>+click element, then <kbd>⌘C</kbd> <span>or ⌘⇧+click</span></li>
+              <li>
+                <kbd>⌘</kbd>+click element, then <kbd>⌘C</kbd> <span>or ⌘⇧+click</span>
+              </li>
               <li>Numbered pin appears on canvas</li>
-              <li><kbd>⌘⇧M</kbd> <span>opens panel — All / Open / Resolved</span></li>
-              <li>Click row in panel <span>jumps to that file + pin</span></li>
-              <li>Claude reads <code>_comments/&lt;slug&gt;.json</code> on next <code>/design</code></li>
+              <li>
+                <kbd>⌘⇧M</kbd> <span>opens panel — All / Open / Resolved</span>
+              </li>
+              <li>
+                Click row in panel <span>jumps to that file + pin</span>
+              </li>
+              <li>
+                Claude reads <code>_comments/&lt;slug&gt;.json</code> on next <code>/design</code>
+              </li>
             </ol>
           </details>
         </div>
@@ -799,7 +1069,9 @@ const MENU_NAMES = ['File', 'Edit', 'View', 'Selection', 'Tools', 'Help'];
 
 function ViewDropdown({ panels, onToggle, onClose }) {
   useEffect(() => {
-    function onKey(e) { if (e.key === 'Escape') onClose(); }
+    function onKey(e) {
+      if (e.key === 'Escape') onClose();
+    }
     function onDocClick(e) {
       if (!e.target.closest('.mb-dropdown, .mb-menu')) onClose();
     }
@@ -814,32 +1086,39 @@ function ViewDropdown({ panels, onToggle, onClose }) {
   return (
     <div className="mb-dropdown" role="menu" aria-label="View" style={{ left: '146px' }}>
       <div className="mb-dd-hd">Panels</div>
-      {panels.map(p => (
+      {panels.map((p) => (
         <button
           key={p.id}
           type="button"
           role="menuitem"
           className={'mb-dd-item' + (p.checked ? ' active' : '')}
           aria-disabled={p.disabled ? 'true' : undefined}
-          onClick={() => { if (!p.disabled) { onToggle(p.id); onClose(); } }}
+          onClick={() => {
+            if (!p.disabled) {
+              onToggle(p.id);
+              onClose();
+            }
+          }}
         >
           <span className="lbl">
             <span className="check">{p.checked ? '✓' : ''}</span>
             <span>{p.label}</span>
           </span>
-          {p.phase
-            ? <span className="phase-tag">{p.phase}</span>
-            : <span className="shortcut">{p.shortcut || ''}</span>}
+          {p.phase ? (
+            <span className="phase-tag">{p.phase}</span>
+          ) : (
+            <span className="shortcut">{p.shortcut || ''}</span>
+          )}
         </button>
       ))}
       <div className="mb-dd-sep" />
       <div className="mb-dd-hd">Zoom</div>
       {[
-        { label: 'Zoom In',       shortcut: '⌘ +' },
-        { label: 'Zoom Out',      shortcut: '⌘ −' },
+        { label: 'Zoom In', shortcut: '⌘ +' },
+        { label: 'Zoom Out', shortcut: '⌘ −' },
         { label: 'Fit to Screen', shortcut: '⌘ 0' },
         { label: 'Actual Size · 100 %', shortcut: '⌥ ⌘ 0' },
-      ].map(z => (
+      ].map((z) => (
         <button
           key={z.label}
           type="button"
@@ -847,7 +1126,10 @@ function ViewDropdown({ panels, onToggle, onClose }) {
           className="mb-dd-item"
           aria-disabled="true"
         >
-          <span className="lbl"><span className="check" /><span>{z.label}</span></span>
+          <span className="lbl">
+            <span className="check" />
+            <span>{z.label}</span>
+          </span>
           <span className="phase-tag">Phase 4</span>
         </button>
       ))}
@@ -860,7 +1142,9 @@ function ViewDropdown({ panels, onToggle, onClose }) {
 
 function SelectionDropdown({ onAction, onClose }) {
   useEffect(() => {
-    function onKey(e) { if (e.key === 'Escape') onClose(); }
+    function onKey(e) {
+      if (e.key === 'Escape') onClose();
+    }
     function onDocClick(e) {
       if (!e.target.closest('.mb-dropdown, .mb-menu')) onClose();
     }
@@ -872,20 +1156,26 @@ function SelectionDropdown({ onAction, onClose }) {
     };
   }, [onClose]);
   const items = [
-    { id: 'deselect-all',          label: 'Deselect all',          shortcut: 'Esc' },
+    { id: 'deselect-all', label: 'Deselect all', shortcut: 'Esc' },
     { id: 'select-all-annotations', label: 'Select all annotations', shortcut: '⌘ ⇧ A' },
   ];
   return (
     <div className="mb-dropdown" role="menu" aria-label="Selection" style={{ left: '195px' }}>
-      {items.map(it => (
+      {items.map((it) => (
         <button
           key={it.id}
           type="button"
           role="menuitem"
           className="mb-dd-item"
-          onClick={() => { onAction(it.id); onClose(); }}
+          onClick={() => {
+            onAction(it.id);
+            onClose();
+          }}
         >
-          <span className="lbl"><span className="check" /><span>{it.label}</span></span>
+          <span className="lbl">
+            <span className="check" />
+            <span>{it.label}</span>
+          </span>
           <span className="shortcut">{it.shortcut}</span>
         </button>
       ))}
@@ -895,7 +1185,9 @@ function SelectionDropdown({ onAction, onClose }) {
 
 function ToolsDropdown({ onAction, onClose }) {
   useEffect(() => {
-    function onKey(e) { if (e.key === 'Escape') onClose(); }
+    function onKey(e) {
+      if (e.key === 'Escape') onClose();
+    }
     function onDocClick(e) {
       if (!e.target.closest('.mb-dropdown, .mb-menu')) onClose();
     }
@@ -910,28 +1202,34 @@ function ToolsDropdown({ onAction, onClose }) {
   // kept in sync by hand because the menubar lives in the dev-server shell
   // (no shared bundle with the canvas iframes).
   const tools = [
-    { id: 'move',    label: 'Move',    shortcut: 'V' },
-    { id: 'hand',    label: 'Hand',    shortcut: 'H' },
+    { id: 'move', label: 'Move', shortcut: 'V' },
+    { id: 'hand', label: 'Hand', shortcut: 'H' },
     { id: 'comment', label: 'Comment', shortcut: 'C' },
-    { id: 'pen',     label: 'Pen',     shortcut: 'B' },
-    { id: 'rect',    label: 'Rect',    shortcut: 'R' },
+    { id: 'pen', label: 'Pen', shortcut: 'B' },
+    { id: 'rect', label: 'Rect', shortcut: 'R' },
     { id: 'ellipse', label: 'Ellipse', shortcut: 'O' },
-    { id: 'sticky',  label: 'Sticky',  shortcut: 'N' },
-    { id: 'arrow',   label: 'Arrow',   shortcut: 'A' },
-    { id: 'text',    label: 'Text',    shortcut: 'T' },
-    { id: 'eraser',  label: 'Eraser',  shortcut: 'E' },
+    { id: 'sticky', label: 'Sticky', shortcut: 'N' },
+    { id: 'arrow', label: 'Arrow', shortcut: 'A' },
+    { id: 'text', label: 'Text', shortcut: 'T' },
+    { id: 'eraser', label: 'Eraser', shortcut: 'E' },
   ];
   return (
     <div className="mb-dropdown" role="menu" aria-label="Tools" style={{ left: '253px' }}>
-      {tools.map(t => (
+      {tools.map((t) => (
         <button
           key={t.id}
           type="button"
           role="menuitem"
           className="mb-dd-item"
-          onClick={() => { onAction(t.id); onClose(); }}
+          onClick={() => {
+            onAction(t.id);
+            onClose();
+          }}
         >
-          <span className="lbl"><span className="check" /><span>{t.label}</span></span>
+          <span className="lbl">
+            <span className="check" />
+            <span>{t.label}</span>
+          </span>
           <span className="shortcut">{t.shortcut}</span>
         </button>
       ))}
@@ -939,21 +1237,62 @@ function ToolsDropdown({ onAction, onClose }) {
   );
 }
 
-function Menubar({ activePath, project, tabsCount, openMenu, setOpenMenu, commentsPanelOpen, onToggleComments, onOpenSystem, sidebarOpen, onToggleSidebar, showHidden, onToggleShowHidden, onOpenHelp, annotationsVisible, onToggleAnnotations, postToActiveCanvas }) {
+function Menubar({
+  activePath,
+  project,
+  tabsCount,
+  openMenu,
+  setOpenMenu,
+  commentsPanelOpen,
+  onToggleComments,
+  onOpenSystem,
+  sidebarOpen,
+  onToggleSidebar,
+  showHidden,
+  onToggleShowHidden,
+  onOpenHelp,
+  annotationsVisible,
+  onToggleAnnotations,
+  postToActiveCanvas,
+}) {
   const isSystem = activePath === SYSTEM_TAB;
-  const stamp = isSystem ? 'SYSTEM' : (activePath ? 'CANVAS' : 'IDLE');
-  const fileLabel = isSystem
-    ? <b>design system</b>
-    : (activePath ? <>{activePath.split('/').slice(0, -1).join('/')}/<b>{displayName(basename(activePath))}</b></> : <span style={{ color: 'var(--u-fg-3)' }}>no canvas open</span>);
+  const stamp = isSystem ? 'SYSTEM' : activePath ? 'CANVAS' : 'IDLE';
+  const fileLabel = isSystem ? (
+    <b>design system</b>
+  ) : activePath ? (
+    <>
+      {activePath.split('/').slice(0, -1).join('/')}/<b>{displayName(basename(activePath))}</b>
+    </>
+  ) : (
+    <span style={{ color: 'var(--u-fg-3)' }}>no canvas open</span>
+  );
 
   const panels = [
-    { id: 'tree',     label: 'Project Tree',         shortcut: 'T',     checked: sidebarOpen,        disabled: false },
-    { id: 'comments', label: 'Comments Sidebar',     shortcut: '⌘ ⇧ M', checked: commentsPanelOpen,  disabled: false },
-    { id: 'hidden',   label: 'Show hidden files',    shortcut: 'H',     checked: showHidden,         disabled: false },
-    { id: 'layers',     label: 'Layers Panel',       phase: 'Phase 12', disabled: true },
-    { id: 'inspector',  label: 'Inspector',          phase: 'Phase 12', disabled: true },
-    { id: 'annotate',   label: 'Annotations',        shortcut: '⇧ P',   checked: annotationsVisible, disabled: false },
-    { id: 'present',    label: 'Presentation Mode',  phase: 'Phase 6',  disabled: true },
+    { id: 'tree', label: 'Project Tree', shortcut: 'T', checked: sidebarOpen, disabled: false },
+    {
+      id: 'comments',
+      label: 'Comments Sidebar',
+      shortcut: '⌘ ⇧ M',
+      checked: commentsPanelOpen,
+      disabled: false,
+    },
+    {
+      id: 'hidden',
+      label: 'Show hidden files',
+      shortcut: 'H',
+      checked: showHidden,
+      disabled: false,
+    },
+    { id: 'layers', label: 'Layers Panel', phase: 'Phase 12', disabled: true },
+    { id: 'inspector', label: 'Inspector', phase: 'Phase 12', disabled: true },
+    {
+      id: 'annotate',
+      label: 'Annotations',
+      shortcut: '⇧ P',
+      checked: annotationsVisible,
+      disabled: false,
+    },
+    { id: 'present', label: 'Presentation Mode', phase: 'Phase 6', disabled: true },
   ];
 
   function onMenuClick(key) {
@@ -972,7 +1311,7 @@ function Menubar({ activePath, project, tabsCount, openMenu, setOpenMenu, commen
         <span>maude</span>
       </span>
       <nav className="mb-menus" aria-label="Application menus">
-        {MENU_NAMES.map(name => {
+        {MENU_NAMES.map((name) => {
           const key = name.toLowerCase();
           const hasDropdown = key === 'view' || key === 'selection' || key === 'tools';
           const interactive = hasDropdown || key === 'help';
@@ -997,7 +1336,7 @@ function Menubar({ activePath, project, tabsCount, openMenu, setOpenMenu, commen
       {openMenu === 'view' && (
         <ViewDropdown
           panels={panels}
-          onToggle={id => {
+          onToggle={(id) => {
             if (id === 'tree') onToggleSidebar();
             else if (id === 'comments') onToggleComments();
             else if (id === 'hidden') onToggleShowHidden();
@@ -1010,7 +1349,8 @@ function Menubar({ activePath, project, tabsCount, openMenu, setOpenMenu, commen
         <SelectionDropdown
           onAction={(id) => {
             if (id === 'deselect-all') postToActiveCanvas({ dgn: 'selection-clear' });
-            else if (id === 'select-all-annotations') postToActiveCanvas({ dgn: 'annotation-select-all' });
+            else if (id === 'select-all-annotations')
+              postToActiveCanvas({ dgn: 'annotation-select-all' });
           }}
           onClose={() => setOpenMenu(null)}
         />
@@ -1024,13 +1364,21 @@ function Menubar({ activePath, project, tabsCount, openMenu, setOpenMenu, commen
       <div className="mb-spacer" />
       <div className="mb-status">
         <span className="cv-stamp">{stamp}</span>
-        <span className="file" title={activePath || ''}>{fileLabel}</span>
+        <span className="file" title={activePath || ''}>
+          {fileLabel}
+        </span>
         <span className="sep" />
-        <span><span className="accent-dot">●</span> <b>{tabsCount}</b> ARTBOARDS</span>
+        <span>
+          <span className="accent-dot">●</span> <b>{tabsCount}</b> ARTBOARDS
+        </span>
         <span className="sep" />
-        <span title="Pan/zoom in Phase 4">ZOOM <b>100%</b></span>
+        <span title="Pan/zoom in Phase 4">
+          ZOOM <b>100%</b>
+        </span>
         <span className="sep" />
-        <span className="ok"><b>{project || 'MDCC'}</b></span>
+        <span className="ok">
+          <b>{project || 'MDCC'}</b>
+        </span>
       </div>
     </header>
   );
@@ -1039,7 +1387,8 @@ function Menubar({ activePath, project, tabsCount, openMenu, setOpenMenu, commen
 function ThemeToggle({ theme, onToggle }) {
   // Show the icon of the theme you'll switch TO — clearer affordance than current state.
   // Sun + Moon paths are condensed Lucide-style (single-path so the existing <Icon> works).
-  const sun = 'M12 7a5 5 0 100 10 5 5 0 000-10z M12 3v1 M12 20v1 M21 12h-1 M4 12H3 M16.95 7.05l-.71.71 M7.05 16.95l-.71.71 M16.95 16.95l-.71-.71 M7.05 7.05l-.71-.71';
+  const sun =
+    'M12 7a5 5 0 100 10 5 5 0 000-10z M12 3v1 M12 20v1 M21 12h-1 M4 12H3 M16.95 7.05l-.71.71 M7.05 16.95l-.71.71 M16.95 16.95l-.71-.71 M7.05 7.05l-.71-.71';
   const moon = 'M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z';
   const next = theme === 'dark' ? 'light' : 'dark';
   return (
@@ -1071,38 +1420,64 @@ function Wordmark({ project, port, version }) {
   );
 }
 
-function Viewport({ tabs, activePath, registerIframe, systemData, onOpenFromSystem, onSelectDs, project, cfg }) {
+function Viewport({
+  tabs,
+  activePath,
+  registerIframe,
+  systemData,
+  onOpenFromSystem,
+  onSelectDs,
+  project,
+  cfg,
+}) {
   return (
     <div className="viewport">
       {tabs.length === 0 && (
         <>
-          <Wordmark project={project} port={typeof window !== 'undefined' ? window.location.port : ''} version={MDCC_VERSION} />
+          <Wordmark
+            project={project}
+            port={typeof window !== 'undefined' ? window.location.port : ''}
+            version={MDCC_VERSION}
+          />
           <div className="empty-state">
             <div className="big">No mock open</div>
             <div className="small">
-              ← Click a <code>.tsx</code> (or legacy <code>.html</code>) file in the tree, or open the <strong>Design system</strong> view above it.
-              <br /><br />
-              Tabs work like in an editor — close with the × on each tab. <kbd>⌘R</kbd> reloads the active iframe.
-              <br /><br />
-              <strong>Element selection:</strong> hold <kbd>⌘</kbd> inside the canvas and hover for a preview, click to select. <kbd>⌘⇧</kbd>+click adds to a multi-selection. <kbd>V</kbd>/<kbd>H</kbd>/<kbd>C</kbd> swap tool; right-click opens the context menu.
-              <br /><br />
-              Active file, selection, and comments are tracked in <code>_active.json</code> + <code>_comments/</code> — Claude reads them when you run <code>/design</code>.
+              ← Click a <code>.tsx</code> (or legacy <code>.html</code>) file in the tree, or open
+              the <strong>Design system</strong> view above it.
+              <br />
+              <br />
+              Tabs work like in an editor — close with the × on each tab. <kbd>⌘R</kbd> reloads the
+              active iframe.
+              <br />
+              <br />
+              <strong>Element selection:</strong> hold <kbd>⌘</kbd> inside the canvas and hover for
+              a preview, click to select. <kbd>⌘⇧</kbd>+click adds to a multi-selection.{' '}
+              <kbd>V</kbd>/<kbd>H</kbd>/<kbd>C</kbd> swap tool; right-click opens the context menu.
+              <br />
+              <br />
+              Active file, selection, and comments are tracked in <code>_active.json</code> +{' '}
+              <code>_comments/</code> — Claude reads them when you run <code>/design</code>.
             </div>
           </div>
         </>
       )}
-      {tabs.map(t => {
+      {tabs.map((t) => {
         if (t.path === SYSTEM_TAB) {
           return (
             <div key={t.path} className={'system-view' + (t.path === activePath ? ' active' : '')}>
-              <SystemView data={systemData} onOpen={onOpenFromSystem} cfg={cfg} onSelectDs={onSelectDs} />
+              <SystemView
+                data={systemData}
+                onOpen={onOpenFromSystem}
+                cfg={cfg}
+                onSelectDs={onSelectDs}
+              />
             </div>
           );
         }
         return (
           <iframe
             key={t.path}
-            ref={el => registerIframe(t.path, el)}
+            ref={(el) => registerIframe(t.path, el)}
             src={canvasUrl(t.path, cfg)}
             className={t.path === activePath ? 'active' : ''}
             data-path={t.path}
@@ -1133,7 +1508,15 @@ function Viewport({ tabs, activePath, registerIframe, systemData, onOpenFromSyst
 // Order kinds match the typical reading flow of a tokens file. Unknown kinds
 // fall through to `other` so a custom token group still renders, just last.
 const TOKEN_GROUP_ORDER = [
-  'color', 'space', 'radius', 'shadow', 'leading', 'weight', 'motion', 'font', 'other',
+  'color',
+  'space',
+  'radius',
+  'shadow',
+  'leading',
+  'weight',
+  'motion',
+  'font',
+  'other',
 ];
 const TOKEN_GROUP_LABELS = {
   color: 'colors',
@@ -1147,17 +1530,22 @@ const TOKEN_GROUP_LABELS = {
   other: 'other',
 };
 
-function isSwatchKind(kind) { return kind === 'color'; }
+function isSwatchKind(kind) {
+  return kind === 'color';
+}
 
 function TokenLadder({ tokens, tokenGroups, tokensPath }) {
   if (!tokens || tokens.length === 0) {
     return (
       <section className="sv-section sv-section-tokens">
-        <h2>tokens<span className="sv-h-num">0</span></h2>
+        <h2>
+          tokens<span className="sv-h-num">0</span>
+        </h2>
         <div className="sv-empty">
           <p>
-            No tokens parsed from {tokensPath ? <code>{tokensPath}</code> : 'the configured tokens file'}.
-            Does the file exist and contain CSS custom properties (<code>--name: value;</code>)?
+            No tokens parsed from{' '}
+            {tokensPath ? <code>{tokensPath}</code> : 'the configured tokens file'}. Does the file
+            exist and contain CSS custom properties (<code>--name: value;</code>)?
           </p>
         </div>
       </section>
@@ -1165,9 +1553,9 @@ function TokenLadder({ tokens, tokenGroups, tokensPath }) {
   }
 
   const groups = tokenGroups || {};
-  const kinds = Array.from(
-    new Set([...TOKEN_GROUP_ORDER, ...Object.keys(groups)])
-  ).filter((k) => groups[k]?.length);
+  const kinds = Array.from(new Set([...TOKEN_GROUP_ORDER, ...Object.keys(groups)])).filter(
+    (k) => groups[k]?.length
+  );
 
   return (
     <>
@@ -1206,9 +1594,11 @@ function findLeadingFor(typeToken, leadingTokens) {
   const m = typeToken.name.match(/^--(?:type|fs|text)-(.+)$/);
   if (!m) return null;
   const suffix = m[1];
-  return (leadingTokens || []).find((t) =>
-    /^--(?:lh|leading|line-height)-/.test(t.name) && t.name.endsWith('-' + suffix)
-  )?.value ?? null;
+  return (
+    (leadingTokens || []).find(
+      (t) => /^--(?:lh|leading|line-height)-/.test(t.name) && t.name.endsWith('-' + suffix)
+    )?.value ?? null
+  );
 }
 
 // Best-effort sample font: prefer body / sans / display tokens, fall back to
@@ -1257,7 +1647,11 @@ function TypeLadder({ tokenGroups }) {
 
 function SystemView({ data, onOpen, cfg, onSelectDs }) {
   if (!data) {
-    return <div className="sv-empty"><p>Loading design system…</p></div>;
+    return (
+      <div className="sv-empty">
+        <p>Loading design system…</p>
+      </div>
+    );
   }
   const {
     previewGallery,
@@ -1269,7 +1663,8 @@ function SystemView({ data, onOpen, cfg, onSelectDs }) {
     ds,
     availableDesignSystems,
   } = data;
-  const empty = (!previewGallery || !previewGallery.length) && (!uiKitsGallery || !uiKitsGallery.length);
+  const empty =
+    (!previewGallery || !previewGallery.length) && (!uiKitsGallery || !uiKitsGallery.length);
   const hasPicker = Array.isArray(availableDesignSystems) && availableDesignSystems.length > 1;
   const selectedName = ds?.name ?? availableDesignSystems?.[0]?.name ?? '';
 
@@ -1281,34 +1676,42 @@ function SystemView({ data, onOpen, cfg, onSelectDs }) {
         {hasPicker ? (
           <label className="sv-ds-picker">
             <span className="sv-ds-picker-label">DS</span>
-            <select
-              value={selectedName}
-              onChange={(e) => onSelectDs && onSelectDs(e.target.value)}
-            >
+            <select value={selectedName} onChange={(e) => onSelectDs && onSelectDs(e.target.value)}>
               {availableDesignSystems.map((d) => (
-                <option key={d.name} value={d.name}>{d.name}</option>
+                <option key={d.name} value={d.name}>
+                  {d.name}
+                </option>
               ))}
             </select>
           </label>
         ) : null}
-        <span className="sv-loc"><code>{systemDir}</code></span>
+        <span className="sv-loc">
+          <code>{systemDir}</code>
+        </span>
       </header>
 
-      {ds?.description ? (
-        <p className="sv-ds-description">{ds.description}</p>
-      ) : null}
+      {ds?.description ? <p className="sv-ds-description">{ds.description}</p> : null}
 
       <TokenLadder tokens={tokens} tokenGroups={tokenGroups} tokensPath={tokensPath} />
       <TypeLadder tokenGroups={tokenGroups} />
 
       {empty ? (
         <div className="sv-empty">
-          <p>No <code>preview/</code> or <code>ui_kits/</code> folders found under <code>{systemDir}</code>.</p>
+          <p>
+            No <code>preview/</code> or <code>ui_kits/</code> folders found under{' '}
+            <code>{systemDir}</code>.
+          </p>
         </div>
       ) : (
         <>
-          <Gallery title="preview" items={previewGallery} onOpen={onOpen} kind="preview" cfg={cfg} />
-          <Gallery title="ui kits"  items={uiKitsGallery}  onOpen={onOpen} kind="ui_kits" cfg={cfg} />
+          <Gallery
+            title="preview"
+            items={previewGallery}
+            onOpen={onOpen}
+            kind="preview"
+            cfg={cfg}
+          />
+          <Gallery title="ui kits" items={uiKitsGallery} onOpen={onOpen} kind="ui_kits" cfg={cfg} />
         </>
       )}
     </div>
@@ -1319,12 +1722,19 @@ function Gallery({ title, items, onOpen, kind, cfg }) {
   if (!items || items.length === 0) return null;
   return (
     <section className="sv-section">
-      <h2>{title} <span className="sv-count">{items.length}</span></h2>
+      <h2>
+        {title} <span className="sv-count">{items.length}</span>
+      </h2>
       <div className={'sv-previews sv-previews-' + kind}>
-        {items.map(p => (
+        {items.map((p) => (
           <article key={p.path} className="sv-preview-card" onClick={() => onOpen(p.path)}>
             <div className="sv-preview-frame">
-              <iframe src={canvasUrl(p.path, cfg, { thumbnail: true })} title={p.label} scrolling="no" {...(cfg?.canvasOrigin ? { sandbox: 'allow-scripts allow-same-origin' } : {})} />
+              <iframe
+                src={canvasUrl(p.path, cfg, { thumbnail: true })}
+                title={p.label}
+                scrolling="no"
+                {...(cfg?.canvasOrigin ? { sandbox: 'allow-scripts allow-same-origin' } : {})}
+              />
             </div>
             <div className="sv-preview-foot">
               <strong>{p.label}</strong>
@@ -1345,7 +1755,7 @@ function CommentBar({ activePath, comments }) {
   // bubbles + thread popover. BottomBar shrinks to a live open-count summary
   // so the shell still surfaces total review activity at a glance.
   if (!activePath) return null;
-  const openComments = (comments || []).filter(c => c.status !== 'resolved');
+  const openComments = (comments || []).filter((c) => c.status !== 'resolved');
   if (openComments.length === 0) return null;
   return (
     <div className="comment-bar">
@@ -1366,26 +1776,53 @@ function StatusBarSlot({ label, children, className = '' }) {
   );
 }
 
-function StatusBar({ activePath, selected, wsConnected, openCount, theme, onToggleTheme, onClearSelected, syncStatus }) {
+function StatusBar({
+  activePath,
+  selected,
+  wsConnected,
+  openCount,
+  theme,
+  onToggleTheme,
+  onClearSelected,
+  syncStatus,
+}) {
   const isSystem = activePath === SYSTEM_TAB;
-  const text = selected && selected.selector
-    ? selected.selector + (selected.text ? ` — "${selected.text.slice(0, 60)}"` : '')
-    : '';
-  const title = selected && selected.dom_path ? selected.dom_path.join(' > ') : (selected ? selected.selector : '');
+  const text =
+    selected && selected.selector
+      ? selected.selector + (selected.text ? ` — "${selected.text.slice(0, 60)}"` : '')
+      : '';
+  const title =
+    selected && selected.dom_path
+      ? selected.dom_path.join(' > ')
+      : selected
+        ? selected.selector
+        : '';
   return (
     <div className="statusbar" role="contentinfo">
       <StatusBarSlot label="Active file" className="sb-active">
         <span className="sb-key">active</span>
         <span className="sb-file" title={activePath || ''}>
-          {isSystem ? '▦ design system' : (activePath || '—')}
+          {isSystem ? '▦ design system' : activePath || '—'}
         </span>
       </StatusBarSlot>
 
       {selected && selected.selector && !isSystem && (
         <StatusBarSlot label="Selected element" className="sb-selected">
-          <span className="sb-dot" aria-hidden="true">●</span>
-          <span className="sb-sel-text" title={title}>{text}</span>
-          <button type="button" className="sb-clear-sel" onClick={onClearSelected} title="Clear (Esc inside iframe)" aria-label="Clear selection">×</button>
+          <span className="sb-dot" aria-hidden="true">
+            ●
+          </span>
+          <span className="sb-sel-text" title={title}>
+            {text}
+          </span>
+          <button
+            type="button"
+            className="sb-clear-sel"
+            onClick={onClearSelected}
+            title="Clear (Esc inside iframe)"
+            aria-label="Clear selection"
+          >
+            ×
+          </button>
         </StatusBarSlot>
       )}
 
@@ -1405,7 +1842,10 @@ function StatusBar({ activePath, selected, wsConnected, openCount, theme, onTogg
       {syncStatus?.notSyncable && (
         <StatusBarSlot label="Hub sync" className="sb-sync">
           <span className="sb-sync-dot" aria-hidden="true" />
-          <span className="sb-key" title={syncStatus.reason || 'Linked to a hub, but no canvases are syncable.'}>
+          <span
+            className="sb-key"
+            title={syncStatus.reason || 'Linked to a hub, but no canvases are syncable.'}
+          >
             0 syncable{syncStatus.tsxCount > 0 ? ` · ${syncStatus.tsxCount} tsx` : ''}
           </span>
         </StatusBarSlot>
@@ -1422,26 +1862,36 @@ function StatusBar({ activePath, selected, wsConnected, openCount, theme, onTogg
 
 // ---------- Right sidebar — Comments panel ----------
 
-function CommentsPanel({ commentsByFile, filter, setFilter, activePath, focusedId, onJump, onResolve, onReopen, onDelete }) {
+function CommentsPanel({
+  commentsByFile,
+  filter,
+  setFilter,
+  activePath,
+  focusedId,
+  onJump,
+  onResolve,
+  onReopen,
+  onDelete,
+}) {
   const counts = totalCounts(commentsByFile);
   // Build groups: [{ file, comments: filtered }]
   const files = Object.keys(commentsByFile || {}).sort();
   const groups = [];
   for (const f of files) {
     const all = commentsByFile[f] || [];
-    const filtered = all.filter(c => {
+    const filtered = all.filter((c) => {
       if (filter === 'open') return c.status !== 'resolved';
       if (filter === 'resolved') return c.status === 'resolved';
       return true;
     });
     if (filtered.length === 0) continue;
     // Number is fixed by all-list order so it matches pin numbers (which are based on position in the array of selector-having comments)
-    const numberedAll = all.filter(c => c.selector);
+    const numberedAll = all.filter((c) => c.selector);
     groups.push({
       file: f,
-      comments: filtered.map(c => ({
+      comments: filtered.map((c) => ({
         ...c,
-        n: numberedAll.findIndex(x => x.id === c.id) + 1,
+        n: numberedAll.findIndex((x) => x.id === c.id) + 1,
       })),
     });
   }
@@ -1456,61 +1906,101 @@ function CommentsPanel({ commentsByFile, filter, setFilter, activePath, focusedI
         <div className="rsidebar-filters" role="tablist">
           <button
             className={'rsidebar-filter' + (filter === 'all' ? ' active' : '')}
-            role="tab" aria-selected={filter === 'all'}
+            role="tab"
+            aria-selected={filter === 'all'}
             onClick={() => setFilter('all')}
-          >All <span className="fc">{counts.all}</span></button>
+          >
+            All <span className="fc">{counts.all}</span>
+          </button>
           <button
             className={'rsidebar-filter' + (filter === 'open' ? ' active' : '')}
-            role="tab" aria-selected={filter === 'open'}
+            role="tab"
+            aria-selected={filter === 'open'}
             onClick={() => setFilter('open')}
-          >Open <span className="fc">{counts.open}</span></button>
+          >
+            Open <span className="fc">{counts.open}</span>
+          </button>
           <button
             className={'rsidebar-filter' + (filter === 'resolved' ? ' active' : '')}
-            role="tab" aria-selected={filter === 'resolved'}
+            role="tab"
+            aria-selected={filter === 'resolved'}
             onClick={() => setFilter('resolved')}
-          >Resolved <span className="fc">{counts.resolved}</span></button>
+          >
+            Resolved <span className="fc">{counts.resolved}</span>
+          </button>
         </div>
       </div>
       <div className="rsidebar-body">
         {groups.length === 0 ? (
           <div className="rsidebar-empty">
             <p>No comments {filter !== 'all' ? `with status “${filter}”` : 'yet'}.</p>
-            <p style={{ marginTop: 12 }}>Open a canvas, hold <kbd>⌘</kbd> and click an element, then press <kbd>C</kbd> — or hold <kbd>⌘⇧</kbd> and click directly.</p>
+            <p style={{ marginTop: 12 }}>
+              Open a canvas, hold <kbd>⌘</kbd> and click an element, then press <kbd>C</kbd> — or
+              hold <kbd>⌘⇧</kbd> and click directly.
+            </p>
           </div>
-        ) : groups.map(g => (
-          <div key={g.file} className="rs-group">
-            <button
-              className="rs-group-h"
-              onClick={() => onJump(g.file, null)}
-              title={g.file}
-            >
-              <span className="rs-group-name">{displayName(basename(g.file))}</span>
-              <span className="rs-group-count">{g.comments.length}</span>
-            </button>
-            {g.comments.map(c => (
-              <div
-                key={c.id}
-                className={'rs-comment' + (c.status === 'resolved' ? ' resolved' : '') + (c.id === focusedId ? ' active-pin' : '')}
-                onClick={() => onJump(g.file, c.id)}
-              >
-                <div className="rs-comment-head">
-                  <span className="rs-num">{c.n || '·'}</span>
-                  <span className="rs-time">{timeAgo(c.created)}</span>
-                </div>
-                <div className="rs-comment-text">{c.text}</div>
-                <div className="rs-comment-foot">
-                  <code title={(c.dom_path || []).join(' > ')}>{c.selector || '—'}</code>
-                  <div className="rs-comment-actions">
-                    {c.status === 'resolved'
-                      ? <button className="rs-act" onClick={e => { e.stopPropagation(); onReopen(c.id); }}>↺</button>
-                      : <button className="rs-act" onClick={e => { e.stopPropagation(); onResolve(c.id); }}>✓</button>}
-                    <button className="rs-act danger" onClick={e => { e.stopPropagation(); onDelete(c.id); }}>×</button>
+        ) : (
+          groups.map((g) => (
+            <div key={g.file} className="rs-group">
+              <button className="rs-group-h" onClick={() => onJump(g.file, null)} title={g.file}>
+                <span className="rs-group-name">{displayName(basename(g.file))}</span>
+                <span className="rs-group-count">{g.comments.length}</span>
+              </button>
+              {g.comments.map((c) => (
+                <div
+                  key={c.id}
+                  className={
+                    'rs-comment' +
+                    (c.status === 'resolved' ? ' resolved' : '') +
+                    (c.id === focusedId ? ' active-pin' : '')
+                  }
+                  onClick={() => onJump(g.file, c.id)}
+                >
+                  <div className="rs-comment-head">
+                    <span className="rs-num">{c.n || '·'}</span>
+                    <span className="rs-time">{timeAgo(c.created)}</span>
+                  </div>
+                  <div className="rs-comment-text">{c.text}</div>
+                  <div className="rs-comment-foot">
+                    <code title={(c.dom_path || []).join(' > ')}>{c.selector || '—'}</code>
+                    <div className="rs-comment-actions">
+                      {c.status === 'resolved' ? (
+                        <button
+                          className="rs-act"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onReopen(c.id);
+                          }}
+                        >
+                          ↺
+                        </button>
+                      ) : (
+                        <button
+                          className="rs-act"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onResolve(c.id);
+                          }}
+                        >
+                          ✓
+                        </button>
+                      )}
+                      <button
+                        className="rs-act danger"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onDelete(c.id);
+                        }}
+                      >
+                        ×
+                      </button>
+                    </div>
                   </div>
                 </div>
-              </div>
-            ))}
-          </div>
-        ))}
+              ))}
+            </div>
+          ))
+        )}
       </div>
     </aside>
   );
@@ -1631,7 +2121,9 @@ function App() {
         });
       })
       .catch(() => {});
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+    };
   }, []);
   // Backfill the sync banner on mount from /_sync-status. The 'sync:status' WS
   // broadcast is one-shot for the zero-syncable case (DDR-060 / 9.1-D), so a
@@ -1646,14 +2138,16 @@ function App() {
         setSyncStatus(data);
       })
       .catch(() => {});
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+    };
   }, []);
-  const [commentsByFile, setCommentsByFile] = useState({});      // { file: [Comment] }
+  const [commentsByFile, setCommentsByFile] = useState({}); // { file: [Comment] }
   // Phase 6 — the in-iframe composer owns drafting; the shell no longer holds
   // a `draft` state. Mutations route through postMessage → WS instead.
   const [focusedCommentId, setFocusedCommentId] = useState(null);
   const [commentsPanelOpen, setCommentsPanelOpen] = useState(false);
-  const [commentsFilter, setCommentsFilter] = useState('open');   // 'all' | 'open' | 'resolved'
+  const [commentsFilter, setCommentsFilter] = useState('open'); // 'all' | 'open' | 'resolved'
   const [theme, setTheme] = useState(readInitialTheme);
   const [openMenu, setOpenMenu] = useState(null);
   const [sidebarOpen, setSidebarOpen] = useState(() => readBoolStore(SIDEBAR_STORE, true));
@@ -1668,18 +2162,25 @@ function App() {
   // The canvas-shell listens for these `dgn:*` messages and dispatches into the
   // matching local provider (annotations visibility / both selection stores /
   // tool mode). Mirrors the existing `force-clear` / `select-clear` channel.
-  const postToActiveCanvas = useCallback((payload) => {
-    const el = activePath ? iframesRef.current.get(activePath) : null;
-    if (!el || !el.contentWindow) return;
-    try { el.contentWindow.postMessage(payload, '*'); } catch {}
-  }, [activePath]);
+  const postToActiveCanvas = useCallback(
+    (payload) => {
+      const el = activePath ? iframesRef.current.get(activePath) : null;
+      if (!el || !el.contentWindow) return;
+      try {
+        el.contentWindow.postMessage(payload, '*');
+      } catch {}
+    },
+    [activePath]
+  );
 
   const toggleAnnotations = useCallback(() => {
     setAnnotationsVisible((v) => {
       const next = !v;
       const el = activePath ? iframesRef.current.get(activePath) : null;
       if (el && el.contentWindow) {
-        try { el.contentWindow.postMessage({ dgn: 'view-annotations', visible: next }, '*'); } catch {}
+        try {
+          el.contentWindow.postMessage({ dgn: 'view-annotations', visible: next }, '*');
+        } catch {}
       }
       return next;
     });
@@ -1700,23 +2201,31 @@ function App() {
     // mount run iframesRef is empty (no canvas open yet) — a freshly-loaded
     // iframe instead gets the current theme from the `dgn:'loaded'` handler.
     for (const el of iframesRef.current.values()) {
-      try { el.contentWindow.postMessage({ dgn: 'theme', theme }, '*'); } catch {}
+      try {
+        el.contentWindow.postMessage({ dgn: 'theme', theme }, '*');
+      } catch {}
     }
   }, [theme]);
 
   // Persist sidebar / hidden-files / DS-body toggles. Mirror theme pattern.
   useEffect(() => {
-    try { localStorage.setItem(SIDEBAR_STORE, sidebarOpen ? '1' : '0'); } catch {}
+    try {
+      localStorage.setItem(SIDEBAR_STORE, sidebarOpen ? '1' : '0');
+    } catch {}
   }, [sidebarOpen]);
   useEffect(() => {
-    try { localStorage.setItem(SHOW_HIDDEN_STORE, showHidden ? '1' : '0'); } catch {}
+    try {
+      localStorage.setItem(SHOW_HIDDEN_STORE, showHidden ? '1' : '0');
+    } catch {}
   }, [showHidden]);
   useEffect(() => {
-    try { localStorage.setItem(SECTIONS_STORE, JSON.stringify(sectionsExpanded)); } catch {}
+    try {
+      localStorage.setItem(SECTIONS_STORE, JSON.stringify(sectionsExpanded));
+    } catch {}
   }, [sectionsExpanded]);
 
   const toggleSection = useCallback((label, defaultOpen) => {
-    setSectionsExpanded(prev => {
+    setSectionsExpanded((prev) => {
       const cur = prev[label];
       const isOpen = cur === undefined ? defaultOpen : cur;
       return { ...prev, [label]: !isOpen };
@@ -1724,7 +2233,7 @@ function App() {
   }, []);
 
   const toggleTheme = useCallback(() => {
-    setTheme(t => (t === 'dark' ? 'light' : 'dark'));
+    setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
   }, []);
 
   // ----- Tree -----
@@ -1733,7 +2242,7 @@ function App() {
       const r = await fetch('/_index-data');
       const data = await r.json();
       setProject(data.project || 'Design');
-      const built = data.groups.map(g => ({
+      const built = data.groups.map((g) => ({
         ...g,
         tree: buildTree(g.paths, g.stripPrefix),
       }));
@@ -1743,7 +2252,9 @@ function App() {
     }
   }, []);
 
-  useEffect(() => { loadTree(); }, [loadTree]);
+  useEffect(() => {
+    loadTree();
+  }, [loadTree]);
 
   // ----- System data (lazy) -----
   // `dsName` scopes to a single design-system entry (DDR-048). The initial
@@ -1786,7 +2297,9 @@ function App() {
     }
   }, []);
 
-  useEffect(() => { loadAllComments(); }, [loadAllComments]);
+  useEffect(() => {
+    loadAllComments();
+  }, [loadAllComments]);
 
   // ----- WebSocket -----
   useEffect(() => {
@@ -1800,7 +2313,7 @@ function App() {
         setTimeout(connect, 1000);
       });
       ws.addEventListener('error', () => {});
-      ws.addEventListener('message', e => {
+      ws.addEventListener('message', (e) => {
         try {
           const m = JSON.parse(e.data);
           if (m.type === 'snapshot' && m.state) {
@@ -1808,13 +2321,18 @@ function App() {
           } else if (m.type === 'selected') {
             setSelected(m.selected);
           } else if (m.type === 'comments' && typeof m.file === 'string') {
-            setCommentsByFile(prev => ({ ...prev, [m.file]: m.comments || [] }));
+            setCommentsByFile((prev) => ({ ...prev, [m.file]: m.comments || [] }));
           } else if (m.type === 'ai-activity' && typeof m.file === 'string') {
             // Phase 8 Task 4 — relay to every open iframe; each canvas's
             // AiBanner filters by its own file path. Lightweight broadcast
             // (one envelope per change, not per iframe count).
             for (const el of iframesRef.current.values()) {
-              try { el.contentWindow.postMessage({ dgn: 'ai-activity', file: m.file, entry: m.entry }, '*'); } catch {}
+              try {
+                el.contentWindow.postMessage(
+                  { dgn: 'ai-activity', file: m.file, entry: m.entry },
+                  '*'
+                );
+              } catch {}
             }
           } else if (m.type === 'sync:status' && m.payload) {
             // Phase 9 Task 8 — hub connection state for the offline banner.
@@ -1827,7 +2345,9 @@ function App() {
             // Also relay to iframes so canvas-level "Reload?" UI (if any)
             // can react. Outer banner is the primary prompt.
             for (const el of iframesRef.current.values()) {
-              try { el.contentWindow.postMessage({ dgn: 'git-lifecycle', payload: m.payload }, '*'); } catch {}
+              try {
+                el.contentWindow.postMessage({ dgn: 'git-lifecycle', payload: m.payload }, '*');
+              } catch {}
             }
           }
         } catch {}
@@ -1839,7 +2359,9 @@ function App() {
 
   function wsSend(obj) {
     const ws = wsRef.current;
-    try { if (ws && ws.readyState === 1) ws.send(JSON.stringify(obj)); } catch {}
+    try {
+      if (ws && ws.readyState === 1) ws.send(JSON.stringify(obj));
+    } catch {}
   }
 
   // ----- Tab management (single-canvas) -----
@@ -1848,7 +2370,7 @@ function App() {
   // (iframesRef, comments push, WS `tabs` message) doesn't need refactoring.
   // ARTBOARDS slot in the menubar reads `tabs.length` and reports 0 or 1.
   const openTab = useCallback((path) => {
-    setTabs(prev => {
+    setTabs((prev) => {
       // Drop the previously-open iframe so we don't leak DOM nodes.
       for (const t of prev) if (t.path !== path) iframesRef.current.delete(t.path);
       return [{ path }];
@@ -1857,18 +2379,21 @@ function App() {
     setFocusedCommentId(null);
   }, []);
 
-  const openSystem = useCallback((dsName) => {
-    // DsFolderRow passes the clicked DS name → scope the System view to it so
-    // each folder shows its own tokens + previews. The no-arg callers (menubar,
-    // keyboard reopen) only load default data on first open.
-    const ds = typeof dsName === 'string' ? dsName : undefined;
-    if (ds) loadSystemData(ds);
-    else if (!systemData) loadSystemData();
-    openTab(SYSTEM_TAB);
-  }, [systemData, loadSystemData, openTab]);
+  const openSystem = useCallback(
+    (dsName) => {
+      // DsFolderRow passes the clicked DS name → scope the System view to it so
+      // each folder shows its own tokens + previews. The no-arg callers (menubar,
+      // keyboard reopen) only load default data on first open.
+      const ds = typeof dsName === 'string' ? dsName : undefined;
+      if (ds) loadSystemData(ds);
+      else if (!systemData) loadSystemData();
+      openTab(SYSTEM_TAB);
+    },
+    [systemData, loadSystemData, openTab]
+  );
 
   useEffect(() => {
-    wsSend({ type: 'tabs', tabs: tabs.map(t => t.path).filter(p => p !== SYSTEM_TAB) });
+    wsSend({ type: 'tabs', tabs: tabs.map((t) => t.path).filter((p) => p !== SYSTEM_TAB) });
   }, [tabs]);
 
   useEffect(() => {
@@ -1877,19 +2402,22 @@ function App() {
     else wsSend({ type: 'active', file: '' });
   }, [activePath]);
 
-  const closeTab = useCallback((path) => {
-    setTabs(prev => {
-      const idx = prev.findIndex(t => t.path === path);
-      if (idx < 0) return prev;
-      const next = prev.filter(t => t.path !== path);
-      if (path === activePath) {
-        if (next.length === 0) setActivePath(null);
-        else setActivePath(next[Math.max(0, idx - 1)].path);
-      }
-      return next;
-    });
-    iframesRef.current.delete(path);
-  }, [activePath]);
+  const closeTab = useCallback(
+    (path) => {
+      setTabs((prev) => {
+        const idx = prev.findIndex((t) => t.path === path);
+        if (idx < 0) return prev;
+        const next = prev.filter((t) => t.path !== path);
+        if (path === activePath) {
+          if (next.length === 0) setActivePath(null);
+          else setActivePath(next[Math.max(0, idx - 1)].path);
+        }
+        return next;
+      });
+      iframesRef.current.delete(path);
+    },
+    [activePath]
+  );
 
   const reloadActive = useCallback(() => {
     if (!activePath || activePath === SYSTEM_TAB) {
@@ -1908,7 +2436,9 @@ function App() {
     if (activePath && activePath !== SYSTEM_TAB) {
       const el = iframesRef.current.get(activePath);
       if (el && el.contentWindow) {
-        try { el.contentWindow.postMessage({ dgn: 'force-clear' }, '*'); } catch {}
+        try {
+          el.contentWindow.postMessage({ dgn: 'force-clear' }, '*');
+        } catch {}
       }
     }
   }, [activePath]);
@@ -1919,7 +2449,9 @@ function App() {
     const el = iframesRef.current.get(activePath);
     if (!el || !el.contentWindow) return;
     const list = commentsByFile[activePath] || [];
-    try { el.contentWindow.postMessage({ dgn: 'comments-set', comments: list }, '*'); } catch {}
+    try {
+      el.contentWindow.postMessage({ dgn: 'comments-set', comments: list }, '*');
+    } catch {}
   }, [activePath, commentsByFile]);
 
   // ----- Inbound messages from iframes -----
@@ -1935,6 +2467,29 @@ function App() {
       if (e.origin !== expectedOrigin) return;
       const m = e.data;
       if (!m || typeof m !== 'object' || !m.dgn) return;
+      if (m.dgn === 'tool-cursor') {
+        // Phase 24 — show the active canvas tool's cursor across the WHOLE app
+        // shell (sidebar, top bar, everything) so the custom cursor is visible
+        // everywhere in maude, not just inside the canvas iframe. The canvas
+        // sends only a tool TOKEN; we resolve it to a cursor string from our own
+        // trusted map (resolveToolCursor) and apply THAT — never a raw
+        // canvas-supplied value. A malicious synced canvas (DDR-054) can thus
+        // only pick a known, always-visible glyph; it cannot inject an
+        // invisible/displaced SVG cursor as a clickjacking aid over the un-CSP'd
+        // shell (phase-24 ethical-hacker Finding 2; DDR-067).
+        const cursor = resolveToolCursor(m.tool);
+        if (cursor) {
+          document.body.style.cursor = cursor;
+          let el = document.getElementById('dc-app-cursor');
+          if (!el) {
+            el = document.createElement('style');
+            el.id = 'dc-app-cursor';
+            document.head.appendChild(el);
+          }
+          el.textContent = `* { cursor: ${cursor} !important; }`;
+        }
+        return;
+      }
       if (m.dgn === 'select' && m.selection) {
         wsSend({ type: 'select', selection: m.selection });
         setSelected(m.selection);
@@ -1995,7 +2550,7 @@ function App() {
         wsSend({ type: 'comments-patch', id: m.id, patch: m.patch });
       } else if (m.dgn === 'comment-delete' && m.id) {
         wsSend({ type: 'comments-delete', id: m.id });
-        setFocusedCommentId(prev => (prev === m.id ? null : prev));
+        setFocusedCommentId((prev) => (prev === m.id ? null : prev));
       } else if (m.dgn === 'comment-click' && m.id) {
         setFocusedCommentId(m.id);
       } else if (m.dgn === 'loaded' && m.file) {
@@ -2003,17 +2558,87 @@ function App() {
         const list = commentsByFile[m.file] || [];
         const el = [...iframesRef.current.entries()].find(([k]) => k === m.file)?.[1];
         if (el && el.contentWindow) {
-          try { el.contentWindow.postMessage({ dgn: 'comments-set', comments: list }, '*'); } catch {}
+          try {
+            el.contentWindow.postMessage({ dgn: 'comments-set', comments: list }, '*');
+          } catch {}
           // System-review D9 — seed the just-loaded canvas with the current
           // chrome theme so a canvas opened AFTER a theme toggle starts
           // correct (no flash from the dark default).
-          try { el.contentWindow.postMessage({ dgn: 'theme', theme }, '*'); } catch {}
-          if (focusedCommentId && list.some(c => c.id === focusedCommentId)) {
-            try { el.contentWindow.postMessage({ dgn: 'comment-focus', id: focusedCommentId }, '*'); } catch {}
+          try {
+            el.contentWindow.postMessage({ dgn: 'theme', theme }, '*');
+          } catch {}
+          if (focusedCommentId && list.some((c) => c.id === focusedCommentId)) {
+            try {
+              el.contentWindow.postMessage({ dgn: 'comment-focus', id: focusedCommentId }, '*');
+            } catch {}
           }
         }
+      } else if (m.dgn === 'export-request' && m.id && m.payload) {
+        // The export dialog renders inside the canvas iframe (canvas origin),
+        // but /_api/export is a privileged MAIN-origin endpoint deliberately
+        // kept off the canvas allowlist (DDR-060). A direct in-iframe fetch
+        // therefore 403s ("Forbidden (canvas origin)"). Bridge it: run the
+        // export here on the trusted main origin, stream the download, and
+        // report status back to the iframe. Origin is already validated
+        // (e.origin === expectedOrigin) above, so only the real canvas iframe
+        // can ask — this is NOT a generic fetch proxy.
+        void runBridgedExport(e.source, m.id, m.payload);
+      } else if (m.dgn === 'export-history-request' && m.id) {
+        // Same bridge for the dialog's Recent tab (/_api/export-history is
+        // also main-origin-only).
+        void runBridgedHistory(e.source, m.id);
+      }
+    }
+    // Reply target for the export bridge: the canvas iframe's own origin.
+    const replyOrigin = cfg?.canvasOrigin || window.location.origin;
+    async function runBridgedExport(source, id, payload) {
+      const reply = (msg) => {
+        try {
+          if (source) source.postMessage({ dgn: 'export-result', id, ...msg }, replyOrigin);
+        } catch {}
+      };
+      try {
+        const r = await fetch('/_api/export', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify(payload),
+        });
+        if (!r.ok) {
+          reply({ ok: false, error: (await r.text()) || String(r.status) });
+          return;
+        }
+        const disp = r.headers.get('Content-Disposition') || '';
+        const fn = /filename="([^"]+)"/.exec(disp);
+        const filename = (fn && fn[1]) || 'export';
+        const blob = await r.blob();
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        URL.revokeObjectURL(url);
+        reply({ ok: true, filename });
+      } catch (err) {
+        reply({ ok: false, error: err && err.message ? err.message : String(err) });
       }
     }
+    async function runBridgedHistory(source, id) {
+      let history = [];
+      try {
+        const r = await fetch('/_api/export-history');
+        if (r.ok) {
+          const data = await r.json();
+          if (Array.isArray(data.history)) history = data.history;
+        }
+      } catch {
+        /* best-effort — empty list */
+      }
+      try {
+        if (source) source.postMessage({ dgn: 'export-history-result', id, history }, replyOrigin);
+      } catch {}
+    }
     window.addEventListener('message', onMessage);
     return () => window.removeEventListener('message', onMessage);
   }, [commentsByFile, focusedCommentId, cfg, theme]);
@@ -2026,7 +2651,9 @@ function App() {
     if (!activePath || activePath === SYSTEM_TAB) return;
     const el = iframesRef.current.get(activePath);
     if (el && el.contentWindow) {
-      try { el.contentWindow.postMessage({ dgn: 'force-clear' }, '*'); } catch {}
+      try {
+        el.contentWindow.postMessage({ dgn: 'force-clear' }, '*');
+      } catch {}
     }
   }, [activePath]);
 
@@ -2038,37 +2665,44 @@ function App() {
   }, []);
   const deleteComment = useCallback((id) => {
     wsSend({ type: 'comments-delete', id });
-    setFocusedCommentId(prev => (prev === id ? null : prev));
+    setFocusedCommentId((prev) => (prev === id ? null : prev));
   }, []);
 
   // Jump from right-sidebar list to a comment: open file tab if needed, focus pin.
   // The iframe may be freshly mounted; the loaded handler also re-sends focus if focusedCommentId matches.
-  const jumpToComment = useCallback((file, id) => {
-    if (file && file !== activePath) {
-      setTabs(prev => prev.find(t => t.path === file) ? prev : [...prev, { path: file }]);
-      setActivePath(file);
-    }
-    if (id == null) {
-      setFocusedCommentId(null);
-      return;
-    }
-    setFocusedCommentId(id);
-    // Try sending focus immediately (existing iframe) and again after a short delay (newly opened tab).
-    const send = () => {
-      const el = iframesRef.current.get(file);
-      if (el && el.contentWindow) {
-        try { el.contentWindow.postMessage({ dgn: 'comment-focus', id }, '*'); } catch {}
+  const jumpToComment = useCallback(
+    (file, id) => {
+      if (file && file !== activePath) {
+        setTabs((prev) => (prev.find((t) => t.path === file) ? prev : [...prev, { path: file }]));
+        setActivePath(file);
       }
-    };
-    send();
-    setTimeout(send, 200);
-  }, [activePath]);
+      if (id == null) {
+        setFocusedCommentId(null);
+        return;
+      }
+      setFocusedCommentId(id);
+      // Try sending focus immediately (existing iframe) and again after a short delay (newly opened tab).
+      const send = () => {
+        const el = iframesRef.current.get(file);
+        if (el && el.contentWindow) {
+          try {
+            el.contentWindow.postMessage({ dgn: 'comment-focus', id }, '*');
+          } catch {}
+        }
+      };
+      send();
+      setTimeout(send, 200);
+    },
+    [activePath]
+  );
 
   // ----- Keyboard shortcuts (no Cmd+W — let browser close the tab) -----
   useEffect(() => {
     function onKey(e) {
       const meta = e.metaKey || e.ctrlKey;
-      const inEditable = ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName) || document.activeElement?.isContentEditable;
+      const inEditable =
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName) ||
+        document.activeElement?.isContentEditable;
       // Phase 4.1: shell-side letter shortcuts (H/T/S) must not double-fire
       // inside a focused canvas iframe — the canvas input router owns those
       // letters as tool-mode keys (V/H/C). Cmd-modified shortcuts (⌘R, ⌘⇧M,
@@ -2084,7 +2718,7 @@ function App() {
       // Cmd+Shift+M / Ctrl+Shift+M — toggle right "Comments" panel
       if (meta && e.shiftKey && (e.key === 'm' || e.key === 'M')) {
         e.preventDefault();
-        setCommentsPanelOpen(v => !v);
+        setCommentsPanelOpen((v) => !v);
         return;
       }
       // Cmd+C / Ctrl+C — Phase 4.1 removed the shell-side comment-drop chord.
@@ -2092,8 +2726,18 @@ function App() {
       // then click the element) or right-click "Add comment". Cmd+C now
       // reverts to native browser copy.
       if (meta && !e.shiftKey && !e.altKey && (e.key === 'c' || e.key === 'C')) {
-        if (selected && selected.selector && activePath && activePath !== SYSTEM_TAB && !inEditable && console && console.warn) {
-          console.warn('Cmd+C comment-drop deprecated — press C inside the canvas to enter Comment tool, then click the element.');
+        if (
+          selected &&
+          selected.selector &&
+          activePath &&
+          activePath !== SYSTEM_TAB &&
+          !inEditable &&
+          console &&
+          console.warn
+        ) {
+          console.warn(
+            'Cmd+C comment-drop deprecated — press C inside the canvas to enter Comment tool, then click the element.'
+          );
         }
         // Fall through to native copy.
       }
@@ -2126,14 +2770,14 @@ function App() {
       if (e.key === 't' || e.key === 'T') {
         if (e.shiftKey || meta) return;
         e.preventDefault();
-        setSidebarOpen(v => !v);
+        setSidebarOpen((v) => !v);
         return;
       }
       // H — toggle show-hidden (sidecars + project/runtime orphans)
       if (e.key === 'h' || e.key === 'H') {
         if (e.shiftKey || meta) return;
         e.preventDefault();
-        setShowHidden(v => !v);
+        setShowHidden((v) => !v);
         return;
       }
       // S — toggle Design system view
@@ -2155,18 +2799,31 @@ function App() {
       // Esc — clear focused pin. The in-place composer (Phase 6) and thread
       // popover handle their own Esc inside the iframe.
       if (e.key === 'Escape') {
-        if (focusedCommentId) { setFocusedCommentId(null); return; }
+        if (focusedCommentId) {
+          setFocusedCommentId(null);
+          return;
+        }
       }
     }
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [reloadActive, selected, activePath, focusedCommentId, sidebarOpen, openSystem, closeTab, clearActiveCanvasSelection]);
+  }, [
+    reloadActive,
+    selected,
+    activePath,
+    focusedCommentId,
+    sidebarOpen,
+    openSystem,
+    closeTab,
+    clearActiveCanvasSelection,
+  ]);
 
   const registerIframe = useCallback((path, el) => {
     if (el) iframesRef.current.set(path, el);
   }, []);
 
-  const activeFileComments = (activePath && activePath !== SYSTEM_TAB) ? (commentsByFile[activePath] || []) : [];
+  const activeFileComments =
+    activePath && activePath !== SYSTEM_TAB ? commentsByFile[activePath] || [] : [];
   const totalOpen = totalCounts(commentsByFile).open;
 
   // Suppress the native browser context menu across the shell — the canvas
@@ -2177,7 +2834,7 @@ function App() {
   // copy/paste still works.
   const onShellContextMenu = useCallback((e) => {
     const t = e.target;
-    if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || (t.isContentEditable))) {
+    if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) {
       return;
     }
     e.preventDefault();
@@ -2185,7 +2842,9 @@ function App() {
 
   return (
     <div
-      className={'app' + (commentsPanelOpen ? ' with-rsidebar' : '') + (sidebarOpen ? '' : ' no-sidebar')}
+      className={
+        'app' + (commentsPanelOpen ? ' with-rsidebar' : '') + (sidebarOpen ? '' : ' no-sidebar')
+      }
       onContextMenu={onShellContextMenu}
     >
       <SyncBanner status={syncStatus} />
@@ -2214,7 +2873,11 @@ function App() {
           <span>Repo state changed — reload to sync?</span>
           <button
             type="button"
-            onClick={() => { try { window.location.reload(); } catch {} }}
+            onClick={() => {
+              try {
+                window.location.reload();
+              } catch {}
+            }}
             style={{
               padding: '3px 10px',
               background: '#2563eb',
@@ -2224,7 +2887,9 @@ function App() {
               font: '500 11px/1.2 system-ui',
               cursor: 'pointer',
             }}
-          >Reload</button>
+          >
+            Reload
+          </button>
           <button
             type="button"
             onClick={() => setGitLifecycle(null)}
@@ -2237,7 +2902,9 @@ function App() {
               font: '500 11px/1.2 system-ui',
               cursor: 'pointer',
             }}
-          >Dismiss</button>
+          >
+            Dismiss
+          </button>
         </div>
       )}
       <Sidebar
@@ -2262,12 +2929,12 @@ function App() {
           openMenu={openMenu}
           setOpenMenu={setOpenMenu}
           commentsPanelOpen={commentsPanelOpen}
-          onToggleComments={() => setCommentsPanelOpen(v => !v)}
+          onToggleComments={() => setCommentsPanelOpen((v) => !v)}
           onOpenSystem={openSystem}
           sidebarOpen={sidebarOpen}
-          onToggleSidebar={() => setSidebarOpen(v => !v)}
+          onToggleSidebar={() => setSidebarOpen((v) => !v)}
           showHidden={showHidden}
-          onToggleShowHidden={() => setShowHidden(v => !v)}
+          onToggleShowHidden={() => setShowHidden((v) => !v)}
           onOpenHelp={() => setHelpOpen(true)}
           annotationsVisible={annotationsVisible}
           onToggleAnnotations={toggleAnnotations}