@almadar/ui 5.47.0 → 5.48.0

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

@@ -1,4 +1,7 @@
+import type { AssetUrl } from '@almadar/core';
 export interface ComboCounterProps {
+    /** Sprite image URL displayed alongside the combo number */
+    assetUrl?: AssetUrl;
     /** Current combo count */
     combo: number;
     /** Score multiplier */
@@ -10,7 +13,7 @@ export interface ComboCounterProps {
     /** Additional CSS classes */
     className?: string;
 }
-export declare function ComboCounter({ combo, multiplier, streak, size, className, }: ComboCounterProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ComboCounter({ assetUrl, combo, multiplier, streak, size, className, }: ComboCounterProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace ComboCounter {
     var displayName: string;
 }

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

@@ -1,6 +1,9 @@
 import type { ColorToken } from '../../core/atoms/types';
 import { type IconInput } from '../../core/atoms/Icon';
+import type { AssetUrl } from '@almadar/core';
 export interface ResourceCounterProps {
+    /** Sprite image URL — takes precedence over icon when provided */
+    assetUrl?: AssetUrl;
     /** Icon component or emoji */
     icon?: IconInput;
     /** Resource label */
@@ -16,7 +19,7 @@ export interface ResourceCounterProps {
     /** Additional CSS classes */
     className?: string;
 }
-export declare function ResourceCounter({ icon, label, value, max, color, size, className, }: ResourceCounterProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResourceCounter({ assetUrl, icon, label, value, max, color, size, className, }: ResourceCounterProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ResourceCounter {
     var displayName: string;
 }

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

@@ -1,16 +1,13 @@
-/**
- * StateIndicator — animated game-entity state pill (distinct from core Badge atom).
- * Badge is a static text label. StateIndicator maps a state string (idle/active/
- * moving/…) to icon + bg colour + optional pulse via a style registry that callers
- * can extend. Use it in game HUDs where the entity state machine drives the display.
- */
 import React from 'react';
 import { type IconInput } from '../../core/atoms/Icon';
+import type { AssetUrl } from '@almadar/core';
 export interface StateStyle {
     icon: IconInput;
     bgClass: string;
 }
 export interface StateIndicatorProps {
+    /** Sprite image URL — takes precedence over the state icon when provided */
+    assetUrl?: AssetUrl;
     /** The current state name */
     state: string;
     /** Optional label override (defaults to capitalized state name) */
@@ -24,7 +21,7 @@ export interface StateIndicatorProps {
     /** Additional CSS classes */
     className?: string;
 }
-export declare function StateIndicator({ state, label, size, animated, stateStyles, className, }: StateIndicatorProps): React.JSX.Element;
+export declare function StateIndicator({ assetUrl, state, label, size, animated, stateStyles, className, }: StateIndicatorProps): React.JSX.Element;
 export declare namespace StateIndicator {
     var displayName: string;
 }

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

@@ -1,5 +1,8 @@
 import { type IconInput } from '../../core/atoms/Icon';
+import type { AssetUrl } from '@almadar/core';
 export interface StatusEffectProps {
+    /** Sprite image URL — takes precedence over icon when provided */
+    assetUrl?: AssetUrl;
     /** Lucide icon name or component */
     icon: IconInput;
     /** Label describing the effect */
@@ -15,7 +18,7 @@ export interface StatusEffectProps {
     /** Additional CSS classes */
     className?: string;
 }
-export declare function StatusEffect({ icon, label, duration, stacks, variant, size, className, }: StatusEffectProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatusEffect({ assetUrl, icon, label, duration, stacks, variant, size, className, }: StatusEffectProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StatusEffect {
     var displayName: string;
 }

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

@@ -1,5 +1,8 @@
 import { type IconInput } from '../../core/atoms/Icon';
+import type { AssetUrl } from '@almadar/core';
 export interface WaypointMarkerProps {
+    /** Sprite image URL — takes precedence over icon when provided */
+    assetUrl?: AssetUrl;
     /** Label text below the marker */
     label?: string;
     /** Custom icon to render inside the marker */
@@ -13,7 +16,7 @@ export interface WaypointMarkerProps {
     /** Additional CSS classes */
     className?: string;
 }
-export declare function WaypointMarker({ label, icon, active, completed, size, className, }: WaypointMarkerProps): import("react/jsx-runtime").JSX.Element;
+export declare function WaypointMarker({ assetUrl, label, icon, active, completed, size, className, }: WaypointMarkerProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace WaypointMarker {
     var displayName: string;
 }

package/dist/components/game/molecules/three/index.cjs

@@ -2280,6 +2280,9 @@ function preloadFeatures(urls) {
     }
   });
 }
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
 var DEFAULT_GRID_CONFIG = {
   cellSize: 1,
   offsetX: 0,
@@ -2713,11 +2716,10 @@ var GameCanvas3D = React11.forwardRef(
           "div",
           {
             ref: containerRef,
-            className: `game-canvas-3d ${className || ""}`,
+            className: cn("game-canvas-3d relative w-full h-full min-h-[85vh] overflow-hidden", className),
             "data-orientation": orientation,
             "data-camera-mode": cameraMode,
             "data-overlay": overlay,
-            style: { position: "relative", width: "100%", height: "100%", minHeight: "85vh", overflow: "hidden" },
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 fiber.Canvas,
@@ -2831,11 +2833,6 @@ var GameCanvas3D = React11.forwardRef(
   }
 );
 GameCanvas3D.displayName = "GameCanvas3D";
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-
-// components/core/atoms/Box.tsx
 var paddingStyles = {
   none: "p-0",
   xs: "p-1",
@@ -3271,8 +3268,7 @@ function GameCanvas3DBattleTemplate({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
     {
-      className: cn("game-canvas-3d-battle-template", className),
-      style: { display: "block", position: "relative", width: "100%", minHeight: "85vh" },
+      className: cn("game-canvas-3d-battle-template block relative w-full min-h-[85vh]", className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           GameCanvas3D,
@@ -3299,8 +3295,7 @@ function GameCanvas3DBattleTemplate({
           {
             gap: "sm",
             align: "center",
-            className: cn("battle-template__turn-indicator", `battle-template__turn-indicator--${currentTurn}`),
-            style: { position: "absolute", top: "12px", right: "12px", zIndex: 10 },
+            className: cn("battle-template__turn-indicator absolute top-3 right-3 z-10", `battle-template__turn-indicator--${currentTurn}`),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "turn-indicator__label", children: currentTurn === "player" ? "Your Turn" : "Enemy's Turn" }),
               round != null && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "turn-indicator__round", children: [
@@ -3380,8 +3375,7 @@ function GameCanvas3DCastleTemplate({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     VStack,
     {
-      className: cn("game-canvas-3d-castle-template", className),
-      style: { display: "block", width: "100%", minHeight: "85vh" },
+      className: cn("game-canvas-3d-castle-template block w-full min-h-[85vh]", className),
       children: [
         showHeader && name && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "center", className: "castle-template__header", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h2", className: "header__name", children: name }),

package/dist/components/game/molecules/three/index.css

@@ -316,11 +316,6 @@
 
 /* components/game/molecules/GameCanvas3D.css */
 .game-canvas-3d {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  min-height: 85vh;
-  overflow: hidden;
   background: #1a1a2e;
   border-radius: 8px;
 }

package/dist/components/game/molecules/three/index.js

@@ -2256,6 +2256,9 @@ function preloadFeatures(urls) {
     }
   });
 }
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
 var DEFAULT_GRID_CONFIG = {
   cellSize: 1,
   offsetX: 0,
@@ -2689,11 +2692,10 @@ var GameCanvas3D = forwardRef(
           "div",
           {
             ref: containerRef,
-            className: `game-canvas-3d ${className || ""}`,
+            className: cn("game-canvas-3d relative w-full h-full min-h-[85vh] overflow-hidden", className),
             "data-orientation": orientation,
             "data-camera-mode": cameraMode,
             "data-overlay": overlay,
-            style: { position: "relative", width: "100%", height: "100%", minHeight: "85vh", overflow: "hidden" },
             children: [
               /* @__PURE__ */ jsxs(
                 Canvas,
@@ -2807,11 +2809,6 @@ var GameCanvas3D = forwardRef(
   }
 );
 GameCanvas3D.displayName = "GameCanvas3D";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// components/core/atoms/Box.tsx
 var paddingStyles = {
   none: "p-0",
   xs: "p-1",
@@ -3247,8 +3244,7 @@ function GameCanvas3DBattleTemplate({
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      className: cn("game-canvas-3d-battle-template", className),
-      style: { display: "block", position: "relative", width: "100%", minHeight: "85vh" },
+      className: cn("game-canvas-3d-battle-template block relative w-full min-h-[85vh]", className),
       children: [
         /* @__PURE__ */ jsx(
           GameCanvas3D,
@@ -3275,8 +3271,7 @@ function GameCanvas3DBattleTemplate({
           {
             gap: "sm",
             align: "center",
-            className: cn("battle-template__turn-indicator", `battle-template__turn-indicator--${currentTurn}`),
-            style: { position: "absolute", top: "12px", right: "12px", zIndex: 10 },
+            className: cn("battle-template__turn-indicator absolute top-3 right-3 z-10", `battle-template__turn-indicator--${currentTurn}`),
             children: [
               /* @__PURE__ */ jsx(Typography, { variant: "body", className: "turn-indicator__label", children: currentTurn === "player" ? "Your Turn" : "Enemy's Turn" }),
               round != null && /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "turn-indicator__round", children: [
@@ -3356,8 +3351,7 @@ function GameCanvas3DCastleTemplate({
   return /* @__PURE__ */ jsxs(
     VStack,
     {
-      className: cn("game-canvas-3d-castle-template", className),
-      style: { display: "block", width: "100%", minHeight: "85vh" },
+      className: cn("game-canvas-3d-castle-template block w-full min-h-[85vh]", className),
       children: [
         showHeader && name && /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "center", className: "castle-template__header", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "h2", className: "header__name", children: name }),

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

@@ -44,6 +44,13 @@ export type CastleSlotContext = {
     };
     /** Canvas scale */
     scale: number;
+    gold: number;
+    health: number;
+    maxHealth: number;
+    wave: number;
+    tickCount: number;
+    buildings: readonly EntityRow[];
+    result: 'none' | 'victory' | 'defeat';
 };
 export interface CastleBoardProps {
     /** Castle board-state entity (single row or array). The board reads
@@ -89,9 +96,11 @@ export interface CastleBoardProps {
         x: number;
         y: number;
     }>;
+    /** Emits UI:{playAgainEvent} with {} on play again / reset */
+    playAgainEvent?: EventEmit<Record<string, never>>;
     className?: string;
 }
-export declare function CastleBoard({ entity, tiles: propTiles, units: propUnits, features: propFeatures, assetManifest: propAssetManifest, scale, header, sidePanel, overlay, footer, onFeatureClick, onUnitClick, onTileClick, featureClickEvent, unitClickEvent, tileClickEvent, className, }: CastleBoardProps): React.JSX.Element;
+export declare function CastleBoard({ entity, tiles: propTiles, units: propUnits, features: propFeatures, assetManifest: propAssetManifest, scale, header, sidePanel, overlay, footer, onFeatureClick, onUnitClick, onTileClick, featureClickEvent, unitClickEvent, tileClickEvent, playAgainEvent, className, }: CastleBoardProps): React.JSX.Element;
 export declare namespace CastleBoard {
     var displayName: string;
 }

package/dist/components/game/organisms/puzzles/event-handler/EventHandlerBoard.d.ts

@@ -13,6 +13,7 @@
 import React from 'react';
 import type { EventEmit, EntityRow } from '@almadar/core';
 import type { DisplayStateProps } from '../../../../core/organisms/types';
+import type { RuleDefinition } from './RuleEditor';
 export interface EventHandlerBoardProps extends DisplayStateProps {
     /** Puzzle board-state entity (single row or array). The board reads
      *  `objects` / `triggerEvents` / `goalEvent` etc. off the row; the editable
@@ -26,8 +27,15 @@ export interface EventHandlerBoardProps extends DisplayStateProps {
     completeEvent?: EventEmit<{
         success: boolean;
     }>;
+    /** Emits UI:{editRuleEvent} with { objectId, rules } — model updates @entity.objects */
+    editRuleEvent?: EventEmit<{
+        objectId: string;
+        rules: RuleDefinition[];
+    }>;
+    /** Emits UI:{playAgainEvent} to reset the model */
+    playAgainEvent?: EventEmit<Record<string, never>>;
 }
-export declare function EventHandlerBoard({ entity, stepDurationMs, playEvent, completeEvent, className, }: EventHandlerBoardProps): React.JSX.Element | null;
+export declare function EventHandlerBoard({ entity, stepDurationMs, playEvent, completeEvent, editRuleEvent, playAgainEvent, className, }: EventHandlerBoardProps): React.JSX.Element | null;
 export declare namespace EventHandlerBoard {
     var displayName: string;
 }

package/dist/components/game/organisms/puzzles/state-architect/StateArchitectBoard.d.ts

@@ -40,8 +40,21 @@ export interface StateArchitectBoardProps extends DisplayStateProps {
         success: boolean;
         passedTests: number;
     }>;
+    /** Emits UI:{addTransitionEvent} — lolo handles ADD_TRANSITION */
+    addTransitionEvent?: EventEmit<{
+        id: string;
+        from: string;
+        to: string;
+        event: string;
+    }>;
+    /** Emits UI:{removeTransitionEvent} — lolo handles REMOVE_TRANSITION */
+    removeTransitionEvent?: EventEmit<{
+        id: string;
+    }>;
+    /** Emits UI:{playAgainEvent} — lolo handles PLAY_AGAIN */
+    playAgainEvent?: EventEmit<Record<string, never>>;
 }
-export declare function StateArchitectBoard({ entity, stepDurationMs, testEvent, completeEvent, className, }: StateArchitectBoardProps): React.JSX.Element | null;
+export declare function StateArchitectBoard({ entity, stepDurationMs, testEvent, completeEvent, addTransitionEvent, removeTransitionEvent, playAgainEvent, className, }: StateArchitectBoardProps): React.JSX.Element | null;
 export declare namespace StateArchitectBoard {
     var displayName: string;
 }