@1agh/maude 0.42.0 → 0.44.0

package/apps/studio/client/app.jsx

@@ -20,18 +20,61 @@ 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 IntroVideoDialog from './panels/IntroVideoDialog.jsx';
+import BrandUploadPanel from './panels/BrandUploadPanel.jsx';
+import SetupChecklistDialog, { useSetupReadiness } from './panels/SetupChecklist.jsx';
 import TimelinePanel from './panels/TimelinePanel.jsx';
 import { parseCompTimeline } from './panels/timeline-parse.js';
+import GenerateDialog from './generate-dialog.jsx';
 import RepoBranchSwitcher from './panels/RepoBranchSwitcher.jsx';
+import SettingsPanel from './panels/SettingsPanel.jsx';
+import StickerPicker from './panels/StickerPicker.jsx';
+import { AlignPad, AngleDial, ColorField, IconButtonGroup, IconToggleGroup, makeScrubHandler, NumberField, RadiusControl, Segmented, SliderField, Toggle, UnitSelect, ValueTokenField } from './inspector-controls.jsx';
+import {
+  ALargeSmall as LuALargeSmall,
+  AlignCenter as LuAlignCenter,
+  AlignHorizontalJustifyCenter as LuJustifyCenter,
+  AlignHorizontalJustifyEnd as LuJustifyEnd,
+  AlignHorizontalJustifyStart as LuJustifyStart,
+  AlignHorizontalSpaceBetween as LuSpaceBetween,
+  AlignJustify as LuAlignJustify,
+  AlignLeft as LuAlignLeft,
+  AlignRight as LuAlignRight,
+  AlignVerticalJustifyCenter as LuVJustifyCenter,
+  AlignVerticalJustifyEnd as LuVJustifyEnd,
+  AlignVerticalJustifyStart as LuVJustifyStart,
+  Baseline as LuBaseline,
+  Bold as LuBold,
+  Columns3 as LuColumns3,
+  Eye as LuEye,
+  Italic as LuItalic,
+  Minus as LuMinus,
+  MoveHorizontal as LuMoveH,
+  RotateCw as LuRotateCw,
+  Rows3 as LuRows3,
+  Scissors as LuScissors,
+  ScrollText as LuScrollText,
+  Spline as LuSpline,
+  StretchHorizontal as LuStretch,
+  Underline as LuUnderline,
+  Braces as LuBraces,
+  Wand2 as LuWand2,
+} from 'lucide-react';
+
+// lucide wrapper — hairline stroke to match the shell's icon weight (handoff).
+const Lu = ({ as: C, size = 14 }) => <C size={size} strokeWidth={1.75} style={{ display: 'block' }} />;
+import { PhotoKnobs } from './photo-knobs.jsx';
 import {
   appIsFirstRun,
   isNativeApp,
   onUpdateReady,
   pickMediaFile,
+  pickMediaFiles,
   restartToUpdate,
 } from './github.js';
 import { COLLAB_TOUR } from './tour/collab-tour.js';
 import { TourOverlay } from './tour/overlay.jsx';
+import { QUICK_SETUP_TOUR } from './tour/quick-setup-tour.js';
 import { USAGE_TOUR } from './tour/usage-tour.js';
 import { ExportBadge, ExportPanel, ExportToast, useExportCenter } from './export-center.jsx';
 import { useWhatsNew, WhatsNewPanel, WhatsNewToast } from './whats-new.jsx';
@@ -44,7 +87,83 @@ const SYSTEM_TAB = '__system__';
 const THEME_STORE = 'mdcc-theme';
 const SHOW_HIDDEN_STORE = 'mdcc-show-hidden';
 const SECTIONS_STORE = 'mdcc-sections-expanded';
+// DDR-171 — CSS panel vocabulary mode ('advanced' | 'designer'), read inside
+// CssKnobs.
+const CP_MODE_STORE = 'maude-cp-mode';
 const SIDEBAR_STORE = 'mdcc-sidebar-open';
+const MINIMAP_STORE = 'mdcc-minimap-visible';
+const ZOOMCTL_STORE = 'mdcc-zoomctl-visible';
+const ANNOT_STORE = 'mdcc-annotations-visible';
+const AUTOOPEN_STORE = 'maude-auto-open-inspector';
+
+// feature-unified-settings-modal — the Settings modal's view prefs are ALSO
+// persisted to disk (~/.config/maude/prefs.json via /_api/ui-prefs), so they
+// survive a restart even if localStorage is cleared (the native WKWebView
+// case). localStorage stays the synchronous init source (no boot flash); disk
+// is the durable, cross-restart source of truth reconciled on mount.
+function persistUiPrefs(patch) {
+  try {
+    fetch('/_api/ui-prefs', {
+      method: 'POST',
+      headers: { 'content-type': 'text/plain' },
+      body: JSON.stringify(patch),
+    }).catch(() => {});
+  } catch {}
+}
+
+// feature-configurable-panel-docking — the dockable shell panels. Each can live
+// in the LEFT or RIGHT slot (persisted in UiPrefs.panelSides); each slot is a
+// single-panel-at-a-time surface with a tab strip over the panels assigned to
+// it. Order here = tab order within a slot. `assistant` is native-only.
+const DOCK_PANELS = [
+  { id: 'tree', label: 'Files' },
+  { id: 'layers', label: 'Layers' },
+  { id: 'inspector', label: 'Inspector' },
+  { id: 'comments', label: 'Comments' },
+  { id: 'changes', label: 'Changes' },
+  { id: 'assistant', label: 'Assistant' },
+];
+const PANEL_SIDES_DEFAULTS = {
+  tree: 'left',
+  layers: 'left',
+  inspector: 'right',
+  comments: 'right',
+  changes: 'right',
+  assistant: 'right',
+};
+const PANEL_SIDES_STORE = 'mdcc-panel-sides';
+const LAYERS_MODE_STORE = 'mdcc-layers-mode';
+
+// feature-configurable-panel-docking — one dock slot (left or right). Owns the
+// resizable width + a tab strip over the panels assigned to the slot; renders
+// the active panel (passed as children). Collapses to 0 width when nothing is
+// visibly open (it may still host an always-mounted hidden ChatPanel).
+function DockSlot({ side, width, open, ids, activeId, onPick, children }) {
+  return (
+    <div
+      className={'st-dockslot st-dockslot--' + side + (open ? '' : ' is-collapsed')}
+      style={{ width: open ? width : 0, flexBasis: open ? width : 0 }}
+    >
+      {open && ids.length > 1 && (
+        <div className="st-docktabs" role="tablist" aria-label={side + ' panels'}>
+          {ids.map((id) => (
+            <button
+              key={id}
+              type="button"
+              role="tab"
+              aria-selected={activeId === id}
+              className={'st-docktab' + (activeId === id ? ' is-active' : '')}
+              onClick={() => onPick(id)}
+            >
+              {(DOCK_PANELS.find((p) => p.id === id) || {}).label || id}
+            </button>
+          ))}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
 const CANVAS_EXT_RE = /\.(tsx|html?)$/i;
 // Bun's `define` substitutes this at build time (see build.ts); falls back when
 // the bundle is consumed in a context that hasn't run the build.
@@ -841,6 +960,23 @@ const PNG_SCALES = [
   { value: 3, label: '3× (max)' },
 ];
 
+// feature-bulk-media-insert — best-effort MIME guess from a filename extension.
+// Only used to classify a natively-picked file (Rust returns `{name, bytes}`,
+// no type) for the destination-toggle's image/video/audio split; the actual
+// upload is always magic-byte-sniffed server-side, so a wrong guess here
+// can't misrepresent what gets stored, only which picker UI state it shows.
+const EXT_MIME = {
+  png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif',
+  webp: 'image/webp', avif: 'image/avif', svg: 'image/svg+xml',
+  mp4: 'video/mp4', mov: 'video/quicktime', webm: 'video/webm', m4v: 'video/mp4', ogg: 'video/ogg',
+  mp3: 'audio/mpeg', wav: 'audio/wav', m4a: 'audio/mp4', aac: 'audio/aac',
+  flac: 'audio/flac', oga: 'audio/ogg', opus: 'audio/opus',
+};
+function mimeFromExt(name) {
+  const ext = String(name || '').split('.').pop()?.toLowerCase();
+  return EXT_MIME[ext] || 'application/octet-stream';
+}
+
 // 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
@@ -848,16 +984,38 @@ const PNG_SCALES = [
 // 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 }) {
+function AssetPicker({
+  designRel,
+  onPick,
+  onClose,
+  multiple = false,
+  hasArtboardAnchor = false,
+  onPickMany,
+}) {
   const [assets, setAssets] = useState(null);
   const [busy, setBusy] = useState(false);
   const [err, setErr] = useState(null);
+  // feature-bulk-media-insert — multi-select state. `kindByPath` merges the
+  // fetched listing with freshly uploaded assets (the upload response carries
+  // no `kind`, so a just-uploaded file's kind comes from its own File.type).
+  const [selected, setSelected] = useState(() => new Set());
+  const [kindByPath, setKindByPath] = useState({});
+  const [destination, setDestination] = useState(hasArtboardAnchor ? 'artboard' : 'annotation');
 
   useEffect(() => {
     let alive = true;
     fetch('/_api/assets')
       .then((r) => r.json())
-      .then((j) => alive && setAssets(j.ok ? j.assets : []))
+      .then((j) => {
+        if (!alive) return;
+        const list = j.ok ? j.assets : [];
+        setAssets(list);
+        setKindByPath((prev) => {
+          const next = { ...prev };
+          for (const a of list) next[a.path] = a.kind;
+          return next;
+        });
+      })
       .catch(() => alive && setAssets([]));
     return () => {
       alive = false;
@@ -875,28 +1033,84 @@ function AssetPicker({ designRel, onPick, onClose }) {
     return () => window.removeEventListener('keydown', onKey, true);
   }, [onClose]);
 
+  const hasNonImageSelected = Array.from(selected).some((p) => (kindByPath[p] || 'image') !== 'image');
+  const artboardDisabled = !hasArtboardAnchor || hasNonImageSelected;
+  const artboardDisabledReason = !hasArtboardAnchor
+    ? 'No artboard on this canvas'
+    : hasNonImageSelected
+      ? 'Video/audio can only be added as annotations'
+      : '';
+  // Force off "Add to artboard" the moment it becomes unavailable (e.g. a
+  // video gets added to an until-now all-image selection).
+  useEffect(() => {
+    if (artboardDisabled && destination === 'artboard') setDestination('annotation');
+  }, [artboardDisabled, destination]);
+
+  const toggleSelected = (path) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  };
+
+  // Shared upload core — both the single-pick `doUpload` and the multi-file
+  // `doUploadMany` post through here, so neither duplicates the request shape.
+  const uploadOne = async (f) => {
+    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) return { ok: true, path: j.path };
+    return { ok: false, error: j.error || `upload failed (HTTP ${res.status})` };
+  };
+
   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 res = await uploadOne(f);
+    setBusy(false);
+    if (res.ok) onPick(res.path);
+    else setErr(res.error);
+  };
+
+  const kindOfMime = (mime) => {
+    if (typeof mime === 'string' && mime.startsWith('video/')) return 'video';
+    if (typeof mime === 'string' && mime.startsWith('audio/')) return 'audio';
+    return 'image';
+  };
+
+  // Multi-file upload — each file uploads independently/concurrently (the
+  // route is idempotent + content-addressed, so no ordering concern); every
+  // one that succeeds joins the selection as it resolves.
+  const doUploadMany = async (files) => {
+    if (!files.length) return;
+    setBusy(true);
+    setErr(null);
+    const results = await Promise.all(
+      files.map((f) => uploadOne(f).then((r) => ({ ...r, file: f })))
+    );
+    setBusy(false);
+    const ok = results.filter((r) => r.ok);
+    const failed = results.length - ok.length;
+    if (failed > 0) setErr(`${failed} of ${results.length} uploads failed`);
+    if (ok.length) {
+      setKindByPath((prev) => {
+        const next = { ...prev };
+        for (const r of ok) next[r.path] = kindOfMime(r.file.type);
+        return next;
+      });
+      setSelected((prev) => {
+        const next = new Set(prev);
+        for (const r of ok) next.add(r.path);
+        return next;
       });
-      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);
     }
   };
 
@@ -909,6 +1123,15 @@ function AssetPicker({ designRel, onPick, onClose }) {
     setBusy(true);
     setErr(null);
     try {
+      if (multiple) {
+        const picked = await pickMediaFiles();
+        const files = (picked || []).map(
+          (p) => new File([new Uint8Array(p.bytes)], p.name, { type: mimeFromExt(p.name) })
+        );
+        setBusy(false);
+        if (files.length) await doUploadMany(files);
+        return;
+      }
       const picked = await pickMediaFile();
       if (picked?.bytes) {
         // Blob from the byte array; the server sniffs the type, so no content-type
@@ -919,7 +1142,7 @@ function AssetPicker({ designRel, onPick, onClose }) {
     } catch (e) {
       setErr(e?.message || 'open failed');
     }
-    setBusy(false); // only reached on cancel / error (doUpload owns the success path)
+    setBusy(false); // only reached on cancel / error (doUpload/doUploadMany own the success path)
   };
 
   // Browser — imperative <input>, mirrors the proven replaceMediaViaPicker
@@ -933,6 +1156,7 @@ function AssetPicker({ designRel, onPick, onClose }) {
     const input = document.createElement('input');
     input.type = 'file';
     input.accept = 'image/*,video/*';
+    if (multiple) input.multiple = true;
     input.style.cssText =
       'position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none';
     document.body.appendChild(input);
@@ -941,9 +1165,11 @@ function AssetPicker({ designRel, onPick, onClose }) {
     };
     window.addEventListener('focus', () => setTimeout(cleanup, 300), { once: true });
     input.addEventListener('change', () => {
-      const file = input.files?.[0];
+      const files = input.files ? Array.from(input.files) : [];
       cleanup();
-      if (file) doUpload(file);
+      if (!files.length) return;
+      if (multiple) doUploadMany(files);
+      else doUpload(files[0]);
     });
     input.click();
   };
@@ -978,25 +1204,71 @@ function AssetPicker({ designRel, onPick, onClose }) {
             ) : 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>
-              ))
+              assets.map((a) => {
+                const isSelected = multiple && selected.has(a.path);
+                return (
+                  <button
+                    type="button"
+                    key={a.path}
+                    className="st-ap-cell"
+                    data-selected={isSelected ? 'true' : undefined}
+                    aria-pressed={multiple ? isSelected : undefined}
+                    title={`${a.name} · ${Math.max(1, Math.round(a.size / 1024))} KB`}
+                    onClick={() => (multiple ? toggleSelected(a.path) : onPick(a.path))}
+                  >
+                    {multiple && (
+                      <span className="st-ap-check" aria-hidden="true">
+                        {isSelected ? <StIcon name="check" size={12} /> : null}
+                      </span>
+                    )}
+                    {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>
+        {multiple && selected.size > 0 && (
+          <div className="st-dialog-ft st-ap-confirm">
+            <span className="st-ap-count">{selected.size} selected</span>
+            <div className="st-ap-seg" role="radiogroup" aria-label="Insert as">
+              <button
+                type="button"
+                className="st-ap-seg-btn"
+                aria-pressed={destination === 'artboard'}
+                disabled={artboardDisabled}
+                onClick={() => setDestination('artboard')}
+              >
+                Add to artboard
+              </button>
+              <button
+                type="button"
+                className="st-ap-seg-btn"
+                aria-pressed={destination === 'annotation'}
+                onClick={() => setDestination('annotation')}
+              >
+                Add as annotation
+              </button>
+            </div>
+            {artboardDisabled && <span className="st-ap-dest-note">{artboardDisabledReason}</span>}
+            <span className="st-ap-confirm-spacer" />
+            <button type="button" className="btn btn--ghost" onClick={onClose}>
+              Cancel
+            </button>
+            <button
+              type="button"
+              className="btn btn--primary"
+              onClick={() => onPickMany?.(Array.from(selected), destination)}
+            >
+              Insert
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );
@@ -1324,7 +1596,18 @@ function DsFolderRow({ name, dsName, depth, defaultOpen, active, onOpenSystem, c
   );
 }
 
-function FileRow({ file, activePath, onOpen, onDelete, openCount: oc, depth, kind, sidecar, dirty }) {
+function FileRow({
+  file,
+  activePath,
+  onOpen,
+  onDelete,
+  openCount: oc,
+  depth,
+  kind,
+  sidecar,
+  dirty,
+  experimentalKind,
+}) {
   const isSel = file.path === activePath;
   const isCanvas = CANVAS_EXT_RE.test(file.name);
   // Non-canvas rows (PROJECT *.md, RUNTIME _active.json, ...) are display-only —
@@ -1368,6 +1651,15 @@ function FileRow({ file, activePath, onOpen, onDelete, openCount: oc, depth, kin
         <StIcon name="file" size={13} />
       </span>
       <span className="st-row-name">{label}</span>
+      {experimentalKind === 'reconstructed-experimental' && (
+        <span
+          className="st-row-exp-badge"
+          title="Reconstructed from an image via /design:import --reconstruct — experimental, lossy, review before trusting (DDR-174)"
+          aria-label="Reconstructed, experimental"
+        >
+          exp
+        </span>
+      )}
       {dirty && (
         <span className="st-git-badge" data-kind={dirty} title={`Unsaved (${dirty})`} aria-label={`Unsaved, ${dirty}`}>
           {dirty}
@@ -1410,6 +1702,7 @@ function CanvasRow({
   showHidden,
   forceOpen,
   dirtyByPath,
+  experimentalKind,
 }) {
   const dirty = dirtyByPath?.get(primary.path);
   const hasSidecars = sidecars.length > 0;
@@ -1431,6 +1724,7 @@ function CanvasRow({
         depth={depth}
         kind={kind}
         dirty={dirty}
+        experimentalKind={experimentalKind}
       />
     );
   }
@@ -1464,6 +1758,15 @@ function CanvasRow({
           <StIcon name="chevron-right" className={'st-chev' + (open ? ' is-open' : '')} size={13} />
         </span>
         <span className="st-row-name">{displayName(primary.name)}</span>
+        {experimentalKind === 'reconstructed-experimental' && (
+          <span
+            className="st-row-exp-badge"
+            title="Reconstructed from an image via /design:import --reconstruct — experimental, lossy, review before trusting (DDR-174)"
+            aria-label="Reconstructed, experimental"
+          >
+            exp
+          </span>
+        )}
         {dirty && (
           <span className="st-git-badge" data-kind={dirty} title={`Unsaved (${dirty})`} aria-label={`Unsaved, ${dirty}`}>
             {dirty}
@@ -1502,6 +1805,7 @@ function Tree({
   onOpenSystem,
   onDelete,
   dirtyByPath,
+  canvasKinds,
 }) {
   const dirs = Object.keys(node)
     .filter((k) => k !== '_files')
@@ -1544,6 +1848,7 @@ function Tree({
             showHidden={showHidden}
             forceOpen={forceOpen}
             dirtyByPath={dirtyByPath}
+            experimentalKind={canvasKinds?.[entry.primary.path]}
           />
         );
       })}
@@ -1576,6 +1881,7 @@ function Tree({
             onOpenSystem={onOpenSystem}
             onDelete={onDelete}
             dirtyByPath={dirtyByPath}
+            canvasKinds={canvasKinds}
           />
         );
         if (dsMatch && onOpenSystem) {
@@ -1648,6 +1954,9 @@ function Sidebar({
   dirtyByPath,
   project,
   gitBranch,
+  remoteSync,
+  onGetLatest,
+  canvasKinds,
 }) {
   const filteredGroups = useMemo(() => {
     if (!search) return groups;
@@ -1878,6 +2187,7 @@ function Sidebar({
                     onOpenSystem={isDs ? onOpenSystem : undefined}
                     onDelete={isDs ? undefined : onDeleteBoard}
                     dirtyByPath={dirtyByPath}
+                    canvasKinds={canvasKinds}
                   />
                 ) : (
                   <div className="st-tree-empty">{search ? 'No matches.' : 'Empty.'}</div>
@@ -1889,7 +2199,7 @@ function Sidebar({
       {/* Phase 29 (E4) — the project + draft switcher: a compact one-line dock that
           opens UPWARD, sitting directly above the GitHub identity avatar so the two
           form one bottom dock. Renders nothing until the project is a git repo. */}
-      <RepoBranchSwitcher project={project} liveBranch={gitBranch} />
+      <RepoBranchSwitcher project={project} liveBranch={gitBranch} remoteSync={remoteSync} onGetLatest={onGetLatest} />
       {/* Phase 28 (E3) — GitHub identity as a compact avatar docked at the BOTTOM:
           sign in, connected account + New/Pull/Share, sign out. Self-contained
           (owns its device-code + CreateProject dialogs). Renders nothing in browser. */}
@@ -2427,12 +2737,9 @@ function ViewDropdown({ panels, onToggle, onClose, onZoom, hasCanvas }) {
           <span className="st-dd-lead">
             <span className="st-dd-check">{p.checked ? <StIcon name="check" size={13} /> : null}</span>
             <span>{p.label}</span>
+            {p.phase ? <span className="st-dd-phase">{p.phase}</span> : null}
           </span>
-          {p.phase ? (
-            <span className="st-dd-phase">{p.phase}</span>
-          ) : p.shortcut ? (
-            <Kbd>{p.shortcut}</Kbd>
-          ) : null}
+          {p.shortcut ? <Kbd>{p.shortcut}</Kbd> : null}
         </button>
       ))}
       <div className="st-dd-sep" />
@@ -2517,10 +2824,15 @@ function HelpDropdown({ onAction, onClose }) {
         { id: 'help', label: 'Help · commands & flows', shortcut: 'F1' },
         { sep: true },
         { id: 'tour', label: 'Take the tour' },
+        { id: 'watch-intro', label: 'Watch the intro' },
         // The collab "how sharing works" course teaches the plain-words Save →
         // Publish → Pull cycle — a non-technical, native-app concern. A web-studio
         // dev already knows git, so it's hidden there (DDR-119).
         ...(isNativeApp() ? [{ id: 'collab-tour', label: 'How sharing works' }] : []),
+        // DDR-166 plan, Phase 2 (T7) — the quick-setup journey (design system →
+        // first canvas → first AI edit) is a native, no-terminal concern same as
+        // the two tours above.
+        ...(isNativeApp() ? [{ id: 'quick-setup', label: 'Quick setup' }] : []),
         ...(isNativeApp() ? [{ id: 'readiness', label: 'Check AI editing readiness…' }] : []),
         { id: 'whatsnew', label: "What's new" },
       ]}
@@ -2588,6 +2900,10 @@ function FileDropdown({ onAction, onClose, hasCanvas }) {
         { id: 'export', label: 'Export…', shortcut: '⇧⌘E' },
         { id: 'handoff', label: 'Handoff to production', shortcut: '⇧⌘H' },
         { sep: true },
+        // feature-ai-media-generation (DDR-16x) — BYOK generate action + settings.
+        { id: 'generate', label: 'Generate with AI…' },
+        { id: 'settings', label: 'Settings…', shortcut: '⌘,' },
+        { sep: true },
         { id: 'reload', label: 'Reload canvas', shortcut: '⌘R', disabled: !hasCanvas },
         { id: 'close', label: 'Close canvas', disabled: !hasCanvas },
       ]}
@@ -2655,6 +2971,8 @@ function Menubar({
   postToActiveCanvas,
   onOpenWhatsNew,
   onOpenReadiness,
+  onOpenQuickSetup,
+  onWatchIntro,
   whatsNewCount,
   exportCenter,
   artboardCount = 0,
@@ -2675,6 +2993,8 @@ function Menubar({
   onNewCanvas,
   onAssembleVideo,
   onOpenExport,
+  onOpenSettings,
+  onOpenGenerate,
   onReload,
   onCloseCanvas,
   onInsertArtboard,
@@ -2740,6 +3060,7 @@ function Menubar({
     {
       id: 'timeline',
       label: 'Timeline',
+      shortcut: '⌘ ⇧ T',
       phase: hasComps ? 'video' : undefined,
       checked: timelineOpen,
       disabled: false,
@@ -2881,6 +3202,8 @@ function Menubar({
             else if (id === 'assemble') onAssembleVideo?.();
             else if (id === 'export') onOpenExport?.('export');
             else if (id === 'handoff') onOpenExport?.('handoff');
+            else if (id === 'generate') onOpenGenerate?.();
+            else if (id === 'settings') onOpenSettings?.();
             else if (id === 'reload') onReload?.();
             else if (id === 'close') onCloseCanvas?.();
           }}
@@ -2948,8 +3271,10 @@ function Menubar({
             else if (id === 'help') onOpenHelp?.();
             else if (id === 'tour') onStartTour?.();
             else if (id === 'collab-tour') onStartCollabTour?.();
+            else if (id === 'quick-setup') onOpenQuickSetup?.();
             else if (id === 'readiness') onOpenReadiness?.();
             else if (id === 'whatsnew') onOpenWhatsNew?.();
+            else if (id === 'watch-intro') onWatchIntro?.();
           }}
           onClose={() => setOpenMenu(null)}
         />
@@ -2960,6 +3285,7 @@ function Menubar({
           <button
             type="button"
             className="st-assistant"
+            data-testid="assistant-toggle"
             data-active={assistantOpen ? 'true' : 'false'}
             data-busy={assistantBusy ? 'true' : 'false'}
             data-unseen={assistantUnseen ? 'true' : 'false'}
@@ -3009,6 +3335,8 @@ function Viewport({
   cfg,
   loadingPath,
   onIframeLoad,
+  showQuickSetup,
+  onStartQuickSetup,
 }) {
   return (
     <div className="viewport st-stage" data-tour="viewport">
@@ -3024,24 +3352,34 @@ function Viewport({
               localhost:{typeof window !== 'undefined' ? window.location.port : '4399'}
             </span>
           </div>
-          <div className="st-empty-title">No canvas open</div>
+          <div className="st-empty-title">Nothing open yet</div>
           <div className="st-empty-body">
-            ← Click a <code>.tsx</code> (or legacy <code>.html</code>) file in the tree, or open the{' '}
-            <strong>Design system</strong> view above it.
+            ← Pick a screen from the list on the left, or open <strong>Design system</strong> above
+            it to see your colors, type, and components.
             <br />
             <br />
-            Opening a file replaces the active canvas. <Kbd>⌘R</Kbd> reloads it; File ▸ Close
-            canvas clears the stage.
-            <br />
-            <br />
-            <strong>Element selection:</strong> hold <Kbd>⌘</Kbd> inside the canvas and hover for a
-            preview, click to select. <Kbd>⌘⇧</Kbd>+click adds to a multi-selection. <Kbd>V</Kbd>
-            /<Kbd>H</Kbd>/<Kbd>C</Kbd> swap tool; right-click opens the context menu.
-            <br />
-            <br />
-            Active file, selection, and comments are tracked in <code>_active.json</code> +{' '}
-            <code>_comments/</code> — Claude reads them when you run <code>/design</code>.
+            <strong>To select something on the canvas:</strong> hold <Kbd>⌘</Kbd> and hover to
+            preview an element, click to select it — <Kbd>⌘⇧</Kbd>+click selects more than one.
+            Right-click for more options.
+            {isNativeApp() ? (
+              <>
+                <br />
+                <br />
+                Claude can see whatever's selected when you ask for a change in the Assistant
+                panel, so pointing is often faster than describing it.
+              </>
+            ) : null}
           </div>
+          {showQuickSetup && (
+            <button
+              type="button"
+              data-testid="st-empty-start-quick-setup"
+              className="btn btn--primary st-empty-quick-setup"
+              onClick={onStartQuickSetup}
+            >
+              Start quick setup
+            </button>
+          )}
         </div>
       )}
       {tabs.map((t) => {
@@ -3832,16 +4170,15 @@ const CSS_UNITLESS = new Set(['line-height', 'opacity', 'font-weight', 'z-index'
 // #2 — Figma-style property prefix inside numeric fields: a small glyph (icon) or
 // a mono letter (t). Only where it reads cleanly; selects/colours keep their own.
 const PROP_LEAD = {
-  'font-size': { icon: 'p-size' },
-  'line-height': { icon: 'p-lineheight' },
-  'letter-spacing': { icon: 'p-letterspacing' },
-  gap: { icon: 'p-gap' },
+  'font-size': { node: <Lu as={LuALargeSmall} size={12} /> },
+  'line-height': { node: <Lu as={LuBaseline} size={12} /> },
+  'letter-spacing': { node: <Lu as={LuMoveH} size={12} /> },
+  gap: { node: <Lu as={LuSpaceBetween} size={12} /> },
   width: { t: 'W' },
   height: { t: 'H' },
   'max-width': { t: 'W' },
-  'border-radius': { icon: 'p-corner' },
-  'border-width': { icon: 'p-border' },
-  opacity: { icon: 'p-opacity' },
+  'border-radius': { node: <Lu as={LuSpline} size={12} /> },
+  'border-width': { node: <Lu as={LuMinus} size={12} /> },
 };
 const CSS_ALIGN_OPTS = ['left', 'center', 'right', 'justify'];
 // feature-element-editing-robustness Stage B — enum option lists for the promoted
@@ -3853,6 +4190,26 @@ 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'];
+// DDR-171 — Designer mode "Effects" cluster (blend) + the matching Advanced-mode
+// Appearance row. Standard CSS `mix-blend-mode` keyword list.
+const CSS_BLEND_MODES = [
+  'normal',
+  'multiply',
+  'screen',
+  'overlay',
+  'darken',
+  'lighten',
+  'color-dodge',
+  'color-burn',
+  'hard-light',
+  'soft-light',
+  'difference',
+  'exclusion',
+  'hue',
+  'saturation',
+  'color',
+  'luminosity',
+];
 // 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'];
@@ -3959,6 +4316,12 @@ function cssSplitUnit(v) {
 // is for the SAME element we already hold locally, preserve those fields instead
 // of clobbering them to empty (else the server round-trip wipes the custom-CSS /
 // custom-attr rows + computed readout right after selection).
+// feature-photo-editor — `photoKind`/`photoAsset` (dom-selection.ts) are the SAME
+// class of client-only DOM-derived field and belong in this list for the same
+// reason: without it, every server-pushed `selected`/`snapshot` restore (a canvas
+// switch, a reconnect, the persisted `_active.json` on boot — none of which carry
+// these fields) silently drops the Inspector's Photo tab until the next fresh
+// click re-derives it live — the "tab is there, then it's gone" flicker.
 function mergeSelClientFields(incoming, prev) {
   if (!incoming || Array.isArray(incoming) || Array.isArray(prev) || !prev) return incoming;
   if (!incoming.id || incoming.id !== prev.id) return incoming;
@@ -3968,6 +4331,8 @@ function mergeSelClientFields(incoming, prev) {
     computed: incoming.computed ?? prev.computed,
     customStyles: incoming.customStyles ?? prev.customStyles,
     attrs: incoming.attrs ?? prev.attrs,
+    photoKind: incoming.photoKind ?? prev.photoKind,
+    photoAsset: incoming.photoAsset ?? prev.photoAsset,
   };
 }
 
@@ -4068,7 +4433,7 @@ function useAllDsTokens(cfg, designRel, activeName) {
 // `seed` is the resolved current colour (hex). Drag updates the picker UI live;
 // commits on pointer-up (one source write per drag); the hex field commits on
 // blur/Enter.
-function ColorPicker({ seed, onApply }) {
+function ColorPicker({ seed, label, onApply }) {
   const [hsv, setHsv] = useState(() => rgbToHsv(hexToRgb(seed || '#000000')));
   const hsvRef = useRef(hsv);
   hsvRef.current = hsv;
@@ -4123,6 +4488,31 @@ function ColorPicker({ seed, onApply }) {
     document.addEventListener('pointermove', move);
     document.addEventListener('pointerup', up);
   };
+  // Keyboard equivalents for dragSV/dragHue (feature-photo-editor follow-up
+  // debt, Task 18) — the pad + hue bar were pointer-only. Arrow keys nudge
+  // the same `setHsv`/`onApply` path the drag handlers use; shift = a bigger
+  // step (mirrors makeScrub's shift=×10 modifier convention elsewhere).
+  const nudgeHsv = (patch) => {
+    const next = { ...hsvRef.current, ...patch };
+    setHsv(next);
+    onApply(rgbToHex(hsvToRgb(next)));
+  };
+  const onSvKeyDown = (e) => {
+    const step = e.shiftKey ? 0.1 : 0.02;
+    const deltas = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, step], ArrowDown: [0, -step] };
+    const d = deltas[e.key];
+    if (!d) return;
+    e.preventDefault();
+    nudgeHsv({ s: clamp01(hsvRef.current.s + d[0]), v: clamp01(hsvRef.current.v + d[1]) });
+  };
+  const onHueKeyDown = (e) => {
+    const step = e.shiftKey ? 20 : 2;
+    const deltas = { ArrowLeft: -step, ArrowRight: step };
+    const d = deltas[e.key];
+    if (d == null) return;
+    e.preventDefault();
+    nudgeHsv({ h: Math.min(360, Math.max(0, hsvRef.current.h + d)) });
+  };
   const eyedrop = async () => {
     try {
       // EyeDropper is Chromium-only; guarded.
@@ -4138,15 +4528,43 @@ function ColorPicker({ seed, onApply }) {
     }
   };
 
+  // handoff — RGB numeric fields (design parity). Editing one re-derives hsv.
+  const rgb = hsvToRgb(hsv);
+  const setRgb = (patch) => {
+    const next = { ...rgb, ...patch };
+    const h = rgbToHsv({ r: clamp01(next.r / 255) * 255, g: clamp01(next.g / 255) * 255, b: clamp01(next.b / 255) * 255 });
+    setHsv(h);
+    onApply(rgbToHex(hsvToRgb(h)));
+  };
   return (
     <div className="st-cp-cpick">
+      {/* hex + swatch on top (design), then the SV pad, controls, RGB */}
+      <div className="st-cp-cpick-hexrow">
+        <span className="st-cp-cpick-hexsw" style={{ background: hex }} />
+        <input
+          className="st-cp-cpick-hex"
+          type="text"
+          value={hex}
+          aria-label={label ? `${label} hex value` : 'hex value'}
+          onChange={(e) => {
+            const v = e.target.value;
+            if (/^#?[0-9a-f]{6}$/i.test(v)) setHsv(rgbToHsv(hexToRgb(v)));
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') onApply(e.currentTarget.value);
+          }}
+          onBlur={(e) => onApply(e.currentTarget.value)}
+          onFocus={(e) => e.currentTarget.select()}
+        />
+      </div>
       <button
         type="button"
         ref={svRef}
         className="st-cp-cpick-sv"
-        aria-label="saturation and value"
+        aria-label={label ? `${label} saturation and value` : 'saturation and value'}
         style={{ background: `hsl(${hsv.h} 100% 50%)` }}
         onPointerDown={dragSV}
+        onKeyDown={onSvKeyDown}
       >
         <span className="st-cp-cpick-svwhite" />
         <span className="st-cp-cpick-svblack" />
@@ -4167,30 +4585,31 @@ function ColorPicker({ seed, onApply }) {
             <StIcon name="eyedropper" size={14} />
           </button>
         ) : null}
+        <span className="st-cp-cpick-preview" style={{ background: hex }} aria-hidden="true" />
         <button
           type="button"
           ref={hueRef}
           className="st-cp-cpick-hue"
-          aria-label="hue"
+          aria-label={label ? `${label} hue` : 'hue'}
           onPointerDown={dragHue}
+          onKeyDown={onHueKeyDown}
         >
           <span className="st-cp-cpick-huethumb" style={{ left: `${(hsv.h / 360) * 100}%` }} />
         </button>
       </div>
-      <input
-        className="st-cp-fin"
-        type="text"
-        value={hex}
-        aria-label="hex value"
-        onChange={(e) => {
-          const v = e.target.value;
-          if (/^#?[0-9a-f]{6}$/i.test(v)) setHsv(rgbToHsv(hexToRgb(v)));
-        }}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') onApply(e.currentTarget.value);
-        }}
-        onBlur={(e) => onApply(e.currentTarget.value)}
-      />
+      <div className="st-cp-cpick-rgb">
+        {['r', 'g', 'b'].map((k) => (
+          <label key={k} className="st-cp-cpick-rgbf">
+            <input
+              aria-label={k.toUpperCase()}
+              value={Math.round(rgb[k])}
+              onChange={(e) => setRgb({ [k]: clamp01((Number.parseFloat(e.target.value) || 0) / 255) * 255 })}
+              onFocus={(e) => e.currentTarget.select()}
+            />
+            <span>{k.toUpperCase()}</span>
+          </label>
+        ))}
+      </div>
     </div>
   );
 }
@@ -4200,7 +4619,7 @@ function ColorPicker({ seed, onApply }) {
 // `kind='value'` a variable list (pretty name + resolved value, à la Figma's
 // variable picker). Picking commits `var(--token)`. Portals to <body> +
 // fixed-positions from the trigger rect so the panel's overflow never clips it.
-function TokenPopover({ kind, groups, current, onPick, label, swatchBg, seedHex, activeDs }) {
+function TokenPopover({ kind, groups, current, onPick, label, swatchBg, seedHex, activeDs, swatchClassName }) {
   const [open, setOpen] = useState(false);
   const [pos, setPos] = useState(null);
   // Phase 12.3 (#4) — colour popover gets two tabs: a normal colour input
@@ -4256,26 +4675,48 @@ function TokenPopover({ kind, groups, current, onPick, label, swatchBg, seedHex,
     const onKey = (e) => {
       if (e.key === 'Escape') setOpen(false);
     };
-    const dismiss = () => setOpen(false);
-    // The popover is fixed-positioned from the trigger rect, so a scroll of the
-    // PANEL detaches it → dismiss. But scrolling INSIDE the popover (its own
-    // overflow list) must NOT close it (the user couldn't scroll the variables).
+    // Task 6 (feature-inspector-controls-redesign) — RE-ANCHOR on scroll/resize
+    // instead of dismissing. `place()` computes viewport-relative coordinates
+    // from `getBoundingClientRect()`, but this fixed-positioned popover's actual
+    // containing block is whichever ANCESTOR (if any) has a transform/filter/
+    // will-change — e.g. the right panel's mount-in `st-panel-in` transform —
+    // not necessarily the viewport. Re-running place() keeps it glued to the
+    // trigger through any layout change instead of vanishing on the first
+    // scroll (the old dismiss-on-scroll workaround for the same root cause).
     const onScroll = (e) => {
       if (popRef.current?.contains(e.target)) return;
-      setOpen(false);
+      place();
     };
     document.addEventListener('pointerdown', onDoc, true);
     document.addEventListener('keydown', onKey);
-    window.addEventListener('resize', dismiss);
+    window.addEventListener('resize', place);
     document.addEventListener('scroll', onScroll, true);
     return () => {
       document.removeEventListener('pointerdown', onDoc, true);
       document.removeEventListener('keydown', onKey);
-      window.removeEventListener('resize', dismiss);
+      window.removeEventListener('resize', place);
       document.removeEventListener('scroll', onScroll, true);
     };
   }, [open]);
 
+  // Transform-ancestor compensation — regardless of WHICH ancestor ends up
+  // establishing this fixed popover's containing block, measure where it
+  // actually landed vs where `place()` intended (viewport-relative) and cancel
+  // out the delta. This is correct independent of the cause, so it doesn't
+  // require hunting down every transform/filter/will-change that could ever
+  // apply between `document.body` (the portal target) and this element.
+  // Converges in at most one correction: once the delta is compensated, the
+  // measured rect matches the intended position and the effect is a no-op.
+  useEffect(() => {
+    if (!open || !pos || !popRef.current) return;
+    const r = popRef.current.getBoundingClientRect();
+    const dx = pos.left - r.left;
+    const dy = pos.top - r.top;
+    if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
+      setPos((p) => (p ? { ...p, left: p.left + dx, top: p.top + dy } : p));
+    }
+  }, [open, pos]);
+
   // Pick a token. #3 — apply CORRECTLY across design systems: a token from the
   // canvas's OWN active DS commits `var(--token)` (round-trips + resolves right);
   // a token from ANOTHER DS commits its RESOLVED value (literal), because
@@ -4373,7 +4814,7 @@ function TokenPopover({ kind, groups, current, onPick, label, swatchBg, seedHex,
         <button
           type="button"
           ref={btnRef}
-          className={`st-cp-swatch st-cp-swatch--mini st-cp-swatch--trigger${bound ? ' is-bound' : ''}`}
+          className={`${swatchClassName || 'st-cp-swatch st-cp-swatch--mini st-cp-swatch--trigger'}${bound && !swatchClassName ? ' is-bound' : ''}`}
           aria-haspopup="dialog"
           aria-expanded={open}
           aria-label={label || 'pick a colour'}
@@ -4467,7 +4908,7 @@ function TokenPopover({ kind, groups, current, onPick, label, swatchBg, seedHex,
   );
 }
 
-function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoRedo }) {
+function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoRedo, mode, onSetMode }) {
   const editable = !!el.id;
   const computed = el.computed || {};
   // Phase 12.3 — optimistic local overlay over the selection's authored / custom
@@ -4519,7 +4960,6 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
     Appearance: true,
     Advanced: false,
   });
-  const [split, setSplit] = useState(false);
 
   // Phase 12.3 — auto-expand Advanced when the selected element carries custom
   // CSS props / HTML attrs, so a just-added (or pre-existing) custom value is
@@ -4530,6 +4970,28 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
   useEffect(() => {
     if (hasCustom) setOpen((o) => (o.Advanced ? o : { ...o, Advanced: true }));
   }, [el.id, hasCustom]);
+  // DDR-171 — Designer mode's Position cluster mirrors the same auto-expand
+  // precedent: collapsed by default (position is the rare case), auto-opens
+  // the moment the element actually has a non-static position so the inset
+  // fields the user just set (or that came from the source) aren't hidden.
+  const hasCustomPosition = (authored.position || cssHint(computed.position) || 'static') !== 'static';
+  useEffect(() => {
+    if (hasCustomPosition) setOpen((o) => (o['d:Position'] ? o : { ...o, 'd:Position': true }));
+  }, [el.id, hasCustomPosition]);
+
+  // DDR-171 — the panel's vocabulary mode: 'advanced' (today's raw-CSS panel,
+  // unchanged, still the default — zero behavior change for existing users) or
+  // 'designer' (the Figma-vocabulary regroup). Lifted to App state (DDR-171
+  // follow-up) so the same preference is controllable from BOTH the in-panel
+  // corner toggle AND Settings → Appearance, and the two never diverge — the
+  // exact single-source-of-truth pattern `theme` uses. App owns the
+  // `maude-cp-mode` localStorage persistence; here it's a controlled prop.
+  const setMode = onSetMode;
+  // Designer-mode per-cluster "···" disclosure state (Auto layout/Wrap,
+  // Size/Min-Max, Position/z-index, Text/extras) — keyed by cluster name, kept
+  // in-memory only (unlike `open`, not persisted; matches the disclosure being
+  // a "peek", not a durable preference).
+  const [designerMore, setDesignerMore] = useState({});
 
   async function post(url, payload, key) {
     setStatus((s) => ({ ...s, [key]: 'saving' }));
@@ -4647,30 +5109,50 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
   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>
-        ))}
+      // handoff — a proper inspector row: "Width sizing" / "Height sizing" label
+      // in the label column, the shared Segmented right-aligned in the control
+      // column (aligned with the number inputs below), input-matching height.
+      <div className="st-cp-moderow" key={`mode-${axis}`}>
+        <span className="st-cp-modelabel">{axis === 'width' ? 'Width sizing' : 'Height sizing'}</span>
+        <div className="st-cp-modeseg" role="group" aria-label={`${axis} sizing mode`}>
+          <Segmented
+            value={cur}
+            ariaLabel={`${axis} sizing`}
+            options={[{ value: 'fixed', label: 'fixed' }, { value: 'hug', label: 'hug' }, { value: 'fill', label: 'fill' }]}
+            onChange={(m) => applySizing(axis, m)}
+          />
+        </div>
       </div>
     );
   };
+  // DDR-171 — Designer mode's Auto-layout alignment: `AlignPad`'s 9-cell grid
+  // maps to the TWO real CSS axes (`justify-content` = main axis,
+  // `align-items` = cross axis), which axis is "horizontal" vs "vertical"
+  // depending on `flex-direction`. Only the 3 positional align-items values
+  // (start/center/end) round-trip through the pad — `stretch` reads as the
+  // pad's center cell (closest visual analog) but the pad never WRITES
+  // `stretch`; that stays an Advanced-mode-only value, same as Figma's own
+  // alignment pad (no "stretch" cell — it's a separate control there too).
+  const AP_JC = ['flex-start', 'center', 'flex-end'];
+  const AP_AI = ['flex-start', 'center', 'flex-end'];
+  const AP_ROWS = ['t', 'c', 'b'];
+  const AP_COLS = ['l', 'c', 'r'];
+  const alignPadCell = () => {
+    const isRow = !(authored['flex-direction'] || cssHint(computed['flex-direction']) || 'row').startsWith('column');
+    const jcPos = Math.max(0, AP_JC.indexOf(authored['justify-content'] || cssHint(computed['justify-content']) || 'flex-start'));
+    const aiRaw = authored['align-items'] || cssHint(computed['align-items']) || 'stretch';
+    const aiPos = aiRaw === 'stretch' ? 1 : Math.max(0, AP_AI.indexOf(aiRaw));
+    const [h, v] = isRow ? [jcPos, aiPos] : [aiPos, jcPos];
+    return AP_ROWS[v] + AP_COLS[h];
+  };
+  const setAlignPadCell = (cell) => {
+    const v = AP_ROWS.indexOf(cell[0]);
+    const h = AP_COLS.indexOf(cell[1]);
+    const isRow = !(authored['flex-direction'] || cssHint(computed['flex-direction']) || 'row').startsWith('column');
+    const [jcPos, aiPos] = isRow ? [h, v] : [v, h];
+    commit('justify-content', AP_JC[jcPos]);
+    commit('align-items', AP_AI[aiPos]);
+  };
   // 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
@@ -4686,69 +5168,6 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
       onUndoRedo?.('redo');
     }
   };
-  // Phase 12.3 (W2.2) — Figma/Webflow scrub: drag a number field horizontally to
-  // change its value. Live preview via optimistic apply on every move (no source
-  // write); commits ONCE on release. A pointer that doesn't pass a 3px threshold
-  // is a normal click (focus to type). `opts.step` modifiers: shift = ×10, alt =
-  // ×0.1. `opts.sides` enables Webflow box-model modifiers: alt = symmetric pair,
-  // alt+shift = all four (else just this side). `opts.min` clamps (default 0).
-  const makeScrub = (prop, opts = {}) => (e) => {
-    if (e.button !== 0) return;
-    const input = e.currentTarget;
-    const startX = e.clientX;
-    const baseN =
-      Number.parseFloat(
-        cssSplitUnit(authored[prop] ?? cssHint(computed[prop]) ?? '0').n || '0'
-      ) || 0;
-    const unit = opts.unitless
-      ? ''
-      : opts.unit || cssSplitUnit(authored[prop] ?? '').unit || 'px';
-    const min = opts.min ?? 0;
-    const fmt = (n) => (opts.unitless ? `${n}` : `${n}${unit}`);
-    const sidesFor = (ev) => {
-      if (!opts.sides) return [prop];
-      if (ev.altKey && ev.shiftKey) return opts.sides.all;
-      if (ev.altKey) return opts.sides.pair;
-      return [prop];
-    };
-    let scrubbing = false;
-    let last = baseN;
-    const move = (ev) => {
-      const dx = ev.clientX - startX;
-      if (!scrubbing && Math.abs(dx) < 3) return;
-      if (!scrubbing) {
-        scrubbing = true;
-        document.body.classList.add('st-scrubbing');
-      }
-      ev.preventDefault();
-      const granular = opts.sides ? 1 : ev.shiftKey ? 10 : ev.altKey ? 0.1 : 1;
-      last = Math.round((baseN + dx * granular) * 100) / 100;
-      if (last < min) last = min;
-      const sides = sidesFor(ev);
-      // Live-update the dragged field AND, for a box-model multi-side scrub, the
-      // sibling box inputs so the whole pair / four-up move shows in the panel —
-      // not just the one being dragged (W2.2 feedback).
-      if (input) input.value = String(last);
-      if (opts.sides && sides.length > 1) {
-        const box = input?.closest('.st-cp-box');
-        for (const p of sides) {
-          if (p === prop) continue;
-          const sib = box?.querySelector(`.st-cp-boxv[aria-label="${p}"]`);
-          if (sib) sib.value = String(last);
-        }
-      }
-      for (const p of sides) optimistic(p, fmt(last));
-    };
-    const up = (ev) => {
-      document.removeEventListener('pointermove', move);
-      document.removeEventListener('pointerup', up);
-      if (!scrubbing) return;
-      document.body.classList.remove('st-scrubbing');
-      for (const p of sidesFor(ev)) commit(p, fmt(last));
-    };
-    document.addEventListener('pointermove', move);
-    document.addEventListener('pointerup', up);
-  };
   const provOf = (prop) => {
     const v = authored[prop];
     if (!v) return 'inherit';
@@ -4811,16 +5230,21 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
     );
   };
 
-  const row = (prop, control, provKind) => {
+  // `labelOverride` (DDR-171 — Designer mode) swaps BOTH the visible label text
+  // AND the title tooltip together, so they never drift out of sync. Optional
+  // and additive — every Advanced-mode call site omits it and renders exactly
+  // as before (label = title = the raw CSS property name).
+  const row = (prop, control, provKind, labelOverride) => {
     // #1 bigger-bet — scannable diff: a fully-unset single-prop row is dimmed so
     // the handful of overridden rows pop (Webflow/Framer model). Composite rows
     // (border — they pass an explicit provKind) are never dimmed.
     const unset = provKind === undefined && !authored[prop];
+    const label = labelOverride ?? prop;
     return (
       <div className={`st-cp-row${unset ? ' is-unset' : ''}`} key={prop}>
         {provDot(prop, provKind)}
-        <label className="st-cp-label" title={prop}>
-          {prop}
+        <label className="st-cp-label" title={label}>
+          {label}
         </label>
         <div className="st-cp-ctl">{control}</div>
       </div>
@@ -4882,6 +5306,8 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
       'border-style',
       'border-color',
       'box-shadow',
+      'filter',
+      'mix-blend-mode',
       'opacity',
       'transform',
       'transform-origin',
@@ -4909,22 +5335,86 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
             </span>
             {name}
           </button>
-          {dirty ? (
-            <button
-              type="button"
-              className="st-cp-secreset"
-              aria-label={`reset ${name} section to original`}
-              title={`reset ${name}`}
-              onClick={() => resetSection(name)}
-            >
-              ⟲
-            </button>
-          ) : null}
+          {/* handoff — reset always present (design), dimmed when nothing to reset. */}
+          <button
+            type="button"
+            className={`st-cp-secreset${dirty ? '' : ' is-quiet'}`}
+            aria-label={`reset ${name} section to original`}
+            title={`reset ${name}`}
+            disabled={!dirty}
+            onClick={() => resetSection(name)}
+          >
+            <Lu as={LuRotateCw} size={12} />
+          </button>
+        </div>
+        {/* animated collapse — grid-rows 0fr→1fr keeps the DOM + interpolates
+            height (feature-inspector-controls-redesign handoff). */}
+        <div className={`st-cp-sec-anim${open[name] ? ' is-open' : ''}`}>
+          <div className="st-cp-sec-inner">{body}</div>
+        </div>
+      </section>
+    );
+  };
+
+  // DDR-171 — Designer mode's cluster wrapper. Mirrors `sec()`'s exact chrome
+  // (caret, reset, animated collapse — reuses `.st-cp-sec`/`.st-cp-sechd`/
+  // `.st-cp-sec-anim` verbatim, no new CSS shape) but takes an explicit
+  // `props` reset-list instead of looking one up in `SECTION_PROPS`, because
+  // Designer clusters cut across Advanced-mode section boundaries and don't
+  // map 1:1 onto it (e.g. "Auto layout" pulls from both Layout and Size).
+  // Open-state lives in the SAME `open` object under a `d:`-prefixed key so no
+  // second piece of state is needed; `defaultOpen=false` is how the Position
+  // cluster starts collapsed (see `hasCustomPosition` auto-expand above).
+  const dsec = (name, props, body, defaultOpen = true) => {
+    const key = `d:${name}`;
+    const isOpen = open[key] === undefined ? defaultOpen : open[key];
+    const dirty = props.some((p) => authored[p]);
+    return (
+      <section className="st-cp-sec" key={key}>
+        <div className="st-cp-sechd-row">
+          <button
+            type="button"
+            className="st-cp-sechd"
+            aria-expanded={isOpen}
+            onClick={() => setOpen((o) => ({ ...o, [key]: !isOpen }))}
+          >
+            <span className="st-cp-caret" aria-hidden="true">
+              {isOpen ? '▾' : '▸'}
+            </span>
+            {name}
+          </button>
+          <button
+            type="button"
+            className={`st-cp-secreset${dirty ? '' : ' is-quiet'}`}
+            aria-label={`reset ${name} to original`}
+            title={`reset ${name}`}
+            disabled={!dirty}
+            onClick={() => props.forEach((p) => { if (authored[p]) reset(p); })}
+          >
+            <Lu as={LuRotateCw} size={12} />
+          </button>
+        </div>
+        <div className={`st-cp-sec-anim${isOpen ? ' is-open' : ''}`}>
+          <div className="st-cp-sec-inner">{body}</div>
         </div>
-        {open[name] ? body : null}
       </section>
     );
   };
+  // A cluster's "···" disclosure toggle for its less-common rows (Figma's own
+  // per-panel overflow affordance) — distinct from the cluster's own
+  // open/collapse caret above. `designerMore[key]` gates the extra rows.
+  const moreBtn = (key) => (
+    <button
+      type="button"
+      className="st-cp-clustermore"
+      aria-expanded={!!designerMore[key]}
+      aria-label={designerMore[key] ? `${key} — fewer options` : `${key} — more options`}
+      title={designerMore[key] ? 'fewer' : 'more'}
+      onClick={() => setDesignerMore((m) => ({ ...m, [key]: !m[key] }))}
+    >
+      {designerMore[key] ? '▴' : '···'}
+    </button>
+  );
 
   // native <select> committing a CSS value directly
   const csel = (prop, list) => (
@@ -4945,6 +5435,165 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
     </select>
   );
 
+  // ── feature-inspector-controls-redesign handoff — the design's control set,
+  // wired to CssKnobs' CSS-string commit lane. ────────────────────────────────
+  const flatTokens = (familyKey) => tokenGroups(familyKey).flatMap((g) => (g.names || []).map((n) => ({ name: n, value: g.vals?.[n] || '' })));
+  // enum → lucide icon button group (commits the raw CSS keyword)
+  const iconseg = (prop, options) => (
+    <IconButtonGroup value={authored[prop] || cssHint(computed[prop]) || options[0].value} ariaLabel={prop} options={options} onChange={(v) => commit(prop, v)} />
+  );
+  // number + unit + ◇ design-token binding (space / radius / type families)
+  const vtok = (prop, familyKey, opts = {}) => {
+    const cur = cssSplitUnit(authored[prop] ?? '');
+    const unitless = CSS_UNITLESS.has(prop);
+    const av = authored[prop] ?? '';
+    const bound = typeof av === 'string' && /var\(\s*--/.test(av);
+    const unit = unitless ? '' : cur.unit && cur.unit !== 'auto' ? cur.unit : 'px';
+    const hintN = Number.parseFloat(cssSplitUnit(cssHint(computed[prop]) ?? '').n) || 0;
+    const numVal = cur.n !== '' && cur.n != null ? Number.parseFloat(cur.n) || 0 : hintN;
+    const lead = PROP_LEAD[prop];
+    return (
+      <ValueTokenField
+        value={bound ? av : numVal}
+        tokens={flatTokens(familyKey)}
+        ariaLabel={prop}
+        min={opts.min ?? 0}
+        lead={lead ? (lead.node ?? lead.t) : undefined}
+        unitSlot={unitless ? null : <UnitSelect units={CSS_UNITS} value={cur.unit || 'px'} ariaLabel={`${prop} unit`} onChange={(u) => commit(prop, u === 'auto' ? 'auto' : `${cur.n || '0'}${u}`)} />}
+        onChange={(v) => commit(prop, typeof v === 'string' ? v : unitless ? `${v}` : `${v}${unit}`)}
+      />
+    );
+  };
+  // border-radius → uniform field + ▢ detach → 2×2 corner quad
+  const radiusControl = () => {
+    const parse = (p) => Number.parseFloat(cssSplitUnit(authored[p] ?? authored['border-radius'] ?? cssHint(computed[p]) ?? cssHint(computed['border-radius']) ?? '0').n) || 0;
+    const corners = { tl: parse('border-top-left-radius'), tr: parse('border-top-right-radius'), bl: parse('border-bottom-left-radius'), br: parse('border-bottom-right-radius') };
+    const onCorners = (c) => {
+      const uniform = c.tl === c.tr && c.tr === c.bl && c.bl === c.br;
+      if (uniform) {
+        ['border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'].forEach((p) => { if (authored[p]) reset(p); });
+        commit('border-radius', `${c.tl}px`);
+      } else {
+        commit('border-top-left-radius', `${c.tl}px`);
+        commit('border-top-right-radius', `${c.tr}px`);
+        commit('border-bottom-left-radius', `${c.bl}px`);
+        commit('border-bottom-right-radius', `${c.br}px`);
+      }
+    };
+    const lead = PROP_LEAD['border-radius'];
+    return <RadiusControl corners={corners} lead={lead ? (lead.node ?? lead.t) : undefined} onCorners={onCorners} />;
+  };
+  // border composite (width + style + colour) — DDR-171 pulled this out of the
+  // Advanced-mode Appearance row inline JSX so Designer mode's "Stroke"
+  // cluster (Task 6) can reuse the exact same control, not a re-implementation.
+  const borderControl = () => (
+    <div className="st-cp-border">
+      {num('border-width', null, { fixedUnit: 'px' })}
+      <select
+        className="st-cp-nsel st-cp-nsel--mini"
+        aria-label="border-style"
+        value={CSS_BORDER_STYLES.includes(authored['border-style']) ? authored['border-style'] : ''}
+        onChange={(e) => commit('border-style', e.target.value)}
+      >
+        <option value="" disabled>
+          style
+        </option>
+        {CSS_BORDER_STYLES.map((s) => (
+          <option key={s} value={s}>
+            {s}
+          </option>
+        ))}
+      </select>
+      <TokenPopover
+        kind="color"
+        groups={tokenGroups('color')}
+        current={authored['border-color']}
+        activeDs={_activeDs}
+        swatchBg={computed['border-color'] || authored['border-color'] || ''}
+        seedHex={cssColorToHex(computed['border-color'] || authored['border-color']) || '#000000'}
+        onPick={(v) => commit('border-color', v)}
+        label="border colour"
+      />
+    </div>
+  );
+  // rotation dial, reading/writing the rotate() term of `transform`
+  const rotationControl = () => {
+    const t = authored.transform || cssHint(computed.transform) || '';
+    const m = /rotate\(\s*(-?\d+(?:\.\d+)?)deg\s*\)/.exec(t);
+    const deg = (((m ? Number.parseFloat(m[1]) : 0) % 360) + 360) % 360;
+    const setDeg = (d) => {
+      const norm = ((d % 360) + 360) % 360;
+      const base = (authored.transform || '').replace(/\s*rotate\([^)]*\)\s*/g, ' ').trim();
+      commit('transform', `${base ? `${base} ` : ''}rotate(${norm}deg)`.trim());
+    };
+    return (
+      <div className="st-cp-num" style={{ border: 0, background: 'transparent', gap: 'var(--space-2)' }}>
+        <AngleDial value={deg} onChange={setDeg} />
+        <NumberField value={deg} min={0} max={360} ariaLabel="rotation" lead={<Lu as={LuRotateCw} />} steppers={false} unitSlot={<span className="st-cp-numsuffix" aria-hidden="true">°</span>} onCommit={setDeg} />
+      </div>
+    );
+  };
+  // DDR-171 — `filter: blur(Npx)`, scoped to blur-only for v1 (not a full
+  // filter-function editor). Local parse/serialize (unlike most rows this
+  // doesn't pass the raw string straight to `commit`) — kept as a closure here,
+  // not a top-level utility, so it stays governed by the "no new primitives"
+  // constraint. A non-blur `filter` value (set via Advanced's raw-CSS hatch)
+  // reads as 0 here rather than being clobbered — only written back once the
+  // user actually commits a blur amount.
+  const blurControl = () => {
+    const f = authored.filter || cssHint(computed.filter) || '';
+    const m = /blur\(\s*(-?\d+(?:\.\d+)?)px\s*\)/.exec(f);
+    const px = m ? Number.parseFloat(m[1]) : 0;
+    const setBlur = (n) => {
+      const base = (authored.filter || '').replace(/\s*blur\([^)]*\)\s*/g, ' ').trim();
+      commit('filter', n > 0 ? `${base ? `${base} ` : ''}blur(${n}px)`.trim() : base || 'none');
+    };
+    return <NumberField value={px} min={0} ariaLabel="filter blur" unitSlot={<span className="st-cp-numsuffix" aria-hidden="true">px</span>} onCommit={setBlur} />;
+  };
+  // handoff — shown as 0–100 % (design), stored as the CSS 0–1 value. Pulled
+  // out (DDR-171) so Designer mode's "Opacity" cluster reuses it verbatim.
+  const opacityControl = () => {
+    const a = authored.opacity;
+    const raw = a != null && a !== '' ? Number.parseFloat(a) : Number.parseFloat(cssHint(computed.opacity)) || 1;
+    const pct = Math.round((Number.isNaN(raw) ? 1 : raw) * 100);
+    return (
+      <SliderField
+        key={`opacity:${a ?? ''}`}
+        value={pct}
+        min={0}
+        max={100}
+        step={1}
+        unit="%"
+        ariaLabel="opacity"
+        onInput={(n) => optimistic('opacity', String(n / 100))}
+        onCommit={(n) => commit('opacity', String(n / 100))}
+      />
+    );
+  };
+  // B / I / U quick-style toggle group → font-weight / font-style / text-decoration
+  const textStyleToggle = () => {
+    const isBold = Number.parseInt(authored['font-weight'] || cssHint(computed['font-weight']) || '400', 10) >= 600;
+    const isItalic = (authored['font-style'] || cssHint(computed['font-style'])) === 'italic';
+    const isUnder = /underline/.test(authored['text-decoration'] || cssHint(computed['text-decoration']) || '');
+    return (
+      <IconToggleGroup
+        value={{ b: isBold, i: isItalic, u: isUnder }}
+        ariaLabel="text style"
+        options={[{ value: 'b', node: <Lu as={LuBold} />, label: 'Bold' }, { value: 'i', node: <Lu as={LuItalic} />, label: 'Italic' }, { value: 'u', node: <Lu as={LuUnderline} />, label: 'Underline' }]}
+        onToggle={(k) => {
+          if (k === 'b') commit('font-weight', isBold ? '400' : '700');
+          else if (k === 'i') commit('font-style', isItalic ? 'normal' : 'italic');
+          else commit('text-decoration', isUnder ? 'none' : 'underline');
+        }}
+      />
+    );
+  };
+  const DIR_OPTS = [{ value: 'row', node: <Lu as={LuColumns3} />, label: 'Row' }, { value: 'column', node: <Lu as={LuRows3} />, label: 'Column' }];
+  const JUSTIFY_OPTS = [{ value: 'flex-start', node: <Lu as={LuJustifyStart} />, label: 'Start' }, { value: 'center', node: <Lu as={LuJustifyCenter} />, label: 'Center' }, { value: 'flex-end', node: <Lu as={LuJustifyEnd} />, label: 'End' }, { value: 'space-between', node: <Lu as={LuSpaceBetween} />, label: 'Space between' }];
+  const ALIGNITEMS_OPTS = [{ value: 'flex-start', node: <Lu as={LuVJustifyStart} />, label: 'Start' }, { value: 'center', node: <Lu as={LuVJustifyCenter} />, label: 'Center' }, { value: 'flex-end', node: <Lu as={LuVJustifyEnd} />, label: 'End' }, { value: 'stretch', node: <Lu as={LuStretch} />, label: 'Stretch' }];
+  const TEXTALIGN_OPTS = [{ value: 'left', node: <Lu as={LuAlignLeft} />, label: 'Left' }, { value: 'center', node: <Lu as={LuAlignCenter} />, label: 'Center' }, { value: 'right', node: <Lu as={LuAlignRight} />, label: 'Right' }, { value: 'justify', node: <Lu as={LuAlignJustify} />, label: 'Justify' }];
+  const OVERFLOW_OPTS = [{ value: 'visible', node: <Lu as={LuEye} />, label: 'Visible' }, { value: 'hidden', node: <Lu as={LuScissors} />, label: 'Hidden' }, { value: 'scroll', node: <Lu as={LuScrollText} />, label: 'Scroll' }];
+
   // token quick-pick — Figma-style POPOVER (W2.1) listing the DS variables for
   // this property (name + resolved value), grouped per design system (W3);
   // picking writes var(--token). `familyKey` selects the token family.
@@ -4962,6 +5611,31 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
     ) : null;
   };
 
+  // Select-all-on-focus (deferred past the browser's own click-caret placement
+  // so a SECOND click, already focused, places the caret instead) — the
+  // interaction-model rule applied to the CssKnobs fields that stay bespoke
+  // <input>s (free text, box-model cells) rather than the shared NumberField.
+  const selectAllOnFocus = (e) => {
+    const el = e.currentTarget;
+    requestAnimationFrame(() => {
+      if (document.activeElement === el) el.select();
+    });
+  };
+  // Arrow-key stepping (±1, Shift ×10) for the bespoke box-model cells — same
+  // keyboard model NumberField gives the main fields, hand-rolled here because
+  // these stay compact <input>s (no room for NumberField's handle+stepper
+  // chrome in a 36×24 box-model cell). Returns true if it handled the key.
+  const stepBoxInput = (e, commitFn) => {
+    if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return false;
+    e.preventDefault();
+    const mult = e.shiftKey ? 10 : 1;
+    const dir = e.key === 'ArrowUp' ? 1 : -1;
+    const n = (Number.parseFloat(e.currentTarget.value) || 0) + dir * mult;
+    e.currentTarget.value = String(n);
+    commitFn(n);
+    return true;
+  };
+
   // free text input — raw value or var(--token), commits on blur/Enter
   const text = (prop) => (
     <input
@@ -4970,6 +5644,7 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
       aria-label={prop}
       defaultValue={authored[prop] ?? ''}
       placeholder={cssHint(computed[prop]) || '—'}
+      onFocus={selectAllOnFocus}
       onKeyDown={(e) => {
         if (e.key === 'Enter') e.currentTarget.blur();
       }}
@@ -4977,79 +5652,46 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
     />
   );
 
-  // number + steppers + unit-select (+ optional token quick-pick after)
+  // number + steppers + unit-select (+ optional token quick-pick after) — built
+  // on the shared NumberField (feature-inspector-controls-redesign): the drag
+  // handle moves to the leading icon/grip (never the input body, so click-to-
+  // type + select-all-on-focus work), and arrow-key stepping comes for free.
   const num = (prop, tokenList, opts = {}) => {
     const cur = cssSplitUnit(authored[prop] ?? '');
     // Unitless CSS properties — a bare number must commit WITHOUT a unit suffix
     // (line-height: 1.5px ≠ 1.5 — knob-smoke finding, 2026-06-12).
     const unitless = CSS_UNITLESS.has(prop);
-    const unit = unitless ? '' : cur.unit && cur.unit !== 'auto' ? cur.unit : 'px';
-    const bump = (d) => {
-      const base = Number.parseFloat(cur.n || cssHint(computed[prop]) || '0') || 0;
-      commit(prop, `${Math.round((base + d) * 100) / 100}${unit}`);
-    };
+    // `opts.fixedUnit` — a px-only field (border-width) skips the unit <select>
+    // entirely so the compact border-cluster row (width + style + swatch) has
+    // room to fit at the panel's 260-304px widths (Task 5 overflow fix).
+    const unit = unitless ? '' : opts.fixedUnit || (cur.unit && cur.unit !== 'auto' ? cur.unit : 'px');
     const lead = PROP_LEAD[prop];
+    // Unset (no authored value) shows the computed/inherited value as the
+    // starting number — same value the old placeholder hinted at; the row's own
+    // dimming (`row()`'s `is-unset`) is what signals "inherited", not this field.
+    const hintN = Number.parseFloat(cssSplitUnit(cssHint(computed[prop]) ?? '').n) || 0;
+    const shownN = cur.n !== '' && cur.n != null ? Number.parseFloat(cur.n) || 0 : hintN;
     return (
       <>
-        <div className="st-cp-num">
-          {lead ? (
-            <span className="st-cp-numlead" aria-hidden="true">
-              {lead.t ? lead.t : <StIcon name={lead.icon} size={12} />}
-            </span>
-          ) : null}
-          <input
-            className="st-cp-numin st-cp-scrub"
-            key={`${prop}:${authored[prop] ?? ''}`}
-            aria-label={prop}
-            defaultValue={cur.unit && cur.unit !== '' ? cur.n : (authored[prop] ?? '')}
-            placeholder={cssHint(computed[prop]) || '—'}
-            onPointerDown={makeScrub(prop, { unitless, unit, min: opts.min })}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') e.currentTarget.blur();
-            }}
-            onBlur={(e) => {
-              const raw = e.currentTarget.value.trim();
-              if (!raw) return;
-              commit(prop, /[a-z%(]/i.test(raw) ? raw : `${raw}${unit}`);
-            }}
-          />
-          <span className="st-cp-step">
-            <button
-              type="button"
-              className="st-cp-stepb"
-              tabIndex={-1}
-              aria-label={`increase ${prop}`}
-              onClick={() => bump(1)}
-            >
-              ▲
-            </button>
-            <button
-              type="button"
-              className="st-cp-stepb"
-              tabIndex={-1}
-              aria-label={`decrease ${prop}`}
-              onClick={() => bump(-1)}
-            >
-              ▼
-            </button>
-          </span>
-          {unitless ? null : (
-          <select
-            className="st-cp-unitsel"
-            aria-label={`${prop} unit`}
-            value={cur.unit || 'px'}
-            onChange={(e) =>
-              commit(prop, e.target.value === 'auto' ? 'auto' : `${cur.n || '0'}${e.target.value}`)
-            }
-          >
-            {CSS_UNITS.map((u) => (
-              <option key={u} value={u}>
-                {u}
-              </option>
-            ))}
-          </select>
-          )}
-        </div>
+        <NumberField
+          key={`${prop}:${authored[prop] ?? ''}`}
+          value={shownN}
+          min={opts.min ?? 0}
+          step={1}
+          ariaLabel={prop}
+          lead={lead ? (lead.node ?? lead.t) : undefined}
+          onCommit={(n) => commit(prop, unitless ? `${n}` : `${n}${unit}`)}
+          unitSlot={
+            unitless || opts.fixedUnit ? null : (
+              <UnitSelect
+                units={CSS_UNITS}
+                value={cur.unit || 'px'}
+                ariaLabel={`${prop} unit`}
+                onChange={(u) => commit(prop, u === 'auto' ? 'auto' : `${cur.n || '0'}${u}`)}
+              />
+            )
+          }
+        />
         {tok(prop, tokenList)}
       </>
     );
@@ -5057,24 +5699,34 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
 
   // color swatch (native picker → hex) + raw text + token quick-pick
   const color = (prop) => {
-    // ONE colour control: the swatch is the trigger for a single popover with a
-    // full HSV picker (Custom) + the DS swatches (Variables). No separate native
-    // OS picker (#6 — was two popovers doing the same thing).
+    // ONE compact colour field (feature-inspector-controls-redesign handoff): the
+    // TokenPopover swatch is the FLUSH prefix (divider, no gap) inside ColorField,
+    // then the value input — swatch + value read as one field. The popover keeps
+    // its full HSV picker (Custom) + DS swatches (Variables) + cross-DS/security.
     const resolved = computed[prop] || authored[prop] || '';
+    const av = authored[prop] ?? '';
+    const bound = typeof av === 'string' && /var\(\s*--/.test(av);
+    const display = bound ? av.replace(/^var\(\s*|\s*\)$/g, '').replace(/^--/, '').replace(/-/g, ' ') : av;
     return (
-      <>
-        <TokenPopover
-          kind="color"
-          groups={tokenGroups('color')}
-          current={authored[prop]}
-          activeDs={_activeDs}
-          swatchBg={resolved}
-          seedHex={cssColorToHex(computed[prop] || authored[prop]) || '#000000'}
-          onPick={(v) => commit(prop, v)}
-          label={`${prop} colour`}
-        />
-        {text(prop)}
-      </>
+      <ColorField
+        swatch={
+          <TokenPopover
+            kind="color"
+            swatchClassName="st-cp-cf-sw"
+            groups={tokenGroups('color')}
+            current={authored[prop]}
+            activeDs={_activeDs}
+            swatchBg={resolved}
+            seedHex={cssColorToHex(computed[prop] || authored[prop]) || '#000000'}
+            onPick={(v) => commit(prop, v)}
+            label={`${prop} colour`}
+          />
+        }
+        displayValue={display}
+        bound={bound}
+        ariaLabel={prop}
+        onValue={(v) => commit(prop, v)}
+      />
     );
   };
 
@@ -5082,6 +5734,49 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
   // always shows the RESOLVED value (0 instead of blank) and a faint `is-zero`
   // styling for an unset/zero side. Edits the single side (the old "link all
   // sides" toggle was removed — DDR-104 Phase 12.3 W1.5).
+  // Built on the shared `makeScrubHandler` engine (feature-inspector-controls-
+  // redesign) — a plain (non-hook) factory, since `side`/`inset` are helper
+  // closures invoked during render, not components (can't call a hook there).
+  // These stay compact <input>s with whole-cell scrub (no separate drag handle
+  // — the Figma/Webflow convention for tiny box-model cells with no room for
+  // one; the 3px dead-zone already lets a plain click through to focus). A
+  // multi-side drag (alt = pair, alt+shift = all four) live-updates the sibling
+  // box inputs too, so the whole move shows in the panel, not just the dragged
+  // cell — `node` closes over the actual input DOM element via onPointerDown.
+  const boxScrub = (prop, opts) => {
+    let node = null;
+    const unit = opts.unitless ? '' : 'px';
+    const fmt = (n) => (opts.unitless ? `${n}` : `${n}${unit}`);
+    const applyToSides = (n, activeSides, fn) => {
+      for (const p of activeSides ?? [prop]) fn(p, fmt(n));
+    };
+    const scrub = makeScrubHandler({
+      getBase: () => node?.value ?? '0',
+      min: opts.min ?? 0,
+      step: 1,
+      sides: opts.sides,
+      onInput: (n, activeSides) => {
+        if (node) node.value = String(n);
+        if (activeSides) {
+          const box = node?.closest('.st-cp-box');
+          for (const p of activeSides) {
+            if (p === prop) continue;
+            const sib = box?.querySelector(`.st-cp-boxv[aria-label="${p}"]`);
+            if (sib) sib.value = String(n);
+          }
+        }
+        applyToSides(n, activeSides, optimistic);
+      },
+      onCommit: (n, activeSides) => applyToSides(n, activeSides, commit),
+    });
+    return {
+      onPointerDown: (e) => {
+        node = e.currentTarget;
+        scrub(e);
+      },
+    };
+  };
+
   const side = (prop, group) => {
     const a = authored[prop];
     const shown =
@@ -5106,8 +5801,10 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
         aria-label={prop}
         defaultValue={shown}
         title="drag to scrub · alt = symmetric · alt+shift = all sides"
-        onPointerDown={makeScrub(prop, { sides: { pair, all } })}
+        {...boxScrub(prop, { sides: { pair, all } })}
+        onFocus={selectAllOnFocus}
         onKeyDown={(e) => {
+          if (stepBoxInput(e, (n) => commit(prop, `${n}px`))) return;
           if (e.key === 'Enter') e.currentTarget.blur();
         }}
         onBlur={(e) => {
@@ -5141,8 +5838,10 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
         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 })}
+        {...boxScrub(prop, { sides: { pair, all }, min: -Infinity })}
+        onFocus={selectAllOnFocus}
         onKeyDown={(e) => {
+          if (stepBoxInput(e, (n) => commit(prop, `${n}px`))) return;
           if (e.key === 'Enter') e.currentTarget.blur();
         }}
         onBlur={(e) => {
@@ -5155,40 +5854,261 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
     );
   };
 
-  const corner = (label, prop) => (
-    <label className="st-cp-cornerf">
-      <span>{label}</span>
-      <input
-        key={`${prop}:${authored[prop] ?? ''}`}
-        aria-label={prop}
-        defaultValue={cssSplitUnit(authored[prop] ?? '').n || ''}
-        placeholder={cssHint(computed[prop]) || '0'}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') e.currentTarget.blur();
-        }}
-        onBlur={(e) => {
-          const raw = e.currentTarget.value.trim();
-          if (raw) commit(prop, /[a-z%]/i.test(raw) ? raw : `${raw}px`);
-        }}
-      />
-    </label>
-  );
-
   // Phase 12.3 — authored inline props with no curated row + custom HTML attrs,
   // surfaced in Advanced so the user can see/edit/remove what they added.
   const customStyleRows = Object.entries(customStyles);
   const attrRows = Object.entries(attrs);
 
+  // Stage B (Task B5) — Media framing gate + body, pulled out (DDR-171) so
+  // Designer mode's "Media" cluster renders the identical content (just a
+  // relabeled wrapper) instead of re-deriving `showMedia`/`canReplace`.
+  // 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 — separate DOM slots by
+  // design.
+  const mediaGate = () => {
+    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, canReplace };
+  };
+  const mediaBody = (canReplace) => (
+    <>
+      {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>
+      )}
+    </>
+  );
+
   return (
-    <div className="st-cp" key={el.id} data-tour="css-panel" onKeyDown={onKnobKeyDown}>
+    <div className={`st-cp${mode === 'designer' ? ' st-cp--designer' : ''}`} key={el.id} data-tour="css-panel" onKeyDown={onKnobKeyDown}>
       <div className="st-cp-id">
         <span className="st-cp-idtag">
           {el.tag || 'element'}
           {el.classes ? <span className="st-cp-idcls">.{el.classes.split(/\s+/)[0]}</span> : null}
         </span>
-        <span className="st-cp-idmeta">inline style</span>
+        {/* DDR-171 — vocabulary mode toggle, tucked into the id row's corner
+            slot (was a full-width Segmented row — read as too heavy; a
+            two-icon IconButtonGroup matches every other compact toggle in
+            this panel). 'advanced' is the default (today's panel, byte-
+            identical below); 'designer' swaps in the Figma-vocabulary regroup.
+            Named "Advanced" (not "Simple"/"Basic") so neither mode reads as
+            the lesser fallback — see DDR-171 for the naming-collision call
+            against the nested Advanced *section* below. */}
+        <span className="st-cp-idmode" data-tour="cp-mode">
+          <IconButtonGroup
+            value={mode}
+            ariaLabel="panel vocabulary mode"
+            options={[
+              { value: 'advanced', node: <Lu as={LuBraces} size={12} />, label: 'Advanced — raw CSS' },
+              { value: 'designer', node: <Lu as={LuWand2} size={12} />, label: 'Designer — Figma vocabulary' },
+            ]}
+            onChange={setMode}
+          />
+        </span>
       </div>
 
+      {mode === 'designer' ? (
+        <>
+          {dsec(
+            'Auto layout',
+            ['display', 'flex-direction', 'flex-wrap', 'align-items', 'justify-content', 'gap', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
+            (() => {
+              const disp = (authored.display || cssHint(computed.display) || '').trim();
+              const isFlex = disp === 'flex' || disp === 'inline-flex';
+              return isFlex ? (
+                <>
+                  {row('flex-direction', iconseg('flex-direction', DIR_OPTS), undefined, 'Direction')}
+                  {row(
+                    'align-items',
+                    <AlignPad value={alignPadCell()} onChange={setAlignPadCell} ariaLabel="auto-layout alignment" />,
+                    provOf('align-items'),
+                    'Alignment'
+                  )}
+                  {row('gap', vtok('gap', 'space'), undefined, 'Gap')}
+                  <div className="st-cp-modes">
+                    {sizeModeSeg('width')}
+                    {sizeModeSeg('height')}
+                  </div>
+                  <div className="st-cp-box" aria-label="padding">
+                    <span className="st-cp-boxtag st-cp-boxtag--p">
+                      {prov(provOf('padding-top'))}padding
+                    </span>
+                    {side('padding-top', 'padding')}
+                    {side('padding-right', 'padding')}
+                    {side('padding-bottom', 'padding')}
+                    {side('padding-left', 'padding')}
+                  </div>
+                  <div className="st-cp-clustermore-row">{moreBtn('Auto layout')}</div>
+                  {designerMore['Auto layout']
+                    ? row(
+                        'flex-wrap',
+                        <Toggle
+                          checked={/^wrap/.test(authored['flex-wrap'] || cssHint(computed['flex-wrap']) || '')}
+                          label="wrap items"
+                          ariaLabel="flex-wrap"
+                          onChange={(w) => commit('flex-wrap', w ? 'wrap' : 'nowrap')}
+                        />,
+                        provOf('flex-wrap'),
+                        'Wrap'
+                      )
+                    : null}
+                </>
+              ) : (
+                <button type="button" className="st-cp-makeflex" disabled={!editable} onClick={() => commit('display', 'flex')}>
+                  + Auto layout (flex)
+                </button>
+              );
+            })()
+          )}
+
+          {dsec(
+            'Size',
+            ['width', 'height', 'min-width', 'max-width', 'min-height', 'max-height'],
+            <>
+              {row('width', num('width'), undefined, 'Width')}
+              {row('height', num('height'), undefined, 'Height')}
+              <div className="st-cp-clustermore-row">{moreBtn('Size')}</div>
+              {designerMore.Size ? (
+                <>
+                  {row('min-width', num('min-width'), undefined, 'Min width')}
+                  {row('max-width', num('max-width'), undefined, 'Max width')}
+                  {row('min-height', num('min-height'), undefined, 'Min height')}
+                  {row('max-height', num('max-height'), undefined, 'Max height')}
+                </>
+              ) : null}
+            </>
+          )}
+
+          {dsec(
+            'Position',
+            ['position', 'top', 'right', 'bottom', 'left', 'z-index'],
+            <>
+              {row('position', csel('position', CSS_POSITION), undefined, '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}
+              <div className="st-cp-clustermore-row">{moreBtn('Position')}</div>
+              {designerMore.Position ? row('z-index', num('z-index'), undefined, 'Layer order') : null}
+            </>,
+            false
+          )}
+
+          {dsec('Fill', ['background-color'], row('background-color', color('background-color'), undefined, 'Fill'))}
+
+          {dsec('Stroke', ['border-width', 'border-style', 'border-color'], row('border', borderControl(), provOf('border-width'), 'Stroke'))}
+
+          {dsec(
+            'Corner radius',
+            ['border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
+            row('border-radius', radiusControl(), provOf('border-radius'), 'Corner radius')
+          )}
+
+          {dsec(
+            'Effects',
+            ['box-shadow', 'filter', 'mix-blend-mode'],
+            <>
+              {row('box-shadow', tok('box-shadow', 'shadow') || text('box-shadow'), undefined, 'Shadow')}
+              {row('filter', blurControl(), provOf('filter'), 'Blur')}
+              {row('mix-blend-mode', csel('mix-blend-mode', CSS_BLEND_MODES), undefined, 'Blend')}
+            </>
+          )}
+
+          {dsec('Opacity', ['opacity'], row('opacity', opacityControl(), undefined, 'Opacity'))}
+
+          {dsec(
+            'Text',
+            ['font-family', 'color', 'font-size', 'font-weight', 'line-height', 'text-align', 'letter-spacing', 'font-style', 'text-transform', 'white-space'],
+            <>
+              {row('font-family', csel('font-family', CSS_FONTS), undefined, 'Font')}
+              {row('color', color('color'), undefined, 'Color')}
+              {row('font-size', vtok('font-size', 'type'), undefined, 'Size')}
+              {row('font-weight', csel('font-weight', CSS_WEIGHTS), undefined, 'Weight')}
+              {row('line-height', num('line-height', 'lh'), undefined, 'Line height')}
+              {row('text-align', iconseg('text-align', TEXTALIGN_OPTS), undefined, 'Align')}
+              <div className="st-cp-clustermore-row">{moreBtn('Text')}</div>
+              {designerMore.Text ? (
+                <>
+                  {row('letter-spacing', num('letter-spacing', null, { min: -Infinity }), undefined, 'Letter spacing')}
+                  {row('font-style', csel('font-style', CSS_FONT_STYLE), undefined, 'Style')}
+                  {row('text-transform', csel('text-transform', CSS_TEXT_TRANSFORM), undefined, 'Case')}
+                  {row('white-space', csel('white-space', CSS_WHITE_SPACE), undefined, 'Whitespace')}
+                </>
+              ) : null}
+            </>
+          )}
+
+          {dsec(
+            'Spacing',
+            ['margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
+            <div className="st-cp-box" aria-label="margin">
+              <span className="st-cp-boxtag st-cp-boxtag--m">{prov(provOf('margin-top'))}margin</span>
+              {side('margin-top', 'margin')}
+              {side('margin-right', 'margin')}
+              {side('margin-bottom', 'margin')}
+              {side('margin-left', 'margin')}
+            </div>
+          )}
+
+          {(() => {
+            const { showMedia, canReplace } = mediaGate();
+            return showMedia
+              ? dsec('Media', ['object-fit', 'object-position', 'aspect-ratio'], mediaBody(canReplace))
+              : null;
+          })()}
+        </>
+      ) : (
+        <>
       {sec(
         'Layout',
         (() => {
@@ -5206,15 +6126,15 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
               {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))}
+                  {row('flex-direction', iconseg('flex-direction', DIR_OPTS))}
+                  {row('flex-wrap', <Toggle checked={/^wrap/.test(authored['flex-wrap'] || cssHint(computed['flex-wrap']) || '')} label="wrap items" ariaLabel="flex-wrap" onChange={(w) => commit('flex-wrap', w ? 'wrap' : 'nowrap')} />, provOf('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'))}
+                  {row('align-items', iconseg('align-items', ALIGNITEMS_OPTS))}
+                  {row('justify-content', iconseg('justify-content', JUSTIFY_OPTS))}
+                  {row('gap', vtok('gap', 'space'))}
                 </>
               ) : (
                 <button
@@ -5259,35 +6179,16 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
         <>
           {row('font-family', csel('font-family', CSS_FONTS))}
           {row('color', color('color'))}
-          {row('font-size', num('font-size', 'type'))}
+          {row('font-size', vtok('font-size', 'type'))}
           {row('font-weight', csel('font-weight', CSS_WEIGHTS))}
           {row('line-height', num('line-height', 'lh'))}
           {row('letter-spacing', num('letter-spacing', null, { min: -Infinity }))}
-          {row(
-            'text-align',
-            <div className="st-cp-seg" role="group" aria-label="text-align">
-              {CSS_ALIGN_OPTS.map((a) => (
-                <button
-                  key={a}
-                  type="button"
-                  className={`st-cp-segbtn${(authored['text-align'] || computed['text-align']) === a ? ' is-active' : ''}`}
-                  aria-label={`align ${a}`}
-                  aria-pressed={(authored['text-align'] || computed['text-align']) === a}
-                  onClick={() => commit('text-align', a)}
-                >
-                  <span className={`st-cp-bars st-cp-bars--${a === 'justify' ? 'just' : a}`} aria-hidden="true">
-                    <i />
-                    <i />
-                    <i />
-                  </span>
-                </button>
-              ))}
-            </div>
-          )}
+          {/* handoff — text-align as a lucide icon button group; B/I/U as a toggle
+              group mapped to font-weight / font-style / text-decoration. */}
+          {row('text-align', iconseg('text-align', TEXTALIGN_OPTS))}
+          {row('font-style', textStyleToggle(), provOf('font-style'))}
           {/* 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))}
         </>
       )}
@@ -5312,7 +6213,9 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
               {side('padding-bottom', 'padding')}
               {side('padding-left', 'padding')}
               <div className="st-cp-boxcore">
-                {Math.round(el.bounds?.w || 0)} × {Math.round(el.bounds?.h || 0)}
+                {/* handoff — prefer the AUTHORED size (updates live as you edit
+                    width/height); el.bounds is stale until the canvas re-measures. */}
+                {Math.round(Number.parseFloat(authored.width) || el.bounds?.w || 0)} × {Math.round(Number.parseFloat(authored.height) || el.bounds?.h || 0)}
               </div>
             </div>
           </div>
@@ -5334,7 +6237,7 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
           {row('max-width', num('max-width'))}
           {row('min-height', num('min-height'))}
           {row('max-height', num('max-height'))}
-          {row('overflow', csel('overflow', CSS_OVERFLOW))}
+          {row('overflow', iconseg('overflow', OVERFLOW_OPTS))}
           {/* 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. */}
@@ -5350,159 +6253,28 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
         </>
       )}
 
-      {/* 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. */}
+      {/* Stage B (Task B5) — Media framing (gate/body pulled into mediaGate()/
+          mediaBody() above, DDR-171, so Designer mode's "Media" cluster
+          reuses the identical content). */}
       {(() => {
-        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;
+        const { showMedia, canReplace } = mediaGate();
+        return showMedia ? sec('Media', mediaBody(canReplace)) : null;
       })()}
 
       {sec(
         'Appearance',
         <>
           {row('background-color', color('background-color'))}
-          <div className="st-cp-row">
-            {prov(provOf('border-radius'))}
-            <label className="st-cp-label" title="border-radius">
-              border-radius
-            </label>
-            <div className="st-cp-ctl">
-              {num('border-radius', 'radius')}
-              <button
-                type="button"
-                className={`st-cp-split${split ? ' is-on' : ''}`}
-                aria-pressed={split}
-                aria-label="set each corner separately"
-                title="set each corner separately"
-                onClick={() => setSplit((v) => !v)}
-              />
-            </div>
-          </div>
-          {split ? (
-            <div className="st-cp-corners" aria-label="per-corner radius">
-              {corner('TL', 'border-top-left-radius')}
-              {corner('TR', 'border-top-right-radius')}
-              {corner('BL', 'border-bottom-left-radius')}
-              {corner('BR', 'border-bottom-right-radius')}
-            </div>
-          ) : null}
-          {row(
-            'border',
-            <div className="st-cp-border">
-              {num('border-width')}
-              <select
-                className="st-cp-nsel st-cp-nsel--mini"
-                aria-label="border-style"
-                value={CSS_BORDER_STYLES.includes(authored['border-style']) ? authored['border-style'] : ''}
-                onChange={(e) => commit('border-style', e.target.value)}
-              >
-                <option value="" disabled>
-                  style
-                </option>
-                {CSS_BORDER_STYLES.map((s) => (
-                  <option key={s} value={s}>
-                    {s}
-                  </option>
-                ))}
-              </select>
-              <TokenPopover
-                kind="color"
-                groups={tokenGroups('color')}
-                current={authored['border-color']}
-                activeDs={_activeDs}
-                swatchBg={computed['border-color'] || authored['border-color'] || ''}
-                seedHex={
-                  cssColorToHex(computed['border-color'] || authored['border-color']) || '#000000'
-                }
-                onPick={(v) => commit('border-color', v)}
-                label="border colour"
-              />
-            </div>,
-            provOf('border-width')
-          )}
+          {row('border-radius', radiusControl(), provOf('border-radius'))}
+          {row('border', borderControl(), provOf('border-width'))}
           {row('box-shadow', tok('box-shadow', 'shadow') || text('box-shadow'))}
-          {row(
-            'opacity',
-            <div className="st-cp-num">
-              <span className="st-cp-numlead" aria-hidden="true">
-                <StIcon name="p-opacity" size={12} />
-              </span>
-              <input
-                className="st-cp-numin"
-                key={`opacity:${authored.opacity ?? ''}`}
-                aria-label="opacity"
-                defaultValue={authored.opacity ?? ''}
-                placeholder={cssHint(computed.opacity) || '1'}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') e.currentTarget.blur();
-                }}
-                onBlur={(e) => commit('opacity', e.currentTarget.value)}
-              />
-            </div>
-          )}
+          {/* DDR-171 — blur + blend, real Advanced-mode rows (not Designer-exclusive);
+              also power Designer mode's "Effects" cluster. */}
+          {row('filter', blurControl(), provOf('filter'))}
+          {row('mix-blend-mode', csel('mix-blend-mode', CSS_BLEND_MODES))}
+          {row('opacity', opacityControl())}
           {/* Stage B (Task B4) — transform as a free-value row (mirrors box-shadow). */}
+          {row('rotation', rotationControl(), provOf('transform'))}
           {row('transform', text('transform'))}
           {row('transform-origin', text('transform-origin'))}
         </>
@@ -5601,6 +6373,8 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
           <AttrKnob commit={commitAttr} />
         </div>
       )}
+        </>
+      )}
 
       <div className="st-cp-legend">
         <span>
@@ -5979,7 +6753,14 @@ function resolveArtboardIdFromSelection(el) {
 // /_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 ARTBOARD_LAYOUT_OPTIONS = [
+  ['', 'Block (default)'],
+  ['flex-col', 'Flex ↓ (column)'],
+  ['flex-row', 'Flex → (row)'],
+  ['grid', 'Grid'],
+];
+
+function ArtboardKnobs({ el, onResizeArtboard, onSetArtboardHug, onSetArtboardStyle }) {
   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
@@ -6007,6 +6788,25 @@ function ArtboardKnobs({ el, onResizeArtboard }) {
   const activePreset = Object.entries(SCREEN_PRESETS).find(
     ([, p]) => p.width === w && p.height === h
   )?.[0];
+  // Hug default (artboard "hug height") — current mode + the "more settings"
+  // (background/padding/layout/gap) read off the SAME generic `attrs` escape
+  // hatch dom-selection.ts already scrapes for every selection (the `data-dc-*`
+  // attributes DCArtboard stamps on the frame purely for this panel to read
+  // its own resolved props back — see canvas-lib.tsx readBackAttrs).
+  const fixed = el.attrs?.['data-dc-fixed'] === 'true';
+  const bg = el.attrs?.['data-dc-bg'] ?? '';
+  const padding = el.attrs?.['data-dc-padding'] ?? '';
+  const layoutMode = el.attrs?.['data-dc-layout'] ?? '';
+  const gap = el.attrs?.['data-dc-gap'] ?? '';
+  const setHug = (nextFixed) => {
+    if (!artboardId) return;
+    const freezeHeight = nextFixed && Number.isFinite(h) ? Math.round(h) : undefined;
+    onSetArtboardHug?.(artboardId, nextFixed, freezeHeight);
+  };
+  const commitStyle = (patch) => {
+    if (!artboardId) return;
+    onSetArtboardStyle?.(artboardId, patch);
+  };
   return (
     <section className="st-cp-sec">
       <div className="st-cp-sechd-row">
@@ -6039,12 +6839,17 @@ function ArtboardKnobs({ el, onResizeArtboard }) {
             type="number"
             min="1"
             aria-label="artboard height"
-            key={`h:${h ?? ''}`}
+            readOnly={!fixed}
+            title={fixed ? undefined : 'Hug — grows to fit content. Switch to Fixed to set an exact height.'}
+            key={`h:${h ?? ''}:${fixed}`}
             defaultValue={h ?? ''}
             onKeyDown={(e) => {
               if (e.key === 'Enter') e.currentTarget.blur();
             }}
-            onBlur={(e) => commitSize(null, Number.parseFloat(e.currentTarget.value))}
+            onBlur={(e) => {
+              if (!fixed) return;
+              commitSize(null, Number.parseFloat(e.currentTarget.value));
+            }}
           />
         </div>
       </div>
@@ -6068,10 +6873,133 @@ function ArtboardKnobs({ el, onResizeArtboard }) {
           ))}
         </select>
       </div>
+      <div style={{ padding: '0 12px 8px' }}>
+        <div className="st-cp-modeseg" role="group" aria-label="artboard height sizing mode">
+          <span className="st-cp-modeax" aria-hidden="true">
+            H
+          </span>
+          {[
+            [false, 'Hug'],
+            [true, 'Fixed'],
+          ].map(([val, label]) => (
+            <button
+              key={label}
+              type="button"
+              className={`st-cp-modebtn${fixed === val ? ' is-active' : ''}`}
+              aria-pressed={fixed === val}
+              onClick={() => setHug(val)}
+              title={`${label} height`}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="st-cp-sechd-row">
+        <span className="st-cp-sechd">Style</span>
+      </div>
+      <div style={{ padding: '4px 12px 8px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <div className="st-cp-num" style={{ width: '100%' }}>
+          <span className="st-cp-numlead" aria-hidden="true">
+            Bg
+          </span>
+          <input
+            className="st-cp-numin"
+            type="text"
+            aria-label="artboard background"
+            placeholder="var(--bg-1)"
+            key={`bg:${bg}`}
+            defaultValue={bg}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') e.currentTarget.blur();
+            }}
+            onBlur={(e) => commitStyle({ background: e.currentTarget.value.trim() || null })}
+          />
+        </div>
+        <select
+          className="st-cp-nsel"
+          aria-label="artboard body layout"
+          value={layoutMode}
+          onChange={(e) => commitStyle({ layout: e.currentTarget.value || null })}
+        >
+          {ARTBOARD_LAYOUT_OPTIONS.map(([val, label]) => (
+            <option key={val} value={val}>
+              {label}
+            </option>
+          ))}
+        </select>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <div className="st-cp-num">
+            <span className="st-cp-numlead" aria-hidden="true">
+              Pad
+            </span>
+            <input
+              className="st-cp-numin"
+              type="number"
+              min="0"
+              aria-label="artboard padding"
+              key={`pad:${padding}`}
+              defaultValue={padding}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') e.currentTarget.blur();
+              }}
+              onBlur={(e) => {
+                const v = e.currentTarget.value;
+                commitStyle({ padding: v === '' ? null : Number.parseFloat(v) });
+              }}
+            />
+          </div>
+          <div className="st-cp-num">
+            <span className="st-cp-numlead" aria-hidden="true">
+              Gap
+            </span>
+            <input
+              className="st-cp-numin"
+              type="number"
+              min="0"
+              aria-label="artboard gap"
+              key={`gap:${gap}`}
+              defaultValue={gap}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') e.currentTarget.blur();
+              }}
+              onBlur={(e) => {
+                const v = e.currentTarget.value;
+                commitStyle({ gap: v === '' ? null : Number.parseFloat(v) });
+              }}
+            />
+          </div>
+        </div>
+      </div>
     </section>
   );
 }
 
+// feature-photo-editor (Task 13/14) — derive the content-addressed photo asset a
+// DOM selection points at (an artboard `<img src="assets/<sha8>.<ext>">`). Prefers
+// the `photoAsset` the resolver stamped (dom-selection.ts), falling back to a scan
+// of the selection's src/html for a selection that reached the panel via a code
+// path predating that field. Returns null for a non-photo element.
+const PHOTO_ASSET_RE = /assets\/[0-9a-f]{8}\.[a-z0-9]+/i;
+function photoAssetOfSelection(el) {
+  if (!el || Array.isArray(el)) return null;
+  if (el.photoAsset) return el.photoAsset;
+  if ((el.tag || '').toLowerCase() !== 'img') return null;
+  const html = el.html || '';
+  // Once an edit is baked, the element's LIVE src is a `data:` URL (canvas-lib's
+  // PhotoPreviewBridge swaps it in directly) — it never matches PHOTO_ASSET_RE,
+  // so a REPLAYED/serialized selection (a WS resync, or the persisted
+  // `_active.json` restored on boot) that arrives without the dedicated
+  // `photoAsset` field would otherwise permanently lose the Photo tab for any
+  // already-edited photo. The element still carries the `data-photo-asset` tag
+  // the bridge stamped, and that DOES survive into an outerHTML snapshot — check
+  // it before falling back to the plain assets/<sha8> src scan.
+  const tagged = /data-photo-asset="([^"]+)"/.exec(html);
+  if (tagged) return tagged[1];
+  const m = PHOTO_ASSET_RE.exec(`${el.attrs?.src || ''} ${html}`);
+  return m ? m[0] : null;
+}
+
 function InspectorPanel({
   selected,
   onClose,
@@ -6086,19 +7014,41 @@ function InspectorPanel({
   onRecordEdit,
   onReplaceMedia,
   onResizeArtboard,
+  onSetArtboardHug,
+  onSetArtboardStyle,
   onUndoRedo,
   editScope,
   tab: tabProp,
   onTabChange,
   width,
   resizing,
+  // feature-photo-editor (Task 13/15) — the Photo tab + its live-preview /
+  // bg-removal / undo channels. `photoSel` is the annotation-image target
+  // (threaded up separately since the annotation model has no DOM selection);
+  // an artboard `<img>` target is derived from `selected` instead.
+  photoSel,
+  photoRev,
+  onPhotoEdit,
+  onPhotoRemoveBackground,
+  onPhotoRecordEdit,
+  onPhotoUndoRedo,
+  // feature-configurable-panel-docking — when true this instance IS the standalone
+  // Layers panel: it forces the Layers view and hides the tab bar (the tab strip
+  // lives on the dock slot instead). `hideLayersTab` drops the inline Layers tab
+  // when Layers has been split into its own panel.
+  layersOnly = false,
+  hideLayersTab = false,
+  // DDR-171 — CSS-panel vocabulary mode ('advanced' | 'designer'), owned by App
+  // (single source of truth shared with Settings → Appearance).
+  cpMode,
+  onSetCpMode,
 }) {
   // Tab is controllable from the parent (the guided tour drives it to 'css' /
   // 'layers' so a spotlight step lands on a real row) but falls back to local
   // state for normal use. A user click both updates local state and notifies the
   // parent, so the two stay in lockstep whichever owns it.
   const [tabState, setTabState] = useState('inspect');
-  const tab = tabProp ?? tabState;
+  const tab = layersOnly ? 'layers' : (tabProp ?? tabState);
   const setTab = (t) => {
     setTabState(t);
     onTabChange?.(t);
@@ -6390,10 +7340,41 @@ function InspectorPanel({
   };
   // `selected` may be a single element, an array (multi-select), or null.
   const el = Array.isArray(selected) ? selected[0] : selected;
+  // feature-photo-editor (Task 13) — resolve the Photo-tab target. Priority: an
+  // annotation-image threaded up (`photoSel`, no DOM selection) → a Photo-ONLY
+  // panel; else a content-addressed artboard `<img>` selection → Photo alongside
+  // the normal tabs.
+  const photoTarget = photoSel
+    ? { asset: photoSel.asset, kind: 'annotation-image' }
+    : (() => {
+        const a = photoAssetOfSelection(el);
+        return a ? { asset: a, kind: 'artboard-img' } : null;
+      })();
+  const photoOnly = photoTarget?.kind === 'annotation-image';
+  // Cmd+Z / Cmd+Shift+Z (or Cmd+Y) while focus is still inside a Photo-tab
+  // slider — mirrors `onKnobKeyDown` above for the same reason: the window-
+  // level shortcut listener bails out whenever `document.activeElement` is an
+  // `<input>` (native text-undo would otherwise win), so a commit-then-Cmd+Z
+  // with the slider still focused needs its own forwarder here.
+  const onPhotoKnobKeyDown = (e) => {
+    if (!(e.metaKey || e.ctrlKey) || e.altKey) return;
+    const k = e.key.toLowerCase();
+    if (k === 'z') {
+      e.preventDefault();
+      onPhotoUndoRedo?.(e.shiftKey ? 'redo' : 'undo');
+    } else if (k === 'y') {
+      e.preventDefault();
+      onPhotoUndoRedo?.('redo');
+    }
+  };
+  // An annotation-image has no element tabs; force Photo. Otherwise honor the
+  // requested tab, but drop off a stale 'photo' tab when the new selection isn't
+  // photo-eligible (so switching from a photo to a normal element lands sanely).
+  const effTab = photoOnly ? 'photo' : tab === 'photo' && !photoTarget ? 'inspect' : tab;
   const tabBtn = (id, label, icon) => (
     <button
       type="button"
-      className={'st-rp-tab' + (tab === id ? ' is-active' : '')}
+      className={'st-rp-tab' + (effTab === id ? ' is-active' : '')}
       onClick={() => setTab(id)}
     >
       <StIcon name={icon} size={14} />
@@ -6408,10 +7389,21 @@ function InspectorPanel({
       aria-label="Inspector"
       data-tour="inspector"
     >
-      <div className="st-rp-tabs" data-tour="inspector-tabs">
-        {tabBtn('inspect', 'Inspect', 'sliders')}
-        {tabBtn('layers', 'Layers', 'layers')}
-        {tabBtn('css', 'CSS', 'code')}
+      <div
+        className="st-rp-tabs"
+        data-tour="inspector-tabs"
+        style={layersOnly ? { display: 'none' } : undefined}
+      >
+        {photoOnly ? (
+          tabBtn('photo', 'Photo', 'image')
+        ) : (
+          <>
+            {tabBtn('inspect', 'Inspect', 'sliders')}
+            {!hideLayersTab && tabBtn('layers', 'Layers', 'layers')}
+            {tabBtn('css', 'CSS', 'code')}
+            {photoTarget ? tabBtn('photo', 'Photo', 'image') : null}
+          </>
+        )}
         <button
           type="button"
           className="st-iconbtn"
@@ -6447,7 +7439,19 @@ function InspectorPanel({
         </div>
       ) : null}
       <div className="st-rp-body">
-        {!el ? (
+        {effTab === 'photo' && photoTarget ? (
+          <div onKeyDown={onPhotoKnobKeyDown}>
+            <PhotoKnobs
+              key={`${photoTarget.asset}:${photoRev ?? 0}`}
+              asset={photoTarget.asset}
+              ColorPicker={ColorPicker}
+              StIcon={StIcon}
+              onEdit={(edit) => onPhotoEdit?.(photoTarget.asset, edit)}
+              onRemoveBackground={onPhotoRemoveBackground}
+              onRecordEdit={(before, after) => onPhotoRecordEdit?.(photoTarget.asset, before, after)}
+            />
+          </div>
+        ) : !el ? (
           <div className="st-rp-empty">
             {/* <p> wrapper — st-rp-empty is a flex column, bare text nodes +
                 kbd would stack as stretched flex items. */}
@@ -6455,7 +7459,7 @@ function InspectorPanel({
               Hold <Kbd>⌘</Kbd> inside the canvas and click an element to inspect it.
             </p>
           </div>
-        ) : tab === 'inspect' ? (
+        ) : effTab === 'inspect' ? (
           <>
             <div className="st-rp-hd">{el.selector || el.tag || 'element'}</div>
             <div className="st-insp-row">
@@ -6504,7 +7508,7 @@ function InspectorPanel({
             ) : null}
             <InspectComputed el={el} />
           </>
-        ) : tab === 'layers' ? (
+        ) : effTab === 'layers' ? (
           <>
             <div className="st-rp-hd">Layers{layersTree?.nodes?.length ? '' : ' · ancestry'}</div>
             {layersTree?.nodes?.length ? (
@@ -6578,7 +7582,12 @@ function InspectorPanel({
             )}
           </>
         ) : !el.id && resolveArtboardIdFromSelection(el) ? (
-          <ArtboardKnobs el={el} onResizeArtboard={onResizeArtboard} />
+          <ArtboardKnobs
+            el={el}
+            onResizeArtboard={onResizeArtboard}
+            onSetArtboardHug={onSetArtboardHug}
+            onSetArtboardStyle={onSetArtboardStyle}
+          />
         ) : (
           <CssKnobs
             el={el}
@@ -6587,6 +7596,8 @@ function InspectorPanel({
             onRecordEdit={onRecordEdit}
             onReplaceMedia={onReplaceMedia}
             onUndoRedo={onUndoRedo}
+            mode={cpMode}
+            onSetMode={onSetCpMode}
           />
         )}
       </div>
@@ -6834,12 +7845,31 @@ function App() {
   const [commentsPanelOpen, setCommentsPanelOpen] = useState(false);
   const [commentsFilter, setCommentsFilter] = useState('open'); // 'all' | 'open' | 'resolved'
   const [theme, setTheme] = useState(readInitialTheme);
+  // DDR-171 — CSS-panel vocabulary mode ('advanced' | 'designer'), App-owned so
+  // the in-panel corner toggle (CssKnobs) and Settings → Appearance share one
+  // source of truth; persisted to `maude-cp-mode` (same pattern as `theme`).
+  const [cpMode, setCpMode] = useState(() => {
+    const m = readJsonStore(CP_MODE_STORE, 'advanced');
+    return m === 'designer' ? 'designer' : 'advanced';
+  });
+  useEffect(() => {
+    try {
+      localStorage.setItem(CP_MODE_STORE, JSON.stringify(cpMode));
+    } catch {}
+  }, [cpMode]);
   const [openMenu, setOpenMenu] = useState(null);
   const [sidebarOpen, setSidebarOpen] = useState(() => readBoolStore(SIDEBAR_STORE, true));
   const [showHidden, setShowHidden] = useState(() => readBoolStore(SHOW_HIDDEN_STORE, false));
   const [sectionsExpanded, setSectionsExpanded] = useState(() => readJsonStore(SECTIONS_STORE, {}));
   const [helpOpen, setHelpOpen] = useState(false);
   const [readinessOpen, setReadinessOpen] = useState(false);
+  const [introOpen, setIntroOpen] = useState(false);
+  const [quickSetupOpen, setQuickSetupOpen] = useState(false);
+  const [brandUploadOpen, setBrandUploadOpen] = useState(false);
+  // DDR-166 plan, Phase 2 (T7) — the persistent "Setup" affordance in the empty
+  // canvas state (below) only renders while the project's own setup (design
+  // system / first canvas / brand assets) is incomplete; native-only concern.
+  const { report: setupReadiness } = useSetupReadiness(isNativeApp());
   // ? cheat-sheet (DS components-shortcuts-overlay) — separate from the deep
   // Help modal (F1), which keeps commands & flows.
   const [shortcutsOpen, setShortcutsOpen] = useState(false);
@@ -6847,7 +7877,26 @@ function App() {
   // T5/T6 (Plan C) — shell-level export/handoff dialog + inspector panel state.
   // The palette (T4) drives them; the dialog (T5) + panel (T6) consume them.
   const [exportDialog, setExportDialog] = useState(null); // null | { mode: 'export'|'handoff', scope? }
+  // feature-ai-media-generation (DDR-16x) — BYOK provider-key Settings modal +
+  // the AI generate action.
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [generateOpen, setGenerateOpen] = useState(false);
   const [inspectorOpen, setInspectorOpen] = useState(false);
+  // feature-configurable-panel-docking — Layers as its own openable panel (when
+  // layersMode==='separate'), plus the per-panel side map + layers mode. All
+  // three hydrate from disk (/_api/ui-prefs) on mount and persist on change,
+  // mirroring the view-pref pattern.
+  const [layersOpen, setLayersOpen] = useState(false);
+  const [panelSide, setPanelSide] = useState(() =>
+    readJsonStore(PANEL_SIDES_STORE, PANEL_SIDES_DEFAULTS)
+  );
+  const [layersMode, setLayersMode] = useState(() => {
+    try {
+      const v = localStorage.getItem(LAYERS_MODE_STORE);
+      if (v === 'separate' || v === 'in-inspector') return v;
+    } catch {}
+    return 'separate';
+  });
   // 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.
@@ -6855,7 +7904,9 @@ function App() {
   const [activeComps, setActiveComps] = useState([]);
   const [timelineFrame, setTimelineFrame] = useState(0);
   const [timelinePlaying, setTimelinePlaying] = useState(false);
-  const [timelineLoop, setTimelineLoop] = useState(true);
+  // Default off — looping is an explicit opt-in per session, not a surprise
+  // once the user presses Play (rca/issue-video-artboard-loop-defaults-on).
+  const [timelineLoop, setTimelineLoop] = useState(false);
   const [timelineMuted, setTimelineMuted] = useState(false);
   const [timelineVolume, setTimelineVolume] = useState(1);
   const [timelineHeight, setTimelineHeight] = useState(216);
@@ -6878,6 +7929,15 @@ function App() {
   useEffect(() => {
     timelineCompIdRef.current = timelineCompId;
   }, [timelineCompId]);
+  // rca/issue-video-artboard-frame-reset-on-edit — last known playhead, read
+  // from the `timeline-comps` handler below (which fires on every comp
+  // (re)mount, incl. a ⌘R hard iframe reload) to re-seed the fresh Player
+  // instance. A ref, not state, so the handler always sees the latest value
+  // without pulling `timelineFrame` into that big message-listener's deps.
+  const timelineFrameRef = useRef(0);
+  useEffect(() => {
+    timelineFrameRef.current = timelineFrame;
+  }, [timelineFrame]);
   // 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
@@ -6925,6 +7985,17 @@ 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-photo-editor (Task 13) — the annotation-image Photo-tab target,
+  // threaded up from the annotation layer's "Edit Photo…" (the annotation model
+  // has no DOM selection to ride, unlike an artboard `<img>`). `{ asset, strokeId }`
+  // or null. Cleared whenever a normal DOM selection arrives so the two never
+  // fight over the panel. The shell-side photo undo stack lives alongside it.
+  const [photoSel, setPhotoSel] = useState(null);
+  const photoUndoRef = useRef({ undo: [], redo: [] });
+  // Bumped by the Cmd+Z/Cmd+Shift+Z photo-undo handler below so the mounted
+  // PhotoKnobs (keyed on `asset:photoRev`) remounts and re-fetches the sidecar
+  // it just PUT, instead of drifting from its own stale local `edit` state.
+  const [photoRev, setPhotoRev] = useState(0);
   // 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
@@ -6959,14 +8030,57 @@ function App() {
   // ~13 call sites and only some closed their siblings, so a panel opened via a
   // path that left a sibling `true` rendered *behind* it under the fixed
   // precedence — looking like the new panel "overlapped" the old one.)
-  const openRightPanel = useCallback((which) => {
-    setChangesOpen(which === 'changes');
-    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-configurable-panel-docking — generic, SIDE-AWARE panel management.
+  // A slot (left/right) shows one panel at a time, so opening a panel closes any
+  // OTHER open panel ON THE SAME SIDE (panels on the other side are independent).
+  // A live ref carries the current open + side maps so the callbacks stay stable
+  // yet never act on stale state. (The Timeline is a BOTTOM dock, DDR-148, and is
+  // NOT part of either slot's mutual-exclusion.)
+  const panelStateRef = useRef({ open: {}, side: PANEL_SIDES_DEFAULTS });
+  panelStateRef.current = {
+    open: {
+      tree: sidebarOpen,
+      layers: layersOpen,
+      inspector: inspectorOpen,
+      comments: commentsPanelOpen,
+      changes: changesOpen,
+      assistant: assistantOpen,
+    },
+    side: panelSide,
+  };
+  const setPanelOpen = useCallback((id, val) => {
+    if (id === 'tree') setSidebarOpen(val);
+    else if (id === 'layers') setLayersOpen(val);
+    else if (id === 'inspector') setInspectorOpen(val);
+    else if (id === 'comments') setCommentsPanelOpen(val);
+    else if (id === 'changes') setChangesOpen(val);
+    else if (id === 'assistant') setAssistantOpen(val);
   }, []);
+  const sideOf = useCallback(
+    (id) => panelStateRef.current.side?.[id] || PANEL_SIDES_DEFAULTS[id],
+    []
+  );
+  const openPanelExclusive = useCallback(
+    (id) => {
+      const side = sideOf(id);
+      setPanelOpen(id, true);
+      for (const p of DOCK_PANELS) {
+        if (p.id !== id && sideOf(p.id) === side) setPanelOpen(p.id, false);
+      }
+    },
+    [setPanelOpen, sideOf]
+  );
+  const togglePanel = useCallback(
+    (id) => {
+      if (panelStateRef.current.open?.[id]) setPanelOpen(id, false);
+      else openPanelExclusive(id);
+    },
+    [openPanelExclusive, setPanelOpen]
+  );
+  // Legacy name kept for the many call sites; now side-aware (opens `which` and
+  // closes only same-side siblings, so a panel moved to the left is unaffected).
+  const openRightPanel = openPanelExclusive;
+  const toggleRightPanel = togglePanel;
   // 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)
@@ -6982,47 +8096,6 @@ function App() {
     },
     [openRightPanel]
   );
-  // Functional updates so this is stale-closure-safe inside the keydown /
-  // postMessage listeners; opening always clears the sibling panels.
-  const toggleRightPanel = useCallback((which) => {
-    if (which === 'inspector') {
-      setInspectorOpen((v) => {
-        if (!v) {
-          setChangesOpen(false);
-          setCommentsPanelOpen(false);
-          setAssistantOpen(false);
-        }
-        return !v;
-      });
-    } else if (which === 'comments') {
-      setCommentsPanelOpen((v) => {
-        if (!v) {
-          setChangesOpen(false);
-          setInspectorOpen(false);
-          setAssistantOpen(false);
-        }
-        return !v;
-      });
-    } else if (which === 'changes') {
-      setChangesOpen((v) => {
-        if (!v) {
-          setInspectorOpen(false);
-          setCommentsPanelOpen(false);
-          setAssistantOpen(false);
-        }
-        return !v;
-      });
-    } else if (which === 'assistant') {
-      setAssistantOpen((v) => {
-        if (!v) {
-          setChangesOpen(false);
-          setInspectorOpen(false);
-          setCommentsPanelOpen(false);
-        }
-        return !v;
-      });
-    }
-  }, []);
   // 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), []);
@@ -7088,7 +8161,7 @@ function App() {
     setup: (step) => {
       if (!step) return;
       if ((step.canvas || step.requireSelection) && tabs.length === 0) {
-        setSidebarOpen(true);
+        openPanelExclusive('tree');
         setTimeout(() => {
           try {
             document.querySelector('.st-sidebar [role="treeitem"]')?.click();
@@ -7108,13 +8181,19 @@ function App() {
       localStorage.setItem(USAGE_TOUR_STORE, '1');
     } catch {}
   }, []);
-  const [annotationsVisible, setAnnotationsVisible] = useState(true);
+  const [annotationsVisible, setAnnotationsVisible] = useState(() =>
+    readBoolStore(ANNOT_STORE, true)
+  );
+  // feature-unified-settings-modal — gate the disk-write effect until the boot
+  // GET /_api/ui-prefs has reconciled (disk-wins), so we never clobber a stored
+  // pref with the localStorage/default value on the first render.
+  const [uiPrefsHydrated, setUiPrefsHydrated] = useState(false);
   // Canvas-chrome visibility (View menu). minimap + zoom-controls are
   // persistent prefs broadcast to every open canvas iframe; presentMode is a
   // non-destructive "hide ALL chrome + shell, artboards only" overlay with an
   // Esc / floating-pill escape hatch back to the chrome.
-  const [minimapVisible, setMinimapVisible] = useState(true);
-  const [zoomCtlVisible, setZoomCtlVisible] = useState(true);
+  const [minimapVisible, setMinimapVisible] = useState(() => readBoolStore(MINIMAP_STORE, false));
+  const [zoomCtlVisible, setZoomCtlVisible] = useState(() => readBoolStore(ZOOMCTL_STORE, false));
   const [presentMode, setPresentMode] = useState(false);
   // P2/P3 (Plan C) — top-bar live state. (Zoom lives in the canvas toolbar pill,
   // so the top bar no longer mirrors it.)
@@ -7145,6 +8224,96 @@ function App() {
     [activePath]
   );
 
+  // ── feature-photo-editor — the Photo tab's three channels ─────────────────
+  // (1) live preview: broadcast the edit DOWN to the active canvas iframe, whose
+  //     canvas-lib `PhotoPreviewBridge` bakes the composite and swaps it directly
+  //     into the matching `<img>`/`<image>` element's src/href (iteration 2 — see
+  //     the bridge's own header comment for why it's a direct swap, not an
+  //     overlay). (2) undo: a shell-side stack (photo edits are sidecar writes,
+  //     not the canvas-side source-edit stack). (3) background removal: the
+  //     client-side @imgly ML flow (Task 12).
+  const onPhotoEdit = useCallback(
+    (asset, edit) => postToActiveCanvas({ dgn: 'photo-preview', asset, edit }),
+    [postToActiveCanvas]
+  );
+  const onPhotoRecordEdit = useCallback((asset, before, after) => {
+    photoUndoRef.current.undo.push({ asset, before, after });
+    photoUndoRef.current.redo.length = 0;
+  }, []);
+  // Pops the shell-side photo-undo stack, re-persists the reverted edit through
+  // the same PUT route PhotoKnobs itself uses, re-broadcasts it to the live
+  // preview, and bumps `photoRev` so the mounted PhotoKnobs (keyed on
+  // `asset:photoRev`) remounts and re-fetches instead of drifting from its own
+  // stale local state. Returns false (does nothing) when the requested stack is
+  // empty, so callers can fall through to the canvas's own undo stack.
+  const performPhotoUndo = useCallback(
+    (redo) => {
+      const stack = redo ? photoUndoRef.current.redo : photoUndoRef.current.undo;
+      if (!stack.length) return false;
+      const entry = stack.pop();
+      (redo ? photoUndoRef.current.undo : photoUndoRef.current.redo).push(entry);
+      const edit = (redo ? entry.after : entry.before) || {};
+      onPhotoEdit(entry.asset, edit);
+      fetch(`/_api/photo-edit?asset=${encodeURIComponent(entry.asset)}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(edit),
+      }).catch(() => {});
+      setPhotoRev((v) => v + 1);
+      return true;
+    },
+    [onPhotoEdit]
+  );
+  // Task 12 — magic background removal, entirely client-side (WASM/WebGPU via
+  // @imgly/background-removal — NEVER the -node native-addon variant, DDR-070).
+  // The lib is DYNAMICALLY imported so a session that never removes a background
+  // pays zero bundle cost (the lazy-bundle guarantee). Fetches the source bytes,
+  // runs the matte, uploads it content-addressed through the SAME /_api/asset lane
+  // drag-drop uses, and returns the new `assets/<sha8>.png` for PhotoEdit.
+  const onPhotoRemoveBackground = useCallback(
+    async (asset) => {
+      // Scan/shimmer reveal on the live photo while the ML pass runs, the same
+      // "something is actively happening here" language as the agent-edit
+      // artboard rim (artboard-activity-overlay.tsx) — but applied directly to
+      // the photo element itself (a `data-photo-busy` attribute + injected CSS
+      // mask sweep, inspect.ts) rather than a floating tracked overlay. A
+      // floating decoy is exactly the architecture DDR-161's addendum tore out
+      // for the live-edit preview (z-index/resize/hit-testing bugs); an
+      // attribute toggle on the real element sidesteps that whole class.
+      postToActiveCanvas({ dgn: 'photo-busy', asset, busy: true });
+      try {
+        const srcRes = await fetch(`/${asset.replace(/^\/+/, '')}`);
+        if (!srcRes.ok) return null;
+        const srcBlob = await srcRes.blob();
+        const { removeBackground } = await import('@imgly/background-removal');
+        // Inference is 100% CLIENT-SIDE (WASM/WebGPU) — the user's pixels NEVER
+        // leave the browser. Only the public model weights (~40 MB, identical for
+        // everyone) are fetched from IMG.LY's default host on first use; they're
+        // too large to bundle in the npm tarball (`resources.json` ships empty).
+        // Self-hosting those weights off the dev server for offline / air-gapped
+        // parity is the flagged Task-11 follow-up (a one-time download step) — until
+        // then the default host provides them, with no pixel-privacy exposure.
+        const matte = await removeBackground(srcBlob);
+        const up = await fetch('/_api/asset', {
+          method: 'POST',
+          headers: { 'content-type': matte.type || 'image/png' },
+          body: matte,
+        });
+        const j = await up.json().catch(() => ({}));
+        if (up.ok && j.path) return { maskAsset: j.path };
+        return null;
+      } catch (err) {
+        console.error('[photo] background removal failed', err);
+        return null;
+      } finally {
+        // Always clears, success or failure — an errored pass must not leave
+        // the shimmer stuck on the photo forever.
+        postToActiveCanvas({ dgn: 'photo-busy', asset, busy: false });
+      }
+    },
+    [postToActiveCanvas]
+  );
+
   // 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
@@ -7533,6 +8702,87 @@ function App() {
       localStorage.setItem(SECTIONS_STORE, JSON.stringify(sectionsExpanded));
     } catch {}
   }, [sectionsExpanded]);
+  useEffect(() => {
+    try {
+      localStorage.setItem(MINIMAP_STORE, minimapVisible ? '1' : '0');
+    } catch {}
+  }, [minimapVisible]);
+  useEffect(() => {
+    try {
+      localStorage.setItem(ZOOMCTL_STORE, zoomCtlVisible ? '1' : '0');
+    } catch {}
+  }, [zoomCtlVisible]);
+  useEffect(() => {
+    try {
+      localStorage.setItem(ANNOT_STORE, annotationsVisible ? '1' : '0');
+    } catch {}
+  }, [annotationsVisible]);
+
+  // feature-unified-settings-modal — reconcile view prefs with the on-disk store
+  // once on mount (disk wins over the localStorage/default init: it survives a
+  // cleared localStorage). Applying a value that already matches is a no-op, so
+  // there's no flash in the common case. On failure we still mark hydrated so
+  // writes resume best-effort.
+  useEffect(() => {
+    let cancelled = false;
+    fetch('/_api/ui-prefs')
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((p) => {
+        if (cancelled || !p || typeof p !== 'object') return;
+        if (p.theme === 'light' || p.theme === 'dark') setTheme(p.theme);
+        if (typeof p.minimap === 'boolean') setMinimapVisible(p.minimap);
+        if (typeof p.zoom === 'boolean') setZoomCtlVisible(p.zoom);
+        if (typeof p.annotations === 'boolean') setAnnotationsVisible(p.annotations);
+        if (typeof p.autoOpenInspector === 'boolean') setAutoOpenInspector(p.autoOpenInspector);
+        if (p.panelSides && typeof p.panelSides === 'object')
+          setPanelSide({ ...PANEL_SIDES_DEFAULTS, ...p.panelSides });
+        if (p.layersMode === 'separate' || p.layersMode === 'in-inspector')
+          setLayersMode(p.layersMode);
+      })
+      .catch(() => {})
+      .finally(() => {
+        if (!cancelled) setUiPrefsHydrated(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Mirror every view pref to disk once hydrated. The barrier stops the initial
+  // render (localStorage/default values) from overwriting the disk store before
+  // the boot GET has reconciled.
+  useEffect(() => {
+    if (!uiPrefsHydrated) return;
+    persistUiPrefs({
+      theme,
+      minimap: minimapVisible,
+      zoom: zoomCtlVisible,
+      annotations: annotationsVisible,
+      autoOpenInspector,
+      panelSides: panelSide,
+      layersMode,
+    });
+  }, [
+    uiPrefsHydrated,
+    theme,
+    minimapVisible,
+    zoomCtlVisible,
+    annotationsVisible,
+    autoOpenInspector,
+    panelSide,
+    layersMode,
+  ]);
+  // localStorage mirror for panel sides + layers mode (synchronous no-flash init).
+  useEffect(() => {
+    try {
+      localStorage.setItem(PANEL_SIDES_STORE, JSON.stringify(panelSide));
+    } catch {}
+  }, [panelSide]);
+  useEffect(() => {
+    try {
+      localStorage.setItem(LAYERS_MODE_STORE, layersMode);
+    } catch {}
+  }, [layersMode]);
 
   const toggleSection = useCallback((label, defaultOpen) => {
     setSectionsExpanded((prev) => {
@@ -7563,7 +8813,14 @@ function App() {
       // fetch (either may land first). `?? {}` keeps older servers (no map) on
       // the ds0 fallback. Re-runs on every tree reload, so adding/retargeting a
       // canvas refreshes the map.
-      setCfg((prev) => ({ ...prev, canvasDesignSystems: data.canvasDesignSystems ?? {} }));
+      setCfg((prev) => ({
+        ...prev,
+        canvasDesignSystems: data.canvasDesignSystems ?? {},
+        // DDR-174 (T15) — per-canvas notable `.meta.json` `kind` values (today:
+        // only `reconstructed-experimental`), folded in the same way + for the
+        // same reason as canvasDesignSystems above.
+        canvasKinds: data.canvasKinds ?? {},
+      }));
     } catch (e) {
       console.error('failed to load tree', e);
     }
@@ -7863,8 +9120,11 @@ function App() {
   useEffect(() => {
     if (gitStatus?.repo === false) return; // solo / non-git project — no remote
     refreshRemoteSync();
-    if (!changesOpen) return; // only keep polling while the panel is visible
-    const id = setInterval(refreshRemoteSync, 60000);
+    // Poll in the background too — not only while Changes is open — so the dock's
+    // "Get latest" nudge surfaces a teammate's publish proactively. Slower cadence
+    // when the panel is closed to stay network-polite (the ahead/behind probe is
+    // TTL-cached server-side, so a missed tick is cheap to re-issue).
+    const id = setInterval(refreshRemoteSync, changesOpen ? 60000 : 120000);
     return () => clearInterval(id);
   }, [gitStatus?.repo, changesOpen, refreshRemoteSync]);
 
@@ -8245,7 +9505,22 @@ function App() {
       // canvas must not be able to plant a selection with no user gesture. The
       // user can only click the visible active canvas, so a non-active source is
       // never a legitimate selection.
-      if (m.dgn === 'select' || m.dgn === 'select-set' || m.dgn === 'clear-select') {
+      //
+      // The SAME gate now covers the privileged SOURCE-WRITE relays — `edit-text`
+      // (inline text commit) and `apply-edit` (undo/redo re-application). Both
+      // ride into a main-origin `.tsx` rewrite; a write path is strictly more
+      // dangerous than a selection, yet was previously ungated (ethical-hacker
+      // F-B, DDR-160 follow-up). A background/synced untrusted canvas (DDR-054)
+      // must not drive a gestureless write into another canvas — and inline edits
+      // + Cmd+Z always originate in the ACTIVE canvas the user is looking at, so
+      // a non-active source is never legitimate here either.
+      if (
+        m.dgn === 'select' ||
+        m.dgn === 'select-set' ||
+        m.dgn === 'clear-select' ||
+        m.dgn === 'edit-text' ||
+        m.dgn === 'apply-edit'
+      ) {
         const activeWin =
           activePath && activePath !== SYSTEM_TAB
             ? iframesRef.current.get(activePath)?.contentWindow
@@ -8253,10 +9528,12 @@ function App() {
         if (e.source !== activeWin) return;
       }
       if (m.dgn === 'select' && m.selection) {
+        setPhotoSel(null); // a DOM selection supersedes an annotation-image Photo target
         wsSend({ type: 'select', selection: m.selection });
         setSelected(m.selection);
         maybeAutoOpenInspectorOnSelect(m.selection); // Stage C
       } else if (m.dgn === 'select-set') {
+        setPhotoSel(null);
         // Canvas multi-select. Payload shape:
         //   null              → empty selection
         //   Selection         → length-1 (back-compat with legacy single-element shape)
@@ -8280,6 +9557,7 @@ function App() {
           maybeAutoOpenInspectorOnSelect(payload); // Stage C
         }
       } else if (m.dgn === 'clear-select') {
+        setPhotoSel(null);
         wsSend({ type: 'clear-select' });
         setSelected(null);
       } else if (m.dgn === 'edit-text' && m.id) {
@@ -8301,7 +9579,15 @@ function App() {
         fetch('/_api/edit-text', {
           method: 'POST',
           headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ canvas: m.file, id: m.id, text: m.text ?? '' }),
+          body: JSON.stringify({
+            canvas: m.file,
+            id: m.id,
+            text: m.text ?? '',
+            // Context for editing `{variable}` text — which rendered instance +
+            // its pre-edit text, so the engine targets the right source string.
+            ...(typeof m.occurrence === 'number' ? { occurrence: m.occurrence } : {}),
+            ...(typeof m.before === 'string' ? { before: m.before } : {}),
+          }),
         })
           .then((r) => r.json().catch(() => ({})))
           .then((j) => {
@@ -8334,6 +9620,11 @@ function App() {
         } else {
           url = '/_api/edit-text';
           body = { canvas: m.canvas, id: m.id, text: value ?? '' };
+          // Undo/redo of a `{variable}` text edit needs to re-target the source
+          // string: the occurrence + the value currently on disk (`from` — the
+          // side we're replacing FROM). Harmless for literal text.
+          if (typeof m.occurrence === 'number') body.occurrence = m.occurrence;
+          if (typeof m.from === 'string') body.before = m.from;
         }
         editApplyChainRef.current = editApplyChainRef.current
           .catch(() => {})
@@ -8510,40 +9801,66 @@ function App() {
         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`.
+        // Stage I3 — insert a synthesized div/text/image relative to `refId`,
+        // OR — empty-artboard fallback (tool-palette "+ Element" on a fresh
+        // artboard with no elements yet) — as a child of `artboardId`. Exactly
+        // one of the two must be present; the artboardId variant only makes
+        // sense inside-start/inside-end (no sibling to be before/after).
         const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        const hasRefId = typeof m.refId === 'string';
+        const hasArtboardId = typeof m.artboardId === 'string';
+        const okPosition =
+          m.position === 'before' ||
+          m.position === 'after' ||
+          m.position === 'inside-start' ||
+          m.position === 'inside-end';
         const okShape =
-          typeof m.refId === 'string' &&
+          hasRefId !== hasArtboardId &&
           (m.kind === 'div' || m.kind === 'text' || m.kind === 'image') &&
-          (m.position === 'before' ||
-            m.position === 'after' ||
-            m.position === 'inside-start' ||
-            m.position === 'inside-end');
+          okPosition &&
+          (!hasArtboardId || m.position === 'inside-start' || m.position === 'inside-end');
         if (e.source === activeWin && okShape) {
           insertElementShellRef.current?.(m.refId, m.position, m.kind, {
+            artboardId: hasArtboardId ? m.artboardId : undefined,
             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.
+        // Stage F/I3 — "Insert ▸ Image" from the canvas context menu, or the
+        // tool-palette's Image tool (`artboardId` in place of `refId` for its
+        // empty-artboard fallback, or NEITHER when the canvas has no artboard
+        // at all — feature-bulk-media-insert). An image needs a contained
+        // asset src, so the shell opens the AssetPicker in bulk mode; the
+        // confirm then drives insertElementShell(kind:'image') per path (Task
+        // 10) or a single batched annotation insert. Confused-deputy gated +
+        // pinned to the active canvas like the other request verbs.
         const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        const hasRefId = typeof m.refId === 'string';
+        const hasArtboardId = typeof m.artboardId === 'string';
+        const noAnchor = !hasRefId && !hasArtboardId;
         const okShape =
-          typeof m.refId === 'string' &&
-          (m.position === 'before' ||
+          (hasRefId !== hasArtboardId || noAnchor) &&
+          (noAnchor ||
+            m.position === 'before' ||
             m.position === 'after' ||
             m.position === 'inside-start' ||
-            m.position === 'inside-end');
+            m.position === 'inside-end') &&
+          (!hasArtboardId || 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,
+            artboardId: hasArtboardId ? m.artboardId : undefined,
+            position: noAnchor ? undefined : m.position,
             refIndex: Number.isInteger(m.refIndex) ? m.refIndex : undefined,
+            multiple: true,
+            // Artboard destination is possible whenever there's ANY resolvable
+            // anchor — a refId (context-menu, or the tool-palette's normal
+            // last-element case) inserts inside the SAME artboard that
+            // element already lives in, not just the artboardId fallback.
+            hasArtboardAnchor: !noAnchor,
           });
         }
       } else if (m.dgn === 'replace-media-request') {
@@ -8573,6 +9890,27 @@ function App() {
             before: typeof m.before === 'string' ? m.before : null,
           });
         }
+      } else if (m.dgn === 'edit-annotation-photo-request') {
+        // feature-photo-editor (Task 17) — "Edit Photo…" on an annotation
+        // ImageStroke. The annotation model has no data-cd-id / DOM selection, so
+        // it can't ride the normal select path; instead the canvas posts its
+        // `assets/<sha8>.<ext>` href up and the shell opens the Photo-only tab on
+        // it. Same confused-deputy gate (DDR-054) + active-canvas pin as F3.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        const asset = PHOTO_ASSET_RE.exec(typeof m.asset === 'string' ? m.asset : '')?.[0] || null;
+        if (e.source === activeWin && typeof m.id === 'string' && asset) {
+          setPhotoSel({ asset, strokeId: m.id });
+          openRightPanel('inspector');
+          setInspectorTab('photo');
+        }
+      } else if (m.dgn === 'open-sticker-picker') {
+        // Phase 4 (whiteboard-improvements) — the toolbar's Stickers button.
+        // Confused-deputy gated + pinned to the active canvas like the other
+        // request verbs above.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source === activeWin) {
+          openStickerPickerRef.current?.({ canvas: activePath });
+        }
       } 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;
@@ -8609,7 +9947,12 @@ function App() {
         }
       } else if (m.dgn === 'open-inspector') {
         // Phase 12 — context-menu "Inspect" / tool-palette Inspect opens the right panel.
+        // feature-photo-editor (Task 16) — an optional `tab` lands the panel on a
+        // specific tab (the element "Edit Photo…" entry passes `tab: 'photo'`; the
+        // img is already selected via select-set, so the Photo tab derives its
+        // target from that selection's `photoAsset`).
         openRightPanel('inspector');
+        if (typeof m.tab === 'string') setInspectorTab(m.tab);
       } else if (m.dgn === 'present-enter') {
         // Canvas tool-palette "Presentation mode" button — Present Mode is a
         // shell-level state (hides the menubar / sidebar / panels), so the
@@ -8703,6 +10046,23 @@ function App() {
             height: Math.max(1, Math.round(Number(c.height) || 0)),
           }));
         setActiveComps(safe);
+        // rca/issue-video-artboard-frame-reset-on-edit — the SAME comp
+        // re-announcing means its Player just remounted (an edit-triggered
+        // HMR remount, or a ⌘R hard iframe reload that wiped video-comp.tsx's
+        // own module-scope frame mirror too). The shell's `timelineFrame`
+        // survives either way (this component doesn't remount) — push it back
+        // down so the fresh Player opens where the Timeline left off, instead
+        // of the poster-frame default. Skip on a genuinely new comp/canvas
+        // (no prior id, or frame still at its post-switch 0).
+        const prevCompId = timelineCompIdRef.current;
+        const stillPresent = prevCompId && safe.some((c) => c.id === prevCompId);
+        if (stillPresent && timelineFrameRef.current > 0) {
+          postToActiveCanvas({
+            dgn: 'timeline-seek',
+            frame: timelineFrameRef.current,
+            id: prevCompId,
+          });
+        }
       } else if (m.dgn === 'timeline-frame' && typeof m.frame === 'number') {
         // Live playhead mirror from the Player (preview scrub/playback).
         const activeWin =
@@ -8714,6 +10074,17 @@ function App() {
         // 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 === 'timeline-ended') {
+        // The Player stopped itself at the last frame (loop off) — resync the
+        // shell's Play/Pause button, which otherwise has no way to learn
+        // playback ended on its own (rca/issue-video-artboard-loop-defaults-on).
+        const activeWin =
+          activePath && activePath !== SYSTEM_TAB
+            ? iframesRef.current.get(activePath)?.contentWindow
+            : null;
+        if (e.source !== activeWin) return;
+        if (m.id && timelineCompIdRef.current && m.id !== timelineCompIdRef.current) return;
+        setTimelinePlaying(false);
       } 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
@@ -8726,6 +10097,8 @@ function App() {
         else if (m.id === 'inspector') toggleRightPanel('inspector');
         else if (m.id === 'assistant' && isNativeApp()) toggleRightPanel('assistant');
         else if (m.id === 'comments') toggleRightPanel('comments');
+        else if (m.id === 'changes') toggleRightPanel('changes');
+        else if (m.id === 'timeline') toggleTimeline();
         else if (m.id === 'export') setExportDialog({ mode: 'export' });
         else if (m.id === 'handoff') setExportDialog({ mode: 'handoff' });
       } else if (m.dgn === 'open-export') {
@@ -8736,6 +10109,11 @@ function App() {
           mode: 'export',
           scope: m.detail && typeof m.detail.scope === 'string' ? m.detail.scope : undefined,
         });
+      } else if (m.dgn === 'open-timeline-request') {
+        // Artboard-chrome context menu's "Open Timeline" (video-comp artboards
+        // only). Scope the Timeline to the right-clicked artboard, then open it.
+        if (typeof m.artboardId === 'string') setCanvasActiveArtboard(m.artboardId.slice(0, 120));
+        setTimelineOpen(true);
       } else if (m.dgn === 'loaded' && m.file) {
         // iframe finished loading — drop the compile skeleton, push current
         // comments + carry over focused pin if any
@@ -8885,6 +10263,7 @@ function App() {
     zoomCtlVisible,
     broadcastChrome,
     activePath,
+    postToActiveCanvas,
   ]);
 
   // Tell the active canvas iframe to drop any persistent selection (canvas
@@ -9269,6 +10648,7 @@ function App() {
         '/_api/insert-element',
         {
           refId,
+          artboardId: typeof opts.artboardId === 'string' ? opts.artboardId : undefined,
           position,
           kind,
           src: typeof opts.src === 'string' ? opts.src : undefined,
@@ -9287,6 +10667,32 @@ function App() {
     [structuralWrite]
   );
 
+  // feature-ai-media-generation Phase 1 (Task 1.1) — auto-insert a generated
+  // image onto the canvas where the user is looking, so generation is never a
+  // dead-end modal. The image landed in the content-addressed asset store
+  // (assets/<sha8>.png) via the privileged /_api/generate-jobs route; splice it
+  // into the active artboard through the SAME main-origin source-write lane the
+  // AssetPicker uses (insertElementShell → /_api/insert-element). Returns true
+  // when it placed the image, false when there's no target artboard (no canvas
+  // open / no active artboard) so the caller can fall back to a manual affordance.
+  const insertGeneratedImage = useCallback(
+    (assetPath) => {
+      if (typeof assetPath !== 'string' || !assetPath) return false;
+      if (!activePath) return false;
+      // Respect the active-canvas + selected-artboard signals (_active.json): an
+      // explicit selection wins, else the viewport-active artboard canvas-lib
+      // reports on pan. Without a target artboard we can't source-write.
+      const artboardId = selectedRef.current?.artboardId ?? canvasActiveArtboard ?? null;
+      if (!artboardId) return false;
+      // Insert as the last child of the artboard (empty or not — the engine's
+      // insertElementIntoArtboard handles both). Content-addressed src only; the
+      // route contains an `image` src to assets/ (no remote hotlink / scheme).
+      insertElementShell(undefined, 'inside-end', 'image', { artboardId, src: assetPath });
+      return true;
+    },
+    [activePath, canvasActiveArtboard, insertElementShell]
+  );
+
   const duplicateElementShell = useCallback(
     (id, idIndex) => {
       structuralWrite(
@@ -9424,6 +10830,28 @@ function App() {
     },
     [structuralWrite]
   );
+
+  // Artboard "hug height" default — Hug ⇄ Fixed toggle from ArtboardKnobs
+  // (CSS panel). Direct shell-side action (no canvas postMessage round trip,
+  // unlike resizeArtboardShell's drag-overlay caller), so no *ShellRef needed.
+  const setArtboardHugShell = useCallback(
+    (artboardId, fixed, freezeHeight) => {
+      structuralWrite(
+        '/_api/set-artboard-hug',
+        { artboardId, fixed, freezeHeight },
+        { label: fixed ? 'pin artboard height' : 'hug artboard height' }
+      );
+    },
+    [structuralWrite]
+  );
+
+  // Artboard "more settings" (background/padding/layout/gap) from ArtboardKnobs.
+  const setArtboardStyleShell = useCallback(
+    (artboardId, patch) => {
+      structuralWrite('/_api/set-artboard-style', { artboardId, ...patch }, { label: 'artboard style' });
+    },
+    [structuralWrite]
+  );
   // Refs the (stale-closure) onMessage handlers below read.
   const deleteElementShellRef = useRef(null);
   const insertElementShellRef = useRef(null);
@@ -9474,8 +10902,11 @@ function App() {
           t.tagName === 'SELECT' ||
           t.isContentEditable);
       if (editable) return;
-      if (!activePath || activePath === SYSTEM_TAB) return;
+      // Suppress the WKWebView back-nav unconditionally once focus isn't editable —
+      // the activePath/SYSTEM_TAB check below is app logic, not default-action gating,
+      // so it must not gate preventDefault (that gap caused the desktop "Starting…" hang).
       e.preventDefault();
+      if (!activePath || activePath === SYSTEM_TAB) return;
       const one = Array.isArray(selected) ? (selected.length === 1 ? selected[0] : null) : selected;
       if (one?.artboardId && !one.id) deleteArtboardShell(one.artboardId);
     };
@@ -9491,6 +10922,16 @@ function App() {
   useEffect(() => {
     openAssetPickerRef.current = (req) => setAssetPickerReq(req);
   }, []);
+
+  // Phase 4 (whiteboard-improvements) — { canvas: activePath } when open, null
+  // when closed. Mirrors assetPickerReq's ref-indirection (the message
+  // listener below is set up with a minimal dep array, so it reaches a FRESH
+  // opener via a ref rather than needing setStickerPickerReq in its own deps).
+  const [stickerPickerReq, setStickerPickerReq] = useState(null);
+  const openStickerPickerRef = useRef(null);
+  useEffect(() => {
+    openStickerPickerRef.current = (req) => setStickerPickerReq(req);
+  }, []);
   const onAssetPicked = useCallback(
     (pickedPath) => {
       const req = assetPickerReq;
@@ -9506,6 +10947,7 @@ function App() {
       }
       if (req.purpose === 'insert-image') {
         insertElementShell(req.refId, req.position || 'after', 'image', {
+          artboardId: req.artboardId,
           src: pickedPath,
           refIndex: req.refIndex,
         });
@@ -9551,6 +10993,77 @@ function App() {
     },
     [assetPickerReq, insertElementShell, activePath, recordSourceEdit, postToActiveCanvas]
   );
+
+  // feature-bulk-media-insert Task 10 — the picker's multi-select confirm.
+  // `destination === 'artboard'`: loop insertElementShell once per path
+  // (already race-safe via editApplyChainRef, no new serialization needed);
+  // always appended `inside-end` of whichever artboard is currently active —
+  // NOT the single-pick request's own refId/position, which only made sense
+  // for inserting exactly one image relative to one anchor. `destination ===
+  // 'annotation'`: one batched message so the canvas-side handler (Task 11)
+  // performs a single atomic commit instead of N racing ones.
+  const onPickMany = useCallback(
+    (paths, destination) => {
+      const req = assetPickerReq;
+      setAssetPickerReq(null);
+      if (!req || !Array.isArray(paths) || !paths.length) return;
+      if (req.canvas && req.canvas !== activePath) {
+        console.warn('[asset-picker] active canvas changed since request — aborting');
+        return;
+      }
+      if (destination === 'artboard') {
+        const artboardId = selectedRef.current?.artboardId ?? canvasActiveArtboard ?? null;
+        if (!artboardId) return;
+        for (const src of paths) {
+          insertElementShell(undefined, 'inside-end', 'image', { artboardId, src });
+        }
+        return;
+      }
+      postToActiveCanvas({ dgn: 'insert-annotation-media', paths });
+    },
+    [assetPickerReq, activePath, insertElementShell, canvasActiveArtboard, postToActiveCanvas]
+  );
+
+  // Phase 4 (whiteboard-improvements) — a bundled sticker has no project asset
+  // path yet (it lives in MAUDE's own STICKERS_DIR, main-origin-only per
+  // DDR-054), so re-upload its bytes through the SAME /_api/asset lane every
+  // other image source uses (content-addressed, canvas-origin-allowlisted) —
+  // then relay the resulting project-relative path down to the canvas exactly
+  // like replace-annotation-media above (the annotation model owns its own
+  // strokes; the shell performs no stroke write of its own).
+  const onStickerPicked = useCallback(
+    async (sticker) => {
+      const req = stickerPickerReq;
+      setStickerPickerReq(null);
+      if (!req || !sticker?.url) return;
+      // G3 security (DDR-152) — same re-check as onAssetPicked: the request
+      // captured the active canvas when the picker opened; abort rather than
+      // insert into whatever canvas happens to be active now.
+      if (req.canvas && req.canvas !== activePath) {
+        console.warn('[sticker-picker] active canvas changed since request — aborting');
+        return;
+      }
+      try {
+        const blob = await fetch(sticker.url).then((r) =>
+          r.ok ? r.blob() : Promise.reject(new Error(`HTTP ${r.status}`))
+        );
+        const res = await fetch('/_api/asset', {
+          method: 'POST',
+          headers: { 'content-type': blob.type || 'image/png' },
+          body: blob,
+        });
+        const j = await res.json().catch(() => ({}));
+        if (!res.ok || !j.path) {
+          console.warn('[sticker-picker]', j.error || `upload failed (HTTP ${res.status})`);
+          return;
+        }
+        postToActiveCanvas({ dgn: 'insert-sticker', path: j.path });
+      } catch {
+        console.warn('[sticker-picker] could not load or upload that sticker');
+      }
+    },
+    [stickerPickerReq, activePath, 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).
@@ -9654,8 +11167,19 @@ function App() {
           ) {
             return; // the timeline shortcuts effect claims it
           }
-          e.preventDefault();
           const redo = e.key === 'y' || e.key === 'Y' || e.shiftKey;
+          // feature-photo-editor — photo edits are sidecar writes (`/_api/photo-edit`),
+          // invisible to the canvas's own source-edit undo stack, so they need
+          // their own owner here. Claims the keypress only while the Photo tab
+          // is the one on screen AND it actually has something to undo/redo —
+          // otherwise falls through to the canvas stack as before. (Focus still
+          // inside a Photo-tab slider is handled separately by
+          // `onPhotoKnobKeyDown`, mirroring `onKnobKeyDown` for CSS knobs.)
+          if (inspectorTab === 'photo' && performPhotoUndo(redo)) {
+            e.preventDefault();
+            return;
+          }
+          e.preventDefault();
           postToActiveCanvas({ dgn: redo ? 'redo' : 'undo' });
           return;
         }
@@ -9713,6 +11237,19 @@ function App() {
         setExportDialog({ mode: 'handoff' });
         return;
       }
+      // Cmd+, — open Settings (AI generation keys). The platform convention for
+      // a settings/preferences surface (feature-ai-media-generation, DDR-16x).
+      if (meta && !e.shiftKey && !e.altKey && e.key === ',') {
+        e.preventDefault();
+        setSettingsOpen(true);
+        return;
+      }
+      // Cmd+Shift+T — toggle the Timeline (video-comp scrub) dock.
+      if (meta && e.shiftKey && (e.key === 't' || e.key === 'T')) {
+        e.preventDefault();
+        toggleTimeline();
+        return;
+      }
       // Cmd+C / Ctrl+C — Phase 4.1 removed the shell-side comment-drop chord.
       // Canvas comment-drop is the `C` tool letter (press C in the canvas,
       // then click the element) or right-click "Add comment". Cmd+C now
@@ -9743,7 +11280,7 @@ function App() {
       }
       if (meta && (e.key === 'f' || e.key === 'F')) {
         e.preventDefault();
-        if (!sidebarOpen) setSidebarOpen(true);
+        if (!sidebarOpen) openPanelExclusive('tree');
         setTimeout(() => {
           const inp = document.querySelector('.st-search input');
           if (inp) inp.focus();
@@ -9762,7 +11299,7 @@ function App() {
       if (e.key === 't' || e.key === 'T') {
         if (e.shiftKey || meta) return;
         e.preventDefault();
-        setSidebarOpen((v) => !v);
+        togglePanel('tree');
         return;
       }
       // H — toggle show-hidden (sidecars + project/runtime orphans)
@@ -9786,7 +11323,7 @@ function App() {
       // which the browser reserves for New Window and never delivers).
       if ((e.key === 'n' || e.key === 'N') && !meta && !e.shiftKey) {
         e.preventDefault();
-        setSidebarOpen(true);
+        openPanelExclusive('tree');
         setTimeout(
           () => document.querySelector('[aria-label="New blank brief board"]')?.click(),
           60
@@ -9828,6 +11365,9 @@ function App() {
     clearActiveCanvasSelection,
     presentMode,
     exitPresent,
+    toggleTimeline,
+    inspectorTab,
+    performPhotoUndo,
   ]);
 
   const registerIframe = useCallback((path, el) => {
@@ -9864,7 +11404,7 @@ function App() {
         icon: 'plus',
         kbd: 'N',
         run: () => {
-          setSidebarOpen(true);
+          openPanelExclusive('tree');
           setTimeout(
             () => document.querySelector('[aria-label="New blank brief board"]')?.click(),
             60
@@ -9887,6 +11427,21 @@ function App() {
         kbd: '⇧⌘H',
         run: () => setExportDialog({ mode: 'handoff' }),
       },
+      {
+        id: 'generate',
+        group: 'Canvas',
+        label: 'Generate with AI…',
+        icon: 'sparkle',
+        run: () => setGenerateOpen(true),
+      },
+      {
+        id: 'settings',
+        group: 'Canvas',
+        label: 'Settings…',
+        icon: 'sliders',
+        kbd: '⌘,',
+        run: () => setSettingsOpen(true),
+      },
       // ── View ────────────────────────────────────────────────────────────
       {
         id: 'system',
@@ -9969,6 +11524,155 @@ function App() {
     [openSystem, toggleTheme, reloadActive, whatsNew]
   );
 
+  // feature-configurable-panel-docking — resolve, for each slot, the panels
+  // assigned to it and which one is active (the open one). Layers is only a
+  // dockable panel in `separate` mode; Assistant is native-only.
+  const panelAvailable = (id) =>
+    id === 'assistant' ? isNativeApp() : id === 'layers' ? layersMode === 'separate' : true;
+  const idsForSide = (side) =>
+    DOCK_PANELS.filter(
+      (p) => panelAvailable(p.id) && (panelSide[p.id] || PANEL_SIDES_DEFAULTS[p.id]) === side
+    ).map((p) => p.id);
+  const panelIsOpen = {
+    tree: sidebarOpen,
+    layers: layersOpen,
+    inspector: inspectorOpen,
+    comments: commentsPanelOpen,
+    changes: changesOpen,
+    assistant: assistantOpen,
+  };
+  const leftIds = idsForSide('left');
+  const rightIds = idsForSide('right');
+  const leftActive = leftIds.find((id) => panelIsOpen[id]) || null;
+  const rightActive = rightIds.find((id) => panelIsOpen[id]) || null;
+  const leftHostsAssistant = isNativeApp() && (panelSide.assistant || 'right') === 'left';
+  const rightHostsAssistant = isNativeApp() && (panelSide.assistant || 'right') === 'right';
+  const resizingFor = (id) =>
+    (panelSide[id] || PANEL_SIDES_DEFAULTS[id]) === 'left' ? dragSide === 'sb' : dragSide === 'rp';
+  const activeCanvasFile =
+    activePath && activePath !== SYSTEM_TAB && /\.(tsx|html)$/i.test(activePath) ? activePath : null;
+
+  // Render a panel body by id (width undefined ⇒ fills the .st-dockslot wrapper,
+  // which owns the resizable width). Assistant is handled separately below as an
+  // always-mounted ChatPanel so its stream survives a tab switch.
+  const renderPanelBody = (id) => {
+    if (id === 'tree')
+      return (
+        <Sidebar
+          groups={groups}
+          activePath={activePath}
+          activeDsName={activePath === SYSTEM_TAB ? (systemData?.ds?.name ?? null) : null}
+          onOpen={openTab}
+          onOpenSystem={openSystem}
+          wsConnected={wsConnected}
+          search={search}
+          setSearch={setSearch}
+          commentsByFile={commentsByFile}
+          showHidden={showHidden}
+          sectionsExpanded={sectionsExpanded}
+          onToggleSection={toggleSection}
+          onNewBoard={createBoard}
+          onDeleteBoard={deleteBoard}
+          onRefresh={refreshTree}
+          refreshing={treeRefreshing}
+          collapsed={false}
+          onCollapse={() => togglePanel('tree')}
+          resizing={resizingFor('tree')}
+          dirtyByPath={dirtyByPath}
+          project={project}
+          gitBranch={gitStatus?.branch}
+          remoteSync={remoteSync}
+          onGetLatest={gitGetLatest}
+          canvasKinds={cfg?.canvasKinds}
+        />
+      );
+    if (id === 'changes')
+      return (
+        <GitPanel
+          status={gitStatus && remoteSync ? { ...gitStatus, ...remoteSync } : gitStatus}
+          project={project}
+          readOnly={!isNativeApp()}
+          resizing={resizingFor('changes')}
+          onClose={() => setChangesOpen(false)}
+          onCommit={gitCommit}
+          onDiscard={gitDiscard}
+          onPublish={gitPublish}
+          onGetLatest={gitGetLatest}
+          loadLog={gitLoadLog}
+          onOpenCanvas={(p) => openTab(p)}
+          onOpenDiff={(file) => setDiffTarget({ file, beforeSha: 'HEAD', conflict: false })}
+          activeCanvas={activeCanvasFile}
+          onPreviewVersion={(sha) => setDiffTarget({ file: activePath, beforeSha: sha, conflict: false })}
+          designRel={(cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '')}
+        />
+      );
+    if (id === 'inspector' || id === 'layers')
+      return (
+        <InspectorPanel
+          layersOnly={id === 'layers'}
+          hideLayersTab={layersMode === 'separate'}
+          cpMode={cpMode}
+          onSetCpMode={setCpMode}
+          selected={selected}
+          cfg={cfg}
+          tab={id === 'layers' ? 'layers' : inspectorTab}
+          onTabChange={setInspectorTab}
+          onClose={() => (id === 'layers' ? setLayersOpen(false) : setInspectorOpen(false))}
+          onOptimistic={applyOptimisticStyle}
+          onRecordEdit={recordSourceEdit}
+          onReplaceMedia={onReplaceMedia}
+          onResizeArtboard={resizeArtboardShell}
+          onSetArtboardHug={setArtboardHugShell}
+          onSetArtboardStyle={setArtboardStyleShell}
+          editScope={editScope}
+          onUndoRedo={(dir) => postToActiveCanvas({ dgn: dir })}
+          photoSel={photoSel}
+          photoRev={photoRev}
+          onPhotoEdit={onPhotoEdit}
+          onPhotoRemoveBackground={onPhotoRemoveBackground}
+          onPhotoRecordEdit={onPhotoRecordEdit}
+          onPhotoUndoRedo={(dir) => performPhotoUndo(dir === 'redo')}
+          layersTree={layersTree}
+          canvasFile={activePath}
+          onSelectLayer={(n) =>
+            postToActiveCanvas({
+              dgn: 'select-by-id',
+              id: n.id,
+              artboardId: layersTree?.artboardId,
+              index: n.index,
+            })
+          }
+          onHoverLayer={(n) =>
+            postToActiveCanvas({
+              dgn: 'highlight',
+              id: n ? n.id : null,
+              artboardId: layersTree?.artboardId,
+              index: n ? n.index : 0,
+            })
+          }
+          onReorderLayer={reorderLayer}
+          layersBusyRef={layersBusyRef}
+          resizing={resizingFor(id)}
+        />
+      );
+    if (id === 'comments')
+      return (
+        <CommentsPanel
+          commentsByFile={commentsByFile}
+          filter={commentsFilter}
+          setFilter={setCommentsFilter}
+          activePath={activePath}
+          focusedId={focusedCommentId}
+          onJump={jumpToComment}
+          onResolve={resolveComment}
+          onReopen={reopenComment}
+          onDelete={deleteComment}
+          resizing={resizingFor('comments')}
+        />
+      );
+    return null;
+  };
+
   return (
     <div
       className={'maude' + (presentMode ? ' is-present' : '')}
@@ -10014,7 +11718,7 @@ function App() {
           onToggleChanges={() => toggleRightPanel('changes')}
           onOpenSystem={openSystem}
           sidebarOpen={sidebarOpen}
-          onToggleSidebar={() => setSidebarOpen((v) => !v)}
+          onToggleSidebar={() => togglePanel('tree')}
           showHidden={showHidden}
           onToggleShowHidden={() => setShowHidden((v) => !v)}
           onOpenHelp={() => setHelpOpen(true)}
@@ -10031,6 +11735,8 @@ function App() {
           onTogglePresent={togglePresent}
           postToActiveCanvas={postToActiveCanvas}
           onOpenReadiness={() => setReadinessOpen(true)}
+          onOpenQuickSetup={() => setQuickSetupOpen(true)}
+          onWatchIntro={() => setIntroOpen(true)}
           onOpenWhatsNew={whatsNew.openPanel}
           whatsNewCount={whatsNew.unseen.length}
           exportCenter={exportCenter}
@@ -10049,17 +11755,20 @@ function App() {
           assistantBusy={assistantBusy}
           assistantUnseen={assistantUnseen}
           onOpenLayers={() => {
-            // Toggle: already open on Layers → close; otherwise open on Layers
-            // (clearing the sibling panels — one dock slot).
-            if (inspectorOpen && inspectorTab === 'layers') {
+            // feature-configurable-panel-docking — Layers is its own dockable
+            // panel when layersMode==='separate' (toggle it), else it's the
+            // Inspector's Layers tab (open the inspector on that tab).
+            if (layersMode === 'separate') {
+              togglePanel('layers');
+            } else if (inspectorOpen && inspectorTab === 'layers') {
               setInspectorOpen(false);
             } else {
               setInspectorTab('layers');
-              openRightPanel('inspector');
+              openPanelExclusive('inspector');
             }
           }}
           onNewCanvas={() => {
-            setSidebarOpen(true);
+            openPanelExclusive('tree');
             setTimeout(
               () => document.querySelector('[aria-label="New blank brief board"]')?.click(),
               60
@@ -10067,6 +11776,8 @@ function App() {
           }}
           onAssembleVideo={assembleVideo}
           onOpenExport={(mode) => setExportDialog({ mode })}
+          onOpenSettings={() => setSettingsOpen(true)}
+          onOpenGenerate={() => setGenerateOpen(true)}
           onReload={reloadActive}
           onCloseCanvas={() => activePath && closeTab(activePath)}
           presence={
@@ -10088,42 +11799,44 @@ function App() {
           }
         />
         <div className={'st-body' + (dragSide ? ' is-resizing' : '')} ref={bodyRef}>
+          {/* LEFT dock slot (feature-configurable-panel-docking) — the collapsed
+              rail shows when the left slot is empty; the tree's expand hooks open
+              it on the tree tab. */}
           <CollapsedRail
-            shown={!sidebarOpen}
-            onExpand={() => setSidebarOpen(true)}
+            shown={!leftActive}
+            onExpand={() => openPanelExclusive('tree')}
             onSearch={() => {
-              setSidebarOpen(true);
+              openPanelExclusive('tree');
               setTimeout(() => document.querySelector('.st-search input')?.focus(), 60);
             }}
           />
-          <Sidebar
-            groups={groups}
-            activePath={activePath}
-            activeDsName={activePath === SYSTEM_TAB ? (systemData?.ds?.name ?? null) : null}
-            onOpen={openTab}
-            onOpenSystem={openSystem}
-            wsConnected={wsConnected}
-            search={search}
-            setSearch={setSearch}
-            commentsByFile={commentsByFile}
-            showHidden={showHidden}
-            sectionsExpanded={sectionsExpanded}
-            onToggleSection={toggleSection}
-            onNewBoard={createBoard}
-            onDeleteBoard={deleteBoard}
-            onRefresh={refreshTree}
-            refreshing={treeRefreshing}
-            collapsed={!sidebarOpen}
-            onCollapse={() => setSidebarOpen(false)}
-            width={sbSize.w}
-            resizing={dragSide === 'sb'}
-            dirtyByPath={dirtyByPath}
-            project={project}
-            gitBranch={gitStatus?.branch}
-          />
-          {sidebarOpen && (
+          {(leftActive || leftHostsAssistant) && (
+            <DockSlot
+              side="left"
+              width={sbSize.w}
+              open={!!leftActive}
+              ids={leftIds}
+              activeId={leftActive}
+              onPick={togglePanel}
+            >
+              {leftHostsAssistant && (
+                <ChatPanel
+                  hidden={leftActive !== 'assistant'}
+                  activeCanvas={activeCanvasFile}
+                  selected={selected}
+                  designRel={(cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '')}
+                  resizing={resizingFor('assistant')}
+                  onClose={() => setAssistantOpen(false)}
+                  onBusyChange={setAssistantBusy}
+                  onFinished={handleAssistantFinished}
+                />
+              )}
+              {leftActive && leftActive !== 'assistant' && renderPanelBody(leftActive)}
+            </DockSlot>
+          )}
+          {leftActive && (
             <PanelGrip
-              label="Resize files panel"
+              label="Resize left panel"
               size={sbSize}
               active={dragSide === 'sb'}
               onPointerDown={(e) => {
@@ -10145,11 +11858,13 @@ function App() {
               cfg={cfg}
               loadingPath={loadingPath}
               onIframeLoad={onIframeLoad}
+              showQuickSetup={isNativeApp() && !!setupReadiness && !setupReadiness.ready}
+              onStartQuickSetup={() => setQuickSetupOpen(true)}
             />
           </div>
-          {(inspectorOpen || commentsPanelOpen || changesOpen || assistantOpen) && (
+          {rightActive && (
             <PanelGrip
-              label="Resize side panel"
+              label="Resize right panel"
               dir="rtl"
               size={rpSize}
               active={dragSide === 'rp'}
@@ -10160,105 +11875,32 @@ function App() {
               }}
             />
           )}
-          {/* Right dock — one panel at a time. Changes (E2) takes precedence,
-              then Inspector (T6), then the comments panel. */}
-          {changesOpen ? (
-            <GitPanel
-              status={
-                gitStatus && remoteSync ? { ...gitStatus, ...remoteSync } : gitStatus
-              }
-              project={project}
-              readOnly={!isNativeApp()}
-              width={rpSize.w}
-              resizing={dragSide === 'rp'}
-              onClose={() => setChangesOpen(false)}
-              onCommit={gitCommit}
-              onDiscard={gitDiscard}
-              onPublish={gitPublish}
-              onGetLatest={gitGetLatest}
-              loadLog={gitLoadLog}
-              onOpenCanvas={(p) => openTab(p)}
-              onOpenDiff={(file) => setDiffTarget({ file, beforeSha: 'HEAD', conflict: false })}
-              activeCanvas={
-                activePath && activePath !== SYSTEM_TAB && /\.(tsx|html)$/i.test(activePath)
-                  ? activePath
-                  : null
-              }
-              onPreviewVersion={(sha) =>
-                setDiffTarget({ file: activePath, beforeSha: sha, conflict: false })
-              }
-              designRel={(cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '')}
-            />
-          ) : inspectorOpen ? (
-            <InspectorPanel
-              selected={selected}
-              cfg={cfg}
-              tab={inspectorTab}
-              onTabChange={setInspectorTab}
-              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',
-                  id: n.id,
-                  artboardId: layersTree?.artboardId,
-                  index: n.index,
-                })
-              }
-              onHoverLayer={(n) =>
-                postToActiveCanvas({
-                  dgn: 'highlight',
-                  id: n ? n.id : null,
-                  artboardId: layersTree?.artboardId,
-                  index: n ? n.index : 0,
-                })
-              }
-              onReorderLayer={reorderLayer}
-              layersBusyRef={layersBusyRef}
+          {/* RIGHT dock slot (feature-configurable-panel-docking). The Assistant
+              (ACP) chat stays MOUNTED (display:none when inactive) so its stream
+              survives a tab switch — DDR-123. Native-only. */}
+          {(rightActive || rightHostsAssistant) && (
+            <DockSlot
+              side="right"
               width={rpSize.w}
-              resizing={dragSide === 'rp'}
-            />
-          ) : commentsPanelOpen ? (
-            <CommentsPanel
-              commentsByFile={commentsByFile}
-              filter={commentsFilter}
-              setFilter={setCommentsFilter}
-              activePath={activePath}
-              focusedId={focusedCommentId}
-              onJump={jumpToComment}
-              onResolve={resolveComment}
-              onReopen={reopenComment}
-              onDelete={deleteComment}
-              width={rpSize.w}
-              resizing={dragSide === 'rp'}
-            />
-          ) : null}
-          {/* Phase 31 (DDR-123) — the ACP chat panel stays MOUNTED (display:none
-              when inactive) so the chat keeps streaming + its history survives a
-              switch to Changes/Inspector/Comments. Native-only. */}
-          {isNativeApp() && (
-            <ChatPanel
-              hidden={!assistantOpen}
-              activeCanvas={
-                activePath && activePath !== SYSTEM_TAB && /\.(tsx|html)$/i.test(activePath)
-                  ? activePath
-                  : null
-              }
-              selected={selected}
-              designRel={(cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '')}
-              width={rpSize.w}
-              resizing={dragSide === 'rp'}
-              onClose={() => setAssistantOpen(false)}
-              onBusyChange={setAssistantBusy}
-              onFinished={handleAssistantFinished}
-            />
+              open={!!rightActive}
+              ids={rightIds}
+              activeId={rightActive}
+              onPick={togglePanel}
+            >
+              {rightHostsAssistant && (
+                <ChatPanel
+                  hidden={rightActive !== 'assistant'}
+                  activeCanvas={activeCanvasFile}
+                  selected={selected}
+                  designRel={(cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '')}
+                  resizing={resizingFor('assistant')}
+                  onClose={() => setAssistantOpen(false)}
+                  onBusyChange={setAssistantBusy}
+                  onFinished={handleAssistantFinished}
+                />
+              )}
+              {rightActive && rightActive !== 'assistant' && renderPanelBody(rightActive)}
+            </DockSlot>
           )}
         </div>
         {/* DDR-148 — Timeline is a BOTTOM dock (full-width strip below the stage,
@@ -10658,13 +12300,49 @@ function App() {
           onClose={() => setExportDialog(null)}
         />
       )}
+      {settingsOpen && (
+        <SettingsPanel
+          onClose={() => setSettingsOpen(false)}
+          initialTab={typeof settingsOpen === 'string' ? settingsOpen : undefined}
+          theme={theme}
+          onSetTheme={setTheme}
+          cpMode={cpMode}
+          onSetCpMode={setCpMode}
+          minimapVisible={minimapVisible}
+          onToggleMinimap={toggleMinimap}
+          zoomCtlVisible={zoomCtlVisible}
+          onToggleZoomCtl={toggleZoomCtl}
+          annotationsVisible={annotationsVisible}
+          onToggleAnnotations={toggleAnnotations}
+          autoOpenInspector={autoOpenInspector}
+          onToggleAutoOpenInspector={() => setAutoOpenInspector((v) => !v)}
+          hasCanvas={!!activePath && activePath !== SYSTEM_TAB}
+          panelSide={panelSide}
+          onSetPanelSide={(id, side) => setPanelSide((prev) => ({ ...prev, [id]: side }))}
+          layersMode={layersMode}
+          onSetLayersMode={(m) => {
+            setLayersMode(m);
+            // Leaving separate mode retires the standalone Layers panel.
+            if (m !== 'separate') setLayersOpen(false);
+          }}
+        />
+      )}
+      {generateOpen && (
+        <GenerateDialog onClose={() => setGenerateOpen(false)} onInsert={insertGeneratedImage} />
+      )}
       {assetPickerReq && (
         <AssetPicker
           designRel={(cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '')}
           onPick={onAssetPicked}
           onClose={() => setAssetPickerReq(null)}
+          multiple={!!assetPickerReq.multiple}
+          hasArtboardAnchor={!!assetPickerReq.hasArtboardAnchor}
+          onPickMany={onPickMany}
         />
       )}
+      {stickerPickerReq && (
+        <StickerPicker onPick={onStickerPicked} onClose={() => setStickerPickerReq(null)} />
+      )}
       {diffTarget && (
         <DiffView
           target={diffTarget}
@@ -10702,6 +12380,14 @@ function App() {
       <WhatsNewPanel wn={whatsNew} onStartTour={startTour} />
       <ExportPanel center={exportCenter} />
       <ReadinessDialog open={readinessOpen} onClose={() => setReadinessOpen(false)} />
+      <IntroVideoDialog open={introOpen} onClose={() => setIntroOpen(false)} />
+      <SetupChecklistDialog
+        open={quickSetupOpen}
+        onClose={() => setQuickSetupOpen(false)}
+        onStartTour={() => startTour(QUICK_SETUP_TOUR)}
+        onBringBrand={() => setBrandUploadOpen(true)}
+      />
+      <BrandUploadPanel open={brandUploadOpen} onClose={() => setBrandUploadOpen(false)} />
       {usageNudge && !tourSteps && !collabNudge && (
         <div className="mdcc-tour-nudge" role="status" aria-live="polite">
           <div className="mdcc-tour-nudge__body">