@almadar/ui 2.20.0 → 2.20.6

package/dist/components/organisms/game/three/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React7 = require('react');
+var React21 = require('react');
 var fiber = require('@react-three/fiber');
 var THREE6 = require('three');
 var jsxRuntime = require('react/jsx-runtime');
@@ -12,6 +12,7 @@ var OBJLoader_js = require('three/examples/jsm/loaders/OBJLoader.js');
 var providers = require('@almadar/ui/providers');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var postprocessing = require('@react-three/postprocessing');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -33,7 +34,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React7__default = /*#__PURE__*/_interopDefault(React7);
+var React21__default = /*#__PURE__*/_interopDefault(React21);
 var THREE6__namespace = /*#__PURE__*/_interopNamespace(THREE6);
 
 var __defProp = Object.defineProperty;
@@ -41,8 +42,8 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 function Scene3D({ background = "#1a1a2e", fog, children }) {
   const { scene } = fiber.useThree();
-  const initializedRef = React7.useRef(false);
-  React7.useEffect(() => {
+  const initializedRef = React21.useRef(false);
+  React21.useEffect(() => {
     if (initializedRef.current) return;
     initializedRef.current = true;
     if (background.startsWith("#") || background.startsWith("rgb")) {
@@ -63,7 +64,7 @@ function Scene3D({ background = "#1a1a2e", fog, children }) {
   }, [scene, background, fog]);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 }
-var Camera3D = React7.forwardRef(
+var Camera3D = React21.forwardRef(
   ({
     mode = "isometric",
     position = [10, 10, 10],
@@ -76,10 +77,10 @@ var Camera3D = React7.forwardRef(
     onChange
   }, ref) => {
     const { camera, set, viewport } = fiber.useThree();
-    const controlsRef = React7.useRef(null);
-    const initialPosition = React7.useRef(new THREE6__namespace.Vector3(...position));
-    const initialTarget = React7.useRef(new THREE6__namespace.Vector3(...target));
-    React7.useEffect(() => {
+    const controlsRef = React21.useRef(null);
+    const initialPosition = React21.useRef(new THREE6__namespace.Vector3(...position));
+    const initialTarget = React21.useRef(new THREE6__namespace.Vector3(...target));
+    React21.useEffect(() => {
       let newCamera;
       if (mode === "isometric") {
         const aspect = viewport.aspect;
@@ -110,7 +111,7 @@ var Camera3D = React7.forwardRef(
         onChange(camera);
       }
     });
-    React7.useImperativeHandle(ref, () => ({
+    React21.useImperativeHandle(ref, () => ({
       getCamera: () => camera,
       setPosition: (x, y, z) => {
         camera.position.set(x, y, z);
@@ -251,7 +252,7 @@ function Canvas3DLoadingState({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "canvas-3d-loading__background", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg__grid" }) })
   ] });
 }
-var Canvas3DErrorBoundary = class extends React7.Component {
+var Canvas3DErrorBoundary = class extends React21.Component {
   constructor(props) {
     super(props);
     __publicField(this, "handleReset", () => {
@@ -330,12 +331,12 @@ function detectAssetRoot(modelUrl) {
   return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
 }
 function useGLTFModel(url, resourceBasePath) {
-  const [state, setState] = React7.useState({
+  const [state, setState] = React21.useState({
     model: null,
     isLoading: false,
     error: null
   });
-  React7.useEffect(() => {
+  React21.useEffect(() => {
     if (!url) {
       setState({ model: null, isLoading: false, error: null });
       return;
@@ -384,7 +385,7 @@ function ModelLoader({
   resourceBasePath
 }) {
   const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
-  const model = React7.useMemo(() => {
+  const model = React21.useMemo(() => {
     if (!loadedModel) return null;
     const cloned = loadedModel.clone();
     cloned.traverse((child) => {
@@ -395,13 +396,13 @@ function ModelLoader({
     });
     return cloned;
   }, [loadedModel, castShadow, receiveShadow]);
-  const scaleArray = React7.useMemo(() => {
+  const scaleArray = React21.useMemo(() => {
     if (typeof scale === "number") {
       return [scale, scale, scale];
     }
     return scale;
   }, [scale]);
-  const rotationRad = React7.useMemo(() => {
+  const rotationRad = React21.useMemo(() => {
     return [
       rotation[0] * Math.PI / 180,
       rotation[1] * Math.PI / 180,
@@ -487,8 +488,8 @@ function PhysicsObject3D({
   onGroundHit,
   onCollision
 }) {
-  const groupRef = React7.useRef(null);
-  const physicsStateRef = React7.useRef({
+  const groupRef = React21.useRef(null);
+  const physicsStateRef = React21.useRef({
     id: entityId,
     x: initialPosition[0],
     y: initialPosition[1],
@@ -505,8 +506,8 @@ function PhysicsObject3D({
     mass,
     state: "Active"
   });
-  const groundHitRef = React7.useRef(false);
-  React7.useEffect(() => {
+  const groundHitRef = React21.useRef(false);
+  React21.useEffect(() => {
     if (groupRef.current) {
       groupRef.current.position.set(
         initialPosition[0],
@@ -787,21 +788,21 @@ var DEFAULT_OPTIONS = {
 };
 function useThree3(options = {}) {
   const opts = { ...DEFAULT_OPTIONS, ...options };
-  const containerRef = React7.useRef(null);
-  const canvasRef = React7.useRef(null);
-  const rendererRef = React7.useRef(null);
-  const sceneRef = React7.useRef(null);
-  const cameraRef = React7.useRef(null);
-  const controlsRef = React7.useRef(null);
-  const gridHelperRef = React7.useRef(null);
-  const rafRef = React7.useRef(0);
-  const [isReady, setIsReady] = React7.useState(false);
-  const [dimensions, setDimensions] = React7.useState({ width: 0, height: 0 });
-  const initialCameraPosition = React7.useMemo(
+  const containerRef = React21.useRef(null);
+  const canvasRef = React21.useRef(null);
+  const rendererRef = React21.useRef(null);
+  const sceneRef = React21.useRef(null);
+  const cameraRef = React21.useRef(null);
+  const controlsRef = React21.useRef(null);
+  const gridHelperRef = React21.useRef(null);
+  const rafRef = React21.useRef(0);
+  const [isReady, setIsReady] = React21.useState(false);
+  const [dimensions, setDimensions] = React21.useState({ width: 0, height: 0 });
+  const initialCameraPosition = React21.useMemo(
     () => new THREE6__namespace.Vector3(...opts.cameraPosition),
     []
   );
-  React7.useEffect(() => {
+  React21.useEffect(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
@@ -894,7 +895,7 @@ function useThree3(options = {}) {
       scene.clear();
     };
   }, []);
-  React7.useEffect(() => {
+  React21.useEffect(() => {
     if (!cameraRef.current || !containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
@@ -929,20 +930,20 @@ function useThree3(options = {}) {
       animate();
     }
   }, [opts.cameraMode]);
-  const setCameraPosition = React7.useCallback((x, y, z) => {
+  const setCameraPosition = React21.useCallback((x, y, z) => {
     if (cameraRef.current) {
       cameraRef.current.position.set(x, y, z);
       controlsRef.current?.update();
     }
   }, []);
-  const lookAt = React7.useCallback((x, y, z) => {
+  const lookAt = React21.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 = React7.useCallback(() => {
+  const resetCamera = React21.useCallback(() => {
     if (cameraRef.current) {
       cameraRef.current.position.copy(initialCameraPosition);
       cameraRef.current.lookAt(0, 0, 0);
@@ -952,7 +953,7 @@ function useThree3(options = {}) {
       }
     }
   }, [initialCameraPosition]);
-  const fitView = React7.useCallback(
+  const fitView = React21.useCallback(
     (bounds) => {
       if (!cameraRef.current) return;
       const centerX = (bounds.minX + bounds.maxX) / 2;
@@ -983,20 +984,20 @@ function useThree3(options = {}) {
 }
 function useAssetLoader(options = {}) {
   const { preloadUrls = [], loader: customLoader } = options;
-  const loaderRef = React7.useRef(customLoader || new AssetLoader());
-  const [state, setState] = React7.useState({
+  const loaderRef = React21.useRef(customLoader || new AssetLoader());
+  const [state, setState] = React21.useState({
     isLoading: false,
     progress: 0,
     loaded: 0,
     total: 0,
     errors: []
   });
-  React7.useEffect(() => {
+  React21.useEffect(() => {
     if (preloadUrls.length > 0) {
       preload(preloadUrls);
     }
   }, []);
-  const updateProgress = React7.useCallback((loaded, total) => {
+  const updateProgress = React21.useCallback((loaded, total) => {
     setState((prev) => ({
       ...prev,
       loaded,
@@ -1004,7 +1005,7 @@ function useAssetLoader(options = {}) {
       progress: total > 0 ? Math.round(loaded / total * 100) : 0
     }));
   }, []);
-  const loadModel = React7.useCallback(
+  const loadModel = React21.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -1027,7 +1028,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const loadOBJ = React7.useCallback(
+  const loadOBJ = React21.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -1050,7 +1051,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const loadTexture = React7.useCallback(
+  const loadTexture = React21.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -1073,7 +1074,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const preload = React7.useCallback(
+  const preload = React21.useCallback(
     async (urls) => {
       setState((prev) => ({
         ...prev,
@@ -1112,27 +1113,27 @@ function useAssetLoader(options = {}) {
     },
     [updateProgress]
   );
-  const hasModel = React7.useCallback((url) => {
+  const hasModel = React21.useCallback((url) => {
     return loaderRef.current.hasModel(url);
   }, []);
-  const hasTexture = React7.useCallback((url) => {
+  const hasTexture = React21.useCallback((url) => {
     return loaderRef.current.hasTexture(url);
   }, []);
-  const getModel = React7.useCallback((url) => {
+  const getModel = React21.useCallback((url) => {
     try {
       return loaderRef.current.getModel(url);
     } catch {
       return void 0;
     }
   }, []);
-  const getTexture = React7.useCallback((url) => {
+  const getTexture = React21.useCallback((url) => {
     try {
       return loaderRef.current.getTexture(url);
     } catch {
       return void 0;
     }
   }, []);
-  const clearCache = React7.useCallback(() => {
+  const clearCache = React21.useCallback(() => {
     loaderRef.current.clearCache();
     setState({
       isLoading: false,
@@ -1156,25 +1157,25 @@ function useAssetLoader(options = {}) {
   };
 }
 function useSceneGraph() {
-  const nodesRef = React7.useRef(/* @__PURE__ */ new Map());
-  const addNode = React7.useCallback((node) => {
+  const nodesRef = React21.useRef(/* @__PURE__ */ new Map());
+  const addNode = React21.useCallback((node) => {
     const existing = nodesRef.current.get(node.id);
     if (existing) {
       existing.mesh.removeFromParent();
     }
     nodesRef.current.set(node.id, node);
   }, []);
-  const removeNode = React7.useCallback((id) => {
+  const removeNode = React21.useCallback((id) => {
     const node = nodesRef.current.get(id);
     if (node) {
       node.mesh.removeFromParent();
       nodesRef.current.delete(id);
     }
   }, []);
-  const getNode = React7.useCallback((id) => {
+  const getNode = React21.useCallback((id) => {
     return nodesRef.current.get(id);
   }, []);
-  const updateNodePosition = React7.useCallback(
+  const updateNodePosition = React21.useCallback(
     (id, x, y, z) => {
       const node = nodesRef.current.get(id);
       if (node) {
@@ -1184,7 +1185,7 @@ function useSceneGraph() {
     },
     []
   );
-  const updateNodeGridPosition = React7.useCallback(
+  const updateNodeGridPosition = React21.useCallback(
     (id, gridX, gridZ) => {
       const node = nodesRef.current.get(id);
       if (node) {
@@ -1193,7 +1194,7 @@ function useSceneGraph() {
     },
     []
   );
-  const getNodeAtGrid = React7.useCallback(
+  const getNodeAtGrid = React21.useCallback(
     (x, z, type) => {
       return Array.from(nodesRef.current.values()).find((node) => {
         const matchesGrid = node.gridPosition.x === x && node.gridPosition.z === z;
@@ -1202,10 +1203,10 @@ function useSceneGraph() {
     },
     []
   );
-  const getNodesByType = React7.useCallback((type) => {
+  const getNodesByType = React21.useCallback((type) => {
     return Array.from(nodesRef.current.values()).filter((node) => node.type === type);
   }, []);
-  const getNodesInBounds = React7.useCallback(
+  const getNodesInBounds = React21.useCallback(
     (minX, maxX, minZ, maxZ) => {
       return Array.from(nodesRef.current.values()).filter((node) => {
         const { x, z } = node.gridPosition;
@@ -1214,13 +1215,13 @@ function useSceneGraph() {
     },
     []
   );
-  const clearNodes = React7.useCallback(() => {
+  const clearNodes = React21.useCallback(() => {
     nodesRef.current.forEach((node) => {
       node.mesh.removeFromParent();
     });
     nodesRef.current.clear();
   }, []);
-  const countNodes = React7.useCallback((type) => {
+  const countNodes = React21.useCallback((type) => {
     if (!type) {
       return nodesRef.current.size;
     }
@@ -1242,9 +1243,9 @@ function useSceneGraph() {
 }
 function useRaycaster(options) {
   const { camera, canvas, cellSize = 1, offsetX = 0, offsetZ = 0 } = options;
-  const raycaster = React7.useRef(new THREE6__namespace.Raycaster());
-  const mouse = React7.useRef(new THREE6__namespace.Vector2());
-  const clientToNDC = React7.useCallback(
+  const raycaster = React21.useRef(new THREE6__namespace.Raycaster());
+  const mouse = React21.useRef(new THREE6__namespace.Vector2());
+  const clientToNDC = React21.useCallback(
     (clientX, clientY) => {
       if (!canvas) {
         return { x: 0, y: 0 };
@@ -1257,7 +1258,7 @@ function useRaycaster(options) {
     },
     [canvas]
   );
-  const isWithinCanvas = React7.useCallback(
+  const isWithinCanvas = React21.useCallback(
     (clientX, clientY) => {
       if (!canvas) return false;
       const rect = canvas.getBoundingClientRect();
@@ -1265,7 +1266,7 @@ function useRaycaster(options) {
     },
     [canvas]
   );
-  const getIntersection = React7.useCallback(
+  const getIntersection = React21.useCallback(
     (clientX, clientY, objects) => {
       if (!camera || !canvas) return null;
       const ndc = clientToNDC(clientX, clientY);
@@ -1288,7 +1289,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, clientToNDC]
   );
-  const getAllIntersections = React7.useCallback(
+  const getAllIntersections = React21.useCallback(
     (clientX, clientY, objects) => {
       if (!camera || !canvas) return [];
       const ndc = clientToNDC(clientX, clientY);
@@ -1307,7 +1308,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, clientToNDC]
   );
-  const getGridCoordinates = React7.useCallback(
+  const getGridCoordinates = React21.useCallback(
     (clientX, clientY) => {
       if (!camera || !canvas) return null;
       const ndc = clientToNDC(clientX, clientY);
@@ -1325,7 +1326,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, cellSize, offsetX, offsetZ, clientToNDC]
   );
-  const getTileAtPosition = React7.useCallback(
+  const getTileAtPosition = React21.useCallback(
     (clientX, clientY, scene) => {
       if (!camera || !canvas) return null;
       const tileMeshes = [];
@@ -1441,12 +1442,12 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React7.useContext(providers.EventBusContext);
+  const context = React21.useContext(providers.EventBusContext);
   return context ?? getGlobalEventBus() ?? fallbackEventBus;
 }
 function useEmitEvent() {
   const eventBus = useEventBus();
-  return React7.useCallback(
+  return React21.useCallback(
     (type, payload) => {
       eventBus.emit(type, payload);
     },
@@ -1473,9 +1474,9 @@ function useGameCanvas3DEvents(options) {
     onUnitAnimation
   } = options;
   const emit = useEmitEvent();
-  const optionsRef = React7.useRef(options);
+  const optionsRef = React21.useRef(options);
   optionsRef.current = options;
-  const handleTileClick = React7.useCallback(
+  const handleTileClick = React21.useCallback(
     (tile, event) => {
       if (tileClickEvent) {
         emit(tileClickEvent, {
@@ -1491,7 +1492,7 @@ function useGameCanvas3DEvents(options) {
     },
     [tileClickEvent, emit]
   );
-  const handleUnitClick = React7.useCallback(
+  const handleUnitClick = React21.useCallback(
     (unit, event) => {
       if (unitClickEvent) {
         emit(unitClickEvent, {
@@ -1510,7 +1511,7 @@ function useGameCanvas3DEvents(options) {
     },
     [unitClickEvent, emit]
   );
-  const handleFeatureClick = React7.useCallback(
+  const handleFeatureClick = React21.useCallback(
     (feature, event) => {
       if (featureClickEvent) {
         emit(featureClickEvent, {
@@ -1525,7 +1526,7 @@ function useGameCanvas3DEvents(options) {
     },
     [featureClickEvent, emit]
   );
-  const handleCanvasClick = React7.useCallback(
+  const handleCanvasClick = React21.useCallback(
     (event) => {
       if (canvasClickEvent) {
         emit(canvasClickEvent, {
@@ -1538,7 +1539,7 @@ function useGameCanvas3DEvents(options) {
     },
     [canvasClickEvent, emit]
   );
-  const handleTileHover = React7.useCallback(
+  const handleTileHover = React21.useCallback(
     (tile, event) => {
       if (tile) {
         if (tileHoverEvent) {
@@ -1558,7 +1559,7 @@ function useGameCanvas3DEvents(options) {
     },
     [tileHoverEvent, tileLeaveEvent, emit]
   );
-  const handleUnitAnimation = React7.useCallback(
+  const handleUnitAnimation = React21.useCallback(
     (unitId, state) => {
       if (unitAnimationEvent) {
         emit(unitAnimationEvent, {
@@ -1571,7 +1572,7 @@ function useGameCanvas3DEvents(options) {
     },
     [unitAnimationEvent, emit]
   );
-  const handleCameraChange = React7.useCallback(
+  const handleCameraChange = React21.useCallback(
     (position) => {
       if (cameraChangeEvent) {
         emit(cameraChangeEvent, {
@@ -1617,17 +1618,17 @@ function TileRenderer({
   validMoves = [],
   attackTargets = []
 }) {
-  const meshRef = React7.useRef(null);
-  const geometry = React7.useMemo(() => {
+  const meshRef = React21.useRef(null);
+  const geometry = React21.useMemo(() => {
     return new THREE6__namespace.BoxGeometry(cellSize * 0.95, 0.2, cellSize * 0.95);
   }, [cellSize]);
-  const material = React7.useMemo(() => {
+  const material = React21.useMemo(() => {
     return new THREE6__namespace.MeshStandardMaterial({
       roughness: 0.8,
       metalness: 0.1
     });
   }, []);
-  const { positions, colors, tileMap } = React7.useMemo(() => {
+  const { positions, colors, tileMap } = React21.useMemo(() => {
     const pos = [];
     const cols = [];
     const map = /* @__PURE__ */ new Map();
@@ -1657,7 +1658,7 @@ function TileRenderer({
     });
     return { positions: pos, colors: cols, tileMap: map };
   }, [tiles, cellSize, offsetX, offsetZ, terrainColors, selectedTileIds, validMoves, attackTargets]);
-  React7.useEffect(() => {
+  React21.useEffect(() => {
     if (!meshRef.current || !useInstancing) return;
     const mesh = meshRef.current;
     mesh.count = positions.length;
@@ -1761,10 +1762,10 @@ function TileRenderer({
   return /* @__PURE__ */ jsxRuntime.jsx("group", { children: renderIndividualTiles() });
 }
 function UnitVisual({ unit, position, isSelected, onClick }) {
-  const groupRef = React7.useRef(null);
-  const [animationState, setAnimationState] = React7.useState("idle");
-  const [isHovered, setIsHovered] = React7.useState(false);
-  const teamColor = React7.useMemo(() => {
+  const groupRef = React21.useRef(null);
+  const [animationState, setAnimationState] = React21.useState("idle");
+  const [isHovered, setIsHovered] = React21.useState(false);
+  const teamColor = React21.useMemo(() => {
     if (unit.faction === "player" || unit.team === "player") return 4491519;
     if (unit.faction === "enemy" || unit.team === "enemy") return 16729156;
     if (unit.faction === "neutral" || unit.team === "neutral") return 16777028;
@@ -1776,11 +1777,11 @@ function UnitVisual({ unit, position, isSelected, onClick }) {
       groupRef.current.position.y = y;
     }
   });
-  const healthPercent = React7.useMemo(() => {
+  const healthPercent = React21.useMemo(() => {
     if (unit.health === void 0 || unit.maxHealth === void 0) return 1;
     return Math.max(0, Math.min(1, unit.health / unit.maxHealth));
   }, [unit.health, unit.maxHealth]);
-  const healthColor = React7.useMemo(() => {
+  const healthColor = React21.useMemo(() => {
     if (healthPercent > 0.5) return "#44aa44";
     if (healthPercent > 0.25) return "#aaaa44";
     return "#ff4444";
@@ -1841,7 +1842,7 @@ function UnitRenderer({
   onAnimationStateChange,
   animationSpeed = 1
 }) {
-  const handleUnitClick = React7__default.default.useCallback(
+  const handleUnitClick = React21__default.default.useCallback(
     (unit) => {
       onUnitClick?.(unit);
     },
@@ -2054,10 +2055,10 @@ function detectAssetRoot3(modelUrl) {
   return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
 }
 function useGLTFModel2(url) {
-  const [model, setModel] = React7.useState(null);
-  const [isLoading, setIsLoading] = React7.useState(false);
-  const [error, setError] = React7.useState(null);
-  React7.useEffect(() => {
+  const [model, setModel] = React21.useState(null);
+  const [isLoading, setIsLoading] = React21.useState(false);
+  const [error, setError] = React21.useState(null);
+  React21.useEffect(() => {
     if (!url) {
       setModel(null);
       return;
@@ -2089,9 +2090,9 @@ function FeatureModel({
   onClick,
   onHover
 }) {
-  const groupRef = React7.useRef(null);
+  const groupRef = React21.useRef(null);
   const { model: loadedModel, isLoading } = useGLTFModel2(feature.assetUrl);
-  const model = React7.useMemo(() => {
+  const model = React21.useMemo(() => {
     if (!loadedModel) return null;
     const cloned = loadedModel.clone();
     cloned.scale.setScalar(0.3);
@@ -2209,7 +2210,7 @@ function CameraController({
   onCameraChange
 }) {
   const { camera } = fiber.useThree();
-  React7.useEffect(() => {
+  React21.useEffect(() => {
     if (onCameraChange) {
       onCameraChange({
         x: camera.position.x,
@@ -2220,7 +2221,7 @@ function CameraController({
   }, [camera.position, onCameraChange]);
   return null;
 }
-var GameCanvas3D = React7.forwardRef(
+var GameCanvas3D = React21.forwardRef(
   ({
     tiles = [],
     units = [],
@@ -2265,10 +2266,10 @@ var GameCanvas3D = React7.forwardRef(
     selectedUnitId = null,
     children
   }, ref) => {
-    const containerRef = React7.useRef(null);
-    const controlsRef = React7.useRef(null);
-    const [hoveredTile, setHoveredTile] = React7.useState(null);
-    const [internalError, setInternalError] = React7.useState(null);
+    const containerRef = React21.useRef(null);
+    const controlsRef = React21.useRef(null);
+    const [hoveredTile, setHoveredTile] = React21.useState(null);
+    const [internalError, setInternalError] = React21.useState(null);
     const { isLoading: assetsLoading, progress, loaded, total } = useAssetLoader({
       preloadUrls: preloadAssets,
       loader: customAssetLoader
@@ -2289,7 +2290,7 @@ var GameCanvas3D = React7.forwardRef(
       onTileHover,
       onUnitAnimation
     });
-    const gridBounds = React7.useMemo(() => {
+    const gridBounds = React21.useMemo(() => {
       if (tiles.length === 0) {
         return { minX: 0, maxX: 10, minZ: 0, maxZ: 10 };
       }
@@ -2302,14 +2303,14 @@ var GameCanvas3D = React7.forwardRef(
         maxZ: Math.max(...zs)
       };
     }, [tiles]);
-    const cameraTarget = React7.useMemo(() => {
+    const cameraTarget = React21.useMemo(() => {
       return [
         (gridBounds.minX + gridBounds.maxX) / 2,
         0,
         (gridBounds.minZ + gridBounds.maxZ) / 2
       ];
     }, [gridBounds]);
-    const gridConfig = React7.useMemo(
+    const gridConfig = React21.useMemo(
       () => ({
         ...DEFAULT_GRID_CONFIG,
         offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
@@ -2317,7 +2318,7 @@ var GameCanvas3D = React7.forwardRef(
       }),
       [gridBounds]
     );
-    const gridToWorld2 = React7.useCallback(
+    const gridToWorld2 = React21.useCallback(
       (x, z, y = 0) => {
         const worldX = (x - gridBounds.minX) * gridConfig.cellSize;
         const worldZ = (z - gridBounds.minZ) * gridConfig.cellSize;
@@ -2325,7 +2326,7 @@ var GameCanvas3D = React7.forwardRef(
       },
       [gridBounds, gridConfig]
     );
-    React7.useImperativeHandle(ref, () => ({
+    React21.useImperativeHandle(ref, () => ({
       getCameraPosition: () => {
         if (controlsRef.current) {
           const pos = controlsRef.current.object.position;
@@ -2363,19 +2364,19 @@ var GameCanvas3D = React7.forwardRef(
         features
       })
     }));
-    const handleTileClick = React7.useCallback(
+    const handleTileClick = React21.useCallback(
       (tile, event) => {
         eventHandlers.handleTileClick(tile, event);
       },
       [eventHandlers]
     );
-    const handleUnitClick = React7.useCallback(
+    const handleUnitClick = React21.useCallback(
       (unit, event) => {
         eventHandlers.handleUnitClick(unit, event);
       },
       [eventHandlers]
     );
-    const handleFeatureClick = React7.useCallback(
+    const handleFeatureClick = React21.useCallback(
       (feature, event) => {
         if (event) {
           eventHandlers.handleFeatureClick(feature, event);
@@ -2383,7 +2384,7 @@ var GameCanvas3D = React7.forwardRef(
       },
       [eventHandlers]
     );
-    const handleTileHover = React7.useCallback(
+    const handleTileHover = React21.useCallback(
       (tile, event) => {
         setHoveredTile(tile);
         if (event) {
@@ -2392,7 +2393,7 @@ var GameCanvas3D = React7.forwardRef(
       },
       [eventHandlers]
     );
-    const cameraConfig = React7.useMemo(() => {
+    const cameraConfig = React21.useMemo(() => {
       const size = Math.max(
         gridBounds.maxX - gridBounds.minX,
         gridBounds.maxZ - gridBounds.minZ
@@ -2417,7 +2418,7 @@ var GameCanvas3D = React7.forwardRef(
           };
       }
     }, [cameraMode, gridBounds]);
-    const DefaultTileRenderer = React7.useCallback(
+    const DefaultTileRenderer = React21.useCallback(
       ({ tile, position }) => {
         const isSelected = tile.id ? selectedTileIds.includes(tile.id) : false;
         const isHovered = hoveredTile?.id === tile.id;
@@ -2455,7 +2456,7 @@ var GameCanvas3D = React7.forwardRef(
       },
       [selectedTileIds, hoveredTile, validMoves, attackTargets, handleTileClick, handleTileHover]
     );
-    const DefaultUnitRenderer = React7.useCallback(
+    const DefaultUnitRenderer = React21.useCallback(
       ({ unit, position }) => {
         const isSelected = selectedUnitId === unit.id;
         const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
@@ -2513,7 +2514,7 @@ var GameCanvas3D = React7.forwardRef(
       },
       [selectedUnitId, handleUnitClick]
     );
-    const DefaultFeatureRenderer = React7.useCallback(
+    const DefaultFeatureRenderer = React21.useCallback(
       ({
         feature,
         position
@@ -2820,7 +2821,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React7__default.default.forwardRef(
+var Box = React21__default.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -2849,20 +2850,20 @@ var Box = React7__default.default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
-    const handleClick = React7.useCallback((e) => {
+    const handleClick = React21.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React7.useCallback((e) => {
+    const handleMouseEnter = React21.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React7.useCallback((e) => {
+    const handleMouseLeave = React21.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }
@@ -3364,6 +3365,2418 @@ function normalizeMouseCoordinates(clientX, clientY, element) {
     y: -((clientY - rect.top) / rect.height) * 2 + 1
   };
 }
+
+// components/organisms/avl/avl-schema-parser.ts
+function getEntity(orbital) {
+  const entity = orbital.entity;
+  if (typeof entity === "string") {
+    return { name: entity, fields: [], persistence: "runtime" };
+  }
+  const e = entity;
+  return {
+    name: e.name ?? orbital.name,
+    fields: e.fields ?? [],
+    persistence: e.persistence ?? "runtime"
+  };
+}
+function getTraits(orbital) {
+  if (!orbital.traits) return [];
+  return orbital.traits.map((t) => {
+    if (typeof t === "string") return { name: t };
+    return t;
+  });
+}
+function getPages(orbital) {
+  if (!orbital.pages) return [];
+  return orbital.pages.map((p) => {
+    if (typeof p === "string") return { name: p, path: `/${p.toLowerCase()}` };
+    return p;
+  });
+}
+function getStateMachine(trait) {
+  return trait.stateMachine ?? null;
+}
+function getStates(sm) {
+  return sm.states ?? [];
+}
+function getTransitions(sm) {
+  return sm.transitions ?? [];
+}
+function getEvents(sm) {
+  return sm.events ?? [];
+}
+function getEmits(trait) {
+  const emits = trait.emits;
+  if (!emits) return [];
+  return emits.map((e) => typeof e === "string" ? e : e.event ?? e.name ?? "");
+}
+function getListens(trait) {
+  const listens = trait.listens;
+  if (!listens) return [];
+  return listens.map((l) => typeof l === "string" ? l : l.event ?? "");
+}
+function parseEffectType(effect) {
+  if (Array.isArray(effect)) {
+    const [type, ...args] = effect;
+    return { type: String(type), args };
+  }
+  return { type: "unknown", args: [] };
+}
+function exprToTree(expr) {
+  if (Array.isArray(expr)) {
+    const [op, ...args] = expr;
+    return {
+      label: String(op),
+      type: "operator",
+      children: args.map((a) => exprToTree(a))
+    };
+  }
+  if (typeof expr === "string") {
+    if (expr.startsWith("@")) {
+      return { label: expr, type: "binding" };
+    }
+    return { label: expr, type: "literal" };
+  }
+  return { label: String(expr), type: "literal" };
+}
+function parseApplicationLevel(schema) {
+  const orbitals = [];
+  const crossLinks = [];
+  const count = schema.orbitals.length;
+  const cols = Math.ceil(Math.sqrt(count));
+  const rows = Math.ceil(count / cols);
+  const spacing = 200;
+  const gridW = cols * spacing;
+  const gridH = rows * spacing;
+  const originX = (600 - gridW) / 2 + spacing / 2;
+  const originY = (400 - gridH) / 2 + spacing / 2;
+  schema.orbitals.forEach((orbital, i) => {
+    const entity = getEntity(orbital);
+    const traits = getTraits(orbital);
+    const pages = getPages(orbital);
+    orbitals.push({
+      name: orbital.name,
+      entityName: entity.name,
+      fieldCount: entity.fields.length,
+      persistence: entity.persistence,
+      traitNames: traits.map((t) => t.name ?? ""),
+      pageNames: pages.map((p) => p.name ?? ""),
+      position: {
+        x: originX + i % cols * spacing,
+        y: originY + Math.floor(i / cols) * spacing
+      }
+    });
+  });
+  const emitMap = [];
+  const listenMap = [];
+  for (const orbital of schema.orbitals) {
+    for (const traitRef of getTraits(orbital)) {
+      const traitName = traitRef.name ?? "";
+      for (const event of getEmits(traitRef)) {
+        emitMap.push({ orbital: orbital.name, trait: traitName, event });
+      }
+      for (const event of getListens(traitRef)) {
+        listenMap.push({ orbital: orbital.name, trait: traitName, event });
+      }
+    }
+  }
+  for (const emit of emitMap) {
+    for (const listen of listenMap) {
+      if (emit.event === listen.event && emit.orbital !== listen.orbital) {
+        crossLinks.push({
+          emitterOrbital: emit.orbital,
+          listenerOrbital: listen.orbital,
+          eventName: emit.event,
+          emitterTrait: emit.trait,
+          listenerTrait: listen.trait
+        });
+      }
+    }
+  }
+  return { orbitals, crossLinks };
+}
+function parseOrbitalLevel(schema, orbitalName) {
+  const orbital = schema.orbitals.find((o) => o.name === orbitalName);
+  if (!orbital) return null;
+  const entity = getEntity(orbital);
+  const traits = getTraits(orbital);
+  const pages = getPages(orbital);
+  const fields = entity.fields.map((f) => ({
+    name: f.name ?? "",
+    type: f.type ?? "string",
+    required: f.required ?? false,
+    hasDefault: f.default !== void 0
+  }));
+  const traitInfos = traits.map((t) => {
+    const sm = getStateMachine(t);
+    return {
+      name: t.name ?? "",
+      stateCount: sm ? getStates(sm).length : 0,
+      eventCount: sm ? getEvents(sm).length : 0,
+      transitionCount: sm ? getTransitions(sm).length : 0,
+      emits: getEmits(t),
+      listens: getListens(t)
+    };
+  });
+  const pageInfos = pages.map((p) => ({
+    name: p.name ?? "",
+    route: p.path ?? `/${(p.name ?? "").toLowerCase()}`
+  }));
+  const externalLinks = [];
+  const thisTraitEmits = traits.flatMap((t) => getEmits(t).map((e) => ({ trait: t.name ?? "", event: e })));
+  const thisTraitListens = traits.flatMap((t) => getListens(t).map((e) => ({ trait: t.name ?? "", event: e })));
+  for (const other of schema.orbitals) {
+    if (other.name === orbitalName) continue;
+    const otherTraits = getTraits(other);
+    const otherListens = otherTraits.flatMap((t) => getListens(t));
+    const otherEmits = otherTraits.flatMap((t) => getEmits(t));
+    for (const emit of thisTraitEmits) {
+      if (otherListens.includes(emit.event)) {
+        externalLinks.push({
+          targetOrbital: other.name,
+          eventName: emit.event,
+          direction: "out",
+          traitName: emit.trait
+        });
+      }
+    }
+    for (const listen of thisTraitListens) {
+      if (otherEmits.includes(listen.event)) {
+        externalLinks.push({
+          targetOrbital: other.name,
+          eventName: listen.event,
+          direction: "in",
+          traitName: listen.trait
+        });
+      }
+    }
+  }
+  return {
+    name: orbital.name,
+    entity: {
+      name: entity.name,
+      fields,
+      persistence: entity.persistence
+    },
+    traits: traitInfos,
+    pages: pageInfos,
+    externalLinks
+  };
+}
+function parseTraitLevel(schema, orbitalName, traitName) {
+  const orbital = schema.orbitals.find((o) => o.name === orbitalName);
+  if (!orbital) return null;
+  const traits = getTraits(orbital);
+  const trait = traits.find((t) => t.name === traitName);
+  if (!trait) return null;
+  const sm = getStateMachine(trait);
+  if (!sm) return null;
+  const states = getStates(sm).map((s) => ({
+    name: s.name ?? "",
+    isInitial: s.isInitial ?? false,
+    isTerminal: s.isTerminal ?? false
+  }));
+  const transitions = getTransitions(sm).map((t, i) => ({
+    from: t.from ?? "",
+    to: t.to ?? "",
+    event: t.event ?? "",
+    guard: t.guard,
+    effects: (t.effects ?? []).map(parseEffectType),
+    index: i
+  }));
+  const entity = getEntity(orbital);
+  return {
+    name: traitName,
+    linkedEntity: entity.name,
+    states,
+    transitions,
+    emittedEvents: getEmits(trait),
+    listenedEvents: getListens(trait)
+  };
+}
+function parseTransitionLevel(schema, orbitalName, traitName, transitionIndex) {
+  const traitData = parseTraitLevel(schema, orbitalName, traitName);
+  if (!traitData) return null;
+  const transition = traitData.transitions[transitionIndex];
+  if (!transition) return null;
+  const guard = transition.guard ? exprToTree(transition.guard) : null;
+  const effects = transition.effects.map(
+    (e) => exprToTree([e.type, ...e.args])
+  );
+  const slotTargets = transition.effects.filter((e) => e.type === "render-ui").map((e) => ({
+    name: String(e.args[0] ?? "main"),
+    pattern: typeof e.args[1] === "object" && e.args[1] !== null ? e.args[1].type ?? "unknown" : String(e.args[1] ?? "unknown")
+  }));
+  return {
+    from: transition.from,
+    to: transition.to,
+    event: transition.event,
+    guard,
+    effects,
+    slotTargets
+  };
+}
+
+// components/organisms/avl/avl-zoom-state.ts
+var initialZoomState = {
+  level: "application",
+  selectedOrbital: null,
+  selectedTrait: null,
+  selectedTransition: null,
+  animating: false,
+  animationDirection: "in",
+  animationTarget: null
+};
+function zoomReducer(state, action) {
+  switch (action.type) {
+    case "ZOOM_INTO_ORBITAL": {
+      if (state.level !== "application" || state.animating) return state;
+      return {
+        ...state,
+        animating: true,
+        animationDirection: "in",
+        animationTarget: { x: action.targetPosition.x, y: action.targetPosition.y, scale: 3 },
+        selectedOrbital: action.orbital
+      };
+    }
+    case "ZOOM_INTO_TRAIT": {
+      if (state.level !== "orbital" || state.animating) return state;
+      return {
+        ...state,
+        animating: true,
+        animationDirection: "in",
+        animationTarget: { x: action.targetPosition.x, y: action.targetPosition.y, scale: 3 },
+        selectedTrait: action.trait
+      };
+    }
+    case "ZOOM_INTO_TRANSITION": {
+      if (state.level !== "trait" || state.animating) return state;
+      return {
+        ...state,
+        animating: true,
+        animationDirection: "in",
+        animationTarget: { x: action.targetPosition.x, y: action.targetPosition.y, scale: 3 },
+        selectedTransition: action.transitionIndex
+      };
+    }
+    case "ZOOM_OUT": {
+      if (state.level === "application" || state.animating) return state;
+      return {
+        ...state,
+        animating: true,
+        animationDirection: "out",
+        animationTarget: { x: 300, y: 200, scale: 0.3 }
+      };
+    }
+    case "ANIMATION_COMPLETE": {
+      if (!state.animating) return state;
+      if (state.animationDirection === "in") {
+        const nextLevel = state.level === "application" ? "orbital" : state.level === "orbital" ? "trait" : "transition";
+        return {
+          ...state,
+          level: nextLevel,
+          animating: false,
+          animationTarget: null
+        };
+      }
+      if (state.level === "transition") {
+        return {
+          ...state,
+          level: "trait",
+          selectedTransition: null,
+          animating: false,
+          animationTarget: null
+        };
+      }
+      if (state.level === "trait") {
+        return {
+          ...state,
+          level: "orbital",
+          selectedTrait: null,
+          animating: false,
+          animationTarget: null
+        };
+      }
+      if (state.level === "orbital") {
+        return {
+          ...state,
+          level: "application",
+          selectedOrbital: null,
+          animating: false,
+          animationTarget: null
+        };
+      }
+      return state;
+    }
+    case "SWITCH_TRAIT": {
+      if (state.level !== "trait" || state.animating) return state;
+      return {
+        ...state,
+        selectedTrait: action.trait,
+        selectedTransition: null
+      };
+    }
+    case "RESET": {
+      return initialZoomState;
+    }
+    default:
+      return state;
+  }
+}
+function getBreadcrumbs(state) {
+  const crumbs = [{ label: "Application", level: "application" }];
+  if (state.selectedOrbital) {
+    crumbs.push({ label: state.selectedOrbital, level: "orbital" });
+  }
+  if (state.selectedTrait) {
+    crumbs.push({ label: state.selectedTrait, level: "trait" });
+  }
+  if (state.selectedTransition !== null) {
+    crumbs.push({ label: `Transition #${state.selectedTransition}`, level: "transition" });
+  }
+  return crumbs;
+}
+var AVL_3D_COLORS = {
+  // Orbital node: deep indigo body with soft cyan-blue rim glow
+  orbitalSphere: "#161b2e",
+  orbitalRim: "#5b9bd5",
+  // Entity core: warm amber-gold (slightly desaturated for dark bg)
+  entityCore: "#f0c040",
+  entityCoreGlow: "#ffd866",
+  // Trait orbit ring
+  traitOrbit: "#5b9bd5",
+  traitOrbitHighlight: "#7ab8f5",
+  // State nodes
+  stateIdle: "#1e2a3a",
+  stateEdge: "#5b9bd5",
+  stateActive: "#4ecb71",
+  // Transitions: warm copper-orange
+  transitionArc: "#e0944a",
+  transitionArcHover: "#f0a860",
+  // Guards
+  guardPass: "#4ecb71",
+  guardFail: "#f06060",
+  // Cross-orbital wires: soft lavender
+  crossWire: "#a78bda",
+  crossWireGlow: "#c4a8f0",
+  // Page portals: soft teal
+  pagePortal: "#40c8aa",
+  // Background: deep navy with blue undertone (not pure black)
+  background: "#0c1222",
+  backgroundSurface: "#111a2e",
+  // Fog: matches background for seamless fade
+  fog: "#0c1222",
+  // Sparkle/particle accent
+  sparkle: "#7ab8f5",
+  sparkleWarm: "#f0c040"
+};
+var GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
+function goldenSpiralPositions(count, baseRadius) {
+  if (count === 0) return [];
+  if (count === 1) return [{ x: 0, y: 0, z: 0 }];
+  const positions = [];
+  for (let i = 0; i < count; i++) {
+    const angle = i * GOLDEN_ANGLE;
+    const r = baseRadius * Math.sqrt(i / count);
+    positions.push({
+      x: r * Math.cos(angle),
+      y: 0,
+      z: r * Math.sin(angle)
+    });
+  }
+  return positions;
+}
+function forceDirectedPositions(count, edges, baseRadius, iterations = 80) {
+  if (count === 0) return [];
+  if (count === 1) return [{ x: 0, y: 0, z: 0 }];
+  const positions = goldenSpiralPositions(count, baseRadius);
+  const repulsionStrength = baseRadius * baseRadius * 0.5;
+  const attractionStrength = 0.15;
+  const damping = 0.85;
+  const velocities = positions.map(() => ({ x: 0, y: 0, z: 0 }));
+  for (let iter = 0; iter < iterations; iter++) {
+    for (let i = 0; i < count; i++) {
+      for (let j = i + 1; j < count; j++) {
+        const dx = positions[i].x - positions[j].x;
+        const dz = positions[i].z - positions[j].z;
+        const distSq = dx * dx + dz * dz + 0.01;
+        const force = repulsionStrength / distSq;
+        const dist = Math.sqrt(distSq);
+        const fx = dx / dist * force;
+        const fz = dz / dist * force;
+        velocities[i].x += fx;
+        velocities[i].z += fz;
+        velocities[j].x -= fx;
+        velocities[j].z -= fz;
+      }
+    }
+    for (const edge of edges) {
+      const dx = positions[edge.to].x - positions[edge.from].x;
+      const dz = positions[edge.to].z - positions[edge.from].z;
+      const dist = Math.sqrt(dx * dx + dz * dz + 0.01);
+      const force = dist * attractionStrength;
+      const fx = dx / dist * force;
+      const fz = dz / dist * force;
+      velocities[edge.from].x += fx;
+      velocities[edge.from].z += fz;
+      velocities[edge.to].x -= fx;
+      velocities[edge.to].z -= fz;
+    }
+    for (let i = 0; i < count; i++) {
+      positions[i].x += velocities[i].x * 0.1;
+      positions[i].z += velocities[i].z * 0.1;
+      velocities[i].x *= damping;
+      velocities[i].z *= damping;
+    }
+  }
+  let cx = 0, cz = 0;
+  for (const p of positions) {
+    cx += p.x;
+    cz += p.z;
+  }
+  cx /= count;
+  cz /= count;
+  for (const p of positions) {
+    p.x -= cx;
+    p.z -= cz;
+  }
+  return positions;
+}
+function fibonacciSpherePositions(count, radius) {
+  if (count === 0) return [];
+  if (count === 1) return [{ x: 0, y: 0, z: 0 }];
+  const positions = [];
+  for (let i = 0; i < count; i++) {
+    const y = 1 - 2 * i / (count - 1);
+    const radiusAtY = Math.sqrt(1 - y * y);
+    const theta = GOLDEN_ANGLE * i;
+    positions.push({
+      x: radius * radiusAtY * Math.cos(theta),
+      y: radius * y,
+      z: radius * radiusAtY * Math.sin(theta)
+    });
+  }
+  return positions;
+}
+function orbitRingPositions(count, radius, tilt) {
+  if (count === 0) return [];
+  const positions = [];
+  const step = 2 * Math.PI / count;
+  for (let i = 0; i < count; i++) {
+    const angle = i * step;
+    const x = radius * Math.cos(angle);
+    const flatZ = radius * Math.sin(angle);
+    const y = flatZ * Math.sin(tilt);
+    const z = flatZ * Math.cos(tilt);
+    positions.push({ x, y, z });
+  }
+  return positions;
+}
+function arcCurve3D(from, to, offset) {
+  const start = new THREE6.Vector3(...from);
+  const end = new THREE6.Vector3(...to);
+  const mid = new THREE6.Vector3().addVectors(start, end).multiplyScalar(0.5);
+  const dir = new THREE6.Vector3().subVectors(end, start).normalize();
+  const up = new THREE6.Vector3(0, 1, 0);
+  const perp = new THREE6.Vector3().crossVectors(dir, up).normalize();
+  if (perp.length() < 1e-3) {
+    perp.crossVectors(dir, new THREE6.Vector3(1, 0, 0)).normalize();
+  }
+  const control = mid.clone().add(perp.multiplyScalar(offset));
+  control.y += Math.abs(offset) * 0.3;
+  return new THREE6.QuadraticBezierCurve3(start, control, end);
+}
+function selfLoopCurve3D(position, loopRadius) {
+  const base = new THREE6.Vector3(...position);
+  const start = base.clone().add(new THREE6.Vector3(-loopRadius * 0.3, 0, 0));
+  const end = base.clone().add(new THREE6.Vector3(loopRadius * 0.3, 0, 0));
+  const control = base.clone().add(new THREE6.Vector3(0, loopRadius, 0));
+  return new THREE6.QuadraticBezierCurve3(start, control, end);
+}
+function treeLayout3D(node, origin, horizontalSpacing, verticalSpacing = 2) {
+  const results = [];
+  function layoutNode(n, pos, depth) {
+    results.push({ node: n, position: pos });
+    if (!n.children || n.children.length === 0) return;
+    const childCount = n.children.length;
+    const totalWidth = (childCount - 1) * horizontalSpacing / (depth + 1);
+    const startX = pos.x - totalWidth / 2;
+    for (let i = 0; i < childCount; i++) {
+      const childPos = {
+        x: startX + i * totalWidth / Math.max(childCount - 1, 1),
+        y: pos.y - verticalSpacing,
+        z: pos.z
+      };
+      layoutNode(n.children[i], childPos, depth + 1);
+    }
+  }
+  layoutNode(node, origin, 0);
+  return results;
+}
+var CAMERA_POSITIONS = {
+  application: { position: [0, 20, 30], target: [0, 0, 0] },
+  orbital: { position: [0, 8, 12], target: [0, 0, 0] },
+  trait: { position: [0, 6, 10], target: [0, 0, 0] },
+  transition: { position: [0, 4, 8], target: [0, 0, 0] }
+};
+var Avl3DLabel = ({
+  position,
+  text,
+  color = "#ffffff",
+  fontSize = 12,
+  className,
+  occlude = false
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    drei.Html,
+    {
+      position,
+      center: true,
+      distanceFactor: 10,
+      occlude: occlude ? "blending" : void 0,
+      className,
+      style: { pointerEvents: "none" },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Typography,
+        {
+          variant: "small",
+          style: {
+            color,
+            fontSize: `${fontSize}px`,
+            whiteSpace: "nowrap",
+            textShadow: "0 0 4px rgba(0,0,0,0.8)",
+            userSelect: "none"
+          },
+          children: text
+        }
+      )
+    }
+  );
+};
+Avl3DLabel.displayName = "Avl3DLabel";
+var Avl3DTooltip = ({
+  position,
+  title,
+  rows,
+  accentColor = "#5b9bd5"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    drei.Html,
+    {
+      position,
+      center: true,
+      distanceFactor: 8,
+      style: { pointerEvents: "none" },
+      zIndexRange: [100, 0],
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Box,
+        {
+          style: {
+            background: "rgba(12, 18, 34, 0.92)",
+            backdropFilter: "blur(8px)",
+            borderLeft: `3px solid ${accentColor}`,
+            borderRadius: "6px",
+            padding: "8px 12px",
+            minWidth: "140px",
+            maxWidth: "220px",
+            boxShadow: "0 4px 20px rgba(0,0,0,0.4)"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Typography,
+              {
+                variant: "small",
+                style: {
+                  color: "#ffffff",
+                  fontWeight: 600,
+                  fontSize: "12px",
+                  lineHeight: 1.3
+                },
+                children: title
+              }
+            ),
+            rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(
+              Box,
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  gap: "12px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Typography,
+                    {
+                      variant: "small",
+                      style: {
+                        color: "#8899bb",
+                        fontSize: "10px",
+                        whiteSpace: "nowrap"
+                      },
+                      children: row.label
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Typography,
+                    {
+                      variant: "small",
+                      style: {
+                        color: "#ccddf0",
+                        fontSize: "10px",
+                        fontWeight: 500,
+                        textAlign: "right"
+                      },
+                      children: row.value
+                    }
+                  )
+                ]
+              },
+              row.label
+            ))
+          ] })
+        }
+      )
+    }
+  );
+};
+Avl3DTooltip.displayName = "Avl3DTooltip";
+var Avl3DOrbitalNode = ({
+  name,
+  entityName,
+  traitCount,
+  pageCount = 0,
+  persistence = "persistent",
+  position,
+  onClick
+}) => {
+  const groupRef = React21.useRef(null);
+  const [hovered, setHovered] = React21.useState(false);
+  const scale = React21.useMemo(() => 0.6 + Math.min(traitCount, 8) * 0.3, [traitCount]);
+  const currentScale = React21.useRef(scale);
+  const targetScale = hovered ? scale * 1.06 : scale;
+  fiber.useFrame((_, delta) => {
+    if (!groupRef.current) return;
+    groupRef.current.rotation.y += delta * (hovered ? 0.4 : 0.2);
+    groupRef.current.rotation.x += delta * 0.05;
+    currentScale.current = THREE6.MathUtils.damp(currentScale.current, targetScale, 6, delta);
+  });
+  const baseBrightness = 0.3 + Math.min(pageCount, 5) * 0.05;
+  const emissiveIntensity = hovered ? 0.8 : baseBrightness;
+  return /* @__PURE__ */ jsxRuntime.jsxs("group", { position, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("mesh", { scale: scale * 1.3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("sphereGeometry", { args: [1, 16, 16] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.orbitalRim,
+          emissive: AVL_3D_COLORS.orbitalRim,
+          emissiveIntensity: hovered ? 0.2 : 0.06,
+          transparent: true,
+          opacity: hovered ? 0.08 : 0.03,
+          depthWrite: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("group", { ref: groupRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "mesh",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onClick?.();
+          },
+          onPointerOver: (e) => {
+            e.stopPropagation();
+            setHovered(true);
+            document.body.style.cursor = "pointer";
+          },
+          onPointerOut: () => {
+            setHovered(false);
+            document.body.style.cursor = "auto";
+          },
+          scale: currentScale.current,
+          rotation: [Math.PI / 4, 0, 0],
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("torusGeometry", { args: [1, 0.18, 24, 64] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "meshStandardMaterial",
+              {
+                color: AVL_3D_COLORS.orbitalSphere,
+                emissive: AVL_3D_COLORS.orbitalRim,
+                emissiveIntensity,
+                roughness: 0.2,
+                metalness: 0.7
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "mesh",
+        {
+          scale: scale * 0.9,
+          rotation: [Math.PI / 2 + 0.3, Math.PI / 5, 0],
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("torusGeometry", { args: [1, 0.06, 12, 64] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "meshStandardMaterial",
+              {
+                color: AVL_3D_COLORS.traitOrbit,
+                emissive: AVL_3D_COLORS.traitOrbit,
+                emissiveIntensity: 0.25,
+                transparent: true,
+                opacity: 0.4
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("mesh", { scale: scale * 0.25, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("icosahedronGeometry", { args: [1, 1] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.entityCore,
+          emissive: AVL_3D_COLORS.entityCoreGlow,
+          emissiveIntensity: 2,
+          roughness: 0.1
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "pointLight",
+      {
+        color: AVL_3D_COLORS.entityCoreGlow,
+        intensity: 0.5,
+        distance: 3,
+        decay: 2
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Avl3DLabel,
+      {
+        position: [0, scale + 0.6, 0],
+        text: name,
+        color: "#ffffff",
+        fontSize: hovered ? 14 : 12
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Avl3DLabel,
+      {
+        position: [0, -(scale + 0.4), 0],
+        text: entityName,
+        color: "#999999",
+        fontSize: 10
+      }
+    ),
+    hovered && /* @__PURE__ */ jsxRuntime.jsx(
+      Avl3DTooltip,
+      {
+        position: [scale + 1.2, 0.3, 0],
+        title: name,
+        accentColor: AVL_3D_COLORS.orbitalRim,
+        rows: [
+          { label: "Entity", value: entityName },
+          { label: "Persistence", value: persistence },
+          { label: "Traits", value: String(traitCount) },
+          { label: "Pages", value: String(pageCount) }
+        ]
+      }
+    )
+  ] });
+};
+Avl3DOrbitalNode.displayName = "Avl3DOrbitalNode";
+var Avl3DCrossWire = ({
+  from,
+  to,
+  eventName,
+  color = AVL_3D_COLORS.crossWire
+}) => {
+  const { tubeArgs, midpoint } = React21.useMemo(() => {
+    const curve = arcCurve3D(from, to, 2);
+    const mid = curve.getPoint(0.5);
+    return {
+      tubeArgs: [curve, 32, 0.03, 8, false],
+      midpoint: [mid.x, mid.y, mid.z]
+    };
+  }, [from, to]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("group", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("mesh", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("tubeGeometry", { args: [...tubeArgs] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "meshStandardMaterial",
+        {
+          color,
+          emissive: color,
+          emissiveIntensity: 0.4,
+          transparent: true,
+          opacity: 0.6,
+          roughness: 0.5
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Avl3DLabel,
+      {
+        position: midpoint,
+        text: eventName,
+        color,
+        fontSize: 9
+      }
+    )
+  ] });
+};
+Avl3DCrossWire.displayName = "Avl3DCrossWire";
+var Avl3DApplicationScene = ({
+  data,
+  onOrbitalClick
+}) => {
+  const groupRef = React21.useRef(null);
+  const [, setHoverTrigger] = React21.useState(0);
+  const orbitalPositions = React21.useMemo(() => {
+    const baseRadius = Math.max(4, data.orbitals.length * 1.5);
+    if (data.crossLinks.length === 0) {
+      return goldenSpiralPositions(data.orbitals.length, baseRadius);
+    }
+    const nameToIdx = /* @__PURE__ */ new Map();
+    data.orbitals.forEach((o, i) => nameToIdx.set(o.name, i));
+    const edges = data.crossLinks.map((link) => ({
+      from: nameToIdx.get(link.emitterOrbital) ?? -1,
+      to: nameToIdx.get(link.listenerOrbital) ?? -1
+    })).filter((e) => e.from >= 0 && e.to >= 0);
+    return forceDirectedPositions(data.orbitals.length, edges, baseRadius);
+  }, [data.orbitals, data.crossLinks]);
+  const positionByName = React21.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    data.orbitals.forEach((orb, i) => {
+      const pos = orbitalPositions[i];
+      map.set(orb.name, [pos.x, pos.y, pos.z]);
+    });
+    return map;
+  }, [data.orbitals, orbitalPositions]);
+  fiber.useFrame((_, delta) => {
+    if (!groupRef.current) return;
+    groupRef.current.rotation.y += delta * 0.03;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("group", { ref: groupRef, children: [
+    data.orbitals.map((orbital, i) => {
+      const pos = orbitalPositions[i];
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Avl3DOrbitalNode,
+        {
+          name: orbital.name,
+          entityName: orbital.entityName,
+          traitCount: orbital.traitNames.length,
+          pageCount: orbital.pageNames.length,
+          persistence: orbital.persistence,
+          position: [pos.x, pos.y, pos.z],
+          onClick: () => {
+            onOrbitalClick?.(orbital.name);
+            setHoverTrigger((v) => v + 1);
+          }
+        },
+        orbital.name
+      );
+    }),
+    data.crossLinks.map((link, i) => {
+      const fromPos = positionByName.get(link.emitterOrbital);
+      const toPos = positionByName.get(link.listenerOrbital);
+      if (!fromPos || !toPos) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Avl3DCrossWire,
+        {
+          from: fromPos,
+          to: toPos,
+          eventName: link.eventName
+        },
+        `${link.emitterOrbital}-${link.eventName}-${link.listenerOrbital}-${i}`
+      );
+    })
+  ] });
+};
+Avl3DApplicationScene.displayName = "Avl3DApplicationScene";
+function fieldPositions(count, radius) {
+  const positions = [];
+  const goldenAngle = Math.PI * (3 - Math.sqrt(5));
+  for (let i = 0; i < Math.min(count, 12); i++) {
+    const y = 1 - 2 * i / Math.max(count - 1, 1);
+    const r = Math.sqrt(1 - y * y);
+    const theta = goldenAngle * i;
+    positions.push([
+      radius * r * Math.cos(theta),
+      radius * y,
+      radius * r * Math.sin(theta)
+    ]);
+  }
+  return positions;
+}
+function persistenceColor(persistence) {
+  switch (persistence) {
+    case "persistent":
+      return "#4A90D9";
+    case "runtime":
+      return "#27AE60";
+    case "singleton":
+      return "#E8913A";
+    default:
+      return "#999999";
+  }
+}
+var Avl3DEntityCore = ({
+  name,
+  fieldCount,
+  persistence,
+  position,
+  fields
+}) => {
+  const coreRef = React21.useRef(null);
+  fiber.useFrame((_, delta) => {
+    if (!coreRef.current) return;
+    coreRef.current.rotation.y += delta * 0.3;
+    coreRef.current.rotation.x += delta * 0.1;
+  });
+  const fieldPos = fieldPositions(fieldCount, 1.4);
+  const pColor = persistenceColor(persistence);
+  return /* @__PURE__ */ jsxRuntime.jsxs("group", { position, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("mesh", { ref: coreRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("icosahedronGeometry", { args: [1, 2] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.entityCore,
+          emissive: AVL_3D_COLORS.entityCoreGlow,
+          emissiveIntensity: 2,
+          roughness: 0.15,
+          metalness: 0.85
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("mesh", { scale: 1.2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("sphereGeometry", { args: [1, 24, 24] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.entityCoreGlow,
+          emissive: AVL_3D_COLORS.entityCoreGlow,
+          emissiveIntensity: 0.6,
+          transparent: true,
+          opacity: 0.1,
+          depthWrite: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("mesh", { scale: 1.6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("sphereGeometry", { args: [1, 16, 16] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.entityCore,
+          emissive: AVL_3D_COLORS.entityCore,
+          emissiveIntensity: 0.2,
+          transparent: true,
+          opacity: 0.04,
+          depthWrite: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "pointLight",
+      {
+        color: AVL_3D_COLORS.entityCoreGlow,
+        intensity: 2.5,
+        distance: 10,
+        decay: 2
+      }
+    ),
+    fieldPos.map((pos, i) => {
+      const fieldType = fields?.[i];
+      return /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: pos, scale: 0.08, rotation: [Math.PI / 6, Math.PI / 4, 0], children: [
+        fieldType === "number" ? /* @__PURE__ */ jsxRuntime.jsx("tetrahedronGeometry", { args: [1, 0] }) : fieldType === "boolean" ? /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [1.2, 1.2, 1.2] }) : fieldType === "date" ? /* @__PURE__ */ jsxRuntime.jsx("octahedronGeometry", { args: [1, 0] }) : fieldType === "enum" ? /* @__PURE__ */ jsxRuntime.jsx("torusGeometry", { args: [0.8, 0.3, 6, 12] }) : fieldType === "object" ? /* @__PURE__ */ jsxRuntime.jsx("dodecahedronGeometry", { args: [1, 0] }) : fieldType === "array" ? /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.8, 0.8, 1.5, 6] }) : (
+          // string (default): sphere
+          /* @__PURE__ */ jsxRuntime.jsx("sphereGeometry", { args: [1, 8, 8] })
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "meshStandardMaterial",
+          {
+            color: "#ffffff",
+            emissive: "#ffffff",
+            emissiveIntensity: 0.8,
+            transparent: true,
+            opacity: 0.7
+          }
+        )
+      ] }, i);
+    }),
+    persistence === "singleton" ? (
+      // Singleton: double concentric rings (thick outer + thin inner)
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
+          /* @__PURE__ */ jsxRuntime.jsx("torusGeometry", { args: [1.6, 0.04, 8, 64] }),
+          /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: pColor, emissive: pColor, emissiveIntensity: 0.6, transparent: true, opacity: 0.6 })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
+          /* @__PURE__ */ jsxRuntime.jsx("torusGeometry", { args: [1.4, 0.02, 8, 64] }),
+          /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: pColor, emissive: pColor, emissiveIntensity: 0.4, transparent: true, opacity: 0.4 })
+        ] })
+      ] })
+    ) : persistence === "runtime" ? (
+      // Runtime: segmented ring (8 arc segments with gaps)
+      /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 8 }).map((_, i) => {
+        const angle = i / 8 * Math.PI * 2;
+        const x = 1.6 * Math.cos(angle);
+        const z = 1.6 * Math.sin(angle);
+        return /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [x, 0, z], rotation: [Math.PI / 2, 0, angle], children: [
+          /* @__PURE__ */ jsxRuntime.jsx("torusGeometry", { args: [0.25, 0.025, 6, 12, Math.PI * 0.7] }),
+          /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: pColor, emissive: pColor, emissiveIntensity: 0.6, transparent: true, opacity: 0.6 })
+        ] }, i);
+      }) })
+    ) : persistence === "instance" ? (
+      // Instance: dotted ring (small spheres in a circle)
+      /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 16 }).map((_, i) => {
+        const angle = i / 16 * Math.PI * 2;
+        const x = 1.6 * Math.cos(angle);
+        const z = 1.6 * Math.sin(angle);
+        return /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [x, 0, z], scale: 0.04, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("sphereGeometry", { args: [1, 6, 6] }),
+          /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: pColor, emissive: pColor, emissiveIntensity: 0.8 })
+        ] }, i);
+      }) })
+    ) : (
+      // Persistent (default): solid torus ring
+      /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
+        /* @__PURE__ */ jsxRuntime.jsx("torusGeometry", { args: [1.6, 0.03, 8, 64] }),
+        /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: pColor, emissive: pColor, emissiveIntensity: 0.6, transparent: true, opacity: 0.6 })
+      ] })
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Avl3DLabel,
+      {
+        position: [0, -1.8, 0],
+        text: name,
+        color: AVL_3D_COLORS.entityCore,
+        fontSize: 14
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Avl3DLabel,
+      {
+        position: [0, -2.3, 0],
+        text: `${fieldCount} fields`,
+        color: "#999999",
+        fontSize: 10
+      }
+    )
+  ] });
+};
+Avl3DEntityCore.displayName = "Avl3DEntityCore";
+function TraitOrbit({
+  name,
+  radius,
+  tilt,
+  speed,
+  highlighted,
+  dimmed,
+  stateCount = 0,
+  eventCount = 0,
+  transitionCount = 0,
+  onClick,
+  onHover
+}) {
+  const groupRef = React21.useRef(null);
+  const angleRef = React21.useRef(Math.random() * Math.PI * 2);
+  fiber.useFrame((_, delta) => {
+    angleRef.current += delta * speed;
+    if (!groupRef.current) return;
+    const x = radius * Math.cos(angleRef.current);
+    const flatZ = radius * Math.sin(angleRef.current);
+    const y = flatZ * Math.sin(tilt);
+    const z = flatZ * Math.cos(tilt);
+    groupRef.current.position.set(x, y, z);
+  });
+  const opacity = dimmed ? 0.2 : 0.5;
+  const emissiveIntensity = highlighted ? 0.8 : 0.4;
+  return /* @__PURE__ */ jsxRuntime.jsxs("group", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [tilt, 0, 0], children: [
+      /* @__PURE__ */ jsxRuntime.jsx("torusGeometry", { args: [radius, 0.015, 8, 64] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.traitOrbit,
+          emissive: AVL_3D_COLORS.traitOrbit,
+          emissiveIntensity,
+          transparent: true,
+          opacity
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("group", { ref: groupRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "mesh",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onClick?.();
+          },
+          onPointerOver: (e) => {
+            e.stopPropagation();
+            onHover?.(true);
+            document.body.style.cursor = "pointer";
+          },
+          onPointerOut: () => {
+            onHover?.(false);
+            document.body.style.cursor = "auto";
+          },
+          scale: highlighted ? 1.3 : 1,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("sphereGeometry", { args: [0.25, 16, 16] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "meshStandardMaterial",
+              {
+                color: AVL_3D_COLORS.traitOrbit,
+                emissive: AVL_3D_COLORS.traitOrbit,
+                emissiveIntensity: highlighted ? 1.2 : 0.6,
+                transparent: true,
+                opacity: dimmed ? 0.3 : 0.9
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Avl3DLabel,
+        {
+          position: [0, 0.5, 0],
+          text: name,
+          color: dimmed ? "#666666" : "#ffffff",
+          fontSize: highlighted ? 13 : 11
+        }
+      ),
+      highlighted && /* @__PURE__ */ jsxRuntime.jsx(
+        Avl3DTooltip,
+        {
+          position: [0.8, 0.8, 0],
+          title: name,
+          accentColor: AVL_3D_COLORS.traitOrbitHighlight,
+          rows: [
+            { label: "States", value: String(stateCount) },
+            { label: "Events", value: String(eventCount) },
+            { label: "Transitions", value: String(transitionCount) }
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function PagePortal({ name, position }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("group", { position, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
+      /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.35, 0.35, 0.12, 6] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.pagePortal,
+          emissive: AVL_3D_COLORS.pagePortal,
+          emissiveIntensity: 0.5,
+          transparent: true,
+          opacity: 0.7,
+          roughness: 0.3
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
+      /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.25, 0.25, 0.14, 6] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.pagePortal,
+          emissive: AVL_3D_COLORS.pagePortal,
+          emissiveIntensity: 0.8,
+          transparent: true,
+          opacity: 0.2,
+          depthWrite: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Avl3DLabel,
+      {
+        position: [0, -0.5, 0],
+        text: name,
+        color: AVL_3D_COLORS.pagePortal,
+        fontSize: 9
+      }
+    )
+  ] });
+}
+var Avl3DOrbitalScene = ({
+  data,
+  onTraitClick,
+  highlightedTrait,
+  onTraitHighlight
+}) => {
+  const [localHighlight, setLocalHighlight] = React21.useState(null);
+  const activeHighlight = highlightedTrait ?? localHighlight;
+  const traitOrbits = React21.useMemo(() => {
+    return data.traits.map((trait, i) => ({
+      name: trait.name,
+      radius: 3 + i * 1.2,
+      tilt: i * Math.PI / (data.traits.length + 1) - Math.PI / 4,
+      speed: 0.3 - i * 0.04,
+      stateCount: trait.stateCount,
+      eventCount: trait.eventCount,
+      transitionCount: trait.transitionCount
+    }));
+  }, [data.traits]);
+  const pagePositions = React21.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;
+      return [
+        outerRadius * Math.cos(angle),
+        0,
+        outerRadius * Math.sin(angle)
+      ];
+    });
+  }, [data.pages, data.traits.length]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("group", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Avl3DEntityCore,
+      {
+        name: data.entity.name,
+        fieldCount: data.entity.fields.length,
+        persistence: data.entity.persistence,
+        position: [0, 0, 0],
+        fields: data.entity.fields.map((f) => f.type)
+      }
+    ),
+    traitOrbits.map((orbit) => /* @__PURE__ */ jsxRuntime.jsx(
+      TraitOrbit,
+      {
+        name: orbit.name,
+        radius: orbit.radius,
+        tilt: orbit.tilt,
+        speed: orbit.speed,
+        highlighted: activeHighlight === orbit.name,
+        dimmed: activeHighlight !== null && activeHighlight !== orbit.name,
+        stateCount: orbit.stateCount,
+        eventCount: orbit.eventCount,
+        transitionCount: orbit.transitionCount,
+        onClick: () => onTraitClick?.(orbit.name),
+        onHover: (h) => {
+          const value = h ? orbit.name : null;
+          onTraitHighlight?.(value);
+          setLocalHighlight(value);
+        }
+      },
+      orbit.name
+    )),
+    data.pages.map((page, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      PagePortal,
+      {
+        name: page.name,
+        position: pagePositions[i]
+      },
+      page.name
+    ))
+  ] });
+};
+Avl3DOrbitalScene.displayName = "Avl3DOrbitalScene";
+var Avl3DStateNode = ({
+  name,
+  isInitial = false,
+  isTerminal = false,
+  position,
+  active = false,
+  incomingCount = 0,
+  outgoingCount = 0,
+  onClick
+}) => {
+  const [hovered, setHovered] = React21.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 = React21.useRef(1);
+  fiber.useFrame((_, delta) => {
+    currentScale.current = THREE6.MathUtils.damp(currentScale.current, targetScale, 6, delta);
+  });
+  const scale = currentScale.current;
+  return /* @__PURE__ */ jsxRuntime.jsxs("group", { position, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("mesh", { scale: scale * 1.4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [1.2, 0.7, 0.5] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "meshStandardMaterial",
+        {
+          color: emissiveColor,
+          emissive: emissiveColor,
+          emissiveIntensity: active ? 0.3 : hovered ? 0.1 : 0.03,
+          transparent: true,
+          opacity: active ? 0.08 : 0.03,
+          depthWrite: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      drei.RoundedBox,
+      {
+        args: [1, 0.55, 0.35],
+        radius: 0.12,
+        smoothness: 4,
+        scale,
+        onClick: (e) => {
+          e.stopPropagation();
+          onClick?.();
+        },
+        onPointerOver: (e) => {
+          e.stopPropagation();
+          setHovered(true);
+          document.body.style.cursor = "pointer";
+        },
+        onPointerOut: () => {
+          setHovered(false);
+          document.body.style.cursor = "auto";
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "meshStandardMaterial",
+          {
+            color: baseColor,
+            emissive: emissiveColor,
+            emissiveIntensity,
+            roughness: 0.35,
+            metalness: 0.5
+          }
+        )
+      }
+    ),
+    isInitial && /* @__PURE__ */ jsxRuntime.jsxs("group", { position: [-0.75, 0, 0], children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [0, 0, -Math.PI / 2], children: [
+        /* @__PURE__ */ jsxRuntime.jsx("coneGeometry", { args: [0.12, 0.25, 8] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "meshStandardMaterial",
+          {
+            color: AVL_3D_COLORS.stateActive,
+            emissive: AVL_3D_COLORS.stateActive,
+            emissiveIntensity: 1
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [-0.2, 0, 0], rotation: [0, 0, Math.PI / 2], children: [
+        /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.02, 0.02, 0.25, 6] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "meshStandardMaterial",
+          {
+            color: AVL_3D_COLORS.stateActive,
+            emissive: AVL_3D_COLORS.stateActive,
+            emissiveIntensity: 0.6
+          }
+        )
+      ] })
+    ] }),
+    isTerminal && /* @__PURE__ */ jsxRuntime.jsxs("group", { position: [0.75, 0, 0], children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("mesh", { scale: 0.15, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("octahedronGeometry", { args: [1, 0] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "meshStandardMaterial",
+          {
+            color: AVL_3D_COLORS.guardFail,
+            emissive: AVL_3D_COLORS.guardFail,
+            emissiveIntensity: 1
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
+        /* @__PURE__ */ jsxRuntime.jsx("torusGeometry", { args: [0.2, 0.015, 8, 24] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "meshStandardMaterial",
+          {
+            color: AVL_3D_COLORS.guardFail,
+            emissive: AVL_3D_COLORS.guardFail,
+            emissiveIntensity: 0.5
+          }
+        )
+      ] })
+    ] }),
+    active && /* @__PURE__ */ jsxRuntime.jsx(
+      "pointLight",
+      {
+        color: AVL_3D_COLORS.stateActive,
+        intensity: 1.5,
+        distance: 4,
+        decay: 2
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Avl3DLabel,
+      {
+        position: [0, -0.55, 0],
+        text: name,
+        color: active ? AVL_3D_COLORS.stateActive : "#ffffff",
+        fontSize: 11
+      }
+    ),
+    hovered && /* @__PURE__ */ jsxRuntime.jsx(
+      Avl3DTooltip,
+      {
+        position: [0.9, 0.3, 0],
+        title: name,
+        accentColor: active ? AVL_3D_COLORS.stateActive : AVL_3D_COLORS.stateEdge,
+        rows: [
+          { label: "Type", value: isInitial ? "Initial" : isTerminal ? "Terminal" : "Standard" },
+          { label: "Incoming", value: String(incomingCount) },
+          { label: "Outgoing", value: String(outgoingCount) },
+          ...active ? [{ label: "Status", value: "Active" }] : []
+        ]
+      }
+    )
+  ] });
+};
+Avl3DStateNode.displayName = "Avl3DStateNode";
+function effectTypeColor(type) {
+  switch (type) {
+    case "render-ui":
+      return "#5b9bd5";
+    case "set":
+      return "#e0944a";
+    case "persist":
+      return "#4ecb71";
+    case "fetch":
+      return "#5b9bd5";
+    case "emit":
+      return "#a78bda";
+    case "navigate":
+      return "#40c8aa";
+    case "notify":
+      return "#f0c040";
+    case "call-service":
+      return "#a78bda";
+    case "spawn":
+      return "#4ecb71";
+    case "despawn":
+      return "#f06060";
+    default:
+      return "#888888";
+  }
+}
+var Avl3DTransitionArc = ({
+  from,
+  to,
+  event,
+  hasGuard = false,
+  effectTypes,
+  index,
+  isSelf = false,
+  fromState,
+  toState,
+  onClick,
+  color = AVL_3D_COLORS.transitionArc
+}) => {
+  const [hovered, setHovered] = React21.useState(false);
+  const { tubeArgs, labelPos, guardPos, arrowPos, arrowQuat, effectPositions } = React21.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);
+    const guardPt = curve.getPoint(0.3);
+    const arrowPt = curve.getPoint(0.9);
+    const arrowTangent = curve.getTangent(0.9);
+    const upVec = new THREE6.Vector3(0, 1, 0);
+    const tangentVec = new THREE6.Vector3(arrowTangent.x, arrowTangent.y, arrowTangent.z).normalize();
+    const quat = new THREE6.Quaternion().setFromUnitVectors(upVec, tangentVec);
+    const effectPositions2 = [];
+    for (let ei = 0; ei < 4; ei++) {
+      const t = 0.7 + ei * 0.05;
+      const ep = curve.getPoint(t);
+      effectPositions2.push([ep.x, ep.y + 0.2, ep.z]);
+    }
+    return {
+      tubeArgs: [curve, 48, 0.02, 8, false],
+      labelPos: [mid.x, mid.y + 0.3, mid.z],
+      guardPos: [guardPt.x, guardPt.y, guardPt.z],
+      arrowPos: [arrowPt.x, arrowPt.y, arrowPt.z],
+      arrowQuat: [quat.x, quat.y, quat.z, quat.w],
+      effectPositions: effectPositions2
+    };
+  }, [from, to, index, isSelf]);
+  const emissiveIntensity = hovered ? 0.8 : 0.4;
+  return /* @__PURE__ */ jsxRuntime.jsxs("group", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "mesh",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          onClick?.();
+        },
+        onPointerOver: (e) => {
+          e.stopPropagation();
+          setHovered(true);
+          document.body.style.cursor = "pointer";
+        },
+        onPointerOut: () => {
+          setHovered(false);
+          document.body.style.cursor = "auto";
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("tubeGeometry", { args: [...tubeArgs] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "meshStandardMaterial",
+            {
+              color,
+              emissive: color,
+              emissiveIntensity,
+              transparent: true,
+              opacity: hovered ? 0.9 : 0.7
+            }
+          )
+        ]
+      }
+    ),
+    hasGuard && /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: guardPos, scale: 0.15, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("octahedronGeometry", { args: [1, 0] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.guardPass,
+          emissive: AVL_3D_COLORS.guardPass,
+          emissiveIntensity: 0.8
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "mesh",
+      {
+        position: arrowPos,
+        quaternion: arrowQuat,
+        scale: 0.08,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("coneGeometry", { args: [1, 2, 8] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "meshStandardMaterial",
+            {
+              color,
+              emissive: color,
+              emissiveIntensity: 0.6
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Avl3DLabel,
+      {
+        position: labelPos,
+        text: event,
+        color: hovered ? "#ffffff" : color,
+        fontSize: hovered ? 11 : 9
+      }
+    ),
+    hovered && /* @__PURE__ */ jsxRuntime.jsx(
+      Avl3DTooltip,
+      {
+        position: [labelPos[0], labelPos[1] + 0.6, labelPos[2]],
+        title: event,
+        accentColor: AVL_3D_COLORS.transitionArc,
+        rows: [
+          ...fromState && toState ? [{ label: "Transition", value: `${fromState} \u2192 ${toState}` }] : [],
+          ...hasGuard ? [{ label: "Guard", value: "Yes" }] : [],
+          ...effectTypes && effectTypes.length > 0 ? [{ label: "Effects", value: effectTypes.slice(0, 3).join(", ") + (effectTypes.length > 3 ? ` +${effectTypes.length - 3}` : "") }] : []
+        ]
+      }
+    ),
+    effectTypes && effectTypes.length > 0 && effectTypes.slice(0, 4).map((effectType, ei) => {
+      const pt = effectPositions[ei];
+      if (!pt) return null;
+      const eColor = effectTypeColor(effectType);
+      return /* @__PURE__ */ jsxRuntime.jsx("group", { position: pt, children: /* @__PURE__ */ jsxRuntime.jsxs("mesh", { scale: 0.06, children: [
+        effectType === "render-ui" ? /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [1.5, 1.5, 0.3] }) : effectType === "persist" ? /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.6, 0.6, 1.5, 8] }) : effectType === "emit" ? /* @__PURE__ */ jsxRuntime.jsx("sphereGeometry", { args: [1, 8, 8] }) : effectType === "navigate" ? /* @__PURE__ */ jsxRuntime.jsx("coneGeometry", { args: [0.8, 1.5, 6] }) : effectType === "set" ? /* @__PURE__ */ jsxRuntime.jsx("tetrahedronGeometry", { args: [1, 0] }) : effectType === "notify" ? /* @__PURE__ */ jsxRuntime.jsx("dodecahedronGeometry", { args: [0.8, 0] }) : effectType === "call-service" ? /* @__PURE__ */ jsxRuntime.jsx("torusGeometry", { args: [0.8, 0.3, 6, 12] }) : /* @__PURE__ */ jsxRuntime.jsx("octahedronGeometry", { args: [0.8, 0] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "meshStandardMaterial",
+          {
+            color: eColor,
+            emissive: eColor,
+            emissiveIntensity: 0.8
+          }
+        )
+      ] }) }, ei);
+    })
+  ] });
+};
+Avl3DTransitionArc.displayName = "Avl3DTransitionArc";
+var Avl3DTraitScene = ({
+  data,
+  onTransitionClick
+}) => {
+  const statePositions = React21.useMemo(() => {
+    const radius = Math.max(3, data.states.length * 0.8);
+    const positions = fibonacciSpherePositions(data.states.length, radius);
+    const posMap = /* @__PURE__ */ new Map();
+    data.states.forEach((state, i) => {
+      const pos = positions[i];
+      posMap.set(state.name, [pos.x, pos.y, pos.z]);
+    });
+    return posMap;
+  }, [data.states]);
+  const transitionIndices = React21.useMemo(() => {
+    const pairCount = /* @__PURE__ */ new Map();
+    return data.transitions.map((t) => {
+      const key = `${t.from}->${t.to}`;
+      const idx = pairCount.get(key) ?? 0;
+      pairCount.set(key, idx + 1);
+      return idx;
+    });
+  }, [data.transitions]);
+  const transitionCounts = React21.useMemo(() => {
+    const incoming = /* @__PURE__ */ new Map();
+    const outgoing = /* @__PURE__ */ new Map();
+    for (const t of data.transitions) {
+      outgoing.set(t.from, (outgoing.get(t.from) ?? 0) + 1);
+      incoming.set(t.to, (incoming.get(t.to) ?? 0) + 1);
+    }
+    return { incoming, outgoing };
+  }, [data.transitions]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("group", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Avl3DLabel,
+      {
+        position: [0, 5, 0],
+        text: `${data.name} (${data.linkedEntity})`,
+        color: "#ffffff",
+        fontSize: 14
+      }
+    ),
+    data.states.map((state) => {
+      const pos = statePositions.get(state.name);
+      if (!pos) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Avl3DStateNode,
+        {
+          name: state.name,
+          isInitial: state.isInitial,
+          isTerminal: state.isTerminal,
+          position: pos,
+          incomingCount: transitionCounts.incoming.get(state.name) ?? 0,
+          outgoingCount: transitionCounts.outgoing.get(state.name) ?? 0
+        },
+        state.name
+      );
+    }),
+    data.transitions.map((transition, i) => {
+      const fromPos = statePositions.get(transition.from);
+      const toPos = statePositions.get(transition.to);
+      if (!fromPos || !toPos) return null;
+      const isSelf = transition.from === transition.to;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Avl3DTransitionArc,
+        {
+          from: fromPos,
+          to: toPos,
+          event: transition.event,
+          hasGuard: !!transition.guard,
+          effectCount: transition.effects?.length ?? 0,
+          effectTypes: transition.effects?.map((e) => {
+            if (Array.isArray(e)) return String(e[0]);
+            return typeof e === "string" ? e : "unknown";
+          }),
+          index: transitionIndices[i],
+          isSelf,
+          fromState: transition.from,
+          toState: transition.to,
+          onClick: () => onTransitionClick?.(i)
+        },
+        `${transition.from}-${transition.event}-${transition.to}-${i}`
+      );
+    })
+  ] });
+};
+Avl3DTraitScene.displayName = "Avl3DTraitScene";
+
+// components/atoms/avl/types.ts
+var AVL_OPERATOR_COLORS = {
+  arithmetic: "#4A90D9",
+  comparison: "#E8913A",
+  logic: "#9B59B6",
+  string: "#27AE60",
+  collection: "#1ABC9C"};
+function operatorColor(label) {
+  if (["+", "-", "*", "/", "%", "mod"].includes(label)) return AVL_OPERATOR_COLORS.arithmetic;
+  if (["=", "!=", "<", ">", "<=", ">=", "eq", "neq", "lt", "gt"].includes(label)) return AVL_OPERATOR_COLORS.comparison;
+  if (["and", "or", "not", "if", "cond"].includes(label)) return AVL_OPERATOR_COLORS.logic;
+  if (["concat", "upper", "lower", "trim", "substr"].includes(label)) return AVL_OPERATOR_COLORS.string;
+  if (["map", "filter", "reduce", "find", "count", "sum"].includes(label)) return AVL_OPERATOR_COLORS.collection;
+  return "#4A90D9";
+}
+function edgeGeometry(parent, child) {
+  const p = new THREE6.Vector3(parent.x, parent.y, parent.z);
+  const c = new THREE6.Vector3(child.x, child.y, child.z);
+  const mid = new THREE6.Vector3().addVectors(p, c).multiplyScalar(0.5);
+  const dir = new THREE6.Vector3().subVectors(c, p);
+  const length = dir.length();
+  const yAxis = new THREE6.Vector3(0, 1, 0);
+  const angle = yAxis.angleTo(dir.normalize());
+  const axis = new THREE6.Vector3().crossVectors(yAxis, dir).normalize();
+  if (axis.length() < 1e-3) {
+    return {
+      position: [mid.x, mid.y, mid.z],
+      rotation: [0, 0, 0],
+      length
+    };
+  }
+  return {
+    position: [mid.x, mid.y, mid.z],
+    rotation: [
+      axis.x * angle,
+      axis.y * angle,
+      axis.z * angle
+    ],
+    length
+  };
+}
+var Avl3DExprTree = ({
+  expression,
+  position
+}) => {
+  const layoutResults = React21.useMemo(() => {
+    const origin = { x: position[0], y: position[1], z: position[2] };
+    return treeLayout3D(expression, origin, 2.5, 1.5);
+  }, [expression, position]);
+  const edges = React21.useMemo(() => {
+    const result = [];
+    function collectEdges(node, parentPos) {
+      const entry = layoutResults.find((r) => r.node === node);
+      if (!entry) return;
+      if (parentPos) {
+        result.push({
+          parent: parentPos,
+          child: entry.position,
+          key: `${parentPos.x}-${parentPos.y}-${entry.position.x}-${entry.position.y}`
+        });
+      }
+      if (node.children) {
+        for (const child of node.children) {
+          collectEdges(child, entry.position);
+        }
+      }
+    }
+    collectEdges(expression, null);
+    return result;
+  }, [expression, layoutResults]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("group", { children: [
+    edges.map((edge) => {
+      const geo = edgeGeometry(edge.parent, edge.child);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "mesh",
+        {
+          position: geo.position,
+          rotation: geo.rotation,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.015, 0.015, geo.length, 6] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "meshStandardMaterial",
+              {
+                color: "#555555",
+                transparent: true,
+                opacity: 0.5
+              }
+            )
+          ]
+        },
+        edge.key
+      );
+    }),
+    layoutResults.map((entry, i) => {
+      const pos = [
+        entry.position.x,
+        entry.position.y,
+        entry.position.z
+      ];
+      if (entry.node.type === "operator") {
+        const opColor = operatorColor(entry.node.label);
+        return /* @__PURE__ */ jsxRuntime.jsxs("group", { position: pos, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [0.6, 0.4, 0.3] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "meshStandardMaterial",
+              {
+                color: opColor,
+                emissive: opColor,
+                emissiveIntensity: 0.4,
+                roughness: 0.3
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Avl3DLabel,
+            {
+              position: [0, -0.4, 0],
+              text: entry.node.label,
+              color: opColor,
+              fontSize: 10
+            }
+          )
+        ] }, i);
+      }
+      if (entry.node.type === "binding") {
+        return /* @__PURE__ */ jsxRuntime.jsxs("group", { position: pos, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { scale: 0.08, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("torusKnotGeometry", { args: [2, 0.6, 48, 8, 2, 3] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "meshStandardMaterial",
+              {
+                color: "#4A90D9",
+                emissive: "#4A90D9",
+                emissiveIntensity: 0.4,
+                transparent: true,
+                opacity: 0.85,
+                roughness: 0.3
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Avl3DLabel,
+            {
+              position: [0, -0.35, 0],
+              text: entry.node.label,
+              color: "#4A90D9",
+              fontSize: 9
+            }
+          )
+        ] }, i);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs("group", { position: pos, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [Math.PI / 6, Math.PI / 4, 0], children: [
+          /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [0.2, 0.2, 0.2] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "meshStandardMaterial",
+            {
+              color: "#888888",
+              emissive: "#666666",
+              emissiveIntensity: 0.2,
+              roughness: 0.5
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Avl3DLabel,
+          {
+            position: [0, -0.3, 0],
+            text: entry.node.label,
+            color: "#999999",
+            fontSize: 8
+          }
+        )
+      ] }, i);
+    })
+  ] });
+};
+Avl3DExprTree.displayName = "Avl3DExprTree";
+var Avl3DTransitionScene = ({
+  data
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("group", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Avl3DStateNode,
+      {
+        name: data.from,
+        position: [0, 4, 0]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("group", { position: [0, 2.2, 0], children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("mesh", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [2, 0.6, 0.4] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "meshStandardMaterial",
+          {
+            color: AVL_3D_COLORS.transitionArc,
+            emissive: AVL_3D_COLORS.transitionArc,
+            emissiveIntensity: 0.5,
+            roughness: 0.3
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Avl3DLabel,
+        {
+          position: [0, 0, 0.3],
+          text: data.event,
+          color: "#ffffff",
+          fontSize: 13
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 3.1, 0], children: [
+      /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.02, 0.02, 1.2, 6] }),
+      /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: "#555555", transparent: true, opacity: 0.5 })
+    ] }),
+    data.guard && /* @__PURE__ */ jsxRuntime.jsxs("group", { position: [0, 1, 0], children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [0, 0, Math.PI / 4], children: [
+        /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [0.5, 0.5, 0.3] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "meshStandardMaterial",
+          {
+            color: AVL_3D_COLORS.guardPass,
+            emissive: AVL_3D_COLORS.guardPass,
+            emissiveIntensity: 0.6
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.7, 0], children: [
+        /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.02, 0.02, 0.8, 6] }),
+        /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: "#555555", transparent: true, opacity: 0.5 })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Avl3DExprTree,
+        {
+          expression: data.guard,
+          position: [3, 0, 0]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Avl3DLabel,
+        {
+          position: [1.5, 0.3, 0],
+          text: "guard",
+          color: AVL_3D_COLORS.guardPass,
+          fontSize: 9
+        }
+      )
+    ] }),
+    data.effects.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("group", { position: [0, data.guard ? -0.5 : 0.5, 0], children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Avl3DLabel,
+        {
+          position: [0, 0.4, 0],
+          text: `${data.effects.length} effect${data.effects.length > 1 ? "s" : ""}`,
+          color: "#E8913A",
+          fontSize: 10
+        }
+      ),
+      data.effects.map((effect, i) => {
+        const xOffset = (i - (data.effects.length - 1) / 2) * 3;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Avl3DExprTree,
+          {
+            expression: effect,
+            position: [xOffset, -1, 0]
+          },
+          i
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, data.guard ? -2.5 : -1.5, 0], children: [
+      /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.02, 0.02, 1.2, 6] }),
+      /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: "#555555", transparent: true, opacity: 0.5 })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Avl3DStateNode,
+      {
+        name: data.to,
+        position: [0, data.guard ? -3.5 : -2.5, 0]
+      }
+    )
+  ] });
+};
+Avl3DTransitionScene.displayName = "Avl3DTransitionScene";
+var BLOOM_CONFIG = {
+  application: { intensity: 0.4, luminanceThreshold: 0.88, luminanceSmoothing: 0.95 },
+  orbital: { intensity: 0.5, luminanceThreshold: 0.85, luminanceSmoothing: 0.9 },
+  trait: { intensity: 0.3, luminanceThreshold: 0.92, luminanceSmoothing: 0.9 },
+  transition: { intensity: 0.35, luminanceThreshold: 0.9, luminanceSmoothing: 0.9 }
+};
+var DOF_CONFIG = {
+  application: null,
+  orbital: { focusDistance: 0.02, focalLength: 0.02, bokehScale: 1.5 },
+  trait: null,
+  transition: null
+};
+var SPARKLE_CONFIGS = {
+  application: [
+    { count: 60, size: 1.2, speed: 0.2, opacity: 0.35, scale: 35, color: AVL_3D_COLORS.sparkle },
+    { count: 15, size: 1.8, speed: 0.1, opacity: 0.2, scale: 25, color: AVL_3D_COLORS.sparkleWarm }
+  ],
+  orbital: [
+    { count: 30, size: 0.8, speed: 0.15, opacity: 0.25, scale: 18, color: AVL_3D_COLORS.sparkle },
+    { count: 8, size: 1.2, speed: 0.08, opacity: 0.15, scale: 12, color: AVL_3D_COLORS.sparkleWarm }
+  ],
+  trait: [
+    { count: 15, size: 0.6, speed: 0.1, opacity: 0.2, scale: 12, color: AVL_3D_COLORS.sparkle }
+  ],
+  transition: [
+    { count: 8, size: 0.4, speed: 0.08, opacity: 0.15, scale: 8, color: AVL_3D_COLORS.sparkle }
+  ]
+};
+var STARS_CONFIG = {
+  application: { radius: 80, count: 3e3, factor: 5, fade: true },
+  orbital: { radius: 60, count: 1500, factor: 4, fade: true },
+  trait: { radius: 40, count: 800, factor: 3, fade: true },
+  transition: { radius: 30, count: 400, factor: 2, fade: true }
+};
+var Avl3DEffects = ({
+  level,
+  enabled = true
+}) => {
+  if (!enabled) return null;
+  const bloom = BLOOM_CONFIG[level];
+  const dof = DOF_CONFIG[level];
+  const sparkles = SPARKLE_CONFIGS[level];
+  const stars = STARS_CONFIG[level];
+  const starsKey = React21.useMemo(() => `stars-${level}`, [level]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      drei.Stars,
+      {
+        radius: stars.radius,
+        count: stars.count,
+        factor: stars.factor,
+        saturation: 0.1,
+        fade: stars.fade,
+        speed: 0.3
+      },
+      starsKey
+    ),
+    sparkles.map((cfg, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      drei.Sparkles,
+      {
+        count: cfg.count,
+        size: cfg.size,
+        speed: cfg.speed,
+        opacity: cfg.opacity,
+        scale: cfg.scale,
+        color: cfg.color
+      },
+      `sparkle-${level}-${i}`
+    )),
+    dof ? /* @__PURE__ */ jsxRuntime.jsxs(postprocessing.EffectComposer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        postprocessing.Bloom,
+        {
+          intensity: bloom.intensity,
+          luminanceThreshold: bloom.luminanceThreshold,
+          luminanceSmoothing: bloom.luminanceSmoothing,
+          mipmapBlur: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        postprocessing.DepthOfField,
+        {
+          focusDistance: dof.focusDistance,
+          focalLength: dof.focalLength,
+          bokehScale: dof.bokehScale
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(postprocessing.Vignette, { eskil: false, offset: 0.2, darkness: 0.35 })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(postprocessing.EffectComposer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        postprocessing.Bloom,
+        {
+          intensity: bloom.intensity,
+          luminanceThreshold: bloom.luminanceThreshold,
+          luminanceSmoothing: bloom.luminanceSmoothing,
+          mipmapBlur: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(postprocessing.Vignette, { eskil: false, offset: 0.2, darkness: 0.35 })
+    ] })
+  ] });
+};
+Avl3DEffects.displayName = "Avl3DEffects";
+var DEFAULT_CONFIG2 = {
+  modelOverrides: {},
+  effectsEnabled: true
+};
+var Avl3DContext = React21.createContext(DEFAULT_CONFIG2);
+function useAvl3DConfig() {
+  return React21.useContext(Avl3DContext);
+}
+function CameraController2({ targetPosition, targetLookAt, animated }) {
+  const { camera } = fiber.useThree();
+  const targetPosVec = React21.useRef(new THREE6__namespace.Vector3(...targetPosition));
+  const targetLookVec = React21.useRef(new THREE6__namespace.Vector3(...targetLookAt));
+  const isAnimating = React21.useRef(false);
+  React21.useEffect(() => {
+    const newTarget = new THREE6__namespace.Vector3(...targetPosition);
+    const newLookAt = new THREE6__namespace.Vector3(...targetLookAt);
+    if (!newTarget.equals(targetPosVec.current) || !newLookAt.equals(targetLookVec.current)) {
+      targetPosVec.current.copy(newTarget);
+      targetLookVec.current.copy(newLookAt);
+      if (animated) {
+        isAnimating.current = true;
+      } else {
+        camera.position.copy(targetPosVec.current);
+        camera.lookAt(targetLookVec.current);
+      }
+    }
+  }, [targetPosition, targetLookAt, animated, camera]);
+  fiber.useFrame((_, delta) => {
+    if (!isAnimating.current) return;
+    const speed = 3;
+    camera.position.x = THREE6__namespace.MathUtils.damp(camera.position.x, targetPosVec.current.x, speed, delta);
+    camera.position.y = THREE6__namespace.MathUtils.damp(camera.position.y, targetPosVec.current.y, speed, delta);
+    camera.position.z = THREE6__namespace.MathUtils.damp(camera.position.z, targetPosVec.current.z, speed, delta);
+    camera.lookAt(targetLookVec.current);
+    const dist = camera.position.distanceTo(targetPosVec.current);
+    if (dist < 0.05) {
+      isAnimating.current = false;
+    }
+  });
+  return null;
+}
+function SceneFade({ animating, children }) {
+  const groupRef = React21.useRef(null);
+  const opacityRef = React21.useRef(1);
+  fiber.useFrame((_, delta) => {
+    if (!groupRef.current) return;
+    const target = animating ? 0 : 1;
+    opacityRef.current = THREE6__namespace.MathUtils.damp(opacityRef.current, target, 5, delta);
+    groupRef.current.visible = opacityRef.current > 0.05;
+    const s = 0.9 + opacityRef.current * 0.1;
+    groupRef.current.scale.setScalar(s);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("group", { ref: groupRef, children });
+}
+var Avl3DViewer = ({
+  schema: schemaProp,
+  className,
+  animated = true,
+  initialOrbital,
+  initialTrait,
+  onZoomChange,
+  width = "100%",
+  height = 500,
+  effects = true,
+  modelOverrides = {}
+}) => {
+  const schema = React21.useMemo(() => {
+    if (typeof schemaProp === "string") {
+      try {
+        return JSON.parse(schemaProp);
+      } catch {
+        return { name: "Error", orbitals: [] };
+      }
+    }
+    return schemaProp;
+  }, [schemaProp]);
+  const configValue = React21.useMemo(() => ({
+    modelOverrides,
+    effectsEnabled: effects
+  }), [modelOverrides, effects]);
+  const [state, dispatch] = React21.useReducer(zoomReducer, initialZoomState);
+  React21.useEffect(() => {
+    if (initialOrbital) {
+      dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: initialOrbital, targetPosition: { x: 0, y: 0 } });
+      setTimeout(() => dispatch({ type: "ANIMATION_COMPLETE" }), 0);
+      if (initialTrait) {
+        setTimeout(() => {
+          dispatch({ type: "ZOOM_INTO_TRAIT", trait: initialTrait, targetPosition: { x: 0, y: 0 } });
+          setTimeout(() => dispatch({ type: "ANIMATION_COMPLETE" }), 0);
+        }, 10);
+      }
+    }
+  }, [initialOrbital, initialTrait]);
+  React21.useEffect(() => {
+    onZoomChange?.(state.level, {
+      orbital: state.selectedOrbital ?? void 0,
+      trait: state.selectedTrait ?? void 0
+    });
+  }, [state.level, state.selectedOrbital, state.selectedTrait, onZoomChange]);
+  React21.useEffect(() => {
+    if (!state.animating) return;
+    const timer = setTimeout(() => {
+      dispatch({ type: "ANIMATION_COMPLETE" });
+    }, 800);
+    return () => clearTimeout(timer);
+  }, [state.animating]);
+  const handleKeyDown = React21.useCallback((e) => {
+    if (e.key === "Escape") {
+      dispatch({ type: "ZOOM_OUT" });
+    }
+  }, []);
+  const handleOrbitalClick = React21.useCallback((name) => {
+    dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: name, targetPosition: { x: 0, y: 0 } });
+  }, []);
+  const handleTraitClick = React21.useCallback((name) => {
+    dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: { x: 0, y: 0 } });
+  }, []);
+  const [highlightedTrait, setHighlightedTrait] = React21__default.default.useState(null);
+  const handleTransitionClick = React21.useCallback((index) => {
+    dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: { x: 0, y: 0 } });
+  }, []);
+  const handleBreadcrumbClick = React21.useCallback((targetLevel) => {
+    const levelOrder = ["application", "orbital", "trait", "transition"];
+    const currentIdx = levelOrder.indexOf(state.level);
+    const targetIdx = levelOrder.indexOf(targetLevel);
+    if (targetIdx < currentIdx) {
+      dispatch({ type: "ZOOM_OUT" });
+    }
+  }, [state.level]);
+  const cameraConfig = CAMERA_POSITIONS[state.level];
+  const sceneContent = React21.useMemo(() => {
+    switch (state.level) {
+      case "application": {
+        const data = parseApplicationLevel(schema);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Avl3DApplicationScene,
+          {
+            data,
+            onOrbitalClick: handleOrbitalClick
+          }
+        );
+      }
+      case "orbital": {
+        if (!state.selectedOrbital) return null;
+        const orbData = parseOrbitalLevel(schema, state.selectedOrbital);
+        if (!orbData) return null;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Avl3DOrbitalScene,
+          {
+            data: orbData,
+            onTraitClick: handleTraitClick,
+            highlightedTrait,
+            onTraitHighlight: setHighlightedTrait
+          }
+        );
+      }
+      case "trait": {
+        if (!state.selectedOrbital || !state.selectedTrait) return null;
+        const traitData = parseTraitLevel(schema, state.selectedOrbital, state.selectedTrait);
+        if (!traitData) return null;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Avl3DTraitScene,
+          {
+            data: traitData,
+            onTransitionClick: handleTransitionClick
+          }
+        );
+      }
+      case "transition": {
+        if (!state.selectedOrbital || !state.selectedTrait || state.selectedTransition === null) return null;
+        const transData = parseTransitionLevel(schema, state.selectedOrbital, state.selectedTrait, state.selectedTransition);
+        if (!transData) return null;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Avl3DTransitionScene,
+          {
+            data: transData
+          }
+        );
+      }
+      default:
+        return null;
+    }
+  }, [state.level, state.selectedOrbital, state.selectedTrait, state.selectedTransition, schema, handleOrbitalClick, handleTraitClick, handleTransitionClick, highlightedTrait, setHighlightedTrait]);
+  const breadcrumbs = getBreadcrumbs(state);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Box,
+    {
+      className: `relative ${className ?? ""}`,
+      style: {
+        width,
+        height: typeof height === "number" ? `${height}px` : height,
+        backgroundColor: AVL_3D_COLORS.background,
+        borderRadius: "8px",
+        overflow: "hidden"
+      },
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          HStack,
+          {
+            gap: "xs",
+            align: "center",
+            className: "absolute top-2 left-2 z-10 bg-[var(--color-surface)]/80 backdrop-blur rounded-md px-3 py-1.5",
+            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React21__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,
+                {
+                  as: "span",
+                  className: "cursor-pointer hover:underline",
+                  onClick: () => handleBreadcrumbClick(crumb.level),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "muted", children: crumb.label })
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "primary", className: "font-bold", children: crumb.label })
+            ] }, crumb.level))
+          }
+        ),
+        state.level !== "application" && /* @__PURE__ */ jsxRuntime.jsx(
+          Typography,
+          {
+            variant: "small",
+            color: "muted",
+            className: "absolute bottom-2 right-2 z-10 bg-[var(--color-surface)]/60 backdrop-blur rounded px-2 py-1",
+            children: "Press Esc to zoom out"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          fiber.Canvas,
+          {
+            style: { width: "100%", height: "100%" },
+            camera: {
+              position: cameraConfig.position,
+              fov: 60,
+              near: 0.1,
+              far: 200
+            },
+            onCreated: ({ gl }) => {
+              gl.setClearColor(AVL_3D_COLORS.background);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(Avl3DContext.Provider, { value: configValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              Scene3D,
+              {
+                background: AVL_3D_COLORS.background,
+                fog: { color: AVL_3D_COLORS.fog, near: 30, far: 80 },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Camera3D,
+                    {
+                      mode: "perspective",
+                      position: cameraConfig.position,
+                      target: cameraConfig.target,
+                      enableOrbit: true,
+                      minDistance: 3,
+                      maxDistance: 80
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Lighting3D,
+                    {
+                      ambientIntensity: 0.35,
+                      ambientColor: "#8090c0",
+                      directionalIntensity: 0.5,
+                      directionalColor: "#c0d0f0",
+                      directionalPosition: [8, 15, 12],
+                      shadows: false
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "pointLight",
+                    {
+                      position: [0, -10, 0],
+                      color: "#2040a0",
+                      intensity: 0.15,
+                      distance: 50,
+                      decay: 2
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    CameraController2,
+                    {
+                      targetPosition: cameraConfig.position,
+                      targetLookAt: cameraConfig.target,
+                      animated
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(SceneFade, { animating: state.animating, children: sceneContent }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Avl3DEffects, { level: state.level, enabled: effects })
+                ]
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
+Avl3DViewer.displayName = "Avl3DViewer";
 function isInFrustum(position, camera, padding = 0) {
   const frustum = new THREE6__namespace.Frustum();
   const projScreenMatrix = new THREE6__namespace.Matrix4();
@@ -3546,7 +5959,16 @@ var SpatialHashGrid = class {
   }
 };
 
+exports.AVL_3D_COLORS = AVL_3D_COLORS;
 exports.AssetLoader = AssetLoader;
+exports.Avl3DApplicationScene = Avl3DApplicationScene;
+exports.Avl3DContext = Avl3DContext;
+exports.Avl3DEffects = Avl3DEffects;
+exports.Avl3DOrbitalScene = Avl3DOrbitalScene;
+exports.Avl3DTraitScene = Avl3DTraitScene;
+exports.Avl3DTransitionScene = Avl3DTransitionScene;
+exports.Avl3DViewer = Avl3DViewer;
+exports.CAMERA_POSITIONS = CAMERA_POSITIONS;
 exports.Camera3D = Camera3D;
 exports.Canvas3DErrorBoundary = Canvas3DErrorBoundary;
 exports.Canvas3DLoadingState = Canvas3DLoadingState;
@@ -3563,25 +5985,32 @@ exports.Scene3D = Scene3D;
 exports.SpatialHashGrid = SpatialHashGrid;
 exports.TileRenderer = TileRenderer;
 exports.UnitRenderer = UnitRenderer;
+exports.arcCurve3D = arcCurve3D;
 exports.assetLoader = assetLoader;
 exports.calculateLODLevel = calculateLODLevel;
 exports.createGridHighlight = createGridHighlight;
 exports.cullInstancedMesh = cullInstancedMesh;
+exports.fibonacciSpherePositions = fibonacciSpherePositions;
 exports.filterByFrustum = filterByFrustum;
 exports.getCellsInRadius = getCellsInRadius;
 exports.getNeighbors = getNeighbors;
 exports.getVisibleIndices = getVisibleIndices;
+exports.goldenSpiralPositions = goldenSpiralPositions;
 exports.gridDistance = gridDistance;
 exports.gridManhattanDistance = gridManhattanDistance;
 exports.gridToWorld = gridToWorld;
 exports.isInBounds = isInBounds;
 exports.isInFrustum = isInFrustum;
 exports.normalizeMouseCoordinates = normalizeMouseCoordinates;
+exports.orbitRingPositions = orbitRingPositions;
 exports.preloadFeatures = preloadFeatures;
 exports.raycastToObjects = raycastToObjects;
 exports.raycastToPlane = raycastToPlane;
+exports.selfLoopCurve3D = selfLoopCurve3D;
+exports.treeLayout3D = treeLayout3D;
 exports.updateInstanceLOD = updateInstanceLOD;
 exports.useAssetLoader = useAssetLoader;
+exports.useAvl3DConfig = useAvl3DConfig;
 exports.useGameCanvas3DEvents = useGameCanvas3DEvents;
 exports.usePhysics3DController = usePhysics3DController;
 exports.useRaycaster = useRaycaster;