@almadar/ui 5.49.1 → 5.51.0

package/dist/providers/index.cjs

@@ -41,7 +41,7 @@ var core$1 = 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;
@@ -7058,6 +7058,52 @@ var init_ControlButton = __esm({
     ControlButton.displayName = "ControlButton";
   }
 });
+
+// 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 };
+}
+var init_spriteAnimation = __esm({
+  "components/game/organisms/utils/spriteAnimation.ts"() {
+  }
+});
 function Sprite({
   spritesheet = "https://almadar-kflow-assets.web.app/shared/isometric-blocks/Spritesheet/allTiles_sheet.png",
   frameWidth = 64,
@@ -7078,12 +7124,8 @@ function Sprite({
 }) {
   const eventBus = useEventBus();
   const sourcePosition = React82.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 = React82.useMemo(() => {
     const transforms = [
@@ -7131,6 +7173,7 @@ var init_Sprite = __esm({
   "components/game/atoms/Sprite.tsx"() {
     "use client";
     init_useEventBus();
+    init_spriteAnimation();
   }
 });
 function StateIndicator({
@@ -10866,6 +10909,163 @@ var init_useCamera = __esm({
     "use client";
   }
 });
+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 = React82.useRef(/* @__PURE__ */ new Map());
+  const loadingRef = React82.useRef(/* @__PURE__ */ new Set());
+  const [pendingCount, setPendingCount] = React82.useState(0);
+  const [, forceTick] = React82.useState(0);
+  const animStatesRef = React82.useRef(/* @__PURE__ */ new Map());
+  const lastTickRef = React82.useRef(0);
+  const rafRef = React82.useRef(0);
+  const atlasUrls = React82.useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const unit of units) {
+      const url = unitAtlasUrl(unit);
+      if (url) set.add(url);
+    }
+    return [...set];
+  }, [units]);
+  React82.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 = React82.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]);
+  React82.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 = React82.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) {
@@ -10980,6 +11180,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 = React82.useCallback((unitId) => {
+    return resolveUnitFrame?.(unitId) ?? resolveUnitFrameInternal(unitId);
+  }, [resolveUnitFrame, resolveUnitFrameInternal]);
   const features = React82.useMemo(
     () => featuresProp.map((f3) => {
       if (f3.type) return f3;
@@ -11063,9 +11267,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);
   React82.useEffect(() => {
     if (typeof window === "undefined") return;
@@ -11352,7 +11557,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;
@@ -11462,7 +11667,7 @@ function IsometricCanvas({
     resolveTerrainSpriteUrl,
     resolveFeatureSpriteUrl,
     resolveUnitSpriteUrl,
-    resolveUnitFrame,
+    resolveFrameForUnit,
     getImage,
     gridWidth,
     gridHeight,
@@ -11494,7 +11699,7 @@ function IsometricCanvas({
     };
   }, [selectedUnitId, units, scale, baseOffsetX, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, viewportSize, targetCameraRef]);
   React82.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;
@@ -11510,7 +11715,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 = React82.useCallback((e) => {
     if (enableCamera) {
       const wasPanning = handleMouseMove(e, () => draw(animTimeRef.current));
@@ -11655,6 +11860,7 @@ var init_IsometricCanvas = __esm({
     init_ErrorState();
     init_useImageCache();
     init_useCamera();
+    init_useUnitSpriteAtlas();
     init_verificationRegistry();
     init_isometric();
     IsometricCanvas.displayName = "IsometricCanvas";
@@ -29237,13 +29443,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect78, useRef: useRef74, useCallback: useCallback117, useState: useState108 } = React82__namespace.default;
+      const { useEffect: useEffect79, useRef: useRef75, useCallback: useCallback118, useState: useState109 } = React82__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 = useRef74({ centerLat, centerLng, zoom });
-        useEffect78(() => {
+        const prevRef = useRef75({ centerLat, centerLng, zoom });
+        useEffect79(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -29254,7 +29460,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect78(() => {
+        useEffect79(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -29282,8 +29488,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus3();
-        const [clickedPosition, setClickedPosition] = useState108(null);
-        const handleMapClick = useCallback117((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState109(null);
+        const handleMapClick = useCallback118((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -29292,7 +29498,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback117((marker) => {
+        const handleMarkerClick = useCallback118((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -41010,7 +41216,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();
@@ -41084,7 +41290,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;
@@ -41158,7 +41364,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());
@@ -41714,7 +41920,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;
       }
@@ -41828,6 +42034,47 @@ function CameraController({
   }, [camera.position, onCameraChange]);
   return null;
 }
+function UnitSpriteBillboard({
+  sheetUrl,
+  resolveFrame,
+  height = 1.2
+}) {
+  const texture = fiber.useLoader(THREE3__namespace.TextureLoader, sheetUrl);
+  const meshRef = React82.useRef(null);
+  const matRef = React82.useRef(null);
+  const [aspect, setAspect] = React82.useState(1);
+  fiber.useFrame(() => {
+    const frame = resolveFrame();
+    if (!frame || !texture.image) return;
+    const imgW = texture.image.width;
+    const imgH = texture.image.height;
+    if (!imgW || !imgH) return;
+    texture.repeat.set((frame.flipX ? -1 : 1) * (frame.sw / imgW), frame.sh / imgH);
+    texture.offset.set(
+      frame.flipX ? (frame.sx + frame.sw) / imgW : frame.sx / imgW,
+      1 - (frame.sy + frame.sh) / imgH
+    );
+    texture.magFilter = 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"() {
@@ -41838,6 +42085,7 @@ var init_GameCanvas3D2 = __esm({
     init_Canvas3DLoadingState2();
     init_Canvas3DErrorBoundary2();
     init_ModelLoader();
+    init_useUnitSpriteAtlas();
     init_cn();
     init_GameCanvas3D();
     DEFAULT_GRID_CONFIG = {
@@ -41894,8 +42142,10 @@ var init_GameCanvas3D2 = __esm({
         const controlsRef = React82.useRef(null);
         const [hoveredTile, setHoveredTile] = React82.useState(null);
         const [internalError, setInternalError] = React82.useState(null);
+        const { sheetUrls: atlasSheetUrls, resolveUnitFrame } = useUnitSpriteAtlas(units);
+        const preloadUrls = React82.useMemo(() => [...preloadAssets, ...atlasSheetUrls], [preloadAssets, atlasSheetUrls]);
         const { isLoading: assetsLoading, progress, loaded, total } = useAssetLoader({
-          preloadUrls: preloadAssets,
+          preloadUrls,
           loader: customAssetLoader
         });
         const eventHandlers = useGameCanvas3DEvents({
@@ -41954,7 +42204,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;
           },
@@ -42106,6 +42356,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",
               {
@@ -42117,7 +42369,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,
@@ -42171,7 +42432,7 @@ var init_GameCanvas3D2 = __esm({
               }
             );
           },
-          [selectedUnitId, handleUnitClick]
+          [selectedUnitId, handleUnitClick, resolveUnitFrame]
         );
         const DefaultFeatureRenderer = React82.useCallback(
           ({