@almadar/ui 2.20.0 → 2.20.6

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

@@ -1,8 +1,9 @@
-import React7, { forwardRef, useRef, useEffect, useImperativeHandle, useState, useMemo, useCallback, Component, useContext } from 'react';
+import React21, { forwardRef, useRef, useEffect, useImperativeHandle, useState, useMemo, useCallback, createContext, Component, useContext, useReducer } from 'react';
 import { useThree, useFrame, Canvas } from '@react-three/fiber';
 import * as THREE6 from 'three';
+import { Vector3, QuadraticBezierCurve3, MathUtils, Quaternion } from 'three';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { OrbitControls, Grid } from '@react-three/drei';
+import { OrbitControls, Grid, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
 import { GLTFLoader as GLTFLoader$1 } from 'three/examples/jsm/loaders/GLTFLoader';
 import { OrbitControls as OrbitControls$1 } from 'three/examples/jsm/controls/OrbitControls.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
@@ -10,6 +11,7 @@ import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
 import { EventBusContext } from '@almadar/ui/providers';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { EffectComposer, Bloom, DepthOfField, Vignette } from '@react-three/postprocessing';
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -1816,7 +1818,7 @@ function UnitRenderer({
   onAnimationStateChange,
   animationSpeed = 1
 }) {
-  const handleUnitClick = React7.useCallback(
+  const handleUnitClick = React21.useCallback(
     (unit) => {
       onUnitClick?.(unit);
     },
@@ -2795,7 +2797,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React7.forwardRef(
+var Box = React21.forwardRef(
   ({
     padding,
     paddingX,
@@ -3339,6 +3341,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 Vector3(...from);
+  const end = new Vector3(...to);
+  const mid = new Vector3().addVectors(start, end).multiplyScalar(0.5);
+  const dir = new Vector3().subVectors(end, start).normalize();
+  const up = new Vector3(0, 1, 0);
+  const perp = new Vector3().crossVectors(dir, up).normalize();
+  if (perp.length() < 1e-3) {
+    perp.crossVectors(dir, new Vector3(1, 0, 0)).normalize();
+  }
+  const control = mid.clone().add(perp.multiplyScalar(offset));
+  control.y += Math.abs(offset) * 0.3;
+  return new QuadraticBezierCurve3(start, control, end);
+}
+function selfLoopCurve3D(position, loopRadius) {
+  const base = new Vector3(...position);
+  const start = base.clone().add(new Vector3(-loopRadius * 0.3, 0, 0));
+  const end = base.clone().add(new Vector3(loopRadius * 0.3, 0, 0));
+  const control = base.clone().add(new Vector3(0, loopRadius, 0));
+  return new 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__ */ jsx(
+    Html,
+    {
+      position,
+      center: true,
+      distanceFactor: 10,
+      occlude: occlude ? "blending" : void 0,
+      className,
+      style: { pointerEvents: "none" },
+      children: /* @__PURE__ */ 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__ */ jsx(
+    Html,
+    {
+      position,
+      center: true,
+      distanceFactor: 8,
+      style: { pointerEvents: "none" },
+      zIndexRange: [100, 0],
+      children: /* @__PURE__ */ 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__ */ jsxs(VStack, { gap: "xs", children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "small",
+                style: {
+                  color: "#ffffff",
+                  fontWeight: 600,
+                  fontSize: "12px",
+                  lineHeight: 1.3
+                },
+                children: title
+              }
+            ),
+            rows.map((row) => /* @__PURE__ */ jsxs(
+              Box,
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  gap: "12px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "small",
+                      style: {
+                        color: "#8899bb",
+                        fontSize: "10px",
+                        whiteSpace: "nowrap"
+                      },
+                      children: row.label
+                    }
+                  ),
+                  /* @__PURE__ */ 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 = useRef(null);
+  const [hovered, setHovered] = useState(false);
+  const scale = useMemo(() => 0.6 + Math.min(traitCount, 8) * 0.3, [traitCount]);
+  const currentScale = useRef(scale);
+  const targetScale = hovered ? scale * 1.06 : scale;
+  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 = 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__ */ jsxs("group", { position, children: [
+    /* @__PURE__ */ jsxs("mesh", { scale: scale * 1.3, children: [
+      /* @__PURE__ */ jsx("sphereGeometry", { args: [1, 16, 16] }),
+      /* @__PURE__ */ 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__ */ jsxs("group", { ref: groupRef, children: [
+      /* @__PURE__ */ 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__ */ jsx("torusGeometry", { args: [1, 0.18, 24, 64] }),
+            /* @__PURE__ */ jsx(
+              "meshStandardMaterial",
+              {
+                color: AVL_3D_COLORS.orbitalSphere,
+                emissive: AVL_3D_COLORS.orbitalRim,
+                emissiveIntensity,
+                roughness: 0.2,
+                metalness: 0.7
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "mesh",
+        {
+          scale: scale * 0.9,
+          rotation: [Math.PI / 2 + 0.3, Math.PI / 5, 0],
+          children: [
+            /* @__PURE__ */ jsx("torusGeometry", { args: [1, 0.06, 12, 64] }),
+            /* @__PURE__ */ jsx(
+              "meshStandardMaterial",
+              {
+                color: AVL_3D_COLORS.traitOrbit,
+                emissive: AVL_3D_COLORS.traitOrbit,
+                emissiveIntensity: 0.25,
+                transparent: true,
+                opacity: 0.4
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("mesh", { scale: scale * 0.25, children: [
+      /* @__PURE__ */ jsx("icosahedronGeometry", { args: [1, 1] }),
+      /* @__PURE__ */ jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.entityCore,
+          emissive: AVL_3D_COLORS.entityCoreGlow,
+          emissiveIntensity: 2,
+          roughness: 0.1
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "pointLight",
+      {
+        color: AVL_3D_COLORS.entityCoreGlow,
+        intensity: 0.5,
+        distance: 3,
+        decay: 2
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Avl3DLabel,
+      {
+        position: [0, scale + 0.6, 0],
+        text: name,
+        color: "#ffffff",
+        fontSize: hovered ? 14 : 12
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Avl3DLabel,
+      {
+        position: [0, -(scale + 0.4), 0],
+        text: entityName,
+        color: "#999999",
+        fontSize: 10
+      }
+    ),
+    hovered && /* @__PURE__ */ 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 } = 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__ */ jsxs("group", { children: [
+    /* @__PURE__ */ jsxs("mesh", { children: [
+      /* @__PURE__ */ jsx("tubeGeometry", { args: [...tubeArgs] }),
+      /* @__PURE__ */ jsx(
+        "meshStandardMaterial",
+        {
+          color,
+          emissive: color,
+          emissiveIntensity: 0.4,
+          transparent: true,
+          opacity: 0.6,
+          roughness: 0.5
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Avl3DLabel,
+      {
+        position: midpoint,
+        text: eventName,
+        color,
+        fontSize: 9
+      }
+    )
+  ] });
+};
+Avl3DCrossWire.displayName = "Avl3DCrossWire";
+var Avl3DApplicationScene = ({
+  data,
+  onOrbitalClick
+}) => {
+  const groupRef = useRef(null);
+  const [, setHoverTrigger] = useState(0);
+  const orbitalPositions = 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 = 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]);
+  useFrame((_, delta) => {
+    if (!groupRef.current) return;
+    groupRef.current.rotation.y += delta * 0.03;
+  });
+  return /* @__PURE__ */ jsxs("group", { ref: groupRef, children: [
+    data.orbitals.map((orbital, i) => {
+      const pos = orbitalPositions[i];
+      return /* @__PURE__ */ 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__ */ 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 = useRef(null);
+  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__ */ jsxs("group", { position, children: [
+    /* @__PURE__ */ jsxs("mesh", { ref: coreRef, children: [
+      /* @__PURE__ */ jsx("icosahedronGeometry", { args: [1, 2] }),
+      /* @__PURE__ */ jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.entityCore,
+          emissive: AVL_3D_COLORS.entityCoreGlow,
+          emissiveIntensity: 2,
+          roughness: 0.15,
+          metalness: 0.85
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("mesh", { scale: 1.2, children: [
+      /* @__PURE__ */ jsx("sphereGeometry", { args: [1, 24, 24] }),
+      /* @__PURE__ */ jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.entityCoreGlow,
+          emissive: AVL_3D_COLORS.entityCoreGlow,
+          emissiveIntensity: 0.6,
+          transparent: true,
+          opacity: 0.1,
+          depthWrite: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("mesh", { scale: 1.6, children: [
+      /* @__PURE__ */ jsx("sphereGeometry", { args: [1, 16, 16] }),
+      /* @__PURE__ */ jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.entityCore,
+          emissive: AVL_3D_COLORS.entityCore,
+          emissiveIntensity: 0.2,
+          transparent: true,
+          opacity: 0.04,
+          depthWrite: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "pointLight",
+      {
+        color: AVL_3D_COLORS.entityCoreGlow,
+        intensity: 2.5,
+        distance: 10,
+        decay: 2
+      }
+    ),
+    fieldPos.map((pos, i) => {
+      const fieldType = fields?.[i];
+      return /* @__PURE__ */ jsxs("mesh", { position: pos, scale: 0.08, rotation: [Math.PI / 6, Math.PI / 4, 0], children: [
+        fieldType === "number" ? /* @__PURE__ */ jsx("tetrahedronGeometry", { args: [1, 0] }) : fieldType === "boolean" ? /* @__PURE__ */ jsx("boxGeometry", { args: [1.2, 1.2, 1.2] }) : fieldType === "date" ? /* @__PURE__ */ jsx("octahedronGeometry", { args: [1, 0] }) : fieldType === "enum" ? /* @__PURE__ */ jsx("torusGeometry", { args: [0.8, 0.3, 6, 12] }) : fieldType === "object" ? /* @__PURE__ */ jsx("dodecahedronGeometry", { args: [1, 0] }) : fieldType === "array" ? /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.8, 0.8, 1.5, 6] }) : (
+          // string (default): sphere
+          /* @__PURE__ */ jsx("sphereGeometry", { args: [1, 8, 8] })
+        ),
+        /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
+          /* @__PURE__ */ jsx("torusGeometry", { args: [1.6, 0.04, 8, 64] }),
+          /* @__PURE__ */ jsx("meshStandardMaterial", { color: pColor, emissive: pColor, emissiveIntensity: 0.6, transparent: true, opacity: 0.6 })
+        ] }),
+        /* @__PURE__ */ jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
+          /* @__PURE__ */ jsx("torusGeometry", { args: [1.4, 0.02, 8, 64] }),
+          /* @__PURE__ */ 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__ */ jsx(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__ */ jsxs("mesh", { position: [x, 0, z], rotation: [Math.PI / 2, 0, angle], children: [
+          /* @__PURE__ */ jsx("torusGeometry", { args: [0.25, 0.025, 6, 12, Math.PI * 0.7] }),
+          /* @__PURE__ */ 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__ */ jsx(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__ */ jsxs("mesh", { position: [x, 0, z], scale: 0.04, children: [
+          /* @__PURE__ */ jsx("sphereGeometry", { args: [1, 6, 6] }),
+          /* @__PURE__ */ jsx("meshStandardMaterial", { color: pColor, emissive: pColor, emissiveIntensity: 0.8 })
+        ] }, i);
+      }) })
+    ) : (
+      // Persistent (default): solid torus ring
+      /* @__PURE__ */ jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
+        /* @__PURE__ */ jsx("torusGeometry", { args: [1.6, 0.03, 8, 64] }),
+        /* @__PURE__ */ jsx("meshStandardMaterial", { color: pColor, emissive: pColor, emissiveIntensity: 0.6, transparent: true, opacity: 0.6 })
+      ] })
+    ),
+    /* @__PURE__ */ jsx(
+      Avl3DLabel,
+      {
+        position: [0, -1.8, 0],
+        text: name,
+        color: AVL_3D_COLORS.entityCore,
+        fontSize: 14
+      }
+    ),
+    /* @__PURE__ */ 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 = useRef(null);
+  const angleRef = useRef(Math.random() * Math.PI * 2);
+  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__ */ jsxs("group", { children: [
+    /* @__PURE__ */ jsxs("mesh", { rotation: [tilt, 0, 0], children: [
+      /* @__PURE__ */ jsx("torusGeometry", { args: [radius, 0.015, 8, 64] }),
+      /* @__PURE__ */ jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.traitOrbit,
+          emissive: AVL_3D_COLORS.traitOrbit,
+          emissiveIntensity,
+          transparent: true,
+          opacity
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("group", { ref: groupRef, children: [
+      /* @__PURE__ */ 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__ */ jsx("sphereGeometry", { args: [0.25, 16, 16] }),
+            /* @__PURE__ */ 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__ */ jsx(
+        Avl3DLabel,
+        {
+          position: [0, 0.5, 0],
+          text: name,
+          color: dimmed ? "#666666" : "#ffffff",
+          fontSize: highlighted ? 13 : 11
+        }
+      ),
+      highlighted && /* @__PURE__ */ 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__ */ jsxs("group", { position, children: [
+    /* @__PURE__ */ jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
+      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.35, 0.35, 0.12, 6] }),
+      /* @__PURE__ */ jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.pagePortal,
+          emissive: AVL_3D_COLORS.pagePortal,
+          emissiveIntensity: 0.5,
+          transparent: true,
+          opacity: 0.7,
+          roughness: 0.3
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
+      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.25, 0.25, 0.14, 6] }),
+      /* @__PURE__ */ jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.pagePortal,
+          emissive: AVL_3D_COLORS.pagePortal,
+          emissiveIntensity: 0.8,
+          transparent: true,
+          opacity: 0.2,
+          depthWrite: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ 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] = useState(null);
+  const activeHighlight = highlightedTrait ?? localHighlight;
+  const traitOrbits = 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 = 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__ */ jsxs("group", { children: [
+    /* @__PURE__ */ 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__ */ 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__ */ 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] = 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 = useRef(1);
+  useFrame((_, delta) => {
+    currentScale.current = MathUtils.damp(currentScale.current, targetScale, 6, delta);
+  });
+  const scale = currentScale.current;
+  return /* @__PURE__ */ jsxs("group", { position, children: [
+    /* @__PURE__ */ jsxs("mesh", { scale: scale * 1.4, children: [
+      /* @__PURE__ */ jsx("boxGeometry", { args: [1.2, 0.7, 0.5] }),
+      /* @__PURE__ */ 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__ */ jsx(
+      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__ */ jsx(
+          "meshStandardMaterial",
+          {
+            color: baseColor,
+            emissive: emissiveColor,
+            emissiveIntensity,
+            roughness: 0.35,
+            metalness: 0.5
+          }
+        )
+      }
+    ),
+    isInitial && /* @__PURE__ */ jsxs("group", { position: [-0.75, 0, 0], children: [
+      /* @__PURE__ */ jsxs("mesh", { rotation: [0, 0, -Math.PI / 2], children: [
+        /* @__PURE__ */ jsx("coneGeometry", { args: [0.12, 0.25, 8] }),
+        /* @__PURE__ */ jsx(
+          "meshStandardMaterial",
+          {
+            color: AVL_3D_COLORS.stateActive,
+            emissive: AVL_3D_COLORS.stateActive,
+            emissiveIntensity: 1
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("mesh", { position: [-0.2, 0, 0], rotation: [0, 0, Math.PI / 2], children: [
+        /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.02, 0.02, 0.25, 6] }),
+        /* @__PURE__ */ jsx(
+          "meshStandardMaterial",
+          {
+            color: AVL_3D_COLORS.stateActive,
+            emissive: AVL_3D_COLORS.stateActive,
+            emissiveIntensity: 0.6
+          }
+        )
+      ] })
+    ] }),
+    isTerminal && /* @__PURE__ */ jsxs("group", { position: [0.75, 0, 0], children: [
+      /* @__PURE__ */ jsxs("mesh", { scale: 0.15, children: [
+        /* @__PURE__ */ jsx("octahedronGeometry", { args: [1, 0] }),
+        /* @__PURE__ */ jsx(
+          "meshStandardMaterial",
+          {
+            color: AVL_3D_COLORS.guardFail,
+            emissive: AVL_3D_COLORS.guardFail,
+            emissiveIntensity: 1
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
+        /* @__PURE__ */ jsx("torusGeometry", { args: [0.2, 0.015, 8, 24] }),
+        /* @__PURE__ */ jsx(
+          "meshStandardMaterial",
+          {
+            color: AVL_3D_COLORS.guardFail,
+            emissive: AVL_3D_COLORS.guardFail,
+            emissiveIntensity: 0.5
+          }
+        )
+      ] })
+    ] }),
+    active && /* @__PURE__ */ jsx(
+      "pointLight",
+      {
+        color: AVL_3D_COLORS.stateActive,
+        intensity: 1.5,
+        distance: 4,
+        decay: 2
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Avl3DLabel,
+      {
+        position: [0, -0.55, 0],
+        text: name,
+        color: active ? AVL_3D_COLORS.stateActive : "#ffffff",
+        fontSize: 11
+      }
+    ),
+    hovered && /* @__PURE__ */ 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] = useState(false);
+  const { tubeArgs, labelPos, guardPos, arrowPos, arrowQuat, effectPositions } = 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 Vector3(0, 1, 0);
+    const tangentVec = new Vector3(arrowTangent.x, arrowTangent.y, arrowTangent.z).normalize();
+    const quat = new 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__ */ jsxs("group", { children: [
+    /* @__PURE__ */ 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__ */ jsx("tubeGeometry", { args: [...tubeArgs] }),
+          /* @__PURE__ */ jsx(
+            "meshStandardMaterial",
+            {
+              color,
+              emissive: color,
+              emissiveIntensity,
+              transparent: true,
+              opacity: hovered ? 0.9 : 0.7
+            }
+          )
+        ]
+      }
+    ),
+    hasGuard && /* @__PURE__ */ jsxs("mesh", { position: guardPos, scale: 0.15, children: [
+      /* @__PURE__ */ jsx("octahedronGeometry", { args: [1, 0] }),
+      /* @__PURE__ */ jsx(
+        "meshStandardMaterial",
+        {
+          color: AVL_3D_COLORS.guardPass,
+          emissive: AVL_3D_COLORS.guardPass,
+          emissiveIntensity: 0.8
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "mesh",
+      {
+        position: arrowPos,
+        quaternion: arrowQuat,
+        scale: 0.08,
+        children: [
+          /* @__PURE__ */ jsx("coneGeometry", { args: [1, 2, 8] }),
+          /* @__PURE__ */ jsx(
+            "meshStandardMaterial",
+            {
+              color,
+              emissive: color,
+              emissiveIntensity: 0.6
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Avl3DLabel,
+      {
+        position: labelPos,
+        text: event,
+        color: hovered ? "#ffffff" : color,
+        fontSize: hovered ? 11 : 9
+      }
+    ),
+    hovered && /* @__PURE__ */ 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__ */ jsx("group", { position: pt, children: /* @__PURE__ */ jsxs("mesh", { scale: 0.06, children: [
+        effectType === "render-ui" ? /* @__PURE__ */ jsx("boxGeometry", { args: [1.5, 1.5, 0.3] }) : effectType === "persist" ? /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.6, 0.6, 1.5, 8] }) : effectType === "emit" ? /* @__PURE__ */ jsx("sphereGeometry", { args: [1, 8, 8] }) : effectType === "navigate" ? /* @__PURE__ */ jsx("coneGeometry", { args: [0.8, 1.5, 6] }) : effectType === "set" ? /* @__PURE__ */ jsx("tetrahedronGeometry", { args: [1, 0] }) : effectType === "notify" ? /* @__PURE__ */ jsx("dodecahedronGeometry", { args: [0.8, 0] }) : effectType === "call-service" ? /* @__PURE__ */ jsx("torusGeometry", { args: [0.8, 0.3, 6, 12] }) : /* @__PURE__ */ jsx("octahedronGeometry", { args: [0.8, 0] }),
+        /* @__PURE__ */ jsx(
+          "meshStandardMaterial",
+          {
+            color: eColor,
+            emissive: eColor,
+            emissiveIntensity: 0.8
+          }
+        )
+      ] }) }, ei);
+    })
+  ] });
+};
+Avl3DTransitionArc.displayName = "Avl3DTransitionArc";
+var Avl3DTraitScene = ({
+  data,
+  onTransitionClick
+}) => {
+  const statePositions = 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 = 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 = 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__ */ jsxs("group", { children: [
+    /* @__PURE__ */ 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__ */ 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__ */ 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 Vector3(parent.x, parent.y, parent.z);
+  const c = new Vector3(child.x, child.y, child.z);
+  const mid = new Vector3().addVectors(p, c).multiplyScalar(0.5);
+  const dir = new Vector3().subVectors(c, p);
+  const length = dir.length();
+  const yAxis = new Vector3(0, 1, 0);
+  const angle = yAxis.angleTo(dir.normalize());
+  const axis = new 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 = useMemo(() => {
+    const origin = { x: position[0], y: position[1], z: position[2] };
+    return treeLayout3D(expression, origin, 2.5, 1.5);
+  }, [expression, position]);
+  const edges = 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__ */ jsxs("group", { children: [
+    edges.map((edge) => {
+      const geo = edgeGeometry(edge.parent, edge.child);
+      return /* @__PURE__ */ jsxs(
+        "mesh",
+        {
+          position: geo.position,
+          rotation: geo.rotation,
+          children: [
+            /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.015, 0.015, geo.length, 6] }),
+            /* @__PURE__ */ 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__ */ jsxs("group", { position: pos, children: [
+          /* @__PURE__ */ jsxs("mesh", { children: [
+            /* @__PURE__ */ jsx("boxGeometry", { args: [0.6, 0.4, 0.3] }),
+            /* @__PURE__ */ jsx(
+              "meshStandardMaterial",
+              {
+                color: opColor,
+                emissive: opColor,
+                emissiveIntensity: 0.4,
+                roughness: 0.3
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Avl3DLabel,
+            {
+              position: [0, -0.4, 0],
+              text: entry.node.label,
+              color: opColor,
+              fontSize: 10
+            }
+          )
+        ] }, i);
+      }
+      if (entry.node.type === "binding") {
+        return /* @__PURE__ */ jsxs("group", { position: pos, children: [
+          /* @__PURE__ */ jsxs("mesh", { scale: 0.08, children: [
+            /* @__PURE__ */ jsx("torusKnotGeometry", { args: [2, 0.6, 48, 8, 2, 3] }),
+            /* @__PURE__ */ jsx(
+              "meshStandardMaterial",
+              {
+                color: "#4A90D9",
+                emissive: "#4A90D9",
+                emissiveIntensity: 0.4,
+                transparent: true,
+                opacity: 0.85,
+                roughness: 0.3
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Avl3DLabel,
+            {
+              position: [0, -0.35, 0],
+              text: entry.node.label,
+              color: "#4A90D9",
+              fontSize: 9
+            }
+          )
+        ] }, i);
+      }
+      return /* @__PURE__ */ jsxs("group", { position: pos, children: [
+        /* @__PURE__ */ jsxs("mesh", { rotation: [Math.PI / 6, Math.PI / 4, 0], children: [
+          /* @__PURE__ */ jsx("boxGeometry", { args: [0.2, 0.2, 0.2] }),
+          /* @__PURE__ */ jsx(
+            "meshStandardMaterial",
+            {
+              color: "#888888",
+              emissive: "#666666",
+              emissiveIntensity: 0.2,
+              roughness: 0.5
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Avl3DLabel,
+          {
+            position: [0, -0.3, 0],
+            text: entry.node.label,
+            color: "#999999",
+            fontSize: 8
+          }
+        )
+      ] }, i);
+    })
+  ] });
+};
+Avl3DExprTree.displayName = "Avl3DExprTree";
+var Avl3DTransitionScene = ({
+  data
+}) => {
+  return /* @__PURE__ */ jsxs("group", { children: [
+    /* @__PURE__ */ jsx(
+      Avl3DStateNode,
+      {
+        name: data.from,
+        position: [0, 4, 0]
+      }
+    ),
+    /* @__PURE__ */ jsxs("group", { position: [0, 2.2, 0], children: [
+      /* @__PURE__ */ jsxs("mesh", { children: [
+        /* @__PURE__ */ jsx("boxGeometry", { args: [2, 0.6, 0.4] }),
+        /* @__PURE__ */ jsx(
+          "meshStandardMaterial",
+          {
+            color: AVL_3D_COLORS.transitionArc,
+            emissive: AVL_3D_COLORS.transitionArc,
+            emissiveIntensity: 0.5,
+            roughness: 0.3
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Avl3DLabel,
+        {
+          position: [0, 0, 0.3],
+          text: data.event,
+          color: "#ffffff",
+          fontSize: 13
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("mesh", { position: [0, 3.1, 0], children: [
+      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.02, 0.02, 1.2, 6] }),
+      /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#555555", transparent: true, opacity: 0.5 })
+    ] }),
+    data.guard && /* @__PURE__ */ jsxs("group", { position: [0, 1, 0], children: [
+      /* @__PURE__ */ jsxs("mesh", { rotation: [0, 0, Math.PI / 4], children: [
+        /* @__PURE__ */ jsx("boxGeometry", { args: [0.5, 0.5, 0.3] }),
+        /* @__PURE__ */ jsx(
+          "meshStandardMaterial",
+          {
+            color: AVL_3D_COLORS.guardPass,
+            emissive: AVL_3D_COLORS.guardPass,
+            emissiveIntensity: 0.6
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("mesh", { position: [0, 0.7, 0], children: [
+        /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.02, 0.02, 0.8, 6] }),
+        /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#555555", transparent: true, opacity: 0.5 })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Avl3DExprTree,
+        {
+          expression: data.guard,
+          position: [3, 0, 0]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Avl3DLabel,
+        {
+          position: [1.5, 0.3, 0],
+          text: "guard",
+          color: AVL_3D_COLORS.guardPass,
+          fontSize: 9
+        }
+      )
+    ] }),
+    data.effects.length > 0 && /* @__PURE__ */ jsxs("group", { position: [0, data.guard ? -0.5 : 0.5, 0], children: [
+      /* @__PURE__ */ 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__ */ jsx(
+          Avl3DExprTree,
+          {
+            expression: effect,
+            position: [xOffset, -1, 0]
+          },
+          i
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsxs("mesh", { position: [0, data.guard ? -2.5 : -1.5, 0], children: [
+      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.02, 0.02, 1.2, 6] }),
+      /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#555555", transparent: true, opacity: 0.5 })
+    ] }),
+    /* @__PURE__ */ 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 = useMemo(() => `stars-${level}`, [level]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      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__ */ jsx(
+      Sparkles,
+      {
+        count: cfg.count,
+        size: cfg.size,
+        speed: cfg.speed,
+        opacity: cfg.opacity,
+        scale: cfg.scale,
+        color: cfg.color
+      },
+      `sparkle-${level}-${i}`
+    )),
+    dof ? /* @__PURE__ */ jsxs(EffectComposer, { children: [
+      /* @__PURE__ */ jsx(
+        Bloom,
+        {
+          intensity: bloom.intensity,
+          luminanceThreshold: bloom.luminanceThreshold,
+          luminanceSmoothing: bloom.luminanceSmoothing,
+          mipmapBlur: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DepthOfField,
+        {
+          focusDistance: dof.focusDistance,
+          focalLength: dof.focalLength,
+          bokehScale: dof.bokehScale
+        }
+      ),
+      /* @__PURE__ */ jsx(Vignette, { eskil: false, offset: 0.2, darkness: 0.35 })
+    ] }) : /* @__PURE__ */ jsxs(EffectComposer, { children: [
+      /* @__PURE__ */ jsx(
+        Bloom,
+        {
+          intensity: bloom.intensity,
+          luminanceThreshold: bloom.luminanceThreshold,
+          luminanceSmoothing: bloom.luminanceSmoothing,
+          mipmapBlur: true
+        }
+      ),
+      /* @__PURE__ */ jsx(Vignette, { eskil: false, offset: 0.2, darkness: 0.35 })
+    ] })
+  ] });
+};
+Avl3DEffects.displayName = "Avl3DEffects";
+var DEFAULT_CONFIG2 = {
+  modelOverrides: {},
+  effectsEnabled: true
+};
+var Avl3DContext = createContext(DEFAULT_CONFIG2);
+function useAvl3DConfig() {
+  return useContext(Avl3DContext);
+}
+function CameraController2({ targetPosition, targetLookAt, animated }) {
+  const { camera } = useThree();
+  const targetPosVec = useRef(new THREE6.Vector3(...targetPosition));
+  const targetLookVec = useRef(new THREE6.Vector3(...targetLookAt));
+  const isAnimating = useRef(false);
+  useEffect(() => {
+    const newTarget = new THREE6.Vector3(...targetPosition);
+    const newLookAt = new THREE6.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]);
+  useFrame((_, delta) => {
+    if (!isAnimating.current) return;
+    const speed = 3;
+    camera.position.x = THREE6.MathUtils.damp(camera.position.x, targetPosVec.current.x, speed, delta);
+    camera.position.y = THREE6.MathUtils.damp(camera.position.y, targetPosVec.current.y, speed, delta);
+    camera.position.z = THREE6.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 = useRef(null);
+  const opacityRef = useRef(1);
+  useFrame((_, delta) => {
+    if (!groupRef.current) return;
+    const target = animating ? 0 : 1;
+    opacityRef.current = THREE6.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__ */ jsx("group", { ref: groupRef, children });
+}
+var Avl3DViewer = ({
+  schema: schemaProp,
+  className,
+  animated = true,
+  initialOrbital,
+  initialTrait,
+  onZoomChange,
+  width = "100%",
+  height = 500,
+  effects = true,
+  modelOverrides = {}
+}) => {
+  const schema = useMemo(() => {
+    if (typeof schemaProp === "string") {
+      try {
+        return JSON.parse(schemaProp);
+      } catch {
+        return { name: "Error", orbitals: [] };
+      }
+    }
+    return schemaProp;
+  }, [schemaProp]);
+  const configValue = useMemo(() => ({
+    modelOverrides,
+    effectsEnabled: effects
+  }), [modelOverrides, effects]);
+  const [state, dispatch] = useReducer(zoomReducer, initialZoomState);
+  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]);
+  useEffect(() => {
+    onZoomChange?.(state.level, {
+      orbital: state.selectedOrbital ?? void 0,
+      trait: state.selectedTrait ?? void 0
+    });
+  }, [state.level, state.selectedOrbital, state.selectedTrait, onZoomChange]);
+  useEffect(() => {
+    if (!state.animating) return;
+    const timer = setTimeout(() => {
+      dispatch({ type: "ANIMATION_COMPLETE" });
+    }, 800);
+    return () => clearTimeout(timer);
+  }, [state.animating]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Escape") {
+      dispatch({ type: "ZOOM_OUT" });
+    }
+  }, []);
+  const handleOrbitalClick = useCallback((name) => {
+    dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: name, targetPosition: { x: 0, y: 0 } });
+  }, []);
+  const handleTraitClick = useCallback((name) => {
+    dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: { x: 0, y: 0 } });
+  }, []);
+  const [highlightedTrait, setHighlightedTrait] = React21.useState(null);
+  const handleTransitionClick = useCallback((index) => {
+    dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: { x: 0, y: 0 } });
+  }, []);
+  const handleBreadcrumbClick = 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 = useMemo(() => {
+    switch (state.level) {
+      case "application": {
+        const data = parseApplicationLevel(schema);
+        return /* @__PURE__ */ jsx(
+          Avl3DApplicationScene,
+          {
+            data,
+            onOrbitalClick: handleOrbitalClick
+          }
+        );
+      }
+      case "orbital": {
+        if (!state.selectedOrbital) return null;
+        const orbData = parseOrbitalLevel(schema, state.selectedOrbital);
+        if (!orbData) return null;
+        return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs(React21.Fragment, { children: [
+              i > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
+              i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx(
+                Box,
+                {
+                  as: "span",
+                  className: "cursor-pointer hover:underline",
+                  onClick: () => handleBreadcrumbClick(crumb.level),
+                  children: /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: crumb.label })
+                }
+              ) : /* @__PURE__ */ jsx(Typography, { variant: "small", color: "primary", className: "font-bold", children: crumb.label })
+            ] }, crumb.level))
+          }
+        ),
+        state.level !== "application" && /* @__PURE__ */ 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__ */ jsx(
+          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__ */ jsx(Avl3DContext.Provider, { value: configValue, children: /* @__PURE__ */ jsxs(
+              Scene3D,
+              {
+                background: AVL_3D_COLORS.background,
+                fog: { color: AVL_3D_COLORS.fog, near: 30, far: 80 },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Camera3D,
+                    {
+                      mode: "perspective",
+                      position: cameraConfig.position,
+                      target: cameraConfig.target,
+                      enableOrbit: true,
+                      minDistance: 3,
+                      maxDistance: 80
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Lighting3D,
+                    {
+                      ambientIntensity: 0.35,
+                      ambientColor: "#8090c0",
+                      directionalIntensity: 0.5,
+                      directionalColor: "#c0d0f0",
+                      directionalPosition: [8, 15, 12],
+                      shadows: false
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "pointLight",
+                    {
+                      position: [0, -10, 0],
+                      color: "#2040a0",
+                      intensity: 0.15,
+                      distance: 50,
+                      decay: 2
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    CameraController2,
+                    {
+                      targetPosition: cameraConfig.position,
+                      targetLookAt: cameraConfig.target,
+                      animated
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(SceneFade, { animating: state.animating, children: sceneContent }),
+                  /* @__PURE__ */ jsx(Avl3DEffects, { level: state.level, enabled: effects })
+                ]
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
+Avl3DViewer.displayName = "Avl3DViewer";
 function isInFrustum(position, camera, padding = 0) {
   const frustum = new THREE6.Frustum();
   const projScreenMatrix = new THREE6.Matrix4();
@@ -3521,4 +5935,4 @@ var SpatialHashGrid = class {
   }
 };
 
-export { AssetLoader, Camera3D, Canvas3DErrorBoundary, Canvas3DLoadingState, FeatureRenderer, FeatureRenderer3D, GameCanvas3D, GameCanvas3DBattleTemplate, GameCanvas3DCastleTemplate, GameCanvas3DWorldMapTemplate, Lighting3D, ModelLoader, PhysicsObject3D, Scene3D, SpatialHashGrid, TileRenderer, UnitRenderer, assetLoader, calculateLODLevel, createGridHighlight, cullInstancedMesh, filterByFrustum, getCellsInRadius, getNeighbors, getVisibleIndices, gridDistance, gridManhattanDistance, gridToWorld, isInBounds, isInFrustum, normalizeMouseCoordinates, preloadFeatures, raycastToObjects, raycastToPlane, updateInstanceLOD, useAssetLoader, useGameCanvas3DEvents, usePhysics3DController, useRaycaster, useSceneGraph, useThree3 as useThree, worldToGrid };
+export { AVL_3D_COLORS, AssetLoader, Avl3DApplicationScene, Avl3DContext, Avl3DEffects, Avl3DOrbitalScene, Avl3DTraitScene, Avl3DTransitionScene, Avl3DViewer, CAMERA_POSITIONS, Camera3D, Canvas3DErrorBoundary, Canvas3DLoadingState, FeatureRenderer, FeatureRenderer3D, GameCanvas3D, GameCanvas3DBattleTemplate, GameCanvas3DCastleTemplate, GameCanvas3DWorldMapTemplate, Lighting3D, ModelLoader, PhysicsObject3D, Scene3D, SpatialHashGrid, TileRenderer, UnitRenderer, arcCurve3D, assetLoader, calculateLODLevel, createGridHighlight, cullInstancedMesh, fibonacciSpherePositions, filterByFrustum, getCellsInRadius, getNeighbors, getVisibleIndices, goldenSpiralPositions, gridDistance, gridManhattanDistance, gridToWorld, isInBounds, isInFrustum, normalizeMouseCoordinates, orbitRingPositions, preloadFeatures, raycastToObjects, raycastToPlane, selfLoopCurve3D, treeLayout3D, updateInstanceLOD, useAssetLoader, useAvl3DConfig, useGameCanvas3DEvents, usePhysics3DController, useRaycaster, useSceneGraph, useThree3 as useThree, worldToGrid };