@1agh/maude 0.24.0 → 0.25.0

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,6 +23,7 @@ import {
   type ArrowStroke,
   type EllipseStroke,
   type PenStroke,
+  type PolygonStroke,
   type RectStroke,
   type StickyStroke,
   type Stroke,
@@ -43,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 {
@@ -62,86 +72,200 @@ type Corner = 'nw' | 'ne' | 'sw' | 'se' | 'ep1' | 'ep2';
 /** Stroke types that expose resize handles. Text inherits its anchor bbox. */
 function isResizable(
   s: Stroke
-): s is RectStroke | EllipseStroke | ArrowStroke | PenStroke | StickyStroke {
+): 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' || start.tool === 'sticky') {
-    // Sticky resizes exactly like a rect — it shares x / y / w / h. Text
-    // re-wraps inside the foreignObject automatically (no special handling).
-    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 | StickyStroke>;
+  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]
@@ -189,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(() => {
@@ -274,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

@@ -36,6 +36,13 @@ 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
@@ -45,8 +52,9 @@ export const DEFAULT_TOOLS: readonly ToolDescriptor[] = Object.freeze([
   { 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 },
-  { id: 'rect', label: 'Rect', shortcut: 'R', cursor: TOOL_CURSORS.rect },
-  { id: 'ellipse', label: 'Ellipse', shortcut: 'O', cursor: TOOL_CURSORS.ellipse },
+  // 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 },
@@ -64,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);
@@ -101,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/templates/_shell.html

@@ -65,27 +65,54 @@
     </style>
     <!-- Phase 6.5 export — when the shell is loaded with `&hide-chrome=1`
          (the exporters set this), suppress every dev-server overlay so the
-         capture only carries the artboard content. The runtime chrome —
-         tool palette, mini-world-map, comment pins, draw layer, snap guides,
-         selection halos, the artboard label button — is not part of the
-         design and would otherwise show up in PNG / PDF / SVG exports. -->
+         capture only carries the artboard content. The runtime chrome — tool
+         palette, mini-map, presence avatars + cursors, comment pins, draw
+         layer, snap guides, selection halos, toolbars, the artboard label
+         button — is not part of the design and would otherwise leak into PNG /
+         PDF / SVG exports. The selector list MUST track the live class names:
+         the previous list referenced `.dc-mini-map` / `.dc-world-map`, which
+         never existed (the real minimap is `.dc-mm`), and omitted the presence
+         avatars `.dc-participants`, so both leaked — see export-pipeline-fixes
+         Task 2. The bootstrap below flips this block's `media` from `not all`
+         to `all` only when `?hide-chrome=1`, so the live editor keeps chrome. -->
     <style id="canvas-hide-chrome" media="not all">
+      /* Minimap + zoom + tool palette (and its portaled popovers) */
+      .dc-mm,
+      .dc-zoom-tb,
       .dc-tool-palette,
+      .dc-tp-popover,
+      .dc-tp-shape-popover,
+      .dc-context-menu,
+      /* Presence — avatars (top-right) + live cursors */
+      .dc-participants,
+      .dc-cursor-overlay,
+      /* Selection + manipulation chrome */
       .dc-cv-halo,
       .dc-cv-group-bbox,
-      .dc-mini-map,
-      .dc-mini-world-map,
-      .dc-world-map,
+      .dc-cv-eq-spacing-layer,
+      .dc-multi-artboard-tb,
+      .dc-elem-ctx-tb,
       .dc-snap-guide,
-      .dc-annot-overlay,
+      .dc-snap-pill,
+      /* Annotations (FigJam-style draw layer) */
       .dc-annot-svg,
-      .dc-annot-chrome,
       .dc-annot-ctx,
+      .dc-annot-resize-handle,
+      /* Comments — pins, threads, composer, @mention popup */
       .cm-layer,
       .cm-pin,
       .cm-thread,
       .cm-composer,
+      .cm-mention-popup,
+      /* Inspector pin overlay injected into every served shell (inspect.ts) */
+      .dgn-pin,
+      #dgn-pin-layer,
+      /* HUDs + banners */
+      .dc-ai-banner,
+      .dc-undo-hud,
+      /* Artboard title/label button (editor affordance, not design content) */
       .dc-artboard-label,
+      /* Generic opt-in hooks for any future floating overlay */
       [data-dc-overlay],
       [data-mdcc-annotations] { display: none !important; }
     </style>