@l3mpire/ui 2.10.0 → 2.12.0

package/dist/index.mjs

@@ -27,7 +27,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var badgeVariants = cva(
   [
     "inline-flex items-center justify-center whitespace-nowrap",
-    "font-medium",
+    "font-semibold",
     "border border-transparent"
   ],
   {
@@ -116,7 +116,7 @@ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var buttonVariants = cva2(
   [
     "inline-flex items-center justify-center whitespace-nowrap",
-    "font-medium transition-colors",
+    "font-semibold transition-colors",
     "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
     "disabled:pointer-events-none",
     "border",
@@ -149,7 +149,7 @@ var buttonVariants = cva2(
       },
       size: {
         sm: [
-          "h-6 p-xs gap-xs",
+          "h-6 py-xs gap-xs",
           "text-xs",
           "min-w-16 rounded-base"
         ],
@@ -244,13 +244,13 @@ var buttonVariants = cva2(
         appearance: "ghost",
         intent: "brand",
         class: [
-          "bg-btn-ghost-neutral-bg-default",
-          "text-btn-ghost-neutral-text-default",
-          "border-btn-ghost-neutral-border-default",
-          "hover:bg-btn-ghost-neutral-bg-hover",
-          "hover:text-btn-ghost-neutral-text-hover",
-          "active:bg-btn-ghost-neutral-bg-pressed",
-          "active:text-btn-ghost-neutral-text-pressed"
+          "bg-btn-ghost-brand-bg-default",
+          "text-btn-ghost-brand-text-default",
+          "border-btn-ghost-brand-border-default",
+          "hover:bg-btn-ghost-brand-bg-hover",
+          "hover:text-btn-ghost-brand-text-hover",
+          "active:bg-btn-ghost-brand-bg-pressed",
+          "active:text-btn-ghost-brand-text-pressed"
         ]
       },
       // ── Ghost + Alert ──────────────────────────────────────────────────
@@ -308,13 +308,17 @@ var Button = React2.forwardRef(
     const isDisabled = disabled || loading;
     const isIconOnly = iconOnlyProp ?? !children;
     const iconSize = iconSizeMap[size ?? "md"];
+    const smPadding = size === "sm" && !isIconOnly ? cn(
+      leftIcon || loading ? "pl-xs" : "pl-sm",
+      rightIcon ? "pr-xs" : "pr-sm"
+    ) : "";
     const variantClasses = buttonVariants({
       appearance,
       intent,
       size,
       iconOnly: isIconOnly || void 0,
       fullWidth,
-      className
+      className: cn(smPadding, className)
     });
     if (asChild) {
       return /* @__PURE__ */ jsx2(Slot, { ref, className: cn(variantClasses), ...props, children });
@@ -416,7 +420,7 @@ var BrowserTabItem = React3.forwardRef(
               },
               onClick: (e) => e.stopPropagation(),
               className: cn(
-                "text-sm font-medium leading-sm bg-transparent outline-none p-0 m-0",
+                "text-sm font-semibold leading-sm bg-transparent outline-none p-0 m-0",
                 "border-b border-browser-tab-item-border border-dashed border-t-0 border-l-0 border-r-0",
                 isActive ? "text-browser-tab-item-active-text" : "text-browser-tab-item-inactive-text"
               ),
@@ -426,7 +430,7 @@ var BrowserTabItem = React3.forwardRef(
             "span",
             {
               className: cn(
-                "text-sm font-medium leading-sm whitespace-nowrap",
+                "text-sm font-semibold leading-sm whitespace-nowrap",
                 isActive ? "text-browser-tab-item-active-text" : "text-browser-tab-item-inactive-text"
               ),
               onDoubleClick: (e) => {
@@ -615,7 +619,7 @@ var BrowserTab = React3.forwardRef(
                         "span",
                         {
                           className: cn(
-                            "text-sm font-medium leading-sm whitespace-nowrap",
+                            "text-sm font-semibold leading-sm whitespace-nowrap",
                             item.isActive ? "text-browser-tab-item-active-text" : "text-browser-tab-item-inactive-text"
                           ),
                           children: item.label
@@ -718,7 +722,7 @@ import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var linkVariants = cva4(
   [
     "inline-flex items-center",
-    "font-medium",
+    "font-semibold",
     "transition-colors cursor-pointer",
     "disabled:pointer-events-none",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0"
@@ -850,7 +854,7 @@ var InputLabel = React6.forwardRef(({ className, type = "default", disabled, inf
       className: cn(
         "inline-flex items-center gap-xs",
         "text-xs",
-        "font-medium",
+        "font-semibold",
         "leading-xs",
         textColor2,
         className
@@ -929,7 +933,7 @@ var typeIconMap = {
   warning: { icon: faTriangleExclamationSolid, color: "text-info-message-warning-icon" },
   empty: { icon: faCircleInfoSolid2, color: "text-info-message-empty-icon" }
 };
-var titleStyle = "text-sm font-medium leading-sm text-info-message-title";
+var titleStyle = "text-sm font-semibold leading-sm text-info-message-title";
 var descriptionStyle = "text-xs font-regular leading-xs text-info-message-description";
 var closeButtonStyle = "inline-flex shrink-0 items-center justify-center p-xs rounded-base text-info-message-close hover:bg-black/5 transition-colors";
 var typeLinkIntentMap = {
@@ -1034,7 +1038,7 @@ var typeIconMap2 = {
   alert: { icon: faCircleExclamationSolid2, color: "text-toast-alert-icon" },
   warning: { icon: faTriangleExclamationSolid2, color: "text-toast-warning-icon" }
 };
-var titleStyle2 = "text-sm font-medium leading-sm text-toast-title";
+var titleStyle2 = "text-sm font-semibold leading-sm text-toast-title";
 var subtitleStyle = "text-sm font-regular leading-sm text-toast-subtitle";
 var closeButtonStyle2 = "inline-flex shrink-0 items-center justify-center self-start p-sm rounded-md text-toast-close hover:bg-black/5 transition-colors";
 var ToastProvider = ToastPrimitive.Provider;
@@ -1109,7 +1113,7 @@ var trackStyles = {
   ]
 };
 var thumbStyle = "pointer-events-none block rounded-full size-3 translate-x-0.5 bg-switch-thumb-bg shadow-md transition-transform data-[state=checked]:translate-x-[13px]";
-var labelBase = "cursor-pointer select-none text-sm font-medium leading-sm";
+var labelBase = "cursor-pointer select-none text-sm font-semibold leading-sm";
 var labelColor = {
   default: "text-switch-label-text",
   disabled: "pointer-events-none text-switch-label-disabled"
@@ -1654,7 +1658,7 @@ var Avatar = React13.forwardRef(({ className, size = "xl", shape = "rounded", sr
             {
               delayMs: 0,
               className: cn(
-                "font-medium",
+                "font-semibold",
                 "text-avatar-fallback-text",
                 "select-none text-center",
                 initialsFontSize[size ?? "xl"]
@@ -1703,7 +1707,7 @@ var iconStyle = {
   default: "text-checkbox-checked-icon",
   disabled: "text-checkbox-disabled-icon"
 };
-var labelBase2 = "cursor-pointer select-none overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-sm";
+var labelBase2 = "cursor-pointer select-none overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold leading-sm";
 var labelColor2 = {
   default: "text-checkbox-label-default",
   disabled: "pointer-events-none text-checkbox-label-disabled"
@@ -1791,7 +1795,7 @@ var dotStyle = {
   default: "bg-radio-selected-dot",
   disabled: "bg-radio-disabled-dot"
 };
-var labelBase3 = "cursor-pointer select-none overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-sm";
+var labelBase3 = "cursor-pointer select-none overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold leading-sm";
 var labelColor3 = {
   default: "text-radio-label-default",
   disabled: "pointer-events-none text-radio-label-disabled"
@@ -1852,8 +1856,8 @@ import { Icon as Icon11 } from "@l3mpire/icons";
 import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 var textSm = "text-sm font-regular leading-sm";
 var textXs = "text-xs font-regular leading-xs";
-var textXsMedium = "text-xs font-medium leading-xs";
-var textSmMedium = "text-sm font-medium leading-sm";
+var textXsMedium = "text-xs font-semibold leading-xs";
+var textSmMedium = "text-sm font-semibold leading-sm";
 var containerStyle = [
   "flex flex-col gap-base overflow-clip",
   "bg-dropdown-bg",
@@ -2054,7 +2058,7 @@ var SidebarHeadingItem = React17.forwardRef(
         ref,
         className: cn(
           "flex items-center w-full",
-          "text-xs leading-xs font-medium text-sidebar-heading-text mb-base",
+          "text-xs leading-xs font-semibold text-sidebar-heading-text mb-base",
           className
         ),
         ...props,
@@ -2144,7 +2148,7 @@ var SidebarItem = React18.forwardRef(
               "span",
               {
                 className: cn(
-                  "flex-1 min-w-0 truncate text-sm leading-sm font-medium",
+                  "flex-1 min-w-0 truncate text-sm leading-sm font-semibold",
                   textColorClass
                 ),
                 children: label
@@ -2238,7 +2242,7 @@ var iconColor = {
 };
 var errorGuidance = {
   icon: "shrink-0 text-select-error-icon",
-  text: "text-xs font-medium leading-xs text-select-error-text"
+  text: "text-xs font-semibold leading-xs text-select-error-text"
 };
 function SelectChips({ tags, onTagRemove, chipHeightPx }) {
   const containerRef = React19.useRef(null);
@@ -2283,7 +2287,7 @@ function SelectChips({ tags, onTagRemove, chipHeightPx }) {
     "inline-flex items-center gap-xs shrink-0",
     "px-sm rounded-base",
     "bg-tag-neutral-bg text-tag-neutral-text",
-    "text-xs font-medium leading-xs",
+    "text-xs font-semibold leading-xs",
     "whitespace-nowrap"
   );
   return /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 items-center gap-xs min-w-0 overflow-hidden relative", children: [
@@ -2533,7 +2537,7 @@ var TabTrigger = React20.forwardRef(({ className, badge, children, ...props }, r
             "span",
             {
               className: cn(
-                "text-sm font-medium leading-sm whitespace-nowrap",
+                "text-sm font-semibold leading-sm whitespace-nowrap",
                 "text-tab-item-default-text",
                 "group-data-[state=active]:text-tab-item-active-text"
               ),
@@ -2567,7 +2571,7 @@ var tagVariants = cva12(
     "inline-flex items-center",
     "gap-xs",
     "rounded-base",
-    "font-medium",
+    "font-semibold",
     "whitespace-nowrap"
   ],
   {
@@ -2672,7 +2676,7 @@ var fieldStates = {
 };
 var errorGuidance2 = {
   icon: "shrink-0 text-textarea-error-icon",
-  text: "text-xs font-medium leading-xs text-textarea-error-text"
+  text: "text-xs font-semibold leading-xs text-textarea-error-text"
 };
 var charLimitStyle = "shrink-0 text-right text-xs font-regular leading-xs text-textarea-char-limit";
 function resolveState(error, success, disabled) {
@@ -2804,7 +2808,7 @@ var attachedButtonStyles = {
 };
 var errorGuidance3 = {
   icon: "shrink-0 text-text-input-error-icon",
-  text: "text-xs font-medium leading-xs text-text-input-error-text"
+  text: "text-xs font-semibold leading-xs text-text-input-error-text"
 };
 function resolveState2(error, success, disabled) {
   if (disabled) return "disabled";
@@ -2972,12 +2976,12 @@ var chipStyle = [
   "inline-flex items-center gap-xs shrink-0",
   "h-6 px-sm rounded-base",
   "bg-tag-neutral-bg text-tag-neutral-text",
-  "text-xs font-medium leading-xs",
+  "text-xs font-semibold leading-xs",
   "whitespace-nowrap"
 ];
 var errorGuidance4 = {
   icon: "shrink-0 text-text-input-error-icon",
-  text: "text-xs font-medium leading-xs text-text-input-error-text"
+  text: "text-xs font-semibold leading-xs text-text-input-error-text"
 };
 var ChipInput = React24.forwardRef(
   ({
@@ -3172,7 +3176,7 @@ var wrapperStates3 = {
 };
 var errorGuidance5 = {
   icon: "shrink-0 text-text-input-error-icon",
-  text: "text-xs font-medium leading-xs text-text-input-error-text"
+  text: "text-xs font-semibold leading-xs text-text-input-error-text"
 };
 var NumberInput = React25.forwardRef(
   ({
@@ -3353,7 +3357,7 @@ var typographyVariants = cva16("", {
     },
     weight: {
       regular: "font-regular",
-      medium: "font-medium",
+      semibold: "font-semibold",
       bold: "font-bold"
     }
   },
@@ -3419,7 +3423,7 @@ var UserMenuInfoRow = React27.forwardRef(
       children: [
         avatar,
         /* @__PURE__ */ jsxs24("div", { className: "flex flex-1 flex-col min-w-0", children: [
-          /* @__PURE__ */ jsx27("span", { className: "text-sm font-medium leading-sm text-user-menu-name truncate", children: name }),
+          /* @__PURE__ */ jsx27("span", { className: "text-sm font-semibold leading-sm text-user-menu-name truncate", children: name }),
           subtitle && /* @__PURE__ */ jsx27("span", { className: "text-xs font-regular leading-xs text-user-menu-subtitle truncate", children: subtitle })
         ] }),
         action
@@ -3528,7 +3532,7 @@ var ModalTitle = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE
   DialogPrimitive.Title,
   {
     ref,
-    className: cn("text-base font-medium leading-base text-modal-header-title", className),
+    className: cn("text-base font-semibold leading-base text-modal-header-title", className),
     ...props
   }
 ));
@@ -3690,7 +3694,7 @@ var EmptyState = React30.forwardRef(
               "p",
               {
                 className: cn(
-                  "font-medium text-table-cell-text-primary",
+                  "font-semibold text-table-cell-text-primary",
                   isMd ? "text-base leading-base" : "text-sm leading-sm"
                 ),
                 children: title
@@ -3759,7 +3763,7 @@ var AvatarCell = ({
 }) => /* @__PURE__ */ jsxs28("div", { className: cn("flex items-center gap-md", className), children: [
   /* @__PURE__ */ jsx31(Avatar, { initials: getInitials(name), src, alt: name, size: "lg", shape: "rounded" }),
   /* @__PURE__ */ jsxs28("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsx31("span", { className: "text-sm font-medium text-table-cell-text-primary leading-sm", children: name }),
+    /* @__PURE__ */ jsx31("span", { className: "text-sm font-semibold text-table-cell-text-primary leading-sm", children: name }),
     subtitle && /* @__PURE__ */ jsx31("span", { className: "text-xs font-regular text-table-cell-text-secondary leading-xs", children: subtitle })
   ] })
 ] });
@@ -3797,7 +3801,7 @@ var NumberCell = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx31("span", { className: "text-sm font-medium text-table-cell-text-primary", children: formatted }),
+        /* @__PURE__ */ jsx31("span", { className: "text-sm font-semibold text-table-cell-text-primary", children: formatted }),
         secondaryStat && /* @__PURE__ */ jsx31(
           "span",
           {
@@ -3865,7 +3869,7 @@ var TextCell = ({
   {
     className: cn(
       "text-sm",
-      secondary ? "font-regular text-table-cell-text-secondary" : "font-medium text-table-cell-text-primary",
+      secondary ? "font-regular text-table-cell-text-secondary" : "font-semibold text-table-cell-text-primary",
       className
     ),
     children: value
@@ -3914,7 +3918,7 @@ var EditableCell = ({
       {
         ref: inputRef,
         className: cn(
-          "w-full bg-transparent text-sm font-medium text-table-cell-text-primary",
+          "w-full bg-transparent text-sm font-semibold text-table-cell-text-primary",
           "outline-none border-b border-table-border py-0 h-[20px]",
           className
         ),
@@ -3931,7 +3935,7 @@ var EditableCell = ({
       role: "button",
       tabIndex: 0,
       className: cn(
-        "text-sm font-medium text-table-cell-text-primary cursor-text leading-sm h-[20px] inline-block",
+        "text-sm font-semibold text-table-cell-text-primary cursor-text leading-sm h-[20px] inline-block",
         className
       ),
       onDoubleClick: () => setIsEditing(true),
@@ -4027,7 +4031,7 @@ var TableFooter = React32.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "border-t border-table-border bg-table-bg font-medium",
+      "border-t border-table-border bg-table-bg font-semibold",
       className
     ),
     ...props
@@ -4053,7 +4057,7 @@ var TableHead = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "group/head h-10 px-md py-md text-left align-middle text-xs font-medium leading-xs",
+      "group/head h-10 px-md py-md text-left align-middle text-xs font-semibold leading-xs",
       "text-table-head-text bg-table-head-bg-default",
       "hover:bg-table-head-bg-hover",
       "border-b border-r border-table-border last:border-r-0",
@@ -4069,7 +4073,7 @@ var TableCell = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "px-md py-md align-middle text-sm font-medium max-h-[52px]",
+      "px-md py-md align-middle text-sm font-semibold max-h-[52px]",
       "text-table-cell-text-primary",
       "border-b border-r border-table-border last:border-r-0",
       "[&:has([role=checkbox])]:pr-0",
@@ -4168,7 +4172,7 @@ function ColumnFilterPopover({
         ),
         onClick: (e) => e.stopPropagation(),
         children: /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-sm", children: [
-          /* @__PURE__ */ jsx33("span", { className: "text-xs font-medium text-table-head-text", children: "Filter" }),
+          /* @__PURE__ */ jsx33("span", { className: "text-xs font-semibold text-table-head-text", children: "Filter" }),
           /* @__PURE__ */ jsx33(
             "select",
             {
@@ -4902,13 +4906,13 @@ var FilterChipSegment = React35.forwardRef(
             "span",
             {
               className: cn(
-                "text-sm font-medium leading-sm whitespace-nowrap",
+                "text-sm font-semibold leading-sm whitespace-nowrap",
                 segmentType === "placeholder" ? "text-filter-chip-segment-placeholder" : "text-filter-chip-segment-text"
               ),
               children: label
             }
           ),
-          badgeCount != null && badgeCount > 0 && /* @__PURE__ */ jsx35("span", { className: "flex items-center gap-2xs p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx35("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: badgeCount }) }),
+          badgeCount != null && badgeCount > 0 && /* @__PURE__ */ jsx35("span", { className: "flex items-center gap-2xs p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx35("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: badgeCount }) }),
           children
         ]
       }
@@ -5162,7 +5166,7 @@ var SortButton = ({
               className: "shrink-0 text-[var(--color-foreground)]"
             }
           ),
-          !iconOnly && /* @__PURE__ */ jsxs33("span", { className: "text-sm font-medium leading-sm whitespace-nowrap", children: [
+          !iconOnly && /* @__PURE__ */ jsxs33("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap", children: [
             /* @__PURE__ */ jsxs33("span", { className: "text-[var(--color-muted-foreground)]", children: [
               "Sort by",
               " "
@@ -5321,7 +5325,7 @@ var FilterBarButton = React39.forwardRef(({ className, count, iconOnly = false,
     ref,
     type: "button",
     className: cn(
-      "flex items-center gap-sm",
+      "shrink-0 flex items-center gap-sm overflow-hidden",
       "min-h-[32px] max-h-[32px]",
       "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
       "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
@@ -5340,8 +5344,8 @@ var FilterBarButton = React39.forwardRef(({ className, count, iconOnly = false,
           className: "shrink-0 text-[var(--color-foreground)]"
         }
       ),
-      !iconOnly && /* @__PURE__ */ jsx39("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: children ?? "Filters" }),
-      count != null && count > 0 && /* @__PURE__ */ jsx39("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx39("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+      !iconOnly && /* @__PURE__ */ jsx39("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: children ?? "Filters" }),
+      count != null && count > 0 && /* @__PURE__ */ jsx39("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx39("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
     ]
   }
 ));
@@ -5354,7 +5358,7 @@ import { jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
 var SaveViewButton = React40.forwardRef(
   ({ className, label = "Save view", onSave, onDropdown, ...props }, ref) => {
     const sharedStyle = [
-      "flex items-center justify-center",
+      "relative flex items-center justify-center",
       "min-h-[32px] max-h-[32px]",
       "bg-gradient-to-t from-[var(--color-btn-solid-brand-bg-default)] from-[10%] to-[var(--color-btn-solid-brand-bg-gradient-to-default)]",
       "border border-[var(--color-btn-solid-brand-border-default)]",
@@ -5379,7 +5383,7 @@ var SaveViewButton = React40.forwardRef(
                 "rounded-l-md -mr-px"
               ),
               children: [
-                /* @__PURE__ */ jsx40("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-btn-solid-brand-text-default)]", children: label }),
+                /* @__PURE__ */ jsx40("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-btn-solid-brand-text-default)]", children: label }),
                 /* @__PURE__ */ jsx40("span", { className: "absolute inset-0 rounded-l-[11px] border border-[var(--color-btn-solid-brand-inner-border-default)] shadow-sm pointer-events-none" })
               ]
             }
@@ -5457,7 +5461,7 @@ var OperatorSelector = ({
                 {
                   className: cn(
                     "text-sm font-regular leading-sm",
-                    op === activeOperator ? "text-[var(--color-foreground)] font-medium" : "text-[var(--color-dropdown-item-text)]"
+                    op === activeOperator ? "text-[var(--color-foreground)] font-semibold" : "text-[var(--color-dropdown-item-text)]"
                   ),
                   children: op
                 }
@@ -5493,7 +5497,7 @@ var OperatorList = ({
         {
           className: cn(
             "text-sm font-regular leading-sm",
-            op === activeOperator ? "text-[var(--color-foreground)] font-medium" : "text-[var(--color-dropdown-item-text)]"
+            op === activeOperator ? "text-[var(--color-foreground)] font-semibold" : "text-[var(--color-dropdown-item-text)]"
           ),
           children: op
         }
@@ -5504,311 +5508,344 @@ var OperatorList = ({
 };
 OperatorList.displayName = "OperatorList";
 
-// src/components/ui/filter/value-input.tsx
+// src/components/ui/filter/value-inputs/shared.ts
+var inputClasses = [
+  "w-full px-base py-sm rounded-base border border-[var(--color-input)]",
+  "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
+  "placeholder:text-[var(--color-muted-foreground)]",
+  "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-0"
+].join(" ");
+var halfInputClasses = [
+  "flex-1 px-base py-sm rounded-base border border-[var(--color-input)]",
+  "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
+  "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
+].join(" ");
+var applyBtnClasses = "self-end px-md py-sm text-sm font-semibold leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity";
+
+// src/components/ui/filter/value-inputs/text-value-input.tsx
 import { jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
+var TextValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") onSubmit?.();
+  };
+  return /* @__PURE__ */ jsxs37("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+    /* @__PURE__ */ jsx42(
+      "input",
+      {
+        type: "text",
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder: "Enter value...",
+        autoFocus: true,
+        className: inputClasses
+      }
+    ),
+    /* @__PURE__ */ jsx42("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+TextValueInput.displayName = "TextValueInput";
+
+// src/components/ui/filter/value-inputs/number-value-input.tsx
+import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
+var NumberValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") onSubmit?.();
+  };
+  return /* @__PURE__ */ jsxs38("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+    /* @__PURE__ */ jsx43(
+      "input",
+      {
+        type: "number",
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value ? Number(e.target.value) : null),
+        onKeyDown: handleKeyDown,
+        placeholder: "Enter number...",
+        autoFocus: true,
+        className: inputClasses
+      }
+    ),
+    /* @__PURE__ */ jsx43("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+NumberValueInput.displayName = "NumberValueInput";
+var NumberRangeValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => {
+  const rangeVal = value ?? [0, 0];
+  return /* @__PURE__ */ jsxs38("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+    /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-base", children: [
+      /* @__PURE__ */ jsx43(
+        "input",
+        {
+          type: "number",
+          value: rangeVal[0] ?? "",
+          onChange: (e) => onChange([Number(e.target.value), rangeVal[1]]),
+          placeholder: "Min",
+          autoFocus: true,
+          className: halfInputClasses
+        }
+      ),
+      /* @__PURE__ */ jsx43("span", { className: "text-sm text-[var(--color-muted-foreground)]", children: "and" }),
+      /* @__PURE__ */ jsx43(
+        "input",
+        {
+          type: "number",
+          value: rangeVal[1] ?? "",
+          onChange: (e) => onChange([rangeVal[0], Number(e.target.value)]),
+          placeholder: "Max",
+          className: halfInputClasses
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx43("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+NumberRangeValueInput.displayName = "NumberRangeValueInput";
+
+// src/components/ui/filter/value-inputs/date-value-input.tsx
+import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
 var RELATIVE_DATE_PRESETS = [
   { group: "Past", options: ["Today", "Yesterday", "Last 7 days", "Last 14 days", "Last 30 days", "Last 90 days"] },
   { group: "Current", options: ["This week", "This month", "This quarter", "This year"] },
   { group: "Future", options: ["Tomorrow", "Next 7 days", "Next 14 days", "Next 30 days", "Next week", "Next month", "Next quarter"] }
 ];
-var ValueInput = ({
-  dataType,
-  operator,
+var DatePickerValueInput = ({
   value,
   onChange,
   onSubmit,
-  options = [],
   className
-}) => {
-  const inputType = getValueInputType(dataType, operator);
-  if (!inputType) return null;
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") onSubmit?.();
-  };
-  switch (inputType) {
-    case "TextInput":
-      return /* @__PURE__ */ jsxs37("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-        /* @__PURE__ */ jsx42(
-          "input",
-          {
-            type: "text",
-            value: value ?? "",
-            onChange: (e) => onChange(e.target.value),
-            onKeyDown: handleKeyDown,
-            placeholder: "Enter value...",
-            autoFocus: true,
-            className: cn(
-              "w-full px-base py-sm rounded-base border border-[var(--color-input)]",
-              "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
-              "placeholder:text-[var(--color-muted-foreground)]",
-              "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-0"
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx42(
-          "button",
-          {
-            type: "button",
-            onClick: onSubmit,
-            className: "self-end px-md py-sm text-sm font-medium leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity",
-            children: "Apply"
-          }
-        )
-      ] });
-    case "NumberInput":
-      return /* @__PURE__ */ jsxs37("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-        /* @__PURE__ */ jsx42(
-          "input",
-          {
-            type: "number",
-            value: value ?? "",
-            onChange: (e) => onChange(e.target.value ? Number(e.target.value) : null),
-            onKeyDown: handleKeyDown,
-            placeholder: "Enter number...",
-            autoFocus: true,
-            className: cn(
-              "w-full px-base py-sm rounded-base border border-[var(--color-input)]",
-              "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
-              "placeholder:text-[var(--color-muted-foreground)]",
-              "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-0"
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx42(
-          "button",
-          {
-            type: "button",
-            onClick: onSubmit,
-            className: "self-end px-md py-sm text-sm font-medium leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity",
-            children: "Apply"
-          }
-        )
-      ] });
-    case "NumberRange": {
-      const rangeVal = value ?? [0, 0];
-      return /* @__PURE__ */ jsxs37("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-        /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-base", children: [
-          /* @__PURE__ */ jsx42(
-            "input",
-            {
-              type: "number",
-              value: rangeVal[0] ?? "",
-              onChange: (e) => onChange([Number(e.target.value), rangeVal[1]]),
-              placeholder: "Min",
-              autoFocus: true,
-              className: cn(
-                "flex-1 px-base py-sm rounded-base border border-[var(--color-input)]",
-                "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
-                "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx42("span", { className: "text-sm text-[var(--color-muted-foreground)]", children: "and" }),
-          /* @__PURE__ */ jsx42(
-            "input",
-            {
-              type: "number",
-              value: rangeVal[1] ?? "",
-              onChange: (e) => onChange([rangeVal[0], Number(e.target.value)]),
-              placeholder: "Max",
-              className: cn(
-                "flex-1 px-base py-sm rounded-base border border-[var(--color-input)]",
-                "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
-                "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx42(
-          "button",
-          {
-            type: "button",
-            onClick: onSubmit,
-            className: "self-end px-md py-sm text-sm font-medium leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity",
-            children: "Apply"
-          }
-        )
-      ] });
+}) => /* @__PURE__ */ jsxs39("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+  /* @__PURE__ */ jsx44(
+    "input",
+    {
+      type: "date",
+      value: value instanceof Date ? value.toISOString().split("T")[0] : value ?? "",
+      onChange: (e) => onChange(e.target.value ? new Date(e.target.value) : null),
+      autoFocus: true,
+      className: inputClasses
     }
-    case "PresetTags":
-      return /* @__PURE__ */ jsx42("div", { className: cn("flex flex-col gap-base p-base max-w-[280px]", className), children: RELATIVE_DATE_PRESETS.map((group) => /* @__PURE__ */ jsxs37("div", { className: "flex flex-col gap-xs", children: [
-        /* @__PURE__ */ jsx42("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)] uppercase px-xs", children: group.group }),
-        /* @__PURE__ */ jsx42("div", { className: "flex flex-wrap gap-xs", children: group.options.map((preset) => /* @__PURE__ */ jsx42(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              onChange(preset);
-              onSubmit?.();
-            },
-            className: cn(
-              "px-base py-2xs rounded-base border cursor-pointer transition-colors text-sm font-regular leading-sm",
-              value === preset ? "border-[var(--color-ring)] bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "border-[var(--color-input)] bg-[var(--color-background)] text-[var(--color-foreground)] hover:bg-[var(--color-accent)]"
-            ),
-            children: preset
+  ),
+  /* @__PURE__ */ jsx44("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+] });
+DatePickerValueInput.displayName = "DatePickerValueInput";
+function toDateString(d) {
+  if (!d) return "";
+  if (d instanceof Date) return d.toISOString().split("T")[0];
+  return String(d);
+}
+var DateRangeValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => {
+  const rangeVal = Array.isArray(value) ? value : [null, null];
+  return /* @__PURE__ */ jsxs39("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+    /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-base", children: [
+      /* @__PURE__ */ jsx44(
+        "input",
+        {
+          type: "date",
+          value: toDateString(rangeVal[0]),
+          onChange: (e) => {
+            const from = e.target.value ? new Date(e.target.value) : null;
+            onChange([from, rangeVal[1]]);
           },
-          preset
-        )) })
-      ] }, group.group)) });
-    case "SingleSelect":
-      return /* @__PURE__ */ jsx42("div", { className: cn("flex flex-col gap-xs p-base max-h-[250px] overflow-y-auto", className), children: options.map((opt) => /* @__PURE__ */ jsx42(
+          autoFocus: true,
+          className: halfInputClasses
+        }
+      ),
+      /* @__PURE__ */ jsx44("span", { className: "text-sm text-[var(--color-muted-foreground)]", children: "to" }),
+      /* @__PURE__ */ jsx44(
+        "input",
+        {
+          type: "date",
+          value: toDateString(rangeVal[1]),
+          onChange: (e) => {
+            const to = e.target.value ? new Date(e.target.value) : null;
+            onChange([rangeVal[0], to]);
+          },
+          className: halfInputClasses
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx44("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+DateRangeValueInput.displayName = "DateRangeValueInput";
+var PresetTagsValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => /* @__PURE__ */ jsx44("div", { className: cn("flex flex-col gap-base p-base max-w-[280px]", className), children: RELATIVE_DATE_PRESETS.map((group) => /* @__PURE__ */ jsxs39("div", { className: "flex flex-col gap-xs", children: [
+  /* @__PURE__ */ jsx44("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] uppercase px-xs", children: group.group }),
+  /* @__PURE__ */ jsx44("div", { className: "flex flex-wrap gap-xs", children: group.options.map((preset) => /* @__PURE__ */ jsx44(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        onChange(preset);
+        onSubmit?.();
+      },
+      className: cn(
+        "px-base py-2xs rounded-base border cursor-pointer transition-colors text-sm font-regular leading-sm",
+        value === preset ? "border-[var(--color-ring)] bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "border-[var(--color-input)] bg-[var(--color-background)] text-[var(--color-foreground)] hover:bg-[var(--color-accent)]"
+      ),
+      children: preset
+    },
+    preset
+  )) })
+] }, group.group)) });
+PresetTagsValueInput.displayName = "PresetTagsValueInput";
+
+// src/components/ui/filter/value-inputs/select-value-input.tsx
+import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+var SingleSelectValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  options,
+  className
+}) => /* @__PURE__ */ jsx45("div", { className: cn("flex flex-col gap-xs p-base max-h-[250px] overflow-y-auto", className), children: options.map((opt) => /* @__PURE__ */ jsx45(
+  "button",
+  {
+    type: "button",
+    onClick: () => {
+      onChange(opt);
+      onSubmit?.();
+    },
+    className: cn(
+      "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
+      "hover:bg-[var(--color-dropdown-item-hover)]",
+      value === opt && "bg-[var(--color-dropdown-item-hover)]"
+    ),
+    children: /* @__PURE__ */ jsx45("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+  },
+  opt
+)) });
+SingleSelectValueInput.displayName = "SingleSelectValueInput";
+var MultiSelectValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  options,
+  className
+}) => {
+  const selected = Array.isArray(value) ? value : [];
+  return /* @__PURE__ */ jsxs40("div", { className: cn("flex flex-col gap-xs p-base", className), children: [
+    /* @__PURE__ */ jsx45("div", { className: "flex flex-col max-h-[200px] overflow-y-auto", children: options.map((opt) => {
+      const isSelected = selected.includes(opt);
+      return /* @__PURE__ */ jsxs40(
         "button",
         {
           type: "button",
           onClick: () => {
-            onChange(opt);
-            onSubmit?.();
+            const next = isSelected ? selected.filter((s) => s !== opt) : [...selected, opt];
+            onChange(next);
           },
           className: cn(
             "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-            "hover:bg-[var(--color-dropdown-item-hover)]",
-            value === opt && "bg-[var(--color-dropdown-item-hover)]"
+            "hover:bg-[var(--color-dropdown-item-hover)]"
           ),
-          children: /* @__PURE__ */ jsx42("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+          children: [
+            /* @__PURE__ */ jsx45(
+              "span",
+              {
+                className: cn(
+                  "flex items-center justify-center size-4 rounded-xs border transition-colors",
+                  isSelected ? "bg-[var(--color-primary)] border-[var(--color-primary)]" : "border-[var(--color-input)] bg-[var(--color-background)]"
+                ),
+                children: isSelected && /* @__PURE__ */ jsx45("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx45("path", { d: "M2 5L4 7L8 3", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+              }
+            ),
+            /* @__PURE__ */ jsx45("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+          ]
         },
         opt
-      )) });
-    case "MultiSelect": {
-      const selected = Array.isArray(value) ? value : [];
-      return /* @__PURE__ */ jsxs37("div", { className: cn("flex flex-col gap-xs p-base", className), children: [
-        /* @__PURE__ */ jsx42("div", { className: "flex flex-col max-h-[200px] overflow-y-auto", children: options.map((opt) => {
-          const isSelected = selected.includes(opt);
-          return /* @__PURE__ */ jsxs37(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                const next = isSelected ? selected.filter((s) => s !== opt) : [...selected, opt];
-                onChange(next);
-              },
-              className: cn(
-                "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-                "hover:bg-[var(--color-dropdown-item-hover)]"
-              ),
-              children: [
-                /* @__PURE__ */ jsx42(
-                  "span",
-                  {
-                    className: cn(
-                      "flex items-center justify-center size-4 rounded-xs border transition-colors",
-                      isSelected ? "bg-[var(--color-primary)] border-[var(--color-primary)]" : "border-[var(--color-input)] bg-[var(--color-background)]"
-                    ),
-                    children: isSelected && /* @__PURE__ */ jsx42("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx42("path", { d: "M2 5L4 7L8 3", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-                  }
-                ),
-                /* @__PURE__ */ jsx42("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
-              ]
-            },
-            opt
-          );
-        }) }),
-        /* @__PURE__ */ jsx42(
-          "button",
-          {
-            type: "button",
-            onClick: onSubmit,
-            className: "self-end px-md py-sm text-sm font-medium leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity",
-            children: "Apply"
-          }
-        )
-      ] });
-    }
-    // DatePicker, DateRange, RelationPicker, MultiRelationPicker
-    // Stub as text inputs for now — will wire to actual DatePicker/relation components
+      );
+    }) }),
+    /* @__PURE__ */ jsx45("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+MultiSelectValueInput.displayName = "MultiSelectValueInput";
+
+// src/components/ui/filter/value-inputs/relation-value-input.tsx
+import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+var RelationValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") onSubmit?.();
+  };
+  return /* @__PURE__ */ jsxs41("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+    /* @__PURE__ */ jsx46(
+      "input",
+      {
+        type: "text",
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder: "Search...",
+        autoFocus: true,
+        className: inputClasses
+      }
+    ),
+    /* @__PURE__ */ jsx46("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+RelationValueInput.displayName = "RelationValueInput";
+
+// src/components/ui/filter/value-input.tsx
+import { jsx as jsx47 } from "react/jsx-runtime";
+var ValueInput = ({
+  dataType,
+  operator,
+  value,
+  onChange,
+  onSubmit,
+  options = [],
+  className
+}) => {
+  const inputType = getValueInputType(dataType, operator);
+  if (!inputType) return null;
+  switch (inputType) {
+    case "TextInput":
+      return /* @__PURE__ */ jsx47(TextValueInput, { value, onChange, onSubmit, className });
+    case "NumberInput":
+      return /* @__PURE__ */ jsx47(NumberValueInput, { value, onChange, onSubmit, className });
+    case "NumberRange":
+      return /* @__PURE__ */ jsx47(NumberRangeValueInput, { value, onChange, onSubmit, className });
+    case "PresetTags":
+      return /* @__PURE__ */ jsx47(PresetTagsValueInput, { value, onChange, onSubmit, className });
+    case "SingleSelect":
+      return /* @__PURE__ */ jsx47(SingleSelectValueInput, { value, onChange, onSubmit, options, className });
+    case "MultiSelect":
+      return /* @__PURE__ */ jsx47(MultiSelectValueInput, { value, onChange, onSubmit, options, className });
     case "DatePicker":
-      return /* @__PURE__ */ jsxs37("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-        /* @__PURE__ */ jsx42(
-          "input",
-          {
-            type: "date",
-            value: value instanceof Date ? value.toISOString().split("T")[0] : value ?? "",
-            onChange: (e) => onChange(e.target.value ? new Date(e.target.value) : null),
-            autoFocus: true,
-            className: cn(
-              "w-full px-base py-sm rounded-base border border-[var(--color-input)]",
-              "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
-              "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx42(
-          "button",
-          {
-            type: "button",
-            onClick: onSubmit,
-            className: "self-end px-md py-sm text-sm font-medium leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity",
-            children: "Apply"
-          }
-        )
-      ] });
+      return /* @__PURE__ */ jsx47(DatePickerValueInput, { value, onChange, onSubmit, className });
     case "DateRange":
-      return /* @__PURE__ */ jsxs37("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-        /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-base", children: [
-          /* @__PURE__ */ jsx42(
-            "input",
-            {
-              type: "date",
-              autoFocus: true,
-              className: cn(
-                "flex-1 px-base py-sm rounded-base border border-[var(--color-input)]",
-                "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
-                "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx42("span", { className: "text-sm text-[var(--color-muted-foreground)]", children: "to" }),
-          /* @__PURE__ */ jsx42(
-            "input",
-            {
-              type: "date",
-              className: cn(
-                "flex-1 px-base py-sm rounded-base border border-[var(--color-input)]",
-                "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
-                "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx42(
-          "button",
-          {
-            type: "button",
-            onClick: onSubmit,
-            className: "self-end px-md py-sm text-sm font-medium leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity",
-            children: "Apply"
-          }
-        )
-      ] });
+      return /* @__PURE__ */ jsx47(DateRangeValueInput, { value, onChange, onSubmit, className });
     case "RelationPicker":
     case "MultiRelationPicker":
-      return /* @__PURE__ */ jsxs37("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-        /* @__PURE__ */ jsx42(
-          "input",
-          {
-            type: "text",
-            value: value ?? "",
-            onChange: (e) => onChange(e.target.value),
-            onKeyDown: handleKeyDown,
-            placeholder: "Search...",
-            autoFocus: true,
-            className: cn(
-              "w-full px-base py-sm rounded-base border border-[var(--color-input)]",
-              "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
-              "placeholder:text-[var(--color-muted-foreground)]",
-              "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx42(
-          "button",
-          {
-            type: "button",
-            onClick: onSubmit,
-            className: "self-end px-md py-sm text-sm font-medium leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity",
-            children: "Apply"
-          }
-        )
-      ] });
+      return /* @__PURE__ */ jsx47(RelationValueInput, { value, onChange, onSubmit, className });
     default:
       return null;
   }
@@ -5818,15 +5855,57 @@ ValueInput.displayName = "ValueInput";
 // src/components/ui/filter/property-selector.tsx
 import * as React41 from "react";
 import * as PopoverPrimitive5 from "@radix-ui/react-popover";
-import { Icon as Icon26, faChevronLeftOutline as faChevronLeftOutline2, faChevronRightOutline as faChevronRightOutline2, faMagnifyingGlassOutline } from "@l3mpire/icons";
-import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
+import {
+  Icon as Icon26,
+  faChevronLeftOutline as faChevronLeftOutline2,
+  faChevronRightOutline as faChevronRightOutline2,
+  faMagnifyingGlassOutline,
+  faFilterOutline as faFilterOutline2
+} from "@l3mpire/icons";
+import { Fragment as Fragment4, jsx as jsx48, jsxs as jsxs42 } from "react/jsx-runtime";
+var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ jsxs42(Fragment4, { children: [
+  /* @__PURE__ */ jsx48("div", { className: "h-px bg-[var(--color-dropdown-border)] mx-xs" }),
+  /* @__PURE__ */ jsxs42(
+    "button",
+    {
+      type: "button",
+      onPointerDown: (e) => e.preventDefault(),
+      onClick,
+      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+      children: [
+        /* @__PURE__ */ jsx48(
+          Icon26,
+          {
+            icon: faFilterOutline2,
+            size: "sm",
+            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+          }
+        ),
+        /* @__PURE__ */ jsx48("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: "Advanced filter" }),
+        count > 0 && /* @__PURE__ */ jsxs42("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: [
+          count,
+          " ",
+          count === 1 ? "rule" : "rules"
+        ] })
+      ]
+    }
+  )
+] });
 var PropertySelector = ({
   properties,
   onSelect,
   open,
   onOpenChange,
-  children
+  children,
+  onAdvancedFilter,
+  advancedFilterCount = 0
 }) => {
+  const handleAdvancedClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onAdvancedFilter?.();
+  };
+  const showAdvancedFooter = !!onAdvancedFilter;
   const [activeGroup, setActiveGroup] = React41.useState(null);
   const [search, setSearch] = React41.useState("");
   React41.useEffect(() => {
@@ -5852,6 +5931,20 @@ var PropertySelector = ({
     }
     return Array.from(map.values());
   }, [properties]);
+  const globalSearchResults = React41.useMemo(() => {
+    if (!search || activeGroup) return [];
+    const lower = search.toLowerCase();
+    return properties.filter((p) => p.label.toLowerCase().includes(lower));
+  }, [properties, search, activeGroup]);
+  const filteredGroups = React41.useMemo(() => {
+    if (!search || activeGroup) return groups;
+    const lower = search.toLowerCase();
+    return groups.filter(
+      (g) => g.groupLabel.toLowerCase().includes(lower) || properties.some(
+        (p) => p.group === g.group && p.label.toLowerCase().includes(lower)
+      )
+    );
+  }, [groups, properties, search, activeGroup]);
   const filteredProperties = React41.useMemo(() => {
     if (!activeGroup) return [];
     const groupProps = properties.filter((p) => p.group === activeGroup);
@@ -5860,13 +5953,15 @@ var PropertySelector = ({
     return groupProps.filter((p) => p.label.toLowerCase().includes(lower));
   }, [properties, activeGroup, search]);
   const activeGroupInfo = groups.find((g) => g.group === activeGroup);
-  return /* @__PURE__ */ jsxs38(PopoverPrimitive5.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx43(PopoverPrimitive5.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx43(PopoverPrimitive5.Portal, { children: /* @__PURE__ */ jsx43(
+  const showGlobalResults = search.length > 0 && !activeGroup && globalSearchResults.length > 0;
+  return /* @__PURE__ */ jsxs42(PopoverPrimitive5.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx48(PopoverPrimitive5.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx48(PopoverPrimitive5.Portal, { children: /* @__PURE__ */ jsxs42(
       PopoverPrimitive5.Content,
       {
         sideOffset: 4,
         align: "start",
+        onCloseAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col gap-xs overflow-clip p-xs",
           "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
@@ -5875,111 +5970,178 @@ var PropertySelector = ({
           "data-[side=bottom]:slide-in-from-top-2",
           "min-w-[230px]"
         ),
-        children: activeGroup === null ? (
-          /* ── Level 1: Categories ─────────────────────────────────── */
-          /* @__PURE__ */ jsx43("div", { className: "flex flex-col", children: groups.map((g) => /* @__PURE__ */ jsxs38(
-            "button",
-            {
-              type: "button",
-              onClick: () => setActiveGroup(g.group),
-              className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
-              children: [
-                /* @__PURE__ */ jsx43(
+        children: [
+          activeGroup === null ? (
+            /* ── Level 1: Search + Categories ───────────────────────── */
+            /* @__PURE__ */ jsxs42("div", { className: "flex flex-col gap-xs", children: [
+              /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
+                /* @__PURE__ */ jsx48(
                   Icon26,
                   {
-                    icon: g.groupIcon,
+                    icon: faMagnifyingGlassOutline,
                     size: "sm",
-                    className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                    className: "shrink-0 text-[var(--color-muted-foreground)]"
                   }
                 ),
-                /* @__PURE__ */ jsx43("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: g.groupLabel }),
-                /* @__PURE__ */ jsx43("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)]", children: g.count }),
-                /* @__PURE__ */ jsx43(
-                  Icon26,
+                /* @__PURE__ */ jsx48(
+                  "input",
                   {
-                    icon: faChevronRightOutline2,
-                    size: "xs",
-                    className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                    type: "text",
+                    value: search,
+                    onChange: (e) => setSearch(e.target.value),
+                    placeholder: "Search...",
+                    autoFocus: true,
+                    className: "flex-1 text-sm font-regular leading-sm text-[var(--color-foreground)] bg-transparent outline-none placeholder:text-[var(--color-muted-foreground)]"
                   }
                 )
-              ]
-            },
-            g.group
-          )) })
-        ) : (
-          /* ── Level 2: Properties ─────────────────────────────────── */
-          /* @__PURE__ */ jsxs38("div", { className: "flex flex-col gap-xs", children: [
-            /* @__PURE__ */ jsxs38(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  setActiveGroup(null);
-                  setSearch("");
-                },
-                className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
-                children: [
-                  /* @__PURE__ */ jsx43(
-                    Icon26,
+              ] }),
+              showGlobalResults ? (
+                /* ── Global search results (flat property list) ─────── */
+                /* @__PURE__ */ jsx48("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: globalSearchResults.map((prop) => /* @__PURE__ */ jsxs42(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      onSelect(prop);
+                      onOpenChange?.(false);
+                    },
+                    className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                    children: [
+                      /* @__PURE__ */ jsx48(
+                        Icon26,
+                        {
+                          icon: prop.icon,
+                          size: "sm",
+                          className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx48("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: prop.label }),
+                      /* @__PURE__ */ jsx48("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: prop.groupLabel })
+                    ]
+                  },
+                  prop.id
+                )) })
+              ) : (
+                /* ── Group list ─────────────────────────────────────── */
+                /* @__PURE__ */ jsxs42("div", { className: "flex flex-col", children: [
+                  filteredGroups.map((g) => /* @__PURE__ */ jsxs42(
+                    "button",
                     {
-                      icon: faChevronLeftOutline2,
-                      size: "sm",
-                      className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx43("span", { className: "flex-1 text-xs font-medium leading-xs text-[var(--color-muted-foreground)] text-left truncate", children: activeGroupInfo?.groupLabel })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
-              /* @__PURE__ */ jsx43(
-                Icon26,
-                {
-                  icon: faMagnifyingGlassOutline,
-                  size: "sm",
-                  className: "shrink-0 text-[var(--color-muted-foreground)]"
-                }
-              ),
-              /* @__PURE__ */ jsx43(
-                "input",
-                {
-                  type: "text",
-                  value: search,
-                  onChange: (e) => setSearch(e.target.value),
-                  placeholder: "Search...",
-                  autoFocus: true,
-                  className: "flex-1 text-sm font-regular leading-sm text-[var(--color-foreground)] bg-transparent outline-none placeholder:text-[var(--color-muted-foreground)]"
-                }
+                      type: "button",
+                      onClick: () => {
+                        setActiveGroup(g.group);
+                        setSearch("");
+                      },
+                      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                      children: [
+                        /* @__PURE__ */ jsx48(
+                          Icon26,
+                          {
+                            icon: g.groupIcon,
+                            size: "sm",
+                            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx48("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: g.groupLabel }),
+                        /* @__PURE__ */ jsx48("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: g.count }),
+                        /* @__PURE__ */ jsx48(
+                          Icon26,
+                          {
+                            icon: faChevronRightOutline2,
+                            size: "xs",
+                            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                          }
+                        )
+                      ]
+                    },
+                    g.group
+                  )),
+                  filteredGroups.length === 0 && /* @__PURE__ */ jsx48("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
+                ] })
               )
-            ] }),
-            /* @__PURE__ */ jsxs38("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: [
-              filteredProperties.map((prop) => /* @__PURE__ */ jsxs38(
+            ] })
+          ) : (
+            /* ── Level 2: Properties ─────────────────────────────────── */
+            /* @__PURE__ */ jsxs42("div", { className: "flex flex-col gap-xs", children: [
+              /* @__PURE__ */ jsxs42(
                 "button",
                 {
                   type: "button",
                   onClick: () => {
-                    onSelect(prop);
-                    onOpenChange?.(false);
+                    setActiveGroup(null);
+                    setSearch("");
                   },
                   className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
                   children: [
-                    /* @__PURE__ */ jsx43(
+                    /* @__PURE__ */ jsx48(
                       Icon26,
                       {
-                        icon: prop.icon,
+                        icon: faChevronLeftOutline2,
                         size: "sm",
                         className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                       }
                     ),
-                    /* @__PURE__ */ jsx43("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: prop.label })
+                    /* @__PURE__ */ jsx48("span", { className: "flex-1 text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] text-left truncate", children: activeGroupInfo?.groupLabel })
                   ]
-                },
-                prop.id
-              )),
-              filteredProperties.length === 0 && /* @__PURE__ */ jsx43("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
+                }
+              ),
+              /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
+                /* @__PURE__ */ jsx48(
+                  Icon26,
+                  {
+                    icon: faMagnifyingGlassOutline,
+                    size: "sm",
+                    className: "shrink-0 text-[var(--color-muted-foreground)]"
+                  }
+                ),
+                /* @__PURE__ */ jsx48(
+                  "input",
+                  {
+                    type: "text",
+                    value: search,
+                    onChange: (e) => setSearch(e.target.value),
+                    placeholder: "Search...",
+                    autoFocus: true,
+                    className: "flex-1 text-sm font-regular leading-sm text-[var(--color-foreground)] bg-transparent outline-none placeholder:text-[var(--color-muted-foreground)]"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs42("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: [
+                filteredProperties.map((prop) => /* @__PURE__ */ jsxs42(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      onSelect(prop);
+                      onOpenChange?.(false);
+                    },
+                    className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                    children: [
+                      /* @__PURE__ */ jsx48(
+                        Icon26,
+                        {
+                          icon: prop.icon,
+                          size: "sm",
+                          className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx48("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: prop.label })
+                    ]
+                  },
+                  prop.id
+                )),
+                filteredProperties.length === 0 && /* @__PURE__ */ jsx48("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
+              ] })
             ] })
-          ] })
-        )
+          ),
+          showAdvancedFooter && /* @__PURE__ */ jsx48(
+            AdvancedFilterFooter,
+            {
+              onClick: handleAdvancedClick,
+              count: advancedFilterCount
+            }
+          )
+        ]
       }
     ) })
   ] });
@@ -5989,16 +6151,16 @@ PropertySelector.displayName = "PropertySelector";
 // src/components/ui/filter/kebab-menu.tsx
 import * as PopoverPrimitive6 from "@radix-ui/react-popover";
 import { Icon as Icon27, faArrowRightOutline, faTrashOutline } from "@l3mpire/icons";
-import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs43 } from "react/jsx-runtime";
 var KebabMenu = ({
   onConvertToAdvanced,
   onDelete,
   open,
   onOpenChange,
   children
-}) => /* @__PURE__ */ jsxs39(PopoverPrimitive6.Root, { open, onOpenChange, children: [
-  /* @__PURE__ */ jsx44(PopoverPrimitive6.Trigger, { asChild: true, children }),
-  /* @__PURE__ */ jsx44(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ jsxs39(
+}) => /* @__PURE__ */ jsxs43(PopoverPrimitive6.Root, { open, onOpenChange, children: [
+  /* @__PURE__ */ jsx49(PopoverPrimitive6.Trigger, { asChild: true, children }),
+  /* @__PURE__ */ jsx49(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ jsxs43(
     PopoverPrimitive6.Content,
     {
       sideOffset: 4,
@@ -6012,7 +6174,7 @@ var KebabMenu = ({
         "min-w-[210px]"
       ),
       children: [
-        onConvertToAdvanced && /* @__PURE__ */ jsxs39(
+        onConvertToAdvanced && /* @__PURE__ */ jsxs43(
           "button",
           {
             type: "button",
@@ -6022,7 +6184,7 @@ var KebabMenu = ({
             },
             className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
             children: [
-              /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx49(
                 Icon27,
                 {
                   icon: faArrowRightOutline,
@@ -6030,12 +6192,12 @@ var KebabMenu = ({
                   className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                 }
               ),
-              /* @__PURE__ */ jsx44("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)]", children: "Convert to advanced" })
+              /* @__PURE__ */ jsx49("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)]", children: "Convert to advanced" })
             ]
           }
         ),
-        onConvertToAdvanced && onDelete && /* @__PURE__ */ jsx44("div", { className: "h-px mx-base my-xs bg-[var(--color-border)]" }),
-        onDelete && /* @__PURE__ */ jsxs39(
+        onConvertToAdvanced && onDelete && /* @__PURE__ */ jsx49("div", { className: "h-px mx-base my-xs bg-[var(--color-border)]" }),
+        onDelete && /* @__PURE__ */ jsxs43(
           "button",
           {
             type: "button",
@@ -6045,7 +6207,7 @@ var KebabMenu = ({
             },
             className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
             children: [
-              /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx49(
                 Icon27,
                 {
                   icon: faTrashOutline,
@@ -6053,7 +6215,7 @@ var KebabMenu = ({
                   className: "shrink-0 text-[var(--color-destructive)]"
                 }
               ),
-              /* @__PURE__ */ jsx44("span", { className: "text-sm font-regular leading-sm text-[var(--color-destructive)]", children: "Delete filter" })
+              /* @__PURE__ */ jsx49("span", { className: "text-sm font-regular leading-sm text-[var(--color-destructive)]", children: "Delete filter" })
             ]
           }
         )
@@ -6067,7 +6229,7 @@ KebabMenu.displayName = "KebabMenu";
 import * as React42 from "react";
 import * as PopoverPrimitive7 from "@radix-ui/react-popover";
 import { Icon as Icon28 } from "@l3mpire/icons";
-import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs44 } from "react/jsx-runtime";
 var FilterEditor = ({
   propertyDef,
   condition,
@@ -6112,9 +6274,9 @@ var FilterEditor = ({
     onOpenChange?.(false);
     onClose();
   };
-  return /* @__PURE__ */ jsxs40(PopoverPrimitive7.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx45(PopoverPrimitive7.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx45(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs44(PopoverPrimitive7.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx50(PopoverPrimitive7.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx50(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsxs44(
       PopoverPrimitive7.Content,
       {
         sideOffset: 4,
@@ -6128,8 +6290,8 @@ var FilterEditor = ({
           "min-w-[240px]"
         ),
         children: [
-          /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-base px-base pt-base pb-xs border-b border-[var(--color-border)]", children: [
-            /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-base px-base pt-base pb-xs border-b border-[var(--color-border)]", children: [
+            /* @__PURE__ */ jsx50(
               Icon28,
               {
                 icon: propertyDef.icon,
@@ -6137,8 +6299,8 @@ var FilterEditor = ({
                 className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
               }
             ),
-            /* @__PURE__ */ jsx45("span", { className: "text-sm font-medium leading-sm text-[var(--color-foreground)]", children: propertyDef.label }),
-            localOperator && view === "value" && /* @__PURE__ */ jsxs40(
+            /* @__PURE__ */ jsx50("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: propertyDef.label }),
+            localOperator && view === "value" && /* @__PURE__ */ jsxs44(
               "button",
               {
                 type: "button",
@@ -6151,14 +6313,14 @@ var FilterEditor = ({
               }
             )
           ] }),
-          view === "operator" ? /* @__PURE__ */ jsx45("div", { className: "p-xs", children: /* @__PURE__ */ jsx45(
+          view === "operator" ? /* @__PURE__ */ jsx50("div", { className: "p-xs", children: /* @__PURE__ */ jsx50(
             OperatorList,
             {
               dataType: propertyDef.type,
               activeOperator: localOperator,
               onSelect: handleOperatorSelect
             }
-          ) }) : localOperator && /* @__PURE__ */ jsx45(
+          ) }) : localOperator && /* @__PURE__ */ jsx50(
             ValueInput,
             {
               dataType: propertyDef.type,
@@ -6179,7 +6341,7 @@ FilterEditor.displayName = "FilterEditor";
 // src/components/ui/filter/interactive-filter-chip.tsx
 import * as React43 from "react";
 import * as PopoverPrimitive8 from "@radix-ui/react-popover";
-import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs45 } from "react/jsx-runtime";
 function formatFilterValue(value) {
   if (value == null) return void 0;
   if (typeof value === "boolean") return value ? "Yes" : "No";
@@ -6212,9 +6374,9 @@ var SegmentPopover = ({
   children,
   align = "start",
   minWidth = "240px"
-}) => /* @__PURE__ */ jsxs41(PopoverPrimitive8.Root, { open, onOpenChange, children: [
-  /* @__PURE__ */ jsx46(PopoverPrimitive8.Trigger, { asChild: true, children: trigger }),
-  /* @__PURE__ */ jsx46(PopoverPrimitive8.Portal, { children: /* @__PURE__ */ jsx46(
+}) => /* @__PURE__ */ jsxs45(PopoverPrimitive8.Root, { open, onOpenChange, children: [
+  /* @__PURE__ */ jsx51(PopoverPrimitive8.Trigger, { asChild: true, children: trigger }),
+  /* @__PURE__ */ jsx51(PopoverPrimitive8.Portal, { children: /* @__PURE__ */ jsx51(
     PopoverPrimitive8.Content,
     {
       sideOffset: 4,
@@ -6247,12 +6409,20 @@ var InteractiveFilterChip = ({
   const [valueOpen, setValueOpen] = React43.useState(false);
   const [propertyOpen, setPropertyOpen] = React43.useState(false);
   const [kebabOpen, setKebabOpen] = React43.useState(false);
+  const [pendingValueOpen, setPendingValueOpen] = React43.useState(false);
+  const autoOpenHandled = React43.useRef(false);
   React43.useEffect(() => {
-    if (autoOpen && condition.operator && !isNoValueOperator(condition.operator)) {
-      const t = setTimeout(() => setValueOpen(true), 50);
-      return () => clearTimeout(t);
+    if (autoOpen && !autoOpenHandled.current && condition.operator && !isNoValueOperator(condition.operator)) {
+      autoOpenHandled.current = true;
+      setValueOpen(true);
     }
-  }, []);
+  }, [autoOpen, condition.operator]);
+  React43.useEffect(() => {
+    if (!operatorOpen && pendingValueOpen) {
+      setPendingValueOpen(false);
+      setValueOpen(true);
+    }
+  }, [operatorOpen, pendingValueOpen]);
   const handleOperatorSelect = (op) => {
     if (isNoValueOperator(op)) {
       onUpdate({ ...condition, operator: op, value: null });
@@ -6262,7 +6432,7 @@ var InteractiveFilterChip = ({
       onUpdate({ ...condition, operator: op, value: resetValue });
       setOperatorOpen(false);
       if (resetValue == null) {
-        setTimeout(() => setValueOpen(true), 100);
+        setPendingValueOpen(true);
       }
     }
   };
@@ -6276,7 +6446,7 @@ var InteractiveFilterChip = ({
   const displayValue = formatFilterValue(condition.value);
   const hasValue = hasOperator && displayValue != null;
   const badgeCount = getBadgeCount(condition.value);
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs45(
     "div",
     {
       className: cn(
@@ -6285,7 +6455,7 @@ var InteractiveFilterChip = ({
         className
       ),
       children: [
-        properties ? /* @__PURE__ */ jsx46(
+        properties ? /* @__PURE__ */ jsx51(
           PropertySelector,
           {
             properties,
@@ -6295,7 +6465,7 @@ var InteractiveFilterChip = ({
             },
             open: propertyOpen,
             onOpenChange: setPropertyOpen,
-            children: /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46(
+            children: /* @__PURE__ */ jsx51("div", { children: /* @__PURE__ */ jsx51(
               FilterChipSegment,
               {
                 segmentType: "property",
@@ -6306,7 +6476,7 @@ var InteractiveFilterChip = ({
               }
             ) })
           }
-        ) : /* @__PURE__ */ jsx46(
+        ) : /* @__PURE__ */ jsx51(
           FilterChipSegment,
           {
             segmentType: "property",
@@ -6315,13 +6485,13 @@ var InteractiveFilterChip = ({
             label: propertyDef.label
           }
         ),
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx51(
           SegmentPopover,
           {
             open: operatorOpen,
             onOpenChange: setOperatorOpen,
             minWidth: "180px",
-            trigger: /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46(
+            trigger: /* @__PURE__ */ jsx51("div", { children: /* @__PURE__ */ jsx51(
               FilterChipSegment,
               {
                 segmentType: hasOperator ? "operator" : "placeholder",
@@ -6330,7 +6500,7 @@ var InteractiveFilterChip = ({
                 onClick: () => setOperatorOpen(true)
               }
             ) }),
-            children: /* @__PURE__ */ jsx46("div", { className: "p-xs", children: /* @__PURE__ */ jsx46(
+            children: /* @__PURE__ */ jsx51("div", { className: "p-xs", children: /* @__PURE__ */ jsx51(
               OperatorList,
               {
                 dataType: propertyDef.type,
@@ -6340,13 +6510,13 @@ var InteractiveFilterChip = ({
             ) })
           }
         ),
-        hasOperator && condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ jsx46(
+        hasOperator && condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ jsx51(
           SegmentPopover,
           {
             open: valueOpen,
             onOpenChange: setValueOpen,
             minWidth: "240px",
-            trigger: /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46(
+            trigger: /* @__PURE__ */ jsx51("div", { children: /* @__PURE__ */ jsx51(
               FilterChipSegment,
               {
                 segmentType: hasValue ? "value" : "placeholder",
@@ -6356,7 +6526,7 @@ var InteractiveFilterChip = ({
                 onClick: () => setValueOpen(true)
               }
             ) }),
-            children: /* @__PURE__ */ jsx46(
+            children: /* @__PURE__ */ jsx51(
               ValueInput,
               {
                 dataType: propertyDef.type,
@@ -6369,7 +6539,7 @@ var InteractiveFilterChip = ({
             )
           }
         ),
-        hasOperator && condition.operator && isNoValueOperator(condition.operator) && /* @__PURE__ */ jsx46(
+        hasOperator && condition.operator && isNoValueOperator(condition.operator) && /* @__PURE__ */ jsx51(
           FilterChipSegment,
           {
             segmentType: "value",
@@ -6377,14 +6547,14 @@ var InteractiveFilterChip = ({
             label: condition.operator
           }
         ),
-        hasOperator && /* @__PURE__ */ jsx46(
+        hasOperator && /* @__PURE__ */ jsx51(
           KebabMenu,
           {
             open: kebabOpen,
             onOpenChange: setKebabOpen,
             onConvertToAdvanced,
             onDelete,
-            children: /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46(
+            children: /* @__PURE__ */ jsx51("div", { children: /* @__PURE__ */ jsx51(
               FilterChipSegment,
               {
                 segmentType: "button",
@@ -6404,12 +6574,12 @@ InteractiveFilterChip.displayName = "InteractiveFilterChip";
 
 // src/components/ui/filter/filter-system.tsx
 import * as React49 from "react";
-import { Icon as Icon33, faXmarkOutline as faXmarkOutline4 } from "@l3mpire/icons";
+import { Icon as Icon33, faXmarkOutline as faXmarkOutline4, faPlusOutline as faPlusOutline4 } from "@l3mpire/icons";
 
 // src/components/ui/filter/advanced-chip.tsx
 import * as React44 from "react";
 import { Icon as Icon29, faXmarkOutline as faXmarkOutline2 } from "@l3mpire/icons";
-import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs46 } from "react/jsx-runtime";
 var btnBase = [
   "flex items-center justify-center",
   "min-h-[32px] max-h-[32px]",
@@ -6419,8 +6589,8 @@ var btnBase = [
   "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
 ];
 var AdvancedChip = React44.forwardRef(
-  ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ jsxs42("div", { className: cn("inline-flex items-center", className), children: [
-    /* @__PURE__ */ jsxs42(
+  ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ jsxs46("div", { className: cn("inline-flex items-center", className), children: [
+    /* @__PURE__ */ jsxs46(
       "button",
       {
         ref,
@@ -6433,12 +6603,12 @@ var AdvancedChip = React44.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx47("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Advanced filters" }),
-          /* @__PURE__ */ jsx47("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx47("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+          /* @__PURE__ */ jsx52("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Advanced filters" }),
+          count > 0 && /* @__PURE__ */ jsx52("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx52("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
         ]
       }
     ),
-    onClear && /* @__PURE__ */ jsx47(
+    onClear && /* @__PURE__ */ jsx52(
       "button",
       {
         type: "button",
@@ -6452,7 +6622,7 @@ var AdvancedChip = React44.forwardRef(
           "rounded-r-md -ml-px"
         ),
         "aria-label": "Clear all advanced filters",
-        children: /* @__PURE__ */ jsx47(Icon29, { icon: faXmarkOutline2, size: "sm", className: "text-[var(--color-foreground)]" })
+        children: /* @__PURE__ */ jsx52(Icon29, { icon: faXmarkOutline2, size: "sm", className: "text-[var(--color-foreground)]" })
       }
     )
   ] })
@@ -6462,13 +6632,13 @@ AdvancedChip.displayName = "AdvancedChip";
 // src/components/ui/filter/advanced-popover.tsx
 import * as React46 from "react";
 import * as PopoverPrimitive10 from "@radix-ui/react-popover";
-import { Icon as Icon31, faPlusOutline as faPlusOutline2 } from "@l3mpire/icons";
+import { Icon as Icon31, faPlusOutline as faPlusOutline2, faChevronDownOutline as faChevronDownOutline3 } from "@l3mpire/icons";
 
 // src/components/ui/filter/advanced-row.tsx
 import * as React45 from "react";
 import * as PopoverPrimitive9 from "@radix-ui/react-popover";
 import { Icon as Icon30, faXmarkOutline as faXmarkOutline3, faRefreshOutline, faChevronDownOutline as faChevronDownOutline2 } from "@l3mpire/icons";
-import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
 var selectBtnStyle = [
   "flex items-center gap-base",
   "px-base py-sm",
@@ -6502,8 +6672,8 @@ var AdvancedRow = ({
     onUpdate({ ...condition, value: val });
   };
   const displayValue = condition.value == null ? "" : typeof condition.value === "string" ? condition.value : String(condition.value);
-  return /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    connector === "Where" ? /* @__PURE__ */ jsx48("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx48("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+    connector === "Where" ? /* @__PURE__ */ jsx53("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx53("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ jsxs47(
       "button",
       {
         type: "button",
@@ -6513,26 +6683,26 @@ var AdvancedRow = ({
           "min-w-[64px] min-h-[24px] max-h-[24px] p-xs",
           "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
           "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-base shadow-sm",
-          "cursor-pointer transition-colors text-xs font-medium leading-xs text-[var(--color-foreground)]",
+          "cursor-pointer transition-colors text-xs font-semibold leading-xs text-[var(--color-foreground)]",
           "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
         ),
         children: [
           connector,
-          /* @__PURE__ */ jsx48(Icon30, { icon: faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
+          /* @__PURE__ */ jsx53(Icon30, { icon: faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs43(PopoverPrimitive9.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
-      /* @__PURE__ */ jsx48(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs43("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ jsx48(Icon30, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
-        /* @__PURE__ */ jsxs43("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate", children: [
+    /* @__PURE__ */ jsxs47(PopoverPrimitive9.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
+      /* @__PURE__ */ jsx53(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs47("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
+        /* @__PURE__ */ jsx53(Icon30, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
+        /* @__PURE__ */ jsxs47("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate", children: [
           propertyDef.groupLabel,
           " > ",
           propertyDef.label
         ] }),
-        /* @__PURE__ */ jsx48(Icon30, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+        /* @__PURE__ */ jsx53(Icon30, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
       ] }) }),
-      /* @__PURE__ */ jsx48(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ jsx48(
+      /* @__PURE__ */ jsx53(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ jsx53(
         PopoverPrimitive9.Content,
         {
           sideOffset: 4,
@@ -6544,7 +6714,7 @@ var AdvancedRow = ({
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[200px]"
           ),
-          children: properties.map((p) => /* @__PURE__ */ jsxs43(
+          children: properties.map((p) => /* @__PURE__ */ jsxs47(
             "button",
             {
               type: "button",
@@ -6558,8 +6728,8 @@ var AdvancedRow = ({
                 p.id === condition.propertyId && "bg-[var(--color-dropdown-item-hover)]"
               ),
               children: [
-                /* @__PURE__ */ jsx48(Icon30, { icon: p.icon, size: "sm", className: "shrink-0 text-[var(--color-dropdown-item-icon)]" }),
-                /* @__PURE__ */ jsx48("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] truncate", children: p.label })
+                /* @__PURE__ */ jsx53(Icon30, { icon: p.icon, size: "sm", className: "shrink-0 text-[var(--color-dropdown-item-icon)]" }),
+                /* @__PURE__ */ jsx53("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] truncate", children: p.label })
               ]
             },
             p.id
@@ -6567,12 +6737,12 @@ var AdvancedRow = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs43(PopoverPrimitive9.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
-      /* @__PURE__ */ jsx48(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs43("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ jsx48("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
-        /* @__PURE__ */ jsx48(Icon30, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+    /* @__PURE__ */ jsxs47(PopoverPrimitive9.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
+      /* @__PURE__ */ jsx53(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs47("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
+        /* @__PURE__ */ jsx53("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
+        /* @__PURE__ */ jsx53(Icon30, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
       ] }) }),
-      /* @__PURE__ */ jsx48(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ jsx48(
+      /* @__PURE__ */ jsx53(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ jsx53(
         PopoverPrimitive9.Content,
         {
           sideOffset: 4,
@@ -6584,7 +6754,7 @@ var AdvancedRow = ({
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[160px]"
           ),
-          children: /* @__PURE__ */ jsx48(
+          children: /* @__PURE__ */ jsx53(
             OperatorList,
             {
               dataType: propertyDef.type,
@@ -6595,7 +6765,7 @@ var AdvancedRow = ({
         }
       ) })
     ] }),
-    condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ jsx48(
+    condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ jsx53(
       "input",
       {
         type: "text",
@@ -6611,14 +6781,14 @@ var AdvancedRow = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx53(
       "button",
       {
         type: "button",
         onClick: onDelete,
         className: "ml-auto shrink-0 flex items-center justify-center p-sm rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
         "aria-label": "Remove filter",
-        children: /* @__PURE__ */ jsx48(Icon30, { icon: faXmarkOutline3, size: "sm", className: "text-[var(--color-foreground)]" })
+        children: /* @__PURE__ */ jsx53(Icon30, { icon: faXmarkOutline3, size: "sm", className: "text-[var(--color-foreground)]" })
       }
     )
   ] });
@@ -6626,13 +6796,13 @@ var AdvancedRow = ({
 AdvancedRow.displayName = "AdvancedRow";
 
 // src/components/ui/filter/advanced-popover.tsx
-import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs48 } from "react/jsx-runtime";
 var outlinedBtn = [
   "flex items-center gap-sm px-base py-sm",
   "min-h-[32px] max-h-[32px] min-w-[80px]",
   "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
   "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
-  "cursor-pointer transition-colors text-sm font-medium leading-sm text-[var(--color-foreground)]",
+  "cursor-pointer transition-colors text-sm font-semibold leading-sm text-[var(--color-foreground)]",
   "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
 ];
 var AdvancedPopover = ({
@@ -6644,7 +6814,7 @@ var AdvancedPopover = ({
   children
 }) => {
   const [addSelectorOpen, setAddSelectorOpen] = React46.useState(false);
-  const [logicOps, setLogicOps] = React46.useState({});
+  const [draftPickerOpen, setDraftPickerOpen] = React46.useState(false);
   const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
   const handleUpdateFilter = (updated) => {
     onFiltersChange(filters.map((f) => f.id === updated.id ? updated : f));
@@ -6668,19 +6838,21 @@ var AdvancedPopover = ({
     onOpenChange?.(false);
   };
   const toggleLogicOp = (filterId) => {
-    setLogicOps((prev) => ({
-      ...prev,
-      [filterId]: (prev[filterId] ?? "and") === "and" ? "or" : "and"
-    }));
+    onFiltersChange(
+      filters.map(
+        (f) => f.id === filterId ? { ...f, logicOperator: (f.logicOperator ?? "and") === "and" ? "or" : "and" } : f
+      )
+    );
   };
-  return /* @__PURE__ */ jsxs44(PopoverPrimitive10.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx49(PopoverPrimitive10.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx49(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs48(PopoverPrimitive10.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx54(PopoverPrimitive10.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx54(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ jsxs48(
       PopoverPrimitive10.Content,
       {
         sideOffset: 4,
         align: "start",
         collisionPadding: 16,
+        onOpenAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col",
           "bg-[var(--color-background)] rounded-md shadow-lg",
@@ -6690,14 +6862,14 @@ var AdvancedPopover = ({
           "w-[min(520px,calc(100vw-32px))]"
         ),
         children: [
-          /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-base p-base", children: [
+          /* @__PURE__ */ jsxs48("div", { className: "flex flex-col gap-base p-base", children: [
             filters.map((filter, i) => {
               const propDef = getPropertyDef(filter.propertyId);
               if (!propDef) return null;
-              return /* @__PURE__ */ jsx49(
+              return /* @__PURE__ */ jsx54(
                 AdvancedRow,
                 {
-                  connector: i === 0 ? "Where" : (logicOps[filter.id] ?? "and") === "and" ? "And" : "Or",
+                  connector: i === 0 ? "Where" : (filter.logicOperator ?? "and") === "and" ? "And" : "Or",
                   onConnectorToggle: i > 0 ? () => toggleLogicOp(filter.id) : void 0,
                   propertyDef: propDef,
                   condition: filter,
@@ -6709,28 +6881,64 @@ var AdvancedPopover = ({
                 filter.id
               );
             }),
-            filters.length === 0 && /* @__PURE__ */ jsx49("p", { className: "py-base text-sm text-[var(--color-muted-foreground)]", children: "No advanced filters yet." })
+            filters.length === 0 && /* ── Draft row: inline "Select property" placeholder ──── */
+            /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+              /* @__PURE__ */ jsx54("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx54("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
+              /* @__PURE__ */ jsx54(
+                PropertySelector,
+                {
+                  properties,
+                  onSelect: handleAddFilter,
+                  open: draftPickerOpen,
+                  onOpenChange: setDraftPickerOpen,
+                  children: /* @__PURE__ */ jsxs48(
+                    "button",
+                    {
+                      type: "button",
+                      className: cn(
+                        "flex items-center gap-base px-base py-sm min-w-0",
+                        "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
+                        "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+                        "cursor-pointer transition-colors",
+                        "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx54("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
+                        /* @__PURE__ */ jsx54(
+                          Icon31,
+                          {
+                            icon: faChevronDownOutline3,
+                            size: "xs",
+                            className: "shrink-0 text-[var(--color-foreground)]"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ] })
           ] }),
-          /* @__PURE__ */ jsxs44("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
-            /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
+            /* @__PURE__ */ jsx54(
               PropertySelector,
               {
                 properties,
                 onSelect: handleAddFilter,
                 open: addSelectorOpen,
                 onOpenChange: setAddSelectorOpen,
-                children: /* @__PURE__ */ jsxs44("button", { type: "button", className: cn(outlinedBtn), children: [
-                  /* @__PURE__ */ jsx49(Icon31, { icon: faPlusOutline2, size: "sm", className: "text-[var(--color-foreground)]" }),
+                children: /* @__PURE__ */ jsxs48("button", { type: "button", className: cn(outlinedBtn), children: [
+                  /* @__PURE__ */ jsx54(Icon31, { icon: faPlusOutline2, size: "sm", className: "text-[var(--color-foreground)]" }),
                   "Add filter"
                 ] })
               }
             ),
-            /* @__PURE__ */ jsx49(
+            /* @__PURE__ */ jsx54(
               "button",
               {
                 type: "button",
                 onClick: handleClearAll,
-                className: "text-sm font-medium leading-sm text-[var(--color-foreground)] cursor-pointer transition-colors hover:opacity-70 px-base py-sm",
+                className: "text-sm font-semibold leading-sm text-[var(--color-foreground)] cursor-pointer transition-colors hover:opacity-70 px-base py-sm",
                 children: "Clear all filters"
               }
             )
@@ -6745,19 +6953,28 @@ AdvancedPopover.displayName = "AdvancedPopover";
 // src/components/ui/filter/summary-chip.tsx
 import * as React47 from "react";
 import * as PopoverPrimitive11 from "@radix-ui/react-popover";
-import { Icon as Icon32, faSlidersOutline as faSlidersOutline2, faPlusOutline as faPlusOutline3 } from "@l3mpire/icons";
-import { jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Icon as Icon32, faSlidersOutline as faSlidersOutline2, faPlusOutline as faPlusOutline3, faChevronDownOutline as faChevronDownOutline4 } from "@l3mpire/icons";
+import { jsx as jsx55, jsxs as jsxs49 } from "react/jsx-runtime";
 var SummaryChip = ({
   count,
   filters,
   properties,
   onFiltersChange,
   onClearAll,
-  className
+  children,
+  className,
+  open: openProp,
+  onOpenChange
 }) => {
-  const [open, setOpen] = React47.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React47.useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const setOpen = (v) => {
+    if (!isControlled) setUncontrolledOpen(v);
+    onOpenChange?.(v);
+  };
   const [addSelectorOpen, setAddSelectorOpen] = React47.useState(false);
-  const [logicOps, setLogicOps] = React47.useState({});
+  const [draftPickerOpen, setDraftPickerOpen] = React47.useState(false);
   const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
   const handleUpdateFilter = (updated) => {
     onFiltersChange(filters.map((f) => f.id === updated.id ? updated : f));
@@ -6778,8 +6995,15 @@ var SummaryChip = ({
     onFiltersChange([...filters, newFilter]);
     setAddSelectorOpen(false);
   };
-  return /* @__PURE__ */ jsxs45(PopoverPrimitive11.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx50(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs45(
+  const toggleLogicOp = (filterId) => {
+    onFiltersChange(
+      filters.map(
+        (f) => f.id === filterId ? { ...f, logicOperator: (f.logicOperator ?? "and") === "and" ? "or" : "and" } : f
+      )
+    );
+  };
+  return /* @__PURE__ */ jsxs49(PopoverPrimitive11.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx55(PopoverPrimitive11.Trigger, { asChild: true, children: children ?? /* @__PURE__ */ jsxs49(
       "button",
       {
         type: "button",
@@ -6793,7 +7017,7 @@ var SummaryChip = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx55(
             Icon32,
             {
               icon: faSlidersOutline2,
@@ -6801,17 +7025,18 @@ var SummaryChip = ({
               className: "shrink-0 text-[var(--color-foreground)]"
             }
           ),
-          /* @__PURE__ */ jsx50("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
-          count > 0 && /* @__PURE__ */ jsx50("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx50("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+          /* @__PURE__ */ jsx55("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
+          count > 0 && /* @__PURE__ */ jsx55("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx55("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx50(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsxs45(
+    /* @__PURE__ */ jsx55(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsxs49(
       PopoverPrimitive11.Content,
       {
         sideOffset: 4,
         align: "start",
         collisionPadding: 16,
+        onOpenAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col overflow-clip",
           "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
@@ -6821,15 +7046,15 @@ var SummaryChip = ({
           "w-[min(520px,calc(100vw-32px))]"
         ),
         children: [
-          /* @__PURE__ */ jsxs45("div", { className: "flex flex-col gap-base p-base", children: [
+          /* @__PURE__ */ jsxs49("div", { className: "flex flex-col gap-base p-base", children: [
             filters.map((filter, i) => {
               const propDef = getPropertyDef(filter.propertyId);
               if (!propDef) return null;
-              return /* @__PURE__ */ jsx50(
+              return /* @__PURE__ */ jsx55(
                 AdvancedRow,
                 {
-                  connector: i === 0 ? "Where" : (logicOps[filter.id] ?? "and") === "and" ? "And" : "Or",
-                  onConnectorToggle: i > 0 ? () => setLogicOps((prev) => ({ ...prev, [filter.id]: (prev[filter.id] ?? "and") === "and" ? "or" : "and" })) : void 0,
+                  connector: i === 0 ? "Where" : (filter.logicOperator ?? "and") === "and" ? "And" : "Or",
+                  onConnectorToggle: i > 0 ? () => toggleLogicOp(filter.id) : void 0,
                   propertyDef: propDef,
                   condition: filter,
                   properties,
@@ -6840,17 +7065,53 @@ var SummaryChip = ({
                 filter.id
               );
             }),
-            filters.length === 0 && /* @__PURE__ */ jsx50("p", { className: "py-base text-sm text-[var(--color-muted-foreground)]", children: "No active filters." })
+            filters.length === 0 && /* ── Draft row: inline "Select property" placeholder ──── */
+            /* @__PURE__ */ jsxs49("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+              /* @__PURE__ */ jsx55("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx55("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
+              /* @__PURE__ */ jsx55(
+                PropertySelector,
+                {
+                  properties,
+                  onSelect: handleAddFilter,
+                  open: draftPickerOpen,
+                  onOpenChange: setDraftPickerOpen,
+                  children: /* @__PURE__ */ jsxs49(
+                    "button",
+                    {
+                      type: "button",
+                      className: cn(
+                        "flex items-center gap-base px-base py-sm min-w-0",
+                        "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
+                        "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+                        "cursor-pointer transition-colors",
+                        "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx55("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
+                        /* @__PURE__ */ jsx55(
+                          Icon32,
+                          {
+                            icon: faChevronDownOutline4,
+                            size: "xs",
+                            className: "shrink-0 text-[var(--color-foreground)]"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ] })
           ] }),
-          /* @__PURE__ */ jsxs45("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
-            /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsxs49("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
+            /* @__PURE__ */ jsx55(
               PropertySelector,
               {
                 properties,
                 onSelect: handleAddFilter,
                 open: addSelectorOpen,
                 onOpenChange: setAddSelectorOpen,
-                children: /* @__PURE__ */ jsxs45(
+                children: /* @__PURE__ */ jsxs49(
                   "button",
                   {
                     type: "button",
@@ -6859,18 +7120,18 @@ var SummaryChip = ({
                       "min-h-[32px] max-h-[32px] min-w-[80px]",
                       "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
                       "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
-                      "cursor-pointer transition-colors text-sm font-medium leading-sm text-[var(--color-foreground)]",
+                      "cursor-pointer transition-colors text-sm font-semibold leading-sm text-[var(--color-foreground)]",
                       "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx50(Icon32, { icon: faPlusOutline3, size: "sm", className: "text-[var(--color-foreground)]" }),
+                      /* @__PURE__ */ jsx55(Icon32, { icon: faPlusOutline3, size: "sm", className: "text-[var(--color-foreground)]" }),
                       "Add filter"
                     ]
                   }
                 )
               }
             ),
-            filters.length > 0 && /* @__PURE__ */ jsx50(
+            filters.length > 0 && /* @__PURE__ */ jsx55(
               "button",
               {
                 type: "button",
@@ -6878,7 +7139,7 @@ var SummaryChip = ({
                   onClearAll();
                   setOpen(false);
                 },
-                className: "text-sm font-medium leading-sm text-[var(--color-foreground)] cursor-pointer transition-colors hover:opacity-70 px-base py-sm",
+                className: "text-sm font-semibold leading-sm text-[var(--color-foreground)] cursor-pointer transition-colors hover:opacity-70 px-base py-sm",
                 children: "Clear all filters"
               }
             )
@@ -6892,7 +7153,8 @@ SummaryChip.displayName = "SummaryChip";
 
 // src/components/ui/filter/use-filter-bar-mode.ts
 import * as React48 from "react";
-function useFilterBarMode(ref, override) {
+var DEFAULT_BREAKPOINT = 600;
+function useFilterBarMode(ref, override, breakpoint = DEFAULT_BREAKPOINT) {
   const [mode, setMode] = React48.useState("default");
   React48.useEffect(() => {
     if (override) return;
@@ -6900,30 +7162,32 @@ function useFilterBarMode(ref, override) {
     if (!el) return;
     const observer = new ResizeObserver((entries) => {
       const width = entries[0]?.contentRect.width ?? 0;
-      setMode(width > 600 ? "default" : "minimal");
+      setMode(width > breakpoint ? "default" : "minimal");
     });
     observer.observe(el);
     return () => observer.disconnect();
-  }, [ref, override]);
+  }, [ref, override, breakpoint]);
   return override ?? mode;
 }
 
 // src/components/ui/filter/filter-system.tsx
-import { Fragment as Fragment4, jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx56, jsxs as jsxs50 } from "react/jsx-runtime";
 var FilterSystem = ({
   properties,
   filterState,
   onFilterStateChange,
   sortFields,
   mode: modeOverride,
+  breakpoint,
   children,
   actions,
   className
 }) => {
   const containerRef = React49.useRef(null);
-  const mode = useFilterBarMode(containerRef, modeOverride);
+  const mode = useFilterBarMode(containerRef, modeOverride, breakpoint);
   const [propertySelectorOpen, setPropertySelectorOpen] = React49.useState(false);
   const [advancedOpen, setAdvancedOpen] = React49.useState(false);
+  const [summaryOpen, setSummaryOpen] = React49.useState(false);
   const [pendingFilterId, setPendingFilterId] = React49.useState(null);
   const allFilters = [...filterState.basicFilters, ...filterState.advancedFilters];
   const totalCount = allFilters.length;
@@ -6999,10 +7263,23 @@ var FilterSystem = ({
   const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
   const hasAdvanced = filterState.advancedFilters.length > 0;
   const isMinimal = mode === "minimal";
-  return /* @__PURE__ */ jsxs46(FilterBar, { ref: containerRef, className, children: [
-    /* @__PURE__ */ jsxs46(FilterBarLeft, { children: [
+  const handleOpenAdvanced = () => {
+    setPropertySelectorOpen(false);
+    requestAnimationFrame(() => {
+      if (isMinimal) {
+        setSummaryOpen(true);
+      } else {
+        setAdvancedOpen(true);
+      }
+    });
+  };
+  const advancedFilterCount = filterState.advancedFilters.length;
+  const showAdvancedChip = hasAdvanced || advancedOpen;
+  const showSummaryChip = totalCount > 0 || summaryOpen;
+  return /* @__PURE__ */ jsxs50(FilterBar, { ref: containerRef, className, children: [
+    /* @__PURE__ */ jsxs50(FilterBarLeft, { className: "flex-nowrap flex-1 min-w-0 overflow-x-auto scrollbar-none outline-none [&>*]:shrink-0", children: [
       children,
-      sortFields && filterState.sort && /* @__PURE__ */ jsx51(
+      sortFields && filterState.sort && /* @__PURE__ */ jsx56(
         SortButton,
         {
           fields: sortFields,
@@ -7012,40 +7289,48 @@ var FilterSystem = ({
           iconOnly: isMinimal
         }
       ),
-      isMinimal ? totalCount > 0 ? (
-        /* Has filters → SummaryChip (interactive popover) */
-        /* @__PURE__ */ jsx51(
-          SummaryChip,
+      isMinimal ? /* @__PURE__ */ jsxs50(Fragment5, { children: [
+        /* @__PURE__ */ jsx56(
+          "div",
           {
-            count: totalCount,
-            filters: allFilters,
-            properties,
-            onFiltersChange: (filters) => {
-              onFilterStateChange({
-                ...filterState,
-                basicFilters: filters,
-                advancedFilters: []
-              });
-            },
-            onClearAll: handleClearAll
+            className: showSummaryChip ? "inline-flex" : "inline-flex w-0 overflow-hidden opacity-0 pointer-events-none",
+            "aria-hidden": !showSummaryChip || void 0,
+            children: /* @__PURE__ */ jsx56(
+              SummaryChip,
+              {
+                count: totalCount,
+                filters: allFilters,
+                properties,
+                onFiltersChange: (filters) => {
+                  onFilterStateChange({
+                    ...filterState,
+                    basicFilters: filters,
+                    advancedFilters: []
+                  });
+                },
+                onClearAll: handleClearAll,
+                open: summaryOpen,
+                onOpenChange: setSummaryOpen
+              }
+            )
           }
-        )
-      ) : (
-        /* No filters → same FilterBarButton as default, icon-only */
-        /* @__PURE__ */ jsx51(
+        ),
+        !showSummaryChip && /* @__PURE__ */ jsx56(
           PropertySelector,
           {
             properties,
             onSelect: handleAddFilter,
             open: propertySelectorOpen,
             onOpenChange: setPropertySelectorOpen,
-            children: /* @__PURE__ */ jsx51(FilterBarButton, { iconOnly: true })
+            onAdvancedFilter: handleOpenAdvanced,
+            advancedFilterCount,
+            children: /* @__PURE__ */ jsx56(FilterBarButton, { iconOnly: true })
           }
         )
-      ) : (
+      ] }) : (
         /* ── DEFAULT MODE ────────────────────────────────────── */
-        /* @__PURE__ */ jsxs46(Fragment4, { children: [
-          hasAdvanced && /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsxs50(Fragment5, { children: [
+          /* @__PURE__ */ jsx56(
             AdvancedPopover,
             {
               filters: filterState.advancedFilters,
@@ -7053,12 +7338,19 @@ var FilterSystem = ({
               onFiltersChange: handleAdvancedFiltersChange,
               open: advancedOpen,
               onOpenChange: setAdvancedOpen,
-              children: /* @__PURE__ */ jsx51(
-                AdvancedChip,
+              children: /* @__PURE__ */ jsx56(
+                "div",
                 {
-                  count: filterState.advancedFilters.length,
-                  onClick: () => setAdvancedOpen(true),
-                  onClear: handleClearAdvanced
+                  className: showAdvancedChip ? "inline-flex" : "inline-flex w-0 overflow-hidden opacity-0 pointer-events-none",
+                  "aria-hidden": !showAdvancedChip || void 0,
+                  children: /* @__PURE__ */ jsx56(
+                    AdvancedChip,
+                    {
+                      count: filterState.advancedFilters.length,
+                      onClick: () => setAdvancedOpen(true),
+                      onClear: handleClearAdvanced
+                    }
+                  )
                 }
               )
             }
@@ -7066,7 +7358,7 @@ var FilterSystem = ({
           filterState.basicFilters.map((filter) => {
             const propDef = getPropertyDef(filter.propertyId);
             if (!propDef) return null;
-            return /* @__PURE__ */ jsx51(
+            return /* @__PURE__ */ jsx56(
               InteractiveFilterChip,
               {
                 propertyDef: propDef,
@@ -7082,34 +7374,38 @@ var FilterSystem = ({
               filter.id
             );
           }),
-          /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsx56(
             PropertySelector,
             {
               properties,
               onSelect: handleAddFilter,
               open: propertySelectorOpen,
               onOpenChange: setPropertySelectorOpen,
-              children: /* @__PURE__ */ jsx51(
-                FilterBarButton,
+              onAdvancedFilter: handleOpenAdvanced,
+              advancedFilterCount,
+              children: totalCount > 0 ? /* @__PURE__ */ jsx56(
+                "button",
                 {
-                  count: totalCount || void 0
+                  type: "button",
+                  className: "shrink-0 inline-flex items-center justify-center size-8 rounded-md border border-[var(--color-btn-outlined-neutral-border-default)] bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)] shadow-sm cursor-pointer transition-colors hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
+                  children: /* @__PURE__ */ jsx56(Icon33, { icon: faPlusOutline4, size: "sm", className: "text-[var(--color-foreground)]" })
                 }
-              )
+              ) : /* @__PURE__ */ jsx56(FilterBarButton, {})
             }
           )
         ] })
       ),
-      totalCount > 0 && /* @__PURE__ */ jsx51(
+      totalCount > 0 && /* @__PURE__ */ jsx56(
         "button",
         {
           type: "button",
           onClick: handleClearAll,
-          className: "flex items-center gap-sm px-base py-sm min-h-[32px] max-h-[32px] rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
-          children: isMinimal ? /* @__PURE__ */ jsx51(Icon33, { icon: faXmarkOutline4, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ jsx51("span", { className: "text-sm font-medium leading-sm text-[var(--color-foreground)]", children: "Clear" })
+          className: "shrink-0 flex items-center gap-sm px-base py-sm min-h-[32px] max-h-[32px] rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
+          children: isMinimal ? /* @__PURE__ */ jsx56(Icon33, { icon: faXmarkOutline4, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ jsx56("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: "Clear" })
         }
       )
     ] }),
-    actions && /* @__PURE__ */ jsx51(FilterBarRight, { children: actions })
+    actions && /* @__PURE__ */ jsx56(FilterBarRight, { className: "shrink-0 -ml-2xl pl-2xl relative z-10 bg-[linear-gradient(to_right,transparent_0px,var(--filter-bar-bg,var(--color-background,#fff))_24px)]", children: actions })
   ] });
 };
 FilterSystem.displayName = "FilterSystem";
@@ -7124,7 +7420,7 @@ import {
   faArrowRightOutline as faArrowRightOutline2,
   faCalendarOutline
 } from "@l3mpire/icons";
-import { jsx as jsx52, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
 function getDaysInMonth(year, month) {
   return new Date(year, month + 1, 0).getDate();
 }
@@ -7255,7 +7551,7 @@ var DatePicker = React50.forwardRef(
         hoveredDate
       ]
     );
-    return /* @__PURE__ */ jsx52(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx52(
+    return /* @__PURE__ */ jsx57(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx57(
       "div",
       {
         ref,
@@ -7282,18 +7578,18 @@ var DatePickerSelects = React50.forwardRef(({ className, formatDate = defaultFor
   const { selected } = useDatePickerContext();
   const fromDate = selected instanceof Date ? selected : selected?.from;
   const toDate = selected instanceof Date ? void 0 : selected?.to;
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx57(
     "div",
     {
       ref,
       className: cn("flex flex-col items-start pt-lg px-lg", className),
       ...props,
-      children: /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-base w-full", children: [
-        /* @__PURE__ */ jsxs47("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
-          /* @__PURE__ */ jsx52("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
-          /* @__PURE__ */ jsx52(Icon34, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+      children: /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-base w-full", children: [
+        /* @__PURE__ */ jsxs51("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
+          /* @__PURE__ */ jsx57("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
+          /* @__PURE__ */ jsx57(Icon34, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] }),
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx57(
           Icon34,
           {
             icon: faArrowRightOutline2,
@@ -7301,9 +7597,9 @@ var DatePickerSelects = React50.forwardRef(({ className, formatDate = defaultFor
             className: "shrink-0 text-datepicker-header-weekday"
           }
         ),
-        /* @__PURE__ */ jsxs47("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
-          /* @__PURE__ */ jsx52("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
-          /* @__PURE__ */ jsx52(Icon34, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+        /* @__PURE__ */ jsxs51("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
+          /* @__PURE__ */ jsx57("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
+          /* @__PURE__ */ jsx57(Icon34, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] })
       ] })
     }
@@ -7319,7 +7615,7 @@ var DatePickerDay = ({ date, isOutside }) => {
   const inRange = mode === "range" && selected && !(selected instanceof Date) && selected.from && selected.to && !isSelected && isInRange(date, selected.from, selected.to);
   const inPreviewRange = mode === "range" && selected && !(selected instanceof Date) && selected.from && !selected.to && hoveredDate && !isSelected && hoveredDate.getTime() > selected.from.getTime() && isInRange(date, selected.from, hoveredDate);
   const isInRangeOrPreview = inRange || inPreviewRange;
-  return /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsxs51(
     "button",
     {
       type: "button",
@@ -7329,7 +7625,7 @@ var DatePickerDay = ({ date, isOutside }) => {
       disabled: isOutside,
       className: cn(
         "relative flex flex-col items-center justify-center w-9 rounded-full p-2 cursor-pointer transition-colors",
-        "text-sm font-medium leading-sm text-center",
+        "text-sm font-semibold leading-sm text-center",
         // Default
         !isOutside && !isSelected && !isInRangeOrPreview && "text-datepicker-day-text-default hover:bg-datepicker-day-bg-hover",
         // Outside month (disabled)
@@ -7343,7 +7639,7 @@ var DatePickerDay = ({ date, isOutside }) => {
       ),
       children: [
         date.getDate(),
-        isToday && !isOutside && /* @__PURE__ */ jsx52("span", { className: "absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1.5 rounded-full bg-datepicker-day-today" })
+        isToday && !isOutside && /* @__PURE__ */ jsx57("span", { className: "absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1.5 rounded-full bg-datepicker-day-today" })
       ]
     }
   );
@@ -7390,7 +7686,7 @@ var DatePickerCalendar = React50.forwardRef(({ className, header, ...props }, re
     }
     return result;
   }, [month, year]);
-  return /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsxs51(
     "div",
     {
       ref,
@@ -7398,38 +7694,38 @@ var DatePickerCalendar = React50.forwardRef(({ className, header, ...props }, re
       ...props,
       children: [
         header,
-        /* @__PURE__ */ jsxs47("div", { className: "flex flex-col gap-lg p-lg", children: [
-          /* @__PURE__ */ jsxs47("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs47("span", { className: "text-base font-medium leading-base text-datepicker-header-text", children: [
+        /* @__PURE__ */ jsxs51("div", { className: "flex flex-col gap-lg p-lg", children: [
+          /* @__PURE__ */ jsxs51("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs51("span", { className: "text-base font-semibold leading-base text-datepicker-header-text", children: [
               MONTH_NAMES[month],
               " ",
               year
             ] }),
-            /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-xs", children: [
-              /* @__PURE__ */ jsx52(
+            /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-xs", children: [
+              /* @__PURE__ */ jsx57(
                 "button",
                 {
                   type: "button",
                   onClick: goToPrevMonth,
                   className: "flex items-center justify-center p-xs rounded-base hover:bg-datepicker-day-bg-hover transition-colors cursor-pointer",
                   "aria-label": "Previous month",
-                  children: /* @__PURE__ */ jsx52(Icon34, { icon: faChevronLeftOutline3, size: "xs", className: "text-datepicker-header-nav" })
+                  children: /* @__PURE__ */ jsx57(Icon34, { icon: faChevronLeftOutline3, size: "xs", className: "text-datepicker-header-nav" })
                 }
               ),
-              /* @__PURE__ */ jsx52(
+              /* @__PURE__ */ jsx57(
                 "button",
                 {
                   type: "button",
                   onClick: goToNextMonth,
                   className: "flex items-center justify-center p-xs rounded-base hover:bg-datepicker-day-bg-hover transition-colors cursor-pointer",
                   "aria-label": "Next month",
-                  children: /* @__PURE__ */ jsx52(Icon34, { icon: faChevronRightOutline3, size: "xs", className: "text-datepicker-header-nav" })
+                  children: /* @__PURE__ */ jsx57(Icon34, { icon: faChevronRightOutline3, size: "xs", className: "text-datepicker-header-nav" })
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs47("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx52("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsxs51("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx57("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx57(
               "span",
               {
                 className: "w-9 text-center text-xs font-regular leading-xs text-datepicker-header-weekday",
@@ -7437,7 +7733,7 @@ var DatePickerCalendar = React50.forwardRef(({ className, header, ...props }, re
               },
               day
             )) }),
-            /* @__PURE__ */ jsx52("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ jsx52("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ jsx52(
+            /* @__PURE__ */ jsx57("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ jsx57("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ jsx57(
               DatePickerDay,
               {
                 date: day.date,
@@ -7477,7 +7773,7 @@ var DatePickerSuggestions = React50.forwardRef(
       const to = val.to ? formatDate(val.to) : "";
       return to ? `${from} - ${to}` : from;
     };
-    return /* @__PURE__ */ jsxs47(
+    return /* @__PURE__ */ jsxs51(
       "div",
       {
         ref,
@@ -7487,16 +7783,16 @@ var DatePickerSuggestions = React50.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx52("div", { className: "pt-lg px-base", children: /* @__PURE__ */ jsx52("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ jsx52("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
-          /* @__PURE__ */ jsx52("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ jsxs47(
+          /* @__PURE__ */ jsx57("div", { className: "pt-lg px-base", children: /* @__PURE__ */ jsx57("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ jsx57("span", { className: "flex-1 text-xs font-semibold leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
+          /* @__PURE__ */ jsx57("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ jsxs51(
             "button",
             {
               type: "button",
               onClick: () => handleClick(suggestion),
               className: "flex items-center gap-sm p-base rounded-base hover:bg-datepicker-suggestion-hover transition-colors cursor-pointer text-left",
               children: [
-                /* @__PURE__ */ jsx52("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
-                /* @__PURE__ */ jsx52("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
+                /* @__PURE__ */ jsx57("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
+                /* @__PURE__ */ jsx57("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
               ]
             },
             i
@@ -7508,7 +7804,7 @@ var DatePickerSuggestions = React50.forwardRef(
 );
 DatePickerSuggestions.displayName = "DatePickerSuggestions";
 var DatePickerFooter = React50.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx52(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx57(
     "div",
     {
       ref,
@@ -7525,7 +7821,7 @@ var DatePickerFooter = React50.forwardRef(
 );
 DatePickerFooter.displayName = "DatePickerFooter";
 var DatePickerPanel = React50.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx52(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx57(
     "div",
     {
       ref,
@@ -7538,7 +7834,7 @@ var DatePickerPanel = React50.forwardRef(
 DatePickerPanel.displayName = "DatePickerPanel";
 var DatePickerRoot = PopoverPrimitive12.Root;
 var DatePickerTrigger = PopoverPrimitive12.Trigger;
-var DatePickerPopover = React50.forwardRef(({ className, sideOffset = 4, align = "start", children, ...props }, ref) => /* @__PURE__ */ jsx52(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ jsx52(
+var DatePickerPopover = React50.forwardRef(({ className, sideOffset = 4, align = "start", children, ...props }, ref) => /* @__PURE__ */ jsx57(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ jsx57(
   PopoverPrimitive12.Content,
   {
     ref,