@almadar/ui 5.143.0 → 5.145.0

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) {
@@ -16701,9 +16859,11 @@ function Canvas2D({
   const miniMapHeight = gridExtent.height || 10;
   const drawableIsAnimated = (node) => {
     if (node.type === "draw-shape") return isAnimatedShape(node);
+    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);
@@ -17044,6 +17204,7 @@ var init_Canvas2D = __esm({
     init_projector();
     init_paintDispatch();
     init_DrawShape();
+    init_DrawSprite();
     init_DrawGroup();
     init_registry();
     init_hitTest();
@@ -17117,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,
@@ -20105,7 +20267,7 @@ var init_DashboardLayout = __esm({
       }, [isMobile, sidebarOpen]);
       const location = useLocation();
       const ctxPagePath = useCurrentPagePath();
-      const activePath = currentPath ?? ctxPagePath ?? location.pathname;
+      const activePath = (currentPath || void 0) ?? ctxPagePath ?? location.pathname;
       const { user: authUser, signOut: authSignOut } = useAuthContext();
       const user = userProp || (authUser ? {
         name: authUser.displayName || authUser.email?.split("@")[0] || "User",
@@ -20572,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");
@@ -20624,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,
@@ -20777,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);
         }
@@ -20812,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) => {
@@ -26502,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"() {