@1agh/maude 0.60.4 → 0.60.6

package/apps/studio/annotations-layer.tsx

@@ -956,7 +956,7 @@ function scaleStrokeInGroup(
 export function AnnotationsLayer() {
   countRender('annotationRenders');
   ensureAnnotStyles();
-  const { tool, setTool, sticky, tools, shapeKind } = useToolMode();
+  const { tool, setTool, resetTool, sticky, tools, shapeKind } = useToolMode();
   const theme = useCanvasChromeTheme();
   const controller = useViewportControllerContext();
   const vp = controller?.viewport ?? null;
@@ -2008,7 +2008,9 @@ export function AnnotationsLayer() {
           setEditCaretPoint({ x: e.clientX, y: e.clientY });
           setEditingId(strokeId);
           if (annotSel) annotSel.replace(strokeId);
-          setTool('move');
+          // DDR-223 — back to the MODE's resting tool (move in edit, browse in
+          // preview): editing a text annotation shouldn't exit preview.
+          resetTool();
           return true;
         }
         const editableTarget = findEditableElementAt(e.clientX, e.clientY);
@@ -2020,7 +2022,7 @@ export function AnnotationsLayer() {
             showCanvasToast(
               'This text is filled in from code (a variable) — edit it via chat or /design:edit.'
             );
-            setTool('move');
+            resetTool();
             return true;
           }
           document.dispatchEvent(
@@ -2028,6 +2030,9 @@ export function AnnotationsLayer() {
               detail: { el: editableTarget, clientX: e.clientX, clientY: e.clientY },
             })
           );
+          // Deliberately `move`, not `resetTool` — editing ARTBOARD content is
+          // an edit-mode activity, so this one flips to edit even from preview
+          // (DDR-223 mode⇄tool sync).
           setTool('move');
           return true;
         }
@@ -2037,7 +2042,7 @@ export function AnnotationsLayer() {
         setPendingText({ x: wx, y: wy });
         if (annotSel) annotSel.clear();
         const stickyOnText = sticky.locked && sticky.tool === 'text';
-        if (!stickyOnText) setTool('move');
+        if (!stickyOnText) resetTool();
         return true;
       }
       return true;
@@ -2061,6 +2066,7 @@ export function AnnotationsLayer() {
       annotSel,
       sticky,
       setTool,
+      resetTool,
     ]
   );
 
@@ -2209,21 +2215,24 @@ export function AnnotationsLayer() {
         showOnceHint('chain', '⌘Enter commits and creates the next one beside it.');
       }
     }
-    // T18 / T19 — flip the tool back to Move after every commit UNLESS sticky
-    // mode is locked on this tool. Sticky lets the user draw many shapes in a
-    // row (canonical pattern: tldraw double-click to lock). Eraser stays
-    // armed by default — that tool is destructive, not constructive.
-    // Map a highlighter pen (a 'pen' stroke with the flag) back to the
-    // 'highlighter' tool id so its sticky-lock check matches the active tool.
+    // T18 / T19 — flip the tool back to the MODE's resting tool after every
+    // commit UNLESS sticky mode is locked on this tool (DDR-223: move in edit
+    // — byte-identical to the old hardcode — browse in preview, so drawing an
+    // annotation never silently exits the alive posture). Sticky lets the user
+    // draw many shapes in a row (canonical pattern: tldraw double-click to
+    // lock). Eraser stays armed by default — that tool is destructive, not
+    // constructive. Map a highlighter pen (a 'pen' stroke with the flag) back
+    // to the 'highlighter' tool id so its sticky-lock check matches the
+    // active tool.
     const toolJustUsed = cur.tool === 'pen' && cur.highlighter ? 'highlighter' : cur.tool;
     if (toolJustUsed !== 'eraser') {
       const stickyOnThis = sticky.locked && sticky.tool === toolJustUsed;
-      if (!stickyOnThis) setTool('move');
+      if (!stickyOnThis) resetTool();
     }
     drawAnchorRef.current = null;
     lastDrawPointRef.current = null;
     setDrawing(null);
-  }, [isActive, isErase, visible, commitStrokes, annotSel, setTool, sticky]);
+  }, [isActive, isErase, visible, commitStrokes, annotSel, resetTool, sticky]);
 
   // T21 — abort a mid-stroke draw without committing. Dispatched by the
   // canvas-shell Esc handler (`maude:cancel-stroke`). Safe to call when

package/apps/studio/api.ts

@@ -1499,11 +1499,14 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
   // shared `.meta.json` document. It lives in `_canvas-state/<slug>.view.json`
   // ({ viewport }) — gitignored, swept on delete, export-excluded. DISTINCT from
   // the legacy `_canvas-state/<slug>.json` ({ sections, viewport:{x,y,scale} })
-  // store: that uses `scale` clamped 0.05–8, this uses `zoom` clamped 0.1–4, so
+  // store: that uses `scale` clamped 0.05–8, this uses `zoom` clamped 0.02–4, so
   // overloading one file would let the two writers clobber each other's shape.
 
-  /** Validate a candidate viewport — finite x/y, zoom clamped [0.1, 4] (the
-   *  Phase 4 rule). Returns the normalized viewport, or null when invalid. */
+  /** Validate a candidate viewport — finite x/y, zoom clamped [0.02, 4] (the
+   *  Phase 4 rule). Mirrors `ZOOM_MIN` in canvas-lib.tsx (issue #91) — keep the
+   *  two floors in lockstep or a save/reload round-trip silently re-clamps a
+   *  zoom the client just let the user reach. Returns the normalized viewport,
+   *  or null when invalid. */
   function normalizeViewport(v: unknown): { x: number; y: number; zoom: number } | null {
     if (!v || typeof v !== 'object' || Array.isArray(v)) return null;
     const vv = v as { x?: unknown; y?: unknown; zoom?: unknown };
@@ -1512,7 +1515,7 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       Number.isFinite(vv.y as number) &&
       Number.isFinite(vv.zoom as number)
     ) {
-      const zoom = Math.min(4, Math.max(0.1, vv.zoom as number));
+      const zoom = Math.min(4, Math.max(0.02, vv.zoom as number));
       return { x: vv.x as number, y: vv.y as number, zoom };
     }
     return null;
@@ -1571,6 +1574,41 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     return [...new Set(out)];
   }
 
+  // Issue #91 security follow-up — `layout.artboards[]` (DDR-027 position-only
+  // entries) is reachable from the untrusted canvas origin (DDR-054) via the
+  // same PATCH lane as overlays/locked above, but previously had no count or
+  // magnitude bound. `fit()`/`computeFit` (canvas-lib.tsx) now correctly frames
+  // whatever bounding box this describes — before the zoom-floor fix, a hard
+  // 0.1 zoom clamp accidentally masked an unbounded layout into a cropped,
+  // mismatched view; after it, an oversized synced layout can legitimately be
+  // framed whole, promoting every artboard in it to its own GPU layer at once
+  // (canvas-lib.tsx `content-visibility` comment). Cap count + coordinate
+  // magnitude the same way `normalizeOverlays`/`normalizeLocked` cap theirs.
+  const MAX_LAYOUT_ARTBOARDS = 2000;
+  const MAX_LAYOUT_COORD = 1_000_000;
+
+  function normalizeLayoutArtboards(
+    v: unknown
+  ): Array<{ id: string; x: number; y: number }> | null {
+    if (!Array.isArray(v) || v.length > MAX_LAYOUT_ARTBOARDS) return null;
+    const out: Array<{ id: string; x: number; y: number }> = [];
+    for (const entry of v) {
+      if (!entry || typeof entry !== 'object' || Array.isArray(entry)) return null;
+      const e = entry as { id?: unknown; x?: unknown; y?: unknown };
+      if (typeof e.id !== 'string' || e.id.length === 0 || e.id.length > 128) return null;
+      if (
+        !Number.isFinite(e.x as number) ||
+        !Number.isFinite(e.y as number) ||
+        Math.abs(e.x as number) > MAX_LAYOUT_COORD ||
+        Math.abs(e.y as number) > MAX_LAYOUT_COORD
+      ) {
+        return null;
+      }
+      out.push({ id: e.id, x: e.x as number, y: e.y as number });
+    }
+    return out;
+  }
+
   /** Raw view-file contents, tolerant of a missing/corrupt file (→ `{}`) — the
    *  read half of the read-modify-write both `saveCanvasView` and
    *  `saveCanvasOverlays` need so writing one lane never clobbers the other. */
@@ -1819,7 +1857,18 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       if (patch.layout === null) {
         next.layout = undefined;
       } else if (typeof patch.layout === 'object' && !Array.isArray(patch.layout)) {
-        next.layout = patch.layout;
+        const rawLayout = patch.layout as Record<string, unknown>;
+        if ('artboards' in rawLayout) {
+          // Bounded — see normalizeLayoutArtboards. An oversized/malformed
+          // `artboards` array is a silent no-op (leaves the prior persisted
+          // layout in place), matching the overlays/locked lanes' convention.
+          const artboards = normalizeLayoutArtboards(rawLayout.artboards);
+          if (artboards !== null) {
+            next.layout = { ...rawLayout, artboards };
+          }
+        } else {
+          next.layout = patch.layout;
+        }
       }
       // Defensive: a stale inline viewport must never persist in the versioned
       // file (the camera lane owns it now). JSON.stringify drops undefined keys.

package/apps/studio/build.ts

@@ -353,6 +353,16 @@ export function writeCompileEntry(target: PlatformTarget): string {
 // Side-effect module: must be imported BEFORE any oxc-parser usage.
 import bindingPath from ${JSON.stringify(bindingSpec)} with { type: 'file' };
 process.env.NAPI_RS_NATIVE_LIBRARY_PATH = bindingPath;
+// DDR-177 — a compiled binary must be self-contained: every runtime-spawned
+// child (canvas-build worker, asset-sweep worker) resolves its JS runtime via
+// resolveBunPath() = MAUDE_BUN_PATH || 'bun'. The desktop app launches this
+// binary with a GUI PATH that has no 'bun', and NOTHING set MAUDE_BUN_PATH —
+// so the asset sweep died with "Executable not found in $PATH" on machines
+// without a user-installed bun. Default it to THIS binary: workerEnv() adds
+// BUN_BE_BUN=1 when MAUDE_BUN_PATH === process.execPath, so children re-enter
+// the sidecar as a plain JS runtime. An explicit launcher-set value (the
+// cell's studio-child.mjs) still wins.
+process.env.MAUDE_BUN_PATH ||= process.execPath;
 `;
   writeFileSync(initPath, initContent);
 

package/apps/studio/canvas-comment-mount.tsx

@@ -496,7 +496,13 @@ export interface MountCanvasOptions {
 function buildCanvasTree(Canvas: ComponentType, file: string | undefined): ReactNode {
   return createElement(
     MaybeToolProvider,
-    null,
+    // DDR-223 — this layer's provider instance keeps the DDR-187 posture:
+    // bare DS specimens stay ALIVE with native cursors (there is no palette,
+    // no editing, nothing to boot into edit for). On a UI canvas the inner
+    // canvas-lib ToolProvider (a separate bundle, separate context) owns the
+    // real boot posture (edit/`move`); this ancestor instance only carries the
+    // comment tool + claim layer and converges on the first tool keydown.
+    { initial: 'browse' as const },
     createElement(
       MaybeSelectionSetProvider,
       null,

package/apps/studio/canvas-icons.tsx

@@ -52,6 +52,31 @@ export function IconBrowse(props: IconProps) {
   );
 }
 
+// DDR-223 addendum 2 — the Preview/Edit/Present toggle glyphs (owner steer
+// 2026-08-15): lucide `eye` + `pencil-ruler` (ISC), redrawn in the house
+// 24 × 24 / 1.75-stroke language. Mode segments deliberately do NOT reuse tool
+// glyphs — a mode is a way of looking at the canvas, not a recalled tool.
+export function IconEye(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
+      <circle cx="12" cy="12" r="3" />
+    </Svg>
+  );
+}
+export function IconPencilRuler(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13" />
+      <path d="m8 6 2-2" />
+      <path d="m18 16 2-2" />
+      <path d="m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17" />
+      <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+      <path d="m15 5 4 4" />
+    </Svg>
+  );
+}
+
 export function IconHand(props: IconProps) {
   return (
     <Svg {...props}>
@@ -146,11 +171,14 @@ export function IconLink(props: IconProps) {
   );
 }
 
+// DDR-223 addendum 2 — redrawn to the lucide `presentation` glyph so the three
+// mode-segment icons (eye / pencil-ruler / presentation) read as one family.
 export function IconPresentation(props: IconProps) {
   return (
     <Svg {...props}>
-      <rect x="3" y="4" width="18" height="12" rx="1.5" />
-      <path d="M9 21l3-5 3 5" />
+      <path d="M2 3h20" />
+      <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" />
+      <path d="m7 21 5-5 5 5" />
     </Svg>
   );
 }

package/apps/studio/canvas-lib.tsx

@@ -214,7 +214,15 @@ export function AIPlaceholder({
 // ─────────────────────────────────────────────────────────────────────────────
 // Module constants
 
-const ZOOM_MIN = 0.1;
+// Issue #91 — was 0.1. A board spanning more world units than ~10x the
+// viewport could never be framed whole: `fit()` and manual zoom-out both
+// funnel through `clampZoom` (below), so the old floor blocked "fit to
+// screen" from ever reaching the zoom a wide board actually needs. 0.02
+// matches the interactive floor other canvas tools (Figma, tldraw) ship.
+// Keep in lockstep with the mirror clamp in `api.ts`'s `normalizeViewport`
+// (the per-machine camera persisted to `_canvas-state/<slug>.view.json`,
+// DDR-115) — that one re-clamps on save/reload independently of this file.
+const ZOOM_MIN = 0.02;
 const ZOOM_MAX = 4.0;
 const ZOOM_STEP_IN = 1.2;
 const ZOOM_STEP_OUT = 1 / 1.2;
@@ -685,7 +693,9 @@ function synthDefaultGrid(seeds: ArtboardSeed[]): ArtboardRect[] {
   });
 }
 
-function computeFit(rects: ArtboardRect[], hostEl: HTMLElement, pad = 24): ViewportState {
+// Exported for the same reason as `clampZoom` above — lets a unit test prove
+// the raw fit computation for a wide board isn't what's clamping the zoom.
+export function computeFit(rects: ArtboardRect[], hostEl: HTMLElement, pad = 24): ViewportState {
   if (rects.length === 0) return { x: 0, y: 0, zoom: 1 };
   let xMin = Number.POSITIVE_INFINITY;
   let yMin = Number.POSITIVE_INFINITY;
@@ -907,7 +917,25 @@ export interface ViewportControllerHandle {
   isInteracting: boolean;
 }
 
-function clampZoom(z: number): number {
+// Issue #94 — wheel pan used raw WheelEvent deltas as CSS pixels, but the
+// Wheel Events spec lets a browser report deltas in three different units
+// (`deltaMode`): pixel (0, trackpads and most Chromium mice), line (1,
+// Firefox's default for physical mice — one notch is a small integer like
+// 3), or page (2). Consuming a line-mode `3` as 3px of pan per notch is why
+// wheel-driven panning read as "very slow" while trackpad panning (already
+// pixel-mode) felt fine. LINES_TO_PIXELS mirrors the pixels-per-line browsers
+// themselves use for native line-scrolling at default font size.
+const LINES_TO_PIXELS = 16;
+export function wheelDeltaToPixels(delta: number, deltaMode: number, pageSize: number): number {
+  if (deltaMode === 1) return delta * LINES_TO_PIXELS; // DOM_DELTA_LINE
+  if (deltaMode === 2) return delta * pageSize; // DOM_DELTA_PAGE
+  return delta; // DOM_DELTA_PIXEL (0) — already pixels
+}
+
+// Exported (like `revealAxisDelta` in canvas-shell.tsx) so a pure-logic unit
+// test can pin the zoom floor without booting the DOM/host-dependent
+// viewport controller.
+export function clampZoom(z: number): number {
   if (!Number.isFinite(z)) return 1;
   return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, z));
 }
@@ -1399,6 +1427,13 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
       const rect = host.getBoundingClientRect();
       const cx = e.clientX - rect.left;
       const cy = e.clientY - rect.top;
+      // Normalize line/page-mode deltas to pixels before anything below
+      // reads them — see `wheelDeltaToPixels` (issue #94). Zoom's own
+      // [-50, 50] clamp already absorbed this for the pinch/ctrl+wheel path,
+      // but pan had no such clamp so a line-mode mouse wheel panned at only
+      // a few px per notch.
+      const dx = wheelDeltaToPixels(e.deltaX, e.deltaMode, host.clientWidth);
+      const dy = wheelDeltaToPixels(e.deltaY, e.deltaMode, host.clientHeight);
       // Mac trackpad pinch fires wheel with ctrlKey:true automatically, even
       // without a physical Ctrl press — so the same branch covers both
       // Ctrl+wheel (mouse) and pinch-zoom (trackpad).
@@ -1409,7 +1444,7 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
         // notch = ±100) onto the same perceived-speed curve. Mouse-wheel
         // users still get smooth zoom (clamped notches accumulate at the
         // same exp rate), trackpad-pinch users no longer outpace them.
-        const clamped = Math.max(-50, Math.min(50, e.deltaY));
+        const clamped = Math.max(-50, Math.min(50, dy));
         const factor = Math.exp(-clamped * WHEEL_ZOOM_K);
         zoomAt(factor, cx, cy);
         return;
@@ -1419,14 +1454,14 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
       // doesn't, Safari sometimes does); some don't. Read whichever axis
       // actually carries energy so the gesture lands horizontally either way.
       if (e.shiftKey) {
-        const d = Math.abs(e.deltaY) >= Math.abs(e.deltaX) ? e.deltaY : e.deltaX;
+        const d = Math.abs(dy) >= Math.abs(dx) ? dy : dx;
         panBy(-d, 0);
         return;
       }
       // Default: trackpad two-finger scroll → 2D pan. The negation keeps the
       // "content follows your fingers" mapping (Mac natural scroll). Mouse
       // wheels with only deltaY pan vertically.
-      panBy(-e.deltaX, -e.deltaY);
+      panBy(-dx, -dy);
     };
 
     // Safari/WKWebView-only trackpad pinch. WebKit exposes the native pinch via

package/apps/studio/canvas-shell.tsx

@@ -67,15 +67,13 @@ import {
 import { ContextualToolbar } from './contextual-toolbar.tsx';
 import { CursorsOverlay } from './cursors-overlay.tsx';
 import {
+  buildComposeSelection,
   cssPath,
   deriveFile,
-  domPath,
   hoverTargetToSelection,
+  openCommentComposer,
   realClasses,
   resolveSelectionEl,
-  scopedCdSelector,
-  selectorIndex,
-  shortText,
 } from './dom-selection.ts';
 import { setElementDragActive } from './drag-state.ts';
 import { EqualSpacingHandles } from './equal-spacing-handles.tsx';
@@ -1378,33 +1376,17 @@ function buildRegistry(deps: {
     });
   };
 
+  // issue-90 — right-click "Add comment" (element / artboard-chrome / world)
+  // used to only postMessage the parent shell, which merely mirrors the
+  // target for the StatusBar/sidebar; it never dispatched `cm:open-composer`,
+  // the event `comments-overlay.tsx` actually listens on to open the
+  // composer. Selecting the menu item did nothing. `openCommentComposer`
+  // sends both, matching the working comment-tool-click path
+  // (canvas-comment-mount.tsx's `dropComment`).
   const postComposeForTarget = (target: ContextTarget): void => {
     if (typeof window === 'undefined') return;
-    const composeSelector = target.cdId
-      ? scopedCdSelector(target.cdId, target.artboardId)
-      : cssPath(target.el);
-    const sel: Selection | null = target.el
-      ? {
-          file: deriveFile(),
-          id: target.cdId ?? undefined,
-          selector: composeSelector,
-          artboardId: target.artboardId,
-          index: target.cdId ? selectorIndex(document, composeSelector, target.el) : 0,
-          tag: target.el.tagName.toLowerCase(),
-          classes: realClasses(target.el),
-          text: shortText(target.el, 240),
-          dom_path: domPath(target.el),
-          bounds: (target.el as HTMLElement).getBoundingClientRect
-            ? boundsOf(target.el as HTMLElement)
-            : null,
-          html: (target.el.outerHTML ?? '').slice(0, 4000),
-        }
-      : null;
-    try {
-      window.parent.postMessage({ dgn: 'comment-compose', selection: sel }, '*');
-    } catch {
-      /* ignore */
-    }
+    const sel = buildComposeSelection(target, target.clientX, target.clientY);
+    openCommentComposer(sel, target.clientX, target.clientY);
   };
 
   const fitItem: MenuItem = {
@@ -2141,6 +2123,18 @@ function buildRegistry(deps: {
       ],
     ],
     'artboard-chrome': [
+      [
+        // issue-90 — right-click on an artboard's own label/border chrome
+        // (outside its body, where `data-cd-id` never resolves) had no
+        // "Add comment" entry at all; only a hit inside the body counted as
+        // `element`. Anchors at the click point (no element under it).
+        {
+          id: 'add-comment',
+          label: 'Add comment',
+          shortcut: 'C',
+          onSelect: postComposeForTarget,
+        },
+      ],
       [
         {
           id: 'fit-one',
@@ -2273,6 +2267,17 @@ function buildRegistry(deps: {
       [exportItem('export-artboard', 'Export this artboard…', 'artboard')],
     ],
     world: [
+      // issue-90 — right-click on empty canvas background (no artboard, no
+      // element) had no "Add comment" entry at all. Anchors at the click
+      // point, same as the comment tool's own floating-pin fallback.
+      [
+        {
+          id: 'add-comment',
+          label: 'Add comment',
+          shortcut: 'C',
+          onSelect: postComposeForTarget,
+        },
+      ],
       [fitItem, resetItem],
       [
         exportItem('export-canvas', 'Export canvas as separate…', 'canvas-as-separate'),
@@ -2320,16 +2325,6 @@ function filterRegistryForReadOnly(registry: ContextRegistry): ContextRegistry {
   return out;
 }
 
-function boundsOf(el: HTMLElement) {
-  const r = el.getBoundingClientRect();
-  return {
-    x: Math.round(r.left),
-    y: Math.round(r.top),
-    w: Math.round(r.width),
-    h: Math.round(r.height),
-  };
-}
-
 // ─────────────────────────────────────────────────────────────────────────────
 // Task A1 (feature-element-editing-robustness) — camera-aware reveal.
 //
@@ -2438,7 +2433,7 @@ function CanvasRouter({
   distributeArtboards: (axis: 'x' | 'y') => void;
   alignArtboards: (mode: 'left' | 'right' | 'center-x' | 'top' | 'bottom' | 'center-y') => void;
 }) {
-  const { tool, setTool, clearSticky } = useToolMode();
+  const { tool, setTool, resetTool, clearSticky } = useToolMode();
   const selSet = useSelectionSet();
   const annotSel = useAnnotationSelection();
   const ctxMenu = useContextMenu();
@@ -3274,10 +3269,11 @@ function CanvasRouter({
         } catch {
           /* non-DOM env */
         }
-        // T19 — clear sticky-tool lock + flip back to Move. Esc is the
-        // canonical "back to default state" gesture across canvas apps.
+        // T19 — clear sticky-tool lock + flip back to the mode's resting tool
+        // (DDR-223: move in edit, browse in preview). Esc is the canonical
+        // "back to default state" gesture across canvas apps.
         clearSticky();
-        if (tool !== 'move') setTool('move');
+        resetTool();
         ctxMenu.close();
         selSet.clear();
         annotSel.clear();

package/apps/studio/client/app.jsx

@@ -370,16 +370,20 @@ function shellToast(message, ok = false, action) {
   );
 }
 
-// feature-4 (browse/move split, DDR-187) — one-time first-run teaching hint.
-// The boot default is `browse` (the mock is ALIVE — buttons click), so the
-// Figma muscle-memory gesture (plain click = select) does nothing until V is
-// pressed. Surface that ONCE, gated by a localStorage marker (same family as
-// `mdcc-whatsnew-seen`). Auto-dismisses; a V press (learned) clears it early.
-const BROWSE_HINT_SEEN = 'maude-browse-hint-seen';
+// DDR-223 (issue #93, supersedes DDR-187's boot half) — one-time first-run
+// teaching hint. Authoring canvases now boot into EDIT (`move`/V armed): click
+// selects like Figma, and the mock is inert until the Preview toggle flips the
+// alive posture back on. Teach exactly that ONCE, gated by a NEW localStorage
+// marker (`maude-mode-hint-seen` — deliberately not the old
+// `maude-browse-hint-seen`, which taught the opposite posture; every existing
+// user should see the new hint once). Read-only viewers still boot preview
+// (alive) and keep the DDR-187 wording. Auto-dismisses; the taught gesture
+// (V in read-only) clears it early.
+const MODE_HINT_SEEN = 'maude-mode-hint-seen';
 function browseFirstRunHint(readOnly = false) {
   if (typeof document === 'undefined' || typeof localStorage === 'undefined') return;
   try {
-    if (localStorage.getItem(BROWSE_HINT_SEEN) === '1') return;
+    if (localStorage.getItem(MODE_HINT_SEEN) === '1') return;
   } catch {
     return;
   }
@@ -393,18 +397,21 @@ function browseFirstRunHint(readOnly = false) {
     'font:12px/1.5 var(--font-ui,system-ui,sans-serif);background:var(--surface-2,#1b1e24);' +
     'color:var(--text-1,#e7eaf0);border:1px solid var(--border-1,#333a45);' +
     'box-shadow:0 10px 34px rgba(0,0,0,.42);opacity:0;transition:opacity 160ms ease;';
+  const kbd =
+    '<kbd style="padding:1px 6px;border-radius:5px;border:1px solid var(--border-1,#333a45);' +
+    'background:var(--surface-3,#262b33);font-family:var(--font-mono,monospace)">V</kbd>';
   el.innerHTML =
-    '<span>Your mock is <strong>live</strong> — click things to try it. ' +
-    'Press <kbd style="padding:1px 6px;border-radius:5px;border:1px solid var(--border-1,#333a45);' +
-    'background:var(--surface-3,#262b33);font-family:var(--font-mono,monospace)">V</kbd> ' +
     // Cloud Phase 25 C2 — a viewer selects to inspect, never to edit; the
     // hint must not promise an editor the role doesn't have.
-    (readOnly ? 'to select &amp; inspect.</span>' : 'to select &amp; edit like Figma.</span>') +
+    (readOnly
+      ? `<span>Your mock is <strong>live</strong> — click things to try it. Press ${kbd} to select &amp; inspect.</span>`
+      : '<span>You’re in <strong>Edit</strong> — click selects, like Figma. ' +
+        'Switch to <strong>Preview</strong> in the toolbar to use the live mock.</span>') +
     '<button type="button" aria-label="Dismiss" style="background:none;border:none;color:inherit;' +
     'cursor:pointer;font-size:15px;line-height:1;opacity:.65;padding:2px">×</button>';
   const dismiss = () => {
     try {
-      localStorage.setItem(BROWSE_HINT_SEEN, '1');
+      localStorage.setItem(MODE_HINT_SEEN, '1');
     } catch {
       /* private mode */
     }
@@ -416,7 +423,7 @@ function browseFirstRunHint(readOnly = false) {
     if ((e.key === 'v' || e.key === 'V') && !e.metaKey && !e.ctrlKey && !e.altKey) dismiss();
   };
   el.querySelector('button')?.addEventListener('click', dismiss);
-  document.addEventListener('keydown', onV, true);
+  if (readOnly) document.addEventListener('keydown', onV, true);
   document.body.appendChild(el);
   requestAnimationFrame(() => {
     el.style.opacity = '1';