@almadar/ui 5.49.1 → 5.51.0

package/dist/components/index.cjs

@@ -41,7 +41,7 @@ var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
 var react = require('@xyflow/react');
-var THREE = require('three');
+var THREE3 = require('three');
 var GLTFLoader_js = require('three/examples/jsm/loaders/GLTFLoader.js');
 var OBJLoader_js = require('three/examples/jsm/loaders/OBJLoader.js');
 var GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader');
@@ -94,7 +94,7 @@ var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
 var remarkMath__default = /*#__PURE__*/_interopDefault(remarkMath);
 var rehypeKatex__default = /*#__PURE__*/_interopDefault(rehypeKatex);
-var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+var THREE3__namespace = /*#__PURE__*/_interopNamespace(THREE3);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -9419,6 +9419,291 @@ var init_useCamera = __esm({
   }
 });
 
+// components/game/organisms/utils/spriteSheetConstants.ts
+exports.SHEET_COLUMNS = void 0; exports.SPRITE_SHEET_LAYOUT = void 0;
+var init_spriteSheetConstants = __esm({
+  "components/game/organisms/utils/spriteSheetConstants.ts"() {
+    exports.SHEET_COLUMNS = 8;
+    exports.SPRITE_SHEET_LAYOUT = {
+      idle: { row: 0, frames: 4, frameRate: 6, loop: true },
+      walk: { row: 1, frames: 8, frameRate: 10, loop: true },
+      attack: { row: 2, frames: 6, frameRate: 12, loop: false },
+      hit: { row: 3, frames: 3, frameRate: 8, loop: false },
+      death: { row: 4, frames: 6, frameRate: 8, loop: false }
+    };
+  }
+});
+
+// components/game/organisms/utils/spriteAnimation.ts
+function inferDirection(dx, dy) {
+  if (dx === 0 && dy === 0) return "se";
+  if (dx >= 0 && dy >= 0) return "se";
+  if (dx <= 0 && dy >= 0) return "sw";
+  if (dx >= 0 && dy <= 0) return "ne";
+  return "nw";
+}
+function resolveSheetDirection(facing) {
+  switch (facing) {
+    case "se":
+      return { sheetDir: "se", flipX: false };
+    case "sw":
+      return { sheetDir: "sw", flipX: false };
+    case "ne":
+      return { sheetDir: "sw", flipX: true };
+    case "nw":
+      return { sheetDir: "se", flipX: true };
+  }
+}
+function frameRect(frame, row, columns, frameWidth, frameHeight) {
+  return {
+    sx: frame % columns * frameWidth,
+    sy: row * frameHeight,
+    sw: frameWidth,
+    sh: frameHeight
+  };
+}
+function getCurrentFrameFromDef(def, elapsed) {
+  const frameDuration = 1e3 / def.frameRate;
+  const totalDuration = def.frames * frameDuration;
+  if (def.loop) {
+    const frame2 = Math.floor(elapsed % totalDuration / frameDuration);
+    return { frame: frame2, finished: false };
+  }
+  if (elapsed >= totalDuration) {
+    return { frame: def.frames - 1, finished: true };
+  }
+  const frame = Math.floor(elapsed / frameDuration);
+  return { frame, finished: false };
+}
+function getCurrentFrame(animName, elapsed) {
+  return getCurrentFrameFromDef(exports.SPRITE_SHEET_LAYOUT[animName], elapsed);
+}
+function resolveFrame(sheetUrls, frameDims, animState) {
+  if (!sheetUrls) return null;
+  const { sheetDir, flipX } = resolveSheetDirection(animState.direction);
+  const sheetUrl = sheetUrls[sheetDir];
+  if (!sheetUrl) return null;
+  const def = exports.SPRITE_SHEET_LAYOUT[animState.animation];
+  const { frame } = getCurrentFrame(animState.animation, animState.elapsed);
+  const rect = frameRect(frame, def.row, def.frames, frameDims.width, frameDims.height);
+  return {
+    sheetUrl,
+    sx: rect.sx,
+    sy: rect.sy,
+    sw: rect.sw,
+    sh: rect.sh,
+    flipX
+  };
+}
+function createUnitAnimationState(unitId) {
+  return {
+    unitId,
+    animation: "idle",
+    direction: "se",
+    frame: 0,
+    elapsed: 0,
+    queuedAnimation: null,
+    finished: false
+  };
+}
+function transitionAnimation(state, newAnim, direction) {
+  if (state.animation === "death" && state.finished) return state;
+  if (state.animation === newAnim && exports.SPRITE_SHEET_LAYOUT[newAnim].loop) {
+    return direction ? { ...state, direction } : state;
+  }
+  return {
+    ...state,
+    animation: newAnim,
+    direction: direction ?? state.direction,
+    frame: 0,
+    elapsed: 0,
+    queuedAnimation: null,
+    finished: false
+  };
+}
+function tickAnimationState(state, deltaMs) {
+  const newElapsed = state.elapsed + deltaMs;
+  const { frame, finished } = getCurrentFrame(state.animation, newElapsed);
+  const def = exports.SPRITE_SHEET_LAYOUT[state.animation];
+  if (finished && !def.loop && !state.finished) {
+    if (state.animation === "death") {
+      return { ...state, elapsed: newElapsed, frame, finished: true };
+    }
+    const nextAnim = state.queuedAnimation ?? "idle";
+    return {
+      ...state,
+      animation: nextAnim,
+      elapsed: 0,
+      frame: 0,
+      queuedAnimation: null,
+      finished: false
+    };
+  }
+  return { ...state, elapsed: newElapsed, frame, finished };
+}
+var init_spriteAnimation = __esm({
+  "components/game/organisms/utils/spriteAnimation.ts"() {
+    init_spriteSheetConstants();
+  }
+});
+function unitAtlasUrl(unit) {
+  if (unit.spriteSheet) return unit.spriteSheet;
+  const sprite = unit.sprite;
+  if (!sprite) return null;
+  const match = /^(.*-sprite-sheet)(?:-(?:se|sw))?(?:-v\d+)?\.png$/.exec(sprite);
+  if (!match) return null;
+  return `${match[1]}.json`;
+}
+function resolveSheetUrl(atlasUrl, relativeSheetPath) {
+  try {
+    return new URL(relativeSheetPath, atlasUrl).toString();
+  } catch {
+    const base = atlasUrl.slice(0, atlasUrl.lastIndexOf("/") + 1);
+    return `${base}${relativeSheetPath.replace(/^\.\//, "")}`;
+  }
+}
+function useUnitSpriteAtlas(units) {
+  const atlasCacheRef = React76.useRef(/* @__PURE__ */ new Map());
+  const loadingRef = React76.useRef(/* @__PURE__ */ new Set());
+  const [pendingCount, setPendingCount] = React76.useState(0);
+  const [, forceTick] = React76.useState(0);
+  const animStatesRef = React76.useRef(/* @__PURE__ */ new Map());
+  const lastTickRef = React76.useRef(0);
+  const rafRef = React76.useRef(0);
+  const atlasUrls = React76.useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const unit of units) {
+      const url = unitAtlasUrl(unit);
+      if (url) set.add(url);
+    }
+    return [...set];
+  }, [units]);
+  React76.useEffect(() => {
+    const cache = atlasCacheRef.current;
+    const loading = loadingRef.current;
+    const toLoad = atlasUrls.filter((url) => !cache.has(url) && !loading.has(url));
+    if (toLoad.length === 0) return;
+    let cancelled = false;
+    setPendingCount((prev) => prev + toLoad.length);
+    for (const url of toLoad) {
+      loading.add(url);
+      fetch(url).then((res) => res.ok ? res.json() : Promise.reject(new Error(String(res.status)))).then((atlas) => {
+        if (cancelled) return;
+        cache.set(url, atlas);
+      }).catch(() => {
+      }).finally(() => {
+        if (cancelled) return;
+        loading.delete(url);
+        setPendingCount((prev) => Math.max(0, prev - 1));
+        forceTick((n) => n + 1);
+      });
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [atlasUrls]);
+  const sheetUrls = React76.useMemo(() => {
+    const urls = /* @__PURE__ */ new Set();
+    for (const unit of units) {
+      const atlasUrl = unitAtlasUrl(unit);
+      if (!atlasUrl) continue;
+      const atlas = atlasCacheRef.current.get(atlasUrl);
+      if (!atlas) continue;
+      for (const rel of Object.values(atlas.sheets)) {
+        if (rel) urls.add(resolveSheetUrl(atlasUrl, rel));
+      }
+    }
+    return [...urls];
+  }, [units, pendingCount]);
+  React76.useEffect(() => {
+    const hasAtlasUnits = units.some((u) => unitAtlasUrl(u) !== null);
+    if (!hasAtlasUnits) return;
+    let running = true;
+    const tick = (ts) => {
+      if (!running) return;
+      const last = lastTickRef.current || ts;
+      const delta = ts - last;
+      lastTickRef.current = ts;
+      const states = animStatesRef.current;
+      const currentIds = /* @__PURE__ */ new Set();
+      for (const unit of units) {
+        if (unitAtlasUrl(unit) === null) continue;
+        currentIds.add(unit.id);
+        let state = states.get(unit.id);
+        if (!state) {
+          state = { animation: "idle", direction: "se", elapsed: 0, walkHold: 0, prev: null };
+          states.set(unit.id, state);
+        }
+        const posX = unit.position?.x ?? unit.x ?? 0;
+        const posY = unit.position?.y ?? unit.y ?? 0;
+        if (state.prev) {
+          const dx = posX - state.prev.x;
+          const dy = posY - state.prev.y;
+          if (dx !== 0 || dy !== 0) {
+            state.animation = "walk";
+            state.direction = inferDirection(dx, dy);
+            state.walkHold = WALK_HOLD_MS;
+          } else if (state.animation === "walk") {
+            state.walkHold -= delta;
+            if (state.walkHold <= 0) state.animation = "idle";
+          }
+        }
+        state.prev = { x: posX, y: posY };
+        state.elapsed += delta;
+      }
+      for (const id of states.keys()) {
+        if (!currentIds.has(id)) states.delete(id);
+      }
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      running = false;
+      cancelAnimationFrame(rafRef.current);
+      lastTickRef.current = 0;
+    };
+  }, [units]);
+  const resolveUnitFrame = React76.useCallback((unitId) => {
+    const unit = units.find((u) => u.id === unitId);
+    if (!unit) return null;
+    const atlasUrl = unitAtlasUrl(unit);
+    if (!atlasUrl) return null;
+    const atlas = atlasCacheRef.current.get(atlasUrl);
+    if (!atlas) return null;
+    const state = animStatesRef.current.get(unitId);
+    const animation = state?.animation ?? "idle";
+    const direction = state?.direction ?? "se";
+    const elapsed = state?.elapsed ?? 0;
+    const def = atlas.animations[animation] ?? atlas.animations.idle;
+    if (!def) return null;
+    const { sheetDir, flipX } = resolveSheetDirection(direction);
+    const rel = atlas.sheets[sheetDir] ?? atlas.sheets.se ?? atlas.sheets.sw;
+    if (!rel) return null;
+    const sheetUrl = resolveSheetUrl(atlasUrl, rel);
+    const isIdle = animation === "idle";
+    const frame = isIdle ? 0 : getCurrentFrameFromDef(def, elapsed).frame;
+    const rect = frameRect(frame, def.row, atlas.columns, atlas.frameWidth, atlas.frameHeight);
+    return {
+      sheetUrl,
+      sx: rect.sx,
+      sy: rect.sy,
+      sw: rect.sw,
+      sh: rect.sh,
+      flipX,
+      applyBreathing: isIdle
+    };
+  }, [units]);
+  return { sheetUrls, resolveUnitFrame, pendingCount };
+}
+var WALK_HOLD_MS;
+var init_useUnitSpriteAtlas = __esm({
+  "components/game/molecules/useUnitSpriteAtlas.ts"() {
+    "use client";
+    init_spriteAnimation();
+    WALK_HOLD_MS = 600;
+  }
+});
+
 // components/game/organisms/utils/isometric.ts
 function isoToScreen(tileX, tileY, scale, baseOffsetX) {
   const scaledTileWidth = exports.TILE_WIDTH * scale;
@@ -9532,6 +9817,10 @@ function IsometricCanvas({
     () => unitsProp.map((u) => u.position ? u : { ...u, position: { x: u.x ?? 0, y: u.y ?? 0 } }),
     [unitsProp]
   );
+  const { sheetUrls: atlasSheetUrls, resolveUnitFrame: resolveUnitFrameInternal, pendingCount: atlasPending } = useUnitSpriteAtlas(units);
+  const resolveFrameForUnit = React76.useCallback((unitId) => {
+    return resolveUnitFrame?.(unitId) ?? resolveUnitFrameInternal(unitId);
+  }, [resolveUnitFrame, resolveUnitFrameInternal]);
   const features = React76.useMemo(
     () => featuresProp.map((f3) => {
       if (f3.type) return f3;
@@ -9615,9 +9904,10 @@ function IsometricCanvas({
       }
     }
     if (effectSpriteUrls) urls.push(...effectSpriteUrls);
+    if (atlasSheetUrls.length) urls.push(...atlasSheetUrls);
     if (backgroundImage) urls.push(backgroundImage);
     return [...new Set(urls.filter(Boolean))];
-  }, [sortedTiles, features, units, getTerrainSprite, getFeatureSprite, getUnitSprite, effectSpriteUrls, backgroundImage, assetManifest, resolveManifestUrl]);
+  }, [sortedTiles, features, units, getTerrainSprite, getFeatureSprite, getUnitSprite, effectSpriteUrls, atlasSheetUrls, backgroundImage, assetManifest, resolveManifestUrl]);
   const { getImage, pendingCount } = useImageCache(spriteUrls);
   React76.useEffect(() => {
     if (typeof window === "undefined") return;
@@ -9905,7 +10195,7 @@ function IsometricCanvas({
         ctx.lineWidth = 3;
         ctx.stroke();
       }
-      const frame = resolveUnitFrame?.(unit.id) ?? null;
+      const frame = resolveFrameForUnit(unit.id);
       const frameImg = frame ? getImage(frame.sheetUrl) : null;
       if (frame && frameImg) {
         const frameAr = frame.sw / frame.sh;
@@ -10015,7 +10305,7 @@ function IsometricCanvas({
     resolveTerrainSpriteUrl,
     resolveFeatureSpriteUrl,
     resolveUnitSpriteUrl,
-    resolveUnitFrame,
+    resolveFrameForUnit,
     getImage,
     gridWidth,
     gridHeight,
@@ -10047,7 +10337,7 @@ function IsometricCanvas({
     };
   }, [selectedUnitId, units, scale, baseOffsetX, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, viewportSize, targetCameraRef]);
   React76.useEffect(() => {
-    const hasAnimations = units.length > 0 || validMoves.length > 0 || attackTargets.length > 0 || selectedUnitId != null || targetCameraRef.current != null || hasActiveEffects2 || pendingCount > 0;
+    const hasAnimations = units.length > 0 || validMoves.length > 0 || attackTargets.length > 0 || selectedUnitId != null || targetCameraRef.current != null || hasActiveEffects2 || pendingCount > 0 || atlasPending > 0;
     draw(animTimeRef.current);
     if (!hasAnimations) return;
     let running = true;
@@ -10063,7 +10353,7 @@ function IsometricCanvas({
       running = false;
       cancelAnimationFrame(rafIdRef.current);
     };
-  }, [draw, units.length, validMoves.length, attackTargets.length, selectedUnitId, hasActiveEffects2, pendingCount, lerpToTarget, targetCameraRef]);
+  }, [draw, units.length, validMoves.length, attackTargets.length, selectedUnitId, hasActiveEffects2, pendingCount, atlasPending, lerpToTarget, targetCameraRef]);
   const handleMouseMoveWithCamera = React76.useCallback((e) => {
     if (enableCamera) {
       const wasPanning = handleMouseMove(e, () => draw(animTimeRef.current));
@@ -10208,6 +10498,7 @@ var init_IsometricCanvas = __esm({
     init_ErrorState();
     init_useImageCache();
     init_useCamera();
+    init_useUnitSpriteAtlas();
     init_verificationRegistry();
     init_isometric();
     IsometricCanvas.displayName = "IsometricCanvas";
@@ -29578,13 +29869,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect79, useRef: useRef77, useCallback: useCallback119, useState: useState109 } = React76__namespace.default;
+      const { useEffect: useEffect80, useRef: useRef78, useCallback: useCallback120, useState: useState110 } = React76__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef77({ centerLat, centerLng, zoom });
-        useEffect79(() => {
+        const prevRef = useRef78({ centerLat, centerLng, zoom });
+        useEffect80(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -29595,7 +29886,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect79(() => {
+        useEffect80(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -29623,8 +29914,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus3();
-        const [clickedPosition, setClickedPosition] = useState109(null);
-        const handleMapClick = useCallback119((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState110(null);
+        const handleMapClick = useCallback120((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -29633,7 +29924,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback119((marker) => {
+        const handleMarkerClick = useCallback120((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -41678,7 +41969,7 @@ var init_AssetLoader = __esm({
         __publicField(this, "textureCache");
         __publicField(this, "loadingPromises");
         this.objLoader = new OBJLoader_js.OBJLoader();
-        this.textureLoader = new THREE__namespace.TextureLoader();
+        this.textureLoader = new THREE3__namespace.TextureLoader();
         this.modelCache = /* @__PURE__ */ new Map();
         this.textureCache = /* @__PURE__ */ new Map();
         this.loadingPromises = /* @__PURE__ */ new Map();
@@ -41752,7 +42043,7 @@ var init_AssetLoader = __esm({
           return this.loadingPromises.get(`texture:${url}`);
         }
         const loadPromise = this.textureLoader.loadAsync(url).then((texture) => {
-          texture.colorSpace = THREE__namespace.SRGBColorSpace;
+          texture.colorSpace = THREE3__namespace.SRGBColorSpace;
           this.textureCache.set(url, texture);
           this.loadingPromises.delete(`texture:${url}`);
           return texture;
@@ -41826,7 +42117,7 @@ var init_AssetLoader = __esm({
         });
         this.modelCache.forEach((model) => {
           model.scene.traverse((child) => {
-            if (child instanceof THREE__namespace.Mesh) {
+            if (child instanceof THREE3__namespace.Mesh) {
               child.geometry.dispose();
               if (Array.isArray(child.material)) {
                 child.material.forEach((m) => m.dispose());
@@ -42382,7 +42673,7 @@ function ModelLoader({
     if (!loadedModel) return null;
     const cloned = loadedModel.clone();
     cloned.traverse((child) => {
-      if (child instanceof THREE__namespace.Mesh) {
+      if (child instanceof THREE3__namespace.Mesh) {
         child.castShadow = castShadow;
         child.receiveShadow = receiveShadow;
       }
@@ -42496,6 +42787,47 @@ function CameraController({
   }, [camera.position, onCameraChange]);
   return null;
 }
+function UnitSpriteBillboard({
+  sheetUrl,
+  resolveFrame: resolveFrame2,
+  height = 1.2
+}) {
+  const texture = fiber.useLoader(THREE3__namespace.TextureLoader, sheetUrl);
+  const meshRef = React76.useRef(null);
+  const matRef = React76.useRef(null);
+  const [aspect, setAspect] = React76.useState(1);
+  fiber.useFrame(() => {
+    const frame = resolveFrame2();
+    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 = THREE3__namespace.NearestFilter;
+    texture.minFilter = THREE3__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: THREE3__namespace.DoubleSide
+      }
+    )
+  ] });
+}
 var DEFAULT_GRID_CONFIG, GameCanvas3D;
 var init_GameCanvas3D2 = __esm({
   "components/game/molecules/GameCanvas3D.tsx"() {
@@ -42506,6 +42838,7 @@ var init_GameCanvas3D2 = __esm({
     init_Canvas3DLoadingState2();
     init_Canvas3DErrorBoundary2();
     init_ModelLoader();
+    init_useUnitSpriteAtlas();
     init_cn();
     init_GameCanvas3D();
     DEFAULT_GRID_CONFIG = {
@@ -42562,8 +42895,10 @@ var init_GameCanvas3D2 = __esm({
         const controlsRef = React76.useRef(null);
         const [hoveredTile, setHoveredTile] = React76.useState(null);
         const [internalError, setInternalError] = React76.useState(null);
+        const { sheetUrls: atlasSheetUrls, resolveUnitFrame } = useUnitSpriteAtlas(units);
+        const preloadUrls = React76.useMemo(() => [...preloadAssets, ...atlasSheetUrls], [preloadAssets, atlasSheetUrls]);
         const { isLoading: assetsLoading, progress, loaded, total } = useAssetLoader({
-          preloadUrls: preloadAssets,
+          preloadUrls,
           loader: customAssetLoader
         });
         const eventHandlers = useGameCanvas3DEvents({
@@ -42622,7 +42957,7 @@ var init_GameCanvas3D2 = __esm({
           getCameraPosition: () => {
             if (controlsRef.current) {
               const pos = controlsRef.current.object.position;
-              return new THREE__namespace.Vector3(pos.x, pos.y, pos.z);
+              return new THREE3__namespace.Vector3(pos.x, pos.y, pos.z);
             }
             return null;
           },
@@ -42774,6 +43109,8 @@ var init_GameCanvas3D2 = __esm({
           ({ unit, position }) => {
             const isSelected = selectedUnitId === unit.id;
             const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
+            const hasAtlas = unitAtlasUrl(unit) !== null;
+            const initialFrame = hasAtlas ? resolveUnitFrame(unit.id) : null;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "group",
               {
@@ -42785,7 +43122,16 @@ var init_GameCanvas3D2 = __esm({
                     /* @__PURE__ */ jsxRuntime.jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
                     /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: "#ffff00", transparent: true, opacity: 0.8 })
                   ] }),
-                  unit.modelUrl ? (
+                  hasAtlas && initialFrame ? (
+                    /* Animated sprite-sheet billboard — single cropped frame, by state */
+                    /* @__PURE__ */ jsxRuntime.jsx(drei.Billboard, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                      UnitSpriteBillboard,
+                      {
+                        sheetUrl: initialFrame.sheetUrl,
+                        resolveFrame: () => resolveUnitFrame(unit.id)
+                      }
+                    ) })
+                  ) : unit.modelUrl ? (
                     /* GLB unit model (box fallback while loading / on error) */
                     /* @__PURE__ */ jsxRuntime.jsx(
                       ModelLoader,
@@ -42839,7 +43185,7 @@ var init_GameCanvas3D2 = __esm({
               }
             );
           },
-          [selectedUnitId, handleUnitClick]
+          [selectedUnitId, handleUnitClick, resolveUnitFrame]
         );
         const DefaultFeatureRenderer = React76.useCallback(
           ({
@@ -48543,12 +48889,8 @@ function Sprite({
 }) {
   const eventBus = useEventBus();
   const sourcePosition = React76.useMemo(() => {
-    const frameX = frame % columns;
-    const frameY = Math.floor(frame / columns);
-    return {
-      x: frameX * frameWidth,
-      y: frameY * frameHeight
-    };
+    const { sx, sy } = frameRect(frame, Math.floor(frame / columns), columns, frameWidth, frameHeight);
+    return { x: sx, y: sy };
   }, [frame, columns, frameWidth, frameHeight]);
   const transform = React76.useMemo(() => {
     const transforms = [
@@ -48606,8 +48948,7 @@ function drawSprite(ctx, image, props) {
     opacity = 1,
     columns = 16
   } = props;
-  const sourceX = frame % columns * frameWidth;
-  const sourceY = Math.floor(frame / columns) * frameHeight;
+  const { sx: sourceX, sy: sourceY } = frameRect(frame, Math.floor(frame / columns), columns, frameWidth, frameHeight);
   ctx.save();
   ctx.globalAlpha = opacity;
   ctx.translate(x + frameWidth / 2, y + frameHeight / 2);
@@ -48632,6 +48973,7 @@ var init_Sprite = __esm({
   "components/game/atoms/Sprite.tsx"() {
     "use client";
     init_useEventBus();
+    init_spriteAnimation();
   }
 });
 exports.StatCard = void 0;
@@ -52639,121 +52981,15 @@ init_useGameAudio();
 init_useImageCache();
 init_useCamera();
 
-// components/game/organisms/utils/spriteSheetConstants.ts
-var SHEET_COLUMNS = 8;
-var SPRITE_SHEET_LAYOUT = {
-  idle: { row: 0, frames: 4, frameRate: 6, loop: true },
-  walk: { row: 1, frames: 8, frameRate: 10, loop: true },
-  attack: { row: 2, frames: 6, frameRate: 12, loop: false },
-  hit: { row: 3, frames: 3, frameRate: 8, loop: false },
-  death: { row: 4, frames: 6, frameRate: 8, loop: false }
-};
-
-// components/game/organisms/utils/spriteAnimation.ts
-function inferDirection(dx, dy) {
-  if (dx === 0 && dy === 0) return "se";
-  if (dx >= 0 && dy >= 0) return "se";
-  if (dx <= 0 && dy >= 0) return "sw";
-  if (dx >= 0 && dy <= 0) return "ne";
-  return "nw";
-}
-function resolveSheetDirection(facing) {
-  switch (facing) {
-    case "se":
-      return { sheetDir: "se", flipX: false };
-    case "sw":
-      return { sheetDir: "sw", flipX: false };
-    case "ne":
-      return { sheetDir: "sw", flipX: true };
-    case "nw":
-      return { sheetDir: "se", flipX: true };
-  }
-}
-function getCurrentFrame(animName, elapsed) {
-  const def = SPRITE_SHEET_LAYOUT[animName];
-  const frameDuration = 1e3 / def.frameRate;
-  const totalDuration = def.frames * frameDuration;
-  if (def.loop) {
-    const frame2 = Math.floor(elapsed % totalDuration / frameDuration);
-    return { frame: frame2, finished: false };
-  }
-  if (elapsed >= totalDuration) {
-    return { frame: def.frames - 1, finished: true };
-  }
-  const frame = Math.floor(elapsed / frameDuration);
-  return { frame, finished: false };
-}
-function resolveFrame(sheetUrls, frameDims, animState) {
-  if (!sheetUrls) return null;
-  const { sheetDir, flipX } = resolveSheetDirection(animState.direction);
-  const sheetUrl = sheetUrls[sheetDir];
-  if (!sheetUrl) return null;
-  const def = SPRITE_SHEET_LAYOUT[animState.animation];
-  const { frame } = getCurrentFrame(animState.animation, animState.elapsed);
-  return {
-    sheetUrl,
-    sx: frame * frameDims.width,
-    sy: def.row * frameDims.height,
-    sw: frameDims.width,
-    sh: frameDims.height,
-    flipX
-  };
-}
-function createUnitAnimationState(unitId) {
-  return {
-    unitId,
-    animation: "idle",
-    direction: "se",
-    frame: 0,
-    elapsed: 0,
-    queuedAnimation: null,
-    finished: false
-  };
-}
-function transitionAnimation(state, newAnim, direction) {
-  if (state.animation === "death" && state.finished) return state;
-  if (state.animation === newAnim && SPRITE_SHEET_LAYOUT[newAnim].loop) {
-    return direction ? { ...state, direction } : state;
-  }
-  return {
-    ...state,
-    animation: newAnim,
-    direction: direction ?? state.direction,
-    frame: 0,
-    elapsed: 0,
-    queuedAnimation: null,
-    finished: false
-  };
-}
-function tickAnimationState(state, deltaMs) {
-  const newElapsed = state.elapsed + deltaMs;
-  const { frame, finished } = getCurrentFrame(state.animation, newElapsed);
-  const def = SPRITE_SHEET_LAYOUT[state.animation];
-  if (finished && !def.loop && !state.finished) {
-    if (state.animation === "death") {
-      return { ...state, elapsed: newElapsed, frame, finished: true };
-    }
-    const nextAnim = state.queuedAnimation ?? "idle";
-    return {
-      ...state,
-      animation: nextAnim,
-      elapsed: 0,
-      frame: 0,
-      queuedAnimation: null,
-      finished: false
-    };
-  }
-  return { ...state, elapsed: newElapsed, frame, finished };
-}
-
 // components/game/organisms/hooks/useSpriteAnimations.ts
+init_spriteAnimation();
 function useSpriteAnimations(getSheetUrls, getFrameDims, options = {}) {
   const speed = options.speed ?? 1;
   const animStatesRef = React76.useRef(/* @__PURE__ */ new Map());
   const prevPositionsRef = React76.useRef(/* @__PURE__ */ new Map());
   const unitDataRef = React76.useRef(/* @__PURE__ */ new Map());
   const walkHoldRef = React76.useRef(/* @__PURE__ */ new Map());
-  const WALK_HOLD_MS = 600;
+  const WALK_HOLD_MS2 = 600;
   const syncUnits = React76.useCallback((units, deltaMs) => {
     const scaledDelta = deltaMs * speed;
     const states = animStatesRef.current;
@@ -52779,7 +53015,7 @@ function useSpriteAnimations(getSheetUrls, getFrameDims, options = {}) {
           const dir = inferDirection(dx, dy);
           if (state.animation !== "attack" && state.animation !== "hit" && state.animation !== "death") {
             state = transitionAnimation(state, "walk", dir);
-            walkHold.set(unit.id, WALK_HOLD_MS);
+            walkHold.set(unit.id, WALK_HOLD_MS2);
           }
         } else if (state.animation === "walk") {
           const remaining = (walkHold.get(unit.id) ?? 0) - scaledDelta;
@@ -53112,6 +53348,8 @@ function usePhysics2D(options = {}) {
 
 // components/game/organisms/index.ts
 init_isometric();
+init_spriteAnimation();
+init_spriteSheetConstants();
 init_BattleBoard();
 init_UncontrolledBattleBoard();
 init_useBattleState();
@@ -53776,8 +54014,6 @@ exports.RoguelikeBoard = RoguelikeBoard;
 exports.RoguelikeTemplate = RoguelikeTemplate;
 exports.RuleEditor = RuleEditor;
 exports.RuntimeDebugger = RuntimeDebugger;
-exports.SHEET_COLUMNS = SHEET_COLUMNS;
-exports.SPRITE_SHEET_LAYOUT = SPRITE_SHEET_LAYOUT;
 exports.ScoreBoard = ScoreBoard;
 exports.ScoreDisplay = ScoreDisplay;
 exports.SequenceBar = SequenceBar;