@visualli/react 0.1.7 → 0.2.1

package/dist/index.js

@@ -1,22 +1,28 @@
 'use client';
 
 // src/VisualliRenderer.tsx
-import { useEffect as useEffect7, useRef as useRef10, useState as useState4, useMemo as useMemo8 } from "react";
-import { parseVisualliFile as parseVisualliFile2 } from "@visualli/core";
+import { useEffect as useEffect8, useRef as useRef11, useState as useState5, useMemo as useMemo10 } from "react";
+import { blobPath as blobPath3, parseVisualliFile as parseVisualliFile2, shapeForLevel } from "@visualli/core";
 
 // src/VisualliCanvas.tsx
-import { useRef as useRef9, useState as useState3, useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo7 } from "react";
+import { useRef as useRef10, useState as useState4, useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo9 } from "react";
 import {
   parseVisualliFile,
   getNodesForLayer,
-  getThemeBackground,
-  darkenHexColor as darkenHexColor2,
+  getSemanticAnchors,
+  ideaColor,
+  motionVars,
+  nodeRadii as nodeRadii3,
+  ringsFor as ringsFor3,
+  peekPosition,
+  TRAIL as TRAIL2,
   RBushSpatialIndex as RBushSpatialIndex2,
-  NODE_HEIGHT as NODE_HEIGHT5,
-  TEXT_LABEL_HIDE_BELOW_ZOOM as TEXT_LABEL_HIDE_BELOW_ZOOM3,
-  ZOOM_NAV_IN_THRESHOLD,
-  ZOOM_NAV_OUT_THRESHOLD,
-  ZOOM_MIN as ZOOM_MIN2
+  GESTURE,
+  pinchZoom,
+  zoomAround,
+  VIEW as VIEW2,
+  PEEK,
+  SHEET as SHEET2
 } from "@visualli/core";
 
 // src/stores/useNodeStore.ts
@@ -125,13 +131,16 @@ var useViewportStore = create2((set, get) => {
     ...init,
     canvasWidth: DEFAULT_CANVAS_WIDTH,
     canvasHeight: DEFAULT_CANVAS_HEIGHT,
+    fitScale: 1,
+    fitCenterX: 0,
+    fitCenterY: 0,
     pan: (dx, dy) => set((s) => {
       const updated = recalculateViewportBounds(panViewport(dx, dy, getVP(s)), s.canvasWidth, s.canvasHeight);
       return { centerX: updated.centerX, centerY: updated.centerY, visibleBounds: updated.visibleBounds };
     }),
     zoom: (delta, pivotX, pivotY) => set((s) => {
       const updated = recalculateViewportBounds(
-        zoomViewport(delta, getVP(s), pivotX, pivotY, s.canvasWidth, s.canvasHeight),
+        zoomViewport(delta, getVP(s), pivotX, pivotY, s.canvasWidth, s.canvasHeight, s.fitScale),
         s.canvasWidth,
         s.canvasHeight
       );
@@ -142,10 +151,11 @@ var useViewportStore = create2((set, get) => {
       return { centerX: updated.centerX, centerY: updated.centerY, visibleBounds: updated.visibleBounds };
     }),
     setZoom: (level) => set((s) => {
-      const clamped = clampZoom(level);
+      const clamped = clampZoom(level, s.fitScale);
       const updated = recalculateViewportBounds({ ...getVP(s), zoomLevel: clamped }, s.canvasWidth, s.canvasHeight);
       return { zoomLevel: updated.zoomLevel, visibleBounds: updated.visibleBounds };
     }),
+    setFit: (scale, centerX, centerY) => set({ fitScale: scale > 0 ? scale : 1, fitCenterX: centerX, fitCenterY: centerY }),
     updateCanvasSize: (w, h) => set((s) => {
       const updated = recalculateViewportBounds(getVP(s), w, h);
       return { canvasWidth: w, canvasHeight: h, visibleBounds: updated.visibleBounds };
@@ -165,11 +175,11 @@ var useViewportStore = create2((set, get) => {
 // src/stores/stores.ts
 import { create as create3 } from "zustand";
 import { selectionStore, renderConfigStore } from "@visualli/core";
-var useSelectionStore = create3((set, get, store) => {
+var useSelectionStore = create3((set) => {
   selectionStore.subscribe((state) => set(state));
   return selectionStore.getState();
 });
-var useRenderConfigStore = create3((set, get, store) => {
+var useRenderConfigStore = create3((set) => {
   renderConfigStore.subscribe((state) => set(state));
   return renderConfigStore.getState();
 });
@@ -178,13 +188,10 @@ var useRenderConfigStore = create3((set, get, store) => {
 import { useEffect, useCallback, useRef, useState } from "react";
 function useKonvaRenderer({
   containerRef,
-  stageRef,
   enabled = true
 }) {
   const pan = useViewportStore((s) => s.pan);
   const zoom = useViewportStore((s) => s.zoom);
-  const setZoom = useViewportStore((s) => s.setZoom);
-  const setCenter = useViewportStore((s) => s.setCenter);
   const updateCanvasSize = useViewportStore((s) => s.updateCanvasSize);
   const autoAdjust = useRenderConfigStore((s) => s.autoAdjustQuality);
   const [canvasWidth, setCanvasWidth] = useState(0);
@@ -242,7 +249,8 @@ function useKonvaRenderer({
       window.addEventListener("resize", updateSize);
     }
     return () => {
-      ro ? ro.disconnect() : window.removeEventListener("resize", updateSize);
+      if (ro) ro.disconnect();
+      else window.removeEventListener("resize", updateSize);
       if (rafId) cancelAnimationFrame(rafId);
     };
   }, [enabled, containerRef, updateCanvasSize]);
@@ -262,17 +270,10 @@ function useKonvaRenderer({
       isPanningRef.current = true;
       lastPanPointRef.current = { x: e.evt.clientX, y: e.evt.clientY };
       panAccumRef.current = { x: 0, y: 0 };
-      const stage = e.target.getStage();
-      if (stage) stage.container().style.cursor = "grabbing";
     }
   }, []);
   const handleMouseMove = useCallback((e) => {
-    if (!isPanningRef.current) {
-      const isOverEmpty = e.target === e.target.getStage();
-      const stage2 = e.target.getStage();
-      if (stage2) stage2.container().style.cursor = isOverEmpty ? "grab" : "default";
-      return;
-    }
+    if (!isPanningRef.current) return;
     e.evt.preventDefault();
     const deltaX = e.evt.clientX - lastPanPointRef.current.x;
     const deltaY = e.evt.clientY - lastPanPointRef.current.y;
@@ -286,7 +287,7 @@ function useKonvaRenderer({
     panAccumRef.current.y += deltaY;
     lastPanPointRef.current = { x: e.evt.clientX, y: e.evt.clientY };
   }, []);
-  const handleMouseUp = useCallback((e) => {
+  const handleMouseUp = useCallback(() => {
     if (isPanningRef.current) {
       isPanningRef.current = false;
       const { x, y } = panAccumRef.current;
@@ -294,181 +295,23 @@ function useKonvaRenderer({
         pan(x, y);
         panAccumRef.current = { x: 0, y: 0 };
       }
-      const stage = e.target.getStage();
-      if (stage) stage.container().style.cursor = "grab";
     }
   }, [pan]);
-  return { handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, canvasWidth, canvasHeight };
+  const cancelPan = useCallback(() => {
+    if (!isPanningRef.current) return;
+    isPanningRef.current = false;
+    const { x, y } = panAccumRef.current;
+    if (x !== 0 || y !== 0) {
+      pan(x, y);
+      panAccumRef.current = { x: 0, y: 0 };
+    }
+  }, [pan]);
+  return { handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, cancelPan, canvasWidth, canvasHeight };
 }
 
-// src/hooks/useKonvaLayerTransition.ts
-import { useCallback as useCallback2, useRef as useRef2, useEffect as useEffect2 } from "react";
-
-// src/animations/konvaLayerTransition.ts
-import { easeInOutSine, easeOutCubic, easeZoomTransition } from "@visualli/core";
-import { ANIMATION_PHASES } from "@visualli/core";
-function parseColor(color) {
-  if (color.startsWith("#")) {
-    const h = color.slice(1);
-    return { r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16) };
-  }
-  const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-  return m ? { r: +m[1], g: +m[2], b: +m[3] } : { r: 255, g: 255, b: 255 };
-}
-function interpolateRgb(a, b, t) {
-  const e = easeInOutSine(t);
-  return `rgb(${a.r + (b.r - a.r) * e + 0.5 | 0},${a.g + (b.g - a.g) * e + 0.5 | 0},${a.b + (b.b - a.b) * e + 0.5 | 0})`;
-}
-function lerp(a, b, t) {
-  return a + (b - a) * t;
-}
-var KonvaLayerTransitionAnimator = class {
-  constructor() {
-    this.rafId = null;
-    this.timers = [];
-    this._active = false;
-  }
-  get active() {
-    return this._active;
-  }
-  cancel() {
-    if (this.rafId !== null) {
-      cancelAnimationFrame(this.rafId);
-      this.rafId = null;
-    }
-    this.timers.forEach(clearTimeout);
-    this.timers = [];
-    this._active = false;
-  }
-  // ── Zoom into child layer ──────────────────────────────────────────────────
-  animateZoomIntoLayer(current, targetNode, childCenter, fromColor, toColor, cb, targetZoom = 1, canvasWidth = 800, canvasHeight = 600) {
-    if (this._active) return;
-    this._active = true;
-    const ZOOM_DURATION = ANIMATION_PHASES.ZOOM_IN.ZOOM_TO_TARGET;
-    const FADE_OUT_DELAY = ANIMATION_PHASES.ZOOM_IN.FADE_OUT_START;
-    const FADE_OUT_DURATION = ANIMATION_PHASES.ZOOM_IN.FADE_OUT;
-    const SWAP_AT_MS = ANIMATION_PHASES.ZOOM_IN.CONTENT_SWAP;
-    const FADE_IN_DURATION = ANIMATION_PHASES.ZOOM_IN.FADE_IN;
-    const SETTLE_FACTOR = 0.94;
-    const z0 = current.zoomLevel;
-    const dx = targetNode.x - current.centerX;
-    const dy = targetNode.y - current.centerY;
-    const vmin = Math.min(canvasWidth, canvasHeight);
-    const fillZoom = Math.max(4, vmin * 1.5 / Math.max(targetNode.width, 100));
-    const fromRgb = parseColor(fromColor);
-    const toRgb = parseColor(toColor);
-    const state = { viewport: { centerX: 0, centerY: 0, zoomLevel: 0 }, opacity: 1, backgroundColor: fromColor };
-    const start = performance.now();
-    let swapped = false;
-    let fadeInStart = 0;
-    cb.onPhaseChange?.("zoom");
-    const tick = (now) => {
-      if (!this._active) return;
-      const elapsed = now - start;
-      if (!swapped) {
-        if (elapsed >= SWAP_AT_MS) {
-          swapped = true;
-          fadeInStart = now;
-          state.viewport = { centerX: childCenter.x, centerY: childCenter.y, zoomLevel: targetZoom * SETTLE_FACTOR };
-          state.opacity = 0;
-          state.backgroundColor = toColor;
-          cb.onUpdate(state);
-          cb.onPhaseChange?.("swap");
-          this.rafId = requestAnimationFrame(tick);
-          return;
-        }
-        const rawT = Math.min(elapsed / ZOOM_DURATION, 1);
-        const zoomT = easeZoomTransition(rawT);
-        const zl = lerp(z0, fillZoom, zoomT);
-        state.viewport = {
-          centerX: targetNode.x - dx * z0 * (1 - zoomT) / zl,
-          centerY: targetNode.y - dy * z0 * (1 - zoomT) / zl,
-          zoomLevel: zl
-        };
-        state.opacity = elapsed > FADE_OUT_DELAY ? Math.max(0, 1 - easeOutCubic(Math.min((elapsed - FADE_OUT_DELAY) / FADE_OUT_DURATION, 1))) : 1;
-        state.backgroundColor = interpolateRgb(fromRgb, toRgb, rawT);
-        cb.onUpdate(state);
-      } else {
-        const fi = now - fadeInStart;
-        const ft = Math.min(fi / FADE_IN_DURATION, 1);
-        const eased = easeOutCubic(ft);
-        state.viewport = { centerX: childCenter.x, centerY: childCenter.y, zoomLevel: lerp(targetZoom * SETTLE_FACTOR, targetZoom, eased) };
-        state.opacity = eased;
-        state.backgroundColor = toColor;
-        cb.onUpdate(state);
-        if (ft >= 1) {
-          cb.onPhaseChange?.("fade-in");
-          this.rafId = null;
-          this._complete(cb.onComplete);
-          return;
-        }
-      }
-      this.rafId = requestAnimationFrame(tick);
-    };
-    this.rafId = requestAnimationFrame(tick);
-  }
-  // ── Zoom out to parent layer ───────────────────────────────────────────────
-  animateZoomOutToParent(current, parent, fromColor, toColor, cb) {
-    if (this._active) return;
-    this._active = true;
-    const FADE_OUT = ANIMATION_PHASES.ZOOM_OUT.FADE_OUT;
-    const FADE_IN = ANIMATION_PHASES.ZOOM_OUT.FADE_IN;
-    const OPACITY_SETTLE = 66;
-    const fromRgb = parseColor(fromColor);
-    const toRgb = parseColor(toColor);
-    const state = { viewport: { centerX: 0, centerY: 0, zoomLevel: 0 }, opacity: 1, backgroundColor: fromColor };
-    const start = performance.now();
-    let swapped = false;
-    let fadeInStart = 0;
-    cb.onPhaseChange?.("fade-out");
-    const tick = (now) => {
-      if (!this._active) return;
-      const elapsed = now - start;
-      if (!swapped) {
-        if (elapsed >= FADE_OUT) {
-          swapped = true;
-          fadeInStart = now;
-          state.viewport = { centerX: parent.centerX, centerY: parent.centerY, zoomLevel: parent.zoomLevel * 5 };
-          state.opacity = 0;
-          state.backgroundColor = toColor;
-          cb.onUpdate(state);
-          cb.onPhaseChange?.("zoom-back");
-          this.rafId = requestAnimationFrame(tick);
-          return;
-        }
-        const rawT = Math.min(elapsed / FADE_OUT, 1);
-        const t = easeOutCubic(rawT);
-        state.viewport = { centerX: current.centerX, centerY: current.centerY, zoomLevel: lerp(current.zoomLevel, current.zoomLevel * 0.6, t) };
-        state.opacity = 1 - t;
-        state.backgroundColor = interpolateRgb(fromRgb, toRgb, rawT);
-        cb.onUpdate(state);
-      } else {
-        const fi = now - fadeInStart;
-        const rawT = Math.min(fi / FADE_IN, 1);
-        const t = easeZoomTransition(rawT);
-        state.viewport = { centerX: parent.centerX, centerY: parent.centerY, zoomLevel: lerp(parent.zoomLevel * 5, parent.zoomLevel, t) };
-        state.opacity = fi < OPACITY_SETTLE ? 0 : easeZoomTransition(Math.min((fi - OPACITY_SETTLE) / (FADE_IN - OPACITY_SETTLE), 1));
-        state.backgroundColor = toColor;
-        cb.onUpdate(state);
-        if (rawT >= 1) {
-          cb.onPhaseChange?.("fade-in");
-          this.rafId = null;
-          this._complete(cb.onComplete);
-          return;
-        }
-      }
-      this.rafId = requestAnimationFrame(tick);
-    };
-    this.rafId = requestAnimationFrame(tick);
-  }
-  _complete(onComplete) {
-    this.timers.forEach(clearTimeout);
-    this.timers = [];
-    this._active = false;
-    onComplete();
-  }
-};
-var konvaLayerTransitionAnimator = new KonvaLayerTransitionAnimator();
+// src/hooks/useLayerChoreography.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { MOTION, cssEase, swapDelay } from "@visualli/core";
 
 // src/utils/layerNavigation.ts
 import {
@@ -481,152 +324,272 @@ import {
   calculateFitView
 } from "@visualli/core";
 
-// src/hooks/useKonvaLayerTransition.ts
-function useKonvaLayerTransition(opts) {
-  const {
-    stageRef,
-    canvasWrapperRef,
-    bgRef,
-    onSwapLayer,
-    onSwapBack,
-    onComplete,
-    onViewportFrame,
-    onViewportFinal,
-    onPhaseChange: onPhaseChangeExt,
-    onTransitionLifecycle
-  } = opts;
-  const setZoom = useViewportStore((s) => s.setZoom);
-  const setCenter = useViewportStore((s) => s.setCenter);
-  const getState = useViewportStore.getState;
-  const swappedRef = useRef2(false);
-  const canvasSizeRef = useRef2({ width: 800, height: 600 });
-  useEffect2(() => {
-    const update = () => {
-      const vp = useViewportStore.getState();
-      canvasSizeRef.current = { width: vp.canvasWidth || 800, height: vp.canvasHeight || 600 };
-    };
-    update();
-    const unsubscribe = useViewportStore.subscribe(update);
-    return unsubscribe;
+// src/hooks/useLayerChoreography.ts
+function useLayerChoreography(o) {
+  const { stageRef, canvasWrapperRef } = o;
+  const opts = useRef2(o);
+  opts.current = o;
+  const busy = useRef2(false);
+  const waiting = useRef2(false);
+  const anims = useRef2([]);
+  const timers = useRef2([]);
+  const after = useRef2([]);
+  const clear = useCallback2(() => {
+    timers.current.forEach(clearTimeout);
+    timers.current = [];
+    after.current.forEach(cancelAnimationFrame);
+    after.current = [];
+    anims.current.forEach((a) => a.cancel());
+    anims.current = [];
   }, []);
   const applyViewport = useCallback2((vp) => {
     const stage = stageRef.current;
-    if (!stage) return;
-    const { width, height } = canvasSizeRef.current;
-    stage.x(width / 2 - vp.centerX * vp.zoomLevel);
-    stage.y(height / 2 - vp.centerY * vp.zoomLevel);
-    stage.scaleX(vp.zoomLevel);
-    stage.scaleY(vp.zoomLevel);
-    stage.getLayers().forEach((l) => l.drawScene());
-    setCenter(vp.centerX, vp.centerY);
-    setZoom(vp.zoomLevel);
-  }, [stageRef, setCenter, setZoom]);
-  const applyOpacity = useCallback2((opacity) => {
-    if (canvasWrapperRef.current) {
-      canvasWrapperRef.current.style.opacity = String(opacity);
-    }
-  }, [canvasWrapperRef]);
-  const applyBgColor = useCallback2((color) => {
-    if (bgRef?.current) {
-      bgRef.current.style.backgroundColor = color;
-    }
-  }, [bgRef]);
-  const zoomIntoLayer = useCallback2((_doc, targetNode, childLayerId, childNodes, fromColor, toColor) => {
-    if (konvaLayerTransitionAnimator.active) return;
-    const vp = getState();
+    if (stage) {
+      stage.x(stage.width() / 2 - vp.centerX * vp.zoomLevel);
+      stage.y(stage.height() / 2 - vp.centerY * vp.zoomLevel);
+      stage.scaleX(vp.zoomLevel);
+      stage.scaleY(vp.zoomLevel);
+      stage.getLayers().forEach((l) => l.drawScene());
+    }
+    const s = useViewportStore.getState();
+    s.setCenter(vp.centerX, vp.centerY);
+    s.setZoom(vp.zoomLevel);
+  }, [stageRef]);
+  const lifecycle = useCallback2((phase) => {
     const stage = stageRef.current;
-    const w = stage?.width() ?? 800;
-    const h = stage?.height() ?? 600;
-    const fit = calculateFitView(childNodes, w, h);
-    swappedRef.current = false;
-    onTransitionLifecycle?.("start");
-    konvaLayerTransitionAnimator.animateZoomIntoLayer(
-      { centerX: vp.centerX, centerY: vp.centerY, zoomLevel: vp.zoomLevel },
-      { x: targetNode.x, y: targetNode.y, width: targetNode.width, height: targetNode.height },
-      { x: fit.centerX, y: fit.centerY },
-      fromColor,
-      toColor,
-      {
-        onUpdate: ({ viewport, opacity, backgroundColor }) => {
-          if (onViewportFrame) {
-            onViewportFrame(viewport);
-          } else {
-            applyViewport(viewport);
-          }
-          applyOpacity(opacity);
-          applyBgColor(backgroundColor);
-        },
-        onComplete: () => {
-          const finalVp = { centerX: fit.centerX, centerY: fit.centerY, zoomLevel: fit.zoomLevel };
-          if (onViewportFinal) {
-            onViewportFinal(finalVp);
-          } else {
-            applyViewport(finalVp);
-          }
-          applyOpacity(1);
-          onComplete();
-          onTransitionLifecycle?.("end");
-        },
-        onPhaseChange: (phase) => {
-          onPhaseChangeExt?.(phase);
-          if (phase === "swap" && !swappedRef.current) {
-            swappedRef.current = true;
-            onSwapLayer(childLayerId);
-          }
-        }
-      },
-      fit.zoomLevel,
-      w,
-      h
-    );
-  }, [stageRef, getState, applyViewport, applyOpacity, applyBgColor, onSwapLayer, onComplete, onViewportFrame, onViewportFinal, onPhaseChangeExt, onTransitionLifecycle]);
-  const zoomOutToParent = useCallback2((parentViewport, fromColor, toColor) => {
-    if (konvaLayerTransitionAnimator.active) return;
-    const vp = getState();
-    swappedRef.current = false;
-    onTransitionLifecycle?.("start");
-    konvaLayerTransitionAnimator.animateZoomOutToParent(
-      { centerX: vp.centerX, centerY: vp.centerY, zoomLevel: vp.zoomLevel },
-      parentViewport,
-      fromColor,
-      toColor,
-      {
-        onUpdate: ({ viewport, opacity, backgroundColor }) => {
-          if (onViewportFrame) {
-            onViewportFrame(viewport);
-          } else {
-            applyViewport(viewport);
-          }
-          applyOpacity(opacity);
-          applyBgColor(backgroundColor);
-        },
-        onComplete: () => {
-          if (onViewportFinal) {
-            onViewportFinal(parentViewport);
-          } else {
-            applyViewport(parentViewport);
-          }
-          applyOpacity(1);
-          onComplete();
-          onTransitionLifecycle?.("end");
-        },
-        onPhaseChange: (phase) => {
-          onPhaseChangeExt?.(phase);
-          if (phase === "zoom-back" && !swappedRef.current) {
-            swappedRef.current = true;
-            onSwapBack();
-          }
-        }
+    stage?.getLayers().forEach((l) => {
+      l.listening(phase === "end");
+    });
+    if (phase === "end") stage?.batchDraw();
+    opts.current.onLifecycle?.(phase);
+  }, [stageRef]);
+  const leave = useCallback2((wrap, dir, origin, vp, swap) => {
+    busy.current = true;
+    waiting.current = false;
+    lifecycle("start");
+    const reduced = opts.current.reducedMotion;
+    if (wrap && !reduced && typeof wrap.animate === "function") {
+      const m = MOTION;
+      wrap.style.transformOrigin = origin;
+      wrap.style.willChange = "transform, opacity";
+      if (dir === "in") {
+        anims.current.push(
+          wrap.animate([{ transform: "scale(1)" }, { transform: `scale(${m.dive.scale})` }], { duration: m.dive.duration, easing: cssEase(m.dive.ease), fill: "forwards" }),
+          wrap.animate([{ opacity: 1 }, { opacity: 0 }], { delay: m.dive.fadeDelay, duration: m.dive.fade, easing: "ease", fill: "both" })
+        );
+      } else {
+        anims.current.push(
+          wrap.animate([{ transform: "scale(1)" }, { transform: `scale(${m.surface.scale})` }], { duration: m.surface.duration, easing: cssEase(m.surface.ease), fill: "forwards" }),
+          wrap.animate([{ opacity: 1 }, { opacity: 0 }], { duration: m.surface.fade, easing: "ease", fill: "both" })
+        );
+      }
+    }
+    timers.current.push(setTimeout(() => {
+      waiting.current = true;
+      swap();
+      applyViewport(vp);
+      timers.current.push(setTimeout(() => arriveRef.current(), 500));
+    }, swapDelay(dir, reduced)));
+  }, [applyViewport, lifecycle]);
+  const arriveRef = useRef2(() => {
+  });
+  const arrive = useCallback2(() => {
+    if (!waiting.current) return;
+    waiting.current = false;
+    const wrap = canvasWrapperRef.current;
+    const reduced = opts.current.reducedMotion;
+    anims.current.forEach((a) => a.cancel());
+    anims.current = [];
+    let settle = reduced ? MOTION.reduced.fade : MOTION.settle.duration;
+    if (wrap && !reduced && typeof wrap.animate === "function") {
+      const a = wrap.animate([{ transform: `scale(${MOTION.settle.fromScale})` }, { transform: "none" }], { duration: MOTION.settle.duration, easing: cssEase(MOTION.settle.ease) });
+      anims.current.push(a);
+      settle = MOTION.settle.duration;
+    }
+    timers.current.push(setTimeout(() => {
+      anims.current.forEach((a) => a.cancel());
+      anims.current = [];
+      if (wrap) {
+        wrap.style.willChange = "auto";
+        wrap.style.transformOrigin = "";
       }
-    );
-  }, [getState, applyViewport, applyOpacity, applyBgColor, onSwapBack, onComplete, onViewportFrame, onViewportFinal, onPhaseChangeExt, onTransitionLifecycle]);
-  const isTransitioning = useCallback2(() => konvaLayerTransitionAnimator.active, []);
+      busy.current = false;
+      opts.current.onComplete();
+      lifecycle("end");
+    }, settle));
+  }, [canvasWrapperRef, lifecycle]);
+  arriveRef.current = arrive;
+  const stepInside = useCallback2((targetNode, childLayerId, childNodes) => {
+    if (busy.current) return;
+    const stage = stageRef.current;
+    const zoom = stage?.scaleX() ?? 1;
+    const origin = stage ? `${targetNode.x * zoom + stage.x()}px ${targetNode.y * zoom + stage.y()}px` : "50% 50%";
+    const fit = calculateFitView(childNodes, stage?.width() ?? 800, stage?.height() ?? 600);
+    leave(canvasWrapperRef.current, "in", origin, { centerX: fit.centerX, centerY: fit.centerY, zoomLevel: fit.zoomLevel }, () => opts.current.onSwapLayer(childLayerId));
+  }, [stageRef, canvasWrapperRef, leave]);
+  const backOut = useCallback2((parent) => {
+    if (busy.current) return;
+    leave(canvasWrapperRef.current, "out", "50% 50%", parent, () => opts.current.onSwapBack());
+  }, [canvasWrapperRef, leave]);
+  const isTransitioning = useCallback2(() => busy.current, []);
   useEffect2(() => () => {
-    konvaLayerTransitionAnimator.cancel();
-  }, []);
-  return { zoomIntoLayer, zoomOutToParent, isTransitioning };
+    clear();
+    busy.current = false;
+  }, [clear]);
+  return { stepInside, backOut, arrive, isTransitioning };
 }
 
+// src/design/choreography.ts
+import { MOTION as MOTION2, easeBezier, bloomOffset, layerReveal } from "@visualli/core";
+var clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+var RevealClock = class {
+  constructor() {
+    this.t0 = -Infinity;
+    this.end = 0;
+    this.plan = layerReveal(0, 0);
+    this.reduced = false;
+    this.center = { x: 0, y: 0 };
+    this.order = /* @__PURE__ */ new Map();
+    this.listeners = /* @__PURE__ */ new Set();
+    this.timer = null;
+  }
+  /** Begin a layer's arrival. `reduced` (reduced motion or instant reveal): everything fades in together. */
+  start(nodes, edgeCount, reduced, now = performance.now()) {
+    this.order.clear();
+    nodes.forEach((n, i) => this.order.set(n.id, i));
+    this.plan = layerReveal(nodes.length, edgeCount);
+    this.reduced = reduced || this.plan.instant;
+    reduced = this.reduced;
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (const n of nodes) {
+      minX = Math.min(minX, n.x);
+      maxX = Math.max(maxX, n.x);
+      minY = Math.min(minY, n.y);
+      maxY = Math.max(maxY, n.y);
+    }
+    this.center = nodes.length ? { x: (minX + maxX) / 2, y: (minY + maxY) / 2 } : { x: 0, y: 0 };
+    this.t0 = now;
+    this.end = reduced ? MOTION2.reduced.fade : this.plan.total;
+    this.emit(true);
+    if (this.timer) clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      this.timer = null;
+      this.emit(false);
+    }, this.end + 50);
+  }
+  /** Jump to the finished state (e.g. on unmount). */
+  stop() {
+    this.t0 = -Infinity;
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+    this.emit(false);
+  }
+  /** True while the layer is still arriving. */
+  active(now = performance.now()) {
+    return now - this.t0 < this.end;
+  }
+  /** Called with true when an arrival starts and false when it has finished. Returns the unsubscribe function. */
+  subscribe(fn) {
+    this.listeners.add(fn);
+    return () => {
+      this.listeners.delete(fn);
+    };
+  }
+  emit(running) {
+    this.listeners.forEach((fn) => fn(running));
+  }
+  /** Fills `out` with idea `id`'s arrival look. Returns false when it has arrived (nothing to apply). */
+  node(id, x, y, now, out) {
+    const el = now - this.t0;
+    if (el >= this.end) return false;
+    const i = this.order.get(id);
+    if (i === void 0) return false;
+    if (this.reduced) {
+      out.alpha = clamp01(el / MOTION2.reduced.fade);
+      out.scale = 1;
+      out.dx = 0;
+      out.dy = 0;
+      return true;
+    }
+    const r = MOTION2.reveal;
+    const t = el - this.plan.ideaDelay(i);
+    if (t >= r.duration) return false;
+    const e = t <= 0 ? 0 : easeBezier(r.ease, t / r.duration);
+    const from = bloomOffset({ x, y }, this.center);
+    out.alpha = clamp01(e);
+    out.scale = r.fromScale + (1 - r.fromScale) * e;
+    out.dx = from.x * (1 - e);
+    out.dy = from.y * (1 - e);
+    return true;
+  }
+  /** Fills `out` with connector `i`'s arrival look. Returns false when it has arrived. */
+  edge(i, dashed, now, out) {
+    const el = now - this.t0;
+    if (el >= this.end) return false;
+    if (this.reduced) {
+      out.alpha = clamp01(el / MOTION2.reduced.fade);
+      out.draw = 1;
+      return true;
+    }
+    const c = MOTION2.connector;
+    const t = el - this.plan.connectorDelay(i);
+    if (t >= c.draw && t >= c.fade) return false;
+    const group = t <= 0 ? 0 : easeBezier(c.ease, clamp01(t / c.fade));
+    const line = t <= 0 ? 0 : easeBezier(c.ease, clamp01(t / c.draw));
+    out.alpha = dashed ? group * line : group;
+    out.draw = dashed ? 1 : line;
+    return true;
+  }
+};
+var HoverTweens = class {
+  constructor() {
+    this.tweens = /* @__PURE__ */ new Map();
+    this.raised = /* @__PURE__ */ new Set();
+    this.cache = { lift: 0, ring: 0 };
+  }
+  /** Set which ideas are raised now. Returns true when anything started moving. */
+  set(next, reduced, now = performance.now()) {
+    let changed = false;
+    const ids = /* @__PURE__ */ new Set([...this.raised, ...next]);
+    for (const id of ids) {
+      const was = this.raised.has(id), is = next.has(id);
+      if (was === is) continue;
+      const cur = this.progress(id, now);
+      this.tweens.set(id, { fromLift: cur.lift, fromRing: cur.ring, to: is ? 1 : 0, t0: reduced ? -Infinity : now });
+      changed = true;
+    }
+    this.raised = new Set(next);
+    return changed;
+  }
+  /** Lift (bloom ease) and ring (standard ease) progress of an idea, 0 at rest and 1 fully raised. */
+  progress(id, now) {
+    const tw = this.tweens.get(id);
+    const out = this.cache;
+    if (!tw) {
+      out.lift = out.ring = this.raised.has(id) ? 1 : 0;
+      return out;
+    }
+    const u = clamp01((now - tw.t0) / MOTION2.hover.duration);
+    out.lift = tw.fromLift + (tw.to - tw.fromLift) * easeBezier(MOTION2.hover.liftEase, u);
+    out.ring = tw.fromRing + (tw.to - tw.fromRing) * easeBezier(MOTION2.hover.ringEase, u);
+    if (u >= 1) {
+      this.tweens.delete(id);
+      out.lift = out.ring = tw.to;
+    }
+    return out;
+  }
+  /** True while any idea is still moving. */
+  active(now = performance.now()) {
+    for (const tw of this.tweens.values()) if (now - tw.t0 < MOTION2.hover.duration) return true;
+    return false;
+  }
+  has(id) {
+    return this.tweens.has(id) || this.raised.has(id);
+  }
+};
+
 // src/components/KonvaStage.tsx
 import { useRef as useRef3, useEffect as useEffect3, forwardRef } from "react";
 
@@ -646,12 +609,124 @@ import {
 } from "react-konva";
 var KStage = Stage;
 var KLayer = Layer;
-var KGroup = Group;
 var KShape = Shape;
-var KRect = Rect;
-var KText = Text;
-var KLine = Line;
-var KTextPath = TextPath;
+
+// src/components/KonvaStage.tsx
+import Konva from "konva";
+
+// src/design/runtime.ts
+import { useSyncExternalStore } from "react";
+import { TOKENS, TYPE_STYLES } from "@visualli/core";
+
+// src/generated/specCss.ts
+var SPEC_TOKENS_CSS = '/* Spec tokens for all 8 themes \u2014 generated from the Visualli design system (v0.2.1). Do not edit here: changes come in through PRs from the private design system. MIT license, see ../LICENSE. */\n:root, [data-theme="light"] {\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[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[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[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[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[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[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[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[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  :root:not([data-motion="full"]) {\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';
+var SPEC_COMPONENT_CSS = '/* Styles for the spec components (map, nodes, connectors, peek, terms, depth trail, controls) \u2014 generated from the Visualli design system (v0.2.1). Do not edit here: changes come in through PRs from the private design system. MIT license, see ../LICENSE. */\n:root { --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[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[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__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__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';
+var 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";
+var SPEC_DESIGN_SYSTEM_VERSION = "0.2.1";
+var SPEC_BUNDLED_FONTS = [
+  {
+    "family": "Caveat",
+    "file": "Caveat-Variable.ttf",
+    "weight": "400 700"
+  }
+];
+
+// src/design/runtime.ts
+var STYLE_ID = "visualli-design-system";
+var 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-touch .vi-trail button { min-height: 32px; }
+`;
+var FONTS_ID = "visualli-design-system-fonts";
+var CAVEAT_ID = "visualli-design-system-caveat";
+var SDK_VERSION = true ? "0.2.1" : "latest";
+var webFontsSheet = Promise.resolve();
+function ensureDesignSystemStyles(assets = {}) {
+  if (typeof document === "undefined") return Promise.resolve();
+  if (!document.getElementById(STYLE_ID)) {
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.setAttribute("data-design-system", SPEC_DESIGN_SYSTEM_VERSION);
+    style.textContent = `${SPEC_TOKENS_CSS}
+${SPEC_COMPONENT_CSS}
+${LAYOUT_CSS}`;
+    document.head.appendChild(style);
+  }
+  if (assets.loadWebFonts !== false && SPEC_FONTS_URL && !document.getElementById(FONTS_ID)) {
+    const link = document.createElement("link");
+    link.id = FONTS_ID;
+    link.rel = "stylesheet";
+    link.href = SPEC_FONTS_URL;
+    webFontsSheet = new Promise((resolve) => {
+      link.addEventListener("load", () => resolve(), { once: true });
+      link.addEventListener("error", () => resolve(), { once: true });
+    });
+    document.head.appendChild(link);
+  }
+  if (!document.getElementById(CAVEAT_ID)) {
+    const base = (assets.fontBaseUrl ?? `https://cdn.jsdelivr.net/npm/@visualli/react@${SDK_VERSION}/fonts`).replace(/\/$/, "");
+    const style = document.createElement("style");
+    style.id = CAVEAT_ID;
+    style.textContent = SPEC_BUNDLED_FONTS.map((f) => `@font-face { font-family: "${f.family}"; src: url("${base}/${f.file}"); font-weight: ${f.weight}; font-display: swap; }`).join("\n");
+    document.head.appendChild(style);
+  }
+  return webFontsSheet;
+}
+var firstFamily = (stack) => stack.split(",")[0].trim();
+var CANVAS_FONT_FACES = ["node-label", "edge-label", "body"].map((style) => {
+  const t = TYPE_STYLES[style];
+  return `${t.weight} ${t.size}px ${firstFamily(TOKENS.light[t.family])}`;
+});
+var fontsEpochValue = 0;
+var fontListeners = /* @__PURE__ */ new Set();
+var fontsEpoch = () => fontsEpochValue;
+function useFontsEpoch() {
+  return useSyncExternalStore(onFontsChange, fontsEpoch, () => 0);
+}
+var onFontsChange = (cb) => {
+  fontListeners.add(cb);
+  return () => fontListeners.delete(cb);
+};
+function loadCanvasFonts(sheet = Promise.resolve(), timeoutMs = 3e3) {
+  if (typeof document === "undefined" || !("fonts" in document)) return Promise.resolve();
+  const fonts = document.fonts;
+  const loads = sheet.then(() => Promise.all(CANVAS_FONT_FACES.map((f) => fonts.load(f).catch(() => [])))).then(() => fonts.ready).then(() => void 0);
+  const timeout = new Promise((r) => setTimeout(r, timeoutMs));
+  return Promise.race([loads, timeout]).then(() => {
+    fontsEpochValue++;
+    fontListeners.forEach((cb) => cb());
+  });
+}
+if (typeof document !== "undefined" && "fonts" in document) {
+  document.fonts.addEventListener?.("loadingdone", () => {
+    fontsEpochValue++;
+    fontListeners.forEach((cb) => cb());
+  });
+}
+var currentPixelRatio = () => typeof window === "undefined" ? 1 : Math.min(Math.max(window.devicePixelRatio || 1, 1), 3);
+function watchPixelRatio(cb) {
+  if (typeof window === "undefined" || !window.matchMedia) return () => {
+  };
+  let mql;
+  let stopped = false;
+  const arm = () => {
+    mql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+    mql.addEventListener("change", onChange, { once: true });
+  };
+  const onChange = () => {
+    if (stopped) return;
+    cb(currentPixelRatio());
+    arm();
+  };
+  arm();
+  return () => {
+    stopped = true;
+    mql.removeEventListener("change", onChange);
+  };
+}
 
 // src/components/KonvaStage.tsx
 import { jsx } from "react/jsx-runtime";
@@ -677,10 +752,22 @@ var KonvaStage = forwardRef(function KonvaStage2({
     }
   }, []);
   useEffect3(() => {
+    const stage = internalRef.current;
     return () => {
-      internalRef.current?.destroy();
+      stage?.destroy();
     };
   }, []);
+  Konva.pixelRatio = currentPixelRatio();
+  useEffect3(() => watchPixelRatio((ratio) => {
+    Konva.pixelRatio = ratio;
+    const stage = internalRef.current;
+    if (!stage) return;
+    stage.getLayers().forEach((l) => {
+      l.getCanvas().setPixelRatio(ratio);
+      l.getHitCanvas().setPixelRatio(ratio);
+    });
+    stage.batchDraw();
+  }), []);
   const w = canvasWidth || 800;
   const h = canvasHeight || 600;
   const stageX = w / 2 - centerX * zoomLevel;
@@ -704,7 +791,6 @@ var KonvaStage = forwardRef(function KonvaStage2({
       onTouchMove,
       onTouchEnd,
       draggable: false,
-      pixelRatio: 1,
       children
     }
   );
@@ -712,1360 +798,1025 @@ var KonvaStage = forwardRef(function KonvaStage2({
 var KonvaStage_default = KonvaStage;
 
 // src/components/KonvaNodeLayer.tsx
-import { useRef as useRef5, useLayoutEffect, useEffect as useEffect4, useMemo as useMemo3 } from "react";
+import { useRef as useRef5, useLayoutEffect, useMemo as useMemo2 } from "react";
+import { CANVAS_STYLE as CANVAS_STYLE3, RBushSpatialIndex, layerBlooms, shadowsShown, intersectsViewport, nodeBounds } from "@visualli/core";
 
-// src/hooks/useViewportNodes.ts
-import { useMemo, useRef as useRef4 } from "react";
-import { RBushSpatialIndex, getViewportVisibleNodes } from "@visualli/core";
-var SPATIAL_INDEX_THRESHOLD = 200;
-function useViewportNodes(nodes, levelFilter, skipCulling = false, isDragging = false) {
-  const { centerX, centerY, zoomLevel, canvasWidth, canvasHeight } = useViewportStore();
-  const indexRef = useRef4(null);
-  const nodesHashRef = useRef4(0);
-  const nodesHash = nodes.length;
-  if (nodesHash !== nodesHashRef.current) {
-    nodesHashRef.current = nodesHash;
-    indexRef.current = null;
+// src/design/design.ts
+import {
+  CANVAS_STYLE,
+  TYPE_STYLES as TYPE_STYLES2,
+  isContrastTheme,
+  isDarkTheme,
+  labelScale,
+  metricsFor,
+  resolveComfort,
+  resolveTheme,
+  TOKENS as TOKENS2
+} from "@visualli/core";
+function parseShadow(css) {
+  const m = /^(-?[\d.]+)(?:px)?\s+(-?[\d.]+)(?:px)?\s+([\d.]+)(?:px)?\s+(.+)$/.exec(css.trim());
+  return m ? { x: +m[1], y: +m[2], blur: +m[3], color: m[4].trim() } : null;
+}
+var cache = /* @__PURE__ */ new Map();
+function makeDesign(theme, comfortIn) {
+  const key2 = `${theme}|${+comfortIn.readableType}${+comfortIn.largerText}${+comfortIn.reducedMotion}`;
+  const hit = cache.get(key2);
+  if (hit) return hit;
+  const tokens = TOKENS2[theme];
+  const ui = tokens["font-ui"];
+  const d = {
+    theme,
+    comfort: comfortIn,
+    tokens,
+    metrics: metricsFor(comfortIn),
+    isDark: isDarkTheme(theme),
+    fontHand: comfortIn.readableType ? ui : tokens["font-hand"],
+    fontNote: comfortIn.readableType ? ui : tokens["font-note"],
+    fontUi: ui,
+    labelScale: labelScale(comfortIn),
+    nodeShadow: isContrastTheme(theme) ? null : parseShadow(isDarkTheme(theme) ? CANVAS_STYLE.node.shadowDark : CANVAS_STYLE.node.shadowLight),
+    attrs: {
+      "data-theme": theme,
+      ...comfortIn.readableType ? { "data-type": "readable" } : {},
+      ...comfortIn.largerText ? { "data-scale": "lg" } : {},
+      ...comfortIn.reducedMotion ? { "data-motion": "reduced" } : {}
+    },
+    edgeLabel: comfortIn.readableType ? { weight: CANVAS_STYLE.edge.readableLabelWeight, size: CANVAS_STYLE.edge.readableLabelSize } : { weight: CANVAS_STYLE.edge.labelWeight, size: CANVAS_STYLE.edge.labelSize }
+  };
+  cache.set(key2, d);
+  return d;
+}
+var DEFAULT_DESIGN = makeDesign("light", { readableType: false, largerText: false, reducedMotion: false });
+function resolveDesign(props, env) {
+  const input = props.theme ?? (props.isDark === void 0 ? void 0 : props.isDark ? "dark" : "light");
+  let theme = resolveTheme(input, { prefersDark: env.prefersDark, forcedColors: env.forcedColors });
+  if (env.forcedColors && props.respectForcedColors !== false && !isContrastTheme(theme)) {
+    theme = isDarkTheme(theme) ? "contrast-dark" : "contrast-light";
   }
-  return useMemo(() => {
-    if (nodes.length === 0) return [];
-    if (!indexRef.current && nodes.length >= SPATIAL_INDEX_THRESHOLD && !skipCulling && !isDragging) {
-      indexRef.current = new RBushSpatialIndex();
-      indexRef.current.bulkLoad(nodes.map((n) => ({
-        nodeId: n.id,
-        bounds: { minX: n.x, minY: n.y, maxX: n.x + n.width, maxY: n.y + n.height }
-      })));
-    }
-    return getViewportVisibleNodes({
-      nodes,
-      viewport: { centerX, centerY, zoomLevel, rotation: 0, visibleBounds: { minX: 0, minY: 0, maxX: 0, maxY: 0 } },
-      canvasWidth,
-      canvasHeight,
-      levelFilter,
-      skipCulling,
-      isDragging,
-      spatialIndex: indexRef.current,
-      spatialIndexThreshold: SPATIAL_INDEX_THRESHOLD
-    });
-  }, [nodes, levelFilter, skipCulling, isDragging, centerX, centerY, zoomLevel, canvasWidth, canvasHeight]);
+  return makeDesign(theme, resolveComfort(props.comfort, { prefersReducedMotion: env.prefersReducedMotion }));
 }
 
-// src/components/KonvaNode.tsx
-import React2, { useMemo as useMemo2 } from "react";
-import { CANVAS_COLORS, NODE_HEIGHT, TEXT_LABEL_HIDE_BELOW_ZOOM, darkenHexColor } from "@visualli/core";
-
-// src/config/index.ts
+// src/design/drawing.ts
 import {
-  ALL_BLOB_SHAPES as ALL_BLOB_SHAPES2,
-  ACTIVE_BLOB_TYPES,
-  BLOB_LAYER_CONFIG,
-  NODE_LAYER_CONFIG,
-  getBlobTypeForLayer,
-  BLOB_TEXT_OFFSETS,
-  drawBlobPath,
-  NODE_TEXT_BASE_FONT_PX,
-  DESCRIPTION_TEXT_BASE_FONT_PX,
-  CONTAINER_LABEL_BASE_FONT_PX,
-  EDGE_LABEL_BASE_FONT_PX,
-  OVERLAY_FONT_UPPER_BOOST_PX,
-  computeNodeTextWorldScale,
-  computeNodeTextScreenScale,
-  computeOverlayScale,
-  computeEdgeLabelScale
+  CANVAS_STYLE as CANVAS_STYLE2,
+  IDEA,
+  ideaDetail,
+  TYPE_STYLES as TYPE_STYLES3,
+  blobPath,
+  ideaStyle,
+  labelGrowth,
+  nodeRadii,
+  ringsFor,
+  shapeOfLevel
 } from "@visualli/core";
-
-// src/config/blobShapes.ts
-var ALL_BLOB_SHAPES = [
-  // Shape 0 · Blob 1 (root / L0)
-  [
-    { x: 1.12, y: 0 },
-    { x: 0.86, y: 0.56 },
-    { x: 0.46, y: 0.94 },
-    { x: -0.08, y: 1.06 },
-    { x: -0.68, y: 0.82 },
-    { x: -0.96, y: 0.08 },
-    { x: -0.55, y: -0.82 },
-    { x: 0.04, y: -1.02 },
-    { x: 0.72, y: -0.8 },
-    { x: 1.08, y: -0.38 }
-  ],
-  // Shape 1 · Blob 2
-  [
-    { x: -0.489, y: -0.625 },
-    { x: -0.384, y: -0.716 },
-    { x: -0.285, y: -0.792 },
-    { x: -0.189, y: -0.855 },
-    { x: -0.09, y: -0.903 },
-    { x: 0.014, y: -0.932 },
-    { x: 0.129, y: -0.94 },
-    { x: 0.255, y: -0.924 },
-    { x: 0.412, y: -0.876 },
-    { x: 0.516, y: -0.832 },
-    { x: 0.612, y: -0.78 },
-    { x: 0.695, y: -0.725 },
-    { x: 0.767, y: -0.666 },
-    { x: 0.83, y: -0.606 },
-    { x: 0.885, y: -0.546 },
-    { x: 0.933, y: -0.486 },
-    { x: 0.979, y: -0.425 },
-    { x: 1.006, y: -0.385 },
-    { x: 1.034, y: -0.334 },
-    { x: 1.058, y: -0.276 },
-    { x: 1.078, y: -0.209 },
-    { x: 1.092, y: -0.133 },
-    { x: 1.101, y: -0.046 },
-    { x: 1.102, y: 0.052 },
-    { x: 1.094, y: 0.173 },
-    { x: 1.083, y: 0.244 },
-    { x: 1.063, y: 0.324 },
-    { x: 1.034, y: 0.401 },
-    { x: 0.996, y: 0.477 },
-    { x: 0.948, y: 0.549 },
-    { x: 0.889, y: 0.617 },
-    { x: 0.82, y: 0.681 },
-    { x: 0.735, y: 0.741 },
-    { x: 0.658, y: 0.783 },
-    { x: 0.569, y: 0.822 },
-    { x: 0.474, y: 0.855 },
-    { x: 0.372, y: 0.882 },
-    { x: 0.265, y: 0.904 },
-    { x: 0.156, y: 0.92 },
-    { x: 0.046, y: 0.931 },
-    { x: -0.069, y: 0.938 },
-    { x: -0.155, y: 0.935 },
-    { x: -0.25, y: 0.919 },
-    { x: -0.346, y: 0.89 },
-    { x: -0.443, y: 0.851 },
-    { x: -0.539, y: 0.8 },
-    { x: -0.633, y: 0.738 },
-    { x: -0.723, y: 0.667 },
-    { x: -0.808, y: 0.585 },
-    { x: -0.882, y: 0.501 },
-    { x: -0.944, y: 0.421 },
-    { x: -0.994, y: 0.343 },
-    { x: -1.034, y: 0.267 },
-    { x: -1.064, y: 0.192 },
-    { x: -1.085, y: 0.12 },
-    { x: -1.097, y: 0.042 },
-    { x: -1.102, y: 1e-3 },
-    { x: -1.09, y: -0.243 },
-    { x: -1.05, y: -0.365 },
-    { x: -0.99, y: -0.441 },
-    { x: -0.911, y: -0.479 },
-    { x: -0.819, y: -0.499 },
-    { x: -0.715, y: -0.517 },
-    { x: -0.605, y: -0.551 }
-  ],
-  // Shape 2 · Blob 3
-  [
-    { x: 3e-3, y: -0.97 },
-    { x: 0.163, y: -0.984 },
-    { x: 0.286, y: -1.028 },
-    { x: 0.389, y: -1.096 },
-    { x: 0.488, y: -1.174 },
-    { x: 0.597, y: -1.21 },
-    { x: 0.728, y: -1.165 },
-    { x: 0.867, y: -1.036 },
-    { x: 0.996, y: -0.839 },
-    { x: 1.098, y: -0.59 },
-    { x: 1.158, y: -0.304 },
-    { x: 1.153, y: 0.012 },
-    { x: 1.08, y: 0.336 },
-    { x: 0.944, y: 0.639 },
-    { x: 0.756, y: 0.889 },
-    { x: 0.484, y: 1.072 },
-    { x: 0.339, y: 1.079 },
-    { x: 0.219, y: 1.051 },
-    { x: 0.131, y: 0.994 },
-    { x: 0.059, y: 0.939 },
-    { x: 8e-3, y: 0.915 },
-    { x: -0.105, y: 0.931 },
-    { x: -0.176, y: 0.965 },
-    { x: -0.249, y: 1.005 },
-    { x: -0.345, y: 1.039 },
-    { x: -0.497, y: 1.055 },
-    { x: -0.672, y: 1.032 },
-    { x: -0.817, y: 0.952 },
-    { x: -0.945, y: 0.81 },
-    { x: -1.054, y: 0.6 },
-    { x: -1.16, y: 0.302 },
-    { x: -1.187, y: -0.011 },
-    { x: -1.165, y: -0.326 },
-    { x: -1.097, y: -0.599 },
-    { x: -0.991, y: -0.838 },
-    { x: -0.852, y: -0.912 },
-    { x: -0.695, y: -0.958 },
-    { x: -0.53, y: -0.988 },
-    { x: -0.357, y: -0.992 },
-    { x: -0.18, y: -0.983 }
-  ],
-  // Shape 3 · Blob 4
-  [
-    { x: -0.734, y: -1.127 },
-    { x: -0.656, y: -1.146 },
-    { x: -0.567, y: -1.142 },
-    { x: -0.468, y: -1.115 },
-    { x: -0.358, y: -1.079 },
-    { x: -0.238, y: -1.034 },
-    { x: -0.107, y: -0.989 },
-    { x: 0.035, y: -0.953 },
-    { x: 0.188, y: -0.929 },
-    { x: 0.325, y: -0.916 },
-    { x: 0.484, y: -0.896 },
-    { x: 0.65, y: -0.854 },
-    { x: 0.811, y: -0.77 },
-    { x: 0.955, y: -0.631 },
-    { x: 1.068, y: -0.422 },
-    { x: 1.138, y: -0.126 },
-    { x: 1.152, y: 0.272 },
-    { x: 1.121, y: 0.451 },
-    { x: 1.046, y: 0.602 },
-    { x: 0.928, y: 0.727 },
-    { x: 0.767, y: 0.833 },
-    { x: 0.565, y: 0.925 },
-    { x: 0.323, y: 1.001 },
-    { x: 0.042, y: 1.075 },
-    { x: -0.277, y: 1.142 },
-    { x: -0.368, y: 1.147 },
-    { x: -0.475, y: 1.136 },
-    { x: -0.589, y: 1.104 },
-    { x: -0.704, y: 1.05 },
-    { x: -0.815, y: 0.973 },
-    { x: -0.913, y: 0.871 },
-    { x: -0.993, y: 0.746 },
-    { x: -1.048, y: 0.593 },
-    { x: -1.109, y: 0.298 },
-    { x: -1.145, y: 0.018 },
-    { x: -1.154, y: -0.243 },
-    { x: -1.135, y: -0.482 },
-    { x: -1.085, y: -0.695 },
-    { x: -1.003, y: -0.874 },
-    { x: -0.886, y: -1.02 }
-  ],
-  // Shape 4 · Blob 5 (inverted Blob 4)
-  [
-    { x: -0.734, y: 1.127 },
-    { x: -0.656, y: 1.146 },
-    { x: -0.567, y: 1.142 },
-    { x: -0.468, y: 1.115 },
-    { x: -0.358, y: 1.079 },
-    { x: -0.238, y: 1.034 },
-    { x: -0.107, y: 0.989 },
-    { x: 0.035, y: 0.953 },
-    { x: 0.188, y: 0.929 },
-    { x: 0.325, y: 0.916 },
-    { x: 0.484, y: 0.896 },
-    { x: 0.65, y: 0.854 },
-    { x: 0.811, y: 0.77 },
-    { x: 0.955, y: 0.631 },
-    { x: 1.068, y: 0.422 },
-    { x: 1.138, y: 0.126 },
-    { x: 1.152, y: -0.272 },
-    { x: 1.121, y: -0.451 },
-    { x: 1.046, y: -0.602 },
-    { x: 0.928, y: -0.727 },
-    { x: 0.767, y: -0.833 },
-    { x: 0.565, y: -0.925 },
-    { x: 0.323, y: -1.001 },
-    { x: 0.042, y: -1.075 },
-    { x: -0.277, y: -1.142 },
-    { x: -0.368, y: -1.147 },
-    { x: -0.475, y: -1.136 },
-    { x: -0.589, y: -1.104 },
-    { x: -0.704, y: -1.05 },
-    { x: -0.815, y: -0.973 },
-    { x: -0.913, y: -0.871 },
-    { x: -0.993, y: -0.746 },
-    { x: -1.048, y: -0.593 },
-    { x: -1.109, y: -0.298 },
-    { x: -1.145, y: -0.018 },
-    { x: -1.154, y: 0.243 },
-    { x: -1.135, y: 0.482 },
-    { x: -1.085, y: 0.695 },
-    { x: -1.003, y: 0.874 },
-    { x: -0.886, y: 1.02 }
-  ],
-  // Shape 5 · Blob 6
-  [
-    { x: 1e-3, y: -1.006 },
-    { x: 0.134, y: -1.001 },
-    { x: 0.262, y: -1.024 },
-    { x: 0.382, y: -1.073 },
-    { x: 0.498, y: -1.107 },
-    { x: 0.614, y: -1.105 },
-    { x: 0.733, y: -1.049 },
-    { x: 0.85, y: -0.932 },
-    { x: 0.953, y: -0.755 },
-    { x: 1.03, y: -0.529 },
-    { x: 1.067, y: -0.265 },
-    { x: 1.054, y: 0.018 },
-    { x: 0.986, y: 0.3 },
-    { x: 0.868, y: 0.557 },
-    { x: 0.715, y: 0.766 },
-    { x: 0.55, y: 0.909 },
-    { x: 0.396, y: 0.984 },
-    { x: 0.262, y: 1.005 },
-    { x: 0.148, y: 1.003 },
-    { x: 0.037, y: 1.008 },
-    { x: -0.083, y: 1.04 },
-    { x: -0.22, y: 1.118 },
-    { x: -0.36, y: 1.192 },
-    { x: -0.5, y: 1.234 },
-    { x: -0.65, y: 1.175 },
-    { x: -0.81, y: 1.045 },
-    { x: -0.99, y: 0.855 },
-    { x: -1.14, y: 0.61 },
-    { x: -1.24, y: 0.33 },
-    { x: -1.27, y: 0.04 },
-    { x: -1.275, y: -0.25 },
-    { x: -1.225, y: -0.5 },
-    { x: -1.08, y: -0.72 },
-    { x: -0.89, y: -0.92 },
-    { x: -0.734, y: -1.053 },
-    { x: -0.614, y: -1.112 },
-    { x: -0.498, y: -1.127 },
-    { x: -0.381, y: -1.11 },
-    { x: -0.261, y: -1.095 },
-    { x: -0.133, y: -1.058 },
-    { x: 1e-3, y: -1.01 },
-    { x: 0.134, y: -1.001 }
-  ]
-];
-function buildBlobPathData(_shape, cx, cy, width, height) {
-  const rx = width / 2;
-  const ry = height / 2;
-  const blobType = 0;
-  const srcPts = ALL_BLOB_SHAPES[blobType];
-  const pts = srcPts.map((p) => ({ x: cx + p.x * rx, y: cy + p.y * ry }));
-  const mid = (a, b) => ({ x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 });
-  const last = pts[pts.length - 1];
-  const first = pts[0];
-  const s = mid(last, first);
-  let d = `M ${s.x} ${s.y}`;
-  for (let i = 0; i < pts.length; i++) {
-    const curr = pts[i];
-    const next = pts[(i + 1) % pts.length];
-    const m = mid(curr, next);
-    d += ` Q ${curr.x} ${curr.y} ${m.x} ${m.y}`;
+var DEG = Math.PI / 180;
+var MAX_CACHED_PATHS = 4096;
+var pathCache = /* @__PURE__ */ new Map();
+function blobPath2D(shape, rx, ry) {
+  const key2 = `${shape}|${rx}|${ry}`;
+  let p = pathCache.get(key2);
+  if (!p) {
+    if (pathCache.size >= MAX_CACHED_PATHS) pathCache.delete(pathCache.keys().next().value);
+    p = new Path2D(blobPath(shape, rx, ry));
+    pathCache.set(key2, p);
+  }
+  return p;
+}
+var NO_DASH = [];
+var NO_RINGS = [];
+var dashCache = /* @__PURE__ */ new Map();
+function dashOf(spec) {
+  if (!spec) return NO_DASH;
+  let d = dashCache.get(spec);
+  if (!d) {
+    d = spec.split(/\s+/).map(Number);
+    dashCache.set(spec, d);
   }
-  d += " Z";
   return d;
 }
-
-// src/components/KonvaNode.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var KonvaNode = React2.memo(function KonvaNode2({
-  node,
-  zoomLevel,
-  isExternallyHovered = false,
-  isExternallyPressed = false,
-  isDragging = false
-}) {
-  const borderColor = useMemo2(() => darkenHexColor(node.color, 0.13), [node.color]);
-  const layerCount = useMemo2(() => {
-    const count = node.branchCount ?? 0;
-    return Math.min(count, 3);
-  }, [node.branchCount]);
-  const baseRadiusX = node.width / 2;
-  const baseRadiusY = Math.max(NODE_HEIGHT * 1.6 / 2, baseRadiusX * 0.74);
-  const calculateFontSize = useMemo2(() => {
-    return 30;
-  }, [node.title]);
-  const textNaturalWidth = node.width - 40;
-  const textNaturalHeight = NODE_HEIGHT * 1.2;
-  const maxScale = computeNodeTextWorldScale(node.width, zoomLevel);
-  const blobType = getBlobTypeForLayer(node.level);
-  const textOffsetX = (BLOB_TEXT_OFFSETS[blobType] ?? 0) * baseRadiusX;
-  const effectiveHover = isExternallyHovered;
-  const isPressed = isExternallyPressed;
-  const topFill = effectiveHover || isPressed ? borderColor : node.color;
-  const topStroke = isPressed ? node.color : borderColor;
-  const backgroundLayers = useMemo2(() => {
-    if (layerCount === 0) return [];
-    const startIdx = BLOB_LAYER_CONFIG.length - layerCount;
-    const layers = [];
-    for (let i = startIdx; i < BLOB_LAYER_CONFIG.length; i++) {
-      const config = BLOB_LAYER_CONFIG[i];
-      layers.push({
-        ...config,
-        radiusX: baseRadiusX * config.scaleUp,
-        radiusY: baseRadiusY * config.scaleUp
-      });
-    }
-    return layers;
-  }, [layerCount, baseRadiusX, baseRadiusY]);
-  return /* @__PURE__ */ jsxs(KGroup, { x: node.x, y: node.y, listening: false, children: [
-    backgroundLayers.map((layer, idx) => /* @__PURE__ */ jsx2(
-      KShape,
-      {
-        rotation: layer.rotation,
-        opacity: layer.opacity,
-        sceneFunc: (ctx, shape) => {
-          drawBlobPath(ctx, layer.radiusX, layer.radiusY, blobType);
-          ctx.fillStrokeShape(shape);
-        },
-        fill: node.color,
-        stroke: borderColor,
-        strokeWidth: layer.strokeWidth,
-        dash: layer.dash ? [...layer.dash] : void 0,
-        listening: false,
-        perfectDrawEnabled: false
-      },
-      `blob-layer-${idx}`
-    )),
-    /* @__PURE__ */ jsx2(
-      KShape,
-      {
-        rotation: NODE_LAYER_CONFIG.rotation,
-        opacity: NODE_LAYER_CONFIG.opacity,
-        sceneFunc: (ctx, shape) => {
-          drawBlobPath(ctx, baseRadiusX, baseRadiusY, blobType);
-          ctx.fillStrokeShape(shape);
-        },
-        hitFunc: (ctx, shape) => {
-          drawBlobPath(ctx, baseRadiusX, baseRadiusY, blobType);
-          ctx.fillStrokeShape(shape);
-        },
-        fill: topFill,
-        stroke: topStroke,
-        strokeWidth: NODE_LAYER_CONFIG.strokeWidth,
-        shadowEnabled: !isDragging,
-        shadowColor: "rgba(255,255,255,1)",
-        shadowBlur: effectiveHover || isPressed ? 40 : 15,
-        shadowOpacity: effectiveHover || isPressed ? 0.4 : 0.15,
-        shadowOffsetX: 0,
-        shadowOffsetY: 0,
-        perfectDrawEnabled: false
+var lineCache = /* @__PURE__ */ new Map();
+var MAX_CACHED_LAYOUTS = 8192;
+function layoutLabel(c, text, font, maxWidth, maxLines = Infinity) {
+  const key2 = `${fontsEpoch()}|${font}|${maxWidth}|${text}`;
+  const hit = lineCache.get(key2);
+  if (hit) return hit;
+  c.font = font;
+  const words = text.split(/\s+/).filter(Boolean);
+  const lines = [];
+  let cur = "";
+  const fit = (s) => c.measureText(s).width <= maxWidth;
+  for (const w of words) {
+    const next = cur ? `${cur} ${w}` : w;
+    if (fit(next)) {
+      cur = next;
+      continue;
+    }
+    if (cur) lines.push(cur);
+    let rest = w;
+    while (!fit(rest) && rest.length > 1) {
+      let n = rest.length - 1;
+      while (n > 1 && !fit(rest.slice(0, n))) n--;
+      lines.push(rest.slice(0, n));
+      rest = rest.slice(n);
+    }
+    cur = rest;
+  }
+  if (cur) lines.push(cur);
+  if (lines.length > maxLines) {
+    lines.length = maxLines;
+    let last = lines[maxLines - 1] + "\u2026";
+    while (last.length > 1 && !fit(last)) last = last.slice(0, -2) + "\u2026";
+    lines[maxLines - 1] = last;
+  }
+  if (lineCache.size >= MAX_CACHED_LAYOUTS) lineCache.clear();
+  lineCache.set(key2, lines);
+  return lines;
+}
+var IDLE = { hovered: false, pressed: false, selected: false, focused: false, dimmed: false };
+var ideaColors = (d, n) => ideaStyle(d.theme, n);
+var ideaLabelPx = (n, d) => IDEA.labelSize[n.kind ?? "node"] * d.labelScale;
+function drawIdea(c, node, d, zoom, st, opt) {
+  const { rx, ry } = nodeRadii(node);
+  const { fill, ring } = ideaColors(d, node);
+  const screenW = node.width * zoom;
+  const base = opt.base;
+  const detail = ideaDetail(screenW, st.selected || st.focused || st.hovered);
+  if (detail === "speck") {
+    const a = (st.dimmed ? opt.dimOpacity ?? CANVAS_STYLE2.node.dimmedOpacityFocus : 1) * (st.arrival ? st.arrival.alpha : 1);
+    if (a !== 1) c.globalAlpha = a;
+    c.fillStyle = fill;
+    c.fillRect(node.x - rx, node.y - ry, rx * 2, ry * 2);
+    if (a !== 1) c.globalAlpha = 1;
+    return;
+  }
+  const detailed = detail === "full";
+  const shape = shapeOfLevel(node.level);
+  const rings = detailed ? ringsFor(node.branchCount) : NO_RINGS;
+  const raised = st.hovered || st.pressed || st.selected;
+  const lift = st.lift ?? (raised ? 1 : 0);
+  const ringT = st.ring ?? (raised ? 1 : 0);
+  const arr = st.arrival;
+  const y = node.y + lift * CANVAS_STYLE2.node.hoverLift + (arr ? arr.dy : 0);
+  const x = node.x + (arr ? arr.dx : 0);
+  let k = opt.k;
+  if (k === void 0) {
+    const m = c.getTransform();
+    k = Math.hypot(m.a, m.b);
+  }
+  if (base) c.setTransform(base.a, base.b, base.c, base.d, base.e + base.a * x + base.c * y, base.f + base.b * x + base.d * y);
+  else {
+    c.save();
+    c.translate(x, y);
+  }
+  if (arr) c.scale(arr.scale, arr.scale);
+  c.lineJoin = "round";
+  const baseAlpha = (st.dimmed ? opt.dimOpacity ?? CANVAS_STYLE2.node.dimmedOpacityFocus : 1) * (arr ? arr.alpha : 1);
+  c.globalAlpha = baseAlpha;
+  if (rings.length) {
+    const ringSpin = ringT * CANVAS_STYLE2.node.hoverRingsRotate;
+    const ringGrow = 1 + ringT * (CANVAS_STYLE2.node.hoverRingsScale - 1);
+    c.fillStyle = fill;
+    c.strokeStyle = ring;
+    let dashed = false;
+    for (let i = rings.length - 1; i >= 0; i--) {
+      const r = rings[i];
+      const angle = (r.rotate + ringSpin) * DEG;
+      c.rotate(angle);
+      c.globalAlpha = baseAlpha * r.opacity;
+      const path = blobPath2D(shape, rx * r.scale * ringGrow, ry * r.scale * ringGrow);
+      c.fill(path);
+      c.lineWidth = r.width;
+      if (r.dash) {
+        c.setLineDash(dashOf(r.dash));
+        dashed = true;
+      } else if (dashed) {
+        c.setLineDash(NO_DASH);
+        dashed = false;
       }
-    ),
-    /* @__PURE__ */ jsx2(
-      KGroup,
-      {
-        clipFunc: (ctx) => {
-          drawBlobPath(ctx, baseRadiusX, baseRadiusY, blobType);
-        },
-        visible: zoomLevel >= TEXT_LABEL_HIDE_BELOW_ZOOM,
-        listening: false,
-        children: /* @__PURE__ */ jsx2(
-          KText,
-          {
-            x: textOffsetX,
-            y: 0,
-            offsetX: textNaturalWidth / 2,
-            offsetY: textNaturalHeight / 2,
-            width: textNaturalWidth,
-            height: textNaturalHeight,
-            scaleX: maxScale,
-            scaleY: maxScale,
-            text: node.title,
-            fontSize: calculateFontSize,
-            fontFamily: "'Story Script', cursive",
-            fontStyle: "normal",
-            fill: CANVAS_COLORS.node.titleColor,
-            align: "center",
-            verticalAlign: "middle",
-            wrap: "word",
-            ellipsis: false,
-            listening: false,
-            perfectDrawEnabled: false
-          }
-        )
+      c.stroke(path);
+      c.rotate(-angle);
+    }
+    if (dashed) c.setLineDash(NO_DASH);
+    c.globalAlpha = baseAlpha;
+  }
+  const body = blobPath2D(shape, rx, ry);
+  c.fillStyle = fill;
+  const shadow = detailed && opt.shadows ? d.nodeShadow : null;
+  if (shadow) {
+    c.shadowColor = shadow.color;
+    c.shadowBlur = shadow.blur * k;
+    c.shadowOffsetX = shadow.x * k;
+    c.shadowOffsetY = shadow.y * k;
+  }
+  c.fill(body);
+  if (shadow) {
+    c.shadowColor = "transparent";
+    c.shadowBlur = 0;
+    c.shadowOffsetX = 0;
+    c.shadowOffsetY = 0;
+  }
+  c.strokeStyle = st.focused ? d.tokens["focus"] : st.selected ? d.tokens["ink"] : ring;
+  c.lineWidth = st.selected || st.focused ? CANVAS_STYLE2.node.selectedStrokeWidth : d.metrics.nodeStroke;
+  c.stroke(body);
+  if (detailed && node.title) {
+    const px = ideaLabelPx(node, d);
+    const font = `${TYPE_STYLES3["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";
+    c.textBaseline = "middle";
+    if (d.comfort.readableType && "letterSpacing" in c) c.letterSpacing = `${(px * 0.02).toFixed(2)}px`;
+    const y0 = -((lines.length - 1) * lh) / 2;
+    for (let i = 0; i < lines.length; i++) c.fillText(lines[i], 0, y0 + i * lh);
+  }
+  if (base) c.globalAlpha = 1;
+  else c.restore();
+}
+function cubicLength(d) {
+  const v = d.match(/-?\d+(?:\.\d+)?/g)?.map(Number);
+  if (!v || v.length < 8) return 0;
+  const [x0, y0, x1, y1, x2, y2, x3, y3] = v;
+  let len = 0, px = x0, py = y0;
+  for (let i = 1; i <= 16; i++) {
+    const t = i / 16, u = 1 - t;
+    const x = u * u * u * x0 + 3 * u * u * t * x1 + 3 * u * t * t * x2 + t * t * t * x3;
+    const y = u * u * u * y0 + 3 * u * u * t * y1 + 3 * u * t * t * y2 + t * t * t * y3;
+    len += Math.hypot(x - px, y - py);
+    px = x;
+    py = y;
+  }
+  return len;
+}
+function prepareConnector(g) {
+  return { ...g, path: new Path2D(g.d), arrowPath: new Path2D(g.arrow), len: cubicLength(g.d) };
+}
+var CONNECTOR_MIN_SCREEN_PX = 3;
+var LABEL_MIN_SCREEN_PX = 6;
+function drawConnector(c, g, d, zoom, dashed, label, arrival) {
+  if (Math.hypot(g.b.x - g.a.x, g.b.y - g.a.y) * zoom < CONNECTOR_MIN_SCREEN_PX) return;
+  c.save();
+  if (arrival) c.globalAlpha = arrival.alpha;
+  c.strokeStyle = d.tokens["edge"];
+  c.lineWidth = d.metrics.edgeWidth;
+  c.lineCap = "round";
+  c.lineJoin = "round";
+  if (dashed) c.setLineDash([...CANVAS_STYLE2.edge.dash]);
+  else if (arrival && arrival.draw < 1) c.setLineDash([g.len * arrival.draw, g.len * 2]);
+  if (!(arrival && arrival.draw <= 1e-3)) c.stroke(g.path);
+  c.setLineDash([]);
+  c.stroke(g.arrowPath);
+  const labelPx = label ? d.edgeLabel.size * labelGrowth(zoom).connector : 0;
+  if (label && labelPx * zoom >= LABEL_MIN_SCREEN_PX) {
+    const px = labelPx;
+    c.font = `${d.edgeLabel.weight} ${px}px ${d.fontNote}`;
+    c.textAlign = "center";
+    c.textBaseline = "middle";
+    c.lineWidth = CANVAS_STYLE2.edge.labelHaloWidth;
+    c.strokeStyle = d.tokens["canvas"];
+    c.strokeText(label, g.mid.x, g.mid.y);
+    c.fillStyle = d.tokens["edge-label"];
+    c.fillText(label, g.mid.x, g.mid.y);
+  }
+  c.restore();
+}
+
+// src/components/useFrames.ts
+import { useEffect as useEffect4, useMemo, useRef as useRef4 } from "react";
+function useFrames(layerRef, busy) {
+  const raf = useRef4(null);
+  const busyRef = useRef4(busy);
+  busyRef.current = busy;
+  useEffect4(() => () => {
+    if (raf.current !== null) cancelAnimationFrame(raf.current);
+    raf.current = null;
+  }, []);
+  return useMemo(() => {
+    const tick = () => {
+      raf.current = null;
+      if (!busyRef.current()) return;
+      layerRef.current?.batchDraw();
+      raf.current = requestAnimationFrame(tick);
+    };
+    return {
+      run: () => {
+        layerRef.current?.batchDraw();
+        if (raf.current === null) raf.current = requestAnimationFrame(tick);
       }
-    )
-  ] });
-});
-var KonvaNode_default = KonvaNode;
+    };
+  }, [layerRef]);
+}
 
 // src/components/KonvaNodeLayer.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SPATIAL_INDEX_THRESHOLD = 200;
+function stageViewRect(stage) {
+  const s = stage.scaleX() || 1;
+  return { minX: -stage.x() / s, minY: -stage.y() / s, maxX: (stage.width() - stage.x()) / s, maxY: (stage.height() - stage.y()) / s };
+}
 function KonvaNodeLayer({
   nodes: propNodes,
-  isTransitioning = false,
   isDragging = false,
   hoveredNodeId = null,
-  pressedNodeId = null
+  pressedNodeId = null,
+  selectedNodeId = null,
+  focusedNodeId = null,
+  design = DEFAULT_DESIGN,
+  clock,
+  touch = false,
+  peekedNodeId = null
 }) {
   const layerRef = useRef5(null);
-  const zoomLevel = useViewportStore((s) => s.zoomLevel);
+  const fonts = useFontsEpoch();
   const storeNodes = useNodeStore((s) => s.nodes);
-  const allNodes = useMemo3(
-    () => propNodes ?? Array.from(storeNodes.values()),
-    [propNodes, storeNodes]
-  );
-  const visibleNodes = useViewportNodes(allNodes, void 0, isTransitioning, isDragging);
+  const nodes = useMemo2(() => propNodes ?? Array.from(storeNodes.values()), [propNodes, storeNodes]);
+  const index = useMemo2(() => {
+    if (nodes.length < SPATIAL_INDEX_THRESHOLD || isDragging) return null;
+    const idx = new RBushSpatialIndex();
+    idx.bulkLoad(nodes.map((n) => ({ nodeId: n.id, bounds: nodeBounds(n) })));
+    return idx;
+  }, [nodes, isDragging]);
+  const byId = useMemo2(() => index ? new Map(nodes.map((n) => [n.id, n])) : null, [index, nodes]);
+  const highlighted = hoveredNodeId ?? peekedNodeId ?? selectedNodeId;
+  const N = CANVAS_STYLE3.node;
+  const focusTheme = design.theme.startsWith("focus");
+  const dimOpacity = focusTheme ? touch ? N.dimmedOpacityFocusTouch : N.dimmedOpacityFocus : touch ? N.dimmedOpacityTouch : N.dimmedOpacity;
+  const dimOthers = highlighted !== null && dimOpacity !== 1;
+  const tweens = useRef5(new HoverTweens()).current;
+  const frames = useFrames(layerRef, () => clock?.active() || tweens.active());
+  useLayoutEffect(() => {
+    const raised = /* @__PURE__ */ new Set();
+    if (hoveredNodeId) raised.add(hoveredNodeId);
+    if (pressedNodeId) raised.add(pressedNodeId);
+    if (selectedNodeId) raised.add(selectedNodeId);
+    if (tweens.set(raised, design.comfort.reducedMotion || !layerBlooms(nodes.length))) frames.run();
+  }, [hoveredNodeId, pressedNodeId, selectedNodeId, design.comfort.reducedMotion, layerBlooms(nodes.length), tweens, frames]);
+  useLayoutEffect(() => clock?.subscribe(() => frames.run()), [clock, frames]);
   useLayoutEffect(() => {
     layerRef.current?.batchDraw();
-  }, [visibleNodes, hoveredNodeId, pressedNodeId, isDragging, zoomLevel]);
-  useEffect4(() => {
-    layerRef.current?.batchDraw();
-  }, [isTransitioning]);
-  return /* @__PURE__ */ jsx3(KLayer, { ref: layerRef, name: "nodes", children: visibleNodes.map((n) => /* @__PURE__ */ jsx3(
-    KonvaNode_default,
-    {
-      node: n,
-      zoomLevel,
-      isExternallyHovered: hoveredNodeId === n.id,
-      isExternallyPressed: pressedNodeId === n.id,
-      isDragging
-    },
-    n.id
-  )) });
-}
-
-// src/components/KonvaEdgeLayer.tsx
-import { useRef as useRef6, useLayoutEffect as useLayoutEffect2, useMemo as useMemo5 } from "react";
-
-// src/components/KonvaEdge.tsx
-import { useMemo as useMemo4, memo } from "react";
-import { NODE_HEIGHT as NODE_HEIGHT2 } from "@visualli/core";
-import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var getOutermostScaleUp = (branchCount) => {
-  const layerCount = Math.min(branchCount ?? 0, 3);
-  if (layerCount === 0) return 1;
-  const scaleUps = [1.3, 1.2, 1.1];
-  return scaleUps[scaleUps.length - layerCount];
-};
-function getEllipseIntersection(cx, cy, rx, ry, angle) {
-  return {
-    x: cx + rx * Math.cos(angle),
-    y: cy + ry * Math.sin(angle)
+  }, [nodes, index, design, fonts, hoveredNodeId, pressedNodeId, selectedNodeId, focusedNodeId, isDragging, touch, peekedNodeId]);
+  const sceneFunc = (ctx2, shape) => {
+    const stage = shape.getStage();
+    if (!stage) return;
+    const zoom = stage.scaleX() || 1;
+    const view = stageViewRect(stage);
+    let visible;
+    if (isDragging) visible = nodes;
+    else if (index && byId) visible = index.query(view).map((id) => byId.get(id)).filter(Boolean);
+    else visible = nodes.filter((n) => intersectsViewport(n, view));
+    const c = ctx2._context;
+    const m = c.getTransform();
+    const opt = { shadows: !isDragging && shadowsShown(visible.length), k: Math.hypot(m.a, m.b), base: m, dimOpacity };
+    const st = { ...IDLE };
+    const now = performance.now();
+    const arrival = { alpha: 1, scale: 1, dx: 0, dy: 0 };
+    const arriving = clock?.active(now) ?? false;
+    for (let i = 0; i < visible.length; i++) {
+      const n = visible[i];
+      st.hovered = n.id === hoveredNodeId;
+      st.pressed = n.id === pressedNodeId;
+      st.selected = n.id === selectedNodeId;
+      st.focused = n.id === focusedNodeId;
+      st.dimmed = dimOthers && n.id !== highlighted;
+      if (tweens.has(n.id)) {
+        const p = tweens.progress(n.id, now);
+        st.lift = p.lift;
+        st.ring = p.ring;
+      } else {
+        st.lift = void 0;
+        st.ring = void 0;
+      }
+      st.arrival = arriving && clock.node(n.id, n.x, n.y, now, arrival) ? arrival : null;
+      drawIdea(c, n, design, zoom, st, opt);
+    }
+    c.setTransform(m);
+    c.globalAlpha = 1;
   };
+  return /* @__PURE__ */ jsx2(KLayer, { ref: layerRef, name: "nodes", listening: false, children: /* @__PURE__ */ jsx2(KShape, { sceneFunc, listening: false, perfectDrawEnabled: false }) });
 }
-var EDGE_SPACING = 25;
-var STROKE_COLOR = "#000000";
-var STROKE_COLOR_DARK = "#ffffff";
-var STROKE_WIDTH = 2.5;
-var KonvaEdge = memo(function KonvaEdge2({
-  sourceNode: from,
-  targetNode: to,
-  connection,
-  isDark = false,
-  zoomLevel = 1
-}) {
-  const label = connection?.label;
-  const points = useMemo4(() => {
-    const fromBaseX = from.width / 2;
-    const fromBaseY = Math.max(NODE_HEIGHT2 * 1.6 / 2, fromBaseX * 0.74);
-    const fromScale = getOutermostScaleUp(from.branchCount);
-    const fromRadiusX = fromBaseX * fromScale;
-    const fromRadiusY = fromBaseY * fromScale;
-    const toBaseX = to.width / 2;
-    const toBaseY = Math.max(NODE_HEIGHT2 * 1.6 / 2, toBaseX * 0.74);
-    const toScale = getOutermostScaleUp(to.branchCount);
-    const toRadiusX = toBaseX * toScale;
-    const toRadiusY = toBaseY * toScale;
-    const angle = Math.atan2(to.y - from.y, to.x - from.x);
-    const fromEdge = getEllipseIntersection(from.x, from.y, fromRadiusX, fromRadiusY, angle);
-    const toEdge = getEllipseIntersection(to.x, to.y, toRadiusX, toRadiusY, angle + Math.PI);
-    const fromX = fromEdge.x + EDGE_SPACING * Math.cos(angle);
-    const fromY = fromEdge.y + EDGE_SPACING * Math.sin(angle);
-    const toX = toEdge.x - EDGE_SPACING * Math.cos(angle);
-    const toY = toEdge.y - EDGE_SPACING * Math.sin(angle);
-    const midX = (fromX + toX) / 2;
-    const midY = (fromY + toY) / 2;
-    const distance = Math.sqrt((toX - fromX) ** 2 + (toY - fromY) ** 2);
-    const arcHeight = Math.min(45, 45 / (1 + Math.max(0, (distance - 200) / 400)));
-    const perpX = -(toY - fromY) / distance;
-    const perpY = (toX - fromX) / distance;
-    const offsetMidX = midX + perpX * arcHeight;
-    const offsetMidY = midY + perpY * arcHeight;
-    const ctrl1X = fromX + (offsetMidX - fromX) * 0.66;
-    const ctrl1Y = fromY + (offsetMidY - fromY) * 0.66;
-    const ctrl2X = toX + (offsetMidX - toX) * 0.66;
-    const ctrl2Y = toY + (offsetMidY - toY) * 0.66;
-    const NUM_SEGMENTS = 20;
-    const pts = [];
-    for (let i = 0; i <= NUM_SEGMENTS; i++) {
-      const t = i / NUM_SEGMENTS;
-      const mt = 1 - t;
-      const mt2 = mt * mt;
-      const mt3 = mt2 * mt;
-      const t2 = t * t;
-      const t3 = t2 * t;
-      pts.push(
-        mt3 * fromX + 3 * mt2 * t * ctrl1X + 3 * mt * t2 * ctrl2X + t3 * toX,
-        mt3 * fromY + 3 * mt2 * t * ctrl1Y + 3 * mt * t2 * ctrl2Y + t3 * toY
-      );
-    }
-    return pts;
-  }, [from.x, from.y, from.width, from.branchCount, to.x, to.y, to.width, to.branchCount]);
-  const arrowHeadPoints = useMemo4(() => {
-    const len = points.length;
-    const tipX = points[len - 2];
-    const tipY = points[len - 1];
-    const prevX = points[len - 4];
-    const prevY = points[len - 3];
-    const angle = Math.atan2(tipY - prevY, tipX - prevX);
-    const armLength = 11;
-    const armAngle = Math.PI / 5.5;
-    return [
-      tipX - armLength * Math.cos(angle - armAngle),
-      tipY - armLength * Math.sin(angle - armAngle),
-      tipX,
-      tipY,
-      tipX - armLength * Math.cos(angle + armAngle),
-      tipY - armLength * Math.sin(angle + armAngle)
-    ];
-  }, [points]);
-  const { pathData, fontSize } = useMemo4(() => {
-    if (!label) return { pathData: null, fontSize: 12 };
-    const fromBaseX = from.width / 2;
-    const fromBaseY = Math.max(NODE_HEIGHT2 * 1.6 / 2, fromBaseX * 0.74);
-    const fromScale = getOutermostScaleUp(from.branchCount);
-    const fromRadiusX = fromBaseX * fromScale;
-    const fromRadiusY = fromBaseY * fromScale;
-    const toBaseX = to.width / 2;
-    const toBaseY = Math.max(NODE_HEIGHT2 * 1.6 / 2, toBaseX * 0.74);
-    const toScale = getOutermostScaleUp(to.branchCount);
-    const toRadiusX = toBaseX * toScale;
-    const toRadiusY = toBaseY * toScale;
-    const angle = Math.atan2(to.y - from.y, to.x - from.x);
-    const fromEdge = getEllipseIntersection(from.x, from.y, fromRadiusX, fromRadiusY, angle);
-    const toEdge = getEllipseIntersection(to.x, to.y, toRadiusX, toRadiusY, angle + Math.PI);
-    const fromX = fromEdge.x + EDGE_SPACING * Math.cos(angle);
-    const fromY = fromEdge.y + EDGE_SPACING * Math.sin(angle);
-    const toX = toEdge.x - EDGE_SPACING * Math.cos(angle);
-    const toY = toEdge.y - EDGE_SPACING * Math.sin(angle);
-    const midX = (fromX + toX) / 2;
-    const midY = (fromY + toY) / 2;
-    const distance = Math.sqrt((toX - fromX) ** 2 + (toY - fromY) ** 2);
-    const arcHeight = Math.min(45, 45 / (1 + Math.max(0, (distance - 200) / 400)));
-    const perpX = -(toY - fromY) / distance;
-    const perpY = (toX - fromX) / distance;
-    const offsetMidX = midX + perpX * arcHeight;
-    const offsetMidY = midY + perpY * arcHeight;
-    const ctrl1X = fromX + (offsetMidX - fromX) * 0.66;
-    const ctrl1Y = fromY + (offsetMidY - fromY) * 0.66;
-    const ctrl2X = toX + (offsetMidX - toX) * 0.66;
-    const ctrl2Y = toY + (offsetMidY - toY) * 0.66;
-    const TEXT_OFFSET = 15;
-    const fxo = fromX + perpX * TEXT_OFFSET;
-    const fyo = fromY + perpY * TEXT_OFFSET;
-    const txo = toX + perpX * TEXT_OFFSET;
-    const tyo = toY + perpY * TEXT_OFFSET;
-    const c1xo = ctrl1X + perpX * TEXT_OFFSET;
-    const c1yo = ctrl1Y + perpY * TEXT_OFFSET;
-    const c2xo = ctrl2X + perpX * TEXT_OFFSET;
-    const c2yo = ctrl2Y + perpY * TEXT_OFFSET;
-    const baseFontSize = 14;
-    const zoomFactor = Math.max(1, 1 / zoomLevel);
-    const scaledFontSize = Math.max(12, Math.min(24, baseFontSize * (from.width / 180) * zoomFactor));
-    let d = "";
-    if (fromX > toX) {
-      d = `M ${txo},${tyo} C ${c2xo},${c2yo} ${c1xo},${c1yo} ${fxo},${fyo}`;
-    } else {
-      d = `M ${fxo},${fyo} C ${c1xo},${c1yo} ${c2xo},${c2yo} ${txo},${tyo}`;
-    }
-    return { pathData: d, fontSize: scaledFontSize };
-  }, [from.x, from.y, from.width, from.branchCount, to.x, to.y, to.width, to.branchCount, label, zoomLevel]);
-  const strokeColor = isDark ? STROKE_COLOR_DARK : STROKE_COLOR;
-  return /* @__PURE__ */ jsxs2(KGroup, { children: [
-    /* @__PURE__ */ jsx4(
-      KLine,
-      {
-        points,
-        stroke: strokeColor,
-        strokeWidth: STROKE_WIDTH,
-        tension: 0,
-        opacity: 0.9,
-        lineCap: "round",
-        lineJoin: "round",
-        listening: false,
-        perfectDrawEnabled: false
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      KLine,
-      {
-        points: arrowHeadPoints,
-        stroke: strokeColor,
-        strokeWidth: STROKE_WIDTH,
-        lineCap: "round",
-        lineJoin: "round",
-        opacity: 0.9,
-        listening: false,
-        perfectDrawEnabled: false
-      }
-    ),
-    label && pathData && /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx4(
-        KTextPath,
-        {
-          data: pathData,
-          text: label,
-          fontSize,
-          fontFamily: "'Playpen Sans', cursive",
-          fontStyle: "normal",
-          fill: "#ffffff",
-          align: "center",
-          letterSpacing: 0.5,
-          listening: false,
-          opacity: 0.9
-        }
-      ),
-      /* @__PURE__ */ jsx4(
-        KTextPath,
-        {
-          data: pathData,
-          text: label,
-          fontSize,
-          fontFamily: "'Playpen Sans', cursive",
-          fontStyle: "normal",
-          fill: "#6b6860",
-          align: "center",
-          letterSpacing: 0.5,
-          listening: false,
-          opacity: 0.9
-        }
-      )
-    ] })
-  ] });
-});
-var KonvaEdge_default = KonvaEdge;
 
 // src/components/KonvaEdgeLayer.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function KonvaEdgeLayer({
-  nodes,
-  connections,
-  currentLevel,
-  isDark = false,
-  isDragging = false
-}) {
+import { useRef as useRef6, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3 } from "react";
+import { connectorGeometry } from "@visualli/core";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var key = (n) => `${n.x},${n.y},${n.width},${n.level},${n.branchCount ?? 0}`;
+var MARGIN = 80;
+function KonvaEdgeLayer({ connections, isDragging = false, design = DEFAULT_DESIGN, clock }) {
   const layerRef = useRef6(null);
-  const zoomLevel = useViewportStore((s) => s.zoomLevel);
+  const fonts = useFontsEpoch();
   const storeNodes = useNodeStore((s) => s.nodes);
-  const visibleNodes = useViewportNodes(nodes, currentLevel, false, isDragging);
-  const visibleSet = useMemo5(() => new Set(visibleNodes.map((n) => n.id)), [visibleNodes]);
+  const cache3 = useRef6(/* @__PURE__ */ new Map());
+  const edges = useMemo3(() => {
+    const out = [];
+    const seen = /* @__PURE__ */ new Set();
+    connections.forEach((conn, i) => {
+      const src = storeNodes.get(conn.from);
+      const tgt = storeNodes.get(conn.to);
+      if (!src || !tgt) return;
+      const id = `${conn.from}>${conn.to}#${i}`;
+      seen.add(id);
+      const k = `${key(src)}|${key(tgt)}`;
+      let hit = cache3.current.get(id);
+      if (!hit || hit.k !== k) {
+        hit = { k, g: prepareConnector(connectorGeometry(src, tgt, design.metrics.edgeGap)) };
+        cache3.current.set(id, hit);
+      }
+      out.push({ g: hit.g, dashed: conn.style === "dashed", label: conn.label });
+    });
+    for (const id of cache3.current.keys()) if (!seen.has(id)) cache3.current.delete(id);
+    return out;
+  }, [connections, storeNodes, design.metrics.edgeGap]);
+  const frames = useFrames(layerRef, () => clock?.active() ?? false);
+  useLayoutEffect2(() => clock?.subscribe(() => frames.run()), [clock, frames]);
   useLayoutEffect2(() => {
     layerRef.current?.batchDraw();
-  }, [connections, isDark, isDragging, visibleSet, storeNodes]);
-  return /* @__PURE__ */ jsx5(KLayer, { ref: layerRef, listening: false, children: connections.map((conn, idx) => {
-    const src = storeNodes.get(conn.from);
-    const tgt = storeNodes.get(conn.to);
-    if (!src || !tgt) return null;
-    if (!isDragging && !visibleSet.has(src.id) && !visibleSet.has(tgt.id)) return null;
-    return /* @__PURE__ */ jsx5(
-      KonvaEdge_default,
-      {
-        sourceNode: src,
-        targetNode: tgt,
-        connection: conn,
-        isDark,
-        zoomLevel
-      },
-      `${conn.from}-${conn.to}-${idx}`
-    );
-  }) });
+  }, [edges, design, fonts, isDragging]);
+  const sceneFunc = (ctx2, shape) => {
+    const stage = shape.getStage();
+    if (!stage) return;
+    const zoom = stage.scaleX() || 1;
+    const v = stageViewRect(stage);
+    const c = ctx2._context;
+    const now = performance.now();
+    const arriving = clock?.active(now) ?? false;
+    const arrival = { alpha: 1, draw: 1 };
+    for (let i = 0; i < edges.length; i++) {
+      const e = edges[i];
+      const { a, b, mid } = e.g;
+      const minX = Math.min(a.x, b.x, mid.x) - MARGIN, maxX = Math.max(a.x, b.x, mid.x) + MARGIN;
+      const minY = Math.min(a.y, b.y, mid.y) - MARGIN, maxY = Math.max(a.y, b.y, mid.y) + MARGIN;
+      if (maxX < v.minX || minX > v.maxX || maxY < v.minY || minY > v.maxY) continue;
+      drawConnector(c, e.g, design, zoom, e.dashed, e.label, arriving && clock.edge(i, e.dashed, now, arrival) ? arrival : null);
+    }
+  };
+  return /* @__PURE__ */ jsx3(KLayer, { ref: layerRef, listening: false, children: /* @__PURE__ */ jsx3(KShape, { sceneFunc, listening: false, perfectDrawEnabled: false }) });
 }
 
 // src/components/KonvaContainerLayer.tsx
-import { useRef as useRef7, useLayoutEffect as useLayoutEffect3 } from "react";
+import { useRef as useRef7, useLayoutEffect as useLayoutEffect3, useMemo as useMemo4 } from "react";
 
-// src/components/KonvaContainer.tsx
-import { memo as memo2, useMemo as useMemo6 } from "react";
-import { NODE_HEIGHT as NODE_HEIGHT4, TEXT_LABEL_HIDE_BELOW_ZOOM as TEXT_LABEL_HIDE_BELOW_ZOOM2 } from "@visualli/core";
-
-// src/config/textScaling.ts
-import { NODE_HEIGHT as NODE_HEIGHT3 } from "@visualli/core";
-var DESCRIPTION_TEXT_BASE_FONT_PX2 = 12;
-var CONTAINER_LABEL_BASE_FONT_PX2 = 24;
-var NODE_TEXT_SAFE_BLOB_FILL_RATIO = 0.88;
-function computeNodeTextWorldScale2(nodeWidth, zoomLevel) {
-  const safeZoom = Math.max(zoomLevel, 1e-4);
-  const baseWidth = 300;
-  const baseRadiusX = baseWidth / 2;
-  const baseRadiusY = Math.max(NODE_HEIGHT3 * 1.6 / 2, baseRadiusX * 0.74);
-  const textNaturalWidth = baseWidth - 40;
-  const textNaturalHeight = NODE_HEIGHT3 * 1.2;
-  const maxScaleX = baseRadiusX * 2 * NODE_TEXT_SAFE_BLOB_FILL_RATIO / Math.max(textNaturalWidth, 1);
-  const maxScaleY = baseRadiusY * 2 * NODE_TEXT_SAFE_BLOB_FILL_RATIO / Math.max(textNaturalHeight, 1);
-  const fitScale = Math.max(0.01, Math.min(maxScaleX, maxScaleY));
-  return Math.min(1 / safeZoom, fitScale);
-}
-function computeNodeTextScreenScale2(nodeWidth, zoomLevel) {
-  return computeNodeTextWorldScale2(nodeWidth, zoomLevel) * zoomLevel;
+// src/design/containers.ts
+import {
+  CANVAS_STYLE as CANVAS_STYLE4,
+  RINGS,
+  connectorGeometry as connectorGeometry2,
+  connectorSamples,
+  containerHull,
+  labelGrowth as labelGrowth2,
+  nodeRadii as nodeRadii2,
+  placeContainerLabel,
+  ringsFor as ringsFor2
+} from "@visualli/core";
+var PILL = CANVAS_STYLE4.group;
+var pillFont = (d, px) => `${PILL.labelWeight} ${px}px ${d.fontNote}`;
+var measureCtx = null;
+function measurer() {
+  if (!measureCtx && typeof document !== "undefined") measureCtx = document.createElement("canvas").getContext("2d");
+  return measureCtx;
 }
-
-// src/components/KonvaContainer.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var CONTAINER_PADDING = 50;
-var CONTAINER_DASH = [10, 5];
-var LABEL_BG = "#ddd9d0";
-var LABEL_BORDER_RADIUS = 20;
-var LABEL_FONT_SIZE = CONTAINER_LABEL_BASE_FONT_PX2;
-var LABEL_FONT_WEIGHT = "800";
-var LABEL_FONT_FAMILY = "'Playpen Sans', Quicksand, sans-serif";
-var LABEL_PAD_H = 20;
-var LABEL_PAD_V = 10;
-var LABEL_LINE_HEIGHT = 1.2;
-var MAX_BLOB_EXTENT_X = 1.275;
-var MAX_BLOB_EXTENT_Y = 1.234;
-var _labelCtx = null;
-function measureLabelBoxWidth(text, fontSize) {
-  if (!_labelCtx) {
-    const c = document.createElement("canvas");
-    _labelCtx = c.getContext("2d");
+function measurePill(text, d, k, c = measurer()) {
+  const px = PILL.labelSize * d.labelScale * k;
+  const padX = PILL.labelPadding.x, border = PILL.labelBorderWidth;
+  const room = PILL.labelMaxWidth - padX * 2 - border * 2;
+  let shown = text, tw = text.length * px * 0.5;
+  if (c) {
+    c.font = pillFont(d, px);
+    tw = c.measureText(text).width;
+    if (tw > room) {
+      let lo = 0, hi = text.length;
+      while (lo < hi) {
+        const mid = lo + hi + 1 >> 1;
+        if (c.measureText(text.slice(0, mid).trimEnd() + "\u2026").width <= room) lo = mid;
+        else hi = mid - 1;
+      }
+      shown = text.slice(0, lo).trimEnd() + "\u2026";
+      tw = c.measureText(shown).width;
+    }
   }
-  if (!_labelCtx) return Math.ceil(text.length * fontSize * 0.65 + 2 * LABEL_PAD_H);
-  _labelCtx.font = `${LABEL_FONT_WEIGHT} ${fontSize}px ${LABEL_FONT_FAMILY}`;
-  return Math.ceil(_labelCtx.measureText(text).width + 2 * LABEL_PAD_H);
+  return {
+    text: shown,
+    x: 0,
+    y: 0,
+    side: "bottom",
+    w: Math.min(PILL.labelMaxWidth, tw + padX * 2 + border * 2),
+    h: px * PILL.labelLineHeight + PILL.labelPadding.top + PILL.labelPadding.bottom + border * 2
+  };
 }
-function isLeftTurn(p1, p2, p3) {
-  return (p2.x - p1.x) * (p3.y - p1.y) - (p2.y - p1.y) * (p3.x - p1.x) > 0;
+function ideaBox(n) {
+  const { rx, ry } = nodeRadii2(n);
+  const rings = ringsFor2(n.branchCount);
+  const s = rings.length ? RINGS[rings.length - 1].scale : 1;
+  return { x0: n.x - rx * s, x1: n.x + rx * s, y0: n.y - ry * s, y1: n.y + ry * s };
 }
-function convexHull(points) {
-  if (points.length < 3) return points;
-  let start = 0;
-  for (let i = 1; i < points.length; i++) {
-    if (points[i].y < points[start].y || points[i].y === points[start].y && points[i].x < points[start].x) start = i;
-  }
-  const sorted = [...points];
-  const sp = sorted.splice(start, 1)[0];
-  sorted.sort((a, b) => {
-    const da = Math.atan2(a.y - sp.y, a.x - sp.x);
-    const db = Math.atan2(b.y - sp.y, b.x - sp.x);
-    if (da !== db) return da - db;
-    return Math.hypot(a.x - sp.x, a.y - sp.y) - Math.hypot(b.x - sp.x, b.y - sp.y);
+function layoutContainers(containers, nodes, connections, d) {
+  if (containers.length === 0) return [];
+  const ideas = [];
+  for (const n of nodes.values()) ideas.push(ideaBox(n));
+  const lines = connections.flatMap((c) => {
+    const a = nodes.get(c.from), b = nodes.get(c.to);
+    if (!a || !b) return [];
+    const g = connectorGeometry2(a, b, d.metrics.edgeGap);
+    return [connectorSamples(g.a, g.mid, g.b)];
   });
-  const hull = [sp, sorted[0]];
-  for (let i = 1; i < sorted.length; i++) {
-    while (hull.length > 1 && !isLeftTurn(hull[hull.length - 2], hull[hull.length - 1], sorted[i])) hull.pop();
-    hull.push(sorted[i]);
+  const placed = [];
+  const out = [];
+  for (const c of containers) {
+    const members = c.nodeIds.map((id) => nodes.get(id)).filter((n) => !!n);
+    const hull = containerHull(members.map((n) => ({ x: n.x, y: n.y, ...nodeRadii2(n) })));
+    if (!hull) continue;
+    let pill = null;
+    if (c.label) {
+      const size = measurePill(c.label, d, 1);
+      const at = placeContainerLabel(hull, size, { ideas, connectors: lines, labels: placed });
+      pill = { ...size, x: at.x, y: at.y, side: at.side };
+      placed.push({ x0: at.x - size.w / 2, x1: at.x + size.w / 2, y0: at.y - size.h / 2, y1: at.y + size.h / 2 });
+    }
+    out.push({ id: c.id, hull, pill });
   }
-  return hull;
+  return out;
 }
-function chaikinSmooth(pts, passes = 6) {
-  let cur = pts;
-  for (let iter = 0; iter < passes; iter++) {
-    const next = [];
-    const n = cur.length;
-    for (let i = 0; i < n; i++) {
-      const a = cur[i], b = cur[(i + 1) % n];
-      next.push({ x: 0.75 * a.x + 0.25 * b.x, y: 0.75 * a.y + 0.25 * b.y });
-      next.push({ x: 0.25 * a.x + 0.75 * b.x, y: 0.25 * a.y + 0.75 * b.y });
-    }
-    cur = next;
-  }
-  return cur.flatMap((p) => [p.x, p.y]);
-}
-function hullEdgeYAtX(points, targetX, isBottom) {
-  const n = points.length;
-  let result = isBottom ? -Infinity : Infinity;
-  for (let i = 0; i < n; i += 2) {
-    const x1 = points[i], y1 = points[i + 1];
-    const x2 = points[(i + 2) % n], y2 = points[(i + 3) % n];
-    if (x1 < targetX && x2 >= targetX || x2 < targetX && x1 >= targetX) {
-      const t = (targetX - x1) / (x2 - x1);
-      const y = y1 + t * (y2 - y1);
-      if (isBottom) result = Math.max(result, y);
-      else result = Math.min(result, y);
-    }
-  }
-  if (!isFinite(result)) {
-    for (let i = 1; i < n; i += 2) {
-      if (isBottom) result = Math.max(result, points[i]);
-      else result = Math.min(result, points[i]);
-    }
-  }
-  return result;
+function drawHull(c, h, d) {
+  c.save();
+  c.strokeStyle = d.tokens["line-strong"];
+  c.lineWidth = PILL.strokeWidth;
+  c.setLineDash([...PILL.dash]);
+  c.beginPath();
+  c.roundRect(h.x0, h.y0, h.x1 - h.x0, h.y1 - h.y0, h.radius);
+  c.stroke();
+  c.restore();
 }
-function calculateHull(containerNodes) {
-  if (containerNodes.length === 0) return null;
-  const NUM_SAMPLES = 48;
-  const samples = [];
-  for (const node of containerNodes) {
-    const baseRX = node.width / 2;
-    const baseRY = Math.max(NODE_HEIGHT4 * 1.6 / 2, baseRX * 0.74);
-    const halfW = baseRX * MAX_BLOB_EXTENT_X + CONTAINER_PADDING;
-    const halfH = baseRY * MAX_BLOB_EXTENT_Y + CONTAINER_PADDING;
-    for (let j = 0; j < NUM_SAMPLES; j++) {
-      const angle = j / NUM_SAMPLES * Math.PI * 2;
-      samples.push({ x: node.x + halfW * Math.cos(angle), y: node.y + halfH * Math.sin(angle) });
-    }
-  }
-  const hull = convexHull(samples);
-  const points = chaikinSmooth(hull, 6);
-  const xs = containerNodes.map((n) => n.x);
-  const ys = containerNodes.map((n) => n.y);
-  const spanX = Math.max(...xs) - Math.min(...xs);
-  const spanY = Math.max(...ys) - Math.min(...ys);
-  const useTopEdge = spanY > spanX * 2;
-  let hullMinX = Infinity, hullMaxX = -Infinity;
-  for (let i = 0; i < points.length; i += 2) {
-    if (points[i] < hullMinX) hullMinX = points[i];
-    if (points[i] > hullMaxX) hullMaxX = points[i];
-  }
-  const anchorX = (hullMinX + hullMaxX) / 2;
-  const anchorEdgeY = hullEdgeYAtX(points, anchorX, !useTopEdge);
-  return { points, anchorX, anchorEdgeY };
+function drawPill(c, p, d, zoom) {
+  const k = labelGrowth2(zoom).idea;
+  const size = k === 1 ? p : measurePill(p.text, d, k, c);
+  const contrast = d.theme.startsWith("contrast");
+  const bw = contrast ? PILL.contrastLabelBorderWidth : PILL.labelBorderWidth;
+  c.save();
+  c.beginPath();
+  c.roundRect(p.x - size.w / 2 + bw / 2, p.y - size.h / 2 + bw / 2, size.w - bw, size.h - bw, (size.h - bw) / 2);
+  c.fillStyle = d.tokens[PILL.labelFill];
+  c.fill();
+  c.lineWidth = bw;
+  c.strokeStyle = d.tokens[contrast ? PILL.contrastLabelBorder : PILL.labelBorder];
+  c.stroke();
+  c.font = pillFont(d, PILL.labelSize * d.labelScale * k);
+  c.fillStyle = d.tokens[PILL.labelInk];
+  c.textAlign = "center";
+  c.textBaseline = "middle";
+  c.fillText(size.text, p.x, p.y + (PILL.labelPadding.top - PILL.labelPadding.bottom) / 2);
+  c.restore();
 }
-var KonvaContainer = memo2(function KonvaContainer2({
-  nodes,
-  label = ""
-}) {
-  const zoomLevel = useViewportStore((s) => s.zoomLevel);
-  const hullData = useMemo6(() => calculateHull(nodes), [nodes]);
-  if (!hullData) return null;
-  const refNode = nodes[0];
-  const screenScale = refNode ? computeNodeTextScreenScale2(refNode.width, zoomLevel) : 1;
-  const labelFontSize = LABEL_FONT_SIZE * screenScale;
-  const labelBoxHeight = Math.ceil(labelFontSize * LABEL_LINE_HEIGHT + 2 * LABEL_PAD_V);
-  const boxWidth = label ? measureLabelBoxWidth(label, labelFontSize) : 0;
-  const boxX = hullData.anchorX - boxWidth / 2;
-  const boxY = hullData.anchorEdgeY - labelBoxHeight / 2;
-  return /* @__PURE__ */ jsxs3(KGroup, { listening: false, children: [
-    /* @__PURE__ */ jsx6(
-      KLine,
-      {
-        points: hullData.points,
-        stroke: "#747270",
-        strokeWidth: 1,
-        dash: CONTAINER_DASH,
-        closed: true,
-        tension: 0,
-        listening: false,
-        perfectDrawEnabled: false
-      }
-    ),
-    label.length > 0 && /* @__PURE__ */ jsxs3(
-      KGroup,
-      {
-        x: boxX + boxWidth / 2,
-        y: boxY + labelBoxHeight / 2,
-        offsetX: boxWidth / 2,
-        offsetY: labelBoxHeight / 2,
-        scaleX: 1 / zoomLevel,
-        scaleY: 1 / zoomLevel,
-        visible: zoomLevel >= TEXT_LABEL_HIDE_BELOW_ZOOM2,
-        listening: false,
-        children: [
-          /* @__PURE__ */ jsx6(
-            KRect,
-            {
-              width: boxWidth,
-              height: labelBoxHeight,
-              fill: LABEL_BG,
-              cornerRadius: LABEL_BORDER_RADIUS,
-              shadowEnabled: false,
-              perfectDrawEnabled: false
-            }
-          ),
-          /* @__PURE__ */ jsx6(
-            KText,
-            {
-              x: LABEL_PAD_H,
-              y: LABEL_PAD_V,
-              width: boxWidth - 2 * LABEL_PAD_H,
-              height: labelBoxHeight - 2 * LABEL_PAD_V,
-              text: label,
-              fontSize: labelFontSize,
-              fontFamily: LABEL_FONT_FAMILY,
-              fontStyle: LABEL_FONT_WEIGHT,
-              fill: "rgba(0,0,0,1)",
-              align: "center",
-              verticalAlign: "middle",
-              lineHeight: LABEL_LINE_HEIGHT,
-              perfectDrawEnabled: false,
-              listening: false
-            }
-          )
-        ]
-      }
-    )
-  ] });
-});
-var KonvaContainer_default = KonvaContainer;
 
 // src/components/KonvaContainerLayer.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function KonvaContainerLayer({ nodes, containers, isDark = false }) {
-  const layerRef = useRef7(null);
+import { jsx as jsx4 } from "react/jsx-runtime";
+function useContainerLayout(containers, connections = [], design = DEFAULT_DESIGN) {
+  const fonts = useFontsEpoch();
   const storeNodes = useNodeStore((s) => s.nodes);
+  return useMemo4(
+    () => layoutContainers(containers, storeNodes, connections, design),
+    // fonts: the names are measured, so measure again once the web fonts are in.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [containers, connections, storeNodes, design, fonts]
+  );
+}
+function KonvaContainerLayer({ containers, connections = [], design = DEFAULT_DESIGN }) {
+  const layerRef = useRef7(null);
+  const placed = useContainerLayout(containers, connections, design);
   useLayoutEffect3(() => {
     layerRef.current?.batchDraw();
-  }, [containers, isDark, storeNodes]);
+  }, [placed, design]);
   if (containers.length === 0) return null;
-  return /* @__PURE__ */ jsx7(KLayer, { ref: layerRef, listening: false, children: containers.map((c) => {
-    const groupNodes = c.nodeIds.map((id) => storeNodes.get(id)).filter((n) => !!n);
-    if (groupNodes.length === 0) return null;
-    return /* @__PURE__ */ jsx7(
-      KonvaContainer_default,
-      {
-        nodes: groupNodes,
-        label: c.label,
-        isDark
-      },
-      c.id
-    );
-  }) });
+  return /* @__PURE__ */ jsx4(KLayer, { ref: layerRef, listening: false, children: /* @__PURE__ */ jsx4(
+    KShape,
+    {
+      listening: false,
+      perfectDrawEnabled: false,
+      sceneFunc: (ctx2) => {
+        for (const p of placed) drawHull(ctx2._context, p.hull, design);
+      }
+    }
+  ) });
 }
 
-// src/components/NavigationStack.tsx
-import { memo as memo3, useState as useState2 } from "react";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-var PASTEL_FILLS = [
-  "#b6eea7",
-  "#d5bcfe",
-  "#a1c4fc",
-  "#a6f5d8",
-  "#ffc9de",
-  "#c4e8ff",
-  "#f0c4ff",
-  "#ffe0a3"
-];
-var ORGANIC_PATHS_SMALL = [
-  "M13.72,6.31 C15.12,6.29 17.96,8.57 17.99,10.60 C18.07,14.62 16.72,17.90 11.12,18.00 C7.26,18.07 4.07,14.86 4.00,10.85 C3.93,6.83 9.44,2.02 13.69,4.85",
-  "M13.88,6.41 C15.28,6.43 18.04,8.82 18.00,10.85 C17.93,14.86 16.48,18.10 10.88,18.00 C7.02,17.93 3.94,14.62 4.01,10.60 C4.08,6.59 9.76,1.97 13.91,4.95"
-];
-var ORGANIC_PATH_ACTIVE = "M16.55,9.22 C17.95,9.15 20.87,11.33 20.97,13.36 C21.19,17.37 19.96,20.70 14.37,20.99 C10.51,21.19 7.20,18.10 7.00,14.09 C6.78,10.08 12.13,5.08 16.48,7.77";
-var CIRCLE_SIZE = 14;
-function hexToRgba(hex, opacity) {
-  const h = hex.replace("#", "");
-  const r = parseInt(h.substring(0, 2), 16);
-  const g = parseInt(h.substring(2, 4), 16);
-  const b = parseInt(h.substring(4, 6), 16);
-  return `rgba(${r},${g},${b},${opacity})`;
+// src/components/KonvaContainerLabelLayer.tsx
+import { useRef as useRef8, useLayoutEffect as useLayoutEffect4 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function KonvaContainerLabelLayer({ containers, connections = [], design = DEFAULT_DESIGN }) {
+  const layerRef = useRef8(null);
+  const placed = useContainerLayout(containers, connections, design);
+  useLayoutEffect4(() => {
+    layerRef.current?.batchDraw();
+  }, [placed, design]);
+  if (!placed.some((p) => p.pill)) return null;
+  return /* @__PURE__ */ jsx5(KLayer, { ref: layerRef, listening: false, children: /* @__PURE__ */ jsx5(
+    KShape,
+    {
+      listening: false,
+      perfectDrawEnabled: false,
+      sceneFunc: (ctx2, shape) => {
+        const zoom = shape.getStage()?.scaleX() || 1;
+        for (const p of placed) if (p.pill) drawPill(ctx2._context, p.pill, design, zoom);
+      }
+    }
+  ) });
 }
-var OrganicCircle = memo3(function OrganicCircle2({
-  size,
-  fill,
-  stroke,
-  strokeWidth,
-  variant,
-  isActive
-}) {
-  const path = isActive ? ORGANIC_PATH_ACTIVE : ORGANIC_PATHS_SMALL[variant % ORGANIC_PATHS_SMALL.length];
-  const vb = isActive ? "4 3 20 20" : "2 1 18 18";
-  const vbSz = isActive ? 20 : 18;
-  const sw = strokeWidth * vbSz / size;
-  return /* @__PURE__ */ jsxs4("svg", { width: size, height: size, viewBox: vb, fill: "none", style: { display: "block" }, children: [
-    /* @__PURE__ */ jsx8("path", { d: path, fill, fillOpacity: 1 }),
-    /* @__PURE__ */ jsx8("path", { d: path, fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round" })
+
+// src/components/NavigationStack.tsx
+import { memo as memo2, useMemo as useMemo6 } from "react";
+
+// src/components/Overlays.tsx
+import React6, { memo, useCallback as useCallback3, useEffect as useEffect5, useLayoutEffect as useLayoutEffect5, useMemo as useMemo5, useRef as useRef9, useState as useState2 } from "react";
+import { SHEET, TERM, TRAIL, VIEW, blobPath as blobPath2, hoverOpensTerm, shapeOfLevel as shapeOfLevel2 } from "@visualli/core";
+import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
+var Icon = ({ children, size = 20 }) => /* @__PURE__ */ jsx6("svg", { className: "vi-icon", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children });
+var MinusIcon = () => /* @__PURE__ */ jsx6(Icon, { children: /* @__PURE__ */ jsx6("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) });
+var PlusIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [
+  /* @__PURE__ */ jsx6("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+  /* @__PURE__ */ jsx6("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+] });
+var FitIcon = () => /* @__PURE__ */ jsxs(Icon, { children: [
+  /* @__PURE__ */ jsx6("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
+  /* @__PURE__ */ jsx6("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
+  /* @__PURE__ */ jsx6("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
+  /* @__PURE__ */ jsx6("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
+] });
+var ChevronLeftIcon = () => /* @__PURE__ */ jsx6(Icon, { size: 14, children: /* @__PURE__ */ jsx6("polyline", { points: "15 6 9 12 15 18" }) });
+var ChevronIcon = () => /* @__PURE__ */ jsx6(Icon, { size: 14, children: /* @__PURE__ */ jsx6("polyline", { points: "9 6 15 12 9 18" }) });
+var ExternalIcon = () => /* @__PURE__ */ jsxs(Icon, { size: 14, children: [
+  /* @__PURE__ */ jsx6("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+  /* @__PURE__ */ jsx6("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ jsx6("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+] });
+var HomeIcon = () => /* @__PURE__ */ jsxs(Icon, { size: TRAIL.homeIconSize, children: [
+  /* @__PURE__ */ jsx6("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+  /* @__PURE__ */ jsx6("polyline", { points: "9 22 9 12 15 12 15 22" })
+] });
+var CloseIcon = () => /* @__PURE__ */ jsxs(Icon, { size: 18, children: [
+  /* @__PURE__ */ jsx6("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+  /* @__PURE__ */ jsx6("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+] });
+var ZoomControls = memo(function ZoomControls2({ onFit, touch = false }) {
+  const size = touch ? "vi-iconbtn--md" : "vi-iconbtn--sm";
+  const zoom = useViewportStore((s) => s.zoomLevel);
+  const setZoom = useViewportStore((s) => s.setZoom);
+  const fitted = useViewportStore((s) => Math.abs(s.zoomLevel - s.fitScale) < 1e-6 && Math.abs(s.centerX - s.fitCenterX) < 0.5 && Math.abs(s.centerY - s.fitCenterY) < 0.5);
+  const fit = useViewportStore((s) => s.fitScale);
+  const zoomIn = useCallback3(() => setZoom(zoom * VIEW.zoomStep), [zoom, setZoom]);
+  const zoomOut = useCallback3(() => setZoom(zoom / VIEW.zoomStep), [zoom, setZoom]);
+  return /* @__PURE__ */ jsxs("div", { className: "vi-ctrls", role: "toolbar", "aria-label": "Canvas", "data-help": "zoom-controls", children: [
+    /* @__PURE__ */ jsx6("button", { type: "button", className: `vi-iconbtn ${size}`, "aria-label": "Zoom out", onClick: zoomOut, children: /* @__PURE__ */ jsx6(MinusIcon, {}) }),
+    /* @__PURE__ */ jsxs("span", { className: "vi-ctrls__pct", "aria-live": "polite", children: [
+      Math.round(zoom / fit * 100),
+      "%"
+    ] }),
+    /* @__PURE__ */ jsx6("button", { type: "button", className: `vi-iconbtn ${size}`, "aria-label": "Zoom in", onClick: zoomIn, children: /* @__PURE__ */ jsx6(PlusIcon, {}) }),
+    onFit && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx6("span", { className: "vi-ctrls__div", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx6("button", { type: "button", className: `vi-iconbtn ${size}`, "aria-label": "Fit map to view", disabled: fitted, onClick: onFit, children: /* @__PURE__ */ jsx6(FitIcon, {}) })
+    ] })
   ] });
 });
-var NavigationStack = memo3(function NavigationStack2({
-  stack,
-  onNavigateBack,
-  isDark = false,
-  top = "16px",
-  left = "16px"
-}) {
-  const [hoveredIndex, setHoveredIndex] = useState2(null);
+function paintVars(p) {
+  if (p.custom) return { fill: p.custom.fill, ring: p.custom.ring ?? "var(--edge)" };
+  const t = p.topic ?? TRAIL.rootTopic;
+  return { fill: `var(--topic-${t})`, ring: `var(--topic-${t}-ring)` };
+}
+var TrailDot = ({ level, paint, current }) => {
+  const { fill, ring } = paintVars(paint);
+  return /* @__PURE__ */ jsx6("svg", { width: TRAIL.dotBox, height: TRAIL.dotBox, viewBox: `${-TRAIL.dotBox / 2} ${-TRAIL.dotBox / 2} ${TRAIL.dotBox} ${TRAIL.dotBox}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx6("path", { d: blobPath2(shapeOfLevel2(level), TRAIL.dotRadius, TRAIL.dotRadius), fill, stroke: ring, strokeWidth: current ? TRAIL.currentStroke : TRAIL.stroke }) });
+};
+var DepthTrail = memo(function DepthTrail2({ stack, onNavigateBack }) {
   if (stack.length === 0) return null;
-  const visitedStroke = isDark ? "#908e8c" : "#747270";
-  const visitedText = isDark ? "#908e8c" : "#747270";
-  const activeStroke = isDark ? "#e8e6e4" : "#1a1a18";
-  const activeText = isDark ? "#e8e6e4" : "#1a1a18";
-  const connectorColor = isDark ? "#908e8c" : "#747270";
-  const connectorMarginLeft = 10.5;
-  const currentIndex = stack.length - 1;
-  return /* @__PURE__ */ jsx8(
-    "div",
+  const current = stack.length - 1;
+  const iconOnly = TRAIL.rootLabel === "icon";
+  return /* @__PURE__ */ jsx6("nav", { className: "vi-trail", "aria-label": "Depth trail", "data-help": "navigation-stack", children: /* @__PURE__ */ jsx6("ol", { children: stack.map((e, i) => /* @__PURE__ */ jsx6("li", { className: i === current ? "is-current" : void 0, children: /* @__PURE__ */ jsxs(
+    "button",
     {
-      "data-help": "navigation-stack",
-      style: {
-        position: "absolute",
-        top,
-        left,
-        zIndex: 30,
-        pointerEvents: "auto"
-      },
-      children: /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexDirection: "column", padding: "8px" }, children: stack.flatMap((entry, index) => {
-        const isCurrent = index === currentIndex;
-        const isClickable = index < currentIndex;
-        const isHovered = hoveredIndex === index;
-        const pastelFill = PASTEL_FILLS[index % PASTEL_FILLS.length];
-        const rowBg = isCurrent ? hexToRgba(pastelFill, 0.6) : isHovered && isClickable ? hexToRgba(pastelFill, 0.3) : "transparent";
-        const items = [];
-        if (index > 0) {
-          items.push(
-            /* @__PURE__ */ jsx8(
-              "div",
-              {
-                style: {
-                  width: "1px",
-                  height: "20px",
-                  marginLeft: `${connectorMarginLeft}px`,
-                  marginTop: "-6px",
-                  marginBottom: "-6px",
-                  background: connectorColor,
-                  alignSelf: "flex-start",
-                  flexShrink: 0,
-                  position: "relative",
-                  zIndex: 1
-                }
-              },
-              `conn-${index}`
-            )
-          );
-        }
-        items.push(
-          /* @__PURE__ */ jsxs4(
-            "div",
-            {
-              style: {
-                position: "relative",
-                zIndex: 2,
-                alignSelf: "flex-start",
-                display: "flex",
-                alignItems: "center",
-                gap: "4px",
-                height: "22px",
-                padding: "4px",
-                borderRadius: "8px",
-                cursor: isClickable ? "pointer" : "default",
-                background: rowBg,
-                transition: "background 0.15s"
-              },
-              onMouseEnter: () => setHoveredIndex(index),
-              onMouseLeave: () => setHoveredIndex(null),
-              onClick: (e) => {
-                e.stopPropagation();
-                if (isClickable) onNavigateBack(index);
-              },
-              children: [
-                /* @__PURE__ */ jsx8("div", { style: { width: CIRCLE_SIZE, height: CIRCLE_SIZE, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, zIndex: 4 }, children: isCurrent ? /* @__PURE__ */ jsx8(OrganicCircle, { size: CIRCLE_SIZE, fill: pastelFill, stroke: activeStroke, strokeWidth: 1.5, variant: index, isActive: true }) : /* @__PURE__ */ jsx8(OrganicCircle, { size: CIRCLE_SIZE, fill: pastelFill, stroke: visitedStroke, strokeWidth: 1, variant: index }) }),
-                /* @__PURE__ */ jsx8(
-                  "span",
-                  {
-                    style: {
-                      fontFamily: "'Nunito', sans-serif",
-                      fontSize: isCurrent || isHovered && isClickable ? "11px" : "9px",
-                      fontWeight: isCurrent ? 600 : 400,
-                      color: isCurrent ? activeText : visitedText,
-                      lineHeight: 1,
-                      whiteSpace: "nowrap",
-                      transition: "color 0.15s, font-size 0.15s"
-                    },
-                    children: entry.label
-                  }
-                )
-              ]
-            },
-            `${entry.layerId}-${index}`
-          )
-        );
-        return items;
-      }) })
+      type: "button",
+      disabled: i === current,
+      "aria-current": i === current ? "location" : void 0,
+      onClick: () => onNavigateBack(i),
+      ...i === 0 && iconOnly ? { "aria-label": e.label, title: e.label } : {},
+      children: [
+        /* @__PURE__ */ jsx6(TrailDot, { level: e.level, paint: e.paint, current: i === current }),
+        /* @__PURE__ */ jsx6("span", { children: i === 0 ? iconOnly ? /* @__PURE__ */ jsx6(HomeIcon, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx6(HomeIcon, {}),
+          " ",
+          e.label
+        ] }) : e.label })
+      ]
     }
-  );
+  ) }, `${e.layerId}-${i}`)) }) });
 });
-var NavigationStack_default = NavigationStack;
-
-// src/components/ZoomControls.tsx
-import { useCallback as useCallback3, memo as memo4 } from "react";
-import { ZOOM_MIN, ZOOM_MAX } from "@visualli/core";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-var ZoomInIcon = () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx9("circle", { cx: "11", cy: "11", r: "8" }),
-  /* @__PURE__ */ jsx9("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
-  /* @__PURE__ */ jsx9("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
-  /* @__PURE__ */ jsx9("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
-] });
-var ZoomOutIcon = () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx9("circle", { cx: "11", cy: "11", r: "8" }),
-  /* @__PURE__ */ jsx9("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
-  /* @__PURE__ */ jsx9("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+var escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function splitTerms(text, anchors) {
+  const words = anchors.filter((a) => a.word).sort((a, b) => b.word.length - a.word.length);
+  if (!words.length) return [text];
+  const re = new RegExp(`(${words.map((a) => escapeRe(a.word)).join("|")})`, "giu");
+  const byWord = new Map(words.map((a) => [a.word.toLowerCase(), a]));
+  const isWordChar = (ch) => !!ch && /[\p{L}\p{N}]/u.test(ch);
+  const out = [];
+  let last = 0;
+  for (const m of text.matchAll(re)) {
+    const start = m.index, end = start + m[0].length;
+    if (isWordChar(text[start - 1]) || isWordChar(text[end])) continue;
+    if (start > last) out.push(text.slice(last, start));
+    out.push({ ...byWord.get(m[0].toLowerCase()), word: m[0] });
+    last = end;
+  }
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+}
+var TermCard = ({ anchor, inSheet = false }) => /* @__PURE__ */ jsxs("span", { className: `vi-anchor-card${inSheet ? " is-in-sheet" : ""}`, role: "note", children: [
+  /* @__PURE__ */ jsx6("span", { className: "vi-anchor-card__eyebrow", children: "Term" }),
+  /* @__PURE__ */ jsx6("span", { className: "vi-anchor-card__word", style: { display: "block" }, children: anchor.word }),
+  /* @__PURE__ */ jsx6("p", { className: "vi-anchor-card__desc", children: anchor.description }),
+  anchor.knowMoreUrl && /* @__PURE__ */ jsx6("span", { className: "vi-anchor-card__acts", children: /* @__PURE__ */ jsxs("a", { className: "vi-fact__link", href: anchor.knowMoreUrl, target: "_blank", rel: "noopener noreferrer", children: [
+    TERM.learnMoreLabel,
+    " ",
+    /* @__PURE__ */ jsx6(ExternalIcon, {})
+  ] }) })
 ] });
-var ZoomControls = memo4(function ZoomControls2({ isDark = false }) {
-  const zoomLevel = useViewportStore((s) => s.zoomLevel);
-  const setZoom = useViewportStore((s) => s.setZoom);
-  const handleZoomIn = useCallback3(() => setZoom(Math.min(ZOOM_MAX, zoomLevel * 1.2)), [zoomLevel, setZoom]);
-  const handleZoomOut = useCallback3(() => setZoom(Math.max(ZOOM_MIN, zoomLevel / 1.2)), [zoomLevel, setZoom]);
-  const surfaceBg = isDark ? "var(--bg-surface, #1C1C1A)" : "var(--bg-surface, #FAF8F4)";
-  const border = isDark ? "var(--border-color, #333330)" : "var(--border-color, #DDD9D0)";
-  const primary = isDark ? "var(--text-primary, #F0EDE6)" : "var(--text-primary, #1A1A18)";
-  const muted = isDark ? "var(--text-muted, #8E8C88)" : "var(--text-muted, #747270)";
-  return /* @__PURE__ */ jsxs5(
-    "div",
+function TermAnchor({ anchor }) {
+  const [open, setOpen] = useState2(false);
+  const [shift, setShift] = useState2(0);
+  const pinned = useRef9(false);
+  const timer = useRef9(void 0);
+  const wrap = useRef9(null), btn = useRef9(null), card = useRef9(null);
+  const show = (pin) => {
+    clearTimeout(timer.current);
+    if (pin) pinned.current = true;
+    setOpen(true);
+  };
+  const hide = () => {
+    clearTimeout(timer.current);
+    pinned.current = false;
+    setOpen(false);
+  };
+  useEffect5(() => () => clearTimeout(timer.current), []);
+  useLayoutEffect5(() => {
+    if (!open || !card.current) {
+      setShift(0);
+      return;
+    }
+    const r = card.current.getBoundingClientRect(), vw = document.documentElement.clientWidth, m = TERM.viewportMargin;
+    setShift(r.right > vw - m ? vw - m - r.right : r.left < m ? m - r.left : 0);
+  }, [open]);
+  useEffect5(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        hide();
+        btn.current?.focus();
+      }
+    };
+    const onPress = (e) => {
+      if (!wrap.current?.contains(e.target)) hide();
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onPress, true);
+    return () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onPress, true);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs(
+    "span",
     {
-      style: {
-        position: "relative",
-        background: surfaceBg,
-        border: `0.5px solid ${border}`,
-        borderRadius: "8px",
-        overflow: "hidden",
-        width: "65px",
-        height: "32px",
-        flexShrink: 0
+      ref: wrap,
+      className: `vi-anchor${open ? " is-open" : ""}`,
+      "data-semantic-tooltip": "true",
+      onPointerEnter: (e) => {
+        if (!hoverOpensTerm(e.pointerType)) return;
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(true), TERM.hoverOpen);
       },
-      role: "group",
-      "aria-label": "Zoom controls",
-      children: [
-        /* @__PURE__ */ jsx9(
-          "button",
-          {
-            onClick: handleZoomIn,
-            disabled: zoomLevel >= ZOOM_MAX,
-            style: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "32px",
-              height: "100%",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              border: "none",
-              background: "transparent",
-              cursor: zoomLevel >= ZOOM_MAX ? "not-allowed" : "pointer",
-              color: zoomLevel >= ZOOM_MAX ? muted : primary,
-              transition: "background 0.15s"
-            },
-            onMouseEnter: (e) => {
-              if (zoomLevel < ZOOM_MAX) e.currentTarget.style.background = isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.background = "transparent";
-            },
-            "aria-label": "Zoom in",
-            children: /* @__PURE__ */ jsx9(ZoomInIcon, {})
-          }
-        ),
-        /* @__PURE__ */ jsx9("div", { style: { position: "absolute", top: 0, bottom: 0, left: "32px", width: "0.5px", background: border } }),
-        /* @__PURE__ */ jsx9(
+      onPointerLeave: (e) => {
+        if (!hoverOpensTerm(e.pointerType) || pinned.current) return;
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(false), TERM.hoverClose);
+      },
+      onBlur: (e) => {
+        if (!wrap.current?.contains(e.relatedTarget)) hide();
+      },
+      children: [
+        /* @__PURE__ */ jsx6(
           "button",
           {
-            onClick: handleZoomOut,
-            disabled: zoomLevel <= ZOOM_MIN,
-            style: {
-              position: "absolute",
-              top: 0,
-              right: 0,
-              width: "33px",
-              height: "100%",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              border: "none",
-              background: "transparent",
-              cursor: zoomLevel <= ZOOM_MIN ? "not-allowed" : "pointer",
-              color: zoomLevel <= ZOOM_MIN ? muted : primary,
-              transition: "background 0.15s"
-            },
-            onMouseEnter: (e) => {
-              if (zoomLevel > ZOOM_MIN) e.currentTarget.style.background = isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.background = "transparent";
+            ref: btn,
+            type: "button",
+            className: "vi-term",
+            "aria-expanded": open,
+            onClick: () => {
+              if (open && pinned.current) {
+                hide();
+                return;
+              }
+              show(true);
+              setTimeout(() => card.current?.querySelector("a, button")?.focus(), 0);
             },
-            "aria-label": "Zoom out",
-            children: /* @__PURE__ */ jsx9(ZoomOutIcon, {})
+            children: anchor.word
           }
-        )
+        ),
+        open && /* @__PURE__ */ jsx6("span", { ref: card, className: "vi-anchor__pop", style: shift ? { transform: `translateX(${shift}px)` } : void 0, children: /* @__PURE__ */ jsx6(TermCard, { anchor }) })
       ]
     }
   );
+}
+var PeekCard = memo(function PeekCard2({ node, anchors, onStepInside, onClose, renderContent }) {
+  const parts = useMemo5(() => splitTerms(node.description ?? "", anchors), [node.description, anchors]);
+  const { fill, ring } = paintVars(node);
+  const style = { ["--vi-fact-fill"]: fill, ["--vi-fact-ring"]: ring };
+  return /* @__PURE__ */ jsxs("div", { className: "vi-fact vi-peek", style, role: "dialog", "aria-label": node.title, "data-node-tooltip": "true", children: [
+    /* @__PURE__ */ jsxs("div", { className: "vi-fact__head", children: [
+      /* @__PURE__ */ jsx6("div", { className: "vi-fact__title", children: node.title }),
+      onClose && /* @__PURE__ */ jsx6("button", { type: "button", className: "vi-iconbtn vi-iconbtn--sm vi-fact__close", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx6(CloseIcon, {}) })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "vi-fact__body", children: renderContent ? renderContent(node.description ?? "") : parts.map((p, i) => typeof p === "string" ? /* @__PURE__ */ jsx6(React6.Fragment, { children: p }, i) : /* @__PURE__ */ jsx6(TermAnchor, { anchor: p }, i)) }),
+    onStepInside && /* @__PURE__ */ jsxs("div", { className: "vi-fact__foot", children: [
+      /* @__PURE__ */ jsx6("span", {}),
+      /* @__PURE__ */ jsx6("div", { className: "vi-fact__acts", children: /* @__PURE__ */ jsxs("button", { type: "button", className: "vi-fact__step", onClick: onStepInside, children: [
+        "Step inside ",
+        /* @__PURE__ */ jsx6(ChevronIcon, {})
+      ] }) })
+    ] })
+  ] });
 });
-var ZoomControls_default = ZoomControls;
-
-// src/components/SketchyBoxKonva.tsx
-import { useEffect as useEffect5, useRef as useRef8 } from "react";
-import Konva from "konva";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var BACK_PATH = "M0.653,0 L485.653,1 C485.653,1,484.782,152.773,486.653,165 C413.653,171,14.653,178,5.653,168C2.653,158,0.653,0,0.653,0";
-var FRONT_PATH = "M485,167.524 L0,166.524C0,166.524,1.870,8.751,0,0C73,0,479,0,487,8C490,18,485,167.524,485,167.524";
-var BACK_W = 486;
-var BACK_H = 178;
-var FRONT_W = 490;
-var FRONT_H = 168;
-var BACK_OFFSET_Y = 8;
-var FRONT_OFFSET_X = 5.65;
-var SHADOW_PAD = 12;
-var SketchyBoxKonva = ({
-  children,
-  fill,
-  stroke,
-  backStroke,
-  padding = "1rem 1.25rem"
-}) => {
-  const wrapperRef = useRef8(null);
-  const konvaContainerRef = useRef8(null);
-  const stageRef = useRef8(null);
-  useEffect5(() => {
-    const wrapper = wrapperRef.current;
-    const konvaEl = konvaContainerRef.current;
-    if (!wrapper || !konvaEl) return;
-    function draw(W, H) {
-      if (!konvaEl || W <= 0 || H <= 0) return;
-      if (stageRef.current) {
-        stageRef.current.destroy();
-        stageRef.current = null;
-      }
-      const stage = new Konva.Stage({ container: konvaEl, width: W, height: H });
-      const layer = new Konva.Layer({ listening: false });
-      const contentH = H - SHADOW_PAD;
-      layer.add(new Konva.Path({
-        x: 0,
-        y: BACK_OFFSET_Y,
-        data: BACK_PATH,
-        scaleX: W / BACK_W,
-        scaleY: contentH / BACK_H,
-        fill: "#ffffff",
-        stroke: backStroke,
-        strokeWidth: 2,
-        strokeScaleEnabled: false,
-        listening: false
-      }));
-      layer.add(new Konva.Path({
-        x: FRONT_OFFSET_X,
-        y: 0,
-        data: FRONT_PATH,
-        scaleX: (W - FRONT_OFFSET_X) / FRONT_W,
-        scaleY: contentH / FRONT_H,
-        fill,
-        stroke,
-        strokeWidth: 3,
-        strokeScaleEnabled: false,
-        listening: false
-      }));
-      stage.add(layer);
-      stageRef.current = stage;
-    }
-    draw(wrapper.offsetWidth, wrapper.offsetHeight);
-    const ro = new ResizeObserver((entries) => {
-      const el = entries[0].target;
-      draw(el.offsetWidth, el.offsetHeight);
-    });
-    ro.observe(wrapper);
-    return () => {
-      ro.disconnect();
-      stageRef.current?.destroy();
-      stageRef.current = null;
-    };
-  }, [fill, stroke, backStroke]);
-  return /* @__PURE__ */ jsxs6("div", { ref: wrapperRef, style: { position: "relative", paddingBottom: `${SHADOW_PAD}px` }, children: [
-    /* @__PURE__ */ jsx10(
+var PeekSheet = memo(function PeekSheet2({ node, anchors, onStepInside, onClose, renderContent, expanded, onToggleExpanded, height }) {
+  const [term, setTerm] = useState2(null);
+  const parts = useMemo5(() => splitTerms(node.description ?? "", anchors), [node.description, anchors]);
+  const startY = useRef9(null);
+  const swiped = useRef9(false);
+  const { fill, ring } = paintVars(node);
+  const style = {
+    ["--vi-fact-fill"]: fill,
+    ["--vi-fact-ring"]: ring,
+    ["--vi-sheet-h"]: `${height}px`,
+    zIndex: "var(--z-card)"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `vi-fact vi-fact--sheet vi-peek${expanded ? " is-expanded" : ""}`, style, role: "dialog", "aria-label": node.title, "data-node-tooltip": "true", children: [
+    /* @__PURE__ */ jsx6(
       "div",
       {
-        ref: konvaContainerRef,
-        style: { position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0, overflow: "hidden" }
+        className: "vi-fact__grip",
+        onPointerDown: (e) => {
+          startY.current = e.clientY;
+          swiped.current = false;
+        },
+        onPointerUp: (e) => {
+          if (startY.current === null) return;
+          const dy = e.clientY - startY.current;
+          startY.current = null;
+          if (dy < -SHEET.expandDrag) {
+            swiped.current = true;
+            if (!expanded) onToggleExpanded();
+          } else if (dy > SHEET.dismissDrag) {
+            swiped.current = true;
+            if (expanded) onToggleExpanded();
+            else onClose();
+          }
+        },
+        children: /* @__PURE__ */ jsx6("button", { type: "button", className: "vi-fact__handle", "aria-label": expanded ? "Collapse" : "Expand", "aria-expanded": expanded, onClick: () => {
+          if (!swiped.current) onToggleExpanded();
+          swiped.current = false;
+        } })
       }
     ),
-    /* @__PURE__ */ jsx10("div", { style: { position: "relative", padding, zIndex: 1 }, children })
+    term ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("button", { type: "button", className: "vi-fact__back", onClick: () => setTerm(null), children: [
+        /* @__PURE__ */ jsx6(ChevronLeftIcon, {}),
+        " Back"
+      ] }),
+      /* @__PURE__ */ jsx6(TermCard, { anchor: term, inSheet: true })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "vi-fact__head", children: [
+        /* @__PURE__ */ jsx6("div", { className: "vi-fact__title", children: node.title }),
+        /* @__PURE__ */ jsx6("button", { type: "button", className: "vi-iconbtn vi-iconbtn--md vi-fact__close", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx6(CloseIcon, {}) })
+      ] }),
+      /* @__PURE__ */ jsx6("div", { className: "vi-fact__body", children: renderContent ? renderContent(node.description ?? "") : parts.map((p, i) => typeof p === "string" ? /* @__PURE__ */ jsx6(React6.Fragment, { children: p }, i) : /* @__PURE__ */ jsx6("span", { className: "vi-anchor", "data-semantic-tooltip": "true", children: /* @__PURE__ */ jsx6("button", { type: "button", className: "vi-term", onClick: () => setTerm(p), children: p.word }) }, i)) }),
+      onStepInside && /* @__PURE__ */ jsxs("div", { className: "vi-fact__foot", children: [
+        /* @__PURE__ */ jsx6("span", {}),
+        /* @__PURE__ */ jsx6("div", { className: "vi-fact__acts", children: /* @__PURE__ */ jsxs("button", { type: "button", className: "vi-fact__step", onClick: onStepInside, children: [
+          "Step inside ",
+          /* @__PURE__ */ jsx6(ChevronIcon, {})
+        ] }) })
+      ] })
+    ] })
   ] });
-};
-var SketchyBoxKonva_default = SketchyBoxKonva;
+});
 
-// src/VisualliCanvas.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-function hexToRgba2(hex, alpha) {
-  hex = hex.replace(/^#/, "");
-  let r, g, b;
-  if (hex.length === 3) {
-    r = parseInt(hex[0] + hex[0], 16);
-    g = parseInt(hex[1] + hex[1], 16);
-    b = parseInt(hex[2] + hex[2], 16);
-  } else if (hex.length === 6) {
-    r = parseInt(hex.substring(0, 2), 16);
-    g = parseInt(hex.substring(2, 4), 16);
-    b = parseInt(hex.substring(4, 6), 16);
-  } else {
-    return `rgba(240, 237, 230, ${alpha})`;
-  }
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+// src/components/NavigationStack.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var NavigationStack = memo2(function NavigationStack2({ stack, onNavigateBack, top, left }) {
+  const entries = useMemo6(
+    () => stack.map((e) => ({ layerId: e.layerId, label: e.label, level: e.layer.level, paint: e.paint ?? {} })),
+    [stack]
+  );
+  return /* @__PURE__ */ jsx7("div", { className: "vi-map__trail", style: top || left ? { top, left } : void 0, children: /* @__PURE__ */ jsx7(DepthTrail, { stack: entries, onNavigateBack }) });
+});
+var NavigationStack_default = NavigationStack;
+
+// src/components/A11yLayer.tsx
+import { memo as memo3, useEffect as useEffect6, useMemo as useMemo7, useState as useState3 } from "react";
+import { intersectsViewport as intersectsViewport2, nodeBounds as nodeBounds2 } from "@visualli/core";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+var MAX_MIRRORED = 150;
+var A11yLayer = memo3(function A11yLayer2({ nodes, label, hasChildLayer, onActivate, onFocusNode, announcement }) {
+  const cx = useViewportStore((s) => s.centerX);
+  const cy = useViewportStore((s) => s.centerY);
+  const zoom = useViewportStore((s) => s.zoomLevel);
+  const w = useViewportStore((s) => s.canvasWidth);
+  const h = useViewportStore((s) => s.canvasHeight);
+  const [view, setView] = useState3({ cx, cy, zoom, w, h });
+  useEffect6(() => {
+    const t = setTimeout(() => setView({ cx, cy, zoom, w, h }), 120);
+    return () => clearTimeout(t);
+  }, [cx, cy, zoom, w, h]);
+  const items = useMemo7(() => {
+    const halfW = view.w / 2 / view.zoom, halfH = view.h / 2 / view.zoom;
+    const bounds = { minX: view.cx - halfW, maxX: view.cx + halfW, minY: view.cy - halfH, maxY: view.cy + halfH };
+    const visible = nodes.filter((n) => intersectsViewport2(n, bounds));
+    const picked = visible.length > MAX_MIRRORED ? visible.map((n) => ({ n, d: (n.x - view.cx) ** 2 + (n.y - view.cy) ** 2 })).sort((a, b) => a.d - b.d).slice(0, MAX_MIRRORED).map((e) => e.n) : visible;
+    const row = (n) => Math.round(nodeBounds2(n).minY / 150);
+    return [...picked].sort((a, b) => row(a) - row(b) || a.x - b.x);
+  }, [nodes, view]);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx8("div", { className: "vi-sr", role: "list", "aria-label": label, children: items.map((n) => /* @__PURE__ */ jsx8("div", { role: "listitem", children: /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        "data-node-id": n.id,
+        "aria-label": `${n.title}. Depth ${n.level + 1}.${hasChildLayer(n.id) ? " Has more inside; press Enter to step inside." : ""}`,
+        onFocus: () => onFocusNode(n.id),
+        onBlur: () => onFocusNode(null),
+        onClick: () => onActivate(n)
+      }
+    ) }, n.id)) }),
+    /* @__PURE__ */ jsx8("div", { className: "vi-sr", role: "status", "aria-live": "polite", children: announcement })
+  ] });
+});
+
+// src/design/useDesign.ts
+import { useMemo as useMemo8, useSyncExternalStore as useSyncExternalStore2 } from "react";
+function useMedia(query) {
+  const subscribe = (cb) => {
+    if (typeof window === "undefined" || !window.matchMedia) return () => {
+    };
+    const mq = window.matchMedia(query);
+    mq.addEventListener("change", cb);
+    return () => mq.removeEventListener("change", cb);
+  };
+  const get = () => typeof window !== "undefined" && !!window.matchMedia && window.matchMedia(query).matches;
+  return useSyncExternalStore2(subscribe, get, () => false);
 }
+function useReaderEnv() {
+  return {
+    prefersDark: useMedia("(prefers-color-scheme: dark)"),
+    forcedColors: useMedia("(forced-colors: active)"),
+    prefersReducedMotion: useMedia("(prefers-reduced-motion: reduce)")
+  };
+}
+function useDesign(props) {
+  const env = useReaderEnv();
+  const { theme, isDark, respectForcedColors } = props;
+  const { readableType, largerText, reducedMotion } = props.comfort ?? {};
+  return useMemo8(
+    () => resolveDesign({ theme, isDark, respectForcedColors, comfort: { readableType, largerText, reducedMotion } }, env),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [theme, isDark, respectForcedColors, readableType, largerText, reducedMotion, env.prefersDark, env.forcedColors, env.prefersReducedMotion]
+  );
+}
+
+// src/design/measure.ts
+import { TYPE_STYLES as TYPE_STYLES4, approximateMeasure } from "@visualli/core";
+var ctx;
+var cache2 = /* @__PURE__ */ new Map();
+var MAX_CACHED = 8192;
+function ideaMeasure(d) {
+  if (ctx === void 0) ctx = typeof document !== "undefined" ? document.createElement("canvas").getContext("2d") : null;
+  const c = ctx;
+  if (!c) return approximateMeasure;
+  const weight = TYPE_STYLES4["node-label"].weight;
+  const tracking = d.comfort.readableType ? 0.02 : 0;
+  return (text, px) => {
+    const font = `${weight} ${px}px ${d.fontHand}`;
+    const key2 = `${fontsEpoch()}|${font}|${text}`;
+    let w = cache2.get(key2);
+    if (w === void 0) {
+      c.font = font;
+      w = c.measureText(text).width + text.length * px * tracking;
+      if (cache2.size >= MAX_CACHED) cache2.clear();
+      cache2.set(key2, w);
+    }
+    return w;
+  };
+}
+
+// src/VisualliCanvas.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 function resolveDocument(props, fileText) {
   if (props.preParsedVisualli) return props.preParsedVisualli;
   const rawContent = fileText ?? props.visualliString;
@@ -2090,6 +1841,13 @@ function layerLabel(doc, layer, layerId) {
   }
   return layer.description ?? layerId;
 }
+function layerPaint(doc, layer) {
+  const parentLayer = layer.parentLayerId ? doc.layers.get(layer.parentLayerId) : null;
+  const index = parentLayer ? parentLayer.nodes.findIndex((n) => n.id === layer.parentNodeId) : -1;
+  if (!parentLayer || index < 0) return { topic: TRAIL2.rootTopic };
+  const { topic, custom } = ideaColor(parentLayer.nodes[index].data.color, index);
+  return topic ? { topic } : { custom };
+}
 function getRootLayerId(doc) {
   for (const [id, layer] of doc.layers) {
     if (!layer.parentLayerId) return id;
@@ -2097,9 +1855,24 @@ function getRootLayerId(doc) {
   return doc.layers.keys().next().value ?? null;
 }
 function VisualliCanvas(props) {
-  const { isDark = false, chromaticImmersion = false, onNodeClick, onLayerChange, onNodeHover, renderOverlay, renderNodeContent, navigationStackTop = "16px", navigationStackLeft = "16px", className = "", style } = props;
-  const [fileText, setFileText] = useState3(void 0);
-  useEffect6(() => {
+  const { chromaticImmersion = false, onNodeClick, onLayerChange, onNodeHover, renderOverlay, renderNodeContent, navigationStackTop, navigationStackLeft, className = "", style } = props;
+  const onNodeHoverRef = useRef10(onNodeHover);
+  onNodeHoverRef.current = onNodeHover;
+  const design = useDesign({ theme: props.theme ?? (props.isDark === void 0 ? "light" : void 0), isDark: props.isDark, comfort: props.comfort, respectForcedColors: props.respectForcedColors });
+  const isDark = design.isDark;
+  const [fontSheet] = useState4(() => ensureDesignSystemStyles({ fontBaseUrl: props.fontBaseUrl, loadWebFonts: props.loadWebFonts }));
+  const [fontsReady, setFontsReady] = useState4(false);
+  useEffect7(() => {
+    let live = true;
+    loadCanvasFonts(fontSheet).then(() => {
+      if (live) setFontsReady(true);
+    });
+    return () => {
+      live = false;
+    };
+  }, [fontSheet]);
+  const [fileText, setFileText] = useState4(void 0);
+  useEffect7(() => {
     if (!props.visualliFile) {
       setFileText(void 0);
       return;
@@ -2125,33 +1898,35 @@ function VisualliCanvas(props) {
       cancelled = true;
     };
   }, [props.visualliFile]);
-  const doc = useMemo7(() => resolveDocument(props, fileText), [props.preParsedVisualli, props.visualliString, props.visualliFile, fileText]);
-  const [navStack, setNavStack] = useState3([]);
-  const [currentLayerId, setCurrentLayerId] = useState3(null);
-  const parentViewports = useRef9([]);
-  const [isTransitioning, setIsTransitioning] = useState3(false);
-  const isTransitioningRef = useRef9(false);
-  useEffect6(() => {
+  const doc = useMemo9(() => resolveDocument(props, fileText), [props.preParsedVisualli, props.visualliString, props.visualliFile, fileText]);
+  const [navStack, setNavStack] = useState4([]);
+  const [currentLayerId, setCurrentLayerId] = useState4(null);
+  const parentViewports = useRef10([]);
+  const stepTargetRef = useRef10(null);
+  const [isTransitioning, setIsTransitioning] = useState4(false);
+  const isTransitioningRef = useRef10(false);
+  useEffect7(() => {
     if (!doc) return;
     const rootId = getRootLayerId(doc);
     if (!rootId) return;
     const rootLayer = doc.layers.get(rootId);
     setCurrentLayerId(rootId);
-    setNavStack([{ layerId: rootId, layer: rootLayer, label: "Home" }]);
+    setNavStack([{ layerId: rootId, layer: rootLayer, label: doc.meta?.title || "Home", paint: { topic: TRAIL2.rootTopic } }]);
     parentViewports.current = [];
   }, [doc]);
-  const { flatNodes, connections, containers } = useMemo7(() => {
+  const sizing = useMemo9(() => ({ measure: ideaMeasure(design), labelScale: design.labelScale }), [design.fontHand, design.labelScale, design.comfort.readableType, fontsReady]);
+  const { flatNodes, connections, containers } = useMemo9(() => {
     if (!doc || !currentLayerId) return { flatNodes: [], connections: [], containers: [] };
     try {
       return {
-        flatNodes: getNodesForLayer(doc, currentLayerId),
+        flatNodes: getNodesForLayer(doc, currentLayerId, sizing),
         connections: getConnectionsForLayer(doc, currentLayerId),
         containers: getContainersForLayer(doc, currentLayerId)
       };
     } catch {
       return { flatNodes: [], connections: [], containers: [] };
     }
-  }, [doc, currentLayerId]);
+  }, [doc, currentLayerId, sizing]);
   const viewport = useViewportStore((s) => ({
     centerX: s.centerX,
     centerY: s.centerY,
@@ -2166,57 +1941,53 @@ function VisualliCanvas(props) {
   const updateNodePosition = useNodeStore((s) => s.updateNodePosition);
   const clearSel = useSelectionStore((s) => s.clear);
   const select = useSelectionStore((s) => s.select);
-  useEffect6(() => {
+  useEffect7(() => {
     const map = new Map(flatNodes.map((n) => [n.id, n]));
     setNodes(map);
     clearSel();
   }, [flatNodes, setNodes, clearSel]);
-  const containerRef = useRef9(null);
-  const stageRef = useRef9(null);
-  const canvasWrapperRef = useRef9(null);
-  const baselineTransformRef = useRef9(null);
-  const konvaContentDivRef = useRef9(null);
-  const lastAnimViewportRef = useRef9(null);
-  const zoomOutTargetRef = useRef9(null);
-  const canvasSizeRef = useRef9({ width: 0, height: 0 });
-  const dragMoveRafRef = useRef9(null);
-  const dragMoveLatestRef = useRef9(null);
-  const dragStartPosRef = useRef9(/* @__PURE__ */ new Map());
-  const baseBgColor = isDark ? "#141412" : "#F0EDE6";
-  const chromaticBgColor = useMemo7(() => {
-    if (!chromaticImmersion || !doc || !currentLayerId) return baseBgColor;
-    const currentLayer = doc.layers.get(currentLayerId);
-    if (!currentLayer) return baseBgColor;
-    if (currentLayer.level === 0 || !currentLayer.parentNodeId) return baseBgColor;
-    const parentLayer = currentLayer.parentLayerId ? doc.layers.get(currentLayer.parentLayerId) : null;
-    if (parentLayer) {
-      const parentNode = parentLayer.nodes.find((n) => n.id === currentLayer.parentNodeId);
-      if (parentNode) {
-        const nodeColor = parentNode.data.color || baseBgColor;
-        return hexToRgba2(nodeColor, 0.15);
-      }
-    }
-    return baseBgColor;
-  }, [chromaticImmersion, doc, currentLayerId, baseBgColor]);
-  const bgColor = chromaticImmersion ? chromaticBgColor : baseBgColor;
-  const spatialIndexRef = useRef9(null);
-  useEffect6(() => {
+  const clock = useMemo9(() => new RevealClock(), []);
+  const instantReveal = design.comfort.reducedMotion || props.reveal === "instant";
+  useEffect7(() => {
+    if (!fontsReady || flatNodes.length === 0) return;
+    clock.start(flatNodes, connections.length, instantReveal);
+    const r1 = requestAnimationFrame(() => {
+      r2 = requestAnimationFrame(arrive);
+    });
+    let r2 = 0;
+    return () => {
+      cancelAnimationFrame(r1);
+      cancelAnimationFrame(r2);
+    };
+  }, [flatNodes, fontsReady]);
+  useEffect7(() => clock.subscribe((running) => {
+    const el = containerRef.current;
+    if (el) el.dataset.viReveal = running ? "running" : "idle";
+  }), [clock]);
+  useEffect7(() => () => clock.stop(), [clock]);
+  const containerRef = useRef10(null);
+  const stageRef = useRef10(null);
+  const canvasWrapperRef = useRef10(null);
+  const canvasSizeRef = useRef10({ width: 0, height: 0 });
+  const dragMoveRafRef = useRef10(null);
+  const dragMoveLatestRef = useRef10(null);
+  const dragStartPosRef = useRef10(/* @__PURE__ */ new Map());
+  const immersionFill = useMemo9(() => {
+    if (!chromaticImmersion || !doc || !currentLayerId) return null;
+    const layer = doc.layers.get(currentLayerId);
+    if (!layer || layer.level === 0 || !layer.parentNodeId) return null;
+    return paintVars(layerPaint(doc, layer)).fill;
+  }, [chromaticImmersion, doc, currentLayerId]);
+  const spatialIndexRef = useRef10(null);
+  useEffect7(() => {
     if (flatNodes.length === 0) {
       spatialIndexRef.current?.clear();
       return;
     }
     const idx = new RBushSpatialIndex2();
     idx.bulkLoad(flatNodes.map((n) => {
-      const blobHalfH = Math.max(NODE_HEIGHT5 * 1.6 / 2, n.width / 2 * 0.74);
-      return {
-        nodeId: n.id,
-        bounds: {
-          minX: n.x - n.width / 2,
-          minY: n.y - blobHalfH,
-          maxX: n.x + n.width / 2,
-          maxY: n.y + blobHalfH
-        }
-      };
+      const { rx, ry } = nodeRadii3(n);
+      return { nodeId: n.id, bounds: { minX: n.x - rx, minY: n.y - ry, maxX: n.x + rx, maxY: n.y + ry } };
     }));
     spatialIndexRef.current = idx;
     return () => {
@@ -2228,6 +1999,7 @@ function VisualliCanvas(props) {
     handleMouseDown: rendererHandleMouseDown,
     handleMouseMove: rendererHandleMouseMove,
     handleMouseUp: rendererHandleMouseUp,
+    cancelPan: rendererCancelPan,
     canvasWidth,
     canvasHeight
   } = useKonvaRenderer({ containerRef, stageRef });
@@ -2267,57 +2039,64 @@ function VisualliCanvas(props) {
       if (node) {
         const oldPos = dragStartPosRef.current.get(nodeId);
         if (oldPos) {
-          const oldHalfH = Math.max(NODE_HEIGHT5 * 1.6 / 2, node.width / 2 * 0.74);
+          const { rx: rx2, ry: ry2 } = nodeRadii3(node);
           spatialIndexRef.current.remove(nodeId, {
-            minX: oldPos.x - node.width / 2,
-            minY: oldPos.y - oldHalfH,
-            maxX: oldPos.x + node.width / 2,
-            maxY: oldPos.y + oldHalfH
+            minX: oldPos.x - rx2,
+            minY: oldPos.y - ry2,
+            maxX: oldPos.x + rx2,
+            maxY: oldPos.y + ry2
           });
         }
-        const newHalfH = Math.max(NODE_HEIGHT5 * 1.6 / 2, node.width / 2 * 0.74);
+        const { rx, ry } = nodeRadii3(node);
         spatialIndexRef.current.insert(nodeId, {
-          minX: x - node.width / 2,
-          minY: y - newHalfH,
-          maxX: x + node.width / 2,
-          maxY: y + newHalfH
+          minX: x - rx,
+          minY: y - ry,
+          maxX: x + rx,
+          maxY: y + ry
         });
       }
     }
     dragStartPosRef.current.delete(nodeId);
   }, [updateNodePosition, nodes]);
-  const fitToScreenRef = useRef9(() => {
+  const fitToScreenRef = useRef10(() => {
   });
   const fitToScreen = useCallback4(() => {
     if (flatNodes.length === 0) return;
     if (isTransitioningRef.current) return;
     const cw = canvasSizeRef.current.width || containerRef.current?.getBoundingClientRect().width || 800;
     const ch = canvasSizeRef.current.height || containerRef.current?.getBoundingClientRect().height || 600;
-    const { centerX, centerY } = calculateFitView(flatNodes, cw, ch);
-    const isRootLayer = navStack.length <= 1;
-    const zoomLevel = isRootLayer ? 1 : calculateFitView(flatNodes, cw, ch).zoomLevel;
+    const { centerX, centerY, zoomLevel } = calculateFitView(flatNodes, cw, ch, containers);
+    useViewportStore.getState().setFit(zoomLevel, centerX, centerY);
     setCenter(centerX, centerY);
     setZoom(zoomLevel);
-  }, [flatNodes, navStack.length, setCenter, setZoom]);
+  }, [flatNodes, containers, setCenter, setZoom]);
   fitToScreenRef.current = fitToScreen;
-  useEffect6(() => {
+  useEffect7(() => {
     fitToScreen();
   }, [currentLayerId]);
-  const didFitAfterMeasureRef = useRef9(false);
-  useEffect6(() => {
+  const didFitAfterMeasureRef = useRef10(false);
+  useEffect7(() => {
     if (!canvasWidth || didFitAfterMeasureRef.current) return;
     didFitAfterMeasureRef.current = true;
     fitToScreen();
   }, [canvasWidth, fitToScreen]);
-  const navBackTargetRef = useRef9(-1);
-  const { zoomIntoLayer, zoomOutToParent, isTransitioning: isAnimating } = useKonvaLayerTransition({
+  const navBackTargetRef = useRef10(-1);
+  const { stepInside: diveInto, backOut, arrive, isTransitioning: isAnimating } = useLayerChoreography({
     stageRef,
     canvasWrapperRef,
+    reducedMotion: design.comfort.reducedMotion || props.reveal === "instant",
     onSwapLayer: (childLayerId) => {
       const childLayer = doc?.layers.get(childLayerId);
       if (!childLayer || !doc) return;
       setCurrentLayerId(childLayerId);
-      setNavStack((prev) => [...prev, { layerId: childLayerId, layer: childLayer, label: layerLabel(doc, childLayer, childLayerId) }]);
+      const target = stepTargetRef.current;
+      stepTargetRef.current = null;
+      setNavStack((prev) => [...prev, {
+        layerId: childLayerId,
+        layer: childLayer,
+        label: target?.label || layerLabel(doc, childLayer, childLayerId),
+        paint: target?.paint ?? layerPaint(doc, childLayer)
+      }]);
       onLayerChange?.(childLayerId, childLayer);
     },
     onSwapBack: () => {
@@ -2337,96 +2116,6 @@ function VisualliCanvas(props) {
       requestAnimationFrame(() => {
         fitToScreenRef.current();
       });
-    },
-    // GPU CSS-transform callbacks (matching visualli.ai exactly):
-    onViewportFrame: (vp) => {
-      lastAnimViewportRef.current = vp;
-      const baseline = baselineTransformRef.current;
-      const contentDiv = konvaContentDivRef.current;
-      const { width, height } = canvasSizeRef.current;
-      if (baseline && contentDiv) {
-        const targetX = width / 2 - vp.centerX * vp.zoomLevel;
-        const targetY = height / 2 - vp.centerY * vp.zoomLevel;
-        const ratio = vp.zoomLevel / baseline.scaleX;
-        const tx = targetX - baseline.x * ratio;
-        const ty = targetY - baseline.y * ratio;
-        contentDiv.style.transform = `translate(${tx}px, ${ty}px) scale(${ratio})`;
-      } else {
-        const stage = stageRef.current;
-        if (stage) {
-          stage.x(width / 2 - vp.centerX * vp.zoomLevel);
-          stage.y(height / 2 - vp.centerY * vp.zoomLevel);
-          stage.scaleX(vp.zoomLevel);
-          stage.scaleY(vp.zoomLevel);
-          stage.batchDraw();
-        }
-      }
-    },
-    onViewportFinal: (vp) => {
-      if (konvaContentDivRef.current) konvaContentDivRef.current.style.transform = "";
-      const stage = stageRef.current;
-      if (stage) {
-        const { width, height } = canvasSizeRef.current;
-        stage.x(width / 2 - vp.centerX * vp.zoomLevel);
-        stage.y(height / 2 - vp.centerY * vp.zoomLevel);
-        stage.scaleX(vp.zoomLevel);
-        stage.scaleY(vp.zoomLevel);
-        stage.getLayers().forEach((l) => l.drawScene());
-      }
-      setCenter(vp.centerX, vp.centerY);
-      setZoom(vp.zoomLevel);
-    },
-    onPhaseChange: (phase) => {
-      const stage = stageRef.current;
-      const contentDiv = konvaContentDivRef.current;
-      if (stage && contentDiv && (phase === "swap" || phase === "zoom-back")) {
-        contentDiv.style.transform = "";
-        const vp = phase === "zoom-back" ? zoomOutTargetRef.current : lastAnimViewportRef.current;
-        if (vp) {
-          const { width, height } = canvasSizeRef.current;
-          const nx = width / 2 - vp.centerX * vp.zoomLevel;
-          const ny = height / 2 - vp.centerY * vp.zoomLevel;
-          stage.x(nx);
-          stage.y(ny);
-          stage.scaleX(vp.zoomLevel);
-          stage.scaleY(vp.zoomLevel);
-          stage.getLayers().forEach((l) => l.drawScene());
-          baselineTransformRef.current = { x: nx, y: ny, scaleX: vp.zoomLevel, scaleY: vp.zoomLevel };
-        }
-      }
-    },
-    onTransitionLifecycle: (phase) => {
-      const stage = stageRef.current;
-      if (phase === "start") {
-        if (canvasWrapperRef.current) canvasWrapperRef.current.style.willChange = "opacity, transform";
-        if (stage) {
-          baselineTransformRef.current = { x: stage.x(), y: stage.y(), scaleX: stage.scaleX(), scaleY: stage.scaleY() };
-          const container = stage.container();
-          const cd = container?.querySelector(".konvajs-content");
-          if (cd) {
-            konvaContentDivRef.current = cd;
-            cd.style.transformOrigin = "0 0";
-            cd.style.willChange = "transform";
-          }
-          stage.getLayers().forEach((l) => {
-            l.listening(false);
-          });
-        }
-      } else {
-        if (canvasWrapperRef.current) canvasWrapperRef.current.style.willChange = "auto";
-        if (konvaContentDivRef.current) {
-          konvaContentDivRef.current.style.willChange = "auto";
-          konvaContentDivRef.current = null;
-        }
-        baselineTransformRef.current = null;
-        zoomOutTargetRef.current = null;
-        if (stage) {
-          stage.getLayers().forEach((l) => {
-            l.listening(true);
-          });
-          stage.batchDraw();
-        }
-      }
     }
   });
   const handleNavigate = useCallback4((nodeId) => {
@@ -2446,7 +2135,7 @@ function VisualliCanvas(props) {
     }
     const childNodes = (() => {
       try {
-        return getNodesForLayer(doc, childLayerId);
+        return getNodesForLayer(doc, childLayerId, sizing);
       } catch {
         return [];
       }
@@ -2458,20 +2147,13 @@ function VisualliCanvas(props) {
     if (!node) return;
     const cw = canvasSizeRef.current.width || 800;
     const ch = canvasSizeRef.current.height || 600;
-    const fitVp = calculateFitView(flatNodes, cw, ch);
-    const isRootNow = navStack.length <= 1;
-    parentViewports.current.push({ centerX: fitVp.centerX, centerY: fitVp.centerY, zoomLevel: isRootNow ? 0.85 : fitVp.zoomLevel });
+    const fitVp = calculateFitView(flatNodes, cw, ch, containers);
+    parentViewports.current.push({ centerX: fitVp.centerX, centerY: fitVp.centerY, zoomLevel: fitVp.zoomLevel });
+    stepTargetRef.current = { paint: { topic: node.topic, custom: node.custom }, label: node.title };
     setIsTransitioning(true);
     isTransitioningRef.current = true;
-    zoomIntoLayer(
-      doc,
-      node,
-      childLayerId,
-      childNodes,
-      node.color ?? getThemeBackground(isDark, "secondary"),
-      node.color ?? getThemeBackground(isDark, "primary")
-    );
-  }, [doc, currentLayerId, nodes, isDark, isAnimating, zoomIntoLayer]);
+    diveInto(node, childLayerId, childNodes);
+  }, [doc, currentLayerId, nodes, isAnimating, diveInto, sizing, flatNodes, containers]);
   const handleNavigateBack = useCallback4((targetIndex) => {
     if (targetIndex >= navStack.length - 1) return;
     if (isTransitioningRef.current || isAnimating()) return;
@@ -2480,45 +2162,8 @@ function VisualliCanvas(props) {
     navBackTargetRef.current = targetIndex;
     setIsTransitioning(true);
     isTransitioningRef.current = true;
-    zoomOutToParent(savedVp, getThemeBackground(isDark, "primary"), getThemeBackground(isDark, "secondary"));
-  }, [navStack.length, isDark, isAnimating, zoomOutToParent]);
-  const baseZoomRef = useRef9(1);
-  const lastZoomTransitionRef = useRef9(0);
-  const ZOOM_COOLDOWN = 1e3;
-  useEffect6(() => {
-    baseZoomRef.current = 1;
-  }, [currentLayerId]);
-  useEffect6(() => {
-    if (isTransitioningRef.current || isAnimating()) return;
-    const now = Date.now();
-    if (now - lastZoomTransitionRef.current < ZOOM_COOLDOWN) return;
-    const relative = viewport.zoomLevel / baseZoomRef.current;
-    if (relative >= ZOOM_NAV_IN_THRESHOLD) {
-      let closest = null;
-      let minDist = Infinity;
-      for (const node of nodes.values()) {
-        const dx = node.x - viewport.centerX;
-        const dy = node.y - viewport.centerY;
-        const d = dx * dx + dy * dy;
-        if (d < minDist) {
-          minDist = d;
-          closest = node;
-        }
-      }
-      if (closest) {
-        const childLayer = doc ? getChildLayerForNode(doc, closest.id, currentLayerId ?? "") : null;
-        if (childLayer) {
-          lastZoomTransitionRef.current = now;
-          handleNavigate(closest.id);
-          baseZoomRef.current = 1;
-        }
-      }
-    } else if (relative < ZOOM_NAV_OUT_THRESHOLD && navStack.length > 1) {
-      lastZoomTransitionRef.current = now;
-      handleNavigateBack(navStack.length - 2);
-      baseZoomRef.current = 1;
-    }
-  }, [viewport.zoomLevel, viewport.centerX, viewport.centerY, nodes, doc, currentLayerId, navStack, isAnimating, handleNavigate, handleNavigateBack]);
+    backOut(savedVp);
+  }, [navStack.length, isAnimating, backOut]);
   const toWorldCoords = useCallback4((stage, pointer) => {
     const sp = stage.position();
     const sc = stage.scaleX();
@@ -2540,22 +2185,22 @@ function VisualliCanvas(props) {
     }
     return targetId;
   }, [nodes]);
-  const stageActiveNodeIdRef = useRef9(null);
-  const stageDragNodeOffsetRef = useRef9({ x: 0, y: 0 });
-  const stageMouseDownPosRef = useRef9(null);
-  const stageDragCommittedRef = useRef9(false);
-  const stageLastPointerCheckRef = useRef9(0);
-  const pointerNodeIdRef = useRef9(null);
-  const isCanvasPanningRef = useRef9(false);
-  const isDraggingRef = useRef9(false);
-  const [pointerNodeId, setPointerNodeId] = useState3(null);
-  const [pressedNodeId, setPressedNodeId] = useState3(null);
-  const [isDraggingState, setIsDraggingState] = useState3(false);
-  const [hoveredNode, setHoveredNode] = useState3(null);
-  const tooltipHoverRef = useRef9(false);
-  const keepTooltipOpenRef = useRef9(false);
-  const clearTooltipTimerRef = useRef9(null);
-  const hoveredNodePosition = useMemo7(() => {
+  const stageActiveNodeIdRef = useRef10(null);
+  const stageDragNodeOffsetRef = useRef10({ x: 0, y: 0 });
+  const stageMouseDownPosRef = useRef10(null);
+  const stageDragCommittedRef = useRef10(false);
+  const stageLastPointerCheckRef = useRef10(0);
+  const pointerNodeIdRef = useRef10(null);
+  const isCanvasPanningRef = useRef10(false);
+  const isDraggingRef = useRef10(false);
+  const [pointerNodeId, setPointerNodeId] = useState4(null);
+  const [pressedNodeId, setPressedNodeId] = useState4(null);
+  const [isDraggingState, setIsDraggingState] = useState4(false);
+  const [hoveredNode, setHoveredNode] = useState4(null);
+  const tooltipHoverRef = useRef10(false);
+  const keepTooltipOpenRef = useRef10(false);
+  const clearTooltipTimerRef = useRef10(null);
+  const hoveredNodePosition = useMemo9(() => {
     if (!hoveredNode) return null;
     const node = nodes.get(hoveredNode.nodeId);
     if (!node) return null;
@@ -2567,8 +2212,8 @@ function VisualliCanvas(props) {
       zoom: viewport.zoomLevel
     };
   }, [hoveredNode, nodes, viewport]);
-  const [canvasContextMenu, setCanvasContextMenu] = useState3(null);
-  useEffect6(() => {
+  const [canvasContextMenu, setCanvasContextMenu] = useState4(null);
+  useEffect7(() => {
     if (!canvasContextMenu) return;
     const close = () => setCanvasContextMenu(null);
     const onKey = (e) => {
@@ -2581,8 +2226,45 @@ function VisualliCanvas(props) {
       window.removeEventListener("keydown", onKey);
     };
   }, [canvasContextMenu]);
+  const selectedNodeId = useSelectionStore((st) => st.selectedId);
+  const [focusedNodeId, setFocusedNodeId] = useState4(null);
+  const anchors = useMemo9(() => doc ? getSemanticAnchors(doc) : [], [doc]);
+  const [autoTouch, setAutoTouch] = useState4(() => typeof window !== "undefined" && !!window.matchMedia && window.matchMedia("(hover: none)").matches);
+  const touchMode = props.layout === "touch" ? true : props.layout === "pointer" ? false : autoTouch;
+  const touchModeRef = useRef10(touchMode);
+  touchModeRef.current = touchMode;
+  const lastTouchAtRef = useRef10(0);
+  const emptyTapRef = useRef10(null);
+  const [pinnedId, setPinnedId] = useState4(null);
+  const [sheetExpanded, setSheetExpanded] = useState4(false);
+  const isEmulatedMouse = (evt) => evt.type.startsWith("mouse") && performance.now() - lastTouchAtRef.current < 700;
+  const clientOf = (evt) => {
+    const t = "touches" in evt && (evt.touches[0] ?? evt.changedTouches[0]) || evt;
+    return { x: t.clientX, y: t.clientY };
+  };
+  const pinnedIdRef = useRef10(null);
+  pinnedIdRef.current = pinnedId;
+  const sheetHeight = Math.min(SHEET2.maxHeight, Math.round((viewport.canvasHeight || canvasSizeRef.current.height || 600) * SHEET2.heightRatio));
+  const openSheet = (node) => {
+    setPinnedId(node.id);
+    setSheetExpanded(false);
+    setHoveredNode(null);
+    const vp = useViewportStore.getState();
+    const ch = canvasSizeRef.current.height || vp.canvasHeight;
+    const sh = Math.min(SHEET2.maxHeight, Math.round(ch * SHEET2.heightRatio));
+    const screenY = (node.y - vp.centerY) * vp.zoomLevel + ch / 2;
+    const reach = nodeRadii3(node).ry * vp.zoomLevel;
+    if (screenY + reach > ch - sh - 12 || screenY - reach < 0) vp.setCenter(vp.centerX, node.y + sh / (2 * vp.zoomLevel));
+  };
+  useEffect7(() => {
+    setPinnedId(null);
+  }, [currentLayerId]);
   const handleStageMouseDown = useCallback4((e) => {
-    if (e.evt.button !== 0) {
+    if (isEmulatedMouse(e.evt)) return;
+    const isTouch = e.evt.type.startsWith("touch");
+    if (isTouch) lastTouchAtRef.current = performance.now();
+    if (props.layout === void 0 || props.layout === "auto") setAutoTouch(isTouch);
+    if (!isTouch && e.evt.button !== 0) {
       rendererHandleMouseDown(e);
       return;
     }
@@ -2604,7 +2286,7 @@ function VisualliCanvas(props) {
         select(nodeId);
         stageActiveNodeIdRef.current = nodeId;
         stageDragNodeOffsetRef.current = { x: worldX - node.x, y: worldY - node.y };
-        stageMouseDownPosRef.current = { x: e.evt.clientX, y: e.evt.clientY };
+        stageMouseDownPosRef.current = clientOf(e.evt);
         stageDragCommittedRef.current = false;
         setPressedNodeId(nodeId);
         setHoveredNode(null);
@@ -2612,10 +2294,12 @@ function VisualliCanvas(props) {
       }
     }
     setHoveredNode(null);
+    emptyTapRef.current = clientOf(e.evt);
     isCanvasPanningRef.current = true;
     rendererHandleMouseDown(e);
-  }, [hitTestNode, toWorldCoords, nodes, select, rendererHandleMouseDown]);
+  }, [hitTestNode, toWorldCoords, nodes, select, rendererHandleMouseDown, props.layout]);
   const handleStageMouseMove = useCallback4((e) => {
+    if (isEmulatedMouse(e.evt)) return;
     const stage = e.target.getStage();
     if (!stage) {
       rendererHandleMouseMove(e);
@@ -2628,7 +2312,8 @@ function VisualliCanvas(props) {
     }
     const { worldX, worldY } = toWorldCoords(stage, pointer);
     if (stageActiveNodeIdRef.current && stageMouseDownPosRef.current) {
-      const moved = Math.hypot(e.evt.clientX - stageMouseDownPosRef.current.x, e.evt.clientY - stageMouseDownPosRef.current.y);
+      const cur = clientOf(e.evt);
+      const moved = Math.hypot(cur.x - stageMouseDownPosRef.current.x, cur.y - stageMouseDownPosRef.current.y);
       if (!stageDragCommittedRef.current && moved >= 5) {
         stageDragCommittedRef.current = true;
         isDraggingRef.current = true;
@@ -2640,7 +2325,6 @@ function VisualliCanvas(props) {
       if (stageDragCommittedRef.current) {
         const offset = stageDragNodeOffsetRef.current;
         handleDragMove(stageActiveNodeIdRef.current, worldX - offset.x, worldY - offset.y);
-        stage.container().style.cursor = "grabbing";
         return;
       }
       return;
@@ -2656,17 +2340,14 @@ function VisualliCanvas(props) {
       if (hovered !== pointerNodeIdRef.current) {
         pointerNodeIdRef.current = hovered;
         setPointerNodeId(hovered);
-        onNodeHover?.(hovered);
-      }
-      if (hovered) {
-        stage.container().style.cursor = "pointer";
-      } else {
-        stage.container().style.cursor = "grab";
+        onNodeHoverRef.current?.(hovered);
       }
+      stage.container().style.cursor = hovered ? "pointer" : "";
     }
     rendererHandleMouseMove(e);
   }, [toWorldCoords, hitTestNode, handleDragStart, handleDragMove, rendererHandleMouseMove]);
   const handleStageMouseUp = useCallback4((e) => {
+    if (isEmulatedMouse(e.evt)) return;
     setPressedNodeId(null);
     if (stageActiveNodeIdRef.current) {
       const nodeId = stageActiveNodeIdRef.current;
@@ -2684,7 +2365,12 @@ function VisualliCanvas(props) {
         const node = nodes.get(nodeId);
         if (node) {
           const childLayer = doc ? getChildLayerForNode(doc, nodeId, currentLayerId ?? "") : null;
-          if (childLayer) {
+          if (touchModeRef.current && childLayer && pinnedIdRef.current === nodeId) {
+            setPinnedId(null);
+            handleNavigate(nodeId);
+          } else if (touchModeRef.current && (node.description || childLayer)) {
+            openSheet(node);
+          } else if (childLayer) {
             handleNavigate(nodeId);
           }
           onNodeClick?.(node);
@@ -2697,6 +2383,12 @@ function VisualliCanvas(props) {
       stageDragCommittedRef.current = false;
       return;
     }
+    const tap = emptyTapRef.current;
+    emptyTapRef.current = null;
+    if (tap && pinnedIdRef.current) {
+      const end = clientOf(e.evt);
+      if (!Number.isFinite(end.x) || Math.hypot(end.x - tap.x, end.y - tap.y) < 6) setPinnedId(null);
+    }
     isCanvasPanningRef.current = false;
     rendererHandleMouseUp(e);
   }, [toWorldCoords, handleDragEnd, nodes, handleNavigate, onNodeClick, rendererHandleMouseUp]);
@@ -2711,31 +2403,75 @@ function VisualliCanvas(props) {
     const localY = rect ? e.evt.clientY - rect.top : e.evt.clientY;
     setCanvasContextMenu({ x: localX, y: localY });
   }, [navStack.length]);
-  const handleStageTouchStart = useCallback4((e) => handleStageMouseDown(e), [handleStageMouseDown]);
-  const handleStageTouchMove = useCallback4((e) => handleStageMouseMove(e), [handleStageMouseMove]);
-  const handleStageTouchEnd = useCallback4((e) => handleStageMouseUp(e), [handleStageMouseUp]);
-  const handleWheel = useCallback4((e) => {
-    const isZoomOut = e.evt.deltaY > 0;
-    if (!isZoomOut) {
-      rendererHandleWheel(e);
-      return;
+  const touchPointsRef = useRef10(/* @__PURE__ */ new Map());
+  const pinchRef = useRef10(null);
+  const pinchEndedAtRef = useRef10(-Infinity);
+  const [pinching, setPinching] = useState4(false);
+  const localOf = (e) => {
+    const r = containerRef.current.getBoundingClientRect();
+    return { x: e.clientX - r.left, y: e.clientY - r.top };
+  };
+  const onPinchDown = (e) => {
+    if (!GESTURE.pinchZoom || !GESTURE.pointers.includes(e.pointerType)) return;
+    touchPointsRef.current.set(e.pointerId, localOf(e));
+    if (touchPointsRef.current.size !== 2 || isTransitioningRef.current || isAnimating()) return;
+    const [a, b] = [...touchPointsRef.current.values()];
+    const vp = useViewportStore.getState();
+    pinchRef.current = { d0: Math.hypot(a.x - b.x, a.y - b.y), m0: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }, z0: vp.zoomLevel, c0: { x: vp.centerX, y: vp.centerY } };
+    rendererCancelPan();
+    isCanvasPanningRef.current = false;
+    emptyTapRef.current = null;
+    stageActiveNodeIdRef.current = null;
+    stageDragCommittedRef.current = false;
+    isDraggingRef.current = false;
+    setPressedNodeId(null);
+    setPinching(true);
+  };
+  const onPinchMove = (e) => {
+    if (!touchPointsRef.current.has(e.pointerId)) return;
+    touchPointsRef.current.set(e.pointerId, localOf(e));
+    const p = pinchRef.current;
+    if (!p || touchPointsRef.current.size < 2) return;
+    const [a, b] = [...touchPointsRef.current.values()];
+    const fit = useViewportStore.getState().fitScale;
+    const z = pinchZoom(p.z0 / fit, p.d0, Math.hypot(a.x - b.x, a.y - b.y)) * fit;
+    const m = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+    const cw = canvasSizeRef.current.width || containerRef.current?.clientWidth || 800;
+    const ch = canvasSizeRef.current.height || containerRef.current?.clientHeight || 600;
+    const t = zoomAround({ x: cw / 2 - p.c0.x * p.z0, y: ch / 2 - p.c0.y * p.z0 }, p.z0, z, p.m0, GESTURE.twoFingerPan ? m : p.m0);
+    setZoom(z);
+    setCenter((cw / 2 - t.x) / z, (ch / 2 - t.y) / z);
+  };
+  const onPinchUp = (e) => {
+    if (!touchPointsRef.current.delete(e.pointerId)) return;
+    if (pinchRef.current && touchPointsRef.current.size < 2) {
+      pinchRef.current = null;
+      pinchEndedAtRef.current = performance.now();
+      setPinching(false);
     }
-    const liveZoom = useViewportStore.getState().zoomLevel;
-    const projected = Math.max(ZOOM_MIN2, liveZoom * (1 - e.evt.deltaY / 1e3));
-    if (navStack.length > 1 && projected <= ZOOM_NAV_OUT_THRESHOLD && !isTransitioningRef.current && !isAnimating()) {
-      e.evt.preventDefault();
-      const now = Date.now();
-      if (now - lastZoomTransitionRef.current >= ZOOM_COOLDOWN) {
-        lastZoomTransitionRef.current = now;
-        handleNavigateBack(navStack.length - 2);
-        baseZoomRef.current = 1;
-      }
+  };
+  const inPinch = () => pinchRef.current !== null || touchPointsRef.current.size > 1 || performance.now() - pinchEndedAtRef.current < 300;
+  const handleStageTouchStart = useCallback4((e) => {
+    if (inPinch() || e.evt.touches.length > 1) return;
+    handleStageMouseDown(e);
+  }, [handleStageMouseDown]);
+  const handleStageTouchMove = useCallback4((e) => {
+    if (inPinch() || e.evt.touches.length > 1) return;
+    handleStageMouseMove(e);
+  }, [handleStageMouseMove]);
+  const handleStageTouchEnd = useCallback4((e) => {
+    if (inPinch()) {
+      isCanvasPanningRef.current = false;
       return;
     }
+    handleStageMouseUp(e);
+  }, [handleStageMouseUp]);
+  const handleWheel = useCallback4((e) => {
     rendererHandleWheel(e);
-  }, [rendererHandleWheel, navStack, setZoom, isAnimating, handleNavigateBack]);
-  const lastHoverCheckRef = useRef9(0);
+  }, [rendererHandleWheel]);
+  const lastHoverCheckRef = useRef10(0);
   const handleCanvasMouseMove = useCallback4((e) => {
+    if (touchModeRef.current || isEmulatedMouse(e.nativeEvent)) return;
     if (!containerRef.current || isDraggingRef.current || isCanvasPanningRef.current) {
       setHoveredNode(null);
       return;
@@ -2771,7 +2507,7 @@ function VisualliCanvas(props) {
       if (clearTooltipTimerRef.current) clearTimeout(clearTooltipTimerRef.current);
       clearTooltipTimerRef.current = setTimeout(() => {
         if (!tooltipHoverRef.current && !keepTooltipOpenRef.current) setHoveredNode(null);
-      }, 150);
+      }, PEEK.hoverClose);
     } else {
       if (clearTooltipTimerRef.current) {
         clearTimeout(clearTooltipTimerRef.current);
@@ -2779,7 +2515,7 @@ function VisualliCanvas(props) {
       }
     }
   }, [nodes, viewport, spatialIndexRef]);
-  useEffect6(() => {
+  useEffect7(() => {
     const handleKeepTooltipOpen = (event) => {
       keepTooltipOpenRef.current = event.detail.keep;
     };
@@ -2788,35 +2524,84 @@ function VisualliCanvas(props) {
       window.removeEventListener("keepNodeTooltipOpen", handleKeepTooltipOpen);
     };
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     return () => {
       if (clearTooltipTimerRef.current) clearTimeout(clearTooltipTimerRef.current);
       spatialIndexRef.current?.clear();
       if (dragMoveRafRef.current !== null) cancelAnimationFrame(dragMoveRafRef.current);
     };
   }, []);
-  const handleZoomIn = useCallback4(() => setZoom(Math.min(viewport.zoomLevel * 1.2, 5)), [viewport.zoomLevel, setZoom]);
-  const handleZoomOut = useCallback4(() => {
-    setZoom(Math.max(viewport.zoomLevel / 1.2, ZOOM_MIN2));
-  }, [viewport.zoomLevel, setZoom]);
+  const activateNode = useCallback4((node) => {
+    const childLayer = doc ? getChildLayerForNode(doc, node.id, currentLayerId ?? "") : null;
+    if (touchModeRef.current && childLayer && pinnedIdRef.current === node.id) {
+      setPinnedId(null);
+      handleNavigate(node.id);
+    } else if (touchModeRef.current && (node.description || childLayer)) openSheet(node);
+    else if (childLayer) handleNavigate(node.id);
+    onNodeClick?.(node);
+  }, [doc, currentLayerId, handleNavigate, onNodeClick]);
+  const stepInside = useCallback4((nodeId) => {
+    setHoveredNode(null);
+    handleNavigate(nodeId);
+  }, [handleNavigate]);
+  useEffect7(() => {
+    if (!hoveredNode) tooltipHoverRef.current = false;
+  }, [hoveredNode]);
+  const handleKeyDown = useCallback4((e) => {
+    if (e.target.closest('input, textarea, [contenteditable="true"]')) return;
+    const cmd = e.metaKey || e.ctrlKey;
+    if (cmd && !e.altKey) {
+      if (e.key === "+" || e.key === "=") {
+        e.preventDefault();
+        setZoom(viewport.zoomLevel * VIEW2.zoomStep);
+      } else if (e.key === "-" || e.key === "_") {
+        e.preventDefault();
+        setZoom(viewport.zoomLevel / VIEW2.zoomStep);
+      } else if (e.key === "0") {
+        e.preventDefault();
+        fitToScreen();
+      }
+      return;
+    }
+    if (e.altKey || e.shiftKey) return;
+    if (e.key === "Escape" && pinnedIdRef.current) {
+      e.preventDefault();
+      setPinnedId(null);
+    } else if ((e.key === "Escape" || e.key === "Backspace") && navStack.length > 1) {
+      e.preventDefault();
+      handleNavigateBack(navStack.length - 2);
+    }
+  }, [navStack.length, handleNavigateBack, setZoom, viewport.zoomLevel, fitToScreen]);
   if (!doc) {
-    return /* @__PURE__ */ jsx11("div", { className, style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", background: bgColor, ...style }, children: /* @__PURE__ */ jsx11("span", { style: { color: isDark ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.3)", fontSize: 14 }, children: "No document" }) });
+    return /* @__PURE__ */ jsx9("div", { className: `vi-map ${className}`, ...design.attrs, style: { display: "flex", alignItems: "center", justifyContent: "center", ...style }, children: /* @__PURE__ */ jsx9("span", { className: "vi-text-body-sm", style: { color: "var(--ink-muted)" }, children: "No document" }) });
   }
   const hasBackOption = navStack.length > 1;
-  return /* @__PURE__ */ jsxs7(
+  const currentLayerTitle = navStack[navStack.length - 1]?.label ?? "";
+  const peekNode = hoveredNode ? nodes.get(hoveredNode.nodeId) : void 0;
+  const pinnedNode = pinnedId ? nodes.get(pinnedId) : void 0;
+  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;
+  const peekHasChild = !!(peekNode && doc && getChildLayerForNode(doc, peekNode.id, currentLayerId ?? ""));
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       ref: containerRef,
-      className,
-      style: {
-        position: "relative",
-        overflow: "hidden",
-        userSelect: "none",
-        background: bgColor,
-        width: "100%",
-        height: "100%",
-        ...style
+      className: `vi-map${touchMode ? " is-touch" : ""}${compact ? " is-compact" : ""}${medium ? " is-medium" : ""}${pinching ? " is-pinching" : ""}${props.app ? " is-app" : ""} ${className}`,
+      ...design.attrs,
+      "data-reveal": instantReveal ? "instant" : void 0,
+      role: "group",
+      "aria-label": `${doc.meta?.title ?? "Map"}${currentLayerTitle ? `, ${currentLayerTitle}` : ""}`,
+      onKeyDown: handleKeyDown,
+      tabIndex: -1,
+      onPointerDownCapture: (e) => {
+        onPinchDown(e);
+        if (!e.target.closest("button, a, input")) containerRef.current?.focus({ preventScroll: true });
       },
+      onPointerMoveCapture: onPinchMove,
+      onPointerUpCapture: onPinchUp,
+      onPointerCancelCapture: onPinchUp,
+      style: { position: "relative", overflow: "hidden", userSelect: "none", width: "100%", height: "100%", outline: "none", ...motionVars(), ...style },
       onMouseMove: handleCanvasMouseMove,
       onMouseLeave: () => {
         if (!tooltipHoverRef.current && !keepTooltipOpenRef.current) {
@@ -2824,7 +2609,8 @@ function VisualliCanvas(props) {
         }
       },
       children: [
-        /* @__PURE__ */ jsx11("div", { ref: canvasWrapperRef, style: { position: "relative", zIndex: 1, pointerEvents: "auto" }, children: /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsx9("div", { className: "vi-map__immersion", style: { background: immersionFill ?? "transparent" }, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx9("div", { ref: canvasWrapperRef, style: { position: "relative", zIndex: 1, pointerEvents: "auto" }, children: fontsReady && /* @__PURE__ */ jsxs3(
           KonvaStage_default,
           {
             ref: stageRef,
@@ -2837,56 +2623,59 @@ function VisualliCanvas(props) {
             onTouchMove: handleStageTouchMove,
             onTouchEnd: handleStageTouchEnd,
             children: [
-              /* @__PURE__ */ jsx11(KonvaContainerLayer, { nodes: flatNodes, containers, isDark }),
-              /* @__PURE__ */ jsx11(
-                KonvaEdgeLayer,
-                {
-                  nodes: flatNodes,
-                  connections,
-                  isDark,
-                  isDragging: isDraggingState
-                }
-              ),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx9(KonvaContainerLayer, { nodes: flatNodes, containers, connections, design }),
+              /* @__PURE__ */ jsx9(KonvaEdgeLayer, { nodes: flatNodes, connections, design, isDragging: isDraggingState, clock }),
+              /* @__PURE__ */ jsx9(
                 KonvaNodeLayer,
                 {
+                  design,
+                  clock,
                   isTransitioning,
                   isDragging: isDraggingState,
                   hoveredNodeId: pointerNodeId,
-                  pressedNodeId
+                  pressedNodeId,
+                  selectedNodeId,
+                  focusedNodeId,
+                  touch: touchMode,
+                  peekedNodeId: touchMode ? pinnedId : null
                 }
-              )
+              ),
+              /* @__PURE__ */ jsx9(KonvaContainerLabelLayer, { containers, connections, design })
             ]
           }
         ) }),
-        canvasContextMenu && hasBackOption && /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx9(
+          A11yLayer,
+          {
+            nodes: flatNodes,
+            label: `Ideas in ${currentLayerTitle || "this map"}`,
+            hasChildLayer: (id) => !!getChildLayerForNode(doc, id, currentLayerId ?? ""),
+            onActivate: activateNode,
+            onFocusNode: setFocusedNodeId,
+            announcement: hasBackOption ? `Now inside ${currentLayerTitle}` : void 0
+          }
+        ),
+        canvasContextMenu && hasBackOption && /* @__PURE__ */ jsx9(
           "div",
           {
             role: "menu",
             "aria-label": "Canvas options",
             style: {
               position: "absolute",
-              zIndex: 60,
+              zIndex: "var(--z-menu)",
               pointerEvents: "auto",
               left: `${Math.min(canvasContextMenu.x, Math.max(8, (canvasSizeRef.current.width || 800) - 152))}px`,
               top: `${Math.min(canvasContextMenu.y, Math.max(8, (canvasSizeRef.current.height || 600) - 72))}px`
             },
             onContextMenu: (e) => e.preventDefault(),
             onPointerDown: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ jsx11(
+            children: /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
-                style: {
-                  padding: "6px 16px",
-                  borderRadius: "10px",
-                  border: `1px solid ${isDark ? "#333330" : "#DDD9D0"}`,
-                  background: isDark ? "#1C1C1A" : "#FAF8F4",
-                  color: isDark ? "#F0EDE6" : "#1A1A18",
-                  cursor: "pointer",
-                  fontSize: 13,
-                  boxShadow: "0 4px 12px rgba(0,0,0,0.15)"
-                },
+                role: "menuitem",
+                className: "vi-iconbtn vi-iconbtn--surface",
+                style: { width: "auto", padding: "6px var(--space-4)", boxShadow: "var(--shadow-pop)" },
                 onClick: () => {
                   setCanvasContextMenu(null);
                   handleNavigateBack(navStack.length - 2);
@@ -2896,32 +2685,41 @@ function VisualliCanvas(props) {
             )
           }
         ),
-        /* @__PURE__ */ jsx11(NavigationStack_default, { stack: navStack, onNavigateBack: handleNavigateBack, isDark, top: navigationStackTop, left: navigationStackLeft }),
-        /* @__PURE__ */ jsx11("div", { "data-help": "zoom-controls", style: { position: "absolute", top: "24px", right: "16px", zIndex: 50, pointerEvents: "auto" }, children: /* @__PURE__ */ jsx11(ZoomControls_default, { isDark }) }),
-        renderOverlay?.({ isDark, containerWidth: canvasSizeRef.current.width || 0, containerHeight: canvasSizeRef.current.height || 0 }),
-        hoveredNode && hoveredNodePosition && viewport.zoomLevel < 3 && viewport.zoomLevel >= TEXT_LABEL_HIDE_BELOW_ZOOM3 && (() => {
-          const nodeData = nodes.get(hoveredNode.nodeId);
-          const borderColor = nodeData?.color ? darkenHexColor2(nodeData.color, 0.13) : "#5BA8D4";
-          const VP_PAD = 8;
-          const HALF_W = 160;
-          const APPROX_H = 90;
-          const containerW = canvasSizeRef.current.width || 800;
-          const safeLeft = Math.max(HALF_W + VP_PAD, Math.min(hoveredNodePosition.screenX, containerW - HALF_W - VP_PAD));
-          const rawTop = hoveredNodePosition.screenY - 60 * hoveredNodePosition.zoom;
-          const safeTop = Math.max(VP_PAD + APPROX_H, rawTop);
-          return /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx9(NavigationStack_default, { stack: navStack, onNavigateBack: handleNavigateBack, top: navigationStackTop, left: navigationStackLeft }),
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            className: "vi-map__ctrls",
+            style: props.controlsPosition === "bottom-right" ? { top: "auto", bottom: pinnedNode && touchMode ? `calc(var(--space-4) + ${sheetHeight}px)` : "var(--space-4)" } : void 0,
+            children: /* @__PURE__ */ jsx9(ZoomControls, { onFit: fitToScreen, touch: touchMode })
+          }
+        ),
+        renderOverlay?.({ isDark, theme: design.theme, containerWidth: canvasSizeRef.current.width || 0, containerHeight: canvasSizeRef.current.height || 0 }),
+        touchMode && pinnedNode && /* @__PURE__ */ jsx9(
+          PeekSheet,
+          {
+            node: pinnedNode,
+            anchors,
+            height: sheetHeight,
+            expanded: sheetExpanded,
+            onToggleExpanded: () => setSheetExpanded((v) => !v),
+            onClose: () => setPinnedId(null),
+            onStepInside: pinnedHasChild ? () => {
+              setPinnedId(null);
+              handleNavigate(pinnedNode.id);
+            } : void 0,
+            renderContent: renderNodeContent ? (summary) => renderNodeContent({ summary, nodeId: pinnedNode.id, nodeColor: pinnedNode.color, zoom: viewport.zoomLevel }) : void 0
+          }
+        ),
+        !touchMode && hoveredNode && hoveredNodePosition && peekNode && (() => {
+          const rings = ringsFor3(peekNode.branchCount);
+          const half = nodeRadii3(peekNode).rx * (rings.length ? rings[rings.length - 1].scale : 1) * hoveredNodePosition.zoom;
+          const at = peekPosition({ x: hoveredNodePosition.screenX, y: hoveredNodePosition.screenY, half }, { w: canvasSizeRef.current.width || 800, h: canvasSizeRef.current.height || 600 });
+          return /* @__PURE__ */ jsx9(
             "div",
             {
-              "data-node-tooltip": "true",
-              style: {
-                position: "absolute",
-                zIndex: 50,
-                left: safeLeft,
-                top: safeTop,
-                transform: "translate(-50%, -100%)",
-                transformOrigin: "bottom center",
-                pointerEvents: "auto"
-              },
+              className: "vi-map__fact",
+              style: { left: at.left, top: at.top, pointerEvents: "auto", zIndex: "var(--z-card)" },
               onMouseEnter: () => {
                 tooltipHoverRef.current = true;
                 if (clearTooltipTimerRef.current) {
@@ -2934,22 +2732,17 @@ function VisualliCanvas(props) {
                 if (clearTooltipTimerRef.current) clearTimeout(clearTooltipTimerRef.current);
                 clearTooltipTimerRef.current = setTimeout(() => {
                   if (!keepTooltipOpenRef.current) setHoveredNode(null);
-                }, 100);
+                }, PEEK.hoverClose);
               },
-              children: /* @__PURE__ */ jsx11("div", { style: { maxWidth: "20rem", minWidth: "12rem", maxHeight: "15rem", overflowY: "auto" }, children: /* @__PURE__ */ jsx11(SketchyBoxKonva_default, { fill: "#ffffff", stroke: borderColor, backStroke: borderColor, padding: "1rem 1.25rem", children: /* @__PURE__ */ jsx11("p", { style: {
-                fontFamily: "'Playpen Sans', cursive",
-                fontSize: `${DESCRIPTION_TEXT_BASE_FONT_PX2}px`,
-                fontWeight: 300,
-                color: "#000000",
-                textAlign: "center",
-                lineHeight: 1.6,
-                margin: 0
-              }, children: renderNodeContent ? renderNodeContent({
-                summary: hoveredNode.summary,
-                nodeId: hoveredNode.nodeId,
-                nodeColor: nodeData?.color,
-                zoom: viewport.zoomLevel
-              }) : hoveredNode.summary }) }) })
+              children: /* @__PURE__ */ jsx9(
+                PeekCard,
+                {
+                  node: peekNode,
+                  anchors,
+                  onStepInside: peekHasChild ? () => stepInside(peekNode.id) : void 0,
+                  renderContent: renderNodeContent ? (summary) => renderNodeContent({ summary, nodeId: peekNode.id, nodeColor: peekNode.color, zoom: viewport.zoomLevel }) : void 0
+                }
+              )
             }
           );
         })()
@@ -2959,91 +2752,29 @@ function VisualliCanvas(props) {
 }
 
 // src/VisualliRenderer.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
-function useSystemDark() {
-  const mq = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
-  const [dark, setDark] = useState4(mq?.matches ?? false);
-  useEffect7(() => {
-    if (!mq) return;
-    const handler = (e) => setDark(e.matches);
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, [mq]);
-  return dark;
-}
-function useFontInjection() {
-  useEffect7(() => {
-    if (typeof document === "undefined") return;
-    const links = [
-      "https://fonts.googleapis.com",
-      "https://fonts.gstatic.com",
-      "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Nunito+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&display=swap",
-      "https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@300;400;600;800&family=Story+Script:wght@400&display=swap"
-    ];
-    links.forEach((href, i) => {
-      const id = `visualli-font-${i}`;
-      if (!document.getElementById(id)) {
-        const link = document.createElement("link");
-        link.id = id;
-        link.rel = i < 2 ? "preconnect" : "stylesheet";
-        link.href = href;
-        if (i === 1) link.crossOrigin = "anonymous";
-        document.head.appendChild(link);
-      }
-    });
-  }, []);
-}
-function EmptyState({ isDark }) {
-  const bg = isDark ? "#131311" : "#F5F3EF";
-  const fg = isDark ? "rgba(240,237,230,0.35)" : "rgba(26,26,24,0.35)";
-  const bd = isDark ? "#2A2A28" : "#DDD9D0";
-  const code = { fontFamily: "monospace", fontSize: 12, padding: "1px 4px", borderRadius: 4, background: isDark ? "#222220" : "#E8E4DC", border: `1px solid ${bd}` };
-  return /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", gap: 16, background: bg, color: fg, fontFamily: "'Nunito', system-ui, sans-serif" }, children: [
-    /* @__PURE__ */ jsxs8("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", stroke: fg, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-      /* @__PURE__ */ jsx12("rect", { x: "10", y: "6", width: "28", height: "36", rx: "3" }),
-      /* @__PURE__ */ jsx12("line", { x1: "16", y1: "16", x2: "32", y2: "16" }),
-      /* @__PURE__ */ jsx12("line", { x1: "16", y1: "22", x2: "32", y2: "22" }),
-      /* @__PURE__ */ jsx12("line", { x1: "16", y1: "28", x2: "26", y2: "28" })
-    ] }),
-    /* @__PURE__ */ jsxs8("div", { style: { textAlign: "center", lineHeight: 1.7 }, children: [
-      /* @__PURE__ */ jsx12("p", { style: { margin: 0, fontSize: 15, fontWeight: 600, color: isDark ? "rgba(240,237,230,0.7)" : "rgba(26,26,24,0.7)" }, children: "No .visualli file provided" }),
-      /* @__PURE__ */ jsxs8("p", { style: { margin: "4px 0 0", fontSize: 13 }, children: [
-        "Pass a ",
-        /* @__PURE__ */ jsx12("code", { style: code, children: "visualliFile" }),
-        " or ",
-        /* @__PURE__ */ jsx12("code", { style: code, children: "visualliString" }),
-        " prop."
-      ] })
-    ] })
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var stateBox = { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", gap: "var(--space-3)", padding: "var(--space-7)", boxSizing: "border-box", textAlign: "center", color: "var(--ink-muted)", background: "var(--canvas)" };
+function StateNote({ topic, title, children, role }) {
+  return /* @__PURE__ */ jsxs4("div", { className: "vi-map", style: stateBox, role, "aria-live": role === "status" ? "polite" : void 0, children: [
+    /* @__PURE__ */ jsx10("svg", { width: "64", height: "52", viewBox: "-32 -26 64 52", "aria-hidden": "true", children: /* @__PURE__ */ jsx10("path", { d: blobPath3(shapeForLevel(0), 26, 20), fill: `var(--topic-${topic})`, stroke: `var(--topic-${topic}-ring)`, strokeWidth: "2" }) }),
+    /* @__PURE__ */ jsx10("p", { className: "vi-text-label", style: { margin: 0, color: "var(--ink)" }, children: title }),
+    children && /* @__PURE__ */ jsx10("div", { className: "vi-text-body-sm", style: { margin: 0, maxWidth: 480, overflowWrap: "anywhere" }, children })
   ] });
 }
-function LoadingState({ isDark }) {
-  const bg = isDark ? "#131311" : "#F5F3EF";
-  const fg = isDark ? "rgba(240,237,230,0.5)" : "rgba(26,26,24,0.5)";
-  const dot = isDark ? "rgba(240,237,230,0.6)" : "rgba(26,26,24,0.45)";
-  return /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", gap: 16, background: bg, color: fg, fontFamily: "'Nunito', system-ui, sans-serif" }, children: [
-    /* @__PURE__ */ jsx12("div", { style: { display: "flex", gap: 8 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx12("div", { style: { width: 8, height: 8, borderRadius: "50%", background: dot, animation: `vr-pulse 1.2s ease-in-out ${i * 0.2}s infinite` } }, i)) }),
-    /* @__PURE__ */ jsx12("style", { children: `@keyframes vr-pulse{0%,80%,100%{opacity:.2;transform:scale(.9)}40%{opacity:1;transform:scale(1.1)}}` }),
-    /* @__PURE__ */ jsx12("p", { style: { margin: 0, fontSize: 14 }, children: "Loading .visualli file\u2026" })
+function EmptyState() {
+  return /* @__PURE__ */ jsxs4(StateNote, { topic: "stone", title: "Nothing to show yet", children: [
+    "Pass a ",
+    /* @__PURE__ */ jsx10("code", { style: { fontFamily: "var(--font-mono)" }, children: "visualliFile" }),
+    " or ",
+    /* @__PURE__ */ jsx10("code", { style: { fontFamily: "var(--font-mono)" }, children: "visualliString" }),
+    "."
   ] });
 }
-function ErrorState({ message, isDark }) {
-  const bg = isDark ? "#131311" : "#F5F3EF";
-  const bd = isDark ? "#3a1f1f" : "#F0CECE";
-  const card = isDark ? "#1e1212" : "#FFF5F5";
-  const head = isDark ? "#F87171" : "#DC2626";
-  const body = isDark ? "rgba(248,113,113,0.8)" : "rgba(180,40,40,0.8)";
-  return /* @__PURE__ */ jsx12("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", padding: "24px", background: bg, fontFamily: "'Nunito', system-ui, sans-serif" }, children: /* @__PURE__ */ jsxs8("div", { style: { maxWidth: 480, width: "100%", padding: "20px 24px", borderRadius: 12, border: `1px solid ${bd}`, background: card }, children: [
-    /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }, children: [
-      /* @__PURE__ */ jsxs8("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: head, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx12("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx12("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-        /* @__PURE__ */ jsx12("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
-      ] }),
-      /* @__PURE__ */ jsx12("span", { style: { fontSize: 15, fontWeight: 700, color: head }, children: "Failed to parse .visualli file" })
-    ] }),
-    /* @__PURE__ */ jsx12("p", { style: { margin: 0, fontSize: 13, color: body, lineHeight: 1.6, wordBreak: "break-word", fontFamily: "monospace" }, children: message })
-  ] }) });
+function LoadingState() {
+  return /* @__PURE__ */ jsx10(StateNote, { topic: "teal", title: "Opening the map\u2026", role: "status" });
+}
+function ErrorState({ message }) {
+  return /* @__PURE__ */ jsx10(StateNote, { topic: "berry", title: "This map couldn't be opened", role: "alert", children: /* @__PURE__ */ jsx10("code", { style: { fontFamily: "var(--font-mono)" }, children: message }) });
 }
 var WORKER_SCRIPT = `
 self.onmessage = function(e) {
@@ -3055,6 +2786,7 @@ self.onmessage = function(e) {
       layers: new Map(),
       layersByLevel: new Map(),
       rootLayer: null,
+      extensions: {},
     };
     for (var i = 0; i < lines.length; i++) {
       var line = lines[i].trim();
@@ -3070,6 +2802,8 @@ self.onmessage = function(e) {
         if (!doc.layersByLevel.has(obj.level)) doc.layersByLevel.set(obj.level, []);
         doc.layersByLevel.get(obj.level).push(obj);
         if (obj.level === 0) doc.rootLayer = obj;
+      } else if (obj.type === 'extension' && typeof obj.id === 'string') {
+        doc.extensions[obj.id] = Array.isArray(obj.data) ? obj.data : [];
       }
     }
     if (!doc.meta)      throw new Error('Missing required meta section');
@@ -3088,9 +2822,9 @@ function getWorkerUrl() {
   return _workerUrl;
 }
 function useAsyncParse(content, useWorker) {
-  const [state, setState] = useState4({ status: "idle" });
-  const workerRef = useRef10(null);
-  useEffect7(() => {
+  const [state, setState] = useState5({ status: "idle" });
+  const workerRef = useRef11(null);
+  useEffect8(() => {
     if (!content) {
       setState({ status: "idle" });
       return;
@@ -3132,16 +2866,16 @@ function useAsyncParse(content, useWorker) {
       cancelled = true;
     };
   }, [content, useWorker]);
-  useEffect7(() => () => {
+  useEffect8(() => () => {
     workerRef.current?.terminate();
   }, []);
   return state;
 }
 function useFileText(file) {
-  const [text, setText] = useState4(void 0);
-  const [error, setError] = useState4(void 0);
-  const [loading, setLoading] = useState4(false);
-  useEffect7(() => {
+  const [text, setText] = useState5(void 0);
+  const [error, setError] = useState5(void 0);
+  const [loading, setLoading] = useState5(false);
+  useEffect8(() => {
     if (!file) {
       setText(void 0);
       setError(void 0);
@@ -3190,41 +2924,58 @@ function VisualliRenderer({
   visualliString,
   visualliFile,
   theme = "light",
+  comfort,
+  respectForcedColors,
+  layout,
+  controlsPosition,
+  app,
   width = "100%",
   height = "100%",
   useWorker = true,
   chromaticImmersion = false,
+  fontBaseUrl,
+  loadWebFonts,
   className,
   style
 }) {
-  useFontInjection();
-  const systemDark = useSystemDark();
-  const isDark = theme === "dark" ? true : theme === "light" ? false : systemDark;
+  const design = useDesign({ theme, comfort, respectForcedColors });
+  useState5(() => {
+    ensureDesignSystemStyles({ fontBaseUrl, loadWebFonts });
+    return true;
+  });
   const cssWidth = typeof width === "number" ? `${width}px` : width;
   const cssHeight = typeof height === "number" ? `${height}px` : height;
   const { text: fileText, error: fileReadError, loading: fileReading } = useFileText(visualliFile);
   const rawContent = fileText ?? visualliString;
   const parseState = useAsyncParse(rawContent, useWorker);
-  const resolvedDoc = useMemo8(() => {
+  const resolvedDoc = useMemo10(() => {
     if (parseState.status === "ready") return parseState.doc;
     return null;
   }, [parseState]);
   const wrapperStyle = { width: cssWidth, height: cssHeight, overflow: "hidden", ...style };
+  const attrs = design.attrs;
   if (!visualliString && !visualliFile) {
-    return /* @__PURE__ */ jsx12("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsx12(EmptyState, { isDark }) });
+    return /* @__PURE__ */ jsx10("div", { className, ...attrs, style: wrapperStyle, children: /* @__PURE__ */ jsx10(EmptyState, {}) });
   }
   if (fileReading || parseState.status === "loading") {
-    return /* @__PURE__ */ jsx12("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsx12(LoadingState, { isDark }) });
+    return /* @__PURE__ */ jsx10("div", { className, ...attrs, style: wrapperStyle, children: /* @__PURE__ */ jsx10(LoadingState, {}) });
   }
   if (fileReadError || parseState.status === "error") {
     const msg = fileReadError ?? (parseState.status === "error" ? parseState.message : "Unknown error");
-    return /* @__PURE__ */ jsx12("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsx12(ErrorState, { message: msg, isDark }) });
+    return /* @__PURE__ */ jsx10("div", { className, ...attrs, style: wrapperStyle, children: /* @__PURE__ */ jsx10(ErrorState, { message: msg }) });
   }
-  return /* @__PURE__ */ jsx12("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx10("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsx10(
     VisualliCanvas,
     {
       preParsedVisualli: resolvedDoc ?? void 0,
-      isDark,
+      theme,
+      comfort,
+      respectForcedColors,
+      layout,
+      controlsPosition,
+      app,
+      fontBaseUrl,
+      loadWebFonts,
       chromaticImmersion,
       style: { width: "100%", height: "100%" }
     }
@@ -3233,60 +2984,219 @@ function VisualliRenderer({
 
 // src/context/VisualliContext.tsx
 import { createContext, useContext } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var VisualliContext = createContext(null);
 function VisualliProvider({
   children
 }) {
   const value = {};
-  return /* @__PURE__ */ jsx13(VisualliContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx11(VisualliContext.Provider, { value, children });
 }
 function useVisualli() {
-  const ctx = useContext(VisualliContext);
-  if (!ctx) {
+  const ctx2 = useContext(VisualliContext);
+  if (!ctx2) {
     return {};
   }
-  return ctx;
+  return ctx2;
+}
+
+// src/hooks/useViewportNodes.ts
+import { useMemo as useMemo11, useRef as useRef12 } from "react";
+import { RBushSpatialIndex as RBushSpatialIndex3, getViewportVisibleNodes } from "@visualli/core";
+var SPATIAL_INDEX_THRESHOLD2 = 200;
+function useViewportNodes(nodes, levelFilter, skipCulling = false, isDragging = false) {
+  const { centerX, centerY, zoomLevel, canvasWidth, canvasHeight } = useViewportStore();
+  const indexRef = useRef12(null);
+  const nodesHashRef = useRef12(0);
+  const nodesHash = nodes.length;
+  if (nodesHash !== nodesHashRef.current) {
+    nodesHashRef.current = nodesHash;
+    indexRef.current = null;
+  }
+  return useMemo11(() => {
+    if (nodes.length === 0) return [];
+    if (!indexRef.current && nodes.length >= SPATIAL_INDEX_THRESHOLD2 && !skipCulling && !isDragging) {
+      indexRef.current = new RBushSpatialIndex3();
+      indexRef.current.bulkLoad(nodes.map((n) => ({
+        nodeId: n.id,
+        bounds: { minX: n.x, minY: n.y, maxX: n.x + n.width, maxY: n.y + n.height }
+      })));
+    }
+    return getViewportVisibleNodes({
+      nodes,
+      viewport: { centerX, centerY, zoomLevel, rotation: 0, visibleBounds: { minX: 0, minY: 0, maxX: 0, maxY: 0 } },
+      canvasWidth,
+      canvasHeight,
+      levelFilter,
+      skipCulling,
+      isDragging,
+      spatialIndex: indexRef.current,
+      spatialIndexThreshold: SPATIAL_INDEX_THRESHOLD2
+    });
+  }, [nodes, levelFilter, skipCulling, isDragging, centerX, centerY, zoomLevel, canvasWidth, canvasHeight]);
 }
+
+// src/index.ts
+import {
+  THEME_NAMES,
+  TOPICS,
+  DESIGN_SYSTEM_VERSION,
+  TOKENS as TOKENS3,
+  METRICS,
+  resolveTheme as resolveTheme2,
+  resolveComfort as resolveComfort2,
+  ideaColor as ideaColor2,
+  ideaStyle as ideaStyle2,
+  topicStyle,
+  getTokens,
+  BLOB_SHAPES,
+  RINGS as RINGS2,
+  blobPath as blobPath4,
+  blobRadius,
+  edgePath,
+  arrowPath,
+  shapeForLevel as shapeForLevel2,
+  IDEA as IDEA2,
+  LABEL_GROWTH,
+  ideaSize,
+  labelGrowth as labelGrowth3
+} from "@visualli/core";
+
+// src/components/KonvaNode.tsx
+import React12 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var KonvaNode = React12.memo(function KonvaNode2({
+  node,
+  zoomLevel,
+  isExternallyHovered = false,
+  isExternallyPressed = false,
+  isSelected = false,
+  isDragging = false,
+  design = DEFAULT_DESIGN
+}) {
+  return /* @__PURE__ */ jsx12(
+    KShape,
+    {
+      listening: false,
+      perfectDrawEnabled: false,
+      sceneFunc: (ctx2) => {
+        drawIdea(ctx2._context, node, design, zoomLevel, { ...IDLE, hovered: isExternallyHovered, pressed: isExternallyPressed, selected: isSelected }, {
+          shadows: !isDragging
+        });
+      }
+    }
+  );
+});
+var KonvaNode_default = KonvaNode;
+
+// src/components/KonvaEdge.tsx
+import { memo as memo4, useMemo as useMemo12 } from "react";
+import { connectorGeometry as connectorGeometry3 } from "@visualli/core";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var KonvaEdge = memo4(function KonvaEdge2({ sourceNode: from, targetNode: to, connection, zoomLevel = 1, design = DEFAULT_DESIGN }) {
+  const g = useMemo12(
+    () => prepareConnector(connectorGeometry3(from, to, design.metrics.edgeGap)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [from.x, from.y, from.width, from.level, from.branchCount, to.x, to.y, to.width, to.level, to.branchCount, design.metrics.edgeGap]
+  );
+  return /* @__PURE__ */ jsx13(
+    KShape,
+    {
+      listening: false,
+      perfectDrawEnabled: false,
+      sceneFunc: (ctx2) => {
+        drawConnector(ctx2._context, g, design, zoomLevel, connection?.style === "dashed", connection?.label);
+      }
+    }
+  );
+});
+var KonvaEdge_default = KonvaEdge;
+
+// src/components/KonvaContainer.tsx
+import { memo as memo5, useMemo as useMemo13 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var KonvaContainer = memo5(function KonvaContainer2({ nodes, label = "", zoomLevel = 1, design = DEFAULT_DESIGN }) {
+  const placed = useMemo13(() => {
+    const map = new Map(nodes.map((n) => [n.id, n]));
+    return layoutContainers([{ id: "c", label: label || void 0, nodeIds: nodes.map((n) => n.id) }], map, [], design)[0] ?? null;
+  }, [nodes, label, design]);
+  if (!placed) return null;
+  return /* @__PURE__ */ jsx14(
+    KShape,
+    {
+      listening: false,
+      perfectDrawEnabled: false,
+      sceneFunc: (ctx2) => {
+        drawHull(ctx2._context, placed.hull, design);
+        if (placed.pill) drawPill(ctx2._context, placed.pill, design, zoomLevel);
+      }
+    }
+  );
+});
+var KonvaContainer_default = KonvaContainer;
 export {
-  ACTIVE_BLOB_TYPES,
-  ALL_BLOB_SHAPES2 as ALL_BLOB_SHAPES,
-  BLOB_LAYER_CONFIG,
-  BLOB_TEXT_OFFSETS,
-  DESCRIPTION_TEXT_BASE_FONT_PX,
+  A11yLayer,
+  BLOB_SHAPES,
+  DEFAULT_DESIGN,
+  DESIGN_SYSTEM_VERSION,
+  DepthTrail,
+  IDEA2 as IDEA,
   KonvaContainer_default as KonvaContainer,
+  KonvaContainerLabelLayer,
   KonvaContainerLayer,
   KonvaEdge_default as KonvaEdge,
   KonvaEdgeLayer,
-  KonvaLayerTransitionAnimator,
   KonvaNode_default as KonvaNode,
   KonvaNodeLayer,
   KonvaStage_default as KonvaStage,
-  NODE_LAYER_CONFIG,
-  NODE_TEXT_BASE_FONT_PX,
+  LABEL_GROWTH,
+  METRICS,
   NavigationStack_default as NavigationStack,
-  SketchyBoxKonva_default as SketchyBoxKonva,
+  PeekCard,
+  RINGS2 as RINGS,
+  THEME_NAMES,
+  TOKENS3 as TOKENS,
+  TOPICS,
+  TermCard,
   VisualliCanvas,
   VisualliProvider,
   VisualliRenderer,
-  ZoomControls_default as ZoomControls,
-  buildBlobPathData,
+  ZoomControls,
+  arrowPath,
+  blobPath4 as blobPath,
+  blobRadius,
   calculateFitCenter,
   calculateFitView,
   calculateFitZoom,
-  computeEdgeLabelScale,
-  computeNodeTextScreenScale,
-  computeNodeTextWorldScale,
-  computeOverlayScale,
-  drawBlobPath,
-  getBlobTypeForLayer,
+  drawHull,
+  drawPill,
+  edgePath,
+  ensureDesignSystemStyles,
   getChildLayerForNode,
   getConnectionsForLayer,
   getLayerForNavigation,
-  konvaLayerTransitionAnimator,
-  useKonvaLayerTransition,
+  getTokens,
+  ideaColor2 as ideaColor,
+  ideaMeasure,
+  ideaSize,
+  ideaStyle2 as ideaStyle,
+  labelGrowth3 as labelGrowth,
+  layoutContainers,
+  loadCanvasFonts,
+  makeDesign,
+  measurePill,
+  paintVars,
+  resolveComfort2 as resolveComfort,
+  resolveDesign,
+  resolveTheme2 as resolveTheme,
+  shapeForLevel2 as shapeForLevel,
+  splitTerms,
+  topicStyle,
+  useDesign,
   useKonvaRenderer,
+  useLayerChoreography,
   useNodeStore,
+  useReaderEnv,
   useRenderConfigStore,
   useSelectionStore,
   useViewportNodes,