@almadar/ui 5.107.0 → 5.108.0

package/dist/{components/game → lib/drawable}/three/index.js

@@ -1,195 +1,307 @@
-import React7, { forwardRef, useRef, useEffect, useImperativeHandle, useState, useMemo, useCallback, createContext, useContext, Component, useReducer } from 'react';
-import { useThree, useFrame, Canvas, useLoader } from '@react-three/fiber';
-import * as THREE6 from 'three';
+import React6, { forwardRef, useRef, useState, useEffect, useMemo, useImperativeHandle, useCallback, createContext, useContext, Component, useReducer } from 'react';
+import { EventBusContext, useTraitScope } from '@almadar/ui/providers';
+import { createLogger } from '@almadar/logger';
+import { Canvas, useThree, useFrame, useLoader } from '@react-three/fiber';
+import * as THREE9 from 'three';
 import { Vector3, QuadraticBezierCurve3, MathUtils, Quaternion } from 'three';
+import { Grid, OrbitControls, Billboard, Text, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { OrbitControls, Grid, Billboard, Text, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
-import { createLogger } from '@almadar/logger';
 import { GLTFLoader as GLTFLoader$1 } from 'three/examples/jsm/loaders/GLTFLoader';
 import { clone } from 'three/examples/jsm/utils/SkeletonUtils';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { OrbitControls as OrbitControls$1 } from 'three/examples/jsm/controls/OrbitControls.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
-import { EventBusContext, useTraitScope } from '@almadar/ui/providers';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { EffectComposer, Bloom, DepthOfField, Vignette } from '@react-three/postprocessing';
 import { useTranslate } from '@almadar/ui/hooks';
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-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 THREE6.Color(background);
-    } else {
-      const loader = new THREE6.TextureLoader();
-      loader.load(background, (texture) => {
-        scene.background = texture;
+var log = createLogger("almadar:eventbus");
+var subLog = createLogger("almadar:eventbus:subscribe");
+var scopeLog = createLogger("almadar:ui:trait-scope");
+function getGlobalEventBus() {
+  if (typeof window !== "undefined") {
+    return window.__kflowEventBus ?? null;
+  }
+  return null;
+}
+var fallbackListeners = /* @__PURE__ */ new Map();
+var fallbackAnyListeners = /* @__PURE__ */ new Set();
+var fallbackEventBus = {
+  emit: (type, payload, source) => {
+    const event = {
+      type,
+      payload,
+      timestamp: Date.now(),
+      source
+    };
+    const handlers = fallbackListeners.get(type);
+    log.debug("emit", { type, payloadKeys: payload ? Object.keys(payload).length : 0, listenerCount: (handlers?.size ?? 0) + fallbackAnyListeners.size });
+    if (handlers) {
+      handlers.forEach((handler) => {
+        try {
+          handler(event);
+        } catch (error) {
+          log.error("Error in listener", { type, error: error instanceof Error ? error : String(error) });
+        }
       });
     }
-    if (fog) {
-      scene.fog = new THREE6.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 THREE6.Vector3(...position));
-    const initialTarget = useRef(new THREE6.Vector3(...target));
-    useEffect(() => {
-      let newCamera;
-      if (mode === "isometric") {
-        const aspect = viewport.aspect;
-        const size = 10 / zoom;
-        newCamera = new THREE6.OrthographicCamera(
-          -size * aspect,
-          size * aspect,
-          size,
-          -size,
-          0.1,
-          1e3
-        );
-      } else {
-        newCamera = new THREE6.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);
+    fallbackAnyListeners.forEach((handler) => {
+      try {
+        handler(event);
+      } catch (error) {
+        log.error("Error in onAny listener", { type, error: error instanceof Error ? error : String(error) });
       }
     });
-    useImperativeHandle(ref, () => ({
-      getCamera: () => camera,
-      setPosition: (x, y, z) => {
-        camera.position.set(x, y, z);
-        if (controlsRef.current) {
-          controlsRef.current.update();
+  },
+  on: (type, listener) => {
+    if (!fallbackListeners.has(type)) {
+      fallbackListeners.set(type, /* @__PURE__ */ new Set());
+    }
+    fallbackListeners.get(type).add(listener);
+    subLog.debug("subscribe", { type, totalListeners: fallbackListeners.get(type).size });
+    return () => {
+      const handlers = fallbackListeners.get(type);
+      if (handlers) {
+        handlers.delete(listener);
+        if (handlers.size === 0) {
+          fallbackListeners.delete(type);
         }
-      },
-      lookAt: (x, y, z) => {
-        camera.lookAt(x, y, z);
-        if (controlsRef.current) {
-          controlsRef.current.target.set(x, y, z);
-          controlsRef.current.update();
+      }
+    };
+  },
+  once: (type, listener) => {
+    const wrappedListener = (event) => {
+      fallbackListeners.get(type)?.delete(wrappedListener);
+      listener(event);
+    };
+    return fallbackEventBus.on(type, wrappedListener);
+  },
+  hasListeners: (type) => {
+    const handlers = fallbackListeners.get(type);
+    return handlers !== void 0 && handlers.size > 0;
+  },
+  onAny: (listener) => {
+    fallbackAnyListeners.add(listener);
+    subLog.debug("subscribe:any", { totalAnyListeners: fallbackAnyListeners.size });
+    return () => {
+      fallbackAnyListeners.delete(listener);
+    };
+  }
+};
+function useEventBus() {
+  const context = useContext(EventBusContext);
+  const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
+  const scope = useTraitScope();
+  return useMemo(() => {
+    if (!scope) {
+      return {
+        ...baseBus,
+        emit: (type, payload, source) => {
+          if (typeof type === "string" && type.startsWith("UI:") && !type.slice(3).includes(".")) {
+            scopeLog.warn("emit:bare-key-no-scope", { type });
+          }
+          baseBus.emit(type, payload, source);
         }
-      },
-      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();
+      };
+    }
+    return {
+      ...baseBus,
+      emit: (type, payload, source) => {
+        if (typeof type === "string" && type.startsWith("UI:")) {
+          const tail = type.slice(3);
+          const qualified = tail.includes(".") ? type : `UI:${scope.orbital}.${scope.trait}.${tail}`;
+          if (qualified !== type) {
+            scopeLog.info("emit:qualified", {
+              from: type,
+              to: qualified,
+              scopeOrbital: scope.orbital,
+              scopeTrait: scope.trait
+            });
+          }
+          baseBus.emit(qualified, payload, source);
+          return;
         }
-      },
-      getViewBounds: () => {
-        const min = new THREE6.Vector3(-10, -10, -10);
-        const max = new THREE6.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
+        baseBus.emit(type, payload, source);
       }
-    );
+    };
+  }, [baseBus, scope]);
+}
+function useEmitEvent() {
+  const eventBus = useEventBus();
+  return useCallback(
+    (type, payload, source) => {
+      eventBus.emit(type, payload, source);
+    },
+    [eventBus]
+  );
+}
+
+// lib/drawable/hitTest.ts
+function collectDrawnItems(nodes) {
+  const out = [];
+  for (const n of nodes) {
+    switch (n.type) {
+      case "draw-sprite":
+      case "draw-shape":
+      case "draw-text":
+        out.push({ pos: n.position, id: n.id });
+        break;
+      case "draw-sprite-layer":
+      case "draw-shape-layer":
+      case "draw-text-layer":
+        for (const it of n.items) out.push({ pos: it.position, id: it.id });
+        break;
+    }
   }
-);
-Camera3D.displayName = "Camera3D";
-function Lighting3D({
-  ambientIntensity = 0.6,
-  ambientColor = "#ffffff",
-  directionalIntensity = 0.8,
-  directionalColor = "#ffffff",
-  directionalPosition = [10, 20, 10],
-  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
+  return out;
+}
+function buildHitIndex(items) {
+  const m = /* @__PURE__ */ new Map();
+  for (const it of items) {
+    if (it.id !== void 0) m.set(`${it.pos.x},${it.pos.y}`, it.id);
+  }
+  return m;
+}
+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
+        });
       }
-    ),
-    /* @__PURE__ */ jsx(
-      "hemisphereLight",
-      {
-        intensity: 0.3,
-        color: "#87ceeb",
-        groundColor: "#362d1d"
+      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
+        });
       }
-    ),
-    showHelpers && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-      "directionalLightHelper",
-      {
-        args: [
-          new THREE6.DirectionalLight(directionalColor, directionalIntensity),
-          5
-        ]
+      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,
@@ -236,7 +348,7 @@ function Canvas3DLoadingState({
     /* @__PURE__ */ jsx("div", { className: "canvas-3d-loading__background", children: /* @__PURE__ */ jsx("div", { className: "bg__grid" }) })
   ] });
 }
-var log = createLogger("almadar:ui:game:canvas3d:error-boundary");
+var log2 = createLogger("almadar:ui:game:canvas3d:error-boundary");
 var Canvas3DErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
@@ -264,8 +376,8 @@ var Canvas3DErrorBoundary = class extends Component {
   componentDidCatch(error, errorInfo) {
     this.setState({ errorInfo });
     this.props.onError?.(error, errorInfo);
-    log.error("Error caught", { error });
-    log.error("Component stack", { componentStack: errorInfo.componentStack ?? "<none>" });
+    log2.error("Error caught", { error });
+    log2.error("Component stack", { componentStack: errorInfo.componentStack ?? "<none>" });
   }
   render() {
     if (this.state.hasError) {
@@ -308,7 +420,92 @@ var Canvas3DErrorBoundary = class extends Component {
     return this.props.children;
   }
 };
-var log2 = createLogger("almadar:ui:game:model-loader");
+function Lighting3D({
+  ambientIntensity = 0.6,
+  ambientColor = "#ffffff",
+  directionalIntensity = 0.8,
+  directionalColor = "#ffffff",
+  directionalPosition = [10, 20, 10],
+  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: 0.3,
+        color: "#87ceeb",
+        groundColor: "#362d1d"
+      }
+    ),
+    showHelpers && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      "directionalLightHelper",
+      {
+        args: [
+          new THREE9.DirectionalLight(directionalColor, directionalIntensity),
+          5
+        ]
+      }
+    ) })
+  ] });
+}
+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 THREE9.Vector3(target[0], target[1], target[2]));
+  const goal = useRef(new THREE9.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;
+}
+var log3 = createLogger("almadar:ui:game:model-loader");
 var gltfCache = /* @__PURE__ */ new Map();
 function loadGltfCached(url, assetRoot) {
   const key = `${assetRoot}|${url}`;
@@ -321,13 +518,13 @@ function loadGltfCached(url, assetRoot) {
         loader.load(
           url,
           (gltf) => {
-            log2.debug("Loaded", { url, clips: gltf.animations.length });
+            log3.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) });
+            log3.warn("Failed", { url, error: err instanceof Error ? err : String(err) });
             pending.error = err instanceof Error ? err : new Error(String(err));
             resolveDone();
           }
@@ -394,12 +591,12 @@ function ModelLoader({
     if (!loadedModel) return null;
     const cloned = clone(loadedModel);
     cloned.updateMatrixWorld(true);
-    const tintColor = tint ? new THREE6.Color(tint) : null;
+    const tintColor = tint ? new THREE9.Color(tint) : null;
     cloned.traverse((child) => {
-      if (child instanceof THREE6.Mesh) {
+      if (child instanceof THREE9.Mesh) {
         child.castShadow = castShadow;
         child.receiveShadow = receiveShadow;
-        if (tintColor && child.material instanceof THREE6.MeshStandardMaterial) {
+        if (tintColor && child.material instanceof THREE9.MeshStandardMaterial) {
           const mat = child.material.clone();
           mat.color.multiply(tintColor);
           child.material = mat;
@@ -408,7 +605,7 @@ function ModelLoader({
     });
     return cloned;
   }, [loadedModel, castShadow, receiveShadow, tint]);
-  const mixer = useMemo(() => model ? new THREE6.AnimationMixer(model) : null, [model]);
+  const mixer = useMemo(() => model ? new THREE9.AnimationMixer(model) : null, [model]);
   useEffect(() => {
     if (!mixer || !animation || clips.length === 0) return;
     const wanted = animation.toLowerCase();
@@ -425,8 +622,8 @@ function ModelLoader({
   });
   const normFactor = useMemo(() => {
     if (!model) return 1;
-    const box = new THREE6.Box3().setFromObject(model);
-    const size = new THREE6.Vector3();
+    const box = new THREE9.Box3().setFromObject(model);
+    const size = new THREE9.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
     if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
@@ -509,1576 +706,1377 @@ function ModelLoader({
     }
   );
 }
-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 {
-  constructor() {
-    __publicField(this, "objLoader");
-    __publicField(this, "textureLoader");
-    __publicField(this, "modelCache");
-    __publicField(this, "textureCache");
-    __publicField(this, "loadingPromises");
-    this.objLoader = new OBJLoader();
-    this.textureLoader = new THREE6.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;
+function SpriteBillboard({ node, world }) {
+  const texture = useLoader(THREE9.TextureLoader, node.asset.url);
+  const img = texture.image;
+  const imgW = img?.width || 1;
+  const imgH = img?.height || 1;
+  if (node.frame) {
+    texture.repeat.set(node.frame.w / imgW, node.frame.h / imgH);
+    texture.offset.set(node.frame.x / imgW, 1 - (node.frame.y + node.frame.h) / imgH);
+    texture.magFilter = texture.minFilter = THREE9.NearestFilter;
+    texture.needsUpdate = true;
   }
-  /**
-   * 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;
+  const aspect = node.frame ? node.frame.w / node.frame.h : imgW / imgH;
+  const height = node.height ?? 1;
+  const width = node.width ?? height * aspect;
+  return /* @__PURE__ */ jsx(Billboard, { position: [world[0], world[1] + height / 2, world[2]], children: /* @__PURE__ */ jsxs("mesh", { children: [
+    /* @__PURE__ */ jsx("planeGeometry", { args: [width, height] }),
+    /* @__PURE__ */ jsx(
+      "meshBasicMaterial",
+      {
+        map: texture,
+        transparent: true,
+        alphaTest: 0.1,
+        side: THREE9.DoubleSide,
+        opacity: node.opacity ?? 1
+      }
+    )
+  ] }) });
+}
+function Sprite3D({ node, projector }) {
+  if (node.asset.dimension === "3d" && node.asset.url) {
+    return /* @__PURE__ */ jsx("group", { position: projector.toWorld(node.position), children: /* @__PURE__ */ jsx(
+      ModelLoader,
+      {
+        url: node.asset.url,
+        scale: node.width ?? projector.cellSize,
+        rotation: [0, node.rotation ?? 0, 0],
+        fallbackGeometry: "box",
+        castShadow: true,
+        receiveShadow: true
+      }
+    ) });
   }
-  /**
-   * 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 (!node.asset.url) return null;
+  return /* @__PURE__ */ jsx(SpriteBillboard, { node, world: projector.toWorld(node.position) });
+}
+function Shape3D({ node, projector }) {
+  const world = projector.toWorld(node.position);
+  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 ?? projector.cellSize;
+      const h = node.shape === "cell" ? projector.cellSize * 0.95 : node.height ?? projector.cellSize;
+      geometry = /* @__PURE__ */ jsx("planeGeometry", { args: [w, h] });
+      break;
     }
-    if (this.loadingPromises.has(`texture:${url}`)) {
-      return this.loadingPromises.get(`texture:${url}`);
+    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;
     }
-    const loadPromise = this.textureLoader.loadAsync(url).then((texture) => {
-      texture.colorSpace = THREE6.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`);
+    case "poly": {
+      if (!node.points || node.points.length === 0) return null;
+      const s = new THREE9.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;
     }
-    return model;
+    default:
+      return null;
   }
-  /**
-   * 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 /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [world[0], world[1] + 0.02, world[2]], children: [
+    geometry,
+    /* @__PURE__ */ jsx("meshBasicMaterial", { color, transparent: true, opacity: node.opacity ?? 1, side: THREE9.DoubleSide })
+  ] });
+}
+function Text3D({ node, projector }) {
+  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",
+      children: node.text
     }
-    return texture;
+  ) });
+}
+function Drawable3D({ node, projector }) {
+  switch (node.type) {
+    case "draw-sprite":
+      return /* @__PURE__ */ jsx(Sprite3D, { node, projector });
+    case "draw-shape":
+      return /* @__PURE__ */ jsx(Shape3D, { node, projector });
+    case "draw-text":
+      return /* @__PURE__ */ jsx(Text3D, { node, projector });
+    case "draw-sprite-layer":
+      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Sprite3D, { node: item, projector }, i)) });
+    case "draw-shape-layer":
+      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Shape3D, { node: item, projector }, i)) });
+    case "draw-text-layer":
+      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Text3D, { node: item, projector }, i)) });
   }
-  /**
-   * Clear all caches
-   */
-  clearCache() {
-    this.textureCache.forEach((texture) => {
-      texture.dispose();
-    });
-    this.modelCache.forEach((model) => {
-      model.scene.traverse((child) => {
-        if (child instanceof THREE6.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();
+}
 
-// components/game/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 useThree3(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 THREE6.Vector3(...opts.cameraPosition),
-    []
-  );
-  useEffect(() => {
-    if (!containerRef.current) return;
-    const container = containerRef.current;
-    const { clientWidth, clientHeight } = container;
-    const scene = new THREE6.Scene();
-    scene.background = new THREE6.Color(opts.backgroundColor);
-    sceneRef.current = scene;
-    let camera;
-    const aspect = clientWidth / clientHeight;
-    if (opts.cameraMode === "isometric") {
-      const size = 10;
-      camera = new THREE6.OrthographicCamera(
-        -size * aspect,
-        size * aspect,
-        size,
-        -size,
-        0.1,
-        1e3
-      );
-    } else {
-      camera = new THREE6.PerspectiveCamera(45, aspect, 0.1, 1e3);
-    }
-    camera.position.copy(initialCameraPosition);
-    cameraRef.current = camera;
-    const renderer = new THREE6.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 = THREE6.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 THREE6.AmbientLight(16777215, 0.6);
-    scene.add(ambientLight);
-    const directionalLight = new THREE6.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 THREE6.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 THREE6.PerspectiveCamera) {
-        camera.aspect = width / height;
-        camera.updateProjectionMatrix();
-      } else if (camera instanceof THREE6.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 THREE6.OrthographicCamera(
-        -size * aspect,
-        size * aspect,
-        size,
-        -size,
-        0.1,
-        1e3
-      );
-    } else {
-      newCamera = new THREE6.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]
-  );
+// lib/drawable/projector3d.ts
+function create3DProjector(opts = {}) {
+  const cellSize = opts.cellSize ?? 1;
+  const offsetX = opts.offsetX ?? 0;
+  const offsetZ = opts.offsetZ ?? 0;
   return {
-    canvasRef,
-    renderer: rendererRef.current,
-    scene: sceneRef.current,
-    camera: cameraRef.current,
-    controls: controlsRef.current,
-    isReady,
-    dimensions,
-    setCameraPosition,
-    lookAt,
-    resetCamera,
-    fitView
+    cellSize,
+    toWorld: (pos) => [pos.x * cellSize + offsetX, pos.z ?? 0, pos.y * cellSize + offsetZ]
   };
 }
-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;
+
+// lib/drawable/three/game3dTheme.ts
+var GRID_COLORS_3D = {
+  cell: "#444444",
+  section: "#666666"
+};
+var DEFAULT_BACKGROUND_3D = "#1a1a2e";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var DEFAULT_GRID_CONFIG = {
+  cellSize: 1,
+  offsetX: 0,
+  offsetZ: 0
+};
+var Canvas3DHost = forwardRef(
+  ({
+    cameraMode = "isometric",
+    followTarget,
+    showGrid = true,
+    orientation = "standard",
+    overlay = "default",
+    shadows = true,
+    backgroundColor = DEFAULT_BACKGROUND_3D,
+    className,
+    isLoading: externalLoading,
+    error: externalError,
+    tileClickEvent,
+    unitClickEvent,
+    featureClickEvent,
+    canvasClickEvent,
+    tileHoverEvent,
+    tileLeaveEvent,
+    unitAnimationEvent,
+    cameraChangeEvent,
+    loadingMessage = "Loading 3D Scene...",
+    keyMap,
+    keyUpMap,
+    children,
+    drawables
+  }, ref) => {
+    const containerRef = useRef(null);
+    const controlsRef = useRef(null);
+    const [internalError, setInternalError] = useState(null);
+    const eventBus = useEventBus();
+    const keysRef = useRef(/* @__PURE__ */ new Set());
+    useEffect(() => {
+      if (!keyMap && !keyUpMap) return;
+      const down = (e) => {
+        if (keysRef.current.has(e.code)) return;
+        keysRef.current.add(e.code);
+        const ev = keyMap?.[e.code];
+        if (ev) {
+          eventBus.emit(`UI:${ev}`, {});
+          e.preventDefault();
+        }
+      };
+      const up = (e) => {
+        keysRef.current.delete(e.code);
+        const ev = keyUpMap?.[e.code];
+        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(drawables ?? []), [drawables]);
+    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 };
       }
-    },
-    []
-  );
-  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;
+      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;
       }
-    },
-    []
-  );
-  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;
+      return { minX, maxX, minZ, maxZ };
+    }, [scenePositions]);
+    const cameraTarget = useMemo(
+      () => [
+        (gridBounds.minX + gridBounds.maxX) / 2,
+        0,
+        (gridBounds.minZ + gridBounds.maxZ) / 2
+      ],
+      [gridBounds]
+    );
+    const gridConfig = useMemo(
+      () => ({
+        ...DEFAULT_GRID_CONFIG,
+        offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
+        offsetZ: -(gridBounds.maxZ - gridBounds.minZ) / 2
+      }),
+      [gridBounds]
+    );
+    const drawableProjector = useMemo(
+      () => create3DProjector({
+        cellSize: gridConfig.cellSize,
+        offsetX: -gridBounds.minX * gridConfig.cellSize,
+        offsetZ: -gridBounds.minZ * gridConfig.cellSize
+      }),
+      [gridBounds, gridConfig]
+    );
+    useImperativeHandle(ref, () => ({
+      getCameraPosition: () => {
+        if (controlsRef.current) {
+          const pos = controlsRef.current.object.position;
+          return new THREE9.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 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);
-          }
-        })
+    }));
+    const cameraConfig = useMemo(() => {
+      const size = Math.max(
+        gridBounds.maxX - gridBounds.minX,
+        gridBounds.maxZ - gridBounds.minZ,
+        4
+        // minimum framing distance so a tiny board isn't zoomed in
       );
-      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 THREE6.Raycaster());
-  const mouse = useRef(new THREE6.Vector2());
-  const clientToNDC = useCallback(
-    (clientX, clientY) => {
-      if (!canvas) {
-        return { x: 0, y: 0 };
+      const cx = (gridBounds.minX + gridBounds.maxX) / 2;
+      const cz = (gridBounds.minZ + gridBounds.maxZ) / 2;
+      const d = size * 1;
+      switch (cameraMode) {
+        case "isometric":
+          return { position: [cx + d, d * 0.8, cz + d], fov: 45 };
+        case "top-down":
+          return { position: [cx, d * 2, cz + d * 0.35], fov: 45 };
+        case "follow":
+          return { position: [cx, d * 0.5, cz + d], fov: 45 };
+        case "perspective":
+        default:
+          return { position: [cx + d, d, cz + d], fov: 45 };
       }
-      const rect = canvas.getBoundingClientRect();
-      return {
-        x: (clientX - rect.left) / rect.width * 2 - 1,
-        y: -((clientY - rect.top) / rect.height) * 2 + 1
+    }, [cameraMode, gridBounds]);
+    const followWorld = useMemo(() => {
+      if (followTarget) return drawableProjector.toWorld(followTarget);
+      return cameraTarget;
+    }, [followTarget, drawableProjector, cameraTarget]);
+    const followOffset = useMemo(
+      () => cameraMode === "chase" ? [0, 4, -7] : [5, 7, 5],
+      [cameraMode]
+    );
+    const handleGroundClick = useCallback((e) => {
+      if (!tileClickEvent && !unitClickEvent) return;
+      e.stopPropagation();
+      const cell = {
+        x: Math.round(e.point.x / gridConfig.cellSize + gridBounds.minX),
+        y: Math.round(e.point.z / gridConfig.cellSize + gridBounds.minZ)
       };
-    },
-    [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 THREE6.Plane(new THREE6.Vector3(0, 1, 0), 0);
-      const target = new THREE6.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 };
+      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 });
       }
-      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
-          };
+    }, [tileClickEvent, unitClickEvent, gridConfig, gridBounds, hitIndex, 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__ */ jsxs("div", { className: "game-canvas-3d__error", children: [
+        "Error: ",
+        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,
+              {
+                shadows,
+                camera: {
+                  position: cameraConfig.position,
+                  fov: cameraConfig.fov,
+                  near: 0.1,
+                  far: 1e3
+                },
+                style: { background: backgroundColor, position: "absolute", inset: 0 },
+                onClick: (e) => {
+                  if (e.target === e.currentTarget) {
+                    eventHandlers.handleCanvasClick(e);
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(CameraController3D, { onCameraChange: eventHandlers.handleCameraChange }),
+                  (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
+                    }
+                  ),
+                  showGrid && /* @__PURE__ */ jsx(
+                    Grid,
+                    {
+                      args: [
+                        Math.max(gridBounds.maxX - gridBounds.minX + 2, 10),
+                        Math.max(gridBounds.maxZ - gridBounds.minZ + 2, 10)
+                      ],
+                      position: [
+                        (gridBounds.maxX - gridBounds.minX) / 2 - 0.5,
+                        0,
+                        (gridBounds.maxZ - gridBounds.minZ) / 2 - 0.5
+                      ],
+                      cellSize: 1,
+                      cellThickness: 1,
+                      cellColor: GRID_COLORS_3D.cell,
+                      sectionSize: 5,
+                      sectionThickness: 1.5,
+                      sectionColor: GRID_COLORS_3D.section,
+                      fadeDistance: 50,
+                      fadeStrength: 1
+                    }
+                  ),
+                  drawables && drawables.length > 0 && /* @__PURE__ */ jsx("group", { children: drawables.map((node, i) => /* @__PURE__ */ jsx(Drawable3D, { node, projector: drawableProjector }, i)) }),
+                  (tileClickEvent || unitClickEvent) && /* @__PURE__ */ jsxs(
+                    "mesh",
+                    {
+                      rotation: [-Math.PI / 2, 0, 0],
+                      position: [
+                        (gridBounds.maxX - gridBounds.minX) / 2 * gridConfig.cellSize,
+                        0,
+                        (gridBounds.maxZ - gridBounds.minZ) / 2 * gridConfig.cellSize
+                      ],
+                      onClick: handleGroundClick,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "planeGeometry",
+                          {
+                            args: [
+                              (gridBounds.maxX - gridBounds.minX + 4) * gridConfig.cellSize,
+                              (gridBounds.maxZ - gridBounds.minZ + 4) * gridConfig.cellSize
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("meshBasicMaterial", { transparent: true, opacity: 0, depthWrite: false })
+                      ]
+                    }
+                  ),
+                  children,
+                  /* @__PURE__ */ jsx(
+                    OrbitControls,
+                    {
+                      ref: controlsRef,
+                      enabled: cameraMode !== "follow" && cameraMode !== "chase",
+                      target: cameraTarget,
+                      enableDamping: true,
+                      dampingFactor: 0.05,
+                      enableZoom: true,
+                      enablePan: true,
+                      touches: { ONE: THREE9.TOUCH.ROTATE, TWO: THREE9.TOUCH.DOLLY_PAN },
+                      minDistance: 2,
+                      maxDistance: 100,
+                      maxPolarAngle: Math.PI / 2 - 0.1
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
       }
-      const gridCoords = getGridCoordinates(clientX, clientY);
-      if (gridCoords) {
-        return {
-          gridX: gridCoords.x,
-          gridZ: gridCoords.z,
-          worldPosition: new THREE6.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 log3 = createLogger("almadar:eventbus");
-var subLog = createLogger("almadar:eventbus:subscribe");
-var scopeLog = createLogger("almadar:ui:trait-scope");
-function getGlobalEventBus() {
-  if (typeof window !== "undefined") {
-    return window.__kflowEventBus ?? null;
+    );
   }
-  return null;
-}
-var fallbackListeners = /* @__PURE__ */ new Map();
-var fallbackAnyListeners = /* @__PURE__ */ new Set();
-var fallbackEventBus = {
-  emit: (type, payload, source) => {
-    const event = {
-      type,
-      payload,
-      timestamp: Date.now(),
-      source
-    };
-    const handlers = fallbackListeners.get(type);
-    log3.debug("emit", { type, payloadKeys: payload ? Object.keys(payload).length : 0, listenerCount: (handlers?.size ?? 0) + fallbackAnyListeners.size });
-    if (handlers) {
-      handlers.forEach((handler) => {
-        try {
-          handler(event);
-        } catch (error) {
-          log3.error("Error in listener", { type, error: error instanceof Error ? error : String(error) });
-        }
+);
+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 THREE9.Color(background);
+    } else {
+      const loader = new THREE9.TextureLoader();
+      loader.load(background, (texture) => {
+        scene.background = texture;
       });
     }
-    fallbackAnyListeners.forEach((handler) => {
-      try {
-        handler(event);
-      } catch (error) {
-        log3.error("Error in onAny listener", { type, error: error instanceof Error ? error : String(error) });
-      }
-    });
-  },
-  on: (type, listener) => {
-    if (!fallbackListeners.has(type)) {
-      fallbackListeners.set(type, /* @__PURE__ */ new Set());
+    if (fog) {
+      scene.fog = new THREE9.Fog(fog.color, fog.near, fog.far);
     }
-    fallbackListeners.get(type).add(listener);
-    subLog.debug("subscribe", { type, totalListeners: fallbackListeners.get(type).size });
-    return () => {
-      const handlers = fallbackListeners.get(type);
-      if (handlers) {
-        handlers.delete(listener);
-        if (handlers.size === 0) {
-          fallbackListeners.delete(type);
-        }
-      }
-    };
-  },
-  once: (type, listener) => {
-    const wrappedListener = (event) => {
-      fallbackListeners.get(type)?.delete(wrappedListener);
-      listener(event);
-    };
-    return fallbackEventBus.on(type, wrappedListener);
-  },
-  hasListeners: (type) => {
-    const handlers = fallbackListeners.get(type);
-    return handlers !== void 0 && handlers.size > 0;
-  },
-  onAny: (listener) => {
-    fallbackAnyListeners.add(listener);
-    subLog.debug("subscribe:any", { totalAnyListeners: fallbackAnyListeners.size });
     return () => {
-      fallbackAnyListeners.delete(listener);
+      scene.background = null;
+      scene.fog = null;
     };
-  }
-};
-function useEventBus() {
-  const context = useContext(EventBusContext);
-  const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
-  const scope = useTraitScope();
-  return useMemo(() => {
-    if (!scope) {
-      return {
-        ...baseBus,
-        emit: (type, payload, source) => {
-          if (typeof type === "string" && type.startsWith("UI:") && !type.slice(3).includes(".")) {
-            scopeLog.warn("emit:bare-key-no-scope", { type });
-          }
-          baseBus.emit(type, payload, source);
-        }
-      };
-    }
-    return {
-      ...baseBus,
-      emit: (type, payload, source) => {
-        if (typeof type === "string" && type.startsWith("UI:")) {
-          const tail = type.slice(3);
-          const qualified = tail.includes(".") ? type : `UI:${scope.orbital}.${scope.trait}.${tail}`;
-          if (qualified !== type) {
-            scopeLog.info("emit:qualified", {
-              from: type,
-              to: qualified,
-              scopeOrbital: scope.orbital,
-              scopeTrait: scope.trait
-            });
-          }
-          baseBus.emit(qualified, payload, source);
-          return;
-        }
-        baseBus.emit(type, payload, source);
-      }
-    };
-  }, [baseBus, scope]);
-}
-function useEmitEvent() {
-  const eventBus = useEventBus();
-  return useCallback(
-    (type, payload, source) => {
-      eventBus.emit(type, payload, source);
-    },
-    [eventBus]
-  );
+  }, [scene, background, fog]);
+  return /* @__PURE__ */ jsx(Fragment, { children });
 }
-
-// components/game/three/hooks/useGameCanvas3DEvents.ts
-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
-        });
+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 THREE9.Vector3(...position));
+    const initialTarget = useRef(new THREE9.Vector3(...target));
+    useEffect(() => {
+      let newCamera;
+      if (mode === "isometric") {
+        const aspect = viewport.aspect;
+        const size = 10 / zoom;
+        newCamera = new THREE9.OrthographicCamera(
+          -size * aspect,
+          size * aspect,
+          size,
+          -size,
+          0.1,
+          1e3
+        );
+      } else {
+        newCamera = new THREE9.PerspectiveCamera(fov, viewport.aspect, 0.1, 1e3);
       }
-      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
-        });
+      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);
       }
-      optionsRef.current.onFeatureClick?.(feature, event);
-    },
-    [featureClickEvent, emit]
-  );
-  const handleCanvasClick = useCallback(
-    (event) => {
-      if (canvasClickEvent) {
-        emit(canvasClickEvent, {
-          clientX: event.clientX,
-          clientY: event.clientY,
-          button: event.button
-        });
+      return () => {
+      };
+    }, [mode, fov, zoom, viewport.aspect, set]);
+    useFrame(() => {
+      if (onChange) {
+        onChange(camera);
       }
-      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
-          });
+    });
+    useImperativeHandle(ref, () => ({
+      getCamera: () => camera,
+      setPosition: (x, y, z) => {
+        camera.position.set(x, y, z);
+        if (controlsRef.current) {
+          controlsRef.current.update();
         }
-      } else {
-        if (tileLeaveEvent) {
-          emit(tileLeaveEvent, {});
+      },
+      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 THREE9.Vector3(-10, -10, -10);
+        const max = new THREE9.Vector3(10, 10, 10);
+        return { min, max };
       }
-      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()
-        });
+    }));
+    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
       }
-    },
-    [cameraChangeEvent, emit]
-  );
-  return {
-    handleTileClick,
-    handleUnitClick,
-    handleFeatureClick,
-    handleCanvasClick,
-    handleTileHover,
-    handleUnitAnimation,
-    handleCameraChange
-  };
-}
-
-// lib/drawable/hitTest.ts
-function collectDrawnItems(nodes) {
-  const out = [];
-  for (const n of nodes) {
-    switch (n.type) {
-      case "draw-sprite":
-      case "draw-shape":
-      case "draw-text":
-        out.push({ pos: n.position, id: n.id });
-        break;
-      case "draw-sprite-layer":
-      case "draw-shape-layer":
-      case "draw-text-layer":
-        for (const it of n.items) out.push({ pos: it.position, id: it.id });
-        break;
-    }
+    );
   }
-  return out;
-}
-function buildHitIndex(items) {
-  const m = /* @__PURE__ */ new Map();
-  for (const it of items) {
-    if (it.id !== void 0) m.set(`${it.pos.x},${it.pos.y}`, it.id);
+);
+Camera3D.displayName = "Camera3D";
+function detectAssetRoot2(modelUrl) {
+  const idx = modelUrl.indexOf("/3d/");
+  if (idx !== -1) {
+    return modelUrl.substring(0, idx + 4);
   }
-  return m;
+  return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
 }
-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 THREE6.Vector3(target[0], target[1], target[2]));
-  const goal = useRef(new THREE6.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;
+function createGLTFLoaderForUrl(url) {
+  const loader = new GLTFLoader();
+  loader.setResourcePath(detectAssetRoot2(url));
+  return loader;
 }
-function SpriteBillboard({ node, world }) {
-  const texture = useLoader(THREE6.TextureLoader, node.asset.url);
-  const img = texture.image;
-  const imgW = img?.width || 1;
-  const imgH = img?.height || 1;
-  if (node.frame) {
-    texture.repeat.set(node.frame.w / imgW, node.frame.h / imgH);
-    texture.offset.set(node.frame.x / imgW, 1 - (node.frame.y + node.frame.h) / imgH);
-    texture.magFilter = texture.minFilter = THREE6.NearestFilter;
-    texture.needsUpdate = true;
+var AssetLoader = class {
+  constructor() {
+    __publicField(this, "objLoader");
+    __publicField(this, "textureLoader");
+    __publicField(this, "modelCache");
+    __publicField(this, "textureCache");
+    __publicField(this, "loadingPromises");
+    this.objLoader = new OBJLoader();
+    this.textureLoader = new THREE9.TextureLoader();
+    this.modelCache = /* @__PURE__ */ new Map();
+    this.textureCache = /* @__PURE__ */ new Map();
+    this.loadingPromises = /* @__PURE__ */ new Map();
   }
-  const aspect = node.frame ? node.frame.w / node.frame.h : imgW / imgH;
-  const height = node.height ?? 1;
-  const width = node.width ?? height * aspect;
-  return /* @__PURE__ */ jsx(Billboard, { position: [world[0], world[1] + height / 2, world[2]], children: /* @__PURE__ */ jsxs("mesh", { children: [
-    /* @__PURE__ */ jsx("planeGeometry", { args: [width, height] }),
-    /* @__PURE__ */ jsx(
-      "meshBasicMaterial",
-      {
-        map: texture,
-        transparent: true,
-        alphaTest: 0.1,
-        side: THREE6.DoubleSide,
-        opacity: node.opacity ?? 1
-      }
-    )
-  ] }) });
-}
-function Sprite3D({ node, projector }) {
-  if (node.asset.dimension === "3d" && node.asset.url) {
-    return /* @__PURE__ */ jsx("group", { position: projector.toWorld(node.position), children: /* @__PURE__ */ jsx(
-      ModelLoader,
-      {
-        url: node.asset.url,
-        scale: node.width ?? projector.cellSize,
-        rotation: [0, node.rotation ?? 0, 0],
-        fallbackGeometry: "box",
-        castShadow: true,
-        receiveShadow: true
-      }
-    ) });
+  /**
+   * 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;
   }
-  if (!node.asset.url) return null;
-  return /* @__PURE__ */ jsx(SpriteBillboard, { node, world: projector.toWorld(node.position) });
-}
-function Shape3D({ node, projector }) {
-  const world = projector.toWorld(node.position);
-  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 ?? projector.cellSize;
-      const h = node.shape === "cell" ? projector.cellSize * 0.95 : node.height ?? projector.cellSize;
-      geometry = /* @__PURE__ */ jsx("planeGeometry", { args: [w, h] });
-      break;
+  /**
+   * 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;
     }
-    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;
+    if (this.loadingPromises.has(url)) {
+      const result = await this.loadingPromises.get(url);
+      return result.scene;
     }
-    case "poly": {
-      if (!node.points || node.points.length === 0) return null;
-      const s = new THREE6.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;
+    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);
     }
-    default:
-      return null;
+    if (this.loadingPromises.has(`texture:${url}`)) {
+      return this.loadingPromises.get(`texture:${url}`);
+    }
+    const loadPromise = this.textureLoader.loadAsync(url).then((texture) => {
+      texture.colorSpace = THREE9.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;
   }
-  return /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [world[0], world[1] + 0.02, world[2]], children: [
-    geometry,
-    /* @__PURE__ */ jsx("meshBasicMaterial", { color, transparent: true, opacity: node.opacity ?? 1, side: THREE6.DoubleSide })
-  ] });
-}
-function Text3D({ node, projector }) {
-  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",
-      children: node.text
+  /**
+   * 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`);
     }
-  ) });
-}
-function Drawable3D({ node, projector }) {
-  switch (node.type) {
-    case "draw-sprite":
-      return /* @__PURE__ */ jsx(Sprite3D, { node, projector });
-    case "draw-shape":
-      return /* @__PURE__ */ jsx(Shape3D, { node, projector });
-    case "draw-text":
-      return /* @__PURE__ */ jsx(Text3D, { node, projector });
-    case "draw-sprite-layer":
-      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Sprite3D, { node: item, projector }, i)) });
-    case "draw-shape-layer":
-      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Shape3D, { node: item, projector }, i)) });
-    case "draw-text-layer":
-      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Text3D, { node: item, projector }, i)) });
+    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 THREE9.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
+    };
   }
-}
-
-// 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]
-  };
-}
-
-// components/game/three/game3dTheme.ts
-var GRID_COLORS_3D = {
-  cell: "#444444",
-  section: "#666666"
 };
-var DEFAULT_BACKGROUND_3D = "#1a1a2e";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var DEFAULT_GRID_CONFIG = {
-  cellSize: 1,
-  offsetX: 0,
-  offsetZ: 0
+var assetLoader = new AssetLoader();
+
+// 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()
 };
-var GameCanvas3D = forwardRef(
-  ({
-    cameraMode = "isometric",
-    followTarget,
-    showGrid = true,
-    orientation = "standard",
-    overlay = "default",
-    shadows = true,
-    backgroundColor = DEFAULT_BACKGROUND_3D,
-    className,
-    isLoading: externalLoading,
-    error: externalError,
-    tileClickEvent,
-    unitClickEvent,
-    featureClickEvent,
-    canvasClickEvent,
-    tileHoverEvent,
-    tileLeaveEvent,
-    unitAnimationEvent,
-    cameraChangeEvent,
-    loadingMessage = "Loading 3D Scene...",
-    keyMap,
-    keyUpMap,
-    children,
-    drawables
-  }, ref) => {
-    const containerRef = useRef(null);
-    const controlsRef = useRef(null);
-    const [internalError, setInternalError] = useState(null);
-    const eventBus = useEventBus();
-    const keysRef = useRef(/* @__PURE__ */ new Set());
-    useEffect(() => {
-      if (!keyMap && !keyUpMap) return;
-      const down = (e) => {
-        if (keysRef.current.has(e.code)) return;
-        keysRef.current.add(e.code);
-        const ev = keyMap?.[e.code];
-        if (ev) {
-          eventBus.emit(`UI:${ev}`, {});
-          e.preventDefault();
-        }
-      };
-      const up = (e) => {
-        keysRef.current.delete(e.code);
-        const ev = keyUpMap?.[e.code];
-        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
+function useThree4(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 THREE9.Vector3(...opts.cameraPosition),
+    []
+  );
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+    const { clientWidth, clientHeight } = container;
+    const scene = new THREE9.Scene();
+    scene.background = new THREE9.Color(opts.backgroundColor);
+    sceneRef.current = scene;
+    let camera;
+    const aspect = clientWidth / clientHeight;
+    if (opts.cameraMode === "isometric") {
+      const size = 10;
+      camera = new THREE9.OrthographicCamera(
+        -size * aspect,
+        size * aspect,
+        size,
+        -size,
+        0.1,
+        1e3
+      );
+    } else {
+      camera = new THREE9.PerspectiveCamera(45, aspect, 0.1, 1e3);
+    }
+    camera.position.copy(initialCameraPosition);
+    cameraRef.current = camera;
+    const renderer = new THREE9.WebGLRenderer({
+      antialias: true,
+      alpha: true,
+      canvas: canvasRef.current || void 0
     });
-    const drawnItems = useMemo(() => collectDrawnItems(drawables ?? []), [drawables]);
-    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;
+    renderer.setSize(clientWidth, clientHeight);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.shadowMap.enabled = opts.shadows;
+    renderer.shadowMap.type = THREE9.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 THREE9.AmbientLight(16777215, 0.6);
+    scene.add(ambientLight);
+    const directionalLight = new THREE9.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 THREE9.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 THREE9.PerspectiveCamera) {
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+      } else if (camera instanceof THREE9.OrthographicCamera) {
+        const aspect2 = width / height;
+        const size = 10;
+        camera.left = -size * aspect2;
+        camera.right = size * aspect2;
+        camera.top = size;
+        camera.bottom = -size;
+        camera.updateProjectionMatrix();
       }
-      return { minX, maxX, minZ, maxZ };
-    }, [scenePositions]);
-    const cameraTarget = useMemo(
-      () => [
-        (gridBounds.minX + gridBounds.maxX) / 2,
-        0,
-        (gridBounds.minZ + gridBounds.maxZ) / 2
-      ],
-      [gridBounds]
-    );
-    const gridConfig = useMemo(
-      () => ({
-        ...DEFAULT_GRID_CONFIG,
-        offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
-        offsetZ: -(gridBounds.maxZ - gridBounds.minZ) / 2
-      }),
-      [gridBounds]
-    );
-    const drawableProjector = useMemo(
-      () => create3DProjector({
-        cellSize: gridConfig.cellSize,
-        offsetX: -gridBounds.minX * gridConfig.cellSize,
-        offsetZ: -gridBounds.minZ * gridConfig.cellSize
-      }),
-      [gridBounds, gridConfig]
-    );
-    useImperativeHandle(ref, () => ({
-      getCameraPosition: () => {
-        if (controlsRef.current) {
-          const pos = controlsRef.current.object.position;
-          return new THREE6.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,
-        gridBounds.maxZ - gridBounds.minZ,
-        4
-        // minimum framing distance so a tiny board isn't zoomed in
+      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 THREE9.OrthographicCamera(
+        -size * aspect,
+        size * aspect,
+        size,
+        -size,
+        0.1,
+        1e3
       );
-      const cx = (gridBounds.minX + gridBounds.maxX) / 2;
-      const cz = (gridBounds.minZ + gridBounds.maxZ) / 2;
-      const d = size * 1;
-      switch (cameraMode) {
-        case "isometric":
-          return { position: [cx + d, d * 0.8, cz + d], fov: 45 };
-        case "top-down":
-          return { position: [cx, d * 2, cz + d * 0.35], fov: 45 };
-        case "follow":
-          return { position: [cx, d * 0.5, cz + d], fov: 45 };
-        case "perspective":
-        default:
-          return { position: [cx + d, d, cz + d], fov: 45 };
-      }
-    }, [cameraMode, gridBounds]);
-    const followWorld = useMemo(() => {
-      if (followTarget) return drawableProjector.toWorld(followTarget);
-      return cameraTarget;
-    }, [followTarget, drawableProjector, cameraTarget]);
-    const followOffset = useMemo(
-      () => cameraMode === "chase" ? [0, 4, -7] : [5, 7, 5],
-      [cameraMode]
-    );
-    const handleGroundClick = useCallback((e) => {
-      if (!tileClickEvent && !unitClickEvent) return;
-      e.stopPropagation();
-      const cell = {
-        x: Math.round(e.point.x / gridConfig.cellSize + gridBounds.minX),
-        y: Math.round(e.point.z / gridConfig.cellSize + gridBounds.minZ)
+    } else {
+      newCamera = new THREE9.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);
       };
-      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 });
+      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();
       }
-    }, [tileClickEvent, unitClickEvent, gridConfig, gridBounds, hitIndex, 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__ */ jsxs("div", { className: "game-canvas-3d__error", children: [
-        "Error: ",
-        displayError
-      ] }) }) });
+  }, [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);
     }
-    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,
-              {
-                shadows,
-                camera: {
-                  position: cameraConfig.position,
-                  fov: cameraConfig.fov,
-                  near: 0.1,
-                  far: 1e3
-                },
-                style: { background: backgroundColor, position: "absolute", inset: 0 },
-                onClick: (e) => {
-                  if (e.target === e.currentTarget) {
-                    eventHandlers.handleCanvasClick(e);
-                  }
-                },
-                children: [
-                  /* @__PURE__ */ jsx(CameraController3D, { onCameraChange: eventHandlers.handleCameraChange }),
-                  (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
-                    }
-                  ),
-                  showGrid && /* @__PURE__ */ jsx(
-                    Grid,
-                    {
-                      args: [
-                        Math.max(gridBounds.maxX - gridBounds.minX + 2, 10),
-                        Math.max(gridBounds.maxZ - gridBounds.minZ + 2, 10)
-                      ],
-                      position: [
-                        (gridBounds.maxX - gridBounds.minX) / 2 - 0.5,
-                        0,
-                        (gridBounds.maxZ - gridBounds.minZ) / 2 - 0.5
-                      ],
-                      cellSize: 1,
-                      cellThickness: 1,
-                      cellColor: GRID_COLORS_3D.cell,
-                      sectionSize: 5,
-                      sectionThickness: 1.5,
-                      sectionColor: GRID_COLORS_3D.section,
-                      fadeDistance: 50,
-                      fadeStrength: 1
-                    }
-                  ),
-                  drawables && drawables.length > 0 && /* @__PURE__ */ jsx("group", { children: drawables.map((node, i) => /* @__PURE__ */ jsx(Drawable3D, { node, projector: drawableProjector }, i)) }),
-                  (tileClickEvent || unitClickEvent) && /* @__PURE__ */ jsxs(
-                    "mesh",
-                    {
-                      rotation: [-Math.PI / 2, 0, 0],
-                      position: [
-                        (gridBounds.maxX - gridBounds.minX) / 2 * gridConfig.cellSize,
-                        0,
-                        (gridBounds.maxZ - gridBounds.minZ) / 2 * gridConfig.cellSize
-                      ],
-                      onClick: handleGroundClick,
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "planeGeometry",
-                          {
-                            args: [
-                              (gridBounds.maxX - gridBounds.minX + 4) * gridConfig.cellSize,
-                              (gridBounds.maxZ - gridBounds.minZ + 4) * gridConfig.cellSize
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsx("meshBasicMaterial", { transparent: true, opacity: 0, depthWrite: false })
-                      ]
-                    }
-                  ),
-                  children,
-                  /* @__PURE__ */ jsx(
-                    OrbitControls,
-                    {
-                      ref: controlsRef,
-                      enabled: cameraMode !== "follow" && cameraMode !== "chase",
-                      target: cameraTarget,
-                      enableDamping: true,
-                      dampingFactor: 0.05,
-                      enableZoom: true,
-                      enablePan: true,
-                      touches: { ONE: THREE6.TOUCH.ROTATE, TWO: THREE6.TOUCH.DOLLY_PAN },
-                      minDistance: 2,
-                      maxDistance: 100,
-                      maxPolarAngle: Math.PI / 2 - 0.1
-                    }
-                  )
-                ]
-              }
-            )
+  }, []);
+  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 THREE9.Raycaster());
+  const mouse = useRef(new THREE9.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
+        };
       }
-    );
-  }
-);
-GameCanvas3D.displayName = "GameCanvas3D";
+      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 THREE9.Plane(new THREE9.Vector3(0, 1, 0), 0);
+      const target = new THREE9.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 THREE9.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,
@@ -2087,7 +2085,7 @@ var DEFAULT_CONFIG = {
 };
 function gridToWorld(gridX, gridZ, config = DEFAULT_CONFIG) {
   const opts = { ...DEFAULT_CONFIG, ...config };
-  return new THREE6.Vector3(
+  return new THREE9.Vector3(
     gridX * opts.cellSize + opts.offsetX,
     opts.elevation,
     gridZ * opts.cellSize + opts.offsetZ
@@ -2101,17 +2099,17 @@ function worldToGrid(worldX, worldZ, config = DEFAULT_CONFIG) {
   };
 }
 function raycastToPlane(camera, mouseX, mouseY, planeY = 0) {
-  const raycaster = new THREE6.Raycaster();
-  const mouse = new THREE6.Vector2(mouseX, mouseY);
+  const raycaster = new THREE9.Raycaster();
+  const mouse = new THREE9.Vector2(mouseX, mouseY);
   raycaster.setFromCamera(mouse, camera);
-  const plane = new THREE6.Plane(new THREE6.Vector3(0, 1, 0), -planeY);
-  const target = new THREE6.Vector3();
+  const plane = new THREE9.Plane(new THREE9.Vector3(0, 1, 0), -planeY);
+  const target = new THREE9.Vector3();
   const intersection = raycaster.ray.intersectPlane(plane, target);
   return intersection ? target : null;
 }
 function raycastToObjects(camera, mouseX, mouseY, objects) {
-  const raycaster = new THREE6.Raycaster();
-  const mouse = new THREE6.Vector2(mouseX, mouseY);
+  const raycaster = new THREE9.Raycaster();
+  const mouse = new THREE9.Vector2(mouseX, mouseY);
   raycaster.setFromCamera(mouse, camera);
   const intersects = raycaster.intersectObjects(objects, true);
   return intersects.length > 0 ? intersects[0] : null;
@@ -2139,49 +2137,230 @@ function getNeighbors(x, z, includeDiagonal = false) {
       { 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 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 THREE9.PlaneGeometry(0.95, 0.95);
+  const material = new THREE9.MeshBasicMaterial({
+    color,
+    transparent: true,
+    opacity,
+    side: THREE9.DoubleSide
+  });
+  const mesh = new THREE9.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 THREE9.Frustum();
+  const projScreenMatrix = new THREE9.Matrix4();
+  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+  frustum.setFromProjectionMatrix(projScreenMatrix);
+  const sphere = new THREE9.Sphere(position, padding);
+  return frustum.intersectsSphere(sphere);
+}
+function filterByFrustum(positions, camera, padding = 0) {
+  const frustum = new THREE9.Frustum();
+  const projScreenMatrix = new THREE9.Matrix4();
+  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+  frustum.setFromProjectionMatrix(projScreenMatrix);
+  return positions.filter((position) => {
+    const sphere = new THREE9.Sphere(position, padding);
+    return frustum.intersectsSphere(sphere);
+  });
+}
+function getVisibleIndices(positions, camera, padding = 0) {
+  const frustum = new THREE9.Frustum();
+  const projScreenMatrix = new THREE9.Matrix4();
+  const visible = /* @__PURE__ */ new Set();
+  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+  frustum.setFromProjectionMatrix(projScreenMatrix);
+  positions.forEach((position, index) => {
+    const sphere = new THREE9.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 THREE9.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 {
+  constructor(cellSize = 10) {
+    __publicField(this, "cellSize");
+    __publicField(this, "cells");
+    __publicField(this, "objectPositions");
+    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;
   }
-  return cells;
-}
-function createGridHighlight(color = 16776960, opacity = 0.3) {
-  const geometry = new THREE6.PlaneGeometry(0.95, 0.95);
-  const material = new THREE6.MeshBasicMaterial({
-    color,
-    transparent: true,
-    opacity,
-    side: THREE6.DoubleSide
-  });
-  const mesh = new THREE6.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
-  };
-}
+  /**
+   * 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
+    };
+  }
+};
 function useTapReveal(options = {}) {
   const { onReveal, onDismiss, refs, enabled = true } = options;
   const [revealed, setRevealed] = useState(false);
@@ -2329,7 +2508,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React7.forwardRef(
+var Box = React6.forwardRef(
   ({
     padding,
     paddingX,
@@ -2394,7 +2573,7 @@ var Box = React7.forwardRef(
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
     const isClickable = action || onClick;
-    return React7.createElement(
+    return React6.createElement(
       Component2,
       {
         ref,
@@ -2515,7 +2694,7 @@ var Typography = ({
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component2 = as || defaultElements[variant];
-  return React7.createElement(
+  return React6.createElement(
     Component2,
     {
       id,
@@ -2588,7 +2767,7 @@ var Stack = ({
   };
   const isHorizontal = direction === "horizontal";
   const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-  return React7.createElement(
+  return React6.createElement(
     Component2,
     {
       className: cn(
@@ -4775,12 +4954,12 @@ function useAvl3DConfig() {
 }
 function CameraController({ targetPosition, targetLookAt, animated }) {
   const { camera } = useThree();
-  const targetPosVec = useRef(new THREE6.Vector3(...targetPosition));
-  const targetLookVec = useRef(new THREE6.Vector3(...targetLookAt));
+  const targetPosVec = useRef(new THREE9.Vector3(...targetPosition));
+  const targetLookVec = useRef(new THREE9.Vector3(...targetLookAt));
   const isAnimating = useRef(false);
   useEffect(() => {
-    const newTarget = new THREE6.Vector3(...targetPosition);
-    const newLookAt = new THREE6.Vector3(...targetLookAt);
+    const newTarget = new THREE9.Vector3(...targetPosition);
+    const newLookAt = new THREE9.Vector3(...targetLookAt);
     if (!newTarget.equals(targetPosVec.current) || !newLookAt.equals(targetLookVec.current)) {
       targetPosVec.current.copy(newTarget);
       targetLookVec.current.copy(newLookAt);
@@ -4795,9 +4974,9 @@ function CameraController({ targetPosition, targetLookAt, animated }) {
   useFrame((_, delta) => {
     if (!isAnimating.current) return;
     const speed = 3;
-    camera.position.x = THREE6.MathUtils.damp(camera.position.x, targetPosVec.current.x, speed, delta);
-    camera.position.y = THREE6.MathUtils.damp(camera.position.y, targetPosVec.current.y, speed, delta);
-    camera.position.z = THREE6.MathUtils.damp(camera.position.z, targetPosVec.current.z, speed, delta);
+    camera.position.x = THREE9.MathUtils.damp(camera.position.x, targetPosVec.current.x, speed, delta);
+    camera.position.y = THREE9.MathUtils.damp(camera.position.y, targetPosVec.current.y, speed, delta);
+    camera.position.z = THREE9.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) {
@@ -4812,7 +4991,7 @@ function SceneFade({ animating, children }) {
   useFrame((_, delta) => {
     if (!groupRef.current) return;
     const target = animating ? 0 : 1;
-    opacityRef.current = THREE6.MathUtils.damp(opacityRef.current, target, 5, delta);
+    opacityRef.current = THREE9.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);
@@ -4883,7 +5062,7 @@ var Avl3DViewer = ({
   const handleTraitClick = useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const [highlightedTrait, setHighlightedTrait] = React7.useState(null);
+  const [highlightedTrait, setHighlightedTrait] = React6.useState(null);
   const handleTransitionClick = useCallback((index) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: { x: 0, y: 0 } });
   }, []);
@@ -4970,7 +5149,7 @@ var Avl3DViewer = ({
             gap: "xs",
             align: "center",
             className: "absolute top-2 left-2 z-10 bg-surface/80 backdrop-blur rounded-md px-3 py-1.5",
-            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React7.Fragment, { children: [
+            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
               i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx(
                 Box,
@@ -5064,186 +5243,5 @@ var Avl3DViewer = ({
   );
 };
 Avl3DViewer.displayName = "Avl3DViewer";
-function isInFrustum(position, camera, padding = 0) {
-  const frustum = new THREE6.Frustum();
-  const projScreenMatrix = new THREE6.Matrix4();
-  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
-  frustum.setFromProjectionMatrix(projScreenMatrix);
-  const sphere = new THREE6.Sphere(position, padding);
-  return frustum.intersectsSphere(sphere);
-}
-function filterByFrustum(positions, camera, padding = 0) {
-  const frustum = new THREE6.Frustum();
-  const projScreenMatrix = new THREE6.Matrix4();
-  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
-  frustum.setFromProjectionMatrix(projScreenMatrix);
-  return positions.filter((position) => {
-    const sphere = new THREE6.Sphere(position, padding);
-    return frustum.intersectsSphere(sphere);
-  });
-}
-function getVisibleIndices(positions, camera, padding = 0) {
-  const frustum = new THREE6.Frustum();
-  const projScreenMatrix = new THREE6.Matrix4();
-  const visible = /* @__PURE__ */ new Set();
-  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
-  frustum.setFromProjectionMatrix(projScreenMatrix);
-  positions.forEach((position, index) => {
-    const sphere = new THREE6.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 THREE6.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 {
-  constructor(cellSize = 10) {
-    __publicField(this, "cellSize");
-    __publicField(this, "cells");
-    __publicField(this, "objectPositions");
-    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
-    };
-  }
-};
 
-export { AVL_3D_COLORS, AssetLoader, Avl3DApplicationScene, Avl3DContext, Avl3DEffects, Avl3DOrbitalScene, Avl3DTraitScene, Avl3DTransitionScene, Avl3DViewer, CAMERA_POSITIONS, Camera3D, Canvas3DErrorBoundary, Canvas3DLoadingState, GameCanvas3D, Lighting3D, ModelLoader, Scene3D, SpatialHashGrid, arcCurve3D, assetLoader, calculateLODLevel, createGridHighlight, cullInstancedMesh, fibonacciSpherePositions, filterByFrustum, getCellsInRadius, getNeighbors, getVisibleIndices, goldenSpiralPositions, gridDistance, gridManhattanDistance, gridToWorld, isInBounds, isInFrustum, normalizeMouseCoordinates, orbitRingPositions, raycastToObjects, raycastToPlane, selfLoopCurve3D, treeLayout3D, updateInstanceLOD, useAssetLoader, useAvl3DConfig, useGameCanvas3DEvents, useRaycaster, useSceneGraph, useThree3 as useThree, worldToGrid };
+export { AVL_3D_COLORS, AssetLoader, Avl3DApplicationScene, Avl3DContext, Avl3DEffects, Avl3DOrbitalScene, Avl3DTraitScene, Avl3DTransitionScene, Avl3DViewer, CAMERA_POSITIONS, Camera3D, Canvas3DErrorBoundary, Canvas3DHost, Canvas3DLoadingState, Canvas3DHost as GameCanvas3D, Lighting3D, ModelLoader, Scene3D, SpatialHashGrid, arcCurve3D, assetLoader, calculateLODLevel, createGridHighlight, cullInstancedMesh, fibonacciSpherePositions, filterByFrustum, getCellsInRadius, getNeighbors, getVisibleIndices, goldenSpiralPositions, gridDistance, gridManhattanDistance, gridToWorld, isInBounds, isInFrustum, normalizeMouseCoordinates, orbitRingPositions, raycastToObjects, raycastToPlane, selfLoopCurve3D, treeLayout3D, updateInstanceLOD, useAssetLoader, useAvl3DConfig, useGameCanvas3DEvents, useRaycaster, useSceneGraph, useThree4 as useThree, worldToGrid };