@almadar/ui 5.47.0 → 5.48.0

package/dist/runtime/index.cjs

@@ -7324,6 +7324,7 @@ var init_Sprite = __esm({
   }
 });
 function StateIndicator({
+  assetUrl = DEFAULT_ASSET_URL,
   state = "idle",
   label,
   size = "md",
@@ -7346,18 +7347,29 @@ function StateIndicator({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", children: typeof config.icon === "string" ? /^[a-zA-Z0-9-]+$/.test(config.icon) ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: config.icon }) : config.icon : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: config.icon }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", children: assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: assetUrl,
+            alt: displayLabel,
+            width: 16,
+            height: 16,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: "flex-shrink-0"
+          }
+        ) : typeof config.icon === "string" ? /^[a-zA-Z0-9-]+$/.test(config.icon) ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: config.icon }) : config.icon : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: config.icon }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", children: displayLabel })
       ]
     }
   );
 }
-var DEFAULT_STATE_STYLES, DEFAULT_STYLE, SIZE_CLASSES;
+var DEFAULT_ASSET_URL, DEFAULT_STATE_STYLES, DEFAULT_STYLE, SIZE_CLASSES;
 var init_StateIndicator = __esm({
   "components/game/atoms/StateIndicator.tsx"() {
     init_Box();
     init_Icon();
     init_cn();
+    DEFAULT_ASSET_URL = "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png";
     DEFAULT_STATE_STYLES = {
       idle: { icon: "\u23F8", bgClass: "bg-muted" },
       active: { icon: "\u25B6", bgClass: "bg-success" },
@@ -7432,6 +7444,7 @@ var init_TimerDisplay = __esm({
   }
 });
 function ResourceCounter({
+  assetUrl = DEFAULT_ASSET_URL2,
   icon,
   label = "Gold",
   value = 250,
@@ -7451,7 +7464,17 @@ function ResourceCounter({
         className
       ),
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex-shrink-0", sizes.icon), 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: sizes.img,
+            height: sizes.img,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: "flex-shrink-0"
+          }
+        ) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) }) : null,
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: label }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("font-bold tabular-nums", color && (color in colorTokenClasses2 ? colorTokenClasses2[color] : color)), children: [
           value,
@@ -7464,7 +7487,7 @@ function ResourceCounter({
     }
   );
 }
-var colorTokenClasses2, sizeMap5;
+var colorTokenClasses2, DEFAULT_ASSET_URL2, sizeMap5;
 var init_ResourceCounter = __esm({
   "components/game/atoms/ResourceCounter.tsx"() {
     init_cn();
@@ -7477,16 +7500,17 @@ var init_ResourceCounter = __esm({
       error: "text-error",
       muted: "text-muted-foreground"
     };
+    DEFAULT_ASSET_URL2 = "https://almadar-kflow-assets.web.app/shared/world-map/gold_mine.png";
     sizeMap5 = {
-      sm: { wrapper: "text-xs gap-1 px-1.5 py-0.5", icon: "text-sm" },
-      md: { wrapper: "text-sm gap-1.5 px-2 py-1", icon: "text-base" },
-      lg: { wrapper: "text-base gap-2 px-3 py-1.5", icon: "text-lg" }
+      sm: { wrapper: "text-xs gap-1 px-1.5 py-0.5", icon: "text-sm", img: 16 },
+      md: { wrapper: "text-sm gap-1.5 px-2 py-1", icon: "text-base", img: 20 },
+      lg: { wrapper: "text-base gap-2 px-3 py-1.5", icon: "text-lg", img: 28 }
     };
     ResourceCounter.displayName = "ResourceCounter";
   }
 });
 function ItemSlot({
-  assetUrl = DEFAULT_ASSET_URL,
+  assetUrl = DEFAULT_ASSET_URL3,
   icon = "sword",
   label = "Iron Sword",
   quantity,
@@ -7545,7 +7569,7 @@ function ItemSlot({
     }
   );
 }
-var sizeMap6, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL, assetSizeMap;
+var sizeMap6, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL3, assetSizeMap;
 var init_ItemSlot = __esm({
   "components/game/atoms/ItemSlot.tsx"() {
     "use client";
@@ -7570,7 +7594,7 @@ 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";
+    DEFAULT_ASSET_URL3 = "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png";
     assetSizeMap = {
       sm: 28,
       md: 40,
@@ -7643,6 +7667,7 @@ function getComboScale(combo) {
   return "";
 }
 function ComboCounter({
+  assetUrl = DEFAULT_ASSET_URL4,
   combo = 5,
   multiplier,
   streak,
@@ -7662,6 +7687,17 @@ function ComboCounter({
         className
       ),
       children: [
+        assetUrl && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: assetUrl,
+            alt: "combo",
+            width: 24,
+            height: 24,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: "flex-shrink-0 mb-0.5"
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-black tabular-nums leading-none", sizes.combo, getComboIntensity(combo)), children: combo }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-bold uppercase tracking-wider text-muted-foreground", sizes.label), children: "combo" }),
         multiplier != null && multiplier > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("font-bold text-warning tabular-nums", sizes.multiplier), children: [
@@ -7676,10 +7712,11 @@ function ComboCounter({
     }
   );
 }
-var sizeMap8;
+var DEFAULT_ASSET_URL4, sizeMap8;
 var init_ComboCounter = __esm({
   "components/game/atoms/ComboCounter.tsx"() {
     init_cn();
+    DEFAULT_ASSET_URL4 = "https://almadar-kflow-assets.web.app/shared/effects/flash/flash00.png";
     sizeMap8 = {
       sm: { combo: "text-lg", label: "text-xs", multiplier: "text-xs" },
       md: { combo: "text-2xl", label: "text-xs", multiplier: "text-sm" },
@@ -7773,6 +7810,7 @@ var init_XPBar = __esm({
   }
 });
 function WaypointMarker({
+  assetUrl = DEFAULT_ASSET_URL5,
   label,
   icon,
   active = true,
@@ -7811,7 +7849,17 @@ function WaypointMarker({
             active && !completed && "bg-info text-foreground",
             !active && !completed && "bg-muted"
           ),
-          children: completed ? checkIcon : icon && (typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }))
+          children: completed ? checkIcon : assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: assetUrl,
+              alt: label,
+              width: sizes.img,
+              height: sizes.img,
+              style: { imageRendering: "pixelated", objectFit: "contain" },
+              className: "flex-shrink-0"
+            }
+          ) : icon ? typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) : null
         }
       )
     ] }),
@@ -7828,15 +7876,16 @@ function WaypointMarker({
     )
   ] });
 }
-var sizeMap10, checkIcon;
+var DEFAULT_ASSET_URL5, sizeMap10, checkIcon;
 var init_WaypointMarker = __esm({
   "components/game/atoms/WaypointMarker.tsx"() {
     init_cn();
     init_Icon();
+    DEFAULT_ASSET_URL5 = "https://almadar-kflow-assets.web.app/shared/world-map/battle_marker.png";
     sizeMap10 = {
-      sm: { dot: "w-4 h-4", ring: "w-6 h-6", label: "text-xs mt-1" },
-      md: { dot: "w-6 h-6", ring: "w-8 h-8", label: "text-sm mt-1.5" },
-      lg: { dot: "w-8 h-8", ring: "w-10 h-10", label: "text-base mt-2" }
+      sm: { dot: "w-4 h-4", ring: "w-6 h-6", label: "text-xs mt-1", img: 12 },
+      md: { dot: "w-6 h-6", ring: "w-8 h-8", label: "text-sm mt-1.5", img: 18 },
+      lg: { dot: "w-8 h-8", ring: "w-10 h-10", label: "text-base mt-2", img: 24 }
     };
     checkIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, className: "w-3/5 h-3/5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 13l4 4L19 7", strokeLinecap: "round", strokeLinejoin: "round" }) });
     WaypointMarker.displayName = "WaypointMarker";
@@ -7849,6 +7898,7 @@ function formatDuration(seconds) {
   return `${Math.round(seconds)}s`;
 }
 function StatusEffect({
+  assetUrl = DEFAULT_ASSET_URL6,
   icon = "shield",
   label = "Shield",
   duration = 30,
@@ -7869,7 +7919,17 @@ function StatusEffect({
         ),
         title: label,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex items-center justify-center", sizes.icon), children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, size: "sm" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex items-center justify-center", sizes.icon), children: assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: assetUrl,
+              alt: label,
+              width: sizes.img,
+              height: sizes.img,
+              style: { imageRendering: "pixelated", objectFit: "contain" },
+              className: "flex-shrink-0"
+            }
+          ) : typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, size: "sm" }) }),
           duration !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
@@ -7896,15 +7956,16 @@ function StatusEffect({
     label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground mt-0.5 text-center whitespace-nowrap", children: label })
   ] });
 }
-var sizeMap11, variantStyles7;
+var DEFAULT_ASSET_URL6, sizeMap11, variantStyles7;
 var init_StatusEffect = __esm({
   "components/game/atoms/StatusEffect.tsx"() {
     init_cn();
     init_Icon();
+    DEFAULT_ASSET_URL6 = "https://almadar-kflow-assets.web.app/shared/effects/particles/flame_01.png";
     sizeMap11 = {
-      sm: { container: "w-8 h-8", icon: "text-sm", badge: "text-xs -top-1 -right-1 w-4 h-4", timer: "text-[9px]" },
-      md: { container: "w-10 h-10", icon: "text-base", badge: "text-xs -top-1 -right-1 w-5 h-5", timer: "text-xs" },
-      lg: { container: "w-12 h-12", icon: "text-lg", badge: "text-sm -top-1.5 -right-1.5 w-6 h-6", timer: "text-xs" }
+      sm: { container: "w-8 h-8", icon: "text-sm", badge: "text-xs -top-1 -right-1 w-4 h-4", timer: "text-[9px]", img: 20 },
+      md: { container: "w-10 h-10", icon: "text-base", badge: "text-xs -top-1 -right-1 w-5 h-5", timer: "text-xs", img: 28 },
+      lg: { container: "w-12 h-12", icon: "text-lg", badge: "text-sm -top-1.5 -right-1.5 w-6 h-6", timer: "text-xs", img: 36 }
     };
     variantStyles7 = {
       buff: "border-success bg-success/20",
@@ -11473,15 +11534,15 @@ function BattleBoard({
   const board = boardEntity(entity) ?? {};
   const tiles = propTiles ?? (Array.isArray(board.tiles) ? board.tiles : []);
   const features = propFeatures ?? (Array.isArray(board.features) ? board.features : []);
-  const boardWidth = num(board.boardWidth, 8);
-  const boardHeight = num(board.boardHeight, 6);
+  const boardWidth = num(board.gridWidth ?? board.boardWidth, 8);
+  const boardHeight = num(board.gridHeight ?? board.boardHeight, 6);
   const assetManifest = propAssetManifest ?? board.assetManifest;
   const backgroundImage = board.backgroundImage;
   const units = rows(board.units);
   const selectedUnitId = board.selectedUnitId ?? null;
   const currentPhase = str(board.phase) || "observation";
   const currentTurn = num(board.turn, 1);
-  const gameResult = board.gameResult ?? null;
+  const gameResult = board.result ?? null;
   const eventBus = useEventBus();
   const { t } = hooks.useTranslate();
   const [hoveredTile, setHoveredTile] = React82.useState(null);
@@ -11502,7 +11563,7 @@ function BattleBoard({
   const validMoves = React82.useMemo(() => {
     if (!selectedUnit || currentPhase !== "movement") return [];
     const moves = [];
-    const range = num(selectedUnit.movement);
+    const range = num(board.movementRange, 2);
     const origin = unitPosition(selectedUnit);
     for (let dy = -range; dy <= range; dy++) {
       for (let dx = -range; dx <= range; dx++) {
@@ -19787,15 +19848,24 @@ function CastleBoard({
   featureClickEvent,
   unitClickEvent,
   tileClickEvent,
+  playAgainEvent,
   className
 }) {
   const eventBus = useEventBus();
+  const { t } = hooks.useTranslate();
   const resolved = boardEntity(entity);
   const tiles = propTiles ?? (Array.isArray(resolved?.tiles) ? resolved.tiles : []);
   const features = propFeatures ?? (Array.isArray(resolved?.features) ? resolved.features : []);
   const units = propUnits ?? (Array.isArray(resolved?.units) ? resolved.units : []);
   const assetManifest = propAssetManifest ?? resolved?.assetManifest;
   const backgroundImage = resolved?.backgroundImage;
+  const gold = num(resolved?.gold);
+  const health = num(resolved?.health);
+  const maxHealth = num(resolved?.maxHealth);
+  const wave = num(resolved?.wave);
+  const tickCount = num(resolved?.tickCount);
+  const buildings = rows(resolved?.buildings);
+  const result = str(resolved?.result) || "none";
   const [hoveredTile, setHoveredTile] = React82.useState(null);
   const [selectedFeature, setSelectedFeature] = React82.useState(null);
   const hoveredFeature = React82.useMemo(() => {
@@ -19808,7 +19878,7 @@ function CastleBoard({
       (u) => u.position?.x === hoveredTile.x && u.position?.y === hoveredTile.y
     ) ?? null;
   }, [hoveredTile, units]);
-  const maxY = Math.max(...tiles.map((t) => t.y), 0);
+  const maxY = Math.max(...tiles.map((t2) => t2.y), 0);
   const baseOffsetX = (maxY + 1) * (TILE_WIDTH * scale / 2);
   const tileToScreen = React82.useCallback(
     (tx, ty) => isoToScreen(tx, ty, scale, baseOffsetX),
@@ -19843,6 +19913,11 @@ function CastleBoard({
     }
   }, [units, onUnitClick, unitClickEvent, eventBus]);
   const clearSelection = React82.useCallback(() => setSelectedFeature(null), []);
+  const handlePlayAgain = React82.useCallback(() => {
+    if (playAgainEvent) {
+      eventBus.emit(`UI:${playAgainEvent}`, {});
+    }
+  }, [playAgainEvent, eventBus]);
   const ctx = React82.useMemo(
     () => ({
       hoveredTile,
@@ -19851,11 +19926,18 @@ function CastleBoard({
       selectedFeature,
       clearSelection,
       tileToScreen,
-      scale
+      scale,
+      gold,
+      health,
+      maxHealth,
+      wave,
+      tickCount,
+      buildings,
+      result
     }),
-    [hoveredTile, hoveredFeature, hoveredUnit, selectedFeature, clearSelection, tileToScreen, scale]
+    [hoveredTile, hoveredFeature, hoveredUnit, selectedFeature, clearSelection, tileToScreen, scale, gold, health, maxHealth, wave, tickCount, buildings, result]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("castle-board min-h-screen flex flex-col bg-background", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("castle-board relative min-h-screen flex flex-col bg-background", className), children: [
     header && header(ctx),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-auto p-4 relative", children: [
@@ -19880,7 +19962,29 @@ function CastleBoard({
       ] }),
       sidePanel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-96 shrink-0 border-l border-border bg-surface overflow-y-auto", children: sidePanel(ctx) })
     ] }),
-    footer && footer(ctx)
+    footer && footer(ctx),
+    result !== "none" && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center bg-background/70 backdrop-blur-sm rounded-container", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: "text-center p-8", gap: "lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Typography,
+        {
+          variant: "h2",
+          className: cn(
+            "text-4xl font-black tracking-widest uppercase",
+            result === "victory" ? "text-warning" : "text-error"
+          ),
+          children: result === "victory" ? t("battle.victory") : t("battle.defeat")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "primary",
+          className: "px-8 py-3 font-semibold",
+          onClick: handlePlayAgain,
+          children: t("battle.playAgain")
+        }
+      )
+    ] }) })
   ] });
 }
 var init_CastleBoard = __esm({
@@ -19888,6 +19992,10 @@ var init_CastleBoard = __esm({
     "use client";
     init_cn();
     init_useEventBus();
+    init_Box();
+    init_Button();
+    init_Typography();
+    init_Stack();
     init_IsometricCanvas();
     init_boardEntity();
     init_isometric();
@@ -20764,22 +20872,16 @@ function ClassifierBoard({
   const { emit } = useEventBus();
   const { t } = hooks.useTranslate();
   const resolved = boardEntity(entity);
-  const [localAssignments, setLocalAssignments] = React82.useState({});
   const [headerError, setHeaderError] = React82.useState(false);
-  const [localSubmitted, setLocalSubmitted] = React82.useState(false);
-  const [localAttempts, setLocalAttempts] = React82.useState(0);
-  const [showHint, setShowHint] = React82.useState(false);
   const items = Array.isArray(resolved?.items) ? resolved.items : [];
   const categories = Array.isArray(resolved?.categories) ? resolved.categories : [];
-  const entityResult = str(resolved?.result);
-  const entityDrivesResult = entityResult.length > 0;
-  const entityHasAssignments = items.some((item) => item.assignedCategory != null);
-  const assignments = entityHasAssignments ? items.reduce((acc, item) => {
-    if (item.assignedCategory != null) acc[item.id] = item.assignedCategory;
+  const result = str(resolved?.result);
+  const submitted = result === "win";
+  const attempts = num(resolved?.attempts);
+  const assignments = items.reduce((acc, item) => {
+    if (item.assignedCategory != null && item.assignedCategory !== "") acc[item.id] = item.assignedCategory;
     return acc;
-  }, {}) : localAssignments;
-  const attempts = entityDrivesResult ? num(resolved?.attempts) : localAttempts;
-  const submitted = entityDrivesResult || localSubmitted;
+  }, {});
   const unassignedItems = items.filter((item) => !assignments[item.id]);
   const allAssigned = items.length > 0 && Object.keys(assignments).length === items.length;
   const results = submitted ? items.map((item) => ({
@@ -20787,54 +20889,25 @@ function ClassifierBoard({
     assigned: assignments[item.id],
     correct: assignments[item.id] === item.correctCategory
   })) : [];
-  const allCorrect = entityDrivesResult ? entityResult === "success" : results.length > 0 && results.every((r) => r.correct);
+  const allCorrect = result === "win";
   const correctCount = results.filter((r) => r.correct).length;
+  const showHint = attempts >= 2 && Boolean(str(resolved?.hint));
   const handleAssign = (itemId, categoryId) => {
     if (submitted) return;
-    if (assignEvent) {
-      emit(`UI:${assignEvent}`, { itemId, categoryId });
-    }
-    if (!entityHasAssignments) {
-      setLocalAssignments((prev) => ({ ...prev, [itemId]: categoryId }));
-    }
+    if (assignEvent) emit(`UI:${assignEvent}`, { itemId, categoryId });
   };
   const handleUnassign = (itemId) => {
     if (submitted) return;
-    if (!entityHasAssignments) {
-      setLocalAssignments((prev) => {
-        const next = { ...prev };
-        delete next[itemId];
-        return next;
-      });
-    }
+    if (assignEvent) emit(`UI:${assignEvent}`, { itemId, categoryId: "" });
   };
-  const handleSubmit = React82.useCallback(() => {
-    if (checkEvent) {
-      emit(`UI:${checkEvent}`, {});
-    }
-    if (!entityDrivesResult) {
-      setLocalSubmitted(true);
-      setLocalAttempts((a) => a + 1);
-      const correct = items.every((item) => assignments[item.id] === item.correctCategory);
-      if (correct) {
-        emit(`UI:${completeEvent}`, { success: true, attempts: attempts + 1 });
-      }
-    }
-  }, [checkEvent, entityDrivesResult, items, assignments, attempts, completeEvent, emit]);
-  const handleReset = () => {
-    if (!entityDrivesResult) setLocalSubmitted(false);
-    if (attempts >= 2 && str(resolved?.hint)) {
-      setShowHint(true);
+  const handleSubmit = () => {
+    if (checkEvent) emit(`UI:${checkEvent}`, {});
+    if (allAssigned && items.every((item) => assignments[item.id] === item.correctCategory)) {
+      emit(`UI:${completeEvent}`, { success: true, attempts: attempts + 1 });
     }
   };
   const handleFullReset = () => {
-    if (playAgainEvent) {
-      emit(`UI:${playAgainEvent}`, {});
-    }
-    setLocalAssignments({});
-    setLocalSubmitted(false);
-    setLocalAttempts(0);
-    setShowHint(false);
+    if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
   };
   if (!resolved) return null;
   const theme = resolved.theme ?? void 0;
@@ -20873,17 +20946,17 @@ function ClassifierBoard({
               /* @__PURE__ */ jsxRuntime.jsx(Badge, { size: "sm", children: catItems.length })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", className: "flex-wrap min-h-[2rem]", children: catItems.map((item) => {
-              const result = results.find((r) => r.item.id === item.id);
+              const result2 = results.find((r) => r.item.id === item.id);
               return /* @__PURE__ */ jsxRuntime.jsxs(
                 Badge,
                 {
                   size: "sm",
-                  className: `cursor-pointer ${result ? result.correct ? "border-success bg-success/10" : "border-error bg-error/10" : ""}`,
+                  className: `cursor-pointer ${result2 ? result2.correct ? "border-success bg-success/10" : "border-error bg-error/10" : ""}`,
                   onClick: () => handleUnassign(item.id),
                   children: [
                     item.iconUrl && /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.iconUrl, alt: "", className: "w-3 h-3 object-contain inline-block" }),
                     item.label,
-                    result && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: result.correct ? LucideIcons2.CheckCircle : LucideIcons2.XCircle, size: "xs", className: result.correct ? "text-success" : "text-error" })
+                    result2 && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: result2.correct ? LucideIcons2.CheckCircle : LucideIcons2.XCircle, size: "xs", className: result2.correct ? "text-success" : "text-error" })
                   ]
                 },
                 item.id
@@ -20912,10 +20985,10 @@ function ClassifierBoard({
         ] }) }),
         showHint && hint && /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4 border-l-4 border-l-warning", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", children: hint }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", justify: "center", children: [
-          !submitted ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "primary", onClick: handleSubmit, disabled: !allAssigned, children: [
+          !submitted && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "primary", onClick: handleSubmit, disabled: !allAssigned, children: [
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons2.Send, size: "sm" }),
             t("classifier.check")
-          ] }) : !allCorrect ? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", onClick: handleReset, children: t("classifier.tryAgain") }) : null,
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", onClick: handleFullReset, children: [
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons2.RotateCcw, size: "sm" }),
             t("classifier.reset")
@@ -28944,7 +29017,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect74, useRef: useRef68, useCallback: useCallback112, useState: useState107 } = React82__namespace.default;
+      const { useEffect: useEffect74, useRef: useRef68, useCallback: useCallback111, useState: useState107 } = React82__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -28990,7 +29063,7 @@ var init_MapView = __esm({
       }) {
         const eventBus = useEventBus3();
         const [clickedPosition, setClickedPosition] = useState107(null);
-        const handleMapClick = useCallback112((lat, lng) => {
+        const handleMapClick = useCallback111((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -28999,7 +29072,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback112((marker) => {
+        const handleMarkerClick = useCallback111((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -38230,44 +38303,27 @@ function DebuggerBoard({
   const { t } = hooks.useTranslate();
   const resolved = boardEntity(entity);
   const [headerError, setHeaderError] = React82.useState(false);
-  const [showHint, setShowHint] = React82.useState(false);
   const lines = Array.isArray(resolved?.lines) ? resolved.lines : [];
-  const result = resolved?.result ?? null;
+  const result = str(resolved?.result) || "none";
   const attempts = num(resolved?.attempts);
-  const submitted = result != null;
+  const submitted = result === "win";
+  const showHint = !submitted && attempts >= 2 && Boolean(str(resolved?.hint));
   const bugLines = lines.filter((l) => l.isBug);
   const flaggedLines = lines.filter((l) => l.isFlagged);
   const correctFlags = lines.filter((l) => l.isBug && l.isFlagged);
   const falseFlags = lines.filter((l) => !l.isBug && l.isFlagged);
-  const allCorrect = result === "win";
+  const allCorrect = submitted;
   const toggleLine = (lineId) => {
     if (submitted) return;
-    if (toggleFlagEvent) {
-      emit(`UI:${toggleFlagEvent}`, { lineId });
-    }
+    if (toggleFlagEvent) emit(`UI:${toggleFlagEvent}`, { lineId });
   };
   const handleSubmit = React82.useCallback(() => {
-    if (checkEvent) {
-      emit(`UI:${checkEvent}`, {});
-    }
+    if (checkEvent) emit(`UI:${checkEvent}`, {});
     const correct = correctFlags.length === bugLines.length && falseFlags.length === 0;
-    if (correct) {
-      emit(`UI:${completeEvent}`, { success: true, attempts: attempts + 1 });
-    }
+    if (correct) emit(`UI:${completeEvent}`, { success: true, attempts: attempts + 1 });
   }, [checkEvent, correctFlags.length, bugLines.length, falseFlags.length, attempts, completeEvent, emit]);
   const handleReset = () => {
-    if (playAgainEvent) {
-      emit(`UI:${playAgainEvent}`, {});
-    }
-    if (attempts >= 2 && str(resolved?.hint)) {
-      setShowHint(true);
-    }
-  };
-  const handleFullReset = () => {
-    if (playAgainEvent) {
-      emit(`UI:${playAgainEvent}`, {});
-    }
-    setShowHint(false);
+    if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
   };
   if (!resolved) return null;
   const theme = resolved.theme ?? void 0;
@@ -38291,7 +38347,7 @@ function DebuggerBoard({
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", weight: "bold", children: str(resolved.title) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", children: str(resolved.description) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: t("debugger.findBugs", { count: String(num(resolved.bugCount)) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: t("debugger.findBugs", { count: String(lines.filter((l) => l.isBug).length) }) })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", children: lines.map((line, i) => {
           const isFlagged = !!line.isFlagged;
@@ -38341,11 +38397,11 @@ function DebuggerBoard({
         ] }) }),
         showHint && hint && /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4 border-l-4 border-l-warning", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", children: hint }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", justify: "center", children: [
-          !submitted ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "primary", onClick: handleSubmit, disabled: flaggedLines.length === 0, children: [
+          !submitted && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "primary", onClick: handleSubmit, disabled: flaggedLines.length === 0, children: [
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons2.Send, size: "sm" }),
             t("debugger.submit")
-          ] }) : !allCorrect ? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", onClick: handleReset, children: t("debugger.tryAgain") }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", onClick: handleFullReset, children: [
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", onClick: handleReset, children: [
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons2.RotateCcw, size: "sm" }),
             t("debugger.reset")
           ] })
@@ -39346,39 +39402,40 @@ function EventHandlerBoard({
   stepDurationMs = 800,
   playEvent,
   completeEvent,
+  editRuleEvent,
+  playAgainEvent,
   className
 }) {
   const { emit } = useEventBus();
   const { t } = hooks.useTranslate();
   const resolved = boardEntity(entity);
-  const entityObjects = rows(resolved?.objects);
-  const [objects, setObjects] = React82.useState(() => [...entityObjects]);
+  const objects = rows(resolved?.objects);
+  const entityResult = str(resolved?.result) || "none";
+  const isSuccess = entityResult === "win";
+  const attempts = typeof resolved?.attempts === "number" ? resolved.attempts : 0;
   const [selectedObjectId, setSelectedObjectId] = React82.useState(
-    entityObjects[0] ? objId(entityObjects[0]) : null
+    objects[0] ? objId(objects[0]) : null
   );
   const [headerError, setHeaderError] = React82.useState(false);
-  const [playState, setPlayState] = React82.useState("editing");
+  const [isPlaying, setIsPlaying] = React82.useState(false);
   const [eventLog, setEventLog] = React82.useState([]);
-  const [attempts, setAttempts] = React82.useState(0);
   const timerRef = React82.useRef(null);
   const logIdCounter = React82.useRef(0);
   React82.useEffect(() => () => {
     if (timerRef.current) clearTimeout(timerRef.current);
   }, []);
-  const selectedObject = objects.find((o) => objId(o) === selectedObjectId) || null;
+  const selectedObject = objects.find((o) => objId(o) === selectedObjectId) ?? null;
   const handleRulesChange = React82.useCallback((objectId, rules) => {
-    setObjects((prev) => prev.map(
-      (o) => objId(o) === objectId ? { ...o, rules } : o
-    ));
-  }, []);
+    if (editRuleEvent) emit(`UI:${editRuleEvent}`, { objectId, rules });
+  }, [editRuleEvent, emit]);
   const addLogEntry = React82.useCallback((icon, message, status = "done") => {
     const id = `log-${logIdCounter.current++}`;
     setEventLog((prev) => [...prev, { id, timestamp: Date.now(), icon, message, status }]);
   }, []);
   const handlePlay = React82.useCallback(() => {
-    if (playState !== "editing") return;
+    if (isPlaying || isSuccess) return;
     if (playEvent) emit(`UI:${playEvent}`, {});
-    setPlayState("playing");
+    setIsPlaying(true);
     setEventLog([]);
     const allRules = [];
     objects.forEach((obj) => {
@@ -39394,15 +39451,8 @@ function EventHandlerBoard({
     let goalReached = false;
     const processNext = () => {
       if (eventQueue.length === 0 || stepIdx > 20) {
-        if (goalReached) {
-          setPlayState("success");
-          if (completeEvent) {
-            emit(`UI:${completeEvent}`, { success: true });
-          }
-        } else {
-          setAttempts((prev) => prev + 1);
-          setPlayState("fail");
-        }
+        setIsPlaying(false);
+        if (goalReached && completeEvent) emit(`UI:${completeEvent}`, { success: true });
         return;
       }
       const currentEvent = eventQueue.shift();
@@ -39433,21 +39483,19 @@ function EventHandlerBoard({
       addLogEntry("\u{1F3AC}", t("eventHandler.simulationStarted", { events: triggers.join(", ") }), "active");
     }
     timerRef.current = setTimeout(processNext, stepDurationMs);
-  }, [playState, objects, resolved, stepDurationMs, playEvent, completeEvent, emit, addLogEntry, t]);
+  }, [isPlaying, isSuccess, objects, resolved, stepDurationMs, playEvent, completeEvent, emit, addLogEntry, t]);
   const handleTryAgain = React82.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
-    setPlayState("editing");
+    setIsPlaying(false);
     setEventLog([]);
   }, []);
   const handleReset = React82.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
-    const resetObjects = rows(resolved?.objects);
-    setObjects([...resetObjects]);
-    setPlayState("editing");
+    setIsPlaying(false);
     setEventLog([]);
-    setSelectedObjectId(resetObjects[0] ? objId(resetObjects[0]) : null);
-    setAttempts(0);
-  }, [resolved?.objects]);
+    setSelectedObjectId(objects[0] ? objId(objects[0]) : null);
+    if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
+  }, [objects, playAgainEvent, emit]);
   if (!resolved) return null;
   const objectViewers = objects.map((obj) => {
     const states = objStates(obj);
@@ -39516,12 +39564,12 @@ function EventHandlerBoard({
           {
             object: selectedObject,
             onRulesChange: handleRulesChange,
-            disabled: playState !== "editing"
+            disabled: isPlaying
           }
         ),
         eventLog.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(EventLog, { entries: eventLog }),
-        playState === "success" && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("eventHandler.chainComplete") }) }),
-        playState === "fail" && /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+        isSuccess && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("eventHandler.chainComplete") }) }),
+        !isPlaying && !isSuccess && attempts > 0 && /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 rounded-container bg-warning/10 border border-warning/30 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body1", className: "text-foreground font-medium", children: t(encourageKey) }) }),
           showHint && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-3 rounded-container bg-accent/10 border border-accent/30", children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "items-start", gap: "xs", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", className: "text-accent font-bold shrink-0", children: "\u{1F4A1} " + t("game.hint") + ":" }),
@@ -39529,12 +39577,12 @@ function EventHandlerBoard({
           ] }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", children: [
-          playState === "fail" ? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", onClick: handleTryAgain, children: "\u{1F504} " + t("puzzle.tryAgainButton") }) : /* @__PURE__ */ jsxRuntime.jsx(
+          !isPlaying && !isSuccess && attempts > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", onClick: handleTryAgain, children: "\u{1F504} " + t("puzzle.tryAgainButton") }) : /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {
               variant: "primary",
               onClick: handlePlay,
-              disabled: playState !== "editing",
+              disabled: isPlaying || isSuccess,
               children: "\u25B6 " + t("game.play")
             }
           ),
@@ -42087,21 +42135,6 @@ var init_ModalSlot = __esm({
     ModalSlot.displayName = "ModalSlot";
   }
 });
-function getOpponentAction(strategy, actions, history) {
-  const actionIds = actions.map((a) => a.id);
-  switch (strategy) {
-    case "always-cooperate":
-      return actionIds[0];
-    case "always-defect":
-      return actionIds[actionIds.length - 1];
-    case "tit-for-tat":
-      if (history.length === 0) return actionIds[0];
-      return history[history.length - 1].playerAction;
-    case "random":
-    default:
-      return actionIds[Math.floor(Math.random() * actionIds.length)];
-  }
-}
 function NegotiatorBoard({
   entity,
   completeEvent = "PUZZLE_COMPLETE",
@@ -42123,28 +42156,35 @@ function NegotiatorBoard({
   const playerTotal = num(resolved?.score);
   const isComplete = result !== "none" || totalRounds > 0 && currentRound >= totalRounds;
   const won = result === "win";
-  const opponentTotal = history.reduce((s, r) => s + r.opponentPayoff, 0);
+  const lastPlayerAction = str(resolved?.lastPlayerAction);
+  const lastOpponentAction = str(resolved?.lastOpponentAction);
+  const lastPayoff = num(resolved?.lastPayoff);
   const actions = Array.isArray(resolved?.actions) ? resolved.actions : [];
   const payoffMatrix = Array.isArray(resolved?.payoffMatrix) ? resolved.payoffMatrix : [];
+  const prevRoundRef = React82.useRef(currentRound);
+  React82.useEffect(() => {
+    if (currentRound > prevRoundRef.current && lastPlayerAction) {
+      const opponentPayoffEntry = payoffMatrix.find(
+        (p2) => p2.playerAction === lastPlayerAction && p2.opponentAction === lastOpponentAction
+      );
+      setHistory((prev) => [
+        ...prev,
+        {
+          round: currentRound,
+          playerAction: lastPlayerAction,
+          opponentAction: lastOpponentAction,
+          playerPayoff: lastPayoff,
+          opponentPayoff: opponentPayoffEntry?.opponentPayoff ?? 0
+        }
+      ]);
+    }
+    prevRoundRef.current = currentRound;
+  }, [currentRound, lastPlayerAction, lastOpponentAction, lastPayoff, payoffMatrix]);
+  const opponentTotal = React82.useMemo(() => history.reduce((s, r) => s + r.opponentPayoff, 0), [history]);
   const handleAction = React82.useCallback((actionId) => {
     if (isComplete) return;
-    const opponentAction = getOpponentAction(str(resolved?.opponentStrategy) || "random", actions, history);
-    const payoff = payoffMatrix.find(
-      (p2) => p2.playerAction === actionId && p2.opponentAction === opponentAction
-    );
-    const playerPayoff = payoff?.playerPayoff ?? 0;
-    setHistory((prev) => [
-      ...prev,
-      {
-        round: prev.length + 1,
-        playerAction: actionId,
-        opponentAction,
-        playerPayoff,
-        opponentPayoff: payoff?.opponentPayoff ?? 0
-      }
-    ]);
     if (playRoundEvent) {
-      emit(`UI:${playRoundEvent}`, { playerAction: actionId, payoff: playerPayoff });
+      emit(`UI:${playRoundEvent}`, { playerAction: actionId, payoff: 0 });
     }
     if (totalRounds > 0 && currentRound + 1 >= totalRounds) {
       if (finishEvent) {
@@ -42154,10 +42194,11 @@ function NegotiatorBoard({
         setShowHint(true);
       }
     }
-  }, [isComplete, resolved, totalRounds, currentRound, actions, payoffMatrix, history, playRoundEvent, finishEvent, emit]);
+  }, [isComplete, resolved, totalRounds, currentRound, playRoundEvent, finishEvent, emit]);
   const handleReset = React82.useCallback(() => {
     setHistory([]);
     setShowHint(false);
+    prevRoundRef.current = 0;
     if (playAgainEvent) {
       emit(`UI:${playAgainEvent}`, {});
     }
@@ -44512,17 +44553,24 @@ function SequencerBoard({
   const { emit } = useEventBus();
   const { t } = hooks.useTranslate();
   const resolved = boardEntity(entity);
-  const maxSlots = num(resolved?.maxSlots);
+  const maxSlots = num(resolved?.maxSlots) || 3;
   const solutions = Array.isArray(resolved?.solutions) ? resolved.solutions : [];
   const availableActions = Array.isArray(resolved?.availableActions) ? resolved.availableActions : [];
   const allowDuplicates = resolved?.allowDuplicates !== false;
+  const entitySlots = Array.isArray(resolved?.slots) ? resolved.slots : [];
+  const entityResult = str(resolved?.result);
+  const entityAttempts = num(resolved?.attempts);
+  const entityCurrentStep = typeof resolved?.currentStep === "number" ? resolved.currentStep : -1;
+  const slots = Array.from({ length: maxSlots }, (_, i) => {
+    const entitySlot = entitySlots.find((s) => s.index === i);
+    if (!entitySlot?.placedActionId) return void 0;
+    return availableActions.find((a) => a.id === entitySlot.placedActionId);
+  });
+  const isSuccess = entityResult === "win";
+  const attempts = entityAttempts;
+  const isPlayingBack = entityCurrentStep >= 0 && !isSuccess;
+  const currentStep = entityCurrentStep;
   const [headerError, setHeaderError] = React82.useState(false);
-  const [slots, setSlots] = React82.useState(
-    () => Array.from({ length: maxSlots }, () => void 0)
-  );
-  const [playState, setPlayState] = React82.useState("idle");
-  const [currentStep, setCurrentStep] = React82.useState(-1);
-  const [attempts, setAttempts] = React82.useState(0);
   const [slotFeedback, setSlotFeedback] = React82.useState(
     () => Array.from({ length: maxSlots }, () => null)
   );
@@ -44531,11 +44579,6 @@ function SequencerBoard({
     if (timerRef.current) clearTimeout(timerRef.current);
   }, []);
   const handleSlotDrop = React82.useCallback((index, item) => {
-    setSlots((prev) => {
-      const next = [...prev];
-      next[index] = item;
-      return next;
-    });
     setSlotFeedback((prev) => {
       const next = [...prev];
       next[index] = null;
@@ -44545,11 +44588,6 @@ function SequencerBoard({
     if (placeEvent) emit(`UI:${placeEvent}`, { slotIndex: index, actionId: item.id });
   }, [emit, placeEvent]);
   const handleSlotRemove = React82.useCallback((index) => {
-    setSlots((prev) => {
-      const next = [...prev];
-      next[index] = void 0;
-      return next;
-    });
     setSlotFeedback((prev) => {
       const next = [...prev];
       next[index] = null;
@@ -44560,48 +44598,34 @@ function SequencerBoard({
   }, [emit, removeEvent]);
   const handleReset = React82.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
-    setSlots(Array.from({ length: maxSlots }, () => void 0));
-    setPlayState("idle");
-    setCurrentStep(-1);
-    setAttempts(0);
     setSlotFeedback(Array.from({ length: maxSlots }, () => null));
     if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
   }, [maxSlots, playAgainEvent, emit]);
   const filledSlots = slots.filter((s) => !!s);
-  const canPlay = filledSlots.length > 0 && playState === "idle";
+  const canPlay = filledSlots.length > 0 && !isPlayingBack && !isSuccess;
   const handlePlay = React82.useCallback(() => {
     if (!canPlay) return;
     setSlotFeedback(Array.from({ length: maxSlots }, () => null));
     emit("UI:PLAY_SOUND", { key: "confirm" });
     const sequence = slots.map((s) => s?.id || "");
-    if (playEvent) {
-      emit(`UI:${playEvent}`, { sequence });
-    }
-    setPlayState("playing");
-    setCurrentStep(0);
+    const playerIds = slots.filter(Boolean).map((s) => s?.id || "");
+    if (playEvent) emit(`UI:${playEvent}`, { sequence });
     let step = 0;
     const advance = () => {
       step++;
+      emit("UI:STEP", { step });
       if (step >= maxSlots) {
+        if (checkEvent) emit(`UI:${checkEvent}`, { sequence: playerIds });
         const playerSeq = slots.map((s) => s?.id);
-        const playerIds = slots.filter(Boolean).map((s) => s?.id || "");
         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);
           emit("UI:PLAY_SOUND", { key: "levelComplete" });
-          if (completeEvent) {
-            emit(`UI:${completeEvent}`, { success: true, sequence: playerIds });
-          }
+          if (completeEvent) emit(`UI:${completeEvent}`, { success: true, sequence: playerIds });
         } else {
-          setAttempts((prev) => prev + 1);
           const feedback = computeSlotFeedback(playerSeq, solutions);
           setSlotFeedback(feedback);
-          setPlayState("idle");
-          setCurrentStep(-1);
           emit("UI:PLAY_SOUND", { key: "fail" });
           const correctCount2 = feedback.filter((f3) => f3 === "correct").length;
           for (let ci = 0; ci < correctCount2; ci++) {
@@ -44611,7 +44635,6 @@ function SequencerBoard({
           }
         }
       } else {
-        setCurrentStep(step);
         timerRef.current = setTimeout(advance, stepDurationMs);
       }
     };
@@ -44661,7 +44684,7 @@ function SequencerBoard({
         /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", className: "text-muted-foreground font-medium", children: t("sequencer.yourSequence") + ":" }),
-            hasFeedback && playState === "idle" && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-muted-foreground", children: [
+            hasFeedback && !isPlayingBack && !isSuccess && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-muted-foreground", children: [
               `${correctCount}/${maxSlots} `,
               "\u2705"
             ] })
@@ -44673,7 +44696,7 @@ function SequencerBoard({
               maxSlots,
               onSlotDrop: handleSlotDrop,
               onSlotRemove: handleSlotRemove,
-              playing: playState === "playing",
+              playing: isPlayingBack,
               currentStep,
               categoryColors,
               slotFeedback,
@@ -44681,7 +44704,7 @@ function SequencerBoard({
             }
           )
         ] }),
-        playState !== "playing" && /* @__PURE__ */ jsxRuntime.jsx(
+        !isPlayingBack && /* @__PURE__ */ jsxRuntime.jsx(
           ActionPalette,
           {
             actions: availableActions,
@@ -44691,8 +44714,8 @@ function SequencerBoard({
             label: t("sequencer.dragActions")
           }
         ),
-        hasFeedback && playState === "idle" && attempts > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-3 rounded-container bg-warning/10 border border-warning/30 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", className: "text-foreground", children: t(encourageKey) }) }),
-        playState === "success" && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("sequencer.levelComplete") }) }),
+        hasFeedback && !isPlayingBack && !isSuccess && attempts > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-3 rounded-container bg-warning/10 border border-warning/30 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", className: "text-foreground", children: t(encourageKey) }) }),
+        isSuccess && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("sequencer.levelComplete") }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Button,
@@ -45742,6 +45765,9 @@ function StateArchitectBoard({
   stepDurationMs = 600,
   testEvent,
   completeEvent,
+  addTransitionEvent,
+  removeTransitionEvent,
+  playAgainEvent,
   className
 }) {
   const { emit } = useEventBus();
@@ -45754,14 +45780,16 @@ function StateArchitectBoard({
   const testCases = Array.isArray(resolved?.testCases) ? resolved.testCases : [];
   const entityTransitions = Array.isArray(resolved?.transitions) ? resolved.transitions : [];
   const entityVariables = rows(resolved?.variables);
-  const [transitions, setTransitions] = React82.useState(entityTransitions);
+  const transitions = entityTransitions;
+  const attempts = typeof resolved?.attempts === "number" ? resolved.attempts : 0;
+  const entityResult = str(resolved?.result) || "none";
+  const isSuccess = entityResult === "win";
+  const [isTesting, setIsTesting] = React82.useState(false);
   const [headerError, setHeaderError] = React82.useState(false);
-  const [playState, setPlayState] = React82.useState("editing");
   const [currentState, setCurrentState] = React82.useState(initialState);
   const [selectedState, setSelectedState] = React82.useState(null);
   const [testResults, setTestResults] = React82.useState([]);
   const [variables, setVariables] = React82.useState(() => [...entityVariables]);
-  const [attempts, setAttempts] = React82.useState(0);
   const timerRef = React82.useRef(null);
   const [addingFrom, setAddingFrom] = React82.useState(null);
   React82.useEffect(() => () => {
@@ -45771,7 +45799,7 @@ function StateArchitectBoard({
   const GRAPH_H = 400;
   const positions = React82.useMemo(() => layoutStates(entityStates, GRAPH_W, GRAPH_H), [entityStates]);
   const handleStateClick = React82.useCallback((state) => {
-    if (playState !== "editing") return;
+    if (isTesting) return;
     if (addingFrom) {
       if (addingFrom !== state) {
         const event = availableEvents[0] || "EVENT";
@@ -45781,20 +45809,20 @@ function StateArchitectBoard({
           to: state,
           event
         };
-        setTransitions((prev) => [...prev, newTrans]);
+        if (addTransitionEvent) emit(`UI:${addTransitionEvent}`, { id: newTrans.id, from: newTrans.from, to: newTrans.to, event: newTrans.event });
       }
       setAddingFrom(null);
     } else {
       setSelectedState(state);
     }
-  }, [playState, addingFrom, availableEvents]);
+  }, [isTesting, addingFrom, availableEvents, addTransitionEvent, emit]);
   const handleStartAddTransition = React82.useCallback(() => {
     if (!selectedState) return;
     setAddingFrom(selectedState);
   }, [selectedState]);
   const handleRemoveTransition = React82.useCallback((transId) => {
-    setTransitions((prev) => prev.filter((t2) => t2.id !== transId));
-  }, []);
+    if (removeTransitionEvent) emit(`UI:${removeTransitionEvent}`, { id: transId });
+  }, [removeTransitionEvent, emit]);
   const machine = React82.useMemo(() => ({
     name: entityName,
     description: str(resolved?.description),
@@ -45808,16 +45836,16 @@ function StateArchitectBoard({
     }))
   }), [entityName, resolved, entityStates, currentState, transitions]);
   const handleTest = React82.useCallback(() => {
-    if (playState !== "editing") return;
+    if (isTesting) return;
     if (testEvent) emit(`UI:${testEvent}`, {});
-    setPlayState("testing");
+    setIsTesting(true);
     setTestResults([]);
     const results = [];
     let testIdx = 0;
     const runNextTest = () => {
       if (testIdx >= testCases.length) {
         const allPassed = results.every((r) => r.passed);
-        setPlayState(allPassed ? "success" : "fail");
+        setIsTesting(false);
         setTestResults(results);
         if (allPassed && completeEvent) {
           emit(`UI:${completeEvent}`, {
@@ -45825,9 +45853,6 @@ function StateArchitectBoard({
             passedTests: results.filter((r) => r.passed).length
           });
         }
-        if (!allPassed) {
-          setAttempts((prev) => prev + 1);
-        }
         return;
       }
       const testCase = testCases[testIdx];
@@ -45850,24 +45875,23 @@ function StateArchitectBoard({
       timerRef.current = setTimeout(runNextTest, stepDurationMs);
     };
     timerRef.current = setTimeout(runNextTest, stepDurationMs);
-  }, [playState, transitions, testCases, initialState, stepDurationMs, testEvent, completeEvent, emit]);
+  }, [isTesting, transitions, testCases, initialState, stepDurationMs, testEvent, completeEvent, emit]);
   const handleTryAgain = React82.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
-    setPlayState("editing");
+    setIsTesting(false);
     setCurrentState(initialState);
     setTestResults([]);
   }, [initialState]);
   const handleReset = React82.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
-    setTransitions(entityTransitions);
-    setPlayState("editing");
+    setIsTesting(false);
     setCurrentState(initialState);
     setTestResults([]);
     setVariables([...entityVariables]);
     setSelectedState(null);
     setAddingFrom(null);
-    setAttempts(0);
-  }, [entityTransitions, initialState, entityVariables]);
+    if (playAgainEvent) emit(`UI:${playAgainEvent}`, {});
+  }, [initialState, entityVariables, playAgainEvent, emit]);
   const codeData = React82.useMemo(() => ({
     name: entityName,
     states: entityStates,
@@ -45963,7 +45987,7 @@ function StateArchitectBoard({
                 ]
               }
             ),
-            playState === "editing" && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+            !isTesting && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
                 variant: "ghost",
@@ -45985,7 +46009,7 @@ function StateArchitectBoard({
                   t2.guardHint,
                   ")"
                 ] }),
-                playState === "editing" && /* @__PURE__ */ jsxRuntime.jsx(
+                !isTesting && /* @__PURE__ */ jsxRuntime.jsx(
                   Button,
                   {
                     variant: "ghost",
@@ -46017,21 +46041,21 @@ function StateArchitectBoard({
             resolved.showCodeView !== false && /* @__PURE__ */ jsxRuntime.jsx(StateJsonView, { data: codeData, label: "View Code" })
           ] })
         ] }),
-        playState === "success" && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("stateArchitect.allPassed") }) }),
-        playState === "fail" && /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+        isSuccess && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("stateArchitect.allPassed") }) }),
+        !isTesting && !isSuccess && testResults.some((r) => !r.passed) && /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 rounded-container bg-warning/10 border border-warning/30 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body1", className: "text-foreground font-medium", children: t(ENCOURAGEMENT_KEYS3[Math.min(attempts - 1, ENCOURAGEMENT_KEYS3.length - 1)] ?? ENCOURAGEMENT_KEYS3[0]) }) }),
-          attempts >= 3 && hint && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-3 rounded-container bg-accent/10 border border-accent/30", children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "items-start", gap: "xs", children: [
+          !isSuccess && attempts >= 2 && Boolean(str(resolved?.hint)) && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-3 rounded-container bg-accent/10 border border-accent/30", children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "items-start", gap: "xs", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", className: "text-accent font-bold shrink-0", children: "\u{1F4A1} " + t("game.hint") + ":" }),
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", className: "text-foreground", children: hint })
           ] }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", children: [
-          playState === "fail" ? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", onClick: handleTryAgain, children: "\u{1F504} " + t("puzzle.tryAgainButton") }) : /* @__PURE__ */ jsxRuntime.jsx(
+          !isTesting && !isSuccess && testResults.some((r) => !r.passed) ? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", onClick: handleTryAgain, children: "\u{1F504} " + t("puzzle.tryAgainButton") }) : /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {
               variant: "primary",
               onClick: handleTest,
-              disabled: playState !== "editing",
+              disabled: isTesting,
               children: "\u25B6 " + t("game.runTests")
             }
           ),
@@ -46735,17 +46759,12 @@ var init_UncontrolledBattleBoard = __esm({
   }
 });
 function heroPosition(h) {
+  if ("position" in h && h.position != null) return h.position;
   return vec2(h.position);
 }
-function heroOwner(h) {
-  return str(h.owner);
-}
 function heroMovement(h) {
   return num(h.movement);
 }
-function hexPassable(h) {
-  return h.passable !== false;
-}
 function defaultIsInRange(from, to, range) {
   return Math.abs(from.x - to.x) + Math.abs(from.y - to.y) <= range;
 }
@@ -46781,38 +46800,41 @@ function WorldMapBoard({
 }) {
   const eventBus = useEventBus();
   const resolved = boardEntity(entity);
-  const hexes = rows(resolved?.hexes);
-  const heroes = rows(resolved?.heroes);
+  const entityUnits = rows(resolved?.units);
+  const entityTiles = rows(resolved?.tiles);
   const features = propFeatures ?? (Array.isArray(resolved?.features) ? resolved.features : []);
   const selectedHeroId = resolved?.selectedHeroId ?? null;
   const assetManifest = propAssetManifest ?? resolved?.assetManifest;
   const backgroundImage = resolved?.backgroundImage;
   const [hoveredTile, setHoveredTile] = React82.useState(null);
-  const selectedHero = React82.useMemo(
-    () => heroes.find((h) => str(h.id) === selectedHeroId) ?? null,
-    [heroes, selectedHeroId]
-  );
   const derivedTiles = React82.useMemo(
-    () => hexes.map((hex) => ({
-      x: num(hex.x),
-      y: num(hex.y),
-      terrain: str(hex.terrain),
-      terrainSprite: hex.terrainSprite == null ? void 0 : str(hex.terrainSprite)
+    () => entityTiles.map((t) => ({
+      x: num(t.x),
+      y: num(t.y),
+      terrain: str(t.terrain),
+      terrainSprite: t.terrainSprite == null ? void 0 : str(t.terrainSprite),
+      passable: t.passable !== false
     })),
-    [hexes]
+    [entityTiles]
   );
   const tiles = propTiles ?? derivedTiles;
   const baseUnits = React82.useMemo(
-    () => propUnits ?? heroes.map((hero) => ({
-      id: str(hero.id),
-      position: heroPosition(hero),
-      name: str(hero.name),
-      team: heroOwner(hero) === "enemy" ? "enemy" : "player",
-      health: 100,
-      maxHealth: 100,
-      sprite: hero.sprite == null ? void 0 : str(hero.sprite)
+    () => propUnits ?? entityUnits.map((u) => ({
+      id: str(u.id),
+      position: heroPosition(u),
+      name: str(u.name),
+      // lolo uses `team` field (not `owner`)
+      team: str(u.team) === "enemy" ? "enemy" : "player",
+      health: num(u.health) || 100,
+      maxHealth: num(u.maxHealth) || 100,
+      sprite: u.sprite == null ? void 0 : str(u.sprite)
     })),
-    [heroes, propUnits]
+    [entityUnits, propUnits]
+  );
+  const gameUnits = baseUnits;
+  const selectedHero = React82.useMemo(
+    () => gameUnits.find((u) => u.id === selectedHeroId) ?? null,
+    [gameUnits, selectedHeroId]
   );
   const MOVE_SPEED_MS_PER_TILE = 300;
   const movementAnimRef = React82.useRef(null);
@@ -46858,51 +46880,50 @@ function WorldMapBoard({
   const validMoves = React82.useMemo(() => {
     if (!selectedHero || heroMovement(selectedHero) <= 0) return [];
     const sp = heroPosition(selectedHero);
-    const sOwner = heroOwner(selectedHero);
+    const sTeam = str(selectedHero.team);
     const range = heroMovement(selectedHero);
     const moves = [];
-    hexes.forEach((hex) => {
-      const hx = num(hex.x);
-      const hy = num(hex.y);
-      if (!hexPassable(hex)) return;
-      if (hx === sp.x && hy === sp.y) return;
-      if (!isInRange(sp, { x: hx, y: hy }, range)) return;
-      if (heroes.some((h) => {
-        const hp = heroPosition(h);
-        return hp.x === hx && hp.y === hy && heroOwner(h) === sOwner;
+    tiles.forEach((t) => {
+      const tx = t.x;
+      const ty = t.y;
+      if (t.passable === false) return;
+      if (tx === sp.x && ty === sp.y) return;
+      if (!isInRange(sp, { x: tx, y: ty }, range)) return;
+      if (gameUnits.some((u) => {
+        const up = u.position ?? { x: u.x ?? -1, y: u.y ?? -1 };
+        return up.x === tx && up.y === ty && str(u.team) === sTeam;
       })) return;
-      moves.push({ x: hx, y: hy });
+      moves.push({ x: tx, y: ty });
     });
     return moves;
-  }, [selectedHero, hexes, heroes, isInRange]);
+  }, [selectedHero, tiles, gameUnits, isInRange]);
   const attackTargets = React82.useMemo(() => {
     if (!selectedHero || heroMovement(selectedHero) <= 0) return [];
     const sp = heroPosition(selectedHero);
-    const sOwner = heroOwner(selectedHero);
+    const sTeam = str(selectedHero.team);
     const range = heroMovement(selectedHero);
-    return heroes.filter((h) => heroOwner(h) !== sOwner).filter((h) => isInRange(sp, heroPosition(h), range)).map((h) => heroPosition(h));
-  }, [selectedHero, heroes, isInRange]);
-  const maxY = Math.max(...hexes.map((h) => num(h.y)), 0);
+    return gameUnits.filter((u) => str(u.team) !== sTeam).filter((u) => isInRange(sp, u.position ?? { x: u.x ?? -1, y: u.y ?? -1 }, range)).map((u) => u.position ?? { x: u.x ?? -1, y: u.y ?? -1 });
+  }, [selectedHero, gameUnits, isInRange]);
+  const maxY = Math.max(...tiles.map((t) => t.y), 0);
   const baseOffsetX = (maxY + 1) * (TILE_WIDTH * scale / 2);
   const tileToScreen = React82.useCallback(
     (tx, ty) => isoToScreen(tx, ty, scale, baseOffsetX),
     [scale, baseOffsetX]
   );
   const hoveredHex = React82.useMemo(
-    () => hoveredTile ? hexes.find((h) => num(h.x) === hoveredTile.x && num(h.y) === hoveredTile.y) ?? null : null,
-    [hoveredTile, hexes]
+    () => hoveredTile ? tiles.find((t) => t.x === hoveredTile.x && t.y === hoveredTile.y) ?? null : null,
+    [hoveredTile, tiles]
   );
   const hoveredHero = React82.useMemo(
-    () => hoveredTile ? heroes.find((h) => {
-      const hp = heroPosition(h);
-      return hp.x === hoveredTile.x && hp.y === hoveredTile.y;
+    () => hoveredTile ? gameUnits.find((u) => {
+      const up = u.position ?? { x: u.x ?? -1, y: u.y ?? -1 };
+      return up.x === hoveredTile.x && up.y === hoveredTile.y;
     }) ?? null : null,
-    [hoveredTile, heroes]
+    [hoveredTile, gameUnits]
   );
   const handleTileClick = React82.useCallback((x, y) => {
     if (movementAnimRef.current) return;
-    const hex = hexes.find((h) => num(h.x) === x && num(h.y) === y);
-    if (!hex) return;
+    const tile = tiles.find((t) => t.x === x && t.y === y);
     if (tileClickEvent) {
       eventBus.emit(`UI:${tileClickEvent}`, { x, y });
     }
@@ -46913,38 +46934,39 @@ function WorldMapBoard({
         if (heroMoveEvent) {
           eventBus.emit(`UI:${heroMoveEvent}`, { heroId, toX: x, toY: y });
         }
-        const feature = str(hex.feature);
+        const feature = tile ? str(tile.feature) : "";
         if (feature && feature !== "none") {
-          onFeatureEnter?.(heroId, hex);
+          const tileRow = tile;
+          onFeatureEnter?.(heroId, tileRow);
           if (featureEnterEvent) {
-            eventBus.emit(`UI:${featureEnterEvent}`, { heroId, feature, hex });
+            eventBus.emit(`UI:${featureEnterEvent}`, { heroId, feature, hex: tileRow });
           }
         }
       });
       return;
     }
-    const enemy = heroes.find((h) => {
-      const hp = heroPosition(h);
-      return hp.x === x && hp.y === y && heroOwner(h) === "enemy";
+    const enemy = gameUnits.find((u) => {
+      const up = u.position ?? { x: u.x ?? -1, y: u.y ?? -1 };
+      return up.x === x && up.y === y && str(u.team) === "enemy";
     });
     if (selectedHero && enemy && attackTargets.some((t) => t.x === x && t.y === y)) {
       const attackerId = str(selectedHero.id);
-      const defenderId = str(enemy.id);
+      const defenderId = enemy.id;
       onBattleEncounter?.(attackerId, defenderId);
       if (battleEncounterEvent) {
         eventBus.emit(`UI:${battleEncounterEvent}`, { attackerId, defenderId });
       }
     }
-  }, [hexes, heroes, selectedHero, validMoves, attackTargets, startMoveAnimation, onHeroMove, onFeatureEnter, onBattleEncounter, eventBus, tileClickEvent, heroMoveEvent, featureEnterEvent, battleEncounterEvent]);
+  }, [tiles, gameUnits, selectedHero, validMoves, attackTargets, startMoveAnimation, onHeroMove, onFeatureEnter, onBattleEncounter, eventBus, tileClickEvent, heroMoveEvent, featureEnterEvent, battleEncounterEvent]);
   const handleUnitClick = React82.useCallback((unitId) => {
-    const hero = heroes.find((h) => str(h.id) === unitId);
-    if (hero && (heroOwner(hero) === "player" || allowMoveAllHeroes)) {
+    const unit = gameUnits.find((u) => u.id === unitId);
+    if (unit && (str(unit.team) === "player" || allowMoveAllHeroes)) {
       onHeroSelect?.(unitId);
       if (heroSelectEvent) {
         eventBus.emit(`UI:${heroSelectEvent}`, { heroId: unitId });
       }
     }
-  }, [heroes, onHeroSelect, allowMoveAllHeroes, eventBus, heroSelectEvent]);
+  }, [gameUnits, onHeroSelect, allowMoveAllHeroes, eventBus, heroSelectEvent]);
   const selectHero = React82.useCallback((id) => {
     onHeroSelect?.(id);
     if (heroSelectEvent) {