@l3mpire/ui 2.13.0 → 2.14.0

package/dist/index.mjs

@@ -5072,6 +5072,130 @@ function getValueInputType(type, operator) {
     return ["is any of", "is none of"].includes(operator) ? "MultiRelationPicker" : "RelationPicker";
   return null;
 }
+function formatFilterValue(value) {
+  if (value == null) return void 0;
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (value instanceof Date) {
+    return value.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) return void 0;
+    if (value.length === 2 && typeof value[0] === "number") {
+      return `${value[0]} \u2013 ${value[1]}`;
+    }
+    if (value.length === 2 && value[0] instanceof Date) {
+      const fmt = (d) => d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+      return `${fmt(value[0])} \u2013 ${value[1] instanceof Date ? fmt(value[1]) : "\u2026"}`;
+    }
+    return String(value[0]);
+  }
+  return String(value);
+}
+function getBadgeCount(value) {
+  if (Array.isArray(value) && value.length > 1 && typeof value[0] === "string") {
+    return value.length;
+  }
+  return void 0;
+}
+function isFilterGroup(node) {
+  return node.type === "group";
+}
+function createEmptyGroup() {
+  return {
+    id: crypto.randomUUID(),
+    type: "group",
+    children: []
+  };
+}
+function duplicateNode(node) {
+  if (isFilterGroup(node)) {
+    return {
+      ...node,
+      id: crypto.randomUUID(),
+      children: node.children.map(duplicateNode)
+    };
+  }
+  return { ...node, id: crypto.randomUUID() };
+}
+function wrapInGroup(condition) {
+  return {
+    id: crypto.randomUUID(),
+    type: "group",
+    logicOperator: condition.logicOperator,
+    children: [{ ...condition, logicOperator: void 0 }]
+  };
+}
+function unwrapGroup(group) {
+  const first = group.children.find((c) => !isFilterGroup(c));
+  if (!first) return null;
+  return { ...first, logicOperator: group.logicOperator };
+}
+function updateNodeInTree(nodes, id, updater) {
+  return nodes.map((node) => {
+    if (node.id === id) return updater(node);
+    if (isFilterGroup(node)) {
+      const updated = updateNodeInTree(node.children, id, updater);
+      if (updated !== node.children) return { ...node, children: updated };
+    }
+    return node;
+  });
+}
+function removeNodeFromTree(nodes, id) {
+  const result = [];
+  for (const node of nodes) {
+    if (node.id === id) continue;
+    if (isFilterGroup(node)) {
+      const updated = removeNodeFromTree(node.children, id);
+      result.push(updated !== node.children ? { ...node, children: updated } : node);
+    } else {
+      result.push(node);
+    }
+  }
+  return result;
+}
+function insertAfterInTree(nodes, afterId, newNode) {
+  const result = [];
+  let inserted = false;
+  for (const node of nodes) {
+    result.push(node);
+    if (node.id === afterId) {
+      result.push(newNode);
+      inserted = true;
+    } else if (!inserted && isFilterGroup(node)) {
+      const updated = insertAfterInTree(node.children, afterId, newNode);
+      if (updated.length !== node.children.length) {
+        result[result.length - 1] = { ...node, children: updated };
+        inserted = true;
+      }
+    }
+  }
+  return result;
+}
+function replaceNodeInTree(nodes, id, replacement) {
+  return nodes.map((node) => {
+    if (node.id === id) return replacement;
+    if (isFilterGroup(node)) {
+      const updated = replaceNodeInTree(node.children, id, replacement);
+      if (updated !== node.children) return { ...node, children: updated };
+    }
+    return node;
+  });
+}
+function countConditions(nodes) {
+  let count = 0;
+  for (const node of nodes) {
+    if (isFilterGroup(node)) {
+      count += countConditions(node.children);
+    } else {
+      count++;
+    }
+  }
+  return count;
+}
 
 // src/components/ui/filter/filter-bar.tsx
 import * as React37 from "react";
@@ -6961,35 +7085,6 @@ FilterEditor.displayName = "FilterEditor";
 import * as React45 from "react";
 import * as PopoverPrimitive9 from "@radix-ui/react-popover";
 import { jsx as jsx52, jsxs as jsxs46 } from "react/jsx-runtime";
-function formatFilterValue(value) {
-  if (value == null) return void 0;
-  if (typeof value === "boolean") return value ? "Yes" : "No";
-  if (value instanceof Date) {
-    return value.toLocaleDateString("en-US", {
-      month: "short",
-      day: "numeric",
-      year: "numeric"
-    });
-  }
-  if (Array.isArray(value)) {
-    if (value.length === 0) return void 0;
-    if (value.length === 2 && typeof value[0] === "number") {
-      return `${value[0]} \u2013 ${value[1]}`;
-    }
-    if (value.length === 2 && value[0] instanceof Date) {
-      const fmt = (d) => d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
-      return `${fmt(value[0])} \u2013 ${value[1] instanceof Date ? fmt(value[1]) : "\u2026"}`;
-    }
-    return String(value[0]);
-  }
-  return String(value);
-}
-function getBadgeCount(value) {
-  if (Array.isArray(value) && value.length > 1 && typeof value[0] === "string") {
-    return value.length;
-  }
-  return void 0;
-}
 var SegmentPopover = ({
   open,
   onOpenChange,
@@ -7201,8 +7296,8 @@ var InteractiveFilterChip = ({
 InteractiveFilterChip.displayName = "InteractiveFilterChip";
 
 // src/components/ui/filter/filter-system.tsx
-import * as React51 from "react";
-import { Icon as Icon35, faXmarkOutline as faXmarkOutline4, faPlusOutline as faPlusOutline4 } from "@l3mpire/icons";
+import * as React53 from "react";
+import { Icon as Icon37, faXmarkOutline as faXmarkOutline5, faPlusOutline as faPlusOutline5 } from "@l3mpire/icons";
 
 // src/components/ui/filter/advanced-chip.tsx
 import * as React46 from "react";
@@ -7258,15 +7353,128 @@ var AdvancedChip = React46.forwardRef(
 AdvancedChip.displayName = "AdvancedChip";
 
 // src/components/ui/filter/advanced-popover.tsx
+import * as React50 from "react";
+import * as PopoverPrimitive12 from "@radix-ui/react-popover";
+import { Icon as Icon35, faPlusOutline as faPlusOutline3, faChevronDownOutline as faChevronDownOutline3, faXmarkOutline as faXmarkOutline3 } from "@l3mpire/icons";
+
+// src/components/ui/filter/advanced-row.tsx
 import * as React48 from "react";
 import * as PopoverPrimitive11 from "@radix-ui/react-popover";
-import { Icon as Icon33, faPlusOutline as faPlusOutline2, faChevronDownOutline as faChevronDownOutline3 } from "@l3mpire/icons";
+import { Icon as Icon33, faRefreshOutline, faChevronDownOutline as faChevronDownOutline2 } from "@l3mpire/icons";
 
-// src/components/ui/filter/advanced-row.tsx
+// src/components/ui/filter/filter-node-actions.tsx
 import * as React47 from "react";
 import * as PopoverPrimitive10 from "@radix-ui/react-popover";
-import { Icon as Icon32, faXmarkOutline as faXmarkOutline3, faRefreshOutline, faChevronDownOutline as faChevronDownOutline2 } from "@l3mpire/icons";
+import {
+  Icon as Icon32,
+  faEllipsisOutline,
+  faCopyOutline,
+  faTrashOutline as faTrashOutline2,
+  faFolderOutline,
+  faFilterOutline as faFilterOutline3
+} from "@l3mpire/icons";
 import { jsx as jsx54, jsxs as jsxs48 } from "react/jsx-runtime";
+var FilterNodeActions = ({
+  nodeType,
+  onDuplicate,
+  onConvert,
+  onDelete
+}) => {
+  const [open, setOpen] = React47.useState(false);
+  const items = [
+    {
+      label: "Duplicate",
+      icon: faCopyOutline,
+      action: onDuplicate
+    },
+    {
+      label: nodeType === "condition" ? "Turn into group" : "Turn into filter",
+      icon: nodeType === "condition" ? faFolderOutline : faFilterOutline3,
+      action: onConvert
+    },
+    {
+      label: "Delete",
+      icon: faTrashOutline2,
+      action: onDelete,
+      destructive: true
+    }
+  ];
+  return /* @__PURE__ */ jsxs48(PopoverPrimitive10.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx54(PopoverPrimitive10.Trigger, { asChild: true, children: /* @__PURE__ */ jsx54(
+      "button",
+      {
+        type: "button",
+        className: "shrink-0 flex items-center justify-center p-sm rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
+        "aria-label": "More actions",
+        children: /* @__PURE__ */ jsx54(
+          Icon32,
+          {
+            icon: faEllipsisOutline,
+            size: "sm",
+            className: "text-[var(--color-foreground)]"
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx54(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ jsx54(
+      PopoverPrimitive10.Content,
+      {
+        sideOffset: 4,
+        align: "end",
+        className: cn(
+          "z-50 flex flex-col p-xs overflow-clip",
+          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "min-w-[180px]"
+        ),
+        children: items.map((item) => /* @__PURE__ */ jsxs48(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              item.action();
+              setOpen(false);
+            },
+            className: cn(
+              "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
+              "hover:bg-[var(--color-dropdown-item-hover)]",
+              item.destructive && "text-[var(--color-destructive,#ef4444)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx54(
+                Icon32,
+                {
+                  icon: item.icon,
+                  size: "sm",
+                  className: cn(
+                    "shrink-0",
+                    item.destructive ? "text-[var(--color-destructive,#ef4444)]" : "text-[var(--color-dropdown-item-icon)]"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx54(
+                "span",
+                {
+                  className: cn(
+                    "text-sm font-regular leading-sm",
+                    item.destructive ? "text-[var(--color-destructive,#ef4444)]" : "text-[var(--color-dropdown-item-text)]"
+                  ),
+                  children: item.label
+                }
+              )
+            ]
+          },
+          item.label
+        ))
+      }
+    ) })
+  ] });
+};
+FilterNodeActions.displayName = "FilterNodeActions";
+
+// src/components/ui/filter/advanced-row.tsx
+import { jsx as jsx55, jsxs as jsxs49 } from "react/jsx-runtime";
 var selectBtnStyle = [
   "flex items-center gap-base",
   "px-base py-sm",
@@ -7283,10 +7491,13 @@ var AdvancedRow = ({
   properties,
   onUpdate,
   onPropertyChange,
-  onDelete
+  onDelete,
+  onDuplicate,
+  onTurnIntoGroup
 }) => {
-  const [operatorOpen, setOperatorOpen] = React47.useState(false);
-  const [propertyOpen, setPropertyOpen] = React47.useState(false);
+  const [operatorOpen, setOperatorOpen] = React48.useState(false);
+  const [propertyOpen, setPropertyOpen] = React48.useState(false);
+  const [valueOpen, setValueOpen] = React48.useState(false);
   const handleOperatorSelect = (op) => {
     if (isNoValueOperator(op)) {
       onUpdate({ ...condition, operator: op, value: null });
@@ -7299,16 +7510,18 @@ var AdvancedRow = ({
   const handleValueChange = (val) => {
     onUpdate({ ...condition, value: val });
   };
-  const displayValue = condition.value == null ? "" : typeof condition.value === "string" ? condition.value : String(condition.value);
-  return /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    connector === "Where" ? /* @__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__ */ jsxs48(
+  const displayValue = formatFilterValue(condition.value);
+  const badgeCount = getBadgeCount(condition.value);
+  const hasValue = displayValue != null;
+  return /* @__PURE__ */ jsxs49("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+    connector === "Where" ? /* @__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__ */ jsxs49(
       "button",
       {
         type: "button",
         onClick: onConnectorToggle,
         className: cn(
           "shrink-0 flex items-center justify-center gap-xs",
-          "min-w-[64px] min-h-[24px] max-h-[24px] p-xs",
+          "min-w-[64px] min-h-[32px] max-h-[32px] px-base py-sm",
           "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-semibold leading-xs text-[var(--color-foreground)]",
@@ -7316,22 +7529,18 @@ var AdvancedRow = ({
         ),
         children: [
           connector,
-          /* @__PURE__ */ jsx54(Icon32, { icon: faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
+          /* @__PURE__ */ jsx55(Icon33, { icon: faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs48(PopoverPrimitive10.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
-      /* @__PURE__ */ jsx54(PopoverPrimitive10.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs48("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ jsx54(Icon32, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
-        /* @__PURE__ */ jsxs48("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate", children: [
-          propertyDef.groupLabel,
-          " > ",
-          propertyDef.label
-        ] }),
-        /* @__PURE__ */ jsx54(Icon32, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+    /* @__PURE__ */ jsxs49(PopoverPrimitive11.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
+      /* @__PURE__ */ jsx55(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs49("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
+        /* @__PURE__ */ jsx55(Icon33, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
+        /* @__PURE__ */ jsx55("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate", children: propertyDef.label }),
+        /* @__PURE__ */ jsx55(Icon33, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
       ] }) }),
-      /* @__PURE__ */ jsx54(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ jsx54(
-        PopoverPrimitive10.Content,
+      /* @__PURE__ */ jsx55(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsx55(
+        PopoverPrimitive11.Content,
         {
           sideOffset: 4,
           align: "start",
@@ -7342,7 +7551,7 @@ var AdvancedRow = ({
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[200px]"
           ),
-          children: properties.map((p) => /* @__PURE__ */ jsxs48(
+          children: properties.map((p) => /* @__PURE__ */ jsxs49(
             "button",
             {
               type: "button",
@@ -7356,8 +7565,8 @@ var AdvancedRow = ({
                 p.id === condition.propertyId && "bg-[var(--color-dropdown-item-hover)]"
               ),
               children: [
-                /* @__PURE__ */ jsx54(Icon32, { icon: p.icon, size: "sm", className: "shrink-0 text-[var(--color-dropdown-item-icon)]" }),
-                /* @__PURE__ */ jsx54("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] truncate", children: p.label })
+                /* @__PURE__ */ jsx55(Icon33, { icon: p.icon, size: "sm", className: "shrink-0 text-[var(--color-dropdown-item-icon)]" }),
+                /* @__PURE__ */ jsx55("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] truncate", children: p.label })
               ]
             },
             p.id
@@ -7365,13 +7574,13 @@ var AdvancedRow = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs48(PopoverPrimitive10.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
-      /* @__PURE__ */ jsx54(PopoverPrimitive10.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs48("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ jsx54("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
-        /* @__PURE__ */ jsx54(Icon32, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+    /* @__PURE__ */ jsxs49(PopoverPrimitive11.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
+      /* @__PURE__ */ jsx55(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs49("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
+        /* @__PURE__ */ jsx55("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
+        /* @__PURE__ */ jsx55(Icon33, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
       ] }) }),
-      /* @__PURE__ */ jsx54(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ jsx54(
-        PopoverPrimitive10.Content,
+      /* @__PURE__ */ jsx55(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsx55(
+        PopoverPrimitive11.Content,
         {
           sideOffset: 4,
           align: "start",
@@ -7382,7 +7591,7 @@ var AdvancedRow = ({
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[160px]"
           ),
-          children: /* @__PURE__ */ jsx54(
+          children: /* @__PURE__ */ jsx55(
             OperatorList,
             {
               dataType: propertyDef.type,
@@ -7393,45 +7602,167 @@ var AdvancedRow = ({
         }
       ) })
     ] }),
-    condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ jsx54(
-      "input",
+    condition.operator && !isNoValueOperator(condition.operator) && (() => {
+      const inputType = getValueInputType(propertyDef.type, condition.operator);
+      const dateWide = inputType === "DatePicker" || inputType === "DateRange";
+      return /* @__PURE__ */ jsxs49(PopoverPrimitive11.Root, { open: valueOpen, onOpenChange: setValueOpen, children: [
+        /* @__PURE__ */ jsx55(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs49(
+          "button",
+          {
+            type: "button",
+            className: cn(selectBtnStyle, "flex-1 min-w-[80px] justify-between"),
+            children: [
+              /* @__PURE__ */ jsx55(
+                "span",
+                {
+                  className: cn(
+                    "text-sm font-regular leading-sm whitespace-nowrap truncate text-left",
+                    hasValue ? "text-[var(--color-foreground)]" : "text-[var(--color-muted-foreground)]"
+                  ),
+                  children: hasValue ? displayValue : "Enter a value"
+                }
+              ),
+              /* @__PURE__ */ jsxs49("span", { className: "flex items-center gap-xs shrink-0", children: [
+                badgeCount != null && /* @__PURE__ */ jsxs49("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: [
+                  "+",
+                  badgeCount - 1
+                ] }),
+                /* @__PURE__ */ jsx55(
+                  Icon33,
+                  {
+                    icon: faChevronDownOutline2,
+                    size: "xs",
+                    className: "text-[var(--color-foreground)]"
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx55(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsx55(
+          PopoverPrimitive11.Content,
+          {
+            sideOffset: 4,
+            align: "start",
+            className: cn(
+              "z-50 flex flex-col overflow-clip",
+              "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+              "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+              "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
+            ),
+            style: { minWidth: dateWide ? "auto" : "240px" },
+            children: /* @__PURE__ */ jsx55(
+              ValueInput,
+              {
+                dataType: propertyDef.type,
+                operator: condition.operator,
+                value: condition.value,
+                onChange: handleValueChange,
+                onSubmit: () => setValueOpen(false),
+                options: propertyDef.options,
+                dynamicOptions: propertyDef.dynamicOptions
+              }
+            )
+          }
+        ) })
+      ] });
+    })(),
+    /* @__PURE__ */ jsx55(
+      FilterNodeActions,
       {
-        type: "text",
-        value: displayValue,
-        onChange: (e) => handleValueChange(e.target.value),
-        placeholder: "Placeholder",
-        className: cn(
-          "flex-1 min-w-[80px] px-base py-sm rounded-md",
-          "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"
-        )
+        nodeType: "condition",
+        onDuplicate: onDuplicate ?? (() => {
+        }),
+        onConvert: onTurnIntoGroup ?? (() => {
+        }),
+        onDelete
       }
-    ),
-    /* @__PURE__ */ jsx54(
+    )
+  ] });
+};
+AdvancedRow.displayName = "AdvancedRow";
+
+// src/components/ui/filter/advanced-group.tsx
+import * as React49 from "react";
+import { Icon as Icon34, faRefreshOutline as faRefreshOutline2, faPlusOutline as faPlusOutline2 } from "@l3mpire/icons";
+import { jsx as jsx56, jsxs as jsxs50 } from "react/jsx-runtime";
+var AdvancedGroup = ({
+  connector,
+  onConnectorToggle,
+  onDuplicate,
+  onTurnIntoFilter,
+  onDelete,
+  onAddFilter,
+  properties,
+  children
+}) => {
+  const [addOpen, setAddOpen] = React49.useState(false);
+  return /* @__PURE__ */ jsxs50("div", { className: "flex items-start gap-base w-full min-w-0", children: [
+    connector === "Where" ? /* @__PURE__ */ jsx56("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ jsx56("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ jsx56("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ jsxs50(
       "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__ */ jsx54(Icon32, { icon: faXmarkOutline3, size: "sm", className: "text-[var(--color-foreground)]" })
+        onClick: onConnectorToggle,
+        className: cn(
+          "flex items-center justify-center gap-xs",
+          "min-w-[64px] min-h-[32px] max-h-[32px] px-base py-sm",
+          "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-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__ */ jsx56(Icon34, { icon: faRefreshOutline2, size: "xs", className: "text-[var(--color-foreground)]" })
+        ]
       }
-    )
+    ) }),
+    /* @__PURE__ */ jsxs50("div", { className: "flex-1 min-w-0 flex flex-col gap-base p-base border border-[var(--color-border)] rounded-md bg-[var(--color-secondary,var(--color-accent))]", children: [
+      children,
+      onAddFilter && properties && /* @__PURE__ */ jsx56(
+        PropertySelector,
+        {
+          properties,
+          onSelect: (prop) => {
+            onAddFilter(prop);
+            setAddOpen(false);
+          },
+          open: addOpen,
+          onOpenChange: setAddOpen,
+          children: /* @__PURE__ */ jsxs50(
+            "button",
+            {
+              type: "button",
+              className: "flex items-center gap-sm px-base py-sm text-sm font-semibold leading-sm text-[var(--color-muted-foreground)] cursor-pointer transition-colors rounded-md hover:bg-[var(--color-accent)] hover:text-[var(--color-foreground)] w-fit",
+              children: [
+                /* @__PURE__ */ jsx56(Icon34, { icon: faPlusOutline2, size: "sm" }),
+                "Add filter"
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx56("div", { className: "shrink-0 pt-base", children: /* @__PURE__ */ jsx56(
+      FilterNodeActions,
+      {
+        nodeType: "group",
+        onDuplicate,
+        onConvert: onTurnIntoFilter,
+        onDelete
+      }
+    ) })
   ] });
 };
-AdvancedRow.displayName = "AdvancedRow";
+AdvancedGroup.displayName = "AdvancedGroup";
 
 // src/components/ui/filter/advanced-popover.tsx
-import { jsx as jsx55, jsxs as jsxs49 } from "react/jsx-runtime";
-var outlinedBtn = [
+import { jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
+var ghostBtn = [
   "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-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)]"
+  "min-h-[32px]",
+  "cursor-pointer transition-colors text-sm font-semibold leading-sm",
+  "rounded-md hover:bg-[var(--color-accent)]"
 ];
 var AdvancedPopover = ({
   filters,
@@ -7441,41 +7772,156 @@ var AdvancedPopover = ({
   onOpenChange,
   children
 }) => {
-  const [addSelectorOpen, setAddSelectorOpen] = React48.useState(false);
-  const [draftPickerOpen, setDraftPickerOpen] = React48.useState(false);
+  const [addSelectorOpen, setAddSelectorOpen] = React50.useState(false);
+  const [draftPickerOpen, setDraftPickerOpen] = React50.useState(false);
+  const [groupSelectorOpen, setGroupSelectorOpen] = React50.useState(false);
   const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
-  const handleUpdateFilter = (updated) => {
-    onFiltersChange(filters.map((f) => f.id === updated.id ? updated : f));
-  };
-  const handleDeleteFilter = (id) => {
-    onFiltersChange(filters.filter((f) => f.id !== id));
-  };
-  const handlePropertyChange = (filterId, newProp) => {
-    const newCondition = createFilterWithDefaults(newProp.id, newProp.type);
-    onFiltersChange(
-      filters.map((f) => f.id === filterId ? { ...newCondition, id: filterId } : f)
-    );
-  };
   const handleAddFilter = (property) => {
     const newFilter = createFilterWithDefaults(property.id, property.type);
     onFiltersChange([...filters, newFilter]);
     setAddSelectorOpen(false);
   };
+  const handleAddGroup = () => {
+    const group = createEmptyGroup();
+    onFiltersChange([...filters, group]);
+    setGroupSelectorOpen(false);
+  };
   const handleClearAll = () => {
     onFiltersChange([]);
     onOpenChange?.(false);
   };
-  const toggleLogicOp = (filterId) => {
+  const handleUpdateNode = (id, updated) => {
+    onFiltersChange(updateNodeInTree(filters, id, () => updated));
+  };
+  const handleDeleteNode = (id) => {
+    onFiltersChange(removeNodeFromTree(filters, id));
+  };
+  const handleDuplicateNode = (id) => {
+    const find = (nodes) => {
+      for (const n of nodes) {
+        if (n.id === id) return n;
+        if (isFilterGroup(n)) {
+          const found = find(n.children);
+          if (found) return found;
+        }
+      }
+    };
+    const node = find(filters);
+    if (!node) return;
+    const clone = duplicateNode(node);
+    clone.logicOperator = node.logicOperator ?? "and";
+    onFiltersChange(insertAfterInTree(filters, id, clone));
+  };
+  const handleWrapInGroup = (id) => {
+    const find = (nodes) => {
+      for (const n of nodes) {
+        if (n.id === id && !isFilterGroup(n)) return n;
+        if (isFilterGroup(n)) {
+          const found = find(n.children);
+          if (found) return found;
+        }
+      }
+    };
+    const condition = find(filters);
+    if (!condition) return;
+    const group = wrapInGroup(condition);
+    onFiltersChange(replaceNodeInTree(filters, id, group));
+  };
+  const handleUnwrapGroup = (id) => {
+    const find = (nodes) => {
+      for (const n of nodes) {
+        if (n.id === id && isFilterGroup(n)) return n;
+        if (isFilterGroup(n)) {
+          const found = find(n.children);
+          if (found) return found;
+        }
+      }
+    };
+    const group = find(filters);
+    if (!group) return;
+    const replacement = unwrapGroup(group);
+    if (replacement) {
+      onFiltersChange(replaceNodeInTree(filters, id, replacement));
+    } else {
+      onFiltersChange(removeNodeFromTree(filters, id));
+    }
+  };
+  const toggleLogicOp = (id) => {
+    onFiltersChange(
+      updateNodeInTree(filters, id, (n) => ({
+        ...n,
+        logicOperator: (n.logicOperator ?? "and") === "and" ? "or" : "and"
+      }))
+    );
+  };
+  const handleGroupChildrenChange = (groupId, children2) => {
     onFiltersChange(
-      filters.map(
-        (f) => f.id === filterId ? { ...f, logicOperator: (f.logicOperator ?? "and") === "and" ? "or" : "and" } : f
+      updateNodeInTree(
+        filters,
+        groupId,
+        (n) => isFilterGroup(n) ? { ...n, children: children2 } : n
       )
     );
   };
-  return /* @__PURE__ */ jsxs49(PopoverPrimitive11.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx55(PopoverPrimitive11.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx55(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsxs49(
-      PopoverPrimitive11.Content,
+  const renderNode = (node, index) => {
+    const connector = index === 0 ? "Where" : (node.logicOperator ?? "and") === "and" ? "And" : "Or";
+    if (isFilterGroup(node)) {
+      return /* @__PURE__ */ jsx57(
+        AdvancedGroup,
+        {
+          connector,
+          onConnectorToggle: index > 0 ? () => toggleLogicOp(node.id) : void 0,
+          onDuplicate: () => handleDuplicateNode(node.id),
+          onTurnIntoFilter: () => handleUnwrapGroup(node.id),
+          onDelete: () => handleDeleteNode(node.id),
+          properties,
+          onAddFilter: (prop) => {
+            const newFilter = createFilterWithDefaults(prop.id, prop.type);
+            handleGroupChildrenChange(node.id, [...node.children, newFilter]);
+          },
+          children: node.children.length === 0 ? (
+            /* Draft row in empty group */
+            /* @__PURE__ */ jsx57(
+              DraftRow,
+              {
+                properties,
+                onSelect: (prop) => {
+                  const newFilter = createFilterWithDefaults(prop.id, prop.type);
+                  handleGroupChildrenChange(node.id, [newFilter]);
+                }
+              }
+            )
+          ) : node.children.map((child, i) => renderNode(child, i))
+        },
+        node.id
+      );
+    }
+    const propDef = getPropertyDef(node.propertyId);
+    if (!propDef) return null;
+    return /* @__PURE__ */ jsx57(
+      AdvancedRow,
+      {
+        connector,
+        onConnectorToggle: index > 0 ? () => toggleLogicOp(node.id) : void 0,
+        propertyDef: propDef,
+        condition: node,
+        properties,
+        onUpdate: (updated) => handleUpdateNode(node.id, updated),
+        onPropertyChange: (p) => {
+          const newCondition = createFilterWithDefaults(p.id, p.type);
+          handleUpdateNode(node.id, { ...newCondition, id: node.id });
+        },
+        onDelete: () => handleDeleteNode(node.id),
+        onDuplicate: () => handleDuplicateNode(node.id),
+        onTurnIntoGroup: () => handleWrapInGroup(node.id)
+      },
+      node.id
+    );
+  };
+  return /* @__PURE__ */ jsxs51(PopoverPrimitive12.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx57(PopoverPrimitive12.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx57(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ jsxs51(
+      PopoverPrimitive12.Content,
       {
         sideOffset: 4,
         align: "start",
@@ -7487,87 +7933,56 @@ var AdvancedPopover = ({
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
-          "w-[min(520px,calc(100vw-32px))]"
+          "w-[min(640px,calc(100vw-32px))]"
         ),
         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__ */ jsx55(
-                AdvancedRow,
-                {
-                  connector: i === 0 ? "Where" : (filter.logicOperator ?? "and") === "and" ? "And" : "Or",
-                  onConnectorToggle: i > 0 ? () => toggleLogicOp(filter.id) : void 0,
-                  propertyDef: propDef,
-                  condition: filter,
-                  properties,
-                  onUpdate: handleUpdateFilter,
-                  onPropertyChange: (p) => handlePropertyChange(filter.id, p),
-                  onDelete: () => handleDeleteFilter(filter.id)
-                },
-                filter.id
-              );
-            }),
-            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(
+          /* @__PURE__ */ jsx57("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ jsx57(
+            DraftRow,
+            {
+              properties,
+              onSelect: handleAddFilter,
+              open: draftPickerOpen,
+              onOpenChange: setDraftPickerOpen
+            }
+          ) }),
+          /* @__PURE__ */ jsxs51("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
+            /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-sm", children: [
+              /* @__PURE__ */ jsx57(
                 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(
-                          Icon33,
-                          {
-                            icon: faChevronDownOutline3,
-                            size: "xs",
-                            className: "shrink-0 text-[var(--color-foreground)]"
-                          }
-                        )
-                      ]
-                    }
-                  )
+                  open: addSelectorOpen,
+                  onOpenChange: setAddSelectorOpen,
+                  children: /* @__PURE__ */ jsxs51("button", { type: "button", className: cn(ghostBtn, "text-[var(--color-foreground)]"), children: [
+                    /* @__PURE__ */ jsx57(Icon35, { icon: faPlusOutline3, size: "sm", className: "text-[var(--color-foreground)]" }),
+                    "Add filter"
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxs51(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleAddGroup,
+                  className: cn(ghostBtn, "text-[var(--color-foreground)]"),
+                  children: [
+                    /* @__PURE__ */ jsx57(Icon35, { icon: faPlusOutline3, size: "sm", className: "text-[var(--color-foreground)]" }),
+                    "Add filters group"
+                  ]
                 }
               )
-            ] })
-          ] }),
-          /* @__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__ */ jsxs49("button", { type: "button", className: cn(outlinedBtn), children: [
-                  /* @__PURE__ */ jsx55(Icon33, { icon: faPlusOutline2, size: "sm", className: "text-[var(--color-foreground)]" }),
-                  "Add filter"
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsx55(
+            ] }),
+            filters.length > 0 && /* @__PURE__ */ jsxs51(
               "button",
               {
                 type: "button",
                 onClick: handleClearAll,
-                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"
+                className: cn(ghostBtn, "text-[var(--color-destructive,#ef4444)]"),
+                children: [
+                  /* @__PURE__ */ jsx57(Icon35, { icon: faXmarkOutline3, size: "sm", className: "text-[var(--color-destructive,#ef4444)]" }),
+                  "Clear filters"
+                ]
               }
             )
           ] })
@@ -7577,12 +7992,71 @@ var AdvancedPopover = ({
   ] });
 };
 AdvancedPopover.displayName = "AdvancedPopover";
+var DraftRow = ({
+  properties,
+  onSelect,
+  open: openProp,
+  onOpenChange
+}) => {
+  const [internalOpen, setInternalOpen] = React50.useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : internalOpen;
+  const setOpen = (v) => {
+    if (!isControlled) setInternalOpen(v);
+    onOpenChange?.(v);
+  };
+  return /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+    /* @__PURE__ */ jsx57("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx57("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
+    /* @__PURE__ */ jsx57(
+      PropertySelector,
+      {
+        properties,
+        onSelect: (prop) => {
+          onSelect(prop);
+          setOpen(false);
+        },
+        open,
+        onOpenChange: setOpen,
+        children: /* @__PURE__ */ jsxs51(
+          "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__ */ jsx57("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
+              /* @__PURE__ */ jsx57(
+                Icon35,
+                {
+                  icon: faChevronDownOutline3,
+                  size: "xs",
+                  className: "shrink-0 text-[var(--color-foreground)]"
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
 
 // src/components/ui/filter/summary-chip.tsx
-import * as React49 from "react";
-import * as PopoverPrimitive12 from "@radix-ui/react-popover";
-import { Icon as Icon34, faSlidersOutline as faSlidersOutline2, faPlusOutline as faPlusOutline3, faChevronDownOutline as faChevronDownOutline4 } from "@l3mpire/icons";
-import { jsx as jsx56, jsxs as jsxs50 } from "react/jsx-runtime";
+import * as React51 from "react";
+import * as PopoverPrimitive13 from "@radix-ui/react-popover";
+import { Icon as Icon36, faSlidersOutline as faSlidersOutline2, faPlusOutline as faPlusOutline4, faChevronDownOutline as faChevronDownOutline4, faXmarkOutline as faXmarkOutline4 } from "@l3mpire/icons";
+import { jsx as jsx58, jsxs as jsxs52 } from "react/jsx-runtime";
+var ghostBtn2 = [
+  "flex items-center gap-sm px-base py-sm",
+  "min-h-[32px]",
+  "cursor-pointer transition-colors text-sm font-semibold leading-sm",
+  "rounded-md hover:bg-[var(--color-accent)]"
+];
 var SummaryChip = ({
   count,
   filters,
@@ -7594,44 +8068,152 @@ var SummaryChip = ({
   open: openProp,
   onOpenChange
 }) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = React49.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React51.useState(false);
   const isControlled = openProp !== void 0;
   const open = isControlled ? openProp : uncontrolledOpen;
   const setOpen = (v) => {
     if (!isControlled) setUncontrolledOpen(v);
     onOpenChange?.(v);
   };
-  const [addSelectorOpen, setAddSelectorOpen] = React49.useState(false);
-  const [draftPickerOpen, setDraftPickerOpen] = React49.useState(false);
+  const [addSelectorOpen, setAddSelectorOpen] = React51.useState(false);
+  const [draftPickerOpen, setDraftPickerOpen] = React51.useState(false);
   const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
-  const handleUpdateFilter = (updated) => {
-    onFiltersChange(filters.map((f) => f.id === updated.id ? updated : f));
+  const handleAddFilter = (property) => {
+    const newFilter = createFilterWithDefaults(property.id, property.type);
+    onFiltersChange([...filters, newFilter]);
+    setAddSelectorOpen(false);
   };
-  const handleDeleteFilter = (id) => {
-    const next = filters.filter((f) => f.id !== id);
+  const handleAddGroup = () => {
+    onFiltersChange([...filters, createEmptyGroup()]);
+  };
+  const handleUpdateNode = (id, updated) => {
+    onFiltersChange(updateNodeInTree(filters, id, () => updated));
+  };
+  const handleDeleteNode = (id) => {
+    const next = removeNodeFromTree(filters, id);
     onFiltersChange(next);
     if (next.length === 0) setOpen(false);
   };
-  const handlePropertyChange = (filterId, newProp) => {
-    const newCondition = createFilterWithDefaults(newProp.id, newProp.type);
+  const handleDuplicateNode = (id) => {
+    const find = (nodes) => {
+      for (const n of nodes) {
+        if (n.id === id) return n;
+        if (isFilterGroup(n)) {
+          const f = find(n.children);
+          if (f) return f;
+        }
+      }
+    };
+    const node = find(filters);
+    if (!node) return;
+    const clone = duplicateNode(node);
+    clone.logicOperator = node.logicOperator ?? "and";
+    onFiltersChange(insertAfterInTree(filters, id, clone));
+  };
+  const handleWrapInGroup = (id) => {
+    const find = (nodes) => {
+      for (const n of nodes) {
+        if (n.id === id && !isFilterGroup(n)) return n;
+        if (isFilterGroup(n)) {
+          const f = find(n.children);
+          if (f) return f;
+        }
+      }
+    };
+    const condition = find(filters);
+    if (!condition) return;
+    onFiltersChange(replaceNodeInTree(filters, id, wrapInGroup(condition)));
+  };
+  const handleUnwrapGroup = (id) => {
+    const find = (nodes) => {
+      for (const n of nodes) {
+        if (n.id === id && isFilterGroup(n)) return n;
+        if (isFilterGroup(n)) {
+          const f = find(n.children);
+          if (f) return f;
+        }
+      }
+    };
+    const group = find(filters);
+    if (!group) return;
+    const replacement = unwrapGroup(group);
+    if (replacement) {
+      onFiltersChange(replaceNodeInTree(filters, id, replacement));
+    } else {
+      onFiltersChange(removeNodeFromTree(filters, id));
+    }
+  };
+  const toggleLogicOp = (id) => {
     onFiltersChange(
-      filters.map((f) => f.id === filterId ? { ...newCondition, id: filterId } : f)
+      updateNodeInTree(filters, id, (n) => ({
+        ...n,
+        logicOperator: (n.logicOperator ?? "and") === "and" ? "or" : "and"
+      }))
     );
   };
-  const handleAddFilter = (property) => {
-    const newFilter = createFilterWithDefaults(property.id, property.type);
-    onFiltersChange([...filters, newFilter]);
-    setAddSelectorOpen(false);
-  };
-  const toggleLogicOp = (filterId) => {
+  const handleGroupChildrenChange = (groupId, newChildren) => {
     onFiltersChange(
-      filters.map(
-        (f) => f.id === filterId ? { ...f, logicOperator: (f.logicOperator ?? "and") === "and" ? "or" : "and" } : f
+      updateNodeInTree(
+        filters,
+        groupId,
+        (n) => isFilterGroup(n) ? { ...n, children: newChildren } : n
       )
     );
   };
-  return /* @__PURE__ */ jsxs50(PopoverPrimitive12.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx56(PopoverPrimitive12.Trigger, { asChild: true, children: children ?? /* @__PURE__ */ jsxs50(
+  const renderNode = (node, index) => {
+    const connector = index === 0 ? "Where" : (node.logicOperator ?? "and") === "and" ? "And" : "Or";
+    if (isFilterGroup(node)) {
+      return /* @__PURE__ */ jsx58(
+        AdvancedGroup,
+        {
+          connector,
+          onConnectorToggle: index > 0 ? () => toggleLogicOp(node.id) : void 0,
+          onDuplicate: () => handleDuplicateNode(node.id),
+          onTurnIntoFilter: () => handleUnwrapGroup(node.id),
+          onDelete: () => handleDeleteNode(node.id),
+          properties,
+          onAddFilter: (prop) => {
+            const newFilter = createFilterWithDefaults(prop.id, prop.type);
+            handleGroupChildrenChange(node.id, [...node.children, newFilter]);
+          },
+          children: node.children.length === 0 ? /* @__PURE__ */ jsx58(
+            DraftRow2,
+            {
+              properties,
+              onSelect: (prop) => {
+                const newFilter = createFilterWithDefaults(prop.id, prop.type);
+                handleGroupChildrenChange(node.id, [newFilter]);
+              }
+            }
+          ) : node.children.map((child, i) => renderNode(child, i))
+        },
+        node.id
+      );
+    }
+    const propDef = getPropertyDef(node.propertyId);
+    if (!propDef) return null;
+    return /* @__PURE__ */ jsx58(
+      AdvancedRow,
+      {
+        connector,
+        onConnectorToggle: index > 0 ? () => toggleLogicOp(node.id) : void 0,
+        propertyDef: propDef,
+        condition: node,
+        properties,
+        onUpdate: (updated) => handleUpdateNode(node.id, updated),
+        onPropertyChange: (p) => {
+          const newCondition = createFilterWithDefaults(p.id, p.type);
+          handleUpdateNode(node.id, { ...newCondition, id: node.id });
+        },
+        onDelete: () => handleDeleteNode(node.id),
+        onDuplicate: () => handleDuplicateNode(node.id),
+        onTurnIntoGroup: () => handleWrapInGroup(node.id)
+      },
+      node.id
+    );
+  };
+  return /* @__PURE__ */ jsxs52(PopoverPrimitive13.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx58(PopoverPrimitive13.Trigger, { asChild: true, children: children ?? /* @__PURE__ */ jsxs52(
       "button",
       {
         type: "button",
@@ -7645,21 +8227,14 @@ var SummaryChip = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx56(
-            Icon34,
-            {
-              icon: faSlidersOutline2,
-              size: "sm",
-              className: "shrink-0 text-[var(--color-foreground)]"
-            }
-          ),
-          /* @__PURE__ */ jsx56("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
-          count > 0 && /* @__PURE__ */ jsx56("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx56("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
+          /* @__PURE__ */ jsx58(Icon36, { icon: faSlidersOutline2, size: "sm", className: "shrink-0 text-[var(--color-foreground)]" }),
+          /* @__PURE__ */ jsx58("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
+          count > 0 && /* @__PURE__ */ jsx58("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx58("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx56(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ jsxs50(
-      PopoverPrimitive12.Content,
+    /* @__PURE__ */ jsx58(PopoverPrimitive13.Portal, { children: /* @__PURE__ */ jsxs52(
+      PopoverPrimitive13.Content,
       {
         sideOffset: 4,
         align: "start",
@@ -7671,95 +8246,39 @@ var SummaryChip = ({
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
-          "w-[min(520px,calc(100vw-32px))]"
+          "w-[min(640px,calc(100vw-32px))]"
         ),
         children: [
-          /* @__PURE__ */ jsxs50("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__ */ jsx56(
-                AdvancedRow,
-                {
-                  connector: i === 0 ? "Where" : (filter.logicOperator ?? "and") === "and" ? "And" : "Or",
-                  onConnectorToggle: i > 0 ? () => toggleLogicOp(filter.id) : void 0,
-                  propertyDef: propDef,
-                  condition: filter,
-                  properties,
-                  onUpdate: handleUpdateFilter,
-                  onPropertyChange: (p) => handlePropertyChange(filter.id, p),
-                  onDelete: () => handleDeleteFilter(filter.id)
-                },
-                filter.id
-              );
-            }),
-            filters.length === 0 && /* ── Draft row: inline "Select property" placeholder ──── */
-            /* @__PURE__ */ jsxs50("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-              /* @__PURE__ */ jsx56("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx56("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
-              /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx58("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ jsx58(
+            DraftRow2,
+            {
+              properties,
+              onSelect: handleAddFilter,
+              open: draftPickerOpen,
+              onOpenChange: setDraftPickerOpen
+            }
+          ) }),
+          /* @__PURE__ */ jsxs52("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
+            /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-sm", children: [
+              /* @__PURE__ */ jsx58(
                 PropertySelector,
                 {
                   properties,
                   onSelect: handleAddFilter,
-                  open: draftPickerOpen,
-                  onOpenChange: setDraftPickerOpen,
-                  children: /* @__PURE__ */ jsxs50(
-                    "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__ */ jsx56("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
-                        /* @__PURE__ */ jsx56(
-                          Icon34,
-                          {
-                            icon: faChevronDownOutline4,
-                            size: "xs",
-                            className: "shrink-0 text-[var(--color-foreground)]"
-                          }
-                        )
-                      ]
-                    }
-                  )
+                  open: addSelectorOpen,
+                  onOpenChange: setAddSelectorOpen,
+                  children: /* @__PURE__ */ jsxs52("button", { type: "button", className: cn(ghostBtn2, "text-[var(--color-foreground)]"), children: [
+                    /* @__PURE__ */ jsx58(Icon36, { icon: faPlusOutline4, size: "sm", className: "text-[var(--color-foreground)]" }),
+                    "Add filter"
+                  ] })
                 }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs50("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
-            /* @__PURE__ */ jsx56(
-              PropertySelector,
-              {
-                properties,
-                onSelect: handleAddFilter,
-                open: addSelectorOpen,
-                onOpenChange: setAddSelectorOpen,
-                children: /* @__PURE__ */ jsxs50(
-                  "button",
-                  {
-                    type: "button",
-                    className: cn(
-                      "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-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__ */ jsx56(Icon34, { icon: faPlusOutline3, size: "sm", className: "text-[var(--color-foreground)]" }),
-                      "Add filter"
-                    ]
-                  }
-                )
-              }
-            ),
-            filters.length > 0 && /* @__PURE__ */ jsx56(
+              ),
+              /* @__PURE__ */ jsxs52("button", { type: "button", onClick: handleAddGroup, className: cn(ghostBtn2, "text-[var(--color-foreground)]"), children: [
+                /* @__PURE__ */ jsx58(Icon36, { icon: faPlusOutline4, size: "sm", className: "text-[var(--color-foreground)]" }),
+                "Add filters group"
+              ] })
+            ] }),
+            filters.length > 0 && /* @__PURE__ */ jsxs52(
               "button",
               {
                 type: "button",
@@ -7767,8 +8286,11 @@ var SummaryChip = ({
                   onClearAll();
                   setOpen(false);
                 },
-                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"
+                className: cn(ghostBtn2, "text-[var(--color-destructive,#ef4444)]"),
+                children: [
+                  /* @__PURE__ */ jsx58(Icon36, { icon: faXmarkOutline4, size: "sm", className: "text-[var(--color-destructive,#ef4444)]" }),
+                  "Clear filters"
+                ]
               }
             )
           ] })
@@ -7778,13 +8300,44 @@ var SummaryChip = ({
   ] });
 };
 SummaryChip.displayName = "SummaryChip";
+var DraftRow2 = ({ properties, onSelect, open: openProp, onOpenChange }) => {
+  const [internalOpen, setInternalOpen] = React51.useState(false);
+  const isCtrl = openProp !== void 0;
+  const open = isCtrl ? openProp : internalOpen;
+  const setOpen = (v) => {
+    if (!isCtrl) setInternalOpen(v);
+    onOpenChange?.(v);
+  };
+  return /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+    /* @__PURE__ */ jsx58("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx58("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
+    /* @__PURE__ */ jsx58(PropertySelector, { properties, onSelect: (p) => {
+      onSelect(p);
+      setOpen(false);
+    }, open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs52(
+      "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__ */ jsx58("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
+          /* @__PURE__ */ jsx58(Icon36, { icon: faChevronDownOutline4, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+        ]
+      }
+    ) })
+  ] });
+};
 
 // src/components/ui/filter/use-filter-bar-mode.ts
-import * as React50 from "react";
+import * as React52 from "react";
 var DEFAULT_BREAKPOINT = 600;
 function useFilterBarMode(ref, override, breakpoint = DEFAULT_BREAKPOINT) {
-  const [mode, setMode] = React50.useState("default");
-  React50.useEffect(() => {
+  const [mode, setMode] = React52.useState("default");
+  React52.useEffect(() => {
     if (override) return;
     const el = ref.current;
     if (!el) return;
@@ -7799,7 +8352,7 @@ function useFilterBarMode(ref, override, breakpoint = DEFAULT_BREAKPOINT) {
 }
 
 // src/components/ui/filter/filter-system.tsx
-import { Fragment as Fragment5, jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
 var FilterSystem = ({
   properties,
   filterState,
@@ -7811,14 +8364,13 @@ var FilterSystem = ({
   actions,
   className
 }) => {
-  const containerRef = React51.useRef(null);
+  const containerRef = React53.useRef(null);
   const mode = useFilterBarMode(containerRef, modeOverride, breakpoint);
-  const [propertySelectorOpen, setPropertySelectorOpen] = React51.useState(false);
-  const [advancedOpen, setAdvancedOpen] = React51.useState(false);
-  const [summaryOpen, setSummaryOpen] = React51.useState(false);
-  const [pendingFilterId, setPendingFilterId] = React51.useState(null);
-  const allFilters = [...filterState.basicFilters, ...filterState.advancedFilters];
-  const totalCount = allFilters.length;
+  const [propertySelectorOpen, setPropertySelectorOpen] = React53.useState(false);
+  const [advancedOpen, setAdvancedOpen] = React53.useState(false);
+  const [summaryOpen, setSummaryOpen] = React53.useState(false);
+  const [pendingFilterId, setPendingFilterId] = React53.useState(null);
+  const totalCount = filterState.basicFilters.length + countConditions(filterState.advancedFilters);
   const handleAddFilter = (property) => {
     const newFilter = createFilterWithDefaults(property.id, property.type);
     if (newFilter.operator && isNoValueOperator(newFilter.operator)) {
@@ -7904,10 +8456,10 @@ var FilterSystem = ({
   const advancedFilterCount = filterState.advancedFilters.length;
   const showAdvancedChip = hasAdvanced || advancedOpen;
   const showSummaryChip = totalCount > 0 || summaryOpen;
-  return /* @__PURE__ */ jsxs51(FilterBar, { ref: containerRef, className, children: [
-    /* @__PURE__ */ jsxs51(FilterBarLeft, { className: "flex-nowrap flex-1 min-w-0 overflow-x-auto scrollbar-none outline-none [&>*]:shrink-0", children: [
+  return /* @__PURE__ */ jsxs53(FilterBar, { ref: containerRef, className, children: [
+    /* @__PURE__ */ jsxs53(FilterBarLeft, { className: "flex-nowrap flex-1 min-w-0 overflow-x-auto scrollbar-none outline-none [&>*]:shrink-0", children: [
       children,
-      sortFields && filterState.sort && /* @__PURE__ */ jsx57(
+      sortFields && filterState.sort && /* @__PURE__ */ jsx59(
         SortButton,
         {
           fields: sortFields,
@@ -7917,23 +8469,23 @@ var FilterSystem = ({
           iconOnly: isMinimal
         }
       ),
-      isMinimal ? /* @__PURE__ */ jsxs51(Fragment5, { children: [
-        /* @__PURE__ */ jsx57(
+      isMinimal ? /* @__PURE__ */ jsxs53(Fragment5, { children: [
+        /* @__PURE__ */ jsx59(
           "div",
           {
             className: showSummaryChip ? "inline-flex" : "inline-flex w-0 overflow-hidden opacity-0 pointer-events-none",
             "aria-hidden": !showSummaryChip || void 0,
-            children: /* @__PURE__ */ jsx57(
+            children: /* @__PURE__ */ jsx59(
               SummaryChip,
               {
                 count: totalCount,
-                filters: allFilters,
+                filters: [...filterState.basicFilters, ...filterState.advancedFilters],
                 properties,
-                onFiltersChange: (filters) => {
+                onFiltersChange: (nodes) => {
                   onFilterStateChange({
                     ...filterState,
-                    basicFilters: filters,
-                    advancedFilters: []
+                    basicFilters: [],
+                    advancedFilters: nodes
                   });
                 },
                 onClearAll: handleClearAll,
@@ -7943,7 +8495,7 @@ var FilterSystem = ({
             )
           }
         ),
-        !showSummaryChip && /* @__PURE__ */ jsx57(
+        !showSummaryChip && /* @__PURE__ */ jsx59(
           PropertySelector,
           {
             properties,
@@ -7952,13 +8504,13 @@ var FilterSystem = ({
             onOpenChange: setPropertySelectorOpen,
             onAdvancedFilter: handleOpenAdvanced,
             advancedFilterCount,
-            children: /* @__PURE__ */ jsx57(FilterBarButton, { iconOnly: true })
+            children: /* @__PURE__ */ jsx59(FilterBarButton, { iconOnly: true })
           }
         )
       ] }) : (
         /* ── DEFAULT MODE ────────────────────────────────────── */
-        /* @__PURE__ */ jsxs51(Fragment5, { children: [
-          /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsxs53(Fragment5, { children: [
+          /* @__PURE__ */ jsx59(
             AdvancedPopover,
             {
               filters: filterState.advancedFilters,
@@ -7966,12 +8518,12 @@ var FilterSystem = ({
               onFiltersChange: handleAdvancedFiltersChange,
               open: advancedOpen,
               onOpenChange: setAdvancedOpen,
-              children: /* @__PURE__ */ jsx57(
+              children: /* @__PURE__ */ jsx59(
                 "div",
                 {
                   className: showAdvancedChip ? "inline-flex" : "inline-flex w-0 overflow-hidden opacity-0 pointer-events-none",
                   "aria-hidden": !showAdvancedChip || void 0,
-                  children: /* @__PURE__ */ jsx57(
+                  children: /* @__PURE__ */ jsx59(
                     AdvancedChip,
                     {
                       count: filterState.advancedFilters.length,
@@ -7986,7 +8538,7 @@ var FilterSystem = ({
           filterState.basicFilters.map((filter) => {
             const propDef = getPropertyDef(filter.propertyId);
             if (!propDef) return null;
-            return /* @__PURE__ */ jsx57(
+            return /* @__PURE__ */ jsx59(
               InteractiveFilterChip,
               {
                 propertyDef: propDef,
@@ -8002,7 +8554,7 @@ var FilterSystem = ({
               filter.id
             );
           }),
-          /* @__PURE__ */ jsx57(
+          /* @__PURE__ */ jsx59(
             PropertySelector,
             {
               properties,
@@ -8011,29 +8563,29 @@ var FilterSystem = ({
               onOpenChange: setPropertySelectorOpen,
               onAdvancedFilter: handleOpenAdvanced,
               advancedFilterCount,
-              children: totalCount > 0 ? /* @__PURE__ */ jsx57(
+              children: totalCount > 0 ? /* @__PURE__ */ jsx59(
                 "button",
                 {
                   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__ */ jsx57(Icon35, { icon: faPlusOutline4, size: "sm", className: "text-[var(--color-foreground)]" })
+                  children: /* @__PURE__ */ jsx59(Icon37, { icon: faPlusOutline5, size: "sm", className: "text-[var(--color-foreground)]" })
                 }
-              ) : /* @__PURE__ */ jsx57(FilterBarButton, {})
+              ) : /* @__PURE__ */ jsx59(FilterBarButton, {})
             }
           )
         ] })
       ),
-      totalCount > 0 && /* @__PURE__ */ jsx57(
+      totalCount > 0 && /* @__PURE__ */ jsx59(
         "button",
         {
           type: "button",
           onClick: handleClearAll,
           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__ */ jsx57(Icon35, { icon: faXmarkOutline4, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ jsx57("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: "Clear" })
+          children: isMinimal ? /* @__PURE__ */ jsx59(Icon37, { icon: faXmarkOutline5, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ jsx59("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: "Clear" })
         }
       )
     ] }),
-    actions && /* @__PURE__ */ jsx57(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 })
+    actions && /* @__PURE__ */ jsx59(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";