@almadar/ui 5.29.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)
@@ -21495,7 +21677,84 @@ var init_DashboardLayout = __esm({
     NavLinkBottom.displayName = "NavLinkBottom";
   }
 });
-var Menu;
+function computeMenuStyle(position, triggerRect) {
+  const isTop = position.startsWith("top");
+  const isRight = position.endsWith("right") || position.endsWith("end");
+  if (isTop) {
+    return {
+      top: triggerRect.top - MENU_GAP,
+      transform: "translateY(-100%)",
+      ...isRight ? { right: window.innerWidth - triggerRect.right } : { left: triggerRect.left }
+    };
+  }
+  return {
+    top: triggerRect.bottom + MENU_GAP,
+    ...isRight ? { right: window.innerWidth - triggerRect.right } : { left: triggerRect.left }
+  };
+}
+function SubMenu({
+  items,
+  itemRef,
+  direction,
+  eventBus
+}) {
+  const [rect, setRect] = useState(null);
+  useEffect(() => {
+    if (itemRef) {
+      setRect(itemRef.getBoundingClientRect());
+    }
+  }, [itemRef]);
+  if (!rect) return null;
+  const isRtl = direction === "rtl";
+  const style = {
+    top: rect.top,
+    ...isRtl ? { right: window.innerWidth - rect.left } : { left: rect.right }
+  };
+  const panel = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("fixed z-50", menuContainerStyles),
+      style,
+      children: items.map((item, index) => {
+        const isDivider = item.id === "divider" || item.label === "divider";
+        const itemId = item.id ?? `item-${item.label.toLowerCase().replace(/\s+/g, "-")}-${index}`;
+        const isDanger = item.variant === "danger";
+        if (isDivider) {
+          return /* @__PURE__ */ jsx(Divider, { className: "my-1" }, `divider-${index}`);
+        }
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            as: "button",
+            onClick: () => {
+              if (item.disabled) return;
+              if (item.event) eventBus.emit(`UI:${item.event}`, { itemId, label: item.label });
+              item.onClick?.();
+            },
+            "aria-disabled": item.disabled || void 0,
+            "data-testid": item.event ? `action-${item.event}` : void 0,
+            className: cn(
+              "w-full flex items-center gap-3 px-4 py-2 text-start",
+              "text-sm transition-colors",
+              "hover:bg-muted focus:outline-none focus:bg-muted",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              item.disabled && "cursor-not-allowed",
+              isDanger && "text-error hover:bg-error/10"
+            ),
+            children: [
+              item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: cn("flex-1", isDanger && "text-red-600"), children: item.label }),
+              item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs font-medium", children: item.badge })
+            ]
+          },
+          itemId
+        );
+      })
+    }
+  );
+  return typeof document !== "undefined" ? createPortal(panel, document.body) : panel;
+}
+var MENU_GAP, menuContainerStyles, Menu;
 var init_Menu = __esm({
   "components/core/molecules/Menu.tsx"() {
     "use client";
@@ -21506,16 +21765,27 @@ var init_Menu = __esm({
     init_Badge();
     init_cn();
     init_useEventBus();
+    MENU_GAP = 4;
+    menuContainerStyles = cn(
+      "bg-card",
+      "border-[length:var(--border-width)] border-border",
+      "shadow-elevation-popover",
+      "rounded-sm",
+      "min-w-0 sm:min-w-[200px] max-w-[calc(100vw-1rem)] py-1"
+    );
     Menu = ({
       trigger,
       items,
       position = "bottom-left",
-      className
+      className,
+      header,
+      footer
     }) => {
       const eventBus = useEventBus();
-      const { t, direction } = useTranslate();
+      const { direction } = useTranslate();
       const [isOpen, setIsOpen] = useState(false);
       const [activeSubMenu, setActiveSubMenu] = useState(null);
+      const [activeSubMenuRef, setActiveSubMenuRef] = useState(null);
       const [triggerRect, setTriggerRect] = useState(null);
       const triggerRef = useRef(null);
       const menuRef = useRef(null);
@@ -21530,13 +21800,14 @@ var init_Menu = __esm({
         }
         setIsOpen(!isOpen);
         setActiveSubMenu(null);
+        setActiveSubMenuRef(null);
       };
-      const handleItemClick = (item) => {
+      const handleItemClick = (item, itemId) => {
         if (item.disabled) return;
         if (item.subMenu && item.subMenu.length > 0) {
-          setActiveSubMenu(item.id ?? null);
+          setActiveSubMenu(itemId);
         } else {
-          if (item.event) eventBus.emit(`UI:${item.event}`, { itemId: item.id, label: item.label });
+          if (item.event) eventBus.emit(`UI:${item.event}`, { itemId, label: item.label });
           item.onClick?.();
           setIsOpen(false);
         }
@@ -21551,22 +21822,12 @@ var init_Menu = __esm({
           if (isOpen && menuRef.current && !menuRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
             setIsOpen(false);
             setActiveSubMenu(null);
+            setActiveSubMenuRef(null);
           }
         };
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
       }, [isOpen]);
-      const positionClasses = {
-        "top-left": "bottom-full left-0 mb-2",
-        "top-right": "bottom-full right-0 mb-2",
-        "bottom-left": "top-full left-0 mt-2",
-        "bottom-right": "top-full right-0 mt-2",
-        // Aliases for pattern compatibility
-        "top-start": "bottom-full left-0 mb-2",
-        "top-end": "bottom-full right-0 mb-2",
-        "bottom-start": "top-full left-0 mt-2",
-        "bottom-end": "top-full right-0 mt-2"
-      };
       const rtlMirror = {
         "top-left": "top-right",
         "top-right": "top-left",
@@ -21578,7 +21839,6 @@ var init_Menu = __esm({
         "bottom-end": "bottom-start"
       };
       const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
-      const subMenuSideClass = direction === "rtl" ? "right-full mr-2" : "left-full ml-2";
       const triggerChild = React79__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
       const triggerElement = React79__default.cloneElement(
         triggerChild,
@@ -21587,94 +21847,87 @@ var init_Menu = __esm({
           onClick: handleToggle
         }
       );
-      const menuContainerStyles = cn(
-        "bg-card",
-        "border-[length:var(--border-width)] border-border",
-        "shadow-elevation-popover",
-        "rounded-sm",
-        "min-w-0 sm:min-w-[200px] max-w-[calc(100vw-1rem)] py-1"
-      );
-      const renderMenuItem = (item, hasSubMenu, index) => {
+      const renderMenuItems = (menuItems) => menuItems.map((item, index) => {
+        const isDivider = item.id === "divider" || item.label === "divider";
         const itemId = item.id ?? `item-${item.label.toLowerCase().replace(/\s+/g, "-")}-${index}`;
+        const hasSubMenu = !!(item.subMenu && item.subMenu.length > 0);
         const isDanger = item.variant === "danger";
-        return /* @__PURE__ */ jsx(
-          Box,
-          {
-            as: "button",
-            onClick: () => !item.disabled && handleItemClick({ ...item, id: itemId }),
-            "aria-disabled": item.disabled || void 0,
-            onMouseEnter: () => hasSubMenu && setActiveSubMenu(itemId),
-            "data-testid": item.event ? `action-${item.event}` : void 0,
-            className: cn(
-              "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
-              "text-sm transition-colors",
-              "hover:bg-muted",
-              "focus:outline-none focus:bg-muted",
-              "disabled:opacity-50 disabled:cursor-not-allowed",
-              item.disabled && "cursor-not-allowed",
-              isDanger && "text-error hover:bg-error/10"
-            ),
-            children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-3 flex-1 min-w-0", children: [
-              item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "small",
-                  className: cn("flex-1", isDanger && "text-red-600"),
-                  children: item.label
+        if (isDivider) {
+          return /* @__PURE__ */ jsx(Divider, { className: "my-1" }, `divider-${index}`);
+        }
+        return /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              as: "button",
+              onClick: () => handleItemClick({ ...item, id: itemId }, itemId),
+              "aria-disabled": item.disabled || void 0,
+              onMouseEnter: (e) => {
+                if (hasSubMenu) {
+                  setActiveSubMenu(itemId);
+                  setActiveSubMenuRef(e.currentTarget);
                 }
+              },
+              "data-testid": item.event ? `action-${item.event}` : void 0,
+              className: cn(
+                "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
+                "text-sm transition-colors",
+                "hover:bg-muted",
+                "focus:outline-none focus:bg-muted",
+                "disabled:opacity-50 disabled:cursor-not-allowed",
+                item.disabled && "cursor-not-allowed",
+                isDanger && "text-error hover:bg-error/10"
               ),
-              item.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: item.badge }),
-              hasSubMenu && /* @__PURE__ */ jsx(Icon, { name: direction === "rtl" ? "chevron-left" : "chevron-right", size: "sm", className: "flex-shrink-0" })
-            ] })
-          },
-          itemId
-        );
-      };
-      const renderMenuItems = (menuItems) => {
-        return menuItems.map((item, index) => {
-          const hasSubMenu = item.subMenu && item.subMenu.length > 0;
-          const isDivider = item.id === "divider" || item.label === "divider";
-          const itemId = item.id ?? `item-${item.label.toLowerCase().replace(/\s+/g, "-")}-${index}`;
-          if (isDivider) {
-            return /* @__PURE__ */ jsx(Divider, { className: "my-1" }, `divider-${index}`);
-          }
-          return /* @__PURE__ */ jsxs(Box, { children: [
-            renderMenuItem(item, !!hasSubMenu, index),
-            hasSubMenu && activeSubMenu === itemId && item.subMenu && /* @__PURE__ */ jsx(
-              Box,
-              {
-                className: cn(
-                  "absolute top-0 z-50",
-                  subMenuSideClass,
-                  menuContainerStyles
+              children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+                item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "small",
+                    className: cn("flex-1", isDanger && "text-red-600"),
+                    children: item.label
+                  }
                 ),
-                children: renderMenuItems(item.subMenu)
-              }
-            )
-          ] }, itemId);
-        });
-      };
-      return /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
+                item.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: item.badge }),
+                hasSubMenu && /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: direction === "rtl" ? "chevron-left" : "chevron-right",
+                    size: "sm",
+                    className: "flex-shrink-0"
+                  }
+                )
+              ] })
+            }
+          ),
+          hasSubMenu && activeSubMenu === itemId && item.subMenu && /* @__PURE__ */ jsx(
+            SubMenu,
+            {
+              items: item.subMenu,
+              itemRef: activeSubMenuRef,
+              direction,
+              eventBus
+            }
+          )
+        ] }, itemId);
+      });
+      const panel = isOpen && triggerRect ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: menuRef,
+          className: cn("fixed z-50", menuContainerStyles, className),
+          style: computeMenuStyle(effectivePosition, triggerRect),
+          role: "menu",
+          children: [
+            header && /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-b border-border", children: header }),
+            renderMenuItems(items),
+            footer && /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-t border-border", children: footer })
+          ]
+        }
+      ) : null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
         triggerElement,
-        isOpen && triggerRect && /* @__PURE__ */ jsx(
-          Box,
-          {
-            ref: menuRef,
-            className: cn(
-              "absolute z-50",
-              menuContainerStyles,
-              positionClasses[effectivePosition],
-              className
-            ),
-            style: {
-              left: effectivePosition.includes("left") ? 0 : "auto",
-              right: effectivePosition.includes("right") ? 0 : "auto"
-            },
-            role: "menu",
-            children: renderMenuItems(items)
-          }
-        )
+        panel && typeof document !== "undefined" ? createPortal(panel, document.body) : panel
       ] });
     };
     Menu.displayName = "Menu";
@@ -23428,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) => ({
@@ -23511,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) => ({
@@ -23629,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) => ({
@@ -27811,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);
@@ -27828,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);
@@ -27856,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 });
@@ -33292,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 });
@@ -33301,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 });
@@ -36080,7 +36333,6 @@ var init_DocumentViewer = __esm({
       showPrint = false,
       actions,
       documents,
-      entity,
       isLoading = false,
       error,
       className
@@ -37929,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") }),
@@ -39009,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}...`
               }
             );
@@ -42895,7 +43147,7 @@ function TraitSlot({
   size = "md",
   showTooltip = true,
   categoryColors,
-  tooltipFrameUrl,
+  tooltipFrameUrl = "",
   className,
   feedback,
   onItemDrop,
@@ -45796,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();
@@ -46093,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'));