@1agh/maude 0.46.0 → 0.48.0

package/apps/studio/client/app.jsx

@@ -12,6 +12,10 @@ 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.
@@ -99,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
@@ -173,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 {
@@ -252,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.
@@ -431,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" />
@@ -3031,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' },
@@ -4323,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'];
@@ -5129,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 || {};
@@ -5475,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: [
@@ -6372,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',
         <>
@@ -6395,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',
         <>
@@ -6707,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',
 };
 
 
@@ -6773,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
@@ -6809,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);
           }
         }}
       >
@@ -6847,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"
@@ -6883,6 +7243,10 @@ function LayerRow({
               onReorder={onReorder}
               onRowPointerDown={onRowPointerDown}
               dragState={dragState}
+              componentMap={componentMap}
+              lockedKeys={lockedKeys}
+              onToggleLock={onToggleLock}
+              onRename={onRename}
             />
           ))
         : null}
@@ -6999,6 +7363,7 @@ function ArtboardKnobs({
   onSetArtboardStyle,
   onSetArtboardKind,
   onSetArtboardPrint,
+  onDuplicateArtboard,
 }) {
   const artboardId = resolveArtboardIdFromSelection(el);
   // Dogfood (artboard panel ↔ shared inspector controls) — the panel now uses
@@ -7053,6 +7418,12 @@ function ArtboardKnobs({
   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-*`
@@ -7079,31 +7450,38 @@ function ArtboardKnobs({
   }
   const setKind = (nextKind) => {
     if (!artboardId) return;
-    // 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);
     // Dogfood fix — switching TO "print" with no print prop yet left the
-    // artboard in a half-configured state: the guides overlay renders
-    // nothing (print-overlay-content.tsx requires the prop) and the PDF
-    // exporter has no bleed to read, even though the Kind chip already
-    // shows "print". Seed a default A4 print prop + its resolved px size in
-    // the SAME gesture, mirroring the "+ Artboard: print preset" flow —
-    // switching a DIGITAL artboard to print should never require a second,
-    // easy-to-miss step in the (still-collapsed) Print section below.
+    // 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' };
-      let resolved;
       try {
-        resolved = resolvePrintArtboard(defaults);
+        const resolved = resolvePrintArtboard(defaults);
+        if (resolved) {
+          seedPrint = { defaults, widthPx: resolved.widthPx, heightPx: resolved.heightPx };
+        }
       } catch {
-        resolved = null;
-      }
-      if (resolved) {
-        onResizeArtboard?.(artboardId, resolved.widthPx, resolved.heightPx);
-        onSetArtboardPrint?.(artboardId, defaults);
+        /* 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;
@@ -7180,6 +7558,32 @@ function ArtboardKnobs({
               </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"
@@ -7223,6 +7627,35 @@ function ArtboardKnobs({
           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 = '';
+            }}
+          >
+            <option value="" disabled>
+              Duplicate at width…
+            </option>
+            {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">
@@ -7337,11 +7770,28 @@ function ArtboardKnobs({
 // 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
@@ -7360,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,
@@ -7374,6 +7831,7 @@ function InspectorPanel({
   onSetArtboardStyle,
   onSetArtboardKind,
   onSetArtboardPrint,
+  onDuplicateArtboard,
   onUndoRedo,
   editScope,
   tab: tabProp,
@@ -7420,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;
@@ -7428,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}`
@@ -7794,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">
@@ -7809,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">
@@ -7890,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}
@@ -7904,6 +8448,10 @@ function InspectorPanel({
                       onReorder={handleReorder}
                       onRowPointerDown={startLayerDrag}
                       dragState={dragState}
+                      componentMap={componentMap}
+                      lockedKeys={lockedKeys}
+                      onToggleLock={onToggleLock}
+                      onRename={renameLayer}
                     />
                   ))}
                 </div>
@@ -7922,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}
@@ -7948,6 +8496,7 @@ function InspectorPanel({
             onSetArtboardStyle={onSetArtboardStyle}
             onSetArtboardKind={onSetArtboardKind}
             onSetArtboardPrint={onSetArtboardPrint}
+            onDuplicateArtboard={onDuplicateArtboard}
           />
         ) : (
           <CssKnobs
@@ -8016,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;
@@ -8093,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
@@ -8360,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
@@ -9071,11 +9665,15 @@ function App() {
         // 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);
           setPrintGuidesVisible(false);
+          setLockedKeys(new Set());
         }
       });
     return () => {
@@ -9083,6 +9681,51 @@ function App() {
     };
   }, [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 {
@@ -9318,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;
@@ -9899,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;
@@ -9947,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)
@@ -9976,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) {
@@ -10294,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
@@ -10370,7 +11097,17 @@ function App() {
         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) {
-          setArtboardKindShellRef.current?.(m.artboardId, m.kind);
+          // 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.
@@ -10929,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',
@@ -10942,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
@@ -11120,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(
@@ -11248,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.
@@ -11287,15 +12070,66 @@ function App() {
   // "Preset size…" still listing screen presets) until the user manually
   // re-clicked the artboard — structuralWrite's onOk never refreshed
   // `selected`, only recorded undo history.
-  const setArtboardKindShell = useCallback(
+  // 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
@@ -11355,6 +12189,7 @@ function App() {
   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(() => {
@@ -11365,6 +12200,7 @@ function App() {
     deleteArtboardShellRef.current = deleteArtboardShell;
     setArtboardKindShellRef.current = setArtboardKindShell;
     duplicateElementShellRef.current = duplicateElementShell;
+    duplicateArtboardShellRef.current = duplicateArtboardShell;
     copyStyleRef.current = copyStyle;
     pasteStyleRef.current = pasteStyle;
   }, [
@@ -11375,6 +12211,7 @@ function App() {
     deleteArtboardShell,
     setArtboardKindShell,
     duplicateElementShell,
+    duplicateArtboardShell,
     copyStyle,
     pasteStyle,
   ]);
@@ -12124,6 +12961,7 @@ function App() {
           onSetArtboardStyle={setArtboardStyleShell}
           onSetArtboardKind={setArtboardKindShell}
           onSetArtboardPrint={setArtboardPrintShell}
+          onDuplicateArtboard={duplicateArtboardShell}
           editScope={editScope}
           onUndoRedo={(dir) => postToActiveCanvas({ dgn: dir })}
           photoSel={photoSel}
@@ -12133,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({
@@ -12331,6 +13173,8 @@ function App() {
                   onClose={() => setAssistantOpen(false)}
                   onBusyChange={setAssistantBusy}
                   onFinished={handleAssistantFinished}
+                  onPermissionRequest={handleAssistantAttention}
+                  onElicitationRequest={handleAssistantAttention}
                 />
               )}
               {leftActive && leftActive !== 'assistant' && renderPanelBody(leftActive)}
@@ -12399,6 +13243,8 @@ function App() {
                   onClose={() => setAssistantOpen(false)}
                   onBusyChange={setAssistantBusy}
                   onFinished={handleAssistantFinished}
+                  onPermissionRequest={handleAssistantAttention}
+                  onElicitationRequest={handleAssistantAttention}
                 />
               )}
               {rightActive && rightActive !== 'assistant' && renderPanelBody(rightActive)}