@almadar/ui 2.17.0 → 2.18.0

package/dist/components/organisms/game/three/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React8 = require('react');
+var React7 = require('react');
 var fiber = require('@react-three/fiber');
 var THREE6 = require('three');
 var jsxRuntime = require('react/jsx-runtime');
@@ -32,7 +32,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React8__default = /*#__PURE__*/_interopDefault(React8);
+var React7__default = /*#__PURE__*/_interopDefault(React7);
 var THREE6__namespace = /*#__PURE__*/_interopNamespace(THREE6);
 
 var __defProp = Object.defineProperty;
@@ -40,8 +40,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 = React7.useRef(false);
+  React7.useEffect(() => {
     if (initializedRef.current) return;
     initializedRef.current = true;
     if (background.startsWith("#") || background.startsWith("rgb")) {
@@ -62,7 +62,7 @@ function Scene3D({ background = "#1a1a2e", fog, children }) {
   }, [scene, background, fog]);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 }
-var Camera3D = React8.forwardRef(
+var Camera3D = React7.forwardRef(
   ({
     mode = "isometric",
     position = [10, 10, 10],
@@ -75,10 +75,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 = React7.useRef(null);
+    const initialPosition = React7.useRef(new THREE6__namespace.Vector3(...position));
+    const initialTarget = React7.useRef(new THREE6__namespace.Vector3(...target));
+    React7.useEffect(() => {
       let newCamera;
       if (mode === "isometric") {
         const aspect = viewport.aspect;
@@ -109,7 +109,7 @@ var Camera3D = React8.forwardRef(
         onChange(camera);
       }
     });
-    React8.useImperativeHandle(ref, () => ({
+    React7.useImperativeHandle(ref, () => ({
       getCamera: () => camera,
       setPosition: (x, y, z) => {
         camera.position.set(x, y, z);
@@ -250,7 +250,7 @@ function Canvas3DLoadingState({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "canvas-3d-loading__background", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg__grid" }) })
   ] });
 }
-var Canvas3DErrorBoundary = class extends React8.Component {
+var Canvas3DErrorBoundary = class extends React7.Component {
   constructor(props) {
     super(props);
     __publicField(this, "handleReset", () => {
@@ -329,12 +329,12 @@ function detectAssetRoot(modelUrl) {
   return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
 }
 function useGLTFModel(url, resourceBasePath) {
-  const [state, setState] = React8.useState({
+  const [state, setState] = React7.useState({
     model: null,
     isLoading: false,
     error: null
   });
-  React8.useEffect(() => {
+  React7.useEffect(() => {
     if (!url) {
       setState({ model: null, isLoading: false, error: null });
       return;
@@ -383,7 +383,7 @@ function ModelLoader({
   resourceBasePath
 }) {
   const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
-  const model = React8.useMemo(() => {
+  const model = React7.useMemo(() => {
     if (!loadedModel) return null;
     const cloned = loadedModel.clone();
     cloned.traverse((child) => {
@@ -394,13 +394,13 @@ function ModelLoader({
     });
     return cloned;
   }, [loadedModel, castShadow, receiveShadow]);
-  const scaleArray = React8.useMemo(() => {
+  const scaleArray = React7.useMemo(() => {
     if (typeof scale === "number") {
       return [scale, scale, scale];
     }
     return scale;
   }, [scale]);
-  const rotationRad = React8.useMemo(() => {
+  const rotationRad = React7.useMemo(() => {
     return [
       rotation[0] * Math.PI / 180,
       rotation[1] * Math.PI / 180,
@@ -486,8 +486,8 @@ function PhysicsObject3D({
   onGroundHit,
   onCollision
 }) {
-  const groupRef = React8.useRef(null);
-  const physicsStateRef = React8.useRef({
+  const groupRef = React7.useRef(null);
+  const physicsStateRef = React7.useRef({
     id: entityId,
     x: initialPosition[0],
     y: initialPosition[1],
@@ -504,8 +504,8 @@ function PhysicsObject3D({
     mass,
     state: "Active"
   });
-  const groundHitRef = React8.useRef(false);
-  React8.useEffect(() => {
+  const groundHitRef = React7.useRef(false);
+  React7.useEffect(() => {
     if (groupRef.current) {
       groupRef.current.position.set(
         initialPosition[0],
@@ -786,21 +786,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 = React7.useRef(null);
+  const canvasRef = React7.useRef(null);
+  const rendererRef = React7.useRef(null);
+  const sceneRef = React7.useRef(null);
+  const cameraRef = React7.useRef(null);
+  const controlsRef = React7.useRef(null);
+  const gridHelperRef = React7.useRef(null);
+  const rafRef = React7.useRef(0);
+  const [isReady, setIsReady] = React7.useState(false);
+  const [dimensions, setDimensions] = React7.useState({ width: 0, height: 0 });
+  const initialCameraPosition = React7.useMemo(
     () => new THREE6__namespace.Vector3(...opts.cameraPosition),
     []
   );
-  React8.useEffect(() => {
+  React7.useEffect(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
@@ -893,7 +893,7 @@ function useThree3(options = {}) {
       scene.clear();
     };
   }, []);
-  React8.useEffect(() => {
+  React7.useEffect(() => {
     if (!cameraRef.current || !containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
@@ -928,20 +928,20 @@ function useThree3(options = {}) {
       animate();
     }
   }, [opts.cameraMode]);
-  const setCameraPosition = React8.useCallback((x, y, z) => {
+  const setCameraPosition = React7.useCallback((x, y, z) => {
     if (cameraRef.current) {
       cameraRef.current.position.set(x, y, z);
       controlsRef.current?.update();
     }
   }, []);
-  const lookAt = React8.useCallback((x, y, z) => {
+  const lookAt = React7.useCallback((x, y, z) => {
     if (cameraRef.current) {
       cameraRef.current.lookAt(x, y, z);
       controlsRef.current?.target.set(x, y, z);
       controlsRef.current?.update();
     }
   }, []);
-  const resetCamera = React8.useCallback(() => {
+  const resetCamera = React7.useCallback(() => {
     if (cameraRef.current) {
       cameraRef.current.position.copy(initialCameraPosition);
       cameraRef.current.lookAt(0, 0, 0);
@@ -951,7 +951,7 @@ function useThree3(options = {}) {
       }
     }
   }, [initialCameraPosition]);
-  const fitView = React8.useCallback(
+  const fitView = React7.useCallback(
     (bounds) => {
       if (!cameraRef.current) return;
       const centerX = (bounds.minX + bounds.maxX) / 2;
@@ -982,20 +982,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 = React7.useRef(customLoader || new AssetLoader());
+  const [state, setState] = React7.useState({
     isLoading: false,
     progress: 0,
     loaded: 0,
     total: 0,
     errors: []
   });
-  React8.useEffect(() => {
+  React7.useEffect(() => {
     if (preloadUrls.length > 0) {
       preload(preloadUrls);
     }
   }, []);
-  const updateProgress = React8.useCallback((loaded, total) => {
+  const updateProgress = React7.useCallback((loaded, total) => {
     setState((prev) => ({
       ...prev,
       loaded,
@@ -1003,7 +1003,7 @@ function useAssetLoader(options = {}) {
       progress: total > 0 ? Math.round(loaded / total * 100) : 0
     }));
   }, []);
-  const loadModel = React8.useCallback(
+  const loadModel = React7.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -1026,7 +1026,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const loadOBJ = React8.useCallback(
+  const loadOBJ = React7.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -1049,7 +1049,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const loadTexture = React8.useCallback(
+  const loadTexture = React7.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -1072,7 +1072,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const preload = React8.useCallback(
+  const preload = React7.useCallback(
     async (urls) => {
       setState((prev) => ({
         ...prev,
@@ -1111,27 +1111,27 @@ function useAssetLoader(options = {}) {
     },
     [updateProgress]
   );
-  const hasModel = React8.useCallback((url) => {
+  const hasModel = React7.useCallback((url) => {
     return loaderRef.current.hasModel(url);
   }, []);
-  const hasTexture = React8.useCallback((url) => {
+  const hasTexture = React7.useCallback((url) => {
     return loaderRef.current.hasTexture(url);
   }, []);
-  const getModel = React8.useCallback((url) => {
+  const getModel = React7.useCallback((url) => {
     try {
       return loaderRef.current.getModel(url);
     } catch {
       return void 0;
     }
   }, []);
-  const getTexture = React8.useCallback((url) => {
+  const getTexture = React7.useCallback((url) => {
     try {
       return loaderRef.current.getTexture(url);
     } catch {
       return void 0;
     }
   }, []);
-  const clearCache = React8.useCallback(() => {
+  const clearCache = React7.useCallback(() => {
     loaderRef.current.clearCache();
     setState({
       isLoading: false,
@@ -1155,25 +1155,25 @@ function useAssetLoader(options = {}) {
   };
 }
 function useSceneGraph() {
-  const nodesRef = React8.useRef(/* @__PURE__ */ new Map());
-  const addNode = React8.useCallback((node) => {
+  const nodesRef = React7.useRef(/* @__PURE__ */ new Map());
+  const addNode = React7.useCallback((node) => {
     const existing = nodesRef.current.get(node.id);
     if (existing) {
       existing.mesh.removeFromParent();
     }
     nodesRef.current.set(node.id, node);
   }, []);
-  const removeNode = React8.useCallback((id) => {
+  const removeNode = React7.useCallback((id) => {
     const node = nodesRef.current.get(id);
     if (node) {
       node.mesh.removeFromParent();
       nodesRef.current.delete(id);
     }
   }, []);
-  const getNode = React8.useCallback((id) => {
+  const getNode = React7.useCallback((id) => {
     return nodesRef.current.get(id);
   }, []);
-  const updateNodePosition = React8.useCallback(
+  const updateNodePosition = React7.useCallback(
     (id, x, y, z) => {
       const node = nodesRef.current.get(id);
       if (node) {
@@ -1183,7 +1183,7 @@ function useSceneGraph() {
     },
     []
   );
-  const updateNodeGridPosition = React8.useCallback(
+  const updateNodeGridPosition = React7.useCallback(
     (id, gridX, gridZ) => {
       const node = nodesRef.current.get(id);
       if (node) {
@@ -1192,7 +1192,7 @@ function useSceneGraph() {
     },
     []
   );
-  const getNodeAtGrid = React8.useCallback(
+  const getNodeAtGrid = React7.useCallback(
     (x, z, type) => {
       return Array.from(nodesRef.current.values()).find((node) => {
         const matchesGrid = node.gridPosition.x === x && node.gridPosition.z === z;
@@ -1201,10 +1201,10 @@ function useSceneGraph() {
     },
     []
   );
-  const getNodesByType = React8.useCallback((type) => {
+  const getNodesByType = React7.useCallback((type) => {
     return Array.from(nodesRef.current.values()).filter((node) => node.type === type);
   }, []);
-  const getNodesInBounds = React8.useCallback(
+  const getNodesInBounds = React7.useCallback(
     (minX, maxX, minZ, maxZ) => {
       return Array.from(nodesRef.current.values()).filter((node) => {
         const { x, z } = node.gridPosition;
@@ -1213,13 +1213,13 @@ function useSceneGraph() {
     },
     []
   );
-  const clearNodes = React8.useCallback(() => {
+  const clearNodes = React7.useCallback(() => {
     nodesRef.current.forEach((node) => {
       node.mesh.removeFromParent();
     });
     nodesRef.current.clear();
   }, []);
-  const countNodes = React8.useCallback((type) => {
+  const countNodes = React7.useCallback((type) => {
     if (!type) {
       return nodesRef.current.size;
     }
@@ -1241,9 +1241,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 = React7.useRef(new THREE6__namespace.Raycaster());
+  const mouse = React7.useRef(new THREE6__namespace.Vector2());
+  const clientToNDC = React7.useCallback(
     (clientX, clientY) => {
       if (!canvas) {
         return { x: 0, y: 0 };
@@ -1256,7 +1256,7 @@ function useRaycaster(options) {
     },
     [canvas]
   );
-  const isWithinCanvas = React8.useCallback(
+  const isWithinCanvas = React7.useCallback(
     (clientX, clientY) => {
       if (!canvas) return false;
       const rect = canvas.getBoundingClientRect();
@@ -1264,7 +1264,7 @@ function useRaycaster(options) {
     },
     [canvas]
   );
-  const getIntersection = React8.useCallback(
+  const getIntersection = React7.useCallback(
     (clientX, clientY, objects) => {
       if (!camera || !canvas) return null;
       const ndc = clientToNDC(clientX, clientY);
@@ -1287,7 +1287,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, clientToNDC]
   );
-  const getAllIntersections = React8.useCallback(
+  const getAllIntersections = React7.useCallback(
     (clientX, clientY, objects) => {
       if (!camera || !canvas) return [];
       const ndc = clientToNDC(clientX, clientY);
@@ -1306,7 +1306,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, clientToNDC]
   );
-  const getGridCoordinates = React8.useCallback(
+  const getGridCoordinates = React7.useCallback(
     (clientX, clientY) => {
       if (!camera || !canvas) return null;
       const ndc = clientToNDC(clientX, clientY);
@@ -1324,7 +1324,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, cellSize, offsetX, offsetZ, clientToNDC]
   );
-  const getTileAtPosition = React8.useCallback(
+  const getTileAtPosition = React7.useCallback(
     (clientX, clientY, scene) => {
       if (!camera || !canvas) return null;
       const tileMeshes = [];
@@ -1373,7 +1373,7 @@ function useRaycaster(options) {
     isWithinCanvas
   };
 }
-var EventBusContext = React8.createContext(null);
+var EventBusContext = React7.createContext(null);
 
 // hooks/useEventBus.ts
 function getGlobalEventBus() {
@@ -1443,12 +1443,12 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React8.useContext(EventBusContext);
+  const context = React7.useContext(EventBusContext);
   return context ?? getGlobalEventBus() ?? fallbackEventBus;
 }
 function useEmitEvent() {
   const eventBus = useEventBus();
-  return React8.useCallback(
+  return React7.useCallback(
     (type, payload) => {
       eventBus.emit(type, payload);
     },
@@ -1475,9 +1475,9 @@ function useGameCanvas3DEvents(options) {
     onUnitAnimation
   } = options;
   const emit = useEmitEvent();
-  const optionsRef = React8.useRef(options);
+  const optionsRef = React7.useRef(options);
   optionsRef.current = options;
-  const handleTileClick = React8.useCallback(
+  const handleTileClick = React7.useCallback(
     (tile, event) => {
       if (tileClickEvent) {
         emit(tileClickEvent, {
@@ -1493,7 +1493,7 @@ function useGameCanvas3DEvents(options) {
     },
     [tileClickEvent, emit]
   );
-  const handleUnitClick = React8.useCallback(
+  const handleUnitClick = React7.useCallback(
     (unit, event) => {
       if (unitClickEvent) {
         emit(unitClickEvent, {
@@ -1512,7 +1512,7 @@ function useGameCanvas3DEvents(options) {
     },
     [unitClickEvent, emit]
   );
-  const handleFeatureClick = React8.useCallback(
+  const handleFeatureClick = React7.useCallback(
     (feature, event) => {
       if (featureClickEvent) {
         emit(featureClickEvent, {
@@ -1527,7 +1527,7 @@ function useGameCanvas3DEvents(options) {
     },
     [featureClickEvent, emit]
   );
-  const handleCanvasClick = React8.useCallback(
+  const handleCanvasClick = React7.useCallback(
     (event) => {
       if (canvasClickEvent) {
         emit(canvasClickEvent, {
@@ -1540,7 +1540,7 @@ function useGameCanvas3DEvents(options) {
     },
     [canvasClickEvent, emit]
   );
-  const handleTileHover = React8.useCallback(
+  const handleTileHover = React7.useCallback(
     (tile, event) => {
       if (tile) {
         if (tileHoverEvent) {
@@ -1560,7 +1560,7 @@ function useGameCanvas3DEvents(options) {
     },
     [tileHoverEvent, tileLeaveEvent, emit]
   );
-  const handleUnitAnimation = React8.useCallback(
+  const handleUnitAnimation = React7.useCallback(
     (unitId, state) => {
       if (unitAnimationEvent) {
         emit(unitAnimationEvent, {
@@ -1573,7 +1573,7 @@ function useGameCanvas3DEvents(options) {
     },
     [unitAnimationEvent, emit]
   );
-  const handleCameraChange = React8.useCallback(
+  const handleCameraChange = React7.useCallback(
     (position) => {
       if (cameraChangeEvent) {
         emit(cameraChangeEvent, {
@@ -1619,17 +1619,17 @@ function TileRenderer({
   validMoves = [],
   attackTargets = []
 }) {
-  const meshRef = React8.useRef(null);
-  const geometry = React8.useMemo(() => {
+  const meshRef = React7.useRef(null);
+  const geometry = React7.useMemo(() => {
     return new THREE6__namespace.BoxGeometry(cellSize * 0.95, 0.2, cellSize * 0.95);
   }, [cellSize]);
-  const material = React8.useMemo(() => {
+  const material = React7.useMemo(() => {
     return new THREE6__namespace.MeshStandardMaterial({
       roughness: 0.8,
       metalness: 0.1
     });
   }, []);
-  const { positions, colors, tileMap } = React8.useMemo(() => {
+  const { positions, colors, tileMap } = React7.useMemo(() => {
     const pos = [];
     const cols = [];
     const map = /* @__PURE__ */ new Map();
@@ -1659,7 +1659,7 @@ function TileRenderer({
     });
     return { positions: pos, colors: cols, tileMap: map };
   }, [tiles, cellSize, offsetX, offsetZ, terrainColors, selectedTileIds, validMoves, attackTargets]);
-  React8.useEffect(() => {
+  React7.useEffect(() => {
     if (!meshRef.current || !useInstancing) return;
     const mesh = meshRef.current;
     mesh.count = positions.length;
@@ -1763,10 +1763,10 @@ function TileRenderer({
   return /* @__PURE__ */ jsxRuntime.jsx("group", { children: renderIndividualTiles() });
 }
 function UnitVisual({ unit, position, isSelected, onClick }) {
-  const groupRef = React8.useRef(null);
-  const [animationState, setAnimationState] = React8.useState("idle");
-  const [isHovered, setIsHovered] = React8.useState(false);
-  const teamColor = React8.useMemo(() => {
+  const groupRef = React7.useRef(null);
+  const [animationState, setAnimationState] = React7.useState("idle");
+  const [isHovered, setIsHovered] = React7.useState(false);
+  const teamColor = React7.useMemo(() => {
     if (unit.faction === "player" || unit.team === "player") return 4491519;
     if (unit.faction === "enemy" || unit.team === "enemy") return 16729156;
     if (unit.faction === "neutral" || unit.team === "neutral") return 16777028;
@@ -1778,11 +1778,11 @@ function UnitVisual({ unit, position, isSelected, onClick }) {
       groupRef.current.position.y = y;
     }
   });
-  const healthPercent = React8.useMemo(() => {
+  const healthPercent = React7.useMemo(() => {
     if (unit.health === void 0 || unit.maxHealth === void 0) return 1;
     return Math.max(0, Math.min(1, unit.health / unit.maxHealth));
   }, [unit.health, unit.maxHealth]);
-  const healthColor = React8.useMemo(() => {
+  const healthColor = React7.useMemo(() => {
     if (healthPercent > 0.5) return "#44aa44";
     if (healthPercent > 0.25) return "#aaaa44";
     return "#ff4444";
@@ -1843,7 +1843,7 @@ function UnitRenderer({
   onAnimationStateChange,
   animationSpeed = 1
 }) {
-  const handleUnitClick = React8__default.default.useCallback(
+  const handleUnitClick = React7__default.default.useCallback(
     (unit) => {
       onUnitClick?.(unit);
     },
@@ -2056,10 +2056,10 @@ function detectAssetRoot3(modelUrl) {
   return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
 }
 function useGLTFModel2(url) {
-  const [model, setModel] = React8.useState(null);
-  const [isLoading, setIsLoading] = React8.useState(false);
-  const [error, setError] = React8.useState(null);
-  React8.useEffect(() => {
+  const [model, setModel] = React7.useState(null);
+  const [isLoading, setIsLoading] = React7.useState(false);
+  const [error, setError] = React7.useState(null);
+  React7.useEffect(() => {
     if (!url) {
       setModel(null);
       return;
@@ -2091,9 +2091,9 @@ function FeatureModel({
   onClick,
   onHover
 }) {
-  const groupRef = React8.useRef(null);
+  const groupRef = React7.useRef(null);
   const { model: loadedModel, isLoading } = useGLTFModel2(feature.assetUrl);
-  const model = React8.useMemo(() => {
+  const model = React7.useMemo(() => {
     if (!loadedModel) return null;
     const cloned = loadedModel.clone();
     cloned.scale.setScalar(0.3);
@@ -2211,7 +2211,7 @@ function CameraController({
   onCameraChange
 }) {
   const { camera } = fiber.useThree();
-  React8.useEffect(() => {
+  React7.useEffect(() => {
     if (onCameraChange) {
       onCameraChange({
         x: camera.position.x,
@@ -2222,7 +2222,7 @@ function CameraController({
   }, [camera.position, onCameraChange]);
   return null;
 }
-var GameCanvas3D = React8.forwardRef(
+var GameCanvas3D = React7.forwardRef(
   ({
     tiles = [],
     units = [],
@@ -2267,10 +2267,10 @@ var GameCanvas3D = React8.forwardRef(
     selectedUnitId = null,
     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 = React7.useRef(null);
+    const controlsRef = React7.useRef(null);
+    const [hoveredTile, setHoveredTile] = React7.useState(null);
+    const [internalError, setInternalError] = React7.useState(null);
     const { isLoading: assetsLoading, progress, loaded, total } = useAssetLoader({
       preloadUrls: preloadAssets,
       loader: customAssetLoader
@@ -2291,7 +2291,7 @@ var GameCanvas3D = React8.forwardRef(
       onTileHover,
       onUnitAnimation
     });
-    const gridBounds = React8.useMemo(() => {
+    const gridBounds = React7.useMemo(() => {
       if (tiles.length === 0) {
         return { minX: 0, maxX: 10, minZ: 0, maxZ: 10 };
       }
@@ -2304,14 +2304,14 @@ var GameCanvas3D = React8.forwardRef(
         maxZ: Math.max(...zs)
       };
     }, [tiles]);
-    const cameraTarget = React8.useMemo(() => {
+    const cameraTarget = React7.useMemo(() => {
       return [
         (gridBounds.minX + gridBounds.maxX) / 2,
         0,
         (gridBounds.minZ + gridBounds.maxZ) / 2
       ];
     }, [gridBounds]);
-    const gridConfig = React8.useMemo(
+    const gridConfig = React7.useMemo(
       () => ({
         ...DEFAULT_GRID_CONFIG,
         offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
@@ -2319,7 +2319,7 @@ var GameCanvas3D = React8.forwardRef(
       }),
       [gridBounds]
     );
-    const gridToWorld2 = React8.useCallback(
+    const gridToWorld2 = React7.useCallback(
       (x, z, y = 0) => {
         const worldX = (x - gridBounds.minX) * gridConfig.cellSize;
         const worldZ = (z - gridBounds.minZ) * gridConfig.cellSize;
@@ -2327,7 +2327,7 @@ var GameCanvas3D = React8.forwardRef(
       },
       [gridBounds, gridConfig]
     );
-    React8.useImperativeHandle(ref, () => ({
+    React7.useImperativeHandle(ref, () => ({
       getCameraPosition: () => {
         if (controlsRef.current) {
           const pos = controlsRef.current.object.position;
@@ -2365,19 +2365,19 @@ var GameCanvas3D = React8.forwardRef(
         features
       })
     }));
-    const handleTileClick = React8.useCallback(
+    const handleTileClick = React7.useCallback(
       (tile, event) => {
         eventHandlers.handleTileClick(tile, event);
       },
       [eventHandlers]
     );
-    const handleUnitClick = React8.useCallback(
+    const handleUnitClick = React7.useCallback(
       (unit, event) => {
         eventHandlers.handleUnitClick(unit, event);
       },
       [eventHandlers]
     );
-    const handleFeatureClick = React8.useCallback(
+    const handleFeatureClick = React7.useCallback(
       (feature, event) => {
         if (event) {
           eventHandlers.handleFeatureClick(feature, event);
@@ -2385,7 +2385,7 @@ var GameCanvas3D = React8.forwardRef(
       },
       [eventHandlers]
     );
-    const handleTileHover = React8.useCallback(
+    const handleTileHover = React7.useCallback(
       (tile, event) => {
         setHoveredTile(tile);
         if (event) {
@@ -2394,7 +2394,7 @@ var GameCanvas3D = React8.forwardRef(
       },
       [eventHandlers]
     );
-    const cameraConfig = React8.useMemo(() => {
+    const cameraConfig = React7.useMemo(() => {
       const size = Math.max(
         gridBounds.maxX - gridBounds.minX,
         gridBounds.maxZ - gridBounds.minZ
@@ -2419,7 +2419,7 @@ var GameCanvas3D = React8.forwardRef(
           };
       }
     }, [cameraMode, gridBounds]);
-    const DefaultTileRenderer = React8.useCallback(
+    const DefaultTileRenderer = React7.useCallback(
       ({ tile, position }) => {
         const isSelected = tile.id ? selectedTileIds.includes(tile.id) : false;
         const isHovered = hoveredTile?.id === tile.id;
@@ -2457,7 +2457,7 @@ var GameCanvas3D = React8.forwardRef(
       },
       [selectedTileIds, hoveredTile, validMoves, attackTargets, handleTileClick, handleTileHover]
     );
-    const DefaultUnitRenderer = React8.useCallback(
+    const DefaultUnitRenderer = React7.useCallback(
       ({ unit, position }) => {
         const isSelected = selectedUnitId === unit.id;
         const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
@@ -2515,7 +2515,7 @@ var GameCanvas3D = React8.forwardRef(
       },
       [selectedUnitId, handleUnitClick]
     );
-    const DefaultFeatureRenderer = React8.useCallback(
+    const DefaultFeatureRenderer = React7.useCallback(
       ({
         feature,
         position
@@ -2822,7 +2822,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React8__default.default.forwardRef(
+var Box = React7__default.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -2851,20 +2851,20 @@ var Box = React8__default.default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
-    const handleClick = React8.useCallback((e) => {
+    const handleClick = React7.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React8.useCallback((e) => {
+    const handleMouseEnter = React7.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React8.useCallback((e) => {
+    const handleMouseLeave = React7.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }