@visualli/react 0.1.7 → 0.2.0

package/dist/index.cjs

@@ -12,9 +12,9 @@ var __export = (target, all) => {
 };
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    for (let key2 of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key2) && key2 !== except)
+        __defProp(to, key2, { get: () => from[key2], enumerable: !(desc = __getOwnPropDesc(from, key2)) || desc.enumerable });
   }
   return to;
 };
@@ -31,44 +31,68 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  ACTIVE_BLOB_TYPES: () => import_core7.ACTIVE_BLOB_TYPES,
-  ALL_BLOB_SHAPES: () => import_core7.ALL_BLOB_SHAPES,
-  BLOB_LAYER_CONFIG: () => import_core7.BLOB_LAYER_CONFIG,
-  BLOB_TEXT_OFFSETS: () => import_core7.BLOB_TEXT_OFFSETS,
-  DESCRIPTION_TEXT_BASE_FONT_PX: () => import_core7.DESCRIPTION_TEXT_BASE_FONT_PX,
+  A11yLayer: () => A11yLayer,
+  BLOB_SHAPES: () => import_core19.BLOB_SHAPES,
+  DEFAULT_DESIGN: () => DEFAULT_DESIGN,
+  DESIGN_SYSTEM_VERSION: () => import_core19.DESIGN_SYSTEM_VERSION,
+  DepthTrail: () => DepthTrail,
+  IDEA: () => import_core19.IDEA,
   KonvaContainer: () => KonvaContainer_default,
+  KonvaContainerLabelLayer: () => KonvaContainerLabelLayer,
   KonvaContainerLayer: () => KonvaContainerLayer,
   KonvaEdge: () => KonvaEdge_default,
   KonvaEdgeLayer: () => KonvaEdgeLayer,
-  KonvaLayerTransitionAnimator: () => KonvaLayerTransitionAnimator,
   KonvaNode: () => KonvaNode_default,
   KonvaNodeLayer: () => KonvaNodeLayer,
   KonvaStage: () => KonvaStage_default,
-  NODE_LAYER_CONFIG: () => import_core7.NODE_LAYER_CONFIG,
-  NODE_TEXT_BASE_FONT_PX: () => import_core7.NODE_TEXT_BASE_FONT_PX,
+  LABEL_GROWTH: () => import_core19.LABEL_GROWTH,
+  METRICS: () => import_core19.METRICS,
   NavigationStack: () => NavigationStack_default,
-  SketchyBoxKonva: () => SketchyBoxKonva_default,
+  PeekCard: () => PeekCard,
+  RINGS: () => import_core19.RINGS,
+  THEME_NAMES: () => import_core19.THEME_NAMES,
+  TOKENS: () => import_core19.TOKENS,
+  TOPICS: () => import_core19.TOPICS,
+  TermCard: () => TermCard,
   VisualliCanvas: () => VisualliCanvas,
   VisualliProvider: () => VisualliProvider,
   VisualliRenderer: () => VisualliRenderer,
-  ZoomControls: () => ZoomControls_default,
-  buildBlobPathData: () => buildBlobPathData,
-  calculateFitCenter: () => import_core5.calculateFitCenter,
-  calculateFitView: () => import_core5.calculateFitView,
-  calculateFitZoom: () => import_core5.calculateFitZoom,
-  computeEdgeLabelScale: () => import_core7.computeEdgeLabelScale,
-  computeNodeTextScreenScale: () => import_core7.computeNodeTextScreenScale,
-  computeNodeTextWorldScale: () => import_core7.computeNodeTextWorldScale,
-  computeOverlayScale: () => import_core7.computeOverlayScale,
-  drawBlobPath: () => import_core7.drawBlobPath,
-  getBlobTypeForLayer: () => import_core7.getBlobTypeForLayer,
-  getChildLayerForNode: () => import_core5.getChildLayerForNode,
-  getConnectionsForLayer: () => import_core5.getConnectionsForLayer,
-  getLayerForNavigation: () => import_core5.getLayerForNavigation,
-  konvaLayerTransitionAnimator: () => konvaLayerTransitionAnimator,
-  useKonvaLayerTransition: () => useKonvaLayerTransition,
+  ZoomControls: () => ZoomControls,
+  arrowPath: () => import_core19.arrowPath,
+  blobPath: () => import_core19.blobPath,
+  blobRadius: () => import_core19.blobRadius,
+  calculateFitCenter: () => import_core3.calculateFitCenter,
+  calculateFitView: () => import_core3.calculateFitView,
+  calculateFitZoom: () => import_core3.calculateFitZoom,
+  drawHull: () => drawHull,
+  drawPill: () => drawPill,
+  edgePath: () => import_core19.edgePath,
+  ensureDesignSystemStyles: () => ensureDesignSystemStyles,
+  getChildLayerForNode: () => import_core3.getChildLayerForNode,
+  getConnectionsForLayer: () => import_core3.getConnectionsForLayer,
+  getLayerForNavigation: () => import_core3.getLayerForNavigation,
+  getTokens: () => import_core19.getTokens,
+  ideaColor: () => import_core19.ideaColor,
+  ideaMeasure: () => ideaMeasure,
+  ideaSize: () => import_core19.ideaSize,
+  ideaStyle: () => import_core19.ideaStyle,
+  labelGrowth: () => import_core19.labelGrowth,
+  layoutContainers: () => layoutContainers,
+  loadCanvasFonts: () => loadCanvasFonts,
+  makeDesign: () => makeDesign,
+  measurePill: () => measurePill,
+  paintVars: () => paintVars,
+  resolveComfort: () => import_core19.resolveComfort,
+  resolveDesign: () => resolveDesign,
+  resolveTheme: () => import_core19.resolveTheme,
+  shapeForLevel: () => import_core19.shapeForLevel,
+  splitTerms: () => splitTerms,
+  topicStyle: () => import_core19.topicStyle,
+  useDesign: () => useDesign,
   useKonvaRenderer: () => useKonvaRenderer,
+  useLayerChoreography: () => useLayerChoreography,
   useNodeStore: () => useNodeStore,
+  useReaderEnv: () => useReaderEnv,
   useRenderConfigStore: () => useRenderConfigStore,
   useSelectionStore: () => useSelectionStore,
   useViewportNodes: () => useViewportNodes,
@@ -79,11 +103,11 @@ module.exports = __toCommonJS(index_exports);
 
 // src/VisualliRenderer.tsx
 var import_react15 = require("react");
-var import_core14 = require("@visualli/core");
+var import_core16 = require("@visualli/core");
 
 // src/VisualliCanvas.tsx
 var import_react14 = require("react");
-var import_core13 = require("@visualli/core");
+var import_core15 = require("@visualli/core");
 
 // src/stores/useNodeStore.ts
 var import_zustand = require("zustand");
@@ -180,13 +204,16 @@ var useViewportStore = (0, import_zustand2.create)((set, get) => {
     ...init,
     canvasWidth: import_core.DEFAULT_CANVAS_WIDTH,
     canvasHeight: import_core.DEFAULT_CANVAS_HEIGHT,
+    fitScale: 1,
+    fitCenterX: 0,
+    fitCenterY: 0,
     pan: (dx, dy) => set((s) => {
       const updated = (0, import_core.recalculateViewportBounds)((0, import_core.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 = (0, import_core.recalculateViewportBounds)(
-        (0, import_core.zoomViewport)(delta, getVP(s), pivotX, pivotY, s.canvasWidth, s.canvasHeight),
+        (0, import_core.zoomViewport)(delta, getVP(s), pivotX, pivotY, s.canvasWidth, s.canvasHeight, s.fitScale),
         s.canvasWidth,
         s.canvasHeight
       );
@@ -197,10 +224,11 @@ var useViewportStore = (0, import_zustand2.create)((set, get) => {
       return { centerX: updated.centerX, centerY: updated.centerY, visibleBounds: updated.visibleBounds };
     }),
     setZoom: (level) => set((s) => {
-      const clamped = (0, import_core.clampZoom)(level);
+      const clamped = (0, import_core.clampZoom)(level, s.fitScale);
       const updated = (0, import_core.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 = (0, import_core.recalculateViewportBounds)(getVP(s), w, h);
       return { canvasWidth: w, canvasHeight: h, visibleBounds: updated.visibleBounds };
@@ -220,11 +248,11 @@ var useViewportStore = (0, import_zustand2.create)((set, get) => {
 // src/stores/stores.ts
 var import_zustand3 = require("zustand");
 var import_core2 = require("@visualli/core");
-var useSelectionStore = (0, import_zustand3.create)((set, get, store) => {
+var useSelectionStore = (0, import_zustand3.create)((set) => {
   import_core2.selectionStore.subscribe((state) => set(state));
   return import_core2.selectionStore.getState();
 });
-var useRenderConfigStore = (0, import_zustand3.create)((set, get, store) => {
+var useRenderConfigStore = (0, import_zustand3.create)((set) => {
   import_core2.renderConfigStore.subscribe((state) => set(state));
   return import_core2.renderConfigStore.getState();
 });
@@ -233,13 +261,10 @@ var useRenderConfigStore = (0, import_zustand3.create)((set, get, store) => {
 var import_react = require("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] = (0, import_react.useState)(0);
@@ -297,7 +322,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]);
@@ -317,17 +343,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 = (0, import_react.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;
@@ -341,7 +360,7 @@ function useKonvaRenderer({
     panAccumRef.current.y += deltaY;
     lastPanPointRef.current = { x: e.evt.clientX, y: e.evt.clientY };
   }, []);
-  const handleMouseUp = (0, import_react.useCallback)((e) => {
+  const handleMouseUp = (0, import_react.useCallback)(() => {
     if (isPanningRef.current) {
       isPanningRef.current = false;
       const { x, y } = panAccumRef.current;
@@ -349,348 +368,422 @@ 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 = (0, import_react.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
+// src/hooks/useLayerChoreography.ts
 var import_react2 = require("react");
+var import_core4 = require("@visualli/core");
 
-// src/animations/konvaLayerTransition.ts
+// src/utils/layerNavigation.ts
 var import_core3 = require("@visualli/core");
-var import_core4 = require("@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 = (0, import_core3.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;
+
+// src/hooks/useLayerChoreography.ts
+function useLayerChoreography(o) {
+  const { stageRef, canvasWrapperRef } = o;
+  const opts = (0, import_react2.useRef)(o);
+  opts.current = o;
+  const busy = (0, import_react2.useRef)(false);
+  const waiting = (0, import_react2.useRef)(false);
+  const anims = (0, import_react2.useRef)([]);
+  const timers = (0, import_react2.useRef)([]);
+  const after = (0, import_react2.useRef)([]);
+  const clear = (0, import_react2.useCallback)(() => {
+    timers.current.forEach(clearTimeout);
+    timers.current = [];
+    after.current.forEach(cancelAnimationFrame);
+    after.current = [];
+    anims.current.forEach((a) => a.cancel());
+    anims.current = [];
+  }, []);
+  const applyViewport = (0, import_react2.useCallback)((vp) => {
+    const stage = stageRef.current;
+    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 = (0, import_react2.useCallback)((phase) => {
+    const stage = stageRef.current;
+    stage?.getLayers().forEach((l) => {
+      l.listening(phase === "end");
+    });
+    if (phase === "end") stage?.batchDraw();
+    opts.current.onLifecycle?.(phase);
+  }, [stageRef]);
+  const leave = (0, import_react2.useCallback)((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 = import_core4.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: (0, import_core4.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: (0, import_core4.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));
+    }, (0, import_core4.swapDelay)(dir, reduced)));
+  }, [applyViewport, lifecycle]);
+  const arriveRef = (0, import_react2.useRef)(() => {
+  });
+  const arrive = (0, import_react2.useCallback)(() => {
+    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 ? import_core4.MOTION.reduced.fade : import_core4.MOTION.settle.duration;
+    if (wrap && !reduced && typeof wrap.animate === "function") {
+      const a = wrap.animate([{ transform: `scale(${import_core4.MOTION.settle.fromScale})` }, { transform: "none" }], { duration: import_core4.MOTION.settle.duration, easing: (0, import_core4.cssEase)(import_core4.MOTION.settle.ease) });
+      anims.current.push(a);
+      settle = import_core4.MOTION.settle.duration;
+    }
+    timers.current.push(setTimeout(() => {
+      anims.current.forEach((a) => a.cancel());
+      anims.current = [];
+      if (wrap) {
+        wrap.style.willChange = "auto";
+        wrap.style.transformOrigin = "";
+      }
+      busy.current = false;
+      opts.current.onComplete();
+      lifecycle("end");
+    }, settle));
+  }, [canvasWrapperRef, lifecycle]);
+  arriveRef.current = arrive;
+  const stepInside = (0, import_react2.useCallback)((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 = (0, import_core3.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 = (0, import_react2.useCallback)((parent) => {
+    if (busy.current) return;
+    leave(canvasWrapperRef.current, "out", "50% 50%", parent, () => opts.current.onSwapBack());
+  }, [canvasWrapperRef, leave]);
+  const isTransitioning = (0, import_react2.useCallback)(() => busy.current, []);
+  (0, import_react2.useEffect)(() => () => {
+    clear();
+    busy.current = false;
+  }, [clear]);
+  return { stepInside, backOut, arrive, isTransitioning };
 }
-var KonvaLayerTransitionAnimator = class {
+
+// src/design/choreography.ts
+var import_core5 = require("@visualli/core");
+var clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+var RevealClock = class {
   constructor() {
-    this.rafId = null;
-    this.timers = [];
-    this._active = false;
+    this.t0 = -Infinity;
+    this.end = 0;
+    this.plan = (0, import_core5.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;
   }
-  get active() {
-    return this._active;
+  /** 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 = (0, import_core5.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 ? import_core5.MOTION.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);
   }
-  cancel() {
-    if (this.rafId !== null) {
-      cancelAnimationFrame(this.rafId);
-      this.rafId = null;
-    }
-    this.timers.forEach(clearTimeout);
-    this.timers = [];
-    this._active = false;
+  /** 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);
   }
-  // ── 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 = import_core4.ANIMATION_PHASES.ZOOM_IN.ZOOM_TO_TARGET;
-    const FADE_OUT_DELAY = import_core4.ANIMATION_PHASES.ZOOM_IN.FADE_OUT_START;
-    const FADE_OUT_DURATION = import_core4.ANIMATION_PHASES.ZOOM_IN.FADE_OUT;
-    const SWAP_AT_MS = import_core4.ANIMATION_PHASES.ZOOM_IN.CONTENT_SWAP;
-    const FADE_IN_DURATION = import_core4.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 = (0, import_core3.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 - (0, import_core3.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 = (0, import_core3.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);
+  /** True while the layer is still arriving. */
+  active(now = performance.now()) {
+    return now - this.t0 < this.end;
   }
-  // ── Zoom out to parent layer ───────────────────────────────────────────────
-  animateZoomOutToParent(current, parent, fromColor, toColor, cb) {
-    if (this._active) return;
-    this._active = true;
-    const FADE_OUT = import_core4.ANIMATION_PHASES.ZOOM_OUT.FADE_OUT;
-    const FADE_IN = import_core4.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 = (0, import_core3.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 = (0, import_core3.easeZoomTransition)(rawT);
-        state.viewport = { centerX: parent.centerX, centerY: parent.centerY, zoomLevel: lerp(parent.zoomLevel * 5, parent.zoomLevel, t) };
-        state.opacity = fi < OPACITY_SETTLE ? 0 : (0, import_core3.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);
+  /** 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);
     };
-    this.rafId = requestAnimationFrame(tick);
   }
-  _complete(onComplete) {
-    this.timers.forEach(clearTimeout);
-    this.timers = [];
-    this._active = false;
-    onComplete();
+  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 / import_core5.MOTION.reduced.fade);
+      out.scale = 1;
+      out.dx = 0;
+      out.dy = 0;
+      return true;
+    }
+    const r = import_core5.MOTION.reveal;
+    const t = el - this.plan.ideaDelay(i);
+    if (t >= r.duration) return false;
+    const e = t <= 0 ? 0 : (0, import_core5.easeBezier)(r.ease, t / r.duration);
+    const from = (0, import_core5.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 / import_core5.MOTION.reduced.fade);
+      out.draw = 1;
+      return true;
+    }
+    const c = import_core5.MOTION.connector;
+    const t = el - this.plan.connectorDelay(i);
+    if (t >= c.draw && t >= c.fade) return false;
+    const group = t <= 0 ? 0 : (0, import_core5.easeBezier)(c.ease, clamp01(t / c.fade));
+    const line = t <= 0 ? 0 : (0, import_core5.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) / import_core5.MOTION.hover.duration);
+    out.lift = tw.fromLift + (tw.to - tw.fromLift) * (0, import_core5.easeBezier)(import_core5.MOTION.hover.liftEase, u);
+    out.ring = tw.fromRing + (tw.to - tw.fromRing) * (0, import_core5.easeBezier)(import_core5.MOTION.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 < import_core5.MOTION.hover.duration) return true;
+    return false;
+  }
+  has(id) {
+    return this.tweens.has(id) || this.raised.has(id);
   }
 };
-var konvaLayerTransitionAnimator = new KonvaLayerTransitionAnimator();
-
-// src/utils/layerNavigation.ts
-var import_core5 = require("@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 = (0, import_react2.useRef)(false);
-  const canvasSizeRef = (0, import_react2.useRef)({ width: 800, height: 600 });
-  (0, import_react2.useEffect)(() => {
-    const update = () => {
-      const vp = useViewportStore.getState();
-      canvasSizeRef.current = { width: vp.canvasWidth || 800, height: vp.canvasHeight || 600 };
-    };
-    update();
-    const unsubscribe = useViewportStore.subscribe(update);
-    return unsubscribe;
-  }, []);
-  const applyViewport = (0, import_react2.useCallback)((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 = (0, import_react2.useCallback)((opacity) => {
-    if (canvasWrapperRef.current) {
-      canvasWrapperRef.current.style.opacity = String(opacity);
-    }
-  }, [canvasWrapperRef]);
-  const applyBgColor = (0, import_react2.useCallback)((color) => {
-    if (bgRef?.current) {
-      bgRef.current.style.backgroundColor = color;
-    }
-  }, [bgRef]);
-  const zoomIntoLayer = (0, import_react2.useCallback)((_doc, targetNode, childLayerId, childNodes, fromColor, toColor) => {
-    if (konvaLayerTransitionAnimator.active) return;
-    const vp = getState();
-    const stage = stageRef.current;
-    const w = stage?.width() ?? 800;
-    const h = stage?.height() ?? 600;
-    const fit = (0, import_core5.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 = (0, import_react2.useCallback)((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();
-          }
-        }
-      }
-    );
-  }, [getState, applyViewport, applyOpacity, applyBgColor, onSwapBack, onComplete, onViewportFrame, onViewportFinal, onPhaseChangeExt, onTransitionLifecycle]);
-  const isTransitioning = (0, import_react2.useCallback)(() => konvaLayerTransitionAnimator.active, []);
-  (0, import_react2.useEffect)(() => () => {
-    konvaLayerTransitionAnimator.cancel();
-  }, []);
-  return { zoomIntoLayer, zoomOutToParent, isTransitioning };
-}
 
 // src/components/KonvaStage.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/konvaCompat.ts
 var import_react_konva = require("react-konva");
 var KStage = import_react_konva.Stage;
 var KLayer = import_react_konva.Layer;
-var KGroup = import_react_konva.Group;
 var KShape = import_react_konva.Shape;
-var KRect = import_react_konva.Rect;
-var KText = import_react_konva.Text;
-var KLine = import_react_konva.Line;
-var KTextPath = import_react_konva.TextPath;
+
+// src/components/KonvaStage.tsx
+var import_konva = __toESM(require("konva"), 1);
+
+// src/design/runtime.ts
+var import_react3 = require("react");
+var import_core6 = require("@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.0). 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.heading { font-family: var(--font-ui); font-size: 17px; line-height: 24px; font-weight: 700; }\n.body { font-family: var(--font-ui); font-size: 15px; line-height: 22px; font-weight: 400; }\n.body-sm { font-family: var(--font-ui); font-size: 13px; line-height: 18px; font-weight: 400; }\n.label { font-family: var(--font-ui); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.01em; }\n.caption { font-family: var(--font-ui); font-size: 12px; line-height: 16px; font-weight: 400; }\n.node-root { font-family: var(--font-hand); font-size: 30px; line-height: 34px; font-weight: 700; }\n.node-label { font-family: var(--font-hand); font-size: 22px; line-height: 26px; font-weight: 700; }\n.edge-label { font-family: var(--font-note); font-size: 18px; line-height: 20px; font-weight: 500; }\n.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.0). 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; color-scheme: light; }\n[data-theme$="dark"] { 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; letter-spacing: 0.01em; }\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\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.vi-map :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"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::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.0";
+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.0" : "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 = import_core6.TYPE_STYLES[style];
+  return `${t.weight} ${t.size}px ${firstFamily(import_core6.TOKENS.light[t.family])}`;
+});
+var fontsEpochValue = 0;
+var fontListeners = /* @__PURE__ */ new Set();
+var fontsEpoch = () => fontsEpochValue;
+function useFontsEpoch() {
+  return (0, import_react3.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
 var import_jsx_runtime = require("react/jsx-runtime");
-var KonvaStage = (0, import_react3.forwardRef)(function KonvaStage2({
+var KonvaStage = (0, import_react4.forwardRef)(function KonvaStage2({
   children,
   onWheel,
   onMouseDown,
@@ -702,20 +795,32 @@ var KonvaStage = (0, import_react3.forwardRef)(function KonvaStage2({
   onTouchEnd,
   onStageReady
 }, ref) {
-  const internalRef = (0, import_react3.useRef)(null);
+  const internalRef = (0, import_react4.useRef)(null);
   const { centerX, centerY, zoomLevel, canvasWidth, canvasHeight } = useViewportStore();
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (internalRef.current) {
       if (typeof ref === "function") ref(internalRef.current);
       else if (ref) ref.current = internalRef.current;
       onStageReady?.(internalRef.current);
     }
   }, []);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
+    const stage = internalRef.current;
     return () => {
-      internalRef.current?.destroy();
+      stage?.destroy();
     };
   }, []);
+  import_konva.default.pixelRatio = currentPixelRatio();
+  (0, import_react4.useEffect)(() => watchPixelRatio((ratio) => {
+    import_konva.default.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;
@@ -739,7 +844,6 @@ var KonvaStage = (0, import_react3.forwardRef)(function KonvaStage2({
       onTouchMove,
       onTouchEnd,
       draggable: false,
-      pixelRatio: 1,
       children
     }
   );
@@ -748,1348 +852,999 @@ var KonvaStage_default = KonvaStage;
 
 // src/components/KonvaNodeLayer.tsx
 var import_react6 = require("react");
+var import_core9 = require("@visualli/core");
 
-// src/hooks/useViewportNodes.ts
-var import_react4 = require("react");
-var import_core6 = require("@visualli/core");
-var SPATIAL_INDEX_THRESHOLD = 200;
-function useViewportNodes(nodes, levelFilter, skipCulling = false, isDragging = false) {
-  const { centerX, centerY, zoomLevel, canvasWidth, canvasHeight } = useViewportStore();
-  const indexRef = (0, import_react4.useRef)(null);
-  const nodesHashRef = (0, import_react4.useRef)(0);
-  const nodesHash = nodes.length;
-  if (nodesHash !== nodesHashRef.current) {
-    nodesHashRef.current = nodesHash;
-    indexRef.current = null;
+// src/design/design.ts
+var import_core7 = require("@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 = import_core7.TOKENS[theme];
+  const ui = tokens["font-ui"];
+  const d = {
+    theme,
+    comfort: comfortIn,
+    tokens,
+    metrics: (0, import_core7.metricsFor)(comfortIn),
+    isDark: (0, import_core7.isDarkTheme)(theme),
+    fontHand: comfortIn.readableType ? ui : tokens["font-hand"],
+    fontNote: comfortIn.readableType ? ui : tokens["font-note"],
+    fontUi: ui,
+    labelScale: (0, import_core7.labelScale)(comfortIn),
+    nodeShadow: (0, import_core7.isContrastTheme)(theme) ? null : parseShadow((0, import_core7.isDarkTheme)(theme) ? import_core7.CANVAS_STYLE.node.shadowDark : import_core7.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: import_core7.CANVAS_STYLE.edge.readableLabelWeight, size: import_core7.CANVAS_STYLE.edge.readableLabelSize } : { weight: import_core7.CANVAS_STYLE.edge.labelWeight, size: import_core7.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 = (0, import_core7.resolveTheme)(input, { prefersDark: env.prefersDark, forcedColors: env.forcedColors });
+  if (env.forcedColors && props.respectForcedColors !== false && !(0, import_core7.isContrastTheme)(theme)) {
+    theme = (0, import_core7.isDarkTheme)(theme) ? "contrast-dark" : "contrast-light";
   }
-  return (0, import_react4.useMemo)(() => {
-    if (nodes.length === 0) return [];
-    if (!indexRef.current && nodes.length >= SPATIAL_INDEX_THRESHOLD && !skipCulling && !isDragging) {
-      indexRef.current = new import_core6.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 (0, import_core6.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, (0, import_core7.resolveComfort)(props.comfort, { prefersReducedMotion: env.prefersReducedMotion }));
 }
 
-// src/components/KonvaNode.tsx
-var import_react5 = __toESM(require("react"), 1);
+// src/design/drawing.ts
 var import_core8 = require("@visualli/core");
-
-// src/config/index.ts
-var import_core7 = require("@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((0, import_core8.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
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var KonvaNode = import_react5.default.memo(function KonvaNode2({
-  node,
-  zoomLevel,
-  isExternallyHovered = false,
-  isExternallyPressed = false,
-  isDragging = false
-}) {
-  const borderColor = (0, import_react5.useMemo)(() => (0, import_core8.darkenHexColor)(node.color, 0.13), [node.color]);
-  const layerCount = (0, import_react5.useMemo)(() => {
-    const count = node.branchCount ?? 0;
-    return Math.min(count, 3);
-  }, [node.branchCount]);
-  const baseRadiusX = node.width / 2;
-  const baseRadiusY = Math.max(import_core8.NODE_HEIGHT * 1.6 / 2, baseRadiusX * 0.74);
-  const calculateFontSize = (0, import_react5.useMemo)(() => {
-    return 30;
-  }, [node.title]);
-  const textNaturalWidth = node.width - 40;
-  const textNaturalHeight = import_core8.NODE_HEIGHT * 1.2;
-  const maxScale = (0, import_core7.computeNodeTextWorldScale)(node.width, zoomLevel);
-  const blobType = (0, import_core7.getBlobTypeForLayer)(node.level);
-  const textOffsetX = (import_core7.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 = (0, import_react5.useMemo)(() => {
-    if (layerCount === 0) return [];
-    const startIdx = import_core7.BLOB_LAYER_CONFIG.length - layerCount;
-    const layers = [];
-    for (let i = startIdx; i < import_core7.BLOB_LAYER_CONFIG.length; i++) {
-      const config = import_core7.BLOB_LAYER_CONFIG[i];
-      layers.push({
-        ...config,
-        radiusX: baseRadiusX * config.scaleUp,
-        radiusY: baseRadiusY * config.scaleUp
-      });
-    }
-    return layers;
-  }, [layerCount, baseRadiusX, baseRadiusY]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(KGroup, { x: node.x, y: node.y, listening: false, children: [
-    backgroundLayers.map((layer, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      KShape,
-      {
-        rotation: layer.rotation,
-        opacity: layer.opacity,
-        sceneFunc: (ctx, shape) => {
-          (0, import_core7.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__ */ (0, import_jsx_runtime2.jsx)(
-      KShape,
-      {
-        rotation: import_core7.NODE_LAYER_CONFIG.rotation,
-        opacity: import_core7.NODE_LAYER_CONFIG.opacity,
-        sceneFunc: (ctx, shape) => {
-          (0, import_core7.drawBlobPath)(ctx, baseRadiusX, baseRadiusY, blobType);
-          ctx.fillStrokeShape(shape);
-        },
-        hitFunc: (ctx, shape) => {
-          (0, import_core7.drawBlobPath)(ctx, baseRadiusX, baseRadiusY, blobType);
-          ctx.fillStrokeShape(shape);
-        },
-        fill: topFill,
-        stroke: topStroke,
-        strokeWidth: import_core7.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) => (0, import_core8.ideaStyle)(d.theme, n);
+var ideaLabelPx = (n, d) => import_core8.IDEA.labelSize[n.kind ?? "node"] * d.labelScale;
+function drawIdea(c, node, d, zoom, st, opt) {
+  const { rx, ry } = (0, import_core8.nodeRadii)(node);
+  const { fill, ring } = ideaColors(d, node);
+  const screenW = node.width * zoom;
+  const base = opt.base;
+  const detail = (0, import_core8.ideaDetail)(screenW, st.selected || st.focused || st.hovered);
+  if (detail === "speck") {
+    const a = (st.dimmed ? opt.dimOpacity ?? import_core8.CANVAS_STYLE.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 = (0, import_core8.shapeOfLevel)(node.level);
+  const rings = detailed ? (0, import_core8.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 * import_core8.CANVAS_STYLE.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 ?? import_core8.CANVAS_STYLE.node.dimmedOpacityFocus : 1) * (arr ? arr.alpha : 1);
+  c.globalAlpha = baseAlpha;
+  if (rings.length) {
+    const ringSpin = ringT * import_core8.CANVAS_STYLE.node.hoverRingsRotate;
+    const ringGrow = 1 + ringT * (import_core8.CANVAS_STYLE.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__ */ (0, import_jsx_runtime2.jsx)(
-      KGroup,
-      {
-        clipFunc: (ctx) => {
-          (0, import_core7.drawBlobPath)(ctx, baseRadiusX, baseRadiusY, blobType);
-        },
-        visible: zoomLevel >= import_core8.TEXT_LABEL_HIDE_BELOW_ZOOM,
-        listening: false,
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          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: import_core8.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 ? import_core8.CANVAS_STYLE.node.selectedStrokeWidth : d.metrics.nodeStroke;
+  c.stroke(body);
+  if (detailed && node.title) {
+    const px = ideaLabelPx(node, d);
+    const font = `${import_core8.TYPE_STYLES["node-label"].weight} ${px}px ${d.fontHand}`;
+    const lines = layoutLabel(c, node.title, font, node.width - import_core8.IDEA.labelInset);
+    const s = (0, import_core8.labelGrowth)(zoom).idea;
+    const lh = px * import_core8.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([...import_core8.CANVAS_STYLE.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 * (0, import_core8.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 = import_core8.CANVAS_STYLE.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
+var import_react5 = require("react");
+function useFrames(layerRef, busy) {
+  const raf = (0, import_react5.useRef)(null);
+  const busyRef = (0, import_react5.useRef)(busy);
+  busyRef.current = busy;
+  (0, import_react5.useEffect)(() => () => {
+    if (raf.current !== null) cancelAnimationFrame(raf.current);
+    raf.current = null;
+  }, []);
+  return (0, import_react5.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
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("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 = (0, import_react6.useRef)(null);
-  const zoomLevel = useViewportStore((s) => s.zoomLevel);
+  const fonts = useFontsEpoch();
   const storeNodes = useNodeStore((s) => s.nodes);
-  const allNodes = (0, import_react6.useMemo)(
-    () => propNodes ?? Array.from(storeNodes.values()),
-    [propNodes, storeNodes]
-  );
-  const visibleNodes = useViewportNodes(allNodes, void 0, isTransitioning, isDragging);
+  const nodes = (0, import_react6.useMemo)(() => propNodes ?? Array.from(storeNodes.values()), [propNodes, storeNodes]);
+  const index = (0, import_react6.useMemo)(() => {
+    if (nodes.length < SPATIAL_INDEX_THRESHOLD || isDragging) return null;
+    const idx = new import_core9.RBushSpatialIndex();
+    idx.bulkLoad(nodes.map((n) => ({ nodeId: n.id, bounds: (0, import_core9.nodeBounds)(n) })));
+    return idx;
+  }, [nodes, isDragging]);
+  const byId = (0, import_react6.useMemo)(() => index ? new Map(nodes.map((n) => [n.id, n])) : null, [index, nodes]);
+  const highlighted = hoveredNodeId ?? peekedNodeId ?? selectedNodeId;
+  const N = import_core9.CANVAS_STYLE.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 = (0, import_react6.useRef)(new HoverTweens()).current;
+  const frames = useFrames(layerRef, () => clock?.active() || tweens.active());
+  (0, import_react6.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 || !(0, import_core9.layerBlooms)(nodes.length))) frames.run();
+  }, [hoveredNodeId, pressedNodeId, selectedNodeId, design.comfort.reducedMotion, (0, import_core9.layerBlooms)(nodes.length), tweens, frames]);
+  (0, import_react6.useLayoutEffect)(() => clock?.subscribe(() => frames.run()), [clock, frames]);
   (0, import_react6.useLayoutEffect)(() => {
     layerRef.current?.batchDraw();
-  }, [visibleNodes, hoveredNodeId, pressedNodeId, isDragging, zoomLevel]);
-  (0, import_react6.useEffect)(() => {
-    layerRef.current?.batchDraw();
-  }, [isTransitioning]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(KLayer, { ref: layerRef, name: "nodes", children: visibleNodes.map((n) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    KonvaNode_default,
-    {
-      node: n,
-      zoomLevel,
-      isExternallyHovered: hoveredNodeId === n.id,
-      isExternallyPressed: pressedNodeId === n.id,
-      isDragging
-    },
-    n.id
-  )) });
-}
-
-// src/components/KonvaEdgeLayer.tsx
-var import_react8 = require("react");
-
-// src/components/KonvaEdge.tsx
-var import_react7 = require("react");
-var import_core9 = require("@visualli/core");
-var import_jsx_runtime4 = require("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) => (0, import_core9.intersectsViewport)(n, view));
+    const c = ctx2._context;
+    const m = c.getTransform();
+    const opt = { shadows: !isDragging && (0, import_core9.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__ */ (0, import_jsx_runtime2.jsx)(KLayer, { ref: layerRef, name: "nodes", listening: false, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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 = (0, import_react7.memo)(function KonvaEdge2({
-  sourceNode: from,
-  targetNode: to,
-  connection,
-  isDark = false,
-  zoomLevel = 1
-}) {
-  const label = connection?.label;
-  const points = (0, import_react7.useMemo)(() => {
-    const fromBaseX = from.width / 2;
-    const fromBaseY = Math.max(import_core9.NODE_HEIGHT * 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(import_core9.NODE_HEIGHT * 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 = (0, import_react7.useMemo)(() => {
-    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 } = (0, import_react7.useMemo)(() => {
-    if (!label) return { pathData: null, fontSize: 12 };
-    const fromBaseX = from.width / 2;
-    const fromBaseY = Math.max(import_core9.NODE_HEIGHT * 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(import_core9.NODE_HEIGHT * 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__ */ (0, import_jsx_runtime4.jsxs)(KGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      KLine,
-      {
-        points,
-        stroke: strokeColor,
-        strokeWidth: STROKE_WIDTH,
-        tension: 0,
-        opacity: 0.9,
-        lineCap: "round",
-        lineJoin: "round",
-        listening: false,
-        perfectDrawEnabled: false
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      KLine,
-      {
-        points: arrowHeadPoints,
-        stroke: strokeColor,
-        strokeWidth: STROKE_WIDTH,
-        lineCap: "round",
-        lineJoin: "round",
-        opacity: 0.9,
-        listening: false,
-        perfectDrawEnabled: false
-      }
-    ),
-    label && pathData && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        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__ */ (0, import_jsx_runtime4.jsx)(
-        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
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function KonvaEdgeLayer({
-  nodes,
-  connections,
-  currentLevel,
-  isDark = false,
-  isDragging = false
-}) {
-  const layerRef = (0, import_react8.useRef)(null);
-  const zoomLevel = useViewportStore((s) => s.zoomLevel);
+var import_react7 = require("react");
+var import_core10 = require("@visualli/core");
+var import_jsx_runtime3 = require("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 = (0, import_react7.useRef)(null);
+  const fonts = useFontsEpoch();
   const storeNodes = useNodeStore((s) => s.nodes);
-  const visibleNodes = useViewportNodes(nodes, currentLevel, false, isDragging);
-  const visibleSet = (0, import_react8.useMemo)(() => new Set(visibleNodes.map((n) => n.id)), [visibleNodes]);
-  (0, import_react8.useLayoutEffect)(() => {
+  const cache3 = (0, import_react7.useRef)(/* @__PURE__ */ new Map());
+  const edges = (0, import_react7.useMemo)(() => {
+    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((0, import_core10.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);
+  (0, import_react7.useLayoutEffect)(() => clock?.subscribe(() => frames.run()), [clock, frames]);
+  (0, import_react7.useLayoutEffect)(() => {
     layerRef.current?.batchDraw();
-  }, [connections, isDark, isDragging, visibleSet, storeNodes]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(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__ */ (0, import_jsx_runtime5.jsx)(
-      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__ */ (0, import_jsx_runtime3.jsx)(KLayer, { ref: layerRef, listening: false, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(KShape, { sceneFunc, listening: false, perfectDrawEnabled: false }) });
 }
 
 // src/components/KonvaContainerLayer.tsx
-var import_react10 = require("react");
+var import_react8 = require("react");
 
-// src/components/KonvaContainer.tsx
-var import_react9 = require("react");
+// src/design/containers.ts
 var import_core11 = require("@visualli/core");
-
-// src/config/textScaling.ts
-var import_core10 = require("@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(import_core10.NODE_HEIGHT * 1.6 / 2, baseRadiusX * 0.74);
-  const textNaturalWidth = baseWidth - 40;
-  const textNaturalHeight = import_core10.NODE_HEIGHT * 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);
+var PILL = import_core11.CANVAS_STYLE.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;
 }
-function computeNodeTextScreenScale2(nodeWidth, zoomLevel) {
-  return computeNodeTextWorldScale2(nodeWidth, zoomLevel) * zoomLevel;
-}
-
-// src/components/KonvaContainer.tsx
-var import_jsx_runtime6 = require("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 } = (0, import_core11.nodeRadii)(n);
+  const rings = (0, import_core11.ringsFor)(n.branchCount);
+  const s = rings.length ? import_core11.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 = (0, import_core11.connectorGeometry)(a, b, d.metrics.edgeGap);
+    return [(0, import_core11.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 = (0, import_core11.containerHull)(members.map((n) => ({ x: n.x, y: n.y, ...(0, import_core11.nodeRadii)(n) })));
+    if (!hull) continue;
+    let pill = null;
+    if (c.label) {
+      const size = measurePill(c.label, d, 1);
+      const at = (0, import_core11.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 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 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 drawPill(c, p, d, zoom) {
+  const k = (0, import_core11.labelGrowth)(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();
 }
-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(import_core11.NODE_HEIGHT * 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 };
-}
-var KonvaContainer = (0, import_react9.memo)(function KonvaContainer2({
-  nodes,
-  label = ""
-}) {
-  const zoomLevel = useViewportStore((s) => s.zoomLevel);
-  const hullData = (0, import_react9.useMemo)(() => 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__ */ (0, import_jsx_runtime6.jsxs)(KGroup, { listening: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      KLine,
-      {
-        points: hullData.points,
-        stroke: "#747270",
-        strokeWidth: 1,
-        dash: CONTAINER_DASH,
-        closed: true,
-        tension: 0,
-        listening: false,
-        perfectDrawEnabled: false
-      }
-    ),
-    label.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-      KGroup,
-      {
-        x: boxX + boxWidth / 2,
-        y: boxY + labelBoxHeight / 2,
-        offsetX: boxWidth / 2,
-        offsetY: labelBoxHeight / 2,
-        scaleX: 1 / zoomLevel,
-        scaleY: 1 / zoomLevel,
-        visible: zoomLevel >= import_core11.TEXT_LABEL_HIDE_BELOW_ZOOM,
-        listening: false,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            KRect,
-            {
-              width: boxWidth,
-              height: labelBoxHeight,
-              fill: LABEL_BG,
-              cornerRadius: LABEL_BORDER_RADIUS,
-              shadowEnabled: false,
-              perfectDrawEnabled: false
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            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
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function KonvaContainerLayer({ nodes, containers, isDark = false }) {
-  const layerRef = (0, import_react10.useRef)(null);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function useContainerLayout(containers, connections = [], design = DEFAULT_DESIGN) {
+  const fonts = useFontsEpoch();
   const storeNodes = useNodeStore((s) => s.nodes);
-  (0, import_react10.useLayoutEffect)(() => {
+  return (0, import_react8.useMemo)(
+    () => 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 = (0, import_react8.useRef)(null);
+  const placed = useContainerLayout(containers, connections, design);
+  (0, import_react8.useLayoutEffect)(() => {
     layerRef.current?.batchDraw();
-  }, [containers, isDark, storeNodes]);
+  }, [placed, design]);
   if (containers.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(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__ */ (0, import_jsx_runtime7.jsx)(
-      KonvaContainer_default,
-      {
-        nodes: groupNodes,
-        label: c.label,
-        isDark
-      },
-      c.id
-    );
-  }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(KLayer, { ref: layerRef, listening: false, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    KShape,
+    {
+      listening: false,
+      perfectDrawEnabled: false,
+      sceneFunc: (ctx2) => {
+        for (const p of placed) drawHull(ctx2._context, p.hull, design);
+      }
+    }
+  ) });
+}
+
+// src/components/KonvaContainerLabelLayer.tsx
+var import_react9 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function KonvaContainerLabelLayer({ containers, connections = [], design = DEFAULT_DESIGN }) {
+  const layerRef = (0, import_react9.useRef)(null);
+  const placed = useContainerLayout(containers, connections, design);
+  (0, import_react9.useLayoutEffect)(() => {
+    layerRef.current?.batchDraw();
+  }, [placed, design]);
+  if (!placed.some((p) => p.pill)) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KLayer, { ref: layerRef, listening: false, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    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);
+      }
+    }
+  ) });
 }
 
 // src/components/NavigationStack.tsx
 var import_react11 = require("react");
-var import_jsx_runtime8 = require("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})`;
-}
-var OrganicCircle = (0, import_react11.memo)(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__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: size, height: size, viewBox: vb, fill: "none", style: { display: "block" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: path, fill, fillOpacity: 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: path, fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round" })
+
+// src/components/Overlays.tsx
+var import_react10 = __toESM(require("react"), 1);
+var import_core12 = require("@visualli/core");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Icon = ({ children, size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) });
+var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Icon, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+] });
+var FitIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Icon, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
+] });
+var ChevronLeftIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { size: 14, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "15 6 9 12 15 18" }) });
+var ChevronIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { size: 14, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "9 6 15 12 9 18" }) });
+var ExternalIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Icon, { size: 14, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+] });
+var HomeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Icon, { size: import_core12.TRAIL.homeIconSize, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "9 22 9 12 15 12 15 22" })
+] });
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Icon, { size: 18, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+] });
+var ZoomControls = (0, import_react10.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 = (0, import_react10.useCallback)(() => setZoom(zoom * import_core12.VIEW.zoomStep), [zoom, setZoom]);
+  const zoomOut = (0, import_react10.useCallback)(() => setZoom(zoom / import_core12.VIEW.zoomStep), [zoom, setZoom]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vi-ctrls", role: "toolbar", "aria-label": "Canvas", "data-help": "zoom-controls", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: `vi-iconbtn ${size}`, "aria-label": "Zoom out", onClick: zoomOut, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MinusIcon, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vi-ctrls__pct", "aria-live": "polite", children: [
+      Math.round(zoom / fit * 100),
+      "%"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: `vi-iconbtn ${size}`, "aria-label": "Zoom in", onClick: zoomIn, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlusIcon, {}) }),
+    onFit && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vi-ctrls__div", "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: `vi-iconbtn ${size}`, "aria-label": "Fit map to view", disabled: fitted, onClick: onFit, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FitIcon, {}) })
+    ] })
   ] });
 });
-var NavigationStack = (0, import_react11.memo)(function NavigationStack2({
-  stack,
-  onNavigateBack,
-  isDark = false,
-  top = "16px",
-  left = "16px"
-}) {
-  const [hoveredIndex, setHoveredIndex] = (0, import_react11.useState)(null);
+function paintVars(p) {
+  if (p.custom) return { fill: p.custom.fill, ring: p.custom.ring ?? "var(--edge)" };
+  const t = p.topic ?? import_core12.TRAIL.rootTopic;
+  return { fill: `var(--topic-${t})`, ring: `var(--topic-${t}-ring)` };
+}
+var TrailDot = ({ level, paint, current }) => {
+  const { fill, ring } = paintVars(paint);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: import_core12.TRAIL.dotBox, height: import_core12.TRAIL.dotBox, viewBox: `${-import_core12.TRAIL.dotBox / 2} ${-import_core12.TRAIL.dotBox / 2} ${import_core12.TRAIL.dotBox} ${import_core12.TRAIL.dotBox}`, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: (0, import_core12.blobPath)((0, import_core12.shapeOfLevel)(level), import_core12.TRAIL.dotRadius, import_core12.TRAIL.dotRadius), fill, stroke: ring, strokeWidth: current ? import_core12.TRAIL.currentStroke : import_core12.TRAIL.stroke }) });
+};
+var DepthTrail = (0, import_react10.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__ */ (0, import_jsx_runtime8.jsx)(
-    "div",
+  const current = stack.length - 1;
+  const iconOnly = import_core12.TRAIL.rootLabel === "icon";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("nav", { className: "vi-trail", "aria-label": "Depth trail", "data-help": "navigation-stack", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ol", { children: stack.map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { className: i === current ? "is-current" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "button",
     {
-      "data-help": "navigation-stack",
-      style: {
-        position: "absolute",
-        top,
-        left,
-        zIndex: 30,
-        pointerEvents: "auto"
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)(
-              "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__ */ (0, import_jsx_runtime8.jsxs)(
-            "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__ */ (0, import_jsx_runtime8.jsx)("div", { style: { width: CIRCLE_SIZE, height: CIRCLE_SIZE, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, zIndex: 4 }, children: isCurrent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OrganicCircle, { size: CIRCLE_SIZE, fill: pastelFill, stroke: activeStroke, strokeWidth: 1.5, variant: index, isActive: true }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OrganicCircle, { size: CIRCLE_SIZE, fill: pastelFill, stroke: visitedStroke, strokeWidth: 1, variant: index }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  "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__ */ (0, import_jsx_runtime6.jsx)(TrailDot, { level: e.level, paint: e.paint, current: i === current }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: i === 0 ? iconOnly ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HomeIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HomeIcon, {}),
+          " ",
+          e.label
+        ] }) : e.label })
+      ]
     }
-  );
+  ) }, `${e.layerId}-${i}`)) }) });
 });
-var NavigationStack_default = NavigationStack;
-
-// src/components/ZoomControls.tsx
-var import_react12 = require("react");
-var import_core12 = require("@visualli/core");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var ZoomInIcon = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
-  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
-  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
-] });
-var ZoomOutIcon = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
-  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("span", { className: `vi-anchor-card${inSheet ? " is-in-sheet" : ""}`, role: "note", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vi-anchor-card__eyebrow", children: "Term" }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vi-anchor-card__word", style: { display: "block" }, children: anchor.word }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "vi-anchor-card__desc", children: anchor.description }),
+  anchor.knowMoreUrl && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vi-anchor-card__acts", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("a", { className: "vi-fact__link", href: anchor.knowMoreUrl, target: "_blank", rel: "noopener noreferrer", children: [
+    import_core12.TERM.learnMoreLabel,
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExternalIcon, {})
+  ] }) })
 ] });
-var ZoomControls = (0, import_react12.memo)(function ZoomControls2({ isDark = false }) {
-  const zoomLevel = useViewportStore((s) => s.zoomLevel);
-  const setZoom = useViewportStore((s) => s.setZoom);
-  const handleZoomIn = (0, import_react12.useCallback)(() => setZoom(Math.min(import_core12.ZOOM_MAX, zoomLevel * 1.2)), [zoomLevel, setZoom]);
-  const handleZoomOut = (0, import_react12.useCallback)(() => setZoom(Math.max(import_core12.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__ */ (0, import_jsx_runtime9.jsxs)(
-    "div",
+function TermAnchor({ anchor }) {
+  const [open, setOpen] = (0, import_react10.useState)(false);
+  const [shift, setShift] = (0, import_react10.useState)(0);
+  const pinned = (0, import_react10.useRef)(false);
+  const timer = (0, import_react10.useRef)(void 0);
+  const wrap = (0, import_react10.useRef)(null), btn = (0, import_react10.useRef)(null), card = (0, import_react10.useRef)(null);
+  const show = (pin) => {
+    clearTimeout(timer.current);
+    if (pin) pinned.current = true;
+    setOpen(true);
+  };
+  const hide = () => {
+    clearTimeout(timer.current);
+    pinned.current = false;
+    setOpen(false);
+  };
+  (0, import_react10.useEffect)(() => () => clearTimeout(timer.current), []);
+  (0, import_react10.useLayoutEffect)(() => {
+    if (!open || !card.current) {
+      setShift(0);
+      return;
+    }
+    const r = card.current.getBoundingClientRect(), vw = document.documentElement.clientWidth, m = import_core12.TERM.viewportMargin;
+    setShift(r.right > vw - m ? vw - m - r.right : r.left < m ? m - r.left : 0);
+  }, [open]);
+  (0, import_react10.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime6.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 (!(0, import_core12.hoverOpensTerm)(e.pointerType)) return;
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(true), import_core12.TERM.hoverOpen);
+      },
+      onPointerLeave: (e) => {
+        if (!(0, import_core12.hoverOpensTerm)(e.pointerType) || pinned.current) return;
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(false), import_core12.TERM.hoverClose);
+      },
+      onBlur: (e) => {
+        if (!wrap.current?.contains(e.relatedTarget)) hide();
       },
-      role: "group",
-      "aria-label": "Zoom controls",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
-            onClick: handleZoomIn,
-            disabled: zoomLevel >= import_core12.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 >= import_core12.ZOOM_MAX ? "not-allowed" : "pointer",
-              color: zoomLevel >= import_core12.ZOOM_MAX ? muted : primary,
-              transition: "background 0.15s"
-            },
-            onMouseEnter: (e) => {
-              if (zoomLevel < import_core12.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";
+            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 in",
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ZoomInIcon, {})
+            children: anchor.word
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { position: "absolute", top: 0, bottom: 0, left: "32px", width: "0.5px", background: border } }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          "button",
-          {
-            onClick: handleZoomOut,
-            disabled: zoomLevel <= import_core12.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 <= import_core12.ZOOM_MIN ? "not-allowed" : "pointer",
-              color: zoomLevel <= import_core12.ZOOM_MIN ? muted : primary,
-              transition: "background 0.15s"
-            },
-            onMouseEnter: (e) => {
-              if (zoomLevel > import_core12.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";
-            },
-            "aria-label": "Zoom out",
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ZoomOutIcon, {})
-          }
-        )
+        open && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { ref: card, className: "vi-anchor__pop", style: shift ? { transform: `translateX(${shift}px)` } : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TermCard, { anchor }) })
       ]
     }
   );
+}
+var PeekCard = (0, import_react10.memo)(function PeekCard2({ node, anchors, onStepInside, onClose, renderContent }) {
+  const parts = (0, import_react10.useMemo)(() => splitTerms(node.description ?? "", anchors), [node.description, anchors]);
+  const { fill, ring } = paintVars(node);
+  const style = { ["--vi-fact-fill"]: fill, ["--vi-fact-ring"]: ring };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vi-fact vi-peek", style, role: "dialog", "aria-label": node.title, "data-node-tooltip": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vi-fact__head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vi-fact__title", children: node.title }),
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "vi-iconbtn vi-iconbtn--sm vi-fact__close", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, {}) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vi-fact__body", children: renderContent ? renderContent(node.description ?? "") : parts.map((p, i) => typeof p === "string" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.default.Fragment, { children: p }, i) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TermAnchor, { anchor: p }, i)) }),
+    onStepInside && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vi-fact__foot", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vi-fact__acts", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", className: "vi-fact__step", onClick: onStepInside, children: [
+        "Step inside ",
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronIcon, {})
+      ] }) })
+    ] })
+  ] });
 });
-var ZoomControls_default = ZoomControls;
-
-// src/components/SketchyBoxKonva.tsx
-var import_react13 = require("react");
-var import_konva = __toESM(require("konva"), 1);
-var import_jsx_runtime10 = require("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 = (0, import_react13.useRef)(null);
-  const konvaContainerRef = (0, import_react13.useRef)(null);
-  const stageRef = (0, import_react13.useRef)(null);
-  (0, import_react13.useEffect)(() => {
-    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 import_konva.default.Stage({ container: konvaEl, width: W, height: H });
-      const layer = new import_konva.default.Layer({ listening: false });
-      const contentH = H - SHADOW_PAD;
-      layer.add(new import_konva.default.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 import_konva.default.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__ */ (0, import_jsx_runtime10.jsxs)("div", { ref: wrapperRef, style: { position: "relative", paddingBottom: `${SHADOW_PAD}px` }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var PeekSheet = (0, import_react10.memo)(function PeekSheet2({ node, anchors, onStepInside, onClose, renderContent, expanded, onToggleExpanded, height }) {
+  const [term, setTerm] = (0, import_react10.useState)(null);
+  const parts = (0, import_react10.useMemo)(() => splitTerms(node.description ?? "", anchors), [node.description, anchors]);
+  const startY = (0, import_react10.useRef)(null);
+  const swiped = (0, import_react10.useRef)(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__ */ (0, import_jsx_runtime6.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__ */ (0, import_jsx_runtime6.jsx)(
       "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 < -import_core12.SHEET.expandDrag) {
+            swiped.current = true;
+            if (!expanded) onToggleExpanded();
+          } else if (dy > import_core12.SHEET.dismissDrag) {
+            swiped.current = true;
+            if (expanded) onToggleExpanded();
+            else onClose();
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "vi-fact__handle", "aria-label": expanded ? "Collapse" : "Expand", "aria-expanded": expanded, onClick: () => {
+          if (!swiped.current) onToggleExpanded();
+          swiped.current = false;
+        } })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { position: "relative", padding, zIndex: 1 }, children })
+    term ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", className: "vi-fact__back", onClick: () => setTerm(null), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronLeftIcon, {}),
+        " Back"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TermCard, { anchor: term, inSheet: true })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vi-fact__head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vi-fact__title", children: node.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "vi-iconbtn vi-iconbtn--md vi-fact__close", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, {}) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vi-fact__body", children: renderContent ? renderContent(node.description ?? "") : parts.map((p, i) => typeof p === "string" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.default.Fragment, { children: p }, i) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vi-anchor", "data-semantic-tooltip": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "vi-term", onClick: () => setTerm(p), children: p.word }) }, i)) }),
+      onStepInside && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vi-fact__foot", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vi-fact__acts", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", className: "vi-fact__step", onClick: onStepInside, children: [
+          "Step inside ",
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronIcon, {})
+        ] }) })
+      ] })
+    ] })
   ] });
-};
-var SketchyBoxKonva_default = SketchyBoxKonva;
+});
 
-// src/VisualliCanvas.tsx
-var import_jsx_runtime11 = require("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
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var NavigationStack = (0, import_react11.memo)(function NavigationStack2({ stack, onNavigateBack, top, left }) {
+  const entries = (0, import_react11.useMemo)(
+    () => stack.map((e) => ({ layerId: e.layerId, label: e.label, level: e.layer.level, paint: e.paint ?? {} })),
+    [stack]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vi-map__trail", style: top || left ? { top, left } : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DepthTrail, { stack: entries, onNavigateBack }) });
+});
+var NavigationStack_default = NavigationStack;
+
+// src/components/A11yLayer.tsx
+var import_react12 = require("react");
+var import_core13 = require("@visualli/core");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var MAX_MIRRORED = 150;
+var A11yLayer = (0, import_react12.memo)(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] = (0, import_react12.useState)({ cx, cy, zoom, w, h });
+  (0, import_react12.useEffect)(() => {
+    const t = setTimeout(() => setView({ cx, cy, zoom, w, h }), 120);
+    return () => clearTimeout(t);
+  }, [cx, cy, zoom, w, h]);
+  const items = (0, import_react12.useMemo)(() => {
+    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) => (0, import_core13.intersectsViewport)(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((0, import_core13.nodeBounds)(n).minY / 150);
+    return [...picked].sort((a, b) => row(a) - row(b) || a.x - b.x);
+  }, [nodes, view]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "vi-sr", role: "list", "aria-label": label, children: items.map((n) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "listitem", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "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__ */ (0, import_jsx_runtime8.jsx)("div", { className: "vi-sr", role: "status", "aria-live": "polite", children: announcement })
+  ] });
+});
+
+// src/design/useDesign.ts
+var import_react13 = require("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 (0, import_react13.useSyncExternalStore)(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 (0, import_react13.useMemo)(
+    () => 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
+var import_core14 = require("@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 import_core14.approximateMeasure;
+  const weight = import_core14.TYPE_STYLES["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
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function resolveDocument(props, fileText) {
   if (props.preParsedVisualli) return props.preParsedVisualli;
   const rawContent = fileText ?? props.visualliString;
   if (rawContent) {
     try {
-      return (0, import_core13.parseVisualliFile)(rawContent);
+      return (0, import_core15.parseVisualliFile)(rawContent);
     } catch {
       return null;
     }
@@ -2108,6 +1863,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: import_core15.TRAIL.rootTopic };
+  const { topic, custom } = (0, import_core15.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;
@@ -2115,7 +1877,22 @@ 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 { chromaticImmersion = false, onNodeClick, onLayerChange, onNodeHover, renderOverlay, renderNodeContent, navigationStackTop, navigationStackLeft, className = "", style } = props;
+  const onNodeHoverRef = (0, import_react14.useRef)(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] = (0, import_react14.useState)(() => ensureDesignSystemStyles({ fontBaseUrl: props.fontBaseUrl, loadWebFonts: props.loadWebFonts }));
+  const [fontsReady, setFontsReady] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => {
+    let live = true;
+    loadCanvasFonts(fontSheet).then(() => {
+      if (live) setFontsReady(true);
+    });
+    return () => {
+      live = false;
+    };
+  }, [fontSheet]);
   const [fileText, setFileText] = (0, import_react14.useState)(void 0);
   (0, import_react14.useEffect)(() => {
     if (!props.visualliFile) {
@@ -2147,6 +1924,7 @@ function VisualliCanvas(props) {
   const [navStack, setNavStack] = (0, import_react14.useState)([]);
   const [currentLayerId, setCurrentLayerId] = (0, import_react14.useState)(null);
   const parentViewports = (0, import_react14.useRef)([]);
+  const stepTargetRef = (0, import_react14.useRef)(null);
   const [isTransitioning, setIsTransitioning] = (0, import_react14.useState)(false);
   const isTransitioningRef = (0, import_react14.useRef)(false);
   (0, import_react14.useEffect)(() => {
@@ -2155,21 +1933,22 @@ function VisualliCanvas(props) {
     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: import_core15.TRAIL.rootTopic } }]);
     parentViewports.current = [];
   }, [doc]);
+  const sizing = (0, import_react14.useMemo)(() => ({ measure: ideaMeasure(design), labelScale: design.labelScale }), [design.fontHand, design.labelScale, design.comfort.readableType, fontsReady]);
   const { flatNodes, connections, containers } = (0, import_react14.useMemo)(() => {
     if (!doc || !currentLayerId) return { flatNodes: [], connections: [], containers: [] };
     try {
       return {
-        flatNodes: (0, import_core13.getNodesForLayer)(doc, currentLayerId),
-        connections: (0, import_core5.getConnectionsForLayer)(doc, currentLayerId),
-        containers: (0, import_core5.getContainersForLayer)(doc, currentLayerId)
+        flatNodes: (0, import_core15.getNodesForLayer)(doc, currentLayerId, sizing),
+        connections: (0, import_core3.getConnectionsForLayer)(doc, currentLayerId),
+        containers: (0, import_core3.getContainersForLayer)(doc, currentLayerId)
       };
     } catch {
       return { flatNodes: [], connections: [], containers: [] };
     }
-  }, [doc, currentLayerId]);
+  }, [doc, currentLayerId, sizing]);
   const viewport = useViewportStore((s) => ({
     centerX: s.centerX,
     centerY: s.centerY,
@@ -2189,52 +1968,48 @@ function VisualliCanvas(props) {
     setNodes(map);
     clearSel();
   }, [flatNodes, setNodes, clearSel]);
+  const clock = (0, import_react14.useMemo)(() => new RevealClock(), []);
+  const instantReveal = design.comfort.reducedMotion || props.reveal === "instant";
+  (0, import_react14.useEffect)(() => {
+    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]);
+  (0, import_react14.useEffect)(() => clock.subscribe((running) => {
+    const el = containerRef.current;
+    if (el) el.dataset.viReveal = running ? "running" : "idle";
+  }), [clock]);
+  (0, import_react14.useEffect)(() => () => clock.stop(), [clock]);
   const containerRef = (0, import_react14.useRef)(null);
   const stageRef = (0, import_react14.useRef)(null);
   const canvasWrapperRef = (0, import_react14.useRef)(null);
-  const baselineTransformRef = (0, import_react14.useRef)(null);
-  const konvaContentDivRef = (0, import_react14.useRef)(null);
-  const lastAnimViewportRef = (0, import_react14.useRef)(null);
-  const zoomOutTargetRef = (0, import_react14.useRef)(null);
   const canvasSizeRef = (0, import_react14.useRef)({ width: 0, height: 0 });
   const dragMoveRafRef = (0, import_react14.useRef)(null);
   const dragMoveLatestRef = (0, import_react14.useRef)(null);
   const dragStartPosRef = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
-  const baseBgColor = isDark ? "#141412" : "#F0EDE6";
-  const chromaticBgColor = (0, import_react14.useMemo)(() => {
-    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 immersionFill = (0, import_react14.useMemo)(() => {
+    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 = (0, import_react14.useRef)(null);
   (0, import_react14.useEffect)(() => {
     if (flatNodes.length === 0) {
       spatialIndexRef.current?.clear();
       return;
     }
-    const idx = new import_core13.RBushSpatialIndex();
+    const idx = new import_core15.RBushSpatialIndex();
     idx.bulkLoad(flatNodes.map((n) => {
-      const blobHalfH = Math.max(import_core13.NODE_HEIGHT * 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 } = (0, import_core15.nodeRadii)(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 () => {
@@ -2246,6 +2021,7 @@ function VisualliCanvas(props) {
     handleMouseDown: rendererHandleMouseDown,
     handleMouseMove: rendererHandleMouseMove,
     handleMouseUp: rendererHandleMouseUp,
+    cancelPan: rendererCancelPan,
     canvasWidth,
     canvasHeight
   } = useKonvaRenderer({ containerRef, stageRef });
@@ -2285,20 +2061,20 @@ function VisualliCanvas(props) {
       if (node) {
         const oldPos = dragStartPosRef.current.get(nodeId);
         if (oldPos) {
-          const oldHalfH = Math.max(import_core13.NODE_HEIGHT * 1.6 / 2, node.width / 2 * 0.74);
+          const { rx: rx2, ry: ry2 } = (0, import_core15.nodeRadii)(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(import_core13.NODE_HEIGHT * 1.6 / 2, node.width / 2 * 0.74);
+        const { rx, ry } = (0, import_core15.nodeRadii)(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
         });
       }
     }
@@ -2311,12 +2087,11 @@ function VisualliCanvas(props) {
     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 } = (0, import_core5.calculateFitView)(flatNodes, cw, ch);
-    const isRootLayer = navStack.length <= 1;
-    const zoomLevel = isRootLayer ? 1 : (0, import_core5.calculateFitView)(flatNodes, cw, ch).zoomLevel;
+    const { centerX, centerY, zoomLevel } = (0, import_core3.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;
   (0, import_react14.useEffect)(() => {
     fitToScreen();
@@ -2328,14 +2103,22 @@ function VisualliCanvas(props) {
     fitToScreen();
   }, [canvasWidth, fitToScreen]);
   const navBackTargetRef = (0, import_react14.useRef)(-1);
-  const { zoomIntoLayer, zoomOutToParent, isTransitioning: isAnimating } = useKonvaLayerTransition({
+  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: () => {
@@ -2355,96 +2138,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 = (0, import_react14.useCallback)((nodeId) => {
@@ -2454,7 +2147,7 @@ function VisualliCanvas(props) {
     if (isTransitioningRef.current || isAnimating()) {
       return;
     }
-    const childLayer = (0, import_core5.getChildLayerForNode)(doc, nodeId, currentLayerId);
+    const childLayer = (0, import_core3.getChildLayerForNode)(doc, nodeId, currentLayerId);
     if (!childLayer) {
       return;
     }
@@ -2464,7 +2157,7 @@ function VisualliCanvas(props) {
     }
     const childNodes = (() => {
       try {
-        return (0, import_core13.getNodesForLayer)(doc, childLayerId);
+        return (0, import_core15.getNodesForLayer)(doc, childLayerId, sizing);
       } catch {
         return [];
       }
@@ -2476,20 +2169,13 @@ function VisualliCanvas(props) {
     if (!node) return;
     const cw = canvasSizeRef.current.width || 800;
     const ch = canvasSizeRef.current.height || 600;
-    const fitVp = (0, import_core5.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 = (0, import_core3.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 ?? (0, import_core13.getThemeBackground)(isDark, "secondary"),
-      node.color ?? (0, import_core13.getThemeBackground)(isDark, "primary")
-    );
-  }, [doc, currentLayerId, nodes, isDark, isAnimating, zoomIntoLayer]);
+    diveInto(node, childLayerId, childNodes);
+  }, [doc, currentLayerId, nodes, isAnimating, diveInto, sizing, flatNodes, containers]);
   const handleNavigateBack = (0, import_react14.useCallback)((targetIndex) => {
     if (targetIndex >= navStack.length - 1) return;
     if (isTransitioningRef.current || isAnimating()) return;
@@ -2498,45 +2184,8 @@ function VisualliCanvas(props) {
     navBackTargetRef.current = targetIndex;
     setIsTransitioning(true);
     isTransitioningRef.current = true;
-    zoomOutToParent(savedVp, (0, import_core13.getThemeBackground)(isDark, "primary"), (0, import_core13.getThemeBackground)(isDark, "secondary"));
-  }, [navStack.length, isDark, isAnimating, zoomOutToParent]);
-  const baseZoomRef = (0, import_react14.useRef)(1);
-  const lastZoomTransitionRef = (0, import_react14.useRef)(0);
-  const ZOOM_COOLDOWN = 1e3;
-  (0, import_react14.useEffect)(() => {
-    baseZoomRef.current = 1;
-  }, [currentLayerId]);
-  (0, import_react14.useEffect)(() => {
-    if (isTransitioningRef.current || isAnimating()) return;
-    const now = Date.now();
-    if (now - lastZoomTransitionRef.current < ZOOM_COOLDOWN) return;
-    const relative = viewport.zoomLevel / baseZoomRef.current;
-    if (relative >= import_core13.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 ? (0, import_core5.getChildLayerForNode)(doc, closest.id, currentLayerId ?? "") : null;
-        if (childLayer) {
-          lastZoomTransitionRef.current = now;
-          handleNavigate(closest.id);
-          baseZoomRef.current = 1;
-        }
-      }
-    } else if (relative < import_core13.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 = (0, import_react14.useCallback)((stage, pointer) => {
     const sp = stage.position();
     const sc = stage.scaleX();
@@ -2599,8 +2248,45 @@ function VisualliCanvas(props) {
       window.removeEventListener("keydown", onKey);
     };
   }, [canvasContextMenu]);
+  const selectedNodeId = useSelectionStore((st) => st.selectedId);
+  const [focusedNodeId, setFocusedNodeId] = (0, import_react14.useState)(null);
+  const anchors = (0, import_react14.useMemo)(() => doc ? (0, import_core15.getSemanticAnchors)(doc) : [], [doc]);
+  const [autoTouch, setAutoTouch] = (0, import_react14.useState)(() => typeof window !== "undefined" && !!window.matchMedia && window.matchMedia("(hover: none)").matches);
+  const touchMode = props.layout === "touch" ? true : props.layout === "pointer" ? false : autoTouch;
+  const touchModeRef = (0, import_react14.useRef)(touchMode);
+  touchModeRef.current = touchMode;
+  const lastTouchAtRef = (0, import_react14.useRef)(0);
+  const emptyTapRef = (0, import_react14.useRef)(null);
+  const [pinnedId, setPinnedId] = (0, import_react14.useState)(null);
+  const [sheetExpanded, setSheetExpanded] = (0, import_react14.useState)(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 = (0, import_react14.useRef)(null);
+  pinnedIdRef.current = pinnedId;
+  const sheetHeight = Math.min(import_core15.SHEET.maxHeight, Math.round((viewport.canvasHeight || canvasSizeRef.current.height || 600) * import_core15.SHEET.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(import_core15.SHEET.maxHeight, Math.round(ch * import_core15.SHEET.heightRatio));
+    const screenY = (node.y - vp.centerY) * vp.zoomLevel + ch / 2;
+    const reach = (0, import_core15.nodeRadii)(node).ry * vp.zoomLevel;
+    if (screenY + reach > ch - sh - 12 || screenY - reach < 0) vp.setCenter(vp.centerX, node.y + sh / (2 * vp.zoomLevel));
+  };
+  (0, import_react14.useEffect)(() => {
+    setPinnedId(null);
+  }, [currentLayerId]);
   const handleStageMouseDown = (0, import_react14.useCallback)((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;
     }
@@ -2622,7 +2308,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);
@@ -2630,10 +2316,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 = (0, import_react14.useCallback)((e) => {
+    if (isEmulatedMouse(e.evt)) return;
     const stage = e.target.getStage();
     if (!stage) {
       rendererHandleMouseMove(e);
@@ -2646,7 +2334,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;
@@ -2658,7 +2347,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;
@@ -2674,17 +2362,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 = (0, import_react14.useCallback)((e) => {
+    if (isEmulatedMouse(e.evt)) return;
     setPressedNodeId(null);
     if (stageActiveNodeIdRef.current) {
       const nodeId = stageActiveNodeIdRef.current;
@@ -2701,8 +2386,13 @@ function VisualliCanvas(props) {
       } else {
         const node = nodes.get(nodeId);
         if (node) {
-          const childLayer = doc ? (0, import_core5.getChildLayerForNode)(doc, nodeId, currentLayerId ?? "") : null;
-          if (childLayer) {
+          const childLayer = doc ? (0, import_core3.getChildLayerForNode)(doc, nodeId, currentLayerId ?? "") : null;
+          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);
@@ -2715,6 +2405,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]);
@@ -2729,31 +2425,75 @@ function VisualliCanvas(props) {
     const localY = rect ? e.evt.clientY - rect.top : e.evt.clientY;
     setCanvasContextMenu({ x: localX, y: localY });
   }, [navStack.length]);
-  const handleStageTouchStart = (0, import_react14.useCallback)((e) => handleStageMouseDown(e), [handleStageMouseDown]);
-  const handleStageTouchMove = (0, import_react14.useCallback)((e) => handleStageMouseMove(e), [handleStageMouseMove]);
-  const handleStageTouchEnd = (0, import_react14.useCallback)((e) => handleStageMouseUp(e), [handleStageMouseUp]);
-  const handleWheel = (0, import_react14.useCallback)((e) => {
-    const isZoomOut = e.evt.deltaY > 0;
-    if (!isZoomOut) {
-      rendererHandleWheel(e);
-      return;
+  const touchPointsRef = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
+  const pinchRef = (0, import_react14.useRef)(null);
+  const pinchEndedAtRef = (0, import_react14.useRef)(-Infinity);
+  const [pinching, setPinching] = (0, import_react14.useState)(false);
+  const localOf = (e) => {
+    const r = containerRef.current.getBoundingClientRect();
+    return { x: e.clientX - r.left, y: e.clientY - r.top };
+  };
+  const onPinchDown = (e) => {
+    if (!import_core15.GESTURE.pinchZoom || !import_core15.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 = (0, import_core15.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 = (0, import_core15.zoomAround)({ x: cw / 2 - p.c0.x * p.z0, y: ch / 2 - p.c0.y * p.z0 }, p.z0, z, p.m0, import_core15.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(import_core13.ZOOM_MIN, liveZoom * (1 - e.evt.deltaY / 1e3));
-    if (navStack.length > 1 && projected <= import_core13.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 = (0, import_react14.useCallback)((e) => {
+    if (inPinch() || e.evt.touches.length > 1) return;
+    handleStageMouseDown(e);
+  }, [handleStageMouseDown]);
+  const handleStageTouchMove = (0, import_react14.useCallback)((e) => {
+    if (inPinch() || e.evt.touches.length > 1) return;
+    handleStageMouseMove(e);
+  }, [handleStageMouseMove]);
+  const handleStageTouchEnd = (0, import_react14.useCallback)((e) => {
+    if (inPinch()) {
+      isCanvasPanningRef.current = false;
       return;
     }
+    handleStageMouseUp(e);
+  }, [handleStageMouseUp]);
+  const handleWheel = (0, import_react14.useCallback)((e) => {
     rendererHandleWheel(e);
-  }, [rendererHandleWheel, navStack, setZoom, isAnimating, handleNavigateBack]);
+  }, [rendererHandleWheel]);
   const lastHoverCheckRef = (0, import_react14.useRef)(0);
   const handleCanvasMouseMove = (0, import_react14.useCallback)((e) => {
+    if (touchModeRef.current || isEmulatedMouse(e.nativeEvent)) return;
     if (!containerRef.current || isDraggingRef.current || isCanvasPanningRef.current) {
       setHoveredNode(null);
       return;
@@ -2789,7 +2529,7 @@ function VisualliCanvas(props) {
       if (clearTooltipTimerRef.current) clearTimeout(clearTooltipTimerRef.current);
       clearTooltipTimerRef.current = setTimeout(() => {
         if (!tooltipHoverRef.current && !keepTooltipOpenRef.current) setHoveredNode(null);
-      }, 150);
+      }, import_core15.PEEK.hoverClose);
     } else {
       if (clearTooltipTimerRef.current) {
         clearTimeout(clearTooltipTimerRef.current);
@@ -2813,28 +2553,77 @@ function VisualliCanvas(props) {
       if (dragMoveRafRef.current !== null) cancelAnimationFrame(dragMoveRafRef.current);
     };
   }, []);
-  const handleZoomIn = (0, import_react14.useCallback)(() => setZoom(Math.min(viewport.zoomLevel * 1.2, 5)), [viewport.zoomLevel, setZoom]);
-  const handleZoomOut = (0, import_react14.useCallback)(() => {
-    setZoom(Math.max(viewport.zoomLevel / 1.2, import_core13.ZOOM_MIN));
-  }, [viewport.zoomLevel, setZoom]);
+  const activateNode = (0, import_react14.useCallback)((node) => {
+    const childLayer = doc ? (0, import_core3.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 = (0, import_react14.useCallback)((nodeId) => {
+    setHoveredNode(null);
+    handleNavigate(nodeId);
+  }, [handleNavigate]);
+  (0, import_react14.useEffect)(() => {
+    if (!hoveredNode) tooltipHoverRef.current = false;
+  }, [hoveredNode]);
+  const handleKeyDown = (0, import_react14.useCallback)((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 * import_core15.VIEW.zoomStep);
+      } else if (e.key === "-" || e.key === "_") {
+        e.preventDefault();
+        setZoom(viewport.zoomLevel / import_core15.VIEW.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__ */ (0, import_jsx_runtime11.jsx)("div", { className, style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", background: bgColor, ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { color: isDark ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.3)", fontSize: 14 }, children: "No document" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `vi-map ${className}`, ...design.attrs, style: { display: "flex", alignItems: "center", justifyContent: "center", ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "body-sm", style: { color: "var(--ink-muted)" }, children: "No document" }) });
   }
   const hasBackOption = navStack.length > 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  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 && (0, import_core3.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 && (0, import_core3.getChildLayerForNode)(doc, peekNode.id, currentLayerId ?? ""));
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "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", ...(0, import_core15.motionVars)(), ...style },
       onMouseMove: handleCanvasMouseMove,
       onMouseLeave: () => {
         if (!tooltipHoverRef.current && !keepTooltipOpenRef.current) {
@@ -2842,7 +2631,8 @@ function VisualliCanvas(props) {
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: canvasWrapperRef, style: { position: "relative", zIndex: 1, pointerEvents: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "vi-map__immersion", style: { background: immersionFill ?? "transparent" }, "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: canvasWrapperRef, style: { position: "relative", zIndex: 1, pointerEvents: "auto" }, children: fontsReady && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           KonvaStage_default,
           {
             ref: stageRef,
@@ -2855,56 +2645,59 @@ function VisualliCanvas(props) {
             onTouchMove: handleStageTouchMove,
             onTouchEnd: handleStageTouchEnd,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(KonvaContainerLayer, { nodes: flatNodes, containers, isDark }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                KonvaEdgeLayer,
-                {
-                  nodes: flatNodes,
-                  connections,
-                  isDark,
-                  isDragging: isDraggingState
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(KonvaContainerLayer, { nodes: flatNodes, containers, connections, design }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(KonvaEdgeLayer, { nodes: flatNodes, connections, design, isDragging: isDraggingState, clock }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 KonvaNodeLayer,
                 {
+                  design,
+                  clock,
                   isTransitioning,
                   isDragging: isDraggingState,
                   hoveredNodeId: pointerNodeId,
-                  pressedNodeId
+                  pressedNodeId,
+                  selectedNodeId,
+                  focusedNodeId,
+                  touch: touchMode,
+                  peekedNodeId: touchMode ? pinnedId : null
                 }
-              )
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(KonvaContainerLabelLayer, { containers, connections, design })
             ]
           }
         ) }),
-        canvasContextMenu && hasBackOption && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          A11yLayer,
+          {
+            nodes: flatNodes,
+            label: `Ideas in ${currentLayerTitle || "this map"}`,
+            hasChildLayer: (id) => !!(0, import_core3.getChildLayerForNode)(doc, id, currentLayerId ?? ""),
+            onActivate: activateNode,
+            onFocusNode: setFocusedNodeId,
+            announcement: hasBackOption ? `Now inside ${currentLayerTitle}` : void 0
+          }
+        ),
+        canvasContextMenu && hasBackOption && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "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__ */ (0, import_jsx_runtime11.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "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);
@@ -2914,32 +2707,41 @@ function VisualliCanvas(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NavigationStack_default, { stack: navStack, onNavigateBack: handleNavigateBack, isDark, top: navigationStackTop, left: navigationStackLeft }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "data-help": "zoom-controls", style: { position: "absolute", top: "24px", right: "16px", zIndex: 50, pointerEvents: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ZoomControls_default, { isDark }) }),
-        renderOverlay?.({ isDark, containerWidth: canvasSizeRef.current.width || 0, containerHeight: canvasSizeRef.current.height || 0 }),
-        hoveredNode && hoveredNodePosition && viewport.zoomLevel < 3 && viewport.zoomLevel >= import_core13.TEXT_LABEL_HIDE_BELOW_ZOOM && (() => {
-          const nodeData = nodes.get(hoveredNode.nodeId);
-          const borderColor = nodeData?.color ? (0, import_core13.darkenHexColor)(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__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NavigationStack_default, { stack: navStack, onNavigateBack: handleNavigateBack, top: navigationStackTop, left: navigationStackLeft }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "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__ */ (0, import_jsx_runtime9.jsx)(ZoomControls, { onFit: fitToScreen, touch: touchMode })
+          }
+        ),
+        renderOverlay?.({ isDark, theme: design.theme, containerWidth: canvasSizeRef.current.width || 0, containerHeight: canvasSizeRef.current.height || 0 }),
+        touchMode && pinnedNode && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          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 = (0, import_core15.ringsFor)(peekNode.branchCount);
+          const half = (0, import_core15.nodeRadii)(peekNode).rx * (rings.length ? rings[rings.length - 1].scale : 1) * hoveredNodePosition.zoom;
+          const at = (0, import_core15.peekPosition)({ x: hoveredNodePosition.screenX, y: hoveredNodePosition.screenY, half }, { w: canvasSizeRef.current.width || 800, h: canvasSizeRef.current.height || 600 });
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "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) {
@@ -2952,22 +2754,17 @@ function VisualliCanvas(props) {
                 if (clearTooltipTimerRef.current) clearTimeout(clearTooltipTimerRef.current);
                 clearTooltipTimerRef.current = setTimeout(() => {
                   if (!keepTooltipOpenRef.current) setHoveredNode(null);
-                }, 100);
+                }, import_core15.PEEK.hoverClose);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { maxWidth: "20rem", minWidth: "12rem", maxHeight: "15rem", overflowY: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SketchyBoxKonva_default, { fill: "#ffffff", stroke: borderColor, backStroke: borderColor, padding: "1rem 1.25rem", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime9.jsx)(
+                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
+                }
+              )
             }
           );
         })()
@@ -2977,91 +2774,29 @@ function VisualliCanvas(props) {
 }
 
 // src/VisualliRenderer.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function useSystemDark() {
-  const mq = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
-  const [dark, setDark] = (0, import_react15.useState)(mq?.matches ?? false);
-  (0, import_react15.useEffect)(() => {
-    if (!mq) return;
-    const handler = (e) => setDark(e.matches);
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, [mq]);
-  return dark;
-}
-function useFontInjection() {
-  (0, import_react15.useEffect)(() => {
-    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__ */ (0, import_jsx_runtime12.jsxs)("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__ */ (0, import_jsx_runtime12.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", stroke: fg, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "10", y: "6", width: "28", height: "36", rx: "3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "16", y1: "16", x2: "32", y2: "16" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "16", y1: "22", x2: "32", y2: "22" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "16", y1: "28", x2: "26", y2: "28" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { textAlign: "center", lineHeight: 1.7 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)("p", { style: { margin: "4px 0 0", fontSize: 13 }, children: [
-        "Pass a ",
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("code", { style: code, children: "visualliFile" }),
-        " or ",
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("code", { style: code, children: "visualliString" }),
-        " prop."
-      ] })
-    ] })
+var import_jsx_runtime10 = require("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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "vi-map", style: stateBox, role, "aria-live": role === "status" ? "polite" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "64", height: "52", viewBox: "-32 -26 64 52", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: (0, import_core16.blobPath)((0, import_core16.shapeForLevel)(0), 26, 20), fill: `var(--topic-${topic})`, stroke: `var(--topic-${topic}-ring)`, strokeWidth: "2" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "label", style: { margin: 0, color: "var(--ink)" }, children: title }),
+    children && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "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__ */ (0, import_jsx_runtime12.jsxs)("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__ */ (0, import_jsx_runtime12.jsx)("div", { style: { display: "flex", gap: 8 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("style", { children: `@keyframes vr-pulse{0%,80%,100%{opacity:.2;transform:scale(.9)}40%{opacity:1;transform:scale(1.1)}}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { margin: 0, fontSize: 14 }, children: "Loading .visualli file\u2026" })
+function EmptyState() {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(StateNote, { topic: "stone", title: "Nothing to show yet", children: [
+    "Pass a ",
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { style: { fontFamily: "var(--font-mono)" }, children: "visualliFile" }),
+    " or ",
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { maxWidth: 480, width: "100%", padding: "20px 24px", borderRadius: 12, border: `1px solid ${bd}`, background: card }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: head, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { fontSize: 15, fontWeight: 700, color: head }, children: "Failed to parse .visualli file" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { margin: 0, fontSize: 13, color: body, lineHeight: 1.6, wordBreak: "break-word", fontFamily: "monospace" }, children: message })
-  ] }) });
+function LoadingState() {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StateNote, { topic: "teal", title: "Opening the map\u2026", role: "status" });
+}
+function ErrorState({ message }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StateNote, { topic: "berry", title: "This map couldn't be opened", role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { style: { fontFamily: "var(--font-mono)" }, children: message }) });
 }
 var WORKER_SCRIPT = `
 self.onmessage = function(e) {
@@ -3073,6 +2808,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();
@@ -3088,6 +2824,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');
@@ -3140,7 +2878,7 @@ function useAsyncParse(content, useWorker) {
     Promise.resolve().then(() => {
       if (cancelled) return;
       try {
-        const doc = (0, import_core14.parseVisualliFile)(content);
+        const doc = (0, import_core16.parseVisualliFile)(content);
         if (!cancelled) setState({ status: "ready", doc });
       } catch (err) {
         if (!cancelled) setState({ status: "error", message: err instanceof Error ? err.message : String(err) });
@@ -3208,16 +2946,25 @@ 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 });
+  (0, import_react15.useState)(() => {
+    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);
@@ -3228,21 +2975,29 @@ function VisualliRenderer({
     return null;
   }, [parseState]);
   const wrapperStyle = { width: cssWidth, height: cssHeight, overflow: "hidden", ...style };
+  const attrs = design.attrs;
   if (!visualliString && !visualliFile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EmptyState, { isDark }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, ...attrs, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(EmptyState, {}) });
   }
   if (fileReading || parseState.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LoadingState, { isDark }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, ...attrs, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoadingState, {}) });
   }
   if (fileReadError || parseState.status === "error") {
     const msg = fileReadError ?? (parseState.status === "error" ? parseState.message : "Unknown error");
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ErrorState, { message: msg, isDark }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, ...attrs, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ErrorState, { message: msg }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     VisualliCanvas,
     {
       preParsedVisualli: resolvedDoc ?? void 0,
-      isDark,
+      theme,
+      comfort,
+      respectForcedColors,
+      layout,
+      controlsPosition,
+      app,
+      fontBaseUrl,
+      loadWebFonts,
       chromaticImmersion,
       style: { width: "100%", height: "100%" }
     }
@@ -3251,19 +3006,131 @@ function VisualliRenderer({
 
 // src/context/VisualliContext.tsx
 var import_react16 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var VisualliContext = (0, import_react16.createContext)(null);
 function VisualliProvider({
   children
 }) {
   const value = {};
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VisualliContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VisualliContext.Provider, { value, children });
 }
 function useVisualli() {
-  const ctx = (0, import_react16.useContext)(VisualliContext);
-  if (!ctx) {
+  const ctx2 = (0, import_react16.useContext)(VisualliContext);
+  if (!ctx2) {
     return {};
   }
-  return ctx;
+  return ctx2;
+}
+
+// src/hooks/useViewportNodes.ts
+var import_react17 = require("react");
+var import_core17 = require("@visualli/core");
+var SPATIAL_INDEX_THRESHOLD2 = 200;
+function useViewportNodes(nodes, levelFilter, skipCulling = false, isDragging = false) {
+  const { centerX, centerY, zoomLevel, canvasWidth, canvasHeight } = useViewportStore();
+  const indexRef = (0, import_react17.useRef)(null);
+  const nodesHashRef = (0, import_react17.useRef)(0);
+  const nodesHash = nodes.length;
+  if (nodesHash !== nodesHashRef.current) {
+    nodesHashRef.current = nodesHash;
+    indexRef.current = null;
+  }
+  return (0, import_react17.useMemo)(() => {
+    if (nodes.length === 0) return [];
+    if (!indexRef.current && nodes.length >= SPATIAL_INDEX_THRESHOLD2 && !skipCulling && !isDragging) {
+      indexRef.current = new import_core17.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 (0, import_core17.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
+var import_core19 = require("@visualli/core");
+
+// src/components/KonvaNode.tsx
+var import_react18 = __toESM(require("react"), 1);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var KonvaNode = import_react18.default.memo(function KonvaNode2({
+  node,
+  zoomLevel,
+  isExternallyHovered = false,
+  isExternallyPressed = false,
+  isSelected = false,
+  isDragging = false,
+  design = DEFAULT_DESIGN
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    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
+var import_react19 = require("react");
+var import_core18 = require("@visualli/core");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var KonvaEdge = (0, import_react19.memo)(function KonvaEdge2({ sourceNode: from, targetNode: to, connection, zoomLevel = 1, design = DEFAULT_DESIGN }) {
+  const g = (0, import_react19.useMemo)(
+    () => prepareConnector((0, import_core18.connectorGeometry)(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__ */ (0, import_jsx_runtime13.jsx)(
+    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
+var import_react20 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var KonvaContainer = (0, import_react20.memo)(function KonvaContainer2({ nodes, label = "", zoomLevel = 1, design = DEFAULT_DESIGN }) {
+  const placed = (0, import_react20.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime14.jsx)(
+    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;
 //# sourceMappingURL=index.cjs.map