@almadar/ui 5.47.0 → 5.49.0

package/dist/providers/index.js

@@ -1,5 +1,5 @@
 import * as React83 from 'react';
-import React83__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, Suspense, useState, useLayoutEffect, lazy, useId, useSyncExternalStore } from 'react';
+import React83__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, Suspense, useState, useLayoutEffect, lazy, useId, useSyncExternalStore, forwardRef, useImperativeHandle, Component } from 'react';
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { EventBusContext, useTraitScope, TraitScopeProvider } from '@almadar/ui/providers';
@@ -41,6 +41,12 @@ import { DndContext, pointerWithin, rectIntersection, closestCorners, useSensors
 import { useSortable, arrayMove, sortableKeyboardCoordinates, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useNodeId, ReactFlowProvider, Handle, Position } from '@xyflow/react';
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
+import { GLTFLoader as GLTFLoader$1 } from 'three/examples/jsm/loaders/GLTFLoader';
+import { Canvas, useThree } from '@react-three/fiber';
+import { Grid as Grid$1, OrbitControls } from '@react-three/drei';
 import { getPatternDefinition, getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
 
 var __defProp = Object.defineProperty;
@@ -673,7 +679,7 @@ var init_Box = __esm({
         position,
         className,
         children,
-        as: Component = "div",
+        as: Component2 = "div",
         action,
         actionPayload,
         hoverEvent,
@@ -705,7 +711,7 @@ var init_Box = __esm({
         }, [hoverEvent, eventBus, onMouseLeave]);
         const isClickable = action || onClick;
         return React83__default.createElement(
-          Component,
+          Component2,
           {
             ref,
             className: cn(
@@ -843,9 +849,9 @@ function resolvePhosphor(name, weight, family) {
     (lib) => {
       const PhosphorComp = lib[target];
       if (!PhosphorComp || typeof PhosphorComp !== "object") return null;
-      const Component = PhosphorComp;
+      const Component2 = PhosphorComp;
       const Adapter = (props) => /* @__PURE__ */ jsx(
-        Component,
+        Component2,
         {
           weight,
           className: props.className,
@@ -869,9 +875,9 @@ function resolveTabler(name, family) {
     (lib) => {
       const TablerComp = lib[target];
       if (!TablerComp || typeof TablerComp !== "object") return null;
-      const Component = TablerComp;
+      const Component2 = TablerComp;
       const Adapter = (props) => /* @__PURE__ */ jsx(
-        Component,
+        Component2,
         {
           stroke: props.strokeWidth ?? 1.5,
           className: props.className,
@@ -895,9 +901,9 @@ function resolveFa(name, family) {
     (lib) => {
       const FaComp = lib[target];
       if (!FaComp || typeof FaComp !== "function") return null;
-      const Component = FaComp;
+      const Component2 = FaComp;
       const Adapter = (props) => /* @__PURE__ */ jsx(
-        Component,
+        Component2,
         {
           className: props.className,
           style: props.style,
@@ -1852,8 +1858,8 @@ var init_Typography = __esm({
       children
     }) => {
       const variant = variantProp ?? (level ? `h${level}` : "body1");
-      const Component = as || defaultElements[variant];
-      const Comp = Component;
+      const Component2 = as || defaultElements[variant];
+      const Comp = Component2;
       return /* @__PURE__ */ jsx(
         Comp,
         {
@@ -4408,10 +4414,10 @@ var init_Center = __esm({
       className,
       style,
       children,
-      as: Component = "div"
+      as: Component2 = "div"
     }) => {
       const mergedStyle = minHeight ? { minHeight, ...style } : style;
-      const Comp = Component;
+      const Comp = Component2;
       return /* @__PURE__ */ jsx(
         Comp,
         {
@@ -5042,7 +5048,7 @@ var init_Stack = __esm({
       className,
       style,
       children,
-      as: Component = "div",
+      as: Component2 = "div",
       onClick,
       onKeyDown,
       role,
@@ -5060,7 +5066,7 @@ var init_Stack = __esm({
       };
       const isHorizontal = direction === "horizontal";
       const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-      const Comp = Component;
+      const Comp = Component2;
       return /* @__PURE__ */ jsx(
         Comp,
         {
@@ -7116,6 +7122,7 @@ var init_HealthBar = __esm({
   }
 });
 function ScoreDisplay({
+  assetUrl = DEFAULT_ASSET_URL,
   value,
   label,
   icon,
@@ -7162,14 +7169,24 @@ function ScoreDisplay({
         className
       ),
       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: "",
+            width: 20,
+            height: 20,
+            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,
         label && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
         /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formattedValue })
       ]
     }
   );
 }
-var sizeMap2;
+var sizeMap2, DEFAULT_ASSET_URL;
 var init_ScoreDisplay = __esm({
   "components/game/atoms/ScoreDisplay.tsx"() {
     "use client";
@@ -7181,10 +7198,12 @@ var init_ScoreDisplay = __esm({
       lg: "text-2xl",
       xl: "text-4xl"
     };
+    DEFAULT_ASSET_URL = "https://almadar-kflow-assets.web.app/shared/effects/particles/star_01.png";
     ScoreDisplay.displayName = "ScoreDisplay";
   }
 });
 function ControlButton({
+  assetUrl = DEFAULT_ASSET_URL2,
   label,
   icon,
   size = "md",
@@ -7231,7 +7250,7 @@ function ControlButton({
     },
     [isPressed, releaseEvent, eventBus, onRelease]
   );
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
@@ -7252,20 +7271,27 @@ function ControlButton({
         disabled && "opacity-50 cursor-not-allowed",
         className
       ),
-      children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "text-2xl", children: typeof icon === "string" ? /^[a-zA-Z0-9-]+$/.test(icon) ? (() => {
-          const I = resolveIcon(icon);
-          return I ? /* @__PURE__ */ jsx(I, { className: "w-6 h-6" }) : null;
-        })() : icon : /* @__PURE__ */ (() => {
-          const I = icon;
-          return /* @__PURE__ */ jsx(I, { className: "w-6 h-6" });
-        })() }),
-        label && !icon && /* @__PURE__ */ jsx("span", { children: label })
-      ]
+      children: assetUrl ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: assetUrl,
+          alt: "",
+          width: 24,
+          height: 24,
+          style: { imageRendering: "pixelated", objectFit: "contain" },
+          className: "flex-shrink-0"
+        }
+      ) : icon ? /* @__PURE__ */ jsx("span", { className: "text-2xl", children: typeof icon === "string" ? /^[a-zA-Z0-9-]+$/.test(icon) ? (() => {
+        const I = resolveIcon(icon);
+        return I ? /* @__PURE__ */ jsx(I, { className: "w-6 h-6" }) : null;
+      })() : icon : /* @__PURE__ */ (() => {
+        const I = icon;
+        return /* @__PURE__ */ jsx(I, { className: "w-6 h-6" });
+      })() }) : label ? /* @__PURE__ */ jsx("span", { children: label }) : null
     }
   );
 }
-var sizeMap3, shapeMap, variantMap;
+var sizeMap3, shapeMap, variantMap, DEFAULT_ASSET_URL2;
 var init_ControlButton = __esm({
   "components/game/atoms/ControlButton.tsx"() {
     "use client";
@@ -7288,6 +7314,7 @@ var init_ControlButton = __esm({
       secondary: "bg-secondary text-secondary-foreground border-border hover:bg-secondary-hover",
       ghost: "bg-transparent text-foreground border-border hover:bg-muted"
     };
+    DEFAULT_ASSET_URL2 = "https://almadar-kflow-assets.web.app/shared/effects/particles/circle_01.png";
     ControlButton.displayName = "ControlButton";
   }
 });
@@ -7367,6 +7394,7 @@ var init_Sprite = __esm({
   }
 });
 function StateIndicator({
+  assetUrl = DEFAULT_ASSET_URL3,
   state = "idle",
   label,
   size = "md",
@@ -7389,18 +7417,29 @@ function StateIndicator({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(Box, { as: "span", children: typeof config.icon === "string" ? /^[a-zA-Z0-9-]+$/.test(config.icon) ? /* @__PURE__ */ jsx(Icon, { name: config.icon }) : config.icon : /* @__PURE__ */ jsx(Icon, { icon: config.icon }) }),
+        /* @__PURE__ */ jsx(Box, { as: "span", children: assetUrl ? /* @__PURE__ */ 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__ */ jsx(Icon, { name: config.icon }) : config.icon : /* @__PURE__ */ jsx(Icon, { icon: config.icon }) }),
         /* @__PURE__ */ jsx(Box, { as: "span", children: displayLabel })
       ]
     }
   );
 }
-var DEFAULT_STATE_STYLES, DEFAULT_STYLE, SIZE_CLASSES;
+var DEFAULT_ASSET_URL3, DEFAULT_STATE_STYLES, DEFAULT_STYLE, SIZE_CLASSES;
 var init_StateIndicator = __esm({
   "components/game/atoms/StateIndicator.tsx"() {
     init_Box();
     init_Icon();
     init_cn();
+    DEFAULT_ASSET_URL3 = "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" },
@@ -7475,6 +7514,7 @@ var init_TimerDisplay = __esm({
   }
 });
 function ResourceCounter({
+  assetUrl = DEFAULT_ASSET_URL4,
   icon,
   label = "Gold",
   value = 250,
@@ -7494,7 +7534,17 @@ function ResourceCounter({
         className
       ),
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }),
+        assetUrl ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: assetUrl,
+            alt: label,
+            width: sizes.img,
+            height: sizes.img,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: "flex-shrink-0"
+          }
+        ) : icon ? /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
         /* @__PURE__ */ jsxs("span", { className: cn("font-bold tabular-nums", color && (color in colorTokenClasses2 ? colorTokenClasses2[color] : color)), children: [
           value,
@@ -7507,7 +7557,7 @@ function ResourceCounter({
     }
   );
 }
-var colorTokenClasses2, sizeMap5;
+var colorTokenClasses2, DEFAULT_ASSET_URL4, sizeMap5;
 var init_ResourceCounter = __esm({
   "components/game/atoms/ResourceCounter.tsx"() {
     init_cn();
@@ -7520,16 +7570,17 @@ var init_ResourceCounter = __esm({
       error: "text-error",
       muted: "text-muted-foreground"
     };
+    DEFAULT_ASSET_URL4 = "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_URL5,
   icon = "sword",
   label = "Iron Sword",
   quantity,
@@ -7588,7 +7639,7 @@ function ItemSlot({
     }
   );
 }
-var sizeMap6, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL, assetSizeMap;
+var sizeMap6, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL5, assetSizeMap;
 var init_ItemSlot = __esm({
   "components/game/atoms/ItemSlot.tsx"() {
     "use client";
@@ -7613,7 +7664,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_URL5 = "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png";
     assetSizeMap = {
       sm: 28,
       md: 40,
@@ -7623,6 +7674,7 @@ var init_ItemSlot = __esm({
   }
 });
 function TurnIndicator({
+  assetUrl = DEFAULT_ASSET_URL6,
   currentTurn = 1,
   maxTurns,
   activeTeam,
@@ -7655,14 +7707,24 @@ function TurnIndicator({
         ] }),
         activeTeam && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "|" }),
-          /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-success/20", sizes.dot) }),
+          assetUrl ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: assetUrl,
+              alt: "",
+              width: 12,
+              height: 12,
+              style: { imageRendering: "pixelated", objectFit: "contain" },
+              className: "flex-shrink-0"
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-success/20", sizes.dot) }),
           /* @__PURE__ */ jsx("span", { className: "text-success", children: activeTeam })
         ] })
       ]
     }
   );
 }
-var sizeMap7;
+var sizeMap7, DEFAULT_ASSET_URL6;
 var init_TurnIndicator = __esm({
   "components/game/atoms/TurnIndicator.tsx"() {
     init_cn();
@@ -7671,6 +7733,7 @@ var init_TurnIndicator = __esm({
       md: { wrapper: "text-sm gap-2 px-3 py-1", dot: "w-2 h-2" },
       lg: { wrapper: "text-base gap-2.5 px-4 py-1.5", dot: "w-2.5 h-2.5" }
     };
+    DEFAULT_ASSET_URL6 = "https://almadar-kflow-assets.web.app/shared/effects/particles/symbol_01.png";
     TurnIndicator.displayName = "TurnIndicator";
   }
 });
@@ -7686,6 +7749,7 @@ function getComboScale(combo) {
   return "";
 }
 function ComboCounter({
+  assetUrl = DEFAULT_ASSET_URL7,
   combo = 5,
   multiplier,
   streak,
@@ -7705,6 +7769,17 @@ function ComboCounter({
         className
       ),
       children: [
+        assetUrl && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: assetUrl,
+            alt: "combo",
+            width: 24,
+            height: 24,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: "flex-shrink-0 mb-0.5"
+          }
+        ),
         /* @__PURE__ */ jsx("span", { className: cn("font-black tabular-nums leading-none", sizes.combo, getComboIntensity(combo)), children: combo }),
         /* @__PURE__ */ jsx("span", { className: cn("font-bold uppercase tracking-wider text-muted-foreground", sizes.label), children: "combo" }),
         multiplier != null && multiplier > 1 && /* @__PURE__ */ jsxs("span", { className: cn("font-bold text-warning tabular-nums", sizes.multiplier), children: [
@@ -7719,10 +7794,11 @@ function ComboCounter({
     }
   );
 }
-var sizeMap8;
+var DEFAULT_ASSET_URL7, sizeMap8;
 var init_ComboCounter = __esm({
   "components/game/atoms/ComboCounter.tsx"() {
     init_cn();
+    DEFAULT_ASSET_URL7 = "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" },
@@ -7816,6 +7892,7 @@ var init_XPBar = __esm({
   }
 });
 function WaypointMarker({
+  assetUrl = DEFAULT_ASSET_URL8,
   label,
   icon,
   active = true,
@@ -7854,7 +7931,17 @@ function WaypointMarker({
             active && !completed && "bg-info text-foreground",
             !active && !completed && "bg-muted"
           ),
-          children: completed ? checkIcon : icon && (typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }))
+          children: completed ? checkIcon : assetUrl ? /* @__PURE__ */ 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__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) : null
         }
       )
     ] }),
@@ -7871,15 +7958,16 @@ function WaypointMarker({
     )
   ] });
 }
-var sizeMap10, checkIcon;
+var DEFAULT_ASSET_URL8, sizeMap10, checkIcon;
 var init_WaypointMarker = __esm({
   "components/game/atoms/WaypointMarker.tsx"() {
     init_cn();
     init_Icon();
+    DEFAULT_ASSET_URL8 = "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__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, className: "w-3/5 h-3/5", children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7", strokeLinecap: "round", strokeLinejoin: "round" }) });
     WaypointMarker.displayName = "WaypointMarker";
@@ -7892,6 +7980,7 @@ function formatDuration(seconds) {
   return `${Math.round(seconds)}s`;
 }
 function StatusEffect({
+  assetUrl = DEFAULT_ASSET_URL9,
   icon = "shield",
   label = "Shield",
   duration = 30,
@@ -7912,7 +8001,17 @@ function StatusEffect({
         ),
         title: label,
         children: [
-          /* @__PURE__ */ jsx("span", { className: cn("flex items-center justify-center", sizes.icon), children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm" }) : /* @__PURE__ */ jsx(Icon, { icon, size: "sm" }) }),
+          /* @__PURE__ */ jsx("span", { className: cn("flex items-center justify-center", sizes.icon), children: assetUrl ? /* @__PURE__ */ 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__ */ jsx(Icon, { name: icon, size: "sm" }) : /* @__PURE__ */ jsx(Icon, { icon, size: "sm" }) }),
           duration !== void 0 && /* @__PURE__ */ jsx(
             "span",
             {
@@ -7939,15 +8038,16 @@ function StatusEffect({
     label && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mt-0.5 text-center whitespace-nowrap", children: label })
   ] });
 }
-var sizeMap11, variantStyles7;
+var DEFAULT_ASSET_URL9, sizeMap11, variantStyles7;
 var init_StatusEffect = __esm({
   "components/game/atoms/StatusEffect.tsx"() {
     init_cn();
     init_Icon();
+    DEFAULT_ASSET_URL9 = "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",
@@ -7958,6 +8058,7 @@ var init_StatusEffect = __esm({
   }
 });
 function DamageNumber({
+  assetUrl = DEFAULT_ASSET_URL10,
   value = 42,
   type = "damage",
   size = "md",
@@ -7966,22 +8067,35 @@ function DamageNumber({
   const displayText = type === "miss" ? "MISS" : type === "heal" ? `+${value}` : `${value}`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { children: floatKeyframes }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "span",
       {
         className: cn(
-          "inline-block font-mono select-none pointer-events-none",
+          "inline-flex items-center gap-0.5 font-mono select-none pointer-events-none",
           sizeMap12[size],
           typeStyles[type],
           className
         ),
         style: { animation: "damageFloat 1s ease-out forwards" },
-        children: displayText
+        children: [
+          assetUrl && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: assetUrl,
+              alt: "",
+              width: 14,
+              height: 14,
+              style: { imageRendering: "pixelated", objectFit: "contain" },
+              className: "flex-shrink-0"
+            }
+          ),
+          displayText
+        ]
       }
     )
   ] });
 }
-var sizeMap12, typeStyles, floatKeyframes;
+var sizeMap12, typeStyles, floatKeyframes, DEFAULT_ASSET_URL10;
 var init_DamageNumber = __esm({
   "components/game/atoms/DamageNumber.tsx"() {
     init_cn();
@@ -8003,6 +8117,7 @@ var init_DamageNumber = __esm({
   100% { opacity: 0; transform: translateY(-32px) scale(0.8); }
 }
 `;
+    DEFAULT_ASSET_URL10 = "https://almadar-kflow-assets.web.app/shared/effects/particles/spark_01.png";
     DamageNumber.displayName = "DamageNumber";
   }
 });
@@ -8091,6 +8206,7 @@ var init_ChoiceButton = __esm({
   }
 });
 function ActionButton({
+  assetUrl = DEFAULT_ASSET_URL11,
   label = "Attack",
   icon,
   cooldown = 0,
@@ -8130,13 +8246,23 @@ function ActionButton({
             }
           }
         ),
-        icon && /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? (() => {
+        assetUrl ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: assetUrl,
+            alt: "",
+            width: 16,
+            height: 16,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: cn("flex-shrink-0", sizes.icon)
+          }
+        ) : icon ? /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? (() => {
           const I = resolveIcon(icon);
           return I ? /* @__PURE__ */ jsx(I, { className: "w-4 h-4" }) : null;
         })() : /* @__PURE__ */ (() => {
           const I = icon;
           return /* @__PURE__ */ jsx(I, { className: "w-4 h-4" });
-        })() }),
+        })() }) : null,
         /* @__PURE__ */ jsx("span", { className: "relative z-10", children: label }),
         hotkey && /* @__PURE__ */ jsx(
           "span",
@@ -8152,7 +8278,7 @@ function ActionButton({
     }
   );
 }
-var sizeMap13, variantStyles8;
+var sizeMap13, variantStyles8, DEFAULT_ASSET_URL11;
 var init_ActionButton = __esm({
   "components/game/atoms/ActionButton.tsx"() {
     init_cn();
@@ -8167,6 +8293,7 @@ var init_ActionButton = __esm({
       secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover border-border",
       danger: "bg-error text-error-foreground hover:bg-error/90 border-error"
     };
+    DEFAULT_ASSET_URL11 = "https://almadar-kflow-assets.web.app/shared/effects/particles/slash_01.png";
     ActionButton.displayName = "ActionButton";
   }
 });
@@ -9035,10 +9162,10 @@ var init_Container = __esm({
       center = true,
       className,
       children,
-      as: Component = "div"
+      as: Component2 = "div"
     }) => {
       const resolvedSize = maxWidth ?? size ?? "lg";
-      const Comp = Component;
+      const Comp = Component2;
       return /* @__PURE__ */ jsx(
         Comp,
         {
@@ -11860,15 +11987,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 } = useTranslate();
   const [hoveredTile, setHoveredTile] = useState(null);
@@ -11889,7 +12016,7 @@ function BattleBoard({
   const validMoves = 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++) {
@@ -20174,15 +20301,24 @@ function CastleBoard({
   featureClickEvent,
   unitClickEvent,
   tileClickEvent,
+  playAgainEvent,
   className
 }) {
   const eventBus = useEventBus();
+  const { t } = 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] = useState(null);
   const [selectedFeature, setSelectedFeature] = useState(null);
   const hoveredFeature = useMemo(() => {
@@ -20195,7 +20331,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 = useCallback(
     (tx, ty) => isoToScreen(tx, ty, scale, baseOffsetX),
@@ -20230,6 +20366,11 @@ function CastleBoard({
     }
   }, [units, onUnitClick, unitClickEvent, eventBus]);
   const clearSelection = useCallback(() => setSelectedFeature(null), []);
+  const handlePlayAgain = useCallback(() => {
+    if (playAgainEvent) {
+      eventBus.emit(`UI:${playAgainEvent}`, {});
+    }
+  }, [playAgainEvent, eventBus]);
   const ctx = useMemo(
     () => ({
       hoveredTile,
@@ -20238,11 +20379,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__ */ jsxs("div", { className: cn("castle-board min-h-screen flex flex-col bg-background", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("castle-board relative min-h-screen flex flex-col bg-background", className), children: [
     header && header(ctx),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto p-4 relative", children: [
@@ -20267,7 +20415,29 @@ function CastleBoard({
       ] }),
       sidePanel && /* @__PURE__ */ 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__ */ jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center bg-background/70 backdrop-blur-sm rounded-container", children: /* @__PURE__ */ jsxs(VStack, { className: "text-center p-8", gap: "lg", children: [
+      /* @__PURE__ */ 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__ */ jsx(
+        Button,
+        {
+          variant: "primary",
+          className: "px-8 py-3 font-semibold",
+          onClick: handlePlayAgain,
+          children: t("battle.playAgain")
+        }
+      )
+    ] }) })
   ] });
 }
 var init_CastleBoard = __esm({
@@ -20275,6 +20445,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();
@@ -21151,22 +21325,16 @@ function ClassifierBoard({
   const { emit } = useEventBus();
   const { t } = useTranslate();
   const resolved = boardEntity(entity);
-  const [localAssignments, setLocalAssignments] = useState({});
   const [headerError, setHeaderError] = useState(false);
-  const [localSubmitted, setLocalSubmitted] = useState(false);
-  const [localAttempts, setLocalAttempts] = useState(0);
-  const [showHint, setShowHint] = 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) => ({
@@ -21174,54 +21342,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 = 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;
@@ -21260,17 +21399,17 @@ function ClassifierBoard({
               /* @__PURE__ */ jsx(Badge, { size: "sm", children: catItems.length })
             ] }),
             /* @__PURE__ */ 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__ */ 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__ */ jsx("img", { src: item.iconUrl, alt: "", className: "w-3 h-3 object-contain inline-block" }),
                     item.label,
-                    result && /* @__PURE__ */ jsx(Icon, { icon: result.correct ? CheckCircle : XCircle, size: "xs", className: result.correct ? "text-success" : "text-error" })
+                    result2 && /* @__PURE__ */ jsx(Icon, { icon: result2.correct ? CheckCircle : XCircle, size: "xs", className: result2.correct ? "text-success" : "text-error" })
                   ]
                 },
                 item.id
@@ -21299,10 +21438,10 @@ function ClassifierBoard({
         ] }) }),
         showHint && hint && /* @__PURE__ */ jsx(Card, { className: "p-4 border-l-4 border-l-warning", children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: hint }) }),
         /* @__PURE__ */ jsxs(HStack, { gap: "sm", justify: "center", children: [
-          !submitted ? /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: handleSubmit, disabled: !allAssigned, children: [
+          !submitted && /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: handleSubmit, disabled: !allAssigned, children: [
             /* @__PURE__ */ jsx(Icon, { icon: Send, size: "sm" }),
             t("classifier.check")
-          ] }) : !allCorrect ? /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: handleReset, children: t("classifier.tryAgain") }) : null,
+          ] }),
           /* @__PURE__ */ jsxs(Button, { variant: "secondary", onClick: handleFullReset, children: [
             /* @__PURE__ */ jsx(Icon, { icon: RotateCcw, size: "sm" }),
             t("classifier.reset")
@@ -25020,7 +25159,7 @@ var init_Flex = __esm({
       basis,
       className,
       children,
-      as: Component = "div"
+      as: Component2 = "div"
     }) => {
       const flexStyle = {};
       if (grow !== void 0 || shrink !== void 0 || basis !== void 0) {
@@ -25032,7 +25171,7 @@ var init_Flex = __esm({
           flexStyle.flexBasis = typeof basis === "number" ? `${basis}px` : basis;
         }
       }
-      const Comp = Component;
+      const Comp = Component2;
       return /* @__PURE__ */ jsx(
         Comp,
         {
@@ -25152,11 +25291,11 @@ var init_Grid = __esm({
       className,
       style,
       children,
-      as: Component = "div"
+      as: Component2 = "div"
     }) => {
       const mergedStyle = rows2 ? { gridTemplateRows: `repeat(${rows2}, minmax(0, 1fr))`, ...style } : style;
       return React83__default.createElement(
-        Component,
+        Component2,
         {
           className: cn(
             "grid",
@@ -26982,6 +27121,7 @@ var init_ProgressDots = __esm({
   }
 });
 function StatBadge({
+  assetUrl = DEFAULT_ASSET_URL12,
   label,
   value = 0,
   max,
@@ -27005,7 +27145,17 @@ function StatBadge({
         className
       ),
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-lg", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Icon, { icon, className: "w-4 h-4" }) }),
+        assetUrl ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: assetUrl,
+            alt: "",
+            width: 16,
+            height: 16,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: "flex-shrink-0"
+          }
+        ) : icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-lg", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Icon, { icon, className: "w-4 h-4" }) }) : null,
         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium", children: label }),
         format === "hearts" && max && /* @__PURE__ */ jsx(
           HealthBar,
@@ -27038,7 +27188,7 @@ function StatBadge({
     }
   );
 }
-var sizeMap17, variantMap2;
+var sizeMap17, variantMap2, DEFAULT_ASSET_URL12;
 var init_StatBadge = __esm({
   "components/game/molecules/StatBadge.tsx"() {
     init_cn();
@@ -27057,6 +27207,7 @@ var init_StatBadge = __esm({
       warning: "bg-warning/15 border-warning/40 text-foreground",
       danger: "bg-error/15 border-error/40 text-foreground"
     };
+    DEFAULT_ASSET_URL12 = "https://almadar-kflow-assets.web.app/shared/effects/particles/light_01.png";
     StatBadge.displayName = "StatBadge";
   }
 });
@@ -27713,6 +27864,7 @@ var init_TurnPanel = __esm({
   }
 });
 function EnemyPlate({
+  assetUrl = DEFAULT_ASSET_URL13,
   name = "Shadow Guard",
   health = 80,
   maxHealth = 100,
@@ -27730,15 +27882,28 @@ function EnemyPlate({
       ),
       children: [
         /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "caption",
-              weight: "bold",
-              className: "text-[var(--color-foreground)] truncate",
-              children: name
-            }
-          ),
+          /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-1.5 min-w-0", children: [
+            assetUrl && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: assetUrl,
+                alt: name,
+                width: 24,
+                height: 24,
+                style: { objectFit: "cover", borderRadius: "50%" },
+                className: "flex-shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "caption",
+                weight: "bold",
+                className: "text-[var(--color-foreground)] truncate",
+                children: name
+              }
+            )
+          ] }),
           level != null && /* @__PURE__ */ jsxs(Badge, { variant: "neutral", size: "sm", children: [
             "Lv.",
             level
@@ -27783,7 +27948,7 @@ function EnemyPlate({
     }
   );
 }
-var effectVariantMap2, DEFAULT_ENEMY_EFFECTS;
+var effectVariantMap2, DEFAULT_ENEMY_EFFECTS, DEFAULT_ASSET_URL13;
 var init_EnemyPlate = __esm({
   "components/game/molecules/EnemyPlate.tsx"() {
     "use client";
@@ -27800,6 +27965,7 @@ var init_EnemyPlate = __esm({
     DEFAULT_ENEMY_EFFECTS = [
       { icon: "flame", label: "Burn", variant: "debuff" }
     ];
+    DEFAULT_ASSET_URL13 = "https://almadar-kflow-assets.web.app/shared/portraits/shadow-legion.png";
     EnemyPlate.displayName = "EnemyPlate";
   }
 });
@@ -29331,13 +29497,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect73, useRef: useRef68, useCallback: useCallback112, useState: useState104 } = React83__default;
+      const { useEffect: useEffect79, useRef: useRef74, useCallback: useCallback118, useState: useState109 } = React83__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
-      const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
+      const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef68({ centerLat, centerLng, zoom });
-        useEffect73(() => {
+        const prevRef = useRef74({ centerLat, centerLng, zoom });
+        useEffect79(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -29348,7 +29514,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect73(() => {
+        useEffect79(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -29375,9 +29541,9 @@ var init_MapView = __esm({
         className,
         showAttribution = true
       }) {
-        const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState104(null);
-        const handleMapClick = useCallback112((lat, lng) => {
+        const eventBus = useEventBus3();
+        const [clickedPosition, setClickedPosition] = useState109(null);
+        const handleMapClick = useCallback118((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -29386,7 +29552,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback112((marker) => {
+        const handleMarkerClick = useCallback118((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -36513,10 +36679,10 @@ var init_Section = __esm({
       children,
       headerClassName,
       contentClassName,
-      as: Component = "section"
+      as: Component2 = "section"
     }) => {
       const hasHeader = title || description || action;
-      const Comp = Component;
+      const Comp = Component2;
       return /* @__PURE__ */ jsxs(
         Comp,
         {
@@ -38617,44 +38783,27 @@ function DebuggerBoard({
   const { t } = useTranslate();
   const resolved = boardEntity(entity);
   const [headerError, setHeaderError] = useState(false);
-  const [showHint, setShowHint] = 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 = 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;
@@ -38678,7 +38827,7 @@ function DebuggerBoard({
             /* @__PURE__ */ jsx(Typography, { variant: "h4", weight: "bold", children: str(resolved.title) })
           ] }),
           /* @__PURE__ */ jsx(Typography, { variant: "body", children: str(resolved.description) }),
-          /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: t("debugger.findBugs", { count: String(num(resolved.bugCount)) }) })
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: t("debugger.findBugs", { count: String(lines.filter((l) => l.isBug).length) }) })
         ] }) }),
         /* @__PURE__ */ jsx(Card, { className: "p-0 overflow-hidden", children: /* @__PURE__ */ jsx(VStack, { gap: "none", children: lines.map((line, i) => {
           const isFlagged = !!line.isFlagged;
@@ -38728,11 +38877,11 @@ function DebuggerBoard({
         ] }) }),
         showHint && hint && /* @__PURE__ */ jsx(Card, { className: "p-4 border-l-4 border-l-warning", children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: hint }) }),
         /* @__PURE__ */ jsxs(HStack, { gap: "sm", justify: "center", children: [
-          !submitted ? /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: handleSubmit, disabled: flaggedLines.length === 0, children: [
+          !submitted && /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: handleSubmit, disabled: flaggedLines.length === 0, children: [
             /* @__PURE__ */ jsx(Icon, { icon: Send, size: "sm" }),
             t("debugger.submit")
-          ] }) : !allCorrect ? /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: handleReset, children: t("debugger.tryAgain") }) : null,
-          /* @__PURE__ */ jsxs(Button, { variant: "secondary", onClick: handleFullReset, children: [
+          ] }),
+          /* @__PURE__ */ jsxs(Button, { variant: "secondary", onClick: handleReset, children: [
             /* @__PURE__ */ jsx(Icon, { icon: RotateCcw, size: "sm" }),
             t("debugger.reset")
           ] })
@@ -39733,39 +39882,40 @@ function EventHandlerBoard({
   stepDurationMs = 800,
   playEvent,
   completeEvent,
+  editRuleEvent,
+  playAgainEvent,
   className
 }) {
   const { emit } = useEventBus();
   const { t } = useTranslate();
   const resolved = boardEntity(entity);
-  const entityObjects = rows(resolved?.objects);
-  const [objects, setObjects] = 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] = useState(
-    entityObjects[0] ? objId(entityObjects[0]) : null
+    objects[0] ? objId(objects[0]) : null
   );
   const [headerError, setHeaderError] = useState(false);
-  const [playState, setPlayState] = useState("editing");
+  const [isPlaying, setIsPlaying] = useState(false);
   const [eventLog, setEventLog] = useState([]);
-  const [attempts, setAttempts] = useState(0);
   const timerRef = useRef(null);
   const logIdCounter = useRef(0);
   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 = 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 = useCallback((icon, message, status = "done") => {
     const id = `log-${logIdCounter.current++}`;
     setEventLog((prev) => [...prev, { id, timestamp: Date.now(), icon, message, status }]);
   }, []);
   const handlePlay = useCallback(() => {
-    if (playState !== "editing") return;
+    if (isPlaying || isSuccess) return;
     if (playEvent) emit(`UI:${playEvent}`, {});
-    setPlayState("playing");
+    setIsPlaying(true);
     setEventLog([]);
     const allRules = [];
     objects.forEach((obj) => {
@@ -39781,15 +39931,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();
@@ -39820,21 +39963,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 = useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
-    setPlayState("editing");
+    setIsPlaying(false);
     setEventLog([]);
   }, []);
   const handleReset = 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);
@@ -39903,12 +40044,12 @@ function EventHandlerBoard({
           {
             object: selectedObject,
             onRulesChange: handleRulesChange,
-            disabled: playState !== "editing"
+            disabled: isPlaying
           }
         ),
         eventLog.length > 0 && /* @__PURE__ */ jsx(EventLog, { entries: eventLog }),
-        playState === "success" && /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("eventHandler.chainComplete") }) }),
-        playState === "fail" && /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+        isSuccess && /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("eventHandler.chainComplete") }) }),
+        !isPlaying && !isSuccess && attempts > 0 && /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
           /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-container bg-warning/10 border border-warning/30 text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "body1", className: "text-foreground font-medium", children: t(encourageKey) }) }),
           showHint && /* @__PURE__ */ jsx(Box, { className: "p-3 rounded-container bg-accent/10 border border-accent/30", children: /* @__PURE__ */ jsxs(HStack, { className: "items-start", gap: "xs", children: [
             /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-accent font-bold shrink-0", children: "\u{1F4A1} " + t("game.hint") + ":" }),
@@ -39916,12 +40057,12 @@ function EventHandlerBoard({
           ] }) })
         ] }),
         /* @__PURE__ */ jsxs(HStack, { gap: "sm", children: [
-          playState === "fail" ? /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: handleTryAgain, children: "\u{1F504} " + t("puzzle.tryAgainButton") }) : /* @__PURE__ */ jsx(
+          !isPlaying && !isSuccess && attempts > 0 ? /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: handleTryAgain, children: "\u{1F504} " + t("puzzle.tryAgainButton") }) : /* @__PURE__ */ jsx(
             Button,
             {
               variant: "primary",
               onClick: handlePlay,
-              disabled: playState !== "editing",
+              disabled: isPlaying || isSuccess,
               children: "\u25B6 " + t("game.play")
             }
           ),
@@ -41106,6 +41247,1568 @@ var init_GameAudioToggle = __esm({
     GameAudioToggle.displayName = "GameAudioToggle";
   }
 });
+function detectAssetRoot(modelUrl) {
+  const idx = modelUrl.indexOf("/3d/");
+  if (idx !== -1) {
+    return modelUrl.substring(0, idx + 4);
+  }
+  return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
+}
+function createGLTFLoaderForUrl(url) {
+  const loader = new GLTFLoader();
+  loader.setResourcePath(detectAssetRoot(url));
+  return loader;
+}
+var AssetLoader;
+var init_AssetLoader = __esm({
+  "components/game/molecules/three/loaders/AssetLoader.ts"() {
+    AssetLoader = class {
+      constructor() {
+        __publicField(this, "objLoader");
+        __publicField(this, "textureLoader");
+        __publicField(this, "modelCache");
+        __publicField(this, "textureCache");
+        __publicField(this, "loadingPromises");
+        this.objLoader = new OBJLoader();
+        this.textureLoader = new THREE.TextureLoader();
+        this.modelCache = /* @__PURE__ */ new Map();
+        this.textureCache = /* @__PURE__ */ new Map();
+        this.loadingPromises = /* @__PURE__ */ new Map();
+      }
+      /**
+       * Load a GLB/GLTF model
+       * @param url - URL to the .glb or .gltf file
+       * @returns Promise with loaded model scene and animations
+       */
+      async loadModel(url) {
+        if (this.modelCache.has(url)) {
+          return this.modelCache.get(url);
+        }
+        if (this.loadingPromises.has(url)) {
+          return this.loadingPromises.get(url);
+        }
+        const loader = createGLTFLoaderForUrl(url);
+        const loadPromise = loader.loadAsync(url).then((gltf) => {
+          const result = {
+            scene: gltf.scene,
+            animations: gltf.animations || []
+          };
+          this.modelCache.set(url, result);
+          this.loadingPromises.delete(url);
+          return result;
+        }).catch((error) => {
+          this.loadingPromises.delete(url);
+          throw new Error(`Failed to load model ${url}: ${error.message}`);
+        });
+        this.loadingPromises.set(url, loadPromise);
+        return loadPromise;
+      }
+      /**
+       * Load an OBJ model (fallback for non-GLB assets)
+       * @param url - URL to the .obj file
+       * @returns Promise with loaded object group
+       */
+      async loadOBJ(url) {
+        if (this.modelCache.has(url)) {
+          return this.modelCache.get(url).scene;
+        }
+        if (this.loadingPromises.has(url)) {
+          const result = await this.loadingPromises.get(url);
+          return result.scene;
+        }
+        const loadPromise = this.objLoader.loadAsync(url).then((group) => {
+          const result = {
+            scene: group,
+            animations: []
+          };
+          this.modelCache.set(url, result);
+          this.loadingPromises.delete(url);
+          return result;
+        }).catch((error) => {
+          this.loadingPromises.delete(url);
+          throw new Error(`Failed to load OBJ ${url}: ${error.message}`);
+        });
+        this.loadingPromises.set(url, loadPromise);
+        return (await loadPromise).scene;
+      }
+      /**
+       * Load a texture
+       * @param url - URL to the texture image
+       * @returns Promise with loaded texture
+       */
+      async loadTexture(url) {
+        if (this.textureCache.has(url)) {
+          return this.textureCache.get(url);
+        }
+        if (this.loadingPromises.has(`texture:${url}`)) {
+          return this.loadingPromises.get(`texture:${url}`);
+        }
+        const loadPromise = this.textureLoader.loadAsync(url).then((texture) => {
+          texture.colorSpace = THREE.SRGBColorSpace;
+          this.textureCache.set(url, texture);
+          this.loadingPromises.delete(`texture:${url}`);
+          return texture;
+        }).catch((error) => {
+          this.loadingPromises.delete(`texture:${url}`);
+          throw new Error(`Failed to load texture ${url}: ${error.message}`);
+        });
+        this.loadingPromises.set(`texture:${url}`, loadPromise);
+        return loadPromise;
+      }
+      /**
+       * Preload multiple assets
+       * @param urls - Array of asset URLs to preload
+       * @returns Promise that resolves when all assets are loaded
+       */
+      async preload(urls) {
+        const promises = urls.map((url) => {
+          if (url.endsWith(".glb") || url.endsWith(".gltf")) {
+            return this.loadModel(url).catch(() => null);
+          } else if (url.endsWith(".obj")) {
+            return this.loadOBJ(url).catch(() => null);
+          } else if (/\.(png|jpg|jpeg|webp)$/i.test(url)) {
+            return this.loadTexture(url).catch(() => null);
+          }
+          return Promise.resolve(null);
+        });
+        await Promise.all(promises);
+      }
+      /**
+       * Check if a model is cached
+       * @param url - Model URL
+       */
+      hasModel(url) {
+        return this.modelCache.has(url);
+      }
+      /**
+       * Check if a texture is cached
+       * @param url - Texture URL
+       */
+      hasTexture(url) {
+        return this.textureCache.has(url);
+      }
+      /**
+       * Get cached model (throws if not cached)
+       * @param url - Model URL
+       */
+      getModel(url) {
+        const model = this.modelCache.get(url);
+        if (!model) {
+          throw new Error(`Model ${url} not in cache`);
+        }
+        return model;
+      }
+      /**
+       * Get cached texture (throws if not cached)
+       * @param url - Texture URL
+       */
+      getTexture(url) {
+        const texture = this.textureCache.get(url);
+        if (!texture) {
+          throw new Error(`Texture ${url} not in cache`);
+        }
+        return texture;
+      }
+      /**
+       * Clear all caches
+       */
+      clearCache() {
+        this.textureCache.forEach((texture) => {
+          texture.dispose();
+        });
+        this.modelCache.forEach((model) => {
+          model.scene.traverse((child) => {
+            if (child instanceof THREE.Mesh) {
+              child.geometry.dispose();
+              if (Array.isArray(child.material)) {
+                child.material.forEach((m) => m.dispose());
+              } else {
+                child.material.dispose();
+              }
+            }
+          });
+        });
+        this.modelCache.clear();
+        this.textureCache.clear();
+        this.loadingPromises.clear();
+      }
+      /**
+       * Get cache statistics
+       */
+      getStats() {
+        return {
+          models: this.modelCache.size,
+          textures: this.textureCache.size,
+          loading: this.loadingPromises.size
+        };
+      }
+    };
+    new AssetLoader();
+  }
+});
+function useAssetLoader(options = {}) {
+  const { preloadUrls = [], loader: customLoader } = options;
+  const loaderRef = useRef(customLoader || new AssetLoader());
+  const [state, setState] = useState({
+    isLoading: false,
+    progress: 0,
+    loaded: 0,
+    total: 0,
+    errors: []
+  });
+  useEffect(() => {
+    if (preloadUrls.length > 0) {
+      preload(preloadUrls);
+    }
+  }, []);
+  const updateProgress = useCallback((loaded, total) => {
+    setState((prev) => ({
+      ...prev,
+      loaded,
+      total,
+      progress: total > 0 ? Math.round(loaded / total * 100) : 0
+    }));
+  }, []);
+  const loadModel = useCallback(
+    async (url) => {
+      setState((prev) => ({ ...prev, isLoading: true }));
+      try {
+        const model = await loaderRef.current.loadModel(url);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          loaded: prev.loaded + 1
+        }));
+        return model;
+      } catch (error) {
+        const errorMsg = error instanceof Error ? error.message : String(error);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          errors: [...prev.errors, errorMsg]
+        }));
+        throw error;
+      }
+    },
+    []
+  );
+  const loadOBJ = useCallback(
+    async (url) => {
+      setState((prev) => ({ ...prev, isLoading: true }));
+      try {
+        const model = await loaderRef.current.loadOBJ(url);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          loaded: prev.loaded + 1
+        }));
+        return model;
+      } catch (error) {
+        const errorMsg = error instanceof Error ? error.message : String(error);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          errors: [...prev.errors, errorMsg]
+        }));
+        throw error;
+      }
+    },
+    []
+  );
+  const loadTexture = useCallback(
+    async (url) => {
+      setState((prev) => ({ ...prev, isLoading: true }));
+      try {
+        const texture = await loaderRef.current.loadTexture(url);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          loaded: prev.loaded + 1
+        }));
+        return texture;
+      } catch (error) {
+        const errorMsg = error instanceof Error ? error.message : String(error);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          errors: [...prev.errors, errorMsg]
+        }));
+        throw error;
+      }
+    },
+    []
+  );
+  const preload = useCallback(
+    async (urls) => {
+      setState((prev) => ({
+        ...prev,
+        isLoading: true,
+        total: urls.length,
+        loaded: 0,
+        errors: []
+      }));
+      let completed = 0;
+      const errors = [];
+      await Promise.all(
+        urls.map(async (url) => {
+          try {
+            if (url.endsWith(".glb") || url.endsWith(".gltf")) {
+              await loaderRef.current.loadModel(url);
+            } else if (url.endsWith(".obj")) {
+              await loaderRef.current.loadOBJ(url);
+            } else if (/\.(png|jpg|jpeg|webp)$/i.test(url)) {
+              await loaderRef.current.loadTexture(url);
+            }
+            completed++;
+            updateProgress(completed, urls.length);
+          } catch (error) {
+            const errorMsg = error instanceof Error ? error.message : String(error);
+            errors.push(`${url}: ${errorMsg}`);
+            completed++;
+            updateProgress(completed, urls.length);
+          }
+        })
+      );
+      setState((prev) => ({
+        ...prev,
+        isLoading: false,
+        errors
+      }));
+    },
+    [updateProgress]
+  );
+  const hasModel = useCallback((url) => {
+    return loaderRef.current.hasModel(url);
+  }, []);
+  const hasTexture = useCallback((url) => {
+    return loaderRef.current.hasTexture(url);
+  }, []);
+  const getModel = useCallback((url) => {
+    try {
+      return loaderRef.current.getModel(url);
+    } catch {
+      return void 0;
+    }
+  }, []);
+  const getTexture = useCallback((url) => {
+    try {
+      return loaderRef.current.getTexture(url);
+    } catch {
+      return void 0;
+    }
+  }, []);
+  const clearCache = useCallback(() => {
+    loaderRef.current.clearCache();
+    setState({
+      isLoading: false,
+      progress: 0,
+      loaded: 0,
+      total: 0,
+      errors: []
+    });
+  }, []);
+  return {
+    ...state,
+    loadModel,
+    loadOBJ,
+    loadTexture,
+    preload,
+    hasModel,
+    hasTexture,
+    getModel,
+    getTexture,
+    clearCache
+  };
+}
+var init_useAssetLoader = __esm({
+  "components/game/molecules/three/hooks/useAssetLoader.ts"() {
+    "use client";
+    init_AssetLoader();
+  }
+});
+function useGameCanvas3DEvents(options) {
+  const {
+    tileClickEvent,
+    unitClickEvent,
+    featureClickEvent,
+    canvasClickEvent,
+    tileHoverEvent,
+    tileLeaveEvent,
+    unitAnimationEvent,
+    cameraChangeEvent,
+    onTileClick,
+    onUnitClick,
+    onFeatureClick,
+    onCanvasClick,
+    onTileHover,
+    onUnitAnimation
+  } = options;
+  const emit = useEmitEvent();
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const handleTileClick = useCallback(
+    (tile, event) => {
+      if (tileClickEvent) {
+        emit(tileClickEvent, {
+          tileId: tile.id,
+          x: tile.x,
+          z: tile.z ?? tile.y ?? 0,
+          type: tile.type,
+          terrain: tile.terrain,
+          elevation: tile.elevation
+        });
+      }
+      optionsRef.current.onTileClick?.(tile, event);
+    },
+    [tileClickEvent, emit]
+  );
+  const handleUnitClick = useCallback(
+    (unit, event) => {
+      if (unitClickEvent) {
+        emit(unitClickEvent, {
+          unitId: unit.id,
+          x: unit.x,
+          z: unit.z ?? unit.y ?? 0,
+          unitType: unit.unitType,
+          name: unit.name,
+          team: unit.team,
+          faction: unit.faction,
+          health: unit.health,
+          maxHealth: unit.maxHealth
+        });
+      }
+      optionsRef.current.onUnitClick?.(unit, event);
+    },
+    [unitClickEvent, emit]
+  );
+  const handleFeatureClick = useCallback(
+    (feature, event) => {
+      if (featureClickEvent) {
+        emit(featureClickEvent, {
+          featureId: feature.id,
+          x: feature.x,
+          z: feature.z ?? feature.y ?? 0,
+          type: feature.type,
+          elevation: feature.elevation
+        });
+      }
+      optionsRef.current.onFeatureClick?.(feature, event);
+    },
+    [featureClickEvent, emit]
+  );
+  const handleCanvasClick = useCallback(
+    (event) => {
+      if (canvasClickEvent) {
+        emit(canvasClickEvent, {
+          clientX: event.clientX,
+          clientY: event.clientY,
+          button: event.button
+        });
+      }
+      optionsRef.current.onCanvasClick?.(event);
+    },
+    [canvasClickEvent, emit]
+  );
+  const handleTileHover = useCallback(
+    (tile, event) => {
+      if (tile) {
+        if (tileHoverEvent) {
+          emit(tileHoverEvent, {
+            tileId: tile.id,
+            x: tile.x,
+            z: tile.z ?? tile.y ?? 0,
+            type: tile.type
+          });
+        }
+      } else {
+        if (tileLeaveEvent) {
+          emit(tileLeaveEvent, {});
+        }
+      }
+      optionsRef.current.onTileHover?.(tile, event);
+    },
+    [tileHoverEvent, tileLeaveEvent, emit]
+  );
+  const handleUnitAnimation = useCallback(
+    (unitId, state) => {
+      if (unitAnimationEvent) {
+        emit(unitAnimationEvent, {
+          unitId,
+          state,
+          timestamp: Date.now()
+        });
+      }
+      optionsRef.current.onUnitAnimation?.(unitId, state);
+    },
+    [unitAnimationEvent, emit]
+  );
+  const handleCameraChange = useCallback(
+    (position) => {
+      if (cameraChangeEvent) {
+        emit(cameraChangeEvent, {
+          position,
+          timestamp: Date.now()
+        });
+      }
+    },
+    [cameraChangeEvent, emit]
+  );
+  return {
+    handleTileClick,
+    handleUnitClick,
+    handleFeatureClick,
+    handleCanvasClick,
+    handleTileHover,
+    handleUnitAnimation,
+    handleCameraChange
+  };
+}
+var init_useGameCanvas3DEvents = __esm({
+  "components/game/molecules/three/hooks/useGameCanvas3DEvents.ts"() {
+    "use client";
+    init_useEventBus();
+  }
+});
+
+// components/game/molecules/three/components/Canvas3DLoadingState.css
+var init_Canvas3DLoadingState = __esm({
+  "components/game/molecules/three/components/Canvas3DLoadingState.css"() {
+  }
+});
+function Canvas3DLoadingState({
+  progress = 0,
+  loaded = 0,
+  total = 0,
+  message = "Loading 3D Scene...",
+  details,
+  showSpinner = true,
+  className
+}) {
+  const clampedProgress = Math.max(0, Math.min(100, progress));
+  const hasProgress = total > 0;
+  return /* @__PURE__ */ jsxs("div", { className: `canvas-3d-loading ${className || ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "canvas-3d-loading__content", children: [
+      showSpinner && /* @__PURE__ */ jsxs("div", { className: "canvas-3d-loading__spinner", children: [
+        /* @__PURE__ */ jsx("div", { className: "spinner__ring" }),
+        /* @__PURE__ */ jsx("div", { className: "spinner__ring spinner__ring--secondary" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "canvas-3d-loading__message", children: message }),
+      details && /* @__PURE__ */ jsx("div", { className: "canvas-3d-loading__details", children: details }),
+      hasProgress && /* @__PURE__ */ jsxs("div", { className: "canvas-3d-loading__progress", children: [
+        /* @__PURE__ */ jsx("div", { className: "progress__bar", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "progress__fill",
+            style: { width: `${clampedProgress}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "progress__text", children: [
+          /* @__PURE__ */ jsxs("span", { className: "progress__percentage", children: [
+            clampedProgress,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "progress__count", children: [
+            "(",
+            loaded,
+            "/",
+            total,
+            ")"
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "canvas-3d-loading__background", children: /* @__PURE__ */ jsx("div", { className: "bg__grid" }) })
+  ] });
+}
+var init_Canvas3DLoadingState2 = __esm({
+  "components/game/molecules/three/components/Canvas3DLoadingState.tsx"() {
+    init_Canvas3DLoadingState();
+  }
+});
+
+// components/game/molecules/three/components/Canvas3DErrorBoundary.css
+var init_Canvas3DErrorBoundary = __esm({
+  "components/game/molecules/three/components/Canvas3DErrorBoundary.css"() {
+  }
+});
+var log11, Canvas3DErrorBoundary;
+var init_Canvas3DErrorBoundary2 = __esm({
+  "components/game/molecules/three/components/Canvas3DErrorBoundary.tsx"() {
+    init_Canvas3DErrorBoundary();
+    log11 = createLogger("almadar:ui:game:canvas3d:error-boundary");
+    Canvas3DErrorBoundary = class extends Component {
+      constructor(props) {
+        super(props);
+        __publicField(this, "handleReset", () => {
+          this.setState({
+            hasError: false,
+            error: null,
+            errorInfo: null
+          });
+          this.props.onReset?.();
+        });
+        this.state = {
+          hasError: false,
+          error: null,
+          errorInfo: null
+        };
+      }
+      static getDerivedStateFromError(error) {
+        return {
+          hasError: true,
+          error,
+          errorInfo: null
+        };
+      }
+      componentDidCatch(error, errorInfo) {
+        this.setState({ errorInfo });
+        this.props.onError?.(error, errorInfo);
+        log11.error("Error caught", { error });
+        log11.error("Component stack", { componentStack: errorInfo.componentStack ?? "<none>" });
+      }
+      render() {
+        if (this.state.hasError) {
+          if (this.props.fallback) {
+            return this.props.fallback;
+          }
+          return /* @__PURE__ */ jsx("div", { className: "canvas-3d-error", children: /* @__PURE__ */ jsxs("div", { className: "canvas-3d-error__content", children: [
+            /* @__PURE__ */ jsx("div", { className: "canvas-3d-error__icon", children: "\u26A0\uFE0F" }),
+            /* @__PURE__ */ jsx("h2", { className: "canvas-3d-error__title", children: "3D Scene Error" }),
+            /* @__PURE__ */ jsx("p", { className: "canvas-3d-error__message", children: "Something went wrong while rendering the 3D scene." }),
+            this.state.error && /* @__PURE__ */ jsxs("details", { className: "canvas-3d-error__details", children: [
+              /* @__PURE__ */ jsx("summary", { children: "Error Details" }),
+              /* @__PURE__ */ jsxs("pre", { className: "error__stack", children: [
+                this.state.error.message,
+                "\n",
+                this.state.error.stack
+              ] }),
+              this.state.errorInfo && /* @__PURE__ */ jsx("pre", { className: "error__component-stack", children: this.state.errorInfo.componentStack })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "canvas-3d-error__actions", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "error__button error__button--primary",
+                  onClick: this.handleReset,
+                  children: "Try Again"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "error__button error__button--secondary",
+                  onClick: () => window.location.reload(),
+                  children: "Reload Page"
+                }
+              )
+            ] })
+          ] }) });
+        }
+        return this.props.children;
+      }
+    };
+  }
+});
+function detectAssetRoot2(modelUrl) {
+  const idx = modelUrl.indexOf("/3d/");
+  if (idx !== -1) {
+    return modelUrl.substring(0, idx + 4);
+  }
+  return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
+}
+function useGLTFModel(url, resourceBasePath) {
+  const [state, setState] = useState({
+    model: null,
+    isLoading: false,
+    error: null
+  });
+  useEffect(() => {
+    if (!url) {
+      setState({ model: null, isLoading: false, error: null });
+      return;
+    }
+    log12.debug("Loading", { url });
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    const assetRoot = resourceBasePath || detectAssetRoot2(url);
+    const loader = new GLTFLoader$1();
+    loader.setResourcePath(assetRoot);
+    loader.load(
+      url,
+      (gltf) => {
+        log12.debug("Loaded", { url });
+        setState({
+          model: gltf.scene,
+          isLoading: false,
+          error: null
+        });
+      },
+      void 0,
+      (err) => {
+        log12.warn("Failed", { url, error: err instanceof Error ? err : String(err) });
+        setState({
+          model: null,
+          isLoading: false,
+          error: err instanceof Error ? err : new Error(String(err))
+        });
+      }
+    );
+  }, [url, resourceBasePath]);
+  return state;
+}
+function ModelLoader({
+  url,
+  position = [0, 0, 0],
+  scale = 1,
+  rotation = [0, 0, 0],
+  isSelected = false,
+  isHovered = false,
+  onClick,
+  onHover,
+  fallbackGeometry = "box",
+  castShadow = true,
+  receiveShadow = true,
+  resourceBasePath
+}) {
+  const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
+  const model = useMemo(() => {
+    if (!loadedModel) return null;
+    const cloned = loadedModel.clone();
+    cloned.traverse((child) => {
+      if (child instanceof THREE.Mesh) {
+        child.castShadow = castShadow;
+        child.receiveShadow = receiveShadow;
+      }
+    });
+    return cloned;
+  }, [loadedModel, castShadow, receiveShadow]);
+  const scaleArray = useMemo(() => {
+    if (typeof scale === "number") {
+      return [scale, scale, scale];
+    }
+    return scale;
+  }, [scale]);
+  const rotationRad = useMemo(() => {
+    return [
+      rotation[0] * Math.PI / 180,
+      rotation[1] * Math.PI / 180,
+      rotation[2] * Math.PI / 180
+    ];
+  }, [rotation]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("group", { position, children: /* @__PURE__ */ jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
+      /* @__PURE__ */ jsx("ringGeometry", { args: [0.3, 0.35, 16] }),
+      /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#4a90d9", transparent: true, opacity: 0.8 })
+    ] }) });
+  }
+  if (error || !model) {
+    if (fallbackGeometry === "none") {
+      return /* @__PURE__ */ jsx("group", { position });
+    }
+    const fallbackProps = {
+      onClick,
+      onPointerOver: () => onHover?.(true),
+      onPointerOut: () => onHover?.(false)
+    };
+    return /* @__PURE__ */ jsxs("group", { position, children: [
+      (isSelected || isHovered) && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.02, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+        /* @__PURE__ */ jsx("ringGeometry", { args: [0.6, 0.7, 32] }),
+        /* @__PURE__ */ jsx(
+          "meshBasicMaterial",
+          {
+            color: isSelected ? 16755200 : 16777215,
+            transparent: true,
+            opacity: 0.5
+          }
+        )
+      ] }),
+      fallbackGeometry === "box" && /* @__PURE__ */ jsxs("mesh", { ...fallbackProps, position: [0, 0.5, 0], children: [
+        /* @__PURE__ */ jsx("boxGeometry", { args: [0.8, 0.8, 0.8] }),
+        /* @__PURE__ */ jsx("meshStandardMaterial", { color: error ? 16729156 : 8947848 })
+      ] }),
+      fallbackGeometry === "sphere" && /* @__PURE__ */ jsxs("mesh", { ...fallbackProps, position: [0, 0.5, 0], children: [
+        /* @__PURE__ */ jsx("sphereGeometry", { args: [0.4, 16, 16] }),
+        /* @__PURE__ */ jsx("meshStandardMaterial", { color: error ? 16729156 : 8947848 })
+      ] }),
+      fallbackGeometry === "cylinder" && /* @__PURE__ */ jsxs("mesh", { ...fallbackProps, position: [0, 0.5, 0], children: [
+        /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.3, 0.3, 0.8, 16] }),
+        /* @__PURE__ */ jsx("meshStandardMaterial", { color: error ? 16729156 : 8947848 })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "group",
+    {
+      position,
+      rotation: rotationRad,
+      onClick,
+      onPointerOver: () => onHover?.(true),
+      onPointerOut: () => onHover?.(false),
+      children: [
+        (isSelected || isHovered) && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.02, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+          /* @__PURE__ */ jsx("ringGeometry", { args: [0.6, 0.7, 32] }),
+          /* @__PURE__ */ jsx(
+            "meshBasicMaterial",
+            {
+              color: isSelected ? 16755200 : 16777215,
+              transparent: true,
+              opacity: 0.5
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("primitive", { object: model, scale: scaleArray })
+      ]
+    }
+  );
+}
+var log12;
+var init_ModelLoader = __esm({
+  "components/game/molecules/three/components/ModelLoader.tsx"() {
+    "use client";
+    log12 = createLogger("almadar:ui:game:model-loader");
+  }
+});
+
+// components/game/molecules/GameCanvas3D.css
+var init_GameCanvas3D = __esm({
+  "components/game/molecules/GameCanvas3D.css"() {
+  }
+});
+function CameraController({
+  onCameraChange
+}) {
+  const { camera } = useThree();
+  useEffect(() => {
+    if (onCameraChange) {
+      onCameraChange({
+        x: camera.position.x,
+        y: camera.position.y,
+        z: camera.position.z
+      });
+    }
+  }, [camera.position, onCameraChange]);
+  return null;
+}
+var DEFAULT_GRID_CONFIG, GameCanvas3D;
+var init_GameCanvas3D2 = __esm({
+  "components/game/molecules/GameCanvas3D.tsx"() {
+    "use client";
+    init_AssetLoader();
+    init_useAssetLoader();
+    init_useGameCanvas3DEvents();
+    init_Canvas3DLoadingState2();
+    init_Canvas3DErrorBoundary2();
+    init_ModelLoader();
+    init_cn();
+    init_GameCanvas3D();
+    DEFAULT_GRID_CONFIG = {
+      cellSize: 1,
+      offsetX: 0,
+      offsetZ: 0
+    };
+    GameCanvas3D = forwardRef(
+      ({
+        tiles = [],
+        units = [],
+        features = [],
+        events: events2 = [],
+        orientation = "standard",
+        cameraMode = "isometric",
+        showGrid = true,
+        showCoordinates = false,
+        showTileInfo = false,
+        overlay = "default",
+        shadows = true,
+        backgroundColor = "#1a1a2e",
+        onTileClick,
+        onUnitClick,
+        onFeatureClick,
+        onCanvasClick,
+        onTileHover,
+        onUnitAnimation,
+        assetLoader: customAssetLoader,
+        tileRenderer: CustomTileRenderer,
+        unitRenderer: CustomUnitRenderer,
+        featureRenderer: CustomFeatureRenderer,
+        className,
+        isLoading: externalLoading,
+        error: externalError,
+        entity,
+        preloadAssets = [],
+        tileClickEvent,
+        unitClickEvent,
+        featureClickEvent,
+        canvasClickEvent,
+        tileHoverEvent,
+        tileLeaveEvent,
+        unitAnimationEvent,
+        cameraChangeEvent,
+        loadingMessage = "Loading 3D Scene...",
+        useInstancing = true,
+        validMoves = [],
+        attackTargets = [],
+        selectedTileIds = [],
+        selectedUnitId = null,
+        children
+      }, ref) => {
+        const containerRef = useRef(null);
+        const controlsRef = useRef(null);
+        const [hoveredTile, setHoveredTile] = useState(null);
+        const [internalError, setInternalError] = useState(null);
+        const { isLoading: assetsLoading, progress, loaded, total } = useAssetLoader({
+          preloadUrls: preloadAssets,
+          loader: customAssetLoader
+        });
+        const eventHandlers = useGameCanvas3DEvents({
+          tileClickEvent,
+          unitClickEvent,
+          featureClickEvent,
+          canvasClickEvent,
+          tileHoverEvent,
+          tileLeaveEvent,
+          unitAnimationEvent,
+          cameraChangeEvent,
+          onTileClick,
+          onUnitClick,
+          onFeatureClick,
+          onCanvasClick,
+          onTileHover,
+          onUnitAnimation
+        });
+        const gridBounds = useMemo(() => {
+          if (tiles.length === 0) {
+            return { minX: 0, maxX: 10, minZ: 0, maxZ: 10 };
+          }
+          const xs = tiles.map((t) => t.x);
+          const zs = tiles.map((t) => t.z || t.y || 0);
+          return {
+            minX: Math.min(...xs),
+            maxX: Math.max(...xs),
+            minZ: Math.min(...zs),
+            maxZ: Math.max(...zs)
+          };
+        }, [tiles]);
+        const cameraTarget = useMemo(() => {
+          return [
+            (gridBounds.minX + gridBounds.maxX) / 2,
+            0,
+            (gridBounds.minZ + gridBounds.maxZ) / 2
+          ];
+        }, [gridBounds]);
+        const gridConfig = useMemo(
+          () => ({
+            ...DEFAULT_GRID_CONFIG,
+            offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
+            offsetZ: -(gridBounds.maxZ - gridBounds.minZ) / 2
+          }),
+          [gridBounds]
+        );
+        const gridToWorld = useCallback(
+          (x, z, y = 0) => {
+            const worldX = (x - gridBounds.minX) * gridConfig.cellSize;
+            const worldZ = (z - gridBounds.minZ) * gridConfig.cellSize;
+            return [worldX, y * gridConfig.cellSize, worldZ];
+          },
+          [gridBounds, gridConfig]
+        );
+        useImperativeHandle(ref, () => ({
+          getCameraPosition: () => {
+            if (controlsRef.current) {
+              const pos = controlsRef.current.object.position;
+              return new THREE.Vector3(pos.x, pos.y, pos.z);
+            }
+            return null;
+          },
+          setCameraPosition: (x, y, z) => {
+            if (controlsRef.current) {
+              controlsRef.current.object.position.set(x, y, z);
+              controlsRef.current.update();
+            }
+          },
+          lookAt: (x, y, z) => {
+            if (controlsRef.current) {
+              controlsRef.current.target.set(x, y, z);
+              controlsRef.current.update();
+            }
+          },
+          resetCamera: () => {
+            if (controlsRef.current) {
+              controlsRef.current.reset();
+            }
+          },
+          screenshot: () => {
+            const canvas = containerRef.current?.querySelector("canvas");
+            if (canvas) {
+              return canvas.toDataURL("image/png");
+            }
+            return null;
+          },
+          export: () => ({
+            tiles,
+            units,
+            features
+          })
+        }));
+        const handleTileClick = useCallback(
+          (tile, event) => {
+            eventHandlers.handleTileClick(tile, event);
+          },
+          [eventHandlers]
+        );
+        const handleUnitClick = useCallback(
+          (unit, event) => {
+            eventHandlers.handleUnitClick(unit, event);
+          },
+          [eventHandlers]
+        );
+        const handleFeatureClick = useCallback(
+          (feature, event) => {
+            if (event) {
+              eventHandlers.handleFeatureClick(feature, event);
+            }
+          },
+          [eventHandlers]
+        );
+        const handleTileHover = useCallback(
+          (tile, event) => {
+            setHoveredTile(tile);
+            if (event) {
+              eventHandlers.handleTileHover(tile, event);
+            }
+          },
+          [eventHandlers]
+        );
+        const cameraConfig = useMemo(() => {
+          const size = Math.max(
+            gridBounds.maxX - gridBounds.minX,
+            gridBounds.maxZ - gridBounds.minZ
+          );
+          const distance = size * 1.5;
+          switch (cameraMode) {
+            case "isometric":
+              return {
+                position: [distance, distance * 0.8, distance],
+                fov: 45
+              };
+            case "top-down":
+              return {
+                position: [0, distance * 2, 0],
+                fov: 45
+              };
+            case "perspective":
+            default:
+              return {
+                position: [distance, distance, distance],
+                fov: 45
+              };
+          }
+        }, [cameraMode, gridBounds]);
+        const DefaultTileRenderer = useCallback(
+          ({ tile, position }) => {
+            const isSelected = tile.id ? selectedTileIds.includes(tile.id) : false;
+            const isHovered = hoveredTile?.id === tile.id;
+            const isValidMove = validMoves.some(
+              (m) => m.x === tile.x && m.z === (tile.z ?? tile.y ?? 0)
+            );
+            const isAttackTarget = attackTargets.some(
+              (m) => m.x === tile.x && m.z === (tile.z ?? tile.y ?? 0)
+            );
+            let color = 8421504;
+            if (tile.type === "water") color = 4491468;
+            else if (tile.type === "grass") color = 4500036;
+            else if (tile.type === "sand") color = 14535816;
+            else if (tile.type === "rock") color = 8947848;
+            else if (tile.type === "snow") color = 15658734;
+            let emissive = 0;
+            if (isSelected) emissive = 4473924;
+            else if (isAttackTarget) emissive = 4456448;
+            else if (isValidMove) emissive = 17408;
+            else if (isHovered) emissive = 2236962;
+            if (tile.modelUrl) {
+              return /* @__PURE__ */ jsx(
+                "group",
+                {
+                  position,
+                  onClick: (e) => handleTileClick(tile, e),
+                  onPointerEnter: (e) => handleTileHover(tile, e),
+                  onPointerLeave: (e) => handleTileHover(null, e),
+                  userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
+                  children: /* @__PURE__ */ jsx(
+                    ModelLoader,
+                    {
+                      url: tile.modelUrl,
+                      scale: 0.95,
+                      fallbackGeometry: "box",
+                      castShadow: true,
+                      receiveShadow: true
+                    }
+                  )
+                }
+              );
+            }
+            return /* @__PURE__ */ jsxs(
+              "mesh",
+              {
+                position,
+                onClick: (e) => handleTileClick(tile, e),
+                onPointerEnter: (e) => handleTileHover(tile, e),
+                onPointerLeave: (e) => handleTileHover(null, e),
+                userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
+                children: [
+                  /* @__PURE__ */ jsx("boxGeometry", { args: [0.95, 0.2, 0.95] }),
+                  /* @__PURE__ */ jsx("meshStandardMaterial", { color, emissive })
+                ]
+              }
+            );
+          },
+          [selectedTileIds, hoveredTile, validMoves, attackTargets, handleTileClick, handleTileHover]
+        );
+        const DefaultUnitRenderer = useCallback(
+          ({ unit, position }) => {
+            const isSelected = selectedUnitId === unit.id;
+            const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
+            return /* @__PURE__ */ jsxs(
+              "group",
+              {
+                position,
+                onClick: (e) => handleUnitClick(unit, e),
+                userData: { type: "unit", unitId: unit.id },
+                children: [
+                  isSelected && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.05, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+                    /* @__PURE__ */ jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
+                    /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#ffff00", transparent: true, opacity: 0.8 })
+                  ] }),
+                  unit.modelUrl ? (
+                    /* GLB unit model (box fallback while loading / on error) */
+                    /* @__PURE__ */ jsx(
+                      ModelLoader,
+                      {
+                        url: unit.modelUrl,
+                        scale: 0.5,
+                        fallbackGeometry: "box",
+                        castShadow: true
+                      }
+                    )
+                  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs("mesh", { position: [0, 0.3, 0], children: [
+                      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.3, 0.3, 0.1, 8] }),
+                      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
+                    ] }),
+                    /* @__PURE__ */ jsxs("mesh", { position: [0, 0.6, 0], children: [
+                      /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.2, 0.4, 4, 8] }),
+                      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
+                    ] }),
+                    /* @__PURE__ */ jsxs("mesh", { position: [0, 0.9, 0], children: [
+                      /* @__PURE__ */ jsx("sphereGeometry", { args: [0.12, 8, 8] }),
+                      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
+                    ] })
+                  ] }),
+                  unit.health !== void 0 && unit.maxHealth !== void 0 && /* @__PURE__ */ jsxs("group", { position: [0, 1.2, 0], children: [
+                    /* @__PURE__ */ jsxs("mesh", { position: [-0.25, 0, 0], children: [
+                      /* @__PURE__ */ jsx("planeGeometry", { args: [0.5, 0.05] }),
+                      /* @__PURE__ */ jsx("meshBasicMaterial", { color: 3355443 })
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "mesh",
+                      {
+                        position: [
+                          -0.25 + 0.5 * (unit.health / unit.maxHealth) / 2,
+                          0,
+                          0.01
+                        ],
+                        children: [
+                          /* @__PURE__ */ jsx("planeGeometry", { args: [0.5 * (unit.health / unit.maxHealth), 0.05] }),
+                          /* @__PURE__ */ jsx(
+                            "meshBasicMaterial",
+                            {
+                              color: unit.health / unit.maxHealth > 0.5 ? 4500036 : unit.health / unit.maxHealth > 0.25 ? 11184708 : 16729156
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            );
+          },
+          [selectedUnitId, handleUnitClick]
+        );
+        const DefaultFeatureRenderer = useCallback(
+          ({
+            feature,
+            position
+          }) => {
+            if (feature.assetUrl) {
+              return /* @__PURE__ */ jsx(
+                ModelLoader,
+                {
+                  url: feature.assetUrl,
+                  position,
+                  scale: 0.5,
+                  rotation: [0, feature.rotation ?? 0, 0],
+                  onClick: () => handleFeatureClick(feature, null),
+                  fallbackGeometry: "box"
+                },
+                feature.id
+              );
+            }
+            if (feature.type === "tree") {
+              return /* @__PURE__ */ jsxs(
+                "group",
+                {
+                  position,
+                  onClick: (e) => handleFeatureClick(feature, e),
+                  userData: { type: "feature", featureId: feature.id },
+                  children: [
+                    /* @__PURE__ */ jsxs("mesh", { position: [0, 0.4, 0], children: [
+                      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.1, 0.15, 0.8, 6] }),
+                      /* @__PURE__ */ jsx("meshStandardMaterial", { color: 9127187 })
+                    ] }),
+                    /* @__PURE__ */ jsxs("mesh", { position: [0, 0.9, 0], children: [
+                      /* @__PURE__ */ jsx("coneGeometry", { args: [0.5, 0.8, 8] }),
+                      /* @__PURE__ */ jsx("meshStandardMaterial", { color: 2263842 })
+                    ] })
+                  ]
+                }
+              );
+            }
+            if (feature.type === "rock") {
+              return /* @__PURE__ */ jsxs(
+                "mesh",
+                {
+                  position: [position[0], position[1] + 0.3, position[2]],
+                  onClick: (e) => handleFeatureClick(feature, e),
+                  userData: { type: "feature", featureId: feature.id },
+                  children: [
+                    /* @__PURE__ */ jsx("dodecahedronGeometry", { args: [0.3, 0] }),
+                    /* @__PURE__ */ jsx("meshStandardMaterial", { color: 8421504 })
+                  ]
+                }
+              );
+            }
+            return null;
+          },
+          [handleFeatureClick]
+        );
+        if (externalLoading || assetsLoading && preloadAssets.length > 0) {
+          return /* @__PURE__ */ jsx(
+            Canvas3DLoadingState,
+            {
+              progress,
+              loaded,
+              total,
+              message: loadingMessage,
+              className
+            }
+          );
+        }
+        const displayError = externalError || internalError;
+        if (displayError) {
+          return /* @__PURE__ */ jsx(Canvas3DErrorBoundary, { children: /* @__PURE__ */ jsx("div", { className: "game-canvas-3d game-canvas-3d--error", children: /* @__PURE__ */ jsxs("div", { className: "game-canvas-3d__error", children: [
+            "Error: ",
+            displayError
+          ] }) }) });
+        }
+        return /* @__PURE__ */ jsx(
+          Canvas3DErrorBoundary,
+          {
+            onError: (err) => setInternalError(err.message),
+            onReset: () => setInternalError(null),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: containerRef,
+                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,
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    Canvas,
+                    {
+                      shadows,
+                      camera: {
+                        position: cameraConfig.position,
+                        fov: cameraConfig.fov,
+                        near: 0.1,
+                        far: 1e3
+                      },
+                      style: { background: backgroundColor },
+                      onClick: (e) => {
+                        if (e.target === e.currentTarget) {
+                          eventHandlers.handleCanvasClick(e);
+                        }
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(CameraController, { onCameraChange: eventHandlers.handleCameraChange }),
+                        /* @__PURE__ */ jsx("ambientLight", { intensity: 0.6 }),
+                        /* @__PURE__ */ jsx(
+                          "directionalLight",
+                          {
+                            position: [10, 20, 10],
+                            intensity: 0.8,
+                            castShadow: shadows,
+                            "shadow-mapSize": [2048, 2048]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("hemisphereLight", { intensity: 0.3, color: "#87ceeb", groundColor: "#362d1d" }),
+                        showGrid && /* @__PURE__ */ jsx(
+                          Grid$1,
+                          {
+                            args: [
+                              Math.max(gridBounds.maxX - gridBounds.minX + 2, 10),
+                              Math.max(gridBounds.maxZ - gridBounds.minZ + 2, 10)
+                            ],
+                            position: [
+                              (gridBounds.maxX - gridBounds.minX) / 2 - 0.5,
+                              0,
+                              (gridBounds.maxZ - gridBounds.minZ) / 2 - 0.5
+                            ],
+                            cellSize: 1,
+                            cellThickness: 1,
+                            cellColor: "#444444",
+                            sectionSize: 5,
+                            sectionThickness: 1.5,
+                            sectionColor: "#666666",
+                            fadeDistance: 50,
+                            fadeStrength: 1
+                          }
+                        ),
+                        tiles.map((tile, index) => {
+                          const position = gridToWorld(
+                            tile.x,
+                            tile.z ?? tile.y ?? 0,
+                            tile.elevation ?? 0
+                          );
+                          const Renderer = CustomTileRenderer || DefaultTileRenderer;
+                          return /* @__PURE__ */ jsx(Renderer, { tile, position }, tile.id ?? `tile-${index}`);
+                        }),
+                        features.map((feature, index) => {
+                          const position = gridToWorld(
+                            feature.x,
+                            feature.z ?? feature.y ?? 0,
+                            (feature.elevation ?? 0) + 0.5
+                          );
+                          const Renderer = CustomFeatureRenderer || DefaultFeatureRenderer;
+                          return /* @__PURE__ */ jsx(Renderer, { feature, position }, feature.id ?? `feature-${index}`);
+                        }),
+                        units.map((unit) => {
+                          const position = gridToWorld(
+                            unit.x ?? 0,
+                            unit.z ?? unit.y ?? 0,
+                            (unit.elevation ?? 0) + 0.5
+                          );
+                          const Renderer = CustomUnitRenderer || DefaultUnitRenderer;
+                          return /* @__PURE__ */ jsx(Renderer, { unit, position }, unit.id);
+                        }),
+                        children,
+                        /* @__PURE__ */ jsx(
+                          OrbitControls,
+                          {
+                            ref: controlsRef,
+                            target: cameraTarget,
+                            enableDamping: true,
+                            dampingFactor: 0.05,
+                            minDistance: 2,
+                            maxDistance: 100,
+                            maxPolarAngle: Math.PI / 2 - 0.1
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  showCoordinates && hoveredTile && /* @__PURE__ */ jsxs("div", { className: "game-canvas-3d__coordinates", children: [
+                    "X: ",
+                    hoveredTile.x,
+                    ", Z: ",
+                    hoveredTile.z ?? hoveredTile.y ?? 0
+                  ] }),
+                  showTileInfo && hoveredTile && /* @__PURE__ */ jsxs("div", { className: "game-canvas-3d__tile-info", children: [
+                    /* @__PURE__ */ jsx("div", { className: "tile-info__type", children: hoveredTile.type }),
+                    hoveredTile.terrain && /* @__PURE__ */ jsx("div", { className: "tile-info__terrain", children: hoveredTile.terrain })
+                  ] })
+                ]
+              }
+            )
+          }
+        );
+      }
+    );
+    GameCanvas3D.displayName = "GameCanvas3D";
+  }
+});
+function GameBoard3D({
+  entity,
+  tiles = [],
+  features = [],
+  cameraMode = "perspective",
+  backgroundColor = "#2a1a1a",
+  tileClickEvent,
+  unitClickEvent,
+  attackEvent,
+  endTurnEvent,
+  cancelEvent,
+  playAgainEvent,
+  gameEndEvent,
+  className
+}) {
+  const row = boardEntity(entity);
+  const eventBus = useEventBus();
+  const entityUnits = row ? rows(row.units) : [];
+  const units = entityUnits;
+  const selectedUnitId = row ? str(row.selectedUnitId) || null : null;
+  const phase = row ? str(row.phase) : "observation";
+  const result = row ? str(row.result) : "none";
+  const validMoves = row && Array.isArray(row.validMoves) ? row.validMoves : [];
+  const attackTargets = row && Array.isArray(row.attackTargets) ? row.attackTargets : [];
+  const turn = row ? num(row.turn) : 0;
+  const currentTeam = row ? str(row.currentTeam) : "player";
+  const isGameOver = result !== "none";
+  const gameEndEmittedRef = useRef(false);
+  useEffect(() => {
+    if ((result === "victory" || result === "defeat") && gameEndEvent) {
+      if (!gameEndEmittedRef.current) {
+        gameEndEmittedRef.current = true;
+        eventBus.emit(`UI:${gameEndEvent}`, { result });
+      }
+    } else {
+      gameEndEmittedRef.current = false;
+    }
+  }, [result, gameEndEvent, eventBus]);
+  const checkGameEnd = useCallback(() => {
+    const alivePlayer = entityUnits.filter((u) => unitTeam(u) === "player" && unitHealth(u) > 0);
+    const aliveEnemy = entityUnits.filter((u) => unitTeam(u) === "enemy" && unitHealth(u) > 0);
+    if (alivePlayer.length === 0 && gameEndEvent) {
+      eventBus.emit(`UI:${gameEndEvent}`, { result: "defeat" });
+    } else if (aliveEnemy.length === 0 && gameEndEvent) {
+      eventBus.emit(`UI:${gameEndEvent}`, { result: "victory" });
+    }
+  }, [entityUnits, gameEndEvent, eventBus]);
+  const handleUnitClickCallback = useCallback((isoUnit) => {
+    if (phase !== "action" || !selectedUnitId || !attackEvent) return;
+    const attackerRow = entityUnits.find((u) => str(u.id) === selectedUnitId);
+    const targetRow = entityUnits.find((u) => str(u.id) === isoUnit.id);
+    if (!attackerRow || !targetRow) return;
+    if (unitTeam(targetRow) !== "enemy" || unitHealth(targetRow) <= 0) return;
+    const ap = unitPosition(attackerRow);
+    const tp = unitPosition(targetRow);
+    const dx = Math.abs(ap.x - tp.x);
+    const dy = Math.abs(ap.y - tp.y);
+    if (dx <= 1 && dy <= 1 && dx + dy > 0) {
+      const damage = Math.max(1, num(attackerRow.attack) - num(targetRow.defense));
+      eventBus.emit(`UI:${attackEvent}`, {
+        attackerId: str(attackerRow.id),
+        targetId: str(targetRow.id),
+        damage
+      });
+      setTimeout(checkGameEnd, 100);
+    }
+  }, [phase, selectedUnitId, entityUnits, attackEvent, eventBus, checkGameEnd]);
+  const handleEndTurn = useCallback(() => {
+    if (endTurnEvent) eventBus.emit(`UI:${endTurnEvent}`, {});
+  }, [endTurnEvent, eventBus]);
+  const handleCancel = useCallback(() => {
+    if (cancelEvent) eventBus.emit(`UI:${cancelEvent}`, {});
+  }, [cancelEvent, eventBus]);
+  const handlePlayAgain = useCallback(() => {
+    if (playAgainEvent) eventBus.emit(`UI:${playAgainEvent}`, {});
+  }, [playAgainEvent, eventBus]);
+  return /* @__PURE__ */ jsxs(VStack, { className: cn("game-board-3d block w-full min-h-[85vh] relative", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "game-board-3d__status absolute top-3 left-3 z-10 flex gap-2 items-center", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "status__phase capitalize", children: phase.replace("_", " ") }),
+      currentTeam && !isGameOver && /* @__PURE__ */ jsxs(Typography, { variant: "small", color: "muted", className: "status__team", children: [
+        "\u2014 ",
+        currentTeam === "player" ? "Your Turn" : "Enemy's Turn"
+      ] }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", color: "muted", className: "status__turn", children: [
+        "Turn ",
+        turn
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      GameCanvas3D,
+      {
+        tiles,
+        units,
+        features,
+        cameraMode,
+        showGrid: true,
+        showCoordinates: false,
+        showTileInfo: false,
+        shadows: true,
+        backgroundColor,
+        tileClickEvent,
+        unitClickEvent,
+        onUnitClick: handleUnitClickCallback,
+        selectedUnitId,
+        validMoves,
+        attackTargets,
+        className: "game-board-3d__canvas w-full min-h-[85vh]"
+      }
+    ),
+    !isGameOver && /* @__PURE__ */ jsxs(HStack, { className: "fixed bottom-6 right-6 z-50", gap: "sm", children: [
+      (phase === "selection" || phase === "movement" || phase === "action") && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          className: "shadow-xl",
+          onClick: handleCancel,
+          children: "Cancel"
+        }
+      ),
+      phase !== "enemy_turn" && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "primary",
+          className: "shadow-xl",
+          onClick: handleEndTurn,
+          children: "End Turn"
+        }
+      )
+    ] }),
+    isGameOver && /* @__PURE__ */ jsx("div", { className: "game-board-3d__overlay absolute inset-0 z-20 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxs(VStack, { align: "center", gap: "md", className: "overlay__card p-8 rounded-xl bg-gray-900/90 shadow-2xl", children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "h2",
+          className: cn(
+            "overlay__result",
+            result === "victory" ? "text-yellow-400" : "text-red-500"
+          ),
+          children: result === "victory" ? "Victory!" : "Defeat"
+        }
+      ),
+      /* @__PURE__ */ jsxs(Typography, { variant: "body", color: "muted", className: "overlay__turn-count", children: [
+        "Completed in ",
+        turn,
+        " turn",
+        turn !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "primary",
+          className: "px-8 py-3 font-semibold",
+          onClick: handlePlayAgain,
+          children: "Play Again"
+        }
+      )
+    ] }) })
+  ] });
+}
+var init_GameBoard3D = __esm({
+  "components/game/organisms/GameBoard3D.tsx"() {
+    "use client";
+    init_cn();
+    init_Button();
+    init_Typography();
+    init_Stack();
+    init_useEventBus();
+    init_GameCanvas3D2();
+    init_boardEntity();
+    GameBoard3D.displayName = "GameBoard3D";
+  }
+});
 var GameShell;
 var init_GameShell = __esm({
   "components/game/templates/GameShell.tsx"() {
@@ -42474,21 +44177,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",
@@ -42510,28 +44198,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 = useRef(currentRound);
+  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 = useMemo(() => history.reduce((s, r) => s + r.opponentPayoff, 0), [history]);
   const handleAction = 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) {
@@ -42541,10 +44236,11 @@ function NegotiatorBoard({
         setShowHint(true);
       }
     }
-  }, [isComplete, resolved, totalRounds, currentRound, actions, payoffMatrix, history, playRoundEvent, finishEvent, emit]);
+  }, [isComplete, resolved, totalRounds, currentRound, playRoundEvent, finishEvent, emit]);
   const handleReset = useCallback(() => {
     setHistory([]);
     setShowHint(false);
+    prevRoundRef.current = 0;
     if (playAgainEvent) {
       emit(`UI:${playAgainEvent}`, {});
     }
@@ -42655,6 +44351,236 @@ var init_NegotiatorBoard = __esm({
     NegotiatorBoard.displayName = "NegotiatorBoard";
   }
 });
+function resolveEntity(entity) {
+  if (!entity) return {};
+  if (Array.isArray(entity)) return entity[0] ?? {};
+  return entity;
+}
+function numField(row, key, fallback) {
+  const v = row[key];
+  return typeof v === "number" ? v : fallback;
+}
+function strField(row, key, fallback) {
+  const v = row[key];
+  return typeof v === "string" ? v : fallback;
+}
+function PlatformerBoard({
+  entity,
+  player: propPlayer,
+  platforms: propPlatforms,
+  result: propResult,
+  lives: propLives,
+  score: propScore,
+  level: propLevel,
+  worldWidth = 800,
+  worldHeight = 400,
+  canvasWidth = 800,
+  canvasHeight = 400,
+  playerSprite,
+  tileSprites,
+  bgColor,
+  leftEvent = "LEFT",
+  rightEvent = "RIGHT",
+  jumpEvent = "JUMP",
+  stopEvent = "STOP",
+  playAgainEvent = "PLAY_AGAIN",
+  gameEndEvent = "GAME_END",
+  className
+}) {
+  const row = resolveEntity(entity);
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
+  const result = propResult ?? strField(row, "result", "none");
+  propLives ?? numField(row, "lives", 3);
+  const score = propScore ?? numField(row, "score", 0);
+  const level = propLevel ?? numField(row, "level", 1);
+  const entityPlayer = row["player"];
+  const player = propPlayer ?? entityPlayer ?? {
+    x: 80,
+    y: 320,
+    width: 32,
+    height: 48,
+    vx: 0,
+    vy: 0,
+    grounded: false,
+    facingRight: true
+  };
+  const entityPlatforms = Array.isArray(row["platforms"]) ? row["platforms"] : void 0;
+  const platforms = propPlatforms ?? entityPlatforms ?? [
+    { x: 0, y: 368, width: 800, height: 32, type: "ground" },
+    { x: 150, y: 280, width: 160, height: 16, type: "platform" },
+    { x: 420, y: 220, width: 160, height: 16, type: "platform" },
+    { x: 580, y: 300, width: 80, height: 16, type: "hazard" },
+    { x: 700, y: 340, width: 64, height: 28, type: "goal" }
+  ];
+  const handleRestart = useCallback(() => {
+    if (playAgainEvent) {
+      eventBus.emit(`UI:${playAgainEvent}`, {});
+    }
+  }, [playAgainEvent, eventBus]);
+  const isGameOver = result === "won" || result === "lost";
+  const gameEndEmittedRef = useRef(false);
+  useEffect(() => {
+    if ((result === "won" || result === "lost") && gameEndEvent) {
+      if (!gameEndEmittedRef.current) {
+        gameEndEmittedRef.current = true;
+        eventBus.emit(`UI:${gameEndEvent}`, { result });
+      }
+    } else {
+      gameEndEmittedRef.current = false;
+    }
+  }, [result, gameEndEvent, eventBus]);
+  return /* @__PURE__ */ jsx(
+    VStack,
+    {
+      className: cn("platformer-board relative bg-background", className),
+      gap: "none",
+      children: /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          PlatformerCanvas,
+          {
+            player,
+            platforms,
+            worldWidth,
+            worldHeight,
+            canvasWidth,
+            canvasHeight,
+            followCamera: true,
+            bgColor,
+            playerSprite,
+            tileSprites,
+            leftEvent,
+            rightEvent,
+            jumpEvent,
+            stopEvent
+          }
+        ),
+        isGameOver && /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center bg-background/70 backdrop-blur-sm rounded-container", children: /* @__PURE__ */ jsxs(VStack, { className: "text-center p-8", gap: "lg", children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "h2",
+              className: cn(
+                "text-4xl font-black tracking-widest uppercase",
+                result === "won" ? "text-warning" : "text-error"
+              ),
+              children: result === "won" ? t("platformer.won") : t("platformer.lost")
+            }
+          ),
+          result === "won" && /* @__PURE__ */ jsxs(Typography, { variant: "body1", className: "text-muted-foreground", children: [
+            t("platformer.level"),
+            " ",
+            level,
+            " \u2014 ",
+            t("platformer.score"),
+            ": ",
+            score
+          ] }),
+          result === "lost" && /* @__PURE__ */ jsx(Typography, { variant: "body1", className: "text-muted-foreground", children: t("platformer.noLives") }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "primary",
+              className: "px-8 py-3 font-semibold",
+              onClick: handleRestart,
+              children: result === "won" ? t("platformer.nextLevel") : t("platformer.playAgain")
+            }
+          )
+        ] }) })
+      ] })
+    }
+  );
+}
+var init_PlatformerBoard = __esm({
+  "components/game/organisms/PlatformerBoard.tsx"() {
+    "use client";
+    init_cn();
+    init_useEventBus();
+    init_Box();
+    init_Button();
+    init_Typography();
+    init_Stack();
+    init_PlatformerCanvas();
+    PlatformerBoard.displayName = "PlatformerBoard";
+  }
+});
+function PlatformerTemplate({
+  entity,
+  platforms = DEFAULT_PLATFORMS,
+  worldWidth = 800,
+  worldHeight = 400,
+  canvasWidth = 800,
+  canvasHeight = 400,
+  playerSprite = `${CDN3}/characters/platformChar_idle.png`,
+  tileSprites = DEFAULT_TILE_SPRITES,
+  bgColor = "#5c94fc",
+  gameEndEvent = "GAME_END",
+  className
+}) {
+  const row = entity && !Array.isArray(entity) ? entity : void 0;
+  const lives = typeof row?.["lives"] === "number" ? row["lives"] : 3;
+  const score = typeof row?.["score"] === "number" ? row["score"] : 0;
+  const level = typeof row?.["level"] === "number" ? row["level"] : 1;
+  return /* @__PURE__ */ jsxs(VStack, { className: cn("platformer-template w-full", className), gap: "none", children: [
+    /* @__PURE__ */ jsx(Box, { className: "relative", children: /* @__PURE__ */ jsx(
+      GameHud,
+      {
+        position: "top",
+        stats: [
+          { label: "Lives", value: lives, format: "number", variant: "danger" },
+          { label: "Level", value: level, format: "number", variant: "default" }
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PlatformerBoard,
+      {
+        entity,
+        platforms,
+        worldWidth,
+        worldHeight,
+        canvasWidth,
+        canvasHeight,
+        playerSprite,
+        tileSprites,
+        bgColor,
+        leftEvent: "LEFT",
+        rightEvent: "RIGHT",
+        jumpEvent: "JUMP",
+        stopEvent: "STOP",
+        playAgainEvent: "PLAY_AGAIN",
+        gameEndEvent
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { className: "px-4 py-2", children: /* @__PURE__ */ jsx(ScoreBoard, { score, level }) })
+  ] });
+}
+var CDN3, DEFAULT_TILE_SPRITES, DEFAULT_PLATFORMS;
+var init_PlatformerTemplate = __esm({
+  "components/game/templates/PlatformerTemplate.tsx"() {
+    init_cn();
+    init_Box();
+    init_Stack();
+    init_PlatformerBoard();
+    init_GameHud();
+    init_ScoreBoard();
+    CDN3 = "https://almadar-kflow-assets.web.app/shared/platformer";
+    DEFAULT_TILE_SPRITES = {
+      ground: `${CDN3}/tiles/platformPack_tile001.png`,
+      platform: `${CDN3}/tiles/platformPack_tile004.png`,
+      hazard: `${CDN3}/tiles/platformPack_tile017.png`,
+      goal: `${CDN3}/tiles/platformPack_tile007.png`
+    };
+    DEFAULT_PLATFORMS = [
+      { x: 0, y: 368, width: 800, height: 32, type: "ground" },
+      { x: 150, y: 280, width: 160, height: 16, type: "platform" },
+      { x: 420, y: 220, width: 160, height: 16, type: "platform" },
+      { x: 580, y: 300, width: 80, height: 16, type: "hazard" },
+      { x: 700, y: 340, width: 64, height: 28, type: "goal" }
+    ];
+    PlatformerTemplate.displayName = "PlatformerTemplate";
+  }
+});
 var PricingOrganism;
 var init_PricingOrganism = __esm({
   "components/marketing/organisms/PricingOrganism.tsx"() {
@@ -42777,6 +44703,356 @@ var init_PricingPageTemplate = __esm({
     PricingPageTemplate.displayName = "PricingPageTemplate";
   }
 });
+function RoguelikeBoard({
+  entity,
+  tiles: propTiles,
+  enemies: propEnemies,
+  items: propItems,
+  player: propPlayer,
+  playerHp: propPlayerHp,
+  playerMaxHp: propPlayerMaxHp,
+  playerAttack: propPlayerAttack,
+  depth: propDepth,
+  result: propResult,
+  phase: propPhase,
+  stairsX: propStairsX,
+  stairsY: propStairsY,
+  assetManifest: propAssetManifest,
+  scale = 0.45,
+  unitScale = 1,
+  moveEvent,
+  playAgainEvent,
+  gameEndEvent,
+  className
+}) {
+  const board = boardEntity(entity) ?? {};
+  const tiles = propTiles ?? (Array.isArray(board.tiles) ? board.tiles : DEFAULT_TILES2);
+  const enemies = propEnemies ?? (Array.isArray(board.enemies) ? board.enemies : DEFAULT_ENEMIES);
+  const items = propItems ?? (Array.isArray(board.items) ? board.items : DEFAULT_ITEMS);
+  const player = propPlayer ?? board.player ?? { x: 1, y: 1 };
+  const playerHp = propPlayerHp ?? num(board.playerHp, 10);
+  const playerMaxHp = propPlayerMaxHp ?? num(board.playerMaxHp, 10);
+  const playerAttack = propPlayerAttack ?? num(board.playerAttack, 3);
+  const depth = propDepth ?? num(board.depth, 1);
+  const result = propResult ?? (str(board.result) || "none");
+  const phase = propPhase ?? (str(board.phase) || "player_turn");
+  propStairsX ?? num(board.stairsX, 3);
+  propStairsY ?? num(board.stairsY, 3);
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
+  const [hoveredTile, setHoveredTile] = useState(null);
+  const emitMove = useCallback((dx, dy) => {
+    if (!moveEvent) return;
+    eventBus.emit(`UI:${moveEvent}`, { dx, dy });
+  }, [moveEvent, eventBus]);
+  useEffect(() => {
+    const handler = (e) => {
+      if (result !== "none" || phase !== "player_turn") return;
+      if (e.key === "ArrowUp" || e.key === "w") emitMove(0, -1);
+      if (e.key === "ArrowDown" || e.key === "s") emitMove(0, 1);
+      if (e.key === "ArrowLeft" || e.key === "a") emitMove(-1, 0);
+      if (e.key === "ArrowRight" || e.key === "d") emitMove(1, 0);
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [result, phase, emitMove]);
+  useEffect(() => {
+    if ((result === "won" || result === "lost") && gameEndEvent) {
+      eventBus.emit(`UI:${gameEndEvent}`, { result });
+    }
+  }, [result, gameEndEvent, eventBus]);
+  const handleTileClick = useCallback((x, y) => {
+    if (result !== "none" || phase !== "player_turn") return;
+    const dx = x - player.x;
+    const dy = y - player.y;
+    if (Math.abs(dx) + Math.abs(dy) === 1) {
+      emitMove(dx, dy);
+    }
+  }, [result, phase, player, emitMove]);
+  const handleReset = useCallback(() => {
+    if (!playAgainEvent) return;
+    eventBus.emit(`UI:${playAgainEvent}`, {});
+  }, [playAgainEvent, eventBus]);
+  const isoUnits = useMemo(() => {
+    const liveEnemies = enemies.filter((e) => e.hp > 0);
+    return [
+      {
+        id: "player",
+        position: player,
+        name: t("roguelike.player") || "Hero",
+        team: "player",
+        health: playerHp,
+        maxHealth: playerMaxHp,
+        unitType: "player",
+        sprite: `${CDN4}/isometric-dungeon/Characters/Male/Male_0_Idle0.png`
+      },
+      ...liveEnemies.map((e) => ({
+        id: e.id,
+        position: { x: e.x, y: e.y },
+        name: t("roguelike.enemy") || "Enemy",
+        team: "enemy",
+        health: e.hp,
+        maxHealth: 6,
+        unitType: "enemy",
+        sprite: `${CDN4}/sprite-sheets/shadow-legion-sprite-sheet-sw.png`
+      }))
+    ];
+  }, [player, enemies, playerHp, playerMaxHp, t]);
+  const isoFeatures = useMemo(
+    () => items.map((it) => ({
+      id: it.id,
+      x: it.x,
+      y: it.y,
+      type: it.kind,
+      sprite: FEATURE_SPRITE[it.kind] ?? FEATURE_SPRITE.health_potion
+    })),
+    [items]
+  );
+  const validMoves = useMemo(() => {
+    if (result !== "none" || phase !== "player_turn") return [];
+    const dirs = [{ dx: 0, dy: -1 }, { dx: 0, dy: 1 }, { dx: -1, dy: 0 }, { dx: 1, dy: 0 }];
+    return dirs.map(({ dx, dy }) => ({ x: player.x + dx, y: player.y + dy })).filter(({ x, y }) => {
+      const tile = tiles.find((t2) => t2.x === x && t2.y === y);
+      return tile?.passable ?? false;
+    });
+  }, [result, phase, player, tiles]);
+  const isGameOver = result === "won" || result === "lost";
+  return /* @__PURE__ */ jsxs(VStack, { className: cn("roguelike-board relative min-h-[600px] bg-background", className), gap: "none", children: [
+    /* @__PURE__ */ jsxs(HStack, { className: "items-center justify-between px-4 py-2 border-b border-border", gap: "md", children: [
+      /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "items-center", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-muted-foreground", children: t("roguelike.depth") || "Depth" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", className: "font-bold tabular-nums", children: depth })
+      ] }),
+      /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "items-center", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-muted-foreground", children: t("roguelike.hp") || "HP" }),
+        /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: "body1",
+            className: cn(
+              "font-bold tabular-nums",
+              playerHp <= Math.floor(playerMaxHp * 0.25) ? "text-error" : "text-success"
+            ),
+            children: [
+              playerHp,
+              " / ",
+              playerMaxHp
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "items-center", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-muted-foreground", children: t("roguelike.atk") || "ATK" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", className: "font-bold tabular-nums text-foreground", children: playerAttack })
+      ] }),
+      /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "items-center", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-muted-foreground", children: t("roguelike.phase") || "Phase" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "capitalize text-foreground", children: phase.replace("_", " ") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { className: "relative flex-1", children: /* @__PURE__ */ jsx(
+      IsometricCanvas_default,
+      {
+        tiles,
+        units: isoUnits,
+        features: isoFeatures,
+        selectedUnitId: null,
+        validMoves,
+        attackTargets: [],
+        hoveredTile,
+        onTileClick: handleTileClick,
+        onUnitClick: () => void 0,
+        onTileHover: (x, y) => setHoveredTile({ x, y }),
+        onTileLeave: () => setHoveredTile(null),
+        scale,
+        assetBaseUrl: propAssetManifest?.baseUrl ?? CDN4,
+        assetManifest: propAssetManifest,
+        unitScale
+      }
+    ) }),
+    !isGameOver && /* @__PURE__ */ jsx(HStack, { className: "justify-center gap-2 p-3", gap: "none", children: [
+      { label: "\u2191", dx: 0, dy: -1 },
+      { label: "\u2193", dx: 0, dy: 1 },
+      { label: "\u2190", dx: -1, dy: 0 },
+      { label: "\u2192", dx: 1, dy: 0 }
+    ].map(({ label, dx, dy }) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        className: "w-9 h-9 p-0 text-base font-mono",
+        onClick: () => emitMove(dx, dy),
+        disabled: phase !== "player_turn",
+        children: label
+      },
+      label
+    )) }),
+    isGameOver && /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center bg-background/75 backdrop-blur-sm rounded-container", children: /* @__PURE__ */ jsxs(VStack, { className: "text-center p-8", gap: "lg", children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "h2",
+          className: cn(
+            "text-4xl font-black tracking-widest uppercase",
+            result === "won" ? "text-warning" : "text-error"
+          ),
+          children: result === "won" ? t("roguelike.victory") || "Victory!" : t("roguelike.defeat") || "Defeated!"
+        }
+      ),
+      result === "won" && /* @__PURE__ */ jsx(Typography, { variant: "body1", className: "text-muted-foreground", children: t("roguelike.cleared") || `Dungeon cleared! Depth reached: ${depth}` }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "primary",
+          className: "px-8 py-3 font-semibold",
+          onClick: handleReset,
+          children: t("roguelike.playAgain") || "Play Again"
+        }
+      )
+    ] }) })
+  ] });
+}
+var CDN4, DEFAULT_TILES2, DEFAULT_ENEMIES, DEFAULT_ITEMS, FEATURE_SPRITE;
+var init_RoguelikeBoard = __esm({
+  "components/game/organisms/RoguelikeBoard.tsx"() {
+    "use client";
+    init_cn();
+    init_useEventBus();
+    init_Box();
+    init_Button();
+    init_Typography();
+    init_Stack();
+    init_IsometricCanvas();
+    init_boardEntity();
+    CDN4 = "https://almadar-kflow-assets.web.app/shared";
+    DEFAULT_TILES2 = [
+      { x: 0, y: 0, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 1, y: 0, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 2, y: 0, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 3, y: 0, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 4, y: 0, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 0, y: 1, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 1, y: 1, terrain: "floor", passable: true, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/dirt_E.png` },
+      { x: 2, y: 1, terrain: "floor", passable: true, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/dirt_E.png` },
+      { x: 3, y: 1, terrain: "floor", passable: true, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/dirt_E.png` },
+      { x: 4, y: 1, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 0, y: 2, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 1, y: 2, terrain: "floor", passable: true, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/dirtTiles_E.png` },
+      { x: 2, y: 2, terrain: "floor", passable: true, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/dirtTiles_E.png` },
+      { x: 3, y: 2, terrain: "floor", passable: true, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/dirt_E.png` },
+      { x: 4, y: 2, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 0, y: 3, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 1, y: 3, terrain: "floor", passable: true, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/dirt_E.png` },
+      { x: 2, y: 3, terrain: "floor", passable: true, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/dirtTiles_E.png` },
+      { x: 3, y: 3, terrain: "stairs", passable: true, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stairs_E.png` },
+      { x: 4, y: 3, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 0, y: 4, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 1, y: 4, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 2, y: 4, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 3, y: 4, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 4, y: 4, terrain: "wall", passable: false, terrainSprite: `${CDN4}/isometric-dungeon/Isometric/stoneInset_E.png` }
+    ];
+    DEFAULT_ENEMIES = [
+      { id: "e1", x: 3, y: 1, hp: 5, attack: 2 },
+      { id: "e2", x: 1, y: 3, hp: 4, attack: 1 }
+    ];
+    DEFAULT_ITEMS = [
+      { id: "i1", x: 2, y: 2, kind: "health_potion" }
+    ];
+    FEATURE_SPRITE = {
+      health_potion: `${CDN4}/isometric-dungeon/Isometric/chestClosed_E.png`,
+      sword: `${CDN4}/isometric-dungeon/Isometric/barrel_E.png`,
+      shield: `${CDN4}/isometric-dungeon/Isometric/barrel_E.png`
+    };
+    RoguelikeBoard.displayName = "RoguelikeBoard";
+  }
+});
+function RoguelikeTemplate({
+  entity,
+  scale = 0.45,
+  unitScale = 1,
+  tiles = DEFAULT_ROGUELIKE_TILES,
+  enemies,
+  items,
+  stairsX,
+  stairsY,
+  assetManifest = DEFAULT_ROGUELIKE_MANIFEST,
+  gameEndEvent,
+  className
+}) {
+  const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
+  if (!resolved && !tiles && !assetManifest) return null;
+  return /* @__PURE__ */ jsx(
+    RoguelikeBoard,
+    {
+      entity: resolved,
+      tiles,
+      enemies,
+      items,
+      stairsX,
+      stairsY,
+      assetManifest,
+      scale,
+      unitScale,
+      moveEvent: "MOVE",
+      playAgainEvent: "PLAY_AGAIN",
+      gameEndEvent: gameEndEvent ?? "GAME_END",
+      className
+    }
+  );
+}
+var CDN5, DEFAULT_ROGUELIKE_TILES, DEFAULT_ROGUELIKE_MANIFEST;
+var init_RoguelikeTemplate = __esm({
+  "components/game/templates/RoguelikeTemplate.tsx"() {
+    init_RoguelikeBoard();
+    CDN5 = "https://almadar-kflow-assets.web.app/shared";
+    DEFAULT_ROGUELIKE_TILES = [
+      { x: 0, y: 0, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 1, y: 0, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 2, y: 0, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 3, y: 0, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 4, y: 0, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 0, y: 1, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 1, y: 1, terrain: "floor", passable: true, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/dirt_E.png` },
+      { x: 2, y: 1, terrain: "floor", passable: true, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/dirt_E.png` },
+      { x: 3, y: 1, terrain: "floor", passable: true, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/dirt_E.png` },
+      { x: 4, y: 1, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 0, y: 2, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 1, y: 2, terrain: "floor", passable: true, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/dirtTiles_E.png` },
+      { x: 2, y: 2, terrain: "floor", passable: true, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/dirtTiles_E.png` },
+      { x: 3, y: 2, terrain: "floor", passable: true, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/dirt_E.png` },
+      { x: 4, y: 2, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 0, y: 3, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 1, y: 3, terrain: "floor", passable: true, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/dirt_E.png` },
+      { x: 2, y: 3, terrain: "floor", passable: true, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/dirtTiles_E.png` },
+      { x: 3, y: 3, terrain: "stairs", passable: true, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stairs_E.png` },
+      { x: 4, y: 3, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 0, y: 4, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 1, y: 4, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 2, y: 4, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 3, y: 4, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` },
+      { x: 4, y: 4, terrain: "wall", passable: false, terrainSprite: `${CDN5}/isometric-dungeon/Isometric/stoneInset_E.png` }
+    ];
+    DEFAULT_ROGUELIKE_MANIFEST = {
+      baseUrl: CDN5,
+      terrains: {
+        floor: "/isometric-dungeon/Isometric/dirt_E.png",
+        wall: "/isometric-dungeon/Isometric/stoneInset_E.png",
+        stairs: "/isometric-dungeon/Isometric/stairs_E.png",
+        planks: "/isometric-dungeon/Isometric/planks_E.png"
+      },
+      units: {
+        player: "/isometric-dungeon/Characters/Male/Male_0_Idle0.png",
+        enemy: "/sprite-sheets/shadow-legion-sprite-sheet-sw.png"
+      },
+      features: {
+        health_potion: "/isometric-dungeon/Isometric/chestClosed_E.png",
+        sword: "/isometric-dungeon/Isometric/barrel_E.png",
+        shield: "/isometric-dungeon/Isometric/barrel_E.png"
+      }
+    };
+    RoguelikeTemplate.displayName = "RoguelikeTemplate";
+  }
+});
 
 // lib/traitRegistry.ts
 function getAllTraits() {
@@ -44011,7 +46287,7 @@ function getAllEvents(traits2) {
 function EventDispatcherTab({ traits: traits2, schema }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [log12, setLog] = React83.useState([]);
+  const [log14, setLog] = React83.useState([]);
   const prevStatesRef = React83.useRef(/* @__PURE__ */ new Map());
   React83.useEffect(() => {
     for (const trait of traits2) {
@@ -44075,9 +46351,9 @@ function EventDispatcherTab({ traits: traits2, schema }) {
       /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: t("debug.otherEvents") }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: unavailableEvents.map((event) => /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", className: "opacity-50", children: event }, event)) })
     ] }),
-    log12.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+    log14.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: t("debug.recentTransitions") }),
-      /* @__PURE__ */ jsx(Stack, { gap: "xs", children: log12.map((entry, i) => /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono text-xs", children: [
+      /* @__PURE__ */ jsx(Stack, { gap: "xs", children: log14.map((entry, i) => /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono text-xs", children: [
         /* @__PURE__ */ jsx("span", { className: "text-purple-400", children: entry.traitName }),
         " ",
         /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: entry.from }),
@@ -44880,17 +47156,24 @@ function SequencerBoard({
   const { emit } = useEventBus();
   const { t } = 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] = useState(false);
-  const [slots, setSlots] = useState(
-    () => Array.from({ length: maxSlots }, () => void 0)
-  );
-  const [playState, setPlayState] = useState("idle");
-  const [currentStep, setCurrentStep] = useState(-1);
-  const [attempts, setAttempts] = useState(0);
   const [slotFeedback, setSlotFeedback] = useState(
     () => Array.from({ length: maxSlots }, () => null)
   );
@@ -44899,11 +47182,6 @@ function SequencerBoard({
     if (timerRef.current) clearTimeout(timerRef.current);
   }, []);
   const handleSlotDrop = useCallback((index, item) => {
-    setSlots((prev) => {
-      const next = [...prev];
-      next[index] = item;
-      return next;
-    });
     setSlotFeedback((prev) => {
       const next = [...prev];
       next[index] = null;
@@ -44913,11 +47191,6 @@ function SequencerBoard({
     if (placeEvent) emit(`UI:${placeEvent}`, { slotIndex: index, actionId: item.id });
   }, [emit, placeEvent]);
   const handleSlotRemove = useCallback((index) => {
-    setSlots((prev) => {
-      const next = [...prev];
-      next[index] = void 0;
-      return next;
-    });
     setSlotFeedback((prev) => {
       const next = [...prev];
       next[index] = null;
@@ -44928,48 +47201,34 @@ function SequencerBoard({
   }, [emit, removeEvent]);
   const handleReset = 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 = 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++) {
@@ -44979,7 +47238,6 @@ function SequencerBoard({
           }
         }
       } else {
-        setCurrentStep(step);
         timerRef.current = setTimeout(advance, stepDurationMs);
       }
     };
@@ -45029,7 +47287,7 @@ function SequencerBoard({
         /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
           /* @__PURE__ */ jsxs(HStack, { className: "items-center justify-between", children: [
             /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-muted-foreground font-medium", children: t("sequencer.yourSequence") + ":" }),
-            hasFeedback && playState === "idle" && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-muted-foreground", children: [
+            hasFeedback && !isPlayingBack && !isSuccess && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-muted-foreground", children: [
               `${correctCount}/${maxSlots} `,
               "\u2705"
             ] })
@@ -45041,7 +47299,7 @@ function SequencerBoard({
               maxSlots,
               onSlotDrop: handleSlotDrop,
               onSlotRemove: handleSlotRemove,
-              playing: playState === "playing",
+              playing: isPlayingBack,
               currentStep,
               categoryColors,
               slotFeedback,
@@ -45049,7 +47307,7 @@ function SequencerBoard({
             }
           )
         ] }),
-        playState !== "playing" && /* @__PURE__ */ jsx(
+        !isPlayingBack && /* @__PURE__ */ jsx(
           ActionPalette,
           {
             actions: availableActions,
@@ -45059,8 +47317,8 @@ function SequencerBoard({
             label: t("sequencer.dragActions")
           }
         ),
-        hasFeedback && playState === "idle" && attempts > 0 && /* @__PURE__ */ jsx(Box, { className: "p-3 rounded-container bg-warning/10 border border-warning/30 text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-foreground", children: t(encourageKey) }) }),
-        playState === "success" && /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("sequencer.levelComplete") }) }),
+        hasFeedback && !isPlayingBack && !isSuccess && attempts > 0 && /* @__PURE__ */ jsx(Box, { className: "p-3 rounded-container bg-warning/10 border border-warning/30 text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-foreground", children: t(encourageKey) }) }),
+        isSuccess && /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("sequencer.levelComplete") }) }),
         /* @__PURE__ */ jsxs(HStack, { gap: "sm", children: [
           /* @__PURE__ */ jsx(
             Button,
@@ -46016,9 +48274,9 @@ function VariablePanel({
     /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-muted-foreground font-medium", children: t("stateArchitect.variables", { name: entityName }) }),
     variables.map((v) => {
       const name = v.name == null ? "" : String(v.name);
-      const value = numField(v.value);
-      const max = numField(v.max, 100);
-      const min = numField(v.min, 0);
+      const value = numField2(v.value);
+      const max = numField2(v.max, 100);
+      const min = numField2(v.min, 0);
       const unit = v.unit == null ? "" : String(v.unit);
       const pct = Math.round((value - min) / (max - min) * 100);
       const isHigh = pct > 80;
@@ -46048,12 +48306,12 @@ function VariablePanel({
     })
   ] });
 }
-var numField;
+var numField2;
 var init_VariablePanel = __esm({
   "components/game/organisms/puzzles/state-architect/VariablePanel.tsx"() {
     init_atoms2();
     init_cn();
-    numField = (v, fallback = 0) => {
+    numField2 = (v, fallback = 0) => {
       const n = Number(v);
       return Number.isFinite(n) ? n : fallback;
     };
@@ -46110,6 +48368,9 @@ function StateArchitectBoard({
   stepDurationMs = 600,
   testEvent,
   completeEvent,
+  addTransitionEvent,
+  removeTransitionEvent,
+  playAgainEvent,
   className
 }) {
   const { emit } = useEventBus();
@@ -46122,14 +48383,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] = 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] = useState(false);
   const [headerError, setHeaderError] = useState(false);
-  const [playState, setPlayState] = useState("editing");
   const [currentState, setCurrentState] = useState(initialState);
   const [selectedState, setSelectedState] = useState(null);
   const [testResults, setTestResults] = useState([]);
   const [variables, setVariables] = useState(() => [...entityVariables]);
-  const [attempts, setAttempts] = useState(0);
   const timerRef = useRef(null);
   const [addingFrom, setAddingFrom] = useState(null);
   useEffect(() => () => {
@@ -46139,7 +48402,7 @@ function StateArchitectBoard({
   const GRAPH_H = 400;
   const positions = useMemo(() => layoutStates(entityStates, GRAPH_W, GRAPH_H), [entityStates]);
   const handleStateClick = useCallback((state) => {
-    if (playState !== "editing") return;
+    if (isTesting) return;
     if (addingFrom) {
       if (addingFrom !== state) {
         const event = availableEvents[0] || "EVENT";
@@ -46149,20 +48412,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 = useCallback(() => {
     if (!selectedState) return;
     setAddingFrom(selectedState);
   }, [selectedState]);
   const handleRemoveTransition = useCallback((transId) => {
-    setTransitions((prev) => prev.filter((t2) => t2.id !== transId));
-  }, []);
+    if (removeTransitionEvent) emit(`UI:${removeTransitionEvent}`, { id: transId });
+  }, [removeTransitionEvent, emit]);
   const machine = useMemo(() => ({
     name: entityName,
     description: str(resolved?.description),
@@ -46176,16 +48439,16 @@ function StateArchitectBoard({
     }))
   }), [entityName, resolved, entityStates, currentState, transitions]);
   const handleTest = 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}`, {
@@ -46193,9 +48456,6 @@ function StateArchitectBoard({
             passedTests: results.filter((r) => r.passed).length
           });
         }
-        if (!allPassed) {
-          setAttempts((prev) => prev + 1);
-        }
         return;
       }
       const testCase = testCases[testIdx];
@@ -46218,24 +48478,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 = useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
-    setPlayState("editing");
+    setIsTesting(false);
     setCurrentState(initialState);
     setTestResults([]);
   }, [initialState]);
   const handleReset = 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 = useMemo(() => ({
     name: entityName,
     states: entityStates,
@@ -46331,7 +48590,7 @@ function StateArchitectBoard({
                 ]
               }
             ),
-            playState === "editing" && /* @__PURE__ */ jsx(HStack, { gap: "sm", children: /* @__PURE__ */ jsx(
+            !isTesting && /* @__PURE__ */ jsx(HStack, { gap: "sm", children: /* @__PURE__ */ jsx(
               Button,
               {
                 variant: "ghost",
@@ -46353,7 +48612,7 @@ function StateArchitectBoard({
                   t2.guardHint,
                   ")"
                 ] }),
-                playState === "editing" && /* @__PURE__ */ jsx(
+                !isTesting && /* @__PURE__ */ jsx(
                   Button,
                   {
                     variant: "ghost",
@@ -46385,21 +48644,21 @@ function StateArchitectBoard({
             resolved.showCodeView !== false && /* @__PURE__ */ jsx(StateJsonView, { data: codeData, label: "View Code" })
           ] })
         ] }),
-        playState === "success" && /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("stateArchitect.allPassed") }) }),
-        playState === "fail" && /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+        isSuccess && /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("stateArchitect.allPassed") }) }),
+        !isTesting && !isSuccess && testResults.some((r) => !r.passed) && /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
           /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-container bg-warning/10 border border-warning/30 text-center", children: /* @__PURE__ */ 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__ */ jsx(Box, { className: "p-3 rounded-container bg-accent/10 border border-accent/30", children: /* @__PURE__ */ jsxs(HStack, { className: "items-start", gap: "xs", children: [
+          !isSuccess && attempts >= 2 && Boolean(str(resolved?.hint)) && /* @__PURE__ */ jsx(Box, { className: "p-3 rounded-container bg-accent/10 border border-accent/30", children: /* @__PURE__ */ jsxs(HStack, { className: "items-start", gap: "xs", children: [
             /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-accent font-bold shrink-0", children: "\u{1F4A1} " + t("game.hint") + ":" }),
             /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-foreground", children: hint })
           ] }) })
         ] }),
         /* @__PURE__ */ jsxs(HStack, { gap: "sm", children: [
-          playState === "fail" ? /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: handleTryAgain, children: "\u{1F504} " + t("puzzle.tryAgainButton") }) : /* @__PURE__ */ jsx(
+          !isTesting && !isSuccess && testResults.some((r) => !r.passed) ? /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: handleTryAgain, children: "\u{1F504} " + t("puzzle.tryAgainButton") }) : /* @__PURE__ */ jsx(
             Button,
             {
               variant: "primary",
               onClick: handleTest,
-              disabled: playState !== "editing",
+              disabled: isTesting,
               children: "\u25B6 " + t("game.runTests")
             }
           ),
@@ -46905,6 +49164,289 @@ var init_ToastSlot = __esm({
     ToastSlot.displayName = "ToastSlot";
   }
 });
+function tilesToIso(tiles) {
+  return tiles.map((t) => ({
+    x: t.x,
+    y: t.y,
+    terrain: t.terrain,
+    terrainSprite: t.terrainSprite ?? TERRAIN_SPRITES[t.terrain ?? "ground"],
+    passable: t.passable
+  }));
+}
+function towersToUnits(towers) {
+  return towers.map((t) => ({
+    id: t.id,
+    position: { x: t.x, y: t.y },
+    name: "Tower",
+    team: "player",
+    sprite: TOWER_SPRITE,
+    unitType: "guardian",
+    health: 1,
+    maxHealth: 1
+  }));
+}
+function creepsToUnits(creeps) {
+  return creeps.map((c) => ({
+    id: c.id,
+    position: { x: c.x, y: c.y },
+    name: "Creep",
+    team: "enemy",
+    sprite: CREEP_SPRITE,
+    unitType: "scrapper",
+    health: c.hp,
+    maxHealth: c.maxHp
+  }));
+}
+function pathToFeatures(path) {
+  return path.map((p2, i) => ({
+    id: `path-${i}`,
+    x: p2.x,
+    y: p2.y,
+    type: "path-marker",
+    sprite: `${CDN6}world-map/road_straight.png`
+  }));
+}
+function TowerDefenseBoard({
+  entity,
+  tiles: propTiles,
+  path: propPath,
+  towers: propTowers,
+  creeps: propCreeps,
+  gold: propGold,
+  lives: propLives,
+  wave: propWave,
+  maxWaves: propMaxWaves,
+  result: propResult,
+  waveActive: propWaveActive,
+  towerCost = 25,
+  scale = 0.45,
+  placeTowerEvent,
+  startWaveEvent,
+  playAgainEvent,
+  gameEndEvent,
+  className
+}) {
+  const board = boardEntity(entity) ?? {};
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
+  const tiles = propTiles ?? rows(board.tiles);
+  const path = propPath ?? rows(board.path);
+  const towers = propTowers ?? rows(board.towers);
+  const creeps = propCreeps ?? rows(board.creeps);
+  const gold = propGold ?? num(board.gold, 100);
+  const lives = propLives ?? num(board.lives, 20);
+  const wave = propWave ?? num(board.wave, 1);
+  const maxWaves = propMaxWaves ?? num(board.maxWaves, 5);
+  const result = propResult ?? (str(board.result) || "none");
+  const waveActive = propWaveActive ?? Boolean(board.waveActive);
+  const [hoveredTile, setHoveredTile] = useState(null);
+  const emittedGameEnd = useRef(false);
+  if (result !== "none" && !emittedGameEnd.current) {
+    emittedGameEnd.current = true;
+    if (gameEndEvent) {
+      eventBus.emit(`UI:${gameEndEvent}`, { result });
+    }
+  }
+  if (result === "none") {
+    emittedGameEnd.current = false;
+  }
+  const towerPositions = useMemo(() => new Set(towers.map((t2) => `${t2.x},${t2.y}`)), [towers]);
+  const pathPositions = useMemo(() => new Set(path.map((p2) => `${p2.x},${p2.y}`)), [path]);
+  const validMoves = useMemo(() => {
+    if (result !== "none" || gold < towerCost) return [];
+    return tiles.filter(
+      (t2) => t2.passable !== false && !towerPositions.has(`${t2.x},${t2.y}`) && !pathPositions.has(`${t2.x},${t2.y}`)
+    ).map((t2) => ({ x: t2.x, y: t2.y }));
+  }, [tiles, towerPositions, pathPositions, result, gold, towerCost]);
+  const isoTiles = useMemo(() => tilesToIso(tiles), [tiles]);
+  const towerUnits = useMemo(() => towersToUnits(towers), [towers]);
+  const creepUnits = useMemo(() => creepsToUnits(creeps), [creeps]);
+  const isoUnits = useMemo(() => [...towerUnits, ...creepUnits], [towerUnits, creepUnits]);
+  const pathFeatures = useMemo(() => pathToFeatures(path), [path]);
+  const handleTileClick = useCallback((x, y) => {
+    if (result !== "none") return;
+    if (pathPositions.has(`${x},${y}`)) return;
+    if (towerPositions.has(`${x},${y}`)) return;
+    if (gold < towerCost) return;
+    if (placeTowerEvent) {
+      eventBus.emit(`UI:${placeTowerEvent}`, { x, y });
+    }
+  }, [result, pathPositions, towerPositions, gold, towerCost, placeTowerEvent, eventBus]);
+  const handleStartWave = useCallback(() => {
+    if (startWaveEvent) {
+      eventBus.emit(`UI:${startWaveEvent}`, { wave });
+    }
+  }, [startWaveEvent, wave, eventBus]);
+  const handlePlayAgain = useCallback(() => {
+    if (playAgainEvent) {
+      eventBus.emit(`UI:${playAgainEvent}`, {});
+    }
+  }, [playAgainEvent, eventBus]);
+  const canPlaceTower = gold >= towerCost && result === "none";
+  const canStartWave = !waveActive && result === "none";
+  return /* @__PURE__ */ jsxs(VStack, { className: cn("tower-defense-board relative min-h-[600px] bg-background", className), gap: "none", children: [
+    /* @__PURE__ */ jsxs(
+      HStack,
+      {
+        className: "px-4 py-2 border-b border-border bg-surface",
+        gap: "lg",
+        align: "center",
+        children: [
+          /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: t("td.gold") ?? "Gold" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", weight: "bold", className: "text-warning", children: gold })
+          ] }),
+          /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: t("td.lives") ?? "Lives" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", weight: "bold", className: lives <= 5 ? "text-error" : "text-success", children: lives })
+          ] }),
+          /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: t("td.wave") ?? "Wave" }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "body2", weight: "bold", children: [
+              wave,
+              " / ",
+              maxWaves
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { className: "ml-auto", children: [
+            canStartWave && /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: handleStartWave, children: t("td.startWave") ?? "Start Wave" }),
+            waveActive && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-warning animate-pulse", children: t("td.waveInProgress") ?? "Wave in progress\u2026" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { className: "relative flex-1", children: [
+      /* @__PURE__ */ jsx(
+        IsometricCanvas_default,
+        {
+          tiles: isoTiles,
+          units: isoUnits,
+          features: pathFeatures,
+          validMoves,
+          hoveredTile,
+          onTileClick: handleTileClick,
+          onTileHover: (x, y) => setHoveredTile({ x, y }),
+          onTileLeave: () => setHoveredTile(null),
+          scale
+        }
+      ),
+      hoveredTile && canPlaceTower && validMoves.some((m) => m.x === hoveredTile.x && m.y === hoveredTile.y) && /* @__PURE__ */ jsx(Box, { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10 bg-background/80 rounded px-3 py-1 backdrop-blur-sm pointer-events-none", children: /* @__PURE__ */ jsx(Typography, { variant: "small", children: t("td.placeTower") ?? `Place tower (${towerCost} gold)` }) })
+    ] }),
+    result !== "none" && /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center bg-background/70 backdrop-blur-sm", children: /* @__PURE__ */ jsxs(VStack, { className: "text-center p-8", gap: "lg", children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "h2",
+          className: cn(
+            "text-4xl font-black tracking-widest uppercase",
+            result === "won" ? "text-warning" : "text-error"
+          ),
+          children: result === "won" ? t("td.victory") ?? "Victory!" : t("td.defeat") ?? "Defeat!"
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { variant: "body1", className: "text-muted-foreground", children: result === "won" ? t("td.survivedAllWaves") ?? `Survived all ${maxWaves} waves!` : t("td.livesReachedZero") ?? "Your base was overrun." }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "primary",
+          className: "px-8 py-3 font-semibold",
+          onClick: handlePlayAgain,
+          children: t("td.playAgain") ?? "Play Again"
+        }
+      )
+    ] }) })
+  ] });
+}
+var CDN6, TERRAIN_SPRITES, TOWER_SPRITE, CREEP_SPRITE;
+var init_TowerDefenseBoard = __esm({
+  "components/game/organisms/TowerDefenseBoard.tsx"() {
+    "use client";
+    init_cn();
+    init_useEventBus();
+    init_Box();
+    init_Button();
+    init_Typography();
+    init_Stack();
+    init_IsometricCanvas();
+    init_boardEntity();
+    CDN6 = "https://almadar-kflow-assets.web.app/shared/";
+    TERRAIN_SPRITES = {
+      ground: `${CDN6}isometric-blocks/PNG/Platformer tiles/platformerTile_01.png`,
+      path: `${CDN6}isometric-blocks/PNG/Platformer tiles/platformerTile_09.png`,
+      wall: `${CDN6}isometric-blocks/PNG/Platformer tiles/platformerTile_05.png`
+    };
+    TOWER_SPRITE = `${CDN6}units/guardian.png`;
+    CREEP_SPRITE = `${CDN6}units/scrapper.png`;
+    TowerDefenseBoard.displayName = "TowerDefenseBoard";
+  }
+});
+function TowerDefenseTemplate({
+  entity,
+  title = "Tower Defense",
+  tiles,
+  path,
+  towers,
+  gold,
+  lives,
+  maxWaves,
+  towerCost,
+  scale,
+  placeTowerEvent,
+  startWaveEvent,
+  playAgainEvent,
+  gameEndEvent,
+  className
+}) {
+  const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      display: "flex",
+      fullHeight: true,
+      className: cn("tower-defense-template flex-col", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          HStack,
+          {
+            gap: "sm",
+            align: "center",
+            className: "px-4 py-3 border-b-2 border-border bg-surface shrink-0",
+            children: /* @__PURE__ */ jsx(Typography, { variant: "h4", children: title })
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { className: "flex-1 relative overflow-hidden", children: /* @__PURE__ */ jsx(
+          TowerDefenseBoard,
+          {
+            entity: resolved,
+            tiles,
+            path,
+            towers,
+            gold,
+            lives,
+            maxWaves,
+            towerCost,
+            scale,
+            placeTowerEvent,
+            startWaveEvent,
+            playAgainEvent,
+            gameEndEvent,
+            className: "h-full"
+          }
+        ) })
+      ]
+    }
+  );
+}
+var init_TowerDefenseTemplate = __esm({
+  "components/game/templates/TowerDefenseTemplate.tsx"() {
+    init_cn();
+    init_Box();
+    init_Stack();
+    init_Typography();
+    init_TowerDefenseBoard();
+    TowerDefenseTemplate.displayName = "TowerDefenseTemplate";
+  }
+});
 function useBattleState(initialUnits, eventConfig = {}, callbacks = {}) {
   const eventBus = useEventBus();
   const {
@@ -47103,17 +49645,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;
 }
@@ -47149,38 +49686,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] = useState(null);
-  const selectedHero = useMemo(
-    () => heroes.find((h) => str(h.id) === selectedHeroId) ?? null,
-    [heroes, selectedHeroId]
-  );
   const derivedTiles = 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 = 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 = useMemo(
+    () => gameUnits.find((u) => u.id === selectedHeroId) ?? null,
+    [gameUnits, selectedHeroId]
   );
   const MOVE_SPEED_MS_PER_TILE = 300;
   const movementAnimRef = useRef(null);
@@ -47226,51 +49766,50 @@ function WorldMapBoard({
   const validMoves = 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 = 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 = useCallback(
     (tx, ty) => isoToScreen(tx, ty, scale, baseOffsetX),
     [scale, baseOffsetX]
   );
   const hoveredHex = 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 = 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 = 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 });
     }
@@ -47281,38 +49820,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 = 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 = useCallback((id) => {
     onHeroSelect?.(id);
     if (heroSelectEvent) {
@@ -47416,48 +49956,48 @@ function WorldMapTemplate({
     }
   );
 }
-var CDN3, DEFAULT_WORLDMAP_TILES, DEFAULT_WORLDMAP_UNITS, DEFAULT_WORLDMAP_FEATURES, DEFAULT_WORLDMAP_MANIFEST;
+var CDN7, DEFAULT_WORLDMAP_TILES, DEFAULT_WORLDMAP_UNITS, DEFAULT_WORLDMAP_FEATURES, DEFAULT_WORLDMAP_MANIFEST;
 var init_WorldMapTemplate = __esm({
   "components/game/templates/WorldMapTemplate.tsx"() {
     init_WorldMapBoard();
-    CDN3 = "https://almadar-kflow-assets.web.app/shared";
+    CDN7 = "https://almadar-kflow-assets.web.app/shared";
     DEFAULT_WORLDMAP_TILES = [
-      { x: 0, y: 0, terrain: "mountain", passable: false, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
-      { x: 1, y: 0, terrain: "mountain", passable: false, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
-      { x: 2, y: 0, terrain: "water", passable: false, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_11.png` },
-      { x: 3, y: 0, terrain: "mountain", passable: false, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
-      { x: 4, y: 0, terrain: "mountain", passable: false, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
-      { x: 0, y: 1, terrain: "mountain", passable: false, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
-      { x: 1, y: 1, terrain: "grass", passable: true, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
-      { x: 2, y: 1, terrain: "grass", passable: true, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
-      { x: 3, y: 1, terrain: "grass", passable: true, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
-      { x: 4, y: 1, terrain: "water", passable: false, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_11.png` },
-      { x: 0, y: 2, terrain: "water", passable: false, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_11.png` },
-      { x: 1, y: 2, terrain: "grass", passable: true, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
-      { x: 2, y: 2, terrain: "grass", passable: true, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_03.png` },
-      { x: 3, y: 2, terrain: "grass", passable: true, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
-      { x: 4, y: 2, terrain: "mountain", passable: false, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
-      { x: 0, y: 3, terrain: "mountain", passable: false, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
-      { x: 1, y: 3, terrain: "grass", passable: true, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
-      { x: 2, y: 3, terrain: "grass", passable: true, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
-      { x: 3, y: 3, terrain: "grass", passable: true, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_03.png` },
-      { x: 4, y: 3, terrain: "mountain", passable: false, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
-      { x: 0, y: 4, terrain: "mountain", passable: false, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
-      { x: 1, y: 4, terrain: "water", passable: false, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_11.png` },
-      { x: 2, y: 4, terrain: "grass", passable: true, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
-      { x: 3, y: 4, terrain: "mountain", passable: false, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
-      { x: 4, y: 4, terrain: "mountain", passable: false, terrainSprite: `${CDN3}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` }
+      { x: 0, y: 0, terrain: "mountain", passable: false, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
+      { x: 1, y: 0, terrain: "mountain", passable: false, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
+      { x: 2, y: 0, terrain: "water", passable: false, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_11.png` },
+      { x: 3, y: 0, terrain: "mountain", passable: false, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
+      { x: 4, y: 0, terrain: "mountain", passable: false, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
+      { x: 0, y: 1, terrain: "mountain", passable: false, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
+      { x: 1, y: 1, terrain: "grass", passable: true, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
+      { x: 2, y: 1, terrain: "grass", passable: true, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
+      { x: 3, y: 1, terrain: "grass", passable: true, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
+      { x: 4, y: 1, terrain: "water", passable: false, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_11.png` },
+      { x: 0, y: 2, terrain: "water", passable: false, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_11.png` },
+      { x: 1, y: 2, terrain: "grass", passable: true, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
+      { x: 2, y: 2, terrain: "grass", passable: true, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_03.png` },
+      { x: 3, y: 2, terrain: "grass", passable: true, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
+      { x: 4, y: 2, terrain: "mountain", passable: false, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
+      { x: 0, y: 3, terrain: "mountain", passable: false, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
+      { x: 1, y: 3, terrain: "grass", passable: true, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
+      { x: 2, y: 3, terrain: "grass", passable: true, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
+      { x: 3, y: 3, terrain: "grass", passable: true, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_03.png` },
+      { x: 4, y: 3, terrain: "mountain", passable: false, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
+      { x: 0, y: 4, terrain: "mountain", passable: false, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
+      { x: 1, y: 4, terrain: "water", passable: false, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_11.png` },
+      { x: 2, y: 4, terrain: "grass", passable: true, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png` },
+      { x: 3, y: 4, terrain: "mountain", passable: false, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` },
+      { x: 4, y: 4, terrain: "mountain", passable: false, terrainSprite: `${CDN7}/isometric-blocks/PNG/Platformer tiles/platformerTile_13.png` }
     ];
     DEFAULT_WORLDMAP_UNITS = [
-      { id: "h1", position: { x: 1, y: 1 }, unitType: "hero", name: "Amir", team: "player", health: 10, maxHealth: 10, sprite: `${CDN3}/sprite-sheets/amir-sprite-sheet-se.png` },
-      { id: "h2", position: { x: 3, y: 3 }, unitType: "scout", name: "Archivist", team: "player", health: 10, maxHealth: 10, sprite: `${CDN3}/sprite-sheets/archivist-sprite-sheet-se.png` }
+      { id: "h1", position: { x: 1, y: 1 }, unitType: "hero", name: "Amir", team: "player", health: 10, maxHealth: 10, sprite: `${CDN7}/sprite-sheets/amir-sprite-sheet-se.png` },
+      { id: "h2", position: { x: 3, y: 3 }, unitType: "scout", name: "Archivist", team: "player", health: 10, maxHealth: 10, sprite: `${CDN7}/sprite-sheets/archivist-sprite-sheet-se.png` }
     ];
     DEFAULT_WORLDMAP_FEATURES = [
-      { id: "f1", x: 2, y: 2, type: "capital", sprite: `${CDN3}/scenes/world/capital.png` },
-      { id: "f2", x: 4, y: 2, type: "power_node", sprite: `${CDN3}/world-map/power_node.png` }
+      { id: "f1", x: 2, y: 2, type: "capital", sprite: `${CDN7}/scenes/world/capital.png` },
+      { id: "f2", x: 4, y: 2, type: "power_node", sprite: `${CDN7}/world-map/power_node.png` }
     ];
     DEFAULT_WORLDMAP_MANIFEST = {
-      baseUrl: CDN3,
+      baseUrl: CDN7,
       terrains: {
         grass: "/isometric-blocks/PNG/Platformer tiles/platformerTile_01.png",
         water: "/isometric-blocks/PNG/Platformer tiles/platformerTile_11.png",
@@ -47502,7 +50042,7 @@ function lazyThree(name, loader) {
   ThreeWrapper.displayName = `Lazy(${name})`;
   return ThreeWrapper;
 }
-var ThreeBoundary, FeatureRenderer, GameCanvas3D, GameCanvas3DBattleTemplate, GameCanvas3DCastleTemplate, GameCanvas3DWorldMapTemplate, COMPONENT_REGISTRY;
+var ThreeBoundary, FeatureRenderer, GameCanvas3D2, GameCanvas3DBattleTemplate, GameCanvas3DCastleTemplate, GameCanvas3DWorldMapTemplate, COMPONENT_REGISTRY;
 var init_component_registry_generated = __esm({
   "components/core/organisms/component-registry.generated.ts"() {
     init_AboutPageTemplate();
@@ -47612,6 +50152,7 @@ var init_component_registry_generated = __esm({
     init_FormSectionHeader();
     init_GameAudioProvider();
     init_GameAudioToggle();
+    init_GameBoard3D();
     init_GameCanvas2D();
     init_GameHud();
     init_GameMenu();
@@ -47669,7 +50210,9 @@ var init_component_registry_generated = __esm({
     init_PageHeader();
     init_Pagination();
     init_PatternTile();
+    init_PlatformerBoard();
     init_PlatformerCanvas();
+    init_PlatformerTemplate();
     init_Popover();
     init_PositionedCanvas();
     init_PowerupSlots();
@@ -47693,6 +50236,8 @@ var init_component_registry_generated = __esm({
     init_ResourceBar();
     init_ResourceCounter();
     init_RichBlockEditor();
+    init_RoguelikeBoard();
+    init_RoguelikeTemplate();
     init_RuntimeDebugger2();
     init_ScaledDiagram();
     init_ScoreBoard();
@@ -47765,6 +50310,8 @@ var init_component_registry_generated = __esm({
     init_Toast();
     init_ToastSlot();
     init_Tooltip();
+    init_TowerDefenseBoard();
+    init_TowerDefenseTemplate();
     init_TraitFrame();
     init_TraitSlot();
     init_TrendIndicator();
@@ -47809,7 +50356,7 @@ var init_component_registry_generated = __esm({
       }
     };
     FeatureRenderer = lazyThree("FeatureRenderer", () => import('@almadar/ui/components/molecules/game/three'));
-    GameCanvas3D = lazyThree("GameCanvas3D", () => import('@almadar/ui/components/molecules/game/three'));
+    GameCanvas3D2 = lazyThree("GameCanvas3D", () => import('@almadar/ui/components/molecules/game/three'));
     GameCanvas3DBattleTemplate = lazyThree("GameCanvas3DBattleTemplate", () => import('@almadar/ui/components/molecules/game/three'));
     GameCanvas3DCastleTemplate = lazyThree("GameCanvas3DCastleTemplate", () => import('@almadar/ui/components/molecules/game/three'));
     GameCanvas3DWorldMapTemplate = lazyThree("GameCanvas3DWorldMapTemplate", () => import('@almadar/ui/components/molecules/game/three'));
@@ -47928,8 +50475,9 @@ var init_component_registry_generated = __esm({
       "FormSectionHeader": FormSectionHeader,
       "GameAudioProvider": GameAudioProvider,
       "GameAudioToggle": GameAudioToggle,
+      "GameBoard3D": GameBoard3D,
       "GameCanvas2D": GameCanvas2D,
-      "GameCanvas3D": GameCanvas3D,
+      "GameCanvas3D": GameCanvas3D2,
       "GameCanvas3DBattleTemplate": GameCanvas3DBattleTemplate,
       "GameCanvas3DCastleTemplate": GameCanvas3DCastleTemplate,
       "GameCanvas3DWorldMapTemplate": GameCanvas3DWorldMapTemplate,
@@ -47991,7 +50539,9 @@ var init_component_registry_generated = __esm({
       "PageHeader": PageHeader,
       "Pagination": Pagination,
       "PatternTile": PatternTile,
+      "PlatformerBoard": PlatformerBoard,
       "PlatformerCanvas": PlatformerCanvas,
+      "PlatformerTemplate": PlatformerTemplate,
       "Popover": Popover,
       "PositionedCanvas": PositionedCanvas,
       "PowerupSlots": PowerupSlots,
@@ -48015,6 +50565,8 @@ var init_component_registry_generated = __esm({
       "ResourceBar": ResourceBar,
       "ResourceCounter": ResourceCounter,
       "RichBlockEditor": RichBlockEditor,
+      "RoguelikeBoard": RoguelikeBoard,
+      "RoguelikeTemplate": RoguelikeTemplate,
       "RuntimeDebugger": RuntimeDebugger,
       "ScaledDiagram": ScaledDiagram,
       "ScoreBoard": ScoreBoard,
@@ -48090,6 +50642,8 @@ var init_component_registry_generated = __esm({
       "Toast": Toast,
       "ToastSlot": ToastSlot,
       "Tooltip": Tooltip,
+      "TowerDefenseBoard": TowerDefenseBoard,
+      "TowerDefenseTemplate": TowerDefenseTemplate,
       "TraitFrame": TraitFrame,
       "TraitSlot": TraitSlot,
       "TrendIndicator": TrendIndicator,
@@ -49261,7 +51815,7 @@ init_UISlotRenderer();
 // providers/VerificationProvider.tsx
 init_useEventBus();
 init_verificationRegistry();
-var log11 = createLogger("almadar:verify");
+var log13 = createLogger("almadar:verify");
 var DISPATCH_SUFFIX = ":DISPATCH";
 var SUCCESS_SUFFIX = ":SUCCESS";
 var ERROR_SUFFIX = ":ERROR";
@@ -49308,7 +51862,7 @@ function VerificationProvider({
     const verificationProviderLifecycleListener = (evt) => {
       const parsed = parseLifecycleEvent(evt.type);
       if (!parsed) return;
-      log11.debug("lifecycle:event", { kind: parsed.kind, traitName: parsed.traitName, event: parsed.event, type: evt.type });
+      log13.debug("lifecycle:event", { kind: parsed.kind, traitName: parsed.traitName, event: parsed.event, type: evt.type });
       const payload = evt.payload ?? {};
       if (parsed.kind === "dispatch") {
         const key = `${parsed.traitName}:${String(payload["event"] ?? "")}`;
@@ -49363,7 +51917,7 @@ function VerificationProvider({
           },
           timestamp: Date.now()
         });
-        log11.debug("transition:success", { trait: parsed.traitName, event: parsed.event, from: pending?.from, to: newState, effectCount: effects.length });
+        log13.debug("transition:success", { trait: parsed.traitName, event: parsed.event, from: pending?.from, to: newState, effectCount: effects.length });
       } else if (parsed.kind === "error" && parsed.event) {
         const key = `${parsed.traitName}:${parsed.event}`;
         const pending = pendingRef.current.get(key);
@@ -49393,7 +51947,7 @@ function VerificationProvider({
           },
           timestamp: Date.now()
         });
-        log11.warn("transition:error", { trait: parsed.traitName, event: parsed.event, from: fromState, error: errorMsg });
+        log13.warn("transition:error", { trait: parsed.traitName, event: parsed.event, from: fromState, error: errorMsg });
       }
     };
     Object.defineProperty(verificationProviderLifecycleListener, "name", {