@almadar/ui 5.30.0 → 5.31.0

package/dist/components/index.js

@@ -46,7 +46,6 @@ import { CSS } from '@dnd-kit/utilities';
 import { useNodeId, ReactFlowProvider, Handle, Position } from '@xyflow/react';
 import { useUISlots } from '@almadar/ui/context';
 import { getPatternDefinition as getPatternDefinition$1, getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
-import { context, Canvas } from '@react-three/fiber';
 
 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) {
@@ -15024,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 : [];
@@ -15128,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(
@@ -17560,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)
@@ -20814,7 +20995,9 @@ var init_Menu = __esm({
       trigger,
       items,
       position = "bottom-left",
-      className
+      className,
+      header,
+      footer
     }) => {
       const eventBus = useEventBus();
       const { direction } = useTranslate();
@@ -20946,14 +21129,18 @@ var init_Menu = __esm({
           )
         ] }, itemId);
       });
-      const panel = isOpen && triggerRect ? /* @__PURE__ */ jsx(
+      const panel = isOpen && triggerRect ? /* @__PURE__ */ jsxs(
         "div",
         {
           ref: menuRef,
           className: cn("fixed z-50", menuContainerStyles, className),
           style: computeMenuStyle(effectivePosition, triggerRect),
           role: "menu",
-          children: renderMenuItems(items)
+          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: [
@@ -22368,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 });
 }
@@ -22384,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",
@@ -22405,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",
@@ -22418,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);
@@ -22497,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",
@@ -22539,9 +22736,9 @@ 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 }) });
     };
   }
 });
@@ -23034,7 +23231,7 @@ function FieldControl({
       {
         options: decl.values.map((v) => ({ value: v, label: v })),
         value: typeof value === "string" ? value : "",
-        onChange: (e) => onChange(name, e.target.value)
+        onChange: (v) => onChange(name, v)
       }
     );
   } else if (decl.type === "number") {
@@ -23186,7 +23383,7 @@ var init_NodeSlotEditor = __esm({
           {
             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: [
@@ -23640,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) => ({
@@ -23723,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) => ({
@@ -23841,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) => ({
@@ -28559,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);
@@ -28576,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);
@@ -28604,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 });
@@ -34040,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 });
@@ -34049,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 });
@@ -38896,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") }),
@@ -39976,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}...`
               }
             );
@@ -47215,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();
@@ -47512,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'));
@@ -49794,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();
@@ -50002,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 };