@almadar/ui 5.64.0 → 5.67.0

package/dist/avl/index.cjs

@@ -11802,6 +11802,8 @@ var init_DialogueBubble = __esm({
 function ChoiceButton({
   text = "Charge forward into the fray",
   index,
+  assetUrl,
+  icon,
   disabled = false,
   selected = false,
   onClick,
@@ -11834,6 +11836,23 @@ function ChoiceButton({
             ]
           }
         ),
+        assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: assetUrl,
+            alt: "",
+            width: 16,
+            height: 16,
+            style: { imageRendering: "pixelated", objectFit: "contain" },
+            className: "flex-shrink-0"
+          }
+        ) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-sm", children: typeof icon === "string" ? (() => {
+          const I = resolveIcon(icon);
+          return I ? /* @__PURE__ */ jsxRuntime.jsx(I, { className: "w-4 h-4" }) : null;
+        })() : /* @__PURE__ */ (() => {
+          const I = icon;
+          return /* @__PURE__ */ jsxRuntime.jsx(I, { className: "w-4 h-4" });
+        })() }) : null,
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm leading-snug", children: text })
       ]
     }
@@ -11842,6 +11861,7 @@ function ChoiceButton({
 var init_ChoiceButton = __esm({
   "components/game/atoms/ChoiceButton.tsx"() {
     init_cn();
+    init_Icon();
     ChoiceButton.displayName = "ChoiceButton";
   }
 });
@@ -14723,16 +14743,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 +14812,7 @@ function IsometricCanvas({
   tileHoverEvent,
   tileLeaveEvent,
   // Rendering options
+  tileLayout = "isometric",
   scale = 0.4,
   debug: debug2 = false,
   backgroundImage = "",
@@ -14851,13 +14882,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,18 +15006,19 @@ 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));
-    const maxY = Math.max(...allScreenPos.map((p2) => p2.y + scaledTileHeight));
+    const tileBottomExtent = tileLayout === "hex" ? scaledTileWidth : scaledTileHeight;
+    const maxY = Math.max(...allScreenPos.map((p2) => p2.y + tileBottomExtent));
     const worldW = maxX - minX;
     const worldH = maxY - minY;
     const scaleM = Math.min(mW / worldW, mH / worldH) * 0.9;
     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 +15034,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 +15050,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 +15090,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;
       }
@@ -15067,7 +15103,7 @@ function IsometricCanvas({
           const drawW = scaledTileWidth;
           const drawH = scaledTileWidth * (img.naturalHeight / img.naturalWidth);
           const drawX = pos.x;
-          const drawY = pos.y + scaledTileHeight - drawH;
+          const drawY = tileLayout === "hex" ? pos.y : pos.y + scaledTileHeight - drawH;
           ctx.drawImage(img, drawX, drawY, drawW, drawH);
         }
       } else {
@@ -15134,12 +15170,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 +15211,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 +15237,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 +15366,7 @@ function IsometricCanvas({
     units,
     features,
     selectedUnitId,
+    tileLayout,
     scale,
     debug2,
     resolveTerrainSpriteUrl,
@@ -15356,14 +15395,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 +15435,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 +15450,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 +15462,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}`, {});
@@ -30987,6 +31026,7 @@ function PowerupSlots({
       /* @__PURE__ */ jsxRuntime.jsx(
         ItemSlot,
         {
+          assetUrl: powerup.assetUrl,
           icon: powerup.icon,
           label: powerup.label,
           rarity: "uncommon",
@@ -31236,13 +31276,26 @@ function HealthPanel({
             )
           }
         ),
-        effects && effects.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center gap-1 flex-wrap", children: effects.map((effect, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        effects && effects.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center gap-1 flex-wrap", children: effects.map((effect, i) => /* @__PURE__ */ jsxRuntime.jsxs(
           Badge,
           {
             variant: effectVariantMap[effect.variant ?? "neutral"],
             size: "sm",
-            icon: effect.icon,
-            children: effect.label
+            icon: effect.assetUrl ? void 0 : effect.icon,
+            children: [
+              effect.assetUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: effect.assetUrl,
+                  alt: "",
+                  width: 12,
+                  height: 12,
+                  style: { imageRendering: "pixelated", objectFit: "contain" },
+                  className: "flex-shrink-0 inline-block"
+                }
+              ),
+              effect.label
+            ]
           },
           i
         )) })
@@ -31425,15 +31478,28 @@ function TurnPanel({
             activeTeam
           }
         ),
-        actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center gap-1.5 ml-auto", children: actions.map((action, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center gap-1.5 ml-auto", children: actions.map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
           Button,
           {
             variant: "ghost",
             size: "sm",
             disabled: action.disabled,
-            leftIcon: action.icon,
+            leftIcon: action.assetUrl ? void 0 : action.icon,
             onClick: () => handleAction(action.event),
-            children: action.label
+            children: [
+              action.assetUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: action.assetUrl,
+                  alt: "",
+                  width: 14,
+                  height: 14,
+                  style: { imageRendering: "pixelated", objectFit: "contain" },
+                  className: "flex-shrink-0"
+                }
+              ),
+              action.label
+            ]
           },
           i
         )) })
@@ -45940,9 +46006,9 @@ var init_GameCanvas3D2 = __esm({
             const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
             const hasAtlas = unitAtlasUrl(unit) !== null;
             const initialFrame = hasAtlas ? resolveUnitFrame(unit.id) : null;
-            const modelScale = UNIT_BASE_MODEL_SCALE * unitScale;
-            const billboardHeight = UNIT_BASE_BILLBOARD_HEIGHT * unitScale;
-            const primitiveRadius = UNIT_BASE_PRIMITIVE_RADIUS * unitScale;
+            const modelScale = UNIT_BASE_MODEL_SCALE * unitScale * gridConfig.cellSize;
+            const billboardHeight = UNIT_BASE_BILLBOARD_HEIGHT * unitScale * gridConfig.cellSize;
+            const primitiveRadius = UNIT_BASE_PRIMITIVE_RADIUS * unitScale * gridConfig.cellSize;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "group",
               {
@@ -45989,7 +46055,7 @@ var init_GameCanvas3D2 = __esm({
                       /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
                     ] })
                   ] }),
-                  unit.health !== void 0 && unit.maxHealth !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("group", { position: [0, 1.2, 0], children: [
+                  unit.health !== void 0 && unit.maxHealth !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("group", { position: [0, billboardHeight, 0], children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [-0.25, 0, 0], children: [
                       /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [0.5, 0.05] }),
                       /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: 3355443 })
@@ -46018,7 +46084,7 @@ var init_GameCanvas3D2 = __esm({
               }
             );
           },
-          [selectedUnitId, handleUnitClick, resolveUnitFrame, unitScale]
+          [selectedUnitId, handleUnitClick, resolveUnitFrame, unitScale, gridConfig]
         );
         const DefaultFeatureRenderer = React93.useCallback(
           ({
@@ -46106,7 +46172,7 @@ var init_GameCanvas3D2 = __esm({
               {
                 ref: containerRef,
                 className: cn("game-canvas-3d relative w-full overflow-hidden", className),
-                style: { height: "85vh" },
+                style: { flex: "1 1 0", minHeight: "400px" },
                 "data-orientation": orientation,
                 "data-camera-mode": cameraMode,
                 "data-overlay": overlay,
@@ -46406,13 +46472,39 @@ var init_GameBoard3D = __esm({
     GameBoard3D.displayName = "GameBoard3D";
   }
 });
-var GameShell;
+function getSlotContentRenderer2() {
+  if (_scr) return _scr;
+  const mod = (init_UISlotRenderer(), __toCommonJS(UISlotRenderer_exports));
+  _scr = mod.SlotContentRenderer;
+  return _scr;
+}
+function resolveDescriptor(value, idPrefix) {
+  if (value === null || value === void 0) return value;
+  if (React93__namespace.default.isValidElement(value)) return value;
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return value;
+  if (Array.isArray(value)) {
+    return value.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(React93__namespace.default.Fragment, { children: resolveDescriptor(item, `${idPrefix}-${i}`) }, i));
+  }
+  if (typeof value === "object") {
+    const rec = value;
+    if (typeof rec.type === "string" && patterns.getComponentForPattern(rec.type) !== null) {
+      const { type, props: nestedProps, _id, ...flatProps } = rec;
+      const resolvedProps = nestedProps !== void 0 ? nestedProps : flatProps;
+      const content = { id: _id ?? idPrefix, pattern: type, props: resolvedProps, priority: 0 };
+      const SCR = getSlotContentRenderer2();
+      return /* @__PURE__ */ jsxRuntime.jsx(SCR, { content, onDismiss: () => void 0 });
+    }
+  }
+  return null;
+}
+var _scr, GameShell;
 var init_GameShell = __esm({
   "components/game/templates/GameShell.tsx"() {
     init_cn();
     init_Box();
     init_Stack();
     init_Typography();
+    _scr = null;
     GameShell = ({
       appName = "Game",
       hud,
@@ -46461,7 +46553,7 @@ var init_GameShell = __esm({
                       children: appName
                     }
                   ),
-                  hud && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "game-shell__hud", children: hud })
+                  hud && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "game-shell__hud", children: resolveDescriptor(hud, "gs-hud") })
                 ]
               }
             ),
@@ -46474,7 +46566,7 @@ var init_GameShell = __esm({
                   overflow: "hidden",
                   position: "relative"
                 },
-                children
+                children: resolveDescriptor(children, "gs-children")
               }
             )
           ]
@@ -46484,7 +46576,32 @@ var init_GameShell = __esm({
     GameShell.displayName = "GameShell";
   }
 });
-var GameTemplate;
+function getSlotContentRenderer3() {
+  if (_scr2) return _scr2;
+  const mod = (init_UISlotRenderer(), __toCommonJS(UISlotRenderer_exports));
+  _scr2 = mod.SlotContentRenderer;
+  return _scr2;
+}
+function resolveDescriptor2(value, idPrefix) {
+  if (value === null || value === void 0) return value;
+  if (React93__namespace.default.isValidElement(value)) return value;
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return value;
+  if (Array.isArray(value)) {
+    return value.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(React93__namespace.default.Fragment, { children: resolveDescriptor2(item, `${idPrefix}-${i}`) }, i));
+  }
+  if (typeof value === "object") {
+    const rec = value;
+    if (typeof rec.type === "string" && patterns.getComponentForPattern(rec.type) !== null) {
+      const { type, props: nestedProps, _id, ...flatProps } = rec;
+      const resolvedProps = nestedProps !== void 0 ? nestedProps : flatProps;
+      const content = { id: _id ?? idPrefix, pattern: type, props: resolvedProps, priority: 0 };
+      const SCR = getSlotContentRenderer3();
+      return /* @__PURE__ */ jsxRuntime.jsx(SCR, { content, onDismiss: () => void 0 });
+    }
+  }
+  return null;
+}
+var _scr2, GameTemplate;
 var init_GameTemplate = __esm({
   "components/game/templates/GameTemplate.tsx"() {
     init_cn();
@@ -46492,6 +46609,7 @@ var init_GameTemplate = __esm({
     init_Stack();
     init_Typography();
     init_Button();
+    _scr2 = null;
     GameTemplate = ({
       entity,
       title = "Game",
@@ -46559,13 +46677,13 @@ var init_GameTemplate = __esm({
                   fullWidth: true,
                   className: "flex-1 bg-muted",
                   children: [
-                    children,
+                    resolveDescriptor2(children, "gt-children"),
                     hud && /* @__PURE__ */ jsxRuntime.jsx(
                       Box,
                       {
                         position: "absolute",
                         className: "top-0 left-0 right-0 pointer-events-none",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: "md", className: "pointer-events-auto w-fit", children: hud })
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: "md", className: "pointer-events-auto w-fit", children: resolveDescriptor2(hud, "gt-hud") })
                       }
                     )
                   ]
@@ -46590,7 +46708,7 @@ var init_GameTemplate = __esm({
                       children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h6", children: "Debug Panel" })
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: "md", children: debugPanel })
+                  /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: "md", children: resolveDescriptor2(debugPanel, "gt-debug") })
                 ]
               }
             )
@@ -46760,6 +46878,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 +54748,7 @@ var init_component_registry_generated = __esm({
     init_HealthPanel();
     init_HeroOrganism();
     init_HeroSection();
+    init_HexStrategyBoard();
     init_Icon();
     init_InfiniteScrollSentinel();
     init_Input();
@@ -54924,6 +55085,7 @@ var init_component_registry_generated = __esm({
       "HealthPanel": HealthPanel,
       "HeroOrganism": HeroOrganism,
       "HeroSection": HeroSection,
+      "HexStrategyBoard": HexStrategyBoard,
       "Icon": Icon,
       "InfiniteScrollSentinel": InfiniteScrollSentinel,
       "Input": Input,
@@ -55125,7 +55287,7 @@ function getSlotFallback(slot, config) {
   const variant = SLOT_SKELETON_MAP[slot] ?? "text";
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant });
 }
-function getComponentForPattern(patternType) {
+function getComponentForPattern3(patternType) {
   const mapping = patterns.getComponentForPattern(patternType);
   if (!mapping) {
     return null;
@@ -55756,7 +55918,8 @@ function SlotContentRenderer({
       entityDef = schemaCtx.entities.get(linkedEntity);
     }
   }
-  const PatternComponent = getComponentForPattern(content.pattern);
+  const orbitalName = schemaCtx && content.sourceTrait !== void 0 ? schemaCtx.orbitalsByTrait.get(content.sourceTrait) : void 0;
+  const PatternComponent = getComponentForPattern3(content.pattern);
   if (PatternComponent) {
     const childrenConfig = content.props.children;
     const isSingleChild = typeof childrenConfig === "string" || typeof childrenConfig === "object" && childrenConfig !== null && !Array.isArray(childrenConfig) && "type" in childrenConfig;
@@ -55854,6 +56017,7 @@ function SlotContentRenderer({
         "data-orb-entity": content.entity,
         "data-orb-path": myPath,
         "data-orb-pattern": content.pattern,
+        "data-orb-orbital": orbitalName,
         children: renderedChildren !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(PatternComponent, { ...finalProps, children: renderedChildren }) : /* @__PURE__ */ jsxRuntime.jsx(PatternComponent, { ...finalProps })
       }
     );
@@ -55873,6 +56037,7 @@ function SlotContentRenderer({
       "data-orb-entity": content.entity,
       "data-orb-path": patternPath ?? "root",
       "data-orb-pattern": content.pattern,
+      "data-orb-orbital": orbitalName,
       children: content.props.children ?? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "p-4 text-sm text-muted-foreground border border-dashed border-border rounded", children: [
         "Unknown pattern: ",
         content.pattern,
@@ -59515,7 +59680,7 @@ function resolveLambdaBindings(body, params, item, index) {
   return body;
 }
 var _slotContentRenderer2 = null;
-function getSlotContentRenderer2() {
+function getSlotContentRenderer4() {
   if (_slotContentRenderer2) return _slotContentRenderer2;
   const mod = (init_UISlotRenderer(), __toCommonJS(UISlotRenderer_exports));
   _slotContentRenderer2 = mod.SlotContentRenderer;
@@ -59531,7 +59696,7 @@ function makeLambdaFn(params, lambdaBody, callerKey) {
     if (typeof record.type !== "string") {
       return null;
     }
-    const SlotContentRenderer2 = getSlotContentRenderer2();
+    const SlotContentRenderer2 = getSlotContentRenderer4();
     const rawChildProps = {};
     for (const [k, v] of Object.entries(record)) {
       if (k !== "type") rawChildProps[k] = v;
@@ -61891,6 +62056,33 @@ function formatPayloadTooltip(fields) {
   );
   return `{ ${parts.join(", ")} }`;
 }
+
+// components/avl/derive-edit-focus.ts
+function deriveEditFocusFromElement(el) {
+  const orbitalEl = el.getAttribute("data-orb-orbital") !== null ? el : el.closest("[data-orb-orbital]");
+  const orbital = orbitalEl?.getAttribute("data-orb-orbital") ?? "";
+  if (!orbital) return null;
+  const path = el.getAttribute("data-orb-path") ?? el.getAttribute("data-pattern-path");
+  const patternType = el.getAttribute("data-orb-pattern") ?? el.getAttribute("data-pattern");
+  const trait = el.getAttribute("data-orb-trait") ?? el.getAttribute("data-source-trait");
+  const focus = {
+    level: "node",
+    orbital,
+    label: patternType ?? trait ?? "element"
+  };
+  if (path !== null) focus.path = path;
+  if (trait !== null) focus.trait = trait;
+  if (patternType !== null) focus.patternType = patternType;
+  const transition = el.getAttribute("data-orb-transition");
+  if (transition !== null) focus.transition = transition;
+  const state = el.getAttribute("data-orb-state");
+  if (state !== null) focus.state = state;
+  const slot = el.getAttribute("data-orb-slot");
+  if (slot !== null) focus.slot = slot;
+  const entity = el.getAttribute("data-orb-entity");
+  if (entity !== null) focus.entity = entity;
+  return focus;
+}
 function entityNameOf(ref) {
   if (!ref) return void 0;
   if (typeof ref === "string") return ref;
@@ -62176,29 +62368,6 @@ function rectRelativeTo(el, container, zoom) {
     height: (u.bottom - u.top) / z
   };
 }
-function buildFocus(el, orbitalName) {
-  if (!orbitalName) return null;
-  const path = el.getAttribute("data-orb-path") ?? el.getAttribute("data-pattern-path");
-  const patternType = el.getAttribute("data-orb-pattern") ?? el.getAttribute("data-pattern");
-  const trait = el.getAttribute("data-orb-trait") ?? el.getAttribute("data-source-trait");
-  const focus = {
-    level: "node",
-    orbital: orbitalName,
-    label: patternType ?? trait ?? "element"
-  };
-  if (path !== null) focus.path = path;
-  if (trait !== null) focus.trait = trait;
-  if (patternType !== null) focus.patternType = patternType;
-  const transition = el.getAttribute("data-orb-transition");
-  if (transition !== null) focus.transition = transition;
-  const state = el.getAttribute("data-orb-state");
-  if (state !== null) focus.state = state;
-  const slot = el.getAttribute("data-orb-slot");
-  if (slot !== null) focus.slot = slot;
-  const entity = el.getAttribute("data-orb-entity");
-  if (entity !== null) focus.entity = entity;
-  return focus;
-}
 var OrbPreviewNodeInner = (props) => {
   const data = props.data;
   const screenSize = React93.useContext(ScreenSizeContext);
@@ -62267,7 +62436,7 @@ var OrbPreviewNodeInner = (props) => {
         nodeData: data,
         rect: rect ?? void 0
       });
-      const focus = buildFocus(patternEl, data.orbitalName);
+      const focus = deriveEditFocusFromElement(patternEl);
       if (focus) eventBus.emit("UI:ELEMENT_SELECTED", { focus: { ...focus } });
     } else {
       setSelectedRect(null);
@@ -65557,6 +65726,7 @@ exports.behaviorsToComposeGraph = behaviorsToComposeGraph;
 exports.computeTraitLayout = computeTraitLayout;
 exports.computeZoomBand = computeZoomBand;
 exports.curveControlPoint = curveControlPoint;
+exports.deriveEditFocusFromElement = deriveEditFocusFromElement;
 exports.edgePath = edgePath;
 exports.getStateRole = getStateRole;
 exports.gridPositions = gridPositions;