@almadar/ui 2.16.0 → 2.16.1

package/dist/runtime/index.js

@@ -1,5 +1,5 @@
-import * as React113 from 'react';
-import React113__default, { createContext, useCallback, useState, useRef, useLayoutEffect, useEffect, forwardRef, useImperativeHandle, lazy, useMemo, useContext, Component } from 'react';
+import * as React110 from 'react';
+import React110__default, { createContext, useCallback, useState, useRef, useLayoutEffect, useEffect, lazy, useContext, useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import '@tanstack/react-query';
 import 'react-dom';
@@ -20,12 +20,6 @@ import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism';
 import dark from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus';
-import { useThree, useFrame, Canvas } from '@react-three/fiber';
-import { OrbitControls, Grid } 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 { isCircuitEvent, schemaToIR, getPage, clearSchemaCache as clearSchemaCache$1 } from '@almadar/core';
 import { StateMachineManager, createContextFromBindings, interpolateValue, EffectExecutor } from '@almadar/runtime';
 
@@ -103,15 +97,6 @@ function useEventBus() {
   const context = useContext(EventBusContext);
   return context ?? getGlobalEventBus() ?? fallbackEventBus;
 }
-function useEmitEvent() {
-  const eventBus = useEventBus();
-  return useCallback(
-    (type, payload) => {
-      eventBus.emit(type, payload);
-    },
-    [eventBus]
-  );
-}
 createContext(null);
 createContext(null);
 
@@ -384,7 +369,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React113__default.forwardRef(
+var Box = React110__default.forwardRef(
   ({
     padding,
     paddingX,
@@ -403,7 +388,7 @@ var Box = React113__default.forwardRef(
     position,
     className,
     children,
-    as: Component2 = "div",
+    as: Component = "div",
     action,
     actionPayload,
     hoverEvent,
@@ -433,7 +418,7 @@ var Box = React113__default.forwardRef(
       onMouseLeave?.(e);
     }, [hoverEvent, eventBus, onMouseLeave]);
     const isClickable = action || onClick;
-    const Comp = Component2;
+    const Comp = Component;
     return /* @__PURE__ */ jsx(
       Comp,
       {
@@ -563,8 +548,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,
     {
@@ -654,7 +639,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React113__default.isValidElement(value)) {
+  if (React110__default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -663,7 +648,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React113__default.forwardRef(
+var Button = React110__default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -758,7 +743,7 @@ var sizeStyles3 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React113__default.forwardRef(
+var Badge = React110__default.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, children, ...props }, ref) => {
     const iconSizes2 = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
     const resolvedIcon = typeof icon === "string" ? (() => {
@@ -785,7 +770,7 @@ var Badge = React113__default.forwardRef(
   }
 );
 Badge.displayName = "Badge";
-var Input = React113__default.forwardRef(
+var Input = React110__default.forwardRef(
   ({
     className,
     inputType,
@@ -897,7 +882,7 @@ var Input = React113__default.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Label = React113__default.forwardRef(
+var Label = React110__default.forwardRef(
   ({ className, required, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "label",
@@ -917,7 +902,7 @@ var Label = React113__default.forwardRef(
   }
 );
 Label.displayName = "Label";
-var Textarea = React113__default.forwardRef(
+var Textarea = React110__default.forwardRef(
   ({ className, error, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -940,7 +925,7 @@ var Textarea = React113__default.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var Select = React113__default.forwardRef(
+var Select = React110__default.forwardRef(
   ({ className, options, placeholder, error, ...props }, ref) => {
     return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsxs(
@@ -976,7 +961,7 @@ var Select = React113__default.forwardRef(
   }
 );
 Select.displayName = "Select";
-var Checkbox = React113__default.forwardRef(
+var Checkbox = React110__default.forwardRef(
   ({ className, label, id, ...props }, ref) => {
     const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -1050,7 +1035,7 @@ var shadowStyles2 = {
   md: "shadow-[var(--shadow-main)]",
   lg: "shadow-[var(--shadow-lg)]"
 };
-var Card = React113__default.forwardRef(
+var Card = React110__default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -1086,9 +1071,9 @@ var Card = React113__default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React113__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React110__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React113__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React110__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -1101,11 +1086,11 @@ var CardTitle = React113__default.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React113__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React110__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React113__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React110__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1120,7 +1105,7 @@ var sizeStyles4 = {
   md: "h-6 w-6",
   lg: "h-8 w-8"
 };
-var Spinner = React113__default.forwardRef(
+var Spinner = React110__default.forwardRef(
   ({ className, size = "md", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -1134,7 +1119,7 @@ var Spinner = React113__default.forwardRef(
   }
 );
 Spinner.displayName = "Spinner";
-var Radio = React113__default.forwardRef(
+var Radio = React110__default.forwardRef(
   ({
     label,
     helperText,
@@ -1238,7 +1223,7 @@ var Radio = React113__default.forwardRef(
   }
 );
 Radio.displayName = "Radio";
-var Switch = React113.forwardRef(
+var Switch = React110.forwardRef(
   ({
     checked,
     defaultChecked = false,
@@ -1249,10 +1234,10 @@ var Switch = React113.forwardRef(
     name,
     className
   }, ref) => {
-    const [isChecked, setIsChecked] = React113.useState(
+    const [isChecked, setIsChecked] = React110.useState(
       checked !== void 0 ? checked : defaultChecked
     );
-    React113.useEffect(() => {
+    React110.useEffect(() => {
       if (checked !== void 0) {
         setIsChecked(checked);
       }
@@ -1346,7 +1331,7 @@ var Stack = ({
   className,
   style,
   children,
-  as: Component2 = "div",
+  as: Component = "div",
   onClick,
   onKeyDown,
   role,
@@ -1364,7 +1349,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,
     {
@@ -1410,7 +1395,7 @@ var sizeStyles5 = {
   md: "w-2.5 h-2.5",
   lg: "w-3 h-3"
 };
-var StatusDot = React113__default.forwardRef(
+var StatusDot = React110__default.forwardRef(
   ({ className, status = "offline", pulse = false, size = "md", label, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "span",
@@ -1457,7 +1442,7 @@ var iconMap2 = {
   down: TrendingDown,
   flat: ArrowRight
 };
-var TrendIndicator = React113__default.forwardRef(
+var TrendIndicator = React110__default.forwardRef(
   ({
     className,
     value,
@@ -1516,7 +1501,7 @@ var thumbSizes = {
   md: "w-4 h-4",
   lg: "w-5 h-5"
 };
-var RangeSlider = React113__default.forwardRef(
+var RangeSlider = React110__default.forwardRef(
   ({
     className,
     min = 0,
@@ -1719,7 +1704,7 @@ var paddingClasses = {
   md: "py-16",
   lg: "py-24"
 };
-var ContentSection = React113__default.forwardRef(
+var ContentSection = React110__default.forwardRef(
   ({ children, background = "default", padding = "lg", id, className }, ref) => {
     return /* @__PURE__ */ jsx(
       Box,
@@ -1772,7 +1757,7 @@ var ErrorState = ({
   );
 };
 ErrorState.displayName = "ErrorState";
-var ErrorBoundary = class extends React113__default.Component {
+var ErrorBoundary = class extends React110__default.Component {
   constructor(props) {
     super(props);
     __publicField(this, "reset", () => {
@@ -1947,7 +1932,7 @@ function waitForTransition(event, timeoutMs = 1e4) {
   });
 }
 exposeOnWindow();
-var MarkdownContent = React113__default.memo(
+var MarkdownContent = React110__default.memo(
   ({ content, direction, className }) => {
     const { t: _t } = useTranslate();
     return /* @__PURE__ */ jsx(
@@ -2048,7 +2033,7 @@ var MarkdownContent = React113__default.memo(
   (prev, next) => prev.content === next.content && prev.className === next.className && prev.direction === next.direction
 );
 MarkdownContent.displayName = "MarkdownContent";
-var CodeBlock = React113__default.memo(
+var CodeBlock = React110__default.memo(
   ({
     code,
     language = "text",
@@ -2155,1394 +2140,12 @@ var CodeBlock = React113__default.memo(
   (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight
 );
 CodeBlock.displayName = "CodeBlock";
-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" }) })
-  ] });
-}
 
 // lib/debug.ts
 typeof window !== "undefined" && (localStorage.getItem("debug") === "true" || process.env.NODE_ENV === "development");
 lazy(() => import('react-markdown'));
 var GameAudioContext = createContext(null);
 GameAudioContext.displayName = "GameAudioContext";
-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,
-                      {
-                        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 })
-              ] })
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-GameCanvas3D.displayName = "GameCanvas3D";
 
 // lib/traitRegistry.ts
 var traits = /* @__PURE__ */ new Map();
@@ -3566,6 +2169,35 @@ function unregisterTrait(id) {
   traits.delete(id);
   notifyListeners2();
 }
+
+// components/organisms/component-registry.generated.ts
+function lazyThree(name, loader) {
+  const Lazy = React110__default.lazy(() => loader().then((m) => ({ default: m[name] })));
+  function ThreeWrapper(props) {
+    return React110__default.createElement(
+      React110__default.Suspense,
+      { fallback: null },
+      React110__default.createElement(Lazy, props)
+    );
+  }
+  ThreeWrapper.displayName = `Lazy(${name})`;
+  return ThreeWrapper;
+}
+lazyThree("Camera3D", () => import('@almadar/ui/components/organisms/game/three'));
+lazyThree("Canvas3DErrorBoundary", () => import('@almadar/ui/components/organisms/game/three'));
+lazyThree("Canvas3DLoadingState", () => import('@almadar/ui/components/organisms/game/three'));
+lazyThree("FeatureRenderer", () => import('@almadar/ui/components/organisms/game/three'));
+lazyThree("FeatureRenderer3D", () => import('@almadar/ui/components/organisms/game/three'));
+lazyThree("GameCanvas3D", () => import('@almadar/ui/components/organisms/game/three'));
+lazyThree("GameCanvas3DBattleTemplate", () => import('@almadar/ui/components/organisms/game/three'));
+lazyThree("GameCanvas3DCastleTemplate", () => import('@almadar/ui/components/organisms/game/three'));
+lazyThree("GameCanvas3DWorldMapTemplate", () => import('@almadar/ui/components/organisms/game/three'));
+lazyThree("Lighting3D", () => import('@almadar/ui/components/organisms/game/three'));
+lazyThree("ModelLoader", () => import('@almadar/ui/components/organisms/game/three'));
+lazyThree("PhysicsObject3D", () => import('@almadar/ui/components/organisms/game/three'));
+lazyThree("Scene3D", () => import('@almadar/ui/components/organisms/game/three'));
+lazyThree("TileRenderer", () => import('@almadar/ui/components/organisms/game/three'));
+lazyThree("UnitRenderer", () => import('@almadar/ui/components/organisms/game/three'));
 createContext({ enabled: false });
 createContext(false);
 createContext(null);