@almadar/ui 2.16.0 → 2.16.1

package/dist/components/organisms/game/three/index.cjs

@@ -9,6 +9,8 @@ var GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader');
 var OrbitControls_js = require('three/examples/jsm/controls/OrbitControls.js');
 var GLTFLoader_js = require('three/examples/jsm/loaders/GLTFLoader.js');
 var OBJLoader_js = require('three/examples/jsm/loaders/OBJLoader.js');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -2200,6 +2202,1067 @@ function preloadFeatures(urls) {
     }
   });
 }
+var DEFAULT_GRID_CONFIG = {
+  cellSize: 1,
+  offsetX: 0,
+  offsetZ: 0
+};
+function CameraController({
+  onCameraChange
+}) {
+  const { camera } = fiber.useThree();
+  React8.useEffect(() => {
+    if (onCameraChange) {
+      onCameraChange({
+        x: camera.position.x,
+        y: camera.position.y,
+        z: camera.position.z
+      });
+    }
+  }, [camera.position, onCameraChange]);
+  return null;
+}
+var GameCanvas3D = React8.forwardRef(
+  ({
+    tiles = [],
+    units = [],
+    features = [],
+    events = [],
+    orientation = "standard",
+    cameraMode = "isometric",
+    showGrid = true,
+    showCoordinates = false,
+    showTileInfo = false,
+    overlay = "default",
+    shadows = true,
+    backgroundColor = "#1a1a2e",
+    onTileClick,
+    onUnitClick,
+    onFeatureClick,
+    onCanvasClick,
+    onTileHover,
+    onUnitAnimation,
+    assetLoader: customAssetLoader,
+    tileRenderer: CustomTileRenderer,
+    unitRenderer: CustomUnitRenderer,
+    featureRenderer: CustomFeatureRenderer,
+    className,
+    isLoading: externalLoading,
+    error: externalError,
+    entity,
+    preloadAssets = [],
+    tileClickEvent,
+    unitClickEvent,
+    featureClickEvent,
+    canvasClickEvent,
+    tileHoverEvent,
+    tileLeaveEvent,
+    unitAnimationEvent,
+    cameraChangeEvent,
+    loadingMessage = "Loading 3D Scene...",
+    useInstancing = true,
+    validMoves = [],
+    attackTargets = [],
+    selectedTileIds = [],
+    selectedUnitId = null,
+    children
+  }, ref) => {
+    const containerRef = React8.useRef(null);
+    const controlsRef = React8.useRef(null);
+    const [hoveredTile, setHoveredTile] = React8.useState(null);
+    const [internalError, setInternalError] = React8.useState(null);
+    const { isLoading: assetsLoading, progress, loaded, total } = useAssetLoader({
+      preloadUrls: preloadAssets,
+      loader: customAssetLoader
+    });
+    const eventHandlers = useGameCanvas3DEvents({
+      tileClickEvent,
+      unitClickEvent,
+      featureClickEvent,
+      canvasClickEvent,
+      tileHoverEvent,
+      tileLeaveEvent,
+      unitAnimationEvent,
+      cameraChangeEvent,
+      onTileClick,
+      onUnitClick,
+      onFeatureClick,
+      onCanvasClick,
+      onTileHover,
+      onUnitAnimation
+    });
+    const gridBounds = React8.useMemo(() => {
+      if (tiles.length === 0) {
+        return { minX: 0, maxX: 10, minZ: 0, maxZ: 10 };
+      }
+      const xs = tiles.map((t) => t.x);
+      const zs = tiles.map((t) => t.z || t.y || 0);
+      return {
+        minX: Math.min(...xs),
+        maxX: Math.max(...xs),
+        minZ: Math.min(...zs),
+        maxZ: Math.max(...zs)
+      };
+    }, [tiles]);
+    const cameraTarget = React8.useMemo(() => {
+      return [
+        (gridBounds.minX + gridBounds.maxX) / 2,
+        0,
+        (gridBounds.minZ + gridBounds.maxZ) / 2
+      ];
+    }, [gridBounds]);
+    const gridConfig = React8.useMemo(
+      () => ({
+        ...DEFAULT_GRID_CONFIG,
+        offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
+        offsetZ: -(gridBounds.maxZ - gridBounds.minZ) / 2
+      }),
+      [gridBounds]
+    );
+    const gridToWorld2 = React8.useCallback(
+      (x, z, y = 0) => {
+        const worldX = (x - gridBounds.minX) * gridConfig.cellSize;
+        const worldZ = (z - gridBounds.minZ) * gridConfig.cellSize;
+        return [worldX, y * gridConfig.cellSize, worldZ];
+      },
+      [gridBounds, gridConfig]
+    );
+    React8.useImperativeHandle(ref, () => ({
+      getCameraPosition: () => {
+        if (controlsRef.current) {
+          const pos = controlsRef.current.object.position;
+          return new THREE6__namespace.Vector3(pos.x, pos.y, pos.z);
+        }
+        return null;
+      },
+      setCameraPosition: (x, y, z) => {
+        if (controlsRef.current) {
+          controlsRef.current.object.position.set(x, y, z);
+          controlsRef.current.update();
+        }
+      },
+      lookAt: (x, y, z) => {
+        if (controlsRef.current) {
+          controlsRef.current.target.set(x, y, z);
+          controlsRef.current.update();
+        }
+      },
+      resetCamera: () => {
+        if (controlsRef.current) {
+          controlsRef.current.reset();
+        }
+      },
+      screenshot: () => {
+        const canvas = containerRef.current?.querySelector("canvas");
+        if (canvas) {
+          return canvas.toDataURL("image/png");
+        }
+        return null;
+      },
+      export: () => ({
+        tiles,
+        units,
+        features
+      })
+    }));
+    const handleTileClick = React8.useCallback(
+      (tile, event) => {
+        eventHandlers.handleTileClick(tile, event);
+      },
+      [eventHandlers]
+    );
+    const handleUnitClick = React8.useCallback(
+      (unit, event) => {
+        eventHandlers.handleUnitClick(unit, event);
+      },
+      [eventHandlers]
+    );
+    const handleFeatureClick = React8.useCallback(
+      (feature, event) => {
+        if (event) {
+          eventHandlers.handleFeatureClick(feature, event);
+        }
+      },
+      [eventHandlers]
+    );
+    const handleTileHover = React8.useCallback(
+      (tile, event) => {
+        setHoveredTile(tile);
+        if (event) {
+          eventHandlers.handleTileHover(tile, event);
+        }
+      },
+      [eventHandlers]
+    );
+    const cameraConfig = React8.useMemo(() => {
+      const size = Math.max(
+        gridBounds.maxX - gridBounds.minX,
+        gridBounds.maxZ - gridBounds.minZ
+      );
+      const distance = size * 1.5;
+      switch (cameraMode) {
+        case "isometric":
+          return {
+            position: [distance, distance * 0.8, distance],
+            fov: 45
+          };
+        case "top-down":
+          return {
+            position: [0, distance * 2, 0],
+            fov: 45
+          };
+        case "perspective":
+        default:
+          return {
+            position: [distance, distance, distance],
+            fov: 45
+          };
+      }
+    }, [cameraMode, gridBounds]);
+    const DefaultTileRenderer = React8.useCallback(
+      ({ tile, position }) => {
+        const isSelected = tile.id ? selectedTileIds.includes(tile.id) : false;
+        const isHovered = hoveredTile?.id === tile.id;
+        const isValidMove = validMoves.some(
+          (m) => m.x === tile.x && m.z === (tile.z ?? tile.y ?? 0)
+        );
+        const isAttackTarget = attackTargets.some(
+          (m) => m.x === tile.x && m.z === (tile.z ?? tile.y ?? 0)
+        );
+        let color = 8421504;
+        if (tile.type === "water") color = 4491468;
+        else if (tile.type === "grass") color = 4500036;
+        else if (tile.type === "sand") color = 14535816;
+        else if (tile.type === "rock") color = 8947848;
+        else if (tile.type === "snow") color = 15658734;
+        let emissive = 0;
+        if (isSelected) emissive = 4473924;
+        else if (isAttackTarget) emissive = 4456448;
+        else if (isValidMove) emissive = 17408;
+        else if (isHovered) emissive = 2236962;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "mesh",
+          {
+            position,
+            onClick: (e) => handleTileClick(tile, e),
+            onPointerEnter: (e) => handleTileHover(tile, e),
+            onPointerLeave: (e) => handleTileHover(null, e),
+            userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("boxGeometry", { args: [0.95, 0.2, 0.95] }),
+              /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color, emissive })
+            ]
+          }
+        );
+      },
+      [selectedTileIds, hoveredTile, validMoves, attackTargets, handleTileClick, handleTileHover]
+    );
+    const DefaultUnitRenderer = React8.useCallback(
+      ({ unit, position }) => {
+        const isSelected = selectedUnitId === unit.id;
+        const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "group",
+          {
+            position,
+            onClick: (e) => handleUnitClick(unit, e),
+            userData: { type: "unit", unitId: unit.id },
+            children: [
+              isSelected && /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.05, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+                /* @__PURE__ */ jsxRuntime.jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
+                /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: "#ffff00", transparent: true, opacity: 0.8 })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.3, 0], children: [
+                /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.3, 0.3, 0.1, 8] }),
+                /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.6, 0], children: [
+                /* @__PURE__ */ jsxRuntime.jsx("capsuleGeometry", { args: [0.2, 0.4, 4, 8] }),
+                /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.9, 0], children: [
+                /* @__PURE__ */ jsxRuntime.jsx("sphereGeometry", { args: [0.12, 8, 8] }),
+                /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
+              ] }),
+              unit.health !== void 0 && unit.maxHealth !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("group", { position: [0, 1.2, 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 })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "mesh",
+                  {
+                    position: [
+                      -0.25 + 0.5 * (unit.health / unit.maxHealth) / 2,
+                      0,
+                      0.01
+                    ],
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [0.5 * (unit.health / unit.maxHealth), 0.05] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "meshBasicMaterial",
+                        {
+                          color: unit.health / unit.maxHealth > 0.5 ? 4500036 : unit.health / unit.maxHealth > 0.25 ? 11184708 : 16729156
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        );
+      },
+      [selectedUnitId, handleUnitClick]
+    );
+    const DefaultFeatureRenderer = React8.useCallback(
+      ({
+        feature,
+        position
+      }) => {
+        if (feature.assetUrl) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            ModelLoader,
+            {
+              url: feature.assetUrl,
+              position,
+              scale: 0.5,
+              rotation: [0, feature.rotation ?? 0, 0],
+              onClick: () => handleFeatureClick(feature, null),
+              fallbackGeometry: "box"
+            },
+            feature.id
+          );
+        }
+        if (feature.type === "tree") {
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "group",
+            {
+              position,
+              onClick: (e) => handleFeatureClick(feature, e),
+              userData: { type: "feature", featureId: feature.id },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.4, 0], children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.1, 0.15, 0.8, 6] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: 9127187 })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.9, 0], children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("coneGeometry", { args: [0.5, 0.8, 8] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: 2263842 })
+                ] })
+              ]
+            }
+          );
+        }
+        if (feature.type === "rock") {
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "mesh",
+            {
+              position: [position[0], position[1] + 0.3, position[2]],
+              onClick: (e) => handleFeatureClick(feature, e),
+              userData: { type: "feature", featureId: feature.id },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("dodecahedronGeometry", { args: [0.3, 0] }),
+                /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color: 8421504 })
+              ]
+            }
+          );
+        }
+        return null;
+      },
+      [handleFeatureClick]
+    );
+    if (externalLoading || assetsLoading && preloadAssets.length > 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Canvas3DLoadingState,
+        {
+          progress,
+          loaded,
+          total,
+          message: loadingMessage,
+          className
+        }
+      );
+    }
+    const displayError = externalError || internalError;
+    if (displayError) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Canvas3DErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "game-canvas-3d game-canvas-3d--error", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "game-canvas-3d__error", children: [
+        "Error: ",
+        displayError
+      ] }) }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Canvas3DErrorBoundary,
+      {
+        onError: (err) => setInternalError(err.message),
+        onReset: () => setInternalError(null),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: containerRef,
+            className: `game-canvas-3d ${className || ""}`,
+            "data-orientation": orientation,
+            "data-camera-mode": cameraMode,
+            "data-overlay": overlay,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                fiber.Canvas,
+                {
+                  shadows,
+                  camera: {
+                    position: cameraConfig.position,
+                    fov: cameraConfig.fov,
+                    near: 0.1,
+                    far: 1e3
+                  },
+                  style: { background: backgroundColor },
+                  onClick: (e) => {
+                    if (e.target === e.currentTarget) {
+                      eventHandlers.handleCanvasClick(e);
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(CameraController, { onCameraChange: eventHandlers.handleCameraChange }),
+                    /* @__PURE__ */ jsxRuntime.jsx("ambientLight", { intensity: 0.6 }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "directionalLight",
+                      {
+                        position: [10, 20, 10],
+                        intensity: 0.8,
+                        castShadow: shadows,
+                        "shadow-mapSize": [2048, 2048]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("hemisphereLight", { intensity: 0.3, color: "#87ceeb", groundColor: "#362d1d" }),
+                    showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+                      drei.Grid,
+                      {
+                        args: [
+                          Math.max(gridBounds.maxX - gridBounds.minX + 2, 10),
+                          Math.max(gridBounds.maxZ - gridBounds.minZ + 2, 10)
+                        ],
+                        position: [
+                          (gridBounds.maxX - gridBounds.minX) / 2 - 0.5,
+                          0,
+                          (gridBounds.maxZ - gridBounds.minZ) / 2 - 0.5
+                        ],
+                        cellSize: 1,
+                        cellThickness: 1,
+                        cellColor: "#444444",
+                        sectionSize: 5,
+                        sectionThickness: 1.5,
+                        sectionColor: "#666666",
+                        fadeDistance: 50,
+                        fadeStrength: 1
+                      }
+                    ),
+                    tiles.map((tile, index) => {
+                      const position = gridToWorld2(
+                        tile.x,
+                        tile.z ?? tile.y ?? 0,
+                        tile.elevation ?? 0
+                      );
+                      const Renderer = CustomTileRenderer || DefaultTileRenderer;
+                      return /* @__PURE__ */ jsxRuntime.jsx(Renderer, { tile, position }, tile.id ?? `tile-${index}`);
+                    }),
+                    features.map((feature, index) => {
+                      const position = gridToWorld2(
+                        feature.x,
+                        feature.z ?? feature.y ?? 0,
+                        (feature.elevation ?? 0) + 0.5
+                      );
+                      const Renderer = CustomFeatureRenderer || DefaultFeatureRenderer;
+                      return /* @__PURE__ */ jsxRuntime.jsx(Renderer, { feature, position }, feature.id ?? `feature-${index}`);
+                    }),
+                    units.map((unit) => {
+                      const position = gridToWorld2(
+                        unit.x ?? 0,
+                        unit.z ?? unit.y ?? 0,
+                        (unit.elevation ?? 0) + 0.5
+                      );
+                      const Renderer = CustomUnitRenderer || DefaultUnitRenderer;
+                      return /* @__PURE__ */ jsxRuntime.jsx(Renderer, { unit, position }, unit.id);
+                    }),
+                    children,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      drei.OrbitControls,
+                      {
+                        ref: controlsRef,
+                        target: cameraTarget,
+                        enableDamping: true,
+                        dampingFactor: 0.05,
+                        minDistance: 2,
+                        maxDistance: 100,
+                        maxPolarAngle: Math.PI / 2 - 0.1
+                      }
+                    )
+                  ]
+                }
+              ),
+              showCoordinates && hoveredTile && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "game-canvas-3d__coordinates", children: [
+                "X: ",
+                hoveredTile.x,
+                ", Z: ",
+                hoveredTile.z ?? hoveredTile.y ?? 0
+              ] }),
+              showTileInfo && hoveredTile && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "game-canvas-3d__tile-info", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tile-info__type", children: hoveredTile.type }),
+                hoveredTile.terrain && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tile-info__terrain", children: hoveredTile.terrain })
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+GameCanvas3D.displayName = "GameCanvas3D";
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var paddingStyles = {
+  none: "p-0",
+  xs: "p-1",
+  sm: "p-2",
+  md: "p-4",
+  lg: "p-6",
+  xl: "p-8",
+  "2xl": "p-12"
+};
+var paddingXStyles = {
+  none: "px-0",
+  xs: "px-1",
+  sm: "px-2",
+  md: "px-4",
+  lg: "px-6",
+  xl: "px-8",
+  "2xl": "px-12"
+};
+var paddingYStyles = {
+  none: "py-0",
+  xs: "py-1",
+  sm: "py-2",
+  md: "py-4",
+  lg: "py-6",
+  xl: "py-8",
+  "2xl": "py-12"
+};
+var marginStyles = {
+  none: "m-0",
+  xs: "m-1",
+  sm: "m-2",
+  md: "m-4",
+  lg: "m-6",
+  xl: "m-8",
+  "2xl": "m-12",
+  auto: "m-auto"
+};
+var marginXStyles = {
+  none: "mx-0",
+  xs: "mx-1",
+  sm: "mx-2",
+  md: "mx-4",
+  lg: "mx-6",
+  xl: "mx-8",
+  "2xl": "mx-12",
+  auto: "mx-auto"
+};
+var marginYStyles = {
+  none: "my-0",
+  xs: "my-1",
+  sm: "my-2",
+  md: "my-4",
+  lg: "my-6",
+  xl: "my-8",
+  "2xl": "my-12",
+  auto: "my-auto"
+};
+var bgStyles = {
+  transparent: "bg-transparent",
+  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+  secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
+  muted: "bg-[var(--color-muted)] text-[var(--color-foreground)]",
+  accent: "bg-[var(--color-accent)] text-[var(--color-accent-foreground)]",
+  surface: "bg-[var(--color-card)]",
+  overlay: "bg-[var(--color-card)]/80 backdrop-blur-sm"
+};
+var roundedStyles = {
+  none: "rounded-none",
+  sm: "rounded-[var(--radius-sm)]",
+  md: "rounded-[var(--radius-md)]",
+  lg: "rounded-[var(--radius-lg)]",
+  xl: "rounded-[var(--radius-xl)]",
+  "2xl": "rounded-[var(--radius-xl)]",
+  full: "rounded-[var(--radius-full)]"
+};
+var shadowStyles = {
+  none: "shadow-none",
+  sm: "shadow-[var(--shadow-sm)]",
+  md: "shadow-[var(--shadow-main)]",
+  lg: "shadow-[var(--shadow-lg)]",
+  xl: "shadow-[var(--shadow-lg)]"
+};
+var displayStyles = {
+  block: "block",
+  inline: "inline",
+  "inline-block": "inline-block",
+  flex: "flex",
+  "inline-flex": "inline-flex",
+  grid: "grid"
+};
+var overflowStyles = {
+  auto: "overflow-auto",
+  hidden: "overflow-hidden",
+  visible: "overflow-visible",
+  scroll: "overflow-scroll"
+};
+var positionStyles = {
+  relative: "relative",
+  absolute: "absolute",
+  fixed: "fixed",
+  sticky: "sticky"
+};
+var Box = React8__default.default.forwardRef(
+  ({
+    padding,
+    paddingX,
+    paddingY,
+    margin,
+    marginX,
+    marginY,
+    bg = "transparent",
+    border = false,
+    rounded = "none",
+    shadow = "none",
+    display,
+    fullWidth = false,
+    fullHeight = false,
+    overflow,
+    position,
+    className,
+    children,
+    as: Component2 = "div",
+    action,
+    actionPayload,
+    hoverEvent,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    ...rest
+  }, ref) => {
+    const eventBus = useEventBus();
+    const handleClick = React8.useCallback((e) => {
+      if (action) {
+        e.stopPropagation();
+        eventBus.emit(`UI:${action}`, actionPayload ?? {});
+      }
+      onClick?.(e);
+    }, [action, actionPayload, eventBus, onClick]);
+    const handleMouseEnter = React8.useCallback((e) => {
+      if (hoverEvent) {
+        eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
+      }
+      onMouseEnter?.(e);
+    }, [hoverEvent, eventBus, onMouseEnter]);
+    const handleMouseLeave = React8.useCallback((e) => {
+      if (hoverEvent) {
+        eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
+      }
+      onMouseLeave?.(e);
+    }, [hoverEvent, eventBus, onMouseLeave]);
+    const isClickable = action || onClick;
+    const Comp = Component2;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ref,
+        className: cn(
+          // Padding
+          padding && paddingStyles[padding],
+          paddingX && paddingXStyles[paddingX],
+          paddingY && paddingYStyles[paddingY],
+          // Margin
+          margin && marginStyles[margin],
+          marginX && marginXStyles[marginX],
+          marginY && marginYStyles[marginY],
+          // Background
+          bgStyles[bg],
+          // Border - uses theme variables
+          border && "border-[length:var(--border-width)] border-[var(--color-border)]",
+          // Rounded
+          roundedStyles[rounded],
+          // Shadow
+          shadowStyles[shadow],
+          // Display
+          display && displayStyles[display],
+          // Dimensions
+          fullWidth && "w-full",
+          fullHeight && "h-full",
+          // Overflow
+          overflow && overflowStyles[overflow],
+          // Position
+          position && positionStyles[position],
+          // Cursor for clickable
+          isClickable && "cursor-pointer",
+          className
+        ),
+        onClick: isClickable ? handleClick : void 0,
+        onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
+        onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+var gapStyles = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8",
+  "2xl": "gap-12"
+};
+var alignStyles = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
+};
+var justifyStyles = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly"
+};
+var Stack = ({
+  direction = "vertical",
+  gap = "md",
+  align = "stretch",
+  justify = "start",
+  wrap = false,
+  reverse = false,
+  flex = false,
+  className,
+  style,
+  children,
+  as: Component2 = "div",
+  onClick,
+  onKeyDown,
+  role,
+  tabIndex,
+  action,
+  actionPayload,
+  responsive = false
+}) => {
+  const eventBus = useEventBus();
+  const handleClick = (e) => {
+    if (action) {
+      eventBus.emit(`UI:${action}`, actionPayload ?? {});
+    }
+    onClick?.(e);
+  };
+  const isHorizontal = direction === "horizontal";
+  const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
+  const Comp = Component2;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      className: cn(
+        "flex",
+        directionClass,
+        gapStyles[gap],
+        alignStyles[align],
+        justifyStyles[justify],
+        wrap && "flex-wrap",
+        flex && "flex-1",
+        className
+      ),
+      style,
+      onClick: action || onClick ? handleClick : void 0,
+      onKeyDown,
+      role,
+      tabIndex,
+      children
+    }
+  );
+};
+var VStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "vertical", ...props });
+var HStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "horizontal", ...props });
+var variantStyles = {
+  h1: "text-4xl font-bold tracking-tight text-[var(--color-foreground)]",
+  h2: "text-3xl font-bold tracking-tight text-[var(--color-foreground)]",
+  h3: "text-2xl font-bold text-[var(--color-foreground)]",
+  h4: "text-xl font-bold text-[var(--color-foreground)]",
+  h5: "text-lg font-bold text-[var(--color-foreground)]",
+  h6: "text-base font-bold text-[var(--color-foreground)]",
+  heading: "text-2xl font-bold text-[var(--color-foreground)]",
+  subheading: "text-lg font-semibold text-[var(--color-foreground)]",
+  body1: "text-base font-normal text-[var(--color-foreground)]",
+  body2: "text-sm font-normal text-[var(--color-foreground)]",
+  body: "text-base font-normal text-[var(--color-foreground)]",
+  caption: "text-xs font-normal text-[var(--color-muted-foreground)]",
+  overline: "text-xs uppercase tracking-wide font-bold text-[var(--color-muted-foreground)]",
+  small: "text-sm font-normal text-[var(--color-foreground)]",
+  large: "text-lg font-medium text-[var(--color-foreground)]",
+  label: "text-sm font-medium text-[var(--color-foreground)]"
+};
+var colorStyles = {
+  primary: "text-[var(--color-foreground)]",
+  secondary: "text-[var(--color-muted-foreground)]",
+  muted: "text-[var(--color-muted-foreground)]",
+  error: "text-[var(--color-error)]",
+  success: "text-[var(--color-success)]",
+  warning: "text-[var(--color-warning)]",
+  inherit: "text-inherit"
+};
+var weightStyles = {
+  light: "font-light",
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var defaultElements = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  heading: "h2",
+  subheading: "h3",
+  body1: "p",
+  body2: "p",
+  body: "p",
+  caption: "span",
+  overline: "span",
+  small: "span",
+  large: "p",
+  label: "span"
+};
+var typographySizeStyles = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl"
+};
+var overflowStyles2 = {
+  visible: "overflow-visible",
+  hidden: "overflow-hidden",
+  wrap: "break-words overflow-hidden",
+  "clamp-2": "overflow-hidden line-clamp-2",
+  "clamp-3": "overflow-hidden line-clamp-3"
+};
+var Typography = ({
+  variant: variantProp,
+  level,
+  color = "primary",
+  align,
+  weight,
+  size,
+  truncate = false,
+  overflow,
+  as,
+  id,
+  className,
+  style,
+  content,
+  children
+}) => {
+  const variant = variantProp ?? (level ? `h${level}` : "body1");
+  const Component2 = as || defaultElements[variant];
+  const Comp = Component2;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      id,
+      className: cn(
+        variantStyles[variant],
+        colorStyles[color],
+        weight && weightStyles[weight],
+        size && typographySizeStyles[size],
+        align && `text-${align}`,
+        truncate && "truncate overflow-hidden text-ellipsis",
+        overflow && overflowStyles2[overflow],
+        className
+      ),
+      style,
+      children: children ?? content
+    }
+  );
+};
+Typography.displayName = "Typography";
+function GameCanvas3DBattleTemplate({
+  entity,
+  cameraMode = "perspective",
+  showGrid = true,
+  shadows = true,
+  backgroundColor = "#2a1a1a",
+  tileClickEvent,
+  unitClickEvent,
+  unitAttackEvent,
+  unitMoveEvent,
+  endTurnEvent,
+  exitEvent,
+  selectedUnitId,
+  validMoves,
+  attackTargets,
+  className
+}) {
+  const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
+  if (!resolved) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("game-canvas-3d-battle-template", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      GameCanvas3D,
+      {
+        tiles: resolved.tiles,
+        units: resolved.units,
+        features: resolved.features,
+        cameraMode,
+        showGrid,
+        showCoordinates: false,
+        showTileInfo: false,
+        shadows,
+        backgroundColor,
+        tileClickEvent,
+        unitClickEvent,
+        selectedUnitId,
+        validMoves,
+        attackTargets,
+        className: "game-canvas-3d-battle-template__canvas"
+      }
+    ),
+    resolved.currentTurn && /* @__PURE__ */ jsxRuntime.jsxs(
+      HStack,
+      {
+        gap: "sm",
+        align: "center",
+        className: cn("battle-template__turn-indicator", `battle-template__turn-indicator--${resolved.currentTurn}`),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "turn-indicator__label", children: resolved.currentTurn === "player" ? "Your Turn" : "Enemy's Turn" }),
+          resolved.round && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "turn-indicator__round", children: [
+            "Round ",
+            resolved.round
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+GameCanvas3DBattleTemplate.displayName = "GameCanvas3DBattleTemplate";
+function GameCanvas3DCastleTemplate({
+  entity,
+  cameraMode = "isometric",
+  showGrid = true,
+  shadows = true,
+  backgroundColor = "#1e1e2e",
+  buildingClickEvent,
+  unitClickEvent,
+  buildEvent,
+  recruitEvent,
+  exitEvent,
+  selectedBuildingId,
+  selectedTileIds = [],
+  availableBuildSites,
+  showHeader = true,
+  className
+}) {
+  const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
+  if (!resolved) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: cn("game-canvas-3d-castle-template", className), children: [
+    showHeader && resolved.name && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "center", className: "castle-template__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h2", className: "header__name", children: resolved.name }),
+      resolved.level && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "header__level", children: [
+        "Level ",
+        resolved.level
+      ] }),
+      resolved.owner && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "muted", className: "header__owner", children: resolved.owner })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      GameCanvas3D,
+      {
+        tiles: resolved.tiles,
+        units: resolved.units,
+        features: resolved.features,
+        cameraMode,
+        showGrid,
+        showCoordinates: false,
+        showTileInfo: false,
+        shadows,
+        backgroundColor,
+        featureClickEvent: buildingClickEvent,
+        unitClickEvent,
+        selectedTileIds,
+        validMoves: availableBuildSites,
+        className: "game-canvas-3d-castle-template__canvas"
+      }
+    ),
+    resolved.units.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "center", className: "castle-template__garrison-info", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "garrison-info__label", children: "Garrison:" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", weight: "bold", className: "garrison-info__count", children: [
+        resolved.units.length,
+        " units"
+      ] })
+    ] })
+  ] });
+}
+GameCanvas3DCastleTemplate.displayName = "GameCanvas3DCastleTemplate";
+function GameCanvas3DWorldMapTemplate({
+  entity,
+  cameraMode = "isometric",
+  showGrid = true,
+  showCoordinates = true,
+  showTileInfo = true,
+  shadows = true,
+  backgroundColor = "#1a1a2e",
+  tileClickEvent,
+  unitClickEvent,
+  featureClickEvent,
+  tileHoverEvent,
+  tileLeaveEvent,
+  cameraChangeEvent,
+  selectedUnitId,
+  validMoves,
+  attackTargets,
+  className
+}) {
+  const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
+  if (!resolved) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    GameCanvas3D,
+    {
+      tiles: resolved.tiles,
+      units: resolved.units,
+      features: resolved.features,
+      cameraMode,
+      showGrid,
+      showCoordinates,
+      showTileInfo,
+      shadows,
+      backgroundColor,
+      tileClickEvent,
+      unitClickEvent,
+      featureClickEvent,
+      tileHoverEvent,
+      tileLeaveEvent,
+      cameraChangeEvent,
+      selectedUnitId,
+      validMoves,
+      attackTargets,
+      className
+    }
+  );
+}
+GameCanvas3DWorldMapTemplate.displayName = "GameCanvas3DWorldMapTemplate";
 var DEFAULT_CONFIG = {
   cellSize: 1,
   offsetX: 0,
@@ -2491,6 +3554,10 @@ exports.Canvas3DErrorBoundary = Canvas3DErrorBoundary;
 exports.Canvas3DLoadingState = Canvas3DLoadingState;
 exports.FeatureRenderer = FeatureRenderer;
 exports.FeatureRenderer3D = FeatureRenderer3D;
+exports.GameCanvas3D = GameCanvas3D;
+exports.GameCanvas3DBattleTemplate = GameCanvas3DBattleTemplate;
+exports.GameCanvas3DCastleTemplate = GameCanvas3DCastleTemplate;
+exports.GameCanvas3DWorldMapTemplate = GameCanvas3DWorldMapTemplate;
 exports.Lighting3D = Lighting3D;
 exports.ModelLoader = ModelLoader;
 exports.PhysicsObject3D = PhysicsObject3D;