@almadar/shell-web 0.0.0-stage → 0.1.0

package/dist/three/index.js

@@ -0,0 +1,3896 @@
+import { goldenSpiralPositions, forceDirectedPositions, Avl3DOrbitalNode, Avl3DCrossWire, Avl3DEntityCore, fibonacciSpherePositions, Avl3DLabel, Avl3DStateNode, Avl3DTransitionArc, Avl3DExprTree, AVL_3D_COLORS, zoomReducer, initialZoomState, CAMERA_POSITIONS, getBreadcrumbs, Avl3DTooltip } from '../chunk-DJ433ET5.js';
+export { AVL_3D_COLORS, CAMERA_POSITIONS, arcCurve3D, fibonacciSpherePositions, goldenSpiralPositions, orbitRingPositions, selfLoopCurve3D, treeLayout3D } from '../chunk-DJ433ET5.js';
+import { useAvl3DPalette, Avl3DContext } from '../chunk-EOWMARUB.js';
+export { Avl3DContext, useAvl3DConfig } from '../chunk-EOWMARUB.js';
+import { useOnScreen, useCanvasTheme, withSeries, resolveDrawableColors, markColor, applySceneMaterials, collectDrawnItems, buildHitIndex, withPreviewPosition, isValidScenePos, isAnimatedShape, applyShapeAnimation, expandFxLayer, isAnimatedGroup, applyMeshAnimation, spriteAssetState, SPRITE_FALLBACK_FILL, isAnimatedMesh, clampSegments, polyhedronBounds } from '../chunk-PC7K4SK7.js';
+import { parseTransitionLevel, parseTraitLevel, parseOrbitalLevel, parseApplicationLevel } from '../chunk-VFF5OO47.js';
+import { AVL_INK, resolveThemeColor } from '../chunk-DFNZUYX4.js';
+import { keyMapCode, resolveKeyMapEvent } from '../chunk-B4BU77LT.js';
+import '../chunk-DYEKAA4L.js';
+import { useEventBus, useTranslate, cn, useEmitEvent, isAtlasAsset, getAtlas, subRectFor, Box, HStack, Typography, pressableProps, useTheme, useThemeScope } from '../chunk-MBQAMMSE.js';
+import '../chunk-G7DCAZ22.js';
+import React3, { createContext, forwardRef, useRef, useState, useMemo, useEffect, useCallback, useImperativeHandle, Component, useContext, useReducer, useLayoutEffect } from 'react';
+import { Canvas, useThree, useFrame } from '@react-three/fiber';
+import * as THREE5 from 'three';
+import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
+import { Grid, OrbitControls, Billboard, Text, Stars, Sparkles } from '@react-three/drei';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createLogger } from '@almadar/logger';
+import { Bloom, Vignette, EffectComposer, DepthOfField } from '@react-three/postprocessing';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { clone } from 'three/examples/jsm/utils/SkeletonUtils.js';
+import { OrbitControls as OrbitControls$1 } from 'three/examples/jsm/controls/OrbitControls.js';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
+
+function useGameCanvas3DEvents(options) {
+  const {
+    tileClickEvent,
+    unitClickEvent,
+    featureClickEvent,
+    canvasClickEvent,
+    tileHoverEvent,
+    tileLeaveEvent,
+    unitAnimationEvent,
+    cameraChangeEvent,
+    onTileClick,
+    onUnitClick,
+    onFeatureClick,
+    onCanvasClick,
+    onTileHover,
+    onUnitAnimation
+  } = options;
+  const emit = useEmitEvent();
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const handleTileClick = useCallback(
+    (tile, event) => {
+      if (tileClickEvent) {
+        emit(tileClickEvent, {
+          tileId: tile.id,
+          x: tile.x,
+          z: tile.z ?? tile.y ?? 0,
+          type: tile.type,
+          terrain: tile.terrain,
+          elevation: tile.elevation
+        });
+      }
+      optionsRef.current.onTileClick?.(tile, event);
+    },
+    [tileClickEvent, emit]
+  );
+  const handleUnitClick = useCallback(
+    (unit, event) => {
+      if (unitClickEvent) {
+        emit(unitClickEvent, {
+          unitId: unit.id,
+          x: unit.x,
+          z: unit.z ?? unit.y ?? 0,
+          unitType: unit.unitType,
+          name: unit.name,
+          team: unit.team,
+          faction: unit.faction,
+          health: unit.health,
+          maxHealth: unit.maxHealth
+        });
+      }
+      optionsRef.current.onUnitClick?.(unit, event);
+    },
+    [unitClickEvent, emit]
+  );
+  const handleFeatureClick = useCallback(
+    (feature, event) => {
+      if (featureClickEvent) {
+        emit(featureClickEvent, {
+          featureId: feature.id,
+          x: feature.x,
+          z: feature.z ?? feature.y ?? 0,
+          type: feature.type,
+          elevation: feature.elevation
+        });
+      }
+      optionsRef.current.onFeatureClick?.(feature, event);
+    },
+    [featureClickEvent, emit]
+  );
+  const handleCanvasClick = useCallback(
+    (event) => {
+      if (canvasClickEvent) {
+        emit(canvasClickEvent, {
+          clientX: event.clientX,
+          clientY: event.clientY,
+          button: event.button
+        });
+      }
+      optionsRef.current.onCanvasClick?.(event);
+    },
+    [canvasClickEvent, emit]
+  );
+  const handleTileHover = useCallback(
+    (tile, event) => {
+      if (tile) {
+        if (tileHoverEvent) {
+          emit(tileHoverEvent, {
+            tileId: tile.id,
+            x: tile.x,
+            z: tile.z ?? tile.y ?? 0,
+            type: tile.type
+          });
+        }
+      } else {
+        if (tileLeaveEvent) {
+          emit(tileLeaveEvent, {});
+        }
+      }
+      optionsRef.current.onTileHover?.(tile, event);
+    },
+    [tileHoverEvent, tileLeaveEvent, emit]
+  );
+  const handleUnitAnimation = useCallback(
+    (unitId, state) => {
+      if (unitAnimationEvent) {
+        emit(unitAnimationEvent, {
+          unitId,
+          state,
+          timestamp: Date.now()
+        });
+      }
+      optionsRef.current.onUnitAnimation?.(unitId, state);
+    },
+    [unitAnimationEvent, emit]
+  );
+  const handleCameraChange = useCallback(
+    (position) => {
+      if (cameraChangeEvent) {
+        emit(cameraChangeEvent, {
+          position,
+          timestamp: Date.now()
+        });
+      }
+    },
+    [cameraChangeEvent, emit]
+  );
+  return {
+    handleTileClick,
+    handleUnitClick,
+    handleFeatureClick,
+    handleCanvasClick,
+    handleTileHover,
+    handleUnitAnimation,
+    handleCameraChange
+  };
+}
+function Canvas3DLoadingState({
+  progress = 0,
+  loaded = 0,
+  total = 0,
+  message: messageProp,
+  details,
+  showSpinner = true,
+  className
+}) {
+  const { t, locale } = useTranslate();
+  const message = messageProp ?? t("canvas3d.loadingScene");
+  const numberFormat = new Intl.NumberFormat(locale);
+  const clampedProgress = Math.max(0, Math.min(100, progress));
+  const hasProgress = total > 0;
+  return /* @__PURE__ */ jsxs("div", { className: `canvas-3d-loading ${className || ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "canvas-3d-loading__content", children: [
+      showSpinner && /* @__PURE__ */ jsxs("div", { className: "canvas-3d-loading__spinner", children: [
+        /* @__PURE__ */ jsx("div", { className: "spinner__ring" }),
+        /* @__PURE__ */ jsx("div", { className: "spinner__ring spinner__ring--secondary" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "canvas-3d-loading__message", children: message }),
+      details && /* @__PURE__ */ jsx("div", { className: "canvas-3d-loading__details", children: details }),
+      hasProgress && /* @__PURE__ */ jsxs("div", { className: "canvas-3d-loading__progress", children: [
+        /* @__PURE__ */ jsx("div", { className: "progress__bar", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "progress__fill",
+            style: { width: `${clampedProgress}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "progress__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "progress__percentage", children: new Intl.NumberFormat(locale, { style: "percent" }).format(clampedProgress / 100) }),
+          /* @__PURE__ */ jsxs("span", { className: "progress__count", children: [
+            "(",
+            numberFormat.format(loaded),
+            "/",
+            numberFormat.format(total),
+            ")"
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "canvas-3d-loading__background", children: /* @__PURE__ */ jsx("div", { className: "bg__grid" }) })
+  ] });
+}
+var log = createLogger("almadar:ui:game:canvas3d:error-boundary");
+function Canvas3DErrorFallback({ error, errorInfo, onReset }) {
+  const { t } = useTranslate();
+  return /* @__PURE__ */ jsx("div", { className: "canvas-3d-error", children: /* @__PURE__ */ jsxs("div", { className: "canvas-3d-error__content", children: [
+    /* @__PURE__ */ jsx("div", { className: "canvas-3d-error__icon", children: "\u26A0\uFE0F" }),
+    /* @__PURE__ */ jsx("h2", { className: "canvas-3d-error__title", children: t("canvas3d.errorTitle") }),
+    /* @__PURE__ */ jsx("p", { className: "canvas-3d-error__message", children: t("canvas3d.errorMessage") }),
+    error && /* @__PURE__ */ jsxs("details", { className: "canvas-3d-error__details", children: [
+      /* @__PURE__ */ jsx("summary", { children: t("canvas3d.errorDetails") }),
+      /* @__PURE__ */ jsxs("pre", { className: "error__stack", children: [
+        error.message,
+        "\n",
+        error.stack
+      ] }),
+      errorInfo && /* @__PURE__ */ jsx("pre", { className: "error__component-stack", children: errorInfo.componentStack })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "canvas-3d-error__actions", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "error__button error__button--primary",
+          onClick: onReset,
+          children: t("common.retry")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "error__button error__button--secondary",
+          onClick: () => window.location.reload(),
+          children: t("canvas3d.reloadPage")
+        }
+      )
+    ] })
+  ] }) });
+}
+var Canvas3DErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      error,
+      errorInfo: null
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({ errorInfo });
+    this.props.onError?.(error, errorInfo);
+    log.error("Error caught", { error });
+    log.error("Component stack", { componentStack: errorInfo.componentStack ?? "<none>" });
+  }
+  handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null
+    });
+    this.props.onReset?.();
+  };
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ jsx(
+        Canvas3DErrorFallback,
+        {
+          error: this.state.error,
+          errorInfo: this.state.errorInfo,
+          onReset: this.handleReset
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+function Lighting3D({
+  ambientIntensity = 0.6,
+  ambientColor = "#ffffff",
+  directionalIntensity = 0.8,
+  directionalColor = "#ffffff",
+  directionalPosition = [10, 20, 10],
+  hemisphereIntensity = 0.3,
+  hemisphereColor = "#87ceeb",
+  hemisphereGroundColor = "#362d1d",
+  points,
+  shadows = true,
+  shadowMapSize = 2048,
+  shadowCameraSize = 20,
+  shadowBias = -1e-3,
+  shadowNormalBias,
+  shadowCameraNear = 0.1,
+  shadowCameraFar = 100,
+  showHelpers = false
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("ambientLight", { intensity: ambientIntensity, color: ambientColor }),
+    /* @__PURE__ */ jsx(
+      "directionalLight",
+      {
+        position: directionalPosition,
+        intensity: directionalIntensity,
+        color: directionalColor,
+        castShadow: shadows,
+        "shadow-mapSize": [shadowMapSize, shadowMapSize],
+        "shadow-camera-left": -shadowCameraSize,
+        "shadow-camera-right": shadowCameraSize,
+        "shadow-camera-top": shadowCameraSize,
+        "shadow-camera-bottom": -shadowCameraSize,
+        "shadow-camera-near": shadowCameraNear,
+        "shadow-camera-far": shadowCameraFar,
+        "shadow-bias": shadowBias,
+        "shadow-normalBias": shadowNormalBias
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "hemisphereLight",
+      {
+        intensity: hemisphereIntensity,
+        color: hemisphereColor,
+        groundColor: hemisphereGroundColor
+      }
+    ),
+    points?.map((p, i) => /* @__PURE__ */ jsx(
+      "pointLight",
+      {
+        position: p.position,
+        intensity: p.intensity,
+        color: p.color,
+        distance: p.distance,
+        decay: p.decay
+      },
+      i
+    )),
+    showHelpers && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      "directionalLightHelper",
+      {
+        args: [
+          new THREE5.DirectionalLight(directionalColor, directionalIntensity),
+          5
+        ]
+      }
+    ) })
+  ] });
+}
+function Effects3D({ post }) {
+  if (!post || !post.bloom && !post.vignette) return null;
+  const passes = [];
+  if (post.bloom) {
+    passes.push(
+      /* @__PURE__ */ jsx(
+        Bloom,
+        {
+          intensity: post.bloom.intensity ?? 1,
+          luminanceThreshold: post.bloom.threshold ?? 0.9,
+          luminanceSmoothing: post.bloom.smoothing ?? 0.3
+        },
+        "bloom"
+      )
+    );
+  }
+  if (post.vignette) {
+    passes.push(
+      /* @__PURE__ */ jsx(
+        Vignette,
+        {
+          offset: post.vignette.offset ?? 0.3,
+          darkness: post.vignette.darkness ?? 0.6
+        },
+        "vignette"
+      )
+    );
+  }
+  return /* @__PURE__ */ jsx(EffectComposer, { children: passes });
+}
+function CameraController3D({
+  onCameraChange
+}) {
+  const { camera } = useThree();
+  useEffect(() => {
+    if (onCameraChange) {
+      onCameraChange({
+        x: camera.position.x,
+        y: camera.position.y,
+        z: camera.position.z
+      });
+    }
+  }, [camera.position, onCameraChange]);
+  return null;
+}
+function FollowCamera3D({
+  target,
+  offset
+}) {
+  const { camera } = useThree();
+  const look = useRef(new THREE5.Vector3(target[0], target[1], target[2]));
+  const goal = useRef(new THREE5.Vector3());
+  useFrame((_, delta) => {
+    const t = Math.min(1, delta * 5);
+    goal.current.set(target[0] + offset[0], target[1] + offset[1], target[2] + offset[2]);
+    camera.position.lerp(goal.current, t);
+    look.current.lerp(goal.current.set(target[0], target[1], target[2]), t);
+    camera.lookAt(look.current);
+  });
+  return null;
+}
+
+// src/lib/drawable/projector3d.ts
+function create3DProjector(opts = {}) {
+  const cellSize = opts.cellSize ?? 1;
+  const offsetX = opts.offsetX ?? 0;
+  const offsetZ = opts.offsetZ ?? 0;
+  return {
+    cellSize,
+    toWorld: (pos) => [pos.x * cellSize + offsetX, pos.z ?? 0, pos.y * cellSize + offsetZ]
+  };
+}
+var BoneStore = class {
+  bones = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  register(name, bone) {
+    this.bones.set(name, bone);
+    this.notify();
+    return () => {
+      if (this.bones.get(name) === bone) {
+        this.bones.delete(name);
+        this.notify();
+      }
+    };
+  }
+  get(name) {
+    return this.bones.get(name);
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  notify() {
+    for (const l of this.listeners) l();
+  }
+};
+var BoneRegistryContext = createContext(null);
+var log2 = createLogger("almadar:ui:game:model-loader");
+var gltfCache = /* @__PURE__ */ new Map();
+function loadGltfCached(url, assetRoot) {
+  const key = `${assetRoot}|${url}`;
+  let entry = gltfCache.get(key);
+  if (!entry) {
+    const pending = {
+      promise: new Promise((resolveDone) => {
+        const loader = new GLTFLoader();
+        loader.setResourcePath(assetRoot);
+        loader.load(
+          url,
+          (gltf) => {
+            log2.debug("Loaded", { url, clips: gltf.animations.length });
+            pending.gltf = { scene: gltf.scene, animations: gltf.animations };
+            resolveDone();
+          },
+          void 0,
+          (err) => {
+            log2.warn("Failed", { url, error: err instanceof Error ? err : String(err) });
+            pending.error = err instanceof Error ? err : new Error(String(err));
+            resolveDone();
+          }
+        );
+      })
+    };
+    entry = pending;
+    gltfCache.set(key, entry);
+  }
+  return entry;
+}
+function detectAssetRoot(modelUrl) {
+  const idx = modelUrl.indexOf("/3d/");
+  if (idx !== -1) {
+    return modelUrl.substring(0, idx + 4);
+  }
+  return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
+}
+function stateFromEntry(entry) {
+  if (!entry) return { model: null, clips: [], isLoading: false, error: null };
+  if (entry.gltf) return { model: entry.gltf.scene, clips: entry.gltf.animations, isLoading: false, error: null };
+  return { model: null, clips: [], isLoading: !entry.error, error: entry.error ?? null };
+}
+function useGLTFModel(url, resourceBasePath) {
+  const [state, setState] = useState(
+    () => stateFromEntry(url ? loadGltfCached(url, resourceBasePath || detectAssetRoot(url)) : null)
+  );
+  useEffect(() => {
+    if (!url) {
+      setState({ model: null, clips: [], isLoading: false, error: null });
+      return;
+    }
+    const entry = loadGltfCached(url, resourceBasePath || detectAssetRoot(url));
+    setState(stateFromEntry(entry));
+    if (entry.gltf || entry.error) return;
+    let cancelled = false;
+    void entry.promise.then(() => {
+      if (!cancelled) setState(stateFromEntry(entry));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [url, resourceBasePath]);
+  return state;
+}
+function ModelLoader({
+  url,
+  position = [0, 0, 0],
+  scale = 1,
+  rotation = [0, 0, 0],
+  isSelected = false,
+  isHovered = false,
+  onClick,
+  onHover,
+  fallbackGeometry = "box",
+  castShadow = true,
+  receiveShadow = true,
+  resourceBasePath,
+  animation,
+  tint
+}) {
+  const { model: loadedModel, clips, isLoading, error } = useGLTFModel(url, resourceBasePath);
+  const model = useMemo(() => {
+    if (!loadedModel) return null;
+    const cloned = clone(loadedModel);
+    cloned.updateMatrixWorld(true);
+    const tintColor = tint ? new THREE5.Color(tint) : null;
+    cloned.traverse((child) => {
+      if (child instanceof THREE5.Mesh) {
+        child.castShadow = castShadow;
+        child.receiveShadow = receiveShadow;
+        if (tintColor && child.material instanceof THREE5.MeshStandardMaterial) {
+          const mat = child.material.clone();
+          mat.color.multiply(tintColor);
+          child.material = mat;
+        }
+      }
+    });
+    return cloned;
+  }, [loadedModel, castShadow, receiveShadow, tint]);
+  const mixer = useMemo(() => model ? new THREE5.AnimationMixer(model) : null, [model]);
+  useEffect(() => {
+    if (!mixer || !animation || clips.length === 0) return;
+    const wanted = animation.toLowerCase();
+    const clip = clips.find((c) => c.name === animation) ?? clips.find((c) => c.name.toLowerCase() === wanted);
+    if (!clip) return;
+    const action = mixer.clipAction(clip);
+    action.reset().fadeIn(0.15).play();
+    return () => {
+      action.fadeOut(0.15);
+    };
+  }, [mixer, clips, animation]);
+  useFrame((_, delta) => {
+    mixer?.update(delta);
+  });
+  const normFactor = useMemo(() => {
+    if (!model) return 1;
+    const box = new THREE5.Box3().setFromObject(model);
+    const size = new THREE5.Vector3();
+    box.getSize(size);
+    const maxDim = Math.max(size.x, size.y, size.z);
+    if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
+    return 1 / maxDim;
+  }, [model]);
+  const scaleArray = useMemo(() => {
+    const base = typeof scale === "number" ? [scale, scale, scale] : scale;
+    return [base[0] * normFactor, base[1] * normFactor, base[2] * normFactor];
+  }, [scale, normFactor]);
+  const rotationRad = useMemo(() => {
+    return [
+      rotation[0] * Math.PI / 180,
+      rotation[1] * Math.PI / 180,
+      rotation[2] * Math.PI / 180
+    ];
+  }, [rotation]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("group", { position, children: /* @__PURE__ */ jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
+      /* @__PURE__ */ jsx("ringGeometry", { args: [0.3, 0.35, 16] }),
+      /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#4a90d9", transparent: true, opacity: 0.8 })
+    ] }) });
+  }
+  if (error || !model) {
+    if (fallbackGeometry === "none") {
+      return /* @__PURE__ */ jsx("group", { position });
+    }
+    const fallbackProps = {
+      onClick,
+      onPointerOver: () => onHover?.(true),
+      onPointerOut: () => onHover?.(false)
+    };
+    return /* @__PURE__ */ jsxs("group", { position, children: [
+      (isSelected || isHovered) && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.02, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+        /* @__PURE__ */ jsx("ringGeometry", { args: [0.6, 0.7, 32] }),
+        /* @__PURE__ */ jsx(
+          "meshBasicMaterial",
+          {
+            color: isSelected ? 16755200 : 16777215,
+            transparent: true,
+            opacity: 0.5
+          }
+        )
+      ] }),
+      fallbackGeometry === "box" && /* @__PURE__ */ jsxs("mesh", { ...fallbackProps, position: [0, 0.5, 0], children: [
+        /* @__PURE__ */ jsx("boxGeometry", { args: [0.8, 0.8, 0.8] }),
+        /* @__PURE__ */ jsx("meshStandardMaterial", { color: error ? 16729156 : 8947848 })
+      ] }),
+      fallbackGeometry === "sphere" && /* @__PURE__ */ jsxs("mesh", { ...fallbackProps, position: [0, 0.5, 0], children: [
+        /* @__PURE__ */ jsx("sphereGeometry", { args: [0.4, 16, 16] }),
+        /* @__PURE__ */ jsx("meshStandardMaterial", { color: error ? 16729156 : 8947848 })
+      ] }),
+      fallbackGeometry === "cylinder" && /* @__PURE__ */ jsxs("mesh", { ...fallbackProps, position: [0, 0.5, 0], children: [
+        /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.3, 0.3, 0.8, 16] }),
+        /* @__PURE__ */ jsx("meshStandardMaterial", { color: error ? 16729156 : 8947848 })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "group",
+    {
+      position,
+      rotation: rotationRad,
+      onClick,
+      onPointerOver: () => onHover?.(true),
+      onPointerOut: () => onHover?.(false),
+      children: [
+        (isSelected || isHovered) && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.02, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+          /* @__PURE__ */ jsx("ringGeometry", { args: [0.6, 0.7, 32] }),
+          /* @__PURE__ */ jsx(
+            "meshBasicMaterial",
+            {
+              color: isSelected ? 16755200 : 16777215,
+              transparent: true,
+              opacity: 0.5
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("primitive", { object: model, scale: scaleArray })
+      ]
+    }
+  );
+}
+var mesh3dLog = createLogger("almadar:ui:drawable-3d");
+var warnedUnsupported = /* @__PURE__ */ new Set();
+var warnUnsupported3d = (kind) => {
+  if (warnedUnsupported.has(kind)) return;
+  warnedUnsupported.add(kind);
+  mesh3dLog.warn("unsupported drawable kind on the 3D backend \u2014 skipped", { kind });
+};
+var CrossOriginTextureLoader = class extends THREE5.TextureLoader {
+  constructor() {
+    super();
+    this.crossOrigin = "anonymous";
+  }
+};
+function useBillboardTexture(url) {
+  const [state, setState] = React3.useState({
+    texture: null,
+    error: false
+  });
+  React3.useEffect(() => {
+    let active = true;
+    const loader = new CrossOriginTextureLoader();
+    loader.load(
+      url,
+      (texture) => {
+        if (!active) return;
+        texture.colorSpace = THREE5.SRGBColorSpace;
+        setState({ texture, error: false });
+      },
+      void 0,
+      () => {
+        if (!active) return;
+        setState({ texture: null, error: true });
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [url]);
+  return state;
+}
+function useAtlasFrame(asset) {
+  const [tick, setTick] = React3.useState(0);
+  React3.useEffect(() => {
+    if (!isAtlasAsset(asset)) return;
+    getAtlas(asset.atlas, () => setTick((t) => t + 1));
+  }, [asset, tick]);
+  return React3.useMemo(() => {
+    if (!isAtlasAsset(asset)) return { frame: null, ready: true };
+    const atlas = getAtlas(asset.atlas, () => setTick((t) => t + 1));
+    if (!atlas) {
+      return { frame: null, ready: false };
+    }
+    const r = subRectFor(atlas, asset.sprite);
+    if (!r) return { frame: null, ready: true };
+    return { frame: { x: r.sx, y: r.sy, w: r.sw, h: r.sh }, ready: true };
+  }, [asset, tick]);
+}
+function SpriteBillboard({ node, world, cellSize = 1, groupOpacity = 1 }) {
+  const { texture, error: textureError } = useBillboardTexture(node.asset.url);
+  const { frame: atlasFrame, ready: atlasReady } = useAtlasFrame(node.asset);
+  const frame = node.frame ?? atlasFrame;
+  const anchor = node.anchor ?? "top-left";
+  const size = React3.useMemo(() => {
+    const img = texture?.image;
+    const imgW = img?.width || 1;
+    const imgH = img?.height || 1;
+    const aspect = frame ? frame.w / frame.h : imgW / imgH;
+    if (anchor === "top-left") {
+      const width2 = (node.width ?? 1) * cellSize;
+      const height2 = (node.height ?? 1) * cellSize;
+      return { width: width2, height: height2, imgW, imgH };
+    }
+    const height = node.height ?? 1;
+    const width = node.width ?? height * aspect;
+    return { width: width * cellSize, height: height * cellSize, imgW, imgH };
+  }, [texture, frame, node.height, node.width, anchor, cellSize]);
+  const groundGeometry = React3.useMemo(() => {
+    if (anchor !== "top-left" || !texture || !atlasReady) return null;
+    const g = new THREE5.PlaneGeometry(size.width, size.height);
+    g.rotateX(-Math.PI / 2);
+    return g;
+  }, [anchor, texture, atlasReady, size.width, size.height]);
+  if (!texture || !atlasReady) {
+    if (anchor === "top-left") {
+      return /* @__PURE__ */ jsx("group", { position: [world[0] + size.width / 2, 0.02, world[2] + size.height / 2], children: /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], children: [
+        /* @__PURE__ */ jsx("planeGeometry", { args: [size.width, size.height] }),
+        /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE5.DoubleSide })
+      ] }) });
+    }
+    return /* @__PURE__ */ jsx("group", { position: [world[0], world[1] + size.height / 2, world[2]], children: /* @__PURE__ */ jsxs("mesh", { children: [
+      /* @__PURE__ */ jsx("planeGeometry", { args: [size.width, size.height] }),
+      /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE5.DoubleSide })
+    ] }) });
+  }
+  texture.magFilter = texture.minFilter = THREE5.NearestFilter;
+  texture.needsUpdate = true;
+  if (frame) {
+    texture.repeat.set(frame.w / size.imgW, frame.h / size.imgH);
+    texture.offset.set(frame.x / size.imgW, 1 - (frame.y + frame.h) / size.imgH);
+  }
+  if (anchor === "top-left") {
+    return /* @__PURE__ */ jsx("group", { position: [world[0] + size.width / 2, 0.01, world[2] + size.height / 2], children: /* @__PURE__ */ jsx("mesh", { geometry: groundGeometry ?? void 0, children: /* @__PURE__ */ jsx(
+      "meshBasicMaterial",
+      {
+        map: texture,
+        transparent: true,
+        alphaTest: 0.1,
+        side: THREE5.DoubleSide,
+        opacity: (node.opacity ?? 1) * groupOpacity
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx(Billboard, { position: [world[0], world[1] + size.height / 2, world[2]], children: /* @__PURE__ */ jsxs("mesh", { children: [
+    /* @__PURE__ */ jsx("planeGeometry", { args: [size.width, size.height] }),
+    /* @__PURE__ */ jsx(
+      "meshBasicMaterial",
+      {
+        map: texture,
+        transparent: true,
+        alphaTest: 0.1,
+        side: THREE5.DoubleSide,
+        opacity: node.opacity ?? 1
+      }
+    )
+  ] }) });
+}
+function Sprite3D({ node, projector, groupOpacity = 1 }) {
+  const asset = node.asset;
+  const state = spriteAssetState(node);
+  if (state === "invalid-position") return null;
+  if (state === "asset-unset") {
+    const side = (node.width ?? 0.6) * projector.cellSize;
+    return /* @__PURE__ */ jsxs("mesh", { position: projector.toWorld(node.position), children: [
+      /* @__PURE__ */ jsx("boxGeometry", { args: [side, (node.height ?? 0.6) * projector.cellSize, side] }),
+      /* @__PURE__ */ jsx("meshStandardMaterial", { color: SPRITE_FALLBACK_FILL })
+    ] });
+  }
+  if (asset.dimension === "3d") {
+    const scale = node.width === void 0 ? 1 : node.height === void 0 ? node.width * projector.cellSize : [
+      node.width * projector.cellSize,
+      node.height * projector.cellSize,
+      node.width * projector.cellSize
+    ];
+    return /* @__PURE__ */ jsx("group", { position: projector.toWorld(node.position), children: /* @__PURE__ */ jsx(
+      ModelLoader,
+      {
+        url: asset.url,
+        scale,
+        rotation: [0, node.rotation ?? 0, 0],
+        animation: node.animation,
+        fallbackGeometry: "box",
+        castShadow: true,
+        receiveShadow: true
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(SpriteBillboard, { node, world: projector.toWorld(node.position), cellSize: projector.cellSize, groupOpacity });
+}
+function Shape3D({ node, projector, groupOpacity = 1 }) {
+  const groupRef = React3.useRef(null);
+  const materialRef = React3.useRef(null);
+  const animated = isAnimatedShape(node);
+  const validPos = isValidScenePos(node.position);
+  const world = validPos ? projector.toWorld(node.position) : [0, 0, 0];
+  useFrame(({ clock }) => {
+    if (!animated || !groupRef.current) return;
+    const view = applyShapeAnimation(node, clock.elapsedTime * 1e3);
+    groupRef.current.position.set(
+      world[0] + (view.offsetX ?? 0) * projector.cellSize,
+      world[1] + 0.02,
+      world[2] + (view.offsetY ?? 0) * projector.cellSize
+    );
+    groupRef.current.rotation.y = -(view.rotate ?? 0);
+    const mat = materialRef.current;
+    if (mat) {
+      mat.opacity = (view.opacity ?? node.opacity ?? 1) * groupOpacity;
+      if (view.fill) mat.color.set(view.fill);
+    }
+  });
+  if (!validPos) return null;
+  const color = node.fill ?? node.stroke ?? "#ffffff";
+  let geometry;
+  switch (node.shape) {
+    case "cell":
+    case "rect": {
+      const w = node.shape === "cell" ? projector.cellSize * 0.95 : (node.width ?? 1) * projector.cellSize;
+      const h = node.shape === "cell" ? projector.cellSize * 0.95 : (node.height ?? 1) * projector.cellSize;
+      geometry = /* @__PURE__ */ jsx("planeGeometry", { args: [w, h] });
+      break;
+    }
+    case "ellipse": {
+      const radiusX = node.radiusX ?? 0.4;
+      geometry = node.stroke && !node.fill ? /* @__PURE__ */ jsx("ringGeometry", { args: [Math.max(0, radiusX - 0.08), radiusX, 32] }) : /* @__PURE__ */ jsx("circleGeometry", { args: [radiusX, 32] });
+      break;
+    }
+    case "poly": {
+      if (!node.points || node.points.length === 0) return null;
+      const s = new THREE5.Shape();
+      node.points.forEach((p, i) => {
+        if (i === 0) s.moveTo(p.x, p.y);
+        else s.lineTo(p.x, p.y);
+      });
+      s.closePath();
+      geometry = /* @__PURE__ */ jsx("shapeGeometry", { args: [s] });
+      break;
+    }
+    case "path": {
+      warnUnsupported3d("draw-shape:path");
+      return null;
+    }
+    default:
+      return null;
+  }
+  return /* @__PURE__ */ jsx("group", { ref: groupRef, position: [world[0], world[1] + 0.02, world[2]], children: /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], children: [
+    geometry,
+    /* @__PURE__ */ jsx("meshBasicMaterial", { ref: materialRef, color, transparent: true, opacity: (node.opacity ?? 1) * groupOpacity, side: THREE5.DoubleSide })
+  ] }) });
+}
+function Text3D({ node, projector, groupOpacity = 1 }) {
+  if (!isValidScenePos(node.position)) return null;
+  const world = projector.toWorld(node.position);
+  return /* @__PURE__ */ jsx(Billboard, { position: [world[0], world[1] + 1.2, world[2]], children: /* @__PURE__ */ jsx(
+    Text,
+    {
+      fontSize: 0.32,
+      color: node.color,
+      anchorX: "center",
+      anchorY: "middle",
+      outlineWidth: 0.02,
+      outlineColor: "#000000",
+      fillOpacity: groupOpacity,
+      outlineOpacity: groupOpacity,
+      children: node.text
+    }
+  ) });
+}
+var GROUND_ROTATION = [-Math.PI / 2, 0, 0];
+var textureCache = /* @__PURE__ */ new Map();
+function getMeshTexture(url) {
+  const cached = textureCache.get(url);
+  if (cached) return cached;
+  const texture = new THREE5.TextureLoader().load(url);
+  texture.flipY = false;
+  texture.colorSpace = THREE5.SRGBColorSpace;
+  texture.wrapS = THREE5.RepeatWrapping;
+  texture.wrapT = THREE5.RepeatWrapping;
+  textureCache.set(url, texture);
+  return texture;
+}
+function polyhedronGeometry(node, cellSize) {
+  const verts = node.vertices;
+  const faces = node.faces;
+  const bounds = polyhedronBounds(verts);
+  if (!verts || !bounds || !faces || faces.length === 0) return null;
+  const positions = new Float32Array(verts.length * 3);
+  for (let i = 0; i < verts.length; i++) {
+    positions[i * 3] = verts[i][0] * cellSize;
+    positions[i * 3 + 1] = verts[i][2] * cellSize;
+    positions[i * 3 + 2] = verts[i][1] * cellSize;
+  }
+  const index = [];
+  for (const face of faces) {
+    if (face.length < 3) continue;
+    const [a, b, c] = face;
+    if (a === b || b === c || a === c) continue;
+    if (![a, b, c].every((i) => Number.isInteger(i) && i >= 0 && i < verts.length)) continue;
+    index.push(a, c, b);
+  }
+  if (index.length === 0) return null;
+  const geometry = new THREE5.BufferGeometry();
+  geometry.setAttribute("position", new THREE5.BufferAttribute(positions, 3));
+  if (node.uvs && node.uvs.length === verts.length) {
+    const uv = new Float32Array(verts.length * 2);
+    for (let i = 0; i < verts.length; i++) {
+      uv[i * 2] = node.uvs[i][0];
+      uv[i * 2 + 1] = node.uvs[i][1];
+    }
+    geometry.setAttribute("uv", new THREE5.BufferAttribute(uv, 2));
+  }
+  geometry.setIndex(index);
+  geometry.computeVertexNormals();
+  const skin = node.skin;
+  if (skin && skin.indices.length === verts.length && skin.weights.length === verts.length) {
+    const skinIndex = new Uint16Array(verts.length * 4);
+    const skinWeight = new Float32Array(verts.length * 4);
+    for (let i = 0; i < verts.length; i++) {
+      for (let k = 0; k < 4; k++) {
+        skinIndex[i * 4 + k] = skin.indices[i][k] ?? 0;
+        skinWeight[i * 4 + k] = skin.weights[i][k] ?? 0;
+      }
+    }
+    geometry.setAttribute("skinIndex", new THREE5.BufferAttribute(skinIndex, 4));
+    geometry.setAttribute("skinWeight", new THREE5.BufferAttribute(skinWeight, 4));
+  }
+  const size = Math.max(bounds.max[0] - bounds.min[0], bounds.max[1] - bounds.min[1], bounds.max[2] - bounds.min[2]) * cellSize;
+  return { geometry, lift: -bounds.min[2] * cellSize, size };
+}
+function meshGeometry(node, cellSize) {
+  const seg = clampSegments(node.segments);
+  const r = (node.radius ?? 0.4) * cellSize;
+  const w = (node.width ?? 1) * cellSize;
+  const h = (node.height ?? 1) * cellSize;
+  const d = (node.depth ?? node.width ?? 1) * cellSize;
+  switch (node.shape) {
+    case "box":
+      return { element: /* @__PURE__ */ jsx("boxGeometry", { args: [w, h, d] }), lift: h / 2, size: Math.max(w, h, d) };
+    case "sphere":
+      return { element: /* @__PURE__ */ jsx("sphereGeometry", { args: [r, seg, seg] }), lift: r, size: r * 2 };
+    case "capsule":
+      return { element: /* @__PURE__ */ jsx("capsuleGeometry", { args: [r, h, Math.max(2, Math.round(seg / 2)), seg] }), lift: h / 2 + r, size: h + r * 2 };
+    case "cylinder":
+      return {
+        element: /* @__PURE__ */ jsx("cylinderGeometry", { args: [(node.radiusTop ?? node.radius ?? 0.4) * cellSize, (node.radiusBottom ?? node.radius ?? 0.4) * cellSize, h, seg] }),
+        lift: h / 2,
+        size: Math.max(h, r * 2)
+      };
+    case "cone":
+      return { element: /* @__PURE__ */ jsx("coneGeometry", { args: [r, h, seg] }), lift: h / 2, size: Math.max(h, r * 2) };
+    case "torus": {
+      const tube = (node.tube ?? (node.radius ?? 0.4) / 3) * cellSize;
+      return { element: /* @__PURE__ */ jsx("torusGeometry", { args: [r, tube, Math.max(3, Math.round(seg / 2)), seg] }), lift: r + tube, size: (r + tube) * 2 };
+    }
+    case "plane":
+      return { element: /* @__PURE__ */ jsx("planeGeometry", { args: [w, d] }), lift: 0, size: Math.max(w, d), baseRotation: GROUND_ROTATION };
+    case "circle":
+      return { element: /* @__PURE__ */ jsx("circleGeometry", { args: [r, seg] }), lift: 0, size: r * 2, baseRotation: GROUND_ROTATION };
+    case "polyhedron":
+      return polyhedronGeometry(node, cellSize);
+    default:
+      return null;
+  }
+}
+var warnedPolyhedronOutline = false;
+var SIDE_MAP = {
+  front: THREE5.FrontSide,
+  back: THREE5.BackSide,
+  double: THREE5.DoubleSide
+};
+function meshMaterial(mat, opacity, ref) {
+  const m = mat ?? {};
+  const common = {
+    ref,
+    color: m.color ?? "#ffffff",
+    transparent: opacity < 1,
+    opacity,
+    side: SIDE_MAP[m.side ?? "front"],
+    ...m.map ? { map: getMeshTexture(m.map) } : {}
+  };
+  const emissive = m.emissive ? { emissive: m.emissive, emissiveIntensity: m.emissiveIntensity ?? 1 } : {};
+  switch (m.kind ?? "standard") {
+    case "basic":
+      return /* @__PURE__ */ jsx("meshBasicMaterial", { ...common });
+    case "toon":
+      return /* @__PURE__ */ jsx("meshToonMaterial", { ...common, ...emissive });
+    case "physical":
+      return /* @__PURE__ */ jsx(
+        "meshPhysicalMaterial",
+        {
+          ...common,
+          ...emissive,
+          metalness: m.metalness ?? 0,
+          roughness: m.roughness ?? 0.5,
+          transmission: m.transmission ?? 0,
+          ior: m.ior ?? 1.5,
+          flatShading: m.flatShading ?? false
+        }
+      );
+    case "standard":
+    default:
+      return /* @__PURE__ */ jsx(
+        "meshStandardMaterial",
+        {
+          ...common,
+          ...emissive,
+          metalness: m.metalness ?? 0,
+          roughness: m.roughness ?? 0.5,
+          flatShading: m.flatShading ?? false
+        }
+      );
+  }
+}
+function SkinnedPolyhedron3D({
+  node,
+  skin,
+  geometry,
+  cellSize,
+  opacity
+}) {
+  const boneStore = useContext(BoneRegistryContext);
+  const meshRef = useRef(null);
+  const [registryTick, setRegistryTick] = useState(0);
+  useEffect(() => boneStore?.subscribe(() => setRegistryTick((t) => t + 1)), [boneStore]);
+  useEffect(() => {
+    const mesh = meshRef.current;
+    if (!mesh || !boneStore) return;
+    const bones = [];
+    for (const name of skin.bones) {
+      const bone = boneStore.get(name);
+      if (!bone) return;
+      bones.push(bone);
+    }
+    if (mesh.skeleton && mesh.skeleton.bones.length === bones.length && mesh.skeleton.bones.every((b, i) => b === bones[i])) return;
+    if (skin.inverseBindMatrices.length !== bones.length) return;
+    const inverses = skin.inverseBindMatrices.map((m) => {
+      const mat = new THREE5.Matrix4().fromArray(m);
+      mat.elements[12] *= cellSize;
+      mat.elements[13] *= cellSize;
+      mat.elements[14] *= cellSize;
+      return mat;
+    });
+    mesh.bind(new THREE5.Skeleton(bones, inverses), new THREE5.Matrix4());
+  }, [registryTick, skin, boneStore, geometry, cellSize]);
+  useEffect(() => {
+    const mesh = meshRef.current;
+    return () => mesh?.skeleton?.dispose();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "skinnedMesh",
+    {
+      ref: meshRef,
+      geometry,
+      frustumCulled: false,
+      castShadow: node.castShadow ?? true,
+      receiveShadow: node.receiveShadow ?? true,
+      children: meshMaterial(node.material, opacity)
+    }
+  );
+}
+function Mesh3D({
+  node,
+  projector,
+  groupOpacity = 1
+}) {
+  const groupRef = useRef(null);
+  const meshRef = useRef(null);
+  const materialRef = useRef(null);
+  const animated = isAnimatedMesh(node);
+  const validPos = isValidScenePos(node.position);
+  const baseWorld = validPos ? projector.toWorld(node.position) : [0, 0, 0];
+  const geo = useMemo(() => meshGeometry(node, projector.cellSize), [node, projector.cellSize]);
+  useEffect(() => {
+    const g = geo?.geometry;
+    return () => g?.dispose();
+  }, [geo]);
+  useFrame(({ clock }) => {
+    if (!animated || !groupRef.current) return;
+    const state = applyMeshAnimation(node, clock.elapsedTime * 1e3);
+    if (!state) return;
+    const [wx, wy, wz] = baseWorld;
+    groupRef.current.position.set(
+      wx + state.offset[0] * projector.cellSize,
+      wy + state.offset[2] * projector.cellSize,
+      wz + state.offset[1] * projector.cellSize
+    );
+    groupRef.current.scale.setScalar(state.scale);
+    if (meshRef.current) {
+      const shapeRot = geo?.baseRotation ?? [0, 0, 0];
+      const base = node.rotation ?? [0, 0, 0];
+      meshRef.current.rotation.set(
+        shapeRot[0] + base[0] + state.rotate[0],
+        shapeRot[1] + base[1] + state.rotate[1],
+        shapeRot[2] + base[2] + state.rotate[2]
+      );
+    }
+    const mat = materialRef.current;
+    if (mat) {
+      const effective = (state.opacity ?? node.opacity ?? 1) * (node.material?.opacity ?? 1) * groupOpacity;
+      mat.opacity = effective;
+      mat.transparent = effective < 1;
+      if (state.color && mat.color) mat.color.set(state.color);
+      if (state.emissive && mat.emissive) mat.emissive.set(state.emissive);
+      if (state.emissiveIntensity !== void 0 && mat.emissiveIntensity !== void 0) {
+        mat.emissiveIntensity = state.emissiveIntensity;
+      }
+    }
+  });
+  if (!validPos || !geo) return null;
+  const lift = (node.pivot ?? "bottom") === "bottom" ? geo.lift : 0;
+  const opacity = (node.opacity ?? 1) * (node.material?.opacity ?? 1) * groupOpacity;
+  if (node.skin && geo.geometry) {
+    return /* @__PURE__ */ jsx("group", { position: baseWorld, children: /* @__PURE__ */ jsx(SkinnedPolyhedron3D, { node, skin: node.skin, geometry: geo.geometry, cellSize: projector.cellSize, opacity }) });
+  }
+  const nodeRotation = node.rotation ?? [0, 0, 0];
+  const shapeRotation = geo.baseRotation ?? [0, 0, 0];
+  const rotation = [
+    shapeRotation[0] + nodeRotation[0],
+    shapeRotation[1] + nodeRotation[1],
+    shapeRotation[2] + nodeRotation[2]
+  ];
+  const outlineScale = geo.size > 0 ? 1 + (node.outline?.width ?? 0.05) * projector.cellSize / geo.size : 1;
+  if (node.outline && geo.geometry && !warnedPolyhedronOutline) {
+    warnedPolyhedronOutline = true;
+    console.warn('[draw-mesh] outline is not yet supported on shape "polyhedron" \u2014 skipped');
+  }
+  const geometryProp = geo.geometry ? { geometry: geo.geometry } : {};
+  return /* @__PURE__ */ jsxs("group", { ref: groupRef, position: baseWorld, children: [
+    /* @__PURE__ */ jsxs(
+      "mesh",
+      {
+        ref: meshRef,
+        ...geometryProp,
+        position: [0, lift, 0],
+        rotation,
+        castShadow: node.castShadow ?? true,
+        receiveShadow: node.receiveShadow ?? true,
+        children: [
+          geo.element,
+          meshMaterial(node.material, opacity, materialRef)
+        ]
+      }
+    ),
+    node.outline && !geo.geometry && /* @__PURE__ */ jsxs("mesh", { position: [0, lift, 0], rotation, scale: outlineScale, children: [
+      geo.element,
+      /* @__PURE__ */ jsx(
+        "meshBasicMaterial",
+        {
+          color: node.outline.color ?? "#101014",
+          side: THREE5.BackSide,
+          transparent: opacity < 1,
+          opacity
+        }
+      )
+    ] })
+  ] });
+}
+function Drawable3D({ node, projector, groupOpacity = 1 }) {
+  const rendered = (() => {
+    switch (node.type) {
+      case "draw-sprite":
+        return /* @__PURE__ */ jsx(Sprite3D, { node, projector, groupOpacity });
+      case "draw-shape":
+        return /* @__PURE__ */ jsx(Shape3D, { node, projector, groupOpacity });
+      case "draw-text":
+        return /* @__PURE__ */ jsx(Text3D, { node, projector, groupOpacity });
+      case "draw-mesh":
+        return /* @__PURE__ */ jsx(Mesh3D, { node, projector, groupOpacity });
+      case "draw-sprite-layer":
+        return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Sprite3D, { node: item, projector, groupOpacity }, i)) });
+      case "draw-shape-layer":
+        return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Shape3D, { node: item, projector, groupOpacity }, i)) });
+      case "draw-text-layer":
+        return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Text3D, { node: item, projector, groupOpacity }, i)) });
+      case "draw-group": {
+        if (!isValidScenePos(node.position) || !Array.isArray(node.items)) return null;
+        if (node.clip) warnUnsupported3d("draw-group:clip");
+        return /* @__PURE__ */ jsx(Group3D, { node, projector, groupOpacity });
+      }
+      case "draw-fx-layer":
+        return /* @__PURE__ */ jsx(FxLayer3D, { node, projector, groupOpacity });
+      case "draw-skinned-mesh":
+        warnUnsupported3d("draw-skinned-mesh");
+        return null;
+    }
+  })();
+  return node.id ? /* @__PURE__ */ jsx("group", { userData: { drawableId: node.id }, children: rendered }) : rendered;
+}
+function Group3D({
+  node,
+  projector,
+  groupOpacity
+}) {
+  const ref = useRef(null);
+  const animated = isAnimatedGroup(node);
+  const world = projector.toWorld(node.position);
+  const inner = create3DProjector({ cellSize: projector.cellSize });
+  const opacity = (node.opacity ?? 1) * groupOpacity;
+  const s = node.scale ?? 1;
+  const baseRotation = node.rotation ?? [0, -(node.rotate ?? 0), 0];
+  const parentStore = useContext(BoneRegistryContext);
+  const scopedStore = useMemo(() => node.skeleton ? new BoneStore() : null, [node.skeleton]);
+  const boneStore = scopedStore ?? parentStore;
+  const boneObject = useMemo(() => node.bone ? new THREE5.Bone() : null, [node.bone]);
+  useEffect(() => {
+    if (!node.bone || !boneStore || !boneObject) return;
+    return boneStore.register(node.bone, boneObject);
+  }, [node.bone, boneStore, boneObject]);
+  useFrame(({ clock }) => {
+    if (!animated || !ref.current) return;
+    const state = applyMeshAnimation(node, clock.elapsedTime * 1e3);
+    if (!state) return;
+    const cell = projector.cellSize;
+    ref.current.position.set(
+      world[0] + state.offset[0] * cell,
+      world[1] + state.offset[2] * cell,
+      world[2] + state.offset[1] * cell
+    );
+    ref.current.rotation.set(
+      baseRotation[0] + state.rotate[0],
+      baseRotation[1] + state.rotate[1],
+      baseRotation[2] + state.rotate[2]
+    );
+    ref.current.scale.setScalar(s * state.scale);
+  });
+  const children = /* @__PURE__ */ jsxs("group", { ref, position: world, rotation: baseRotation, scale: [s, s, s], children: [
+    boneObject && /* @__PURE__ */ jsx("primitive", { object: boneObject }),
+    node.items.map((item, i) => /* @__PURE__ */ jsx(Drawable3D, { node: item, projector: inner, groupOpacity: opacity }, i))
+  ] });
+  return scopedStore ? /* @__PURE__ */ jsx(BoneRegistryContext.Provider, { value: scopedStore, children }) : children;
+}
+function FxLayer3D({
+  node,
+  projector,
+  groupOpacity
+}) {
+  const [, setFrame] = useState(0);
+  const live = Array.isArray(node.items) && node.items.length > 0;
+  useFrame(() => {
+    if (live) setFrame((f) => (f + 1) % 1e6);
+  });
+  if (!live) return null;
+  const epochNow = typeof performance !== "undefined" ? performance.timeOrigin + performance.now() : 0;
+  const children = expandFxLayer(node, epochNow, "3d", void 0, void 0);
+  return /* @__PURE__ */ jsx(Fragment, { children: children.map((c, i) => /* @__PURE__ */ jsx(Drawable3D, { node: c, projector, groupOpacity }, i)) });
+}
+var DEFAULT_GRID_CONFIG = {
+  cellSize: 1};
+var EDIT_SELECTION_RADIUS = 0.6;
+function CameraPose({
+  position,
+  fov,
+  controls
+}) {
+  const camera = useThree((s) => s.camera);
+  const [px, py, pz] = position;
+  useEffect(() => {
+    camera.position.set(px, py, pz);
+    if (camera.isPerspectiveCamera) {
+      camera.fov = fov;
+      camera.updateProjectionMatrix();
+    }
+    controls.current?.update();
+  }, [camera, px, py, pz, fov, controls]);
+  return null;
+}
+function RoomEnvironment3D() {
+  const { gl, scene } = useThree(({ gl: gl2, scene: scene2 }) => ({ gl: gl2, scene: scene2 }));
+  useEffect(() => {
+    const pmremGenerator = new THREE5.PMREMGenerator(gl);
+    const envTexture = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
+    scene.environment = envTexture;
+    return () => {
+      scene.environment = null;
+      envTexture.dispose();
+      pmremGenerator.dispose();
+    };
+  }, [gl, scene]);
+  return null;
+}
+var Canvas3DHost = forwardRef(
+  ({
+    cameraMode = "isometric",
+    followTarget,
+    showGrid = true,
+    orientation = "standard",
+    overlay = "default",
+    shadows = true,
+    backgroundColor,
+    series,
+    className,
+    isLoading: externalLoading,
+    error: externalError,
+    tileClickEvent,
+    unitClickEvent,
+    featureClickEvent,
+    canvasClickEvent,
+    tileHoverEvent,
+    tileLeaveEvent,
+    unitAnimationEvent,
+    cameraChangeEvent,
+    loadingMessage: loadingMessageProp,
+    keyMap,
+    keyUpMap,
+    pixelsPerUnit,
+    fov,
+    azimuth,
+    elevation,
+    zoom,
+    controlsEnabled = true,
+    lighting,
+    post,
+    children,
+    drawables,
+    editable = false,
+    selectedId = null,
+    onSelect,
+    onMove,
+    selectEvent,
+    moveEvent
+  }, ref) => {
+    const containerRef = useRef(null);
+    const onScreen = useOnScreen(containerRef);
+    const controlsRef = useRef(null);
+    const [internalError, setInternalError] = useState(null);
+    const eventBus = useEventBus();
+    const { t } = useTranslate();
+    const loadingMessage = loadingMessageProp ?? t("canvas3d.loadingScene");
+    const keysRef = useRef(/* @__PURE__ */ new Set());
+    const { theme: baseCanvasTheme } = useCanvasTheme(containerRef);
+    const seriesKey = series ? series.join("|") : "";
+    const canvasTheme = useMemo(() => withSeries(baseCanvasTheme, series, containerRef.current), [baseCanvasTheme, seriesKey]);
+    const allDrawables = useMemo(() => {
+      const raw = drawables ?? [];
+      const scope = containerRef.current;
+      if (!canvasTheme || !scope) return raw;
+      const resolved = resolveDrawableColors(raw, (c) => markColor(canvasTheme, c, scope, "ink"));
+      return applySceneMaterials(resolved, canvasTheme);
+    }, [drawables, canvasTheme]);
+    const ground = backgroundColor ?? canvasTheme?.ground ?? "transparent";
+    const selectionColor = canvasTheme?.tones.highlight ?? "currentColor";
+    useEffect(() => {
+      if (!keyMap && !keyUpMap) return;
+      const down = (e) => {
+        const code = keyMapCode(e);
+        if (keysRef.current.has(code)) return;
+        keysRef.current.add(code);
+        const ev = resolveKeyMapEvent(keyMap, e);
+        if (ev) {
+          eventBus.emit(`UI:${ev}`, {});
+          e.preventDefault();
+        }
+      };
+      const up = (e) => {
+        keysRef.current.delete(keyMapCode(e));
+        const ev = resolveKeyMapEvent(keyUpMap, e);
+        if (ev) eventBus.emit(`UI:${ev}`, {});
+      };
+      window.addEventListener("keydown", down);
+      window.addEventListener("keyup", up);
+      return () => {
+        window.removeEventListener("keydown", down);
+        window.removeEventListener("keyup", up);
+      };
+    }, [keyMap, keyUpMap, eventBus]);
+    const eventHandlers = useGameCanvas3DEvents({
+      tileClickEvent,
+      unitClickEvent,
+      featureClickEvent,
+      canvasClickEvent,
+      tileHoverEvent,
+      tileLeaveEvent,
+      unitAnimationEvent,
+      cameraChangeEvent
+    });
+    const drawnItems = useMemo(() => collectDrawnItems(allDrawables), [allDrawables]);
+    const scenePositions = useMemo(() => drawnItems.map((i) => i.pos), [drawnItems]);
+    const hitIndex = useMemo(() => buildHitIndex(drawnItems), [drawnItems]);
+    const gridBounds = useMemo(() => {
+      if (scenePositions.length === 0) {
+        return { minX: 0, maxX: 10, minZ: 0, maxZ: 10 };
+      }
+      let minX = Infinity;
+      let maxX = -Infinity;
+      let minZ = Infinity;
+      let maxZ = -Infinity;
+      for (const p of scenePositions) {
+        if (p.x < minX) minX = p.x;
+        if (p.x > maxX) maxX = p.x;
+        if (p.y < minZ) minZ = p.y;
+        if (p.y > maxZ) maxZ = p.y;
+      }
+      return { minX, maxX, minZ, maxZ };
+    }, [scenePositions]);
+    const cellSize = pixelsPerUnit !== void 0 && pixelsPerUnit > 0 ? 1 / pixelsPerUnit : DEFAULT_GRID_CONFIG.cellSize;
+    const cameraTarget = useMemo(
+      () => [
+        (gridBounds.maxX - gridBounds.minX) / 2 * cellSize,
+        0,
+        (gridBounds.maxZ - gridBounds.minZ) / 2 * cellSize
+      ],
+      [gridBounds, cellSize]
+    );
+    const gridConfig = useMemo(
+      () => ({
+        cellSize,
+        offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
+        offsetZ: -(gridBounds.maxZ - gridBounds.minZ) / 2
+      }),
+      [gridBounds, cellSize]
+    );
+    const boneStore = useMemo(() => new BoneStore(), []);
+    const drawableProjector = useMemo(
+      () => create3DProjector({
+        cellSize: gridConfig.cellSize,
+        offsetX: -gridBounds.minX * gridConfig.cellSize,
+        offsetZ: -gridBounds.minZ * gridConfig.cellSize
+      }),
+      [gridBounds, gridConfig]
+    );
+    const editDragRef = useRef(null);
+    const [dragPreview, setDragPreview] = useState(null);
+    const groundPointToScene = useCallback((point) => ({
+      x: Math.round(point.x / gridConfig.cellSize + gridBounds.minX),
+      y: Math.round(point.z / gridConfig.cellSize + gridBounds.minZ)
+    }), [gridConfig, gridBounds]);
+    const paintDrawables = useMemo(
+      () => dragPreview ? withPreviewPosition(allDrawables, dragPreview.id, { x: dragPreview.x, y: dragPreview.y }) : allDrawables,
+      [allDrawables, dragPreview]
+    );
+    const selectedItem = useMemo(
+      () => editable && selectedId != null ? drawnItems.find((it) => it.id === selectedId) : void 0,
+      [editable, selectedId, drawnItems]
+    );
+    const selectionPos = useMemo(() => {
+      if (!selectedItem) return void 0;
+      if (dragPreview && dragPreview.id === selectedItem.id) return { x: dragPreview.x, y: dragPreview.y };
+      return selectedItem.pos;
+    }, [selectedItem, dragPreview]);
+    useImperativeHandle(ref, () => ({
+      getCameraPosition: () => {
+        if (controlsRef.current) {
+          const pos = controlsRef.current.object.position;
+          return new THREE5.Vector3(pos.x, pos.y, pos.z);
+        }
+        return null;
+      },
+      setCameraPosition: (x, y, z) => {
+        if (controlsRef.current) {
+          controlsRef.current.object.position.set(x, y, z);
+          controlsRef.current.update();
+        }
+      },
+      lookAt: (x, y, z) => {
+        if (controlsRef.current) {
+          controlsRef.current.target.set(x, y, z);
+          controlsRef.current.update();
+        }
+      },
+      resetCamera: () => {
+        if (controlsRef.current) {
+          controlsRef.current.reset();
+        }
+      },
+      screenshot: () => {
+        const canvas = containerRef.current?.querySelector("canvas");
+        if (canvas) {
+          return canvas.toDataURL("image/png");
+        }
+        return null;
+      }
+    }));
+    const cameraConfig = useMemo(() => {
+      const size = Math.max(
+        (gridBounds.maxX - gridBounds.minX) * cellSize,
+        (gridBounds.maxZ - gridBounds.minZ) * cellSize,
+        4
+        // minimum framing distance so a tiny board isn't zoomed in
+      );
+      const cx = cameraTarget[0];
+      const cz = cameraTarget[2];
+      const d = size * 1 / (zoom !== void 0 && zoom > 0 ? zoom : 1);
+      const fovDeg = fov ?? 45;
+      const base = (() => {
+        switch (cameraMode) {
+          case "isometric":
+            return { position: [cx + d, d * 0.8, cz + d], fov: fovDeg };
+          case "top-down":
+            return { position: [cx, d * 2, cz + d * 0.35], fov: fovDeg };
+          case "front":
+            return { position: [cx, d * 0.32, cz + d * 1.15], fov: fovDeg };
+          case "follow":
+            return { position: [cx, d * 0.5, cz + d], fov: fovDeg };
+          case "perspective":
+          default: {
+            if (elevation === void 0) return { position: [cx + d, d, cz + d], fov: fovDeg };
+            const el = Math.min(Math.max(elevation, 0), Math.PI / 2 - 0.1);
+            return { position: [cx + d, d * Math.tan(el), cz + d], fov: fovDeg };
+          }
+        }
+      })();
+      if (!azimuth) return base;
+      const ox = base.position[0] - cx;
+      const oz = base.position[2] - cz;
+      const c = Math.cos(azimuth);
+      const s = Math.sin(azimuth);
+      return { position: [cx + ox * c - oz * s, base.position[1], cz + ox * s + oz * c], fov: base.fov };
+    }, [cameraMode, gridBounds, cellSize, cameraTarget, fov, azimuth, elevation, zoom]);
+    const followWorld = useMemo(() => {
+      if (followTarget) return drawableProjector.toWorld(followTarget);
+      return cameraTarget;
+    }, [followTarget, drawableProjector, cameraTarget]);
+    const followOffset = useMemo(
+      () => cameraMode === "chase" ? [0, 4, -7] : [0, 12, 14],
+      [cameraMode]
+    );
+    const handleGroundClick = useCallback((e) => {
+      if (!tileClickEvent && !unitClickEvent) return;
+      e.stopPropagation();
+      const cell = groundPointToScene(e.point);
+      const hitId = hitIndex.get(`${cell.x},${cell.y}`);
+      if (hitId !== void 0 && unitClickEvent) {
+        eventBus.emit(`UI:${unitClickEvent}`, { unitId: hitId, x: cell.x, z: cell.y });
+      } else if (tileClickEvent) {
+        eventBus.emit(`UI:${tileClickEvent}`, { x: cell.x, z: cell.y });
+      }
+    }, [tileClickEvent, unitClickEvent, groundPointToScene, hitIndex, eventBus]);
+    const handleDrawableClick = useCallback((e) => {
+      if (!unitClickEvent) return;
+      let obj = e.object;
+      while (obj) {
+        const id = obj.userData.drawableId;
+        if (id !== void 0) {
+          e.stopPropagation();
+          eventBus.emit(`UI:${unitClickEvent}`, {
+            unitId: id,
+            x: e.point.x / gridConfig.cellSize + gridBounds.minX,
+            z: e.point.z / gridConfig.cellSize + gridBounds.minZ
+          });
+          return;
+        }
+        obj = obj.parent;
+      }
+    }, [unitClickEvent, gridConfig, gridBounds, eventBus]);
+    const handleEditDrawablePointerDown = useCallback((e) => {
+      if (!editable) return;
+      let obj = e.object;
+      while (obj) {
+        const id = obj.userData.drawableId;
+        if (id !== void 0) {
+          e.stopPropagation();
+          editDragRef.current = {
+            id,
+            startClientX: e.nativeEvent.clientX,
+            startClientY: e.nativeEvent.clientY,
+            moved: false
+          };
+          return;
+        }
+        obj = obj.parent;
+      }
+    }, [editable]);
+    const handleEditGroundPointerMove = useCallback((e) => {
+      const drag = editDragRef.current;
+      if (!editable || !drag) return;
+      const dx = e.nativeEvent.clientX - drag.startClientX;
+      const dy = e.nativeEvent.clientY - drag.startClientY;
+      if (!drag.moved && Math.abs(dx) + Math.abs(dy) <= 5) return;
+      drag.moved = true;
+      const cell = groundPointToScene(e.point);
+      setDragPreview({ id: drag.id, x: cell.x, y: cell.y });
+    }, [editable, groundPointToScene]);
+    const handleEditPointerUp = useCallback((_e) => {
+      if (!editable) return;
+      const drag = editDragRef.current;
+      editDragRef.current = null;
+      if (!drag) {
+        onSelect?.(null);
+        if (selectEvent) eventBus.emit(`UI:${selectEvent}`, { id: null });
+        return;
+      }
+      if (drag.moved) {
+        setDragPreview((preview) => {
+          if (preview && preview.id === drag.id) {
+            onMove?.(drag.id, preview.x, preview.y);
+            if (moveEvent) eventBus.emit(`UI:${moveEvent}`, { id: drag.id, x: preview.x, y: preview.y });
+          }
+          return null;
+        });
+        return;
+      }
+      const next = selectedId === drag.id ? null : drag.id;
+      onSelect?.(next);
+      if (selectEvent) eventBus.emit(`UI:${selectEvent}`, { id: next });
+    }, [editable, selectedId, onMove, moveEvent, onSelect, selectEvent, eventBus]);
+    if (externalLoading) {
+      return /* @__PURE__ */ jsx(
+        Canvas3DLoadingState,
+        {
+          progress: 1,
+          loaded: 1,
+          total: 1,
+          message: loadingMessage,
+          className
+        }
+      );
+    }
+    const displayError = externalError || internalError;
+    if (displayError) {
+      return /* @__PURE__ */ jsx(Canvas3DErrorBoundary, { children: /* @__PURE__ */ jsx("div", { className: "game-canvas-3d game-canvas-3d--error", children: /* @__PURE__ */ jsx("div", { className: "game-canvas-3d__error", children: t("canvas3d.errorWithMessage", { message: displayError }) }) }) });
+    }
+    return /* @__PURE__ */ jsx(
+      Canvas3DErrorBoundary,
+      {
+        onError: (err) => setInternalError(err.message),
+        onReset: () => setInternalError(null),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: containerRef,
+            className: cn("game-canvas-3d relative w-full overflow-hidden", className),
+            style: { flex: "1 1 0", minHeight: "400px" },
+            "data-orientation": orientation,
+            "data-camera-mode": cameraMode,
+            "data-overlay": overlay,
+            children: /* @__PURE__ */ jsxs(
+              Canvas,
+              {
+                frameloop: onScreen ? "always" : "never",
+                shadows,
+                flat: lighting?.toneMapping === "none",
+                gl: { preserveDrawingBuffer: true },
+                camera: {
+                  position: cameraConfig.position,
+                  fov: cameraConfig.fov,
+                  near: 0.1,
+                  far: 1e3
+                },
+                style: { background: ground, position: "absolute", inset: 0 },
+                onClick: (e) => {
+                  if (e.target === e.currentTarget) {
+                    eventHandlers.handleCanvasClick(e);
+                  }
+                },
+                onPointerUp: handleEditPointerUp,
+                children: [
+                  /* @__PURE__ */ jsx(CameraController3D, { onCameraChange: eventHandlers.handleCameraChange }),
+                  cameraMode !== "follow" && cameraMode !== "chase" && /* @__PURE__ */ jsx(CameraPose, { position: cameraConfig.position, fov: cameraConfig.fov, controls: controlsRef }),
+                  (cameraMode === "follow" || cameraMode === "chase") && /* @__PURE__ */ jsx(FollowCamera3D, { target: followWorld, offset: followOffset }),
+                  /* @__PURE__ */ jsx(
+                    Lighting3D,
+                    {
+                      shadows,
+                      shadowBias: -4e-4,
+                      shadowNormalBias: 0.04,
+                      shadowCameraSize: 5,
+                      shadowCameraNear: 0.5,
+                      shadowCameraFar: 500,
+                      ambientIntensity: lighting?.ambient?.intensity ?? canvasTheme?.scene.ambient,
+                      ambientColor: lighting?.ambient?.color,
+                      directionalIntensity: lighting?.directional?.intensity ?? canvasTheme?.scene.key,
+                      directionalColor: lighting?.directional?.color ?? canvasTheme?.scene.keyColor,
+                      directionalPosition: lighting?.directional?.position,
+                      hemisphereIntensity: lighting?.hemisphere?.intensity,
+                      hemisphereColor: lighting?.hemisphere?.color,
+                      hemisphereGroundColor: lighting?.hemisphere?.groundColor,
+                      points: lighting?.points
+                    }
+                  ),
+                  lighting?.environment === "room" && /* @__PURE__ */ jsx(RoomEnvironment3D, {}),
+                  showGrid && /* @__PURE__ */ jsx(
+                    Grid,
+                    {
+                      args: [
+                        Math.max((gridBounds.maxX - gridBounds.minX + 2) * cellSize, 10),
+                        Math.max((gridBounds.maxZ - gridBounds.minZ + 2) * cellSize, 10)
+                      ],
+                      position: [
+                        (gridBounds.maxX - gridBounds.minX) / 2 * cellSize - cellSize / 2,
+                        0,
+                        (gridBounds.maxZ - gridBounds.minZ) / 2 * cellSize - cellSize / 2
+                      ],
+                      cellSize: 1,
+                      cellThickness: 1,
+                      cellColor: canvasTheme?.tones.grid ?? "currentColor",
+                      sectionSize: 5,
+                      sectionThickness: 1.5,
+                      sectionColor: canvasTheme?.tones.axis ?? "currentColor",
+                      fadeDistance: 50,
+                      fadeStrength: 1
+                    }
+                  ),
+                  allDrawables.length > 0 && /* @__PURE__ */ jsx(BoneRegistryContext.Provider, { value: boneStore, children: /* @__PURE__ */ jsx(
+                    "group",
+                    {
+                      onClick: !editable && unitClickEvent ? handleDrawableClick : void 0,
+                      onPointerDown: editable ? handleEditDrawablePointerDown : void 0,
+                      children: paintDrawables.map((node, i) => /* @__PURE__ */ jsx(Drawable3D, { node, projector: drawableProjector }, i))
+                    }
+                  ) }),
+                  selectionPos && /* @__PURE__ */ jsx(
+                    Shape3D,
+                    {
+                      node: {
+                        type: "draw-shape",
+                        shape: "ellipse",
+                        position: selectionPos,
+                        radiusX: EDIT_SELECTION_RADIUS,
+                        stroke: selectionColor
+                      },
+                      projector: drawableProjector
+                    }
+                  ),
+                  (tileClickEvent || unitClickEvent || editable) && /* @__PURE__ */ jsxs(
+                    "mesh",
+                    {
+                      rotation: [-Math.PI / 2, 0, 0],
+                      position: [
+                        (gridBounds.maxX - gridBounds.minX) / 2 * cellSize,
+                        0,
+                        (gridBounds.maxZ - gridBounds.minZ) / 2 * cellSize
+                      ],
+                      onClick: !editable ? handleGroundClick : void 0,
+                      onPointerMove: editable ? handleEditGroundPointerMove : void 0,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "planeGeometry",
+                          {
+                            args: [
+                              (gridBounds.maxX - gridBounds.minX + 4) * cellSize,
+                              (gridBounds.maxZ - gridBounds.minZ + 4) * cellSize
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("meshBasicMaterial", { transparent: true, opacity: 0, depthWrite: false })
+                      ]
+                    }
+                  ),
+                  post && (post.bloom || post.vignette) ? /* @__PURE__ */ jsx(Effects3D, { post }) : null,
+                  /* @__PURE__ */ jsx(
+                    OrbitControls,
+                    {
+                      ref: controlsRef,
+                      enabled: controlsEnabled && !editable && cameraMode !== "follow" && cameraMode !== "chase",
+                      target: cameraTarget,
+                      enableDamping: true,
+                      dampingFactor: 0.05,
+                      enableZoom: true,
+                      enablePan: true,
+                      touches: { ONE: THREE5.TOUCH.ROTATE, TWO: THREE5.TOUCH.DOLLY_PAN },
+                      minDistance: 2,
+                      maxDistance: 100,
+                      maxPolarAngle: Math.PI / 2 - 0.1
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+Canvas3DHost.displayName = "Canvas3DHost";
+function Scene3D({ background = "#1a1a2e", fog, children }) {
+  const { scene } = useThree();
+  const initializedRef = useRef(false);
+  useEffect(() => {
+    if (initializedRef.current) return;
+    initializedRef.current = true;
+    if (background.startsWith("#") || background.startsWith("rgb")) {
+      scene.background = new THREE5.Color(background);
+    } else {
+      const loader = new THREE5.TextureLoader();
+      loader.load(background, (texture) => {
+        scene.background = texture;
+      });
+    }
+    if (fog) {
+      scene.fog = new THREE5.Fog(fog.color, fog.near, fog.far);
+    }
+    return () => {
+      scene.background = null;
+      scene.fog = null;
+    };
+  }, [scene, background, fog]);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+var Camera3D = forwardRef(
+  ({
+    mode = "isometric",
+    position = [10, 10, 10],
+    target = [0, 0, 0],
+    zoom = 1,
+    fov = 45,
+    enableOrbit = true,
+    minDistance = 2,
+    maxDistance = 100,
+    onChange
+  }, ref) => {
+    const { camera, set, viewport } = useThree();
+    const controlsRef = useRef(null);
+    const initialPosition = useRef(new THREE5.Vector3(...position));
+    const initialTarget = useRef(new THREE5.Vector3(...target));
+    useEffect(() => {
+      let newCamera;
+      if (mode === "isometric") {
+        const aspect = viewport.aspect;
+        const size = 10 / zoom;
+        newCamera = new THREE5.OrthographicCamera(
+          -size * aspect,
+          size * aspect,
+          size,
+          -size,
+          0.1,
+          1e3
+        );
+      } else {
+        newCamera = new THREE5.PerspectiveCamera(fov, viewport.aspect, 0.1, 1e3);
+      }
+      newCamera.position.copy(initialPosition.current);
+      newCamera.lookAt(initialTarget.current.x, initialTarget.current.y, initialTarget.current.z);
+      set({ camera: newCamera });
+      if (mode === "top-down") {
+        newCamera.position.set(0, 20 / zoom, 0);
+        newCamera.lookAt(0, 0, 0);
+      }
+      return () => {
+      };
+    }, [mode, fov, zoom, viewport.aspect, set]);
+    useFrame(() => {
+      if (onChange) {
+        onChange(camera);
+      }
+    });
+    useImperativeHandle(ref, () => ({
+      getCamera: () => camera,
+      setPosition: (x, y, z) => {
+        camera.position.set(x, y, z);
+        if (controlsRef.current) {
+          controlsRef.current.update();
+        }
+      },
+      lookAt: (x, y, z) => {
+        camera.lookAt(x, y, z);
+        if (controlsRef.current) {
+          controlsRef.current.target.set(x, y, z);
+          controlsRef.current.update();
+        }
+      },
+      reset: () => {
+        camera.position.copy(initialPosition.current);
+        camera.lookAt(initialTarget.current.x, initialTarget.current.y, initialTarget.current.z);
+        if (controlsRef.current) {
+          controlsRef.current.target.copy(initialTarget.current);
+          controlsRef.current.update();
+        }
+      },
+      getViewBounds: () => {
+        const min = new THREE5.Vector3(-10, -10, -10);
+        const max = new THREE5.Vector3(10, 10, 10);
+        return { min, max };
+      }
+    }));
+    const maxPolarAngle = mode === "top-down" ? 0.1 : Math.PI / 2 - 0.1;
+    return /* @__PURE__ */ jsx(
+      OrbitControls,
+      {
+        ref: controlsRef,
+        camera,
+        enabled: enableOrbit,
+        target: [initialTarget.current.x, initialTarget.current.y, initialTarget.current.z],
+        minDistance,
+        maxDistance,
+        maxPolarAngle,
+        enableDamping: true,
+        dampingFactor: 0.05
+      }
+    );
+  }
+);
+Camera3D.displayName = "Camera3D";
+function detectAssetRoot2(modelUrl) {
+  const idx = modelUrl.indexOf("/3d/");
+  if (idx !== -1) {
+    return modelUrl.substring(0, idx + 4);
+  }
+  return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
+}
+function createGLTFLoaderForUrl(url) {
+  const loader = new GLTFLoader();
+  loader.setResourcePath(detectAssetRoot2(url));
+  return loader;
+}
+var AssetLoader = class {
+  objLoader;
+  textureLoader;
+  modelCache;
+  textureCache;
+  loadingPromises;
+  constructor() {
+    this.objLoader = new OBJLoader();
+    this.textureLoader = new THREE5.TextureLoader();
+    this.modelCache = /* @__PURE__ */ new Map();
+    this.textureCache = /* @__PURE__ */ new Map();
+    this.loadingPromises = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Load a GLB/GLTF model
+   * @param url - URL to the .glb or .gltf file
+   * @returns Promise with loaded model scene and animations
+   */
+  async loadModel(url) {
+    if (this.modelCache.has(url)) {
+      return this.modelCache.get(url);
+    }
+    if (this.loadingPromises.has(url)) {
+      return this.loadingPromises.get(url);
+    }
+    const loader = createGLTFLoaderForUrl(url);
+    const loadPromise = loader.loadAsync(url).then((gltf) => {
+      const result = {
+        scene: gltf.scene,
+        animations: gltf.animations || []
+      };
+      this.modelCache.set(url, result);
+      this.loadingPromises.delete(url);
+      return result;
+    }).catch((error) => {
+      this.loadingPromises.delete(url);
+      throw new Error(`Failed to load model ${url}: ${error.message}`);
+    });
+    this.loadingPromises.set(url, loadPromise);
+    return loadPromise;
+  }
+  /**
+   * Load an OBJ model (fallback for non-GLB assets)
+   * @param url - URL to the .obj file
+   * @returns Promise with loaded object group
+   */
+  async loadOBJ(url) {
+    if (this.modelCache.has(url)) {
+      return this.modelCache.get(url).scene;
+    }
+    if (this.loadingPromises.has(url)) {
+      const result = await this.loadingPromises.get(url);
+      return result.scene;
+    }
+    const loadPromise = this.objLoader.loadAsync(url).then((group) => {
+      const result = {
+        scene: group,
+        animations: []
+      };
+      this.modelCache.set(url, result);
+      this.loadingPromises.delete(url);
+      return result;
+    }).catch((error) => {
+      this.loadingPromises.delete(url);
+      throw new Error(`Failed to load OBJ ${url}: ${error.message}`);
+    });
+    this.loadingPromises.set(url, loadPromise);
+    return (await loadPromise).scene;
+  }
+  /**
+   * Load a texture
+   * @param url - URL to the texture image
+   * @returns Promise with loaded texture
+   */
+  async loadTexture(url) {
+    if (this.textureCache.has(url)) {
+      return this.textureCache.get(url);
+    }
+    if (this.loadingPromises.has(`texture:${url}`)) {
+      return this.loadingPromises.get(`texture:${url}`);
+    }
+    const loadPromise = this.textureLoader.loadAsync(url).then((texture) => {
+      texture.colorSpace = THREE5.SRGBColorSpace;
+      this.textureCache.set(url, texture);
+      this.loadingPromises.delete(`texture:${url}`);
+      return texture;
+    }).catch((error) => {
+      this.loadingPromises.delete(`texture:${url}`);
+      throw new Error(`Failed to load texture ${url}: ${error.message}`);
+    });
+    this.loadingPromises.set(`texture:${url}`, loadPromise);
+    return loadPromise;
+  }
+  /**
+   * Preload multiple assets
+   * @param urls - Array of asset URLs to preload
+   * @returns Promise that resolves when all assets are loaded
+   */
+  async preload(urls) {
+    const promises = urls.map((url) => {
+      if (url.endsWith(".glb") || url.endsWith(".gltf")) {
+        return this.loadModel(url).catch(() => null);
+      } else if (url.endsWith(".obj")) {
+        return this.loadOBJ(url).catch(() => null);
+      } else if (/\.(png|jpg|jpeg|webp)$/i.test(url)) {
+        return this.loadTexture(url).catch(() => null);
+      }
+      return Promise.resolve(null);
+    });
+    await Promise.all(promises);
+  }
+  /**
+   * Check if a model is cached
+   * @param url - Model URL
+   */
+  hasModel(url) {
+    return this.modelCache.has(url);
+  }
+  /**
+   * Check if a texture is cached
+   * @param url - Texture URL
+   */
+  hasTexture(url) {
+    return this.textureCache.has(url);
+  }
+  /**
+   * Get cached model (throws if not cached)
+   * @param url - Model URL
+   */
+  getModel(url) {
+    const model = this.modelCache.get(url);
+    if (!model) {
+      throw new Error(`Model ${url} not in cache`);
+    }
+    return model;
+  }
+  /**
+   * Get cached texture (throws if not cached)
+   * @param url - Texture URL
+   */
+  getTexture(url) {
+    const texture = this.textureCache.get(url);
+    if (!texture) {
+      throw new Error(`Texture ${url} not in cache`);
+    }
+    return texture;
+  }
+  /**
+   * Clear all caches
+   */
+  clearCache() {
+    this.textureCache.forEach((texture) => {
+      texture.dispose();
+    });
+    this.modelCache.forEach((model) => {
+      model.scene.traverse((child) => {
+        if (child instanceof THREE5.Mesh) {
+          child.geometry.dispose();
+          if (Array.isArray(child.material)) {
+            child.material.forEach((m) => m.dispose());
+          } else {
+            child.material.dispose();
+          }
+        }
+      });
+    });
+    this.modelCache.clear();
+    this.textureCache.clear();
+    this.loadingPromises.clear();
+  }
+  /**
+   * Get cache statistics
+   */
+  getStats() {
+    return {
+      models: this.modelCache.size,
+      textures: this.textureCache.size,
+      loading: this.loadingPromises.size
+    };
+  }
+};
+var assetLoader = new AssetLoader();
+
+// src/lib/drawable/three/hooks/useThree.ts
+var DEFAULT_OPTIONS = {
+  cameraMode: "isometric",
+  cameraPosition: [10, 10, 10],
+  backgroundColor: "#1a1a2e",
+  shadows: true,
+  showGrid: true,
+  gridSize: 20,
+  assetLoader: new AssetLoader()
+};
+function useThree5(options = {}) {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+  const containerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const rendererRef = useRef(null);
+  const sceneRef = useRef(null);
+  const cameraRef = useRef(null);
+  const controlsRef = useRef(null);
+  const gridHelperRef = useRef(null);
+  const rafRef = useRef(0);
+  const [isReady, setIsReady] = useState(false);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const initialCameraPosition = useMemo(
+    () => new THREE5.Vector3(...opts.cameraPosition),
+    []
+  );
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+    const { clientWidth, clientHeight } = container;
+    const scene = new THREE5.Scene();
+    scene.background = new THREE5.Color(opts.backgroundColor);
+    sceneRef.current = scene;
+    let camera;
+    const aspect = clientWidth / clientHeight;
+    if (opts.cameraMode === "isometric") {
+      const size = 10;
+      camera = new THREE5.OrthographicCamera(
+        -size * aspect,
+        size * aspect,
+        size,
+        -size,
+        0.1,
+        1e3
+      );
+    } else {
+      camera = new THREE5.PerspectiveCamera(45, aspect, 0.1, 1e3);
+    }
+    camera.position.copy(initialCameraPosition);
+    cameraRef.current = camera;
+    const renderer = new THREE5.WebGLRenderer({
+      antialias: true,
+      alpha: true,
+      canvas: canvasRef.current || void 0
+    });
+    renderer.setSize(clientWidth, clientHeight);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.shadowMap.enabled = opts.shadows;
+    renderer.shadowMap.type = THREE5.PCFSoftShadowMap;
+    rendererRef.current = renderer;
+    const controls = new OrbitControls$1(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+    controls.minDistance = 2;
+    controls.maxDistance = 100;
+    controls.maxPolarAngle = Math.PI / 2 - 0.1;
+    controlsRef.current = controls;
+    const ambientLight = new THREE5.AmbientLight(16777215, 0.6);
+    scene.add(ambientLight);
+    const directionalLight = new THREE5.DirectionalLight(16777215, 0.8);
+    directionalLight.position.set(10, 20, 10);
+    directionalLight.castShadow = opts.shadows;
+    directionalLight.shadow.mapSize.width = 2048;
+    directionalLight.shadow.mapSize.height = 2048;
+    scene.add(directionalLight);
+    if (opts.showGrid) {
+      const gridHelper = new THREE5.GridHelper(
+        opts.gridSize,
+        opts.gridSize,
+        4473924,
+        2236962
+      );
+      scene.add(gridHelper);
+      gridHelperRef.current = gridHelper;
+    }
+    const animate = () => {
+      rafRef.current = requestAnimationFrame(animate);
+      controls.update();
+      renderer.render(scene, camera);
+    };
+    animate();
+    const handleResize = () => {
+      const { clientWidth: width, clientHeight: height } = container;
+      setDimensions({ width, height });
+      if (camera instanceof THREE5.PerspectiveCamera) {
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+      } else if (camera instanceof THREE5.OrthographicCamera) {
+        const aspect2 = width / height;
+        const size = 10;
+        camera.left = -size * aspect2;
+        camera.right = size * aspect2;
+        camera.top = size;
+        camera.bottom = -size;
+        camera.updateProjectionMatrix();
+      }
+      renderer.setSize(width, height);
+    };
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    setIsReady(true);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      cancelAnimationFrame(rafRef.current);
+      controls.dispose();
+      renderer.dispose();
+      scene.clear();
+    };
+  }, []);
+  useEffect(() => {
+    if (!cameraRef.current || !containerRef.current) return;
+    const container = containerRef.current;
+    const { clientWidth, clientHeight } = container;
+    const aspect = clientWidth / clientHeight;
+    const currentPos = cameraRef.current.position.clone();
+    let newCamera;
+    if (opts.cameraMode === "isometric") {
+      const size = 10;
+      newCamera = new THREE5.OrthographicCamera(
+        -size * aspect,
+        size * aspect,
+        size,
+        -size,
+        0.1,
+        1e3
+      );
+    } else {
+      newCamera = new THREE5.PerspectiveCamera(45, aspect, 0.1, 1e3);
+    }
+    newCamera.position.copy(currentPos);
+    cameraRef.current = newCamera;
+    if (controlsRef.current) {
+      controlsRef.current.object = newCamera;
+    }
+    if (rendererRef.current) {
+      const animate = () => {
+        rafRef.current = requestAnimationFrame(animate);
+        controlsRef.current?.update();
+        rendererRef.current?.render(sceneRef.current, newCamera);
+      };
+      cancelAnimationFrame(rafRef.current);
+      animate();
+    }
+  }, [opts.cameraMode]);
+  const setCameraPosition = useCallback((x, y, z) => {
+    if (cameraRef.current) {
+      cameraRef.current.position.set(x, y, z);
+      controlsRef.current?.update();
+    }
+  }, []);
+  const lookAt = 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 = useCallback(() => {
+    if (cameraRef.current) {
+      cameraRef.current.position.copy(initialCameraPosition);
+      cameraRef.current.lookAt(0, 0, 0);
+      if (controlsRef.current) {
+        controlsRef.current.target.set(0, 0, 0);
+        controlsRef.current.update();
+      }
+    }
+  }, [initialCameraPosition]);
+  const fitView = useCallback(
+    (bounds) => {
+      if (!cameraRef.current) return;
+      const centerX = (bounds.minX + bounds.maxX) / 2;
+      const centerZ = (bounds.minZ + bounds.maxZ) / 2;
+      const width = bounds.maxX - bounds.minX;
+      const depth = bounds.maxZ - bounds.minZ;
+      const maxDim = Math.max(width, depth);
+      const distance = maxDim * 1.5;
+      const height = distance * 0.8;
+      cameraRef.current.position.set(centerX + distance, height, centerZ + distance);
+      lookAt(centerX, 0, centerZ);
+    },
+    [lookAt]
+  );
+  return {
+    canvasRef,
+    renderer: rendererRef.current,
+    scene: sceneRef.current,
+    camera: cameraRef.current,
+    controls: controlsRef.current,
+    isReady,
+    dimensions,
+    setCameraPosition,
+    lookAt,
+    resetCamera,
+    fitView
+  };
+}
+function useAssetLoader(options = {}) {
+  const { preloadUrls = [], loader: customLoader } = options;
+  const loaderRef = useRef(customLoader || new AssetLoader());
+  const [state, setState] = useState({
+    isLoading: false,
+    progress: 0,
+    loaded: 0,
+    total: 0,
+    errors: []
+  });
+  useEffect(() => {
+    if (preloadUrls.length > 0) {
+      preload(preloadUrls);
+    }
+  }, []);
+  const updateProgress = useCallback((loaded, total) => {
+    setState((prev) => ({
+      ...prev,
+      loaded,
+      total,
+      progress: total > 0 ? Math.round(loaded / total * 100) : 0
+    }));
+  }, []);
+  const loadModel = useCallback(
+    async (url) => {
+      setState((prev) => ({ ...prev, isLoading: true }));
+      try {
+        const model = await loaderRef.current.loadModel(url);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          loaded: prev.loaded + 1
+        }));
+        return model;
+      } catch (error) {
+        const errorMsg = error instanceof Error ? error.message : String(error);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          errors: [...prev.errors, errorMsg]
+        }));
+        throw error;
+      }
+    },
+    []
+  );
+  const loadOBJ = useCallback(
+    async (url) => {
+      setState((prev) => ({ ...prev, isLoading: true }));
+      try {
+        const model = await loaderRef.current.loadOBJ(url);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          loaded: prev.loaded + 1
+        }));
+        return model;
+      } catch (error) {
+        const errorMsg = error instanceof Error ? error.message : String(error);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          errors: [...prev.errors, errorMsg]
+        }));
+        throw error;
+      }
+    },
+    []
+  );
+  const loadTexture = useCallback(
+    async (url) => {
+      setState((prev) => ({ ...prev, isLoading: true }));
+      try {
+        const texture = await loaderRef.current.loadTexture(url);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          loaded: prev.loaded + 1
+        }));
+        return texture;
+      } catch (error) {
+        const errorMsg = error instanceof Error ? error.message : String(error);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          errors: [...prev.errors, errorMsg]
+        }));
+        throw error;
+      }
+    },
+    []
+  );
+  const preload = useCallback(
+    async (urls) => {
+      setState((prev) => ({
+        ...prev,
+        isLoading: true,
+        total: urls.length,
+        loaded: 0,
+        errors: []
+      }));
+      let completed = 0;
+      const errors = [];
+      await Promise.all(
+        urls.map(async (url) => {
+          try {
+            if (url.endsWith(".glb") || url.endsWith(".gltf")) {
+              await loaderRef.current.loadModel(url);
+            } else if (url.endsWith(".obj")) {
+              await loaderRef.current.loadOBJ(url);
+            } else if (/\.(png|jpg|jpeg|webp)$/i.test(url)) {
+              await loaderRef.current.loadTexture(url);
+            }
+            completed++;
+            updateProgress(completed, urls.length);
+          } catch (error) {
+            const errorMsg = error instanceof Error ? error.message : String(error);
+            errors.push(`${url}: ${errorMsg}`);
+            completed++;
+            updateProgress(completed, urls.length);
+          }
+        })
+      );
+      setState((prev) => ({
+        ...prev,
+        isLoading: false,
+        errors
+      }));
+    },
+    [updateProgress]
+  );
+  const hasModel = useCallback((url) => {
+    return loaderRef.current.hasModel(url);
+  }, []);
+  const hasTexture = useCallback((url) => {
+    return loaderRef.current.hasTexture(url);
+  }, []);
+  const getModel = useCallback((url) => {
+    try {
+      return loaderRef.current.getModel(url);
+    } catch {
+      return void 0;
+    }
+  }, []);
+  const getTexture = useCallback((url) => {
+    try {
+      return loaderRef.current.getTexture(url);
+    } catch {
+      return void 0;
+    }
+  }, []);
+  const clearCache = useCallback(() => {
+    loaderRef.current.clearCache();
+    setState({
+      isLoading: false,
+      progress: 0,
+      loaded: 0,
+      total: 0,
+      errors: []
+    });
+  }, []);
+  return {
+    ...state,
+    loadModel,
+    loadOBJ,
+    loadTexture,
+    preload,
+    hasModel,
+    hasTexture,
+    getModel,
+    getTexture,
+    clearCache
+  };
+}
+function useSceneGraph() {
+  const nodesRef = useRef(/* @__PURE__ */ new Map());
+  const addNode = useCallback((node) => {
+    const existing = nodesRef.current.get(node.id);
+    if (existing) {
+      existing.mesh.removeFromParent();
+    }
+    nodesRef.current.set(node.id, node);
+  }, []);
+  const removeNode = useCallback((id) => {
+    const node = nodesRef.current.get(id);
+    if (node) {
+      node.mesh.removeFromParent();
+      nodesRef.current.delete(id);
+    }
+  }, []);
+  const getNode = useCallback((id) => {
+    return nodesRef.current.get(id);
+  }, []);
+  const updateNodePosition = useCallback(
+    (id, x, y, z) => {
+      const node = nodesRef.current.get(id);
+      if (node) {
+        node.mesh.position.set(x, y, z);
+        node.position = { x, y, z };
+      }
+    },
+    []
+  );
+  const updateNodeGridPosition = useCallback(
+    (id, gridX, gridZ) => {
+      const node = nodesRef.current.get(id);
+      if (node) {
+        node.gridPosition = { x: gridX, z: gridZ };
+      }
+    },
+    []
+  );
+  const getNodeAtGrid = useCallback(
+    (x, z, type) => {
+      return Array.from(nodesRef.current.values()).find((node) => {
+        const matchesGrid = node.gridPosition.x === x && node.gridPosition.z === z;
+        return type ? matchesGrid && node.type === type : matchesGrid;
+      });
+    },
+    []
+  );
+  const getNodesByType = useCallback((type) => {
+    return Array.from(nodesRef.current.values()).filter((node) => node.type === type);
+  }, []);
+  const getNodesInBounds = useCallback(
+    (minX, maxX, minZ, maxZ) => {
+      return Array.from(nodesRef.current.values()).filter((node) => {
+        const { x, z } = node.gridPosition;
+        return x >= minX && x <= maxX && z >= minZ && z <= maxZ;
+      });
+    },
+    []
+  );
+  const clearNodes = useCallback(() => {
+    nodesRef.current.forEach((node) => {
+      node.mesh.removeFromParent();
+    });
+    nodesRef.current.clear();
+  }, []);
+  const countNodes = useCallback((type) => {
+    if (!type) {
+      return nodesRef.current.size;
+    }
+    return Array.from(nodesRef.current.values()).filter((node) => node.type === type).length;
+  }, []);
+  return {
+    nodesRef,
+    addNode,
+    removeNode,
+    getNode,
+    updateNodePosition,
+    updateNodeGridPosition,
+    getNodeAtGrid,
+    getNodesByType,
+    getNodesInBounds,
+    clearNodes,
+    countNodes
+  };
+}
+function useRaycaster(options) {
+  const { camera, canvas, cellSize = 1, offsetX = 0, offsetZ = 0 } = options;
+  const raycaster = useRef(new THREE5.Raycaster());
+  const mouse = useRef(new THREE5.Vector2());
+  const clientToNDC = useCallback(
+    (clientX, clientY) => {
+      if (!canvas) {
+        return { x: 0, y: 0 };
+      }
+      const rect = canvas.getBoundingClientRect();
+      return {
+        x: (clientX - rect.left) / rect.width * 2 - 1,
+        y: -((clientY - rect.top) / rect.height) * 2 + 1
+      };
+    },
+    [canvas]
+  );
+  const isWithinCanvas = useCallback(
+    (clientX, clientY) => {
+      if (!canvas) return false;
+      const rect = canvas.getBoundingClientRect();
+      return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+    },
+    [canvas]
+  );
+  const getIntersection = useCallback(
+    (clientX, clientY, objects) => {
+      if (!camera || !canvas) return null;
+      const ndc = clientToNDC(clientX, clientY);
+      mouse.current.set(ndc.x, ndc.y);
+      raycaster.current.setFromCamera(mouse.current, camera);
+      const intersects = raycaster.current.intersectObjects(objects, true);
+      if (intersects.length > 0) {
+        const hit = intersects[0];
+        return {
+          object: hit.object,
+          point: hit.point,
+          distance: hit.distance,
+          uv: hit.uv,
+          face: hit.face,
+          faceIndex: hit.faceIndex,
+          instanceId: hit.instanceId
+        };
+      }
+      return null;
+    },
+    [camera, canvas, clientToNDC]
+  );
+  const getAllIntersections = useCallback(
+    (clientX, clientY, objects) => {
+      if (!camera || !canvas) return [];
+      const ndc = clientToNDC(clientX, clientY);
+      mouse.current.set(ndc.x, ndc.y);
+      raycaster.current.setFromCamera(mouse.current, camera);
+      const intersects = raycaster.current.intersectObjects(objects, true);
+      return intersects.map((hit) => ({
+        object: hit.object,
+        point: hit.point,
+        distance: hit.distance,
+        uv: hit.uv,
+        face: hit.face,
+        faceIndex: hit.faceIndex,
+        instanceId: hit.instanceId
+      }));
+    },
+    [camera, canvas, clientToNDC]
+  );
+  const getGridCoordinates = useCallback(
+    (clientX, clientY) => {
+      if (!camera || !canvas) return null;
+      const ndc = clientToNDC(clientX, clientY);
+      mouse.current.set(ndc.x, ndc.y);
+      raycaster.current.setFromCamera(mouse.current, camera);
+      const plane = new THREE5.Plane(new THREE5.Vector3(0, 1, 0), 0);
+      const target = new THREE5.Vector3();
+      const intersection = raycaster.current.ray.intersectPlane(plane, target);
+      if (intersection) {
+        const gridX = Math.round((target.x - offsetX) / cellSize);
+        const gridZ = Math.round((target.z - offsetZ) / cellSize);
+        return { x: gridX, z: gridZ };
+      }
+      return null;
+    },
+    [camera, canvas, cellSize, offsetX, offsetZ, clientToNDC]
+  );
+  const getTileAtPosition = useCallback(
+    (clientX, clientY, scene) => {
+      if (!camera || !canvas) return null;
+      const tileMeshes = [];
+      scene.traverse((obj) => {
+        if (obj.userData.type === "tile" || obj.userData.isTile) {
+          tileMeshes.push(obj);
+        }
+      });
+      const hit = getIntersection(clientX, clientY, tileMeshes);
+      if (hit) {
+        const gridCoords2 = getGridCoordinates(clientX, clientY);
+        if (gridCoords2) {
+          return {
+            gridX: gridCoords2.x,
+            gridZ: gridCoords2.z,
+            worldPosition: hit.point,
+            objectType: hit.object.userData.type || "tile",
+            objectId: hit.object.userData.id || hit.object.userData.tileId
+          };
+        }
+      }
+      const gridCoords = getGridCoordinates(clientX, clientY);
+      if (gridCoords) {
+        return {
+          gridX: gridCoords.x,
+          gridZ: gridCoords.z,
+          worldPosition: new THREE5.Vector3(
+            gridCoords.x * cellSize + offsetX,
+            0,
+            gridCoords.z * cellSize + offsetZ
+          )
+        };
+      }
+      return null;
+    },
+    [camera, canvas, getIntersection, getGridCoordinates, cellSize, offsetX, offsetZ]
+  );
+  return {
+    raycaster,
+    mouse,
+    getIntersection,
+    getAllIntersections,
+    getGridCoordinates,
+    getTileAtPosition,
+    clientToNDC,
+    isWithinCanvas
+  };
+}
+var DEFAULT_CONFIG = {
+  cellSize: 1,
+  offsetX: 0,
+  offsetZ: 0,
+  elevation: 0
+};
+function gridToWorld(gridX, gridZ, config = DEFAULT_CONFIG) {
+  const opts = { ...DEFAULT_CONFIG, ...config };
+  return new THREE5.Vector3(
+    gridX * opts.cellSize + opts.offsetX,
+    opts.elevation,
+    gridZ * opts.cellSize + opts.offsetZ
+  );
+}
+function worldToGrid(worldX, worldZ, config = DEFAULT_CONFIG) {
+  const opts = { ...DEFAULT_CONFIG, ...config };
+  return {
+    x: Math.round((worldX - opts.offsetX) / opts.cellSize),
+    z: Math.round((worldZ - opts.offsetZ) / opts.cellSize)
+  };
+}
+function raycastToPlane(camera, mouseX, mouseY, planeY = 0) {
+  const raycaster = new THREE5.Raycaster();
+  const mouse = new THREE5.Vector2(mouseX, mouseY);
+  raycaster.setFromCamera(mouse, camera);
+  const plane = new THREE5.Plane(new THREE5.Vector3(0, 1, 0), -planeY);
+  const target = new THREE5.Vector3();
+  const intersection = raycaster.ray.intersectPlane(plane, target);
+  return intersection ? target : null;
+}
+function raycastToObjects(camera, mouseX, mouseY, objects) {
+  const raycaster = new THREE5.Raycaster();
+  const mouse = new THREE5.Vector2(mouseX, mouseY);
+  raycaster.setFromCamera(mouse, camera);
+  const intersects = raycaster.intersectObjects(objects, true);
+  return intersects.length > 0 ? intersects[0] : null;
+}
+function gridDistance(a, b) {
+  const dx = b.x - a.x;
+  const dz = b.z - a.z;
+  return Math.sqrt(dx * dx + dz * dz);
+}
+function gridManhattanDistance(a, b) {
+  return Math.abs(b.x - a.x) + Math.abs(b.z - a.z);
+}
+function getNeighbors(x, z, includeDiagonal = false) {
+  const neighbors = [
+    { x: x + 1, z },
+    { x: x - 1, z },
+    { x, z: z + 1 },
+    { x, z: z - 1 }
+  ];
+  if (includeDiagonal) {
+    neighbors.push(
+      { x: x + 1, z: z + 1 },
+      { x: x - 1, z: z - 1 },
+      { x: x + 1, z: z - 1 },
+      { x: x - 1, z: z + 1 }
+    );
+  }
+  return neighbors;
+}
+function isInBounds(x, z, bounds) {
+  return x >= bounds.minX && x <= bounds.maxX && z >= bounds.minZ && z <= bounds.maxZ;
+}
+function getCellsInRadius(centerX, centerZ, radius) {
+  const cells = [];
+  const radiusSquared = radius * radius;
+  const minX = Math.floor(centerX - radius);
+  const maxX = Math.ceil(centerX + radius);
+  const minZ = Math.floor(centerZ - radius);
+  const maxZ = Math.ceil(centerZ + radius);
+  for (let x = minX; x <= maxX; x++) {
+    for (let z = minZ; z <= maxZ; z++) {
+      const dx = x - centerX;
+      const dz = z - centerZ;
+      if (dx * dx + dz * dz <= radiusSquared) {
+        cells.push({ x, z });
+      }
+    }
+  }
+  return cells;
+}
+function createGridHighlight(color = 16776960, opacity = 0.3) {
+  const geometry = new THREE5.PlaneGeometry(0.95, 0.95);
+  const material = new THREE5.MeshBasicMaterial({
+    color,
+    transparent: true,
+    opacity,
+    side: THREE5.DoubleSide
+  });
+  const mesh = new THREE5.Mesh(geometry, material);
+  mesh.rotation.x = -Math.PI / 2;
+  mesh.position.y = 0.01;
+  return mesh;
+}
+function normalizeMouseCoordinates(clientX, clientY, element) {
+  const rect = element.getBoundingClientRect();
+  return {
+    x: (clientX - rect.left) / rect.width * 2 - 1,
+    y: -((clientY - rect.top) / rect.height) * 2 + 1
+  };
+}
+function isInFrustum(position, camera, padding = 0) {
+  const frustum = new THREE5.Frustum();
+  const projScreenMatrix = new THREE5.Matrix4();
+  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+  frustum.setFromProjectionMatrix(projScreenMatrix);
+  const sphere = new THREE5.Sphere(position, padding);
+  return frustum.intersectsSphere(sphere);
+}
+function filterByFrustum(positions, camera, padding = 0) {
+  const frustum = new THREE5.Frustum();
+  const projScreenMatrix = new THREE5.Matrix4();
+  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+  frustum.setFromProjectionMatrix(projScreenMatrix);
+  return positions.filter((position) => {
+    const sphere = new THREE5.Sphere(position, padding);
+    return frustum.intersectsSphere(sphere);
+  });
+}
+function getVisibleIndices(positions, camera, padding = 0) {
+  const frustum = new THREE5.Frustum();
+  const projScreenMatrix = new THREE5.Matrix4();
+  const visible = /* @__PURE__ */ new Set();
+  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+  frustum.setFromProjectionMatrix(projScreenMatrix);
+  positions.forEach((position, index) => {
+    const sphere = new THREE5.Sphere(position, padding);
+    if (frustum.intersectsSphere(sphere)) {
+      visible.add(index);
+    }
+  });
+  return visible;
+}
+function calculateLODLevel(position, camera, lodLevels) {
+  const distance = position.distanceTo(camera.position);
+  for (let i = 0; i < lodLevels.length; i++) {
+    if (distance < lodLevels[i]) {
+      return i;
+    }
+  }
+  return lodLevels.length;
+}
+function updateInstanceLOD(instancedMesh, positions, camera, lodDistances) {
+  const lodIndices = new Uint8Array(positions.length);
+  positions.forEach((position, index) => {
+    lodIndices[index] = calculateLODLevel(position, camera, lodDistances);
+  });
+  return lodIndices;
+}
+function cullInstancedMesh(instancedMesh, positions, visibleIndices) {
+  const dummy = new THREE5.Object3D();
+  let visibleCount = 0;
+  positions.forEach((position, index) => {
+    if (visibleIndices.has(index)) {
+      dummy.position.copy(position);
+      dummy.updateMatrix();
+      instancedMesh.setMatrixAt(visibleCount, dummy.matrix);
+      visibleCount++;
+    }
+  });
+  instancedMesh.count = visibleCount;
+  instancedMesh.instanceMatrix.needsUpdate = true;
+  return visibleCount;
+}
+var SpatialHashGrid = class {
+  cellSize;
+  cells;
+  objectPositions;
+  constructor(cellSize = 10) {
+    this.cellSize = cellSize;
+    this.cells = /* @__PURE__ */ new Map();
+    this.objectPositions = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Get cell key for a position
+   */
+  getCellKey(x, z) {
+    const cellX = Math.floor(x / this.cellSize);
+    const cellZ = Math.floor(z / this.cellSize);
+    return `${cellX},${cellZ}`;
+  }
+  /**
+   * Insert an object into the grid
+   */
+  insert(id, position) {
+    const key = this.getCellKey(position.x, position.z);
+    if (!this.cells.has(key)) {
+      this.cells.set(key, /* @__PURE__ */ new Set());
+    }
+    this.cells.get(key).add(id);
+    this.objectPositions.set(id, position.clone());
+  }
+  /**
+   * Remove an object from the grid
+   */
+  remove(id) {
+    const position = this.objectPositions.get(id);
+    if (position) {
+      const key = this.getCellKey(position.x, position.z);
+      this.cells.get(key)?.delete(id);
+      this.objectPositions.delete(id);
+    }
+  }
+  /**
+   * Update an object's position
+   */
+  update(id, newPosition) {
+    this.remove(id);
+    this.insert(id, newPosition);
+  }
+  /**
+   * Query objects within a radius of a position
+   */
+  queryRadius(center, radius) {
+    const results = [];
+    const radiusSquared = radius * radius;
+    const minCellX = Math.floor((center.x - radius) / this.cellSize);
+    const maxCellX = Math.floor((center.x + radius) / this.cellSize);
+    const minCellZ = Math.floor((center.z - radius) / this.cellSize);
+    const maxCellZ = Math.floor((center.z + radius) / this.cellSize);
+    for (let x = minCellX; x <= maxCellX; x++) {
+      for (let z = minCellZ; z <= maxCellZ; z++) {
+        const key = `${x},${z}`;
+        const cell = this.cells.get(key);
+        if (cell) {
+          cell.forEach((id) => {
+            const position = this.objectPositions.get(id);
+            if (position) {
+              const dx = position.x - center.x;
+              const dz = position.z - center.z;
+              if (dx * dx + dz * dz <= radiusSquared) {
+                results.push(id);
+              }
+            }
+          });
+        }
+      }
+    }
+    return results;
+  }
+  /**
+   * Query objects within a bounding box
+   */
+  queryBox(minX, maxX, minZ, maxZ) {
+    const results = [];
+    const minCellX = Math.floor(minX / this.cellSize);
+    const maxCellX = Math.floor(maxX / this.cellSize);
+    const minCellZ = Math.floor(minZ / this.cellSize);
+    const maxCellZ = Math.floor(maxZ / this.cellSize);
+    for (let x = minCellX; x <= maxCellX; x++) {
+      for (let z = minCellZ; z <= maxCellZ; z++) {
+        const key = `${x},${z}`;
+        const cell = this.cells.get(key);
+        if (cell) {
+          cell.forEach((id) => {
+            const position = this.objectPositions.get(id);
+            if (position && position.x >= minX && position.x <= maxX && position.z >= minZ && position.z <= maxZ) {
+              results.push(id);
+            }
+          });
+        }
+      }
+    }
+    return results;
+  }
+  /**
+   * Clear all objects from the grid
+   */
+  clear() {
+    this.cells.clear();
+    this.objectPositions.clear();
+  }
+  /**
+   * Get statistics about the grid
+   */
+  getStats() {
+    return {
+      objects: this.objectPositions.size,
+      cells: this.cells.size
+    };
+  }
+};
+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 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);
+  const palette = useAvl3DPalette();
+  const { t } = useTranslate();
+  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);
+  });
+  if (!palette) return null;
+  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: palette.traitOrbit,
+          emissive: palette.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: palette.traitOrbit,
+                emissive: palette.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 ? AVL_INK.quiet : AVL_INK.text,
+          fontSize: highlighted ? 13 : 11
+        }
+      ),
+      highlighted && /* @__PURE__ */ jsx(
+        Avl3DTooltip,
+        {
+          position: [0.8, 0.8, 0],
+          title: name,
+          accentColor: palette.traitOrbitHighlight,
+          rows: [
+            { label: t("avl3d.states"), value: String(stateCount) },
+            { label: t("avl3d.events"), value: String(eventCount) },
+            { label: t("avl3d.transitions"), value: String(transitionCount) }
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function PagePortal({ name, position }) {
+  const palette = useAvl3DPalette();
+  if (!palette) return null;
+  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: palette.pagePortal,
+          emissive: palette.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: palette.pagePortal,
+          emissive: palette.pagePortal,
+          emissiveIntensity: 0.8,
+          transparent: true,
+          opacity: 0.2,
+          depthWrite: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Avl3DLabel,
+      {
+        position: [0, -0.5, 0],
+        text: name,
+        color: palette.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 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: AVL_INK.text,
+        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 ?? void 0,
+          isTerminal: state.isTerminal ?? void 0,
+          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";
+var Avl3DTransitionScene = ({
+  data
+}) => {
+  const palette = useAvl3DPalette();
+  const { t, locale } = useTranslate();
+  if (!palette) return null;
+  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: palette.transitionArc,
+            emissive: palette.transitionArc,
+            emissiveIntensity: 0.5,
+            roughness: 0.3
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Avl3DLabel,
+        {
+          position: [0, 0, 0.3],
+          text: data.event,
+          color: AVL_INK.text,
+          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: palette.transitionArc, 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: palette.guardPass,
+            emissive: palette.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: palette.transitionArc, 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: t("avl.guard").toLocaleLowerCase(locale),
+          color: palette.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: t(data.effects.length === 1 ? "avl3d.effectCountOne" : "avl3d.effectCountOther", { count: data.effects.length }),
+          color: AVL_INK.caution,
+          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: palette.transitionArc, 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, colorKey: "sparkle" },
+    { count: 15, size: 1.8, speed: 0.1, opacity: 0.2, scale: 25, colorKey: "sparkleWarm" }
+  ],
+  orbital: [
+    { count: 30, size: 0.8, speed: 0.15, opacity: 0.25, scale: 18, colorKey: "sparkle" },
+    { count: 8, size: 1.2, speed: 0.08, opacity: 0.15, scale: 12, colorKey: "sparkleWarm" }
+  ],
+  trait: [
+    { count: 15, size: 0.6, speed: 0.1, opacity: 0.2, scale: 12, colorKey: "sparkle" }
+  ],
+  transition: [
+    { count: 8, size: 0.4, speed: 0.08, opacity: 0.15, scale: 8, colorKey: "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
+}) => {
+  const palette = useAvl3DPalette();
+  const starsKey = useMemo(() => `stars-${level}`, [level]);
+  if (!enabled || !palette) return null;
+  const bloom = BLOOM_CONFIG[level];
+  const dof = DOF_CONFIG[level];
+  const sparkles = SPARKLE_CONFIGS[level];
+  const stars = STARS_CONFIG[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: palette[cfg.colorKey]
+      },
+      `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";
+function useThemeColors(values, scopeRef) {
+  const { appliedTheme } = useTheme();
+  const scopeKey = JSON.stringify(useThemeScope());
+  const [resolved, setResolved] = useState(null);
+  const valuesKey = JSON.stringify(values);
+  useLayoutEffect(() => {
+    const scope = scopeRef.current;
+    if (!scope) return;
+    const out = {};
+    for (const key of Object.keys(values)) out[key] = resolveThemeColor(values[key], scope);
+    setResolved(out);
+  }, [appliedTheme, scopeKey, valuesKey, scopeRef]);
+  return resolved;
+}
+var log3 = createLogger("almadar:ui:avl-3d-viewer");
+function CameraController({ targetPosition, targetLookAt, animated }) {
+  const { camera } = useThree();
+  const targetPosVec = useRef(new THREE5.Vector3(...targetPosition));
+  const targetLookVec = useRef(new THREE5.Vector3(...targetLookAt));
+  const isAnimating = useRef(false);
+  useEffect(() => {
+    const newTarget = new THREE5.Vector3(...targetPosition);
+    const newLookAt = new THREE5.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.x, targetLookVec.current.y, targetLookVec.current.z);
+      }
+    }
+  }, [targetPosition, targetLookAt, animated, camera]);
+  useFrame((_, delta) => {
+    if (!isAnimating.current) return;
+    const speed = 3;
+    camera.position.x = THREE5.MathUtils.damp(camera.position.x, targetPosVec.current.x, speed, delta);
+    camera.position.y = THREE5.MathUtils.damp(camera.position.y, targetPosVec.current.y, speed, delta);
+    camera.position.z = THREE5.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 = THREE5.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 { t } = useTranslate();
+  const containerRef = useRef(null);
+  const resolvedColors = useThemeColors(AVL_3D_COLORS, containerRef);
+  const palette = useMemo(() => {
+    if (!resolvedColors) return null;
+    const out = {};
+    for (const key of Object.keys(AVL_3D_COLORS)) {
+      const resolved = resolvedColors[key];
+      if (!resolved) {
+        log3.error("avl-3d-palette-key-unresolved", { key, value: AVL_3D_COLORS[key] });
+        return null;
+      }
+      out[key] = resolved.css;
+    }
+    return out;
+  }, [resolvedColors]);
+  const schema = useMemo(() => {
+    if (typeof schemaProp === "string") {
+      try {
+        return JSON.parse(schemaProp);
+      } catch {
+        return { name: t("common.error"), orbitals: [] };
+      }
+    }
+    return schemaProp;
+  }, [schemaProp, t]);
+  const configValue = useMemo(() => ({
+    modelOverrides,
+    effectsEnabled: effects,
+    palette
+  }), [modelOverrides, effects, palette]);
+  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] = React3.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,
+    {
+      ref: containerRef,
+      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-surface/80 backdrop-blur rounded-md px-3 py-1.5",
+            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React3.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",
+                  ...pressableProps(() => handleBreadcrumbClick(crumb.level)),
+                  children: /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: crumb.labelKey ? t(crumb.labelKey, crumb.labelParams) : crumb.label })
+                }
+              ) : /* @__PURE__ */ jsx(Typography, { variant: "small", color: "primary", className: "font-bold", children: crumb.labelKey ? t(crumb.labelKey, crumb.labelParams) : crumb.label })
+            ] }, crumb.level))
+          }
+        ),
+        state.level !== "application" && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "small",
+            color: "muted",
+            className: "absolute bottom-2 right-2 z-10 bg-surface/60 backdrop-blur rounded px-2 py-1",
+            children: t("avl.pressEscToZoomOut")
+          }
+        ),
+        palette && /* @__PURE__ */ jsx(
+          Canvas,
+          {
+            style: { width: "100%", height: "100%" },
+            camera: {
+              position: cameraConfig.position,
+              fov: 60,
+              near: 0.1,
+              far: 200
+            },
+            onCreated: ({ gl }) => {
+              gl.setClearColor(palette.background);
+            },
+            children: /* @__PURE__ */ jsx(Avl3DContext.Provider, { value: configValue, children: /* @__PURE__ */ jsxs(
+              Scene3D,
+              {
+                background: palette.background,
+                fog: { color: palette.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: palette.lightAmbient,
+                      directionalIntensity: 0.5,
+                      directionalColor: palette.lightDirectional,
+                      directionalPosition: [8, 15, 12],
+                      shadows: false
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "pointLight",
+                    {
+                      position: [0, -10, 0],
+                      color: palette.lightFill,
+                      intensity: 0.15,
+                      distance: 50,
+                      decay: 2
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    CameraController,
+                    {
+                      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";
+
+export { AssetLoader, Avl3DApplicationScene, Avl3DEffects, Avl3DOrbitalScene, Avl3DTraitScene, Avl3DTransitionScene, Avl3DViewer, Camera3D, Canvas3DErrorBoundary, Canvas3DHost, Canvas3DLoadingState, Canvas3DHost as GameCanvas3D, Lighting3D, ModelLoader, Scene3D, SpatialHashGrid, assetLoader, calculateLODLevel, createGridHighlight, cullInstancedMesh, filterByFrustum, getCellsInRadius, getNeighbors, getVisibleIndices, gridDistance, gridManhattanDistance, gridToWorld, isInBounds, isInFrustum, normalizeMouseCoordinates, raycastToObjects, raycastToPlane, updateInstanceLOD, useAssetLoader, useGameCanvas3DEvents, useRaycaster, useSceneGraph, useThree5 as useThree, worldToGrid };