@1agh/maude 0.23.0 → 0.25.0

package/plugins/design/dev-server/undo-stack.ts

@@ -203,14 +203,30 @@ interface StoreHost {
 
 /**
  * Prefer `window.top` so all canvas iframes (children of the dev-server
- * shell) read + write the same Map. Falls back to `window` (when top is
- * cross-origin — shouldn't happen in our same-origin setup), then to
- * `globalThis` (Node / Bun test runtime where window is absent).
+ * shell) read + write the same Map. Falls back to `window` when top is
+ * cross-origin — which IS the case under the T2 (9.1-A) segregated canvas
+ * origin: the canvas iframe and the shell are different origins, so any
+ * PROPERTY access on `window.top` throws SecurityError. Then `globalThis`
+ * (Node / Bun test runtime where window is absent).
+ *
+ * Note: merely reading `window.top` (the reference) never throws — only
+ * touching a property of a cross-origin window does. So the guard MUST poke a
+ * property inside the try, or the cross-origin throw escapes into React render
+ * (it did: the UndoStackProvider's useRef initializer crashed the whole canvas
+ * mount to 0 children). Under A1 each iframe falls back to its own `window`
+ * store — undo works per-session; cross-close/reopen sharing via window.top is
+ * intentionally dropped for the origin isolation (see DDR-0xx / phase-9.1).
  */
 function getStoreHost(): StoreHost {
   if (typeof window !== 'undefined') {
     try {
-      return (window.top ?? window) as unknown as StoreHost;
+      const top = window.top;
+      if (top && top !== window) {
+        // Poke a property — throws if `top` is a cross-origin window.
+        void (top as unknown as StoreHost).__maude_undo_stacks;
+        return top as unknown as StoreHost;
+      }
+      return window as unknown as StoreHost;
     } catch {
       return window as unknown as StoreHost;
     }

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

@@ -2,8 +2,10 @@
  * @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.
+ *             annotation. Per-tool resize math with FigJam resize modifiers:
+ *             Shift = lock aspect ratio (45° angle snap for arrows), Alt =
+ *             scale from center, Shift+Alt = both. Modifiers update live on
+ *             keydown/keyup mid-drag (re-applied at the last pointer position).
  *
  *             Handles are `position: fixed` DOM siblings of the canvas (the
  *             same pattern element selection uses) — they stay 8 × 8 CSS px
@@ -21,7 +23,9 @@ import {
   type ArrowStroke,
   type EllipseStroke,
   type PenStroke,
+  type PolygonStroke,
   type RectStroke,
+  type StickyStroke,
   type Stroke,
   type StrokesStoreValue,
   strokeBBox,
@@ -42,9 +46,16 @@ const RESIZE_CSS = `
   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; }
+/* Phase 24 — '!important' so the scale/move affordance beats use-tool-mode's
+   blanket '* { cursor: <tool> !important }' (move mode). Without it the move
+   glyph clobbered the resize cursors and the user saw no scale affordance over
+   a handle. Specificity already wins ('.class[attr]' > '*'); the '!important'
+   is what lets it through against the other '!important' rule. See DDR-067.
+   NOTE: keep this comment backtick-free — it lives inside the RESIZE_CSS
+   template literal and a stray backtick closes it (bun parse fail, §6). */
+.dc-annot-resize-handle[data-corner="nw"], .dc-annot-resize-handle[data-corner="se"] { cursor: nwse-resize !important; }
+.dc-annot-resize-handle[data-corner="ne"], .dc-annot-resize-handle[data-corner="sw"] { cursor: nesw-resize !important; }
+.dc-annot-resize-handle[data-corner="ep1"], .dc-annot-resize-handle[data-corner="ep2"] { cursor: move !important; }
 `.trim();
 
 function ensureResizeStyles(): void {
@@ -58,79 +69,203 @@ function ensureResizeStyles(): void {
 
 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';
+/** Stroke types that expose resize handles. Text inherits its anchor bbox. */
+function isResizable(
+  s: Stroke
+): s is RectStroke | EllipseStroke | PolygonStroke | ArrowStroke | PenStroke | StickyStroke {
+  return (
+    s.tool === 'rect' ||
+    s.tool === 'ellipse' ||
+    s.tool === 'polygon' ||
+    s.tool === 'arrow' ||
+    s.tool === 'pen' ||
+    s.tool === 'sticky'
+  );
+}
+
+/**
+ * Resize modifiers (FigJam-parity). Held during a handle drag:
+ *   • `shift` — lock to the start aspect ratio (45° angle snap for arrows;
+ *               always-1:1 stickies ignore it — they're square regardless).
+ *   • `alt`   — scale symmetrically around the stroke's center / midpoint.
+ * Both together combine (ratio-locked AND center-anchored). With neither held
+ * the result is byte-identical to the pre-modifier behaviour.
+ */
+export interface ResizeMods {
+  shift: boolean;
+  alt: boolean;
+}
+
+const NO_MODS: ResizeMods = { shift: false, alt: false };
+
+const isWestCorner = (c: Corner): boolean => c === 'nw' || c === 'sw';
+const isNorthCorner = (c: Corner): boolean => c === 'nw' || c === 'ne';
+
+/**
+ * Shared bbox resize for rect / polygon / sticky / ellipse. Returns the new
+ * axis-aligned box for the dragged `corner` moving to world (wx, wy):
+ *   • normal  — the diagonally-opposite corner is the fixed anchor.
+ *   • Alt     — the box's center is the fixed anchor (symmetric scale).
+ *   • Shift   — keep the start aspect ratio (the dominant axis drives scale).
+ *   • square  — force 1:1 regardless of Shift (sticky notes).
+ * The no-modifier branch is algebraically identical to the previous
+ * min/max corner math (verified against the resize round-trip tests).
+ */
+function bboxResize(
+  bbox: { x: number; y: number; w: number; h: number },
+  corner: Corner,
+  wx: number,
+  wy: number,
+  mods: ResizeMods,
+  square: boolean
+): { x: number; y: number; w: number; h: number } {
+  const { x, y, w, h } = bbox;
+  const cx = x + w / 2;
+  const cy = y + h / 2;
+  const isW = isWestCorner(corner);
+  const isN = isNorthCorner(corner);
+  const anchorX = isW ? x + w : x;
+  const anchorY = isN ? y + h : y;
+
+  // Raw extents from the dragged corner — center-relative under Alt.
+  let nw = mods.alt ? 2 * Math.abs(wx - cx) : Math.abs(wx - anchorX);
+  let nh = mods.alt ? 2 * Math.abs(wy - cy) : Math.abs(wy - anchorY);
+
+  if (square) {
+    const side = Math.max(nw, nh, 1);
+    nw = side;
+    nh = side;
+  } else if (mods.shift && w > 0 && h > 0) {
+    const s = Math.max(nw / w, nh / h);
+    nw = w * s;
+    nh = h * s;
+  }
+  nw = Math.max(1, nw);
+  nh = Math.max(1, nh);
+
+  let nx: number;
+  let ny: number;
+  if (mods.alt) {
+    nx = cx - nw / 2;
+    ny = cy - nh / 2;
+  } else {
+    // Grow away from the anchor toward the cursor's side (handles flips).
+    nx = wx < anchorX ? anchorX - nw : anchorX;
+    ny = wy < anchorY ? anchorY - nh : anchorY;
+  }
+  return { x: nx, y: ny, w: nw, h: nh };
 }
 
 /**
  * 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).
+ * avoids drift from rounding successive deltas). `mods` carries the live
+ * FigJam resize modifiers (Shift aspect-lock, Alt scale-from-center).
  */
-function resizeStroke(
+export function resizeStroke(
   start: Stroke,
   corner: Corner,
   wx: number,
-  wy: number
+  wy: number,
+  mods: ResizeMods = NO_MODS
 ): 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 === 'rect' || start.tool === 'sticky' || start.tool === 'polygon') {
+    // Rect / polygon / sticky all resize via their shared x / y / w / h bbox.
+    // Text re-wraps inside the foreignObject automatically. Sticky stays 1:1.
+    const box = bboxResize(
+      { x: start.x, y: start.y, w: start.w, h: start.h },
+      corner,
+      wx,
+      wy,
+      mods,
+      start.tool === 'sticky'
+    );
+    return box as Partial<RectStroke | StickyStroke | PolygonStroke>;
   }
   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);
+    // Treat the four corners as the bbox of the ellipse, then derive cx/cy/rx/ry.
+    const box = bboxResize(
+      { x: start.cx - start.rx, y: start.cy - start.ry, w: start.rx * 2, h: start.ry * 2 },
+      corner,
+      wx,
+      wy,
+      mods,
+      false
+    );
     return {
-      cx: nx + nw / 2,
-      cy: ny + nh / 2,
-      rx: Math.max(1, nw / 2),
-      ry: Math.max(1, nh / 2),
+      cx: box.x + box.w / 2,
+      cy: box.y + box.h / 2,
+      rx: Math.max(1, box.w / 2),
+      ry: Math.max(1, box.h / 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 (corner !== 'ep1' && corner !== 'ep2') return null;
+    const otherX = corner === 'ep1' ? start.x2 : start.x1;
+    const otherY = corner === 'ep1' ? start.y2 : start.y1;
+    const midX = (start.x1 + start.x2) / 2;
+    const midY = (start.y1 + start.y2) / 2;
+    // Alt pins the midpoint (both ends mirror); otherwise the far end is fixed.
+    const refX = mods.alt ? midX : otherX;
+    const refY = mods.alt ? midY : otherY;
+    let dragX = wx;
+    let dragY = wy;
+    if (mods.shift) {
+      // Snap the shaft angle (relative to the reference) to 45° increments.
+      const dx = wx - refX;
+      const dy = wy - refY;
+      const dist = Math.hypot(dx, dy);
+      const step = Math.PI / 4;
+      const ang = Math.round(Math.atan2(dy, dx) / step) * step;
+      dragX = refX + Math.cos(ang) * dist;
+      dragY = refY + Math.sin(ang) * dist;
+    }
+    if (mods.alt) {
+      const mirrorX = 2 * midX - dragX;
+      const mirrorY = 2 * midY - dragY;
+      return corner === 'ep1'
+        ? ({ x1: dragX, y1: dragY, x2: mirrorX, y2: mirrorY } as Partial<ArrowStroke>)
+        : ({ x2: dragX, y2: dragY, x1: mirrorX, y1: mirrorY } as Partial<ArrowStroke>);
+    }
+    return corner === 'ep1'
+      ? ({ x1: dragX, y1: dragY } as Partial<ArrowStroke>)
+      : ({ x2: dragX, y2: dragY } as Partial<ArrowStroke>);
   }
   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.
+    // Scale all points around an anchor — the opposite corner (normal) or the
+    // bbox center (Alt). Shift forces a uniform scale (dominant axis wins).
+    // A 0-extent axis (single-point pen stroke) keeps scale 1 (no 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 cx = bb.x + bb.w / 2;
+    const cy = bb.y + bb.h / 2;
+    const isW = isWestCorner(corner);
+    const isN = isNorthCorner(corner);
+    let anchorX: number;
+    let anchorY: number;
+    let sx: number;
+    let sy: number;
+    if (mods.alt) {
+      anchorX = cx;
+      anchorY = cy;
+      sx = bb.w === 0 ? 1 : (wx - cx) / (isW ? -bb.w / 2 : bb.w / 2);
+      sy = bb.h === 0 ? 1 : (wy - cy) / (isN ? -bb.h / 2 : bb.h / 2);
+    } else {
+      anchorX = isW ? bb.x + bb.w : bb.x;
+      anchorY = isN ? bb.y + bb.h : bb.y;
+      const newLeft = isW ? wx : bb.x;
+      const newTop = isN ? wy : bb.y;
+      const newRight = isW ? bb.x + bb.w : wx;
+      const newBottom = isN ? bb.y + bb.h : wy;
+      sx = bb.w === 0 ? 1 : (newRight - newLeft) / bb.w;
+      sy = bb.h === 0 ? 1 : (newBottom - newTop) / bb.h;
+    }
+    if (mods.shift) {
+      const s = Math.max(Math.abs(sx), Math.abs(sy));
+      sx = (sx < 0 ? -1 : 1) * s;
+      sy = (sy < 0 ? -1 : 1) * s;
+    }
     const scaled = start.points.map(
       ([px, py]) =>
         [anchorX + (px - anchorX) * sx, anchorY + (py - anchorY) * sy] as [number, number]
@@ -178,6 +313,9 @@ export function AnnotationResizeOverlay({
     startStroke: Stroke;
     corner: Corner;
   } | null>(null);
+  // Last pointer position (client coords) during a drag — lets a mid-drag
+  // Shift/Alt keydown re-apply the resize without waiting for a pointermove.
+  const lastPointRef = useRef<{ x: number; y: number } | null>(null);
 
   const selectedId = annotSel.selectedIds.length === 1 ? (annotSel.selectedIds[0] ?? null) : null;
   const selectedStroke: Stroke | null = useMemo(() => {
@@ -263,28 +401,48 @@ export function AnnotationResizeOverlay({
         /* some browsers reject capture on synthetic events */
       }
     };
+    const applyResize = (clientX: number, clientY: number, mods: ResizeMods) => {
+      const d = dragRef.current;
+      if (!d || !store) return;
+      const [wx, wy] = screenToWorld(clientX, clientY);
+      const patch = resizeStroke(d.startStroke, d.corner, wx, wy, mods);
+      if (patch) store.updateStroke(d.startStroke.id, patch);
+    };
     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);
+      lastPointRef.current = { x: e.clientX, y: e.clientY };
+      applyResize(e.clientX, e.clientY, { shift: e.shiftKey, alt: e.altKey });
+    };
+    // Holding/releasing Shift or Alt mid-drag re-runs the resize at the last
+    // known pointer position so the constraint flips live, FigJam-style.
+    const onKey = (e: KeyboardEvent) => {
+      if (!dragRef.current) return;
+      if (e.key !== 'Shift' && e.key !== 'Alt') return;
+      const p = lastPointRef.current;
+      if (!p) return;
+      e.preventDefault();
+      applyResize(p.x, p.y, { shift: e.shiftKey, alt: e.altKey });
     };
     const onUp = (e: PointerEvent) => {
       const d = dragRef.current;
       if (!d || e.pointerId !== d.pointerId) return;
       dragRef.current = null;
+      lastPointRef.current = null;
     };
     c.addEventListener('pointerdown', onDown);
     document.addEventListener('pointermove', onMove);
     document.addEventListener('pointerup', onUp);
     document.addEventListener('pointercancel', onUp);
+    document.addEventListener('keydown', onKey, true);
+    document.addEventListener('keyup', onKey, true);
     return () => {
       c.removeEventListener('pointerdown', onDown);
       document.removeEventListener('pointermove', onMove);
       document.removeEventListener('pointerup', onUp);
       document.removeEventListener('pointercancel', onUp);
+      document.removeEventListener('keydown', onKey, true);
+      document.removeEventListener('keyup', onKey, true);
     };
   }, [selectedStroke, store, screenToWorld]);
 

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

@@ -21,6 +21,7 @@ import {
   useState,
 } from 'react';
 
+import { TOOL_CURSORS } from './canvas-cursors.ts';
 import type { Tool } from './input-router.tsx';
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -35,19 +36,29 @@ export interface ToolDescriptor {
   cursor: string;
 }
 
+/**
+ * Phase 24 — the six primitives the single Shape tool can draw. Maps onto the
+ * stroke model: square/rounded → `rect` (cornerRadius 0 / 8); circle →
+ * `ellipse`; diamond/triangle/triangle-down → `polygon`.
+ */
+export type ShapeKind = 'square' | 'rounded' | 'circle' | 'diamond' | 'triangle' | 'triangle-down';
+
+// 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([
-  { id: 'move', label: 'Move', shortcut: 'V', cursor: 'default' },
-  { id: 'hand', label: 'Hand', shortcut: 'H', cursor: 'grab' },
-  { id: 'comment', label: 'Comment', shortcut: 'C', cursor: 'crosshair' },
-  // Phase 5 — draw / annotation tools. Cursors stay as `crosshair` for pen /
-  // rect / arrow (the pen-tip glyph is reserved for the system text caret).
-  // Eraser uses `cell` as the closest cross-browser substitute for a rubber
-  // affordance (no native rubber cursor exists).
-  { id: 'pen', label: 'Pen', shortcut: 'B', cursor: 'crosshair' },
-  { id: 'rect', label: 'Rect', shortcut: 'R', cursor: 'crosshair' },
-  { id: 'ellipse', label: 'Ellipse', shortcut: 'O', cursor: 'crosshair' },
-  { id: 'arrow', label: 'Arrow', shortcut: 'A', cursor: 'crosshair' },
-  { id: 'eraser', label: 'Eraser', shortcut: 'E', cursor: 'cell' },
+  { id: 'move', label: 'Move', shortcut: 'V', cursor: TOOL_CURSORS.move },
+  { id: 'hand', label: 'Hand', shortcut: 'H', cursor: TOOL_CURSORS.hand },
+  { id: 'comment', label: 'Comment', shortcut: 'C', cursor: TOOL_CURSORS.comment },
+  { id: 'pen', label: 'Pen', shortcut: 'B', cursor: TOOL_CURSORS.pen },
+  // Phase 24 — one Shape tool replaces the separate Rect (R) + Ellipse (O)
+  // buttons; the primitive is chosen from the palette popover.
+  { id: 'shape', label: 'Shape', shortcut: 'R', cursor: TOOL_CURSORS.shape },
+  { id: 'sticky', label: 'Sticky', shortcut: 'N', cursor: TOOL_CURSORS.sticky },
+  { id: 'arrow', label: 'Arrow', shortcut: 'A', cursor: TOOL_CURSORS.arrow },
+  { id: 'text', label: 'Text', shortcut: 'T', cursor: TOOL_CURSORS.text },
+  { id: 'eraser', label: 'Eraser', shortcut: 'E', cursor: TOOL_CURSORS.eraser },
 ]);
 
 interface ToolContextValue {
@@ -61,6 +72,9 @@ interface ToolContextValue {
   sticky: { tool: Tool | null; locked: boolean };
   toggleSticky: (t: Tool) => void;
   clearSticky: () => void;
+  /** Phase 24 — the primitive the Shape tool will draw next. */
+  shapeKind: ShapeKind;
+  setShapeKind: (k: ShapeKind) => void;
 }
 
 const ToolContext = createContext<ToolContextValue | null>(null);
@@ -98,25 +112,60 @@ export function ToolProvider({
   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
-  // grabbing/grab cursor swap during space-pan; this only sets the resting
-  // cursor for the active tool.
+  const [shapeKind, setShapeKind] = useState<ShapeKind>('square');
+
+  // Cursor sync — applied inside the canvas (this hook runs in the canvas
+  // context). The active tool's cursor is set on <body> AND forced across the
+  // whole canvas working area via an `!important` rule, so the custom cursor
+  // shows EVERYWHERE — including over artboard CONTENT, whose own `cursor:
+  // pointer`/`text`/… would otherwise win (Phase 24, the "custom cursors in the
+  // whole app" requirement; FigJam behaviour). Chrome that lives OUTSIDE
+  // `.dc-world` (tool palette, context toolbar, resize handles) is intentionally
+  // NOT matched, so its buttons/handles keep their affordance cursors. The
+  // viewport-controller still owns the grab/grabbing swap during space-pan.
   useEffect(() => {
     if (typeof document === 'undefined') return;
     const desc = tools.find((t) => t.id === tool);
     if (!desc) return;
     const prev = document.body.style.cursor;
     document.body.style.cursor = desc.cursor;
+    let styleEl = document.getElementById('dc-tool-cursor') as HTMLStyleElement | null;
+    if (!styleEl) {
+      styleEl = document.createElement('style');
+      styleEl.id = 'dc-tool-cursor';
+      document.head.appendChild(styleEl);
+    }
+    // Truly GLOBAL inside the canvas document — `*` so it covers the empty grid
+    // host, `.dc-world`, every artboard + its content, AND the floating chrome
+    // (minimap, toolbar). The earlier `.dc-world`-scoped rule left the empty
+    // canvas / minimap on their own cursors; the brief is "prostě všude". (Mirrors
+    // the outer-shell `*` rule so both documents are uniformly covered.)
+    styleEl.textContent = `* { cursor: ${desc.cursor} !important; }`;
+    // Phase 24 — broadcast the active tool TOKEN to the OUTER app shell (this
+    // hook runs in the canvas iframe) so the shell shows the same custom cursor
+    // across the whole maude UI (sidebar / top bar). We send the tool *id*, NOT
+    // the cursor string: the shell resolves it against its own trusted
+    // TOOL_CURSORS copy (resolveToolCursor), so an untrusted synced canvas
+    // (DDR-054) can only pick a known, always-visible glyph — it can't inject an
+    // invisible/displaced cursor as a clickjacking aid (phase-24 ethical-hacker
+    // Finding 2; DDR-067).
+    if (typeof window !== 'undefined' && window.parent && window.parent !== window) {
+      try {
+        window.parent.postMessage({ dgn: 'tool-cursor', tool }, '*');
+      } catch {
+        /* cross-origin parent rejected — shell keeps its default cursor */
+      }
+    }
     return () => {
       document.body.style.cursor = prev;
+      const el = document.getElementById('dc-tool-cursor');
+      if (el) el.textContent = '';
     };
   }, [tool, tools]);
 
   const value = useMemo<ToolContextValue>(
-    () => ({ tool, setTool, tools, sticky, toggleSticky, clearSticky }),
-    [tool, setTool, tools, sticky, toggleSticky, clearSticky]
+    () => ({ tool, setTool, tools, sticky, toggleSticky, clearSticky, shapeKind, setShapeKind }),
+    [tool, setTool, tools, sticky, toggleSticky, clearSticky, shapeKind]
   );
 
   return <ToolContext.Provider value={value}>{children}</ToolContext.Provider>;

package/plugins/design/dev-server/ws.ts

@@ -25,6 +25,16 @@ export type WsData =
       remote: string;
       kind: 'collab';
       slug: string;
+    }
+  | {
+      // T2 (9.1-A) — HMR-only socket for the segregated canvas origin. Receives
+      // ONLY `canvas-hmr` broadcasts; never the privileged inspector feed
+      // (comments / ai-activity / git-lifecycle / sync:status / selection) and
+      // ignores all inbound messages. Hub-pushed canvas code on the canvas
+      // origin can open this, but it leaks nothing and mutates nothing.
+      id: string;
+      remote: string;
+      kind: 'canvas-hmr';
     };
 
 /**
@@ -77,6 +87,8 @@ export function createWs(ctx: Context, api: Api, inspect: Inspect, collab: Colla
     }
   }
 
+  // Privileged inspector feed — comments, selection, ai-activity, git-lifecycle,
+  // sync:status, fs:*. ONLY the same-origin inspector clients (the shell) get it.
   function broadcast(payload: unknown) {
     const msg = typeof payload === 'string' ? payload : JSON.stringify(payload);
     for (const ws of clients) {
@@ -85,6 +97,17 @@ export function createWs(ctx: Context, api: Api, inspect: Inspect, collab: Colla
     }
   }
 
+  // HMR feed — `canvas-hmr` reload signals. Safe to deliver to the segregated
+  // canvas origin, so both inspector (shell) AND canvas-hmr (canvas iframe)
+  // sockets receive it. T2 (9.1-A).
+  function broadcastHmr(payload: unknown) {
+    const msg = typeof payload === 'string' ? payload : JSON.stringify(payload);
+    for (const ws of clients) {
+      if (ws.data.kind !== 'inspector' && ws.data.kind !== 'canvas-hmr') continue;
+      send(ws, msg);
+    }
+  }
+
   // Wire bus -> WS broadcasts. inspect.ts emits 'selected' / 'active' after every
   // state write; fs-watch.ts emits 'fs:*' on every save.
   ctx.bus.on('selected', (sel) => broadcast({ type: 'selected', selected: sel }));
@@ -106,9 +129,17 @@ export function createWs(ctx: Context, api: Api, inspect: Inspect, collab: Colla
   // canvas iframes both subscribe.
   ctx.bus.on('git-lifecycle', (payload: unknown) => broadcast({ type: 'git-lifecycle', payload }));
 
+  // Phase 9 Task 8 — hub-down offline mode. The linked-mode sync runtime emits
+  // 'sync:status' on every connection-state change (online / connecting /
+  // offline / offline-long, queued-op count, conflict notices). Browser tabs
+  // render the offline/synced/escalation banner from this. Solo mode never
+  // emits, so this is a no-op for unlinked projects.
+  ctx.bus.on('sync:status', (payload: unknown) => broadcast({ type: 'sync:status', payload }));
+
   // HMR broadcaster — turns fs:any change events into `canvas-hmr` messages.
   // The iframe-side client (in _shell.html) decides reload strategy from `mode`.
-  createHmrBroadcaster(ctx, (msg) => broadcast(msg));
+  // Uses broadcastHmr so the segregated canvas origin's HMR-only sockets get it.
+  createHmrBroadcaster(ctx, (msg) => broadcastHmr(msg));
 
   // Bind a connection to its room. Stored per-socket so close() can find the
   // right room to disconnect from. Multiplexed via ws.data.id.
@@ -138,6 +169,11 @@ export function createWs(ctx: Context, api: Api, inspect: Inspect, collab: Colla
         await room.connect(conn);
         return;
       }
+      if (ws.data.kind === 'canvas-hmr') {
+        // HMR-only: join the broadcast set but get NO inspector snapshot.
+        clients.add(ws);
+        return;
+      }
       clients.add(ws);
       send(ws, { type: 'snapshot', state: inspect.state });
     },
@@ -159,6 +195,9 @@ export function createWs(ctx: Context, api: Api, inspect: Inspect, collab: Colla
       clients.delete(ws);
     },
     async message(ws, raw) {
+      // HMR-only canvas-origin socket: never accepts inbound messages (the
+      // canvas iframe only listens for canvas-hmr; it never sends).
+      if (ws.data.kind === 'canvas-hmr') return;
       if (ws.data.kind === 'collab') {
         const binding = collabConns.get(ws.data.id);
         if (!binding) return;