@1agh/maude 0.29.0 → 0.30.0

package/apps/studio/client/app.jsx

@@ -4,6 +4,7 @@
 // Universal — no project tokens needed; styling lives in client/styles/.
 
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { createRoot } from 'react-dom/client';
 
 // Trusted tool→cursor resolver (shares the single TOOL_CURSORS source with the
@@ -319,6 +320,96 @@ const STICONS = {
       <polyline points="2.2 9 8 12.3 13.8 9" />
     </>
   ),
+  // Layer-type glyphs (Phase 12.3 W3.1) — one mark per LayerNode `type`.
+  box: <rect x="3" y="3" width="10" height="10" rx="1.2" />,
+  type: (
+    <>
+      <polyline points="4 4 12 4" />
+      <line x1="8" y1="4" x2="8" y2="12" />
+    </>
+  ),
+  button: (
+    <>
+      <rect x="2.5" y="5" width="11" height="6" rx="3" />
+      <line x1="6" y1="8" x2="10" y2="8" />
+    </>
+  ),
+  input: (
+    <>
+      <rect x="2.5" y="5" width="11" height="6" rx="1.2" />
+      <line x1="5" y1="8" x2="5" y2="8" />
+    </>
+  ),
+  link: (
+    <>
+      <path d="M6.5 9.5a2.5 2.5 0 0 1 0-3.5l1.5-1.5a2.5 2.5 0 0 1 3.5 3.5l-1 1" />
+      <path d="M9.5 6.5a2.5 2.5 0 0 1 0 3.5l-1.5 1.5a2.5 2.5 0 0 1-3.5-3.5l1-1" />
+    </>
+  ),
+  list: (
+    <>
+      <line x1="6" y1="4.5" x2="13" y2="4.5" />
+      <line x1="6" y1="8" x2="13" y2="8" />
+      <line x1="6" y1="11.5" x2="13" y2="11.5" />
+      <circle cx="3.2" cy="4.5" r="0.8" fill="currentColor" />
+      <circle cx="3.2" cy="8" r="0.8" fill="currentColor" />
+      <circle cx="3.2" cy="11.5" r="0.8" fill="currentColor" />
+    </>
+  ),
+  eye: (
+    <>
+      <path d="M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8z" />
+      <circle cx="8" cy="8" r="2" />
+    </>
+  ),
+  eyedropper: (
+    <>
+      <path d="M11 2.6a1.7 1.7 0 0 1 2.4 2.4l-1.2 1.2-2.4-2.4z" />
+      <path d="M9.5 4.6 4 10.1V12h1.9l5.5-5.5" />
+    </>
+  ),
+  // Figma-style property prefix glyphs (#2) — small marks INSIDE numeric fields.
+  'p-corner': <path d="M3.5 12.5V7a3.5 3.5 0 0 1 3.5-3.5h5.5" />,
+  'p-opacity': (
+    <>
+      <rect x="3" y="3" width="10" height="10" rx="1.5" />
+      <path d="M3 8h10M8 3v10" strokeWidth="0.9" opacity="0.55" />
+    </>
+  ),
+  'p-lineheight': (
+    <>
+      <line x1="6.5" y1="4" x2="13" y2="4" />
+      <line x1="6.5" y1="8" x2="13" y2="8" />
+      <line x1="6.5" y1="12" x2="13" y2="12" />
+      <path d="M3.2 4.6 3.2 11.4M2 6 3.2 4.5 4.4 6M2 10 3.2 11.5 4.4 10" />
+    </>
+  ),
+  'p-letterspacing': (
+    <>
+      <path d="M3 4v8M13 4v8" />
+      <path d="M6 11.5 8 5l2 6.5M6.7 9.3h2.6" strokeWidth="1.1" />
+    </>
+  ),
+  'p-gap': (
+    <>
+      <rect x="2" y="4.5" width="3.6" height="7" rx="0.6" />
+      <rect x="10.4" y="4.5" width="3.6" height="7" rx="0.6" />
+      <path d="M6.8 8h2.4M7.4 6.9 6.4 8l1 1.1M8.6 6.9 9.6 8l-1 1.1" strokeWidth="1" />
+    </>
+  ),
+  'p-border': <rect x="3" y="3" width="10" height="10" rx="1" />,
+  'p-size': (
+    <>
+      <path d="M3 13 6.6 3l3.6 10" />
+      <path d="M4.3 9.6h4.6" />
+    </>
+  ),
+  'eye-off': (
+    <>
+      <path d="M6.3 4A6.7 6.7 0 0 1 8 3.5C12 3.5 14.5 8 14.5 8a12 12 0 0 1-2 2.4M4.4 5.3A12 12 0 0 0 1.5 8S4 12.5 8 12.5a6.5 6.5 0 0 0 2.1-.35" />
+      <line x1="2.5" y1="2.5" x2="13.5" y2="13.5" />
+    </>
+  ),
   sliders: (
     <>
       <line x1="3" y1="5" x2="13" y2="5" />
@@ -390,6 +481,22 @@ const STICONS = {
       <line x1="13" y1="3" x2="7.6" y2="8.4" />
     </>
   ),
+  share: (
+    <>
+      <circle cx="4" cy="8" r="1.9" />
+      <circle cx="11.6" cy="3.6" r="1.9" />
+      <circle cx="11.6" cy="12.4" r="1.9" />
+      <line x1="5.7" y1="7" x2="9.9" y2="4.6" />
+      <line x1="5.7" y1="9" x2="9.9" y2="11.4" />
+    </>
+  ),
+  pen: (
+    <>
+      <path d="M3 13l.8-3L10.6 3.2a1.1 1.1 0 0 1 1.6 0l.6.6a1.1 1.1 0 0 1 0 1.6L6 12.2z" />
+      <line x1="9.6" y1="4.2" x2="11.8" y2="6.4" />
+    </>
+  ),
+  square: <rect x="3.5" y="3.5" width="9" height="9" rx="1" />,
 };
 
 // ⌘K command palette — the mockup's signature surface, wired to real shell
@@ -398,12 +505,19 @@ const STICONS = {
 function CommandPalette({ open, onClose, actions }) {
   const [q, setQ] = useState('');
   const [active, setActive] = useState(0);
+  const listRef = useRef(null);
   useEffect(() => {
     if (open) {
       setQ('');
       setActive(0);
     }
   }, [open]);
+  // Keep the keyboard-active row visible while arrowing through a scrolled list.
+  useEffect(() => {
+    listRef.current
+      ?.querySelector('.st-pal-item.is-active')
+      ?.scrollIntoView({ block: 'nearest' });
+  }, [active]);
   const filtered = useMemo(() => {
     const needle = q.trim().toLowerCase();
     if (!needle) return actions;
@@ -457,7 +571,7 @@ function CommandPalette({ open, onClose, actions }) {
           />
           <Kbd>⌘K</Kbd>
         </div>
-        <div className="st-pal-list">
+        <div className="st-pal-list" ref={listRef}>
           {filtered.length === 0 ? (
             <div className="st-pal-empty">No matching command.</div>
           ) : (
@@ -530,9 +644,19 @@ function initialsOf(name) {
   if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
   return ((parts[0][0] || '') + (parts[parts.length - 1][0] || '')).toUpperCase() || '?';
 }
-function StAvatar({ initials, hue, title }) {
+function StAvatar({ initials, hue, title, pulse }) {
+  // Hue rides a custom property so CSS can mix it into the surface (DS avatar
+  // recipe: tinted bg + hue border + fg-0 text — solid fill + white text broke
+  // the accent-fg contrast rule and washed out in light theme). `pulse` plays
+  // the DS motion-presence role (scale+opacity ring) — the AI agent's "live"
+  // tell while it's editing.
   return (
-    <span className="st-avatar" style={{ background: hue }} title={title} aria-label={title}>
+    <span
+      className={'st-avatar' + (pulse ? ' is-pulsing' : '')}
+      style={{ '--av-hue': hue }}
+      data-tip={title}
+      aria-label={title}
+    >
       {initials}
     </span>
   );
@@ -542,6 +666,78 @@ function Kbd({ children }) {
   return <span className="kbd">{children}</span>;
 }
 
+// ───────── Resizable panel grip (DS components-resize-panels contract) ─────────
+//
+// 8px hit area on a 1px seam; grip dots + accent surface on hover/focus/drag;
+// pointer drag (with capture, so moves keep arriving over the iframe), arrow-key
+// nudge (8px, ⇧=24px), Home/End to min/max, double-click resets to default.
+// Width persists per panel in localStorage.
+
+function usePanelSize(storeKey, { min, max, def }) {
+  const clamp = useCallback((v) => Math.min(max, Math.max(min, v)), [min, max]);
+  const [w, setWRaw] = useState(() => {
+    try {
+      const v = parseInt(localStorage.getItem(storeKey) || '', 10);
+      return Number.isFinite(v) ? clamp(v) : def;
+    } catch {
+      return def;
+    }
+  });
+  useEffect(() => {
+    try {
+      localStorage.setItem(storeKey, String(w));
+    } catch {}
+  }, [storeKey, w]);
+  const setW = useCallback(
+    (next) => setWRaw((prev) => clamp(typeof next === 'function' ? next(prev) : next)),
+    [clamp]
+  );
+  return { w, setW, min, max, def };
+}
+
+function PanelGrip({ label, size, onPointerDown, active, dir = 'ltr' }) {
+  const { w, setW, min, max, def } = size;
+  // `dir` is grip-relative: 'ltr' (left panel) → ArrowRight widens; 'rtl'
+  // (right dock) → ArrowRight narrows, since the seam moves toward the panel.
+  const grow = dir === 'rtl' ? -1 : 1;
+  return (
+    <div
+      className={'st-grip' + (active ? ' is-active' : '')}
+      role="separator"
+      tabIndex={0}
+      aria-orientation="vertical"
+      aria-label={label}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={Math.round(w)}
+      onPointerDown={onPointerDown}
+      onDoubleClick={() => setW(def)}
+      onKeyDown={(e) => {
+        const step = e.shiftKey ? 24 : 8;
+        if (e.key === 'ArrowRight') {
+          e.preventDefault();
+          setW((v) => v + step * grow);
+        } else if (e.key === 'ArrowLeft') {
+          e.preventDefault();
+          setW((v) => v - step * grow);
+        } else if (e.key === 'Home') {
+          e.preventDefault();
+          setW(min);
+        } else if (e.key === 'End') {
+          e.preventDefault();
+          setW(max);
+        }
+      }}
+    >
+      <svg className="st-grip-dots" viewBox="0 0 6 18" aria-hidden="true">
+        <circle cx="3" cy="3" r="1.1" fill="currentColor" />
+        <circle cx="3" cy="9" r="1.1" fill="currentColor" />
+        <circle cx="3" cy="15" r="1.1" fill="currentColor" />
+      </svg>
+    </div>
+  );
+}
+
 // T5 (Plan C) — shell-level Export & Handoff dialog (maude `.st-dialog`), per
 // `.design/ui/Studio.tsx` HandoffBoard. Wired to the privileged main-origin
 // `POST /_api/export` (7 real formats × scopes). The shadcn card is HANDOFF —
@@ -817,7 +1013,7 @@ function DirRow({ name, depth, defaultOpen, children }) {
         onClick={() => setOpen((v) => !v)}
       >
         <span className="st-row-glyph">
-          <StIcon name={open ? 'chevron-down' : 'chevron-right'} size={13} />
+          <StIcon name="chevron-right" className={'st-chev' + (open ? ' is-open' : '')} size={13} />
         </span>
         <span className="st-row-name">{name}</span>
       </button>
@@ -847,7 +1043,7 @@ function DsFolderRow({ name, dsName, depth, defaultOpen, active, onOpenSystem, c
           aria-label={open ? 'Collapse design system' : 'Expand design system'}
           title={open ? 'Collapse' : 'Expand'}
         >
-          <StIcon name={open ? 'chevron-down' : 'chevron-right'} size={13} />
+          <StIcon name="chevron-right" className={'st-chev' + (open ? ' is-open' : '')} size={13} />
         </button>
         <button
           type="button"
@@ -983,7 +1179,7 @@ function CanvasRow({
             setOpenState((v) => !v);
           }}
         >
-          <StIcon name={open ? 'chevron-down' : 'chevron-right'} size={13} />
+          <StIcon name="chevron-right" className={'st-chev' + (open ? ' is-open' : '')} size={13} />
         </span>
         <span className="st-row-name">{displayName(primary.name)}</span>
         {oc > 0 && <span className="st-row-badge">{oc}</span>}
@@ -1155,6 +1351,8 @@ function Sidebar({
   onDeleteBoard,
   collapsed,
   onCollapse,
+  width,
+  resizing,
 }) {
   const filteredGroups = useMemo(() => {
     if (!search) return groups;
@@ -1200,14 +1398,19 @@ function Sidebar({
   }, [filteredGroups]);
 
   return (
-    <nav className={'st-sidebar' + (collapsed ? ' is-collapsed' : '')} aria-label="Files">
+    <nav
+      className={'st-sidebar' + (collapsed ? ' is-collapsed' : '') + (resizing ? ' is-resizing' : '')}
+      style={collapsed || !width ? undefined : { width, flexBasis: width }}
+      aria-label="Files"
+      data-tour="sidebar"
+    >
       <div className="st-sb-hd">
         <span className="st-sb-title">Files</span>
         <div className="st-sb-hd-actions">
           <button
             type="button"
             className="st-iconbtn"
-            title="New blank brief board"
+            data-tip="New blank brief board"
             aria-label="New blank brief board"
             aria-expanded={creating}
             onClick={() => {
@@ -1217,7 +1420,10 @@ function Sidebar({
           >
             <StIcon name="plus" size={15} />
           </button>
-          <span className="st-live" title={wsConnected ? 'live · file index synced' : 'reconnecting…'}>
+          <span
+            className="st-live"
+            data-tip={wsConnected ? 'live · file index synced' : 'reconnecting…'}
+          >
             <span className={'st-live-dot' + (wsConnected ? ' is-connected' : '')} aria-hidden="true" />
             {htmlShown} / {htmlCount}
           </span>
@@ -1226,7 +1432,7 @@ function Sidebar({
               type="button"
               className="st-iconbtn"
               aria-label="Collapse sidebar"
-              title="Collapse sidebar (T)"
+              data-tip="Collapse sidebar · T"
               onClick={onCollapse}
             >
               <StIcon name="panel-left" size={15} />
@@ -1263,7 +1469,7 @@ function Sidebar({
             type="button"
             className="st-newboard-go"
             disabled={newBusy || !newName.trim()}
-            title="Create (Enter)"
+            data-tip="Create · Enter"
             aria-label="Create brief board"
             onClick={submitNewBoard}
           >
@@ -1285,13 +1491,21 @@ function Sidebar({
             placeholder="Search canvases…"
             value={search}
             onChange={(e) => setSearch(e.target.value)}
+            onKeyDown={(e) => {
+              // Esc — clear the filter first; a second Esc leaves the field.
+              if (e.key === 'Escape') {
+                e.preventDefault();
+                if (search) setSearch('');
+                else e.currentTarget.blur();
+              }
+            }}
             aria-label="Filter files"
           />
           {search ? (
             <button
               className="st-search-clear"
               onClick={() => setSearch('')}
-              title="Clear (Esc)"
+              data-tip="Clear · Esc"
               aria-label="Clear search"
             >
               ×
@@ -1336,7 +1550,7 @@ function Sidebar({
                 aria-expanded={sectionOpen}
                 title={sectionOpen ? 'Collapse section' : 'Expand section'}
               >
-                <StIcon name={sectionOpen ? 'chevron-down' : 'chevron-right'} size={13} />
+                <StIcon name="chevron-right" className={'st-chev' + (sectionOpen ? ' is-open' : '')} size={13} />
                 <span className="st-sec-name">{meta.title}</span>
                 {pill && <span className="st-pill">{pill}</span>}
               </button>
@@ -1417,7 +1631,7 @@ function HelpModal({ open, onClose, onStartTour }) {
           <span className="title" id="help-modal-title">
             Help · shortcuts &amp; commands
           </span>
-          <span className="sku">MDCC-DEV-SRV / v{MDCC_VERSION}</span>
+          <span className="sku">MAUDE-DEV-SRV / v{MDCC_VERSION}</span>
           {onStartTour && (
             <button
               type="button"
@@ -1506,22 +1720,28 @@ function HelpModal({ open, onClose, onStartTour }) {
             </ul>
           </details>
           <details>
-            <summary>Tabs &amp; canvas</summary>
+            <summary>Canvas &amp; panels</summary>
             <ul>
               <li>
-                click in tree <span>open tab</span>
+                click in tree <span>open canvas (replaces the active one)</span>
               </li>
               <li>
-                <kbd>×</kbd> on tab <span>close tab</span>
+                File ▸ Close canvas <span>clear the stage</span>
               </li>
               <li>
-                <kbd>⌘R</kbd> <span>reload iframe</span>
+                <kbd>⌘R</kbd> <span>reload canvas</span>
               </li>
               <li>
                 <kbd>/</kbd> <span>focus search</span>
               </li>
               <li>
-                <kbd>⌘⇧M</kbd> <span>toggle comments panel</span>
+                <kbd>⌘⇧M</kbd> <span>comments panel</span>
+              </li>
+              <li>
+                <kbd>⌘⇧I</kbd> <span>inspector</span>
+              </li>
+              <li>
+                <kbd>?</kbd> <span>keyboard-shortcuts cheat sheet</span>
               </li>
             </ul>
           </details>
@@ -1661,7 +1881,7 @@ function HelpModal({ open, onClose, onStartTour }) {
           <details>
             <summary>Pin-to-element flow</summary>
             <ol>
-              <li>Open canvas tab</li>
+              <li>Open a canvas</li>
               <li>
                 <kbd>⌘</kbd>+click element
               </li>
@@ -1701,13 +1921,152 @@ function HelpModal({ open, onClose, onStartTour }) {
   );
 }
 
+// ───────── Keyboard-shortcuts overlay (DS components-shortcuts-overlay) ─────
+//
+// The ? cheat-sheet: dim scrim, shared panel material, four dense mono-headed
+// columns, Esc chip in the footer. REAL bindings only — every row here is
+// wired in the shell handler, the canvas input-router, or canvas-lib's
+// viewport controller. Scope chips mark the rows that need canvas focus.
+
+const SHORTCUT_GROUPS = [
+  {
+    id: 'canvas',
+    label: 'Canvas',
+    items: [
+      { label: 'Command palette', kbd: '⌘ K' },
+      { label: 'New brief board', kbd: 'N' },
+      { label: 'Export…', kbd: '⇧ ⌘ E' },
+      { label: 'Handoff to production', kbd: '⇧ ⌘ H' },
+      { label: 'Reload canvas', kbd: '⌘ R' },
+      { label: 'Search files', kbd: '/', alt: '⌘ F' },
+    ],
+  },
+  {
+    id: 'tools',
+    label: 'Tools · canvas focus',
+    items: [
+      { label: 'Move · Hand · Comment', kbd: 'V', alt: 'H / C' },
+      { label: 'Pen · Highlighter · Eraser', kbd: 'B', alt: 'I / E' },
+      { label: 'Shape · Arrow', kbd: 'R', alt: 'A' },
+      { label: 'Sticky · Text · Section', kbd: 'N', alt: 'T / ⇧S' },
+      { label: 'Undo / redo', kbd: '⌘ Z', alt: '⇧ ⌘ Z' },
+    ],
+  },
+  {
+    id: 'selection',
+    label: 'Selection & zoom',
+    items: [
+      { label: 'Select element', kbd: '⌘ click' },
+      { label: 'Add to selection', kbd: '⌘ ⇧ click' },
+      { label: 'Preview deepest', kbd: '⌘ hover' },
+      { label: 'Deselect · close menu', kbd: 'Esc' },
+      { label: 'Zoom in / out', kbd: '⌘ +', alt: '⌘ −' },
+      { label: 'Fit · actual size', kbd: '⌘ 0', alt: '⌘ 1' },
+    ],
+  },
+  {
+    id: 'view',
+    label: 'View',
+    items: [
+      { label: 'Project tree', kbd: 'T' },
+      { label: 'Design system view', kbd: 'S' },
+      { label: 'Inspector', kbd: '⌘ ⇧ I' },
+      { label: 'Comments sidebar', kbd: '⌘ ⇧ M' },
+      { label: 'Annotations', kbd: '⇧ P' },
+      { label: 'Hidden files', kbd: 'H' },
+      { label: 'This cheat sheet · help', kbd: '?', alt: 'F1' },
+    ],
+  },
+];
+
+function ShortcutCombo({ kbd, alt }) {
+  const combo = (s, key) => (
+    <span className="so-combo" key={key}>
+      {s.split(' ').map((k, i) => (
+        <Kbd key={`${k}-${i}`}>{k}</Kbd>
+      ))}
+    </span>
+  );
+  return (
+    <span className="so-combos">
+      {combo(kbd, 'main')}
+      {alt
+        ? alt.split(' / ').map((a) => (
+            <Fragment key={a}>
+              <span className="so-or">/</span>
+              {combo(a, a)}
+            </Fragment>
+          ))
+        : null}
+    </span>
+  );
+}
+
+function ShortcutsOverlay({ open, onClose }) {
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e) {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  const bindings = SHORTCUT_GROUPS.reduce((n, g) => n + g.items.length, 0);
+  return (
+    <div
+      className="st-scrim"
+      role="presentation"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="so-overlay" role="dialog" aria-modal="true" aria-label="Keyboard shortcuts">
+        <div className="so-overlay-hd">
+          <span className="so-title">Keyboard shortcuts</span>
+          <span className="so-trigger">
+            press <Kbd>?</Kbd> to open
+          </span>
+        </div>
+        <div className="so-columns">
+          {SHORTCUT_GROUPS.map((g) => (
+            <section key={g.id} className={'so-section so-section--' + g.id}>
+              <h3 className="so-section-hd">{g.label}</h3>
+              <dl className="so-list">
+                {g.items.map((it) => (
+                  <div key={it.label} className="so-pair">
+                    <dt>{it.label}</dt>
+                    <dd>
+                      <ShortcutCombo kbd={it.kbd} alt={it.alt} />
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+            </section>
+          ))}
+        </div>
+        <div className="so-overlay-ft">
+          <span>
+            close with <Kbd>Esc</Kbd>
+          </span>
+          <span className="so-count">
+            {bindings} bindings · {SHORTCUT_GROUPS.length} groups
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 // ───────── Menubar (CV-01/CV-08 top chrome) ─────────
 //
 // Replaces the legacy `.header` action-button toolbar. Mirrors the shared
 // Menubar component from .design/ui/Canvas Viewport.html — brand · menus ·
-// status. View dropdown is wired to the only toggleable panel today (the
-// Comments sidebar); the rest is inert with a phase-tag explaining when it
-// lands.
+// status. View dropdown is wired to the panels + zoom that exist today;
+// Presentation Mode stays phase-tagged until it ships.
 
 const MENU_NAMES = ['File', 'Edit', 'View', 'Selection', 'Tools', 'Help'];
 
@@ -1729,7 +2088,7 @@ function useDropdownClose(onClose) {
   }, [onClose]);
 }
 
-function ViewDropdown({ panels, onToggle, onClose }) {
+function ViewDropdown({ panels, onToggle, onClose, onZoom, hasCanvas }) {
   useDropdownClose(onClose);
   return (
     <div className="st-dropdown" role="menu" aria-label="View" style={{ left: 152 }}>
@@ -1752,117 +2111,55 @@ function ViewDropdown({ panels, onToggle, onClose }) {
             <span className="st-dd-check">{p.checked ? <StIcon name="check" size={13} /> : null}</span>
             <span>{p.label}</span>
           </span>
-          {p.phase ? <span className="st-dd-phase">{p.phase}</span> : <Kbd>{p.shortcut || ''}</Kbd>}
+          {p.phase ? (
+            <span className="st-dd-phase">{p.phase}</span>
+          ) : p.shortcut ? (
+            <Kbd>{p.shortcut}</Kbd>
+          ) : null}
         </button>
       ))}
       <div className="st-dd-sep" />
       <div className="st-dd-hd">Zoom</div>
       {[
-        { label: 'Zoom In', shortcut: '⌘ +' },
-        { label: 'Zoom Out', shortcut: '⌘ −' },
-        { label: 'Fit to Screen', shortcut: '⌘ 0' },
-        { label: 'Actual Size · 100 %', shortcut: '⌥ ⌘ 0' },
+        { op: 'in', label: 'Zoom In', shortcut: '⌘ +' },
+        { op: 'out', label: 'Zoom Out', shortcut: '⌘ −' },
+        { op: 'fit', label: 'Fit to Screen', shortcut: '⌘ 0' },
+        { op: 'actual', label: 'Actual Size · 100 %', shortcut: '⌘ 1' },
       ].map((z) => (
-        <button key={z.label} type="button" role="menuitem" className="st-dd-item" aria-disabled="true">
-          <span className="st-dd-lead">
-            <span className="st-dd-check" />
-            <span>{z.label}</span>
-          </span>
-          <span className="st-dd-phase">Phase 4</span>
-        </button>
-      ))}
-    </div>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Phase 5.1 — Selection + Tools dropdowns (mirror ViewDropdown shape).
-
-function SelectionDropdown({ onAction, onClose }) {
-  useDropdownClose(onClose);
-  const items = [
-    { id: 'deselect-all', label: 'Deselect all', shortcut: 'Esc' },
-    { id: 'select-all-annotations', label: 'Select all annotations', shortcut: '⌘ ⇧ A' },
-  ];
-  return (
-    <div className="st-dropdown" role="menu" aria-label="Selection" style={{ left: 214 }}>
-      {items.map((it) => (
-        <button
-          key={it.id}
-          type="button"
-          role="menuitem"
-          className="st-dd-item"
-          onClick={() => {
-            onAction(it.id);
-            onClose();
-          }}
-        >
-          <span className="st-dd-lead">
-            <span className="st-dd-check" />
-            <span>{it.label}</span>
-          </span>
-          <Kbd>{it.shortcut}</Kbd>
-        </button>
-      ))}
-    </div>
-  );
-}
-
-function ToolsDropdown({ onAction, onClose }) {
-  useDropdownClose(onClose);
-  // Mirrors DEFAULT_TOOLS in apps/studio/use-tool-mode.tsx —
-  // 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: 'comment', label: 'Comment', shortcut: 'C' },
-    { 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' },
-  ];
-  return (
-    <div className="st-dropdown" role="menu" aria-label="Tools" style={{ left: 290 }}>
-      <div className="st-dd-hd">Tool palette</div>
-      {tools.map((t) => (
         <button
-          key={t.id}
+          key={z.label}
           type="button"
           role="menuitem"
           className="st-dd-item"
+          aria-disabled={hasCanvas ? undefined : 'true'}
           onClick={() => {
-            onAction(t.id);
+            if (!hasCanvas) return;
+            onZoom?.(z.op);
             onClose();
           }}
         >
           <span className="st-dd-lead">
             <span className="st-dd-check" />
-            <span>{t.label}</span>
+            <span>{z.label}</span>
           </span>
-          <Kbd>{t.shortcut}</Kbd>
+          <Kbd>{z.shortcut}</Kbd>
         </button>
       ))}
     </div>
   );
 }
 
-// Plan C follow-up — File + Edit menus, previously inert. Both dispatch to real
-// shell flows (File) or the in-canvas undo stack / selection bridges (Edit).
-function FileDropdown({ onAction, onClose }) {
+// Help dropdown — cheat sheet · deep help · tour · what's new.
+// Shared menubar dropdown — File / Edit / Selection / Tools / Help all render
+// the identical {id,label,shortcut,sep?,disabled?} list over the same button
+// skeleton, differing only in aria-label, left offset, and an optional header.
+// (ViewDropdown stays separate — its checkbox/phase/zoom-op rows genuinely
+// diverge.) Per the /flow:done simplifier pass — collapsed 5 near-dupes.
+function DropdownMenu({ label, left, header, items, onAction, onClose }) {
   useDropdownClose(onClose);
-  const items = [
-    { id: 'new', label: 'New canvas…', shortcut: '⌘N' },
-    { id: 'export', label: 'Export…', shortcut: '⇧⌘E' },
-    { id: 'handoff', label: 'Handoff to production', shortcut: '⇧⌘H' },
-    { sep: true },
-    { id: 'reload', label: 'Reload canvas', shortcut: '⌘R' },
-  ];
   return (
-    <div className="st-dropdown" role="menu" aria-label="File" style={{ left: 40 }}>
+    <div className="st-dropdown" role="menu" aria-label={label} style={{ left }}>
+      {header ? <div className="st-dd-hd">{header}</div> : null}
       {items.map((it, i) =>
         it.sep ? (
           <div key={'s' + i} className="st-dd-sep" />
@@ -1872,7 +2169,9 @@ function FileDropdown({ onAction, onClose }) {
             type="button"
             role="menuitem"
             className="st-dd-item"
+            aria-disabled={it.disabled ? 'true' : undefined}
             onClick={() => {
+              if (it.disabled) return;
               onAction(it.id);
               onClose();
             }}
@@ -1881,7 +2180,7 @@ function FileDropdown({ onAction, onClose }) {
               <span className="st-dd-check" />
               <span>{it.label}</span>
             </span>
-            <Kbd>{it.shortcut}</Kbd>
+            {it.shortcut ? <Kbd>{it.shortcut}</Kbd> : null}
           </button>
         )
       )}
@@ -1889,40 +2188,103 @@ function FileDropdown({ onAction, onClose }) {
   );
 }
 
+function HelpDropdown({ onAction, onClose }) {
+  return (
+    <DropdownMenu
+      label="Help"
+      left={320}
+      onAction={onAction}
+      onClose={onClose}
+      items={[
+        { id: 'shortcuts', label: 'Keyboard shortcuts', shortcut: '?' },
+        { id: 'help', label: 'Help · commands & flows', shortcut: 'F1' },
+        { sep: true },
+        { id: 'tour', label: 'Take the tour' },
+        { id: 'whatsnew', label: "What's new" },
+      ]}
+    />
+  );
+}
+
+function SelectionDropdown({ onAction, onClose }) {
+  return (
+    <DropdownMenu
+      label="Selection"
+      left={214}
+      onAction={onAction}
+      onClose={onClose}
+      items={[
+        { id: 'deselect-all', label: 'Deselect all', shortcut: 'Esc' },
+        { id: 'select-all-annotations', label: 'Select all annotations', shortcut: '⌘ ⇧ A' },
+      ]}
+    />
+  );
+}
+
+function ToolsDropdown({ onAction, onClose }) {
+  // Mirrors DEFAULT_TOOLS in apps/studio/use-tool-mode.tsx — kept in sync by
+  // hand because the menubar lives in the dev-server shell (no shared bundle
+  // with the canvas iframes).
+  return (
+    <DropdownMenu
+      label="Tools"
+      left={290}
+      header="Tool palette"
+      onAction={onAction}
+      onClose={onClose}
+      items={[
+        { 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: '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' },
+      ]}
+    />
+  );
+}
+
+// Plan C follow-up — File + Edit menus, previously inert. Both dispatch to real
+// shell flows (File) or the in-canvas undo stack / selection bridges (Edit).
+function FileDropdown({ onAction, onClose, hasCanvas }) {
+  return (
+    <DropdownMenu
+      label="File"
+      left={40}
+      onAction={onAction}
+      onClose={onClose}
+      items={[
+        // Bare N — the browser reserves ⌘N (New Window) and never delivers it.
+        { id: 'new', label: 'New canvas…', shortcut: 'N' },
+        { id: 'export', label: 'Export…', shortcut: '⇧⌘E' },
+        { id: 'handoff', label: 'Handoff to production', shortcut: '⇧⌘H' },
+        { sep: true },
+        { id: 'reload', label: 'Reload canvas', shortcut: '⌘R', disabled: !hasCanvas },
+        { id: 'close', label: 'Close canvas', disabled: !hasCanvas },
+      ]}
+    />
+  );
+}
+
 function EditDropdown({ onAction, onClose }) {
-  useDropdownClose(onClose);
-  const items = [
-    { id: 'undo', label: 'Undo', shortcut: '⌘Z' },
-    { id: 'redo', label: 'Redo', shortcut: '⇧⌘Z' },
-    { sep: true },
-    { id: 'deselect-all', label: 'Deselect all', shortcut: 'Esc' },
-    { id: 'select-all-annotations', label: 'Select all annotations', shortcut: '⇧⌘A' },
-  ];
   return (
-    <div className="st-dropdown" role="menu" aria-label="Edit" style={{ left: 90 }}>
-      {items.map((it, i) =>
-        it.sep ? (
-          <div key={'s' + i} className="st-dd-sep" />
-        ) : (
-          <button
-            key={it.id}
-            type="button"
-            role="menuitem"
-            className="st-dd-item"
-            onClick={() => {
-              onAction(it.id);
-              onClose();
-            }}
-          >
-            <span className="st-dd-lead">
-              <span className="st-dd-check" />
-              <span>{it.label}</span>
-            </span>
-            <Kbd>{it.shortcut}</Kbd>
-          </button>
-        )
-      )}
-    </div>
+    <DropdownMenu
+      label="Edit"
+      left={90}
+      onAction={onAction}
+      onClose={onClose}
+      items={[
+        { id: 'undo', label: 'Undo', shortcut: '⌘Z' },
+        { id: 'redo', label: 'Redo', shortcut: '⇧⌘Z' },
+        { sep: true },
+        { id: 'deselect-all', label: 'Deselect all', shortcut: 'Esc' },
+        { id: 'select-all-annotations', label: 'Select all annotations', shortcut: '⇧⌘A' },
+      ]}
+    />
   );
 }
 
@@ -1940,6 +2302,8 @@ function Menubar({
   showHidden,
   onToggleShowHidden,
   onOpenHelp,
+  onOpenShortcuts,
+  onStartTour,
   annotationsVisible,
   onToggleAnnotations,
   postToActiveCanvas,
@@ -1948,10 +2312,13 @@ function Menubar({
   artboardCount = 0,
   presence = null,
   inspectorOpen,
+  inspectorTab,
   onToggleInspector,
+  onOpenLayers,
   onNewCanvas,
   onOpenExport,
   onReload,
+  onCloseCanvas,
 }) {
   const isSystem = activePath === SYSTEM_TAB;
   const stamp = isSystem ? 'SYSTEM' : activePath ? 'CANVAS' : 'IDLE';
@@ -1981,8 +2348,20 @@ function Menubar({
       checked: showHidden,
       disabled: false,
     },
-    { id: 'layers', label: 'Layers Panel', phase: 'Phase 12', disabled: true },
-    { id: 'inspector', label: 'Inspector', shortcut: 'I', checked: inspectorOpen, disabled: false },
+    {
+      id: 'layers',
+      label: 'Layers',
+      shortcut: '',
+      checked: inspectorOpen && inspectorTab === 'layers',
+      disabled: false,
+    },
+    {
+      id: 'inspector',
+      label: 'Inspector',
+      shortcut: '⌘ ⇧ I',
+      checked: inspectorOpen,
+      disabled: false,
+    },
     {
       id: 'annotate',
       label: 'Annotations',
@@ -1993,25 +2372,67 @@ function Menubar({
     { id: 'present', label: 'Presentation Mode', phase: 'Phase 6', disabled: true },
   ];
 
-  const DROPDOWN_MENUS = ['file', 'edit', 'view', 'selection', 'tools'];
+  const DROPDOWN_MENUS = ['file', 'edit', 'view', 'selection', 'tools', 'help'];
   function onMenuClick(key) {
     if (DROPDOWN_MENUS.includes(key)) {
       setOpenMenu(openMenu === key ? null : key);
-    } else if (key === 'help') {
-      setOpenMenu(null);
-      onOpenHelp();
     }
   }
 
+  // Keyboard menubar (native-menu parity): while a dropdown is open, ↑/↓ rove
+  // its items, ←/→ switch to the adjacent menu, Home/End jump, Esc returns
+  // focus to the trigger (useDropdownClose handles the close itself).
+  useEffect(() => {
+    if (!openMenu || !DROPDOWN_MENUS.includes(openMenu)) return;
+    // Move focus into the menu so ↑/↓ work immediately after a click.
+    const t = setTimeout(() => {
+      document
+        .querySelector('.st-dropdown [role="menuitem"]:not([aria-disabled="true"])')
+        ?.focus();
+    }, 0);
+    function onKey(e) {
+      const items = [
+        ...document.querySelectorAll('.st-dropdown [role="menuitem"]:not([aria-disabled="true"])'),
+      ];
+      if (!items.length) return;
+      const idx = items.indexOf(document.activeElement);
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        items[(idx + 1) % items.length].focus();
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        items[(idx - 1 + items.length) % items.length].focus();
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        items[0].focus();
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        items[items.length - 1].focus();
+      } else if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+        e.preventDefault();
+        const dir = e.key === 'ArrowRight' ? 1 : -1;
+        const cur = DROPDOWN_MENUS.indexOf(openMenu);
+        setOpenMenu(DROPDOWN_MENUS[(cur + dir + DROPDOWN_MENUS.length) % DROPDOWN_MENUS.length]);
+      } else if (e.key === 'Escape') {
+        document.querySelector('.st-menu[aria-expanded="true"]')?.focus();
+      }
+    }
+    window.addEventListener('keydown', onKey);
+    return () => {
+      clearTimeout(t);
+      window.removeEventListener('keydown', onKey);
+    };
+  }, [openMenu, setOpenMenu]);
+
   return (
     <header className="st-menubar" role="menubar" aria-label="Application menubar">
-      <span className="st-brand">
+      <span className="st-brand" data-tour="brand">
         <span className="st-brand-mark">
           <svg viewBox="0 0 32 32" width="100%" height="100%" fill="none" aria-hidden="true"><path d="M16 5l2.8 8.2L27 16l-8.2 2.8L16 27l-2.8-8.2L5 16l8.2-2.8z" fill="currentColor" /></svg>
         </span>
         <span className="st-brand-name">maude</span>
       </span>
-      <nav className="st-menus" aria-label="Application menus">
+      <nav className="st-menus" aria-label="Application menus" data-tour="menus">
         {MENU_NAMES.map((name) => {
           const key = name.toLowerCase();
           const hasDropdown = DROPDOWN_MENUS.includes(key);
@@ -2040,11 +2461,13 @@ function Menubar({
       </nav>
       {openMenu === 'file' && (
         <FileDropdown
+          hasCanvas={!!activePath}
           onAction={(id) => {
             if (id === 'new') onNewCanvas?.();
             else if (id === 'export') onOpenExport?.('export');
             else if (id === 'handoff') onOpenExport?.('handoff');
             else if (id === 'reload') onReload?.();
+            else if (id === 'close') onCloseCanvas?.();
           }}
           onClose={() => setOpenMenu(null)}
         />
@@ -2070,7 +2493,10 @@ function Menubar({
             else if (id === 'hidden') onToggleShowHidden();
             else if (id === 'annotate') onToggleAnnotations();
             else if (id === 'inspector') onToggleInspector();
+            else if (id === 'layers') onOpenLayers?.();
           }}
+          onZoom={(op) => postToActiveCanvas({ dgn: 'zoom', op })}
+          hasCanvas={!!activePath && !isSystem}
           onClose={() => setOpenMenu(null)}
         />
       )}
@@ -2090,14 +2516,26 @@ function Menubar({
           onClose={() => setOpenMenu(null)}
         />
       )}
-      <div className="st-mb-right">
+      {openMenu === 'help' && (
+        <HelpDropdown
+          onAction={(id) => {
+            if (id === 'shortcuts') onOpenShortcuts?.();
+            else if (id === 'help') onOpenHelp?.();
+            else if (id === 'tour') onStartTour?.();
+            else if (id === 'whatsnew') onOpenWhatsNew?.();
+          }}
+          onClose={() => setOpenMenu(null)}
+        />
+      )}
+      <div className="st-mb-right" data-tour="status">
         {presence ? <div className="st-presence">{presence}</div> : null}
         <button
           type="button"
           className="st-whatsnew"
+          data-tour="whatsnew"
           data-unseen={whatsNewCount > 0 ? 'true' : 'false'}
           aria-label={`What's new${whatsNewCount > 0 ? ` — ${whatsNewCount} unseen` : ''}`}
-          title="What's new"
+          data-tip="What's new"
           onClick={onOpenWhatsNew}
         >
           <StIcon name="sparkle" size={15} />
@@ -2107,7 +2545,7 @@ function Menubar({
           {fileLabel}
         </span>
         <span className="st-mb-sep" />
-        <span className="st-mb-count" title="Artboards in the open canvas">
+        <span className="st-mb-count" data-tip="Artboards in the open canvas">
           <span className="st-dot" style={{ background: 'var(--accent)' }} />
           {artboardCount} ARTBOARDS
         </span>
@@ -2127,9 +2565,11 @@ function Viewport({
   onSelectDs,
   project,
   cfg,
+  loadingPath,
+  onIframeLoad,
 }) {
   return (
-    <div className="viewport st-stage">
+    <div className="viewport st-stage" data-tour="viewport">
       {tabs.length === 0 && (
         <div className="st-empty">
           <div className="st-empty-brand">
@@ -2148,8 +2588,8 @@ function Viewport({
             <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.
+            Opening a file replaces the active canvas. <Kbd>⌘R</Kbd> reloads it; File ▸ Close
+            canvas clears the stage.
             <br />
             <br />
             <strong>Element selection:</strong> hold <Kbd>⌘</Kbd> inside the canvas and hover for a
@@ -2182,6 +2622,7 @@ function Viewport({
             src={canvasUrl(t.path, cfg)}
             className={t.path === activePath ? 'active' : ''}
             data-path={t.path}
+            onLoad={() => onIframeLoad?.(t.path)}
             // T2 (9.1-A) — only sandbox + delegate clipboard when the canvas is
             // served cross-origin (canvasOrigin present = the split is on). In
             // the default same-origin mode these attrs are omitted so behavior
@@ -2193,6 +2634,19 @@ function Viewport({
           />
         );
       })}
+      {loadingPath && loadingPath === activePath && (
+        // DS skeletons recipe — calm .skel pulse while the canvas-shell compiles
+        // the TSX. Cleared by the iframe's dgn:'loaded' message (or the onLoad
+        // fallback timer for legacy .html canvases that never post it).
+        <div className="st-canvas-loading" aria-hidden="true">
+          <div className="st-skel-card">
+            <div className="st-skel-cap st-mono">compiling canvas…</div>
+            <span className="skel st-skel-thumb" />
+            <span className="skel st-skel-line" style={{ width: '72%' }} />
+            <span className="skel st-skel-line" style={{ width: '46%' }} />
+          </div>
+        </div>
+      )}
     </div>
   );
 }
@@ -2372,7 +2826,7 @@ function SystemView({ data, onOpen, cfg, onSelectDs }) {
   return (
     <div className="sv">
       <header className="sv-header">
-        <span className="sv-sku">MDCC-DSN/01</span>
+        <span className="sv-sku">MAUDE-DSN/01</span>
         <span className="sv-title">design system view</span>
         {hasPicker ? (
           <label className="sv-ds-picker">
@@ -2516,7 +2970,9 @@ function StatusBar({
         </span>
       </span>
 
-      {selected && selected.selector && !isSystem && (
+      {/* Selection is meaningless without an open canvas — a stale _active.json
+          selection used to leave a ghost SELECTED chip on the empty shell. */}
+      {activePath && selected && selected.selector && !isSystem && (
         <span className="st-sb-slot st-sb-sel" role="group" aria-label="Selected element">
           <span className="lbl">selected</span>
           <span className="val" title={title}>
@@ -2526,7 +2982,8 @@ function StatusBar({
             type="button"
             className="st-sb-sel-clear"
             onClick={onClearSelected}
-            title="Clear (Esc inside iframe)"
+            data-tip="Clear · Esc inside iframe"
+            data-tip-pos="top"
             aria-label="Clear selection"
           >
             ×
@@ -2566,7 +3023,8 @@ function StatusBar({
         type="button"
         className="st-sb-theme"
         onClick={onToggleTheme}
-        title={`Switch to ${nextTheme} theme`}
+        data-tip={`Switch to ${nextTheme} theme`}
+        data-tip-pos="top"
         aria-label={`Switch to ${nextTheme} theme`}
       >
         <StIcon name={theme === 'dark' ? 'sun' : 'moon'} size={13} />
@@ -2588,6 +3046,8 @@ function CommentsPanel({
   onResolve,
   onReopen,
   onDelete,
+  width,
+  resizing,
 }) {
   const counts = totalCounts(commentsByFile);
   // Build groups: [{ file, comments: filtered }]
@@ -2613,7 +3073,11 @@ function CommentsPanel({
   }
 
   return (
-    <aside className="st-rpanel" aria-label="Comments">
+    <aside
+      className={'st-rpanel' + (resizing ? ' is-resizing' : '')}
+      style={width ? { width, flexBasis: width } : undefined}
+      aria-label="Comments"
+    >
       <div className="st-rp-tabs st-rp-tabs--filters">
         <div className="st-cm-filters" role="tablist">
           <button
@@ -2748,37 +3212,66 @@ function SyncBanner({ status }) {
   if (!status || status.linked === false) return null;
   // DDR-060 / 9.1-D — the "linked but 0 syncable" state is surfaced in the
   // status bar (sb-sync slot), NOT as a floating banner. This component owns
-  // only the transient offline / reconnect-flash banner (Task 8).
+  // the transient offline / reconnect-flash banner (Task 8) plus the DDR-102
+  // rejected-docs chip and divergence-resolution toast.
   if (status.notSyncable) return null;
   const { state, queuedOps, flash, conflicts } = status;
   const showFlash = flash === 'synced';
   const offline = state === 'offline' || state === 'offline-long';
-  if (!offline && !showFlash) return null;
-  const dismissKey = `${state}:${showFlash ? 'flash' : 'offline'}`;
-  if (dismissedKey === dismissKey) return null;
-
+  // DDR-102 — per-doc rollup + the latest divergence notice (additive fields;
+  // an old payload without them renders exactly the pre-DDR-102 banner).
+  const rejected = status.docs?.rejected ?? 0;
+  const lastDiverged = Array.isArray(conflicts)
+    ? [...conflicts].reverse().find((c) => c.kind === 'cold-start-diverged')
+    : null;
+  if (!offline && !showFlash && !lastDiverged && rejected === 0) return null;
+
+  // One banner at a time — priority: reconnect flash > offline > divergence
+  // toast > rejected chip. Dismissal is keyed per state so a new event
+  // (another conflict, a changed rejected count) re-surfaces it.
   let variant;
   let text;
+  let dismissKey;
   if (showFlash) {
     variant = 'success';
     text = 'Synced with hub';
-  } else if (state === 'offline-long') {
-    variant = 'error';
-    text = `Long offline — ${queuedOps} edit(s) queued. Consider \`git commit && git push\` as backup.`;
+    dismissKey = `${state}:flash`;
+  } else if (offline) {
+    const conflictNote =
+      conflicts && conflicts.length > 0 ? ` (${conflicts.length} conflict notice(s))` : '';
+    if (state === 'offline-long') {
+      variant = 'error';
+      text = `Long offline — ${queuedOps} edit(s) queued. Consider \`git commit && git push\` as backup.${conflictNote}`;
+    } else {
+      variant = 'warn';
+      text = `Working offline · ${queuedOps} edit(s) queued · will sync when the hub reconnects.${conflictNote}`;
+    }
+    dismissKey = `${state}:offline`;
+  } else if (lastDiverged) {
+    // DDR-102 fail-closed: a snapshotFailed conflict means the hub-wins overwrite
+    // was REFUSED (local kept) because _history couldn't be written — surface it
+    // as an error, not a routine "kept newest" notice.
+    if (lastDiverged.snapshotFailed) {
+      variant = 'error';
+      text = `Diverged on ${lastDiverged.slug}: kept local — the history snapshot FAILED, so the overwrite was refused. Check disk space / .design/_history write access.`;
+    } else {
+      variant = 'warn';
+      text = `Diverged on ${lastDiverged.slug}: kept the ${
+        lastDiverged.winner === 'local' ? 'local (newer)' : 'hub'
+      } version — the other is snapshotted in history → /design:rollback ${lastDiverged.slug}`;
+    }
+    dismissKey = `diverged:${lastDiverged.slug}:${lastDiverged.at}`;
   } else {
     variant = 'warn';
-    text = `Working offline · ${queuedOps} edit(s) queued · will sync when the hub reconnects.`;
+    text = `${rejected} canvas(es) not syncing — the hub rejected auth. Details: maude design status`;
+    dismissKey = `rejected:${rejected}`;
   }
-  const conflictNote =
-    conflicts && conflicts.length > 0 ? ` (${conflicts.length} conflict notice(s))` : '';
+  if (dismissedKey === dismissKey) return null;
 
   return (
     <div role="status" aria-live="polite" className={`st-banner st-banner--${variant}`}>
       <span className="st-banner-dot" aria-hidden="true" />
-      <span>
-        {text}
-        {conflictNote}
-      </span>
+      <span>{text}</span>
       <button
         type="button"
         className="st-banner-close"
@@ -2792,16 +3285,1819 @@ function SyncBanner({ status }) {
   );
 }
 
-// ---------- Inspector panel (display-only) ----------
+// ---------- CSS knobs (Phase 12.2, DDR-104) — interactive panel ----------
 //
-// T6 (Plan C) — right-dock Inspect / Layers / CSS tabs per `.design/ui/Studio.tsx`
-// InspectorPanel. DISPLAY-ONLY: reads the live `selected` payload from the
-// inspector bridge (`bounds`, `tag`, `classes`, `dom_path`, `html`). The
-// mockup's live-CSS-knob WRITEBACK is Phase 12 (needs a canvas-origin write
-// bridge, DDR-054) — the CSS tab shows markup read-only + keeps that callout, so
-// it never implies functionality it lacks (the exact reason DDR-096 deferred it).
-function InspectorPanel({ selected, onClose }) {
-  const [tab, setTab] = useState('inspect');
+// Hybrid vocabulary (friendly collapsible section headers + CSS-named rows),
+// per-field DS-token quick-pick, nested box-model widget, per-corner radius,
+// per-row provenance (token-bound / raw-override / inherited), per-field save
+// state, and two escape hatches: custom CSS property (via /_api/edit-css) +
+// custom HTML attribute (via /_api/edit-attr). Each knob pre-fills from the
+// AUTHORED inline value (`el.authored`); the resolved `computed` value is a
+// faint placeholder only (NOT editable — the v1 UX bug). Ported from the
+// critic-approved + user-iterated `.design/ui/Studio.tsx` spec.
+
+const CSS_DISPLAYS = ['block', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline', 'none'];
+const CSS_FLEX_DIR = ['row', 'row-reverse', 'column', 'column-reverse'];
+const CSS_ALIGN = ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'];
+const CSS_JUSTIFY = [
+  'flex-start',
+  'center',
+  'flex-end',
+  'space-between',
+  'space-around',
+  'space-evenly',
+];
+const CSS_WEIGHTS = ['300', '400', '500', '600', '700', '800'];
+const CSS_FONTS = [
+  'inherit',
+  'system-ui',
+  'sans-serif',
+  'serif',
+  'monospace',
+  'Inter',
+  'Inter Tight',
+  'JetBrains Mono',
+];
+const CSS_BORDER_STYLES = ['none', 'solid', 'dashed', 'dotted', 'double'];
+const CSS_UNITS = ['px', 'rem', 'em', '%', 'vw', 'vh', 'auto'];
+// Properties whose bare-number value is unitless — never append a unit suffix.
+const CSS_UNITLESS = new Set(['line-height', 'opacity', 'font-weight', 'z-index', 'flex-grow', 'flex-shrink', 'order']);
+// #2 — Figma-style property prefix inside numeric fields: a small glyph (icon) or
+// a mono letter (t). Only where it reads cleanly; selects/colours keep their own.
+const PROP_LEAD = {
+  'font-size': { icon: 'p-size' },
+  'line-height': { icon: 'p-lineheight' },
+  'letter-spacing': { icon: 'p-letterspacing' },
+  gap: { icon: 'p-gap' },
+  width: { t: 'W' },
+  height: { t: 'H' },
+  'max-width': { t: 'W' },
+  'border-radius': { icon: 'p-corner' },
+  'border-width': { icon: 'p-border' },
+  opacity: { icon: 'p-opacity' },
+};
+const CSS_ALIGN_OPTS = ['left', 'center', 'right', 'justify'];
+
+let _cssColorCtx = null;
+// Normalize any CSS color string to #rrggbb for the native color input via a
+// throwaway canvas fillStyle round-trip (parses rgb/hsl/named). Unparseable
+// values (some oklch) fall back to '' → picker defaults to #000000; the swatch
+// still shows the true color string regardless.
+function cssColorToHex(c) {
+  if (!c) return '';
+  if (/^#[0-9a-f]{6}$/i.test(c)) return c.toLowerCase();
+  try {
+    if (!_cssColorCtx) _cssColorCtx = document.createElement('canvas').getContext('2d');
+    if (!_cssColorCtx) return '';
+    _cssColorCtx.fillStyle = '#000000';
+    _cssColorCtx.fillStyle = c;
+    const v = _cssColorCtx.fillStyle;
+    if (/^#[0-9a-f]{6}$/i.test(v)) return v.toLowerCase();
+    const m = v.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (m) {
+      return `#${[m[1], m[2], m[3]].map((n) => Number(n).toString(16).padStart(2, '0')).join('')}`;
+    }
+  } catch {
+    /* canvas unavailable */
+  }
+  return '';
+}
+
+// ---- Colour math for the HSV picker (#6 — Figma-style colour control) ----
+const clamp01 = (n) => Math.min(1, Math.max(0, n));
+function hexToRgb(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex || '');
+  if (!m) return { r: 0, g: 0, b: 0 };
+  const n = Number.parseInt(m[1], 16);
+  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
+}
+function rgbToHex({ r, g, b }) {
+  return `#${[r, g, b].map((v) => Math.round(v).toString(16).padStart(2, '0')).join('')}`;
+}
+function rgbToHsv({ r, g, b }) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  let h = 0;
+  if (d) {
+    if (max === r) h = ((g - b) / d) % 6;
+    else if (max === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return { h, s: max ? d / max : 0, v: max };
+}
+function hsvToRgb({ h, s, v }) {
+  const c = v * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = v - c;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (h < 60) [r, g, b] = [c, x, 0];
+  else if (h < 120) [r, g, b] = [x, c, 0];
+  else if (h < 180) [r, g, b] = [0, c, x];
+  else if (h < 240) [r, g, b] = [0, x, c];
+  else if (h < 300) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  return { r: (r + m) * 255, g: (g + m) * 255, b: (b + m) * 255 };
+}
+
+// Round bare px to whole numbers for the placeholder hint; pass other values through.
+function cssHint(v) {
+  if (!v) return '';
+  const m = /^(-?\d*\.?\d+)px$/.exec(v);
+  return m ? `${Math.round(Number.parseFloat(m[1]))}px` : v;
+}
+
+// Split "16px" → { n:"16", unit:"px" }; "auto"→{n:"",unit:"auto"}; var()/raw → {n:raw,unit:""}.
+function cssSplitUnit(v) {
+  if (!v) return { n: '', unit: 'px' };
+  const t = v.trim();
+  const m = /^(-?\d*\.?\d+)\s*(px|rem|em|%|vw|vh)?$/.exec(t);
+  if (m) return { n: m[1], unit: m[2] || 'px' };
+  if (t === 'auto') return { n: '', unit: 'auto' };
+  return { n: t, unit: '' };
+}
+
+// Phase 12.2/12.3 — the WS `selected` echo is the server's projection
+// (SelectedElement) and LACKS the client-only DOM fields the CSS knobs pre-fill
+// from (`authored` / `computed` inline style + `customStyles` / `attrs` — all
+// captured in the iframe, never round-tripped through the server). When the echo
+// is for the SAME element we already hold locally, preserve those fields instead
+// of clobbering them to empty (else the server round-trip wipes the custom-CSS /
+// custom-attr rows + computed readout right after selection).
+function mergeSelClientFields(incoming, prev) {
+  if (!incoming || Array.isArray(incoming) || Array.isArray(prev) || !prev) return incoming;
+  if (!incoming.id || incoming.id !== prev.id) return incoming;
+  return {
+    ...incoming,
+    authored: incoming.authored ?? prev.authored,
+    computed: incoming.computed ?? prev.computed,
+    customStyles: incoming.customStyles ?? prev.customStyles,
+    attrs: incoming.attrs ?? prev.attrs,
+  };
+}
+
+// Resolve the active canvas's DS tokens CSS path (mirrors canvas-url.js / DDR-093):
+// the canvas's declared DS wins, else designSystems[0], else the legacy default.
+function cssTokensRelFor(file, cfg) {
+  const ds0 = cfg?.designSystems?.[0];
+  const name = file ? cfg?.canvasDesignSystems?.[file] : null;
+  const ds = (name && cfg?.designSystems?.find((d) => d.name === name)) || ds0;
+  return ds?.tokensCssRel || cfg?.tokensCssRel || ds0?.tokensCssRel || '';
+}
+
+// The active canvas's DS NAME (mirrors cssTokensRelFor's resolution order).
+function activeDsNameFor(file, cfg) {
+  const byCanvas = file ? cfg?.canvasDesignSystems?.[file] : null;
+  return byCanvas || cfg?.defaultDesignSystem || cfg?.designSystems?.[0]?.name || null;
+}
+
+// Parse a DS tokens CSS body → token names grouped by family + a name→value map
+// (resolving one level of var() aliasing so the popover renders real swatches +
+// values). Phase 12.3 (W2.1/W3 multi-DS).
+function parseTokensCss(css) {
+  const raw = {};
+  for (const m of css.matchAll(/(--[a-z0-9-]+)\s*:\s*([^;}]+)/gi)) {
+    if (!(m[1] in raw)) raw[m[1]] = m[2].trim();
+  }
+  const vals = {};
+  for (const name of Object.keys(raw)) {
+    const v = raw[name];
+    const ref = /^var\(\s*(--[a-z0-9-]+)\s*\)$/i.exec(v);
+    vals[name] = ref && raw[ref[1]] ? raw[ref[1]] : v;
+  }
+  const names = Object.keys(raw);
+  const g = (re) => names.filter((n) => re.test(n));
+  // Colours detected by VALUE, not name — so EVERY colour token a DS defines is
+  // offered (the name-prefix list dropped many). A token is a colour if its
+  // resolved value reads as one. (#3 — "see all tokens the DS has".)
+  const isColor = (v) =>
+    /^(#[0-9a-f]{3,8}|rgba?\(|hsla?\(|oklch\(|oklab\(|lab\(|lch\(|hwb\(|color\()/i.test(v) ||
+    /^(transparent|currentcolor|white|black|red|green|blue|gray|grey|orange|yellow|purple|pink|cyan|magenta|teal|navy|maroon|olive|lime|aqua|silver|gold)$/i.test(
+      v
+    );
+  return {
+    color: names.filter((n) => isColor(vals[n])),
+    space: g(/^--space-/),
+    radius: g(/^--radius-/),
+    type: g(/^--type-/),
+    shadow: g(/^--shadow-/),
+    lh: g(/^--lh-/),
+    vals,
+  };
+}
+
+// Fetch + parse the tokens CSS of EVERY design system in the config (main
+// origin), so the token popover can offer tokens grouped per DS (W3 multi-DS
+// feedback). The active canvas's DS is ordered first. Returns
+// `[{ name, color, space, radius, type, shadow, lh, vals }]`.
+function useAllDsTokens(cfg, designRel, activeName) {
+  const list = cfg?.designSystems || [];
+  // A stable key so the effect only re-fetches when the DS set / paths change.
+  const sig = list.map((d) => `${d.name}:${d.tokensCssRel}`).join('|');
+  const [byDs, setByDs] = useState([]);
+  useEffect(() => {
+    if (!list.length) return undefined;
+    let cancelled = false;
+    Promise.all(
+      list.map(async (ds) => {
+        if (!ds.tokensCssRel) return null;
+        try {
+          const r = await fetch(`/${designRel}/${ds.tokensCssRel}`);
+          const css = r.ok ? await r.text() : '';
+          return { name: ds.name, ...parseTokensCss(css) };
+        } catch {
+          return null;
+        }
+      })
+    ).then((res) => {
+      if (cancelled) return;
+      const got = res.filter(Boolean);
+      // Active DS first, rest in config order.
+      got.sort((a, b) => (a.name === activeName ? -1 : b.name === activeName ? 1 : 0));
+      setByDs(got);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [sig, designRel, activeName]);
+  return byDs;
+}
+
+// Phase 12.3 (#4) — the "Custom" tab of the colour popover: a normal colour
+// input (native OS picker via a large swatch) + a hex/value text field. Applies
+// LIVE as you adjust (onApply), so the canvas previews while the picker is open.
+// #6 — the unified colour picker (Custom tab). A real HSV control: a
+// saturation/value square + a hue slider + a hex field + an eyedropper — the
+// Figma model. Replaces BOTH the old native <input type="color"> on the swatch
+// AND the simple hex field, so colours have ONE popover (Custom · Variables).
+// `seed` is the resolved current colour (hex). Drag updates the picker UI live;
+// commits on pointer-up (one source write per drag); the hex field commits on
+// blur/Enter.
+function ColorPicker({ seed, onApply }) {
+  const [hsv, setHsv] = useState(() => rgbToHsv(hexToRgb(seed || '#000000')));
+  const hsvRef = useRef(hsv);
+  hsvRef.current = hsv;
+  const svRef = useRef(null);
+  const hueRef = useRef(null);
+  // Reseed when the selection's colour changes (but not while the user drags).
+  const seedRef = useRef(seed);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: reseed on seed change only.
+  useEffect(() => {
+    if (seed && seed !== seedRef.current) {
+      seedRef.current = seed;
+      setHsv(rgbToHsv(hexToRgb(seed)));
+    }
+  }, [seed]);
+  const hex = rgbToHex(hsvToRgb(hsv));
+
+  const dragSV = (e) => {
+    e.preventDefault();
+    const r = svRef.current?.getBoundingClientRect();
+    if (!r) return;
+    const h = hsvRef.current.h;
+    const move = (ev) => {
+      setHsv({
+        h,
+        s: clamp01((ev.clientX - r.left) / r.width),
+        v: clamp01(1 - (ev.clientY - r.top) / r.height),
+      });
+    };
+    move(e);
+    const up = () => {
+      document.removeEventListener('pointermove', move);
+      document.removeEventListener('pointerup', up);
+      onApply(rgbToHex(hsvToRgb(hsvRef.current)));
+    };
+    document.addEventListener('pointermove', move);
+    document.addEventListener('pointerup', up);
+  };
+  const dragHue = (e) => {
+    e.preventDefault();
+    const r = hueRef.current?.getBoundingClientRect();
+    if (!r) return;
+    const { s, v } = hsvRef.current;
+    const move = (ev) => {
+      setHsv({ h: clamp01((ev.clientX - r.left) / r.width) * 360, s, v });
+    };
+    move(e);
+    const up = () => {
+      document.removeEventListener('pointermove', move);
+      document.removeEventListener('pointerup', up);
+      onApply(rgbToHex(hsvToRgb(hsvRef.current)));
+    };
+    document.addEventListener('pointermove', move);
+    document.addEventListener('pointerup', up);
+  };
+  const eyedrop = async () => {
+    try {
+      // EyeDropper is Chromium-only; guarded.
+      const ED = window.EyeDropper;
+      if (!ED) return;
+      const res = await new ED().open();
+      if (res?.sRGBHex) {
+        setHsv(rgbToHsv(hexToRgb(res.sRGBHex)));
+        onApply(res.sRGBHex);
+      }
+    } catch {
+      /* user cancelled */
+    }
+  };
+
+  return (
+    <div className="st-cp-cpick">
+      <button
+        type="button"
+        ref={svRef}
+        className="st-cp-cpick-sv"
+        aria-label="saturation and value"
+        style={{ background: `hsl(${hsv.h} 100% 50%)` }}
+        onPointerDown={dragSV}
+      >
+        <span className="st-cp-cpick-svwhite" />
+        <span className="st-cp-cpick-svblack" />
+        <span
+          className="st-cp-cpick-knob"
+          style={{ left: `${hsv.s * 100}%`, top: `${(1 - hsv.v) * 100}%`, background: hex }}
+        />
+      </button>
+      <div className="st-cp-cpick-controls">
+        {window.EyeDropper ? (
+          <button
+            type="button"
+            className="st-cp-cpick-eye"
+            aria-label="pick from screen"
+            title="eyedropper"
+            onClick={eyedrop}
+          >
+            <StIcon name="eyedropper" size={14} />
+          </button>
+        ) : null}
+        <button
+          type="button"
+          ref={hueRef}
+          className="st-cp-cpick-hue"
+          aria-label="hue"
+          onPointerDown={dragHue}
+        >
+          <span className="st-cp-cpick-huethumb" style={{ left: `${(hsv.h / 360) * 100}%` }} />
+        </button>
+      </div>
+      <input
+        className="st-cp-fin"
+        type="text"
+        value={hex}
+        aria-label="hex value"
+        onChange={(e) => {
+          const v = e.target.value;
+          if (/^#?[0-9a-f]{6}$/i.test(v)) setHsv(rgbToHsv(hexToRgb(v)));
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') onApply(e.currentTarget.value);
+        }}
+        onBlur={(e) => onApply(e.currentTarget.value)}
+      />
+    </div>
+  );
+}
+
+// Phase 12.3 (W2.1) — token picker as a Figma-style popover instead of a native
+// <select>. `kind='color'` renders a swatch grid (resolved DS color values);
+// `kind='value'` a variable list (pretty name + resolved value, à la Figma's
+// variable picker). Picking commits `var(--token)`. Portals to <body> +
+// fixed-positions from the trigger rect so the panel's overflow never clips it.
+function TokenPopover({ kind, groups, current, onPick, label, swatchBg, seedHex, activeDs }) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState(null);
+  // Phase 12.3 (#4) — colour popover gets two tabs: a normal colour input
+  // (Custom) + the DS variables swatch list (Variables). Token-able non-colour
+  // popovers stay single-mode.
+  const [mode, setMode] = useState('custom');
+  const [query, setQuery] = useState('');
+  const btnRef = useRef(null);
+  const popRef = useRef(null);
+  const bound = typeof current === 'string' && /var\(\s*--/.test(current);
+  const isOn = (n) => current === `var(${n})`;
+  const pretty = (n) => n.replace(/^--/, '').replace(/-/g, ' ');
+  const gs = groups || [];
+  const total = gs.reduce((s, g) => s + (g.names?.length || 0), 0);
+  const showDsHeaders = gs.length > 1; // group by DS only when there's >1
+  // Search filter over the token name + resolved value, per group.
+  const q = query.trim().toLowerCase();
+  const filteredGs = !q
+    ? gs
+    : gs
+        .map((g) => ({
+          ...g,
+          names: (g.names || []).filter(
+            (n) =>
+              pretty(n).toLowerCase().includes(q) ||
+              n.toLowerCase().includes(q) ||
+              (g.vals?.[n] || '').toLowerCase().includes(q)
+          ),
+        }))
+        .filter((g) => g.names.length);
+
+  useEffect(() => {
+    if (!open) {
+      setQuery('');
+      return undefined;
+    }
+    const place = () => {
+      const r = btnRef.current?.getBoundingClientRect();
+      if (!r) return;
+      const W = 224;
+      const MAXH = 300;
+      let left = Math.min(r.right - W, window.innerWidth - W - 8);
+      if (left < 8) left = 8;
+      const below = window.innerHeight - r.bottom;
+      const top = below > MAXH + 8 ? r.bottom + 4 : Math.max(8, r.top - MAXH - 4);
+      setPos({ left, top, width: W, maxHeight: MAXH });
+    };
+    place();
+    const onDoc = (e) => {
+      if (popRef.current?.contains(e.target) || btnRef.current?.contains(e.target)) return;
+      setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    const dismiss = () => setOpen(false);
+    // The popover is fixed-positioned from the trigger rect, so a scroll of the
+    // PANEL detaches it → dismiss. But scrolling INSIDE the popover (its own
+    // overflow list) must NOT close it (the user couldn't scroll the variables).
+    const onScroll = (e) => {
+      if (popRef.current?.contains(e.target)) return;
+      setOpen(false);
+    };
+    document.addEventListener('pointerdown', onDoc, true);
+    document.addEventListener('keydown', onKey);
+    window.addEventListener('resize', dismiss);
+    document.addEventListener('scroll', onScroll, true);
+    return () => {
+      document.removeEventListener('pointerdown', onDoc, true);
+      document.removeEventListener('keydown', onKey);
+      window.removeEventListener('resize', dismiss);
+      document.removeEventListener('scroll', onScroll, true);
+    };
+  }, [open]);
+
+  // Pick a token. #3 — apply CORRECTLY across design systems: a token from the
+  // canvas's OWN active DS commits `var(--token)` (round-trips + resolves right);
+  // a token from ANOTHER DS commits its RESOLVED value (literal), because
+  // `var(--token)` would resolve against the canvas's DS scope and paint the WRONG
+  // colour. So what you click is always what's applied ("natvrdo").
+  // SECURITY (ethical-hacker A3) — a cross-DS token value is committed as a
+  // LITERAL, and its source is a (possibly hub-pushed, untrusted) tokens CSS.
+  // A colour-shaped value can still smuggle a fetch primitive (e.g.
+  // `rgb(1 2 3) url(//x)` passes the colour sniff). Refuse to write a literal
+  // carrying url()/image-set()/expression()/@import — fall back to var(), which
+  // resolves against the CANVAS's own DS (never the attacker's value).
+  const UNSAFE_TOKEN_VALUE = /url\(|image-set\(|cross-fade\(|element\(|expression\(|@import|javascript:/i;
+  const pickFrom = (ds, n, resolved) => {
+    if (activeDs && ds && ds !== activeDs && resolved && !UNSAFE_TOKEN_VALUE.test(resolved)) {
+      onPick(resolved);
+    } else {
+      onPick(`var(${n})`);
+    }
+    setOpen(false);
+  };
+  // Custom colour / hex applies LIVE without closing, so the user can keep
+  // tweaking; the popover dismisses on outside-click / Esc like everything else.
+  const applyRaw = (v) => {
+    const val = (v || '').trim();
+    if (val) onPick(val);
+  };
+  // A search field over the token list (name + value). Auto-focuses so the user
+  // can type straight away.
+  const searchBar = (
+    <div className="st-cp-pop-search">
+      <StIcon name="search" size={12} />
+      <input
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder="Search variables"
+        aria-label="search variables"
+        // biome-ignore lint/a11y/noAutofocus: focusing the search on open is the intent.
+        autoFocus
+      />
+    </div>
+  );
+  // #2 — colour Variables as a scannable LIST (swatch · name · value), per DS.
+  const swatchList = (grps) =>
+    grps.map((g) => (
+      <div className="st-cp-pop-group" key={g.ds}>
+        {showDsHeaders ? <div className="st-cp-pop-ds">{g.ds}</div> : null}
+        <div className="st-cp-pop-list">
+          {g.names.map((n) => (
+            <button
+              key={`${g.ds}:${n}`}
+              type="button"
+              className={`st-cp-pop-row st-cp-pop-crow${isOn(n) ? ' is-on' : ''}`}
+              onClick={() => pickFrom(g.ds, n, g.vals?.[n])}
+            >
+              <span
+                className="st-cp-pop-cswatch"
+                style={{ background: g.vals?.[n] || 'transparent' }}
+                aria-hidden="true"
+              />
+              <span className="st-cp-pop-name">{pretty(n)}</span>
+              <span className="st-cp-pop-val">{g.vals?.[n] || ''}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    ));
+  // The value-token list (non-colour), per DS.
+  const valueList = (grps) =>
+    grps.map((g) => (
+      <div className="st-cp-pop-group" key={g.ds}>
+        {showDsHeaders ? <div className="st-cp-pop-ds">{g.ds}</div> : null}
+        <div className="st-cp-pop-list">
+          {g.names.map((n) => (
+            <button
+              key={`${g.ds}:${n}`}
+              type="button"
+              className={`st-cp-pop-row${isOn(n) ? ' is-on' : ''}`}
+              onClick={() => pickFrom(g.ds, n, g.vals?.[n])}
+            >
+              <span className="st-cp-pop-name">{pretty(n)}</span>
+              <span className="st-cp-pop-val">{g.vals?.[n] || ''}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    ));
+  const noMatch = <div className="st-cp-pop-empty">No match</div>;
+
+  return (
+    <>
+      {swatchBg !== undefined ? (
+        // Colour rows: the swatch IS the trigger — one popover, no separate native
+        // OS picker + ◇ (the "two popovers" the user flagged). Shows the current
+        // colour; bound-to-token gets the accent ring.
+        <button
+          type="button"
+          ref={btnRef}
+          className={`st-cp-swatch st-cp-swatch--mini st-cp-swatch--trigger${bound ? ' is-bound' : ''}`}
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          aria-label={label || 'pick a colour'}
+          title={current || 'pick a colour'}
+          onClick={() => setOpen((v) => !v)}
+        >
+          <span style={{ position: 'absolute', inset: 0, background: swatchBg || 'transparent' }} />
+        </button>
+      ) : (
+        <button
+          type="button"
+          ref={btnRef}
+          className={`st-cp-tokbtn${bound ? ' is-bound' : ''}`}
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          aria-label={label || 'pick a design token'}
+          title="design tokens"
+          onClick={() => setOpen((v) => !v)}
+        >
+          <span className="st-cp-tokbtn-glyph" aria-hidden="true" />
+        </button>
+      )}
+      {open && pos
+        ? createPortal(
+            <div
+              ref={popRef}
+              // Portalled to <body> (outside the App's `.maude` div), so it must
+              // re-establish the maude token scope itself — otherwise var(--bg-*)
+              // resolves to the legacy :root project palette (the cream popover bug).
+              className="maude st-cp-pop"
+              data-theme={
+                (typeof document !== 'undefined' &&
+                  document.documentElement.getAttribute('data-theme')) ||
+                'dark'
+              }
+              role="dialog"
+              aria-label={label || 'design tokens'}
+              style={{
+                left: pos.left,
+                top: pos.top,
+                width: pos.width,
+                maxHeight: pos.maxHeight,
+              }}
+            >
+              {kind === 'color' ? (
+                <>
+                  <div className="st-cp-poptabs" role="tablist">
+                    <button
+                      type="button"
+                      role="tab"
+                      aria-selected={mode === 'custom'}
+                      className={`st-cp-poptab${mode === 'custom' ? ' is-active' : ''}`}
+                      onClick={() => setMode('custom')}
+                    >
+                      Custom
+                    </button>
+                    <button
+                      type="button"
+                      role="tab"
+                      aria-selected={mode === 'vars'}
+                      className={`st-cp-poptab${mode === 'vars' ? ' is-active' : ''}`}
+                      onClick={() => setMode('vars')}
+                    >
+                      Variables
+                    </button>
+                  </div>
+                  {mode === 'custom' ? (
+                    <ColorPicker seed={seedHex || cssColorToHex(current) || '#000000'} onApply={applyRaw} />
+                  ) : !total ? (
+                    <div className="st-cp-pop-empty">No color tokens</div>
+                  ) : (
+                    <>
+                      {searchBar}
+                      {filteredGs.length ? swatchList(filteredGs) : noMatch}
+                    </>
+                  )}
+                </>
+              ) : !total ? (
+                <div className="st-cp-pop-empty">No tokens for this property</div>
+              ) : (
+                <>
+                  {searchBar}
+                  {filteredGs.length ? valueList(filteredGs) : noMatch}
+                </>
+              )}
+            </div>,
+            document.body
+          )
+        : null}
+    </>
+  );
+}
+
+function CssKnobs({ el, cfg, onOptimistic }) {
+  const editable = !!el.id;
+  const computed = el.computed || {};
+  // Phase 12.3 — optimistic local overlay over the selection's authored / custom
+  // / attr maps. With the redundant-reload suppression (the flicker fix), an edit
+  // no longer triggers a reselect that would re-post fresh `authored` values — so
+  // the panel must reflect its own commits immediately or it shows the stale
+  // pre-edit value until the user re-selects. Each commit/reset writes here;
+  // `null` marks a removed key. Cleared when a different element is selected.
+  const [overlay, setOverlay] = useState({ a: {}, c: {}, t: {} });
+  // biome-ignore lint/correctness/useExhaustiveDependencies: clear only on element change.
+  useEffect(() => {
+    setOverlay({ a: {}, c: {}, t: {} });
+  }, [el.id]);
+  const mergeOverlay = (base, ov) => {
+    const out = { ...(base || {}) };
+    for (const [k, v] of Object.entries(ov)) {
+      if (v === null) delete out[k];
+      else out[k] = v;
+    }
+    return out;
+  };
+  const authored = mergeOverlay(el.authored, overlay.a);
+  const customStyles = mergeOverlay(el.customStyles, overlay.c);
+  const attrs = mergeOverlay(el.attrs, overlay.t);
+  const setA = (prop, v) => setOverlay((o) => ({ ...o, a: { ...o.a, [prop]: v } }));
+  const setC = (prop, v) => setOverlay((o) => ({ ...o, c: { ...o.c, [prop]: v } }));
+  const setT = (attr, v) => setOverlay((o) => ({ ...o, t: { ...o.t, [attr]: v } }));
+  // Token CSS is served from the MAIN origin at the repo-relative path, i.e.
+  // WITH the designRoot prefix (`/.design/system/<ds>/colors_and_type.css`) —
+  // `tokensCssRel` from config is DS-root-relative (no `.design/`), so prepend it.
+  const _designRel = (cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '');
+  const _activeDs = activeDsNameFor(el.file, cfg);
+  // W3 — tokens from EVERY configured DS, active one first, so the popover can
+  // offer them grouped per design system.
+  const allDs = useAllDsTokens(cfg, _designRel, _activeDs);
+  // Build per-DS popover groups for one token family (color/space/radius/…).
+  const tokenGroups = (familyKey) =>
+    allDs
+      .map((d) => ({ ds: d.name, names: d[familyKey] || [], vals: d.vals }))
+      .filter((g) => g.names.length);
+  const [status, setStatus] = useState({});
+  const [open, setOpen] = useState({
+    Layout: true,
+    Typography: true,
+    Spacing: true,
+    Size: true,
+    Appearance: true,
+    Advanced: false,
+  });
+  const [split, setSplit] = useState(false);
+
+  // Phase 12.3 — auto-expand Advanced when the selected element carries custom
+  // CSS props / HTML attrs, so a just-added (or pre-existing) custom value is
+  // visible without hunting for the disclosure. Keyed on el.id so it re-runs per
+  // selection (CssKnobs persists across selections — the el prop changes).
+  const hasCustom =
+    Object.keys(customStyles).length > 0 || Object.keys(attrs).length > 0;
+  useEffect(() => {
+    if (hasCustom) setOpen((o) => (o.Advanced ? o : { ...o, Advanced: true }));
+  }, [el.id, hasCustom]);
+
+  async function post(url, payload, key) {
+    setStatus((s) => ({ ...s, [key]: 'saving' }));
+    try {
+      const res = await fetch(url, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      const j = await res.json().catch(() => ({}));
+      setStatus((s) => ({
+        ...s,
+        [key]: !res.ok || !j.ok ? `err:${(j && j.error) || `HTTP ${res.status}`}` : 'saved',
+      }));
+    } catch (err) {
+      setStatus((s) => ({ ...s, [key]: `err:${err && err.message ? err.message : String(err)}` }));
+    }
+  }
+  // Optimistic preview: nudge the live element so the change shows before the
+  // edit → HMR reload lands. `value` null = remove (reset path). No-op when the
+  // selection has no stable id (can't be resolved in the canvas).
+  const optimistic = (prop, value) => {
+    if (!onOptimistic || !el.id) return;
+    onOptimistic({
+      id: el.id,
+      artboardId: el.artboardId ?? null,
+      index: el.index ?? 0,
+      prop,
+      value,
+    });
+  };
+  const commit = (property, raw) => {
+    const value = (raw || '').trim();
+    if (!editable || !value) return;
+    if (value === (authored[property] ?? '').trim()) return; // no-op
+    optimistic(property, value);
+    setA(property, value); // reflect in the panel immediately (no reload → no reselect)
+    post('/_api/edit-css', { canvas: el.file, id: el.id, property, value }, property);
+  };
+  // A custom CSS property (Advanced) — same write, but the panel surfaces it from
+  // the customStyles map, so overlay THERE.
+  const commitCustom = (property, raw) => {
+    const value = (raw || '').trim();
+    if (!editable || !property.trim() || !value) return;
+    optimistic(property.trim(), value);
+    setC(property.trim(), value);
+    post('/_api/edit-css', { canvas: el.file, id: el.id, property: property.trim(), value }, property.trim());
+  };
+  const commitAttr = (attr, raw) => {
+    const a = (attr || '').trim();
+    const value = (raw || '').trim();
+    if (!editable || !a || !value) return;
+    setT(a, value);
+    post('/_api/edit-attr', { canvas: el.file, id: el.id, attr: a, value }, `@${a}`);
+  };
+  // Phase 12.3 — reset (remove the inline prop / attr → back to class/inherited).
+  const reset = (property) => {
+    if (!editable) return;
+    optimistic(property, null);
+    setA(property, null);
+    post('/_api/edit-css', { canvas: el.file, id: el.id, property, reset: true }, property);
+  };
+  const resetCustom = (property) => {
+    if (!editable) return;
+    optimistic(property, null);
+    setC(property, null);
+    post('/_api/edit-css', { canvas: el.file, id: el.id, property, reset: true }, property);
+  };
+  const resetAttr = (attr) => {
+    if (!editable) return;
+    setT(attr, null);
+    post('/_api/edit-attr', { canvas: el.file, id: el.id, attr, reset: true }, `@${attr}`);
+  };
+  // Phase 12.3 (W2.2) — Figma/Webflow scrub: drag a number field horizontally to
+  // change its value. Live preview via optimistic apply on every move (no source
+  // write); commits ONCE on release. A pointer that doesn't pass a 3px threshold
+  // is a normal click (focus to type). `opts.step` modifiers: shift = ×10, alt =
+  // ×0.1. `opts.sides` enables Webflow box-model modifiers: alt = symmetric pair,
+  // alt+shift = all four (else just this side). `opts.min` clamps (default 0).
+  const makeScrub = (prop, opts = {}) => (e) => {
+    if (e.button !== 0) return;
+    const input = e.currentTarget;
+    const startX = e.clientX;
+    const baseN =
+      Number.parseFloat(
+        cssSplitUnit(authored[prop] ?? cssHint(computed[prop]) ?? '0').n || '0'
+      ) || 0;
+    const unit = opts.unitless
+      ? ''
+      : opts.unit || cssSplitUnit(authored[prop] ?? '').unit || 'px';
+    const min = opts.min ?? 0;
+    const fmt = (n) => (opts.unitless ? `${n}` : `${n}${unit}`);
+    const sidesFor = (ev) => {
+      if (!opts.sides) return [prop];
+      if (ev.altKey && ev.shiftKey) return opts.sides.all;
+      if (ev.altKey) return opts.sides.pair;
+      return [prop];
+    };
+    let scrubbing = false;
+    let last = baseN;
+    const move = (ev) => {
+      const dx = ev.clientX - startX;
+      if (!scrubbing && Math.abs(dx) < 3) return;
+      if (!scrubbing) {
+        scrubbing = true;
+        document.body.classList.add('st-scrubbing');
+      }
+      ev.preventDefault();
+      const granular = opts.sides ? 1 : ev.shiftKey ? 10 : ev.altKey ? 0.1 : 1;
+      last = Math.round((baseN + dx * granular) * 100) / 100;
+      if (last < min) last = min;
+      const sides = sidesFor(ev);
+      // Live-update the dragged field AND, for a box-model multi-side scrub, the
+      // sibling box inputs so the whole pair / four-up move shows in the panel —
+      // not just the one being dragged (W2.2 feedback).
+      if (input) input.value = String(last);
+      if (opts.sides && sides.length > 1) {
+        const box = input?.closest('.st-cp-box');
+        for (const p of sides) {
+          if (p === prop) continue;
+          const sib = box?.querySelector(`.st-cp-boxv[aria-label="${p}"]`);
+          if (sib) sib.value = String(last);
+        }
+      }
+      for (const p of sides) optimistic(p, fmt(last));
+    };
+    const up = (ev) => {
+      document.removeEventListener('pointermove', move);
+      document.removeEventListener('pointerup', up);
+      if (!scrubbing) return;
+      document.body.classList.remove('st-scrubbing');
+      for (const p of sidesFor(ev)) commit(p, fmt(last));
+    };
+    document.addEventListener('pointermove', move);
+    document.addEventListener('pointerup', up);
+  };
+  const provOf = (prop) => {
+    const v = authored[prop];
+    if (!v) return 'inherit';
+    return /var\(\s*--/.test(v) ? 'bound' : 'raw';
+  };
+
+  if (!editable) {
+    return (
+      <div className="st-cp">
+        <div className="st-cp-id">
+          <span className="st-cp-idtag">{el.tag || 'element'}</span>
+        </div>
+        <div className="st-css-disabled">
+          This selection has no stable element id (a legacy canvas, or a non-element target). Edit
+          it with <code>/design:edit</code>.
+        </div>
+      </div>
+    );
+  }
+
+  const PROVLABEL = { bound: 'token-bound', raw: 'raw override', inherit: 'inherited' };
+  const prov = (p) => (
+    <span className={`st-cp-prov st-cp-prov--${p}`} role="img" aria-label={PROVLABEL[p]} />
+  );
+
+  // Phase 12.3 (#4) — the LEADING dot carries it all: provenance (shape) + save
+  // status (a success/error/saving glow) + reset (double-click an authored row).
+  // No trailing ✓/⟲ that shift the input rightward (the user's gripe). A tooltip
+  // hints the double-click-to-reset.
+  const provDot = (prop, provKind) => {
+    const k = provKind ?? provOf(prop);
+    const s = status[prop];
+    const errMsg = typeof s === 'string' && s.startsWith('err:') ? s.slice(4) : '';
+    const stCls = errMsg ? ' is-err' : s === 'saved' ? ' is-saved' : s === 'saving' ? ' is-saving' : '';
+    const canReset = !!authored[prop];
+    const tip = errMsg
+      ? `error: ${errMsg}`
+      : canReset
+        ? `${PROVLABEL[k]} · double-click to reset`
+        : PROVLABEL[k];
+    return (
+      <button
+        type="button"
+        className={`st-cp-prov st-cp-prov--${k}${stCls}${canReset ? ' is-resettable' : ''}`}
+        aria-label={tip}
+        title={tip}
+        tabIndex={canReset ? 0 : -1}
+        onDoubleClick={canReset ? () => reset(prop) : undefined}
+        onKeyDown={
+          canReset
+            ? (e) => {
+                if (e.key === 'Backspace' || e.key === 'Delete') {
+                  e.preventDefault();
+                  reset(prop);
+                }
+              }
+            : undefined
+        }
+      />
+    );
+  };
+
+  const row = (prop, control, provKind) => {
+    // #1 bigger-bet — scannable diff: a fully-unset single-prop row is dimmed so
+    // the handful of overridden rows pop (Webflow/Framer model). Composite rows
+    // (border — they pass an explicit provKind) are never dimmed.
+    const unset = provKind === undefined && !authored[prop];
+    return (
+      <div className={`st-cp-row${unset ? ' is-unset' : ''}`} key={prop}>
+        {provDot(prop, provKind)}
+        <label className="st-cp-label" title={prop}>
+          {prop}
+        </label>
+        <div className="st-cp-ctl">{control}</div>
+      </div>
+    );
+  };
+
+  // Props each section owns — drives the per-section "reset section" affordance.
+  const SECTION_PROPS = {
+    Layout: ['display', 'flex-direction', 'align-items', 'justify-content', 'gap'],
+    Typography: [
+      'font-family',
+      'color',
+      'font-size',
+      'font-weight',
+      'line-height',
+      'letter-spacing',
+      'text-align',
+    ],
+    Spacing: [
+      'margin-top',
+      'margin-right',
+      'margin-bottom',
+      'margin-left',
+      'padding-top',
+      'padding-right',
+      'padding-bottom',
+      'padding-left',
+    ],
+    Size: ['width', 'height', 'max-width'],
+    Appearance: [
+      'background-color',
+      'border-radius',
+      'border-top-left-radius',
+      'border-top-right-radius',
+      'border-bottom-left-radius',
+      'border-bottom-right-radius',
+      'border-width',
+      'border-style',
+      'border-color',
+      'box-shadow',
+      'opacity',
+    ],
+  };
+  const resetSection = (name) => {
+    (SECTION_PROPS[name] || []).forEach((p) => {
+      if (authored[p]) reset(p);
+    });
+  };
+
+  const sec = (name, body) => {
+    const dirty = (SECTION_PROPS[name] || []).some((p) => authored[p]);
+    return (
+      <section className="st-cp-sec" key={name}>
+        <div className="st-cp-sechd-row">
+          <button
+            type="button"
+            className="st-cp-sechd"
+            aria-expanded={!!open[name]}
+            onClick={() => setOpen((o) => ({ ...o, [name]: !o[name] }))}
+          >
+            <span className="st-cp-caret" aria-hidden="true">
+              {open[name] ? '▾' : '▸'}
+            </span>
+            {name}
+          </button>
+          {dirty ? (
+            <button
+              type="button"
+              className="st-cp-secreset"
+              aria-label={`reset ${name} section to original`}
+              title={`reset ${name}`}
+              onClick={() => resetSection(name)}
+            >
+              ⟲
+            </button>
+          ) : null}
+        </div>
+        {open[name] ? body : null}
+      </section>
+    );
+  };
+
+  // native <select> committing a CSS value directly
+  const csel = (prop, list) => (
+    <select
+      className="st-cp-nsel"
+      aria-label={prop}
+      value={list.includes(authored[prop]) ? authored[prop] : ''}
+      onChange={(e) => commit(prop, e.target.value)}
+    >
+      <option value="" disabled>
+        {cssHint(computed[prop]) || '—'}
+      </option>
+      {list.map((v) => (
+        <option key={v} value={v}>
+          {v}
+        </option>
+      ))}
+    </select>
+  );
+
+  // token quick-pick — Figma-style POPOVER (W2.1) listing the DS variables for
+  // this property (name + resolved value), grouped per design system (W3);
+  // picking writes var(--token). `familyKey` selects the token family.
+  const tok = (prop, familyKey) => {
+    const groups = tokenGroups(familyKey);
+    return groups.length ? (
+      <TokenPopover
+        kind="value"
+        groups={groups}
+        current={authored[prop]}
+        activeDs={_activeDs}
+        onPick={(v) => commit(prop, v)}
+        label={`${prop} design token`}
+      />
+    ) : null;
+  };
+
+  // free text input — raw value or var(--token), commits on blur/Enter
+  const text = (prop) => (
+    <input
+      className="st-cp-fin"
+      key={`${prop}:${authored[prop] ?? ''}`}
+      aria-label={prop}
+      defaultValue={authored[prop] ?? ''}
+      placeholder={cssHint(computed[prop]) || '—'}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') e.currentTarget.blur();
+      }}
+      onBlur={(e) => commit(prop, e.currentTarget.value)}
+    />
+  );
+
+  // number + steppers + unit-select (+ optional token quick-pick after)
+  const num = (prop, tokenList, opts = {}) => {
+    const cur = cssSplitUnit(authored[prop] ?? '');
+    // Unitless CSS properties — a bare number must commit WITHOUT a unit suffix
+    // (line-height: 1.5px ≠ 1.5 — knob-smoke finding, 2026-06-12).
+    const unitless = CSS_UNITLESS.has(prop);
+    const unit = unitless ? '' : cur.unit && cur.unit !== 'auto' ? cur.unit : 'px';
+    const bump = (d) => {
+      const base = Number.parseFloat(cur.n || cssHint(computed[prop]) || '0') || 0;
+      commit(prop, `${Math.round((base + d) * 100) / 100}${unit}`);
+    };
+    const lead = PROP_LEAD[prop];
+    return (
+      <>
+        <div className="st-cp-num">
+          {lead ? (
+            <span className="st-cp-numlead" aria-hidden="true">
+              {lead.t ? lead.t : <StIcon name={lead.icon} size={12} />}
+            </span>
+          ) : null}
+          <input
+            className="st-cp-numin st-cp-scrub"
+            key={`${prop}:${authored[prop] ?? ''}`}
+            aria-label={prop}
+            defaultValue={cur.unit && cur.unit !== '' ? cur.n : (authored[prop] ?? '')}
+            placeholder={cssHint(computed[prop]) || '—'}
+            onPointerDown={makeScrub(prop, { unitless, unit, min: opts.min })}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') e.currentTarget.blur();
+            }}
+            onBlur={(e) => {
+              const raw = e.currentTarget.value.trim();
+              if (!raw) return;
+              commit(prop, /[a-z%(]/i.test(raw) ? raw : `${raw}${unit}`);
+            }}
+          />
+          <span className="st-cp-step">
+            <button
+              type="button"
+              className="st-cp-stepb"
+              tabIndex={-1}
+              aria-label={`increase ${prop}`}
+              onClick={() => bump(1)}
+            >
+              ▲
+            </button>
+            <button
+              type="button"
+              className="st-cp-stepb"
+              tabIndex={-1}
+              aria-label={`decrease ${prop}`}
+              onClick={() => bump(-1)}
+            >
+              ▼
+            </button>
+          </span>
+          {unitless ? null : (
+          <select
+            className="st-cp-unitsel"
+            aria-label={`${prop} unit`}
+            value={cur.unit || 'px'}
+            onChange={(e) =>
+              commit(prop, e.target.value === 'auto' ? 'auto' : `${cur.n || '0'}${e.target.value}`)
+            }
+          >
+            {CSS_UNITS.map((u) => (
+              <option key={u} value={u}>
+                {u}
+              </option>
+            ))}
+          </select>
+          )}
+        </div>
+        {tok(prop, tokenList)}
+      </>
+    );
+  };
+
+  // color swatch (native picker → hex) + raw text + token quick-pick
+  const color = (prop) => {
+    // ONE colour control: the swatch is the trigger for a single popover with a
+    // full HSV picker (Custom) + the DS swatches (Variables). No separate native
+    // OS picker (#6 — was two popovers doing the same thing).
+    const resolved = computed[prop] || authored[prop] || '';
+    return (
+      <>
+        <TokenPopover
+          kind="color"
+          groups={tokenGroups('color')}
+          current={authored[prop]}
+          activeDs={_activeDs}
+          swatchBg={resolved}
+          seedHex={cssColorToHex(computed[prop] || authored[prop]) || '#000000'}
+          onPick={(v) => commit(prop, v)}
+          label={`${prop} colour`}
+        />
+        {text(prop)}
+      </>
+    );
+  };
+
+  // a box-model side input (margin/padding longhand). Phase 12.3 — Webflow-style:
+  // always shows the RESOLVED value (0 instead of blank) and a faint `is-zero`
+  // styling for an unset/zero side. Edits the single side (the old "link all
+  // sides" toggle was removed — DDR-104 Phase 12.3 W1.5).
+  const side = (prop, group) => {
+    const a = authored[prop];
+    const shown =
+      a != null && a !== ''
+        ? cssSplitUnit(a).n || a
+        : cssSplitUnit(cssHint(computed[prop]) ?? '').n || '0';
+    const isZero = !a || a === '0' || a === '0px' || a === 'auto';
+    // Webflow scrub modifiers — alt = symmetric pair (block for top/bottom,
+    // inline for left/right), alt+shift = all four.
+    const edge = prop.split('-').pop();
+    const pair =
+      edge === 'top' || edge === 'bottom'
+        ? [`${group}-top`, `${group}-bottom`]
+        : [`${group}-left`, `${group}-right`];
+    const all = [`${group}-top`, `${group}-right`, `${group}-bottom`, `${group}-left`];
+    return (
+      <input
+        className={`st-cp-boxv st-cp-scrub st-cp-boxv--${group[0]}${prop.split('-').pop()[0]}${
+          isZero ? ' is-zero' : ''
+        }`}
+        key={`${prop}:${a ?? ''}`}
+        aria-label={prop}
+        defaultValue={shown}
+        title="drag to scrub · alt = symmetric · alt+shift = all sides"
+        onPointerDown={makeScrub(prop, { sides: { pair, all } })}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') e.currentTarget.blur();
+        }}
+        onBlur={(e) => {
+          const raw = e.currentTarget.value.trim();
+          if (!raw) return;
+          const val = /[a-z%]/i.test(raw) ? raw : `${raw}px`;
+          commit(prop, val);
+        }}
+      />
+    );
+  };
+
+  const corner = (label, prop) => (
+    <label className="st-cp-cornerf">
+      <span>{label}</span>
+      <input
+        key={`${prop}:${authored[prop] ?? ''}`}
+        aria-label={prop}
+        defaultValue={cssSplitUnit(authored[prop] ?? '').n || ''}
+        placeholder={cssHint(computed[prop]) || '0'}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') e.currentTarget.blur();
+        }}
+        onBlur={(e) => {
+          const raw = e.currentTarget.value.trim();
+          if (raw) commit(prop, /[a-z%]/i.test(raw) ? raw : `${raw}px`);
+        }}
+      />
+    </label>
+  );
+
+  // Phase 12.3 — authored inline props with no curated row + custom HTML attrs,
+  // surfaced in Advanced so the user can see/edit/remove what they added.
+  const customStyleRows = Object.entries(customStyles);
+  const attrRows = Object.entries(attrs);
+
+  return (
+    <div className="st-cp" key={el.id} data-tour="css-panel">
+      <div className="st-cp-id">
+        <span className="st-cp-idtag">
+          {el.tag || 'element'}
+          {el.classes ? <span className="st-cp-idcls">.{el.classes.split(/\s+/)[0]}</span> : null}
+        </span>
+        <span className="st-cp-idmeta">inline style</span>
+      </div>
+
+      {sec(
+        'Layout',
+        <>
+          {row('display', csel('display', CSS_DISPLAYS))}
+          {row('flex-direction', csel('flex-direction', CSS_FLEX_DIR))}
+          {row('align-items', csel('align-items', CSS_ALIGN))}
+          {row('justify-content', csel('justify-content', CSS_JUSTIFY))}
+          {row('gap', num('gap', 'space'))}
+        </>
+      )}
+
+      {sec(
+        'Typography',
+        <>
+          {row('font-family', csel('font-family', CSS_FONTS))}
+          {row('color', color('color'))}
+          {row('font-size', num('font-size', 'type'))}
+          {row('font-weight', csel('font-weight', CSS_WEIGHTS))}
+          {row('line-height', num('line-height', 'lh'))}
+          {row('letter-spacing', num('letter-spacing', null, { min: -Infinity }))}
+          {row(
+            'text-align',
+            <div className="st-cp-seg" role="group" aria-label="text-align">
+              {CSS_ALIGN_OPTS.map((a) => (
+                <button
+                  key={a}
+                  type="button"
+                  className={`st-cp-segbtn${(authored['text-align'] || computed['text-align']) === a ? ' is-active' : ''}`}
+                  aria-label={`align ${a}`}
+                  aria-pressed={(authored['text-align'] || computed['text-align']) === a}
+                  onClick={() => commit('text-align', a)}
+                >
+                  <span className={`st-cp-bars st-cp-bars--${a === 'justify' ? 'just' : a}`} aria-hidden="true">
+                    <i />
+                    <i />
+                    <i />
+                  </span>
+                </button>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+
+      {sec(
+        'Spacing',
+        <>
+          <div className="st-cp-box" aria-label="margin and padding">
+            <span className="st-cp-boxtag st-cp-boxtag--m">
+              {prov(provOf('margin-top'))}margin
+            </span>
+            {side('margin-top', 'margin')}
+            {side('margin-right', 'margin')}
+            {side('margin-bottom', 'margin')}
+            {side('margin-left', 'margin')}
+            <div className="st-cp-boxpad">
+              <span className="st-cp-boxtag st-cp-boxtag--p">
+                {prov(provOf('padding-top'))}padding
+              </span>
+              {side('padding-top', 'padding')}
+              {side('padding-right', 'padding')}
+              {side('padding-bottom', 'padding')}
+              {side('padding-left', 'padding')}
+              <div className="st-cp-boxcore">
+                {Math.round(el.bounds?.w || 0)} × {Math.round(el.bounds?.h || 0)}
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+
+      {sec(
+        'Size',
+        <>
+          {row('width', num('width'))}
+          {row('height', num('height'))}
+          {row('max-width', num('max-width'))}
+        </>
+      )}
+
+      {sec(
+        'Appearance',
+        <>
+          {row('background-color', color('background-color'))}
+          <div className="st-cp-row">
+            {prov(provOf('border-radius'))}
+            <label className="st-cp-label" title="border-radius">
+              border-radius
+            </label>
+            <div className="st-cp-ctl">
+              {num('border-radius', 'radius')}
+              <button
+                type="button"
+                className={`st-cp-split${split ? ' is-on' : ''}`}
+                aria-pressed={split}
+                aria-label="set each corner separately"
+                title="set each corner separately"
+                onClick={() => setSplit((v) => !v)}
+              />
+            </div>
+          </div>
+          {split ? (
+            <div className="st-cp-corners" aria-label="per-corner radius">
+              {corner('TL', 'border-top-left-radius')}
+              {corner('TR', 'border-top-right-radius')}
+              {corner('BL', 'border-bottom-left-radius')}
+              {corner('BR', 'border-bottom-right-radius')}
+            </div>
+          ) : null}
+          {row(
+            'border',
+            <div className="st-cp-border">
+              {num('border-width')}
+              <select
+                className="st-cp-nsel st-cp-nsel--mini"
+                aria-label="border-style"
+                value={CSS_BORDER_STYLES.includes(authored['border-style']) ? authored['border-style'] : ''}
+                onChange={(e) => commit('border-style', e.target.value)}
+              >
+                <option value="" disabled>
+                  style
+                </option>
+                {CSS_BORDER_STYLES.map((s) => (
+                  <option key={s} value={s}>
+                    {s}
+                  </option>
+                ))}
+              </select>
+              <TokenPopover
+                kind="color"
+                groups={tokenGroups('color')}
+                current={authored['border-color']}
+                activeDs={_activeDs}
+                swatchBg={computed['border-color'] || authored['border-color'] || ''}
+                seedHex={
+                  cssColorToHex(computed['border-color'] || authored['border-color']) || '#000000'
+                }
+                onPick={(v) => commit('border-color', v)}
+                label="border colour"
+              />
+            </div>,
+            provOf('border-width')
+          )}
+          {row('box-shadow', tok('box-shadow', 'shadow') || text('box-shadow'))}
+          {row(
+            'opacity',
+            <div className="st-cp-num">
+              <span className="st-cp-numlead" aria-hidden="true">
+                <StIcon name="p-opacity" size={12} />
+              </span>
+              <input
+                className="st-cp-numin"
+                key={`opacity:${authored.opacity ?? ''}`}
+                aria-label="opacity"
+                defaultValue={authored.opacity ?? ''}
+                placeholder={cssHint(computed.opacity) || '1'}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') e.currentTarget.blur();
+                }}
+                onBlur={(e) => commit('opacity', e.currentTarget.value)}
+              />
+            </div>
+          )}
+        </>
+      )}
+
+      {/* #5 — the idle/saved status now lives in each row's leading dot (a glow),
+          so the panel no longer carries a confusing standing 'written to source'
+          line. Only a hard ERROR surfaces here, with the failing property. */}
+      {(() => {
+        const err = Object.entries(status).find(
+          ([, s]) => typeof s === 'string' && s.startsWith('err:')
+        );
+        return err ? (
+          <div className="st-cp-save is-err" role="status">
+            <StIcon name="x" size={12} />
+            {err[0]}: {err[1].slice(4)}
+          </div>
+        ) : null;
+      })()}
+
+      {sec(
+        'Advanced',
+        <div className="st-cp-advbody">
+          {customStyleRows.length ? (
+            <>
+              <div className="st-cp-advgrp">Custom CSS properties</div>
+              {customStyleRows.map(([p, v]) => (
+                <div className="st-cp-kv" key={`cs:${p}`}>
+                  <input
+                    className="st-cp-fin st-cp-fin--ro"
+                    readOnly
+                    value={p}
+                    aria-label={`custom property ${p} name`}
+                  />
+                  <input
+                    className="st-cp-fin"
+                    key={`cs:${p}:${v}`}
+                    defaultValue={v}
+                    aria-label={`${p} value`}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') e.currentTarget.blur();
+                    }}
+                    onBlur={(e) => commitCustom(p, e.currentTarget.value)}
+                  />
+                  <button
+                    type="button"
+                    className="st-cp-kvx"
+                    aria-label={`remove ${p}`}
+                    title="remove"
+                    onClick={() => resetCustom(p)}
+                  >
+                    <StIcon name="x" size={11} />
+                  </button>
+                </div>
+              ))}
+            </>
+          ) : null}
+          <div className="st-cp-advgrp">Add CSS property</div>
+          <RawKnob commit={commitCustom} />
+          <div className="st-cp-note">applied as-is — not token-bound</div>
+          {attrRows.length ? (
+            <>
+              <div className="st-cp-advgrp">Custom HTML attributes</div>
+              {attrRows.map(([a, v]) => (
+                <div className="st-cp-kv" key={`at:${a}`}>
+                  <input
+                    className="st-cp-fin st-cp-fin--ro"
+                    readOnly
+                    value={a}
+                    aria-label={`attribute ${a} name`}
+                  />
+                  <input
+                    className="st-cp-fin"
+                    key={`at:${a}:${v}`}
+                    defaultValue={v}
+                    aria-label={`${a} value`}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') e.currentTarget.blur();
+                    }}
+                    onBlur={(e) => commitAttr(a, e.currentTarget.value)}
+                  />
+                  <button
+                    type="button"
+                    className="st-cp-kvx"
+                    aria-label={`remove ${a}`}
+                    title="remove"
+                    onClick={() => resetAttr(a)}
+                  >
+                    <StIcon name="x" size={11} />
+                  </button>
+                </div>
+              ))}
+            </>
+          ) : null}
+          <div className="st-cp-advgrp">Add HTML attribute</div>
+          <AttrKnob commit={commitAttr} />
+        </div>
+      )}
+
+      <div className="st-cp-legend">
+        <span>
+          <i className="st-cp-prov st-cp-prov--bound" aria-hidden="true" />
+          token
+        </span>
+        <span>
+          <i className="st-cp-prov st-cp-prov--raw" aria-hidden="true" />
+          override
+        </span>
+        <span>
+          <i className="st-cp-prov st-cp-prov--inherit" aria-hidden="true" />
+          inherited
+        </span>
+      </div>
+    </div>
+  );
+}
+
+// Custom CSS property hatch — writes an arbitrary `property: value` to inline style.
+function RawKnob({ commit }) {
+  const [prop, setProp] = useState('');
+  const [val, setVal] = useState('');
+  const submit = () => {
+    if (prop.trim() && val.trim()) {
+      commit(prop.trim(), val);
+      setProp('');
+      setVal('');
+    }
+  };
+  return (
+    <div className="st-cp-kv">
+      <input
+        className="st-cp-fin"
+        aria-label="custom property name"
+        placeholder="property"
+        value={prop}
+        onChange={(e) => setProp(e.target.value)}
+      />
+      <input
+        className="st-cp-fin"
+        aria-label="custom property value"
+        placeholder="value"
+        value={val}
+        onChange={(e) => setVal(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') submit();
+        }}
+        onBlur={submit}
+      />
+    </div>
+  );
+}
+
+// Custom HTML attribute hatch — writes a plain JSX attribute (data-*, aria-*, …).
+function AttrKnob({ commit }) {
+  const [attr, setAttr] = useState('');
+  const [val, setVal] = useState('');
+  const submit = () => {
+    if (attr.trim() && val.trim()) {
+      commit(attr.trim(), val);
+      setAttr('');
+      setVal('');
+    }
+  };
+  return (
+    <div className="st-cp-kv">
+      <input
+        className="st-cp-fin"
+        aria-label="custom attribute name"
+        placeholder="data-…"
+        value={attr}
+        onChange={(e) => setAttr(e.target.value)}
+      />
+      <input
+        className="st-cp-fin"
+        aria-label="custom attribute value"
+        placeholder="value"
+        value={val}
+        onChange={(e) => setVal(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') submit();
+        }}
+        onBlur={submit}
+      />
+    </div>
+  );
+}
+
+// ---------- Inspector panel (display-only) ----------
+//
+// T6 (Plan C) — right-dock Inspect / Layers / CSS tabs per `.design/ui/Studio.tsx`
+// InspectorPanel. DISPLAY-ONLY: reads the live `selected` payload from the
+// inspector bridge (`bounds`, `tag`, `classes`, `dom_path`, `html`). The
+// mockup's live-CSS-knob WRITEBACK is Phase 12 (needs a canvas-origin write
+// bridge, DDR-054) — the CSS tab shows markup read-only + keeps that callout, so
+// it never implies functionality it lacks (the exact reason DDR-096 deferred it).
+// ---------- Layers tree row (Phase 12 Task 4) ----------
+// Phase 12.3 (W3.1) — map a LayerNode `type` (classified in canvas-shell) to a
+// type-distinct icon, matching the Studio.tsx layers design.
+const LAYER_TYPE_ICON = {
+  button: 'button',
+  heading: 'type',
+  text: 'type',
+  input: 'input',
+  form: 'input',
+  image: 'image',
+  link: 'link',
+  list: 'list',
+  nav: 'layers',
+  box: 'box',
+};
+
+function LayerRow({
+  node,
+  depth,
+  selectedId,
+  collapsed,
+  hidden,
+  onToggle,
+  onSelect,
+  onHover,
+  onToggleVisibility,
+}) {
+  const key = `${node.id}:${node.index}`;
+  const hasKids = node.children && node.children.length > 0;
+  const isCollapsed = collapsed.has(key);
+  const isSel = node.id === selectedId;
+  const isHidden = hidden?.has(key);
+  return (
+    <>
+      <div
+        className={
+          'st-layer st-layer--row' + (isSel ? ' is-sel' : '') + (isHidden ? ' is-hidden' : '')
+        }
+        style={{ paddingLeft: 6 + depth * 14 }}
+        role="treeitem"
+        aria-selected={isSel}
+        aria-expanded={hasKids ? !isCollapsed : undefined}
+        tabIndex={0}
+        title={`${node.tag} · ${node.type}`}
+        onClick={() => onSelect(node)}
+        onMouseEnter={() => onHover(node)}
+        onMouseLeave={() => onHover(null)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onSelect(node);
+          }
+        }}
+      >
+        {hasKids ? (
+          <button
+            type="button"
+            className="st-layer-caret"
+            aria-label={isCollapsed ? 'Expand' : 'Collapse'}
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggle(key);
+            }}
+          >
+            {isCollapsed ? '▸' : '▾'}
+          </button>
+        ) : (
+          <span className="st-layer-caret" aria-hidden="true" />
+        )}
+        <StIcon name={LAYER_TYPE_ICON[node.type] || 'box'} size={12} className="st-layer-ticon" />
+        <span className="st-layer-label">{node.label}</span>
+        <span className="st-layer-type">{node.type}</span>
+        {onToggleVisibility ? (
+          <button
+            type="button"
+            className="st-layer-eye"
+            aria-label={isHidden ? `Show ${node.label}` : `Hide ${node.label}`}
+            aria-pressed={isHidden}
+            title={isHidden ? 'Show' : 'Hide'}
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleVisibility(node);
+            }}
+          >
+            <StIcon name={isHidden ? 'eye-off' : 'eye'} size={13} />
+          </button>
+        ) : null}
+      </div>
+      {hasKids && !isCollapsed
+        ? node.children.map((c) => (
+            <LayerRow
+              key={`${c.id}:${c.index}`}
+              node={c}
+              depth={depth + 1}
+              selectedId={selectedId}
+              collapsed={collapsed}
+              hidden={hidden}
+              onToggle={onToggle}
+              onSelect={onSelect}
+              onHover={onHover}
+              onToggleVisibility={onToggleVisibility}
+            />
+          ))
+        : null}
+    </>
+  );
+}
+
+// Phase 12.3 — live computed readout for the Inspect tab (replaces the stale
+// "lands with the live CSS bridge (Phase 12)" callout — that bridge shipped).
+// Reads the resolved values the selection already carries (dom-selection
+// styleMapsFor → el.computed). Read-only; the CSS tab is where you edit.
+function InspectComputed({ el }) {
+  const c = el?.computed || {};
+  const a = el?.authored || {};
+  // Prefer the authored token name (var(--accent) → "--accent") as the label;
+  // fall back to the resolved value. The swatch always shows the RESOLVED color.
+  const valueLabel = (prop) => {
+    const av = a[prop];
+    if (av && /var\(\s*--/.test(av)) return av.replace(/^var\(\s*|\s*\)$/g, '');
+    return c[prop] || av || '';
+  };
+  const colorRow = (lbl, prop) => {
+    const resolved = c[prop] || a[prop];
+    if (!resolved) return null;
+    return (
+      <div className="st-insp-row" key={lbl}>
+        <span className="st-insp-label">{lbl}</span>
+        <div className="st-swatch-row">
+          <span className="st-insp-swatch" style={{ background: resolved }} aria-hidden="true" />
+          <span className="st-mono" style={{ fontSize: 11, color: 'var(--fg-1)' }}>
+            {valueLabel(prop)}
+          </span>
+        </div>
+      </div>
+    );
+  };
+  const hasRadius = c['border-radius'] && c['border-radius'] !== '0px';
+  const radiusN = hasRadius ? cssSplitUnit(c['border-radius']).n || c['border-radius'] : null;
+  const font =
+    c['font-size'] || c['font-weight']
+      ? [c['font-size'], c['font-weight']].filter(Boolean).join(' / ')
+      : null;
+  const anyType = c['background-color'] || c.color || hasRadius || font;
+  if (!anyType) return null;
+  return (
+    <>
+      {hasRadius ? (
+        <div className="st-insp-row">
+          <span className="st-insp-label">Radius</span>
+          <div className="st-insp-fields">
+            <span className="st-fmini" style={{ flex: '0 0 auto', maxWidth: 84 }}>
+              <span className="st-mtag">r</span>
+              <input value={radiusN} readOnly aria-label="border radius" />
+            </span>
+            <span className="st-insp-unit">px</span>
+          </div>
+        </div>
+      ) : null}
+      {colorRow('Fill', 'background-color')}
+      {colorRow('Text', 'color')}
+      {font ? (
+        <div className="st-insp-row">
+          <span className="st-insp-label">Font</span>
+          <div className="st-insp-fields">
+            <span className="st-mono" style={{ fontSize: 11, color: 'var(--fg-0)' }}>{font}</span>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+function InspectorPanel({
+  selected,
+  onClose,
+  layersTree,
+  onSelectLayer,
+  onHoverLayer,
+  cfg,
+  onOptimistic,
+  tab: tabProp,
+  onTabChange,
+  width,
+  resizing,
+}) {
+  // Tab is controllable from the parent (the guided tour drives it to 'css' /
+  // 'layers' so a spotlight step lands on a real row) but falls back to local
+  // state for normal use. A user click both updates local state and notifies the
+  // parent, so the two stay in lockstep whichever owns it.
+  const [tabState, setTabState] = useState('inspect');
+  const tab = tabProp ?? tabState;
+  const setTab = (t) => {
+    setTabState(t);
+    onTabChange?.(t);
+  };
+  const [collapsed, setCollapsed] = useState(() => new Set());
+  // Phase 12.3 (W3.1) — per-layer visibility toggle. Live-only (display:none via
+  // the optimistic apply bus); not persisted to source. Keyed by `${id}:${index}`.
+  const [hiddenLayers, setHiddenLayers] = useState(() => new Set());
+  const toggleCollapse = (key) =>
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  const toggleVisibility = (node) => {
+    const key = `${node.id}:${node.index}`;
+    const willHide = !hiddenLayers.has(key);
+    onOptimistic?.({
+      id: node.id,
+      artboardId: layersTree?.artboardId ?? null,
+      index: node.index,
+      prop: 'display',
+      value: willHide ? 'none' : null,
+    });
+    setHiddenLayers((prev) => {
+      const next = new Set(prev);
+      if (willHide) next.add(key);
+      else next.delete(key);
+      return next;
+    });
+  };
   // `selected` may be a single element, an array (multi-select), or null.
   const el = Array.isArray(selected) ? selected[0] : selected;
   const tabBtn = (id, label, icon) => (
@@ -2816,8 +5112,13 @@ function InspectorPanel({ selected, onClose }) {
   );
   const b = el?.bounds || null;
   return (
-    <aside className="st-rpanel" aria-label="Inspector">
-      <div className="st-rp-tabs">
+    <aside
+      className={'st-rpanel' + (resizing ? ' is-resizing' : '')}
+      style={width ? { width, flexBasis: width } : undefined}
+      aria-label="Inspector"
+      data-tour="inspector"
+    >
+      <div className="st-rp-tabs" data-tour="inspector-tabs">
         {tabBtn('inspect', 'Inspect', 'sliders')}
         {tabBtn('layers', 'Layers', 'layers')}
         {tabBtn('css', 'CSS', 'code')}
@@ -2834,7 +5135,11 @@ function InspectorPanel({ selected, onClose }) {
       <div className="st-rp-body">
         {!el ? (
           <div className="st-rp-empty">
-            Hold <Kbd>⌘</Kbd> inside the canvas and click an element to inspect it.
+            {/* <p> wrapper — st-rp-empty is a flex column, bare text nodes +
+                kbd would stack as stretched flex items. */}
+            <p>
+              Hold <Kbd>⌘</Kbd> inside the canvas and click an element to inspect it.
+            </p>
           </div>
         ) : tab === 'inspect' ? (
           <>
@@ -2842,26 +5147,26 @@ function InspectorPanel({ selected, onClose }) {
             <div className="st-insp-row">
               <span className="st-insp-label">Pos</span>
               <div className="st-insp-fields">
-                <span className="st-field-lead">
-                  <span className="k">X</span>
-                  <input className="st-field" value={b ? Math.round(b.x) : '—'} readOnly />
+                <span className="st-fmini">
+                  <span className="st-mtag">X</span>
+                  <input value={b ? Math.round(b.x) : '—'} readOnly aria-label="x position" />
                 </span>
-                <span className="st-field-lead">
-                  <span className="k">Y</span>
-                  <input className="st-field" value={b ? Math.round(b.y) : '—'} readOnly />
+                <span className="st-fmini">
+                  <span className="st-mtag">Y</span>
+                  <input value={b ? Math.round(b.y) : '—'} readOnly aria-label="y position" />
                 </span>
               </div>
             </div>
             <div className="st-insp-row">
               <span className="st-insp-label">Size</span>
               <div className="st-insp-fields">
-                <span className="st-field-lead">
-                  <span className="k">W</span>
-                  <input className="st-field" value={b ? Math.round(b.w) : '—'} readOnly />
+                <span className="st-fmini">
+                  <span className="st-mtag">W</span>
+                  <input value={b ? Math.round(b.w) : '—'} readOnly aria-label="width" />
                 </span>
-                <span className="st-field-lead">
-                  <span className="k">H</span>
-                  <input className="st-field" value={b ? Math.round(b.h) : '—'} readOnly />
+                <span className="st-fmini">
+                  <span className="st-mtag">H</span>
+                  <input value={b ? Math.round(b.h) : '—'} readOnly aria-label="height" />
                 </span>
               </div>
             </div>
@@ -2883,14 +5188,29 @@ function InspectorPanel({ selected, onClose }) {
                 </div>
               </div>
             ) : null}
-            <div className="callout callout--info" style={{ fontSize: 12 }}>
-              Computed fill / radius / type readout lands with the live CSS bridge (Phase 12).
-            </div>
+            <InspectComputed el={el} />
           </>
         ) : tab === 'layers' ? (
           <>
-            <div className="st-rp-hd">Layers · ancestry</div>
-            {Array.isArray(el.dom_path) && el.dom_path.length ? (
+            <div className="st-rp-hd">Layers{layersTree?.nodes?.length ? '' : ' · ancestry'}</div>
+            {layersTree?.nodes?.length ? (
+              <div role="tree" aria-label="Artboard layers">
+                {layersTree.nodes.map((n) => (
+                  <LayerRow
+                    key={`${n.id}:${n.index}`}
+                    node={n}
+                    depth={0}
+                    selectedId={el.id}
+                    collapsed={collapsed}
+                    hidden={hiddenLayers}
+                    onToggle={toggleCollapse}
+                    onSelect={(node) => onSelectLayer?.(node)}
+                    onHover={(node) => onHoverLayer?.(node)}
+                    onToggleVisibility={toggleVisibility}
+                  />
+                ))}
+              </div>
+            ) : Array.isArray(el.dom_path) && el.dom_path.length ? (
               el.dom_path.map((node, i) => (
                 <div
                   key={i}
@@ -2902,25 +5222,13 @@ function InspectorPanel({ selected, onClose }) {
                 </div>
               ))
             ) : (
-              <div className="st-rp-empty">No ancestry path for this selection.</div>
+              <div className="st-rp-empty">
+                Select an element (⌘-click in the canvas) to see its layer tree.
+              </div>
             )}
           </>
         ) : (
-          <>
-            <div className="st-rp-hd">Markup · {el.selector || el.tag}</div>
-            <div className="st-css">
-              <div>
-                <span className="comment">/* read-only — outerHTML snapshot */</span>
-              </div>
-              <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
-                {(el.html || '').slice(0, 600) || '(no markup captured)'}
-              </div>
-            </div>
-            <div className="callout callout--info" style={{ fontSize: 12 }}>
-              Phase 12 — knob edits will write back to the artboard live and stage a diff for
-              handoff. Today the inspector is read-only.
-            </div>
-          </>
+          <CssKnobs el={el} cfg={cfg} onOptimistic={onOptimistic} />
         )}
       </div>
     </aside>
@@ -2935,6 +5243,15 @@ function App() {
   const [tabs, setTabs] = useState([]);
   const [activePath, setActivePath] = useState(null);
   const [selected, setSelected] = useState(null);
+  // Phase 12.3 — latest selection, readable from the (stale-closure) onMessage
+  // handler so an HMR reload (triggered by a CSS/attr edit) can re-select the
+  // same element and restore the in-canvas halo the remount dropped.
+  const selectedRef = useRef(null);
+  useEffect(() => {
+    selectedRef.current = selected;
+  }, [selected]);
+  // Phase 12 Task 4 — Layers tree for the active artboard (posted by canvas-shell).
+  const [layersTree, setLayersTree] = useState(null);
   const [wsConnected, setWsConnected] = useState(false);
   // Phase 8 Task 7 — git lifecycle reload prompt. Server has already flushed
   // every dirty Y.Doc to disk by the time this state populates, so accepting
@@ -2945,6 +5262,49 @@ function App() {
   const [syncStatus, setSyncStatus] = useState(null);
   const [search, setSearch] = useState('');
   const [systemData, setSystemData] = useState(null);
+  // Canvas-compile skeleton (single-canvas model → one path at a time).
+  const [loadingPath, setLoadingPath] = useState(null);
+  const loadFallbackTimer = useRef(null);
+  // Resizable side panels (DS components-resize-panels) + the active drag side.
+  const sbSize = usePanelSize('maude-sb-w', { min: 200, max: 420, def: 252 });
+  const rpSize = usePanelSize('maude-rp-w', { min: 260, max: 480, def: 304 });
+  const [dragSide, setDragSide] = useState(null); // 'sb' | 'rp' | null
+  const bodyRef = useRef(null);
+
+  // Pointer drag for the panel grips — window listeners while dragging (the
+  // grip also pointer-captures, and `.st-body.is-resizing iframe` drops pointer
+  // events so the canvas iframe can't swallow the move stream mid-drag).
+  useEffect(() => {
+    if (!dragSide) return;
+    const onMove = (e) => {
+      const rect = bodyRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      if (dragSide === 'sb') sbSize.setW(e.clientX - rect.left);
+      else rpSize.setW(rect.right - e.clientX);
+    };
+    const onUp = () => setDragSide(null);
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    return () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+    };
+  }, [dragSide, sbSize.setW, rpSize.setW]);
+
+  // Loading-skeleton lifecycle: dgn:'loaded' clears it instantly (TSX canvases);
+  // the iframe load event arms a short fallback for legacy .html canvases that
+  // never post it; a hard cap guards against a canvas that dies mid-compile.
+  const onIframeLoad = useCallback((path) => {
+    clearTimeout(loadFallbackTimer.current);
+    loadFallbackTimer.current = setTimeout(() => {
+      setLoadingPath((p) => (p === path ? null : p));
+    }, 2500);
+  }, []);
+  useEffect(() => {
+    if (!loadingPath) return;
+    const cap = setTimeout(() => setLoadingPath(null), 15000);
+    return () => clearTimeout(cap);
+  }, [loadingPath]);
   // Loaded once at boot from /_config — informs canvasUrl() so TSX iframes
   // can pass the right ?designRel + ?tokens query to the canvas mount shell.
   const [cfg, setCfg] = useState({ designRel: '.design' });
@@ -3008,17 +5368,43 @@ function App() {
   const [showHidden, setShowHidden] = useState(() => readBoolStore(SHOW_HIDDEN_STORE, false));
   const [sectionsExpanded, setSectionsExpanded] = useState(() => readJsonStore(SECTIONS_STORE, {}));
   const [helpOpen, setHelpOpen] = useState(false);
+  // ? cheat-sheet (DS components-shortcuts-overlay) — separate from the deep
+  // Help modal (F1), which keeps commands & flows.
+  const [shortcutsOpen, setShortcutsOpen] = useState(false);
   const [paletteOpen, setPaletteOpen] = useState(false);
   // T5/T6 (Plan C) — shell-level export/handoff dialog + inspector panel state.
   // The palette (T4) drives them; the dialog (T5) + panel (T6) consume them.
   const [exportDialog, setExportDialog] = useState(null); // null | { mode: 'export'|'handoff', scope? }
   const [inspectorOpen, setInspectorOpen] = useState(false);
+  // Inspector tab is lifted so View ▸ Layers can open the panel ON the Layers
+  // tab (the menu item sat disabled as "Phase 12" long after the tab shipped).
+  const [inspectorTab, setInspectorTab] = useState('inspect');
   const whatsNew = useWhatsNew(MDCC_VERSION);
   const [tourSteps, setTourSteps] = useState(null);
   const [usageNudge, setUsageNudge] = useState(() => !readBoolStore(USAGE_TOUR_STORE, false));
   const startTour = useCallback((steps) => {
     setTourSteps(Array.isArray(steps) && steps.length ? steps : null);
   }, []);
+  // Guided-tour bus — the overlay calls setup() before each step to put the shell
+  // into the state the step spotlights: open a canvas, open the Inspector, switch
+  // its tab. The canvas iframe is cross-origin (DDR-054) so the tour can't select
+  // an element for the user; requireSelection steps instead wait for a real
+  // ⌘-click. Plain object (the overlay refs it), so per-render churn is harmless.
+  const tourBus = {
+    setup: (step) => {
+      if (!step) return;
+      if ((step.canvas || step.requireSelection) && tabs.length === 0) {
+        setSidebarOpen(true);
+        setTimeout(() => {
+          try {
+            document.querySelector('.st-sidebar [role="treeitem"]')?.click();
+          } catch {}
+        }, 80);
+      }
+      if (step.inspector || step.tab || step.requireSelection) setInspectorOpen(true);
+      if (step.tab) setInspectorTab(step.tab);
+    },
+  };
   const markUsageSeen = useCallback(() => {
     setUsageNudge(false);
     try {
@@ -3245,9 +5631,9 @@ function App() {
         try {
           const m = JSON.parse(e.data);
           if (m.type === 'snapshot' && m.state) {
-            setSelected(m.state.selected);
+            setSelected((prev) => mergeSelClientFields(m.state.selected, prev));
           } else if (m.type === 'selected') {
-            setSelected(m.selected);
+            setSelected((prev) => mergeSelClientFields(m.selected, prev));
           } else if (m.type === 'comments' && typeof m.file === 'string') {
             setCommentsByFile((prev) => ({ ...prev, [m.file]: m.comments || [] }));
           } else if (m.type === 'ai-activity' && typeof m.file === 'string') {
@@ -3311,6 +5697,9 @@ function App() {
     });
     setActivePath(path);
     setFocusedCommentId(null);
+    // Canvas-compile skeleton — cleared by the iframe's dgn:'loaded' message,
+    // the onLoad fallback timer (legacy .html), or a hard 15s cap.
+    if (path !== SYSTEM_TAB) setLoadingPath(path);
   }, []);
 
   const openSystem = useCallback(
@@ -3349,6 +5738,7 @@ function App() {
         return next;
       });
       iframesRef.current.delete(path);
+      setLoadingPath((p) => (p === path ? null : p));
     },
     [activePath]
   );
@@ -3507,6 +5897,27 @@ function App() {
       } else if (m.dgn === 'clear-select') {
         wsSend({ type: 'clear-select' });
         setSelected(null);
+      } else if (m.dgn === 'edit-text' && m.id) {
+        // Phase 12 (DDR-103) — inline text edit committed in the canvas. POST to
+        // the main-origin-only /_api/edit-text → editText writes the escaped
+        // JSXText to source; the file-watcher HMR reload then shows the new text.
+        // A refusal (mixed/expression content) is logged, not fatal.
+        fetch('/_api/edit-text', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ canvas: m.file, id: m.id, text: m.text ?? '' }),
+        })
+          .then((r) => r.json().catch(() => ({})))
+          .then((j) => {
+            if (!j.ok) console.warn('[edit-text]', j.error || 'failed');
+          })
+          .catch(() => {});
+      } else if (m.dgn === 'layers-tree') {
+        // Phase 12 Task 4 — browsable layers tree for the active artboard.
+        setLayersTree({ artboardId: m.artboardId, nodes: Array.isArray(m.tree) ? m.tree : [] });
+      } else if (m.dgn === 'open-inspector') {
+        // Phase 12 — context-menu "Inspect" / tool-palette Inspect opens the right panel.
+        setInspectorOpen(true);
       } else if (m.dgn === 'comment-compose' && m.selection) {
         // Phase 6 — the iframe overlay owns the composer surface now. The
         // shell just mirrors `selected` so the StatusBar / sidebar still
@@ -3555,6 +5966,14 @@ function App() {
         // inspector forwards the chord here since the iframe's keydown never
         // reaches the shell's window listener. Mirror that handler's toggle.
         setPaletteOpen((v) => !v);
+      } else if (m.dgn === 'shell-shortcut') {
+        // Same forwarding lane for the other shell chords (inspect.ts) — so
+        // ⌘R / ⌘⇧I / ⌘⇧M / ⌘⇧E / ⌘⇧H behave identically wherever focus is.
+        if (m.id === 'reload') reloadActive();
+        else if (m.id === 'inspector') setInspectorOpen((v) => !v);
+        else if (m.id === 'comments') setCommentsPanelOpen((v) => !v);
+        else if (m.id === 'export') setExportDialog({ mode: 'export' });
+        else if (m.id === 'handoff') setExportDialog({ mode: 'handoff' });
       } else if (m.dgn === 'open-export') {
         // Plan C — the in-canvas toolbar / context menu route here so they open
         // the SAME shell Export dialog as the menubar (one look, all settings).
@@ -3564,7 +5983,9 @@ function App() {
           scope: m.detail && typeof m.detail.scope === 'string' ? m.detail.scope : undefined,
         });
       } else if (m.dgn === 'loaded' && m.file) {
-        // iframe finished loading — push current comments + carry over focused pin if any
+        // iframe finished loading — drop the compile skeleton, push current
+        // comments + carry over focused pin if any
+        setLoadingPath((p) => (p === m.file ? null : p));
         const list = commentsByFile[m.file] || [];
         const el = [...iframesRef.current.entries()].find(([k]) => k === m.file)?.[1];
         if (el && el.contentWindow) {
@@ -3582,6 +6003,26 @@ function App() {
               el.contentWindow.postMessage({ dgn: 'comment-focus', id: focusedCommentId }, '*');
             } catch {}
           }
+          // Phase 12.3 (W1.1) — an edit-css/edit-attr commit triggers the file
+          // watcher's HMR reload, which remounts the canvas and drops the
+          // in-canvas selection halo. Re-select the same element by its stable
+          // data-cd-id so the user keeps focus on what they're editing. The
+          // canvas-shell `select-by-id` handler re-emits select-set, which keeps
+          // the Inspector panel + halo in sync. Guarded to the active file.
+          const sel = selectedRef.current;
+          if (sel && sel.id && sel.file === m.file) {
+            try {
+              el.contentWindow.postMessage(
+                {
+                  dgn: 'select-by-id',
+                  id: sel.id,
+                  artboardId: sel.artboardId ?? null,
+                  index: sel.index ?? 0,
+                },
+                '*'
+              );
+            } catch {}
+          }
         }
       } else if (m.dgn === 'export-request' && m.id && m.payload) {
         // The export dialog renders inside the canvas iframe (canvas origin),
@@ -3651,7 +6092,7 @@ function App() {
     }
     window.addEventListener('message', onMessage);
     return () => window.removeEventListener('message', onMessage);
-  }, [commentsByFile, focusedCommentId, cfg, theme]);
+  }, [commentsByFile, focusedCommentId, cfg, theme, reloadActive]);
 
   // Tell the active canvas iframe to drop any persistent selection (canvas
   // SelectionSet) — used when the comment composer closes via submit /
@@ -3667,6 +6108,22 @@ function App() {
     }
   }, [activePath]);
 
+  // Phase 12.3 (W1.1) — optimistic inline-style preview. The CSS panel calls this
+  // on commit so the selected element updates instantly in the canvas before the
+  // edit-css → HMR reload lands. `value` null = the reset path (remove the prop).
+  const applyOptimisticStyle = useCallback(
+    (payload) => {
+      if (!activePath || activePath === SYSTEM_TAB) return;
+      const el = iframesRef.current.get(activePath);
+      if (el && el.contentWindow) {
+        try {
+          el.contentWindow.postMessage({ dgn: 'apply-style', ...payload }, '*');
+        } catch {}
+      }
+    },
+    [activePath]
+  );
+
   const resolveComment = useCallback((id) => {
     wsSend({ type: 'comments-patch', id, patch: { status: 'resolved' } });
   }, []);
@@ -3737,6 +6194,25 @@ function App() {
         setCommentsPanelOpen((v) => !v);
         return;
       }
+      // Cmd+Shift+I — toggle Inspector. Was bare "I", which collided with the
+      // canvas highlighter tool (same letter, different action by focus).
+      if (meta && e.shiftKey && (e.key === 'i' || e.key === 'I')) {
+        e.preventDefault();
+        setInspectorOpen((v) => !v);
+        return;
+      }
+      // Cmd+Shift+E / Cmd+Shift+H — the File-menu chords, previously
+      // advertised but never bound.
+      if (meta && e.shiftKey && (e.key === 'e' || e.key === 'E')) {
+        e.preventDefault();
+        setExportDialog({ mode: 'export' });
+        return;
+      }
+      if (meta && e.shiftKey && (e.key === 'h' || e.key === 'H')) {
+        e.preventDefault();
+        setExportDialog({ mode: 'handoff' });
+        return;
+      }
       // Cmd+C / Ctrl+C — Phase 4.1 removed the shell-side comment-drop chord.
       // Canvas comment-drop is the `C` tool letter (press C in the canvas,
       // then click the element) or right-click "Add comment". Cmd+C now
@@ -3806,14 +6282,25 @@ function App() {
         }
         return;
       }
-      // I — toggle Inspector panel (T6, Plan C)
-      if ((e.key === 'i' || e.key === 'I') && !meta && !e.shiftKey) {
+      // N — open the new-brief-board composer (replaces the advertised ⌘N,
+      // which the browser reserves for New Window and never delivers).
+      if ((e.key === 'n' || e.key === 'N') && !meta && !e.shiftKey) {
         e.preventDefault();
-        setInspectorOpen((v) => !v);
+        setSidebarOpen(true);
+        setTimeout(
+          () => document.querySelector('[aria-label="New blank brief board"]')?.click(),
+          60
+        );
+        return;
+      }
+      // ? — keyboard-shortcuts cheat sheet (DS shortcuts overlay)
+      if (e.key === '?') {
+        e.preventDefault();
+        setShortcutsOpen((v) => !v);
         return;
       }
-      // ? or F1 — open Help modal
-      if (e.key === '?' || e.key === 'F1') {
+      // F1 — the full Help modal (commands & flows)
+      if (e.key === 'F1') {
         e.preventDefault();
         setHelpOpen(true);
         return;
@@ -3872,7 +6359,7 @@ function App() {
         group: 'Canvas',
         label: 'New canvas…',
         icon: 'plus',
-        kbd: '⌘N',
+        kbd: 'N',
         run: () => {
           setSidebarOpen(true);
           setTimeout(
@@ -3919,7 +6406,7 @@ function App() {
         group: 'View',
         label: 'Open inspector',
         icon: 'sliders',
-        kbd: 'I',
+        kbd: '⌘⇧I',
         run: () => setInspectorOpen(true),
       },
       {
@@ -3960,11 +6447,19 @@ function App() {
         run: () => whatsNew.openPanel(),
       },
       {
-        id: 'help',
+        id: 'shortcuts',
         group: 'Help',
-        label: 'Help · shortcuts & commands',
+        label: 'Keyboard shortcuts',
         icon: 'help',
         kbd: '?',
+        run: () => setShortcutsOpen(true),
+      },
+      {
+        id: 'help',
+        group: 'Help',
+        label: 'Help · commands & flows',
+        icon: 'help',
+        kbd: 'F1',
         run: () => setHelpOpen(true),
       },
     ],
@@ -4010,6 +6505,8 @@ function App() {
           showHidden={showHidden}
           onToggleShowHidden={() => setShowHidden((v) => !v)}
           onOpenHelp={() => setHelpOpen(true)}
+          onOpenShortcuts={() => setShortcutsOpen(true)}
+          onStartTour={() => startTour(USAGE_TOUR)}
           annotationsVisible={annotationsVisible}
           onToggleAnnotations={toggleAnnotations}
           postToActiveCanvas={postToActiveCanvas}
@@ -4017,7 +6514,17 @@ function App() {
           whatsNewCount={whatsNew.unseen.length}
           artboardCount={activeArtboards}
           inspectorOpen={inspectorOpen}
+          inspectorTab={inspectorTab}
           onToggleInspector={() => setInspectorOpen((v) => !v)}
+          onOpenLayers={() => {
+            // Toggle: already open on Layers → close; otherwise open on Layers.
+            if (inspectorOpen && inspectorTab === 'layers') {
+              setInspectorOpen(false);
+            } else {
+              setInspectorTab('layers');
+              setInspectorOpen(true);
+            }
+          }}
           onNewCanvas={() => {
             setSidebarOpen(true);
             setTimeout(
@@ -4027,6 +6534,7 @@ function App() {
           }}
           onOpenExport={(mode) => setExportDialog({ mode })}
           onReload={reloadActive}
+          onCloseCanvas={() => activePath && closeTab(activePath)}
           presence={
             <>
               <StAvatar
@@ -4035,12 +6543,17 @@ function App() {
                 title={gitUser ? `${gitUser} (you)` : 'You'}
               />
               {agentActive && (
-                <StAvatar initials="C" hue="var(--presence-agent)" title="Claude · editing" />
+                <StAvatar
+                  initials="C"
+                  hue="var(--presence-agent)"
+                  title="Claude · editing"
+                  pulse
+                />
               )}
             </>
           }
         />
-        <div className="st-body">
+        <div className={'st-body' + (dragSide ? ' is-resizing' : '')} ref={bodyRef}>
           <CollapsedRail
             shown={!sidebarOpen}
             onExpand={() => setSidebarOpen(true)}
@@ -4066,7 +6579,21 @@ function App() {
             onDeleteBoard={deleteBoard}
             collapsed={!sidebarOpen}
             onCollapse={() => setSidebarOpen(false)}
+            width={sbSize.w}
+            resizing={dragSide === 'sb'}
           />
+          {sidebarOpen && (
+            <PanelGrip
+              label="Resize files panel"
+              size={sbSize}
+              active={dragSide === 'sb'}
+              onPointerDown={(e) => {
+                e.preventDefault();
+                e.currentTarget.setPointerCapture?.(e.pointerId);
+                setDragSide('sb');
+              }}
+            />
+          )}
           <div className="main">
             <Viewport
               tabs={tabs}
@@ -4077,12 +6604,53 @@ function App() {
               onSelectDs={loadSystemData}
               project={project}
               cfg={cfg}
+              loadingPath={loadingPath}
+              onIframeLoad={onIframeLoad}
             />
           </div>
+          {(inspectorOpen || commentsPanelOpen) && (
+            <PanelGrip
+              label="Resize side panel"
+              dir="rtl"
+              size={rpSize}
+              active={dragSide === 'rp'}
+              onPointerDown={(e) => {
+                e.preventDefault();
+                e.currentTarget.setPointerCapture?.(e.pointerId);
+                setDragSide('rp');
+              }}
+            />
+          )}
           {/* Right dock — one panel at a time. Inspector takes precedence when
               open (T6); else the comments panel. */}
           {inspectorOpen ? (
-            <InspectorPanel selected={selected} onClose={() => setInspectorOpen(false)} />
+            <InspectorPanel
+              selected={selected}
+              cfg={cfg}
+              tab={inspectorTab}
+              onTabChange={setInspectorTab}
+              onClose={() => setInspectorOpen(false)}
+              onOptimistic={applyOptimisticStyle}
+              layersTree={layersTree}
+              onSelectLayer={(n) =>
+                postToActiveCanvas({
+                  dgn: 'select-by-id',
+                  id: n.id,
+                  artboardId: layersTree?.artboardId,
+                  index: n.index,
+                })
+              }
+              onHoverLayer={(n) =>
+                postToActiveCanvas({
+                  dgn: 'highlight',
+                  id: n ? n.id : null,
+                  artboardId: layersTree?.artboardId,
+                  index: n ? n.index : 0,
+                })
+              }
+              width={rpSize.w}
+              resizing={dragSide === 'rp'}
+            />
           ) : commentsPanelOpen ? (
             <CommentsPanel
               commentsByFile={commentsByFile}
@@ -4094,6 +6662,8 @@ function App() {
               onResolve={resolveComment}
               onReopen={reopenComment}
               onDelete={deleteComment}
+              width={rpSize.w}
+              resizing={dragSide === 'rp'}
             />
           ) : null}
         </div>
@@ -4121,6 +6691,7 @@ function App() {
           onClose={() => setExportDialog(null)}
         />
       )}
+      <ShortcutsOverlay open={shortcutsOpen} onClose={() => setShortcutsOpen(false)} />
       <HelpModal
         open={helpOpen}
         onClose={() => setHelpOpen(false)}
@@ -4160,6 +6731,9 @@ function App() {
         open={!!tourSteps}
         onClose={() => setTourSteps(null)}
         onComplete={markUsageSeen}
+        bus={tourBus}
+        hasSelection={!!selected}
+        hasCanvas={tabs.length > 0}
       />
     </div>
   );