@almadar/ui 5.30.0 → 5.31.0

package/dist/runtime/index.js

@@ -3163,6 +3163,8 @@ var init_Input = __esm({
         className,
         inputType,
         type: htmlType,
+        label,
+        helperText,
         error,
         leftIcon,
         rightIcon,
@@ -3218,82 +3220,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";
@@ -3364,6 +3379,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"() {
@@ -3371,47 +3570,12 @@ var init_Select = __esm({
     init_Icon();
     init_useEventBus();
     Select = React79__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";
@@ -3465,11 +3629,54 @@ var init_Checkbox = __esm({
     Checkbox.displayName = "Checkbox";
   }
 });
+var sizeStyles3, Spinner;
+var init_Spinner = __esm({
+  "components/core/atoms/Spinner.tsx"() {
+    init_cn();
+    init_Icon();
+    sizeStyles3 = {
+      xs: "h-3 w-3",
+      sm: "h-icon-default w-icon-default",
+      md: "h-6 w-6",
+      lg: "h-8 w-8"
+    };
+    Spinner = React79__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", sizeStyles3[size]) })
+            }
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            className: cn("text-foreground", className),
+            ...props,
+            children: /* @__PURE__ */ jsx(Icon, { name: "loader", className: cn("animate-spin", sizeStyles3[size]) })
+          }
+        );
+      }
+    );
+    Spinner.displayName = "Spinner";
+  }
+});
 var variantStyles4, paddingStyles2, shadowStyles2, lookStyles2, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
 var init_Card = __esm({
   "components/core/atoms/Card.tsx"() {
     init_cn();
     init_useEventBus();
+    init_Spinner();
     variantStyles4 = {
       default: [
         "bg-card",
@@ -3534,6 +3741,7 @@ var init_Card = __esm({
         look = "elevated",
         children,
         action,
+        loading,
         onClick,
         ...props
       }, ref) => {
@@ -3547,7 +3755,7 @@ var init_Card = __esm({
           {
             ref,
             className: cn(
-              "rounded-container",
+              "rounded-container relative",
               "transition-all duration-[var(--transition-normal)]",
               variantStyles4[variant],
               paddingStyles2[padding],
@@ -3558,6 +3766,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 })
@@ -3599,7 +3808,7 @@ var init_Card = __esm({
     CardFooter.displayName = "CardFooter";
   }
 });
-var variantStyles5, sizeStyles3, iconSizes, FilterPill;
+var variantStyles5, sizeStyles4, iconSizes, FilterPill;
 var init_FilterPill = __esm({
   "components/core/atoms/FilterPill.tsx"() {
     init_cn();
@@ -3633,7 +3842,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"
@@ -3677,7 +3886,7 @@ var init_FilterPill = __esm({
             className: cn(
               "inline-flex items-center gap-1 font-bold rounded-pill",
               variantStyles5[variant],
-              sizeStyles3[size],
+              sizeStyles4[size],
               (onClick || clickEvent) && "cursor-pointer",
               className
             ),
@@ -3709,33 +3918,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 = React79__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) {
@@ -16033,30 +16215,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 : [];
@@ -16137,7 +16319,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(
@@ -18569,7 +18751,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)
@@ -21595,7 +21777,9 @@ var init_Menu = __esm({
       trigger,
       items,
       position = "bottom-left",
-      className
+      className,
+      header,
+      footer
     }) => {
       const eventBus = useEventBus();
       const { direction } = useTranslate();
@@ -21727,14 +21911,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: [
@@ -23493,7 +23681,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) => ({
@@ -23576,7 +23764,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) => ({
@@ -23694,7 +23882,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) => ({
@@ -27876,13 +28064,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect72, useRef: useRef66, useCallback: useCallback112, useState: useState102 } = React79__default;
+      const { useEffect: useEffect73, useRef: useRef67, useCallback: useCallback112, useState: useState103 } = React79__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef66({ centerLat, centerLng, zoom });
-        useEffect72(() => {
+        const prevRef = useRef67({ centerLat, centerLng, zoom });
+        useEffect73(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -27893,7 +28081,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect72(() => {
+        useEffect73(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -27921,7 +28109,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus3();
-        const [clickedPosition, setClickedPosition] = useState102(null);
+        const [clickedPosition, setClickedPosition] = useState103(null);
         const handleMapClick = useCallback112((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -33357,8 +33545,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 });
@@ -33366,8 +33554,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 });
@@ -37993,11 +38181,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") }),
@@ -39073,7 +39261,7 @@ var init_Form = __esm({
                 ...commonProps,
                 options,
                 value: String(currentValue),
-                onChange: (e) => handleChange(fieldName, e.target.value),
+                onChange: (v) => handleChange(fieldName, v),
                 placeholder: field.placeholder || `Select ${label}...`
               }
             );
@@ -45860,18 +46048,32 @@ var init_WorldMapTemplate = __esm({
   }
 });
 function lazyThree(name, loader) {
-  const Lazy = React79__default.lazy(() => loader().then((m) => ({ default: m[name] })));
+  const Lazy = React79__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 React79__default.createElement(
-      React79__default.Suspense,
-      { fallback: null },
-      React79__default.createElement(Lazy, props)
+      ThreeBoundary,
+      { name },
+      React79__default.createElement(
+        React79__default.Suspense,
+        { fallback: null },
+        React79__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();
@@ -46157,6 +46359,28 @@ var init_component_registry_generated = __esm({
     init_WorldMapBoard();
     init_WorldMapTemplate();
     init_XPBar();
+    ThreeBoundary = class extends React79__default.Component {
+      constructor() {
+        super(...arguments);
+        __publicField(this, "state", { failed: false });
+      }
+      static getDerivedStateFromError() {
+        return { failed: true };
+      }
+      render() {
+        if (this.state.failed) {
+          return React79__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'));