@almadar/ui 5.40.0 → 5.42.0

package/dist/avl/index.cjs

@@ -11225,6 +11225,7 @@ var init_ResourceCounter = __esm({
   }
 });
 function ItemSlot({
+  assetUrl = DEFAULT_ASSET_URL,
   icon = "sword",
   label = "Iron Sword",
   quantity,
@@ -11236,6 +11237,7 @@ function ItemSlot({
   className
 }) {
   const isClickable = onClick != null;
+  const px = assetSizeMap[size];
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -11256,7 +11258,17 @@ function ItemSlot({
         className
       ),
       children: empty ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-base", children: "+" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) }),
+        assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: assetUrl,
+            alt: label,
+            width: px,
+            height: px,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: "flex-shrink-0"
+          }
+        ) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) }) : null,
         quantity != null && quantity > 1 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -11272,7 +11284,7 @@ function ItemSlot({
     }
   );
 }
-var sizeMap6, rarityBorderMap, rarityGlowMap;
+var sizeMap6, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL, assetSizeMap;
 var init_ItemSlot = __esm({
   "components/game/atoms/ItemSlot.tsx"() {
     "use client";
@@ -11297,6 +11309,12 @@ var init_ItemSlot = __esm({
       epic: "shadow-lg",
       legendary: "shadow-lg"
     };
+    DEFAULT_ASSET_URL = "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png";
+    assetSizeMap = {
+      sm: 28,
+      md: 40,
+      lg: 56
+    };
     ItemSlot.displayName = "ItemSlot";
   }
 });
@@ -46853,6 +46871,10 @@ function SequencerBoard({
   stepDurationMs = 1e3,
   playEvent,
   completeEvent,
+  placeEvent,
+  removeEvent,
+  checkEvent,
+  playAgainEvent,
   className
 }) {
   const { emit } = useEventBus();
@@ -46888,7 +46910,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "drop_slot" });
-  }, [emit]);
+    if (placeEvent) emit(`UI:${placeEvent}`, { slotIndex: index, actionId: item.id });
+  }, [emit, placeEvent]);
   const handleSlotRemove = React91.useCallback((index) => {
     setSlots((prev) => {
       const next = [...prev];
@@ -46901,7 +46924,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "back" });
-  }, [emit]);
+    if (removeEvent) emit(`UI:${removeEvent}`, { slotIndex: index });
+  }, [emit, removeEvent]);
   const handleReset = React91.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setSlots(Array.from({ length: maxSlots }, () => void 0));
@@ -46909,7 +46933,8 @@ function SequencerBoard({
     setCurrentStep(-1);
     setAttempts(0);
     setSlotFeedback(Array.from({ length: maxSlots }, () => null));
-  }, [maxSlots]);
+    if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
+  }, [maxSlots, playAgainEvent, emit]);
   const filledSlots = slots.filter((s) => !!s);
   const canPlay = filledSlots.length > 0 && playState === "idle";
   const handlePlay = React91.useCallback(() => {
@@ -46931,6 +46956,7 @@ function SequencerBoard({
         const success = solutions.some(
           (sol) => sol.length === playerIds.length && sol.every((id, i) => id === playerIds[i])
         );
+        if (checkEvent) emit(`UI:${checkEvent}`, { sequence: playerIds });
         if (success) {
           setPlayState("success");
           setCurrentStep(-1);
@@ -46958,7 +46984,7 @@ function SequencerBoard({
       }
     };
     timerRef.current = setTimeout(advance, stepDurationMs);
-  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, emit]);
+  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, checkEvent, emit]);
   const machine = {
     name: str(resolved?.title),
     description: str(resolved?.description),

package/dist/avl/index.js

@@ -11179,6 +11179,7 @@ var init_ResourceCounter = __esm({
   }
 });
 function ItemSlot({
+  assetUrl = DEFAULT_ASSET_URL,
   icon = "sword",
   label = "Iron Sword",
   quantity,
@@ -11190,6 +11191,7 @@ function ItemSlot({
   className
 }) {
   const isClickable = onClick != null;
+  const px = assetSizeMap[size];
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -11210,7 +11212,17 @@ function ItemSlot({
         className
       ),
       children: empty ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-base", children: "+" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }),
+        assetUrl ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: assetUrl,
+            alt: label,
+            width: px,
+            height: px,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: "flex-shrink-0"
+          }
+        ) : icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
         quantity != null && quantity > 1 && /* @__PURE__ */ jsx(
           "span",
           {
@@ -11226,7 +11238,7 @@ function ItemSlot({
     }
   );
 }
-var sizeMap6, rarityBorderMap, rarityGlowMap;
+var sizeMap6, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL, assetSizeMap;
 var init_ItemSlot = __esm({
   "components/game/atoms/ItemSlot.tsx"() {
     "use client";
@@ -11251,6 +11263,12 @@ var init_ItemSlot = __esm({
       epic: "shadow-lg",
       legendary: "shadow-lg"
     };
+    DEFAULT_ASSET_URL = "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png";
+    assetSizeMap = {
+      sm: 28,
+      md: 40,
+      lg: 56
+    };
     ItemSlot.displayName = "ItemSlot";
   }
 });
@@ -46807,6 +46825,10 @@ function SequencerBoard({
   stepDurationMs = 1e3,
   playEvent,
   completeEvent,
+  placeEvent,
+  removeEvent,
+  checkEvent,
+  playAgainEvent,
   className
 }) {
   const { emit } = useEventBus();
@@ -46842,7 +46864,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "drop_slot" });
-  }, [emit]);
+    if (placeEvent) emit(`UI:${placeEvent}`, { slotIndex: index, actionId: item.id });
+  }, [emit, placeEvent]);
   const handleSlotRemove = useCallback((index) => {
     setSlots((prev) => {
       const next = [...prev];
@@ -46855,7 +46878,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "back" });
-  }, [emit]);
+    if (removeEvent) emit(`UI:${removeEvent}`, { slotIndex: index });
+  }, [emit, removeEvent]);
   const handleReset = useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setSlots(Array.from({ length: maxSlots }, () => void 0));
@@ -46863,7 +46887,8 @@ function SequencerBoard({
     setCurrentStep(-1);
     setAttempts(0);
     setSlotFeedback(Array.from({ length: maxSlots }, () => null));
-  }, [maxSlots]);
+    if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
+  }, [maxSlots, playAgainEvent, emit]);
   const filledSlots = slots.filter((s) => !!s);
   const canPlay = filledSlots.length > 0 && playState === "idle";
   const handlePlay = useCallback(() => {
@@ -46885,6 +46910,7 @@ function SequencerBoard({
         const success = solutions.some(
           (sol) => sol.length === playerIds.length && sol.every((id, i) => id === playerIds[i])
         );
+        if (checkEvent) emit(`UI:${checkEvent}`, { sequence: playerIds });
         if (success) {
           setPlayState("success");
           setCurrentStep(-1);
@@ -46912,7 +46938,7 @@ function SequencerBoard({
       }
     };
     timerRef.current = setTimeout(advance, stepDurationMs);
-  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, emit]);
+  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, checkEvent, emit]);
   const machine = {
     name: str(resolved?.title),
     description: str(resolved?.description),

package/dist/components/game/atoms/ItemSlot.d.ts

@@ -1,6 +1,9 @@
 import { type IconInput } from '../../core/atoms/Icon';
+import type { AssetUrl } from '@almadar/core';
 export interface ItemSlotProps {
-    /** Icon component or emoji */
+    /** Sprite image URL — takes precedence over icon when provided */
+    assetUrl?: AssetUrl;
+    /** Icon component or emoji — shown only when assetUrl is absent */
     icon?: IconInput;
     /** Item label */
     label?: string;
@@ -19,7 +22,7 @@ export interface ItemSlotProps {
     /** Additional CSS classes */
     className?: string;
 }
-export declare function ItemSlot({ icon, label, quantity, rarity, empty, size, selected, onClick, className, }: ItemSlotProps): import("react/jsx-runtime").JSX.Element;
+export declare function ItemSlot({ assetUrl, icon, label, quantity, rarity, empty, size, selected, onClick, className, }: ItemSlotProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ItemSlot {
     var displayName: string;
 }

package/dist/components/game/organisms/UncontrolledBattleBoard.d.ts

@@ -14,7 +14,7 @@
  * @packageDocumentation
  */
 import * as React from 'react';
-import type { EntityRow } from '@almadar/core';
+import type { EntityRow, EventEmit } from '@almadar/core';
 import { type BattleBoardProps } from './BattleBoard';
 import type { IsometricTile, IsometricUnit, IsometricFeature } from './types/isometric';
 export interface UncontrolledBattleBoardProps extends Omit<BattleBoardProps, 'entity'> {
@@ -27,6 +27,14 @@ export interface UncontrolledBattleBoardProps extends Omit<BattleBoardProps, 'en
     features?: IsometricFeature[];
     /** Direct asset manifest — takes priority over entity-derived manifest. */
     assetManifest?: BattleBoardProps['assetManifest'];
+    /** Emits UI:{stepEvent} with { attackerId, targetId, damage } each battle round */
+    stepEvent?: EventEmit<{
+        attackerId: string;
+        targetId: string;
+        damage: number;
+    }>;
+    /** Emits UI:{playAgainEvent} with {} on restart */
+    playAgainEvent?: EventEmit<Record<string, never>>;
 }
 export declare function UncontrolledBattleBoard({ entity, tiles, units, features, assetManifest, ...rest }: UncontrolledBattleBoardProps): React.JSX.Element | null;
 export declare namespace UncontrolledBattleBoard {

package/dist/components/game/organisms/puzzles/sequencer/SequencerBoard.d.ts

@@ -42,8 +42,23 @@ export interface SequencerBoardProps extends DisplayStateProps {
         success: boolean;
         sequence: string[];
     }>;
+    /** Emits UI:{placeEvent} with { slotIndex, actionId } when an action is dropped into a slot */
+    placeEvent?: EventEmit<{
+        slotIndex: number;
+        actionId: string;
+    }>;
+    /** Emits UI:{removeEvent} with { slotIndex } when an action is removed from a slot */
+    removeEvent?: EventEmit<{
+        slotIndex: number;
+    }>;
+    /** Emits UI:{checkEvent} with { sequence } when the player submits the sequence */
+    checkEvent?: EventEmit<{
+        sequence: string[];
+    }>;
+    /** Emits UI:{playAgainEvent} with {} on reset */
+    playAgainEvent?: EventEmit<Record<string, never>>;
 }
-export declare function SequencerBoard({ entity, categoryColors, stepDurationMs, playEvent, completeEvent, className, }: SequencerBoardProps): React.JSX.Element | null;
+export declare function SequencerBoard({ entity, categoryColors, stepDurationMs, playEvent, completeEvent, placeEvent, removeEvent, checkEvent, playAgainEvent, className, }: SequencerBoardProps): React.JSX.Element | null;
 export declare namespace SequencerBoard {
     var displayName: string;
 }

package/dist/components/index.cjs

@@ -20649,6 +20649,7 @@ var init_CounterTemplate = __esm({
   }
 });
 function ItemSlot({
+  assetUrl = DEFAULT_ASSET_URL,
   icon = "sword",
   label = "Iron Sword",
   quantity,
@@ -20660,6 +20661,7 @@ function ItemSlot({
   className
 }) {
   const isClickable = onClick != null;
+  const px = assetSizeMap[size];
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -20680,7 +20682,17 @@ function ItemSlot({
         className
       ),
       children: empty ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-base", children: "+" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { icon }) }),
+        assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: assetUrl,
+            alt: label,
+            width: px,
+            height: px,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: "flex-shrink-0"
+          }
+        ) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { icon }) }) : null,
         quantity != null && quantity > 1 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -20696,7 +20708,7 @@ function ItemSlot({
     }
   );
 }
-var sizeMap5, rarityBorderMap, rarityGlowMap;
+var sizeMap5, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL, assetSizeMap;
 var init_ItemSlot = __esm({
   "components/game/atoms/ItemSlot.tsx"() {
     "use client";
@@ -20721,6 +20733,12 @@ var init_ItemSlot = __esm({
       epic: "shadow-lg",
       legendary: "shadow-lg"
     };
+    DEFAULT_ASSET_URL = "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png";
+    assetSizeMap = {
+      sm: 28,
+      md: 40,
+      lg: 56
+    };
     ItemSlot.displayName = "ItemSlot";
   }
 });
@@ -45490,6 +45508,10 @@ function SequencerBoard({
   stepDurationMs = 1e3,
   playEvent,
   completeEvent,
+  placeEvent,
+  removeEvent,
+  checkEvent,
+  playAgainEvent,
   className
 }) {
   const { emit } = useEventBus();
@@ -45525,7 +45547,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "drop_slot" });
-  }, [emit]);
+    if (placeEvent) emit(`UI:${placeEvent}`, { slotIndex: index, actionId: item.id });
+  }, [emit, placeEvent]);
   const handleSlotRemove = React77.useCallback((index) => {
     setSlots((prev) => {
       const next = [...prev];
@@ -45538,7 +45561,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "back" });
-  }, [emit]);
+    if (removeEvent) emit(`UI:${removeEvent}`, { slotIndex: index });
+  }, [emit, removeEvent]);
   const handleReset = React77.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setSlots(Array.from({ length: maxSlots }, () => void 0));
@@ -45546,7 +45570,8 @@ function SequencerBoard({
     setCurrentStep(-1);
     setAttempts(0);
     setSlotFeedback(Array.from({ length: maxSlots }, () => null));
-  }, [maxSlots]);
+    if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
+  }, [maxSlots, playAgainEvent, emit]);
   const filledSlots = slots.filter((s) => !!s);
   const canPlay = filledSlots.length > 0 && playState === "idle";
   const handlePlay = React77.useCallback(() => {
@@ -45568,6 +45593,7 @@ function SequencerBoard({
         const success = solutions.some(
           (sol) => sol.length === playerIds.length && sol.every((id, i) => id === playerIds[i])
         );
+        if (checkEvent) emit(`UI:${checkEvent}`, { sequence: playerIds });
         if (success) {
           setPlayState("success");
           setCurrentStep(-1);
@@ -45595,7 +45621,7 @@ function SequencerBoard({
       }
     };
     timerRef.current = setTimeout(advance, stepDurationMs);
-  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, emit]);
+  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, checkEvent, emit]);
   const machine = {
     name: str(resolved?.title),
     description: str(resolved?.description),

package/dist/components/index.js

@@ -20604,6 +20604,7 @@ var init_CounterTemplate = __esm({
   }
 });
 function ItemSlot({
+  assetUrl = DEFAULT_ASSET_URL,
   icon = "sword",
   label = "Iron Sword",
   quantity,
@@ -20615,6 +20616,7 @@ function ItemSlot({
   className
 }) {
   const isClickable = onClick != null;
+  const px = assetSizeMap[size];
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -20635,7 +20637,17 @@ function ItemSlot({
         className
       ),
       children: empty ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-base", children: "+" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }),
+        assetUrl ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: assetUrl,
+            alt: label,
+            width: px,
+            height: px,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: "flex-shrink-0"
+          }
+        ) : icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
         quantity != null && quantity > 1 && /* @__PURE__ */ jsx(
           "span",
           {
@@ -20651,7 +20663,7 @@ function ItemSlot({
     }
   );
 }
-var sizeMap5, rarityBorderMap, rarityGlowMap;
+var sizeMap5, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL, assetSizeMap;
 var init_ItemSlot = __esm({
   "components/game/atoms/ItemSlot.tsx"() {
     "use client";
@@ -20676,6 +20688,12 @@ var init_ItemSlot = __esm({
       epic: "shadow-lg",
       legendary: "shadow-lg"
     };
+    DEFAULT_ASSET_URL = "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png";
+    assetSizeMap = {
+      sm: 28,
+      md: 40,
+      lg: 56
+    };
     ItemSlot.displayName = "ItemSlot";
   }
 });
@@ -45445,6 +45463,10 @@ function SequencerBoard({
   stepDurationMs = 1e3,
   playEvent,
   completeEvent,
+  placeEvent,
+  removeEvent,
+  checkEvent,
+  playAgainEvent,
   className
 }) {
   const { emit } = useEventBus();
@@ -45480,7 +45502,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "drop_slot" });
-  }, [emit]);
+    if (placeEvent) emit(`UI:${placeEvent}`, { slotIndex: index, actionId: item.id });
+  }, [emit, placeEvent]);
   const handleSlotRemove = useCallback((index) => {
     setSlots((prev) => {
       const next = [...prev];
@@ -45493,7 +45516,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "back" });
-  }, [emit]);
+    if (removeEvent) emit(`UI:${removeEvent}`, { slotIndex: index });
+  }, [emit, removeEvent]);
   const handleReset = useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setSlots(Array.from({ length: maxSlots }, () => void 0));
@@ -45501,7 +45525,8 @@ function SequencerBoard({
     setCurrentStep(-1);
     setAttempts(0);
     setSlotFeedback(Array.from({ length: maxSlots }, () => null));
-  }, [maxSlots]);
+    if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
+  }, [maxSlots, playAgainEvent, emit]);
   const filledSlots = slots.filter((s) => !!s);
   const canPlay = filledSlots.length > 0 && playState === "idle";
   const handlePlay = useCallback(() => {
@@ -45523,6 +45548,7 @@ function SequencerBoard({
         const success = solutions.some(
           (sol) => sol.length === playerIds.length && sol.every((id, i) => id === playerIds[i])
         );
+        if (checkEvent) emit(`UI:${checkEvent}`, { sequence: playerIds });
         if (success) {
           setPlayState("success");
           setCurrentStep(-1);
@@ -45550,7 +45576,7 @@ function SequencerBoard({
       }
     };
     timerRef.current = setTimeout(advance, stepDurationMs);
-  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, emit]);
+  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, checkEvent, emit]);
   const machine = {
     name: str(resolved?.title),
     description: str(resolved?.description),

package/dist/providers/index.cjs

@@ -7575,6 +7575,7 @@ var init_ResourceCounter = __esm({
   }
 });
 function ItemSlot({
+  assetUrl = DEFAULT_ASSET_URL,
   icon = "sword",
   label = "Iron Sword",
   quantity,
@@ -7586,6 +7587,7 @@ function ItemSlot({
   className
 }) {
   const isClickable = onClick != null;
+  const px = assetSizeMap[size];
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -7606,7 +7608,17 @@ function ItemSlot({
         className
       ),
       children: empty ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-base", children: "+" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) }),
+        assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: assetUrl,
+            alt: label,
+            width: px,
+            height: px,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: "flex-shrink-0"
+          }
+        ) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) }) : null,
         quantity != null && quantity > 1 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -7622,7 +7634,7 @@ function ItemSlot({
     }
   );
 }
-var sizeMap6, rarityBorderMap, rarityGlowMap;
+var sizeMap6, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL, assetSizeMap;
 var init_ItemSlot = __esm({
   "components/game/atoms/ItemSlot.tsx"() {
     "use client";
@@ -7647,6 +7659,12 @@ var init_ItemSlot = __esm({
       epic: "shadow-lg",
       legendary: "shadow-lg"
     };
+    DEFAULT_ASSET_URL = "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png";
+    assetSizeMap = {
+      sm: 28,
+      md: 40,
+      lg: 56
+    };
     ItemSlot.displayName = "ItemSlot";
   }
 });
@@ -44766,6 +44784,10 @@ function SequencerBoard({
   stepDurationMs = 1e3,
   playEvent,
   completeEvent,
+  placeEvent,
+  removeEvent,
+  checkEvent,
+  playAgainEvent,
   className
 }) {
   const { emit } = useEventBus();
@@ -44801,7 +44823,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "drop_slot" });
-  }, [emit]);
+    if (placeEvent) emit(`UI:${placeEvent}`, { slotIndex: index, actionId: item.id });
+  }, [emit, placeEvent]);
   const handleSlotRemove = React83.useCallback((index) => {
     setSlots((prev) => {
       const next = [...prev];
@@ -44814,7 +44837,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "back" });
-  }, [emit]);
+    if (removeEvent) emit(`UI:${removeEvent}`, { slotIndex: index });
+  }, [emit, removeEvent]);
   const handleReset = React83.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setSlots(Array.from({ length: maxSlots }, () => void 0));
@@ -44822,7 +44846,8 @@ function SequencerBoard({
     setCurrentStep(-1);
     setAttempts(0);
     setSlotFeedback(Array.from({ length: maxSlots }, () => null));
-  }, [maxSlots]);
+    if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
+  }, [maxSlots, playAgainEvent, emit]);
   const filledSlots = slots.filter((s) => !!s);
   const canPlay = filledSlots.length > 0 && playState === "idle";
   const handlePlay = React83.useCallback(() => {
@@ -44844,6 +44869,7 @@ function SequencerBoard({
         const success = solutions.some(
           (sol) => sol.length === playerIds.length && sol.every((id, i) => id === playerIds[i])
         );
+        if (checkEvent) emit(`UI:${checkEvent}`, { sequence: playerIds });
         if (success) {
           setPlayState("success");
           setCurrentStep(-1);
@@ -44871,7 +44897,7 @@ function SequencerBoard({
       }
     };
     timerRef.current = setTimeout(advance, stepDurationMs);
-  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, emit]);
+  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, checkEvent, emit]);
   const machine = {
     name: str(resolved?.title),
     description: str(resolved?.description),

package/dist/providers/index.js

@@ -7529,6 +7529,7 @@ var init_ResourceCounter = __esm({
   }
 });
 function ItemSlot({
+  assetUrl = DEFAULT_ASSET_URL,
   icon = "sword",
   label = "Iron Sword",
   quantity,
@@ -7540,6 +7541,7 @@ function ItemSlot({
   className
 }) {
   const isClickable = onClick != null;
+  const px = assetSizeMap[size];
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -7560,7 +7562,17 @@ function ItemSlot({
         className
       ),
       children: empty ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-base", children: "+" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }),
+        assetUrl ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: assetUrl,
+            alt: label,
+            width: px,
+            height: px,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: "flex-shrink-0"
+          }
+        ) : icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
         quantity != null && quantity > 1 && /* @__PURE__ */ jsx(
           "span",
           {
@@ -7576,7 +7588,7 @@ function ItemSlot({
     }
   );
 }
-var sizeMap6, rarityBorderMap, rarityGlowMap;
+var sizeMap6, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL, assetSizeMap;
 var init_ItemSlot = __esm({
   "components/game/atoms/ItemSlot.tsx"() {
     "use client";
@@ -7601,6 +7613,12 @@ var init_ItemSlot = __esm({
       epic: "shadow-lg",
       legendary: "shadow-lg"
     };
+    DEFAULT_ASSET_URL = "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png";
+    assetSizeMap = {
+      sm: 28,
+      md: 40,
+      lg: 56
+    };
     ItemSlot.displayName = "ItemSlot";
   }
 });
@@ -44720,6 +44738,10 @@ function SequencerBoard({
   stepDurationMs = 1e3,
   playEvent,
   completeEvent,
+  placeEvent,
+  removeEvent,
+  checkEvent,
+  playAgainEvent,
   className
 }) {
   const { emit } = useEventBus();
@@ -44755,7 +44777,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "drop_slot" });
-  }, [emit]);
+    if (placeEvent) emit(`UI:${placeEvent}`, { slotIndex: index, actionId: item.id });
+  }, [emit, placeEvent]);
   const handleSlotRemove = useCallback((index) => {
     setSlots((prev) => {
       const next = [...prev];
@@ -44768,7 +44791,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "back" });
-  }, [emit]);
+    if (removeEvent) emit(`UI:${removeEvent}`, { slotIndex: index });
+  }, [emit, removeEvent]);
   const handleReset = useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setSlots(Array.from({ length: maxSlots }, () => void 0));
@@ -44776,7 +44800,8 @@ function SequencerBoard({
     setCurrentStep(-1);
     setAttempts(0);
     setSlotFeedback(Array.from({ length: maxSlots }, () => null));
-  }, [maxSlots]);
+    if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
+  }, [maxSlots, playAgainEvent, emit]);
   const filledSlots = slots.filter((s) => !!s);
   const canPlay = filledSlots.length > 0 && playState === "idle";
   const handlePlay = useCallback(() => {
@@ -44798,6 +44823,7 @@ function SequencerBoard({
         const success = solutions.some(
           (sol) => sol.length === playerIds.length && sol.every((id, i) => id === playerIds[i])
         );
+        if (checkEvent) emit(`UI:${checkEvent}`, { sequence: playerIds });
         if (success) {
           setPlayState("success");
           setCurrentStep(-1);
@@ -44825,7 +44851,7 @@ function SequencerBoard({
       }
     };
     timerRef.current = setTimeout(advance, stepDurationMs);
-  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, emit]);
+  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, checkEvent, emit]);
   const machine = {
     name: str(resolved?.title),
     description: str(resolved?.description),

package/dist/runtime/index.cjs

@@ -7486,6 +7486,7 @@ var init_ResourceCounter = __esm({
   }
 });
 function ItemSlot({
+  assetUrl = DEFAULT_ASSET_URL,
   icon = "sword",
   label = "Iron Sword",
   quantity,
@@ -7497,6 +7498,7 @@ function ItemSlot({
   className
 }) {
   const isClickable = onClick != null;
+  const px = assetSizeMap[size];
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -7517,7 +7519,17 @@ function ItemSlot({
         className
       ),
       children: empty ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-base", children: "+" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) }),
+        assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: assetUrl,
+            alt: label,
+            width: px,
+            height: px,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: "flex-shrink-0"
+          }
+        ) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) }) : null,
         quantity != null && quantity > 1 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -7533,7 +7545,7 @@ function ItemSlot({
     }
   );
 }
-var sizeMap6, rarityBorderMap, rarityGlowMap;
+var sizeMap6, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL, assetSizeMap;
 var init_ItemSlot = __esm({
   "components/game/atoms/ItemSlot.tsx"() {
     "use client";
@@ -7558,6 +7570,12 @@ var init_ItemSlot = __esm({
       epic: "shadow-lg",
       legendary: "shadow-lg"
     };
+    DEFAULT_ASSET_URL = "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png";
+    assetSizeMap = {
+      sm: 28,
+      md: 40,
+      lg: 56
+    };
     ItemSlot.displayName = "ItemSlot";
   }
 });
@@ -44352,6 +44370,10 @@ function SequencerBoard({
   stepDurationMs = 1e3,
   playEvent,
   completeEvent,
+  placeEvent,
+  removeEvent,
+  checkEvent,
+  playAgainEvent,
   className
 }) {
   const { emit } = useEventBus();
@@ -44387,7 +44409,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "drop_slot" });
-  }, [emit]);
+    if (placeEvent) emit(`UI:${placeEvent}`, { slotIndex: index, actionId: item.id });
+  }, [emit, placeEvent]);
   const handleSlotRemove = React82.useCallback((index) => {
     setSlots((prev) => {
       const next = [...prev];
@@ -44400,7 +44423,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "back" });
-  }, [emit]);
+    if (removeEvent) emit(`UI:${removeEvent}`, { slotIndex: index });
+  }, [emit, removeEvent]);
   const handleReset = React82.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setSlots(Array.from({ length: maxSlots }, () => void 0));
@@ -44408,7 +44432,8 @@ function SequencerBoard({
     setCurrentStep(-1);
     setAttempts(0);
     setSlotFeedback(Array.from({ length: maxSlots }, () => null));
-  }, [maxSlots]);
+    if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
+  }, [maxSlots, playAgainEvent, emit]);
   const filledSlots = slots.filter((s) => !!s);
   const canPlay = filledSlots.length > 0 && playState === "idle";
   const handlePlay = React82.useCallback(() => {
@@ -44430,6 +44455,7 @@ function SequencerBoard({
         const success = solutions.some(
           (sol) => sol.length === playerIds.length && sol.every((id, i) => id === playerIds[i])
         );
+        if (checkEvent) emit(`UI:${checkEvent}`, { sequence: playerIds });
         if (success) {
           setPlayState("success");
           setCurrentStep(-1);
@@ -44457,7 +44483,7 @@ function SequencerBoard({
       }
     };
     timerRef.current = setTimeout(advance, stepDurationMs);
-  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, emit]);
+  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, checkEvent, emit]);
   const machine = {
     name: str(resolved?.title),
     description: str(resolved?.description),

package/dist/runtime/index.js

@@ -7440,6 +7440,7 @@ var init_ResourceCounter = __esm({
   }
 });
 function ItemSlot({
+  assetUrl = DEFAULT_ASSET_URL,
   icon = "sword",
   label = "Iron Sword",
   quantity,
@@ -7451,6 +7452,7 @@ function ItemSlot({
   className
 }) {
   const isClickable = onClick != null;
+  const px = assetSizeMap[size];
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -7471,7 +7473,17 @@ function ItemSlot({
         className
       ),
       children: empty ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-base", children: "+" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }),
+        assetUrl ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: assetUrl,
+            alt: label,
+            width: px,
+            height: px,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: "flex-shrink-0"
+          }
+        ) : icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
         quantity != null && quantity > 1 && /* @__PURE__ */ jsx(
           "span",
           {
@@ -7487,7 +7499,7 @@ function ItemSlot({
     }
   );
 }
-var sizeMap6, rarityBorderMap, rarityGlowMap;
+var sizeMap6, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL, assetSizeMap;
 var init_ItemSlot = __esm({
   "components/game/atoms/ItemSlot.tsx"() {
     "use client";
@@ -7512,6 +7524,12 @@ var init_ItemSlot = __esm({
       epic: "shadow-lg",
       legendary: "shadow-lg"
     };
+    DEFAULT_ASSET_URL = "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png";
+    assetSizeMap = {
+      sm: 28,
+      md: 40,
+      lg: 56
+    };
     ItemSlot.displayName = "ItemSlot";
   }
 });
@@ -44306,6 +44324,10 @@ function SequencerBoard({
   stepDurationMs = 1e3,
   playEvent,
   completeEvent,
+  placeEvent,
+  removeEvent,
+  checkEvent,
+  playAgainEvent,
   className
 }) {
   const { emit } = useEventBus();
@@ -44341,7 +44363,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "drop_slot" });
-  }, [emit]);
+    if (placeEvent) emit(`UI:${placeEvent}`, { slotIndex: index, actionId: item.id });
+  }, [emit, placeEvent]);
   const handleSlotRemove = useCallback((index) => {
     setSlots((prev) => {
       const next = [...prev];
@@ -44354,7 +44377,8 @@ function SequencerBoard({
       return next;
     });
     emit("UI:PLAY_SOUND", { key: "back" });
-  }, [emit]);
+    if (removeEvent) emit(`UI:${removeEvent}`, { slotIndex: index });
+  }, [emit, removeEvent]);
   const handleReset = useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setSlots(Array.from({ length: maxSlots }, () => void 0));
@@ -44362,7 +44386,8 @@ function SequencerBoard({
     setCurrentStep(-1);
     setAttempts(0);
     setSlotFeedback(Array.from({ length: maxSlots }, () => null));
-  }, [maxSlots]);
+    if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
+  }, [maxSlots, playAgainEvent, emit]);
   const filledSlots = slots.filter((s) => !!s);
   const canPlay = filledSlots.length > 0 && playState === "idle";
   const handlePlay = useCallback(() => {
@@ -44384,6 +44409,7 @@ function SequencerBoard({
         const success = solutions.some(
           (sol) => sol.length === playerIds.length && sol.every((id, i) => id === playerIds[i])
         );
+        if (checkEvent) emit(`UI:${checkEvent}`, { sequence: playerIds });
         if (success) {
           setPlayState("success");
           setCurrentStep(-1);
@@ -44411,7 +44437,7 @@ function SequencerBoard({
       }
     };
     timerRef.current = setTimeout(advance, stepDurationMs);
-  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, emit]);
+  }, [canPlay, slots, maxSlots, solutions, stepDurationMs, playEvent, completeEvent, checkEvent, emit]);
   const machine = {
     name: str(resolved?.title),
     description: str(resolved?.description),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.40.0",
+  "version": "5.42.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [