@1agh/maude 0.60.5 → 0.60.6

package/apps/studio/test/mode-toggle.test.tsx

@@ -0,0 +1,226 @@
+// mode-toggle — DDR-223 (issue #93). The preview/edit mode layer over the
+// DDR-187 browse/move tool split: boot posture, the mode⇄tool invariant
+// (arming a resting tool moves the mode; annotation tools are mode-neutral),
+// resetTool, read-only preview boot, and the palette's segmented toggle.
+//
+// Needs a live DOM (context callbacks fired via act) — register happy-dom +
+// drive a createRoot, same convention as browse-posture.test.tsx.
+
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+  (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+});
+afterAll(() => {
+  GlobalRegistrator.unregister();
+});
+
+import { act, type ReactNode } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import type { Tool } from '../input-router.tsx';
+import { _resetReadOnlyCache } from '../read-only-mode.ts';
+import { ToolPalette } from '../tool-palette.tsx';
+import { type CanvasMode, ToolProvider, useToolMode } from '../use-tool-mode.tsx';
+
+// Capture the live context value so tests can drive setMode/setTool/resetTool
+// directly and assert the resulting (tool, mode) pair.
+let ctx: ReturnType<typeof useToolMode> | null = null;
+function Capture() {
+  ctx = useToolMode();
+  return null;
+}
+
+let root: Root | null = null;
+let host: HTMLElement | null = null;
+
+function mount(ui: ReactNode): void {
+  host = document.createElement('div');
+  document.body.appendChild(host);
+  root = createRoot(host);
+  act(() => {
+    root?.render(ui);
+  });
+}
+
+afterEach(() => {
+  act(() => {
+    root?.unmount();
+  });
+  host?.remove();
+  root = null;
+  host = null;
+  ctx = null;
+  _resetReadOnlyCache();
+  setPageUrl('http://localhost/');
+});
+
+// happy-dom: `history.replaceState` does not update `location.search`; the
+// DetachedWindowAPI `setURL` is the supported seam.
+function setPageUrl(url: string): void {
+  (window as unknown as { happyDOM?: { setURL?: (u: string) => void } }).happyDOM?.setURL?.(url);
+}
+
+const pair = (): { tool: Tool; mode: CanvasMode } => ({
+  tool: ctx?.tool as Tool,
+  mode: ctx?.mode as CanvasMode,
+});
+
+describe('mode-toggle / boot posture (DDR-223)', () => {
+  test('default boot = edit with move armed', () => {
+    mount(
+      <ToolProvider>
+        <Capture />
+      </ToolProvider>
+    );
+    expect(pair()).toEqual({ tool: 'move', mode: 'edit' });
+  });
+
+  test('initial="browse" boots preview (comment-mount specimen posture)', () => {
+    mount(
+      <ToolProvider initial="browse">
+        <Capture />
+      </ToolProvider>
+    );
+    expect(pair()).toEqual({ tool: 'browse', mode: 'preview' });
+  });
+
+  test('read-only (?ro=1) boots preview/browse — the DDR-187 viewer posture', () => {
+    setPageUrl('http://localhost/?ro=1');
+    _resetReadOnlyCache();
+    mount(
+      <ToolProvider>
+        <Capture />
+      </ToolProvider>
+    );
+    expect(pair()).toEqual({ tool: 'browse', mode: 'preview' });
+  });
+});
+
+describe('mode-toggle / mode⇄tool invariant', () => {
+  test('setMode arms the resting tool both ways', () => {
+    mount(
+      <ToolProvider>
+        <Capture />
+      </ToolProvider>
+    );
+    act(() => ctx?.setMode('preview'));
+    expect(pair()).toEqual({ tool: 'browse', mode: 'preview' });
+    act(() => ctx?.setMode('edit'));
+    expect(pair()).toEqual({ tool: 'move', mode: 'edit' });
+  });
+
+  test('arming a resting tool moves the mode (V / tool-set / escape hatch)', () => {
+    mount(
+      <ToolProvider>
+        <Capture />
+      </ToolProvider>
+    );
+    act(() => ctx?.setTool('browse'));
+    expect(pair()).toEqual({ tool: 'browse', mode: 'preview' });
+    // The Cmd+click-in-browse escape hatch is a plain setTool('move') at its
+    // call site — the invariant is what turns it into a coherent mode flip.
+    act(() => ctx?.setTool('move'));
+    expect(pair()).toEqual({ tool: 'move', mode: 'edit' });
+  });
+
+  test('annotation tools are mode-neutral — pen in preview stays preview', () => {
+    mount(
+      <ToolProvider initial="browse">
+        <Capture />
+      </ToolProvider>
+    );
+    act(() => ctx?.setTool('pen'));
+    expect(pair()).toEqual({ tool: 'pen', mode: 'preview' });
+    act(() => ctx?.setTool('comment'));
+    expect(pair()).toEqual({ tool: 'comment', mode: 'preview' });
+  });
+
+  test('resetTool arms the CURRENT mode’s resting tool', () => {
+    mount(
+      <ToolProvider initial="browse">
+        <Capture />
+      </ToolProvider>
+    );
+    // Preview: drawing an annotation then resetting returns to browse (the
+    // alive posture) — never to move.
+    act(() => ctx?.setTool('pen'));
+    act(() => ctx?.resetTool());
+    expect(pair()).toEqual({ tool: 'browse', mode: 'preview' });
+    // Edit: byte-identical to the pre-DDR-223 hardcoded setTool('move').
+    act(() => ctx?.setMode('edit'));
+    act(() => ctx?.setTool('pen'));
+    act(() => ctx?.resetTool());
+    expect(pair()).toEqual({ tool: 'move', mode: 'edit' });
+  });
+});
+
+describe('mode-toggle / palette segmented toggle', () => {
+  const mountPalette = () =>
+    mount(
+      <ToolProvider>
+        <Capture />
+        <ToolPalette />
+      </ToolProvider>
+    );
+  const seg = (which: 'preview' | 'edit' | 'present'): HTMLButtonElement | null =>
+    document.querySelector(`[data-testid="palette-mode-${which}"]`);
+
+  test('renders three icon segments; Edit is pressed on boot; no browse/move tool buttons', () => {
+    mountPalette();
+    expect(seg('preview')).not.toBeNull();
+    expect(seg('edit')?.getAttribute('aria-pressed')).toBe('true');
+    expect(seg('preview')?.getAttribute('aria-pressed')).toBe('false');
+    // Owner steer 2026-08-15 — icon-only segments (lucide eye / pencil-ruler /
+    // presentation); the words live in aria-label/title.
+    expect(seg('preview')?.querySelector('svg')).not.toBeNull();
+    expect(seg('edit')?.querySelector('svg')).not.toBeNull();
+    expect(seg('present')?.querySelector('svg')).not.toBeNull();
+    // The segments ARE the resting-tool affordances — no separate Select /
+    // Browse buttons in the nav group.
+    expect(document.querySelector('[aria-label^="Select (V)"]')).toBeNull();
+    expect(document.querySelector('[aria-label^="Browse ("]')).toBeNull();
+    // Present moved INTO the toggle — exactly one presentation affordance, and
+    // it is the segment (the palette's right-end button is gone).
+    const present = document.querySelectorAll('[aria-label^="Presentation mode"]');
+    expect(present.length).toBe(1);
+    expect(present[0]).toBe(seg('present') as Element);
+    expect(seg('present')?.getAttribute('aria-pressed')).toBe('false');
+  });
+
+  test('clicking Preview flips the posture; insert (+) is edit-only', () => {
+    mountPalette();
+    expect(
+      document.querySelector('[aria-label="Insert element — Div, Text, or Image"]')
+    ).not.toBeNull();
+    act(() => {
+      seg('preview')?.click();
+    });
+    expect(pair()).toEqual({ tool: 'browse', mode: 'preview' });
+    expect(seg('preview')?.getAttribute('aria-pressed')).toBe('true');
+    expect(
+      document.querySelector('[aria-label="Insert element — Div, Text, or Image"]')
+    ).toBeNull();
+    // Draw tools stay available in preview (issue #93: annotations in preview).
+    expect(document.querySelector('[aria-label^="Pen (B)"]')).not.toBeNull();
+    // And the Edit segment arms move again.
+    act(() => {
+      seg('edit')?.click();
+    });
+    expect(pair()).toEqual({ tool: 'move', mode: 'edit' });
+  });
+
+  test('clicking the ACTIVE segment re-arms the resting tool', () => {
+    mountPalette();
+    act(() => {
+      seg('preview')?.click();
+    });
+    act(() => ctx?.setTool('pen'));
+    expect(pair()).toEqual({ tool: 'pen', mode: 'preview' });
+    act(() => {
+      seg('preview')?.click();
+    });
+    expect(pair()).toEqual({ tool: 'browse', mode: 'preview' });
+  });
+});

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

@@ -7,6 +7,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import {
   DEFAULT_TOOLS,
   filterToolsForReadOnly,
+  MODE_DEFAULT_TOOL,
   ToolProvider,
   useToolMode,
   useToolModeOptional,
@@ -49,6 +50,11 @@ describe('use-tool-mode / static', () => {
     expect(Object.isFrozen(DEFAULT_TOOLS)).toBe(true);
   });
 
+  test('MODE_DEFAULT_TOOL — DDR-223 resting tools: preview→browse, edit→move', () => {
+    expect(MODE_DEFAULT_TOOL).toEqual({ preview: 'browse', edit: 'move' });
+    expect(Object.isFrozen(MODE_DEFAULT_TOOL)).toBe(true);
+  });
+
   test('cursors per tool (Phase 24 — ONE Kenney library for every tool + native fallback)', () => {
     const byId = Object.fromEntries(DEFAULT_TOOLS.map((t) => [t.id, t.cursor]));
     // Phase 24 — EVERY tool (incl. move) ships a Kenney data-URI SVG cursor that
@@ -97,16 +103,40 @@ describe('use-tool-mode / useToolModeOptional', () => {
 describe('use-tool-mode / SSR render', () => {
   test('ToolProvider with consumer renders without throwing', () => {
     function Consumer() {
-      const { tool } = useToolMode();
-      return <span data-tool={tool}>{tool}</span>;
+      const { tool, mode } = useToolMode();
+      return (
+        <span data-tool={tool} data-mode={mode}>
+          {tool}
+        </span>
+      );
     }
     const html = renderToStaticMarkup(
       <ToolProvider>
         <Consumer />
       </ToolProvider>
     );
-    // feature-4 — boot default is browse (the mock is alive until V is pressed).
+    // DDR-223 (issue #93) — boot posture is EDIT with the Move (select) tool
+    // armed; Preview (the DDR-187 alive posture) is one toggle away.
+    expect(html).toContain('data-tool="move"');
+    expect(html).toContain('data-mode="edit"');
+  });
+
+  test('ToolProvider initial="browse" boots the preview mode (comment-mount / specimens)', () => {
+    function Consumer() {
+      const { tool, mode } = useToolMode();
+      return (
+        <span data-tool={tool} data-mode={mode}>
+          {tool}
+        </span>
+      );
+    }
+    const html = renderToStaticMarkup(
+      <ToolProvider initial="browse">
+        <Consumer />
+      </ToolProvider>
+    );
     expect(html).toContain('data-tool="browse"');
+    expect(html).toContain('data-mode="preview"');
   });
 
   test('ToolProvider honors initial tool', () => {

package/apps/studio/tool-palette.tsx

@@ -16,7 +16,9 @@ import { useEffect, useRef, useState } from 'react';
 
 import {
   IconChevronDown,
+  IconEye,
   IconLetterA,
+  IconPencilRuler,
   IconPresentation,
   IconSquare,
   SHAPE_KIND_ICONS,
@@ -217,6 +219,10 @@ const PALETTE_CSS = `
   background: color-mix(in oklab, var(--maude-hud-accent, #d63b1f) 14%, transparent);
   color: var(--maude-hud-accent, #d63b1f);
 }
+/* DDR-223 — Preview/Edit/Present segmented mode toggle at the head of the
+   palette (owner steer 2026-08-15: icon segments — lucide eye / pencil-ruler /
+   presentation). Standard 32 × 32 buttons; active state reuses the
+   aria-pressed tint + underbar. */
 /* Stage I3 tail — "+ Element" insert popover. A vertical labeled list (not the
    shape popover's icon grid): Div/Text/Image have no recognizable glyph on
    their own, and this is a rare, must-be-legible action, not a recalled tool. */
@@ -257,9 +263,12 @@ function ensurePaletteStyles(): void {
   document.head.appendChild(s);
 }
 
-// feature-4 (browse/move split) — Browse leads the nav group (it's the boot
-// default), then Move (the select tool, V), Hand, Comment.
-const NAV_TOOLS = ['browse', 'move', 'hand', 'comment'] as const;
+// DDR-223 — the Preview/Edit segments replace BOTH resting-tool buttons in
+// the nav group: `browse` is armed by the Preview segment, `move` by the Edit
+// segment (clicking the active segment re-arms it; V and Esc still arm move
+// directly). Annotation tools render in BOTH modes (issue #93: preview keeps
+// annotations).
+const NAV_TOOLS = ['hand', 'comment'] as const;
 // Phase 24 — the two rect/ellipse buttons collapse into one Shape tool (with a
 // kind popover); sticky/arrow/text/eraser keep their order. Wave H — section
 // joins the row (it was ⇧S-only before; users couldn't discover it).
@@ -324,7 +333,18 @@ export function resolveInsertAnchor(
 
 export function ToolPalette() {
   ensurePaletteStyles();
-  const { tool, setTool, tools, sticky, toggleSticky, shapeKind, setShapeKind } = useToolMode();
+  const {
+    tool,
+    setTool,
+    tools,
+    mode,
+    setMode,
+    resetTool,
+    sticky,
+    toggleSticky,
+    shapeKind,
+    setShapeKind,
+  } = useToolMode();
   const chrome = useChromeVisibility();
   const [mounted, setMounted] = useState(false);
   const [shapeOpen, setShapeOpen] = useState(false);
@@ -484,8 +504,65 @@ export function ToolPalette() {
     );
   };
 
+  // DDR-223 — the mode toggle, three segments (owner steer 2026-08-15, round
+  // 2): Preview (eye), Edit (pencil-ruler), Present (presentation) — icon-only,
+  // the words live in aria-label + title. Clicking the ACTIVE Preview/Edit
+  // segment re-arms that mode's resting tool (the "get me out of the pen tool"
+  // gesture — especially in preview, where browse has no palette button of its
+  // own). Present is the existing SHELL-level state (enter-only — the palette
+  // is hidden while presenting; exit is Esc or the floating pill); it moved
+  // here from the palette's right end so all three "ways of looking at the
+  // canvas" sit in one control.
+  const renderModeToggle = () => (
+    // biome-ignore lint/a11y/useSemanticElements: segmented control of buttons, not a form — fieldset semantics (and its default box styling) don't apply
+    <div className="dc-tp-group dc-tp-mode" role="group" aria-label="Canvas mode">
+      <button
+        type="button"
+        data-testid="palette-mode-preview"
+        aria-label="Preview mode — the mock is live; annotation tools stay on"
+        aria-pressed={mode === 'preview'}
+        title="Preview — the mock is live (buttons click); annotation tools stay on"
+        onClick={() => (mode === 'preview' ? resetTool() : setMode('preview'))}
+      >
+        <IconEye />
+      </button>
+      <button
+        type="button"
+        data-testid="palette-mode-edit"
+        aria-label="Edit mode — click selects & edits, like Figma (V)"
+        aria-pressed={mode === 'edit'}
+        title="Edit — click selects & edits, like Figma (V)"
+        onClick={() => (mode === 'edit' ? resetTool() : setMode('edit'))}
+      >
+        <IconPencilRuler />
+      </button>
+      <button
+        type="button"
+        data-testid="palette-mode-present"
+        aria-label="Presentation mode — hide all chrome (Esc to exit)"
+        aria-pressed={chrome?.present ?? false}
+        title="Presentation mode — hide all chrome (Esc to exit)"
+        onClick={() => {
+          // Present Mode is a SHELL-level state (it hides the menubar /
+          // sidebar / panels too), so the canvas iframe requests it from the
+          // parent shell, which flips on `.is-present` + broadcasts
+          // dgn:'view-chrome' back down.
+          try {
+            window.parent.postMessage({ dgn: 'present-enter' }, '*');
+          } catch {
+            /* detached / cross-origin */
+          }
+        }}
+      >
+        <IconPresentation />
+      </button>
+    </div>
+  );
+
   return (
     <div ref={containerRef} className="dc-tool-palette" role="toolbar" aria-label="Canvas tools">
+      {renderModeToggle()}
+      <div className="dc-tp-sep" />
       <div className="dc-tp-group">
         {navList.map((t) => (t ? renderToolButton(t.id, t.label, t.shortcut) : null))}
       </div>
@@ -505,7 +582,9 @@ export function ToolPalette() {
       ) : null}
       <div className="dc-tp-sep" />
       <div className="dc-tp-group">
-        {!readOnly && (
+        {/* DDR-223 — "+ Element" is a JSX WRITE, an edit-mode affordance;
+            stickers/export/present stay in both modes. */}
+        {!readOnly && mode === 'edit' && (
           <span className="dc-tp-insert">
             <button
               type="button"
@@ -575,25 +654,8 @@ export function ToolPalette() {
             ⬇
           </span>
         </button>
-        <button
-          type="button"
-          aria-label="Presentation mode — hide all chrome"
-          title="Presentation mode — hide all chrome (Esc to exit)"
-          onClick={() => {
-            // Present Mode is a SHELL-level state (it hides the menubar /
-            // sidebar / panels too), so the canvas iframe requests it from the
-            // parent shell, which flips on `.is-present` + broadcasts
-            // dgn:'view-chrome' back down. Enter-only — the palette is hidden
-            // while presenting; exit is Esc or the floating pill.
-            try {
-              window.parent.postMessage({ dgn: 'present-enter' }, '*');
-            } catch {
-              /* detached / cross-origin */
-            }
-          }}
-        >
-          <IconPresentation />
-        </button>
+        {/* DDR-223 addendum 2 — the Presentation button moved into the mode
+            toggle at the palette's head (third segment). */}
       </div>
     </div>
   );

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

@@ -44,14 +44,42 @@ export interface ToolDescriptor {
  */
 export type ShapeKind = 'square' | 'rounded' | 'circle' | 'diamond' | 'triangle' | 'triangle-down';
 
+/**
+ * DDR-223 (issue #93) — the binary canvas mode over the tool set. `preview`
+ * rests on `browse` (pure pass-through, the mock is alive; annotation tools
+ * stay usable); `edit` rests on `move` (the Figma select ladder). The mode is
+ * a store-level layer — `classify()` and every `tool === 'move'` gate are
+ * untouched (DDR-187's decomposition stands).
+ */
+export type CanvasMode = 'preview' | 'edit';
+
+/** The resting tool each mode arms (and returns to via `resetTool`). */
+export const MODE_DEFAULT_TOOL: Readonly<Record<CanvasMode, Tool>> = Object.freeze({
+  preview: 'browse',
+  edit: 'move',
+});
+
+/**
+ * Mode implied by arming a mode-exclusive resting tool. `browse` and `move`
+ * are the only mode-carrying tools; everything else (comment, draw set) is
+ * mode-NEUTRAL — arming pen in preview keeps you in preview (the issue-#93
+ * "annotations work in preview" contract).
+ */
+function modeForTool(t: Tool): CanvasMode | null {
+  if (t === 'browse') return 'preview';
+  if (t === 'move') return 'edit';
+  return null;
+}
+
 // Phase 21 — every tool ships a custom 32×32 SVG cursor (canvas-cursors.ts)
 // with a white outline halo so the glyph reads on any background. The native
 // 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([
-  // 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.
+  // feature-4 — Browse is the pure pass-through tool: the mock is alive
+  // (buttons click). Since DDR-223 it is the PREVIEW mode's resting tool (the
+  // boot default moved to edit/`move`); no letter shortcut — it's armed via
+  // the Preview toggle / Esc-in-preview.
   { 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 },
@@ -91,6 +119,14 @@ interface ToolContextValue {
   tool: Tool;
   setTool: (t: Tool) => void;
   tools: readonly ToolDescriptor[];
+  /** DDR-223 — the binary canvas mode. Kept coherent with `tool` (arming
+   *  `move`/`browse` moves the mode; `setMode` arms the mode's resting tool). */
+  mode: CanvasMode;
+  setMode: (m: CanvasMode) => void;
+  /** Arm the current mode's resting tool — the Esc / post-draw-commit flip.
+   *  `move` in edit (byte-identical to the pre-DDR-223 hardcode), `browse` in
+   *  preview (drawing an annotation never silently exits the alive posture). */
+  resetTool: () => void;
   /** T19 — sticky-tool double-click lock. When `sticky.locked === true` AND
    *  `sticky.tool === tool`, draw tools stay armed after each shape commit
    *  (T18 auto-flip is suppressed). Single-click on any other tool clears
@@ -111,23 +147,33 @@ const ToolContext = createContext<ToolContextValue | null>(null);
 export function ToolProvider({
   children,
   tools: toolsProp = DEFAULT_TOOLS,
-  // 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',
+  // DDR-223 (issue #93, supersedes DDR-187's boot half) — authoring surfaces
+  // boot into EDIT with `move` (V) armed: click-selects from the first frame,
+  // Preview (the alive pass-through posture) is one always-visible toggle
+  // away. Read-only canvases (cloud viewers) keep the DDR-187 posture and
+  // boot preview/`browse` — a viewer's job is to use the live mock. The
+  // comment-mount layer passes `initial='browse'` explicitly so bare DS
+  // specimens stay alive too.
+  initial,
+  initialMode,
 }: {
   children: ReactNode;
   tools?: readonly ToolDescriptor[];
   initial?: Tool;
+  initialMode?: CanvasMode;
 }) {
   // Cloud Phase 25 C2 — a read-only canvas keeps only navigate/inspect tools.
   // Filtering HERE covers every consumer at once: the palette renders from
   // `tools`, the input router's letter shortcuts resolve against `tools`, and
   // `setTool` below refuses anything outside the list (the shell `tool-set`
   // postMessage lane included).
-  const tools = useMemo(() => filterToolsForReadOnly(toolsProp, isReadOnlyCanvas()), [toolsProp]);
-  const [tool, setToolState] = useState<Tool>(initial);
+  const readOnly = isReadOnlyCanvas();
+  const tools = useMemo(() => filterToolsForReadOnly(toolsProp, readOnly), [toolsProp, readOnly]);
+  const bootTool: Tool = initial ?? (readOnly ? 'browse' : 'move');
+  const bootMode: CanvasMode =
+    initialMode ?? modeForTool(bootTool) ?? (readOnly ? 'preview' : 'edit');
+  const [tool, setToolState] = useState<Tool>(bootTool);
+  const [mode, setModeState] = useState<CanvasMode>(bootMode);
   const [sticky, setSticky] = useState<{ tool: Tool | null; locked: boolean }>(() => ({
     tool: null,
     locked: false,
@@ -138,12 +184,39 @@ export function ToolProvider({
       // shortcut or postMessage can't arm a tool the palette doesn't show.
       if (!tools.some((d) => d.id === t)) return;
       setToolState(t);
+      // DDR-223 — mode⇄tool invariant: arming a resting tool moves the mode
+      // with it, so V, the menubar `tool-set` lane, and the Cmd+click-in-
+      // browse escape hatch all land in EDIT coherently (and arming browse
+      // lands in PREVIEW). Annotation tools leave the mode alone. This is
+      // also what keeps `move` structurally unreachable inside preview — the
+      // moment it arms, the mode is edit, so no `tool === 'move'` gate can
+      // ever fire while the UI claims preview.
+      const m = modeForTool(t);
+      if (m) setModeState(m);
       // Single-click on a different tool clears any sticky lock — sticky is
       // a per-tool flag, not global.
       setSticky((prev) => (prev.locked && prev.tool === t ? prev : { tool: null, locked: false }));
     },
     [tools]
   );
+  const setMode = useCallback(
+    (m: CanvasMode) => {
+      // Switching mode arms its resting tool (Figma-style: the toggle IS the
+      // posture). Read-only keeps both browse+move on its allowlist, so the
+      // guard below never fires there; it exists for exotic custom `tools`.
+      const rest = MODE_DEFAULT_TOOL[m];
+      if (!tools.some((d) => d.id === rest)) return;
+      setModeState(m);
+      setToolState(rest);
+      setSticky((prev) =>
+        prev.locked && prev.tool === rest ? prev : { tool: null, locked: false }
+      );
+    },
+    [tools]
+  );
+  const resetTool = useCallback(() => {
+    setTool(MODE_DEFAULT_TOOL[mode]);
+  }, [mode, setTool]);
   const toggleSticky = useCallback((t: Tool) => {
     setSticky((prev) => {
       if (prev.locked && prev.tool === t) return { tool: null, locked: false };
@@ -227,8 +300,20 @@ export function ToolProvider({
   }, [tool, tools]);
 
   const value = useMemo<ToolContextValue>(
-    () => ({ tool, setTool, tools, sticky, toggleSticky, clearSticky, shapeKind, setShapeKind }),
-    [tool, setTool, tools, sticky, toggleSticky, clearSticky, shapeKind]
+    () => ({
+      tool,
+      setTool,
+      tools,
+      mode,
+      setMode,
+      resetTool,
+      sticky,
+      toggleSticky,
+      clearSticky,
+      shapeKind,
+      setShapeKind,
+    }),
+    [tool, setTool, tools, mode, setMode, resetTool, sticky, toggleSticky, clearSticky, shapeKind]
   );
 
   return <ToolContext.Provider value={value}>{children}</ToolContext.Provider>;
@@ -240,10 +325,24 @@ export function ToolProvider({
  * `DesignCanvas` consumes that instance instead of double-mounting. The hook
  * is called unconditionally; only the returned tree branches (hook rules).
  */
-export function MaybeToolProvider({ children }: { children: ReactNode }) {
+export function MaybeToolProvider({
+  children,
+  initial,
+  initialMode,
+}: {
+  children: ReactNode;
+  /** DDR-223 — forwarded so the comment-mount layer can pin bare DS
+   *  specimens to the preview/`browse` posture (see canvas-comment-mount). */
+  initial?: Tool;
+  initialMode?: CanvasMode;
+}) {
   const outer = useContext(ToolContext);
   if (outer) return <>{children}</>;
-  return <ToolProvider>{children}</ToolProvider>;
+  return (
+    <ToolProvider initial={initial} initialMode={initialMode}>
+      {children}
+    </ToolProvider>
+  );
 }
 
 // ─────────────────────────────────────────────────────────────────────────────

package/apps/studio/whats-new.json

@@ -1,6 +1,33 @@
 {
   "$schema": "./whats-new.schema.json",
   "entries": [
+    {
+      "id": "assets-arrive-and-heal",
+      "version": "0.60.6",
+      "date": "2026-08-15",
+      "kind": "fix",
+      "title": "Dropped images reach every machine, live",
+      "summary": "A picture added on one machine now arrives on your others while you watch: the cloud serves it the moment it has it, and a broken-image frame heals in place when the file lands — no reload needed.",
+      "surface": "design-ui"
+    },
+    {
+      "id": "preview-edit-mode-toggle",
+      "version": "0.60.6",
+      "date": "2026-08-15",
+      "kind": "feature",
+      "title": "Preview, Edit and Present in one switch",
+      "summary": "Canvases open in Edit — clicking selects right away, like Figma. A new three-way switch in the toolbar flips to Preview (the mock is live and clickable; comments and drawing still work) or straight into Presentation.",
+      "surface": "design-ui"
+    },
+    {
+      "id": "desktop-splash-recovers-itself",
+      "version": "0.60.6",
+      "date": "2026-08-15",
+      "kind": "fix",
+      "title": "No more getting stuck on “Starting…”",
+      "summary": "The desktop app could go black and sit on the startup screen for good — often right after a command finished — with a force-quit as the only way out. It now finds its way back on its own, in about a second, and keeps your session instead of losing it.",
+      "surface": "desktop"
+    },
     {
       "id": "annotations-survive-cold-start",
       "version": "0.60.5",