@almadar/ui 5.110.0 → 5.111.0

package/dist/lib/drawable/three/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React6 = require('react');
+var React3 = require('react');
 var providers = require('@almadar/ui/providers');
 var logger = require('@almadar/logger');
 var fiber = require('@react-three/fiber');
@@ -37,7 +37,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React6__default = /*#__PURE__*/_interopDefault(React6);
+var React3__default = /*#__PURE__*/_interopDefault(React3);
 var THREE9__namespace = /*#__PURE__*/_interopNamespace(THREE9);
 
 var __defProp = Object.defineProperty;
@@ -117,10 +117,10 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React6.useContext(providers.EventBusContext);
+  const context = React3.useContext(providers.EventBusContext);
   const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
   const scope = providers.useTraitScope();
-  return React6.useMemo(() => {
+  return React3.useMemo(() => {
     if (!scope) {
       return {
         ...baseBus,
@@ -156,7 +156,7 @@ function useEventBus() {
 }
 function useEmitEvent() {
   const eventBus = useEventBus();
-  return React6.useCallback(
+  return React3.useCallback(
     (type, payload, source) => {
       eventBus.emit(type, payload, source);
     },
@@ -208,9 +208,9 @@ function useGameCanvas3DEvents(options) {
     onUnitAnimation
   } = options;
   const emit = useEmitEvent();
-  const optionsRef = React6.useRef(options);
+  const optionsRef = React3.useRef(options);
   optionsRef.current = options;
-  const handleTileClick = React6.useCallback(
+  const handleTileClick = React3.useCallback(
     (tile, event) => {
       if (tileClickEvent) {
         emit(tileClickEvent, {
@@ -226,7 +226,7 @@ function useGameCanvas3DEvents(options) {
     },
     [tileClickEvent, emit]
   );
-  const handleUnitClick = React6.useCallback(
+  const handleUnitClick = React3.useCallback(
     (unit, event) => {
       if (unitClickEvent) {
         emit(unitClickEvent, {
@@ -245,7 +245,7 @@ function useGameCanvas3DEvents(options) {
     },
     [unitClickEvent, emit]
   );
-  const handleFeatureClick = React6.useCallback(
+  const handleFeatureClick = React3.useCallback(
     (feature, event) => {
       if (featureClickEvent) {
         emit(featureClickEvent, {
@@ -260,7 +260,7 @@ function useGameCanvas3DEvents(options) {
     },
     [featureClickEvent, emit]
   );
-  const handleCanvasClick = React6.useCallback(
+  const handleCanvasClick = React3.useCallback(
     (event) => {
       if (canvasClickEvent) {
         emit(canvasClickEvent, {
@@ -273,7 +273,7 @@ function useGameCanvas3DEvents(options) {
     },
     [canvasClickEvent, emit]
   );
-  const handleTileHover = React6.useCallback(
+  const handleTileHover = React3.useCallback(
     (tile, event) => {
       if (tile) {
         if (tileHoverEvent) {
@@ -293,7 +293,7 @@ function useGameCanvas3DEvents(options) {
     },
     [tileHoverEvent, tileLeaveEvent, emit]
   );
-  const handleUnitAnimation = React6.useCallback(
+  const handleUnitAnimation = React3.useCallback(
     (unitId, state) => {
       if (unitAnimationEvent) {
         emit(unitAnimationEvent, {
@@ -306,7 +306,7 @@ function useGameCanvas3DEvents(options) {
     },
     [unitAnimationEvent, emit]
   );
-  const handleCameraChange = React6.useCallback(
+  const handleCameraChange = React3.useCallback(
     (position) => {
       if (cameraChangeEvent) {
         emit(cameraChangeEvent, {
@@ -373,7 +373,7 @@ function Canvas3DLoadingState({
   ] });
 }
 var log2 = logger.createLogger("almadar:ui:game:canvas3d:error-boundary");
-var Canvas3DErrorBoundary = class extends React6.Component {
+var Canvas3DErrorBoundary = class extends React3.Component {
   constructor(props) {
     super(props);
     __publicField(this, "handleReset", () => {
@@ -502,7 +502,7 @@ function CameraController3D({
   onCameraChange
 }) {
   const { camera } = fiber.useThree();
-  React6.useEffect(() => {
+  React3.useEffect(() => {
     if (onCameraChange) {
       onCameraChange({
         x: camera.position.x,
@@ -518,8 +518,8 @@ function FollowCamera3D({
   offset
 }) {
   const { camera } = fiber.useThree();
-  const look = React6.useRef(new THREE9__namespace.Vector3(target[0], target[1], target[2]));
-  const goal = React6.useRef(new THREE9__namespace.Vector3());
+  const look = React3.useRef(new THREE9__namespace.Vector3(target[0], target[1], target[2]));
+  const goal = React3.useRef(new THREE9__namespace.Vector3());
   fiber.useFrame((_, delta) => {
     const t = Math.min(1, delta * 5);
     goal.current.set(target[0] + offset[0], target[1] + offset[1], target[2] + offset[2]);
@@ -529,6 +529,54 @@ function FollowCamera3D({
   });
   return null;
 }
+
+// lib/atlasSlice.ts
+var atlasCache = /* @__PURE__ */ new Map();
+function isTilesheet(a) {
+  return typeof a.tileWidth === "number";
+}
+function getAtlas(url, onReady) {
+  if (atlasCache.has(url)) return atlasCache.get(url) ?? void 0;
+  atlasCache.set(url, void 0);
+  fetch(url).then((r) => r.json()).then((json) => {
+    atlasCache.set(url, json);
+    onReady();
+  }).catch(() => {
+    atlasCache.set(url, null);
+  });
+  return void 0;
+}
+function subRectFor(atlas, sprite) {
+  if (isTilesheet(atlas)) {
+    let col;
+    let row;
+    if (sprite.includes(",")) {
+      const [c, r] = sprite.split(",").map((n) => Number(n.trim()));
+      col = c;
+      row = r;
+    } else {
+      const i = Number(sprite);
+      if (!Number.isFinite(i)) return null;
+      col = i % atlas.columns;
+      row = Math.floor(i / atlas.columns);
+    }
+    if (!Number.isFinite(col) || !Number.isFinite(row) || col < 0 || row < 0 || col >= atlas.columns || row >= atlas.rows) return null;
+    const margin = atlas.margin ?? 0;
+    const spacing = atlas.spacing ?? 0;
+    return {
+      sx: margin + col * (atlas.tileWidth + spacing),
+      sy: margin + row * (atlas.tileHeight + spacing),
+      sw: atlas.tileWidth,
+      sh: atlas.tileHeight
+    };
+  }
+  const st = atlas.subTextures[sprite];
+  if (!st) return null;
+  return { sx: st.x, sy: st.y, sw: st.width, sh: st.height };
+}
+function isAtlasAsset(asset) {
+  return !!asset && typeof asset.atlas === "string" && typeof asset.sprite === "string";
+}
 var log3 = logger.createLogger("almadar:ui:game:model-loader");
 var gltfCache = /* @__PURE__ */ new Map();
 function loadGltfCached(url, assetRoot) {
@@ -573,10 +621,10 @@ function stateFromEntry(entry) {
   return { model: null, clips: [], isLoading: !entry.error, error: entry.error ?? null };
 }
 function useGLTFModel(url, resourceBasePath) {
-  const [state, setState] = React6.useState(
+  const [state, setState] = React3.useState(
     () => stateFromEntry(url ? loadGltfCached(url, resourceBasePath || detectAssetRoot(url)) : null)
   );
-  React6.useEffect(() => {
+  React3.useEffect(() => {
     if (!url) {
       setState({ model: null, clips: [], isLoading: false, error: null });
       return;
@@ -611,7 +659,7 @@ function ModelLoader({
   tint
 }) {
   const { model: loadedModel, clips, isLoading, error } = useGLTFModel(url, resourceBasePath);
-  const model = React6.useMemo(() => {
+  const model = React3.useMemo(() => {
     if (!loadedModel) return null;
     const cloned = SkeletonUtils.clone(loadedModel);
     cloned.updateMatrixWorld(true);
@@ -629,8 +677,8 @@ function ModelLoader({
     });
     return cloned;
   }, [loadedModel, castShadow, receiveShadow, tint]);
-  const mixer = React6.useMemo(() => model ? new THREE9__namespace.AnimationMixer(model) : null, [model]);
-  React6.useEffect(() => {
+  const mixer = React3.useMemo(() => model ? new THREE9__namespace.AnimationMixer(model) : null, [model]);
+  React3.useEffect(() => {
     if (!mixer || !animation || clips.length === 0) return;
     const wanted = animation.toLowerCase();
     const clip = clips.find((c) => c.name === animation) ?? clips.find((c) => c.name.toLowerCase() === wanted);
@@ -644,7 +692,7 @@ function ModelLoader({
   fiber.useFrame((_, delta) => {
     mixer?.update(delta);
   });
-  const normFactor = React6.useMemo(() => {
+  const normFactor = React3.useMemo(() => {
     if (!model) return 1;
     const box = new THREE9__namespace.Box3().setFromObject(model);
     const size = new THREE9__namespace.Vector3();
@@ -653,11 +701,11 @@ function ModelLoader({
     if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
     return 1 / maxDim;
   }, [model]);
-  const scaleArray = React6.useMemo(() => {
+  const scaleArray = React3.useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;
     return [base[0] * normFactor, base[1] * normFactor, base[2] * normFactor];
   }, [scale, normFactor]);
-  const rotationRad = React6.useMemo(() => {
+  const rotationRad = React3.useMemo(() => {
     return [
       rotation[0] * Math.PI / 180,
       rotation[1] * Math.PI / 180,
@@ -730,22 +778,126 @@ function ModelLoader({
     }
   );
 }
+var CrossOriginTextureLoader = class extends THREE9__namespace.TextureLoader {
+  constructor() {
+    super();
+    this.crossOrigin = "anonymous";
+  }
+};
+function useBillboardTexture(url) {
+  const [state, setState] = React3__default.default.useState({
+    texture: null,
+    error: false
+  });
+  React3__default.default.useEffect(() => {
+    let active = true;
+    const loader = new CrossOriginTextureLoader();
+    loader.load(
+      url,
+      (texture) => {
+        if (!active) return;
+        console.log("[SpriteBillboard] texture loaded", url, texture.image?.width, texture.image?.height);
+        texture.colorSpace = THREE9__namespace.SRGBColorSpace;
+        setState({ texture, error: false });
+      },
+      void 0,
+      (err) => {
+        if (!active) return;
+        console.error("[SpriteBillboard] texture load error", url, err);
+        setState({ texture: null, error: true });
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [url]);
+  return state;
+}
+function useAtlasFrame(asset) {
+  const [tick, setTick] = React3__default.default.useState(0);
+  React3__default.default.useEffect(() => {
+    if (!isAtlasAsset(asset)) return;
+    getAtlas(asset.atlas, () => setTick((t) => t + 1));
+  }, [asset, tick]);
+  return React3__default.default.useMemo(() => {
+    if (!isAtlasAsset(asset)) return { frame: null, ready: true };
+    const atlas = getAtlas(asset.atlas, () => setTick((t) => t + 1));
+    if (!atlas) {
+      console.log("[SpriteBillboard] atlas not ready", asset.atlas, asset.sprite);
+      return { frame: null, ready: false };
+    }
+    const r = subRectFor(atlas, asset.sprite);
+    console.log("[SpriteBillboard] atlas frame", asset.atlas, asset.sprite, r);
+    if (!r) return { frame: null, ready: true };
+    return { frame: { x: r.sx, y: r.sy, w: r.sw, h: r.sh }, ready: true };
+  }, [asset, tick]);
+}
 function SpriteBillboard({ node, world }) {
-  const texture = fiber.useLoader(THREE9__namespace.TextureLoader, node.asset.url);
-  const img = texture.image;
-  const imgW = img?.width || 1;
-  const imgH = img?.height || 1;
-  if (node.frame) {
-    texture.repeat.set(node.frame.w / imgW, node.frame.h / imgH);
-    texture.offset.set(node.frame.x / imgW, 1 - (node.frame.y + node.frame.h) / imgH);
-    texture.magFilter = texture.minFilter = THREE9__namespace.NearestFilter;
-    texture.needsUpdate = true;
+  const { texture, error: textureError } = useBillboardTexture(node.asset.url);
+  const { frame: atlasFrame, ready: atlasReady } = useAtlasFrame(node.asset);
+  const frame = node.frame ?? atlasFrame;
+  const anchor = node.anchor ?? "top-left";
+  console.log("[SpriteBillboard] render", node.asset.url, anchor, frame, "texture?", !!texture, "atlasReady?", atlasReady);
+  const size = React3__default.default.useMemo(() => {
+    const img = texture?.image;
+    const imgW = img?.width || 1;
+    const imgH = img?.height || 1;
+    const aspect = frame ? frame.w / frame.h : imgW / imgH;
+    if (anchor === "top-left") {
+      const width2 = node.width ?? 1;
+      const height2 = node.height ?? 1;
+      return { width: width2, height: height2, imgW, imgH };
+    }
+    const height = node.height ?? 1;
+    const width = node.width ?? height * aspect;
+    return { width, height, imgW, imgH };
+  }, [texture, frame, node.height, node.width, anchor]);
+  if (!texture || !atlasReady) {
+    if (anchor === "top-left") {
+      return /* @__PURE__ */ jsxRuntime.jsx("group", { position: [world[0] + size.width / 2, 0.02, world[2] + size.height / 2], children: /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], children: [
+        /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [size.width, size.height] }),
+        /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE9__namespace.DoubleSide })
+      ] }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("group", { position: [world[0], world[1] + size.height / 2, world[2]], children: /* @__PURE__ */ jsxRuntime.jsxs("mesh", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [size.width, size.height] }),
+      /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE9__namespace.DoubleSide })
+    ] }) });
+  }
+  const groundGeometry = React3__default.default.useMemo(() => {
+    if (anchor !== "top-left" || !texture || !atlasReady) return null;
+    const g = new THREE9__namespace.PlaneGeometry(size.width, size.height);
+    g.rotateX(-Math.PI / 2);
+    if (frame) {
+      const u0 = frame.x / size.imgW;
+      const v0 = 1 - (frame.y + frame.h) / size.imgH;
+      const u1 = u0 + frame.w / size.imgW;
+      const v1 = v0 + frame.h / size.imgH;
+      const uvs = new Float32Array([u0, v1, u1, v1, u0, v0, u1, v0]);
+      g.setAttribute("uv", new THREE9__namespace.BufferAttribute(uvs, 2));
+    }
+    return g;
+  }, [anchor, texture, atlasReady, size.width, size.height, size.imgW, size.imgH, frame]);
+  texture.magFilter = texture.minFilter = THREE9__namespace.NearestFilter;
+  texture.needsUpdate = true;
+  if (anchor === "top-left") {
+    return /* @__PURE__ */ jsxRuntime.jsx("group", { position: [world[0] + size.width / 2, 0.01, world[2] + size.height / 2], children: /* @__PURE__ */ jsxRuntime.jsx("mesh", { geometry: groundGeometry ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "meshBasicMaterial",
+      {
+        map: texture,
+        transparent: true,
+        alphaTest: 0.1,
+        side: THREE9__namespace.DoubleSide,
+        opacity: node.opacity ?? 1
+      }
+    ) }) });
+  }
+  if (frame) {
+    texture.repeat.set(frame.w / size.imgW, frame.h / size.imgH);
+    texture.offset.set(frame.x / size.imgW, 1 - (frame.y + frame.h) / size.imgH);
   }
-  const aspect = node.frame ? node.frame.w / node.frame.h : imgW / imgH;
-  const height = node.height ?? 1;
-  const width = node.width ?? height * aspect;
-  return /* @__PURE__ */ jsxRuntime.jsx(drei.Billboard, { position: [world[0], world[1] + height / 2, world[2]], children: /* @__PURE__ */ jsxRuntime.jsxs("mesh", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [width, height] }),
+  return /* @__PURE__ */ jsxRuntime.jsx(drei.Billboard, { position: [world[0], world[1] + size.height / 2, world[2]], children: /* @__PURE__ */ jsxRuntime.jsxs("mesh", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [size.width, size.height] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "meshBasicMaterial",
       {
@@ -868,7 +1020,7 @@ var DEFAULT_GRID_CONFIG = {
   offsetX: 0,
   offsetZ: 0
 };
-var Canvas3DHost = React6.forwardRef(
+var Canvas3DHost = React3.forwardRef(
   ({
     cameraMode = "isometric",
     followTarget,
@@ -894,12 +1046,12 @@ var Canvas3DHost = React6.forwardRef(
     children,
     drawables
   }, ref) => {
-    const containerRef = React6.useRef(null);
-    const controlsRef = React6.useRef(null);
-    const [internalError, setInternalError] = React6.useState(null);
+    const containerRef = React3.useRef(null);
+    const controlsRef = React3.useRef(null);
+    const [internalError, setInternalError] = React3.useState(null);
     const eventBus = useEventBus();
-    const keysRef = React6.useRef(/* @__PURE__ */ new Set());
-    React6.useEffect(() => {
+    const keysRef = React3.useRef(/* @__PURE__ */ new Set());
+    React3.useEffect(() => {
       if (!keyMap && !keyUpMap) return;
       const down = (e) => {
         if (keysRef.current.has(e.code)) return;
@@ -932,10 +1084,10 @@ var Canvas3DHost = React6.forwardRef(
       unitAnimationEvent,
       cameraChangeEvent
     });
-    const drawnItems = React6.useMemo(() => collectDrawnItems(drawables ?? []), [drawables]);
-    const scenePositions = React6.useMemo(() => drawnItems.map((i) => i.pos), [drawnItems]);
-    const hitIndex = React6.useMemo(() => buildHitIndex(drawnItems), [drawnItems]);
-    const gridBounds = React6.useMemo(() => {
+    const drawnItems = React3.useMemo(() => collectDrawnItems(drawables ?? []), [drawables]);
+    const scenePositions = React3.useMemo(() => drawnItems.map((i) => i.pos), [drawnItems]);
+    const hitIndex = React3.useMemo(() => buildHitIndex(drawnItems), [drawnItems]);
+    const gridBounds = React3.useMemo(() => {
       if (scenePositions.length === 0) {
         return { minX: 0, maxX: 10, minZ: 0, maxZ: 10 };
       }
@@ -951,7 +1103,7 @@ var Canvas3DHost = React6.forwardRef(
       }
       return { minX, maxX, minZ, maxZ };
     }, [scenePositions]);
-    const cameraTarget = React6.useMemo(
+    const cameraTarget = React3.useMemo(
       () => [
         (gridBounds.minX + gridBounds.maxX) / 2,
         0,
@@ -959,7 +1111,7 @@ var Canvas3DHost = React6.forwardRef(
       ],
       [gridBounds]
     );
-    const gridConfig = React6.useMemo(
+    const gridConfig = React3.useMemo(
       () => ({
         ...DEFAULT_GRID_CONFIG,
         offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
@@ -967,7 +1119,7 @@ var Canvas3DHost = React6.forwardRef(
       }),
       [gridBounds]
     );
-    const drawableProjector = React6.useMemo(
+    const drawableProjector = React3.useMemo(
       () => create3DProjector({
         cellSize: gridConfig.cellSize,
         offsetX: -gridBounds.minX * gridConfig.cellSize,
@@ -975,7 +1127,7 @@ var Canvas3DHost = React6.forwardRef(
       }),
       [gridBounds, gridConfig]
     );
-    React6.useImperativeHandle(ref, () => ({
+    React3.useImperativeHandle(ref, () => ({
       getCameraPosition: () => {
         if (controlsRef.current) {
           const pos = controlsRef.current.object.position;
@@ -1008,7 +1160,7 @@ var Canvas3DHost = React6.forwardRef(
         return null;
       }
     }));
-    const cameraConfig = React6.useMemo(() => {
+    const cameraConfig = React3.useMemo(() => {
       const size = Math.max(
         gridBounds.maxX - gridBounds.minX,
         gridBounds.maxZ - gridBounds.minZ,
@@ -1030,15 +1182,15 @@ var Canvas3DHost = React6.forwardRef(
           return { position: [cx + d, d, cz + d], fov: 45 };
       }
     }, [cameraMode, gridBounds]);
-    const followWorld = React6.useMemo(() => {
+    const followWorld = React3.useMemo(() => {
       if (followTarget) return drawableProjector.toWorld(followTarget);
       return cameraTarget;
     }, [followTarget, drawableProjector, cameraTarget]);
-    const followOffset = React6.useMemo(
+    const followOffset = React3.useMemo(
       () => cameraMode === "chase" ? [0, 4, -7] : [5, 7, 5],
       [cameraMode]
     );
-    const handleGroundClick = React6.useCallback((e) => {
+    const handleGroundClick = React3.useCallback((e) => {
       if (!tileClickEvent && !unitClickEvent) return;
       e.stopPropagation();
       const cell = {
@@ -1191,8 +1343,8 @@ var Canvas3DHost = React6.forwardRef(
 Canvas3DHost.displayName = "Canvas3DHost";
 function Scene3D({ background = "#1a1a2e", fog, children }) {
   const { scene } = fiber.useThree();
-  const initializedRef = React6.useRef(false);
-  React6.useEffect(() => {
+  const initializedRef = React3.useRef(false);
+  React3.useEffect(() => {
     if (initializedRef.current) return;
     initializedRef.current = true;
     if (background.startsWith("#") || background.startsWith("rgb")) {
@@ -1213,7 +1365,7 @@ function Scene3D({ background = "#1a1a2e", fog, children }) {
   }, [scene, background, fog]);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 }
-var Camera3D = React6.forwardRef(
+var Camera3D = React3.forwardRef(
   ({
     mode = "isometric",
     position = [10, 10, 10],
@@ -1226,10 +1378,10 @@ var Camera3D = React6.forwardRef(
     onChange
   }, ref) => {
     const { camera, set, viewport } = fiber.useThree();
-    const controlsRef = React6.useRef(null);
-    const initialPosition = React6.useRef(new THREE9__namespace.Vector3(...position));
-    const initialTarget = React6.useRef(new THREE9__namespace.Vector3(...target));
-    React6.useEffect(() => {
+    const controlsRef = React3.useRef(null);
+    const initialPosition = React3.useRef(new THREE9__namespace.Vector3(...position));
+    const initialTarget = React3.useRef(new THREE9__namespace.Vector3(...target));
+    React3.useEffect(() => {
       let newCamera;
       if (mode === "isometric") {
         const aspect = viewport.aspect;
@@ -1260,7 +1412,7 @@ var Camera3D = React6.forwardRef(
         onChange(camera);
       }
     });
-    React6.useImperativeHandle(ref, () => ({
+    React3.useImperativeHandle(ref, () => ({
       getCamera: () => camera,
       setPosition: (x, y, z) => {
         camera.position.set(x, y, z);
@@ -1514,21 +1666,21 @@ var DEFAULT_OPTIONS = {
 };
 function useThree4(options = {}) {
   const opts = { ...DEFAULT_OPTIONS, ...options };
-  const containerRef = React6.useRef(null);
-  const canvasRef = React6.useRef(null);
-  const rendererRef = React6.useRef(null);
-  const sceneRef = React6.useRef(null);
-  const cameraRef = React6.useRef(null);
-  const controlsRef = React6.useRef(null);
-  const gridHelperRef = React6.useRef(null);
-  const rafRef = React6.useRef(0);
-  const [isReady, setIsReady] = React6.useState(false);
-  const [dimensions, setDimensions] = React6.useState({ width: 0, height: 0 });
-  const initialCameraPosition = React6.useMemo(
+  const containerRef = React3.useRef(null);
+  const canvasRef = React3.useRef(null);
+  const rendererRef = React3.useRef(null);
+  const sceneRef = React3.useRef(null);
+  const cameraRef = React3.useRef(null);
+  const controlsRef = React3.useRef(null);
+  const gridHelperRef = React3.useRef(null);
+  const rafRef = React3.useRef(0);
+  const [isReady, setIsReady] = React3.useState(false);
+  const [dimensions, setDimensions] = React3.useState({ width: 0, height: 0 });
+  const initialCameraPosition = React3.useMemo(
     () => new THREE9__namespace.Vector3(...opts.cameraPosition),
     []
   );
-  React6.useEffect(() => {
+  React3.useEffect(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
@@ -1621,7 +1773,7 @@ function useThree4(options = {}) {
       scene.clear();
     };
   }, []);
-  React6.useEffect(() => {
+  React3.useEffect(() => {
     if (!cameraRef.current || !containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
@@ -1656,20 +1808,20 @@ function useThree4(options = {}) {
       animate();
     }
   }, [opts.cameraMode]);
-  const setCameraPosition = React6.useCallback((x, y, z) => {
+  const setCameraPosition = React3.useCallback((x, y, z) => {
     if (cameraRef.current) {
       cameraRef.current.position.set(x, y, z);
       controlsRef.current?.update();
     }
   }, []);
-  const lookAt = React6.useCallback((x, y, z) => {
+  const lookAt = React3.useCallback((x, y, z) => {
     if (cameraRef.current) {
       cameraRef.current.lookAt(x, y, z);
       controlsRef.current?.target.set(x, y, z);
       controlsRef.current?.update();
     }
   }, []);
-  const resetCamera = React6.useCallback(() => {
+  const resetCamera = React3.useCallback(() => {
     if (cameraRef.current) {
       cameraRef.current.position.copy(initialCameraPosition);
       cameraRef.current.lookAt(0, 0, 0);
@@ -1679,7 +1831,7 @@ function useThree4(options = {}) {
       }
     }
   }, [initialCameraPosition]);
-  const fitView = React6.useCallback(
+  const fitView = React3.useCallback(
     (bounds) => {
       if (!cameraRef.current) return;
       const centerX = (bounds.minX + bounds.maxX) / 2;
@@ -1710,20 +1862,20 @@ function useThree4(options = {}) {
 }
 function useAssetLoader(options = {}) {
   const { preloadUrls = [], loader: customLoader } = options;
-  const loaderRef = React6.useRef(customLoader || new AssetLoader());
-  const [state, setState] = React6.useState({
+  const loaderRef = React3.useRef(customLoader || new AssetLoader());
+  const [state, setState] = React3.useState({
     isLoading: false,
     progress: 0,
     loaded: 0,
     total: 0,
     errors: []
   });
-  React6.useEffect(() => {
+  React3.useEffect(() => {
     if (preloadUrls.length > 0) {
       preload(preloadUrls);
     }
   }, []);
-  const updateProgress = React6.useCallback((loaded, total) => {
+  const updateProgress = React3.useCallback((loaded, total) => {
     setState((prev) => ({
       ...prev,
       loaded,
@@ -1731,7 +1883,7 @@ function useAssetLoader(options = {}) {
       progress: total > 0 ? Math.round(loaded / total * 100) : 0
     }));
   }, []);
-  const loadModel = React6.useCallback(
+  const loadModel = React3.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -1754,7 +1906,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const loadOBJ = React6.useCallback(
+  const loadOBJ = React3.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -1777,7 +1929,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const loadTexture = React6.useCallback(
+  const loadTexture = React3.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -1800,7 +1952,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const preload = React6.useCallback(
+  const preload = React3.useCallback(
     async (urls) => {
       setState((prev) => ({
         ...prev,
@@ -1839,27 +1991,27 @@ function useAssetLoader(options = {}) {
     },
     [updateProgress]
   );
-  const hasModel = React6.useCallback((url) => {
+  const hasModel = React3.useCallback((url) => {
     return loaderRef.current.hasModel(url);
   }, []);
-  const hasTexture = React6.useCallback((url) => {
+  const hasTexture = React3.useCallback((url) => {
     return loaderRef.current.hasTexture(url);
   }, []);
-  const getModel = React6.useCallback((url) => {
+  const getModel = React3.useCallback((url) => {
     try {
       return loaderRef.current.getModel(url);
     } catch {
       return void 0;
     }
   }, []);
-  const getTexture = React6.useCallback((url) => {
+  const getTexture = React3.useCallback((url) => {
     try {
       return loaderRef.current.getTexture(url);
     } catch {
       return void 0;
     }
   }, []);
-  const clearCache = React6.useCallback(() => {
+  const clearCache = React3.useCallback(() => {
     loaderRef.current.clearCache();
     setState({
       isLoading: false,
@@ -1883,25 +2035,25 @@ function useAssetLoader(options = {}) {
   };
 }
 function useSceneGraph() {
-  const nodesRef = React6.useRef(/* @__PURE__ */ new Map());
-  const addNode = React6.useCallback((node) => {
+  const nodesRef = React3.useRef(/* @__PURE__ */ new Map());
+  const addNode = React3.useCallback((node) => {
     const existing = nodesRef.current.get(node.id);
     if (existing) {
       existing.mesh.removeFromParent();
     }
     nodesRef.current.set(node.id, node);
   }, []);
-  const removeNode = React6.useCallback((id) => {
+  const removeNode = React3.useCallback((id) => {
     const node = nodesRef.current.get(id);
     if (node) {
       node.mesh.removeFromParent();
       nodesRef.current.delete(id);
     }
   }, []);
-  const getNode = React6.useCallback((id) => {
+  const getNode = React3.useCallback((id) => {
     return nodesRef.current.get(id);
   }, []);
-  const updateNodePosition = React6.useCallback(
+  const updateNodePosition = React3.useCallback(
     (id, x, y, z) => {
       const node = nodesRef.current.get(id);
       if (node) {
@@ -1911,7 +2063,7 @@ function useSceneGraph() {
     },
     []
   );
-  const updateNodeGridPosition = React6.useCallback(
+  const updateNodeGridPosition = React3.useCallback(
     (id, gridX, gridZ) => {
       const node = nodesRef.current.get(id);
       if (node) {
@@ -1920,7 +2072,7 @@ function useSceneGraph() {
     },
     []
   );
-  const getNodeAtGrid = React6.useCallback(
+  const getNodeAtGrid = React3.useCallback(
     (x, z, type) => {
       return Array.from(nodesRef.current.values()).find((node) => {
         const matchesGrid = node.gridPosition.x === x && node.gridPosition.z === z;
@@ -1929,10 +2081,10 @@ function useSceneGraph() {
     },
     []
   );
-  const getNodesByType = React6.useCallback((type) => {
+  const getNodesByType = React3.useCallback((type) => {
     return Array.from(nodesRef.current.values()).filter((node) => node.type === type);
   }, []);
-  const getNodesInBounds = React6.useCallback(
+  const getNodesInBounds = React3.useCallback(
     (minX, maxX, minZ, maxZ) => {
       return Array.from(nodesRef.current.values()).filter((node) => {
         const { x, z } = node.gridPosition;
@@ -1941,13 +2093,13 @@ function useSceneGraph() {
     },
     []
   );
-  const clearNodes = React6.useCallback(() => {
+  const clearNodes = React3.useCallback(() => {
     nodesRef.current.forEach((node) => {
       node.mesh.removeFromParent();
     });
     nodesRef.current.clear();
   }, []);
-  const countNodes = React6.useCallback((type) => {
+  const countNodes = React3.useCallback((type) => {
     if (!type) {
       return nodesRef.current.size;
     }
@@ -1969,9 +2121,9 @@ function useSceneGraph() {
 }
 function useRaycaster(options) {
   const { camera, canvas, cellSize = 1, offsetX = 0, offsetZ = 0 } = options;
-  const raycaster = React6.useRef(new THREE9__namespace.Raycaster());
-  const mouse = React6.useRef(new THREE9__namespace.Vector2());
-  const clientToNDC = React6.useCallback(
+  const raycaster = React3.useRef(new THREE9__namespace.Raycaster());
+  const mouse = React3.useRef(new THREE9__namespace.Vector2());
+  const clientToNDC = React3.useCallback(
     (clientX, clientY) => {
       if (!canvas) {
         return { x: 0, y: 0 };
@@ -1984,7 +2136,7 @@ function useRaycaster(options) {
     },
     [canvas]
   );
-  const isWithinCanvas = React6.useCallback(
+  const isWithinCanvas = React3.useCallback(
     (clientX, clientY) => {
       if (!canvas) return false;
       const rect = canvas.getBoundingClientRect();
@@ -1992,7 +2144,7 @@ function useRaycaster(options) {
     },
     [canvas]
   );
-  const getIntersection = React6.useCallback(
+  const getIntersection = React3.useCallback(
     (clientX, clientY, objects) => {
       if (!camera || !canvas) return null;
       const ndc = clientToNDC(clientX, clientY);
@@ -2015,7 +2167,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, clientToNDC]
   );
-  const getAllIntersections = React6.useCallback(
+  const getAllIntersections = React3.useCallback(
     (clientX, clientY, objects) => {
       if (!camera || !canvas) return [];
       const ndc = clientToNDC(clientX, clientY);
@@ -2034,7 +2186,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, clientToNDC]
   );
-  const getGridCoordinates = React6.useCallback(
+  const getGridCoordinates = React3.useCallback(
     (clientX, clientY) => {
       if (!camera || !canvas) return null;
       const ndc = clientToNDC(clientX, clientY);
@@ -2052,7 +2204,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, cellSize, offsetX, offsetZ, clientToNDC]
   );
-  const getTileAtPosition = React6.useCallback(
+  const getTileAtPosition = React3.useCallback(
     (clientX, clientY, scene) => {
       if (!camera || !canvas) return null;
       const tileMeshes = [];
@@ -2387,24 +2539,24 @@ var SpatialHashGrid = class {
 };
 function useTapReveal(options = {}) {
   const { onReveal, onDismiss, refs, enabled = true } = options;
-  const [revealed, setRevealed] = React6.useState(false);
-  const onRevealRef = React6.useRef(onReveal);
-  const onDismissRef = React6.useRef(onDismiss);
+  const [revealed, setRevealed] = React3.useState(false);
+  const onRevealRef = React3.useRef(onReveal);
+  const onDismissRef = React3.useRef(onDismiss);
   onRevealRef.current = onReveal;
   onDismissRef.current = onDismiss;
-  const reveal = React6.useCallback(() => {
+  const reveal = React3.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (!wasRevealed) onRevealRef.current?.();
       return true;
     });
   }, []);
-  const dismiss = React6.useCallback(() => {
+  const dismiss = React3.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (wasRevealed) onDismissRef.current?.();
       return false;
     });
   }, []);
-  const onPointerDown = React6.useCallback(
+  const onPointerDown = React3.useCallback(
     (e) => {
       if (!enabled || e.pointerType === "mouse") return;
       if (revealed) dismiss();
@@ -2412,7 +2564,7 @@ function useTapReveal(options = {}) {
     },
     [enabled, revealed, reveal, dismiss]
   );
-  React6.useEffect(() => {
+  React3.useEffect(() => {
     if (!revealed || typeof document === "undefined") return;
     const onDocDown = (ev) => {
       const target = ev.target;
@@ -2532,7 +2684,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React6__default.default.forwardRef(
+var Box = React3__default.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -2564,20 +2716,20 @@ var Box = React6__default.default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
-    const handleClick = React6.useCallback((e) => {
+    const handleClick = React3.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React6.useCallback((e) => {
+    const handleMouseEnter = React3.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React6.useCallback((e) => {
+    const handleMouseLeave = React3.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }
@@ -2585,19 +2737,19 @@ var Box = React6__default.default.forwardRef(
     }, [hoverEvent, eventBus, onMouseLeave]);
     const { triggerProps } = useTapReveal({
       enabled: tapReveal && !!hoverEvent,
-      onReveal: React6.useCallback(() => {
+      onReveal: React3.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }, [hoverEvent, eventBus]),
-      onDismiss: React6.useCallback(() => {
+      onDismiss: React3.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }, [hoverEvent, eventBus])
     });
-    const handlePointerDown = React6.useCallback((e) => {
+    const handlePointerDown = React3.useCallback((e) => {
       if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
     const isClickable = action || onClick;
-    return React6__default.default.createElement(
+    return React3__default.default.createElement(
       Component2,
       {
         ref,
@@ -2718,7 +2870,7 @@ var Typography = ({
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component2 = as || defaultElements[variant];
-  return React6__default.default.createElement(
+  return React3__default.default.createElement(
     Component2,
     {
       id,
@@ -2791,7 +2943,7 @@ var Stack = ({
   };
   const isHorizontal = direction === "horizontal";
   const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-  return React6__default.default.createElement(
+  return React3__default.default.createElement(
     Component2,
     {
       className: cn(
@@ -3538,10 +3690,10 @@ var Avl3DOrbitalNode = ({
   position,
   onClick
 }) => {
-  const groupRef = React6.useRef(null);
-  const [hovered, setHovered] = React6.useState(false);
-  const scale = React6.useMemo(() => 0.6 + Math.min(traitCount, 8) * 0.3, [traitCount]);
-  const currentScale = React6.useRef(scale);
+  const groupRef = React3.useRef(null);
+  const [hovered, setHovered] = React3.useState(false);
+  const scale = React3.useMemo(() => 0.6 + Math.min(traitCount, 8) * 0.3, [traitCount]);
+  const currentScale = React3.useRef(scale);
   const targetScale = hovered ? scale * 1.06 : scale;
   fiber.useFrame((_, delta) => {
     if (!groupRef.current) return;
@@ -3683,7 +3835,7 @@ var Avl3DCrossWire = ({
   eventName,
   color = AVL_3D_COLORS.crossWire
 }) => {
-  const { tubeArgs, midpoint } = React6.useMemo(() => {
+  const { tubeArgs, midpoint } = React3.useMemo(() => {
     const curve = arcCurve3D(from, to, 2);
     const mid = curve.getPoint(0.5);
     return {
@@ -3722,9 +3874,9 @@ var Avl3DApplicationScene = ({
   data,
   onOrbitalClick
 }) => {
-  const groupRef = React6.useRef(null);
-  const [, setHoverTrigger] = React6.useState(0);
-  const orbitalPositions = React6.useMemo(() => {
+  const groupRef = React3.useRef(null);
+  const [, setHoverTrigger] = React3.useState(0);
+  const orbitalPositions = React3.useMemo(() => {
     const baseRadius = Math.max(4, data.orbitals.length * 1.5);
     if (data.crossLinks.length === 0) {
       return goldenSpiralPositions(data.orbitals.length, baseRadius);
@@ -3737,7 +3889,7 @@ var Avl3DApplicationScene = ({
     })).filter((e) => e.from >= 0 && e.to >= 0);
     return forceDirectedPositions(data.orbitals.length, edges, baseRadius);
   }, [data.orbitals, data.crossLinks]);
-  const positionByName = React6.useMemo(() => {
+  const positionByName = React3.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     data.orbitals.forEach((orb, i) => {
       const pos = orbitalPositions[i];
@@ -3820,7 +3972,7 @@ var Avl3DEntityCore = ({
   position,
   fields
 }) => {
-  const coreRef = React6.useRef(null);
+  const coreRef = React3.useRef(null);
   fiber.useFrame((_, delta) => {
     if (!coreRef.current) return;
     coreRef.current.rotation.y += delta * 0.3;
@@ -3973,8 +4125,8 @@ function TraitOrbit({
   onClick,
   onHover
 }) {
-  const groupRef = React6.useRef(null);
-  const angleRef = React6.useRef(Math.random() * Math.PI * 2);
+  const groupRef = React3.useRef(null);
+  const angleRef = React3.useRef(Math.random() * Math.PI * 2);
   fiber.useFrame((_, delta) => {
     angleRef.current += delta * speed;
     if (!groupRef.current) return;
@@ -4105,9 +4257,9 @@ var Avl3DOrbitalScene = ({
   highlightedTrait,
   onTraitHighlight
 }) => {
-  const [localHighlight, setLocalHighlight] = React6.useState(null);
+  const [localHighlight, setLocalHighlight] = React3.useState(null);
   const activeHighlight = highlightedTrait ?? localHighlight;
-  const traitOrbits = React6.useMemo(() => {
+  const traitOrbits = React3.useMemo(() => {
     return data.traits.map((trait, i) => ({
       name: trait.name,
       radius: 3 + i * 1.2,
@@ -4118,7 +4270,7 @@ var Avl3DOrbitalScene = ({
       transitionCount: trait.transitionCount
     }));
   }, [data.traits]);
-  const pagePositions = React6.useMemo(() => {
+  const pagePositions = React3.useMemo(() => {
     const outerRadius = 3 + data.traits.length * 1.2 + 1.5;
     return data.pages.map((_, i) => {
       const angle = 2 * Math.PI * i / data.pages.length - Math.PI / 2;
@@ -4182,12 +4334,12 @@ var Avl3DStateNode = ({
   outgoingCount = 0,
   onClick
 }) => {
-  const [hovered, setHovered] = React6.useState(false);
+  const [hovered, setHovered] = React3.useState(false);
   const baseColor = active ? AVL_3D_COLORS.stateActive : AVL_3D_COLORS.stateIdle;
   const emissiveColor = active ? AVL_3D_COLORS.stateActive : AVL_3D_COLORS.stateEdge;
   const emissiveIntensity = active ? 2 : hovered ? 0.8 : 0.3;
   const targetScale = hovered ? 1.08 : 1;
-  const currentScale = React6.useRef(1);
+  const currentScale = React3.useRef(1);
   fiber.useFrame((_, delta) => {
     currentScale.current = THREE9.MathUtils.damp(currentScale.current, targetScale, 6, delta);
   });
@@ -4361,8 +4513,8 @@ var Avl3DTransitionArc = ({
   onClick,
   color = AVL_3D_COLORS.transitionArc
 }) => {
-  const [hovered, setHovered] = React6.useState(false);
-  const { tubeArgs, labelPos, guardPos, arrowPos, arrowQuat, effectPositions } = React6.useMemo(() => {
+  const [hovered, setHovered] = React3.useState(false);
+  const { tubeArgs, labelPos, guardPos, arrowPos, arrowQuat, effectPositions } = React3.useMemo(() => {
     const offset = 1.5 + index * 0.8;
     const curve = isSelf ? selfLoopCurve3D(from, 1.2) : arcCurve3D(from, to, offset);
     const mid = curve.getPoint(0.5);
@@ -4495,7 +4647,7 @@ var Avl3DTraitScene = ({
   data,
   onTransitionClick
 }) => {
-  const statePositions = React6.useMemo(() => {
+  const statePositions = React3.useMemo(() => {
     const radius = Math.max(3, data.states.length * 0.8);
     const positions = fibonacciSpherePositions(data.states.length, radius);
     const posMap = /* @__PURE__ */ new Map();
@@ -4505,7 +4657,7 @@ var Avl3DTraitScene = ({
     });
     return posMap;
   }, [data.states]);
-  const transitionIndices = React6.useMemo(() => {
+  const transitionIndices = React3.useMemo(() => {
     const pairCount = /* @__PURE__ */ new Map();
     return data.transitions.map((t) => {
       const key = `${t.from}->${t.to}`;
@@ -4514,7 +4666,7 @@ var Avl3DTraitScene = ({
       return idx;
     });
   }, [data.transitions]);
-  const transitionCounts = React6.useMemo(() => {
+  const transitionCounts = React3.useMemo(() => {
     const incoming = /* @__PURE__ */ new Map();
     const outgoing = /* @__PURE__ */ new Map();
     for (const t of data.transitions) {
@@ -4624,11 +4776,11 @@ var Avl3DExprTree = ({
   expression,
   position
 }) => {
-  const layoutResults = React6.useMemo(() => {
+  const layoutResults = React3.useMemo(() => {
     const origin = { x: position[0], y: position[1], z: position[2] };
     return treeLayout3D(expression, origin, 2.5, 1.5);
   }, [expression, position]);
-  const edges = React6.useMemo(() => {
+  const edges = React3.useMemo(() => {
     const result = [];
     function collectEdges(node, parentPos) {
       const entry = layoutResults.find((r) => r.node === node);
@@ -4908,7 +5060,7 @@ var Avl3DEffects = ({
   const dof = DOF_CONFIG[level];
   const sparkles = SPARKLE_CONFIGS[level];
   const stars = STARS_CONFIG[level];
-  const starsKey = React6.useMemo(() => `stars-${level}`, [level]);
+  const starsKey = React3.useMemo(() => `stars-${level}`, [level]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       drei.Stars,
@@ -4972,16 +5124,16 @@ var DEFAULT_CONFIG2 = {
   modelOverrides: {},
   effectsEnabled: true
 };
-var Avl3DContext = React6.createContext(DEFAULT_CONFIG2);
+var Avl3DContext = React3.createContext(DEFAULT_CONFIG2);
 function useAvl3DConfig() {
-  return React6.useContext(Avl3DContext);
+  return React3.useContext(Avl3DContext);
 }
 function CameraController({ targetPosition, targetLookAt, animated }) {
   const { camera } = fiber.useThree();
-  const targetPosVec = React6.useRef(new THREE9__namespace.Vector3(...targetPosition));
-  const targetLookVec = React6.useRef(new THREE9__namespace.Vector3(...targetLookAt));
-  const isAnimating = React6.useRef(false);
-  React6.useEffect(() => {
+  const targetPosVec = React3.useRef(new THREE9__namespace.Vector3(...targetPosition));
+  const targetLookVec = React3.useRef(new THREE9__namespace.Vector3(...targetLookAt));
+  const isAnimating = React3.useRef(false);
+  React3.useEffect(() => {
     const newTarget = new THREE9__namespace.Vector3(...targetPosition);
     const newLookAt = new THREE9__namespace.Vector3(...targetLookAt);
     if (!newTarget.equals(targetPosVec.current) || !newLookAt.equals(targetLookVec.current)) {
@@ -5010,8 +5162,8 @@ function CameraController({ targetPosition, targetLookAt, animated }) {
   return null;
 }
 function SceneFade({ animating, children }) {
-  const groupRef = React6.useRef(null);
-  const opacityRef = React6.useRef(1);
+  const groupRef = React3.useRef(null);
+  const opacityRef = React3.useRef(1);
   fiber.useFrame((_, delta) => {
     if (!groupRef.current) return;
     const target = animating ? 0 : 1;
@@ -5035,7 +5187,7 @@ var Avl3DViewer = ({
   modelOverrides = {}
 }) => {
   const { t } = hooks.useTranslate();
-  const schema = React6.useMemo(() => {
+  const schema = React3.useMemo(() => {
     if (typeof schemaProp === "string") {
       try {
         return JSON.parse(schemaProp);
@@ -5045,12 +5197,12 @@ var Avl3DViewer = ({
     }
     return schemaProp;
   }, [schemaProp]);
-  const configValue = React6.useMemo(() => ({
+  const configValue = React3.useMemo(() => ({
     modelOverrides,
     effectsEnabled: effects
   }), [modelOverrides, effects]);
-  const [state, dispatch] = React6.useReducer(zoomReducer, initialZoomState);
-  React6.useEffect(() => {
+  const [state, dispatch] = React3.useReducer(zoomReducer, initialZoomState);
+  React3.useEffect(() => {
     if (initialOrbital) {
       dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: initialOrbital, targetPosition: { x: 0, y: 0 } });
       setTimeout(() => dispatch({ type: "ANIMATION_COMPLETE" }), 0);
@@ -5062,35 +5214,35 @@ var Avl3DViewer = ({
       }
     }
   }, [initialOrbital, initialTrait]);
-  React6.useEffect(() => {
+  React3.useEffect(() => {
     onZoomChange?.(state.level, {
       orbital: state.selectedOrbital ?? void 0,
       trait: state.selectedTrait ?? void 0
     });
   }, [state.level, state.selectedOrbital, state.selectedTrait, onZoomChange]);
-  React6.useEffect(() => {
+  React3.useEffect(() => {
     if (!state.animating) return;
     const timer = setTimeout(() => {
       dispatch({ type: "ANIMATION_COMPLETE" });
     }, 800);
     return () => clearTimeout(timer);
   }, [state.animating]);
-  const handleKeyDown = React6.useCallback((e) => {
+  const handleKeyDown = React3.useCallback((e) => {
     if (e.key === "Escape") {
       dispatch({ type: "ZOOM_OUT" });
     }
   }, []);
-  const handleOrbitalClick = React6.useCallback((name) => {
+  const handleOrbitalClick = React3.useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const handleTraitClick = React6.useCallback((name) => {
+  const handleTraitClick = React3.useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const [highlightedTrait, setHighlightedTrait] = React6__default.default.useState(null);
-  const handleTransitionClick = React6.useCallback((index) => {
+  const [highlightedTrait, setHighlightedTrait] = React3__default.default.useState(null);
+  const handleTransitionClick = React3.useCallback((index) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const handleBreadcrumbClick = React6.useCallback((targetLevel) => {
+  const handleBreadcrumbClick = React3.useCallback((targetLevel) => {
     const levelOrder = ["application", "orbital", "trait", "transition"];
     const currentIdx = levelOrder.indexOf(state.level);
     const targetIdx = levelOrder.indexOf(targetLevel);
@@ -5099,7 +5251,7 @@ var Avl3DViewer = ({
     }
   }, [state.level]);
   const cameraConfig = CAMERA_POSITIONS[state.level];
-  const sceneContent = React6.useMemo(() => {
+  const sceneContent = React3.useMemo(() => {
     switch (state.level) {
       case "application": {
         const data = parseApplicationLevel(schema);
@@ -5173,7 +5325,7 @@ var Avl3DViewer = ({
             gap: "xs",
             align: "center",
             className: "absolute top-2 left-2 z-10 bg-surface/80 backdrop-blur rounded-md px-3 py-1.5",
-            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React6__default.default.Fragment, { children: [
+            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React3__default.default.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
               i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
                 Box,