@almadar/ui 5.107.0 → 5.108.0

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

@@ -1,19 +1,19 @@
 'use strict';
 
-var React7 = require('react');
+var React6 = require('react');
+var providers = require('@almadar/ui/providers');
+var logger = require('@almadar/logger');
 var fiber = require('@react-three/fiber');
-var THREE6 = require('three');
-var jsxRuntime = require('react/jsx-runtime');
+var THREE9 = require('three');
 var drei = require('@react-three/drei');
-var logger = require('@almadar/logger');
+var jsxRuntime = require('react/jsx-runtime');
 var GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader');
 var SkeletonUtils = require('three/examples/jsm/utils/SkeletonUtils');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
 var OrbitControls_js = require('three/examples/jsm/controls/OrbitControls.js');
 var GLTFLoader_js = require('three/examples/jsm/loaders/GLTFLoader.js');
 var OBJLoader_js = require('three/examples/jsm/loaders/OBJLoader.js');
-var providers = require('@almadar/ui/providers');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var postprocessing = require('@react-three/postprocessing');
 var hooks = require('@almadar/ui/hooks');
 
@@ -37,187 +37,299 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React7__default = /*#__PURE__*/_interopDefault(React7);
-var THREE6__namespace = /*#__PURE__*/_interopNamespace(THREE6);
+var React6__default = /*#__PURE__*/_interopDefault(React6);
+var THREE9__namespace = /*#__PURE__*/_interopNamespace(THREE9);
 
 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 } = fiber.useThree();
-  const initializedRef = React7.useRef(false);
-  React7.useEffect(() => {
-    if (initializedRef.current) return;
-    initializedRef.current = true;
-    if (background.startsWith("#") || background.startsWith("rgb")) {
-      scene.background = new THREE6__namespace.Color(background);
-    } else {
-      const loader = new THREE6__namespace.TextureLoader();
-      loader.load(background, (texture) => {
-        scene.background = texture;
+var log = logger.createLogger("almadar:eventbus");
+var subLog = logger.createLogger("almadar:eventbus:subscribe");
+var scopeLog = logger.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__namespace.Fog(fog.color, fog.near, fog.far);
-    }
-    return () => {
-      scene.background = null;
-      scene.fog = null;
-    };
-  }, [scene, background, fog]);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-}
-var Camera3D = React7.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 } = fiber.useThree();
-    const controlsRef = React7.useRef(null);
-    const initialPosition = React7.useRef(new THREE6__namespace.Vector3(...position));
-    const initialTarget = React7.useRef(new THREE6__namespace.Vector3(...target));
-    React7.useEffect(() => {
-      let newCamera;
-      if (mode === "isometric") {
-        const aspect = viewport.aspect;
-        const size = 10 / zoom;
-        newCamera = new THREE6__namespace.OrthographicCamera(
-          -size * aspect,
-          size * aspect,
-          size,
-          -size,
-          0.1,
-          1e3
-        );
-      } else {
-        newCamera = new THREE6__namespace.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]);
-    fiber.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) });
       }
     });
-    React7.useImperativeHandle(ref, () => ({
-      getCamera: () => camera,
-      setPosition: (x, y, z) => {
-        camera.position.set(x, y, z);
-        if (controlsRef.current) {
-          controlsRef.current.update();
-        }
-      },
-      lookAt: (x, y, z) => {
-        camera.lookAt(x, y, z);
-        if (controlsRef.current) {
-          controlsRef.current.target.set(x, y, z);
-          controlsRef.current.update();
-        }
-      },
-      reset: () => {
-        camera.position.copy(initialPosition.current);
-        camera.lookAt(initialTarget.current.x, initialTarget.current.y, initialTarget.current.z);
-        if (controlsRef.current) {
-          controlsRef.current.target.copy(initialTarget.current);
-          controlsRef.current.update();
+  },
+  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);
         }
-      },
-      getViewBounds: () => {
-        const min = new THREE6__namespace.Vector3(-10, -10, -10);
-        const max = new THREE6__namespace.Vector3(10, 10, 10);
-        return { min, max };
-      }
-    }));
-    const maxPolarAngle = mode === "top-down" ? 0.1 : Math.PI / 2 - 0.1;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      drei.OrbitControls,
-      {
-        ref: controlsRef,
-        camera,
-        enabled: enableOrbit,
-        target: [initialTarget.current.x, initialTarget.current.y, initialTarget.current.z],
-        minDistance,
-        maxDistance,
-        maxPolarAngle,
-        enableDamping: true,
-        dampingFactor: 0.05
       }
-    );
+    };
+  },
+  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);
+    };
   }
-);
-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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("ambientLight", { intensity: ambientIntensity, color: ambientColor }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-      "hemisphereLight",
-      {
-        intensity: 0.3,
-        color: "#87ceeb",
-        groundColor: "#362d1d"
-      }
-    ),
-    showHelpers && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      "directionalLightHelper",
-      {
-        args: [
-          new THREE6__namespace.DirectionalLight(directionalColor, directionalIntensity),
-          5
-        ]
+};
+function useEventBus() {
+  const context = React6.useContext(providers.EventBusContext);
+  const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
+  const scope = providers.useTraitScope();
+  return React6.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 Canvas3DLoadingState({
-  progress = 0,
-  loaded = 0,
+function useEmitEvent() {
+  const eventBus = useEventBus();
+  return React6.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;
+    }
+  }
+  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 = React6.useRef(options);
+  optionsRef.current = options;
+  const handleTileClick = React6.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 = React6.useCallback(
+    (unit, event) => {
+      if (unitClickEvent) {
+        emit(unitClickEvent, {
+          unitId: unit.id,
+          x: unit.x,
+          z: unit.z ?? unit.y ?? 0,
+          unitType: unit.unitType,
+          name: unit.name,
+          team: unit.team,
+          faction: unit.faction,
+          health: unit.health,
+          maxHealth: unit.maxHealth
+        });
+      }
+      optionsRef.current.onUnitClick?.(unit, event);
+    },
+    [unitClickEvent, emit]
+  );
+  const handleFeatureClick = React6.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 = React6.useCallback(
+    (event) => {
+      if (canvasClickEvent) {
+        emit(canvasClickEvent, {
+          clientX: event.clientX,
+          clientY: event.clientY,
+          button: event.button
+        });
+      }
+      optionsRef.current.onCanvasClick?.(event);
+    },
+    [canvasClickEvent, emit]
+  );
+  const handleTileHover = React6.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 = React6.useCallback(
+    (unitId, state) => {
+      if (unitAnimationEvent) {
+        emit(unitAnimationEvent, {
+          unitId,
+          state,
+          timestamp: Date.now()
+        });
+      }
+      optionsRef.current.onUnitAnimation?.(unitId, state);
+    },
+    [unitAnimationEvent, emit]
+  );
+  const handleCameraChange = React6.useCallback(
+    (position) => {
+      if (cameraChangeEvent) {
+        emit(cameraChangeEvent, {
+          position,
+          timestamp: Date.now()
+        });
+      }
+    },
+    [cameraChangeEvent, emit]
+  );
+  return {
+    handleTileClick,
+    handleUnitClick,
+    handleFeatureClick,
+    handleCanvasClick,
+    handleTileHover,
+    handleUnitAnimation,
+    handleCameraChange
+  };
+}
+function Canvas3DLoadingState({
+  progress = 0,
+  loaded = 0,
   total = 0,
   message = "Loading 3D Scene...",
   details,
@@ -260,8 +372,8 @@ function Canvas3DLoadingState({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "canvas-3d-loading__background", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg__grid" }) })
   ] });
 }
-var log = logger.createLogger("almadar:ui:game:canvas3d:error-boundary");
-var Canvas3DErrorBoundary = class extends React7.Component {
+var log2 = logger.createLogger("almadar:ui:game:canvas3d:error-boundary");
+var Canvas3DErrorBoundary = class extends React6.Component {
   constructor(props) {
     super(props);
     __publicField(this, "handleReset", () => {
@@ -288,8 +400,8 @@ var Canvas3DErrorBoundary = class extends React7.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) {
@@ -332,7 +444,92 @@ var Canvas3DErrorBoundary = class extends React7.Component {
     return this.props.children;
   }
 };
-var log2 = logger.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("ambientLight", { intensity: ambientIntensity, color: ambientColor }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      "hemisphereLight",
+      {
+        intensity: 0.3,
+        color: "#87ceeb",
+        groundColor: "#362d1d"
+      }
+    ),
+    showHelpers && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "directionalLightHelper",
+      {
+        args: [
+          new THREE9__namespace.DirectionalLight(directionalColor, directionalIntensity),
+          5
+        ]
+      }
+    ) })
+  ] });
+}
+function CameraController3D({
+  onCameraChange
+}) {
+  const { camera } = fiber.useThree();
+  React6.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 } = fiber.useThree();
+  const look = React6.useRef(new THREE9__namespace.Vector3(target[0], target[1], target[2]));
+  const goal = React6.useRef(new THREE9__namespace.Vector3());
+  fiber.useFrame((_, delta) => {
+    const t = Math.min(1, delta * 5);
+    goal.current.set(target[0] + offset[0], target[1] + offset[1], target[2] + offset[2]);
+    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 = logger.createLogger("almadar:ui:game:model-loader");
 var gltfCache = /* @__PURE__ */ new Map();
 function loadGltfCached(url, assetRoot) {
   const key = `${assetRoot}|${url}`;
@@ -345,13 +542,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();
           }
@@ -376,10 +573,10 @@ function stateFromEntry(entry) {
   return { model: null, clips: [], isLoading: !entry.error, error: entry.error ?? null };
 }
 function useGLTFModel(url, resourceBasePath) {
-  const [state, setState] = React7.useState(
+  const [state, setState] = React6.useState(
     () => stateFromEntry(url ? loadGltfCached(url, resourceBasePath || detectAssetRoot(url)) : null)
   );
-  React7.useEffect(() => {
+  React6.useEffect(() => {
     if (!url) {
       setState({ model: null, clips: [], isLoading: false, error: null });
       return;
@@ -414,16 +611,16 @@ function ModelLoader({
   tint
 }) {
   const { model: loadedModel, clips, isLoading, error } = useGLTFModel(url, resourceBasePath);
-  const model = React7.useMemo(() => {
+  const model = React6.useMemo(() => {
     if (!loadedModel) return null;
     const cloned = SkeletonUtils.clone(loadedModel);
     cloned.updateMatrixWorld(true);
-    const tintColor = tint ? new THREE6__namespace.Color(tint) : null;
+    const tintColor = tint ? new THREE9__namespace.Color(tint) : null;
     cloned.traverse((child) => {
-      if (child instanceof THREE6__namespace.Mesh) {
+      if (child instanceof THREE9__namespace.Mesh) {
         child.castShadow = castShadow;
         child.receiveShadow = receiveShadow;
-        if (tintColor && child.material instanceof THREE6__namespace.MeshStandardMaterial) {
+        if (tintColor && child.material instanceof THREE9__namespace.MeshStandardMaterial) {
           const mat = child.material.clone();
           mat.color.multiply(tintColor);
           child.material = mat;
@@ -432,8 +629,8 @@ function ModelLoader({
     });
     return cloned;
   }, [loadedModel, castShadow, receiveShadow, tint]);
-  const mixer = React7.useMemo(() => model ? new THREE6__namespace.AnimationMixer(model) : null, [model]);
-  React7.useEffect(() => {
+  const mixer = React6.useMemo(() => model ? new THREE9__namespace.AnimationMixer(model) : null, [model]);
+  React6.useEffect(() => {
     if (!mixer || !animation || clips.length === 0) return;
     const wanted = animation.toLowerCase();
     const clip = clips.find((c) => c.name === animation) ?? clips.find((c) => c.name.toLowerCase() === wanted);
@@ -447,20 +644,20 @@ function ModelLoader({
   fiber.useFrame((_, delta) => {
     mixer?.update(delta);
   });
-  const normFactor = React7.useMemo(() => {
+  const normFactor = React6.useMemo(() => {
     if (!model) return 1;
-    const box = new THREE6__namespace.Box3().setFromObject(model);
-    const size = new THREE6__namespace.Vector3();
+    const box = new THREE9__namespace.Box3().setFromObject(model);
+    const size = new THREE9__namespace.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
     if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
     return 1 / maxDim;
   }, [model]);
-  const scaleArray = React7.useMemo(() => {
+  const scaleArray = React6.useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;
     return [base[0] * normFactor, base[1] * normFactor, base[2] * normFactor];
   }, [scale, normFactor]);
-  const rotationRad = React7.useMemo(() => {
+  const rotationRad = React6.useMemo(() => {
     return [
       rotation[0] * Math.PI / 180,
       rotation[1] * Math.PI / 180,
@@ -533,1576 +730,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_js.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_js.OBJLoader();
-    this.textureLoader = new THREE6__namespace.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 = fiber.useLoader(THREE9__namespace.TextureLoader, node.asset.url);
+  const img = texture.image;
+  const imgW = img?.width || 1;
+  const imgH = img?.height || 1;
+  if (node.frame) {
+    texture.repeat.set(node.frame.w / imgW, node.frame.h / imgH);
+    texture.offset.set(node.frame.x / imgW, 1 - (node.frame.y + node.frame.h) / imgH);
+    texture.magFilter = texture.minFilter = THREE9__namespace.NearestFilter;
+    texture.needsUpdate = true;
   }
-  /**
-   * 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__ */ jsxRuntime.jsx(drei.Billboard, { position: [world[0], world[1] + height / 2, world[2]], children: /* @__PURE__ */ jsxRuntime.jsxs("mesh", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [width, height] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "meshBasicMaterial",
+      {
+        map: texture,
+        transparent: true,
+        alphaTest: 0.1,
+        side: THREE9__namespace.DoubleSide,
+        opacity: node.opacity ?? 1
+      }
+    )
+  ] }) });
+}
+function Sprite3D({ node, projector }) {
+  if (node.asset.dimension === "3d" && node.asset.url) {
+    return /* @__PURE__ */ jsxRuntime.jsx("group", { position: projector.toWorld(node.position), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("ringGeometry", { args: [Math.max(0, radiusX - 0.08), radiusX, 32] }) : /* @__PURE__ */ jsxRuntime.jsx("circleGeometry", { args: [radiusX, 32] });
+      break;
     }
-    const loadPromise = this.textureLoader.loadAsync(url).then((texture) => {
-      texture.colorSpace = THREE6__namespace.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__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [world[0], world[1] + 0.02, world[2]], children: [
+    geometry,
+    /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color, transparent: true, opacity: node.opacity ?? 1, side: THREE9__namespace.DoubleSide })
+  ] });
+}
+function Text3D({ node, projector }) {
+  const world = projector.toWorld(node.position);
+  return /* @__PURE__ */ jsxRuntime.jsx(drei.Billboard, { position: [world[0], world[1] + 1.2, world[2]], children: /* @__PURE__ */ jsxRuntime.jsx(
+    drei.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__ */ jsxRuntime.jsx(Sprite3D, { node, projector });
+    case "draw-shape":
+      return /* @__PURE__ */ jsxRuntime.jsx(Shape3D, { node, projector });
+    case "draw-text":
+      return /* @__PURE__ */ jsxRuntime.jsx(Text3D, { node, projector });
+    case "draw-sprite-layer":
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(Sprite3D, { node: item, projector }, i)) });
+    case "draw-shape-layer":
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(Shape3D, { node: item, projector }, i)) });
+    case "draw-text-layer":
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsxRuntime.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__namespace.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()
+// 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]
+  };
+}
+
+// lib/drawable/three/game3dTheme.ts
+var GRID_COLORS_3D = {
+  cell: "#444444",
+  section: "#666666"
 };
-function useThree3(options = {}) {
-  const opts = { ...DEFAULT_OPTIONS, ...options };
-  const containerRef = React7.useRef(null);
-  const canvasRef = React7.useRef(null);
-  const rendererRef = React7.useRef(null);
-  const sceneRef = React7.useRef(null);
-  const cameraRef = React7.useRef(null);
-  const controlsRef = React7.useRef(null);
-  const gridHelperRef = React7.useRef(null);
-  const rafRef = React7.useRef(0);
-  const [isReady, setIsReady] = React7.useState(false);
-  const [dimensions, setDimensions] = React7.useState({ width: 0, height: 0 });
-  const initialCameraPosition = React7.useMemo(
-    () => new THREE6__namespace.Vector3(...opts.cameraPosition),
-    []
-  );
-  React7.useEffect(() => {
-    if (!containerRef.current) return;
-    const container = containerRef.current;
-    const { clientWidth, clientHeight } = container;
-    const scene = new THREE6__namespace.Scene();
-    scene.background = new THREE6__namespace.Color(opts.backgroundColor);
-    sceneRef.current = scene;
-    let camera;
-    const aspect = clientWidth / clientHeight;
-    if (opts.cameraMode === "isometric") {
-      const size = 10;
-      camera = new THREE6__namespace.OrthographicCamera(
-        -size * aspect,
-        size * aspect,
-        size,
-        -size,
-        0.1,
-        1e3
-      );
-    } else {
-      camera = new THREE6__namespace.PerspectiveCamera(45, aspect, 0.1, 1e3);
-    }
-    camera.position.copy(initialCameraPosition);
-    cameraRef.current = camera;
-    const renderer = new THREE6__namespace.WebGLRenderer({
-      antialias: true,
-      alpha: true,
-      canvas: canvasRef.current || void 0
+var DEFAULT_BACKGROUND_3D = "#1a1a2e";
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var DEFAULT_GRID_CONFIG = {
+  cellSize: 1,
+  offsetX: 0,
+  offsetZ: 0
+};
+var Canvas3DHost = React6.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 = React6.useRef(null);
+    const controlsRef = React6.useRef(null);
+    const [internalError, setInternalError] = React6.useState(null);
+    const eventBus = useEventBus();
+    const keysRef = React6.useRef(/* @__PURE__ */ new Set());
+    React6.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
     });
-    renderer.setSize(clientWidth, clientHeight);
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-    renderer.shadowMap.enabled = opts.shadows;
-    renderer.shadowMap.type = THREE6__namespace.PCFSoftShadowMap;
-    rendererRef.current = renderer;
-    const controls = new OrbitControls_js.OrbitControls(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__namespace.AmbientLight(16777215, 0.6);
-    scene.add(ambientLight);
-    const directionalLight = new THREE6__namespace.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__namespace.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__namespace.PerspectiveCamera) {
-        camera.aspect = width / height;
-        camera.updateProjectionMatrix();
-      } else if (camera instanceof THREE6__namespace.OrthographicCamera) {
-        const aspect2 = width / height;
-        const size = 10;
-        camera.left = -size * aspect2;
-        camera.right = size * aspect2;
-        camera.top = size;
-        camera.bottom = -size;
-        camera.updateProjectionMatrix();
+    const drawnItems = React6.useMemo(() => collectDrawnItems(drawables ?? []), [drawables]);
+    const scenePositions = React6.useMemo(() => drawnItems.map((i) => i.pos), [drawnItems]);
+    const hitIndex = React6.useMemo(() => buildHitIndex(drawnItems), [drawnItems]);
+    const gridBounds = React6.useMemo(() => {
+      if (scenePositions.length === 0) {
+        return { minX: 0, maxX: 10, minZ: 0, maxZ: 10 };
       }
-      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();
-    };
-  }, []);
-  React7.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__namespace.OrthographicCamera(
-        -size * aspect,
-        size * aspect,
-        size,
-        -size,
-        0.1,
-        1e3
-      );
-    } else {
-      newCamera = new THREE6__namespace.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 = React7.useCallback((x, y, z) => {
-    if (cameraRef.current) {
-      cameraRef.current.position.set(x, y, z);
-      controlsRef.current?.update();
-    }
-  }, []);
-  const lookAt = React7.useCallback((x, y, z) => {
-    if (cameraRef.current) {
-      cameraRef.current.lookAt(x, y, z);
-      controlsRef.current?.target.set(x, y, z);
-      controlsRef.current?.update();
-    }
-  }, []);
-  const resetCamera = React7.useCallback(() => {
-    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();
+      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;
       }
-    }
-  }, [initialCameraPosition]);
-  const fitView = React7.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 = React7.useRef(customLoader || new AssetLoader());
-  const [state, setState] = React7.useState({
-    isLoading: false,
-    progress: 0,
-    loaded: 0,
-    total: 0,
-    errors: []
-  });
-  React7.useEffect(() => {
-    if (preloadUrls.length > 0) {
-      preload(preloadUrls);
-    }
-  }, []);
-  const updateProgress = React7.useCallback((loaded, total) => {
-    setState((prev) => ({
-      ...prev,
-      loaded,
-      total,
-      progress: total > 0 ? Math.round(loaded / total * 100) : 0
-    }));
-  }, []);
-  const loadModel = React7.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;
+      return { minX, maxX, minZ, maxZ };
+    }, [scenePositions]);
+    const cameraTarget = React6.useMemo(
+      () => [
+        (gridBounds.minX + gridBounds.maxX) / 2,
+        0,
+        (gridBounds.minZ + gridBounds.maxZ) / 2
+      ],
+      [gridBounds]
+    );
+    const gridConfig = React6.useMemo(
+      () => ({
+        ...DEFAULT_GRID_CONFIG,
+        offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
+        offsetZ: -(gridBounds.maxZ - gridBounds.minZ) / 2
+      }),
+      [gridBounds]
+    );
+    const drawableProjector = React6.useMemo(
+      () => create3DProjector({
+        cellSize: gridConfig.cellSize,
+        offsetX: -gridBounds.minX * gridConfig.cellSize,
+        offsetZ: -gridBounds.minZ * gridConfig.cellSize
+      }),
+      [gridBounds, gridConfig]
+    );
+    React6.useImperativeHandle(ref, () => ({
+      getCameraPosition: () => {
+        if (controlsRef.current) {
+          const pos = controlsRef.current.object.position;
+          return new THREE9__namespace.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 loadOBJ = React7.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 cameraConfig = React6.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
+      );
+      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 loadTexture = React7.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;
+    }, [cameraMode, gridBounds]);
+    const followWorld = React6.useMemo(() => {
+      if (followTarget) return drawableProjector.toWorld(followTarget);
+      return cameraTarget;
+    }, [followTarget, drawableProjector, cameraTarget]);
+    const followOffset = React6.useMemo(
+      () => cameraMode === "chase" ? [0, 4, -7] : [5, 7, 5],
+      [cameraMode]
+    );
+    const handleGroundClick = React6.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)
+      };
+      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 });
       }
-    },
-    []
-  );
-  const preload = React7.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);
-          }
-        })
+    }, [tileClickEvent, unitClickEvent, gridConfig, gridBounds, hitIndex, eventBus]);
+    if (externalLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Canvas3DLoadingState,
+        {
+          progress: 1,
+          loaded: 1,
+          total: 1,
+          message: loadingMessage,
+          className
+        }
       );
-      setState((prev) => ({
-        ...prev,
-        isLoading: false,
-        errors
-      }));
-    },
-    [updateProgress]
-  );
-  const hasModel = React7.useCallback((url) => {
-    return loaderRef.current.hasModel(url);
-  }, []);
-  const hasTexture = React7.useCallback((url) => {
-    return loaderRef.current.hasTexture(url);
-  }, []);
-  const getModel = React7.useCallback((url) => {
-    try {
-      return loaderRef.current.getModel(url);
-    } catch {
-      return void 0;
-    }
-  }, []);
-  const getTexture = React7.useCallback((url) => {
-    try {
-      return loaderRef.current.getTexture(url);
-    } catch {
-      return void 0;
     }
-  }, []);
-  const clearCache = React7.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 = React7.useRef(/* @__PURE__ */ new Map());
-  const addNode = React7.useCallback((node) => {
-    const existing = nodesRef.current.get(node.id);
-    if (existing) {
-      existing.mesh.removeFromParent();
-    }
-    nodesRef.current.set(node.id, node);
-  }, []);
-  const removeNode = React7.useCallback((id) => {
-    const node = nodesRef.current.get(id);
-    if (node) {
-      node.mesh.removeFromParent();
-      nodesRef.current.delete(id);
+    const displayError = externalError || internalError;
+    if (displayError) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Canvas3DErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "game-canvas-3d game-canvas-3d--error", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "game-canvas-3d__error", children: [
+        "Error: ",
+        displayError
+      ] }) }) });
     }
-  }, []);
-  const getNode = React7.useCallback((id) => {
-    return nodesRef.current.get(id);
-  }, []);
-  const updateNodePosition = React7.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 = React7.useCallback(
-    (id, gridX, gridZ) => {
-      const node = nodesRef.current.get(id);
-      if (node) {
-        node.gridPosition = { x: gridX, z: gridZ };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Canvas3DErrorBoundary,
+      {
+        onError: (err) => setInternalError(err.message),
+        onReset: () => setInternalError(null),
+        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+              fiber.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__ */ jsxRuntime.jsx(CameraController3D, { onCameraChange: eventHandlers.handleCameraChange }),
+                  (cameraMode === "follow" || cameraMode === "chase") && /* @__PURE__ */ jsxRuntime.jsx(FollowCamera3D, { target: followWorld, offset: followOffset }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Lighting3D,
+                    {
+                      shadows,
+                      shadowBias: -4e-4,
+                      shadowNormalBias: 0.04,
+                      shadowCameraSize: 5,
+                      shadowCameraNear: 0.5,
+                      shadowCameraFar: 500
+                    }
+                  ),
+                  showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+                    drei.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__ */ jsxRuntime.jsx("group", { children: drawables.map((node, i) => /* @__PURE__ */ jsxRuntime.jsx(Drawable3D, { node, projector: drawableProjector }, i)) }),
+                  (tileClickEvent || unitClickEvent) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                          "planeGeometry",
+                          {
+                            args: [
+                              (gridBounds.maxX - gridBounds.minX + 4) * gridConfig.cellSize,
+                              (gridBounds.maxZ - gridBounds.minZ + 4) * gridConfig.cellSize
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { transparent: true, opacity: 0, depthWrite: false })
+                      ]
+                    }
+                  ),
+                  children,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    drei.OrbitControls,
+                    {
+                      ref: controlsRef,
+                      enabled: cameraMode !== "follow" && cameraMode !== "chase",
+                      target: cameraTarget,
+                      enableDamping: true,
+                      dampingFactor: 0.05,
+                      enableZoom: true,
+                      enablePan: true,
+                      touches: { ONE: THREE9__namespace.TOUCH.ROTATE, TWO: THREE9__namespace.TOUCH.DOLLY_PAN },
+                      minDistance: 2,
+                      maxDistance: 100,
+                      maxPolarAngle: Math.PI / 2 - 0.1
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
       }
-    },
-    []
-  );
-  const getNodeAtGrid = React7.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 = React7.useCallback((type) => {
-    return Array.from(nodesRef.current.values()).filter((node) => node.type === type);
-  }, []);
-  const getNodesInBounds = React7.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;
+    );
+  }
+);
+Canvas3DHost.displayName = "Canvas3DHost";
+function Scene3D({ background = "#1a1a2e", fog, children }) {
+  const { scene } = fiber.useThree();
+  const initializedRef = React6.useRef(false);
+  React6.useEffect(() => {
+    if (initializedRef.current) return;
+    initializedRef.current = true;
+    if (background.startsWith("#") || background.startsWith("rgb")) {
+      scene.background = new THREE9__namespace.Color(background);
+    } else {
+      const loader = new THREE9__namespace.TextureLoader();
+      loader.load(background, (texture) => {
+        scene.background = texture;
       });
-    },
-    []
-  );
-  const clearNodes = React7.useCallback(() => {
-    nodesRef.current.forEach((node) => {
-      node.mesh.removeFromParent();
-    });
-    nodesRef.current.clear();
-  }, []);
-  const countNodes = React7.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
-  };
+    if (fog) {
+      scene.fog = new THREE9__namespace.Fog(fog.color, fog.near, fog.far);
+    }
+    return () => {
+      scene.background = null;
+      scene.fog = null;
+    };
+  }, [scene, background, fog]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 }
-function useRaycaster(options) {
-  const { camera, canvas, cellSize = 1, offsetX = 0, offsetZ = 0 } = options;
-  const raycaster = React7.useRef(new THREE6__namespace.Raycaster());
-  const mouse = React7.useRef(new THREE6__namespace.Vector2());
-  const clientToNDC = React7.useCallback(
-    (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 = React7.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 = React7.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
-        };
+var Camera3D = React6.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 } = fiber.useThree();
+    const controlsRef = React6.useRef(null);
+    const initialPosition = React6.useRef(new THREE9__namespace.Vector3(...position));
+    const initialTarget = React6.useRef(new THREE9__namespace.Vector3(...target));
+    React6.useEffect(() => {
+      let newCamera;
+      if (mode === "isometric") {
+        const aspect = viewport.aspect;
+        const size = 10 / zoom;
+        newCamera = new THREE9__namespace.OrthographicCamera(
+          -size * aspect,
+          size * aspect,
+          size,
+          -size,
+          0.1,
+          1e3
+        );
+      } else {
+        newCamera = new THREE9__namespace.PerspectiveCamera(fov, viewport.aspect, 0.1, 1e3);
       }
-      return null;
-    },
-    [camera, canvas, clientToNDC]
-  );
-  const getAllIntersections = React7.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 = React7.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__namespace.Plane(new THREE6__namespace.Vector3(0, 1, 0), 0);
-      const target = new THREE6__namespace.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 };
+      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 null;
-    },
-    [camera, canvas, cellSize, offsetX, offsetZ, clientToNDC]
-  );
-  const getTileAtPosition = React7.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);
+      return () => {
+      };
+    }, [mode, fov, zoom, viewport.aspect, set]);
+    fiber.useFrame(() => {
+      if (onChange) {
+        onChange(camera);
+      }
+    });
+    React6.useImperativeHandle(ref, () => ({
+      getCamera: () => camera,
+      setPosition: (x, y, z) => {
+        camera.position.set(x, y, z);
+        if (controlsRef.current) {
+          controlsRef.current.update();
         }
-      });
-      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
-          };
+      },
+      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__namespace.Vector3(-10, -10, -10);
+        const max = new THREE9__namespace.Vector3(10, 10, 10);
+        return { min, max };
       }
-      const gridCoords = getGridCoordinates(clientX, clientY);
-      if (gridCoords) {
-        return {
-          gridX: gridCoords.x,
-          gridZ: gridCoords.z,
-          worldPosition: new THREE6__namespace.Vector3(
-            gridCoords.x * cellSize + offsetX,
-            0,
-            gridCoords.z * cellSize + offsetZ
-          )
-        };
+    }));
+    const maxPolarAngle = mode === "top-down" ? 0.1 : Math.PI / 2 - 0.1;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      drei.OrbitControls,
+      {
+        ref: controlsRef,
+        camera,
+        enabled: enableOrbit,
+        target: [initialTarget.current.x, initialTarget.current.y, initialTarget.current.z],
+        minDistance,
+        maxDistance,
+        maxPolarAngle,
+        enableDamping: true,
+        dampingFactor: 0.05
       }
-      return null;
-    },
-    [camera, canvas, getIntersection, getGridCoordinates, cellSize, offsetX, offsetZ]
-  );
-  return {
-    raycaster,
-    mouse,
-    getIntersection,
-    getAllIntersections,
-    getGridCoordinates,
-    getTileAtPosition,
-    clientToNDC,
-    isWithinCanvas
-  };
-}
-var log3 = logger.createLogger("almadar:eventbus");
-var subLog = logger.createLogger("almadar:eventbus:subscribe");
-var scopeLog = logger.createLogger("almadar:ui:trait-scope");
-function getGlobalEventBus() {
-  if (typeof window !== "undefined") {
-    return window.__kflowEventBus ?? null;
+    );
   }
-  return null;
+);
+Camera3D.displayName = "Camera3D";
+function detectAssetRoot2(modelUrl) {
+  const idx = modelUrl.indexOf("/3d/");
+  if (idx !== -1) {
+    return modelUrl.substring(0, idx + 4);
+  }
+  return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
 }
-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) });
-        }
-      });
+function createGLTFLoaderForUrl(url) {
+  const loader = new GLTFLoader_js.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_js.OBJLoader();
+    this.textureLoader = new THREE9__namespace.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);
     }
-    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 (this.loadingPromises.has(url)) {
+      return this.loadingPromises.get(url);
     }
-    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);
-    };
+    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 useEventBus() {
-  const context = React7.useContext(providers.EventBusContext);
-  const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
-  const scope = providers.useTraitScope();
-  return React7.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);
-        }
+  /**
+   * Load an OBJ model (fallback for non-GLB assets)
+   * @param url - URL to the .obj file
+   * @returns Promise with loaded object group
+   */
+  async loadOBJ(url) {
+    if (this.modelCache.has(url)) {
+      return this.modelCache.get(url).scene;
+    }
+    if (this.loadingPromises.has(url)) {
+      const result = await this.loadingPromises.get(url);
+      return result.scene;
+    }
+    const loadPromise = this.objLoader.loadAsync(url).then((group) => {
+      const result = {
+        scene: group,
+        animations: []
       };
+      this.modelCache.set(url, result);
+      this.loadingPromises.delete(url);
+      return result;
+    }).catch((error) => {
+      this.loadingPromises.delete(url);
+      throw new Error(`Failed to load OBJ ${url}: ${error.message}`);
+    });
+    this.loadingPromises.set(url, loadPromise);
+    return (await loadPromise).scene;
+  }
+  /**
+   * Load a texture
+   * @param url - URL to the texture image
+   * @returns Promise with loaded texture
+   */
+  async loadTexture(url) {
+    if (this.textureCache.has(url)) {
+      return this.textureCache.get(url);
     }
-    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
-            });
+    if (this.loadingPromises.has(`texture:${url}`)) {
+      return this.loadingPromises.get(`texture:${url}`);
+    }
+    const loadPromise = this.textureLoader.loadAsync(url).then((texture) => {
+      texture.colorSpace = THREE9__namespace.SRGBColorSpace;
+      this.textureCache.set(url, texture);
+      this.loadingPromises.delete(`texture:${url}`);
+      return texture;
+    }).catch((error) => {
+      this.loadingPromises.delete(`texture:${url}`);
+      throw new Error(`Failed to load texture ${url}: ${error.message}`);
+    });
+    this.loadingPromises.set(`texture:${url}`, loadPromise);
+    return loadPromise;
+  }
+  /**
+   * Preload multiple assets
+   * @param urls - Array of asset URLs to preload
+   * @returns Promise that resolves when all assets are loaded
+   */
+  async preload(urls) {
+    const promises = urls.map((url) => {
+      if (url.endsWith(".glb") || url.endsWith(".gltf")) {
+        return this.loadModel(url).catch(() => null);
+      } else if (url.endsWith(".obj")) {
+        return this.loadOBJ(url).catch(() => null);
+      } else if (/\.(png|jpg|jpeg|webp)$/i.test(url)) {
+        return this.loadTexture(url).catch(() => null);
+      }
+      return Promise.resolve(null);
+    });
+    await Promise.all(promises);
+  }
+  /**
+   * Check if a model is cached
+   * @param url - Model URL
+   */
+  hasModel(url) {
+    return this.modelCache.has(url);
+  }
+  /**
+   * Check if a texture is cached
+   * @param url - Texture URL
+   */
+  hasTexture(url) {
+    return this.textureCache.has(url);
+  }
+  /**
+   * Get cached model (throws if not cached)
+   * @param url - Model URL
+   */
+  getModel(url) {
+    const model = this.modelCache.get(url);
+    if (!model) {
+      throw new Error(`Model ${url} not in cache`);
+    }
+    return model;
+  }
+  /**
+   * Get cached texture (throws if not cached)
+   * @param url - Texture URL
+   */
+  getTexture(url) {
+    const texture = this.textureCache.get(url);
+    if (!texture) {
+      throw new Error(`Texture ${url} not in cache`);
+    }
+    return texture;
+  }
+  /**
+   * Clear all caches
+   */
+  clearCache() {
+    this.textureCache.forEach((texture) => {
+      texture.dispose();
+    });
+    this.modelCache.forEach((model) => {
+      model.scene.traverse((child) => {
+        if (child instanceof THREE9__namespace.Mesh) {
+          child.geometry.dispose();
+          if (Array.isArray(child.material)) {
+            child.material.forEach((m) => m.dispose());
+          } else {
+            child.material.dispose();
           }
-          baseBus.emit(qualified, payload, source);
-          return;
         }
-        baseBus.emit(type, payload, source);
-      }
+      });
+    });
+    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
     };
-  }, [baseBus, scope]);
-}
-function useEmitEvent() {
-  const eventBus = useEventBus();
-  return React7.useCallback(
-    (type, payload, source) => {
-      eventBus.emit(type, payload, source);
-    },
-    [eventBus]
-  );
-}
+  }
+};
+var assetLoader = new AssetLoader();
 
-// 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 = React7.useRef(options);
-  optionsRef.current = options;
-  const handleTileClick = React7.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]
+// lib/drawable/three/hooks/useThree.ts
+var DEFAULT_OPTIONS = {
+  cameraMode: "isometric",
+  cameraPosition: [10, 10, 10],
+  backgroundColor: "#1a1a2e",
+  shadows: true,
+  showGrid: true,
+  gridSize: 20,
+  assetLoader: new AssetLoader()
+};
+function useThree4(options = {}) {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+  const containerRef = React6.useRef(null);
+  const canvasRef = React6.useRef(null);
+  const rendererRef = React6.useRef(null);
+  const sceneRef = React6.useRef(null);
+  const cameraRef = React6.useRef(null);
+  const controlsRef = React6.useRef(null);
+  const gridHelperRef = React6.useRef(null);
+  const rafRef = React6.useRef(0);
+  const [isReady, setIsReady] = React6.useState(false);
+  const [dimensions, setDimensions] = React6.useState({ width: 0, height: 0 });
+  const initialCameraPosition = React6.useMemo(
+    () => new THREE9__namespace.Vector3(...opts.cameraPosition),
+    []
   );
-  const handleUnitClick = React7.useCallback(
-    (unit, event) => {
-      if (unitClickEvent) {
-        emit(unitClickEvent, {
-          unitId: unit.id,
-          x: unit.x,
-          z: unit.z ?? unit.y ?? 0,
-          unitType: unit.unitType,
-          name: unit.name,
-          team: unit.team,
-          faction: unit.faction,
-          health: unit.health,
-          maxHealth: unit.maxHealth
-        });
-      }
-      optionsRef.current.onUnitClick?.(unit, event);
-    },
-    [unitClickEvent, emit]
-  );
-  const handleFeatureClick = React7.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
-        });
+  React6.useEffect(() => {
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+    const { clientWidth, clientHeight } = container;
+    const scene = new THREE9__namespace.Scene();
+    scene.background = new THREE9__namespace.Color(opts.backgroundColor);
+    sceneRef.current = scene;
+    let camera;
+    const aspect = clientWidth / clientHeight;
+    if (opts.cameraMode === "isometric") {
+      const size = 10;
+      camera = new THREE9__namespace.OrthographicCamera(
+        -size * aspect,
+        size * aspect,
+        size,
+        -size,
+        0.1,
+        1e3
+      );
+    } else {
+      camera = new THREE9__namespace.PerspectiveCamera(45, aspect, 0.1, 1e3);
+    }
+    camera.position.copy(initialCameraPosition);
+    cameraRef.current = camera;
+    const renderer = new THREE9__namespace.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 = THREE9__namespace.PCFSoftShadowMap;
+    rendererRef.current = renderer;
+    const controls = new OrbitControls_js.OrbitControls(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__namespace.AmbientLight(16777215, 0.6);
+    scene.add(ambientLight);
+    const directionalLight = new THREE9__namespace.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__namespace.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__namespace.PerspectiveCamera) {
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+      } else if (camera instanceof THREE9__namespace.OrthographicCamera) {
+        const aspect2 = width / height;
+        const size = 10;
+        camera.left = -size * aspect2;
+        camera.right = size * aspect2;
+        camera.top = size;
+        camera.bottom = -size;
+        camera.updateProjectionMatrix();
       }
-      optionsRef.current.onFeatureClick?.(feature, event);
+      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();
+    };
+  }, []);
+  React6.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__namespace.OrthographicCamera(
+        -size * aspect,
+        size * aspect,
+        size,
+        -size,
+        0.1,
+        1e3
+      );
+    } else {
+      newCamera = new THREE9__namespace.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 = React6.useCallback((x, y, z) => {
+    if (cameraRef.current) {
+      cameraRef.current.position.set(x, y, z);
+      controlsRef.current?.update();
+    }
+  }, []);
+  const lookAt = React6.useCallback((x, y, z) => {
+    if (cameraRef.current) {
+      cameraRef.current.lookAt(x, y, z);
+      controlsRef.current?.target.set(x, y, z);
+      controlsRef.current?.update();
+    }
+  }, []);
+  const resetCamera = React6.useCallback(() => {
+    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 = React6.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);
     },
-    [featureClickEvent, emit]
+    [lookAt]
   );
-  const handleCanvasClick = React7.useCallback(
-    (event) => {
-      if (canvasClickEvent) {
-        emit(canvasClickEvent, {
-          clientX: event.clientX,
-          clientY: event.clientY,
-          button: event.button
-        });
+  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 = React6.useRef(customLoader || new AssetLoader());
+  const [state, setState] = React6.useState({
+    isLoading: false,
+    progress: 0,
+    loaded: 0,
+    total: 0,
+    errors: []
+  });
+  React6.useEffect(() => {
+    if (preloadUrls.length > 0) {
+      preload(preloadUrls);
+    }
+  }, []);
+  const updateProgress = React6.useCallback((loaded, total) => {
+    setState((prev) => ({
+      ...prev,
+      loaded,
+      total,
+      progress: total > 0 ? Math.round(loaded / total * 100) : 0
+    }));
+  }, []);
+  const loadModel = React6.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;
       }
-      optionsRef.current.onCanvasClick?.(event);
     },
-    [canvasClickEvent, emit]
+    []
   );
-  const handleTileHover = React7.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, {});
-        }
+  const loadOBJ = React6.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;
       }
-      optionsRef.current.onTileHover?.(tile, event);
     },
-    [tileHoverEvent, tileLeaveEvent, emit]
+    []
   );
-  const handleUnitAnimation = React7.useCallback(
-    (unitId, state) => {
-      if (unitAnimationEvent) {
-        emit(unitAnimationEvent, {
-          unitId,
-          state,
-          timestamp: Date.now()
-        });
+  const loadTexture = React6.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;
       }
-      optionsRef.current.onUnitAnimation?.(unitId, state);
     },
-    [unitAnimationEvent, emit]
+    []
   );
-  const handleCameraChange = React7.useCallback(
-    (position) => {
-      if (cameraChangeEvent) {
-        emit(cameraChangeEvent, {
-          position,
-          timestamp: Date.now()
-        });
-      }
+  const preload = React6.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
+      }));
     },
-    [cameraChangeEvent, emit]
+    [updateProgress]
   );
+  const hasModel = React6.useCallback((url) => {
+    return loaderRef.current.hasModel(url);
+  }, []);
+  const hasTexture = React6.useCallback((url) => {
+    return loaderRef.current.hasTexture(url);
+  }, []);
+  const getModel = React6.useCallback((url) => {
+    try {
+      return loaderRef.current.getModel(url);
+    } catch {
+      return void 0;
+    }
+  }, []);
+  const getTexture = React6.useCallback((url) => {
+    try {
+      return loaderRef.current.getTexture(url);
+    } catch {
+      return void 0;
+    }
+  }, []);
+  const clearCache = React6.useCallback(() => {
+    loaderRef.current.clearCache();
+    setState({
+      isLoading: false,
+      progress: 0,
+      loaded: 0,
+      total: 0,
+      errors: []
+    });
+  }, []);
   return {
-    handleTileClick,
-    handleUnitClick,
-    handleFeatureClick,
-    handleCanvasClick,
-    handleTileHover,
-    handleUnitAnimation,
-    handleCameraChange
+    ...state,
+    loadModel,
+    loadOBJ,
+    loadTexture,
+    preload,
+    hasModel,
+    hasTexture,
+    getModel,
+    getTexture,
+    clearCache
   };
 }
-
-// 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;
+function useSceneGraph() {
+  const nodesRef = React6.useRef(/* @__PURE__ */ new Map());
+  const addNode = React6.useCallback((node) => {
+    const existing = nodesRef.current.get(node.id);
+    if (existing) {
+      existing.mesh.removeFromParent();
     }
-  }
-  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 CameraController3D({
-  onCameraChange
-}) {
-  const { camera } = fiber.useThree();
-  React7.useEffect(() => {
-    if (onCameraChange) {
-      onCameraChange({
-        x: camera.position.x,
-        y: camera.position.y,
-        z: camera.position.z
-      });
+    nodesRef.current.set(node.id, node);
+  }, []);
+  const removeNode = React6.useCallback((id) => {
+    const node = nodesRef.current.get(id);
+    if (node) {
+      node.mesh.removeFromParent();
+      nodesRef.current.delete(id);
     }
-  }, [camera.position, onCameraChange]);
-  return null;
-}
-function FollowCamera3D({
-  target,
-  offset
-}) {
-  const { camera } = fiber.useThree();
-  const look = React7.useRef(new THREE6__namespace.Vector3(target[0], target[1], target[2]));
-  const goal = React7.useRef(new THREE6__namespace.Vector3());
-  fiber.useFrame((_, delta) => {
-    const t = Math.min(1, delta * 5);
-    goal.current.set(target[0] + offset[0], target[1] + offset[1], target[2] + offset[2]);
-    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 SpriteBillboard({ node, world }) {
-  const texture = fiber.useLoader(THREE6__namespace.TextureLoader, node.asset.url);
-  const img = texture.image;
-  const imgW = img?.width || 1;
-  const imgH = img?.height || 1;
-  if (node.frame) {
-    texture.repeat.set(node.frame.w / imgW, node.frame.h / imgH);
-    texture.offset.set(node.frame.x / imgW, 1 - (node.frame.y + node.frame.h) / imgH);
-    texture.magFilter = texture.minFilter = THREE6__namespace.NearestFilter;
-    texture.needsUpdate = true;
-  }
-  const aspect = node.frame ? node.frame.w / node.frame.h : imgW / imgH;
-  const height = node.height ?? 1;
-  const width = node.width ?? height * aspect;
-  return /* @__PURE__ */ jsxRuntime.jsx(drei.Billboard, { position: [world[0], world[1] + height / 2, world[2]], children: /* @__PURE__ */ jsxRuntime.jsxs("mesh", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [width, height] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "meshBasicMaterial",
-      {
-        map: texture,
-        transparent: true,
-        alphaTest: 0.1,
-        side: THREE6__namespace.DoubleSide,
-        opacity: node.opacity ?? 1
+  }, []);
+  const getNode = React6.useCallback((id) => {
+    return nodesRef.current.get(id);
+  }, []);
+  const updateNodePosition = React6.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 };
       }
-    )
-  ] }) });
-}
-function Sprite3D({ node, projector }) {
-  if (node.asset.dimension === "3d" && node.asset.url) {
-    return /* @__PURE__ */ jsxRuntime.jsx("group", { position: projector.toWorld(node.position), children: /* @__PURE__ */ jsxRuntime.jsx(
-      ModelLoader,
-      {
-        url: node.asset.url,
-        scale: node.width ?? projector.cellSize,
-        rotation: [0, node.rotation ?? 0, 0],
-        fallbackGeometry: "box",
-        castShadow: true,
-        receiveShadow: true
+    },
+    []
+  );
+  const updateNodeGridPosition = React6.useCallback(
+    (id, gridX, gridZ) => {
+      const node = nodesRef.current.get(id);
+      if (node) {
+        node.gridPosition = { x: gridX, z: gridZ };
       }
-    ) });
-  }
-  if (!node.asset.url) return null;
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("planeGeometry", { args: [w, h] });
-      break;
-    }
-    case "ellipse": {
-      const radiusX = node.radiusX ?? 0.4;
-      geometry = node.stroke && !node.fill ? /* @__PURE__ */ jsxRuntime.jsx("ringGeometry", { args: [Math.max(0, radiusX - 0.08), radiusX, 32] }) : /* @__PURE__ */ jsxRuntime.jsx("circleGeometry", { args: [radiusX, 32] });
-      break;
-    }
-    case "poly": {
-      if (!node.points || node.points.length === 0) return null;
-      const s = new THREE6__namespace.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__ */ jsxRuntime.jsx("shapeGeometry", { args: [s] });
-      break;
-    }
-    default:
-      return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [world[0], world[1] + 0.02, world[2]], children: [
-    geometry,
-    /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color, transparent: true, opacity: node.opacity ?? 1, side: THREE6__namespace.DoubleSide })
-  ] });
-}
-function Text3D({ node, projector }) {
-  const world = projector.toWorld(node.position);
-  return /* @__PURE__ */ jsxRuntime.jsx(drei.Billboard, { position: [world[0], world[1] + 1.2, world[2]], children: /* @__PURE__ */ jsxRuntime.jsx(
-    drei.Text,
-    {
-      fontSize: 0.32,
-      color: node.color,
-      anchorX: "center",
-      anchorY: "middle",
-      outlineWidth: 0.02,
-      outlineColor: "#000000",
-      children: node.text
+    },
+    []
+  );
+  const getNodeAtGrid = React6.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 = React6.useCallback((type) => {
+    return Array.from(nodesRef.current.values()).filter((node) => node.type === type);
+  }, []);
+  const getNodesInBounds = React6.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 = React6.useCallback(() => {
+    nodesRef.current.forEach((node) => {
+      node.mesh.removeFromParent();
+    });
+    nodesRef.current.clear();
+  }, []);
+  const countNodes = React6.useCallback((type) => {
+    if (!type) {
+      return nodesRef.current.size;
     }
-  ) });
-}
-function Drawable3D({ node, projector }) {
-  switch (node.type) {
-    case "draw-sprite":
-      return /* @__PURE__ */ jsxRuntime.jsx(Sprite3D, { node, projector });
-    case "draw-shape":
-      return /* @__PURE__ */ jsxRuntime.jsx(Shape3D, { node, projector });
-    case "draw-text":
-      return /* @__PURE__ */ jsxRuntime.jsx(Text3D, { node, projector });
-    case "draw-sprite-layer":
-      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(Sprite3D, { node: item, projector }, i)) });
-    case "draw-shape-layer":
-      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(Shape3D, { node: item, projector }, i)) });
-    case "draw-text-layer":
-      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(Text3D, { node: item, projector }, i)) });
-  }
-}
-
-// lib/drawable/projector3d.ts
-function create3DProjector(opts = {}) {
-  const cellSize = opts.cellSize ?? 1;
-  const offsetX = opts.offsetX ?? 0;
-  const offsetZ = opts.offsetZ ?? 0;
+    return Array.from(nodesRef.current.values()).filter((node) => node.type === type).length;
+  }, []);
   return {
-    cellSize,
-    toWorld: (pos) => [pos.x * cellSize + offsetX, pos.z ?? 0, pos.y * cellSize + offsetZ]
+    nodesRef,
+    addNode,
+    removeNode,
+    getNode,
+    updateNodePosition,
+    updateNodeGridPosition,
+    getNodeAtGrid,
+    getNodesByType,
+    getNodesInBounds,
+    clearNodes,
+    countNodes
   };
 }
-
-// components/game/three/game3dTheme.ts
-var GRID_COLORS_3D = {
-  cell: "#444444",
-  section: "#666666"
-};
-var DEFAULT_BACKGROUND_3D = "#1a1a2e";
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var DEFAULT_GRID_CONFIG = {
-  cellSize: 1,
-  offsetX: 0,
-  offsetZ: 0
-};
-var GameCanvas3D = React7.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 = React7.useRef(null);
-    const controlsRef = React7.useRef(null);
-    const [internalError, setInternalError] = React7.useState(null);
-    const eventBus = useEventBus();
-    const keysRef = React7.useRef(/* @__PURE__ */ new Set());
-    React7.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 = React7.useMemo(() => collectDrawnItems(drawables ?? []), [drawables]);
-    const scenePositions = React7.useMemo(() => drawnItems.map((i) => i.pos), [drawnItems]);
-    const hitIndex = React7.useMemo(() => buildHitIndex(drawnItems), [drawnItems]);
-    const gridBounds = React7.useMemo(() => {
-      if (scenePositions.length === 0) {
-        return { minX: 0, maxX: 10, minZ: 0, maxZ: 10 };
-      }
-      let minX = Infinity;
-      let maxX = -Infinity;
-      let minZ = Infinity;
-      let maxZ = -Infinity;
-      for (const p of scenePositions) {
-        if (p.x < minX) minX = p.x;
-        if (p.x > maxX) maxX = p.x;
-        if (p.y < minZ) minZ = p.y;
-        if (p.y > maxZ) maxZ = p.y;
-      }
-      return { minX, maxX, minZ, maxZ };
-    }, [scenePositions]);
-    const cameraTarget = React7.useMemo(
-      () => [
-        (gridBounds.minX + gridBounds.maxX) / 2,
-        0,
-        (gridBounds.minZ + gridBounds.maxZ) / 2
-      ],
-      [gridBounds]
-    );
-    const gridConfig = React7.useMemo(
-      () => ({
-        ...DEFAULT_GRID_CONFIG,
-        offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
-        offsetZ: -(gridBounds.maxZ - gridBounds.minZ) / 2
-      }),
-      [gridBounds]
-    );
-    const drawableProjector = React7.useMemo(
-      () => create3DProjector({
-        cellSize: gridConfig.cellSize,
-        offsetX: -gridBounds.minX * gridConfig.cellSize,
-        offsetZ: -gridBounds.minZ * gridConfig.cellSize
-      }),
-      [gridBounds, gridConfig]
-    );
-    React7.useImperativeHandle(ref, () => ({
-      getCameraPosition: () => {
-        if (controlsRef.current) {
-          const pos = controlsRef.current.object.position;
-          return new THREE6__namespace.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 = React7.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
-      );
-      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 };
+function useRaycaster(options) {
+  const { camera, canvas, cellSize = 1, offsetX = 0, offsetZ = 0 } = options;
+  const raycaster = React6.useRef(new THREE9__namespace.Raycaster());
+  const mouse = React6.useRef(new THREE9__namespace.Vector2());
+  const clientToNDC = React6.useCallback(
+    (clientX, clientY) => {
+      if (!canvas) {
+        return { x: 0, y: 0 };
       }
-    }, [cameraMode, gridBounds]);
-    const followWorld = React7.useMemo(() => {
-      if (followTarget) return drawableProjector.toWorld(followTarget);
-      return cameraTarget;
-    }, [followTarget, drawableProjector, cameraTarget]);
-    const followOffset = React7.useMemo(
-      () => cameraMode === "chase" ? [0, 4, -7] : [5, 7, 5],
-      [cameraMode]
-    );
-    const handleGroundClick = React7.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)
+      const rect = canvas.getBoundingClientRect();
+      return {
+        x: (clientX - rect.left) / rect.width * 2 - 1,
+        y: -((clientY - rect.top) / rect.height) * 2 + 1
       };
-      const hitId = hitIndex.get(`${cell.x},${cell.y}`);
-      if (hitId !== void 0 && unitClickEvent) {
-        eventBus.emit(`UI:${unitClickEvent}`, { unitId: hitId, x: cell.x, z: cell.y });
-      } else if (tileClickEvent) {
-        eventBus.emit(`UI:${tileClickEvent}`, { x: cell.x, z: cell.y });
-      }
-    }, [tileClickEvent, unitClickEvent, gridConfig, gridBounds, hitIndex, eventBus]);
-    if (externalLoading) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Canvas3DLoadingState,
-        {
-          progress: 1,
-          loaded: 1,
-          total: 1,
-          message: loadingMessage,
-          className
-        }
-      );
-    }
-    const displayError = externalError || internalError;
-    if (displayError) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Canvas3DErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "game-canvas-3d game-canvas-3d--error", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "game-canvas-3d__error", children: [
-        "Error: ",
-        displayError
-      ] }) }) });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Canvas3DErrorBoundary,
-      {
-        onError: (err) => setInternalError(err.message),
-        onReset: () => setInternalError(null),
-        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-              fiber.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__ */ jsxRuntime.jsx(CameraController3D, { onCameraChange: eventHandlers.handleCameraChange }),
-                  (cameraMode === "follow" || cameraMode === "chase") && /* @__PURE__ */ jsxRuntime.jsx(FollowCamera3D, { target: followWorld, offset: followOffset }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Lighting3D,
-                    {
-                      shadows,
-                      shadowBias: -4e-4,
-                      shadowNormalBias: 0.04,
-                      shadowCameraSize: 5,
-                      shadowCameraNear: 0.5,
-                      shadowCameraFar: 500
-                    }
-                  ),
-                  showGrid && /* @__PURE__ */ jsxRuntime.jsx(
-                    drei.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__ */ jsxRuntime.jsx("group", { children: drawables.map((node, i) => /* @__PURE__ */ jsxRuntime.jsx(Drawable3D, { node, projector: drawableProjector }, i)) }),
-                  (tileClickEvent || unitClickEvent) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                          "planeGeometry",
-                          {
-                            args: [
-                              (gridBounds.maxX - gridBounds.minX + 4) * gridConfig.cellSize,
-                              (gridBounds.maxZ - gridBounds.minZ + 4) * gridConfig.cellSize
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { transparent: true, opacity: 0, depthWrite: false })
-                      ]
-                    }
-                  ),
-                  children,
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    drei.OrbitControls,
-                    {
-                      ref: controlsRef,
-                      enabled: cameraMode !== "follow" && cameraMode !== "chase",
-                      target: cameraTarget,
-                      enableDamping: true,
-                      dampingFactor: 0.05,
-                      enableZoom: true,
-                      enablePan: true,
-                      touches: { ONE: THREE6__namespace.TOUCH.ROTATE, TWO: THREE6__namespace.TOUCH.DOLLY_PAN },
-                      minDistance: 2,
-                      maxDistance: 100,
-                      maxPolarAngle: Math.PI / 2 - 0.1
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        )
+    },
+    [canvas]
+  );
+  const isWithinCanvas = React6.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 = React6.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 = React6.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 = React6.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__namespace.Plane(new THREE9__namespace.Vector3(0, 1, 0), 0);
+      const target = new THREE9__namespace.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 = React6.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__namespace.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,
@@ -2111,7 +2109,7 @@ var DEFAULT_CONFIG = {
 };
 function gridToWorld(gridX, gridZ, config = DEFAULT_CONFIG) {
   const opts = { ...DEFAULT_CONFIG, ...config };
-  return new THREE6__namespace.Vector3(
+  return new THREE9__namespace.Vector3(
     gridX * opts.cellSize + opts.offsetX,
     opts.elevation,
     gridZ * opts.cellSize + opts.offsetZ
@@ -2125,17 +2123,17 @@ function worldToGrid(worldX, worldZ, config = DEFAULT_CONFIG) {
   };
 }
 function raycastToPlane(camera, mouseX, mouseY, planeY = 0) {
-  const raycaster = new THREE6__namespace.Raycaster();
-  const mouse = new THREE6__namespace.Vector2(mouseX, mouseY);
+  const raycaster = new THREE9__namespace.Raycaster();
+  const mouse = new THREE9__namespace.Vector2(mouseX, mouseY);
   raycaster.setFromCamera(mouse, camera);
-  const plane = new THREE6__namespace.Plane(new THREE6__namespace.Vector3(0, 1, 0), -planeY);
-  const target = new THREE6__namespace.Vector3();
+  const plane = new THREE9__namespace.Plane(new THREE9__namespace.Vector3(0, 1, 0), -planeY);
+  const target = new THREE9__namespace.Vector3();
   const intersection = raycaster.ray.intersectPlane(plane, target);
   return intersection ? target : null;
 }
 function raycastToObjects(camera, mouseX, mouseY, objects) {
-  const raycaster = new THREE6__namespace.Raycaster();
-  const mouse = new THREE6__namespace.Vector2(mouseX, mouseY);
+  const raycaster = new THREE9__namespace.Raycaster();
+  const mouse = new THREE9__namespace.Vector2(mouseX, mouseY);
   raycaster.setFromCamera(mouse, camera);
   const intersects = raycaster.intersectObjects(objects, true);
   return intersects.length > 0 ? intersects[0] : null;
@@ -2163,69 +2161,250 @@ 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__namespace.PlaneGeometry(0.95, 0.95);
+  const material = new THREE9__namespace.MeshBasicMaterial({
+    color,
+    transparent: true,
+    opacity,
+    side: THREE9__namespace.DoubleSide
+  });
+  const mesh = new THREE9__namespace.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__namespace.Frustum();
+  const projScreenMatrix = new THREE9__namespace.Matrix4();
+  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+  frustum.setFromProjectionMatrix(projScreenMatrix);
+  const sphere = new THREE9__namespace.Sphere(position, padding);
+  return frustum.intersectsSphere(sphere);
+}
+function filterByFrustum(positions, camera, padding = 0) {
+  const frustum = new THREE9__namespace.Frustum();
+  const projScreenMatrix = new THREE9__namespace.Matrix4();
+  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+  frustum.setFromProjectionMatrix(projScreenMatrix);
+  return positions.filter((position) => {
+    const sphere = new THREE9__namespace.Sphere(position, padding);
+    return frustum.intersectsSphere(sphere);
+  });
+}
+function getVisibleIndices(positions, camera, padding = 0) {
+  const frustum = new THREE9__namespace.Frustum();
+  const projScreenMatrix = new THREE9__namespace.Matrix4();
+  const visible = /* @__PURE__ */ new Set();
+  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+  frustum.setFromProjectionMatrix(projScreenMatrix);
+  positions.forEach((position, index) => {
+    const sphere = new THREE9__namespace.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__namespace.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__namespace.PlaneGeometry(0.95, 0.95);
-  const material = new THREE6__namespace.MeshBasicMaterial({
-    color,
-    transparent: true,
-    opacity,
-    side: THREE6__namespace.DoubleSide
-  });
-  const mesh = new THREE6__namespace.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] = React7.useState(false);
-  const onRevealRef = React7.useRef(onReveal);
-  const onDismissRef = React7.useRef(onDismiss);
+  const [revealed, setRevealed] = React6.useState(false);
+  const onRevealRef = React6.useRef(onReveal);
+  const onDismissRef = React6.useRef(onDismiss);
   onRevealRef.current = onReveal;
   onDismissRef.current = onDismiss;
-  const reveal = React7.useCallback(() => {
+  const reveal = React6.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (!wasRevealed) onRevealRef.current?.();
       return true;
     });
   }, []);
-  const dismiss = React7.useCallback(() => {
+  const dismiss = React6.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (wasRevealed) onDismissRef.current?.();
       return false;
     });
   }, []);
-  const onPointerDown = React7.useCallback(
+  const onPointerDown = React6.useCallback(
     (e) => {
       if (!enabled || e.pointerType === "mouse") return;
       if (revealed) dismiss();
@@ -2233,7 +2412,7 @@ function useTapReveal(options = {}) {
     },
     [enabled, revealed, reveal, dismiss]
   );
-  React7.useEffect(() => {
+  React6.useEffect(() => {
     if (!revealed || typeof document === "undefined") return;
     const onDocDown = (ev) => {
       const target = ev.target;
@@ -2353,7 +2532,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React7__default.default.forwardRef(
+var Box = React6__default.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -2385,20 +2564,20 @@ var Box = React7__default.default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
-    const handleClick = React7.useCallback((e) => {
+    const handleClick = React6.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React7.useCallback((e) => {
+    const handleMouseEnter = React6.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React7.useCallback((e) => {
+    const handleMouseLeave = React6.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }
@@ -2406,19 +2585,19 @@ var Box = React7__default.default.forwardRef(
     }, [hoverEvent, eventBus, onMouseLeave]);
     const { triggerProps } = useTapReveal({
       enabled: tapReveal && !!hoverEvent,
-      onReveal: React7.useCallback(() => {
+      onReveal: React6.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }, [hoverEvent, eventBus]),
-      onDismiss: React7.useCallback(() => {
+      onDismiss: React6.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }, [hoverEvent, eventBus])
     });
-    const handlePointerDown = React7.useCallback((e) => {
+    const handlePointerDown = React6.useCallback((e) => {
       if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
     const isClickable = action || onClick;
-    return React7__default.default.createElement(
+    return React6__default.default.createElement(
       Component2,
       {
         ref,
@@ -2539,7 +2718,7 @@ var Typography = ({
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component2 = as || defaultElements[variant];
-  return React7__default.default.createElement(
+  return React6__default.default.createElement(
     Component2,
     {
       id,
@@ -2612,7 +2791,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__default.default.createElement(
+  return React6__default.default.createElement(
     Component2,
     {
       className: cn(
@@ -3183,25 +3362,25 @@ function orbitRingPositions(count, radius, tilt) {
   return positions;
 }
 function arcCurve3D(from, to, offset) {
-  const start = new THREE6.Vector3(...from);
-  const end = new THREE6.Vector3(...to);
-  const mid = new THREE6.Vector3().addVectors(start, end).multiplyScalar(0.5);
-  const dir = new THREE6.Vector3().subVectors(end, start).normalize();
-  const up = new THREE6.Vector3(0, 1, 0);
-  const perp = new THREE6.Vector3().crossVectors(dir, up).normalize();
+  const start = new THREE9.Vector3(...from);
+  const end = new THREE9.Vector3(...to);
+  const mid = new THREE9.Vector3().addVectors(start, end).multiplyScalar(0.5);
+  const dir = new THREE9.Vector3().subVectors(end, start).normalize();
+  const up = new THREE9.Vector3(0, 1, 0);
+  const perp = new THREE9.Vector3().crossVectors(dir, up).normalize();
   if (perp.length() < 1e-3) {
-    perp.crossVectors(dir, new THREE6.Vector3(1, 0, 0)).normalize();
+    perp.crossVectors(dir, new THREE9.Vector3(1, 0, 0)).normalize();
   }
   const control = mid.clone().add(perp.multiplyScalar(offset));
   control.y += Math.abs(offset) * 0.3;
-  return new THREE6.QuadraticBezierCurve3(start, control, end);
+  return new THREE9.QuadraticBezierCurve3(start, control, end);
 }
 function selfLoopCurve3D(position, loopRadius) {
-  const base = new THREE6.Vector3(...position);
-  const start = base.clone().add(new THREE6.Vector3(-loopRadius * 0.3, 0, 0));
-  const end = base.clone().add(new THREE6.Vector3(loopRadius * 0.3, 0, 0));
-  const control = base.clone().add(new THREE6.Vector3(0, loopRadius, 0));
-  return new THREE6.QuadraticBezierCurve3(start, control, end);
+  const base = new THREE9.Vector3(...position);
+  const start = base.clone().add(new THREE9.Vector3(-loopRadius * 0.3, 0, 0));
+  const end = base.clone().add(new THREE9.Vector3(loopRadius * 0.3, 0, 0));
+  const control = base.clone().add(new THREE9.Vector3(0, loopRadius, 0));
+  return new THREE9.QuadraticBezierCurve3(start, control, end);
 }
 function treeLayout3D(node, origin, horizontalSpacing, verticalSpacing = 2) {
   const results = [];
@@ -3359,16 +3538,16 @@ var Avl3DOrbitalNode = ({
   position,
   onClick
 }) => {
-  const groupRef = React7.useRef(null);
-  const [hovered, setHovered] = React7.useState(false);
-  const scale = React7.useMemo(() => 0.6 + Math.min(traitCount, 8) * 0.3, [traitCount]);
-  const currentScale = React7.useRef(scale);
+  const groupRef = React6.useRef(null);
+  const [hovered, setHovered] = React6.useState(false);
+  const scale = React6.useMemo(() => 0.6 + Math.min(traitCount, 8) * 0.3, [traitCount]);
+  const currentScale = React6.useRef(scale);
   const targetScale = hovered ? scale * 1.06 : scale;
   fiber.useFrame((_, delta) => {
     if (!groupRef.current) return;
     groupRef.current.rotation.y += delta * (hovered ? 0.4 : 0.2);
     groupRef.current.rotation.x += delta * 0.05;
-    currentScale.current = THREE6.MathUtils.damp(currentScale.current, targetScale, 6, delta);
+    currentScale.current = THREE9.MathUtils.damp(currentScale.current, targetScale, 6, delta);
   });
   const baseBrightness = 0.3 + Math.min(pageCount, 5) * 0.05;
   const emissiveIntensity = hovered ? 0.8 : baseBrightness;
@@ -3504,7 +3683,7 @@ var Avl3DCrossWire = ({
   eventName,
   color = AVL_3D_COLORS.crossWire
 }) => {
-  const { tubeArgs, midpoint } = React7.useMemo(() => {
+  const { tubeArgs, midpoint } = React6.useMemo(() => {
     const curve = arcCurve3D(from, to, 2);
     const mid = curve.getPoint(0.5);
     return {
@@ -3543,9 +3722,9 @@ var Avl3DApplicationScene = ({
   data,
   onOrbitalClick
 }) => {
-  const groupRef = React7.useRef(null);
-  const [, setHoverTrigger] = React7.useState(0);
-  const orbitalPositions = React7.useMemo(() => {
+  const groupRef = React6.useRef(null);
+  const [, setHoverTrigger] = React6.useState(0);
+  const orbitalPositions = React6.useMemo(() => {
     const baseRadius = Math.max(4, data.orbitals.length * 1.5);
     if (data.crossLinks.length === 0) {
       return goldenSpiralPositions(data.orbitals.length, baseRadius);
@@ -3558,7 +3737,7 @@ var Avl3DApplicationScene = ({
     })).filter((e) => e.from >= 0 && e.to >= 0);
     return forceDirectedPositions(data.orbitals.length, edges, baseRadius);
   }, [data.orbitals, data.crossLinks]);
-  const positionByName = React7.useMemo(() => {
+  const positionByName = React6.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     data.orbitals.forEach((orb, i) => {
       const pos = orbitalPositions[i];
@@ -3641,7 +3820,7 @@ var Avl3DEntityCore = ({
   position,
   fields
 }) => {
-  const coreRef = React7.useRef(null);
+  const coreRef = React6.useRef(null);
   fiber.useFrame((_, delta) => {
     if (!coreRef.current) return;
     coreRef.current.rotation.y += delta * 0.3;
@@ -3794,8 +3973,8 @@ function TraitOrbit({
   onClick,
   onHover
 }) {
-  const groupRef = React7.useRef(null);
-  const angleRef = React7.useRef(Math.random() * Math.PI * 2);
+  const groupRef = React6.useRef(null);
+  const angleRef = React6.useRef(Math.random() * Math.PI * 2);
   fiber.useFrame((_, delta) => {
     angleRef.current += delta * speed;
     if (!groupRef.current) return;
@@ -3926,9 +4105,9 @@ var Avl3DOrbitalScene = ({
   highlightedTrait,
   onTraitHighlight
 }) => {
-  const [localHighlight, setLocalHighlight] = React7.useState(null);
+  const [localHighlight, setLocalHighlight] = React6.useState(null);
   const activeHighlight = highlightedTrait ?? localHighlight;
-  const traitOrbits = React7.useMemo(() => {
+  const traitOrbits = React6.useMemo(() => {
     return data.traits.map((trait, i) => ({
       name: trait.name,
       radius: 3 + i * 1.2,
@@ -3939,7 +4118,7 @@ var Avl3DOrbitalScene = ({
       transitionCount: trait.transitionCount
     }));
   }, [data.traits]);
-  const pagePositions = React7.useMemo(() => {
+  const pagePositions = React6.useMemo(() => {
     const outerRadius = 3 + data.traits.length * 1.2 + 1.5;
     return data.pages.map((_, i) => {
       const angle = 2 * Math.PI * i / data.pages.length - Math.PI / 2;
@@ -4003,14 +4182,14 @@ var Avl3DStateNode = ({
   outgoingCount = 0,
   onClick
 }) => {
-  const [hovered, setHovered] = React7.useState(false);
+  const [hovered, setHovered] = React6.useState(false);
   const baseColor = active ? AVL_3D_COLORS.stateActive : AVL_3D_COLORS.stateIdle;
   const emissiveColor = active ? AVL_3D_COLORS.stateActive : AVL_3D_COLORS.stateEdge;
   const emissiveIntensity = active ? 2 : hovered ? 0.8 : 0.3;
   const targetScale = hovered ? 1.08 : 1;
-  const currentScale = React7.useRef(1);
+  const currentScale = React6.useRef(1);
   fiber.useFrame((_, delta) => {
-    currentScale.current = THREE6.MathUtils.damp(currentScale.current, targetScale, 6, delta);
+    currentScale.current = THREE9.MathUtils.damp(currentScale.current, targetScale, 6, delta);
   });
   const scale = currentScale.current;
   return /* @__PURE__ */ jsxRuntime.jsxs("group", { position, children: [
@@ -4182,17 +4361,17 @@ var Avl3DTransitionArc = ({
   onClick,
   color = AVL_3D_COLORS.transitionArc
 }) => {
-  const [hovered, setHovered] = React7.useState(false);
-  const { tubeArgs, labelPos, guardPos, arrowPos, arrowQuat, effectPositions } = React7.useMemo(() => {
+  const [hovered, setHovered] = React6.useState(false);
+  const { tubeArgs, labelPos, guardPos, arrowPos, arrowQuat, effectPositions } = React6.useMemo(() => {
     const offset = 1.5 + index * 0.8;
     const curve = isSelf ? selfLoopCurve3D(from, 1.2) : arcCurve3D(from, to, offset);
     const mid = curve.getPoint(0.5);
     const guardPt = curve.getPoint(0.3);
     const arrowPt = curve.getPoint(0.9);
     const arrowTangent = curve.getTangent(0.9);
-    const upVec = new THREE6.Vector3(0, 1, 0);
-    const tangentVec = new THREE6.Vector3(arrowTangent.x, arrowTangent.y, arrowTangent.z).normalize();
-    const quat = new THREE6.Quaternion().setFromUnitVectors(upVec, tangentVec);
+    const upVec = new THREE9.Vector3(0, 1, 0);
+    const tangentVec = new THREE9.Vector3(arrowTangent.x, arrowTangent.y, arrowTangent.z).normalize();
+    const quat = new THREE9.Quaternion().setFromUnitVectors(upVec, tangentVec);
     const effectPositions2 = [];
     for (let ei = 0; ei < 4; ei++) {
       const t = 0.7 + ei * 0.05;
@@ -4316,7 +4495,7 @@ var Avl3DTraitScene = ({
   data,
   onTransitionClick
 }) => {
-  const statePositions = React7.useMemo(() => {
+  const statePositions = React6.useMemo(() => {
     const radius = Math.max(3, data.states.length * 0.8);
     const positions = fibonacciSpherePositions(data.states.length, radius);
     const posMap = /* @__PURE__ */ new Map();
@@ -4326,7 +4505,7 @@ var Avl3DTraitScene = ({
     });
     return posMap;
   }, [data.states]);
-  const transitionIndices = React7.useMemo(() => {
+  const transitionIndices = React6.useMemo(() => {
     const pairCount = /* @__PURE__ */ new Map();
     return data.transitions.map((t) => {
       const key = `${t.from}->${t.to}`;
@@ -4335,7 +4514,7 @@ var Avl3DTraitScene = ({
       return idx;
     });
   }, [data.transitions]);
-  const transitionCounts = React7.useMemo(() => {
+  const transitionCounts = React6.useMemo(() => {
     const incoming = /* @__PURE__ */ new Map();
     const outgoing = /* @__PURE__ */ new Map();
     for (const t of data.transitions) {
@@ -4416,14 +4595,14 @@ function operatorColor(label) {
   return "#4A90D9";
 }
 function edgeGeometry(parent, child) {
-  const p = new THREE6.Vector3(parent.x, parent.y, parent.z);
-  const c = new THREE6.Vector3(child.x, child.y, child.z);
-  const mid = new THREE6.Vector3().addVectors(p, c).multiplyScalar(0.5);
-  const dir = new THREE6.Vector3().subVectors(c, p);
+  const p = new THREE9.Vector3(parent.x, parent.y, parent.z);
+  const c = new THREE9.Vector3(child.x, child.y, child.z);
+  const mid = new THREE9.Vector3().addVectors(p, c).multiplyScalar(0.5);
+  const dir = new THREE9.Vector3().subVectors(c, p);
   const length = dir.length();
-  const yAxis = new THREE6.Vector3(0, 1, 0);
+  const yAxis = new THREE9.Vector3(0, 1, 0);
   const angle = yAxis.angleTo(dir.normalize());
-  const axis = new THREE6.Vector3().crossVectors(yAxis, dir).normalize();
+  const axis = new THREE9.Vector3().crossVectors(yAxis, dir).normalize();
   if (axis.length() < 1e-3) {
     return {
       position: [mid.x, mid.y, mid.z],
@@ -4445,11 +4624,11 @@ var Avl3DExprTree = ({
   expression,
   position
 }) => {
-  const layoutResults = React7.useMemo(() => {
+  const layoutResults = React6.useMemo(() => {
     const origin = { x: position[0], y: position[1], z: position[2] };
     return treeLayout3D(expression, origin, 2.5, 1.5);
   }, [expression, position]);
-  const edges = React7.useMemo(() => {
+  const edges = React6.useMemo(() => {
     const result = [];
     function collectEdges(node, parentPos) {
       const entry = layoutResults.find((r) => r.node === node);
@@ -4729,7 +4908,7 @@ var Avl3DEffects = ({
   const dof = DOF_CONFIG[level];
   const sparkles = SPARKLE_CONFIGS[level];
   const stars = STARS_CONFIG[level];
-  const starsKey = React7.useMemo(() => `stars-${level}`, [level]);
+  const starsKey = React6.useMemo(() => `stars-${level}`, [level]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       drei.Stars,
@@ -4793,18 +4972,18 @@ var DEFAULT_CONFIG2 = {
   modelOverrides: {},
   effectsEnabled: true
 };
-var Avl3DContext = React7.createContext(DEFAULT_CONFIG2);
+var Avl3DContext = React6.createContext(DEFAULT_CONFIG2);
 function useAvl3DConfig() {
-  return React7.useContext(Avl3DContext);
+  return React6.useContext(Avl3DContext);
 }
 function CameraController({ targetPosition, targetLookAt, animated }) {
   const { camera } = fiber.useThree();
-  const targetPosVec = React7.useRef(new THREE6__namespace.Vector3(...targetPosition));
-  const targetLookVec = React7.useRef(new THREE6__namespace.Vector3(...targetLookAt));
-  const isAnimating = React7.useRef(false);
-  React7.useEffect(() => {
-    const newTarget = new THREE6__namespace.Vector3(...targetPosition);
-    const newLookAt = new THREE6__namespace.Vector3(...targetLookAt);
+  const targetPosVec = React6.useRef(new THREE9__namespace.Vector3(...targetPosition));
+  const targetLookVec = React6.useRef(new THREE9__namespace.Vector3(...targetLookAt));
+  const isAnimating = React6.useRef(false);
+  React6.useEffect(() => {
+    const newTarget = new THREE9__namespace.Vector3(...targetPosition);
+    const newLookAt = new THREE9__namespace.Vector3(...targetLookAt);
     if (!newTarget.equals(targetPosVec.current) || !newLookAt.equals(targetLookVec.current)) {
       targetPosVec.current.copy(newTarget);
       targetLookVec.current.copy(newLookAt);
@@ -4819,9 +4998,9 @@ function CameraController({ targetPosition, targetLookAt, animated }) {
   fiber.useFrame((_, delta) => {
     if (!isAnimating.current) return;
     const speed = 3;
-    camera.position.x = THREE6__namespace.MathUtils.damp(camera.position.x, targetPosVec.current.x, speed, delta);
-    camera.position.y = THREE6__namespace.MathUtils.damp(camera.position.y, targetPosVec.current.y, speed, delta);
-    camera.position.z = THREE6__namespace.MathUtils.damp(camera.position.z, targetPosVec.current.z, speed, delta);
+    camera.position.x = THREE9__namespace.MathUtils.damp(camera.position.x, targetPosVec.current.x, speed, delta);
+    camera.position.y = THREE9__namespace.MathUtils.damp(camera.position.y, targetPosVec.current.y, speed, delta);
+    camera.position.z = THREE9__namespace.MathUtils.damp(camera.position.z, targetPosVec.current.z, speed, delta);
     camera.lookAt(targetLookVec.current);
     const dist = camera.position.distanceTo(targetPosVec.current);
     if (dist < 0.05) {
@@ -4831,12 +5010,12 @@ function CameraController({ targetPosition, targetLookAt, animated }) {
   return null;
 }
 function SceneFade({ animating, children }) {
-  const groupRef = React7.useRef(null);
-  const opacityRef = React7.useRef(1);
+  const groupRef = React6.useRef(null);
+  const opacityRef = React6.useRef(1);
   fiber.useFrame((_, delta) => {
     if (!groupRef.current) return;
     const target = animating ? 0 : 1;
-    opacityRef.current = THREE6__namespace.MathUtils.damp(opacityRef.current, target, 5, delta);
+    opacityRef.current = THREE9__namespace.MathUtils.damp(opacityRef.current, target, 5, delta);
     groupRef.current.visible = opacityRef.current > 0.05;
     const s = 0.9 + opacityRef.current * 0.1;
     groupRef.current.scale.setScalar(s);
@@ -4856,7 +5035,7 @@ var Avl3DViewer = ({
   modelOverrides = {}
 }) => {
   const { t } = hooks.useTranslate();
-  const schema = React7.useMemo(() => {
+  const schema = React6.useMemo(() => {
     if (typeof schemaProp === "string") {
       try {
         return JSON.parse(schemaProp);
@@ -4866,12 +5045,12 @@ var Avl3DViewer = ({
     }
     return schemaProp;
   }, [schemaProp]);
-  const configValue = React7.useMemo(() => ({
+  const configValue = React6.useMemo(() => ({
     modelOverrides,
     effectsEnabled: effects
   }), [modelOverrides, effects]);
-  const [state, dispatch] = React7.useReducer(zoomReducer, initialZoomState);
-  React7.useEffect(() => {
+  const [state, dispatch] = React6.useReducer(zoomReducer, initialZoomState);
+  React6.useEffect(() => {
     if (initialOrbital) {
       dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: initialOrbital, targetPosition: { x: 0, y: 0 } });
       setTimeout(() => dispatch({ type: "ANIMATION_COMPLETE" }), 0);
@@ -4883,35 +5062,35 @@ var Avl3DViewer = ({
       }
     }
   }, [initialOrbital, initialTrait]);
-  React7.useEffect(() => {
+  React6.useEffect(() => {
     onZoomChange?.(state.level, {
       orbital: state.selectedOrbital ?? void 0,
       trait: state.selectedTrait ?? void 0
     });
   }, [state.level, state.selectedOrbital, state.selectedTrait, onZoomChange]);
-  React7.useEffect(() => {
+  React6.useEffect(() => {
     if (!state.animating) return;
     const timer = setTimeout(() => {
       dispatch({ type: "ANIMATION_COMPLETE" });
     }, 800);
     return () => clearTimeout(timer);
   }, [state.animating]);
-  const handleKeyDown = React7.useCallback((e) => {
+  const handleKeyDown = React6.useCallback((e) => {
     if (e.key === "Escape") {
       dispatch({ type: "ZOOM_OUT" });
     }
   }, []);
-  const handleOrbitalClick = React7.useCallback((name) => {
+  const handleOrbitalClick = React6.useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const handleTraitClick = React7.useCallback((name) => {
+  const handleTraitClick = React6.useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const [highlightedTrait, setHighlightedTrait] = React7__default.default.useState(null);
-  const handleTransitionClick = React7.useCallback((index) => {
+  const [highlightedTrait, setHighlightedTrait] = React6__default.default.useState(null);
+  const handleTransitionClick = React6.useCallback((index) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const handleBreadcrumbClick = React7.useCallback((targetLevel) => {
+  const handleBreadcrumbClick = React6.useCallback((targetLevel) => {
     const levelOrder = ["application", "orbital", "trait", "transition"];
     const currentIdx = levelOrder.indexOf(state.level);
     const targetIdx = levelOrder.indexOf(targetLevel);
@@ -4920,7 +5099,7 @@ var Avl3DViewer = ({
     }
   }, [state.level]);
   const cameraConfig = CAMERA_POSITIONS[state.level];
-  const sceneContent = React7.useMemo(() => {
+  const sceneContent = React6.useMemo(() => {
     switch (state.level) {
       case "application": {
         const data = parseApplicationLevel(schema);
@@ -4994,7 +5173,7 @@ var Avl3DViewer = ({
             gap: "xs",
             align: "center",
             className: "absolute top-2 left-2 z-10 bg-surface/80 backdrop-blur rounded-md px-3 py-1.5",
-            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React7__default.default.Fragment, { children: [
+            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React6__default.default.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
               i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
                 Box,
@@ -5088,187 +5267,6 @@ var Avl3DViewer = ({
   );
 };
 Avl3DViewer.displayName = "Avl3DViewer";
-function isInFrustum(position, camera, padding = 0) {
-  const frustum = new THREE6__namespace.Frustum();
-  const projScreenMatrix = new THREE6__namespace.Matrix4();
-  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
-  frustum.setFromProjectionMatrix(projScreenMatrix);
-  const sphere = new THREE6__namespace.Sphere(position, padding);
-  return frustum.intersectsSphere(sphere);
-}
-function filterByFrustum(positions, camera, padding = 0) {
-  const frustum = new THREE6__namespace.Frustum();
-  const projScreenMatrix = new THREE6__namespace.Matrix4();
-  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
-  frustum.setFromProjectionMatrix(projScreenMatrix);
-  return positions.filter((position) => {
-    const sphere = new THREE6__namespace.Sphere(position, padding);
-    return frustum.intersectsSphere(sphere);
-  });
-}
-function getVisibleIndices(positions, camera, padding = 0) {
-  const frustum = new THREE6__namespace.Frustum();
-  const projScreenMatrix = new THREE6__namespace.Matrix4();
-  const visible = /* @__PURE__ */ new Set();
-  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
-  frustum.setFromProjectionMatrix(projScreenMatrix);
-  positions.forEach((position, index) => {
-    const sphere = new THREE6__namespace.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__namespace.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
-    };
-  }
-};
 
 exports.AVL_3D_COLORS = AVL_3D_COLORS;
 exports.AssetLoader = AssetLoader;
@@ -5282,8 +5280,9 @@ exports.Avl3DViewer = Avl3DViewer;
 exports.CAMERA_POSITIONS = CAMERA_POSITIONS;
 exports.Camera3D = Camera3D;
 exports.Canvas3DErrorBoundary = Canvas3DErrorBoundary;
+exports.Canvas3DHost = Canvas3DHost;
 exports.Canvas3DLoadingState = Canvas3DLoadingState;
-exports.GameCanvas3D = GameCanvas3D;
+exports.GameCanvas3D = Canvas3DHost;
 exports.Lighting3D = Lighting3D;
 exports.ModelLoader = ModelLoader;
 exports.Scene3D = Scene3D;
@@ -5316,5 +5315,5 @@ exports.useAvl3DConfig = useAvl3DConfig;
 exports.useGameCanvas3DEvents = useGameCanvas3DEvents;
 exports.useRaycaster = useRaycaster;
 exports.useSceneGraph = useSceneGraph;
-exports.useThree = useThree3;
+exports.useThree = useThree4;
 exports.worldToGrid = worldToGrid;