@1agh/maude 0.45.2 → 0.47.0

package/apps/studio/canvas-shell.tsx

@@ -98,11 +98,12 @@ import {
   useAnnotationSelectionOptional,
 } from './use-annotation-selection.tsx';
 import { AnnotationsVisibilityProvider } from './use-annotations-visibility.tsx';
-import { showCanvasToast } from './use-canvas-media-drop.tsx';
+import { canvasConfirm, showCanvasToast } from './use-canvas-media-drop.tsx';
 import { ChromeVisibilityProvider, useChromeVisibility } from './use-chrome-visibility.tsx';
 import { useCollab } from './use-collab.tsx';
 import { useCursorModifiers } from './use-cursor-modifiers.tsx';
-import { ElementResizeOverlay } from './use-element-resize.tsx';
+import { ElementResizeOverlay, worldZoomFor } from './use-element-resize.tsx';
+import { GridTrackHandlesOverlay } from './use-grid-track-handles.tsx';
 import { useKeyboardDiscipline } from './use-keyboard-discipline.tsx';
 import {
   MaybeSelectionSetProvider,
@@ -346,6 +347,15 @@ const HALO_CSS = `
 [data-cd-id]:not(:empty):not(:has(> *)):hover {
   cursor: text;
 }
+/* feature-4 text-gestures — the Text tool's hover affordance: the editable
+   leaf the click-through would edit gets a dashed accent outline (applied by
+   annotations-layer's hit-test; a plain :hover can't reach through the
+   tool's input-capture overlay). */
+.dc-text-editable-hover {
+  outline: 1.5px dashed var(--maude-hud-accent, #4a63e7);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
 /* Phase 12.1 (DDR-138) — in-canvas drag-to-reorder (Figma-style). Dragging a
    SELECTED element floats it with the cursor (via transform, applied inline —
    its box stays reserved so the origin shows empty space, and it stays in the
@@ -409,6 +419,16 @@ interface LayerNode {
    *  route CssKnobs uses), so this must reflect the SOURCE value, not a
    *  client-only preview flag (see app.jsx `toggleVisibility`). */
   hidden: boolean;
+  /** feature-4 T7 — a SYNTHETIC group row for an unstamped wrapper that holds
+   *  stamped descendants. It's a structural stand-in so the tree mirrors real
+   *  nesting instead of hoisting descendants up a level (the "some elements
+   *  don't show up / tree is flat" bug). Non-selectable + non-draggable (it
+   *  has no `data-cd-id` to address in source); its `id` is a stable
+   *  `__grp:<sig>#<n>` synthetic key, never a real cd-id. */
+  synthetic?: boolean;
+  /** feature-4 T7c — the raw authored `data-dc-element` attr (null when unset).
+   *  The rename input's before-value; `layerLabel` renders its Title-Case form. */
+  dcElement?: string | null;
   children: LayerNode[];
 }
 
@@ -517,8 +537,18 @@ function buildSelectLayerSubmenu(
   });
 }
 
-function serializeArtboardTree(root: Element): LayerNode[] {
+// feature-4 T7 — does this subtree contain ANY stamped element? Gates whether an
+// unstamped wrapper is worth a synthetic group row (an empty/decorative wrapper
+// with no addressable descendants stays omitted — no noise).
+function hasStampedDescendant(el: Element): boolean {
+  return !!el.querySelector('[data-cd-id]');
+}
+
+export function serializeArtboardTree(root: Element): LayerNode[] {
   const seen = new Map<string, number>();
+  // Occurrence counter for synthetic group signatures so their keys are stable
+  // + unique across re-serializations (collapse state persists through HMR).
+  const groupSeen = new Map<string, number>();
   function walk(el: Element): LayerNode[] {
     const out: LayerNode[] = [];
     for (const child of Array.from(el.children)) {
@@ -535,12 +565,41 @@ function serializeArtboardTree(root: Element): LayerNode[] {
           type: layerType(child),
           index: idx,
           hidden: (child as HTMLElement).style.display === 'none',
+          dcElement: child.getAttribute('data-dc-element'),
+          children: walk(child),
+        });
+      } else if (hasStampedDescendant(child)) {
+        // ENGINE chrome wrappers (`.dc-artboard-body`, any `dc-*` layer) are
+        // not user structure — hoist THROUGH them (pre-feature-4 behavior) so
+        // the tree doesn't grow a phantom "dc-artboard-body GROUP" root row
+        // (live-dogfood finding, 2026-07-19).
+        const classes = Array.from(child.classList);
+        if (classes.some((c) => c.startsWith('dc-') || c.startsWith('dgn-'))) {
+          out.push(...walk(child));
+          continue;
+        }
+        // feature-4 T7 — unstamped wrapper WITH stamped descendants: emit a
+        // synthetic, non-selectable GROUP row so the tree mirrors real nesting
+        // instead of hoisting its descendants up a level. (Pre-feature-4 this
+        // branch did `out.push(...walk(child))`, flattening the hierarchy — the
+        // "layers are flat / an element is at the wrong depth" report.)
+        const tag = child.tagName.toLowerCase();
+        const cls = realClasses(child).split(/\s+/).filter(Boolean)[0];
+        const sig = cls ? `${tag}.${cls}` : tag;
+        const n = groupSeen.get(sig) ?? 0;
+        groupSeen.set(sig, n + 1);
+        out.push({
+          id: `__grp:${sig}#${n}`,
+          tag,
+          label: layerLabel(child),
+          type: 'group',
+          index: 0,
+          hidden: false,
+          synthetic: true,
           children: walk(child),
         });
-      } else {
-        // Unstamped wrapper — descend so its stamped descendants still surface.
-        out.push(...walk(child));
       }
+      // Unstamped wrapper with NO stamped descendants → omitted (decorative).
     }
     return out;
   }
@@ -570,10 +629,17 @@ function getLastLayersArtboardId(): string | null {
 // DDR-148 — an artboard hosting a <VideoComp> stamps a `[data-comp-id]`
 // element inside it (see video-comp.tsx). Gates the artboard-chrome context
 // menu's "Open Timeline" entry to artboards that actually have a sequence.
+// T2 (feature-1-artboard-kinds-foundation) — merged with the resolved `kind`:
+// an explicit `kind="video"` (DCArtboard's `data-dc-kind` readback) also
+// qualifies, even before any `<VideoComp>` content exists yet; the structural
+// `[data-comp-id]` check stays as the fallback for unmigrated canvases.
 function artboardHasVideo(artboardId: string | null | undefined): boolean {
   if (typeof document === 'undefined' || !artboardId) return false;
   try {
-    return !!document.querySelector(`[data-dc-screen="${CSS.escape(artboardId)}"] [data-comp-id]`);
+    const root = document.querySelector(`[data-dc-screen="${CSS.escape(artboardId)}"]`);
+    if (!root) return false;
+    if (root.getAttribute('data-dc-kind') === 'video') return true;
+    return !!root.querySelector('[data-comp-id]');
   } catch {
     return false;
   }
@@ -1421,6 +1487,391 @@ function buildRegistry(deps: {
     ],
   };
 
+  // feature-1-artboard-kinds-foundation, T8 — kind-switch submenu, same
+  // shape as themeItem above (a parent-only MenuItem whose onSelect never
+  // fires). The write is main-origin-only (DDR-054): post to the parent
+  // shell (dgn:'set-artboard-kind-request'), which calls
+  // api.setArtboardKindOp and records undo — mirrors delete-artboard-request.
+  const postArtboardKindRequest = (artboardId: string, kind: string | null): void => {
+    try {
+      window.parent.postMessage({ dgn: 'set-artboard-kind-request', artboardId, kind }, '*');
+    } catch {
+      /* detached / cross-origin */
+    }
+  };
+  const kindItem: MenuItem = {
+    id: 'kind',
+    label: 'Artboard kind',
+    onSelect: () => {
+      /* parent of a submenu — never invoked directly */
+    },
+    submenu: [
+      {
+        id: 'kind-digital',
+        label: 'Digital (default)',
+        // feature-4 (user steer 2026-07-19) — digital/print artboards are the
+        // marketing-graphics kinds: on switching, offer to freeze the whole
+        // layout to absolute so every element is freely draggable. Convert
+        // FIRST (freeze at the current visual), then switch the kind.
+        onSelect: (target) => {
+          if (!target.artboardId) return;
+          const artboardId = target.artboardId;
+          void (async () => {
+            const freeze = await canvasConfirm(
+              'Digital artboards work best with freely movable elements.\nAlso freeze the current layout (convert everything to position: absolute)? This is a one-way change — ⌘Z right after still reverts it.',
+              {
+                title: 'Switch to Digital',
+                confirmLabel: 'Switch + freeze',
+                cancelLabel: 'Just switch',
+              }
+            );
+            if (freeze) await postConvertArtboardToAbsolute(artboardId, { skipConfirm: true });
+            postArtboardKindRequest(artboardId, null);
+          })();
+        },
+      },
+      {
+        id: 'kind-print',
+        label: 'Print',
+        onSelect: (target) => {
+          if (!target.artboardId) return;
+          const artboardId = target.artboardId;
+          void (async () => {
+            const freeze = await canvasConfirm(
+              'Print artboards work best with freely movable, absolutely positioned elements.\nAlso freeze the current layout (convert everything to position: absolute)? This is a one-way change — ⌘Z right after still reverts it.',
+              {
+                title: 'Switch to Print',
+                confirmLabel: 'Switch + freeze',
+                cancelLabel: 'Just switch',
+              }
+            );
+            if (freeze) await postConvertArtboardToAbsolute(artboardId, { skipConfirm: true });
+            postArtboardKindRequest(artboardId, 'print');
+          })();
+        },
+      },
+      {
+        id: 'kind-web',
+        label: 'Web',
+        onSelect: (target) => {
+          if (target.artboardId) postArtboardKindRequest(target.artboardId, 'web');
+        },
+      },
+      {
+        id: 'kind-video',
+        label: 'Video',
+        onSelect: (target) => {
+          if (target.artboardId) postArtboardKindRequest(target.artboardId, 'video');
+        },
+      },
+    ],
+  };
+
+  // feature-3-web-artboards T3 — "Duplicate at width…" submenu, same
+  // parent-only-MenuItem shape as themeItem/kindItem above. Breakpoint
+  // widths are the same 4 values as the studio shell's own SCREEN_PRESETS
+  // (mobile/tablet/laptop/desktop) — hardcoded here rather than imported
+  // since this module bundles into the canvas iframe, a separate bundle
+  // graph from the studio shell's app.jsx (same reasoning as kindItem
+  // duplicating the ArtboardKind union above).
+  const postDuplicateArtboardRequest = (artboardId: string, width: number): void => {
+    try {
+      window.parent.postMessage({ dgn: 'duplicate-artboard-request', artboardId, width }, '*');
+    } catch {
+      /* detached / cross-origin */
+    }
+  };
+  const DUP_BREAKPOINTS: Array<{ id: string; label: string; width: number }> = [
+    { id: 'dup-bp-mobile', label: 'Mobile — 390px', width: 390 },
+    { id: 'dup-bp-tablet', label: 'Tablet — 834px', width: 834 },
+    { id: 'dup-bp-laptop', label: 'Laptop — 1280px', width: 1280 },
+    { id: 'dup-bp-desktop', label: 'Desktop — 1440px', width: 1440 },
+  ];
+  const duplicateAtBreakpointItem: MenuItem = {
+    id: 'duplicate-at-breakpoint',
+    label: 'Duplicate at width…',
+    onSelect: () => {
+      /* parent of a submenu — never invoked directly */
+    },
+    submenu: DUP_BREAKPOINTS.map(
+      ({ id, label, width }): MenuItem => ({
+        id,
+        label,
+        onSelect: (target) => {
+          if (target.artboardId) postDuplicateArtboardRequest(target.artboardId, width);
+        },
+      })
+    ),
+  };
+
+  // feature-4 T8 (convert-to-absolute, DDR-188) — the DIRECT stamped children of
+  // a container that are eligible for the "Remove auto layout" convert: skips
+  // dev-server chrome, requires a data-cd-id. Returns null when the element
+  // isn't a convertible container (no stamped direct children).
+  const convertibleChildrenOf = (el: Element | null): HTMLElement[] | null => {
+    if (!el) return null;
+    const kids = Array.from(el.children).filter(
+      (c) => !c.closest('.dgn-pin, .dc-cv-halo, .dc-cv-group-bbox')
+    ) as HTMLElement[];
+    const stamped = kids.filter((c) => c.hasAttribute('data-cd-id'));
+    return stamped.length > 0 ? stamped : null;
+  };
+  // Count how many elements in the artboard body carry `cdId` — >1 means a
+  // repeated (`.map`) or shared-component instance, which convert-to-absolute
+  // refuses (one source element can't hold N distinct absolute positions).
+  const cdIdCountInArtboard = (el: Element, cdId: string): number => {
+    const body = el.closest('.dc-artboard-body') ?? el.ownerDocument;
+    try {
+      return body.querySelectorAll(`[data-cd-id="${CSS.escape(cdId)}"]`).length;
+    } catch {
+      return 99;
+    }
+  };
+  // feature-4 unified subtree convert (dogfood round 4, 2026-07-20) — ONE
+  // walk + ONE confirm for the whole subtree, whether rooted at a right-
+  // clicked container (element context menu) or the artboard body. The
+  // earlier per-container element action made the user confirm once PER
+  // nested container ("modal vyskočí 10×"); now a single action converts the
+  // entire subtree in one batch (one undo seq), dissolving unstyled layout
+  // wrappers along the way.
+  const isUnstyledWrapper = (el: HTMLElement): boolean => {
+    const cs = getComputedStyle(el);
+    const bg = cs.backgroundColor;
+    const transparentBg = bg === 'transparent' || bg === 'rgba(0, 0, 0, 0)';
+    return (
+      transparentBg &&
+      cs.backgroundImage === 'none' &&
+      (Number.parseFloat(cs.borderTopWidth) || 0) === 0 &&
+      (Number.parseFloat(cs.borderRightWidth) || 0) === 0 &&
+      (Number.parseFloat(cs.borderBottomWidth) || 0) === 0 &&
+      (Number.parseFloat(cs.borderLeftWidth) || 0) === 0 &&
+      cs.boxShadow === 'none' &&
+      (cs.borderRadius === '0px' || cs.borderRadius === '0') &&
+      cs.overflow !== 'hidden' &&
+      cs.overflowX !== 'hidden' &&
+      cs.overflowY !== 'hidden' &&
+      cs.opacity === '1' &&
+      cs.filter === 'none' &&
+      cs.transform === 'none'
+    );
+  };
+
+  type ConvertChildBox = {
+    id: string;
+    idIndex?: number;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  };
+  type ConvertEntry = {
+    containerId?: string;
+    containerSetRelative: boolean;
+    freezeSize?: { width: number; height: number };
+    children: ConvertChildBox[];
+  };
+
+  /**
+   * Convert an entire SUBTREE to absolute in one batch: `rootEl` is either the
+   * artboard body (artboard-level, `rootId` undefined) or a right-clicked
+   * container (element-level, `rootId` = its cd-id — the root itself keeps its
+   * flow position; only its descendants freeze). Exactly ONE confirm per
+   * invocation (skippable), an in-flight guard so double-invocations can't
+   * stack dialogs, and the rest happens in the background.
+   */
+  const runSubtreeConvert = async (
+    rootEl: HTMLElement,
+    rootId: string | undefined,
+    artboardId: string,
+    opts?: { skipConfirm?: boolean }
+  ): Promise<void> => {
+    const w = window as unknown as { __maudeConvertBusy?: boolean };
+    if (w.__maudeConvertBusy) return;
+    w.__maudeConvertBusy = true;
+    try {
+      const body = rootEl.closest('.dc-artboard-body') ?? rootEl;
+      const zoom = worldZoomFor(rootEl) || 1;
+      const containers: ConvertEntry[] = [];
+      const dissolve: string[] = [];
+      let unstamped = 0;
+      let repeated = 0;
+      const countIn = (cid: string): number => {
+        try {
+          return body.querySelectorAll(`[data-cd-id="${CSS.escape(cid)}"]`).length;
+        } catch {
+          return 99;
+        }
+      };
+      const measure = (el: HTMLElement, vs: HTMLElement): Omit<ConvertChildBox, 'id'> => {
+        const r = el.getBoundingClientRect();
+        const sRect = vs.getBoundingClientRect();
+        const scs = getComputedStyle(vs);
+        const borderL = Number.parseFloat(scs.borderLeftWidth) || 0;
+        const borderT = Number.parseFloat(scs.borderTopWidth) || 0;
+        return {
+          left: Math.round((r.left - sRect.left) / zoom - borderL),
+          top: Math.round((r.top - sRect.top) / zoom - borderT),
+          width: Math.round(r.width / zoom),
+          height: Math.round(r.height / zoom),
+        };
+      };
+      const walk = (
+        containerEl: HTMLElement,
+        survivingEl: HTMLElement,
+        survivingEntry: ConvertEntry
+      ): void => {
+        for (const c of Array.from(containerEl.children) as HTMLElement[]) {
+          if (c.closest('.dgn-pin, .dc-cv-halo, .dc-cv-group-bbox')) continue;
+          const cid = c.getAttribute('data-cd-id');
+          if (!cid) {
+            unstamped += 1;
+            continue;
+          }
+          const count = countIn(cid);
+          if (count > 1) repeated += 1;
+          const hasStampedKids = !!c.querySelector('[data-cd-id]');
+          const dissolvable = hasStampedKids && count === 1 && isUnstyledWrapper(c);
+          if (dissolvable) {
+            dissolve.push(cid);
+            walk(c, survivingEl, survivingEntry);
+            continue;
+          }
+          const idIndex =
+            count > 1
+              ? Math.max(
+                  0,
+                  Array.from(body.querySelectorAll(`[data-cd-id="${CSS.escape(cid)}"]`)).indexOf(c)
+                )
+              : undefined;
+          survivingEntry.children.push({
+            id: cid,
+            ...(idIndex !== undefined ? { idIndex } : {}),
+            ...measure(c, survivingEl),
+          });
+          if (hasStampedKids && count === 1) {
+            const entry: ConvertEntry = {
+              containerId: cid,
+              containerSetRelative: getComputedStyle(c).position === 'static',
+              children: [],
+            };
+            containers.push(entry);
+            walk(c, c, entry);
+          }
+          // A repeated (component-instance) container freezes as a WRAPPED
+          // unit — we don't descend into shared internals (per-instance inner
+          // edits need detach; the whole instance is draggable via its box).
+        }
+      };
+      const rootEntry: ConvertEntry = {
+        ...(rootId !== undefined ? { containerId: rootId } : {}),
+        containerSetRelative:
+          rootId !== undefined && getComputedStyle(rootEl).position === 'static',
+        // The element-level root keeps its FLOW position but its auto height
+        // would collapse once all children go absolute — freeze its box.
+        ...(rootId !== undefined
+          ? {
+              freezeSize: {
+                width: Math.round(rootEl.getBoundingClientRect().width / zoom),
+                height: Math.round(rootEl.getBoundingClientRect().height / zoom),
+              },
+            }
+          : {}),
+        children: [],
+      };
+      containers.push(rootEntry);
+      walk(rootEl, rootEl, rootEntry);
+      const nonEmpty = containers.filter((c) => c.children.length > 0 || c.containerSetRelative);
+      const total = nonEmpty.reduce((n, c) => n + c.children.length, 0);
+      if (total === 0) {
+        showCanvasToast('Nothing to convert — no selectable elements here.');
+        return;
+      }
+      if (unstamped > 0) {
+        showCanvasToast('Some elements have no id — edit the canvas via chat first, then convert.');
+        return;
+      }
+      // ONE confirm for the WHOLE subtree (user steer: "stačí jednou a zbytek
+      // proveď na pozadí"). Skipped entirely for kind-switch (the shell/canvas
+      // already asked there).
+      if (opts?.skipConfirm !== true) {
+        const parts = [
+          `Freeze all ${total} elements at their current positions (position: absolute)?`,
+          dissolve.length > 0
+            ? `${dissolve.length} invisible layout wrapper(s) will be removed — the tree flattens.`
+            : 'Every element becomes freely draggable — the layout will no longer reflow.',
+          'This is a one-way change (⌘Z right after still reverts it).',
+        ];
+        if (repeated > 0) {
+          parts.push(
+            `${repeated} element(s) render from shared components — each instance keeps its own frozen position.`
+          );
+        }
+        const ok = await canvasConfirm(parts.join('\n'), {
+          title:
+            rootId !== undefined
+              ? 'Convert this container to absolute?'
+              : 'Convert artboard layout to absolute?',
+          confirmLabel: 'Convert all',
+        });
+        if (!ok) return;
+      }
+      try {
+        window.parent.postMessage(
+          {
+            dgn: 'convert-to-absolute-request',
+            artboardId,
+            allowShared: repeated > 0,
+            containers: nonEmpty,
+            ...(dissolve.length > 0 ? { dissolve } : {}),
+          },
+          '*'
+        );
+      } catch {
+        /* detached / cross-origin */
+      }
+    } finally {
+      w.__maudeConvertBusy = false;
+    }
+  };
+
+  // Element context menu — recursive over the clicked container's subtree.
+  const postConvertToAbsolute = async (containerEl: HTMLElement): Promise<void> => {
+    const containerId = containerEl.getAttribute('data-cd-id');
+    if (!containerId) {
+      showCanvasToast('That container has no id yet — edit it via chat first, then convert.');
+      return;
+    }
+    const artboardId =
+      (containerEl.closest('[data-dc-screen]') as HTMLElement | null)?.getAttribute(
+        'data-dc-screen'
+      ) ?? '';
+    if (!artboardId) return;
+    if (cdIdCountInArtboard(containerEl, containerId) > 1) {
+      showCanvasToast(
+        'This container is a repeated/component instance — convert isn\u2019t supported for it yet.'
+      );
+      return;
+    }
+    await runSubtreeConvert(containerEl, containerId, artboardId);
+  };
+  // Artboard-level (context menu + kind switch).
+  const postConvertArtboardToAbsolute = async (
+    artboardId: string,
+    opts?: { skipConfirm?: boolean }
+  ): Promise<void> => {
+    const body = document.querySelector(
+      `[data-dc-screen="${CSS.escape(artboardId)}"] .dc-artboard-body`
+    ) as HTMLElement | null;
+    if (!body) return;
+    await runSubtreeConvert(body, undefined, artboardId, opts);
+  };
+
+  // Publish for the CanvasRouter's `freeze-and-set-kind` handler (different
+  // scope; window-level so it survives soft HMR, same as __maudeLastLayersArt).
+  (
+    window as unknown as { __maudeConvertArtboard?: typeof postConvertArtboardToAbsolute }
+  ).__maudeConvertArtboard = postConvertArtboardToAbsolute;
+
   return {
     element: [
       [
@@ -1600,6 +2051,18 @@ function buildRegistry(deps: {
             }
           },
         },
+        {
+          // feature-4 T8 (convert-to-absolute, DDR-188) — the Figma "Remove auto
+          // layout" analogue. Only shown on a container with stamped children;
+          // freezes each child's computed box and rewrites them to
+          // position:absolute so they can be dragged freely.
+          id: 'convert-to-absolute',
+          label: 'Convert children to absolute position',
+          hidden: (target) => !convertibleChildrenOf(target.el),
+          onSelect: (target) => {
+            if (target.el) postConvertToAbsolute(target.el as HTMLElement);
+          },
+        },
       ],
       [exportItem('export-selection', 'Export selection…', 'selection', '⌘E')],
       [
@@ -1689,6 +2152,18 @@ function buildRegistry(deps: {
         fitItem,
         resetItem,
       ],
+      [
+        {
+          // feature-4 (user steer 2026-07-19) — freeze the WHOLE artboard's
+          // layout: every element position:absolute at its current box, so the
+          // composition is freely draggable (marketing-graphics flow).
+          id: 'convert-artboard-absolute',
+          label: 'Convert layout to absolute…',
+          onSelect: (target) => {
+            if (target.artboardId) void postConvertArtboardToAbsolute(target.artboardId);
+          },
+        },
+      ],
       [
         // DDR-148 — only meaningful (and only enabled) on a video-comp
         // artboard; scopes + opens the shell's Timeline dock.
@@ -1771,7 +2246,7 @@ function buildRegistry(deps: {
           onSelect: () => distributeArtboards('y'),
         },
       ],
-      [themeItem],
+      [themeItem, kindItem, duplicateAtBreakpointItem],
       [
         {
           id: 'delete-artboard',
@@ -1874,6 +2349,43 @@ export function revealElementViaCamera(
   if (dx !== 0 || dy !== 0) controller.panBy(dx, dy);
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// feature-4 T7b — locked-layer enforcement. The shell owns the padlock UI +
+// view.json persistence; the canvas only needs the LIVE set to refuse
+// select/drag on locked elements. Window-level (not module `let`) so it
+// survives soft HMR re-evaluation, same reasoning as __maudeLastLayersArt.
+function lockedKeySet(): Set<string> {
+  const w = window as unknown as { __maudeLockedKeys?: Set<string> };
+  if (!w.__maudeLockedKeys) {
+    w.__maudeLockedKeys = new Set(
+      Array.isArray(
+        (window as unknown as { __canvas_meta__?: { locked?: unknown } }).__canvas_meta__?.locked
+      )
+        ? ((window as unknown as { __canvas_meta__?: { locked?: string[] } }).__canvas_meta__
+            ?.locked as string[])
+        : []
+    );
+  }
+  return w.__maudeLockedKeys;
+}
+
+/** Is the element a locked layer? Matches by `cdId:occurrenceIndex` within the
+ *  artboard body (same occurrence math the Layers rows use). */
+function isLockedElement(el: Element | null, cdId: string | null): boolean {
+  if (!el || !cdId) return false;
+  const locked = lockedKeySet();
+  if (locked.size === 0) return false;
+  const body = el.closest('.dc-artboard-body');
+  if (!body) return false;
+  try {
+    const same = Array.from(body.querySelectorAll(`[data-cd-id="${CSS.escape(cdId)}"]`));
+    const idx = same.indexOf(el);
+    return locked.has(`${cdId}:${idx < 0 ? 0 : idx}`);
+  } catch {
+    return false;
+  }
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Router wire-up
 
@@ -1938,6 +2450,34 @@ function CanvasRouter({
   // consumes.
   const chromeCtx = useChromeVisibility();
 
+  // Dogfood follow-up (print artboards) — self-seed the per-canvas persisted
+  // overlay visibility (view.json `overlays.guides`/`overlays.print`, GET-
+  // merged into `window.__canvas_meta__` by _shell.html before mount) into
+  // the chrome store, once per mount. This seed originally lived in
+  // DesignCanvasInner (canvas-lib.tsx) — but that component renders
+  // CanvasShell as its CHILD, and ChromeVisibilityProvider mounts INSIDE
+  // CanvasShell, so DesignCanvasInner's own useChromeVisibility() was always
+  // null and the seed silently never ran (dead since the foundation feature;
+  // the generic `guides` toggle had no UI yet, so nothing surfaced it —
+  // "Show print guides" is its first real consumer). CanvasRouter sits
+  // inside the provider (it's the view-chrome bridge), so the seed works
+  // here. Absent keys stay HIDDEN (the T6 gotcha — an old view.json must
+  // not suddenly paint guides nobody asked for).
+  const overlaysSeededRef = useRef(false);
+  useEffect(() => {
+    if (overlaysSeededRef.current || !chromeCtx) return;
+    overlaysSeededRef.current = true;
+    const w = window as unknown as {
+      __canvas_meta__?: { overlays?: Record<string, boolean> };
+    };
+    const overlays = w.__canvas_meta__?.overlays;
+    if (!overlays) return;
+    const patch: { guides?: boolean; print?: boolean } = {};
+    if (overlays.guides === true) patch.guides = true;
+    if (overlays.print === true) patch.print = true;
+    if (Object.keys(patch).length > 0) chromeCtx.setChrome(patch);
+  }, [chromeCtx]);
+
   // Task A2 (feature-element-editing-robustness) — host-scroll-0 invariant.
   // `.dc-canvas` (overflow:hidden) and each `.dc-artboard-body` are the engine's
   // clip layers; the camera lives entirely in the `.dc-world` transform, and
@@ -1979,6 +2519,15 @@ function CanvasRouter({
 
   const getActiveTool = useCallback(() => tool, [tool]);
 
+  // feature-4 (browse/move split) — a live ref to the active tool for the
+  // long-lived capture listeners (dblclick) whose effects don't re-attach on a
+  // tool change. In the `browse` tool every canvas gesture is a pure native
+  // pass-through, so drill-select + inline text-edit must NOT fire — a
+  // double-click there belongs to the mock (selecting text in a real input,
+  // etc.). Press V for the Move (select) tool to edit.
+  const dblToolRef = useRef(tool);
+  dblToolRef.current = tool;
+
   const applyHover = useCallback(() => {
     hoverRafRef.current = null;
     const pending = pendingHoverRef.current;
@@ -2022,6 +2571,83 @@ function CanvasRouter({
         if (typeof t === 'string') setTool(t as never);
         return;
       }
+      // feature-4 (2026-07-20) — the Inspector's kind picker (shell-side) asks
+      // the CANVAS to freeze-then-switch, because only the canvas can measure
+      // boxes. Both outbound messages (convert request, kind request) leave in
+      // order, so the shell's structuralWrite chain serializes them correctly
+      // (freeze lands before a print-kind resize could move anything).
+      if (m.dgn === 'freeze-and-set-kind') {
+        // SECURITY (ethical-hacker) — accept ONLY from the parent shell, never
+        // from a canvas self-post or a sibling canvas iframe (all canvases share
+        // one canvasOrigin, so any frame can otherwise forge this cross-frame —
+        // confused-deputy: it drives a privileged convert-to-absolute + artboard
+        // kind write). Same gate as apply-style/record-edit above.
+        if (e.source !== window.parent) return;
+        const mm = m as {
+          artboardId?: string;
+          kind?: string | null;
+          freeze?: boolean;
+          ask?: boolean;
+        };
+        if (typeof mm.artboardId === 'string' && mm.artboardId) {
+          const artboardId = mm.artboardId;
+          const kind = typeof mm.kind === 'string' ? mm.kind : null;
+          void (async () => {
+            // Dogfood round 5 — `ask: true` = the CANVAS shows the freeze
+            // offer itself (canvasConfirm; the shell's window.confirm is a
+            // silent no-op in the Tauri WKWebView).
+            let freeze = mm.freeze !== false;
+            if (mm.ask === true) {
+              freeze = await canvasConfirm(
+                `${kind === 'print' ? 'Print' : 'Digital'} artboards work best with freely movable elements.\nAlso freeze the current layout (convert everything to position: absolute, removing invisible layout wrappers)? One-way change — ⌘Z right after still reverts it.`,
+                {
+                  title: kind === 'print' ? 'Switch to Print' : 'Switch to Digital',
+                  confirmLabel: 'Switch + freeze',
+                  cancelLabel: 'Just switch',
+                }
+              );
+            }
+            if (freeze) {
+              const convert = (
+                window as unknown as {
+                  __maudeConvertArtboard?: (
+                    id: string,
+                    o?: { skipConfirm?: boolean }
+                  ) => Promise<void>;
+                }
+              ).__maudeConvertArtboard;
+              await convert?.(artboardId, { skipConfirm: true });
+            }
+            try {
+              window.parent.postMessage(
+                { dgn: 'set-artboard-kind-request', artboardId, kind },
+                '*'
+              );
+            } catch {
+              /* detached */
+            }
+          })();
+        }
+        return;
+      }
+      // feature-4 (2026-07-19) — generic shell→canvas result toast (convert /
+      // detach success + failure feedback; the zero-visual-delta convert
+      // otherwise LOOKS like nothing happened).
+      if (m.dgn === 'op-toast') {
+        const msg = (m as { message?: string }).message;
+        if (typeof msg === 'string' && msg) showCanvasToast(msg.slice(0, 300));
+        return;
+      }
+      // feature-4 T7b — live locked-layer set from the shell's Layers panel.
+      if (m.dgn === 'locked-set') {
+        const arr = (m as { locked?: unknown }).locked;
+        if (Array.isArray(arr)) {
+          const s = lockedKeySet();
+          s.clear();
+          for (const k of arr) if (typeof k === 'string') s.add(k);
+        }
+        return;
+      }
       // Plan C — Edit menu (shell) bridges to the in-canvas undo stack.
       if (m.dgn === 'undo') {
         void undoStack.undo();
@@ -2037,29 +2663,52 @@ function CanvasRouter({
       // 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)
-            );
-            // Task A1 — reveal THROUGH the camera, not host scroll. The old
-            // `scrollIntoView` scrolled the overflow:hidden `.dc-canvas` /
-            // `.dc-artboard-body` clip layers, desyncing the `.dc-world`
-            // transform (Bugs A + B). `revealElementViaCamera` pans the world
-            // the minimal amount only when the element is off-screen.
-            const host = hostRef.current;
-            if (host && zoomController) {
-              revealElementViaCamera(host, target as HTMLElement, zoomController);
-            }
+        // Dogfood follow-up — a bare ARTBOARD selection (no data-cd-id, the
+        // ArtboardKnobs panel's own case) has no `mm.id` to resolve by, so
+        // the element branch below never ran for it: after a structural
+        // artboard write (kind/print/style/hug/resize) the Inspector kept
+        // showing the PRE-edit attrs snapshot (e.g. "Digital" right after
+        // switching to "Print") until the user manually re-clicked the
+        // artboard. Resolve by the SAME `[data-dc-screen="<id>"]` selector
+        // ArtboardKnobs itself reads its selection from (dom-selection.ts
+        // `hoverTargetToSelection` "2. data-dc-screen" resolution order) when
+        // there's no cdId to anchor on.
+        const target = mm.id
+          ? resolveSelectionEl(document, { id: mm.id, artboardId: mm.artboardId, index: mm.index })
+          : mm.artboardId
+            ? resolveSelectionEl(document, {
+                selector: `[data-dc-screen="${CSS.escape(mm.artboardId)}"]`,
+              })
+            : null;
+        if (target) {
+          // feature-4 dogfood fix (2026-07-19) — an IDEMPOTENT re-select (the
+          // shell's halo-restore ladder re-posts the same selection at 50…5000
+          // ms; artboard-resync does the same) must NOT re-reveal: the user may
+          // be panning elsewhere mid-ladder, and every re-post used to yank the
+          // camera back to the selection ("pan skoči zpět na selected objekt").
+          // Reveal only when the selection actually CHANGES.
+          const cur = selSet.selected;
+          const one = cur.length === 1 ? cur[0] : null;
+          const sameSelection = mm.id
+            ? !!one &&
+              one.id === mm.id &&
+              (mm.index == null || one.index == null || one.index === mm.index)
+            : !!one && !one.id && one.artboardId === (mm.artboardId ?? null);
+          selSet.replace(
+            hoverTargetToSelection({
+              el: target,
+              cdId: mm.id,
+              artboardId: mm.artboardId ?? null,
+            } as HoverTarget)
+          );
+          // Task A1 — reveal THROUGH the camera, not host scroll. The old
+          // `scrollIntoView` scrolled the overflow:hidden `.dc-canvas` /
+          // `.dc-artboard-body` clip layers, desyncing the `.dc-world`
+          // transform (Bugs A + B). `revealElementViaCamera` pans the world
+          // the minimal amount only when the element is off-screen.
+          const host = hostRef.current;
+          if (host && zoomController && !sameSelection) {
+            revealElementViaCamera(host, target as HTMLElement, zoomController);
           }
         }
         return;
@@ -2188,13 +2837,57 @@ function CanvasRouter({
       }
       // Shell View-menu chrome toggles + Presentation Mode. Only the fields the
       // shell sends are merged, so a `{ present: true }` enter keeps the user's
-      // individual minimap/zoom toggles for the eventual exit.
+      // individual minimap/zoom toggles for the eventual exit. `guides` (T6) is
+      // the odd one out — per-CANVAS persisted state, not a global pref — but
+      // rides the same live-broadcast channel; the shell PATCHes view.json
+      // separately (see setGuidesVisible in app.jsx).
       if (m.dgn === 'view-chrome' && chromeCtx) {
-        const mm = m as { minimap?: boolean; zoom?: boolean; present?: boolean };
-        const patch: { minimap?: boolean; zoom?: boolean; present?: boolean } = {};
+        const mm = m as {
+          minimap?: boolean;
+          zoom?: boolean;
+          present?: boolean;
+          guides?: boolean;
+          print?: boolean;
+        };
+        const patch: {
+          minimap?: boolean;
+          zoom?: boolean;
+          present?: boolean;
+          guides?: boolean;
+          print?: boolean;
+        } = {};
         if (typeof mm.minimap === 'boolean') patch.minimap = mm.minimap;
         if (typeof mm.zoom === 'boolean') patch.zoom = mm.zoom;
         if (typeof mm.present === 'boolean') patch.present = mm.present;
+        if (typeof mm.guides === 'boolean') patch.guides = mm.guides;
+        // feature-2-print-artboards T3 — "Show print guides" (bleed/trim/
+        // margin overlay). Same per-canvas-persisted shape as `guides`.
+        if (typeof mm.print === 'boolean') patch.print = mm.print;
+        // Dogfood follow-up — mirror `guides`/`print` into the in-iframe
+        // `window.__canvas_meta__.overlays` snapshot, exactly like the
+        // existing viewport/layout mirror in canvas-lib.tsx's onSettle (DDR-
+        // 138 comment: "populated ONCE at page load — so after a settle, a
+        // soft HMR remount (any module edit: text, reorder, agent edit)
+        // would re-read the STALE page-load [value]"). Without this, a
+        // structural edit AFTER toggling guides on (e.g. a kind switch,
+        // which is exactly such an edit) remounts DesignCanvasInner, its
+        // `guidesSeededRef` self-seed effect re-fires, and reads the stale
+        // page-load overlays snapshot — silently reverting a live-toggled
+        // guide back to hidden even though the View-menu checkbox still
+        // shows it checked. Same class of bug DDR-138 fixed for the camera;
+        // this is its `overlays` counterpart.
+        if (patch.guides !== undefined || patch.print !== undefined) {
+          const w = window as unknown as {
+            __canvas_meta__?: { overlays?: Record<string, boolean> };
+          };
+          if (w.__canvas_meta__) {
+            w.__canvas_meta__.overlays = {
+              ...w.__canvas_meta__.overlays,
+              ...(patch.guides !== undefined ? { guides: patch.guides } : {}),
+              ...(patch.print !== undefined ? { print: patch.print } : {}),
+            };
+          }
+        }
         chromeCtx.setChrome(patch);
         return;
       }
@@ -2303,7 +2996,12 @@ function CanvasRouter({
     // AND the annotation Text-tool's click-through (maude:enter-text-edit,
     // dispatched from annotations-layer.tsx when its own click lands on an
     // existing editable element) share one entry point.
-    function enterEditModeAt(stamped: HTMLElement, clientX: number, clientY: number): void {
+    function enterEditModeAt(
+      stamped: HTMLElement,
+      clientX: number,
+      clientY: number,
+      opts?: { selectAll?: boolean }
+    ): void {
       if (editing) return;
       editing = stamped;
       original = stamped.textContent ?? '';
@@ -2312,31 +3010,55 @@ function CanvasRouter({
       stamped.addEventListener('blur', onBlur, true);
       stamped.addEventListener('keydown', onKey, true);
       stamped.focus();
-      // Unified placement chain (text-caret.ts) — the annotation editors use
-      // the exact same helper, so caret-at-click can never diverge per surface.
-      placeCaretAt(stamped, window, { x: clientX, y: clientY });
+      if (opts?.selectAll) {
+        // feature-4 text-gestures (user steer 2026-07-20) — the DBLCLICK entry
+        // selects ALL text (Figma: reaching the leaf via the drill ladder puts
+        // the whole string under your fingers, ready to overwrite). Subsequent
+        // clicks/dblclicks inside the editor are native (the router bails on
+        // editable targets): click = caret, dblclick = word, triple = all.
+        try {
+          const sel = window.getSelection();
+          const range = document.createRange();
+          range.selectNodeContents(stamped);
+          sel?.removeAllRanges();
+          sel?.addRange(range);
+        } catch {
+          placeCaretAt(stamped, window, { x: clientX, y: clientY });
+        }
+      } else {
+        // Unified placement chain (text-caret.ts) — the annotation editors use
+        // the exact same helper, so caret-at-click can never diverge per surface.
+        placeCaretAt(stamped, window, { x: clientX, y: clientY });
+      }
       caretDispose = mountCaret(stamped, window);
     }
     const onDbl = (e: MouseEvent): void => {
       if (editing) return;
+      // feature-4 — browse is a pure pass-through: no drill-select, no inline
+      // text-edit. The mock owns its own double-clicks. Press V to edit.
+      if (dblToolRef.current === 'browse') 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);
       const isLeafText = kids.length > 0 && kids.every((n) => n.nodeType === 3);
-      if (!isLeafText) {
-        // Task L6 — deep-select: a container (anything that isn't leaf-text)
-        // double-clicked here used to just bail — this is the exact gap the
-        // plan's deep-select task targets. Drill ONE level past whatever's
-        // currently selected along this click's own stamped-ancestor chain
-        // (Figma parity: repeated double-clicks walk progressively deeper);
-        // default to the outermost rung when nothing in the chain is
-        // currently selected. Mutually exclusive with text-edit below by
-        // construction — same capture-phase listener, same branch gate.
+      // Task L6 + feature-4 dogfood fix (2026-07-19) — the Figma ordering: each
+      // double-click drills ONE level along the clicked element's stamped
+      // ancestor chain; text edit opens only when the LEAF ITSELF is already
+      // selected (the drill has reached it). Previously a dblclick on leaf
+      // text jumped straight to the editor from any depth, so the drill ladder
+      // never ran on text-bearing targets.
+      const sel0 = selSet.selected;
+      const currentId = sel0.length === 1 ? sel0[0]?.id : undefined;
+      const leafReached = isLeafText && currentId === stamped.getAttribute('data-cd-id');
+      if (!leafReached) {
+        // Drill ONE level past whatever's currently selected along this
+        // click's own stamped-ancestor chain (repeated double-clicks walk
+        // progressively deeper; the chain's last rung is the clicked element
+        // itself); default to the outermost rung when nothing in the chain is
+        // currently selected.
         const chain = stampedChainToBody(stamped);
         if (chain.length > 0) {
-          const sel = selSet.selected;
-          const currentId = sel.length === 1 ? sel[0]?.id : undefined;
           const curIdx = currentId
             ? chain.findIndex((n) => n.getAttribute('data-cd-id') === currentId)
             : -1;
@@ -2368,7 +3090,7 @@ function CanvasRouter({
         );
         return;
       }
-      enterEditModeAt(stamped, e.clientX, e.clientY);
+      enterEditModeAt(stamped, e.clientX, e.clientY, { selectAll: true });
     };
     // Dogfood fix — the annotation Text tool's click-through: clicking an
     // existing editable element with the Text (T) tool active should edit
@@ -2442,6 +3164,39 @@ function CanvasRouter({
           // it actually captured something.
           return;
         }
+        // feature-4 T7b — a locked layer can't be selected from the canvas
+        // (the Layers panel row still can, so it stays reachable to unlock).
+        if (isLockedElement(target.el, target.cdId)) return;
+        // feature-4 escape hatch (user steer 2026-07-19) — a Cmd+click select
+        // from BROWSE means "I want to edit now": flip to the Move (select)
+        // tool so the follow-up gestures (drag, dblclick drill, keyboard)
+        // work without a separate V press.
+        if (tool === 'browse') setTool('move');
+        // feature-4 dogfood fix (2026-07-19) — Figma's "entered group" context:
+        // a bare (top-mode) click INSIDE the currently selected element keeps
+        // that selection instead of resetting to the top-level ancestor.
+        // Without this the dblclick drill ladder could never descend past one
+        // level — the dblclick's own pointerdown(detail:2) re-selected the top
+        // object right before the drill ran. Clicking OUTSIDE the current
+        // selection (a sibling, empty space) still re-selects normally.
+        if (!deep && mode === 'replace') {
+          const cur = selSet.selected;
+          const one = cur.length === 1 ? cur[0] : null;
+          if (one?.id) {
+            const curEl = resolveSelectionEl(document, one);
+            const hitEl = document.elementFromPoint(clientX, clientY);
+            if (
+              curEl &&
+              hitEl &&
+              curEl !== target.el &&
+              curEl.contains(hitEl) &&
+              target.el &&
+              target.el.contains(curEl)
+            ) {
+              return; // stay in the entered-group context
+            }
+          }
+        }
         const sel = hoverTargetToSelection(target);
         if (mode === 'replace') selSet.replace(sel);
         else selSet.add(sel);
@@ -2506,6 +3261,7 @@ function CanvasRouter({
       <SelectionHalos />
       <ElementResizeOverlay />
       <SpacingHandlesOverlay />
+      <GridTrackHandlesOverlay />
       <ReorderDrag />
       <LayersLiveSync />
       <GroupBbox />
@@ -3326,6 +4082,9 @@ function ReorderDrag() {
       if (!cdId || !one) return;
       const el = resolveSelectionEl(document, one) as HTMLElement | null;
       if (!el) return;
+      // feature-4 T7b — a locked layer never drags (it can be selected from
+      // the Layers panel, but the canvas won't move it).
+      if (isLockedElement(el, cdId)) return;
       const t = e.target;
       if (!(t instanceof Node) || !el.contains(t)) return;
       // Candidate — do NOT claim yet (a plain click must still work). We only