@almadar/ui 5.73.0 → 5.75.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var React11 = require('react');
+var React10 = require('react');
 var fiber = require('@react-three/fiber');
 var THREE6 = require('three');
 var jsxRuntime = require('react/jsx-runtime');
@@ -38,7 +38,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React11__default = /*#__PURE__*/_interopDefault(React11);
+var React10__default = /*#__PURE__*/_interopDefault(React10);
 var THREE6__namespace = /*#__PURE__*/_interopNamespace(THREE6);
 var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
 
@@ -47,8 +47,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 = React11.useRef(false);
-  React11.useEffect(() => {
+  const initializedRef = React10.useRef(false);
+  React10.useEffect(() => {
     if (initializedRef.current) return;
     initializedRef.current = true;
     if (background.startsWith("#") || background.startsWith("rgb")) {
@@ -69,7 +69,7 @@ function Scene3D({ background = "#1a1a2e", fog, children }) {
   }, [scene, background, fog]);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 }
-var Camera3D = React11.forwardRef(
+var Camera3D = React10.forwardRef(
   ({
     mode = "isometric",
     position = [10, 10, 10],
@@ -82,10 +82,10 @@ var Camera3D = React11.forwardRef(
     onChange
   }, ref) => {
     const { camera, set, viewport } = fiber.useThree();
-    const controlsRef = React11.useRef(null);
-    const initialPosition = React11.useRef(new THREE6__namespace.Vector3(...position));
-    const initialTarget = React11.useRef(new THREE6__namespace.Vector3(...target));
-    React11.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;
@@ -116,7 +116,7 @@ var Camera3D = React11.forwardRef(
         onChange(camera);
       }
     });
-    React11.useImperativeHandle(ref, () => ({
+    React10.useImperativeHandle(ref, () => ({
       getCamera: () => camera,
       setPosition: (x, y, z) => {
         camera.position.set(x, y, z);
@@ -258,7 +258,7 @@ function Canvas3DLoadingState({
   ] });
 }
 var log = logger.createLogger("almadar:ui:game:canvas3d:error-boundary");
-var Canvas3DErrorBoundary = class extends React11.Component {
+var Canvas3DErrorBoundary = class extends React10.Component {
   constructor(props) {
     super(props);
     __publicField(this, "handleReset", () => {
@@ -338,12 +338,12 @@ function detectAssetRoot(modelUrl) {
   return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
 }
 function useGLTFModel(url, resourceBasePath) {
-  const [state, setState] = React11.useState({
+  const [state, setState] = React10.useState({
     model: null,
     isLoading: false,
     error: null
   });
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (!url) {
       setState({ model: null, isLoading: false, error: null });
       return;
@@ -391,7 +391,7 @@ function ModelLoader({
   resourceBasePath
 }) {
   const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
-  const model = React11.useMemo(() => {
+  const model = React10.useMemo(() => {
     if (!loadedModel) return null;
     const cloned = SkeletonUtils.clone(loadedModel);
     cloned.updateMatrixWorld(true);
@@ -403,7 +403,7 @@ function ModelLoader({
     });
     return cloned;
   }, [loadedModel, castShadow, receiveShadow]);
-  const normFactor = React11.useMemo(() => {
+  const normFactor = React10.useMemo(() => {
     if (!model) return 1;
     const box = new THREE6__namespace.Box3().setFromObject(model);
     const size = new THREE6__namespace.Vector3();
@@ -412,11 +412,11 @@ function ModelLoader({
     if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
     return 1 / maxDim;
   }, [model]);
-  const scaleArray = React11.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 = React11.useMemo(() => {
+  const rotationRad = React10.useMemo(() => {
     return [
       rotation[0] * Math.PI / 180,
       rotation[1] * Math.PI / 180,
@@ -494,81 +494,11 @@ function PhysicsObject3D({
   entityId,
   modelUrl,
   initialPosition = [0, 0, 0],
-  initialVelocity = [0, 0, 0],
-  mass = 1,
-  gravity = 9.8,
-  groundY = 0,
-  scale = 1,
-  onPhysicsUpdate,
-  onGroundHit,
-  onCollision
+  scale = 1
 }) {
-  const groupRef = React11.useRef(null);
-  const physicsStateRef = React11.useRef({
-    id: entityId,
-    x: initialPosition[0],
-    y: initialPosition[1],
-    z: initialPosition[2],
-    vx: initialVelocity[0],
-    vy: initialVelocity[1],
-    vz: initialVelocity[2],
-    rx: 0,
-    ry: 0,
-    rz: 0,
-    isGrounded: false,
-    gravity,
-    friction: 0.8,
-    mass,
-    state: "Active"
-  });
-  const groundHitRef = React11.useRef(false);
-  React11.useEffect(() => {
-    if (groupRef.current) {
-      groupRef.current.position.set(
-        initialPosition[0],
-        initialPosition[1],
-        initialPosition[2]
-      );
-    }
-  }, []);
-  fiber.useFrame((state, delta) => {
-    const physics = physicsStateRef.current;
-    if (physics.state !== "Active") return;
-    const dt = Math.min(delta, 0.1);
-    if (!physics.isGrounded) {
-      physics.vy -= physics.gravity * dt;
-    }
-    physics.x += physics.vx * dt;
-    physics.y += physics.vy * dt;
-    physics.z += physics.vz * dt;
-    const airResistance = Math.pow(0.99, dt * 60);
-    physics.vx *= airResistance;
-    physics.vz *= airResistance;
-    if (physics.y <= groundY) {
-      physics.y = groundY;
-      if (!physics.isGrounded) {
-        physics.isGrounded = true;
-        groundHitRef.current = true;
-        physics.vx *= physics.friction;
-        physics.vz *= physics.friction;
-        onGroundHit?.();
-      }
-      physics.vy = 0;
-    } else {
-      physics.isGrounded = false;
-    }
-    if (groupRef.current) {
-      groupRef.current.position.set(physics.x, physics.y, physics.z);
-      if (!physics.isGrounded) {
-        physics.rx += physics.vz * dt * 0.5;
-        physics.rz -= physics.vx * dt * 0.5;
-        groupRef.current.rotation.set(physics.rx, physics.ry, physics.rz);
-      }
-    }
-    onPhysicsUpdate?.({ ...physics });
-  });
+  log3.debug("PhysicsObject3D render", { entityId, initialPosition });
   const scaleArray = typeof scale === "number" ? [scale, scale, scale] : scale;
-  return /* @__PURE__ */ jsxRuntime.jsx("group", { ref: groupRef, scale: scaleArray, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("group", { position: initialPosition, scale: scaleArray, children: /* @__PURE__ */ jsxRuntime.jsx(
     ModelLoader,
     {
       url: modelUrl,
@@ -791,7 +721,7 @@ var AssetLoader = class {
 };
 var assetLoader = new AssetLoader();
 
-// components/game/molecules/three/hooks/useThree.ts
+// components/game/3d/useThree.ts
 var DEFAULT_OPTIONS = {
   cameraMode: "isometric",
   cameraPosition: [10, 10, 10],
@@ -803,21 +733,21 @@ var DEFAULT_OPTIONS = {
 };
 function useThree3(options = {}) {
   const opts = { ...DEFAULT_OPTIONS, ...options };
-  const containerRef = React11.useRef(null);
-  const canvasRef = React11.useRef(null);
-  const rendererRef = React11.useRef(null);
-  const sceneRef = React11.useRef(null);
-  const cameraRef = React11.useRef(null);
-  const controlsRef = React11.useRef(null);
-  const gridHelperRef = React11.useRef(null);
-  const rafRef = React11.useRef(0);
-  const [isReady, setIsReady] = React11.useState(false);
-  const [dimensions, setDimensions] = React11.useState({ width: 0, height: 0 });
-  const initialCameraPosition = React11.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),
     []
   );
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
@@ -910,7 +840,7 @@ function useThree3(options = {}) {
       scene.clear();
     };
   }, []);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (!cameraRef.current || !containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
@@ -945,20 +875,20 @@ function useThree3(options = {}) {
       animate();
     }
   }, [opts.cameraMode]);
-  const setCameraPosition = React11.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 = React11.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 = React11.useCallback(() => {
+  const resetCamera = React10.useCallback(() => {
     if (cameraRef.current) {
       cameraRef.current.position.copy(initialCameraPosition);
       cameraRef.current.lookAt(0, 0, 0);
@@ -968,7 +898,7 @@ function useThree3(options = {}) {
       }
     }
   }, [initialCameraPosition]);
-  const fitView = React11.useCallback(
+  const fitView = React10.useCallback(
     (bounds) => {
       if (!cameraRef.current) return;
       const centerX = (bounds.minX + bounds.maxX) / 2;
@@ -999,20 +929,20 @@ function useThree3(options = {}) {
 }
 function useAssetLoader(options = {}) {
   const { preloadUrls = [], loader: customLoader } = options;
-  const loaderRef = React11.useRef(customLoader || new AssetLoader());
-  const [state, setState] = React11.useState({
+  const loaderRef = React10.useRef(customLoader || new AssetLoader());
+  const [state, setState] = React10.useState({
     isLoading: false,
     progress: 0,
     loaded: 0,
     total: 0,
     errors: []
   });
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (preloadUrls.length > 0) {
       preload(preloadUrls);
     }
   }, []);
-  const updateProgress = React11.useCallback((loaded, total) => {
+  const updateProgress = React10.useCallback((loaded, total) => {
     setState((prev) => ({
       ...prev,
       loaded,
@@ -1020,7 +950,7 @@ function useAssetLoader(options = {}) {
       progress: total > 0 ? Math.round(loaded / total * 100) : 0
     }));
   }, []);
-  const loadModel = React11.useCallback(
+  const loadModel = React10.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -1043,7 +973,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const loadOBJ = React11.useCallback(
+  const loadOBJ = React10.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -1066,7 +996,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const loadTexture = React11.useCallback(
+  const loadTexture = React10.useCallback(
     async (url) => {
       setState((prev) => ({ ...prev, isLoading: true }));
       try {
@@ -1089,7 +1019,7 @@ function useAssetLoader(options = {}) {
     },
     []
   );
-  const preload = React11.useCallback(
+  const preload = React10.useCallback(
     async (urls) => {
       setState((prev) => ({
         ...prev,
@@ -1128,27 +1058,27 @@ function useAssetLoader(options = {}) {
     },
     [updateProgress]
   );
-  const hasModel = React11.useCallback((url) => {
+  const hasModel = React10.useCallback((url) => {
     return loaderRef.current.hasModel(url);
   }, []);
-  const hasTexture = React11.useCallback((url) => {
+  const hasTexture = React10.useCallback((url) => {
     return loaderRef.current.hasTexture(url);
   }, []);
-  const getModel = React11.useCallback((url) => {
+  const getModel = React10.useCallback((url) => {
     try {
       return loaderRef.current.getModel(url);
     } catch {
       return void 0;
     }
   }, []);
-  const getTexture = React11.useCallback((url) => {
+  const getTexture = React10.useCallback((url) => {
     try {
       return loaderRef.current.getTexture(url);
     } catch {
       return void 0;
     }
   }, []);
-  const clearCache = React11.useCallback(() => {
+  const clearCache = React10.useCallback(() => {
     loaderRef.current.clearCache();
     setState({
       isLoading: false,
@@ -1172,25 +1102,25 @@ function useAssetLoader(options = {}) {
   };
 }
 function useSceneGraph() {
-  const nodesRef = React11.useRef(/* @__PURE__ */ new Map());
-  const addNode = React11.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 = React11.useCallback((id) => {
+  const removeNode = React10.useCallback((id) => {
     const node = nodesRef.current.get(id);
     if (node) {
       node.mesh.removeFromParent();
       nodesRef.current.delete(id);
     }
   }, []);
-  const getNode = React11.useCallback((id) => {
+  const getNode = React10.useCallback((id) => {
     return nodesRef.current.get(id);
   }, []);
-  const updateNodePosition = React11.useCallback(
+  const updateNodePosition = React10.useCallback(
     (id, x, y, z) => {
       const node = nodesRef.current.get(id);
       if (node) {
@@ -1200,7 +1130,7 @@ function useSceneGraph() {
     },
     []
   );
-  const updateNodeGridPosition = React11.useCallback(
+  const updateNodeGridPosition = React10.useCallback(
     (id, gridX, gridZ) => {
       const node = nodesRef.current.get(id);
       if (node) {
@@ -1209,7 +1139,7 @@ function useSceneGraph() {
     },
     []
   );
-  const getNodeAtGrid = React11.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;
@@ -1218,10 +1148,10 @@ function useSceneGraph() {
     },
     []
   );
-  const getNodesByType = React11.useCallback((type) => {
+  const getNodesByType = React10.useCallback((type) => {
     return Array.from(nodesRef.current.values()).filter((node) => node.type === type);
   }, []);
-  const getNodesInBounds = React11.useCallback(
+  const getNodesInBounds = React10.useCallback(
     (minX, maxX, minZ, maxZ) => {
       return Array.from(nodesRef.current.values()).filter((node) => {
         const { x, z } = node.gridPosition;
@@ -1230,13 +1160,13 @@ function useSceneGraph() {
     },
     []
   );
-  const clearNodes = React11.useCallback(() => {
+  const clearNodes = React10.useCallback(() => {
     nodesRef.current.forEach((node) => {
       node.mesh.removeFromParent();
     });
     nodesRef.current.clear();
   }, []);
-  const countNodes = React11.useCallback((type) => {
+  const countNodes = React10.useCallback((type) => {
     if (!type) {
       return nodesRef.current.size;
     }
@@ -1258,9 +1188,9 @@ function useSceneGraph() {
 }
 function useRaycaster(options) {
   const { camera, canvas, cellSize = 1, offsetX = 0, offsetZ = 0 } = options;
-  const raycaster = React11.useRef(new THREE6__namespace.Raycaster());
-  const mouse = React11.useRef(new THREE6__namespace.Vector2());
-  const clientToNDC = React11.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 };
@@ -1273,7 +1203,7 @@ function useRaycaster(options) {
     },
     [canvas]
   );
-  const isWithinCanvas = React11.useCallback(
+  const isWithinCanvas = React10.useCallback(
     (clientX, clientY) => {
       if (!canvas) return false;
       const rect = canvas.getBoundingClientRect();
@@ -1281,7 +1211,7 @@ function useRaycaster(options) {
     },
     [canvas]
   );
-  const getIntersection = React11.useCallback(
+  const getIntersection = React10.useCallback(
     (clientX, clientY, objects) => {
       if (!camera || !canvas) return null;
       const ndc = clientToNDC(clientX, clientY);
@@ -1304,7 +1234,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, clientToNDC]
   );
-  const getAllIntersections = React11.useCallback(
+  const getAllIntersections = React10.useCallback(
     (clientX, clientY, objects) => {
       if (!camera || !canvas) return [];
       const ndc = clientToNDC(clientX, clientY);
@@ -1323,7 +1253,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, clientToNDC]
   );
-  const getGridCoordinates = React11.useCallback(
+  const getGridCoordinates = React10.useCallback(
     (clientX, clientY) => {
       if (!camera || !canvas) return null;
       const ndc = clientToNDC(clientX, clientY);
@@ -1341,7 +1271,7 @@ function useRaycaster(options) {
     },
     [camera, canvas, cellSize, offsetX, offsetZ, clientToNDC]
   );
-  const getTileAtPosition = React11.useCallback(
+  const getTileAtPosition = React10.useCallback(
     (clientX, clientY, scene) => {
       if (!camera || !canvas) return null;
       const tileMeshes = [];
@@ -1464,10 +1394,10 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React11.useContext(providers.EventBusContext);
+  const context = React10.useContext(providers.EventBusContext);
   const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
   const scope = providers.useTraitScope();
-  return React11.useMemo(() => {
+  return React10.useMemo(() => {
     if (!scope) {
       return {
         ...baseBus,
@@ -1503,7 +1433,7 @@ function useEventBus() {
 }
 function useEmitEvent() {
   const eventBus = useEventBus();
-  return React11.useCallback(
+  return React10.useCallback(
     (type, payload, source) => {
       eventBus.emit(type, payload, source);
     },
@@ -1511,7 +1441,7 @@ function useEmitEvent() {
   );
 }
 
-// components/game/molecules/three/hooks/useGameCanvas3DEvents.ts
+// components/game/3d/useGameCanvas3DEvents.ts
 function useGameCanvas3DEvents(options) {
   const {
     tileClickEvent,
@@ -1530,9 +1460,9 @@ function useGameCanvas3DEvents(options) {
     onUnitAnimation
   } = options;
   const emit = useEmitEvent();
-  const optionsRef = React11.useRef(options);
+  const optionsRef = React10.useRef(options);
   optionsRef.current = options;
-  const handleTileClick = React11.useCallback(
+  const handleTileClick = React10.useCallback(
     (tile, event) => {
       if (tileClickEvent) {
         emit(tileClickEvent, {
@@ -1548,7 +1478,7 @@ function useGameCanvas3DEvents(options) {
     },
     [tileClickEvent, emit]
   );
-  const handleUnitClick = React11.useCallback(
+  const handleUnitClick = React10.useCallback(
     (unit, event) => {
       if (unitClickEvent) {
         emit(unitClickEvent, {
@@ -1567,7 +1497,7 @@ function useGameCanvas3DEvents(options) {
     },
     [unitClickEvent, emit]
   );
-  const handleFeatureClick = React11.useCallback(
+  const handleFeatureClick = React10.useCallback(
     (feature, event) => {
       if (featureClickEvent) {
         emit(featureClickEvent, {
@@ -1582,7 +1512,7 @@ function useGameCanvas3DEvents(options) {
     },
     [featureClickEvent, emit]
   );
-  const handleCanvasClick = React11.useCallback(
+  const handleCanvasClick = React10.useCallback(
     (event) => {
       if (canvasClickEvent) {
         emit(canvasClickEvent, {
@@ -1595,7 +1525,7 @@ function useGameCanvas3DEvents(options) {
     },
     [canvasClickEvent, emit]
   );
-  const handleTileHover = React11.useCallback(
+  const handleTileHover = React10.useCallback(
     (tile, event) => {
       if (tile) {
         if (tileHoverEvent) {
@@ -1615,7 +1545,7 @@ function useGameCanvas3DEvents(options) {
     },
     [tileHoverEvent, tileLeaveEvent, emit]
   );
-  const handleUnitAnimation = React11.useCallback(
+  const handleUnitAnimation = React10.useCallback(
     (unitId, state) => {
       if (unitAnimationEvent) {
         emit(unitAnimationEvent, {
@@ -1628,7 +1558,7 @@ function useGameCanvas3DEvents(options) {
     },
     [unitAnimationEvent, emit]
   );
-  const handleCameraChange = React11.useCallback(
+  const handleCameraChange = React10.useCallback(
     (position) => {
       if (cameraChangeEvent) {
         emit(cameraChangeEvent, {
@@ -1674,17 +1604,17 @@ function TileRenderer({
   validMoves = [],
   attackTargets = []
 }) {
-  const meshRef = React11.useRef(null);
-  const geometry = React11.useMemo(() => {
+  const meshRef = React10.useRef(null);
+  const geometry = React10.useMemo(() => {
     return new THREE6__namespace.BoxGeometry(cellSize * 0.95, 0.2, cellSize * 0.95);
   }, [cellSize]);
-  const material = React11.useMemo(() => {
+  const material = React10.useMemo(() => {
     return new THREE6__namespace.MeshStandardMaterial({
       roughness: 0.8,
       metalness: 0.1
     });
   }, []);
-  const { positions, colors, tileMap } = React11.useMemo(() => {
+  const { positions, colors, tileMap } = React10.useMemo(() => {
     const pos = [];
     const cols = [];
     const map = /* @__PURE__ */ new Map();
@@ -1714,7 +1644,7 @@ function TileRenderer({
     });
     return { positions: pos, colors: cols, tileMap: map };
   }, [tiles, cellSize, offsetX, offsetZ, terrainColors, selectedTileIds, validMoves, attackTargets]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (!meshRef.current || !useInstancing) return;
     const mesh = meshRef.current;
     mesh.count = positions.length;
@@ -1843,26 +1773,18 @@ function TileRenderer({
   return /* @__PURE__ */ jsxRuntime.jsx("group", { children: renderIndividualTiles() });
 }
 function UnitVisual({ unit, position, isSelected, onClick }) {
-  const groupRef = React11.useRef(null);
-  const [animationState, setAnimationState] = React11.useState("idle");
-  const [isHovered, setIsHovered] = React11.useState(false);
-  const teamColor = React11.useMemo(() => {
+  const [isHovered, setIsHovered] = React10.useState(false);
+  const teamColor = React10.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;
     return 8947848;
   }, [unit.faction, unit.team]);
-  fiber.useFrame((state) => {
-    if (groupRef.current && animationState === "idle") {
-      const y = position[1] + Math.sin(state.clock.elapsedTime * 2 + position[0]) * 0.05;
-      groupRef.current.position.y = y;
-    }
-  });
-  const healthPercent = React11.useMemo(() => {
+  const healthPercent = React10.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 = React11.useMemo(() => {
+  const healthColor = React10.useMemo(() => {
     if (healthPercent > 0.5) return "#44aa44";
     if (healthPercent > 0.25) return "#aaaa44";
     return "#ff4444";
@@ -1870,7 +1792,6 @@ function UnitVisual({ unit, position, isSelected, onClick }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "group",
     {
-      ref: groupRef,
       position,
       onClick,
       onPointerEnter: () => setIsHovered(true),
@@ -1923,7 +1844,7 @@ function UnitRenderer({
   onAnimationStateChange,
   animationSpeed = 1
 }) {
-  const handleUnitClick = React11__default.default.useCallback(
+  const handleUnitClick = React10__default.default.useCallback(
     (unit) => {
       onUnitClick?.(unit);
     },
@@ -2128,7 +2049,7 @@ function FeatureGroup({
   }) });
 }
 function FeatureRenderer(props) {
-  const insideCanvas = React11.useContext(fiber.context) != null;
+  const insideCanvas = React10.useContext(fiber.context) != null;
   if (insideCanvas) return /* @__PURE__ */ jsxRuntime.jsx(FeatureGroup, { ...props });
   return /* @__PURE__ */ jsxRuntime.jsxs(fiber.Canvas, { camera: { position: [4, 4, 6], fov: 50 }, style: { width: "100%", height: 360 }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("ambientLight", { intensity: 0.6 }),
@@ -2145,10 +2066,10 @@ function detectAssetRoot3(modelUrl) {
   return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
 }
 function useGLTFModel2(url) {
-  const [model, setModel] = React11.useState(null);
-  const [isLoading, setIsLoading] = React11.useState(false);
-  const [error, setError] = React11.useState(null);
-  React11.useEffect(() => {
+  const [model, setModel] = React10.useState(null);
+  const [isLoading, setIsLoading] = React10.useState(false);
+  const [error, setError] = React10.useState(null);
+  React10.useEffect(() => {
     if (!url) {
       setModel(null);
       return;
@@ -2180,9 +2101,9 @@ function FeatureModel({
   onClick,
   onHover
 }) {
-  const groupRef = React11.useRef(null);
   const { model: loadedModel, isLoading } = useGLTFModel2(feature.assetUrl?.url);
-  const model = React11.useMemo(() => {
+  const baseRotationY = feature.rotation !== void 0 ? feature.rotation * Math.PI / 180 - Math.PI / 4 : -Math.PI / 4;
+  const model = React10.useMemo(() => {
     if (!loadedModel) return null;
     const cloned = loadedModel.clone();
     cloned.scale.setScalar(0.3);
@@ -2194,14 +2115,6 @@ function FeatureModel({
     });
     return cloned;
   }, [loadedModel]);
-  fiber.useFrame((state) => {
-    if (groupRef.current) {
-      const featureRotation = feature.rotation;
-      const baseRotation = featureRotation !== void 0 ? featureRotation * Math.PI / 180 - Math.PI / 4 : -Math.PI / 4;
-      const wobble = isSelected ? Math.sin(state.clock.elapsedTime * 2) * 0.1 : 0;
-      groupRef.current.rotation.y = baseRotation + wobble;
-    }
-  });
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("group", { position, children: /* @__PURE__ */ jsxRuntime.jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
       /* @__PURE__ */ jsxRuntime.jsx("ringGeometry", { args: [0.3, 0.35, 16] }),
@@ -2233,8 +2146,8 @@ function FeatureModel({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "group",
     {
-      ref: groupRef,
       position,
+      rotation: [0, baseRotationY, 0],
       onClick,
       onPointerEnter: () => onHover(true),
       onPointerLeave: () => onHover(false),
@@ -2292,7 +2205,7 @@ function preloadFeatures(urls) {
   });
 }
 
-// components/game/organisms/utils/spriteAnimation.ts
+// components/game/shared/spriteAnimation.ts
 function resolveSheetDirection(facing) {
   switch (facing) {
     case "se":
@@ -2314,7 +2227,7 @@ function frameRect(frame, row, columns, frameWidth, frameHeight) {
   };
 }
 
-// components/game/molecules/useUnitSpriteAtlas.ts
+// components/game/2d/useUnitSpriteAtlas.ts
 function unitAtlasUrl(unit) {
   return unit.spriteSheet?.url ?? null;
 }
@@ -2327,11 +2240,11 @@ function resolveSheetUrl(atlasUrl, relativeSheetPath) {
   }
 }
 function useUnitSpriteAtlas(units) {
-  const atlasCacheRef = React11.useRef(/* @__PURE__ */ new Map());
-  const loadingRef = React11.useRef(/* @__PURE__ */ new Set());
-  const [pendingCount, setPendingCount] = React11.useState(0);
-  const [, forceTick] = React11.useState(0);
-  const atlasUrls = React11.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);
@@ -2339,7 +2252,7 @@ function useUnitSpriteAtlas(units) {
     }
     return [...set];
   }, [units]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     const cache = atlasCacheRef.current;
     const loading = loadingRef.current;
     const toLoad = atlasUrls.filter((url) => !cache.has(url) && !loading.has(url));
@@ -2363,7 +2276,7 @@ function useUnitSpriteAtlas(units) {
       cancelled = true;
     };
   }, [atlasUrls]);
-  const sheetUrls = React11.useMemo(() => {
+  const sheetUrls = React10.useMemo(() => {
     const urls = /* @__PURE__ */ new Set();
     for (const unit of units) {
       const atlasUrl = unitAtlasUrl(unit);
@@ -2376,7 +2289,7 @@ function useUnitSpriteAtlas(units) {
     }
     return [...urls];
   }, [units, pendingCount]);
-  const resolveUnitFrame = React11.useCallback((unitId) => {
+  const resolveUnitFrame = React10.useCallback((unitId) => {
     const unit = units.find((u) => u.id === unitId);
     if (!unit) return null;
     const atlasUrl = unitAtlasUrl(unit);
@@ -2416,7 +2329,7 @@ function CameraController({
   onCameraChange
 }) {
   const { camera } = fiber.useThree();
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (onCameraChange) {
       onCameraChange({
         x: camera.position.x,
@@ -2433,9 +2346,9 @@ function UnitSpriteBillboard({
   height = 1.2
 }) {
   const texture = fiber.useLoader(THREE6__namespace.TextureLoader, sheetUrl);
-  const meshRef = React11.useRef(null);
-  const matRef = React11.useRef(null);
-  const [aspect, setAspect] = React11.useState(1);
+  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;
@@ -2468,7 +2381,7 @@ function UnitSpriteBillboard({
     )
   ] });
 }
-var GameCanvas3D = React11.forwardRef(
+var GameCanvas3D = React10.forwardRef(
   ({
     tiles = [],
     units = [],
@@ -2513,11 +2426,11 @@ var GameCanvas3D = React11.forwardRef(
     unitScale = 1,
     children
   }, ref) => {
-    const containerRef = React11.useRef(null);
-    const controlsRef = React11.useRef(null);
-    const [hoveredTile, setHoveredTile] = React11.useState(null);
-    const [internalError, setInternalError] = React11.useState(null);
-    React11.useEffect(() => {
+    const containerRef = React10.useRef(null);
+    const controlsRef = React10.useRef(null);
+    const [hoveredTile, setHoveredTile] = React10.useState(null);
+    const [internalError, setInternalError] = React10.useState(null);
+    React10.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       let node = el;
@@ -2541,7 +2454,7 @@ var GameCanvas3D = React11.forwardRef(
       }
     }, []);
     const { sheetUrls: atlasSheetUrls, resolveUnitFrame } = useUnitSpriteAtlas(units);
-    const preloadUrls = React11.useMemo(() => [...preloadAssets, ...atlasSheetUrls], [preloadAssets, atlasSheetUrls]);
+    const preloadUrls = React10.useMemo(() => [...preloadAssets, ...atlasSheetUrls], [preloadAssets, atlasSheetUrls]);
     const { isLoading: assetsLoading, progress, loaded, total } = useAssetLoader({
       preloadUrls,
       loader: customAssetLoader
@@ -2562,7 +2475,7 @@ var GameCanvas3D = React11.forwardRef(
       onTileHover,
       onUnitAnimation
     });
-    const gridBounds = React11.useMemo(() => {
+    const gridBounds = React10.useMemo(() => {
       if (tiles.length === 0) {
         return { minX: 0, maxX: 10, minZ: 0, maxZ: 10 };
       }
@@ -2575,14 +2488,14 @@ var GameCanvas3D = React11.forwardRef(
         maxZ: Math.max(...zs)
       };
     }, [tiles]);
-    const cameraTarget = React11.useMemo(() => {
+    const cameraTarget = React10.useMemo(() => {
       return [
         (gridBounds.minX + gridBounds.maxX) / 2,
         0,
         (gridBounds.minZ + gridBounds.maxZ) / 2
       ];
     }, [gridBounds]);
-    const gridConfig = React11.useMemo(
+    const gridConfig = React10.useMemo(
       () => ({
         ...DEFAULT_GRID_CONFIG,
         offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
@@ -2590,7 +2503,7 @@ var GameCanvas3D = React11.forwardRef(
       }),
       [gridBounds]
     );
-    const gridToWorld2 = React11.useCallback(
+    const gridToWorld2 = React10.useCallback(
       (x, z, y = 0) => {
         const worldX = (x - gridBounds.minX) * gridConfig.cellSize;
         const worldZ = (z - gridBounds.minZ) * gridConfig.cellSize;
@@ -2598,7 +2511,7 @@ var GameCanvas3D = React11.forwardRef(
       },
       [gridBounds, gridConfig]
     );
-    React11.useImperativeHandle(ref, () => ({
+    React10.useImperativeHandle(ref, () => ({
       getCameraPosition: () => {
         if (controlsRef.current) {
           const pos = controlsRef.current.object.position;
@@ -2636,19 +2549,19 @@ var GameCanvas3D = React11.forwardRef(
         features
       })
     }));
-    const handleTileClick = React11.useCallback(
+    const handleTileClick = React10.useCallback(
       (tile, event) => {
         eventHandlers.handleTileClick(tile, event);
       },
       [eventHandlers]
     );
-    const handleUnitClick = React11.useCallback(
+    const handleUnitClick = React10.useCallback(
       (unit, event) => {
         eventHandlers.handleUnitClick(unit, event);
       },
       [eventHandlers]
     );
-    const handleFeatureClick = React11.useCallback(
+    const handleFeatureClick = React10.useCallback(
       (feature, event) => {
         if (event) {
           eventHandlers.handleFeatureClick(feature, event);
@@ -2656,7 +2569,7 @@ var GameCanvas3D = React11.forwardRef(
       },
       [eventHandlers]
     );
-    const handleTileHover = React11.useCallback(
+    const handleTileHover = React10.useCallback(
       (tile, event) => {
         setHoveredTile(tile);
         if (event) {
@@ -2665,7 +2578,7 @@ var GameCanvas3D = React11.forwardRef(
       },
       [eventHandlers]
     );
-    const cameraConfig = React11.useMemo(() => {
+    const cameraConfig = React10.useMemo(() => {
       const size = Math.max(
         gridBounds.maxX - gridBounds.minX,
         gridBounds.maxZ - gridBounds.minZ,
@@ -2694,7 +2607,7 @@ var GameCanvas3D = React11.forwardRef(
           };
       }
     }, [cameraMode, gridBounds]);
-    const DefaultTileRenderer = React11.useCallback(
+    const DefaultTileRenderer = React10.useCallback(
       ({ tile, position }) => {
         const isSelected = tile.id ? selectedTileIds.includes(tile.id) : false;
         const isHovered = hoveredTile?.id === tile.id;
@@ -2757,7 +2670,7 @@ var GameCanvas3D = React11.forwardRef(
     const UNIT_BASE_MODEL_SCALE = 0.5;
     const UNIT_BASE_BILLBOARD_HEIGHT = 1.2;
     const UNIT_BASE_PRIMITIVE_RADIUS = 0.3;
-    const DefaultUnitRenderer = React11.useCallback(
+    const DefaultUnitRenderer = React10.useCallback(
       ({ unit, position }) => {
         const isSelected = selectedUnitId === unit.id;
         const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
@@ -2843,7 +2756,7 @@ var GameCanvas3D = React11.forwardRef(
       },
       [selectedUnitId, handleUnitClick, resolveUnitFrame, unitScale, gridConfig]
     );
-    const DefaultFeatureRenderer = React11.useCallback(
+    const DefaultFeatureRenderer = React10.useCallback(
       ({
         feature,
         position
@@ -3051,6 +2964,9 @@ var GameCanvas3D = React11.forwardRef(
   }
 );
 GameCanvas3D.displayName = "GameCanvas3D";
+function Canvas3D(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(GameCanvas3D, { ...props });
+}
 var DEFAULT_FAMILY = "lucide";
 var VALID_FAMILIES = [
   "lucide",
@@ -3101,7 +3017,7 @@ function getIconFamilyServerSnapshot() {
   return DEFAULT_FAMILY;
 }
 function useIconFamily() {
-  return React11.useSyncExternalStore(
+  return React10.useSyncExternalStore(
     subscribeIconFamily,
     getIconFamilySnapshot,
     getIconFamilyServerSnapshot
@@ -3123,7 +3039,7 @@ function loadLib(key, importer) {
   return p;
 }
 function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
-  const Lazy = React11__default.default.lazy(async () => {
+  const Lazy = React10__default.default.lazy(async () => {
     const lib = await loadLib(libKey, importer);
     const Comp = pick(lib);
     if (!Comp) {
@@ -3133,7 +3049,7 @@ function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
     return { default: Comp };
   });
   const Wrapped = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-    React11__default.default.Suspense,
+    React10__default.default.Suspense,
     {
       fallback: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
@@ -3799,7 +3715,7 @@ var Icon = ({
   const directIcon = typeof icon === "string" ? void 0 : icon;
   const effectiveName = typeof icon === "string" ? icon : name;
   const family = useIconFamily();
-  const RenderedComponent = React11__default.default.useMemo(() => {
+  const RenderedComponent = React10__default.default.useMemo(() => {
     if (directIcon) return null;
     return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
   }, [directIcon, effectiveName, family]);
@@ -3919,7 +3835,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
   }
-  if (React11__default.default.isValidElement(value)) {
+  if (React10__default.default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && isIconLike(value)) {
@@ -3928,7 +3844,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React11__default.default.forwardRef(
+var Button = React10__default.default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -4074,7 +3990,7 @@ var Typography = ({
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component2 = as || defaultElements[variant];
-  return React11__default.default.createElement(
+  return React10__default.default.createElement(
     Component2,
     {
       id,
@@ -4147,7 +4063,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 React11__default.default.createElement(
+  return React10__default.default.createElement(
     Component2,
     {
       className: cn(
@@ -4172,7 +4088,7 @@ var Stack = ({
 var VStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "vertical", ...props });
 var HStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "horizontal", ...props });
 
-// components/game/organisms/boardEntity.ts
+// components/game/shared/boardEntity.ts
 function boardEntity(entity) {
   if (!entity) return void 0;
   return Array.isArray(entity) ? entity[0] : entity;
@@ -4240,8 +4156,8 @@ function GameBoard3D({
   const turn = row ? num(row.turn) : 0;
   const currentTeam = row ? str(row.currentTeam) : "player";
   const isGameOver = result !== "none";
-  const gameEndEmittedRef = React11.useRef(false);
-  React11.useEffect(() => {
+  const gameEndEmittedRef = React10.useRef(false);
+  React10.useEffect(() => {
     if ((result === "victory" || result === "defeat") && gameEndEvent) {
       if (!gameEndEmittedRef.current) {
         gameEndEmittedRef.current = true;
@@ -4251,7 +4167,7 @@ function GameBoard3D({
       gameEndEmittedRef.current = false;
     }
   }, [result, gameEndEvent, eventBus]);
-  const checkGameEnd = React11.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) {
@@ -4260,7 +4176,7 @@ function GameBoard3D({
       eventBus.emit(`UI:${gameEndEvent}`, { result: "victory" });
     }
   }, [entityUnits, gameEndEvent, eventBus]);
-  const handleUnitClickCallback = React11.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);
@@ -4280,13 +4196,13 @@ function GameBoard3D({
       setTimeout(checkGameEnd, 100);
     }
   }, [phase, selectedUnitId, entityUnits, attackEvent, eventBus, checkGameEnd]);
-  const handleEndTurn = React11.useCallback(() => {
+  const handleEndTurn = React10.useCallback(() => {
     if (endTurnEvent) eventBus.emit(`UI:${endTurnEvent}`, {});
   }, [endTurnEvent, eventBus]);
-  const handleCancel = React11.useCallback(() => {
+  const handleCancel = React10.useCallback(() => {
     if (cancelEvent) eventBus.emit(`UI:${cancelEvent}`, {});
   }, [cancelEvent, eventBus]);
-  const handlePlayAgain = React11.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: [
@@ -4377,24 +4293,24 @@ function GameBoard3D({
 GameBoard3D.displayName = "GameBoard3D";
 function useTapReveal(options = {}) {
   const { onReveal, onDismiss, refs, enabled = true } = options;
-  const [revealed, setRevealed] = React11.useState(false);
-  const onRevealRef = React11.useRef(onReveal);
-  const onDismissRef = React11.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 = React11.useCallback(() => {
+  const reveal = React10.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (!wasRevealed) onRevealRef.current?.();
       return true;
     });
   }, []);
-  const dismiss = React11.useCallback(() => {
+  const dismiss = React10.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (wasRevealed) onDismissRef.current?.();
       return false;
     });
   }, []);
-  const onPointerDown = React11.useCallback(
+  const onPointerDown = React10.useCallback(
     (e) => {
       if (!enabled || e.pointerType === "mouse") return;
       if (revealed) dismiss();
@@ -4402,7 +4318,7 @@ function useTapReveal(options = {}) {
     },
     [enabled, revealed, reveal, dismiss]
   );
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (!revealed || typeof document === "undefined") return;
     const onDocDown = (ev) => {
       const target = ev.target;
@@ -4522,7 +4438,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React11__default.default.forwardRef(
+var Box = React10__default.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -4554,20 +4470,20 @@ var Box = React11__default.default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
-    const handleClick = React11.useCallback((e) => {
+    const handleClick = React10.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React11.useCallback((e) => {
+    const handleMouseEnter = React10.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React11.useCallback((e) => {
+    const handleMouseLeave = React10.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }
@@ -4575,19 +4491,19 @@ var Box = React11__default.default.forwardRef(
     }, [hoverEvent, eventBus, onMouseLeave]);
     const { triggerProps } = useTapReveal({
       enabled: tapReveal && !!hoverEvent,
-      onReveal: React11.useCallback(() => {
+      onReveal: React10.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }, [hoverEvent, eventBus]),
-      onDismiss: React11.useCallback(() => {
+      onDismiss: React10.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }, [hoverEvent, eventBus])
     });
-    const handlePointerDown = React11.useCallback((e) => {
+    const handlePointerDown = React10.useCallback((e) => {
       if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
     const isClickable = action || onClick;
-    return React11__default.default.createElement(
+    return React10__default.default.createElement(
       Component2,
       {
         ref,
@@ -4623,7 +4539,7 @@ var Box = React11__default.default.forwardRef(
 );
 Box.displayName = "Box";
 
-// components/game/organisms/utils/makeAsset.ts
+// components/game/shared/makeAsset.ts
 var ROLE_DEFAULTS = {
   tile: { dimension: "2d", animations: ["static"], aspect: "1:1" },
   decoration: { dimension: "2d", animations: ["static"], aspect: "1:1" },
@@ -4647,7 +4563,7 @@ function makeAsset(url, role, overrides = {}) {
   };
 }
 
-// components/game/templates/game3dAssetManifest.ts
+// components/game/2d/game3dAssetManifest.ts
 function tileKind(type, passable) {
   if (passable === false) return "wall";
   if (type === "dirt" || type === "road") return "dirt";
@@ -5827,10 +5743,10 @@ var Avl3DOrbitalNode = ({
   position,
   onClick
 }) => {
-  const groupRef = React11.useRef(null);
-  const [hovered, setHovered] = React11.useState(false);
-  const scale = React11.useMemo(() => 0.6 + Math.min(traitCount, 8) * 0.3, [traitCount]);
-  const currentScale = React11.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;
@@ -5972,7 +5888,7 @@ var Avl3DCrossWire = ({
   eventName,
   color = AVL_3D_COLORS.crossWire
 }) => {
-  const { tubeArgs, midpoint } = React11.useMemo(() => {
+  const { tubeArgs, midpoint } = React10.useMemo(() => {
     const curve = arcCurve3D(from, to, 2);
     const mid = curve.getPoint(0.5);
     return {
@@ -6011,9 +5927,9 @@ var Avl3DApplicationScene = ({
   data,
   onOrbitalClick
 }) => {
-  const groupRef = React11.useRef(null);
-  const [, setHoverTrigger] = React11.useState(0);
-  const orbitalPositions = React11.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);
@@ -6026,7 +5942,7 @@ var Avl3DApplicationScene = ({
     })).filter((e) => e.from >= 0 && e.to >= 0);
     return forceDirectedPositions(data.orbitals.length, edges, baseRadius);
   }, [data.orbitals, data.crossLinks]);
-  const positionByName = React11.useMemo(() => {
+  const positionByName = React10.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     data.orbitals.forEach((orb, i) => {
       const pos = orbitalPositions[i];
@@ -6109,7 +6025,7 @@ var Avl3DEntityCore = ({
   position,
   fields
 }) => {
-  const coreRef = React11.useRef(null);
+  const coreRef = React10.useRef(null);
   fiber.useFrame((_, delta) => {
     if (!coreRef.current) return;
     coreRef.current.rotation.y += delta * 0.3;
@@ -6262,8 +6178,8 @@ function TraitOrbit({
   onClick,
   onHover
 }) {
-  const groupRef = React11.useRef(null);
-  const angleRef = React11.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;
@@ -6394,9 +6310,9 @@ var Avl3DOrbitalScene = ({
   highlightedTrait,
   onTraitHighlight
 }) => {
-  const [localHighlight, setLocalHighlight] = React11.useState(null);
+  const [localHighlight, setLocalHighlight] = React10.useState(null);
   const activeHighlight = highlightedTrait ?? localHighlight;
-  const traitOrbits = React11.useMemo(() => {
+  const traitOrbits = React10.useMemo(() => {
     return data.traits.map((trait, i) => ({
       name: trait.name,
       radius: 3 + i * 1.2,
@@ -6407,7 +6323,7 @@ var Avl3DOrbitalScene = ({
       transitionCount: trait.transitionCount
     }));
   }, [data.traits]);
-  const pagePositions = React11.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;
@@ -6471,12 +6387,12 @@ var Avl3DStateNode = ({
   outgoingCount = 0,
   onClick
 }) => {
-  const [hovered, setHovered] = React11.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 = React11.useRef(1);
+  const currentScale = React10.useRef(1);
   fiber.useFrame((_, delta) => {
     currentScale.current = THREE6.MathUtils.damp(currentScale.current, targetScale, 6, delta);
   });
@@ -6650,8 +6566,8 @@ var Avl3DTransitionArc = ({
   onClick,
   color = AVL_3D_COLORS.transitionArc
 }) => {
-  const [hovered, setHovered] = React11.useState(false);
-  const { tubeArgs, labelPos, guardPos, arrowPos, arrowQuat, effectPositions } = React11.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);
@@ -6784,7 +6700,7 @@ var Avl3DTraitScene = ({
   data,
   onTransitionClick
 }) => {
-  const statePositions = React11.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();
@@ -6794,7 +6710,7 @@ var Avl3DTraitScene = ({
     });
     return posMap;
   }, [data.states]);
-  const transitionIndices = React11.useMemo(() => {
+  const transitionIndices = React10.useMemo(() => {
     const pairCount = /* @__PURE__ */ new Map();
     return data.transitions.map((t) => {
       const key = `${t.from}->${t.to}`;
@@ -6803,7 +6719,7 @@ var Avl3DTraitScene = ({
       return idx;
     });
   }, [data.transitions]);
-  const transitionCounts = React11.useMemo(() => {
+  const transitionCounts = React10.useMemo(() => {
     const incoming = /* @__PURE__ */ new Map();
     const outgoing = /* @__PURE__ */ new Map();
     for (const t of data.transitions) {
@@ -6913,11 +6829,11 @@ var Avl3DExprTree = ({
   expression,
   position
 }) => {
-  const layoutResults = React11.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 = React11.useMemo(() => {
+  const edges = React10.useMemo(() => {
     const result = [];
     function collectEdges(node, parentPos) {
       const entry = layoutResults.find((r) => r.node === node);
@@ -7197,7 +7113,7 @@ var Avl3DEffects = ({
   const dof = DOF_CONFIG[level];
   const sparkles = SPARKLE_CONFIGS[level];
   const stars = STARS_CONFIG[level];
-  const starsKey = React11.useMemo(() => `stars-${level}`, [level]);
+  const starsKey = React10.useMemo(() => `stars-${level}`, [level]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       drei.Stars,
@@ -7261,16 +7177,16 @@ var DEFAULT_CONFIG2 = {
   modelOverrides: {},
   effectsEnabled: true
 };
-var Avl3DContext = React11.createContext(DEFAULT_CONFIG2);
+var Avl3DContext = React10.createContext(DEFAULT_CONFIG2);
 function useAvl3DConfig() {
-  return React11.useContext(Avl3DContext);
+  return React10.useContext(Avl3DContext);
 }
 function CameraController2({ targetPosition, targetLookAt, animated }) {
   const { camera } = fiber.useThree();
-  const targetPosVec = React11.useRef(new THREE6__namespace.Vector3(...targetPosition));
-  const targetLookVec = React11.useRef(new THREE6__namespace.Vector3(...targetLookAt));
-  const isAnimating = React11.useRef(false);
-  React11.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)) {
@@ -7299,8 +7215,8 @@ function CameraController2({ targetPosition, targetLookAt, animated }) {
   return null;
 }
 function SceneFade({ animating, children }) {
-  const groupRef = React11.useRef(null);
-  const opacityRef = React11.useRef(1);
+  const groupRef = React10.useRef(null);
+  const opacityRef = React10.useRef(1);
   fiber.useFrame((_, delta) => {
     if (!groupRef.current) return;
     const target = animating ? 0 : 1;
@@ -7324,7 +7240,7 @@ var Avl3DViewer = ({
   modelOverrides = {}
 }) => {
   const { t } = hooks.useTranslate();
-  const schema = React11.useMemo(() => {
+  const schema = React10.useMemo(() => {
     if (typeof schemaProp === "string") {
       try {
         return JSON.parse(schemaProp);
@@ -7334,12 +7250,12 @@ var Avl3DViewer = ({
     }
     return schemaProp;
   }, [schemaProp]);
-  const configValue = React11.useMemo(() => ({
+  const configValue = React10.useMemo(() => ({
     modelOverrides,
     effectsEnabled: effects
   }), [modelOverrides, effects]);
-  const [state, dispatch] = React11.useReducer(zoomReducer, initialZoomState);
-  React11.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);
@@ -7351,35 +7267,35 @@ var Avl3DViewer = ({
       }
     }
   }, [initialOrbital, initialTrait]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     onZoomChange?.(state.level, {
       orbital: state.selectedOrbital ?? void 0,
       trait: state.selectedTrait ?? void 0
     });
   }, [state.level, state.selectedOrbital, state.selectedTrait, onZoomChange]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (!state.animating) return;
     const timer = setTimeout(() => {
       dispatch({ type: "ANIMATION_COMPLETE" });
     }, 800);
     return () => clearTimeout(timer);
   }, [state.animating]);
-  const handleKeyDown = React11.useCallback((e) => {
+  const handleKeyDown = React10.useCallback((e) => {
     if (e.key === "Escape") {
       dispatch({ type: "ZOOM_OUT" });
     }
   }, []);
-  const handleOrbitalClick = React11.useCallback((name) => {
+  const handleOrbitalClick = React10.useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const handleTraitClick = React11.useCallback((name) => {
+  const handleTraitClick = React10.useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const [highlightedTrait, setHighlightedTrait] = React11__default.default.useState(null);
-  const handleTransitionClick = React11.useCallback((index) => {
+  const [highlightedTrait, setHighlightedTrait] = React10__default.default.useState(null);
+  const handleTransitionClick = React10.useCallback((index) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const handleBreadcrumbClick = React11.useCallback((targetLevel) => {
+  const handleBreadcrumbClick = React10.useCallback((targetLevel) => {
     const levelOrder = ["application", "orbital", "trait", "transition"];
     const currentIdx = levelOrder.indexOf(state.level);
     const targetIdx = levelOrder.indexOf(targetLevel);
@@ -7388,7 +7304,7 @@ var Avl3DViewer = ({
     }
   }, [state.level]);
   const cameraConfig = CAMERA_POSITIONS[state.level];
-  const sceneContent = React11.useMemo(() => {
+  const sceneContent = React10.useMemo(() => {
     switch (state.level) {
       case "application": {
         const data = parseApplicationLevel(schema);
@@ -7462,7 +7378,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(React11__default.default.Fragment, { children: [
+            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React10__default.default.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
               i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
                 Box,
@@ -7749,6 +7665,7 @@ exports.Avl3DTransitionScene = Avl3DTransitionScene;
 exports.Avl3DViewer = Avl3DViewer;
 exports.CAMERA_POSITIONS = CAMERA_POSITIONS;
 exports.Camera3D = Camera3D;
+exports.Canvas3D = Canvas3D;
 exports.Canvas3DErrorBoundary = Canvas3DErrorBoundary;
 exports.Canvas3DLoadingState = Canvas3DLoadingState;
 exports.FeatureRenderer = FeatureRenderer;