@almadar/ui 5.28.5 → 5.30.0

package/dist/avl/index.js

@@ -14750,13 +14750,6 @@ var init_IsometricCanvas = __esm({
   }
 });
 
-// components/game/organisms/IsometricCanvas.tsx
-var init_IsometricCanvas2 = __esm({
-  "components/game/organisms/IsometricCanvas.tsx"() {
-    init_IsometricCanvas();
-  }
-});
-
 // components/game/organisms/boardEntity.ts
 function boardEntity(entity) {
   if (!entity) return void 0;
@@ -15152,7 +15145,7 @@ var init_BattleBoard = __esm({
     init_Button();
     init_Typography();
     init_Stack();
-    init_IsometricCanvas2();
+    init_IsometricCanvas();
     init_boardEntity();
     init_isometric();
     BattleBoard.displayName = "BattleBoard";
@@ -22238,7 +22231,7 @@ var init_CastleBoard = __esm({
     "use client";
     init_cn();
     init_useEventBus();
-    init_IsometricCanvas2();
+    init_IsometricCanvas();
     init_boardEntity();
     init_isometric();
     CastleBoard.displayName = "CastleBoard";
@@ -24412,7 +24405,84 @@ var init_DashboardLayout = __esm({
     NavLinkBottom.displayName = "NavLinkBottom";
   }
 });
-var Menu;
+function computeMenuStyle(position, triggerRect) {
+  const isTop = position.startsWith("top");
+  const isRight = position.endsWith("right") || position.endsWith("end");
+  if (isTop) {
+    return {
+      top: triggerRect.top - MENU_GAP,
+      transform: "translateY(-100%)",
+      ...isRight ? { right: window.innerWidth - triggerRect.right } : { left: triggerRect.left }
+    };
+  }
+  return {
+    top: triggerRect.bottom + MENU_GAP,
+    ...isRight ? { right: window.innerWidth - triggerRect.right } : { left: triggerRect.left }
+  };
+}
+function SubMenu({
+  items,
+  itemRef,
+  direction,
+  eventBus
+}) {
+  const [rect, setRect] = useState(null);
+  useEffect(() => {
+    if (itemRef) {
+      setRect(itemRef.getBoundingClientRect());
+    }
+  }, [itemRef]);
+  if (!rect) return null;
+  const isRtl = direction === "rtl";
+  const style = {
+    top: rect.top,
+    ...isRtl ? { right: window.innerWidth - rect.left } : { left: rect.right }
+  };
+  const panel = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("fixed z-50", menuContainerStyles),
+      style,
+      children: items.map((item, index) => {
+        const isDivider = item.id === "divider" || item.label === "divider";
+        const itemId = item.id ?? `item-${item.label.toLowerCase().replace(/\s+/g, "-")}-${index}`;
+        const isDanger = item.variant === "danger";
+        if (isDivider) {
+          return /* @__PURE__ */ jsx(Divider, { className: "my-1" }, `divider-${index}`);
+        }
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            as: "button",
+            onClick: () => {
+              if (item.disabled) return;
+              if (item.event) eventBus.emit(`UI:${item.event}`, { itemId, label: item.label });
+              item.onClick?.();
+            },
+            "aria-disabled": item.disabled || void 0,
+            "data-testid": item.event ? `action-${item.event}` : void 0,
+            className: cn(
+              "w-full flex items-center gap-3 px-4 py-2 text-start",
+              "text-sm transition-colors",
+              "hover:bg-muted focus:outline-none focus:bg-muted",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              item.disabled && "cursor-not-allowed",
+              isDanger && "text-error hover:bg-error/10"
+            ),
+            children: [
+              item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: cn("flex-1", isDanger && "text-red-600"), children: item.label }),
+              item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs font-medium", children: item.badge })
+            ]
+          },
+          itemId
+        );
+      })
+    }
+  );
+  return typeof document !== "undefined" ? createPortal(panel, document.body) : panel;
+}
+var MENU_GAP, menuContainerStyles, Menu;
 var init_Menu = __esm({
   "components/core/molecules/Menu.tsx"() {
     "use client";
@@ -24423,6 +24493,14 @@ var init_Menu = __esm({
     init_Badge();
     init_cn();
     init_useEventBus();
+    MENU_GAP = 4;
+    menuContainerStyles = cn(
+      "bg-card",
+      "border-[length:var(--border-width)] border-border",
+      "shadow-elevation-popover",
+      "rounded-sm",
+      "min-w-0 sm:min-w-[200px] max-w-[calc(100vw-1rem)] py-1"
+    );
     Menu = ({
       trigger,
       items,
@@ -24430,9 +24508,10 @@ var init_Menu = __esm({
       className
     }) => {
       const eventBus = useEventBus();
-      const { t, direction } = useTranslate();
+      const { direction } = useTranslate();
       const [isOpen, setIsOpen] = useState(false);
       const [activeSubMenu, setActiveSubMenu] = useState(null);
+      const [activeSubMenuRef, setActiveSubMenuRef] = useState(null);
       const [triggerRect, setTriggerRect] = useState(null);
       const triggerRef = useRef(null);
       const menuRef = useRef(null);
@@ -24447,13 +24526,14 @@ var init_Menu = __esm({
         }
         setIsOpen(!isOpen);
         setActiveSubMenu(null);
+        setActiveSubMenuRef(null);
       };
-      const handleItemClick = (item) => {
+      const handleItemClick = (item, itemId) => {
         if (item.disabled) return;
         if (item.subMenu && item.subMenu.length > 0) {
-          setActiveSubMenu(item.id ?? null);
+          setActiveSubMenu(itemId);
         } else {
-          if (item.event) eventBus.emit(`UI:${item.event}`, { itemId: item.id, label: item.label });
+          if (item.event) eventBus.emit(`UI:${item.event}`, { itemId, label: item.label });
           item.onClick?.();
           setIsOpen(false);
         }
@@ -24468,22 +24548,12 @@ var init_Menu = __esm({
           if (isOpen && menuRef.current && !menuRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
             setIsOpen(false);
             setActiveSubMenu(null);
+            setActiveSubMenuRef(null);
           }
         };
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
       }, [isOpen]);
-      const positionClasses = {
-        "top-left": "bottom-full left-0 mb-2",
-        "top-right": "bottom-full right-0 mb-2",
-        "bottom-left": "top-full left-0 mt-2",
-        "bottom-right": "top-full right-0 mt-2",
-        // Aliases for pattern compatibility
-        "top-start": "bottom-full left-0 mb-2",
-        "top-end": "bottom-full right-0 mb-2",
-        "bottom-start": "top-full left-0 mt-2",
-        "bottom-end": "top-full right-0 mt-2"
-      };
       const rtlMirror = {
         "top-left": "top-right",
         "top-right": "top-left",
@@ -24495,7 +24565,6 @@ var init_Menu = __esm({
         "bottom-end": "bottom-start"
       };
       const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
-      const subMenuSideClass = direction === "rtl" ? "right-full mr-2" : "left-full ml-2";
       const triggerChild = React88__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
       const triggerElement = React88__default.cloneElement(
         triggerChild,
@@ -24504,94 +24573,83 @@ var init_Menu = __esm({
           onClick: handleToggle
         }
       );
-      const menuContainerStyles = cn(
-        "bg-card",
-        "border-[length:var(--border-width)] border-border",
-        "shadow-elevation-popover",
-        "rounded-sm",
-        "min-w-0 sm:min-w-[200px] max-w-[calc(100vw-1rem)] py-1"
-      );
-      const renderMenuItem = (item, hasSubMenu, index) => {
+      const renderMenuItems = (menuItems) => menuItems.map((item, index) => {
+        const isDivider = item.id === "divider" || item.label === "divider";
         const itemId = item.id ?? `item-${item.label.toLowerCase().replace(/\s+/g, "-")}-${index}`;
+        const hasSubMenu = !!(item.subMenu && item.subMenu.length > 0);
         const isDanger = item.variant === "danger";
-        return /* @__PURE__ */ jsx(
-          Box,
-          {
-            as: "button",
-            onClick: () => !item.disabled && handleItemClick({ ...item, id: itemId }),
-            "aria-disabled": item.disabled || void 0,
-            onMouseEnter: () => hasSubMenu && setActiveSubMenu(itemId),
-            "data-testid": item.event ? `action-${item.event}` : void 0,
-            className: cn(
-              "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
-              "text-sm transition-colors",
-              "hover:bg-muted",
-              "focus:outline-none focus:bg-muted",
-              "disabled:opacity-50 disabled:cursor-not-allowed",
-              item.disabled && "cursor-not-allowed",
-              isDanger && "text-error hover:bg-error/10"
-            ),
-            children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-3 flex-1 min-w-0", children: [
-              item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "small",
-                  className: cn("flex-1", isDanger && "text-red-600"),
-                  children: item.label
+        if (isDivider) {
+          return /* @__PURE__ */ jsx(Divider, { className: "my-1" }, `divider-${index}`);
+        }
+        return /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              as: "button",
+              onClick: () => handleItemClick({ ...item, id: itemId }, itemId),
+              "aria-disabled": item.disabled || void 0,
+              onMouseEnter: (e) => {
+                if (hasSubMenu) {
+                  setActiveSubMenu(itemId);
+                  setActiveSubMenuRef(e.currentTarget);
                 }
+              },
+              "data-testid": item.event ? `action-${item.event}` : void 0,
+              className: cn(
+                "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
+                "text-sm transition-colors",
+                "hover:bg-muted",
+                "focus:outline-none focus:bg-muted",
+                "disabled:opacity-50 disabled:cursor-not-allowed",
+                item.disabled && "cursor-not-allowed",
+                isDanger && "text-error hover:bg-error/10"
               ),
-              item.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: item.badge }),
-              hasSubMenu && /* @__PURE__ */ jsx(Icon, { name: direction === "rtl" ? "chevron-left" : "chevron-right", size: "sm", className: "flex-shrink-0" })
-            ] })
-          },
-          itemId
-        );
-      };
-      const renderMenuItems = (menuItems) => {
-        return menuItems.map((item, index) => {
-          const hasSubMenu = item.subMenu && item.subMenu.length > 0;
-          const isDivider = item.id === "divider" || item.label === "divider";
-          const itemId = item.id ?? `item-${item.label.toLowerCase().replace(/\s+/g, "-")}-${index}`;
-          if (isDivider) {
-            return /* @__PURE__ */ jsx(Divider, { className: "my-1" }, `divider-${index}`);
-          }
-          return /* @__PURE__ */ jsxs(Box, { children: [
-            renderMenuItem(item, !!hasSubMenu, index),
-            hasSubMenu && activeSubMenu === itemId && item.subMenu && /* @__PURE__ */ jsx(
-              Box,
-              {
-                className: cn(
-                  "absolute top-0 z-50",
-                  subMenuSideClass,
-                  menuContainerStyles
+              children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+                item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "small",
+                    className: cn("flex-1", isDanger && "text-red-600"),
+                    children: item.label
+                  }
                 ),
-                children: renderMenuItems(item.subMenu)
-              }
-            )
-          ] }, itemId);
-        });
-      };
-      return /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
+                item.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: item.badge }),
+                hasSubMenu && /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: direction === "rtl" ? "chevron-left" : "chevron-right",
+                    size: "sm",
+                    className: "flex-shrink-0"
+                  }
+                )
+              ] })
+            }
+          ),
+          hasSubMenu && activeSubMenu === itemId && item.subMenu && /* @__PURE__ */ jsx(
+            SubMenu,
+            {
+              items: item.subMenu,
+              itemRef: activeSubMenuRef,
+              direction,
+              eventBus
+            }
+          )
+        ] }, itemId);
+      });
+      const panel = isOpen && triggerRect ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: menuRef,
+          className: cn("fixed z-50", menuContainerStyles, className),
+          style: computeMenuStyle(effectivePosition, triggerRect),
+          role: "menu",
+          children: renderMenuItems(items)
+        }
+      ) : null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
         triggerElement,
-        isOpen && triggerRect && /* @__PURE__ */ jsx(
-          Box,
-          {
-            ref: menuRef,
-            className: cn(
-              "absolute z-50",
-              menuContainerStyles,
-              positionClasses[effectivePosition],
-              className
-            ),
-            style: {
-              left: effectivePosition.includes("left") ? 0 : "auto",
-              right: effectivePosition.includes("right") ? 0 : "auto"
-            },
-            role: "menu",
-            children: renderMenuItems(items)
-          }
-        )
+        panel && typeof document !== "undefined" ? createPortal(panel, document.body) : panel
       ] });
     };
     Menu.displayName = "Menu";
@@ -38588,7 +38646,6 @@ var init_DocumentViewer = __esm({
       showPrint = false,
       actions,
       documents,
-      entity,
       isLoading = false,
       error,
       className
@@ -45403,7 +45460,7 @@ function TraitSlot({
   size = "md",
   showTooltip = true,
   categoryColors,
-  tooltipFrameUrl,
+  tooltipFrameUrl = "",
   className,
   feedback,
   onItemDrop,
@@ -48259,7 +48316,7 @@ var init_WorldMapBoard = __esm({
     init_useEventBus();
     init_Stack();
     init_LoadingState();
-    init_IsometricCanvas2();
+    init_IsometricCanvas();
     init_boardEntity();
     init_isometric();
     WorldMapBoard.displayName = "WorldMapBoard";
@@ -48315,7 +48372,7 @@ function lazyThree(name, loader) {
   ThreeWrapper.displayName = `Lazy(${name})`;
   return ThreeWrapper;
 }
-var FeatureRenderer, COMPONENT_REGISTRY;
+var FeatureRenderer, GameCanvas3D, GameCanvas3DBattleTemplate, GameCanvas3DCastleTemplate, GameCanvas3DWorldMapTemplate, COMPONENT_REGISTRY;
 var init_component_registry_generated = __esm({
   "components/core/organisms/component-registry.generated.ts"() {
     init_AboutPageTemplate();
@@ -48601,7 +48658,11 @@ var init_component_registry_generated = __esm({
     init_WorldMapBoard();
     init_WorldMapTemplate();
     init_XPBar();
-    FeatureRenderer = lazyThree("FeatureRenderer", () => import('@almadar/ui/components/organisms/game/three'));
+    FeatureRenderer = lazyThree("FeatureRenderer", () => import('@almadar/ui/components/molecules/game/three'));
+    GameCanvas3D = lazyThree("GameCanvas3D", () => import('@almadar/ui/components/molecules/game/three'));
+    GameCanvas3DBattleTemplate = lazyThree("GameCanvas3DBattleTemplate", () => import('@almadar/ui/components/molecules/game/three'));
+    GameCanvas3DCastleTemplate = lazyThree("GameCanvas3DCastleTemplate", () => import('@almadar/ui/components/molecules/game/three'));
+    GameCanvas3DWorldMapTemplate = lazyThree("GameCanvas3DWorldMapTemplate", () => import('@almadar/ui/components/molecules/game/three'));
     COMPONENT_REGISTRY = {
       "AboutPageTemplate": AboutPageTemplate,
       "Accordion": Accordion,
@@ -48714,6 +48775,10 @@ var init_component_registry_generated = __esm({
       "GameAudioProvider": GameAudioProvider,
       "GameAudioToggle": GameAudioToggle,
       "GameCanvas2D": GameCanvas2D,
+      "GameCanvas3D": GameCanvas3D,
+      "GameCanvas3DBattleTemplate": GameCanvas3DBattleTemplate,
+      "GameCanvas3DCastleTemplate": GameCanvas3DCastleTemplate,
+      "GameCanvas3DWorldMapTemplate": GameCanvas3DWorldMapTemplate,
       "GameHud": GameHud,
       "GameMenu": GameMenu,
       "GameOverScreen": GameOverScreen,

package/dist/components/core/molecules/DocumentViewer.d.ts

@@ -51,8 +51,6 @@ export interface DocumentViewerProps {
     actions?: readonly DocumentAction[];
     /** Multiple documents (tabbed view) */
     documents?: readonly DocumentItem[];
-    /** Entity name for schema-driven auto-fetch */
-    entity?: string;
     /** Loading state */
     isLoading?: boolean;
     /** Error state */

package/dist/components/core/molecules/Header.d.ts

@@ -109,9 +109,5 @@ export interface HeaderProps {
      * Error state (closed circuit)
      */
     error?: UiError | null;
-    /**
-     * Entity name for schema-driven auto-fetch (closed circuit)
-     */
-    entity?: string;
 }
 export declare const Header: React.FC<HeaderProps>;

package/dist/components/core/molecules/Navigation.d.ts

@@ -63,7 +63,5 @@ export interface NavigationProps {
     isLoading?: boolean;
     /** Error state */
     error?: UiError | null;
-    /** Entity name for schema-driven auto-fetch */
-    entity?: string;
 }
 export declare const Navigation: React.FC<NavigationProps>;

package/dist/components/core/molecules/PageHeader.d.ts

@@ -45,8 +45,6 @@ export interface PageHeaderProps {
     isLoading?: boolean;
     /** Error state */
     error?: UiError | null;
-    /** Entity name for schema-driven auto-fetch */
-    entity?: string;
     /** Tabs for sub-navigation */
     tabs?: ReadonlyArray<{
         label: string;

package/dist/components/core/molecules/PropertyInspector.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { DeclaredTraitConfig, TraitConfig, TraitConfigValue, AssetCatalog } from '@almadar/core';
+import type { DeclaredTraitConfig, ConfigFieldDeclaration, TraitConfig, TraitConfigValue, AssetCatalog } from '@almadar/core';
 import type { DisplayStateProps } from '../organisms/types';
 /**
  * PropertyInspector — Storybook-style controls panel for a trait's `config`.
@@ -26,4 +26,11 @@ export interface PropertyInspectorProps extends DisplayStateProps {
     /** Browsable asset catalog supplied to `asset`-typed fields' AssetPicker. */
     assets?: AssetCatalog;
 }
+export declare function FieldControl({ name, decl, value, onChange, assets, }: {
+    name: string;
+    decl: ConfigFieldDeclaration;
+    value: TraitConfigValue | undefined;
+    onChange: (field: string, value: TraitConfigValue) => void;
+    assets?: AssetCatalog;
+}): React.ReactElement;
 export declare const PropertyInspector: React.FC<PropertyInspectorProps>;

package/dist/components/core/organisms/index.d.ts

@@ -26,4 +26,4 @@ export { StepFlowOrganism, type StepFlowOrganismProps, } from "../../marketing/o
 export { ShowcaseOrganism, type ShowcaseOrganismProps, } from "../../marketing/organisms/ShowcaseOrganism";
 export { TeamOrganism, type TeamOrganismProps, } from "../../marketing/organisms/TeamOrganism";
 export { CaseStudyOrganism, type CaseStudyOrganismProps, } from "../../marketing/organisms/CaseStudyOrganism";
-export { FeatureRenderer, type FeatureRendererProps } from '../../game/organisms/three/renderers/FeatureRenderer';
+export { FeatureRenderer, type FeatureRendererProps } from '../../game/molecules/three/renderers/FeatureRenderer';

package/dist/components/core/templates/index.d.ts

@@ -12,3 +12,6 @@ export { LandingPageTemplate, type LandingPageTemplateProps, type LandingPageEnt
 export { PricingPageTemplate, type PricingPageTemplateProps, type PricingPageEntity, } from '../../marketing/templates/PricingPageTemplate';
 export { FeatureDetailPageTemplate, type FeatureDetailPageTemplateProps, type FeatureDetailPageEntity, type FeatureDetailSection, } from '../../marketing/templates/FeatureDetailPageTemplate';
 export { AboutPageTemplate, type AboutPageTemplateProps, type AboutPageEntity, } from '../../marketing/templates/AboutPageTemplate';
+export type { GameCanvas3DBattleTemplate, GameCanvas3DBattleTemplateProps } from '../../game/templates/GameCanvas3DBattleTemplate';
+export type { GameCanvas3DCastleTemplate, GameCanvas3DCastleTemplateProps } from '../../game/templates/GameCanvas3DCastleTemplate';
+export type { GameCanvas3DWorldMapTemplate, GameCanvas3DWorldMapTemplateProps } from '../../game/templates/GameCanvas3DWorldMapTemplate';

package/dist/components/game/{organisms → molecules}/GameCanvas3D.d.ts

@@ -17,7 +17,7 @@ import React from 'react';
 import type { EventEmit } from '@almadar/core';
 import * as THREE from 'three';
 import { AssetLoader } from './three/loaders/AssetLoader';
-import type { IsometricTile, IsometricUnit, IsometricFeature } from './types/isometric';
+import type { IsometricTile, IsometricUnit, IsometricFeature } from '../organisms/types/isometric';
 import './GameCanvas3D.css';
 export type { IsometricTile, IsometricUnit, IsometricFeature };
 /** Game event for canvas display */
@@ -35,8 +35,6 @@ export type CameraMode = 'isometric' | 'perspective' | 'top-down';
 export type MapOrientation = 'standard' | 'rotated';
 /** Overlay control */
 export type OverlayControl = 'default' | 'hidden' | 'minimap';
-/** Unit animation state */
-export type UnitAnimationState = 'idle' | 'walk' | 'attack' | 'hurt' | 'die';
 /** Props for GameCanvas3D component */
 export interface GameCanvas3DProps {
     /** Additional CSS classes */

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

@@ -5,6 +5,7 @@
  *
  * @packageDocumentation
  */
+export type { GameCanvas3D, GameCanvas3DProps, GameCanvas3DHandle, GameEvent, CameraMode, MapOrientation, OverlayControl } from './GameCanvas3D';
 export { DPad, type DPadProps, type DPadDirection } from './DPad';
 export { ActionButtons, type ActionButtonsProps, type ActionButtonConfig } from './ActionButtons';
 export { StatBadge, type StatBadgeProps } from './StatBadge';

package/dist/components/game/{organisms → molecules}/three/hooks/useGameCanvas3DEvents.d.ts

@@ -1,5 +1,5 @@
 import type { EventEmit } from '@almadar/core';
-import type { IsometricTile, IsometricUnit, IsometricFeature } from '../../types/isometric';
+import type { IsometricTile, IsometricUnit, IsometricFeature } from '../../../organisms/types/isometric';
 export interface GameCanvas3DEventConfig {
     /** Event name for tile clicks */
     tileClickEvent?: EventEmit<{

package/dist/components/game/{organisms → molecules}/three/index.cjs

@@ -780,7 +780,7 @@ var AssetLoader = class {
 };
 var assetLoader = new AssetLoader();
 
-// components/game/organisms/three/hooks/useThree.ts
+// components/game/molecules/three/hooks/useThree.ts
 var DEFAULT_OPTIONS = {
   cameraMode: "isometric",
   cameraPosition: [10, 10, 10],
@@ -1500,7 +1500,7 @@ function useEmitEvent() {
   );
 }
 
-// components/game/organisms/three/hooks/useGameCanvas3DEvents.ts
+// components/game/molecules/three/hooks/useGameCanvas3DEvents.ts
 function useGameCanvas3DEvents(options) {
   const {
     tileClickEvent,
@@ -1756,6 +1756,30 @@ function TileRenderer({
       const x = (tile.x - offsetX) * cellSize;
       const z = ((tile.z ?? tile.y ?? 0) - offsetZ) * cellSize;
       const y = (tile.elevation ?? 0) * 0.1;
+      const position = [x, y, z];
+      if (tile.modelUrl) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "group",
+          {
+            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__ */ jsxRuntime.jsx(
+              ModelLoader,
+              {
+                url: tile.modelUrl,
+                position,
+                scale: cellSize * 0.9,
+                fallbackGeometry: "box",
+                castShadow: true,
+                receiveShadow: true
+              }
+            )
+          },
+          tile.id ?? `tile-${tile.x}-${tile.y}`
+        );
+      }
       const colorHex = terrainColors[tile.type || ""] || terrainColors[tile.terrain || ""] || "#808080";
       const isSelected = tile.id ? selectedTileIds.includes(tile.id) : false;
       const isValidMove = validMoves.some(
@@ -1771,7 +1795,7 @@ function TileRenderer({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "mesh",
         {
-          position: [x, y, z],
+          position,
           userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
           onClick: () => onTileClick?.(tile),
           onPointerEnter: () => onTileHover?.(tile),
@@ -1793,7 +1817,8 @@ function TileRenderer({
       );
     });
   };
-  if (useInstancing && tiles.length > 0) {
+  const hasModelTiles = tiles.some((t) => t.modelUrl);
+  if (useInstancing && tiles.length > 0 && !hasModelTiles) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "instancedMesh",
       {

package/dist/components/game/{organisms → molecules}/three/index.css

@@ -1,4 +1,4 @@
-/* components/game/organisms/three/components/Canvas3DLoadingState.css */
+/* components/game/molecules/three/components/Canvas3DLoadingState.css */
 .canvas-3d-loading {
   position: absolute;
   inset: 0;
@@ -151,7 +151,7 @@
   }
 }
 
-/* components/game/organisms/three/components/Canvas3DErrorBoundary.css */
+/* components/game/molecules/three/components/Canvas3DErrorBoundary.css */
 .canvas-3d-error {
   position: absolute;
   inset: 0;
@@ -314,7 +314,7 @@
   }
 }
 
-/* components/game/organisms/GameCanvas3D.css */
+/* components/game/molecules/GameCanvas3D.css */
 .game-canvas-3d {
   position: relative;
   width: 100%;