@almadar/ui 5.105.0 → 5.107.0

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

@@ -1,5 +1,4 @@
-import * as React10 from 'react';
-import React10__default, { forwardRef, useRef, useEffect, useImperativeHandle, useState, useMemo, useCallback, createContext, useContext, Component, useSyncExternalStore, useReducer } from 'react';
+import React7, { forwardRef, useRef, useEffect, useImperativeHandle, useState, useMemo, useCallback, createContext, useContext, Component, useReducer } from 'react';
 import { useThree, useFrame, Canvas, useLoader } from '@react-three/fiber';
 import * as THREE6 from 'three';
 import { Vector3, QuadraticBezierCurve3, MathUtils, Quaternion } from 'three';
@@ -14,8 +13,6 @@ import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
 import { EventBusContext, useTraitScope } from '@almadar/ui/providers';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as LucideIcons from 'lucide-react';
-import { Loader2 } from 'lucide-react';
 import { EffectComposer, Bloom, DepthOfField, Vignette } from '@react-three/postprocessing';
 import { useTranslate } from '@almadar/ui/hooks';
 
@@ -707,7 +704,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],
@@ -1427,7 +1424,7 @@ function useEmitEvent() {
   );
 }
 
-// components/game/shared/hooks/useGameCanvas3DEvents.ts
+// components/game/three/hooks/useGameCanvas3DEvents.ts
 function useGameCanvas3DEvents(options) {
   const {
     tileClickEvent,
@@ -1566,431 +1563,31 @@ 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__ */ 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__ */ jsx(
-          ModelLoader,
-          {
-            url: model.url,
-            scale: 0.95,
-            rotation: [0, tile.rotation ?? 0, 0],
-            fallbackGeometry: "box",
-            castShadow: true,
-            receiveShadow: true
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ 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__ */ jsx("boxGeometry", { args: [0.95, 0.2, 0.95] }),
-        /* @__PURE__ */ 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 = useLoader(THREE6.TextureLoader, sheetUrl);
-  const meshRef = useRef(null);
-  const matRef = useRef(null);
-  const [aspect, setAspect] = useState(1);
-  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.NearestFilter;
-    texture.minFilter = THREE6.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__ */ jsxs("mesh", { ref: meshRef, position: [0, height / 2, 0], children: [
-    /* @__PURE__ */ jsx("planeGeometry", { args: [height * aspect, height] }),
-    /* @__PURE__ */ jsx(
-      "meshBasicMaterial",
-      {
-        ref: matRef,
-        map: texture,
-        transparent: true,
-        alphaTest: 0.1,
-        side: THREE6.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 = useRef(/* @__PURE__ */ new Map());
-  const loadingRef = useRef(/* @__PURE__ */ new Set());
-  const [pendingCount, setPendingCount] = useState(0);
-  const [, forceTick] = useState(0);
-  const atlasUrls = useMemo(() => {
-    const set = /* @__PURE__ */ new Set();
-    for (const unit of units) {
-      const url = unitAtlasUrl(unit);
-      if (url) set.add(url);
-    }
-    return [...set];
-  }, [units]);
-  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 = 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 = 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__ */ jsxs(
-    "group",
-    {
-      position,
-      onClick: (e) => onUnitClick(unit, e),
-      userData: { type: "unit", unitId: unit.id },
-      children: [
-        isSelected && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.05, 0], rotation: [-Math.PI / 2, 0, 0], children: [
-          /* @__PURE__ */ jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
-          /* @__PURE__ */ jsx("meshBasicMaterial", { color: SELECTION_RING_COLOR_3D, transparent: true, opacity: 0.8 })
-        ] }),
-        hasAtlas && initialFrame ? (
-          /* Animated sprite-sheet billboard — single cropped frame, by state */
-          /* @__PURE__ */ jsx(Billboard, { children: /* @__PURE__ */ 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__ */ jsx(
-            ModelLoader,
-            {
-              url: model.url,
-              scale: modelScale,
-              rotation: [0, unit.heading ?? 0, 0],
-              animation: unit.animation ?? "idle",
-              fallbackGeometry: "box",
-              castShadow: true
-            }
-          )
-        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("mesh", { position: [0, primitiveRadius, 0], children: [
-            /* @__PURE__ */ jsx("cylinderGeometry", { args: [primitiveRadius, primitiveRadius, primitiveRadius * 0.33, 8] }),
-            /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-          ] }),
-          /* @__PURE__ */ jsxs("mesh", { position: [0, primitiveRadius * 2, 0], children: [
-            /* @__PURE__ */ jsx("capsuleGeometry", { args: [primitiveRadius * 0.67, primitiveRadius * 1.33, 4, 8] }),
-            /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-          ] }),
-          /* @__PURE__ */ jsxs("mesh", { position: [0, primitiveRadius * 3, 0], children: [
-            /* @__PURE__ */ jsx("sphereGeometry", { args: [primitiveRadius * 0.4, 8, 8] }),
-            /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-          ] })
-        ] }),
-        unit.health !== void 0 && unit.maxHealth !== void 0 && /* @__PURE__ */ jsxs("group", { position: [0, billboardHeight, 0], children: [
-          /* @__PURE__ */ jsxs("mesh", { position: [-0.5 / 2, 0, 0], children: [
-            /* @__PURE__ */ jsx("planeGeometry", { args: [HEALTHBAR_3D.width, HEALTHBAR_HEIGHT] }),
-            /* @__PURE__ */ jsx("meshBasicMaterial", { color: HEALTHBAR_3D.bg })
-          ] }),
-          /* @__PURE__ */ jsxs(
-            "mesh",
-            {
-              position: [
-                -0.5 / 2 + HEALTHBAR_3D.width * (unit.health / unit.maxHealth) / 2,
-                0,
-                0.01
-              ],
-              children: [
-                /* @__PURE__ */ jsx("planeGeometry", { args: [HEALTHBAR_3D.width * (unit.health / unit.maxHealth), HEALTHBAR_HEIGHT] }),
-                /* @__PURE__ */ jsx("meshBasicMaterial", { color: healthbarFill3D(unit.health / unit.maxHealth) })
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function FeatureMesh3D({
-  feature,
-  position,
-  model,
-  onFeatureClick
-}) {
-  if (model?.url) {
-    return /* @__PURE__ */ 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__ */ jsxs(
-      "group",
-      {
-        position,
-        onClick: (e) => onFeatureClick(feature, e),
-        userData: { type: "feature", featureId: feature.id },
-        children: [
-          /* @__PURE__ */ jsxs("mesh", { position: [0, 0.4, 0], children: [
-            /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.1, 0.15, 0.8, 6] }),
-            /* @__PURE__ */ jsx("meshStandardMaterial", { color: TREE_COLORS_3D.trunk })
-          ] }),
-          /* @__PURE__ */ jsxs("mesh", { position: [0, 0.9, 0], children: [
-            /* @__PURE__ */ jsx("coneGeometry", { args: [0.5, 0.8, 8] }),
-            /* @__PURE__ */ jsx("meshStandardMaterial", { color: TREE_COLORS_3D.foliage })
-          ] })
-        ]
-      }
-    );
-  }
-  if (feature.type === "rock") {
-    return /* @__PURE__ */ jsxs(
-      "mesh",
-      {
-        position: [position[0], position[1] + 0.3, position[2]],
-        onClick: (e) => onFeatureClick(feature, e),
-        userData: { type: "feature", featureId: feature.id },
-        children: [
-          /* @__PURE__ */ jsx("dodecahedronGeometry", { args: [0.3, 0] }),
-          /* @__PURE__ */ 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
@@ -2023,109 +1620,136 @@ function FollowCamera3D({
   });
   return null;
 }
-function LerpedGroup3D({
-  target,
-  enabled,
-  children
-}) {
-  const ref = useRef(null);
-  const goal = useRef(new THREE6.Vector3());
-  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__ */ jsx("group", { ref, position: target, children });
+function SpriteBillboard({ node, world }) {
+  const texture = useLoader(THREE6.TextureLoader, node.asset.url);
+  const img = texture.image;
+  const imgW = img?.width || 1;
+  const imgH = img?.height || 1;
+  if (node.frame) {
+    texture.repeat.set(node.frame.w / imgW, node.frame.h / imgH);
+    texture.offset.set(node.frame.x / imgW, 1 - (node.frame.y + node.frame.h) / imgH);
+    texture.magFilter = texture.minFilter = THREE6.NearestFilter;
+    texture.needsUpdate = true;
+  }
+  const aspect = node.frame ? node.frame.w / node.frame.h : imgW / imgH;
+  const height = node.height ?? 1;
+  const width = node.width ?? height * aspect;
+  return /* @__PURE__ */ jsx(Billboard, { position: [world[0], world[1] + height / 2, world[2]], children: /* @__PURE__ */ jsxs("mesh", { children: [
+    /* @__PURE__ */ jsx("planeGeometry", { args: [width, height] }),
+    /* @__PURE__ */ jsx(
+      "meshBasicMaterial",
+      {
+        map: texture,
+        transparent: true,
+        alphaTest: 0.1,
+        side: THREE6.DoubleSide,
+        opacity: node.opacity ?? 1
+      }
+    )
+  ] }) });
+}
+function Sprite3D({ node, projector }) {
+  if (node.asset.dimension === "3d" && node.asset.url) {
+    return /* @__PURE__ */ jsx("group", { position: projector.toWorld(node.position), children: /* @__PURE__ */ jsx(
+      ModelLoader,
+      {
+        url: node.asset.url,
+        scale: node.width ?? projector.cellSize,
+        rotation: [0, node.rotation ?? 0, 0],
+        fallbackGeometry: "box",
+        castShadow: true,
+        receiveShadow: true
+      }
+    ) });
+  }
+  if (!node.asset.url) return null;
+  return /* @__PURE__ */ jsx(SpriteBillboard, { node, world: projector.toWorld(node.position) });
+}
+function Shape3D({ node, projector }) {
+  const world = projector.toWorld(node.position);
+  const color = node.fill ?? node.stroke ?? "#ffffff";
+  let geometry;
+  switch (node.shape) {
+    case "cell":
+    case "rect": {
+      const w = node.shape === "cell" ? projector.cellSize * 0.95 : node.width ?? projector.cellSize;
+      const h = node.shape === "cell" ? projector.cellSize * 0.95 : node.height ?? projector.cellSize;
+      geometry = /* @__PURE__ */ jsx("planeGeometry", { args: [w, h] });
+      break;
+    }
+    case "ellipse": {
+      const radiusX = node.radiusX ?? 0.4;
+      geometry = node.stroke && !node.fill ? /* @__PURE__ */ jsx("ringGeometry", { args: [Math.max(0, radiusX - 0.08), radiusX, 32] }) : /* @__PURE__ */ jsx("circleGeometry", { args: [radiusX, 32] });
+      break;
+    }
+    case "poly": {
+      if (!node.points || node.points.length === 0) return null;
+      const s = new THREE6.Shape();
+      node.points.forEach((p, i) => {
+        if (i === 0) s.moveTo(p.x, p.y);
+        else s.lineTo(p.x, p.y);
+      });
+      s.closePath();
+      geometry = /* @__PURE__ */ jsx("shapeGeometry", { args: [s] });
+      break;
+    }
+    default:
+      return null;
+  }
+  return /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [world[0], world[1] + 0.02, world[2]], children: [
+    geometry,
+    /* @__PURE__ */ jsx("meshBasicMaterial", { color, transparent: true, opacity: node.opacity ?? 1, side: THREE6.DoubleSide })
+  ] });
 }
-function EventMarker3D({ event, position }) {
-  return /* @__PURE__ */ jsx(Billboard, { position, children: /* @__PURE__ */ jsx(
+function Text3D({ node, projector }) {
+  const world = projector.toWorld(node.position);
+  return /* @__PURE__ */ jsx(Billboard, { position: [world[0], world[1] + 1.2, world[2]], children: /* @__PURE__ */ jsx(
     Text,
     {
       fontSize: 0.32,
-      color: 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__ */ 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__ */ jsx("group", { children: Array.from({ length: cells }, (_, c) => /* @__PURE__ */ jsx("group", { position: [x0 + c + 0.5, topY - 0.475, 0], children: /* @__PURE__ */ jsx(ModelLoader, { url: model, scale: 0.95, fallbackGeometry: "box", castShadow: true, receiveShadow: true }) }, c)) }, `plat-${i}`);
-      }
-      return /* @__PURE__ */ jsxs(
-        "mesh",
-        {
-          position: [(p.x + p.width / 2) / ppu, topY - p.height / 2 / ppu, 0],
-          children: [
-            /* @__PURE__ */ jsx("boxGeometry", { args: [p.width / ppu, p.height / ppu, 1] }),
-            /* @__PURE__ */ 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__ */ jsx("group", { position: [fx, fy, 0], children: /* @__PURE__ */ jsx(ModelLoader, { url: model.url, scale: 0.6, tint: feature.color, fallbackGeometry: "sphere", castShadow: true }) }, feature.id ?? `sfeat-${i}`);
-    }),
-    events.map((ev, i) => /* @__PURE__ */ jsx(
-      EventMarker3D,
-      {
-        event: ev,
-        position: [ev.x / ppu, (worldHeight - (ev.y ?? 0)) / ppu + 0.8, 0.2]
-      },
-      ev.id ?? `sev-${i}`
-    )),
-    /* @__PURE__ */ jsx(LerpedGroup3D, { target: playerPos, enabled: interpolate, children: playerSprite?.url ? /* @__PURE__ */ jsx("group", { position: [0, playerH / 2, 0], children: /* @__PURE__ */ jsx(
-      ModelLoader,
-      {
-        url: playerSprite.url,
-        scale: playerH,
-        rotation: [0, player.facingRight ? 90 : -90, 0],
-        animation: player.animation ?? "idle",
-        fallbackGeometry: "box",
-        castShadow: true
-      }
-    ) }) : /* @__PURE__ */ jsxs("mesh", { position: [0, playerH / 2, 0], children: [
-      /* @__PURE__ */ jsx("capsuleGeometry", { args: [playerH * 0.25, playerH * 0.5, 4, 8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color: SIDE_PLAYER_COLOR_3D })
-    ] }) })
-  ] });
+function Drawable3D({ node, projector }) {
+  switch (node.type) {
+    case "draw-sprite":
+      return /* @__PURE__ */ jsx(Sprite3D, { node, projector });
+    case "draw-shape":
+      return /* @__PURE__ */ jsx(Shape3D, { node, projector });
+    case "draw-text":
+      return /* @__PURE__ */ jsx(Text3D, { node, projector });
+    case "draw-sprite-layer":
+      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Sprite3D, { node: item, projector }, i)) });
+    case "draw-shape-layer":
+      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Shape3D, { node: item, projector }, i)) });
+    case "draw-text-layer":
+      return /* @__PURE__ */ jsx(Fragment, { children: node.items.map((item, i) => /* @__PURE__ */ jsx(Text3D, { node: item, projector }, i)) });
+  }
+}
+
+// lib/drawable/projector3d.ts
+function create3DProjector(opts = {}) {
+  const cellSize = opts.cellSize ?? 1;
+  const offsetX = opts.offsetX ?? 0;
+  const offsetZ = opts.offsetZ ?? 0;
+  return {
+    cellSize,
+    toWorld: (pos) => [pos.x * cellSize + offsetX, pos.z ?? 0, pos.y * cellSize + offsetZ]
+  };
 }
+
+// components/game/three/game3dTheme.ts
+var GRID_COLORS_3D = {
+  cell: "#444444",
+  section: "#666666"
+};
+var DEFAULT_BACKGROUND_3D = "#1a1a2e";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -2134,35 +1758,18 @@ var DEFAULT_GRID_CONFIG = {
   offsetX: 0,
   offsetZ: 0
 };
-var TILE_TOP_OFFSET = 0.1;
 var GameCanvas3D = 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,
@@ -2172,27 +1779,13 @@ var GameCanvas3D = 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 = useRef(null);
     const controlsRef = useRef(null);
-    const [hoveredTile, setHoveredTile] = useState(null);
     const [internalError, setInternalError] = useState(null);
     const eventBus = useEventBus();
     const keysRef = useRef(/* @__PURE__ */ new Set());
@@ -2219,35 +1812,6 @@ var GameCanvas3D = forwardRef(
         window.removeEventListener("keyup", up);
       };
     }, [keyMap, keyUpMap, eventBus]);
-    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 = useMemo(() => [...preloadAssets, ...atlasSheetUrls], [preloadAssets, atlasSheetUrls]);
-    const { isLoading: assetsLoading, progress, loaded, total } = useAssetLoader({
-      preloadUrls,
-      loader: customAssetLoader
-    });
     const eventHandlers = useGameCanvas3DEvents({
       tileClickEvent,
       unitClickEvent,
@@ -2256,34 +1820,35 @@ var GameCanvas3D = forwardRef(
       tileHoverEvent,
       tileLeaveEvent,
       unitAnimationEvent,
-      cameraChangeEvent,
-      onTileClick,
-      onUnitClick,
-      onFeatureClick,
-      onCanvasClick,
-      onTileHover,
-      onUnitAnimation
+      cameraChangeEvent
     });
+    const drawnItems = useMemo(() => collectDrawnItems(drawables ?? []), [drawables]);
+    const scenePositions = useMemo(() => drawnItems.map((i) => i.pos), [drawnItems]);
+    const hitIndex = useMemo(() => buildHitIndex(drawnItems), [drawnItems]);
     const gridBounds = useMemo(() => {
-      if (tiles.length === 0) {
+      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 = 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 = useMemo(
+      () => [
         (gridBounds.minX + gridBounds.maxX) / 2,
         0,
         (gridBounds.minZ + gridBounds.maxZ) / 2
-      ];
-    }, [gridBounds]);
+      ],
+      [gridBounds]
+    );
     const gridConfig = useMemo(
       () => ({
         ...DEFAULT_GRID_CONFIG,
@@ -2292,12 +1857,12 @@ var GameCanvas3D = forwardRef(
       }),
       [gridBounds]
     );
-    const gridToWorld2 = 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 = useMemo(
+      () => create3DProjector({
+        cellSize: gridConfig.cellSize,
+        offsetX: -gridBounds.minX * gridConfig.cellSize,
+        offsetZ: -gridBounds.minZ * gridConfig.cellSize
+      }),
       [gridBounds, gridConfig]
     );
     useImperativeHandle(ref, () => ({
@@ -2331,42 +1896,8 @@ var GameCanvas3D = forwardRef(
           return canvas.toDataURL("image/png");
         }
         return null;
-      },
-      export: () => ({
-        tiles,
-        units,
-        features
-      })
+      }
     }));
-    const handleTileClick = useCallback(
-      (tile, event) => {
-        eventHandlers.handleTileClick(tile, event);
-      },
-      [eventHandlers]
-    );
-    const handleUnitClick = useCallback(
-      (unit, event) => {
-        eventHandlers.handleUnitClick(unit, event);
-      },
-      [eventHandlers]
-    );
-    const handleFeatureClick = useCallback(
-      (feature, event) => {
-        if (event) {
-          eventHandlers.handleFeatureClick(feature, event);
-        }
-      },
-      [eventHandlers]
-    );
-    const handleTileHover = useCallback(
-      (tile, event) => {
-        setHoveredTile(tile);
-        if (event) {
-          eventHandlers.handleTileHover(tile, event);
-        }
-      },
-      [eventHandlers]
-    );
     const cameraConfig = useMemo(() => {
       const size = Math.max(
         gridBounds.maxX - gridBounds.minX,
@@ -2379,65 +1910,45 @@ var GameCanvas3D = 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 = 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 = useMemo(() => {
+      if (followTarget) return drawableProjector.toWorld(followTarget);
       return cameraTarget;
-    }, [player, pixelsPerUnit, worldHeight, units, selectedUnitId, gridBounds, gridConfig, cameraTarget]);
-    const followOffset = 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 = useMemo(
+      () => cameraMode === "chase" ? [0, 4, -7] : [5, 7, 5],
+      [cameraMode]
+    );
+    const handleGroundClick = useCallback((e) => {
+      if (!tileClickEvent && !unitClickEvent) return;
+      e.stopPropagation();
+      const cell = {
+        x: Math.round(e.point.x / gridConfig.cellSize + gridBounds.minX),
+        y: Math.round(e.point.z / gridConfig.cellSize + gridBounds.minZ)
+      };
+      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__ */ jsx(
         Canvas3DLoadingState,
         {
-          progress,
-          loaded,
-          total,
+          progress: 1,
+          loaded: 1,
+          total: 1,
           message: loadingMessage,
           className
         }
@@ -2455,7 +1966,7 @@ var GameCanvas3D = forwardRef(
       {
         onError: (err) => setInternalError(err.message),
         onReset: () => setInternalError(null),
-        children: /* @__PURE__ */ jsxs(
+        children: /* @__PURE__ */ jsx(
           "div",
           {
             ref: containerRef,
@@ -2464,193 +1975,103 @@ var GameCanvas3D = forwardRef(
             "data-orientation": orientation,
             "data-camera-mode": cameraMode,
             "data-overlay": overlay,
-            children: [
-              /* @__PURE__ */ jsxs(
-                Canvas,
-                {
-                  shadows,
-                  camera: {
-                    position: cameraConfig.position,
-                    fov: cameraConfig.fov,
-                    near: 0.1,
-                    far: 1e3
-                  },
-                  style: { background: backgroundColor, position: "absolute", inset: 0 },
-                  onClick: (e) => {
-                    if (e.target === e.currentTarget) {
-                      eventHandlers.handleCanvasClick(e);
+            children: /* @__PURE__ */ jsxs(
+              Canvas,
+              {
+                shadows,
+                camera: {
+                  position: cameraConfig.position,
+                  fov: cameraConfig.fov,
+                  near: 0.1,
+                  far: 1e3
+                },
+                style: { background: backgroundColor, position: "absolute", inset: 0 },
+                onClick: (e) => {
+                  if (e.target === e.currentTarget) {
+                    eventHandlers.handleCanvasClick(e);
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(CameraController3D, { onCameraChange: eventHandlers.handleCameraChange }),
+                  (cameraMode === "follow" || cameraMode === "chase") && /* @__PURE__ */ jsx(FollowCamera3D, { target: followWorld, offset: followOffset }),
+                  /* @__PURE__ */ jsx(
+                    Lighting3D,
+                    {
+                      shadows,
+                      shadowBias: -4e-4,
+                      shadowNormalBias: 0.04,
+                      shadowCameraSize: 5,
+                      shadowCameraNear: 0.5,
+                      shadowCameraFar: 500
                     }
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(CameraController3D, { onCameraChange: eventHandlers.handleCameraChange }),
-                    (cameraMode === "follow" || cameraMode === "chase") && /* @__PURE__ */ jsx(
-                      FollowCamera3D,
-                      {
-                        target: followTarget,
-                        offset: followOffset
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Lighting3D,
-                      {
-                        shadows,
-                        shadowBias: -4e-4,
-                        shadowNormalBias: 0.04,
-                        shadowCameraSize: 5,
-                        shadowCameraNear: 0.5,
-                        shadowCameraFar: 500
-                      }
-                    ),
-                    showGrid && /* @__PURE__ */ jsx(
-                      Grid,
-                      {
-                        args: [
-                          Math.max(gridBounds.maxX - gridBounds.minX + 2, 10),
-                          Math.max(gridBounds.maxZ - gridBounds.minZ + 2, 10)
-                        ],
-                        position: [
-                          (gridBounds.maxX - gridBounds.minX) / 2 - 0.5,
-                          0,
-                          (gridBounds.maxZ - gridBounds.minZ) / 2 - 0.5
-                        ],
-                        cellSize: 1,
-                        cellThickness: 1,
-                        cellColor: GRID_COLORS_3D.cell,
-                        sectionSize: 5,
-                        sectionThickness: 1.5,
-                        sectionColor: GRID_COLORS_3D.section,
-                        fadeDistance: 50,
-                        fadeStrength: 1
-                      }
-                    ),
-                    player ? (
-                      /* Side-scroller mode — LOLO-owned pixel space mapped to world units */
-                      /* @__PURE__ */ jsx(
-                        SideScene3D,
-                        {
-                          player,
-                          platforms,
-                          worldHeight,
-                          ppu: pixelsPerUnit,
-                          playerSprite,
-                          tileSprites,
-                          interpolate: interpolateUnits,
-                          features,
-                          events,
-                          assetManifest
-                        }
-                      )
-                    ) : /* @__PURE__ */ 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__ */ jsx(CustomTileRenderer, { tile, position }, key);
-                        }
-                        return /* @__PURE__ */ 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__ */ jsx(CustomFeatureRenderer, { feature, position }, key);
-                        }
-                        return /* @__PURE__ */ 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__ */ jsx(LerpedGroup3D, { target: position, enabled: interpolateUnits, children: CustomUnitRenderer ? /* @__PURE__ */ jsx(CustomUnitRenderer, { unit, position: [0, 0, 0] }) : /* @__PURE__ */ jsx(
-                          UnitMesh3D,
+                  ),
+                  showGrid && /* @__PURE__ */ jsx(
+                    Grid,
+                    {
+                      args: [
+                        Math.max(gridBounds.maxX - gridBounds.minX + 2, 10),
+                        Math.max(gridBounds.maxZ - gridBounds.minZ + 2, 10)
+                      ],
+                      position: [
+                        (gridBounds.maxX - gridBounds.minX) / 2 - 0.5,
+                        0,
+                        (gridBounds.maxZ - gridBounds.minZ) / 2 - 0.5
+                      ],
+                      cellSize: 1,
+                      cellThickness: 1,
+                      cellColor: GRID_COLORS_3D.cell,
+                      sectionSize: 5,
+                      sectionThickness: 1.5,
+                      sectionColor: GRID_COLORS_3D.section,
+                      fadeDistance: 50,
+                      fadeStrength: 1
+                    }
+                  ),
+                  drawables && drawables.length > 0 && /* @__PURE__ */ jsx("group", { children: drawables.map((node, i) => /* @__PURE__ */ jsx(Drawable3D, { node, projector: drawableProjector }, i)) }),
+                  (tileClickEvent || unitClickEvent) && /* @__PURE__ */ jsxs(
+                    "mesh",
+                    {
+                      rotation: [-Math.PI / 2, 0, 0],
+                      position: [
+                        (gridBounds.maxX - gridBounds.minX) / 2 * gridConfig.cellSize,
+                        0,
+                        (gridBounds.maxZ - gridBounds.minZ) / 2 * gridConfig.cellSize
+                      ],
+                      onClick: handleGroundClick,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "planeGeometry",
                           {
-                            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__ */ jsx(
-                          EventMarker3D,
-                          {
-                            event: ev,
-                            position: [position[0], position[1] + 1.4, position[2]]
-                          },
-                          ev.id ?? `ev-${i}`
-                        );
-                      })
-                    ] }),
-                    children,
-                    /* @__PURE__ */ jsx(
-                      OrbitControls,
-                      {
-                        ref: controlsRef,
-                        enabled: cameraMode !== "follow" && cameraMode !== "chase",
-                        target: cameraTarget,
-                        enableDamping: true,
-                        dampingFactor: 0.05,
-                        enableZoom: true,
-                        enablePan: true,
-                        touches: { ONE: THREE6.TOUCH.ROTATE, TWO: THREE6.TOUCH.DOLLY_PAN },
-                        minDistance: 2,
-                        maxDistance: 100,
-                        maxPolarAngle: Math.PI / 2 - 0.1
-                      }
-                    )
-                  ]
-                }
-              ),
-              showCoordinates && hoveredTile && /* @__PURE__ */ jsxs("div", { className: "game-canvas-3d__coordinates", children: [
-                "X: ",
-                hoveredTile.x,
-                ", Z: ",
-                hoveredTile.z ?? hoveredTile.y ?? 0
-              ] }),
-              showTileInfo && hoveredTile && /* @__PURE__ */ jsxs("div", { className: "game-canvas-3d__tile-info", children: [
-                /* @__PURE__ */ jsx("div", { className: "tile-info__type", children: hoveredTile.type }),
-                hoveredTile.terrain && /* @__PURE__ */ jsx("div", { className: "tile-info__terrain", children: hoveredTile.terrain })
-              ] })
-            ]
+                        ),
+                        /* @__PURE__ */ jsx("meshBasicMaterial", { transparent: true, opacity: 0, depthWrite: false })
+                      ]
+                    }
+                  ),
+                  children,
+                  /* @__PURE__ */ jsx(
+                    OrbitControls,
+                    {
+                      ref: controlsRef,
+                      enabled: cameraMode !== "follow" && cameraMode !== "chase",
+                      target: cameraTarget,
+                      enableDamping: true,
+                      dampingFactor: 0.05,
+                      enableZoom: true,
+                      enablePan: true,
+                      touches: { ONE: THREE6.TOUCH.ROTATE, TWO: THREE6.TOUCH.DOLLY_PAN },
+                      minDistance: 2,
+                      maxDistance: 100,
+                      maxPolarAngle: Math.PI / 2 - 0.1
+                    }
+                  )
+                ]
+              }
+            )
           }
         )
       }
@@ -2658,1086 +2079,357 @@ var GameCanvas3D = 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 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__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__ */ jsx(
-    React10__default.Suspense,
-    {
-      fallback: /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-hidden": true,
-          className: props.className,
-          style: { display: "inline-block", ...props.style }
-        }
-      ),
-      children: /* @__PURE__ */ jsx(Lazy, { ...props })
-    }
-  );
-  Wrapped.displayName = `Lazy.${libKey}.${fallbackName}`;
-  return Wrapped;
-}
-var lucideAliases = {
-  close: LucideIcons.X,
-  trash: LucideIcons.Trash2,
-  loader: LucideIcons.Loader2,
-  stop: LucideIcons.Square,
-  volume: LucideIcons.Volume2,
-  "volume-off": LucideIcons.VolumeX,
-  refresh: LucideIcons.RefreshCw,
-  share: LucideIcons.Share2,
-  "sort-asc": LucideIcons.ArrowUpNarrowWide,
-  "sort-desc": LucideIcons.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;
-  const direct = lucideMap[pascal];
-  if (isComponentLike(direct)) return direct;
-  const asIs = lucideMap[name];
-  if (isComponentLike(asIs)) return asIs;
-  return LucideIcons.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__ */ 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.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__ */ 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__ */ 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.Raycaster();
+  const mouse = new THREE6.Vector2(mouseX, mouseY);
+  raycaster.setFromCamera(mouse, camera);
+  const plane = new THREE6.Plane(new THREE6.Vector3(0, 1, 0), -planeY);
+  const target = new THREE6.Vector3();
+  const 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.Raycaster();
+  const mouse = new THREE6.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__ */ 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__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__ */ jsx(
-      Direct,
-      {
-        className: composedClassName,
-        strokeWidth: effectiveStrokeWidth,
-        style: inlineStyle
-      }
-    );
-  }
-  if (RenderedComponent) {
-    return /* @__PURE__ */ 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.HelpCircle;
-  return /* @__PURE__ */ 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.PlaneGeometry(0.95, 0.95);
+  const material = new THREE6.MeshBasicMaterial({
+    color,
+    transparent: true,
+    opacity,
+    side: THREE6.DoubleSide
+  });
+  const mesh = new THREE6.Mesh(geometry, material);
+  mesh.rotation.x = -Math.PI / 2;
+  mesh.position.y = 0.01;
+  return mesh;
 }
-function AtlasImage({
-  asset,
-  size,
-  width,
-  height,
-  fill = false,
-  fit = "contain",
-  alt,
-  className,
-  style,
-  "aria-hidden": ariaHidden
-}) {
-  const [, bump] = React10.useReducer((x) => x + 1, 0);
-  const canvasRef = React10.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.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__ */ jsx("span", { "aria-hidden": true, className: cn("inline-block flex-shrink-0", className), style: { ...boxStyle, objectFit: void 0 } });
-    }
-    return /* @__PURE__ */ 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__ */ 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] = useState(false);
+  const onRevealRef = useRef(onReveal);
+  const onDismissRef = useRef(onDismiss);
+  onRevealRef.current = onReveal;
+  onDismissRef.current = onDismiss;
+  const reveal = useCallback(() => {
+    setRevealed((wasRevealed) => {
+      if (!wasRevealed) onRevealRef.current?.();
+      return true;
+    });
+  }, []);
+  const dismiss = useCallback(() => {
+    setRevealed((wasRevealed) => {
+      if (wasRevealed) onDismissRef.current?.();
+      return false;
+    });
+  }, []);
+  const onPointerDown = useCallback(
+    (e) => {
+      if (!enabled || e.pointerType === "mouse") return;
+      if (revealed) dismiss();
+      else reveal();
+    },
+    [enabled, revealed, reveal, dismiss]
   );
+  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__ */ jsx(Icon, { name: value, className: sizeClass });
-  }
-  if (typeof value === "function") {
-    const IconComp = value;
-    return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
-  }
-  if (React10__default.isValidElement(value)) {
-    return value;
-  }
-  if (typeof value === "object" && value !== null && isIconLike(value)) {
-    const IconComp = value;
-    return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
-  }
-  return value;
-}
-var Button = React10__default.forwardRef(
+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.forwardRef(
   ({
+    padding,
+    paddingX,
+    paddingY,
+    margin,
+    marginX,
+    marginY,
+    bg = "transparent",
+    border = false,
+    rounded = "none",
+    shadow = "none",
+    display,
+    fullWidth = false,
+    fullHeight = false,
+    overflow,
+    position,
     className,
-    variant = "primary",
-    size = "md",
-    isLoading = false,
-    disabled,
-    leftIcon,
-    rightIcon,
-    icon: iconProp,
-    iconRight: iconRightProp,
-    iconAsset,
+    children,
+    as: Component2 = "div",
     action,
     actionPayload,
-    label,
-    children,
+    hoverEvent,
+    tapReveal = true,
+    maxWidth,
     onClick,
-    "data-testid": dataTestId,
-    ...props
+    onMouseEnter,
+    onMouseLeave,
+    onPointerDown,
+    ...rest
   }, 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__ */ 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) => {
+    const handleClick = useCallback((e) => {
       if (action) {
+        e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
-    };
-    return /* @__PURE__ */ jsxs(
-      "button",
+    }, [action, actionPayload, eventBus, onClick]);
+    const handleMouseEnter = useCallback((e) => {
+      if (hoverEvent) {
+        eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
+      }
+      onMouseEnter?.(e);
+    }, [hoverEvent, eventBus, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+      if (hoverEvent) {
+        eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
+      }
+      onMouseLeave?.(e);
+    }, [hoverEvent, eventBus, onMouseLeave]);
+    const { triggerProps } = useTapReveal({
+      enabled: tapReveal && !!hoverEvent,
+      onReveal: useCallback(() => {
+        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
+      }, [hoverEvent, eventBus]),
+      onDismiss: useCallback(() => {
+        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
+      }, [hoverEvent, eventBus])
+    });
+    const handlePointerDown = useCallback((e) => {
+      if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
+      onPointerDown?.(e);
+    }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
+    const isClickable = action || onClick;
+    return React7.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__ */ jsx(Loader2, { className: "h-icon-default w-icon-default animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
-          children || label,
-          resolvedRightIcon && !isLoading && /* @__PURE__ */ 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",
@@ -3798,7 +2490,7 @@ var typographySizeStyles = {
   "2xl": "text-2xl",
   "3xl": "text-3xl"
 };
-var overflowStyles = {
+var overflowStyles2 = {
   visible: "overflow-visible",
   hidden: "overflow-hidden",
   wrap: "break-words overflow-hidden",
@@ -3823,18 +2515,18 @@ var Typography = ({
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component2 = as || defaultElements[variant];
-  return React10__default.createElement(
+  return React7.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
@@ -3896,7 +2588,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__default.createElement(
+  return React7.createElement(
     Component2,
     {
       className: cn(
@@ -3921,939 +2613,6 @@ var Stack = ({
 var VStack = (props) => /* @__PURE__ */ jsx(Stack, { direction: "vertical", ...props });
 var HStack = (props) => /* @__PURE__ */ 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 = useRef(false);
-  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 = 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 = 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 = useCallback(() => {
-    if (endTurnEvent) eventBus.emit(`UI:${endTurnEvent}`, {});
-  }, [endTurnEvent, eventBus]);
-  const handleCancel = useCallback(() => {
-    if (cancelEvent) eventBus.emit(`UI:${cancelEvent}`, {});
-  }, [cancelEvent, eventBus]);
-  const handlePlayAgain = useCallback(() => {
-    if (playAgainEvent) eventBus.emit(`UI:${playAgainEvent}`, {});
-  }, [playAgainEvent, eventBus]);
-  return /* @__PURE__ */ jsxs(VStack, { className: cn("game-board-3d block w-full min-h-[85vh] relative", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "game-board-3d__status absolute top-3 left-3 z-10 flex gap-2 items-center", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "status__phase capitalize", children: phase.replace("_", " ") }),
-      currentTeam && !isGameOver && /* @__PURE__ */ jsxs(Typography, { variant: "small", color: "muted", className: "status__team", children: [
-        "\u2014 ",
-        currentTeam === "player" ? "Your Turn" : "Enemy's Turn"
-      ] }),
-      /* @__PURE__ */ jsxs(Typography, { variant: "small", color: "muted", className: "status__turn", children: [
-        "Turn ",
-        turn
-      ] })
-    ] }),
-    /* @__PURE__ */ 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__ */ jsxs(HStack, { className: "fixed bottom-6 right-6 z-50", gap: "sm", children: [
-      (phase === "selection" || phase === "movement" || phase === "action") && /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "secondary",
-          className: "shadow-xl",
-          onClick: handleCancel,
-          children: "Cancel"
-        }
-      ),
-      phase !== "enemy_turn" && /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "primary",
-          className: "shadow-xl",
-          onClick: handleEndTurn,
-          children: "End Turn"
-        }
-      )
-    ] }),
-    isGameOver && /* @__PURE__ */ jsx("div", { className: "game-board-3d__overlay absolute inset-0 z-20 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxs(VStack, { align: "center", gap: "md", className: "overlay__card p-8 rounded-xl bg-gray-900/90 shadow-2xl", children: [
-      /* @__PURE__ */ jsx(
-        Typography,
-        {
-          variant: "h2",
-          className: cn(
-            "overlay__result",
-            result === "victory" ? "text-yellow-400" : "text-red-500"
-          ),
-          children: result === "victory" ? "Victory!" : "Defeat"
-        }
-      ),
-      /* @__PURE__ */ jsxs(Typography, { variant: "body", color: "muted", className: "overlay__turn-count", children: [
-        "Completed in ",
-        turn,
-        " turn",
-        turn !== 1 ? "s" : ""
-      ] }),
-      /* @__PURE__ */ 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] = useState(false);
-  const onRevealRef = useRef(onReveal);
-  const onDismissRef = useRef(onDismiss);
-  onRevealRef.current = onReveal;
-  onDismissRef.current = onDismiss;
-  const reveal = useCallback(() => {
-    setRevealed((wasRevealed) => {
-      if (!wasRevealed) onRevealRef.current?.();
-      return true;
-    });
-  }, []);
-  const dismiss = useCallback(() => {
-    setRevealed((wasRevealed) => {
-      if (wasRevealed) onDismissRef.current?.();
-      return false;
-    });
-  }, []);
-  const onPointerDown = useCallback(
-    (e) => {
-      if (!enabled || e.pointerType === "mouse") return;
-      if (revealed) dismiss();
-      else reveal();
-    },
-    [enabled, revealed, reveal, dismiss]
-  );
-  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__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 = useCallback((e) => {
-      if (action) {
-        e.stopPropagation();
-        eventBus.emit(`UI:${action}`, actionPayload ?? {});
-      }
-      onClick?.(e);
-    }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = useCallback((e) => {
-      if (hoverEvent) {
-        eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
-      }
-      onMouseEnter?.(e);
-    }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = useCallback((e) => {
-      if (hoverEvent) {
-        eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
-      }
-      onMouseLeave?.(e);
-    }, [hoverEvent, eventBus, onMouseLeave]);
-    const { triggerProps } = useTapReveal({
-      enabled: tapReveal && !!hoverEvent,
-      onReveal: useCallback(() => {
-        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
-      }, [hoverEvent, eventBus]),
-      onDismiss: useCallback(() => {
-        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
-      }, [hoverEvent, eventBus])
-    });
-    const handlePointerDown = useCallback((e) => {
-      if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
-      onPointerDown?.(e);
-    }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
-    const isClickable = action || onClick;
-    return React10__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__ */ jsxs(
-    Box,
-    {
-      className: cn("game-canvas-3d-battle-template block relative w-full min-h-[85vh]", className),
-      children: [
-        /* @__PURE__ */ 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__ */ 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__ */ jsx(Typography, { variant: "body", className: "turn-indicator__label", children: currentTurn === "player" ? "Your Turn" : "Enemy's Turn" }),
-              round != null && /* @__PURE__ */ 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__ */ jsxs(
-    VStack,
-    {
-      className: cn("game-canvas-3d-castle-template block w-full min-h-[85vh]", className),
-      children: [
-        showHeader && name && /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "center", className: "castle-template__header", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "h2", className: "header__name", children: name }),
-          level != null && /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "header__level", children: [
-            "Level ",
-            level
-          ] }),
-          owner && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "header__owner", children: owner })
-        ] }),
-        /* @__PURE__ */ 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__ */ jsxs(HStack, { gap: "sm", align: "center", className: "castle-template__garrison-info", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "garrison-info__label", children: "Garrison:" }),
-          /* @__PURE__ */ 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__ */ 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.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.Raycaster();
-  const mouse = new THREE6.Vector2(mouseX, mouseY);
-  raycaster.setFromCamera(mouse, camera);
-  const plane = new THREE6.Plane(new THREE6.Vector3(0, 1, 0), -planeY);
-  const target = new THREE6.Vector3();
-  const intersection = raycaster.ray.intersectPlane(plane, target);
-  return intersection ? target : null;
-}
-function raycastToObjects(camera, mouseX, mouseY, objects) {
-  const raycaster = new THREE6.Raycaster();
-  const mouse = new THREE6.Vector2(mouseX, mouseY);
-  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.PlaneGeometry(0.95, 0.95);
-  const material = new THREE6.MeshBasicMaterial({
-    color,
-    transparent: true,
-    opacity,
-    side: THREE6.DoubleSide
-  });
-  const mesh = new THREE6.Mesh(geometry, material);
-  mesh.rotation.x = -Math.PI / 2;
-  mesh.position.y = 0.01;
-  return mesh;
-}
-function normalizeMouseCoordinates(clientX, clientY, element) {
-  const rect = element.getBoundingClientRect();
-  return {
-    x: (clientX - rect.left) / rect.width * 2 - 1,
-    y: -((clientY - rect.top) / rect.height) * 2 + 1
-  };
-}
-
 // components/avl/lib/avl-schema-parser.ts
 function getEntity(orbital) {
   const entity = orbital.entity;
@@ -4948,10 +2707,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) => {
@@ -5484,7 +3243,7 @@ Avl3DLabel.displayName = "Avl3DLabel";
 var Avl3DTooltip = ({
   position,
   title,
-  rows: rows2,
+  rows,
   accentColor = "#5b9bd5"
 }) => {
   return /* @__PURE__ */ jsx(
@@ -5522,7 +3281,7 @@ var Avl3DTooltip = ({
                 children: title
               }
             ),
-            rows2.map((row) => /* @__PURE__ */ jsxs(
+            rows.map((row) => /* @__PURE__ */ jsxs(
               Box,
               {
                 style: {
@@ -7124,7 +4883,7 @@ var Avl3DViewer = ({
   const handleTraitClick = useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const [highlightedTrait, setHighlightedTrait] = React10__default.useState(null);
+  const [highlightedTrait, setHighlightedTrait] = React7.useState(null);
   const handleTransitionClick = useCallback((index) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: { x: 0, y: 0 } });
   }, []);
@@ -7211,7 +4970,7 @@ var Avl3DViewer = ({
             gap: "xs",
             align: "center",
             className: "absolute top-2 left-2 z-10 bg-surface/80 backdrop-blur rounded-md px-3 py-1.5",
-            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React10__default.Fragment, { children: [
+            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React7.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
               i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx(
                 Box,
@@ -7487,4 +5246,4 @@ var SpatialHashGrid = class {
   }
 };
 
-export { AVL_3D_COLORS, AssetLoader, Avl3DApplicationScene, Avl3DContext, Avl3DEffects, Avl3DOrbitalScene, Avl3DTraitScene, Avl3DTransitionScene, Avl3DViewer, CAMERA_POSITIONS, Camera3D, Canvas3DErrorBoundary, Canvas3DLoadingState, GameBoard3D, GameCanvas3D, GameCanvas3DBattleTemplate, GameCanvas3DCastleTemplate, GameCanvas3DWorldMapTemplate, Lighting3D, ModelLoader, Scene3D, SpatialHashGrid, arcCurve3D, assetLoader, calculateLODLevel, createGridHighlight, cullInstancedMesh, fibonacciSpherePositions, filterByFrustum, getCellsInRadius, getNeighbors, getVisibleIndices, goldenSpiralPositions, gridDistance, gridManhattanDistance, gridToWorld, isInBounds, isInFrustum, normalizeMouseCoordinates, orbitRingPositions, raycastToObjects, raycastToPlane, selfLoopCurve3D, treeLayout3D, updateInstanceLOD, useAssetLoader, useAvl3DConfig, useGameCanvas3DEvents, useRaycaster, useSceneGraph, useThree3 as useThree, worldToGrid };
+export { AVL_3D_COLORS, AssetLoader, Avl3DApplicationScene, Avl3DContext, Avl3DEffects, Avl3DOrbitalScene, Avl3DTraitScene, Avl3DTransitionScene, Avl3DViewer, CAMERA_POSITIONS, Camera3D, Canvas3DErrorBoundary, Canvas3DLoadingState, GameCanvas3D, Lighting3D, ModelLoader, Scene3D, SpatialHashGrid, arcCurve3D, assetLoader, calculateLODLevel, createGridHighlight, cullInstancedMesh, fibonacciSpherePositions, filterByFrustum, getCellsInRadius, getNeighbors, getVisibleIndices, goldenSpiralPositions, gridDistance, gridManhattanDistance, gridToWorld, isInBounds, isInFrustum, normalizeMouseCoordinates, orbitRingPositions, raycastToObjects, raycastToPlane, selfLoopCurve3D, treeLayout3D, updateInstanceLOD, useAssetLoader, useAvl3DConfig, useGameCanvas3DEvents, useRaycaster, useSceneGraph, useThree3 as useThree, worldToGrid };