@1agh/maude 0.28.1 → 0.30.0

package/{plugins/design/dev-server → apps/studio}/canvas-lib.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       canvas-lib.tsx — dev-server-bundled canvas library
- * @scope      plugins/design/dev-server/canvas-lib.tsx
+ * @scope      apps/studio/canvas-lib.tsx
  *             Ships with the dev-server install; resolved at canvas build time
  *             via the `@maude/canvas-lib` virtual specifier. Per DDR-025, this
  *             is the single source of truth — no project-side copy.
@@ -137,10 +137,9 @@ const ENGINE_CSS = `
   /* Canvas-shell chrome — the workspace plane + dotted grid follow the Maude
      chrome theme (--maude-chrome-*), NOT the DS palette. See canvas-shell.tsx
      HUD_TOKENS_CSS. Artboards (.dc-artboard) keep the DS theme. */
-  background-color: var(--maude-chrome-bg-1, #f4f1ea);
+  background-color: var(--maude-chrome-bg-0, #f4f1ea);
   background-image:
-    linear-gradient(var(--maude-chrome-border, rgba(0,0,0,0.08)) 1px, transparent 1px),
-    linear-gradient(90deg, var(--maude-chrome-border, rgba(0,0,0,0.08)) 1px, transparent 1px);
+    radial-gradient(var(--maude-chrome-dot, rgba(0,0,0,0.12)) 1.1px, transparent 1.2px);
   background-size: 24px 24px;
 }
 /* DDR-046 — Snap guides. Sibling kind = confident magenta + glow + distance
@@ -199,6 +198,17 @@ const ENGINE_CSS = `
      irrelevant under zoom (zoom anchors top-left of the box). will-change
      hints to the compositor that this layer changes often. */
   will-change: transform;
+  /* Marquee / multi-select drags over artboards must not trigger native text
+     selection (it highlighted the canvas content). Editable surfaces re-enable
+     it below. */
+  user-select: none;
+  -webkit-user-select: none;
+}
+.dc-world input,
+.dc-world textarea,
+.dc-world [contenteditable="true"] {
+  user-select: text;
+  -webkit-user-select: text;
 }
 .dc-section-collapsed { display: contents; }
 
@@ -1162,7 +1172,7 @@ export function useDragStateContext(): DragStateBus | null {
 interface DesignCanvasProps {
   children: ReactNode;
   /** Per-overlay opt-out. `false` hides it; omit or `true` shows it. */
-  controls?: { minimap?: boolean; toolbar?: boolean };
+  controls?: { minimap?: boolean; toolbar?: boolean; zoom?: boolean };
 }
 
 /**
@@ -1374,6 +1384,7 @@ function DesignCanvasInner({ children, controls }: DesignCanvasProps) {
   );
 
   const showMiniMap = controls?.minimap !== false;
+  const showZoom = controls?.zoom !== false;
 
   // Drag-state bus (Phase 4.2). Single source of truth: only one artboard
   // drag is active at a time. DCArtboards write here when their local drag
@@ -1445,10 +1456,12 @@ function DesignCanvasInner({ children, controls }: DesignCanvasProps) {
         {children}
       </div>
       {showMiniMap ? <DCMiniMap /> : null}
-      {/* DCZoomToolbar is intentionally not rendered here. The Phase 5.1
-          ToolPalette absorbs its 4 actions into the unified canvas chrome.
-          The component stays exported for back-compat with any consumer that
-          still imports it directly. */}
+      {/* Plan C F6 — separate bottom-left zoom pill (the design's ZoomHud).
+          Phase 5.1 had folded zoom into the ToolPalette; user feedback wants
+          the design's standalone pill, so DCZoomToolbar renders here again (the
+          ToolPalette's inline zoom is removed in tool-palette.tsx). It carries
+          MORE than the mock — fit + actual-size — so no capability is lost. */}
+      {showZoom ? <DCZoomToolbar /> : null}
     </div>
   );
 
@@ -1900,6 +1913,9 @@ const OVERLAY_CSS = `
   overflow: hidden;
 }
 .dc-mm-hd {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding: 5px 8px 4px;
   border-bottom: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.08));
   letter-spacing: 0.05em;
@@ -1907,6 +1923,7 @@ const OVERLAY_CSS = `
   font-size: 9px;
   background: var(--maude-chrome-bg-1, #f4f1ea);
 }
+.dc-mm-count { font-variant-numeric: tabular-nums; color: var(--maude-chrome-fg-2, rgba(40,30,20,0.55)); }
 .dc-mm-body {
   position: relative;
   width: 100%;
@@ -1932,9 +1949,8 @@ const OVERLAY_CSS = `
 }
 .dc-zoom-tb {
   position: absolute;
-  left: 50%;
+  left: 16px;
   bottom: 16px;
-  transform: translateX(-50%);
   display: flex;
   align-items: stretch;
   background: var(--maude-chrome-bg-0, #ffffff);
@@ -2105,7 +2121,10 @@ export function DCMiniMap() {
   return (
     <div className="dc-mm" aria-hidden="true">
       <div className="dc-mm-hd">
-        WORLD MAP · {world.artboards.length}/{world.artboards.length}
+        <span>World</span>
+        <span className="dc-mm-count">
+          {world.artboards.length} / {world.artboards.length}
+        </span>
       </div>
       <div
         className="dc-mm-body"

package/{plugins/design/dev-server → apps/studio}/canvas-shell.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       canvas-shell.tsx — universal input-grammar wrapper for TSX canvases
- * @scope      plugins/design/dev-server/canvas-shell.tsx
+ * @scope      apps/studio/canvas-shell.tsx
  * @purpose    Mounted by `DesignCanvas` for every canvas. Stacks
  *             SelectionSetProvider + ContextMenuProvider, wires the input
  *             router to provider actions, and renders the floating chrome
@@ -59,12 +59,14 @@ import {
 import { ContextualToolbar } from './contextual-toolbar.tsx';
 import { CursorsOverlay } from './cursors-overlay.tsx';
 import {
-  cssEscape,
   cssPath,
   deriveFile,
   domPath,
   hoverTargetToSelection,
   realClasses,
+  resolveSelectionEl,
+  scopedCdSelector,
+  selectorIndex,
   shortText,
 } from './dom-selection.ts';
 import { EqualSpacingHandles } from './equal-spacing-handles.tsx';
@@ -129,32 +131,46 @@ import { useUndoStack } from './use-undo-stack.tsx';
 // theme (readInitialTheme() → 'dark'). DDR — mirrors the `--maude-hud-*`
 // precedent; the `data-maude-theme` attribute is deliberately SEPARATE from the
 // DS `data-theme` so chrome theming never touches artboard palettes.
+// Plan B (Task 7) — the in-canvas chrome now mirrors the maude DS ladder (indigo
+// accent hue 268, cool-neutral hue 255) so the iframe chrome reads as one product
+// with the rewritten outer shell. Accent-fg is the maude dark navy (NOT white):
+// maude's bright indigo accent needs a dark fg for WCAG contrast (white/indigo
+// ≈ 3:1, fails AA; navy/indigo ≈ 6.3:1). Token-only swap — no overlay logic
+// changes (DDR-054). Values lifted from `.design/system/maude/colors_and_type.css`.
 const HUD_TOKENS_CSS = `
 :root,
 :root[data-maude-theme="dark"] {
-  --maude-hud-accent:        #d63b1f;
-  --maude-hud-accent-hover:  #b8331b;
-  --maude-hud-accent-active: #962a16;
-  --maude-hud-accent-fg:     #ffffff;
-  --maude-hud-accent-tint:   color-mix(in oklab, #d63b1f 14%, transparent);
-
-  --maude-chrome-bg-0:      oklch(13% 0.012 60);
-  --maude-chrome-bg-1:      oklch(17% 0.014 60);
-  --maude-chrome-bg-2:      oklch(20% 0.016 60);
-  --maude-chrome-fg-0:      oklch(94% 0.014 80);
-  --maude-chrome-fg-1:      oklch(78% 0.014 80);
-  --maude-chrome-border:    oklch(28% 0.018 60);
-  --maude-chrome-shadow:    rgba(0, 0, 0, 0.45);
-  --maude-chrome-font-mono: 'Berkeley Mono', 'TX-02', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  --maude-hud-accent:        oklch(0.680 0.180 268);
+  --maude-hud-accent-hover:  oklch(0.730 0.170 268);
+  --maude-hud-accent-active: oklch(0.630 0.180 268);
+  --maude-hud-accent-fg:     oklch(0.180 0.030 268);
+  --maude-hud-accent-tint:   color-mix(in oklab, oklch(0.680 0.180 268) 16%, transparent);
+
+  --maude-chrome-bg-0:      oklch(0.165 0.012 255);
+  --maude-chrome-bg-1:      oklch(0.198 0.012 255);
+  --maude-chrome-bg-2:      oklch(0.232 0.013 255);
+  --maude-chrome-fg-0:      oklch(0.955 0.005 250);
+  --maude-chrome-fg-1:      oklch(0.790 0.008 250);
+  --maude-chrome-border:    oklch(0.290 0.012 255);
+  --maude-chrome-dot:       oklch(0.340 0.012 255);
+  --maude-chrome-shadow:    rgba(0, 0, 0, 0.46);
+  --maude-chrome-font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
 }
 :root[data-maude-theme="light"] {
-  --maude-chrome-bg-0:   oklch(97.5% 0.008 78);
-  --maude-chrome-bg-1:   oklch(95.5% 0.010 78);
-  --maude-chrome-bg-2:   oklch(93.0% 0.012 78);
-  --maude-chrome-fg-0:   oklch(20% 0.020 50);
-  --maude-chrome-fg-1:   oklch(38% 0.018 50);
-  --maude-chrome-border: oklch(86% 0.014 70);
-  --maude-chrome-shadow: color-mix(in oklab, oklch(20% 0.020 50) 14%, transparent);
+  --maude-hud-accent:        oklch(0.520 0.195 268);
+  --maude-hud-accent-hover:  oklch(0.470 0.195 268);
+  --maude-hud-accent-active: oklch(0.430 0.190 268);
+  --maude-hud-accent-fg:     oklch(0.995 0.004 268);
+  --maude-hud-accent-tint:   color-mix(in oklab, oklch(0.520 0.195 268) 12%, transparent);
+
+  --maude-chrome-bg-0:   oklch(0.975 0.004 255);
+  --maude-chrome-bg-1:   oklch(1.000 0 0);
+  --maude-chrome-bg-2:   oklch(0.987 0.003 255);
+  --maude-chrome-fg-0:   oklch(0.225 0.015 260);
+  --maude-chrome-fg-1:   oklch(0.400 0.014 260);
+  --maude-chrome-border: oklch(0.922 0.005 255);
+  --maude-chrome-dot:    oklch(0.860 0.008 255);
+  --maude-chrome-shadow: color-mix(in oklab, oklch(0.225 0.015 260) 14%, transparent);
 }
 `;
 
@@ -286,6 +302,14 @@ const HALO_CSS = `
   -webkit-font-smoothing: subpixel-antialiased;
   font-smooth: always;
 }
+/* Phase 12 (DDR-103) — inline text editing: the element being edited carries an
+   accent ring + caret. plaintext-only contenteditable; commit writes to source. */
+[contenteditable].dc-text-editing {
+  outline: 2px solid var(--maude-hud-accent, #0d99ff);
+  outline-offset: 1px;
+  border-radius: 1px;
+  cursor: text;
+}
 `.trim();
 
 function ensureHaloStyles(): void {
@@ -306,6 +330,104 @@ function ensureHaloStyles(): void {
   document.head.appendChild(s);
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Layers tree (Phase 12 Task 4, DDR-103). The shell's Layers tab is a browsable
+// tree of the active artboard's stamped (`data-cd-id`) elements. We walk the
+// artboard subtree in the iframe, serialize a nested tree, and post it to the
+// shell; the shell renders it + posts back `select-by-id` / `highlight`.
+
+interface LayerNode {
+  id: string;
+  tag: string;
+  label: string;
+  type: string;
+  /** Occurrence index of this id within the artboard — matches the resolver's
+   *  `querySelectorAll([data-dc-screen=…] [data-cd-id=…])[index]`. */
+  index: number;
+  children: LayerNode[];
+}
+
+function kebabToTitle(s: string): string {
+  return s
+    .split('-')
+    .filter(Boolean)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+}
+
+// Human label: data-dc-element (Title Case) → aria-label → role → tag(.class).
+function layerLabel(el: Element): string {
+  const dc = el.getAttribute('data-dc-element');
+  if (dc) return kebabToTitle(dc);
+  const aria = el.getAttribute('aria-label');
+  if (aria) return aria.slice(0, 40);
+  const role = el.getAttribute('role');
+  if (role) return role;
+  const tag = el.tagName.toLowerCase();
+  const cls = realClasses(el).split(/\s+/).filter(Boolean)[0];
+  return cls ? `${tag}.${cls}` : tag;
+}
+
+function layerType(el: Element): string {
+  const tag = el.tagName.toLowerCase();
+  const role = el.getAttribute('role') ?? '';
+  const dc = el.getAttribute('data-dc-element') ?? '';
+  if (tag === 'button' || role === 'button' || /(^|-)(btn|cta|button)(-|$)/.test(dc))
+    return 'button';
+  if (/^h[1-6]$/.test(tag) || role === 'heading') return 'heading';
+  if (tag === 'input' || tag === 'textarea' || tag === 'select') return 'input';
+  if (tag === 'img' || tag === 'svg' || tag === 'picture' || tag === 'video') return 'image';
+  if (tag === 'a') return 'link';
+  if (tag === 'ul' || tag === 'ol' || tag === 'li') return 'list';
+  if (tag === 'nav') return 'nav';
+  if (tag === 'form') return 'form';
+  if (tag === 'p' || tag === 'span' || tag === 'label') return 'text';
+  return 'box';
+}
+
+function serializeArtboardTree(root: Element): LayerNode[] {
+  const seen = new Map<string, number>();
+  function walk(el: Element): LayerNode[] {
+    const out: LayerNode[] = [];
+    for (const child of Array.from(el.children)) {
+      // Skip dev-server overlay chrome (pins, halos) that lives inside the artboard.
+      if (child.closest('.dgn-pin, .dc-cv-halo, .dc-cv-group-bbox')) continue;
+      const cd = child.getAttribute('data-cd-id');
+      if (cd) {
+        const idx = seen.get(cd) ?? 0;
+        seen.set(cd, idx + 1);
+        out.push({
+          id: cd,
+          tag: child.tagName.toLowerCase(),
+          label: layerLabel(child),
+          type: layerType(child),
+          index: idx,
+          children: walk(child),
+        });
+      } else {
+        // Unstamped wrapper — descend so its stamped descendants still surface.
+        out.push(...walk(child));
+      }
+    }
+    return out;
+  }
+  return walk(root);
+}
+
+function postLayersTree(artboardId: string | null | undefined): void {
+  if (typeof document === 'undefined' || !artboardId) return;
+  const root = document.querySelector(`[data-dc-screen="${CSS.escape(artboardId)}"]`);
+  if (!root) return;
+  try {
+    window.parent.postMessage(
+      { dgn: 'layers-tree', artboardId, tree: serializeArtboardTree(root) },
+      '*'
+    );
+  } catch {
+    /* detached / cross-origin */
+  }
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Shell
 
@@ -418,7 +540,7 @@ function CanvasCore({
     if (!host) return;
     const onDbl = (e: MouseEvent) => {
       const t = e.target as Element | null;
-      if (!t || !t.closest) return;
+      if (!t?.closest) return;
       // Floating chrome / overlays / drawn user content / any artboard
       // surface → leave alone. Only dblclick that lands on the canvas
       // background outside every artboard triggers `fit()`.
@@ -501,7 +623,7 @@ function CanvasCore({
   useEffect(() => {
     if (!collab) return;
     const first = selSet.selected[0];
-    if (!first || !first.selector) {
+    if (!first?.selector) {
       collab.publishAwareness({ selection: null });
       return;
     }
@@ -931,7 +1053,7 @@ function applyArtboardFollowers(): void {
 function buildRegistry(deps: {
   controller: ViewportControllerHandle | null;
   clearSelection: () => void;
-  selSet: { selected: Selection[] };
+  selSet: { selected: Selection[]; replace: (s: Selection | Selection[]) => void };
   distributeArtboards: (axis: 'x' | 'y') => void;
   alignArtboards: (mode: 'left' | 'right' | 'center-x' | 'top' | 'bottom' | 'center-y') => void;
   focusArtboard: (artboardId: string) => void;
@@ -956,12 +1078,16 @@ function buildRegistry(deps: {
 
   const postComposeForTarget = (target: ContextTarget): void => {
     if (typeof window === 'undefined') return;
+    const composeSelector = target.cdId
+      ? scopedCdSelector(target.cdId, target.artboardId)
+      : cssPath(target.el);
     const sel: Selection | null = target.el
       ? {
           file: deriveFile(),
           id: target.cdId ?? undefined,
-          selector: target.cdId ? `[data-cd-id="${target.cdId}"]` : cssPath(target.el),
+          selector: composeSelector,
           artboardId: target.artboardId,
+          index: target.cdId ? selectorIndex(document, composeSelector, target.el) : 0,
           tag: target.el.tagName.toLowerCase(),
           classes: realClasses(target.el),
           text: shortText(target.el, 240),
@@ -1089,9 +1215,24 @@ function buildRegistry(deps: {
           id: 'inspect',
           label: 'Inspect',
           shortcut: '⌥I',
-          disabled: true,
-          onSelect: () => {
-            console.warn('[context-menu] TODO: tweaks panel for TSX canvases');
+          onSelect: (target) => {
+            // Phase 12 — select the right-clicked element + open the shell's
+            // right Inspector panel (Inspect / Layers / CSS). Was a disabled TODO
+            // before the inspector shipped.
+            if (target.el) {
+              selSet.replace(
+                hoverTargetToSelection({
+                  el: target.el,
+                  cdId: target.cdId ?? null,
+                  artboardId: target.artboardId ?? null,
+                } as HoverTarget)
+              );
+            }
+            try {
+              window.parent.postMessage({ dgn: 'open-inspector' }, '*');
+            } catch {
+              /* detached / cross-origin */
+            }
           },
         },
       ],
@@ -1228,6 +1369,8 @@ function CanvasRouter({
   const annotSel = useAnnotationSelection();
   const ctxMenu = useContextMenu();
   const undoStack = useUndoStack();
+  // Shell View-menu zoom bridge (dgn:'zoom') — same controller the zoom pill uses.
+  const zoomController = useViewportControllerContext();
 
   // Hover state drives the floating .dc-cv-halo--hover overlay. The overlay
   // itself reads getBoundingClientRect on every rAF tick to follow pan/zoom.
@@ -1283,6 +1426,96 @@ function CanvasRouter({
         if (typeof t === 'string') setTool(t as never);
         return;
       }
+      // Plan C — Edit menu (shell) bridges to the in-canvas undo stack.
+      if (m.dgn === 'undo') {
+        void undoStack.undo();
+        return;
+      }
+      if (m.dgn === 'redo') {
+        void undoStack.redo();
+        return;
+      }
+      // Phase 12 Task 4 (DDR-103) — Layers-tree round-trip. select-by-id resolves
+      // the node + replaces the selection (which posts select-set back, updating
+      // the Inspect/CSS tabs + halos); highlight shows the transient hover halo;
+      // request-layers re-walks + posts the tree for an artboard.
+      if (m.dgn === 'select-by-id') {
+        const mm = m as { id?: string; artboardId?: string | null; index?: number };
+        if (mm.id) {
+          const target = resolveSelectionEl(document, {
+            id: mm.id,
+            artboardId: mm.artboardId,
+            index: mm.index,
+          });
+          if (target) {
+            selSet.replace(
+              hoverTargetToSelection({
+                el: target,
+                cdId: mm.id,
+                artboardId: mm.artboardId ?? null,
+              } as HoverTarget)
+            );
+            (target as HTMLElement).scrollIntoView?.({ block: 'nearest', behavior: 'smooth' });
+          }
+        }
+        return;
+      }
+      if (m.dgn === 'highlight') {
+        const mm = m as { id?: string; artboardId?: string | null; index?: number };
+        setHoverEl(
+          mm.id
+            ? resolveSelectionEl(document, {
+                id: mm.id,
+                artboardId: mm.artboardId,
+                index: mm.index,
+              })
+            : null
+        );
+        return;
+      }
+      // Phase 12.3 (W1.1) — optimistic inline-style apply. The CSS panel posts
+      // this on commit so the selected element updates INSTANTLY, before the
+      // edit-css → file-watcher HMR reload re-renders from source. `value` null/
+      // empty removes the property (the reset path). Purely a live-DOM preview;
+      // the authoritative value is whatever the reload renders from source.
+      // SECURITY (ethical-hacker A1/A2) — accept apply-style ONLY from the parent
+      // shell, never from a canvas self-post. The canvas iframe is untrusted
+      // (DDR-054); without this gate hostile canvas JS could repaint elements AND
+      // (paired with the reload echo-guard) suppress reloads to desync view/source.
+      // The reload-suppression timestamp now lives in _shell.html's closure (NOT a
+      // canvas-writable window global) — set there from the same parent-gated msg.
+      if (m.dgn === 'apply-style') {
+        if (e.source !== window.parent) return;
+        const mm = m as {
+          id?: string;
+          artboardId?: string | null;
+          index?: number;
+          prop?: string;
+          value?: string | null;
+        };
+        if (mm.id && mm.prop) {
+          const target = resolveSelectionEl(document, {
+            id: mm.id,
+            artboardId: mm.artboardId,
+            index: mm.index,
+          });
+          if (target) {
+            const style = (target as HTMLElement).style;
+            try {
+              // Live-DOM preview only; the reload renders the authoritative value.
+              if (mm.value == null || mm.value === '') style.removeProperty(mm.prop);
+              else style.setProperty(mm.prop, mm.value);
+            } catch {
+              /* invalid prop/value — ignore; the reload is the source of truth */
+            }
+          }
+        }
+        return;
+      }
+      if (m.dgn === 'request-layers') {
+        postLayersTree((m as { artboardId?: string }).artboardId ?? null);
+        return;
+      }
       // D9 — canvas-shell chrome follows the Maude chrome theme. The chrome's
       // `--maude-chrome-*` token family is keyed by `data-maude-theme` on the
       // iframe documentElement (see HUD_TOKENS_CSS). This attribute is
@@ -1296,10 +1529,101 @@ function CanvasRouter({
         }
         return;
       }
+      // Shell View-menu zoom items — route to the live viewport controller
+      // (the same methods the in-canvas zoom pill calls).
+      if (m.dgn === 'zoom' && zoomController) {
+        const op = (m as { op?: string }).op;
+        if (op === 'in') zoomController.zoomIn();
+        else if (op === 'out') zoomController.zoomOut();
+        else if (op === 'fit') zoomController.fit();
+        else if (op === 'actual') zoomController.reset();
+        return;
+      }
     };
     window.addEventListener('message', onMessage);
     return () => window.removeEventListener('message', onMessage);
-  }, [selSet, annotSel, setTool]);
+  }, [selSet, annotSel, setTool, undoStack, zoomController]);
+
+  // Phase 12 (DDR-103) — double-click a LEAF-TEXT element (children all text
+  // nodes) to edit its copy in place. Commit (blur / Enter) posts `dgn:edit-text`
+  // to the shell, which calls the main-origin /_api/edit-text → editText writes
+  // the escaped JSXText to source; the file-watcher HMR reload re-renders from
+  // the persisted source. Esc restores the original. Mixed/expression elements
+  // are skipped (the engine would refuse them anyway — honest no-op).
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const host = hostRef.current;
+    if (!host) return;
+    let editing: HTMLElement | null = null;
+    let original = '';
+    const onBlur = (): void => commitEdit(true);
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        commitEdit(false);
+      } else if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        (e.currentTarget as HTMLElement | null)?.blur?.();
+      }
+    };
+    function teardown(elx: HTMLElement): void {
+      elx.removeAttribute('contenteditable');
+      elx.classList.remove('dc-text-editing');
+      elx.removeEventListener('blur', onBlur, true);
+      elx.removeEventListener('keydown', onKey, true);
+    }
+    function commitEdit(commit: boolean): void {
+      const elx = editing;
+      if (!elx) return;
+      editing = null;
+      const text = (elx.textContent ?? '').trim();
+      teardown(elx);
+      if (!commit) {
+        elx.textContent = original;
+        return;
+      }
+      if (text === original.trim()) return;
+      const cdId = elx.getAttribute('data-cd-id');
+      if (!cdId) return;
+      try {
+        window.parent.postMessage({ dgn: 'edit-text', id: cdId, file: deriveFile(), text }, '*');
+      } catch {
+        /* detached / cross-origin */
+      }
+    }
+    const onDbl = (e: MouseEvent): void => {
+      if (editing) return;
+      const t = e.target as HTMLElement | null;
+      const stamped = (t?.closest?.('[data-cd-id]') as HTMLElement | null) ?? null;
+      if (!stamped) return;
+      const kids = Array.from(stamped.childNodes);
+      if (kids.length === 0 || !kids.every((n) => n.nodeType === 3)) return; // leaf-text only
+      e.preventDefault();
+      e.stopPropagation();
+      editing = stamped;
+      original = stamped.textContent ?? '';
+      stamped.setAttribute('contenteditable', 'plaintext-only');
+      stamped.classList.add('dc-text-editing');
+      stamped.addEventListener('blur', onBlur, true);
+      stamped.addEventListener('keydown', onKey, true);
+      stamped.focus();
+      try {
+        const range = document.createRange();
+        range.selectNodeContents(stamped);
+        const sel = window.getSelection();
+        sel?.removeAllRanges();
+        sel?.addRange(range);
+      } catch {
+        /* selection API unavailable */
+      }
+    };
+    // Capture phase so we beat the fit-to-view dblclick handler.
+    host.addEventListener('dblclick', onDbl, true);
+    return () => {
+      host.removeEventListener('dblclick', onDbl, true);
+      if (editing) teardown(editing);
+    };
+  }, [hostRef]);
 
   // Cleanup any pending rAF on unmount.
   useEffect(
@@ -1334,6 +1658,8 @@ function CanvasRouter({
         const sel = hoverTargetToSelection(target);
         if (mode === 'replace') selSet.replace(sel);
         else selSet.add(sel);
+        // Phase 12 Task 4 — refresh the Layers tree for the selected artboard.
+        postLayersTree(target.artboardId);
       },
       onContextMenu: ({ clientX, clientY }) => {
         const target = resolveHoverTarget(document, clientX, clientY, { deep: true });
@@ -1725,7 +2051,7 @@ function HoverHalo({ el }: { el: Element | null }) {
       rafRef.current = null;
       const div = ref.current;
       const t = targetRef.current;
-      if (!div || !t || !t.isConnected) {
+      if (!div || !t?.isConnected) {
         if (div) div.style.display = 'none';
         return;
       }
@@ -1822,11 +2148,7 @@ function SelectionHalos() {
       for (let i = 0; i < selected.length; i++) {
         const sel = selected[i];
         const child = c.children[i] as HTMLDivElement;
-        const el = sel?.id
-          ? document.querySelector(`[data-cd-id="${cssEscape(sel.id)}"]`)
-          : sel
-            ? safeQuery(sel.selector)
-            : null;
+        const el = sel ? resolveSelectionEl(document, sel) : null;
         if (!el) {
           child.style.display = 'none';
           continue;
@@ -1879,9 +2201,7 @@ function GroupBbox() {
       let yMax = Number.NEGATIVE_INFINITY;
       let anyHit = false;
       for (const sel of selected) {
-        const el = sel.id
-          ? document.querySelector(`[data-cd-id="${cssEscape(sel.id)}"]`)
-          : safeQuery(sel.selector);
+        const el = resolveSelectionEl(document, sel);
         if (!el) continue;
         // Post-Wave-2: direct artboard drag — the article updates its own
         // `left/top` during drag, so the group bbox just follows via
@@ -1936,11 +2256,3 @@ function classifyContextKind(target: HoverTarget | null): ContextTargetKind {
   if (target.artboardId) return 'artboard-chrome';
   return 'world';
 }
-
-function safeQuery(selector: string): Element | null {
-  try {
-    return document.querySelector(selector);
-  } catch {
-    return null;
-  }
-}