@almadar/ui 5.142.0 → 5.144.0

package/dist/components/index.d.ts

@@ -6,11 +6,11 @@ import { LucideIcon } from 'lucide-react';
 import { C as ColorToken, U as UiError, P as Point, L as LinkAction, I as ImageSource } from '../GameAudioProvider-CPGwD49P.js';
 export { A as AudioManifest, G as GameAudioContext, a as GameAudioContextValue, e as GameAudioControls, b as GameAudioProvider, c as GameAudioProviderProps, R as Rect, S as SoundEntry, f as UseGameAudioOptions, g as useGameAudio, u as useGameAudioContext } from '../GameAudioProvider-CPGwD49P.js';
 import { SExpr } from '@almadar/evaluator';
-import { U as UnitAnimationState, F as FacingDirection, S as SpriteSheetUrls, g as SpriteFrameDims, R as ResolvedFrame, h as CanvasLighting, i as CanvasPost, a as IsometricUnit, j as CameraState, k as FieldInfo, l as OrbitalTraitInfo, m as OrbitalPageInfo, T as TraitLevelData, E as ExternalLink } from '../avl-schema-parser-DAs12kxP.js';
-export { B as BoardTile, G as GameAction, n as GamePhase, o as GameState, p as GameUnit, b as IsometricFeature, I as IsometricTile, P as Position, q as UnitTrait, r as calculateAttackTargets, s as calculateValidMoves, t as createInitialGameState } from '../avl-schema-parser-DAs12kxP.js';
-import { D as DrawableNode } from '../paintDispatch-BQn5Lyx1.js';
-import { C as ContentSegment, b as DomLayoutData, d as DomStateNode, V as VisualizerConfig, e as DomTransitionLabel } from '../cn-BDwC4QpH.js';
-export { n as cn } from '../cn-BDwC4QpH.js';
+import { U as UnitAnimationState, F as FacingDirection, S as SpriteSheetUrls, g as SpriteFrameDims, R as ResolvedFrame, h as CanvasLighting, i as CanvasPost, a as IsometricUnit, j as CameraState, k as FieldInfo, l as OrbitalTraitInfo, m as OrbitalPageInfo, T as TraitLevelData, E as ExternalLink } from '../avl-schema-parser-BRJ77Yze.js';
+export { B as BoardTile, G as GameAction, n as GamePhase, o as GameState, p as GameUnit, b as IsometricFeature, I as IsometricTile, P as Position, q as UnitTrait, r as calculateAttackTargets, s as calculateValidMoves, t as createInitialGameState } from '../avl-schema-parser-BRJ77Yze.js';
+import { D as DrawableNode } from '../paintDispatch-Cb_hQj4Y.js';
+import { C as ContentSegment, b as DomLayoutData, d as DomStateNode, V as VisualizerConfig, e as DomTransitionLabel } from '../cn-DNkqAWZK.js';
+export { n as cn } from '../cn-DNkqAWZK.js';
 import { b as SlotContent } from '../useUISlots-BesZYMks.js';
 export { D as DEFAULT_SLOTS, S as SlotAnimation, a as SlotChangeCallback, c as SlotRenderConfig, U as UISlotManager, u as useUISlotManager } from '../useUISlots-BesZYMks.js';
 export { ALMADAR_DND_MIME, AuthContextValue, AuthUser, CanvasGestureCallbacks, CanvasGestureHandlers, CompileResult, CompileStage, DragReorderResult, DraggablePayload, Extension, ExtensionManifest, FileSystemFile, FileSystemStatus, GitHubRepo, GitHubStatus, HistoryChangeSummary, HistoryTimelineItem, I18nContextValue, I18nProvider, InfiniteScrollOptions, InfiniteScrollResult, LongPressHandlers, LongPressOptions, OpenFile, Positioned, PullToRefreshOptions, PullToRefreshResult, QuerySingletonEntity, QuerySingletonResult, QuerySingletonState, QueryState, RenderInterpolationHandle, RenderInterpolationOptions, RevertResult, SelectedFile, SharedEntityStore, SharedEntityStoreContext, SharedEntitySubscriber, SharedEntityWriter, SwipeGestureOptions, SwipeGestureResult, SwipeHandlers, TapRevealOptions, TapRevealResult, TraitListenSpec, TranslateFunction, UseCanvasGesturesOptions, UseCompileResult, UseDraggableOptions, UseDraggableResult, UseDropZoneOptions, UseDropZoneResult, UseExtensionsOptions, UseExtensionsResult, UseFileEditorOptions, UseFileEditorResult, UseFileSystemResult, UseOrbitalHistoryOptions, UseOrbitalHistoryResult, createSharedEntityStore, createTranslate, parseQueryBinding, runTickFrame, useAgentChat, useAuthContext, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useExtensions, useFileEditor, useFileSystem, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useInfiniteScroll, useLongPress, useMediaQuery, useOrbitalHistory, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSharedEntitySnapshot, useSharedEntityStore, useSharedEntityStoreContext, useSwipeGesture, useTapReveal, useTraitListens, useTranslate, useUIEvents, useValidation } from '../hooks/index.js';
@@ -4367,6 +4367,8 @@ interface MenuItem {
     onClick?: () => void;
     /** Event name for pattern compatibility */
     event?: string;
+    /** File URL this item downloads on pick (gesture-driven, `DocumentViewer` precedent). The item's `event` still emits on the bus. */
+    url?: string;
     /** Variant for styling (pattern compatibility) */
     variant?: "default" | "danger";
     /** Sub-menu items */
@@ -6519,7 +6521,7 @@ interface DataGridProps extends DataDndProps {
      */
     look?: "dense" | "spacious" | "striped" | "borderless" | "card-rows";
 }
-declare function DataGrid({ entity, fields, columns, itemActions, maxInlineActions, scrollX, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataGridProps): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null | undefined;
+declare function DataGrid({ entity, fields, columns, itemActions, maxInlineActions, scrollX, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataGridProps): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
 declare namespace DataGrid {
     var displayName: string;
 }
@@ -6672,7 +6674,7 @@ interface DataListProps extends DataDndProps {
      */
     look?: "dense" | "spacious" | "striped" | "borderless" | "card-rows";
 }
-declare function DataList({ entity, fields, columns, itemActions, maxInlineActions, itemClickEvent, gap, variant, groupBy, senderField, senderLabelField, currentUser, emptyMessage, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, sortBy, sortDirection, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataListProps): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null | undefined;
+declare function DataList({ entity, fields, columns, itemActions, maxInlineActions, itemClickEvent, gap, variant, groupBy, senderField, senderLabelField, currentUser, emptyMessage, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, sortBy, sortDirection, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataListProps): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
 declare namespace DataList {
     var displayName: string;
 }

package/dist/components/index.js

@@ -12,7 +12,7 @@ import { useTranslate } from '@almadar/ui/hooks';
 import { useUISlots, useTheme } from '@almadar/ui/context';
 import { evaluate, createMinimalContext } from '@almadar/evaluator';
 import { createContextFromBindings, interpolateValue } from '@almadar/runtime';
-import { mergeEntityFrame, isInlineTrait, isRenderBindingMarker } from '@almadar/core';
+import { mergeEntityFrame, isInlineTrait, isRenderBindingMarker, ANIMATION_NAMES } from '@almadar/core';
 import { createPortal } from 'react-dom';
 import { wrapCallbackForEvent } from '@almadar/runtime/ui';
 import { Link, Outlet, useLocation } from 'react-router-dom';
@@ -1451,6 +1451,10 @@ var init_Icon = __esm({
 function isTilesheet(a) {
   return typeof a.tileWidth === "number";
 }
+function isSpriteSheetAtlas(a) {
+  const s = a;
+  return typeof s.frameWidth === "number" && typeof s.frameHeight === "number" && typeof s.animations === "object";
+}
 function getAtlas(url, onReady) {
   if (atlasCache.has(url)) return atlasCache.get(url) ?? void 0;
   atlasCache.set(url, void 0);
@@ -1490,6 +1494,7 @@ function subRectFor(atlas, sprite) {
       sh: atlas.tileHeight
     };
   }
+  if (isSpriteSheetAtlas(atlas)) return null;
   const st = atlas.subTextures[sprite];
   if (!st) return null;
   return { sx: st.x, sy: st.y, sw: st.width, sh: st.height };
@@ -1799,7 +1804,7 @@ var init_Button = __esm({
             "data-testid": dataTestId ?? (action ? `action-${action}` : void 0),
             children: [
               isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-icon-default w-icon-default animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
-              children || label,
+              (Array.isArray(children) ? children.length > 0 : Boolean(children)) ? children : label,
               resolvedRightIcon && !isLoading && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedRightIcon })
             ]
           }
@@ -15946,6 +15951,138 @@ var init_contract = __esm({
   "lib/drawable/contract.ts"() {
   }
 });
+
+// lib/spriteSheetConstants.ts
+var SHEET_COLUMNS, SPRITE_SHEET_LAYOUT;
+var init_spriteSheetConstants = __esm({
+  "lib/spriteSheetConstants.ts"() {
+    SHEET_COLUMNS = 8;
+    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 }
+    };
+  }
+});
+function isAnimationName(name) {
+  return ANIMATION_NAMES.includes(name);
+}
+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(SPRITE_SHEET_LAYOUT[animName], elapsed);
+}
+function resolveFrame(sheetUrls, frameDims, animState) {
+  if (!sheetUrls) return null;
+  const real = sheetUrls[animState.direction];
+  const { sheetUrl, flipX } = real ? { sheetUrl: real, flipX: false } : (() => {
+    const legacy = resolveSheetDirection(animState.direction);
+    return { sheetUrl: sheetUrls[legacy.sheetDir], flipX: legacy.flipX };
+  })();
+  if (!sheetUrl) return null;
+  const def = 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 && 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 };
+}
+var init_spriteAnimation = __esm({
+  "lib/spriteAnimation.ts"() {
+    init_spriteSheetConstants();
+  }
+});
 function warnMissingOnce(reason, node) {
   const key = `${reason}:${node.asset.url}:${String(node.asset.atlas)}:${String(node.asset.sprite)}`;
   if (loggedMissing.has(key)) return;
@@ -15963,6 +16100,9 @@ function paintFallbackSquare(painter, node, dctx, reason) {
   painter.strokeRect(rect.x, rect.y, rect.w, rect.h, "#5e564b", Math.max(1, tw / 32));
   painter.restore();
 }
+function isAnimatedSprite(node) {
+  return node.animation !== void 0 && typeof node.asset?.atlas === "string";
+}
 function DrawSprite(_props) {
   return null;
 }
@@ -15971,6 +16111,7 @@ var init_DrawSprite = __esm({
   "components/game/atoms/DrawSprite.tsx"() {
     "use client";
     init_atlasSlice();
+    init_spriteAnimation();
     init_imageCache();
     init_contract();
     spriteLog = createLogger("almadar:ui:draw-sprite");
@@ -15984,6 +16125,23 @@ var init_DrawSprite = __esm({
         return;
       }
       let src = typeof node.frame === "object" ? node.frame : void 0;
+      if (!src && node.animation !== void 0 && typeof node.asset.atlas === "string") {
+        const atlas = getAtlas(node.asset.atlas, dctx.invalidate);
+        if (!atlas) {
+          if (atlasFailed(node.asset.atlas)) paintFallbackSquare(painter, node, dctx, "atlas-failed");
+          return;
+        }
+        if (isSpriteSheetAtlas(atlas)) {
+          const def = isAnimationName(node.animation) ? atlas.animations[node.animation] : void 0;
+          if (!def) {
+            paintFallbackSquare(painter, node, dctx, "sprite-missing");
+            return;
+          }
+          const { frame } = getCurrentFrameFromDef(node.loop === void 0 ? def : { ...def, loop: node.loop }, dctx.time);
+          const r = frameRect(frame, def.row, atlas.columns, atlas.frameWidth, atlas.frameHeight);
+          src = { x: r.sx, y: r.sy, w: r.sw, h: r.sh };
+        }
+      }
       if (!src && isAtlasAsset(node.asset)) {
         const atlas = getAtlas(node.asset.atlas, dctx.invalidate);
         if (!atlas) {
@@ -16269,6 +16427,83 @@ var init_DrawText = __esm({
     };
   }
 });
+function isAnimatedGroup(node) {
+  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
+}
+function DrawGroup(props) {
+  const register = useContext(DrawableRegistryContext);
+  if (register) register({ ...props, type: "draw-group" });
+  return null;
+}
+var init_DrawGroup = __esm({
+  "components/game/atoms/DrawGroup.tsx"() {
+    "use client";
+    init_registry();
+  }
+});
+function applyMeshAnimation(node, timeMs) {
+  const anim = node.animation;
+  if (!anim || !(anim.durationMs > 0) || anim.keyframes.length === 0) return null;
+  const frames = [...anim.keyframes].sort((a, b) => a.at - b.at);
+  const cycle = timeMs / anim.durationMs;
+  const t = anim.loop === false ? Math.min(cycle, 1) : cycle - Math.floor(cycle);
+  const trackValue = (key) => {
+    const defined = frames.filter((f3) => f3[key] !== void 0);
+    if (defined.length === 0) return void 0;
+    let prev;
+    let next;
+    for (const f3 of defined) {
+      if (f3.at <= t) prev = f3;
+      else if (!next) next = f3;
+    }
+    if (!prev) return defined[0][key];
+    if (!next) return prev[key];
+    const span = next.at - prev.at;
+    const k = span > 0 ? (t - prev.at) / span : 1;
+    const a = prev[key];
+    const b = next[key];
+    if (typeof a === "number" && typeof b === "number") return lerp2(a, b, k);
+    return a;
+  };
+  const num2 = {};
+  for (const key of NUMERIC_TRACKS2) {
+    const v = trackValue(key);
+    if (v !== void 0) num2[key] = v;
+  }
+  return {
+    offset: [num2.offsetX ?? 0, num2.offsetY ?? 0, num2.offsetZ ?? 0],
+    rotate: [num2.rotateX ?? 0, num2.rotateY ?? 0, num2.rotateZ ?? 0],
+    scale: num2.scale ?? 1,
+    opacity: num2.opacity,
+    emissiveIntensity: num2.emissiveIntensity,
+    color: trackValue("color"),
+    emissive: trackValue("emissive")
+  };
+}
+function DrawMesh(props) {
+  const register = useContext(DrawableRegistryContext);
+  if (register) register({ ...props, type: "draw-mesh" });
+  return null;
+}
+var lerp2, NUMERIC_TRACKS2;
+var init_DrawMesh = __esm({
+  "components/game/atoms/DrawMesh.tsx"() {
+    "use client";
+    init_registry();
+    lerp2 = (a, b, k) => a + (b - a) * k;
+    NUMERIC_TRACKS2 = [
+      "offsetX",
+      "offsetY",
+      "offsetZ",
+      "rotateX",
+      "rotateY",
+      "rotateZ",
+      "scale",
+      "opacity",
+      "emissiveIntensity"
+    ];
+  }
+});
 
 // components/game/molecules/DrawSpriteLayer.tsx
 function DrawSpriteLayer(_props) {
@@ -16335,18 +16570,22 @@ function paintDrawable(painter, node, dctx) {
       if (!isValidScenePos(node.position)) break;
       if (!Array.isArray(node.items)) break;
       const p = dctx.projector.project(node.position);
+      const anim = dctx.time > 0 && isAnimatedGroup(node) ? applyMeshAnimation(node, dctx.time) : null;
+      const tw = dctx.projector.tileWidth;
       painter.save();
-      painter.translate(p.x, p.y);
-      if (node.scale !== void 0) painter.scale(node.scale, node.scale);
-      if (node.rotate !== void 0) painter.rotate(node.rotate);
-      if (node.opacity !== void 0 && node.opacity !== 1) painter.setAlpha(node.opacity);
+      painter.translate(p.x + (anim ? anim.offset[0] * tw : 0), p.y + (anim ? anim.offset[1] * tw : 0));
+      const scale = (node.scale ?? 1) * (anim?.scale ?? 1);
+      if (scale !== 1) painter.scale(scale, scale);
+      const rotate = (node.rotate ?? 0) + (node.rotation?.[2] ?? 0) + (anim?.rotate[2] ?? 0);
+      if (rotate !== 0) painter.rotate(rotate);
+      const opacity = (node.opacity ?? 1) * (anim?.opacity ?? 1);
+      if (opacity !== 1) painter.setAlpha(opacity);
       if (node.clip) {
-        const tw = dctx.projector.tileWidth;
         painter.scale(tw, tw);
         painter.clipPath(node.clip);
         painter.scale(1 / tw, 1 / tw);
       }
-      const childCtx = node.scale !== void 0 && node.scale !== 1 ? { ...dctx, groupScale: (dctx.groupScale ?? 1) * node.scale } : dctx;
+      const childCtx = scale !== 1 ? { ...dctx, groupScale: (dctx.groupScale ?? 1) * scale } : dctx;
       for (const item of node.items) paintDrawable(painter, item, childCtx);
       painter.restore();
       break;
@@ -16372,6 +16611,8 @@ var init_paintDispatch = __esm({
     init_DrawSprite();
     init_DrawShape();
     init_DrawText();
+    init_DrawGroup();
+    init_DrawMesh();
     init_DrawSpriteLayer();
     init_DrawShapeLayer();
     init_DrawTextLayer();
@@ -16618,8 +16859,11 @@ function Canvas2D({
   const miniMapHeight = gridExtent.height || 10;
   const drawableIsAnimated = (node) => {
     if (node.type === "draw-shape") return isAnimatedShape(node);
-    if (node.type === "draw-group") return Array.isArray(node.items) && node.items.some(drawableIsAnimated);
+    if (node.type === "draw-sprite") return isAnimatedSprite(node);
+    if (node.type === "draw-group")
+      return isAnimatedGroup(node) || Array.isArray(node.items) && node.items.some(drawableIsAnimated);
     if (node.type === "draw-shape-layer") return Array.isArray(node.items) && node.items.some(isAnimatedShape);
+    if (node.type === "draw-sprite-layer") return Array.isArray(node.items) && node.items.some(isAnimatedSprite);
     return false;
   };
   const animRafRef = useRef(0);
@@ -16960,6 +17204,8 @@ var init_Canvas2D = __esm({
     init_projector();
     init_paintDispatch();
     init_DrawShape();
+    init_DrawSprite();
+    init_DrawGroup();
     init_registry();
     init_hitTest();
     init_isometric();
@@ -17032,6 +17278,7 @@ function Canvas({
       cameraMode: to3DCameraMode(camera?.mode),
       ...zoom !== void 0 ? { scale: zoom } : {},
       ...camera?.fov !== void 0 ? { fov: camera.fov } : {},
+      ...camera?.azimuth !== void 0 ? { azimuth: camera.azimuth } : {},
       ...camera?.target !== void 0 ? { followTarget: camera.target } : {},
       unitScale,
       backgroundColor,
@@ -20487,6 +20734,14 @@ var init_DashboardLayout = __esm({
     NavLinkBottom.displayName = "NavLinkBottom";
   }
 });
+function downloadItemUrl(url, label) {
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = url.startsWith("data:") ? label : url.split("/").pop() ?? "download";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+}
 function computeMenuStyle(position, triggerRect) {
   const isTop = position.startsWith("top");
   const isRight = position.endsWith("right") || position.endsWith("end");
@@ -20539,6 +20794,7 @@ function SubMenu({
             onClick: () => {
               if (item.disabled) return;
               if (item.event) eventBus.emit(`UI:${item.event}`, { itemId, label: item.label });
+              if (item.url) downloadItemUrl(item.url, item.label);
               item.onClick?.();
             },
             "aria-disabled": item.disabled || void 0,
@@ -20692,6 +20948,7 @@ var init_Menu = __esm({
           setActiveSubMenu(itemId);
         } else {
           if (item.event) eventBus.emit(`UI:${item.event}`, { itemId, label: item.label });
+          if (item.url) downloadItemUrl(item.url, item.label);
           item.onClick?.();
           setIsOpen(false);
         }
@@ -20727,12 +20984,19 @@ var init_Menu = __esm({
         "bottom-end": "bottom-start"
       };
       const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
-      const triggerChild = React77__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
-      const triggerElement = React77__default.cloneElement(
-        triggerChild,
+      const triggerElement = React77__default.isValidElement(trigger) ? React77__default.cloneElement(trigger, {
+        ref: triggerRef,
+        onClick: handleToggle
+      }) : /* @__PURE__ */ jsx(
+        Box,
         {
-          ref: triggerRef,
-          onClick: handleToggle
+          as: "span",
+          ref: (el) => {
+            triggerRef.current = el;
+          },
+          onClick: handleToggle,
+          className: "inline-flex",
+          children: typeof trigger === "string" || typeof trigger === "number" ? /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger }) : trigger
         }
       );
       const renderMenuItems = (menuItems) => menuItems.map((item, index) => {
@@ -26417,134 +26681,6 @@ var init_makeAsset = __esm({
   }
 });
 
-// lib/spriteSheetConstants.ts
-var SHEET_COLUMNS, SPRITE_SHEET_LAYOUT;
-var init_spriteSheetConstants = __esm({
-  "lib/spriteSheetConstants.ts"() {
-    SHEET_COLUMNS = 8;
-    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 }
-    };
-  }
-});
-
-// lib/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(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 = 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 && 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 };
-}
-var init_spriteAnimation = __esm({
-  "lib/spriteAnimation.ts"() {
-    init_spriteSheetConstants();
-  }
-});
-
 // lib/gameShared.ts
 var init_gameShared = __esm({
   "lib/gameShared.ts"() {
@@ -40274,28 +40410,6 @@ var init_DetailPanel = __esm({
     DetailPanel.displayName = "DetailPanel";
   }
 });
-function DrawGroup(props) {
-  const register = useContext(DrawableRegistryContext);
-  if (register) register({ ...props, type: "draw-group" });
-  return null;
-}
-var init_DrawGroup = __esm({
-  "components/game/atoms/DrawGroup.tsx"() {
-    "use client";
-    init_registry();
-  }
-});
-function DrawMesh(props) {
-  const register = useContext(DrawableRegistryContext);
-  if (register) register({ ...props, type: "draw-mesh" });
-  return null;
-}
-var init_DrawMesh = __esm({
-  "components/game/atoms/DrawMesh.tsx"() {
-    "use client";
-    init_registry();
-  }
-});
 function extractTitle(children) {
   if (!React77__default.isValidElement(children)) return void 0;
   const props = children.props;