@almadar/ui 5.142.0 → 5.144.0

package/dist/avl/index.cjs

@@ -4950,6 +4950,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);
@@ -4989,6 +4993,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 };
@@ -5298,7 +5303,7 @@ var init_Button = __esm({
             "data-testid": dataTestId ?? (action ? `action-${action}` : void 0),
             children: [
               isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Loader2, { className: "h-icon-default w-icon-default animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
-              children || label,
+              (Array.isArray(children) ? children.length > 0 : Boolean(children)) ? children : label,
               resolvedRightIcon && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedRightIcon })
             ]
           }
@@ -11042,6 +11047,34 @@ var init_isometric = __esm({
     };
   }
 });
+function isAnimationName(name) {
+  return core.ANIMATION_NAMES.includes(name);
+}
+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({
+  "lib/spriteAnimation.ts"() {
+  }
+});
 
 // lib/gameShared.ts
 var init_gameShared = __esm({
@@ -12902,6 +12935,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;
 }
@@ -12910,6 +12946,7 @@ var init_DrawSprite = __esm({
   "components/game/atoms/DrawSprite.tsx"() {
     "use client";
     init_atlasSlice();
+    init_spriteAnimation();
     init_imageCache();
     init_contract();
     spriteLog = logger.createLogger("almadar:ui:draw-sprite");
@@ -12923,6 +12960,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 r2 = frameRect(frame, def.row, atlas.columns, atlas.frameWidth, atlas.frameHeight);
+          src = { x: r2.sx, y: r2.sy, w: r2.sw, h: r2.sh };
+        }
+      }
       if (!src && isAtlasAsset(node.asset)) {
         const atlas = getAtlas(node.asset.atlas, dctx.invalidate);
         if (!atlas) {
@@ -13214,6 +13268,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 = React94.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 num = {};
+  for (const key of NUMERIC_TRACKS2) {
+    const v = trackValue(key);
+    if (v !== void 0) num[key] = v;
+  }
+  return {
+    offset: [num.offsetX ?? 0, num.offsetY ?? 0, num.offsetZ ?? 0],
+    rotate: [num.rotateX ?? 0, num.rotateY ?? 0, num.rotateZ ?? 0],
+    scale: num.scale ?? 1,
+    opacity: num.opacity,
+    emissiveIntensity: num.emissiveIntensity,
+    color: trackValue("color"),
+    emissive: trackValue("emissive")
+  };
+}
+function DrawMesh(props) {
+  const register = React94.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) {
@@ -13280,18 +13411,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;
@@ -13317,6 +13452,8 @@ var init_paintDispatch = __esm({
     init_DrawSprite();
     init_DrawShape();
     init_DrawText();
+    init_DrawGroup();
+    init_DrawMesh();
     init_DrawSpriteLayer();
     init_DrawShapeLayer();
     init_DrawTextLayer();
@@ -13563,8 +13700,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 = React94.useRef(0);
@@ -13905,6 +14045,8 @@ var init_Canvas2D = __esm({
     init_projector();
     init_paintDispatch();
     init_DrawShape();
+    init_DrawSprite();
+    init_DrawGroup();
     init_registry();
     init_hitTest();
     init_isometric();
@@ -13977,6 +14119,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,
@@ -25246,6 +25389,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");
@@ -25298,6 +25449,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,
@@ -25451,6 +25603,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);
         }
@@ -25486,12 +25639,19 @@ var init_Menu = __esm({
         "bottom-end": "bottom-start"
       };
       const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
-      const triggerChild = React94__namespace.default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", as: "span", children: trigger });
-      const triggerElement = React94__namespace.default.cloneElement(
-        triggerChild,
+      const triggerElement = React94__namespace.default.isValidElement(trigger) ? React94__namespace.default.cloneElement(trigger, {
+        ref: triggerRef,
+        onClick: handleToggle
+      }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Typography, { variant: "small", as: "span", children: trigger }) : trigger
         }
       );
       const renderMenuItems = (menuItems) => menuItems.map((item, index) => {
@@ -40924,28 +41084,6 @@ var init_DetailPanel = __esm({
     DetailPanel.displayName = "DetailPanel";
   }
 });
-function DrawGroup(props) {
-  const register = React94.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 = React94.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 (!React94__namespace.default.isValidElement(children)) return void 0;
   const props = children.props;

package/dist/avl/index.js

@@ -7,7 +7,7 @@ import ELK from 'elkjs/lib/elk.bundled.js';
 import { MarkerType, useReactFlow, Handle, Position, getBezierPath, EdgeLabelRenderer, useNodeId, ReactFlowProvider, BaseEdge, useNodesState, useEdgesState, ReactFlow, Controls, Background, BackgroundVariant } from '@xyflow/react';
 import { useTranslate } from '@almadar/ui/hooks';
 import { InMemoryPersistence, StateMachineManager, collectDeclaredConfigDefaults, resolveCallSitePayloadCaptures, createServerEffectHandlers, EffectExecutor, createContextFromBindings, createTickScheduler, isValidCronExpression, parseDurationString, normalizeCallSiteConfigToValues, interpolateValue } from '@almadar/runtime';
-import { FieldTypeSchema, isInlineTrait, isPageReference, buildResolvedTraitConfigs, schemaToIR, getPage, mergeEntityFrame, isCircuitEvent, applyListenPayloadMapping, walkSExpr, isRenderBindingMarker, containsEntityBinding, isSExpr, isEventPayloadValue, RENDER_BINDING_MARKER } from '@almadar/core';
+import { FieldTypeSchema, isInlineTrait, isPageReference, buildResolvedTraitConfigs, schemaToIR, getPage, mergeEntityFrame, isCircuitEvent, applyListenPayloadMapping, walkSExpr, isRenderBindingMarker, containsEntityBinding, isSExpr, isEventPayloadValue, RENDER_BINDING_MARKER, ANIMATION_NAMES } from '@almadar/core';
 import * as LucideIcons2 from 'lucide-react';
 import { Loader2, X, Code, FileText, WrapText, Check, Copy, Lightbulb, CheckCircle, List, Printer, ChevronRight, ChevronLeft, GitBranch, Pencil, Eye, Plus, ArrowRight, Trash, RotateCcw, Play, Terminal, XCircle, AlertTriangle, Trash2, Link2, ZoomOut, ZoomIn, Download, ChevronDown, Menu as Menu$1, Package, Calendar, MoreHorizontal, Image as Image$1, Upload, ArrowLeft, HelpCircle, PauseCircle, Search, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, Minus, Eraser, TrendingUp, TrendingDown, AlertCircle, Circle, Clock, CheckCircle2, ChevronUp, Tag, User, DollarSign } from 'lucide-react';
 import { createPortal } from 'react-dom';
@@ -4874,6 +4874,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);
@@ -4913,6 +4917,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 };
@@ -5222,7 +5227,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 })
             ]
           }
@@ -10966,6 +10971,34 @@ var init_isometric = __esm({
     };
   }
 });
+function isAnimationName(name) {
+  return ANIMATION_NAMES.includes(name);
+}
+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({
+  "lib/spriteAnimation.ts"() {
+  }
+});
 
 // lib/gameShared.ts
 var init_gameShared = __esm({
@@ -12826,6 +12859,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;
 }
@@ -12834,6 +12870,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");
@@ -12847,6 +12884,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 r2 = frameRect(frame, def.row, atlas.columns, atlas.frameWidth, atlas.frameHeight);
+          src = { x: r2.sx, y: r2.sy, w: r2.sw, h: r2.sh };
+        }
+      }
       if (!src && isAtlasAsset(node.asset)) {
         const atlas = getAtlas(node.asset.atlas, dctx.invalidate);
         if (!atlas) {
@@ -13138,6 +13192,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 num = {};
+  for (const key of NUMERIC_TRACKS2) {
+    const v = trackValue(key);
+    if (v !== void 0) num[key] = v;
+  }
+  return {
+    offset: [num.offsetX ?? 0, num.offsetY ?? 0, num.offsetZ ?? 0],
+    rotate: [num.rotateX ?? 0, num.rotateY ?? 0, num.rotateZ ?? 0],
+    scale: num.scale ?? 1,
+    opacity: num.opacity,
+    emissiveIntensity: num.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) {
@@ -13204,18 +13335,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;
@@ -13241,6 +13376,8 @@ var init_paintDispatch = __esm({
     init_DrawSprite();
     init_DrawShape();
     init_DrawText();
+    init_DrawGroup();
+    init_DrawMesh();
     init_DrawSpriteLayer();
     init_DrawShapeLayer();
     init_DrawTextLayer();
@@ -13487,8 +13624,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);
@@ -13829,6 +13969,8 @@ var init_Canvas2D = __esm({
     init_projector();
     init_paintDispatch();
     init_DrawShape();
+    init_DrawSprite();
+    init_DrawGroup();
     init_registry();
     init_hitTest();
     init_isometric();
@@ -13901,6 +14043,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,
@@ -25170,6 +25313,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");
@@ -25222,6 +25373,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,
@@ -25375,6 +25527,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);
         }
@@ -25410,12 +25563,19 @@ var init_Menu = __esm({
         "bottom-end": "bottom-start"
       };
       const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
-      const triggerChild = React94__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
-      const triggerElement = React94__default.cloneElement(
-        triggerChild,
+      const triggerElement = React94__default.isValidElement(trigger) ? React94__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) => {
@@ -40848,28 +41008,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 (!React94__default.isValidElement(children)) return void 0;
   const props = children.props;