@visualli/react 0.1.1

package/dist/index.js

@@ -0,0 +1,3289 @@
+'use client';
+
+// src/VisualliRenderer.tsx
+import { useEffect as useEffect7, useRef as useRef10, useState as useState4, useMemo as useMemo8 } from "react";
+import { parseVisualliFile as parseVisualliFile2 } from "@visualli/core";
+
+// src/VisualliCanvas.tsx
+import { useRef as useRef9, useState as useState3, useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo7 } from "react";
+import {
+  parseVisualliFile,
+  getNodesForLayer,
+  getThemeBackground,
+  darkenHexColor as darkenHexColor2,
+  RBushSpatialIndex as RBushSpatialIndex2,
+  NODE_HEIGHT as NODE_HEIGHT5,
+  TEXT_LABEL_HIDE_BELOW_ZOOM as TEXT_LABEL_HIDE_BELOW_ZOOM3,
+  ZOOM_NAV_IN_THRESHOLD,
+  ZOOM_NAV_OUT_THRESHOLD,
+  ZOOM_MIN as ZOOM_MIN2
+} from "@visualli/core";
+
+// src/stores/useNodeStore.ts
+import { create } from "zustand";
+function buildChildrenIndex(nodes) {
+  const index = /* @__PURE__ */ new Map();
+  for (const node of nodes.values()) {
+    const pid = node.parentId ?? null;
+    if (!index.has(pid)) index.set(pid, /* @__PURE__ */ new Set());
+    index.get(pid).add(node.id);
+  }
+  return index;
+}
+var useNodeStore = create((set, get) => ({
+  nodes: /* @__PURE__ */ new Map(),
+  childrenIndex: /* @__PURE__ */ new Map(),
+  setNodes: (nodes) => set({ nodes, childrenIndex: buildChildrenIndex(nodes) }),
+  updateNode: (nodeId, updates) => set((s) => {
+    const node = s.nodes.get(nodeId);
+    if (!node) return s;
+    const next = new Map(s.nodes);
+    next.set(nodeId, { ...node, ...updates, updatedAt: /* @__PURE__ */ new Date() });
+    return { nodes: next };
+  }),
+  updateNodePosition: (nodeId, x, y) => set((s) => {
+    const node = s.nodes.get(nodeId);
+    if (!node || node.x === x && node.y === y) return s;
+    const next = new Map(s.nodes);
+    next.set(nodeId, { ...node, x, y });
+    return { nodes: next };
+  }),
+  addNode: (node) => set((s) => {
+    const next = new Map(s.nodes);
+    next.set(node.id, node);
+    const idx = new Map(s.childrenIndex);
+    const pid = node.parentId ?? null;
+    if (!idx.has(pid)) idx.set(pid, /* @__PURE__ */ new Set());
+    idx.get(pid).add(node.id);
+    return { nodes: next, childrenIndex: idx };
+  }),
+  removeNode: (nodeId) => set((s) => {
+    const node = s.nodes.get(nodeId);
+    if (!node) return s;
+    const next = new Map(s.nodes);
+    next.delete(nodeId);
+    const idx = new Map(s.childrenIndex);
+    const pid = node.parentId ?? null;
+    if (idx.has(pid)) {
+      const set2 = new Set(idx.get(pid));
+      set2.delete(nodeId);
+      if (set2.size === 0) idx.delete(pid);
+      else idx.set(pid, set2);
+    }
+    return { nodes: next, childrenIndex: idx };
+  }),
+  setNodeExpanded: (nodeId, expanded) => set((s) => {
+    const node = s.nodes.get(nodeId);
+    if (!node) return s;
+    const next = new Map(s.nodes);
+    next.set(nodeId, { ...node, isExpanded: expanded, updatedAt: /* @__PURE__ */ new Date() });
+    return { nodes: next };
+  }),
+  getNode: (nodeId) => get().nodes.get(nodeId),
+  getChildren: (pid) => {
+    const { nodes, childrenIndex } = get();
+    return Array.from(childrenIndex.get(pid) ?? []).map((id) => nodes.get(id)).filter(Boolean);
+  },
+  getChildrenIds: (pid) => get().childrenIndex.get(pid) ?? /* @__PURE__ */ new Set(),
+  getAllNodes: () => Array.from(get().nodes.values())
+}));
+
+// src/stores/useViewportStore.ts
+import { create as create2 } from "zustand";
+import {
+  panViewport,
+  zoomViewport,
+  setViewportCenter,
+  recalculateViewportBounds,
+  clampZoom,
+  DEFAULT_CANVAS_WIDTH,
+  DEFAULT_CANVAS_HEIGHT,
+  worldToScreen,
+  screenToWorld,
+  ZOOM_DEFAULT
+} from "@visualli/core";
+function makeInitial(w, h) {
+  const vp = {
+    centerX: 0,
+    centerY: 0,
+    zoomLevel: ZOOM_DEFAULT,
+    rotation: 0,
+    visibleBounds: { minX: 0, minY: 0, maxX: 0, maxY: 0 }
+  };
+  return recalculateViewportBounds(vp, w, h);
+}
+var getVP = (s) => ({
+  centerX: s.centerX,
+  centerY: s.centerY,
+  zoomLevel: s.zoomLevel,
+  rotation: s.rotation,
+  visibleBounds: s.visibleBounds
+});
+var useViewportStore = create2((set, get) => {
+  const init = makeInitial(DEFAULT_CANVAS_WIDTH, DEFAULT_CANVAS_HEIGHT);
+  return {
+    ...init,
+    canvasWidth: DEFAULT_CANVAS_WIDTH,
+    canvasHeight: DEFAULT_CANVAS_HEIGHT,
+    pan: (dx, dy) => set((s) => {
+      const updated = recalculateViewportBounds(panViewport(dx, dy, getVP(s)), s.canvasWidth, s.canvasHeight);
+      return { centerX: updated.centerX, centerY: updated.centerY, visibleBounds: updated.visibleBounds };
+    }),
+    zoom: (delta, pivotX, pivotY) => set((s) => {
+      const updated = recalculateViewportBounds(
+        zoomViewport(delta, getVP(s), pivotX, pivotY, s.canvasWidth, s.canvasHeight),
+        s.canvasWidth,
+        s.canvasHeight
+      );
+      return { centerX: updated.centerX, centerY: updated.centerY, zoomLevel: updated.zoomLevel, visibleBounds: updated.visibleBounds };
+    }),
+    setCenter: (x, y) => set((s) => {
+      const updated = recalculateViewportBounds(setViewportCenter(x, y, getVP(s)), s.canvasWidth, s.canvasHeight);
+      return { centerX: updated.centerX, centerY: updated.centerY, visibleBounds: updated.visibleBounds };
+    }),
+    setZoom: (level) => set((s) => {
+      const clamped = clampZoom(level);
+      const updated = recalculateViewportBounds({ ...getVP(s), zoomLevel: clamped }, s.canvasWidth, s.canvasHeight);
+      return { zoomLevel: updated.zoomLevel, visibleBounds: updated.visibleBounds };
+    }),
+    updateCanvasSize: (w, h) => set((s) => {
+      const updated = recalculateViewportBounds(getVP(s), w, h);
+      return { canvasWidth: w, canvasHeight: h, visibleBounds: updated.visibleBounds };
+    }),
+    getVisibleBounds: () => get().visibleBounds,
+    worldToScreen: (x, y) => {
+      const s = get();
+      return worldToScreen(x, y, getVP(s), s.canvasWidth, s.canvasHeight);
+    },
+    screenToWorld: (x, y) => {
+      const s = get();
+      return screenToWorld(x, y, getVP(s), s.canvasWidth, s.canvasHeight);
+    }
+  };
+});
+
+// src/stores/stores.ts
+import { create as create3 } from "zustand";
+import { selectionStore, renderConfigStore } from "@visualli/core";
+var useSelectionStore = create3((set, get, store) => {
+  selectionStore.subscribe((state) => set(state));
+  return selectionStore.getState();
+});
+var useRenderConfigStore = create3((set, get, store) => {
+  renderConfigStore.subscribe((state) => set(state));
+  return renderConfigStore.getState();
+});
+
+// src/hooks/useKonvaRenderer.ts
+import { useEffect, useCallback, useRef, useState } from "react";
+function useKonvaRenderer({
+  containerRef,
+  stageRef,
+  enabled = true
+}) {
+  const pan = useViewportStore((s) => s.pan);
+  const zoom = useViewportStore((s) => s.zoom);
+  const setZoom = useViewportStore((s) => s.setZoom);
+  const setCenter = useViewportStore((s) => s.setCenter);
+  const updateCanvasSize = useViewportStore((s) => s.updateCanvasSize);
+  const autoAdjust = useRenderConfigStore((s) => s.autoAdjustQuality);
+  const [canvasWidth, setCanvasWidth] = useState(0);
+  const [canvasHeight, setCanvasHeight] = useState(0);
+  const cachedSizeRef = useRef({ width: 0, height: 0 });
+  const isPanningRef = useRef(false);
+  const lastPanPointRef = useRef({ x: 0, y: 0 });
+  const panAccumRef = useRef({ x: 0, y: 0 });
+  const fpsRef = useRef({ frames: 0, last: performance.now() });
+  const fpsRafId = useRef(null);
+  useEffect(() => {
+    if (!enabled) return;
+    const tick = (now) => {
+      fpsRef.current.frames++;
+      if (now - fpsRef.current.last >= 2e3) {
+        const fps = fpsRef.current.frames / ((now - fpsRef.current.last) / 1e3) | 0;
+        autoAdjust(fps);
+        fpsRef.current = { frames: 0, last: now };
+      }
+      fpsRafId.current = requestAnimationFrame(tick);
+    };
+    fpsRafId.current = requestAnimationFrame(tick);
+    return () => {
+      if (fpsRafId.current !== null) cancelAnimationFrame(fpsRafId.current);
+    };
+  }, [enabled, autoAdjust]);
+  useEffect(() => {
+    if (!enabled) return;
+    let rafId = null;
+    const measure = () => {
+      const el = containerRef.current;
+      const w = el ? Math.round(el.getBoundingClientRect().width) : 800;
+      const h = el ? Math.round(el.getBoundingClientRect().height) : 600;
+      return { w, h };
+    };
+    const updateSize = () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        const { w, h } = measure();
+        if (w > 0 && h > 0 && (cachedSizeRef.current.width !== w || cachedSizeRef.current.height !== h)) {
+          cachedSizeRef.current = { width: w, height: h };
+          setCanvasWidth(w);
+          setCanvasHeight(h);
+          updateCanvasSize(w, h);
+        }
+      });
+    };
+    updateSize();
+    let ro = null;
+    if (typeof ResizeObserver !== "undefined" && containerRef.current) {
+      ro = new ResizeObserver(updateSize);
+      ro.observe(containerRef.current);
+    } else {
+      window.addEventListener("resize", updateSize);
+    }
+    return () => {
+      ro ? ro.disconnect() : window.removeEventListener("resize", updateSize);
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [enabled, containerRef, updateCanvasSize]);
+  const handleWheel = useCallback((e) => {
+    e.evt.preventDefault();
+    const stage = e.target.getStage();
+    if (!stage) return;
+    const pointer = stage.getPointerPosition();
+    if (!pointer) return;
+    const delta = -e.evt.deltaY / 1e3;
+    zoom(delta, pointer.x, pointer.y);
+  }, [zoom]);
+  const handleMouseDown = useCallback((e) => {
+    const clickedOnEmpty = e.target === e.target.getStage();
+    if (clickedOnEmpty && e.evt.button === 0) {
+      e.evt.preventDefault();
+      isPanningRef.current = true;
+      lastPanPointRef.current = { x: e.evt.clientX, y: e.evt.clientY };
+      panAccumRef.current = { x: 0, y: 0 };
+      const stage = e.target.getStage();
+      if (stage) stage.container().style.cursor = "grabbing";
+    }
+  }, []);
+  const handleMouseMove = useCallback((e) => {
+    if (!isPanningRef.current) {
+      const isOverEmpty = e.target === e.target.getStage();
+      const stage2 = e.target.getStage();
+      if (stage2) stage2.container().style.cursor = isOverEmpty ? "grab" : "default";
+      return;
+    }
+    e.evt.preventDefault();
+    const deltaX = e.evt.clientX - lastPanPointRef.current.x;
+    const deltaY = e.evt.clientY - lastPanPointRef.current.y;
+    const stage = e.target.getStage();
+    if (stage) {
+      stage.x(stage.x() + deltaX);
+      stage.y(stage.y() + deltaY);
+      stage.batchDraw();
+    }
+    panAccumRef.current.x += deltaX;
+    panAccumRef.current.y += deltaY;
+    lastPanPointRef.current = { x: e.evt.clientX, y: e.evt.clientY };
+  }, []);
+  const handleMouseUp = useCallback((e) => {
+    if (isPanningRef.current) {
+      isPanningRef.current = false;
+      const { x, y } = panAccumRef.current;
+      if (x !== 0 || y !== 0) {
+        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 };
+}
+
+// src/hooks/useKonvaLayerTransition.ts
+import { useCallback as useCallback2, useRef as useRef2, useEffect as useEffect2 } from "react";
+
+// src/animations/konvaLayerTransition.ts
+import { easeInOutSine, easeOutCubic, easeZoomTransition } from "@visualli/core";
+import { ANIMATION_PHASES } from "@visualli/core";
+function parseColor(color) {
+  if (color.startsWith("#")) {
+    const h = color.slice(1);
+    return { r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16) };
+  }
+  const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  return m ? { r: +m[1], g: +m[2], b: +m[3] } : { r: 255, g: 255, b: 255 };
+}
+function interpolateRgb(a, b, t) {
+  const e = easeInOutSine(t);
+  return `rgb(${a.r + (b.r - a.r) * e + 0.5 | 0},${a.g + (b.g - a.g) * e + 0.5 | 0},${a.b + (b.b - a.b) * e + 0.5 | 0})`;
+}
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+var KonvaLayerTransitionAnimator = class {
+  constructor() {
+    this.rafId = null;
+    this.timers = [];
+    this._active = false;
+  }
+  get active() {
+    return this._active;
+  }
+  cancel() {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.timers.forEach(clearTimeout);
+    this.timers = [];
+    this._active = false;
+  }
+  // ── Zoom into child layer ──────────────────────────────────────────────────
+  animateZoomIntoLayer(current, targetNode, childCenter, fromColor, toColor, cb, targetZoom = 1, canvasWidth = 800, canvasHeight = 600) {
+    if (this._active) return;
+    this._active = true;
+    const ZOOM_DURATION = ANIMATION_PHASES.ZOOM_IN.ZOOM_TO_TARGET;
+    const FADE_OUT_DELAY = ANIMATION_PHASES.ZOOM_IN.FADE_OUT_START;
+    const FADE_OUT_DURATION = ANIMATION_PHASES.ZOOM_IN.FADE_OUT;
+    const SWAP_AT_MS = ANIMATION_PHASES.ZOOM_IN.CONTENT_SWAP;
+    const FADE_IN_DURATION = ANIMATION_PHASES.ZOOM_IN.FADE_IN;
+    const SETTLE_FACTOR = 0.94;
+    const z0 = current.zoomLevel;
+    const dx = targetNode.x - current.centerX;
+    const dy = targetNode.y - current.centerY;
+    const vmin = Math.min(canvasWidth, canvasHeight);
+    const fillZoom = Math.max(4, vmin * 1.5 / Math.max(targetNode.width, 100));
+    const fromRgb = parseColor(fromColor);
+    const toRgb = parseColor(toColor);
+    const state = { viewport: { centerX: 0, centerY: 0, zoomLevel: 0 }, opacity: 1, backgroundColor: fromColor };
+    const start = performance.now();
+    let swapped = false;
+    let fadeInStart = 0;
+    cb.onPhaseChange?.("zoom");
+    const tick = (now) => {
+      if (!this._active) return;
+      const elapsed = now - start;
+      if (!swapped) {
+        if (elapsed >= SWAP_AT_MS) {
+          swapped = true;
+          fadeInStart = now;
+          state.viewport = { centerX: childCenter.x, centerY: childCenter.y, zoomLevel: targetZoom * SETTLE_FACTOR };
+          state.opacity = 0;
+          state.backgroundColor = toColor;
+          cb.onUpdate(state);
+          cb.onPhaseChange?.("swap");
+          this.rafId = requestAnimationFrame(tick);
+          return;
+        }
+        const rawT = Math.min(elapsed / ZOOM_DURATION, 1);
+        const zoomT = easeZoomTransition(rawT);
+        const zl = lerp(z0, fillZoom, zoomT);
+        state.viewport = {
+          centerX: targetNode.x - dx * z0 * (1 - zoomT) / zl,
+          centerY: targetNode.y - dy * z0 * (1 - zoomT) / zl,
+          zoomLevel: zl
+        };
+        state.opacity = elapsed > FADE_OUT_DELAY ? Math.max(0, 1 - easeOutCubic(Math.min((elapsed - FADE_OUT_DELAY) / FADE_OUT_DURATION, 1))) : 1;
+        state.backgroundColor = interpolateRgb(fromRgb, toRgb, rawT);
+        cb.onUpdate(state);
+      } else {
+        const fi = now - fadeInStart;
+        const ft = Math.min(fi / FADE_IN_DURATION, 1);
+        const eased = easeOutCubic(ft);
+        state.viewport = { centerX: childCenter.x, centerY: childCenter.y, zoomLevel: lerp(targetZoom * SETTLE_FACTOR, targetZoom, eased) };
+        state.opacity = eased;
+        state.backgroundColor = toColor;
+        cb.onUpdate(state);
+        if (ft >= 1) {
+          cb.onPhaseChange?.("fade-in");
+          this.rafId = null;
+          this._complete(cb.onComplete);
+          return;
+        }
+      }
+      this.rafId = requestAnimationFrame(tick);
+    };
+    this.rafId = requestAnimationFrame(tick);
+  }
+  // ── Zoom out to parent layer ───────────────────────────────────────────────
+  animateZoomOutToParent(current, parent, fromColor, toColor, cb) {
+    if (this._active) return;
+    this._active = true;
+    const FADE_OUT = ANIMATION_PHASES.ZOOM_OUT.FADE_OUT;
+    const FADE_IN = ANIMATION_PHASES.ZOOM_OUT.FADE_IN;
+    const OPACITY_SETTLE = 66;
+    const fromRgb = parseColor(fromColor);
+    const toRgb = parseColor(toColor);
+    const state = { viewport: { centerX: 0, centerY: 0, zoomLevel: 0 }, opacity: 1, backgroundColor: fromColor };
+    const start = performance.now();
+    let swapped = false;
+    let fadeInStart = 0;
+    cb.onPhaseChange?.("fade-out");
+    const tick = (now) => {
+      if (!this._active) return;
+      const elapsed = now - start;
+      if (!swapped) {
+        if (elapsed >= FADE_OUT) {
+          swapped = true;
+          fadeInStart = now;
+          state.viewport = { centerX: parent.centerX, centerY: parent.centerY, zoomLevel: parent.zoomLevel * 5 };
+          state.opacity = 0;
+          state.backgroundColor = toColor;
+          cb.onUpdate(state);
+          cb.onPhaseChange?.("zoom-back");
+          this.rafId = requestAnimationFrame(tick);
+          return;
+        }
+        const rawT = Math.min(elapsed / FADE_OUT, 1);
+        const t = easeOutCubic(rawT);
+        state.viewport = { centerX: current.centerX, centerY: current.centerY, zoomLevel: lerp(current.zoomLevel, current.zoomLevel * 0.6, t) };
+        state.opacity = 1 - t;
+        state.backgroundColor = interpolateRgb(fromRgb, toRgb, rawT);
+        cb.onUpdate(state);
+      } else {
+        const fi = now - fadeInStart;
+        const rawT = Math.min(fi / FADE_IN, 1);
+        const t = easeZoomTransition(rawT);
+        state.viewport = { centerX: parent.centerX, centerY: parent.centerY, zoomLevel: lerp(parent.zoomLevel * 5, parent.zoomLevel, t) };
+        state.opacity = fi < OPACITY_SETTLE ? 0 : easeZoomTransition(Math.min((fi - OPACITY_SETTLE) / (FADE_IN - OPACITY_SETTLE), 1));
+        state.backgroundColor = toColor;
+        cb.onUpdate(state);
+        if (rawT >= 1) {
+          cb.onPhaseChange?.("fade-in");
+          this.rafId = null;
+          this._complete(cb.onComplete);
+          return;
+        }
+      }
+      this.rafId = requestAnimationFrame(tick);
+    };
+    this.rafId = requestAnimationFrame(tick);
+  }
+  _complete(onComplete) {
+    this.timers.forEach(clearTimeout);
+    this.timers = [];
+    this._active = false;
+    onComplete();
+  }
+};
+var konvaLayerTransitionAnimator = new KonvaLayerTransitionAnimator();
+
+// src/utils/layerNavigation.ts
+import {
+  getConnectionsForLayer,
+  getChildLayerForNode,
+  getLayerForNavigation,
+  calculateFitZoom,
+  calculateFitCenter,
+  getContainersForLayer,
+  calculateFitView
+} from "@visualli/core";
+
+// src/hooks/useKonvaLayerTransition.ts
+function useKonvaLayerTransition(opts) {
+  const {
+    stageRef,
+    canvasWrapperRef,
+    bgRef,
+    onSwapLayer,
+    onSwapBack,
+    onComplete,
+    onViewportFrame,
+    onViewportFinal,
+    onPhaseChange: onPhaseChangeExt,
+    onTransitionLifecycle
+  } = opts;
+  const setZoom = useViewportStore((s) => s.setZoom);
+  const setCenter = useViewportStore((s) => s.setCenter);
+  const getState = useViewportStore.getState;
+  const swappedRef = useRef2(false);
+  const canvasSizeRef = useRef2({ width: 800, height: 600 });
+  useEffect2(() => {
+    const update = () => {
+      const vp = useViewportStore.getState();
+      canvasSizeRef.current = { width: vp.canvasWidth || 800, height: vp.canvasHeight || 600 };
+    };
+    update();
+    const unsubscribe = useViewportStore.subscribe(update);
+    return unsubscribe;
+  }, []);
+  const applyViewport = useCallback2((vp) => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    const { width, height } = canvasSizeRef.current;
+    stage.x(width / 2 - vp.centerX * vp.zoomLevel);
+    stage.y(height / 2 - vp.centerY * vp.zoomLevel);
+    stage.scaleX(vp.zoomLevel);
+    stage.scaleY(vp.zoomLevel);
+    stage.getLayers().forEach((l) => l.drawScene());
+    setCenter(vp.centerX, vp.centerY);
+    setZoom(vp.zoomLevel);
+  }, [stageRef, setCenter, setZoom]);
+  const applyOpacity = useCallback2((opacity) => {
+    if (canvasWrapperRef.current) {
+      canvasWrapperRef.current.style.opacity = String(opacity);
+    }
+  }, [canvasWrapperRef]);
+  const applyBgColor = useCallback2((color) => {
+    if (bgRef?.current) {
+      bgRef.current.style.backgroundColor = color;
+    }
+  }, [bgRef]);
+  const zoomIntoLayer = useCallback2((_doc, targetNode, childLayerId, childNodes, fromColor, toColor) => {
+    if (konvaLayerTransitionAnimator.active) return;
+    const vp = getState();
+    const stage = stageRef.current;
+    const w = stage?.width() ?? 800;
+    const h = stage?.height() ?? 600;
+    const fit = calculateFitView(childNodes, w, h);
+    swappedRef.current = false;
+    onTransitionLifecycle?.("start");
+    konvaLayerTransitionAnimator.animateZoomIntoLayer(
+      { centerX: vp.centerX, centerY: vp.centerY, zoomLevel: vp.zoomLevel },
+      { x: targetNode.x, y: targetNode.y, width: targetNode.width, height: targetNode.height },
+      { x: fit.centerX, y: fit.centerY },
+      fromColor,
+      toColor,
+      {
+        onUpdate: ({ viewport, opacity, backgroundColor }) => {
+          if (onViewportFrame) {
+            onViewportFrame(viewport);
+          } else {
+            applyViewport(viewport);
+          }
+          applyOpacity(opacity);
+          applyBgColor(backgroundColor);
+        },
+        onComplete: () => {
+          const finalVp = { centerX: fit.centerX, centerY: fit.centerY, zoomLevel: fit.zoomLevel };
+          if (onViewportFinal) {
+            onViewportFinal(finalVp);
+          } else {
+            applyViewport(finalVp);
+          }
+          applyOpacity(1);
+          onComplete();
+          onTransitionLifecycle?.("end");
+        },
+        onPhaseChange: (phase) => {
+          onPhaseChangeExt?.(phase);
+          if (phase === "swap" && !swappedRef.current) {
+            swappedRef.current = true;
+            onSwapLayer(childLayerId);
+          }
+        }
+      },
+      fit.zoomLevel,
+      w,
+      h
+    );
+  }, [stageRef, getState, applyViewport, applyOpacity, applyBgColor, onSwapLayer, onComplete, onViewportFrame, onViewportFinal, onPhaseChangeExt, onTransitionLifecycle]);
+  const zoomOutToParent = useCallback2((parentViewport, fromColor, toColor) => {
+    if (konvaLayerTransitionAnimator.active) return;
+    const vp = getState();
+    swappedRef.current = false;
+    onTransitionLifecycle?.("start");
+    konvaLayerTransitionAnimator.animateZoomOutToParent(
+      { centerX: vp.centerX, centerY: vp.centerY, zoomLevel: vp.zoomLevel },
+      parentViewport,
+      fromColor,
+      toColor,
+      {
+        onUpdate: ({ viewport, opacity, backgroundColor }) => {
+          if (onViewportFrame) {
+            onViewportFrame(viewport);
+          } else {
+            applyViewport(viewport);
+          }
+          applyOpacity(opacity);
+          applyBgColor(backgroundColor);
+        },
+        onComplete: () => {
+          if (onViewportFinal) {
+            onViewportFinal(parentViewport);
+          } else {
+            applyViewport(parentViewport);
+          }
+          applyOpacity(1);
+          onComplete();
+          onTransitionLifecycle?.("end");
+        },
+        onPhaseChange: (phase) => {
+          onPhaseChangeExt?.(phase);
+          if (phase === "zoom-back" && !swappedRef.current) {
+            swappedRef.current = true;
+            onSwapBack();
+          }
+        }
+      }
+    );
+  }, [getState, applyViewport, applyOpacity, applyBgColor, onSwapBack, onComplete, onViewportFrame, onViewportFinal, onPhaseChangeExt, onTransitionLifecycle]);
+  const isTransitioning = useCallback2(() => konvaLayerTransitionAnimator.active, []);
+  useEffect2(() => () => {
+    konvaLayerTransitionAnimator.cancel();
+  }, []);
+  return { zoomIntoLayer, zoomOutToParent, isTransitioning };
+}
+
+// src/components/KonvaStage.tsx
+import { useRef as useRef3, useEffect as useEffect3, forwardRef } from "react";
+
+// src/konvaCompat.ts
+import {
+  Stage,
+  Layer,
+  Group,
+  Shape,
+  Path,
+  Rect,
+  Text,
+  Arrow,
+  Line,
+  Circle,
+  TextPath
+} from "react-konva";
+var KStage = Stage;
+var KLayer = Layer;
+var KGroup = Group;
+var KShape = Shape;
+var KRect = Rect;
+var KText = Text;
+var KLine = Line;
+var KTextPath = TextPath;
+
+// src/components/KonvaStage.tsx
+import { jsx } from "react/jsx-runtime";
+var KonvaStage = forwardRef(function KonvaStage2({
+  children,
+  onWheel,
+  onMouseDown,
+  onMouseMove,
+  onMouseUp,
+  onContextMenu,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd,
+  onStageReady
+}, ref) {
+  const internalRef = useRef3(null);
+  const { centerX, centerY, zoomLevel, canvasWidth, canvasHeight } = useViewportStore();
+  useEffect3(() => {
+    if (internalRef.current) {
+      if (typeof ref === "function") ref(internalRef.current);
+      else if (ref) ref.current = internalRef.current;
+      onStageReady?.(internalRef.current);
+    }
+  }, []);
+  useEffect3(() => {
+    return () => {
+      internalRef.current?.destroy();
+    };
+  }, []);
+  const w = canvasWidth || 800;
+  const h = canvasHeight || 600;
+  const stageX = w / 2 - centerX * zoomLevel;
+  const stageY = h / 2 - centerY * zoomLevel;
+  return /* @__PURE__ */ jsx(
+    KStage,
+    {
+      ref: internalRef,
+      width: w,
+      height: h,
+      x: stageX,
+      y: stageY,
+      scaleX: zoomLevel,
+      scaleY: zoomLevel,
+      onWheel,
+      onMouseDown,
+      onMouseMove,
+      onMouseUp,
+      onContextMenu,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      draggable: false,
+      pixelRatio: 1,
+      children
+    }
+  );
+});
+var KonvaStage_default = KonvaStage;
+
+// src/components/KonvaNodeLayer.tsx
+import { useRef as useRef5, useLayoutEffect, useEffect as useEffect4, useMemo as useMemo3 } from "react";
+
+// src/hooks/useViewportNodes.ts
+import { useMemo, useRef as useRef4 } from "react";
+import { RBushSpatialIndex, getViewportVisibleNodes } from "@visualli/core";
+var SPATIAL_INDEX_THRESHOLD = 200;
+function useViewportNodes(nodes, levelFilter, skipCulling = false, isDragging = false) {
+  const { centerX, centerY, zoomLevel, canvasWidth, canvasHeight } = useViewportStore();
+  const indexRef = useRef4(null);
+  const nodesHashRef = useRef4(0);
+  const nodesHash = nodes.length;
+  if (nodesHash !== nodesHashRef.current) {
+    nodesHashRef.current = nodesHash;
+    indexRef.current = null;
+  }
+  return useMemo(() => {
+    if (nodes.length === 0) return [];
+    if (!indexRef.current && nodes.length >= SPATIAL_INDEX_THRESHOLD && !skipCulling && !isDragging) {
+      indexRef.current = new RBushSpatialIndex();
+      indexRef.current.bulkLoad(nodes.map((n) => ({
+        nodeId: n.id,
+        bounds: { minX: n.x, minY: n.y, maxX: n.x + n.width, maxY: n.y + n.height }
+      })));
+    }
+    return getViewportVisibleNodes({
+      nodes,
+      viewport: { centerX, centerY, zoomLevel, rotation: 0, visibleBounds: { minX: 0, minY: 0, maxX: 0, maxY: 0 } },
+      canvasWidth,
+      canvasHeight,
+      levelFilter,
+      skipCulling,
+      isDragging,
+      spatialIndex: indexRef.current,
+      spatialIndexThreshold: SPATIAL_INDEX_THRESHOLD
+    });
+  }, [nodes, levelFilter, skipCulling, isDragging, centerX, centerY, zoomLevel, canvasWidth, canvasHeight]);
+}
+
+// src/components/KonvaNode.tsx
+import React2, { useMemo as useMemo2 } from "react";
+import { CANVAS_COLORS, NODE_HEIGHT, TEXT_LABEL_HIDE_BELOW_ZOOM, darkenHexColor } from "@visualli/core";
+
+// src/config/index.ts
+import {
+  ALL_BLOB_SHAPES as ALL_BLOB_SHAPES2,
+  ACTIVE_BLOB_TYPES,
+  BLOB_LAYER_CONFIG,
+  NODE_LAYER_CONFIG,
+  getBlobTypeForLayer,
+  BLOB_TEXT_OFFSETS,
+  drawBlobPath,
+  NODE_TEXT_BASE_FONT_PX,
+  DESCRIPTION_TEXT_BASE_FONT_PX,
+  CONTAINER_LABEL_BASE_FONT_PX,
+  EDGE_LABEL_BASE_FONT_PX,
+  OVERLAY_FONT_UPPER_BOOST_PX,
+  computeNodeTextWorldScale,
+  computeNodeTextScreenScale,
+  computeOverlayScale,
+  computeEdgeLabelScale
+} from "@visualli/core";
+
+// src/config/blobShapes.ts
+var ALL_BLOB_SHAPES = [
+  // Shape 0 · Blob 1 (root / L0)
+  [
+    { x: 1.12, y: 0 },
+    { x: 0.86, y: 0.56 },
+    { x: 0.46, y: 0.94 },
+    { x: -0.08, y: 1.06 },
+    { x: -0.68, y: 0.82 },
+    { x: -0.96, y: 0.08 },
+    { x: -0.55, y: -0.82 },
+    { x: 0.04, y: -1.02 },
+    { x: 0.72, y: -0.8 },
+    { x: 1.08, y: -0.38 }
+  ],
+  // Shape 1 · Blob 2
+  [
+    { x: -0.489, y: -0.625 },
+    { x: -0.384, y: -0.716 },
+    { x: -0.285, y: -0.792 },
+    { x: -0.189, y: -0.855 },
+    { x: -0.09, y: -0.903 },
+    { x: 0.014, y: -0.932 },
+    { x: 0.129, y: -0.94 },
+    { x: 0.255, y: -0.924 },
+    { x: 0.412, y: -0.876 },
+    { x: 0.516, y: -0.832 },
+    { x: 0.612, y: -0.78 },
+    { x: 0.695, y: -0.725 },
+    { x: 0.767, y: -0.666 },
+    { x: 0.83, y: -0.606 },
+    { x: 0.885, y: -0.546 },
+    { x: 0.933, y: -0.486 },
+    { x: 0.979, y: -0.425 },
+    { x: 1.006, y: -0.385 },
+    { x: 1.034, y: -0.334 },
+    { x: 1.058, y: -0.276 },
+    { x: 1.078, y: -0.209 },
+    { x: 1.092, y: -0.133 },
+    { x: 1.101, y: -0.046 },
+    { x: 1.102, y: 0.052 },
+    { x: 1.094, y: 0.173 },
+    { x: 1.083, y: 0.244 },
+    { x: 1.063, y: 0.324 },
+    { x: 1.034, y: 0.401 },
+    { x: 0.996, y: 0.477 },
+    { x: 0.948, y: 0.549 },
+    { x: 0.889, y: 0.617 },
+    { x: 0.82, y: 0.681 },
+    { x: 0.735, y: 0.741 },
+    { x: 0.658, y: 0.783 },
+    { x: 0.569, y: 0.822 },
+    { x: 0.474, y: 0.855 },
+    { x: 0.372, y: 0.882 },
+    { x: 0.265, y: 0.904 },
+    { x: 0.156, y: 0.92 },
+    { x: 0.046, y: 0.931 },
+    { x: -0.069, y: 0.938 },
+    { x: -0.155, y: 0.935 },
+    { x: -0.25, y: 0.919 },
+    { x: -0.346, y: 0.89 },
+    { x: -0.443, y: 0.851 },
+    { x: -0.539, y: 0.8 },
+    { x: -0.633, y: 0.738 },
+    { x: -0.723, y: 0.667 },
+    { x: -0.808, y: 0.585 },
+    { x: -0.882, y: 0.501 },
+    { x: -0.944, y: 0.421 },
+    { x: -0.994, y: 0.343 },
+    { x: -1.034, y: 0.267 },
+    { x: -1.064, y: 0.192 },
+    { x: -1.085, y: 0.12 },
+    { x: -1.097, y: 0.042 },
+    { x: -1.102, y: 1e-3 },
+    { x: -1.09, y: -0.243 },
+    { x: -1.05, y: -0.365 },
+    { x: -0.99, y: -0.441 },
+    { x: -0.911, y: -0.479 },
+    { x: -0.819, y: -0.499 },
+    { x: -0.715, y: -0.517 },
+    { x: -0.605, y: -0.551 }
+  ],
+  // Shape 2 · Blob 3
+  [
+    { x: 3e-3, y: -0.97 },
+    { x: 0.163, y: -0.984 },
+    { x: 0.286, y: -1.028 },
+    { x: 0.389, y: -1.096 },
+    { x: 0.488, y: -1.174 },
+    { x: 0.597, y: -1.21 },
+    { x: 0.728, y: -1.165 },
+    { x: 0.867, y: -1.036 },
+    { x: 0.996, y: -0.839 },
+    { x: 1.098, y: -0.59 },
+    { x: 1.158, y: -0.304 },
+    { x: 1.153, y: 0.012 },
+    { x: 1.08, y: 0.336 },
+    { x: 0.944, y: 0.639 },
+    { x: 0.756, y: 0.889 },
+    { x: 0.484, y: 1.072 },
+    { x: 0.339, y: 1.079 },
+    { x: 0.219, y: 1.051 },
+    { x: 0.131, y: 0.994 },
+    { x: 0.059, y: 0.939 },
+    { x: 8e-3, y: 0.915 },
+    { x: -0.105, y: 0.931 },
+    { x: -0.176, y: 0.965 },
+    { x: -0.249, y: 1.005 },
+    { x: -0.345, y: 1.039 },
+    { x: -0.497, y: 1.055 },
+    { x: -0.672, y: 1.032 },
+    { x: -0.817, y: 0.952 },
+    { x: -0.945, y: 0.81 },
+    { x: -1.054, y: 0.6 },
+    { x: -1.16, y: 0.302 },
+    { x: -1.187, y: -0.011 },
+    { x: -1.165, y: -0.326 },
+    { x: -1.097, y: -0.599 },
+    { x: -0.991, y: -0.838 },
+    { x: -0.852, y: -0.912 },
+    { x: -0.695, y: -0.958 },
+    { x: -0.53, y: -0.988 },
+    { x: -0.357, y: -0.992 },
+    { x: -0.18, y: -0.983 }
+  ],
+  // Shape 3 · Blob 4
+  [
+    { x: -0.734, y: -1.127 },
+    { x: -0.656, y: -1.146 },
+    { x: -0.567, y: -1.142 },
+    { x: -0.468, y: -1.115 },
+    { x: -0.358, y: -1.079 },
+    { x: -0.238, y: -1.034 },
+    { x: -0.107, y: -0.989 },
+    { x: 0.035, y: -0.953 },
+    { x: 0.188, y: -0.929 },
+    { x: 0.325, y: -0.916 },
+    { x: 0.484, y: -0.896 },
+    { x: 0.65, y: -0.854 },
+    { x: 0.811, y: -0.77 },
+    { x: 0.955, y: -0.631 },
+    { x: 1.068, y: -0.422 },
+    { x: 1.138, y: -0.126 },
+    { x: 1.152, y: 0.272 },
+    { x: 1.121, y: 0.451 },
+    { x: 1.046, y: 0.602 },
+    { x: 0.928, y: 0.727 },
+    { x: 0.767, y: 0.833 },
+    { x: 0.565, y: 0.925 },
+    { x: 0.323, y: 1.001 },
+    { x: 0.042, y: 1.075 },
+    { x: -0.277, y: 1.142 },
+    { x: -0.368, y: 1.147 },
+    { x: -0.475, y: 1.136 },
+    { x: -0.589, y: 1.104 },
+    { x: -0.704, y: 1.05 },
+    { x: -0.815, y: 0.973 },
+    { x: -0.913, y: 0.871 },
+    { x: -0.993, y: 0.746 },
+    { x: -1.048, y: 0.593 },
+    { x: -1.109, y: 0.298 },
+    { x: -1.145, y: 0.018 },
+    { x: -1.154, y: -0.243 },
+    { x: -1.135, y: -0.482 },
+    { x: -1.085, y: -0.695 },
+    { x: -1.003, y: -0.874 },
+    { x: -0.886, y: -1.02 }
+  ],
+  // Shape 4 · Blob 5 (inverted Blob 4)
+  [
+    { x: -0.734, y: 1.127 },
+    { x: -0.656, y: 1.146 },
+    { x: -0.567, y: 1.142 },
+    { x: -0.468, y: 1.115 },
+    { x: -0.358, y: 1.079 },
+    { x: -0.238, y: 1.034 },
+    { x: -0.107, y: 0.989 },
+    { x: 0.035, y: 0.953 },
+    { x: 0.188, y: 0.929 },
+    { x: 0.325, y: 0.916 },
+    { x: 0.484, y: 0.896 },
+    { x: 0.65, y: 0.854 },
+    { x: 0.811, y: 0.77 },
+    { x: 0.955, y: 0.631 },
+    { x: 1.068, y: 0.422 },
+    { x: 1.138, y: 0.126 },
+    { x: 1.152, y: -0.272 },
+    { x: 1.121, y: -0.451 },
+    { x: 1.046, y: -0.602 },
+    { x: 0.928, y: -0.727 },
+    { x: 0.767, y: -0.833 },
+    { x: 0.565, y: -0.925 },
+    { x: 0.323, y: -1.001 },
+    { x: 0.042, y: -1.075 },
+    { x: -0.277, y: -1.142 },
+    { x: -0.368, y: -1.147 },
+    { x: -0.475, y: -1.136 },
+    { x: -0.589, y: -1.104 },
+    { x: -0.704, y: -1.05 },
+    { x: -0.815, y: -0.973 },
+    { x: -0.913, y: -0.871 },
+    { x: -0.993, y: -0.746 },
+    { x: -1.048, y: -0.593 },
+    { x: -1.109, y: -0.298 },
+    { x: -1.145, y: -0.018 },
+    { x: -1.154, y: 0.243 },
+    { x: -1.135, y: 0.482 },
+    { x: -1.085, y: 0.695 },
+    { x: -1.003, y: 0.874 },
+    { x: -0.886, y: 1.02 }
+  ],
+  // Shape 5 · Blob 6
+  [
+    { x: 1e-3, y: -1.006 },
+    { x: 0.134, y: -1.001 },
+    { x: 0.262, y: -1.024 },
+    { x: 0.382, y: -1.073 },
+    { x: 0.498, y: -1.107 },
+    { x: 0.614, y: -1.105 },
+    { x: 0.733, y: -1.049 },
+    { x: 0.85, y: -0.932 },
+    { x: 0.953, y: -0.755 },
+    { x: 1.03, y: -0.529 },
+    { x: 1.067, y: -0.265 },
+    { x: 1.054, y: 0.018 },
+    { x: 0.986, y: 0.3 },
+    { x: 0.868, y: 0.557 },
+    { x: 0.715, y: 0.766 },
+    { x: 0.55, y: 0.909 },
+    { x: 0.396, y: 0.984 },
+    { x: 0.262, y: 1.005 },
+    { x: 0.148, y: 1.003 },
+    { x: 0.037, y: 1.008 },
+    { x: -0.083, y: 1.04 },
+    { x: -0.22, y: 1.118 },
+    { x: -0.36, y: 1.192 },
+    { x: -0.5, y: 1.234 },
+    { x: -0.65, y: 1.175 },
+    { x: -0.81, y: 1.045 },
+    { x: -0.99, y: 0.855 },
+    { x: -1.14, y: 0.61 },
+    { x: -1.24, y: 0.33 },
+    { x: -1.27, y: 0.04 },
+    { x: -1.275, y: -0.25 },
+    { x: -1.225, y: -0.5 },
+    { x: -1.08, y: -0.72 },
+    { x: -0.89, y: -0.92 },
+    { x: -0.734, y: -1.053 },
+    { x: -0.614, y: -1.112 },
+    { x: -0.498, y: -1.127 },
+    { x: -0.381, y: -1.11 },
+    { x: -0.261, y: -1.095 },
+    { x: -0.133, y: -1.058 },
+    { x: 1e-3, y: -1.01 },
+    { x: 0.134, y: -1.001 }
+  ]
+];
+function buildBlobPathData(_shape, cx, cy, width, height) {
+  const rx = width / 2;
+  const ry = height / 2;
+  const blobType = 0;
+  const srcPts = ALL_BLOB_SHAPES[blobType];
+  const pts = srcPts.map((p) => ({ x: cx + p.x * rx, y: cy + p.y * ry }));
+  const mid = (a, b) => ({ x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 });
+  const last = pts[pts.length - 1];
+  const first = pts[0];
+  const s = mid(last, first);
+  let d = `M ${s.x} ${s.y}`;
+  for (let i = 0; i < pts.length; i++) {
+    const curr = pts[i];
+    const next = pts[(i + 1) % pts.length];
+    const m = mid(curr, next);
+    d += ` Q ${curr.x} ${curr.y} ${m.x} ${m.y}`;
+  }
+  d += " Z";
+  return d;
+}
+
+// src/components/KonvaNode.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var KonvaNode = React2.memo(function KonvaNode2({
+  node,
+  zoomLevel,
+  isExternallyHovered = false,
+  isExternallyPressed = false,
+  isDragging = false
+}) {
+  const borderColor = useMemo2(() => darkenHexColor(node.color, 0.13), [node.color]);
+  const layerCount = useMemo2(() => {
+    const count = node.branchCount ?? 0;
+    return Math.min(count, 3);
+  }, [node.branchCount]);
+  const baseRadiusX = node.width / 2;
+  const baseRadiusY = Math.max(NODE_HEIGHT * 1.6 / 2, baseRadiusX * 0.74);
+  const calculateFontSize = useMemo2(() => {
+    return 30;
+  }, [node.title]);
+  const textNaturalWidth = node.width - 40;
+  const textNaturalHeight = NODE_HEIGHT * 1.2;
+  const maxScale = computeNodeTextWorldScale(node.width, zoomLevel);
+  const blobType = getBlobTypeForLayer(node.level);
+  const textOffsetX = (BLOB_TEXT_OFFSETS[blobType] ?? 0) * baseRadiusX;
+  const effectiveHover = isExternallyHovered;
+  const isPressed = isExternallyPressed;
+  const topFill = effectiveHover || isPressed ? borderColor : node.color;
+  const topStroke = isPressed ? node.color : borderColor;
+  const backgroundLayers = useMemo2(() => {
+    if (layerCount === 0) return [];
+    const startIdx = BLOB_LAYER_CONFIG.length - layerCount;
+    const layers = [];
+    for (let i = startIdx; i < BLOB_LAYER_CONFIG.length; i++) {
+      const config = BLOB_LAYER_CONFIG[i];
+      layers.push({
+        ...config,
+        radiusX: baseRadiusX * config.scaleUp,
+        radiusY: baseRadiusY * config.scaleUp
+      });
+    }
+    return layers;
+  }, [layerCount, baseRadiusX, baseRadiusY]);
+  return /* @__PURE__ */ jsxs(KGroup, { x: node.x, y: node.y, listening: false, children: [
+    backgroundLayers.map((layer, idx) => /* @__PURE__ */ jsx2(
+      KShape,
+      {
+        rotation: layer.rotation,
+        opacity: layer.opacity,
+        sceneFunc: (ctx, shape) => {
+          drawBlobPath(ctx, layer.radiusX, layer.radiusY, blobType);
+          ctx.fillStrokeShape(shape);
+        },
+        fill: node.color,
+        stroke: borderColor,
+        strokeWidth: layer.strokeWidth,
+        dash: layer.dash ? [...layer.dash] : void 0,
+        listening: false,
+        perfectDrawEnabled: false
+      },
+      `blob-layer-${idx}`
+    )),
+    /* @__PURE__ */ jsx2(
+      KShape,
+      {
+        rotation: NODE_LAYER_CONFIG.rotation,
+        opacity: NODE_LAYER_CONFIG.opacity,
+        sceneFunc: (ctx, shape) => {
+          drawBlobPath(ctx, baseRadiusX, baseRadiusY, blobType);
+          ctx.fillStrokeShape(shape);
+        },
+        hitFunc: (ctx, shape) => {
+          drawBlobPath(ctx, baseRadiusX, baseRadiusY, blobType);
+          ctx.fillStrokeShape(shape);
+        },
+        fill: topFill,
+        stroke: topStroke,
+        strokeWidth: NODE_LAYER_CONFIG.strokeWidth,
+        shadowEnabled: !isDragging,
+        shadowColor: "rgba(255,255,255,1)",
+        shadowBlur: effectiveHover || isPressed ? 40 : 15,
+        shadowOpacity: effectiveHover || isPressed ? 0.4 : 0.15,
+        shadowOffsetX: 0,
+        shadowOffsetY: 0,
+        perfectDrawEnabled: false
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      KGroup,
+      {
+        clipFunc: (ctx) => {
+          drawBlobPath(ctx, baseRadiusX, baseRadiusY, blobType);
+        },
+        visible: zoomLevel >= TEXT_LABEL_HIDE_BELOW_ZOOM,
+        listening: false,
+        children: /* @__PURE__ */ jsx2(
+          KText,
+          {
+            x: textOffsetX,
+            y: 0,
+            offsetX: textNaturalWidth / 2,
+            offsetY: textNaturalHeight / 2,
+            width: textNaturalWidth,
+            height: textNaturalHeight,
+            scaleX: maxScale,
+            scaleY: maxScale,
+            text: node.title,
+            fontSize: calculateFontSize,
+            fontFamily: "'Story Script', cursive",
+            fontStyle: "normal",
+            fill: CANVAS_COLORS.node.titleColor,
+            align: "center",
+            verticalAlign: "middle",
+            wrap: "word",
+            ellipsis: false,
+            listening: false,
+            perfectDrawEnabled: false
+          }
+        )
+      }
+    )
+  ] });
+});
+var KonvaNode_default = KonvaNode;
+
+// src/components/KonvaNodeLayer.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function KonvaNodeLayer({
+  nodes: propNodes,
+  isTransitioning = false,
+  isDragging = false,
+  hoveredNodeId = null,
+  pressedNodeId = null
+}) {
+  const layerRef = useRef5(null);
+  const zoomLevel = useViewportStore((s) => s.zoomLevel);
+  const storeNodes = useNodeStore((s) => s.nodes);
+  const allNodes = useMemo3(
+    () => propNodes ?? Array.from(storeNodes.values()),
+    [propNodes, storeNodes]
+  );
+  const visibleNodes = useViewportNodes(allNodes, void 0, isTransitioning, isDragging);
+  useLayoutEffect(() => {
+    layerRef.current?.batchDraw();
+  }, [visibleNodes, hoveredNodeId, pressedNodeId, isDragging, zoomLevel]);
+  useEffect4(() => {
+    layerRef.current?.batchDraw();
+  }, [isTransitioning]);
+  return /* @__PURE__ */ jsx3(KLayer, { ref: layerRef, name: "nodes", children: visibleNodes.map((n) => /* @__PURE__ */ jsx3(
+    KonvaNode_default,
+    {
+      node: n,
+      zoomLevel,
+      isExternallyHovered: hoveredNodeId === n.id,
+      isExternallyPressed: pressedNodeId === n.id,
+      isDragging
+    },
+    n.id
+  )) });
+}
+
+// src/components/KonvaEdgeLayer.tsx
+import { useRef as useRef6, useLayoutEffect as useLayoutEffect2, useMemo as useMemo5 } from "react";
+
+// src/components/KonvaEdge.tsx
+import { useMemo as useMemo4, memo } from "react";
+import { NODE_HEIGHT as NODE_HEIGHT2 } from "@visualli/core";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var getOutermostScaleUp = (branchCount) => {
+  const layerCount = Math.min(branchCount ?? 0, 3);
+  if (layerCount === 0) return 1;
+  const scaleUps = [1.3, 1.2, 1.1];
+  return scaleUps[scaleUps.length - layerCount];
+};
+function getEllipseIntersection(cx, cy, rx, ry, angle) {
+  return {
+    x: cx + rx * Math.cos(angle),
+    y: cy + ry * Math.sin(angle)
+  };
+}
+var EDGE_SPACING = 25;
+var STROKE_COLOR = "#000000";
+var STROKE_WIDTH = 2.5;
+var KonvaEdge = memo(function KonvaEdge2({
+  sourceNode: from,
+  targetNode: to,
+  connection,
+  zoomLevel = 1
+}) {
+  const label = connection?.label;
+  const points = useMemo4(() => {
+    const fromBaseX = from.width / 2;
+    const fromBaseY = Math.max(NODE_HEIGHT2 * 1.6 / 2, fromBaseX * 0.74);
+    const fromScale = getOutermostScaleUp(from.branchCount);
+    const fromRadiusX = fromBaseX * fromScale;
+    const fromRadiusY = fromBaseY * fromScale;
+    const toBaseX = to.width / 2;
+    const toBaseY = Math.max(NODE_HEIGHT2 * 1.6 / 2, toBaseX * 0.74);
+    const toScale = getOutermostScaleUp(to.branchCount);
+    const toRadiusX = toBaseX * toScale;
+    const toRadiusY = toBaseY * toScale;
+    const angle = Math.atan2(to.y - from.y, to.x - from.x);
+    const fromEdge = getEllipseIntersection(from.x, from.y, fromRadiusX, fromRadiusY, angle);
+    const toEdge = getEllipseIntersection(to.x, to.y, toRadiusX, toRadiusY, angle + Math.PI);
+    const fromX = fromEdge.x + EDGE_SPACING * Math.cos(angle);
+    const fromY = fromEdge.y + EDGE_SPACING * Math.sin(angle);
+    const toX = toEdge.x - EDGE_SPACING * Math.cos(angle);
+    const toY = toEdge.y - EDGE_SPACING * Math.sin(angle);
+    const midX = (fromX + toX) / 2;
+    const midY = (fromY + toY) / 2;
+    const distance = Math.sqrt((toX - fromX) ** 2 + (toY - fromY) ** 2);
+    const arcHeight = Math.min(45, 45 / (1 + Math.max(0, (distance - 200) / 400)));
+    const perpX = -(toY - fromY) / distance;
+    const perpY = (toX - fromX) / distance;
+    const offsetMidX = midX + perpX * arcHeight;
+    const offsetMidY = midY + perpY * arcHeight;
+    const ctrl1X = fromX + (offsetMidX - fromX) * 0.66;
+    const ctrl1Y = fromY + (offsetMidY - fromY) * 0.66;
+    const ctrl2X = toX + (offsetMidX - toX) * 0.66;
+    const ctrl2Y = toY + (offsetMidY - toY) * 0.66;
+    const NUM_SEGMENTS = 20;
+    const pts = [];
+    for (let i = 0; i <= NUM_SEGMENTS; i++) {
+      const t = i / NUM_SEGMENTS;
+      const mt = 1 - t;
+      const mt2 = mt * mt;
+      const mt3 = mt2 * mt;
+      const t2 = t * t;
+      const t3 = t2 * t;
+      pts.push(
+        mt3 * fromX + 3 * mt2 * t * ctrl1X + 3 * mt * t2 * ctrl2X + t3 * toX,
+        mt3 * fromY + 3 * mt2 * t * ctrl1Y + 3 * mt * t2 * ctrl2Y + t3 * toY
+      );
+    }
+    return pts;
+  }, [from.x, from.y, from.width, from.branchCount, to.x, to.y, to.width, to.branchCount]);
+  const arrowHeadPoints = useMemo4(() => {
+    const len = points.length;
+    const tipX = points[len - 2];
+    const tipY = points[len - 1];
+    const prevX = points[len - 4];
+    const prevY = points[len - 3];
+    const angle = Math.atan2(tipY - prevY, tipX - prevX);
+    const armLength = 11;
+    const armAngle = Math.PI / 5.5;
+    return [
+      tipX - armLength * Math.cos(angle - armAngle),
+      tipY - armLength * Math.sin(angle - armAngle),
+      tipX,
+      tipY,
+      tipX - armLength * Math.cos(angle + armAngle),
+      tipY - armLength * Math.sin(angle + armAngle)
+    ];
+  }, [points]);
+  const { pathData, fontSize } = useMemo4(() => {
+    if (!label) return { pathData: null, fontSize: 12 };
+    const fromBaseX = from.width / 2;
+    const fromBaseY = Math.max(NODE_HEIGHT2 * 1.6 / 2, fromBaseX * 0.74);
+    const fromScale = getOutermostScaleUp(from.branchCount);
+    const fromRadiusX = fromBaseX * fromScale;
+    const fromRadiusY = fromBaseY * fromScale;
+    const toBaseX = to.width / 2;
+    const toBaseY = Math.max(NODE_HEIGHT2 * 1.6 / 2, toBaseX * 0.74);
+    const toScale = getOutermostScaleUp(to.branchCount);
+    const toRadiusX = toBaseX * toScale;
+    const toRadiusY = toBaseY * toScale;
+    const angle = Math.atan2(to.y - from.y, to.x - from.x);
+    const fromEdge = getEllipseIntersection(from.x, from.y, fromRadiusX, fromRadiusY, angle);
+    const toEdge = getEllipseIntersection(to.x, to.y, toRadiusX, toRadiusY, angle + Math.PI);
+    const fromX = fromEdge.x + EDGE_SPACING * Math.cos(angle);
+    const fromY = fromEdge.y + EDGE_SPACING * Math.sin(angle);
+    const toX = toEdge.x - EDGE_SPACING * Math.cos(angle);
+    const toY = toEdge.y - EDGE_SPACING * Math.sin(angle);
+    const midX = (fromX + toX) / 2;
+    const midY = (fromY + toY) / 2;
+    const distance = Math.sqrt((toX - fromX) ** 2 + (toY - fromY) ** 2);
+    const arcHeight = Math.min(45, 45 / (1 + Math.max(0, (distance - 200) / 400)));
+    const perpX = -(toY - fromY) / distance;
+    const perpY = (toX - fromX) / distance;
+    const offsetMidX = midX + perpX * arcHeight;
+    const offsetMidY = midY + perpY * arcHeight;
+    const ctrl1X = fromX + (offsetMidX - fromX) * 0.66;
+    const ctrl1Y = fromY + (offsetMidY - fromY) * 0.66;
+    const ctrl2X = toX + (offsetMidX - toX) * 0.66;
+    const ctrl2Y = toY + (offsetMidY - toY) * 0.66;
+    const TEXT_OFFSET = 15;
+    const fxo = fromX + perpX * TEXT_OFFSET;
+    const fyo = fromY + perpY * TEXT_OFFSET;
+    const txo = toX + perpX * TEXT_OFFSET;
+    const tyo = toY + perpY * TEXT_OFFSET;
+    const c1xo = ctrl1X + perpX * TEXT_OFFSET;
+    const c1yo = ctrl1Y + perpY * TEXT_OFFSET;
+    const c2xo = ctrl2X + perpX * TEXT_OFFSET;
+    const c2yo = ctrl2Y + perpY * TEXT_OFFSET;
+    const baseFontSize = 14;
+    const zoomFactor = Math.max(1, 1 / zoomLevel);
+    const scaledFontSize = Math.max(12, Math.min(24, baseFontSize * (from.width / 180) * zoomFactor));
+    let d = "";
+    if (fromX > toX) {
+      d = `M ${txo},${tyo} C ${c2xo},${c2yo} ${c1xo},${c1yo} ${fxo},${fyo}`;
+    } else {
+      d = `M ${fxo},${fyo} C ${c1xo},${c1yo} ${c2xo},${c2yo} ${txo},${tyo}`;
+    }
+    return { pathData: d, fontSize: scaledFontSize };
+  }, [from.x, from.y, from.width, from.branchCount, to.x, to.y, to.width, to.branchCount, label, zoomLevel]);
+  return /* @__PURE__ */ jsxs2(KGroup, { children: [
+    /* @__PURE__ */ jsx4(
+      KLine,
+      {
+        points,
+        stroke: STROKE_COLOR,
+        strokeWidth: STROKE_WIDTH,
+        tension: 0,
+        opacity: 0.9,
+        lineCap: "round",
+        lineJoin: "round",
+        listening: false,
+        perfectDrawEnabled: false
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      KLine,
+      {
+        points: arrowHeadPoints,
+        stroke: STROKE_COLOR,
+        strokeWidth: STROKE_WIDTH,
+        lineCap: "round",
+        lineJoin: "round",
+        opacity: 0.9,
+        listening: false,
+        perfectDrawEnabled: false
+      }
+    ),
+    label && pathData && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx4(
+        KTextPath,
+        {
+          data: pathData,
+          text: label,
+          fontSize,
+          fontFamily: "'Playpen Sans', cursive",
+          fontStyle: "normal",
+          fill: "#ffffff",
+          align: "center",
+          letterSpacing: 0.5,
+          listening: false,
+          opacity: 0.9
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        KTextPath,
+        {
+          data: pathData,
+          text: label,
+          fontSize,
+          fontFamily: "'Playpen Sans', cursive",
+          fontStyle: "normal",
+          fill: "#6b6860",
+          align: "center",
+          letterSpacing: 0.5,
+          listening: false,
+          opacity: 0.9
+        }
+      )
+    ] })
+  ] });
+});
+var KonvaEdge_default = KonvaEdge;
+
+// src/components/KonvaEdgeLayer.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function KonvaEdgeLayer({
+  nodes,
+  connections,
+  currentLevel,
+  isDark = false,
+  isDragging = false
+}) {
+  const layerRef = useRef6(null);
+  const zoomLevel = useViewportStore((s) => s.zoomLevel);
+  const storeNodes = useNodeStore((s) => s.nodes);
+  const visibleNodes = useViewportNodes(nodes, currentLevel, false, isDragging);
+  const visibleSet = useMemo5(() => new Set(visibleNodes.map((n) => n.id)), [visibleNodes]);
+  useLayoutEffect2(() => {
+    layerRef.current?.batchDraw();
+  }, [connections, isDark, isDragging, visibleSet, storeNodes]);
+  return /* @__PURE__ */ jsx5(KLayer, { ref: layerRef, listening: false, children: connections.map((conn, idx) => {
+    const src = storeNodes.get(conn.from);
+    const tgt = storeNodes.get(conn.to);
+    if (!src || !tgt) return null;
+    if (!isDragging && !visibleSet.has(src.id) && !visibleSet.has(tgt.id)) return null;
+    return /* @__PURE__ */ jsx5(
+      KonvaEdge_default,
+      {
+        sourceNode: src,
+        targetNode: tgt,
+        connection: conn,
+        isDark,
+        zoomLevel
+      },
+      `${conn.from}-${conn.to}-${idx}`
+    );
+  }) });
+}
+
+// src/components/KonvaContainerLayer.tsx
+import { useRef as useRef7, useLayoutEffect as useLayoutEffect3 } from "react";
+
+// src/components/KonvaContainer.tsx
+import { memo as memo2, useMemo as useMemo6 } from "react";
+import { NODE_HEIGHT as NODE_HEIGHT4, TEXT_LABEL_HIDE_BELOW_ZOOM as TEXT_LABEL_HIDE_BELOW_ZOOM2 } from "@visualli/core";
+
+// src/config/textScaling.ts
+import { NODE_HEIGHT as NODE_HEIGHT3 } from "@visualli/core";
+var DESCRIPTION_TEXT_BASE_FONT_PX2 = 12;
+var CONTAINER_LABEL_BASE_FONT_PX2 = 24;
+var NODE_TEXT_SAFE_BLOB_FILL_RATIO = 0.88;
+function computeNodeTextWorldScale2(nodeWidth, zoomLevel) {
+  const safeZoom = Math.max(zoomLevel, 1e-4);
+  const baseWidth = 300;
+  const baseRadiusX = baseWidth / 2;
+  const baseRadiusY = Math.max(NODE_HEIGHT3 * 1.6 / 2, baseRadiusX * 0.74);
+  const textNaturalWidth = baseWidth - 40;
+  const textNaturalHeight = NODE_HEIGHT3 * 1.2;
+  const maxScaleX = baseRadiusX * 2 * NODE_TEXT_SAFE_BLOB_FILL_RATIO / Math.max(textNaturalWidth, 1);
+  const maxScaleY = baseRadiusY * 2 * NODE_TEXT_SAFE_BLOB_FILL_RATIO / Math.max(textNaturalHeight, 1);
+  const fitScale = Math.max(0.01, Math.min(maxScaleX, maxScaleY));
+  return Math.min(1 / safeZoom, fitScale);
+}
+function computeNodeTextScreenScale2(nodeWidth, zoomLevel) {
+  return computeNodeTextWorldScale2(nodeWidth, zoomLevel) * zoomLevel;
+}
+
+// src/components/KonvaContainer.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var CONTAINER_PADDING = 50;
+var CONTAINER_DASH = [10, 5];
+var LABEL_BG = "#ddd9d0";
+var LABEL_BORDER_RADIUS = 20;
+var LABEL_FONT_SIZE = CONTAINER_LABEL_BASE_FONT_PX2;
+var LABEL_FONT_WEIGHT = "800";
+var LABEL_FONT_FAMILY = "'Playpen Sans', Quicksand, sans-serif";
+var LABEL_PAD_H = 20;
+var LABEL_PAD_V = 10;
+var LABEL_LINE_HEIGHT = 1.2;
+var MAX_BLOB_EXTENT_X = 1.275;
+var MAX_BLOB_EXTENT_Y = 1.234;
+var _labelCtx = null;
+function measureLabelBoxWidth(text, fontSize) {
+  if (!_labelCtx) {
+    const c = document.createElement("canvas");
+    _labelCtx = c.getContext("2d");
+  }
+  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);
+}
+function isLeftTurn(p1, p2, p3) {
+  return (p2.x - p1.x) * (p3.y - p1.y) - (p2.y - p1.y) * (p3.x - p1.x) > 0;
+}
+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);
+  });
+  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]);
+  }
+  return hull;
+}
+function chaikinSmooth(pts, passes = 6) {
+  let cur = pts;
+  for (let iter = 0; iter < passes; iter++) {
+    const next = [];
+    const n = cur.length;
+    for (let i = 0; i < n; i++) {
+      const a = cur[i], b = cur[(i + 1) % n];
+      next.push({ x: 0.75 * a.x + 0.25 * b.x, y: 0.75 * a.y + 0.25 * b.y });
+      next.push({ x: 0.25 * a.x + 0.75 * b.x, y: 0.25 * a.y + 0.75 * b.y });
+    }
+    cur = next;
+  }
+  return cur.flatMap((p) => [p.x, p.y]);
+}
+function hullEdgeYAtX(points, targetX, isBottom) {
+  const n = points.length;
+  let result = isBottom ? -Infinity : Infinity;
+  for (let i = 0; i < n; i += 2) {
+    const x1 = points[i], y1 = points[i + 1];
+    const x2 = points[(i + 2) % n], y2 = points[(i + 3) % n];
+    if (x1 < targetX && x2 >= targetX || x2 < targetX && x1 >= targetX) {
+      const t = (targetX - x1) / (x2 - x1);
+      const y = y1 + t * (y2 - y1);
+      if (isBottom) result = Math.max(result, y);
+      else result = Math.min(result, y);
+    }
+  }
+  if (!isFinite(result)) {
+    for (let i = 1; i < n; i += 2) {
+      if (isBottom) result = Math.max(result, points[i]);
+      else result = Math.min(result, points[i]);
+    }
+  }
+  return result;
+}
+function calculateHull(containerNodes) {
+  if (containerNodes.length === 0) return null;
+  const NUM_SAMPLES = 48;
+  const samples = [];
+  for (const node of containerNodes) {
+    const baseRX = node.width / 2;
+    const baseRY = Math.max(NODE_HEIGHT4 * 1.6 / 2, baseRX * 0.74);
+    const halfW = baseRX * MAX_BLOB_EXTENT_X + CONTAINER_PADDING;
+    const halfH = baseRY * MAX_BLOB_EXTENT_Y + CONTAINER_PADDING;
+    for (let j = 0; j < NUM_SAMPLES; j++) {
+      const angle = j / NUM_SAMPLES * Math.PI * 2;
+      samples.push({ x: node.x + halfW * Math.cos(angle), y: node.y + halfH * Math.sin(angle) });
+    }
+  }
+  const hull = convexHull(samples);
+  const points = chaikinSmooth(hull, 6);
+  const xs = containerNodes.map((n) => n.x);
+  const ys = containerNodes.map((n) => n.y);
+  const spanX = Math.max(...xs) - Math.min(...xs);
+  const spanY = Math.max(...ys) - Math.min(...ys);
+  const useTopEdge = spanY > spanX * 2;
+  let hullMinX = Infinity, hullMaxX = -Infinity;
+  for (let i = 0; i < points.length; i += 2) {
+    if (points[i] < hullMinX) hullMinX = points[i];
+    if (points[i] > hullMaxX) hullMaxX = points[i];
+  }
+  const anchorX = (hullMinX + hullMaxX) / 2;
+  const anchorEdgeY = hullEdgeYAtX(points, anchorX, !useTopEdge);
+  return { points, anchorX, anchorEdgeY };
+}
+var KonvaContainer = memo2(function KonvaContainer2({
+  nodes,
+  label = ""
+}) {
+  const zoomLevel = useViewportStore((s) => s.zoomLevel);
+  const hullData = useMemo6(() => calculateHull(nodes), [nodes]);
+  if (!hullData) return null;
+  const refNode = nodes[0];
+  const screenScale = refNode ? computeNodeTextScreenScale2(refNode.width, zoomLevel) : 1;
+  const labelFontSize = LABEL_FONT_SIZE * screenScale;
+  const labelBoxHeight = Math.ceil(labelFontSize * LABEL_LINE_HEIGHT + 2 * LABEL_PAD_V);
+  const boxWidth = label ? measureLabelBoxWidth(label, labelFontSize) : 0;
+  const boxX = hullData.anchorX - boxWidth / 2;
+  const boxY = hullData.anchorEdgeY - labelBoxHeight / 2;
+  return /* @__PURE__ */ jsxs3(KGroup, { listening: false, children: [
+    /* @__PURE__ */ jsx6(
+      KLine,
+      {
+        points: hullData.points,
+        stroke: "#747270",
+        strokeWidth: 1,
+        dash: CONTAINER_DASH,
+        closed: true,
+        tension: 0,
+        listening: false,
+        perfectDrawEnabled: false
+      }
+    ),
+    label.length > 0 && /* @__PURE__ */ jsxs3(
+      KGroup,
+      {
+        x: boxX + boxWidth / 2,
+        y: boxY + labelBoxHeight / 2,
+        offsetX: boxWidth / 2,
+        offsetY: labelBoxHeight / 2,
+        scaleX: 1 / zoomLevel,
+        scaleY: 1 / zoomLevel,
+        visible: zoomLevel >= TEXT_LABEL_HIDE_BELOW_ZOOM2,
+        listening: false,
+        children: [
+          /* @__PURE__ */ jsx6(
+            KRect,
+            {
+              width: boxWidth,
+              height: labelBoxHeight,
+              fill: LABEL_BG,
+              cornerRadius: LABEL_BORDER_RADIUS,
+              shadowEnabled: false,
+              perfectDrawEnabled: false
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            KText,
+            {
+              x: LABEL_PAD_H,
+              y: LABEL_PAD_V,
+              width: boxWidth - 2 * LABEL_PAD_H,
+              height: labelBoxHeight - 2 * LABEL_PAD_V,
+              text: label,
+              fontSize: labelFontSize,
+              fontFamily: LABEL_FONT_FAMILY,
+              fontStyle: LABEL_FONT_WEIGHT,
+              fill: "rgba(0,0,0,1)",
+              align: "center",
+              verticalAlign: "middle",
+              lineHeight: LABEL_LINE_HEIGHT,
+              perfectDrawEnabled: false,
+              listening: false
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+var KonvaContainer_default = KonvaContainer;
+
+// src/components/KonvaContainerLayer.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function KonvaContainerLayer({ nodes, containers, isDark = false }) {
+  const layerRef = useRef7(null);
+  const storeNodes = useNodeStore((s) => s.nodes);
+  useLayoutEffect3(() => {
+    layerRef.current?.batchDraw();
+  }, [containers, isDark, storeNodes]);
+  if (containers.length === 0) return null;
+  return /* @__PURE__ */ jsx7(KLayer, { ref: layerRef, listening: false, children: containers.map((c) => {
+    const groupNodes = c.nodeIds.map((id) => storeNodes.get(id)).filter((n) => !!n);
+    if (groupNodes.length === 0) return null;
+    return /* @__PURE__ */ jsx7(
+      KonvaContainer_default,
+      {
+        nodes: groupNodes,
+        label: c.label,
+        isDark
+      },
+      c.id
+    );
+  }) });
+}
+
+// src/components/NavigationStack.tsx
+import { memo as memo3, useState as useState2 } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var PASTEL_FILLS = [
+  "#b6eea7",
+  "#d5bcfe",
+  "#a1c4fc",
+  "#a6f5d8",
+  "#ffc9de",
+  "#c4e8ff",
+  "#f0c4ff",
+  "#ffe0a3"
+];
+var ORGANIC_PATHS_SMALL = [
+  "M13.72,6.31 C15.12,6.29 17.96,8.57 17.99,10.60 C18.07,14.62 16.72,17.90 11.12,18.00 C7.26,18.07 4.07,14.86 4.00,10.85 C3.93,6.83 9.44,2.02 13.69,4.85",
+  "M13.88,6.41 C15.28,6.43 18.04,8.82 18.00,10.85 C17.93,14.86 16.48,18.10 10.88,18.00 C7.02,17.93 3.94,14.62 4.01,10.60 C4.08,6.59 9.76,1.97 13.91,4.95"
+];
+var ORGANIC_PATH_ACTIVE = "M16.55,9.22 C17.95,9.15 20.87,11.33 20.97,13.36 C21.19,17.37 19.96,20.70 14.37,20.99 C10.51,21.19 7.20,18.10 7.00,14.09 C6.78,10.08 12.13,5.08 16.48,7.77";
+var CIRCLE_SIZE = 14;
+function hexToRgba(hex, opacity) {
+  const h = hex.replace("#", "");
+  const r = parseInt(h.substring(0, 2), 16);
+  const g = parseInt(h.substring(2, 4), 16);
+  const b = parseInt(h.substring(4, 6), 16);
+  return `rgba(${r},${g},${b},${opacity})`;
+}
+var OrganicCircle = memo3(function OrganicCircle2({
+  size,
+  fill,
+  stroke,
+  strokeWidth,
+  variant,
+  isActive
+}) {
+  const path = isActive ? ORGANIC_PATH_ACTIVE : ORGANIC_PATHS_SMALL[variant % ORGANIC_PATHS_SMALL.length];
+  const vb = isActive ? "4 3 20 20" : "2 1 18 18";
+  const vbSz = isActive ? 20 : 18;
+  const sw = strokeWidth * vbSz / size;
+  return /* @__PURE__ */ jsxs4("svg", { width: size, height: size, viewBox: vb, fill: "none", style: { display: "block" }, children: [
+    /* @__PURE__ */ jsx8("path", { d: path, fill, fillOpacity: 1 }),
+    /* @__PURE__ */ jsx8("path", { d: path, fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round" })
+  ] });
+});
+var NavigationStack = memo3(function NavigationStack2({
+  stack,
+  onNavigateBack,
+  isDark = false,
+  top = "16px",
+  left = "16px"
+}) {
+  const [hoveredIndex, setHoveredIndex] = useState2(null);
+  if (stack.length === 0) return null;
+  const visitedStroke = isDark ? "#908e8c" : "#747270";
+  const visitedText = isDark ? "#908e8c" : "#747270";
+  const activeStroke = isDark ? "#e8e6e4" : "#1a1a18";
+  const activeText = isDark ? "#e8e6e4" : "#1a1a18";
+  const connectorColor = isDark ? "#908e8c" : "#747270";
+  const connectorMarginLeft = 10.5;
+  const currentIndex = stack.length - 1;
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-help": "navigation-stack",
+      style: {
+        position: "absolute",
+        top,
+        left,
+        zIndex: 30,
+        pointerEvents: "auto"
+      },
+      children: /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexDirection: "column", padding: "8px" }, children: stack.flatMap((entry, index) => {
+        const isCurrent = index === currentIndex;
+        const isClickable = index < currentIndex;
+        const isHovered = hoveredIndex === index;
+        const pastelFill = PASTEL_FILLS[index % PASTEL_FILLS.length];
+        const rowBg = isCurrent ? hexToRgba(pastelFill, 0.6) : isHovered && isClickable ? hexToRgba(pastelFill, 0.3) : "transparent";
+        const items = [];
+        if (index > 0) {
+          items.push(
+            /* @__PURE__ */ jsx8(
+              "div",
+              {
+                style: {
+                  width: "1px",
+                  height: "20px",
+                  marginLeft: `${connectorMarginLeft}px`,
+                  marginTop: "-6px",
+                  marginBottom: "-6px",
+                  background: connectorColor,
+                  alignSelf: "flex-start",
+                  flexShrink: 0,
+                  position: "relative",
+                  zIndex: 1
+                }
+              },
+              `conn-${index}`
+            )
+          );
+        }
+        items.push(
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              style: {
+                position: "relative",
+                zIndex: 2,
+                alignSelf: "flex-start",
+                display: "flex",
+                alignItems: "center",
+                gap: "4px",
+                height: "22px",
+                padding: "4px",
+                borderRadius: "8px",
+                cursor: isClickable ? "pointer" : "default",
+                background: rowBg,
+                transition: "background 0.15s"
+              },
+              onMouseEnter: () => setHoveredIndex(index),
+              onMouseLeave: () => setHoveredIndex(null),
+              onClick: (e) => {
+                e.stopPropagation();
+                if (isClickable) onNavigateBack(index);
+              },
+              children: [
+                /* @__PURE__ */ jsx8("div", { style: { width: CIRCLE_SIZE, height: CIRCLE_SIZE, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, zIndex: 4 }, children: isCurrent ? /* @__PURE__ */ jsx8(OrganicCircle, { size: CIRCLE_SIZE, fill: pastelFill, stroke: activeStroke, strokeWidth: 1.5, variant: index, isActive: true }) : /* @__PURE__ */ jsx8(OrganicCircle, { size: CIRCLE_SIZE, fill: pastelFill, stroke: visitedStroke, strokeWidth: 1, variant: index }) }),
+                /* @__PURE__ */ jsx8(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: "'Nunito', sans-serif",
+                      fontSize: isCurrent || isHovered && isClickable ? "11px" : "9px",
+                      fontWeight: isCurrent ? 600 : 400,
+                      color: isCurrent ? activeText : visitedText,
+                      lineHeight: 1,
+                      whiteSpace: "nowrap",
+                      transition: "color 0.15s, font-size 0.15s"
+                    },
+                    children: entry.label
+                  }
+                )
+              ]
+            },
+            `${entry.layerId}-${index}`
+          )
+        );
+        return items;
+      }) })
+    }
+  );
+});
+var NavigationStack_default = NavigationStack;
+
+// src/components/ZoomControls.tsx
+import { useCallback as useCallback3, memo as memo4 } from "react";
+import { ZOOM_MIN, ZOOM_MAX } from "@visualli/core";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var ZoomInIcon = () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx9("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsx9("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+  /* @__PURE__ */ jsx9("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
+  /* @__PURE__ */ jsx9("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+] });
+var ZoomOutIcon = () => /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx9("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsx9("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+  /* @__PURE__ */ jsx9("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+] });
+var ZoomControls = memo4(function ZoomControls2({ isDark = false }) {
+  const zoomLevel = useViewportStore((s) => s.zoomLevel);
+  const setZoom = useViewportStore((s) => s.setZoom);
+  const handleZoomIn = useCallback3(() => setZoom(Math.min(ZOOM_MAX, zoomLevel * 1.2)), [zoomLevel, setZoom]);
+  const handleZoomOut = useCallback3(() => setZoom(Math.max(ZOOM_MIN, zoomLevel / 1.2)), [zoomLevel, setZoom]);
+  const surfaceBg = isDark ? "var(--bg-surface, #1C1C1A)" : "var(--bg-surface, #FAF8F4)";
+  const border = isDark ? "var(--border-color, #333330)" : "var(--border-color, #DDD9D0)";
+  const primary = isDark ? "var(--text-primary, #F0EDE6)" : "var(--text-primary, #1A1A18)";
+  const muted = isDark ? "var(--text-muted, #8E8C88)" : "var(--text-muted, #747270)";
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      style: {
+        position: "relative",
+        background: surfaceBg,
+        border: `0.5px solid ${border}`,
+        borderRadius: "8px",
+        overflow: "hidden",
+        width: "65px",
+        height: "32px",
+        flexShrink: 0
+      },
+      role: "group",
+      "aria-label": "Zoom controls",
+      children: [
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: handleZoomIn,
+            disabled: zoomLevel >= ZOOM_MAX,
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "32px",
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              border: "none",
+              background: "transparent",
+              cursor: zoomLevel >= ZOOM_MAX ? "not-allowed" : "pointer",
+              color: zoomLevel >= ZOOM_MAX ? muted : primary,
+              transition: "background 0.15s"
+            },
+            onMouseEnter: (e) => {
+              if (zoomLevel < ZOOM_MAX) e.currentTarget.style.background = isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.background = "transparent";
+            },
+            "aria-label": "Zoom in",
+            children: /* @__PURE__ */ jsx9(ZoomInIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx9("div", { style: { position: "absolute", top: 0, bottom: 0, left: "32px", width: "0.5px", background: border } }),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: handleZoomOut,
+            disabled: zoomLevel <= ZOOM_MIN,
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              width: "33px",
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              border: "none",
+              background: "transparent",
+              cursor: zoomLevel <= ZOOM_MIN ? "not-allowed" : "pointer",
+              color: zoomLevel <= ZOOM_MIN ? muted : primary,
+              transition: "background 0.15s"
+            },
+            onMouseEnter: (e) => {
+              if (zoomLevel > ZOOM_MIN) e.currentTarget.style.background = isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.background = "transparent";
+            },
+            "aria-label": "Zoom out",
+            children: /* @__PURE__ */ jsx9(ZoomOutIcon, {})
+          }
+        )
+      ]
+    }
+  );
+});
+var ZoomControls_default = ZoomControls;
+
+// src/components/SketchyBoxKonva.tsx
+import { useEffect as useEffect5, useRef as useRef8 } from "react";
+import Konva from "konva";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var BACK_PATH = "M0.653,0 L485.653,1 C485.653,1,484.782,152.773,486.653,165 C413.653,171,14.653,178,5.653,168C2.653,158,0.653,0,0.653,0";
+var FRONT_PATH = "M485,167.524 L0,166.524C0,166.524,1.870,8.751,0,0C73,0,479,0,487,8C490,18,485,167.524,485,167.524";
+var BACK_W = 486;
+var BACK_H = 178;
+var FRONT_W = 490;
+var FRONT_H = 168;
+var BACK_OFFSET_Y = 8;
+var FRONT_OFFSET_X = 5.65;
+var SHADOW_PAD = 12;
+var SketchyBoxKonva = ({
+  children,
+  fill,
+  stroke,
+  backStroke,
+  padding = "1rem 1.25rem"
+}) => {
+  const wrapperRef = useRef8(null);
+  const konvaContainerRef = useRef8(null);
+  const stageRef = useRef8(null);
+  useEffect5(() => {
+    const wrapper = wrapperRef.current;
+    const konvaEl = konvaContainerRef.current;
+    if (!wrapper || !konvaEl) return;
+    function draw(W, H) {
+      if (!konvaEl || W <= 0 || H <= 0) return;
+      if (stageRef.current) {
+        stageRef.current.destroy();
+        stageRef.current = null;
+      }
+      const stage = new Konva.Stage({ container: konvaEl, width: W, height: H });
+      const layer = new Konva.Layer({ listening: false });
+      const contentH = H - SHADOW_PAD;
+      layer.add(new Konva.Path({
+        x: 0,
+        y: BACK_OFFSET_Y,
+        data: BACK_PATH,
+        scaleX: W / BACK_W,
+        scaleY: contentH / BACK_H,
+        fill: "#ffffff",
+        stroke: backStroke,
+        strokeWidth: 2,
+        strokeScaleEnabled: false,
+        listening: false
+      }));
+      layer.add(new Konva.Path({
+        x: FRONT_OFFSET_X,
+        y: 0,
+        data: FRONT_PATH,
+        scaleX: (W - FRONT_OFFSET_X) / FRONT_W,
+        scaleY: contentH / FRONT_H,
+        fill,
+        stroke,
+        strokeWidth: 3,
+        strokeScaleEnabled: false,
+        listening: false
+      }));
+      stage.add(layer);
+      stageRef.current = stage;
+    }
+    draw(wrapper.offsetWidth, wrapper.offsetHeight);
+    const ro = new ResizeObserver((entries) => {
+      const el = entries[0].target;
+      draw(el.offsetWidth, el.offsetHeight);
+    });
+    ro.observe(wrapper);
+    return () => {
+      ro.disconnect();
+      stageRef.current?.destroy();
+      stageRef.current = null;
+    };
+  }, [fill, stroke, backStroke]);
+  return /* @__PURE__ */ jsxs6("div", { ref: wrapperRef, style: { position: "relative", paddingBottom: `${SHADOW_PAD}px` }, children: [
+    /* @__PURE__ */ jsx10(
+      "div",
+      {
+        ref: konvaContainerRef,
+        style: { position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0, overflow: "hidden" }
+      }
+    ),
+    /* @__PURE__ */ jsx10("div", { style: { position: "relative", padding, zIndex: 1 }, children })
+  ] });
+};
+var SketchyBoxKonva_default = SketchyBoxKonva;
+
+// src/VisualliCanvas.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function hexToRgba2(hex, alpha) {
+  hex = hex.replace(/^#/, "");
+  let r, g, b;
+  if (hex.length === 3) {
+    r = parseInt(hex[0] + hex[0], 16);
+    g = parseInt(hex[1] + hex[1], 16);
+    b = parseInt(hex[2] + hex[2], 16);
+  } else if (hex.length === 6) {
+    r = parseInt(hex.substring(0, 2), 16);
+    g = parseInt(hex.substring(2, 4), 16);
+    b = parseInt(hex.substring(4, 6), 16);
+  } else {
+    return `rgba(240, 237, 230, ${alpha})`;
+  }
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function resolveDocument(props, fileText) {
+  if (props.preParsedVisualli) return props.preParsedVisualli;
+  const rawContent = fileText ?? props.visualliString;
+  if (rawContent) {
+    try {
+      return parseVisualliFile(rawContent);
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
+function layerLabel(doc, layer, layerId) {
+  if (layer.parentNodeId) {
+    const parentLayer = layer.parentLayerId ? doc.layers.get(layer.parentLayerId) : null;
+    if (parentLayer) {
+      const parentNode = parentLayer.nodes.find((n) => n.id === layer.parentNodeId);
+      if (parentNode) {
+        return Array.isArray(parentNode.data.label) ? parentNode.data.label.join(" ") : parentNode.data.label || "Untitled";
+      }
+    }
+  }
+  return layer.description ?? layerId;
+}
+function getRootLayerId(doc) {
+  for (const [id, layer] of doc.layers) {
+    if (!layer.parentLayerId) return id;
+  }
+  return doc.layers.keys().next().value ?? null;
+}
+function VisualliCanvas(props) {
+  const { isDark = false, chromaticImmersion = false, onNodeClick, onLayerChange, renderOverlay, renderNodeContent, navigationStackTop = "16px", navigationStackLeft = "16px", className = "", style } = props;
+  const [fileText, setFileText] = useState3(void 0);
+  useEffect6(() => {
+    if (!props.visualliFile) {
+      setFileText(void 0);
+      return;
+    }
+    let cancelled = false;
+    if (typeof props.visualliFile === "string") {
+      fetch(props.visualliFile).then((response) => {
+        if (!response.ok) throw new Error(`Failed to fetch: ${response.statusText}`);
+        return response.text();
+      }).then((t) => {
+        if (!cancelled) setFileText(t);
+      }).catch(() => {
+        if (!cancelled) setFileText(void 0);
+      });
+    } else {
+      props.visualliFile.text().then((t) => {
+        if (!cancelled) setFileText(t);
+      }).catch(() => {
+        if (!cancelled) setFileText(void 0);
+      });
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [props.visualliFile]);
+  const doc = useMemo7(() => resolveDocument(props, fileText), [props.preParsedVisualli, props.visualliString, props.visualliFile, fileText]);
+  const [navStack, setNavStack] = useState3([]);
+  const [currentLayerId, setCurrentLayerId] = useState3(null);
+  const parentViewports = useRef9([]);
+  const [isTransitioning, setIsTransitioning] = useState3(false);
+  const isTransitioningRef = useRef9(false);
+  useEffect6(() => {
+    if (!doc) return;
+    const rootId = getRootLayerId(doc);
+    if (!rootId) return;
+    const rootLayer = doc.layers.get(rootId);
+    setCurrentLayerId(rootId);
+    setNavStack([{ layerId: rootId, layer: rootLayer, label: "Home" }]);
+    parentViewports.current = [];
+  }, [doc]);
+  const { flatNodes, connections, containers } = useMemo7(() => {
+    if (!doc || !currentLayerId) return { flatNodes: [], connections: [], containers: [] };
+    try {
+      return {
+        flatNodes: getNodesForLayer(doc, currentLayerId),
+        connections: getConnectionsForLayer(doc, currentLayerId),
+        containers: getContainersForLayer(doc, currentLayerId)
+      };
+    } catch {
+      return { flatNodes: [], connections: [], containers: [] };
+    }
+  }, [doc, currentLayerId]);
+  const setNodes = useNodeStore((s) => s.setNodes);
+  const nodes = useNodeStore((s) => s.nodes);
+  const updateNodePosition = useNodeStore((s) => s.updateNodePosition);
+  const setCenter = useViewportStore((s) => s.setCenter);
+  const setZoom = useViewportStore((s) => s.setZoom);
+  const viewport = useViewportStore((s) => ({
+    centerX: s.centerX,
+    centerY: s.centerY,
+    zoomLevel: s.zoomLevel,
+    canvasWidth: s.canvasWidth,
+    canvasHeight: s.canvasHeight
+  }));
+  const clearSel = useSelectionStore((s) => s.clear);
+  const select = useSelectionStore((s) => s.select);
+  useEffect6(() => {
+    const map = new Map(flatNodes.map((n) => [n.id, n]));
+    setNodes(map);
+    clearSel();
+  }, [flatNodes, setNodes, clearSel]);
+  const containerRef = useRef9(null);
+  const stageRef = useRef9(null);
+  const canvasWrapperRef = useRef9(null);
+  const baselineTransformRef = useRef9(null);
+  const konvaContentDivRef = useRef9(null);
+  const lastAnimViewportRef = useRef9(null);
+  const zoomOutTargetRef = useRef9(null);
+  const canvasSizeRef = useRef9({ width: 0, height: 0 });
+  const dragMoveRafRef = useRef9(null);
+  const dragMoveLatestRef = useRef9(null);
+  const dragStartPosRef = useRef9(/* @__PURE__ */ new Map());
+  const baseBgColor = isDark ? "#141412" : "#F0EDE6";
+  const chromaticBgColor = useMemo7(() => {
+    if (!chromaticImmersion || !doc || !currentLayerId) return baseBgColor;
+    const currentLayer = doc.layers.get(currentLayerId);
+    if (!currentLayer) return baseBgColor;
+    if (currentLayer.level === 0 || !currentLayer.parentNodeId) return baseBgColor;
+    const parentLayer = currentLayer.parentLayerId ? doc.layers.get(currentLayer.parentLayerId) : null;
+    if (parentLayer) {
+      const parentNode = parentLayer.nodes.find((n) => n.id === currentLayer.parentNodeId);
+      if (parentNode) {
+        const nodeColor = parentNode.data.color || baseBgColor;
+        return hexToRgba2(nodeColor, 0.15);
+      }
+    }
+    return baseBgColor;
+  }, [chromaticImmersion, doc, currentLayerId, baseBgColor]);
+  const bgColor = chromaticImmersion ? chromaticBgColor : baseBgColor;
+  const spatialIndexRef = useRef9(null);
+  useEffect6(() => {
+    if (flatNodes.length === 0) {
+      spatialIndexRef.current?.clear();
+      return;
+    }
+    const idx = new RBushSpatialIndex2();
+    idx.bulkLoad(flatNodes.map((n) => {
+      const blobHalfH = Math.max(NODE_HEIGHT5 * 1.6 / 2, n.width / 2 * 0.74);
+      return {
+        nodeId: n.id,
+        bounds: {
+          minX: n.x - n.width / 2,
+          minY: n.y - blobHalfH,
+          maxX: n.x + n.width / 2,
+          maxY: n.y + blobHalfH
+        }
+      };
+    }));
+    spatialIndexRef.current = idx;
+    return () => {
+      spatialIndexRef.current?.clear();
+    };
+  }, [flatNodes]);
+  const {
+    handleWheel: rendererHandleWheel,
+    handleMouseDown: rendererHandleMouseDown,
+    handleMouseMove: rendererHandleMouseMove,
+    handleMouseUp: rendererHandleMouseUp,
+    canvasWidth,
+    canvasHeight
+  } = useKonvaRenderer({ containerRef, stageRef });
+  const _cw = canvasWidth || containerRef.current?.getBoundingClientRect().width || 800;
+  const _ch = canvasHeight || containerRef.current?.getBoundingClientRect().height || 600;
+  canvasSizeRef.current = { width: _cw, height: _ch };
+  const handleDragStart = useCallback4((nodeId) => {
+    isDraggingRef.current = true;
+    setIsDraggingState(true);
+    setHoveredNode(null);
+    const node = nodes.get(nodeId);
+    if (node) dragStartPosRef.current.set(nodeId, { x: node.x, y: node.y });
+  }, [nodes]);
+  const handleDragMove = useCallback4((nodeId, x, y) => {
+    dragMoveLatestRef.current = { nodeId, x, y };
+    if (dragMoveRafRef.current !== null) return;
+    dragMoveRafRef.current = requestAnimationFrame(() => {
+      dragMoveRafRef.current = null;
+      const latest = dragMoveLatestRef.current;
+      if (latest) {
+        dragMoveLatestRef.current = null;
+        updateNodePosition(latest.nodeId, latest.x, latest.y);
+      }
+    });
+  }, [updateNodePosition]);
+  const handleDragEnd = useCallback4((nodeId, x, y) => {
+    if (dragMoveRafRef.current !== null) {
+      cancelAnimationFrame(dragMoveRafRef.current);
+      dragMoveRafRef.current = null;
+    }
+    dragMoveLatestRef.current = null;
+    isDraggingRef.current = false;
+    setIsDraggingState(false);
+    updateNodePosition(nodeId, x, y);
+    if (spatialIndexRef.current) {
+      const node = nodes.get(nodeId);
+      if (node) {
+        const oldPos = dragStartPosRef.current.get(nodeId);
+        if (oldPos) {
+          const oldHalfH = Math.max(NODE_HEIGHT5 * 1.6 / 2, node.width / 2 * 0.74);
+          spatialIndexRef.current.remove(nodeId, {
+            minX: oldPos.x - node.width / 2,
+            minY: oldPos.y - oldHalfH,
+            maxX: oldPos.x + node.width / 2,
+            maxY: oldPos.y + oldHalfH
+          });
+        }
+        const newHalfH = Math.max(NODE_HEIGHT5 * 1.6 / 2, node.width / 2 * 0.74);
+        spatialIndexRef.current.insert(nodeId, {
+          minX: x - node.width / 2,
+          minY: y - newHalfH,
+          maxX: x + node.width / 2,
+          maxY: y + newHalfH
+        });
+      }
+    }
+    dragStartPosRef.current.delete(nodeId);
+  }, [updateNodePosition, nodes]);
+  const fitToScreenRef = useRef9(() => {
+  });
+  const fitToScreen = useCallback4(() => {
+    if (flatNodes.length === 0) return;
+    if (isTransitioningRef.current) return;
+    const cw = canvasSizeRef.current.width || containerRef.current?.getBoundingClientRect().width || 800;
+    const ch = canvasSizeRef.current.height || containerRef.current?.getBoundingClientRect().height || 600;
+    const { centerX, centerY } = calculateFitView(flatNodes, cw, ch);
+    const isRootLayer = navStack.length <= 1;
+    const zoomLevel = isRootLayer ? 1 : calculateFitView(flatNodes, cw, ch).zoomLevel;
+    setCenter(centerX, centerY);
+    setZoom(zoomLevel);
+  }, [flatNodes, navStack.length, setCenter, setZoom]);
+  fitToScreenRef.current = fitToScreen;
+  useEffect6(() => {
+    fitToScreen();
+  }, [currentLayerId]);
+  const didFitAfterMeasureRef = useRef9(false);
+  useEffect6(() => {
+    if (!canvasWidth || didFitAfterMeasureRef.current) return;
+    didFitAfterMeasureRef.current = true;
+    fitToScreen();
+  }, [canvasWidth, fitToScreen]);
+  const navBackTargetRef = useRef9(-1);
+  const { zoomIntoLayer, zoomOutToParent, isTransitioning: isAnimating } = useKonvaLayerTransition({
+    stageRef,
+    canvasWrapperRef,
+    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) }]);
+      onLayerChange?.(childLayerId, childLayer);
+    },
+    onSwapBack: () => {
+      const targetIndex = navBackTargetRef.current;
+      setNavStack((prev) => {
+        const newStack = prev.slice(0, targetIndex + 1);
+        parentViewports.current = parentViewports.current.slice(0, targetIndex);
+        const newLayerId = newStack[newStack.length - 1].layerId;
+        setCurrentLayerId(newLayerId);
+        onLayerChange?.(newLayerId, newStack[newStack.length - 1].layer);
+        return newStack;
+      });
+    },
+    onComplete: () => {
+      setIsTransitioning(false);
+      isTransitioningRef.current = false;
+      requestAnimationFrame(() => {
+        fitToScreenRef.current();
+      });
+    },
+    // GPU CSS-transform callbacks (matching visualli.ai exactly):
+    onViewportFrame: (vp) => {
+      lastAnimViewportRef.current = vp;
+      const baseline = baselineTransformRef.current;
+      const contentDiv = konvaContentDivRef.current;
+      const { width, height } = canvasSizeRef.current;
+      if (baseline && contentDiv) {
+        const targetX = width / 2 - vp.centerX * vp.zoomLevel;
+        const targetY = height / 2 - vp.centerY * vp.zoomLevel;
+        const ratio = vp.zoomLevel / baseline.scaleX;
+        const tx = targetX - baseline.x * ratio;
+        const ty = targetY - baseline.y * ratio;
+        contentDiv.style.transform = `translate(${tx}px, ${ty}px) scale(${ratio})`;
+      } else {
+        const stage = stageRef.current;
+        if (stage) {
+          stage.x(width / 2 - vp.centerX * vp.zoomLevel);
+          stage.y(height / 2 - vp.centerY * vp.zoomLevel);
+          stage.scaleX(vp.zoomLevel);
+          stage.scaleY(vp.zoomLevel);
+          stage.batchDraw();
+        }
+      }
+    },
+    onViewportFinal: (vp) => {
+      if (konvaContentDivRef.current) konvaContentDivRef.current.style.transform = "";
+      const stage = stageRef.current;
+      if (stage) {
+        const { width, height } = canvasSizeRef.current;
+        stage.x(width / 2 - vp.centerX * vp.zoomLevel);
+        stage.y(height / 2 - vp.centerY * vp.zoomLevel);
+        stage.scaleX(vp.zoomLevel);
+        stage.scaleY(vp.zoomLevel);
+        stage.getLayers().forEach((l) => l.drawScene());
+      }
+      setCenter(vp.centerX, vp.centerY);
+      setZoom(vp.zoomLevel);
+    },
+    onPhaseChange: (phase) => {
+      const stage = stageRef.current;
+      const contentDiv = konvaContentDivRef.current;
+      if (stage && contentDiv && (phase === "swap" || phase === "zoom-back")) {
+        contentDiv.style.transform = "";
+        const vp = phase === "zoom-back" ? zoomOutTargetRef.current : lastAnimViewportRef.current;
+        if (vp) {
+          const { width, height } = canvasSizeRef.current;
+          const nx = width / 2 - vp.centerX * vp.zoomLevel;
+          const ny = height / 2 - vp.centerY * vp.zoomLevel;
+          stage.x(nx);
+          stage.y(ny);
+          stage.scaleX(vp.zoomLevel);
+          stage.scaleY(vp.zoomLevel);
+          stage.getLayers().forEach((l) => l.drawScene());
+          baselineTransformRef.current = { x: nx, y: ny, scaleX: vp.zoomLevel, scaleY: vp.zoomLevel };
+        }
+      }
+    },
+    onTransitionLifecycle: (phase) => {
+      const stage = stageRef.current;
+      if (phase === "start") {
+        if (canvasWrapperRef.current) canvasWrapperRef.current.style.willChange = "opacity, transform";
+        if (stage) {
+          baselineTransformRef.current = { x: stage.x(), y: stage.y(), scaleX: stage.scaleX(), scaleY: stage.scaleY() };
+          const container = stage.container();
+          const cd = container?.querySelector(".konvajs-content");
+          if (cd) {
+            konvaContentDivRef.current = cd;
+            cd.style.transformOrigin = "0 0";
+            cd.style.willChange = "transform";
+          }
+          stage.getLayers().forEach((l) => {
+            l.listening(false);
+          });
+        }
+      } else {
+        if (canvasWrapperRef.current) canvasWrapperRef.current.style.willChange = "auto";
+        if (konvaContentDivRef.current) {
+          konvaContentDivRef.current.style.willChange = "auto";
+          konvaContentDivRef.current = null;
+        }
+        baselineTransformRef.current = null;
+        zoomOutTargetRef.current = null;
+        if (stage) {
+          stage.getLayers().forEach((l) => {
+            l.listening(true);
+          });
+          stage.batchDraw();
+        }
+      }
+    }
+  });
+  const handleNavigate = useCallback4((nodeId) => {
+    if (!doc || !currentLayerId) {
+      return;
+    }
+    if (isTransitioningRef.current || isAnimating()) {
+      return;
+    }
+    const childLayer = getChildLayerForNode(doc, nodeId, currentLayerId);
+    if (!childLayer) {
+      return;
+    }
+    const childLayerId = [...doc.layers.entries()].find(([, l]) => l === childLayer)?.[0];
+    if (!childLayerId) {
+      return;
+    }
+    const childNodes = (() => {
+      try {
+        return getNodesForLayer(doc, childLayerId);
+      } catch {
+        return [];
+      }
+    })();
+    if (childNodes.length === 0) {
+      return;
+    }
+    const node = nodes.get(nodeId);
+    if (!node) return;
+    const cw = canvasSizeRef.current.width || 800;
+    const ch = canvasSizeRef.current.height || 600;
+    const fitVp = calculateFitView(flatNodes, cw, ch);
+    const isRootNow = navStack.length <= 1;
+    parentViewports.current.push({ centerX: fitVp.centerX, centerY: fitVp.centerY, zoomLevel: isRootNow ? 0.85 : fitVp.zoomLevel });
+    setIsTransitioning(true);
+    isTransitioningRef.current = true;
+    zoomIntoLayer(
+      doc,
+      node,
+      childLayerId,
+      childNodes,
+      node.color ?? getThemeBackground(isDark, "secondary"),
+      node.color ?? getThemeBackground(isDark, "primary")
+    );
+  }, [doc, currentLayerId, nodes, isDark, isAnimating, zoomIntoLayer]);
+  const handleNavigateBack = useCallback4((targetIndex) => {
+    if (targetIndex >= navStack.length - 1) return;
+    if (isTransitioningRef.current || isAnimating()) return;
+    const savedVp = parentViewports.current[targetIndex];
+    if (!savedVp) return;
+    navBackTargetRef.current = targetIndex;
+    setIsTransitioning(true);
+    isTransitioningRef.current = true;
+    zoomOutToParent(savedVp, getThemeBackground(isDark, "primary"), getThemeBackground(isDark, "secondary"));
+  }, [navStack.length, isDark, isAnimating, zoomOutToParent]);
+  const baseZoomRef = useRef9(1);
+  const lastZoomTransitionRef = useRef9(0);
+  const ZOOM_COOLDOWN = 1e3;
+  useEffect6(() => {
+    baseZoomRef.current = 1;
+  }, [currentLayerId]);
+  useEffect6(() => {
+    if (isTransitioningRef.current || isAnimating()) return;
+    const now = Date.now();
+    if (now - lastZoomTransitionRef.current < ZOOM_COOLDOWN) return;
+    const relative = viewport.zoomLevel / baseZoomRef.current;
+    if (relative >= ZOOM_NAV_IN_THRESHOLD) {
+      let closest = null;
+      let minDist = Infinity;
+      for (const node of nodes.values()) {
+        const dx = node.x - viewport.centerX;
+        const dy = node.y - viewport.centerY;
+        const d = dx * dx + dy * dy;
+        if (d < minDist) {
+          minDist = d;
+          closest = node;
+        }
+      }
+      if (closest) {
+        const childLayer = doc ? getChildLayerForNode(doc, closest.id, currentLayerId ?? "") : null;
+        if (childLayer) {
+          lastZoomTransitionRef.current = now;
+          handleNavigate(closest.id);
+          baseZoomRef.current = 1;
+        }
+      }
+    } else if (relative < ZOOM_NAV_OUT_THRESHOLD && navStack.length > 1) {
+      lastZoomTransitionRef.current = now;
+      handleNavigateBack(navStack.length - 2);
+      baseZoomRef.current = 1;
+    }
+  }, [viewport.zoomLevel, viewport.centerX, viewport.centerY, nodes, doc, currentLayerId, navStack, isAnimating, handleNavigate, handleNavigateBack]);
+  const toWorldCoords = useCallback4((stage, pointer) => {
+    const sp = stage.position();
+    const sc = stage.scaleX();
+    return { worldX: (pointer.x - sp.x) / sc, worldY: (pointer.y - sp.y) / sc };
+  }, []);
+  const hitTestNode = useCallback4((worldX, worldY) => {
+    if (!spatialIndexRef.current) return null;
+    const hits = spatialIndexRef.current.query({ minX: worldX, minY: worldY, maxX: worldX, maxY: worldY });
+    if (!hits.length) return null;
+    let targetId = null, minDist = Infinity;
+    for (const nodeId of hits) {
+      const node = nodes.get(nodeId);
+      if (!node) continue;
+      const d = (worldX - node.x) ** 2 + (worldY - node.y) ** 2;
+      if (d < minDist) {
+        minDist = d;
+        targetId = nodeId;
+      }
+    }
+    return targetId;
+  }, [nodes]);
+  const stageActiveNodeIdRef = useRef9(null);
+  const stageDragNodeOffsetRef = useRef9({ x: 0, y: 0 });
+  const stageMouseDownPosRef = useRef9(null);
+  const stageDragCommittedRef = useRef9(false);
+  const stageLastPointerCheckRef = useRef9(0);
+  const pointerNodeIdRef = useRef9(null);
+  const isCanvasPanningRef = useRef9(false);
+  const isDraggingRef = useRef9(false);
+  const [pointerNodeId, setPointerNodeId] = useState3(null);
+  const [pressedNodeId, setPressedNodeId] = useState3(null);
+  const [isDraggingState, setIsDraggingState] = useState3(false);
+  const [hoveredNode, setHoveredNode] = useState3(null);
+  const tooltipHoverRef = useRef9(false);
+  const keepTooltipOpenRef = useRef9(false);
+  const clearTooltipTimerRef = useRef9(null);
+  const hoveredNodePosition = useMemo7(() => {
+    if (!hoveredNode) return null;
+    const node = nodes.get(hoveredNode.nodeId);
+    if (!node) return null;
+    const cw = viewport.canvasWidth || canvasSizeRef.current.width;
+    const ch = viewport.canvasHeight || canvasSizeRef.current.height;
+    return {
+      screenX: (node.x - viewport.centerX) * viewport.zoomLevel + cw / 2,
+      screenY: (node.y - viewport.centerY) * viewport.zoomLevel + ch / 2,
+      zoom: viewport.zoomLevel
+    };
+  }, [hoveredNode, nodes, viewport]);
+  const [canvasContextMenu, setCanvasContextMenu] = useState3(null);
+  useEffect6(() => {
+    if (!canvasContextMenu) return;
+    const close = () => setCanvasContextMenu(null);
+    const onKey = (e) => {
+      if (e.key === "Escape") close();
+    };
+    window.addEventListener("pointerdown", close);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("pointerdown", close);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [canvasContextMenu]);
+  const handleStageMouseDown = useCallback4((e) => {
+    if (e.evt.button !== 0) {
+      rendererHandleMouseDown(e);
+      return;
+    }
+    const stage = e.target.getStage();
+    if (!stage) {
+      rendererHandleMouseDown(e);
+      return;
+    }
+    const pointer = stage.getPointerPosition();
+    if (!pointer) {
+      rendererHandleMouseDown(e);
+      return;
+    }
+    const { worldX, worldY } = toWorldCoords(stage, pointer);
+    const nodeId = hitTestNode(worldX, worldY);
+    if (nodeId) {
+      const node = nodes.get(nodeId);
+      if (node) {
+        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 };
+        stageDragCommittedRef.current = false;
+        setPressedNodeId(nodeId);
+        setHoveredNode(null);
+        return;
+      }
+    }
+    setHoveredNode(null);
+    isCanvasPanningRef.current = true;
+    rendererHandleMouseDown(e);
+  }, [hitTestNode, toWorldCoords, nodes, select, rendererHandleMouseDown]);
+  const handleStageMouseMove = useCallback4((e) => {
+    const stage = e.target.getStage();
+    if (!stage) {
+      rendererHandleMouseMove(e);
+      return;
+    }
+    const pointer = stage.getPointerPosition();
+    if (!pointer) {
+      rendererHandleMouseMove(e);
+      return;
+    }
+    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);
+      if (!stageDragCommittedRef.current && moved >= 5) {
+        stageDragCommittedRef.current = true;
+        isDraggingRef.current = true;
+        setIsDraggingState(true);
+        pointerNodeIdRef.current = null;
+        setPointerNodeId(null);
+        handleDragStart(stageActiveNodeIdRef.current);
+      }
+      if (stageDragCommittedRef.current) {
+        const offset = stageDragNodeOffsetRef.current;
+        handleDragMove(stageActiveNodeIdRef.current, worldX - offset.x, worldY - offset.y);
+        stage.container().style.cursor = "grabbing";
+        return;
+      }
+      return;
+    }
+    if (isCanvasPanningRef.current) {
+      rendererHandleMouseMove(e);
+      return;
+    }
+    const now = performance.now();
+    if (now - stageLastPointerCheckRef.current >= 50) {
+      stageLastPointerCheckRef.current = now;
+      const hovered = hitTestNode(worldX, worldY);
+      if (hovered !== pointerNodeIdRef.current) {
+        pointerNodeIdRef.current = hovered;
+        setPointerNodeId(hovered);
+      }
+      if (hovered) {
+        stage.container().style.cursor = "pointer";
+      } else {
+        stage.container().style.cursor = "grab";
+      }
+    }
+    rendererHandleMouseMove(e);
+  }, [toWorldCoords, hitTestNode, handleDragStart, handleDragMove, rendererHandleMouseMove]);
+  const handleStageMouseUp = useCallback4((e) => {
+    setPressedNodeId(null);
+    if (stageActiveNodeIdRef.current) {
+      const nodeId = stageActiveNodeIdRef.current;
+      if (stageDragCommittedRef.current) {
+        const stage = e.target.getStage();
+        if (stage) {
+          const pointer = stage.getPointerPosition();
+          if (pointer) {
+            const { worldX, worldY } = toWorldCoords(stage, pointer);
+            const offset = stageDragNodeOffsetRef.current;
+            handleDragEnd(nodeId, worldX - offset.x, worldY - offset.y);
+          }
+        }
+      } else {
+        const node = nodes.get(nodeId);
+        if (node) {
+          const childLayer = doc ? getChildLayerForNode(doc, nodeId, currentLayerId ?? "") : null;
+          if (childLayer) {
+            handleNavigate(nodeId);
+          }
+          onNodeClick?.(node);
+        }
+      }
+      isDraggingRef.current = false;
+      setIsDraggingState(false);
+      stageActiveNodeIdRef.current = null;
+      stageMouseDownPosRef.current = null;
+      stageDragCommittedRef.current = false;
+      return;
+    }
+    isCanvasPanningRef.current = false;
+    rendererHandleMouseUp(e);
+  }, [toWorldCoords, handleDragEnd, nodes, handleNavigate, onNodeClick, rendererHandleMouseUp]);
+  const handleStageContextMenu = useCallback4((e) => {
+    e.evt.preventDefault();
+    if (navStack.length <= 1) {
+      setCanvasContextMenu(null);
+      return;
+    }
+    setCanvasContextMenu({ x: e.evt.clientX, y: e.evt.clientY });
+  }, [navStack.length]);
+  const handleStageTouchStart = useCallback4((e) => handleStageMouseDown(e), [handleStageMouseDown]);
+  const handleStageTouchMove = useCallback4((e) => handleStageMouseMove(e), [handleStageMouseMove]);
+  const handleStageTouchEnd = useCallback4((e) => handleStageMouseUp(e), [handleStageMouseUp]);
+  const handleWheel = useCallback4((e) => {
+    const isZoomOut = e.evt.deltaY > 0;
+    if (!isZoomOut) {
+      rendererHandleWheel(e);
+      return;
+    }
+    const liveZoom = useViewportStore.getState().zoomLevel;
+    const projected = Math.max(ZOOM_MIN2, liveZoom * (1 - e.evt.deltaY / 1e3));
+    if (navStack.length > 1 && projected <= ZOOM_NAV_OUT_THRESHOLD && !isTransitioningRef.current && !isAnimating()) {
+      e.evt.preventDefault();
+      const now = Date.now();
+      if (now - lastZoomTransitionRef.current >= ZOOM_COOLDOWN) {
+        lastZoomTransitionRef.current = now;
+        handleNavigateBack(navStack.length - 2);
+        baseZoomRef.current = 1;
+      }
+      return;
+    }
+    rendererHandleWheel(e);
+  }, [rendererHandleWheel, navStack, setZoom, isAnimating, handleNavigateBack]);
+  const lastHoverCheckRef = useRef9(0);
+  const handleCanvasMouseMove = useCallback4((e) => {
+    if (!containerRef.current || isDraggingRef.current || isCanvasPanningRef.current) {
+      setHoveredNode(null);
+      return;
+    }
+    const now = Date.now();
+    if (now - lastHoverCheckRef.current < 50) return;
+    lastHoverCheckRef.current = now;
+    const target = e.target;
+    const isOverTooltip = target.closest('[data-node-tooltip="true"]') || target.closest('[data-semantic-tooltip="true"]');
+    if (tooltipHoverRef.current || keepTooltipOpenRef.current || isOverTooltip) {
+      return;
+    }
+    const cw = viewport.canvasWidth || canvasSizeRef.current.width;
+    const ch = viewport.canvasHeight || canvasSizeRef.current.height;
+    const rect = containerRef.current?.getBoundingClientRect();
+    const localX = rect ? e.clientX - rect.left : e.clientX;
+    const localY = rect ? e.clientY - rect.top : e.clientY;
+    const worldX = (localX - cw / 2) / viewport.zoomLevel + viewport.centerX;
+    const worldY = (localY - ch / 2) / viewport.zoomLevel + viewport.centerY;
+    let found = false;
+    if (spatialIndexRef.current) {
+      const hits = spatialIndexRef.current.query({ minX: worldX, minY: worldY, maxX: worldX, maxY: worldY });
+      for (const nodeId of hits) {
+        const node = nodes.get(nodeId);
+        if (node?.description) {
+          setHoveredNode({ nodeId: node.id, summary: node.description, screenX: e.clientX, screenY: e.clientY });
+          found = true;
+          break;
+        }
+      }
+    }
+    if (!found) {
+      if (clearTooltipTimerRef.current) clearTimeout(clearTooltipTimerRef.current);
+      clearTooltipTimerRef.current = setTimeout(() => {
+        if (!tooltipHoverRef.current && !keepTooltipOpenRef.current) setHoveredNode(null);
+      }, 150);
+    } else {
+      if (clearTooltipTimerRef.current) {
+        clearTimeout(clearTooltipTimerRef.current);
+        clearTooltipTimerRef.current = null;
+      }
+    }
+  }, [nodes, viewport, spatialIndexRef]);
+  useEffect6(() => {
+    const handleKeepTooltipOpen = (event) => {
+      keepTooltipOpenRef.current = event.detail.keep;
+    };
+    window.addEventListener("keepNodeTooltipOpen", handleKeepTooltipOpen);
+    return () => {
+      window.removeEventListener("keepNodeTooltipOpen", handleKeepTooltipOpen);
+    };
+  }, []);
+  useEffect6(() => {
+    return () => {
+      if (clearTooltipTimerRef.current) clearTimeout(clearTooltipTimerRef.current);
+      spatialIndexRef.current?.clear();
+      if (dragMoveRafRef.current !== null) cancelAnimationFrame(dragMoveRafRef.current);
+    };
+  }, []);
+  const handleZoomIn = useCallback4(() => setZoom(Math.min(viewport.zoomLevel * 1.2, 5)), [viewport.zoomLevel, setZoom]);
+  const handleZoomOut = useCallback4(() => {
+    setZoom(Math.max(viewport.zoomLevel / 1.2, ZOOM_MIN2));
+  }, [viewport.zoomLevel, setZoom]);
+  if (!doc) {
+    return /* @__PURE__ */ jsx11("div", { className, style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", background: bgColor, ...style }, children: /* @__PURE__ */ jsx11("span", { style: { color: isDark ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.3)", fontSize: 14 }, children: "No document" }) });
+  }
+  const hasBackOption = navStack.length > 1;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        position: "relative",
+        overflow: "hidden",
+        userSelect: "none",
+        background: bgColor,
+        width: "100%",
+        height: "100%",
+        ...style
+      },
+      onMouseMove: handleCanvasMouseMove,
+      onMouseLeave: () => {
+        if (!tooltipHoverRef.current && !keepTooltipOpenRef.current) {
+          setHoveredNode(null);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx11("div", { ref: canvasWrapperRef, style: { position: "relative", zIndex: 1, pointerEvents: "auto" }, children: /* @__PURE__ */ jsxs7(
+          KonvaStage_default,
+          {
+            ref: stageRef,
+            onWheel: handleWheel,
+            onMouseDown: handleStageMouseDown,
+            onMouseMove: handleStageMouseMove,
+            onMouseUp: handleStageMouseUp,
+            onContextMenu: handleStageContextMenu,
+            onTouchStart: handleStageTouchStart,
+            onTouchMove: handleStageTouchMove,
+            onTouchEnd: handleStageTouchEnd,
+            children: [
+              /* @__PURE__ */ jsx11(KonvaContainerLayer, { nodes: flatNodes, containers, isDark }),
+              /* @__PURE__ */ jsx11(
+                KonvaEdgeLayer,
+                {
+                  nodes: flatNodes,
+                  connections,
+                  isDark,
+                  isDragging: isDraggingState
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                KonvaNodeLayer,
+                {
+                  isTransitioning,
+                  isDragging: isDraggingState,
+                  hoveredNodeId: pointerNodeId,
+                  pressedNodeId
+                }
+              )
+            ]
+          }
+        ) }),
+        canvasContextMenu && hasBackOption && /* @__PURE__ */ jsx11(
+          "div",
+          {
+            role: "menu",
+            "aria-label": "Canvas options",
+            style: {
+              position: "fixed",
+              zIndex: 60,
+              pointerEvents: "auto",
+              left: `${Math.min(canvasContextMenu.x, Math.max(8, (canvasSizeRef.current.width || 800) - 152))}px`,
+              top: `${Math.min(canvasContextMenu.y, Math.max(8, (canvasSizeRef.current.height || 600) - 72))}px`
+            },
+            onContextMenu: (e) => e.preventDefault(),
+            onPointerDown: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsx11(
+              "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)"
+                },
+                onClick: () => {
+                  setCanvasContextMenu(null);
+                  handleNavigateBack(navStack.length - 2);
+                },
+                children: "Back"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx11(NavigationStack_default, { stack: navStack, onNavigateBack: handleNavigateBack, isDark, top: navigationStackTop, left: navigationStackLeft }),
+        /* @__PURE__ */ jsx11("div", { "data-help": "zoom-controls", style: { position: "absolute", top: "24px", right: "16px", zIndex: 50, pointerEvents: "auto" }, children: /* @__PURE__ */ jsx11(ZoomControls_default, { isDark }) }),
+        renderOverlay?.({ isDark, containerWidth: canvasSizeRef.current.width || 0, containerHeight: canvasSizeRef.current.height || 0 }),
+        hoveredNode && hoveredNodePosition && viewport.zoomLevel < 3 && viewport.zoomLevel >= TEXT_LABEL_HIDE_BELOW_ZOOM3 && (() => {
+          const nodeData = nodes.get(hoveredNode.nodeId);
+          const borderColor = nodeData?.color ? darkenHexColor2(nodeData.color, 0.13) : "#5BA8D4";
+          const VP_PAD = 8;
+          const HALF_W = 160;
+          const APPROX_H = 90;
+          const containerW = canvasSizeRef.current.width || 800;
+          const safeLeft = Math.max(HALF_W + VP_PAD, Math.min(hoveredNodePosition.screenX, containerW - HALF_W - VP_PAD));
+          const rawTop = hoveredNodePosition.screenY - 60 * hoveredNodePosition.zoom;
+          const safeTop = Math.max(VP_PAD + APPROX_H, rawTop);
+          return /* @__PURE__ */ jsx11(
+            "div",
+            {
+              "data-node-tooltip": "true",
+              style: {
+                position: "fixed",
+                zIndex: 50,
+                left: safeLeft,
+                top: safeTop,
+                transform: "translate(-50%, -100%)",
+                transformOrigin: "bottom center",
+                pointerEvents: "auto"
+              },
+              onMouseEnter: () => {
+                tooltipHoverRef.current = true;
+                if (clearTooltipTimerRef.current) {
+                  clearTimeout(clearTooltipTimerRef.current);
+                  clearTooltipTimerRef.current = null;
+                }
+              },
+              onMouseLeave: () => {
+                tooltipHoverRef.current = false;
+                if (clearTooltipTimerRef.current) clearTimeout(clearTooltipTimerRef.current);
+                clearTooltipTimerRef.current = setTimeout(() => {
+                  if (!keepTooltipOpenRef.current) setHoveredNode(null);
+                }, 100);
+              },
+              children: /* @__PURE__ */ jsx11("div", { style: { maxWidth: "20rem", minWidth: "12rem", maxHeight: "15rem", overflowY: "auto" }, children: /* @__PURE__ */ jsx11(SketchyBoxKonva_default, { fill: "#ffffff", stroke: borderColor, backStroke: borderColor, padding: "1rem 1.25rem", children: /* @__PURE__ */ jsx11("p", { style: {
+                fontFamily: "'Playpen Sans', cursive",
+                fontSize: `${DESCRIPTION_TEXT_BASE_FONT_PX2}px`,
+                fontWeight: 300,
+                color: "#000000",
+                textAlign: "center",
+                lineHeight: 1.6,
+                margin: 0
+              }, children: renderNodeContent ? renderNodeContent({
+                summary: hoveredNode.summary,
+                nodeId: hoveredNode.nodeId,
+                nodeColor: nodeData?.color,
+                zoom: viewport.zoomLevel
+              }) : hoveredNode.summary }) }) })
+            }
+          );
+        })()
+      ]
+    }
+  );
+}
+
+// src/VisualliRenderer.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function useSystemDark() {
+  const mq = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+  const [dark, setDark] = useState4(mq?.matches ?? false);
+  useEffect7(() => {
+    if (!mq) return;
+    const handler = (e) => setDark(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [mq]);
+  return dark;
+}
+function useFontInjection() {
+  useEffect7(() => {
+    if (typeof document === "undefined") return;
+    const links = [
+      "https://fonts.googleapis.com",
+      "https://fonts.gstatic.com",
+      "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Nunito+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&display=swap",
+      "https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@300;400;600;800&family=Story+Script:wght@400&display=swap"
+    ];
+    links.forEach((href, i) => {
+      const id = `visualli-font-${i}`;
+      if (!document.getElementById(id)) {
+        const link = document.createElement("link");
+        link.id = id;
+        link.rel = i < 2 ? "preconnect" : "stylesheet";
+        link.href = href;
+        if (i === 1) link.crossOrigin = "anonymous";
+        document.head.appendChild(link);
+      }
+    });
+  }, []);
+}
+function EmptyState({ isDark }) {
+  const bg = isDark ? "#131311" : "#F5F3EF";
+  const fg = isDark ? "rgba(240,237,230,0.35)" : "rgba(26,26,24,0.35)";
+  const bd = isDark ? "#2A2A28" : "#DDD9D0";
+  const code = { fontFamily: "monospace", fontSize: 12, padding: "1px 4px", borderRadius: 4, background: isDark ? "#222220" : "#E8E4DC", border: `1px solid ${bd}` };
+  return /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", gap: 16, background: bg, color: fg, fontFamily: "'Nunito', system-ui, sans-serif" }, children: [
+    /* @__PURE__ */ jsxs8("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", stroke: fg, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx12("rect", { x: "10", y: "6", width: "28", height: "36", rx: "3" }),
+      /* @__PURE__ */ jsx12("line", { x1: "16", y1: "16", x2: "32", y2: "16" }),
+      /* @__PURE__ */ jsx12("line", { x1: "16", y1: "22", x2: "32", y2: "22" }),
+      /* @__PURE__ */ jsx12("line", { x1: "16", y1: "28", x2: "26", y2: "28" })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { style: { textAlign: "center", lineHeight: 1.7 }, children: [
+      /* @__PURE__ */ jsx12("p", { style: { margin: 0, fontSize: 15, fontWeight: 600, color: isDark ? "rgba(240,237,230,0.7)" : "rgba(26,26,24,0.7)" }, children: "No .visualli file provided" }),
+      /* @__PURE__ */ jsxs8("p", { style: { margin: "4px 0 0", fontSize: 13 }, children: [
+        "Pass a ",
+        /* @__PURE__ */ jsx12("code", { style: code, children: "visualliFile" }),
+        " or ",
+        /* @__PURE__ */ jsx12("code", { style: code, children: "visualliString" }),
+        " prop."
+      ] })
+    ] })
+  ] });
+}
+function LoadingState({ isDark }) {
+  const bg = isDark ? "#131311" : "#F5F3EF";
+  const fg = isDark ? "rgba(240,237,230,0.5)" : "rgba(26,26,24,0.5)";
+  const dot = isDark ? "rgba(240,237,230,0.6)" : "rgba(26,26,24,0.45)";
+  return /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", gap: 16, background: bg, color: fg, fontFamily: "'Nunito', system-ui, sans-serif" }, children: [
+    /* @__PURE__ */ jsx12("div", { style: { display: "flex", gap: 8 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx12("div", { style: { width: 8, height: 8, borderRadius: "50%", background: dot, animation: `vr-pulse 1.2s ease-in-out ${i * 0.2}s infinite` } }, i)) }),
+    /* @__PURE__ */ jsx12("style", { children: `@keyframes vr-pulse{0%,80%,100%{opacity:.2;transform:scale(.9)}40%{opacity:1;transform:scale(1.1)}}` }),
+    /* @__PURE__ */ jsx12("p", { style: { margin: 0, fontSize: 14 }, children: "Loading .visualli file\u2026" })
+  ] });
+}
+function ErrorState({ message, isDark }) {
+  const bg = isDark ? "#131311" : "#F5F3EF";
+  const bd = isDark ? "#3a1f1f" : "#F0CECE";
+  const card = isDark ? "#1e1212" : "#FFF5F5";
+  const head = isDark ? "#F87171" : "#DC2626";
+  const body = isDark ? "rgba(248,113,113,0.8)" : "rgba(180,40,40,0.8)";
+  return /* @__PURE__ */ jsx12("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", padding: "24px", background: bg, fontFamily: "'Nunito', system-ui, sans-serif" }, children: /* @__PURE__ */ jsxs8("div", { style: { maxWidth: 480, width: "100%", padding: "20px 24px", borderRadius: 12, border: `1px solid ${bd}`, background: card }, children: [
+    /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsxs8("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: head, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx12("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx12("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsx12("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ] }),
+      /* @__PURE__ */ jsx12("span", { style: { fontSize: 15, fontWeight: 700, color: head }, children: "Failed to parse .visualli file" })
+    ] }),
+    /* @__PURE__ */ jsx12("p", { style: { margin: 0, fontSize: 13, color: body, lineHeight: 1.6, wordBreak: "break-word", fontFamily: "monospace" }, children: message })
+  ] }) });
+}
+var WORKER_SCRIPT = `
+self.onmessage = function(e) {
+  var content = e.data;
+  try {
+    var lines = content.trim().split('\\n');
+    var doc = {
+      meta: null,
+      layers: new Map(),
+      layersByLevel: new Map(),
+      rootLayer: null,
+    };
+    for (var i = 0; i < lines.length; i++) {
+      var line = lines[i].trim();
+      if (!line) continue;
+      var obj;
+      try { obj = JSON.parse(line); }
+      catch(err) { throw new Error('Failed to parse JSON at line ' + (i+1) + ': ' + err); }
+      if (!obj.type) throw new Error("Missing 'type' field at line " + (i+1));
+      if (obj.type === 'meta') {
+        doc.meta = obj;
+      } else if (obj.type === 'layer') {
+        doc.layers.set(obj.id, obj);
+        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;
+      }
+    }
+    if (!doc.meta)      throw new Error('Missing required meta section');
+    if (!doc.rootLayer) throw new Error('Missing root layer (level 0)');
+    self.postMessage({ ok: true, doc: doc });
+  } catch(err) {
+    self.postMessage({ ok: false, message: err.message || String(err) });
+  }
+};
+`;
+var _workerUrl = null;
+function getWorkerUrl() {
+  if (!_workerUrl) {
+    _workerUrl = URL.createObjectURL(new Blob([WORKER_SCRIPT], { type: "text/javascript" }));
+  }
+  return _workerUrl;
+}
+function useAsyncParse(content, useWorker) {
+  const [state, setState] = useState4({ status: "idle" });
+  const workerRef = useRef10(null);
+  useEffect7(() => {
+    if (!content) {
+      setState({ status: "idle" });
+      return;
+    }
+    setState({ status: "loading" });
+    let cancelled = false;
+    if (useWorker && typeof Worker !== "undefined") {
+      workerRef.current?.terminate();
+      const w = new Worker(getWorkerUrl());
+      workerRef.current = w;
+      w.onmessage = (e) => {
+        if (cancelled) return;
+        if (e.data.ok) {
+          setState({ status: "ready", doc: e.data.doc });
+        } else {
+          setState({ status: "error", message: e.data.message });
+        }
+      };
+      w.onerror = (e) => {
+        if (!cancelled) setState({ status: "error", message: e.message });
+      };
+      w.postMessage(content);
+      return () => {
+        cancelled = true;
+        w.terminate();
+        workerRef.current = null;
+      };
+    }
+    Promise.resolve().then(() => {
+      if (cancelled) return;
+      try {
+        const doc = parseVisualliFile2(content);
+        if (!cancelled) setState({ status: "ready", doc });
+      } catch (err) {
+        if (!cancelled) setState({ status: "error", message: err instanceof Error ? err.message : String(err) });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [content, useWorker]);
+  useEffect7(() => () => {
+    workerRef.current?.terminate();
+  }, []);
+  return state;
+}
+function useFileText(file) {
+  const [text, setText] = useState4(void 0);
+  const [error, setError] = useState4(void 0);
+  const [loading, setLoading] = useState4(false);
+  useEffect7(() => {
+    if (!file) {
+      setText(void 0);
+      setError(void 0);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setText(void 0);
+    setError(void 0);
+    let cancelled = false;
+    if (typeof file === "string") {
+      fetch(file).then((response) => {
+        if (!response.ok) throw new Error(`Failed to fetch file: ${response.statusText}`);
+        return response.text();
+      }).then((t) => {
+        if (!cancelled) {
+          setText(t);
+          setLoading(false);
+        }
+      }).catch((err) => {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : String(err));
+          setLoading(false);
+        }
+      });
+    } else {
+      file.text().then((t) => {
+        if (!cancelled) {
+          setText(t);
+          setLoading(false);
+        }
+      }).catch((err) => {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : String(err));
+          setLoading(false);
+        }
+      });
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [file]);
+  return { text, error, loading };
+}
+function VisualliRenderer({
+  visualliString,
+  visualliFile,
+  theme = "light",
+  width = "100%",
+  height = "100%",
+  useWorker = true,
+  chromaticImmersion = false,
+  className,
+  style
+}) {
+  useFontInjection();
+  const systemDark = useSystemDark();
+  const isDark = theme === "dark" ? true : theme === "light" ? false : systemDark;
+  const cssWidth = typeof width === "number" ? `${width}px` : width;
+  const cssHeight = typeof height === "number" ? `${height}px` : height;
+  const { text: fileText, error: fileReadError, loading: fileReading } = useFileText(visualliFile);
+  const rawContent = fileText ?? visualliString;
+  const parseState = useAsyncParse(rawContent, useWorker);
+  const resolvedDoc = useMemo8(() => {
+    if (parseState.status === "ready") return parseState.doc;
+    return null;
+  }, [parseState]);
+  const wrapperStyle = { width: cssWidth, height: cssHeight, overflow: "hidden", ...style };
+  if (!visualliString && !visualliFile) {
+    return /* @__PURE__ */ jsx12("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsx12(EmptyState, { isDark }) });
+  }
+  if (fileReading || parseState.status === "loading") {
+    return /* @__PURE__ */ jsx12("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsx12(LoadingState, { isDark }) });
+  }
+  if (fileReadError || parseState.status === "error") {
+    const msg = fileReadError ?? (parseState.status === "error" ? parseState.message : "Unknown error");
+    return /* @__PURE__ */ jsx12("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsx12(ErrorState, { message: msg, isDark }) });
+  }
+  return /* @__PURE__ */ jsx12("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsx12(
+    VisualliCanvas,
+    {
+      preParsedVisualli: resolvedDoc ?? void 0,
+      isDark,
+      chromaticImmersion,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
+}
+
+// src/context/VisualliContext.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var VisualliContext = createContext(null);
+function VisualliProvider({
+  children
+}) {
+  const value = {};
+  return /* @__PURE__ */ jsx13(VisualliContext.Provider, { value, children });
+}
+function useVisualli() {
+  const ctx = useContext(VisualliContext);
+  if (!ctx) {
+    return {};
+  }
+  return ctx;
+}
+export {
+  ACTIVE_BLOB_TYPES,
+  ALL_BLOB_SHAPES2 as ALL_BLOB_SHAPES,
+  BLOB_LAYER_CONFIG,
+  BLOB_TEXT_OFFSETS,
+  DESCRIPTION_TEXT_BASE_FONT_PX,
+  KonvaContainer_default as KonvaContainer,
+  KonvaContainerLayer,
+  KonvaEdge_default as KonvaEdge,
+  KonvaEdgeLayer,
+  KonvaLayerTransitionAnimator,
+  KonvaNode_default as KonvaNode,
+  KonvaNodeLayer,
+  KonvaStage_default as KonvaStage,
+  NODE_LAYER_CONFIG,
+  NODE_TEXT_BASE_FONT_PX,
+  NavigationStack_default as NavigationStack,
+  SketchyBoxKonva_default as SketchyBoxKonva,
+  VisualliCanvas,
+  VisualliProvider,
+  VisualliRenderer,
+  ZoomControls_default as ZoomControls,
+  buildBlobPathData,
+  calculateFitCenter,
+  calculateFitView,
+  calculateFitZoom,
+  computeEdgeLabelScale,
+  computeNodeTextScreenScale,
+  computeNodeTextWorldScale,
+  computeOverlayScale,
+  drawBlobPath,
+  getBlobTypeForLayer,
+  getChildLayerForNode,
+  getConnectionsForLayer,
+  getLayerForNavigation,
+  konvaLayerTransitionAnimator,
+  useKonvaLayerTransition,
+  useKonvaRenderer,
+  useNodeStore,
+  useRenderConfigStore,
+  useSelectionStore,
+  useViewportNodes,
+  useViewportStore,
+  useVisualli
+};
+//# sourceMappingURL=index.js.map