@almadar/ui 5.94.1 → 5.96.0

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

@@ -1,4 +1,5 @@
-import React6, { forwardRef, useRef, useEffect, useImperativeHandle, useState, useMemo, useCallback, createContext, Component, useContext, useSyncExternalStore, useReducer } from 'react';
+import * as React8 from 'react';
+import React8__default, { forwardRef, useRef, useEffect, useImperativeHandle, useState, useMemo, useCallback, createContext, useContext, Component, useSyncExternalStore, useReducer } from 'react';
 import { useThree, useFrame, Canvas, useLoader } from '@react-three/fiber';
 import * as THREE6 from 'three';
 import { Vector3, QuadraticBezierCurve3, MathUtils, Quaternion } from 'three';
@@ -316,12 +317,13 @@ function detectAssetRoot(modelUrl) {
 function useGLTFModel(url, resourceBasePath) {
   const [state, setState] = useState({
     model: null,
+    clips: [],
     isLoading: false,
     error: null
   });
   useEffect(() => {
     if (!url) {
-      setState({ model: null, isLoading: false, error: null });
+      setState({ model: null, clips: [], isLoading: false, error: null });
       return;
     }
     log2.debug("Loading", { url });
@@ -332,9 +334,10 @@ function useGLTFModel(url, resourceBasePath) {
     loader.load(
       url,
       (gltf) => {
-        log2.debug("Loaded", { url });
+        log2.debug("Loaded", { url, clips: gltf.animations.length });
         setState({
           model: gltf.scene,
+          clips: gltf.animations,
           isLoading: false,
           error: null
         });
@@ -344,6 +347,7 @@ function useGLTFModel(url, resourceBasePath) {
         log2.warn("Failed", { url, error: err instanceof Error ? err : String(err) });
         setState({
           model: null,
+          clips: [],
           isLoading: false,
           error: err instanceof Error ? err : new Error(String(err))
         });
@@ -364,9 +368,10 @@ function ModelLoader({
   fallbackGeometry = "box",
   castShadow = true,
   receiveShadow = true,
-  resourceBasePath
+  resourceBasePath,
+  animation
 }) {
-  const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
+  const { model: loadedModel, clips, isLoading, error } = useGLTFModel(url, resourceBasePath);
   const model = useMemo(() => {
     if (!loadedModel) return null;
     const cloned = clone(loadedModel);
@@ -379,6 +384,21 @@ function ModelLoader({
     });
     return cloned;
   }, [loadedModel, castShadow, receiveShadow]);
+  const mixer = useMemo(() => model ? new THREE6.AnimationMixer(model) : null, [model]);
+  useEffect(() => {
+    if (!mixer || !animation || clips.length === 0) return;
+    const wanted = animation.toLowerCase();
+    const clip = clips.find((c) => c.name === animation) ?? clips.find((c) => c.name.toLowerCase() === wanted);
+    if (!clip) return;
+    const action = mixer.clipAction(clip);
+    action.reset().fadeIn(0.15).play();
+    return () => {
+      action.fadeOut(0.15);
+    };
+  }, [mixer, clips, animation]);
+  useFrame((_, delta) => {
+    mixer?.update(delta);
+  });
   const normFactor = useMemo(() => {
     if (!model) return 1;
     const box = new THREE6.Box3().setFromObject(model);
@@ -1695,6 +1715,99 @@ function UnitSpriteBillboard({
     )
   ] });
 }
+function FollowCamera({
+  target,
+  offset
+}) {
+  const { camera } = useThree();
+  const look = useRef(new THREE6.Vector3(target[0], target[1], target[2]));
+  const goal = useRef(new THREE6.Vector3());
+  useFrame((_, delta) => {
+    const t = Math.min(1, delta * 5);
+    goal.current.set(target[0] + offset[0], target[1] + offset[1], target[2] + offset[2]);
+    camera.position.lerp(goal.current, t);
+    look.current.lerp(goal.current.set(target[0], target[1], target[2]), t);
+    camera.lookAt(look.current);
+  });
+  return null;
+}
+function LerpedGroup({
+  target,
+  enabled,
+  children
+}) {
+  const ref = useRef(null);
+  const goal = useRef(new THREE6.Vector3());
+  useFrame((_, delta) => {
+    const g = ref.current;
+    if (!g) return;
+    goal.current.set(target[0], target[1], target[2]);
+    if (enabled) g.position.lerp(goal.current, Math.min(1, delta * 10));
+    else g.position.copy(goal.current);
+  });
+  return /* @__PURE__ */ jsx("group", { ref, position: target, children });
+}
+var SIDE_PLATFORM_COLORS = {
+  ground: "#5b8c3e",
+  platform: "#8b5a2b",
+  hazard: "#cc4444",
+  goal: "#4488cc"
+};
+function SideScene({
+  player,
+  platforms,
+  worldHeight,
+  ppu,
+  playerSprite,
+  tileSprites,
+  interpolate
+}) {
+  const pw = player.width ?? 32;
+  const ph = player.height ?? 48;
+  const playerPos = [
+    (player.x + pw / 2) / ppu,
+    (worldHeight - player.y - ph) / ppu,
+    0
+  ];
+  const playerH = Math.max(ph / ppu, 0.5);
+  return /* @__PURE__ */ jsxs("group", { children: [
+    platforms.map((p, i) => {
+      const platformType = p.type ?? "platform";
+      const model = tileSprites?.[platformType]?.url;
+      const topY = (worldHeight - p.y) / ppu;
+      if (model) {
+        const cells = Math.max(1, Math.round(p.width / ppu));
+        const x0 = p.x / ppu;
+        return /* @__PURE__ */ jsx("group", { children: Array.from({ length: cells }, (_, c) => /* @__PURE__ */ jsx("group", { position: [x0 + c + 0.5, topY - 0.475, 0], children: /* @__PURE__ */ jsx(ModelLoader, { url: model, scale: 0.95, fallbackGeometry: "box", castShadow: true, receiveShadow: true }) }, c)) }, `plat-${i}`);
+      }
+      return /* @__PURE__ */ jsxs(
+        "mesh",
+        {
+          position: [(p.x + p.width / 2) / ppu, topY - p.height / 2 / ppu, 0],
+          children: [
+            /* @__PURE__ */ jsx("boxGeometry", { args: [p.width / ppu, p.height / ppu, 1] }),
+            /* @__PURE__ */ jsx("meshStandardMaterial", { color: SIDE_PLATFORM_COLORS[platformType] ?? "#888888" })
+          ]
+        },
+        `plat-${i}`
+      );
+    }),
+    /* @__PURE__ */ jsx(LerpedGroup, { target: playerPos, enabled: interpolate, children: playerSprite?.url ? /* @__PURE__ */ jsx("group", { position: [0, playerH / 2, 0], children: /* @__PURE__ */ jsx(
+      ModelLoader,
+      {
+        url: playerSprite.url,
+        scale: playerH,
+        rotation: [0, player.facingRight ? 90 : -90, 0],
+        animation: player.animation ?? "idle",
+        fallbackGeometry: "box",
+        castShadow: true
+      }
+    ) }) : /* @__PURE__ */ jsxs("mesh", { position: [0, playerH / 2, 0], children: [
+      /* @__PURE__ */ jsx("capsuleGeometry", { args: [playerH * 0.25, playerH * 0.5, 4, 8] }),
+      /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#4488ff" })
+    ] }) })
+  ] });
+}
 var GameCanvas3D = forwardRef(
   ({
     tiles = [],
@@ -1738,12 +1851,47 @@ var GameCanvas3D = forwardRef(
     selectedTileIds = [],
     selectedUnitId = null,
     unitScale = 1,
+    keyMap,
+    keyUpMap,
+    player,
+    platforms = [],
+    worldHeight = 400,
+    pixelsPerUnit = 32,
+    playerSprite,
+    tileSprites,
+    assetManifest,
+    interpolateUnits = false,
     children
   }, ref) => {
     const containerRef = useRef(null);
     const controlsRef = useRef(null);
     const [hoveredTile, setHoveredTile] = useState(null);
     const [internalError, setInternalError] = useState(null);
+    const eventBus = useEventBus();
+    const keysRef = useRef(/* @__PURE__ */ new Set());
+    useEffect(() => {
+      if (!keyMap && !keyUpMap) return;
+      const down = (e) => {
+        if (keysRef.current.has(e.code)) return;
+        keysRef.current.add(e.code);
+        const ev = keyMap?.[e.code];
+        if (ev) {
+          eventBus.emit(`UI:${ev}`, {});
+          e.preventDefault();
+        }
+      };
+      const up = (e) => {
+        keysRef.current.delete(e.code);
+        const ev = keyUpMap?.[e.code];
+        if (ev) eventBus.emit(`UI:${ev}`, {});
+      };
+      window.addEventListener("keydown", down);
+      window.addEventListener("keyup", up);
+      return () => {
+        window.removeEventListener("keydown", down);
+        window.removeEventListener("keyup", up);
+      };
+    }, [keyMap, keyUpMap, eventBus]);
     useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
@@ -1913,6 +2061,11 @@ var GameCanvas3D = forwardRef(
             position: [cx, d * 2, cz],
             fov: 45
           };
+        case "follow":
+          return {
+            position: [cx, d * 0.5, cz + d],
+            fov: 45
+          };
         case "perspective":
         default:
           return {
@@ -1921,6 +2074,26 @@ var GameCanvas3D = forwardRef(
           };
       }
     }, [cameraMode, gridBounds]);
+    const followTarget = useMemo(() => {
+      if (player) {
+        return [
+          (player.x + (player.width ?? 32) / 2) / pixelsPerUnit,
+          (worldHeight - player.y - (player.height ?? 48) / 2) / pixelsPerUnit,
+          0
+        ];
+      }
+      const selected = units.find((u) => u.id === selectedUnitId);
+      if (selected) {
+        const sx = selected.x ?? selected.position?.x ?? 0;
+        const sz = selected.z ?? selected.y ?? selected.position?.y ?? 0;
+        return [
+          (sx - gridBounds.minX) * gridConfig.cellSize,
+          0,
+          (sz - gridBounds.minZ) * gridConfig.cellSize
+        ];
+      }
+      return cameraTarget;
+    }, [player, pixelsPerUnit, worldHeight, units, selectedUnitId, gridBounds, gridConfig, cameraTarget]);
     const DefaultTileRenderer = useCallback(
       ({ tile, position }) => {
         const isSelected = tile.id ? selectedTileIds.includes(tile.id) : false;
@@ -1942,7 +2115,8 @@ var GameCanvas3D = forwardRef(
         else if (isAttackTarget) emissive = 4456448;
         else if (isValidMove) emissive = 17408;
         else if (isHovered) emissive = 2236962;
-        if (tile.modelUrl) {
+        const tileModel = tile.modelUrl ?? assetManifest?.terrains?.[tile.terrain ?? tile.type ?? ""];
+        if (tileModel?.url) {
           return /* @__PURE__ */ jsx(
             "group",
             {
@@ -1954,7 +2128,7 @@ var GameCanvas3D = forwardRef(
               children: /* @__PURE__ */ jsx(
                 ModelLoader,
                 {
-                  url: tile.modelUrl.url,
+                  url: tileModel.url,
                   scale: 0.95,
                   fallbackGeometry: "box",
                   castShadow: true,
@@ -1979,7 +2153,7 @@ var GameCanvas3D = forwardRef(
           }
         );
       },
-      [selectedTileIds, hoveredTile, validMoves, attackTargets, handleTileClick, handleTileHover]
+      [selectedTileIds, hoveredTile, validMoves, attackTargets, handleTileClick, handleTileHover, assetManifest]
     );
     const UNIT_BASE_MODEL_SCALE = 0.5;
     const UNIT_BASE_BILLBOARD_HEIGHT = 1.2;
@@ -1990,6 +2164,7 @@ var GameCanvas3D = forwardRef(
         const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
         const hasAtlas = unitAtlasUrl(unit) !== null;
         const initialFrame = hasAtlas ? resolveUnitFrame(unit.id) : null;
+        const unitModel = unit.modelUrl ?? assetManifest?.units?.[unit.unitType ?? ""];
         const modelScale = UNIT_BASE_MODEL_SCALE * unitScale * gridConfig.cellSize;
         const billboardHeight = UNIT_BASE_BILLBOARD_HEIGHT * unitScale * gridConfig.cellSize;
         const primitiveRadius = UNIT_BASE_PRIMITIVE_RADIUS * unitScale * gridConfig.cellSize;
@@ -2014,13 +2189,14 @@ var GameCanvas3D = forwardRef(
                     height: billboardHeight
                   }
                 ) })
-              ) : unit.modelUrl ? (
-                /* GLB unit model (box fallback while loading / on error) */
+              ) : unitModel?.url ? (
+                /* GLB unit model — LOLO's `animation` field drives the named clip */
                 /* @__PURE__ */ jsx(
                   ModelLoader,
                   {
-                    url: unit.modelUrl.url,
+                    url: unitModel.url,
                     scale: modelScale,
+                    animation: unit.animation ?? "idle",
                     fallbackGeometry: "box",
                     castShadow: true
                   }
@@ -2068,18 +2244,19 @@ var GameCanvas3D = forwardRef(
           }
         );
       },
-      [selectedUnitId, handleUnitClick, resolveUnitFrame, unitScale, gridConfig]
+      [selectedUnitId, handleUnitClick, resolveUnitFrame, unitScale, gridConfig, assetManifest]
     );
     const DefaultFeatureRenderer = useCallback(
       ({
         feature,
         position
       }) => {
-        if (feature.assetUrl) {
+        const featureModel = feature.assetUrl ?? assetManifest?.features?.[feature.type];
+        if (featureModel?.url) {
           return /* @__PURE__ */ jsx(
             ModelLoader,
             {
-              url: feature.assetUrl.url,
+              url: featureModel.url,
               position,
               scale: 0.5,
               rotation: [0, feature.rotation ?? 0, 0],
@@ -2125,7 +2302,7 @@ var GameCanvas3D = forwardRef(
         }
         return null;
       },
-      [handleFeatureClick]
+      [handleFeatureClick, assetManifest]
     );
     if (externalLoading || assetsLoading && preloadAssets.length > 0) {
       return /* @__PURE__ */ jsx(
@@ -2179,6 +2356,13 @@ var GameCanvas3D = forwardRef(
                   },
                   children: [
                     /* @__PURE__ */ jsx(CameraController, { onCameraChange: eventHandlers.handleCameraChange }),
+                    cameraMode === "follow" && /* @__PURE__ */ jsx(
+                      FollowCamera,
+                      {
+                        target: followTarget,
+                        offset: player ? [0, 2, 9] : [5, 7, 5]
+                      }
+                    ),
                     /* @__PURE__ */ jsx("ambientLight", { intensity: 0.6 }),
                     /* @__PURE__ */ jsx(
                       "directionalLight",
@@ -2186,7 +2370,9 @@ var GameCanvas3D = forwardRef(
                         position: [10, 20, 10],
                         intensity: 0.8,
                         castShadow: shadows,
-                        "shadow-mapSize": [2048, 2048]
+                        "shadow-mapSize": [2048, 2048],
+                        "shadow-bias": -4e-4,
+                        "shadow-normalBias": 0.04
                       }
                     ),
                     /* @__PURE__ */ jsx("hemisphereLight", { intensity: 0.3, color: "#87ceeb", groundColor: "#362d1d" }),
@@ -2212,7 +2398,21 @@ var GameCanvas3D = forwardRef(
                         fadeStrength: 1
                       }
                     ),
-                    /* @__PURE__ */ jsxs("group", { children: [
+                    player ? (
+                      /* Side-scroller mode — LOLO-owned pixel space mapped to world units */
+                      /* @__PURE__ */ jsx(
+                        SideScene,
+                        {
+                          player,
+                          platforms,
+                          worldHeight,
+                          ppu: pixelsPerUnit,
+                          playerSprite,
+                          tileSprites,
+                          interpolate: interpolateUnits
+                        }
+                      )
+                    ) : /* @__PURE__ */ jsxs("group", { children: [
                       tiles.map((tile, index) => {
                         const position = gridToWorld2(
                           tile.x,
@@ -2233,12 +2433,12 @@ var GameCanvas3D = forwardRef(
                       }),
                       units.map((unit) => {
                         const position = gridToWorld2(
-                          unit.x ?? 0,
-                          unit.z ?? unit.y ?? 0,
+                          unit.x ?? unit.position?.x ?? 0,
+                          unit.z ?? unit.y ?? unit.position?.y ?? 0,
                           (unit.elevation ?? 0) + 0.5
                         );
                         const Renderer = CustomUnitRenderer || DefaultUnitRenderer;
-                        return /* @__PURE__ */ jsx(Renderer, { unit, position }, unit.id);
+                        return /* @__PURE__ */ jsx(LerpedGroup, { target: position, enabled: interpolateUnits, children: /* @__PURE__ */ jsx(Renderer, { unit, position: [0, 0, 0] }) }, unit.id);
                       })
                     ] }),
                     children,
@@ -2246,6 +2446,7 @@ var GameCanvas3D = forwardRef(
                       OrbitControls,
                       {
                         ref: controlsRef,
+                        enabled: cameraMode !== "follow",
                         target: cameraTarget,
                         enableDamping: true,
                         dampingFactor: 0.05,
@@ -2278,9 +2479,6 @@ var GameCanvas3D = forwardRef(
   }
 );
 GameCanvas3D.displayName = "GameCanvas3D";
-function Canvas3D(props) {
-  return /* @__PURE__ */ jsx(GameCanvas3D, { ...props });
-}
 var DEFAULT_FAMILY = "lucide";
 var VALID_FAMILIES = [
   "lucide",
@@ -2353,7 +2551,7 @@ function loadLib(key, importer) {
   return p;
 }
 function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
-  const Lazy = React6.lazy(async () => {
+  const Lazy = React8__default.lazy(async () => {
     const lib = await loadLib(libKey, importer);
     const Comp = pick(lib);
     if (!Comp) {
@@ -2363,7 +2561,7 @@ function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
     return { default: Comp };
   });
   const Wrapped = (props) => /* @__PURE__ */ jsx(
-    React6.Suspense,
+    React8__default.Suspense,
     {
       fallback: /* @__PURE__ */ jsx(
         "span",
@@ -3032,7 +3230,7 @@ var Icon = ({
   const directIcon = typeof icon === "string" ? void 0 : icon;
   const effectiveName = typeof icon === "string" ? icon : name;
   const family = useIconFamily();
-  const RenderedComponent = React6.useMemo(() => {
+  const RenderedComponent = React8__default.useMemo(() => {
     if (directIcon) return null;
     return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
   }, [directIcon, effectiveName, family]);
@@ -3080,6 +3278,143 @@ var Icon = ({
   );
 };
 Icon.displayName = "Icon";
+
+// lib/atlasSlice.ts
+var atlasCache = /* @__PURE__ */ new Map();
+function isTilesheet(a) {
+  return typeof a.tileWidth === "number";
+}
+function getAtlas(url, onReady) {
+  if (atlasCache.has(url)) return atlasCache.get(url) ?? void 0;
+  atlasCache.set(url, void 0);
+  fetch(url).then((r) => r.json()).then((json) => {
+    atlasCache.set(url, json);
+    onReady();
+  }).catch(() => {
+    atlasCache.set(url, null);
+  });
+  return void 0;
+}
+function subRectFor(atlas, sprite) {
+  if (isTilesheet(atlas)) {
+    let col;
+    let row;
+    if (sprite.includes(",")) {
+      const [c, r] = sprite.split(",").map((n) => Number(n.trim()));
+      col = c;
+      row = r;
+    } else {
+      const i = Number(sprite);
+      if (!Number.isFinite(i)) return null;
+      col = i % atlas.columns;
+      row = Math.floor(i / atlas.columns);
+    }
+    if (!Number.isFinite(col) || !Number.isFinite(row) || col < 0 || row < 0 || col >= atlas.columns || row >= atlas.rows) return null;
+    const margin = atlas.margin ?? 0;
+    const spacing = atlas.spacing ?? 0;
+    return {
+      sx: margin + col * (atlas.tileWidth + spacing),
+      sy: margin + row * (atlas.tileHeight + spacing),
+      sw: atlas.tileWidth,
+      sh: atlas.tileHeight
+    };
+  }
+  const st = atlas.subTextures[sprite];
+  if (!st) return null;
+  return { sx: st.x, sy: st.y, sw: st.width, sh: st.height };
+}
+function isAtlasAsset(asset) {
+  return !!asset && typeof asset.atlas === "string" && typeof asset.sprite === "string";
+}
+var imageCache = /* @__PURE__ */ new Map();
+var imageWaiters = /* @__PURE__ */ new Map();
+function getSheetImage(url, onReady) {
+  const cached = imageCache.get(url);
+  if (cached) return cached;
+  (imageWaiters.get(url) ?? imageWaiters.set(url, /* @__PURE__ */ new Set()).get(url)).add(onReady);
+  if (!imageCache.has(url)) {
+    imageCache.set(url, null);
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      imageCache.set(url, img);
+      imageWaiters.get(url)?.forEach((fn) => fn());
+      imageWaiters.delete(url);
+    };
+    img.src = url;
+  }
+  return null;
+}
+function AtlasImage({
+  asset,
+  size,
+  width,
+  height,
+  fill = false,
+  fit = "contain",
+  alt,
+  className,
+  style,
+  "aria-hidden": ariaHidden
+}) {
+  const [, bump] = React8.useReducer((x) => x + 1, 0);
+  const canvasRef = React8.useRef(null);
+  const sliced = isAtlasAsset(asset);
+  const atlas = sliced ? getAtlas(asset.atlas, bump) : void 0;
+  const img = sliced && asset?.url ? getSheetImage(asset.url, bump) : null;
+  const rect = sliced && atlas ? subRectFor(atlas, asset.sprite) : null;
+  React8.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !img || !rect) return;
+    canvas.width = rect.sw;
+    canvas.height = rect.sh;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.imageSmoothingEnabled = false;
+    ctx.clearRect(0, 0, rect.sw, rect.sh);
+    ctx.drawImage(img, rect.sx, rect.sy, rect.sw, rect.sh, 0, 0, rect.sw, rect.sh);
+  }, [img, rect?.sx, rect?.sy, rect?.sw, rect?.sh]);
+  const w = fill ? "100%" : width ?? size;
+  const h = fill ? "100%" : height ?? size;
+  const boxStyle = {
+    ...fill ? { position: "absolute", inset: 0 } : {},
+    width: w,
+    height: h,
+    objectFit: fit,
+    imageRendering: "pixelated",
+    ...style
+  };
+  if (!asset?.url) return null;
+  if (sliced) {
+    if (!rect || !img) {
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("inline-block flex-shrink-0", className), style: { ...boxStyle, objectFit: void 0 } });
+    }
+    return /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        role: ariaHidden ? void 0 : "img",
+        "aria-hidden": ariaHidden,
+        "aria-label": ariaHidden ? void 0 : alt ?? asset.name ?? asset.category ?? "",
+        className: cn("flex-shrink-0", className),
+        style: boxStyle
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: asset.url,
+      alt: alt ?? asset.name ?? asset.category ?? "",
+      "aria-hidden": ariaHidden,
+      ...typeof w === "number" ? { width: w } : {},
+      ...typeof h === "number" ? { height: h } : {},
+      className: cn("flex-shrink-0", className),
+      style: boxStyle
+    }
+  );
+}
+AtlasImage.displayName = "AtlasImage";
 var variantStyles = {
   primary: [
     "bg-primary text-primary-foreground",
@@ -3152,7 +3487,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React6.isValidElement(value)) {
+  if (React8__default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && isIconLike(value)) {
@@ -3161,7 +3496,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React6.forwardRef(
+var Button = React8__default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -3185,7 +3520,7 @@ var Button = React6.forwardRef(
     const leftIconValue = leftIcon || iconProp;
     const rightIconValue = rightIcon || iconRightProp;
     const px = size === "sm" ? 16 : size === "lg" ? 20 : 16;
-    const resolvedLeftIcon = iconAsset?.url ? /* @__PURE__ */ jsx("img", { src: iconAsset.url, alt: iconAsset.name ?? iconAsset.category ?? "", width: px, height: px, style: { imageRendering: "pixelated", objectFit: "contain", width: px, height: px }, className: "flex-shrink-0" }) : resolveIconProp(leftIconValue, iconSizeStyles[size]);
+    const resolvedLeftIcon = iconAsset?.url ? /* @__PURE__ */ jsx(AtlasImage, { asset: iconAsset, size: px, alt: iconAsset.name ?? iconAsset.category ?? "", className: "flex-shrink-0" }) : resolveIconProp(leftIconValue, iconSizeStyles[size]);
     const resolvedRightIcon = resolveIconProp(rightIconValue, iconSizeStyles[size]);
     const handleClick = (e) => {
       if (action) {
@@ -3309,7 +3644,7 @@ var Typography = ({
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component2 = as || defaultElements[variant];
-  return React6.createElement(
+  return React8__default.createElement(
     Component2,
     {
       id,
@@ -3382,7 +3717,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 React6.createElement(
+  return React8__default.createElement(
     Component2,
     {
       className: cn(
@@ -3757,7 +4092,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React6.forwardRef(
+var Box = React8__default.forwardRef(
   ({
     padding,
     paddingX,
@@ -3822,7 +4157,7 @@ var Box = React6.forwardRef(
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
     const isClickable = action || onClick;
-    return React6.createElement(
+    return React8__default.createElement(
       Component2,
       {
         ref,
@@ -6610,7 +6945,7 @@ var Avl3DViewer = ({
   const handleTraitClick = useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const [highlightedTrait, setHighlightedTrait] = React6.useState(null);
+  const [highlightedTrait, setHighlightedTrait] = React8__default.useState(null);
   const handleTransitionClick = useCallback((index) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: { x: 0, y: 0 } });
   }, []);
@@ -6697,7 +7032,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__ */ jsxs(React6.Fragment, { children: [
+            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React8__default.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
               i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx(
                 Box,
@@ -6973,4 +7308,4 @@ var SpatialHashGrid = class {
   }
 };
 
-export { AVL_3D_COLORS, AssetLoader, Avl3DApplicationScene, Avl3DContext, Avl3DEffects, Avl3DOrbitalScene, Avl3DTraitScene, Avl3DTransitionScene, Avl3DViewer, CAMERA_POSITIONS, Camera3D, Canvas3D, Canvas3DErrorBoundary, Canvas3DLoadingState, GameBoard3D, GameCanvas3D, GameCanvas3DBattleTemplate, GameCanvas3DCastleTemplate, GameCanvas3DWorldMapTemplate, Lighting3D, ModelLoader, Scene3D, SpatialHashGrid, arcCurve3D, assetLoader, calculateLODLevel, createGridHighlight, cullInstancedMesh, fibonacciSpherePositions, filterByFrustum, getCellsInRadius, getNeighbors, getVisibleIndices, goldenSpiralPositions, gridDistance, gridManhattanDistance, gridToWorld, isInBounds, isInFrustum, normalizeMouseCoordinates, orbitRingPositions, raycastToObjects, raycastToPlane, selfLoopCurve3D, treeLayout3D, updateInstanceLOD, useAssetLoader, useAvl3DConfig, useGameCanvas3DEvents, useRaycaster, useSceneGraph, useThree3 as useThree, worldToGrid };
+export { AVL_3D_COLORS, AssetLoader, Avl3DApplicationScene, Avl3DContext, Avl3DEffects, Avl3DOrbitalScene, Avl3DTraitScene, Avl3DTransitionScene, Avl3DViewer, CAMERA_POSITIONS, Camera3D, Canvas3DErrorBoundary, Canvas3DLoadingState, GameBoard3D, GameCanvas3D, GameCanvas3DBattleTemplate, GameCanvas3DCastleTemplate, GameCanvas3DWorldMapTemplate, Lighting3D, ModelLoader, Scene3D, SpatialHashGrid, arcCurve3D, assetLoader, calculateLODLevel, createGridHighlight, cullInstancedMesh, fibonacciSpherePositions, filterByFrustum, getCellsInRadius, getNeighbors, getVisibleIndices, goldenSpiralPositions, gridDistance, gridManhattanDistance, gridToWorld, isInBounds, isInFrustum, normalizeMouseCoordinates, orbitRingPositions, raycastToObjects, raycastToPlane, selfLoopCurve3D, treeLayout3D, updateInstanceLOD, useAssetLoader, useAvl3DConfig, useGameCanvas3DEvents, useRaycaster, useSceneGraph, useThree3 as useThree, worldToGrid };