@1agh/maude 0.45.2 → 0.47.0

package/apps/studio/use-grid-track-handles.tsx

@@ -0,0 +1,364 @@
+/**
+ * @file       use-grid-track-handles.tsx — feature-3-web-artboards T5
+ *             (absorbed feature-grid-track-editor stub).
+ * @scope      apps/studio/use-grid-track-handles.tsx
+ * @purpose    On-canvas CSS-Grid gutter drag-resize — the grid sibling of
+ *             `use-spacing-handles.tsx`'s padding/gap overlay, same shape:
+ *             live preview via direct inline-style writes, commit rides the
+ *             SAME `resize-request` lane (`grid-template-columns`/`-rows`
+ *             added to the shell's `resizeElement` allowed-prop list — no
+ *             new write surface, mirroring how `padding-*`/`gap` were added
+ *             there for Stage J). A component-instance drag threads the
+ *             Stage H3 occurrence index the same way (`globalCdOccurrence`).
+ *
+ *             Gated on computed `display: grid`/`inline-grid` (CLAUDE.md
+ *             gotcha: "gate all of it on computed display" — a container
+ *             that was converted to absolute, or never was a grid, is not an
+ *             editing target). Only tracks AUTHORED inline via
+ *             `grid-template-columns`/`-rows` (parseable by
+ *             `grid-track-handles.ts`'s `parseTrackList`) get drag handles —
+ *             `repeat()`/`minmax()`/a stylesheet-authored grid have no
+ *             drag surface here (same constraint every curated knob already
+ *             has: these on-canvas tools edit inline-style-authored values
+ *             only); the Inspector's Grid section still shows the raw value
+ *             for those cases.
+ */
+
+import { type ReactNode, useCallback, useEffect, useRef } from 'react';
+import { globalCdOccurrence, resolveSelectionEl } from './dom-selection.ts';
+import { isElementDragActive } from './drag-state.ts';
+import {
+  computeGutterLines,
+  computeTrackDrag,
+  GRID_KEYWORD_UNITS,
+  type GridTrack,
+  type GutterLine,
+  gutterTrackIndices,
+  parseTrackList,
+  serializeTrackList,
+} from './grid-track-handles.ts';
+import { worldZoomFor } from './use-element-resize.tsx';
+import { useSelectionSet } from './use-selection-set.tsx';
+import { useToolMode } from './use-tool-mode.tsx';
+
+const GRID_HANDLE_CSS = `
+.dc-grid-gutter-handle {
+  position: fixed;
+  transform: translate(-50%, -50%);
+  /* Same layering rationale as the spacing handles (z-index 4) — below the
+     Stage-D resize handles (6), which win any frame-edge hit-test tie. */
+  z-index: 4;
+  pointer-events: auto;
+  touch-action: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  background: var(--maude-hud-accent, oklch(0.680 0.180 268));
+  border: 1px solid var(--maude-hud-accent-fg, oklch(0.180 0.030 268));
+  opacity: 0.55;
+  transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dc-grid-gutter-handle:hover,
+.dc-grid-gutter-handle[data-dragging="true"] { opacity: 1; }
+.dc-grid-gutter-handle[data-axis="x"] { cursor: ew-resize; }
+.dc-grid-gutter-handle[data-axis="y"] { cursor: ns-resize; }
+@media (prefers-reduced-motion: reduce) {
+  .dc-grid-gutter-handle { transition-duration: 1ms; }
+}
+`.trim();
+
+function ensureGridHandleStyles(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById('dc-grid-gutter-css')) return;
+  const s = document.createElement('style');
+  s.id = 'dc-grid-gutter-css';
+  s.textContent = GRID_HANDLE_CSS;
+  document.head.appendChild(s);
+}
+
+function computedPx(cs: CSSStyleDeclaration, prop: string): number {
+  return Number.parseFloat(cs.getPropertyValue(prop)) || 0;
+}
+
+/** Parse a browser-RESOLVED `grid-template-columns`/`-rows` computed value
+ *  ("100px 200px 100px") into a plain px array. Never contains keywords or
+ *  `fr` — the browser already ran the grid-sizing algorithm. */
+function resolvedTrackSizes(computedValue: string): number[] {
+  const s = computedValue.trim();
+  if (!s || s === 'none') return [];
+  return s.split(/\s+/).map((tok) => Number.parseFloat(tok) || 0);
+}
+
+interface AxisState {
+  container: 'col' | 'row';
+  authored: GridTrack[];
+  resolvedPx: number[];
+  gutters: GutterLine[];
+}
+
+interface GridDrag {
+  pointerId: number;
+  axis: 'x' | 'y';
+  container: 'col' | 'row';
+  gutterIndex: number;
+  el: HTMLElement;
+  cdId: string;
+  idIndex: number;
+  startClientX: number;
+  startClientY: number;
+  zoom: number;
+  /** Snapshot of the AUTHORED track list for this axis at drag-start. */
+  tracks: GridTrack[];
+  /** Snapshot of each touched track's resolved px at drag-start. */
+  resolvedAtStart: number[];
+  touched: number[];
+  prop: 'grid-template-columns' | 'grid-template-rows';
+  before: string;
+}
+
+export function GridTrackHandlesOverlay(): ReactNode {
+  ensureGridHandleStyles();
+  const { selected } = useSelectionSet();
+  const { tool } = useToolMode();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const rafRef = useRef<number | null>(null);
+  const dragRef = useRef<GridDrag | null>(null);
+  const lastCommitRef = useRef<{ el: HTMLElement; prop: string; before: string } | null>(null);
+  // Latest per-axis geometry, read by the pointerdown handler (it fires
+  // between rAF ticks, so it needs the most recent computed snapshot rather
+  // than recomputing getComputedStyle itself).
+  const axesRef = useRef<{ col: AxisState | null; row: AxisState | null }>({
+    col: null,
+    row: null,
+  });
+
+  const one = selected.length === 1 ? selected[0] : null;
+  const cdId = one && typeof one.id === 'string' ? one.id : null;
+  const active = tool === 'move' && !!cdId;
+
+  useEffect(() => {
+    const c = containerRef.current;
+    if (!c) return;
+    const hideAll = () => {
+      for (const child of Array.from(c.children)) (child as HTMLElement).style.display = 'none';
+      axesRef.current = { col: null, row: null };
+    };
+    if (!active || !one) {
+      hideAll();
+      return;
+    }
+    const tick = () => {
+      rafRef.current = null;
+      const reschedule = () => {
+        rafRef.current = requestAnimationFrame(tick);
+      };
+      const bail = () => {
+        hideAll();
+        reschedule();
+      };
+      if (isElementDragActive()) {
+        bail();
+        return;
+      }
+      const el = resolveSelectionEl(document, one) as HTMLElement | null;
+      if (!el) {
+        bail();
+        return;
+      }
+      const cs = getComputedStyle(el);
+      const isGrid = cs.display === 'grid' || cs.display === 'inline-grid';
+      if (!isGrid) {
+        bail();
+        return;
+      }
+      const r = el.getBoundingClientRect();
+      if (r.width <= 0 && r.height <= 0) {
+        bail();
+        return;
+      }
+      const zoom = worldZoomFor(el);
+      const rect = { x: r.left, y: r.top, w: r.width, h: r.height };
+      const colGap = computedPx(cs, 'column-gap') * zoom;
+      const rowGap = computedPx(cs, 'row-gap') * zoom;
+
+      const buildAxis = (
+        container: 'col' | 'row',
+        prop: string,
+        gapPx: number
+      ): AxisState | null => {
+        const authored = parseTrackList(el.style.getPropertyValue(prop));
+        if (authored.length < 2) return null;
+        const resolvedPx = resolvedTrackSizes(cs.getPropertyValue(prop)).map((px) => px * zoom);
+        if (resolvedPx.length !== authored.length) return null; // repeat()/mismatch guard
+        const gutters = computeGutterLines(rect, resolvedPx, gapPx, container).filter((_, i) => {
+          const before = authored[i] as GridTrack;
+          const after = authored[i + 1] as GridTrack;
+          return !GRID_KEYWORD_UNITS.has(before.unit) || !GRID_KEYWORD_UNITS.has(after.unit);
+        });
+        if (gutters.length === 0) return null;
+        return { container, authored, resolvedPx, gutters };
+      };
+
+      const col = buildAxis('col', 'grid-template-columns', colGap);
+      const row = buildAxis('row', 'grid-template-rows', rowGap);
+      axesRef.current = { col, row };
+
+      const allGutters = [...(col?.gutters ?? []), ...(row?.gutters ?? [])];
+      const TOTAL = allGutters.length;
+      while (c.children.length < TOTAL) c.appendChild(document.createElement('div'));
+      while (c.children.length > TOTAL) c.lastChild && c.removeChild(c.lastChild);
+      let i = 0;
+      for (const [container, axisState] of [
+        ['col', col],
+        ['row', row],
+      ] as const) {
+        const kind = container === 'col' ? 'column' : 'row';
+        for (const g of axisState?.gutters ?? []) {
+          const h = c.children[i] as HTMLElement;
+          h.className = 'dc-grid-gutter-handle';
+          h.dataset.container = container;
+          h.dataset.gutterIndex = String(g.index);
+          h.dataset.axis = g.axis;
+          h.title = `grid ${kind} gutter · drag to resize · shift = resize both neighbors`;
+          h.style.display = 'block';
+          h.style.left = `${Math.round(g.x)}px`;
+          h.style.top = `${Math.round(g.y)}px`;
+          i++;
+        }
+      }
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+    };
+  }, [active, one]);
+
+  const commit = useCallback((d: GridDrag, serialized: string) => {
+    lastCommitRef.current = { el: d.el, prop: d.prop, before: d.before };
+    try {
+      window.parent.postMessage(
+        {
+          dgn: 'resize-request',
+          id: d.cdId,
+          patch: { [d.prop]: serialized },
+          before: { [d.prop]: d.before },
+          idIndex: d.idIndex,
+        },
+        '*'
+      );
+    } catch {
+      /* detached / cross-origin teardown */
+    }
+  }, []);
+
+  useEffect(() => {
+    const c = containerRef.current;
+    if (!c) return;
+
+    const onDown = (e: PointerEvent) => {
+      const t = e.target as HTMLElement | null;
+      if (!t?.classList.contains('dc-grid-gutter-handle')) return;
+      if (!one || typeof one.id !== 'string') return;
+      const el = resolveSelectionEl(document, one) as HTMLElement | null;
+      if (!el) return;
+      const container = t.dataset.container as 'col' | 'row';
+      const axisState = axesRef.current[container];
+      if (!axisState) return;
+      const gutterIndex = Number(t.dataset.gutterIndex);
+      if (!Number.isFinite(gutterIndex)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const zoom = worldZoomFor(el);
+      const prop: GridDrag['prop'] =
+        container === 'col' ? 'grid-template-columns' : 'grid-template-rows';
+      dragRef.current = {
+        pointerId: e.pointerId,
+        axis: (t.dataset.axis as 'x' | 'y') ?? 'x',
+        container,
+        gutterIndex,
+        el,
+        cdId: one.id,
+        idIndex: globalCdOccurrence(document, one.id, el),
+        startClientX: e.clientX,
+        startClientY: e.clientY,
+        zoom: zoom > 0 ? zoom : 1,
+        tracks: axisState.authored,
+        resolvedAtStart: axisState.resolvedPx,
+        touched: gutterTrackIndices(gutterIndex, false),
+        prop,
+        before: serializeTrackList(axisState.authored),
+      };
+      t.dataset.dragging = 'true';
+      try {
+        t.setPointerCapture(e.pointerId);
+      } catch {
+        /* synthetic events may reject capture */
+      }
+    };
+
+    const previewFor = (d: GridDrag, e: PointerEvent): GridTrack[] => {
+      const dx = e.clientX - d.startClientX;
+      const dy = e.clientY - d.startClientY;
+      const touched = gutterTrackIndices(d.gutterIndex, e.shiftKey).filter(
+        (idx) => idx < d.tracks.length
+      );
+      const next = d.tracks.map((tr) => ({ ...tr }));
+      for (const idx of touched) {
+        const tr = d.tracks[idx];
+        const resolvedPx = d.resolvedAtStart[idx];
+        if (!tr || !Number.isFinite(resolvedPx) || GRID_KEYWORD_UNITS.has(tr.unit)) continue;
+        const newValue = computeTrackDrag(tr, resolvedPx as number, dx, dy, d.zoom, d.axis);
+        next[idx] = { value: newValue, unit: tr.unit };
+      }
+      return next;
+    };
+
+    const onMove = (e: PointerEvent) => {
+      const d = dragRef.current;
+      if (!d || e.pointerId !== d.pointerId) return;
+      e.preventDefault();
+      const next = previewFor(d, e);
+      d.el.style.setProperty(d.prop, serializeTrackList(next));
+    };
+
+    const onUp = (e: PointerEvent) => {
+      const d = dragRef.current;
+      if (!d || e.pointerId !== d.pointerId) return;
+      dragRef.current = null;
+      const handle = containerRef.current?.querySelector<HTMLElement>(
+        '.dc-grid-gutter-handle[data-dragging="true"]'
+      );
+      if (handle) delete handle.dataset.dragging;
+      const next = previewFor(d, e);
+      const serialized = serializeTrackList(next);
+      if (serialized === d.before) return; // no-op guard
+      commit(d, serialized);
+    };
+
+    const onFail = (e: MessageEvent) => {
+      const m = e.data as { dgn?: string } | null;
+      if (m?.dgn !== 'resize-failed') return;
+      if (e.source !== window.parent) return; // only the parent shell (DDR-054)
+      const last = lastCommitRef.current;
+      if (!last) return;
+      last.el.style.setProperty(last.prop, last.before);
+      lastCommitRef.current = null;
+    };
+
+    c.addEventListener('pointerdown', onDown);
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+    window.addEventListener('message', onFail);
+    return () => {
+      c.removeEventListener('pointerdown', onDown);
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+      window.removeEventListener('message', onFail);
+    };
+  }, [one, commit]);
+
+  return <div ref={containerRef} aria-hidden="true" />;
+}

package/apps/studio/use-keyboard-discipline.tsx

@@ -29,6 +29,7 @@ import { useArtboardsContext, useDragStateContext } from './canvas-lib.tsx';
 import { resolveSelectionEl, scopedCdSelector, selectorIndex } from './dom-selection.ts';
 import { isEditableTarget } from './input-router.tsx';
 import { type Selection, useSelectionSet } from './use-selection-set.tsx';
+import { useToolModeOptional } from './use-tool-mode.tsx';
 
 const STEP_SMALL = 1;
 const STEP_LARGE = 10;
@@ -62,6 +63,18 @@ export function useKeyboardDiscipline(): void {
   const selSet = useSelectionSet();
   const artboardsCtx = useArtboardsContext();
   const dragBus = useDragStateContext();
+  // feature-4 (browse/move split) — every keyboard EDITING op here (Cmd+A,
+  // Cmd+D, copy/paste-style, Enter/Tab tree traversal, Delete, arrow-nudge) is
+  // scoped OUT of the `browse` tool: in the alive mode the mock owns the
+  // keyboard (a real form submits on Enter, an input takes Delete). A live ref
+  // keeps the document capture listener from re-attaching on every tool change.
+  // Default to 'move' (NOT 'browse') when no ToolProvider is above us — a
+  // context without a tool store (a bare specimen) must keep its keyboard
+  // editing ops, exactly as before this feature. Only an ACTIVE `browse` tool
+  // suppresses them.
+  const toolCtx = useToolModeOptional();
+  const toolRef = useRef(toolCtx?.tool ?? 'move');
+  toolRef.current = toolCtx?.tool ?? 'move';
   // Element arrow-nudge burst (Task L1): accumulate left/top, preview inline, and
   // commit once after a short pause (one undo per settle, not per keypress).
   const nudgeRef = useRef<{
@@ -78,6 +91,8 @@ export function useKeyboardDiscipline(): void {
 
     const onKeyDown = (e: KeyboardEvent) => {
       if (isEditableTarget(e.target)) return;
+      // feature-4 — browse is a pure pass-through; the mock owns the keyboard.
+      if (toolRef.current === 'browse') return;
 
       // Cmd+A → select all stamped elements in the active artboard.
       const isMeta = e.metaKey || e.ctrlKey;

package/apps/studio/use-snap-guides.tsx

@@ -44,8 +44,10 @@ export type SnapAxis = 'x' | 'y';
  *  different visual treatments (grid = lighter gray fallback; sibling = full
  *  magenta confidence). `delta` is the signed correction the snap applied;
  *  the overlay renders a `Δ{Math.round(delta)}` pill mid-span when |delta| > 0
- *  and the guide span > 60 px. */
-export type SnapKind = 'grid' | 'sibling';
+ *  and the guide span > 60 px. `guide` (feature-1-artboard-kinds-foundation
+ *  T7) is a third source — an artboard's own generic layout guide lines
+ *  (T5), offered the same confidence treatment as `sibling`. */
+export type SnapKind = 'grid' | 'sibling' | 'guide';
 
 export interface SnapGuide {
   /** `"x"` → vertical line (snapping X coord). Line sits at `pos` on X,
@@ -72,6 +74,29 @@ export interface SnapResult {
   guides: SnapGuide[];
 }
 
+/**
+ * T7 — a single generic-layout-guide line (T5) in WORLD coordinates, ready to
+ * snap against. The caller (canvas-lib/canvas-shell) resolves an artboard's
+ * `guides` prop (columns/rows/grid, artboard-LOCAL coordinates) into these
+ * world-space lines — `computeSnap` itself stays artboard-agnostic, same as
+ * it already is for sibling rects.
+ */
+export interface GuideLineCandidate {
+  axis: SnapAxis;
+  pos: number;
+  from: number;
+  to: number;
+}
+
+/**
+ * T7 — the two snap-source presets: `layout` (default) offers sibling edges/
+ * centers AND guide lines, falling back to the grid; `pixel` offers ONLY the
+ * grid — for pixel-precise placement work where guide/sibling magnetism would
+ * get in the way. Affinity's "2 intent presets, not 15 toggles" call (see the
+ * plan's Design Decision 4).
+ */
+export type SnapIntent = 'layout' | 'pixel';
+
 export interface SnapOptions {
   /** World-units between grid lines. Default 40. */
   gridSize: number;
@@ -79,6 +104,11 @@ export interface SnapOptions {
   tolerance: number;
   /** Skip all snap math + return proposed unchanged (Alt-held bypass). */
   disabled: boolean;
+  /** Generic layout guide lines to snap against, in world coordinates. */
+  guideLines?: GuideLineCandidate[];
+  /** Which candidate sources are active. Default `'layout'` when omitted, so
+   *  every existing call site (pre-T7) keeps today's sibling+grid behavior. */
+  intent?: SnapIntent;
 }
 
 interface AxisCandidate {
@@ -141,6 +171,7 @@ export function computeSnap(proposed: Rect, others: Rect[], opts: SnapOptions):
     return { x: proposed.x, y: proposed.y, guides: [] };
   }
   const { gridSize, tolerance } = opts;
+  const intent = opts.intent ?? 'layout';
   const propLeft = proposed.x;
   const propRight = proposed.x + proposed.w;
   const propCenterX = proposed.x + proposed.w / 2;
@@ -152,7 +183,8 @@ export function computeSnap(proposed: Rect, others: Rect[], opts: SnapOptions):
   const yCands: AxisCandidate[] = [];
 
   // Grid candidates — left edge for X, top edge for Y. Perpendicular extent
-  // is just the proposed rect's own range (no sibling involved).
+  // is just the proposed rect's own range (no sibling involved). Grid is the
+  // one source active under BOTH intent presets (T7 Design Decision 4).
   const gridX = nearestGridDelta(propLeft, gridSize, tolerance);
   if (gridX !== null) {
     xCands.push({
@@ -174,8 +206,44 @@ export function computeSnap(proposed: Rect, others: Rect[], opts: SnapOptions):
     });
   }
 
-  // Sibling candidates.
-  for (const other of others) {
+  // T7 — generic-layout-guide-line candidates ("Layout" intent only). Each
+  // world-space line is tested the same three ways a sibling edge/center is
+  // (leading edge, trailing edge, center) — Figma's own layout-guide snap
+  // behavior — so a guide line snaps whichever part of the proposed rect
+  // lands closest, not just its leading edge (unlike the grid pass above).
+  if (intent === 'layout') {
+    for (const g of opts.guideLines ?? []) {
+      if (g.axis === 'x') {
+        for (const propCoord of [propLeft, propRight, propCenterX]) {
+          const delta = g.pos - propCoord;
+          if (Math.abs(delta) > tolerance) continue;
+          xCands.push({
+            delta,
+            pos: g.pos,
+            from: Math.min(propTop, g.from),
+            to: Math.max(propBottom, g.to),
+            kind: 'guide',
+          });
+        }
+      } else {
+        for (const propCoord of [propTop, propBottom, propCenterY]) {
+          const delta = g.pos - propCoord;
+          if (Math.abs(delta) > tolerance) continue;
+          yCands.push({
+            delta,
+            pos: g.pos,
+            from: Math.min(propLeft, g.from),
+            to: Math.max(propRight, g.to),
+            kind: 'guide',
+          });
+        }
+      }
+    }
+  }
+
+  // Sibling candidates ("Layout" intent only — "Pixel" is grid-only per T7
+  // Design Decision 4).
+  for (const other of intent === 'layout' ? others : []) {
     const oLeft = other.x;
     const oRight = other.x + other.w;
     const oCenterX = other.x + other.w / 2;

package/apps/studio/use-spacing-handles.tsx

@@ -28,7 +28,7 @@ import {
   type PaddingSide,
   paddingSideSet,
 } from './spacing-handles.ts';
-import { scaleFromMatrix } from './use-element-resize.tsx';
+import { worldZoomFor } from './use-element-resize.tsx';
 import { useSelectionSet } from './use-selection-set.tsx';
 import { useToolMode } from './use-tool-mode.tsx';
 
@@ -174,8 +174,10 @@ export function SpacingHandlesOverlay(): ReactNode {
         return;
       }
       const cs = getComputedStyle(el);
-      const world = el.closest('.dc-world') as HTMLElement | null;
-      const zoom = world ? scaleFromMatrix(getComputedStyle(world).transform) : 1;
+      // Dogfood fix — engine-split-aware zoom read (see worldZoomFor's own
+      // doc comment in use-element-resize: the Chromium camera writes the CSS
+      // `zoom` property, not a transform matrix).
+      const zoom = worldZoomFor(el);
       const padding = {
         top: computedPx(cs, 'padding-top'),
         right: computedPx(cs, 'padding-right'),
@@ -274,8 +276,10 @@ export function SpacingHandlesOverlay(): ReactNode {
       const prop = t.dataset.prop || '';
       const isGap = prop === 'gap';
       const cs = getComputedStyle(el);
-      const world = el.closest('.dc-world') as HTMLElement | null;
-      const zoom = world ? scaleFromMatrix(getComputedStyle(world).transform) : 1;
+      // Dogfood fix — engine-split-aware zoom read (see worldZoomFor's own
+      // doc comment in use-element-resize: the Chromium camera writes the CSS
+      // `zoom` property, not a transform matrix).
+      const zoom = worldZoomFor(el);
       const drag: SpacingDrag = {
         pointerId: e.pointerId,
         kind: isGap ? 'gap' : 'padding',

package/apps/studio/use-tool-mode.tsx

@@ -48,7 +48,11 @@ export type ShapeKind = 'square' | 'rounded' | 'circle' | 'diamond' | 'triangle'
 // crosshair/text/cell were thin + tiny ("pen almost invisible"); these mirror
 // the tool-palette icons. `move` keeps the system arrow on purpose.
 export const DEFAULT_TOOLS: readonly ToolDescriptor[] = Object.freeze([
-  { id: 'move', label: 'Move', shortcut: 'V', cursor: TOOL_CURSORS.move },
+  // feature-4 — Browse is the BOOT default: the mock is alive (buttons click).
+  // Press V for the Move (select) tool. No letter shortcut — it's a deliberate
+  // "I'm done editing" choice via the palette / Esc-from-a-draw-tool.
+  { id: 'browse', label: 'Browse', shortcut: '', cursor: TOOL_CURSORS.browse },
+  { id: 'move', label: 'Select', shortcut: 'V', cursor: TOOL_CURSORS.move },
   { id: 'hand', label: 'Hand', shortcut: 'H', cursor: TOOL_CURSORS.hand },
   { id: 'comment', label: 'Comment', shortcut: 'C', cursor: TOOL_CURSORS.comment },
   { id: 'pen', label: 'Pen', shortcut: 'B', cursor: TOOL_CURSORS.pen },
@@ -89,7 +93,11 @@ const ToolContext = createContext<ToolContextValue | null>(null);
 export function ToolProvider({
   children,
   tools = DEFAULT_TOOLS,
-  initial = 'move',
+  // feature-4 (browse/move split, DDR-187) — boot into `browse` so a freshly
+  // opened mock is ALIVE (native pass-through). V flips to the Move (select)
+  // tool. This is the user-decided boot posture (2026-07-15), zero regression
+  // for existing canvases + every native-input surface.
+  initial = 'browse',
 }: {
   children: ReactNode;
   tools?: readonly ToolDescriptor[];
@@ -134,13 +142,32 @@ export function ToolProvider({
     const desc = tools.find((t) => t.id === tool);
     if (!desc) return;
     const prev = document.body.style.cursor;
-    document.body.style.cursor = desc.cursor;
     let styleEl = document.getElementById('dc-tool-cursor') as HTMLStyleElement | null;
     if (!styleEl) {
       styleEl = document.createElement('style');
       styleEl.id = 'dc-tool-cursor';
       document.head.appendChild(styleEl);
     }
+    // feature-4 — the browse tool is a pure pass-through: it must NOT force a
+    // global cursor, or the `* { cursor: … !important }` rule below would beat
+    // the mock's own affordance cursors (pointer over a button, text over an
+    // input) and the canvas would stop reading as alive. Clear the forced rule
+    // and let the body/native cursors win.
+    if (tool === 'browse') {
+      document.body.style.cursor = '';
+      styleEl.textContent = '';
+      if (typeof window !== 'undefined' && window.parent && window.parent !== window) {
+        try {
+          window.parent.postMessage({ dgn: 'tool-cursor', tool }, '*');
+        } catch {
+          /* cross-origin parent rejected */
+        }
+      }
+      return () => {
+        document.body.style.cursor = prev;
+      };
+    }
+    document.body.style.cursor = desc.cursor;
     // Truly GLOBAL inside the canvas document — `*` so it covers the empty grid
     // host, `.dc-world`, every artboard + its content, AND the floating chrome
     // (minimap, toolbar). The earlier `.dc-world`-scoped rule left the empty

package/apps/studio/web-overlay-content.tsx

@@ -0,0 +1,52 @@
+/**
+ * @file       web-overlay-content.tsx — feature-3-web-artboards T2.
+ * @scope      apps/studio/web-overlay-content.tsx
+ * @purpose    Registers the 'web' kind's on-canvas chrome into the
+ *             foundation's kindOverlayRegistry (artboard-guides-overlay.tsx):
+ *             a small breakpoint-band chip in the header's top-right corner
+ *             (the video badge's own slot — 'web' and 'video' are mutually
+ *             exclusive via DCArtboard's resolvedKind, so there's no
+ *             collision) showing the artboard's CURRENT live width as
+ *             "≤ {width}px" — the Framer-breakpoints-bar vocabulary (Design
+ *             Decisions 2/3). Dragging the artboard's resize handle (T4)
+ *             visibly updates this label live, which is how "drag width to
+ *             test reflow" reads as a breakpoint change rather than a plain
+ *             resize.
+ *
+ *             Decorative — aria-hidden, pointer-events none. Reuses the
+ *             engine's own HUD chrome tokens (--bg-2/--fg-1/--font-mono),
+ *             same as the artboard label strip itself, rather than DS tokens
+ *             — this chip IS chrome, never exported content. Always-on (no
+ *             visibility gate): unlike print's bleed/trim/margin overlay
+ *             (which visually covers artboard content and needs an opt-in
+ *             toggle), this is a single small corner label with nothing to
+ *             collide with, so there's no reason to hide it.
+ */
+
+import { type KindOverlayRenderFn, registerKindOverlay } from './artboard-guides-overlay.tsx';
+
+const WebOverlayContent: KindOverlayRenderFn = ({ rect }) => {
+  const width = Math.round(rect.w);
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 4,
+        right: 6,
+        padding: '2px 6px',
+        borderRadius: 3,
+        background: 'var(--bg-2, #e8e3d8)',
+        color: 'var(--fg-1, #4a3f30)',
+        fontFamily: 'var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
+        fontSize: 9,
+        letterSpacing: '0.04em',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {`≤ ${width}px`}
+    </div>
+  );
+};
+WebOverlayContent.displayName = 'WebOverlayContent';
+
+registerKindOverlay('web', WebOverlayContent);