@1agh/maude 0.19.0 → 0.19.1

package/plugins/design/dev-server/tool-palette.tsx

@@ -24,6 +24,9 @@ import { useToolMode } from './use-tool-mode.tsx';
 // 32 × 32 buttons with iconography. Grouped pill segments separated by 1 px
 // dividers — visual cue that nav / draw / view-controls are distinct kinds.
 
+// DDR-046 — floating chrome ambient shadow + 8 px radius (NOT brutalist).
+// Active-tool state: 14% tint bg + 2px accent underbar + accent fg, replacing
+// the previous full-accent flood (too loud at 32 × 32 in a quiet chrome).
 const PALETTE_CSS = `
 .dc-tool-palette {
   position: absolute;
@@ -32,10 +35,10 @@ const PALETTE_CSS = `
   transform: translateX(-50%);
   display: flex;
   align-items: stretch;
-  background: var(--u-bg-2, var(--bg-1, rgba(255,255,255,0.98)));
+  background: var(--u-bg-0, var(--bg-0, #ffffff));
   border: 1px solid var(--u-fg-0, #1c1917);
-  border-radius: 0;
-  box-shadow: 4px 4px 0 var(--u-fg-0, #1c1917);
+  border-radius: 8px;
+  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
   font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 12px;
   color: var(--u-fg-0, var(--fg-0, #1a1a1a));
@@ -43,8 +46,7 @@ const PALETTE_CSS = `
   user-select: none;
   /* Intentionally NO overflow:hidden — the zoom popover (.dc-tp-popover) is
      a position:absolute child anchored above the toolbar; clipping the
-     parent would hide it. Inner buttons have their own border-radius so the
-     rounded outer corners are preserved by content shape, not overflow. */
+     parent would hide it. */
 }
 .dc-tool-palette .dc-tp-group {
   display: flex;
@@ -61,7 +63,7 @@ const PALETTE_CSS = `
   appearance: none;
   background: transparent;
   border: 0;
-  border-radius: 0;
+  border-radius: 6px;
   padding: 0;
   width: 32px;
   height: 32px;
@@ -70,16 +72,61 @@ const PALETTE_CSS = `
   justify-content: center;
   color: var(--fg-1, rgba(40,30,20,0.75));
   cursor: pointer;
+  position: relative;
   transition: background-color 80ms linear, color 80ms linear;
 }
-.dc-tool-palette button:hover { background: rgba(0,0,0,0.04); color: var(--fg-0, #1a1a1a); }
+.dc-tool-palette button:hover {
+  background: color-mix(in oklab, var(--accent, #d63b1f) 8%, transparent);
+  color: var(--fg-0, #1a1a1a);
+}
 .dc-tool-palette button:focus-visible {
   outline: 2px solid var(--accent, #d63b1f);
   outline-offset: -2px;
 }
+/* DDR-046 — Active tool: tinted background + accent underbar + accent text.
+   The underbar is rendered via ::after so the visual stays inside the 6 px
+   radius without leaking past the button edge. */
 .dc-tool-palette button[aria-pressed="true"] {
+  background: color-mix(in oklab, var(--accent, #d63b1f) 14%, transparent);
+  color: var(--accent, #d63b1f);
+}
+.dc-tool-palette button[aria-pressed="true"]::after {
+  content: "";
+  position: absolute;
+  left: 6px;
+  right: 6px;
+  bottom: 2px;
+  height: 2px;
   background: var(--accent, #d63b1f);
-  color: var(--accent-fg, #fff);
+  border-radius: 1px;
+}
+/* T19 — sticky-tool lock badge. Tiny accent square in the top-right corner
+   of the active tool button, fades in 50 ms after a double-click. The badge
+   reads "armed across draws" so the user understands the tool will stay
+   selected after each shape commit. */
+.dc-tool-palette button[data-sticky="true"] {
+  /* Keep the tinted active background; add a hairline ring so the lock state
+     is readable even when the button is also aria-pressed. */
+  box-shadow: inset 0 0 0 1px var(--accent, #d63b1f);
+}
+.dc-tool-palette button .dc-tp-sticky-badge {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 6px;
+  height: 6px;
+  background: var(--accent, #d63b1f);
+  border-radius: 1px;
+  box-shadow: 0 0 0 1px var(--bg-0, #ffffff);
+  opacity: 0;
+  transition: opacity 50ms linear 50ms;
+  pointer-events: none;
+}
+.dc-tool-palette button[data-sticky="true"] .dc-tp-sticky-badge {
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dc-tool-palette button .dc-tp-sticky-badge { transition: none; }
 }
 .dc-tool-palette .dc-tp-zoom {
   min-width: 56px;
@@ -88,7 +135,7 @@ const PALETTE_CSS = `
   font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 11px;
   letter-spacing: 0.04em;
-  border-radius: 0;
+  border-radius: 6px;
   display: inline-flex;
   align-items: center;
   gap: 4px;
@@ -98,10 +145,10 @@ const PALETTE_CSS = `
   position: absolute;
   right: 4px;
   bottom: 44px;
-  background: var(--u-bg-2, var(--bg-1, rgba(255,255,255,0.98)));
+  background: var(--u-bg-0, var(--bg-0, #ffffff));
   border: 1px solid var(--u-fg-0, #1c1917);
-  border-radius: 0;
-  box-shadow: 4px 4px 0 var(--u-fg-0, #1c1917);
+  border-radius: 8px;
+  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
   display: flex;
   flex-direction: column;
   padding: 4px;
@@ -149,7 +196,7 @@ const DRAW_TOOLS = ['pen', 'rect', 'ellipse', 'arrow', 'eraser'] as const;
 
 export function ToolPalette() {
   ensurePaletteStyles();
-  const { tool, setTool, tools } = useToolMode();
+  const { tool, setTool, tools, sticky, toggleSticky } = useToolMode();
   const controller = useViewportControllerContext();
   const visibilityCtx = useAnnotationsVisibility();
   const [mounted, setMounted] = useState(false);
@@ -176,16 +223,25 @@ export function ToolPalette() {
 
   const renderToolButton = (id: string, label: string, shortcut: string) => {
     const Icon = TOOL_ICONS[id];
+    const isDraw = (DRAW_TOOLS as readonly string[]).includes(id);
+    const isSticky = sticky.locked && sticky.tool === (id as never);
+    const stickyHint = isDraw ? ' · double-click to lock' : '';
     return (
       <button
         key={id}
         type="button"
-        aria-label={`${label} (${shortcut})`}
+        aria-label={`${label} (${shortcut})${isSticky ? ' — locked' : stickyHint}`}
         aria-pressed={tool === id}
-        title={`${label} (${shortcut})`}
+        data-sticky={isSticky ? 'true' : undefined}
+        title={`${label} (${shortcut})${stickyHint}`}
         onClick={() => setTool(id as never)}
+        onDoubleClick={() => {
+          if (!isDraw) return;
+          toggleSticky(id as never);
+        }}
       >
         {Icon ? <Icon /> : <span style={{ fontSize: 11 }}>{shortcut}</span>}
+        {isSticky ? <span className="dc-tp-sticky-badge" aria-hidden="true" /> : null}
       </button>
     );
   };

package/plugins/design/dev-server/use-annotation-resize.tsx

@@ -0,0 +1,295 @@
+/**
+ * @file       use-annotation-resize.tsx — Task 23 (Wave 2, G4)
+ * @scope      plugins/design/dev-server/use-annotation-resize.tsx
+ * @purpose    Screen-space corner / endpoint handles for the selected
+ *             annotation. Per-tool resize math; modifier semantics (Shift
+ *             aspect-lock, Alt scale-from-center) are deferred to a follow-up.
+ *
+ *             Handles are `position: fixed` DOM siblings of the canvas (the
+ *             same pattern element selection uses) — they stay 8 × 8 CSS px
+ *             at any zoom and never get caught in the SVG `vector-effect`
+ *             gymnastics.
+ *
+ *             Mounts the overlay element exactly once via `AnnotationResizeOverlay`.
+ *             The hook does the math + persistence; the overlay component
+ *             owns the rAF loop that follows pan/zoom + pointer drags.
+ */
+
+import { type ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
+
+import {
+  type ArrowStroke,
+  type EllipseStroke,
+  type PenStroke,
+  type RectStroke,
+  type Stroke,
+  type StrokesStoreValue,
+  strokeBBox,
+} from './annotations-layer.tsx';
+import { useViewportControllerContext } from './canvas-lib.tsx';
+import { useAnnotationSelection } from './use-annotation-selection.tsx';
+
+const RESIZE_CSS = `
+.dc-annot-resize-handle {
+  position: fixed;
+  width: 8px;
+  height: 8px;
+  background: var(--accent, #d63b1f);
+  border: 1px solid var(--bg-0, #ffffff);
+  border-radius: 1px;
+  box-shadow: 0 0 0 0.5px color-mix(in oklab, var(--fg-0, #1c1917) 30%, transparent);
+  z-index: 6;
+  pointer-events: auto;
+  touch-action: none;
+}
+.dc-annot-resize-handle[data-corner="nw"], .dc-annot-resize-handle[data-corner="se"] { cursor: nwse-resize; }
+.dc-annot-resize-handle[data-corner="ne"], .dc-annot-resize-handle[data-corner="sw"] { cursor: nesw-resize; }
+.dc-annot-resize-handle[data-corner="ep1"], .dc-annot-resize-handle[data-corner="ep2"] { cursor: move; }
+`.trim();
+
+function ensureResizeStyles(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById('dc-annot-resize-css')) return;
+  const s = document.createElement('style');
+  s.id = 'dc-annot-resize-css';
+  s.textContent = RESIZE_CSS;
+  document.head.appendChild(s);
+}
+
+type Corner = 'nw' | 'ne' | 'sw' | 'se' | 'ep1' | 'ep2';
+
+/** Stroke types that expose resize handles in v1. Text inherits anchor bbox. */
+function isResizable(s: Stroke): s is RectStroke | EllipseStroke | ArrowStroke | PenStroke {
+  return s.tool === 'rect' || s.tool === 'ellipse' || s.tool === 'arrow' || s.tool === 'pen';
+}
+
+/**
+ * Per-tool resize math. Given a stroke + the moved corner + the new world
+ * coords for that corner, returns a patched stroke. `start` is the stroke at
+ * the moment the drag began (used as the source-of-truth for scaling math —
+ * avoids drift from rounding successive deltas).
+ */
+function resizeStroke(
+  start: Stroke,
+  corner: Corner,
+  wx: number,
+  wy: number
+): Partial<Stroke> | null {
+  if (start.tool === 'rect') {
+    const bbox = { x: start.x, y: start.y, w: start.w, h: start.h };
+    const left = corner === 'nw' || corner === 'sw' ? wx : bbox.x;
+    const right = corner === 'ne' || corner === 'se' ? wx : bbox.x + bbox.w;
+    const top = corner === 'nw' || corner === 'ne' ? wy : bbox.y;
+    const bottom = corner === 'sw' || corner === 'se' ? wy : bbox.y + bbox.h;
+    return {
+      x: Math.min(left, right),
+      y: Math.min(top, bottom),
+      w: Math.abs(right - left),
+      h: Math.abs(bottom - top),
+    } as Partial<RectStroke>;
+  }
+  if (start.tool === 'ellipse') {
+    // Treat the four corners as the bbox of the ellipse. Drag any corner →
+    // recompute the AABB and derive cx/cy/rx/ry from the diagonal anchor.
+    const bbox = {
+      x: start.cx - start.rx,
+      y: start.cy - start.ry,
+      w: start.rx * 2,
+      h: start.ry * 2,
+    };
+    const left = corner === 'nw' || corner === 'sw' ? wx : bbox.x;
+    const right = corner === 'ne' || corner === 'se' ? wx : bbox.x + bbox.w;
+    const top = corner === 'nw' || corner === 'ne' ? wy : bbox.y;
+    const bottom = corner === 'sw' || corner === 'se' ? wy : bbox.y + bbox.h;
+    const nx = Math.min(left, right);
+    const ny = Math.min(top, bottom);
+    const nw = Math.abs(right - left);
+    const nh = Math.abs(bottom - top);
+    return {
+      cx: nx + nw / 2,
+      cy: ny + nh / 2,
+      rx: Math.max(1, nw / 2),
+      ry: Math.max(1, nh / 2),
+    } as Partial<EllipseStroke>;
+  }
+  if (start.tool === 'arrow') {
+    if (corner === 'ep1') return { x1: wx, y1: wy } as Partial<ArrowStroke>;
+    if (corner === 'ep2') return { x2: wx, y2: wy } as Partial<ArrowStroke>;
+    return null;
+  }
+  if (start.tool === 'pen') {
+    // Scale all points by (newW / oldW, newH / oldH) around the opposite
+    // corner anchor. When the drag-start bbox has 0 width/height on an axis
+    // (single-point pen stroke) we skip that axis to avoid div-by-zero.
+    const bb = strokeBBox(start);
+    if (!bb) return null;
+    const anchorX = corner === 'nw' || corner === 'sw' ? bb.x + bb.w : bb.x;
+    const anchorY = corner === 'nw' || corner === 'ne' ? bb.y + bb.h : bb.y;
+    const newLeft = corner === 'nw' || corner === 'sw' ? wx : bb.x;
+    const newTop = corner === 'nw' || corner === 'ne' ? wy : bb.y;
+    const newRight = corner === 'ne' || corner === 'se' ? wx : bb.x + bb.w;
+    const newBottom = corner === 'sw' || corner === 'se' ? wy : bb.y + bb.h;
+    const sx = bb.w === 0 ? 1 : (newRight - newLeft) / bb.w;
+    const sy = bb.h === 0 ? 1 : (newBottom - newTop) / bb.h;
+    const scaled = start.points.map(
+      ([px, py]) =>
+        [anchorX + (px - anchorX) * sx, anchorY + (py - anchorY) * sy] as [number, number]
+    );
+    return { points: scaled } as Partial<PenStroke>;
+  }
+  return null;
+}
+
+/**
+ * Returns the four corners (or two endpoints, for arrow) of the selected
+ * stroke in world coordinates. Used by the overlay component to position
+ * the screen-space handle divs each rAF tick.
+ */
+function handlePositions(s: Stroke): Array<{ corner: Corner; x: number; y: number }> {
+  if (s.tool === 'arrow') {
+    return [
+      { corner: 'ep1', x: s.x1, y: s.y1 },
+      { corner: 'ep2', x: s.x2, y: s.y2 },
+    ];
+  }
+  const bb = strokeBBox(s);
+  if (!bb) return [];
+  return [
+    { corner: 'nw', x: bb.x, y: bb.y },
+    { corner: 'ne', x: bb.x + bb.w, y: bb.y },
+    { corner: 'sw', x: bb.x, y: bb.y + bb.h },
+    { corner: 'se', x: bb.x + bb.w, y: bb.y + bb.h },
+  ];
+}
+
+export function AnnotationResizeOverlay({
+  store,
+}: {
+  store: StrokesStoreValue | null;
+}): ReactNode {
+  ensureResizeStyles();
+  const annotSel = useAnnotationSelection();
+  const controller = useViewportControllerContext();
+  const vp = controller?.viewport ?? null;
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const rafRef = useRef<number | null>(null);
+  const dragRef = useRef<{
+    pointerId: number;
+    startStroke: Stroke;
+    corner: Corner;
+  } | null>(null);
+
+  const selectedId = annotSel.selectedIds.length === 1 ? (annotSel.selectedIds[0] ?? null) : null;
+  const selectedStroke: Stroke | null = useMemo(() => {
+    if (!selectedId || !store) return null;
+    return store.strokes.find((s) => s.id === selectedId) ?? null;
+  }, [selectedId, store]);
+
+  const screenToWorld = useCallback(
+    (cx: number, cy: number): [number, number] => {
+      const v = vp ?? { x: 0, y: 0, zoom: 1 };
+      const z = v.zoom || 1;
+      return [(cx - v.x) / z, (cy - v.y) / z];
+    },
+    [vp]
+  );
+
+  // rAF loop — repositions handles on every frame while a single resizable
+  // stroke is selected. Cheaper than wiring pan/zoom observers because the
+  // halo overlays already follow the same pattern.
+  useEffect(() => {
+    if (!selectedStroke || !isResizable(selectedStroke)) {
+      const c = containerRef.current;
+      if (c) {
+        for (const child of Array.from(c.children)) {
+          (child as HTMLElement).style.display = 'none';
+        }
+      }
+      return;
+    }
+    const tick = () => {
+      rafRef.current = null;
+      const c = containerRef.current;
+      if (!c) return;
+      const positions = handlePositions(selectedStroke);
+      const v = vp ?? { x: 0, y: 0, zoom: 1 };
+      const z = v.zoom || 1;
+      // Ensure enough handle children exist (each corner = one absolutely-
+      // positioned div). 4 for rect/ellipse/pen; 2 for arrow.
+      while (c.children.length < positions.length) {
+        const handle = document.createElement('div');
+        handle.className = 'dc-annot-resize-handle';
+        c.appendChild(handle);
+      }
+      while (c.children.length > positions.length) {
+        c.lastChild && c.removeChild(c.lastChild);
+      }
+      for (let i = 0; i < positions.length; i++) {
+        const pos = positions[i];
+        const handle = c.children[i] as HTMLElement | undefined;
+        if (!pos || !handle) continue;
+        const sx = pos.x * z + v.x;
+        const sy = pos.y * z + v.y;
+        handle.style.display = 'block';
+        handle.style.left = `${Math.round(sx - 4)}px`;
+        handle.style.top = `${Math.round(sy - 4)}px`;
+        handle.dataset.corner = pos.corner;
+      }
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+    };
+  }, [selectedStroke, vp]);
+
+  // Pointer handling — pointerdown on a handle starts a drag; pointermove
+  // patches the stroke via `store.updateStroke`; pointerup commits.
+  useEffect(() => {
+    const c = containerRef.current;
+    if (!c) return;
+    const onDown = (e: PointerEvent) => {
+      const t = e.target as HTMLElement | null;
+      if (!t?.classList.contains('dc-annot-resize-handle')) return;
+      if (!selectedStroke || !store) return;
+      const corner = t.dataset.corner as Corner | undefined;
+      if (!corner) return;
+      e.preventDefault();
+      e.stopPropagation();
+      dragRef.current = { pointerId: e.pointerId, startStroke: selectedStroke, corner };
+      try {
+        t.setPointerCapture(e.pointerId);
+      } catch {
+        /* some browsers reject capture on synthetic events */
+      }
+    };
+    const onMove = (e: PointerEvent) => {
+      const d = dragRef.current;
+      if (!d || e.pointerId !== d.pointerId) return;
+      if (!store) return;
+      const [wx, wy] = screenToWorld(e.clientX, e.clientY);
+      const patch = resizeStroke(d.startStroke, d.corner, wx, wy);
+      if (patch) store.updateStroke(d.startStroke.id, patch);
+    };
+    const onUp = (e: PointerEvent) => {
+      const d = dragRef.current;
+      if (!d || e.pointerId !== d.pointerId) return;
+      dragRef.current = null;
+    };
+    c.addEventListener('pointerdown', onDown);
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', onUp);
+    document.addEventListener('pointercancel', onUp);
+    return () => {
+      c.removeEventListener('pointerdown', onDown);
+      document.removeEventListener('pointermove', onMove);
+      document.removeEventListener('pointerup', onUp);
+      document.removeEventListener('pointercancel', onUp);
+    };
+  }, [selectedStroke, store, screenToWorld]);
+
+  // Only render when there's exactly one resizable stroke selected. Multi
+  // resize is undefined for v1 (no canonical UX); text inherits anchor bbox.
+  if (!selectedStroke || !isResizable(selectedStroke)) return null;
+  return <div ref={containerRef} aria-hidden="true" />;
+}

package/plugins/design/dev-server/use-snap-guides.tsx

@@ -40,6 +40,13 @@ export interface Rect {
 
 export type SnapAxis = 'x' | 'y';
 
+/** DDR-046 — `kind` lets SnapGuideOverlay route grid vs sibling guides to
+ *  different visual treatments (grid = lighter gray fallback; sibling = full
+ *  magenta confidence). `delta` is the signed correction the snap applied;
+ *  the overlay renders a `Δ{Math.round(delta)}` pill mid-span when |delta| > 0
+ *  and the guide span > 60 px. */
+export type SnapKind = 'grid' | 'sibling';
+
 export interface SnapGuide {
   /** `"x"` → vertical line (snapping X coord). Line sits at `pos` on X,
    *  spans `from..to` on Y. `"y"` is the dual: horizontal line at `pos` on Y,
@@ -48,6 +55,12 @@ export interface SnapGuide {
   pos: number;
   from: number;
   to: number;
+  /** Signed pixel delta the snap corrected (additive: `proposed + delta`).
+   *  Optional for back-compat with pre-DDR-046 readers. */
+  delta?: number;
+  /** Whether the winning candidate came from the grid pass or a sibling edge.
+   *  Optional for back-compat. */
+  kind?: SnapKind;
 }
 
 export interface SnapResult {
@@ -76,6 +89,8 @@ interface AxisCandidate {
   /** Perpendicular extent — `from..to` of the would-be guide. */
   from: number;
   to: number;
+  /** Whether this candidate came from the grid pass or the sibling pass. */
+  kind: SnapKind;
 }
 
 function nearestGridDelta(coord: number, gridSize: number, tolerance: number): number | null {
@@ -108,12 +123,17 @@ function pickClosest(cands: AxisCandidate[]): AxisCandidate | null {
 function mergeAtPos(axis: SnapAxis, winner: AxisCandidate, cands: AxisCandidate[]): SnapGuide {
   let from = winner.from;
   let to = winner.to;
+  let worstDelta = winner.delta;
   for (const c of cands) {
     if (Math.abs(c.pos - winner.pos) > 0.001) continue;
     if (c.from < from) from = c.from;
     if (c.to > to) to = c.to;
+    // Distance pill shows the worst-case correction among merged candidates,
+    // not the average (per DDR-046 — "render the pixels the user actually
+    // had to be corrected by").
+    if (Math.abs(c.delta) > Math.abs(worstDelta)) worstDelta = c.delta;
   }
-  return { axis, pos: winner.pos, from, to };
+  return { axis, pos: winner.pos, from, to, delta: worstDelta, kind: winner.kind };
 }
 
 export function computeSnap(proposed: Rect, others: Rect[], opts: SnapOptions): SnapResult {
@@ -140,6 +160,7 @@ export function computeSnap(proposed: Rect, others: Rect[], opts: SnapOptions):
       pos: propLeft + gridX,
       from: propTop,
       to: propBottom,
+      kind: 'grid',
     });
   }
   const gridY = nearestGridDelta(propTop, gridSize, tolerance);
@@ -149,6 +170,7 @@ export function computeSnap(proposed: Rect, others: Rect[], opts: SnapOptions):
       pos: propTop + gridY,
       from: propLeft,
       to: propRight,
+      kind: 'grid',
     });
   }
 
@@ -177,6 +199,7 @@ export function computeSnap(proposed: Rect, others: Rect[], opts: SnapOptions):
         pos: otherCoord,
         from: Math.min(propTop, oTop),
         to: Math.max(propBottom, oBottom),
+        kind: 'sibling',
       });
     }
 
@@ -196,6 +219,7 @@ export function computeSnap(proposed: Rect, others: Rect[], opts: SnapOptions):
         pos: otherCoord,
         from: Math.min(propLeft, oLeft),
         to: Math.max(propRight, oRight),
+        kind: 'sibling',
       });
     }
   }

package/plugins/design/dev-server/use-tool-mode.tsx

@@ -54,6 +54,13 @@ interface ToolContextValue {
   tool: Tool;
   setTool: (t: Tool) => void;
   tools: readonly ToolDescriptor[];
+  /** 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
+   *  sticky; Esc clears + flips to Move. */
+  sticky: { tool: Tool | null; locked: boolean };
+  toggleSticky: (t: Tool) => void;
+  clearSticky: () => void;
 }
 
 const ToolContext = createContext<ToolContextValue | null>(null);
@@ -71,7 +78,26 @@ export function ToolProvider({
   initial?: Tool;
 }) {
   const [tool, setToolState] = useState<Tool>(initial);
-  const setTool = useCallback((t: Tool) => setToolState(t), []);
+  const [sticky, setSticky] = useState<{ tool: Tool | null; locked: boolean }>(() => ({
+    tool: null,
+    locked: false,
+  }));
+  const setTool = useCallback((t: Tool) => {
+    setToolState(t);
+    // 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 }));
+  }, []);
+  const toggleSticky = useCallback((t: Tool) => {
+    setSticky((prev) => {
+      if (prev.locked && prev.tool === t) return { tool: null, locked: false };
+      return { tool: t, locked: true };
+    });
+    setToolState(t);
+  }, []);
+  const clearSticky = useCallback(() => {
+    setSticky({ tool: null, locked: false });
+  }, []);
 
   // Body cursor sync — applied to the canvas iframe's body (this hook runs
   // inside the iframe context). The viewport-controller still owns the
@@ -88,7 +114,10 @@ export function ToolProvider({
     };
   }, [tool, tools]);
 
-  const value = useMemo<ToolContextValue>(() => ({ tool, setTool, tools }), [tool, setTool, tools]);
+  const value = useMemo<ToolContextValue>(
+    () => ({ tool, setTool, tools, sticky, toggleSticky, clearSticky }),
+    [tool, setTool, tools, sticky, toggleSticky, clearSticky]
+  );
 
   return <ToolContext.Provider value={value}>{children}</ToolContext.Provider>;
 }