@almadar/ui 1.0.21 → 1.0.22

package/dist/components/index.js

@@ -1,15 +1,15 @@
-import { useDesignTheme } from '../chunk-4FRUCUO5.js';
-import { useQuerySingleton, usePaginatedEntityList, useEntityList, useSelectedEntity, useEntityDetail, useAuthContext } from '../chunk-VE4ZELYZ.js';
-export { ENTITY_EVENTS, entityDataKeys, parseQueryBinding, useAgentChat, useAuthContext, useCompile, useConnectGitHub, useCreateEntity, useDeepAgentGeneration, useDeleteEntity, useDisconnectGitHub, useEntities, useEntitiesByType, useEntity, useEntity2 as useEntityById, useEntityDetail, useEntityList, useEntityMutations, useExtensions, useFileEditor, useFileSystem, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useInput, useOrbitalHistory, useOrbitalMutations, usePhysics, usePlayer, usePreview, useQuerySingleton, useSelectedEntity, useSendOrbitalEvent, useSingletonEntity, useUIEvents, useUpdateEntity, useValidation } from '../chunk-VE4ZELYZ.js';
+import { useUISlots } from '../chunk-W5YTXLXL.js';
+import { useQuerySingleton, useSelectedEntity, useAuthContext } from '../chunk-ITRZURGQ.js';
+export { ENTITY_EVENTS, parseQueryBinding, useAgentChat, useAuthContext, useCompile, useConnectGitHub, useCreateEntity, useDeepAgentGeneration, useDeleteEntity, useDisconnectGitHub, useEntities, useEntitiesByType, useEntity as useEntityById, useEntityMutations, useExtensions, useFileEditor, useFileSystem, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useInput, useOrbitalHistory, useOrbitalMutations, usePhysics, usePlayer, usePreview, useQuerySingleton, useSelectedEntity, useSendOrbitalEvent, useSingletonEntity, useUIEvents, useUpdateEntity, useValidation } from '../chunk-ITRZURGQ.js';
+export { DEFAULT_SLOTS, useUISlotManager } from '../chunk-7NEWMNNU.js';
 import { cn, debugGroup, debug, debugGroupEnd, getNestedValue, isDebugEnabled } from '../chunk-KKCVDUK7.js';
 export { cn } from '../chunk-KKCVDUK7.js';
 import '../chunk-XSEDIUM6.js';
-import { useTheme, useUISlots } from '../chunk-I5RSZIOE.js';
-import { useEventBus } from '../chunk-TTXKOHDO.js';
-export { useEmitEvent, useEventBus, useEventListener } from '../chunk-TTXKOHDO.js';
-export { DEFAULT_SLOTS, useUISlotManager } from '../chunk-7NEWMNNU.js';
+import { useTheme } from '../chunk-4UFNDD6B.js';
+import { useEventBus, usePaginatedEntityList, useEntityList, useEntityDetail } from '../chunk-WXFQV3ZP.js';
+export { EntityDataProvider, entityDataKeys, useEmitEvent, useEntity, useEntityDataAdapter, useEntityDetail, useEntityList, useEventBus, useEventListener } from '../chunk-WXFQV3ZP.js';
 export { clearEntities, getAllEntities, getByType, getEntity, getSingleton, removeEntity, spawnEntity, updateEntity, updateSingleton } from '../chunk-N7MVUW4R.js';
-import '../chunk-PKBMQBKP.js';
+import { __publicField } from '../chunk-PKBMQBKP.js';
 import * as React37 from 'react';
 import React37__default, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import * as LucideIcons from 'lucide-react';
@@ -1816,47 +1816,95 @@ ThemeToggle.displayName = "ThemeToggle";
 var THEME_LABELS = {
   wireframe: {
     label: "Wireframe",
-    icon: "\u{1F4D0}",
-    description: "Sharp corners, thick borders"
+    description: "Sharp corners, thick borders, brutalist"
   },
   minimalist: {
     label: "Minimalist",
-    icon: "\u2728",
     description: "Clean, subtle, refined"
   },
   almadar: {
     label: "Almadar",
-    icon: "\u{1F48E}",
     description: "Teal gradients, glowing accents"
+  },
+  "trait-wars": {
+    label: "Trait Wars",
+    description: "Gold parchment, game manuscript"
+  },
+  ocean: {
+    label: "Ocean",
+    description: "Deep sea calm, ocean blues"
+  },
+  forest: {
+    label: "Forest",
+    description: "Woodland serenity, earthy greens"
+  },
+  sunset: {
+    label: "Sunset",
+    description: "Golden hour, warm coral and amber"
+  },
+  lavender: {
+    label: "Lavender",
+    description: "Creative studio, soft violet"
+  },
+  rose: {
+    label: "Rose",
+    description: "Elegant bloom, warm pink"
+  },
+  slate: {
+    label: "Slate",
+    description: "Corporate edge, cool gray"
+  },
+  ember: {
+    label: "Ember",
+    description: "Fire and energy, bold red"
+  },
+  midnight: {
+    label: "Midnight",
+    description: "Noir elegance, deep indigo"
+  },
+  sand: {
+    label: "Sand",
+    description: "Desert minimal, warm earth"
+  },
+  neon: {
+    label: "Neon",
+    description: "Cyberpunk, glowing cyan and pink"
+  },
+  arctic: {
+    label: "Arctic",
+    description: "Ice crystal, cool blue"
+  },
+  copper: {
+    label: "Copper",
+    description: "Warm industrial, metallic bronze"
   }
 };
+function getThemeLabel(name) {
+  return THEME_LABELS[name] || { label: name, description: name };
+}
 var ThemeSelector = ({
   className = "",
   variant = "dropdown",
   showLabels = true
 }) => {
-  const { designTheme, setDesignTheme, availableThemes } = useDesignTheme();
+  const { theme, setTheme, availableThemes } = useTheme();
   if (variant === "buttons") {
-    return /* @__PURE__ */ jsx("div", { className: `flex gap-2 ${className}`, children: availableThemes.map((theme) => {
-      const { label, icon } = THEME_LABELS[theme];
-      const isActive = designTheme === theme;
-      return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: `flex gap-2 flex-wrap ${className}`, children: availableThemes.map((t) => {
+      const { label } = getThemeLabel(t.name);
+      const isActive = theme === t.name;
+      return /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: () => setDesignTheme(theme),
+          onClick: () => setTheme(t.name),
           className: `
                 px-3 py-2 text-sm font-medium transition-all
                 border-[length:var(--border-width)] rounded-[var(--radius-sm)]
                 ${isActive ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] border-[var(--color-primary)]" : "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)] border-[var(--color-border)] hover:bg-[var(--color-secondary-hover)]"}
               `,
-          title: THEME_LABELS[theme].description,
-          children: [
-            icon,
-            " ",
-            showLabels && label
-          ]
+          title: getThemeLabel(t.name).description,
+          children: showLabels && label
         },
-        theme
+        t.name
       );
     }) });
   }
@@ -1864,8 +1912,8 @@ var ThemeSelector = ({
     /* @__PURE__ */ jsx(
       "select",
       {
-        value: designTheme,
-        onChange: (e) => setDesignTheme(e.target.value),
+        value: theme,
+        onChange: (e) => setTheme(e.target.value),
         className: `
           px-3 py-2 pr-8 text-sm font-medium
           bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]
@@ -1874,13 +1922,9 @@ var ThemeSelector = ({
           cursor-pointer appearance-none
           focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]
         `,
-        children: availableThemes.map((theme) => {
-          const { label, icon } = THEME_LABELS[theme];
-          return /* @__PURE__ */ jsxs("option", { value: theme, children: [
-            icon,
-            " ",
-            label
-          ] }, theme);
+        children: availableThemes.map((t) => {
+          const { label } = getThemeLabel(t.name);
+          return /* @__PURE__ */ jsx("option", { value: t.name, children: label }, t.name);
         })
       }
     ),
@@ -10163,8 +10207,9 @@ function useCamera() {
 
 // components/organisms/game/utils/isometric.ts
 var TILE_WIDTH = 256;
-var TILE_HEIGHT = 384;
-var FLOOR_HEIGHT = 149;
+var TILE_HEIGHT = 512;
+var FLOOR_HEIGHT = 128;
+var DIAMOND_TOP_Y = 374;
 var FEATURE_COLORS = {
   goldMine: "#fbbf24",
   resonanceCrystal: "#a78bfa",
@@ -10230,6 +10275,8 @@ function IsometricCanvas({
   effectSpriteUrls = [],
   onDrawEffects,
   hasActiveEffects: hasActiveEffects2 = false,
+  // Tuning
+  diamondTopY: diamondTopYProp,
   // Remote asset loading
   assetBaseUrl,
   assetManifest
@@ -10276,6 +10323,8 @@ function IsometricCanvas({
   const scaledTileWidth = TILE_WIDTH * scale;
   const scaledTileHeight = TILE_HEIGHT * scale;
   const scaledFloorHeight = FLOOR_HEIGHT * scale;
+  const effectiveDiamondTopY = diamondTopYProp ?? DIAMOND_TOP_Y;
+  const scaledDiamondTopY = effectiveDiamondTopY * scale;
   const baseOffsetX = useMemo(() => {
     return (gridHeight - 1) * (scaledTileWidth / 2);
   }, [gridHeight, scaledTileWidth]);
@@ -10295,10 +10344,10 @@ function IsometricCanvas({
     for (const tile of sortedTiles) {
       if (tile.terrainSprite) urls.push(tile.terrainSprite);
       else if (getTerrainSprite) {
-        const url = getTerrainSprite(tile.terrain);
+        const url = getTerrainSprite(tile.terrain ?? "");
         if (url) urls.push(url);
       } else {
-        const url = resolveManifestUrl(assetManifest?.terrains?.[tile.terrain]);
+        const url = resolveManifestUrl(assetManifest?.terrains?.[tile.terrain ?? ""]);
         if (url) urls.push(url);
       }
     }
@@ -10347,7 +10396,7 @@ function IsometricCanvas({
     lerpToTarget
   } = useCamera();
   const resolveTerrainSpriteUrl = useCallback((tile) => {
-    return tile.terrainSprite || getTerrainSprite?.(tile.terrain) || resolveManifestUrl(assetManifest?.terrains?.[tile.terrain]);
+    return tile.terrainSprite || getTerrainSprite?.(tile.terrain ?? "") || resolveManifestUrl(assetManifest?.terrains?.[tile.terrain ?? ""]);
   }, [getTerrainSprite, assetManifest, resolveManifestUrl]);
   const resolveFeatureSpriteUrl = useCallback((featureType) => {
     return getFeatureSprite?.(featureType) || resolveManifestUrl(assetManifest?.features?.[featureType]);
@@ -10392,6 +10441,7 @@ function IsometricCanvas({
       mCtx.fill();
     }
     for (const unit of units) {
+      if (!unit.position) continue;
       const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX);
       const mx = (pos.x + scaledTileWidth / 2 - minX) * scaleM + offsetMx;
       const my = (pos.y + scaledTileHeight / 2 - minY) * scaleM + offsetMy;
@@ -10458,7 +10508,7 @@ function IsometricCanvas({
         ctx.drawImage(img, pos.x, pos.y, scaledTileWidth, scaledTileHeight);
       } else {
         const centerX = pos.x + scaledTileWidth / 2;
-        const topY = pos.y + (scaledTileHeight - scaledFloorHeight);
+        const topY = pos.y + scaledDiamondTopY;
         ctx.fillStyle = tile.terrain === "water" ? "#3b82f6" : tile.terrain === "mountain" ? "#78716c" : tile.terrain === "stone" ? "#9ca3af" : "#4ade80";
         ctx.beginPath();
         ctx.moveTo(centerX, topY);
@@ -10473,7 +10523,7 @@ function IsometricCanvas({
       }
       if (hoveredTile && hoveredTile.x === tile.x && hoveredTile.y === tile.y) {
         const centerX = pos.x + scaledTileWidth / 2;
-        const topY = pos.y + (scaledTileHeight - scaledFloorHeight);
+        const topY = pos.y + scaledDiamondTopY;
         ctx.fillStyle = "rgba(255, 255, 255, 0.15)";
         ctx.beginPath();
         ctx.moveTo(centerX, topY);
@@ -10486,7 +10536,7 @@ function IsometricCanvas({
       const tileKey = `${tile.x},${tile.y}`;
       if (validMoveSet.has(tileKey)) {
         const centerX = pos.x + scaledTileWidth / 2;
-        const topY = pos.y + (scaledTileHeight - scaledFloorHeight);
+        const topY = pos.y + scaledDiamondTopY;
         const pulse = 0.15 + 0.1 * Math.sin(animTime * 4e-3);
         ctx.fillStyle = `rgba(74, 222, 128, ${pulse})`;
         ctx.beginPath();
@@ -10499,7 +10549,7 @@ function IsometricCanvas({
       }
       if (attackTargetSet.has(tileKey)) {
         const centerX = pos.x + scaledTileWidth / 2;
-        const topY = pos.y + (scaledTileHeight - scaledFloorHeight);
+        const topY = pos.y + scaledDiamondTopY;
         const pulse = 0.2 + 0.15 * Math.sin(animTime * 5e-3);
         ctx.fillStyle = `rgba(239, 68, 68, ${pulse})`;
         ctx.beginPath();
@@ -10512,7 +10562,7 @@ function IsometricCanvas({
       }
       if (debug2) {
         const centerX = pos.x + scaledTileWidth / 2;
-        const centerY = pos.y + scaledFloorHeight / 2 + (scaledTileHeight - scaledFloorHeight);
+        const centerY = pos.y + scaledFloorHeight / 2 + scaledDiamondTopY;
         ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
         ctx.font = `${12 * scale * 2}px monospace`;
         ctx.textAlign = "center";
@@ -10532,7 +10582,7 @@ function IsometricCanvas({
       const spriteUrl = feature.sprite || resolveFeatureSpriteUrl(feature.type);
       const img = spriteUrl ? getImage(spriteUrl) : null;
       const centerX = pos.x + scaledTileWidth / 2;
-      const featureGroundY = pos.y + (scaledTileHeight - scaledFloorHeight) + scaledFloorHeight * 0.5;
+      const featureGroundY = pos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
       const isCastle = feature.type === "castle";
       const featureDrawH = isCastle ? scaledFloorHeight * 3.5 : scaledFloorHeight * 1.6;
       const maxFeatureW = isCastle ? scaledTileWidth * 1.8 : scaledTileWidth * 0.7;
@@ -10558,7 +10608,8 @@ function IsometricCanvas({
         ctx.stroke();
       }
     }
-    const sortedUnits = [...units].sort((a, b) => {
+    const unitsWithPosition = units.filter((u) => !!u.position);
+    const sortedUnits = [...unitsWithPosition].sort((a, b) => {
       const depthA = a.position.x + a.position.y;
       const depthB = b.position.x + b.position.y;
       return depthA !== depthB ? depthA - depthB : a.position.y - b.position.y;
@@ -10570,7 +10621,7 @@ function IsometricCanvas({
       }
       const isSelected = unit.id === selectedUnitId;
       const centerX = pos.x + scaledTileWidth / 2;
-      const groundY = pos.y + (scaledTileHeight - scaledFloorHeight) + scaledFloorHeight * 0.5;
+      const groundY = pos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
       const breatheOffset = 0.8 * scale * (1 + Math.sin(animTime * 2e-3 + (unit.position.x * 3.7 + unit.position.y * 5.3)));
       const unitSpriteUrl = resolveUnitSpriteUrl(unit);
       const img = unitSpriteUrl ? getImage(unitSpriteUrl) : null;
@@ -10586,7 +10637,7 @@ function IsometricCanvas({
       if (unit.previousPosition && (unit.previousPosition.x !== unit.position.x || unit.previousPosition.y !== unit.position.y)) {
         const ghostPos = isoToScreen(unit.previousPosition.x, unit.previousPosition.y, scale, baseOffsetX);
         const ghostCenterX = ghostPos.x + scaledTileWidth / 2;
-        const ghostGroundY = ghostPos.y + (scaledTileHeight - scaledFloorHeight) + scaledFloorHeight * 0.5;
+        const ghostGroundY = ghostPos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
         ctx.save();
         ctx.globalAlpha = 0.25;
         if (img) {
@@ -10726,6 +10777,7 @@ function IsometricCanvas({
     scaledTileWidth,
     scaledTileHeight,
     scaledFloorHeight,
+    scaledDiamondTopY,
     validMoveSet,
     attackTargetSet,
     hoveredTile,
@@ -10739,15 +10791,15 @@ function IsometricCanvas({
   useEffect(() => {
     if (!selectedUnitId) return;
     const unit = units.find((u) => u.id === selectedUnitId);
-    if (!unit) return;
+    if (!unit?.position) return;
     const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX);
     const centerX = pos.x + scaledTileWidth / 2;
-    const centerY = pos.y + (scaledTileHeight - scaledFloorHeight) + scaledFloorHeight / 2;
+    const centerY = pos.y + scaledDiamondTopY + scaledFloorHeight / 2;
     targetCameraRef.current = {
       x: centerX - viewportSize.width / 2,
       y: centerY - viewportSize.height / 2
     };
-  }, [selectedUnitId, units, scale, baseOffsetX, scaledTileWidth, scaledTileHeight, scaledFloorHeight, viewportSize, targetCameraRef]);
+  }, [selectedUnitId, units, scale, baseOffsetX, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, viewportSize, targetCameraRef]);
   useEffect(() => {
     const hasAnimations = units.length > 0 || validMoves.length > 0 || attackTargets.length > 0 || selectedUnitId != null || targetCameraRef.current != null || hasActiveEffects2;
     draw(animTimeRef.current);
@@ -10774,14 +10826,14 @@ function IsometricCanvas({
     if (!onTileHover && !tileHoverEvent || !canvasRef.current) return;
     const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
     const adjustedX = world.x - scaledTileWidth / 2;
-    const adjustedY = world.y - (scaledTileHeight - scaledFloorHeight) - scaledFloorHeight / 2;
+    const adjustedY = world.y - scaledDiamondTopY - scaledFloorHeight / 2;
     const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX);
     const tileExists = tilesProp.some((t) => t.x === isoPos.x && t.y === isoPos.y);
     if (tileExists) {
       if (tileHoverEvent) eventBus.emit(`UI:${tileHoverEvent}`, { x: isoPos.x, y: isoPos.y });
       onTileHover?.(isoPos.x, isoPos.y);
     }
-  }, [enableCamera, handleMouseMove, draw, onTileHover, screenToWorld, viewportSize, scaledTileWidth, scaledTileHeight, scaledFloorHeight, scale, baseOffsetX, tilesProp, tileHoverEvent, eventBus]);
+  }, [enableCamera, handleMouseMove, draw, onTileHover, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, scale, baseOffsetX, tilesProp, tileHoverEvent, eventBus]);
   const handleMouseLeaveWithCamera = useCallback(() => {
     handleMouseLeave();
     if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
@@ -10797,9 +10849,9 @@ function IsometricCanvas({
     if (!canvasRef.current) return;
     const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
     const adjustedX = world.x - scaledTileWidth / 2;
-    const adjustedY = world.y - (scaledTileHeight - scaledFloorHeight) - scaledFloorHeight / 2;
+    const adjustedY = world.y - scaledDiamondTopY - scaledFloorHeight / 2;
     const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX);
-    const clickedUnit = units.find((u) => u.position.x === isoPos.x && u.position.y === isoPos.y);
+    const clickedUnit = units.find((u) => u.position?.x === isoPos.x && u.position?.y === isoPos.y);
     if (clickedUnit && (onUnitClick || unitClickEvent)) {
       if (unitClickEvent) eventBus.emit(`UI:${unitClickEvent}`, { unitId: clickedUnit.id });
       onUnitClick?.(clickedUnit.id);
@@ -10810,7 +10862,7 @@ function IsometricCanvas({
         onTileClick?.(isoPos.x, isoPos.y);
       }
     }
-  }, [dragDistance, screenToWorld, viewportSize, scaledTileWidth, scaledTileHeight, scaledFloorHeight, scale, baseOffsetX, units, tilesProp, onUnitClick, onTileClick, unitClickEvent, tileClickEvent, eventBus]);
+  }, [dragDistance, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, scale, baseOffsetX, units, tilesProp, onUnitClick, onTileClick, unitClickEvent, tileClickEvent, eventBus]);
   if (error) {
     return /* @__PURE__ */ jsx(ErrorState, { title: "Canvas Error", message: error.message, className });
   }
@@ -12229,7 +12281,7 @@ function useSpriteAnimations(getSheetUrls, getFrameDims, options = {}) {
       const sheetUrls = getSheetUrls(unit);
       if (!sheetUrls) continue;
       const prev = prevPos.get(unit.id);
-      if (prev) {
+      if (prev && unit.position) {
         const dx = unit.position.x - prev.x;
         const dy = unit.position.y - prev.y;
         if (dx !== 0 || dy !== 0) {
@@ -12248,7 +12300,9 @@ function useSpriteAnimations(getSheetUrls, getFrameDims, options = {}) {
           }
         }
       }
-      prevPos.set(unit.id, { ...unit.position });
+      if (unit.position) {
+        prevPos.set(unit.id, { x: unit.position.x, y: unit.position.y });
+      }
       state = tickAnimationState(state, scaledDelta);
       states.set(unit.id, state);
     }
@@ -12287,6 +12341,283 @@ function useSpriteAnimations(getSheetUrls, getFrameDims, options = {}) {
   }, [getSheetUrls, getFrameDims]);
   return { syncUnits, setUnitAnimation, resolveUnitFrame };
 }
+
+// components/organisms/game/managers/PhysicsManager.ts
+var PhysicsManager = class {
+  constructor(config = {}) {
+    __publicField(this, "entities", /* @__PURE__ */ new Map());
+    __publicField(this, "config");
+    this.config = {
+      gravity: 0.5,
+      friction: 0.8,
+      airResistance: 0.99,
+      maxVelocityY: 20,
+      groundY: 500,
+      // Default ground position in pixels
+      ...config
+    };
+  }
+  /**
+   * Register an entity for physics simulation
+   */
+  registerEntity(entityId, initialState = {}) {
+    const state = {
+      id: entityId,
+      x: initialState.x ?? 0,
+      y: initialState.y ?? 0,
+      vx: initialState.vx ?? 0,
+      vy: initialState.vy ?? 0,
+      isGrounded: initialState.isGrounded ?? false,
+      gravity: initialState.gravity ?? this.config.gravity,
+      friction: initialState.friction ?? this.config.friction,
+      airResistance: initialState.airResistance ?? this.config.airResistance,
+      maxVelocityY: initialState.maxVelocityY ?? this.config.maxVelocityY,
+      mass: initialState.mass ?? 1,
+      restitution: initialState.restitution ?? 0.8,
+      state: initialState.state ?? "Active"
+    };
+    this.entities.set(entityId, state);
+    return state;
+  }
+  /**
+   * Unregister an entity from physics simulation
+   */
+  unregisterEntity(entityId) {
+    this.entities.delete(entityId);
+  }
+  /**
+   * Get physics state for an entity
+   */
+  getState(entityId) {
+    return this.entities.get(entityId);
+  }
+  /**
+   * Get all registered entities
+   */
+  getAllEntities() {
+    return Array.from(this.entities.values());
+  }
+  /**
+   * Apply a force to an entity (impulse)
+   */
+  applyForce(entityId, fx, fy) {
+    const state = this.entities.get(entityId);
+    if (!state || state.state !== "Active") return;
+    state.vx += fx;
+    state.vy += fy;
+  }
+  /**
+   * Set velocity directly
+   */
+  setVelocity(entityId, vx, vy) {
+    const state = this.entities.get(entityId);
+    if (!state) return;
+    state.vx = vx;
+    state.vy = vy;
+  }
+  /**
+   * Set position directly
+   */
+  setPosition(entityId, x, y) {
+    const state = this.entities.get(entityId);
+    if (!state) return;
+    state.x = x;
+    state.y = y;
+  }
+  /**
+   * Freeze/unfreeze an entity
+   */
+  setFrozen(entityId, frozen) {
+    const state = this.entities.get(entityId);
+    if (!state) return;
+    state.state = frozen ? "Frozen" : "Active";
+  }
+  /**
+   * Main tick function - call this every frame
+   * Implements the logic from std-physics2d ticks
+   */
+  tick(deltaTime = 16) {
+    for (const state of this.entities.values()) {
+      if (state.state !== "Active") continue;
+      this.applyGravity(state, deltaTime);
+      this.applyVelocity(state, deltaTime);
+      this.checkGroundCollision(state);
+    }
+  }
+  /**
+   * ApplyGravity tick implementation
+   */
+  applyGravity(state, deltaTime) {
+    if (state.isGrounded) return;
+    const gravityForce = state.gravity * (deltaTime / 16);
+    state.vy = Math.min(state.maxVelocityY, state.vy + gravityForce);
+  }
+  /**
+   * ApplyVelocity tick implementation
+   */
+  applyVelocity(state, deltaTime) {
+    const dt = deltaTime / 16;
+    state.vx *= Math.pow(state.airResistance, dt);
+    state.x += state.vx * dt;
+    state.y += state.vy * dt;
+  }
+  /**
+   * Check and handle ground collision
+   */
+  checkGroundCollision(state) {
+    const groundY = this.config.groundY;
+    if (state.y >= groundY) {
+      state.y = groundY;
+      state.isGrounded = true;
+      state.vy = 0;
+      state.vx *= state.friction;
+      if (Math.abs(state.vx) < 0.01) {
+        state.vx = 0;
+      }
+    } else {
+      state.isGrounded = false;
+    }
+  }
+  /**
+   * Check AABB collision between two entities
+   */
+  checkCollision(entityIdA, entityIdB, boundsA, boundsB) {
+    const stateA = this.entities.get(entityIdA);
+    const stateB = this.entities.get(entityIdB);
+    if (!stateA || !stateB) return false;
+    const absBoundsA = {
+      x: stateA.x + boundsA.x,
+      y: stateA.y + boundsA.y,
+      width: boundsA.width,
+      height: boundsA.height
+    };
+    const absBoundsB = {
+      x: stateB.x + boundsB.x,
+      y: stateB.y + boundsB.y,
+      width: boundsB.width,
+      height: boundsB.height
+    };
+    return absBoundsA.x < absBoundsB.x + absBoundsB.width && absBoundsA.x + absBoundsA.width > absBoundsB.x && absBoundsA.y < absBoundsB.y + absBoundsB.height && absBoundsA.y + absBoundsA.height > absBoundsB.y;
+  }
+  /**
+   * Resolve collision with bounce
+   */
+  resolveCollision(entityIdA, entityIdB) {
+    const stateA = this.entities.get(entityIdA);
+    const stateB = this.entities.get(entityIdB);
+    if (!stateA || !stateB) return;
+    const restitution = Math.min(stateA.restitution ?? 0.8, stateB.restitution ?? 0.8);
+    const tempVx = stateA.vx;
+    const tempVy = stateA.vy;
+    stateA.vx = stateB.vx * restitution;
+    stateA.vy = stateB.vy * restitution;
+    stateB.vx = tempVx * restitution;
+    stateB.vy = tempVy * restitution;
+    const dx = stateB.x - stateA.x;
+    const dy = stateB.y - stateA.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    if (distance > 0) {
+      const overlap = 1;
+      const nx = dx / distance;
+      const ny = dy / distance;
+      stateA.x -= nx * overlap * 0.5;
+      stateA.y -= ny * overlap * 0.5;
+      stateB.x += nx * overlap * 0.5;
+      stateB.y += ny * overlap * 0.5;
+    }
+  }
+  /**
+   * Reset all physics state
+   */
+  reset() {
+    this.entities.clear();
+  }
+};
+
+// components/organisms/game/hooks/usePhysics2D.ts
+function usePhysics2D(options = {}) {
+  const physicsManagerRef = useRef(null);
+  const collisionCallbacksRef = useRef(/* @__PURE__ */ new Set());
+  if (!physicsManagerRef.current) {
+    physicsManagerRef.current = new PhysicsManager({
+      gravity: options.gravity,
+      friction: options.friction,
+      airResistance: options.airResistance,
+      maxVelocityY: options.maxVelocityY,
+      groundY: options.groundY
+    });
+  }
+  const manager = physicsManagerRef.current;
+  useEffect(() => {
+    if (options.onCollision) {
+      collisionCallbacksRef.current.add(options.onCollision);
+    }
+    return () => {
+      if (options.onCollision) {
+        collisionCallbacksRef.current.delete(options.onCollision);
+      }
+    };
+  }, [options.onCollision]);
+  const registerUnit = useCallback((unitId, initialState = {}) => {
+    manager.registerEntity(unitId, initialState);
+  }, [manager]);
+  const unregisterUnit = useCallback((unitId) => {
+    manager.unregisterEntity(unitId);
+  }, [manager]);
+  const getPosition = useCallback((unitId) => {
+    const state = manager.getState(unitId);
+    if (!state) return null;
+    return { x: state.x, y: state.y };
+  }, [manager]);
+  const getState = useCallback((unitId) => {
+    return manager.getState(unitId);
+  }, [manager]);
+  const applyForce = useCallback((unitId, fx, fy) => {
+    manager.applyForce(unitId, fx, fy);
+  }, [manager]);
+  const setVelocity = useCallback((unitId, vx, vy) => {
+    manager.setVelocity(unitId, vx, vy);
+  }, [manager]);
+  const setPosition = useCallback((unitId, x, y) => {
+    manager.setPosition(unitId, x, y);
+  }, [manager]);
+  const tick = useCallback((deltaTime = 16) => {
+    manager.tick(deltaTime);
+  }, [manager]);
+  const checkCollision = useCallback((unitIdA, unitIdB, boundsA, boundsB) => {
+    return manager.checkCollision(unitIdA, unitIdB, boundsA, boundsB);
+  }, [manager]);
+  const resolveCollision = useCallback((unitIdA, unitIdB) => {
+    manager.resolveCollision(unitIdA, unitIdB);
+    collisionCallbacksRef.current.forEach((callback) => {
+      callback(unitIdA, unitIdB);
+    });
+  }, [manager]);
+  const setFrozen = useCallback((unitId, frozen) => {
+    manager.setFrozen(unitId, frozen);
+  }, [manager]);
+  const getAllUnits = useCallback(() => {
+    return manager.getAllEntities();
+  }, [manager]);
+  const reset = useCallback(() => {
+    manager.reset();
+  }, [manager]);
+  return {
+    registerUnit,
+    unregisterUnit,
+    getPosition,
+    getState,
+    applyForce,
+    setVelocity,
+    setPosition,
+    tick,
+    checkCollision,
+    resolveCollision,
+    setFrozen,
+    getAllUnits,
+    reset
+  };
+}
 var sizeMap4 = {
   sm: "text-xs px-2 py-1",
   md: "text-sm px-3 py-1.5",
@@ -12981,172 +13312,1032 @@ function DialogueBox({
     }
   );
 }
-function VStackPattern({
-  gap = "md",
-  align = "stretch",
-  justify = "start",
-  className,
-  style,
-  children
-}) {
-  return /* @__PURE__ */ jsx(VStack, { gap, align, justify, className, style, children });
-}
-VStackPattern.displayName = "VStackPattern";
-function HStackPattern({
-  gap = "md",
-  align = "center",
-  justify = "start",
-  wrap = false,
-  className,
-  style,
-  children
-}) {
-  return /* @__PURE__ */ jsx(HStack, { gap, align, justify, wrap, className, style, children });
-}
-HStackPattern.displayName = "HStackPattern";
-function BoxPattern({
-  p: p2,
-  m,
-  bg = "transparent",
-  border = false,
-  radius = "none",
-  shadow = "none",
-  className,
-  style,
-  children
-}) {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      padding: p2,
-      margin: m,
-      bg,
-      border,
-      rounded: radius,
-      shadow,
-      className,
-      style,
-      children
-    }
-  );
-}
-BoxPattern.displayName = "BoxPattern";
-function GridPattern({
-  cols = 1,
-  gap = "md",
-  rowGap,
-  colGap,
-  className,
-  style,
-  children
-}) {
-  return /* @__PURE__ */ jsx(Grid2, { cols, gap, rowGap, colGap, className, style, children });
-}
-GridPattern.displayName = "GridPattern";
-function CenterPattern({
-  minHeight,
-  className,
-  style,
-  children
-}) {
-  const mergedStyle = minHeight ? { minHeight, ...style } : style;
-  return /* @__PURE__ */ jsx(Center, { className, style: mergedStyle, children });
-}
-CenterPattern.displayName = "CenterPattern";
-function SpacerPattern({ size = "flex" }) {
-  if (size === "flex") {
-    return /* @__PURE__ */ jsx(Spacer, {});
-  }
-  const sizeMap5 = {
-    xs: "0.25rem",
-    sm: "0.5rem",
-    md: "1rem",
-    lg: "1.5rem",
-    xl: "2rem"
-  };
-  return /* @__PURE__ */ jsx("div", { style: { width: sizeMap5[size], height: sizeMap5[size], flexShrink: 0 } });
-}
-SpacerPattern.displayName = "SpacerPattern";
-function DividerPattern({
-  orientation = "horizontal",
-  variant = "solid",
-  spacing = "md"
-}) {
-  const spacingMap = {
-    xs: "my-1",
-    sm: "my-2",
-    md: "my-4",
-    lg: "my-6"
-  };
-  const verticalSpacingMap = {
-    xs: "mx-1",
-    sm: "mx-2",
-    md: "mx-4",
-    lg: "mx-6"
-  };
-  return /* @__PURE__ */ jsx(
-    Divider,
-    {
-      orientation,
-      variant,
-      className: orientation === "horizontal" ? spacingMap[spacing] : verticalSpacingMap[spacing]
-    }
-  );
-}
-DividerPattern.displayName = "DividerPattern";
-function ButtonPattern({
-  label,
-  variant = "primary",
-  size = "md",
-  disabled = false,
-  onClick,
-  icon,
-  iconPosition = "left",
+function BattleBoard({
+  entity,
+  scale = 0.45,
+  unitScale = 1,
+  header,
+  sidebar,
+  actions,
+  overlay,
+  gameOverOverlay,
+  onAttack,
+  onGameEnd,
+  onUnitMove,
+  calculateDamage,
+  onDrawEffects,
+  hasActiveEffects: hasActiveEffects2 = false,
+  effectSpriteUrls = [],
+  resolveUnitFrame,
+  tileClickEvent,
+  unitClickEvent,
+  endTurnEvent,
+  cancelEvent,
+  gameEndEvent,
+  playAgainEvent,
+  attackEvent,
   className
 }) {
-  const { emit } = useEventBus();
-  const handleClick = () => {
-    if (onClick && !disabled) {
-      emit(`UI:${onClick}`, {});
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      variant,
-      size,
-      disabled,
-      onClick: handleClick,
-      className,
-      children: [
-        icon && iconPosition === "left" && /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm" }),
-        label,
-        icon && iconPosition === "right" && /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm" })
-      ]
-    }
+  const initialUnits = entity.initialUnits;
+  const tiles = entity.tiles;
+  const features = entity.features ?? [];
+  const boardWidth = entity.boardWidth ?? 8;
+  const boardHeight = entity.boardHeight ?? 6;
+  const assetManifest = entity.assetManifest;
+  const backgroundImage = entity.backgroundImage;
+  const eventBus = useEventBus();
+  const [units, setUnits] = useState(initialUnits);
+  const [selectedUnitId, setSelectedUnitId] = useState(null);
+  const [hoveredTile, setHoveredTile] = useState(null);
+  const [currentPhase, setCurrentPhase] = useState("observation");
+  const [currentTurn, setCurrentTurn] = useState(1);
+  const [gameResult, setGameResult] = useState(null);
+  const [isShaking, setIsShaking] = useState(false);
+  const selectedUnit = useMemo(
+    () => units.find((u) => u.id === selectedUnitId) ?? null,
+    [units, selectedUnitId]
   );
-}
-ButtonPattern.displayName = "ButtonPattern";
-function IconButtonPattern({
-  icon,
-  variant = "ghost",
-  size = "md",
-  onClick,
-  ariaLabel,
-  className
-}) {
-  const { emit } = useEventBus();
-  const handleClick = () => {
-    if (onClick) {
-      emit(`UI:${onClick}`, {});
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      variant,
-      size,
-      onClick: handleClick,
+  const hoveredUnit = useMemo(() => {
+    if (!hoveredTile) return null;
+    return units.find(
+      (u) => u.position.x === hoveredTile.x && u.position.y === hoveredTile.y && u.health > 0
+    ) ?? null;
+  }, [hoveredTile, units]);
+  const playerUnits = useMemo(() => units.filter((u) => u.team === "player" && u.health > 0), [units]);
+  const enemyUnits = useMemo(() => units.filter((u) => u.team === "enemy" && u.health > 0), [units]);
+  const validMoves = useMemo(() => {
+    if (!selectedUnit || currentPhase !== "movement") return [];
+    const moves = [];
+    const range = selectedUnit.movement;
+    for (let dy = -range; dy <= range; dy++) {
+      for (let dx = -range; dx <= range; dx++) {
+        const nx = selectedUnit.position.x + dx;
+        const ny = selectedUnit.position.y + dy;
+        const dist = Math.abs(dx) + Math.abs(dy);
+        if (dist > 0 && dist <= range && nx >= 0 && nx < boardWidth && ny >= 0 && ny < boardHeight && !units.some((u) => u.position.x === nx && u.position.y === ny && u.health > 0)) {
+          moves.push({ x: nx, y: ny });
+        }
+      }
+    }
+    return moves;
+  }, [selectedUnit, currentPhase, units, boardWidth, boardHeight]);
+  const attackTargets = useMemo(() => {
+    if (!selectedUnit || currentPhase !== "action") return [];
+    return units.filter((u) => u.team !== selectedUnit.team && u.health > 0).filter((u) => {
+      const dx = Math.abs(u.position.x - selectedUnit.position.x);
+      const dy = Math.abs(u.position.y - selectedUnit.position.y);
+      return dx <= 1 && dy <= 1 && dx + dy > 0;
+    }).map((u) => u.position);
+  }, [selectedUnit, currentPhase, units]);
+  const MOVE_SPEED_MS_PER_TILE = 300;
+  const movementAnimRef = useRef(null);
+  const [movingPositions, setMovingPositions] = useState(/* @__PURE__ */ new Map());
+  const startMoveAnimation = useCallback((unitId, from, to, onComplete) => {
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    const dist = Math.max(Math.abs(dx), Math.abs(dy));
+    const duration = dist * MOVE_SPEED_MS_PER_TILE;
+    movementAnimRef.current = { unitId, from, to, elapsed: 0, duration, onComplete };
+  }, []);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const anim2 = movementAnimRef.current;
+      if (!anim2) return;
+      anim2.elapsed += 16;
+      const t = Math.min(anim2.elapsed / anim2.duration, 1);
+      const eased = 1 - (1 - t) * (1 - t);
+      const cx = anim2.from.x + (anim2.to.x - anim2.from.x) * eased;
+      const cy = anim2.from.y + (anim2.to.y - anim2.from.y) * eased;
+      if (t >= 1) {
+        movementAnimRef.current = null;
+        setMovingPositions((prev) => {
+          const next = new Map(prev);
+          next.delete(anim2.unitId);
+          return next;
+        });
+        anim2.onComplete();
+      } else {
+        setMovingPositions((prev) => {
+          const next = new Map(prev);
+          next.set(anim2.unitId, { x: cx, y: cy });
+          return next;
+        });
+      }
+    }, 16);
+    return () => clearInterval(interval);
+  }, []);
+  const isoUnits = useMemo(() => {
+    return units.filter((u) => u.health > 0).map((unit) => {
+      const pos = movingPositions.get(unit.id) ?? unit.position;
+      return {
+        id: unit.id,
+        position: pos,
+        name: unit.name,
+        team: unit.team,
+        health: unit.health,
+        maxHealth: unit.maxHealth,
+        unitType: unit.unitType,
+        heroId: unit.heroId,
+        sprite: unit.sprite,
+        traits: unit.traits?.map((t) => ({
+          name: t.name,
+          currentState: t.currentState,
+          states: t.states,
+          cooldown: t.cooldown ?? 0
+        }))
+      };
+    });
+  }, [units, movingPositions]);
+  const maxY = Math.max(...tiles.map((t) => t.y), 0);
+  const baseOffsetX = (maxY + 1) * (TILE_WIDTH * scale / 2);
+  const tileToScreen = useCallback(
+    (tx, ty) => isoToScreen(tx, ty, scale, baseOffsetX),
+    [scale, baseOffsetX]
+  );
+  const checkGameEnd = useCallback(() => {
+    const pa = units.filter((u) => u.team === "player" && u.health > 0);
+    const ea = units.filter((u) => u.team === "enemy" && u.health > 0);
+    if (pa.length === 0) {
+      setGameResult("defeat");
+      setCurrentPhase("game_over");
+      onGameEnd?.("defeat");
+      if (gameEndEvent) {
+        eventBus.emit(`UI:${gameEndEvent}`, { result: "defeat" });
+      }
+    } else if (ea.length === 0) {
+      setGameResult("victory");
+      setCurrentPhase("game_over");
+      onGameEnd?.("victory");
+      if (gameEndEvent) {
+        eventBus.emit(`UI:${gameEndEvent}`, { result: "victory" });
+      }
+    }
+  }, [units, onGameEnd, gameEndEvent, eventBus]);
+  const handleUnitClick = useCallback((unitId) => {
+    const unit = units.find((u) => u.id === unitId);
+    if (!unit) return;
+    if (unitClickEvent) {
+      eventBus.emit(`UI:${unitClickEvent}`, { unitId });
+    }
+    if (currentPhase === "observation" || currentPhase === "selection") {
+      if (unit.team === "player") {
+        setSelectedUnitId(unitId);
+        setCurrentPhase("movement");
+      }
+    } else if (currentPhase === "action" && selectedUnit) {
+      if (unit.team === "enemy" && attackTargets.some((t) => t.x === unit.position.x && t.y === unit.position.y)) {
+        const damage = calculateDamage ? calculateDamage(selectedUnit, unit) : Math.max(1, selectedUnit.attack - unit.defense);
+        const newHealth = Math.max(0, unit.health - damage);
+        setUnits((prev) => prev.map((u) => u.id === unit.id ? { ...u, health: newHealth } : u));
+        setIsShaking(true);
+        setTimeout(() => setIsShaking(false), 300);
+        onAttack?.(selectedUnit, unit, damage);
+        if (attackEvent) {
+          eventBus.emit(`UI:${attackEvent}`, {
+            attackerId: selectedUnit.id,
+            targetId: unit.id,
+            damage
+          });
+        }
+        setSelectedUnitId(null);
+        setCurrentPhase("observation");
+        setCurrentTurn((t) => t + 1);
+        setTimeout(checkGameEnd, 100);
+      }
+    }
+  }, [currentPhase, selectedUnit, attackTargets, units, checkGameEnd, onAttack, calculateDamage, unitClickEvent, attackEvent, eventBus]);
+  const handleTileClick = useCallback((x, y) => {
+    if (tileClickEvent) {
+      eventBus.emit(`UI:${tileClickEvent}`, { x, y });
+    }
+    if (currentPhase === "movement" && selectedUnit) {
+      if (movementAnimRef.current) return;
+      if (validMoves.some((m) => m.x === x && m.y === y)) {
+        const from = { ...selectedUnit.position };
+        const to = { x, y };
+        startMoveAnimation(selectedUnit.id, from, to, () => {
+          setUnits(
+            (prev) => prev.map((u) => u.id === selectedUnitId ? { ...u, position: { x, y } } : u)
+          );
+          onUnitMove?.(selectedUnit, to);
+          setCurrentPhase("action");
+        });
+      }
+    }
+  }, [currentPhase, selectedUnit, selectedUnitId, validMoves, startMoveAnimation, onUnitMove, tileClickEvent, eventBus]);
+  const handleEndTurn = useCallback(() => {
+    setSelectedUnitId(null);
+    setCurrentPhase("observation");
+    setCurrentTurn((t) => t + 1);
+    if (endTurnEvent) {
+      eventBus.emit(`UI:${endTurnEvent}`, {});
+    }
+  }, [endTurnEvent, eventBus]);
+  const handleCancel = useCallback(() => {
+    setSelectedUnitId(null);
+    setCurrentPhase("observation");
+    if (cancelEvent) {
+      eventBus.emit(`UI:${cancelEvent}`, {});
+    }
+  }, [cancelEvent, eventBus]);
+  const handleReset = useCallback(() => {
+    setUnits(initialUnits);
+    setSelectedUnitId(null);
+    setCurrentPhase("observation");
+    setCurrentTurn(1);
+    setGameResult(null);
+    if (playAgainEvent) {
+      eventBus.emit(`UI:${playAgainEvent}`, {});
+    }
+  }, [initialUnits, playAgainEvent, eventBus]);
+  const ctx = useMemo(
+    () => ({
+      phase: currentPhase,
+      turn: currentTurn,
+      selectedUnit,
+      hoveredUnit,
+      playerUnits,
+      enemyUnits,
+      gameResult,
+      onEndTurn: handleEndTurn,
+      onCancel: handleCancel,
+      onReset: handleReset,
+      attackTargets,
+      tileToScreen
+    }),
+    [
+      currentPhase,
+      currentTurn,
+      selectedUnit,
+      hoveredUnit,
+      playerUnits,
+      enemyUnits,
+      gameResult,
+      handleEndTurn,
+      handleCancel,
+      handleReset,
+      attackTargets,
+      tileToScreen
+    ]
+  );
+  const shakeStyle = isShaking ? { animation: "battle-shake 0.3s ease-in-out" } : {};
+  return /* @__PURE__ */ jsxs("div", { className: cn("battle-board relative flex flex-col min-h-[600px] bg-[var(--color-background)]", className), children: [
+    /* @__PURE__ */ jsx("style", { children: `
+                @keyframes battle-shake {
+                    0%, 100% { transform: translate(0, 0); }
+                    10% { transform: translate(-3px, -2px); }
+                    20% { transform: translate(3px, 1px); }
+                    30% { transform: translate(-2px, 3px); }
+                    40% { transform: translate(2px, -1px); }
+                    50% { transform: translate(-3px, 2px); }
+                    60% { transform: translate(3px, -2px); }
+                    70% { transform: translate(-1px, 3px); }
+                    80% { transform: translate(2px, -3px); }
+                    90% { transform: translate(-2px, 1px); }
+                }
+            ` }),
+    header && /* @__PURE__ */ jsx("div", { className: "p-4", children: header(ctx) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 gap-4 p-4 pt-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", style: shakeStyle, children: [
+        /* @__PURE__ */ jsx(
+          IsometricCanvas_default,
+          {
+            tiles,
+            units: isoUnits,
+            features,
+            selectedUnitId,
+            validMoves,
+            attackTargets,
+            hoveredTile,
+            onTileClick: handleTileClick,
+            onUnitClick: handleUnitClick,
+            onTileHover: (x, y) => setHoveredTile({ x, y }),
+            onTileLeave: () => setHoveredTile(null),
+            scale,
+            assetBaseUrl: assetManifest?.baseUrl,
+            assetManifest,
+            backgroundImage,
+            onDrawEffects,
+            hasActiveEffects: hasActiveEffects2,
+            effectSpriteUrls,
+            resolveUnitFrame,
+            unitScale
+          }
+        ),
+        overlay && overlay(ctx)
+      ] }),
+      sidebar && /* @__PURE__ */ jsx("div", { className: "w-80 shrink-0", children: sidebar(ctx) })
+    ] }),
+    actions ? actions(ctx) : currentPhase !== "game_over" && /* @__PURE__ */ jsxs("div", { className: "fixed bottom-6 right-6 z-50 flex gap-2", children: [
+      (currentPhase === "movement" || currentPhase === "action") && /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "px-4 py-2 rounded-lg bg-[var(--color-surface)] text-[var(--color-foreground)] border border-[var(--color-border)] shadow-xl hover:opacity-90",
+          onClick: handleCancel,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "px-4 py-2 rounded-lg bg-[var(--color-primary)] text-white shadow-xl hover:opacity-90",
+          onClick: handleEndTurn,
+          children: "End Turn"
+        }
+      )
+    ] }),
+    gameResult && (gameOverOverlay ? gameOverOverlay(ctx) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm rounded-xl", children: /* @__PURE__ */ jsxs("div", { className: "text-center space-y-6 p-8", children: [
+      /* @__PURE__ */ jsx(
+        "h2",
+        {
+          className: cn(
+            "text-4xl font-black tracking-widest uppercase",
+            gameResult === "victory" ? "text-yellow-400" : "text-red-500"
+          ),
+          children: gameResult === "victory" ? "Victory!" : "Defeat"
+        }
+      ),
+      /* @__PURE__ */ jsxs("p", { className: "text-gray-300", children: [
+        "Turns played: ",
+        currentTurn
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "px-8 py-3 rounded-lg bg-[var(--color-primary)] text-white font-semibold hover:opacity-90",
+          onClick: handleReset,
+          children: "Play Again"
+        }
+      )
+    ] }) }))
+  ] });
+}
+BattleBoard.displayName = "BattleBoard";
+function defaultIsInRange(from, to, range) {
+  return Math.abs(from.x - to.x) + Math.abs(from.y - to.y) <= range;
+}
+function WorldMapBoard({
+  entity,
+  scale = 0.4,
+  unitScale = 2.5,
+  allowMoveAllHeroes = false,
+  isInRange = defaultIsInRange,
+  heroSelectEvent,
+  heroMoveEvent,
+  battleEncounterEvent,
+  featureEnterEvent,
+  tileClickEvent,
+  header,
+  sidePanel,
+  overlay,
+  footer,
+  onHeroSelect,
+  onHeroMove,
+  onBattleEncounter,
+  onFeatureEnter,
+  effectSpriteUrls = [],
+  resolveUnitFrame,
+  className
+}) {
+  const eventBus = useEventBus();
+  const hexes = entity.hexes;
+  const heroes = entity.heroes;
+  const features = entity.features ?? [];
+  const selectedHeroId = entity.selectedHeroId;
+  const assetManifest = entity.assetManifest;
+  const backgroundImage = entity.backgroundImage;
+  const [hoveredTile, setHoveredTile] = useState(null);
+  const selectedHero = useMemo(
+    () => heroes.find((h) => h.id === selectedHeroId) ?? null,
+    [heroes, selectedHeroId]
+  );
+  const tiles = useMemo(
+    () => hexes.map((hex) => ({
+      x: hex.x,
+      y: hex.y,
+      terrain: hex.terrain,
+      terrainSprite: hex.terrainSprite
+    })),
+    [hexes]
+  );
+  const baseUnits = useMemo(
+    () => heroes.map((hero) => ({
+      id: hero.id,
+      position: hero.position,
+      name: hero.name,
+      team: hero.owner === "enemy" ? "enemy" : "player",
+      health: 100,
+      maxHealth: 100,
+      sprite: hero.sprite
+    })),
+    [heroes]
+  );
+  const MOVE_SPEED_MS_PER_TILE = 300;
+  const movementAnimRef = useRef(null);
+  const [movingPositions, setMovingPositions] = useState(/* @__PURE__ */ new Map());
+  const startMoveAnimation = useCallback((heroId, from, to, onComplete) => {
+    const dist = Math.max(Math.abs(to.x - from.x), Math.abs(to.y - from.y));
+    movementAnimRef.current = { heroId, from, to, elapsed: 0, duration: dist * MOVE_SPEED_MS_PER_TILE, onComplete };
+  }, []);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const anim2 = movementAnimRef.current;
+      if (!anim2) return;
+      anim2.elapsed += 16;
+      const t = Math.min(anim2.elapsed / anim2.duration, 1);
+      const eased = 1 - (1 - t) * (1 - t);
+      const cx = anim2.from.x + (anim2.to.x - anim2.from.x) * eased;
+      const cy = anim2.from.y + (anim2.to.y - anim2.from.y) * eased;
+      if (t >= 1) {
+        movementAnimRef.current = null;
+        setMovingPositions((prev) => {
+          const n = new Map(prev);
+          n.delete(anim2.heroId);
+          return n;
+        });
+        anim2.onComplete();
+      } else {
+        setMovingPositions((prev) => {
+          const n = new Map(prev);
+          n.set(anim2.heroId, { x: cx, y: cy });
+          return n;
+        });
+      }
+    }, 16);
+    return () => clearInterval(interval);
+  }, []);
+  const isoUnits = useMemo(() => {
+    if (movingPositions.size === 0) return baseUnits;
+    return baseUnits.map((u) => {
+      const pos = movingPositions.get(u.id);
+      return pos ? { ...u, position: pos } : u;
+    });
+  }, [baseUnits, movingPositions]);
+  const validMoves = useMemo(() => {
+    if (!selectedHero || selectedHero.movement <= 0) return [];
+    const moves = [];
+    hexes.forEach((hex) => {
+      if (hex.passable === false) return;
+      if (hex.x === selectedHero.position.x && hex.y === selectedHero.position.y) return;
+      if (!isInRange(selectedHero.position, { x: hex.x, y: hex.y }, selectedHero.movement)) return;
+      if (heroes.some((h) => h.position.x === hex.x && h.position.y === hex.y && h.owner === selectedHero.owner)) return;
+      moves.push({ x: hex.x, y: hex.y });
+    });
+    return moves;
+  }, [selectedHero, hexes, heroes, isInRange]);
+  const attackTargets = useMemo(() => {
+    if (!selectedHero || selectedHero.movement <= 0) return [];
+    return heroes.filter((h) => h.owner !== selectedHero.owner).filter((h) => isInRange(selectedHero.position, h.position, selectedHero.movement)).map((h) => h.position);
+  }, [selectedHero, heroes, isInRange]);
+  const maxY = Math.max(...hexes.map((h) => h.y), 0);
+  const baseOffsetX = (maxY + 1) * (TILE_WIDTH * scale / 2);
+  const tileToScreen = useCallback(
+    (tx, ty) => isoToScreen(tx, ty, scale, baseOffsetX),
+    [scale, baseOffsetX]
+  );
+  const hoveredHex = useMemo(
+    () => hoveredTile ? hexes.find((h) => h.x === hoveredTile.x && h.y === hoveredTile.y) ?? null : null,
+    [hoveredTile, hexes]
+  );
+  const hoveredHero = useMemo(
+    () => hoveredTile ? heroes.find((h) => h.position.x === hoveredTile.x && h.position.y === hoveredTile.y) ?? null : null,
+    [hoveredTile, heroes]
+  );
+  const handleTileClick = useCallback((x, y) => {
+    if (movementAnimRef.current) return;
+    const hex = hexes.find((h) => h.x === x && h.y === y);
+    if (!hex) return;
+    if (tileClickEvent) {
+      eventBus.emit(`UI:${tileClickEvent}`, { x, y });
+    }
+    if (selectedHero && validMoves.some((m) => m.x === x && m.y === y)) {
+      startMoveAnimation(selectedHero.id, { ...selectedHero.position }, { x, y }, () => {
+        onHeroMove?.(selectedHero.id, x, y);
+        if (heroMoveEvent) {
+          eventBus.emit(`UI:${heroMoveEvent}`, { heroId: selectedHero.id, toX: x, toY: y });
+        }
+        if (hex.feature && hex.feature !== "none") {
+          onFeatureEnter?.(selectedHero.id, hex);
+          if (featureEnterEvent) {
+            eventBus.emit(`UI:${featureEnterEvent}`, { heroId: selectedHero.id, feature: hex.feature, hex });
+          }
+        }
+      });
+      return;
+    }
+    const enemy = heroes.find((h) => h.position.x === x && h.position.y === y && h.owner === "enemy");
+    if (selectedHero && enemy && attackTargets.some((t) => t.x === x && t.y === y)) {
+      onBattleEncounter?.(selectedHero.id, enemy.id);
+      if (battleEncounterEvent) {
+        eventBus.emit(`UI:${battleEncounterEvent}`, { attackerId: selectedHero.id, defenderId: enemy.id });
+      }
+    }
+  }, [hexes, heroes, selectedHero, validMoves, attackTargets, startMoveAnimation, onHeroMove, onFeatureEnter, onBattleEncounter, eventBus, tileClickEvent, heroMoveEvent, featureEnterEvent, battleEncounterEvent]);
+  const handleUnitClick = useCallback((unitId) => {
+    const hero = heroes.find((h) => h.id === unitId);
+    if (hero && (hero.owner === "player" || allowMoveAllHeroes)) {
+      onHeroSelect?.(unitId);
+      if (heroSelectEvent) {
+        eventBus.emit(`UI:${heroSelectEvent}`, { heroId: unitId });
+      }
+    }
+  }, [heroes, onHeroSelect, allowMoveAllHeroes, eventBus, heroSelectEvent]);
+  const selectHero = useCallback((id) => {
+    onHeroSelect?.(id);
+    if (heroSelectEvent) {
+      eventBus.emit(`UI:${heroSelectEvent}`, { heroId: id });
+    }
+  }, [onHeroSelect, eventBus, heroSelectEvent]);
+  const ctx = useMemo(
+    () => ({
+      hoveredTile,
+      hoveredHex,
+      hoveredHero,
+      selectedHero,
+      validMoves,
+      selectHero,
+      tileToScreen,
+      scale
+    }),
+    [hoveredTile, hoveredHex, hoveredHero, selectedHero, validMoves, selectHero, tileToScreen, scale]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("world-map-board min-h-screen flex flex-col bg-[var(--color-background)]", className), children: [
+    header && header(ctx),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto p-4 relative", children: [
+        /* @__PURE__ */ jsx(
+          IsometricCanvas_default,
+          {
+            tiles,
+            units: isoUnits,
+            features,
+            selectedUnitId: selectedHeroId,
+            validMoves,
+            attackTargets,
+            hoveredTile,
+            onTileClick: handleTileClick,
+            onUnitClick: handleUnitClick,
+            onTileHover: (x, y) => setHoveredTile({ x, y }),
+            onTileLeave: () => setHoveredTile(null),
+            scale,
+            assetBaseUrl: assetManifest?.baseUrl,
+            assetManifest,
+            backgroundImage,
+            effectSpriteUrls,
+            resolveUnitFrame,
+            unitScale
+          }
+        ),
+        overlay && overlay(ctx)
+      ] }),
+      sidePanel && /* @__PURE__ */ jsx("div", { className: "w-80 shrink-0 border-l border-[var(--color-border)] bg-[var(--color-surface)] overflow-y-auto p-4", children: sidePanel(ctx) })
+    ] }),
+    footer && footer(ctx)
+  ] });
+}
+WorldMapBoard.displayName = "WorldMapBoard";
+function CastleBoard({
+  entity,
+  scale = 0.45,
+  header,
+  sidePanel,
+  overlay,
+  footer,
+  onFeatureClick,
+  onUnitClick,
+  onTileClick,
+  featureClickEvent,
+  unitClickEvent,
+  tileClickEvent,
+  className
+}) {
+  const eventBus = useEventBus();
+  const tiles = entity.tiles;
+  const features = entity.features ?? [];
+  const units = entity.units ?? [];
+  const assetManifest = entity.assetManifest;
+  const backgroundImage = entity.backgroundImage;
+  const [hoveredTile, setHoveredTile] = useState(null);
+  const [selectedFeature, setSelectedFeature] = useState(null);
+  const hoveredFeature = useMemo(() => {
+    if (!hoveredTile) return null;
+    return features.find((f) => f.x === hoveredTile.x && f.y === hoveredTile.y) ?? null;
+  }, [hoveredTile, features]);
+  const hoveredUnit = useMemo(() => {
+    if (!hoveredTile) return null;
+    return units.find(
+      (u) => u.position?.x === hoveredTile.x && u.position?.y === hoveredTile.y
+    ) ?? null;
+  }, [hoveredTile, units]);
+  const maxY = Math.max(...tiles.map((t) => t.y), 0);
+  const baseOffsetX = (maxY + 1) * (TILE_WIDTH * scale / 2);
+  const tileToScreen = useCallback(
+    (tx, ty) => isoToScreen(tx, ty, scale, baseOffsetX),
+    [scale, baseOffsetX]
+  );
+  const handleTileClick = useCallback((x, y) => {
+    const feature = features.find((f) => f.x === x && f.y === y);
+    if (feature) {
+      setSelectedFeature(feature);
+      onFeatureClick?.(feature);
+      if (featureClickEvent) {
+        eventBus.emit(`UI:${featureClickEvent}`, {
+          featureId: feature.id,
+          featureType: feature.type,
+          x: feature.x,
+          y: feature.y
+        });
+      }
+    }
+    onTileClick?.(x, y);
+    if (tileClickEvent) {
+      eventBus.emit(`UI:${tileClickEvent}`, { x, y });
+    }
+  }, [features, onFeatureClick, onTileClick, featureClickEvent, tileClickEvent, eventBus]);
+  const handleUnitClick = useCallback((unitId) => {
+    const unit = units.find((u) => u.id === unitId);
+    if (unit) {
+      onUnitClick?.(unit);
+      if (unitClickEvent) {
+        eventBus.emit(`UI:${unitClickEvent}`, { unitId: unit.id });
+      }
+    }
+  }, [units, onUnitClick, unitClickEvent, eventBus]);
+  const clearSelection = useCallback(() => setSelectedFeature(null), []);
+  const ctx = useMemo(
+    () => ({
+      hoveredTile,
+      hoveredFeature,
+      hoveredUnit,
+      selectedFeature,
+      clearSelection,
+      tileToScreen,
+      scale
+    }),
+    [hoveredTile, hoveredFeature, hoveredUnit, selectedFeature, clearSelection, tileToScreen, scale]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("castle-board min-h-screen flex flex-col bg-[var(--color-background)]", className), children: [
+    header && header(ctx),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto p-4 relative", children: [
+        /* @__PURE__ */ jsx(
+          IsometricCanvas_default,
+          {
+            tiles,
+            units,
+            features,
+            hoveredTile,
+            onTileClick: handleTileClick,
+            onUnitClick: handleUnitClick,
+            onTileHover: (x, y) => setHoveredTile({ x, y }),
+            onTileLeave: () => setHoveredTile(null),
+            scale,
+            assetBaseUrl: assetManifest?.baseUrl,
+            assetManifest,
+            backgroundImage
+          }
+        ),
+        overlay && overlay(ctx)
+      ] }),
+      sidePanel && /* @__PURE__ */ jsx("div", { className: "w-96 shrink-0 border-l border-[var(--color-border)] bg-[var(--color-surface)] overflow-y-auto", children: sidePanel(ctx) })
+    ] }),
+    footer && footer(ctx)
+  ] });
+}
+CastleBoard.displayName = "CastleBoard";
+var TERRAIN_COLORS = {
+  grass: "#4a7c3f",
+  dirt: "#8b6c42",
+  stone: "#7a7a7a",
+  sand: "#c4a84d",
+  water: "#3a6ea5",
+  forest: "#2d5a1e",
+  mountain: "#5a4a3a",
+  lava: "#c44b2b",
+  ice: "#a0d2e8",
+  plains: "#6b8e4e",
+  fortress: "#4a4a5a",
+  castle: "#5a5a6a"
+};
+var FEATURE_TYPES = [
+  "goldMine",
+  "resonanceCrystal",
+  "traitCache",
+  "salvageYard",
+  "portal",
+  "battleMarker",
+  "treasure",
+  "castle"
+];
+function CollapsibleSection({ title, expanded, onToggle, children, className }) {
+  const Icon2 = expanded ? ChevronDown : ChevronRight;
+  return /* @__PURE__ */ jsxs(VStack, { gap: "xs", className, children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: onToggle,
+        className: "w-full justify-start text-left",
+        children: /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+          /* @__PURE__ */ jsx(Icon2, { size: 14 }),
+          /* @__PURE__ */ jsx(Typography, { variant: "label", weight: "semibold", children: title })
+        ] })
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx(Box, { padding: "xs", paddingX: "sm", children })
+  ] });
+}
+CollapsibleSection.displayName = "CollapsibleSection";
+function EditorSlider({ label, value, min, max, step = 0.1, onChange, className }) {
+  return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", className, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "min-w-[80px] text-gray-300", children: label }),
+    /* @__PURE__ */ jsx(Box, { className: "flex-1", children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min,
+        max,
+        step,
+        value,
+        onChange: (e) => onChange(parseFloat(e.target.value)),
+        className: "w-full h-1.5 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "min-w-[40px] text-right text-gray-400", children: typeof step === "number" && step < 1 ? value.toFixed(1) : value })
+  ] });
+}
+EditorSlider.displayName = "EditorSlider";
+function EditorSelect({ label, value, options, onChange, className }) {
+  return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", className, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "min-w-[80px] text-gray-300", children: label }),
+    /* @__PURE__ */ jsx(Box, { className: "flex-1", children: /* @__PURE__ */ jsx(
+      "select",
+      {
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: "w-full px-2 py-1 text-xs bg-gray-700 text-gray-200 border border-gray-600 rounded cursor-pointer",
+        children: options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+      }
+    ) })
+  ] });
+}
+EditorSelect.displayName = "EditorSelect";
+function EditorCheckbox({ label, checked, onChange, className }) {
+  return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", className, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "min-w-[80px] text-gray-300", children: label }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked,
+        onChange: (e) => onChange(e.target.checked),
+        className: "w-4 h-4 accent-blue-500 cursor-pointer"
+      }
+    ) })
+  ] });
+}
+EditorCheckbox.displayName = "EditorCheckbox";
+function EditorTextInput({ label, value, onChange, placeholder, className }) {
+  return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", className, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "min-w-[80px] text-gray-300", children: label }),
+    /* @__PURE__ */ jsx(Box, { className: "flex-1", children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder,
+        className: "w-full px-2 py-1 text-xs bg-gray-700 text-gray-200 border border-gray-600 rounded"
+      }
+    ) })
+  ] });
+}
+EditorTextInput.displayName = "EditorTextInput";
+function StatusBar({ hoveredTile, mode, gridSize, unitCount, featureCount, className }) {
+  return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", className: `px-3 py-1.5 bg-gray-800 border-t border-gray-700 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx(Badge, { variant: "info", size: "sm", children: mode }),
+    /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-gray-400", children: [
+      "Tile: ",
+      hoveredTile ? `(${hoveredTile.x}, ${hoveredTile.y})` : "\u2014"
+    ] }),
+    gridSize && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-gray-500", children: [
+      "Grid: ",
+      gridSize.width,
+      "x",
+      gridSize.height
+    ] }),
+    unitCount !== void 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-gray-500", children: [
+      "Units: ",
+      unitCount
+    ] }),
+    featureCount !== void 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-gray-500", children: [
+      "Features: ",
+      featureCount
+    ] })
+  ] });
+}
+StatusBar.displayName = "StatusBar";
+function TerrainPalette({ terrains, selectedTerrain, onSelect, className }) {
+  return /* @__PURE__ */ jsx(HStack, { gap: "xs", wrap: true, className, children: terrains.map((terrain) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      onClick: () => onSelect(terrain),
+      className: `w-8 h-8 rounded cursor-pointer border-2 transition-all ${selectedTerrain === terrain ? "border-white scale-110 shadow-lg" : "border-gray-600 hover:border-gray-400"}`,
+      style: { backgroundColor: TERRAIN_COLORS[terrain] || "#555" },
+      title: terrain
+    },
+    terrain
+  )) });
+}
+TerrainPalette.displayName = "TerrainPalette";
+var MODE_LABELS = {
+  select: "Select",
+  paint: "Paint",
+  unit: "Unit",
+  feature: "Feature",
+  erase: "Erase"
+};
+function EditorToolbar({ mode, onModeChange, className }) {
+  const modes = ["select", "paint", "unit", "feature", "erase"];
+  return /* @__PURE__ */ jsx(HStack, { gap: "xs", wrap: true, className, children: modes.map((m) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: mode === m ? "primary" : "ghost",
+      size: "sm",
+      onClick: () => onModeChange(m),
+      children: MODE_LABELS[m]
+    },
+    m
+  )) });
+}
+EditorToolbar.displayName = "EditorToolbar";
+function VStackPattern({
+  gap = "md",
+  align = "stretch",
+  justify = "start",
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsx(VStack, { gap, align, justify, className, style, children });
+}
+VStackPattern.displayName = "VStackPattern";
+function HStackPattern({
+  gap = "md",
+  align = "center",
+  justify = "start",
+  wrap = false,
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsx(HStack, { gap, align, justify, wrap, className, style, children });
+}
+HStackPattern.displayName = "HStackPattern";
+function BoxPattern({
+  p: p2,
+  m,
+  bg = "transparent",
+  border = false,
+  radius = "none",
+  shadow = "none",
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      padding: p2,
+      margin: m,
+      bg,
+      border,
+      rounded: radius,
+      shadow,
+      className,
+      style,
+      children
+    }
+  );
+}
+BoxPattern.displayName = "BoxPattern";
+function GridPattern({
+  cols = 1,
+  gap = "md",
+  rowGap,
+  colGap,
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsx(Grid2, { cols, gap, rowGap, colGap, className, style, children });
+}
+GridPattern.displayName = "GridPattern";
+function CenterPattern({
+  minHeight,
+  className,
+  style,
+  children
+}) {
+  const mergedStyle = minHeight ? { minHeight, ...style } : style;
+  return /* @__PURE__ */ jsx(Center, { className, style: mergedStyle, children });
+}
+CenterPattern.displayName = "CenterPattern";
+function SpacerPattern({ size = "flex" }) {
+  if (size === "flex") {
+    return /* @__PURE__ */ jsx(Spacer, {});
+  }
+  const sizeMap5 = {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem"
+  };
+  return /* @__PURE__ */ jsx("div", { style: { width: sizeMap5[size], height: sizeMap5[size], flexShrink: 0 } });
+}
+SpacerPattern.displayName = "SpacerPattern";
+function DividerPattern({
+  orientation = "horizontal",
+  variant = "solid",
+  spacing = "md"
+}) {
+  const spacingMap = {
+    xs: "my-1",
+    sm: "my-2",
+    md: "my-4",
+    lg: "my-6"
+  };
+  const verticalSpacingMap = {
+    xs: "mx-1",
+    sm: "mx-2",
+    md: "mx-4",
+    lg: "mx-6"
+  };
+  return /* @__PURE__ */ jsx(
+    Divider,
+    {
+      orientation,
+      variant,
+      className: orientation === "horizontal" ? spacingMap[spacing] : verticalSpacingMap[spacing]
+    }
+  );
+}
+DividerPattern.displayName = "DividerPattern";
+function ButtonPattern({
+  label,
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  onClick,
+  icon,
+  iconPosition = "left",
+  className
+}) {
+  const { emit } = useEventBus();
+  const handleClick = () => {
+    if (onClick && !disabled) {
+      emit(`UI:${onClick}`, {});
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant,
+      size,
+      disabled,
+      onClick: handleClick,
+      className,
+      children: [
+        icon && iconPosition === "left" && /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm" }),
+        label,
+        icon && iconPosition === "right" && /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm" })
+      ]
+    }
+  );
+}
+ButtonPattern.displayName = "ButtonPattern";
+function IconButtonPattern({
+  icon,
+  variant = "ghost",
+  size = "md",
+  onClick,
+  ariaLabel,
+  className
+}) {
+  const { emit } = useEventBus();
+  const handleClick = () => {
+    if (onClick) {
+      emit(`UI:${onClick}`, {});
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant,
+      size,
+      onClick: handleClick,
       "aria-label": ariaLabel,
       className,
       children: /* @__PURE__ */ jsx(Icon, { name: icon, size: size === "sm" ? "sm" : "md" })
@@ -17637,707 +18828,164 @@ var GenericAppTemplate = ({
       {
         padding: "md",
         border: true,
-        className: "border-b-2 border-x-0 border-t-0 border-[var(--color-border)] flex items-center justify-between flex-shrink-0",
-        children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "h3", children: title }),
-            subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "secondary", className: "mt-1", children: subtitle })
-          ] }),
-          headerActions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: headerActions })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(Box, { fullWidth: true, overflow: "auto", className: "flex-1", children: /* @__PURE__ */ jsx(Box, { padding: "lg", children }) }),
-    footer && /* @__PURE__ */ jsx(
-      Box,
-      {
-        padding: "md",
-        border: true,
-        bg: "muted",
-        className: "border-t-2 border-x-0 border-b-0 border-[var(--color-border)] flex-shrink-0",
-        children: footer
-      }
-    )
-  ] });
-};
-GenericAppTemplate.displayName = "GenericAppTemplate";
-var GameShell = ({
-  appName = "Game",
-  hud,
-  className,
-  showTopBar = true
-}) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "game-shell",
-        "flex flex-col w-full h-screen overflow-hidden",
-        className
-      ),
-      style: {
-        width: "100vw",
-        height: "100vh",
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
-        background: "var(--color-background, #0a0a0f)",
-        color: "var(--color-text, #e0e0e0)"
-      },
-      children: [
-        showTopBar && /* @__PURE__ */ jsxs(
-          "header",
-          {
-            className: "game-shell__header",
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              padding: "0.5rem 1rem",
-              borderBottom: "1px solid var(--color-border, #2a2a3a)",
-              background: "var(--color-surface, #12121f)",
-              flexShrink: 0
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    fontWeight: 700,
-                    fontSize: "1.1rem",
-                    letterSpacing: "0.02em"
-                  },
-                  children: appName
-                }
-              ),
-              hud && /* @__PURE__ */ jsx("div", { className: "game-shell__hud", children: hud })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "main",
-          {
-            className: "game-shell__content",
-            style: {
-              flex: 1,
-              overflow: "hidden",
-              position: "relative"
-            },
-            children: /* @__PURE__ */ jsx(Outlet, {})
-          }
-        )
-      ]
-    }
-  );
-};
-GameShell.displayName = "GameShell";
-function BattleTemplate({
-  initialUnits,
-  tiles,
-  scale = 0.45,
-  boardWidth = 8,
-  boardHeight = 6,
-  assetManifest,
-  backgroundImage,
-  unitScale = 1,
-  header,
-  sidebar,
-  actions,
-  overlay,
-  gameOverOverlay,
-  features = [],
-  onAttack,
-  onGameEnd,
-  onUnitMove,
-  calculateDamage,
-  onDrawEffects,
-  hasActiveEffects: hasActiveEffects2 = false,
-  effectSpriteUrls = [],
-  resolveUnitFrame,
-  className
-}) {
-  const [units, setUnits] = useState(initialUnits);
-  const [selectedUnitId, setSelectedUnitId] = useState(null);
-  const [hoveredTile, setHoveredTile] = useState(null);
-  const [currentPhase, setCurrentPhase] = useState("observation");
-  const [currentTurn, setCurrentTurn] = useState(1);
-  const [gameResult, setGameResult] = useState(null);
-  const [isShaking, setIsShaking] = useState(false);
-  const selectedUnit = useMemo(
-    () => units.find((u) => u.id === selectedUnitId) ?? null,
-    [units, selectedUnitId]
-  );
-  const hoveredUnit = useMemo(() => {
-    if (!hoveredTile) return null;
-    return units.find(
-      (u) => u.position.x === hoveredTile.x && u.position.y === hoveredTile.y && u.health > 0
-    ) ?? null;
-  }, [hoveredTile, units]);
-  const playerUnits = useMemo(() => units.filter((u) => u.team === "player" && u.health > 0), [units]);
-  const enemyUnits = useMemo(() => units.filter((u) => u.team === "enemy" && u.health > 0), [units]);
-  const validMoves = useMemo(() => {
-    if (!selectedUnit || currentPhase !== "movement") return [];
-    const moves = [];
-    const range = selectedUnit.movement;
-    for (let dy = -range; dy <= range; dy++) {
-      for (let dx = -range; dx <= range; dx++) {
-        const nx = selectedUnit.position.x + dx;
-        const ny = selectedUnit.position.y + dy;
-        const dist = Math.abs(dx) + Math.abs(dy);
-        if (dist > 0 && dist <= range && nx >= 0 && nx < boardWidth && ny >= 0 && ny < boardHeight && !units.some((u) => u.position.x === nx && u.position.y === ny && u.health > 0)) {
-          moves.push({ x: nx, y: ny });
-        }
-      }
-    }
-    return moves;
-  }, [selectedUnit, currentPhase, units, boardWidth, boardHeight]);
-  const attackTargets = useMemo(() => {
-    if (!selectedUnit || currentPhase !== "action") return [];
-    return units.filter((u) => u.team !== selectedUnit.team && u.health > 0).filter((u) => {
-      const dx = Math.abs(u.position.x - selectedUnit.position.x);
-      const dy = Math.abs(u.position.y - selectedUnit.position.y);
-      return dx <= 1 && dy <= 1 && dx + dy > 0;
-    }).map((u) => u.position);
-  }, [selectedUnit, currentPhase, units]);
-  const MOVE_SPEED_MS_PER_TILE = 300;
-  const movementAnimRef = useRef(null);
-  const [movingPositions, setMovingPositions] = useState(/* @__PURE__ */ new Map());
-  const startMoveAnimation = useCallback((unitId, from, to, onComplete) => {
-    const dx = to.x - from.x;
-    const dy = to.y - from.y;
-    const dist = Math.max(Math.abs(dx), Math.abs(dy));
-    const duration = dist * MOVE_SPEED_MS_PER_TILE;
-    movementAnimRef.current = { unitId, from, to, elapsed: 0, duration, onComplete };
-  }, []);
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const anim2 = movementAnimRef.current;
-      if (!anim2) return;
-      anim2.elapsed += 16;
-      const t = Math.min(anim2.elapsed / anim2.duration, 1);
-      const eased = 1 - (1 - t) * (1 - t);
-      const cx = anim2.from.x + (anim2.to.x - anim2.from.x) * eased;
-      const cy = anim2.from.y + (anim2.to.y - anim2.from.y) * eased;
-      if (t >= 1) {
-        movementAnimRef.current = null;
-        setMovingPositions((prev) => {
-          const next = new Map(prev);
-          next.delete(anim2.unitId);
-          return next;
-        });
-        anim2.onComplete();
-      } else {
-        setMovingPositions((prev) => {
-          const next = new Map(prev);
-          next.set(anim2.unitId, { x: cx, y: cy });
-          return next;
-        });
-      }
-    }, 16);
-    return () => clearInterval(interval);
-  }, []);
-  const isoUnits = useMemo(() => {
-    return units.filter((u) => u.health > 0).map((unit) => {
-      const pos = movingPositions.get(unit.id) ?? unit.position;
-      return {
-        id: unit.id,
-        position: pos,
-        name: unit.name,
-        team: unit.team,
-        health: unit.health,
-        maxHealth: unit.maxHealth,
-        unitType: unit.unitType,
-        heroId: unit.heroId,
-        sprite: unit.sprite,
-        traits: unit.traits?.map((t) => ({
-          name: t.name,
-          currentState: t.currentState,
-          states: t.states,
-          cooldown: t.cooldown ?? 0
-        }))
-      };
-    });
-  }, [units, movingPositions]);
-  const maxY = Math.max(...tiles.map((t) => t.y), 0);
-  const baseOffsetX = (maxY + 1) * (TILE_WIDTH * scale / 2);
-  const tileToScreen = useCallback(
-    (tx, ty) => isoToScreen(tx, ty, scale, baseOffsetX),
-    [scale, baseOffsetX]
-  );
-  const checkGameEnd = useCallback(() => {
-    const pa = units.filter((u) => u.team === "player" && u.health > 0);
-    const ea = units.filter((u) => u.team === "enemy" && u.health > 0);
-    if (pa.length === 0) {
-      setGameResult("defeat");
-      setCurrentPhase("game_over");
-      onGameEnd?.("defeat");
-    } else if (ea.length === 0) {
-      setGameResult("victory");
-      setCurrentPhase("game_over");
-      onGameEnd?.("victory");
-    }
-  }, [units, onGameEnd]);
-  const handleUnitClick = useCallback((unitId) => {
-    const unit = units.find((u) => u.id === unitId);
-    if (!unit) return;
-    if (currentPhase === "observation" || currentPhase === "selection") {
-      if (unit.team === "player") {
-        setSelectedUnitId(unitId);
-        setCurrentPhase("movement");
-      }
-    } else if (currentPhase === "action" && selectedUnit) {
-      if (unit.team === "enemy" && attackTargets.some((t) => t.x === unit.position.x && t.y === unit.position.y)) {
-        const damage = calculateDamage ? calculateDamage(selectedUnit, unit) : Math.max(1, selectedUnit.attack - unit.defense);
-        const newHealth = Math.max(0, unit.health - damage);
-        setUnits((prev) => prev.map((u) => u.id === unit.id ? { ...u, health: newHealth } : u));
-        setIsShaking(true);
-        setTimeout(() => setIsShaking(false), 300);
-        onAttack?.(selectedUnit, unit, damage);
-        setSelectedUnitId(null);
-        setCurrentPhase("observation");
-        setCurrentTurn((t) => t + 1);
-        setTimeout(checkGameEnd, 100);
+        className: "border-b-2 border-x-0 border-t-0 border-[var(--color-border)] flex items-center justify-between flex-shrink-0",
+        children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "h3", children: title }),
+            subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "secondary", className: "mt-1", children: subtitle })
+          ] }),
+          headerActions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: headerActions })
+        ]
       }
-    }
-  }, [currentPhase, selectedUnit, attackTargets, units, checkGameEnd, onAttack, calculateDamage]);
-  const handleTileClick = useCallback((x, y) => {
-    if (currentPhase === "movement" && selectedUnit) {
-      if (movementAnimRef.current) return;
-      if (validMoves.some((m) => m.x === x && m.y === y)) {
-        const from = { ...selectedUnit.position };
-        const to = { x, y };
-        startMoveAnimation(selectedUnit.id, from, to, () => {
-          setUnits(
-            (prev) => prev.map((u) => u.id === selectedUnitId ? { ...u, position: { x, y } } : u)
-          );
-          onUnitMove?.(selectedUnit, to);
-          setCurrentPhase("action");
-        });
+    ),
+    /* @__PURE__ */ jsx(Box, { fullWidth: true, overflow: "auto", className: "flex-1", children: /* @__PURE__ */ jsx(Box, { padding: "lg", children }) }),
+    footer && /* @__PURE__ */ jsx(
+      Box,
+      {
+        padding: "md",
+        border: true,
+        bg: "muted",
+        className: "border-t-2 border-x-0 border-b-0 border-[var(--color-border)] flex-shrink-0",
+        children: footer
       }
-    }
-  }, [currentPhase, selectedUnit, selectedUnitId, validMoves, startMoveAnimation, onUnitMove]);
-  const handleEndTurn = useCallback(() => {
-    setSelectedUnitId(null);
-    setCurrentPhase("observation");
-    setCurrentTurn((t) => t + 1);
-  }, []);
-  const handleCancel = useCallback(() => {
-    setSelectedUnitId(null);
-    setCurrentPhase("observation");
-  }, []);
-  const handleReset = useCallback(() => {
-    setUnits(initialUnits);
-    setSelectedUnitId(null);
-    setCurrentPhase("observation");
-    setCurrentTurn(1);
-    setGameResult(null);
-  }, [initialUnits]);
-  const ctx = useMemo(
-    () => ({
-      phase: currentPhase,
-      turn: currentTurn,
-      selectedUnit,
-      hoveredUnit,
-      playerUnits,
-      enemyUnits,
-      gameResult,
-      onEndTurn: handleEndTurn,
-      onCancel: handleCancel,
-      onReset: handleReset,
-      attackTargets,
-      tileToScreen
-    }),
-    [
-      currentPhase,
-      currentTurn,
-      selectedUnit,
-      hoveredUnit,
-      playerUnits,
-      enemyUnits,
-      gameResult,
-      handleEndTurn,
-      handleCancel,
-      handleReset,
-      attackTargets,
-      tileToScreen
-    ]
-  );
-  const shakeStyle = isShaking ? { animation: "battle-shake 0.3s ease-in-out" } : {};
-  return /* @__PURE__ */ jsxs("div", { className: cn("battle-template relative flex flex-col min-h-[600px] bg-[var(--color-background)]", className), children: [
-    /* @__PURE__ */ jsx("style", { children: `
-                @keyframes battle-shake {
-                    0%, 100% { transform: translate(0, 0); }
-                    10% { transform: translate(-3px, -2px); }
-                    20% { transform: translate(3px, 1px); }
-                    30% { transform: translate(-2px, 3px); }
-                    40% { transform: translate(2px, -1px); }
-                    50% { transform: translate(-3px, 2px); }
-                    60% { transform: translate(3px, -2px); }
-                    70% { transform: translate(-1px, 3px); }
-                    80% { transform: translate(2px, -3px); }
-                    90% { transform: translate(-2px, 1px); }
+    )
+  ] });
+};
+GenericAppTemplate.displayName = "GenericAppTemplate";
+var GameShell = ({
+  appName = "Game",
+  hud,
+  className,
+  showTopBar = true
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "game-shell",
+        "flex flex-col w-full h-screen overflow-hidden",
+        className
+      ),
+      style: {
+        width: "100vw",
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        background: "var(--color-background, #0a0a0f)",
+        color: "var(--color-text, #e0e0e0)"
+      },
+      children: [
+        showTopBar && /* @__PURE__ */ jsxs(
+          "header",
+          {
+            className: "game-shell__header",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "0.5rem 1rem",
+              borderBottom: "1px solid var(--color-border, #2a2a3a)",
+              background: "var(--color-surface, #12121f)",
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontWeight: 700,
+                    fontSize: "1.1rem",
+                    letterSpacing: "0.02em"
+                  },
+                  children: appName
                 }
-            ` }),
-    header && /* @__PURE__ */ jsx("div", { className: "p-4", children: header(ctx) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 gap-4 p-4 pt-0", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", style: shakeStyle, children: [
+              ),
+              hud && /* @__PURE__ */ jsx("div", { className: "game-shell__hud", children: hud })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
-          IsometricCanvas_default,
+          "main",
           {
-            tiles,
-            units: isoUnits,
-            features,
-            selectedUnitId,
-            validMoves,
-            attackTargets,
-            hoveredTile,
-            onTileClick: handleTileClick,
-            onUnitClick: handleUnitClick,
-            onTileHover: (x, y) => setHoveredTile({ x, y }),
-            onTileLeave: () => setHoveredTile(null),
-            scale,
-            assetBaseUrl: assetManifest?.baseUrl,
-            assetManifest,
-            backgroundImage,
-            onDrawEffects,
-            hasActiveEffects: hasActiveEffects2,
-            effectSpriteUrls,
-            resolveUnitFrame,
-            unitScale
+            className: "game-shell__content",
+            style: {
+              flex: 1,
+              overflow: "hidden",
+              position: "relative"
+            },
+            children: /* @__PURE__ */ jsx(Outlet, {})
           }
-        ),
-        overlay && overlay(ctx)
-      ] }),
-      sidebar && /* @__PURE__ */ jsx("div", { className: "w-80 shrink-0", children: sidebar(ctx) })
-    ] }),
-    actions ? actions(ctx) : currentPhase !== "game_over" && /* @__PURE__ */ jsxs("div", { className: "fixed bottom-6 right-6 z-50 flex gap-2", children: [
-      (currentPhase === "movement" || currentPhase === "action") && /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "px-4 py-2 rounded-lg bg-[var(--color-surface)] text-[var(--color-foreground)] border border-[var(--color-border)] shadow-xl hover:opacity-90",
-          onClick: handleCancel,
-          children: "Cancel"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "px-4 py-2 rounded-lg bg-[var(--color-primary)] text-white shadow-xl hover:opacity-90",
-          onClick: handleEndTurn,
-          children: "End Turn"
-        }
-      )
-    ] }),
-    gameResult && (gameOverOverlay ? gameOverOverlay(ctx) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm rounded-xl", children: /* @__PURE__ */ jsxs("div", { className: "text-center space-y-6 p-8", children: [
-      /* @__PURE__ */ jsx(
-        "h2",
-        {
-          className: cn(
-            "text-4xl font-black tracking-widest uppercase",
-            gameResult === "victory" ? "text-yellow-400" : "text-red-500"
-          ),
-          children: gameResult === "victory" ? "Victory!" : "Defeat"
-        }
-      ),
-      /* @__PURE__ */ jsxs("p", { className: "text-gray-300", children: [
-        "Turns played: ",
-        currentTurn
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "px-8 py-3 rounded-lg bg-[var(--color-primary)] text-white font-semibold hover:opacity-90",
-          onClick: handleReset,
-          children: "Play Again"
-        }
-      )
-    ] }) }))
-  ] });
-}
-BattleTemplate.displayName = "BattleTemplate";
-function CastleTemplate({
-  tiles,
-  features = [],
-  units = [],
+        )
+      ]
+    }
+  );
+};
+GameShell.displayName = "GameShell";
+function BattleTemplate({
+  entity,
+  scale = 0.45,
+  unitScale = 1,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    BattleBoard,
+    {
+      entity,
+      scale,
+      unitScale,
+      tileClickEvent: "TILE_CLICK",
+      unitClickEvent: "UNIT_CLICK",
+      endTurnEvent: "END_TURN",
+      cancelEvent: "CANCEL",
+      gameEndEvent: "GAME_END",
+      playAgainEvent: "PLAY_AGAIN",
+      attackEvent: "ATTACK",
+      className
+    }
+  );
+}
+BattleTemplate.displayName = "BattleTemplate";
+function CastleTemplate({
+  entity,
   scale = 0.45,
-  assetManifest,
-  backgroundImage,
-  header,
-  sidePanel,
-  overlay,
-  footer,
-  onFeatureClick,
-  onUnitClick,
-  onTileClick,
   className
 }) {
-  const [hoveredTile, setHoveredTile] = useState(null);
-  const [selectedFeature, setSelectedFeature] = useState(null);
-  const hoveredFeature = useMemo(() => {
-    if (!hoveredTile) return null;
-    return features.find((f) => f.x === hoveredTile.x && f.y === hoveredTile.y) ?? null;
-  }, [hoveredTile, features]);
-  const hoveredUnit = useMemo(() => {
-    if (!hoveredTile) return null;
-    return units.find(
-      (u) => u.position.x === hoveredTile.x && u.position.y === hoveredTile.y
-    ) ?? null;
-  }, [hoveredTile, units]);
-  const maxY = Math.max(...tiles.map((t) => t.y), 0);
-  const baseOffsetX = (maxY + 1) * (TILE_WIDTH * scale / 2);
-  const tileToScreen = useCallback(
-    (tx, ty) => isoToScreen(tx, ty, scale, baseOffsetX),
-    [scale, baseOffsetX]
-  );
-  const handleTileClick = useCallback((x, y) => {
-    const feature = features.find((f) => f.x === x && f.y === y);
-    if (feature) {
-      setSelectedFeature(feature);
-      onFeatureClick?.(feature);
+  return /* @__PURE__ */ jsx(
+    CastleBoard,
+    {
+      entity,
+      scale,
+      featureClickEvent: "FEATURE_CLICK",
+      unitClickEvent: "UNIT_CLICK",
+      tileClickEvent: "TILE_CLICK",
+      className
     }
-    onTileClick?.(x, y);
-  }, [features, onFeatureClick, onTileClick]);
-  const handleUnitClick = useCallback((unitId) => {
-    const unit = units.find((u) => u.id === unitId);
-    if (unit) onUnitClick?.(unit);
-  }, [units, onUnitClick]);
-  const clearSelection = useCallback(() => setSelectedFeature(null), []);
-  const ctx = useMemo(
-    () => ({
-      hoveredTile,
-      hoveredFeature,
-      hoveredUnit,
-      selectedFeature,
-      clearSelection,
-      tileToScreen,
-      scale
-    }),
-    [hoveredTile, hoveredFeature, hoveredUnit, selectedFeature, clearSelection, tileToScreen, scale]
   );
-  return /* @__PURE__ */ jsxs("div", { className: cn("castle-template min-h-screen flex flex-col bg-[var(--color-background)]", className), children: [
-    header && header(ctx),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto p-4 relative", children: [
-        /* @__PURE__ */ jsx(
-          IsometricCanvas_default,
-          {
-            tiles,
-            units,
-            features,
-            hoveredTile,
-            onTileClick: handleTileClick,
-            onUnitClick: handleUnitClick,
-            onTileHover: (x, y) => setHoveredTile({ x, y }),
-            onTileLeave: () => setHoveredTile(null),
-            scale,
-            assetBaseUrl: assetManifest?.baseUrl,
-            assetManifest,
-            backgroundImage
-          }
-        ),
-        overlay && overlay(ctx)
-      ] }),
-      sidePanel && /* @__PURE__ */ jsx("div", { className: "w-96 shrink-0 border-l border-[var(--color-border)] bg-[var(--color-surface)] overflow-y-auto", children: sidePanel(ctx) })
-    ] }),
-    footer && footer(ctx)
-  ] });
 }
 CastleTemplate.displayName = "CastleTemplate";
-function defaultIsInRange(from, to, range) {
-  return Math.abs(from.x - to.x) + Math.abs(from.y - to.y) <= range;
-}
 function WorldMapTemplate({
-  hexes,
-  heroes,
-  features = [],
-  selectedHeroId,
+  entity,
   scale = 0.4,
   unitScale = 2.5,
-  assetManifest,
-  backgroundImage,
   allowMoveAllHeroes = false,
-  isInRange = defaultIsInRange,
-  header,
-  sidePanel,
-  overlay,
-  footer,
-  onHeroSelect,
-  onHeroMove,
-  onBattleEncounter,
-  onFeatureEnter,
-  effectSpriteUrls = [],
-  resolveUnitFrame,
   className
 }) {
-  const [hoveredTile, setHoveredTile] = useState(null);
-  const selectedHero = useMemo(
-    () => heroes.find((h) => h.id === selectedHeroId) ?? null,
-    [heroes, selectedHeroId]
-  );
-  const tiles = useMemo(
-    () => hexes.map((hex) => ({
-      x: hex.x,
-      y: hex.y,
-      terrain: hex.terrain,
-      terrainSprite: hex.terrainSprite
-    })),
-    [hexes]
-  );
-  const baseUnits = useMemo(
-    () => heroes.map((hero) => ({
-      id: hero.id,
-      position: hero.position,
-      name: hero.name,
-      team: hero.owner === "enemy" ? "enemy" : "player",
-      health: 100,
-      maxHealth: 100,
-      sprite: hero.sprite
-    })),
-    [heroes]
-  );
-  const MOVE_SPEED_MS_PER_TILE = 300;
-  const movementAnimRef = useRef(null);
-  const [movingPositions, setMovingPositions] = useState(/* @__PURE__ */ new Map());
-  const startMoveAnimation = useCallback((heroId, from, to, onComplete) => {
-    const dist = Math.max(Math.abs(to.x - from.x), Math.abs(to.y - from.y));
-    movementAnimRef.current = { heroId, from, to, elapsed: 0, duration: dist * MOVE_SPEED_MS_PER_TILE, onComplete };
-  }, []);
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const anim2 = movementAnimRef.current;
-      if (!anim2) return;
-      anim2.elapsed += 16;
-      const t = Math.min(anim2.elapsed / anim2.duration, 1);
-      const eased = 1 - (1 - t) * (1 - t);
-      const cx = anim2.from.x + (anim2.to.x - anim2.from.x) * eased;
-      const cy = anim2.from.y + (anim2.to.y - anim2.from.y) * eased;
-      if (t >= 1) {
-        movementAnimRef.current = null;
-        setMovingPositions((prev) => {
-          const n = new Map(prev);
-          n.delete(anim2.heroId);
-          return n;
-        });
-        anim2.onComplete();
-      } else {
-        setMovingPositions((prev) => {
-          const n = new Map(prev);
-          n.set(anim2.heroId, { x: cx, y: cy });
-          return n;
-        });
-      }
-    }, 16);
-    return () => clearInterval(interval);
-  }, []);
-  const isoUnits = useMemo(() => {
-    if (movingPositions.size === 0) return baseUnits;
-    return baseUnits.map((u) => {
-      const pos = movingPositions.get(u.id);
-      return pos ? { ...u, position: pos } : u;
-    });
-  }, [baseUnits, movingPositions]);
-  const validMoves = useMemo(() => {
-    if (!selectedHero || selectedHero.movement <= 0) return [];
-    const moves = [];
-    hexes.forEach((hex) => {
-      if (hex.passable === false) return;
-      if (hex.x === selectedHero.position.x && hex.y === selectedHero.position.y) return;
-      if (!isInRange(selectedHero.position, { x: hex.x, y: hex.y }, selectedHero.movement)) return;
-      if (heroes.some((h) => h.position.x === hex.x && h.position.y === hex.y && h.owner === selectedHero.owner)) return;
-      moves.push({ x: hex.x, y: hex.y });
-    });
-    return moves;
-  }, [selectedHero, hexes, heroes, isInRange]);
-  const attackTargets = useMemo(() => {
-    if (!selectedHero || selectedHero.movement <= 0) return [];
-    return heroes.filter((h) => h.owner !== selectedHero.owner).filter((h) => isInRange(selectedHero.position, h.position, selectedHero.movement)).map((h) => h.position);
-  }, [selectedHero, heroes, isInRange]);
-  const maxY = Math.max(...hexes.map((h) => h.y), 0);
-  const baseOffsetX = (maxY + 1) * (TILE_WIDTH * scale / 2);
-  const tileToScreen = useCallback(
-    (tx, ty) => isoToScreen(tx, ty, scale, baseOffsetX),
-    [scale, baseOffsetX]
-  );
-  const hoveredHex = useMemo(
-    () => hoveredTile ? hexes.find((h) => h.x === hoveredTile.x && h.y === hoveredTile.y) ?? null : null,
-    [hoveredTile, hexes]
-  );
-  const hoveredHero = useMemo(
-    () => hoveredTile ? heroes.find((h) => h.position.x === hoveredTile.x && h.position.y === hoveredTile.y) ?? null : null,
-    [hoveredTile, heroes]
-  );
-  const handleTileClick = useCallback((x, y) => {
-    if (movementAnimRef.current) return;
-    const hex = hexes.find((h) => h.x === x && h.y === y);
-    if (!hex) return;
-    if (selectedHero && validMoves.some((m) => m.x === x && m.y === y)) {
-      startMoveAnimation(selectedHero.id, { ...selectedHero.position }, { x, y }, () => {
-        onHeroMove?.(selectedHero.id, x, y);
-        if (hex.feature && hex.feature !== "none") {
-          onFeatureEnter?.(selectedHero.id, hex);
-        }
-      });
-      return;
-    }
-    const enemy = heroes.find((h) => h.position.x === x && h.position.y === y && h.owner === "enemy");
-    if (selectedHero && enemy && attackTargets.some((t) => t.x === x && t.y === y)) {
-      onBattleEncounter?.(selectedHero.id, enemy.id);
-    }
-  }, [hexes, heroes, selectedHero, validMoves, attackTargets, startMoveAnimation, onHeroMove, onFeatureEnter, onBattleEncounter]);
-  const handleUnitClick = useCallback((unitId) => {
-    const hero = heroes.find((h) => h.id === unitId);
-    if (hero && (hero.owner === "player" || allowMoveAllHeroes)) {
-      onHeroSelect?.(unitId);
+  return /* @__PURE__ */ jsx(
+    WorldMapBoard,
+    {
+      entity,
+      scale,
+      unitScale,
+      allowMoveAllHeroes,
+      heroSelectEvent: "HERO_SELECT",
+      heroMoveEvent: "HERO_MOVE",
+      battleEncounterEvent: "BATTLE_ENCOUNTER",
+      featureEnterEvent: "FEATURE_ENTER",
+      className
     }
-  }, [heroes, onHeroSelect, allowMoveAllHeroes]);
-  const selectHero = useCallback((id) => onHeroSelect?.(id), [onHeroSelect]);
-  const ctx = useMemo(
-    () => ({
-      hoveredTile,
-      hoveredHex,
-      hoveredHero,
-      selectedHero,
-      validMoves,
-      selectHero,
-      tileToScreen,
-      scale
-    }),
-    [hoveredTile, hoveredHex, hoveredHero, selectedHero, validMoves, selectHero, tileToScreen, scale]
   );
-  return /* @__PURE__ */ jsxs("div", { className: cn("world-map-template min-h-screen flex flex-col bg-[var(--color-background)]", className), children: [
-    header && header(ctx),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto p-4 relative", children: [
-        /* @__PURE__ */ jsx(
-          IsometricCanvas_default,
-          {
-            tiles,
-            units: isoUnits,
-            features,
-            selectedUnitId: selectedHeroId,
-            validMoves,
-            attackTargets,
-            hoveredTile,
-            onTileClick: handleTileClick,
-            onUnitClick: handleUnitClick,
-            onTileHover: (x, y) => setHoveredTile({ x, y }),
-            onTileLeave: () => setHoveredTile(null),
-            scale,
-            assetBaseUrl: assetManifest?.baseUrl,
-            assetManifest,
-            backgroundImage,
-            effectSpriteUrls,
-            resolveUnitFrame,
-            unitScale
-          }
-        ),
-        overlay && overlay(ctx)
-      ] }),
-      sidePanel && /* @__PURE__ */ jsx("div", { className: "w-80 shrink-0 border-l border-[var(--color-border)] bg-[var(--color-surface)] overflow-y-auto p-4", children: sidePanel(ctx) })
-    ] }),
-    footer && footer(ctx)
-  ] });
 }
 WorldMapTemplate.displayName = "WorldMapTemplate";
 
-export { Accordion, Card2 as ActionCard, Alert, AuthLayout, Avatar, Badge, BattleTemplate, Box, Breadcrumb, Button, ButtonGroup, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, CastleTemplate, Center, Chart, Checkbox, CodeViewer, ConditionalWrapper, ConfirmDialog, Container, ControlButton, CounterTemplate, CrudTemplate, DashboardGrid, DashboardLayout, DataTable, DetailPanel, DialogueBox, Divider, DocumentViewer, Drawer, DrawerSlot, EmptyState, ErrorState, FEATURE_COLORS, FLOOR_HEIGHT, FilterGroup, Flex, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, FormTemplate, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GraphCanvas, Grid2 as Grid, HStack, Header, Heading, HealthBar, Icon, Input, InputGroup, InventoryPanel, IsometricCanvas, Label, LawReferenceTooltip, List2 as List, ListTemplate, LoadingState, MasterDetail, MediaGallery, Menu2 as Menu, Meter, Modal, ModalSlot, Navigation, OrbitalVisualization, Overlay, PageHeader, Pagination, Popover, ProgressBar, Radio, RelationSelect, RepeatableFormSection, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScoreDisplay, SearchInput, Section, Select, SettingsTemplate, SidePanel, Sidebar, SignaturePad, SimpleGrid, SlotContentRenderer, Spacer, Spinner, Split, SplitPane, Sprite, Stack, StatCard, Switch, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, Table, Tabs, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, Timeline, Toast, ToastSlot, Tooltip, Typography, UISlotComponent, UISlotRenderer, VStack, ViolationAlert, WizardContainer, WizardNavigation, WizardProgress, WorldMapTemplate, createUnitAnimationState, drawSprite, getCurrentFrame, inferDirection, isoToScreen, resolveFrame, resolveSheetDirection, screenToIso, tickAnimationState, transitionAnimation, useCamera, useImageCache, useSpriteAnimations };
+export { Accordion, Card2 as ActionCard, Alert, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, Box, Breadcrumb, Button, ButtonGroup, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, CastleBoard, CastleTemplate, Center, Chart, Checkbox, CodeViewer, CollapsibleSection, ConditionalWrapper, ConfirmDialog, Container, ControlButton, CounterTemplate, CrudTemplate, DIAMOND_TOP_Y, DashboardGrid, DashboardLayout, DataTable, DetailPanel, DialogueBox, Divider, DocumentViewer, Drawer, DrawerSlot, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, ErrorState, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FilterGroup, Flex, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, FormTemplate, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GraphCanvas, Grid2 as Grid, HStack, Header, Heading, HealthBar, Icon, Input, InputGroup, InventoryPanel, IsometricCanvas, Label, LawReferenceTooltip, List2 as List, ListTemplate, LoadingState, MasterDetail, MediaGallery, Menu2 as Menu, Meter, Modal, ModalSlot, Navigation, OrbitalVisualization, Overlay, PageHeader, Pagination, PhysicsManager, Popover, ProgressBar, Radio, RelationSelect, RepeatableFormSection, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScoreDisplay, SearchInput, Section, Select, SettingsTemplate, SidePanel, Sidebar, SignaturePad, SimpleGrid, SlotContentRenderer, Spacer, Spinner, Split, SplitPane, Sprite, Stack, StatCard, StatusBar, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, Table, Tabs, TerrainPalette, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, Timeline, Toast, ToastSlot, Tooltip, Typography, UISlotComponent, UISlotRenderer, VStack, ViolationAlert, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, createUnitAnimationState, drawSprite, getCurrentFrame, inferDirection, isoToScreen, resolveFrame, resolveSheetDirection, screenToIso, tickAnimationState, transitionAnimation, useCamera, useImageCache, usePhysics2D, useSpriteAnimations };