@almadar/ui 2.16.0 → 2.17.0

package/dist/components/index.js

@@ -1,5 +1,5 @@
 import * as React87 from 'react';
-import React87__default, { createContext, useCallback, useState, useRef, useLayoutEffect, useEffect, lazy, forwardRef, useImperativeHandle, useMemo, useContext, Component, useId, Suspense, useSyncExternalStore } from 'react';
+import React87__default, { createContext, useCallback, useState, useRef, useLayoutEffect, useEffect, lazy, useContext, useMemo, useId, Suspense, useSyncExternalStore } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as LucideIcons from 'lucide-react';
@@ -19,12 +19,6 @@ import 'leaflet/dist/leaflet.css';
 import { useUISlots } from '@almadar/ui/context';
 import { getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
 import { Link, Outlet, useLocation } from 'react-router-dom';
-import { useThree, useFrame, Canvas } from '@react-three/fiber';
-import { OrbitControls, Grid as Grid$1 } from '@react-three/drei';
-import * as THREE from 'three';
-import { GLTFLoader as GLTFLoader$1 } from 'three/examples/jsm/loaders/GLTFLoader';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
-import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
 import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query';
 
 var __defProp = Object.defineProperty;
@@ -1026,7 +1020,7 @@ var Box = React87__default.forwardRef(
     position,
     className,
     children,
-    as: Component2 = "div",
+    as: Component = "div",
     action,
     actionPayload,
     hoverEvent,
@@ -1056,7 +1050,7 @@ var Box = React87__default.forwardRef(
       onMouseLeave?.(e);
     }, [hoverEvent, eventBus, onMouseLeave]);
     const isClickable = action || onClick;
-    const Comp = Component2;
+    const Comp = Component;
     return /* @__PURE__ */ jsx(
       Comp,
       {
@@ -1111,10 +1105,10 @@ var Center = ({
   className,
   style,
   children,
-  as: Component2 = "div"
+  as: Component = "div"
 }) => {
   const mergedStyle = minHeight ? { minHeight, ...style } : style;
-  const Comp = Component2;
+  const Comp = Component;
   return /* @__PURE__ */ jsx(
     Comp,
     {
@@ -1599,7 +1593,7 @@ var Stack = ({
   className,
   style,
   children,
-  as: Component2 = "div",
+  as: Component = "div",
   onClick,
   onKeyDown,
   role,
@@ -1617,7 +1611,7 @@ var Stack = ({
   };
   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;
+  const Comp = Component;
   return /* @__PURE__ */ jsx(
     Comp,
     {
@@ -1788,8 +1782,8 @@ var Typography = ({
   children
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
-  const Component2 = as || defaultElements[variant];
-  const Comp = Component2;
+  const Component = as || defaultElements[variant];
+  const Comp = Component;
   return /* @__PURE__ */ jsx(
     Comp,
     {
@@ -5628,10 +5622,10 @@ var Container = ({
   center = true,
   className,
   children,
-  as: Component2 = "div"
+  as: Component = "div"
 }) => {
   const resolvedSize = maxWidth ?? size ?? "lg";
-  const Comp = Component2;
+  const Comp = Component;
   return /* @__PURE__ */ jsx(
     Comp,
     {
@@ -5694,7 +5688,7 @@ var Flex = ({
   basis,
   className,
   children,
-  as: Component2 = "div"
+  as: Component = "div"
 }) => {
   const flexStyle = {};
   if (grow !== void 0 || shrink !== void 0 || basis !== void 0) {
@@ -5706,7 +5700,7 @@ var Flex = ({
       flexStyle.flexBasis = typeof basis === "number" ? `${basis}px` : basis;
     }
   }
-  const Comp = Component2;
+  const Comp = Component;
   return /* @__PURE__ */ jsx(
     Comp,
     {
@@ -5963,10 +5957,10 @@ var Grid = ({
   className,
   style,
   children,
-  as: Component2 = "div"
+  as: Component = "div"
 }) => {
   const mergedStyle = rows ? { gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`, ...style } : style;
-  const Comp = Component2;
+  const Comp = Component;
   return /* @__PURE__ */ jsx(
     Comp,
     {
@@ -17562,10 +17556,10 @@ var Section = ({
   children,
   headerClassName,
   contentClassName,
-  as: Component2 = "section"
+  as: Component = "section"
 }) => {
   const hasHeader = title || description || action;
-  const Comp = Component2;
+  const Comp = Component;
   return /* @__PURE__ */ jsxs(
     Comp,
     {
@@ -28338,216 +28332,6 @@ function DividerPattern({
   );
 }
 DividerPattern.displayName = "DividerPattern";
-var Camera3D = forwardRef(
-  ({
-    mode = "isometric",
-    position = [10, 10, 10],
-    target = [0, 0, 0],
-    zoom = 1,
-    fov = 45,
-    enableOrbit = true,
-    minDistance = 2,
-    maxDistance = 100,
-    onChange
-  }, ref) => {
-    const { camera, set, viewport } = useThree();
-    const controlsRef = useRef(null);
-    const initialPosition = useRef(new THREE.Vector3(...position));
-    const initialTarget = useRef(new THREE.Vector3(...target));
-    useEffect(() => {
-      let newCamera;
-      if (mode === "isometric") {
-        const aspect = viewport.aspect;
-        const size = 10 / zoom;
-        newCamera = new THREE.OrthographicCamera(
-          -size * aspect,
-          size * aspect,
-          size,
-          -size,
-          0.1,
-          1e3
-        );
-      } else {
-        newCamera = new THREE.PerspectiveCamera(fov, viewport.aspect, 0.1, 1e3);
-      }
-      newCamera.position.copy(initialPosition.current);
-      newCamera.lookAt(initialTarget.current);
-      set({ camera: newCamera });
-      if (mode === "top-down") {
-        newCamera.position.set(0, 20 / zoom, 0);
-        newCamera.lookAt(0, 0, 0);
-      }
-      return () => {
-      };
-    }, [mode, fov, zoom, viewport.aspect, set]);
-    useFrame(() => {
-      if (onChange) {
-        onChange(camera);
-      }
-    });
-    useImperativeHandle(ref, () => ({
-      getCamera: () => camera,
-      setPosition: (x, y, z) => {
-        camera.position.set(x, y, z);
-        if (controlsRef.current) {
-          controlsRef.current.update();
-        }
-      },
-      lookAt: (x, y, z) => {
-        camera.lookAt(x, y, z);
-        if (controlsRef.current) {
-          controlsRef.current.target.set(x, y, z);
-          controlsRef.current.update();
-        }
-      },
-      reset: () => {
-        camera.position.copy(initialPosition.current);
-        camera.lookAt(initialTarget.current);
-        if (controlsRef.current) {
-          controlsRef.current.target.copy(initialTarget.current);
-          controlsRef.current.update();
-        }
-      },
-      getViewBounds: () => {
-        const min = new THREE.Vector3(-10, -10, -10);
-        const max = new THREE.Vector3(10, 10, 10);
-        return { min, max };
-      }
-    }));
-    const maxPolarAngle = mode === "top-down" ? 0.1 : Math.PI / 2 - 0.1;
-    return /* @__PURE__ */ jsx(
-      OrbitControls,
-      {
-        ref: controlsRef,
-        camera,
-        enabled: enableOrbit,
-        target: initialTarget.current,
-        minDistance,
-        maxDistance,
-        maxPolarAngle,
-        enableDamping: true,
-        dampingFactor: 0.05
-      }
-    );
-  }
-);
-Camera3D.displayName = "Camera3D";
-var Canvas3DErrorBoundary = class extends Component {
-  constructor(props) {
-    super(props);
-    __publicField(this, "handleReset", () => {
-      this.setState({
-        hasError: false,
-        error: null,
-        errorInfo: null
-      });
-      this.props.onReset?.();
-    });
-    this.state = {
-      hasError: false,
-      error: null,
-      errorInfo: null
-    };
-  }
-  static getDerivedStateFromError(error) {
-    return {
-      hasError: true,
-      error,
-      errorInfo: null
-    };
-  }
-  componentDidCatch(error, errorInfo) {
-    this.setState({ errorInfo });
-    this.props.onError?.(error, errorInfo);
-    console.error("[Canvas3DErrorBoundary] Error caught:", error);
-    console.error("[Canvas3DErrorBoundary] Component stack:", errorInfo.componentStack);
-  }
-  render() {
-    if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback;
-      }
-      return /* @__PURE__ */ jsx("div", { className: "canvas-3d-error", children: /* @__PURE__ */ jsxs("div", { className: "canvas-3d-error__content", children: [
-        /* @__PURE__ */ jsx("div", { className: "canvas-3d-error__icon", children: "\u26A0\uFE0F" }),
-        /* @__PURE__ */ jsx("h2", { className: "canvas-3d-error__title", children: "3D Scene Error" }),
-        /* @__PURE__ */ jsx("p", { className: "canvas-3d-error__message", children: "Something went wrong while rendering the 3D scene." }),
-        this.state.error && /* @__PURE__ */ jsxs("details", { className: "canvas-3d-error__details", children: [
-          /* @__PURE__ */ jsx("summary", { children: "Error Details" }),
-          /* @__PURE__ */ jsxs("pre", { className: "error__stack", children: [
-            this.state.error.message,
-            "\n",
-            this.state.error.stack
-          ] }),
-          this.state.errorInfo && /* @__PURE__ */ jsx("pre", { className: "error__component-stack", children: this.state.errorInfo.componentStack })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "canvas-3d-error__actions", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "error__button error__button--primary",
-              onClick: this.handleReset,
-              children: "Try Again"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "error__button error__button--secondary",
-              onClick: () => window.location.reload(),
-              children: "Reload Page"
-            }
-          )
-        ] })
-      ] }) });
-    }
-    return this.props.children;
-  }
-};
-function Canvas3DLoadingState({
-  progress = 0,
-  loaded = 0,
-  total = 0,
-  message = "Loading 3D Scene...",
-  details,
-  showSpinner = true,
-  className
-}) {
-  const clampedProgress = Math.max(0, Math.min(100, progress));
-  const hasProgress = total > 0;
-  return /* @__PURE__ */ jsxs("div", { className: `canvas-3d-loading ${className || ""}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "canvas-3d-loading__content", children: [
-      showSpinner && /* @__PURE__ */ jsxs("div", { className: "canvas-3d-loading__spinner", children: [
-        /* @__PURE__ */ jsx("div", { className: "spinner__ring" }),
-        /* @__PURE__ */ jsx("div", { className: "spinner__ring spinner__ring--secondary" })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "canvas-3d-loading__message", children: message }),
-      details && /* @__PURE__ */ jsx("div", { className: "canvas-3d-loading__details", children: details }),
-      hasProgress && /* @__PURE__ */ jsxs("div", { className: "canvas-3d-loading__progress", children: [
-        /* @__PURE__ */ jsx("div", { className: "progress__bar", children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "progress__fill",
-            style: { width: `${clampedProgress}%` }
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: "progress__text", children: [
-          /* @__PURE__ */ jsxs("span", { className: "progress__percentage", children: [
-            clampedProgress,
-            "%"
-          ] }),
-          /* @__PURE__ */ jsxs("span", { className: "progress__count", children: [
-            "(",
-            loaded,
-            "/",
-            total,
-            ")"
-          ] })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "canvas-3d-loading__background", children: /* @__PURE__ */ jsx("div", { className: "bg__grid" }) })
-  ] });
-}
 function CastleTemplate({
   entity,
   scale = 0.45,
@@ -29908,1771 +29692,113 @@ var DocumentViewer = ({
       );
     }
     return /* @__PURE__ */ jsx(
-      Box,
-      {
-        className: "w-full overflow-auto p-4 font-mono text-sm",
-        style: { height, fontSize: `${zoom}%` },
-        children: /* @__PURE__ */ jsx(Typography, { variant: "body", className: "whitespace-pre-wrap break-words", children: activeContent })
-      }
-    );
-  };
-  return /* @__PURE__ */ jsx(Card, { className: cn("overflow-hidden", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "none", children: [
-    tabItems && tabItems.length > 1 && /* @__PURE__ */ jsx(Box, { className: "border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsx(
-      Tabs,
-      {
-        tabs: tabItems,
-        activeTab: `doc-${activeDocIndex}`,
-        onTabChange: (id) => {
-          const idx = parseInt(id.replace("doc-", ""), 10);
-          setActiveDocIndex(idx);
-        }
-      }
-    ) }),
-    showToolbar && /* @__PURE__ */ jsxs(
-      HStack,
-      {
-        gap: "sm",
-        align: "center",
-        justify: "between",
-        className: "px-4 py-2 border-b border-[var(--color-border)] bg-[var(--color-muted)]/30",
-        children: [
-          /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
-            /* @__PURE__ */ jsx(Icon, { icon: FileText, size: "sm", className: "text-[var(--color-muted-foreground)]" }),
-            title && /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "truncate max-w-[200px]", children: title })
-          ] }),
-          /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
-            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: ZoomOut, onClick: handleZoomOut }),
-            /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", className: "tabular-nums w-10 text-center", children: [
-              zoom,
-              "%"
-            ] }),
-            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: ZoomIn, onClick: handleZoomIn }),
-            totalPages && totalPages > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Box, { className: "w-px h-4 bg-[var(--color-border)] mx-1" }),
-              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: ChevronLeft, onClick: handlePagePrev, disabled: currentPage <= 1 }),
-              /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", className: "tabular-nums", children: [
-                currentPage,
-                " / ",
-                totalPages
-              ] }),
-              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: ChevronRight, onClick: handlePageNext, disabled: currentPage >= totalPages })
-            ] }),
-            /* @__PURE__ */ jsx(Box, { className: "w-px h-4 bg-[var(--color-border)] mx-1" }),
-            showDownload && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: Download, onClick: handleDownload }),
-            showPrint && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: Printer, onClick: handlePrint }),
-            actions?.map((action, idx) => /* @__PURE__ */ jsx(
-              Badge,
-              {
-                variant: "default",
-                className: "cursor-pointer hover:opacity-80 transition-opacity",
-                onClick: () => handleAction(action),
-                children: action.label
-              },
-              idx
-            ))
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(Box, { className: "w-full overflow-hidden bg-[var(--color-muted)]/20", children: renderContent() })
-  ] }) });
-};
-DocumentViewer.displayName = "DocumentViewer";
-function extractTitle(children) {
-  if (!React87__default.isValidElement(children)) return void 0;
-  const props = children.props;
-  if (typeof props.title === "string") {
-    return props.title;
-  }
-  return void 0;
-}
-var DrawerSlot = ({
-  children,
-  title: overrideTitle,
-  position = "right",
-  size = "md",
-  className
-}) => {
-  const eventBus = useEventBus();
-  const isOpen = Boolean(children);
-  const title = overrideTitle || extractTitle(children);
-  const handleClose = () => {
-    eventBus.emit("UI:CLOSE");
-    eventBus.emit("UI:CANCEL");
-  };
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsx(
-    Drawer,
-    {
-      isOpen,
-      onClose: handleClose,
-      title,
-      position,
-      width: size,
-      className,
-      children
-    }
-  );
-};
-DrawerSlot.displayName = "DrawerSlot";
-var DEFAULT_FEATURE_CONFIGS = {
-  tree: { color: 2263842, height: 1.5, scale: 1, geometry: "tree" },
-  rock: { color: 8421504, height: 0.5, scale: 0.8, geometry: "rock" },
-  bush: { color: 3329330, height: 0.4, scale: 0.6, geometry: "bush" },
-  house: { color: 9127187, height: 1.2, scale: 1.2, geometry: "house" },
-  tower: { color: 6908265, height: 2.5, scale: 1, geometry: "tower" },
-  wall: { color: 8421504, height: 1, scale: 1, geometry: "wall" },
-  mountain: { color: 5597999, height: 2, scale: 1.5, geometry: "mountain" },
-  hill: { color: 7048739, height: 0.8, scale: 1.2, geometry: "hill" },
-  water: { color: 4491468, height: 0.1, scale: 1, geometry: "water" },
-  chest: { color: 16766720, height: 0.3, scale: 0.4, geometry: "chest" },
-  sign: { color: 9127187, height: 0.8, scale: 0.3, geometry: "sign" },
-  portal: { color: 10040012, height: 1.5, scale: 1, geometry: "portal" }
-};
-function TreeFeature({ height, color }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.3, 0], children: [
-      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.08, 0.1, height * 0.6, 6] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color: 9127187 })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.7, 0], children: [
-      /* @__PURE__ */ jsx("coneGeometry", { args: [0.4, height * 0.5, 8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.9, 0], children: [
-      /* @__PURE__ */ jsx("coneGeometry", { args: [0.3, height * 0.4, 8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 1.05, 0], children: [
-      /* @__PURE__ */ jsx("coneGeometry", { args: [0.15, height * 0.25, 8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] })
-  ] });
-}
-function RockFeature({ height, color }) {
-  return /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.4, 0], children: [
-    /* @__PURE__ */ jsx("dodecahedronGeometry", { args: [height * 0.5, 0] }),
-    /* @__PURE__ */ jsx("meshStandardMaterial", { color, roughness: 0.9 })
-  ] });
-}
-function BushFeature({ height, color }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.3, 0], children: [
-      /* @__PURE__ */ jsx("sphereGeometry", { args: [height * 0.4, 8, 8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0.1, height * 0.4, 0.1], children: [
-      /* @__PURE__ */ jsx("sphereGeometry", { args: [height * 0.25, 8, 8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] })
-  ] });
-}
-function HouseFeature({ height, color }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.4, 0], children: [
-      /* @__PURE__ */ jsx("boxGeometry", { args: [0.8, height * 0.8, 0.8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color: 13808780 })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.9, 0], children: [
-      /* @__PURE__ */ jsx("coneGeometry", { args: [0.6, height * 0.4, 4] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.25, 0.41], children: [
-      /* @__PURE__ */ jsx("planeGeometry", { args: [0.25, height * 0.5] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color: 4863784 })
-    ] })
-  ] });
-}
-function TowerFeature({ height, color }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.5, 0], children: [
-      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.3, 0.35, height, 8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height + 0.05, 0], children: [
-      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.35, 0.35, 0.1, 8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] })
-  ] });
-}
-function ChestFeature({ height, color }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.5, 0], children: [
-      /* @__PURE__ */ jsx("boxGeometry", { args: [0.3, height, 0.2] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color, metalness: 0.6, roughness: 0.3 })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height + 0.05, 0], children: [
-      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.15, 0.15, 0.3, 8, 1, false, 0, Math.PI] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color, metalness: 0.6, roughness: 0.3 })
-    ] })
-  ] });
-}
-function DefaultFeature({ height, color }) {
-  return /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.5, 0], children: [
-    /* @__PURE__ */ jsx("boxGeometry", { args: [0.5, height, 0.5] }),
-    /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-  ] });
-}
-function FeatureVisual({
-  feature,
-  position,
-  isSelected,
-  onClick,
-  onHover
-}) {
-  const config = DEFAULT_FEATURE_CONFIGS[feature.type] || {
-    color: 8947848,
-    height: 0.5,
-    scale: 1,
-    geometry: "default"
-  };
-  const color = feature.color ? parseInt(feature.color.replace("#", ""), 16) : config.color;
-  const renderGeometry = () => {
-    switch (config.geometry) {
-      case "tree":
-        return /* @__PURE__ */ jsx(TreeFeature, { height: config.height, color });
-      case "rock":
-        return /* @__PURE__ */ jsx(RockFeature, { height: config.height, color });
-      case "bush":
-        return /* @__PURE__ */ jsx(BushFeature, { height: config.height, color });
-      case "house":
-        return /* @__PURE__ */ jsx(HouseFeature, { height: config.height, color });
-      case "tower":
-        return /* @__PURE__ */ jsx(TowerFeature, { height: config.height, color });
-      case "chest":
-        return /* @__PURE__ */ jsx(ChestFeature, { height: config.height, color });
-      default:
-        return /* @__PURE__ */ jsx(DefaultFeature, { height: config.height, color });
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "group",
-    {
-      position,
-      scale: config.scale,
-      onClick,
-      onPointerEnter: () => onHover(true),
-      onPointerLeave: () => onHover(false),
-      userData: { type: "feature", featureId: feature.id, featureType: feature.type },
-      children: [
-        isSelected && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.02, 0], rotation: [-Math.PI / 2, 0, 0], children: [
-          /* @__PURE__ */ jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
-          /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#ffff00", transparent: true, opacity: 0.8 })
-        ] }),
-        /* @__PURE__ */ jsxs("mesh", { position: [0, 0.01, 0], rotation: [-Math.PI / 2, 0, 0], children: [
-          /* @__PURE__ */ jsx("circleGeometry", { args: [0.35, 16] }),
-          /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#000000", transparent: true, opacity: 0.2 })
-        ] }),
-        renderGeometry()
-      ]
-    }
-  );
-}
-function FeatureRenderer({
-  features,
-  cellSize = 1,
-  offsetX = 0,
-  offsetZ = 0,
-  onFeatureClick,
-  onFeatureHover,
-  selectedFeatureIds = [],
-  featureColors
-}) {
-  return /* @__PURE__ */ jsx("group", { children: features.map((feature) => {
-    const x = (feature.x - offsetX) * cellSize;
-    const z = ((feature.z ?? feature.y ?? 0) - offsetZ) * cellSize;
-    const y = (feature.elevation ?? 0) * 0.1;
-    const isSelected = feature.id ? selectedFeatureIds.includes(feature.id) : false;
-    return /* @__PURE__ */ jsx(
-      FeatureVisual,
-      {
-        feature,
-        position: [x, y, z],
-        isSelected,
-        onClick: () => onFeatureClick?.(feature),
-        onHover: (hovered) => onFeatureHover?.(hovered ? feature : null)
-      },
-      feature.id ?? `feature-${feature.x}-${feature.y}`
-    );
-  }) });
-}
-function detectAssetRoot(modelUrl) {
-  const idx = modelUrl.indexOf("/3d/");
-  if (idx !== -1) {
-    return modelUrl.substring(0, idx + 4);
-  }
-  return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
-}
-function useGLTFModel(url) {
-  const [model, setModel] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    if (!url) {
-      setModel(null);
-      return;
-    }
-    setIsLoading(true);
-    setError(null);
-    const assetRoot = detectAssetRoot(url);
-    const loader = new GLTFLoader$1();
-    loader.setResourcePath(assetRoot);
-    loader.load(
-      url,
-      (gltf) => {
-        setModel(gltf.scene);
-        setIsLoading(false);
-      },
-      void 0,
-      (err) => {
-        setError(err instanceof Error ? err : new Error(String(err)));
-        setIsLoading(false);
-      }
-    );
-  }, [url]);
-  return { model, isLoading, error };
-}
-function FeatureModel({
-  feature,
-  position,
-  isSelected,
-  onClick,
-  onHover
-}) {
-  const groupRef = useRef(null);
-  const { model: loadedModel, isLoading } = useGLTFModel(feature.assetUrl);
-  const model = useMemo(() => {
-    if (!loadedModel) return null;
-    const cloned = loadedModel.clone();
-    cloned.scale.setScalar(0.3);
-    cloned.traverse((child) => {
-      if (child instanceof THREE.Mesh) {
-        child.castShadow = true;
-        child.receiveShadow = true;
-      }
-    });
-    return cloned;
-  }, [loadedModel]);
-  useFrame((state) => {
-    if (groupRef.current) {
-      const featureRotation = feature.rotation;
-      const baseRotation = featureRotation !== void 0 ? featureRotation * Math.PI / 180 - Math.PI / 4 : -Math.PI / 4;
-      const wobble = isSelected ? Math.sin(state.clock.elapsedTime * 2) * 0.1 : 0;
-      groupRef.current.rotation.y = baseRotation + wobble;
-    }
-  });
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("group", { position, children: /* @__PURE__ */ jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
-      /* @__PURE__ */ jsx("ringGeometry", { args: [0.3, 0.35, 16] }),
-      /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#4a90d9", transparent: true, opacity: 0.8 })
-    ] }) });
-  }
-  if (!model && !feature.assetUrl) {
-    return /* @__PURE__ */ jsxs(
-      "group",
-      {
-        position,
-        onClick,
-        onPointerEnter: () => onHover(true),
-        onPointerLeave: () => onHover(false),
-        userData: { type: "feature", featureId: feature.id, featureType: feature.type },
-        children: [
-          isSelected && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.02, 0], rotation: [-Math.PI / 2, 0, 0], children: [
-            /* @__PURE__ */ jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
-            /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#ffff00", transparent: true, opacity: 0.8 })
-          ] }),
-          /* @__PURE__ */ jsxs("mesh", { position: [0, 0.5, 0], children: [
-            /* @__PURE__ */ jsx("boxGeometry", { args: [0.4, 0.4, 0.4] }),
-            /* @__PURE__ */ jsx("meshStandardMaterial", { color: 8947848 })
-          ] })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "group",
-    {
-      ref: groupRef,
-      position,
-      onClick,
-      onPointerEnter: () => onHover(true),
-      onPointerLeave: () => onHover(false),
-      userData: { type: "feature", featureId: feature.id, featureType: feature.type },
-      children: [
-        isSelected && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.02, 0], rotation: [-Math.PI / 2, 0, 0], children: [
-          /* @__PURE__ */ jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
-          /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#ffff00", transparent: true, opacity: 0.8 })
-        ] }),
-        /* @__PURE__ */ jsxs("mesh", { position: [0, 0.01, 0], rotation: [-Math.PI / 2, 0, 0], children: [
-          /* @__PURE__ */ jsx("circleGeometry", { args: [0.35, 16] }),
-          /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#000000", transparent: true, opacity: 0.2 })
-        ] }),
-        model && /* @__PURE__ */ jsx("primitive", { object: model })
-      ]
-    }
-  );
-}
-function FeatureRenderer3D({
-  features,
-  cellSize = 1,
-  offsetX = 0,
-  offsetZ = 0,
-  onFeatureClick,
-  onFeatureHover,
-  selectedFeatureIds = []
-}) {
-  return /* @__PURE__ */ jsx("group", { children: features.map((feature) => {
-    const x = (feature.x - offsetX) * cellSize;
-    const z = ((feature.z ?? feature.y ?? 0) - offsetZ) * cellSize;
-    const y = (feature.elevation ?? 0) * 0.1;
-    const isSelected = feature.id ? selectedFeatureIds.includes(feature.id) : false;
-    return /* @__PURE__ */ jsx(
-      FeatureModel,
-      {
-        feature,
-        position: [x, y, z],
-        isSelected,
-        onClick: () => onFeatureClick?.(feature),
-        onHover: (hovered) => onFeatureHover?.(hovered ? feature : null)
-      },
-      feature.id ?? `feature-${feature.x}-${feature.y}`
-    );
-  }) });
-}
-function detectAssetRoot2(modelUrl) {
-  const idx = modelUrl.indexOf("/3d/");
-  if (idx !== -1) {
-    return modelUrl.substring(0, idx + 4);
-  }
-  return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
-}
-function createGLTFLoaderForUrl(url) {
-  const loader = new GLTFLoader();
-  loader.setResourcePath(detectAssetRoot2(url));
-  return loader;
-}
-var AssetLoader = class {
-  constructor() {
-    __publicField(this, "objLoader");
-    __publicField(this, "textureLoader");
-    __publicField(this, "modelCache");
-    __publicField(this, "textureCache");
-    __publicField(this, "loadingPromises");
-    this.objLoader = new OBJLoader();
-    this.textureLoader = new THREE.TextureLoader();
-    this.modelCache = /* @__PURE__ */ new Map();
-    this.textureCache = /* @__PURE__ */ new Map();
-    this.loadingPromises = /* @__PURE__ */ new Map();
-  }
-  /**
-   * Load a GLB/GLTF model
-   * @param url - URL to the .glb or .gltf file
-   * @returns Promise with loaded model scene and animations
-   */
-  async loadModel(url) {
-    if (this.modelCache.has(url)) {
-      return this.modelCache.get(url);
-    }
-    if (this.loadingPromises.has(url)) {
-      return this.loadingPromises.get(url);
-    }
-    const loader = createGLTFLoaderForUrl(url);
-    const loadPromise = loader.loadAsync(url).then((gltf) => {
-      const result = {
-        scene: gltf.scene,
-        animations: gltf.animations || []
-      };
-      this.modelCache.set(url, result);
-      this.loadingPromises.delete(url);
-      return result;
-    }).catch((error) => {
-      this.loadingPromises.delete(url);
-      throw new Error(`Failed to load model ${url}: ${error.message}`);
-    });
-    this.loadingPromises.set(url, loadPromise);
-    return loadPromise;
-  }
-  /**
-   * Load an OBJ model (fallback for non-GLB assets)
-   * @param url - URL to the .obj file
-   * @returns Promise with loaded object group
-   */
-  async loadOBJ(url) {
-    if (this.modelCache.has(url)) {
-      return this.modelCache.get(url).scene;
-    }
-    if (this.loadingPromises.has(url)) {
-      const result = await this.loadingPromises.get(url);
-      return result.scene;
-    }
-    const loadPromise = this.objLoader.loadAsync(url).then((group) => {
-      const result = {
-        scene: group,
-        animations: []
-      };
-      this.modelCache.set(url, result);
-      this.loadingPromises.delete(url);
-      return result;
-    }).catch((error) => {
-      this.loadingPromises.delete(url);
-      throw new Error(`Failed to load OBJ ${url}: ${error.message}`);
-    });
-    this.loadingPromises.set(url, loadPromise);
-    return (await loadPromise).scene;
-  }
-  /**
-   * Load a texture
-   * @param url - URL to the texture image
-   * @returns Promise with loaded texture
-   */
-  async loadTexture(url) {
-    if (this.textureCache.has(url)) {
-      return this.textureCache.get(url);
-    }
-    if (this.loadingPromises.has(`texture:${url}`)) {
-      return this.loadingPromises.get(`texture:${url}`);
-    }
-    const loadPromise = this.textureLoader.loadAsync(url).then((texture) => {
-      texture.colorSpace = THREE.SRGBColorSpace;
-      this.textureCache.set(url, texture);
-      this.loadingPromises.delete(`texture:${url}`);
-      return texture;
-    }).catch((error) => {
-      this.loadingPromises.delete(`texture:${url}`);
-      throw new Error(`Failed to load texture ${url}: ${error.message}`);
-    });
-    this.loadingPromises.set(`texture:${url}`, loadPromise);
-    return loadPromise;
-  }
-  /**
-   * Preload multiple assets
-   * @param urls - Array of asset URLs to preload
-   * @returns Promise that resolves when all assets are loaded
-   */
-  async preload(urls) {
-    const promises = urls.map((url) => {
-      if (url.endsWith(".glb") || url.endsWith(".gltf")) {
-        return this.loadModel(url).catch(() => null);
-      } else if (url.endsWith(".obj")) {
-        return this.loadOBJ(url).catch(() => null);
-      } else if (/\.(png|jpg|jpeg|webp)$/i.test(url)) {
-        return this.loadTexture(url).catch(() => null);
-      }
-      return Promise.resolve(null);
-    });
-    await Promise.all(promises);
-  }
-  /**
-   * Check if a model is cached
-   * @param url - Model URL
-   */
-  hasModel(url) {
-    return this.modelCache.has(url);
-  }
-  /**
-   * Check if a texture is cached
-   * @param url - Texture URL
-   */
-  hasTexture(url) {
-    return this.textureCache.has(url);
-  }
-  /**
-   * Get cached model (throws if not cached)
-   * @param url - Model URL
-   */
-  getModel(url) {
-    const model = this.modelCache.get(url);
-    if (!model) {
-      throw new Error(`Model ${url} not in cache`);
-    }
-    return model;
-  }
-  /**
-   * Get cached texture (throws if not cached)
-   * @param url - Texture URL
-   */
-  getTexture(url) {
-    const texture = this.textureCache.get(url);
-    if (!texture) {
-      throw new Error(`Texture ${url} not in cache`);
-    }
-    return texture;
-  }
-  /**
-   * Clear all caches
-   */
-  clearCache() {
-    this.textureCache.forEach((texture) => {
-      texture.dispose();
-    });
-    this.modelCache.forEach((model) => {
-      model.scene.traverse((child) => {
-        if (child instanceof THREE.Mesh) {
-          child.geometry.dispose();
-          if (Array.isArray(child.material)) {
-            child.material.forEach((m) => m.dispose());
-          } else {
-            child.material.dispose();
-          }
-        }
-      });
-    });
-    this.modelCache.clear();
-    this.textureCache.clear();
-    this.loadingPromises.clear();
-  }
-  /**
-   * Get cache statistics
-   */
-  getStats() {
-    return {
-      models: this.modelCache.size,
-      textures: this.textureCache.size,
-      loading: this.loadingPromises.size
-    };
-  }
-};
-new AssetLoader();
-function useAssetLoader(options = {}) {
-  const { preloadUrls = [], loader: customLoader } = options;
-  const loaderRef = useRef(customLoader || new AssetLoader());
-  const [state, setState] = useState({
-    isLoading: false,
-    progress: 0,
-    loaded: 0,
-    total: 0,
-    errors: []
-  });
-  useEffect(() => {
-    if (preloadUrls.length > 0) {
-      preload(preloadUrls);
-    }
-  }, []);
-  const updateProgress = useCallback((loaded, total) => {
-    setState((prev) => ({
-      ...prev,
-      loaded,
-      total,
-      progress: total > 0 ? Math.round(loaded / total * 100) : 0
-    }));
-  }, []);
-  const loadModel = useCallback(
-    async (url) => {
-      setState((prev) => ({ ...prev, isLoading: true }));
-      try {
-        const model = await loaderRef.current.loadModel(url);
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          loaded: prev.loaded + 1
-        }));
-        return model;
-      } catch (error) {
-        const errorMsg = error instanceof Error ? error.message : String(error);
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          errors: [...prev.errors, errorMsg]
-        }));
-        throw error;
-      }
-    },
-    []
-  );
-  const loadOBJ = useCallback(
-    async (url) => {
-      setState((prev) => ({ ...prev, isLoading: true }));
-      try {
-        const model = await loaderRef.current.loadOBJ(url);
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          loaded: prev.loaded + 1
-        }));
-        return model;
-      } catch (error) {
-        const errorMsg = error instanceof Error ? error.message : String(error);
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          errors: [...prev.errors, errorMsg]
-        }));
-        throw error;
-      }
-    },
-    []
-  );
-  const loadTexture = useCallback(
-    async (url) => {
-      setState((prev) => ({ ...prev, isLoading: true }));
-      try {
-        const texture = await loaderRef.current.loadTexture(url);
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          loaded: prev.loaded + 1
-        }));
-        return texture;
-      } catch (error) {
-        const errorMsg = error instanceof Error ? error.message : String(error);
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          errors: [...prev.errors, errorMsg]
-        }));
-        throw error;
-      }
-    },
-    []
-  );
-  const preload = useCallback(
-    async (urls) => {
-      setState((prev) => ({
-        ...prev,
-        isLoading: true,
-        total: urls.length,
-        loaded: 0,
-        errors: []
-      }));
-      let completed = 0;
-      const errors = [];
-      await Promise.all(
-        urls.map(async (url) => {
-          try {
-            if (url.endsWith(".glb") || url.endsWith(".gltf")) {
-              await loaderRef.current.loadModel(url);
-            } else if (url.endsWith(".obj")) {
-              await loaderRef.current.loadOBJ(url);
-            } else if (/\.(png|jpg|jpeg|webp)$/i.test(url)) {
-              await loaderRef.current.loadTexture(url);
-            }
-            completed++;
-            updateProgress(completed, urls.length);
-          } catch (error) {
-            const errorMsg = error instanceof Error ? error.message : String(error);
-            errors.push(`${url}: ${errorMsg}`);
-            completed++;
-            updateProgress(completed, urls.length);
-          }
-        })
-      );
-      setState((prev) => ({
-        ...prev,
-        isLoading: false,
-        errors
-      }));
-    },
-    [updateProgress]
-  );
-  const hasModel = useCallback((url) => {
-    return loaderRef.current.hasModel(url);
-  }, []);
-  const hasTexture = useCallback((url) => {
-    return loaderRef.current.hasTexture(url);
-  }, []);
-  const getModel = useCallback((url) => {
-    try {
-      return loaderRef.current.getModel(url);
-    } catch {
-      return void 0;
-    }
-  }, []);
-  const getTexture = useCallback((url) => {
-    try {
-      return loaderRef.current.getTexture(url);
-    } catch {
-      return void 0;
-    }
-  }, []);
-  const clearCache = useCallback(() => {
-    loaderRef.current.clearCache();
-    setState({
-      isLoading: false,
-      progress: 0,
-      loaded: 0,
-      total: 0,
-      errors: []
-    });
-  }, []);
-  return {
-    ...state,
-    loadModel,
-    loadOBJ,
-    loadTexture,
-    preload,
-    hasModel,
-    hasTexture,
-    getModel,
-    getTexture,
-    clearCache
-  };
-}
-function useGameCanvas3DEvents(options) {
-  const {
-    tileClickEvent,
-    unitClickEvent,
-    featureClickEvent,
-    canvasClickEvent,
-    tileHoverEvent,
-    tileLeaveEvent,
-    unitAnimationEvent,
-    cameraChangeEvent,
-    onTileClick,
-    onUnitClick,
-    onFeatureClick,
-    onCanvasClick,
-    onTileHover,
-    onUnitAnimation
-  } = options;
-  const emit = useEmitEvent();
-  const optionsRef = useRef(options);
-  optionsRef.current = options;
-  const handleTileClick = useCallback(
-    (tile, event) => {
-      if (tileClickEvent) {
-        emit(tileClickEvent, {
-          tileId: tile.id,
-          x: tile.x,
-          z: tile.z ?? tile.y ?? 0,
-          type: tile.type,
-          terrain: tile.terrain,
-          elevation: tile.elevation
-        });
-      }
-      optionsRef.current.onTileClick?.(tile, event);
-    },
-    [tileClickEvent, emit]
-  );
-  const handleUnitClick = useCallback(
-    (unit, event) => {
-      if (unitClickEvent) {
-        emit(unitClickEvent, {
-          unitId: unit.id,
-          x: unit.x,
-          z: unit.z ?? unit.y ?? 0,
-          unitType: unit.unitType,
-          name: unit.name,
-          team: unit.team,
-          faction: unit.faction,
-          health: unit.health,
-          maxHealth: unit.maxHealth
-        });
-      }
-      optionsRef.current.onUnitClick?.(unit, event);
-    },
-    [unitClickEvent, emit]
-  );
-  const handleFeatureClick = useCallback(
-    (feature, event) => {
-      if (featureClickEvent) {
-        emit(featureClickEvent, {
-          featureId: feature.id,
-          x: feature.x,
-          z: feature.z ?? feature.y ?? 0,
-          type: feature.type,
-          elevation: feature.elevation
-        });
-      }
-      optionsRef.current.onFeatureClick?.(feature, event);
-    },
-    [featureClickEvent, emit]
-  );
-  const handleCanvasClick = useCallback(
-    (event) => {
-      if (canvasClickEvent) {
-        emit(canvasClickEvent, {
-          clientX: event.clientX,
-          clientY: event.clientY,
-          button: event.button
-        });
-      }
-      optionsRef.current.onCanvasClick?.(event);
-    },
-    [canvasClickEvent, emit]
-  );
-  const handleTileHover = useCallback(
-    (tile, event) => {
-      if (tile) {
-        if (tileHoverEvent) {
-          emit(tileHoverEvent, {
-            tileId: tile.id,
-            x: tile.x,
-            z: tile.z ?? tile.y ?? 0,
-            type: tile.type
-          });
-        }
-      } else {
-        if (tileLeaveEvent) {
-          emit(tileLeaveEvent, {});
-        }
-      }
-      optionsRef.current.onTileHover?.(tile, event);
-    },
-    [tileHoverEvent, tileLeaveEvent, emit]
-  );
-  const handleUnitAnimation = useCallback(
-    (unitId, state) => {
-      if (unitAnimationEvent) {
-        emit(unitAnimationEvent, {
-          unitId,
-          state,
-          timestamp: Date.now()
-        });
-      }
-      optionsRef.current.onUnitAnimation?.(unitId, state);
-    },
-    [unitAnimationEvent, emit]
-  );
-  const handleCameraChange = useCallback(
-    (position) => {
-      if (cameraChangeEvent) {
-        emit(cameraChangeEvent, {
-          position,
-          timestamp: Date.now()
-        });
-      }
-    },
-    [cameraChangeEvent, emit]
-  );
-  return {
-    handleTileClick,
-    handleUnitClick,
-    handleFeatureClick,
-    handleCanvasClick,
-    handleTileHover,
-    handleUnitAnimation,
-    handleCameraChange
-  };
-}
-function detectAssetRoot3(modelUrl) {
-  const idx = modelUrl.indexOf("/3d/");
-  if (idx !== -1) {
-    return modelUrl.substring(0, idx + 4);
-  }
-  return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
-}
-function useGLTFModel2(url, resourceBasePath) {
-  const [state, setState] = useState({
-    model: null,
-    isLoading: false,
-    error: null
-  });
-  useEffect(() => {
-    if (!url) {
-      setState({ model: null, isLoading: false, error: null });
-      return;
-    }
-    console.log("[ModelLoader] Loading:", url);
-    setState((prev) => ({ ...prev, isLoading: true, error: null }));
-    const assetRoot = resourceBasePath || detectAssetRoot3(url);
-    const loader = new GLTFLoader$1();
-    loader.setResourcePath(assetRoot);
-    loader.load(
-      url,
-      (gltf) => {
-        console.log("[ModelLoader] Loaded:", url);
-        setState({
-          model: gltf.scene,
-          isLoading: false,
-          error: null
-        });
-      },
-      void 0,
-      (err) => {
-        const errorMsg = err instanceof Error ? err.message : String(err);
-        console.warn("[ModelLoader] Failed:", url, errorMsg);
-        setState({
-          model: null,
-          isLoading: false,
-          error: err instanceof Error ? err : new Error(String(err))
-        });
-      }
-    );
-  }, [url, resourceBasePath]);
-  return state;
-}
-function ModelLoader({
-  url,
-  position = [0, 0, 0],
-  scale = 1,
-  rotation = [0, 0, 0],
-  isSelected = false,
-  isHovered = false,
-  onClick,
-  onHover,
-  fallbackGeometry = "box",
-  castShadow = true,
-  receiveShadow = true,
-  resourceBasePath
-}) {
-  const { model: loadedModel, isLoading, error } = useGLTFModel2(url, resourceBasePath);
-  const model = useMemo(() => {
-    if (!loadedModel) return null;
-    const cloned = loadedModel.clone();
-    cloned.traverse((child) => {
-      if (child instanceof THREE.Mesh) {
-        child.castShadow = castShadow;
-        child.receiveShadow = receiveShadow;
-      }
-    });
-    return cloned;
-  }, [loadedModel, castShadow, receiveShadow]);
-  const scaleArray = useMemo(() => {
-    if (typeof scale === "number") {
-      return [scale, scale, scale];
-    }
-    return scale;
-  }, [scale]);
-  const rotationRad = useMemo(() => {
-    return [
-      rotation[0] * Math.PI / 180,
-      rotation[1] * Math.PI / 180,
-      rotation[2] * Math.PI / 180
-    ];
-  }, [rotation]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("group", { position, children: /* @__PURE__ */ jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
-      /* @__PURE__ */ jsx("ringGeometry", { args: [0.3, 0.35, 16] }),
-      /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#4a90d9", transparent: true, opacity: 0.8 })
-    ] }) });
-  }
-  if (error || !model) {
-    if (fallbackGeometry === "none") {
-      return /* @__PURE__ */ jsx("group", { position });
-    }
-    const fallbackProps = {
-      onClick,
-      onPointerOver: () => onHover?.(true),
-      onPointerOut: () => onHover?.(false)
-    };
-    return /* @__PURE__ */ jsxs("group", { position, children: [
-      (isSelected || isHovered) && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.02, 0], rotation: [-Math.PI / 2, 0, 0], children: [
-        /* @__PURE__ */ jsx("ringGeometry", { args: [0.6, 0.7, 32] }),
-        /* @__PURE__ */ jsx(
-          "meshBasicMaterial",
-          {
-            color: isSelected ? 16755200 : 16777215,
-            transparent: true,
-            opacity: 0.5
-          }
-        )
-      ] }),
-      fallbackGeometry === "box" && /* @__PURE__ */ jsxs("mesh", { ...fallbackProps, position: [0, 0.5, 0], children: [
-        /* @__PURE__ */ jsx("boxGeometry", { args: [0.8, 0.8, 0.8] }),
-        /* @__PURE__ */ jsx("meshStandardMaterial", { color: error ? 16729156 : 8947848 })
-      ] }),
-      fallbackGeometry === "sphere" && /* @__PURE__ */ jsxs("mesh", { ...fallbackProps, position: [0, 0.5, 0], children: [
-        /* @__PURE__ */ jsx("sphereGeometry", { args: [0.4, 16, 16] }),
-        /* @__PURE__ */ jsx("meshStandardMaterial", { color: error ? 16729156 : 8947848 })
-      ] }),
-      fallbackGeometry === "cylinder" && /* @__PURE__ */ jsxs("mesh", { ...fallbackProps, position: [0, 0.5, 0], children: [
-        /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.3, 0.3, 0.8, 16] }),
-        /* @__PURE__ */ jsx("meshStandardMaterial", { color: error ? 16729156 : 8947848 })
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(
-    "group",
-    {
-      position,
-      rotation: rotationRad,
-      onClick,
-      onPointerOver: () => onHover?.(true),
-      onPointerOut: () => onHover?.(false),
-      children: [
-        (isSelected || isHovered) && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.02, 0], rotation: [-Math.PI / 2, 0, 0], children: [
-          /* @__PURE__ */ jsx("ringGeometry", { args: [0.6, 0.7, 32] }),
-          /* @__PURE__ */ jsx(
-            "meshBasicMaterial",
-            {
-              color: isSelected ? 16755200 : 16777215,
-              transparent: true,
-              opacity: 0.5
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("primitive", { object: model, scale: scaleArray })
-      ]
-    }
-  );
-}
-var DEFAULT_GRID_CONFIG = {
-  cellSize: 1,
-  offsetX: 0,
-  offsetZ: 0
-};
-function CameraController({
-  onCameraChange
-}) {
-  const { camera } = useThree();
-  useEffect(() => {
-    if (onCameraChange) {
-      onCameraChange({
-        x: camera.position.x,
-        y: camera.position.y,
-        z: camera.position.z
-      });
-    }
-  }, [camera.position, onCameraChange]);
-  return null;
-}
-var GameCanvas3D = forwardRef(
-  ({
-    tiles = [],
-    units = [],
-    features = [],
-    events: events2 = [],
-    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 = useRef(null);
-    const controlsRef = useRef(null);
-    const [hoveredTile, setHoveredTile] = useState(null);
-    const [internalError, setInternalError] = 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 = 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 = useMemo(() => {
-      return [
-        (gridBounds.minX + gridBounds.maxX) / 2,
-        0,
-        (gridBounds.minZ + gridBounds.maxZ) / 2
-      ];
-    }, [gridBounds]);
-    const gridConfig = useMemo(
-      () => ({
-        ...DEFAULT_GRID_CONFIG,
-        offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
-        offsetZ: -(gridBounds.maxZ - gridBounds.minZ) / 2
-      }),
-      [gridBounds]
-    );
-    const gridToWorld = 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]
-    );
-    useImperativeHandle(ref, () => ({
-      getCameraPosition: () => {
-        if (controlsRef.current) {
-          const pos = controlsRef.current.object.position;
-          return new THREE.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 = useCallback(
-      (tile, event) => {
-        eventHandlers.handleTileClick(tile, event);
-      },
-      [eventHandlers]
-    );
-    const handleUnitClick = useCallback(
-      (unit, event) => {
-        eventHandlers.handleUnitClick(unit, event);
-      },
-      [eventHandlers]
-    );
-    const handleFeatureClick = useCallback(
-      (feature, event) => {
-        if (event) {
-          eventHandlers.handleFeatureClick(feature, event);
-        }
-      },
-      [eventHandlers]
-    );
-    const handleTileHover = useCallback(
-      (tile, event) => {
-        setHoveredTile(tile);
-        if (event) {
-          eventHandlers.handleTileHover(tile, event);
-        }
-      },
-      [eventHandlers]
-    );
-    const cameraConfig = 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 = 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__ */ 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__ */ jsx("boxGeometry", { args: [0.95, 0.2, 0.95] }),
-              /* @__PURE__ */ jsx("meshStandardMaterial", { color, emissive })
-            ]
-          }
-        );
-      },
-      [selectedTileIds, hoveredTile, validMoves, attackTargets, handleTileClick, handleTileHover]
-    );
-    const DefaultUnitRenderer = useCallback(
-      ({ unit, position }) => {
-        const isSelected = selectedUnitId === unit.id;
-        const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
-        return /* @__PURE__ */ jsxs(
-          "group",
-          {
-            position,
-            onClick: (e) => handleUnitClick(unit, e),
-            userData: { type: "unit", unitId: unit.id },
-            children: [
-              isSelected && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.05, 0], rotation: [-Math.PI / 2, 0, 0], children: [
-                /* @__PURE__ */ jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
-                /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#ffff00", transparent: true, opacity: 0.8 })
-              ] }),
-              /* @__PURE__ */ jsxs("mesh", { position: [0, 0.3, 0], children: [
-                /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.3, 0.3, 0.1, 8] }),
-                /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-              ] }),
-              /* @__PURE__ */ jsxs("mesh", { position: [0, 0.6, 0], children: [
-                /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.2, 0.4, 4, 8] }),
-                /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-              ] }),
-              /* @__PURE__ */ jsxs("mesh", { position: [0, 0.9, 0], children: [
-                /* @__PURE__ */ jsx("sphereGeometry", { args: [0.12, 8, 8] }),
-                /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-              ] }),
-              unit.health !== void 0 && unit.maxHealth !== void 0 && /* @__PURE__ */ jsxs("group", { position: [0, 1.2, 0], children: [
-                /* @__PURE__ */ jsxs("mesh", { position: [-0.25, 0, 0], children: [
-                  /* @__PURE__ */ jsx("planeGeometry", { args: [0.5, 0.05] }),
-                  /* @__PURE__ */ jsx("meshBasicMaterial", { color: 3355443 })
-                ] }),
-                /* @__PURE__ */ jsxs(
-                  "mesh",
-                  {
-                    position: [
-                      -0.25 + 0.5 * (unit.health / unit.maxHealth) / 2,
-                      0,
-                      0.01
-                    ],
-                    children: [
-                      /* @__PURE__ */ jsx("planeGeometry", { args: [0.5 * (unit.health / unit.maxHealth), 0.05] }),
-                      /* @__PURE__ */ jsx(
-                        "meshBasicMaterial",
-                        {
-                          color: unit.health / unit.maxHealth > 0.5 ? 4500036 : unit.health / unit.maxHealth > 0.25 ? 11184708 : 16729156
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] })
-            ]
-          }
-        );
-      },
-      [selectedUnitId, handleUnitClick]
-    );
-    const DefaultFeatureRenderer = useCallback(
-      ({
-        feature,
-        position
-      }) => {
-        if (feature.assetUrl) {
-          return /* @__PURE__ */ 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__ */ jsxs(
-            "group",
-            {
-              position,
-              onClick: (e) => handleFeatureClick(feature, e),
-              userData: { type: "feature", featureId: feature.id },
-              children: [
-                /* @__PURE__ */ jsxs("mesh", { position: [0, 0.4, 0], children: [
-                  /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.1, 0.15, 0.8, 6] }),
-                  /* @__PURE__ */ jsx("meshStandardMaterial", { color: 9127187 })
-                ] }),
-                /* @__PURE__ */ jsxs("mesh", { position: [0, 0.9, 0], children: [
-                  /* @__PURE__ */ jsx("coneGeometry", { args: [0.5, 0.8, 8] }),
-                  /* @__PURE__ */ jsx("meshStandardMaterial", { color: 2263842 })
-                ] })
-              ]
-            }
-          );
-        }
-        if (feature.type === "rock") {
-          return /* @__PURE__ */ jsxs(
-            "mesh",
-            {
-              position: [position[0], position[1] + 0.3, position[2]],
-              onClick: (e) => handleFeatureClick(feature, e),
-              userData: { type: "feature", featureId: feature.id },
-              children: [
-                /* @__PURE__ */ jsx("dodecahedronGeometry", { args: [0.3, 0] }),
-                /* @__PURE__ */ jsx("meshStandardMaterial", { color: 8421504 })
-              ]
-            }
-          );
-        }
-        return null;
-      },
-      [handleFeatureClick]
-    );
-    if (externalLoading || assetsLoading && preloadAssets.length > 0) {
-      return /* @__PURE__ */ jsx(
-        Canvas3DLoadingState,
-        {
-          progress,
-          loaded,
-          total,
-          message: loadingMessage,
-          className
-        }
-      );
-    }
-    const displayError = externalError || internalError;
-    if (displayError) {
-      return /* @__PURE__ */ jsx(Canvas3DErrorBoundary, { children: /* @__PURE__ */ jsx("div", { className: "game-canvas-3d game-canvas-3d--error", children: /* @__PURE__ */ jsxs("div", { className: "game-canvas-3d__error", children: [
-        "Error: ",
-        displayError
-      ] }) }) });
-    }
-    return /* @__PURE__ */ jsx(
-      Canvas3DErrorBoundary,
-      {
-        onError: (err) => setInternalError(err.message),
-        onReset: () => setInternalError(null),
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: containerRef,
-            className: `game-canvas-3d ${className || ""}`,
-            "data-orientation": orientation,
-            "data-camera-mode": cameraMode,
-            "data-overlay": overlay,
-            children: [
-              /* @__PURE__ */ jsxs(
-                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__ */ jsx(CameraController, { onCameraChange: eventHandlers.handleCameraChange }),
-                    /* @__PURE__ */ jsx("ambientLight", { intensity: 0.6 }),
-                    /* @__PURE__ */ jsx(
-                      "directionalLight",
-                      {
-                        position: [10, 20, 10],
-                        intensity: 0.8,
-                        castShadow: shadows,
-                        "shadow-mapSize": [2048, 2048]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("hemisphereLight", { intensity: 0.3, color: "#87ceeb", groundColor: "#362d1d" }),
-                    showGrid && /* @__PURE__ */ jsx(
-                      Grid$1,
-                      {
-                        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 = gridToWorld(
-                        tile.x,
-                        tile.z ?? tile.y ?? 0,
-                        tile.elevation ?? 0
-                      );
-                      const Renderer = CustomTileRenderer || DefaultTileRenderer;
-                      return /* @__PURE__ */ jsx(Renderer, { tile, position }, tile.id ?? `tile-${index}`);
-                    }),
-                    features.map((feature, index) => {
-                      const position = gridToWorld(
-                        feature.x,
-                        feature.z ?? feature.y ?? 0,
-                        (feature.elevation ?? 0) + 0.5
-                      );
-                      const Renderer = CustomFeatureRenderer || DefaultFeatureRenderer;
-                      return /* @__PURE__ */ jsx(Renderer, { feature, position }, feature.id ?? `feature-${index}`);
-                    }),
-                    units.map((unit) => {
-                      const position = gridToWorld(
-                        unit.x ?? 0,
-                        unit.z ?? unit.y ?? 0,
-                        (unit.elevation ?? 0) + 0.5
-                      );
-                      const Renderer = CustomUnitRenderer || DefaultUnitRenderer;
-                      return /* @__PURE__ */ jsx(Renderer, { unit, position }, unit.id);
-                    }),
-                    children,
-                    /* @__PURE__ */ jsx(
-                      OrbitControls,
-                      {
-                        ref: controlsRef,
-                        target: cameraTarget,
-                        enableDamping: true,
-                        dampingFactor: 0.05,
-                        minDistance: 2,
-                        maxDistance: 100,
-                        maxPolarAngle: Math.PI / 2 - 0.1
-                      }
-                    )
-                  ]
-                }
-              ),
-              showCoordinates && hoveredTile && /* @__PURE__ */ jsxs("div", { className: "game-canvas-3d__coordinates", children: [
-                "X: ",
-                hoveredTile.x,
-                ", Z: ",
-                hoveredTile.z ?? hoveredTile.y ?? 0
-              ] }),
-              showTileInfo && hoveredTile && /* @__PURE__ */ jsxs("div", { className: "game-canvas-3d__tile-info", children: [
-                /* @__PURE__ */ jsx("div", { className: "tile-info__type", children: hoveredTile.type }),
-                hoveredTile.terrain && /* @__PURE__ */ jsx("div", { className: "tile-info__terrain", children: hoveredTile.terrain })
-              ] })
-            ]
-          }
-        )
+      Box,
+      {
+        className: "w-full overflow-auto p-4 font-mono text-sm",
+        style: { height, fontSize: `${zoom}%` },
+        children: /* @__PURE__ */ jsx(Typography, { variant: "body", className: "whitespace-pre-wrap break-words", children: activeContent })
       }
     );
-  }
-);
-GameCanvas3D.displayName = "GameCanvas3D";
-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__ */ jsxs(Box, { className: cn("game-canvas-3d-battle-template", className), children: [
-    /* @__PURE__ */ jsx(
-      GameCanvas3D,
+  };
+  return /* @__PURE__ */ jsx(Card, { className: cn("overflow-hidden", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "none", children: [
+    tabItems && tabItems.length > 1 && /* @__PURE__ */ jsx(Box, { className: "border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsx(
+      Tabs,
       {
-        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"
+        tabs: tabItems,
+        activeTab: `doc-${activeDocIndex}`,
+        onTabChange: (id) => {
+          const idx = parseInt(id.replace("doc-", ""), 10);
+          setActiveDocIndex(idx);
+        }
       }
-    ),
-    resolved.currentTurn && /* @__PURE__ */ jsxs(
+    ) }),
+    showToolbar && /* @__PURE__ */ jsxs(
       HStack,
       {
         gap: "sm",
         align: "center",
-        className: cn("battle-template__turn-indicator", `battle-template__turn-indicator--${resolved.currentTurn}`),
+        justify: "between",
+        className: "px-4 py-2 border-b border-[var(--color-border)] bg-[var(--color-muted)]/30",
         children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "body", className: "turn-indicator__label", children: resolved.currentTurn === "player" ? "Your Turn" : "Enemy's Turn" }),
-          resolved.round && /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "turn-indicator__round", children: [
-            "Round ",
-            resolved.round
+          /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
+            /* @__PURE__ */ jsx(Icon, { icon: FileText, size: "sm", className: "text-[var(--color-muted-foreground)]" }),
+            title && /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "truncate max-w-[200px]", children: title })
+          ] }),
+          /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: ZoomOut, onClick: handleZoomOut }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", className: "tabular-nums w-10 text-center", children: [
+              zoom,
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: ZoomIn, onClick: handleZoomIn }),
+            totalPages && totalPages > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Box, { className: "w-px h-4 bg-[var(--color-border)] mx-1" }),
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: ChevronLeft, onClick: handlePagePrev, disabled: currentPage <= 1 }),
+              /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", className: "tabular-nums", children: [
+                currentPage,
+                " / ",
+                totalPages
+              ] }),
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: ChevronRight, onClick: handlePageNext, disabled: currentPage >= totalPages })
+            ] }),
+            /* @__PURE__ */ jsx(Box, { className: "w-px h-4 bg-[var(--color-border)] mx-1" }),
+            showDownload && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: Download, onClick: handleDownload }),
+            showPrint && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: Printer, onClick: handlePrint }),
+            actions?.map((action, idx) => /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "default",
+                className: "cursor-pointer hover:opacity-80 transition-opacity",
+                onClick: () => handleAction(action),
+                children: action.label
+              },
+              idx
+            ))
           ] })
         ]
       }
-    )
-  ] });
-}
-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__ */ jsxs(VStack, { className: cn("game-canvas-3d-castle-template", className), children: [
-    showHeader && resolved.name && /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "center", className: "castle-template__header", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h2", className: "header__name", children: resolved.name }),
-      resolved.level && /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "header__level", children: [
-        "Level ",
-        resolved.level
-      ] }),
-      resolved.owner && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "header__owner", children: resolved.owner })
-    ] }),
-    /* @__PURE__ */ 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__ */ jsxs(HStack, { gap: "sm", align: "center", className: "castle-template__garrison-info", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "garrison-info__label", children: "Garrison:" }),
-      /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "bold", className: "garrison-info__count", children: [
-        resolved.units.length,
-        " units"
-      ] })
-    ] })
-  ] });
+    /* @__PURE__ */ jsx(Box, { className: "w-full overflow-hidden bg-[var(--color-muted)]/20", children: renderContent() })
+  ] }) });
+};
+DocumentViewer.displayName = "DocumentViewer";
+function extractTitle(children) {
+  if (!React87__default.isValidElement(children)) return void 0;
+  const props = children.props;
+  if (typeof props.title === "string") {
+    return props.title;
+  }
+  return void 0;
 }
-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,
+var DrawerSlot = ({
+  children,
+  title: overrideTitle,
+  position = "right",
+  size = "md",
   className
-}) {
-  const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
-  if (!resolved) return null;
+}) => {
+  const eventBus = useEventBus();
+  const isOpen = Boolean(children);
+  const title = overrideTitle || extractTitle(children);
+  const handleClose = () => {
+    eventBus.emit("UI:CLOSE");
+    eventBus.emit("UI:CANCEL");
+  };
+  if (!isOpen) return null;
   return /* @__PURE__ */ jsx(
-    GameCanvas3D,
+    Drawer,
     {
-      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
+      isOpen,
+      onClose: handleClose,
+      title,
+      position,
+      width: size,
+      className,
+      children
     }
   );
-}
-GameCanvas3DWorldMapTemplate.displayName = "GameCanvas3DWorldMapTemplate";
+};
+DrawerSlot.displayName = "DrawerSlot";
 var GameShell = ({
   appName = "Game",
   hud,
@@ -32189,55 +30315,6 @@ var GraphCanvas = ({
   ] }) });
 };
 GraphCanvas.displayName = "GraphCanvas";
-function Lighting3D({
-  ambientIntensity = 0.6,
-  ambientColor = "#ffffff",
-  directionalIntensity = 0.8,
-  directionalColor = "#ffffff",
-  directionalPosition = [10, 20, 10],
-  shadows = true,
-  shadowMapSize = 2048,
-  shadowCameraSize = 20,
-  showHelpers = false
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("ambientLight", { intensity: ambientIntensity, color: ambientColor }),
-    /* @__PURE__ */ jsx(
-      "directionalLight",
-      {
-        position: directionalPosition,
-        intensity: directionalIntensity,
-        color: directionalColor,
-        castShadow: shadows,
-        "shadow-mapSize": [shadowMapSize, shadowMapSize],
-        "shadow-camera-left": -shadowCameraSize,
-        "shadow-camera-right": shadowCameraSize,
-        "shadow-camera-top": shadowCameraSize,
-        "shadow-camera-bottom": -shadowCameraSize,
-        "shadow-camera-near": 0.1,
-        "shadow-camera-far": 100,
-        "shadow-bias": -1e-3
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "hemisphereLight",
-      {
-        intensity: 0.3,
-        color: "#87ceeb",
-        groundColor: "#362d1d"
-      }
-    ),
-    showHelpers && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-      "directionalLightHelper",
-      {
-        args: [
-          new THREE.DirectionalLight(directionalColor, directionalIntensity),
-          5
-        ]
-      }
-    ) })
-  ] });
-}
 var COLUMN_CLASSES = {
   2: "grid-cols-2",
   3: "grid-cols-2 sm:grid-cols-3",
@@ -32480,92 +30557,6 @@ var ModalSlot = ({
   );
 };
 ModalSlot.displayName = "ModalSlot";
-function PhysicsObject3D({
-  entityId,
-  modelUrl,
-  initialPosition = [0, 0, 0],
-  initialVelocity = [0, 0, 0],
-  mass = 1,
-  gravity = 9.8,
-  groundY = 0,
-  scale = 1,
-  onPhysicsUpdate,
-  onGroundHit,
-  onCollision
-}) {
-  const groupRef = useRef(null);
-  const physicsStateRef = useRef({
-    id: entityId,
-    x: initialPosition[0],
-    y: initialPosition[1],
-    z: initialPosition[2],
-    vx: initialVelocity[0],
-    vy: initialVelocity[1],
-    vz: initialVelocity[2],
-    rx: 0,
-    ry: 0,
-    rz: 0,
-    isGrounded: false,
-    gravity,
-    friction: 0.8,
-    mass,
-    state: "Active"
-  });
-  const groundHitRef = useRef(false);
-  useEffect(() => {
-    if (groupRef.current) {
-      groupRef.current.position.set(
-        initialPosition[0],
-        initialPosition[1],
-        initialPosition[2]
-      );
-    }
-  }, []);
-  useFrame((state, delta) => {
-    const physics = physicsStateRef.current;
-    if (physics.state !== "Active") return;
-    const dt = Math.min(delta, 0.1);
-    if (!physics.isGrounded) {
-      physics.vy -= physics.gravity * dt;
-    }
-    physics.x += physics.vx * dt;
-    physics.y += physics.vy * dt;
-    physics.z += physics.vz * dt;
-    const airResistance = Math.pow(0.99, dt * 60);
-    physics.vx *= airResistance;
-    physics.vz *= airResistance;
-    if (physics.y <= groundY) {
-      physics.y = groundY;
-      if (!physics.isGrounded) {
-        physics.isGrounded = true;
-        groundHitRef.current = true;
-        physics.vx *= physics.friction;
-        physics.vz *= physics.friction;
-        onGroundHit?.();
-      }
-      physics.vy = 0;
-    } else {
-      physics.isGrounded = false;
-    }
-    if (groupRef.current) {
-      groupRef.current.position.set(physics.x, physics.y, physics.z);
-      if (!physics.isGrounded) {
-        physics.rx += physics.vz * dt * 0.5;
-        physics.rz -= physics.vx * dt * 0.5;
-        groupRef.current.rotation.set(physics.rx, physics.ry, physics.rz);
-      }
-    }
-    onPhysicsUpdate?.({ ...physics });
-  });
-  const scaleArray = typeof scale === "number" ? [scale, scale, scale] : scale;
-  return /* @__PURE__ */ jsx("group", { ref: groupRef, scale: scaleArray, children: /* @__PURE__ */ jsx(
-    ModelLoader,
-    {
-      url: modelUrl,
-      fallbackGeometry: "box"
-    }
-  ) });
-}
 
 // lib/traitRegistry.ts
 var traits = /* @__PURE__ */ new Map();
@@ -33713,30 +31704,6 @@ function RuntimeDebugger({
   );
 }
 RuntimeDebugger.displayName = "RuntimeDebugger";
-function Scene3D({ background = "#1a1a2e", fog, children }) {
-  const { scene } = useThree();
-  const initializedRef = useRef(false);
-  useEffect(() => {
-    if (initializedRef.current) return;
-    initializedRef.current = true;
-    if (background.startsWith("#") || background.startsWith("rgb")) {
-      scene.background = new THREE.Color(background);
-    } else {
-      const loader = new THREE.TextureLoader();
-      loader.load(background, (texture) => {
-        scene.background = texture;
-      });
-    }
-    if (fog) {
-      scene.fog = new THREE.Fog(fog.color, fog.near, fog.far);
-    }
-    return () => {
-      scene.background = null;
-      scene.fog = null;
-    };
-  }, [scene, background, fog]);
-  return /* @__PURE__ */ jsx(Fragment, { children });
-}
 var SignaturePad = ({
   label = "Signature",
   helperText = "Draw your signature above",
@@ -33913,174 +31880,6 @@ var SignaturePad = ({
   ] }) });
 };
 SignaturePad.displayName = "SignaturePad";
-var DEFAULT_TERRAIN_COLORS = {
-  grass: "#44aa44",
-  dirt: "#8b7355",
-  sand: "#ddcc88",
-  water: "#4488cc",
-  rock: "#888888",
-  snow: "#eeeeee",
-  forest: "#228b22",
-  desert: "#d4a574",
-  mountain: "#696969",
-  swamp: "#556b2f"
-};
-function TileRenderer({
-  tiles,
-  cellSize = 1,
-  offsetX = 0,
-  offsetZ = 0,
-  useInstancing = true,
-  terrainColors = DEFAULT_TERRAIN_COLORS,
-  onTileClick,
-  onTileHover,
-  selectedTileIds = [],
-  validMoves = [],
-  attackTargets = []
-}) {
-  const meshRef = useRef(null);
-  const geometry = useMemo(() => {
-    return new THREE.BoxGeometry(cellSize * 0.95, 0.2, cellSize * 0.95);
-  }, [cellSize]);
-  const material = useMemo(() => {
-    return new THREE.MeshStandardMaterial({
-      roughness: 0.8,
-      metalness: 0.1
-    });
-  }, []);
-  const { positions, colors, tileMap } = useMemo(() => {
-    const pos = [];
-    const cols = [];
-    const map = /* @__PURE__ */ new Map();
-    tiles.forEach((tile) => {
-      const x = (tile.x - offsetX) * cellSize;
-      const z = ((tile.z ?? tile.y ?? 0) - offsetZ) * cellSize;
-      const y = (tile.elevation ?? 0) * 0.1;
-      pos.push(new THREE.Vector3(x, y, z));
-      const colorHex = terrainColors[tile.type || ""] || terrainColors[tile.terrain || ""] || "#808080";
-      const color = new THREE.Color(colorHex);
-      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)
-      );
-      const isSelected = tile.id ? selectedTileIds.includes(tile.id) : false;
-      if (isSelected) {
-        color.addScalar(0.3);
-      } else if (isAttackTarget) {
-        color.setHex(16729156);
-      } else if (isValidMove) {
-        color.setHex(4521796);
-      }
-      cols.push(color);
-      map.set(`${tile.x},${tile.z ?? tile.y ?? 0}`, tile);
-    });
-    return { positions: pos, colors: cols, tileMap: map };
-  }, [tiles, cellSize, offsetX, offsetZ, terrainColors, selectedTileIds, validMoves, attackTargets]);
-  useEffect(() => {
-    if (!meshRef.current || !useInstancing) return;
-    const mesh = meshRef.current;
-    mesh.count = positions.length;
-    const dummy = new THREE.Object3D();
-    positions.forEach((pos, i) => {
-      dummy.position.copy(pos);
-      dummy.updateMatrix();
-      mesh.setMatrixAt(i, dummy.matrix);
-      if (mesh.setColorAt) {
-        mesh.setColorAt(i, colors[i]);
-      }
-    });
-    mesh.instanceMatrix.needsUpdate = true;
-    if (mesh.instanceColor) {
-      mesh.instanceColor.needsUpdate = true;
-    }
-  }, [positions, colors, useInstancing]);
-  const handlePointerMove = (e) => {
-    if (!onTileHover) return;
-    const instanceId = e.instanceId;
-    if (instanceId !== void 0) {
-      const pos = positions[instanceId];
-      if (pos) {
-        const gridX = Math.round(pos.x / cellSize + offsetX);
-        const gridZ = Math.round(pos.z / cellSize + offsetZ);
-        const tile = tileMap.get(`${gridX},${gridZ}`);
-        if (tile) {
-          onTileHover(tile);
-        }
-      }
-    }
-  };
-  const handleClick = (e) => {
-    if (!onTileClick) return;
-    const instanceId = e.instanceId;
-    if (instanceId !== void 0) {
-      const pos = positions[instanceId];
-      if (pos) {
-        const gridX = Math.round(pos.x / cellSize + offsetX);
-        const gridZ = Math.round(pos.z / cellSize + offsetZ);
-        const tile = tileMap.get(`${gridX},${gridZ}`);
-        if (tile) {
-          onTileClick(tile);
-        }
-      }
-    }
-  };
-  const renderIndividualTiles = () => {
-    return tiles.map((tile) => {
-      const x = (tile.x - offsetX) * cellSize;
-      const z = ((tile.z ?? tile.y ?? 0) - offsetZ) * cellSize;
-      const y = (tile.elevation ?? 0) * 0.1;
-      const colorHex = terrainColors[tile.type || ""] || terrainColors[tile.terrain || ""] || "#808080";
-      const isSelected = tile.id ? selectedTileIds.includes(tile.id) : false;
-      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 emissive = "#000000";
-      if (isSelected) emissive = "#444444";
-      else if (isAttackTarget) emissive = "#440000";
-      else if (isValidMove) emissive = "#004400";
-      return /* @__PURE__ */ jsxs(
-        "mesh",
-        {
-          position: [x, y, z],
-          userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
-          onClick: () => onTileClick?.(tile),
-          onPointerEnter: () => onTileHover?.(tile),
-          onPointerLeave: () => onTileHover?.(null),
-          children: [
-            /* @__PURE__ */ jsx("boxGeometry", { args: [cellSize * 0.95, 0.2, cellSize * 0.95] }),
-            /* @__PURE__ */ jsx(
-              "meshStandardMaterial",
-              {
-                color: colorHex,
-                emissive,
-                roughness: 0.8,
-                metalness: 0.1
-              }
-            )
-          ]
-        },
-        tile.id ?? `tile-${tile.x}-${tile.y}`
-      );
-    });
-  };
-  if (useInstancing && tiles.length > 0) {
-    return /* @__PURE__ */ jsx(
-      "instancedMesh",
-      {
-        ref: meshRef,
-        args: [geometry, material, tiles.length],
-        onPointerMove: handlePointerMove,
-        onClick: handleClick
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx("group", { children: renderIndividualTiles() });
-}
 var STATUS_STYLES3 = {
   complete: {
     dotColor: "text-[var(--color-success)]",
@@ -34262,111 +32061,6 @@ var ToastSlot = ({
   ) });
 };
 ToastSlot.displayName = "ToastSlot";
-function UnitVisual({ unit, position, isSelected, onClick }) {
-  const groupRef = useRef(null);
-  const [animationState, setAnimationState] = useState("idle");
-  const [isHovered, setIsHovered] = useState(false);
-  const teamColor = useMemo(() => {
-    if (unit.faction === "player" || unit.team === "player") return 4491519;
-    if (unit.faction === "enemy" || unit.team === "enemy") return 16729156;
-    if (unit.faction === "neutral" || unit.team === "neutral") return 16777028;
-    return 8947848;
-  }, [unit.faction, unit.team]);
-  useFrame((state) => {
-    if (groupRef.current && animationState === "idle") {
-      const y = position[1] + Math.sin(state.clock.elapsedTime * 2 + position[0]) * 0.05;
-      groupRef.current.position.y = y;
-    }
-  });
-  const healthPercent = useMemo(() => {
-    if (unit.health === void 0 || unit.maxHealth === void 0) return 1;
-    return Math.max(0, Math.min(1, unit.health / unit.maxHealth));
-  }, [unit.health, unit.maxHealth]);
-  const healthColor = useMemo(() => {
-    if (healthPercent > 0.5) return "#44aa44";
-    if (healthPercent > 0.25) return "#aaaa44";
-    return "#ff4444";
-  }, [healthPercent]);
-  return /* @__PURE__ */ jsxs(
-    "group",
-    {
-      ref: groupRef,
-      position,
-      onClick,
-      onPointerEnter: () => setIsHovered(true),
-      onPointerLeave: () => setIsHovered(false),
-      userData: { type: "unit", unitId: unit.id },
-      children: [
-        isSelected && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.05, 0], rotation: [-Math.PI / 2, 0, 0], children: [
-          /* @__PURE__ */ jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
-          /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#ffff00", transparent: true, opacity: 0.8 })
-        ] }),
-        isHovered && !isSelected && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.05, 0], rotation: [-Math.PI / 2, 0, 0], children: [
-          /* @__PURE__ */ jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
-          /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#ffffff", transparent: true, opacity: 0.5 })
-        ] }),
-        /* @__PURE__ */ jsxs("mesh", { position: [0, 0.1, 0], children: [
-          /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.25, 0.25, 0.1, 8] }),
-          /* @__PURE__ */ jsx("meshStandardMaterial", { color: teamColor })
-        ] }),
-        /* @__PURE__ */ jsxs("mesh", { position: [0, 0.5, 0], children: [
-          /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.15, 0.5, 4, 8] }),
-          /* @__PURE__ */ jsx("meshStandardMaterial", { color: teamColor })
-        ] }),
-        /* @__PURE__ */ jsxs("mesh", { position: [0, 0.9, 0], children: [
-          /* @__PURE__ */ jsx("sphereGeometry", { args: [0.12, 8, 8] }),
-          /* @__PURE__ */ jsx("meshStandardMaterial", { color: teamColor })
-        ] }),
-        /* @__PURE__ */ jsxs("mesh", { position: [0, 1.3, 0], children: [
-          /* @__PURE__ */ jsx("planeGeometry", { args: [0.5, 0.06] }),
-          /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#333333" })
-        ] }),
-        /* @__PURE__ */ jsxs("mesh", { position: [-0.25 + 0.25 * healthPercent, 1.3, 0.01], children: [
-          /* @__PURE__ */ jsx("planeGeometry", { args: [0.5 * healthPercent, 0.04] }),
-          /* @__PURE__ */ jsx("meshBasicMaterial", { color: healthColor })
-        ] }),
-        unit.name && /* @__PURE__ */ jsxs("mesh", { position: [0, 1.5, 0], children: [
-          /* @__PURE__ */ jsx("planeGeometry", { args: [0.4, 0.1] }),
-          /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#000000", transparent: true, opacity: 0.5 })
-        ] })
-      ]
-    }
-  );
-}
-function UnitRenderer({
-  units,
-  cellSize = 1,
-  offsetX = 0,
-  offsetZ = 0,
-  selectedUnitId,
-  onUnitClick,
-  onAnimationStateChange,
-  animationSpeed = 1
-}) {
-  const handleUnitClick = React87__default.useCallback(
-    (unit) => {
-      onUnitClick?.(unit);
-    },
-    [onUnitClick]
-  );
-  return /* @__PURE__ */ jsx("group", { children: units.map((unit) => {
-    const unitX = unit.x ?? unit.position?.x ?? 0;
-    const unitY = unit.z ?? unit.y ?? unit.position?.y ?? 0;
-    const x = (unitX - offsetX) * cellSize;
-    const z = (unitY - offsetZ) * cellSize;
-    const y = (unit.elevation ?? 0) * 0.1 + 0.5;
-    return /* @__PURE__ */ jsx(
-      UnitVisual,
-      {
-        unit,
-        position: [x, y, z],
-        isSelected: selectedUnitId === unit.id,
-        onClick: () => handleUnitClick(unit)
-      },
-      unit.id
-    );
-  }) });
-}
 function WorldMapTemplate({
   entity,
   scale = 0.4,
@@ -34394,6 +32088,33 @@ function WorldMapTemplate({
 WorldMapTemplate.displayName = "WorldMapTemplate";
 
 // components/organisms/component-registry.generated.ts
+function lazyThree(name, loader) {
+  const Lazy = React87__default.lazy(() => loader().then((m) => ({ default: m[name] })));
+  function ThreeWrapper(props) {
+    return React87__default.createElement(
+      React87__default.Suspense,
+      { fallback: null },
+      React87__default.createElement(Lazy, props)
+    );
+  }
+  ThreeWrapper.displayName = `Lazy(${name})`;
+  return ThreeWrapper;
+}
+var Camera3D = lazyThree("Camera3D", () => import('@almadar/ui/components/organisms/game/three'));
+var Canvas3DErrorBoundary = lazyThree("Canvas3DErrorBoundary", () => import('@almadar/ui/components/organisms/game/three'));
+var Canvas3DLoadingState = lazyThree("Canvas3DLoadingState", () => import('@almadar/ui/components/organisms/game/three'));
+var FeatureRenderer = lazyThree("FeatureRenderer", () => import('@almadar/ui/components/organisms/game/three'));
+var FeatureRenderer3D = lazyThree("FeatureRenderer3D", () => import('@almadar/ui/components/organisms/game/three'));
+var GameCanvas3D = lazyThree("GameCanvas3D", () => import('@almadar/ui/components/organisms/game/three'));
+var GameCanvas3DBattleTemplate = lazyThree("GameCanvas3DBattleTemplate", () => import('@almadar/ui/components/organisms/game/three'));
+var GameCanvas3DCastleTemplate = lazyThree("GameCanvas3DCastleTemplate", () => import('@almadar/ui/components/organisms/game/three'));
+var GameCanvas3DWorldMapTemplate = lazyThree("GameCanvas3DWorldMapTemplate", () => import('@almadar/ui/components/organisms/game/three'));
+var Lighting3D = lazyThree("Lighting3D", () => import('@almadar/ui/components/organisms/game/three'));
+var ModelLoader = lazyThree("ModelLoader", () => import('@almadar/ui/components/organisms/game/three'));
+var PhysicsObject3D = lazyThree("PhysicsObject3D", () => import('@almadar/ui/components/organisms/game/three'));
+var Scene3D = lazyThree("Scene3D", () => import('@almadar/ui/components/organisms/game/three'));
+var TileRenderer = lazyThree("TileRenderer", () => import('@almadar/ui/components/organisms/game/three'));
+var UnitRenderer = lazyThree("UnitRenderer", () => import('@almadar/ui/components/organisms/game/three'));
 var COMPONENT_REGISTRY = {
   "Accordion": AccordionPattern,
   "AccordionPattern": AccordionPattern,