@1agh/maude 0.39.1 → 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';
@@ -19,8 +20,17 @@ import GitPanel from './panels/GitPanel.jsx';
 import IdentityBar from './panels/IdentityBar.jsx';
 import OnboardingWizard from './panels/OnboardingWizard.jsx';
 import { ReadinessDialog } from './panels/ReadinessList.jsx';
+import TimelinePanel from './panels/TimelinePanel.jsx';
+import { parseCompTimeline } from './panels/timeline-parse.js';
 import RepoBranchSwitcher from './panels/RepoBranchSwitcher.jsx';
-import { appIsFirstRun, isNativeApp, onUpdateReady, restartToUpdate } from './github.js';
+import {
+  appIsFirstRun,
+  isNativeApp,
+  onUpdateReady,
+  pickMediaFile,
+  restartToUpdate,
+  saveExport,
+} from './github.js';
 import { COLLAB_TOUR } from './tour/collab-tour.js';
 import { TourOverlay } from './tour/overlay.jsx';
 import { USAGE_TOUR } from './tour/usage-tour.js';
@@ -92,6 +102,33 @@ function basename(p) {
   return p.split('/').pop();
 }
 
+// DDR-150 dogfood — a transient shell toast for timeline/inline-edit op results.
+// The clip ops used to console.warn their failures (a 422 "series clip can't
+// move" looked like "the button does nothing"). Self-contained DOM (no React
+// state), mirrors the canvas-side showCanvasToast.
+function shellToast(message, ok = false) {
+  if (typeof document === 'undefined') return;
+  let el = document.getElementById('st-op-toast');
+  if (!el) {
+    el = document.createElement('div');
+    el.id = 'st-op-toast';
+    el.setAttribute('role', 'status');
+    el.style.cssText =
+      'position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:80;' +
+      'max-width:440px;padding:8px 14px;border-radius:8px;font:12px/1.45 var(--font-mono,monospace);' +
+      'box-shadow:0 8px 28px rgba(0,0,0,.34);pointer-events:none;opacity:0;transition:opacity 140ms ease;';
+    document.body.appendChild(el);
+  }
+  el.style.background = ok ? '#1d3524' : '#3a1d1d';
+  el.style.color = ok ? '#b7e4c0' : '#f1b8b8';
+  el.textContent = message;
+  el.style.opacity = '1';
+  clearTimeout(shellToast._t);
+  shellToast._t = setTimeout(() => {
+    el.style.opacity = '0';
+  }, 3200);
+}
+
 // 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.
@@ -768,6 +805,11 @@ const EXPORT_CARDS = [
   { id: 'svg', label: 'SVG', sub: 'per artboard', icon: 'vector', format: 'svg' },
   { id: 'html', label: 'HTML', sub: 'self-contained', icon: 'code', format: 'html' },
   { id: 'pptx', label: 'PPTX', sub: 'slides', icon: 'presentation', format: 'pptx' },
+  // DDR-148 — temporal formats. Shown only when the active canvas has a
+  // video-comp (`temporal: true` + the hasComps gate in ExportDialog); the
+  // capture engine renders the artboard frame-by-frame.
+  { id: 'mp4', label: 'MP4', sub: 'video · H.264', icon: 'presentation', format: 'mp4', temporal: true },
+  { id: 'gif', label: 'GIF', sub: 'animated', icon: 'image', format: 'gif', temporal: true },
   { id: 'canva', label: 'Canva', sub: 'handoff bundle', icon: 'external', format: 'canva' },
   { id: 'zip', label: 'ZIP', sub: 'project bundle', icon: 'archive', format: 'zip' },
   { id: 'shadcn', label: 'AI handoff', sub: 'production drop', icon: 'sparkle', handoff: true },
@@ -787,6 +829,9 @@ const EXPORT_VALID_SCOPES = {
   svg: ['selection', 'artboard', 'canvas-as-separate'],
   html: ['artboard', 'canvas-as-separate'],
   pptx: ['canvas-as-separate'],
+  mp4: ['artboard'],
+  gif: ['artboard'],
+  webm: ['artboard'],
   canva: ['canvas-as-separate'],
   zip: ['project-raw'],
 };
@@ -796,12 +841,186 @@ const PNG_SCALES = [
   { value: 3, label: '3× (max)' },
 ];
 
-function ExportDialog({ mode, initialScope, activePath, onClose }) {
+// 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,
+  activePath,
+  hasComps = false,
+  activeArtboardId = null,
+  selection = null,
+  onClose,
+}) {
   const [sel, setSel] = useState(mode === 'handoff' ? 'shadcn' : 'png');
   const [scope, setScope] = useState(
     initialScope && EXPORT_SCOPE_LABELS[initialScope] ? initialScope : 'artboard'
   );
   const [scale, setScale] = useState(2);
+  // DDR-148 addendum — mp4/webm of a registered video-comp render through
+  // renderMediaOnWeb, which produces real audio (Remotion owns the
+  // TransitionSeries/volume-closure timeline). gif has no audio track at all
+  // (format limitation, not a toggle), so this only applies to mp4/webm.
+  const [audio, setAudio] = useState(true);
   const [busy, setBusy] = useState(false);
   const [status, setStatus] = useState(null); // { ok, msg }
   const [recent, setRecent] = useState([]);
@@ -847,7 +1066,18 @@ function ExportDialog({ mode, initialScope, activePath, onClose }) {
     }
     setBusy(true);
     setStatus(null);
-    const options = card.format === 'png' ? { scale } : {};
+    // `scale` drives PNG size AND video resolution (deviceScaleFactor → encoder
+    // dims); temporal formats were previously fixed at the tiny native size.
+    const options = card.format === 'png' || card.temporal ? { scale } : {};
+    // Export-with-audio (DDR-148 addendum) — mp4/webm only; gif is silent by
+    // format, so the checkbox never renders for it (see hasAudioToggle below).
+    if (card.format === 'mp4' || card.format === 'webm') options.audio = audio;
+    // Scope targeting hints (resolveScope reads these): `artboardId` makes
+    // "Active artboard" export the right screen instead of `:first-of-type`;
+    // `selection` makes "Current selection" export the selected element. Mirrors
+    // the in-canvas dialog's captureScopeHints.
+    if (activeArtboardId) options.artboardId = activeArtboardId;
+    if (selection?.selector) options.selection = selection;
     try {
       const r = await fetch('/_api/export', {
         method: 'POST',
@@ -863,16 +1093,30 @@ function ExportDialog({ mode, initialScope, activePath, onClose }) {
       const fn = /filename="([^"]+)"/.exec(disp);
       const filename = (fn && fn[1]) || `export.${card.format}`;
       const blob = await r.blob();
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = filename;
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-      URL.revokeObjectURL(url);
-      setStatus({ ok: true, msg: `Exported ${filename}` });
-      loadRecent();
+      if (isNativeApp()) {
+        // Native: WKWebView swallows the `<a download>` blob (the file lands in
+        // an unknown default with no prompt). Route through a real OS save dialog
+        // so the export OFFERS a location. Cancel → soft no-op.
+        const bytes = Array.from(new Uint8Array(await blob.arrayBuffer()));
+        const savedPath = await saveExport(filename, bytes);
+        if (savedPath) {
+          setStatus({ ok: true, msg: `Saved to ${savedPath}` });
+          loadRecent();
+        } else {
+          setStatus({ ok: true, msg: 'Save cancelled' });
+        }
+      } else {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        URL.revokeObjectURL(url);
+        setStatus({ ok: true, msg: `Exported ${filename}` });
+        loadRecent();
+      }
     } catch (err) {
       setStatus({ ok: false, msg: err && err.message ? err.message : String(err) });
     }
@@ -901,7 +1145,7 @@ function ExportDialog({ mode, initialScope, activePath, onClose }) {
               : 'Format'}
           </div>
           <div className="st-fmt-grid">
-            {EXPORT_CARDS.map((c) => (
+            {EXPORT_CARDS.filter((c) => !c.temporal || hasComps).map((c) => (
               <button
                 type="button"
                 key={c.id}
@@ -936,10 +1180,10 @@ function ExportDialog({ mode, initialScope, activePath, onClose }) {
               </select>
             </div>
           )}
-          {!card.handoff && card.format === 'png' && (
+          {!card.handoff && (card.format === 'png' || card.temporal) && (
             <div className="st-dialog-row">
               <label className="st-dialog-lbl" htmlFor="st-export-size">
-                Size
+                {card.temporal ? 'Resolution' : 'Size'}
               </label>
               <select
                 id="st-export-size"
@@ -960,6 +1204,28 @@ function ExportDialog({ mode, initialScope, activePath, onClose }) {
               Resolution multiplier — {scale}× ≈ {1440 * scale}×{900 * scale} for a 1440×900 artboard.
             </div>
           )}
+          {!card.handoff && card.temporal && (
+            <div className="st-mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
+              {scale}× the artboard's native resolution (e.g. 960×540 → {960 * scale}×{540 * scale}).
+            </div>
+          )}
+          {!card.handoff && (card.format === 'mp4' || card.format === 'webm') && (
+            <div className="st-dialog-row">
+              <label
+                className="st-dialog-lbl"
+                htmlFor="st-export-audio"
+                style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}
+              >
+                <input
+                  id="st-export-audio"
+                  type="checkbox"
+                  checked={audio}
+                  onChange={(e) => setAudio(e.target.checked)}
+                />
+                Export with audio
+              </label>
+            </div>
+          )}
           {card.handoff && (
             <div className="callout callout--info" style={{ fontSize: 12 }}>
               Hands the active canvas off to production. Copies{' '}
@@ -2340,6 +2606,9 @@ function FileDropdown({ onAction, onClose, hasCanvas }) {
       items={[
         // Bare N — the browser reserves ⌘N (New Window) and never delivers it.
         { id: 'new', label: 'New canvas…', shortcut: 'N' },
+        // DDR-150 P4 Task 12 — one-click "udělej z toho video" from the clips
+        // dropped as reference chips on the active canvas.
+        { id: 'assemble', label: 'Assemble dropped clips → video', disabled: !hasCanvas },
         { id: 'export', label: 'Export…', shortcut: '⇧⌘E' },
         { id: 'handoff', label: 'Handoff to production', shortcut: '⇧⌘H' },
         { sep: true },
@@ -2350,7 +2619,7 @@ function FileDropdown({ onAction, onClose, hasCanvas }) {
   );
 }
 
-function EditDropdown({ onAction, onClose }) {
+function EditDropdown({ onAction, onClose, hasCanvas }) {
   return (
     <DropdownMenu
       label="Edit"
@@ -2363,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' },
+            ]
+          : []),
       ]}
     />
   );
@@ -2405,15 +2685,22 @@ function Menubar({
   inspectorOpen,
   inspectorTab,
   onToggleInspector,
+  autoOpenInspector,
+  onToggleAutoOpenInspector,
   onOpenLayers,
+  timelineOpen,
+  onToggleTimeline,
+  hasComps = false,
   assistantOpen,
   onToggleAssistant,
   assistantBusy,
   assistantUnseen,
   onNewCanvas,
+  onAssembleVideo,
   onOpenExport,
   onReload,
   onCloseCanvas,
+  onInsertArtboard,
 }) {
   const isSystem = activePath === SYSTEM_TAB;
   const stamp = isSystem ? 'SYSTEM' : activePath ? 'CANVAS' : 'IDLE';
@@ -2464,6 +2751,22 @@ 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.
+    {
+      id: 'timeline',
+      label: 'Timeline',
+      phase: hasComps ? 'video' : undefined,
+      checked: timelineOpen,
+      disabled: false,
+    },
     // Phase 31 (DDR-123) — native-only ACP chat sidepanel.
     ...(isNativeApp()
       ? [
@@ -2598,6 +2901,7 @@ function Menubar({
           hasCanvas={!!activePath}
           onAction={(id) => {
             if (id === 'new') onNewCanvas?.();
+            else if (id === 'assemble') onAssembleVideo?.();
             else if (id === 'export') onOpenExport?.('export');
             else if (id === 'handoff') onOpenExport?.('handoff');
             else if (id === 'reload') onReload?.();
@@ -2608,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)}
         />
@@ -2628,6 +2935,8 @@ 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?.();
             else if (id === 'minimap') onToggleMinimap?.();
@@ -3515,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',
@@ -3554,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
@@ -4156,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
@@ -4200,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,
   });
@@ -4316,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
@@ -4474,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',
@@ -4483,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',
@@ -4494,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',
@@ -4507,6 +4905,8 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
       'border-color',
       'box-shadow',
       'opacity',
+      'transform',
+      'transform-origin',
     ],
   };
   const resetSection = (name) => {
@@ -4742,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>
@@ -4778,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'))}
         </>
       )}
 
@@ -4817,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))}
         </>
       )}
 
@@ -4850,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',
         <>
@@ -4939,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'))}
         </>
       )}
 
@@ -5204,7 +5792,7 @@ function LayerRow({
   selectedId,
   selectedIndex,
   collapsed,
-  hidden,
+  hiddenOverride,
   onToggle,
   onSelect,
   onHover,
@@ -5221,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
@@ -5314,7 +5902,7 @@ function LayerRow({
               selectedId={selectedId}
               selectedIndex={selectedIndex}
               collapsed={collapsed}
-              hidden={hidden}
+              hiddenOverride={hiddenOverride}
               onToggle={onToggle}
               onSelect={onSelect}
               onHover={onHover}
@@ -5394,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,
@@ -5405,7 +6106,10 @@ function InspectorPanel({
   cfg,
   onOptimistic,
   onRecordEdit,
+  onReplaceMedia,
+  onResizeArtboard,
   onUndoRedo,
+  editScope,
   tab: tabProp,
   onTabChange,
   width,
@@ -5422,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);
@@ -5665,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,
@@ -5673,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.
@@ -5714,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">
@@ -5799,7 +6553,7 @@ function InspectorPanel({
                       selectedId={el.id}
                       selectedIndex={el.index}
                       collapsed={collapsed}
-                      hidden={hiddenLayers}
+                      hiddenOverride={hiddenOverride}
                       onToggle={toggleCollapse}
                       onSelect={(node) => {
                         onSelectLayer?.(node);
@@ -5845,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}
           />
         )}
@@ -5874,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
@@ -5918,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
@@ -5993,15 +6784,15 @@ function App() {
     const cap = setTimeout(() => setLoadingPath(null), 15000);
     return () => clearTimeout(cap);
   }, [loadingPath]);
-  // Loaded once at boot from /_config — informs canvasUrl() so TSX iframes
-  // can pass the right ?designRel + ?tokens query to the canvas mount shell.
+  // Loaded at boot from /_config and re-fetched on the server's
+  // `config-updated` push (config.json hot-reload — /design:setup-ds rewrites
+  // it mid-session) — informs canvasUrl() so TSX iframes can pass the right
+  // ?designRel + ?tokens query to the canvas mount shell.
   const [cfg, setCfg] = useState({ designRel: '.design' });
-  useEffect(() => {
-    let cancelled = false;
+  const loadServerConfig = useCallback(() => {
     fetch('/_config')
       .then((r) => r.json())
       .then((data) => {
-        if (cancelled) return;
         const designRel = (data.designRoot || '.design').replace(/^\/+|\/+$/g, '');
         // Functional merge — the `/_config` and `/_index-data` fetches race, and
         // the latter contributes `canvasDesignSystems` (DDR-093). A full-replace
@@ -6023,10 +6814,10 @@ function App() {
         }));
       })
       .catch(() => {});
-    return () => {
-      cancelled = true;
-    };
   }, []);
+  useEffect(() => {
+    loadServerConfig();
+  }, [loadServerConfig]);
   // Backfill the sync banner on mount from /_sync-status. The 'sync:status' WS
   // broadcast is one-shot for the zero-syncable case (DDR-060 / 9.1-D), so a
   // tab that connects after boot would otherwise miss it. {linked:false} (solo)
@@ -6079,6 +6870,46 @@ function App() {
   // The palette (T4) drives them; the dialog (T5) + panel (T6) consume them.
   const [exportDialog, setExportDialog] = useState(null); // null | { mode: 'export'|'handoff', scope? }
   const [inspectorOpen, setInspectorOpen] = useState(false);
+  // DDR-148 — Timeline panel (right dock) for scrubbing a video-comp. `activeComps`
+  // is populated from the iframe's `timeline-comps` announce; `timelineFrame` from
+  // its live `timeline-frame`. Empty comps ⇒ the panel shows its empty state.
+  const [timelineOpen, setTimelineOpen] = useState(false);
+  const [activeComps, setActiveComps] = useState([]);
+  const [timelineFrame, setTimelineFrame] = useState(0);
+  const [timelinePlaying, setTimelinePlaying] = useState(false);
+  const [timelineLoop, setTimelineLoop] = useState(true);
+  const [timelineMuted, setTimelineMuted] = useState(false);
+  const [timelineVolume, setTimelineVolume] = useState(1);
+  const [timelineHeight, setTimelineHeight] = useState(216);
+  // The artboard nearest the viewport centre (reported by canvas-lib on pan) —
+  // the Timeline follows THIS, so it redraws as you move across the canvas.
+  const [canvasActiveArtboard, setCanvasActiveArtboard] = useState(null);
+  // DDR-148 — parsed sequence/keyframe rows for the Timeline (from raw .tsx).
+  const [timelineSequences, setTimelineSequences] = useState([]);
+  const [timelineAudio, setTimelineAudio] = useState([]);
+  const [timelineTotal, setTimelineTotal] = useState(0);
+  // On a multi-comp canvas the Timeline drives ONE comp (the parser scopes to it
+  // + reports its total). Match that total back to the announced comp id so the
+  // transport/scrub targets ONLY that comp — not every artboard on the canvas.
+  const timelineCompId = useMemo(() => {
+    if (!activeComps.length) return null;
+    const match = activeComps.find((c) => c.durationInFrames === timelineTotal);
+    return (match ?? activeComps[0]).id;
+  }, [activeComps, timelineTotal]);
+  const timelineCompIdRef = useRef(null);
+  useEffect(() => {
+    timelineCompIdRef.current = timelineCompId;
+  }, [timelineCompId]);
+  // The DCArtboard id the timeline scoped to (from parseCompTimeline). Used for
+  // /_api/comp-clips + every clip op so the enumerator targets the SAME comp the
+  // rows came from — `timelineCompId` is the Player's `videocomp-N` id, which
+  // never matches a DCArtboard id and made the enumerator fall back to the wrong
+  // comp on a multi-comp canvas (the showreel badge/replace/op mis-scope).
+  const [timelineArtboardId, setTimelineArtboardId] = useState(null);
+  const timelineArtboardIdRef = useRef(null);
+  useEffect(() => {
+    timelineArtboardIdRef.current = timelineArtboardId;
+  }, [timelineArtboardId]);
   // Phase 31 (DDR-123) — the native ACP chat sidepanel (right dock, native-only).
   const [assistantOpen, setAssistantOpen] = useState(false);
   const [assistantBusy, setAssistantBusy] = useState(false);
@@ -6116,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
@@ -6128,7 +6986,24 @@ function App() {
     setInspectorOpen(which === 'inspector');
     setCommentsPanelOpen(which === 'comments');
     setAssistantOpen(which === 'assistant');
+    // 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) => {
@@ -6170,6 +7045,9 @@ function App() {
       });
     }
   }, []);
+  // DDR-148 — the Timeline is a BOTTOM dock, independent of the right rail: it
+  // toggles on its own and coexists with Inspector/Changes/Comments/Chat.
+  const toggleTimeline = useCallback(() => setTimelineOpen((v) => !v), []);
   const whatsNew = useWhatsNew(MDCC_VERSION);
   // Phase 29 (E4) — first-run onboarding wizard. The native shell boots a minimal
   // "welcome" project on first launch; we ask it whether this is a first run and, if
@@ -6288,6 +7166,269 @@ function App() {
     [activePath]
   );
 
+  // DDR-150 dogfood #7 — a file dragged from Finder and dropped on a shell area
+  // with no drop target used to make the browser NAVIGATE AWAY to the file
+  // (file:// replaces the app). Document-level guard: always cancel the default
+  // for file drags; the TimelinePanel's own onDrop (bubbling before this) still
+  // receives the drop first — this only blocks the browser fallback.
+  useEffect(() => {
+    const isFileDrag = (e) => Array.from(e.dataTransfer?.types ?? []).includes('Files');
+    const onDocDragOver = (e) => {
+      if (isFileDrag(e)) e.preventDefault();
+    };
+    const onDocDrop = (e) => {
+      if (isFileDrag(e)) e.preventDefault();
+    };
+    document.addEventListener('dragover', onDocDragOver);
+    document.addEventListener('drop', onDocDrop);
+    return () => {
+      document.removeEventListener('dragover', onDocDragOver);
+      document.removeEventListener('drop', onDocDrop);
+    };
+  }, []);
+
+  // DDR-150 P3 Task 9 — timeline keyboard shortcuts. Read live state through a
+  // ref so the listener attaches once. Gated on: timeline open + a comp active +
+  // focus NOT in a text field. Space doesn't steal the canvas PAN chord because
+  // that keydown fires inside the focused canvas iframe, never reaching this
+  // top-document listener. Space = play/pause · ←/→ = ±1 frame (Shift = ±1s) ·
+  // Home/End = start/end · ,/. = prev/next keyframe boundary.
+  const tlKeyRef = useRef({});
+  tlKeyRef.current = {
+    open: timelineOpen,
+    comps: activeComps,
+    frame: timelineFrame,
+    total: timelineTotal,
+    playing: timelinePlaying,
+    compId: timelineCompId,
+    muted: timelineMuted,
+    loop: timelineLoop,
+    sequences: timelineSequences,
+    post: postToActiveCanvas,
+    canvas: activePath,
+  };
+
+  // DDR-150 dogfood #1 — Timeline undo/redo. Every successful clip op (move /
+  // trim / remove / insert / z-reorder / replace-src) returns a server `seq`
+  // registered in the whole-file undo log; Cmd+Z / Shift+Cmd+Z replay it via
+  // /_api/reorder-revert (guarded swap — 409s honestly if the canvas diverged).
+  const tlUndoRef = useRef({ undo: [], redo: [] });
+  const pushTlUndo = useCallback((canvas, seq, label) => {
+    if (typeof seq !== 'number') return;
+    tlUndoRef.current.undo.push({ canvas, seq, label });
+    tlUndoRef.current.redo = []; // a new edit invalidates the redo branch
+    if (tlUndoRef.current.undo.length > 50) tlUndoRef.current.undo.shift();
+  }, []);
+  const tlUndoRedo = useCallback((dir) => {
+    const s = tlUndoRef.current;
+    const src = dir === 'undo' ? s.undo : s.redo;
+    const dst = dir === 'undo' ? s.redo : s.undo;
+    const canvas = tlKeyRef.current.canvas;
+    // Last entry for THIS canvas (stacks are global; ops are per-canvas).
+    let idx = -1;
+    for (let i = src.length - 1; i >= 0; i--) {
+      if (src[i].canvas === canvas) {
+        idx = i;
+        break;
+      }
+    }
+    if (idx < 0) {
+      shellToast(dir === 'undo' ? 'Nothing to undo on this timeline.' : 'Nothing to redo.');
+      return;
+    }
+    const entry = src[idx];
+    fetch('/_api/reorder-revert', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ canvas: entry.canvas, seq: entry.seq, dir }),
+    })
+      .then((r) => r.json().catch(() => ({})))
+      .then((j) => {
+        src.splice(idx, 1);
+        if (j?.ok) {
+          dst.push(entry);
+          shellToast(`${dir === 'undo' ? 'Undid' : 'Redid'}: ${entry.label}`, true);
+        } else {
+          // 409 canvas diverged / 404 server restarted — entry is dead, drop it.
+          shellToast(`${dir === 'undo' ? 'Undo' : 'Redo'} skipped: ${j?.error || 'failed'}`);
+        }
+      })
+      .catch(() => shellToast(`${dir === 'undo' ? 'Undo' : 'Redo'} failed: network error`));
+  }, []);
+  useEffect(() => {
+    const onKey = (e) => {
+      const s = tlKeyRef.current;
+      if (!s.open || !s.comps?.length) return;
+      const t = e.target;
+      const tag = t?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || t?.isContentEditable) return;
+      const fps = s.comps[0]?.fps || 30;
+      const total = Math.max(1, s.total);
+      const doSeek = (f) => {
+        const nf = Math.max(0, Math.min(total - 1, Math.round(f)));
+        setTimelineFrame(nf);
+        setTimelinePlaying(false);
+        s.post({ dgn: 'timeline-seek', frame: nf, id: s.compId });
+      };
+      const snapFrames = () => {
+        const pts = new Set([0, total - 1]);
+        for (const seq of s.sequences || []) {
+          pts.add(seq.from);
+          for (const kf of seq.keyframes || []) {
+            pts.add(kf.from);
+            pts.add(kf.to);
+          }
+        }
+        return [...pts].filter((n) => n >= 0 && n < total).sort((a, b) => a - b);
+      };
+      if ((e.metaKey || e.ctrlKey) && (e.key === 'z' || e.key === 'Z')) {
+        // Cmd+Z / Shift+Cmd+Z — undo/redo the last timeline clip op. Only when
+        // the shell (not the canvas iframe) has focus + the timeline is active,
+        // so the canvas's own annotation undo is untouched.
+        e.preventDefault();
+        tlUndoRedo(e.shiftKey ? 'redo' : 'undo');
+        return;
+      }
+      if (e.key === ' ' || e.code === 'Space') {
+        e.preventDefault();
+        if (s.playing) {
+          setTimelinePlaying(false);
+          s.post({ dgn: 'timeline-pause', id: s.compId });
+        } else {
+          setTimelinePlaying(true);
+          s.post({ dgn: 'timeline-mute', muted: s.muted, id: s.compId });
+          s.post({ dgn: 'timeline-loop', loop: s.loop, id: s.compId });
+          s.post({ dgn: 'timeline-play', id: s.compId });
+        }
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        doSeek(s.frame + (e.shiftKey ? fps : 1));
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        doSeek(s.frame - (e.shiftKey ? fps : 1));
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        doSeek(0);
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        doSeek(total - 1);
+      } else if (e.key === '.') {
+        e.preventDefault();
+        const next = snapFrames().find((n) => n > s.frame);
+        if (next != null) doSeek(next);
+      } else if (e.key === ',') {
+        e.preventDefault();
+        const prev = snapFrames()
+          .reverse()
+          .find((n) => n < s.frame);
+        if (prev != null) doSeek(prev);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  // DDR-148 — reset the Timeline's comp meta when the active canvas changes (a
+  // non-comp canvas fires no announce, so stale comps would linger), then ask
+  // the (possibly already-mounted) active canvas to re-announce. video-comp.tsx
+  // answers `timeline-request-comps` with a fresh `timeline-comps`.
+  useEffect(() => {
+    setActiveComps([]);
+    setTimelineFrame(0);
+    setTimelinePlaying(false);
+    const t = setTimeout(() => postToActiveCanvas({ dgn: 'timeline-request-comps' }), 60);
+    return () => clearTimeout(t);
+  }, [activePath, postToActiveCanvas]);
+
+  // DDR-148 — fetch the active canvas's raw source when the Timeline is open.
+  // Re-runs when a comp is (re)announced, so it refreshes after a canvas edit.
+  const [timelineSource, setTimelineSource] = useState('');
+  // DDR-150 dogfood — authoritative per-clip media from the enumerator (handles
+  // wrapper components + array-fed src the regex parser can't see), merged into
+  // the rows for the kind badge + replace addressing.
+  const [timelineClipMedia, setTimelineClipMedia] = useState([]);
+  useEffect(() => {
+    if (!timelineOpen || activeComps.length === 0 || !activePath || activePath === SYSTEM_TAB) {
+      setTimelineSource('');
+      setTimelineClipMedia([]);
+      return undefined;
+    }
+    let alive = true;
+    fetch(`/_api/canvas-source?file=${encodeURIComponent(activePath)}`)
+      .then((r) => (r.ok ? r.json() : null))
+      .then((j) => {
+        if (alive && j?.ok && typeof j.source === 'string') setTimelineSource(j.source);
+      })
+      .catch(() => {});
+    return () => {
+      alive = false;
+    };
+  }, [timelineOpen, activeComps, activePath]);
+
+  // Authoritative per-clip media (comp-clips) — a SEPARATE effect keyed on the
+  // RESOLVED artboard id, which the parser only knows AFTER timelineSource
+  // arrives. Fetching it here (not in the source effect) means it re-runs once
+  // the parser scopes to the right comp — so a multi-comp canvas (the showreel:
+  // Movie + Reel) overlays the CORRECT comp's media, not the enumerator's own
+  // fallback pick.
+  useEffect(() => {
+    if (!timelineOpen || !activePath || activePath === SYSTEM_TAB || !timelineSource) {
+      setTimelineClipMedia([]);
+      return undefined;
+    }
+    let alive = true;
+    const artboardId = timelineArtboardId || undefined;
+    const ccUrl = `/_api/comp-clips?canvas=${encodeURIComponent(activePath)}${artboardId ? `&artboardId=${encodeURIComponent(artboardId)}` : ''}`;
+    fetch(ccUrl)
+      .then((r) => (r.ok ? r.json() : null))
+      .then((cc) => {
+        if (!alive) return;
+        const seqs =
+          cc?.ok && Array.isArray(cc.clips) ? cc.clips.filter((c) => c.kind === 'sequence') : [];
+        setTimelineClipMedia(seqs);
+      })
+      .catch(() => {});
+    return () => {
+      alive = false;
+    };
+  }, [timelineOpen, activePath, timelineSource, timelineArtboardId]);
+
+  // Parse (cheap) — re-runs on source change AND on selection change, so the
+  // Timeline REDRAWS to whichever artboard the user just selected/moved to.
+  useEffect(() => {
+    if (!timelineSource) {
+      setTimelineSequences([]);
+      setTimelineAudio([]);
+      setTimelineTotal(0);
+      return;
+    }
+    const total = activeComps[0]?.durationInFrames || 0;
+    const artboard = canvasActiveArtboard ?? selected?.artboardId ?? null;
+    const parsed = parseCompTimeline(timelineSource, total, artboard);
+    setTimelineArtboardId(parsed.artboardId ?? artboard ?? null);
+    // Overlay the enumerator's authoritative media (kind badge + replace target)
+    // onto each row by sequence index — it sees wrapper-component + array-fed
+    // media the row parser can't (the showreel <ClipShot clip={CLIPS[i]}/> case).
+    const merged = parsed.sequences.map((s, i) => {
+      const cm = timelineClipMedia[i];
+      if (!cm) return s;
+      return {
+        ...s,
+        mediaTag: cm.mediaTag ?? s.mediaTag,
+        mediaSrc: cm.mediaSrc ?? s.mediaSrc,
+        // Replaceable when the enumerator found an addressable media target:
+        // a literal-src element (mediaCdId) or an array-fed src (mediaArrayRef).
+        replaceable: !!(cm.mediaCdId || cm.mediaArrayRef),
+        // The clip's stacked layers (mp4 background + title/…) for expandable rows.
+        layers: Array.isArray(cm.layers) ? cm.layers : [],
+        hidden: !!cm.hidden,
+      };
+    });
+    setTimelineSequences(merged);
+    setTimelineAudio(parsed.audio || []);
+    setTimelineTotal(parsed.total);
+  }, [timelineSource, timelineClipMedia, selected, activeComps, canvasActiveArtboard]);
+
   const toggleAnnotations = useCallback(() => {
     setAnnotationsVisible((v) => {
       const next = !v;
@@ -6563,6 +7704,11 @@ function App() {
             // the branch-scoped tree so other open tabs reflect it without a
             // reload. Cross-machine peers get a new canvas via git "Get latest".
             loadTree();
+          } else if (m.type === 'config-updated') {
+            // Server hot-reloaded .design/config.json (/design:setup-ds rewrote
+            // it) — refetch /_config so designSystems / tokensCssRel / groups
+            // match. The tree refresh arrives separately via canvas-list-update.
+            loadServerConfig();
           } else if (m.type === 'acp-focus') {
             // Phase 31 (DDR-123) — `/design:chat` from the terminal asked us to
             // surface the native ACP chat sidepanel. Native-only (the panel
@@ -6590,9 +7736,9 @@ function App() {
     }
     connect();
     return () => wsRef.current && wsRef.current.close();
-    // loadTree is a stable useCallback([]); listed so the canvas-list-update
-    // handler always calls the live reference.
-  }, [loadTree]);
+    // loadTree + loadServerConfig are stable useCallback([])s; listed so the
+    // canvas-list-update / config-updated handlers always call the live refs.
+  }, [loadTree, loadServerConfig]);
 
   function wsSend(obj) {
     const ws = wsRef.current;
@@ -6878,6 +8024,139 @@ function App() {
     [loadTree, openTab]
   );
 
+  // DDR-150 P4 Task 12 — one-click "udělej z toho video". Reads the ACTIVE
+  // canvas's annotation sidecar (main-origin — no cross-origin round-trip),
+  // gathers every dropped media-reference chip's src in document order, and POSTs
+  // an assembled video-comp (kind: 'video-comp') → opens the new, immediately
+  // hand-editable comp. Durations default server-side to fps*3 (the user trims on
+  // the Timeline); client-side <video>.duration probing is a documented tightening.
+  const assembleVideo = useCallback(async () => {
+    if (!activePath || activePath === SYSTEM_TAB) return;
+    try {
+      const ar = await fetch(`/_api/annotations?file=${encodeURIComponent(activePath)}`);
+      const svg = ar.ok ? await ar.text() : '';
+      const clips = [];
+      if (svg) {
+        const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');
+        for (const g of doc.querySelectorAll('[data-tool="mediaref"]')) {
+          const src = g.getAttribute('data-src');
+          if (!src) continue;
+          clips.push({ src, mediaKind: g.getAttribute('data-media-kind') === 'audio' ? 'audio' : 'video' });
+        }
+      }
+      if (clips.length === 0) {
+        window.alert('Drop video/audio clips on the canvas first, then assemble them into a video.');
+        return;
+      }
+      const baseName = displayName(basename(activePath)).replace(/\.tsx$/i, '');
+      const name = `${baseName} Video`;
+      const r = await fetch('/_api/canvas', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, kind: 'video-comp', clips }),
+      });
+      const j = await r.json().catch(() => ({}));
+      if (!r.ok || !j.ok) {
+        window.alert(`Assemble failed: ${j.error || `error ${r.status}`}`);
+        return;
+      }
+      await loadTree();
+      openTab(j.file);
+    } catch (e) {
+      window.alert(`Assemble failed: ${e instanceof Error ? e.message : 'network error'}`);
+    }
+  }, [activePath, loadTree, openTab]);
+
+  // DDR-150 dogfood #5 — shared replace-media flow, PICKER-FIRST. The <input
+  // type=file> is created + clicked SYNCHRONOUSLY inside the caller's click
+  // gesture (browsers revoke transient user-activation after any await, which is
+  // why the old fetch-then-click never opened the dialog). The comp-clips lookup
+  // + upload + src patch all happen in the change handler, where no activation
+  // is needed. `resolveCdId(cc)` maps the fresh enumerator payload to the target
+  // media target (sequence clip via cd-id, audio bed via cd-id, or a showreel
+  // array-fed src via mediaArrayRef → /_api/edit-array-src). `resolveTarget(cc)`
+  // returns { cdId } | { arrayRef } | null.
+  const replaceMediaViaPicker = useCallback(
+    ({ accept, resolveTarget }) => {
+      const canvas = activePath;
+      const artboardId = timelineArtboardId || undefined;
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = accept;
+      // OFF-SCREEN, not display:none — the native desktop app (Tauri WKWebView)
+      // will NOT present the file panel for a `display:none` input (it must be
+      // laid out). Off-screen + transparent works in both WKWebView and browsers
+      // (dogfood: "replace ... nefunguje ale v desktop app"). Guard against a
+      // cancelled dialog leaking the node with a one-shot focus cleanup.
+      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();
+      };
+      // If the user cancels the panel, `change` never fires — reclaim the node
+      // when focus returns to the window (fires on both pick and cancel).
+      window.addEventListener('focus', () => setTimeout(cleanup, 300), { once: true });
+      input.addEventListener('change', () => {
+        const file = input.files?.[0];
+        cleanup();
+        if (!file) return;
+        const ccUrl = `/_api/comp-clips?canvas=${encodeURIComponent(canvas)}${artboardId ? `&artboardId=${encodeURIComponent(artboardId)}` : ''}`;
+        fetch(ccUrl)
+          .then((r) => r.json().catch(() => ({})))
+          .then((cc) => {
+            const target = resolveTarget(cc);
+            if (!target) {
+              shellToast('No replaceable media here (its src is computed) — edit via chat.');
+              return null;
+            }
+            return fetch('/_api/asset', {
+              method: 'POST',
+              headers: { 'Content-Type': file.type || 'application/octet-stream' },
+              body: file,
+            })
+              .then((r) => r.json().catch(() => ({})))
+              .then((up) => {
+                if (!up?.path) {
+                  shellToast(`Upload failed: ${up?.error || 'unknown error'}`);
+                  return null;
+                }
+                if (target.arrayRef) {
+                  // Showreel pattern: the src lives in an array literal.
+                  return fetch('/_api/edit-array-src', {
+                    method: 'POST',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify({
+                      canvas,
+                      arrayName: target.arrayRef.arrayName,
+                      index: target.arrayRef.index,
+                      field: target.arrayRef.field,
+                      value: up.path,
+                    }),
+                  });
+                }
+                return fetch('/_api/edit-attr', {
+                  method: 'POST',
+                  headers: { 'content-type': 'application/json' },
+                  body: JSON.stringify({ canvas, id: target.cdId, attr: 'src', value: up.path }),
+                });
+              });
+          })
+          .then((r) => (r ? r.json() : null))
+          .then((j) => {
+            if (j && !j.ok) shellToast(`Replace refused: ${j.error || 'failed'}`);
+            else if (j && j.ok) {
+              shellToast('Media replaced.', true);
+              if (j.seq != null) pushTlUndo(canvas, j.seq, 'replace media');
+            }
+          })
+          .catch(() => shellToast('Replace failed: network error'));
+      });
+      input.click();
+    },
+    [activePath, timelineArtboardId, pushTlUndo]
+  );
+
   // Phase 22 — soft-delete a canvas from the file tree. Confirms (destructive),
   // DELETEs to the main-origin-only endpoint, refreshes the tree, and resets the
   // active tab if the deleted canvas was open. The server moves the whole sidecar
@@ -6993,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
@@ -7009,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' });
@@ -7020,7 +8303,18 @@ function App() {
         // Phase 12 (DDR-103) — inline text edit committed in the canvas. POST to
         // the main-origin-only /_api/edit-text → editText writes the escaped
         // JSXText to source; the file-watcher HMR reload then shows the new text.
-        // A refusal (mixed/expression content) is logged, not fatal.
+        // DDR-150 P1: a refusal is NO LONGER silent — post `edit-reverted` back
+        // to the canvas, which reverts the optimistic contenteditable text AND
+        // toasts the reason, so a failed edit can't silently vanish on the next
+        // reload ("my text edit didn't stick"). The user-facing toast lives
+        // canvas-side (showCanvasToast) because App has no in-scope status
+        // surface — `setStatus` belongs to ExportDialog, not App.
+        const editSource = e.source;
+        const revert = (reason) => {
+          try {
+            editSource?.postMessage({ dgn: 'edit-reverted', op: 'text', id: m.id, reason }, '*');
+          } catch {}
+        };
         fetch('/_api/edit-text', {
           method: 'POST',
           headers: { 'content-type': 'application/json' },
@@ -7028,9 +8322,9 @@ function App() {
         })
           .then((r) => r.json().catch(() => ({})))
           .then((j) => {
-            if (!j.ok) console.warn('[edit-text]', j.error || 'failed');
+            if (!j.ok) revert(j.error || "this element can't be edited inline");
           })
-          .catch(() => {});
+          .catch(() => revert('network error'));
       } else if (m.dgn === 'apply-edit' && m.id && (m.op === 'css' || m.op === 'text' || m.op === 'attr')) {
         // Inline-edit undo/redo (DDR-103/104 follow-up). The canvas iframe's
         // `edit-source` command can't call the main-origin-only `/_api/edit-*`
@@ -7068,6 +8362,10 @@ function App() {
             })
               .then((r) => r.json().catch(() => ({})))
               .then((j) => {
+                // Undo/redo lane (Cmd+Z/Cmd+Shift+Z re-application). The primary
+                // edit-text lane above owns the user-facing revert + toast; a
+                // refusal here is logged. (DDR-150 P1 kept this a warn after the
+                // setStatus-scope fix — setStatus is not in App's scope.)
                 if (!j.ok) console.warn('[apply-edit]', op, j.error || 'failed');
               })
               .catch(() => {})
@@ -7157,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');
@@ -7221,6 +8688,49 @@ function App() {
         // meta.json-derived seed when the canvas knows better. Clamp.
         const n = Math.round(m.count);
         if (Number.isFinite(n) && n >= 0 && n <= 999) setActiveArtboards(n);
+      } else if (m.dgn === 'active-artboard') {
+        // DDR-148 — canvas-lib reports the viewport-active artboard on pan. Gate
+        // to the ACTIVE canvas window (a background canvas must not hijack the
+        // Timeline's target). The Timeline re-parses to this artboard's comp.
+        const activeWin =
+          activePath && activePath !== SYSTEM_TAB
+            ? iframesRef.current.get(activePath)?.contentWindow
+            : null;
+        if (e.source !== activeWin) return;
+        // Cap the id like the sibling timeline-comps handler (defensive; inert).
+        setCanvasActiveArtboard(typeof m.id === 'string' ? m.id.slice(0, 120) : null);
+      } else if (m.dgn === 'timeline-comps' && Array.isArray(m.comps)) {
+        // DDR-148 — a video-comp announces its comp meta (from video-comp.tsx).
+        // Gate to the ACTIVE canvas window (phase-28 F-2 pattern): a background
+        // canvas must not plant comps into the Timeline panel, which shows the
+        // active canvas's comps. Inert display, but keep the seam closed.
+        const activeWin =
+          activePath && activePath !== SYSTEM_TAB
+            ? iframesRef.current.get(activePath)?.contentWindow
+            : null;
+        if (e.source !== activeWin) return;
+        const safe = m.comps
+          .filter((c) => c && typeof c.id === 'string')
+          .slice(0, 32)
+          .map((c) => ({
+            id: String(c.id).slice(0, 120),
+            fps: Math.max(1, Math.min(120, Math.round(Number(c.fps) || 30))),
+            durationInFrames: Math.max(1, Math.min(1_000_000, Math.round(Number(c.durationInFrames) || 1))),
+            width: Math.max(1, Math.round(Number(c.width) || 0)),
+            height: Math.max(1, Math.round(Number(c.height) || 0)),
+          }));
+        setActiveComps(safe);
+      } else if (m.dgn === 'timeline-frame' && typeof m.frame === 'number') {
+        // Live playhead mirror from the Player (preview scrub/playback).
+        const activeWin =
+          activePath && activePath !== SYSTEM_TAB
+            ? iframesRef.current.get(activePath)?.contentWindow
+            : null;
+        if (e.source !== activeWin) return;
+        // Only the Timeline's target comp drives the playhead — a sibling
+        // artboard's Player must not fight it for the readout (multi-comp canvas).
+        if (m.id && timelineCompIdRef.current && m.id !== timelineCompIdRef.current) return;
+        if (Number.isFinite(m.frame)) setTimelineFrame(Math.max(0, Math.round(m.frame)));
       } else if (m.dgn === 'toggle-palette') {
         // ⌘K pressed while focus was inside the canvas iframe — the injected
         // inspector forwards the chord here since the iframe's keydown never
@@ -7357,6 +8867,15 @@ function App() {
         const fn = /filename="([^"]+)"/.exec(disp);
         const filename = (fn && fn[1]) || 'export';
         const blob = await r.blob();
+        if (isNativeApp()) {
+          // Native: route the bridged in-canvas export through the OS save dialog
+          // too (WKWebView swallows the `<a download>` blob). Mirror the shell
+          // ExportDialog's doExport native branch.
+          const bytes = Array.from(new Uint8Array(await blob.arrayBuffer()));
+          const savedPath = await saveExport(filename, bytes);
+          reply(savedPath ? { ok: true, filename } : { ok: false, error: 'Save cancelled' });
+          return;
+        }
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.href = url;
@@ -7550,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' } });
   }, []);
@@ -7625,6 +9674,18 @@ function App() {
       // makes inspector CSS / inline text / attr edits undoable from anywhere.
       if (meta && !e.altKey && (e.key === 'z' || e.key === 'Z' || e.key === 'y' || e.key === 'Y')) {
         if (!inEditable && !inCanvasIframe && activePath && activePath !== SYSTEM_TAB) {
+          // DDR-150 dogfood #1 (team finding) — SINGLE OWNER per keypress. With
+          // the Timeline open on a video-comp canvas, the timeline undo stack
+          // owns Cmd+Z/Shift+Cmd+Z (the timeline keydown effect performs it).
+          // Without this skip, BOTH handlers fired on one keypress — undoing a
+          // clip op AND popping the canvas's annotation undo simultaneously.
+          if (
+            (e.key === 'z' || e.key === 'Z') &&
+            tlKeyRef.current.open &&
+            tlKeyRef.current.comps?.length
+          ) {
+            return; // the timeline shortcuts effect claims it
+          }
           e.preventDefault();
           const redo = e.key === 'y' || e.key === 'Y' || e.shiftKey;
           postToActiveCanvas({ dgn: redo ? 'redo' : 'undo' });
@@ -8007,6 +10068,12 @@ 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}
           assistantOpen={assistantOpen}
           onToggleAssistant={() => toggleRightPanel('assistant')}
           assistantBusy={assistantBusy}
@@ -8028,6 +10095,7 @@ function App() {
               60
             );
           }}
+          onAssembleVideo={assembleVideo}
           onOpenExport={(mode) => setExportDialog({ mode })}
           onReload={reloadActive}
           onCloseCanvas={() => activePath && closeTab(activePath)}
@@ -8160,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',
@@ -8219,6 +10291,347 @@ function App() {
             />
           )}
         </div>
+        {/* DDR-148 — Timeline is a BOTTOM dock (full-width strip below the stage,
+            above the status bar) — video timelines are horizontal. */}
+        {timelineOpen && (
+          <TimelinePanel
+            comps={activeComps}
+            sequences={timelineSequences}
+            audio={timelineAudio}
+            total={timelineTotal}
+            frame={timelineFrame}
+            playing={timelinePlaying}
+            loop={timelineLoop}
+            onSeek={(f) => {
+              setTimelineFrame(f);
+              setTimelinePlaying(false);
+              postToActiveCanvas({ dgn: 'timeline-seek', frame: f, id: timelineCompId });
+            }}
+            onPlay={() => {
+              setTimelinePlaying(true);
+              // Sync mute + loop to the Player, then play (the artboard has no
+              // chrome — the Timeline owns transport/sound/loop now).
+              postToActiveCanvas({ dgn: 'timeline-mute', muted: timelineMuted, id: timelineCompId });
+              postToActiveCanvas({ dgn: 'timeline-loop', loop: timelineLoop, id: timelineCompId });
+              postToActiveCanvas({ dgn: 'timeline-play', id: timelineCompId });
+            }}
+            onPause={() => {
+              setTimelinePlaying(false);
+              postToActiveCanvas({ dgn: 'timeline-pause', id: timelineCompId });
+            }}
+            onToggleLoop={() =>
+              setTimelineLoop((v) => {
+                const next = !v;
+                postToActiveCanvas({ dgn: 'timeline-loop', loop: next, id: timelineCompId });
+                return next;
+              })
+            }
+            muted={timelineMuted}
+            onToggleMute={() => {
+              setTimelineMuted((v) => {
+                const next = !v;
+                postToActiveCanvas({ dgn: 'timeline-mute', muted: next, id: timelineCompId });
+                return next;
+              });
+            }}
+            volume={timelineVolume}
+            onVolume={(v) => {
+              setTimelineVolume(v);
+              // Dragging volume implies "I want to hear it" — unmute.
+              if (v > 0 && timelineMuted) {
+                setTimelineMuted(false);
+                postToActiveCanvas({ dgn: 'timeline-mute', muted: false, id: timelineCompId });
+              }
+              postToActiveCanvas({ dgn: 'timeline-volume', volume: v, id: timelineCompId });
+            }}
+            onRetime={(index, patch) => {
+              if (!activePath || activePath === SYSTEM_TAB) return;
+              // DDR-150 P2 — address the clip by its comp-scoped stableId (from
+              // /_api/comp-clips), NOT the raw row index, so a retime on a
+              // multi-comp canvas can never mis-hit a clip in another comp. The
+              // row index counts sequence rows only, so map it to the index-th
+              // sequence clip (transitions filtered). Fall back to the legacy
+              // index if the enumerator is unavailable.
+              const artboardId = timelineArtboardId || undefined;
+              const ccUrl = `/_api/comp-clips?canvas=${encodeURIComponent(activePath)}${artboardId ? `&artboardId=${encodeURIComponent(artboardId)}` : ''}`;
+              fetch(ccUrl)
+                .then((r) => r.json().catch(() => ({})))
+                .then((cc) => {
+                  const seqs =
+                    cc?.ok && Array.isArray(cc.clips)
+                      ? cc.clips.filter((c) => c.kind === 'sequence')
+                      : [];
+                  const clip = seqs[index] || null;
+                  const body = clip?.stableId
+                    ? {
+                        canvas: activePath,
+                        artboardId,
+                        stableId: clip.stableId,
+                        contentHash: clip.contentHash,
+                        ...patch,
+                      }
+                    : { canvas: activePath, index, ...patch };
+                  return fetch('/_api/retime-sequence', {
+                    method: 'POST',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify(body),
+                  });
+                })
+                .then((r) => r.json())
+                .then((j) => {
+                  if (!j?.ok) {
+                    console.warn('[retime]', j?.error || 'failed');
+                    shellToast(`Retime refused: ${j?.error || 'failed'}`);
+                  } else if (j?.seq != null) {
+                    pushTlUndo(activePath, j.seq, patch.from != null ? 'move clip' : 'trim clip');
+                  }
+                  // The file watcher reloads the canvas → re-announce → the
+                  // source-fetch effect re-parses the new timing.
+                })
+                .catch(() => {});
+            }}
+            onRemove={(index) => {
+              if (!activePath || activePath === SYSTEM_TAB) return;
+              // DDR-150 P3 — remove the clip addressed by its comp-scoped stableId
+              // (the sequence-row index → the index-th sequence clip). The engine
+              // fingerprint + semantic gate refuse a stale/raced or series-breaking
+              // removal; the file watcher reloads the canvas after.
+              const artboardId = timelineArtboardId || undefined;
+              const ccUrl = `/_api/comp-clips?canvas=${encodeURIComponent(activePath)}${artboardId ? `&artboardId=${encodeURIComponent(artboardId)}` : ''}`;
+              fetch(ccUrl)
+                .then((r) => r.json().catch(() => ({})))
+                .then((cc) => {
+                  const seqs =
+                    cc?.ok && Array.isArray(cc.clips)
+                      ? cc.clips.filter((c) => c.kind === 'sequence')
+                      : [];
+                  const clip = seqs[index] || null;
+                  if (!clip?.stableId) return null;
+                  return fetch('/_api/remove-sequence', {
+                    method: 'POST',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify({
+                      canvas: activePath,
+                      artboardId,
+                      stableId: clip.stableId,
+                      contentHash: clip.contentHash,
+                    }),
+                  });
+                })
+                .then((r) => (r ? r.json() : null))
+                .then((j) => {
+                  if (j && !j.ok) {
+                    console.warn('[remove-clip]', j.error || 'failed');
+                    shellToast(`Remove refused: ${j.error || 'failed'}`);
+                  } else if (j?.seq != null) {
+                    pushTlUndo(activePath, j.seq, 'remove clip');
+                  }
+                })
+                .catch(() => {});
+            }}
+            onReplace={(index) => {
+              if (!activePath || activePath === SYSTEM_TAB) return;
+              // DDR-150 P3 + dogfood #5 — replace a clip's media. The file picker
+              // MUST open synchronously inside the click gesture: browsers revoke
+              // the transient user-activation after an await/fetch round-trip, so
+              // the old fetch-then-click() silently no-oped ("replace neotevře
+              // žádné okno"). Picker first; resolve the target + upload in the
+              // change handler.
+              replaceMediaViaPicker({
+                accept: 'video/*,image/*',
+                resolveTarget: (cc) => {
+                  const seqs =
+                    cc?.ok && Array.isArray(cc.clips)
+                      ? cc.clips.filter((c) => c.kind === 'sequence')
+                      : [];
+                  const clip = seqs[index];
+                  if (clip?.mediaArrayRef) return { arrayRef: clip.mediaArrayRef };
+                  if (clip?.mediaCdId) return { cdId: clip.mediaCdId };
+                  return null;
+                },
+              });
+            }}
+            onReplaceAudio={(index) => {
+              if (!activePath || activePath === SYSTEM_TAB) return;
+              // DDR-150 dogfood #5 — audio beds are addressable too: the
+              // enumerator lists loose media (an <Audio> under the reel) with a
+              // cd-id; ⇄ on the audio row swaps its src.
+              replaceMediaViaPicker({
+                accept: 'audio/*',
+                resolveTarget: (cc) => {
+                  const beds =
+                    cc?.ok && Array.isArray(cc.media)
+                      ? cc.media.filter((m) => m.tag === 'Audio')
+                      : [];
+                  return beds[index]?.cdId ? { cdId: beds[index].cdId } : null;
+                },
+              });
+            }}
+            onReplaceLayer={(clipIndex, layerIndex) => {
+              if (!activePath || activePath === SYSTEM_TAB) return;
+              // DDR-150 dogfood — replace a SPECIFIC layer inside an expanded clip
+              // (the mp4 background separately from the title layer). Targets the
+              // layer's own media (array-fed or literal-src) from the enumerator.
+              const kind =
+                timelineSequences[clipIndex]?.layers?.[layerIndex]?.kind === 'audio'
+                  ? 'audio/*'
+                  : timelineSequences[clipIndex]?.layers?.[layerIndex]?.kind === 'image'
+                    ? 'image/*'
+                    : 'video/*';
+              replaceMediaViaPicker({
+                accept: kind,
+                resolveTarget: (cc) => {
+                  const seqs =
+                    cc?.ok && Array.isArray(cc.clips)
+                      ? cc.clips.filter((c) => c.kind === 'sequence')
+                      : [];
+                  const ly = seqs[clipIndex]?.layers?.[layerIndex];
+                  if (ly?.mediaArrayRef) return { arrayRef: ly.mediaArrayRef };
+                  if (ly?.mediaCdId) return { cdId: ly.mediaCdId };
+                  return null;
+                },
+              });
+            }}
+            onReorder={(index, direction) => {
+              if (!activePath || activePath === SYSTEM_TAB) return;
+              // DDR-150 P5 — z-order reorder: move a standalone <Sequence> before/
+              // after a sibling (render stacking; later sibling paints on top).
+              // ▲ forward = move AFTER the next sibling; ▼ backward = move BEFORE
+              // the previous sibling. Both clips addressed by comp-scoped stableId +
+              // fingerprint (via /_api/comp-clips); the engine refuses a TransitionSeries
+              // clip + a stale/raced target, then reloads via the file watcher.
+              const artboardId = timelineArtboardId || undefined;
+              const ccUrl = `/_api/comp-clips?canvas=${encodeURIComponent(activePath)}${artboardId ? `&artboardId=${encodeURIComponent(artboardId)}` : ''}`;
+              fetch(ccUrl)
+                .then((r) => r.json().catch(() => ({})))
+                .then((cc) => {
+                  const seqs =
+                    cc?.ok && Array.isArray(cc.clips)
+                      ? cc.clips.filter((c) => c.kind === 'sequence')
+                      : [];
+                  const moved = seqs[index] || null;
+                  const refIdx = direction === 'forward' ? index + 1 : index - 1;
+                  const ref = seqs[refIdx] || null;
+                  const position = direction === 'forward' ? 'after' : 'before';
+                  if (!moved?.stableId || !ref?.stableId) return null;
+                  return fetch('/_api/reorder-sequence', {
+                    method: 'POST',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify({
+                      canvas: activePath,
+                      artboardId,
+                      stableId: moved.stableId,
+                      contentHash: moved.contentHash,
+                      refStableId: ref.stableId,
+                      refContentHash: ref.contentHash,
+                      position,
+                    }),
+                  });
+                })
+                .then((r) => (r ? r.json() : null))
+                .then((j) => {
+                  if (j && !j.ok) {
+                    console.warn('[reorder-clip]', j.error || 'failed');
+                    shellToast(`Reorder refused: ${j.error || 'failed'}`);
+                  } else if (j?.seq != null) {
+                    pushTlUndo(activePath, j.seq, 'reorder clip');
+                  }
+                })
+                .catch(() => {});
+            }}
+            onToggleHide={(index) => {
+              if (!activePath || activePath === SYSTEM_TAB) return;
+              // DDR-150 dogfood — hide/show a clip (gates its body behind
+              // {false && …}; the tag + time slot stay). Addressed by comp-scoped
+              // stableId + fingerprint.
+              const artboardId = timelineArtboardId || undefined;
+              const ccUrl = `/_api/comp-clips?canvas=${encodeURIComponent(activePath)}${artboardId ? `&artboardId=${encodeURIComponent(artboardId)}` : ''}`;
+              fetch(ccUrl)
+                .then((r) => r.json().catch(() => ({})))
+                .then((cc) => {
+                  const seqs =
+                    cc?.ok && Array.isArray(cc.clips)
+                      ? cc.clips.filter((c) => c.kind === 'sequence')
+                      : [];
+                  const clip = seqs[index] || null;
+                  if (!clip?.stableId) return null;
+                  return fetch('/_api/toggle-hide', {
+                    method: 'POST',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify({
+                      canvas: activePath,
+                      artboardId,
+                      stableId: clip.stableId,
+                      contentHash: clip.contentHash,
+                    }),
+                  });
+                })
+                .then((r) => (r ? r.json() : null))
+                .then((j) => {
+                  if (j && !j.ok) shellToast(`Hide refused: ${j.error || 'failed'}`);
+                  else if (j && j.ok) {
+                    shellToast(j.hidden ? 'Clip hidden.' : 'Clip shown.', true);
+                    if (j.seq != null) pushTlUndo(activePath, j.seq, j.hidden ? 'hide clip' : 'show clip');
+                  }
+                })
+                .catch(() => shellToast('Hide failed: network error'));
+            }}
+            onDropMedia={(file) => {
+              if (!activePath || activePath === SYSTEM_TAB) return;
+              // DDR-150 P4 Task 11 — drop a media file onto the timeline to
+              // insert a clip: upload to assets/, then append a <Sequence> with
+              // the media (playing after existing content). fps*3 default length.
+              const artboardId = timelineArtboardId || undefined;
+              const mediaTag = file.type.startsWith('video/')
+                ? 'Video'
+                : file.type.startsWith('audio/')
+                  ? 'Audio'
+                  : file.type.startsWith('image/')
+                    ? 'Img'
+                    : null;
+              const fps = activeComps[0]?.fps || 30;
+              fetch('/_api/asset', {
+                method: 'POST',
+                headers: { 'Content-Type': file.type || 'application/octet-stream' },
+                body: file,
+              })
+                .then((r) => r.json().catch(() => ({})))
+                .then((up) => {
+                  if (!up?.path) {
+                    console.warn('[insert] upload failed', up?.error);
+                    shellToast(`Upload failed: ${up?.error || 'unknown error'}`);
+                    return null;
+                  }
+                  return fetch('/_api/insert-sequence', {
+                    method: 'POST',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify({
+                      canvas: activePath,
+                      artboardId,
+                      from: Math.max(0, timelineTotal),
+                      durationInFrames: Math.round(fps * 3),
+                      mediaTag,
+                      src: up.path,
+                    }),
+                  });
+                })
+                .then((r) => (r ? r.json() : null))
+                .then((j) => {
+                  if (j && !j.ok) {
+                    console.warn('[insert-clip]', j.error || 'failed');
+                    shellToast(`Insert refused: ${j.error || 'failed'}`);
+                  } else if (j && j.ok) {
+                    shellToast('Clip added to the timeline.', true);
+                    if (j.seq != null) pushTlUndo(activePath, j.seq, 'add clip');
+                  }
+                })
+                .catch(() => {});
+            }}
+            height={timelineHeight}
+            onResize={setTimelineHeight}
+            onClose={() => setTimelineOpen(false)}
+          />
+        )}
         <StatusBar
           activePath={activePath}
           selected={selected}
@@ -8264,9 +10677,24 @@ function App() {
           mode={exportDialog.mode}
           initialScope={exportDialog.scope}
           activePath={activePath}
+          hasComps={activeComps.length > 0}
+          // Which artboard "Active artboard" scope targets. The shell can't query
+          // the cross-origin canvas DOM (the in-canvas dialog's activeArtboardId),
+          // so use the tracked signals: an explicit selection wins, else the
+          // viewport-active artboard canvas-lib reports on pan. Without this,
+          // scope=artboard fell back to `:first-of-type` (always the first).
+          activeArtboardId={selected?.artboardId ?? canvasActiveArtboard ?? null}
+          selection={selected?.selector ? { selector: selected.selector, file: selected.file } : null}
           onClose={() => setExportDialog(null)}
         />
       )}
+      {assetPickerReq && (
+        <AssetPicker
+          designRel={(cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '')}
+          onPick={onAssetPicked}
+          onClose={() => setAssetPickerReq(null)}
+        />
+      )}
       {diffTarget && (
         <DiffView
           target={diffTarget}