@almadar/ui 5.63.2 → 5.65.0

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

@@ -6,6 +6,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { OrbitControls, Billboard, Grid, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
 import { createLogger } from '@almadar/logger';
 import { GLTFLoader as GLTFLoader$1 } from 'three/examples/jsm/loaders/GLTFLoader';
+import { clone } from 'three/examples/jsm/utils/SkeletonUtils';
 import { OrbitControls as OrbitControls$1 } from 'three/examples/jsm/controls/OrbitControls.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
@@ -368,7 +369,8 @@ function ModelLoader({
   const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
   const model = useMemo(() => {
     if (!loadedModel) return null;
-    const cloned = loadedModel.clone();
+    const cloned = clone(loadedModel);
+    cloned.updateMatrixWorld(true);
     cloned.traverse((child) => {
       if (child instanceof THREE6.Mesh) {
         child.castShadow = castShadow;
@@ -383,7 +385,8 @@ function ModelLoader({
     const size = new THREE6.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
-    return maxDim > 0 && Number.isFinite(maxDim) ? 1 / maxDim : 1;
+    if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
+    return 1 / maxDim;
   }, [model]);
   const scaleArray = useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { AssetUrl, EventEmit } from '@almadar/core';
+import type { IsometricTile, IsometricUnit, IsometricFeature } from './types/isometric';
+import type { DisplayStateProps } from '../../core/organisms/types';
+import type { IsometricCanvasProps } from '../molecules/IsometricCanvas';
+export interface HexStrategyBoardProps extends DisplayStateProps {
+    /** Hex grid tiles */
+    tiles?: IsometricTile[];
+    /** Units on the board */
+    units?: IsometricUnit[];
+    /** Features (resources, structures, etc.) on the board */
+    features?: IsometricFeature[];
+    /** Asset sprite manifest (same shape as IsometricCanvas.assetManifest) */
+    assetManifest?: IsometricCanvasProps['assetManifest'];
+    /** Base URL prepended to manifest sprite paths */
+    assetBaseUrl?: AssetUrl;
+    /** Render scale */
+    scale?: number;
+    /** Show minimap overlay */
+    showMinimap?: boolean;
+    /** Enable camera pan/zoom controls */
+    enableCamera?: boolean;
+    /** Declarative event: emits UI:{tileClickEvent} with { x, y } on tile click */
+    tileClickEvent?: EventEmit<{
+        x: number;
+        y: number;
+    }>;
+    /** Declarative event: emits UI:{unitClickEvent} with { unitId } on unit click */
+    unitClickEvent?: EventEmit<{
+        unitId: string;
+    }>;
+}
+export declare function HexStrategyBoard({ tiles, units, features, assetManifest, assetBaseUrl, scale, showMinimap, enableCamera, tileClickEvent, unitClickEvent, isLoading, error, className, }: HexStrategyBoardProps): React.ReactElement;
+export declare namespace HexStrategyBoard {
+    var displayName: string;
+}
+export default HexStrategyBoard;

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

@@ -18,6 +18,7 @@ export { useSpriteAnimations, type UseSpriteAnimationsResult, type UseSpriteAnim
 export { usePhysics2D, type UsePhysics2DOptions, type UsePhysics2DReturn, } from './hooks/usePhysics2D';
 export { PhysicsManager, type Physics2DState, type PhysicsBounds, type PhysicsConfig, } from './managers/PhysicsManager';
 export { isoToScreen, screenToIso, TILE_WIDTH, TILE_HEIGHT, FLOOR_HEIGHT, DIAMOND_TOP_Y, FEATURE_COLORS, } from './utils/isometric';
+export type { TileLayout } from './utils/isometric';
 export { inferDirection, resolveSheetDirection, getCurrentFrame, resolveFrame, createUnitAnimationState, transitionAnimation, tickAnimationState, } from './utils/spriteAnimation';
 export { SPRITE_SHEET_LAYOUT, SHEET_COLUMNS } from './utils/spriteSheetConstants';
 export { BattleBoard, type BattleBoardProps, type BattlePhase, type BattleSlotContext, } from './BattleBoard';
@@ -33,6 +34,7 @@ export { CityBuilderBoard, type CityBuilderBoardProps, } from './CityBuilderBoar
 export { GameBoard3D, type GameBoard3DProps, } from './GameBoard3D';
 export { VisualNovelBoard, type VisualNovelBoardProps, type VisualNovelNode, type VisualNovelChoice, } from './VisualNovelBoard';
 export { CardBattlerBoard, type CardBattlerBoardProps, type CardBattlerCard, } from './CardBattlerBoard';
+export { HexStrategyBoard, type HexStrategyBoardProps, } from './HexStrategyBoard';
 export { TraitStateViewer, type TraitStateViewerProps, type TraitStateMachineDefinition, type TraitTransition, } from './TraitStateViewer';
 export { TraitSlot, type TraitSlotProps, type SlotItemData, } from './TraitSlot';
 export { CollapsibleSection, EditorSlider, EditorSelect, EditorCheckbox, EditorTextInput, StatusBar, TerrainPalette, EditorToolbar, TERRAIN_COLORS, FEATURE_TYPES, type EditorMode, type CollapsibleSectionProps, type EditorSliderProps, type EditorSelectProps, type EditorCheckboxProps, type EditorTextInputProps, type StatusBarProps, type TerrainPaletteProps, type EditorToolbarProps, } from './editor';

package/dist/components/game/organisms/utils/isometric.d.ts

@@ -27,20 +27,32 @@ export declare const DIAMOND_TOP_Y = 374;
  * Feature type → fallback color mapping (when sprites not loaded).
  */
 export declare const FEATURE_COLORS: Record<string, string>;
+/**
+ * Tile layout mode. 'isometric' = 2:1 diamond projection (default).
+ * 'hex' = pointy-top offset-row hex grid.
+ *
+ * Hex constants (at scale=1):
+ *   w = TILE_WIDTH (256)   — horizontal cell width
+ *   h = FLOOR_HEIGHT (128) — vertical row stride (= w/2; hex row-to-row = h*0.75 = 96)
+ * Forward:  screenX = col*w + (row&1)*(w/2) + baseOffsetX
+ *           screenY = row * (h * 0.75)
+ * Inverse: row = round(screenY / (h*0.75)); col = round((screenX - (row&1)*(w/2) - baseOffsetX) / w)
+ */
+export type TileLayout = 'isometric' | 'hex';
 /**
  * Convert tile grid coordinates to screen pixel coordinates.
  *
- * Uses 2:1 diamond isometric projection:
- * - X increases to the lower-right
- * - Y increases to the lower-left
+ * For 'isometric' (default): 2:1 diamond projection.
+ * For 'hex': pointy-top offset-row projection (odd rows shifted right by w/2).
  *
- * @param tileX - Grid X coordinate
- * @param tileY - Grid Y coordinate
+ * @param tileX - Grid X (col) coordinate
+ * @param tileY - Grid Y (row) coordinate
  * @param scale - Render scale factor
  * @param baseOffsetX - Horizontal offset to center the grid
+ * @param layout - Tile layout mode (default: 'isometric')
  * @returns Screen position { x, y } of the tile's top-left corner
  */
-export declare function isoToScreen(tileX: number, tileY: number, scale: number, baseOffsetX: number): {
+export declare function isoToScreen(tileX: number, tileY: number, scale: number, baseOffsetX: number, layout?: TileLayout): {
     x: number;
     y: number;
 };
@@ -53,9 +65,10 @@ export declare function isoToScreen(tileX: number, tileY: number, scale: number,
  * @param screenY - Screen Y in pixels
  * @param scale - Render scale factor
  * @param baseOffsetX - Horizontal offset used in isoToScreen
+ * @param layout - Tile layout mode (default: 'isometric')
  * @returns Snapped grid position { x, y }
  */
-export declare function screenToIso(screenX: number, screenY: number, scale: number, baseOffsetX: number): {
+export declare function screenToIso(screenX: number, screenY: number, scale: number, baseOffsetX: number, layout?: TileLayout): {
     x: number;
     y: number;
 };

package/dist/components/index.cjs

@@ -45,6 +45,7 @@ var THREE3 = require('three');
 var GLTFLoader_js = require('three/examples/jsm/loaders/GLTFLoader.js');
 var OBJLoader_js = require('three/examples/jsm/loaders/OBJLoader.js');
 var GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader');
+var SkeletonUtils = require('three/examples/jsm/utils/SkeletonUtils');
 var fiber = require('@react-three/fiber');
 var drei = require('@react-three/drei');
 var patterns = require('@almadar/patterns');
@@ -9922,16 +9923,26 @@ var init_useUnitSpriteAtlas = __esm({
 });
 
 // components/game/organisms/utils/isometric.ts
-function isoToScreen(tileX, tileY, scale, baseOffsetX) {
+function isoToScreen(tileX, tileY, scale, baseOffsetX, layout = "isometric") {
   const scaledTileWidth = exports.TILE_WIDTH * scale;
   const scaledFloorHeight = exports.FLOOR_HEIGHT * scale;
+  if (layout === "hex") {
+    const screenX2 = tileX * scaledTileWidth + (tileY & 1) * (scaledTileWidth / 2) + baseOffsetX;
+    const screenY2 = tileY * (scaledFloorHeight * 0.75);
+    return { x: screenX2, y: screenY2 };
+  }
   const screenX = (tileX - tileY) * (scaledTileWidth / 2) + baseOffsetX;
   const screenY = (tileX + tileY) * (scaledFloorHeight / 2);
   return { x: screenX, y: screenY };
 }
-function screenToIso(screenX, screenY, scale, baseOffsetX) {
+function screenToIso(screenX, screenY, scale, baseOffsetX, layout = "isometric") {
   const scaledTileWidth = exports.TILE_WIDTH * scale;
   const scaledFloorHeight = exports.FLOOR_HEIGHT * scale;
+  if (layout === "hex") {
+    const row = Math.round(screenY / (scaledFloorHeight * 0.75));
+    const col = Math.round((screenX - (row & 1) * (scaledTileWidth / 2) - baseOffsetX) / scaledTileWidth);
+    return { x: col, y: row };
+  }
   const adjustedX = screenX - baseOffsetX;
   const tileX = (adjustedX / (scaledTileWidth / 2) + screenY / (scaledFloorHeight / 2)) / 2;
   const tileY = (screenY / (scaledFloorHeight / 2) - adjustedX / (scaledTileWidth / 2)) / 2;
@@ -9981,6 +9992,7 @@ function IsometricCanvas({
   tileHoverEvent,
   tileLeaveEvent,
   // Rendering options
+  tileLayout = "isometric",
   scale = 0.4,
   debug: debug2 = false,
   backgroundImage = "",
@@ -10050,13 +10062,17 @@ function IsometricCanvas({
   );
   const sortedTiles = React79.useMemo(() => {
     const tiles = [...tilesProp];
-    tiles.sort((a, b) => {
-      const depthA = a.x + a.y;
-      const depthB = b.x + b.y;
-      return depthA !== depthB ? depthA - depthB : a.y - b.y;
-    });
+    if (tileLayout === "hex") {
+      tiles.sort((a, b) => a.y !== b.y ? a.y - b.y : a.x - b.x);
+    } else {
+      tiles.sort((a, b) => {
+        const depthA = a.x + a.y;
+        const depthB = b.x + b.y;
+        return depthA !== depthB ? depthA - depthB : a.y - b.y;
+      });
+    }
     return tiles;
-  }, [tilesProp]);
+  }, [tilesProp, tileLayout]);
   const gridWidth = React79.useMemo(() => {
     if (sortedTiles.length === 0) return 0;
     return Math.max(...sortedTiles.map((t2) => t2.x)) + 1;
@@ -10170,7 +10186,7 @@ function IsometricCanvas({
     miniCanvas.width = mW;
     miniCanvas.height = mH;
     mCtx.clearRect(0, 0, mW, mH);
-    const allScreenPos = sortedTiles.map((t2) => isoToScreen(t2.x, t2.y, scale, baseOffsetX));
+    const allScreenPos = sortedTiles.map((t2) => isoToScreen(t2.x, t2.y, scale, baseOffsetX, tileLayout));
     const minX = Math.min(...allScreenPos.map((p2) => p2.x));
     const maxX = Math.max(...allScreenPos.map((p2) => p2.x + scaledTileWidth));
     const minY = Math.min(...allScreenPos.map((p2) => p2.y));
@@ -10181,7 +10197,7 @@ function IsometricCanvas({
     const offsetMx = (mW - worldW * scaleM) / 2;
     const offsetMy = (mH - worldH * scaleM) / 2;
     for (const tile of sortedTiles) {
-      const pos = isoToScreen(tile.x, tile.y, scale, baseOffsetX);
+      const pos = isoToScreen(tile.x, tile.y, scale, baseOffsetX, tileLayout);
       const mx = (pos.x - minX) * scaleM + offsetMx;
       const my = (pos.y - minY) * scaleM + offsetMy;
       const mTileW = scaledTileWidth * scaleM;
@@ -10197,7 +10213,7 @@ function IsometricCanvas({
     }
     for (const unit of units) {
       if (!unit.position) continue;
-      const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX);
+      const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX, tileLayout);
       const mx = (pos.x + scaledTileWidth / 2 - minX) * scaleM + offsetMx;
       const my = (pos.y + scaledTileHeight / 2 - minY) * scaleM + offsetMy;
       mCtx.fillStyle = unit.team === "player" ? "#60a5fa" : unit.team === "enemy" ? "#f87171" : "#9ca3af";
@@ -10213,7 +10229,7 @@ function IsometricCanvas({
     mCtx.strokeStyle = "rgba(255, 255, 255, 0.8)";
     mCtx.lineWidth = 1;
     mCtx.strokeRect(vLeft, vTop, vW, vH);
-  }, [showMinimap, sortedTiles, units, scale, baseOffsetX, scaledTileWidth, scaledTileHeight, scaledFloorHeight, viewportSize, cameraRef]);
+  }, [showMinimap, sortedTiles, units, tileLayout, scale, baseOffsetX, scaledTileWidth, scaledTileHeight, scaledFloorHeight, viewportSize, cameraRef]);
   const draw = React79.useCallback((animTime) => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -10253,7 +10269,7 @@ function IsometricCanvas({
     const visTop = cam.y - viewportSize.height / cam.zoom;
     const visBottom = cam.y + viewportSize.height * 2 / cam.zoom;
     for (const tile of sortedTiles) {
-      const pos = isoToScreen(tile.x, tile.y, scale, baseOffsetX);
+      const pos = isoToScreen(tile.x, tile.y, scale, baseOffsetX, tileLayout);
       if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
         continue;
       }
@@ -10333,12 +10349,13 @@ function IsometricCanvas({
       }
     }
     const sortedFeatures = [...features].sort((a, b) => {
+      if (tileLayout === "hex") return a.y !== b.y ? a.y - b.y : a.x - b.x;
       const depthA = a.x + a.y;
       const depthB = b.x + b.y;
       return depthA !== depthB ? depthA - depthB : a.y - b.y;
     });
     for (const feature of sortedFeatures) {
-      const pos = isoToScreen(feature.x, feature.y, scale, baseOffsetX);
+      const pos = isoToScreen(feature.x, feature.y, scale, baseOffsetX, tileLayout);
       if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
         continue;
       }
@@ -10373,12 +10390,13 @@ function IsometricCanvas({
     }
     const unitsWithPosition = units.filter((u) => !!u.position);
     const sortedUnits = [...unitsWithPosition].sort((a, b) => {
+      if (tileLayout === "hex") return a.position.y !== b.position.y ? a.position.y - b.position.y : a.position.x - b.position.x;
       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;
     });
     for (const unit of sortedUnits) {
-      const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX);
+      const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX, tileLayout);
       if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
         continue;
       }
@@ -10398,7 +10416,7 @@ function IsometricCanvas({
         drawH = maxUnitW / ar;
       }
       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 ghostPos = isoToScreen(unit.previousPosition.x, unit.previousPosition.y, scale, baseOffsetX, tileLayout);
         const ghostCenterX = ghostPos.x + scaledTileWidth / 2;
         const ghostGroundY = ghostPos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
         ctx.save();
@@ -10527,6 +10545,7 @@ function IsometricCanvas({
     units,
     features,
     selectedUnitId,
+    tileLayout,
     scale,
     debug2,
     resolveTerrainSpriteUrl,
@@ -10555,14 +10574,14 @@ function IsometricCanvas({
     if (!selectedUnitId) return;
     const unit = units.find((u) => u.id === selectedUnitId);
     if (!unit?.position) return;
-    const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX);
+    const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX, tileLayout);
     const centerX = pos.x + scaledTileWidth / 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, scaledDiamondTopY, scaledFloorHeight, viewportSize, targetCameraRef]);
+  }, [selectedUnitId, units, tileLayout, scale, baseOffsetX, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, viewportSize, targetCameraRef]);
   React79.useEffect(() => {
     const hasAnimations = units.length > 0 || validMoves.length > 0 || attackTargets.length > 0 || selectedUnitId != null || targetCameraRef.current != null || hasActiveEffects2 || pendingCount > 0 || atlasPending > 0;
     draw(animTimeRef.current);
@@ -10595,13 +10614,13 @@ function IsometricCanvas({
     const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
     const adjustedX = world.x - scaledTileWidth / 2;
     const adjustedY = world.y - scaledDiamondTopY - scaledFloorHeight / 2;
-    const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX);
+    const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX, tileLayout);
     const tileExists = tilesProp.some((t2) => t2.x === isoPos.x && t2.y === isoPos.y);
     if (tileExists) {
       if (tileHoverEvent) eventBus.emit(`UI:${tileHoverEvent}`, { x: isoPos.x, y: isoPos.y });
       onTileHover?.(isoPos.x, isoPos.y);
     }
-  }, [onTileHover, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, scale, baseOffsetX, tilesProp, tileHoverEvent, eventBus]);
+  }, [onTileHover, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, tileLayout, scale, baseOffsetX, tilesProp, tileHoverEvent, eventBus]);
   const handleCanvasPointerUp = React79.useCallback((e) => {
     singlePointerActiveRef.current = false;
     if (enableCamera) handlePointerUp();
@@ -10610,7 +10629,7 @@ function IsometricCanvas({
     const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
     const adjustedX = world.x - scaledTileWidth / 2;
     const adjustedY = world.y - scaledDiamondTopY - scaledFloorHeight / 2;
-    const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX);
+    const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX, tileLayout);
     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 });
@@ -10622,7 +10641,7 @@ function IsometricCanvas({
         onTileClick?.(isoPos.x, isoPos.y);
       }
     }
-  }, [enableCamera, handlePointerUp, dragDistance, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, scale, baseOffsetX, units, tilesProp, onUnitClick, onTileClick, unitClickEvent, tileClickEvent, eventBus]);
+  }, [enableCamera, handlePointerUp, dragDistance, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, tileLayout, scale, baseOffsetX, units, tilesProp, onUnitClick, onTileClick, unitClickEvent, tileClickEvent, eventBus]);
   const handleCanvasPointerLeave = React79.useCallback(() => {
     handleMouseLeave();
     if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
@@ -44014,7 +44033,8 @@ function ModelLoader({
   const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
   const model = React79.useMemo(() => {
     if (!loadedModel) return null;
-    const cloned = loadedModel.clone();
+    const cloned = SkeletonUtils.clone(loadedModel);
+    cloned.updateMatrixWorld(true);
     cloned.traverse((child) => {
       if (child instanceof THREE3__namespace.Mesh) {
         child.castShadow = castShadow;
@@ -44029,7 +44049,8 @@ function ModelLoader({
     const size = new THREE3__namespace.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
-    return maxDim > 0 && Number.isFinite(maxDim) ? 1 / maxDim : 1;
+    if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
+    return 1 / maxDim;
   }, [model]);
   const scaleArray = React79.useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;
@@ -45311,6 +45332,48 @@ var init_HeroOrganism = __esm({
     _HeroClickInterceptor.displayName = "_HeroClickInterceptor";
   }
 });
+function HexStrategyBoard({
+  tiles,
+  units,
+  features,
+  assetManifest,
+  assetBaseUrl,
+  scale = 0.45,
+  showMinimap = true,
+  enableCamera = true,
+  tileClickEvent,
+  unitClickEvent,
+  isLoading,
+  error,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("hex-strategy-board relative w-full h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    IsometricCanvas_default,
+    {
+      tileLayout: "hex",
+      tiles,
+      units,
+      features,
+      assetManifest,
+      assetBaseUrl,
+      scale,
+      showMinimap,
+      enableCamera,
+      tileClickEvent,
+      unitClickEvent,
+      isLoading,
+      error
+    }
+  ) });
+}
+var init_HexStrategyBoard = __esm({
+  "components/game/organisms/HexStrategyBoard.tsx"() {
+    "use client";
+    init_cn();
+    init_IsometricCanvas();
+    HexStrategyBoard.displayName = "HexStrategyBoard";
+  }
+});
 exports.LandingPageTemplate = void 0;
 var init_LandingPageTemplate = __esm({
   "components/marketing/templates/LandingPageTemplate.tsx"() {
@@ -53619,6 +53682,7 @@ var init_component_registry_generated = __esm({
     init_HealthPanel();
     init_HeroOrganism();
     init_HeroSection();
+    init_HexStrategyBoard();
     init_Icon();
     init_InfiniteScrollSentinel();
     init_Input();
@@ -53955,6 +54019,7 @@ var init_component_registry_generated = __esm({
       "HealthPanel": HealthPanel,
       "HeroOrganism": exports.HeroOrganism,
       "HeroSection": exports.HeroSection,
+      "HexStrategyBoard": HexStrategyBoard,
       "Icon": exports.Icon,
       "InfiniteScrollSentinel": exports.InfiniteScrollSentinel,
       "Input": exports.Input,
@@ -55600,6 +55665,7 @@ init_CityBuilderBoard();
 init_GameBoard3D();
 init_VisualNovelBoard();
 init_CardBattlerBoard();
+init_HexStrategyBoard();
 init_TraitStateViewer();
 init_TraitSlot();
 
@@ -56241,6 +56307,7 @@ exports.GameMenu = GameMenu;
 exports.GameOverScreen = GameOverScreen;
 exports.HealthBar = HealthBar;
 exports.HealthPanel = HealthPanel;
+exports.HexStrategyBoard = HexStrategyBoard;
 exports.InventoryGrid = InventoryGrid;
 exports.InventoryPanel = InventoryPanel;
 exports.IsometricCanvas = IsometricCanvas;