@1agh/maude 0.60.5 → 0.60.7

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/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

@@ -917,6 +917,21 @@ export interface ViewportControllerHandle {
   isInteracting: boolean;
 }
 
+// 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.
@@ -1412,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).
@@ -1422,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;
@@ -1432,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

@@ -2433,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();
@@ -3269,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';