@almadar/ui 5.29.0 → 5.31.0

package/dist/components/index.js

@@ -45,8 +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 { context, Canvas } from '@react-three/fiber';
+import { getPatternDefinition as getPatternDefinition$1, getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -2139,6 +2138,8 @@ var init_Input = __esm({
         className,
         inputType,
         type: htmlType,
+        label,
+        helperText,
         error,
         leftIcon,
         rightIcon,
@@ -2194,82 +2195,95 @@ var init_Input = __esm({
             onClear?.();
           }
         };
+        const wrapField = (field) => /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+          label && /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-foreground mb-1", children: label }),
+          field,
+          (helperText || error) && /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-xs", error ? "text-error" : "text-muted-foreground"), children: error ?? helperText })
+        ] });
         if (type === "select") {
-          return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-            resolvedLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
-            /* @__PURE__ */ jsxs(
-              "select",
+          return wrapField(
+            /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+              resolvedLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  ref,
+                  value,
+                  onChange: handleChange,
+                  className: cn(baseClassName, "appearance-none pr-10", className),
+                  ...props,
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "", children: t("form.selectPlaceholder", { label: "" }) }),
+                    options?.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: "h-icon-default w-icon-default" }) })
+            ] })
+          );
+        }
+        if (type === "textarea") {
+          return wrapField(
+            /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx(
+              "textarea",
               {
                 ref,
                 value,
                 onChange: handleChange,
-                className: cn(baseClassName, "appearance-none pr-10", className),
-                ...props,
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "", children: t("form.selectPlaceholder", { label: "" }) }),
-                  options?.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
-                ]
+                rows: rows2,
+                className: baseClassName,
+                ...props
               }
-            ),
-            /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: "h-icon-default w-icon-default" }) })
-          ] });
-        }
-        if (type === "textarea") {
-          return /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx(
-            "textarea",
-            {
-              ref,
-              value,
-              onChange: handleChange,
-              rows: rows2,
-              className: baseClassName,
-              ...props
-            }
-          ) });
+            ) })
+          );
         }
         if (type === "checkbox") {
-          return /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref,
-              type: "checkbox",
-              checked: props.checked,
-              onChange: handleChange,
-              className: cn(
-                "h-icon-default w-icon-default rounded-sm",
-                "border-border",
-                "text-primary focus:ring-ring",
-                "disabled:opacity-50 disabled:cursor-not-allowed",
-                className
-              ),
-              ...props
-            }
+          return wrapField(
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                type: "checkbox",
+                checked: props.checked,
+                onChange: handleChange,
+                className: cn(
+                  "h-icon-default w-icon-default rounded-sm",
+                  "border-border",
+                  "text-primary focus:ring-ring",
+                  "disabled:opacity-50 disabled:cursor-not-allowed",
+                  className
+                ),
+                ...props
+              }
+            )
           );
         }
-        return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-          resolvedLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref,
-              type,
-              value,
-              onChange: handleChange,
-              className: baseClassName,
-              ...props
-            }
-          ),
-          showClearButton && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleClear,
-              className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground",
-              children: /* @__PURE__ */ jsx(Icon, { name: "x", className: "h-icon-default w-icon-default" })
-            }
-          ),
-          rightIcon && !showClearButton && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground", children: resolveIconNode(rightIcon, iconCls) })
-        ] });
+        return wrapField(
+          /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+            resolvedLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                type,
+                value,
+                onChange: handleChange,
+                className: baseClassName,
+                ...props
+              }
+            ),
+            showClearButton && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleClear,
+                className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground",
+                children: /* @__PURE__ */ jsx(Icon, { name: "x", className: "h-icon-default w-icon-default" })
+              }
+            ),
+            rightIcon && !showClearButton && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground", children: resolveIconNode(rightIcon, iconCls) })
+          ] })
+        );
       }
     );
     Input.displayName = "Input";
@@ -2340,6 +2354,190 @@ var init_Textarea = __esm({
     Textarea.displayName = "Textarea";
   }
 });
+function flatOptions(opts, groups) {
+  const flat = opts ?? [];
+  const grp = (groups ?? []).flatMap((g) => g.options);
+  return [...flat, ...grp];
+}
+function NativeSelect({
+  className,
+  options,
+  groups,
+  placeholder,
+  error,
+  onChange,
+  value,
+  ...props
+}) {
+  const eventBus = useEventBus();
+  const handleChange = (e) => {
+    if (typeof onChange === "string") {
+      eventBus.emit(`UI:${onChange}`, { value: e.target.value });
+    } else {
+      onChange?.(e.target.value);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        onChange: handleChange,
+        value,
+        className: cn(
+          "block w-full border-[length:var(--border-width)] shadow-sm appearance-none",
+          "px-3 py-2 pr-10 text-sm text-foreground font-medium",
+          "bg-card",
+          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+          "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
+          error ? "border-error focus:border-error" : "border-border focus:border-primary",
+          className
+        ),
+        ...props,
+        children: [
+          placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+          options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)),
+          groups?.map((group) => /* @__PURE__ */ jsx("optgroup", { label: group.label, children: group.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)) }, group.label))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: "h-icon-default w-icon-default text-foreground" }) })
+  ] });
+}
+function RichSelect({
+  className,
+  options,
+  groups,
+  placeholder,
+  error,
+  onChange,
+  value,
+  multiple,
+  searchable,
+  clearable,
+  disabled
+}) {
+  const eventBus = useEventBus();
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const containerRef = useRef(null);
+  const selected = multiple ? Array.isArray(value) ? value : value ? [value] : [] : value ? [value] : [];
+  const all = flatOptions(options, groups);
+  const filtered = searchable && search ? all.filter((o) => o.label.toLowerCase().includes(search.toLowerCase())) : all;
+  const toggle = (optValue) => {
+    let next;
+    if (multiple) {
+      next = selected.includes(optValue) ? selected.filter((v) => v !== optValue) : [...selected, optValue];
+    } else {
+      next = optValue;
+      setOpen(false);
+    }
+    if (typeof onChange === "string") {
+      eventBus.emit(`UI:${onChange}`, { value: next });
+    } else {
+      onChange?.(next);
+    }
+  };
+  const clear = (e) => {
+    e.stopPropagation();
+    const next = multiple ? [] : "";
+    if (typeof onChange === "string") {
+      eventBus.emit(`UI:${onChange}`, { value: next });
+    } else {
+      onChange?.(next);
+    }
+  };
+  useEffect(() => {
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+        setSearch("");
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+  const displayLabel = selected.length === 0 ? placeholder ?? "" : multiple ? `${selected.length} selected` : all.find((o) => o.value === selected[0])?.label ?? selected[0];
+  const hasValue = selected.length > 0;
+  const renderOptions = (opts) => opts.map((opt) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled: opt.disabled,
+      onClick: () => !opt.disabled && toggle(opt.value),
+      className: cn(
+        "w-full flex items-center justify-between px-3 py-1.5 text-sm text-start",
+        "hover:bg-muted transition-colors",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        selected.includes(opt.value) && "text-primary font-medium"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { children: opt.label }),
+        selected.includes(opt.value) && /* @__PURE__ */ jsx(Icon, { name: "check", className: "h-icon-default w-icon-default" })
+      ]
+    },
+    opt.value
+  ));
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative w-full", className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => !disabled && setOpen((o) => !o),
+        className: cn(
+          "block w-full border-[length:var(--border-width)] shadow-sm",
+          "px-3 py-2 pr-10 text-sm text-start font-medium",
+          "bg-card rounded-sm",
+          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+          "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
+          error ? "border-error focus:border-error" : "border-border focus:border-primary",
+          !hasValue && "text-muted-foreground"
+        ),
+        children: displayLabel
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center gap-1 pointer-events-none", children: [
+      clearable && hasValue && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: clear,
+          className: "pointer-events-auto text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ jsx(Icon, { name: "x", className: "h-icon-default w-icon-default" })
+        }
+      ),
+      /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: "h-icon-default w-icon-default text-foreground" })
+    ] }),
+    open && /* @__PURE__ */ jsxs("div", { className: cn(
+      "absolute z-50 mt-1 w-full",
+      "bg-card border-[length:var(--border-width)] border-border",
+      "rounded-sm shadow-elevation-popover py-1 max-h-60 overflow-y-auto"
+    ), children: [
+      searchable && /* @__PURE__ */ jsx("div", { className: "px-2 pb-1 border-b border-border", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          autoFocus: true,
+          type: "text",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          placeholder: "Search\u2026",
+          className: cn(
+            "w-full px-2 py-1 text-sm bg-transparent",
+            "focus:outline-none text-foreground placeholder:text-muted-foreground"
+          )
+        }
+      ) }),
+      groups && groups.length > 0 ? groups.map((g) => {
+        const groupFiltered = searchable && search ? g.options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase())) : g.options;
+        if (groupFiltered.length === 0) return null;
+        return /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "px-3 py-1 text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: g.label }),
+          renderOptions(groupFiltered)
+        ] }, g.label);
+      }) : renderOptions(filtered)
+    ] })
+  ] });
+}
 var Select;
 var init_Select = __esm({
   "components/core/atoms/Select.tsx"() {
@@ -2347,47 +2545,12 @@ var init_Select = __esm({
     init_Icon();
     init_useEventBus();
     Select = React74__default.forwardRef(
-      ({ className, options, placeholder, error, onChange, ...props }, ref) => {
-        const eventBus = useEventBus();
-        const handleChange = (e) => {
-          if (typeof onChange === "string") {
-            eventBus.emit(`UI:${onChange}`, { value: e.target.value });
-          } else {
-            onChange?.(e);
-          }
-        };
-        return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              ref,
-              onChange: handleChange,
-              className: cn(
-                "block w-full border-[length:var(--border-width)] shadow-sm appearance-none",
-                "px-3 py-2 pr-10 text-sm text-foreground font-medium",
-                "bg-card",
-                "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
-                "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
-                error ? "border-error focus:border-error" : "border-border focus:border-primary",
-                className
-              ),
-              ...props,
-              children: [
-                placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
-                options.map((option) => /* @__PURE__ */ jsx(
-                  "option",
-                  {
-                    value: option.value,
-                    disabled: option.disabled,
-                    children: option.label
-                  },
-                  option.value
-                ))
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: "h-icon-default w-icon-default text-foreground" }) })
-        ] });
+      (props, _ref) => {
+        const { multiple, searchable, clearable } = props;
+        if (multiple || searchable || clearable) {
+          return /* @__PURE__ */ jsx(RichSelect, { ...props });
+        }
+        return /* @__PURE__ */ jsx(NativeSelect, { ...props });
       }
     );
     Select.displayName = "Select";
@@ -2441,11 +2604,54 @@ var init_Checkbox = __esm({
     Checkbox.displayName = "Checkbox";
   }
 });
+var sizeStyles2, Spinner;
+var init_Spinner = __esm({
+  "components/core/atoms/Spinner.tsx"() {
+    init_cn();
+    init_Icon();
+    sizeStyles2 = {
+      xs: "h-3 w-3",
+      sm: "h-icon-default w-icon-default",
+      md: "h-6 w-6",
+      lg: "h-8 w-8"
+    };
+    Spinner = React74__default.forwardRef(
+      ({ className, size = "md", overlay, ...props }, ref) => {
+        if (overlay) {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref,
+              className: cn(
+                "absolute inset-0 z-10 flex items-center justify-center",
+                "bg-background/60 backdrop-blur-sm",
+                className
+              ),
+              ...props,
+              children: /* @__PURE__ */ jsx(Icon, { name: "loader", className: cn("animate-spin text-foreground", sizeStyles2[size]) })
+            }
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            className: cn("text-foreground", className),
+            ...props,
+            children: /* @__PURE__ */ jsx(Icon, { name: "loader", className: cn("animate-spin", sizeStyles2[size]) })
+          }
+        );
+      }
+    );
+    Spinner.displayName = "Spinner";
+  }
+});
 var variantStyles2, paddingStyles, shadowStyles, lookStyles, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
 var init_Card = __esm({
   "components/core/atoms/Card.tsx"() {
     init_cn();
     init_useEventBus();
+    init_Spinner();
     variantStyles2 = {
       default: [
         "bg-card",
@@ -2510,6 +2716,7 @@ var init_Card = __esm({
         look = "elevated",
         children,
         action,
+        loading,
         onClick,
         ...props
       }, ref) => {
@@ -2523,7 +2730,7 @@ var init_Card = __esm({
           {
             ref,
             className: cn(
-              "rounded-container",
+              "rounded-container relative",
               "transition-all duration-[var(--transition-normal)]",
               variantStyles2[variant],
               paddingStyles[padding],
@@ -2534,6 +2741,7 @@ var init_Card = __esm({
             onClick: handleClick,
             ...props,
             children: [
+              loading && /* @__PURE__ */ jsx(Spinner, { overlay: true, size: "md" }),
               (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
                 title && /* @__PURE__ */ jsx("h3", { className: "text-lg text-card-foreground font-bold", children: title }),
                 subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
@@ -2575,7 +2783,7 @@ var init_Card = __esm({
     CardFooter.displayName = "CardFooter";
   }
 });
-var variantStyles3, sizeStyles2, Badge;
+var variantStyles3, sizeStyles3, Badge;
 var init_Badge = __esm({
   "components/core/atoms/Badge.tsx"() {
     init_cn();
@@ -2612,7 +2820,7 @@ var init_Badge = __esm({
         "border-[length:var(--border-width-thin)] border-border"
       ].join(" ")
     };
-    sizeStyles2 = {
+    sizeStyles3 = {
       sm: "px-2 py-0.5 text-xs",
       md: "px-2.5 py-1 text-sm",
       lg: "px-3 py-1.5 text-base"
@@ -2632,7 +2840,7 @@ var init_Badge = __esm({
             className: cn(
               "inline-flex items-center gap-1 font-bold rounded-sm",
               variantStyles3[variant],
-              sizeStyles2[size],
+              sizeStyles3[size],
               onRemove && "pr-1",
               className
             ),
@@ -2666,7 +2874,7 @@ var init_Badge = __esm({
     Badge.displayName = "Badge";
   }
 });
-var variantStyles4, sizeStyles3, iconSizes, FilterPill;
+var variantStyles4, sizeStyles4, iconSizes, FilterPill;
 var init_FilterPill = __esm({
   "components/core/atoms/FilterPill.tsx"() {
     init_cn();
@@ -2700,7 +2908,7 @@ var init_FilterPill = __esm({
         "border-[length:var(--border-width-thin)] border-border"
       ].join(" ")
     };
-    sizeStyles3 = {
+    sizeStyles4 = {
       sm: "px-2 py-0.5 text-xs",
       md: "px-2.5 py-1 text-sm",
       lg: "px-3 py-1.5 text-base"
@@ -2744,7 +2952,7 @@ var init_FilterPill = __esm({
             className: cn(
               "inline-flex items-center gap-1 font-bold rounded-pill",
               variantStyles4[variant],
-              sizeStyles3[size],
+              sizeStyles4[size],
               (onClick || clickEvent) && "cursor-pointer",
               className
             ),
@@ -2776,33 +2984,6 @@ var init_FilterPill = __esm({
     FilterPill.displayName = "FilterPill";
   }
 });
-var sizeStyles4, Spinner;
-var init_Spinner = __esm({
-  "components/core/atoms/Spinner.tsx"() {
-    init_cn();
-    init_Icon();
-    sizeStyles4 = {
-      xs: "h-3 w-3",
-      sm: "h-icon-default w-icon-default",
-      md: "h-6 w-6",
-      lg: "h-8 w-8"
-    };
-    Spinner = React74__default.forwardRef(
-      ({ className, size = "md", ...props }, ref) => {
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref,
-            className: cn("text-foreground", className),
-            ...props,
-            children: /* @__PURE__ */ jsx(Icon, { name: "loader", className: cn("animate-spin", sizeStyles4[size]) })
-          }
-        );
-      }
-    );
-    Spinner.displayName = "Spinner";
-  }
-});
 function generateInitials(name) {
   const parts = name.trim().split(/\s+/);
   if (parts.length === 1) {
@@ -7081,11 +7262,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 = {};
   }
 });
 
@@ -15020,30 +15205,30 @@ var init_BranchingLogicBuilder = __esm({
         if (!sourceQuestion?.optionValues) return [];
         return sourceQuestion.optionValues.map((v) => ({ value: v, label: v }));
       }, [sourceQuestion]);
-      const handleSource = (e) => {
-        onChange({ ...rule, sourceQuestionId: e.target.value });
+      const handleSource = (v) => {
+        onChange({ ...rule, sourceQuestionId: v });
       };
-      const handleOperator = (e) => {
-        const next = e.target.value;
+      const handleOperator = (v) => {
+        const next = v;
         const nextValue = next === "in" && !Array.isArray(rule.value) ? rule.value ? [rule.value] : [] : next !== "in" && Array.isArray(rule.value) ? rule.value[0] ?? "" : rule.value;
         onChange({ ...rule, operator: next, value: nextValue });
       };
       const handleScalarValue = (e) => {
         onChange({ ...rule, value: e.target.value });
       };
-      const handleAddChip = (e) => {
-        const v = e.target.value;
-        if (!v) return;
+      const handleAddChip = (v) => {
+        const val = v;
+        if (!val) return;
         const current = Array.isArray(rule.value) ? rule.value : [];
-        if (current.includes(v)) return;
-        onChange({ ...rule, value: [...current, v] });
+        if (current.includes(val)) return;
+        onChange({ ...rule, value: [...current, val] });
       };
       const handleRemoveChip = (chip) => {
         const current = Array.isArray(rule.value) ? rule.value : [];
         onChange({ ...rule, value: current.filter((c) => c !== chip) });
       };
-      const handleTarget = (e) => {
-        onChange({ ...rule, targetQuestionId: e.target.value });
+      const handleTarget = (v) => {
+        onChange({ ...rule, targetQuestionId: v });
       };
       const isMulti = rule.operator === "in";
       const chips = Array.isArray(rule.value) ? rule.value : [];
@@ -15124,7 +15309,7 @@ var init_BranchingLogicBuilder = __esm({
                   options: valueOptions,
                   value: scalarValue,
                   placeholder: t("branchingLogic.selectValue"),
-                  onChange: (e) => onChange({ ...rule, value: e.target.value }),
+                  onChange: (v) => onChange({ ...rule, value: v }),
                   disabled: readOnly
                 }
               ) : /* @__PURE__ */ jsx(
@@ -17556,7 +17741,7 @@ var init_Pagination = __esm({
               Select,
               {
                 value: String(pageSize),
-                onChange: (e) => handlePageSizeChange(Number(e.target.value)),
+                onChange: (v) => handlePageSizeChange(Number(v)),
                 options: pageSizeOptions.map((size) => ({
                   value: String(size),
                   label: String(size)
@@ -20710,7 +20895,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";
@@ -20721,16 +20983,27 @@ 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,
       position = "bottom-left",
-      className
+      className,
+      header,
+      footer
     }) => {
       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);
@@ -20745,13 +21018,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);
         }
@@ -20766,22 +21040,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",
@@ -20793,7 +21057,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,
@@ -20802,94 +21065,87 @@ 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__ */ jsxs(
+        "div",
+        {
+          ref: menuRef,
+          className: cn("fixed z-50", menuContainerStyles, className),
+          style: computeMenuStyle(effectivePosition, triggerRect),
+          role: "menu",
+          children: [
+            header && /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-b border-border", children: header }),
+            renderMenuItems(items),
+            footer && /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-t border-border", children: footer })
+          ]
+        }
+      ) : 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";
@@ -22299,11 +22555,15 @@ function KindSelect({
 function ValueNode({
   value,
   onChange,
-  depth
+  depth,
+  readonly
 }) {
   const kind = kindOf(value);
   if (kind === "object" || kind === "array") {
-    return /* @__PURE__ */ jsx(ContainerNode, { value, onChange, depth });
+    return /* @__PURE__ */ jsx(ContainerNode, { value, onChange, depth, readonly });
+  }
+  if (readonly) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "font-mono text-foreground", children: value === null ? "null" : String(value) });
   }
   return /* @__PURE__ */ jsx(ScalarControl, { value, onChange });
 }
@@ -22315,15 +22575,19 @@ function Row({
   onValue,
   onRenameKey,
   onChangeKind,
-  onRemove
+  onRemove,
+  readonly
 }) {
   const [keyDraft, setKeyDraft] = React74__default.useState(rowKey);
   React74__default.useEffect(() => setKeyDraft(rowKey), [rowKey]);
   const container = isObj(value) || isArr(value);
   return /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "group w-max min-w-full", children: [
     /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", className: "py-0.5 w-max", children: [
-      /* @__PURE__ */ jsx(KindSelect, { kind: kindOf(value), onChange: onChangeKind }),
-      isArrayItem ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", className: "w-6 shrink-0 font-mono", children: rowKey }) : /* @__PURE__ */ jsx("div", { className: "w-20 shrink-0", children: /* @__PURE__ */ jsx(
+      readonly ? /* @__PURE__ */ jsx("span", { className: cn(
+        "h-6 rounded-sm bg-muted text-muted-foreground text-[10px] font-mono px-1 flex items-center",
+        "border-[length:var(--border-width-thin)] border-border"
+      ), children: TYPE_LABEL[kindOf(value)] }) : /* @__PURE__ */ jsx(KindSelect, { kind: kindOf(value), onChange: onChangeKind }),
+      isArrayItem ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", className: "w-6 shrink-0 font-mono", children: rowKey }) : readonly ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", className: "w-20 shrink-0 font-mono truncate", children: rowKey }) : /* @__PURE__ */ jsx("div", { className: "w-20 shrink-0", children: /* @__PURE__ */ jsx(
         Input,
         {
           inputType: "text",
@@ -22336,8 +22600,8 @@ function Row({
           className: "font-mono"
         }
       ) }),
-      !container && /* @__PURE__ */ jsx("div", { className: "w-48 shrink-0", children: /* @__PURE__ */ jsx(ValueNode, { value, onChange: onValue, depth: depth + 1 }) }),
-      /* @__PURE__ */ jsx(
+      !container && /* @__PURE__ */ jsx("div", { className: "w-48 shrink-0", children: /* @__PURE__ */ jsx(ValueNode, { value, onChange: onValue, depth: depth + 1, readonly }) }),
+      !readonly && /* @__PURE__ */ jsx(
         Button,
         {
           variant: "ghost",
@@ -22349,13 +22613,14 @@ function Row({
         }
       )
     ] }),
-    container && /* @__PURE__ */ jsx("div", { className: "pl-2", children: /* @__PURE__ */ jsx(ValueNode, { value, onChange: onValue, depth: depth + 1 }) })
+    container && /* @__PURE__ */ jsx("div", { className: "pl-2", children: /* @__PURE__ */ jsx(ValueNode, { value, onChange: onValue, depth: depth + 1, readonly }) })
   ] });
 }
 function ContainerNode({
   value,
   onChange,
-  depth
+  depth,
+  readonly
 }) {
   const [open, setOpen] = React74__default.useState(depth < 2);
   const array = isArr(value);
@@ -22428,11 +22693,12 @@ function ContainerNode({
               onValue: (next) => array ? setArrValue(idx, next) : setObjValue(k, next),
               onRenameKey: (nk) => renameKey(k, nk),
               onChangeKind: (kind) => array ? changeArrKind(idx, kind) : changeObjKind(k, kind),
-              onRemove: () => array ? removeArrIdx(idx) : removeObjKey(k)
+              onRemove: () => array ? removeArrIdx(idx) : removeObjKey(k),
+              readonly
             },
             array ? idx : k
           )),
-          /* @__PURE__ */ jsx(
+          !readonly && /* @__PURE__ */ jsx(
             Button,
             {
               variant: "ghost",
@@ -22470,9 +22736,586 @@ var init_JsonTreeEditor = __esm({
       null: "\u2014"
     };
     KIND_OPTIONS = ["string", "number", "boolean", "object", "array"];
-    JsonTreeEditor = ({ value, onChange, className }) => {
+    JsonTreeEditor = ({ value, onChange, className, readonly }) => {
       const root = value ?? "";
-      return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto rounded-sm bg-card/40 p-2 border-[length:var(--border-width-thin)] border-border", className), children: /* @__PURE__ */ jsx(ValueNode, { value: root, onChange, depth: 0 }) });
+      return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto rounded-sm bg-card/40 p-2 border-[length:var(--border-width-thin)] border-border", className), children: /* @__PURE__ */ jsx(ValueNode, { value: root, onChange, depth: 0, readonly }) });
+    };
+  }
+});
+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: (v) => onChange(name, v)
+      }
+    );
+  } 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))
+      ] });
     };
   }
 });
@@ -22494,6 +23337,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);
@@ -22518,18 +23362,42 @@ 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,
           {
             options,
             value: type,
-            onChange: (e) => emit(e.target.value, props)
+            onChange: (v) => emit(v, props)
           }
         ),
         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 : {}) })
         ] })
       ] });
     };
@@ -22969,7 +23837,7 @@ var init_FilterGroup = __esm({
               Select,
               {
                 value: selectedValues[filter.field] || "all",
-                onChange: (e) => handleFilterSelect(filter.field, e.target.value),
+                onChange: (v) => handleFilterSelect(filter.field, v),
                 options: [
                   { value: "all", label: t("filterGroup.all") },
                   ...filter.options?.map((opt) => ({
@@ -23052,7 +23920,7 @@ var init_FilterGroup = __esm({
                 Select,
                 {
                   value: selectedValues[filter.field] || "all",
-                  onChange: (e) => handleFilterSelect(filter.field, e.target.value),
+                  onChange: (v) => handleFilterSelect(filter.field, v),
                   options: [
                     { value: "all", label: t("filterGroup.allOf", { label: filter.label }) },
                     ...filter.options?.map((opt) => ({
@@ -23170,7 +24038,7 @@ var init_FilterGroup = __esm({
                 Select,
                 {
                   value: selectedValues[filter.field] || "all",
-                  onChange: (e) => handleFilterSelect(filter.field, e.target.value),
+                  onChange: (v) => handleFilterSelect(filter.field, v),
                   options: [
                     { value: "all", label: t("filterGroup.all") },
                     ...filter.options?.map((opt) => ({
@@ -25112,303 +25980,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);
 }
@@ -28185,13 +28756,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect71, useRef: useRef68, useCallback: useCallback114, useState: useState100 } = React74__default;
+      const { useEffect: useEffect72, useRef: useRef69, useCallback: useCallback114, useState: useState101 } = React74__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef68({ centerLat, centerLng, zoom });
-        useEffect71(() => {
+        const prevRef = useRef69({ centerLat, centerLng, zoom });
+        useEffect72(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -28202,7 +28773,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect71(() => {
+        useEffect72(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -28230,7 +28801,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState100(null);
+        const [clickedPosition, setClickedPosition] = useState101(null);
         const handleMapClick = useCallback114((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -33666,8 +34237,8 @@ var init_VersionDiff = __esm({
         return { added, removed };
       }, [diff]);
       const handleBeforeChange = useCallback(
-        (e) => {
-          const id = e.target.value;
+        (v) => {
+          const id = v;
           setInternalBefore(id);
           onSelectBefore?.(id);
           if (selectBeforeEvent) eventBus.emit(`UI:${selectBeforeEvent}`, { id });
@@ -33675,8 +34246,8 @@ var init_VersionDiff = __esm({
         [onSelectBefore, selectBeforeEvent, eventBus]
       );
       const handleAfterChange = useCallback(
-        (e) => {
-          const id = e.target.value;
+        (v) => {
+          const id = v;
           setInternalAfter(id);
           onSelectAfter?.(id);
           if (selectAfterEvent) eventBus.emit(`UI:${selectAfterEvent}`, { id });
@@ -35099,286 +35670,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"() {
@@ -36734,7 +37025,6 @@ var init_DocumentViewer = __esm({
       showPrint = false,
       actions,
       documents,
-      entity,
       isLoading = false,
       error,
       className
@@ -38803,11 +39093,11 @@ function RuleEditor({
   className
 }) {
   const { t } = useTranslate();
-  const handleWhenChange = useCallback((e) => {
-    onChange({ ...rule, whenEvent: e.target.value });
+  const handleWhenChange = useCallback((v) => {
+    onChange({ ...rule, whenEvent: v });
   }, [rule, onChange]);
-  const handleThenChange = useCallback((e) => {
-    onChange({ ...rule, thenAction: e.target.value });
+  const handleThenChange = useCallback((v) => {
+    onChange({ ...rule, thenAction: v });
   }, [rule, onChange]);
   return /* @__PURE__ */ jsxs(HStack, { className: cn("items-center p-2 rounded-lg bg-muted/50 border border-border", className), gap: "sm", children: [
     /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-primary font-bold whitespace-nowrap", children: t("eventHandler.when") }),
@@ -39883,7 +40173,7 @@ var init_Form = __esm({
                 ...commonProps,
                 options,
                 value: String(currentValue2),
-                onChange: (e) => handleChange(fieldName, e.target.value),
+                onChange: (v) => handleChange(fieldName, v),
                 placeholder: field.placeholder || `Select ${label}...`
               }
             );
@@ -43904,7 +44194,7 @@ function TraitSlot({
   size = "md",
   showTooltip = true,
   categoryColors,
-  tooltipFrameUrl,
+  tooltipFrameUrl = "",
   className,
   feedback,
   onItemDrop,
@@ -47122,18 +47412,32 @@ var init_XPBar = __esm({
   }
 });
 function lazyThree(name, loader) {
-  const Lazy = React74__default.lazy(() => loader().then((m) => ({ default: m[name] })));
+  const Lazy = React74__default.lazy(
+    () => loader().then((m) => {
+      const Resolved = m[name];
+      if (!Resolved) {
+        throw new Error(
+          `[@almadar/ui] 3D component "${name}" was not found in the three subpath bundle.`
+        );
+      }
+      return { default: Resolved };
+    })
+  );
   function ThreeWrapper(props) {
     return React74__default.createElement(
-      React74__default.Suspense,
-      { fallback: null },
-      React74__default.createElement(Lazy, props)
+      ThreeBoundary,
+      { name },
+      React74__default.createElement(
+        React74__default.Suspense,
+        { fallback: null },
+        React74__default.createElement(Lazy, props)
+      )
     );
   }
   ThreeWrapper.displayName = `Lazy(${name})`;
   return ThreeWrapper;
 }
-var FeatureRenderer, GameCanvas3D, GameCanvas3DBattleTemplate, GameCanvas3DCastleTemplate, GameCanvas3DWorldMapTemplate, COMPONENT_REGISTRY;
+var ThreeBoundary, FeatureRenderer, GameCanvas3D, GameCanvas3DBattleTemplate, GameCanvas3DCastleTemplate, GameCanvas3DWorldMapTemplate, COMPONENT_REGISTRY;
 var init_component_registry_generated = __esm({
   "components/core/organisms/component-registry.generated.ts"() {
     init_AboutPageTemplate();
@@ -47419,6 +47723,28 @@ var init_component_registry_generated = __esm({
     init_WorldMapBoard();
     init_WorldMapTemplate();
     init_XPBar();
+    ThreeBoundary = class extends React74__default.Component {
+      constructor() {
+        super(...arguments);
+        __publicField(this, "state", { failed: false });
+      }
+      static getDerivedStateFromError() {
+        return { failed: true };
+      }
+      render() {
+        if (this.state.failed) {
+          return React74__default.createElement(
+            "div",
+            {
+              "data-testid": "three-unavailable",
+              style: { padding: 16, fontSize: 13, lineHeight: 1.5, opacity: 0.7 }
+            },
+            `3D pattern "${this.props.name}" requires three.js. Install the optional peers three + @react-three/fiber + @react-three/drei (matching the host React major) to render it.`
+          );
+        }
+        return this.props.children;
+      }
+    };
     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'));
@@ -48402,7 +48728,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)) {
@@ -49701,195 +50027,6 @@ init_StepFlowOrganism();
 init_ShowcaseOrganism();
 init_TeamOrganism();
 init_CaseStudyOrganism();
-var DEFAULT_FEATURE_CONFIGS = {
-  tree: { color: 2263842, height: 1.5, scale: 1, geometry: "tree" },
-  rock: { color: 8421504, height: 0.5, scale: 0.8, geometry: "rock" },
-  bush: { color: 3329330, height: 0.4, scale: 0.6, geometry: "bush" },
-  house: { color: 9127187, height: 1.2, scale: 1.2, geometry: "house" },
-  tower: { color: 6908265, height: 2.5, scale: 1, geometry: "tower" },
-  wall: { color: 8421504, height: 1, scale: 1, geometry: "wall" },
-  mountain: { color: 5597999, height: 2, scale: 1.5, geometry: "mountain" },
-  hill: { color: 7048739, height: 0.8, scale: 1.2, geometry: "hill" },
-  water: { color: 4491468, height: 0.1, scale: 1, geometry: "water" },
-  chest: { color: 16766720, height: 0.3, scale: 0.4, geometry: "chest" },
-  sign: { color: 9127187, height: 0.8, scale: 0.3, geometry: "sign" },
-  portal: { color: 10040012, height: 1.5, scale: 1, geometry: "portal" }
-};
-function TreeFeature({ height, color }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.3, 0], children: [
-      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.08, 0.1, height * 0.6, 6] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color: 9127187 })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.7, 0], children: [
-      /* @__PURE__ */ jsx("coneGeometry", { args: [0.4, height * 0.5, 8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.9, 0], children: [
-      /* @__PURE__ */ jsx("coneGeometry", { args: [0.3, height * 0.4, 8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 1.05, 0], children: [
-      /* @__PURE__ */ jsx("coneGeometry", { args: [0.15, height * 0.25, 8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] })
-  ] });
-}
-function RockFeature({ height, color }) {
-  return /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.4, 0], children: [
-    /* @__PURE__ */ jsx("dodecahedronGeometry", { args: [height * 0.5, 0] }),
-    /* @__PURE__ */ jsx("meshStandardMaterial", { color, roughness: 0.9 })
-  ] });
-}
-function BushFeature({ height, color }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.3, 0], children: [
-      /* @__PURE__ */ jsx("sphereGeometry", { args: [height * 0.4, 8, 8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0.1, height * 0.4, 0.1], children: [
-      /* @__PURE__ */ jsx("sphereGeometry", { args: [height * 0.25, 8, 8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] })
-  ] });
-}
-function HouseFeature({ height, color }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.4, 0], children: [
-      /* @__PURE__ */ jsx("boxGeometry", { args: [0.8, height * 0.8, 0.8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color: 13808780 })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.9, 0], children: [
-      /* @__PURE__ */ jsx("coneGeometry", { args: [0.6, height * 0.4, 4] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.25, 0.41], children: [
-      /* @__PURE__ */ jsx("planeGeometry", { args: [0.25, height * 0.5] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color: 4863784 })
-    ] })
-  ] });
-}
-function TowerFeature({ height, color }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.5, 0], children: [
-      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.3, 0.35, height, 8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height + 0.05, 0], children: [
-      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.35, 0.35, 0.1, 8] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-    ] })
-  ] });
-}
-function ChestFeature({ height, color }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.5, 0], children: [
-      /* @__PURE__ */ jsx("boxGeometry", { args: [0.3, height, 0.2] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color, metalness: 0.6, roughness: 0.3 })
-    ] }),
-    /* @__PURE__ */ jsxs("mesh", { position: [0, height + 0.05, 0], children: [
-      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.15, 0.15, 0.3, 8, 1, false, 0, Math.PI] }),
-      /* @__PURE__ */ jsx("meshStandardMaterial", { color, metalness: 0.6, roughness: 0.3 })
-    ] })
-  ] });
-}
-function DefaultFeature({ height, color }) {
-  return /* @__PURE__ */ jsxs("mesh", { position: [0, height * 0.5, 0], children: [
-    /* @__PURE__ */ jsx("boxGeometry", { args: [0.5, height, 0.5] }),
-    /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-  ] });
-}
-function FeatureVisual({
-  feature,
-  position,
-  isSelected,
-  onClick,
-  onHover
-}) {
-  const config = DEFAULT_FEATURE_CONFIGS[feature.type] || {
-    color: 8947848,
-    height: 0.5,
-    scale: 1,
-    geometry: "default"
-  };
-  const color = feature.color ? parseInt(feature.color.replace("#", ""), 16) : config.color;
-  const renderGeometry = () => {
-    switch (config.geometry) {
-      case "tree":
-        return /* @__PURE__ */ jsx(TreeFeature, { height: config.height, color });
-      case "rock":
-        return /* @__PURE__ */ jsx(RockFeature, { height: config.height, color });
-      case "bush":
-        return /* @__PURE__ */ jsx(BushFeature, { height: config.height, color });
-      case "house":
-        return /* @__PURE__ */ jsx(HouseFeature, { height: config.height, color });
-      case "tower":
-        return /* @__PURE__ */ jsx(TowerFeature, { height: config.height, color });
-      case "chest":
-        return /* @__PURE__ */ jsx(ChestFeature, { height: config.height, color });
-      default:
-        return /* @__PURE__ */ jsx(DefaultFeature, { height: config.height, color });
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "group",
-    {
-      position,
-      scale: config.scale,
-      onClick,
-      onPointerEnter: () => onHover(true),
-      onPointerLeave: () => onHover(false),
-      userData: { type: "feature", featureId: feature.id, featureType: feature.type },
-      children: [
-        isSelected && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.02, 0], rotation: [-Math.PI / 2, 0, 0], children: [
-          /* @__PURE__ */ jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
-          /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#ffff00", transparent: true, opacity: 0.8 })
-        ] }),
-        /* @__PURE__ */ jsxs("mesh", { position: [0, 0.01, 0], rotation: [-Math.PI / 2, 0, 0], children: [
-          /* @__PURE__ */ jsx("circleGeometry", { args: [0.35, 16] }),
-          /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#000000", transparent: true, opacity: 0.2 })
-        ] }),
-        renderGeometry()
-      ]
-    }
-  );
-}
-function FeatureGroup({
-  features,
-  cellSize = 1,
-  offsetX = 0,
-  offsetZ = 0,
-  onFeatureClick,
-  onFeatureHover,
-  selectedFeatureIds = []
-}) {
-  return /* @__PURE__ */ jsx("group", { children: features.map((feature) => {
-    const x = (feature.x - offsetX) * cellSize;
-    const z = ((feature.z ?? feature.y ?? 0) - offsetZ) * cellSize;
-    const y = (feature.elevation ?? 0) * 0.1;
-    const isSelected = feature.id ? selectedFeatureIds.includes(feature.id) : false;
-    return /* @__PURE__ */ jsx(
-      FeatureVisual,
-      {
-        feature,
-        position: [x, y, z],
-        isSelected,
-        onClick: () => onFeatureClick?.(feature),
-        onHover: (hovered) => onFeatureHover?.(hovered ? feature : null)
-      },
-      feature.id ?? `feature-${feature.x}-${feature.y}`
-    );
-  }) });
-}
-function FeatureRenderer2(props) {
-  const insideCanvas = useContext(context) != null;
-  if (insideCanvas) return /* @__PURE__ */ jsx(FeatureGroup, { ...props });
-  return /* @__PURE__ */ jsxs(Canvas, { camera: { position: [4, 4, 6], fov: 50 }, style: { width: "100%", height: 360 }, children: [
-    /* @__PURE__ */ jsx("ambientLight", { intensity: 0.6 }),
-    /* @__PURE__ */ jsx("directionalLight", { position: [5, 8, 5], intensity: 0.8 }),
-    /* @__PURE__ */ jsx(FeatureGroup, { ...props })
-  ] });
-}
 
 // components/core/templates/index.ts
 init_DashboardLayout();
@@ -49909,4 +50046,4 @@ init_AboutPageTemplate();
 // components/index.ts
 init_cn();
 
-export { ALL_PRESETS, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FeatureRenderer2 as FeatureRenderer, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HealthPanel, HeroOrganism, HeroSection, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NodeSlotEditor, NotifyListener, NumberStepper, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createUnitAnimationState, drawSprite, generateCombatMessage, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, mapBookData, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, springOscillator, tickAnimationState, toCodeLanguage, transitionAnimation, useAnchorRect, useBattleState, useCamera, useGameAudio, useGameAudioContext, useImageCache, usePhysics2D, useSpriteAnimations };
+export { ALL_PRESETS, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HealthPanel, HeroOrganism, HeroSection, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NodeSlotEditor, NotifyListener, NumberStepper, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createUnitAnimationState, drawSprite, generateCombatMessage, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, mapBookData, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, springOscillator, tickAnimationState, toCodeLanguage, transitionAnimation, useAnchorRect, useBattleState, useCamera, useGameAudio, useGameAudioContext, useImageCache, usePhysics2D, useSpriteAnimations };