@1agh/maude 0.45.2 → 0.47.0

package/apps/studio/client/app.jsx

@@ -12,6 +12,14 @@ import { createRoot } from 'react-dom/client';
 // import that Bun erases), so this pulls only string constants into the client
 // bundle — no React, no input-router. See the tool-cursor handler below.
 import { resolveToolCursor } from '../canvas-cursors.ts';
+// feature-3-web-artboards T5 — the single source (grid-track-handles.ts) for
+// the Inspector's Grid-section track parser/serializer, shared with the
+// on-canvas gutter-drag overlay so both edit the SAME track-list shape.
+import { GRID_KEYWORD_UNITS, parseTrackList, serializeTrackList } from '../grid-track-handles.ts';
+// feature-2-print-artboards T2 — the single source (print/units.ts) for the
+// Inspector's paper-preset picker, same "pull only pure math/data" shape as
+// canvas-cursors.ts above.
+import { PAPER_PRESETS, resolvePrintArtboard } from '../print/units.ts';
 import { sizingModeOf, sizingModePatch } from '../sizing-mode.ts';
 import { canvasUrl } from './canvas-url.js';
 import ChatPanel from './panels/ChatPanel.jsx';
@@ -29,7 +37,7 @@ import GenerateDialog from './generate-dialog.jsx';
 import RepoBranchSwitcher from './panels/RepoBranchSwitcher.jsx';
 import SettingsPanel from './panels/SettingsPanel.jsx';
 import StickerPicker from './panels/StickerPicker.jsx';
-import { AlignPad, AngleDial, ColorField, IconButtonGroup, IconToggleGroup, makeScrubHandler, NumberField, RadiusControl, Segmented, SliderField, Toggle, UnitSelect, ValueTokenField } from './inspector-controls.jsx';
+import { AlignPad, AngleDial, ColorField, IconButtonGroup, IconToggleGroup, makeScrubHandler, NumberField, RadiusControl, Segmented, Select, SliderField, Toggle, UnitSelect, ValueTokenField } from './inspector-controls.jsx';
 import {
   ALargeSmall as LuALargeSmall,
   AlignCenter as LuAlignCenter,
@@ -95,6 +103,11 @@ const MINIMAP_STORE = 'mdcc-minimap-visible';
 const ZOOMCTL_STORE = 'mdcc-zoomctl-visible';
 const ANNOT_STORE = 'mdcc-annotations-visible';
 const AUTOOPEN_STORE = 'maude-auto-open-inspector';
+// DDR-185 security addendum — floor between OS notifications for a NEW
+// permission/elicitation request, so a burst of distinct pending approvals
+// (capped at 15 total server-side, DDR-179/180) reads as one attention-
+// getting ping instead of a rapid-fire flood. The in-app badge is unaffected.
+const ATTENTION_NOTIFY_COOLDOWN_MS = 30_000;
 
 // feature-unified-settings-modal — the Settings modal's view prefs are ALSO
 // persisted to disk (~/.config/maude/prefs.json via /_api/ui-prefs), so they
@@ -169,6 +182,20 @@ const CANVAS_EXT_RE = /\.(tsx|html?)$/i;
 // the bundle is consumed in a context that hasn't run the build.
 const MDCC_VERSION = typeof __MDCC_VERSION__ !== 'undefined' ? __MDCC_VERSION__ : 'dev';
 
+// Best-effort OS notification — shared by handleAssistantFinished and
+// handleAssistantAttention below (identical support/permission check +
+// try/catch, only the title/body differ). The in-app badge stays the
+// reliable signal if this silently fails for any reason.
+function notifyDesktop(title, body) {
+  try {
+    if (typeof Notification !== 'undefined' && Notification.permission === 'granted') {
+      new Notification(title, { body });
+    }
+  } catch {
+    /* best-effort — the in-app badge is the reliable signal */
+  }
+}
+
 function readInitialTheme() {
   if (typeof window === 'undefined') return 'dark';
   try {
@@ -248,6 +275,58 @@ function shellToast(message, ok = false) {
   }, 3200);
 }
 
+// feature-4 (browse/move split, DDR-187) — one-time first-run teaching hint.
+// The boot default is `browse` (the mock is ALIVE — buttons click), so the
+// Figma muscle-memory gesture (plain click = select) does nothing until V is
+// pressed. Surface that ONCE, gated by a localStorage marker (same family as
+// `mdcc-whatsnew-seen`). Auto-dismisses; a V press (learned) clears it early.
+const BROWSE_HINT_SEEN = 'maude-browse-hint-seen';
+function browseFirstRunHint() {
+  if (typeof document === 'undefined' || typeof localStorage === 'undefined') return;
+  try {
+    if (localStorage.getItem(BROWSE_HINT_SEEN) === '1') return;
+  } catch {
+    return;
+  }
+  if (document.getElementById('st-browse-hint')) return;
+  const el = document.createElement('div');
+  el.id = 'st-browse-hint';
+  el.setAttribute('role', 'status');
+  el.style.cssText =
+    'position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:81;' +
+    'display:flex;align-items:center;gap:10px;max-width:520px;padding:10px 14px;border-radius:10px;' +
+    'font:12px/1.5 var(--font-ui,system-ui,sans-serif);background:var(--surface-2,#1b1e24);' +
+    'color:var(--text-1,#e7eaf0);border:1px solid var(--border-1,#333a45);' +
+    'box-shadow:0 10px 34px rgba(0,0,0,.42);opacity:0;transition:opacity 160ms ease;';
+  el.innerHTML =
+    '<span>Your mock is <strong>live</strong> — click things to try it. ' +
+    'Press <kbd style="padding:1px 6px;border-radius:5px;border:1px solid var(--border-1,#333a45);' +
+    'background:var(--surface-3,#262b33);font-family:var(--font-mono,monospace)">V</kbd> ' +
+    'to select &amp; edit like Figma.</span>' +
+    '<button type="button" aria-label="Dismiss" style="background:none;border:none;color:inherit;' +
+    'cursor:pointer;font-size:15px;line-height:1;opacity:.65;padding:2px">×</button>';
+  const dismiss = () => {
+    try {
+      localStorage.setItem(BROWSE_HINT_SEEN, '1');
+    } catch {
+      /* private mode */
+    }
+    el.style.opacity = '0';
+    setTimeout(() => el.remove(), 200);
+    document.removeEventListener('keydown', onV, true);
+  };
+  const onV = (e) => {
+    if ((e.key === 'v' || e.key === 'V') && !e.metaKey && !e.ctrlKey && !e.altKey) dismiss();
+  };
+  el.querySelector('button')?.addEventListener('click', dismiss);
+  document.addEventListener('keydown', onV, true);
+  document.body.appendChild(el);
+  requestAnimationFrame(() => {
+    el.style.opacity = '1';
+  });
+  setTimeout(dismiss, 9000);
+}
+
 // Strip canvas extensions for display. `Canvas Viewport.tsx` → `Canvas Viewport`.
 // Sidecars (`.meta.json`, `.css`, `.registry.json`) keep their extensions so
 // the file type stays unambiguous.
@@ -427,6 +506,19 @@ const STICONS = {
     </>
   ),
   folder: <path d="M2 4.5h4l1.3 1.5H14V13H2z" />,
+  // feature-4 T7b — Layers padlock (closed / open).
+  lock: (
+    <>
+      <rect x="3.5" y="7" width="9" height="6.5" rx="1" />
+      <path d="M5.5 7V5a2.5 2.5 0 015 0v2" />
+    </>
+  ),
+  unlock: (
+    <>
+      <rect x="3.5" y="7" width="9" height="6.5" rx="1" />
+      <path d="M5.5 7V5a2.5 2.5 0 015-.7" />
+    </>
+  ),
   search: (
     <>
       <circle cx="7" cy="7" r="4" />
@@ -960,6 +1052,37 @@ const PNG_SCALES = [
   { value: 3, label: '3× (max)' },
 ];
 
+// feature-2-print-artboards T6 — the PNG card's resolution picker folds the
+// legacy 1×/2×/3× multiplier and the new physical-DPI ladder (T4) into ONE
+// select: `kind:'scale'` entries send `options.scale`, `kind:'dpi'` entries
+// send `options.dpi` (exporters/png.ts resolveDeviceScale — dpi wins over
+// scale when both could apply). Default stays 2× (unchanged UX for anyone
+// not exporting for print).
+const PNG_RESOLUTIONS = [
+  { id: '1x', label: '1× (native)', kind: 'scale', value: 1 },
+  { id: '2x', label: '2× (retina)', kind: 'scale', value: 2 },
+  { id: '3x', label: '3× (max)', kind: 'scale', value: 3 },
+  { id: 'dpi150', label: '150 dpi', kind: 'dpi', value: 150 },
+  { id: 'dpi300', label: '300 dpi (print)', kind: 'dpi', value: 300 },
+  { id: 'dpi600', label: '600 dpi (high-res print)', kind: 'dpi', value: 600 },
+];
+const PNG_RESOLUTION_DEFAULT = '2x';
+
+// feature-2-print-artboards T5/T6 (dogfood follow-up) — the PDF page itself
+// is always vector (text/shapes never rasterize), but any RASTER content ON
+// the artboard — a dropped photo, a large-format piece authored at a
+// fraction of its real physical size (e.g. a billboard at 1:10 scale) —
+// still embeds as a bitmap whose density this controls. Default "Auto (1×)"
+// is today's unchanged behavior; PDF has no legacy scale concept, so unlike
+// PNG_RESOLUTIONS this is DPI-only.
+const PDF_DPI_OPTIONS = [
+  { id: 'auto', label: 'Auto (1×)', value: undefined },
+  { id: 'dpi150', label: '150 dpi', value: 150 },
+  { id: 'dpi300', label: '300 dpi (print)', value: 300 },
+  { id: 'dpi600', label: '600 dpi (high-res print)', value: 600 },
+];
+const PDF_DPI_DEFAULT = 'auto';
+
 // feature-bulk-media-insert — best-effort MIME guess from a filename extension.
 // Only used to classify a natively-picked file (Rust returns `{name, bytes}`,
 // no type) for the destination-toggle's image/video/audio split; the actual
@@ -1288,6 +1411,18 @@ function ExportDialog({
     initialScope && EXPORT_SCOPE_LABELS[initialScope] ? initialScope : 'artboard'
   );
   const [scale, setScale] = useState(2);
+  // feature-2-print-artboards T4/T6 — PNG resolution (folds scale + dpi, see
+  // PNG_RESOLUTIONS above).
+  const [pngResId, setPngResId] = useState(PNG_RESOLUTION_DEFAULT);
+  // feature-2-print-artboards T5/T6 — PDF print options. Sent unconditionally
+  // on every PDF export; the server no-ops them for a non-print artboard (no
+  // `print` JSX prop → applyPrintBoxesAndMarks never runs), so there's no
+  // need to detect the artboard's kind client-side before showing these.
+  const [pdfIncludeBleed, setPdfIncludeBleed] = useState(true);
+  const [pdfMarksOpen, setPdfMarksOpen] = useState(false);
+  const [pdfMarksCrop, setPdfMarksCrop] = useState(false);
+  const [pdfMarksRegistration, setPdfMarksRegistration] = useState(false);
+  const [pdfDpiId, setPdfDpiId] = useState(PDF_DPI_DEFAULT);
   // DDR-148 addendum — mp4/webm of a registered video-comp render through
   // renderMediaOnWeb, which produces real audio (Remotion owns the
   // TransitionSeries/volume-closure timeline). gif has no audio track at all
@@ -1338,12 +1473,31 @@ function ExportDialog({
     }
     setBusy(true);
     setStatus(null);
-    // `scale` drives PNG size AND video resolution (deviceScaleFactor → encoder
-    // dims); temporal formats were previously fixed at the tiny native size.
-    const options = card.format === 'png' || card.temporal ? { scale } : {};
+    // `scale` drives video resolution (deviceScaleFactor → encoder dims);
+    // temporal formats were previously fixed at the tiny native size. PNG's
+    // resolution now comes from pngResId (T4/T6 — scale OR dpi).
+    const options = card.temporal ? { scale } : {};
+    if (card.format === 'png') {
+      const res = PNG_RESOLUTIONS.find((r) => r.id === pngResId) || PNG_RESOLUTIONS[1];
+      if (res.kind === 'dpi') options.dpi = res.value;
+      else options.scale = res.value;
+    }
     // Export-with-audio (DDR-148 addendum) — mp4/webm only; gif is silent by
     // format, so the checkbox never renders for it (see hasAudioToggle below).
     if (card.format === 'mp4' || card.format === 'webm') options.audio = audio;
+    // feature-2-print-artboards T5/T6 — always sent on a PDF export; the
+    // adapter no-ops includeBleed/marks for a non-print artboard (T5).
+    if (card.format === 'pdf') {
+      options.pdfPrint = {
+        includeBleed: pdfIncludeBleed,
+        marks: { crop: pdfMarksCrop, registration: pdfMarksRegistration },
+      };
+      // Dogfood follow-up — raster CONTENT on the artboard (a dropped photo,
+      // large-format art) still needs a real capture density; the page
+      // itself stays vector regardless of this.
+      const pdfDpi = PDF_DPI_OPTIONS.find((d) => d.id === pdfDpiId)?.value;
+      if (pdfDpi !== undefined) options.dpi = pdfDpi;
+    }
     // Scope targeting hints (resolveScope reads these): `artboardId` makes
     // "Active artboard" export the right screen instead of `:first-of-type`;
     // `selection` makes "Current selection" export the selected element. Mirrors
@@ -1428,14 +1582,42 @@ function ExportDialog({
               </select>
             </div>
           )}
-          {!card.handoff && (card.format === 'png' || card.temporal) && (
+          {!card.handoff && card.format === 'png' && (
             <div className="st-dialog-row">
               <label className="st-dialog-lbl" htmlFor="st-export-size">
-                {card.temporal ? 'Resolution' : 'Size'}
+                Resolution
               </label>
               <select
                 id="st-export-size"
                 className="st-select"
+                value={pngResId}
+                onChange={(e) => setPngResId(e.target.value)}
+              >
+                {PNG_RESOLUTIONS.map((r) => (
+                  <option key={r.id} value={r.id}>
+                    {r.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+          {!card.handoff && card.format === 'png' && (
+            <div className="st-mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
+              {(() => {
+                const res = PNG_RESOLUTIONS.find((r) => r.id === pngResId) || PNG_RESOLUTIONS[1];
+                const factor = res.kind === 'dpi' ? res.value / 96 : res.value;
+                return `${res.label} ≈ ${Math.round(1440 * factor)}×${Math.round(900 * factor)} for a 1440×900 artboard.`;
+              })()}
+            </div>
+          )}
+          {!card.handoff && card.temporal && (
+            <div className="st-dialog-row">
+              <label className="st-dialog-lbl" htmlFor="st-export-temporal-size">
+                Resolution
+              </label>
+              <select
+                id="st-export-temporal-size"
+                className="st-select"
                 value={scale}
                 onChange={(e) => setScale(Number(e.target.value))}
               >
@@ -1447,16 +1629,86 @@ function ExportDialog({
               </select>
             </div>
           )}
-          {!card.handoff && card.format === 'png' && (
-            <div className="st-mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
-              Resolution multiplier — {scale}× ≈ {1440 * scale}×{900 * scale} for a 1440×900 artboard.
-            </div>
-          )}
           {!card.handoff && card.temporal && (
             <div className="st-mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
               {scale}× the artboard's native resolution (e.g. 960×540 → {960 * scale}×{540 * scale}).
             </div>
           )}
+          {!card.handoff && card.format === 'pdf' && (
+            <>
+              <div className="st-dialog-row">
+                <label className="st-dialog-lbl" htmlFor="st-export-pdf-dpi">
+                  Image quality
+                </label>
+                <select
+                  id="st-export-pdf-dpi"
+                  className="st-select"
+                  value={pdfDpiId}
+                  onChange={(e) => setPdfDpiId(e.target.value)}
+                >
+                  {PDF_DPI_OPTIONS.map((d) => (
+                    <option key={d.id} value={d.id}>
+                      {d.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="st-mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
+                The page stays vector; this only sets the capture density for raster content on it
+                (dropped photos, large-format art).
+              </div>
+              <div className="st-dialog-row">
+                <label
+                  className="st-dialog-lbl"
+                  htmlFor="st-export-pdf-bleed"
+                  style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}
+                >
+                  <input
+                    id="st-export-pdf-bleed"
+                    type="checkbox"
+                    checked={pdfIncludeBleed}
+                    onChange={(e) => setPdfIncludeBleed(e.target.checked)}
+                  />
+                  Include bleed
+                </label>
+              </div>
+              <div className="st-dialog-row">
+                <button
+                  type="button"
+                  className="st-dialog-lbl"
+                  style={{ background: 'none', border: 0, padding: 0, cursor: 'pointer' }}
+                  onClick={() => setPdfMarksOpen((v) => !v)}
+                  aria-expanded={pdfMarksOpen}
+                >
+                  {pdfMarksOpen ? '▾' : '▸'} Marks
+                </button>
+              </div>
+              {pdfMarksOpen && (
+                <div style={{ padding: '0 12px 4px', display: 'flex', flexDirection: 'column', gap: 6 }}>
+                  <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 12 }}>
+                    <input
+                      type="checkbox"
+                      checked={pdfMarksCrop}
+                      onChange={(e) => setPdfMarksCrop(e.target.checked)}
+                    />
+                    Crop marks
+                  </label>
+                  <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 12 }}>
+                    <input
+                      type="checkbox"
+                      checked={pdfMarksRegistration}
+                      onChange={(e) => setPdfMarksRegistration(e.target.checked)}
+                    />
+                    Registration marks
+                  </label>
+                </div>
+              )}
+              <div className="st-mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
+                Bleed and marks apply to print (<code>kind="print"</code>) artboards only.
+                {scope === 'canvas-as-separate' ? ' One PDF page per artboard.' : ''}
+              </div>
+            </>
+          )}
           {!card.handoff && (card.format === 'mp4' || card.format === 'webm') && (
             <div className="st-dialog-row">
               <label
@@ -2867,7 +3119,10 @@ function ToolsDropdown({ onAction, onClose }) {
       onAction={onAction}
       onClose={onClose}
       items={[
-        { id: 'move', label: 'Move', shortcut: 'V' },
+        // feature-4 (browse/move split) — Browse is the boot default (mock is
+        // alive); Move (V) is the select tool.
+        { id: 'browse', label: 'Browse (interact)', shortcut: '' },
+        { id: 'move', label: 'Select', shortcut: 'V' },
         { id: 'hand', label: 'Hand', shortcut: 'H' },
         { id: 'comment', label: 'Comment', shortcut: 'C' },
         { id: 'pen', label: 'Pen', shortcut: 'B' },
@@ -2933,6 +3188,11 @@ function EditDropdown({ onAction, onClose, hasCanvas }) {
               { id: 'new-artboard:laptop', label: 'New artboard: Laptop' },
               { id: 'new-artboard:tablet', label: 'New artboard: Tablet' },
               { id: 'new-artboard:mobile', label: 'New artboard: Mobile' },
+              // feature-2-print-artboards T2 — "+ Artboard" quick-insert must
+              // set kind="print" + the print prop together (the plan's own
+              // gotcha for this task), not just a plain digital-sized board.
+              { id: 'new-artboard:print-a4', label: 'New artboard: A4 (print)' },
+              { id: 'new-artboard:print-letter', label: 'New artboard: Letter (print)' },
             ]
           : []),
       ]}
@@ -2968,6 +3228,8 @@ function Menubar({
   onToggleZoomCtl,
   presentMode,
   onTogglePresent,
+  printGuidesVisible,
+  onTogglePrintGuides,
   postToActiveCanvas,
   onOpenWhatsNew,
   onOpenReadiness,
@@ -3105,6 +3367,18 @@ function Menubar({
       checked: presentMode,
       disabled: !activePath || isSystem,
     },
+    // feature-2-print-artboards T3 — per-canvas persisted (overlays.print in
+    // view.json), same lane as the foundation's `guides` key; NOT gated on the
+    // active artboard actually being kind="print" (mirrors minimap/zoomctl,
+    // which aren't content-gated either — the overlay itself renders nothing
+    // for a non-print artboard regardless of this flag).
+    {
+      id: 'print-guides',
+      label: 'Show print guides',
+      shortcut: '',
+      checked: printGuidesVisible,
+      disabled: !activePath || isSystem,
+    },
   ];
 
   const DROPDOWN_MENUS = ['file', 'edit', 'view', 'selection', 'tools', 'help'];
@@ -3242,6 +3516,7 @@ function Menubar({
             else if (id === 'minimap') onToggleMinimap?.();
             else if (id === 'zoomctl') onToggleZoomCtl?.();
             else if (id === 'present') onTogglePresent?.();
+            else if (id === 'print-guides') onTogglePrintGuides?.();
           }}
           onZoom={(op) => postToActiveCanvas({ dgn: 'zoom', op })}
           hasCanvas={!!activePath && !isSystem}
@@ -4139,6 +4414,9 @@ function SyncBanner({ status }) {
 // critic-approved + user-iterated `.design/ui/Studio.tsx` spec.
 
 const CSS_DISPLAYS = ['block', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline', 'none'];
+// feature-3-web-artboards T5 — per-track unit ladder for the Grid section's
+// UnitSelect (the stub's own list: px/%/fr/em/auto/min-content/max-content).
+const GRID_TRACK_UNITS = ['px', '%', 'fr', 'em', 'auto', 'min-content', 'max-content'];
 const CSS_FLEX_DIR = ['row', 'row-reverse', 'column', 'column-reverse'];
 const CSS_FLEX_WRAP = ['nowrap', 'wrap', 'wrap-reverse'];
 const CSS_ALIGN = ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'];
@@ -4324,6 +4602,43 @@ function cssSplitUnit(v) {
 // click re-derives it live — the "tab is there, then it's gone" flicker.
 function mergeSelClientFields(incoming, prev) {
   if (!incoming || Array.isArray(incoming) || Array.isArray(prev) || !prev) return incoming;
+  // Dogfood follow-up (print artboards) — a whole-ARTBOARD selection has NO
+  // data-cd-id (the frame chrome carries only data-dc-screen), so the id
+  // identity check below never matched it and every server echo returned
+  // `incoming` bare — wiping `attrs` (which carries data-dc-kind/-print for
+  // the ArtboardKnobs panel) seconds after each fresh click. The panel then
+  // silently fell back to kind='digital' + screen presets even though the
+  // artboard was print. Match an id-less pair by the artboard-shaped
+  // SELECTOR + file — NOT by artboardId: the server projection
+  // (inspect.ts `enrich()`) doesn't round-trip `artboardId` at all, so an
+  // artboardId comparison always sees undefined on the echo side and never
+  // matches (the second-round bug on this exact spot). The selector IS the
+  // identity here — `[data-dc-screen="<id>"]` — and enrich() preserves it.
+  if (!incoming.id && !prev.id) {
+    const isArtboardSel = (s) =>
+      typeof s.selector === 'string' && s.selector.startsWith('[data-dc-screen=');
+    if (
+      isArtboardSel(incoming) &&
+      isArtboardSel(prev) &&
+      incoming.selector === prev.selector &&
+      incoming.file === prev.file
+    ) {
+      return {
+        ...incoming,
+        authored: incoming.authored ?? prev.authored,
+        computed: incoming.computed ?? prev.computed,
+        customStyles: incoming.customStyles ?? prev.customStyles,
+        attrs: incoming.attrs ?? prev.attrs,
+        // enrich() drops artboardId/worldW/worldH from the echo entirely —
+        // restore them from the local snapshot so ArtboardKnobs keeps its
+        // exact W/H and the resize/kind writers keep their target id.
+        artboardId: incoming.artboardId ?? prev.artboardId,
+        worldW: incoming.worldW ?? prev.worldW,
+        worldH: incoming.worldH ?? prev.worldH,
+      };
+    }
+    return incoming;
+  }
   if (!incoming.id || incoming.id !== prev.id) return incoming;
   return {
     ...incoming,
@@ -4908,6 +5223,98 @@ function TokenPopover({ kind, groups, current, onPick, label, swatchBg, seedHex,
   );
 }
 
+// feature-3-web-artboards T5 (absorbed feature-grid-track-editor stub) — the
+// CssKnobs "Grid" section's track-list editor: one row per track (a
+// NumberField + UnitSelect for a numeric px/%/fr/em track, a bare Select for
+// a keyword auto/min-content/max-content track since it carries no numeric
+// value), + add/remove. `tracks`/`onChange` are the parsed/serialized shape
+// from `grid-track-handles.ts` — the SAME module the on-canvas gutter-drag
+// overlay uses, so the Inspector and the drag handles never disagree.
+function GridTracksEditor({ label, tracks, editable, onChange }) {
+  const setUnit = (idx, unit) => {
+    const cur = tracks[idx];
+    onChange(
+      tracks.map((t, i) =>
+        i === idx
+          ? GRID_KEYWORD_UNITS.has(unit)
+            ? { value: 0, unit }
+            : { value: cur.value || 1, unit }
+          : t
+      )
+    );
+  };
+  const setValue = (idx, value) => {
+    onChange(tracks.map((t, i) => (i === idx ? { ...t, value } : t)));
+  };
+  const addTrack = () => onChange([...tracks, { value: 1, unit: 'fr' }]);
+  const removeTrack = (idx) => onChange(tracks.filter((_, i) => i !== idx));
+  return (
+    <div className="st-cp-gridtracks">
+      <div className="st-cp-gridtracks-hd">
+        <span className="st-cp-gridtracks-label">{label}</span>
+        <button
+          type="button"
+          className="st-btn st-cp-gridtracks-add"
+          disabled={!editable}
+          onClick={addTrack}
+        >
+          + Track
+        </button>
+      </div>
+      {tracks.length === 0 ? (
+        <div className="st-cp-note">
+          No explicit tracks — add one to start defining {label.toLowerCase()}.
+        </div>
+      ) : (
+        tracks.map((t, idx) => {
+          const isKeyword = GRID_KEYWORD_UNITS.has(t.unit);
+          return (
+            // biome-ignore lint/suspicious/noArrayIndexKey: tracks have no stable id;
+            // add/remove/reorder all rebuild the array positionally, same as every
+            // other index-keyed list in this file (e.g. the Layers tree rows).
+            <div className="st-cp-gridtrack-row" key={idx}>
+              {isKeyword ? (
+                <Select
+                  value={t.unit}
+                  ariaLabel={`${label} track ${idx + 1}`}
+                  options={GRID_TRACK_UNITS.map((u) => ({ value: u, label: u }))}
+                  onChange={(u) => setUnit(idx, u)}
+                />
+              ) : (
+                <NumberField
+                  value={t.value}
+                  min={t.unit === 'fr' ? 0.1 : 0}
+                  step={t.unit === 'fr' ? 0.1 : 1}
+                  ariaLabel={`${label} track ${idx + 1} value`}
+                  lead={String(idx + 1)}
+                  unitSlot={
+                    <UnitSelect
+                      value={t.unit}
+                      units={GRID_TRACK_UNITS}
+                      ariaLabel={`${label} track ${idx + 1} unit`}
+                      onChange={(u) => setUnit(idx, u)}
+                    />
+                  }
+                  onCommit={(n) => setValue(idx, n)}
+                />
+              )}
+              <button
+                type="button"
+                className="st-btn st-cp-gridtrack-remove"
+                aria-label={`remove ${label} track ${idx + 1}`}
+                disabled={!editable || tracks.length <= 1}
+                onClick={() => removeTrack(idx)}
+              >
+                ×
+              </button>
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+}
+
 function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoRedo, mode, onSetMode }) {
   const editable = !!el.id;
   const computed = el.computed || {};
@@ -5254,6 +5661,10 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
   // Props each section owns — drives the per-section "reset section" affordance.
   const SECTION_PROPS = {
     Layout: ['display', 'flex-direction', 'flex-wrap', 'align-items', 'justify-content', 'gap'],
+    // feature-3-web-artboards T5 — Grid track editor + cell placement, so the
+    // section-reset affordance clears them like every other section.
+    Grid: ['grid-template-columns', 'grid-template-rows'],
+    'Grid item': ['grid-column', 'grid-row'],
     // feature-element-editing-robustness Stage B — promoted DDR-104 OUT-list.
     Position: ['position', 'top', 'right', 'bottom', 'left', 'z-index'],
     Typography: [
@@ -6151,6 +6562,54 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
         })()
       )}
 
+      {(() => {
+        // feature-3-web-artboards T5 (absorbed feature-grid-track-editor
+        // stub) — Grid section, only when the element IS a grid container.
+        // Track parse/serialize is the SAME grid-track-handles.ts module the
+        // on-canvas gutter-drag overlay uses, so the Inspector and the drag
+        // handles never disagree about track shape.
+        const disp = (authored.display || cssHint(computed.display) || '').trim();
+        const isGrid = disp === 'grid' || disp === 'inline-grid';
+        if (!isGrid) return null;
+        const colsRaw = authored['grid-template-columns'] || '';
+        const rowsRaw = authored['grid-template-rows'] || '';
+        const cols = parseTrackList(colsRaw);
+        const rows = parseTrackList(rowsRaw);
+        const colsEditable = cols.length > 0 || !colsRaw.trim();
+        const rowsEditable = rows.length > 0 || !rowsRaw.trim();
+        return sec(
+          'Grid',
+          <>
+            {colsEditable ? (
+              <GridTracksEditor
+                label="Columns"
+                tracks={cols}
+                editable={editable}
+                onChange={(next) => commit('grid-template-columns', serializeTrackList(next))}
+              />
+            ) : (
+              <div className="st-cp-note">
+                Columns use <code>{colsRaw}</code> — not editable as tracks here (repeat()/
+                minmax()/subgrid); use /design:edit for these.
+              </div>
+            )}
+            {rowsEditable ? (
+              <GridTracksEditor
+                label="Rows"
+                tracks={rows}
+                editable={editable}
+                onChange={(next) => commit('grid-template-rows', serializeTrackList(next))}
+              />
+            ) : (
+              <div className="st-cp-note">
+                Rows use <code>{rowsRaw}</code> — not editable as tracks here (repeat()/minmax()/
+                subgrid); use /design:edit for these.
+              </div>
+            )}
+          </>
+        );
+      })()}
+
       {sec(
         'Position',
         <>
@@ -6174,6 +6633,18 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
         </>
       )}
 
+      {(el.parentDisplay === 'grid' || el.parentDisplay === 'inline-grid') &&
+        sec(
+          'Grid item',
+          <>
+            <div className="st-cp-note">
+              Manual cell placement — <code>start / end</code> or <code>start / span N</code>.
+            </div>
+            {row('grid-column', text('grid-column'))}
+            {row('grid-row', text('grid-row'))}
+          </>
+        )}
+
       {sec(
         'Typography',
         <>
@@ -6486,6 +6957,8 @@ const LAYER_TYPE_ICON = {
   list: 'list',
   nav: 'layers',
   box: 'box',
+  // feature-4 T7 — synthetic group row (unstamped wrapper with stamped kids).
+  group: 'folder',
 };
 
 
@@ -6552,21 +7025,52 @@ function LayerRow({
   onReorder,
   onRowPointerDown,
   dragState,
+  // feature-4 T7a/b/c — component map (purple ◇/◆), locked keys + toggle,
+  // dblclick rename (writes data-dc-element via edit-attr).
+  componentMap,
+  lockedKeys,
+  onToggleLock,
+  onRename,
 }) {
   const key = `${node.id}:${node.index}`;
   const hasKids = node.children && node.children.length > 0;
   const isCollapsed = collapsed.has(key);
+  // feature-4 T7 — a synthetic group row (unstamped wrapper) is a pure
+  // structural stand-in: NOT selectable (no data-cd-id to address in source),
+  // NOT draggable, NO eye toggle. Clicking it just expands/collapses.
+  const isSynthetic = !!node.synthetic;
+  // feature-4 T7a — purple instance rows: this element renders through an
+  // instantiated component. `root` = the component's own frame root (◆).
+  const inst = !isSynthetic && componentMap ? componentMap[node.id] : null;
+  // feature-4 T7b — locked layers can't be selected/dragged on the canvas.
+  const isLocked = !isSynthetic && !!lockedKeys?.has(key);
+  // feature-4 T7c — inline rename (dblclick the label).
+  const [renaming, setRenaming] = useState(false);
+  const [renameDraft, setRenameDraft] = useState('');
   // Match the specific INSTANCE (id + occurrence index), not every element that
   // shares this source id — otherwise a `.map`ed element highlights all its
   // clones at once. Fall back to id-only when the selection carries no index.
   const isSel =
-    node.id === selectedId && (selectedIndex == null || node.index === selectedIndex);
+    !isSynthetic &&
+    node.id === selectedId &&
+    (selectedIndex == null || node.index === selectedIndex);
   const isHidden = hiddenOverride?.has(key) ? hiddenOverride.get(key) : !!node.hidden;
   // A shared data-cd-id (reused component instance) IS reorderable now — the
   // server maps the occurrence index to the parent <Component> usage — so these
   // are no longer greyed/blocked. A `.map()`ed single-usage element still can't
-  // split; that move is refused server-side and reverts.
-  const canDrag = !!onReorder;
+  // split; that move is refused server-side and reverts. A LOCKED row never
+  // drags (feature-4 T7b).
+  const canDrag = !!onReorder && !isSynthetic && !isLocked;
+  const commitRename = () => {
+    setRenaming(false);
+    const v = renameDraft
+      .trim()
+      .toLowerCase()
+      .replace(/\s+/g, '-')
+      .replace(/[^a-z0-9-]/g, '');
+    if (!v || v === (node.dcElement ?? '')) return;
+    onRename?.(node, v);
+  };
   // Phase 12.1 — the row being dragged FLOATS with the cursor (same model as the
   // in-canvas drag): a transform follows the pointer, its layout box stays
   // reserved (empty slot at the origin), and pointer-events:none lets the row
@@ -6588,26 +7092,46 @@ function LayerRow({
     <>
       <div
         className={
-          'st-layer st-layer--row' + (isSel ? ' is-sel' : '') + (isHidden ? ' is-hidden' : '')
+          'st-layer st-layer--row' +
+          (isSel ? ' is-sel' : '') +
+          (isHidden ? ' is-hidden' : '') +
+          (isSynthetic ? ' is-group' : '') +
+          (inst ? ' is-instance' : '') +
+          (isLocked ? ' is-locked' : '')
         }
         style={{ paddingLeft: 6 + depth * 14, ...dragStyle }}
         role="treeitem"
-        aria-selected={isSel}
+        aria-selected={isSynthetic ? undefined : isSel}
         aria-expanded={hasKids ? !isCollapsed : undefined}
         aria-grabbed={canDrag ? isDragging : undefined}
         tabIndex={0}
-        title={`${node.tag} · ${node.type}`}
+        title={
+          isSynthetic
+            ? `${node.tag} · group (unstamped wrapper)`
+            : `${node.tag} · ${node.type}${onRename ? ' · F2 to rename' : ''}`
+        }
         data-layer-key={key}
-        onClick={() => onSelect(node)}
-        onMouseEnter={() => onHover(node)}
+        onClick={() => (isSynthetic ? hasKids && onToggle(key) : onSelect(node))}
+        onMouseEnter={() => !isSynthetic && onHover(node)}
         onMouseLeave={() => onHover(null)}
         onPointerDown={canDrag ? (e) => onRowPointerDown(e, node, key) : undefined}
         onKeyDown={(e) => {
-          // Enter/Space select; ↑/↓ (+ modifiers) are handled at the tree
-          // container (selection-driven — survives the HMR re-render).
+          // Enter/Space select (or, for a synthetic group, toggle); ↑/↓ (+
+          // modifiers) are handled at the tree container (selection-driven —
+          // survives the HMR re-render).
           if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
-            onSelect(node);
+            if (isSynthetic) hasKids && onToggle(key);
+            else onSelect(node);
+          } else if (e.key === 'F2' && onRename && !isSynthetic) {
+            // a11y fix (review fan-out, 2026-07-21) — dblclick was the ONLY
+            // entry point into rename, a keyboard-only user had no way to
+            // reach it at all (WCAG 2.1.1). F2 is the conventional rename key
+            // (Explorer/Finder/most tree UIs); mirrors the dblclick handler's
+            // own pre-fill.
+            e.preventDefault();
+            setRenameDraft(node.dcElement || node.label || '');
+            setRenaming(true);
           }
         }}
       >
@@ -6626,10 +7150,67 @@ function LayerRow({
         ) : (
           <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 ? (
+        {inst ? (
+          // feature-4 T7a — Figma vocabulary: ◆ the component's own frame root,
+          // ◇ an inner member of an instance. Purple via .is-instance CSS.
+          <span className="st-layer-inst-glyph" aria-hidden="true">
+            {inst.root ? '◆' : '◇'}
+          </span>
+        ) : (
+          <StIcon name={LAYER_TYPE_ICON[node.type] || 'box'} size={12} className="st-layer-ticon" />
+        )}
+        {renaming ? (
+          <input
+            className="st-layer-rename"
+            value={renameDraft}
+            autoFocus
+            aria-label={`Rename ${node.label}`}
+            onFocus={(e) => e.target.select()}
+            onChange={(e) => setRenameDraft(e.target.value)}
+            onClick={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+            onBlur={commitRename}
+            onKeyDown={(e) => {
+              e.stopPropagation();
+              if (e.key === 'Enter') commitRename();
+              else if (e.key === 'Escape') setRenaming(false);
+            }}
+          />
+        ) : (
+          <span
+            className="st-layer-label"
+            onDoubleClick={
+              onRename && !isSynthetic
+                ? (e) => {
+                    // feature-4 T7c — dblclick rename. Pre-fill from the raw
+                    // data-dc-element (kebab) when set, else the display label.
+                    e.stopPropagation();
+                    setRenameDraft(node.dcElement || node.label || '');
+                    setRenaming(true);
+                  }
+                : undefined
+            }
+          >
+            {node.label}
+          </span>
+        )}
+        <span className="st-layer-type">{inst ? inst.component : node.type}</span>
+        {onToggleLock && !isSynthetic ? (
+          <button
+            type="button"
+            className="st-layer-lock"
+            aria-label={isLocked ? `Unlock ${node.label}` : `Lock ${node.label}`}
+            aria-pressed={isLocked}
+            title={isLocked ? 'Unlock' : 'Lock'}
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleLock(key);
+            }}
+          >
+            <StIcon name={isLocked ? 'lock' : 'unlock'} size={12} />
+          </button>
+        ) : null}
+        {onToggleVisibility && !isSynthetic ? (
           <button
             type="button"
             className="st-layer-eye"
@@ -6662,6 +7243,10 @@ function LayerRow({
               onReorder={onReorder}
               onRowPointerDown={onRowPointerDown}
               dragState={dragState}
+              componentMap={componentMap}
+              lockedKeys={lockedKeys}
+              onToggleLock={onToggleLock}
+              onRename={onRename}
             />
           ))
         : null}
@@ -6760,8 +7345,53 @@ const ARTBOARD_LAYOUT_OPTIONS = [
   ['grid', 'Grid'],
 ];
 
-function ArtboardKnobs({ el, onResizeArtboard, onSetArtboardHug, onSetArtboardStyle }) {
+// feature-1-artboard-kinds-foundation, T8 — kind picker options. Order
+// mirrors the DCArtboard `kind` union; 'digital' is the implicit default
+// (writes `kind: null`, clearing the explicit prop, per applySetArtboardKind).
+const ARTBOARD_KIND_OPTIONS = [
+  ['digital', 'Digital'],
+  ['print', 'Print'],
+  ['web', 'Web'],
+  ['video', 'Video'],
+];
+
+function ArtboardKnobs({
+  el,
+  cfg,
+  onResizeArtboard,
+  onSetArtboardHug,
+  onSetArtboardStyle,
+  onSetArtboardKind,
+  onSetArtboardPrint,
+  onDuplicateArtboard,
+}) {
   const artboardId = resolveArtboardIdFromSelection(el);
+  // Dogfood (artboard panel ↔ shared inspector controls) — the panel now uses
+  // the SAME control library + design-token plumbing as CssKnobs (NumberField
+  // / Segmented / Select / ColorField+TokenPopover / ValueTokenField), so Bg
+  // binds color variables and Pad/Gap bind space variables exactly like any
+  // CSS-panel row. Token resolution mirrors CssKnobs' own tokenGroups/
+  // flatTokens closures over useAllDsTokens.
+  const _designRel = (cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '');
+  const _activeDs = activeDsNameFor(el.file, cfg);
+  const allDs = useAllDsTokens(cfg, _designRel, _activeDs);
+  const tokenGroups = (familyKey) =>
+    allDs
+      .map((d) => ({ ds: d.name, names: d[familyKey] || [], vals: d.vals }))
+      .filter((g) => g.names.length);
+  const flatTokens = (familyKey) =>
+    tokenGroups(familyKey).flatMap((g) => (g.names || []).map((n) => ({ name: n, value: g.vals?.[n] || '' })));
+  // Resolve a `var(--x)` binding to its concrete value across every DS (for
+  // the Bg swatch color); a raw value passes through.
+  const resolveTokenValue = (v) => {
+    const m = /^var\(\s*(--[\w-]+)\s*\)$/.exec(v || '');
+    if (!m) return v || '';
+    for (const d of allDs) {
+      const val = d.vals?.[m[1]];
+      if (val) return val;
+    }
+    return '';
+  };
   // Dogfood 2026-07-07 (round 2) — `worldW`/`worldH` (zoom-independent) are
   // undefined for a selection that reached here via a code path predating
   // that field (a canvas iframe that hasn't remounted since); fall back to
@@ -6788,6 +7418,12 @@ function ArtboardKnobs({ el, onResizeArtboard, onSetArtboardHug, onSetArtboardSt
   const activePreset = Object.entries(SCREEN_PRESETS).find(
     ([, p]) => p.width === w && p.height === h
   )?.[0];
+  // feature-3-web-artboards T2 — a web artboard hugs height (Design Decision
+  // 1), so its `h` rarely equals a preset's device height even when the
+  // artboard genuinely represents that breakpoint. Match by WIDTH alone so
+  // the picker still shows "Desktop" selected after the hugged height
+  // settles to the content's real size.
+  const activeWidthPreset = Object.entries(SCREEN_PRESETS).find(([, p]) => p.width === w)?.[0];
   // Hug default (artboard "hug height") — current mode + the "more settings"
   // (background/padding/layout/gap) read off the SAME generic `attrs` escape
   // hatch dom-selection.ts already scrapes for every selection (the `data-dc-*`
@@ -6798,6 +7434,70 @@ function ArtboardKnobs({ el, onResizeArtboard, onSetArtboardHug, onSetArtboardSt
   const padding = el.attrs?.['data-dc-padding'] ?? '';
   const layoutMode = el.attrs?.['data-dc-layout'] ?? '';
   const gap = el.attrs?.['data-dc-gap'] ?? '';
+  // T8 — `data-dc-kind` is DCArtboard's RESOLVED kind (readBackAttrs always
+  // emits it, unlike the optional-override attrs above — see T1's comment on
+  // why), so this reads 'digital' even for an implicit/unmigrated artboard.
+  const kind = el.attrs?.['data-dc-kind'] || 'digital';
+  // feature-2-print-artboards T2 — paper/orientation/bleed. Read-back mirrors
+  // `data-dc-kind` above: a small JSON attr DCArtboard stamps for exactly this
+  // panel (canvas-lib.tsx readBackAttrs), since `print` (unlike bg/padding/…)
+  // is object-valued, not a scalar.
+  let print = null;
+  try {
+    print = el.attrs?.['data-dc-print'] ? JSON.parse(el.attrs['data-dc-print']) : null;
+  } catch {
+    /* malformed attr — treat as absent */
+  }
+  const setKind = (nextKind) => {
+    if (!artboardId) return;
+    // Dogfood fix — switching TO "print" with no print prop yet left the
+    // artboard half-configured (no guides geometry, no bleed for the PDF
+    // exporter). Seed a default A4 print prop + its resolved px size in the
+    // SAME gesture. Round 6: the seed is PASSED THROUGH the kind flow (not
+    // written immediately) so the freeze-convert the canvas may enqueue first
+    // lands BEFORE the A4 resize — resizing pre-freeze moved elements around
+    // while the confirm dialog was still open.
+    let seedPrint = null;
+    if (nextKind === 'print' && !print) {
+      const defaults = { paper: 'a4' };
+      try {
+        const resolved = resolvePrintArtboard(defaults);
+        if (resolved) {
+          seedPrint = { defaults, widthPx: resolved.widthPx, heightPx: resolved.heightPx };
+        }
+      } catch {
+        /* keep null */
+      }
+    }
+    // Picking "Digital" clears the explicit prop back to the implicit
+    // default (applySetArtboardKind's `kind: null` path) rather than writing
+    // a redundant `kind="digital"`.
+    onSetArtboardKind?.(artboardId, nextKind === 'digital' ? null : nextKind, seedPrint);
+    // feature-3-web-artboards Design Decision 1 — a web artboard's height
+    // hugs content (`fixed` omitted); switching TO "web" flips hug mode in
+    // the same gesture so the artboard doesn't stay pinned to whatever exact
+    // height a prior digital/print size left it at. Mirrors the print
+    // auto-seed above — switching kind should never require a second,
+    // easy-to-miss step in the Hug/Fixed segmented control above.
+    if (nextKind === 'web' && fixed) {
+      onSetArtboardHug?.(artboardId, false, undefined);
+    }
+  };
+  const setPrint = (patch) => {
+    if (!artboardId) return;
+    const next = { paper: 'a4', ...print, ...patch };
+    let resolved;
+    try {
+      resolved = resolvePrintArtboard(next);
+    } catch {
+      return; // unknown paper id — ignore rather than write garbage
+    }
+    // Design Decision 2 — the picker writes BOTH the resolved px size (via
+    // the existing resize lane, DDR-027) and the `print` intent prop, in the
+    // same gesture, so geometry and intent never drift apart.
+    onResizeArtboard?.(artboardId, resolved.widthPx, resolved.heightPx);
+    onSetArtboardPrint?.(artboardId, next);
+  };
   const setHug = (nextFixed) => {
     if (!artboardId) return;
     const freezeHeight = nextFixed && Number.isFinite(h) ? Math.round(h) : undefined;
@@ -6813,162 +7513,251 @@ function ArtboardKnobs({ el, onResizeArtboard, onSetArtboardHug, onSetArtboardSt
         <span className="st-cp-sechd">Artboard</span>
       </div>
       <div style={{ display: 'flex', gap: 8, padding: '4px 12px' }}>
-        <div className="st-cp-num">
-          <span className="st-cp-numlead" aria-hidden="true">
-            W
-          </span>
-          <input
-            className="st-cp-numin"
-            type="number"
-            min="1"
-            aria-label="artboard width"
-            key={`w:${w ?? ''}`}
-            defaultValue={w ?? ''}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') e.currentTarget.blur();
-            }}
-            onBlur={(e) => commitSize(Number.parseFloat(e.currentTarget.value), null)}
-          />
-        </div>
-        <div className="st-cp-num">
-          <span className="st-cp-numlead" aria-hidden="true">
-            H
-          </span>
-          <input
-            className="st-cp-numin"
-            type="number"
-            min="1"
-            aria-label="artboard height"
-            readOnly={!fixed}
-            title={fixed ? undefined : 'Hug — grows to fit content. Switch to Fixed to set an exact height.'}
-            key={`h:${h ?? ''}:${fixed}`}
-            defaultValue={h ?? ''}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') e.currentTarget.blur();
-            }}
-            onBlur={(e) => {
-              if (!fixed) return;
-              commitSize(null, Number.parseFloat(e.currentTarget.value));
-            }}
-          />
-        </div>
+        <NumberField
+          value={w ?? 0}
+          min={1}
+          ariaLabel="artboard width"
+          lead="W"
+          steppers={false}
+          onCommit={(n) => commitSize(n, null)}
+        />
+        <NumberField
+          value={h ?? 0}
+          min={1}
+          ariaLabel="artboard height"
+          lead="H"
+          steppers={false}
+          scrub={fixed}
+          onCommit={(n) => {
+            // Hug — height is content-driven; ignore a typed value rather
+            // than silently switching modes.
+            if (fixed) commitSize(null, n);
+          }}
+        />
       </div>
       <div style={{ padding: '0 12px 8px' }}>
-        <select
-          className="st-cp-nsel"
-          aria-label="artboard size preset"
-          value={activePreset ?? ''}
-          onChange={(e) => {
-            const p = SCREEN_PRESETS[e.currentTarget.value];
-            if (p) commitSize(p.width, p.height);
-          }}
-        >
-          <option value="" disabled>
-            {activePreset ? SCREEN_PRESETS[activePreset].label : 'Preset size…'}
-          </option>
-          {Object.entries(SCREEN_PRESETS).map(([key, p]) => (
-            <option key={key} value={key}>
-              {p.label} — {p.width}×{p.height}
+        {kind === 'print' ? (
+          // Dogfood follow-up — a PRINT artboard's "Preset size…" dropdown
+          // showed only the screen presets (Desktop/Laptop/Tablet/Mobile),
+          // which are meaningless for paper. Show the paper ladder here
+          // instead, writing through the SAME setPrint lane as the Print
+          // section below (resolved px + print prop together).
+          <select
+            className="st-cp-nsel"
+            aria-label="artboard paper preset"
+            value={print?.paper ?? ''}
+            onChange={(e) => setPrint({ paper: e.currentTarget.value })}
+          >
+            <option value="" disabled>
+              Paper size…
             </option>
-          ))}
-        </select>
+            {PAPER_PRESETS.map((p) => (
+              <option key={p.id} value={p.id}>
+                {p.label} — {p.width}×{p.height}
+                {p.unit}
+              </option>
+            ))}
+          </select>
+        ) : kind === 'web' ? (
+          // feature-3-web-artboards T2 — a web artboard's "Preset size…"
+          // dropdown reads as BREAKPOINT selection, not exact-box selection:
+          // same SCREEN_PRESETS widths (Design Decision 2 — no separate
+          // preset table needed), but commits width-only (height stays
+          // hug-driven) and labels each option as the breakpoint it is.
+          <select
+            className="st-cp-nsel"
+            aria-label="artboard breakpoint preset"
+            value={activeWidthPreset ?? ''}
+            onChange={(e) => {
+              const p = SCREEN_PRESETS[e.currentTarget.value];
+              if (p) commitSize(p.width, null);
+            }}
+          >
+            <option value="" disabled>
+              {activeWidthPreset
+                ? `${SCREEN_PRESETS[activeWidthPreset].label} — ≤ ${SCREEN_PRESETS[activeWidthPreset].width}px`
+                : 'Breakpoint…'}
+            </option>
+            {Object.entries(SCREEN_PRESETS).map(([key, p]) => (
+              <option key={key} value={key}>
+                {p.label} — ≤ {p.width}px breakpoint
+              </option>
+            ))}
+          </select>
+        ) : (
+          <select
+            className="st-cp-nsel"
+            aria-label="artboard size preset"
+            value={activePreset ?? ''}
+            onChange={(e) => {
+              const p = SCREEN_PRESETS[e.currentTarget.value];
+              if (p) commitSize(p.width, p.height);
+            }}
+          >
+            <option value="" disabled>
+              {activePreset ? SCREEN_PRESETS[activePreset].label : 'Preset size…'}
+            </option>
+            {Object.entries(SCREEN_PRESETS).map(([key, p]) => (
+              <option key={key} value={key}>
+                {p.label} — {p.width}×{p.height}
+              </option>
+            ))}
+          </select>
+        )}
       </div>
       <div style={{ padding: '0 12px 8px' }}>
-        <div className="st-cp-modeseg" role="group" aria-label="artboard height sizing mode">
-          <span className="st-cp-modeax" aria-hidden="true">
-            H
-          </span>
-          {[
-            [false, 'Hug'],
-            [true, 'Fixed'],
-          ].map(([val, label]) => (
-            <button
-              key={label}
-              type="button"
-              className={`st-cp-modebtn${fixed === val ? ' is-active' : ''}`}
-              aria-pressed={fixed === val}
-              onClick={() => setHug(val)}
-              title={`${label} height`}
-            >
-              {label}
-            </button>
-          ))}
-        </div>
+        <Segmented
+          value={fixed ? 'fixed' : 'hug'}
+          ariaLabel="artboard height sizing mode"
+          options={[
+            { value: 'hug', label: 'Hug' },
+            { value: 'fixed', label: 'Fixed' },
+          ]}
+          onChange={(v) => setHug(v === 'fixed')}
+        />
       </div>
       <div className="st-cp-sechd-row">
-        <span className="st-cp-sechd">Style</span>
+        <span className="st-cp-sechd">Kind</span>
       </div>
-      <div style={{ padding: '4px 12px 8px', display: 'flex', flexDirection: 'column', gap: 8 }}>
-        <div className="st-cp-num" style={{ width: '100%' }}>
-          <span className="st-cp-numlead" aria-hidden="true">
-            Bg
-          </span>
-          <input
-            className="st-cp-numin"
-            type="text"
-            aria-label="artboard background"
-            placeholder="var(--bg-1)"
-            key={`bg:${bg}`}
-            defaultValue={bg}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') e.currentTarget.blur();
+      <div style={{ padding: '0 12px 8px' }}>
+        <Select
+          value={kind}
+          ariaLabel="artboard kind"
+          options={ARTBOARD_KIND_OPTIONS.map(([value, label]) => ({ value, label }))}
+          onChange={setKind}
+        />
+      </div>
+      {kind !== 'print' && artboardId && onDuplicateArtboard ? (
+        // feature-3-web-artboards T3 — "Duplicate at width…". A stateless
+        // action trigger (not a size preset reflecting current state, unlike
+        // the Preset-size select above), so the control resets to its
+        // placeholder after firing rather than showing the last pick as
+        // though it were now selected. Gated off kind="print" — paper size
+        // is picked via the Artboard preset dropdown above, not a px width.
+        <div style={{ padding: '0 12px 8px' }}>
+          <select
+            className="st-cp-nsel"
+            aria-label="duplicate artboard at breakpoint width"
+            value=""
+            onChange={(e) => {
+              const p = SCREEN_PRESETS[e.currentTarget.value];
+              if (p) onDuplicateArtboard(artboardId, p.width);
+              e.currentTarget.value = '';
             }}
-            onBlur={(e) => commitStyle({ background: e.currentTarget.value.trim() || null })}
-          />
-        </div>
-        <select
-          className="st-cp-nsel"
-          aria-label="artboard body layout"
-          value={layoutMode}
-          onChange={(e) => commitStyle({ layout: e.currentTarget.value || null })}
-        >
-          {ARTBOARD_LAYOUT_OPTIONS.map(([val, label]) => (
-            <option key={val} value={val}>
-              {label}
+          >
+            <option value="" disabled>
+              Duplicate at width…
             </option>
-          ))}
-        </select>
-        <div style={{ display: 'flex', gap: 8 }}>
-          <div className="st-cp-num">
-            <span className="st-cp-numlead" aria-hidden="true">
-              Pad
-            </span>
-            <input
-              className="st-cp-numin"
-              type="number"
-              min="0"
-              aria-label="artboard padding"
-              key={`pad:${padding}`}
-              defaultValue={padding}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') e.currentTarget.blur();
-              }}
-              onBlur={(e) => {
-                const v = e.currentTarget.value;
-                commitStyle({ padding: v === '' ? null : Number.parseFloat(v) });
-              }}
+            {Object.entries(SCREEN_PRESETS).map(([key, p]) => (
+              <option key={key} value={key}>
+                {p.label} — {p.width}px
+              </option>
+            ))}
+          </select>
+        </div>
+      ) : null}
+      {kind === 'print' ? (
+        <>
+          <div className="st-cp-sechd-row">
+            <span className="st-cp-sechd">Print</span>
+          </div>
+          {/* Paper picker lives in the Artboard section's own preset dropdown
+              above (it REPLACES the screen presets for kind="print") — this
+              section carries the print-specific residue: orientation + bleed. */}
+          <div style={{ padding: '0 12px 8px' }}>
+            <Segmented
+              value={print?.orientation ?? 'portrait'}
+              ariaLabel="paper orientation"
+              options={[
+                { value: 'portrait', label: 'Portrait' },
+                { value: 'landscape', label: 'Landscape' },
+              ]}
+              onChange={(v) => setPrint({ orientation: v })}
             />
           </div>
-          <div className="st-cp-num">
-            <span className="st-cp-numlead" aria-hidden="true">
-              Gap
-            </span>
-            <input
-              className="st-cp-numin"
-              type="number"
-              min="0"
-              aria-label="artboard gap"
-              key={`gap:${gap}`}
-              defaultValue={gap}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') e.currentTarget.blur();
-              }}
-              onBlur={(e) => {
-                const v = e.currentTarget.value;
-                commitStyle({ gap: v === '' ? null : Number.parseFloat(v) });
-              }}
+          <div style={{ padding: '0 12px 8px' }}>
+            <NumberField
+              value={Number.isFinite(print?.bleedMm) ? print.bleedMm : 3}
+              min={0}
+              step={0.5}
+              ariaLabel="bleed, millimeters"
+              // Single-glyph lead — the drag-handle slot is sized for 1–2
+              // chars ("W"/"Pad"); a full word clips. mm suffix + aria carry
+              // the meaning.
+              lead="B"
+              steppers={false}
+              unitSlot={
+                <span className="st-cp-numsuffix" aria-hidden="true">
+                  mm
+                </span>
+              }
+              onCommit={(n) => setPrint({ bleedMm: n })}
             />
           </div>
+        </>
+      ) : null}
+      <div className="st-cp-sechd-row">
+        <span className="st-cp-sechd">Style</span>
+      </div>
+      <div style={{ padding: '4px 12px 8px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {(() => {
+          // Bg — the CssKnobs `color()` recipe: TokenPopover swatch as the
+          // flush prefix inside ColorField (HSV picker + per-DS variables).
+          const bgResolved = resolveTokenValue(bg);
+          const bgBound = /var\(\s*--/.test(bg);
+          const bgDisplay = bgBound
+            ? bg.replace(/^var\(\s*|\s*\)$/g, '').replace(/^--/, '').replace(/-/g, ' ')
+            : bg;
+          return (
+            <ColorField
+              swatch={
+                <TokenPopover
+                  kind="color"
+                  swatchClassName="st-cp-cf-sw"
+                  groups={tokenGroups('color')}
+                  current={bg}
+                  activeDs={_activeDs}
+                  swatchBg={bgResolved}
+                  seedHex={cssColorToHex(bgResolved) || '#000000'}
+                  onPick={(v) => commitStyle({ background: v || null })}
+                  label="artboard background colour"
+                />
+              }
+              displayValue={bgDisplay}
+              bound={bgBound}
+              ariaLabel="artboard background"
+              onValue={(v) => commitStyle({ background: (v || '').trim() || null })}
+            />
+          );
+        })()}
+        <Select
+          value={layoutMode}
+          ariaLabel="artboard body layout"
+          options={ARTBOARD_LAYOUT_OPTIONS.map(([value, label]) => ({
+            value,
+            label,
+          }))}
+          onChange={(v) => commitStyle({ layout: v || null })}
+        />
+        <div style={{ display: 'flex', gap: 8 }}>
+          <ValueTokenField
+            value={/^var\(/.test(padding) ? padding : Number.parseFloat(padding) || 0}
+            tokens={flatTokens('space')}
+            ariaLabel="artboard padding"
+            lead="Pad"
+            min={0}
+            onChange={(v) =>
+              commitStyle({ padding: typeof v === 'string' ? v : v > 0 ? v : null })
+            }
+          />
+          <ValueTokenField
+            value={/^var\(/.test(gap) ? gap : Number.parseFloat(gap) || 0}
+            tokens={flatTokens('space')}
+            ariaLabel="artboard gap"
+            lead="Gap"
+            min={0}
+            onChange={(v) => commitStyle({ gap: typeof v === 'string' ? v : v > 0 ? v : null })}
+          />
         </div>
       </div>
     </section>
@@ -6981,11 +7770,28 @@ function ArtboardKnobs({ el, onResizeArtboard, onSetArtboardHug, onSetArtboardSt
 // of the selection's src/html for a selection that reached the panel via a code
 // path predating that field. Returns null for a non-photo element.
 const PHOTO_ASSET_RE = /assets\/[0-9a-f]{8}\.[a-z0-9]+/i;
+// Simplifier fix (review fan-out, 2026-07-21) — reuse PHOTO_ASSET_RE's own
+// source for the global-match variant instead of re-inlining the pattern, so
+// the two can never drift apart (e.g. an extension-charset fix landing in one
+// and not the other).
+const PHOTO_ASSET_RE_G = new RegExp(PHOTO_ASSET_RE.source, 'gi');
 function photoAssetOfSelection(el) {
   if (!el || Array.isArray(el)) return null;
   if (el.photoAsset) return el.photoAsset;
-  if ((el.tag || '').toLowerCase() !== 'img') return null;
   const html = el.html || '';
+  // feature-4 regression fix (2026-07-20) — the select tool's bare click now
+  // picks the TOP-LEVEL container, so a photo selection often arrives as the
+  // WRAPPER around the <img>, not the <img> itself. When the selection's
+  // subtree contains EXACTLY ONE content-addressed image, offer the Photo tab
+  // for it (ambiguous multi-photo containers stay photo-less — drill/⌘-click
+  // to pick one).
+  if ((el.tag || '').toLowerCase() !== 'img') {
+    const imgs = [...new Set(html.match(PHOTO_ASSET_RE_G) || [])];
+    const tagged = [...new Set([...html.matchAll(/data-photo-asset="([^"]+)"/g)].map((m) => m[1]))];
+    if (tagged.length === 1) return tagged[0];
+    if (tagged.length === 0 && imgs.length === 1 && /<img/i.test(html)) return imgs[0];
+    return null;
+  }
   // Once an edit is baked, the element's LIVE src is a `data:` URL (canvas-lib's
   // PhotoPreviewBridge swaps it in directly) — it never matches PHOTO_ASSET_RE,
   // so a REPLAYED/serialized selection (a WS resync, or the persisted
@@ -7004,6 +7810,13 @@ function InspectorPanel({
   selected,
   onClose,
   layersTree,
+  // feature-4 T7a — { [cdId]: { component, root, usages } } for purple rows.
+  componentMap,
+  // feature-4 T7b — locked layer keys (`"<id>:<index>"`) + toggle.
+  lockedKeys,
+  onToggleLock,
+  // feature-4 detach-component — clone-definition detach for a shared instance.
+  onDetachInstance,
   canvasFile,
   onSelectLayer,
   onHoverLayer,
@@ -7016,6 +7829,9 @@ function InspectorPanel({
   onResizeArtboard,
   onSetArtboardHug,
   onSetArtboardStyle,
+  onSetArtboardKind,
+  onSetArtboardPrint,
+  onDuplicateArtboard,
   onUndoRedo,
   editScope,
   tab: tabProp,
@@ -7062,6 +7878,48 @@ function InspectorPanel({
   // `node.hidden` (the authoritative source value) so a first render of an
   // already-hidden element shows the correct eye-icon state without a click.
   const [hiddenOverride, setHiddenOverride] = useState(() => new Map());
+  // feature-4 T7 — auto-reveal the selected row: expand any collapsed ancestor
+  // group + scroll it into view, so a canvas selection is never hidden behind a
+  // collapsed wrapper (a Figma layers-panel expectation). Runs whenever the
+  // selection or the (HMR-refreshed) tree changes.
+  useEffect(() => {
+    const sel = Array.isArray(selected) ? selected[0] : selected;
+    const selId = sel?.id;
+    if (!selId || !layersTree?.nodes) return;
+    const selIdx = sel.index;
+    let matchedKey = null;
+    const ancestorKeys = [];
+    (function find(nodes, trail) {
+      for (const n of nodes || []) {
+        const k = `${n.id}:${n.index}`;
+        if (!n.synthetic && n.id === selId && (selIdx == null || n.index === selIdx)) {
+          matchedKey = k;
+          ancestorKeys.push(...trail);
+          return true;
+        }
+        if (n.children && n.children.length && find(n.children, [...trail, k])) return true;
+      }
+      return false;
+    })(layersTree.nodes, []);
+    if (!matchedKey) return;
+    if (ancestorKeys.length) {
+      setCollapsed((prev) => {
+        let changed = false;
+        const next = new Set(prev);
+        for (const k of ancestorKeys) if (next.delete(k)) changed = true;
+        return changed ? next : prev;
+      });
+    }
+    requestAnimationFrame(() => {
+      try {
+        document
+          .querySelector(`.st-layer--row[data-layer-key="${matchedKey}"]`)
+          ?.scrollIntoView({ block: 'nearest' });
+      } catch {
+        /* selector edge case — non-fatal */
+      }
+    });
+  }, [selected, layersTree]);
   const isNodeHidden = (node) => {
     const key = `${node.id}:${node.index}`;
     return hiddenOverride.has(key) ? hiddenOverride.get(key) : !!node.hidden;
@@ -7070,11 +7928,41 @@ function InspectorPanel({
   // same drop target) + an aria-live announcement for keyboard moves.
   const [dragState, setDragState] = useState(null);
   const [reorderMsg, setReorderMsg] = useState('');
+  // feature-4 T7c — Layers-panel rename: writes `data-dc-element` (the label's
+  // top-priority source in `layerLabel`) via the existing /_api/edit-attr lane
+  // + records undo through the same source-edit channel CssKnobs uses. The
+  // HMR reload re-posts the tree with the new label.
+  const renameLayer = (node, value) => {
+    if (!canvasFile || !node?.id) return;
+    fetch('/_api/edit-attr', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ canvas: canvasFile, id: node.id, attr: 'data-dc-element', value }),
+    })
+      .then((r) => r.json().catch(() => ({})))
+      .then((j) => {
+        if (!j.ok) return;
+        onRecordEdit?.({
+          op: 'attr',
+          canvas: canvasFile,
+          id: node.id,
+          key: 'data-dc-element',
+          before: node.dcElement ?? null,
+          after: value,
+        });
+      })
+      .catch(() => {});
+  };
   const handleReorder = onReorderLayer
     ? (dragged, ref, position) => {
         // Gate keyboard + drop moves while a prior reorder is still landing — the
         // write churns positional ids, so acting on the stale tree would misfire.
         if (layersBusyRef?.current) return;
+        // feature-4 T7 — a synthetic group row (unstamped wrapper) has no
+        // data-cd-id to address in source, so it can be neither dragged nor a
+        // drop target. Abort silently rather than post an unresolvable refId
+        // that would optimistically move then revert (a visible flicker).
+        if (dragged?.synthetic || ref?.synthetic) return;
         const verb =
           position === 'before'
             ? `before ${ref.label}`
@@ -7436,6 +8324,19 @@ function InspectorPanel({
                 editScope.affects
               } place${editScope.affects === 1 ? '' : 's'}`
             : 'Local · this element only'}
+          {/* feature-4 detach-component (2026-07-19) — make THIS instance its
+              own single-usage component so edits (incl. absolute positions)
+              stay local per artboard. */}
+          {editScope.scope === 'shared' && onDetachInstance ? (
+            <button
+              type="button"
+              className="st-scope-detach"
+              title="Clone this component for this instance only — edits stop affecting the other places"
+              onClick={() => onDetachInstance(el.id, el.index)}
+            >
+              Detach
+            </button>
+          ) : null}
         </div>
       ) : null}
       <div className="st-rp-body">
@@ -7451,15 +8352,16 @@ function InspectorPanel({
               onRecordEdit={(before, after) => onPhotoRecordEdit?.(photoTarget.asset, before, after)}
             />
           </div>
-        ) : !el ? (
+        ) : !el && !(effTab === 'layers' && layersTree?.nodes?.length) ? (
           <div className="st-rp-empty">
             {/* <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.
+              Press <Kbd>V</Kbd>, then click an element to select it — or <Kbd>⌘</Kbd>-click
+              straight from Browse.
             </p>
           </div>
-        ) : effTab === 'inspect' ? (
+        ) : el && effTab === 'inspect' ? (
           <>
             <div className="st-rp-hd">{el.selector || el.tag || 'element'}</div>
             <div className="st-insp-row">
@@ -7532,8 +8434,8 @@ function InspectorPanel({
                       key={`${n.id}:${n.index}`}
                       node={n}
                       depth={0}
-                      selectedId={el.id}
-                      selectedIndex={el.index}
+                      selectedId={el?.id}
+                      selectedIndex={el?.index}
                       collapsed={collapsed}
                       hiddenOverride={hiddenOverride}
                       onToggle={toggleCollapse}
@@ -7546,6 +8448,10 @@ function InspectorPanel({
                       onReorder={handleReorder}
                       onRowPointerDown={startLayerDrag}
                       dragState={dragState}
+                      componentMap={componentMap}
+                      lockedKeys={lockedKeys}
+                      onToggleLock={onToggleLock}
+                      onRename={renameLayer}
                     />
                   ))}
                 </div>
@@ -7564,7 +8470,7 @@ function InspectorPanel({
                   {reorderMsg}
                 </div>
               </>
-            ) : Array.isArray(el.dom_path) && el.dom_path.length ? (
+            ) : el && Array.isArray(el.dom_path) && el.dom_path.length ? (
               el.dom_path.map((node, i) => (
                 <div
                   key={i}
@@ -7584,9 +8490,13 @@ function InspectorPanel({
         ) : !el.id && resolveArtboardIdFromSelection(el) ? (
           <ArtboardKnobs
             el={el}
+            cfg={cfg}
             onResizeArtboard={onResizeArtboard}
             onSetArtboardHug={onSetArtboardHug}
             onSetArtboardStyle={onSetArtboardStyle}
+            onSetArtboardKind={onSetArtboardKind}
+            onSetArtboardPrint={onSetArtboardPrint}
+            onDuplicateArtboard={onDuplicateArtboard}
           />
         ) : (
           <CssKnobs
@@ -7655,6 +8565,11 @@ function App() {
   // user meanwhile selected something else. select-by-id is idempotent
   // (replace-same → select-set echo → ws guard sees same id → no re-schedule),
   // so the ladder can't loop.
+  // feature-4 dogfood fix — timestamp of the last LOCAL selection change sent
+  // over WS. The ws 'selected' broadcast is both (a) our own echo and (b) a
+  // genuine cross-canvas restore; within this window it's always (a) and must
+  // not overwrite fresher local state (multi-select / drill races).
+  const lastLocalSelectAtRef = useRef(0);
   const haloRestoreTimersRef = useRef([]);
   const scheduleHaloRestore = useCallback((one) => {
     if (!one?.id || !one.file) return;
@@ -7680,6 +8595,32 @@ function App() {
       }, delay)
     );
   }, []);
+  // Dogfood follow-up — the ArtboardKnobs panel (Kind/Print/Style/Hug/W-H)
+  // writes via structuralWrite, which never refreshed the Inspector's OWN
+  // `attrs` snapshot afterward: the artboard itself re-rendered correctly
+  // (new kind, new size) but the Inspector kept showing the PRE-edit values
+  // (e.g. "Digital" right after picking "Print") until the user manually
+  // re-clicked the artboard. Mirrors scheduleHaloRestore's retry ladder
+  // (the HMR reload lands async, so a single immediate post races it) but
+  // for a bare ARTBOARD selection (no data-cd-id to key off of — compares
+  // by artboardId instead of id).
+  const artboardResyncTimersRef = useRef([]);
+  const scheduleArtboardResync = useCallback((artboardId, file) => {
+    if (!artboardId || !file) return;
+    for (const t of artboardResyncTimersRef.current) clearTimeout(t);
+    artboardResyncTimersRef.current = [50, 450, 1200, 2500, 5000].map((delay) =>
+      setTimeout(() => {
+        const cur = selectedRef.current;
+        const c1 = Array.isArray(cur) ? cur[0] : cur;
+        if (!c1 || c1.artboardId !== artboardId || c1.file !== file) return; // superseded
+        const frame = iframesRef.current.get(file);
+        if (!frame?.contentWindow) return;
+        try {
+          frame.contentWindow.postMessage({ dgn: 'select-by-id', artboardId }, '*');
+        } catch {}
+      }, delay)
+    );
+  }, []);
   // Phase 12.1 (DDR-138) — after a reorder writes source, the HMR reload remounts
   // the canvas and the positional data-cd-id of the moved element (and everything
   // after it) renumbers. Stash the re-settle target { file, movedId, artboardId }
@@ -7706,6 +8647,27 @@ function App() {
   const layersBusyTimerRef = useRef(null);
   // Phase 12 Task 4 — Layers tree for the active artboard (posted by canvas-shell).
   const [layersTree, setLayersTree] = useState(null);
+  // feature-4 T7a — Layers-panel component map ({ [cdId]: { component, root,
+  // usages } }) for purple instance rows. Fetched from the read-only main-origin
+  // /_api/component-map on canvas/tree changes, throttled: the map only changes
+  // when SOURCE changes, but the tree re-posts on any DOM churn (drag reflows) —
+  // don't re-parse the canvas for those.
+  const [componentMap, setComponentMap] = useState(null);
+  const componentMapAtRef = useRef({ canvas: null, at: 0 });
+  useEffect(() => {
+    if (!activePath || !layersTree) return;
+    const now = Date.now();
+    const last = componentMapAtRef.current;
+    if (last.canvas === activePath && now - last.at < 1500) return;
+    componentMapAtRef.current = { canvas: activePath, at: now };
+    fetch(`/_api/component-map?canvas=${encodeURIComponent(activePath)}`)
+      .then((r) => r.json())
+      .then((j) => {
+        if (j?.ok && j.map && typeof j.map === 'object') setComponentMap(j.map);
+        else setComponentMap(null);
+      })
+      .catch(() => setComponentMap(null));
+  }, [activePath, layersTree]);
   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
@@ -7973,13 +8935,32 @@ function App() {
   const handleAssistantFinished = useCallback(() => {
     if (!assistantOpenRef.current || document.hidden) {
       setAssistantUnseen(true);
-      try {
-        if (typeof Notification !== 'undefined' && Notification.permission === 'granted') {
-          new Notification('Claude finished', { body: 'Your assistant turn is ready in Maude.' });
-        }
-      } catch {
-        /* best-effort — the in-app badge is the reliable signal */
-      }
+      notifyDesktop('Claude finished', 'Your assistant turn is ready in Maude.');
+    }
+  }, []);
+  // DDR-185 — same "you weren't looking" gate as handleAssistantFinished
+  // above, fired instead when a chat is PAUSED waiting on the user (a
+  // permission prompt or an AskUserQuestion/elicitation form), not just when
+  // a turn completes. A stalled turn otherwise gives no signal at all if the
+  // window isn't focused. Distinct copy so it doesn't read as "done".
+  //
+  // Security-review addendum (Finding G): DDR-179/180 already cap concurrent
+  // pending requests at 10 permissions + 5 elicitations, so a single
+  // adversarial turn can legitimately queue up to 15 DISTINCT approval
+  // decisions — each one now fires a real OS Notification, which is exactly
+  // the burst that manufactures the "rapid Enter-mashing" precondition
+  // DDR-179's own addendum already treats as a security-relevant habituation
+  // risk. The in-app badge (setAssistantUnseen) still reflects EVERY new
+  // request instantly — only the OS notification itself is rate-limited, so
+  // a burst reads as one attention-getting ping, not fifteen.
+  const lastAttentionNotifyRef = useRef(0);
+  const handleAssistantAttention = useCallback(() => {
+    if (!assistantOpenRef.current || document.hidden) {
+      setAssistantUnseen(true);
+      const now = Date.now();
+      if (now - lastAttentionNotifyRef.current < ATTENTION_NOTIFY_COOLDOWN_MS) return;
+      lastAttentionNotifyRef.current = now;
+      notifyDesktop('Maude needs your input', 'Claude is waiting on an approval or a question in Maude.');
     }
   }, []);
   // Inspector tab is lifted so View ▸ Layers can open the panel ON the Layers
@@ -8195,6 +9176,12 @@ function App() {
   const [minimapVisible, setMinimapVisible] = useState(() => readBoolStore(MINIMAP_STORE, false));
   const [zoomCtlVisible, setZoomCtlVisible] = useState(() => readBoolStore(ZOOMCTL_STORE, false));
   const [presentMode, setPresentMode] = useState(false);
+  // feature-2-print-artboards T3 — "Show print guides". Per-CANVAS persisted
+  // (view.json `overlays.print`, via /_api/canvas-meta), not a global
+  // localStorage pref like minimap/zoomctl — mirrors the foundation's
+  // `overlays.guides` lane. Re-read whenever the active canvas changes (see
+  // the activeArtboards effect below); sent only to the active iframe.
+  const [printGuidesVisible, setPrintGuidesVisible] = useState(false);
   // P2/P3 (Plan C) — top-bar live state. (Zoom lives in the canvas toolbar pill,
   // so the top bar no longer mirrors it.)
   //   activeArtboards — real artboard count of the open canvas, read from its
@@ -8625,6 +9612,24 @@ function App() {
     setPresentMode(false);
     broadcastChrome({ present: false });
   }, [broadcastChrome]);
+  // feature-2-print-artboards T3 — per-canvas persisted, so (unlike
+  // broadcastChrome above) this targets ONLY the active iframe and PATCHes
+  // view.json's `overlays.print` through the same GET-merge/PATCH-split lane
+  // the foundation built for `overlays.guides` (api.ts normalizeOverlays is a
+  // flat Record<string, boolean> — no server change needed for a new key).
+  const togglePrintGuides = useCallback(() => {
+    if (!activePath || activePath === SYSTEM_TAB) return;
+    setPrintGuidesVisible((v) => {
+      const next = !v;
+      postToActiveCanvas({ dgn: 'view-chrome', print: next });
+      fetch('/_api/canvas-meta', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ file: activePath, patch: { overlays: { print: next } } }),
+      }).catch(() => {});
+      return next;
+    });
+  }, [activePath, postToActiveCanvas]);
 
   // P3 (Plan C) — local git user for the menubar presence avatar. One-shot.
   useEffect(() => {
@@ -8647,6 +9652,7 @@ function App() {
   useEffect(() => {
     if (!activePath || activePath === SYSTEM_TAB) {
       setActiveArtboards(0);
+      setPrintGuidesVisible(false);
       return;
     }
     let cancelled = false;
@@ -8656,15 +9662,70 @@ function App() {
         if (cancelled) return;
         const n = Array.isArray(meta?.artboards) ? meta.artboards.length : 0;
         setActiveArtboards(n);
+        // feature-2-print-artboards T3 — reflect THIS canvas's own persisted
+        // print-guides flag in the menu checkbox when switching tabs.
+        setPrintGuidesVisible(meta?.overlays?.print === true);
+        // feature-4 T7b — seed this canvas's persisted locked-layer keys
+        // (view.json `locked`, per-user) into the Layers panel state.
+        setLockedKeys(new Set(Array.isArray(meta?.locked) ? meta.locked : []));
       })
       .catch(() => {
-        if (!cancelled) setActiveArtboards(0);
+        if (!cancelled) {
+          setActiveArtboards(0);
+          setPrintGuidesVisible(false);
+          setLockedKeys(new Set());
+        }
       });
     return () => {
       cancelled = true;
     };
   }, [activePath]);
 
+  // feature-4 dogfood fix (2026-07-19) — the Layers panel used to stay EMPTY
+  // until something was selected (the tree only posted on selection). Request
+  // the tree for the viewport-active artboard whenever it (or the canvas)
+  // changes, so Layers work in browse mode with no selection at all. Small
+  // debounce — the active-artboard signal can flicker during a fast pan.
+  useEffect(() => {
+    if (!activePath || activePath === SYSTEM_TAB || !canvasActiveArtboard) return;
+    const t = setTimeout(() => {
+      postToActiveCanvas({ dgn: 'request-layers', artboardId: canvasActiveArtboard });
+    }, 250);
+    return () => clearTimeout(t);
+  }, [activePath, canvasActiveArtboard, postToActiveCanvas]);
+
+  // feature-4 T7b — locked layer keys (`"<cdId>:<index>"`, per-user, per-canvas
+  // via view.json). Toggling PATCHes the FULL set (replace semantics) + pushes
+  // the live set down to the canvas iframe so select/drag enforcement matches
+  // the padlock instantly.
+  const [lockedKeys, setLockedKeys] = useState(() => new Set());
+  const toggleLockedKey = useCallback(
+    (key) => {
+      if (!activePath || activePath === SYSTEM_TAB) return;
+      setLockedKeys((prev) => {
+        const next = new Set(prev);
+        if (next.has(key)) next.delete(key);
+        else next.add(key);
+        const arr = [...next];
+        fetch('/_api/canvas-meta', {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ file: activePath, patch: { locked: arr } }),
+        }).catch(() => {});
+        postToActiveCanvas({ dgn: 'locked-set', locked: arr });
+        return next;
+      });
+    },
+    [activePath, postToActiveCanvas]
+  );
+  // Push the seed to a (re)loaded canvas too — the iframe reads
+  // `__canvas_meta__.locked` at boot, but a shell-side toggle after a reload
+  // must still reach it; re-broadcast whenever the set or canvas changes.
+  useEffect(() => {
+    if (!activePath || activePath === SYSTEM_TAB) return;
+    postToActiveCanvas({ dgn: 'locked-set', locked: [...lockedKeys] });
+  }, [lockedKeys, activePath, postToActiveCanvas]);
+
   // Sync theme to <html data-theme> + localStorage on every change.
   useEffect(() => {
     try {
@@ -8900,6 +9961,18 @@ function App() {
             // mount it lands after, so re-apply the halo from THIS edge too.
             // Guarded to restore-transitions (prev missing / different id or
             // file) so the select-set echo of our own re-select can't loop.
+            //
+            // feature-4 dogfood fix (2026-07-19) — the frame is ALSO the echo
+            // of our OWN wsSend('select'): it round-trips the server and lands
+            // hundreds of ms later, by which time the user may have drilled
+            // deeper (dblclick) or multi-selected — the echo then OVERWROTE the
+            // fresh state with the stale head and the halo-restore ladder
+            // re-imposed it on the canvas ("multiselect snaps back to one",
+            // "drill snaps back to the parent"). Suppress the restore path
+            // entirely within a short window of any LOCAL selection send — a
+            // genuine cross-canvas restore never follows a local select that
+            // closely (it follows a canvas switch).
+            if (Date.now() - lastLocalSelectAtRef.current < 2000) return;
             const incoming = m.selected;
             const one = Array.isArray(incoming) ? incoming[0] : incoming;
             const prevSel = selectedRef.current;
@@ -9481,6 +10554,17 @@ function App() {
         // only pick a known, always-visible glyph; it cannot inject an
         // invisible/displaced SVG cursor as a clickjacking aid over the un-CSP'd
         // shell (phase-24 ethical-hacker Finding 2; DDR-067).
+        // feature-4 — the browse tool is a pure pass-through: don't force a
+        // global shell cursor, so the shell chrome keeps its own affordance
+        // cursors (pointer over buttons). Also fire the one-time "press V" hint
+        // — a live canvas booting in browse is exactly when it's teachable.
+        if (m.tool === 'browse') {
+          document.body.style.cursor = '';
+          const el = document.getElementById('dc-app-cursor');
+          if (el) el.textContent = '';
+          browseFirstRunHint();
+          return;
+        }
         const cursor = resolveToolCursor(m.tool);
         if (cursor) {
           document.body.style.cursor = cursor;
@@ -9529,11 +10613,13 @@ function App() {
       }
       if (m.dgn === 'select' && m.selection) {
         setPhotoSel(null); // a DOM selection supersedes an annotation-image Photo target
+        lastLocalSelectAtRef.current = Date.now();
         wsSend({ type: 'select', selection: m.selection });
         setSelected(m.selection);
         maybeAutoOpenInspectorOnSelect(m.selection); // Stage C
       } else if (m.dgn === 'select-set') {
         setPhotoSel(null);
+        lastLocalSelectAtRef.current = Date.now();
         // Canvas multi-select. Payload shape:
         //   null              → empty selection
         //   Selection         → length-1 (back-compat with legacy single-element shape)
@@ -9558,6 +10644,7 @@ function App() {
         }
       } else if (m.dgn === 'clear-select') {
         setPhotoSel(null);
+        lastLocalSelectAtRef.current = Date.now();
         wsSend({ type: 'clear-select' });
         setSelected(null);
       } else if (m.dgn === 'edit-text' && m.id) {
@@ -9876,6 +10963,64 @@ function App() {
             before: typeof m.before === 'string' ? m.before : null,
           });
         }
+      } else if (m.dgn === 'convert-to-absolute-request') {
+        // feature-4 T8 (convert-to-absolute, DDR-188) — the canvas measured the
+        // frozen child boxes; perform the main-origin batch write (ONE undo
+        // seq via structuralWrite). The server re-validates every field; here we
+        // just confused-deputy-guard the source (DDR-054) + a light shape check.
+        // Two shapes: single-container (element context menu) or `containers`
+        // batch (the artboard-level "Convert layout to absolute").
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        const isBatch = Array.isArray(m.containers) && m.containers.length > 0;
+        const isSingle =
+          typeof m.containerId === 'string' && Array.isArray(m.children) && m.children.length > 0;
+        if (e.source === activeWin && (isBatch || isSingle)) {
+          const count = isBatch
+            ? m.containers.reduce(
+                (n, c) => n + (Array.isArray(c?.children) ? c.children.length : 0),
+                0
+              )
+            : m.children.length;
+          structuralWriteRef.current?.(
+            '/_api/convert-to-absolute',
+            isBatch
+              ? {
+                  allowShared: m.allowShared === true,
+                  containers: m.containers,
+                  // feature-4 TRUE FLATTEN — unstyled layout wrappers to remove.
+                  ...(Array.isArray(m.dissolve) && m.dissolve.length > 0
+                    ? { dissolve: m.dissolve }
+                    : {}),
+                }
+              : {
+                  containerId: m.containerId,
+                  containerSetRelative: m.containerSetRelative === true,
+                  // feature-4 T8b — the canvas asked the user's confirm already;
+                  // the server still refuses `.map` children regardless.
+                  allowShared: m.allowShared === true,
+                  children: m.children,
+                },
+            {
+              label: 'convert to absolute',
+              // Dogfood 2026-07-19 — the conversion is zero-visual-delta by
+              // design, which LOOKED like "nic nedělá". Say what happened, and
+              // surface server refusals (.map children etc.) as a toast
+              // instead of a console.warn nobody sees.
+              onOk: () => {
+                postToActiveCanvas({ dgn: 'selection-clear' });
+                postToActiveCanvas({
+                  dgn: 'op-toast',
+                  message: `Converted ${count} element${count === 1 ? '' : 's'} to absolute — press V and drag them freely (⌘Z to undo).`,
+                });
+              },
+              onFail: (j) =>
+                postToActiveCanvas({
+                  dgn: 'op-toast',
+                  message: `Convert failed: ${j?.error || 'unknown error'}`,
+                }),
+            }
+          );
+        }
       } else if (m.dgn === 'replace-annotation-media-request') {
         // Stage F3 — "Replace…" on an annotation ImageStroke/MediaRefStroke.
         // Opens the SAME AssetPicker; unlike F2 the pick is posted BACK DOWN to
@@ -9945,6 +11090,25 @@ function App() {
         if (e.source === activeWin && typeof m.artboardId === 'string') {
           deleteArtboardShellRef.current?.(m.artboardId);
         }
+      } else if (m.dgn === 'set-artboard-kind-request') {
+        // feature-1-artboard-kinds-foundation, T8 — context-menu "Artboard
+        // kind" submenu (inside the untrusted iframe). `kind: null` clears
+        // back to the implicit default.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        const okKind = m.kind === null || typeof m.kind === 'string';
+        if (e.source === activeWin && typeof m.artboardId === 'string' && okKind) {
+          // Dogfood round 6 — DIRECT write, never back into the ask flow (the
+          // ask lives shell-side in setArtboardKindShell; re-entering it from
+          // this canvas round-trip looped the confirm dialog forever).
+          directArtboardKindWriteRef.current?.(m.artboardId, m.kind);
+        }
+      } else if (m.dgn === 'duplicate-artboard-request') {
+        // feature-3-web-artboards T3 — context-menu "Duplicate at width…"
+        // submenu (inside the untrusted iframe).
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source === activeWin && typeof m.artboardId === 'string' && Number.isFinite(m.width)) {
+          duplicateArtboardShellRef.current?.(m.artboardId, m.width);
+        }
       } else if (m.dgn === 'open-inspector') {
         // Phase 12 — context-menu "Inspect" / tool-palette Inspect opens the right panel.
         // feature-photo-editor (Task 16) — an optional `tab` lands the panel on a
@@ -10502,8 +11666,10 @@ function App() {
       // usage (local), not the shared inner definition. undefined for a plain element.
       const occ = Number.isInteger(idIndex) ? idIndex : undefined;
       // `transform` rides the same lane for the rotate handle (Task L8);
-      // `padding-*`/`gap` ride it for the on-canvas spacing drag (Stage J) — same
-      // single-prop /_api/edit-css write + per-prop undo record, no new lane.
+      // `padding-*`/`gap` ride it for the on-canvas spacing drag (Stage J);
+      // `grid-template-columns`/`grid-template-rows` ride it for the on-canvas
+      // grid gutter drag (feature-3-web-artboards T5) — same single-prop
+      // /_api/edit-css write + per-prop undo record, no new lane.
       const props = [
         'width',
         'height',
@@ -10515,6 +11681,8 @@ function App() {
         'padding-bottom',
         'padding-left',
         'gap',
+        'grid-template-columns',
+        'grid-template-rows',
       ].filter((p) => typeof patch[p] === 'string' && patch[p]);
       if (!props.length) return;
       // Dogfood 2026-07-07 — "resize paddingu nebo gap" was still deselecting on
@@ -10693,6 +11861,34 @@ function App() {
     [activePath, canvasActiveArtboard, insertElementShell]
   );
 
+  // feature-4 detach-component (2026-07-19) — clone the definition + repoint
+  // this usage so edits stay local to this instance. Rides structuralWrite
+  // (one undo seq); the id churn after HMR invalidates the selection → clear.
+  const detachInstanceShell = useCallback(
+    (id, idIndex) => {
+      structuralWrite(
+        '/_api/detach-component',
+        { id, idIndex: Number.isInteger(idIndex) ? idIndex : undefined },
+        {
+          label: 'detach instance',
+          onOk: (j) => {
+            postToActiveCanvas({ dgn: 'selection-clear' });
+            postToActiveCanvas({
+              dgn: 'op-toast',
+              message: `Detached — this instance is now ${j.detachedName || 'its own component'}; edits stay local (⌘Z to undo).`,
+            });
+          },
+          onFail: (j) =>
+            postToActiveCanvas({
+              dgn: 'op-toast',
+              message: `Detach failed: ${j?.error || 'unknown error'}`,
+            }),
+        }
+      );
+    },
+    [structuralWrite, postToActiveCanvas]
+  );
+
   const duplicateElementShell = useCallback(
     (id, idIndex) => {
       structuralWrite(
@@ -10793,20 +11989,6 @@ function App() {
     [structuralWrite]
   );
 
-  // Stage I4 — "New artboard: <preset>" from the Edit menu. Generates a unique
-  // id (server 422s a dup, negligible with a random suffix) + a preset label/dims
-  // and inserts an empty <DCArtboard> after the last one (runtime default-grid
-  // places it; DDR-027). The new frame is then selectable + resizable.
-  const onInsertArtboard = useCallback(
-    (presetKey) => {
-      const p = SCREEN_PRESETS[presetKey];
-      if (!p) return;
-      const id = `s${Math.random().toString(36).slice(2, 8)}`;
-      insertArtboardShell({ id, label: p.label, width: p.width, height: p.height });
-    },
-    [insertArtboardShell]
-  );
-
   const resizeArtboardShell = useCallback(
     (artboardId, width, height) => {
       structuralWrite(
@@ -10818,10 +12000,14 @@ function App() {
           // during the drag (no HMR yet); on a rejected/failed write, tell it to
           // restore the pre-drag box so a phantom resize doesn't linger.
           onFail: () => postToActiveCanvas({ dgn: 'resize-artboard-failed' }),
+          // Dogfood follow-up — resync the Inspector's own W/H (and any other
+          // attrs) once the HMR reload lands, so a paper-preset pick doesn't
+          // leave the fields showing the pre-resize size.
+          onOk: () => scheduleArtboardResync(artboardId, activePath),
         }
       );
     },
-    [structuralWrite, postToActiveCanvas]
+    [structuralWrite, postToActiveCanvas, scheduleArtboardResync, activePath]
   );
 
   const deleteArtboardShell = useCallback(
@@ -10831,6 +12017,20 @@ function App() {
     [structuralWrite]
   );
 
+  // feature-3-web-artboards T3 — "Duplicate at width…". No onOk auto-select
+  // (matches insertArtboardShell's own precedent above — the new frame lands
+  // selectable, not auto-selected).
+  const duplicateArtboardShell = useCallback(
+    (artboardId, width) => {
+      structuralWrite(
+        '/_api/duplicate-artboard',
+        { artboardId, width },
+        { label: 'duplicate artboard at width' }
+      );
+    },
+    [structuralWrite]
+  );
+
   // Artboard "hug height" default — Hug ⇄ Fixed toggle from ArtboardKnobs
   // (CSS panel). Direct shell-side action (no canvas postMessage round trip,
   // unlike resizeArtboardShell's drag-overlay caller), so no *ShellRef needed.
@@ -10839,18 +12039,147 @@ function App() {
       structuralWrite(
         '/_api/set-artboard-hug',
         { artboardId, fixed, freezeHeight },
-        { label: fixed ? 'pin artboard height' : 'hug artboard height' }
+        {
+          label: fixed ? 'pin artboard height' : 'hug artboard height',
+          onOk: () => scheduleArtboardResync(artboardId, activePath),
+        }
       );
     },
-    [structuralWrite]
+    [structuralWrite, scheduleArtboardResync, activePath]
   );
 
   // Artboard "more settings" (background/padding/layout/gap) from ArtboardKnobs.
   const setArtboardStyleShell = useCallback(
     (artboardId, patch) => {
-      structuralWrite('/_api/set-artboard-style', { artboardId, ...patch }, { label: 'artboard style' });
+      structuralWrite('/_api/set-artboard-style', { artboardId, ...patch }, {
+        label: 'artboard style',
+        onOk: () => scheduleArtboardResync(artboardId, activePath),
+      });
     },
-    [structuralWrite]
+    [structuralWrite, scheduleArtboardResync, activePath]
+  );
+  // feature-1-artboard-kinds-foundation, T8 — kind-switch surfaces. Direct
+  // callable from ArtboardKnobs (Inspector); the context-menu submenu (inside
+  // the iframe) reaches the SAME endpoint via the postMessage ref below.
+  //
+  // Dogfood follow-up — every one of these ArtboardKnobs writers now resyncs
+  // the Inspector's OWN selection snapshot once the HMR reload lands
+  // (scheduleArtboardResync's retry ladder). Before this fix the ARTBOARD
+  // re-rendered correctly (new kind, new paper size) but the Inspector kept
+  // showing PRE-edit attrs (e.g. "Digital" right after picking "Print",
+  // "Preset size…" still listing screen presets) until the user manually
+  // re-clicked the artboard — structuralWrite's onOk never refreshed
+  // `selected`, only recorded undo history.
+  // feature-4 dogfood round 6 — the DIRECT kind write (+ the Inspector's
+  // print-seed, sequenced AFTER it on the same structuralWrite chain, so a
+  // freeze-convert enqueued just before lands FIRST and the A4 resize can't
+  // move anything pre-freeze). This is what the canvas's
+  // `set-artboard-kind-request` calls — it must NEVER re-enter the ask flow
+  // below (that round-trip was an infinite confirm loop: every "Switch +
+  // freeze" click spawned the next dialog).
+  const pendingPrintSeedRef = useRef(null);
+  const directArtboardKindWrite = useCallback(
+    (artboardId, kind) => {
+      structuralWrite('/_api/set-artboard-kind', { artboardId, kind }, {
+        label: 'artboard kind',
+        onOk: () => scheduleArtboardResync(artboardId, activePath),
+      });
+      const seed = pendingPrintSeedRef.current;
+      if (kind === 'print' && seed && seed.artboardId === artboardId) {
+        pendingPrintSeedRef.current = null;
+        // Same chain → serialized after the kind write (and after any freeze
+        // convert the canvas enqueued before it).
+        structuralWrite(
+          '/_api/resize-artboard',
+          { artboardId, width: seed.widthPx, height: seed.heightPx },
+          { label: 'artboard size' }
+        );
+        structuralWrite(
+          '/_api/set-artboard-print',
+          { artboardId, print: seed.defaults },
+          { label: 'artboard print' }
+        );
+      }
+    },
+    [structuralWrite, scheduleArtboardResync, activePath]
+  );
+  const directArtboardKindWriteRef = useRef(null);
+  useEffect(() => {
+    directArtboardKindWriteRef.current = directArtboardKindWrite;
+  }, [directArtboardKindWrite]);
+
+  const setArtboardKindShell = useCallback(
+    (artboardId, kind, seedPrint) => {
+      // feature-4 (user steer 2026-07-20) — Digital & Print are the freely-
+      // composed marketing kinds: switching TO them from the Inspector offers
+      // the freeze-and-flatten convert first. The confirm runs IN THE CANVAS
+      // (canvasConfirm — the shell's window.confirm is a silent no-op in the
+      // Tauri WKWebView); the canvas then re-posts `set-artboard-kind-request`,
+      // which lands on the DIRECT writer above (no re-entry → no dialog loop).
+      if (kind === 'print' || kind == null || kind === 'digital') {
+        if (seedPrint) pendingPrintSeedRef.current = { artboardId, ...seedPrint };
+        postToActiveCanvas({
+          dgn: 'freeze-and-set-kind',
+          artboardId,
+          kind: kind === 'digital' ? null : kind,
+          ask: true,
+        });
+        return;
+      }
+      directArtboardKindWrite(artboardId, kind);
+    },
+    [directArtboardKindWrite, postToActiveCanvas]
+  );
+  // feature-2-print-artboards T2 — paper/orientation/bleed/margins. Direct
+  // Inspector-only callable (no canvas-origin postMessage path — same shape
+  // as setArtboardStyleShell, unlike setArtboardKindShell which also has a
+  // context-menu caller inside the iframe).
+  const setArtboardPrintShell = useCallback(
+    (artboardId, print) => {
+      structuralWrite('/_api/set-artboard-print', { artboardId, print }, {
+        label: 'artboard print',
+        onOk: () => scheduleArtboardResync(artboardId, activePath),
+      });
+    },
+    [structuralWrite, scheduleArtboardResync, activePath]
+  );
+
+  // Stage I4 — "New artboard: <preset>" from the Edit menu. Generates a unique
+  // id (server 422s a dup, negligible with a random suffix) + a preset label/dims
+  // and inserts an empty <DCArtboard> after the last one (runtime default-grid
+  // places it; DDR-027). The new frame is then selectable + resizable.
+  const onInsertArtboard = useCallback(
+    (presetKey) => {
+      const id = `s${Math.random().toString(36).slice(2, 8)}`;
+      // feature-2-print-artboards T2 — kind="print" + the print prop must
+      // land together, so the created artboard is never a plain digital
+      // board sized to paper by coincidence. structuralWrite serializes
+      // calls in submission order (editApplyChainRef), so these three
+      // sequential POSTs land as insert → kind → print, in order.
+      if (presetKey.startsWith('print-')) {
+        const paper = presetKey.slice('print-'.length);
+        let resolved;
+        try {
+          resolved = resolvePrintArtboard({ paper });
+        } catch {
+          return;
+        }
+        const preset = PAPER_PRESETS.find((p) => p.id === paper);
+        insertArtboardShell({
+          id,
+          label: preset ? preset.label : paper.toUpperCase(),
+          width: resolved.widthPx,
+          height: resolved.heightPx,
+        });
+        setArtboardKindShell(id, 'print');
+        setArtboardPrintShell(id, { paper });
+        return;
+      }
+      const p = SCREEN_PRESETS[presetKey];
+      if (!p) return;
+      insertArtboardShell({ id, label: p.label, width: p.width, height: p.height });
+    },
+    [insertArtboardShell, setArtboardKindShell, setArtboardPrintShell]
   );
   // Refs the (stale-closure) onMessage handlers below read.
   const deleteElementShellRef = useRef(null);
@@ -10858,7 +12187,9 @@ function App() {
   const insertArtboardShellRef = useRef(null);
   const resizeArtboardShellRef = useRef(null);
   const deleteArtboardShellRef = useRef(null);
+  const setArtboardKindShellRef = useRef(null);
   const duplicateElementShellRef = useRef(null);
+  const duplicateArtboardShellRef = useRef(null);
   const copyStyleRef = useRef(null);
   const pasteStyleRef = useRef(null);
   useEffect(() => {
@@ -10867,7 +12198,9 @@ function App() {
     insertArtboardShellRef.current = insertArtboardShell;
     resizeArtboardShellRef.current = resizeArtboardShell;
     deleteArtboardShellRef.current = deleteArtboardShell;
+    setArtboardKindShellRef.current = setArtboardKindShell;
     duplicateElementShellRef.current = duplicateElementShell;
+    duplicateArtboardShellRef.current = duplicateArtboardShell;
     copyStyleRef.current = copyStyle;
     pasteStyleRef.current = pasteStyle;
   }, [
@@ -10876,7 +12209,9 @@ function App() {
     insertArtboardShell,
     resizeArtboardShell,
     deleteArtboardShell,
+    setArtboardKindShell,
     duplicateElementShell,
+    duplicateArtboardShell,
     copyStyle,
     pasteStyle,
   ]);
@@ -11624,6 +12959,9 @@ function App() {
           onResizeArtboard={resizeArtboardShell}
           onSetArtboardHug={setArtboardHugShell}
           onSetArtboardStyle={setArtboardStyleShell}
+          onSetArtboardKind={setArtboardKindShell}
+          onSetArtboardPrint={setArtboardPrintShell}
+          onDuplicateArtboard={duplicateArtboardShell}
           editScope={editScope}
           onUndoRedo={(dir) => postToActiveCanvas({ dgn: dir })}
           photoSel={photoSel}
@@ -11633,6 +12971,10 @@ function App() {
           onPhotoRecordEdit={onPhotoRecordEdit}
           onPhotoUndoRedo={(dir) => performPhotoUndo(dir === 'redo')}
           layersTree={layersTree}
+          componentMap={componentMap}
+          lockedKeys={lockedKeys}
+          onToggleLock={toggleLockedKey}
+          onDetachInstance={detachInstanceShell}
           canvasFile={activePath}
           onSelectLayer={(n) =>
             postToActiveCanvas({
@@ -11733,6 +13075,8 @@ function App() {
           onToggleZoomCtl={toggleZoomCtl}
           presentMode={presentMode}
           onTogglePresent={togglePresent}
+          printGuidesVisible={printGuidesVisible}
+          onTogglePrintGuides={togglePrintGuides}
           postToActiveCanvas={postToActiveCanvas}
           onOpenReadiness={() => setReadinessOpen(true)}
           onOpenQuickSetup={() => setQuickSetupOpen(true)}
@@ -11829,6 +13173,8 @@ function App() {
                   onClose={() => setAssistantOpen(false)}
                   onBusyChange={setAssistantBusy}
                   onFinished={handleAssistantFinished}
+                  onPermissionRequest={handleAssistantAttention}
+                  onElicitationRequest={handleAssistantAttention}
                 />
               )}
               {leftActive && leftActive !== 'assistant' && renderPanelBody(leftActive)}
@@ -11897,6 +13243,8 @@ function App() {
                   onClose={() => setAssistantOpen(false)}
                   onBusyChange={setAssistantBusy}
                   onFinished={handleAssistantFinished}
+                  onPermissionRequest={handleAssistantAttention}
+                  onElicitationRequest={handleAssistantAttention}
                 />
               )}
               {rightActive && rightActive !== 'assistant' && renderPanelBody(rightActive)}