@1agh/maude 0.28.1 → 0.29.0

package/{plugins/design/dev-server → apps/studio}/annotations-layer.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       annotations-layer.tsx — FigJam-style annotation overlay
- * @scope      plugins/design/dev-server/annotations-layer.tsx
+ * @scope      apps/studio/annotations-layer.tsx
  * @purpose    Portal-rendered draw layer. Strokes live in world coords and
  *             render INSIDE `.dc-world` via `createPortal`, so CSS `zoom` +
  *             `translate` on the world move them in lockstep with artboards
@@ -24,6 +24,7 @@
 import {
   type CSSProperties,
   createContext,
+  type KeyboardEvent as ReactKeyboardEvent,
   type PointerEvent as ReactPointerEvent,
   useCallback,
   useContext,
@@ -49,6 +50,14 @@ import { crossedDragThreshold, type Tool } 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 {
+  isHttpUrl,
+  linkDomain,
+  prettifyUrl,
+  showCanvasToast,
+  uploadAsset,
+  useCanvasMediaDrop,
+} from './use-canvas-media-drop.tsx';
 import { useCollab } from './use-collab.tsx';
 import { useSelectionSetOptional } from './use-selection-set.tsx';
 import { type ShapeKind, useToolMode } from './use-tool-mode.tsx';
@@ -80,6 +89,13 @@ export interface PenStroke {
   color: string;
   width: number;
   points: WorldPoint[];
+  /**
+   * Highlighter (item 8). A `highlighter:true` pen reuses ALL pen draw / erase /
+   * hit-test / translate logic; it just renders wide + translucent with
+   * `mix-blend-mode:multiply` (overlaps darken) and carries a translucent
+   * marker colour. Absent / false = a normal solid pen (back-compat).
+   */
+  highlighter?: boolean;
 }
 export interface RectStroke {
   id: string;
@@ -93,6 +109,8 @@ export interface RectStroke {
   fill?: string | null;
   /** Phase 21 — corner radius (rx/ry). Absent / 0 = sharp 90° corners (back-compat). */
   cornerRadius?: number;
+  /** Dashed outline (stroke-dasharray). Absent / false = solid (back-compat). */
+  dashed?: boolean;
 }
 export interface EllipseStroke {
   id: string;
@@ -104,6 +122,8 @@ export interface EllipseStroke {
   rx: number;
   ry: number;
   fill?: string | null;
+  /** Dashed outline (stroke-dasharray). Absent / false = solid (back-compat). */
+  dashed?: boolean;
 }
 /**
  * Phase 24 — diamond / triangle / triangle-down primitives. Stored as a bbox
@@ -163,6 +183,12 @@ export interface TextStroke {
   bold?: boolean;
   /** Phase 24 — strikethrough. Absent / false = none (back-compat). */
   strike?: boolean;
+  /** Italic style (item 4b). Absent / false = upright (back-compat). */
+  italic?: boolean;
+  /** Underline (item 4b). Combined with strike into one text-decoration. */
+  underline?: boolean;
+  /** List style (item 4c). Markers are render-only — never stored in `text`. */
+  listType?: ListType;
   /**
    * Phase 24 — horizontal alignment. Absent default differs by kind: anchored
    * text = 'center' (legacy, byte-identical), standalone = 'left'.
@@ -186,9 +212,59 @@ export interface StickyStroke {
   bold?: boolean;
   /** Phase 24 — strikethrough body. Absent / false = none. */
   strike?: boolean;
+  /** Italic body (item 4b). Absent / false = upright. */
+  italic?: boolean;
+  /** Underline body (item 4b). Combined with strike into one text-decoration. */
+  underline?: boolean;
+  /** List style (item 4c). Markers are render-only — never stored in `text`. */
+  listType?: ListType;
   /** Phase 24 — body alignment. Absent = 'left' (FigJam sticky default). */
   align?: TextAlign;
 }
+/**
+ * Phase 23 — dropped / pasted raster image. Free-floating, rect-shaped, moves
+ * and resizes like any annotation. `href` is ALWAYS a relative
+ * `assets/<sha8>.<ext>` path (never a data: URL — keeps the persisted SVG under
+ * its 1 MB cap and matches the sanitizer's `<image>` href allowlist). The live
+ * canvas may briefly render an optimistic `blob:` href before the upload swaps
+ * it to the content-addressed path; only the `assets/…` form is ever persisted.
+ */
+export interface ImageStroke {
+  id: string;
+  tool: 'image';
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  href: string;
+  /**
+   * Alt text. Persisted in `data-alt` and emitted as `aria-label` on the
+   * `<image>`, so it travels with the exported / saved SVG (where AT reads it).
+   * NOTE: in the LIVE canvas the whole annotation SVG root is `aria-hidden`
+   * (editor chrome — AT shouldn't be flooded by decorative strokes), so the live
+   * in-canvas `aria-label` is pruned; the alt's audience is the export. Absent ⇒ ''.
+   */
+  alt?: string;
+}
+/**
+ * Phase 23 — pasted / dropped URL rendered as a client-only preview chip. NO
+ * server fetch and NO external favicon (the dev-server stays zero-egress —
+ * DDR-054/060). `title` comes from the clipboard/DnD `text/html` anchor text
+ * when present, else the prettified URL; `domain` is `new URL(url).hostname`.
+ * Persists as an allowlisted `<g>` (rect + vector glyph + two `<text>` runs) —
+ * the click-to-open handler reads `data-url`, no `<a href>` is ever stored.
+ */
+export interface LinkStroke {
+  id: string;
+  tool: 'link';
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  url: string;
+  title: string;
+  domain: string;
+}
 export type Stroke =
   | PenStroke
   | RectStroke
@@ -196,7 +272,9 @@ export type Stroke =
   | PolygonStroke
   | ArrowStroke
   | TextStroke
-  | StickyStroke;
+  | StickyStroke
+  | ImageStroke
+  | LinkStroke;
 
 /**
  * Phase 21 — what the inline editor is currently bound to. `anchored` edits
@@ -235,6 +313,45 @@ type PaletteColor = (typeof STROKE_PALETTE)[number];
 // 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];
+// Annotation polish — the LIVE default ink follows the canvas theme so a
+// freshly-armed pen/shape/arrow/text reads true on dark canvases (the
+// `#1f1f1f` ink is near-invisible on a dark mock). Light → the `#1f1f1f`
+// ink slot; dark → a light ink that reads on dark. This is the live draw
+// default ONLY — `DEFAULT_COLOR` stays the parse fallback (round-trip
+// determinism + back-compat), and stored strokes keep their literal hex
+// (FigJam parity — no retroactive recolour).
+const DEFAULT_INK_DARK = '#ededed';
+export function resolveDefaultInk(theme: string): string {
+  return theme === 'dark' ? DEFAULT_INK_DARK : DEFAULT_COLOR;
+}
+
+/**
+ * The canvas-shell CHROME theme — `data-maude-theme` on `<html>`, default
+ * 'dark'. This (NOT the DS `data-theme`, which is deliberately separate and
+ * themes only artboard palettes — canvas-shell.tsx) is what flips the canvas
+ * BACKGROUND the annotation ink sits on, so the theme-aware default ink follows
+ * it. Re-resolves on `data-maude-theme` mutation (the dark/light toggle posts it
+ * into the iframe after mount, so we re-read once on mount too).
+ */
+function readChromeTheme(): 'light' | 'dark' {
+  if (typeof document === 'undefined') return 'dark';
+  return document.documentElement.dataset.maudeTheme === 'light' ? 'light' : 'dark';
+}
+function useCanvasChromeTheme(): 'light' | 'dark' {
+  const [theme, setTheme] = useState<'light' | 'dark'>(readChromeTheme);
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const sync = () => setTheme(readChromeTheme());
+    sync(); // catch a value stamped between the initializer and this effect
+    const obs = new MutationObserver(sync);
+    obs.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-maude-theme'],
+    });
+    return () => obs.disconnect();
+  }, []);
+  return theme;
+}
 
 // Light tints, index-paired to STROKE_PALETTE — picking "blue fill" gives a
 // pale blue wash under a saturated stroke, exactly like FigJam shapes.
@@ -250,6 +367,24 @@ export const FILL_PALETTE = [
   '#e7e7e7', // ink tint
 ] as const;
 
+// Neutral fill wash for the ink slot (no paired hue) — light vs dark canvas.
+const NEUTRAL_FILL_LIGHT = FILL_PALETTE[8]; // '#e7e7e7'
+const NEUTRAL_FILL_DARK = '#2a2a2a';
+/**
+ * Annotation polish (item 2) — the LIVE default fill for a freshly-armed Shape
+ * tool. A coloured ink maps to its index-paired light tint (FigJam: a saturated
+ * outline over a pale wash of the same hue); the ink slot / themed-dark ink /
+ * any unknown hex maps to a neutral wash. "No fill" stays one click away (the
+ * chrome's None swatch) and, once picked, sticks (fillTouchedRef). Stored
+ * shapes keep their literal fill — only NEW shapes pick up this default.
+ */
+export function defaultFillFor(color: string, theme: string): string {
+  const idx = STROKE_PALETTE.indexOf(color as PaletteColor);
+  // Coloured ink (slots 0–7) → its paired tint; ink slot (8) / unknown → neutral.
+  if (idx >= 0 && idx < FILL_PALETTE.length - 1) return FILL_PALETTE[idx];
+  return theme === 'dark' ? NEUTRAL_FILL_DARK : NEUTRAL_FILL_LIGHT;
+}
+
 const STROKE_WIDTH_THIN = 3;
 const STROKE_WIDTH_THICK = 6;
 type Thickness = typeof STROKE_WIDTH_THIN | typeof STROKE_WIDTH_THICK;
@@ -277,6 +412,22 @@ export const STICKY_PALETTE = [
 ] as const;
 const DEFAULT_STICKY_COLOR = STICKY_PALETTE[0];
 const STICKY_CORNER_RADIUS = 8;
+
+// Annotation polish (item 8) — highlighter marker hues. Translucent 8-digit hex
+// (RRGGBBAA, ~50% alpha) so overlaps darken under `mix-blend-mode:multiply`.
+// Yellow is the default; green / pink / blue follow. Wholly separate from the
+// ink PALETTE — the highlighter draws a soft wash, not a saturated line.
+export const HIGHLIGHTER_PALETTE = [
+  '#ffe24d80', // yellow (default)
+  '#7ce8a080', // green
+  '#ff9ed180', // pink
+  '#7ec5ff80', // blue
+] as const;
+const DEFAULT_HIGHLIGHTER_COLOR = HIGHLIGHTER_PALETTE[0];
+// Highlighter marker nib widths (item 8) — three sizes (thin / medium / thick),
+// all wider than the pen. Default medium.
+const HIGHLIGHTER_WIDTHS = [10, 18, 28] as const;
+const DEFAULT_HIGHLIGHTER_WIDTH = HIGHLIGHTER_WIDTHS[1];
 // Phase 24 — stickies are 1:1; the default tap size is a square.
 const STICKY_DEFAULT_W = 200;
 const STICKY_DEFAULT_H = 200;
@@ -285,6 +436,42 @@ const STICKY_MIN_SIZE = 40;
 // tap point (FigJam parity: click commits, drag sizes). Square aspect.
 const SHAPE_DEFAULT_SIZE = 120;
 
+// Phase 23 — image + link media strokes.
+/** Below this side an image stroke is discarded as an accidental micro-drop. */
+const IMAGE_MIN_SIZE = 16;
+/** Longest side a freshly dropped/pasted image is scaled down to (world px). */
+export const IMAGE_MAX_DROP_SIDE = 480;
+const LINK_DEFAULT_W = 260;
+const LINK_DEFAULT_H = 76;
+const LINK_CARD_FILL = '#ffffff';
+const LINK_CARD_STROKE = '#d4d4d8';
+const LINK_DOMAIN_FILL = '#71717a';
+const LINK_TITLE_FILL = '#18181b';
+const LINK_GLYPH_STROKE = '#52525b';
+// Lucide "link" icon (24×24 viewBox) — two interlocked loops. ONE source for the
+// serialized nested-<svg> glyph AND the StrokeNode render so re-serialize stays
+// byte-stable. The parser ignores the glyph entirely (it reads data-* + the
+// <rect> geometry), so render/serialize only need to agree visually.
+const LINK_GLYPH_D1 = 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71';
+const LINK_GLYPH_D2 = 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71';
+
+/** Card text positions, derived purely from the bbox (idempotent round-trip). */
+function linkCardLayout(x: number, y: number, w: number, h: number) {
+  const textX = x + 48;
+  return {
+    glyph: { x: x + 16, y: y + h / 2 - 10, size: 20 },
+    textX,
+    domain: { y: y + h / 2 - 14, fontSize: 11 },
+    title: { y: y + h / 2, fontSize: 13 },
+    textMaxChars: Math.max(8, Math.floor((w - 60) / 7)),
+  };
+}
+
+/** Clamp a link title to the card's character budget (pure → byte-stable). */
+function clampLinkTitle(title: string, maxChars: number): string {
+  return title.length > maxChars ? `${title.slice(0, Math.max(1, maxChars - 1))}…` : title;
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Pure helpers — exported for unit tests.
 
@@ -296,6 +483,19 @@ function esc(s: string): string {
   return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
 }
 
+/**
+ * Phase 23 — attribute-safe escape: `esc()` plus `>`. The legacy text/sticky
+ * paths only put user text in element CONTENT (where a bare `>` is harmless),
+ * so `esc()` never escaped it; but the media strokes carry user text (pasted
+ * link title/url, image alt) inside ATTRIBUTES (data-title / data-url / data-alt
+ * / href). A bare `>` there would prematurely close the tag and confuse the
+ * `[^>]*>` element scan in `sanitizeAnnotationSvg`. Use this for every media
+ * attribute value; element CONTENT keeps plain `esc()`.
+ */
+function escAttr(s: string): string {
+  return esc(s).replace(/>/g, '&gt;');
+}
+
 export function penPathD(points: readonly WorldPoint[]): string {
   if (points.length === 0) return '';
   const [first, ...rest] = points as readonly WorldPoint[];
@@ -305,6 +505,202 @@ export function penPathD(points: readonly WorldPoint[]): string {
   return d;
 }
 
+// ── Multi-line text (item 4a) ────────────────────────────────────────────────
+// SVG <text> ignores `\n`, so multi-line annotation text must render as one
+// <tspan> per line. The serialized + live forms share this geometry; single-
+// line text keeps the legacy single-run form (no tspan) so the canary holds.
+
+/** Line-height multiplier for multi-line annotation text. */
+const TEXT_LINE_HEIGHT = 1.25;
+
+/** Split a text body into its display lines. */
+export function splitTextLines(text: string): string[] {
+  return text.split('\n');
+}
+
+/** Annotation polish (item 4c) — list style for text + sticky bodies. */
+export type ListType = 'bullet' | 'number';
+
+/**
+ * Render-time list marker prefix for one line. Markers are PRESENTATION ONLY —
+ * never stored in `text` (DDR) — so the stored string stays clean and
+ * contentEditable editing is sane. Bullet → `• `; number → `${i + 1}. `.
+ */
+function listPrefixedLine(line: string, index: number, list?: ListType): string {
+  if (!list) return line;
+  return list === 'bullet' ? `• ${line}` : `${index + 1}. ${line}`;
+}
+
+/** Inverse of {@link listPrefixedLine} — strip a render-time marker on parse. */
+function stripListPrefix(line: string, index: number, list?: ListType): string {
+  if (!list) return line;
+  const marker = list === 'bullet' ? '• ' : `${index + 1}. `;
+  return line.startsWith(marker) ? line.slice(marker.length) : line;
+}
+
+/** Prefix every line of a body with its list marker (for the editor display). */
+export function listPrefixedBody(text: string, list?: ListType): string {
+  if (!list) return text;
+  return splitTextLines(text)
+    .map((line, i) => listPrefixedLine(line, i, list))
+    .join('\n');
+}
+
+/**
+ * Strip list markers off editor `innerText` on commit (item 4c). Generic — a
+ * `•` bullet OR any leading `N. ` number is removed once per line, regardless of
+ * the index the user actually typed, so re-numbering while editing round-trips
+ * cleanly (the stored text stays marker-free; the read view re-derives markers).
+ */
+export function stripEditorMarkers(text: string, list?: ListType): string {
+  if (!list) return text;
+  const re = list === 'bullet' ? /^• / : /^\d+\.\s/;
+  return splitTextLines(text)
+    .map((line) => line.replace(re, ''))
+    .join('\n');
+}
+
+/**
+ * Combined `text-decoration` SVG attribute for strike + underline (item 4b).
+ * Strike-only stays `text-decoration="line-through"` (byte-identical to the
+ * legacy Phase-24 form); both → `line-through underline`; neither → empty.
+ */
+function textDecoAttr(strike?: boolean, underline?: boolean): string {
+  const vals: string[] = [];
+  if (strike) vals.push('line-through');
+  if (underline) vals.push('underline');
+  return vals.length ? ` text-decoration="${vals.join(' ')}"` : '';
+}
+
+/** CSS `text-decoration` value for the live render (strike + underline). */
+function textDecoCss(strike?: boolean, underline?: boolean): string | undefined {
+  const vals: string[] = [];
+  if (strike) vals.push('line-through');
+  if (underline) vals.push('underline');
+  return vals.length ? vals.join(' ') : undefined;
+}
+
+/**
+ * Inline text formatting carried by an editor through commit (item 4b/4d
+ * unification) — so Cmd+B / Cmd+I / Cmd+U toggled WHILE editing land on the
+ * stroke. `strike` rides along unchanged (no shortcut; toolbar-only).
+ */
+export interface EditorFmt {
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strike?: boolean;
+}
+/** Normalize an EditorFmt → only-true keys kept; false becomes undefined so the
+ *  serialize-only-when-set invariant + byte-identical canary hold. */
+function normFmt(fmt?: EditorFmt): EditorFmt {
+  return {
+    bold: fmt?.bold || undefined,
+    italic: fmt?.italic || undefined,
+    underline: fmt?.underline || undefined,
+    strike: fmt?.strike || undefined,
+  };
+}
+/** True when a stroke's existing formatting already matches `fmt` (so a pure
+ *  identity edit can short-circuit without a redundant undo record). */
+function fmtEqual(s: EditorFmt, fmt?: EditorFmt): boolean {
+  if (!fmt) return true;
+  return (
+    !!s.bold === !!fmt.bold &&
+    !!s.italic === !!fmt.italic &&
+    !!s.underline === !!fmt.underline &&
+    !!s.strike === !!fmt.strike
+  );
+}
+
+/**
+ * Shared inline-formatting state for the three text editors (sticky / anchored /
+ * standalone) — the unification surface (item 4d). Cmd/Ctrl + B / I / U toggle
+ * bold / italic / underline WHILE editing (preventing the browser's native
+ * execCommand, which would inject markup the model can't read), preview live via
+ * `style`, and commit on the stroke via `fmtRef`. `strike` rides along unchanged
+ * (toolbar-only — no universal shortcut). One hook = identical behaviour across
+ * all three editors.
+ */
+function useEditorFormat(initial: EditorFmt): {
+  fmtRef: { current: EditorFmt };
+  style: CSSProperties;
+  onFormatKey: (e: ReactKeyboardEvent) => boolean;
+} {
+  const [bold, setBold] = useState(!!initial.bold);
+  const [italic, setItalic] = useState(!!initial.italic);
+  const [underline, setUnderline] = useState(!!initial.underline);
+  const strike = !!initial.strike;
+  const fmtRef = useRef<EditorFmt>({ bold, italic, underline, strike });
+  fmtRef.current = { bold, italic, underline, strike };
+  const style: CSSProperties = {
+    fontWeight: bold ? 700 : undefined,
+    fontStyle: italic ? 'italic' : undefined,
+    textDecoration: textDecoCss(strike, underline),
+  };
+  const onFormatKey = useCallback((e: ReactKeyboardEvent): boolean => {
+    if (!(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey) return false;
+    const k = e.key.toLowerCase();
+    if (k === 'b') {
+      e.preventDefault();
+      setBold((v) => !v);
+      return true;
+    }
+    if (k === 'i') {
+      e.preventDefault();
+      setItalic((v) => !v);
+      return true;
+    }
+    if (k === 'u') {
+      e.preventDefault();
+      setUnderline((v) => !v);
+      return true;
+    }
+    return false;
+  }, []);
+  return { fmtRef, style, onFormatKey };
+}
+
+/**
+ * Per-line baseline offset (`dy`). Line 0 sits at the anchor when top-anchored
+ * (hanging) or is lifted half the block height when vertically centred
+ * (anchored-in-host); every later line advances one line-height.
+ */
+function textLineDy(i: number, fontSize: number, lineCount: number, centered: boolean): number {
+  const lh = fontSize * TEXT_LINE_HEIGHT;
+  if (i > 0) return lh;
+  return centered ? (-(lineCount - 1) / 2) * lh : 0;
+}
+
+/**
+ * Inner content for a serialized `<text>` stroke: the legacy single esc'd run
+ * when there's no newline (byte-identical, canary-safe), else one `<tspan>` per
+ * line. `x` is set on each tspan for standalone text (resets the line origin);
+ * anchored text omits it (the persisted form carries no absolute position —
+ * geometry is resolved against the host at render time). A `list` prefix
+ * (bullet / number) is prepended per line at render time only (DDR — never
+ * stored in `text`).
+ */
+function textInnerSvg(
+  text: string,
+  fontSize: number,
+  centered: boolean,
+  x: number | undefined,
+  list?: ListType
+): string {
+  if (!list && !text.includes('\n')) return esc(listPrefixedLine(text, 0, list));
+  const lines = splitTextLines(text);
+  const xAttr = x != null ? ` x="${x}"` : '';
+  return lines
+    .map(
+      (line, i) =>
+        `<tspan${xAttr} dy="${textLineDy(i, fontSize, lines.length, centered)}">${esc(
+          listPrefixedLine(line, i, list)
+        )}</tspan>`
+    )
+    .join('');
+}
+
 // 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.
@@ -359,6 +755,28 @@ export function polygonPoints(
     .join(' ');
 }
 
+/**
+ * Annotation polish (item 1) — a rounded-rect `d` with TL/TR/BL rounded at `r`
+ * and the **bottom-right corner SHARP** (the FigJam sticky-note silhouette). The
+ * radius is clamped to half the smaller side so it never self-overlaps. Used by
+ * `StrokeNode`'s LIVE sticky render only; the persisted form (`strokeToSvgEl`)
+ * stays a plain `<rect>` (DDR — zero canary / sanitizer / parse impact).
+ */
+export function stickyCornerPath(x: number, y: number, w: number, h: number, r: number): string {
+  const rr = Math.max(0, Math.min(r, w / 2, h / 2));
+  return [
+    `M${x + rr} ${y}`,
+    `L${x + w - rr} ${y}`,
+    `Q${x + w} ${y} ${x + w} ${y + rr}`,
+    `L${x + w} ${y + h}`, // sharp bottom-right
+    `L${x + rr} ${y + h}`,
+    `Q${x} ${y + h} ${x} ${y + h - rr}`,
+    `L${x} ${y + rr}`,
+    `Q${x} ${y} ${x + rr} ${y}`,
+    'Z',
+  ].join(' ');
+}
+
 /** Even-odd ray-cast point-in-polygon test. */
 function pointInPolygon(px: number, py: number, pts: ReadonlyArray<[number, number]>): boolean {
   let inside = false;
@@ -398,10 +816,14 @@ function strokeToSvgEl(s: Stroke): string {
     // 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).
+    // bold/italic/strike/underline/align/list serialize ONLY for non-default
+    // values, so a legacy text node stays byte-identical (every added fragment
+    // is empty). Multi-line text emits one <tspan> per line (item 4a); a
+    // single-line unstyled run stays the legacy single esc'd text.
     const weight = s.bold ? ' font-weight="700"' : '';
-    const deco = s.strike ? ' text-decoration="line-through"' : '';
+    const italic = s.italic ? ' font-style="italic"' : '';
+    const deco = textDecoAttr(s.strike, s.underline);
+    const listAttr = s.listType ? ` data-list="${s.listType}"` : '';
     if (s.anchorId != null && s.anchorId !== '') {
       const align = s.align ?? 'center'; // anchored default = centre (legacy)
       const anchor = align === 'left' ? 'start' : align === 'right' ? 'end' : 'middle';
@@ -410,8 +832,12 @@ function strokeToSvgEl(s: Stroke): string {
         s.anchorId
       )}" data-font-size="${s.fontSize}" fill="${esc(
         s.color
-      )}"${weight}${deco} text-anchor="${anchor}" dominant-baseline="middle"${alignAttr}>${esc(
-        s.text
+      )}"${weight}${italic}${deco}${listAttr} text-anchor="${anchor}" dominant-baseline="middle"${alignAttr}>${textInnerSvg(
+        s.text,
+        s.fontSize,
+        true,
+        undefined,
+        s.listType
       )}</text>`;
     }
     const tx = s.x ?? 0;
@@ -423,8 +849,12 @@ function strokeToSvgEl(s: Stroke): string {
       s.fontSize
     }" fill="${esc(
       s.color
-    )}"${weight}${deco} text-anchor="${anchor}" dominant-baseline="hanging"${alignAttr}>${esc(
-      s.text
+    )}"${weight}${italic}${deco}${listAttr} text-anchor="${anchor}" dominant-baseline="hanging"${alignAttr}>${textInnerSvg(
+      s.text,
+      s.fontSize,
+      false,
+      tx,
+      s.listType
     )}</text>`;
   }
   if (s.tool === 'sticky') {
@@ -435,14 +865,18 @@ function strokeToSvgEl(s: Stroke): string {
     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.
+    // bold/italic/strike/underline/align/list on the <g> data-attrs, emitted
+    // ONLY for non-default values (sticky default align = left) so Phase-21
+    // stickies serialize byte-identically. The body <text> stays raw text —
+    // list markers are render-only (item 4c), never persisted.
     const align = s.align ?? 'left';
     const styleAttrs =
       (s.bold ? ' data-bold="1"' : '') +
+      (s.italic ? ' data-italic="1"' : '') +
       (s.strike ? ' data-strike="1"' : '') +
-      (align !== 'left' ? ` data-align="${align}"` : '');
+      (s.underline ? ' data-underline="1"' : '') +
+      (align !== 'left' ? ` data-align="${align}"` : '') +
+      (s.listType ? ` data-list="${s.listType}"` : '');
     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="${
@@ -453,9 +887,52 @@ function strokeToSvgEl(s: Stroke): string {
       s.fontSize
     }" fill="#1a1a1a" dominant-baseline="hanging">${esc(s.text)}</text></g>`;
   }
+  if (s.tool === 'image') {
+    // Phase 23 — `href` is ALWAYS a relative assets/<sha8>.<ext> path (asserted
+    // on create + re-validated by the sanitizer's <image> href allowlist). Alt
+    // text persists in `data-alt` + is emitted as `aria-label` for the exported
+    // SVG (the live annotation root is aria-hidden — see ImageStroke.alt).
+    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 altAttr = s.alt ? ` data-alt="${escAttr(s.alt)}"` : '';
+    return `<image data-id="${esc(s.id)}" data-tool="image" x="${nx}" y="${ny}" width="${nw}" height="${nh}" href="${escAttr(
+      s.href
+    )}" preserveAspectRatio="xMidYMid meet"${altAttr}/>`;
+  }
+  if (s.tool === 'link') {
+    // Phase 23 — client-only preview chip. data-url/title/domain are the
+    // round-trip source of truth; the inner rect/glyph/text are the inert,
+    // sanitizer-safe visual (no <a href> persisted — click-to-open reads
+    // data-url client-side and validates http(s) before window.open).
+    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 lay = linkCardLayout(nx, ny, nw, nh);
+    const shownTitle = clampLinkTitle(s.title, lay.textMaxChars);
+    return (
+      `<g data-id="${esc(s.id)}" data-tool="link" data-url="${escAttr(s.url)}" data-title="${escAttr(
+        s.title
+      )}" data-domain="${escAttr(s.domain)}">` +
+      `<rect x="${nx}" y="${ny}" width="${nw}" height="${nh}" rx="8" ry="8" fill="${LINK_CARD_FILL}" stroke="${LINK_CARD_STROKE}" stroke-width="1"/>` +
+      `<svg x="${lay.glyph.x}" y="${lay.glyph.y}" width="${lay.glyph.size}" height="${lay.glyph.size}" viewBox="0 0 24 24" fill="none" stroke="${LINK_GLYPH_STROKE}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${LINK_GLYPH_D1}"/><path d="${LINK_GLYPH_D2}"/></svg>` +
+      `<text x="${lay.textX}" y="${lay.domain.y}" font-size="${lay.domain.fontSize}" fill="${LINK_DOMAIN_FILL}" dominant-baseline="hanging">${esc(
+        s.domain
+      )}</text>` +
+      `<text x="${lay.textX}" y="${lay.title.y}" font-size="${lay.title.fontSize}" fill="${LINK_TITLE_FILL}" font-weight="600" dominant-baseline="hanging">${esc(
+        shownTitle
+      )}</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') {
-    return `<path ${common} fill="none" d="${penPathD(s.points)}" pointer-events="stroke"/>`;
+    // Highlighter (item 8) — data-highlighter ONLY when true so a normal pen
+    // stays byte-identical (canary).
+    const hl = s.highlighter ? ' data-highlighter="1"' : '';
+    return `<path ${common} fill="none" d="${penPathD(s.points)}"${hl} pointer-events="stroke"/>`;
   }
   if (s.tool === 'rect') {
     const fill = s.fill ? esc(s.fill) : 'none';
@@ -463,17 +940,23 @@ function strokeToSvgEl(s: Stroke): string {
     // 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}"` : '';
+    // Dashed outline (item 7) — emitted ONLY when true (mirror polygon/arrow)
+    // so a legacy solid rect stays byte-identical.
+    const dash = s.dashed ? ' stroke-dasharray="6 4"' : '';
+    const dashAttr = s.dashed ? ' data-dash="1"' : '';
     return `<rect ${common} fill="${fill}" x="${s.x}" y="${s.y}" width="${Math.max(
       0,
       s.w
-    )}" height="${Math.max(0, s.h)}"${round}/>`;
+    )}" height="${Math.max(0, s.h)}"${round}${dash}${dashAttr}/>`;
   }
   if (s.tool === 'ellipse') {
     const fill = s.fill ? esc(s.fill) : 'none';
+    const dash = s.dashed ? ' stroke-dasharray="6 4"' : '';
+    const dashAttr = s.dashed ? ' data-dash="1"' : '';
     return `<ellipse ${common} fill="${fill}" cx="${s.cx}" cy="${s.cy}" rx="${Math.max(
       0,
       s.rx
-    )}" ry="${Math.max(0, s.ry)}"/>`;
+    )}" ry="${Math.max(0, s.ry)}"${dash}${dashAttr}/>`;
   }
   if (s.tool === 'polygon') {
     // Phase 24 — bbox-derived points + data-shape. Normalize the bbox so a
@@ -606,7 +1089,12 @@ export function svgToStrokes(svgText: string): Stroke[] {
       if (tool === 'pen') {
         const d = el.getAttribute('d') || '';
         const points = parsePathD(d);
-        if (points.length) out.push({ id, tool: 'pen', color, width, points });
+        if (points.length) {
+          const pen: PenStroke = { id, tool: 'pen', color, width, points };
+          // Highlighter flag; absent ⇒ undefined so a normal pen round-trips.
+          if (el.getAttribute('data-highlighter') === '1') pen.highlighter = true;
+          out.push(pen);
+        }
         continue;
       }
       if (tool === 'sticky') {
@@ -636,13 +1124,17 @@ export function svgToStrokes(svgText: string): Stroke[] {
           fontSize,
           cornerRadius,
         };
-        // Phase 24 — style attrs; absent ⇒ defaults (normal / left), left unset.
+        // Style attrs; absent ⇒ defaults (normal / left), left unset.
         if (el.getAttribute('data-bold') === '1') sticky.bold = true;
+        if (el.getAttribute('data-italic') === '1') sticky.italic = true;
         if (el.getAttribute('data-strike') === '1') sticky.strike = true;
+        if (el.getAttribute('data-underline') === '1') sticky.underline = true;
         const sticAlign = el.getAttribute('data-align');
         if (sticAlign === 'left' || sticAlign === 'center' || sticAlign === 'right') {
           sticky.align = sticAlign;
         }
+        const sticList = el.getAttribute('data-list');
+        if (sticList === 'bullet' || sticList === 'number') sticky.listType = sticList;
         out.push(sticky);
         continue;
       }
@@ -654,7 +1146,11 @@ export function svgToStrokes(svgText: string): Stroke[] {
         const fill = parseFill(el.getAttribute('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 });
+        const rect: RectStroke = { id, tool: 'rect', color, width, x, y, w, h, fill, cornerRadius };
+        // Dashed (item 7); absent ⇒ undefined so a solid rect round-trips.
+        const rectDash = el.getAttribute('data-dash');
+        if (rectDash === '1' || rectDash === 'true') rect.dashed = true;
+        out.push(rect);
         continue;
       }
       if (tool === 'ellipse') {
@@ -663,7 +1159,10 @@ export function svgToStrokes(svgText: string): Stroke[] {
         const rx = Number.parseFloat(el.getAttribute('rx') || '0');
         const ry = Number.parseFloat(el.getAttribute('ry') || '0');
         const fill = parseFill(el.getAttribute('fill'));
-        out.push({ id, tool: 'ellipse', color, width, cx, cy, rx, ry, fill });
+        const ell: EllipseStroke = { id, tool: 'ellipse', color, width, cx, cy, rx, ry, fill };
+        const ellDash = el.getAttribute('data-dash');
+        if (ellDash === '1' || ellDash === 'true') ell.dashed = true;
+        out.push(ell);
         continue;
       }
       if (tool === 'polygon') {
@@ -728,18 +1227,66 @@ export function svgToStrokes(svgText: string): Stroke[] {
         }
         continue;
       }
+      if (tool === 'image') {
+        // Phase 23 — geometry off the element; href is whatever survived the
+        // sanitizer (a valid assets/<sha8>.<ext> path, or '' if it was stripped
+        // — an external/data:/`..` href is dropped server-side, so a poisoned
+        // SVG round-trips to an inert empty-href stroke that fetches nothing).
+        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 href = el.getAttribute('href') || el.getAttribute('xlink:href') || '';
+        const img: ImageStroke = { id, tool: 'image', x, y, w, h, href };
+        const alt = el.getAttribute('data-alt');
+        if (alt) img.alt = alt;
+        out.push(img);
+        continue;
+      }
+      if (tool === 'link') {
+        // Phase 23 — data-* are the source of truth; geometry off the <rect>
+        // child (mirrors sticky). Defensive: missing title ⇒ domain.
+        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') || String(LINK_DEFAULT_W));
+        const h = Number.parseFloat(rectEl?.getAttribute('height') || String(LINK_DEFAULT_H));
+        const url = el.getAttribute('data-url') || '';
+        const domain = el.getAttribute('data-domain') || '';
+        const title = el.getAttribute('data-title') || domain || url;
+        out.push({ id, tool: 'link', x, y, w, h, url, title, domain });
+        continue;
+      }
       if (tool === 'text') {
         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;
-        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.
+        // List style (item 4c) — read FIRST so per-line markers can be stripped
+        // off the parsed text (markers are render-only; never stored).
+        const listRaw = el.getAttribute('data-list');
+        const listType: ListType | undefined =
+          listRaw === 'bullet' || listRaw === 'number' ? listRaw : undefined;
+        // Multi-line text (item 4a) — one <tspan> per line. Recover `\n` by
+        // joining tspan text content (markers stripped); a legacy single-run
+        // <text> has no tspans → read its trimmed textContent.
+        const tspans = el.querySelectorAll('tspan');
+        const body =
+          tspans.length > 0
+            ? Array.from(tspans)
+                .map((t, i) => stripListPrefix(t.textContent ?? '', i, listType))
+                .join('\n')
+            : stripListPrefix((el.textContent || '').trim(), 0, listType);
+        // bold / italic / strike / underline / 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 isItalic = el.getAttribute('font-style') === 'italic';
+        const decoAttr = el.getAttribute('text-decoration') || '';
+        const isStrike = decoAttr.includes('line-through');
+        const isUnderline = decoAttr.includes('underline');
         const da = el.getAttribute('data-align');
         const align: TextAlign | undefined =
           da === 'left' || da === 'center' || da === 'right' ? da : undefined;
@@ -756,7 +1303,10 @@ export function svgToStrokes(svgText: string): Stroke[] {
             y: Number.parseFloat(el.getAttribute('y') || '0'),
           };
           if (isBold) t.bold = true;
+          if (isItalic) t.italic = true;
           if (isStrike) t.strike = true;
+          if (isUnderline) t.underline = true;
+          if (listType) t.listType = listType;
           if (align) t.align = align;
           out.push(t);
           continue;
@@ -770,7 +1320,10 @@ export function svgToStrokes(svgText: string): Stroke[] {
           anchorId: rawAnchor,
         };
         if (isBold) t.bold = true;
+        if (isItalic) t.italic = true;
         if (isStrike) t.strike = true;
+        if (isUnderline) t.underline = true;
+        if (listType) t.listType = listType;
         if (align) t.align = align;
         out.push(t);
       }
@@ -811,8 +1364,8 @@ export function strokeHitTest(s: Stroke, wx: number, wy: number, tol: number): b
     );
   }
   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.
+  if (s.tool === 'sticky' || s.tool === 'image' || s.tool === 'link') {
+    // Sticky / image / link are solid cards — 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);
@@ -1002,6 +1555,9 @@ function isStrokeMeaningful(s: Stroke): boolean {
   // 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;
+  // Phase 23 — an image needs real extent; a link needs a non-empty URL.
+  if (s.tool === 'image') return Math.abs(s.w) >= IMAGE_MIN_SIZE && Math.abs(s.h) >= IMAGE_MIN_SIZE;
+  if (s.tool === 'link') return s.url.trim().length > 0;
   return Math.hypot(s.x2 - s.x1, s.y2 - s.y1) >= 4;
 }
 
@@ -1042,7 +1598,8 @@ export function strokeBBox(
       h: Math.abs(s.y2 - s.y1),
     };
   }
-  if (s.tool === 'sticky') {
+  if (s.tool === 'sticky' || s.tool === 'image' || s.tool === 'link') {
+    // Phase 23 — image + link are rect-shaped media, same bbox as a sticky card.
     return {
       x: Math.min(s.x, s.x + s.w),
       y: Math.min(s.y, s.y + s.h),
@@ -1059,11 +1616,18 @@ export function strokeBBox(
   }
   const tx = s.x ?? 0;
   const ty = s.y ?? 0;
+  // Multi-line text (item 4a) — the bbox spans the longest line (width) and all
+  // lines (height) so the selection halo / hit-test / eraser cover the whole
+  // block, not just line one. List markers widen each line by 2–3 chars.
+  const lines = splitTextLines(s.text);
+  const markerPad = s.listType ? 3 : 0;
+  const longest = lines.reduce((m, l) => Math.max(m, l.length + markerPad), 0);
   return {
     x: tx,
     y: ty,
-    w: Math.max(8, s.text.length * s.fontSize * 0.55),
-    h: s.fontSize * 1.2,
+    w: Math.max(8, longest * s.fontSize * 0.55),
+    // Single-line keeps the legacy 1.2 height; multi-line grows by line count.
+    h: lines.length <= 1 ? s.fontSize * 1.2 : lines.length * s.fontSize * TEXT_LINE_HEIGHT,
   };
 }
 
@@ -1092,6 +1656,38 @@ function deriveFile(): string | undefined {
   }
 }
 
+/**
+ * Phase 23 — the served designRoot prefix for the current canvas document. An
+ * image stroke persists its href as a RELATIVE `assets/<sha8>.<ext>` path (the
+ * shape the sanitizer allowlists), but a bare relative href resolves against
+ * `/_canvas-shell.html` → `/assets/…`, which the canvas-origin gate 403s. The
+ * real served path is `/<designRel>/assets/…`, so the render must prefix it.
+ */
+function canvasDesignRel(): string {
+  if (typeof window === 'undefined') return '.design';
+  try {
+    const p = window.location.pathname;
+    if (p === '/_canvas-shell.html' || p === '/_canvas-shell') {
+      const qs = new URLSearchParams(window.location.search);
+      return (qs.get('designRel') ?? '.design').replace(/^\/+|\/+$/g, '');
+    }
+    // Direct `/<designRel>/<group>/<canvas>.tsx` route → the first path segment.
+    const seg = decodeURIComponent(p).replace(/^\/+/, '').split('/')[0];
+    return seg || '.design';
+  } catch {
+    return '.design';
+  }
+}
+
+/**
+ * Resolve an image stroke href for the browser. The persisted `assets/<name>`
+ * form is rewritten to the served `/<designRel>/assets/<name>` path; an
+ * optimistic `blob:`/`data:` preview href (pre-upload) is used verbatim.
+ */
+function resolveAssetHref(href: string): string {
+  return /^assets\//.test(href) ? `/${canvasDesignRel()}/${href}` : href;
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Styles
 
@@ -1303,7 +1899,8 @@ function translateOne(s: Stroke, dx: number, dy: number): Stroke {
   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 };
-  if (s.tool === 'sticky') return { ...s, x: s.x + dx, y: s.y + dy };
+  if (s.tool === 'sticky' || s.tool === 'image' || s.tool === 'link')
+    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;
@@ -1338,6 +1935,7 @@ export { useAnnotationsVisibility } from './use-annotations-visibility.tsx';
 export function AnnotationsLayer() {
   ensureAnnotStyles();
   const { tool, setTool, sticky, tools, shapeKind } = useToolMode();
+  const theme = useCanvasChromeTheme();
   const controller = useViewportControllerContext();
   const vp = controller?.viewport ?? null;
   const worldRef = useWorldRefContext();
@@ -1346,12 +1944,42 @@ export function AnnotationsLayer() {
 
   const [strokes, setStrokesState] = useState<Stroke[]>([]);
   const [drawing, setDrawing] = useState<Stroke | null>(null);
-  const [color, setColor] = useState<string>(DEFAULT_COLOR);
-  const [fill, setFill] = useState<string | null>(null);
+  // Theme-aware live default ink (items 3/5/6). Initialized from the current
+  // theme; tracked-untouched until the user picks a swatch, after which it
+  // sticks (colorTouchedRef). The themed-default effect lives below.
+  const [color, setColorState] = useState<string>(() => resolveDefaultInk(theme));
+  const colorTouchedRef = useRef(false);
+  const setColor = useCallback((c: string) => {
+    colorTouchedRef.current = true;
+    setColorState(c);
+  }, []);
+  // While the user hasn't picked an ink swatch yet, follow the theme — so a
+  // dark canvas arms a light-reading default and a light canvas a dark one.
+  useEffect(() => {
+    if (!colorTouchedRef.current) setColorState(resolveDefaultInk(theme));
+  }, [theme]);
+  // Shape default fill (item 2). A freshly-armed Shape tool gets a fill (not
+  // outline-only); the index-paired tint of the active ink. Untouched until the
+  // user picks a fill swatch (incl. "No fill"), after which it sticks.
+  const [fill, setFillState] = useState<string | null>(null);
+  const fillTouchedRef = useRef(false);
+  const setFill = useCallback((f: string | null) => {
+    fillTouchedRef.current = true;
+    setFillState(f);
+  }, []);
+  // While the Shape tool is armed and the fill is untouched, follow the ink
+  // (and theme) so a square/circle/diamond lands with a paired-tint wash. Once
+  // the user picks a fill swatch (or "No fill"), this stops.
+  useEffect(() => {
+    if (tool === 'shape' && !fillTouchedRef.current) setFillState(defaultFillFor(color, theme));
+  }, [tool, color, theme]);
   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);
+  // Annotation polish (item 8) — draw-time highlighter marker hue + nib width.
+  const [highlighterColor, setHighlighterColor] = useState<string>(DEFAULT_HIGHLIGHTER_COLOR);
+  const [highlighterWidth, setHighlighterWidth] = useState<number>(DEFAULT_HIGHLIGHTER_WIDTH);
   // 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).
@@ -1393,7 +2021,12 @@ export function AnnotationsLayer() {
   strokesRef.current = strokes;
 
   const isDraw =
-    tool === 'pen' || tool === 'shape' || tool === 'arrow' || tool === 'sticky' || tool === 'text';
+    tool === 'pen' ||
+    tool === 'highlighter' ||
+    tool === 'shape' ||
+    tool === 'arrow' ||
+    tool === 'sticky' ||
+    tool === 'text';
   const isErase = tool === 'eraser';
   const isActive = isDraw || isErase;
   // T20 / Phase 24 — every shape primitive carries stroke weight (FigJam ships
@@ -1622,6 +2255,95 @@ export function AnnotationsLayer() {
     [vp]
   );
 
+  // ── Phase 23 — media intake (drag-drop / paste / file-picker / link input) ──
+  // Image: optimistic blob: preview stroke (LOCAL only — never persisted) →
+  // POST /_api/asset → swap href to assets/… and commit (one undo record) →
+  // revoke the blob URL. On failure the optimistic stroke is removed + a toast.
+  const createImageFromFile = useCallback(
+    (file: File, world: [number, number]) => {
+      if (typeof window === 'undefined' || !file.type.startsWith('image/')) return;
+      const blobUrl = URL.createObjectURL(file);
+      const probe = new Image();
+      probe.onload = () => {
+        const natW = probe.naturalWidth || IMAGE_MAX_DROP_SIDE;
+        const natH = probe.naturalHeight || Math.round(IMAGE_MAX_DROP_SIDE * 0.66);
+        const longest = Math.max(natW, natH) || 1;
+        const scale = longest > IMAGE_MAX_DROP_SIDE ? IMAGE_MAX_DROP_SIDE / longest : 1;
+        const w = Math.max(IMAGE_MIN_SIZE, Math.round(natW * scale));
+        const h = Math.max(IMAGE_MIN_SIZE, Math.round(natH * scale));
+        const id = rid();
+        const optimistic: ImageStroke = {
+          id,
+          tool: 'image',
+          x: world[0] - w / 2,
+          y: world[1] - h / 2,
+          w,
+          h,
+          href: blobUrl,
+        };
+        // Local-only insert — the blob: href must NOT reach the server (it's
+        // ephemeral + would be stripped by the sanitizer); we commit only the
+        // assets/… form once the upload lands.
+        setStrokesState([...strokesRef.current, optimistic]);
+        void uploadAsset(file).then((res) => {
+          const cur = strokesRef.current;
+          if ('path' in res) {
+            const after = cur.map((s) => (s.id === id ? ({ ...s, href: res.path } as Stroke) : s));
+            const beforeForUndo = cur.filter((s) => s.id !== id);
+            commitStrokes(beforeForUndo, after, 'add image');
+            annotSel?.replace([id]);
+          } else {
+            setStrokesState(cur.filter((s) => s.id !== id));
+            showCanvasToast(`Image upload failed — ${res.error}`);
+          }
+          URL.revokeObjectURL(blobUrl);
+        });
+      };
+      probe.onerror = () => {
+        URL.revokeObjectURL(blobUrl);
+        showCanvasToast('Could not read that image file');
+      };
+      probe.src = blobUrl;
+    },
+    [commitStrokes, annotSel]
+  );
+
+  // Link: client-only preview chip — no upload, no server fetch. Only http(s)
+  // URLs are accepted (the hook already gates, re-checked here defensively).
+  const createLink = useCallback(
+    (url: string, title: string, world: [number, number]) => {
+      if (!isHttpUrl(url)) return;
+      const w = LINK_DEFAULT_W;
+      const h = LINK_DEFAULT_H;
+      const id = rid();
+      const link: LinkStroke = {
+        id,
+        tool: 'link',
+        x: world[0] - w / 2,
+        y: world[1] - h / 2,
+        w,
+        h,
+        url,
+        title: (title || prettifyUrl(url)).slice(0, 300),
+        domain: linkDomain(url),
+      };
+      const before = strokesRef.current;
+      commitStrokes(before, [...before, link], 'add link');
+      annotSel?.replace([id]);
+    },
+    [commitStrokes, annotSel]
+  );
+
+  const mediaCallbacks = useMemo(
+    () => ({ onImage: createImageFromFile, onLink: createLink }),
+    [createImageFromFile, createLink]
+  );
+  // Media intake is paste/drop only (per product steer — no toolbar buttons):
+  // drop an image / URL or Cmd+V a clipboard image / link straight onto the
+  // canvas. The hook owns the dragover/drop/paste wiring; the create callbacks
+  // hold the commit/undo sink + screenToWorld.
+  useCanvasMediaDrop({ enabled: visible, screenToWorld, callbacks: mediaCallbacks });
+
   const eraseAt = useCallback(
     (wx: number, wy: number) => {
       const zoom = vp?.zoom || 1;
@@ -1672,6 +2394,17 @@ export function AnnotationsLayer() {
       const activeFill = supportsFill ? fill : null;
       if (tool === 'pen') {
         setDrawing({ id, tool: 'pen', color, width, points: [[wx, wy]] });
+      } else if (tool === 'highlighter') {
+        // Highlighter (item 8) — a pen stroke with a wide width, a translucent
+        // marker hue, and the highlighter flag (renders multiply at draw time).
+        setDrawing({
+          id,
+          tool: 'pen',
+          color: highlighterColor,
+          width: highlighterWidth,
+          points: [[wx, wy]],
+          highlighter: true,
+        });
       } 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);
@@ -1760,6 +2493,8 @@ export function AnnotationsLayer() {
       fill,
       thickness,
       stickyColor,
+      highlighterColor,
+      highlighterWidth,
       supportsThickness,
       supportsFill,
       isActive,
@@ -1862,7 +2597,9 @@ export function AnnotationsLayer() {
     // mode is locked on this tool. Sticky lets the user draw many shapes in a
     // row (canonical pattern: tldraw double-click to lock). Eraser stays
     // armed by default — that tool is destructive, not constructive.
-    const toolJustUsed = cur.tool;
+    // Map a highlighter pen (a 'pen' stroke with the flag) back to the
+    // 'highlighter' tool id so its sticky-lock check matches the active tool.
+    const toolJustUsed = cur.tool === 'pen' && cur.highlighter ? 'highlighter' : cur.tool;
     if (toolJustUsed !== 'eraser') {
       const stickyOnThis = sticky.locked && sticky.tool === toolJustUsed;
       if (!stickyOnThis) setTool('move');
@@ -1993,7 +2730,9 @@ export function AnnotationsLayer() {
           t === 'polygon' ||
           t === 'arrow' ||
           t === 'text' ||
-          t === 'sticky')
+          t === 'sticky' ||
+          t === 'image' ||
+          t === 'link')
       ) {
         return id;
       }
@@ -2012,21 +2751,18 @@ export function AnnotationsLayer() {
       const target = e.target as Element | null;
       if (target?.closest?.(CHROME_SELECTOR)) return; // chrome owns its clicks
       const strokeId = findStrokeId(target);
-      // When pointerdown lands inside an artboard but not on a stroke, the
-      // gesture belongs to artboard-drag / element-marquee — not the
-      // annotation marquee. Bailing here keeps the annotation marquee from
-      // racing the artboard drag (post-Wave-3 user grievance G5).
-      if (!strokeId && target?.closest?.('[data-dc-screen]')) return;
       const [wx, wy] = screenToWorld(e.clientX, e.clientY);
       const startClientX = e.clientX;
       const startClientY = e.clientY;
 
-      // Stroke hit — select + start drag-translate of the group ─────────
+      // Stroke hit OR multi-selection hull hit — start a group drag. Clicking a
+      // selected stroke, OR anywhere inside the current selection's bounding box
+      // (FigJam parity), moves the whole group. Without the hull case, grabbing
+      // the empty space BETWEEN selected strokes fell through to the marquee
+      // branch below and DESELECTED them.
+      let ids: string[] | null = null;
       if (strokeId) {
-        e.preventDefault();
-        e.stopImmediatePropagation();
         elementSel?.clear();
-        let ids: string[];
         if (e.shiftKey) {
           annotSel.add(strokeId);
           ids = annotSel.contains(strokeId)
@@ -2038,6 +2774,28 @@ export function AnnotationsLayer() {
           annotSel.replace(strokeId);
           ids = [strokeId];
         }
+      } else if (!e.shiftKey && annotSel.selectedIds.length > 0) {
+        // Hull hit-test — union bbox of the currently-selected strokes.
+        let hx1 = Infinity;
+        let hy1 = Infinity;
+        let hx2 = -Infinity;
+        let hy2 = -Infinity;
+        for (const s of strokesStoreRef.current.strokes) {
+          if (!annotSel.contains(s.id)) continue;
+          const bb = strokeBBox(s);
+          if (!bb) continue;
+          hx1 = Math.min(hx1, bb.x);
+          hy1 = Math.min(hy1, bb.y);
+          hx2 = Math.max(hx2, bb.x + bb.w);
+          hy2 = Math.max(hy2, bb.y + bb.h);
+        }
+        if (hx2 >= hx1 && wx >= hx1 && wx <= hx2 && wy >= hy1 && wy <= hy2) {
+          ids = annotSel.selectedIds;
+        }
+      }
+      if (ids && ids.length) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
         // Capture a snapshot of all strokes at drag start. Every pointermove
         // re-translates FROM the snapshot using the cumulative cursor delta
         // (NOT a delta-from-last-frame mutation), so dragging back to origin
@@ -2090,6 +2848,13 @@ export function AnnotationsLayer() {
         return;
       }
 
+      // Not a stroke / hull-group drag. When pointerdown lands inside an
+      // artboard the gesture belongs to artboard-drag / element-marquee — not
+      // the annotation marquee (post-Wave-3 grievance G5). Checked AFTER the
+      // group-drag decision so a multi-selection hull-drag still wins even when
+      // the strokes sit over an artboard.
+      if (!strokeId && target?.closest?.('[data-dc-screen]')) return;
+
       // Empty world — start a drag-select gesture. A bare click without
       // moving clears annotation selection (post-Wave-3 feedback: click-to-
       // deselect is back; Esc also still works).
@@ -2185,7 +2950,7 @@ export function AnnotationsLayer() {
   }, [tool]);
 
   const commitText = useCallback(
-    (anchorId: string, text: string) => {
+    (anchorId: string, text: string, fmt?: EditorFmt) => {
       const trimmed = text.trim();
       const prev = strokesRef.current;
       const existing = prev.find((s) => s.tool === 'text' && s.anchorId === anchorId) as
@@ -2198,8 +2963,10 @@ export function AnnotationsLayer() {
         next = prev.filter((s) => s.id !== existing.id);
         label = 'delete text';
       } else if (existing) {
-        if (existing.text === trimmed) return; // identity edit
-        next = prev.map((s) => (s.id === existing.id ? { ...existing, text: trimmed } : s));
+        if (existing.text === trimmed && fmtEqual(existing, fmt)) return; // identity edit
+        next = prev.map((s) =>
+          s.id === existing.id ? { ...existing, text: trimmed, ...normFmt(fmt) } : s
+        );
       } else {
         next = [
           ...prev,
@@ -2210,6 +2977,7 @@ export function AnnotationsLayer() {
             fontSize: DEFAULT_FONT_SIZE,
             text: trimmed,
             anchorId,
+            ...normFmt(fmt),
           } as TextStroke,
         ];
         label = 'add text';
@@ -2222,13 +2990,13 @@ export function AnnotationsLayer() {
   // 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) => {
+    (id: string, text: string, fmt?: EditorFmt) => {
       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));
+      if (!existing || (existing.text === text && fmtEqual(existing, fmt))) return;
+      const next = prev.map((s) => (s.id === id ? { ...existing, text, ...normFmt(fmt) } : s));
       commitStrokes(prev, next, 'edit sticky');
     },
     [commitStrokes]
@@ -2237,7 +3005,7 @@ export function AnnotationsLayer() {
   // 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) => {
+    (id: string, text: string, fmt?: EditorFmt) => {
       const trimmed = text.trim();
       const prev = strokesRef.current;
       const existing = prev.find((s) => s.id === id && s.tool === 'text') as TextStroke | undefined;
@@ -2250,10 +3018,10 @@ export function AnnotationsLayer() {
         );
         return;
       }
-      if (existing.text === trimmed) return;
+      if (existing.text === trimmed && fmtEqual(existing, fmt)) return;
       commitStrokes(
         prev,
-        prev.map((s) => (s.id === id ? { ...existing, text: trimmed } : s)),
+        prev.map((s) => (s.id === id ? { ...existing, text: trimmed, ...normFmt(fmt) } : s)),
         'edit text'
       );
     },
@@ -2263,14 +3031,23 @@ export function AnnotationsLayer() {
   // 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) => {
+    (x: number, y: number, text: string, fmt?: EditorFmt) => {
       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 },
+        {
+          id,
+          tool: 'text',
+          color,
+          fontSize: DEFAULT_FONT_SIZE,
+          text: trimmed,
+          x,
+          y,
+          ...normFmt(fmt),
+        },
       ];
       commitStrokes(prev, next, 'add text');
       if (annotSel) annotSel.replace(id);
@@ -2298,15 +3075,15 @@ export function AnnotationsLayer() {
   editingTargetRef.current = editingTarget;
 
   const commitEditing = useCallback(
-    (text: string) => {
+    (text: string, fmt?: EditorFmt) => {
       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);
+      if (target.kind === 'anchored') commitText(target.anchorId, text, fmt);
+      else if (target.kind === 'sticky') commitStickyText(target.sticky.id, text, fmt);
+      else if (target.kind === 'standalone') commitStandaloneText(target.text.id, text, fmt);
+      else if (target.kind === 'pending') createStandaloneText(target.x, target.y, text, fmt);
     },
     [commitText, commitStickyText, commitStandaloneText, createStandaloneText]
   );
@@ -2388,6 +3165,7 @@ export function AnnotationsLayer() {
             marquee={marquee}
             ghost={ghostPreview}
             editingTarget={editingTarget}
+            inkColor={color}
             onCommitEdit={commitEditing}
             onCancelEdit={cancelEditing}
           />
@@ -2397,10 +3175,15 @@ export function AnnotationsLayer() {
         {isActive ? (
           <AnnotationsChrome
             tool={tool}
+            theme={theme}
             color={color}
             setColor={setColor}
             stickyColor={stickyColor}
             setStickyColor={setStickyColor}
+            highlighterColor={highlighterColor}
+            setHighlighterColor={setHighlighterColor}
+            highlighterWidth={highlighterWidth}
+            setHighlighterWidth={setHighlighterWidth}
             supportsFill={supportsFill}
             fill={fill}
             setFill={setFill}
@@ -2505,6 +3288,7 @@ function AnnotationsSvg({
   marquee,
   ghost,
   editingTarget,
+  inkColor,
   onCommitEdit,
   onCancelEdit,
 }: {
@@ -2516,7 +3300,9 @@ function AnnotationsSvg({
   marquee: { ax: number; ay: number; bx: number; by: number } | null;
   ghost: GhostDescriptor | null;
   editingTarget: EditingTarget;
-  onCommitEdit: (text: string) => void;
+  /** Live default ink (theme-aware) for a not-yet-born pending text caret. */
+  inkColor: string;
+  onCommitEdit: (text: string, fmt?: EditorFmt) => void;
   onCancelEdit: () => void;
 }) {
   const [, force] = useState({});
@@ -2578,7 +3364,7 @@ function AnnotationsSvg({
           anchorId={editingTarget.anchorId}
           host={editingTarget.host}
           existing={anchoredExisting}
-          onCommit={(_anchorId, text) => onCommitEdit(text)}
+          onCommit={(_anchorId, text, fmt) => onCommitEdit(text, fmt)}
           onCancel={onCancelEdit}
         />
       ) : null}
@@ -2597,8 +3383,11 @@ function AnnotationsSvg({
           color={editingTarget.text.color}
           initialText={editingTarget.text.text}
           bold={editingTarget.text.bold}
+          italic={editingTarget.text.italic}
           strike={editingTarget.text.strike}
+          underline={editingTarget.text.underline}
           align={editingTarget.text.align ?? 'left'}
+          listType={editingTarget.text.listType}
           onCommit={onCommitEdit}
           onCancel={onCancelEdit}
         />
@@ -2608,7 +3397,7 @@ function AnnotationsSvg({
           x={editingTarget.x}
           y={editingTarget.y}
           fontSize={DEFAULT_FONT_SIZE}
-          color={DEFAULT_COLOR}
+          color={inkColor}
           initialText=""
           onCommit={onCommitEdit}
           onCancel={onCancelEdit}
@@ -2629,13 +3418,26 @@ function TextEditor({
   anchorId: string;
   host: RectStroke | EllipseStroke | null;
   existing: TextStroke | undefined;
-  onCommit: (anchorId: string, text: string) => void;
+  onCommit: (anchorId: string, text: string, fmt?: EditorFmt) => void;
   onCancel: () => void;
 }) {
   const ref = useRef<HTMLDivElement | null>(null);
-  const initial = existing?.text ?? '';
+  // Show list markers WHILE editing so the read↔edit swap doesn't flicker
+  // (item 4c) — stripped back to raw text on commit.
+  const initial = listPrefixedBody(existing?.text ?? '', existing?.listType);
   const initialRef = useRef(initial);
   initialRef.current = initial;
+  // Cmd/Ctrl+B/I/U formatting while editing (item 4d).
+  const {
+    fmtRef,
+    style: fmtStyle,
+    onFormatKey,
+  } = useEditorFormat({
+    bold: existing?.bold,
+    italic: existing?.italic,
+    underline: existing?.underline,
+    strike: existing?.strike,
+  });
 
   useEffect(() => {
     const el = ref.current;
@@ -2662,11 +3464,15 @@ function TextEditor({
       const el = ref.current;
       if (!el) return;
       if (el.contains(e.target as Node)) return;
-      onCommit(anchorId, el.innerText || '');
+      onCommit(
+        anchorId,
+        stripEditorMarkers(el.innerText || '', existing?.listType),
+        fmtRef.current
+      );
     };
     document.addEventListener('pointerdown', onDown, true);
     return () => document.removeEventListener('pointerdown', onDown, true);
-  }, [anchorId, onCommit]);
+  }, [anchorId, onCommit, existing?.listType, fmtRef]);
 
   if (!host) return null;
   const bbox = strokeBBox(host);
@@ -2686,24 +3492,29 @@ function TextEditor({
         style={{
           width: '100%',
           height: '100%',
+          // Column flex (NOT row) so contentEditable line breaks stack
+          // vertically; justify-center keeps the block vertically centred in
+          // the host. The pre-Task-5 row-flex laid lines out side-by-side
+          // (item 4a — the mangled multi-line look).
           display: 'flex',
-          alignItems: 'center',
-          justifyContent:
-            align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center',
           padding: '0 8px',
           boxSizing: 'border-box',
           textAlign: align,
+          whiteSpace: 'pre-wrap',
           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,
+          ...fmtStyle,
           lineHeight: 1.25,
           outline: 'none',
           background: 'transparent',
           cursor: 'text',
         }}
         onKeyDown={(e) => {
+          if (onFormatKey(e)) return; // Cmd/Ctrl+B/I/U
           if (e.key === 'Escape') {
             e.preventDefault();
             onCancel();
@@ -2712,7 +3523,11 @@ function TextEditor({
           if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
             e.preventDefault();
             const el = ref.current;
-            onCommit(anchorId, el?.innerText || '');
+            onCommit(
+              anchorId,
+              stripEditorMarkers(el?.innerText || '', existing?.listType),
+              fmtRef.current
+            );
           }
         }}
       >
@@ -2731,13 +3546,30 @@ function StickyEditor({
   onCancel,
 }: {
   sticky: StickyStroke;
-  onCommit: (text: string) => void;
+  onCommit: (text: string, fmt?: EditorFmt) => 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.
+  // commit. Multi-line: Enter inserts a line break; Esc cancels; blur / Cmd+Enter
+  // commit; Cmd/Ctrl+B/I/U format (unified with the other editors — item 4d).
   const ref = useRef<HTMLDivElement | null>(null);
+  const doneRef = useRef(false);
+  const {
+    fmtRef,
+    style: fmtStyle,
+    onFormatKey,
+  } = useEditorFormat({
+    bold: sticky.bold,
+    italic: sticky.italic,
+    underline: sticky.underline,
+    strike: sticky.strike,
+  });
+  const commit = () => {
+    if (doneRef.current) return;
+    doneRef.current = true;
+    onCommit(stripEditorMarkers(ref.current?.innerText ?? '', sticky.listType), fmtRef.current);
+  };
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
@@ -2767,16 +3599,25 @@ function StickyEditor({
         contentEditable
         suppressContentEditableWarning
         aria-label="Edit sticky note text"
-        style={{ ...stickyBodyStyle(sticky), outline: 'none', cursor: 'text' }}
-        onBlur={() => onCommit(ref.current?.innerText ?? '')}
+        style={{ ...stickyBodyStyle(sticky), ...fmtStyle, outline: 'none', cursor: 'text' }}
+        onBlur={commit}
         onKeyDown={(e) => {
+          if (onFormatKey(e)) return; // Cmd/Ctrl+B/I/U
           if (e.key === 'Escape') {
             e.preventDefault();
+            doneRef.current = true; // suppress the unmount blur-commit
             onCancel();
+            return;
+          }
+          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            commit();
           }
         }}
       >
-        {sticky.text}
+        {/* Show the list markers while editing (item 4c) so the read↔edit swap
+            doesn't flicker; stripped back to raw text on commit. */}
+        {stickyBodyText(sticky)}
       </div>
     </foreignObject>
   );
@@ -2791,8 +3632,11 @@ function StandaloneTextEditor({
   color,
   initialText,
   bold,
+  italic,
   strike,
+  underline,
   align,
+  listType,
   onCommit,
   onCancel,
 }: {
@@ -2802,12 +3646,38 @@ function StandaloneTextEditor({
   color: string;
   initialText: string;
   bold?: boolean;
+  italic?: boolean;
   strike?: boolean;
+  underline?: boolean;
   align?: TextAlign;
-  onCommit: (text: string) => void;
+  listType?: ListType;
+  onCommit: (text: string, fmt?: EditorFmt) => void;
   onCancel: () => void;
 }) {
   const ref = useRef<HTMLDivElement | null>(null);
+  // Cmd/Ctrl+B/I/U formatting while editing (item 4d).
+  const {
+    fmtRef,
+    style: fmtStyle,
+    onFormatKey,
+  } = useEditorFormat({
+    bold,
+    italic,
+    underline,
+    strike,
+  });
+  // Single-fire commit guard — outside-click + blur can both fire in one tick;
+  // without this the text would commit twice (two undo records). Markers shown
+  // while editing (item 4c) are stripped back to raw text here on commit.
+  const doneRef = useRef(false);
+  const commitOnce = useCallback(
+    (text: string) => {
+      if (doneRef.current) return;
+      doneRef.current = true;
+      onCommit(stripEditorMarkers(text, listType), fmtRef.current);
+    },
+    [onCommit, listType, fmtRef]
+  );
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
@@ -2831,13 +3701,16 @@ function StandaloneTextEditor({
       const el = ref.current;
       if (!el) return;
       if (el.contains(e.target as Node)) return;
-      onCommit(el.innerText || '');
+      commitOnce(el.innerText || '');
     };
     document.addEventListener('pointerdown', onDown, true);
     return () => document.removeEventListener('pointerdown', onDown, true);
-  }, [onCommit]);
+  }, [commitOnce]);
   return (
-    <foreignObject x={x} y={y} width={600} height={Math.max(24, fontSize * 1.6)}>
+    // Generous box so multi-line text isn't clipped while typing (item 4a). The
+    // empty area is transparent + pointer-pass-through (the SVG root is
+    // pointer-events:none), so outside-click still commits.
+    <foreignObject x={x} y={y} width={640} height={480}>
       <div
         xmlns="http://www.w3.org/1999/xhtml"
         ref={ref}
@@ -2848,32 +3721,38 @@ function StandaloneTextEditor({
         style={{
           display: 'inline-block',
           minWidth: '8px',
-          whiteSpace: 'pre',
+          // pre-wrap so Enter inserts a real newline (multi-line text), not a
+          // commit; long lines also wrap within the box.
+          whiteSpace: 'pre-wrap',
           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,
+          ...fmtStyle,
           textAlign: align ?? 'left',
-          lineHeight: 1.2,
+          lineHeight: TEXT_LINE_HEIGHT,
           outline: 'none',
           background: 'transparent',
           cursor: 'text',
         }}
+        onBlur={() => commitOnce(ref.current?.innerText || '')}
         onKeyDown={(e) => {
+          if (onFormatKey(e)) return; // Cmd/Ctrl+B/I/U
           if (e.key === 'Escape') {
             e.preventDefault();
+            // Mark done so the unmount blur that follows doesn't commit.
+            doneRef.current = true;
             onCancel();
             return;
           }
-          if (e.key === 'Enter' && !e.shiftKey) {
+          // Cmd/Ctrl+Enter commits; plain Enter inserts a newline (item 4a).
+          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
             e.preventDefault();
-            onCommit(ref.current?.innerText || '');
+            commitOnce(ref.current?.innerText || '');
           }
         }}
       >
-        {initialText}
+        {listPrefixedBody(initialText, listType)}
       </div>
     </foreignObject>
   );
@@ -3002,12 +3881,46 @@ function stickyBodyStyle(s: StickyStroke): CSSProperties {
   return {
     fontSize: `${s.fontSize}px`,
     fontWeight: s.bold ? 700 : undefined,
-    textDecoration: s.strike ? 'line-through' : undefined,
+    fontStyle: s.italic ? 'italic' : undefined,
+    textDecoration: textDecoCss(s.strike, s.underline),
     textAlign: align,
     justifyContent: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center',
   };
 }
 
+/** Sticky body content: raw text for a plain card, else per-line with list
+ *  markers prepended (item 4c — markers are render-only). */
+function stickyBodyText(s: StickyStroke): string {
+  if (!s.listType) return s.text;
+  return splitTextLines(s.text)
+    .map((line, i) => listPrefixedLine(line, i, s.listType))
+    .join('\n');
+}
+
+/**
+ * Render the inner content of a `<text>` stroke: a single string for single-
+ * line unstyled text (item 4a parity with the legacy form), else one `<tspan>`
+ * per line with list markers prepended (item 4c). `tx` is the per-line origin;
+ * `centered` lifts the block half its height for vertically-centred anchored
+ * text. Mirrors `textInnerSvg` so the live + persisted geometry agree.
+ */
+function renderTextLines(
+  text: string,
+  fontSize: number,
+  tx: number,
+  centered: boolean,
+  list?: ListType
+) {
+  if (!list && !text.includes('\n')) return text;
+  const lines = splitTextLines(text);
+  return lines.map((line, i) => (
+    // biome-ignore lint/suspicious/noArrayIndexKey: lines are positional + immutable per render
+    <tspan key={i} x={tx} dy={textLineDy(i, fontSize, lines.length, centered)}>
+      {listPrefixedLine(line, i, list)}
+    </tspan>
+  ));
+}
+
 /**
  * Phase 24 — the translucent cursor-following ghost placeholder. Pure chrome:
  * `pointer-events:none`, never added to `strokes`, so it can't be selected,
@@ -3091,12 +4004,14 @@ function StrokeNode({
   const strokeHit = interactive ? 'stroke' : ('none' as const);
   if (stroke.tool === 'text') {
     // 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>.
+    // top-left-anchored at its own world (x, y). bold / italic / strike /
+    // underline applied to the rendered <text>; multi-line + list markers via
+    // renderTextLines (one <tspan> per line).
     const textStyle = {
       fontFamily: 'var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
       fontWeight: stroke.bold ? 700 : undefined,
-      textDecoration: stroke.strike ? 'line-through' : undefined,
+      fontStyle: stroke.italic ? 'italic' : undefined,
+      textDecoration: textDecoCss(stroke.strike, stroke.underline),
     } as const;
     if (stroke.anchorId != null && stroke.anchorId !== '') {
       const host = anchorsById.get(stroke.anchorId);
@@ -3126,18 +4041,19 @@ function StrokeNode({
           dominantBaseline="middle"
           style={textStyle}
         >
-          {stroke.text}
+          {renderTextLines(stroke.text, stroke.fontSize, tx, true, stroke.listType)}
         </text>
       );
     }
     const align = stroke.align ?? 'left';
     const anchor = align === 'left' ? 'start' : align === 'right' ? 'end' : 'middle';
+    const tx = stroke.x ?? 0;
     return (
       <text
         data-id={stroke.id}
         data-tool="text"
         data-font-size={stroke.fontSize}
-        x={stroke.x ?? 0}
+        x={tx}
         y={stroke.y ?? 0}
         fill={stroke.color}
         fontSize={stroke.fontSize}
@@ -3146,7 +4062,7 @@ function StrokeNode({
         pointerEvents={interactive ? 'visiblePainted' : 'none'}
         style={textStyle}
       >
-        {stroke.text}
+        {renderTextLines(stroke.text, stroke.fontSize, tx, false, stroke.listType)}
       </text>
     );
   }
@@ -3159,14 +4075,11 @@ function StrokeNode({
     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}
+            lifted sticky, not a flat colored box (FigJam-style). The body is a
+            path with a SHARP bottom-right corner (item 1) — TL/TR/BL rounded.
+            The persisted form stays a <rect> (DDR), so this is render-only. */}
+        <path
+          d={stickyCornerPath(x, y, w, h, r)}
           fill={stroke.color}
           stroke="rgba(0,0,0,0.05)"
           strokeWidth={1}
@@ -3180,13 +4093,105 @@ function StrokeNode({
               className="dc-sticky-body"
               style={stickyBodyStyle(stroke)}
             >
-              {stroke.text}
+              {stickyBodyText(stroke)}
             </div>
           </foreignObject>
         )}
       </g>
     );
   }
+  if (stroke.tool === 'image') {
+    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);
+    return (
+      <image
+        data-id={stroke.id}
+        data-tool="image"
+        x={x}
+        y={y}
+        width={w}
+        height={h}
+        href={resolveAssetHref(stroke.href)}
+        preserveAspectRatio="xMidYMid meet"
+        aria-label={stroke.alt || undefined}
+        pointerEvents={hitMode}
+      />
+    );
+  }
+  if (stroke.tool === 'link') {
+    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 lay = linkCardLayout(x, y, w, h);
+    const shownTitle = clampLinkTitle(stroke.title, lay.textMaxChars);
+    const textFont = {
+      fontFamily: 'var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
+    } as const;
+    return (
+      <g
+        data-id={stroke.id}
+        data-tool="link"
+        data-url={stroke.url}
+        data-title={stroke.title}
+        data-domain={stroke.domain}
+        pointerEvents={hitMode}
+      >
+        <rect
+          x={x}
+          y={y}
+          width={w}
+          height={h}
+          rx={8}
+          ry={8}
+          fill={LINK_CARD_FILL}
+          stroke={LINK_CARD_STROKE}
+          strokeWidth={1}
+          vectorEffect="non-scaling-stroke"
+          filter="url(#dc-sticky-shadow)"
+        />
+        <svg
+          x={lay.glyph.x}
+          y={lay.glyph.y}
+          width={lay.glyph.size}
+          height={lay.glyph.size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={LINK_GLYPH_STROKE}
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d={LINK_GLYPH_D1} />
+          <path d={LINK_GLYPH_D2} />
+        </svg>
+        <text
+          x={lay.textX}
+          y={lay.domain.y}
+          fontSize={lay.domain.fontSize}
+          fill={LINK_DOMAIN_FILL}
+          dominantBaseline="hanging"
+          style={textFont}
+        >
+          {stroke.domain}
+        </text>
+        <text
+          x={lay.textX}
+          y={lay.title.y}
+          fontSize={lay.title.fontSize}
+          fill={LINK_TITLE_FILL}
+          fontWeight={600}
+          dominantBaseline="hanging"
+          style={textFont}
+        >
+          {shownTitle}
+        </text>
+      </g>
+    );
+  }
   const common = {
     'data-id': stroke.id,
     'data-tool': stroke.tool,
@@ -3197,7 +4202,17 @@ function StrokeNode({
     vectorEffect: 'non-scaling-stroke' as const,
   };
   if (stroke.tool === 'pen') {
-    return <path {...common} fill="none" d={penPathD(stroke.points)} pointerEvents={strokeHit} />;
+    // Highlighter (item 8) — overlaps darken via multiply; the translucent hue
+    // lives in `stroke.color`, the wide nib in `stroke.width`.
+    return (
+      <path
+        {...common}
+        fill="none"
+        d={penPathD(stroke.points)}
+        style={stroke.highlighter ? { mixBlendMode: 'multiply' } : undefined}
+        pointerEvents={strokeHit}
+      />
+    );
   }
   if (stroke.tool === 'rect') {
     const x = Math.min(stroke.x, stroke.x + stroke.w);
@@ -3213,6 +4228,7 @@ function StrokeNode({
         height={Math.abs(stroke.h)}
         rx={r}
         ry={r}
+        strokeDasharray={stroke.dashed ? '6 4' : undefined}
         pointerEvents={hitMode}
       />
     );
@@ -3226,6 +4242,7 @@ function StrokeNode({
         cy={stroke.cy}
         rx={Math.max(0, stroke.rx)}
         ry={Math.max(0, stroke.ry)}
+        strokeDasharray={stroke.dashed ? '6 4' : undefined}
         pointerEvents={hitMode}
       />
     );
@@ -3284,10 +4301,15 @@ function renderArrowPrimitive(p: SvgPrimitive, key: number): JSX.Element {
 
 function AnnotationsChrome({
   tool,
+  theme,
   color,
   setColor,
   stickyColor,
   setStickyColor,
+  highlighterColor,
+  setHighlighterColor,
+  highlighterWidth,
+  setHighlighterWidth,
   supportsFill,
   fill,
   setFill,
@@ -3296,10 +4318,17 @@ function AnnotationsChrome({
   setThickness,
 }: {
   tool: Tool;
+  /** Canvas theme — the ink swatch (slot 8) renders the themed default so the
+   *  active default reads true on dark canvases. */
+  theme: string;
   color: string;
   setColor: (c: string) => void;
   stickyColor: string;
   setStickyColor: (c: string) => void;
+  highlighterColor: string;
+  setHighlighterColor: (c: string) => void;
+  highlighterWidth: number;
+  setHighlighterWidth: (w: number) => void;
   supportsFill: boolean;
   fill: string | null;
   setFill: (f: string | null) => void;
@@ -3329,21 +4358,79 @@ function AnnotationsChrome({
       </div>
     );
   }
+  // Highlighter picks a translucent marker hue (item 8) — its own palette,
+  // mirroring sticky. Each swatch previews on a dark chip via its alpha.
+  if (tool === 'highlighter') {
+    return (
+      <div className="dc-annot-chrome" role="toolbar" aria-label="Highlighter tools">
+        <div className="dc-annot-swatches" role="radiogroup" aria-label="Highlighter color">
+          {HIGHLIGHTER_PALETTE.map((c) => (
+            <button
+              key={c}
+              type="button"
+              className="dc-annot-sw"
+              aria-pressed={c === highlighterColor}
+              aria-label={`Highlighter color ${c}`}
+              title={`Highlighter color ${c}`}
+              style={{ background: c }}
+              onClick={() => setHighlighterColor(c)}
+            />
+          ))}
+        </div>
+        <div className="dc-annot-sep" />
+        {/* Nib width — three filled dots of increasing size (item 8). */}
+        <div className="dc-annot-swatches" role="radiogroup" aria-label="Highlighter width">
+          {HIGHLIGHTER_WIDTHS.map((w) => {
+            const dot = Math.round(6 + (w / 28) * 8); // 8–14 px preview dot
+            return (
+              <button
+                key={w}
+                type="button"
+                className="dc-annot-ibtn"
+                aria-pressed={w === highlighterWidth}
+                aria-label={`Highlighter width ${w}`}
+                title={`Width ${w}px`}
+                onClick={() => setHighlighterWidth(w)}
+              >
+                <span
+                  aria-hidden="true"
+                  style={{
+                    width: dot,
+                    height: dot,
+                    borderRadius: '50%',
+                    background: 'currentColor',
+                    display: 'inline-block',
+                  }}
+                />
+              </button>
+            );
+          })}
+        </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">
-        {STROKE_PALETTE.map((c) => (
-          <button
-            key={c}
-            type="button"
-            className="dc-annot-sw"
-            aria-pressed={c === color}
-            aria-label={`Color ${c}`}
-            title={`Color ${c}`}
-            style={{ background: c }}
-            onClick={() => setColor(c)}
-          />
-        ))}
+        {STROKE_PALETTE.map((base, i) => {
+          // The last slot is the default ink — render it themed so the active
+          // default reads true on dark canvases (white-ish ink) without
+          // touching the other hues. Key by the immutable base hex so a theme
+          // flip recolours the swatch in place rather than remounting.
+          const c = i === STROKE_PALETTE.length - 1 ? resolveDefaultInk(theme) : base;
+          return (
+            <button
+              key={base}
+              type="button"
+              className="dc-annot-sw"
+              aria-pressed={c === color}
+              aria-label={`Color ${c}`}
+              title={`Color ${c}`}
+              style={{ background: c }}
+              onClick={() => setColor(c)}
+            />
+          );
+        })}
       </div>
       {supportsFill ? (
         <>