@1agh/maude 0.40.0 → 0.41.0

package/apps/studio/client/app.jsx

@@ -12,6 +12,7 @@ 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';
+import { sizingModeOf, sizingModePatch } from '../sizing-mode.ts';
 import { canvasUrl } from './canvas-url.js';
 import ChatPanel from './panels/ChatPanel.jsx';
 import DiffView from './panels/DiffView.jsx';
@@ -26,6 +27,7 @@ import {
   appIsFirstRun,
   isNativeApp,
   onUpdateReady,
+  pickMediaFile,
   restartToUpdate,
   saveExport,
 } from './github.js';
@@ -839,6 +841,167 @@ const PNG_SCALES = [
   { value: 3, label: '3× (max)' },
 ];
 
+// feature-element-editing-robustness Stage F1 — AssetPicker. A shell modal that
+// lists the versioned content-addressed media under <designRoot>/assets/ (via the
+// main-origin-only GET /_api/assets) and lets the user pick one — or upload a new
+// file (POST /_api/asset, content-addressed) — for a media Replace / image
+// Insert. Thumbnails load from the main origin's designRoot static serve
+// (/${designRel}/${asset.path}); never a remote hotlink (the CSP split origin
+// blocks those — memory reference_canvas_images_download_first).
+function AssetPicker({ designRel, onPick, onClose }) {
+  const [assets, setAssets] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState(null);
+
+  useEffect(() => {
+    let alive = true;
+    fetch('/_api/assets')
+      .then((r) => r.json())
+      .then((j) => alive && setAssets(j.ok ? j.assets : []))
+      .catch(() => alive && setAssets([]));
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', onKey, true);
+    return () => window.removeEventListener('keydown', onKey, true);
+  }, [onClose]);
+
+  const doUpload = async (f) => {
+    if (!f) return;
+    setBusy(true);
+    setErr(null);
+    try {
+      const res = await fetch('/_api/asset', {
+        method: 'POST',
+        headers: { 'content-type': f.type || 'application/octet-stream' },
+        body: f,
+      });
+      const j = await res.json().catch(() => ({}));
+      // /_api/asset returns 201 { path } on success — NO `ok` field (the bug: a
+      // `j.ok` check always failed → "upload failed" even on a good upload).
+      if (res.ok && j.path) {
+        onPick(j.path);
+        return;
+      }
+      setErr(j.error || `upload failed (HTTP ${res.status})`);
+    } catch {
+      setErr('upload failed');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  // Native desktop (Tauri WKWebView) — an HTML <input type=file> won't present
+  // the file panel AT ALL here, so route through the same native-dialog spine
+  // export uses (dogfood: "pri exportu to uz umime"). The Rust pick_media_file
+  // command opens an OS open-dialog + reads the bytes; we POST them to
+  // /_api/asset (magic-byte sniffed, so name/ext aren't trusted).
+  const openFilePickerNative = async () => {
+    setBusy(true);
+    setErr(null);
+    try {
+      const picked = await pickMediaFile();
+      if (picked?.bytes) {
+        // Blob from the byte array; the server sniffs the type, so no content-type
+        // needed. (doUpload sets its own busy=false in finally.)
+        await doUpload(new Blob([new Uint8Array(picked.bytes)]));
+        return;
+      }
+    } catch (e) {
+      setErr(e?.message || 'open failed');
+    }
+    setBusy(false); // only reached on cancel / error (doUpload owns the success path)
+  };
+
+  // Browser — imperative <input>, mirrors the proven replaceMediaViaPicker
+  // pattern (freshly created, appended to document.body, clicked synchronously in
+  // the gesture). Off-screen (not display:none) so it lays out.
+  const openFilePicker = () => {
+    if (isNativeApp()) {
+      openFilePickerNative();
+      return;
+    }
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*,video/*';
+    input.style.cssText =
+      'position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none';
+    document.body.appendChild(input);
+    const cleanup = () => {
+      if (input.isConnected) input.remove();
+    };
+    window.addEventListener('focus', () => setTimeout(cleanup, 300), { once: true });
+    input.addEventListener('change', () => {
+      const file = input.files?.[0];
+      cleanup();
+      if (file) doUpload(file);
+    });
+    input.click();
+  };
+
+  const assetUrl = (p) => `/${designRel}/${p}`;
+
+  return (
+    <div
+      className="st-scrim"
+      role="presentation"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="st-dialog st-asset-picker" role="dialog" aria-modal="true" aria-label="Choose media">
+        <div className="st-dialog-hd">
+          <span className="st-dialog-title">Choose media</span>
+          <button type="button" className="st-iconbtn" aria-label="Close" onClick={onClose}>
+            <StIcon name="x" size={15} />
+          </button>
+        </div>
+        <div className="st-dialog-bd">
+          <div className="st-ap-toolbar">
+            <button type="button" className="st-btn" onClick={openFilePicker} disabled={busy}>
+              {busy ? 'Uploading…' : 'Upload…'}
+            </button>
+            {err && <span className="st-ap-err">{err}</span>}
+          </div>
+          <div className="st-ap-grid">
+            {assets == null ? (
+              <div className="st-ap-empty">Loading…</div>
+            ) : assets.length === 0 ? (
+              <div className="st-ap-empty">No assets yet — upload one.</div>
+            ) : (
+              assets.map((a) => (
+                <button
+                  type="button"
+                  key={a.path}
+                  className="st-ap-cell"
+                  title={`${a.name} · ${Math.max(1, Math.round(a.size / 1024))} KB`}
+                  onClick={() => onPick(a.path)}
+                >
+                  {a.kind === 'video' ? (
+                    <video className="st-ap-thumb" src={assetUrl(a.path)} muted playsInline />
+                  ) : (
+                    <img className="st-ap-thumb" src={assetUrl(a.path)} alt={a.name} loading="lazy" />
+                  )}
+                  <span className="st-ap-name">{a.name}</span>
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function ExportDialog({
   mode,
   initialScope,
@@ -2456,7 +2619,7 @@ function FileDropdown({ onAction, onClose, hasCanvas }) {
   );
 }
 
-function EditDropdown({ onAction, onClose }) {
+function EditDropdown({ onAction, onClose, hasCanvas }) {
   return (
     <DropdownMenu
       label="Edit"
@@ -2469,6 +2632,17 @@ function EditDropdown({ onAction, onClose }) {
         { sep: true },
         { id: 'deselect-all', label: 'Deselect all', shortcut: 'Esc' },
         { id: 'select-all-annotations', label: 'Select all annotations', shortcut: '⇧⌘A' },
+        // Stage I4 — insert an empty artboard from a device-size preset into the
+        // active canvas. Only meaningful with a canvas open.
+        ...(hasCanvas
+          ? [
+              { sep: true },
+              { id: 'new-artboard:desktop', label: 'New artboard: Desktop' },
+              { id: 'new-artboard:laptop', label: 'New artboard: Laptop' },
+              { id: 'new-artboard:tablet', label: 'New artboard: Tablet' },
+              { id: 'new-artboard:mobile', label: 'New artboard: Mobile' },
+            ]
+          : []),
       ]}
     />
   );
@@ -2511,6 +2685,8 @@ function Menubar({
   inspectorOpen,
   inspectorTab,
   onToggleInspector,
+  autoOpenInspector,
+  onToggleAutoOpenInspector,
   onOpenLayers,
   timelineOpen,
   onToggleTimeline,
@@ -2524,6 +2700,7 @@ function Menubar({
   onOpenExport,
   onReload,
   onCloseCanvas,
+  onInsertArtboard,
 }) {
   const isSystem = activePath === SYSTEM_TAB;
   const stamp = isSystem ? 'SYSTEM' : activePath ? 'CANVAS' : 'IDLE';
@@ -2574,6 +2751,13 @@ function Menubar({
       checked: inspectorOpen,
       disabled: false,
     },
+    {
+      id: 'autoopen',
+      label: 'Auto-open Inspector on select',
+      shortcut: '',
+      checked: !!autoOpenInspector,
+      disabled: false,
+    },
     // DDR-148 — Timeline (video-comp scrub). Phase-tag hints when the active
     // canvas actually has a comp; the panel itself shows an empty state otherwise.
     {
@@ -2728,12 +2912,15 @@ function Menubar({
       )}
       {openMenu === 'edit' && (
         <EditDropdown
+          hasCanvas={!!activePath && !isSystem}
           onAction={(id) => {
             if (id === 'undo') postToActiveCanvas({ dgn: 'undo' });
             else if (id === 'redo') postToActiveCanvas({ dgn: 'redo' });
             else if (id === 'deselect-all') postToActiveCanvas({ dgn: 'selection-clear' });
             else if (id === 'select-all-annotations')
               postToActiveCanvas({ dgn: 'annotation-select-all' });
+            else if (id.startsWith('new-artboard:'))
+              onInsertArtboard?.(id.slice('new-artboard:'.length));
           }}
           onClose={() => setOpenMenu(null)}
         />
@@ -2748,6 +2935,7 @@ function Menubar({
             else if (id === 'hidden') onToggleShowHidden();
             else if (id === 'annotate') onToggleAnnotations();
             else if (id === 'inspector') onToggleInspector();
+            else if (id === 'autoopen') onToggleAutoOpenInspector?.();
             else if (id === 'timeline') onToggleTimeline?.();
             else if (id === 'assistant') onToggleAssistant?.();
             else if (id === 'layers') onOpenLayers?.();
@@ -3636,7 +3824,10 @@ function SyncBanner({ status }) {
 
 const CSS_DISPLAYS = ['block', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline', 'none'];
 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'];
+// Stage M — flex-CHILD align-self (adds `auto` to the container align-items set).
+const CSS_ALIGN_SELF = ['auto', 'stretch', 'flex-start', 'center', 'flex-end', 'baseline'];
 const CSS_JUSTIFY = [
   'flex-start',
   'center',
@@ -3675,6 +3866,27 @@ const PROP_LEAD = {
   opacity: { icon: 'p-opacity' },
 };
 const CSS_ALIGN_OPTS = ['left', 'center', 'right', 'justify'];
+// feature-element-editing-robustness Stage B — enum option lists for the promoted
+// DDR-104 OUT-list knobs (Position / Typography extras / Media framing).
+const CSS_POSITION = ['static', 'relative', 'absolute', 'fixed', 'sticky'];
+const CSS_FONT_STYLE = ['normal', 'italic', 'oblique'];
+const CSS_TEXT_TRANSFORM = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const CSS_TEXT_DECORATION = ['none', 'underline', 'line-through', 'overline'];
+const CSS_WHITE_SPACE = ['normal', 'nowrap', 'pre', 'pre-wrap', 'pre-line', 'break-spaces'];
+const CSS_OBJECT_FIT = ['fill', 'contain', 'cover', 'none', 'scale-down'];
+const CSS_OVERFLOW = ['visible', 'hidden', 'auto', 'scroll'];
+// Common aspect ratios for the Media dropdown (dogfood request — a select, not a
+// free-text field). Canonical spaced form so a dropdown-set value round-trips.
+const CSS_ASPECT_RATIO = ['auto', '1 / 1', '4 / 3', '3 / 2', '16 / 9', '21 / 9', '3 / 4', '2 / 3', '9 / 16'];
+
+// feature-element-editing-robustness Stage I4 — device presets for the "New
+// artboard" menu (inserts an empty <DCArtboard> of these dims into the canvas).
+const SCREEN_PRESETS = {
+  desktop: { label: 'Desktop', width: 1440, height: 1024 },
+  laptop: { label: 'Laptop', width: 1280, height: 800 },
+  tablet: { label: 'Tablet', width: 834, height: 1194 },
+  mobile: { label: 'Mobile', width: 390, height: 844 },
+};
 
 let _cssColorCtx = null;
 // Normalize any CSS color string to #rrggbb for the native color input via a
@@ -4277,7 +4489,7 @@ function TokenPopover({ kind, groups, current, onPick, label, swatchBg, seedHex,
   );
 }
 
-function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
+function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoRedo }) {
   const editable = !!el.id;
   const computed = el.computed || {};
   // Phase 12.3 — optimistic local overlay over the selection's authored / custom
@@ -4321,9 +4533,11 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
   const [status, setStatus] = useState({});
   const [open, setOpen] = useState({
     Layout: true,
+    Position: true,
     Typography: true,
     Spacing: true,
     Size: true,
+    Media: true,
     Appearance: true,
     Advanced: false,
   });
@@ -4437,6 +4651,48 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
     post('/_api/edit-attr', { canvas: el.file, id: el.id, attr, reset: true }, `@${attr}`);
     record('attr', attr, before, null);
   };
+  // Stage M1 — apply a Fixed / Hug / Fill sizing mode to one axis. The pure
+  // `sizingModePatch` returns the exact writes (context-aware Fill: flex main axis
+  // → flex-grow, cross axis → align-self, block/grid → 100%) + the fill-props to
+  // clear. Each ride the same commit/reset lanes (per-prop edit-css + undo record);
+  // the server's per-file lock serializes them, so the resulting box is coherent.
+  const parentLayout = { display: el.parentDisplay, flexDirection: el.parentFlexDirection };
+  const applySizing = (axis, mode) => {
+    if (!editable) return;
+    const px = Math.round((axis === 'width' ? el.bounds?.w : el.bounds?.h) || 0);
+    const patch = sizingModePatch(axis, mode, parentLayout, px);
+    for (const p of patch.reset) if (authored[p]) reset(p);
+    for (const [prop, value] of patch.set) commit(prop, value);
+  };
+  const parentIsFlexChild =
+    el.parentDisplay === 'flex' || el.parentDisplay === 'inline-flex';
+  const sizeModeSeg = (axis) => {
+    const cur = sizingModeOf(axis, authored, computed, parentLayout);
+    return (
+      <div className="st-cp-modeseg" role="group" aria-label={`${axis} sizing mode`}>
+        <span className="st-cp-modeax" aria-hidden="true">
+          {axis === 'width' ? 'W' : 'H'}
+        </span>
+        {[
+          ['fixed', 'Fixed'],
+          ['hug', 'Hug'],
+          ['fill', 'Fill'],
+        ].map(([m, label]) => (
+          <button
+            key={m}
+            type="button"
+            className={`st-cp-modebtn${cur === m ? ' is-active' : ''}`}
+            aria-pressed={cur === m}
+            disabled={!editable}
+            onClick={() => applySizing(axis, m)}
+            title={`${label} ${axis}`}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+    );
+  };
   // Cmd+Z / Cmd+Shift+Z (or Cmd+Y) inside the inspector forwards to the canvas
   // undo stack — Figma-parity: a property field reverts the last DOCUMENT edit,
   // not field text. Without this, an edit committed with focus still in the
@@ -4595,7 +4851,9 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
 
   // Props each section owns — drives the per-section "reset section" affordance.
   const SECTION_PROPS = {
-    Layout: ['display', 'flex-direction', 'align-items', 'justify-content', 'gap'],
+    Layout: ['display', 'flex-direction', 'flex-wrap', 'align-items', 'justify-content', 'gap'],
+    // feature-element-editing-robustness Stage B — promoted DDR-104 OUT-list.
+    Position: ['position', 'top', 'right', 'bottom', 'left', 'z-index'],
     Typography: [
       'font-family',
       'color',
@@ -4604,6 +4862,10 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
       'line-height',
       'letter-spacing',
       'text-align',
+      'font-style',
+      'text-transform',
+      'text-decoration',
+      'white-space',
     ],
     Spacing: [
       'margin-top',
@@ -4615,7 +4877,22 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
       'padding-bottom',
       'padding-left',
     ],
-    Size: ['width', 'height', 'max-width'],
+    Size: [
+      'width',
+      'height',
+      'min-width',
+      'min-height',
+      'max-width',
+      'max-height',
+      'overflow',
+      // Stage M — flex-child sizing props (written by the Fill mode + shown as rows
+      // when the parent is flex). Included so a section-reset clears them too.
+      'flex-grow',
+      'flex-shrink',
+      'flex-basis',
+      'align-self',
+    ],
+    Media: ['object-fit', 'aspect-ratio', 'object-position'],
     Appearance: [
       'background-color',
       'border-radius',
@@ -4628,6 +4905,8 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
       'border-color',
       'box-shadow',
       'opacity',
+      'transform',
+      'transform-origin',
     ],
   };
   const resetSection = (name) => {
@@ -4863,6 +5142,41 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
     );
   };
 
+  // feature-element-editing-robustness Stage B (Task B3) — a position INSET side
+  // (top/right/bottom/left). Mirrors `side()` but for the bare inset longhands
+  // (no group prefix), allowing NEGATIVE values and an `auto` default, and reuses
+  // the same box-model scrub grammar: alt = the axis pair, alt+shift = all four.
+  const inset = (prop) => {
+    const a = authored[prop];
+    const shown =
+      a != null && a !== '' && a !== 'auto'
+        ? cssSplitUnit(a).n || a
+        : cssSplitUnit(cssHint(computed[prop]) ?? '').n || '';
+    const isZero = !a || a === 'auto' || a === '0' || a === '0px';
+    const pair = prop === 'top' || prop === 'bottom' ? ['top', 'bottom'] : ['left', 'right'];
+    const all = ['top', 'right', 'bottom', 'left'];
+    return (
+      <input
+        className={`st-cp-boxv st-cp-scrub st-cp-boxv--i${prop[0]}${isZero ? ' is-zero' : ''}`}
+        key={`${prop}:${a ?? ''}`}
+        aria-label={prop}
+        defaultValue={shown}
+        placeholder="auto"
+        title="drag to scrub · alt = axis pair · alt+shift = all sides · type auto"
+        onPointerDown={makeScrub(prop, { sides: { pair, all }, min: -Infinity })}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') e.currentTarget.blur();
+        }}
+        onBlur={(e) => {
+          const raw = e.currentTarget.value.trim();
+          if (!raw) return;
+          const val = /[a-z%]/i.test(raw) ? raw : `${raw}px`;
+          commit(prop, val);
+        }}
+      />
+    );
+  };
+
   const corner = (label, prop) => (
     <label className="st-cp-cornerf">
       <span>{label}</span>
@@ -4899,12 +5213,66 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
 
       {sec(
         'Layout',
+        (() => {
+          // Stage M2 — auto-layout editor. Present the flex vocabulary (Direction ·
+          // Wrap · Distribution · Align · Gap) only when the element IS a flex/grid
+          // container, so a plain block doesn't carry knobs that do nothing; a
+          // non-container gets a one-click "make it a flex layout" instead (the
+          // DDR-104 gap-degrades-gracefully precedent). align-items / justify-content
+          // / gap apply to grid too; flex-direction / flex-wrap are flex-only.
+          const disp = (authored.display || cssHint(computed.display) || '').trim();
+          const isFlex = disp === 'flex' || disp === 'inline-flex';
+          const isGrid = disp === 'grid' || disp === 'inline-grid';
+          return (
+            <>
+              {row('display', csel('display', CSS_DISPLAYS))}
+              {isFlex ? (
+                <>
+                  {row('flex-direction', csel('flex-direction', CSS_FLEX_DIR))}
+                  {row('flex-wrap', csel('flex-wrap', CSS_FLEX_WRAP))}
+                </>
+              ) : null}
+              {isFlex || isGrid ? (
+                <>
+                  {row('align-items', csel('align-items', CSS_ALIGN))}
+                  {row('justify-content', csel('justify-content', CSS_JUSTIFY))}
+                  {row('gap', num('gap', 'space'))}
+                </>
+              ) : (
+                <button
+                  type="button"
+                  className="st-cp-makeflex"
+                  disabled={!editable}
+                  onClick={() => commit('display', 'flex')}
+                >
+                  + Auto layout (flex)
+                </button>
+              )}
+            </>
+          );
+        })()
+      )}
+
+      {sec(
+        'Position',
         <>
-          {row('display', csel('display', CSS_DISPLAYS))}
-          {row('flex-direction', csel('flex-direction', CSS_FLEX_DIR))}
-          {row('align-items', csel('align-items', CSS_ALIGN))}
-          {row('justify-content', csel('justify-content', CSS_JUSTIFY))}
-          {row('gap', num('gap', 'space'))}
+          {row('position', csel('position', CSS_POSITION))}
+          <div className="st-cp-box st-cp-box--inset" aria-label="position inset (top / right / bottom / left)">
+            <span className="st-cp-boxtag st-cp-boxtag--i">{prov(provOf('top'))}inset</span>
+            {inset('top')}
+            {inset('right')}
+            {inset('bottom')}
+            {inset('left')}
+            <div className="st-cp-boxcore st-cp-boxcore--pos">
+              {authored.position || cssHint(computed.position) || 'static'}
+            </div>
+          </div>
+          {(authored.position || cssHint(computed.position) || 'static') === 'static' ? (
+            <div className="st-cp-note">
+              top / right / bottom / left apply once position is relative, absolute, fixed, or sticky
+            </div>
+          ) : null}
+          {row('z-index', num('z-index'))}
         </>
       )}
 
@@ -4938,6 +5306,11 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
               ))}
             </div>
           )}
+          {/* Stage B (Task B4) — promoted typography knobs (was DDR-104 OUT-list). */}
+          {row('font-style', csel('font-style', CSS_FONT_STYLE))}
+          {row('text-transform', csel('text-transform', CSS_TEXT_TRANSFORM))}
+          {row('text-decoration', csel('text-decoration', CSS_TEXT_DECORATION))}
+          {row('white-space', csel('white-space', CSS_WHITE_SPACE))}
         </>
       )}
 
@@ -4971,12 +5344,103 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
       {sec(
         'Size',
         <>
+          {/* Stage M1 — per-axis Fixed / Hug / Fill sizing mode (Figma parity). The
+              Fixed case leaves the numeric width/height knobs below in control. */}
+          <div className="st-cp-modes">
+            {sizeModeSeg('width')}
+            {sizeModeSeg('height')}
+          </div>
           {row('width', num('width'))}
           {row('height', num('height'))}
+          {row('min-width', num('min-width'))}
           {row('max-width', num('max-width'))}
+          {row('min-height', num('min-height'))}
+          {row('max-height', num('max-height'))}
+          {row('overflow', csel('overflow', CSS_OVERFLOW))}
+          {/* Stage M1 — flex-CHILD controls, only meaningful when the parent is a
+              flex container. align-self is the cross-axis override; flex-grow/shrink/
+              basis are the main-axis behavior the Fill mode writes for you. */}
+          {parentIsFlexChild ? (
+            <>
+              <div className="st-cp-subhd">In flex parent</div>
+              {row('align-self', csel('align-self', CSS_ALIGN_SELF))}
+              {row('flex-grow', num('flex-grow', null, { unitless: true }))}
+              {row('flex-shrink', num('flex-shrink', null, { unitless: true }))}
+              {row('flex-basis', num('flex-basis'))}
+            </>
+          ) : null}
         </>
       )}
 
+      {/* Stage B (Task B5) — Media framing. Rendered only for a media element
+          (img / video / picture / svg / canvas) or a selection that already
+          carries a framing prop, so a plain <div> doesn't grow object-fit rows.
+          Media = box/framing/source (this plan); the photo-editor plan's "Photo"
+          tab owns pixels/look — they are separate DOM slots by design. */}
+      {(() => {
+        const t = (el.tag || '').toLowerCase();
+        const isMediaEl = t === 'img' || t === 'video' || t === 'picture' || t === 'svg' || t === 'canvas';
+        const showMedia =
+          isMediaEl ||
+          !!authored['object-fit'] ||
+          !!authored['object-position'] ||
+          !!authored['aspect-ratio'];
+        // Stage F2 — "Replace…" opens the AssetPicker to re-point src (authored
+        // <img>/<video> only; a template-expression src can't be string-swapped,
+        // so gate on a real src attr being present).
+        const canReplace = (t === 'img' || t === 'video') && !!el.attrs?.src && !!onReplaceMedia;
+        return showMedia
+          ? sec(
+              'Media',
+              <>
+                {canReplace && (
+                  <div className="st-cp-mediabtn">
+                    <button
+                      type="button"
+                      className="st-btn st-cp-replace"
+                      onClick={() => onReplaceMedia(el)}
+                    >
+                      Replace…
+                    </button>
+                  </div>
+                )}
+                {row('object-fit', csel('object-fit', CSS_OBJECT_FIT))}
+                {row('object-position', text('object-position'))}
+                {row(
+                  'aspect-ratio',
+                  <select
+                    className="st-cp-nsel"
+                    aria-label="aspect-ratio"
+                    value={
+                      CSS_ASPECT_RATIO.includes(authored['aspect-ratio'])
+                        ? authored['aspect-ratio']
+                        : ''
+                    }
+                    onChange={(e) => {
+                      const v = e.target.value;
+                      commit('aspect-ratio', v);
+                      // A fixed height overrides aspect-ratio (CSS: explicit
+                      // width+height win). When applying a real ratio, release the
+                      // height so the ratio actually reshapes the box (dogfood:
+                      // "nastavil jsem 16/9 a nic se nestalo").
+                      if (v && v !== 'auto' && authored.height) reset('height');
+                    }}
+                  >
+                    <option value="" disabled>
+                      {cssHint(computed['aspect-ratio']) || '—'}
+                    </option>
+                    {CSS_ASPECT_RATIO.map((v) => (
+                      <option key={v} value={v}>
+                        {v}
+                      </option>
+                    ))}
+                  </select>
+                )}
+              </>
+            )
+          : null;
+      })()}
+
       {sec(
         'Appearance',
         <>
@@ -5060,6 +5524,9 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
               />
             </div>
           )}
+          {/* Stage B (Task B4) — transform as a free-value row (mirrors box-shadow). */}
+          {row('transform', text('transform'))}
+          {row('transform-origin', text('transform-origin'))}
         </>
       )}
 
@@ -5325,7 +5792,7 @@ function LayerRow({
   selectedId,
   selectedIndex,
   collapsed,
-  hidden,
+  hiddenOverride,
   onToggle,
   onSelect,
   onHover,
@@ -5342,7 +5809,7 @@ function LayerRow({
   // clones at once. Fall back to id-only when the selection carries no index.
   const isSel =
     node.id === selectedId && (selectedIndex == null || node.index === selectedIndex);
-  const isHidden = hidden?.has(key);
+  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
@@ -5435,7 +5902,7 @@ function LayerRow({
               selectedId={selectedId}
               selectedIndex={selectedIndex}
               collapsed={collapsed}
-              hidden={hidden}
+              hiddenOverride={hiddenOverride}
               onToggle={onToggle}
               onSelect={onSelect}
               onHover={onHover}
@@ -5515,10 +5982,123 @@ function InspectComputed({ el }) {
   );
 }
 
+// Dogfood 2026-07-07 — resolve the artboard id for a whole-artboard selection
+// defensively: prefer `el.artboardId` (set by `hoverTargetToSelection` for a
+// live chrome click), but fall back to parsing it out of `el.selector` — some
+// selection-construction paths (Layers-tree artboard row, a restored
+// `_active.json` selection) may not carry `artboardId` even though the
+// selector is always the `[data-dc-screen="…"]` chrome form for one.
+function resolveArtboardIdFromSelection(el) {
+  if (el.artboardId) return el.artboardId;
+  const m = /^\[data-dc-screen="([^"]+)"\]$/.exec(el.selector || '');
+  return m ? m[1] : null;
+}
+
+// Dogfood 2026-07-07 — the CSS tab showed everything disabled for a
+// whole-ARTBOARD selection (`CssKnobs`'s `editable = !!el.id`, and an artboard
+// chrome click has NO data-cd-id — DCArtboard doesn't forward it to the DOM).
+// A dedicated, MUCH smaller panel: exact width/height fields (writes via
+// /_api/resize-artboard, NOT edit-css — DDR-027 numeric JSX props) + the SAME
+// SCREEN_PRESETS the "+ Artboard" menu uses, so picking "Tablet" resizes the
+// CURRENT artboard to 834×1194 in one click instead of typing both fields.
+function ArtboardKnobs({ el, onResizeArtboard }) {
+  const artboardId = resolveArtboardIdFromSelection(el);
+  // 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
+  // `bounds` (the SCREEN rect — always populated, but wrong at any zoom other
+  // than 100%) so the fields show SOMETHING rather than sit empty. Self-heals
+  // to the exact value the moment `worldW`/`worldH` are present.
+  const w = Number.isFinite(el.worldW)
+    ? el.worldW
+    : Number.isFinite(el.bounds?.w)
+      ? el.bounds.w
+      : null;
+  const h = Number.isFinite(el.worldH)
+    ? el.worldH
+    : Number.isFinite(el.bounds?.h)
+      ? el.bounds.h
+      : null;
+  const commitSize = (width, height) => {
+    if (!artboardId) return;
+    const nw = Number.isFinite(width) && width > 0 ? Math.round(width) : undefined;
+    const nh = Number.isFinite(height) && height > 0 ? Math.round(height) : undefined;
+    if (nw == null && nh == null) return;
+    onResizeArtboard?.(artboardId, nw, nh);
+  };
+  const activePreset = Object.entries(SCREEN_PRESETS).find(
+    ([, p]) => p.width === w && p.height === h
+  )?.[0];
+  return (
+    <section className="st-cp-sec">
+      <div className="st-cp-sechd-row">
+        <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"
+            key={`h:${h ?? ''}`}
+            defaultValue={h ?? ''}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') e.currentTarget.blur();
+            }}
+            onBlur={(e) => commitSize(null, Number.parseFloat(e.currentTarget.value))}
+          />
+        </div>
+      </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}
+            </option>
+          ))}
+        </select>
+      </div>
+    </section>
+  );
+}
+
 function InspectorPanel({
   selected,
   onClose,
   layersTree,
+  canvasFile,
   onSelectLayer,
   onHoverLayer,
   onReorderLayer,
@@ -5526,7 +6106,10 @@ function InspectorPanel({
   cfg,
   onOptimistic,
   onRecordEdit,
+  onReplaceMedia,
+  onResizeArtboard,
   onUndoRedo,
+  editScope,
   tab: tabProp,
   onTabChange,
   width,
@@ -5543,9 +6126,18 @@ function InspectorPanel({
     onTabChange?.(t);
   };
   const [collapsed, setCollapsed] = useState(() => new Set());
-  // Phase 12.3 (W3.1) — per-layer visibility toggle. Live-only (display:none via
-  // the optimistic apply bus); not persisted to source. Keyed by `${id}:${index}`.
-  const [hiddenLayers, setHiddenLayers] = useState(() => new Set());
+  // Phase 12.3 (W3.1) — per-layer visibility toggle. Persists via /_api/edit-css
+  // (property 'display', mirroring CssKnobs' commit/reset) and is undoable via
+  // the same edit-source command (see the undo/redo coverage RCA:
+  // .ai/logs/rca/issue-undo-redo-coverage-gaps.md). Keyed by `${id}:${index}`;
+  // holds only OPTIMISTIC overrides (either direction) over the tree-reported
+  // `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());
+  const isNodeHidden = (node) => {
+    const key = `${node.id}:${node.index}`;
+    return hiddenOverride.has(key) ? hiddenOverride.get(key) : !!node.hidden;
+  };
   // Phase 12.1 (DDR-138) — drag-to-reorder state (lifted so every row sees the
   // same drop target) + an aria-live announcement for keyboard moves.
   const [dragState, setDragState] = useState(null);
@@ -5786,7 +6378,9 @@ function InspectorPanel({
     });
   const toggleVisibility = (node) => {
     const key = `${node.id}:${node.index}`;
-    const willHide = !hiddenLayers.has(key);
+    const wasHidden = isNodeHidden(node);
+    const willHide = !wasHidden;
+    setHiddenOverride((prev) => new Map(prev).set(key, willHide));
     onOptimistic?.({
       id: node.id,
       artboardId: layersTree?.artboardId ?? null,
@@ -5794,11 +6388,26 @@ function InspectorPanel({
       prop: 'display',
       value: willHide ? 'none' : null,
     });
-    setHiddenLayers((prev) => {
-      const next = new Set(prev);
-      if (willHide) next.add(key);
-      else next.delete(key);
-      return next;
+    if (!canvasFile || !node.id) return;
+    fetch('/_api/edit-css', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(
+        willHide
+          ? { canvas: canvasFile, id: node.id, property: 'display', value: 'none' }
+          : { canvas: canvasFile, id: node.id, property: 'display', reset: true }
+      ),
+    }).catch(() => {});
+    // Record onto the canvas undo stack (Cmd+Z), same as any other inline CSS
+    // edit — fire-and-forget alongside the POST above, mirroring CssKnobs'
+    // commit()/reset() (which don't gate the record on the fetch resolving).
+    onRecordEdit?.({
+      op: 'css',
+      canvas: canvasFile,
+      id: node.id,
+      key: 'display',
+      before: wasHidden ? 'none' : null,
+      after: willHide ? 'none' : null,
     });
   };
   // `selected` may be a single element, an array (multi-select), or null.
@@ -5835,6 +6444,30 @@ function InspectorPanel({
           <StIcon name="x" size={14} />
         </button>
       </div>
+      {/* Stage H (INV-3) — edit-scope strip: is an edit local to this element or
+          shared across N rendered places? Visible across every tab so it's never
+          a surprise. Only for a single element selection with a resolved verdict. */}
+      {el?.id && !(Array.isArray(selected) && selected.length > 1) && editScope ? (
+        <div
+          className={`st-scope st-scope--${editScope.scope}`}
+          title={
+            editScope.scope === 'shared'
+              ? `Editing this element's style changes ${editScope.affects} place${
+                  editScope.affects === 1 ? '' : 's'
+                }${
+                  editScope.componentName ? ` (component ${editScope.componentName})` : ''
+                }. Move/resize a whole instance to keep it local.`
+              : 'This edit affects only this element.'
+          }
+        >
+          <span className="st-scope-dot" aria-hidden="true" />
+          {editScope.scope === 'shared'
+            ? `Shared${editScope.componentName ? ` · ${editScope.componentName}` : ''} · edits ${
+                editScope.affects
+              } place${editScope.affects === 1 ? '' : 's'}`
+            : 'Local · this element only'}
+        </div>
+      ) : null}
       <div className="st-rp-body">
         {!el ? (
           <div className="st-rp-empty">
@@ -5920,7 +6553,7 @@ function InspectorPanel({
                       selectedId={el.id}
                       selectedIndex={el.index}
                       collapsed={collapsed}
-                      hidden={hiddenLayers}
+                      hiddenOverride={hiddenOverride}
                       onToggle={toggleCollapse}
                       onSelect={(node) => {
                         onSelectLayer?.(node);
@@ -5966,12 +6599,15 @@ function InspectorPanel({
               </div>
             )}
           </>
+        ) : !el.id && resolveArtboardIdFromSelection(el) ? (
+          <ArtboardKnobs el={el} onResizeArtboard={onResizeArtboard} />
         ) : (
           <CssKnobs
             el={el}
             cfg={cfg}
             onOptimistic={onOptimistic}
             onRecordEdit={onRecordEdit}
+            onReplaceMedia={onReplaceMedia}
             onUndoRedo={onUndoRedo}
           />
         )}
@@ -5995,6 +6631,32 @@ function App() {
   useEffect(() => {
     selectedRef.current = selected;
   }, [selected]);
+
+  // Stage H (INV-3) — resolve the edit-scope (local vs shared component instance)
+  // for the current single selection so the Inspector can show whether an edit
+  // stays here or changes N places. Read-only GET, debounced by the selection id;
+  // aborts a stale in-flight fetch when the selection changes. Fetched with
+  // rendered=1 (source-usage-driven; the .map() refinement is a follow-up).
+  const [editScope, setEditScope] = useState(null);
+  useEffect(() => {
+    const one = Array.isArray(selected) ? (selected.length === 1 ? selected[0] : null) : selected;
+    const id = one && typeof one.id === 'string' ? one.id : null;
+    if (!id || !activePath) {
+      setEditScope(null);
+      return;
+    }
+    const ac = new AbortController();
+    const q = new URLSearchParams({ canvas: activePath, id });
+    fetch(`/_api/edit-scope?${q}`, { signal: ac.signal })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((j) => {
+        if (j?.ok) setEditScope(j);
+      })
+      .catch(() => {
+        /* aborted / offline — leave the last verdict, the badge just won't show */
+      });
+    return () => ac.abort();
+  }, [selected, activePath]);
   // feature-acp-context-hardening — halo re-apply retry ladder. A single
   // select-by-id post races the fresh iframe: dgn:'loaded' fires from the
   // inline inspector script at HTML-parse time, BEFORE the React canvas-shell
@@ -6039,6 +6701,14 @@ function App() {
   // (same freshness idiom as selectedRef; avoids a render-time TDZ on the
   // later useCallback).
   const reorderLayerRef = useRef(null);
+  // Same freshness idiom for `repositionElement` (defined far below), read
+  // when the in-canvas drag posts dgn:'reposition-request' — the coordinate-
+  // mode commit for out-of-flow (position:absolute/fixed) elements.
+  const repositionElementRef = useRef(null);
+  // feature-element-editing-robustness Stage D — sibling ref for `resizeElement`
+  // (defined far below), read when the in-canvas resize overlay posts
+  // dgn:'resize-request' on pointer-up. Same origin-split as reposition.
+  const resizeElementRef = useRef(null);
   // Phase 12.1 — true between a layers-panel reorder and the fresh layers-tree
   // landing. A reorder churns positional data-cd-ids, so a rapid 2nd drag would
   // target stale ids; the Layers tree gates new drags on this until the rebuilt
@@ -6277,6 +6947,33 @@ function App() {
   // Inspector tab is lifted so View ▸ Layers can open the panel ON the Layers
   // tab (the menu item sat disabled as "Phase 12" long after the tab shipped).
   const [inspectorTab, setInspectorTab] = useState('inspect');
+  // feature-element-editing-robustness Stage C — auto-open the Inspector on the
+  // CSS tab when a fresh single selection arrives AND no right panel is already
+  // open. Preference-backed (default ON); disable it in the View menu. Refs keep
+  // the postMessage selection listener stale-closure-safe.
+  const [autoOpenInspector, setAutoOpenInspector] = useState(() => {
+    try {
+      return localStorage.getItem('maude-auto-open-inspector') !== '0';
+    } catch {
+      return true;
+    }
+  });
+  const autoOpenInspectorRef = useRef(autoOpenInspector);
+  useEffect(() => {
+    autoOpenInspectorRef.current = autoOpenInspector;
+    try {
+      localStorage.setItem('maude-auto-open-inspector', autoOpenInspector ? '1' : '0');
+    } catch {
+      /* private mode / storage disabled */
+    }
+  }, [autoOpenInspector]);
+  // Whether ANY right-dock panel is open — the auto-open guard reads this ref so
+  // it never steals focus from an already-open panel (the user's explicit rule).
+  const anyRightPanelOpenRef = useRef(false);
+  useEffect(() => {
+    anyRightPanelOpenRef.current =
+      inspectorOpen || commentsPanelOpen || changesOpen || assistantOpen;
+  }, [inspectorOpen, commentsPanelOpen, changesOpen, assistantOpen]);
   // The right dock holds exactly ONE panel (Changes / Inspector / Comments) at
   // a time — opening any panel REPLACES whatever was there. These two helpers
   // are the single source of that invariant; every open/toggle path routes
@@ -6292,6 +6989,21 @@ function App() {
     // NOTE: the Timeline is a BOTTOM dock (DDR-148), NOT part of the right-rail
     // mutual-exclusion — it stays open when a right panel opens.
   }, []);
+  // feature-element-editing-robustness Stage C (Task C1) — open the Inspector on
+  // the CSS tab for a fresh SINGLE selection, but only when nothing is already
+  // docked on the right (never override an open Layers/Inspect/Comments panel)
+  // and only when the preference is on. Idempotent: once the inspector is open,
+  // the `anyRightPanelOpen` guard stops it re-firing on the next selection.
+  const maybeAutoOpenInspectorOnSelect = useCallback(
+    (sel) => {
+      if (!autoOpenInspectorRef.current) return;
+      if (!sel || !sel.id) return; // need a stable element id to inspect
+      if (anyRightPanelOpenRef.current) return; // don't steal from an open panel
+      openRightPanel('inspector');
+      setInspectorTab('css');
+    },
+    [openRightPanel]
+  );
   // Functional updates so this is stale-closure-safe inside the keydown /
   // postMessage listeners; opening always clears the sibling panels.
   const toggleRightPanel = useCallback((which) => {
@@ -7560,6 +8272,7 @@ function App() {
       if (m.dgn === 'select' && m.selection) {
         wsSend({ type: 'select', selection: m.selection });
         setSelected(m.selection);
+        maybeAutoOpenInspectorOnSelect(m.selection); // Stage C
       } else if (m.dgn === 'select-set') {
         // Canvas multi-select. Payload shape:
         //   null              → empty selection
@@ -7576,9 +8289,12 @@ function App() {
           const head = payload[0] ?? null;
           if (head) wsSend({ type: 'select', selection: head });
           setSelected(head);
+          // Stage C — auto-open only for a genuine SINGLE selection, never multi.
+          if (payload.length === 1) maybeAutoOpenInspectorOnSelect(head);
         } else {
           wsSend({ type: 'select', selection: payload });
           setSelected(payload);
+          maybeAutoOpenInspectorOnSelect(payload); // Stage C
         }
       } else if (m.dgn === 'clear-select') {
         wsSend({ type: 'clear-select' });
@@ -7739,6 +8455,175 @@ function App() {
             refIndex: Number.isInteger(m.refIndex) ? m.refIndex : undefined,
           });
         }
+      } else if (m.dgn === 'reposition-request') {
+        // Free-XY reposition for out-of-flow elements (position:absolute/
+        // fixed) — the in-canvas drag switches from reorder-mode to
+        // coordinate-mode when the dragged element is out of flow, because
+        // reordering an absolute/fixed element's JSX siblings never changes
+        // where it paints (the "moves then snaps back" RCA). Same trust
+        // model + confused-deputy guard as reorder-request: untrusted canvas
+        // REQUESTS, shell WRITES, pinned to the ACTIVE canvas (never
+        // `m.canvas`, which an untrusted iframe could spoof).
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        const okShape =
+          typeof m.id === 'string' &&
+          Number.isFinite(m.left) &&
+          Number.isFinite(m.top) &&
+          Number.isFinite(m.beforeLeft) &&
+          Number.isFinite(m.beforeTop);
+        if (e.source === activeWin && okShape) {
+          repositionElementRef.current?.(
+            m.id,
+            m.left,
+            m.top,
+            m.beforeLeft,
+            m.beforeTop,
+            Number.isInteger(m.idIndex) ? m.idIndex : undefined
+          );
+        }
+      } else if (m.dgn === 'resize-request') {
+        // feature-element-editing-robustness Stage D — in-canvas drag-resize
+        // commit. Same trust model + confused-deputy guard as reposition-request:
+        // untrusted canvas REQUESTS, shell WRITES, pinned to the ACTIVE canvas
+        // (never `m.canvas`). Payload: { id, patch:{width,height,left?,top?},
+        // before:{width,height,left,top} } — px strings, before values null when
+        // the prop was unset (reset on undo).
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        const okShape =
+          typeof m.id === 'string' && m.patch && typeof m.patch === 'object';
+        if (e.source === activeWin && okShape) {
+          resizeElementRef.current?.(
+            m.id,
+            m.patch,
+            m.before,
+            Number.isInteger(m.idIndex) ? m.idIndex : undefined
+          );
+        }
+      } else if (m.dgn === 'delete-request') {
+        // feature-element-editing-robustness Stage I — delete an element (Del key
+        // / context menu / toolbar in the canvas). Same confused-deputy guard as
+        // reorder/reposition/resize: untrusted canvas REQUESTS, shell WRITES,
+        // pinned to the ACTIVE canvas (never `m.canvas`).
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source === activeWin && typeof m.id === 'string') {
+          deleteElementShellRef.current?.(m.id, Number.isInteger(m.idIndex) ? m.idIndex : undefined);
+        }
+      } else if (m.dgn === 'duplicate-request') {
+        // Cmd+D (Task L3) — duplicate the selected element. Confused-deputy gated
+        // + pinned to the active canvas, like the other structural verbs.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source === activeWin && typeof m.id === 'string') {
+          duplicateElementShellRef.current?.(
+            m.id,
+            Number.isInteger(m.idIndex) ? m.idIndex : undefined
+          );
+        }
+      } else if (m.dgn === 'copy-style') {
+        // Task L4 — capture the current selection's authored style (shell-side).
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source === activeWin) copyStyleRef.current?.();
+      } else if (m.dgn === 'paste-style') {
+        // Task L4 — apply the copied style to the target element.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source === activeWin && typeof m.id === 'string') pasteStyleRef.current?.(m.id);
+      } else if (m.dgn === 'insert-request') {
+        // Stage I3 — insert a synthesized div/text/image relative to `refId`.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        const okShape =
+          typeof m.refId === 'string' &&
+          (m.kind === 'div' || m.kind === 'text' || m.kind === 'image') &&
+          (m.position === 'before' ||
+            m.position === 'after' ||
+            m.position === 'inside-start' ||
+            m.position === 'inside-end');
+        if (e.source === activeWin && okShape) {
+          insertElementShellRef.current?.(m.refId, m.position, m.kind, {
+            src: typeof m.src === 'string' ? m.src : undefined,
+            refIndex: Number.isInteger(m.refIndex) ? m.refIndex : undefined,
+          });
+        }
+      } else if (m.dgn === 'insert-image-request') {
+        // Stage F/I3 — "Insert ▸ Image" from the canvas context menu. An image
+        // needs a contained asset src, so the shell opens the AssetPicker; the
+        // pick then drives insertElementShell(kind:'image'). Confused-deputy
+        // gated + pinned to the active canvas like the other request verbs.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        const okShape =
+          typeof m.refId === 'string' &&
+          (m.position === 'before' ||
+            m.position === 'after' ||
+            m.position === 'inside-start' ||
+            m.position === 'inside-end');
+        if (e.source === activeWin && okShape) {
+          openAssetPickerRef.current?.({
+            purpose: 'insert-image',
+            canvas: activePath,
+            refId: m.refId,
+            position: m.position,
+            refIndex: Number.isInteger(m.refIndex) ? m.refIndex : undefined,
+          });
+        }
+      } else if (m.dgn === 'replace-media-request') {
+        // Stage F2 — "Replace image…" from the canvas context menu. Opens the
+        // AssetPicker in replace mode; the pick re-points src via edit-attr. The
+        // context menu supplies the current src as the undo before-value.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source === activeWin && typeof m.id === 'string') {
+          openAssetPickerRef.current?.({
+            purpose: 'replace-src',
+            canvas: activePath,
+            id: m.id,
+            before: typeof m.before === 'string' ? m.before : null,
+          });
+        }
+      } 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
+        // the canvas (no data-cd-id to ride edit-attr — the annotation model owns
+        // its own strokes, so the canvas iframe performs the write itself).
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source === activeWin && typeof m.id === 'string') {
+          openAssetPickerRef.current?.({
+            purpose: 'replace-annotation-media',
+            canvas: activePath,
+            id: m.id,
+            before: typeof m.before === 'string' ? m.before : null,
+          });
+        }
+      } else if (m.dgn === 'insert-artboard-request') {
+        // Stage I4 — insert a new empty artboard from a screen-size preset.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        const okShape =
+          typeof m.id === 'string' &&
+          Number.isFinite(m.width) &&
+          Number.isFinite(m.height);
+        if (e.source === activeWin && okShape) {
+          insertArtboardShellRef.current?.({
+            id: m.id,
+            label: typeof m.label === 'string' ? m.label : m.id,
+            width: m.width,
+            height: m.height,
+          });
+        }
+      } else if (m.dgn === 'resize-artboard-request') {
+        // Stage D4 — free-hand artboard resize (numeric width/height props).
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        const okShape =
+          typeof m.artboardId === 'string' &&
+          (Number.isFinite(m.width) || Number.isFinite(m.height));
+        if (e.source === activeWin && okShape) {
+          resizeArtboardShellRef.current?.(
+            m.artboardId,
+            Number.isFinite(m.width) ? m.width : undefined,
+            Number.isFinite(m.height) ? m.height : undefined
+          );
+        }
+      } else if (m.dgn === 'delete-artboard-request') {
+        // Backspace / context-menu delete of a whole artboard (by its id prop).
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source === activeWin && typeof m.artboardId === 'string') {
+          deleteArtboardShellRef.current?.(m.artboardId);
+        }
       } else if (m.dgn === 'open-inspector') {
         // Phase 12 — context-menu "Inspect" / tool-palette Inspect opens the right panel.
         openRightPanel('inspector');
@@ -8184,6 +9069,536 @@ function App() {
     reorderLayerRef.current = reorderLayer;
   }, [reorderLayer]);
 
+  // Commit an in-canvas coordinate-mode drag (out-of-flow element: absolute/
+  // fixed) as two sequential single-property writes through the SAME
+  // main-origin endpoint the CSS panel already uses (`/_api/edit-css`, Phase
+  // 12 / DDR-103) — no new write surface. `editStyleProp` upserts into the
+  // existing `style={{}}` object, so the second call (top) lands next to the
+  // first (left) rather than clobbering it. Serialized on the shared
+  // apply-edit chain so it can't race an in-flight write to the same file.
+  const repositionElement = useCallback(
+    (id, left, top, beforeLeft, beforeTop, idIndex) => {
+      if (!id || !activePath) return;
+      const canvas = activePath;
+      // Stage H3 — when the dragged target is a whole component INSTANCE the canvas
+      // passes its DOM-occurrence index; the server routes the left/top write to
+      // that instance's own `<Component/>` usage so moving one instance stays local.
+      const occ = Number.isInteger(idIndex) ? idIndex : undefined;
+      // INV-2 (DDR-105) — arm the reload-suppression window BEFORE the edit-css
+      // writes so the HMR reload is skipped and the canvas doesn't remount + drop
+      // the selection (dogfood: "když pohnu elementem myší, ztratím focus"). Same
+      // fix as resizeElement; also covers the keyboard nudge (L1) which reuses this.
+      applyOptimisticStyle({ id, prop: 'left', value: `${left}px` });
+      applyOptimisticStyle({ id, prop: 'top', value: `${top}px` });
+      const writeProp = (property, value) =>
+        fetch('/_api/edit-css', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ canvas, id, property, value: `${value}px`, idIndex: occ }),
+        }).then((r) => r.json().catch(() => ({})));
+      editApplyChainRef.current = editApplyChainRef.current
+        .catch(() => {})
+        .then(() => writeProp('left', left))
+        .then((j1) => {
+          if (!j1.ok) throw new Error(j1.error || 'left write failed');
+          return writeProp('top', top);
+        })
+        .then((j2) => {
+          if (!j2.ok) throw new Error(j2.error || 'top write failed');
+          // Record BOTH properties onto the canvas undo stack — two Cmd+Z
+          // steps (top, then left), same as committing two CSS knobs by hand.
+          recordSourceEdit({
+            op: 'css',
+            canvas,
+            id,
+            key: 'left',
+            before: `${beforeLeft}px`,
+            after: `${left}px`,
+          });
+          recordSourceEdit({
+            op: 'css',
+            canvas,
+            id,
+            key: 'top',
+            before: `${beforeTop}px`,
+            after: `${top}px`,
+          });
+        })
+        .catch((err) => {
+          console.warn('[reposition]', err?.message || err);
+          // Nothing (or only `left`) persisted — tell the canvas to restore
+          // the pre-drag inline style so a phantom move doesn't linger.
+          postToActiveCanvas({ dgn: 'reposition-failed' });
+        });
+    },
+    [activePath, postToActiveCanvas, recordSourceEdit, applyOptimisticStyle]
+  );
+  useEffect(() => {
+    repositionElementRef.current = repositionElement;
+  }, [repositionElement]);
+
+  // feature-element-editing-robustness Stage D (Task D3) — commit an in-canvas
+  // drag-resize. `patch` = { width, height, left?, top? } (px strings); left/top
+  // are present only for a top/left-edge drag on an out-of-flow element. Writes
+  // each present property through the SAME main-origin `/_api/edit-css` endpoint
+  // the CSS panel + reposition use (no new write surface), serialized on the
+  // shared apply-edit chain, and records one undo entry per property (as
+  // reposition records left+top). Pinned to `activePath` (never `m.canvas`) —
+  // the confused-deputy guard DDR-138/DDR-054 established for reorder/reposition.
+  const resizeElement = useCallback(
+    (id, patch, before, idIndex) => {
+      if (!id || !activePath || !patch || typeof patch !== 'object') return;
+      const canvas = activePath;
+      const b = before && typeof before === 'object' ? before : {};
+      // Stage H3 — a whole-instance resize carries its DOM-occurrence index so the
+      // width/height/left/top write lands on that instance's own `<Component/>`
+      // 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.
+      const props = [
+        'width',
+        'height',
+        'left',
+        'top',
+        'transform',
+        'padding-top',
+        'padding-right',
+        'padding-bottom',
+        'padding-left',
+        'gap',
+      ].filter((p) => typeof patch[p] === 'string' && patch[p]);
+      if (!props.length) return;
+      // Dogfood 2026-07-07 — "resize paddingu nebo gap" was still deselecting on
+      // completion. `applyOptimisticStyle` was posting {id, prop, value} only —
+      // missing artboardId/index — so the canvas-side `apply-style` handler
+      // resolved the UNSCOPED `[data-cd-id]` selector (dom-selection.ts
+      // `resolveSelectionEl`/`scopedCdSelector`), which is a latent multi-
+      // artboard/reused-component miss. Pull the current selection's own
+      // artboardId/index (when it matches `id`) so every optimistic apply +
+      // the belt-and-suspenders reselect below target the SAME instance.
+      const curSel = selectedRef.current;
+      const curOne = Array.isArray(curSel)
+        ? curSel.length === 1
+          ? curSel[0]
+          : null
+        : curSel;
+      const selArtboardId = curOne && curOne.id === id ? (curOne.artboardId ?? null) : null;
+      const selIndex = curOne && curOne.id === id ? (curOne.index ?? 0) : 0;
+      // INV-2 (DDR-105) — arm the reload-suppression window BEFORE the edit-css
+      // writes so the follow-up HMR is skipped. Without this the canvas remounts
+      // and drops the selection (the "resize deselects the element" dogfood bug).
+      for (const p of props) {
+        applyOptimisticStyle({
+          id,
+          artboardId: selArtboardId,
+          index: selIndex,
+          prop: p,
+          value: patch[p],
+        });
+      }
+      const writeProp = (property, value) =>
+        fetch('/_api/edit-css', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ canvas, id, property, value, idIndex: occ }),
+        }).then((r) => r.json().catch(() => ({})));
+      let chain = editApplyChainRef.current.catch(() => {});
+      for (const p of props) {
+        chain = chain.then((prev) => {
+          if (prev && prev.ok === false) throw new Error(prev.error || `${p} write failed`);
+          return writeProp(p, patch[p]);
+        });
+      }
+      editApplyChainRef.current = chain
+        .then((last) => {
+          if (last && last.ok === false) throw new Error(last.error || 'resize write failed');
+          // Record one undo entry per written property (each Cmd+Z reverts one).
+          for (const p of props) {
+            recordSourceEdit({ op: 'css', canvas, id, key: p, before: b[p] ?? null, after: patch[p] });
+          }
+          // Dogfood 2026-07-07 — belt-and-suspenders reselect, mirroring the
+          // structural ops' `pendingReorderRef` re-settle. The DDR-105 suppression
+          // window should make this a no-op (no reload → the selection was never
+          // lost) — idempotent per `scheduleHaloRestore`'s own doc comment, so it's
+          // safe to always fire, and it's the backstop if suppression ever misses
+          // (a slow FS-watcher round trip past the 1.5s window, for example).
+          scheduleHaloRestore({ id, file: canvas, artboardId: selArtboardId, index: selIndex });
+        })
+        .catch((err) => {
+          console.warn('[resize]', err?.message || err);
+          // Nothing (or only a prefix) persisted — tell the canvas to restore the
+          // pre-drag inline style so a phantom resize doesn't linger.
+          postToActiveCanvas({ dgn: 'resize-failed' });
+        });
+    },
+    [activePath, postToActiveCanvas, recordSourceEdit, applyOptimisticStyle, scheduleHaloRestore]
+  );
+  useEffect(() => {
+    resizeElementRef.current = resizeElement;
+  }, [resizeElement]);
+
+  // feature-element-editing-robustness Stage I — general element structural edits
+  // (delete / insert element / insert artboard) + Stage D4 (artboard resize).
+  // Each is a main-origin-only write the untrusted canvas can only REQUEST over
+  // the dgn:* bus; the shell performs it, pinned to `activePath` (confused-deputy
+  // guard, DDR-054/138). Undo reuses the reorder command's whole-file seq revert
+  // (record-edit op:'reorder') — a structural edit renumbers positional ids, so an
+  // inverse descriptor goes stale (same reason reorder uses the server seq log).
+  const structuralWriteRef = useRef(null);
+  const structuralWrite = useCallback(
+    (route, body, { label, onOk, onFail } = {}) => {
+      if (!activePath) return;
+      const canvas = activePath;
+      editApplyChainRef.current = editApplyChainRef.current
+        .catch(() => {})
+        .then(() =>
+          fetch(route, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ ...body, canvas }),
+          })
+            .then((r) => r.json().catch(() => ({})))
+            .then((j) => {
+              if (!j.ok) {
+                console.warn(`[${route}]`, j.error || 'failed');
+                onFail?.(j);
+                return;
+              }
+              if (typeof j.seq === 'number') {
+                postToActiveCanvas({
+                  dgn: 'record-edit',
+                  payload: { op: 'reorder', canvas, seq: j.seq, label: label || 'edit' },
+                });
+              }
+              onOk?.(j, canvas);
+            })
+            .catch((err) => onFail?.({ error: err?.message }))
+        );
+    },
+    [activePath, postToActiveCanvas]
+  );
+  useEffect(() => {
+    structuralWriteRef.current = structuralWrite;
+  }, [structuralWrite]);
+
+  const deleteElementShell = useCallback(
+    (id, idIndex) => {
+      // After the delete lands + HMR reloads, clear the (now-gone) selection.
+      structuralWrite(
+        '/_api/delete-element',
+        { id, idIndex: Number.isInteger(idIndex) ? idIndex : undefined },
+        { label: 'delete element', onOk: () => postToActiveCanvas({ dgn: 'selection-clear' }) }
+      );
+    },
+    [structuralWrite, postToActiveCanvas]
+  );
+
+  const insertElementShell = useCallback(
+    (refId, position, kind, opts = {}) => {
+      structuralWrite(
+        '/_api/insert-element',
+        {
+          refId,
+          position,
+          kind,
+          src: typeof opts.src === 'string' ? opts.src : undefined,
+          refIndex: Number.isInteger(opts.refIndex) ? opts.refIndex : undefined,
+        },
+        {
+          label: `insert ${kind}`,
+          // Select the new element once the HMR reload lands (its id is stamped
+          // on transpile — best-effort, like reorder's pendingReorderRef).
+          onOk: (j, canvas) => {
+            if (j.newId) pendingReorderRef.current = { file: canvas, movedId: j.newId, artboardId: null };
+          },
+        }
+      );
+    },
+    [structuralWrite]
+  );
+
+  const duplicateElementShell = useCallback(
+    (id, idIndex) => {
+      structuralWrite(
+        '/_api/duplicate-element',
+        { id, idIndex: Number.isInteger(idIndex) ? idIndex : undefined },
+        {
+          label: 'duplicate element',
+          // Select the copy once the HMR reload lands (best-effort, like insert).
+          onOk: (j, canvas) => {
+            if (j.newId) pendingReorderRef.current = { file: canvas, movedId: j.newId, artboardId: null };
+          },
+        }
+      );
+    },
+    [structuralWrite]
+  );
+
+  // Task L4 — copy-style / paste-style. Captures a selection's AUTHORED inline
+  // styles (not resolved/computed, so DS-token + inherited values aren't baked in)
+  // minus layout/geometry props, then applies them to another element via chained
+  // edit-css writes (one per prop, like resize — N-step undo). Clipboard lives in
+  // the shell so it survives selection + canvas changes.
+  const copiedStyleRef = useRef(null);
+  // Appearance-only: exclude position/size/margin so paste-style copies the LOOK,
+  // not the layout (Figma parity — padding/color/border/shadow/font/… carry over).
+  const PASTE_STYLE_EXCLUDE = useMemo(
+    () =>
+      new Set([
+        'position',
+        'top',
+        'right',
+        'bottom',
+        'left',
+        'inset',
+        'width',
+        'height',
+        'min-width',
+        'max-width',
+        'min-height',
+        'max-height',
+        'margin',
+        'margin-top',
+        'margin-right',
+        'margin-bottom',
+        'margin-left',
+      ]),
+    []
+  );
+  const copyStyle = useCallback(() => {
+    const sel = selectedRef.current;
+    const one = Array.isArray(sel) ? (sel.length === 1 ? sel[0] : null) : sel;
+    if (!one) return;
+    const map = {};
+    for (const [k, v] of Object.entries(one.authored || {})) {
+      if (!PASTE_STYLE_EXCLUDE.has(k)) map[k] = v;
+    }
+    for (const [k, v] of Object.entries(one.customStyles || {})) {
+      if (!PASTE_STYLE_EXCLUDE.has(k)) map[k] = v;
+    }
+    copiedStyleRef.current = Object.keys(map).length ? map : null;
+  }, [PASTE_STYLE_EXCLUDE]);
+  const pasteStyle = useCallback(
+    (id) => {
+      const canvas = activePath;
+      const map = copiedStyleRef.current;
+      if (!canvas || !id || !map) return;
+      const entries = Object.entries(map);
+      let chain = editApplyChainRef.current.catch(() => {});
+      for (const [property, value] of entries) {
+        applyOptimisticStyle({ id, prop: property, value }); // preview + arm no-flicker
+        chain = chain.then(() =>
+          fetch('/_api/edit-css', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ canvas, id, property, value }),
+          })
+            .then((r) => r.json().catch(() => ({})))
+            .then((j) => {
+              if (j.ok)
+                recordSourceEdit({ op: 'css', canvas, id, key: property, before: null, after: value });
+            })
+            .catch(() => {})
+        );
+      }
+      editApplyChainRef.current = chain;
+    },
+    [activePath, applyOptimisticStyle, recordSourceEdit]
+  );
+
+  const insertArtboardShell = useCallback(
+    ({ id, label, width, height }) => {
+      structuralWrite(
+        '/_api/insert-artboard',
+        { id, label, width, height },
+        { label: 'insert artboard' }
+      );
+    },
+    [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(
+        '/_api/resize-artboard',
+        { artboardId, width, height },
+        {
+          label: 'resize artboard',
+          // Stage D4 — the resize overlay applies a live inline-style preview
+          // 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' }),
+        }
+      );
+    },
+    [structuralWrite, postToActiveCanvas]
+  );
+
+  const deleteArtboardShell = useCallback(
+    (artboardId) => {
+      structuralWrite('/_api/delete-artboard', { artboardId }, { label: 'delete artboard' });
+    },
+    [structuralWrite]
+  );
+  // Refs the (stale-closure) onMessage handlers below read.
+  const deleteElementShellRef = useRef(null);
+  const insertElementShellRef = useRef(null);
+  const insertArtboardShellRef = useRef(null);
+  const resizeArtboardShellRef = useRef(null);
+  const deleteArtboardShellRef = useRef(null);
+  const duplicateElementShellRef = useRef(null);
+  const copyStyleRef = useRef(null);
+  const pasteStyleRef = useRef(null);
+  useEffect(() => {
+    deleteElementShellRef.current = deleteElementShell;
+    insertElementShellRef.current = insertElementShell;
+    insertArtboardShellRef.current = insertArtboardShell;
+    resizeArtboardShellRef.current = resizeArtboardShell;
+    deleteArtboardShellRef.current = deleteArtboardShell;
+    duplicateElementShellRef.current = duplicateElementShell;
+    copyStyleRef.current = copyStyle;
+    pasteStyleRef.current = pasteStyle;
+  }, [
+    deleteElementShell,
+    insertElementShell,
+    insertArtboardShell,
+    resizeArtboardShell,
+    deleteArtboardShell,
+    duplicateElementShell,
+    copyStyle,
+    pasteStyle,
+  ]);
+
+  // Shell-level Backspace/Delete guard. CRITICAL: in the Tauri desktop app, an
+  // unhandled Backspace triggers WKWebView back-navigation, which reloads the
+  // WHOLE app to "Starting…" (dogfood crash). When an artboard is selected, focus
+  // sits on the shell (not the canvas iframe), so the in-canvas key handler never
+  // sees the keydown — the shell must catch it. Preventing the default here stops
+  // the back-nav universally; if a single artboard is the selection, also delete
+  // it (Backspace parity with the context menu). Element delete stays in the
+  // canvas iframe (which has focus when an element is selected; its keydown never
+  // reaches this window, so there's no double-handling).
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key !== 'Backspace' && e.key !== 'Delete') return;
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      const t = e.target;
+      const editable =
+        t &&
+        (t.tagName === 'INPUT' ||
+          t.tagName === 'TEXTAREA' ||
+          t.tagName === 'SELECT' ||
+          t.isContentEditable);
+      if (editable) return;
+      if (!activePath || activePath === SYSTEM_TAB) return;
+      e.preventDefault();
+      const one = Array.isArray(selected) ? (selected.length === 1 ? selected[0] : null) : selected;
+      if (one?.artboardId && !one.id) deleteArtboardShell(one.artboardId);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [activePath, selected, deleteArtboardShell]);
+
+  // feature-element-editing-robustness Stage F — AssetPicker request. `req` is
+  // { purpose:'insert-image', refId, position, refIndex } (Insert ▸ Image) or
+  // { purpose:'replace-src', id, before } (Media-section "Replace…"). null = closed.
+  const [assetPickerReq, setAssetPickerReq] = useState(null);
+  const openAssetPickerRef = useRef(null);
+  useEffect(() => {
+    openAssetPickerRef.current = (req) => setAssetPickerReq(req);
+  }, []);
+  const onAssetPicked = useCallback(
+    (pickedPath) => {
+      const req = assetPickerReq;
+      setAssetPickerReq(null);
+      if (!req || !pickedPath) return;
+      // G3 security (DDR-152) — the request captured refId/id against the canvas
+      // that was active when the picker opened; if the user switched canvases
+      // while the modal was up, those ids are meaningless (or worse, collide) on
+      // the now-active canvas. Abort rather than write to the wrong file.
+      if (req.canvas && req.canvas !== activePath) {
+        console.warn('[asset-picker] active canvas changed since request — aborting');
+        return;
+      }
+      if (req.purpose === 'insert-image') {
+        insertElementShell(req.refId, req.position || 'after', 'image', {
+          src: pickedPath,
+          refIndex: req.refIndex,
+        });
+        return;
+      }
+      if (req.purpose === 'replace-src') {
+        // Re-point an authored <img>/<video> src via /_api/edit-attr (+ undo).
+        const canvas = activePath;
+        if (!canvas || !req.id) return;
+        editApplyChainRef.current = editApplyChainRef.current
+          .catch(() => {})
+          .then(() =>
+            fetch('/_api/edit-attr', {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify({ canvas, id: req.id, attr: 'src', value: pickedPath }),
+            })
+              .then((r) => r.json().catch(() => ({})))
+              .then((j) => {
+                if (j.ok) {
+                  recordSourceEdit({
+                    op: 'attr',
+                    canvas,
+                    id: req.id,
+                    key: 'src',
+                    before: req.before ?? null,
+                    after: pickedPath,
+                  });
+                } else {
+                  console.warn('[replace-src]', j.error || 'failed');
+                }
+              })
+              .catch(() => {})
+          );
+        return;
+      }
+      if (req.purpose === 'replace-annotation-media') {
+        // Stage F3 — relay the picked path DOWN to the canvas; the annotation
+        // model owns its own strokes + persistence + undo (`commitStrokes`), so
+        // unlike `replace-src` the shell performs no write of its own here.
+        postToActiveCanvas({ dgn: 'replace-annotation-media', id: req.id, path: pickedPath });
+      }
+    },
+    [assetPickerReq, insertElementShell, activePath, recordSourceEdit, postToActiveCanvas]
+  );
+  // Media-section "Replace…" (CssKnobs) → open the picker in replace mode with
+  // the element's current src as the undo before-value (captured from the
+  // Selection's `attrs.src`, not the resolved URL).
+  const onReplaceMedia = useCallback(
+    (elSel) => {
+      if (!elSel?.id) return;
+      setAssetPickerReq({
+        purpose: 'replace-src',
+        canvas: activePath,
+        id: elSel.id,
+        before: elSel.attrs?.src ?? null,
+      });
+    },
+    [activePath]
+  );
+
   const resolveComment = useCallback((id) => {
     wsSend({ type: 'comments-patch', id, patch: { status: 'resolved' } });
   }, []);
@@ -8653,6 +10068,9 @@ function App() {
           inspectorOpen={inspectorOpen}
           inspectorTab={inspectorTab}
           onToggleInspector={() => toggleRightPanel('inspector')}
+          autoOpenInspector={autoOpenInspector}
+          onToggleAutoOpenInspector={() => setAutoOpenInspector((v) => !v)}
+          onInsertArtboard={onInsertArtboard}
           timelineOpen={timelineOpen}
           onToggleTimeline={toggleTimeline}
           hasComps={activeComps.length > 0}
@@ -8810,8 +10228,12 @@ function App() {
               onClose={() => setInspectorOpen(false)}
               onOptimistic={applyOptimisticStyle}
               onRecordEdit={recordSourceEdit}
+              onReplaceMedia={onReplaceMedia}
+              onResizeArtboard={resizeArtboardShell}
+              editScope={editScope}
               onUndoRedo={(dir) => postToActiveCanvas({ dgn: dir })}
               layersTree={layersTree}
+              canvasFile={activePath}
               onSelectLayer={(n) =>
                 postToActiveCanvas({
                   dgn: 'select-by-id',
@@ -9266,6 +10688,13 @@ function App() {
           onClose={() => setExportDialog(null)}
         />
       )}
+      {assetPickerReq && (
+        <AssetPicker
+          designRel={(cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '')}
+          onPick={onAssetPicked}
+          onClose={() => setAssetPickerReq(null)}
+        />
+      )}
       {diffTarget && (
         <DiffView
           target={diffTarget}