@1agh/maude 0.23.0 → 0.25.0

package/plugins/design/dev-server/annotations-layer.tsx

@@ -22,6 +22,7 @@
  */
 
 import {
+  type CSSProperties,
   type PointerEvent as ReactPointerEvent,
   createContext,
   useCallback,
@@ -34,15 +35,23 @@ import {
 import { createPortal } from 'react-dom';
 
 import { AnnotationContextToolbar } from './annotations-context-toolbar.tsx';
+import {
+  ARROW_HEADS,
+  type ArrowHead,
+  type ArrowLineType,
+  type SvgPrimitive,
+  arrowPrimitives,
+} from './canvas-arrowheads.ts';
+import { IconLineThick, IconLineThin } from './canvas-icons.tsx';
 import { useViewportControllerContext, useWorldRefContext } from './canvas-lib.tsx';
 import { buildAnnotationStrokesRecord } from './commands/annotation-strokes-command.ts';
-import { crossedDragThreshold } from './input-router.tsx';
+import { type Tool, crossedDragThreshold } from './input-router.tsx';
 import { AnnotationResizeOverlay } from './use-annotation-resize.tsx';
 import { useAnnotationSelectionOptional } from './use-annotation-selection.tsx';
 import { useAnnotationsVisibility } from './use-annotations-visibility.tsx';
 import { useCollab } from './use-collab.tsx';
 import { useSelectionSetOptional } from './use-selection-set.tsx';
-import { useToolMode } from './use-tool-mode.tsx';
+import { type ShapeKind, useToolMode } from './use-tool-mode.tsx';
 import { useUndoSinks, useUndoStackOptional } from './use-undo-stack.tsx';
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -50,6 +59,21 @@ import { useUndoSinks, useUndoStackOptional } from './use-undo-stack.tsx';
 
 type WorldPoint = readonly [number, number];
 
+// Phase 24 — arrow style enums are OWNED by canvas-arrowheads.ts (so that
+// module imports nothing back from here — no cycle, see DDR-067) and re-exported
+// here for back-compat (context-toolbar etc. import them from this module).
+export type { ArrowHead, ArrowLineType } from './canvas-arrowheads.ts';
+/** Phase 24 — polygon shape primitives (diamond + the two triangle pointings). */
+export type PolygonShape = 'diamond' | 'triangle' | 'triangle-down';
+/** Phase 24 — horizontal alignment for text + sticky bodies. */
+export type TextAlign = 'left' | 'center' | 'right';
+
+/** Phase 24 — cursor-following ghost placeholder descriptor (pure chrome). */
+type GhostDescriptor =
+  | { kind: 'text'; x: number; y: number; color: string }
+  | { kind: 'sticky'; x: number; y: number; color: string }
+  | { kind: 'shape'; x: number; y: number; shapeKind: ShapeKind; color: string };
+
 export interface PenStroke {
   id: string;
   tool: 'pen';
@@ -67,6 +91,8 @@ export interface RectStroke {
   w: number;
   h: number;
   fill?: string | null;
+  /** Phase 21 — corner radius (rx/ry). Absent / 0 = sharp 90° corners (back-compat). */
+  cornerRadius?: number;
 }
 export interface EllipseStroke {
   id: string;
@@ -79,6 +105,27 @@ export interface EllipseStroke {
   ry: number;
   fill?: string | null;
 }
+/**
+ * Phase 24 — diamond / triangle / triangle-down primitives. Stored as a bbox
+ * (x/y/w/h, exactly like a rect) + a `shape` discriminant; the actual SVG
+ * points are derived from the bbox at serialize + render time. Brand-new on
+ * disk (`<polygon data-tool="polygon" data-shape="…">`), so no back-compat
+ * constraint — only idempotent round-trip.
+ */
+export interface PolygonStroke {
+  id: string;
+  tool: 'polygon';
+  shape: PolygonShape;
+  color: string;
+  width: number;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  fill?: string | null;
+  /** Dashed outline (stroke-dasharray). Absent / false = solid. */
+  dashed?: boolean;
+}
 export interface ArrowStroke {
   id: string;
   tool: 'arrow';
@@ -88,6 +135,14 @@ export interface ArrowStroke {
   y1: number;
   x2: number;
   y2: number;
+  /** Head on the (x1,y1) start. Absent = 'none' (back-compat). Phase 24 widened the enum. */
+  startHead?: ArrowHead;
+  /** Head on the (x2,y2) end. Absent = 'triangle' (back-compat). Phase 24 widened the enum. */
+  endHead?: ArrowHead;
+  /** Phase 21 — dashed shaft (stroke-dasharray). Absent / false = solid. */
+  dashed?: boolean;
+  /** Phase 24 — shaft routing. Absent = 'straight' (back-compat). */
+  lineType?: ArrowLineType;
 }
 export interface TextStroke {
   id: string;
@@ -95,28 +150,104 @@ export interface TextStroke {
   color: string;
   fontSize: number;
   text: string;
-  anchorId: string;
+  /**
+   * Host shape id for anchored text (double-click a rect/ellipse). Phase 21
+   * relaxed this to optional: standalone text (the `text` tool) carries no
+   * anchor and renders at its own world `(x, y)` instead.
+   */
+  anchorId?: string;
+  /** Phase 21 — world coords for standalone (unanchored) text. */
+  x?: number;
+  y?: number;
+  /** Phase 24 — bold weight. Absent / false = normal (back-compat). */
+  bold?: boolean;
+  /** Phase 24 — strikethrough. Absent / false = none (back-compat). */
+  strike?: boolean;
+  /**
+   * Phase 24 — horizontal alignment. Absent default differs by kind: anchored
+   * text = 'center' (legacy, byte-identical), standalone = 'left'.
+   */
+  align?: TextAlign;
 }
-export type Stroke = PenStroke | RectStroke | EllipseStroke | ArrowStroke | TextStroke;
+/** Phase 21 — sticky note: a paper-tone card with its own word-wrapped text. */
+export interface StickyStroke {
+  id: string;
+  tool: 'sticky';
+  color: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  text: string;
+  fontSize: number;
+  /** Corner radius; defaults to STICKY_CORNER_RADIUS (8 = soft). */
+  cornerRadius?: number;
+  /** Phase 24 — bold body weight. Absent / false = normal. */
+  bold?: boolean;
+  /** Phase 24 — strikethrough body. Absent / false = none. */
+  strike?: boolean;
+  /** Phase 24 — body alignment. Absent = 'left' (FigJam sticky default). */
+  align?: TextAlign;
+}
+export type Stroke =
+  | PenStroke
+  | RectStroke
+  | EllipseStroke
+  | PolygonStroke
+  | ArrowStroke
+  | TextStroke
+  | StickyStroke;
 
-const PALETTE = [
-  '#d63b1f', // accent red — first slot mirrors the default DS accent
-  '#f5a623', // amber
-  '#1a8f3e', // green
-  '#1d6cf0', // blue
-  '#7a4ad3', // purple
-  '#1a1a1a', // ink
+/**
+ * Phase 21 — what the inline editor is currently bound to. `anchored` edits
+ * the text hosted by a rect/ellipse; `sticky` edits a card body; `standalone`
+ * re-edits a free text node; `pending` is a not-yet-born text caret (no stroke
+ * exists until real text is committed).
+ */
+type EditingTarget =
+  | { kind: 'anchored'; anchorId: string; host: RectStroke | EllipseStroke }
+  | { kind: 'sticky'; sticky: StickyStroke }
+  | { kind: 'standalone'; text: TextStroke }
+  | { kind: 'pending'; x: number; y: number }
+  | null;
+
+// Phase 21 colour system — a single coherent hue family used everywhere.
+// FigJam model: stroke (saturated ink) is INDEPENDENT of fill, and fills are
+// light TINTS of the same hue (index-paired with STROKE_PALETTE). Stickies use
+// their own lightened paper set (STICKY_PALETTE). Exported so the draw-time
+// chrome AND the per-selection context toolbar share ONE palette instead of
+// drifting apart.
+export const STROKE_PALETTE = [
+  '#e5484d', // red (default — markup ink)
+  '#f2762a', // orange
+  '#e0a500', // amber
+  '#30a46c', // green
+  '#3b82f6', // blue
+  '#8b5cf6', // purple
+  '#e93d82', // pink
+  '#7c7c7c', // gray
+  '#1f1f1f', // ink
 ] as const;
-type PaletteColor = (typeof PALETTE)[number];
-const DEFAULT_COLOR: PaletteColor = PALETTE[0];
-
-const FILL_PALETTE = [
-  '#fff4d6', // amber tint
-  '#e6f4ea', // green tint
-  '#e3edff', // blue tint
-  '#f0e8fb', // purple tint
-  '#ffe5e0', // red tint
-  '#f4f1ee', // paper
+type PaletteColor = (typeof STROKE_PALETTE)[number];
+// Phase 24 — default markup ink is BLACK (the `#1f1f1f` ink swatch, slot 8) for
+// EVERY ink tool (pen / shape / arrow / text). It's a palette member so the
+// draw chrome + per-selection toolbar highlight it as the active swatch; the
+// other hues stay one click away. (Stickies keep their warm-paper default —
+// DEFAULT_STICKY_COLOR — they're paper, not ink.)
+const DEFAULT_COLOR: PaletteColor = STROKE_PALETTE[8];
+
+// Light tints, index-paired to STROKE_PALETTE — picking "blue fill" gives a
+// pale blue wash under a saturated stroke, exactly like FigJam shapes.
+export const FILL_PALETTE = [
+  '#fbe0e1', // red tint
+  '#fce6d6', // orange tint
+  '#fbeec2', // amber tint
+  '#d9f1e2', // green tint
+  '#e0ebfd', // blue tint
+  '#ebe3fc', // purple tint
+  '#fbdfeb', // pink tint
+  '#ededed', // gray tint
+  '#e7e7e7', // ink tint
 ] as const;
 
 const STROKE_WIDTH_THIN = 3;
@@ -126,6 +257,34 @@ type Thickness = typeof STROKE_WIDTH_THIN | typeof STROKE_WIDTH_THICK;
 const FONT_SIZE_MEDIUM = 14;
 const DEFAULT_FONT_SIZE = FONT_SIZE_MEDIUM;
 
+// Phase 24 — sticky-note paper tints. A muted/desaturated FigJam-style set
+// (Image #2): a warm paper yellow default, then white/grey + soft pastels.
+// Wholly separate from the stroke ink PALETTE and the translucent FILL_PALETTE
+// so stickies read as "paper", not "ink". Slot 0 (yellow) is the default.
+// Existing stickies keep their stored hex; only NEW stickies pick up the new
+// default tint.
+export const STICKY_PALETTE = [
+  '#fce8a6', // muted yellow (default — warm paper)
+  '#ffffff', // white
+  '#e6e4e0', // light grey
+  '#f7c5c0', // salmon
+  '#f8d2a6', // peach
+  '#bfe3c0', // mint
+  '#a9dbdb', // aqua
+  '#bcd2f0', // light blue
+  '#cfc4ec', // lavender
+  '#f3c4dd', // light pink
+] as const;
+const DEFAULT_STICKY_COLOR = STICKY_PALETTE[0];
+const STICKY_CORNER_RADIUS = 8;
+// Phase 24 — stickies are 1:1; the default tap size is a square.
+const STICKY_DEFAULT_W = 200;
+const STICKY_DEFAULT_H = 200;
+const STICKY_MIN_SIZE = 40;
+// Phase 24 — a bare tap with the Shape tool drops a default-sized shape at the
+// tap point (FigJam parity: click commits, drag sizes). Square aspect.
+const SHAPE_DEFAULT_SIZE = 120;
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Pure helpers — exported for unit tests.
 
@@ -146,30 +305,153 @@ export function penPathD(points: readonly WorldPoint[]): string {
   return d;
 }
 
-export function arrowHeadPoints(
-  x1: number,
-  y1: number,
-  x2: number,
-  y2: number,
-  width: number
+// Phase 24 — moved to canvas-arrowheads.ts (single source for shaft + heads).
+// Re-exported so the existing test import (`from '../annotations-layer.tsx'`)
+// and the byte-identical canary keep working.
+export { arrowHeadPoints } from './canvas-arrowheads.ts';
+
+/**
+ * Phase 24 — polygon vertices derived from the bbox. `diamond` = the four
+ * edge-midpoints; `triangle` = apex-up; `triangle-down` = apex-down. Every
+ * shape's vertices span the FULL bbox, so a parse-back via the points' min/max
+ * recovers x/y/w/h exactly (idempotent round-trip).
+ */
+export function polygonVertices(
+  shape: PolygonShape,
+  x: number,
+  y: number,
+  w: number,
+  h: number
+): Array<[number, number]> {
+  if (shape === 'diamond') {
+    return [
+      [x + w / 2, y],
+      [x + w, y + h / 2],
+      [x + w / 2, y + h],
+      [x, y + h / 2],
+    ];
+  }
+  if (shape === 'triangle') {
+    return [
+      [x + w / 2, y],
+      [x + w, y + h],
+      [x, y + h],
+    ];
+  }
+  // triangle-down — apex at the bottom.
+  return [
+    [x, y],
+    [x + w, y],
+    [x + w / 2, y + h],
+  ];
+}
+
+/** Vertices as an SVG `points` string. */
+export function polygonPoints(
+  shape: PolygonShape,
+  x: number,
+  y: number,
+  w: number,
+  h: number
 ): string {
-  const angle = Math.atan2(y2 - y1, x2 - x1);
-  const len = 12 + width * 2;
-  const wing = Math.PI / 7;
-  const ax = x2 - Math.cos(angle - wing) * len;
-  const ay = y2 - Math.sin(angle - wing) * len;
-  const bx = x2 - Math.cos(angle + wing) * len;
-  const by = y2 - Math.sin(angle + wing) * len;
-  return `${ax},${ay} ${x2},${y2} ${bx},${by}`;
+  return polygonVertices(shape, x, y, w, h)
+    .map(([px, py]) => `${px},${py}`)
+    .join(' ');
+}
+
+/** Even-odd ray-cast point-in-polygon test. */
+function pointInPolygon(px: number, py: number, pts: ReadonlyArray<[number, number]>): boolean {
+  let inside = false;
+  for (let i = 0, j = pts.length - 1; i < pts.length; j = i++) {
+    const a = pts[i];
+    const b = pts[j];
+    if (!a || !b) continue;
+    const [xi, yi] = a;
+    const [xj, yj] = b;
+    if (yi > py !== yj > py && px < ((xj - xi) * (py - yi)) / (yj - yi) + xi) {
+      inside = !inside;
+    }
+  }
+  return inside;
+}
+
+/** Parse a polygon `points` string back into its bounding box. */
+function polygonBBox(points: string): { x: number; y: number; w: number; h: number } | null {
+  let xMin = Number.POSITIVE_INFINITY;
+  let yMin = Number.POSITIVE_INFINITY;
+  let xMax = Number.NEGATIVE_INFINITY;
+  let yMax = Number.NEGATIVE_INFINITY;
+  for (const pair of points.trim().split(/\s+/)) {
+    const [px, py] = pair.split(',').map((n) => Number.parseFloat(n));
+    if (px == null || py == null || Number.isNaN(px) || Number.isNaN(py)) continue;
+    if (px < xMin) xMin = px;
+    if (px > xMax) xMax = px;
+    if (py < yMin) yMin = py;
+    if (py > yMax) yMax = py;
+  }
+  if (!Number.isFinite(xMin)) return null;
+  return { x: xMin, y: yMin, w: xMax - xMin, h: yMax - yMin };
 }
 
 function strokeToSvgEl(s: Stroke): string {
   if (s.tool === 'text') {
-    return `<text data-id="${esc(s.id)}" data-tool="text" data-anchor-id="${esc(
-      s.anchorId
-    )}" data-font-size="${s.fontSize}" fill="${esc(
+    // Phase 21 — anchored text keeps the byte-identical Phase 5.1 form;
+    // standalone text (no anchorId) writes its own world x/y and omits
+    // data-anchor-id (so the parser routes it back to the standalone branch).
+    // Phase 24 — bold/strike/align serialize ONLY for non-default values, so a
+    // legacy text node stays byte-identical (weight/deco/alignAttr are empty).
+    const weight = s.bold ? ' font-weight="700"' : '';
+    const deco = s.strike ? ' text-decoration="line-through"' : '';
+    if (s.anchorId != null && s.anchorId !== '') {
+      const align = s.align ?? 'center'; // anchored default = centre (legacy)
+      const anchor = align === 'left' ? 'start' : align === 'right' ? 'end' : 'middle';
+      const alignAttr = align !== 'center' ? ` data-align="${align}"` : '';
+      return `<text data-id="${esc(s.id)}" data-tool="text" data-anchor-id="${esc(
+        s.anchorId
+      )}" data-font-size="${s.fontSize}" fill="${esc(
+        s.color
+      )}"${weight}${deco} text-anchor="${anchor}" dominant-baseline="middle"${alignAttr}>${esc(
+        s.text
+      )}</text>`;
+    }
+    const tx = s.x ?? 0;
+    const ty = s.y ?? 0;
+    const align = s.align ?? 'left'; // standalone default = left
+    const anchor = align === 'left' ? 'start' : align === 'right' ? 'end' : 'middle';
+    const alignAttr = align !== 'left' ? ` data-align="${align}"` : '';
+    return `<text data-id="${esc(s.id)}" data-tool="text" x="${tx}" y="${ty}" data-font-size="${
+      s.fontSize
+    }" fill="${esc(
       s.color
-    )}" text-anchor="middle" dominant-baseline="middle">${esc(s.text)}</text>`;
+    )}"${weight}${deco} text-anchor="${anchor}" dominant-baseline="hanging"${alignAttr}>${esc(
+      s.text
+    )}</text>`;
+  }
+  if (s.tool === 'sticky') {
+    // Phase 21 — sticky body lives in an allowlisted <text> child so it
+    // survives sanitizeAnnotationSvg (which strips <foreignObject>, DDR-060
+    // F1). The live canvas re-renders this stroke with a foreignObject so the
+    // text word-wraps; the persisted <text> is the inert, sanitizer-safe form.
+    const r = s.cornerRadius ?? STICKY_CORNER_RADIUS;
+    const w = Math.max(0, s.w);
+    const h = Math.max(0, s.h);
+    // Phase 24 — bold/strike/align on the <g> data-attrs, emitted ONLY for
+    // non-default values (sticky default align = left) so Phase-21 stickies
+    // serialize byte-identically.
+    const align = s.align ?? 'left';
+    const styleAttrs =
+      (s.bold ? ' data-bold="1"' : '') +
+      (s.strike ? ' data-strike="1"' : '') +
+      (align !== 'left' ? ` data-align="${align}"` : '');
+    return `<g data-id="${esc(s.id)}" data-tool="sticky" data-r="${r}" data-fs="${
+      s.fontSize
+    }" fill="${esc(s.color)}"${styleAttrs}><rect x="${s.x}" y="${
+      s.y
+    }" width="${w}" height="${h}" rx="${r}" ry="${r}"/><text data-sticky-body="1" x="${
+      s.x + 12
+    }" y="${s.y + 12}" font-size="${
+      s.fontSize
+    }" fill="#1a1a1a" dominant-baseline="hanging">${esc(s.text)}</text></g>`;
   }
   const common = `data-id="${esc(s.id)}" data-tool="${s.tool}" stroke="${esc(s.color)}" stroke-width="${s.width}" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"`;
   if (s.tool === 'pen') {
@@ -177,10 +459,14 @@ function strokeToSvgEl(s: Stroke): string {
   }
   if (s.tool === 'rect') {
     const fill = s.fill ? esc(s.fill) : 'none';
+    // Phase 21 — corner radius: append rx/ry/data-r ONLY when > 0 so legacy
+    // sharp-corner rects serialize byte-identically (Task 10 canary).
+    const r = s.cornerRadius ?? 0;
+    const round = r > 0 ? ` rx="${r}" ry="${r}" data-r="${r}"` : '';
     return `<rect ${common} fill="${fill}" x="${s.x}" y="${s.y}" width="${Math.max(
       0,
       s.w
-    )}" height="${Math.max(0, s.h)}"/>`;
+    )}" height="${Math.max(0, s.h)}"${round}/>`;
   }
   if (s.tool === 'ellipse') {
     const fill = s.fill ? esc(s.fill) : 'none';
@@ -189,8 +475,61 @@ function strokeToSvgEl(s: Stroke): string {
       s.rx
     )}" ry="${Math.max(0, s.ry)}"/>`;
   }
-  const head = arrowHeadPoints(s.x1, s.y1, s.x2, s.y2, s.width);
-  return `<g ${common} fill="none"><line x1="${s.x1}" y1="${s.y1}" x2="${s.x2}" y2="${s.y2}"/><polyline points="${head}" fill="${esc(s.color)}"/></g>`;
+  if (s.tool === 'polygon') {
+    // Phase 24 — bbox-derived points + data-shape. Normalize the bbox so a
+    // negative-extent (mid-flip) stroke serializes idempotently.
+    const nx = Math.min(s.x, s.x + s.w);
+    const ny = Math.min(s.y, s.y + s.h);
+    const nw = Math.abs(s.w);
+    const nh = Math.abs(s.h);
+    const fill = s.fill ? esc(s.fill) : 'none';
+    const dash = s.dashed ? ' stroke-dasharray="6 4"' : '';
+    const dashAttr = s.dashed ? ' data-dash="1"' : '';
+    return `<polygon ${common} fill="${fill}" data-shape="${s.shape}" points="${polygonPoints(
+      s.shape,
+      nx,
+      ny,
+      nw,
+      nh
+    )}"${dash}${dashAttr}/>`;
+  }
+  // arrow — Phase 24 reduces to ordered SVG primitives (canvas-arrowheads), the
+  // same primitives StrokeNode renders. Defaults (startHead 'none', endHead
+  // 'triangle', lineType 'straight', solid) reduce to exactly
+  // [<line>, <polyline fill=color>] → the byte-identical Phase 5.1 form. data-*
+  // attrs appear only for non-default values.
+  const startHead = s.startHead ?? 'none';
+  const endHead = s.endHead ?? 'triangle';
+  const lineType = s.lineType ?? 'straight';
+  const dashed = s.dashed ?? false;
+  // esc() every interpolated value (defence-in-depth, Phase 24 security review
+  // DDR-067) — heads are clamped on parse, but a value reaching serialize must
+  // never be able to break out of the attribute.
+  const dataAttrs =
+    (startHead !== 'none' ? ` data-start-head="${esc(startHead)}"` : '') +
+    (endHead !== 'triangle' ? ` data-end-head="${esc(endHead)}"` : '') +
+    (lineType !== 'straight' ? ` data-line-type="${esc(lineType)}"` : '') +
+    (dashed ? ' data-dash="1"' : '');
+  const body = arrowPrimitives(s).map(svgPrimitiveToString).join('');
+  return `<g ${common} fill="none"${dataAttrs}>${body}</g>`;
+}
+
+/** Format one arrow SVG primitive for the persisted string (byte-identical to
+ *  the Phase-5.1 `<line>`/`<polyline>` forms for the legacy default arrow). */
+function svgPrimitiveToString(p: SvgPrimitive): string {
+  const dash = 'dash' in p && p.dash ? ' stroke-dasharray="6 4"' : '';
+  switch (p.el) {
+    case 'line':
+      return `<line x1="${p.x1}" y1="${p.y1}" x2="${p.x2}" y2="${p.y2}"${dash}/>`;
+    case 'path':
+      return `<path d="${p.d}"${dash}/>`;
+    case 'polyline':
+      return `<polyline points="${p.points}" fill="${esc(p.fill)}"/>`;
+    case 'polygon':
+      return `<polygon points="${p.points}" fill="${esc(p.fill)}"/>`;
+    case 'circle':
+      return `<circle cx="${p.cx}" cy="${p.cy}" r="${p.r}" fill="${esc(p.fill)}"/>`;
+  }
 }
 
 export function strokesToSvg(strokes: readonly Stroke[]): string {
@@ -219,6 +558,38 @@ function parseFill(raw: string | null): string | null {
   return raw;
 }
 
+/**
+ * Phase 24 — recover an arrow's two endpoints from its shaft. A straight arrow
+ * persists a `<line>`; a curved/elbow arrow persists a `<path>` whose first and
+ * last coordinate pairs are the endpoints (the bow control / elbow corner sit
+ * between them, so first-pair = start, last-pair = end recovers the ends
+ * exactly → idempotent re-serialize).
+ */
+function arrowEndpoints(el: Element): { x1: number; y1: number; x2: number; y2: number } | null {
+  const line = el.querySelector('line');
+  if (line) {
+    return {
+      x1: Number.parseFloat(line.getAttribute('x1') || '0'),
+      y1: Number.parseFloat(line.getAttribute('y1') || '0'),
+      x2: Number.parseFloat(line.getAttribute('x2') || '0'),
+      y2: Number.parseFloat(line.getAttribute('y2') || '0'),
+    };
+  }
+  const path = el.querySelector('path');
+  if (path) {
+    const nums = (path.getAttribute('d') || '').match(/-?\d+(?:\.\d+)?/g);
+    if (nums && nums.length >= 4) {
+      return {
+        x1: Number.parseFloat(nums[0] as string),
+        y1: Number.parseFloat(nums[1] as string),
+        x2: Number.parseFloat(nums[nums.length - 2] as string),
+        y2: Number.parseFloat(nums[nums.length - 1] as string),
+      };
+    }
+  }
+  return null;
+}
+
 export function svgToStrokes(svgText: string): Stroke[] {
   const text = (svgText ?? '').trim();
   if (!text) return [];
@@ -238,13 +609,52 @@ export function svgToStrokes(svgText: string): Stroke[] {
         if (points.length) out.push({ id, tool: 'pen', color, width, points });
         continue;
       }
+      if (tool === 'sticky') {
+        // Phase 21 — sticky reads geometry off its <rect> child, paper tint
+        // off the group fill, body text off the inner <text>.
+        const rectEl = el.querySelector('rect');
+        const x = Number.parseFloat(rectEl?.getAttribute('x') || '0');
+        const y = Number.parseFloat(rectEl?.getAttribute('y') || '0');
+        const w = Number.parseFloat(rectEl?.getAttribute('width') || '0');
+        const h = Number.parseFloat(rectEl?.getAttribute('height') || '0');
+        const cornerRadius =
+          Number.parseFloat(el.getAttribute('data-r') || String(STICKY_CORNER_RADIUS)) || 0;
+        const fontSize =
+          Number.parseFloat(el.getAttribute('data-fs') || String(DEFAULT_FONT_SIZE)) ||
+          DEFAULT_FONT_SIZE;
+        const stickyColor = el.getAttribute('fill') || DEFAULT_STICKY_COLOR;
+        const body = el.querySelector('text');
+        const sticky: StickyStroke = {
+          id,
+          tool: 'sticky',
+          color: stickyColor,
+          x,
+          y,
+          w,
+          h,
+          text: body?.textContent ?? '',
+          fontSize,
+          cornerRadius,
+        };
+        // Phase 24 — style attrs; absent ⇒ defaults (normal / left), left unset.
+        if (el.getAttribute('data-bold') === '1') sticky.bold = true;
+        if (el.getAttribute('data-strike') === '1') sticky.strike = true;
+        const sticAlign = el.getAttribute('data-align');
+        if (sticAlign === 'left' || sticAlign === 'center' || sticAlign === 'right') {
+          sticky.align = sticAlign;
+        }
+        out.push(sticky);
+        continue;
+      }
       if (tool === 'rect') {
         const x = Number.parseFloat(el.getAttribute('x') || '0');
         const y = Number.parseFloat(el.getAttribute('y') || '0');
         const w = Number.parseFloat(el.getAttribute('width') || '0');
         const h = Number.parseFloat(el.getAttribute('height') || '0');
         const fill = parseFill(el.getAttribute('fill'));
-        out.push({ id, tool: 'rect', color, width, x, y, w, h, fill });
+        // Phase 21 — corner radius; absent ⇒ 0 (sharp, back-compat).
+        const cornerRadius = Number.parseFloat(el.getAttribute('data-r') || '0') || 0;
+        out.push({ id, tool: 'rect', color, width, x, y, w, h, fill, cornerRadius });
         continue;
       }
       if (tool === 'ellipse') {
@@ -256,36 +666,113 @@ export function svgToStrokes(svgText: string): Stroke[] {
         out.push({ id, tool: 'ellipse', color, width, cx, cy, rx, ry, fill });
         continue;
       }
+      if (tool === 'polygon') {
+        // Phase 24 — recover the bbox from the points; shape from data-shape.
+        const shapeRaw = el.getAttribute('data-shape');
+        const shape: PolygonShape =
+          shapeRaw === 'triangle' || shapeRaw === 'triangle-down' ? shapeRaw : 'diamond';
+        const bb = polygonBBox(el.getAttribute('points') || '');
+        if (bb) {
+          const fill = parseFill(el.getAttribute('fill'));
+          const poly: PolygonStroke = {
+            id,
+            tool: 'polygon',
+            shape,
+            color,
+            width,
+            x: bb.x,
+            y: bb.y,
+            w: bb.w,
+            h: bb.h,
+            fill,
+          };
+          const dashRaw = el.getAttribute('data-dash');
+          if (dashRaw === '1' || dashRaw === 'true') poly.dashed = true;
+          out.push(poly);
+        }
+        continue;
+      }
       if (tool === 'arrow') {
-        const line = el.querySelector('line');
-        if (line) {
-          out.push({
+        // Phase 24 — shaft is a <line> (straight) OR a <path> (curved/elbow).
+        // Recover the two endpoints from whichever is present.
+        const ends = arrowEndpoints(el);
+        if (ends) {
+          const arrow: ArrowStroke = {
             id,
             tool: 'arrow',
             color,
             width,
-            x1: Number.parseFloat(line.getAttribute('x1') || '0'),
-            y1: Number.parseFloat(line.getAttribute('y1') || '0'),
-            x2: Number.parseFloat(line.getAttribute('x2') || '0'),
-            y2: Number.parseFloat(line.getAttribute('y2') || '0'),
-          });
+            x1: ends.x1,
+            y1: ends.y1,
+            x2: ends.x2,
+            y2: ends.y2,
+          };
+          // Heads + dash + line-type. The serializer writes a data-* attribute
+          // only for a NON-default value, so a legacy arrow carries none of
+          // these and stays { startHead/endHead/dashed/lineType: undefined } →
+          // defaults on re-serialize (byte-identical, canary). Phase 24 widened
+          // the head enum, so read the literal value rather than match a single
+          // string.
+          // Clamp to the known head vocabulary — an out-of-vocab / poisoned
+          // value (hub-pushed SVG) is rejected, never cast through unchecked
+          // (Phase 24 security review, DDR-067).
+          const sh = el.getAttribute('data-start-head');
+          if (sh && ARROW_HEADS.has(sh)) arrow.startHead = sh as ArrowHead;
+          const eh = el.getAttribute('data-end-head');
+          if (eh && ARROW_HEADS.has(eh)) arrow.endHead = eh as ArrowHead;
+          const lt = el.getAttribute('data-line-type');
+          if (lt === 'curved' || lt === 'elbow' || lt === 'straight') arrow.lineType = lt;
+          const dashRaw = el.getAttribute('data-dash');
+          if (dashRaw === '1' || dashRaw === 'true') arrow.dashed = true;
+          out.push(arrow);
         }
         continue;
       }
       if (tool === 'text') {
-        const anchorId = el.getAttribute('data-anchor-id') || '';
+        const rawAnchor = el.getAttribute('data-anchor-id');
         const fontSize =
           Number.parseFloat(el.getAttribute('data-font-size') || String(DEFAULT_FONT_SIZE)) ||
           DEFAULT_FONT_SIZE;
         const inkColor = el.getAttribute('fill') || color;
-        out.push({
+        const body = (el.textContent || '').trim();
+        // Phase 24 — bold / strike / align. `data-align` is the round-trip
+        // source of truth (text-anchor is derived from it). Absent ⇒ default
+        // (normal / per-kind align), left unset so legacy nodes round-trip.
+        const isBold = el.getAttribute('font-weight') === '700';
+        const isStrike = (el.getAttribute('text-decoration') || '').includes('line-through');
+        const da = el.getAttribute('data-align');
+        const align: TextAlign | undefined =
+          da === 'left' || da === 'center' || da === 'right' ? da : undefined;
+        // Phase 21 — standalone text (no data-anchor-id) carries world x/y
+        // instead of a host id.
+        if (!rawAnchor) {
+          const t: TextStroke = {
+            id,
+            tool: 'text',
+            color: inkColor,
+            fontSize,
+            text: body,
+            x: Number.parseFloat(el.getAttribute('x') || '0'),
+            y: Number.parseFloat(el.getAttribute('y') || '0'),
+          };
+          if (isBold) t.bold = true;
+          if (isStrike) t.strike = true;
+          if (align) t.align = align;
+          out.push(t);
+          continue;
+        }
+        const t: TextStroke = {
           id,
           tool: 'text',
           color: inkColor,
           fontSize,
-          text: (el.textContent || '').trim(),
-          anchorId,
-        });
+          text: body,
+          anchorId: rawAnchor,
+        };
+        if (isBold) t.bold = true;
+        if (isStrike) t.strike = true;
+        if (align) t.align = align;
+        out.push(t);
       }
     }
     return out;
@@ -312,8 +799,26 @@ function pointSegmentDist(
 }
 
 export function strokeHitTest(s: Stroke, wx: number, wy: number, tol: number): boolean {
-  if (s.tool === 'text') return false;
+  if (s.tool === 'text') {
+    // Anchored text isn't independently hit-testable (it inherits its host).
+    // Standalone text (Phase 21) uses its synthetic bbox so the eraser can
+    // reach it.
+    if (s.anchorId != null && s.anchorId !== '') return false;
+    const bb = strokeBBox(s);
+    if (!bb) return false;
+    return (
+      wx >= bb.x - tol && wx <= bb.x + bb.w + tol && wy >= bb.y - tol && wy <= bb.y + bb.h + tol
+    );
+  }
   const t = Math.max(tol, 'width' in s ? s.width : 2);
+  if (s.tool === 'sticky') {
+    // Sticky is a solid paper card — filled-rect hit anywhere inside.
+    const xMin = Math.min(s.x, s.x + s.w);
+    const xMax = Math.max(s.x, s.x + s.w);
+    const yMin = Math.min(s.y, s.y + s.h);
+    const yMax = Math.max(s.y, s.y + s.h);
+    return wx >= xMin - t && wx <= xMax + t && wy >= yMin - t && wy <= yMax + t;
+  }
   if (s.tool === 'pen') {
     if (s.points.length === 1) {
       const p = s.points[0] as WorldPoint;
@@ -341,6 +846,20 @@ export function strokeHitTest(s: Stroke, wx: number, wy: number, tol: number): b
     const dist = Math.abs(Math.sqrt(d) - 1);
     return dist <= band;
   }
+  if (s.tool === 'polygon') {
+    const nx = Math.min(s.x, s.x + s.w);
+    const ny = Math.min(s.y, s.y + s.h);
+    const pts = polygonVertices(s.shape, nx, ny, Math.abs(s.w), Math.abs(s.h));
+    // Filled → inside-hit; always allow an edge-proximity hit (covers the
+    // stroke-only outline + a tolerance band on a filled shape).
+    if (s.fill && pointInPolygon(wx, wy, pts)) return true;
+    for (let i = 0; i < pts.length; i++) {
+      const a = pts[i] as [number, number];
+      const b = pts[(i + 1) % pts.length] as [number, number];
+      if (pointSegmentDist(wx, wy, a[0], a[1], b[0], b[1]) <= t) return true;
+    }
+    return false;
+  }
   // rect — inside when filled, edge-only otherwise.
   const x = s.x;
   const y = s.y;
@@ -362,7 +881,8 @@ export function strokeHitTest(s: Stroke, wx: number, wy: number, tol: number): b
   return onLeft || onRight || onTop || onBottom;
 }
 
-function normalizeRect(r: RectStroke): RectStroke {
+/** Flip a negative-extent box so x/y is the top-left and w/h are positive. */
+function normalizeBox<T extends { x: number; y: number; w: number; h: number }>(r: T): T {
   if (r.w >= 0 && r.h >= 0) return r;
   return {
     ...r,
@@ -373,11 +893,115 @@ function normalizeRect(r: RectStroke): RectStroke {
   };
 }
 
+/**
+ * Phase 24 — draw-time resize modifiers (FigJam parity, mirror of the
+ * `use-annotation-resize.tsx` set so create + resize feel identical):
+ *   • `shift` — lock to 1:1 (square / circle); the larger drag axis sets the
+ *               side, each axis keeps its own sign so the drag direction holds.
+ *   • `alt`   — grow from the pointer-down point as CENTER (symmetric).
+ * With neither held the box is `{ x: down, w: cursor − down }` — byte-identical
+ * to the previous corner-drag math.
+ */
+export interface DrawMods {
+  shift: boolean;
+  alt: boolean;
+}
+
+/** Constrain a draw drag (`ax,ay` = pointer-down anchor; `wx,wy` = cursor). */
+export function constrainDrawBox(
+  ax: number,
+  ay: number,
+  wx: number,
+  wy: number,
+  mods: DrawMods
+): { x: number; y: number; w: number; h: number } {
+  let dx = wx - ax;
+  let dy = wy - ay;
+  if (mods.shift) {
+    const side = Math.max(Math.abs(dx), Math.abs(dy));
+    dx = (dx < 0 ? -1 : 1) * side;
+    dy = (dy < 0 ? -1 : 1) * side;
+  }
+  if (mods.alt) {
+    // Anchor is the center → span ±|d| on each axis around it.
+    return { x: ax - dx, y: ay - dy, w: 2 * dx, h: 2 * dy };
+  }
+  return { x: ax, y: ay, w: dx, h: dy };
+}
+
+/**
+ * Apply the draw-time modifiers to the in-progress stroke. Shared by the
+ * pointer-move handler and the live keydown/keyup re-apply, so holding Shift /
+ * Alt updates the draft even without moving the cursor. `anchor` is the
+ * pointer-down point; pen / text carry no box so they pass through unchanged.
+ */
+export function applyDrawModifiers(
+  cur: Stroke,
+  anchor: { x: number; y: number },
+  wx: number,
+  wy: number,
+  mods: DrawMods
+): Stroke {
+  if (cur.tool === 'rect' || cur.tool === 'polygon') {
+    const b = constrainDrawBox(anchor.x, anchor.y, wx, wy, mods);
+    return { ...cur, x: b.x, y: b.y, w: b.w, h: b.h };
+  }
+  if (cur.tool === 'ellipse') {
+    const b = constrainDrawBox(anchor.x, anchor.y, wx, wy, mods);
+    return {
+      ...cur,
+      cx: b.x + b.w / 2,
+      cy: b.y + b.h / 2,
+      rx: Math.abs(b.w) / 2,
+      ry: Math.abs(b.h) / 2,
+    };
+  }
+  if (cur.tool === 'sticky') {
+    // Stickies are always 1:1 — force the square constraint; Alt still centers.
+    const b = constrainDrawBox(anchor.x, anchor.y, wx, wy, { shift: true, alt: mods.alt });
+    return { ...cur, x: b.x, y: b.y, w: b.w, h: b.h };
+  }
+  if (cur.tool === 'arrow') {
+    let x2 = wx;
+    let y2 = wy;
+    if (mods.shift) {
+      // Snap the shaft to the nearest 45° around the anchor (its midpoint
+      // under Alt), keeping the cursor's distance.
+      const dx = wx - anchor.x;
+      const dy = wy - anchor.y;
+      const dist = Math.hypot(dx, dy);
+      const step = Math.PI / 4;
+      const ang = Math.round(Math.atan2(dy, dx) / step) * step;
+      x2 = anchor.x + Math.cos(ang) * dist;
+      y2 = anchor.y + Math.sin(ang) * dist;
+    }
+    if (mods.alt) {
+      // Anchor is the midpoint → the start end mirrors the dragged end.
+      return { ...cur, x1: 2 * anchor.x - x2, y1: 2 * anchor.y - y2, x2, y2 };
+    }
+    return { ...cur, x1: anchor.x, y1: anchor.y, x2, y2 };
+  }
+  return cur;
+}
+
+function normalizeRect(r: RectStroke): RectStroke {
+  return normalizeBox(r);
+}
+
+// Phase 21 — sticky shares rect's drag-to-create flip (x = min, w = abs(w)).
+function normalizeSticky(s: StickyStroke): StickyStroke {
+  return normalizeBox(s);
+}
+
 function isStrokeMeaningful(s: Stroke): boolean {
   if (s.tool === 'pen') return s.points.length >= 2;
   if (s.tool === 'rect') return Math.abs(s.w) >= 4 && Math.abs(s.h) >= 4;
+  if (s.tool === 'polygon') return Math.abs(s.w) >= 4 && Math.abs(s.h) >= 4;
   if (s.tool === 'ellipse') return s.rx >= 2 && s.ry >= 2;
   if (s.tool === 'text') return s.text.trim().length > 0;
+  // Sticky below a readable floor is discarded like a 2×2 rect.
+  if (s.tool === 'sticky')
+    return Math.abs(s.w) >= STICKY_MIN_SIZE && Math.abs(s.h) >= STICKY_MIN_SIZE;
   return Math.hypot(s.x2 - s.x1, s.y2 - s.y1) >= 4;
 }
 
@@ -399,7 +1023,7 @@ export function strokeBBox(
     }
     return { x: xMin, y: yMin, w: xMax - xMin, h: yMax - yMin };
   }
-  if (s.tool === 'rect') {
+  if (s.tool === 'rect' || s.tool === 'polygon') {
     return {
       x: Math.min(s.x, s.x + s.w),
       y: Math.min(s.y, s.y + s.h),
@@ -418,9 +1042,29 @@ export function strokeBBox(
       h: Math.abs(s.y2 - s.y1),
     };
   }
-  // text → inherit from anchor
-  const host = anchors?.get(s.anchorId);
-  return host ? strokeBBox(host) : null;
+  if (s.tool === 'sticky') {
+    return {
+      x: Math.min(s.x, s.x + s.w),
+      y: Math.min(s.y, s.y + s.h),
+      w: Math.abs(s.w),
+      h: Math.abs(s.h),
+    };
+  }
+  // text — anchored inherits its host's bbox; standalone (Phase 21) gets a
+  // synthetic bbox from its world (x, y) so it's selectable and the context
+  // toolbar can position against it.
+  if (s.anchorId != null && s.anchorId !== '') {
+    const host = anchors?.get(s.anchorId);
+    return host ? strokeBBox(host) : null;
+  }
+  const tx = s.x ?? 0;
+  const ty = s.y ?? 0;
+  return {
+    x: tx,
+    y: ty,
+    w: Math.max(8, s.text.length * s.fontSize * 0.55),
+    h: s.fontSize * 1.2,
+  };
 }
 
 function isEditable(t: EventTarget | null): boolean {
@@ -454,93 +1098,113 @@ function deriveFile(): string | undefined {
 const ANNOT_CSS = `
 .dc-annot-chrome {
   /* Stacks directly above the centered tool toolbar (which is bottom:16px,
-     32px tall → top edge ~ bottom:48px). 8 px gap → chrome at bottom:60px. */
+     32px tall → top edge ~ bottom:48px). 8 px gap → chrome at bottom:60px.
+     Phase 21 — dark "marker tray" matching the FigJam selection bar. */
   position: absolute;
   left: 50%;
-  bottom: 60px;
+  bottom: 64px;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
-  gap: 8px;
-  background: var(--u-bg-0, var(--bg-0, rgba(255,255,255,0.98)));
-  border: 1px solid var(--u-fg-0, #1c1917);
-  border-radius: 8px;
-  padding: 6px 10px;
-  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  gap: 2px;
+  background: #26262b;
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 12px;
+  padding: 5px 8px;
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 11px;
-  color: var(--u-fg-0, rgba(40,30,20,0.85));
+  color: rgba(255,255,255,0.85);
   z-index: 6;
-  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
+  box-shadow: 0 8px 28px rgba(0,0,0,0.34), 0 2px 6px rgba(0,0,0,0.22);
   user-select: none;
 }
-.dc-annot-chrome .dc-annot-swatches { display: flex; gap: 4px; }
+.dc-annot-chrome .dc-annot-swatches { display: flex; align-items: center; gap: 1px; }
 .dc-annot-chrome .dc-annot-sw {
-  width: 18px;
-  height: 18px;
-  border-radius: 3px;
-  border: 1px solid rgba(0,0,0,0.12);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1px solid rgba(255,255,255,0.16);
   cursor: pointer;
   padding: 0;
   appearance: none;
+  transition: transform 80ms ease;
 }
+.dc-annot-chrome .dc-annot-sw:hover { transform: scale(1.1); }
 .dc-annot-chrome .dc-annot-sw[aria-pressed="true"] {
-  box-shadow: 0 0 0 2px var(--maude-hud-accent, #d63b1f);
+  box-shadow: 0 0 0 2px #26262b, 0 0 0 3px rgba(255,255,255,0.92);
   border-color: transparent;
 }
 .dc-annot-chrome .dc-annot-sw:focus-visible {
-  outline: 2px solid var(--maude-hud-accent, #d63b1f);
-  outline-offset: 2px;
+  outline: 2px solid #ffffff;
+  outline-offset: 1px;
 }
 .dc-annot-chrome .dc-annot-sep {
   width: 1px;
-  align-self: stretch;
-  background: rgba(0,0,0,0.08);
-  margin: 0 2px;
+  height: 16px;
+  align-self: center;
+  background: rgba(255,255,255,0.09);
+  margin: 0 4px;
 }
 .dc-annot-chrome .dc-annot-fill {
-  width: 18px;
-  height: 18px;
-  border-radius: 3px;
-  border: 1px solid rgba(0,0,0,0.18);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1px solid rgba(255,255,255,0.16);
   cursor: pointer;
   padding: 0;
   appearance: none;
   position: relative;
+  transition: transform 80ms ease;
+}
+.dc-annot-chrome .dc-annot-fill:hover { transform: scale(1.1); }
+.dc-annot-chrome .dc-annot-fill:focus-visible {
+  outline: 2px solid #ffffff;
+  outline-offset: 1px;
 }
 .dc-annot-chrome .dc-annot-fill--none {
-  background: #fff;
+  background: #3a3a40;
 }
 .dc-annot-chrome .dc-annot-fill--none::after {
   content: "";
-  position: absolute; inset: 2px;
+  position: absolute; inset: 4px;
+  border-radius: 50%;
   background:
-    linear-gradient(135deg, transparent 47%, #d63b1f 47%, #d63b1f 53%, transparent 53%);
+    linear-gradient(135deg, transparent 44%, rgba(255,255,255,0.55) 44%, rgba(255,255,255,0.55) 56%, transparent 56%);
 }
 .dc-annot-chrome .dc-annot-fill[aria-pressed="true"] {
-  box-shadow: 0 0 0 2px var(--maude-hud-accent, #d63b1f);
+  box-shadow: 0 0 0 2px #26262b, 0 0 0 3px rgba(255,255,255,0.92);
   border-color: transparent;
 }
-.dc-annot-chrome .dc-annot-btn {
+/* Phase 21 — icon buttons (light glyph on dark, white-tint active). */
+.dc-annot-chrome .dc-annot-ibtn {
   appearance: none;
   background: transparent;
-  border: 1px solid rgba(0,0,0,0.12);
-  border-radius: 3px;
-  padding: 4px 8px;
-  font: inherit;
-  color: inherit;
+  border: 0;
+  border-radius: 7px;
+  width: 26px;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255,255,255,0.78);
   cursor: pointer;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  padding: 0;
+  transition: background-color 80ms linear, color 80ms linear;
 }
-.dc-annot-chrome .dc-annot-btn[aria-pressed="true"] {
-  background: var(--maude-hud-accent, #d63b1f);
-  color: var(--maude-hud-accent-fg, #fff);
-  border-color: transparent;
+.dc-annot-chrome .dc-annot-ibtn:hover {
+  background: rgba(255,255,255,0.1);
+  color: #ffffff;
 }
-.dc-annot-chrome .dc-annot-btn:hover { background: rgba(0,0,0,0.04); }
-.dc-annot-chrome .dc-annot-btn:focus-visible {
-  outline: 2px solid var(--maude-hud-accent, #d63b1f);
-  outline-offset: 2px;
+.dc-annot-chrome .dc-annot-ibtn[aria-pressed="true"] {
+  background: rgba(255,255,255,0.18);
+  color: #ffffff;
+}
+.dc-annot-chrome .dc-annot-ibtn:focus-visible {
+  outline: 2px solid #ffffff;
+  outline-offset: -2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dc-annot-chrome .dc-annot-ibtn, .dc-annot-chrome .dc-annot-sw, .dc-annot-chrome .dc-annot-fill { transition: none; }
 }
 .dc-annot-input {
   position: absolute;
@@ -573,6 +1237,35 @@ const ANNOT_CSS = `
   stroke-width: 1;
   stroke-dasharray: 4 3;
 }
+/* Phase 24 — sticky-note body. Word-wrapped multi-line text inside the card's
+   foreignObject. Text sits TOP-LEFT (FigJam parity); the editor contentEditable
+   mirrors the same box metrics so the read-edit swap doesn't shift the text.
+   text-align is overridden inline per-sticky when align is not left. */
+.dc-sticky-body {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 14px 16px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  color: #2a2a28;
+  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  line-height: 1.35;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  overflow: hidden;
+}
+/* Phase 24 — while editing an annotation's text (a text label OR a sticky body,
+   both carry the dc-annot-editor class), force the I-beam. The important flag
+   plus the class selector beat use-tool-mode's blanket star-cursor rule (you
+   usually open the editor from MOVE mode, whose move glyph would otherwise sit
+   over the text you're typing into). The element's inline text cursor can't win
+   that fight on its own — a non-important inline style loses to !important.
+   See DDR-067. (No backticks in this comment: the whole block is a JS template
+   literal, so a backtick here would terminate the string.) */
+.dc-annot-editor, .dc-annot-editor * { cursor: text !important; }
 `.trim();
 
 function ensureAnnotStyles(): void {
@@ -606,11 +1299,15 @@ function translateOne(s: Stroke, dx: number, dy: number): Stroke {
   if (s.tool === 'pen') {
     return { ...s, points: s.points.map(([x, y]) => [x + dx, y + dy] as WorldPoint) };
   }
-  if (s.tool === 'rect') return { ...s, x: s.x + dx, y: s.y + dy };
+  if (s.tool === 'rect' || s.tool === 'polygon') return { ...s, x: s.x + dx, y: s.y + dy };
   if (s.tool === 'ellipse') return { ...s, cx: s.cx + dx, cy: s.cy + dy };
   if (s.tool === 'arrow')
     return { ...s, x1: s.x1 + dx, y1: s.y1 + dy, x2: s.x2 + dx, y2: s.y2 + dy };
-  return s; // text inherits its host's bbox
+  if (s.tool === 'sticky') return { ...s, x: s.x + dx, y: s.y + dy };
+  // text — anchored inherits its host's bbox (moves with the host); standalone
+  // (Phase 21) carries its own world (x, y) and translates directly.
+  if (s.anchorId != null && s.anchorId !== '') return s;
+  return { ...s, x: (s.x ?? 0) + dx, y: (s.y ?? 0) + dy };
 }
 
 /**
@@ -640,7 +1337,7 @@ export { useAnnotationsVisibility } from './use-annotations-visibility.tsx';
 
 export function AnnotationsLayer() {
   ensureAnnotStyles();
-  const { tool, setTool, sticky } = useToolMode();
+  const { tool, setTool, sticky, tools, shapeKind } = useToolMode();
   const controller = useViewportControllerContext();
   const vp = controller?.viewport ?? null;
   const worldRef = useWorldRefContext();
@@ -652,6 +1349,17 @@ export function AnnotationsLayer() {
   const [color, setColor] = useState<string>(DEFAULT_COLOR);
   const [fill, setFill] = useState<string | null>(null);
   const [thickness, setThickness] = useState<Thickness>(STROKE_WIDTH_THIN);
+  // Phase 21 — draw-time paper tint for the sticky tool (recolor-after via the
+  // context toolbar). Separate from `color` (ink for pen/rect/text/arrow).
+  const [stickyColor, setStickyColor] = useState<string>(DEFAULT_STICKY_COLOR);
+  // Phase 21 — a standalone-text caret waiting for its first keystroke. No
+  // stroke exists yet (mirrors anchored text: the stroke is born on commit,
+  // so an abandoned empty caret leaves nothing behind / no undo record).
+  const [pendingText, setPendingText] = useState<{ x: number; y: number } | null>(null);
+  // Phase 24 — ghost placeholder: world coords the cursor is hovering while a
+  // shape/sticky/text tool is armed and nothing is being drawn yet. Pure chrome
+  // (low-opacity, pointer-events:none) — never selectable, hit-tested, or saved.
+  const [ghost, setGhost] = useState<{ x: number; y: number } | null>(null);
   const visibilityCtx = useAnnotationsVisibility();
   const visible = visibilityCtx?.visible ?? true;
   const setVisible = useCallback(
@@ -671,6 +1379,11 @@ export function AnnotationsLayer() {
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const drawingRef = useRef<Stroke | null>(null);
   drawingRef.current = drawing;
+  // Phase 24 — pointer-down anchor + last cursor (world coords) for the active
+  // draw, so the resize modifiers (Shift 1:1 / Alt from-center) can re-constrain
+  // the draft on a bare keydown/keyup, not just on pointer-move.
+  const drawAnchorRef = useRef<{ x: number; y: number } | null>(null);
+  const lastDrawPointRef = useRef<{ x: number; y: number } | null>(null);
   /**
    * Phase 20 — latest strokes mirror so command builders can read the
    * pre-mutation snapshot synchronously (React state isn't refreshed
@@ -679,15 +1392,23 @@ export function AnnotationsLayer() {
   const strokesRef = useRef<Stroke[]>(strokes);
   strokesRef.current = strokes;
 
-  const isDraw = tool === 'pen' || tool === 'rect' || tool === 'arrow' || tool === 'ellipse';
+  const isDraw =
+    tool === 'pen' || tool === 'shape' || tool === 'arrow' || tool === 'sticky' || tool === 'text';
   const isErase = tool === 'eraser';
   const isActive = isDraw || isErase;
-  // T20 — rect + ellipse expose stroke weight too (FigJam ships thickness on
-  // every shape). The annotation toolbar reads supportsThickness to decide
-  // whether to render the Thin / Thick chips.
-  const supportsThickness =
-    tool === 'pen' || tool === 'arrow' || tool === 'rect' || tool === 'ellipse';
-  const supportsFill = tool === 'rect' || tool === 'ellipse';
+  // T20 / Phase 24 — every shape primitive carries stroke weight (FigJam ships
+  // thickness on all of them). The annotation toolbar reads supportsThickness
+  // to decide whether to render the Thin / Thick chips.
+  const supportsThickness = tool === 'pen' || tool === 'arrow' || tool === 'shape';
+  const supportsFill = tool === 'shape';
+  // Phase 24 — tools that show a cursor-following ghost placeholder.
+  const ghostCapable = tool === 'shape' || tool === 'sticky' || tool === 'text';
+
+  // Clear the ghost when the active tool stops being ghost-capable (or
+  // visibility toggles) so a stale ghost never lingers after a tool change.
+  useEffect(() => {
+    if (!ghostCapable || !visible) setGhost(null);
+  }, [ghostCapable, visible]);
 
   // Load existing annotations on mount.
   // Phase 8 Task 5 — seed lastAppliedSvgRef so the first Y.Map observe (when
@@ -835,7 +1556,7 @@ export function AnnotationsLayer() {
       const set = new Set(ids);
       const prev = strokesRef.current;
       const next = prev.filter(
-        (s) => !set.has(s.id) && !(s.tool === 'text' && set.has(s.anchorId))
+        (s) => !set.has(s.id) && !(s.tool === 'text' && s.anchorId != null && set.has(s.anchorId))
       );
       if (next.length === prev.length) return;
       commitStrokes(prev, next);
@@ -931,6 +1652,7 @@ export function AnnotationsLayer() {
       // We do NOT stopPropagation — viewport-controller listens on the host
       // ancestor and never claims a bare-left/no-space pointerdown anyway.
       e.preventDefault();
+      setGhost(null); // a draw is starting — the ghost placeholder is done
       try {
         (e.target as Element & { setPointerCapture?: (id: number) => void }).setPointerCapture?.(
           e.pointerId
@@ -939,6 +1661,8 @@ export function AnnotationsLayer() {
         /* some browsers reject capture on synthetic events */
       }
       const [wx, wy] = screenToWorld(e.clientX, e.clientY);
+      drawAnchorRef.current = { x: wx, y: wy };
+      lastDrawPointRef.current = { x: wx, y: wy };
       if (isErase) {
         eraseAt(wx, wy);
         return true;
@@ -948,30 +1672,49 @@ export function AnnotationsLayer() {
       const activeFill = supportsFill ? fill : null;
       if (tool === 'pen') {
         setDrawing({ id, tool: 'pen', color, width, points: [[wx, wy]] });
-      } else if (tool === 'rect') {
-        setDrawing({
-          id,
-          tool: 'rect',
-          color,
-          width,
-          x: wx,
-          y: wy,
-          w: 0,
-          h: 0,
-          fill: activeFill,
-        });
-      } else if (tool === 'ellipse') {
-        setDrawing({
-          id,
-          tool: 'ellipse',
-          color,
-          width,
-          cx: wx,
-          cy: wy,
-          rx: 0,
-          ry: 0,
-          fill: activeFill,
-        });
+      } else if (tool === 'shape') {
+        // Phase 24 — the single Shape tool maps its kind onto a stroke type:
+        // circle → ellipse; square/rounded → rect (cornerRadius 0 / 8);
+        // diamond/triangle/triangle-down → polygon.
+        if (shapeKind === 'circle') {
+          setDrawing({
+            id,
+            tool: 'ellipse',
+            color,
+            width,
+            cx: wx,
+            cy: wy,
+            rx: 0,
+            ry: 0,
+            fill: activeFill,
+          });
+        } else if (shapeKind === 'square' || shapeKind === 'rounded') {
+          setDrawing({
+            id,
+            tool: 'rect',
+            color,
+            width,
+            x: wx,
+            y: wy,
+            w: 0,
+            h: 0,
+            fill: activeFill,
+            cornerRadius: shapeKind === 'rounded' ? 8 : 0,
+          });
+        } else {
+          setDrawing({
+            id,
+            tool: 'polygon',
+            shape: shapeKind,
+            color,
+            width,
+            x: wx,
+            y: wy,
+            w: 0,
+            h: 0,
+            fill: activeFill,
+          });
+        }
       } else if (tool === 'arrow') {
         setDrawing({
           id,
@@ -983,14 +1726,40 @@ export function AnnotationsLayer() {
           x2: wx,
           y2: wy,
         });
+      } else if (tool === 'sticky') {
+        // Phase 21 — drag-create a paper card. Default size if the user just
+        // taps (no drag) is applied in endStroke.
+        setDrawing({
+          id,
+          tool: 'sticky',
+          color: stickyColor,
+          x: wx,
+          y: wy,
+          w: 0,
+          h: 0,
+          text: '',
+          fontSize: DEFAULT_FONT_SIZE,
+          cornerRadius: STICKY_CORNER_RADIUS,
+        });
+      } else if (tool === 'text') {
+        // Phase 21 — single click drops an editable caret at the click point.
+        // No stroke is created until the user commits real text (mirrors the
+        // anchored double-click flow), so an empty caret leaves nothing behind.
+        setPendingText({ x: wx, y: wy });
+        if (annotSel) annotSel.clear();
+        const stickyOnText = sticky.locked && sticky.tool === 'text';
+        if (!stickyOnText) setTool('move');
+        return true;
       }
       return true;
     },
     [
       tool,
+      shapeKind,
       color,
       fill,
       thickness,
+      stickyColor,
       supportsThickness,
       supportsFill,
       isActive,
@@ -998,6 +1767,9 @@ export function AnnotationsLayer() {
       visible,
       screenToWorld,
       eraseAt,
+      annotSel,
+      sticky,
+      setTool,
     ]
   );
 
@@ -1010,6 +1782,16 @@ export function AnnotationsLayer() {
         eraseAt(wx, wy);
         return;
       }
+      // Phase 24 — ghost placeholder. While nothing is being drawn, track the
+      // cursor so a translucent preview can follow it; an active draw hides it.
+      if (drawingRef.current == null) {
+        if (ghostCapable) setGhost({ x: wx, y: wy });
+        return;
+      }
+      setGhost(null);
+      lastDrawPointRef.current = { x: wx, y: wy };
+      const anchor = drawAnchorRef.current;
+      const mods: DrawMods = { shift: e.shiftKey, alt: e.altKey };
       setDrawing((cur) => {
         if (!cur) return cur;
         if (cur.tool === 'pen') {
@@ -1017,21 +1799,14 @@ export function AnnotationsLayer() {
           if (last && Math.hypot(wx - last[0], wy - last[1]) < 1) return cur;
           return { ...cur, points: [...cur.points, [wx, wy] as WorldPoint] };
         }
-        if (cur.tool === 'rect') {
-          return { ...cur, w: wx - cur.x, h: wy - cur.y };
-        }
-        if (cur.tool === 'ellipse') {
-          const rx = Math.abs(wx - cur.cx);
-          const ry = Math.abs(wy - cur.cy);
-          return { ...cur, rx, ry };
-        }
-        if (cur.tool === 'arrow') {
-          return { ...cur, x2: wx, y2: wy };
-        }
-        return cur;
+        // Phase 24 — Shift (1:1) / Alt (from-center) apply to every box + arrow
+        // shape, mirroring the resize handles. The anchor is the pointer-down
+        // point; without it (shouldn't happen mid-draw) fall back to no change.
+        if (!anchor) return cur;
+        return applyDrawModifiers(cur, anchor, wx, wy, mods);
       });
     },
-    [isActive, isErase, visible, screenToWorld, eraseAt]
+    [isActive, isErase, visible, screenToWorld, eraseAt, ghostCapable]
   );
 
   const endStroke = useCallback(() => {
@@ -1040,7 +1815,35 @@ export function AnnotationsLayer() {
     const cur = drawingRef.current;
     if (!cur) return;
     let final: Stroke | null = cur;
-    if (cur.tool === 'rect') final = normalizeRect(cur);
+    // Phase 24 — a bare tap (both axes below the drag threshold) drops a
+    // default-sized shape at the tap point so "click to place" works like
+    // FigJam; a real drag sizes it. A thin/degenerate drag still gets discarded
+    // by isStrokeMeaningful below.
+    const isTap = (w: number, h: number) => Math.abs(w) < 4 && Math.abs(h) < 4;
+    if (cur.tool === 'rect') {
+      const norm = normalizeRect(cur);
+      final = isTap(norm.w, norm.h)
+        ? { ...norm, x: cur.x, y: cur.y, w: SHAPE_DEFAULT_SIZE, h: SHAPE_DEFAULT_SIZE }
+        : norm;
+    } else if (cur.tool === 'polygon') {
+      const norm = normalizeBox(cur);
+      final = isTap(norm.w, norm.h)
+        ? { ...norm, x: cur.x, y: cur.y, w: SHAPE_DEFAULT_SIZE, h: SHAPE_DEFAULT_SIZE }
+        : norm;
+    } else if (cur.tool === 'ellipse') {
+      final =
+        cur.rx < 2 && cur.ry < 2
+          ? { ...cur, rx: SHAPE_DEFAULT_SIZE / 2, ry: SHAPE_DEFAULT_SIZE / 2 }
+          : cur;
+    } else if (cur.tool === 'sticky') {
+      const norm = normalizeSticky(cur);
+      // A bare tap (or a drag too small to be a usable card) drops a
+      // default-sized note at the tap point — FigJam parity.
+      final =
+        Math.abs(norm.w) < STICKY_MIN_SIZE || Math.abs(norm.h) < STICKY_MIN_SIZE
+          ? { ...norm, w: STICKY_DEFAULT_W, h: STICKY_DEFAULT_H }
+          : norm;
+    }
     if (final && !isStrokeMeaningful(final)) final = null;
     if (final) {
       const committed = final;
@@ -1051,6 +1854,9 @@ export function AnnotationsLayer() {
       // see + adjust it. annotSel is optional (some test harnesses mount
       // AnnotationsLayer without the provider), so guard the call.
       if (annotSel) annotSel.replace(committed.id);
+      // Phase 21 — a fresh sticky opens in edit mode (FigJam parity: drop a
+      // note, type immediately). Only meaningful deviation from rect/ellipse.
+      if (committed.tool === 'sticky') setEditingId(committed.id);
     }
     // 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
@@ -1061,6 +1867,8 @@ export function AnnotationsLayer() {
       const stickyOnThis = sticky.locked && sticky.tool === toolJustUsed;
       if (!stickyOnThis) setTool('move');
     }
+    drawAnchorRef.current = null;
+    lastDrawPointRef.current = null;
     setDrawing(null);
   }, [isActive, isErase, visible, commitStrokes, annotSel, setTool, sticky]);
 
@@ -1070,6 +1878,8 @@ export function AnnotationsLayer() {
   // a no-op.
   const cancelStroke = useCallback(() => {
     if (!drawingRef.current) return;
+    drawAnchorRef.current = null;
+    lastDrawPointRef.current = null;
     setDrawing(null);
   }, []);
 
@@ -1080,11 +1890,44 @@ export function AnnotationsLayer() {
     return () => document.removeEventListener('maude:cancel-stroke', onCancel);
   }, [cancelStroke]);
 
+  // Phase 24 — holding/releasing Shift or Alt mid-draw re-constrains the draft
+  // at the last cursor position (FigJam: the modifier engages while held, no
+  // pointer-move needed). Pen / text carry no box, so they're skipped.
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const onKey = (e: KeyboardEvent) => {
+      const cur = drawingRef.current;
+      const anchor = drawAnchorRef.current;
+      const p = lastDrawPointRef.current;
+      if (!cur || !anchor || !p) return;
+      if (e.key !== 'Shift' && e.key !== 'Alt') return;
+      if (cur.tool === 'pen' || cur.tool === 'text') return;
+      e.preventDefault();
+      const mods: DrawMods = { shift: e.shiftKey, alt: e.altKey };
+      setDrawing((c) => (c ? applyDrawModifiers(c, anchor, p.x, p.y, mods) : c));
+    };
+    document.addEventListener('keydown', onKey, true);
+    document.addEventListener('keyup', onKey, true);
+    return () => {
+      document.removeEventListener('keydown', onKey, true);
+      document.removeEventListener('keyup', onKey, true);
+    };
+  }, []);
+
   const renderStrokes = useMemo(
     () => (drawing ? [...strokes, drawing] : strokes),
     [strokes, drawing]
   );
 
+  // Phase 24 — the ghost descriptor handed to the SVG layer. Suppressed while a
+  // draw is in progress (the real preview takes over) so the two never overlap.
+  const ghostPreview = useMemo<GhostDescriptor | null>(() => {
+    if (!ghost || !ghostCapable || drawing) return null;
+    if (tool === 'text') return { kind: 'text', x: ghost.x, y: ghost.y, color };
+    if (tool === 'sticky') return { kind: 'sticky', x: ghost.x, y: ghost.y, color: stickyColor };
+    return { kind: 'shape', x: ghost.x, y: ghost.y, shapeKind, color };
+  }, [ghost, ghostCapable, drawing, tool, shapeKind, color, stickyColor]);
+
   const anchorsById = useMemo(() => {
     const map = new Map<string, RectStroke | EllipseStroke>();
     for (const s of strokes) {
@@ -1144,7 +1987,13 @@ export function AnnotationsLayer() {
       if (
         id &&
         t &&
-        (t === 'pen' || t === 'rect' || t === 'ellipse' || t === 'arrow' || t === 'text')
+        (t === 'pen' ||
+          t === 'rect' ||
+          t === 'ellipse' ||
+          t === 'polygon' ||
+          t === 'arrow' ||
+          t === 'text' ||
+          t === 'sticky')
       ) {
         return id;
       }
@@ -1155,7 +2004,7 @@ export function AnnotationsLayer() {
     // the main tool palette, the in-canvas draw chrome, the minimap, and the
     // right-click menu. Clicks on these route to their own handlers.
     const CHROME_SELECTOR =
-      '.dc-annot-ctx, .dc-tool-palette, .dc-annot-chrome, .dc-mm, .dc-context-menu, .dc-tp-popover, .dc-multi-artboard-tb, .dc-elem-ctx-tb, .dc-cv-eq-spacing-layer, .cm-composer, .cm-thread, .cm-mention-popup, .cm-pin, .dc-annot-resize-handle';
+      '.dc-annot-ctx, .dc-tool-palette, .dc-annot-chrome, .dc-mm, .dc-context-menu, .dc-tp-popover, .dc-multi-artboard-tb, .dc-elem-ctx-tb, .dc-cv-eq-spacing-layer, .cm-composer, .cm-thread, .cm-mention-popup, .cm-pin, .dc-annot-resize-handle, .dc-annot-editor';
 
     const onDown = (e: PointerEvent) => {
       if (e.button !== 0) return;
@@ -1274,7 +2123,10 @@ export function AnnotationsLayer() {
         const yMax = Math.max(final.ay, final.by);
         const hits: string[] = [];
         for (const s of strokesStoreRef.current.strokes) {
-          if (s.tool === 'text') continue; // text inherits its host's bbox
+          // Anchored text inherits its host's bbox (selected with the host);
+          // standalone text (Phase 21) has its own synthetic bbox and IS
+          // marquee-selectable.
+          if (s.tool === 'text' && s.anchorId != null && s.anchorId !== '') continue;
           const bb = strokeBBox(s);
           if (!bb) continue;
           if (bb.x + bb.w >= xMin && bb.x <= xMax && bb.y + bb.h >= yMin && bb.y <= yMax) {
@@ -1293,7 +2145,10 @@ export function AnnotationsLayer() {
 
     document.addEventListener('pointerdown', onDown, true);
     return () => document.removeEventListener('pointerdown', onDown, true);
-  }, [tool, annotSel, elementSel, screenToWorld, strokesStore]);
+    // commitStrokes is included defensively (it is a stable useCallback([]) ref,
+    // so this never re-binds the listener) to remove the latent stale-closure
+    // trap flagged in the Phase 24 frontend review.
+  }, [tool, annotSel, elementSel, screenToWorld, strokesStore, commitStrokes]);
 
   // Latest marquee + strokes refs for the doc-level pointerup callback
   // (avoids re-binding the listener on every state tick).
@@ -1302,7 +2157,9 @@ export function AnnotationsLayer() {
   const strokesStoreRef = useRef(strokesStore);
   strokesStoreRef.current = strokesStore;
 
-  // Double-click on a selected rect/ellipse enters text-edit mode.
+  // Double-click enters text-edit mode: rect/ellipse (anchored text), sticky
+  // (its own body), or a standalone text node (re-edit in place). Anchored text
+  // nodes are edited via their host, so a data-anchor-id text node is skipped.
   useEffect(() => {
     if (typeof document === 'undefined') return;
     if (tool !== 'move') return;
@@ -1312,7 +2169,13 @@ export function AnnotationsLayer() {
       if (!node) return;
       const id = node.getAttribute('data-id');
       const t = node.getAttribute('data-tool');
-      if (id && (t === 'rect' || t === 'ellipse')) {
+      if (!id) return;
+      if (t === 'rect' || t === 'ellipse' || t === 'sticky') {
+        e.preventDefault();
+        setEditingId(id);
+        return;
+      }
+      if (t === 'text' && !node.getAttribute('data-anchor-id')) {
         e.preventDefault();
         setEditingId(id);
       }
@@ -1356,6 +2219,103 @@ export function AnnotationsLayer() {
     [commitStrokes]
   );
 
+  // Phase 21 — sticky body edit. Sticky text is freeform (newlines preserved,
+  // no trim) and the card persists even when blank, so this only updates text.
+  const commitStickyText = useCallback(
+    (id: string, text: string) => {
+      const prev = strokesRef.current;
+      const existing = prev.find((s) => s.id === id && s.tool === 'sticky') as
+        | StickyStroke
+        | undefined;
+      if (!existing || existing.text === text) return;
+      const next = prev.map((s) => (s.id === id ? { ...existing, text } : s));
+      commitStrokes(prev, next, 'edit sticky');
+    },
+    [commitStrokes]
+  );
+
+  // Phase 21 — re-edit an EXISTING standalone text node. Empty text deletes it
+  // (same rule as anchored text).
+  const commitStandaloneText = useCallback(
+    (id: string, text: string) => {
+      const trimmed = text.trim();
+      const prev = strokesRef.current;
+      const existing = prev.find((s) => s.id === id && s.tool === 'text') as TextStroke | undefined;
+      if (!existing) return;
+      if (trimmed.length === 0) {
+        commitStrokes(
+          prev,
+          prev.filter((s) => s.id !== id),
+          'delete text'
+        );
+        return;
+      }
+      if (existing.text === trimmed) return;
+      commitStrokes(
+        prev,
+        prev.map((s) => (s.id === id ? { ...existing, text: trimmed } : s)),
+        'edit text'
+      );
+    },
+    [commitStrokes]
+  );
+
+  // Phase 21 — born-on-commit standalone text (from the text-tool caret). An
+  // empty caret persists nothing — ONE undo record only when real text lands.
+  const createStandaloneText = useCallback(
+    (x: number, y: number, text: string) => {
+      const trimmed = text.trim();
+      if (trimmed.length === 0) return;
+      const prev = strokesRef.current;
+      const id = rid();
+      const next: Stroke[] = [
+        ...prev,
+        { id, tool: 'text', color, fontSize: DEFAULT_FONT_SIZE, text: trimmed, x, y },
+      ];
+      commitStrokes(prev, next, 'add text');
+      if (annotSel) annotSel.replace(id);
+    },
+    [commitStrokes, color, annotSel]
+  );
+
+  // Phase 21 — resolve what (if anything) is being edited, and route a single
+  // commit call to the right writer. `editingId` doubles as the host id
+  // (anchored) OR the sticky/standalone stroke id; `pendingText` is the
+  // not-yet-born text caret.
+  const editingTarget = useMemo<EditingTarget>(() => {
+    if (pendingText) return { kind: 'pending', x: pendingText.x, y: pendingText.y };
+    if (!editingId) return null;
+    const host = anchorsById.get(editingId);
+    if (host) return { kind: 'anchored', anchorId: editingId, host };
+    const s = strokesById.get(editingId);
+    if (s?.tool === 'sticky') return { kind: 'sticky', sticky: s };
+    if (s?.tool === 'text' && (s.anchorId == null || s.anchorId === ''))
+      return { kind: 'standalone', text: s };
+    return null;
+  }, [pendingText, editingId, anchorsById, strokesById]);
+
+  const editingTargetRef = useRef(editingTarget);
+  editingTargetRef.current = editingTarget;
+
+  const commitEditing = useCallback(
+    (text: string) => {
+      const target = editingTargetRef.current;
+      setEditingId(null);
+      setPendingText(null);
+      if (!target) return;
+      if (target.kind === 'anchored') commitText(target.anchorId, text);
+      else if (target.kind === 'sticky') commitStickyText(target.sticky.id, text);
+      else if (target.kind === 'standalone') commitStandaloneText(target.text.id, text);
+      else if (target.kind === 'pending') createStandaloneText(target.x, target.y, text);
+    },
+    [commitText, commitStickyText, commitStandaloneText, createStandaloneText]
+  );
+
+  const cancelEditing = useCallback(() => {
+    setEditingId(null);
+    setPendingText(null);
+  }, []);
+
   // Keyboard: arrow nudge + Backspace/Delete remove selected strokes.
   useEffect(() => {
     if (typeof document === 'undefined') return;
@@ -1412,9 +2372,11 @@ export function AnnotationsLayer() {
         <AnnotationsInput
           isActive={isActive}
           visible={visible}
+          cursor={tools.find((t) => t.id === tool)?.cursor ?? 'crosshair'}
           beginStroke={beginStroke}
           moveStroke={moveStroke}
           endStroke={endStroke}
+          onLeave={() => setGhost(null)}
         />
         {visible ? (
           <AnnotationsSvg
@@ -1424,25 +2386,21 @@ export function AnnotationsLayer() {
             selectMode={tool === 'move'}
             selectedStrokes={selectedStrokes}
             marquee={marquee}
-            editingId={editingId}
-            existingTextFor={(anchorId) =>
-              strokes.find((s) => s.tool === 'text' && s.anchorId === anchorId) as
-                | TextStroke
-                | undefined
-            }
-            onCommitText={(anchorId, text) => {
-              commitText(anchorId, text);
-              setEditingId(null);
-            }}
-            onCancelEdit={() => setEditingId(null)}
+            ghost={ghostPreview}
+            editingTarget={editingTarget}
+            onCommitEdit={commitEditing}
+            onCancelEdit={cancelEditing}
           />
         ) : null}
         <AnnotationContextToolbar />
         {visible && tool === 'move' ? <AnnotationResizeOverlay store={strokesStore} /> : null}
         {isActive ? (
           <AnnotationsChrome
+            tool={tool}
             color={color}
             setColor={setColor}
+            stickyColor={stickyColor}
+            setStickyColor={setStickyColor}
             supportsFill={supportsFill}
             fill={fill}
             setFill={setFill}
@@ -1466,15 +2424,22 @@ AnnotationsLayer.displayName = 'AnnotationsLayer';
 function AnnotationsInput({
   isActive,
   visible,
+  cursor,
   beginStroke,
   moveStroke,
   endStroke,
+  onLeave,
 }: {
   isActive: boolean;
   visible: boolean;
+  /** Active-tool cursor (crosshair / text / cell) — applied to the capture
+   *  overlay so the affordance shows over the whole canvas while drawing. */
+  cursor: string;
   beginStroke: (e: ReactPointerEvent<HTMLDivElement>, spaceHeld: boolean) => boolean;
   moveStroke: (e: ReactPointerEvent<HTMLDivElement>) => void;
   endStroke: () => void;
+  /** Phase 24 — clear the ghost placeholder when the pointer leaves the canvas. */
+  onLeave: () => void;
 }) {
   const worldRef = useWorldRefContext();
   const host = worldRef?.current?.parentElement ?? null;
@@ -1509,13 +2474,17 @@ function AnnotationsInput({
     <div
       className="dc-annot-input"
       aria-hidden="true"
-      style={{ pointerEvents: interactive ? 'auto' : 'none' }}
+      style={{
+        pointerEvents: interactive ? 'auto' : 'none',
+        cursor: interactive ? cursor : 'default',
+      }}
       onPointerDown={(e) => {
         beginStroke(e, spaceHeldRef.current);
       }}
       onPointerMove={moveStroke}
       onPointerUp={endStroke}
       onPointerCancel={endStroke}
+      onPointerLeave={onLeave}
     />,
     host
   );
@@ -1534,9 +2503,9 @@ function AnnotationsSvg({
   selectMode,
   selectedStrokes,
   marquee,
-  editingId,
-  existingTextFor,
-  onCommitText,
+  ghost,
+  editingTarget,
+  onCommitEdit,
   onCancelEdit,
 }: {
   worldRef: ReturnType<typeof useWorldRefContext>;
@@ -1545,9 +2514,9 @@ function AnnotationsSvg({
   selectMode: boolean;
   selectedStrokes: readonly Stroke[];
   marquee: { ax: number; ay: number; bx: number; by: number } | null;
-  editingId: string | null;
-  existingTextFor: (anchorId: string) => TextStroke | undefined;
-  onCommitText: (anchorId: string, text: string) => void;
+  ghost: GhostDescriptor | null;
+  editingTarget: EditingTarget;
+  onCommitEdit: (text: string) => void;
   onCancelEdit: () => void;
 }) {
   const [, force] = useState({});
@@ -1558,10 +2527,31 @@ function AnnotationsSvg({
   }, [worldRef]);
   const target = worldRef?.current ?? null;
   if (!target) return null;
+  // A sticky whose body is being edited hides its read-only text so the
+  // editor textarea (rendered below at the same bbox) isn't double-painted.
+  const editingStickyId = editingTarget?.kind === 'sticky' ? editingTarget.sticky.id : null;
+  const anchoredExisting =
+    editingTarget?.kind === 'anchored'
+      ? (strokes.find((s) => s.tool === 'text' && s.anchorId === editingTarget.anchorId) as
+          | TextStroke
+          | undefined)
+      : undefined;
   return createPortal(
     <svg className="dc-annot-svg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        {/* Phase 21 — soft "lifted paper" drop shadow for sticky notes. */}
+        <filter id="dc-sticky-shadow" x="-25%" y="-25%" width="150%" height="170%">
+          <feDropShadow dx="0" dy="4" stdDeviation="8" floodColor="#000000" floodOpacity="0.28" />
+        </filter>
+      </defs>
       {strokes.map((s) => (
-        <StrokeNode key={s.id} stroke={s} anchorsById={anchorsById} interactive={selectMode} />
+        <StrokeNode
+          key={s.id}
+          stroke={s}
+          anchorsById={anchorsById}
+          interactive={selectMode}
+          editing={s.id === editingStickyId}
+        />
       ))}
       {selectedStrokes.map((s) => (
         <SelectionHalo
@@ -1582,12 +2572,45 @@ function AnnotationsSvg({
           vectorEffect="non-scaling-stroke"
         />
       ) : null}
-      {editingId ? (
+      {ghost ? <GhostPreview ghost={ghost} /> : null}
+      {editingTarget?.kind === 'anchored' ? (
         <TextEditor
-          anchorId={editingId}
-          host={anchorsById.get(editingId) ?? null}
-          existing={existingTextFor(editingId)}
-          onCommit={onCommitText}
+          anchorId={editingTarget.anchorId}
+          host={editingTarget.host}
+          existing={anchoredExisting}
+          onCommit={(_anchorId, text) => onCommitEdit(text)}
+          onCancel={onCancelEdit}
+        />
+      ) : null}
+      {editingTarget?.kind === 'sticky' ? (
+        <StickyEditor
+          sticky={editingTarget.sticky}
+          onCommit={onCommitEdit}
+          onCancel={onCancelEdit}
+        />
+      ) : null}
+      {editingTarget?.kind === 'standalone' ? (
+        <StandaloneTextEditor
+          x={editingTarget.text.x ?? 0}
+          y={editingTarget.text.y ?? 0}
+          fontSize={editingTarget.text.fontSize}
+          color={editingTarget.text.color}
+          initialText={editingTarget.text.text}
+          bold={editingTarget.text.bold}
+          strike={editingTarget.text.strike}
+          align={editingTarget.text.align ?? 'left'}
+          onCommit={onCommitEdit}
+          onCancel={onCancelEdit}
+        />
+      ) : null}
+      {editingTarget?.kind === 'pending' ? (
+        <StandaloneTextEditor
+          x={editingTarget.x}
+          y={editingTarget.y}
+          fontSize={DEFAULT_FONT_SIZE}
+          color={DEFAULT_COLOR}
+          initialText=""
+          onCommit={onCommitEdit}
           onCancel={onCancelEdit}
         />
       ) : null}
@@ -1649,10 +2672,14 @@ function TextEditor({
   const bbox = strokeBBox(host);
   if (!bbox) return null;
   const fontSize = existing?.fontSize ?? DEFAULT_FONT_SIZE;
+  // Phase 24 — match the committed render's bold / strike / align (anchored
+  // default align = centre).
+  const align = existing?.align ?? 'center';
   return (
     <foreignObject x={bbox.x} y={bbox.y} width={Math.max(20, bbox.w)} height={Math.max(20, bbox.h)}>
       <div
         ref={ref}
+        className="dc-annot-editor"
         contentEditable
         suppressContentEditableWarning
         aria-label="Edit annotation text"
@@ -1661,13 +2688,16 @@ function TextEditor({
           height: '100%',
           display: 'flex',
           alignItems: 'center',
-          justifyContent: 'center',
+          justifyContent:
+            align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center',
           padding: '0 8px',
           boxSizing: 'border-box',
-          textAlign: 'center',
+          textAlign: align,
           color: existing?.color ?? '#1a1a1a',
           fontSize: `${fontSize}px`,
           fontFamily: 'var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
+          fontWeight: existing?.bold ? 700 : undefined,
+          textDecoration: existing?.strike ? 'line-through' : undefined,
           lineHeight: 1.25,
           outline: 'none',
           background: 'transparent',
@@ -1692,6 +2722,163 @@ function TextEditor({
   );
 }
 
+// Phase 21 — sticky body editor. A textarea hosted in a foreignObject at the
+// card's bbox, so it word-wraps + moves with CSS zoom natively. Commit on blur,
+// cancel on Esc; Enter inserts a newline (sticky is multi-line).
+function StickyEditor({
+  sticky,
+  onCommit,
+  onCancel,
+}: {
+  sticky: StickyStroke;
+  onCommit: (text: string) => void;
+  onCancel: () => void;
+}) {
+  // A flex-centered contentEditable (NOT a textarea) so the edit view matches
+  // the committed `.dc-sticky-body` exactly — text stays centered, no jump on
+  // commit. Multi-line: Enter inserts a line break; Esc cancels; blur commits.
+  const ref = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.focus();
+    try {
+      const r = document.createRange();
+      r.selectNodeContents(el);
+      const sel = window.getSelection();
+      if (sel) {
+        sel.removeAllRanges();
+        sel.addRange(r);
+      }
+    } catch {
+      /* selection API blocked */
+    }
+  }, []);
+  const x = Math.min(sticky.x, sticky.x + sticky.w);
+  const y = Math.min(sticky.y, sticky.y + sticky.h);
+  const w = Math.abs(sticky.w);
+  const h = Math.abs(sticky.h);
+  return (
+    <foreignObject x={x} y={y} width={w} height={h}>
+      <div
+        xmlns="http://www.w3.org/1999/xhtml"
+        ref={ref}
+        className="dc-annot-editor dc-sticky-body"
+        contentEditable
+        suppressContentEditableWarning
+        aria-label="Edit sticky note text"
+        style={{ ...stickyBodyStyle(sticky), outline: 'none', cursor: 'text' }}
+        onBlur={() => onCommit(ref.current?.innerText ?? '')}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            e.preventDefault();
+            onCancel();
+          }
+        }}
+      >
+        {sticky.text}
+      </div>
+    </foreignObject>
+  );
+}
+
+// Phase 21 — standalone text editor. A single-line contentEditable box anchored
+// at the world (x, y). Enter / blur / outside-click commit; Esc cancels.
+function StandaloneTextEditor({
+  x,
+  y,
+  fontSize,
+  color,
+  initialText,
+  bold,
+  strike,
+  align,
+  onCommit,
+  onCancel,
+}: {
+  x: number;
+  y: number;
+  fontSize: number;
+  color: string;
+  initialText: string;
+  bold?: boolean;
+  strike?: boolean;
+  align?: TextAlign;
+  onCommit: (text: string) => void;
+  onCancel: () => void;
+}) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.focus();
+    try {
+      const r = document.createRange();
+      r.selectNodeContents(el);
+      const sel = window.getSelection();
+      if (sel) {
+        sel.removeAllRanges();
+        sel.addRange(r);
+      }
+    } catch {
+      /* selection API blocked */
+    }
+  }, []);
+  // Commit on outside click.
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const onDown = (e: PointerEvent) => {
+      const el = ref.current;
+      if (!el) return;
+      if (el.contains(e.target as Node)) return;
+      onCommit(el.innerText || '');
+    };
+    document.addEventListener('pointerdown', onDown, true);
+    return () => document.removeEventListener('pointerdown', onDown, true);
+  }, [onCommit]);
+  return (
+    <foreignObject x={x} y={y} width={600} height={Math.max(24, fontSize * 1.6)}>
+      <div
+        xmlns="http://www.w3.org/1999/xhtml"
+        ref={ref}
+        className="dc-annot-editor"
+        contentEditable
+        suppressContentEditableWarning
+        aria-label="Edit text"
+        style={{
+          display: 'inline-block',
+          minWidth: '8px',
+          whiteSpace: 'pre',
+          padding: '0 2px',
+          color,
+          fontSize: `${fontSize}px`,
+          fontFamily: 'var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
+          fontWeight: bold ? 700 : undefined,
+          textDecoration: strike ? 'line-through' : undefined,
+          textAlign: align ?? 'left',
+          lineHeight: 1.2,
+          outline: 'none',
+          background: 'transparent',
+          cursor: 'text',
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            e.preventDefault();
+            onCancel();
+            return;
+          }
+          if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            onCommit(ref.current?.innerText || '');
+          }
+        }}
+      >
+        {initialText}
+      </div>
+    </foreignObject>
+  );
+}
+
 function SelectionHalo({
   stroke,
   anchorsById,
@@ -1792,7 +2979,7 @@ function AnnotGroupBbox({
           width={handle}
           height={handle}
           fill="var(--maude-hud-accent, #d63b1f)"
-          stroke="var(--bg-0, #ffffff)"
+          stroke="var(--maude-chrome-bg-0, #ffffff)"
           strokeWidth={1}
           vectorEffect="non-scaling-stroke"
           rx={1}
@@ -1805,14 +2992,97 @@ function AnnotGroupBbox({
 // ─────────────────────────────────────────────────────────────────────────────
 // Stroke renderer
 
+/**
+ * Phase 24 — inline style for a sticky body (read view + editor share it so the
+ * read↔edit swap doesn't shift). Applies bold / strike / align atop the
+ * `.dc-sticky-body` defaults (top-left).
+ */
+function stickyBodyStyle(s: StickyStroke): CSSProperties {
+  const align = s.align ?? 'left';
+  return {
+    fontSize: `${s.fontSize}px`,
+    fontWeight: s.bold ? 700 : undefined,
+    textDecoration: s.strike ? 'line-through' : undefined,
+    textAlign: align,
+    justifyContent: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center',
+  };
+}
+
+/**
+ * Phase 24 — the translucent cursor-following ghost placeholder. Pure chrome:
+ * `pointer-events:none`, never added to `strokes`, so it can't be selected,
+ * hit-tested, erased, or persisted. Static (no animation) — reduced-motion safe.
+ * Geometry mirrors what a click/tap would create at the cursor (shape +
+ * SHAPE_DEFAULT_SIZE top-left at cursor; sticky default square; text I-beam).
+ */
+function GhostPreview({ ghost }: { ghost: GhostDescriptor }) {
+  const { x, y } = ghost;
+  if (ghost.kind === 'text') {
+    const h = 22;
+    return (
+      <path
+        d={`M${x - 4} ${y}H${x + 4}M${x} ${y}V${y + h}M${x - 4} ${y + h}H${x + 4}`}
+        stroke={ghost.color}
+        strokeWidth={1.5}
+        strokeOpacity={0.5}
+        fill="none"
+        vectorEffect="non-scaling-stroke"
+        pointerEvents="none"
+      />
+    );
+  }
+  if (ghost.kind === 'sticky') {
+    const s = STICKY_DEFAULT_W;
+    return (
+      <rect
+        x={x}
+        y={y}
+        width={s}
+        height={s}
+        rx={STICKY_CORNER_RADIUS}
+        ry={STICKY_CORNER_RADIUS}
+        fill={ghost.color}
+        fillOpacity={0.32}
+        stroke={ghost.color}
+        strokeOpacity={0.55}
+        strokeWidth={1.5}
+        vectorEffect="non-scaling-stroke"
+        pointerEvents="none"
+      />
+    );
+  }
+  // shape — dashed outline of the default-sized primitive at the cursor.
+  const sz = SHAPE_DEFAULT_SIZE;
+  const common = {
+    fill: 'none',
+    stroke: ghost.color,
+    strokeWidth: 2,
+    strokeOpacity: 0.5,
+    strokeDasharray: '6 5',
+    vectorEffect: 'non-scaling-stroke' as const,
+    pointerEvents: 'none' as const,
+  };
+  if (ghost.shapeKind === 'circle') {
+    return <ellipse cx={x + sz / 2} cy={y + sz / 2} rx={sz / 2} ry={sz / 2} {...common} />;
+  }
+  if (ghost.shapeKind === 'square' || ghost.shapeKind === 'rounded') {
+    const r = ghost.shapeKind === 'rounded' ? 8 : 0;
+    return <rect x={x} y={y} width={sz} height={sz} rx={r} ry={r} {...common} />;
+  }
+  return <polygon points={polygonPoints(ghost.shapeKind, x, y, sz, sz)} {...common} />;
+}
+
 function StrokeNode({
   stroke,
   anchorsById,
   interactive,
+  editing = false,
 }: {
   stroke: Stroke;
   anchorsById: Map<string, RectStroke | EllipseStroke>;
   interactive: boolean;
+  /** Phase 21 — sticky-only: hide the read-only body while its editor is up. */
+  editing?: boolean;
 }) {
   // In Move mode, individual stroke nodes claim pointer events so we can
   // hit-test them from the doc-level capture listener. In draw mode the
@@ -1820,29 +3090,103 @@ function StrokeNode({
   const hitMode = interactive ? 'visiblePainted' : ('none' as const);
   const strokeHit = interactive ? 'stroke' : ('none' as const);
   if (stroke.tool === 'text') {
-    const host = anchorsById.get(stroke.anchorId);
-    const bbox = host ? strokeBBox(host) : null;
-    if (!bbox) return null;
-    const cx = bbox.x + bbox.w / 2;
-    const cy = bbox.y + bbox.h / 2;
+    // Anchored text renders centered in its host; standalone (Phase 21) renders
+    // top-left-anchored at its own world (x, y).
+    // Phase 24 — bold / strike / align applied to the rendered <text>.
+    const textStyle = {
+      fontFamily: 'var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
+      fontWeight: stroke.bold ? 700 : undefined,
+      textDecoration: stroke.strike ? 'line-through' : undefined,
+    } as const;
+    if (stroke.anchorId != null && stroke.anchorId !== '') {
+      const host = anchorsById.get(stroke.anchorId);
+      const bbox = host ? strokeBBox(host) : null;
+      if (!bbox) return null;
+      const cy = bbox.y + bbox.h / 2;
+      const align = stroke.align ?? 'center';
+      const pad = 8;
+      const anchor = align === 'left' ? 'start' : align === 'right' ? 'end' : 'middle';
+      const tx =
+        align === 'left'
+          ? bbox.x + pad
+          : align === 'right'
+            ? bbox.x + bbox.w - pad
+            : bbox.x + bbox.w / 2;
+      return (
+        <text
+          data-id={stroke.id}
+          data-tool="text"
+          data-anchor-id={stroke.anchorId}
+          data-font-size={stroke.fontSize}
+          x={tx}
+          y={cy}
+          fill={stroke.color}
+          fontSize={stroke.fontSize}
+          textAnchor={anchor}
+          dominantBaseline="middle"
+          style={textStyle}
+        >
+          {stroke.text}
+        </text>
+      );
+    }
+    const align = stroke.align ?? 'left';
+    const anchor = align === 'left' ? 'start' : align === 'right' ? 'end' : 'middle';
     return (
       <text
         data-id={stroke.id}
         data-tool="text"
-        data-anchor-id={stroke.anchorId}
         data-font-size={stroke.fontSize}
-        x={cx}
-        y={cy}
+        x={stroke.x ?? 0}
+        y={stroke.y ?? 0}
         fill={stroke.color}
         fontSize={stroke.fontSize}
-        textAnchor="middle"
-        dominantBaseline="middle"
-        style={{ fontFamily: 'var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)' }}
+        textAnchor={anchor}
+        dominantBaseline="hanging"
+        pointerEvents={interactive ? 'visiblePainted' : 'none'}
+        style={textStyle}
       >
         {stroke.text}
       </text>
     );
   }
+  if (stroke.tool === 'sticky') {
+    const x = Math.min(stroke.x, stroke.x + stroke.w);
+    const y = Math.min(stroke.y, stroke.y + stroke.h);
+    const w = Math.abs(stroke.w);
+    const h = Math.abs(stroke.h);
+    const r = stroke.cornerRadius ?? STICKY_CORNER_RADIUS;
+    return (
+      <g data-id={stroke.id} data-tool="sticky" pointerEvents={hitMode}>
+        {/* Paper card: soft drop shadow + hairline edge so it reads as a
+            lifted sticky, not a flat colored box (FigJam-style). */}
+        <rect
+          x={x}
+          y={y}
+          width={w}
+          height={h}
+          rx={r}
+          ry={r}
+          fill={stroke.color}
+          stroke="rgba(0,0,0,0.05)"
+          strokeWidth={1}
+          vectorEffect="non-scaling-stroke"
+          filter="url(#dc-sticky-shadow)"
+        />
+        {editing ? null : (
+          <foreignObject x={x} y={y} width={w} height={h} pointerEvents="none">
+            <div
+              xmlns="http://www.w3.org/1999/xhtml"
+              className="dc-sticky-body"
+              style={stickyBodyStyle(stroke)}
+            >
+              {stroke.text}
+            </div>
+          </foreignObject>
+        )}
+      </g>
+    );
+  }
   const common = {
     'data-id': stroke.id,
     'data-tool': stroke.tool,
@@ -1858,6 +3202,7 @@ function StrokeNode({
   if (stroke.tool === 'rect') {
     const x = Math.min(stroke.x, stroke.x + stroke.w);
     const y = Math.min(stroke.y, stroke.y + stroke.h);
+    const r = stroke.cornerRadius ?? 0;
     return (
       <rect
         {...common}
@@ -1866,6 +3211,8 @@ function StrokeNode({
         y={y}
         width={Math.abs(stroke.w)}
         height={Math.abs(stroke.h)}
+        rx={r}
+        ry={r}
         pointerEvents={hitMode}
       />
     );
@@ -1883,22 +3230,64 @@ function StrokeNode({
       />
     );
   }
-  const head = arrowHeadPoints(stroke.x1, stroke.y1, stroke.x2, stroke.y2, stroke.width);
+  if (stroke.tool === 'polygon') {
+    const nx = Math.min(stroke.x, stroke.x + stroke.w);
+    const ny = Math.min(stroke.y, stroke.y + stroke.h);
+    return (
+      <polygon
+        {...common}
+        data-shape={stroke.shape}
+        fill={stroke.fill ?? 'none'}
+        points={polygonPoints(stroke.shape, nx, ny, Math.abs(stroke.w), Math.abs(stroke.h))}
+        strokeDasharray={stroke.dashed ? '6 4' : undefined}
+        pointerEvents={hitMode}
+      />
+    );
+  }
+  // arrow — Phase 24 renders the SAME ordered primitives the serializer emits
+  // (canvas-arrowheads), so the on-canvas and persisted forms can never drift.
   return (
     <g {...common} fill="none" pointerEvents={hitMode}>
-      <line x1={stroke.x1} y1={stroke.y1} x2={stroke.x2} y2={stroke.y2} />
-      <polyline points={head} fill={stroke.color} />
+      {arrowPrimitives(stroke).map((p, i) => renderArrowPrimitive(p, i))}
     </g>
   );
 }
 
+/** Map one arrow primitive to JSX (heads inherit stroke from the parent <g>). */
+function renderArrowPrimitive(p: SvgPrimitive, key: number): JSX.Element {
+  switch (p.el) {
+    case 'line':
+      return (
+        <line
+          key={key}
+          x1={p.x1}
+          y1={p.y1}
+          x2={p.x2}
+          y2={p.y2}
+          strokeDasharray={p.dash ? '6 4' : undefined}
+        />
+      );
+    case 'path':
+      return <path key={key} d={p.d} strokeDasharray={p.dash ? '6 4' : undefined} />;
+    case 'polyline':
+      return <polyline key={key} points={p.points} fill={p.fill} />;
+    case 'polygon':
+      return <polygon key={key} points={p.points} fill={p.fill} />;
+    case 'circle':
+      return <circle key={key} cx={p.cx} cy={p.cy} r={p.r} fill={p.fill} />;
+  }
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Chrome — color swatches + (optional fill picker) + (optional thickness chip)
 // + presentation toggle + help button.
 
 function AnnotationsChrome({
+  tool,
   color,
   setColor,
+  stickyColor,
+  setStickyColor,
   supportsFill,
   fill,
   setFill,
@@ -1906,8 +3295,11 @@ function AnnotationsChrome({
   thickness,
   setThickness,
 }: {
+  tool: Tool;
   color: string;
   setColor: (c: string) => void;
+  stickyColor: string;
+  setStickyColor: (c: string) => void;
   supportsFill: boolean;
   fill: string | null;
   setFill: (f: string | null) => void;
@@ -1915,10 +3307,32 @@ function AnnotationsChrome({
   thickness: Thickness;
   setThickness: (t: Thickness) => void;
 }) {
+  // Sticky tool picks a paper tint (its own palette); every other draw tool
+  // picks ink from the stroke PALETTE.
+  if (tool === 'sticky') {
+    return (
+      <div className="dc-annot-chrome" role="toolbar" aria-label="Sticky note tools">
+        <div className="dc-annot-swatches" role="radiogroup" aria-label="Sticky color">
+          {STICKY_PALETTE.map((c) => (
+            <button
+              key={c}
+              type="button"
+              className="dc-annot-sw"
+              aria-pressed={c === stickyColor}
+              aria-label={`Sticky color ${c}`}
+              title={`Sticky color ${c}`}
+              style={{ background: c }}
+              onClick={() => setStickyColor(c)}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
   return (
     <div className="dc-annot-chrome" role="toolbar" aria-label="Annotation tools">
       <div className="dc-annot-swatches" role="radiogroup" aria-label="Stroke color">
-        {PALETTE.map((c) => (
+        {STROKE_PALETTE.map((c) => (
           <button
             key={c}
             type="button"
@@ -1963,21 +3377,23 @@ function AnnotationsChrome({
           <div className="dc-annot-sep" />
           <button
             type="button"
-            className="dc-annot-btn"
+            className="dc-annot-ibtn"
+            aria-label="Thin stroke"
             aria-pressed={thickness === STROKE_WIDTH_THIN}
             title="Thin (3px)"
             onClick={() => setThickness(STROKE_WIDTH_THIN)}
           >
-            Thin
+            <IconLineThin />
           </button>
           <button
             type="button"
-            className="dc-annot-btn"
+            className="dc-annot-ibtn"
+            aria-label="Thick stroke"
             aria-pressed={thickness === STROKE_WIDTH_THICK}
             title="Thick (6px)"
             onClick={() => setThickness(STROKE_WIDTH_THICK)}
           >
-            Thick
+            <IconLineThick />
           </button>
         </>
       ) : null}