@almadar/ui 5.48.0 → 5.49.0

package/dist/avl/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React91 from 'react';
-import React91__default, { createContext, useState, useMemo, useRef, useEffect, useContext, useCallback, Suspense, useLayoutEffect, Profiler, useReducer, useSyncExternalStore, lazy, useId } from 'react';
+import React91__default, { createContext, useState, useMemo, useRef, useEffect, useContext, useCallback, Suspense, useLayoutEffect, Profiler, useReducer, useSyncExternalStore, lazy, useId, forwardRef, useImperativeHandle, Component } from 'react';
 import { OrbitalProvider, EventBusContext, useTraitScope, VerificationProvider, TraitScopeProvider } from '@almadar/ui/providers';
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 import ELK from 'elkjs/lib/elk.bundled.js';
@@ -39,6 +39,12 @@ import { FieldTypeSchema, isInlineTrait, isPageReference, isEntityCall, schemaTo
 import { useDroppable, useDraggable, DndContext, DragOverlay, useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, useSortable, arrayMove, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+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, isEntityAwarePattern } from '@almadar/patterns';
 import { OrbitalServerRuntime } from '@almadar/runtime/OrbitalServerRuntime';
 import { InMemoryPersistence, StateMachineManager, createContextFromBindings, interpolateValue, collectDeclaredConfigDefaults, createServerEffectHandlers, EffectExecutor } from '@almadar/runtime';
@@ -3173,8 +3179,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,
         {
@@ -3483,7 +3489,7 @@ var init_Box = __esm({
         position,
         className,
         children,
-        as: Component = "div",
+        as: Component2 = "div",
         action,
         actionPayload,
         hoverEvent,
@@ -3515,7 +3521,7 @@ var init_Box = __esm({
         }, [hoverEvent, eventBus, onMouseLeave]);
         const isClickable = action || onClick;
         return React91__default.createElement(
-          Component,
+          Component2,
           {
             ref,
             className: cn(
@@ -3591,7 +3597,7 @@ var init_Stack = __esm({
       className,
       style,
       children,
-      as: Component = "div",
+      as: Component2 = "div",
       onClick,
       onKeyDown,
       role,
@@ -3609,7 +3615,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,
         {
@@ -4523,9 +4529,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,
@@ -4549,9 +4555,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,
@@ -4575,9 +4581,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,
@@ -7969,10 +7975,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,
         {
@@ -10766,6 +10772,7 @@ var init_HealthBar = __esm({
   }
 });
 function ScoreDisplay({
+  assetUrl = DEFAULT_ASSET_URL,
   value,
   label,
   icon,
@@ -10812,14 +10819,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";
@@ -10831,10 +10848,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",
@@ -10881,7 +10900,7 @@ function ControlButton({
     },
     [isPressed, releaseEvent, eventBus, onRelease]
   );
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
@@ -10902,20 +10921,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";
@@ -10938,6 +10964,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";
   }
 });
@@ -11017,7 +11044,7 @@ var init_Sprite = __esm({
   }
 });
 function StateIndicator({
-  assetUrl = DEFAULT_ASSET_URL,
+  assetUrl = DEFAULT_ASSET_URL3,
   state = "idle",
   label,
   size = "md",
@@ -11056,13 +11083,13 @@ function StateIndicator({
     }
   );
 }
-var DEFAULT_ASSET_URL, 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_URL = "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png";
+    DEFAULT_ASSET_URL3 = "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png";
     DEFAULT_STATE_STYLES = {
       idle: { icon: "\u23F8", bgClass: "bg-muted" },
       active: { icon: "\u25B6", bgClass: "bg-success" },
@@ -11137,7 +11164,7 @@ var init_TimerDisplay = __esm({
   }
 });
 function ResourceCounter({
-  assetUrl = DEFAULT_ASSET_URL2,
+  assetUrl = DEFAULT_ASSET_URL4,
   icon,
   label = "Gold",
   value = 250,
@@ -11180,7 +11207,7 @@ function ResourceCounter({
     }
   );
 }
-var colorTokenClasses2, DEFAULT_ASSET_URL2, sizeMap5;
+var colorTokenClasses2, DEFAULT_ASSET_URL4, sizeMap5;
 var init_ResourceCounter = __esm({
   "components/game/atoms/ResourceCounter.tsx"() {
     init_cn();
@@ -11193,7 +11220,7 @@ var init_ResourceCounter = __esm({
       error: "text-error",
       muted: "text-muted-foreground"
     };
-    DEFAULT_ASSET_URL2 = "https://almadar-kflow-assets.web.app/shared/world-map/gold_mine.png";
+    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", img: 16 },
       md: { wrapper: "text-sm gap-1.5 px-2 py-1", icon: "text-base", img: 20 },
@@ -11203,7 +11230,7 @@ var init_ResourceCounter = __esm({
   }
 });
 function ItemSlot({
-  assetUrl = DEFAULT_ASSET_URL3,
+  assetUrl = DEFAULT_ASSET_URL5,
   icon = "sword",
   label = "Iron Sword",
   quantity,
@@ -11262,7 +11289,7 @@ function ItemSlot({
     }
   );
 }
-var sizeMap6, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL3, assetSizeMap;
+var sizeMap6, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL5, assetSizeMap;
 var init_ItemSlot = __esm({
   "components/game/atoms/ItemSlot.tsx"() {
     "use client";
@@ -11287,7 +11314,7 @@ var init_ItemSlot = __esm({
       epic: "shadow-lg",
       legendary: "shadow-lg"
     };
-    DEFAULT_ASSET_URL3 = "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,
@@ -11297,6 +11324,7 @@ var init_ItemSlot = __esm({
   }
 });
 function TurnIndicator({
+  assetUrl = DEFAULT_ASSET_URL6,
   currentTurn = 1,
   maxTurns,
   activeTeam,
@@ -11329,14 +11357,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();
@@ -11345,6 +11383,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";
   }
 });
@@ -11360,7 +11399,7 @@ function getComboScale(combo) {
   return "";
 }
 function ComboCounter({
-  assetUrl = DEFAULT_ASSET_URL4,
+  assetUrl = DEFAULT_ASSET_URL7,
   combo = 5,
   multiplier,
   streak,
@@ -11405,11 +11444,11 @@ function ComboCounter({
     }
   );
 }
-var DEFAULT_ASSET_URL4, sizeMap8;
+var DEFAULT_ASSET_URL7, sizeMap8;
 var init_ComboCounter = __esm({
   "components/game/atoms/ComboCounter.tsx"() {
     init_cn();
-    DEFAULT_ASSET_URL4 = "https://almadar-kflow-assets.web.app/shared/effects/flash/flash00.png";
+    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" },
@@ -11503,7 +11542,7 @@ var init_XPBar = __esm({
   }
 });
 function WaypointMarker({
-  assetUrl = DEFAULT_ASSET_URL5,
+  assetUrl = DEFAULT_ASSET_URL8,
   label,
   icon,
   active = true,
@@ -11569,12 +11608,12 @@ function WaypointMarker({
     )
   ] });
 }
-var DEFAULT_ASSET_URL5, sizeMap10, checkIcon;
+var DEFAULT_ASSET_URL8, sizeMap10, checkIcon;
 var init_WaypointMarker = __esm({
   "components/game/atoms/WaypointMarker.tsx"() {
     init_cn();
     init_Icon();
-    DEFAULT_ASSET_URL5 = "https://almadar-kflow-assets.web.app/shared/world-map/battle_marker.png";
+    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", img: 12 },
       md: { dot: "w-6 h-6", ring: "w-8 h-8", label: "text-sm mt-1.5", img: 18 },
@@ -11591,7 +11630,7 @@ function formatDuration(seconds) {
   return `${Math.round(seconds)}s`;
 }
 function StatusEffect({
-  assetUrl = DEFAULT_ASSET_URL6,
+  assetUrl = DEFAULT_ASSET_URL9,
   icon = "shield",
   label = "Shield",
   duration = 30,
@@ -11649,12 +11688,12 @@ function StatusEffect({
     label && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mt-0.5 text-center whitespace-nowrap", children: label })
   ] });
 }
-var DEFAULT_ASSET_URL6, sizeMap11, variantStyles7;
+var DEFAULT_ASSET_URL9, sizeMap11, variantStyles7;
 var init_StatusEffect = __esm({
   "components/game/atoms/StatusEffect.tsx"() {
     init_cn();
     init_Icon();
-    DEFAULT_ASSET_URL6 = "https://almadar-kflow-assets.web.app/shared/effects/particles/flame_01.png";
+    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]", 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 },
@@ -11669,6 +11708,7 @@ var init_StatusEffect = __esm({
   }
 });
 function DamageNumber({
+  assetUrl = DEFAULT_ASSET_URL10,
   value = 42,
   type = "damage",
   size = "md",
@@ -11677,22 +11717,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();
@@ -11714,6 +11767,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";
   }
 });
@@ -11802,6 +11856,7 @@ var init_ChoiceButton = __esm({
   }
 });
 function ActionButton({
+  assetUrl = DEFAULT_ASSET_URL11,
   label = "Attack",
   icon,
   cooldown = 0,
@@ -11841,13 +11896,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",
@@ -11863,7 +11928,7 @@ function ActionButton({
     }
   );
 }
-var sizeMap13, variantStyles8;
+var sizeMap13, variantStyles8, DEFAULT_ASSET_URL11;
 var init_ActionButton = __esm({
   "components/game/atoms/ActionButton.tsx"() {
     init_cn();
@@ -11878,6 +11943,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";
   }
 });
@@ -12390,10 +12456,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,
         {
@@ -27570,7 +27636,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) {
@@ -27582,7 +27648,7 @@ var init_Flex = __esm({
           flexStyle.flexBasis = typeof basis === "number" ? `${basis}px` : basis;
         }
       }
-      const Comp = Component;
+      const Comp = Component2;
       return /* @__PURE__ */ jsx(
         Comp,
         {
@@ -27702,11 +27768,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 React91__default.createElement(
-        Component,
+        Component2,
         {
           className: cn(
             "grid",
@@ -29532,6 +29598,7 @@ var init_ProgressDots = __esm({
   }
 });
 function StatBadge({
+  assetUrl = DEFAULT_ASSET_URL12,
   label,
   value = 0,
   max,
@@ -29555,7 +29622,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,
@@ -29588,7 +29665,7 @@ function StatBadge({
     }
   );
 }
-var sizeMap17, variantMap2;
+var sizeMap17, variantMap2, DEFAULT_ASSET_URL12;
 var init_StatBadge = __esm({
   "components/game/molecules/StatBadge.tsx"() {
     init_cn();
@@ -29607,6 +29684,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";
   }
 });
@@ -30263,6 +30341,7 @@ var init_TurnPanel = __esm({
   }
 });
 function EnemyPlate({
+  assetUrl = DEFAULT_ASSET_URL13,
   name = "Shadow Guard",
   health = 80,
   maxHealth = 100,
@@ -30280,15 +30359,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
@@ -30333,7 +30425,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";
@@ -30350,6 +30442,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";
   }
 });
@@ -31881,13 +31974,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect78, useRef: useRef70, useCallback: useCallback117, useState: useState115 } = React91__default;
+      const { useEffect: useEffect84, useRef: useRef76, useCallback: useCallback124, useState: useState120 } = React91__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
-      const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
+      const { useEventBus: useEventBus4 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef70({ centerLat, centerLng, zoom });
-        useEffect78(() => {
+        const prevRef = useRef76({ centerLat, centerLng, zoom });
+        useEffect84(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -31898,7 +31991,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect78(() => {
+        useEffect84(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -31925,9 +32018,9 @@ var init_MapView = __esm({
         className,
         showAttribution = true
       }) {
-        const eventBus = useEventBus3();
-        const [clickedPosition, setClickedPosition] = useState115(null);
-        const handleMapClick = useCallback117((lat, lng) => {
+        const eventBus = useEventBus4();
+        const [clickedPosition, setClickedPosition] = useState120(null);
+        const handleMapClick = useCallback124((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -31936,7 +32029,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback117((marker) => {
+        const handleMarkerClick = useCallback124((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -38654,10 +38747,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,
         {
@@ -43222,6 +43315,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 log9, Canvas3DErrorBoundary;
+var init_Canvas3DErrorBoundary2 = __esm({
+  "components/game/molecules/three/components/Canvas3DErrorBoundary.tsx"() {
+    init_Canvas3DErrorBoundary();
+    log9 = 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);
+        log9.error("Error caught", { error });
+        log9.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;
+    }
+    log10.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) => {
+        log10.debug("Loaded", { url });
+        setState({
+          model: gltf.scene,
+          isLoading: false,
+          error: null
+        });
+      },
+      void 0,
+      (err) => {
+        log10.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 log10;
+var init_ModelLoader = __esm({
+  "components/game/molecules/three/components/ModelLoader.tsx"() {
+    "use client";
+    log10 = 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"() {
@@ -44764,6 +46419,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"() {
@@ -44886,6 +46771,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 notifyListeners2() {
@@ -46139,7 +48374,7 @@ function getAllEvents(traits2) {
 function EventDispatcherTab({ traits: traits2, schema }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [log13, setLog] = React91.useState([]);
+  const [log15, setLog] = React91.useState([]);
   const prevStatesRef = React91.useRef(/* @__PURE__ */ new Map());
   React91.useEffect(() => {
     for (const trait of traits2) {
@@ -46203,9 +48438,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)) })
     ] }),
-    log13.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+    log15.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: log13.map((entry, i) => /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono text-xs", children: [
+      /* @__PURE__ */ jsx(Stack, { gap: "xs", children: log15.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 }),
@@ -48126,9 +50361,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;
@@ -48158,12 +50393,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;
     };
@@ -49016,6 +51251,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 {
@@ -49525,48 +52043,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",
@@ -49611,7 +52129,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();
@@ -49721,6 +52239,7 @@ var init_component_registry_generated = __esm({
     init_FormSectionHeader();
     init_GameAudioProvider();
     init_GameAudioToggle();
+    init_GameBoard3D();
     init_GameCanvas2D();
     init_GameHud();
     init_GameMenu();
@@ -49778,7 +52297,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();
@@ -49802,6 +52323,8 @@ var init_component_registry_generated = __esm({
     init_ResourceBar();
     init_ResourceCounter();
     init_RichBlockEditor();
+    init_RoguelikeBoard();
+    init_RoguelikeTemplate();
     init_RuntimeDebugger2();
     init_ScaledDiagram();
     init_ScoreBoard();
@@ -49874,6 +52397,8 @@ var init_component_registry_generated = __esm({
     init_Toast();
     init_ToastSlot();
     init_Tooltip();
+    init_TowerDefenseBoard();
+    init_TowerDefenseTemplate();
     init_TraitFrame();
     init_TraitSlot();
     init_TrendIndicator();
@@ -49918,7 +52443,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'));
@@ -50037,8 +52562,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,
@@ -50100,7 +52626,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,
@@ -50124,6 +52652,8 @@ var init_component_registry_generated = __esm({
       "ResourceBar": ResourceBar,
       "ResourceCounter": ResourceCounter,
       "RichBlockEditor": RichBlockEditor,
+      "RoguelikeBoard": RoguelikeBoard,
+      "RoguelikeTemplate": RoguelikeTemplate,
       "RuntimeDebugger": RuntimeDebugger,
       "ScaledDiagram": ScaledDiagram,
       "ScoreBoard": ScoreBoard,
@@ -50199,6 +52729,8 @@ var init_component_registry_generated = __esm({
       "Toast": Toast,
       "ToastSlot": ToastSlot,
       "Tooltip": Tooltip,
+      "TowerDefenseBoard": TowerDefenseBoard,
+      "TowerDefenseTemplate": TowerDefenseTemplate,
       "TraitFrame": TraitFrame,
       "TraitSlot": TraitSlot,
       "TrendIndicator": TrendIndicator,
@@ -54685,7 +57217,7 @@ function convertObjectProps(props) {
 function convertFnFormLambdasInProps(props) {
   return convertObjectProps(props);
 }
-var log9 = createLogger("almadar:ui:effects:client-handlers");
+var log11 = createLogger("almadar:ui:effects:client-handlers");
 function createClientEffectHandlers(options) {
   const { eventBus, slotSetter, navigate, notify, callService } = options;
   return {
@@ -54694,10 +57226,10 @@ function createClientEffectHandlers(options) {
       eventBus.emit(prefixedEvent, payload);
     },
     persist: async () => {
-      log9.warn("persist is server-side only, ignored on client");
+      log11.warn("persist is server-side only, ignored on client");
     },
     set: () => {
-      log9.warn("set is server-side only, ignored on client");
+      log11.warn("set is server-side only, ignored on client");
     },
     callService: async (service, action, params) => {
       if (callService) return callService(service, action, params);
@@ -54726,10 +57258,10 @@ function createClientEffectHandlers(options) {
       slotSetter.addPattern(slot, pattern, props);
     },
     navigate: navigate ?? ((path) => {
-      log9.warn("No navigate handler, ignoring", { path });
+      log11.warn("No navigate handler, ignoring", { path });
     }),
     notify: notify ?? ((msg, type) => {
-      log9.debug("notify", { type, message: msg });
+      log11.debug("notify", { type, message: msg });
     })
   };
 }
@@ -55894,7 +58426,7 @@ OrbitalThemeProvider.displayName = "OrbitalThemeProvider";
 init_navigation();
 init_verificationRegistry();
 var PERF_NAMESPACE = "almadar:perf:canvas";
-var log10 = createLogger(PERF_NAMESPACE);
+var log12 = createLogger(PERF_NAMESPACE);
 var RING_SIZE = 50;
 var ring = [];
 var writeIdx = 0;
@@ -55945,7 +58477,7 @@ function perfEnd(name, startToken, detail) {
     }
   }
   push({ name, durationMs, ts: endTs, detail });
-  log10.debug(name, () => ({ durationMs, ...detail ?? {} }));
+  log12.debug(name, () => ({ durationMs, ...detail ?? {} }));
 }
 var profilerOnRender = (id, phase, actualDuration, baseDuration, _startTime, commitTime) => {
   if (!isEnabled()) return;
@@ -55955,7 +58487,7 @@ var profilerOnRender = (id, phase, actualDuration, baseDuration, _startTime, com
     ts: commitTime,
     detail: { baseDuration }
   });
-  log10.debug(`profiler:${id}:${phase}`, () => ({ actualDuration, baseDuration }));
+  log12.debug(`profiler:${id}:${phase}`, () => ({ actualDuration, baseDuration }));
 };
 
 // runtime/prepareSchemaForPreview.ts
@@ -56598,7 +59130,7 @@ init_useEventBus();
 // components/avl/molecules/useCanvasDnd.tsx
 init_useEventBus();
 init_useAlmadarDndCollision();
-var log11 = createLogger("almadar:ui:canvas-dnd");
+var log13 = createLogger("almadar:ui:canvas-dnd");
 function useCanvasDraggable({
   id,
   payload,
@@ -56637,7 +59169,7 @@ function defaultEmit(eventBus, drop) {
   if (payload.kind === "pattern") {
     const patternType = payload.data.type;
     if (typeof patternType !== "string") {
-      log11.warn("default-emit:pattern:missing-type");
+      log13.warn("default-emit:pattern:missing-type");
       return;
     }
     const out = { patternType, containerNode: target.containerNode };
@@ -56646,23 +59178,23 @@ function defaultEmit(eventBus, drop) {
       out.index = resolved.index;
     }
     eventBus.emit("UI:PATTERN_DROP", out);
-    log11.info("default-emit:pattern", { patternType, level: target.level });
+    log13.info("default-emit:pattern", { patternType, level: target.level });
     return;
   }
   if (payload.kind === "behavior") {
     const behaviorName = payload.data.name;
     if (typeof behaviorName !== "string") {
-      log11.warn("default-emit:behavior:missing-name");
+      log13.warn("default-emit:behavior:missing-name");
       return;
     }
     eventBus.emit("UI:BEHAVIOR_DROP", {
       behaviorName,
       containerNode: target.containerNode
     });
-    log11.info("default-emit:behavior", { behaviorName, level: target.level });
+    log13.info("default-emit:behavior", { behaviorName, level: target.level });
     return;
   }
-  log11.debug("default-emit:unhandled-kind", { kind: payload.kind });
+  log13.debug("default-emit:unhandled-kind", { kind: payload.kind });
 }
 function CanvasDndProvider({
   children,
@@ -56678,9 +59210,9 @@ function CanvasDndProvider({
     if (payload) {
       setActivePayload(payload);
       eventBus.emit("UI:DRAG_START", { kind: payload.kind, data: payload.data });
-      log11.info("dragStart", { id: e.active.id, kind: payload.kind });
+      log13.info("dragStart", { id: e.active.id, kind: payload.kind });
     } else {
-      log11.warn("dragStart:missing-payload", { id: e.active.id });
+      log13.warn("dragStart:missing-payload", { id: e.active.id });
     }
   }, [eventBus]);
   const handleDragEnd = React91__default.useCallback((e) => {
@@ -56690,7 +59222,7 @@ function CanvasDndProvider({
     const overData = e.over?.data.current;
     const target = overData?.target;
     const accepts = overData?.accepts;
-    log11.info("dragEnd", {
+    log13.info("dragEnd", {
       activeId: e.active.id,
       overId: e.over?.id,
       hasPayload: !!payload,
@@ -56702,7 +59234,7 @@ function CanvasDndProvider({
     }
     if (!payload || !target) return;
     if (accepts && !accepts.includes(payload.kind)) {
-      log11.debug("dragEnd:rejected:kind", { kind: payload.kind, accepts: [...accepts] });
+      log13.debug("dragEnd:rejected:kind", { kind: payload.kind, accepts: [...accepts] });
       return;
     }
     const activator = e.activatorEvent;
@@ -56714,7 +59246,7 @@ function CanvasDndProvider({
   }, [eventBus, onDrop]);
   const handleDragCancel = React91__default.useCallback(() => {
     setActivePayload(null);
-    log11.info("dragCancel");
+    log13.info("dragCancel");
   }, []);
   return /* @__PURE__ */ jsxs(
     DndContext,
@@ -58529,7 +61061,7 @@ init_AvlTransitionLane();
 init_AvlSwimLane();
 init_types();
 init_avl_elk_layout();
-var log12 = createLogger("almadar:ui:avl:trait-scene");
+var log14 = createLogger("almadar:ui:avl:trait-scene");
 var SWIM_GUTTER2 = 120;
 var CENTER_W2 = 360;
 var AvlTraitScene = ({
@@ -58542,7 +61074,7 @@ var AvlTraitScene = ({
   const dataKey = useMemo(() => JSON.stringify(data), [data]);
   useEffect(() => {
     computeTraitLayout(data).then(setLayout).catch((error) => {
-      log12.error("computeTraitLayout failed", { error: error instanceof Error ? error : String(error) });
+      log14.error("computeTraitLayout failed", { error: error instanceof Error ? error : String(error) });
     });
   }, [dataKey]);
   if (!layout) {