@almadar/ui 5.103.0 → 5.105.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var React8 = require('react');
+var React10 = require('react');
 var fiber = require('@react-three/fiber');
 var THREE6 = require('three');
 var jsxRuntime = require('react/jsx-runtime');
@@ -36,7 +36,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React8__namespace = /*#__PURE__*/_interopNamespace(React8);
+var React10__namespace = /*#__PURE__*/_interopNamespace(React10);
 var THREE6__namespace = /*#__PURE__*/_interopNamespace(THREE6);
 var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
 
@@ -45,8 +45,8 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 function Scene3D({ background = "#1a1a2e", fog, children }) {
   const { scene } = fiber.useThree();
-  const initializedRef = React8.useRef(false);
-  React8.useEffect(() => {
+  const initializedRef = React10.useRef(false);
+  React10.useEffect(() => {
     if (initializedRef.current) return;
     initializedRef.current = true;
     if (background.startsWith("#") || background.startsWith("rgb")) {
@@ -67,7 +67,7 @@ function Scene3D({ background = "#1a1a2e", fog, children }) {
   }, [scene, background, fog]);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 }
-var Camera3D = React8.forwardRef(
+var Camera3D = React10.forwardRef(
   ({
     mode = "isometric",
     position = [10, 10, 10],
@@ -80,10 +80,10 @@ var Camera3D = React8.forwardRef(
     onChange
   }, ref) => {
     const { camera, set, viewport } = fiber.useThree();
-    const controlsRef = React8.useRef(null);
-    const initialPosition = React8.useRef(new THREE6__namespace.Vector3(...position));
-    const initialTarget = React8.useRef(new THREE6__namespace.Vector3(...target));
-    React8.useEffect(() => {
+    const controlsRef = React10.useRef(null);
+    const initialPosition = React10.useRef(new THREE6__namespace.Vector3(...position));
+    const initialTarget = React10.useRef(new THREE6__namespace.Vector3(...target));
+    React10.useEffect(() => {
       let newCamera;
       if (mode === "isometric") {
         const aspect = viewport.aspect;
@@ -114,7 +114,7 @@ var Camera3D = React8.forwardRef(
         onChange(camera);
       }
     });
-    React8.useImperativeHandle(ref, () => ({
+    React10.useImperativeHandle(ref, () => ({
       getCamera: () => camera,
       setPosition: (x, y, z) => {
         camera.position.set(x, y, z);
@@ -170,6 +170,10 @@ function Lighting3D({
   shadows = true,
   shadowMapSize = 2048,
   shadowCameraSize = 20,
+  shadowBias = -1e-3,
+  shadowNormalBias,
+  shadowCameraNear = 0.1,
+  shadowCameraFar = 100,
   showHelpers = false
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -186,9 +190,10 @@ function Lighting3D({
         "shadow-camera-right": shadowCameraSize,
         "shadow-camera-top": shadowCameraSize,
         "shadow-camera-bottom": -shadowCameraSize,
-        "shadow-camera-near": 0.1,
-        "shadow-camera-far": 100,
-        "shadow-bias": -1e-3
+        "shadow-camera-near": shadowCameraNear,
+        "shadow-camera-far": shadowCameraFar,
+        "shadow-bias": shadowBias,
+        "shadow-normalBias": shadowNormalBias
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -256,7 +261,7 @@ function Canvas3DLoadingState({
   ] });
 }
 var log = logger.createLogger("almadar:ui:game:canvas3d:error-boundary");
-var Canvas3DErrorBoundary = class extends React8.Component {
+var Canvas3DErrorBoundary = class extends React10.Component {
   constructor(props) {
     super(props);
     __publicField(this, "handleReset", () => {
@@ -371,10 +376,10 @@ function stateFromEntry(entry) {
   return { model: null, clips: [], isLoading: !entry.error, error: entry.error ?? null };
 }
 function useGLTFModel(url, resourceBasePath) {
-  const [state, setState] = React8.useState(
+  const [state, setState] = React10.useState(
     () => stateFromEntry(url ? loadGltfCached(url, resourceBasePath || detectAssetRoot(url)) : null)
   );
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     if (!url) {
       setState({ model: null, clips: [], isLoading: false, error: null });
       return;
@@ -409,7 +414,7 @@ function ModelLoader({
   tint
 }) {
   const { model: loadedModel, clips, isLoading, error } = useGLTFModel(url, resourceBasePath);
-  const model = React8.useMemo(() => {
+  const model = React10.useMemo(() => {
     if (!loadedModel) return null;
     const cloned = SkeletonUtils.clone(loadedModel);
     cloned.updateMatrixWorld(true);
@@ -427,8 +432,8 @@ function ModelLoader({
     });
     return cloned;
   }, [loadedModel, castShadow, receiveShadow, tint]);
-  const mixer = React8.useMemo(() => model ? new THREE6__namespace.AnimationMixer(model) : null, [model]);
-  React8.useEffect(() => {
+  const mixer = React10.useMemo(() => model ? new THREE6__namespace.AnimationMixer(model) : null, [model]);
+  React10.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);
@@ -442,7 +447,7 @@ function ModelLoader({
   fiber.useFrame((_, delta) => {
     mixer?.update(delta);
   });
-  const normFactor = React8.useMemo(() => {
+  const normFactor = React10.useMemo(() => {
     if (!model) return 1;
     const box = new THREE6__namespace.Box3().setFromObject(model);
     const size = new THREE6__namespace.Vector3();
@@ -451,11 +456,11 @@ function ModelLoader({
     if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
     return 1 / maxDim;
   }, [model]);
-  const scaleArray = React8.useMemo(() => {
+  const scaleArray = React10.useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;
     return [base[0] * normFactor, base[1] * normFactor, base[2] * normFactor];
   }, [scale, normFactor]);
-  const rotationRad = React8.useMemo(() => {
+  const rotationRad = React10.useMemo(() => {
     return [
       rotation[0] * Math.PI / 180,
       rotation[1] * Math.PI / 180,
@@ -735,21 +740,21 @@ var DEFAULT_OPTIONS = {
 };
 function useThree3(options = {}) {
   const opts = { ...DEFAULT_OPTIONS, ...options };
-  const containerRef = React8.useRef(null);
-  const canvasRef = React8.useRef(null);
-  const rendererRef = React8.useRef(null);
-  const sceneRef = React8.useRef(null);
-  const cameraRef = React8.useRef(null);
-  const controlsRef = React8.useRef(null);
-  const gridHelperRef = React8.useRef(null);
-  const rafRef = React8.useRef(0);
-  const [isReady, setIsReady] = React8.useState(false);
-  const [dimensions, setDimensions] = React8.useState({ width: 0, height: 0 });
-  const initialCameraPosition = React8.useMemo(
+  const containerRef = React10.useRef(null);
+  const canvasRef = React10.useRef(null);
+  const rendererRef = React10.useRef(null);
+  const sceneRef = React10.useRef(null);
+  const cameraRef = React10.useRef(null);
+  const controlsRef = React10.useRef(null);
+  const gridHelperRef = React10.useRef(null);
+  const rafRef = React10.useRef(0);
+  const [isReady, setIsReady] = React10.useState(false);
+  const [dimensions, setDimensions] = React10.useState({ width: 0, height: 0 });
+  const initialCameraPosition = React10.useMemo(
     () => new THREE6__namespace.Vector3(...opts.cameraPosition),
     []
   );
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
@@ -842,7 +847,7 @@ function useThree3(options = {}) {
       scene.clear();
     };
   }, []);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     if (!cameraRef.current || !containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
@@ -877,20 +882,20 @@ function useThree3(options = {}) {
       animate();
     }
   }, [opts.cameraMode]);
-  const setCameraPosition = React8.useCallback((x, y, z) => {
+  const setCameraPosition = React10.useCallback((x, y, z) => {
     if (cameraRef.current) {
       cameraRef.current.position.set(x, y, z);
       controlsRef.current?.update();
     }
   }, []);
-  const lookAt = React8.useCallback((x, y, z) => {
+  const lookAt = React10.useCallback((x, y, z) => {
     if (cameraRef.current) {
       cameraRef.current.lookAt(x, y, z);
       controlsRef.current?.target.set(x, y, z);
       controlsRef.current?.update();
     }
   }, []);
-  const resetCamera = React8.useCallback(() => {
+  const resetCamera = React10.useCallback(() => {
     if (cameraRef.current) {
       cameraRef.current.position.copy(initialCameraPosition);
       cameraRef.current.lookAt(0, 0, 0);
@@ -900,7 +905,7 @@ function useThree3(options = {}) {
       }
     }
   }, [initialCameraPosition]);
-  const fitView = React8.useCallback(
+  const fitView = React10.useCallback(
     (bounds) => {
       if (!cameraRef.current) return;
       const centerX = (bounds.minX + bounds.maxX) / 2;
@@ -931,20 +936,20 @@ function useThree3(options = {}) {
 }
 function useAssetLoader(options = {}) {
   const { preloadUrls = [], loader: customLoader } = options;
-  const loaderRef = React8.useRef(customLoader || new AssetLoader());
-  const [state, setState] = React8.useState({
+  const loaderRef = React10.useRef(customLoader || new AssetLoader());
+  const [state, setState] = React10.useState({
     isLoading: false,
     progress: 0,
     loaded: 0,
     total: 0,
     errors: []
   });
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     if (preloadUrls.length > 0) {
       preload(preloadUrls);
     }
   }, []);
-  const updateProgress = React8.useCallback((loaded, total) => {
+  const updateProgress = React10.useCallback((loaded, total) => {
     setState((prev) => ({
       ...prev,
       loaded,
@@ -952,7 +957,7 @@ function useAssetLoader(options = {}) {
       progress: total > 0 ? Math.round(loaded / total * 100) : 0
     }));
   }, []);
-  const loadModel = React8.useCallback(
+  const loadModel = React10.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -975,7 +980,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const loadOBJ = React8.useCallback(
+  const loadOBJ = React10.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -998,7 +1003,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const loadTexture = React8.useCallback(
+  const loadTexture = React10.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -1021,7 +1026,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const preload = React8.useCallback(
+  const preload = React10.useCallback(
     async (urls) => {
       setState((prev) => ({
         ...prev,
@@ -1060,27 +1065,27 @@ function useAssetLoader(options = {}) {
     },
     [updateProgress]
   );
-  const hasModel = React8.useCallback((url) => {
+  const hasModel = React10.useCallback((url) => {
     return loaderRef.current.hasModel(url);
   }, []);
-  const hasTexture = React8.useCallback((url) => {
+  const hasTexture = React10.useCallback((url) => {
     return loaderRef.current.hasTexture(url);
   }, []);
-  const getModel = React8.useCallback((url) => {
+  const getModel = React10.useCallback((url) => {
     try {
       return loaderRef.current.getModel(url);
     } catch {
       return void 0;
     }
   }, []);
-  const getTexture = React8.useCallback((url) => {
+  const getTexture = React10.useCallback((url) => {
     try {
       return loaderRef.current.getTexture(url);
     } catch {
       return void 0;
     }
   }, []);
-  const clearCache = React8.useCallback(() => {
+  const clearCache = React10.useCallback(() => {
     loaderRef.current.clearCache();
     setState({
       isLoading: false,
@@ -1104,25 +1109,25 @@ function useAssetLoader(options = {}) {
   };
 }
 function useSceneGraph() {
-  const nodesRef = React8.useRef(/* @__PURE__ */ new Map());
-  const addNode = React8.useCallback((node) => {
+  const nodesRef = React10.useRef(/* @__PURE__ */ new Map());
+  const addNode = React10.useCallback((node) => {
     const existing = nodesRef.current.get(node.id);
     if (existing) {
       existing.mesh.removeFromParent();
     }
     nodesRef.current.set(node.id, node);
   }, []);
-  const removeNode = React8.useCallback((id) => {
+  const removeNode = React10.useCallback((id) => {
     const node = nodesRef.current.get(id);
     if (node) {
       node.mesh.removeFromParent();
       nodesRef.current.delete(id);
     }
   }, []);
-  const getNode = React8.useCallback((id) => {
+  const getNode = React10.useCallback((id) => {
     return nodesRef.current.get(id);
   }, []);
-  const updateNodePosition = React8.useCallback(
+  const updateNodePosition = React10.useCallback(
     (id, x, y, z) => {
       const node = nodesRef.current.get(id);
       if (node) {
@@ -1132,7 +1137,7 @@ function useSceneGraph() {
     },
     []
   );
-  const updateNodeGridPosition = React8.useCallback(
+  const updateNodeGridPosition = React10.useCallback(
     (id, gridX, gridZ) => {
       const node = nodesRef.current.get(id);
       if (node) {
@@ -1141,7 +1146,7 @@ function useSceneGraph() {
     },
     []
   );
-  const getNodeAtGrid = React8.useCallback(
+  const getNodeAtGrid = React10.useCallback(
     (x, z, type) => {
       return Array.from(nodesRef.current.values()).find((node) => {
         const matchesGrid = node.gridPosition.x === x && node.gridPosition.z === z;
@@ -1150,10 +1155,10 @@ function useSceneGraph() {
     },
     []
   );
-  const getNodesByType = React8.useCallback((type) => {
+  const getNodesByType = React10.useCallback((type) => {
     return Array.from(nodesRef.current.values()).filter((node) => node.type === type);
   }, []);
-  const getNodesInBounds = React8.useCallback(
+  const getNodesInBounds = React10.useCallback(
     (minX, maxX, minZ, maxZ) => {
       return Array.from(nodesRef.current.values()).filter((node) => {
         const { x, z } = node.gridPosition;
@@ -1162,13 +1167,13 @@ function useSceneGraph() {
     },
     []
   );
-  const clearNodes = React8.useCallback(() => {
+  const clearNodes = React10.useCallback(() => {
     nodesRef.current.forEach((node) => {
       node.mesh.removeFromParent();
     });
     nodesRef.current.clear();
   }, []);
-  const countNodes = React8.useCallback((type) => {
+  const countNodes = React10.useCallback((type) => {
     if (!type) {
       return nodesRef.current.size;
     }
@@ -1190,9 +1195,9 @@ function useSceneGraph() {
 }
 function useRaycaster(options) {
   const { camera, canvas, cellSize = 1, offsetX = 0, offsetZ = 0 } = options;
-  const raycaster = React8.useRef(new THREE6__namespace.Raycaster());
-  const mouse = React8.useRef(new THREE6__namespace.Vector2());
-  const clientToNDC = React8.useCallback(
+  const raycaster = React10.useRef(new THREE6__namespace.Raycaster());
+  const mouse = React10.useRef(new THREE6__namespace.Vector2());
+  const clientToNDC = React10.useCallback(
     (clientX, clientY) => {
       if (!canvas) {
         return { x: 0, y: 0 };
@@ -1205,7 +1210,7 @@ function useRaycaster(options) {
     },
     [canvas]
   );
-  const isWithinCanvas = React8.useCallback(
+  const isWithinCanvas = React10.useCallback(
     (clientX, clientY) => {
       if (!canvas) return false;
       const rect = canvas.getBoundingClientRect();
@@ -1213,7 +1218,7 @@ function useRaycaster(options) {
     },
     [canvas]
   );
-  const getIntersection = React8.useCallback(
+  const getIntersection = React10.useCallback(
     (clientX, clientY, objects) => {
       if (!camera || !canvas) return null;
       const ndc = clientToNDC(clientX, clientY);
@@ -1236,7 +1241,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, clientToNDC]
   );
-  const getAllIntersections = React8.useCallback(
+  const getAllIntersections = React10.useCallback(
     (clientX, clientY, objects) => {
       if (!camera || !canvas) return [];
       const ndc = clientToNDC(clientX, clientY);
@@ -1255,7 +1260,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, clientToNDC]
   );
-  const getGridCoordinates = React8.useCallback(
+  const getGridCoordinates = React10.useCallback(
     (clientX, clientY) => {
       if (!camera || !canvas) return null;
       const ndc = clientToNDC(clientX, clientY);
@@ -1273,7 +1278,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, cellSize, offsetX, offsetZ, clientToNDC]
   );
-  const getTileAtPosition = React8.useCallback(
+  const getTileAtPosition = React10.useCallback(
     (clientX, clientY, scene) => {
       if (!camera || !canvas) return null;
       const tileMeshes = [];
@@ -1396,10 +1401,10 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React8.useContext(providers.EventBusContext);
+  const context = React10.useContext(providers.EventBusContext);
   const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
   const scope = providers.useTraitScope();
-  return React8.useMemo(() => {
+  return React10.useMemo(() => {
     if (!scope) {
       return {
         ...baseBus,
@@ -1435,7 +1440,7 @@ function useEventBus() {
 }
 function useEmitEvent() {
   const eventBus = useEventBus();
-  return React8.useCallback(
+  return React10.useCallback(
     (type, payload, source) => {
       eventBus.emit(type, payload, source);
     },
@@ -1462,9 +1467,9 @@ function useGameCanvas3DEvents(options) {
     onUnitAnimation
   } = options;
   const emit = useEmitEvent();
-  const optionsRef = React8.useRef(options);
+  const optionsRef = React10.useRef(options);
   optionsRef.current = options;
-  const handleTileClick = React8.useCallback(
+  const handleTileClick = React10.useCallback(
     (tile, event) => {
       if (tileClickEvent) {
         emit(tileClickEvent, {
@@ -1480,7 +1485,7 @@ function useGameCanvas3DEvents(options) {
     },
     [tileClickEvent, emit]
   );
-  const handleUnitClick = React8.useCallback(
+  const handleUnitClick = React10.useCallback(
     (unit, event) => {
       if (unitClickEvent) {
         emit(unitClickEvent, {
@@ -1499,7 +1504,7 @@ function useGameCanvas3DEvents(options) {
     },
     [unitClickEvent, emit]
   );
-  const handleFeatureClick = React8.useCallback(
+  const handleFeatureClick = React10.useCallback(
     (feature, event) => {
       if (featureClickEvent) {
         emit(featureClickEvent, {
@@ -1514,7 +1519,7 @@ function useGameCanvas3DEvents(options) {
     },
     [featureClickEvent, emit]
   );
-  const handleCanvasClick = React8.useCallback(
+  const handleCanvasClick = React10.useCallback(
     (event) => {
       if (canvasClickEvent) {
         emit(canvasClickEvent, {
@@ -1527,7 +1532,7 @@ function useGameCanvas3DEvents(options) {
     },
     [canvasClickEvent, emit]
   );
-  const handleTileHover = React8.useCallback(
+  const handleTileHover = React10.useCallback(
     (tile, event) => {
       if (tile) {
         if (tileHoverEvent) {
@@ -1547,7 +1552,7 @@ function useGameCanvas3DEvents(options) {
     },
     [tileHoverEvent, tileLeaveEvent, emit]
   );
-  const handleUnitAnimation = React8.useCallback(
+  const handleUnitAnimation = React10.useCallback(
     (unitId, state) => {
       if (unitAnimationEvent) {
         emit(unitAnimationEvent, {
@@ -1560,7 +1565,7 @@ function useGameCanvas3DEvents(options) {
     },
     [unitAnimationEvent, emit]
   );
-  const handleCameraChange = React8.useCallback(
+  const handleCameraChange = React10.useCallback(
     (position) => {
       if (cameraChangeEvent) {
         emit(cameraChangeEvent, {
@@ -1582,6 +1587,171 @@ function useGameCanvas3DEvents(options) {
   };
 }
 
+// components/game/shared/game3dTheme.ts
+var TERRAIN_COLORS_3D = {
+  base: 8421504,
+  water: 4491468,
+  grass: 4500036,
+  sand: 14535816,
+  rock: 8947848,
+  snow: 15658734
+};
+var HIGHLIGHT_EMISSIVE_3D = {
+  selected: 4473924,
+  attackTarget: 4456448,
+  validMove: 17408,
+  hovered: 2236962,
+  none: 0
+};
+var FACTION_COLORS_3D = {
+  player: 4491519,
+  enemy: 16729156,
+  default: 16777028
+};
+var SELECTION_RING_COLOR_3D = "#ffff00";
+var HEALTHBAR_3D = {
+  bg: 3355443,
+  /** fill color thresholds: fraction > key → color */
+  high: 4500036,
+  // fraction > 0.5
+  mid: 11184708,
+  // fraction > 0.25
+  low: 16729156,
+  // else
+  width: 0.5
+};
+function healthbarFill3D(fraction) {
+  if (fraction > 0.5) return HEALTHBAR_3D.high;
+  if (fraction > 0.25) return HEALTHBAR_3D.mid;
+  return HEALTHBAR_3D.low;
+}
+var TREE_COLORS_3D = {
+  trunk: 9127187,
+  foliage: 2263842
+};
+var ROCK_COLOR_3D = 8421504;
+var EVENT_COLORS_3D = {
+  hit: 16733508,
+  damage: 16733508,
+  attack: 16746564,
+  heal: 4513126,
+  pickup: 16763955,
+  score: 16763955,
+  death: 11154227,
+  win: 6750088,
+  lose: 16737894,
+  default: 16777215
+};
+var SIDE_PLATFORM_COLORS_3D = {
+  ground: 5999678,
+  platform: 9132587,
+  hazard: 13386820,
+  goal: 4491468,
+  default: 8947848
+};
+var SIDE_PLAYER_COLOR_3D = "#4488ff";
+var GRID_COLORS_3D = {
+  cell: "#444444",
+  section: "#666666"
+};
+var DEFAULT_BACKGROUND_3D = "#1a1a2e";
+function TileMesh3D({
+  tile,
+  position,
+  model,
+  isSelected,
+  isHovered,
+  isValidMove,
+  isAttackTarget,
+  onTileClick,
+  onTileHover
+}) {
+  const color = tile.color ?? TERRAIN_COLORS_3D[tile.type ?? ""] ?? TERRAIN_COLORS_3D.base;
+  let emissive = HIGHLIGHT_EMISSIVE_3D.none;
+  if (isSelected) emissive = HIGHLIGHT_EMISSIVE_3D.selected;
+  else if (isAttackTarget) emissive = HIGHLIGHT_EMISSIVE_3D.attackTarget;
+  else if (isValidMove) emissive = HIGHLIGHT_EMISSIVE_3D.validMove;
+  else if (isHovered) emissive = HIGHLIGHT_EMISSIVE_3D.hovered;
+  if (model?.url) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "group",
+      {
+        position,
+        onClick: (e) => onTileClick(tile, e),
+        onPointerEnter: (e) => onTileHover(tile, e),
+        onPointerLeave: (e) => onTileHover(null, e),
+        userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ModelLoader,
+          {
+            url: model.url,
+            scale: 0.95,
+            rotation: [0, tile.rotation ?? 0, 0],
+            fallbackGeometry: "box",
+            castShadow: true,
+            receiveShadow: true
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "mesh",
+    {
+      position,
+      onClick: (e) => onTileClick(tile, e),
+      onPointerEnter: (e) => onTileHover(tile, e),
+      onPointerLeave: (e) => onTileHover(null, e),
+      userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [0.95, 0.2, 0.95] }),
+        /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color, emissive })
+      ]
+    }
+  );
+}
+function SpriteBillboard3D({
+  sheetUrl,
+  resolveFrame,
+  height = 1.2
+}) {
+  const texture = fiber.useLoader(THREE6__namespace.TextureLoader, sheetUrl);
+  const meshRef = React10.useRef(null);
+  const matRef = React10.useRef(null);
+  const [aspect, setAspect] = React10.useState(1);
+  fiber.useFrame(() => {
+    const frame = resolveFrame();
+    if (!frame || !texture.image) return;
+    const imgW = texture.image.width;
+    const imgH = texture.image.height;
+    if (!imgW || !imgH) return;
+    texture.repeat.set((frame.flipX ? -1 : 1) * (frame.sw / imgW), frame.sh / imgH);
+    texture.offset.set(
+      frame.flipX ? (frame.sx + frame.sw) / imgW : frame.sx / imgW,
+      1 - (frame.sy + frame.sh) / imgH
+    );
+    texture.magFilter = THREE6__namespace.NearestFilter;
+    texture.minFilter = THREE6__namespace.NearestFilter;
+    texture.needsUpdate = true;
+    const nextAspect = frame.sw / frame.sh;
+    if (Math.abs(nextAspect - aspect) > 1e-3) setAspect(nextAspect);
+    if (matRef.current) matRef.current.needsUpdate = true;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("mesh", { ref: meshRef, position: [0, height / 2, 0], children: [
+    /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [height * aspect, height] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "meshBasicMaterial",
+      {
+        ref: matRef,
+        map: texture,
+        transparent: true,
+        alphaTest: 0.1,
+        side: THREE6__namespace.DoubleSide
+      }
+    )
+  ] });
+}
+
 // components/game/shared/spriteAnimation.ts
 function resolveSheetDirection(facing) {
   switch (facing) {
@@ -1617,11 +1787,11 @@ function resolveSheetUrl(atlasUrl, relativeSheetPath) {
   }
 }
 function useUnitSpriteAtlas(units) {
-  const atlasCacheRef = React8.useRef(/* @__PURE__ */ new Map());
-  const loadingRef = React8.useRef(/* @__PURE__ */ new Set());
-  const [pendingCount, setPendingCount] = React8.useState(0);
-  const [, forceTick] = React8.useState(0);
-  const atlasUrls = React8.useMemo(() => {
+  const atlasCacheRef = React10.useRef(/* @__PURE__ */ new Map());
+  const loadingRef = React10.useRef(/* @__PURE__ */ new Set());
+  const [pendingCount, setPendingCount] = React10.useState(0);
+  const [, forceTick] = React10.useState(0);
+  const atlasUrls = React10.useMemo(() => {
     const set = /* @__PURE__ */ new Set();
     for (const unit of units) {
       const url = unitAtlasUrl(unit);
@@ -1629,7 +1799,7 @@ function useUnitSpriteAtlas(units) {
     }
     return [...set];
   }, [units]);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     const cache = atlasCacheRef.current;
     const loading = loadingRef.current;
     const toLoad = atlasUrls.filter((url) => !cache.has(url) && !loading.has(url));
@@ -1653,7 +1823,7 @@ function useUnitSpriteAtlas(units) {
       cancelled = true;
     };
   }, [atlasUrls]);
-  const sheetUrls = React8.useMemo(() => {
+  const sheetUrls = React10.useMemo(() => {
     const urls = /* @__PURE__ */ new Set();
     for (const unit of units) {
       const atlasUrl = unitAtlasUrl(unit);
@@ -1666,7 +1836,7 @@ function useUnitSpriteAtlas(units) {
     }
     return [...urls];
   }, [units, pendingCount]);
-  const resolveUnitFrame = React8.useCallback((unitId) => {
+  const resolveUnitFrame = React10.useCallback((unitId) => {
     const unit = units.find((u) => u.id === unitId);
     if (!unit) return null;
     const atlasUrl = unitAtlasUrl(unit);
@@ -1694,274 +1864,11 @@ function useUnitSpriteAtlas(units) {
   }, [units]);
   return { sheetUrls, resolveUnitFrame, pendingCount };
 }
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var DEFAULT_GRID_CONFIG = {
-  cellSize: 1,
-  offsetX: 0,
-  offsetZ: 0
-};
-function CameraController({
-  onCameraChange
-}) {
-  const { camera } = fiber.useThree();
-  React8.useEffect(() => {
-    if (onCameraChange) {
-      onCameraChange({
-        x: camera.position.x,
-        y: camera.position.y,
-        z: camera.position.z
-      });
-    }
-  }, [camera.position, onCameraChange]);
-  return null;
-}
-function UnitSpriteBillboard({
-  sheetUrl,
-  resolveFrame,
-  height = 1.2
-}) {
-  const texture = fiber.useLoader(THREE6__namespace.TextureLoader, sheetUrl);
-  const meshRef = React8.useRef(null);
-  const matRef = React8.useRef(null);
-  const [aspect, setAspect] = React8.useState(1);
-  fiber.useFrame(() => {
-    const frame = resolveFrame();
-    if (!frame || !texture.image) return;
-    const imgW = texture.image.width;
-    const imgH = texture.image.height;
-    if (!imgW || !imgH) return;
-    texture.repeat.set((frame.flipX ? -1 : 1) * (frame.sw / imgW), frame.sh / imgH);
-    texture.offset.set(
-      frame.flipX ? (frame.sx + frame.sw) / imgW : frame.sx / imgW,
-      1 - (frame.sy + frame.sh) / imgH
-    );
-    texture.magFilter = THREE6__namespace.NearestFilter;
-    texture.minFilter = THREE6__namespace.NearestFilter;
-    texture.needsUpdate = true;
-    const nextAspect = frame.sw / frame.sh;
-    if (Math.abs(nextAspect - aspect) > 1e-3) setAspect(nextAspect);
-    if (matRef.current) matRef.current.needsUpdate = true;
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs("mesh", { ref: meshRef, position: [0, height / 2, 0], children: [
-    /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [height * aspect, height] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "meshBasicMaterial",
-      {
-        ref: matRef,
-        map: texture,
-        transparent: true,
-        alphaTest: 0.1,
-        side: THREE6__namespace.DoubleSide
-      }
-    )
-  ] });
-}
-function FollowCamera({
-  target,
-  offset
-}) {
-  const { camera } = fiber.useThree();
-  const look = React8.useRef(new THREE6__namespace.Vector3(target[0], target[1], target[2]));
-  const goal = React8.useRef(new THREE6__namespace.Vector3());
-  fiber.useFrame((_, delta) => {
-    const t = Math.min(1, delta * 5);
-    goal.current.set(target[0] + offset[0], target[1] + offset[1], target[2] + offset[2]);
-    camera.position.lerp(goal.current, t);
-    look.current.lerp(goal.current.set(target[0], target[1], target[2]), t);
-    camera.lookAt(look.current);
-  });
-  return null;
-}
-function LerpedGroup({
-  target,
-  enabled,
-  children
-}) {
-  const ref = React8.useRef(null);
-  const goal = React8.useRef(new THREE6__namespace.Vector3());
-  fiber.useFrame((_, delta) => {
-    const g = ref.current;
-    if (!g) return;
-    goal.current.set(target[0], target[1], target[2]);
-    if (enabled) g.position.lerp(goal.current, Math.min(1, delta * 10));
-    else g.position.copy(goal.current);
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx("group", { ref, position: target, children });
-}
-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__ */ jsxRuntime.jsxs("group", { children: [
-    platforms.map((p, i) => {
-      const platformType = p.type ?? "platform";
-      const model = tileSprites?.[platformType]?.url;
-      const topY = (worldHeight - p.y) / ppu;
-      if (model) {
-        const cells = Math.max(1, Math.round(p.width / ppu));
-        const x0 = p.x / ppu;
-        return /* @__PURE__ */ jsxRuntime.jsx("group", { children: Array.from({ length: cells }, (_, c) => /* @__PURE__ */ jsxRuntime.jsx("group", { position: [x0 + c + 0.5, topY - 0.475, 0], children: /* @__PURE__ */ jsxRuntime.jsx(ModelLoader, { url: model, scale: 0.95, fallbackGeometry: "box", castShadow: true, receiveShadow: true }) }, c)) }, `plat-${i}`);
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "mesh",
-        {
-          position: [(p.x + p.width / 2) / ppu, topY - p.height / 2 / ppu, 0],
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [p.width / ppu, p.height / ppu, 1] }),
-            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: SIDE_PLATFORM_COLORS[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__ */ jsxRuntime.jsx("group", { position: [fx, fy, 0], children: /* @__PURE__ */ jsxRuntime.jsx(ModelLoader, { url: model.url, scale: 0.6, tint: feature.color, fallbackGeometry: "sphere", castShadow: true }) }, feature.id ?? `sfeat-${i}`);
-    }),
-    events.map((ev, i) => /* @__PURE__ */ jsxRuntime.jsx(
-      EventMarker,
-      {
-        event: ev,
-        position: [ev.x / ppu, (worldHeight - (ev.y ?? 0)) / ppu + 0.8, 0.2]
-      },
-      ev.id ?? `sev-${i}`
-    )),
-    /* @__PURE__ */ jsxRuntime.jsx(LerpedGroup, { target: playerPos, enabled: interpolate, children: playerSprite?.url ? /* @__PURE__ */ jsxRuntime.jsx("group", { position: [0, playerH / 2, 0], children: /* @__PURE__ */ jsxRuntime.jsx(
-      ModelLoader,
-      {
-        url: playerSprite.url,
-        scale: playerH,
-        rotation: [0, player.facingRight ? 90 : -90, 0],
-        animation: player.animation ?? "idle",
-        fallbackGeometry: "box",
-        castShadow: true
-      }
-    ) }) : /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, playerH / 2, 0], children: [
-      /* @__PURE__ */ jsxRuntime.jsx("capsuleGeometry", { args: [playerH * 0.25, playerH * 0.5, 4, 8] }),
-      /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: "#4488ff" })
-    ] }) })
-  ] });
-}
 var UNIT_BASE_MODEL_SCALE = 0.5;
 var UNIT_BASE_BILLBOARD_HEIGHT = 1.2;
 var UNIT_BASE_PRIMITIVE_RADIUS = 0.3;
-var TILE_TOP_OFFSET = 0.1;
-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__ */ jsxRuntime.jsx(drei.Billboard, { position, children: /* @__PURE__ */ jsxRuntime.jsx(
-    drei.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__ */ jsxRuntime.jsx(
-      "group",
-      {
-        position,
-        onClick: (e) => onTileClick(tile, e),
-        onPointerEnter: (e) => onTileHover(tile, e),
-        onPointerLeave: (e) => onTileHover(null, e),
-        userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          ModelLoader,
-          {
-            url: model.url,
-            scale: 0.95,
-            rotation: [0, tile.rotation ?? 0, 0],
-            fallbackGeometry: "box",
-            castShadow: true,
-            receiveShadow: true
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "mesh",
-    {
-      position,
-      onClick: (e) => onTileClick(tile, e),
-      onPointerEnter: (e) => onTileHover(tile, e),
-      onPointerLeave: (e) => onTileHover(null, e),
-      userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [0.95, 0.2, 0.95] }),
-        /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color, emissive })
-      ]
-    }
-  );
-}
-function DefaultUnit({
+var HEALTHBAR_HEIGHT = 0.05;
+function UnitMesh3D({
   unit,
   position,
   model,
@@ -1971,7 +1878,7 @@ function DefaultUnit({
   resolveUnitFrame,
   onUnitClick
 }) {
-  const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
+  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;
@@ -1986,12 +1893,12 @@ function DefaultUnit({
       children: [
         isSelected && /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.05, 0], rotation: [-Math.PI / 2, 0, 0], children: [
           /* @__PURE__ */ jsxRuntime.jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
-          /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: "#ffff00", transparent: true, opacity: 0.8 })
+          /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: SELECTION_RING_COLOR_3D, transparent: true, opacity: 0.8 })
         ] }),
         hasAtlas && initialFrame ? (
           /* Animated sprite-sheet billboard — single cropped frame, by state */
           /* @__PURE__ */ jsxRuntime.jsx(drei.Billboard, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            UnitSpriteBillboard,
+            SpriteBillboard3D,
             {
               sheetUrl: initialFrame.sheetUrl,
               resolveFrame: () => resolveUnitFrame(unit.id),
@@ -2027,26 +1934,21 @@ function DefaultUnit({
           ] })
         ] }),
         unit.health !== void 0 && unit.maxHealth !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("group", { position: [0, billboardHeight, 0], children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [-0.25, 0, 0], children: [
-            /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [0.5, 0.05] }),
-            /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: 3355443 })
+          /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [-0.5 / 2, 0, 0], children: [
+            /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [HEALTHBAR_3D.width, HEALTHBAR_HEIGHT] }),
+            /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: HEALTHBAR_3D.bg })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "mesh",
             {
               position: [
-                -0.25 + 0.5 * (unit.health / unit.maxHealth) / 2,
+                -0.5 / 2 + HEALTHBAR_3D.width * (unit.health / unit.maxHealth) / 2,
                 0,
                 0.01
               ],
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [0.5 * (unit.health / unit.maxHealth), 0.05] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "meshBasicMaterial",
-                  {
-                    color: unit.health / unit.maxHealth > 0.5 ? 4500036 : unit.health / unit.maxHealth > 0.25 ? 11184708 : 16729156
-                  }
-                )
+                /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [HEALTHBAR_3D.width * (unit.health / unit.maxHealth), HEALTHBAR_HEIGHT] }),
+                /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: healthbarFill3D(unit.health / unit.maxHealth) })
               ]
             }
           )
@@ -2055,7 +1957,7 @@ function DefaultUnit({
     }
   );
 }
-function DefaultFeature({
+function FeatureMesh3D({
   feature,
   position,
   model,
@@ -2085,11 +1987,11 @@ function DefaultFeature({
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.4, 0], children: [
             /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.1, 0.15, 0.8, 6] }),
-            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: 9127187 })
+            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: TREE_COLORS_3D.trunk })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.9, 0], children: [
             /* @__PURE__ */ jsxRuntime.jsx("coneGeometry", { args: [0.5, 0.8, 8] }),
-            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: 2263842 })
+            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: TREE_COLORS_3D.foliage })
           ] })
         ]
       }
@@ -2104,14 +2006,157 @@ function DefaultFeature({
         userData: { type: "feature", featureId: feature.id },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("dodecahedronGeometry", { args: [0.3, 0] }),
-          /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: 8421504 })
+          /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: ROCK_COLOR_3D })
         ]
       }
     );
   }
   return null;
 }
-var GameCanvas3D = React8.forwardRef(
+function CameraController3D({
+  onCameraChange
+}) {
+  const { camera } = fiber.useThree();
+  React10.useEffect(() => {
+    if (onCameraChange) {
+      onCameraChange({
+        x: camera.position.x,
+        y: camera.position.y,
+        z: camera.position.z
+      });
+    }
+  }, [camera.position, onCameraChange]);
+  return null;
+}
+function FollowCamera3D({
+  target,
+  offset
+}) {
+  const { camera } = fiber.useThree();
+  const look = React10.useRef(new THREE6__namespace.Vector3(target[0], target[1], target[2]));
+  const goal = React10.useRef(new THREE6__namespace.Vector3());
+  fiber.useFrame((_, delta) => {
+    const t = Math.min(1, delta * 5);
+    goal.current.set(target[0] + offset[0], target[1] + offset[1], target[2] + offset[2]);
+    camera.position.lerp(goal.current, t);
+    look.current.lerp(goal.current.set(target[0], target[1], target[2]), t);
+    camera.lookAt(look.current);
+  });
+  return null;
+}
+function LerpedGroup3D({
+  target,
+  enabled,
+  children
+}) {
+  const ref = React10.useRef(null);
+  const goal = React10.useRef(new THREE6__namespace.Vector3());
+  fiber.useFrame((_, delta) => {
+    const g = ref.current;
+    if (!g) return;
+    goal.current.set(target[0], target[1], target[2]);
+    if (enabled) g.position.lerp(goal.current, Math.min(1, delta * 10));
+    else g.position.copy(goal.current);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("group", { ref, position: target, children });
+}
+function EventMarker3D({ event, position }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(drei.Billboard, { position, children: /* @__PURE__ */ jsxRuntime.jsx(
+    drei.Text,
+    {
+      fontSize: 0.32,
+      color: EVENT_COLORS_3D[event.type] ?? EVENT_COLORS_3D.default,
+      outlineWidth: 0.02,
+      outlineColor: "#000000",
+      anchorX: "center",
+      anchorY: "middle",
+      children: event.message ?? event.type
+    }
+  ) });
+}
+function SideScene3D({
+  player,
+  platforms,
+  worldHeight,
+  ppu,
+  playerSprite,
+  tileSprites,
+  interpolate,
+  features = [],
+  events = [],
+  assetManifest
+}) {
+  const pw = player.width ?? 32;
+  const ph = player.height ?? 48;
+  const playerPos = [
+    (player.x + pw / 2) / ppu,
+    (worldHeight - player.y - ph) / ppu,
+    0
+  ];
+  const playerH = Math.max(ph / ppu, 0.5);
+  return /* @__PURE__ */ jsxRuntime.jsxs("group", { children: [
+    platforms.map((p, i) => {
+      const platformType = p.type ?? "platform";
+      const model = tileSprites?.[platformType]?.url;
+      const topY = (worldHeight - p.y) / ppu;
+      if (model) {
+        const cells = Math.max(1, Math.round(p.width / ppu));
+        const x0 = p.x / ppu;
+        return /* @__PURE__ */ jsxRuntime.jsx("group", { children: Array.from({ length: cells }, (_, c) => /* @__PURE__ */ jsxRuntime.jsx("group", { position: [x0 + c + 0.5, topY - 0.475, 0], children: /* @__PURE__ */ jsxRuntime.jsx(ModelLoader, { url: model, scale: 0.95, fallbackGeometry: "box", castShadow: true, receiveShadow: true }) }, c)) }, `plat-${i}`);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "mesh",
+        {
+          position: [(p.x + p.width / 2) / ppu, topY - p.height / 2 / ppu, 0],
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [p.width / ppu, p.height / ppu, 1] }),
+            /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: SIDE_PLATFORM_COLORS_3D[platformType] ?? SIDE_PLATFORM_COLORS_3D.default })
+          ]
+        },
+        `plat-${i}`
+      );
+    }),
+    features.map((feature, i) => {
+      const model = feature.assetUrl ?? assetManifest?.features?.[feature.type];
+      const fx = feature.x / ppu;
+      const fy = (worldHeight - feature.y) / ppu;
+      if (!model?.url) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx("group", { position: [fx, fy, 0], children: /* @__PURE__ */ jsxRuntime.jsx(ModelLoader, { url: model.url, scale: 0.6, tint: feature.color, fallbackGeometry: "sphere", castShadow: true }) }, feature.id ?? `sfeat-${i}`);
+    }),
+    events.map((ev, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      EventMarker3D,
+      {
+        event: ev,
+        position: [ev.x / ppu, (worldHeight - (ev.y ?? 0)) / ppu + 0.8, 0.2]
+      },
+      ev.id ?? `sev-${i}`
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx(LerpedGroup3D, { target: playerPos, enabled: interpolate, children: playerSprite?.url ? /* @__PURE__ */ jsxRuntime.jsx("group", { position: [0, playerH / 2, 0], children: /* @__PURE__ */ jsxRuntime.jsx(
+      ModelLoader,
+      {
+        url: playerSprite.url,
+        scale: playerH,
+        rotation: [0, player.facingRight ? 90 : -90, 0],
+        animation: player.animation ?? "idle",
+        fallbackGeometry: "box",
+        castShadow: true
+      }
+    ) }) : /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, playerH / 2, 0], children: [
+      /* @__PURE__ */ jsxRuntime.jsx("capsuleGeometry", { args: [playerH * 0.25, playerH * 0.5, 4, 8] }),
+      /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: SIDE_PLAYER_COLOR_3D })
+    ] }) })
+  ] });
+}
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var DEFAULT_GRID_CONFIG = {
+  cellSize: 1,
+  offsetX: 0,
+  offsetZ: 0
+};
+var TILE_TOP_OFFSET = 0.1;
+var GameCanvas3D = React10.forwardRef(
   ({
     tiles = [],
     units = [],
@@ -2124,7 +2169,7 @@ var GameCanvas3D = React8.forwardRef(
     showTileInfo = false,
     overlay = "default",
     shadows = true,
-    backgroundColor = "#1a1a2e",
+    backgroundColor = DEFAULT_BACKGROUND_3D,
     onTileClick,
     onUnitClick,
     onFeatureClick,
@@ -2166,13 +2211,13 @@ var GameCanvas3D = React8.forwardRef(
     interpolateUnits = false,
     children
   }, ref) => {
-    const containerRef = React8.useRef(null);
-    const controlsRef = React8.useRef(null);
-    const [hoveredTile, setHoveredTile] = React8.useState(null);
-    const [internalError, setInternalError] = React8.useState(null);
+    const containerRef = React10.useRef(null);
+    const controlsRef = React10.useRef(null);
+    const [hoveredTile, setHoveredTile] = React10.useState(null);
+    const [internalError, setInternalError] = React10.useState(null);
     const eventBus = useEventBus();
-    const keysRef = React8.useRef(/* @__PURE__ */ new Set());
-    React8.useEffect(() => {
+    const keysRef = React10.useRef(/* @__PURE__ */ new Set());
+    React10.useEffect(() => {
       if (!keyMap && !keyUpMap) return;
       const down = (e) => {
         if (keysRef.current.has(e.code)) return;
@@ -2195,7 +2240,7 @@ var GameCanvas3D = React8.forwardRef(
         window.removeEventListener("keyup", up);
       };
     }, [keyMap, keyUpMap, eventBus]);
-    React8.useEffect(() => {
+    React10.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       let node = el;
@@ -2219,7 +2264,7 @@ var GameCanvas3D = React8.forwardRef(
       }
     }, []);
     const { sheetUrls: atlasSheetUrls, resolveUnitFrame } = useUnitSpriteAtlas(units);
-    const preloadUrls = React8.useMemo(() => [...preloadAssets, ...atlasSheetUrls], [preloadAssets, atlasSheetUrls]);
+    const preloadUrls = React10.useMemo(() => [...preloadAssets, ...atlasSheetUrls], [preloadAssets, atlasSheetUrls]);
     const { isLoading: assetsLoading, progress, loaded, total } = useAssetLoader({
       preloadUrls,
       loader: customAssetLoader
@@ -2240,7 +2285,7 @@ var GameCanvas3D = React8.forwardRef(
       onTileHover,
       onUnitAnimation
     });
-    const gridBounds = React8.useMemo(() => {
+    const gridBounds = React10.useMemo(() => {
       if (tiles.length === 0) {
         return { minX: 0, maxX: 10, minZ: 0, maxZ: 10 };
       }
@@ -2253,14 +2298,14 @@ var GameCanvas3D = React8.forwardRef(
         maxZ: Math.max(...zs)
       };
     }, [tiles]);
-    const cameraTarget = React8.useMemo(() => {
+    const cameraTarget = React10.useMemo(() => {
       return [
         (gridBounds.minX + gridBounds.maxX) / 2,
         0,
         (gridBounds.minZ + gridBounds.maxZ) / 2
       ];
     }, [gridBounds]);
-    const gridConfig = React8.useMemo(
+    const gridConfig = React10.useMemo(
       () => ({
         ...DEFAULT_GRID_CONFIG,
         offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
@@ -2268,7 +2313,7 @@ var GameCanvas3D = React8.forwardRef(
       }),
       [gridBounds]
     );
-    const gridToWorld2 = React8.useCallback(
+    const gridToWorld2 = React10.useCallback(
       (x, z, y = 0) => {
         const worldX = (x - gridBounds.minX) * gridConfig.cellSize;
         const worldZ = (z - gridBounds.minZ) * gridConfig.cellSize;
@@ -2276,7 +2321,7 @@ var GameCanvas3D = React8.forwardRef(
       },
       [gridBounds, gridConfig]
     );
-    React8.useImperativeHandle(ref, () => ({
+    React10.useImperativeHandle(ref, () => ({
       getCameraPosition: () => {
         if (controlsRef.current) {
           const pos = controlsRef.current.object.position;
@@ -2314,19 +2359,19 @@ var GameCanvas3D = React8.forwardRef(
         features
       })
     }));
-    const handleTileClick = React8.useCallback(
+    const handleTileClick = React10.useCallback(
       (tile, event) => {
         eventHandlers.handleTileClick(tile, event);
       },
       [eventHandlers]
     );
-    const handleUnitClick = React8.useCallback(
+    const handleUnitClick = React10.useCallback(
       (unit, event) => {
         eventHandlers.handleUnitClick(unit, event);
       },
       [eventHandlers]
     );
-    const handleFeatureClick = React8.useCallback(
+    const handleFeatureClick = React10.useCallback(
       (feature, event) => {
         if (event) {
           eventHandlers.handleFeatureClick(feature, event);
@@ -2334,7 +2379,7 @@ var GameCanvas3D = React8.forwardRef(
       },
       [eventHandlers]
     );
-    const handleTileHover = React8.useCallback(
+    const handleTileHover = React10.useCallback(
       (tile, event) => {
         setHoveredTile(tile);
         if (event) {
@@ -2343,7 +2388,7 @@ var GameCanvas3D = React8.forwardRef(
       },
       [eventHandlers]
     );
-    const cameraConfig = React8.useMemo(() => {
+    const cameraConfig = React10.useMemo(() => {
       const size = Math.max(
         gridBounds.maxX - gridBounds.minX,
         gridBounds.maxZ - gridBounds.minZ,
@@ -2377,7 +2422,7 @@ var GameCanvas3D = React8.forwardRef(
           };
       }
     }, [cameraMode, gridBounds]);
-    const followTarget = React8.useMemo(() => {
+    const followTarget = React10.useMemo(() => {
       if (player) {
         return [
           (player.x + (player.width ?? 32) / 2) / pixelsPerUnit,
@@ -2397,7 +2442,7 @@ var GameCanvas3D = React8.forwardRef(
       }
       return cameraTarget;
     }, [player, pixelsPerUnit, worldHeight, units, selectedUnitId, gridBounds, gridConfig, cameraTarget]);
-    const followOffset = React8.useMemo(() => {
+    const followOffset = React10.useMemo(() => {
       if (cameraMode === "chase") {
         const selected = units.find((u) => u.id === selectedUnitId);
         const h = selected?.heading ?? 0;
@@ -2458,27 +2503,25 @@ var GameCanvas3D = React8.forwardRef(
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(CameraController, { onCameraChange: eventHandlers.handleCameraChange }),
+                    /* @__PURE__ */ jsxRuntime.jsx(CameraController3D, { onCameraChange: eventHandlers.handleCameraChange }),
                     (cameraMode === "follow" || cameraMode === "chase") && /* @__PURE__ */ jsxRuntime.jsx(
-                      FollowCamera,
+                      FollowCamera3D,
                       {
                         target: followTarget,
                         offset: followOffset
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx("ambientLight", { intensity: 0.6 }),
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      "directionalLight",
+                      Lighting3D,
                       {
-                        position: [10, 20, 10],
-                        intensity: 0.8,
-                        castShadow: shadows,
-                        "shadow-mapSize": [2048, 2048],
-                        "shadow-bias": -4e-4,
-                        "shadow-normalBias": 0.04
+                        shadows,
+                        shadowBias: -4e-4,
+                        shadowNormalBias: 0.04,
+                        shadowCameraSize: 5,
+                        shadowCameraNear: 0.5,
+                        shadowCameraFar: 500
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx("hemisphereLight", { intensity: 0.3, color: "#87ceeb", groundColor: "#362d1d" }),
                     showGrid && /* @__PURE__ */ jsxRuntime.jsx(
                       drei.Grid,
                       {
@@ -2493,10 +2536,10 @@ var GameCanvas3D = React8.forwardRef(
                         ],
                         cellSize: 1,
                         cellThickness: 1,
-                        cellColor: "#444444",
+                        cellColor: GRID_COLORS_3D.cell,
                         sectionSize: 5,
                         sectionThickness: 1.5,
-                        sectionColor: "#666666",
+                        sectionColor: GRID_COLORS_3D.section,
                         fadeDistance: 50,
                         fadeStrength: 1
                       }
@@ -2504,7 +2547,7 @@ var GameCanvas3D = React8.forwardRef(
                     player ? (
                       /* Side-scroller mode — LOLO-owned pixel space mapped to world units */
                       /* @__PURE__ */ jsxRuntime.jsx(
-                        SideScene,
+                        SideScene3D,
                         {
                           player,
                           platforms,
@@ -2530,7 +2573,7 @@ var GameCanvas3D = React8.forwardRef(
                           return /* @__PURE__ */ jsxRuntime.jsx(CustomTileRenderer, { tile, position }, key);
                         }
                         return /* @__PURE__ */ jsxRuntime.jsx(
-                          DefaultTile,
+                          TileMesh3D,
                           {
                             tile,
                             position,
@@ -2556,7 +2599,7 @@ var GameCanvas3D = React8.forwardRef(
                           return /* @__PURE__ */ jsxRuntime.jsx(CustomFeatureRenderer, { feature, position }, key);
                         }
                         return /* @__PURE__ */ jsxRuntime.jsx(
-                          DefaultFeature,
+                          FeatureMesh3D,
                           {
                             feature,
                             position,
@@ -2572,8 +2615,8 @@ var GameCanvas3D = React8.forwardRef(
                           unit.z ?? unit.y ?? unit.position?.y ?? 0,
                           (unit.elevation ?? 0) + TILE_TOP_OFFSET
                         );
-                        return /* @__PURE__ */ jsxRuntime.jsx(LerpedGroup, { target: position, enabled: interpolateUnits, children: CustomUnitRenderer ? /* @__PURE__ */ jsxRuntime.jsx(CustomUnitRenderer, { unit, position: [0, 0, 0] }) : /* @__PURE__ */ jsxRuntime.jsx(
-                          DefaultUnit,
+                        return /* @__PURE__ */ jsxRuntime.jsx(LerpedGroup3D, { target: position, enabled: interpolateUnits, children: CustomUnitRenderer ? /* @__PURE__ */ jsxRuntime.jsx(CustomUnitRenderer, { unit, position: [0, 0, 0] }) : /* @__PURE__ */ jsxRuntime.jsx(
+                          UnitMesh3D,
                           {
                             unit,
                             position: [0, 0, 0],
@@ -2589,7 +2632,7 @@ var GameCanvas3D = React8.forwardRef(
                       events.map((ev, i) => {
                         const position = gridToWorld2(ev.x, ev.z ?? ev.y ?? 0, 0);
                         return /* @__PURE__ */ jsxRuntime.jsx(
-                          EventMarker,
+                          EventMarker3D,
                           {
                             event: ev,
                             position: [position[0], position[1] + 1.4, position[2]]
@@ -2686,7 +2729,7 @@ function getIconFamilyServerSnapshot() {
   return DEFAULT_FAMILY;
 }
 function useIconFamily() {
-  return React8.useSyncExternalStore(
+  return React10.useSyncExternalStore(
     subscribeIconFamily,
     getIconFamilySnapshot,
     getIconFamilyServerSnapshot
@@ -2708,7 +2751,7 @@ function loadLib(key, importer) {
   return p;
 }
 function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
-  const Lazy = React8__namespace.default.lazy(async () => {
+  const Lazy = React10__namespace.default.lazy(async () => {
     const lib = await loadLib(libKey, importer);
     const Comp = pick(lib);
     if (!Comp) {
@@ -2718,7 +2761,7 @@ function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
     return { default: Comp };
   });
   const Wrapped = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-    React8__namespace.default.Suspense,
+    React10__namespace.default.Suspense,
     {
       fallback: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
@@ -3387,7 +3430,7 @@ var Icon = ({
   const directIcon = typeof icon === "string" ? void 0 : icon;
   const effectiveName = typeof icon === "string" ? icon : name;
   const family = useIconFamily();
-  const RenderedComponent = React8__namespace.default.useMemo(() => {
+  const RenderedComponent = React10__namespace.default.useMemo(() => {
     if (directIcon) return null;
     return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
   }, [directIcon, effectiveName, family]);
@@ -3514,13 +3557,13 @@ function AtlasImage({
   style,
   "aria-hidden": ariaHidden
 }) {
-  const [, bump] = React8__namespace.useReducer((x) => x + 1, 0);
-  const canvasRef = React8__namespace.useRef(null);
+  const [, bump] = React10__namespace.useReducer((x) => x + 1, 0);
+  const canvasRef = React10__namespace.useRef(null);
   const sliced = isAtlasAsset(asset);
   const atlas = sliced ? getAtlas(asset.atlas, bump) : void 0;
   const img = sliced && asset?.url ? getSheetImage(asset.url, bump) : null;
   const rect = sliced && atlas ? subRectFor(atlas, asset.sprite) : null;
-  React8__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas || !img || !rect) return;
     canvas.width = rect.sw;
@@ -3644,7 +3687,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
   }
-  if (React8__namespace.default.isValidElement(value)) {
+  if (React10__namespace.default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && isIconLike(value)) {
@@ -3653,7 +3696,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React8__namespace.default.forwardRef(
+var Button = React10__namespace.default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -3801,7 +3844,7 @@ var Typography = ({
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component2 = as || defaultElements[variant];
-  return React8__namespace.default.createElement(
+  return React10__namespace.default.createElement(
     Component2,
     {
       id,
@@ -3874,7 +3917,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 React8__namespace.default.createElement(
+  return React10__namespace.default.createElement(
     Component2,
     {
       className: cn(
@@ -3967,8 +4010,8 @@ function GameBoard3D({
   const turn = row ? num(row.turn) : 0;
   const currentTeam = row ? str(row.currentTeam) : "player";
   const isGameOver = result !== "none";
-  const gameEndEmittedRef = React8.useRef(false);
-  React8.useEffect(() => {
+  const gameEndEmittedRef = React10.useRef(false);
+  React10.useEffect(() => {
     if ((result === "victory" || result === "defeat") && gameEndEvent) {
       if (!gameEndEmittedRef.current) {
         gameEndEmittedRef.current = true;
@@ -3978,7 +4021,7 @@ function GameBoard3D({
       gameEndEmittedRef.current = false;
     }
   }, [result, gameEndEvent, eventBus]);
-  const checkGameEnd = React8.useCallback(() => {
+  const checkGameEnd = React10.useCallback(() => {
     const alivePlayer = entityUnits.filter((u) => unitTeam(u) === "player" && unitHealth(u) > 0);
     const aliveEnemy = entityUnits.filter((u) => unitTeam(u) === "enemy" && unitHealth(u) > 0);
     if (alivePlayer.length === 0 && gameEndEvent) {
@@ -3987,7 +4030,7 @@ function GameBoard3D({
       eventBus.emit(`UI:${gameEndEvent}`, { result: "victory" });
     }
   }, [entityUnits, gameEndEvent, eventBus]);
-  const handleUnitClickCallback = React8.useCallback((isoUnit) => {
+  const handleUnitClickCallback = React10.useCallback((isoUnit) => {
     if (phase !== "action" || !selectedUnitId || !attackEvent) return;
     const attackerRow = entityUnits.find((u) => str(u.id) === selectedUnitId);
     const targetRow = entityUnits.find((u) => str(u.id) === isoUnit.id);
@@ -4007,13 +4050,13 @@ function GameBoard3D({
       setTimeout(checkGameEnd, 100);
     }
   }, [phase, selectedUnitId, entityUnits, attackEvent, eventBus, checkGameEnd]);
-  const handleEndTurn = React8.useCallback(() => {
+  const handleEndTurn = React10.useCallback(() => {
     if (endTurnEvent) eventBus.emit(`UI:${endTurnEvent}`, {});
   }, [endTurnEvent, eventBus]);
-  const handleCancel = React8.useCallback(() => {
+  const handleCancel = React10.useCallback(() => {
     if (cancelEvent) eventBus.emit(`UI:${cancelEvent}`, {});
   }, [cancelEvent, eventBus]);
-  const handlePlayAgain = React8.useCallback(() => {
+  const handlePlayAgain = React10.useCallback(() => {
     if (playAgainEvent) eventBus.emit(`UI:${playAgainEvent}`, {});
   }, [playAgainEvent, eventBus]);
   return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: cn("game-board-3d block w-full min-h-[85vh] relative", className), children: [
@@ -4104,24 +4147,24 @@ function GameBoard3D({
 GameBoard3D.displayName = "GameBoard3D";
 function useTapReveal(options = {}) {
   const { onReveal, onDismiss, refs, enabled = true } = options;
-  const [revealed, setRevealed] = React8.useState(false);
-  const onRevealRef = React8.useRef(onReveal);
-  const onDismissRef = React8.useRef(onDismiss);
+  const [revealed, setRevealed] = React10.useState(false);
+  const onRevealRef = React10.useRef(onReveal);
+  const onDismissRef = React10.useRef(onDismiss);
   onRevealRef.current = onReveal;
   onDismissRef.current = onDismiss;
-  const reveal = React8.useCallback(() => {
+  const reveal = React10.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (!wasRevealed) onRevealRef.current?.();
       return true;
     });
   }, []);
-  const dismiss = React8.useCallback(() => {
+  const dismiss = React10.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (wasRevealed) onDismissRef.current?.();
       return false;
     });
   }, []);
-  const onPointerDown = React8.useCallback(
+  const onPointerDown = React10.useCallback(
     (e) => {
       if (!enabled || e.pointerType === "mouse") return;
       if (revealed) dismiss();
@@ -4129,7 +4172,7 @@ function useTapReveal(options = {}) {
     },
     [enabled, revealed, reveal, dismiss]
   );
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     if (!revealed || typeof document === "undefined") return;
     const onDocDown = (ev) => {
       const target = ev.target;
@@ -4249,7 +4292,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React8__namespace.default.forwardRef(
+var Box = React10__namespace.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -4281,20 +4324,20 @@ var Box = React8__namespace.default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
-    const handleClick = React8.useCallback((e) => {
+    const handleClick = React10.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React8.useCallback((e) => {
+    const handleMouseEnter = React10.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React8.useCallback((e) => {
+    const handleMouseLeave = React10.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }
@@ -4302,19 +4345,19 @@ var Box = React8__namespace.default.forwardRef(
     }, [hoverEvent, eventBus, onMouseLeave]);
     const { triggerProps } = useTapReveal({
       enabled: tapReveal && !!hoverEvent,
-      onReveal: React8.useCallback(() => {
+      onReveal: React10.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }, [hoverEvent, eventBus]),
-      onDismiss: React8.useCallback(() => {
+      onDismiss: React10.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }, [hoverEvent, eventBus])
     });
-    const handlePointerDown = React8.useCallback((e) => {
+    const handlePointerDown = React10.useCallback((e) => {
       if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
     const isClickable = action || onClick;
-    return React8__namespace.default.createElement(
+    return React10__namespace.default.createElement(
       Component2,
       {
         ref,
@@ -5554,10 +5597,10 @@ var Avl3DOrbitalNode = ({
   position,
   onClick
 }) => {
-  const groupRef = React8.useRef(null);
-  const [hovered, setHovered] = React8.useState(false);
-  const scale = React8.useMemo(() => 0.6 + Math.min(traitCount, 8) * 0.3, [traitCount]);
-  const currentScale = React8.useRef(scale);
+  const groupRef = React10.useRef(null);
+  const [hovered, setHovered] = React10.useState(false);
+  const scale = React10.useMemo(() => 0.6 + Math.min(traitCount, 8) * 0.3, [traitCount]);
+  const currentScale = React10.useRef(scale);
   const targetScale = hovered ? scale * 1.06 : scale;
   fiber.useFrame((_, delta) => {
     if (!groupRef.current) return;
@@ -5699,7 +5742,7 @@ var Avl3DCrossWire = ({
   eventName,
   color = AVL_3D_COLORS.crossWire
 }) => {
-  const { tubeArgs, midpoint } = React8.useMemo(() => {
+  const { tubeArgs, midpoint } = React10.useMemo(() => {
     const curve = arcCurve3D(from, to, 2);
     const mid = curve.getPoint(0.5);
     return {
@@ -5738,9 +5781,9 @@ var Avl3DApplicationScene = ({
   data,
   onOrbitalClick
 }) => {
-  const groupRef = React8.useRef(null);
-  const [, setHoverTrigger] = React8.useState(0);
-  const orbitalPositions = React8.useMemo(() => {
+  const groupRef = React10.useRef(null);
+  const [, setHoverTrigger] = React10.useState(0);
+  const orbitalPositions = React10.useMemo(() => {
     const baseRadius = Math.max(4, data.orbitals.length * 1.5);
     if (data.crossLinks.length === 0) {
       return goldenSpiralPositions(data.orbitals.length, baseRadius);
@@ -5753,7 +5796,7 @@ var Avl3DApplicationScene = ({
     })).filter((e) => e.from >= 0 && e.to >= 0);
     return forceDirectedPositions(data.orbitals.length, edges, baseRadius);
   }, [data.orbitals, data.crossLinks]);
-  const positionByName = React8.useMemo(() => {
+  const positionByName = React10.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     data.orbitals.forEach((orb, i) => {
       const pos = orbitalPositions[i];
@@ -5836,7 +5879,7 @@ var Avl3DEntityCore = ({
   position,
   fields
 }) => {
-  const coreRef = React8.useRef(null);
+  const coreRef = React10.useRef(null);
   fiber.useFrame((_, delta) => {
     if (!coreRef.current) return;
     coreRef.current.rotation.y += delta * 0.3;
@@ -5989,8 +6032,8 @@ function TraitOrbit({
   onClick,
   onHover
 }) {
-  const groupRef = React8.useRef(null);
-  const angleRef = React8.useRef(Math.random() * Math.PI * 2);
+  const groupRef = React10.useRef(null);
+  const angleRef = React10.useRef(Math.random() * Math.PI * 2);
   fiber.useFrame((_, delta) => {
     angleRef.current += delta * speed;
     if (!groupRef.current) return;
@@ -6121,9 +6164,9 @@ var Avl3DOrbitalScene = ({
   highlightedTrait,
   onTraitHighlight
 }) => {
-  const [localHighlight, setLocalHighlight] = React8.useState(null);
+  const [localHighlight, setLocalHighlight] = React10.useState(null);
   const activeHighlight = highlightedTrait ?? localHighlight;
-  const traitOrbits = React8.useMemo(() => {
+  const traitOrbits = React10.useMemo(() => {
     return data.traits.map((trait, i) => ({
       name: trait.name,
       radius: 3 + i * 1.2,
@@ -6134,7 +6177,7 @@ var Avl3DOrbitalScene = ({
       transitionCount: trait.transitionCount
     }));
   }, [data.traits]);
-  const pagePositions = React8.useMemo(() => {
+  const pagePositions = React10.useMemo(() => {
     const outerRadius = 3 + data.traits.length * 1.2 + 1.5;
     return data.pages.map((_, i) => {
       const angle = 2 * Math.PI * i / data.pages.length - Math.PI / 2;
@@ -6198,12 +6241,12 @@ var Avl3DStateNode = ({
   outgoingCount = 0,
   onClick
 }) => {
-  const [hovered, setHovered] = React8.useState(false);
+  const [hovered, setHovered] = React10.useState(false);
   const baseColor = active ? AVL_3D_COLORS.stateActive : AVL_3D_COLORS.stateIdle;
   const emissiveColor = active ? AVL_3D_COLORS.stateActive : AVL_3D_COLORS.stateEdge;
   const emissiveIntensity = active ? 2 : hovered ? 0.8 : 0.3;
   const targetScale = hovered ? 1.08 : 1;
-  const currentScale = React8.useRef(1);
+  const currentScale = React10.useRef(1);
   fiber.useFrame((_, delta) => {
     currentScale.current = THREE6.MathUtils.damp(currentScale.current, targetScale, 6, delta);
   });
@@ -6377,8 +6420,8 @@ var Avl3DTransitionArc = ({
   onClick,
   color = AVL_3D_COLORS.transitionArc
 }) => {
-  const [hovered, setHovered] = React8.useState(false);
-  const { tubeArgs, labelPos, guardPos, arrowPos, arrowQuat, effectPositions } = React8.useMemo(() => {
+  const [hovered, setHovered] = React10.useState(false);
+  const { tubeArgs, labelPos, guardPos, arrowPos, arrowQuat, effectPositions } = React10.useMemo(() => {
     const offset = 1.5 + index * 0.8;
     const curve = isSelf ? selfLoopCurve3D(from, 1.2) : arcCurve3D(from, to, offset);
     const mid = curve.getPoint(0.5);
@@ -6511,7 +6554,7 @@ var Avl3DTraitScene = ({
   data,
   onTransitionClick
 }) => {
-  const statePositions = React8.useMemo(() => {
+  const statePositions = React10.useMemo(() => {
     const radius = Math.max(3, data.states.length * 0.8);
     const positions = fibonacciSpherePositions(data.states.length, radius);
     const posMap = /* @__PURE__ */ new Map();
@@ -6521,7 +6564,7 @@ var Avl3DTraitScene = ({
     });
     return posMap;
   }, [data.states]);
-  const transitionIndices = React8.useMemo(() => {
+  const transitionIndices = React10.useMemo(() => {
     const pairCount = /* @__PURE__ */ new Map();
     return data.transitions.map((t) => {
       const key = `${t.from}->${t.to}`;
@@ -6530,7 +6573,7 @@ var Avl3DTraitScene = ({
       return idx;
     });
   }, [data.transitions]);
-  const transitionCounts = React8.useMemo(() => {
+  const transitionCounts = React10.useMemo(() => {
     const incoming = /* @__PURE__ */ new Map();
     const outgoing = /* @__PURE__ */ new Map();
     for (const t of data.transitions) {
@@ -6640,11 +6683,11 @@ var Avl3DExprTree = ({
   expression,
   position
 }) => {
-  const layoutResults = React8.useMemo(() => {
+  const layoutResults = React10.useMemo(() => {
     const origin = { x: position[0], y: position[1], z: position[2] };
     return treeLayout3D(expression, origin, 2.5, 1.5);
   }, [expression, position]);
-  const edges = React8.useMemo(() => {
+  const edges = React10.useMemo(() => {
     const result = [];
     function collectEdges(node, parentPos) {
       const entry = layoutResults.find((r) => r.node === node);
@@ -6924,7 +6967,7 @@ var Avl3DEffects = ({
   const dof = DOF_CONFIG[level];
   const sparkles = SPARKLE_CONFIGS[level];
   const stars = STARS_CONFIG[level];
-  const starsKey = React8.useMemo(() => `stars-${level}`, [level]);
+  const starsKey = React10.useMemo(() => `stars-${level}`, [level]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       drei.Stars,
@@ -6988,16 +7031,16 @@ var DEFAULT_CONFIG2 = {
   modelOverrides: {},
   effectsEnabled: true
 };
-var Avl3DContext = React8.createContext(DEFAULT_CONFIG2);
+var Avl3DContext = React10.createContext(DEFAULT_CONFIG2);
 function useAvl3DConfig() {
-  return React8.useContext(Avl3DContext);
+  return React10.useContext(Avl3DContext);
 }
-function CameraController2({ targetPosition, targetLookAt, animated }) {
+function CameraController({ targetPosition, targetLookAt, animated }) {
   const { camera } = fiber.useThree();
-  const targetPosVec = React8.useRef(new THREE6__namespace.Vector3(...targetPosition));
-  const targetLookVec = React8.useRef(new THREE6__namespace.Vector3(...targetLookAt));
-  const isAnimating = React8.useRef(false);
-  React8.useEffect(() => {
+  const targetPosVec = React10.useRef(new THREE6__namespace.Vector3(...targetPosition));
+  const targetLookVec = React10.useRef(new THREE6__namespace.Vector3(...targetLookAt));
+  const isAnimating = React10.useRef(false);
+  React10.useEffect(() => {
     const newTarget = new THREE6__namespace.Vector3(...targetPosition);
     const newLookAt = new THREE6__namespace.Vector3(...targetLookAt);
     if (!newTarget.equals(targetPosVec.current) || !newLookAt.equals(targetLookVec.current)) {
@@ -7026,8 +7069,8 @@ function CameraController2({ targetPosition, targetLookAt, animated }) {
   return null;
 }
 function SceneFade({ animating, children }) {
-  const groupRef = React8.useRef(null);
-  const opacityRef = React8.useRef(1);
+  const groupRef = React10.useRef(null);
+  const opacityRef = React10.useRef(1);
   fiber.useFrame((_, delta) => {
     if (!groupRef.current) return;
     const target = animating ? 0 : 1;
@@ -7051,7 +7094,7 @@ var Avl3DViewer = ({
   modelOverrides = {}
 }) => {
   const { t } = hooks.useTranslate();
-  const schema = React8.useMemo(() => {
+  const schema = React10.useMemo(() => {
     if (typeof schemaProp === "string") {
       try {
         return JSON.parse(schemaProp);
@@ -7061,12 +7104,12 @@ var Avl3DViewer = ({
     }
     return schemaProp;
   }, [schemaProp]);
-  const configValue = React8.useMemo(() => ({
+  const configValue = React10.useMemo(() => ({
     modelOverrides,
     effectsEnabled: effects
   }), [modelOverrides, effects]);
-  const [state, dispatch] = React8.useReducer(zoomReducer, initialZoomState);
-  React8.useEffect(() => {
+  const [state, dispatch] = React10.useReducer(zoomReducer, initialZoomState);
+  React10.useEffect(() => {
     if (initialOrbital) {
       dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: initialOrbital, targetPosition: { x: 0, y: 0 } });
       setTimeout(() => dispatch({ type: "ANIMATION_COMPLETE" }), 0);
@@ -7078,35 +7121,35 @@ var Avl3DViewer = ({
       }
     }
   }, [initialOrbital, initialTrait]);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     onZoomChange?.(state.level, {
       orbital: state.selectedOrbital ?? void 0,
       trait: state.selectedTrait ?? void 0
     });
   }, [state.level, state.selectedOrbital, state.selectedTrait, onZoomChange]);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     if (!state.animating) return;
     const timer = setTimeout(() => {
       dispatch({ type: "ANIMATION_COMPLETE" });
     }, 800);
     return () => clearTimeout(timer);
   }, [state.animating]);
-  const handleKeyDown = React8.useCallback((e) => {
+  const handleKeyDown = React10.useCallback((e) => {
     if (e.key === "Escape") {
       dispatch({ type: "ZOOM_OUT" });
     }
   }, []);
-  const handleOrbitalClick = React8.useCallback((name) => {
+  const handleOrbitalClick = React10.useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const handleTraitClick = React8.useCallback((name) => {
+  const handleTraitClick = React10.useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const [highlightedTrait, setHighlightedTrait] = React8__namespace.default.useState(null);
-  const handleTransitionClick = React8.useCallback((index) => {
+  const [highlightedTrait, setHighlightedTrait] = React10__namespace.default.useState(null);
+  const handleTransitionClick = React10.useCallback((index) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const handleBreadcrumbClick = React8.useCallback((targetLevel) => {
+  const handleBreadcrumbClick = React10.useCallback((targetLevel) => {
     const levelOrder = ["application", "orbital", "trait", "transition"];
     const currentIdx = levelOrder.indexOf(state.level);
     const targetIdx = levelOrder.indexOf(targetLevel);
@@ -7115,7 +7158,7 @@ var Avl3DViewer = ({
     }
   }, [state.level]);
   const cameraConfig = CAMERA_POSITIONS[state.level];
-  const sceneContent = React8.useMemo(() => {
+  const sceneContent = React10.useMemo(() => {
     switch (state.level) {
       case "application": {
         const data = parseApplicationLevel(schema);
@@ -7189,7 +7232,7 @@ var Avl3DViewer = ({
             gap: "xs",
             align: "center",
             className: "absolute top-2 left-2 z-10 bg-surface/80 backdrop-blur rounded-md px-3 py-1.5",
-            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React8__namespace.default.Fragment, { children: [
+            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React10__namespace.default.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
               i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
                 Box,
@@ -7264,7 +7307,7 @@ var Avl3DViewer = ({
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    CameraController2,
+                    CameraController,
                     {
                       targetPosition: cameraConfig.position,
                       targetLookAt: cameraConfig.target,