@1agh/maude 0.46.0 → 0.47.0

package/apps/studio/use-canvas-media-drop.tsx

@@ -227,6 +227,38 @@ const TOAST_CSS = `
 @media (prefers-reduced-motion: reduce) {
   .dc-media-toast { transition: none; }
 }
+/* feature-4 (2026-07-19) — sandbox-safe confirm dialog (window.confirm is
+   silently blocked in the allow-modals-less canvas iframe). HUD-token styled. */
+.dc-confirm-backdrop {
+  position: fixed; inset: 0; z-index: 40;
+  background: rgba(0,0,0,0.45);
+  display: flex; align-items: center; justify-content: center;
+}
+.dc-confirm {
+  min-width: 300px; max-width: 420px;
+  background: var(--maude-chrome-bg-1, #1b1e24);
+  color: var(--maude-chrome-fg-0, #e7eaf0);
+  border: 1px solid var(--maude-chrome-border, #333a45);
+  border-radius: 10px;
+  box-shadow: 0 14px 44px rgba(0,0,0,0.5);
+  padding: 16px;
+  font-family: var(--maude-chrome-font-ui, system-ui, sans-serif);
+}
+.dc-confirm-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
+.dc-confirm-body { font-size: 12px; line-height: 1.5; color: var(--maude-chrome-fg-1, #b7bec9); white-space: pre-line; }
+.dc-confirm-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
+.dc-confirm-btn {
+  padding: 5px 12px; border-radius: 7px; font-size: 12px; cursor: pointer;
+  background: var(--maude-chrome-bg-2, #262b33);
+  color: var(--maude-chrome-fg-0, #e7eaf0);
+  border: 1px solid var(--maude-chrome-border, #333a45);
+}
+.dc-confirm-btn--primary {
+  background: var(--maude-hud-accent, #0d99ff);
+  border-color: var(--maude-hud-accent, #0d99ff);
+  color: #fff;
+}
+.dc-confirm-btn:focus-visible { outline: 2px solid var(--maude-hud-accent, #0d99ff); outline-offset: 1px; }
 `.trim();
 
 function ensureMediaStyles(): void {
@@ -238,6 +270,100 @@ function ensureMediaStyles(): void {
   document.head.appendChild(s);
 }
 
+/**
+ * feature-4 (2026-07-19) — sandbox-safe in-canvas CONFIRM. The canvas iframe
+ * runs with sandbox="allow-scripts allow-same-origin" (no allow-modals), so
+ * `window.confirm()` silently returns false — this promise-based overlay is
+ * the replacement (Esc / backdrop / Cancel → false, primary / Enter → true).
+ */
+export function canvasConfirm(
+  message: string,
+  opts?: { title?: string; confirmLabel?: string; cancelLabel?: string }
+): Promise<boolean> {
+  if (typeof document === 'undefined') return Promise.resolve(false);
+  ensureMediaStyles();
+  return new Promise((resolve) => {
+    const backdrop = document.createElement('div');
+    backdrop.className = 'dc-confirm-backdrop';
+    const box = document.createElement('div');
+    box.className = 'dc-confirm';
+    box.setAttribute('role', 'alertdialog');
+    box.setAttribute('aria-modal', 'true');
+    const title = document.createElement('div');
+    title.className = 'dc-confirm-title';
+    title.textContent = opts?.title ?? 'Are you sure?';
+    const body = document.createElement('div');
+    body.className = 'dc-confirm-body';
+    body.textContent = message;
+    const row = document.createElement('div');
+    row.className = 'dc-confirm-row';
+    const cancel = document.createElement('button');
+    cancel.type = 'button';
+    cancel.className = 'dc-confirm-btn';
+    cancel.textContent = opts?.cancelLabel ?? 'Cancel';
+    const ok = document.createElement('button');
+    ok.type = 'button';
+    ok.className = 'dc-confirm-btn dc-confirm-btn--primary';
+    ok.textContent = opts?.confirmLabel ?? 'Continue';
+    // a11y fix (review fan-out, 2026-07-21) — this is a raw DOM overlay, not a
+    // native <dialog>, so it must implement the two APG modal-dialog musts
+    // itself: (1) restore focus to whatever had it before the dialog opened
+    // (a hostile canvas can't spoof this — it's just where focus already was);
+    // (2) trap Tab/Shift+Tab inside the two buttons so it can't escape to
+    // background content (this overlay mounts in the canvas iframe's own
+    // document, so "background" is live, possibly-interactive artboard markup).
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+    const done = (v: boolean) => {
+      document.removeEventListener('keydown', onKey, true);
+      backdrop.remove();
+      try {
+        previouslyFocused?.focus();
+      } catch {
+        /* detached / no-op target — nothing to restore focus to */
+      }
+      resolve(v);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      // SECURITY — ignore script-dispatched events (isTrusted: false). This
+      // dialog mounts in the canvas iframe's own document (untrusted, DDR-054);
+      // without this, hostile canvas JS could synthesize a KeyboardEvent/Event
+      // to auto-confirm itself past the "irreversible convert" prompt.
+      if (!e.isTrusted) return;
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        done(false);
+      } else if (e.key === 'Enter') {
+        e.stopPropagation();
+        done(true);
+      } else if (e.key === 'Tab') {
+        // 2-element focus trap: Tab/Shift+Tab just toggles between the two
+        // buttons, never leaving the dialog.
+        e.preventDefault();
+        e.stopPropagation();
+        (document.activeElement === ok ? cancel : ok).focus();
+      }
+    };
+    cancel.addEventListener('click', (e) => {
+      if (!e.isTrusted) return;
+      done(false);
+    });
+    ok.addEventListener('click', (e) => {
+      if (!e.isTrusted) return;
+      done(true);
+    });
+    backdrop.addEventListener('click', (e) => {
+      if (!e.isTrusted) return;
+      if (e.target === backdrop) done(false);
+    });
+    document.addEventListener('keydown', onKey, true);
+    row.append(cancel, ok);
+    box.append(title, body, row);
+    backdrop.append(box);
+    document.body.append(backdrop);
+    ok.focus();
+  });
+}
+
 /** Show a brief auto-dismissing toast in the canvas (e.g. an upload failure). */
 export function showCanvasToast(message: string): void {
   if (typeof document === 'undefined') return;

package/apps/studio/use-element-resize.tsx

@@ -19,7 +19,9 @@
  *             resizes.
  *
  *             In-flow elements resize by writing explicit `width`/`height` only
- *             (NEVER convert-to-absolute — out of scope); an out-of-flow
+ *             (a resize NEVER implicitly converts to absolute; the explicit
+ *             context-menu "Convert children to absolute" — feature-4 T8,
+ *             DDR-188 — is the opt-in flatten path); an out-of-flow
  *             (absolute/fixed) element additionally moves `left`/`top` when the
  *             top/left edge is dragged, so the resize feels origin-correct.
  */

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-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);