@visualli/react 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualli/react",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "React canvas renderer for .visualli files \u2014 built on @visualli/core",
   "repository": {
     "type": "git",
@@ -36,8 +36,8 @@
     "react-konva": "^18.2.10"
   },
   "dependencies": {
-    "@visualli/bindings": "0.2.4",
-    "@visualli/core": "0.2.4",
+    "@visualli/bindings": "0.2.5",
+    "@visualli/core": "0.2.5",
     "zustand": "^4.5.2",
     "react-use-measure": "^1.1.2"
   },

package/src/VisualliCanvas.tsx

@@ -344,7 +344,9 @@ export default function VisualliCanvas(props: VisualliCanvasProps) {
     cancelPan:       rendererCancelPan,
     canvasWidth,
     canvasHeight,
-  } = useKonvaRenderer({ containerRef, stageRef });
+  // Enabled once the document is there: until then the canvas renders a placeholder without the container, and the
+  // size observer must attach to the real container when it appears (a file loading from visualliFile).
+  } = useKonvaRenderer({ containerRef, stageRef, enabled: !!doc });
 
   // Keep canvasSizeRef in sync with the measured container size.
   // The fallback to containerRef.getBoundingClientRect covers the period before
@@ -975,6 +977,8 @@ export default function VisualliCanvas(props: VisualliCanvasProps) {
   const pinnedHasChild = !!(pinnedNode && getChildLayerForNode(doc, pinnedNode.id, currentLayerId ?? ''));
   const compact = (viewport.canvasWidth || canvasSizeRef.current.width || 1024) < 560;
   const medium = !compact && (viewport.canvasWidth || canvasSizeRef.current.width || 1024) < 900;
+  // The map's width for the layout rules (runtime.ts LAYOUT_CSS), instead of container-query units (Chrome 105, Safari 16).
+  const mapWidth = viewport.canvasWidth || canvasSizeRef.current.width || 0;
   const peekHasChild = !!(peekNode && doc && getChildLayerForNode(doc, peekNode.id, currentLayerId ?? ''));
 
   return (
@@ -992,7 +996,7 @@ export default function VisualliCanvas(props: VisualliCanvasProps) {
       onPointerMoveCapture={onPinchMove}
       onPointerUpCapture={onPinchUp}
       onPointerCancelCapture={onPinchUp}
-      style={{ position: 'relative', overflow: 'hidden', userSelect: 'none', width: '100%', height: '100%', outline: 'none', ...(motionVars() as React.CSSProperties), ...style }}
+      style={{ position: 'relative', overflow: 'hidden', userSelect: 'none', width: '100%', height: '100%', outline: 'none', ...(motionVars() as React.CSSProperties), ...(mapWidth ? { ['--vi-map-w' as string]: `${mapWidth}px` } : {}), ...style }}
       onMouseMove={handleCanvasMouseMove}
       onMouseLeave={() => {
         // Only close the peek on mouse leave if not keeping it open

package/src/design/drawing.ts

@@ -17,6 +17,9 @@ import {
   blobPath,
   ideaStyle,
   labelGrowth,
+  labelLayout,
+  layoutGrowth,
+  blobProfile,
   nodeRadii,
   ringsFor,
   shapeOfLevel,
@@ -25,6 +28,7 @@ import {
 } from '@visualli/core';
 import type { Design } from './design';
 import { fontsEpoch } from './runtime';
+import { ideaMeasure } from './measure';
 import type { Arrival, EdgeArrival } from './choreography';
 
 const DEG = Math.PI / 180;
@@ -62,7 +66,7 @@ function dashOf(spec: string): number[] {
 // ── Label layout ──────────────────────────────────────────────────────────────
 
 const lineCache = new Map<string, string[]>();
-const MAX_CACHED_LAYOUTS = 8192;
+const MAX_CACHED_LAYOUTS = 32768; // room for every label of a 10k-idea map, so zooming and arrivals reuse them
 
 /** Greedy word wrap at `maxWidth` (natural px), clamped to `maxLines` with an ellipsis (ideas pass Infinity: they are
  *  sized to hold their whole label). */
@@ -135,6 +139,24 @@ export const ideaColors = (d: Design, n: Pick<FlatNode, 'topic' | 'custom'>) =>
 /** An idea's label size in natural px: the design system's size for its kind × the comfort label scale. */
 export const ideaLabelPx = (n: Pick<FlatNode, 'kind'>, d: Design): number => IDEA.labelSize[n.kind ?? 'node'] * d.labelScale;
 
+// An idea's label at a zoom (idea.ts labelLayout), wrapped inside its blob (blob.ts blobProfile). The lines are
+// cached by layoutGrowth, so they're reused while zooming within a step; the drawn size follows labelGrowth exactly.
+// Canvas text width is proportional to its size, so each width is measured once at the label's type size and scaled.
+const labelLines = new Map<string, string[]>();
+export function ideaLabelLayout(node: Pick<FlatNode, 'kind' | 'title' | 'width' | 'height' | 'level'>, d: Design, zoom: number): ReturnType<typeof labelLayout> {
+  const kind = node.kind ?? 'node', shape = shapeOfLevel(node.level), base = ideaLabelPx({ kind }, d);
+  const px = base * labelGrowth(zoom).idea, lineHeight = px * IDEA.labelLineHeight;
+  const key = `${fontsEpoch()}|${d.fontHand}|${+d.comfort.readableType}|${d.labelScale}|${kind}|${shape}|${node.width}|${node.height}|${layoutGrowth(zoom)}|${node.title}`;
+  let lines = labelLines.get(key);
+  if (!lines) {
+    const m = ideaMeasure(d);
+    lines = labelLayout(kind, node.title ?? '', nodeRadii(node), zoom, (t, at) => m(t, base) * (at / base), d.labelScale, blobProfile(shape)).lines;
+    if (labelLines.size >= MAX_CACHED_LAYOUTS) labelLines.clear();
+    labelLines.set(key, lines);
+  }
+  return { px, lineHeight, lines };
+}
+
 /**
  * Paint one idea (rings, body, label) centred on node.x / node.y.
  *
@@ -218,15 +240,12 @@ export function drawIdea(c: CanvasRenderingContext2D, node: FlatNode, d: Design,
   c.lineWidth = st.selected || st.focused ? CANVAS_STYLE.node.selectedStrokeWidth : d.metrics.nodeStroke;
   c.stroke(body);
 
-  // Label.
-  // Label: the whole label (the idea is sized for it, idea.ts), growing up to LABEL_GROWTH.idea when zoomed out.
+  // Label: the design system's labelLayout (idea.ts) — grown for the zoom first, then wrapped inside the idea's label
+  // box, so a grown label takes more lines instead of crossing the outline.
   if (detailed && node.title) {
-    const px = ideaLabelPx(node, d);
+    const lay = ideaLabelLayout(node, d, zoom);
+    const px = lay.px, lines = lay.lines, lh = lay.lineHeight;
     const font = `${TYPE_STYLES['node-label'].weight} ${px}px ${d.fontHand}`;
-    const lines = layoutLabel(c, node.title, font, node.width - IDEA.labelInset);
-    const s = labelGrowth(zoom).idea;
-    const lh = px * IDEA.labelLineHeight;
-    c.scale(s, s);
     c.font = font;
     c.fillStyle = d.tokens['node-ink']!;
     c.textAlign = 'center';

package/src/design/measure.ts

@@ -10,7 +10,7 @@ import { fontsEpoch } from './runtime';
 
 let ctx: CanvasRenderingContext2D | null | undefined;
 const cache = new Map<string, number>();
-const MAX_CACHED = 8192;
+const MAX_CACHED = 32768; // room for the candidate lines of a 10k-idea map
 
 /** Width of a label in `d`'s idea face (cached per face, size, text and font load). */
 export function ideaMeasure(d: Pick<Design, 'fontHand' | 'comfort'>): IdeaMeasure {

package/src/design/runtime.ts

@@ -21,13 +21,14 @@ const STYLE_ID = 'visualli-design-system';
  * Responsive rules the SDK adds on top of the spec CSS. The design system defines the
  * touch variant (`.is-touch`, bottom sheet); phone / tablet / desktop widths are
  * handled with the container-width classes the canvas sets (`is-compact` < 560px,
- * `is-medium` < 900px). Only design-system custom properties are used.
+ * `is-medium` < 900px); `--vi-map-w` is the map's width, set by the canvas (no container-query units, so older browsers
+ * lay it out the same). Only design-system custom properties are used.
  */
 const LAYOUT_CSS = `
 .vi-map__ctrls { transition: bottom var(--duration-quick) var(--ease-standard); } /* controlsPosition 'bottom-right': rising above the sheet */
 .vi-map.is-compact .vi-trail li:not(:first-child):not(.is-current):not(:nth-last-child(2)) { display: none; }
-.vi-map.is-compact .vi-trail button span { max-width: 40vw; max-width: 40cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.vi-map.is-compact .vi-fact:not(.vi-fact--sheet) { width: min(300px, calc(100cqw - 2 * var(--space-4))); }
+.vi-map.is-compact .vi-trail button span { max-width: calc(var(--vi-map-w, 100vw) * .4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vi-map.is-compact .vi-fact:not(.vi-fact--sheet) { width: min(300px, calc(var(--vi-map-w, 100vw) - 2 * var(--space-4))); }
 .vi-map.is-touch .vi-trail button { min-height: 32px; }
 `;
 const FONTS_ID = 'visualli-design-system-fonts';

package/src/generated/specCss.ts

@@ -1,10 +1,10 @@
 // GENERATED by scripts/gen-design-system.mjs from design-system/ (tokens/tokens.embed.css, css/spec.css). Do not edit.
 // Change the design system instead; the next `npm run build` regenerates this file.
 
-export const SPEC_TOKENS_CSS = "/* Spec tokens for all 8 themes, scoped to the map (.vi-map) for renderers embedded in another page — generated from the Visualli design system (v0.3.0). Do not edit here: changes come in through PRs from the private design system. MIT license, see ../LICENSE. */\n.vi-map, :where([data-theme=\"light\"]) .vi-map, .vi-map[data-theme] {\n  --font-display: \"Atkinson Hyperlegible Next\", system-ui, sans-serif;\n  --font-ui: \"Atkinson Hyperlegible Next\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  --font-hand: Kalam, \"Atkinson Hyperlegible Next\", cursive;\n  --font-note: Caveat, Kalam, cursive;\n  --font-mono: \"Atkinson Hyperlegible Mono\", ui-monospace, \"SF Mono\", Menlo, monospace;\n  --canvas: #f6f3ee;\n  --surface: #ffffff;\n  --surface-sunken: #f0ece5;\n  --surface-overlay: #ffffff;\n  --line: #e4dfd6;\n  --line-strong: #7a7f94;\n  --ink: #182140;\n  --ink-muted: #4f5671;\n  --ink-subtle: #5f647c;\n  --action: #182140;\n  --on-action: #ffffff;\n  --focus: #325e8c;\n  --link: #2f5a87;\n  --selection: rgba(18, 199, 211, 0.28);\n  --node-ink: #182140;\n  --edge: #2a3048;\n  --edge-label: #4f5671;\n  --topic-teal: #87f2f8;\n  --topic-teal-ring: #00cdd5;\n  --topic-harbor: #bcdbff;\n  --topic-harbor-ring: #76b2f5;\n  --topic-iris: #e0c8fe;\n  --topic-iris-ring: #bd96ea;\n  --topic-berry: #ffbdc4;\n  --topic-berry-ring: #f47e8f;\n  --topic-coral: #ffc7b2;\n  --topic-coral-ring: #f38e65;\n  --topic-amber: #ffcf9d;\n  --topic-amber-ring: #eb9c38;\n  --topic-sun: #ffea94;\n  --topic-sun-ring: #dfbd04;\n  --topic-stone: #e0dacf;\n  --topic-stone-ring: #bab09f;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-7: 48px;\n  --radius-sm: 10px;\n  --radius-md: 16px;\n  --radius-lg: 24px;\n  --radius-pill: 999px;\n  --shadow-float: 0 1px 2px rgba(24, 33, 64, 0.06), 0 8px 24px rgba(24, 33, 64, 0.08);\n  --shadow-pop: 0 2px 4px rgba(24, 33, 64, 0.08), 0 16px 40px rgba(24, 33, 64, 0.14);\n  --node-width: 200px;\n  --node-height: 148px;\n  --node-stroke: 3px;\n  --edge-width: 2.5px;\n  --edge-gap: 15px;\n  --edge-arc-max: 45px;\n  --immersion-alpha: 0.15;\n  --zoom-min: 0.3;\n  --zoom-max: 5;\n  --duration-instant: 100ms;\n  --duration-quick: 160ms;\n  --duration-base: 240ms;\n  --duration-zoom: 500ms;\n  --duration-reveal: 420ms;\n  --stagger-reveal: 70ms;\n  --ease-zoom: cubic-bezier(0.2, 0.8, 0.2, 1);\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --ease-bloom: cubic-bezier(0.34, 1.4, 0.64, 1);\n  --z-chrome: 10;\n  --z-card: 20;\n  --z-menu: 40;\n  }\n:where([data-theme=\"dark\"]) .vi-map, .vi-map[data-theme=\"dark\"] {\n  --canvas: #0f1220;\n  --surface: #171b2b;\n  --surface-sunken: #0f1220;\n  --surface-overlay: #212639;\n  --line: #2b3148;\n  --line-strong: #6c7392;\n  --ink: #eef0f7;\n  --ink-muted: #b3b8cc;\n  --ink-subtle: #8f95ae;\n  --action: #f6f3ee;\n  --on-action: #182140;\n  --focus: #12c7d3;\n  --link: #5fd8e1;\n  --selection: rgba(18, 199, 211, 0.32);\n  --edge: #c9cddc;\n  --edge-label: #b3b8cc;\n  --topic-teal-ring: #0fc5cd;\n  --topic-harbor-ring: #73aceb;\n  --topic-iris-ring: #b691e1;\n  --topic-berry-ring: #eb798a;\n  --topic-coral-ring: #ea8962;\n  --topic-amber-ring: #e29737;\n  --topic-sun-ring: #d8b70a;\n  --topic-stone-ring: #b4a999;\n  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.35);\n  --shadow-pop: 0 2px 4px rgba(0, 0, 0, 0.50), 0 16px 40px rgba(0, 0, 0, 0.50);\n  }\n:where([data-theme=\"focus-light\"]) .vi-map, .vi-map[data-theme=\"focus-light\"] {\n  --canvas: #f4f2ee;\n  --edge: #5a6079;\n  --edge-label: #5a6079;\n  --topic-teal: #bce8ea;\n  --topic-teal-ring: #67c6cb;\n  --topic-harbor: #c9d9ec;\n  --topic-harbor-ring: #8bb2de;\n  --topic-iris: #d9cfe8;\n  --topic-iris-ring: #b79ed4;\n  --topic-berry: #edc6c9;\n  --topic-berry-ring: #da9099;\n  --topic-coral: #eecec1;\n  --topic-coral-ring: #db9b82;\n  --topic-amber: #eed4ba;\n  --topic-amber-ring: #d6a570;\n  --topic-sun: #f4eac1;\n  --topic-sun-ring: #d2bf73;\n  --topic-stone: #dddad5;\n  }\n:where([data-theme=\"focus-dark\"]) .vi-map, .vi-map[data-theme=\"focus-dark\"] {\n  --canvas: #12141c;\n  --surface: #171b2b;\n  --surface-sunken: #0f1220;\n  --surface-overlay: #212639;\n  --line: #2b3148;\n  --line-strong: #6c7392;\n  --ink: #eef0f7;\n  --ink-muted: #b3b8cc;\n  --ink-subtle: #8f95ae;\n  --action: #f6f3ee;\n  --on-action: #182140;\n  --focus: #12c7d3;\n  --link: #5fd8e1;\n  --selection: rgba(18, 199, 211, 0.32);\n  --edge: #a9aec0;\n  --edge-label: #b3b8cc;\n  --topic-teal: #bce8ea;\n  --topic-teal-ring: #71bdc1;\n  --topic-harbor: #c9d9ec;\n  --topic-harbor-ring: #8cabce;\n  --topic-iris: #d9cfe8;\n  --topic-iris-ring: #ae9bc6;\n  --topic-berry: #edc6c9;\n  --topic-berry-ring: #cc8e95;\n  --topic-coral: #eecec1;\n  --topic-coral-ring: #cd9884;\n  --topic-amber: #eed4ba;\n  --topic-amber-ring: #c9a176;\n  --topic-sun: #f4eac1;\n  --topic-sun-ring: #c9b97a;\n  --topic-stone: #dddad5;\n  --topic-stone-ring: #b4a999;\n  }\n:where([data-theme=\"colorsafe-light\"]) .vi-map, .vi-map[data-theme=\"colorsafe-light\"] {\n  --topic-teal: #b0ecbc;\n  --topic-teal-ring: #6cc982;\n  --topic-harbor: #abdbfe;\n  --topic-harbor-ring: #60b4ec;\n  --topic-iris: #f6bde2;\n  --topic-iris-ring: #dc87c0;\n  --topic-berry: #feb79e;\n  --topic-berry-ring: #ec7f58;\n  --topic-coral: #fece96;\n  --topic-coral-ring: #e49d41;\n  --topic-amber: #b2e8fa;\n  --topic-amber-ring: #5cc4e2;\n  --topic-sun: #f6f097;\n  --topic-sun-ring: #d0c637;\n  --topic-stone: #dbdbdb;\n  --topic-stone-ring: #b7afb1;\n  }\n:where([data-theme=\"colorsafe-dark\"]) .vi-map, .vi-map[data-theme=\"colorsafe-dark\"] {\n  --canvas: #0f1220;\n  --surface: #171b2b;\n  --surface-sunken: #0f1220;\n  --surface-overlay: #212639;\n  --line: #2b3148;\n  --line-strong: #6c7392;\n  --ink: #eef0f7;\n  --ink-muted: #b3b8cc;\n  --ink-subtle: #8f95ae;\n  --action: #f6f3ee;\n  --on-action: #182140;\n  --focus: #12c7d3;\n  --link: #5fd8e1;\n  --selection: rgba(18, 199, 211, 0.32);\n  --edge: #c9cddc;\n  --edge-label: #b3b8cc;\n  --topic-teal: #b0ecbc;\n  --topic-teal-ring: #69c27e;\n  --topic-harbor: #abdbfe;\n  --topic-harbor-ring: #5eade2;\n  --topic-iris: #f6bde2;\n  --topic-iris-ring: #d383b9;\n  --topic-berry: #feb79e;\n  --topic-berry-ring: #e37a55;\n  --topic-coral: #fece96;\n  --topic-coral-ring: #db9840;\n  --topic-amber: #b2e8fa;\n  --topic-amber-ring: #5bbdda;\n  --topic-sun: #f6f097;\n  --topic-sun-ring: #c9bf37;\n  --topic-stone: #dbdbdb;\n  --topic-stone-ring: #b1a8aa;\n  }\n:where([data-theme=\"contrast-light\"]) .vi-map, .vi-map[data-theme=\"contrast-light\"] {\n  --canvas: #ffffff;\n  --surface-sunken: #f2f2f2;\n  --line: #5c6178;\n  --line-strong: #000000;\n  --ink: #000000;\n  --ink-muted: #1f2433;\n  --ink-subtle: #3a3f52;\n  --action: #000000;\n  --focus: #0b4a8f;\n  --link: #0b4a8f;\n  --node-ink: #000000;\n  --edge: #000000;\n  --edge-label: #1f2433;\n  --topic-teal-ring: #006b70;\n  --topic-harbor-ring: #0e599d;\n  --topic-iris-ring: #683b92;\n  --topic-berry-ring: #96173a;\n  --topic-coral-ring: #923400;\n  --topic-amber-ring: #7e4d00;\n  --topic-sun-ring: #7a6600;\n  --topic-stone-ring: #63594b;\n  --shadow-float: none;\n  --shadow-pop: none;\n  }\n:where([data-theme=\"contrast-dark\"]) .vi-map, .vi-map[data-theme=\"contrast-dark\"] {\n  --canvas: #000000;\n  --surface: #000000;\n  --surface-sunken: #0d0d0d;\n  --surface-overlay: #0d0d0d;\n  --line: #9aa0b8;\n  --line-strong: #ffffff;\n  --ink: #ffffff;\n  --ink-muted: #e6e8f0;\n  --ink-subtle: #c8ccda;\n  --action: #ffffff;\n  --on-action: #000000;\n  --focus: #5fe8f0;\n  --link: #7ff0f5;\n  --selection: rgba(18, 199, 211, 0.32);\n  --node-ink: #000000;\n  --edge: #ffffff;\n  --edge-label: #e6e8f0;\n  --topic-teal-ring: #64eff7;\n  --topic-harbor-ring: #b0d5fe;\n  --topic-iris-ring: #dcbfff;\n  --topic-berry-ring: #feb3bb;\n  --topic-coral-ring: #ffbea5;\n  --topic-amber-ring: #ffc78a;\n  --topic-sun-ring: #ffe26d;\n  --topic-stone-ring: #ddd3c2;\n  --shadow-float: none;\n  --shadow-pop: none;\n  }\n:where([data-motion=\"reduced\"]) .vi-map, .vi-map[data-motion=\"reduced\"] {\n  --duration-instant: 120ms;\n  --duration-quick: 0ms;\n  --duration-base: 0ms;\n  --duration-zoom: 0ms;\n  --duration-reveal: 0ms;\n  --stagger-reveal: 0ms;\n  }\n@media (prefers-reduced-motion: reduce) {\n  :where(:root:not([data-motion=\"full\"])) .vi-map {\n  --duration-instant: 120ms;\n  --duration-quick: 0ms;\n  --duration-base: 0ms;\n  --duration-zoom: 0ms;\n  --duration-reveal: 0ms;\n  --stagger-reveal: 0ms;\n  }\n}\n\n/* Type styles */\n.vi-text-heading { font-family: var(--font-ui); font-size: 17px; line-height: 24px; font-weight: 700; }\n.vi-text-body { font-family: var(--font-ui); font-size: 15px; line-height: 22px; font-weight: 400; }\n.vi-text-body-sm { font-family: var(--font-ui); font-size: 13px; line-height: 18px; font-weight: 400; }\n.vi-text-label { font-family: var(--font-ui); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.01em; }\n.vi-text-caption { font-family: var(--font-ui); font-size: 12px; line-height: 16px; font-weight: 400; }\n.vi-text-node-root { font-family: var(--font-hand); font-size: 30px; line-height: 34px; font-weight: 700; }\n.vi-text-node-label { font-family: var(--font-hand); font-size: 22px; line-height: 26px; font-weight: 700; }\n.vi-text-edge-label { font-family: var(--font-note); font-size: 18px; line-height: 20px; font-weight: 500; }\n.vi-text-annotation { font-family: var(--font-note); font-size: 24px; line-height: 26px; font-weight: 600; }\n";
-export const SPEC_COMPONENT_CSS = "/* Styles for the spec components (map, nodes, connectors, peek, terms, depth trail, controls) — generated from the Visualli design system (v0.3.0). Do not edit here: changes come in through PRs from the private design system. MIT license, see ../LICENSE. */\n.vi-map { --vi-fs-body: 15px; --vi-fs-sm: 13px; --vi-fs-cap: 12px; --vi-lh-body: 22px; --vi-label-scale: 1; }\n[data-theme$=\"dark\"] :where([class^=\"vi-\"], [class*=\" vi-\"]) { color-scheme: dark; }\n:where([data-scale=\"lg\"]) .vi-map, .vi-map[data-scale=\"lg\"] { --vi-fs-body: 17px; --vi-fs-sm: 15px; --vi-fs-cap: 14px; --vi-lh-body: 26px; --vi-label-scale: 1.15; }\n:where([data-type=\"readable\"]) .vi-map, .vi-map[data-type=\"readable\"] { --font-hand: \"Atkinson Hyperlegible Next\", system-ui, sans-serif; --font-note: \"Atkinson Hyperlegible Next\", system-ui, sans-serif; --font-display: \"Atkinson Hyperlegible Next\", system-ui, sans-serif; }\n[data-type=\"readable\"] .vi-node__label, [data-type=\"readable\"] .vi-edge__label, [data-type=\"readable\"] .vi-map__group-label { font-family: var(--font-ui) !important; font-weight: 700; letter-spacing: 0.02em; font-style: normal; }\n.vi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.vi-icon { flex: none; display: block; }\n:where([class^=\"vi-\"], [class*=\" vi-\"]):where(button, a, input, textarea, [tabindex]):focus-visible, :where([class^=\"vi-\"], [class*=\" vi-\"]) :where(button, a, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }\n.vi-iconbtn { display: inline-grid; place-items: center; border-radius: var(--radius-sm); border: 1.5px solid transparent; background: transparent; color: var(--ink); cursor: pointer; transition: background var(--duration-instant); flex: none; }\n.vi-iconbtn--sm { width: 32px; height: 32px; }\n.vi-iconbtn--md { width: 40px; height: 40px; }\n.vi-iconbtn--lg { width: 48px; height: 48px; border-radius: var(--radius-md); }\n.vi-iconbtn:hover { background: var(--surface-sunken); }\n.vi-iconbtn--surface { background: var(--surface); border-color: var(--line); }\n.vi-iconbtn--surface:hover { border-color: var(--line-strong); }\n.vi-iconbtn--primary { background: var(--action); color: var(--on-action); border-radius: var(--radius-pill); }\n.vi-iconbtn.is-active { background: var(--action); color: var(--on-action); }\n[data-theme^=\"contrast\"] .vi-ctrls { border: 2px solid var(--line-strong); }\n.vi-node { position: relative; display: inline-grid; place-items: center; border: 0; padding: 0; background: none; color: var(--node-ink); cursor: default; transition: transform var(--duration-base) var(--ease-bloom), opacity var(--duration-base); -webkit-tap-highlight-color: transparent; }\nbutton.vi-node { cursor: pointer; }\n.vi-node__svg { position: absolute; inset: 0; overflow: visible; }\n.vi-node__body { filter: drop-shadow(var(--vi-node-shadow, 0 6px 14px rgba(24, 33, 64, .10))); }\n[data-theme$=\"dark\"] .vi-node__body { --vi-node-shadow: 0 0 22px rgba(255, 255, 255, .10); }\n[data-theme^=\"contrast\"] .vi-node__body { filter: none; }\n.vi-node__rings { transform-origin: center; transition: transform var(--duration-base) var(--ease-standard); }\n@media (hover: hover) {\n  button.vi-node:hover .vi-node__rings { transform: rotate(var(--vi-ring-turn, -2deg)) scale(var(--vi-ring-grow, 1.015)); }\n  button.vi-node:hover { transform: translateY(calc(var(--vi-lift, 2px) * -1)); }\n}\n.vi-node { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }\n.vi-node.is-selected { transform: translateY(-2px); }\n.vi-node.is-selected .vi-node__rings { transform: rotate(var(--vi-ring-turn, -2deg)) scale(var(--vi-ring-grow, 1.015)); }\n.vi-node.is-selected .vi-node__body { stroke-width: 4; }\n.vi-node:focus-visible { outline: none; }\n.vi-node:focus-visible .vi-node__body { stroke: var(--focus); stroke-width: 4; }\n.vi-node.is-selected .vi-node__body { stroke: var(--ink); }\n.vi-node__label { position: relative; text-align: center; color: var(--node-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: calc(var(--vi-nfs, 22px) * var(--vi-label-scale) * var(--vi-ninv, 1)); line-height: 1.15; padding-top: 2px; }\n.vi-node__label.node-root { --vi-nfs: 30px; }\n.vi-node--mini .vi-node__label { --vi-nfs: 15px; }\n.vi-node.is-dimmed { opacity: 1; }\n[data-theme^=\"focus\"] .vi-node.is-dimmed { opacity: .4; }\n.vi-map.is-touch .vi-node.is-dimmed { opacity: .6; }\n[data-theme^=\"focus\"] .vi-map.is-touch .vi-node.is-dimmed { opacity: .4; }\n.vi-edge__line { fill: none; stroke: var(--edge); stroke-width: 2.5; stroke-linecap: round; }\n.vi-edge.is-dashed .vi-edge__line { stroke-dasharray: 7 7; }\n.vi-edge__arrow { fill: none; stroke: var(--edge); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }\n.vi-edge__label { font: 500 calc(18px * var(--vi-inv, 1)) / 1 var(--font-note); fill: var(--edge-label); paint-order: stroke; stroke: var(--canvas); stroke-width: 5px; stroke-linejoin: round; letter-spacing: .01em; }\n[data-type=\"readable\"] .vi-edge__label { font-size: calc(14px * var(--vi-inv, 1)); font-weight: 600; }\n.vi-fact { position: relative; width: 300px; box-sizing: border-box; padding: var(--space-4) var(--space-4) var(--space-3); background: var(--surface-overlay); color: var(--ink); border: 2px solid var(--vi-fact-ring); border-radius: 14px 18px 12px 16px / 16px 12px 18px 14px; font: 400 var(--vi-fs-sm)/20px var(--font-ui); z-index: var(--z-card); animation: vi-pop var(--duration-quick) var(--ease-standard); }\n.vi-fact { box-shadow: 5px 6px 0 0 var(--vi-fact-fill), 5px 6px 0 2px var(--vi-fact-ring); }\n[data-theme^=\"contrast\"] .vi-fact { border-color: var(--ink); }\n[data-theme^=\"contrast\"] .vi-fact { box-shadow: none; }\n.vi-fact__title { font: 700 22px/26px var(--font-hand); margin-bottom: var(--space-1); }\n.vi-fact__body { color: var(--ink); }\n.vi-fact__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--line); }\n.vi-fact__acts { display: inline-flex; gap: var(--space-3); align-items: center; flex: none; }\n.vi-fact__link { color: var(--link); font: 600 var(--vi-fs-cap)/16px var(--font-ui); }\n.vi-fact__step { display: inline-flex; align-items: center; gap: 2px; border: 0; background: var(--action); color: var(--on-action); font: 600 var(--vi-fs-cap)/16px var(--font-ui); padding: 5px 8px 5px 10px; border-radius: var(--radius-pill); cursor: pointer; }\n.vi-trail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: relative; }\n.vi-trail li { position: relative; }\n.vi-trail li + li::before { content: \"\"; position: absolute; left: 13px; top: -8px; height: 10px; border-left: 1.5px dashed var(--line-strong); }\n.vi-trail button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 8px 4px 5px; border-radius: var(--radius-sm); color: var(--ink-muted); font: 400 var(--vi-fs-cap)/16px var(--font-ui); cursor: pointer; }\n.vi-trail button span { display: inline-flex; align-items: center; gap: 4px; }\n.vi-trail button:hover:not(:disabled) { background: var(--surface-sunken); color: var(--ink); }\n.vi-trail li.is-current button { color: var(--ink); font-weight: 700; font-size: var(--vi-fs-sm); cursor: default; background: var(--surface); box-shadow: var(--shadow-float); }\n.vi-trail li.is-current button:disabled { opacity: 1; }\n.vi-ctrls { display: inline-flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-float); }\n.vi-ctrls__pct { min-width: 44px; text-align: center; font: 600 var(--vi-fs-cap)/16px var(--font-ui); color: var(--ink-muted); font-variant-numeric: tabular-nums; }\n.vi-ctrls__div { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }\n.vi-map { position: relative; overflow: hidden; background: var(--canvas); border-radius: inherit; isolation: isolate; }\n.vi-map__immersion { position: absolute; inset: 0; opacity: var(--immersion-alpha); transition: background var(--duration-base); z-index: -1; }\n.vi-map__world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }\n.vi-map__edges { position: absolute; overflow: visible; pointer-events: none; }\n.vi-map__group rect { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 10 6; }\n.vi-map__group-label { position: absolute; transform: translate(-50%, -50%); z-index: 2; max-width: 420px; box-sizing: border-box; padding: 6px 22px 8px; background: var(--topic-stone); border: 1.5px solid var(--topic-stone-ring); border-radius: var(--radius-pill); font: 700 22px/1.1 var(--font-note); color: var(--node-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; font-size: calc(26px * var(--vi-label-scale) * var(--vi-ninv, 1)); }\n[data-theme^=\"contrast\"] .vi-map__group-label { border: 2px solid var(--line-strong); }\n.vi-map__slot { position: absolute; transform: translate(-50%, -50%); }\n.vi-map.is-reveal .vi-map__slot { animation: vi-bloom var(--duration-reveal) var(--ease-bloom) backwards; }\n.vi-map.is-reveal .vi-edge { animation: vi-fade var(--duration-base) var(--ease-standard) backwards; }\n.vi-map.is-reveal .vi-edge__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: vi-line var(--vi-line-draw, .5s) var(--ease-standard) forwards; animation-delay: inherit; }\n.vi-map.is-reveal .vi-edge.is-dashed .vi-edge__line { stroke-dasharray: 7 7; stroke-dashoffset: 0; animation: vi-fade var(--vi-line-draw, .5s) var(--ease-standard) backwards; animation-delay: inherit; }\n.vi-map:not(.is-reveal) .vi-edge__line { stroke-dasharray: none; }\n.vi-map:not(.is-reveal) .vi-edge.is-dashed .vi-edge__line { stroke-dasharray: 7 7; }\n.vi-map__lens { position: absolute; inset: 0; transform-origin: var(--vi-ox) var(--vi-oy); }\n.vi-map.is-diving .vi-map__lens { transform: scale(var(--vi-dive-scale, 3.2)); opacity: 0; transition: transform var(--duration-zoom) var(--ease-zoom), opacity var(--vi-dive-fade, 160ms) var(--vi-dive-fade-delay, 150ms); }\n.vi-map.is-surfacing .vi-map__lens { transform: scale(var(--vi-surface-scale, .6)); opacity: 0; transform-origin: 50% 50%; transition: transform var(--vi-surface-dur, 220ms) var(--ease-zoom), opacity var(--vi-surface-fade, 200ms); }\n.vi-map.is-reveal .vi-map__lens { animation: vi-settle var(--vi-settle-dur, 260ms) var(--ease-standard); }\n[data-motion=\"reduced\"] .vi-map__lens { animation: none !important; transform: none !important; }\n.vi-map__fact { position: absolute; }\n.vi-map.is-idle .vi-map__world { transition: transform var(--duration-base) var(--ease-standard); }\n.vi-map.is-panning, .vi-map.is-panning .vi-node { cursor: grabbing; }\n.vi-map__hint { position: absolute; left: var(--space-4); right: var(--space-4); margin: 0; text-align: center; color: var(--ink-muted); pointer-events: none; z-index: var(--z-chrome); animation: vi-fade var(--duration-base) var(--ease-standard); }\n.vi-fact__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }\n.vi-fact__back { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 2px 0; margin-bottom: var(--space-1); color: var(--link); font: 600 var(--vi-fs-cap)/16px var(--font-ui); cursor: pointer; }\n.vi-term { border: 0; background: none; padding: 0; font: inherit; color: var(--link); text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; }\n.vi-fact--sheet { position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-width: 560px; margin: 0 auto; max-height: var(--vi-sheet-h, 300px); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 2px solid var(--vi-fact-ring); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -6px 0 0 var(--vi-fact-fill), var(--shadow-pop); font-size: var(--vi-fs-body); line-height: var(--vi-lh-body); animation: vi-sheet-in var(--duration-base) var(--ease-standard); transition: transform var(--duration-quick) var(--ease-standard), max-height var(--duration-base) var(--ease-standard); }\n.vi-fact--sheet.is-expanded { max-height: calc(100% - var(--space-7)); }\n.vi-fact__grip { position: sticky; top: 0; display: flex; justify-content: center; margin: 0 calc(var(--space-4) * -1); background: var(--surface-overlay); touch-action: none; cursor: grab; z-index: 1; }\n.vi-fact__handle { position: relative; width: 64px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; }\n.vi-fact__handle::after { content: \"\"; position: absolute; left: 12px; right: 12px; top: 10px; height: 5px; border-radius: var(--radius-pill); background: var(--line-strong); }\n.vi-fact--sheet .vi-fact__title { font-size: calc(24px * var(--vi-label-scale)); line-height: 1.15; padding-top: var(--space-1); }\n.vi-fact--sheet .vi-fact__close { margin: 0 calc(var(--space-2) * -1) 0 0; }\n.vi-fact--sheet .vi-fact__step { min-height: 44px; padding: 0 var(--space-3) 0 var(--space-4); font-size: var(--vi-fs-sm); }\n.vi-fact--sheet .vi-fact__link { font-size: var(--vi-fs-sm); min-height: 44px; display: inline-flex; align-items: center; }\n[data-motion=\"reduced\"] .vi-fact--sheet { animation: vi-fade 120ms; }\n@media (prefers-reduced-motion: reduce) {\n  .vi-fact--sheet { animation: vi-fade 120ms; }\n  .vi-map.is-idle .vi-map__world { transition: none; }\n}\n.vi-map__trail { position: absolute; top: var(--space-4); left: var(--space-4); z-index: var(--z-chrome); }\n.vi-map__ctrls { position: absolute; top: var(--space-4); right: var(--space-4); z-index: var(--z-chrome); }\n[data-reveal=\"instant\"] .vi-map.is-reveal .vi-map__slot, [data-motion=\"reduced\"] .vi-map.is-reveal .vi-map__slot { animation: vi-fade var(--vi-reduced-fade, 120ms) backwards; animation-delay: 0ms !important; }\n[data-reveal=\"instant\"] .vi-map.is-reveal .vi-edge, [data-reveal=\"instant\"] .vi-map.is-reveal .vi-edge__line, [data-motion=\"reduced\"] .vi-map.is-reveal .vi-edge, [data-motion=\"reduced\"] .vi-map.is-reveal .vi-edge__line { animation: none; stroke-dashoffset: 0; }\n@media (prefers-reduced-motion: reduce) {\n  .vi-map.is-reveal .vi-map__slot { animation: vi-fade var(--vi-reduced-fade, 120ms) backwards; animation-delay: 0ms !important; }\n  .vi-map.is-reveal .vi-edge, .vi-map.is-reveal .vi-edge__line { animation: none; stroke-dashoffset: 0; }\n}\n[data-motion=\"reduced\"] :where([class^=\"vi-\"], [class*=\" vi-\"]), [data-motion=\"reduced\"] :where([class^=\"vi-\"], [class*=\" vi-\"])::before, [data-motion=\"reduced\"] :where([class^=\"vi-\"], [class*=\" vi-\"])::after { transition-duration: 1ms !important; }\n.vi-fact__acts { flex-wrap: wrap; justify-content: flex-end; }\n.vi-fact__link { display: inline-flex; align-items: center; gap: 2px; }\n.vi-anchor { position: relative; display: inline; }\n.vi-anchor.is-open .vi-term { background: var(--selection); border-radius: 3px; }\n.vi-anchor__pop { position: absolute; left: -12px; top: calc(100% + 6px); z-index: var(--z-menu); display: block; width: max-content; }\n.vi-anchor-card { position: relative; display: block; width: min(300px, calc(100vw - 32px)); box-sizing: border-box; padding: var(--space-3) var(--space-4) var(--space-3); background: var(--surface-overlay); color: var(--ink); text-align: left; white-space: normal; font: 400 var(--vi-fs-sm)/20px var(--font-ui); border: 2px solid var(--vi-fact-ring); border-radius: 12px 16px 10px 14px / 14px 10px 16px 12px; box-shadow: 4px 5px 0 0 var(--vi-fact-fill), 4px 5px 0 2px var(--vi-fact-ring), var(--shadow-pop); animation: vi-pop var(--duration-quick) var(--ease-standard); }\n.vi-anchor-card.is-in-sheet { width: auto; border: 0; box-shadow: none; padding: 0; animation: none; background: transparent; }\n[data-theme^=\"contrast\"] .vi-anchor-card { border-color: var(--ink); box-shadow: none; }\n.vi-anchor-card__eyebrow { font: 400 11px/14px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }\n.vi-anchor-card__word { font: 700 20px/24px var(--font-hand); color: var(--ink); margin: 2px 0 var(--space-1); }\n.vi-fact--sheet .vi-anchor-card__word { font-size: calc(24px * var(--vi-label-scale)); line-height: 1.15; }\n.vi-anchor-card__desc { margin: 0; color: var(--ink); }\n.vi-anchor-card__note { margin: var(--space-2) 0 0; font: 400 var(--vi-fs-cap)/16px var(--font-ui); color: var(--ink-muted); }\n.vi-anchor-card__acts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--line); }\n.vi-fact--sheet .vi-anchor-card__acts .vi-fact__link { min-height: 44px; }\n[data-type=\"readable\"] .vi-anchor-card__word { font-family: var(--font-ui); }\n[data-motion=\"reduced\"] .vi-anchor-card { animation: vi-fade 120ms; }\n@media (prefers-reduced-motion: reduce) {\n  .vi-anchor-card { animation: vi-fade 120ms; }\n}\n.vi-peek .vi-fact__foot { flex-wrap: wrap; row-gap: var(--space-2); }\n.vi-peek .vi-fact__acts { margin-left: auto; }\n.vi-map.has-highlight .vi-node.is-dimmed { opacity: .35; transition: opacity var(--duration-quick) var(--ease-standard); }\n.vi-map.has-highlight .vi-node.is-selected .vi-node__body { stroke: var(--ink); }\n.vi-map { container-type: inline-size; }\n.vi-edge__hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: pointer; }\n.vi-edge__hit:hover + .vi-edge__line { stroke-width: 3.5; }\n.vi-edge.is-selected .vi-edge__line, .vi-edge.is-selected .vi-edge__arrow { stroke: var(--focus); stroke-width: 3.5; }\n.vi-map__group-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }\n.vi-map__group.is-selected rect:not(.vi-map__group-hit) { stroke: var(--focus); stroke-width: 2.5; stroke-dasharray: none; }\n.vi-map__group-label.is-selected { border-color: var(--focus); color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }\n.vi-map { touch-action: pan-x pan-y; }\n.vi-map.is-app { touch-action: none; }\n.vi-map.is-pinching .vi-map__world { transition: none; }\n.vi-map.is-instant.is-reveal .vi-map__slot { animation: vi-fade var(--vi-reduced-fade, 120ms) backwards; animation-delay: 0ms !important; }\n.vi-map.is-instant.is-reveal .vi-edge, .vi-map.is-instant.is-reveal .vi-edge__line { animation: none; stroke-dashoffset: 0; }\n.vi-map.is-instant .vi-node, .vi-map.is-instant .vi-node__rings { transition: none; }\n.vi-map.is-detail-body .vi-node:not(.is-selected):not(:focus-visible):not(:hover) :is(.vi-node__rings, .vi-node__label), .vi-map.is-detail-speck .vi-node:not(.is-selected):not(:focus-visible):not(:hover) :is(.vi-node__rings, .vi-node__label) { display: none; }\n.vi-map.is-detail-body .vi-node:not(.is-selected):not(:focus-visible):not(:hover) .vi-node__body, .vi-map.is-detail-speck .vi-node:not(.is-selected):not(:focus-visible):not(:hover) .vi-node__body, .vi-map.no-shadows .vi-node__body { filter: none; }\n@keyframes vi-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }\n@keyframes vi-fade { from { opacity: 0; } }\n@keyframes vi-bloom { from { opacity: 0; transform: translate(calc(-50% + var(--vi-dx)), calc(-50% + var(--vi-dy))) scale(var(--vi-bloom-from, .55)); } }\n@keyframes vi-line { to { stroke-dashoffset: 0; } }\n@keyframes vi-settle { from { transform: scale(var(--vi-settle-from, .94)); } }\n@keyframes vi-sheet-in { from { transform: translateY(100%); } }\n";
+export const SPEC_TOKENS_CSS = "/* Spec tokens for all 8 themes, scoped to the map (.vi-map) for renderers embedded in another page — generated from the Visualli design system (v0.3.1). Do not edit here: changes come in through PRs from the private design system. MIT license, see ../LICENSE. */\n.vi-map, .vi-map[data-theme] {\n  --font-display: \"Atkinson Hyperlegible Next\", system-ui, sans-serif;\n  --font-ui: \"Atkinson Hyperlegible Next\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  --font-hand: Kalam, \"Atkinson Hyperlegible Next\", cursive;\n  --font-note: Caveat, Kalam, cursive;\n  --font-mono: \"Atkinson Hyperlegible Mono\", ui-monospace, \"SF Mono\", Menlo, monospace;\n  --canvas: #f6f3ee;\n  --surface: #ffffff;\n  --surface-sunken: #f0ece5;\n  --surface-overlay: #ffffff;\n  --line: #e4dfd6;\n  --line-strong: #7a7f94;\n  --ink: #182140;\n  --ink-muted: #4f5671;\n  --ink-subtle: #5f647c;\n  --action: #182140;\n  --on-action: #ffffff;\n  --focus: #325e8c;\n  --link: #2f5a87;\n  --selection: rgba(18, 199, 211, 0.28);\n  --node-ink: #182140;\n  --edge: #2a3048;\n  --edge-label: #4f5671;\n  --topic-teal: #87f2f8;\n  --topic-teal-ring: #00cdd5;\n  --topic-harbor: #bcdbff;\n  --topic-harbor-ring: #76b2f5;\n  --topic-iris: #e0c8fe;\n  --topic-iris-ring: #bd96ea;\n  --topic-berry: #ffbdc4;\n  --topic-berry-ring: #f47e8f;\n  --topic-coral: #ffc7b2;\n  --topic-coral-ring: #f38e65;\n  --topic-amber: #ffcf9d;\n  --topic-amber-ring: #eb9c38;\n  --topic-sun: #ffea94;\n  --topic-sun-ring: #dfbd04;\n  --topic-stone: #e0dacf;\n  --topic-stone-ring: #bab09f;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-7: 48px;\n  --radius-sm: 10px;\n  --radius-md: 16px;\n  --radius-lg: 24px;\n  --radius-pill: 999px;\n  --shadow-float: 0 1px 2px rgba(24, 33, 64, 0.06), 0 8px 24px rgba(24, 33, 64, 0.08);\n  --shadow-pop: 0 2px 4px rgba(24, 33, 64, 0.08), 0 16px 40px rgba(24, 33, 64, 0.14);\n  --node-width: 200px;\n  --node-height: 148px;\n  --node-stroke: 3px;\n  --edge-width: 2.5px;\n  --edge-gap: 15px;\n  --edge-arc-max: 45px;\n  --immersion-alpha: 0.15;\n  --zoom-min: 0.3;\n  --zoom-max: 5;\n  --duration-instant: 100ms;\n  --duration-quick: 160ms;\n  --duration-base: 240ms;\n  --duration-zoom: 500ms;\n  --duration-reveal: 420ms;\n  --stagger-reveal: 70ms;\n  --ease-zoom: cubic-bezier(0.2, 0.8, 0.2, 1);\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --ease-bloom: cubic-bezier(0.34, 1.4, 0.64, 1);\n  --z-chrome: 10;\n  --z-card: 20;\n  --z-menu: 40;\n  }\n:where([data-theme=\"light\"]) .vi-map {\n  --font-display: \"Atkinson Hyperlegible Next\", system-ui, sans-serif;\n  --font-ui: \"Atkinson Hyperlegible Next\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  --font-hand: Kalam, \"Atkinson Hyperlegible Next\", cursive;\n  --font-note: Caveat, Kalam, cursive;\n  --font-mono: \"Atkinson Hyperlegible Mono\", ui-monospace, \"SF Mono\", Menlo, monospace;\n  --canvas: #f6f3ee;\n  --surface: #ffffff;\n  --surface-sunken: #f0ece5;\n  --surface-overlay: #ffffff;\n  --line: #e4dfd6;\n  --line-strong: #7a7f94;\n  --ink: #182140;\n  --ink-muted: #4f5671;\n  --ink-subtle: #5f647c;\n  --action: #182140;\n  --on-action: #ffffff;\n  --focus: #325e8c;\n  --link: #2f5a87;\n  --selection: rgba(18, 199, 211, 0.28);\n  --node-ink: #182140;\n  --edge: #2a3048;\n  --edge-label: #4f5671;\n  --topic-teal: #87f2f8;\n  --topic-teal-ring: #00cdd5;\n  --topic-harbor: #bcdbff;\n  --topic-harbor-ring: #76b2f5;\n  --topic-iris: #e0c8fe;\n  --topic-iris-ring: #bd96ea;\n  --topic-berry: #ffbdc4;\n  --topic-berry-ring: #f47e8f;\n  --topic-coral: #ffc7b2;\n  --topic-coral-ring: #f38e65;\n  --topic-amber: #ffcf9d;\n  --topic-amber-ring: #eb9c38;\n  --topic-sun: #ffea94;\n  --topic-sun-ring: #dfbd04;\n  --topic-stone: #e0dacf;\n  --topic-stone-ring: #bab09f;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-7: 48px;\n  --radius-sm: 10px;\n  --radius-md: 16px;\n  --radius-lg: 24px;\n  --radius-pill: 999px;\n  --shadow-float: 0 1px 2px rgba(24, 33, 64, 0.06), 0 8px 24px rgba(24, 33, 64, 0.08);\n  --shadow-pop: 0 2px 4px rgba(24, 33, 64, 0.08), 0 16px 40px rgba(24, 33, 64, 0.14);\n  --node-width: 200px;\n  --node-height: 148px;\n  --node-stroke: 3px;\n  --edge-width: 2.5px;\n  --edge-gap: 15px;\n  --edge-arc-max: 45px;\n  --immersion-alpha: 0.15;\n  --zoom-min: 0.3;\n  --zoom-max: 5;\n  --duration-instant: 100ms;\n  --duration-quick: 160ms;\n  --duration-base: 240ms;\n  --duration-zoom: 500ms;\n  --duration-reveal: 420ms;\n  --stagger-reveal: 70ms;\n  --ease-zoom: cubic-bezier(0.2, 0.8, 0.2, 1);\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --ease-bloom: cubic-bezier(0.34, 1.4, 0.64, 1);\n  --z-chrome: 10;\n  --z-card: 20;\n  --z-menu: 40;\n  }\n.vi-map[data-theme=\"dark\"] {\n  --canvas: #0f1220;\n  --surface: #171b2b;\n  --surface-sunken: #0f1220;\n  --surface-overlay: #212639;\n  --line: #2b3148;\n  --line-strong: #6c7392;\n  --ink: #eef0f7;\n  --ink-muted: #b3b8cc;\n  --ink-subtle: #8f95ae;\n  --action: #f6f3ee;\n  --on-action: #182140;\n  --focus: #12c7d3;\n  --link: #5fd8e1;\n  --selection: rgba(18, 199, 211, 0.32);\n  --edge: #c9cddc;\n  --edge-label: #b3b8cc;\n  --topic-teal-ring: #0fc5cd;\n  --topic-harbor-ring: #73aceb;\n  --topic-iris-ring: #b691e1;\n  --topic-berry-ring: #eb798a;\n  --topic-coral-ring: #ea8962;\n  --topic-amber-ring: #e29737;\n  --topic-sun-ring: #d8b70a;\n  --topic-stone-ring: #b4a999;\n  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.35);\n  --shadow-pop: 0 2px 4px rgba(0, 0, 0, 0.50), 0 16px 40px rgba(0, 0, 0, 0.50);\n  }\n:where([data-theme=\"dark\"]) .vi-map {\n  --canvas: #0f1220;\n  --surface: #171b2b;\n  --surface-sunken: #0f1220;\n  --surface-overlay: #212639;\n  --line: #2b3148;\n  --line-strong: #6c7392;\n  --ink: #eef0f7;\n  --ink-muted: #b3b8cc;\n  --ink-subtle: #8f95ae;\n  --action: #f6f3ee;\n  --on-action: #182140;\n  --focus: #12c7d3;\n  --link: #5fd8e1;\n  --selection: rgba(18, 199, 211, 0.32);\n  --edge: #c9cddc;\n  --edge-label: #b3b8cc;\n  --topic-teal-ring: #0fc5cd;\n  --topic-harbor-ring: #73aceb;\n  --topic-iris-ring: #b691e1;\n  --topic-berry-ring: #eb798a;\n  --topic-coral-ring: #ea8962;\n  --topic-amber-ring: #e29737;\n  --topic-sun-ring: #d8b70a;\n  --topic-stone-ring: #b4a999;\n  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.35);\n  --shadow-pop: 0 2px 4px rgba(0, 0, 0, 0.50), 0 16px 40px rgba(0, 0, 0, 0.50);\n  }\n.vi-map[data-theme=\"focus-light\"] {\n  --canvas: #f4f2ee;\n  --edge: #5a6079;\n  --edge-label: #5a6079;\n  --topic-teal: #bce8ea;\n  --topic-teal-ring: #67c6cb;\n  --topic-harbor: #c9d9ec;\n  --topic-harbor-ring: #8bb2de;\n  --topic-iris: #d9cfe8;\n  --topic-iris-ring: #b79ed4;\n  --topic-berry: #edc6c9;\n  --topic-berry-ring: #da9099;\n  --topic-coral: #eecec1;\n  --topic-coral-ring: #db9b82;\n  --topic-amber: #eed4ba;\n  --topic-amber-ring: #d6a570;\n  --topic-sun: #f4eac1;\n  --topic-sun-ring: #d2bf73;\n  --topic-stone: #dddad5;\n  }\n:where([data-theme=\"focus-light\"]) .vi-map {\n  --canvas: #f4f2ee;\n  --edge: #5a6079;\n  --edge-label: #5a6079;\n  --topic-teal: #bce8ea;\n  --topic-teal-ring: #67c6cb;\n  --topic-harbor: #c9d9ec;\n  --topic-harbor-ring: #8bb2de;\n  --topic-iris: #d9cfe8;\n  --topic-iris-ring: #b79ed4;\n  --topic-berry: #edc6c9;\n  --topic-berry-ring: #da9099;\n  --topic-coral: #eecec1;\n  --topic-coral-ring: #db9b82;\n  --topic-amber: #eed4ba;\n  --topic-amber-ring: #d6a570;\n  --topic-sun: #f4eac1;\n  --topic-sun-ring: #d2bf73;\n  --topic-stone: #dddad5;\n  }\n.vi-map[data-theme=\"focus-dark\"] {\n  --canvas: #12141c;\n  --surface: #171b2b;\n  --surface-sunken: #0f1220;\n  --surface-overlay: #212639;\n  --line: #2b3148;\n  --line-strong: #6c7392;\n  --ink: #eef0f7;\n  --ink-muted: #b3b8cc;\n  --ink-subtle: #8f95ae;\n  --action: #f6f3ee;\n  --on-action: #182140;\n  --focus: #12c7d3;\n  --link: #5fd8e1;\n  --selection: rgba(18, 199, 211, 0.32);\n  --edge: #a9aec0;\n  --edge-label: #b3b8cc;\n  --topic-teal: #bce8ea;\n  --topic-teal-ring: #71bdc1;\n  --topic-harbor: #c9d9ec;\n  --topic-harbor-ring: #8cabce;\n  --topic-iris: #d9cfe8;\n  --topic-iris-ring: #ae9bc6;\n  --topic-berry: #edc6c9;\n  --topic-berry-ring: #cc8e95;\n  --topic-coral: #eecec1;\n  --topic-coral-ring: #cd9884;\n  --topic-amber: #eed4ba;\n  --topic-amber-ring: #c9a176;\n  --topic-sun: #f4eac1;\n  --topic-sun-ring: #c9b97a;\n  --topic-stone: #dddad5;\n  --topic-stone-ring: #b4a999;\n  }\n:where([data-theme=\"focus-dark\"]) .vi-map {\n  --canvas: #12141c;\n  --surface: #171b2b;\n  --surface-sunken: #0f1220;\n  --surface-overlay: #212639;\n  --line: #2b3148;\n  --line-strong: #6c7392;\n  --ink: #eef0f7;\n  --ink-muted: #b3b8cc;\n  --ink-subtle: #8f95ae;\n  --action: #f6f3ee;\n  --on-action: #182140;\n  --focus: #12c7d3;\n  --link: #5fd8e1;\n  --selection: rgba(18, 199, 211, 0.32);\n  --edge: #a9aec0;\n  --edge-label: #b3b8cc;\n  --topic-teal: #bce8ea;\n  --topic-teal-ring: #71bdc1;\n  --topic-harbor: #c9d9ec;\n  --topic-harbor-ring: #8cabce;\n  --topic-iris: #d9cfe8;\n  --topic-iris-ring: #ae9bc6;\n  --topic-berry: #edc6c9;\n  --topic-berry-ring: #cc8e95;\n  --topic-coral: #eecec1;\n  --topic-coral-ring: #cd9884;\n  --topic-amber: #eed4ba;\n  --topic-amber-ring: #c9a176;\n  --topic-sun: #f4eac1;\n  --topic-sun-ring: #c9b97a;\n  --topic-stone: #dddad5;\n  --topic-stone-ring: #b4a999;\n  }\n.vi-map[data-theme=\"colorsafe-light\"] {\n  --topic-teal: #b0ecbc;\n  --topic-teal-ring: #6cc982;\n  --topic-harbor: #abdbfe;\n  --topic-harbor-ring: #60b4ec;\n  --topic-iris: #f6bde2;\n  --topic-iris-ring: #dc87c0;\n  --topic-berry: #feb79e;\n  --topic-berry-ring: #ec7f58;\n  --topic-coral: #fece96;\n  --topic-coral-ring: #e49d41;\n  --topic-amber: #b2e8fa;\n  --topic-amber-ring: #5cc4e2;\n  --topic-sun: #f6f097;\n  --topic-sun-ring: #d0c637;\n  --topic-stone: #dbdbdb;\n  --topic-stone-ring: #b7afb1;\n  }\n:where([data-theme=\"colorsafe-light\"]) .vi-map {\n  --topic-teal: #b0ecbc;\n  --topic-teal-ring: #6cc982;\n  --topic-harbor: #abdbfe;\n  --topic-harbor-ring: #60b4ec;\n  --topic-iris: #f6bde2;\n  --topic-iris-ring: #dc87c0;\n  --topic-berry: #feb79e;\n  --topic-berry-ring: #ec7f58;\n  --topic-coral: #fece96;\n  --topic-coral-ring: #e49d41;\n  --topic-amber: #b2e8fa;\n  --topic-amber-ring: #5cc4e2;\n  --topic-sun: #f6f097;\n  --topic-sun-ring: #d0c637;\n  --topic-stone: #dbdbdb;\n  --topic-stone-ring: #b7afb1;\n  }\n.vi-map[data-theme=\"colorsafe-dark\"] {\n  --canvas: #0f1220;\n  --surface: #171b2b;\n  --surface-sunken: #0f1220;\n  --surface-overlay: #212639;\n  --line: #2b3148;\n  --line-strong: #6c7392;\n  --ink: #eef0f7;\n  --ink-muted: #b3b8cc;\n  --ink-subtle: #8f95ae;\n  --action: #f6f3ee;\n  --on-action: #182140;\n  --focus: #12c7d3;\n  --link: #5fd8e1;\n  --selection: rgba(18, 199, 211, 0.32);\n  --edge: #c9cddc;\n  --edge-label: #b3b8cc;\n  --topic-teal: #b0ecbc;\n  --topic-teal-ring: #69c27e;\n  --topic-harbor: #abdbfe;\n  --topic-harbor-ring: #5eade2;\n  --topic-iris: #f6bde2;\n  --topic-iris-ring: #d383b9;\n  --topic-berry: #feb79e;\n  --topic-berry-ring: #e37a55;\n  --topic-coral: #fece96;\n  --topic-coral-ring: #db9840;\n  --topic-amber: #b2e8fa;\n  --topic-amber-ring: #5bbdda;\n  --topic-sun: #f6f097;\n  --topic-sun-ring: #c9bf37;\n  --topic-stone: #dbdbdb;\n  --topic-stone-ring: #b1a8aa;\n  }\n:where([data-theme=\"colorsafe-dark\"]) .vi-map {\n  --canvas: #0f1220;\n  --surface: #171b2b;\n  --surface-sunken: #0f1220;\n  --surface-overlay: #212639;\n  --line: #2b3148;\n  --line-strong: #6c7392;\n  --ink: #eef0f7;\n  --ink-muted: #b3b8cc;\n  --ink-subtle: #8f95ae;\n  --action: #f6f3ee;\n  --on-action: #182140;\n  --focus: #12c7d3;\n  --link: #5fd8e1;\n  --selection: rgba(18, 199, 211, 0.32);\n  --edge: #c9cddc;\n  --edge-label: #b3b8cc;\n  --topic-teal: #b0ecbc;\n  --topic-teal-ring: #69c27e;\n  --topic-harbor: #abdbfe;\n  --topic-harbor-ring: #5eade2;\n  --topic-iris: #f6bde2;\n  --topic-iris-ring: #d383b9;\n  --topic-berry: #feb79e;\n  --topic-berry-ring: #e37a55;\n  --topic-coral: #fece96;\n  --topic-coral-ring: #db9840;\n  --topic-amber: #b2e8fa;\n  --topic-amber-ring: #5bbdda;\n  --topic-sun: #f6f097;\n  --topic-sun-ring: #c9bf37;\n  --topic-stone: #dbdbdb;\n  --topic-stone-ring: #b1a8aa;\n  }\n.vi-map[data-theme=\"contrast-light\"] {\n  --canvas: #ffffff;\n  --surface-sunken: #f2f2f2;\n  --line: #5c6178;\n  --line-strong: #000000;\n  --ink: #000000;\n  --ink-muted: #1f2433;\n  --ink-subtle: #3a3f52;\n  --action: #000000;\n  --focus: #0b4a8f;\n  --link: #0b4a8f;\n  --node-ink: #000000;\n  --edge: #000000;\n  --edge-label: #1f2433;\n  --topic-teal-ring: #006b70;\n  --topic-harbor-ring: #0e599d;\n  --topic-iris-ring: #683b92;\n  --topic-berry-ring: #96173a;\n  --topic-coral-ring: #923400;\n  --topic-amber-ring: #7e4d00;\n  --topic-sun-ring: #7a6600;\n  --topic-stone-ring: #63594b;\n  --shadow-float: none;\n  --shadow-pop: none;\n  }\n:where([data-theme=\"contrast-light\"]) .vi-map {\n  --canvas: #ffffff;\n  --surface-sunken: #f2f2f2;\n  --line: #5c6178;\n  --line-strong: #000000;\n  --ink: #000000;\n  --ink-muted: #1f2433;\n  --ink-subtle: #3a3f52;\n  --action: #000000;\n  --focus: #0b4a8f;\n  --link: #0b4a8f;\n  --node-ink: #000000;\n  --edge: #000000;\n  --edge-label: #1f2433;\n  --topic-teal-ring: #006b70;\n  --topic-harbor-ring: #0e599d;\n  --topic-iris-ring: #683b92;\n  --topic-berry-ring: #96173a;\n  --topic-coral-ring: #923400;\n  --topic-amber-ring: #7e4d00;\n  --topic-sun-ring: #7a6600;\n  --topic-stone-ring: #63594b;\n  --shadow-float: none;\n  --shadow-pop: none;\n  }\n.vi-map[data-theme=\"contrast-dark\"] {\n  --canvas: #000000;\n  --surface: #000000;\n  --surface-sunken: #0d0d0d;\n  --surface-overlay: #0d0d0d;\n  --line: #9aa0b8;\n  --line-strong: #ffffff;\n  --ink: #ffffff;\n  --ink-muted: #e6e8f0;\n  --ink-subtle: #c8ccda;\n  --action: #ffffff;\n  --on-action: #000000;\n  --focus: #5fe8f0;\n  --link: #7ff0f5;\n  --selection: rgba(18, 199, 211, 0.32);\n  --node-ink: #000000;\n  --edge: #ffffff;\n  --edge-label: #e6e8f0;\n  --topic-teal-ring: #64eff7;\n  --topic-harbor-ring: #b0d5fe;\n  --topic-iris-ring: #dcbfff;\n  --topic-berry-ring: #feb3bb;\n  --topic-coral-ring: #ffbea5;\n  --topic-amber-ring: #ffc78a;\n  --topic-sun-ring: #ffe26d;\n  --topic-stone-ring: #ddd3c2;\n  --shadow-float: none;\n  --shadow-pop: none;\n  }\n:where([data-theme=\"contrast-dark\"]) .vi-map {\n  --canvas: #000000;\n  --surface: #000000;\n  --surface-sunken: #0d0d0d;\n  --surface-overlay: #0d0d0d;\n  --line: #9aa0b8;\n  --line-strong: #ffffff;\n  --ink: #ffffff;\n  --ink-muted: #e6e8f0;\n  --ink-subtle: #c8ccda;\n  --action: #ffffff;\n  --on-action: #000000;\n  --focus: #5fe8f0;\n  --link: #7ff0f5;\n  --selection: rgba(18, 199, 211, 0.32);\n  --node-ink: #000000;\n  --edge: #ffffff;\n  --edge-label: #e6e8f0;\n  --topic-teal-ring: #64eff7;\n  --topic-harbor-ring: #b0d5fe;\n  --topic-iris-ring: #dcbfff;\n  --topic-berry-ring: #feb3bb;\n  --topic-coral-ring: #ffbea5;\n  --topic-amber-ring: #ffc78a;\n  --topic-sun-ring: #ffe26d;\n  --topic-stone-ring: #ddd3c2;\n  --shadow-float: none;\n  --shadow-pop: none;\n  }\n.vi-map[data-motion=\"reduced\"] {\n  --duration-instant: 120ms;\n  --duration-quick: 0ms;\n  --duration-base: 0ms;\n  --duration-zoom: 0ms;\n  --duration-reveal: 0ms;\n  --stagger-reveal: 0ms;\n  }\n:where([data-motion=\"reduced\"]) .vi-map {\n  --duration-instant: 120ms;\n  --duration-quick: 0ms;\n  --duration-base: 0ms;\n  --duration-zoom: 0ms;\n  --duration-reveal: 0ms;\n  --stagger-reveal: 0ms;\n  }\n@media (prefers-reduced-motion: reduce) {\n  :where(:root:not([data-motion=\"full\"])) .vi-map {\n  --duration-instant: 120ms;\n  --duration-quick: 0ms;\n  --duration-base: 0ms;\n  --duration-zoom: 0ms;\n  --duration-reveal: 0ms;\n  --stagger-reveal: 0ms;\n  }\n}\n\n/* Type styles */\n.vi-text-heading { font-family: var(--font-ui); font-size: 17px; line-height: 24px; font-weight: 700; }\n.vi-text-body { font-family: var(--font-ui); font-size: 15px; line-height: 22px; font-weight: 400; }\n.vi-text-body-sm { font-family: var(--font-ui); font-size: 13px; line-height: 18px; font-weight: 400; }\n.vi-text-label { font-family: var(--font-ui); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.01em; }\n.vi-text-caption { font-family: var(--font-ui); font-size: 12px; line-height: 16px; font-weight: 400; }\n.vi-text-node-root { font-family: var(--font-hand); font-size: 30px; line-height: 34px; font-weight: 700; }\n.vi-text-node-label { font-family: var(--font-hand); font-size: 22px; line-height: 26px; font-weight: 700; }\n.vi-text-edge-label { font-family: var(--font-note); font-size: 18px; line-height: 20px; font-weight: 500; }\n.vi-text-annotation { font-family: var(--font-note); font-size: 24px; line-height: 26px; font-weight: 600; }\n";
+export const SPEC_COMPONENT_CSS = "/* Styles for the spec components (map, nodes, connectors, peek, terms, depth trail, controls) — generated from the Visualli design system (v0.3.1). Do not edit here: changes come in through PRs from the private design system. MIT license, see ../LICENSE. */\n.vi-map { --vi-fs-body: 15px; --vi-fs-sm: 13px; --vi-fs-cap: 12px; --vi-lh-body: 22px; --vi-label-scale: 1; }\n[data-theme$=\"dark\"] :where([class^=\"vi-\"], [class*=\" vi-\"]) { color-scheme: dark; }\n.vi-map[data-scale=\"lg\"] { --vi-fs-body: 17px; --vi-fs-sm: 15px; --vi-fs-cap: 14px; --vi-lh-body: 26px; --vi-label-scale: 1.15; }\n:where([data-scale=\"lg\"]) .vi-map { --vi-fs-body: 17px; --vi-fs-sm: 15px; --vi-fs-cap: 14px; --vi-lh-body: 26px; --vi-label-scale: 1.15; }\n.vi-map[data-type=\"readable\"] { --font-hand: \"Atkinson Hyperlegible Next\", system-ui, sans-serif; --font-note: \"Atkinson Hyperlegible Next\", system-ui, sans-serif; --font-display: \"Atkinson Hyperlegible Next\", system-ui, sans-serif; }\n:where([data-type=\"readable\"]) .vi-map { --font-hand: \"Atkinson Hyperlegible Next\", system-ui, sans-serif; --font-note: \"Atkinson Hyperlegible Next\", system-ui, sans-serif; --font-display: \"Atkinson Hyperlegible Next\", system-ui, sans-serif; }\n[data-type=\"readable\"] .vi-node__label, [data-type=\"readable\"] .vi-edge__label, [data-type=\"readable\"] .vi-map__group-label { font-family: var(--font-ui) !important; font-weight: 700; letter-spacing: 0.02em; font-style: normal; }\n.vi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.vi-icon { flex: none; display: block; }\n:where([class^=\"vi-\"], [class*=\" vi-\"]):where(button, a, input, textarea, [tabindex]):focus-visible, :where([class^=\"vi-\"], [class*=\" vi-\"]) :where(button, a, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }\n.vi-iconbtn { display: inline-grid; place-items: center; border-radius: var(--radius-sm); border: 1.5px solid transparent; background: transparent; color: var(--ink); cursor: pointer; transition: background var(--duration-instant); flex: none; }\n.vi-iconbtn--sm { width: 32px; height: 32px; }\n.vi-iconbtn--md { width: 40px; height: 40px; }\n.vi-iconbtn--lg { width: 48px; height: 48px; border-radius: var(--radius-md); }\n.vi-iconbtn:hover { background: var(--surface-sunken); }\n.vi-iconbtn--surface { background: var(--surface); border-color: var(--line); }\n.vi-iconbtn--surface:hover { border-color: var(--line-strong); }\n.vi-iconbtn--primary { background: var(--action); color: var(--on-action); border-radius: var(--radius-pill); }\n.vi-iconbtn.is-active { background: var(--action); color: var(--on-action); }\n[data-theme^=\"contrast\"] .vi-ctrls { border: 2px solid var(--line-strong); }\n.vi-node { position: relative; display: inline-grid; place-items: center; border: 0; padding: 0; background: none; color: var(--node-ink); cursor: default; transition: transform var(--duration-base) var(--ease-bloom), opacity var(--duration-base); -webkit-tap-highlight-color: transparent; }\nbutton.vi-node { cursor: pointer; }\n.vi-node__svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: visible; }\n.vi-node__body { filter: drop-shadow(var(--vi-node-shadow, 0 6px 14px rgba(24, 33, 64, .10))); }\n[data-theme$=\"dark\"] .vi-node__body { --vi-node-shadow: 0 0 22px rgba(255, 255, 255, .10); }\n[data-theme^=\"contrast\"] .vi-node__body { filter: none; }\n.vi-node__rings { transform-origin: center; transition: transform var(--duration-base) var(--ease-standard); }\n@media (hover: hover) {\n  button.vi-node:hover .vi-node__rings { transform: rotate(var(--vi-ring-turn, -2deg)) scale(var(--vi-ring-grow, 1.015)); }\n  button.vi-node:hover { transform: translateY(calc(var(--vi-lift, 2px) * -1)); }\n}\n.vi-node { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }\n.vi-node.is-selected { transform: translateY(-2px); }\n.vi-node.is-selected .vi-node__rings { transform: rotate(var(--vi-ring-turn, -2deg)) scale(var(--vi-ring-grow, 1.015)); }\n.vi-node.is-selected .vi-node__body { stroke-width: 4; }\n.vi-node:focus-visible { outline: none; }\n.vi-node:focus-visible .vi-node__body { stroke: var(--focus); stroke-width: 4; }\n.vi-node.is-selected .vi-node__body { stroke: var(--ink); }\n.vi-node__label { position: relative; text-align: center; color: var(--node-ink); display: flex; flex-direction: column; align-items: center; font-size: calc(var(--vi-nfs, 22px) * var(--vi-label-scale) * var(--vi-ninv, 1)); line-height: 1.15; padding-top: 2px; }\n.vi-node__line { display: block; white-space: nowrap; }\n.vi-node--mini .vi-node__label { --vi-nfs: 15px; }\n.vi-node.is-dimmed { opacity: 1; }\n[data-theme^=\"focus\"] .vi-node.is-dimmed { opacity: .4; }\n.vi-map.is-touch .vi-node.is-dimmed { opacity: .6; }\n[data-theme^=\"focus\"] .vi-map.is-touch .vi-node.is-dimmed { opacity: .4; }\n.vi-edge__line { fill: none; stroke: var(--edge); stroke-width: 2.5; stroke-linecap: round; }\n.vi-edge.is-dashed .vi-edge__line { stroke-dasharray: 7 7; }\n.vi-edge__arrow { fill: none; stroke: var(--edge); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }\n.vi-edge__label { font: 500 calc(18px * var(--vi-inv, 1)) / 1 var(--font-note); fill: var(--edge-label); paint-order: stroke; stroke: var(--canvas); stroke-width: 5px; stroke-linejoin: round; letter-spacing: .01em; }\n[data-type=\"readable\"] .vi-edge__label { font-size: calc(14px * var(--vi-inv, 1)); font-weight: 600; }\n.vi-fact { position: relative; width: 300px; box-sizing: border-box; padding: var(--space-4) var(--space-4) var(--space-3); background: var(--surface-overlay); color: var(--ink); border: 2px solid var(--vi-fact-ring); border-radius: 14px 18px 12px 16px / 16px 12px 18px 14px; font: 400 var(--vi-fs-sm)/20px var(--font-ui); z-index: var(--z-card); animation: vi-pop var(--duration-quick) var(--ease-standard); }\n.vi-fact { box-shadow: 5px 6px 0 0 var(--vi-fact-fill), 5px 6px 0 2px var(--vi-fact-ring); }\n[data-theme^=\"contrast\"] .vi-fact { border-color: var(--ink); }\n[data-theme^=\"contrast\"] .vi-fact { box-shadow: none; }\n.vi-fact__title { font: 700 22px/26px var(--font-hand); margin-bottom: var(--space-1); }\n.vi-fact__body { color: var(--ink); }\n.vi-fact__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--line); }\n.vi-fact__acts { display: inline-flex; gap: var(--space-3); align-items: center; flex: none; }\n.vi-fact__link { color: var(--link); font: 600 var(--vi-fs-cap)/16px var(--font-ui); }\n.vi-fact__step { display: inline-flex; align-items: center; gap: 2px; border: 0; background: var(--action); color: var(--on-action); font: 600 var(--vi-fs-cap)/16px var(--font-ui); padding: 5px 8px 5px 10px; border-radius: var(--radius-pill); cursor: pointer; }\n.vi-trail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: relative; }\n.vi-trail li { position: relative; }\n.vi-trail li + li::before { content: \"\"; position: absolute; left: 13px; top: -8px; height: 10px; border-left: 1.5px dashed var(--line-strong); }\n.vi-trail button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 8px 4px 5px; border-radius: var(--radius-sm); color: var(--ink-muted); font: 400 var(--vi-fs-cap)/16px var(--font-ui); cursor: pointer; }\n.vi-trail button span { display: inline-flex; align-items: center; gap: 4px; }\n.vi-trail button:hover:not(:disabled) { background: var(--surface-sunken); color: var(--ink); }\n.vi-trail li.is-current button { color: var(--ink); font-weight: 700; font-size: var(--vi-fs-sm); cursor: default; background: var(--surface); box-shadow: var(--shadow-float); }\n.vi-trail li.is-current button:disabled { opacity: 1; }\n.vi-ctrls { display: inline-flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-float); }\n.vi-ctrls__pct { min-width: 44px; text-align: center; font: 600 var(--vi-fs-cap)/16px var(--font-ui); color: var(--ink-muted); font-variant-numeric: tabular-nums; }\n.vi-ctrls__div { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }\n.vi-map { position: relative; overflow: hidden; background: var(--canvas); border-radius: inherit; isolation: isolate; }\n.vi-map__immersion { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: var(--immersion-alpha); transition: background var(--duration-base); z-index: -1; }\n.vi-map__world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }\n.vi-map__edges { position: absolute; overflow: visible; pointer-events: none; }\n.vi-map__group rect { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 10 6; }\n.vi-map__group-label { position: absolute; transform: translate(-50%, -50%); z-index: 2; max-width: 420px; box-sizing: border-box; padding: 6px 22px 8px; background: var(--topic-stone); border: 1.5px solid var(--topic-stone-ring); border-radius: var(--radius-pill); font: 700 22px/1.1 var(--font-note); color: var(--node-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; font-size: calc(26px * var(--vi-label-scale) * var(--vi-ninv, 1)); }\n[data-theme^=\"contrast\"] .vi-map__group-label { border: 2px solid var(--line-strong); }\n.vi-map__slot { position: absolute; transform: translate(-50%, -50%); }\n.vi-map.is-reveal .vi-map__slot { animation: vi-bloom var(--duration-reveal) var(--ease-bloom) backwards; }\n.vi-map.is-reveal .vi-edge { animation: vi-fade var(--duration-base) var(--ease-standard) backwards; }\n.vi-map.is-reveal .vi-edge__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: vi-line var(--vi-line-draw, .5s) var(--ease-standard) forwards; animation-delay: inherit; }\n.vi-map.is-reveal .vi-edge.is-dashed .vi-edge__line { stroke-dasharray: 7 7; stroke-dashoffset: 0; animation: vi-fade var(--vi-line-draw, .5s) var(--ease-standard) backwards; animation-delay: inherit; }\n.vi-map:not(.is-reveal) .vi-edge__line { stroke-dasharray: none; }\n.vi-map:not(.is-reveal) .vi-edge.is-dashed .vi-edge__line { stroke-dasharray: 7 7; }\n.vi-map__lens { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-origin: var(--vi-ox) var(--vi-oy); }\n.vi-map.is-diving .vi-map__lens { transform: scale(var(--vi-dive-scale, 3.2)); opacity: 0; transition: transform var(--duration-zoom) var(--ease-zoom), opacity var(--vi-dive-fade, 160ms) var(--vi-dive-fade-delay, 150ms); }\n.vi-map.is-surfacing .vi-map__lens { transform: scale(var(--vi-surface-scale, .6)); opacity: 0; transform-origin: 50% 50%; transition: transform var(--vi-surface-dur, 220ms) var(--ease-zoom), opacity var(--vi-surface-fade, 200ms); }\n.vi-map.is-reveal .vi-map__lens { animation: vi-settle var(--vi-settle-dur, 260ms) var(--ease-standard); }\n[data-motion=\"reduced\"] .vi-map__lens { animation: none !important; transform: none !important; }\n.vi-map__fact { position: absolute; }\n.vi-map.is-idle .vi-map__world { transition: transform var(--duration-base) var(--ease-standard); }\n.vi-map.is-panning, .vi-map.is-panning .vi-node { cursor: grabbing; }\n.vi-map__hint { position: absolute; left: var(--space-4); right: var(--space-4); margin: 0; text-align: center; color: var(--ink-muted); pointer-events: none; z-index: var(--z-chrome); animation: vi-fade var(--duration-base) var(--ease-standard); }\n.vi-fact__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }\n.vi-fact__back { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 2px 0; margin-bottom: var(--space-1); color: var(--link); font: 600 var(--vi-fs-cap)/16px var(--font-ui); cursor: pointer; }\n.vi-term { border: 0; background: none; padding: 0; font: inherit; color: var(--link); text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; }\n.vi-fact--sheet { position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-width: 560px; margin: 0 auto; max-height: var(--vi-sheet-h, 300px); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 2px solid var(--vi-fact-ring); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -6px 0 0 var(--vi-fact-fill), var(--shadow-pop); font-size: var(--vi-fs-body); line-height: var(--vi-lh-body); animation: vi-sheet-in var(--duration-base) var(--ease-standard); transition: transform var(--duration-quick) var(--ease-standard), max-height var(--duration-base) var(--ease-standard); }\n.vi-fact--sheet.is-expanded { max-height: calc(100% - var(--space-7)); }\n.vi-fact__grip { position: sticky; top: 0; display: flex; justify-content: center; margin: 0 calc(var(--space-4) * -1); background: var(--surface-overlay); touch-action: none; cursor: grab; z-index: 1; }\n.vi-fact__handle { position: relative; width: 64px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; }\n.vi-fact__handle::after { content: \"\"; position: absolute; left: 12px; right: 12px; top: 10px; height: 5px; border-radius: var(--radius-pill); background: var(--line-strong); }\n.vi-fact--sheet .vi-fact__title { font-size: calc(24px * var(--vi-label-scale)); line-height: 1.15; padding-top: var(--space-1); }\n.vi-fact--sheet .vi-fact__close { margin: 0 calc(var(--space-2) * -1) 0 0; }\n.vi-fact--sheet .vi-fact__step { min-height: 44px; padding: 0 var(--space-3) 0 var(--space-4); font-size: var(--vi-fs-sm); }\n.vi-fact--sheet .vi-fact__link { font-size: var(--vi-fs-sm); min-height: 44px; display: inline-flex; align-items: center; }\n[data-motion=\"reduced\"] .vi-fact--sheet { animation: vi-fade 120ms; }\n@media (prefers-reduced-motion: reduce) {\n  .vi-fact--sheet { animation: vi-fade 120ms; }\n  .vi-map.is-idle .vi-map__world { transition: none; }\n}\n.vi-map__trail { position: absolute; top: var(--space-4); left: var(--space-4); z-index: var(--z-chrome); }\n.vi-map__ctrls { position: absolute; top: var(--space-4); right: var(--space-4); z-index: var(--z-chrome); }\n[data-reveal=\"instant\"] .vi-map.is-reveal .vi-map__slot, [data-motion=\"reduced\"] .vi-map.is-reveal .vi-map__slot { animation: vi-fade var(--vi-reduced-fade, 120ms) backwards; animation-delay: 0ms !important; }\n[data-reveal=\"instant\"] .vi-map.is-reveal .vi-edge, [data-reveal=\"instant\"] .vi-map.is-reveal .vi-edge__line, [data-motion=\"reduced\"] .vi-map.is-reveal .vi-edge, [data-motion=\"reduced\"] .vi-map.is-reveal .vi-edge__line { animation: none; stroke-dashoffset: 0; }\n@media (prefers-reduced-motion: reduce) {\n  .vi-map.is-reveal .vi-map__slot { animation: vi-fade var(--vi-reduced-fade, 120ms) backwards; animation-delay: 0ms !important; }\n  .vi-map.is-reveal .vi-edge, .vi-map.is-reveal .vi-edge__line { animation: none; stroke-dashoffset: 0; }\n}\n[data-motion=\"reduced\"] :where([class^=\"vi-\"], [class*=\" vi-\"]), [data-motion=\"reduced\"] :where([class^=\"vi-\"], [class*=\" vi-\"])::before, [data-motion=\"reduced\"] :where([class^=\"vi-\"], [class*=\" vi-\"])::after { transition-duration: 1ms !important; }\n.vi-fact__acts { flex-wrap: wrap; justify-content: flex-end; }\n.vi-fact__link { display: inline-flex; align-items: center; gap: 2px; }\n.vi-anchor { position: relative; display: inline; }\n.vi-anchor.is-open .vi-term { background: var(--selection); border-radius: 3px; }\n.vi-anchor__pop { position: absolute; left: -12px; top: calc(100% + 6px); z-index: var(--z-menu); display: block; width: max-content; }\n.vi-anchor-card { position: relative; display: block; width: min(300px, calc(100vw - 32px)); box-sizing: border-box; padding: var(--space-3) var(--space-4) var(--space-3); background: var(--surface-overlay); color: var(--ink); text-align: left; white-space: normal; font: 400 var(--vi-fs-sm)/20px var(--font-ui); border: 2px solid var(--vi-fact-ring); border-radius: 12px 16px 10px 14px / 14px 10px 16px 12px; box-shadow: 4px 5px 0 0 var(--vi-fact-fill), 4px 5px 0 2px var(--vi-fact-ring), var(--shadow-pop); animation: vi-pop var(--duration-quick) var(--ease-standard); }\n.vi-anchor-card.is-in-sheet { width: auto; border: 0; box-shadow: none; padding: 0; animation: none; background: transparent; }\n[data-theme^=\"contrast\"] .vi-anchor-card { border-color: var(--ink); box-shadow: none; }\n.vi-anchor-card__eyebrow { font: 400 11px/14px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }\n.vi-anchor-card__word { font: 700 20px/24px var(--font-hand); color: var(--ink); margin: 2px 0 var(--space-1); }\n.vi-fact--sheet .vi-anchor-card__word { font-size: calc(24px * var(--vi-label-scale)); line-height: 1.15; }\n.vi-anchor-card__desc { margin: 0; color: var(--ink); }\n.vi-anchor-card__note { margin: var(--space-2) 0 0; font: 400 var(--vi-fs-cap)/16px var(--font-ui); color: var(--ink-muted); }\n.vi-anchor-card__acts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--line); }\n.vi-fact--sheet .vi-anchor-card__acts .vi-fact__link { min-height: 44px; }\n[data-type=\"readable\"] .vi-anchor-card__word { font-family: var(--font-ui); }\n[data-motion=\"reduced\"] .vi-anchor-card { animation: vi-fade 120ms; }\n@media (prefers-reduced-motion: reduce) {\n  .vi-anchor-card { animation: vi-fade 120ms; }\n}\n.vi-peek .vi-fact__foot { flex-wrap: wrap; row-gap: var(--space-2); }\n.vi-peek .vi-fact__acts { margin-left: auto; }\n.vi-map.has-highlight .vi-node.is-dimmed { opacity: .35; transition: opacity var(--duration-quick) var(--ease-standard); }\n.vi-map.has-highlight .vi-node.is-selected .vi-node__body { stroke: var(--ink); }\n.vi-map { container-type: inline-size; }\n.vi-edge__hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: pointer; }\n.vi-edge__hit:hover + .vi-edge__line { stroke-width: 3.5; }\n.vi-edge.is-selected .vi-edge__line, .vi-edge.is-selected .vi-edge__arrow { stroke: var(--focus); stroke-width: 3.5; }\n.vi-map__group-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }\n.vi-map__group.is-selected rect:not(.vi-map__group-hit) { stroke: var(--focus); stroke-width: 2.5; stroke-dasharray: none; }\n.vi-map__group-label.is-selected { border-color: var(--focus); color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }\n.vi-map { touch-action: pan-x pan-y; }\n.vi-map.is-app { touch-action: none; }\n.vi-map.is-pinching .vi-map__world { transition: none; }\n.vi-map.is-instant.is-reveal .vi-map__slot { animation: vi-fade var(--vi-reduced-fade, 120ms) backwards; animation-delay: 0ms !important; }\n.vi-map.is-instant.is-reveal .vi-edge, .vi-map.is-instant.is-reveal .vi-edge__line { animation: none; stroke-dashoffset: 0; }\n.vi-map.is-instant .vi-node, .vi-map.is-instant .vi-node__rings { transition: none; }\n.vi-map.is-detail-body .vi-node:not(.is-selected):not(:focus-visible):not(:hover) :is(.vi-node__rings, .vi-node__label), .vi-map.is-detail-speck .vi-node:not(.is-selected):not(:focus-visible):not(:hover) :is(.vi-node__rings, .vi-node__label) { display: none; }\n.vi-map.is-detail-body .vi-node:not(.is-selected):not(:focus-visible):not(:hover) .vi-node__body, .vi-map.is-detail-speck .vi-node:not(.is-selected):not(:focus-visible):not(:hover) .vi-node__body, .vi-map.no-shadows .vi-node__body { filter: none; }\n@keyframes vi-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }\n@keyframes vi-fade { from { opacity: 0; } }\n@keyframes vi-bloom { from { opacity: 0; transform: translate(calc(-50% + var(--vi-dx)), calc(-50% + var(--vi-dy))) scale(var(--vi-bloom-from, .55)); } }\n@keyframes vi-line { to { stroke-dashoffset: 0; } }\n@keyframes vi-settle { from { transform: scale(var(--vi-settle-from, .94)); } }\n@keyframes vi-sheet-in { from { transform: translateY(100%); } }\n";
 export const SPEC_FONTS_URL = "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Mono:wght@400;600&family=Kalam:wght@400;700&display=swap";
-export const SPEC_DESIGN_SYSTEM_VERSION = "0.3.0";
+export const SPEC_DESIGN_SYSTEM_VERSION = "0.3.1";
 /** Font files shipped with the package (fonts/ directory), from design-system/fonts/fonts.css. */
 export const SPEC_BUNDLED_FONTS = [
   {

package/src/hooks/useKonvaRenderer.ts

@@ -10,8 +10,11 @@
 //     Zustand store on mouseUp (no per-frame state updates)
 //   - Zoom targets the cursor position (same math as visualli.ai)
 
-import { useEffect, useCallback, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useCallback, useRef, useState } from 'react';
 import type Konva from 'konva';
+
+// useLayoutEffect in the browser; useEffect on the server, where layout effects don't run (and React would warn).
+const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 import { useViewportStore } from '../stores/useViewportStore';
 import { useRenderConfigStore } from '../stores/stores';
 
@@ -69,52 +72,33 @@ export function useKonvaRenderer({
   }, [enabled, autoAdjust]);
 
   // ── Resize ────────────────────────────────────────────────────────────────────
-  // Observes the container element (not window) so the canvas always fills
-  // its parent, regardless of how the renderer is sized by the consuming app.
-  useEffect(() => {
+  // Observes the container element (not window) so the canvas always fills its parent, however the consuming app
+  // sizes the renderer. It measures right after layout when the container appears (useLayoutEffect) and in the
+  // ResizeObserver callback itself — no requestAnimationFrame in between, so a skipped or delayed frame can never
+  // leave the stage at its 1920 × 1080 default.
+  useIsoLayoutEffect(() => {
     if (!enabled) return;
-
-    let rafId: number | null = null;
-
-    const measure = () => {
-      const el = containerRef.current;
-      const w = el ? Math.round(el.getBoundingClientRect().width)  : 800;
-      const h = el ? Math.round(el.getBoundingClientRect().height) : 600;
-      return { w, h };
-    };
-
-    const updateSize = () => {
-      if (rafId) cancelAnimationFrame(rafId);
-      rafId = requestAnimationFrame(() => {
-        rafId = null;
-        const { w, h } = measure();
-        if (w > 0 && h > 0 &&
-            (cachedSizeRef.current.width !== w || cachedSizeRef.current.height !== h)) {
-          cachedSizeRef.current = { width: w, height: h };
-          setCanvasWidth(w);
-          setCanvasHeight(h);
-          updateCanvasSize(w, h);
-        }
-      });
+    const el = containerRef.current;
+    const apply = () => {
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      const w = Math.round(r.width), h = Math.round(r.height);
+      if (w > 0 && h > 0 && (cachedSizeRef.current.width !== w || cachedSizeRef.current.height !== h)) {
+        cachedSizeRef.current = { width: w, height: h };
+        setCanvasWidth(w);
+        setCanvasHeight(h);
+        updateCanvasSize(w, h);
+      }
     };
-
-    // Initial measurement
-    updateSize();
-
-    // ResizeObserver tracks the container itself (handles % / flex / grid sizing)
-    let ro: ResizeObserver | null = null;
-    if (typeof ResizeObserver !== 'undefined' && containerRef.current) {
-      ro = new ResizeObserver(updateSize);
-      ro.observe(containerRef.current);
-    } else {
-      // Fallback: window resize only
-      window.addEventListener('resize', updateSize);
+    apply();
+    if (typeof ResizeObserver !== 'undefined' && el) {
+      const ro = new ResizeObserver(apply);
+      ro.observe(el);
+      return () => ro.disconnect();
     }
-
-    return () => {
-      if (ro) ro.disconnect(); else window.removeEventListener('resize', updateSize);
-      if (rafId) cancelAnimationFrame(rafId);
-    };
+    // Fallback: window resize only
+    window.addEventListener('resize', apply);
+    return () => window.removeEventListener('resize', apply);
   }, [enabled, containerRef, updateCanvasSize]);
 
   // ── Wheel zoom ────────────────────────────────────────────────────────────────