@almadar/ui 5.95.0 → 5.97.0

package/dist/components/game/3d/index.js

@@ -1,9 +1,10 @@
-import React6, { forwardRef, useRef, useEffect, useImperativeHandle, useState, useMemo, useCallback, createContext, Component, useContext, useSyncExternalStore, useReducer } from 'react';
+import * as React8 from 'react';
+import React8__default, { forwardRef, useRef, useEffect, useImperativeHandle, useState, useMemo, useCallback, createContext, useContext, Component, useSyncExternalStore, useReducer } from 'react';
 import { useThree, useFrame, Canvas, useLoader } from '@react-three/fiber';
 import * as THREE6 from 'three';
 import { Vector3, QuadraticBezierCurve3, MathUtils, Quaternion } from 'three';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { OrbitControls, Billboard, Grid, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
+import { OrbitControls, Grid, Billboard, Text, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
 import { createLogger } from '@almadar/logger';
 import { GLTFLoader as GLTFLoader$1 } from 'three/examples/jsm/loaders/GLTFLoader';
 import { clone } from 'three/examples/jsm/utils/SkeletonUtils';
@@ -306,6 +307,36 @@ var Canvas3DErrorBoundary = class extends Component {
   }
 };
 var log2 = createLogger("almadar:ui:game:model-loader");
+var gltfCache = /* @__PURE__ */ new Map();
+function loadGltfCached(url, assetRoot) {
+  const key = `${assetRoot}|${url}`;
+  let entry = gltfCache.get(key);
+  if (!entry) {
+    const pending = {
+      promise: new Promise((resolveDone) => {
+        const loader = new GLTFLoader$1();
+        loader.setResourcePath(assetRoot);
+        loader.load(
+          url,
+          (gltf) => {
+            log2.debug("Loaded", { url, clips: gltf.animations.length });
+            pending.gltf = { scene: gltf.scene, animations: gltf.animations };
+            resolveDone();
+          },
+          void 0,
+          (err) => {
+            log2.warn("Failed", { url, error: err instanceof Error ? err : String(err) });
+            pending.error = err instanceof Error ? err : new Error(String(err));
+            resolveDone();
+          }
+        );
+      })
+    };
+    entry = pending;
+    gltfCache.set(key, entry);
+  }
+  return entry;
+}
 function detectAssetRoot(modelUrl) {
   const idx = modelUrl.indexOf("/3d/");
   if (idx !== -1) {
@@ -313,42 +344,30 @@ function detectAssetRoot(modelUrl) {
   }
   return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
 }
+function stateFromEntry(entry) {
+  if (!entry) return { model: null, clips: [], isLoading: false, error: null };
+  if (entry.gltf) return { model: entry.gltf.scene, clips: entry.gltf.animations, isLoading: false, error: null };
+  return { model: null, clips: [], isLoading: !entry.error, error: entry.error ?? null };
+}
 function useGLTFModel(url, resourceBasePath) {
-  const [state, setState] = useState({
-    model: null,
-    isLoading: false,
-    error: null
-  });
+  const [state, setState] = useState(
+    () => stateFromEntry(url ? loadGltfCached(url, resourceBasePath || detectAssetRoot(url)) : null)
+  );
   useEffect(() => {
     if (!url) {
-      setState({ model: null, isLoading: false, error: null });
+      setState({ model: null, clips: [], isLoading: false, error: null });
       return;
     }
-    log2.debug("Loading", { url });
-    setState((prev) => ({ ...prev, isLoading: true, error: null }));
-    const assetRoot = resourceBasePath || detectAssetRoot(url);
-    const loader = new GLTFLoader$1();
-    loader.setResourcePath(assetRoot);
-    loader.load(
-      url,
-      (gltf) => {
-        log2.debug("Loaded", { url });
-        setState({
-          model: gltf.scene,
-          isLoading: false,
-          error: null
-        });
-      },
-      void 0,
-      (err) => {
-        log2.warn("Failed", { url, error: err instanceof Error ? err : String(err) });
-        setState({
-          model: null,
-          isLoading: false,
-          error: err instanceof Error ? err : new Error(String(err))
-        });
-      }
-    );
+    const entry = loadGltfCached(url, resourceBasePath || detectAssetRoot(url));
+    setState(stateFromEntry(entry));
+    if (entry.gltf || entry.error) return;
+    let cancelled = false;
+    void entry.promise.then(() => {
+      if (!cancelled) setState(stateFromEntry(entry));
+    });
+    return () => {
+      cancelled = true;
+    };
   }, [url, resourceBasePath]);
   return state;
 }
@@ -364,21 +383,44 @@ function ModelLoader({
   fallbackGeometry = "box",
   castShadow = true,
   receiveShadow = true,
-  resourceBasePath
+  resourceBasePath,
+  animation,
+  tint
 }) {
-  const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
+  const { model: loadedModel, clips, isLoading, error } = useGLTFModel(url, resourceBasePath);
   const model = useMemo(() => {
     if (!loadedModel) return null;
     const cloned = clone(loadedModel);
     cloned.updateMatrixWorld(true);
+    const tintColor = tint ? new THREE6.Color(tint) : null;
     cloned.traverse((child) => {
       if (child instanceof THREE6.Mesh) {
         child.castShadow = castShadow;
         child.receiveShadow = receiveShadow;
+        if (tintColor && child.material instanceof THREE6.MeshStandardMaterial) {
+          const mat = child.material.clone();
+          mat.color.multiply(tintColor);
+          child.material = mat;
+        }
       }
     });
     return cloned;
-  }, [loadedModel, castShadow, receiveShadow]);
+  }, [loadedModel, castShadow, receiveShadow, tint]);
+  const mixer = useMemo(() => model ? new THREE6.AnimationMixer(model) : null, [model]);
+  useEffect(() => {
+    if (!mixer || !animation || clips.length === 0) return;
+    const wanted = animation.toLowerCase();
+    const clip = clips.find((c) => c.name === animation) ?? clips.find((c) => c.name.toLowerCase() === wanted);
+    if (!clip) return;
+    const action = mixer.clipAction(clip);
+    action.reset().fadeIn(0.15).play();
+    return () => {
+      action.fadeOut(0.15);
+    };
+  }, [mixer, clips, animation]);
+  useFrame((_, delta) => {
+    mixer?.update(delta);
+  });
   const normFactor = useMemo(() => {
     if (!model) return 1;
     const box = new THREE6.Box3().setFromObject(model);
@@ -1695,6 +1737,356 @@ function UnitSpriteBillboard({
     )
   ] });
 }
+function FollowCamera({
+  target,
+  offset
+}) {
+  const { camera } = useThree();
+  const look = useRef(new THREE6.Vector3(target[0], target[1], target[2]));
+  const goal = useRef(new THREE6.Vector3());
+  useFrame((_, delta) => {
+    const t = Math.min(1, delta * 5);
+    goal.current.set(target[0] + offset[0], target[1] + offset[1], target[2] + offset[2]);
+    camera.position.lerp(goal.current, t);
+    look.current.lerp(goal.current.set(target[0], target[1], target[2]), t);
+    camera.lookAt(look.current);
+  });
+  return null;
+}
+function LerpedGroup({
+  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 });
+}
+var SIDE_PLATFORM_COLORS = {
+  ground: "#5b8c3e",
+  platform: "#8b5a2b",
+  hazard: "#cc4444",
+  goal: "#4488cc"
+};
+function SideScene({
+  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[platformType] ?? "#888888" })
+          ]
+        },
+        `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(
+      EventMarker,
+      {
+        event: ev,
+        position: [ev.x / ppu, (worldHeight - (ev.y ?? 0)) / ppu + 0.8, 0.2]
+      },
+      ev.id ?? `sev-${i}`
+    )),
+    /* @__PURE__ */ jsx(LerpedGroup, { 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: "#4488ff" })
+    ] }) })
+  ] });
+}
+var UNIT_BASE_MODEL_SCALE = 0.5;
+var UNIT_BASE_BILLBOARD_HEIGHT = 1.2;
+var UNIT_BASE_PRIMITIVE_RADIUS = 0.3;
+var EVENT_COLORS = {
+  hit: "#ff5544",
+  damage: "#ff5544",
+  attack: "#ff8844",
+  heal: "#44dd66",
+  pickup: "#ffcc33",
+  score: "#ffcc33",
+  death: "#aa3333",
+  win: "#66ff88",
+  lose: "#ff6666"
+};
+function EventMarker({
+  event,
+  position
+}) {
+  return /* @__PURE__ */ jsx(Billboard, { position, children: /* @__PURE__ */ jsx(
+    Text,
+    {
+      fontSize: 0.32,
+      color: EVENT_COLORS[event.type] ?? "#ffffff",
+      outlineWidth: 0.02,
+      outlineColor: "#000000",
+      anchorX: "center",
+      anchorY: "middle",
+      children: event.message ?? event.type
+    }
+  ) });
+}
+function DefaultTile({
+  tile,
+  position,
+  model,
+  isSelected,
+  isHovered,
+  isValidMove,
+  isAttackTarget,
+  onTileClick,
+  onTileHover
+}) {
+  let color = 8421504;
+  if (tile.type === "water") color = 4491468;
+  else if (tile.type === "grass") color = 4500036;
+  else if (tile.type === "sand") color = 14535816;
+  else if (tile.type === "rock") color = 8947848;
+  else if (tile.type === "snow") color = 15658734;
+  let emissive = 0;
+  if (isSelected) emissive = 4473924;
+  else if (isAttackTarget) emissive = 4456448;
+  else if (isValidMove) emissive = 17408;
+  else if (isHovered) emissive = 2236962;
+  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 })
+      ]
+    }
+  );
+}
+function DefaultUnit({
+  unit,
+  position,
+  model,
+  isSelected,
+  unitScale,
+  cellSize,
+  resolveUnitFrame,
+  onUnitClick
+}) {
+  const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
+  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: "#ffff00", transparent: true, opacity: 0.8 })
+        ] }),
+        hasAtlas && initialFrame ? (
+          /* Animated sprite-sheet billboard — single cropped frame, by state */
+          /* @__PURE__ */ jsx(Billboard, { children: /* @__PURE__ */ jsx(
+            UnitSpriteBillboard,
+            {
+              sheetUrl: initialFrame.sheetUrl,
+              resolveFrame: () => resolveUnitFrame(unit.id),
+              height: billboardHeight
+            }
+          ) })
+        ) : model?.url ? (
+          /* GLB unit model — LOLO's `animation` field drives the named clip */
+          /* @__PURE__ */ jsx(
+            ModelLoader,
+            {
+              url: model.url,
+              scale: modelScale,
+              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.25, 0, 0], children: [
+            /* @__PURE__ */ jsx("planeGeometry", { args: [0.5, 0.05] }),
+            /* @__PURE__ */ jsx("meshBasicMaterial", { color: 3355443 })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "mesh",
+            {
+              position: [
+                -0.25 + 0.5 * (unit.health / unit.maxHealth) / 2,
+                0,
+                0.01
+              ],
+              children: [
+                /* @__PURE__ */ jsx("planeGeometry", { args: [0.5 * (unit.health / unit.maxHealth), 0.05] }),
+                /* @__PURE__ */ jsx(
+                  "meshBasicMaterial",
+                  {
+                    color: unit.health / unit.maxHealth > 0.5 ? 4500036 : unit.health / unit.maxHealth > 0.25 ? 11184708 : 16729156
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function DefaultFeature({
+  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: 9127187 })
+          ] }),
+          /* @__PURE__ */ jsxs("mesh", { position: [0, 0.9, 0], children: [
+            /* @__PURE__ */ jsx("coneGeometry", { args: [0.5, 0.8, 8] }),
+            /* @__PURE__ */ jsx("meshStandardMaterial", { color: 2263842 })
+          ] })
+        ]
+      }
+    );
+  }
+  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: 8421504 })
+        ]
+      }
+    );
+  }
+  return null;
+}
 var GameCanvas3D = forwardRef(
   ({
     tiles = [],
@@ -1738,12 +2130,47 @@ var GameCanvas3D = forwardRef(
     selectedTileIds = [],
     selectedUnitId = null,
     unitScale = 1,
+    keyMap,
+    keyUpMap,
+    player,
+    platforms = [],
+    worldHeight = 400,
+    pixelsPerUnit = 32,
+    playerSprite,
+    tileSprites,
+    assetManifest,
+    interpolateUnits = false,
     children
   }, 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());
+    useEffect(() => {
+      if (!keyMap && !keyUpMap) return;
+      const down = (e) => {
+        if (keysRef.current.has(e.code)) return;
+        keysRef.current.add(e.code);
+        const ev = keyMap?.[e.code];
+        if (ev) {
+          eventBus.emit(`UI:${ev}`, {});
+          e.preventDefault();
+        }
+      };
+      const up = (e) => {
+        keysRef.current.delete(e.code);
+        const ev = keyUpMap?.[e.code];
+        if (ev) eventBus.emit(`UI:${ev}`, {});
+      };
+      window.addEventListener("keydown", down);
+      window.addEventListener("keyup", up);
+      return () => {
+        window.removeEventListener("keydown", down);
+        window.removeEventListener("keyup", up);
+      };
+    }, [keyMap, keyUpMap, eventBus]);
     useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
@@ -1913,6 +2340,11 @@ var GameCanvas3D = forwardRef(
             position: [cx, d * 2, cz],
             fov: 45
           };
+        case "follow":
+          return {
+            position: [cx, d * 0.5, cz + d],
+            fov: 45
+          };
         case "perspective":
         default:
           return {
@@ -1921,212 +2353,26 @@ var GameCanvas3D = forwardRef(
           };
       }
     }, [cameraMode, gridBounds]);
-    const DefaultTileRenderer = useCallback(
-      ({ tile, position }) => {
-        const isSelected = tile.id ? selectedTileIds.includes(tile.id) : false;
-        const isHovered = hoveredTile?.id === tile.id;
-        const isValidMove = validMoves.some(
-          (m) => m.x === tile.x && m.z === (tile.z ?? tile.y ?? 0)
-        );
-        const isAttackTarget = attackTargets.some(
-          (m) => m.x === tile.x && m.z === (tile.z ?? tile.y ?? 0)
-        );
-        let color = 8421504;
-        if (tile.type === "water") color = 4491468;
-        else if (tile.type === "grass") color = 4500036;
-        else if (tile.type === "sand") color = 14535816;
-        else if (tile.type === "rock") color = 8947848;
-        else if (tile.type === "snow") color = 15658734;
-        let emissive = 0;
-        if (isSelected) emissive = 4473924;
-        else if (isAttackTarget) emissive = 4456448;
-        else if (isValidMove) emissive = 17408;
-        else if (isHovered) emissive = 2236962;
-        if (tile.modelUrl) {
-          return /* @__PURE__ */ jsx(
-            "group",
-            {
-              position,
-              onClick: (e) => handleTileClick(tile, e),
-              onPointerEnter: (e) => handleTileHover(tile, e),
-              onPointerLeave: (e) => handleTileHover(null, e),
-              userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
-              children: /* @__PURE__ */ jsx(
-                ModelLoader,
-                {
-                  url: tile.modelUrl.url,
-                  scale: 0.95,
-                  fallbackGeometry: "box",
-                  castShadow: true,
-                  receiveShadow: true
-                }
-              )
-            }
-          );
-        }
-        return /* @__PURE__ */ jsxs(
-          "mesh",
-          {
-            position,
-            onClick: (e) => handleTileClick(tile, e),
-            onPointerEnter: (e) => handleTileHover(tile, e),
-            onPointerLeave: (e) => handleTileHover(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 })
-            ]
-          }
-        );
-      },
-      [selectedTileIds, hoveredTile, validMoves, attackTargets, handleTileClick, handleTileHover]
-    );
-    const UNIT_BASE_MODEL_SCALE = 0.5;
-    const UNIT_BASE_BILLBOARD_HEIGHT = 1.2;
-    const UNIT_BASE_PRIMITIVE_RADIUS = 0.3;
-    const DefaultUnitRenderer = useCallback(
-      ({ unit, position }) => {
-        const isSelected = selectedUnitId === unit.id;
-        const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
-        const hasAtlas = unitAtlasUrl(unit) !== null;
-        const initialFrame = hasAtlas ? resolveUnitFrame(unit.id) : null;
-        const modelScale = UNIT_BASE_MODEL_SCALE * unitScale * gridConfig.cellSize;
-        const billboardHeight = UNIT_BASE_BILLBOARD_HEIGHT * unitScale * gridConfig.cellSize;
-        const primitiveRadius = UNIT_BASE_PRIMITIVE_RADIUS * unitScale * gridConfig.cellSize;
-        return /* @__PURE__ */ jsxs(
-          "group",
-          {
-            position,
-            onClick: (e) => handleUnitClick(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: "#ffff00", transparent: true, opacity: 0.8 })
-              ] }),
-              hasAtlas && initialFrame ? (
-                /* Animated sprite-sheet billboard — single cropped frame, by state */
-                /* @__PURE__ */ jsx(Billboard, { children: /* @__PURE__ */ jsx(
-                  UnitSpriteBillboard,
-                  {
-                    sheetUrl: initialFrame.sheetUrl,
-                    resolveFrame: () => resolveUnitFrame(unit.id),
-                    height: billboardHeight
-                  }
-                ) })
-              ) : unit.modelUrl ? (
-                /* GLB unit model (box fallback while loading / on error) */
-                /* @__PURE__ */ jsx(
-                  ModelLoader,
-                  {
-                    url: unit.modelUrl.url,
-                    scale: modelScale,
-                    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.25, 0, 0], children: [
-                  /* @__PURE__ */ jsx("planeGeometry", { args: [0.5, 0.05] }),
-                  /* @__PURE__ */ jsx("meshBasicMaterial", { color: 3355443 })
-                ] }),
-                /* @__PURE__ */ jsxs(
-                  "mesh",
-                  {
-                    position: [
-                      -0.25 + 0.5 * (unit.health / unit.maxHealth) / 2,
-                      0,
-                      0.01
-                    ],
-                    children: [
-                      /* @__PURE__ */ jsx("planeGeometry", { args: [0.5 * (unit.health / unit.maxHealth), 0.05] }),
-                      /* @__PURE__ */ jsx(
-                        "meshBasicMaterial",
-                        {
-                          color: unit.health / unit.maxHealth > 0.5 ? 4500036 : unit.health / unit.maxHealth > 0.25 ? 11184708 : 16729156
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] })
-            ]
-          }
-        );
-      },
-      [selectedUnitId, handleUnitClick, resolveUnitFrame, unitScale, gridConfig]
-    );
-    const DefaultFeatureRenderer = useCallback(
-      ({
-        feature,
-        position
-      }) => {
-        if (feature.assetUrl) {
-          return /* @__PURE__ */ jsx(
-            ModelLoader,
-            {
-              url: feature.assetUrl.url,
-              position,
-              scale: 0.5,
-              rotation: [0, feature.rotation ?? 0, 0],
-              onClick: () => handleFeatureClick(feature, null),
-              fallbackGeometry: "box"
-            },
-            feature.id
-          );
-        }
-        if (feature.type === "tree") {
-          return /* @__PURE__ */ jsxs(
-            "group",
-            {
-              position,
-              onClick: (e) => handleFeatureClick(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: 9127187 })
-                ] }),
-                /* @__PURE__ */ jsxs("mesh", { position: [0, 0.9, 0], children: [
-                  /* @__PURE__ */ jsx("coneGeometry", { args: [0.5, 0.8, 8] }),
-                  /* @__PURE__ */ jsx("meshStandardMaterial", { color: 2263842 })
-                ] })
-              ]
-            }
-          );
-        }
-        if (feature.type === "rock") {
-          return /* @__PURE__ */ jsxs(
-            "mesh",
-            {
-              position: [position[0], position[1] + 0.3, position[2]],
-              onClick: (e) => handleFeatureClick(feature, e),
-              userData: { type: "feature", featureId: feature.id },
-              children: [
-                /* @__PURE__ */ jsx("dodecahedronGeometry", { args: [0.3, 0] }),
-                /* @__PURE__ */ jsx("meshStandardMaterial", { color: 8421504 })
-              ]
-            }
-          );
-        }
-        return null;
-      },
-      [handleFeatureClick]
-    );
+    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
+        ];
+      }
+      return cameraTarget;
+    }, [player, pixelsPerUnit, worldHeight, units, selectedUnitId, gridBounds, gridConfig, cameraTarget]);
     if (externalLoading || assetsLoading && preloadAssets.length > 0) {
       return /* @__PURE__ */ jsx(
         Canvas3DLoadingState,
@@ -2179,6 +2425,13 @@ var GameCanvas3D = forwardRef(
                   },
                   children: [
                     /* @__PURE__ */ jsx(CameraController, { onCameraChange: eventHandlers.handleCameraChange }),
+                    cameraMode === "follow" && /* @__PURE__ */ jsx(
+                      FollowCamera,
+                      {
+                        target: followTarget,
+                        offset: player ? [0, 2, 9] : [5, 7, 5]
+                      }
+                    ),
                     /* @__PURE__ */ jsx("ambientLight", { intensity: 0.6 }),
                     /* @__PURE__ */ jsx(
                       "directionalLight",
@@ -2186,7 +2439,9 @@ var GameCanvas3D = forwardRef(
                         position: [10, 20, 10],
                         intensity: 0.8,
                         castShadow: shadows,
-                        "shadow-mapSize": [2048, 2048]
+                        "shadow-mapSize": [2048, 2048],
+                        "shadow-bias": -4e-4,
+                        "shadow-normalBias": 0.04
                       }
                     ),
                     /* @__PURE__ */ jsx("hemisphereLight", { intensity: 0.3, color: "#87ceeb", groundColor: "#362d1d" }),
@@ -2212,15 +2467,49 @@ var GameCanvas3D = forwardRef(
                         fadeStrength: 1
                       }
                     ),
-                    /* @__PURE__ */ jsxs("group", { children: [
+                    player ? (
+                      /* Side-scroller mode — LOLO-owned pixel space mapped to world units */
+                      /* @__PURE__ */ jsx(
+                        SideScene,
+                        {
+                          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 Renderer = CustomTileRenderer || DefaultTileRenderer;
-                        return /* @__PURE__ */ jsx(Renderer, { tile, position }, tile.id ?? `tile-${index}`);
+                        const key = tile.id ?? `tile-${index}`;
+                        if (CustomTileRenderer) {
+                          return /* @__PURE__ */ jsx(CustomTileRenderer, { tile, position }, key);
+                        }
+                        return /* @__PURE__ */ jsx(
+                          DefaultTile,
+                          {
+                            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(
@@ -2228,17 +2517,51 @@ var GameCanvas3D = forwardRef(
                           feature.z ?? feature.y ?? 0,
                           (feature.elevation ?? 0) + 0.5
                         );
-                        const Renderer = CustomFeatureRenderer || DefaultFeatureRenderer;
-                        return /* @__PURE__ */ jsx(Renderer, { feature, position }, feature.id ?? `feature-${index}`);
+                        const key = feature.id ?? `feature-${index}`;
+                        if (CustomFeatureRenderer) {
+                          return /* @__PURE__ */ jsx(CustomFeatureRenderer, { feature, position }, key);
+                        }
+                        return /* @__PURE__ */ jsx(
+                          DefaultFeature,
+                          {
+                            feature,
+                            position,
+                            model: feature.assetUrl ?? assetManifest?.features?.[feature.type],
+                            onFeatureClick: handleFeatureClick
+                          },
+                          key
+                        );
                       }),
                       units.map((unit) => {
                         const position = gridToWorld2(
-                          unit.x ?? 0,
-                          unit.z ?? unit.y ?? 0,
+                          unit.x ?? unit.position?.x ?? 0,
+                          unit.z ?? unit.y ?? unit.position?.y ?? 0,
                           (unit.elevation ?? 0) + 0.5
                         );
-                        const Renderer = CustomUnitRenderer || DefaultUnitRenderer;
-                        return /* @__PURE__ */ jsx(Renderer, { unit, position }, unit.id);
+                        return /* @__PURE__ */ jsx(LerpedGroup, { target: position, enabled: interpolateUnits, children: CustomUnitRenderer ? /* @__PURE__ */ jsx(CustomUnitRenderer, { unit, position: [0, 0, 0] }) : /* @__PURE__ */ jsx(
+                          DefaultUnit,
+                          {
+                            unit,
+                            position: [0, 0, 0],
+                            model: unit.modelUrl ?? assetManifest?.units?.[unit.unitType ?? ""],
+                            isSelected: selectedUnitId === unit.id,
+                            unitScale,
+                            cellSize: gridConfig.cellSize,
+                            resolveUnitFrame,
+                            onUnitClick: handleUnitClick
+                          }
+                        ) }, unit.id);
+                      }),
+                      events.map((ev, i) => {
+                        const position = gridToWorld2(ev.x, ev.z ?? ev.y ?? 0, 0);
+                        return /* @__PURE__ */ jsx(
+                          EventMarker,
+                          {
+                            event: ev,
+                            position: [position[0], position[1] + 1.4, position[2]]
+                          },
+                          ev.id ?? `ev-${i}`
+                        );
                       })
                     ] }),
                     children,
@@ -2246,6 +2569,7 @@ var GameCanvas3D = forwardRef(
                       OrbitControls,
                       {
                         ref: controlsRef,
+                        enabled: cameraMode !== "follow",
                         target: cameraTarget,
                         enableDamping: true,
                         dampingFactor: 0.05,
@@ -2278,9 +2602,6 @@ var GameCanvas3D = forwardRef(
   }
 );
 GameCanvas3D.displayName = "GameCanvas3D";
-function Canvas3D(props) {
-  return /* @__PURE__ */ jsx(GameCanvas3D, { ...props });
-}
 var DEFAULT_FAMILY = "lucide";
 var VALID_FAMILIES = [
   "lucide",
@@ -2353,7 +2674,7 @@ function loadLib(key, importer) {
   return p;
 }
 function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
-  const Lazy = React6.lazy(async () => {
+  const Lazy = React8__default.lazy(async () => {
     const lib = await loadLib(libKey, importer);
     const Comp = pick(lib);
     if (!Comp) {
@@ -2363,7 +2684,7 @@ function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
     return { default: Comp };
   });
   const Wrapped = (props) => /* @__PURE__ */ jsx(
-    React6.Suspense,
+    React8__default.Suspense,
     {
       fallback: /* @__PURE__ */ jsx(
         "span",
@@ -3032,7 +3353,7 @@ var Icon = ({
   const directIcon = typeof icon === "string" ? void 0 : icon;
   const effectiveName = typeof icon === "string" ? icon : name;
   const family = useIconFamily();
-  const RenderedComponent = React6.useMemo(() => {
+  const RenderedComponent = React8__default.useMemo(() => {
     if (directIcon) return null;
     return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
   }, [directIcon, effectiveName, family]);
@@ -3080,6 +3401,143 @@ var Icon = ({
   );
 };
 Icon.displayName = "Icon";
+
+// lib/atlasSlice.ts
+var atlasCache = /* @__PURE__ */ new Map();
+function isTilesheet(a) {
+  return typeof a.tileWidth === "number";
+}
+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 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);
+    }
+    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";
+}
+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 AtlasImage({
+  asset,
+  size,
+  width,
+  height,
+  fill = false,
+  fit = "contain",
+  alt,
+  className,
+  style,
+  "aria-hidden": ariaHidden
+}) {
+  const [, bump] = React8.useReducer((x) => x + 1, 0);
+  const canvasRef = React8.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;
+  React8.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
+  };
+  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
+    }
+  );
+}
+AtlasImage.displayName = "AtlasImage";
 var variantStyles = {
   primary: [
     "bg-primary text-primary-foreground",
@@ -3152,7 +3610,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React6.isValidElement(value)) {
+  if (React8__default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && isIconLike(value)) {
@@ -3161,7 +3619,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React6.forwardRef(
+var Button = React8__default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -3185,7 +3643,7 @@ var Button = React6.forwardRef(
     const leftIconValue = leftIcon || iconProp;
     const rightIconValue = rightIcon || iconRightProp;
     const px = size === "sm" ? 16 : size === "lg" ? 20 : 16;
-    const resolvedLeftIcon = iconAsset?.url ? /* @__PURE__ */ jsx("img", { src: iconAsset.url, alt: iconAsset.name ?? iconAsset.category ?? "", width: px, height: px, style: { imageRendering: "pixelated", objectFit: "contain", width: px, height: px }, className: "flex-shrink-0" }) : resolveIconProp(leftIconValue, iconSizeStyles[size]);
+    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) => {
       if (action) {
@@ -3309,7 +3767,7 @@ var Typography = ({
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component2 = as || defaultElements[variant];
-  return React6.createElement(
+  return React8__default.createElement(
     Component2,
     {
       id,
@@ -3382,7 +3840,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 React6.createElement(
+  return React8__default.createElement(
     Component2,
     {
       className: cn(
@@ -3757,7 +4215,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React6.forwardRef(
+var Box = React8__default.forwardRef(
   ({
     padding,
     paddingX,
@@ -3822,7 +4280,7 @@ var Box = React6.forwardRef(
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
     const isClickable = action || onClick;
-    return React6.createElement(
+    return React8__default.createElement(
       Component2,
       {
         ref,
@@ -6610,7 +7068,7 @@ var Avl3DViewer = ({
   const handleTraitClick = useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const [highlightedTrait, setHighlightedTrait] = React6.useState(null);
+  const [highlightedTrait, setHighlightedTrait] = React8__default.useState(null);
   const handleTransitionClick = useCallback((index) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: { x: 0, y: 0 } });
   }, []);
@@ -6697,7 +7155,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(React6.Fragment, { children: [
+            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React8__default.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
               i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx(
                 Box,
@@ -6973,4 +7431,4 @@ var SpatialHashGrid = class {
   }
 };
 
-export { AVL_3D_COLORS, AssetLoader, Avl3DApplicationScene, Avl3DContext, Avl3DEffects, Avl3DOrbitalScene, Avl3DTraitScene, Avl3DTransitionScene, Avl3DViewer, CAMERA_POSITIONS, Camera3D, Canvas3D, 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, 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 };