@almadar/ui 5.105.0 → 5.107.0

package/dist/components/game/{3d → three}/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React10 = require('react');
+var React7 = require('react');
 var fiber = require('@react-three/fiber');
 var THREE6 = require('three');
 var jsxRuntime = require('react/jsx-runtime');
@@ -14,10 +14,11 @@ 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 LucideIcons = require('lucide-react');
 var postprocessing = require('@react-three/postprocessing');
 var hooks = require('@almadar/ui/hooks');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -36,17 +37,16 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React10__namespace = /*#__PURE__*/_interopNamespace(React10);
+var React7__default = /*#__PURE__*/_interopDefault(React7);
 var THREE6__namespace = /*#__PURE__*/_interopNamespace(THREE6);
-var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
 
 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 = React10.useRef(false);
-  React10.useEffect(() => {
+  const initializedRef = React7.useRef(false);
+  React7.useEffect(() => {
     if (initializedRef.current) return;
     initializedRef.current = true;
     if (background.startsWith("#") || background.startsWith("rgb")) {
@@ -67,7 +67,7 @@ function Scene3D({ background = "#1a1a2e", fog, children }) {
   }, [scene, background, fog]);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 }
-var Camera3D = React10.forwardRef(
+var Camera3D = React7.forwardRef(
   ({
     mode = "isometric",
     position = [10, 10, 10],
@@ -80,10 +80,10 @@ var Camera3D = React10.forwardRef(
     onChange
   }, ref) => {
     const { camera, set, viewport } = fiber.useThree();
-    const controlsRef = React10.useRef(null);
-    const initialPosition = React10.useRef(new THREE6__namespace.Vector3(...position));
-    const initialTarget = React10.useRef(new THREE6__namespace.Vector3(...target));
-    React10.useEffect(() => {
+    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;
@@ -114,7 +114,7 @@ var Camera3D = React10.forwardRef(
         onChange(camera);
       }
     });
-    React10.useImperativeHandle(ref, () => ({
+    React7.useImperativeHandle(ref, () => ({
       getCamera: () => camera,
       setPosition: (x, y, z) => {
         camera.position.set(x, y, z);
@@ -261,7 +261,7 @@ function Canvas3DLoadingState({
   ] });
 }
 var log = logger.createLogger("almadar:ui:game:canvas3d:error-boundary");
-var Canvas3DErrorBoundary = class extends React10.Component {
+var Canvas3DErrorBoundary = class extends React7.Component {
   constructor(props) {
     super(props);
     __publicField(this, "handleReset", () => {
@@ -376,10 +376,10 @@ function stateFromEntry(entry) {
   return { model: null, clips: [], isLoading: !entry.error, error: entry.error ?? null };
 }
 function useGLTFModel(url, resourceBasePath) {
-  const [state, setState] = React10.useState(
+  const [state, setState] = React7.useState(
     () => stateFromEntry(url ? loadGltfCached(url, resourceBasePath || detectAssetRoot(url)) : null)
   );
-  React10.useEffect(() => {
+  React7.useEffect(() => {
     if (!url) {
       setState({ model: null, clips: [], isLoading: false, error: null });
       return;
@@ -414,7 +414,7 @@ function ModelLoader({
   tint
 }) {
   const { model: loadedModel, clips, isLoading, error } = useGLTFModel(url, resourceBasePath);
-  const model = React10.useMemo(() => {
+  const model = React7.useMemo(() => {
     if (!loadedModel) return null;
     const cloned = SkeletonUtils.clone(loadedModel);
     cloned.updateMatrixWorld(true);
@@ -432,8 +432,8 @@ function ModelLoader({
     });
     return cloned;
   }, [loadedModel, castShadow, receiveShadow, tint]);
-  const mixer = React10.useMemo(() => model ? new THREE6__namespace.AnimationMixer(model) : null, [model]);
-  React10.useEffect(() => {
+  const mixer = React7.useMemo(() => model ? new THREE6__namespace.AnimationMixer(model) : null, [model]);
+  React7.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,7 +447,7 @@ function ModelLoader({
   fiber.useFrame((_, delta) => {
     mixer?.update(delta);
   });
-  const normFactor = React10.useMemo(() => {
+  const normFactor = React7.useMemo(() => {
     if (!model) return 1;
     const box = new THREE6__namespace.Box3().setFromObject(model);
     const size = new THREE6__namespace.Vector3();
@@ -456,11 +456,11 @@ function ModelLoader({
     if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
     return 1 / maxDim;
   }, [model]);
-  const scaleArray = React10.useMemo(() => {
+  const scaleArray = React7.useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;
     return [base[0] * normFactor, base[1] * normFactor, base[2] * normFactor];
   }, [scale, normFactor]);
-  const rotationRad = React10.useMemo(() => {
+  const rotationRad = React7.useMemo(() => {
     return [
       rotation[0] * Math.PI / 180,
       rotation[1] * Math.PI / 180,
@@ -728,7 +728,7 @@ var AssetLoader = class {
 };
 var assetLoader = new AssetLoader();
 
-// components/game/shared/hooks/useThree.ts
+// components/game/three/hooks/useThree.ts
 var DEFAULT_OPTIONS = {
   cameraMode: "isometric",
   cameraPosition: [10, 10, 10],
@@ -740,21 +740,21 @@ var DEFAULT_OPTIONS = {
 };
 function useThree3(options = {}) {
   const opts = { ...DEFAULT_OPTIONS, ...options };
-  const containerRef = React10.useRef(null);
-  const canvasRef = React10.useRef(null);
-  const rendererRef = React10.useRef(null);
-  const sceneRef = React10.useRef(null);
-  const cameraRef = React10.useRef(null);
-  const controlsRef = React10.useRef(null);
-  const gridHelperRef = React10.useRef(null);
-  const rafRef = React10.useRef(0);
-  const [isReady, setIsReady] = React10.useState(false);
-  const [dimensions, setDimensions] = React10.useState({ width: 0, height: 0 });
-  const initialCameraPosition = React10.useMemo(
+  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),
     []
   );
-  React10.useEffect(() => {
+  React7.useEffect(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
@@ -847,7 +847,7 @@ function useThree3(options = {}) {
       scene.clear();
     };
   }, []);
-  React10.useEffect(() => {
+  React7.useEffect(() => {
     if (!cameraRef.current || !containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
@@ -882,20 +882,20 @@ function useThree3(options = {}) {
       animate();
     }
   }, [opts.cameraMode]);
-  const setCameraPosition = React10.useCallback((x, y, z) => {
+  const setCameraPosition = React7.useCallback((x, y, z) => {
     if (cameraRef.current) {
       cameraRef.current.position.set(x, y, z);
       controlsRef.current?.update();
     }
   }, []);
-  const lookAt = React10.useCallback((x, y, z) => {
+  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 = React10.useCallback(() => {
+  const resetCamera = React7.useCallback(() => {
     if (cameraRef.current) {
       cameraRef.current.position.copy(initialCameraPosition);
       cameraRef.current.lookAt(0, 0, 0);
@@ -905,7 +905,7 @@ function useThree3(options = {}) {
       }
     }
   }, [initialCameraPosition]);
-  const fitView = React10.useCallback(
+  const fitView = React7.useCallback(
     (bounds) => {
       if (!cameraRef.current) return;
       const centerX = (bounds.minX + bounds.maxX) / 2;
@@ -936,20 +936,20 @@ function useThree3(options = {}) {
 }
 function useAssetLoader(options = {}) {
   const { preloadUrls = [], loader: customLoader } = options;
-  const loaderRef = React10.useRef(customLoader || new AssetLoader());
-  const [state, setState] = React10.useState({
+  const loaderRef = React7.useRef(customLoader || new AssetLoader());
+  const [state, setState] = React7.useState({
     isLoading: false,
     progress: 0,
     loaded: 0,
     total: 0,
     errors: []
   });
-  React10.useEffect(() => {
+  React7.useEffect(() => {
     if (preloadUrls.length > 0) {
       preload(preloadUrls);
     }
   }, []);
-  const updateProgress = React10.useCallback((loaded, total) => {
+  const updateProgress = React7.useCallback((loaded, total) => {
     setState((prev) => ({
       ...prev,
       loaded,
@@ -957,7 +957,7 @@ function useAssetLoader(options = {}) {
       progress: total > 0 ? Math.round(loaded / total * 100) : 0
     }));
   }, []);
-  const loadModel = React10.useCallback(
+  const loadModel = React7.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -980,7 +980,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const loadOBJ = React10.useCallback(
+  const loadOBJ = React7.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -1003,7 +1003,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const loadTexture = React10.useCallback(
+  const loadTexture = React7.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -1026,7 +1026,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const preload = React10.useCallback(
+  const preload = React7.useCallback(
     async (urls) => {
       setState((prev) => ({
         ...prev,
@@ -1065,27 +1065,27 @@ function useAssetLoader(options = {}) {
     },
     [updateProgress]
   );
-  const hasModel = React10.useCallback((url) => {
+  const hasModel = React7.useCallback((url) => {
     return loaderRef.current.hasModel(url);
   }, []);
-  const hasTexture = React10.useCallback((url) => {
+  const hasTexture = React7.useCallback((url) => {
     return loaderRef.current.hasTexture(url);
   }, []);
-  const getModel = React10.useCallback((url) => {
+  const getModel = React7.useCallback((url) => {
     try {
       return loaderRef.current.getModel(url);
     } catch {
       return void 0;
     }
   }, []);
-  const getTexture = React10.useCallback((url) => {
+  const getTexture = React7.useCallback((url) => {
     try {
       return loaderRef.current.getTexture(url);
     } catch {
       return void 0;
     }
   }, []);
-  const clearCache = React10.useCallback(() => {
+  const clearCache = React7.useCallback(() => {
     loaderRef.current.clearCache();
     setState({
       isLoading: false,
@@ -1109,25 +1109,25 @@ function useAssetLoader(options = {}) {
   };
 }
 function useSceneGraph() {
-  const nodesRef = React10.useRef(/* @__PURE__ */ new Map());
-  const addNode = React10.useCallback((node) => {
+  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 = React10.useCallback((id) => {
+  const removeNode = React7.useCallback((id) => {
     const node = nodesRef.current.get(id);
     if (node) {
       node.mesh.removeFromParent();
       nodesRef.current.delete(id);
     }
   }, []);
-  const getNode = React10.useCallback((id) => {
+  const getNode = React7.useCallback((id) => {
     return nodesRef.current.get(id);
   }, []);
-  const updateNodePosition = React10.useCallback(
+  const updateNodePosition = React7.useCallback(
     (id, x, y, z) => {
       const node = nodesRef.current.get(id);
       if (node) {
@@ -1137,7 +1137,7 @@ function useSceneGraph() {
     },
     []
   );
-  const updateNodeGridPosition = React10.useCallback(
+  const updateNodeGridPosition = React7.useCallback(
     (id, gridX, gridZ) => {
       const node = nodesRef.current.get(id);
       if (node) {
@@ -1146,7 +1146,7 @@ function useSceneGraph() {
     },
     []
   );
-  const getNodeAtGrid = React10.useCallback(
+  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;
@@ -1155,10 +1155,10 @@ function useSceneGraph() {
     },
     []
   );
-  const getNodesByType = React10.useCallback((type) => {
+  const getNodesByType = React7.useCallback((type) => {
     return Array.from(nodesRef.current.values()).filter((node) => node.type === type);
   }, []);
-  const getNodesInBounds = React10.useCallback(
+  const getNodesInBounds = React7.useCallback(
     (minX, maxX, minZ, maxZ) => {
       return Array.from(nodesRef.current.values()).filter((node) => {
         const { x, z } = node.gridPosition;
@@ -1167,13 +1167,13 @@ function useSceneGraph() {
     },
     []
   );
-  const clearNodes = React10.useCallback(() => {
+  const clearNodes = React7.useCallback(() => {
     nodesRef.current.forEach((node) => {
       node.mesh.removeFromParent();
     });
     nodesRef.current.clear();
   }, []);
-  const countNodes = React10.useCallback((type) => {
+  const countNodes = React7.useCallback((type) => {
     if (!type) {
       return nodesRef.current.size;
     }
@@ -1195,9 +1195,9 @@ function useSceneGraph() {
 }
 function useRaycaster(options) {
   const { camera, canvas, cellSize = 1, offsetX = 0, offsetZ = 0 } = options;
-  const raycaster = React10.useRef(new THREE6__namespace.Raycaster());
-  const mouse = React10.useRef(new THREE6__namespace.Vector2());
-  const clientToNDC = React10.useCallback(
+  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 };
@@ -1210,7 +1210,7 @@ function useRaycaster(options) {
     },
     [canvas]
   );
-  const isWithinCanvas = React10.useCallback(
+  const isWithinCanvas = React7.useCallback(
     (clientX, clientY) => {
       if (!canvas) return false;
       const rect = canvas.getBoundingClientRect();
@@ -1218,7 +1218,7 @@ function useRaycaster(options) {
     },
     [canvas]
   );
-  const getIntersection = React10.useCallback(
+  const getIntersection = React7.useCallback(
     (clientX, clientY, objects) => {
       if (!camera || !canvas) return null;
       const ndc = clientToNDC(clientX, clientY);
@@ -1241,7 +1241,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, clientToNDC]
   );
-  const getAllIntersections = React10.useCallback(
+  const getAllIntersections = React7.useCallback(
     (clientX, clientY, objects) => {
       if (!camera || !canvas) return [];
       const ndc = clientToNDC(clientX, clientY);
@@ -1260,7 +1260,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, clientToNDC]
   );
-  const getGridCoordinates = React10.useCallback(
+  const getGridCoordinates = React7.useCallback(
     (clientX, clientY) => {
       if (!camera || !canvas) return null;
       const ndc = clientToNDC(clientX, clientY);
@@ -1278,7 +1278,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, cellSize, offsetX, offsetZ, clientToNDC]
   );
-  const getTileAtPosition = React10.useCallback(
+  const getTileAtPosition = React7.useCallback(
     (clientX, clientY, scene) => {
       if (!camera || !canvas) return null;
       const tileMeshes = [];
@@ -1401,10 +1401,10 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React10.useContext(providers.EventBusContext);
+  const context = React7.useContext(providers.EventBusContext);
   const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
   const scope = providers.useTraitScope();
-  return React10.useMemo(() => {
+  return React7.useMemo(() => {
     if (!scope) {
       return {
         ...baseBus,
@@ -1440,7 +1440,7 @@ function useEventBus() {
 }
 function useEmitEvent() {
   const eventBus = useEventBus();
-  return React10.useCallback(
+  return React7.useCallback(
     (type, payload, source) => {
       eventBus.emit(type, payload, source);
     },
@@ -1448,7 +1448,7 @@ function useEmitEvent() {
   );
 }
 
-// components/game/shared/hooks/useGameCanvas3DEvents.ts
+// components/game/three/hooks/useGameCanvas3DEvents.ts
 function useGameCanvas3DEvents(options) {
   const {
     tileClickEvent,
@@ -1467,9 +1467,9 @@ function useGameCanvas3DEvents(options) {
     onUnitAnimation
   } = options;
   const emit = useEmitEvent();
-  const optionsRef = React10.useRef(options);
+  const optionsRef = React7.useRef(options);
   optionsRef.current = options;
-  const handleTileClick = React10.useCallback(
+  const handleTileClick = React7.useCallback(
     (tile, event) => {
       if (tileClickEvent) {
         emit(tileClickEvent, {
@@ -1485,7 +1485,7 @@ function useGameCanvas3DEvents(options) {
     },
     [tileClickEvent, emit]
   );
-  const handleUnitClick = React10.useCallback(
+  const handleUnitClick = React7.useCallback(
     (unit, event) => {
       if (unitClickEvent) {
         emit(unitClickEvent, {
@@ -1504,7 +1504,7 @@ function useGameCanvas3DEvents(options) {
     },
     [unitClickEvent, emit]
   );
-  const handleFeatureClick = React10.useCallback(
+  const handleFeatureClick = React7.useCallback(
     (feature, event) => {
       if (featureClickEvent) {
         emit(featureClickEvent, {
@@ -1519,7 +1519,7 @@ function useGameCanvas3DEvents(options) {
     },
     [featureClickEvent, emit]
   );
-  const handleCanvasClick = React10.useCallback(
+  const handleCanvasClick = React7.useCallback(
     (event) => {
       if (canvasClickEvent) {
         emit(canvasClickEvent, {
@@ -1532,7 +1532,7 @@ function useGameCanvas3DEvents(options) {
     },
     [canvasClickEvent, emit]
   );
-  const handleTileHover = React10.useCallback(
+  const handleTileHover = React7.useCallback(
     (tile, event) => {
       if (tile) {
         if (tileHoverEvent) {
@@ -1552,7 +1552,7 @@ function useGameCanvas3DEvents(options) {
     },
     [tileHoverEvent, tileLeaveEvent, emit]
   );
-  const handleUnitAnimation = React10.useCallback(
+  const handleUnitAnimation = React7.useCallback(
     (unitId, state) => {
       if (unitAnimationEvent) {
         emit(unitAnimationEvent, {
@@ -1565,7 +1565,7 @@ function useGameCanvas3DEvents(options) {
     },
     [unitAnimationEvent, emit]
   );
-  const handleCameraChange = React10.useCallback(
+  const handleCameraChange = React7.useCallback(
     (position) => {
       if (cameraChangeEvent) {
         emit(cameraChangeEvent, {
@@ -1587,437 +1587,37 @@ function useGameCanvas3DEvents(options) {
   };
 }
 
-// components/game/shared/game3dTheme.ts
-var TERRAIN_COLORS_3D = {
-  base: 8421504,
-  water: 4491468,
-  grass: 4500036,
-  sand: 14535816,
-  rock: 8947848,
-  snow: 15658734
-};
-var HIGHLIGHT_EMISSIVE_3D = {
-  selected: 4473924,
-  attackTarget: 4456448,
-  validMove: 17408,
-  hovered: 2236962,
-  none: 0
-};
-var FACTION_COLORS_3D = {
-  player: 4491519,
-  enemy: 16729156,
-  default: 16777028
-};
-var SELECTION_RING_COLOR_3D = "#ffff00";
-var HEALTHBAR_3D = {
-  bg: 3355443,
-  /** fill color thresholds: fraction > key → color */
-  high: 4500036,
-  // fraction > 0.5
-  mid: 11184708,
-  // fraction > 0.25
-  low: 16729156,
-  // else
-  width: 0.5
-};
-function healthbarFill3D(fraction) {
-  if (fraction > 0.5) return HEALTHBAR_3D.high;
-  if (fraction > 0.25) return HEALTHBAR_3D.mid;
-  return HEALTHBAR_3D.low;
-}
-var TREE_COLORS_3D = {
-  trunk: 9127187,
-  foliage: 2263842
-};
-var ROCK_COLOR_3D = 8421504;
-var EVENT_COLORS_3D = {
-  hit: 16733508,
-  damage: 16733508,
-  attack: 16746564,
-  heal: 4513126,
-  pickup: 16763955,
-  score: 16763955,
-  death: 11154227,
-  win: 6750088,
-  lose: 16737894,
-  default: 16777215
-};
-var SIDE_PLATFORM_COLORS_3D = {
-  ground: 5999678,
-  platform: 9132587,
-  hazard: 13386820,
-  goal: 4491468,
-  default: 8947848
-};
-var SIDE_PLAYER_COLOR_3D = "#4488ff";
-var GRID_COLORS_3D = {
-  cell: "#444444",
-  section: "#666666"
-};
-var DEFAULT_BACKGROUND_3D = "#1a1a2e";
-function TileMesh3D({
-  tile,
-  position,
-  model,
-  isSelected,
-  isHovered,
-  isValidMove,
-  isAttackTarget,
-  onTileClick,
-  onTileHover
-}) {
-  const color = tile.color ?? TERRAIN_COLORS_3D[tile.type ?? ""] ?? TERRAIN_COLORS_3D.base;
-  let emissive = HIGHLIGHT_EMISSIVE_3D.none;
-  if (isSelected) emissive = HIGHLIGHT_EMISSIVE_3D.selected;
-  else if (isAttackTarget) emissive = HIGHLIGHT_EMISSIVE_3D.attackTarget;
-  else if (isValidMove) emissive = HIGHLIGHT_EMISSIVE_3D.validMove;
-  else if (isHovered) emissive = HIGHLIGHT_EMISSIVE_3D.hovered;
-  if (model?.url) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "group",
-      {
-        position,
-        onClick: (e) => onTileClick(tile, e),
-        onPointerEnter: (e) => onTileHover(tile, e),
-        onPointerLeave: (e) => onTileHover(null, e),
-        userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          ModelLoader,
-          {
-            url: model.url,
-            scale: 0.95,
-            rotation: [0, tile.rotation ?? 0, 0],
-            fallbackGeometry: "box",
-            castShadow: true,
-            receiveShadow: true
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "mesh",
-    {
-      position,
-      onClick: (e) => onTileClick(tile, e),
-      onPointerEnter: (e) => onTileHover(tile, e),
-      onPointerLeave: (e) => onTileHover(null, e),
-      userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [0.95, 0.2, 0.95] }),
-        /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color, emissive })
-      ]
+// 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 SpriteBillboard3D({
-  sheetUrl,
-  resolveFrame,
-  height = 1.2
-}) {
-  const texture = fiber.useLoader(THREE6__namespace.TextureLoader, sheetUrl);
-  const meshRef = React10.useRef(null);
-  const matRef = React10.useRef(null);
-  const [aspect, setAspect] = React10.useState(1);
-  fiber.useFrame(() => {
-    const frame = resolveFrame();
-    if (!frame || !texture.image) return;
-    const imgW = texture.image.width;
-    const imgH = texture.image.height;
-    if (!imgW || !imgH) return;
-    texture.repeat.set((frame.flipX ? -1 : 1) * (frame.sw / imgW), frame.sh / imgH);
-    texture.offset.set(
-      frame.flipX ? (frame.sx + frame.sw) / imgW : frame.sx / imgW,
-      1 - (frame.sy + frame.sh) / imgH
-    );
-    texture.magFilter = THREE6__namespace.NearestFilter;
-    texture.minFilter = THREE6__namespace.NearestFilter;
-    texture.needsUpdate = true;
-    const nextAspect = frame.sw / frame.sh;
-    if (Math.abs(nextAspect - aspect) > 1e-3) setAspect(nextAspect);
-    if (matRef.current) matRef.current.needsUpdate = true;
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs("mesh", { ref: meshRef, position: [0, height / 2, 0], children: [
-    /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [height * aspect, height] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "meshBasicMaterial",
-      {
-        ref: matRef,
-        map: texture,
-        transparent: true,
-        alphaTest: 0.1,
-        side: THREE6__namespace.DoubleSide
-      }
-    )
-  ] });
-}
-
-// components/game/shared/spriteAnimation.ts
-function resolveSheetDirection(facing) {
-  switch (facing) {
-    case "se":
-      return { sheetDir: "se", flipX: false };
-    case "sw":
-      return { sheetDir: "sw", flipX: false };
-    case "ne":
-      return { sheetDir: "sw", flipX: true };
-    case "nw":
-      return { sheetDir: "se", flipX: true };
-  }
-}
-function frameRect(frame, row, columns, frameWidth, frameHeight) {
-  return {
-    sx: frame % columns * frameWidth,
-    sy: row * frameHeight,
-    sw: frameWidth,
-    sh: frameHeight
-  };
-}
-
-// components/game/shared/hooks/useUnitSpriteAtlas.ts
-function unitAtlasUrl(unit) {
-  return unit.spriteSheet?.url ?? null;
-}
-function resolveSheetUrl(atlasUrl, relativeSheetPath) {
-  try {
-    return new URL(relativeSheetPath, atlasUrl).toString();
-  } catch {
-    const base = atlasUrl.slice(0, atlasUrl.lastIndexOf("/") + 1);
-    return `${base}${relativeSheetPath.replace(/^\.\//, "")}`;
   }
+  return out;
 }
-function useUnitSpriteAtlas(units) {
-  const atlasCacheRef = React10.useRef(/* @__PURE__ */ new Map());
-  const loadingRef = React10.useRef(/* @__PURE__ */ new Set());
-  const [pendingCount, setPendingCount] = React10.useState(0);
-  const [, forceTick] = React10.useState(0);
-  const atlasUrls = React10.useMemo(() => {
-    const set = /* @__PURE__ */ new Set();
-    for (const unit of units) {
-      const url = unitAtlasUrl(unit);
-      if (url) set.add(url);
-    }
-    return [...set];
-  }, [units]);
-  React10.useEffect(() => {
-    const cache = atlasCacheRef.current;
-    const loading = loadingRef.current;
-    const toLoad = atlasUrls.filter((url) => !cache.has(url) && !loading.has(url));
-    if (toLoad.length === 0) return;
-    let cancelled = false;
-    setPendingCount((prev) => prev + toLoad.length);
-    for (const url of toLoad) {
-      loading.add(url);
-      fetch(url).then((res) => res.ok ? res.json() : Promise.reject(new Error(String(res.status)))).then((atlas) => {
-        if (cancelled) return;
-        cache.set(url, atlas);
-      }).catch(() => {
-      }).finally(() => {
-        if (cancelled) return;
-        loading.delete(url);
-        setPendingCount((prev) => Math.max(0, prev - 1));
-        forceTick((n) => n + 1);
-      });
-    }
-    return () => {
-      cancelled = true;
-    };
-  }, [atlasUrls]);
-  const sheetUrls = React10.useMemo(() => {
-    const urls = /* @__PURE__ */ new Set();
-    for (const unit of units) {
-      const atlasUrl = unitAtlasUrl(unit);
-      if (!atlasUrl) continue;
-      const atlas = atlasCacheRef.current.get(atlasUrl);
-      if (!atlas) continue;
-      for (const rel of Object.values(atlas.sheets)) {
-        if (rel) urls.add(resolveSheetUrl(atlasUrl, rel));
-      }
-    }
-    return [...urls];
-  }, [units, pendingCount]);
-  const resolveUnitFrame = React10.useCallback((unitId) => {
-    const unit = units.find((u) => u.id === unitId);
-    if (!unit) return null;
-    const atlasUrl = unitAtlasUrl(unit);
-    if (!atlasUrl) return null;
-    const atlas = atlasCacheRef.current.get(atlasUrl);
-    if (!atlas) return null;
-    const animation = unit.animation ?? "idle";
-    const frame = unit.frame ?? 0;
-    const def = atlas.animations[animation] ?? atlas.animations.idle;
-    if (!def) return null;
-    const { sheetDir, flipX } = resolveSheetDirection("se");
-    const rel = atlas.sheets[sheetDir] ?? atlas.sheets.se ?? atlas.sheets.sw;
-    if (!rel) return null;
-    const sheetUrl = resolveSheetUrl(atlasUrl, rel);
-    const rect = frameRect(frame, def.row, atlas.columns, atlas.frameWidth, atlas.frameHeight);
-    return {
-      sheetUrl,
-      sx: rect.sx,
-      sy: rect.sy,
-      sw: rect.sw,
-      sh: rect.sh,
-      flipX,
-      applyBreathing: animation === "idle"
-    };
-  }, [units]);
-  return { sheetUrls, resolveUnitFrame, pendingCount };
-}
-var UNIT_BASE_MODEL_SCALE = 0.5;
-var UNIT_BASE_BILLBOARD_HEIGHT = 1.2;
-var UNIT_BASE_PRIMITIVE_RADIUS = 0.3;
-var HEALTHBAR_HEIGHT = 0.05;
-function UnitMesh3D({
-  unit,
-  position,
-  model,
-  isSelected,
-  unitScale,
-  cellSize,
-  resolveUnitFrame,
-  onUnitClick
-}) {
-  const color = unit.tint ?? FACTION_COLORS_3D[unit.faction ?? ""] ?? FACTION_COLORS_3D.default;
-  const hasAtlas = unitAtlasUrl(unit) !== null;
-  const initialFrame = hasAtlas ? resolveUnitFrame(unit.id) : null;
-  const modelScale = UNIT_BASE_MODEL_SCALE * unitScale * cellSize;
-  const billboardHeight = UNIT_BASE_BILLBOARD_HEIGHT * unitScale * cellSize;
-  const primitiveRadius = UNIT_BASE_PRIMITIVE_RADIUS * unitScale * cellSize;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "group",
-    {
-      position,
-      onClick: (e) => onUnitClick(unit, e),
-      userData: { type: "unit", unitId: unit.id },
-      children: [
-        isSelected && /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.05, 0], rotation: [-Math.PI / 2, 0, 0], children: [
-          /* @__PURE__ */ jsxRuntime.jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
-          /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: SELECTION_RING_COLOR_3D, transparent: true, opacity: 0.8 })
-        ] }),
-        hasAtlas && initialFrame ? (
-          /* Animated sprite-sheet billboard — single cropped frame, by state */
-          /* @__PURE__ */ jsxRuntime.jsx(drei.Billboard, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            SpriteBillboard3D,
-            {
-              sheetUrl: initialFrame.sheetUrl,
-              resolveFrame: () => resolveUnitFrame(unit.id),
-              height: billboardHeight
-            }
-          ) })
-        ) : model?.url ? (
-          /* GLB unit model — LOLO's `animation` field drives the named clip;
-             `heading` (radians) faces the model along its travel direction (driving). */
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ModelLoader,
-            {
-              url: model.url,
-              scale: modelScale,
-              rotation: [0, unit.heading ?? 0, 0],
-              animation: unit.animation ?? "idle",
-              fallbackGeometry: "box",
-              castShadow: true
-            }
-          )
-        ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, primitiveRadius, 0], children: [
-            /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [primitiveRadius, primitiveRadius, primitiveRadius * 0.33, 8] }),
-            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, primitiveRadius * 2, 0], children: [
-            /* @__PURE__ */ jsxRuntime.jsx("capsuleGeometry", { args: [primitiveRadius * 0.67, primitiveRadius * 1.33, 4, 8] }),
-            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, primitiveRadius * 3, 0], children: [
-            /* @__PURE__ */ jsxRuntime.jsx("sphereGeometry", { args: [primitiveRadius * 0.4, 8, 8] }),
-            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
-          ] })
-        ] }),
-        unit.health !== void 0 && unit.maxHealth !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("group", { position: [0, billboardHeight, 0], children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [-0.5 / 2, 0, 0], children: [
-            /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [HEALTHBAR_3D.width, HEALTHBAR_HEIGHT] }),
-            /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: HEALTHBAR_3D.bg })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "mesh",
-            {
-              position: [
-                -0.5 / 2 + HEALTHBAR_3D.width * (unit.health / unit.maxHealth) / 2,
-                0,
-                0.01
-              ],
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [HEALTHBAR_3D.width * (unit.health / unit.maxHealth), HEALTHBAR_HEIGHT] }),
-                /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: healthbarFill3D(unit.health / unit.maxHealth) })
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function FeatureMesh3D({
-  feature,
-  position,
-  model,
-  onFeatureClick
-}) {
-  if (model?.url) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ModelLoader,
-      {
-        url: model.url,
-        position,
-        scale: 0.5,
-        rotation: [0, feature.rotation ?? 0, 0],
-        tint: feature.color,
-        onClick: () => onFeatureClick(feature, null),
-        fallbackGeometry: "box"
-      }
-    );
-  }
-  if (feature.type === "tree") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "group",
-      {
-        position,
-        onClick: (e) => onFeatureClick(feature, e),
-        userData: { type: "feature", featureId: feature.id },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.4, 0], children: [
-            /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.1, 0.15, 0.8, 6] }),
-            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: TREE_COLORS_3D.trunk })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.9, 0], children: [
-            /* @__PURE__ */ jsxRuntime.jsx("coneGeometry", { args: [0.5, 0.8, 8] }),
-            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: TREE_COLORS_3D.foliage })
-          ] })
-        ]
-      }
-    );
-  }
-  if (feature.type === "rock") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "mesh",
-      {
-        position: [position[0], position[1] + 0.3, position[2]],
-        onClick: (e) => onFeatureClick(feature, e),
-        userData: { type: "feature", featureId: feature.id },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("dodecahedronGeometry", { args: [0.3, 0] }),
-          /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: ROCK_COLOR_3D })
-        ]
-      }
-    );
+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 null;
+  return m;
 }
 function CameraController3D({
   onCameraChange
 }) {
   const { camera } = fiber.useThree();
-  React10.useEffect(() => {
+  React7.useEffect(() => {
     if (onCameraChange) {
       onCameraChange({
         x: camera.position.x,
@@ -2033,8 +1633,8 @@ function FollowCamera3D({
   offset
 }) {
   const { camera } = fiber.useThree();
-  const look = React10.useRef(new THREE6__namespace.Vector3(target[0], target[1], target[2]));
-  const goal = React10.useRef(new THREE6__namespace.Vector3());
+  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]);
@@ -2044,109 +1644,136 @@ function FollowCamera3D({
   });
   return null;
 }
-function LerpedGroup3D({
-  target,
-  enabled,
-  children
-}) {
-  const ref = React10.useRef(null);
-  const goal = React10.useRef(new THREE6__namespace.Vector3());
-  fiber.useFrame((_, delta) => {
-    const g = ref.current;
-    if (!g) return;
-    goal.current.set(target[0], target[1], target[2]);
-    if (enabled) g.position.lerp(goal.current, Math.min(1, delta * 10));
-    else g.position.copy(goal.current);
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx("group", { ref, position: target, children });
+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
+      }
+    )
+  ] }) });
+}
+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
+      }
+    ) });
+  }
+  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 EventMarker3D({ event, position }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(drei.Billboard, { position, children: /* @__PURE__ */ jsxRuntime.jsx(
+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: EVENT_COLORS_3D[event.type] ?? EVENT_COLORS_3D.default,
-      outlineWidth: 0.02,
-      outlineColor: "#000000",
+      color: node.color,
       anchorX: "center",
       anchorY: "middle",
-      children: event.message ?? event.type
+      outlineWidth: 0.02,
+      outlineColor: "#000000",
+      children: node.text
     }
   ) });
 }
-function SideScene3D({
-  player,
-  platforms,
-  worldHeight,
-  ppu,
-  playerSprite,
-  tileSprites,
-  interpolate,
-  features = [],
-  events = [],
-  assetManifest
-}) {
-  const pw = player.width ?? 32;
-  const ph = player.height ?? 48;
-  const playerPos = [
-    (player.x + pw / 2) / ppu,
-    (worldHeight - player.y - ph) / ppu,
-    0
-  ];
-  const playerH = Math.max(ph / ppu, 0.5);
-  return /* @__PURE__ */ jsxRuntime.jsxs("group", { children: [
-    platforms.map((p, i) => {
-      const platformType = p.type ?? "platform";
-      const model = tileSprites?.[platformType]?.url;
-      const topY = (worldHeight - p.y) / ppu;
-      if (model) {
-        const cells = Math.max(1, Math.round(p.width / ppu));
-        const x0 = p.x / ppu;
-        return /* @__PURE__ */ jsxRuntime.jsx("group", { children: Array.from({ length: cells }, (_, c) => /* @__PURE__ */ jsxRuntime.jsx("group", { position: [x0 + c + 0.5, topY - 0.475, 0], children: /* @__PURE__ */ jsxRuntime.jsx(ModelLoader, { url: model, scale: 0.95, fallbackGeometry: "box", castShadow: true, receiveShadow: true }) }, c)) }, `plat-${i}`);
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "mesh",
-        {
-          position: [(p.x + p.width / 2) / ppu, topY - p.height / 2 / ppu, 0],
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [p.width / ppu, p.height / ppu, 1] }),
-            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: SIDE_PLATFORM_COLORS_3D[platformType] ?? SIDE_PLATFORM_COLORS_3D.default })
-          ]
-        },
-        `plat-${i}`
-      );
-    }),
-    features.map((feature, i) => {
-      const model = feature.assetUrl ?? assetManifest?.features?.[feature.type];
-      const fx = feature.x / ppu;
-      const fy = (worldHeight - feature.y) / ppu;
-      if (!model?.url) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx("group", { position: [fx, fy, 0], children: /* @__PURE__ */ jsxRuntime.jsx(ModelLoader, { url: model.url, scale: 0.6, tint: feature.color, fallbackGeometry: "sphere", castShadow: true }) }, feature.id ?? `sfeat-${i}`);
-    }),
-    events.map((ev, i) => /* @__PURE__ */ jsxRuntime.jsx(
-      EventMarker3D,
-      {
-        event: ev,
-        position: [ev.x / ppu, (worldHeight - (ev.y ?? 0)) / ppu + 0.8, 0.2]
-      },
-      ev.id ?? `sev-${i}`
-    )),
-    /* @__PURE__ */ jsxRuntime.jsx(LerpedGroup3D, { target: playerPos, enabled: interpolate, children: playerSprite?.url ? /* @__PURE__ */ jsxRuntime.jsx("group", { position: [0, playerH / 2, 0], children: /* @__PURE__ */ jsxRuntime.jsx(
-      ModelLoader,
-      {
-        url: playerSprite.url,
-        scale: playerH,
-        rotation: [0, player.facingRight ? 90 : -90, 0],
-        animation: player.animation ?? "idle",
-        fallbackGeometry: "box",
-        castShadow: true
-      }
-    ) }) : /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, playerH / 2, 0], children: [
-      /* @__PURE__ */ jsxRuntime.jsx("capsuleGeometry", { args: [playerH * 0.25, playerH * 0.5, 4, 8] }),
-      /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: SIDE_PLAYER_COLOR_3D })
-    ] }) })
-  ] });
+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 {
+    cellSize,
+    toWorld: (pos) => [pos.x * cellSize + offsetX, pos.z ?? 0, pos.y * cellSize + offsetZ]
+  };
 }
+
+// components/game/three/game3dTheme.ts
+var GRID_COLORS_3D = {
+  cell: "#444444",
+  section: "#666666"
+};
+var DEFAULT_BACKGROUND_3D = "#1a1a2e";
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -2155,35 +1782,18 @@ var DEFAULT_GRID_CONFIG = {
   offsetX: 0,
   offsetZ: 0
 };
-var TILE_TOP_OFFSET = 0.1;
-var GameCanvas3D = React10.forwardRef(
+var GameCanvas3D = React7.forwardRef(
   ({
-    tiles = [],
-    units = [],
-    features = [],
-    events = [],
-    orientation = "standard",
     cameraMode = "isometric",
+    followTarget,
     showGrid = true,
-    showCoordinates = false,
-    showTileInfo = false,
+    orientation = "standard",
     overlay = "default",
     shadows = true,
     backgroundColor = DEFAULT_BACKGROUND_3D,
-    onTileClick,
-    onUnitClick,
-    onFeatureClick,
-    onCanvasClick,
-    onTileHover,
-    onUnitAnimation,
-    assetLoader: customAssetLoader,
-    tileRenderer: CustomTileRenderer,
-    unitRenderer: CustomUnitRenderer,
-    featureRenderer: CustomFeatureRenderer,
     className,
     isLoading: externalLoading,
     error: externalError,
-    preloadAssets = [],
     tileClickEvent,
     unitClickEvent,
     featureClickEvent,
@@ -2193,31 +1803,17 @@ var GameCanvas3D = React10.forwardRef(
     unitAnimationEvent,
     cameraChangeEvent,
     loadingMessage = "Loading 3D Scene...",
-    useInstancing = true,
-    validMoves = [],
-    attackTargets = [],
-    selectedTileIds = [],
-    selectedUnitId = null,
-    unitScale = 1,
     keyMap,
     keyUpMap,
-    player,
-    platforms = [],
-    worldHeight = 400,
-    pixelsPerUnit = 32,
-    playerSprite,
-    tileSprites,
-    assetManifest,
-    interpolateUnits = false,
-    children
+    children,
+    drawables
   }, ref) => {
-    const containerRef = React10.useRef(null);
-    const controlsRef = React10.useRef(null);
-    const [hoveredTile, setHoveredTile] = React10.useState(null);
-    const [internalError, setInternalError] = React10.useState(null);
+    const containerRef = React7.useRef(null);
+    const controlsRef = React7.useRef(null);
+    const [internalError, setInternalError] = React7.useState(null);
     const eventBus = useEventBus();
-    const keysRef = React10.useRef(/* @__PURE__ */ new Set());
-    React10.useEffect(() => {
+    const keysRef = React7.useRef(/* @__PURE__ */ new Set());
+    React7.useEffect(() => {
       if (!keyMap && !keyUpMap) return;
       const down = (e) => {
         if (keysRef.current.has(e.code)) return;
@@ -2240,35 +1836,6 @@ var GameCanvas3D = React10.forwardRef(
         window.removeEventListener("keyup", up);
       };
     }, [keyMap, keyUpMap, eventBus]);
-    React10.useEffect(() => {
-      const el = containerRef.current;
-      if (!el) return;
-      let node = el;
-      let depth = 0;
-      while (node && depth < 8) {
-        const cs = window.getComputedStyle(node);
-        const rect = node.getBoundingClientRect();
-        console.log("[almadar:ui:game:3d-height]", {
-          depth,
-          tag: node.tagName,
-          id: node.id || void 0,
-          className: node.className?.slice?.(0, 60) || void 0,
-          rectHeight: rect.height,
-          computedHeight: cs.height,
-          computedMinHeight: cs.minHeight,
-          computedFlex: cs.flex,
-          computedOverflow: cs.overflow
-        });
-        node = node.parentElement;
-        depth++;
-      }
-    }, []);
-    const { sheetUrls: atlasSheetUrls, resolveUnitFrame } = useUnitSpriteAtlas(units);
-    const preloadUrls = React10.useMemo(() => [...preloadAssets, ...atlasSheetUrls], [preloadAssets, atlasSheetUrls]);
-    const { isLoading: assetsLoading, progress, loaded, total } = useAssetLoader({
-      preloadUrls,
-      loader: customAssetLoader
-    });
     const eventHandlers = useGameCanvas3DEvents({
       tileClickEvent,
       unitClickEvent,
@@ -2277,35 +1844,36 @@ var GameCanvas3D = React10.forwardRef(
       tileHoverEvent,
       tileLeaveEvent,
       unitAnimationEvent,
-      cameraChangeEvent,
-      onTileClick,
-      onUnitClick,
-      onFeatureClick,
-      onCanvasClick,
-      onTileHover,
-      onUnitAnimation
+      cameraChangeEvent
     });
-    const gridBounds = React10.useMemo(() => {
-      if (tiles.length === 0) {
+    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 };
       }
-      const xs = tiles.map((t) => t.x);
-      const zs = tiles.map((t) => t.z || t.y || 0);
-      return {
-        minX: Math.min(...xs),
-        maxX: Math.max(...xs),
-        minZ: Math.min(...zs),
-        maxZ: Math.max(...zs)
-      };
-    }, [tiles]);
-    const cameraTarget = React10.useMemo(() => {
-      return [
+      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 = React10.useMemo(
+      ],
+      [gridBounds]
+    );
+    const gridConfig = React7.useMemo(
       () => ({
         ...DEFAULT_GRID_CONFIG,
         offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
@@ -2313,15 +1881,15 @@ var GameCanvas3D = React10.forwardRef(
       }),
       [gridBounds]
     );
-    const gridToWorld2 = React10.useCallback(
-      (x, z, y = 0) => {
-        const worldX = (x - gridBounds.minX) * gridConfig.cellSize;
-        const worldZ = (z - gridBounds.minZ) * gridConfig.cellSize;
-        return [worldX, y * gridConfig.cellSize, worldZ];
-      },
+    const drawableProjector = React7.useMemo(
+      () => create3DProjector({
+        cellSize: gridConfig.cellSize,
+        offsetX: -gridBounds.minX * gridConfig.cellSize,
+        offsetZ: -gridBounds.minZ * gridConfig.cellSize
+      }),
       [gridBounds, gridConfig]
     );
-    React10.useImperativeHandle(ref, () => ({
+    React7.useImperativeHandle(ref, () => ({
       getCameraPosition: () => {
         if (controlsRef.current) {
           const pos = controlsRef.current.object.position;
@@ -2352,43 +1920,9 @@ var GameCanvas3D = React10.forwardRef(
           return canvas.toDataURL("image/png");
         }
         return null;
-      },
-      export: () => ({
-        tiles,
-        units,
-        features
-      })
+      }
     }));
-    const handleTileClick = React10.useCallback(
-      (tile, event) => {
-        eventHandlers.handleTileClick(tile, event);
-      },
-      [eventHandlers]
-    );
-    const handleUnitClick = React10.useCallback(
-      (unit, event) => {
-        eventHandlers.handleUnitClick(unit, event);
-      },
-      [eventHandlers]
-    );
-    const handleFeatureClick = React10.useCallback(
-      (feature, event) => {
-        if (event) {
-          eventHandlers.handleFeatureClick(feature, event);
-        }
-      },
-      [eventHandlers]
-    );
-    const handleTileHover = React10.useCallback(
-      (tile, event) => {
-        setHoveredTile(tile);
-        if (event) {
-          eventHandlers.handleTileHover(tile, event);
-        }
-      },
-      [eventHandlers]
-    );
-    const cameraConfig = React10.useMemo(() => {
+    const cameraConfig = React7.useMemo(() => {
       const size = Math.max(
         gridBounds.maxX - gridBounds.minX,
         gridBounds.maxZ - gridBounds.minZ,
@@ -2400,65 +1934,45 @@ var GameCanvas3D = React10.forwardRef(
       const d = size * 1;
       switch (cameraMode) {
         case "isometric":
-          return {
-            position: [cx + d, d * 0.8, cz + d],
-            fov: 45
-          };
+          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
-          };
+          return { position: [cx, d * 2, cz + d * 0.35], fov: 45 };
         case "follow":
-          return {
-            position: [cx, d * 0.5, cz + d],
-            fov: 45
-          };
+          return { position: [cx, d * 0.5, cz + d], fov: 45 };
         case "perspective":
         default:
-          return {
-            position: [cx + d, d, cz + d],
-            fov: 45
-          };
+          return { position: [cx + d, d, cz + d], fov: 45 };
       }
     }, [cameraMode, gridBounds]);
-    const followTarget = React10.useMemo(() => {
-      if (player) {
-        return [
-          (player.x + (player.width ?? 32) / 2) / pixelsPerUnit,
-          (worldHeight - player.y - (player.height ?? 48) / 2) / pixelsPerUnit,
-          0
-        ];
-      }
-      const selected = units.find((u) => u.id === selectedUnitId);
-      if (selected) {
-        const sx = selected.x ?? selected.position?.x ?? 0;
-        const sz = selected.z ?? selected.y ?? selected.position?.y ?? 0;
-        return [
-          (sx - gridBounds.minX) * gridConfig.cellSize,
-          0,
-          (sz - gridBounds.minZ) * gridConfig.cellSize
-        ];
-      }
+    const followWorld = React7.useMemo(() => {
+      if (followTarget) return drawableProjector.toWorld(followTarget);
       return cameraTarget;
-    }, [player, pixelsPerUnit, worldHeight, units, selectedUnitId, gridBounds, gridConfig, cameraTarget]);
-    const followOffset = React10.useMemo(() => {
-      if (cameraMode === "chase") {
-        const selected = units.find((u) => u.id === selectedUnitId);
-        const h = selected?.heading ?? 0;
-        const dist = 7;
-        const height = 4;
-        return [-Math.sin(h) * dist, height, -Math.cos(h) * dist];
+    }, [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 hitId = hitIndex.get(`${cell.x},${cell.y}`);
+      if (hitId !== void 0 && unitClickEvent) {
+        eventBus.emit(`UI:${unitClickEvent}`, { unitId: hitId, x: cell.x, z: cell.y });
+      } else if (tileClickEvent) {
+        eventBus.emit(`UI:${tileClickEvent}`, { x: cell.x, z: cell.y });
       }
-      return player ? [0, 2, 9] : [5, 7, 5];
-    }, [cameraMode, units, selectedUnitId, player]);
-    if (externalLoading || assetsLoading && preloadAssets.length > 0) {
+    }, [tileClickEvent, unitClickEvent, gridConfig, gridBounds, hitIndex, eventBus]);
+    if (externalLoading) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Canvas3DLoadingState,
         {
-          progress,
-          loaded,
-          total,
+          progress: 1,
+          loaded: 1,
+          total: 1,
           message: loadingMessage,
           className
         }
@@ -2476,7 +1990,7 @@ var GameCanvas3D = React10.forwardRef(
       {
         onError: (err) => setInternalError(err.message),
         onReset: () => setInternalError(null),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
+        children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             ref: containerRef,
@@ -2485,193 +1999,103 @@ var GameCanvas3D = React10.forwardRef(
             "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.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
                     }
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(CameraController3D, { onCameraChange: eventHandlers.handleCameraChange }),
-                    (cameraMode === "follow" || cameraMode === "chase") && /* @__PURE__ */ jsxRuntime.jsx(
-                      FollowCamera3D,
-                      {
-                        target: followTarget,
-                        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
-                      }
-                    ),
-                    player ? (
-                      /* Side-scroller mode — LOLO-owned pixel space mapped to world units */
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        SideScene3D,
-                        {
-                          player,
-                          platforms,
-                          worldHeight,
-                          ppu: pixelsPerUnit,
-                          playerSprite,
-                          tileSprites,
-                          interpolate: interpolateUnits,
-                          features,
-                          events,
-                          assetManifest
-                        }
-                      )
-                    ) : /* @__PURE__ */ jsxRuntime.jsxs("group", { children: [
-                      tiles.map((tile, index) => {
-                        const position = gridToWorld2(
-                          tile.x,
-                          tile.z ?? tile.y ?? 0,
-                          tile.elevation ?? 0
-                        );
-                        const key = tile.id ?? `tile-${index}`;
-                        if (CustomTileRenderer) {
-                          return /* @__PURE__ */ jsxRuntime.jsx(CustomTileRenderer, { tile, position }, key);
-                        }
-                        return /* @__PURE__ */ jsxRuntime.jsx(
-                          TileMesh3D,
-                          {
-                            tile,
-                            position,
-                            model: tile.modelUrl ?? assetManifest?.terrains?.[tile.terrain ?? tile.type ?? ""],
-                            isSelected: tile.id ? selectedTileIds.includes(tile.id) : false,
-                            isHovered: hoveredTile?.id === tile.id,
-                            isValidMove: validMoves.some((m) => m.x === tile.x && m.z === (tile.z ?? tile.y ?? 0)),
-                            isAttackTarget: attackTargets.some((m) => m.x === tile.x && m.z === (tile.z ?? tile.y ?? 0)),
-                            onTileClick: handleTileClick,
-                            onTileHover: handleTileHover
-                          },
-                          key
-                        );
-                      }),
-                      features.map((feature, index) => {
-                        const position = gridToWorld2(
-                          feature.x,
-                          feature.z ?? feature.y ?? 0,
-                          (feature.elevation ?? 0) + TILE_TOP_OFFSET
-                        );
-                        const key = feature.id ?? `feature-${index}`;
-                        if (CustomFeatureRenderer) {
-                          return /* @__PURE__ */ jsxRuntime.jsx(CustomFeatureRenderer, { feature, position }, key);
-                        }
-                        return /* @__PURE__ */ jsxRuntime.jsx(
-                          FeatureMesh3D,
-                          {
-                            feature,
-                            position,
-                            model: feature.assetUrl ?? assetManifest?.features?.[feature.type],
-                            onFeatureClick: handleFeatureClick
-                          },
-                          key
-                        );
-                      }),
-                      units.map((unit) => {
-                        const position = gridToWorld2(
-                          unit.x ?? unit.position?.x ?? 0,
-                          unit.z ?? unit.y ?? unit.position?.y ?? 0,
-                          (unit.elevation ?? 0) + TILE_TOP_OFFSET
-                        );
-                        return /* @__PURE__ */ jsxRuntime.jsx(LerpedGroup3D, { target: position, enabled: interpolateUnits, children: CustomUnitRenderer ? /* @__PURE__ */ jsxRuntime.jsx(CustomUnitRenderer, { unit, position: [0, 0, 0] }) : /* @__PURE__ */ jsxRuntime.jsx(
-                          UnitMesh3D,
+                  ),
+                  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",
                           {
-                            unit,
-                            position: [0, 0, 0],
-                            model: unit.modelUrl ?? assetManifest?.units?.[unit.unitType ?? ""],
-                            isSelected: selectedUnitId === unit.id,
-                            unitScale,
-                            cellSize: gridConfig.cellSize,
-                            resolveUnitFrame,
-                            onUnitClick: handleUnitClick
+                            args: [
+                              (gridBounds.maxX - gridBounds.minX + 4) * gridConfig.cellSize,
+                              (gridBounds.maxZ - gridBounds.minZ + 4) * gridConfig.cellSize
+                            ]
                           }
-                        ) }, unit.id);
-                      }),
-                      events.map((ev, i) => {
-                        const position = gridToWorld2(ev.x, ev.z ?? ev.y ?? 0, 0);
-                        return /* @__PURE__ */ jsxRuntime.jsx(
-                          EventMarker3D,
-                          {
-                            event: ev,
-                            position: [position[0], position[1] + 1.4, position[2]]
-                          },
-                          ev.id ?? `ev-${i}`
-                        );
-                      })
-                    ] }),
-                    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
-                      }
-                    )
-                  ]
-                }
-              ),
-              showCoordinates && hoveredTile && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "game-canvas-3d__coordinates", children: [
-                "X: ",
-                hoveredTile.x,
-                ", Z: ",
-                hoveredTile.z ?? hoveredTile.y ?? 0
-              ] }),
-              showTileInfo && hoveredTile && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "game-canvas-3d__tile-info", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tile-info__type", children: hoveredTile.type }),
-                hoveredTile.terrain && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tile-info__terrain", children: hoveredTile.terrain })
-              ] })
-            ]
+                        ),
+                        /* @__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
+                    }
+                  )
+                ]
+              }
+            )
           }
         )
       }
@@ -2679,1086 +2103,357 @@ var GameCanvas3D = React10.forwardRef(
   }
 );
 GameCanvas3D.displayName = "GameCanvas3D";
-var DEFAULT_FAMILY = "lucide";
-var VALID_FAMILIES = [
-  "lucide",
-  "phosphor-outline",
-  "phosphor-fill",
-  "phosphor-duotone",
-  "tabler",
-  "fa-solid"
-];
-function getCurrentIconFamily() {
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    return DEFAULT_FAMILY;
-  }
-  const raw = getComputedStyle(document.documentElement).getPropertyValue("--icon-family").trim().replace(/^["']|["']$/g, "");
-  return VALID_FAMILIES.includes(raw) ? raw : DEFAULT_FAMILY;
-}
-var cachedFamily = null;
-var listeners = /* @__PURE__ */ new Set();
-var observer = null;
-function ensureObserver() {
-  if (typeof window === "undefined" || observer) return;
-  observer = new MutationObserver(() => {
-    const next = getCurrentIconFamily();
-    if (next !== cachedFamily) {
-      cachedFamily = next;
-      listeners.forEach((fn) => fn());
-    }
-  });
-  observer.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ["data-theme", "style"]
-  });
-  cachedFamily = getCurrentIconFamily();
-}
-function subscribeIconFamily(notify) {
-  ensureObserver();
-  listeners.add(notify);
-  return () => {
-    listeners.delete(notify);
-  };
-}
-function getIconFamilySnapshot() {
-  if (cachedFamily !== null) return cachedFamily;
-  cachedFamily = getCurrentIconFamily();
-  return cachedFamily;
-}
-function getIconFamilyServerSnapshot() {
-  return DEFAULT_FAMILY;
-}
-function useIconFamily() {
-  return React10.useSyncExternalStore(
-    subscribeIconFamily,
-    getIconFamilySnapshot,
-    getIconFamilyServerSnapshot
-  );
-}
-function kebabToPascal(name) {
-  return name.split("-").map((part) => {
-    if (/^\d+$/.test(part)) return part;
-    return part.charAt(0).toUpperCase() + part.slice(1);
-  }).join("");
-}
-var libPromises = /* @__PURE__ */ new Map();
-function loadLib(key, importer) {
-  let p = libPromises.get(key);
-  if (!p) {
-    p = importer();
-    libPromises.set(key, p);
-  }
-  return p;
-}
-function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
-  const Lazy = React10__namespace.default.lazy(async () => {
-    const lib = await loadLib(libKey, importer);
-    const Comp = pick(lib);
-    if (!Comp) {
-      warnFallback(fallbackName, family);
-      return { default: makeLucideAdapter(fallbackName, true) };
-    }
-    return { default: Comp };
-  });
-  const Wrapped = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-    React10__namespace.default.Suspense,
-    {
-      fallback: /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          "aria-hidden": true,
-          className: props.className,
-          style: { display: "inline-block", ...props.style }
-        }
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(Lazy, { ...props })
-    }
-  );
-  Wrapped.displayName = `Lazy.${libKey}.${fallbackName}`;
-  return Wrapped;
-}
-var lucideAliases = {
-  close: LucideIcons__namespace.X,
-  trash: LucideIcons__namespace.Trash2,
-  loader: LucideIcons__namespace.Loader2,
-  stop: LucideIcons__namespace.Square,
-  volume: LucideIcons__namespace.Volume2,
-  "volume-off": LucideIcons__namespace.VolumeX,
-  refresh: LucideIcons__namespace.RefreshCw,
-  share: LucideIcons__namespace.Share2,
-  "sort-asc": LucideIcons__namespace.ArrowUpNarrowWide,
-  "sort-desc": LucideIcons__namespace.ArrowDownNarrowWide
-};
-function isComponentLike(v) {
-  return v != null && (typeof v === "function" || typeof v === "object");
-}
-function resolveLucide(name) {
-  if (lucideAliases[name]) return lucideAliases[name];
-  const pascal = kebabToPascal(name);
-  const lucideMap = LucideIcons__namespace;
-  const direct = lucideMap[pascal];
-  if (isComponentLike(direct)) return direct;
-  const asIs = lucideMap[name];
-  if (isComponentLike(asIs)) return asIs;
-  return LucideIcons__namespace.HelpCircle;
-}
-var phosphorAliases = {
-  // lucide name → phosphor PascalCase name
-  // Actions
-  plus: "Plus",
-  minus: "Minus",
-  x: "X",
-  check: "Check",
-  close: "X",
-  edit: "PencilSimple",
-  pencil: "PencilSimple",
-  trash: "Trash",
-  save: "FloppyDisk",
-  copy: "Copy",
-  share: "Share",
-  send: "PaperPlaneRight",
-  download: "DownloadSimple",
-  upload: "UploadSimple",
-  archive: "Archive",
-  refresh: "ArrowsClockwise",
-  loader: "CircleNotch",
-  link: "Link",
-  paperclip: "Paperclip",
-  // Navigation
-  "chevron-down": "CaretDown",
-  "chevron-up": "CaretUp",
-  "chevron-left": "CaretLeft",
-  "chevron-right": "CaretRight",
-  "arrow-up": "ArrowUp",
-  "arrow-down": "ArrowDown",
-  "arrow-left": "ArrowLeft",
-  "arrow-right": "ArrowRight",
-  menu: "List",
-  more: "DotsThree",
-  "more-vertical": "DotsThreeVertical",
-  "more-horizontal": "DotsThree",
-  external: "ArrowSquareOut",
-  "external-link": "ArrowSquareOut",
-  // Files
-  file: "File",
-  "file-text": "FileText",
-  "file-plus": "FilePlus",
-  "file-minus": "FileMinus",
-  folder: "Folder",
-  "folder-open": "FolderOpen",
-  document: "FileText",
-  // Charts
-  "bar-chart": "ChartBar",
-  "bar-chart-2": "ChartBar",
-  "bar-chart-3": "ChartBar",
-  "line-chart": "ChartLine",
-  "pie-chart": "ChartPie",
-  activity: "Pulse",
-  "trending-up": "TrendUp",
-  "trending-down": "TrendDown",
-  // Messages
-  message: "ChatCircle",
-  "message-circle": "ChatCircle",
-  "message-square": "ChatText",
-  "messages-square": "ChatsCircle",
-  comment: "ChatCircle",
-  comments: "ChatsCircle",
-  inbox: "Tray",
-  mail: "Envelope",
-  envelope: "Envelope",
-  // Status
-  "alert-circle": "WarningCircle",
-  "alert-triangle": "Warning",
-  "check-circle": "CheckCircle",
-  "x-circle": "XCircle",
-  info: "Info",
-  "help-circle": "Question",
-  "life-buoy": "Lifebuoy",
-  lifebuoy: "Lifebuoy",
-  warning: "Warning",
-  error: "WarningCircle",
-  // Media
-  image: "Image",
-  video: "VideoCamera",
-  film: "FilmStrip",
-  camera: "Camera",
-  music: "MusicNote",
-  play: "Play",
-  pause: "Pause",
-  stop: "Stop",
-  "skip-forward": "SkipForward",
-  "skip-back": "SkipBack",
-  volume: "SpeakerHigh",
-  "volume-2": "SpeakerHigh",
-  "volume-x": "SpeakerX",
-  mic: "Microphone",
-  "mic-off": "MicrophoneSlash",
-  // People
-  user: "User",
-  users: "Users",
-  "user-plus": "UserPlus",
-  "user-check": "UserCheck",
-  // Time
-  calendar: "Calendar",
-  clock: "Clock",
-  timer: "Timer",
-  // Location
-  map: "MapTrifold",
-  "map-pin": "MapPin",
-  navigation: "NavigationArrow",
-  compass: "Compass",
-  globe: "Globe",
-  target: "Target",
-  // Project / layout
-  kanban: "Kanban",
-  list: "List",
-  table: "Table",
-  grid: "GridFour",
-  layout: "Layout",
-  columns: "Columns",
-  rows: "Rows",
-  // Misc
-  bell: "Bell",
-  bookmark: "Bookmark",
-  briefcase: "Briefcase",
-  flag: "Flag",
-  tag: "Tag",
-  tags: "Tag",
-  star: "Star",
-  heart: "Heart",
-  home: "House",
-  settings: "Gear",
-  eye: "Eye",
-  "eye-off": "EyeSlash",
-  lock: "Lock",
-  unlock: "LockOpen",
-  key: "Key",
-  shield: "Shield",
-  search: "MagnifyingGlass",
-  filter: "Funnel",
-  "sort-asc": "SortAscending",
-  "sort-desc": "SortDescending",
-  zap: "Lightning",
-  sparkles: "Sparkle",
-  // Code
-  code: "Code",
-  terminal: "Terminal",
-  database: "Database",
-  server: "HardDrives",
-  cloud: "Cloud",
-  wifi: "WifiHigh",
-  package: "Package",
-  box: "Package",
-  // Theme
-  sun: "Sun",
-  moon: "Moon",
-  // Phone
-  phone: "Phone",
-  printer: "Printer",
-  // Hierarchy
-  tree: "Tree",
-  network: "Network"
+var DEFAULT_CONFIG = {
+  cellSize: 1,
+  offsetX: 0,
+  offsetZ: 0,
+  elevation: 0
 };
-function resolvePhosphor(name, weight, family) {
-  const target = phosphorAliases[name] ?? kebabToPascal(name);
-  return lazyFamilyIcon(
-    "phosphor",
-    () => import('@phosphor-icons/react'),
-    (lib) => {
-      const PhosphorComp = lib[target];
-      if (!PhosphorComp) return null;
-      const Component2 = PhosphorComp;
-      const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-        Component2,
-        {
-          weight,
-          className: props.className,
-          style: props.style,
-          size: props.size ?? "1em"
-        }
-      );
-      Adapter.displayName = `Phosphor.${target}.${weight}`;
-      return Adapter;
-    },
-    name,
-    family
+function gridToWorld(gridX, gridZ, config = DEFAULT_CONFIG) {
+  const opts = { ...DEFAULT_CONFIG, ...config };
+  return new THREE6__namespace.Vector3(
+    gridX * opts.cellSize + opts.offsetX,
+    opts.elevation,
+    gridZ * opts.cellSize + opts.offsetZ
   );
 }
-var tablerAliases = {
-  // lucide name → tabler suffix (after the `Icon` prefix)
-  // Actions
-  plus: "Plus",
-  minus: "Minus",
-  x: "X",
-  check: "Check",
-  close: "X",
-  edit: "Pencil",
-  pencil: "Pencil",
-  trash: "Trash",
-  save: "DeviceFloppy",
-  copy: "Copy",
-  share: "Share",
-  send: "Send",
-  download: "Download",
-  upload: "Upload",
-  archive: "Archive",
-  refresh: "Refresh",
-  loader: "Loader2",
-  link: "Link",
-  paperclip: "Paperclip",
-  external: "ExternalLink",
-  "external-link": "ExternalLink",
-  // Navigation
-  "chevron-down": "ChevronDown",
-  "chevron-up": "ChevronUp",
-  "chevron-left": "ChevronLeft",
-  "chevron-right": "ChevronRight",
-  "arrow-down": "ArrowDown",
-  "arrow-up": "ArrowUp",
-  "arrow-left": "ArrowLeft",
-  "arrow-right": "ArrowRight",
-  menu: "Menu2",
-  more: "Dots",
-  "more-vertical": "DotsVertical",
-  // Files
-  file: "File",
-  "file-text": "FileText",
-  "file-plus": "FilePlus",
-  "file-check": "FileCheck",
-  "file-minus": "FileMinus",
-  folder: "Folder",
-  "folder-open": "FolderOpen",
-  document: "FileText",
-  // Charts
-  "bar-chart": "ChartBar",
-  "bar-chart-2": "ChartBar",
-  "bar-chart-3": "ChartBar",
-  "line-chart": "ChartLine",
-  "pie-chart": "ChartPie",
-  activity: "Activity",
-  "trending-up": "TrendingUp",
-  "trending-down": "TrendingDown",
-  // Messages
-  message: "Message",
-  "message-circle": "MessageCircle",
-  "message-square": "Message2",
-  "messages-square": "Messages",
-  comment: "Message",
-  comments: "Messages",
-  inbox: "Inbox",
-  mail: "Mail",
-  envelope: "Mail",
-  // Status
-  "alert-circle": "AlertCircle",
-  "alert-triangle": "AlertTriangle",
-  "check-circle": "CircleCheck",
-  "x-circle": "CircleX",
-  info: "InfoCircle",
-  "help-circle": "HelpCircle",
-  "life-buoy": "Lifebuoy",
-  warning: "AlertTriangle",
-  error: "AlertOctagon",
-  // Media
-  image: "Photo",
-  video: "Video",
-  camera: "Camera",
-  music: "Music",
-  play: "PlayerPlay",
-  pause: "PlayerPause",
-  stop: "PlayerStop",
-  "skip-forward": "PlayerSkipForward",
-  "skip-back": "PlayerSkipBack",
-  volume: "Volume",
-  "volume-2": "Volume",
-  "volume-x": "VolumeOff",
-  mic: "Microphone",
-  "mic-off": "MicrophoneOff",
-  // People
-  user: "User",
-  users: "Users",
-  "user-plus": "UserPlus",
-  "user-check": "UserCheck",
-  // Time
-  calendar: "Calendar",
-  clock: "Clock",
-  timer: "Hourglass",
-  // Location
-  map: "Map",
-  "map-pin": "MapPin",
-  navigation: "Navigation",
-  compass: "Compass",
-  globe: "World",
-  target: "Target",
-  // Project / layout
-  kanban: "LayoutKanban",
-  list: "List",
-  table: "Table",
-  grid: "LayoutGrid",
-  layout: "Layout",
-  columns: "LayoutColumns",
-  rows: "LayoutRows",
-  // Misc
-  bell: "Bell",
-  bookmark: "Bookmark",
-  briefcase: "Briefcase",
-  flag: "Flag",
-  tag: "Tag",
-  tags: "Tags",
-  star: "Star",
-  heart: "Heart",
-  home: "Home",
-  settings: "Settings",
-  eye: "Eye",
-  "eye-off": "EyeOff",
-  lock: "Lock",
-  unlock: "LockOpen",
-  key: "Key",
-  shield: "Shield",
-  search: "Search",
-  filter: "Filter",
-  "sort-asc": "SortAscending",
-  "sort-desc": "SortDescending",
-  zap: "Bolt",
-  sparkles: "Sparkles",
-  // Code / data
-  code: "Code",
-  terminal: "Terminal",
-  database: "Database",
-  server: "Server",
-  cloud: "Cloud",
-  wifi: "Wifi",
-  package: "Package",
-  box: "Box",
-  // Theme
-  sun: "Sun",
-  moon: "Moon",
-  // Phone
-  phone: "Phone",
-  printer: "Printer",
-  // Hierarchy
-  tree: "Hierarchy",
-  network: "Network"
-};
-function resolveTabler(name, family) {
-  const suffix = tablerAliases[name] ?? kebabToPascal(name);
-  const target = `Icon${suffix}`;
-  return lazyFamilyIcon(
-    "tabler",
-    () => import('@tabler/icons-react'),
-    (lib) => {
-      const TablerComp = lib[target];
-      if (!TablerComp) return null;
-      const Component2 = TablerComp;
-      const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-        Component2,
-        {
-          stroke: props.strokeWidth ?? 1.5,
-          className: props.className,
-          style: props.style,
-          size: props.size ?? 24
-        }
-      );
-      Adapter.displayName = `Tabler.${target}`;
-      return Adapter;
-    },
-    name,
-    family
-  );
+function worldToGrid(worldX, worldZ, config = DEFAULT_CONFIG) {
+  const opts = { ...DEFAULT_CONFIG, ...config };
+  return {
+    x: Math.round((worldX - opts.offsetX) / opts.cellSize),
+    z: Math.round((worldZ - opts.offsetZ) / opts.cellSize)
+  };
 }
-var faAliases = {
-  // lucide name → fa-solid suffix (after the `Fa` prefix).
-  // react-icons/fa ships FontAwesome 5 — names like `FaFileText` don't exist
-  // (FA renamed to `FaFileAlt`). When you see a console.warn from
-  // [iconFamily] about an unmapped lucide name in this family, add the
-  // closest FA5 sibling here so the fallback stays in-family.
-  search: "Search",
-  close: "Times",
-  x: "Times",
-  loader: "Spinner",
-  refresh: "Sync",
-  "sort-asc": "SortAmountUp",
-  "sort-desc": "SortAmountDown",
-  "chevron-down": "ChevronDown",
-  "chevron-up": "ChevronUp",
-  "chevron-left": "ChevronLeft",
-  "chevron-right": "ChevronRight",
-  "help-circle": "QuestionCircle",
-  "alert-triangle": "ExclamationTriangle",
-  "alert-circle": "ExclamationCircle",
-  "check-circle": "CheckCircle",
-  "x-circle": "TimesCircle",
-  edit: "Edit",
-  pencil: "PencilAlt",
-  trash: "Trash",
-  send: "PaperPlane",
-  share: "ShareAlt",
-  external: "ExternalLinkAlt",
-  plus: "Plus",
-  minus: "Minus",
-  check: "Check",
-  star: "Star",
-  heart: "Heart",
-  home: "Home",
-  user: "User",
-  users: "Users",
-  "user-plus": "UserPlus",
-  "user-check": "UserCheck",
-  settings: "Cog",
-  menu: "Bars",
-  "arrow-up": "ArrowUp",
-  "arrow-down": "ArrowDown",
-  "arrow-left": "ArrowLeft",
-  "arrow-right": "ArrowRight",
-  copy: "Copy",
-  download: "Download",
-  upload: "Upload",
-  filter: "Filter",
-  calendar: "Calendar",
-  clock: "Clock",
-  bell: "Bell",
-  mail: "Envelope",
-  envelope: "Envelope",
-  lock: "Lock",
-  unlock: "LockOpen",
-  eye: "Eye",
-  "eye-off": "EyeSlash",
-  more: "EllipsisH",
-  "more-vertical": "EllipsisV",
-  info: "InfoCircle",
-  warning: "ExclamationTriangle",
-  error: "ExclamationCircle",
-  // Time
-  timer: "Hourglass",
-  // Files (FA renamed FileText → FileAlt)
-  file: "File",
-  "file-text": "FileAlt",
-  "file-plus": "FileMedical",
-  "file-minus": "FileExcel",
-  "file-check": "FileSignature",
-  document: "FileAlt",
-  // Charts (lucide BarChart2 / BarChart3 → FA ChartBar)
-  "bar-chart": "ChartBar",
-  "bar-chart-2": "ChartBar",
-  "bar-chart-3": "ChartBar",
-  "line-chart": "ChartLine",
-  "pie-chart": "ChartPie",
-  activity: "ChartLine",
-  "trending-up": "ChartLine",
-  "trending-down": "ChartLine",
-  // Messages (lucide MessageCircle/MessageSquare → FA CommentDots/CommentAlt)
-  message: "Comment",
-  "message-circle": "CommentDots",
-  "message-square": "CommentAlt",
-  "messages-square": "Comments",
-  comment: "Comment",
-  comments: "Comments",
-  inbox: "Inbox",
-  // Support / help
-  "life-buoy": "LifeRing",
-  lifebuoy: "LifeRing",
-  // Project / kanban (FA has no kanban; closest semantic is Tasks/Columns)
-  kanban: "Tasks",
-  columns: "Columns",
-  rows: "Bars",
-  layout: "ThLarge",
-  grid: "Th",
-  list: "List",
-  table: "Table",
-  // Storage / folders
-  folder: "Folder",
-  "folder-open": "FolderOpen",
-  archive: "Archive",
-  bookmark: "Bookmark",
-  briefcase: "Briefcase",
-  package: "Box",
-  box: "Box",
-  // Map / location
-  map: "Map",
-  "map-pin": "MapMarkerAlt",
-  navigation: "LocationArrow",
-  compass: "Compass",
-  globe: "Globe",
-  target: "Bullseye",
-  // Media
-  image: "Image",
-  video: "Video",
-  film: "Film",
-  camera: "Camera",
-  music: "Music",
-  play: "Play",
-  pause: "Pause",
-  stop: "Stop",
-  "skip-forward": "Forward",
-  "skip-back": "Backward",
-  volume: "VolumeUp",
-  "volume-2": "VolumeUp",
-  "volume-x": "VolumeMute",
-  mic: "Microphone",
-  "mic-off": "MicrophoneSlash",
-  phone: "Phone",
-  // Code / data
-  code: "Code",
-  terminal: "Terminal",
-  database: "Database",
-  server: "Server",
-  cloud: "Cloud",
-  wifi: "Wifi",
-  // Security
-  shield: "ShieldAlt",
-  key: "Key",
-  // Misc actions
-  printer: "Print",
-  save: "Save",
-  link: "Link",
-  unlink: "Unlink",
-  paperclip: "Paperclip",
-  flag: "Flag",
-  tag: "Tag",
-  tags: "Tags",
-  zap: "Bolt",
-  sparkles: "Magic",
-  // Theme
-  sun: "Sun",
-  moon: "Moon",
-  // Hierarchy (FA has no Tree icon for hierarchies; Sitemap is the org-chart icon)
-  tree: "Sitemap",
-  network: "NetworkWired"
-};
-function resolveFa(name, family) {
-  const suffix = faAliases[name] ?? kebabToPascal(name);
-  const target = `Fa${suffix}`;
-  return lazyFamilyIcon(
-    "fa",
-    () => import('react-icons/fa'),
-    (lib) => {
-      const FaComp = lib[target];
-      if (!FaComp) return null;
-      const Component2 = FaComp;
-      const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-        Component2,
-        {
-          className: props.className,
-          style: props.style,
-          size: props.size ?? "1em"
-        }
-      );
-      Adapter.displayName = `Fa.${target}`;
-      return Adapter;
-    },
-    name,
-    family
-  );
+function raycastToPlane(camera, mouseX, mouseY, planeY = 0) {
+  const raycaster = new THREE6__namespace.Raycaster();
+  const mouse = new THREE6__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 intersection = raycaster.ray.intersectPlane(plane, target);
+  return intersection ? target : null;
 }
-var warned = /* @__PURE__ */ new Set();
-function warnFallback(name, family) {
-  const key = `${family}::${name}`;
-  if (warned.has(key)) return;
-  warned.add(key);
-  if (typeof console !== "undefined") {
-    console.warn(
-      `[iconFamily] No '${name}' mapping in family '${family}'; falling back to lucide. Add an alias in lib/iconFamily.ts.`
-    );
-  }
+function raycastToObjects(camera, mouseX, mouseY, objects) {
+  const raycaster = new THREE6__namespace.Raycaster();
+  const mouse = new THREE6__namespace.Vector2(mouseX, mouseY);
+  raycaster.setFromCamera(mouse, camera);
+  const intersects = raycaster.intersectObjects(objects, true);
+  return intersects.length > 0 ? intersects[0] : null;
 }
-function makeLucideAdapter(name, isFallback = false) {
-  const LucideComp = resolveLucide(name);
-  const Adapter = (props) => {
-    const stroke = props.strokeWidth ?? (isFallback ? 2 : void 0);
-    const style = isFallback ? { ...props.style ?? {}, strokeWidth: stroke ?? 2 } : props.style;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      LucideComp,
-      {
-        className: props.className,
-        strokeWidth: stroke,
-        style,
-        size: props.size
-      }
-    );
-  };
-  Adapter.displayName = `Lucide.${name}${isFallback ? ".fallback" : ""}`;
-  return Adapter;
+function gridDistance(a, b) {
+  const dx = b.x - a.x;
+  const dz = b.z - a.z;
+  return Math.sqrt(dx * dx + dz * dz);
 }
-function resolveIconForFamily(name, family) {
-  switch (family) {
-    case "lucide":
-      return makeLucideAdapter(name, false);
-    // Non-lucide families resolve to a lazy, Suspense-wrapped component that
-    // dynamic-imports the library on first render and falls back to lucide
-    // internally when the family lacks the icon (see lazyFamilyIcon).
-    case "phosphor-outline":
-      return resolvePhosphor(name, "regular", family);
-    case "phosphor-fill":
-      return resolvePhosphor(name, "fill", family);
-    case "phosphor-duotone":
-      return resolvePhosphor(name, "duotone", family);
-    case "tabler":
-      return resolveTabler(name, family);
-    case "fa-solid":
-      return resolveFa(name, family);
-  }
+function gridManhattanDistance(a, b) {
+  return Math.abs(b.x - a.x) + Math.abs(b.z - a.z);
 }
-var colorTokenClasses = {
-  primary: "text-primary",
-  secondary: "text-secondary",
-  success: "text-success",
-  warning: "text-warning",
-  error: "text-error",
-  muted: "text-muted-foreground"
-};
-var sizeClasses = {
-  xs: "w-3 h-3",
-  sm: "w-4 h-4",
-  md: "h-icon-default w-icon-default",
-  lg: "w-6 h-6",
-  xl: "w-8 h-8"
-};
-var animationClasses = {
-  none: "",
-  spin: "animate-spin",
-  pulse: "animate-pulse"
-};
-var Icon = ({
-  icon,
-  name,
-  size = "md",
-  color,
-  animation = "none",
-  className,
-  strokeWidth,
-  style
-}) => {
-  const directIcon = typeof icon === "string" ? void 0 : icon;
-  const effectiveName = typeof icon === "string" ? icon : name;
-  const family = useIconFamily();
-  const RenderedComponent = React10__namespace.default.useMemo(() => {
-    if (directIcon) return null;
-    return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
-  }, [directIcon, effectiveName, family]);
-  const effectiveStrokeWidth = strokeWidth ?? void 0;
-  const inlineStyle = {
-    ...effectiveStrokeWidth === void 0 ? { strokeWidth: "var(--icon-stroke-width, 2)" } : {},
-    ...style
-  };
-  const resolvedColor = color ? color in colorTokenClasses ? colorTokenClasses[color] : color : "text-current";
-  const composedClassName = cn(
-    sizeClasses[size],
-    animationClasses[animation],
-    resolvedColor,
-    className
-  );
-  if (directIcon) {
-    const Direct = directIcon;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Direct,
-      {
-        className: composedClassName,
-        strokeWidth: effectiveStrokeWidth,
-        style: inlineStyle
-      }
-    );
-  }
-  if (RenderedComponent) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RenderedComponent,
-      {
-        className: composedClassName,
-        strokeWidth: effectiveStrokeWidth,
-        style: inlineStyle
-      }
+function getNeighbors(x, z, includeDiagonal = false) {
+  const neighbors = [
+    { x: x + 1, z },
+    { x: x - 1, z },
+    { x, z: z + 1 },
+    { x, z: z - 1 }
+  ];
+  if (includeDiagonal) {
+    neighbors.push(
+      { x: x + 1, z: z + 1 },
+      { x: x - 1, z: z - 1 },
+      { x: x + 1, z: z - 1 },
+      { x: x - 1, z: z + 1 }
     );
   }
-  const Fallback = LucideIcons__namespace.HelpCircle;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Fallback,
-    {
-      className: composedClassName,
-      strokeWidth: effectiveStrokeWidth,
-      style: inlineStyle
-    }
-  );
-};
-Icon.displayName = "Icon";
-
-// lib/atlasSlice.ts
-var atlasCache = /* @__PURE__ */ new Map();
-function isTilesheet(a) {
-  return typeof a.tileWidth === "number";
+  return neighbors;
 }
-function getAtlas(url, onReady) {
-  if (atlasCache.has(url)) return atlasCache.get(url) ?? void 0;
-  atlasCache.set(url, void 0);
-  fetch(url).then((r) => r.json()).then((json) => {
-    atlasCache.set(url, json);
-    onReady();
-  }).catch(() => {
-    atlasCache.set(url, null);
-  });
-  return void 0;
+function isInBounds(x, z, bounds) {
+  return x >= bounds.minX && x <= bounds.maxX && z >= bounds.minZ && z <= bounds.maxZ;
 }
-function subRectFor(atlas, sprite) {
-  if (isTilesheet(atlas)) {
-    let col;
-    let row;
-    if (sprite.includes(",")) {
-      const [c, r] = sprite.split(",").map((n) => Number(n.trim()));
-      col = c;
-      row = r;
-    } else {
-      const i = Number(sprite);
-      if (!Number.isFinite(i)) return null;
-      col = i % atlas.columns;
-      row = Math.floor(i / atlas.columns);
+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 });
+      }
     }
-    if (!Number.isFinite(col) || !Number.isFinite(row) || col < 0 || row < 0 || col >= atlas.columns || row >= atlas.rows) return null;
-    const margin = atlas.margin ?? 0;
-    const spacing = atlas.spacing ?? 0;
-    return {
-      sx: margin + col * (atlas.tileWidth + spacing),
-      sy: margin + row * (atlas.tileHeight + spacing),
-      sw: atlas.tileWidth,
-      sh: atlas.tileHeight
-    };
   }
-  const st = atlas.subTextures[sprite];
-  if (!st) return null;
-  return { sx: st.x, sy: st.y, sw: st.width, sh: st.height };
-}
-function isAtlasAsset(asset) {
-  return !!asset && typeof asset.atlas === "string" && typeof asset.sprite === "string";
+  return cells;
 }
-var imageCache = /* @__PURE__ */ new Map();
-var imageWaiters = /* @__PURE__ */ new Map();
-function getSheetImage(url, onReady) {
-  const cached = imageCache.get(url);
-  if (cached) return cached;
-  (imageWaiters.get(url) ?? imageWaiters.set(url, /* @__PURE__ */ new Set()).get(url)).add(onReady);
-  if (!imageCache.has(url)) {
-    imageCache.set(url, null);
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    img.onload = () => {
-      imageCache.set(url, img);
-      imageWaiters.get(url)?.forEach((fn) => fn());
-      imageWaiters.delete(url);
-    };
-    img.src = url;
-  }
-  return null;
+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 AtlasImage({
-  asset,
-  size,
-  width,
-  height,
-  fill = false,
-  fit = "contain",
-  alt,
-  className,
-  style,
-  "aria-hidden": ariaHidden
-}) {
-  const [, bump] = React10__namespace.useReducer((x) => x + 1, 0);
-  const canvasRef = React10__namespace.useRef(null);
-  const sliced = isAtlasAsset(asset);
-  const atlas = sliced ? getAtlas(asset.atlas, bump) : void 0;
-  const img = sliced && asset?.url ? getSheetImage(asset.url, bump) : null;
-  const rect = sliced && atlas ? subRectFor(atlas, asset.sprite) : null;
-  React10__namespace.useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas || !img || !rect) return;
-    canvas.width = rect.sw;
-    canvas.height = rect.sh;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    ctx.imageSmoothingEnabled = false;
-    ctx.clearRect(0, 0, rect.sw, rect.sh);
-    ctx.drawImage(img, rect.sx, rect.sy, rect.sw, rect.sh, 0, 0, rect.sw, rect.sh);
-  }, [img, rect?.sx, rect?.sy, rect?.sw, rect?.sh]);
-  const w = fill ? "100%" : width ?? size;
-  const h = fill ? "100%" : height ?? size;
-  const boxStyle = {
-    ...fill ? { position: "absolute", inset: 0 } : {},
-    width: w,
-    height: h,
-    objectFit: fit,
-    imageRendering: "pixelated",
-    ...style
+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
   };
-  if (!asset?.url) return null;
-  if (sliced) {
-    if (!rect || !img) {
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: cn("inline-block flex-shrink-0", className), style: { ...boxStyle, objectFit: void 0 } });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "canvas",
-      {
-        ref: canvasRef,
-        role: ariaHidden ? void 0 : "img",
-        "aria-hidden": ariaHidden,
-        "aria-label": ariaHidden ? void 0 : alt ?? asset.name ?? asset.category ?? "",
-        className: cn("flex-shrink-0", className),
-        style: boxStyle
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "img",
-    {
-      src: asset.url,
-      alt: alt ?? asset.name ?? asset.category ?? "",
-      "aria-hidden": ariaHidden,
-      ...typeof w === "number" ? { width: w } : {},
-      ...typeof h === "number" ? { height: h } : {},
-      className: cn("flex-shrink-0", className),
-      style: boxStyle
-    }
+}
+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);
+  onRevealRef.current = onReveal;
+  onDismissRef.current = onDismiss;
+  const reveal = React7.useCallback(() => {
+    setRevealed((wasRevealed) => {
+      if (!wasRevealed) onRevealRef.current?.();
+      return true;
+    });
+  }, []);
+  const dismiss = React7.useCallback(() => {
+    setRevealed((wasRevealed) => {
+      if (wasRevealed) onDismissRef.current?.();
+      return false;
+    });
+  }, []);
+  const onPointerDown = React7.useCallback(
+    (e) => {
+      if (!enabled || e.pointerType === "mouse") return;
+      if (revealed) dismiss();
+      else reveal();
+    },
+    [enabled, revealed, reveal, dismiss]
   );
+  React7.useEffect(() => {
+    if (!revealed || typeof document === "undefined") return;
+    const onDocDown = (ev) => {
+      const target = ev.target;
+      if (!(target instanceof Node)) return;
+      const inside = (refs ?? []).some((r) => r.current?.contains(target));
+      if (!inside) dismiss();
+    };
+    const id = setTimeout(() => document.addEventListener("pointerdown", onDocDown), 0);
+    return () => {
+      clearTimeout(id);
+      document.removeEventListener("pointerdown", onDocDown);
+    };
+  }, [revealed, refs, dismiss]);
+  return { revealed, triggerProps: { onPointerDown }, reveal, dismiss };
 }
-AtlasImage.displayName = "AtlasImage";
-var variantStyles = {
-  primary: [
-    "bg-primary text-primary-foreground",
-    "border-none",
-    "shadow-sm",
-    "hover:bg-primary-hover hover:shadow-lg",
-    "active:scale-[var(--active-scale)] active:shadow-sm"
-  ].join(" "),
-  secondary: [
-    "bg-transparent text-accent",
-    "border border-accent",
-    "hover:bg-accent hover:text-white hover:border-accent",
-    "active:scale-[var(--active-scale)]"
-  ].join(" "),
-  ghost: [
-    "bg-transparent text-muted-foreground",
-    "border border-transparent",
-    "hover:text-primary-foreground hover:bg-primary hover:border-primary",
-    "active:scale-[var(--active-scale)]"
-  ].join(" "),
-  danger: [
-    "bg-surface text-error",
-    "border-[length:var(--border-width)] border-error",
-    "shadow-sm",
-    "hover:bg-error hover:text-error-foreground hover:shadow-lg",
-    "active:scale-[var(--active-scale)] active:shadow-sm"
-  ].join(" "),
-  success: [
-    "bg-surface text-success",
-    "border-[length:var(--border-width)] border-success",
-    "shadow-sm",
-    "hover:bg-success hover:text-success-foreground hover:shadow-lg",
-    "active:scale-[var(--active-scale)] active:shadow-sm"
-  ].join(" "),
-  warning: [
-    "bg-surface text-warning",
-    "border-[length:var(--border-width)] border-warning",
-    "shadow-sm",
-    "hover:bg-warning hover:text-warning-foreground hover:shadow-lg",
-    "active:scale-[var(--active-scale)] active:shadow-sm"
-  ].join(" "),
-  // "default" is an alias for secondary
-  default: [
-    "bg-secondary text-secondary-foreground",
-    "border-[length:var(--border-width-thin)] border-border",
-    "hover:bg-secondary-hover",
-    "active:scale-[var(--active-scale)]"
-  ].join(" ")
+
+// components/core/atoms/Box.tsx
+var paddingStyles = {
+  none: "p-0",
+  xs: "p-1",
+  sm: "p-2",
+  md: "p-4",
+  lg: "p-6",
+  xl: "p-8",
+  "2xl": "p-12"
 };
-variantStyles.destructive = variantStyles.danger;
-var sizeStyles = {
-  sm: "h-button-sm px-3 text-sm",
-  md: "h-button-md px-4 text-sm",
-  lg: "h-button-lg px-6 text-base"
+var paddingXStyles = {
+  none: "px-0",
+  xs: "px-1",
+  sm: "px-2",
+  md: "px-4",
+  lg: "px-6",
+  xl: "px-8",
+  "2xl": "px-12"
 };
-var iconSizeStyles = {
-  sm: "h-icon-default w-icon-default",
-  md: "h-icon-default w-icon-default",
-  lg: "h-icon-default w-icon-default"
+var paddingYStyles = {
+  none: "py-0",
+  xs: "py-1",
+  sm: "py-2",
+  md: "py-4",
+  lg: "py-6",
+  xl: "py-8",
+  "2xl": "py-12"
 };
-function isIconLike(v) {
-  return typeof v.render === "function";
-}
-function resolveIconProp(value, sizeClass) {
-  if (!value) return null;
-  if (typeof value === "string") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: value, className: sizeClass });
-  }
-  if (typeof value === "function") {
-    const IconComp = value;
-    return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
-  }
-  if (React10__namespace.default.isValidElement(value)) {
-    return value;
-  }
-  if (typeof value === "object" && value !== null && isIconLike(value)) {
-    const IconComp = value;
-    return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
-  }
-  return value;
-}
-var Button = React10__namespace.default.forwardRef(
-  ({
-    className,
-    variant = "primary",
-    size = "md",
-    isLoading = false,
-    disabled,
-    leftIcon,
-    rightIcon,
-    icon: iconProp,
-    iconRight: iconRightProp,
-    iconAsset,
-    action,
-    actionPayload,
-    label,
-    children,
-    onClick,
-    "data-testid": dataTestId,
-    ...props
-  }, ref) => {
-    const eventBus = useEventBus();
-    const leftIconValue = leftIcon || iconProp;
-    const rightIconValue = rightIcon || iconRightProp;
-    const px = size === "sm" ? 16 : size === "lg" ? 20 : 16;
-    const resolvedLeftIcon = iconAsset?.url ? /* @__PURE__ */ jsxRuntime.jsx(AtlasImage, { asset: iconAsset, size: px, alt: iconAsset.name ?? iconAsset.category ?? "", className: "flex-shrink-0" }) : resolveIconProp(leftIconValue, iconSizeStyles[size]);
-    const resolvedRightIcon = resolveIconProp(rightIconValue, iconSizeStyles[size]);
-    const handleClick = (e) => {
+var marginStyles = {
+  none: "m-0",
+  xs: "m-1",
+  sm: "m-2",
+  md: "m-4",
+  lg: "m-6",
+  xl: "m-8",
+  "2xl": "m-12",
+  auto: "m-auto"
+};
+var marginXStyles = {
+  none: "mx-0",
+  xs: "mx-1",
+  sm: "mx-2",
+  md: "mx-4",
+  lg: "mx-6",
+  xl: "mx-8",
+  "2xl": "mx-12",
+  auto: "mx-auto"
+};
+var marginYStyles = {
+  none: "my-0",
+  xs: "my-1",
+  sm: "my-2",
+  md: "my-4",
+  lg: "my-6",
+  xl: "my-8",
+  "2xl": "my-12",
+  auto: "my-auto"
+};
+var bgStyles = {
+  transparent: "bg-transparent",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-foreground",
+  accent: "bg-accent text-accent-foreground",
+  surface: "bg-card",
+  overlay: "bg-card/80 backdrop-blur-sm"
+};
+var roundedStyles = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-xl",
+  full: "rounded-full"
+};
+var shadowStyles = {
+  none: "shadow-none",
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg",
+  xl: "shadow-lg"
+};
+var displayStyles = {
+  block: "block",
+  inline: "inline",
+  "inline-block": "inline-block",
+  flex: "flex",
+  "inline-flex": "inline-flex",
+  grid: "grid"
+};
+var overflowStyles = {
+  auto: "overflow-auto",
+  hidden: "overflow-hidden",
+  visible: "overflow-visible",
+  scroll: "overflow-scroll"
+};
+var positionStyles = {
+  relative: "relative",
+  absolute: "absolute",
+  fixed: "fixed",
+  sticky: "sticky"
+};
+var Box = React7__default.default.forwardRef(
+  ({
+    padding,
+    paddingX,
+    paddingY,
+    margin,
+    marginX,
+    marginY,
+    bg = "transparent",
+    border = false,
+    rounded = "none",
+    shadow = "none",
+    display,
+    fullWidth = false,
+    fullHeight = false,
+    overflow,
+    position,
+    className,
+    children,
+    as: Component2 = "div",
+    action,
+    actionPayload,
+    hoverEvent,
+    tapReveal = true,
+    maxWidth,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerDown,
+    ...rest
+  }, ref) => {
+    const eventBus = useEventBus();
+    const handleClick = React7.useCallback((e) => {
       if (action) {
+        e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+    }, [action, actionPayload, eventBus, onClick]);
+    const handleMouseEnter = React7.useCallback((e) => {
+      if (hoverEvent) {
+        eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
+      }
+      onMouseEnter?.(e);
+    }, [hoverEvent, eventBus, onMouseEnter]);
+    const handleMouseLeave = React7.useCallback((e) => {
+      if (hoverEvent) {
+        eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
+      }
+      onMouseLeave?.(e);
+    }, [hoverEvent, eventBus, onMouseLeave]);
+    const { triggerProps } = useTapReveal({
+      enabled: tapReveal && !!hoverEvent,
+      onReveal: React7.useCallback(() => {
+        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
+      }, [hoverEvent, eventBus]),
+      onDismiss: React7.useCallback(() => {
+        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
+      }, [hoverEvent, eventBus])
+    });
+    const handlePointerDown = React7.useCallback((e) => {
+      if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
+      onPointerDown?.(e);
+    }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
+    const isClickable = action || onClick;
+    return React7__default.default.createElement(
+      Component2,
       {
         ref,
-        disabled: disabled || isLoading,
         className: cn(
-          "inline-flex items-center justify-center gap-2",
-          "font-medium",
-          "rounded-sm",
-          "cursor-pointer",
-          "transition-all duration-[var(--transition-normal)]",
-          "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-offset-[length:var(--focus-ring-offset)]",
-          "disabled:opacity-50 disabled:cursor-not-allowed",
-          variantStyles[variant],
-          sizeStyles[size],
+          padding && paddingStyles[padding],
+          paddingX && paddingXStyles[paddingX],
+          paddingY && paddingYStyles[paddingY],
+          margin && marginStyles[margin],
+          marginX && marginXStyles[marginX],
+          marginY && marginYStyles[marginY],
+          bgStyles[bg],
+          border && "border-[length:var(--border-width)] border-border",
+          roundedStyles[rounded],
+          shadowStyles[shadow],
+          display && displayStyles[display],
+          fullWidth && "w-full",
+          fullHeight && "h-full",
+          overflow && overflowStyles[overflow],
+          position && positionStyles[position],
+          isClickable && "cursor-pointer",
           className
         ),
-        onClick: handleClick,
-        ...props,
-        "data-testid": dataTestId ?? (action ? `action-${action}` : void 0),
-        children: [
-          isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "h-icon-default w-icon-default animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
-          children || label,
-          resolvedRightIcon && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedRightIcon })
-        ]
-      }
+        onClick: isClickable ? handleClick : void 0,
+        onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
+        onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
+        onPointerDown: hoverEvent && tapReveal || onPointerDown ? handlePointerDown : void 0,
+        style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
+        ...rest
+      },
+      children
     );
   }
 );
-Button.displayName = "Button";
-var variantStyles2 = {
+Box.displayName = "Box";
+var variantStyles = {
   h1: "text-4xl font-bold tracking-tight text-foreground",
   h2: "text-3xl font-bold tracking-tight text-foreground",
   h3: "text-2xl font-bold text-foreground",
@@ -3819,7 +2514,7 @@ var typographySizeStyles = {
   "2xl": "text-2xl",
   "3xl": "text-3xl"
 };
-var overflowStyles = {
+var overflowStyles2 = {
   visible: "overflow-visible",
   hidden: "overflow-hidden",
   wrap: "break-words overflow-hidden",
@@ -3844,18 +2539,18 @@ var Typography = ({
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component2 = as || defaultElements[variant];
-  return React10__namespace.default.createElement(
+  return React7__default.default.createElement(
     Component2,
     {
       id,
       className: cn(
-        variantStyles2[variant],
+        variantStyles[variant],
         colorStyles[color],
         weight && weightStyles[weight],
         size && typographySizeStyles[size],
         align && `text-${align}`,
         truncate && "truncate overflow-hidden text-ellipsis",
-        overflow && overflowStyles[overflow],
+        overflow && overflowStyles2[overflow],
         className
       ),
       style
@@ -3917,7 +2612,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 React10__namespace.default.createElement(
+  return React7__default.default.createElement(
     Component2,
     {
       className: cn(
@@ -3942,939 +2637,6 @@ var Stack = ({
 var VStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "vertical", ...props });
 var HStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "horizontal", ...props });
 
-// components/game/shared/boardEntity.ts
-function boardEntity(entity) {
-  if (!entity) return void 0;
-  return Array.isArray(entity) ? entity[0] : entity;
-}
-function str(v) {
-  return v == null ? "" : String(v);
-}
-function num(v, fallback = 0) {
-  const n = Number(v);
-  return Number.isFinite(n) ? n : fallback;
-}
-function rows(v) {
-  return Array.isArray(v) ? v : [];
-}
-function vec2(v) {
-  const o = v ?? {};
-  return { x: num(o.x), y: num(o.y) };
-}
-function unitPosition(u) {
-  return vec2(u.position);
-}
-function unitTeam(u) {
-  return str(u.team);
-}
-function unitHealth(u) {
-  return num(u.health);
-}
-function GameBoard3D({
-  entity,
-  tiles = [],
-  features = [],
-  cameraMode = "perspective",
-  backgroundColor = "#2a1a1a",
-  unitScale = 1,
-  scale = 0.45,
-  tileClickEvent,
-  unitClickEvent,
-  attackEvent,
-  endTurnEvent,
-  cancelEvent,
-  playAgainEvent,
-  gameEndEvent,
-  className
-}) {
-  const row = boardEntity(entity);
-  const eventBus = useEventBus();
-  const entityUnits = row ? rows(row.units) : [];
-  const units = entityUnits.map((r) => ({
-    id: str(r.id),
-    x: num(r.x),
-    y: num(r.y),
-    z: num(r.z),
-    faction: str(r.faction) || "neutral",
-    team: str(r.team) || str(r.faction) || "neutral",
-    unitType: r.unitType == null ? void 0 : str(r.unitType),
-    name: r.name == null ? void 0 : str(r.name),
-    health: r.health == null ? void 0 : num(r.health),
-    maxHealth: r.maxHealth == null ? void 0 : num(r.maxHealth)
-  }));
-  const selectedUnitId = row ? str(row.selectedUnitId) || null : null;
-  const phase = row ? str(row.phase) : "observation";
-  const result = row ? str(row.result) : "none";
-  const validMoves = row && Array.isArray(row.validMoves) ? row.validMoves : [];
-  const attackTargets = row && Array.isArray(row.attackTargets) ? row.attackTargets : [];
-  const turn = row ? num(row.turn) : 0;
-  const currentTeam = row ? str(row.currentTeam) : "player";
-  const isGameOver = result !== "none";
-  const gameEndEmittedRef = React10.useRef(false);
-  React10.useEffect(() => {
-    if ((result === "victory" || result === "defeat") && gameEndEvent) {
-      if (!gameEndEmittedRef.current) {
-        gameEndEmittedRef.current = true;
-        eventBus.emit(`UI:${gameEndEvent}`, { result });
-      }
-    } else {
-      gameEndEmittedRef.current = false;
-    }
-  }, [result, gameEndEvent, eventBus]);
-  const checkGameEnd = React10.useCallback(() => {
-    const alivePlayer = entityUnits.filter((u) => unitTeam(u) === "player" && unitHealth(u) > 0);
-    const aliveEnemy = entityUnits.filter((u) => unitTeam(u) === "enemy" && unitHealth(u) > 0);
-    if (alivePlayer.length === 0 && gameEndEvent) {
-      eventBus.emit(`UI:${gameEndEvent}`, { result: "defeat" });
-    } else if (aliveEnemy.length === 0 && gameEndEvent) {
-      eventBus.emit(`UI:${gameEndEvent}`, { result: "victory" });
-    }
-  }, [entityUnits, gameEndEvent, eventBus]);
-  const handleUnitClickCallback = React10.useCallback((isoUnit) => {
-    if (phase !== "action" || !selectedUnitId || !attackEvent) return;
-    const attackerRow = entityUnits.find((u) => str(u.id) === selectedUnitId);
-    const targetRow = entityUnits.find((u) => str(u.id) === isoUnit.id);
-    if (!attackerRow || !targetRow) return;
-    if (unitTeam(targetRow) !== "enemy" || unitHealth(targetRow) <= 0) return;
-    const ap = unitPosition(attackerRow);
-    const tp = unitPosition(targetRow);
-    const dx = Math.abs(ap.x - tp.x);
-    const dy = Math.abs(ap.y - tp.y);
-    if (dx <= 1 && dy <= 1 && dx + dy > 0) {
-      const damage = Math.max(1, num(attackerRow.attack) - num(targetRow.defense));
-      eventBus.emit(`UI:${attackEvent}`, {
-        attackerId: str(attackerRow.id),
-        targetId: str(targetRow.id),
-        damage
-      });
-      setTimeout(checkGameEnd, 100);
-    }
-  }, [phase, selectedUnitId, entityUnits, attackEvent, eventBus, checkGameEnd]);
-  const handleEndTurn = React10.useCallback(() => {
-    if (endTurnEvent) eventBus.emit(`UI:${endTurnEvent}`, {});
-  }, [endTurnEvent, eventBus]);
-  const handleCancel = React10.useCallback(() => {
-    if (cancelEvent) eventBus.emit(`UI:${cancelEvent}`, {});
-  }, [cancelEvent, eventBus]);
-  const handlePlayAgain = React10.useCallback(() => {
-    if (playAgainEvent) eventBus.emit(`UI:${playAgainEvent}`, {});
-  }, [playAgainEvent, eventBus]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: cn("game-board-3d block w-full min-h-[85vh] relative", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "game-board-3d__status absolute top-3 left-3 z-10 flex gap-2 items-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "status__phase capitalize", children: phase.replace("_", " ") }),
-      currentTeam && !isGameOver && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", color: "muted", className: "status__team", children: [
-        "\u2014 ",
-        currentTeam === "player" ? "Your Turn" : "Enemy's Turn"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", color: "muted", className: "status__turn", children: [
-        "Turn ",
-        turn
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      GameCanvas3D,
-      {
-        tiles,
-        units,
-        features,
-        cameraMode,
-        showGrid: true,
-        showCoordinates: false,
-        showTileInfo: false,
-        shadows: true,
-        backgroundColor,
-        tileClickEvent,
-        unitClickEvent,
-        onUnitClick: handleUnitClickCallback,
-        selectedUnitId,
-        validMoves,
-        attackTargets,
-        unitScale,
-        scale,
-        className: "game-board-3d__canvas w-full min-h-[85vh]"
-      }
-    ),
-    !isGameOver && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "fixed bottom-6 right-6 z-50", gap: "sm", children: [
-      (phase === "selection" || phase === "movement" || phase === "action") && /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          variant: "secondary",
-          className: "shadow-xl",
-          onClick: handleCancel,
-          children: "Cancel"
-        }
-      ),
-      phase !== "enemy_turn" && /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          variant: "primary",
-          className: "shadow-xl",
-          onClick: handleEndTurn,
-          children: "End Turn"
-        }
-      )
-    ] }),
-    isGameOver && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "game-board-3d__overlay absolute inset-0 z-20 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { align: "center", gap: "md", className: "overlay__card p-8 rounded-xl bg-gray-900/90 shadow-2xl", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Typography,
-        {
-          variant: "h2",
-          className: cn(
-            "overlay__result",
-            result === "victory" ? "text-yellow-400" : "text-red-500"
-          ),
-          children: result === "victory" ? "Victory!" : "Defeat"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "body", color: "muted", className: "overlay__turn-count", children: [
-        "Completed in ",
-        turn,
-        " turn",
-        turn !== 1 ? "s" : ""
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          variant: "primary",
-          className: "px-8 py-3 font-semibold",
-          onClick: handlePlayAgain,
-          children: "Play Again"
-        }
-      )
-    ] }) })
-  ] });
-}
-GameBoard3D.displayName = "GameBoard3D";
-function useTapReveal(options = {}) {
-  const { onReveal, onDismiss, refs, enabled = true } = options;
-  const [revealed, setRevealed] = React10.useState(false);
-  const onRevealRef = React10.useRef(onReveal);
-  const onDismissRef = React10.useRef(onDismiss);
-  onRevealRef.current = onReveal;
-  onDismissRef.current = onDismiss;
-  const reveal = React10.useCallback(() => {
-    setRevealed((wasRevealed) => {
-      if (!wasRevealed) onRevealRef.current?.();
-      return true;
-    });
-  }, []);
-  const dismiss = React10.useCallback(() => {
-    setRevealed((wasRevealed) => {
-      if (wasRevealed) onDismissRef.current?.();
-      return false;
-    });
-  }, []);
-  const onPointerDown = React10.useCallback(
-    (e) => {
-      if (!enabled || e.pointerType === "mouse") return;
-      if (revealed) dismiss();
-      else reveal();
-    },
-    [enabled, revealed, reveal, dismiss]
-  );
-  React10.useEffect(() => {
-    if (!revealed || typeof document === "undefined") return;
-    const onDocDown = (ev) => {
-      const target = ev.target;
-      if (!(target instanceof Node)) return;
-      const inside = (refs ?? []).some((r) => r.current?.contains(target));
-      if (!inside) dismiss();
-    };
-    const id = setTimeout(() => document.addEventListener("pointerdown", onDocDown), 0);
-    return () => {
-      clearTimeout(id);
-      document.removeEventListener("pointerdown", onDocDown);
-    };
-  }, [revealed, refs, dismiss]);
-  return { revealed, triggerProps: { onPointerDown }, reveal, dismiss };
-}
-
-// components/core/atoms/Box.tsx
-var paddingStyles = {
-  none: "p-0",
-  xs: "p-1",
-  sm: "p-2",
-  md: "p-4",
-  lg: "p-6",
-  xl: "p-8",
-  "2xl": "p-12"
-};
-var paddingXStyles = {
-  none: "px-0",
-  xs: "px-1",
-  sm: "px-2",
-  md: "px-4",
-  lg: "px-6",
-  xl: "px-8",
-  "2xl": "px-12"
-};
-var paddingYStyles = {
-  none: "py-0",
-  xs: "py-1",
-  sm: "py-2",
-  md: "py-4",
-  lg: "py-6",
-  xl: "py-8",
-  "2xl": "py-12"
-};
-var marginStyles = {
-  none: "m-0",
-  xs: "m-1",
-  sm: "m-2",
-  md: "m-4",
-  lg: "m-6",
-  xl: "m-8",
-  "2xl": "m-12",
-  auto: "m-auto"
-};
-var marginXStyles = {
-  none: "mx-0",
-  xs: "mx-1",
-  sm: "mx-2",
-  md: "mx-4",
-  lg: "mx-6",
-  xl: "mx-8",
-  "2xl": "mx-12",
-  auto: "mx-auto"
-};
-var marginYStyles = {
-  none: "my-0",
-  xs: "my-1",
-  sm: "my-2",
-  md: "my-4",
-  lg: "my-6",
-  xl: "my-8",
-  "2xl": "my-12",
-  auto: "my-auto"
-};
-var bgStyles = {
-  transparent: "bg-transparent",
-  primary: "bg-primary text-primary-foreground",
-  secondary: "bg-secondary text-secondary-foreground",
-  muted: "bg-muted text-foreground",
-  accent: "bg-accent text-accent-foreground",
-  surface: "bg-card",
-  overlay: "bg-card/80 backdrop-blur-sm"
-};
-var roundedStyles = {
-  none: "rounded-none",
-  sm: "rounded-sm",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  xl: "rounded-xl",
-  "2xl": "rounded-xl",
-  full: "rounded-full"
-};
-var shadowStyles = {
-  none: "shadow-none",
-  sm: "shadow-sm",
-  md: "shadow",
-  lg: "shadow-lg",
-  xl: "shadow-lg"
-};
-var displayStyles = {
-  block: "block",
-  inline: "inline",
-  "inline-block": "inline-block",
-  flex: "flex",
-  "inline-flex": "inline-flex",
-  grid: "grid"
-};
-var overflowStyles2 = {
-  auto: "overflow-auto",
-  hidden: "overflow-hidden",
-  visible: "overflow-visible",
-  scroll: "overflow-scroll"
-};
-var positionStyles = {
-  relative: "relative",
-  absolute: "absolute",
-  fixed: "fixed",
-  sticky: "sticky"
-};
-var Box = React10__namespace.default.forwardRef(
-  ({
-    padding,
-    paddingX,
-    paddingY,
-    margin,
-    marginX,
-    marginY,
-    bg = "transparent",
-    border = false,
-    rounded = "none",
-    shadow = "none",
-    display,
-    fullWidth = false,
-    fullHeight = false,
-    overflow,
-    position,
-    className,
-    children,
-    as: Component2 = "div",
-    action,
-    actionPayload,
-    hoverEvent,
-    tapReveal = true,
-    maxWidth,
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    onPointerDown,
-    ...rest
-  }, ref) => {
-    const eventBus = useEventBus();
-    const handleClick = React10.useCallback((e) => {
-      if (action) {
-        e.stopPropagation();
-        eventBus.emit(`UI:${action}`, actionPayload ?? {});
-      }
-      onClick?.(e);
-    }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React10.useCallback((e) => {
-      if (hoverEvent) {
-        eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
-      }
-      onMouseEnter?.(e);
-    }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React10.useCallback((e) => {
-      if (hoverEvent) {
-        eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
-      }
-      onMouseLeave?.(e);
-    }, [hoverEvent, eventBus, onMouseLeave]);
-    const { triggerProps } = useTapReveal({
-      enabled: tapReveal && !!hoverEvent,
-      onReveal: React10.useCallback(() => {
-        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
-      }, [hoverEvent, eventBus]),
-      onDismiss: React10.useCallback(() => {
-        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
-      }, [hoverEvent, eventBus])
-    });
-    const handlePointerDown = React10.useCallback((e) => {
-      if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
-      onPointerDown?.(e);
-    }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
-    const isClickable = action || onClick;
-    return React10__namespace.default.createElement(
-      Component2,
-      {
-        ref,
-        className: cn(
-          padding && paddingStyles[padding],
-          paddingX && paddingXStyles[paddingX],
-          paddingY && paddingYStyles[paddingY],
-          margin && marginStyles[margin],
-          marginX && marginXStyles[marginX],
-          marginY && marginYStyles[marginY],
-          bgStyles[bg],
-          border && "border-[length:var(--border-width)] border-border",
-          roundedStyles[rounded],
-          shadowStyles[shadow],
-          display && displayStyles[display],
-          fullWidth && "w-full",
-          fullHeight && "h-full",
-          overflow && overflowStyles2[overflow],
-          position && positionStyles[position],
-          isClickable && "cursor-pointer",
-          className
-        ),
-        onClick: isClickable ? handleClick : void 0,
-        onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
-        onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
-        onPointerDown: hoverEvent && tapReveal || onPointerDown ? handlePointerDown : void 0,
-        style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
-        ...rest
-      },
-      children
-    );
-  }
-);
-Box.displayName = "Box";
-
-// components/game/shared/makeAsset.ts
-var ROLE_DEFAULTS = {
-  tile: { dimension: "2d", animations: ["static"], aspect: "1:1" },
-  decoration: { dimension: "2d", animations: ["static"], aspect: "1:1" },
-  effect: { dimension: "2d", animations: ["static"], aspect: "1:1" },
-  item: { dimension: "2d", animations: ["static"], aspect: "5:7" },
-  player: { dimension: "2d", animations: ["idle", "walk", "attack", "hit", "death"], aspect: "1:1" },
-  enemy: { dimension: "2d", animations: ["idle", "walk", "attack", "hit", "death"], aspect: "1:1" },
-  npc: { dimension: "2d", animations: ["idle", "walk", "attack", "hit", "death"], aspect: "1:1" },
-  projectile: { dimension: "2d", animations: ["static"], aspect: "1:1" },
-  vehicle: { dimension: "2d", animations: ["idle", "walk"], aspect: "1:1" },
-  ui: { dimension: "2d", animations: ["static"], aspect: "1:1" }
-};
-function makeAsset(url, role, overrides = {}) {
-  const defaults = ROLE_DEFAULTS[role] ?? { dimension: "2d", animations: ["static"], aspect: "1:1" };
-  return {
-    url,
-    role,
-    category: url.split("/").pop()?.replace(/\.[^.]+$/, "") ?? role,
-    ...defaults,
-    ...overrides
-  };
-}
-
-// components/game/shared/lib/game3dAssetManifest.ts
-function tileKind(type, passable) {
-  if (passable === false) return "wall";
-  if (type === "dirt" || type === "road") return "dirt";
-  return "open";
-}
-function resolveTilesWithModels(layout, manifest) {
-  return layout.map((t) => {
-    const kind = t.kind || tileKind(t.type, t.passable);
-    return {
-      id: t.id,
-      x: t.x,
-      y: t.y,
-      z: t.z,
-      type: t.type,
-      passable: t.passable,
-      modelUrl: manifest?.models?.[kind]
-    };
-  });
-}
-function resolvePropTiles(tiles, manifest) {
-  return tiles.map((t) => {
-    const kind = tileKind(t.type ?? "", t.passable);
-    return {
-      ...t,
-      modelUrl: t.modelUrl ?? manifest?.models?.[kind]
-    };
-  });
-}
-function resolveEntityTiles(entity, manifest) {
-  const row = boardEntity(entity);
-  if (!row) return [];
-  return rows(row.tiles).map((r) => {
-    const type = str(r.type) || str(r.terrain);
-    const passable = r.passable !== false;
-    const kind = tileKind(type, passable);
-    const explicitModelUrl = r.modelUrl == null ? void 0 : str(r.modelUrl);
-    const explicitModel = explicitModelUrl ? makeAsset(explicitModelUrl, "decoration", { dimension: "3d" }) : void 0;
-    return {
-      id: r.id == null ? void 0 : str(r.id),
-      x: num(r.x),
-      y: num(r.y),
-      z: r.z == null ? void 0 : num(r.z),
-      type,
-      passable,
-      modelUrl: explicitModel ?? manifest?.models?.[kind]
-    };
-  });
-}
-function resolveFeaturesWithModels(features, manifest) {
-  return features.map((f) => ({
-    ...f,
-    assetUrl: f.assetUrl ?? manifest?.features?.[f.type]
-  }));
-}
-function resolveEntityFeatures(entity, manifest) {
-  const row = boardEntity(entity);
-  if (!row) return [];
-  return rows(row.features).map((r) => {
-    const type = str(r.type);
-    const explicitUrl = r.assetUrl == null ? void 0 : str(r.assetUrl);
-    const explicit = explicitUrl ? makeAsset(explicitUrl, "decoration", { dimension: "3d" }) : void 0;
-    return {
-      id: r.id == null ? void 0 : str(r.id),
-      x: num(r.x),
-      y: num(r.y),
-      z: r.z == null ? void 0 : num(r.z),
-      type,
-      color: r.color == null ? void 0 : str(r.color),
-      assetUrl: explicit ?? manifest?.features?.[type]
-    };
-  });
-}
-var DEFAULT_3D_BATTLE_LAYOUT = [
-  { id: "t00", x: 0, y: 0, z: 0, type: "stone", passable: false, kind: "wall" },
-  { id: "t10", x: 1, y: 0, z: 0, type: "stone", passable: false, kind: "wall" },
-  { id: "t20", x: 2, y: 0, z: 0, type: "stone", passable: false, kind: "wall" },
-  { id: "t30", x: 3, y: 0, z: 0, type: "stone", passable: false, kind: "wall" },
-  { id: "t40", x: 4, y: 0, z: 0, type: "stone", passable: false, kind: "wall" },
-  { id: "t01", x: 0, y: 1, z: 1, type: "stone", passable: false, kind: "wall" },
-  { id: "t11", x: 1, y: 1, z: 1, type: "dirt", passable: true, kind: "dirt" },
-  { id: "t21", x: 2, y: 1, z: 1, type: "grass", passable: true, kind: "open" },
-  { id: "t31", x: 3, y: 1, z: 1, type: "grass", passable: true, kind: "open" },
-  { id: "t41", x: 4, y: 1, z: 1, type: "stone", passable: false, kind: "wall" },
-  { id: "t02", x: 0, y: 2, z: 2, type: "stone", passable: false, kind: "wall" },
-  { id: "t12", x: 1, y: 2, z: 2, type: "grass", passable: true, kind: "open" },
-  { id: "t22", x: 2, y: 2, z: 2, type: "dirt", passable: true, kind: "dirt" },
-  { id: "t32", x: 3, y: 2, z: 2, type: "grass", passable: true, kind: "open" },
-  { id: "t42", x: 4, y: 2, z: 2, type: "stone", passable: false, kind: "wall" },
-  { id: "t03", x: 0, y: 3, z: 3, type: "stone", passable: false, kind: "wall" },
-  { id: "t13", x: 1, y: 3, z: 3, type: "grass", passable: true, kind: "open" },
-  { id: "t23", x: 2, y: 3, z: 3, type: "grass", passable: true, kind: "open" },
-  { id: "t33", x: 3, y: 3, z: 3, type: "dirt", passable: true, kind: "dirt" },
-  { id: "t43", x: 4, y: 3, z: 3, type: "stone", passable: false, kind: "wall" },
-  { id: "t04", x: 0, y: 4, z: 4, type: "stone", passable: false, kind: "wall" },
-  { id: "t14", x: 1, y: 4, z: 4, type: "stone", passable: false, kind: "wall" },
-  { id: "t24", x: 2, y: 4, z: 4, type: "stone", passable: false, kind: "wall" },
-  { id: "t34", x: 3, y: 4, z: 4, type: "stone", passable: false, kind: "wall" },
-  { id: "t44", x: 4, y: 4, z: 4, type: "stone", passable: false, kind: "wall" }
-];
-var DEFAULT_3D_BATTLE_FEATURES = [
-  { id: "f1", x: 2, y: 2, z: 2, type: "gold_mine", color: "#f4c542" },
-  { id: "f2", x: 3, y: 1, z: 1, type: "portal", color: "#8b5cf6" }
-];
-function GameCanvas3DBattleTemplate({
-  entity,
-  tiles: propTiles,
-  features: propFeatures = DEFAULT_3D_BATTLE_FEATURES,
-  assetManifest,
-  cameraMode = "perspective",
-  backgroundColor = "#2a1a1a",
-  tileClickEvent,
-  unitClickEvent,
-  endTurnEvent,
-  cancelEvent,
-  attackEvent,
-  playAgainEvent,
-  gameEndEvent,
-  unitScale,
-  scale,
-  className
-}) {
-  const row = boardEntity(entity);
-  const hasEntityTiles = !!row && Array.isArray(row.tiles) && row.tiles.length > 0;
-  const tiles = hasEntityTiles ? resolveEntityTiles(entity, assetManifest) : propTiles ? resolvePropTiles(propTiles, assetManifest) : resolveTilesWithModels(DEFAULT_3D_BATTLE_LAYOUT, assetManifest);
-  const features = row && Array.isArray(row.features) && row.features.length > 0 ? resolveEntityFeatures(entity, assetManifest) : resolveFeaturesWithModels(propFeatures, assetManifest);
-  const currentTurn = row?.currentTeam == null ? void 0 : String(row.currentTeam);
-  const round = row?.turn == null ? void 0 : Number(row.turn);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Box,
-    {
-      className: cn("game-canvas-3d-battle-template block relative w-full min-h-[85vh]", className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          GameBoard3D,
-          {
-            entity,
-            tiles,
-            features,
-            cameraMode,
-            backgroundColor,
-            unitScale,
-            scale,
-            tileClickEvent,
-            unitClickEvent,
-            endTurnEvent,
-            cancelEvent,
-            attackEvent,
-            playAgainEvent,
-            gameEndEvent,
-            className: "game-canvas-3d-battle-template__board"
-          }
-        ),
-        currentTurn && /* @__PURE__ */ jsxRuntime.jsxs(
-          HStack,
-          {
-            gap: "sm",
-            align: "center",
-            className: cn("battle-template__turn-indicator absolute top-3 right-3 z-10", `battle-template__turn-indicator--${currentTurn}`),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "turn-indicator__label", children: currentTurn === "player" ? "Your Turn" : "Enemy's Turn" }),
-              round != null && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "turn-indicator__round", children: [
-                "Round ",
-                round
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-GameCanvas3DBattleTemplate.displayName = "GameCanvas3DBattleTemplate";
-var DEFAULT_3D_CASTLE_LAYOUT = [
-  { id: "t00", x: 0, y: 0, z: 0, type: "wall", passable: false, kind: "wall" },
-  { id: "t10", x: 1, y: 0, z: 0, type: "wall", passable: false, kind: "wall" },
-  { id: "t20", x: 2, y: 0, z: 0, type: "wall", passable: false, kind: "wall" },
-  { id: "t30", x: 3, y: 0, z: 0, type: "wall", passable: false, kind: "wall" },
-  { id: "t40", x: 4, y: 0, z: 0, type: "wall", passable: false, kind: "wall" },
-  { id: "t01", x: 0, y: 1, z: 1, type: "wall", passable: false, kind: "wall" },
-  { id: "t11", x: 1, y: 1, z: 1, type: "floor", passable: true, kind: "dirt" },
-  { id: "t21", x: 2, y: 1, z: 1, type: "floor", passable: true, kind: "open" },
-  { id: "t31", x: 3, y: 1, z: 1, type: "floor", passable: true, kind: "open" },
-  { id: "t41", x: 4, y: 1, z: 1, type: "wall", passable: false, kind: "wall" },
-  { id: "t02", x: 0, y: 2, z: 2, type: "wall", passable: false, kind: "wall" },
-  { id: "t12", x: 1, y: 2, z: 2, type: "floor", passable: true, kind: "open" },
-  { id: "t22", x: 2, y: 2, z: 2, type: "floor", passable: true, kind: "dirt" },
-  { id: "t32", x: 3, y: 2, z: 2, type: "floor", passable: true, kind: "open" },
-  { id: "t42", x: 4, y: 2, z: 2, type: "wall", passable: false, kind: "wall" },
-  { id: "t03", x: 0, y: 3, z: 3, type: "wall", passable: false, kind: "wall" },
-  { id: "t13", x: 1, y: 3, z: 3, type: "floor", passable: true, kind: "open" },
-  { id: "t23", x: 2, y: 3, z: 3, type: "floor", passable: true, kind: "open" },
-  { id: "t33", x: 3, y: 3, z: 3, type: "floor", passable: true, kind: "dirt" },
-  { id: "t43", x: 4, y: 3, z: 3, type: "wall", passable: false, kind: "wall" },
-  { id: "t04", x: 0, y: 4, z: 4, type: "wall", passable: false, kind: "wall" },
-  { id: "t14", x: 1, y: 4, z: 4, type: "wall", passable: false, kind: "wall" },
-  { id: "t24", x: 2, y: 4, z: 4, type: "wall", passable: false, kind: "wall" },
-  { id: "t34", x: 3, y: 4, z: 4, type: "wall", passable: false, kind: "wall" },
-  { id: "t44", x: 4, y: 4, z: 4, type: "wall", passable: false, kind: "wall" }
-];
-var DEFAULT_3D_CASTLE_FEATURES = [
-  { id: "f1", x: 2, y: 2, z: 2, type: "chest", color: "#f4c542" },
-  { id: "f2", x: 3, y: 1, z: 1, type: "crystal", color: "#8b5cf6" }
-];
-function GameCanvas3DCastleTemplate({
-  entity,
-  tiles: propTiles,
-  features: propFeatures = DEFAULT_3D_CASTLE_FEATURES,
-  assetManifest,
-  cameraMode = "isometric",
-  backgroundColor = "#1e1e2e",
-  buildingClickEvent,
-  unitClickEvent,
-  endTurnEvent,
-  cancelEvent,
-  attackEvent,
-  playAgainEvent,
-  gameEndEvent,
-  showHeader = true,
-  unitScale,
-  scale,
-  className
-}) {
-  const row = boardEntity(entity);
-  const hasEntityTiles = !!row && Array.isArray(row.tiles) && row.tiles.length > 0;
-  const tiles = hasEntityTiles ? resolveEntityTiles(entity, assetManifest) : propTiles ? resolvePropTiles(propTiles, assetManifest) : resolveTilesWithModels(DEFAULT_3D_CASTLE_LAYOUT, assetManifest);
-  const features = row && Array.isArray(row.features) && row.features.length > 0 ? resolveEntityFeatures(entity, assetManifest) : resolveFeaturesWithModels(propFeatures, assetManifest);
-  const name = row?.name == null ? void 0 : str(row.name);
-  const level = row?.level == null ? void 0 : num(row.level);
-  const owner = row?.owner == null ? void 0 : str(row.owner);
-  const unitCount = row && Array.isArray(row.units) ? row.units.length : 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    VStack,
-    {
-      className: cn("game-canvas-3d-castle-template block w-full min-h-[85vh]", className),
-      children: [
-        showHeader && name && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "center", className: "castle-template__header", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h2", className: "header__name", children: name }),
-          level != null && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "header__level", children: [
-            "Level ",
-            level
-          ] }),
-          owner && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "muted", className: "header__owner", children: owner })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          GameBoard3D,
-          {
-            entity,
-            tiles,
-            features,
-            cameraMode,
-            backgroundColor,
-            unitScale,
-            scale,
-            tileClickEvent: buildingClickEvent,
-            unitClickEvent,
-            endTurnEvent,
-            cancelEvent,
-            attackEvent,
-            playAgainEvent,
-            gameEndEvent,
-            className: "game-canvas-3d-castle-template__board"
-          }
-        ),
-        unitCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "center", className: "castle-template__garrison-info", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "garrison-info__label", children: "Garrison:" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", weight: "bold", className: "garrison-info__count", children: [
-            unitCount,
-            " units"
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-GameCanvas3DCastleTemplate.displayName = "GameCanvas3DCastleTemplate";
-var DEFAULT_3D_WORLDMAP_LAYOUT = [
-  { id: "t00", x: 0, y: 0, z: 0, type: "mountain", passable: false, kind: "wall" },
-  { id: "t10", x: 1, y: 0, z: 0, type: "mountain", passable: false, kind: "wall" },
-  { id: "t20", x: 2, y: 0, z: 0, type: "water", passable: false, kind: "wall" },
-  { id: "t30", x: 3, y: 0, z: 0, type: "mountain", passable: false, kind: "wall" },
-  { id: "t40", x: 4, y: 0, z: 0, type: "mountain", passable: false, kind: "wall" },
-  { id: "t01", x: 0, y: 1, z: 1, type: "mountain", passable: false, kind: "wall" },
-  { id: "t11", x: 1, y: 1, z: 1, type: "grass", passable: true, kind: "open" },
-  { id: "t21", x: 2, y: 1, z: 1, type: "grass", passable: true, kind: "open" },
-  { id: "t31", x: 3, y: 1, z: 1, type: "grass", passable: true, kind: "open" },
-  { id: "t41", x: 4, y: 1, z: 1, type: "water", passable: false, kind: "wall" },
-  { id: "t02", x: 0, y: 2, z: 2, type: "water", passable: false, kind: "wall" },
-  { id: "t12", x: 1, y: 2, z: 2, type: "grass", passable: true, kind: "open" },
-  { id: "t22", x: 2, y: 2, z: 2, type: "road", passable: true, kind: "dirt" },
-  { id: "t32", x: 3, y: 2, z: 2, type: "grass", passable: true, kind: "open" },
-  { id: "t42", x: 4, y: 2, z: 2, type: "mountain", passable: false, kind: "wall" },
-  { id: "t03", x: 0, y: 3, z: 3, type: "mountain", passable: false, kind: "wall" },
-  { id: "t13", x: 1, y: 3, z: 3, type: "grass", passable: true, kind: "open" },
-  { id: "t23", x: 2, y: 3, z: 3, type: "grass", passable: true, kind: "open" },
-  { id: "t33", x: 3, y: 3, z: 3, type: "road", passable: true, kind: "dirt" },
-  { id: "t43", x: 4, y: 3, z: 3, type: "mountain", passable: false, kind: "wall" },
-  { id: "t04", x: 0, y: 4, z: 4, type: "mountain", passable: false, kind: "wall" },
-  { id: "t14", x: 1, y: 4, z: 4, type: "water", passable: false, kind: "wall" },
-  { id: "t24", x: 2, y: 4, z: 4, type: "grass", passable: true, kind: "open" },
-  { id: "t34", x: 3, y: 4, z: 4, type: "mountain", passable: false, kind: "wall" },
-  { id: "t44", x: 4, y: 4, z: 4, type: "mountain", passable: false, kind: "wall" }
-];
-var DEFAULT_3D_WORLDMAP_FEATURES = [
-  { id: "f1", x: 2, y: 2, z: 2, type: "capital", color: "#f4c542" },
-  { id: "f2", x: 4, y: 2, z: 2, type: "power_node", color: "#8b5cf6" }
-];
-function GameCanvas3DWorldMapTemplate({
-  entity,
-  tiles: propTiles,
-  features: propFeatures = DEFAULT_3D_WORLDMAP_FEATURES,
-  assetManifest,
-  cameraMode = "isometric",
-  backgroundColor = "#1a1a2e",
-  tileClickEvent,
-  unitClickEvent,
-  endTurnEvent,
-  cancelEvent,
-  attackEvent,
-  playAgainEvent,
-  gameEndEvent,
-  unitScale,
-  scale,
-  className
-}) {
-  const row = boardEntity(entity);
-  const hasEntityTiles = !!row && Array.isArray(row.tiles) && row.tiles.length > 0;
-  const tiles = hasEntityTiles ? resolveEntityTiles(entity, assetManifest) : propTiles ? resolvePropTiles(propTiles, assetManifest) : resolveTilesWithModels(DEFAULT_3D_WORLDMAP_LAYOUT, assetManifest);
-  const features = row && Array.isArray(row.features) && row.features.length > 0 ? resolveEntityFeatures(entity, assetManifest) : resolveFeaturesWithModels(propFeatures, assetManifest);
-  return (
-    /* GameBoard3D reads selectedUnitId/validMoves/attackTargets from entity */
-    /* @__PURE__ */ jsxRuntime.jsx(
-      GameBoard3D,
-      {
-        entity,
-        tiles,
-        features,
-        cameraMode,
-        backgroundColor,
-        unitScale,
-        scale,
-        tileClickEvent,
-        unitClickEvent,
-        endTurnEvent,
-        cancelEvent,
-        attackEvent,
-        playAgainEvent,
-        gameEndEvent,
-        className
-      }
-    )
-  );
-}
-GameCanvas3DWorldMapTemplate.displayName = "GameCanvas3DWorldMapTemplate";
-var DEFAULT_CONFIG = {
-  cellSize: 1,
-  offsetX: 0,
-  offsetZ: 0,
-  elevation: 0
-};
-function gridToWorld(gridX, gridZ, config = DEFAULT_CONFIG) {
-  const opts = { ...DEFAULT_CONFIG, ...config };
-  return new THREE6__namespace.Vector3(
-    gridX * opts.cellSize + opts.offsetX,
-    opts.elevation,
-    gridZ * opts.cellSize + opts.offsetZ
-  );
-}
-function worldToGrid(worldX, worldZ, config = DEFAULT_CONFIG) {
-  const opts = { ...DEFAULT_CONFIG, ...config };
-  return {
-    x: Math.round((worldX - opts.offsetX) / opts.cellSize),
-    z: Math.round((worldZ - opts.offsetZ) / opts.cellSize)
-  };
-}
-function raycastToPlane(camera, mouseX, mouseY, planeY = 0) {
-  const raycaster = new THREE6__namespace.Raycaster();
-  const mouse = new THREE6__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 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);
-  raycaster.setFromCamera(mouse, camera);
-  const intersects = raycaster.intersectObjects(objects, true);
-  return intersects.length > 0 ? intersects[0] : null;
-}
-function gridDistance(a, b) {
-  const dx = b.x - a.x;
-  const dz = b.z - a.z;
-  return Math.sqrt(dx * dx + dz * dz);
-}
-function gridManhattanDistance(a, b) {
-  return Math.abs(b.x - a.x) + Math.abs(b.z - a.z);
-}
-function getNeighbors(x, z, includeDiagonal = false) {
-  const neighbors = [
-    { x: x + 1, z },
-    { x: x - 1, z },
-    { x, z: z + 1 },
-    { x, z: z - 1 }
-  ];
-  if (includeDiagonal) {
-    neighbors.push(
-      { x: x + 1, z: z + 1 },
-      { x: x - 1, z: z - 1 },
-      { x: x + 1, z: z - 1 },
-      { x: x - 1, z: z + 1 }
-    );
-  }
-  return neighbors;
-}
-function isInBounds(x, z, bounds) {
-  return x >= bounds.minX && x <= bounds.maxX && z >= bounds.minZ && z <= bounds.maxZ;
-}
-function getCellsInRadius(centerX, centerZ, radius) {
-  const cells = [];
-  const radiusSquared = radius * radius;
-  const minX = Math.floor(centerX - radius);
-  const maxX = Math.ceil(centerX + radius);
-  const minZ = Math.floor(centerZ - radius);
-  const maxZ = Math.ceil(centerZ + radius);
-  for (let x = minX; x <= maxX; x++) {
-    for (let z = minZ; z <= maxZ; z++) {
-      const dx = x - centerX;
-      const dz = z - centerZ;
-      if (dx * dx + dz * dz <= radiusSquared) {
-        cells.push({ x, z });
-      }
-    }
-  }
-  return cells;
-}
-function createGridHighlight(color = 16776960, opacity = 0.3) {
-  const geometry = new 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
-  };
-}
-
 // components/avl/lib/avl-schema-parser.ts
 function getEntity(orbital) {
   const entity = orbital.entity;
@@ -4969,10 +2731,10 @@ function parseApplicationLevel(schema) {
   }
   const count = schema.orbitals.length;
   const cols = Math.ceil(Math.sqrt(count));
-  const rows2 = Math.ceil(count / cols);
+  const rows = Math.ceil(count / cols);
   const spacing = 200;
   const gridW = cols * spacing;
-  const gridH = rows2 * spacing;
+  const gridH = rows * spacing;
   const originX = (600 - gridW) / 2 + spacing / 2;
   const originY = (400 - gridH) / 2 + spacing / 2;
   schema.orbitals.forEach((orbital, i) => {
@@ -5505,7 +3267,7 @@ Avl3DLabel.displayName = "Avl3DLabel";
 var Avl3DTooltip = ({
   position,
   title,
-  rows: rows2,
+  rows,
   accentColor = "#5b9bd5"
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5543,7 +3305,7 @@ var Avl3DTooltip = ({
                 children: title
               }
             ),
-            rows2.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(
+            rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(
               Box,
               {
                 style: {
@@ -5597,10 +3359,10 @@ var Avl3DOrbitalNode = ({
   position,
   onClick
 }) => {
-  const groupRef = React10.useRef(null);
-  const [hovered, setHovered] = React10.useState(false);
-  const scale = React10.useMemo(() => 0.6 + Math.min(traitCount, 8) * 0.3, [traitCount]);
-  const currentScale = React10.useRef(scale);
+  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 targetScale = hovered ? scale * 1.06 : scale;
   fiber.useFrame((_, delta) => {
     if (!groupRef.current) return;
@@ -5742,7 +3504,7 @@ var Avl3DCrossWire = ({
   eventName,
   color = AVL_3D_COLORS.crossWire
 }) => {
-  const { tubeArgs, midpoint } = React10.useMemo(() => {
+  const { tubeArgs, midpoint } = React7.useMemo(() => {
     const curve = arcCurve3D(from, to, 2);
     const mid = curve.getPoint(0.5);
     return {
@@ -5781,9 +3543,9 @@ var Avl3DApplicationScene = ({
   data,
   onOrbitalClick
 }) => {
-  const groupRef = React10.useRef(null);
-  const [, setHoverTrigger] = React10.useState(0);
-  const orbitalPositions = React10.useMemo(() => {
+  const groupRef = React7.useRef(null);
+  const [, setHoverTrigger] = React7.useState(0);
+  const orbitalPositions = React7.useMemo(() => {
     const baseRadius = Math.max(4, data.orbitals.length * 1.5);
     if (data.crossLinks.length === 0) {
       return goldenSpiralPositions(data.orbitals.length, baseRadius);
@@ -5796,7 +3558,7 @@ var Avl3DApplicationScene = ({
     })).filter((e) => e.from >= 0 && e.to >= 0);
     return forceDirectedPositions(data.orbitals.length, edges, baseRadius);
   }, [data.orbitals, data.crossLinks]);
-  const positionByName = React10.useMemo(() => {
+  const positionByName = React7.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     data.orbitals.forEach((orb, i) => {
       const pos = orbitalPositions[i];
@@ -5879,7 +3641,7 @@ var Avl3DEntityCore = ({
   position,
   fields
 }) => {
-  const coreRef = React10.useRef(null);
+  const coreRef = React7.useRef(null);
   fiber.useFrame((_, delta) => {
     if (!coreRef.current) return;
     coreRef.current.rotation.y += delta * 0.3;
@@ -6032,8 +3794,8 @@ function TraitOrbit({
   onClick,
   onHover
 }) {
-  const groupRef = React10.useRef(null);
-  const angleRef = React10.useRef(Math.random() * Math.PI * 2);
+  const groupRef = React7.useRef(null);
+  const angleRef = React7.useRef(Math.random() * Math.PI * 2);
   fiber.useFrame((_, delta) => {
     angleRef.current += delta * speed;
     if (!groupRef.current) return;
@@ -6164,9 +3926,9 @@ var Avl3DOrbitalScene = ({
   highlightedTrait,
   onTraitHighlight
 }) => {
-  const [localHighlight, setLocalHighlight] = React10.useState(null);
+  const [localHighlight, setLocalHighlight] = React7.useState(null);
   const activeHighlight = highlightedTrait ?? localHighlight;
-  const traitOrbits = React10.useMemo(() => {
+  const traitOrbits = React7.useMemo(() => {
     return data.traits.map((trait, i) => ({
       name: trait.name,
       radius: 3 + i * 1.2,
@@ -6177,7 +3939,7 @@ var Avl3DOrbitalScene = ({
       transitionCount: trait.transitionCount
     }));
   }, [data.traits]);
-  const pagePositions = React10.useMemo(() => {
+  const pagePositions = React7.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;
@@ -6241,12 +4003,12 @@ var Avl3DStateNode = ({
   outgoingCount = 0,
   onClick
 }) => {
-  const [hovered, setHovered] = React10.useState(false);
+  const [hovered, setHovered] = React7.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 = React10.useRef(1);
+  const currentScale = React7.useRef(1);
   fiber.useFrame((_, delta) => {
     currentScale.current = THREE6.MathUtils.damp(currentScale.current, targetScale, 6, delta);
   });
@@ -6420,8 +4182,8 @@ var Avl3DTransitionArc = ({
   onClick,
   color = AVL_3D_COLORS.transitionArc
 }) => {
-  const [hovered, setHovered] = React10.useState(false);
-  const { tubeArgs, labelPos, guardPos, arrowPos, arrowQuat, effectPositions } = React10.useMemo(() => {
+  const [hovered, setHovered] = React7.useState(false);
+  const { tubeArgs, labelPos, guardPos, arrowPos, arrowQuat, effectPositions } = React7.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);
@@ -6554,7 +4316,7 @@ var Avl3DTraitScene = ({
   data,
   onTransitionClick
 }) => {
-  const statePositions = React10.useMemo(() => {
+  const statePositions = React7.useMemo(() => {
     const radius = Math.max(3, data.states.length * 0.8);
     const positions = fibonacciSpherePositions(data.states.length, radius);
     const posMap = /* @__PURE__ */ new Map();
@@ -6564,7 +4326,7 @@ var Avl3DTraitScene = ({
     });
     return posMap;
   }, [data.states]);
-  const transitionIndices = React10.useMemo(() => {
+  const transitionIndices = React7.useMemo(() => {
     const pairCount = /* @__PURE__ */ new Map();
     return data.transitions.map((t) => {
       const key = `${t.from}->${t.to}`;
@@ -6573,7 +4335,7 @@ var Avl3DTraitScene = ({
       return idx;
     });
   }, [data.transitions]);
-  const transitionCounts = React10.useMemo(() => {
+  const transitionCounts = React7.useMemo(() => {
     const incoming = /* @__PURE__ */ new Map();
     const outgoing = /* @__PURE__ */ new Map();
     for (const t of data.transitions) {
@@ -6683,11 +4445,11 @@ var Avl3DExprTree = ({
   expression,
   position
 }) => {
-  const layoutResults = React10.useMemo(() => {
+  const layoutResults = React7.useMemo(() => {
     const origin = { x: position[0], y: position[1], z: position[2] };
     return treeLayout3D(expression, origin, 2.5, 1.5);
   }, [expression, position]);
-  const edges = React10.useMemo(() => {
+  const edges = React7.useMemo(() => {
     const result = [];
     function collectEdges(node, parentPos) {
       const entry = layoutResults.find((r) => r.node === node);
@@ -6967,7 +4729,7 @@ var Avl3DEffects = ({
   const dof = DOF_CONFIG[level];
   const sparkles = SPARKLE_CONFIGS[level];
   const stars = STARS_CONFIG[level];
-  const starsKey = React10.useMemo(() => `stars-${level}`, [level]);
+  const starsKey = React7.useMemo(() => `stars-${level}`, [level]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       drei.Stars,
@@ -7031,16 +4793,16 @@ var DEFAULT_CONFIG2 = {
   modelOverrides: {},
   effectsEnabled: true
 };
-var Avl3DContext = React10.createContext(DEFAULT_CONFIG2);
+var Avl3DContext = React7.createContext(DEFAULT_CONFIG2);
 function useAvl3DConfig() {
-  return React10.useContext(Avl3DContext);
+  return React7.useContext(Avl3DContext);
 }
 function CameraController({ targetPosition, targetLookAt, animated }) {
   const { camera } = fiber.useThree();
-  const targetPosVec = React10.useRef(new THREE6__namespace.Vector3(...targetPosition));
-  const targetLookVec = React10.useRef(new THREE6__namespace.Vector3(...targetLookAt));
-  const isAnimating = React10.useRef(false);
-  React10.useEffect(() => {
+  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);
     if (!newTarget.equals(targetPosVec.current) || !newLookAt.equals(targetLookVec.current)) {
@@ -7069,8 +4831,8 @@ function CameraController({ targetPosition, targetLookAt, animated }) {
   return null;
 }
 function SceneFade({ animating, children }) {
-  const groupRef = React10.useRef(null);
-  const opacityRef = React10.useRef(1);
+  const groupRef = React7.useRef(null);
+  const opacityRef = React7.useRef(1);
   fiber.useFrame((_, delta) => {
     if (!groupRef.current) return;
     const target = animating ? 0 : 1;
@@ -7094,7 +4856,7 @@ var Avl3DViewer = ({
   modelOverrides = {}
 }) => {
   const { t } = hooks.useTranslate();
-  const schema = React10.useMemo(() => {
+  const schema = React7.useMemo(() => {
     if (typeof schemaProp === "string") {
       try {
         return JSON.parse(schemaProp);
@@ -7104,12 +4866,12 @@ var Avl3DViewer = ({
     }
     return schemaProp;
   }, [schemaProp]);
-  const configValue = React10.useMemo(() => ({
+  const configValue = React7.useMemo(() => ({
     modelOverrides,
     effectsEnabled: effects
   }), [modelOverrides, effects]);
-  const [state, dispatch] = React10.useReducer(zoomReducer, initialZoomState);
-  React10.useEffect(() => {
+  const [state, dispatch] = React7.useReducer(zoomReducer, initialZoomState);
+  React7.useEffect(() => {
     if (initialOrbital) {
       dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: initialOrbital, targetPosition: { x: 0, y: 0 } });
       setTimeout(() => dispatch({ type: "ANIMATION_COMPLETE" }), 0);
@@ -7121,35 +4883,35 @@ var Avl3DViewer = ({
       }
     }
   }, [initialOrbital, initialTrait]);
-  React10.useEffect(() => {
+  React7.useEffect(() => {
     onZoomChange?.(state.level, {
       orbital: state.selectedOrbital ?? void 0,
       trait: state.selectedTrait ?? void 0
     });
   }, [state.level, state.selectedOrbital, state.selectedTrait, onZoomChange]);
-  React10.useEffect(() => {
+  React7.useEffect(() => {
     if (!state.animating) return;
     const timer = setTimeout(() => {
       dispatch({ type: "ANIMATION_COMPLETE" });
     }, 800);
     return () => clearTimeout(timer);
   }, [state.animating]);
-  const handleKeyDown = React10.useCallback((e) => {
+  const handleKeyDown = React7.useCallback((e) => {
     if (e.key === "Escape") {
       dispatch({ type: "ZOOM_OUT" });
     }
   }, []);
-  const handleOrbitalClick = React10.useCallback((name) => {
+  const handleOrbitalClick = React7.useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const handleTraitClick = React10.useCallback((name) => {
+  const handleTraitClick = React7.useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const [highlightedTrait, setHighlightedTrait] = React10__namespace.default.useState(null);
-  const handleTransitionClick = React10.useCallback((index) => {
+  const [highlightedTrait, setHighlightedTrait] = React7__default.default.useState(null);
+  const handleTransitionClick = React7.useCallback((index) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const handleBreadcrumbClick = React10.useCallback((targetLevel) => {
+  const handleBreadcrumbClick = React7.useCallback((targetLevel) => {
     const levelOrder = ["application", "orbital", "trait", "transition"];
     const currentIdx = levelOrder.indexOf(state.level);
     const targetIdx = levelOrder.indexOf(targetLevel);
@@ -7158,7 +4920,7 @@ var Avl3DViewer = ({
     }
   }, [state.level]);
   const cameraConfig = CAMERA_POSITIONS[state.level];
-  const sceneContent = React10.useMemo(() => {
+  const sceneContent = React7.useMemo(() => {
     switch (state.level) {
       case "application": {
         const data = parseApplicationLevel(schema);
@@ -7232,7 +4994,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(React10__namespace.default.Fragment, { children: [
+            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React7__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,
@@ -7521,11 +5283,7 @@ exports.CAMERA_POSITIONS = CAMERA_POSITIONS;
 exports.Camera3D = Camera3D;
 exports.Canvas3DErrorBoundary = Canvas3DErrorBoundary;
 exports.Canvas3DLoadingState = Canvas3DLoadingState;
-exports.GameBoard3D = GameBoard3D;
 exports.GameCanvas3D = GameCanvas3D;
-exports.GameCanvas3DBattleTemplate = GameCanvas3DBattleTemplate;
-exports.GameCanvas3DCastleTemplate = GameCanvas3DCastleTemplate;
-exports.GameCanvas3DWorldMapTemplate = GameCanvas3DWorldMapTemplate;
 exports.Lighting3D = Lighting3D;
 exports.ModelLoader = ModelLoader;
 exports.Scene3D = Scene3D;