@almadar/ui 5.28.5 → 5.30.0

package/dist/components/index.js

@@ -45,7 +45,7 @@ import { useSortable, arrayMove, sortableKeyboardCoordinates, SortableContext, r
 import { CSS } from '@dnd-kit/utilities';
 import { useNodeId, ReactFlowProvider, Handle, Position } from '@xyflow/react';
 import { useUISlots } from '@almadar/ui/context';
-import { getPatternDefinition, getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
+import { getPatternDefinition as getPatternDefinition$1, getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
 import { context, Canvas } from '@react-three/fiber';
 
 var __defProp = Object.defineProperty;
@@ -7081,11 +7081,15 @@ var init_Skeleton = __esm({
 function getKnownPatterns() {
   return Object.keys(componentMapping);
 }
-var componentMapping;
+function getPatternDefinition(type) {
+  return patternRegistry[type];
+}
+var componentMapping, patternRegistry;
 var init_pattern_resolver = __esm({
   "renderer/pattern-resolver.ts"() {
     createLogger("almadar:ui:pattern-resolver");
     componentMapping = {};
+    patternRegistry = {};
   }
 });
 
@@ -9998,13 +10002,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;
@@ -10400,7 +10397,7 @@ var init_BattleBoard = __esm({
     init_Button();
     init_Typography();
     init_Stack();
-    init_IsometricCanvas2();
+    init_IsometricCanvas();
     init_boardEntity();
     init_isometric();
     BattleBoard.displayName = "BattleBoard";
@@ -18315,7 +18312,7 @@ var init_CastleBoard = __esm({
     "use client";
     init_cn();
     init_useEventBus();
-    init_IsometricCanvas2();
+    init_IsometricCanvas();
     init_boardEntity();
     init_isometric();
     CastleBoard.displayName = "CastleBoard";
@@ -20717,7 +20714,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";
@@ -20728,6 +20802,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,
@@ -20735,9 +20817,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);
@@ -20752,13 +20835,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);
         }
@@ -20773,22 +20857,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",
@@ -20800,7 +20874,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 = React74__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
       const triggerElement = React74__default.cloneElement(
         triggerChild,
@@ -20809,94 +20882,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";
@@ -22483,6 +22545,583 @@ var init_JsonTreeEditor = __esm({
     };
   }
 });
+var FormSection, FormLayout, FormActions;
+var init_FormSection = __esm({
+  "components/core/molecules/FormSection.tsx"() {
+    "use client";
+    init_cn();
+    init_atoms2();
+    init_Box();
+    init_Typography();
+    init_Button();
+    init_Stack();
+    init_Icon();
+    init_useEventBus();
+    FormSection = ({
+      title,
+      description,
+      children,
+      collapsible = false,
+      defaultCollapsed = false,
+      card = false,
+      columns = 1,
+      className
+    }) => {
+      const [collapsed, setCollapsed] = React74__default.useState(defaultCollapsed);
+      const { t } = useTranslate();
+      const eventBus = useEventBus();
+      const gridClass = {
+        1: "grid-cols-1",
+        2: "grid-cols-1 md:grid-cols-2",
+        3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+      }[columns];
+      React74__default.useCallback(() => {
+        if (collapsible) {
+          setCollapsed((prev) => !prev);
+          eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
+        }
+      }, [collapsible, collapsed, eventBus]);
+      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        (title || description) && /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "mb-4", children: [
+          title && /* @__PURE__ */ jsxs(
+            HStack,
+            {
+              justify: "between",
+              align: "center",
+              className: cn(collapsible && "cursor-pointer"),
+              action: collapsible ? "TOGGLE_COLLAPSE" : void 0,
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "h3", weight: "semibold", children: title }),
+                collapsible && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    action: "TOGGLE_COLLAPSE",
+                    children: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon: ChevronDown,
+                        size: "sm",
+                        className: cn(
+                          "text-muted-foreground transition-transform",
+                          collapsed && "rotate-180"
+                        )
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          description && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: description })
+        ] }),
+        (!collapsible || !collapsed) && /* @__PURE__ */ jsx(Box, { className: cn("grid gap-4", gridClass), children })
+      ] });
+      if (card) {
+        return /* @__PURE__ */ jsx(Card, { className: cn("p-6", className), children: content });
+      }
+      return /* @__PURE__ */ jsx(Box, { className, children: content });
+    };
+    FormSection.displayName = "FormSection";
+    FormLayout = ({
+      children,
+      dividers = true,
+      className
+    }) => {
+      return /* @__PURE__ */ jsx(
+        VStack,
+        {
+          gap: "lg",
+          className: cn(
+            dividers && "[&>*+*]:pt-8 [&>*+*]:border-t [&>*+*]:border-border",
+            className
+          ),
+          children
+        }
+      );
+    };
+    FormLayout.displayName = "FormLayout";
+    FormActions = ({
+      children,
+      sticky = false,
+      align = "right",
+      className
+    }) => {
+      const alignClass2 = {
+        left: "justify-start",
+        right: "justify-end",
+        between: "justify-between",
+        center: "justify-center"
+      }[align];
+      return /* @__PURE__ */ jsx(
+        HStack,
+        {
+          gap: "sm",
+          align: "center",
+          className: cn(
+            "pt-6 border-t border-border",
+            alignClass2,
+            sticky && "sticky bottom-0 bg-card py-4 -mx-6 px-6 shadow-[0_-4px_6px_-1px_rgb(0,0,0,0.05)]",
+            className
+          ),
+          children
+        }
+      );
+    };
+    FormActions.displayName = "FormActions";
+  }
+});
+var ALL_CATEGORY, GridPicker;
+var init_GridPicker = __esm({
+  "components/core/molecules/GridPicker.tsx"() {
+    "use client";
+    init_cn();
+    init_Input();
+    init_Badge();
+    init_Stack();
+    ALL_CATEGORY = "__all__";
+    GridPicker = ({
+      items,
+      value,
+      onChange,
+      categories,
+      searchPlaceholder,
+      renderThumbnail,
+      cellSize = 32,
+      className
+    }) => {
+      const [search, setSearch] = useState("");
+      const [activeCategory, setActiveCategory] = useState(ALL_CATEGORY);
+      const gridRef = useRef(null);
+      const categoryChips = useMemo(() => {
+        if (categories !== void 0) return categories;
+        const seen = [];
+        for (const item of items) {
+          if (!seen.includes(item.category)) seen.push(item.category);
+        }
+        return seen;
+      }, [categories, items]);
+      const filtered = useMemo(() => {
+        const needle = search.trim().toLowerCase();
+        return items.filter((item) => {
+          const matchesCategory = activeCategory === ALL_CATEGORY || item.category === activeCategory;
+          const matchesSearch = needle === "" || item.label.toLowerCase().includes(needle);
+          return matchesCategory && matchesSearch;
+        });
+      }, [items, search, activeCategory]);
+      const select = useCallback(
+        (item) => {
+          onChange(item.id);
+        },
+        [onChange]
+      );
+      const handleKeyDown = useCallback(
+        (e, index) => {
+          const cells = gridRef.current?.querySelectorAll(
+            "[data-gridpicker-cell]"
+          );
+          if (cells === void 0 || cells.length === 0) return;
+          const columns = (() => {
+            const grid = gridRef.current;
+            if (grid === null) return 1;
+            const style = window.getComputedStyle(grid);
+            const cols = style.gridTemplateColumns.split(" ").filter(Boolean).length;
+            return cols > 0 ? cols : 1;
+          })();
+          let next = -1;
+          if (e.key === "ArrowRight") next = index + 1;
+          else if (e.key === "ArrowLeft") next = index - 1;
+          else if (e.key === "ArrowDown") next = index + columns;
+          else if (e.key === "ArrowUp") next = index - columns;
+          else if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            select(filtered[index]);
+            return;
+          } else {
+            return;
+          }
+          e.preventDefault();
+          if (next >= 0 && next < cells.length) {
+            cells[next].focus();
+          }
+        },
+        [filtered, select]
+      );
+      return /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: cn("w-full", className), children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "search",
+            icon: "search",
+            value: search,
+            placeholder: searchPlaceholder,
+            clearable: true,
+            onClear: () => setSearch(""),
+            onChange: (e) => setSearch(e.target.value)
+          }
+        ),
+        categoryChips.length > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "xs", wrap: true, children: [
+          /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: activeCategory === ALL_CATEGORY ? "primary" : "neutral",
+              size: "sm",
+              role: "button",
+              tabIndex: 0,
+              "aria-pressed": activeCategory === ALL_CATEGORY,
+              className: "cursor-pointer",
+              onClick: () => setActiveCategory(ALL_CATEGORY),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setActiveCategory(ALL_CATEGORY);
+                }
+              },
+              children: "All"
+            }
+          ),
+          categoryChips.map((category) => /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: activeCategory === category ? "primary" : "neutral",
+              size: "sm",
+              role: "button",
+              tabIndex: 0,
+              "aria-pressed": activeCategory === category,
+              className: "cursor-pointer",
+              onClick: () => setActiveCategory(category),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setActiveCategory(category);
+                }
+              },
+              children: category
+            },
+            category
+          ))
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: gridRef,
+            role: "listbox",
+            className: "grid gap-1 overflow-y-auto max-h-64 p-1",
+            style: {
+              gridTemplateColumns: `repeat(auto-fill, minmax(${cellSize}px, 1fr))`
+            },
+            children: filtered.map((item, index) => {
+              const selected = item.id === value;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": selected,
+                  "aria-label": item.label,
+                  title: item.label,
+                  "data-gridpicker-cell": true,
+                  tabIndex: selected || value === void 0 && index === 0 ? 0 : -1,
+                  onClick: () => select(item),
+                  onKeyDown: (e) => handleKeyDown(e, index),
+                  className: cn(
+                    "flex items-center justify-center rounded-sm",
+                    "transition-colors hover:bg-muted",
+                    "focus:outline-none focus:ring-1 focus:ring-ring",
+                    selected && "bg-primary/10 ring-1 ring-primary"
+                  ),
+                  style: { width: cellSize, height: cellSize },
+                  children: renderThumbnail(item)
+                },
+                item.id
+              );
+            })
+          }
+        )
+      ] });
+    };
+    GridPicker.displayName = "GridPicker";
+  }
+});
+function pascalToKebab(name) {
+  return name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
+}
+function kebabToPascal3(name) {
+  return name.split("-").map((part) => /^\d+$/.test(part) ? part : part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+var ICON_ITEMS, IconPicker;
+var init_IconPicker = __esm({
+  "components/core/molecules/IconPicker.tsx"() {
+    "use client";
+    init_Icon();
+    init_GridPicker();
+    ICON_ITEMS = (() => {
+      const items = [];
+      for (const [exportName, candidate] of Object.entries(LucideIcons2)) {
+        if (!/^[A-Z]/.test(exportName)) continue;
+        if (exportName.endsWith("Icon")) continue;
+        if (exportName.startsWith("Lucide")) continue;
+        const isComponent = candidate !== null && (typeof candidate === "object" || typeof candidate === "function") && "$$typeof" in candidate;
+        if (!isComponent) continue;
+        const kebab = pascalToKebab(exportName);
+        if (kebabToPascal3(kebab) !== exportName) continue;
+        items.push({ id: kebab, label: kebab, category: "icons" });
+      }
+      return items;
+    })();
+    IconPicker = ({ value, onChange, className }) => {
+      const items = useMemo(() => ICON_ITEMS, []);
+      return /* @__PURE__ */ jsx(
+        GridPicker,
+        {
+          items,
+          value,
+          onChange,
+          searchPlaceholder: "Search icons\u2026",
+          renderThumbnail: (it) => /* @__PURE__ */ jsx(Icon, { name: it.id }),
+          cellSize: 32,
+          className
+        }
+      );
+    };
+    IconPicker.displayName = "IconPicker";
+  }
+});
+function iconForKind(kind) {
+  if (kind === "audio") return "music";
+  if (kind === "model") return "box";
+  return "file";
+}
+var THUMB_PX, IMAGE_KINDS, AssetPicker;
+var init_AssetPicker = __esm({
+  "components/core/molecules/AssetPicker.tsx"() {
+    "use client";
+    init_GridPicker();
+    init_Icon();
+    THUMB_PX = 32;
+    IMAGE_KINDS = /* @__PURE__ */ new Set([
+      "image",
+      "spritesheet",
+      "scene",
+      "portrait"
+    ]);
+    AssetPicker = ({
+      assets,
+      value,
+      onChange,
+      className
+    }) => {
+      const byUrl = useMemo(() => {
+        const map = /* @__PURE__ */ new Map();
+        for (const entry of assets) map.set(entry.url, entry);
+        return map;
+      }, [assets]);
+      const items = useMemo(
+        () => assets.map((entry) => ({
+          id: entry.url,
+          label: entry.name,
+          category: entry.category
+        })),
+        [assets]
+      );
+      const categories = useMemo(() => {
+        const seen = [];
+        for (const entry of assets) {
+          if (!seen.includes(entry.category)) seen.push(entry.category);
+        }
+        return seen;
+      }, [assets]);
+      const renderThumbnail = useCallback(
+        (item) => {
+          const entry = byUrl.get(item.id);
+          if (entry === void 0) return null;
+          if (IMAGE_KINDS.has(entry.kind)) {
+            return /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: entry.thumbnailUrl ?? entry.url,
+                alt: entry.name,
+                loading: "lazy",
+                width: THUMB_PX,
+                height: THUMB_PX,
+                style: { width: THUMB_PX, height: THUMB_PX, objectFit: "cover" }
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx(Icon, { name: iconForKind(entry.kind), size: "sm" });
+        },
+        [byUrl]
+      );
+      return /* @__PURE__ */ jsx(
+        GridPicker,
+        {
+          items,
+          value,
+          onChange,
+          categories,
+          renderThumbnail,
+          cellSize: THUMB_PX,
+          className
+        }
+      );
+    };
+    AssetPicker.displayName = "AssetPicker";
+  }
+});
+function currentValue(decl, override) {
+  return override !== void 0 ? override : decl.default;
+}
+function TextLikeControl({
+  field,
+  numeric,
+  value,
+  onCommit
+}) {
+  const initial = value === void 0 || value === null ? "" : String(value);
+  const [draft, setDraft] = React74__default.useState(initial);
+  React74__default.useEffect(() => setDraft(initial), [initial]);
+  const commit = () => {
+    if (numeric) {
+      const n = draft.trim() === "" ? 0 : Number(draft);
+      onCommit(field, Number.isNaN(n) ? 0 : n);
+    } else {
+      onCommit(field, draft);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      inputType: numeric ? "number" : "text",
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") commit();
+      }
+    }
+  );
+}
+function isTraitConfigObject(v) {
+  return v !== null && v !== void 0 && typeof v === "object" && !Array.isArray(v);
+}
+function FieldControl({
+  name,
+  decl,
+  value,
+  onChange,
+  assets
+}) {
+  let control;
+  const stringValue = typeof value === "string" ? value : void 0;
+  const effectiveValue = value ?? decl.default;
+  if (decl.type === "icon") {
+    control = /* @__PURE__ */ jsx(IconPicker, { value: stringValue, onChange: (icon) => onChange(name, icon) });
+  } else if (decl.type === "asset") {
+    control = /* @__PURE__ */ jsx(
+      AssetPicker,
+      {
+        assets: assets ?? [],
+        value: stringValue,
+        onChange: (url) => onChange(name, url)
+      }
+    );
+  } else if (decl.type === "boolean") {
+    control = /* @__PURE__ */ jsx(Switch, { checked: value === true, onChange: (c) => onChange(name, c) });
+  } else if (decl.type === "string" && decl.values !== void 0 && decl.values.length > 0) {
+    control = /* @__PURE__ */ jsx(
+      Select,
+      {
+        options: decl.values.map((v) => ({ value: v, label: v })),
+        value: typeof value === "string" ? value : "",
+        onChange: (e) => onChange(name, e.target.value)
+      }
+    );
+  } else if (decl.type === "number") {
+    control = /* @__PURE__ */ jsx(TextLikeControl, { field: name, numeric: true, value, onCommit: onChange });
+  } else if (decl.type === "string") {
+    control = /* @__PURE__ */ jsx(TextLikeControl, { field: name, numeric: false, value, onCommit: onChange });
+  } else if (decl.type === "node") {
+    control = /* @__PURE__ */ jsx(NodeSlotEditor, { value: effectiveValue, onChange: (next) => onChange(name, next) });
+  } else if (decl.type.startsWith("[") || Array.isArray(effectiveValue)) {
+    const arr = Array.isArray(effectiveValue) ? effectiveValue : [];
+    control = /* @__PURE__ */ jsx(JsonTreeEditor, { value: arr, onChange: (next) => onChange(name, next) });
+  } else if (decl.type === "object" || decl.type.startsWith("Map ") || !SCALAR_TYPES.has(decl.type) && isTraitConfigObject(effectiveValue)) {
+    const obj = isTraitConfigObject(effectiveValue) ? effectiveValue : {};
+    control = /* @__PURE__ */ jsx(JsonTreeEditor, { value: obj, onChange: (next) => onChange(name, next) });
+  } else {
+    control = /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "muted", children: [
+      decl.type,
+      " \u2014 edit in source"
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "label", children: decl.label ?? name }),
+    control,
+    decl.description !== void 0 && decl.description !== "" && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: decl.description })
+  ] });
+}
+var TIER_ORDER, SCALAR_TYPES, PropertyInspector;
+var init_PropertyInspector = __esm({
+  "components/core/molecules/PropertyInspector.tsx"() {
+    "use client";
+    init_cn();
+    init_Stack();
+    init_Typography();
+    init_Button();
+    init_Switch();
+    init_Select();
+    init_Input();
+    init_FormSection();
+    init_IconPicker();
+    init_AssetPicker();
+    init_JsonTreeEditor();
+    init_NodeSlotEditor();
+    TIER_ORDER = ["presentation", "domain", "policy", "infra", "internal"];
+    SCALAR_TYPES = /* @__PURE__ */ new Set(["string", "number", "boolean", "icon", "asset"]);
+    PropertyInspector = ({
+      config,
+      values,
+      onChange,
+      onReset,
+      title,
+      className,
+      assets
+    }) => {
+      const fields = Object.entries(config);
+      const byTier = /* @__PURE__ */ new Map();
+      for (const [name, decl] of fields) {
+        const tier = decl.tier ?? "presentation";
+        const arr = byTier.get(tier) ?? [];
+        arr.push([name, decl]);
+        byTier.set(tier, arr);
+      }
+      const tiers = [...byTier.keys()].sort((a, b) => {
+        const ia = TIER_ORDER.indexOf(a);
+        const ib = TIER_ORDER.indexOf(b);
+        return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib);
+      });
+      return /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: cn("w-full", className), children: [
+        /* @__PURE__ */ jsxs(HStack, { justify: "between", align: "center", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", weight: "bold", children: title ?? "Config" }),
+          onReset !== void 0 && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: "rotate-ccw", label: "Reset", onClick: onReset })
+        ] }),
+        fields.length === 0 && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: "No configurable properties." }),
+        tiers.map((tier) => /* @__PURE__ */ jsx(FormSection, { title: tier, collapsible: true, defaultCollapsed: tier !== "presentation", children: /* @__PURE__ */ jsx(VStack, { gap: "sm", children: byTier.get(tier)?.map(([name, decl]) => /* @__PURE__ */ jsx(
+          FieldControl,
+          {
+            name,
+            decl,
+            value: currentValue(decl, values?.[name]),
+            onChange,
+            assets
+          },
+          name
+        )) }) }, tier))
+      ] });
+    };
+  }
+});
 function normalize(value) {
   const wasArray = Array.isArray(value);
   const pattern = wasArray ? value[0] : value;
@@ -22501,6 +23140,7 @@ var init_NodeSlotEditor = __esm({
     init_Select();
     init_Typography();
     init_JsonTreeEditor();
+    init_PropertyInspector();
     init_pattern_resolver();
     init_cn();
     isObj2 = (v) => v !== null && v !== void 0 && typeof v === "object" && !Array.isArray(v);
@@ -22525,6 +23165,21 @@ var init_NodeSlotEditor = __esm({
         const pattern = { type: nextType, ...nextProps };
         onChange(wasArray || value === void 0 ? [pattern] : pattern);
       };
+      const schemaEntries = React74__default.useMemo(() => {
+        if (!type) return [];
+        const def = getPatternDefinition(type);
+        if (!def?.propsSchema) return [];
+        return Object.entries(def.propsSchema).map(([propName, propDef]) => {
+          const decl = {
+            type: propDef.types?.[0] ?? "string",
+            description: propDef.description,
+            label: propName,
+            ...propDef.enumValues && propDef.enumValues.length > 0 ? { values: propDef.enumValues } : {}
+          };
+          return [propName, decl];
+        });
+      }, [type]);
+      const hasSchema = schemaEntries.length > 0;
       return /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: cn("w-full", className), children: [
         /* @__PURE__ */ jsx(
           Select,
@@ -22536,7 +23191,16 @@ var init_NodeSlotEditor = __esm({
         ),
         type !== "" && /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "pl-1", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: "props" }),
-          /* @__PURE__ */ jsx(JsonTreeEditor, { value: props, onChange: (next) => emit(type, isObj2(next) ? next : {}) })
+          hasSchema ? /* @__PURE__ */ jsx(VStack, { gap: "xs", children: schemaEntries.map(([propName, decl]) => /* @__PURE__ */ jsx(
+            FieldControl,
+            {
+              name: propName,
+              decl,
+              value: props[propName],
+              onChange: (field, val) => emit(type, { ...props, [field]: val })
+            },
+            propName
+          )) }) : /* @__PURE__ */ jsx(JsonTreeEditor, { value: props, onChange: (next) => emit(type, isObj2(next) ? next : {}) })
         ] })
       ] });
     };
@@ -25119,303 +25783,6 @@ var init_FlipCard = __esm({
     FlipCard.displayName = "FlipCard";
   }
 });
-var ALL_CATEGORY, GridPicker;
-var init_GridPicker = __esm({
-  "components/core/molecules/GridPicker.tsx"() {
-    "use client";
-    init_cn();
-    init_Input();
-    init_Badge();
-    init_Stack();
-    ALL_CATEGORY = "__all__";
-    GridPicker = ({
-      items,
-      value,
-      onChange,
-      categories,
-      searchPlaceholder,
-      renderThumbnail,
-      cellSize = 32,
-      className
-    }) => {
-      const [search, setSearch] = useState("");
-      const [activeCategory, setActiveCategory] = useState(ALL_CATEGORY);
-      const gridRef = useRef(null);
-      const categoryChips = useMemo(() => {
-        if (categories !== void 0) return categories;
-        const seen = [];
-        for (const item of items) {
-          if (!seen.includes(item.category)) seen.push(item.category);
-        }
-        return seen;
-      }, [categories, items]);
-      const filtered = useMemo(() => {
-        const needle = search.trim().toLowerCase();
-        return items.filter((item) => {
-          const matchesCategory = activeCategory === ALL_CATEGORY || item.category === activeCategory;
-          const matchesSearch = needle === "" || item.label.toLowerCase().includes(needle);
-          return matchesCategory && matchesSearch;
-        });
-      }, [items, search, activeCategory]);
-      const select = useCallback(
-        (item) => {
-          onChange(item.id);
-        },
-        [onChange]
-      );
-      const handleKeyDown = useCallback(
-        (e, index) => {
-          const cells = gridRef.current?.querySelectorAll(
-            "[data-gridpicker-cell]"
-          );
-          if (cells === void 0 || cells.length === 0) return;
-          const columns = (() => {
-            const grid = gridRef.current;
-            if (grid === null) return 1;
-            const style = window.getComputedStyle(grid);
-            const cols = style.gridTemplateColumns.split(" ").filter(Boolean).length;
-            return cols > 0 ? cols : 1;
-          })();
-          let next = -1;
-          if (e.key === "ArrowRight") next = index + 1;
-          else if (e.key === "ArrowLeft") next = index - 1;
-          else if (e.key === "ArrowDown") next = index + columns;
-          else if (e.key === "ArrowUp") next = index - columns;
-          else if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            select(filtered[index]);
-            return;
-          } else {
-            return;
-          }
-          e.preventDefault();
-          if (next >= 0 && next < cells.length) {
-            cells[next].focus();
-          }
-        },
-        [filtered, select]
-      );
-      return /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: cn("w-full", className), children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            type: "search",
-            icon: "search",
-            value: search,
-            placeholder: searchPlaceholder,
-            clearable: true,
-            onClear: () => setSearch(""),
-            onChange: (e) => setSearch(e.target.value)
-          }
-        ),
-        categoryChips.length > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "xs", wrap: true, children: [
-          /* @__PURE__ */ jsx(
-            Badge,
-            {
-              variant: activeCategory === ALL_CATEGORY ? "primary" : "neutral",
-              size: "sm",
-              role: "button",
-              tabIndex: 0,
-              "aria-pressed": activeCategory === ALL_CATEGORY,
-              className: "cursor-pointer",
-              onClick: () => setActiveCategory(ALL_CATEGORY),
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  setActiveCategory(ALL_CATEGORY);
-                }
-              },
-              children: "All"
-            }
-          ),
-          categoryChips.map((category) => /* @__PURE__ */ jsx(
-            Badge,
-            {
-              variant: activeCategory === category ? "primary" : "neutral",
-              size: "sm",
-              role: "button",
-              tabIndex: 0,
-              "aria-pressed": activeCategory === category,
-              className: "cursor-pointer",
-              onClick: () => setActiveCategory(category),
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  setActiveCategory(category);
-                }
-              },
-              children: category
-            },
-            category
-          ))
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: gridRef,
-            role: "listbox",
-            className: "grid gap-1 overflow-y-auto max-h-64 p-1",
-            style: {
-              gridTemplateColumns: `repeat(auto-fill, minmax(${cellSize}px, 1fr))`
-            },
-            children: filtered.map((item, index) => {
-              const selected = item.id === value;
-              return /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  role: "option",
-                  "aria-selected": selected,
-                  "aria-label": item.label,
-                  title: item.label,
-                  "data-gridpicker-cell": true,
-                  tabIndex: selected || value === void 0 && index === 0 ? 0 : -1,
-                  onClick: () => select(item),
-                  onKeyDown: (e) => handleKeyDown(e, index),
-                  className: cn(
-                    "flex items-center justify-center rounded-sm",
-                    "transition-colors hover:bg-muted",
-                    "focus:outline-none focus:ring-1 focus:ring-ring",
-                    selected && "bg-primary/10 ring-1 ring-primary"
-                  ),
-                  style: { width: cellSize, height: cellSize },
-                  children: renderThumbnail(item)
-                },
-                item.id
-              );
-            })
-          }
-        )
-      ] });
-    };
-    GridPicker.displayName = "GridPicker";
-  }
-});
-function iconForKind(kind) {
-  if (kind === "audio") return "music";
-  if (kind === "model") return "box";
-  return "file";
-}
-var THUMB_PX, IMAGE_KINDS, AssetPicker;
-var init_AssetPicker = __esm({
-  "components/core/molecules/AssetPicker.tsx"() {
-    "use client";
-    init_GridPicker();
-    init_Icon();
-    THUMB_PX = 32;
-    IMAGE_KINDS = /* @__PURE__ */ new Set([
-      "image",
-      "spritesheet",
-      "scene",
-      "portrait"
-    ]);
-    AssetPicker = ({
-      assets,
-      value,
-      onChange,
-      className
-    }) => {
-      const byUrl = useMemo(() => {
-        const map = /* @__PURE__ */ new Map();
-        for (const entry of assets) map.set(entry.url, entry);
-        return map;
-      }, [assets]);
-      const items = useMemo(
-        () => assets.map((entry) => ({
-          id: entry.url,
-          label: entry.name,
-          category: entry.category
-        })),
-        [assets]
-      );
-      const categories = useMemo(() => {
-        const seen = [];
-        for (const entry of assets) {
-          if (!seen.includes(entry.category)) seen.push(entry.category);
-        }
-        return seen;
-      }, [assets]);
-      const renderThumbnail = useCallback(
-        (item) => {
-          const entry = byUrl.get(item.id);
-          if (entry === void 0) return null;
-          if (IMAGE_KINDS.has(entry.kind)) {
-            return /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: entry.thumbnailUrl ?? entry.url,
-                alt: entry.name,
-                loading: "lazy",
-                width: THUMB_PX,
-                height: THUMB_PX,
-                style: { width: THUMB_PX, height: THUMB_PX, objectFit: "cover" }
-              }
-            );
-          }
-          return /* @__PURE__ */ jsx(Icon, { name: iconForKind(entry.kind), size: "sm" });
-        },
-        [byUrl]
-      );
-      return /* @__PURE__ */ jsx(
-        GridPicker,
-        {
-          items,
-          value,
-          onChange,
-          categories,
-          renderThumbnail,
-          cellSize: THUMB_PX,
-          className
-        }
-      );
-    };
-    AssetPicker.displayName = "AssetPicker";
-  }
-});
-function pascalToKebab(name) {
-  return name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
-}
-function kebabToPascal3(name) {
-  return name.split("-").map((part) => /^\d+$/.test(part) ? part : part.charAt(0).toUpperCase() + part.slice(1)).join("");
-}
-var ICON_ITEMS, IconPicker;
-var init_IconPicker = __esm({
-  "components/core/molecules/IconPicker.tsx"() {
-    "use client";
-    init_Icon();
-    init_GridPicker();
-    ICON_ITEMS = (() => {
-      const items = [];
-      for (const [exportName, candidate] of Object.entries(LucideIcons2)) {
-        if (!/^[A-Z]/.test(exportName)) continue;
-        if (exportName.endsWith("Icon")) continue;
-        if (exportName.startsWith("Lucide")) continue;
-        const isComponent = candidate !== null && (typeof candidate === "object" || typeof candidate === "function") && "$$typeof" in candidate;
-        if (!isComponent) continue;
-        const kebab = pascalToKebab(exportName);
-        if (kebabToPascal3(kebab) !== exportName) continue;
-        items.push({ id: kebab, label: kebab, category: "icons" });
-      }
-      return items;
-    })();
-    IconPicker = ({ value, onChange, className }) => {
-      const items = useMemo(() => ICON_ITEMS, []);
-      return /* @__PURE__ */ jsx(
-        GridPicker,
-        {
-          items,
-          value,
-          onChange,
-          searchPlaceholder: "Search icons\u2026",
-          renderThumbnail: (it) => /* @__PURE__ */ jsx(Icon, { name: it.id }),
-          cellSize: 32,
-          className
-        }
-      );
-    };
-    IconPicker.displayName = "IconPicker";
-  }
-});
 function toISODate(d) {
   return d.toISOString().slice(0, 10);
 }
@@ -35106,286 +35473,6 @@ var init_PageHeader = __esm({
     PageHeader.displayName = "PageHeader";
   }
 });
-var FormSection, FormLayout, FormActions;
-var init_FormSection = __esm({
-  "components/core/molecules/FormSection.tsx"() {
-    "use client";
-    init_cn();
-    init_atoms2();
-    init_Box();
-    init_Typography();
-    init_Button();
-    init_Stack();
-    init_Icon();
-    init_useEventBus();
-    FormSection = ({
-      title,
-      description,
-      children,
-      collapsible = false,
-      defaultCollapsed = false,
-      card = false,
-      columns = 1,
-      className
-    }) => {
-      const [collapsed, setCollapsed] = React74__default.useState(defaultCollapsed);
-      const { t } = useTranslate();
-      const eventBus = useEventBus();
-      const gridClass = {
-        1: "grid-cols-1",
-        2: "grid-cols-1 md:grid-cols-2",
-        3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
-      }[columns];
-      React74__default.useCallback(() => {
-        if (collapsible) {
-          setCollapsed((prev) => !prev);
-          eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
-        }
-      }, [collapsible, collapsed, eventBus]);
-      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-        (title || description) && /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "mb-4", children: [
-          title && /* @__PURE__ */ jsxs(
-            HStack,
-            {
-              justify: "between",
-              align: "center",
-              className: cn(collapsible && "cursor-pointer"),
-              action: collapsible ? "TOGGLE_COLLAPSE" : void 0,
-              children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "h3", weight: "semibold", children: title }),
-                collapsible && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    action: "TOGGLE_COLLAPSE",
-                    children: /* @__PURE__ */ jsx(
-                      Icon,
-                      {
-                        icon: ChevronDown,
-                        size: "sm",
-                        className: cn(
-                          "text-muted-foreground transition-transform",
-                          collapsed && "rotate-180"
-                        )
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          description && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: description })
-        ] }),
-        (!collapsible || !collapsed) && /* @__PURE__ */ jsx(Box, { className: cn("grid gap-4", gridClass), children })
-      ] });
-      if (card) {
-        return /* @__PURE__ */ jsx(Card, { className: cn("p-6", className), children: content });
-      }
-      return /* @__PURE__ */ jsx(Box, { className, children: content });
-    };
-    FormSection.displayName = "FormSection";
-    FormLayout = ({
-      children,
-      dividers = true,
-      className
-    }) => {
-      return /* @__PURE__ */ jsx(
-        VStack,
-        {
-          gap: "lg",
-          className: cn(
-            dividers && "[&>*+*]:pt-8 [&>*+*]:border-t [&>*+*]:border-border",
-            className
-          ),
-          children
-        }
-      );
-    };
-    FormLayout.displayName = "FormLayout";
-    FormActions = ({
-      children,
-      sticky = false,
-      align = "right",
-      className
-    }) => {
-      const alignClass2 = {
-        left: "justify-start",
-        right: "justify-end",
-        between: "justify-between",
-        center: "justify-center"
-      }[align];
-      return /* @__PURE__ */ jsx(
-        HStack,
-        {
-          gap: "sm",
-          align: "center",
-          className: cn(
-            "pt-6 border-t border-border",
-            alignClass2,
-            sticky && "sticky bottom-0 bg-card py-4 -mx-6 px-6 shadow-[0_-4px_6px_-1px_rgb(0,0,0,0.05)]",
-            className
-          ),
-          children
-        }
-      );
-    };
-    FormActions.displayName = "FormActions";
-  }
-});
-function currentValue(decl, override) {
-  return override !== void 0 ? override : decl.default;
-}
-function TextLikeControl({
-  field,
-  numeric,
-  value,
-  onCommit
-}) {
-  const initial = value === void 0 || value === null ? "" : String(value);
-  const [draft, setDraft] = React74__default.useState(initial);
-  React74__default.useEffect(() => setDraft(initial), [initial]);
-  const commit = () => {
-    if (numeric) {
-      const n = draft.trim() === "" ? 0 : Number(draft);
-      onCommit(field, Number.isNaN(n) ? 0 : n);
-    } else {
-      onCommit(field, draft);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      inputType: numeric ? "number" : "text",
-      value: draft,
-      onChange: (e) => setDraft(e.target.value),
-      onBlur: commit,
-      onKeyDown: (e) => {
-        if (e.key === "Enter") commit();
-      }
-    }
-  );
-}
-function isTraitConfigObject(v) {
-  return v !== null && v !== void 0 && typeof v === "object" && !Array.isArray(v);
-}
-function FieldControl({
-  name,
-  decl,
-  value,
-  onChange,
-  assets
-}) {
-  let control;
-  const stringValue = typeof value === "string" ? value : void 0;
-  const effectiveValue = value ?? decl.default;
-  if (decl.type === "icon") {
-    control = /* @__PURE__ */ jsx(IconPicker, { value: stringValue, onChange: (icon) => onChange(name, icon) });
-  } else if (decl.type === "asset") {
-    control = /* @__PURE__ */ jsx(
-      AssetPicker,
-      {
-        assets: assets ?? [],
-        value: stringValue,
-        onChange: (url) => onChange(name, url)
-      }
-    );
-  } else if (decl.type === "boolean") {
-    control = /* @__PURE__ */ jsx(Switch, { checked: value === true, onChange: (c) => onChange(name, c) });
-  } else if (decl.type === "string" && decl.values !== void 0 && decl.values.length > 0) {
-    control = /* @__PURE__ */ jsx(
-      Select,
-      {
-        options: decl.values.map((v) => ({ value: v, label: v })),
-        value: typeof value === "string" ? value : "",
-        onChange: (e) => onChange(name, e.target.value)
-      }
-    );
-  } else if (decl.type === "number") {
-    control = /* @__PURE__ */ jsx(TextLikeControl, { field: name, numeric: true, value, onCommit: onChange });
-  } else if (decl.type === "string") {
-    control = /* @__PURE__ */ jsx(TextLikeControl, { field: name, numeric: false, value, onCommit: onChange });
-  } else if (decl.type === "node") {
-    control = /* @__PURE__ */ jsx(NodeSlotEditor, { value: effectiveValue, onChange: (next) => onChange(name, next) });
-  } else if (decl.type.startsWith("[") || Array.isArray(effectiveValue)) {
-    const arr = Array.isArray(effectiveValue) ? effectiveValue : [];
-    control = /* @__PURE__ */ jsx(JsonTreeEditor, { value: arr, onChange: (next) => onChange(name, next) });
-  } else if (decl.type === "object" || decl.type.startsWith("Map ") || !SCALAR_TYPES.has(decl.type) && isTraitConfigObject(effectiveValue)) {
-    const obj = isTraitConfigObject(effectiveValue) ? effectiveValue : {};
-    control = /* @__PURE__ */ jsx(JsonTreeEditor, { value: obj, onChange: (next) => onChange(name, next) });
-  } else {
-    control = /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "muted", children: [
-      decl.type,
-      " \u2014 edit in source"
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "label", children: decl.label ?? name }),
-    control,
-    decl.description !== void 0 && decl.description !== "" && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: decl.description })
-  ] });
-}
-var TIER_ORDER, SCALAR_TYPES, PropertyInspector;
-var init_PropertyInspector = __esm({
-  "components/core/molecules/PropertyInspector.tsx"() {
-    "use client";
-    init_cn();
-    init_Stack();
-    init_Typography();
-    init_Button();
-    init_Switch();
-    init_Select();
-    init_Input();
-    init_FormSection();
-    init_IconPicker();
-    init_AssetPicker();
-    init_JsonTreeEditor();
-    init_NodeSlotEditor();
-    TIER_ORDER = ["presentation", "domain", "policy", "infra", "internal"];
-    SCALAR_TYPES = /* @__PURE__ */ new Set(["string", "number", "boolean", "icon", "asset"]);
-    PropertyInspector = ({
-      config,
-      values,
-      onChange,
-      onReset,
-      title,
-      className,
-      assets
-    }) => {
-      const fields = Object.entries(config);
-      const byTier = /* @__PURE__ */ new Map();
-      for (const [name, decl] of fields) {
-        const tier = decl.tier ?? "presentation";
-        const arr = byTier.get(tier) ?? [];
-        arr.push([name, decl]);
-        byTier.set(tier, arr);
-      }
-      const tiers = [...byTier.keys()].sort((a, b) => {
-        const ia = TIER_ORDER.indexOf(a);
-        const ib = TIER_ORDER.indexOf(b);
-        return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib);
-      });
-      return /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: cn("w-full", className), children: [
-        /* @__PURE__ */ jsxs(HStack, { justify: "between", align: "center", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "caption", weight: "bold", children: title ?? "Config" }),
-          onReset !== void 0 && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: "rotate-ccw", label: "Reset", onClick: onReset })
-        ] }),
-        fields.length === 0 && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: "No configurable properties." }),
-        tiers.map((tier) => /* @__PURE__ */ jsx(FormSection, { title: tier, collapsible: true, defaultCollapsed: tier !== "presentation", children: /* @__PURE__ */ jsx(VStack, { gap: "sm", children: byTier.get(tier)?.map(([name, decl]) => /* @__PURE__ */ jsx(
-          FieldControl,
-          {
-            name,
-            decl,
-            value: currentValue(decl, values?.[name]),
-            onChange,
-            assets
-          },
-          name
-        )) }) }, tier))
-      ] });
-    };
-  }
-});
 var lookStyles8, Header;
 var init_Header = __esm({
   "components/core/molecules/Header.tsx"() {
@@ -36741,7 +36828,6 @@ var init_DocumentViewer = __esm({
       showPrint = false,
       actions,
       documents,
-      entity,
       isLoading = false,
       error,
       className
@@ -43911,7 +43997,7 @@ function TraitSlot({
   size = "md",
   showTooltip = true,
   categoryColors,
-  tooltipFrameUrl,
+  tooltipFrameUrl = "",
   className,
   feedback,
   onItemDrop,
@@ -47000,7 +47086,7 @@ var init_WorldMapBoard = __esm({
     init_useEventBus();
     init_Stack();
     init_LoadingState();
-    init_IsometricCanvas2();
+    init_IsometricCanvas();
     init_boardEntity();
     init_isometric();
     WorldMapBoard.displayName = "WorldMapBoard";
@@ -47140,7 +47226,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();
@@ -47426,7 +47512,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,
@@ -47539,6 +47629,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,
@@ -48401,7 +48495,7 @@ function SlotContentRenderer({
     const { children: _childrenConfig, ...restPropsNoChildren } = content.props;
     const restProps = childrenIsRenderFn ? { ...restPropsNoChildren, children: incomingChildren } : restPropsNoChildren;
     const renderedProps = renderPatternProps(restProps, onDismiss);
-    const patternDef = getPatternDefinition(content.pattern);
+    const patternDef = getPatternDefinition$1(content.pattern);
     const propsSchema = patternDef?.propsSchema;
     if (propsSchema) {
       for (const [propKey, propValue] of Object.entries(renderedProps)) {