@almadar/ui 5.64.0 → 5.65.0

package/dist/avl/index.cjs

@@ -14723,16 +14723,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 = TILE_WIDTH * scale;
   const scaledFloorHeight = 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 = TILE_WIDTH * scale;
   const scaledFloorHeight = 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;
@@ -14782,6 +14792,7 @@ function IsometricCanvas({
   tileHoverEvent,
   tileLeaveEvent,
   // Rendering options
+  tileLayout = "isometric",
   scale = 0.4,
   debug: debug2 = false,
   backgroundImage = "",
@@ -14851,13 +14862,17 @@ function IsometricCanvas({
   );
   const sortedTiles = React93.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 = React93.useMemo(() => {
     if (sortedTiles.length === 0) return 0;
     return Math.max(...sortedTiles.map((t2) => t2.x)) + 1;
@@ -14971,7 +14986,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));
@@ -14982,7 +14997,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;
@@ -14998,7 +15013,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";
@@ -15014,7 +15029,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 = React93.useCallback((animTime) => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -15054,7 +15069,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;
       }
@@ -15134,12 +15149,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;
       }
@@ -15174,12 +15190,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;
       }
@@ -15199,7 +15216,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();
@@ -15328,6 +15345,7 @@ function IsometricCanvas({
     units,
     features,
     selectedUnitId,
+    tileLayout,
     scale,
     debug2,
     resolveTerrainSpriteUrl,
@@ -15356,14 +15374,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]);
   React93.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);
@@ -15396,13 +15414,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 = React93.useCallback((e) => {
     singlePointerActiveRef.current = false;
     if (enableCamera) handlePointerUp();
@@ -15411,7 +15429,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 });
@@ -15423,7 +15441,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 = React93.useCallback(() => {
     handleMouseLeave();
     if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
@@ -46760,6 +46778,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";
+  }
+});
 var LandingPageTemplate;
 var init_LandingPageTemplate = __esm({
   "components/marketing/templates/LandingPageTemplate.tsx"() {
@@ -54588,6 +54648,7 @@ var init_component_registry_generated = __esm({
     init_HealthPanel();
     init_HeroOrganism();
     init_HeroSection();
+    init_HexStrategyBoard();
     init_Icon();
     init_InfiniteScrollSentinel();
     init_Input();
@@ -54924,6 +54985,7 @@ var init_component_registry_generated = __esm({
       "HealthPanel": HealthPanel,
       "HeroOrganism": HeroOrganism,
       "HeroSection": HeroSection,
+      "HexStrategyBoard": HexStrategyBoard,
       "Icon": Icon,
       "InfiniteScrollSentinel": InfiniteScrollSentinel,
       "Input": Input,

package/dist/avl/index.js

@@ -14676,16 +14676,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 = TILE_WIDTH * scale;
   const scaledFloorHeight = 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 = TILE_WIDTH * scale;
   const scaledFloorHeight = 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;
@@ -14735,6 +14745,7 @@ function IsometricCanvas({
   tileHoverEvent,
   tileLeaveEvent,
   // Rendering options
+  tileLayout = "isometric",
   scale = 0.4,
   debug: debug2 = false,
   backgroundImage = "",
@@ -14804,13 +14815,17 @@ function IsometricCanvas({
   );
   const sortedTiles = 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 = useMemo(() => {
     if (sortedTiles.length === 0) return 0;
     return Math.max(...sortedTiles.map((t2) => t2.x)) + 1;
@@ -14924,7 +14939,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));
@@ -14935,7 +14950,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;
@@ -14951,7 +14966,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";
@@ -14967,7 +14982,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 = useCallback((animTime) => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -15007,7 +15022,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;
       }
@@ -15087,12 +15102,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;
       }
@@ -15127,12 +15143,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;
       }
@@ -15152,7 +15169,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();
@@ -15281,6 +15298,7 @@ function IsometricCanvas({
     units,
     features,
     selectedUnitId,
+    tileLayout,
     scale,
     debug2,
     resolveTerrainSpriteUrl,
@@ -15309,14 +15327,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]);
   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);
@@ -15349,13 +15367,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 = useCallback((e) => {
     singlePointerActiveRef.current = false;
     if (enableCamera) handlePointerUp();
@@ -15364,7 +15382,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 });
@@ -15376,7 +15394,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 = useCallback(() => {
     handleMouseLeave();
     if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
@@ -46713,6 +46731,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__ */ jsx("div", { className: cn("hex-strategy-board relative w-full h-full", className), children: /* @__PURE__ */ 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";
+  }
+});
 var LandingPageTemplate;
 var init_LandingPageTemplate = __esm({
   "components/marketing/templates/LandingPageTemplate.tsx"() {
@@ -54541,6 +54601,7 @@ var init_component_registry_generated = __esm({
     init_HealthPanel();
     init_HeroOrganism();
     init_HeroSection();
+    init_HexStrategyBoard();
     init_Icon();
     init_InfiniteScrollSentinel();
     init_Input();
@@ -54877,6 +54938,7 @@ var init_component_registry_generated = __esm({
       "HealthPanel": HealthPanel,
       "HeroOrganism": HeroOrganism,
       "HeroSection": HeroSection,
+      "HexStrategyBoard": HexStrategyBoard,
       "Icon": Icon,
       "InfiniteScrollSentinel": InfiniteScrollSentinel,
       "Input": Input,

package/dist/components/game/molecules/IsometricCanvas.d.ts

@@ -27,6 +27,7 @@ import * as React from 'react';
 import type { AssetUrl, EventEmit } from '@almadar/core';
 import type { IsometricTile, IsometricUnit, IsometricFeature } from '../organisms/types/isometric';
 import type { ResolvedFrame } from '../organisms/types/spriteAnimation';
+import type { TileLayout } from '../organisms/utils/isometric';
 import type { UiError } from '../../core/atoms/types';
 /** Event Contract:
  *  Emits: UI:TILE_CLICK
@@ -79,6 +80,8 @@ export interface IsometricCanvasProps {
     }>;
     /** Declarative event: emits UI:{tileLeaveEvent} with {} on tile leave */
     tileLeaveEvent?: EventEmit<Record<string, never>>;
+    /** Tile layout projection: 'isometric' (default 2:1 diamond) or 'hex' (pointy-top offset rows) */
+    tileLayout?: TileLayout;
     /** Render scale (0.4 = 40% zoom) */
     scale?: number;
     /** Show debug grid lines and coordinates */
@@ -129,7 +132,7 @@ export interface IsometricCanvasProps {
         effects?: Record<string, string>;
     };
 }
-export declare function IsometricCanvas({ className, isLoading, error, tiles: _tilesPropRaw, units: _unitsPropRaw, features: _featuresPropRaw, selectedUnitId, validMoves, attackTargets, hoveredTile, onTileClick, onUnitClick, onTileHover, onTileLeave, tileClickEvent, unitClickEvent, tileHoverEvent, tileLeaveEvent, scale, debug, backgroundImage, showMinimap, enableCamera, unitScale, spriteHeightRatio, spriteMaxWidthRatio, getTerrainSprite, getFeatureSprite, getUnitSprite, resolveUnitFrame, effectSpriteUrls, onDrawEffects, hasActiveEffects, diamondTopY: diamondTopYProp, assetBaseUrl, assetManifest, }: IsometricCanvasProps): React.JSX.Element;
+export declare function IsometricCanvas({ className, isLoading, error, tiles: _tilesPropRaw, units: _unitsPropRaw, features: _featuresPropRaw, selectedUnitId, validMoves, attackTargets, hoveredTile, onTileClick, onUnitClick, onTileHover, onTileLeave, tileClickEvent, unitClickEvent, tileHoverEvent, tileLeaveEvent, tileLayout, scale, debug, backgroundImage, showMinimap, enableCamera, unitScale, spriteHeightRatio, spriteMaxWidthRatio, getTerrainSprite, getFeatureSprite, getUnitSprite, resolveUnitFrame, effectSpriteUrls, onDrawEffects, hasActiveEffects, diamondTopY: diamondTopYProp, assetBaseUrl, assetManifest, }: IsometricCanvasProps): React.JSX.Element;
 export declare namespace IsometricCanvas {
     var displayName: string;
 }

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

@@ -28,4 +28,5 @@ export { GameMenu, type GameMenuProps, type MenuOption } from './GameMenu';
 export { GameOverScreen, type GameOverScreenProps, type GameOverStat, type GameOverAction } from './GameOverScreen';
 export { PlatformerCanvas, type PlatformerCanvasProps, type PlatformerPlatform, type PlatformerPlayer } from './PlatformerCanvas';
 export { IsometricCanvas, type IsometricCanvasProps } from './IsometricCanvas';
+export type { TileLayout } from '../organisms/utils/isometric';
 export type { IsometricTile, IsometricUnit, IsometricFeature } from '../organisms/types/isometric';

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';