@l3mpire/ui 2.24.1 → 2.25.0

package/dist/index.mjs

@@ -4277,7 +4277,7 @@ var RowActions = ({ children, className }) => /* @__PURE__ */ jsx34(
 RowActions.displayName = "RowActions";
 
 // src/components/ui/data-table.tsx
-import * as React36 from "react";
+import * as React37 from "react";
 import {
   flexRender,
   getCoreRowModel,
@@ -4311,7 +4311,8 @@ import {
   faSortDownSolid,
   faFilterSolid,
   faFilterOutline,
-  faGripDotsVerticalSolid as faGripDotsVerticalSolid2
+  faGripDotsVerticalSolid as faGripDotsVerticalSolid2,
+  faEllipsisVerticalSolid
 } from "@l3mpire/icons";
 import * as PopoverPrimitive2 from "@radix-ui/react-popover";
 
@@ -4405,8 +4406,176 @@ var TableCaption = React35.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 TableCaption.displayName = "TableCaption";
 
-// src/components/ui/data-table.tsx
+// src/components/ui/data-table-settings-modal.tsx
+import * as React36 from "react";
 import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
+function getColKey(col) {
+  return col.id ?? col.accessorKey ?? "";
+}
+function getColLabel(col) {
+  const h = col.header;
+  if (typeof h === "string") return h;
+  return getColKey(col);
+}
+function inferLockedIds(columns) {
+  const ids = ["select"];
+  for (const c of columns) {
+    if (c.enableHiding === false) {
+      const key = getColKey(c);
+      if (key) ids.push(key);
+    }
+  }
+  return ids;
+}
+function DataTableSettingsModal({
+  open,
+  onOpenChange,
+  columns,
+  columnVisibility,
+  onApply,
+  lockedColumnIds,
+  title = "Manage table",
+  className
+}) {
+  const [draft, setDraft] = React36.useState(columnVisibility);
+  const [search, setSearch] = React36.useState("");
+  const prevOpen = React36.useRef(open);
+  if (open && !prevOpen.current) {
+    setDraft(columnVisibility);
+    setSearch("");
+  }
+  prevOpen.current = open;
+  const lockedIds = React36.useMemo(
+    () => lockedColumnIds ?? inferLockedIds(columns),
+    [lockedColumnIds, columns]
+  );
+  const editable = React36.useMemo(
+    () => columns.filter((c) => {
+      const key = getColKey(c);
+      return key && !lockedIds.includes(key);
+    }),
+    [columns, lockedIds]
+  );
+  const filtered = React36.useMemo(() => {
+    if (!search) return editable;
+    const q = search.toLowerCase();
+    return editable.filter((c) => getColLabel(c).toLowerCase().includes(q));
+  }, [editable, search]);
+  const visibleCount = editable.filter(
+    (c) => draft[getColKey(c)] !== false
+  ).length;
+  const totalCount = editable.length;
+  const toggle = (key) => setDraft((p) => ({ ...p, [key]: p[key] === false ? true : false }));
+  const showAll = () => {
+    const next = { ...draft };
+    for (const c of editable) next[getColKey(c)] = true;
+    setDraft(next);
+  };
+  const hideAll = () => {
+    const next = { ...draft };
+    for (const c of editable) next[getColKey(c)] = false;
+    setDraft(next);
+  };
+  return /* @__PURE__ */ jsx36(Modal, { open, onOpenChange, children: /* @__PURE__ */ jsxs32(ModalContent, { size: "sm", className, children: [
+    /* @__PURE__ */ jsx36(ModalHeader, { onClose: () => onOpenChange(false), children: /* @__PURE__ */ jsx36(ModalTitle, { children: title }) }),
+    /* @__PURE__ */ jsx36(ModalBody, { children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-md", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between gap-base", children: [
+        /* @__PURE__ */ jsxs32("span", { className: "text-sm font-medium text-table-cell-text-secondary", children: [
+          "Columns ",
+          visibleCount,
+          " / ",
+          totalCount
+        ] }),
+        /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-sm", children: [
+          /* @__PURE__ */ jsx36(
+            "button",
+            {
+              type: "button",
+              onClick: showAll,
+              className: "text-xs font-medium text-link-brand-text-default hover:text-link-brand-text-hover hover:underline cursor-pointer bg-transparent border-0 p-0",
+              children: "Show all"
+            }
+          ),
+          /* @__PURE__ */ jsx36("span", { className: "text-xs text-table-cell-text-secondary", children: "\xB7" }),
+          /* @__PURE__ */ jsx36(
+            "button",
+            {
+              type: "button",
+              onClick: hideAll,
+              className: "text-xs font-medium text-link-brand-text-default hover:text-link-brand-text-hover hover:underline cursor-pointer bg-transparent border-0 p-0",
+              children: "Hide all"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx36(
+        SearchBar,
+        {
+          size: "sm",
+          placeholder: "Search columns",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          onClear: () => setSearch("")
+        }
+      ),
+      /* @__PURE__ */ jsx36(
+        "div",
+        {
+          className: cn(
+            "flex flex-col max-h-[360px] overflow-auto rounded-base",
+            "border border-table-border"
+          ),
+          children: filtered.length === 0 ? /* @__PURE__ */ jsx36("div", { className: "py-md text-center text-sm text-table-cell-text-secondary", children: "No columns found" }) : filtered.map((c) => {
+            const key = getColKey(c);
+            const label = getColLabel(c);
+            const checked = draft[key] !== false;
+            return /* @__PURE__ */ jsxs32(
+              "label",
+              {
+                className: cn(
+                  "flex items-center gap-base px-base py-sm cursor-pointer",
+                  "border-b border-table-border last:border-b-0",
+                  "hover:bg-table-row-bg-hover transition-colors"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx36(
+                    Checkbox,
+                    {
+                      checked,
+                      onCheckedChange: () => toggle(key)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx36("span", { className: "text-sm text-table-cell-text-primary", children: label })
+                ]
+              },
+              key
+            );
+          })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs32(ModalFooter, { children: [
+      /* @__PURE__ */ jsx36(ModalClose, { asChild: true, children: /* @__PURE__ */ jsx36(Button, { appearance: "ghost", intent: "brand", size: "md", children: "Cancel" }) }),
+      /* @__PURE__ */ jsx36(
+        Button,
+        {
+          appearance: "solid",
+          intent: "brand",
+          size: "md",
+          onClick: () => {
+            onApply(draft);
+            onOpenChange(false);
+          },
+          children: "Apply"
+        }
+      )
+    ] })
+  ] }) });
+}
+DataTableSettingsModal.displayName = "DataTableSettingsModal";
+
+// src/components/ui/data-table.tsx
+import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
 var filterOperatorsByType = {
   string: [
     { value: "contains", label: "Contains" },
@@ -4456,12 +4625,12 @@ function ColumnFilterPopover({
   children
 }) {
   const operators = filterOperatorsByType[filterType] ?? filterOperatorsByType.string;
-  const [operator, setOperator] = React36.useState(
+  const [operator, setOperator] = React37.useState(
     operators[0].value
   );
-  const [inputValue, setInputValue] = React36.useState("");
-  const [open, setOpen] = React36.useState(false);
-  React36.useEffect(() => {
+  const [inputValue, setInputValue] = React37.useState("");
+  const [open, setOpen] = React37.useState(false);
+  React37.useEffect(() => {
     if (open && filterValue && typeof filterValue === "object") {
       const fv = filterValue;
       if (fv.operator) setOperator(fv.operator);
@@ -4471,9 +4640,9 @@ function ColumnFilterPopover({
       setInputValue("");
     }
   }, [open, filterValue, operators]);
-  return /* @__PURE__ */ jsxs32(PopoverPrimitive2.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx36(PopoverPrimitive2.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx36(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs33(PopoverPrimitive2.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx37(PopoverPrimitive2.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx37(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx37(
       PopoverPrimitive2.Content,
       {
         align: "start",
@@ -4483,9 +4652,9 @@ function ColumnFilterPopover({
           "animate-in fade-in-0 zoom-in-95"
         ),
         onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-sm", children: [
-          /* @__PURE__ */ jsx36("span", { className: "text-xs font-medium text-table-head-text", children: "Filter" }),
-          /* @__PURE__ */ jsx36(
+        children: /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-sm", children: [
+          /* @__PURE__ */ jsx37("span", { className: "text-xs font-medium text-table-head-text", children: "Filter" }),
+          /* @__PURE__ */ jsx37(
             "select",
             {
               className: cn(
@@ -4495,10 +4664,10 @@ function ColumnFilterPopover({
               ),
               value: operator,
               onChange: (e) => setOperator(e.target.value),
-              children: operators.map((op) => /* @__PURE__ */ jsx36("option", { value: op.value, children: op.label }, op.value))
+              children: operators.map((op) => /* @__PURE__ */ jsx37("option", { value: op.value, children: op.label }, op.value))
             }
           ),
-          !noValueOperators.has(operator) && /* @__PURE__ */ jsx36(
+          !noValueOperators.has(operator) && /* @__PURE__ */ jsx37(
             "input",
             {
               type: filterType === "number" ? "number" : filterType === "date" ? "date" : "text",
@@ -4518,8 +4687,8 @@ function ColumnFilterPopover({
               }
             }
           ),
-          /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-end gap-xs pt-xs", children: [
-            /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-end gap-xs pt-xs", children: [
+            /* @__PURE__ */ jsx37(
               Button,
               {
                 appearance: "ghost",
@@ -4532,7 +4701,7 @@ function ColumnFilterPopover({
                 children: "Clear"
               }
             ),
-            /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx37(
               Button,
               {
                 appearance: "solid",
@@ -4565,7 +4734,7 @@ function DraggableHeaderCell({
   const leadingIcon = meta?.icon;
   const canDrag = isDragEnabled && meta?.enableDrag !== false;
   const filterType = meta?.filterType ?? "string";
-  const [isHovered, setIsHovered] = React36.useState(false);
+  const [isHovered, setIsHovered] = React37.useState(false);
   const {
     attributes,
     listeners,
@@ -4587,7 +4756,7 @@ function DraggableHeaderCell({
     opacity: isDragging ? 0.5 : 1,
     zIndex: isDragging ? 1 : void 0
   };
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     TableHead,
     {
       ref: setNodeRef,
@@ -4601,15 +4770,15 @@ function DraggableHeaderCell({
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       children: [
-        /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-xs", children: [
-          leadingIcon && (canDrag ? /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-xs", children: [
+          leadingIcon && (canDrag ? /* @__PURE__ */ jsx37(
             "div",
             {
               ...attributes,
               ...listeners,
               className: "shrink-0 flex items-center cursor-grab",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ jsx36(
+              children: /* @__PURE__ */ jsx37(
                 Icon24,
                 {
                   icon: isHovered ? faGripDotsVerticalSolid2 : leadingIcon,
@@ -4618,7 +4787,7 @@ function DraggableHeaderCell({
                 }
               )
             }
-          ) : /* @__PURE__ */ jsx36(
+          ) : /* @__PURE__ */ jsx37(
             Icon24,
             {
               icon: leadingIcon,
@@ -4626,14 +4795,14 @@ function DraggableHeaderCell({
               className: "shrink-0 text-table-head-icon"
             }
           )),
-          !leadingIcon && canDrag && isHovered && /* @__PURE__ */ jsx36(
+          !leadingIcon && canDrag && isHovered && /* @__PURE__ */ jsx37(
             "div",
             {
               ...attributes,
               ...listeners,
               className: "shrink-0 flex items-center cursor-grab",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ jsx36(
+              children: /* @__PURE__ */ jsx37(
                 Icon24,
                 {
                   icon: faGripDotsVerticalSolid2,
@@ -4643,11 +4812,11 @@ function DraggableHeaderCell({
               )
             }
           ),
-          /* @__PURE__ */ jsx36("span", { className: "flex-1 truncate", children: header.isPlaceholder ? null : flexRender(
+          /* @__PURE__ */ jsx37("span", { className: "flex-1 truncate", children: header.isPlaceholder ? null : flexRender(
             header.column.columnDef.header,
             header.getContext()
           ) }),
-          canSort && (isSorted || isHovered) && /* @__PURE__ */ jsx36(
+          canSort && (isSorted || isHovered) && /* @__PURE__ */ jsx37(
             Icon24,
             {
               icon: isSorted === "asc" ? faSortUpSolid : isSorted === "desc" ? faSortDownSolid : faSortSolid,
@@ -4655,20 +4824,20 @@ function DraggableHeaderCell({
               className: "shrink-0 text-table-head-icon"
             }
           ),
-          enableFiltering && (isFiltered || isHovered) && /* @__PURE__ */ jsx36(
+          enableFiltering && (isFiltered || isHovered) && /* @__PURE__ */ jsx37(
             ColumnFilterPopover,
             {
               filterType,
               filterValue: header.column.getFilterValue(),
               onApply: (val) => header.column.setFilterValue(val),
               onClear: () => header.column.setFilterValue(void 0),
-              children: /* @__PURE__ */ jsx36(
+              children: /* @__PURE__ */ jsx37(
                 "button",
                 {
                   type: "button",
                   onClick: (e) => e.stopPropagation(),
                   className: "shrink-0 p-0 border-0 bg-transparent cursor-pointer",
-                  children: /* @__PURE__ */ jsx36(
+                  children: /* @__PURE__ */ jsx37(
                     Icon24,
                     {
                       icon: isFiltered ? faFilterSolid : faFilterOutline,
@@ -4681,7 +4850,7 @@ function DraggableHeaderCell({
             }
           )
         ] }),
-        enableColumnResizing && header.column.getCanResize() && /* @__PURE__ */ jsx36(
+        enableColumnResizing && header.column.getCanResize() && /* @__PURE__ */ jsx37(
           "div",
           {
             onMouseDown: header.getResizeHandler(),
@@ -4779,6 +4948,9 @@ function DataTableInner({
   enableColumnPinning = false,
   enableColumnResizing = false,
   enableColumnDrag = false,
+  enableTableSettings = false,
+  lockedColumnIds,
+  tableSettingsTitle,
   sorting: sortingProp,
   onSortingChange,
   columnFilters: columnFiltersProp,
@@ -4799,17 +4971,19 @@ function DataTableInner({
   emptyMessage = "No results.",
   bordered = false
 }) {
-  const [internalSorting, setInternalSorting] = React36.useState([]);
-  const [internalColumnFilters, setInternalColumnFilters] = React36.useState([]);
-  const [internalPagination, setInternalPagination] = React36.useState({ pageIndex: 0, pageSize: 10 });
-  const [internalRowSelection, setInternalRowSelection] = React36.useState({});
-  const [internalColumnVisibility, setInternalColumnVisibility] = React36.useState({});
-  const [internalColumnOrder, setInternalColumnOrder] = React36.useState([]);
-  const [internalColumnPinning, setInternalColumnPinning] = React36.useState({});
-  const [internalColumnSizing, setInternalColumnSizing] = React36.useState({});
+  const effectiveColumnVisibility = enableColumnVisibility || enableTableSettings;
+  const [tableSettingsOpen, setTableSettingsOpen] = React37.useState(false);
+  const [internalSorting, setInternalSorting] = React37.useState([]);
+  const [internalColumnFilters, setInternalColumnFilters] = React37.useState([]);
+  const [internalPagination, setInternalPagination] = React37.useState({ pageIndex: 0, pageSize: 10 });
+  const [internalRowSelection, setInternalRowSelection] = React37.useState({});
+  const [internalColumnVisibility, setInternalColumnVisibility] = React37.useState({});
+  const [internalColumnOrder, setInternalColumnOrder] = React37.useState([]);
+  const [internalColumnPinning, setInternalColumnPinning] = React37.useState({});
+  const [internalColumnSizing, setInternalColumnSizing] = React37.useState({});
   const columnOrder = columnOrderProp ?? internalColumnOrder;
   const setColumnOrder = onColumnOrderChange ?? setInternalColumnOrder;
-  React36.useEffect(() => {
+  React37.useEffect(() => {
     if (enableColumnDrag && columnOrder.length === 0) {
       const ids = columns.map((c) => {
         if ("accessorKey" in c && c.accessorKey) return String(c.accessorKey);
@@ -4853,7 +5027,7 @@ function DataTableInner({
       onRowSelectionChange: onRowSelectionChange ?? setInternalRowSelection
     },
     // Column visibility
-    ...enableColumnVisibility && {
+    ...effectiveColumnVisibility && {
       onColumnVisibilityChange: onColumnVisibilityChange ?? setInternalColumnVisibility
     },
     // Column order (always wire up for drag reorder)
@@ -4882,7 +5056,7 @@ function DataTableInner({
       ...enableRowSelection && {
         rowSelection: rowSelectionProp ?? internalRowSelection
       },
-      ...enableColumnVisibility && {
+      ...effectiveColumnVisibility && {
         columnVisibility: columnVisibilityProp ?? internalColumnVisibility
       },
       columnOrder,
@@ -4903,7 +5077,7 @@ function DataTableInner({
     }),
     useSensor(KeyboardSensor)
   );
-  const handleDragEnd = React36.useCallback(
+  const handleDragEnd = React37.useCallback(
     (event) => {
       const { active, over } = event;
       if (!over || active.id === over.id) return;
@@ -4917,12 +5091,12 @@ function DataTableInner({
     },
     [table, setColumnOrder]
   );
-  const columnIds = React36.useMemo(
+  const columnIds = React37.useMemo(
     () => table.getAllLeafColumns().map((c) => c.id),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [table.getAllLeafColumns().length, columnOrder]
   );
-  const columnSizeVars = React36.useMemo(() => {
+  const columnSizeVars = React37.useMemo(() => {
     if (!enableColumnResizing) return {};
     const headers = table.getFlatHeaders();
     const vars = {};
@@ -4933,52 +5107,72 @@ function DataTableInner({
     return vars;
   }, [enableColumnResizing, table.getState().columnSizing]);
   const totalSize = enableColumnResizing ? table.getTotalSize() : void 0;
-  const tableContent = /* @__PURE__ */ jsxs32("div", { className: cn("w-full", className), style: columnSizeVars, children: [
-    /* @__PURE__ */ jsxs32(
+  const tableContent = /* @__PURE__ */ jsxs33("div", { className: cn("w-full", className), style: columnSizeVars, children: [
+    /* @__PURE__ */ jsxs33(
       Table,
       {
         style: totalSize ? { width: totalSize, tableLayout: "fixed" } : void 0,
         className: totalSize ? "w-auto" : void 0,
         children: [
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             TableHeader,
             {
               className: cn(bordered && "border-t border-table-border"),
-              children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx36(TableRow, { children: enableColumnDrag ? /* @__PURE__ */ jsx36(
-                SortableContext,
-                {
-                  items: columnIds,
-                  strategy: horizontalListSortingStrategy,
-                  children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx36(
-                    DraggableHeaderCell,
-                    {
-                      header,
-                      enableSorting,
-                      enableFiltering,
-                      enableColumnResizing,
-                      isDragEnabled: enableColumnDrag
-                    },
-                    header.id
-                  ))
-                }
-              ) : headerGroup.headers.map((header) => /* @__PURE__ */ jsx36(
-                DraggableHeaderCell,
-                {
-                  header,
-                  enableSorting,
-                  enableFiltering,
-                  enableColumnResizing,
-                  isDragEnabled: false
-                },
-                header.id
-              )) }, headerGroup.id))
+              children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs33(TableRow, { children: [
+                enableColumnDrag ? /* @__PURE__ */ jsx37(
+                  SortableContext,
+                  {
+                    items: columnIds,
+                    strategy: horizontalListSortingStrategy,
+                    children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx37(
+                      DraggableHeaderCell,
+                      {
+                        header,
+                        enableSorting,
+                        enableFiltering,
+                        enableColumnResizing,
+                        isDragEnabled: enableColumnDrag
+                      },
+                      header.id
+                    ))
+                  }
+                ) : headerGroup.headers.map((header) => /* @__PURE__ */ jsx37(
+                  DraggableHeaderCell,
+                  {
+                    header,
+                    enableSorting,
+                    enableFiltering,
+                    enableColumnResizing,
+                    isDragEnabled: false
+                  },
+                  header.id
+                )),
+                enableTableSettings && /* @__PURE__ */ jsx37(
+                  "th",
+                  {
+                    role: "button",
+                    "aria-label": tableSettingsTitle ?? "Manage table",
+                    onClick: () => setTableSettingsOpen(true),
+                    className: cn(
+                      "sticky right-0 z-[4] w-10 min-w-10 p-0 cursor-pointer",
+                      "bg-table-head-bg-default border-b border-l border-table-border",
+                      "text-table-head-icon",
+                      "opacity-0 pointer-events-none",
+                      "transition-[opacity,color,background-color] duration-150",
+                      "group-hover/row:opacity-100 group-hover/row:pointer-events-auto",
+                      "hover:bg-table-head-bg-hover hover:text-table-cell-text-primary"
+                    ),
+                    children: /* @__PURE__ */ jsx37("span", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx37(Icon24, { icon: faEllipsisVerticalSolid, size: "xs" }) })
+                  }
+                )
+              ] }, headerGroup.id))
             }
           ),
-          /* @__PURE__ */ jsx36(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx37(
             TableRow,
             {
               "data-state": row.getIsSelected() ? "selected" : void 0,
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx36(
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx37(
                 TableCell,
                 {
                   style: enableColumnResizing ? { width: `var(--col-${cell.column.id}-size)` } : void 0,
@@ -4992,21 +5186,36 @@ function DataTableInner({
               ))
             },
             row.id
-          )) : /* @__PURE__ */ jsx36(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx36(
+          )) : /* @__PURE__ */ jsx37(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx37(
             TableCell,
             {
               colSpan: columns.length,
               className: "h-48 text-center border-b-0",
-              children: emptyState ?? /* @__PURE__ */ jsx36("span", { className: "text-sm text-table-cell-text-secondary", children: emptyMessage })
+              children: emptyState ?? /* @__PURE__ */ jsx37("span", { className: "text-sm text-table-cell-text-secondary", children: emptyMessage })
             }
           ) }) })
         ]
       }
     ),
-    children?.(table)
+    children?.(table),
+    enableTableSettings && /* @__PURE__ */ jsx37(
+      DataTableSettingsModal,
+      {
+        open: tableSettingsOpen,
+        onOpenChange: setTableSettingsOpen,
+        columns,
+        columnVisibility: columnVisibilityProp ?? internalColumnVisibility,
+        onApply: (next) => {
+          const apply = onColumnVisibilityChange ?? setInternalColumnVisibility;
+          apply(next);
+        },
+        lockedColumnIds,
+        title: tableSettingsTitle
+      }
+    )
   ] });
   if (enableColumnDrag) {
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx37(
       DndContext,
       {
         sensors,
@@ -5027,7 +5236,7 @@ function DataTablePagination({
   const totalCount = table.getFilteredRowModel().rows.length;
   const pageIndex = table.getState().pagination.pageIndex;
   const pageCount = table.getPageCount();
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       className: cn(
@@ -5035,16 +5244,16 @@ function DataTablePagination({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx36("div", { className: "text-xs text-table-cell-text-secondary", children: selectedCount > 0 && /* @__PURE__ */ jsxs32("span", { children: [
+        /* @__PURE__ */ jsx37("div", { className: "text-xs text-table-cell-text-secondary", children: selectedCount > 0 && /* @__PURE__ */ jsxs33("span", { children: [
           selectedCount,
           " of ",
           totalCount,
           " row(s) selected"
         ] }) }),
-        /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-lg", children: [
-          /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-sm", children: [
-            /* @__PURE__ */ jsx36("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: "Rows per page" }),
-            /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-lg", children: [
+          /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-sm", children: [
+            /* @__PURE__ */ jsx37("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: "Rows per page" }),
+            /* @__PURE__ */ jsx37(
               "select",
               {
                 className: cn(
@@ -5054,18 +5263,18 @@ function DataTablePagination({
                 ),
                 value: table.getState().pagination.pageSize,
                 onChange: (e) => table.setPageSize(Number(e.target.value)),
-                children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx36("option", { value: size, children: size }, size))
+                children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx37("option", { value: size, children: size }, size))
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs32("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: [
+          /* @__PURE__ */ jsxs33("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: [
             "Page ",
             pageIndex + 1,
             " of ",
             pageCount
           ] }),
-          /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-xs", children: [
-            /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-xs", children: [
+            /* @__PURE__ */ jsx37(
               Button,
               {
                 appearance: "outlined",
@@ -5077,7 +5286,7 @@ function DataTablePagination({
                 "aria-label": "Previous page"
               }
             ),
-            /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx37(
               Button,
               {
                 appearance: "outlined",
@@ -5099,15 +5308,15 @@ var DataTable = Object.assign(DataTableInner, { displayName: "DataTable" });
 Object.assign(DataTablePagination, { displayName: "DataTablePagination" });
 
 // src/components/ui/side-panel.tsx
-import * as React37 from "react";
+import * as React38 from "react";
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
-import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
 var SidePanel = DialogPrimitive2.Root;
 var SidePanelTrigger = DialogPrimitive2.Trigger;
 var SidePanelClose = DialogPrimitive2.Close;
-var SidePanelContent = React37.forwardRef(({ className, overlay = true, children, ...props }, ref) => /* @__PURE__ */ jsxs33(DialogPrimitive2.Portal, { children: [
-  overlay && /* @__PURE__ */ jsx37(ModalOverlay, {}),
-  /* @__PURE__ */ jsx37(
+var SidePanelContent = React38.forwardRef(({ className, overlay = true, children, ...props }, ref) => /* @__PURE__ */ jsxs34(DialogPrimitive2.Portal, { children: [
+  overlay && /* @__PURE__ */ jsx38(ModalOverlay, {}),
+  /* @__PURE__ */ jsx38(
     DialogPrimitive2.Content,
     {
       ref,
@@ -5128,11 +5337,11 @@ var SidePanelContent = React37.forwardRef(({ className, overlay = true, children
 SidePanelContent.displayName = "SidePanelContent";
 
 // src/components/ui/filter/filter-chip-segment.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import * as TooltipPrimitive3 from "@radix-ui/react-tooltip";
 import { cva as cva19 } from "class-variance-authority";
 import { Icon as Icon25 } from "@l3mpire/icons";
-import { jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
 var filterChipSegmentVariants = cva19(
   ["flex items-center shrink-0 transition-colors"],
   {
@@ -5160,15 +5369,15 @@ function TruncatedLabel({
   truncate,
   className
 }) {
-  const textRef = React38.useRef(null);
-  const [isTruncated, setIsTruncated] = React38.useState(false);
-  React38.useEffect(() => {
+  const textRef = React39.useRef(null);
+  const [isTruncated, setIsTruncated] = React39.useState(false);
+  React39.useEffect(() => {
     const el = textRef.current;
     if (el && truncate) {
       setIsTruncated(el.scrollWidth > el.clientWidth);
     }
   }, [label, truncate]);
-  const span = /* @__PURE__ */ jsx38(
+  const span = /* @__PURE__ */ jsx39(
     "span",
     {
       ref: textRef,
@@ -5177,22 +5386,22 @@ function TruncatedLabel({
     }
   );
   if (!isTruncated) return span;
-  return /* @__PURE__ */ jsx38(TooltipPrimitive3.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsxs34(TooltipPrimitive3.Root, { children: [
-    /* @__PURE__ */ jsx38(TooltipPrimitive3.Trigger, { asChild: true, children: span }),
-    /* @__PURE__ */ jsx38(TooltipPrimitive3.Portal, { children: /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsx39(TooltipPrimitive3.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsxs35(TooltipPrimitive3.Root, { children: [
+    /* @__PURE__ */ jsx39(TooltipPrimitive3.Trigger, { asChild: true, children: span }),
+    /* @__PURE__ */ jsx39(TooltipPrimitive3.Portal, { children: /* @__PURE__ */ jsxs35(
       TooltipPrimitive3.Content,
       {
         sideOffset: 4,
         className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm max-w-[320px] data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
         children: [
           label,
-          /* @__PURE__ */ jsx38(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
+          /* @__PURE__ */ jsx39(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
         ]
       }
     ) })
   ] }) });
 }
-var FilterChipSegment = React38.forwardRef(
+var FilterChipSegment = React39.forwardRef(
   ({
     className,
     segmentType = "property",
@@ -5206,24 +5415,24 @@ var FilterChipSegment = React38.forwardRef(
     ...props
   }, ref) => {
     if (segmentType === "button") {
-      return /* @__PURE__ */ jsxs34(
+      return /* @__PURE__ */ jsxs35(
         "div",
         {
           ref,
           className: cn(filterChipSegmentVariants({ type: "button", hasBorder: false }), className),
           ...props,
           children: [
-            /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx39(
               "button",
               {
                 type: "button",
                 onClick: onKebabClick,
                 className: "flex items-center justify-center p-sm cursor-pointer hover:bg-filter-chip-segment-bg-hover active:bg-filter-chip-segment-bg-pressed transition-colors",
                 "aria-label": "Filter actions",
-                children: /* @__PURE__ */ jsx38("span", { className: "size-5 flex items-center justify-center text-sm leading-sm text-filter-chip-kebab-text", children: /* @__PURE__ */ jsxs34("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: [
-                  /* @__PURE__ */ jsx38("circle", { cx: "10", cy: "4.5", r: "1.5" }),
-                  /* @__PURE__ */ jsx38("circle", { cx: "10", cy: "10", r: "1.5" }),
-                  /* @__PURE__ */ jsx38("circle", { cx: "10", cy: "15.5", r: "1.5" })
+                children: /* @__PURE__ */ jsx39("span", { className: "size-5 flex items-center justify-center text-sm leading-sm text-filter-chip-kebab-text", children: /* @__PURE__ */ jsxs35("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: [
+                  /* @__PURE__ */ jsx39("circle", { cx: "10", cy: "4.5", r: "1.5" }),
+                  /* @__PURE__ */ jsx39("circle", { cx: "10", cy: "10", r: "1.5" }),
+                  /* @__PURE__ */ jsx39("circle", { cx: "10", cy: "15.5", r: "1.5" })
                 ] }) })
               }
             ),
@@ -5232,7 +5441,7 @@ var FilterChipSegment = React38.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsxs35(
       "div",
       {
         ref,
@@ -5243,8 +5452,8 @@ var FilterChipSegment = React38.forwardRef(
         ),
         ...props,
         children: [
-          adornment && segmentType === "value" && /* @__PURE__ */ jsx38("span", { className: "shrink-0 inline-flex items-center justify-center leading-none", children: adornment }),
-          icon && segmentType === "property" && /* @__PURE__ */ jsx38(
+          adornment && segmentType === "value" && /* @__PURE__ */ jsx39("span", { className: "shrink-0 inline-flex items-center justify-center leading-none", children: adornment }),
+          icon && segmentType === "property" && /* @__PURE__ */ jsx39(
             Icon25,
             {
               icon,
@@ -5252,7 +5461,7 @@ var FilterChipSegment = React38.forwardRef(
               className: "shrink-0 text-filter-chip-segment-icon"
             }
           ),
-          label && /* @__PURE__ */ jsx38(
+          label && /* @__PURE__ */ jsx39(
             TruncatedLabel,
             {
               label,
@@ -5263,7 +5472,7 @@ var FilterChipSegment = React38.forwardRef(
               )
             }
           ),
-          badgeCount != null && badgeCount > 0 && /* @__PURE__ */ jsx38("span", { className: "flex items-center gap-2xs p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx38("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: badgeCount }) }),
+          badgeCount != null && badgeCount > 0 && /* @__PURE__ */ jsx39("span", { className: "flex items-center gap-2xs 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: badgeCount }) }),
           children
         ]
       }
@@ -5273,9 +5482,9 @@ var FilterChipSegment = React38.forwardRef(
 FilterChipSegment.displayName = "FilterChipSegment";
 
 // src/components/ui/filter/filter-chip.tsx
-import * as React39 from "react";
-import { jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
-var FilterChip = React39.forwardRef(
+import * as React40 from "react";
+import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
+var FilterChip = React40.forwardRef(
   ({
     className,
     icon,
@@ -5292,7 +5501,7 @@ var FilterChip = React39.forwardRef(
   }, ref) => {
     const hasOperator = !!operator;
     const hasValue = hasOperator && value != null;
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs36(
       "div",
       {
         ref,
@@ -5303,7 +5512,7 @@ var FilterChip = React39.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             FilterChipSegment,
             {
               segmentType: "property",
@@ -5313,7 +5522,7 @@ var FilterChip = React39.forwardRef(
               onClick: onPropertyClick
             }
           ),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             FilterChipSegment,
             {
               segmentType: hasOperator ? "operator" : "placeholder",
@@ -5322,7 +5531,7 @@ var FilterChip = React39.forwardRef(
               onClick: onOperatorClick
             }
           ),
-          hasOperator && /* @__PURE__ */ jsx39(
+          hasOperator && /* @__PURE__ */ jsx40(
             FilterChipSegment,
             {
               segmentType: hasValue ? "value" : "placeholder",
@@ -5333,7 +5542,7 @@ var FilterChip = React39.forwardRef(
               onClick: onValueClick
             }
           ),
-          hasOperator && /* @__PURE__ */ jsx39(
+          hasOperator && /* @__PURE__ */ jsx40(
             FilterChipSegment,
             {
               segmentType: "button",
@@ -5595,10 +5804,10 @@ function countConditions(nodes) {
 }
 
 // src/components/ui/filter/filter-bar.tsx
-import * as React40 from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
-var FilterBar = React40.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx40(
+import * as React41 from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var FilterBar = React41.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx41(
     "div",
     {
       ref,
@@ -5615,8 +5824,8 @@ var FilterBar = React40.forwardRef(
   )
 );
 FilterBar.displayName = "FilterBar";
-var FilterBarLeft = React40.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx40(
+var FilterBarLeft = React41.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx41(
     "div",
     {
       ref,
@@ -5627,8 +5836,8 @@ var FilterBarLeft = React40.forwardRef(
   )
 );
 FilterBarLeft.displayName = "FilterBarLeft";
-var FilterBarRight = React40.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx40(
+var FilterBarRight = React41.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx41(
     "div",
     {
       ref,
@@ -5641,14 +5850,14 @@ var FilterBarRight = React40.forwardRef(
 FilterBarRight.displayName = "FilterBarRight";
 
 // src/components/ui/filter/sort-button.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 import * as PopoverPrimitive3 from "@radix-ui/react-popover";
 import { Icon as Icon26 } from "@l3mpire/icons";
 import {
   faArrowUpSmallBigOutline,
   faArrowDownBigSmallOutline
 } from "@l3mpire/icons";
-import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
 var SortButton = ({
   className,
   fields,
@@ -5658,11 +5867,11 @@ var SortButton = ({
   iconOnly = false,
   ...props
 }) => {
-  const [open, setOpen] = React41.useState(false);
+  const [open, setOpen] = React42.useState(false);
   const activeFieldDef = fields.find((f) => f.id === activeField);
   const activeLabel = activeFieldDef?.label ?? activeField;
-  return /* @__PURE__ */ jsxs36(PopoverPrimitive3.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx41(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(PopoverPrimitive3.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx42(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs37(
       "button",
       {
         type: "button",
@@ -5677,7 +5886,7 @@ var SortButton = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx42(
             Icon26,
             {
               icon: direction === "asc" ? faArrowUpSmallBigOutline : faArrowDownBigSmallOutline,
@@ -5685,17 +5894,17 @@ var SortButton = ({
               className: "shrink-0 text-foreground"
             }
           ),
-          !iconOnly && /* @__PURE__ */ jsxs36("span", { className: "text-sm font-medium leading-sm whitespace-nowrap", children: [
-            /* @__PURE__ */ jsxs36("span", { className: "text-muted-foreground", children: [
+          !iconOnly && /* @__PURE__ */ jsxs37("span", { className: "text-sm font-medium leading-sm whitespace-nowrap", children: [
+            /* @__PURE__ */ jsxs37("span", { className: "text-muted-foreground", children: [
               "Sort by",
               " "
             ] }),
-            /* @__PURE__ */ jsx41("span", { className: "text-foreground", children: activeLabel })
+            /* @__PURE__ */ jsx42("span", { className: "text-foreground", children: activeLabel })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx41(PopoverPrimitive3.Portal, { children: /* @__PURE__ */ jsxs36(
+    /* @__PURE__ */ jsx42(PopoverPrimitive3.Portal, { children: /* @__PURE__ */ jsxs37(
       PopoverPrimitive3.Content,
       {
         sideOffset: 4,
@@ -5709,7 +5918,7 @@ var SortButton = ({
           "min-w-[180px]"
         ),
         children: [
-          /* @__PURE__ */ jsx41("div", { className: "flex flex-col", children: fields.map((field) => /* @__PURE__ */ jsxs36(
+          /* @__PURE__ */ jsx42("div", { className: "flex flex-col", children: fields.map((field) => /* @__PURE__ */ jsxs37(
             "button",
             {
               type: "button",
@@ -5723,7 +5932,7 @@ var SortButton = ({
                 field.id === activeField ? "bg-dropdown-item-hover" : ""
               ),
               children: [
-                /* @__PURE__ */ jsx41(
+                /* @__PURE__ */ jsx42(
                   Icon26,
                   {
                     icon: field.icon,
@@ -5734,7 +5943,7 @@ var SortButton = ({
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx41(
+                /* @__PURE__ */ jsx42(
                   "span",
                   {
                     className: cn(
@@ -5748,9 +5957,9 @@ var SortButton = ({
             },
             field.id
           )) }),
-          /* @__PURE__ */ jsx41("div", { className: "h-px bg-border" }),
-          /* @__PURE__ */ jsxs36("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsxs36(
+          /* @__PURE__ */ jsx42("div", { className: "h-px bg-border" }),
+          /* @__PURE__ */ jsxs37("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxs37(
               "button",
               {
                 type: "button",
@@ -5764,7 +5973,7 @@ var SortButton = ({
                   direction === "asc" ? "bg-dropdown-item-hover" : ""
                 ),
                 children: [
-                  /* @__PURE__ */ jsx41(
+                  /* @__PURE__ */ jsx42(
                     Icon26,
                     {
                       icon: faArrowUpSmallBigOutline,
@@ -5775,7 +5984,7 @@ var SortButton = ({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx41(
+                  /* @__PURE__ */ jsx42(
                     "span",
                     {
                       className: cn(
@@ -5788,7 +5997,7 @@ var SortButton = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs36(
+            /* @__PURE__ */ jsxs37(
               "button",
               {
                 type: "button",
@@ -5802,7 +6011,7 @@ var SortButton = ({
                   direction === "desc" ? "bg-dropdown-item-hover" : ""
                 ),
                 children: [
-                  /* @__PURE__ */ jsx41(
+                  /* @__PURE__ */ jsx42(
                     Icon26,
                     {
                       icon: faArrowDownBigSmallOutline,
@@ -5813,7 +6022,7 @@ var SortButton = ({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx41(
+                  /* @__PURE__ */ jsx42(
                     "span",
                     {
                       className: cn(
@@ -5835,10 +6044,10 @@ var SortButton = ({
 SortButton.displayName = "SortButton";
 
 // src/components/ui/filter/filter-bar-button.tsx
-import * as React42 from "react";
+import * as React43 from "react";
 import { Icon as Icon27, faFilterOutline as faFilterOutline2 } from "@l3mpire/icons";
-import { jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
-var FilterBarButton = React42.forwardRef(({ className, count, iconOnly = false, children, ...props }, ref) => /* @__PURE__ */ jsxs37(
+import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
+var FilterBarButton = React43.forwardRef(({ className, count, iconOnly = false, children, ...props }, ref) => /* @__PURE__ */ jsxs38(
   "button",
   {
     ref,
@@ -5855,7 +6064,7 @@ var FilterBarButton = React42.forwardRef(({ className, count, iconOnly = false,
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx42(
+      /* @__PURE__ */ jsx43(
         Icon27,
         {
           icon: faFilterOutline2,
@@ -5863,18 +6072,18 @@ var FilterBarButton = React42.forwardRef(({ className, count, iconOnly = false,
           className: "shrink-0 text-foreground"
         }
       ),
-      !iconOnly && /* @__PURE__ */ jsx42("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: children ?? "Filters" }),
-      count != null && count > 0 && /* @__PURE__ */ jsx42("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx42("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+      !iconOnly && /* @__PURE__ */ jsx43("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: children ?? "Filters" }),
+      count != null && count > 0 && /* @__PURE__ */ jsx43("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx43("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
     ]
   }
 ));
 FilterBarButton.displayName = "FilterBarButton";
 
 // src/components/ui/filter/save-view-button.tsx
-import * as React43 from "react";
+import * as React44 from "react";
 import { Icon as Icon28, faChevronDownOutline } from "@l3mpire/icons";
-import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
-var SaveViewButton = React43.forwardRef(
+import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
+var SaveViewButton = React44.forwardRef(
   ({ className, label = "Save view", onSave, onDropdown, ...props }, ref) => {
     const sharedStyle = [
       "relative flex items-center justify-center",
@@ -5884,14 +6093,14 @@ var SaveViewButton = React43.forwardRef(
       "shadow-sm cursor-pointer transition-colors",
       "hover:from-btn-solid-brand-bg-hover hover:to-btn-solid-brand-bg-gradient-to-hover"
     ];
-    return /* @__PURE__ */ jsxs38(
+    return /* @__PURE__ */ jsxs39(
       "div",
       {
         ref,
         className: cn("flex items-center", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs38(
+          /* @__PURE__ */ jsxs39(
             "button",
             {
               type: "button",
@@ -5902,12 +6111,12 @@ var SaveViewButton = React43.forwardRef(
                 "rounded-l-md -mr-px"
               ),
               children: [
-                /* @__PURE__ */ jsx43("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-btn-solid-brand-text-default", children: label }),
-                /* @__PURE__ */ jsx43("span", { className: "absolute inset-0 rounded-l-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
+                /* @__PURE__ */ jsx44("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-btn-solid-brand-text-default", children: label }),
+                /* @__PURE__ */ jsx44("span", { className: "absolute inset-0 rounded-l-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs38(
+          /* @__PURE__ */ jsxs39(
             "button",
             {
               type: "button",
@@ -5918,7 +6127,7 @@ var SaveViewButton = React43.forwardRef(
                 "rounded-r-md -ml-px"
               ),
               children: [
-                /* @__PURE__ */ jsx43(
+                /* @__PURE__ */ jsx44(
                   Icon28,
                   {
                     icon: faChevronDownOutline,
@@ -5926,7 +6135,7 @@ var SaveViewButton = React43.forwardRef(
                     className: "text-btn-solid-brand-text-default"
                   }
                 ),
-                /* @__PURE__ */ jsx43("span", { className: "absolute inset-0 rounded-r-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
+                /* @__PURE__ */ jsx44("span", { className: "absolute inset-0 rounded-r-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
               ]
             }
           )
@@ -5939,7 +6148,7 @@ SaveViewButton.displayName = "SaveViewButton";
 
 // src/components/ui/filter/operator-selector.tsx
 import * as PopoverPrimitive4 from "@radix-ui/react-popover";
-import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
 var OperatorSelector = ({
   dataType,
   activeOperator,
@@ -5949,9 +6158,9 @@ var OperatorSelector = ({
   children
 }) => {
   const operators = OPERATORS_BY_TYPE[dataType];
-  return /* @__PURE__ */ jsxs39(PopoverPrimitive4.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx44(PopoverPrimitive4.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx44(PopoverPrimitive4.Portal, { children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs40(PopoverPrimitive4.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx45(PopoverPrimitive4.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx45(PopoverPrimitive4.Portal, { children: /* @__PURE__ */ jsx45(
       PopoverPrimitive4.Content,
       {
         sideOffset: 4,
@@ -5964,7 +6173,7 @@ var OperatorSelector = ({
           "data-[side=bottom]:slide-in-from-top-2",
           "min-w-[180px]"
         ),
-        children: operators.map((op) => /* @__PURE__ */ jsxs39(
+        children: operators.map((op) => /* @__PURE__ */ jsxs40(
           "button",
           {
             type: "button",
@@ -5975,7 +6184,7 @@ var OperatorSelector = ({
               op === activeOperator && "bg-dropdown-item-hover"
             ),
             children: [
-              /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx45(
                 "span",
                 {
                   className: cn(
@@ -5985,7 +6194,7 @@ var OperatorSelector = ({
                   children: op
                 }
               ),
-              isNoValueOperator(op) && /* @__PURE__ */ jsx44("span", { className: "ml-auto text-xs text-muted-foreground", children: "instant" })
+              isNoValueOperator(op) && /* @__PURE__ */ jsx45("span", { className: "ml-auto text-xs text-muted-foreground", children: "instant" })
             ]
           },
           op
@@ -6001,7 +6210,7 @@ var OperatorList = ({
   onSelect
 }) => {
   const operators = OPERATORS_BY_TYPE[dataType];
-  return /* @__PURE__ */ jsx44("div", { className: "flex flex-col", children: operators.map((op) => /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45("div", { className: "flex flex-col", children: operators.map((op) => /* @__PURE__ */ jsx45(
     "button",
     {
       type: "button",
@@ -6011,7 +6220,7 @@ var OperatorList = ({
         "hover:bg-dropdown-item-hover",
         op === activeOperator && "bg-dropdown-item-hover"
       ),
-      children: /* @__PURE__ */ jsx44(
+      children: /* @__PURE__ */ jsx45(
         "span",
         {
           className: cn(
@@ -6041,7 +6250,7 @@ var halfInputClasses = [
 ].join(" ");
 
 // src/components/ui/filter/value-inputs/text-value-input.tsx
-import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
 var TextValueInput = ({
   value,
   onChange,
@@ -6051,8 +6260,8 @@ var TextValueInput = ({
   const handleKeyDown = (e) => {
     if (e.key === "Enter") onSubmit?.();
   };
-  return /* @__PURE__ */ jsxs40("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
-    /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsxs41("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
+    /* @__PURE__ */ jsx46(
       "input",
       {
         type: "text",
@@ -6064,13 +6273,13 @@ var TextValueInput = ({
         className: inputClasses
       }
     ),
-    /* @__PURE__ */ jsx45(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
+    /* @__PURE__ */ jsx46(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 TextValueInput.displayName = "TextValueInput";
 
 // src/components/ui/filter/value-inputs/number-value-input.tsx
-import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
 var NumberValueInput = ({
   value,
   onChange,
@@ -6080,8 +6289,8 @@ var NumberValueInput = ({
   const handleKeyDown = (e) => {
     if (e.key === "Enter") onSubmit?.();
   };
-  return /* @__PURE__ */ jsxs41("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
-    /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsxs42("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
+    /* @__PURE__ */ jsx47(
       "input",
       {
         type: "number",
@@ -6093,7 +6302,7 @@ var NumberValueInput = ({
         className: inputClasses
       }
     ),
-    /* @__PURE__ */ jsx46(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
+    /* @__PURE__ */ jsx47(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 NumberValueInput.displayName = "NumberValueInput";
@@ -6104,9 +6313,9 @@ var NumberRangeValueInput = ({
   className
 }) => {
   const rangeVal = value ?? [0, 0];
-  return /* @__PURE__ */ jsxs41("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
-    /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-base", children: [
-      /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsxs42("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
+    /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-base", children: [
+      /* @__PURE__ */ jsx47(
         "input",
         {
           type: "number",
@@ -6117,8 +6326,8 @@ var NumberRangeValueInput = ({
           className: halfInputClasses
         }
       ),
-      /* @__PURE__ */ jsx46("span", { className: "text-sm text-muted-foreground", children: "and" }),
-      /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsx47("span", { className: "text-sm text-muted-foreground", children: "and" }),
+      /* @__PURE__ */ jsx47(
         "input",
         {
           type: "number",
@@ -6129,16 +6338,16 @@ var NumberRangeValueInput = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx46(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
+    /* @__PURE__ */ jsx47(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 NumberRangeValueInput.displayName = "NumberRangeValueInput";
 
 // src/components/ui/filter/value-inputs/date-value-input.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 
 // src/components/ui/date-picker.tsx
-import * as React44 from "react";
+import * as React45 from "react";
 import * as PopoverPrimitive5 from "@radix-ui/react-popover";
 import {
   Icon as Icon29,
@@ -6147,7 +6356,7 @@ import {
   faArrowRightOutline,
   faCalendarOutline
 } from "@l3mpire/icons";
-import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
 function getDaysInMonth(year, month) {
   return new Date(year, month + 1, 0).getDate();
 }
@@ -6179,16 +6388,16 @@ var MONTH_NAMES = [
   "November",
   "December"
 ];
-var DatePickerContext = React44.createContext(
+var DatePickerContext = React45.createContext(
   null
 );
 function useDatePickerContext() {
-  const ctx = React44.useContext(DatePickerContext);
+  const ctx = React45.useContext(DatePickerContext);
   if (!ctx)
     throw new Error("DatePicker compound components must be used within <DatePicker>");
   return ctx;
 }
-var DatePicker = React44.forwardRef(
+var DatePicker = React45.forwardRef(
   ({
     className,
     mode = "single",
@@ -6199,22 +6408,22 @@ var DatePicker = React44.forwardRef(
     children,
     ...props
   }, ref) => {
-    const today = React44.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-    const initialDate = React44.useMemo(() => {
+    const today = React45.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+    const initialDate = React45.useMemo(() => {
       if (value) {
         if (value instanceof Date) return value;
         return value.from;
       }
       return today;
     }, []);
-    const [month, setMonth] = React44.useState(
+    const [month, setMonth] = React45.useState(
       defaultMonth ?? initialDate.getMonth()
     );
-    const [year, setYear] = React44.useState(
+    const [year, setYear] = React45.useState(
       defaultYear ?? initialDate.getFullYear()
     );
-    const [hoveredDate, setHoveredDate] = React44.useState();
-    const goToPrevMonth = React44.useCallback(() => {
+    const [hoveredDate, setHoveredDate] = React45.useState();
+    const goToPrevMonth = React45.useCallback(() => {
       setMonth((m) => {
         if (m === 0) {
           setYear((y) => y - 1);
@@ -6223,7 +6432,7 @@ var DatePicker = React44.forwardRef(
         return m - 1;
       });
     }, []);
-    const goToNextMonth = React44.useCallback(() => {
+    const goToNextMonth = React45.useCallback(() => {
       setMonth((m) => {
         if (m === 11) {
           setYear((y) => y + 1);
@@ -6232,7 +6441,7 @@ var DatePicker = React44.forwardRef(
         return m + 1;
       });
     }, []);
-    const onSelect = React44.useCallback(
+    const onSelect = React45.useCallback(
       (date) => {
         if (mode === "single") {
           onValueChange?.(date);
@@ -6251,7 +6460,7 @@ var DatePicker = React44.forwardRef(
       },
       [mode, value, onValueChange]
     );
-    const ctxValue = React44.useMemo(
+    const ctxValue = React45.useMemo(
       () => ({
         mode,
         selected: value,
@@ -6278,7 +6487,7 @@ var DatePicker = React44.forwardRef(
         hoveredDate
       ]
     );
-    return /* @__PURE__ */ jsx47(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx48(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx48(
       "div",
       {
         ref,
@@ -6301,22 +6510,22 @@ function defaultFormatDate(date) {
     year: "numeric"
   });
 }
-var DatePickerSelects = React44.forwardRef(({ className, formatDate = defaultFormatDate, ...props }, ref) => {
+var DatePickerSelects = React45.forwardRef(({ className, formatDate = defaultFormatDate, ...props }, ref) => {
   const { selected } = useDatePickerContext();
   const fromDate = selected instanceof Date ? selected : selected?.from;
   const toDate = selected instanceof Date ? void 0 : selected?.to;
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       ref,
       className: cn("flex flex-col items-start pt-lg px-lg", className),
       ...props,
-      children: /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-base w-full", children: [
-        /* @__PURE__ */ jsxs42("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__ */ jsx47("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
-          /* @__PURE__ */ jsx47(Icon29, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+      children: /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-base w-full", children: [
+        /* @__PURE__ */ jsxs43("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__ */ jsx48("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
+          /* @__PURE__ */ jsx48(Icon29, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] }),
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48(
           Icon29,
           {
             icon: faArrowRightOutline,
@@ -6324,9 +6533,9 @@ var DatePickerSelects = React44.forwardRef(({ className, formatDate = defaultFor
             className: "shrink-0 text-datepicker-header-weekday"
           }
         ),
-        /* @__PURE__ */ jsxs42("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__ */ jsx47("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
-          /* @__PURE__ */ jsx47(Icon29, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+        /* @__PURE__ */ jsxs43("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__ */ jsx48("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
+          /* @__PURE__ */ jsx48(Icon29, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] })
       ] })
     }
@@ -6342,7 +6551,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__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43(
     "button",
     {
       type: "button",
@@ -6366,14 +6575,14 @@ var DatePickerDay = ({ date, isOutside }) => {
       ),
       children: [
         date.getDate(),
-        isToday && !isOutside && /* @__PURE__ */ jsx47("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__ */ jsx48("span", { className: "absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1.5 rounded-full bg-datepicker-day-today" })
       ]
     }
   );
 };
-var DatePickerCalendar = React44.forwardRef(({ className, header, ...props }, ref) => {
+var DatePickerCalendar = React45.forwardRef(({ className, header, ...props }, ref) => {
   const { month, year, goToPrevMonth, goToNextMonth } = useDatePickerContext();
-  const weeks = React44.useMemo(() => {
+  const weeks = React45.useMemo(() => {
     const firstDay = new Date(year, month, 1);
     const startOffset = getWeekdayIndex(firstDay);
     const daysInMonth = getDaysInMonth(year, month);
@@ -6413,7 +6622,7 @@ var DatePickerCalendar = React44.forwardRef(({ className, header, ...props }, re
     }
     return result;
   }, [month, year]);
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43(
     "div",
     {
       ref,
@@ -6421,38 +6630,38 @@ var DatePickerCalendar = React44.forwardRef(({ className, header, ...props }, re
       ...props,
       children: [
         header,
-        /* @__PURE__ */ jsxs42("div", { className: "flex flex-col gap-lg p-lg", children: [
-          /* @__PURE__ */ jsxs42("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs42("span", { className: "text-base font-medium leading-base text-datepicker-header-text", children: [
+        /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-lg p-lg", children: [
+          /* @__PURE__ */ jsxs43("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs43("span", { className: "text-base font-medium leading-base text-datepicker-header-text", children: [
               MONTH_NAMES[month],
               " ",
               year
             ] }),
-            /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-xs", children: [
-              /* @__PURE__ */ jsx47(
+            /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-xs", children: [
+              /* @__PURE__ */ jsx48(
                 "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__ */ jsx47(Icon29, { icon: faChevronLeftOutline2, size: "xs", className: "text-datepicker-header-nav" })
+                  children: /* @__PURE__ */ jsx48(Icon29, { icon: faChevronLeftOutline2, size: "xs", className: "text-datepicker-header-nav" })
                 }
               ),
-              /* @__PURE__ */ jsx47(
+              /* @__PURE__ */ jsx48(
                 "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__ */ jsx47(Icon29, { icon: faChevronRightOutline2, size: "xs", className: "text-datepicker-header-nav" })
+                  children: /* @__PURE__ */ jsx48(Icon29, { icon: faChevronRightOutline2, size: "xs", className: "text-datepicker-header-nav" })
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs42("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx47("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsxs43("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx48("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx48(
               "span",
               {
                 className: "w-9 text-center text-xs font-regular leading-xs text-datepicker-header-weekday",
@@ -6460,7 +6669,7 @@ var DatePickerCalendar = React44.forwardRef(({ className, header, ...props }, re
               },
               day
             )) }),
-            /* @__PURE__ */ jsx47("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ jsx47("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ jsx47(
+            /* @__PURE__ */ jsx48("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ jsx48("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ jsx48(
               DatePickerDay,
               {
                 date: day.date,
@@ -6475,10 +6684,10 @@ var DatePickerCalendar = React44.forwardRef(({ className, header, ...props }, re
   );
 });
 DatePickerCalendar.displayName = "DatePickerCalendar";
-var DatePickerSuggestions = React44.forwardRef(
+var DatePickerSuggestions = React45.forwardRef(
   ({ className, suggestions, formatDate = defaultFormatDate, ...props }, ref) => {
     const { onSelect, mode } = useDatePickerContext();
-    const onValueChange = React44.useContext(DatePickerContext) ? void 0 : void 0;
+    const onValueChange = React45.useContext(DatePickerContext) ? void 0 : void 0;
     const ctx = useDatePickerContext();
     const handleClick = (suggestion) => {
       const val = suggestion.getValue();
@@ -6500,7 +6709,7 @@ var DatePickerSuggestions = React44.forwardRef(
       const to = val.to ? formatDate(val.to) : "";
       return to ? `${from} - ${to}` : from;
     };
-    return /* @__PURE__ */ jsxs42(
+    return /* @__PURE__ */ jsxs43(
       "div",
       {
         ref,
@@ -6510,16 +6719,16 @@ var DatePickerSuggestions = React44.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx47("div", { className: "pt-lg px-base", children: /* @__PURE__ */ jsx47("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ jsx47("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
-          /* @__PURE__ */ jsx47("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ jsxs42(
+          /* @__PURE__ */ jsx48("div", { className: "pt-lg px-base", children: /* @__PURE__ */ jsx48("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ jsx48("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
+          /* @__PURE__ */ jsx48("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ jsxs43(
             "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__ */ jsx47("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
-                /* @__PURE__ */ jsx47("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
+                /* @__PURE__ */ jsx48("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
+                /* @__PURE__ */ jsx48("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
               ]
             },
             i
@@ -6530,8 +6739,8 @@ var DatePickerSuggestions = React44.forwardRef(
   }
 );
 DatePickerSuggestions.displayName = "DatePickerSuggestions";
-var DatePickerFooter = React44.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx47(
+var DatePickerFooter = React45.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx48(
     "div",
     {
       ref,
@@ -6547,8 +6756,8 @@ var DatePickerFooter = React44.forwardRef(
   )
 );
 DatePickerFooter.displayName = "DatePickerFooter";
-var DatePickerPanel = React44.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx47(
+var DatePickerPanel = React45.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx48(
     "div",
     {
       ref,
@@ -6561,7 +6770,7 @@ var DatePickerPanel = React44.forwardRef(
 DatePickerPanel.displayName = "DatePickerPanel";
 var DatePickerRoot = PopoverPrimitive5.Root;
 var DatePickerTrigger = PopoverPrimitive5.Trigger;
-var DatePickerPopover = React44.forwardRef(({ className, sideOffset = 4, align = "start", children, ...props }, ref) => /* @__PURE__ */ jsx47(PopoverPrimitive5.Portal, { children: /* @__PURE__ */ jsx47(
+var DatePickerPopover = React45.forwardRef(({ className, sideOffset = 4, align = "start", children, ...props }, ref) => /* @__PURE__ */ jsx48(PopoverPrimitive5.Portal, { children: /* @__PURE__ */ jsx48(
   PopoverPrimitive5.Content,
   {
     ref,
@@ -6637,7 +6846,7 @@ function getDefaultSuggestions(referenceDate) {
 }
 
 // src/components/ui/filter/value-inputs/date-value-input.tsx
-import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs44 } 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"] },
@@ -6651,7 +6860,7 @@ var DateCalendarValueInput = ({
   className
 }) => {
   const isRange = operator === "is between";
-  const pickerValue = React45.useMemo(() => {
+  const pickerValue = React46.useMemo(() => {
     if (isRange) {
       if (Array.isArray(value) && value.length === 2) {
         const [from, to] = value;
@@ -6676,22 +6885,22 @@ var DateCalendarValueInput = ({
       }
     }
   };
-  const suggestions = React45.useMemo(() => getDefaultSuggestions(), []);
-  return /* @__PURE__ */ jsx48("div", { className: cn("flex flex-col", className), children: /* @__PURE__ */ jsxs43(
+  const suggestions = React46.useMemo(() => getDefaultSuggestions(), []);
+  return /* @__PURE__ */ jsx49("div", { className: cn("flex flex-col", className), children: /* @__PURE__ */ jsxs44(
     DatePicker,
     {
       mode: isRange ? "range" : "single",
       value: pickerValue,
       onValueChange: handleValueChange,
       children: [
-        isRange && /* @__PURE__ */ jsx48(DatePickerSelects, {}),
-        isRange ? /* @__PURE__ */ jsxs43(DatePickerPanel, { children: [
-          /* @__PURE__ */ jsx48(DatePickerCalendar, {}),
-          /* @__PURE__ */ jsx48(DatePickerSuggestions, { suggestions })
-        ] }) : /* @__PURE__ */ jsx48(DatePickerCalendar, {}),
-        isRange && /* @__PURE__ */ jsxs43(DatePickerFooter, { children: [
-          /* @__PURE__ */ jsx48("div", {}),
-          /* @__PURE__ */ jsx48(Button, { appearance: "solid", intent: "brand", size: "sm", onClick: onSubmit, children: "Apply" })
+        isRange && /* @__PURE__ */ jsx49(DatePickerSelects, {}),
+        isRange ? /* @__PURE__ */ jsxs44(DatePickerPanel, { children: [
+          /* @__PURE__ */ jsx49(DatePickerCalendar, {}),
+          /* @__PURE__ */ jsx49(DatePickerSuggestions, { suggestions })
+        ] }) : /* @__PURE__ */ jsx49(DatePickerCalendar, {}),
+        isRange && /* @__PURE__ */ jsxs44(DatePickerFooter, { children: [
+          /* @__PURE__ */ jsx49("div", {}),
+          /* @__PURE__ */ jsx49(Button, { appearance: "solid", intent: "brand", size: "sm", onClick: onSubmit, children: "Apply" })
         ] })
       ]
     }
@@ -6703,9 +6912,9 @@ var PresetTagsValueInput = ({
   onChange,
   onSubmit,
   className
-}) => /* @__PURE__ */ jsx48("div", { className: cn("flex flex-col gap-base p-xs max-w-[280px]", className), children: RELATIVE_DATE_PRESETS.map((group) => /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-xs", children: [
-  /* @__PURE__ */ jsx48("span", { className: "text-xs font-medium leading-xs text-muted-foreground uppercase px-xs", children: group.group }),
-  /* @__PURE__ */ jsx48("div", { className: "flex flex-wrap gap-xs", children: group.options.map((preset) => /* @__PURE__ */ jsx48(
+}) => /* @__PURE__ */ jsx49("div", { className: cn("flex flex-col gap-base p-xs max-w-[280px]", className), children: RELATIVE_DATE_PRESETS.map((group) => /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-xs", children: [
+  /* @__PURE__ */ jsx49("span", { className: "text-xs font-medium leading-xs text-muted-foreground uppercase px-xs", children: group.group }),
+  /* @__PURE__ */ jsx49("div", { className: "flex flex-wrap gap-xs", children: group.options.map((preset) => /* @__PURE__ */ jsx49(
     "button",
     {
       type: "button",
@@ -6726,7 +6935,7 @@ PresetTagsValueInput.displayName = "PresetTagsValueInput";
 
 // src/components/ui/filter/value-inputs/select-value-input.tsx
 import { Icon as Icon30 } from "@l3mpire/icons";
-import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
 var intentDotClass = {
   primary: "bg-primary",
   success: "bg-success",
@@ -6734,7 +6943,7 @@ var intentDotClass = {
   critical: "bg-destructive",
   neutral: "bg-muted-foreground"
 };
-var IntentDot = ({ intent }) => /* @__PURE__ */ jsx49(
+var IntentDot = ({ intent }) => /* @__PURE__ */ jsx50(
   "span",
   {
     className: cn(
@@ -6746,7 +6955,7 @@ var IntentDot = ({ intent }) => /* @__PURE__ */ jsx49(
 );
 var OptionLeading = ({ option }) => {
   if (option.icon) {
-    return /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx50(
       Icon30,
       {
         icon: option.icon,
@@ -6756,7 +6965,7 @@ var OptionLeading = ({ option }) => {
     );
   }
   if (option.intent) {
-    return /* @__PURE__ */ jsx49(IntentDot, { intent: option.intent });
+    return /* @__PURE__ */ jsx50(IntentDot, { intent: option.intent });
   }
   return null;
 };
@@ -6765,7 +6974,7 @@ var DynamicOptionRow = ({
   selected,
   multi,
   onClick
-}) => /* @__PURE__ */ jsxs44(
+}) => /* @__PURE__ */ jsxs45(
   "button",
   {
     type: "button",
@@ -6776,14 +6985,14 @@ var DynamicOptionRow = ({
       selected && "bg-dropdown-item-hover"
     ),
     children: [
-      multi && /* @__PURE__ */ jsx49(
+      multi && /* @__PURE__ */ jsx50(
         "span",
         {
           className: cn(
             "mt-[2px] flex items-center justify-center size-4 rounded-xs border transition-colors shrink-0",
             selected ? "bg-primary border-primary" : "border-input bg-background"
           ),
-          children: selected && /* @__PURE__ */ jsx49("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx49(
+          children: selected && /* @__PURE__ */ jsx50("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx50(
             "path",
             {
               d: "M2 5L4 7L8 3",
@@ -6795,9 +7004,9 @@ var DynamicOptionRow = ({
           ) })
         }
       ),
-      /* @__PURE__ */ jsxs44("span", { className: "flex-1 flex flex-col gap-2xs min-w-0", children: [
-        /* @__PURE__ */ jsx49("span", { className: "text-sm font-regular leading-sm text-foreground truncate", children: option.label }),
-        option.description && /* @__PURE__ */ jsx49("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: option.description })
+      /* @__PURE__ */ jsxs45("span", { className: "flex-1 flex flex-col gap-2xs min-w-0", children: [
+        /* @__PURE__ */ jsx50("span", { className: "text-sm font-regular leading-sm text-foreground truncate", children: option.label }),
+        option.description && /* @__PURE__ */ jsx50("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: option.description })
       ] })
     ]
   }
@@ -6814,7 +7023,7 @@ var SingleSelectValueInput = ({
     onChange(v);
     onSubmit?.();
   };
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45(
     "div",
     {
       className: cn(
@@ -6822,7 +7031,7 @@ var SingleSelectValueInput = ({
         className
       ),
       children: [
-        dynamicOptions?.map((opt) => /* @__PURE__ */ jsx49(
+        dynamicOptions?.map((opt) => /* @__PURE__ */ jsx50(
           DynamicOptionRow,
           {
             option: opt,
@@ -6834,7 +7043,7 @@ var SingleSelectValueInput = ({
         )),
         options.map((rawOpt) => {
           const opt = resolveEnumOption(rawOpt);
-          return /* @__PURE__ */ jsxs44(
+          return /* @__PURE__ */ jsxs45(
             "button",
             {
               type: "button",
@@ -6845,8 +7054,8 @@ var SingleSelectValueInput = ({
                 value === opt.value && "bg-dropdown-item-hover"
               ),
               children: [
-                /* @__PURE__ */ jsx49(OptionLeading, { option: opt }),
-                /* @__PURE__ */ jsx49("span", { className: "text-sm font-regular leading-sm text-foreground truncate", children: opt.label })
+                /* @__PURE__ */ jsx50(OptionLeading, { option: opt }),
+                /* @__PURE__ */ jsx50("span", { className: "text-sm font-regular leading-sm text-foreground truncate", children: opt.label })
               ]
             },
             opt.value
@@ -6870,9 +7079,9 @@ var MultiSelectValueInput = ({
     const next = selected.includes(v) ? selected.filter((s) => s !== v) : [...selected, v];
     onChange(next);
   };
-  return /* @__PURE__ */ jsxs44("div", { className: cn("flex flex-col gap-xs p-xs", className), children: [
-    /* @__PURE__ */ jsxs44("div", { className: "flex flex-col max-h-[240px] overflow-y-auto", children: [
-      dynamicOptions?.map((opt) => /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs45("div", { className: cn("flex flex-col gap-xs p-xs", className), children: [
+    /* @__PURE__ */ jsxs45("div", { className: "flex flex-col max-h-[240px] overflow-y-auto", children: [
+      dynamicOptions?.map((opt) => /* @__PURE__ */ jsx50(
         DynamicOptionRow,
         {
           option: opt,
@@ -6885,7 +7094,7 @@ var MultiSelectValueInput = ({
       options.map((rawOpt) => {
         const opt = resolveEnumOption(rawOpt);
         const isSelected = selected.includes(opt.value);
-        return /* @__PURE__ */ jsxs44(
+        return /* @__PURE__ */ jsxs45(
           "button",
           {
             type: "button",
@@ -6895,14 +7104,14 @@ var MultiSelectValueInput = ({
               "hover:bg-dropdown-item-hover"
             ),
             children: [
-              /* @__PURE__ */ jsx49(
+              /* @__PURE__ */ jsx50(
                 "span",
                 {
                   className: cn(
                     "flex items-center justify-center size-4 rounded-xs border transition-colors shrink-0",
                     isSelected ? "bg-primary border-primary" : "border-input bg-background"
                   ),
-                  children: isSelected && /* @__PURE__ */ jsx49("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx49(
+                  children: isSelected && /* @__PURE__ */ jsx50("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx50(
                     "path",
                     {
                       d: "M2 5L4 7L8 3",
@@ -6914,21 +7123,21 @@ var MultiSelectValueInput = ({
                   ) })
                 }
               ),
-              /* @__PURE__ */ jsx49(OptionLeading, { option: opt }),
-              /* @__PURE__ */ jsx49("span", { className: "text-sm font-regular leading-sm text-foreground truncate", children: opt.label })
+              /* @__PURE__ */ jsx50(OptionLeading, { option: opt }),
+              /* @__PURE__ */ jsx50("span", { className: "text-sm font-regular leading-sm text-foreground truncate", children: opt.label })
             ]
           },
           opt.value
         );
       })
     ] }),
-    /* @__PURE__ */ jsx49(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
+    /* @__PURE__ */ jsx50(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 MultiSelectValueInput.displayName = "MultiSelectValueInput";
 
 // src/components/ui/filter/value-inputs/relation-value-input.tsx
-import { jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
 var RelationValueInput = ({
   value,
   onChange,
@@ -6938,8 +7147,8 @@ var RelationValueInput = ({
   const handleKeyDown = (e) => {
     if (e.key === "Enter") onSubmit?.();
   };
-  return /* @__PURE__ */ jsxs45("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
-    /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs46("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
+    /* @__PURE__ */ jsx51(
       "input",
       {
         type: "text",
@@ -6951,13 +7160,13 @@ var RelationValueInput = ({
         className: inputClasses
       }
     ),
-    /* @__PURE__ */ jsx50(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
+    /* @__PURE__ */ jsx51(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 RelationValueInput.displayName = "RelationValueInput";
 
 // src/components/ui/filter/value-input.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var ValueInput = ({
   dataType,
   operator,
@@ -6972,13 +7181,13 @@ var ValueInput = ({
   if (!inputType) return null;
   switch (inputType) {
     case "TextInput":
-      return /* @__PURE__ */ jsx51(TextValueInput, { value, onChange, onSubmit, className });
+      return /* @__PURE__ */ jsx52(TextValueInput, { value, onChange, onSubmit, className });
     case "NumberInput":
-      return /* @__PURE__ */ jsx51(NumberValueInput, { value, onChange, onSubmit, className });
+      return /* @__PURE__ */ jsx52(NumberValueInput, { value, onChange, onSubmit, className });
     case "NumberRange":
-      return /* @__PURE__ */ jsx51(NumberRangeValueInput, { value, onChange, onSubmit, className });
+      return /* @__PURE__ */ jsx52(NumberRangeValueInput, { value, onChange, onSubmit, className });
     case "SingleSelect":
-      return /* @__PURE__ */ jsx51(
+      return /* @__PURE__ */ jsx52(
         SingleSelectValueInput,
         {
           value,
@@ -6990,7 +7199,7 @@ var ValueInput = ({
         }
       );
     case "MultiSelect":
-      return /* @__PURE__ */ jsx51(
+      return /* @__PURE__ */ jsx52(
         MultiSelectValueInput,
         {
           value,
@@ -7003,7 +7212,7 @@ var ValueInput = ({
       );
     case "DatePicker":
     case "DateRange":
-      return /* @__PURE__ */ jsx51(
+      return /* @__PURE__ */ jsx52(
         DateCalendarValueInput,
         {
           operator,
@@ -7015,7 +7224,7 @@ var ValueInput = ({
       );
     case "RelationPicker":
     case "MultiRelationPicker":
-      return /* @__PURE__ */ jsx51(RelationValueInput, { value, onChange, onSubmit, className });
+      return /* @__PURE__ */ jsx52(RelationValueInput, { value, onChange, onSubmit, className });
     default:
       return null;
   }
@@ -7023,7 +7232,7 @@ var ValueInput = ({
 ValueInput.displayName = "ValueInput";
 
 // src/components/ui/filter/property-selector.tsx
-import * as React46 from "react";
+import * as React47 from "react";
 import * as PopoverPrimitive6 from "@radix-ui/react-popover";
 import {
   Icon as Icon31,
@@ -7032,10 +7241,10 @@ import {
   faMagnifyingGlassOutline,
   faFilterOutline as faFilterOutline3
 } from "@l3mpire/icons";
-import { jsx as jsx52, jsxs as jsxs46 } from "react/jsx-runtime";
-var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ jsxs46("div", { className: "shrink-0 flex flex-col", children: [
-  /* @__PURE__ */ jsx52("div", { className: "h-px bg-dropdown-border mx-xs" }),
-  /* @__PURE__ */ jsxs46(
+import { jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
+var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ jsxs47("div", { className: "shrink-0 flex flex-col", children: [
+  /* @__PURE__ */ jsx53("div", { className: "h-px bg-dropdown-border mx-xs" }),
+  /* @__PURE__ */ jsxs47(
     "button",
     {
       type: "button",
@@ -7043,7 +7252,7 @@ var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ jsxs46("div",
       onClick,
       className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
       children: [
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx53(
           Icon31,
           {
             icon: faFilterOutline3,
@@ -7051,8 +7260,8 @@ var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ jsxs46("div",
             className: "shrink-0 text-dropdown-item-icon"
           }
         ),
-        /* @__PURE__ */ jsx52("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: "Advanced filter" }),
-        count > 0 && /* @__PURE__ */ jsxs46("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx53("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: "Advanced filter" }),
+        count > 0 && /* @__PURE__ */ jsxs47("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: [
           count,
           " ",
           count === 1 ? "rule" : "rules"
@@ -7076,26 +7285,26 @@ var PropertySelector = ({
     onAdvancedFilter?.();
   };
   const showAdvancedFooter = !!onAdvancedFilter;
-  const [activeGroup, setActiveGroup] = React46.useState(null);
-  const [search, setSearch] = React46.useState("");
-  React46.useEffect(() => {
+  const [activeGroup, setActiveGroup] = React47.useState(null);
+  const [search, setSearch] = React47.useState("");
+  React47.useEffect(() => {
     if (!open) {
       setActiveGroup(null);
       setSearch("");
     }
   }, [open]);
-  const pinnedGroupIds = React46.useMemo(() => {
+  const pinnedGroupIds = React47.useMemo(() => {
     const set = /* @__PURE__ */ new Set();
     for (const p of properties) {
       if (p.groupPinned) set.add(p.group);
     }
     return set;
   }, [properties]);
-  const pinnedProperties = React46.useMemo(
+  const pinnedProperties = React47.useMemo(
     () => properties.filter((p) => pinnedGroupIds.has(p.group)),
     [properties, pinnedGroupIds]
   );
-  const groups = React46.useMemo(() => {
+  const groups = React47.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const prop of properties) {
       if (pinnedGroupIds.has(prop.group)) continue;
@@ -7113,14 +7322,14 @@ var PropertySelector = ({
     }
     return Array.from(map.values());
   }, [properties, pinnedGroupIds]);
-  const filteredPinnedProperties = React46.useMemo(() => {
+  const filteredPinnedProperties = React47.useMemo(() => {
     if (!search || activeGroup) return pinnedProperties;
     const lower = search.toLowerCase();
     return pinnedProperties.filter(
       (p) => p.label.toLowerCase().includes(lower)
     );
   }, [pinnedProperties, search, activeGroup]);
-  const filteredGroups = React46.useMemo(() => {
+  const filteredGroups = React47.useMemo(() => {
     if (!search || activeGroup) return groups;
     const lower = search.toLowerCase();
     return groups.filter(
@@ -7129,7 +7338,7 @@ var PropertySelector = ({
       )
     );
   }, [groups, properties, search, activeGroup]);
-  const filteredProperties = React46.useMemo(() => {
+  const filteredProperties = React47.useMemo(() => {
     if (!activeGroup) return [];
     const groupProps = properties.filter((p) => p.group === activeGroup);
     if (!search) return groupProps;
@@ -7137,16 +7346,16 @@ var PropertySelector = ({
     return groupProps.filter((p) => p.label.toLowerCase().includes(lower));
   }, [properties, activeGroup, search]);
   const activeGroupInfo = groups.find((g) => g.group === activeGroup);
-  const nonPinnedSearchResults = React46.useMemo(() => {
+  const nonPinnedSearchResults = React47.useMemo(() => {
     if (!search || activeGroup) return [];
     const lower = search.toLowerCase();
     return properties.filter(
       (p) => !pinnedGroupIds.has(p.group) && p.label.toLowerCase().includes(lower)
     );
   }, [properties, search, activeGroup, pinnedGroupIds]);
-  return /* @__PURE__ */ jsxs46(PopoverPrimitive6.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx52(PopoverPrimitive6.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx52(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs47(PopoverPrimitive6.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx53(PopoverPrimitive6.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx53(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ jsxs47(
       PopoverPrimitive6.Content,
       {
         sideOffset: 4,
@@ -7163,9 +7372,9 @@ var PropertySelector = ({
         children: [
           activeGroup === null ? (
             /* ── Level 1: Search + (pinned props) + Categories ──────── */
-            /* @__PURE__ */ jsxs46("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
-              /* @__PURE__ */ jsxs46("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
-                /* @__PURE__ */ jsx52(
+            /* @__PURE__ */ jsxs47("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
+              /* @__PURE__ */ jsxs47("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
+                /* @__PURE__ */ jsx53(
                   Icon31,
                   {
                     icon: faMagnifyingGlassOutline,
@@ -7173,7 +7382,7 @@ var PropertySelector = ({
                     className: "shrink-0 text-muted-foreground"
                   }
                 ),
-                /* @__PURE__ */ jsx52(
+                /* @__PURE__ */ jsx53(
                   "input",
                   {
                     type: "text",
@@ -7185,8 +7394,8 @@ var PropertySelector = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs46("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto", children: [
-                filteredPinnedProperties.map((prop) => /* @__PURE__ */ jsxs46(
+              /* @__PURE__ */ jsxs47("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto", children: [
+                filteredPinnedProperties.map((prop) => /* @__PURE__ */ jsxs47(
                   "button",
                   {
                     type: "button",
@@ -7196,7 +7405,7 @@ var PropertySelector = ({
                     },
                     className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                     children: [
-                      /* @__PURE__ */ jsx52(
+                      /* @__PURE__ */ jsx53(
                         Icon31,
                         {
                           icon: prop.icon,
@@ -7204,14 +7413,14 @@ var PropertySelector = ({
                           className: "shrink-0 text-dropdown-item-icon"
                         }
                       ),
-                      /* @__PURE__ */ jsx52("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label })
+                      /* @__PURE__ */ jsx53("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label })
                     ]
                   },
                   prop.id
                 )),
                 search ? (
                   /* ── Flat matches across non-pinned groups ────────── */
-                  nonPinnedSearchResults.map((prop) => /* @__PURE__ */ jsxs46(
+                  nonPinnedSearchResults.map((prop) => /* @__PURE__ */ jsxs47(
                     "button",
                     {
                       type: "button",
@@ -7221,7 +7430,7 @@ var PropertySelector = ({
                       },
                       className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                       children: [
-                        /* @__PURE__ */ jsx52(
+                        /* @__PURE__ */ jsx53(
                           Icon31,
                           {
                             icon: prop.icon,
@@ -7229,15 +7438,15 @@ var PropertySelector = ({
                             className: "shrink-0 text-dropdown-item-icon"
                           }
                         ),
-                        /* @__PURE__ */ jsx52("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label }),
-                        /* @__PURE__ */ jsx52("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: prop.groupLabel })
+                        /* @__PURE__ */ jsx53("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label }),
+                        /* @__PURE__ */ jsx53("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: prop.groupLabel })
                       ]
                     },
                     prop.id
                   ))
                 ) : (
                   /* ── Category list ────────────────────────────────── */
-                  filteredGroups.map((g) => /* @__PURE__ */ jsxs46(
+                  filteredGroups.map((g) => /* @__PURE__ */ jsxs47(
                     "button",
                     {
                       type: "button",
@@ -7247,7 +7456,7 @@ var PropertySelector = ({
                       },
                       className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                       children: [
-                        /* @__PURE__ */ jsx52(
+                        /* @__PURE__ */ jsx53(
                           Icon31,
                           {
                             icon: g.groupIcon,
@@ -7255,9 +7464,9 @@ var PropertySelector = ({
                             className: "shrink-0 text-dropdown-item-icon"
                           }
                         ),
-                        /* @__PURE__ */ jsx52("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: g.groupLabel }),
-                        /* @__PURE__ */ jsx52("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: g.count }),
-                        /* @__PURE__ */ jsx52(
+                        /* @__PURE__ */ jsx53("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: g.groupLabel }),
+                        /* @__PURE__ */ jsx53("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: g.count }),
+                        /* @__PURE__ */ jsx53(
                           Icon31,
                           {
                             icon: faChevronRightOutline3,
@@ -7270,13 +7479,13 @@ var PropertySelector = ({
                     g.group
                   ))
                 ),
-                filteredPinnedProperties.length === 0 && (search ? nonPinnedSearchResults.length === 0 : filteredGroups.length === 0) && /* @__PURE__ */ jsx52("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
+                filteredPinnedProperties.length === 0 && (search ? nonPinnedSearchResults.length === 0 : filteredGroups.length === 0) && /* @__PURE__ */ jsx53("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
               ] })
             ] })
           ) : (
             /* ── Level 2: Properties ─────────────────────────────────── */
-            /* @__PURE__ */ jsxs46("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
-              /* @__PURE__ */ jsxs46(
+            /* @__PURE__ */ jsxs47("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
+              /* @__PURE__ */ jsxs47(
                 "button",
                 {
                   type: "button",
@@ -7286,7 +7495,7 @@ var PropertySelector = ({
                   },
                   className: "shrink-0 flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                   children: [
-                    /* @__PURE__ */ jsx52(
+                    /* @__PURE__ */ jsx53(
                       Icon31,
                       {
                         icon: faChevronLeftOutline3,
@@ -7294,12 +7503,12 @@ var PropertySelector = ({
                         className: "shrink-0 text-dropdown-item-icon"
                       }
                     ),
-                    /* @__PURE__ */ jsx52("span", { className: "flex-1 text-xs font-medium leading-xs text-muted-foreground text-left truncate", children: activeGroupInfo?.groupLabel })
+                    /* @__PURE__ */ jsx53("span", { className: "flex-1 text-xs font-medium leading-xs text-muted-foreground text-left truncate", children: activeGroupInfo?.groupLabel })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs46("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
-                /* @__PURE__ */ jsx52(
+              /* @__PURE__ */ jsxs47("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
+                /* @__PURE__ */ jsx53(
                   Icon31,
                   {
                     icon: faMagnifyingGlassOutline,
@@ -7307,7 +7516,7 @@ var PropertySelector = ({
                     className: "shrink-0 text-muted-foreground"
                   }
                 ),
-                /* @__PURE__ */ jsx52(
+                /* @__PURE__ */ jsx53(
                   "input",
                   {
                     type: "text",
@@ -7319,8 +7528,8 @@ var PropertySelector = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs46("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto", children: [
-                filteredProperties.map((prop) => /* @__PURE__ */ jsxs46(
+              /* @__PURE__ */ jsxs47("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto", children: [
+                filteredProperties.map((prop) => /* @__PURE__ */ jsxs47(
                   "button",
                   {
                     type: "button",
@@ -7330,7 +7539,7 @@ var PropertySelector = ({
                     },
                     className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                     children: [
-                      /* @__PURE__ */ jsx52(
+                      /* @__PURE__ */ jsx53(
                         Icon31,
                         {
                           icon: prop.icon,
@@ -7338,16 +7547,16 @@ var PropertySelector = ({
                           className: "shrink-0 text-dropdown-item-icon"
                         }
                       ),
-                      /* @__PURE__ */ jsx52("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label })
+                      /* @__PURE__ */ jsx53("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label })
                     ]
                   },
                   prop.id
                 )),
-                filteredProperties.length === 0 && /* @__PURE__ */ jsx52("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
+                filteredProperties.length === 0 && /* @__PURE__ */ jsx53("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
               ] })
             ] })
           ),
-          showAdvancedFooter && /* @__PURE__ */ jsx52(
+          showAdvancedFooter && /* @__PURE__ */ jsx53(
             AdvancedFilterFooter,
             {
               onClick: handleAdvancedClick,
@@ -7364,7 +7573,7 @@ PropertySelector.displayName = "PropertySelector";
 // src/components/ui/filter/kebab-menu.tsx
 import * as PopoverPrimitive7 from "@radix-ui/react-popover";
 import { Icon as Icon32, faArrowRightOutline as faArrowRightOutline2, faTrashOutline } from "@l3mpire/icons";
-import { jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs48 } from "react/jsx-runtime";
 var KebabMenu = ({
   onConvertToAdvanced,
   hasAdvancedFilters = false,
@@ -7372,9 +7581,9 @@ var KebabMenu = ({
   open,
   onOpenChange,
   children
-}) => /* @__PURE__ */ jsxs47(PopoverPrimitive7.Root, { open, onOpenChange, children: [
-  /* @__PURE__ */ jsx53(PopoverPrimitive7.Trigger, { asChild: true, children }),
-  /* @__PURE__ */ jsx53(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsxs47(
+}) => /* @__PURE__ */ jsxs48(PopoverPrimitive7.Root, { open, onOpenChange, children: [
+  /* @__PURE__ */ jsx54(PopoverPrimitive7.Trigger, { asChild: true, children }),
+  /* @__PURE__ */ jsx54(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsxs48(
     PopoverPrimitive7.Content,
     {
       sideOffset: 4,
@@ -7388,7 +7597,7 @@ var KebabMenu = ({
         "min-w-[210px]"
       ),
       children: [
-        onConvertToAdvanced && /* @__PURE__ */ jsxs47(
+        onConvertToAdvanced && /* @__PURE__ */ jsxs48(
           "button",
           {
             type: "button",
@@ -7398,7 +7607,7 @@ var KebabMenu = ({
             },
             className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
             children: [
-              /* @__PURE__ */ jsx53(
+              /* @__PURE__ */ jsx54(
                 Icon32,
                 {
                   icon: faArrowRightOutline2,
@@ -7406,12 +7615,12 @@ var KebabMenu = ({
                   className: "shrink-0 text-dropdown-item-icon"
                 }
               ),
-              /* @__PURE__ */ jsx53("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text", children: hasAdvancedFilters ? "Add to advanced filters" : "Convert to advanced" })
+              /* @__PURE__ */ jsx54("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text", children: hasAdvancedFilters ? "Add to advanced filters" : "Convert to advanced" })
             ]
           }
         ),
-        onConvertToAdvanced && onDelete && /* @__PURE__ */ jsx53("div", { className: "h-px mx-base my-xs bg-border" }),
-        onDelete && /* @__PURE__ */ jsxs47(
+        onConvertToAdvanced && onDelete && /* @__PURE__ */ jsx54("div", { className: "h-px mx-base my-xs bg-border" }),
+        onDelete && /* @__PURE__ */ jsxs48(
           "button",
           {
             type: "button",
@@ -7421,7 +7630,7 @@ var KebabMenu = ({
             },
             className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
             children: [
-              /* @__PURE__ */ jsx53(
+              /* @__PURE__ */ jsx54(
                 Icon32,
                 {
                   icon: faTrashOutline,
@@ -7429,7 +7638,7 @@ var KebabMenu = ({
                   className: "shrink-0 text-destructive"
                 }
               ),
-              /* @__PURE__ */ jsx53("span", { className: "text-sm font-regular leading-sm text-destructive", children: "Delete filter" })
+              /* @__PURE__ */ jsx54("span", { className: "text-sm font-regular leading-sm text-destructive", children: "Delete filter" })
             ]
           }
         )
@@ -7440,10 +7649,10 @@ var KebabMenu = ({
 KebabMenu.displayName = "KebabMenu";
 
 // src/components/ui/filter/filter-editor.tsx
-import * as React47 from "react";
+import * as React48 from "react";
 import * as PopoverPrimitive8 from "@radix-ui/react-popover";
 import { Icon as Icon33 } from "@l3mpire/icons";
-import { jsx as jsx54, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs49 } from "react/jsx-runtime";
 var FilterEditor = ({
   propertyDef,
   condition,
@@ -7454,16 +7663,16 @@ var FilterEditor = ({
   onOpenChange,
   children
 }) => {
-  const [view, setView] = React47.useState(
+  const [view, setView] = React48.useState(
     mode === "add" ? "value" : "operator"
   );
-  const [localOperator, setLocalOperator] = React47.useState(
+  const [localOperator, setLocalOperator] = React48.useState(
     condition.operator
   );
-  const [localValue, setLocalValue] = React47.useState(
+  const [localValue, setLocalValue] = React48.useState(
     condition.value
   );
-  React47.useEffect(() => {
+  React48.useEffect(() => {
     if (open) {
       setView(mode === "add" ? "value" : "operator");
       setLocalOperator(condition.operator);
@@ -7488,9 +7697,9 @@ var FilterEditor = ({
     onOpenChange?.(false);
     onClose();
   };
-  return /* @__PURE__ */ jsxs48(PopoverPrimitive8.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx54(PopoverPrimitive8.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx54(PopoverPrimitive8.Portal, { children: /* @__PURE__ */ jsxs48(
+  return /* @__PURE__ */ jsxs49(PopoverPrimitive8.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx55(PopoverPrimitive8.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx55(PopoverPrimitive8.Portal, { children: /* @__PURE__ */ jsxs49(
       PopoverPrimitive8.Content,
       {
         sideOffset: 4,
@@ -7504,8 +7713,8 @@ var FilterEditor = ({
           "min-w-[240px]"
         ),
         children: [
-          /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-base px-base pt-base pb-xs border-b border-border", children: [
-            /* @__PURE__ */ jsx54(
+          /* @__PURE__ */ jsxs49("div", { className: "flex items-center gap-base px-base pt-base pb-xs border-b border-border", children: [
+            /* @__PURE__ */ jsx55(
               Icon33,
               {
                 icon: propertyDef.icon,
@@ -7513,8 +7722,8 @@ var FilterEditor = ({
                 className: "shrink-0 text-dropdown-item-icon"
               }
             ),
-            /* @__PURE__ */ jsx54("span", { className: "text-sm font-medium leading-sm text-foreground", children: propertyDef.label }),
-            localOperator && view === "value" && /* @__PURE__ */ jsxs48(
+            /* @__PURE__ */ jsx55("span", { className: "text-sm font-medium leading-sm text-foreground", children: propertyDef.label }),
+            localOperator && view === "value" && /* @__PURE__ */ jsxs49(
               "button",
               {
                 type: "button",
@@ -7527,14 +7736,14 @@ var FilterEditor = ({
               }
             )
           ] }),
-          view === "operator" ? /* @__PURE__ */ jsx54("div", { className: "p-xs", children: /* @__PURE__ */ jsx54(
+          view === "operator" ? /* @__PURE__ */ jsx55("div", { className: "p-xs", children: /* @__PURE__ */ jsx55(
             OperatorList,
             {
               dataType: propertyDef.type,
               activeOperator: localOperator,
               onSelect: handleOperatorSelect
             }
-          ) }) : localOperator && /* @__PURE__ */ jsx54(
+          ) }) : localOperator && /* @__PURE__ */ jsx55(
             ValueInput,
             {
               dataType: propertyDef.type,
@@ -7554,10 +7763,10 @@ var FilterEditor = ({
 FilterEditor.displayName = "FilterEditor";
 
 // src/components/ui/filter/interactive-filter-chip.tsx
-import * as React48 from "react";
+import * as React49 from "react";
 import * as PopoverPrimitive9 from "@radix-ui/react-popover";
 import { Icon as Icon34 } from "@l3mpire/icons";
-import { jsx as jsx55, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs50 } from "react/jsx-runtime";
 var SegmentPopover = ({
   open,
   onOpenChange,
@@ -7565,9 +7774,9 @@ var SegmentPopover = ({
   children,
   align = "start",
   minWidth = "240px"
-}) => /* @__PURE__ */ jsxs49(PopoverPrimitive9.Root, { open, onOpenChange, children: [
-  /* @__PURE__ */ jsx55(PopoverPrimitive9.Trigger, { asChild: true, children: trigger }),
-  /* @__PURE__ */ jsx55(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ jsx55(
+}) => /* @__PURE__ */ jsxs50(PopoverPrimitive9.Root, { open, onOpenChange, children: [
+  /* @__PURE__ */ jsx56(PopoverPrimitive9.Trigger, { asChild: true, children: trigger }),
+  /* @__PURE__ */ jsx56(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ jsx56(
     PopoverPrimitive9.Content,
     {
       sideOffset: 4,
@@ -7597,19 +7806,19 @@ var InteractiveFilterChip = ({
   hasAdvancedFilters = false,
   className
 }) => {
-  const [operatorOpen, setOperatorOpen] = React48.useState(false);
-  const [valueOpen, setValueOpen] = React48.useState(false);
-  const [propertyOpen, setPropertyOpen] = React48.useState(false);
-  const [kebabOpen, setKebabOpen] = React48.useState(false);
-  const [pendingValueOpen, setPendingValueOpen] = React48.useState(false);
-  const autoOpenHandled = React48.useRef(false);
-  React48.useEffect(() => {
+  const [operatorOpen, setOperatorOpen] = React49.useState(false);
+  const [valueOpen, setValueOpen] = React49.useState(false);
+  const [propertyOpen, setPropertyOpen] = React49.useState(false);
+  const [kebabOpen, setKebabOpen] = React49.useState(false);
+  const [pendingValueOpen, setPendingValueOpen] = React49.useState(false);
+  const autoOpenHandled = React49.useRef(false);
+  React49.useEffect(() => {
     if (autoOpen && !autoOpenHandled.current && condition.operator && !isNoValueOperator(condition.operator)) {
       autoOpenHandled.current = true;
       setValueOpen(true);
     }
   }, [autoOpen, condition.operator]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     if (!operatorOpen && pendingValueOpen) {
       setPendingValueOpen(false);
       setValueOpen(true);
@@ -7643,13 +7852,13 @@ var InteractiveFilterChip = ({
   );
   const hasValue = hasOperator && displayValue != null;
   const badgeCount = getBadgeCount(condition.value);
-  const valueLeading = React48.useMemo(() => {
+  const valueLeading = React49.useMemo(() => {
     const v = condition.value;
     const raw = typeof v === "string" ? v : Array.isArray(v) && typeof v[0] === "string" ? v[0] : null;
     if (!raw) return null;
     const opt = findEnumOption(raw, propertyDef.options);
     if (opt?.icon) {
-      return /* @__PURE__ */ jsx55(
+      return /* @__PURE__ */ jsx56(
         Icon34,
         {
           icon: opt.icon,
@@ -7660,7 +7869,7 @@ var InteractiveFilterChip = ({
     }
     return null;
   }, [condition.value, propertyDef.options]);
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs50(
     "div",
     {
       className: cn(
@@ -7669,7 +7878,7 @@ var InteractiveFilterChip = ({
         className
       ),
       children: [
-        properties ? /* @__PURE__ */ jsx55(
+        properties ? /* @__PURE__ */ jsx56(
           PropertySelector,
           {
             properties,
@@ -7679,7 +7888,7 @@ var InteractiveFilterChip = ({
             },
             open: propertyOpen,
             onOpenChange: setPropertyOpen,
-            children: /* @__PURE__ */ jsx55("div", { children: /* @__PURE__ */ jsx55(
+            children: /* @__PURE__ */ jsx56("div", { children: /* @__PURE__ */ jsx56(
               FilterChipSegment,
               {
                 segmentType: "property",
@@ -7690,7 +7899,7 @@ var InteractiveFilterChip = ({
               }
             ) })
           }
-        ) : /* @__PURE__ */ jsx55(
+        ) : /* @__PURE__ */ jsx56(
           FilterChipSegment,
           {
             segmentType: "property",
@@ -7699,13 +7908,13 @@ var InteractiveFilterChip = ({
             label: propertyDef.label
           }
         ),
-        /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsx56(
           SegmentPopover,
           {
             open: operatorOpen,
             onOpenChange: setOperatorOpen,
             minWidth: "180px",
-            trigger: /* @__PURE__ */ jsx55("div", { children: /* @__PURE__ */ jsx55(
+            trigger: /* @__PURE__ */ jsx56("div", { children: /* @__PURE__ */ jsx56(
               FilterChipSegment,
               {
                 segmentType: hasOperator ? "operator" : "placeholder",
@@ -7714,7 +7923,7 @@ var InteractiveFilterChip = ({
                 onClick: () => setOperatorOpen(true)
               }
             ) }),
-            children: /* @__PURE__ */ jsx55("div", { className: "p-xs", children: /* @__PURE__ */ jsx55(
+            children: /* @__PURE__ */ jsx56("div", { className: "p-xs", children: /* @__PURE__ */ jsx56(
               OperatorList,
               {
                 dataType: propertyDef.type,
@@ -7727,13 +7936,13 @@ var InteractiveFilterChip = ({
         hasOperator && condition.operator && !isNoValueOperator(condition.operator) && (() => {
           const inputType = getValueInputType(propertyDef.type, condition.operator);
           const dateWide = inputType === "DatePicker" || inputType === "DateRange";
-          return /* @__PURE__ */ jsx55(
+          return /* @__PURE__ */ jsx56(
             SegmentPopover,
             {
               open: valueOpen,
               onOpenChange: setValueOpen,
               minWidth: dateWide ? "auto" : "240px",
-              trigger: /* @__PURE__ */ jsx55("div", { children: /* @__PURE__ */ jsx55(
+              trigger: /* @__PURE__ */ jsx56("div", { children: /* @__PURE__ */ jsx56(
                 FilterChipSegment,
                 {
                   segmentType: hasValue ? "value" : "placeholder",
@@ -7744,7 +7953,7 @@ var InteractiveFilterChip = ({
                   onClick: () => setValueOpen(true)
                 }
               ) }),
-              children: /* @__PURE__ */ jsx55(
+              children: /* @__PURE__ */ jsx56(
                 ValueInput,
                 {
                   dataType: propertyDef.type,
@@ -7759,7 +7968,7 @@ var InteractiveFilterChip = ({
             }
           );
         })(),
-        hasOperator && condition.operator && isNoValueOperator(condition.operator) && /* @__PURE__ */ jsx55(
+        hasOperator && condition.operator && isNoValueOperator(condition.operator) && /* @__PURE__ */ jsx56(
           FilterChipSegment,
           {
             segmentType: "value",
@@ -7767,7 +7976,7 @@ var InteractiveFilterChip = ({
             label: condition.operator
           }
         ),
-        hasOperator && /* @__PURE__ */ jsx55(
+        hasOperator && /* @__PURE__ */ jsx56(
           KebabMenu,
           {
             open: kebabOpen,
@@ -7775,7 +7984,7 @@ var InteractiveFilterChip = ({
             onConvertToAdvanced,
             hasAdvancedFilters,
             onDelete,
-            children: /* @__PURE__ */ jsx55("div", { children: /* @__PURE__ */ jsx55(
+            children: /* @__PURE__ */ jsx56("div", { children: /* @__PURE__ */ jsx56(
               FilterChipSegment,
               {
                 segmentType: "button",
@@ -7794,13 +8003,13 @@ var InteractiveFilterChip = ({
 InteractiveFilterChip.displayName = "InteractiveFilterChip";
 
 // src/components/ui/filter/filter-system.tsx
-import * as React56 from "react";
+import * as React57 from "react";
 import { Icon as Icon41, faPlusOutline as faPlusOutline5 } from "@l3mpire/icons";
 
 // src/components/ui/filter/advanced-chip.tsx
-import * as React49 from "react";
+import * as React50 from "react";
 import { Icon as Icon35, faXmarkOutline as faXmarkOutline3, faFilterOutline as faFilterOutline4 } from "@l3mpire/icons";
-import { jsx as jsx56, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
 var btnBase = [
   "flex items-center justify-center",
   "min-h-[32px] max-h-[32px]",
@@ -7809,9 +8018,9 @@ var btnBase = [
   "cursor-pointer transition-colors",
   "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover"
 ];
-var AdvancedChip = React49.forwardRef(
-  ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ jsxs50("div", { className: cn("inline-flex items-center", className), children: [
-    /* @__PURE__ */ jsxs50(
+var AdvancedChip = React50.forwardRef(
+  ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ jsxs51("div", { className: cn("inline-flex items-center", className), children: [
+    /* @__PURE__ */ jsxs51(
       "button",
       {
         ref,
@@ -7824,7 +8033,7 @@ var AdvancedChip = React49.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx57(
             Icon35,
             {
               icon: faFilterOutline4,
@@ -7832,12 +8041,12 @@ var AdvancedChip = React49.forwardRef(
               className: "shrink-0 text-foreground"
             }
           ),
-          /* @__PURE__ */ jsx56("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: "Advanced 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-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+          /* @__PURE__ */ jsx57("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: "Advanced filters" }),
+          count > 0 && /* @__PURE__ */ jsx57("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx57("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
         ]
       }
     ),
-    onClear && /* @__PURE__ */ jsx56(
+    onClear && /* @__PURE__ */ jsx57(
       "button",
       {
         type: "button",
@@ -7851,7 +8060,7 @@ var AdvancedChip = React49.forwardRef(
           "rounded-r-md -ml-px"
         ),
         "aria-label": "Clear all advanced filters",
-        children: /* @__PURE__ */ jsx56(Icon35, { icon: faXmarkOutline3, size: "sm", className: "text-foreground" })
+        children: /* @__PURE__ */ jsx57(Icon35, { icon: faXmarkOutline3, size: "sm", className: "text-foreground" })
       }
     )
   ] })
@@ -7859,18 +8068,18 @@ var AdvancedChip = React49.forwardRef(
 AdvancedChip.displayName = "AdvancedChip";
 
 // src/components/ui/filter/advanced-popover.tsx
-import * as React53 from "react";
+import * as React54 from "react";
 import * as PopoverPrimitive12 from "@radix-ui/react-popover";
 import { Icon as Icon39, faPlusOutline as faPlusOutline3, faChevronDownOutline as faChevronDownOutline3, faXmarkOutline as faXmarkOutline4 } from "@l3mpire/icons";
 
 // src/components/ui/filter/advanced-row.tsx
-import * as React51 from "react";
+import * as React52 from "react";
 import * as PopoverPrimitive11 from "@radix-ui/react-popover";
 import * as TooltipPrimitive4 from "@radix-ui/react-tooltip";
 import { Icon as Icon37, faChevronDownOutline as faChevronDownOutline2 } from "@l3mpire/icons";
 
 // src/components/ui/filter/filter-node-actions.tsx
-import * as React50 from "react";
+import * as React51 from "react";
 import * as PopoverPrimitive10 from "@radix-ui/react-popover";
 import {
   Icon as Icon36,
@@ -7880,14 +8089,14 @@ import {
   faFolderOutline,
   faFilterOutline as faFilterOutline5
 } from "@l3mpire/icons";
-import { jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs52 } from "react/jsx-runtime";
 var FilterNodeActions = ({
   nodeType,
   onDuplicate,
   onConvert,
   onDelete
 }) => {
-  const [open, setOpen] = React50.useState(false);
+  const [open, setOpen] = React51.useState(false);
   const items = [
     {
       label: "Duplicate",
@@ -7906,14 +8115,14 @@ var FilterNodeActions = ({
       destructive: true
     }
   ];
-  return /* @__PURE__ */ jsxs51(PopoverPrimitive10.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx57(PopoverPrimitive10.Trigger, { asChild: true, children: /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs52(PopoverPrimitive10.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx58(PopoverPrimitive10.Trigger, { asChild: true, children: /* @__PURE__ */ jsx58(
       "button",
       {
         type: "button",
         className: "shrink-0 flex items-center justify-center p-sm rounded-md cursor-pointer transition-colors hover:bg-accent",
         "aria-label": "More actions",
-        children: /* @__PURE__ */ jsx57(
+        children: /* @__PURE__ */ jsx58(
           Icon36,
           {
             icon: faEllipsisOutline2,
@@ -7923,7 +8132,7 @@ var FilterNodeActions = ({
         )
       }
     ) }),
-    /* @__PURE__ */ jsx57(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx58(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ jsx58(
       PopoverPrimitive10.Content,
       {
         sideOffset: 4,
@@ -7935,7 +8144,7 @@ var FilterNodeActions = ({
           "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__ */ jsxs51(
+        children: items.map((item) => /* @__PURE__ */ jsxs52(
           "button",
           {
             type: "button",
@@ -7949,7 +8158,7 @@ var FilterNodeActions = ({
               item.destructive && "text-destructive"
             ),
             children: [
-              /* @__PURE__ */ jsx57(
+              /* @__PURE__ */ jsx58(
                 Icon36,
                 {
                   icon: item.icon,
@@ -7960,7 +8169,7 @@ var FilterNodeActions = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx57(
+              /* @__PURE__ */ jsx58(
                 "span",
                 {
                   className: cn(
@@ -7981,7 +8190,7 @@ var FilterNodeActions = ({
 FilterNodeActions.displayName = "FilterNodeActions";
 
 // src/components/ui/filter/advanced-row.tsx
-import { Fragment as Fragment4, jsx as jsx58, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
 var selectBtnStyle = [
   "flex items-center gap-base",
   "px-base py-sm",
@@ -8002,10 +8211,10 @@ var AdvancedRow = ({
   onDuplicate,
   onTurnIntoGroup
 }) => {
-  const [operatorOpen, setOperatorOpen] = React51.useState(false);
-  const [propertyOpen, setPropertyOpen] = React51.useState(false);
-  const [valueOpen, setValueOpen] = React51.useState(false);
-  const { pinnedProperties, unpinnedProperties } = React51.useMemo(() => {
+  const [operatorOpen, setOperatorOpen] = React52.useState(false);
+  const [propertyOpen, setPropertyOpen] = React52.useState(false);
+  const [valueOpen, setValueOpen] = React52.useState(false);
+  const { pinnedProperties, unpinnedProperties } = React52.useMemo(() => {
     const pinnedGroups = /* @__PURE__ */ new Set();
     for (const p of properties) {
       if (p.groupPinned) pinnedGroups.add(p.group);
@@ -8036,7 +8245,7 @@ var AdvancedRow = ({
     false,
     propertyDef.options
   );
-  const valueLeadingIcon = React51.useMemo(() => {
+  const valueLeadingIcon = React52.useMemo(() => {
     const v = condition.value;
     const raw = typeof v === "string" ? v : Array.isArray(v) && typeof v[0] === "string" ? v[0] : null;
     if (!raw) return null;
@@ -8044,28 +8253,28 @@ var AdvancedRow = ({
   }, [condition.value, propertyDef.options]);
   const badgeCount = getBadgeCount(condition.value);
   const hasValue = displayValue != null;
-  return /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    connector === "Where" ? /* @__PURE__ */ jsx58("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx58("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }) : /* @__PURE__ */ jsx58("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx58(TooltipPrimitive4.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs52(TooltipPrimitive4.Root, { children: [
-      /* @__PURE__ */ jsx58(TooltipPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsx58("span", { className: "text-xs font-medium leading-xs text-muted-foreground cursor-default", children: connector }) }),
-      /* @__PURE__ */ jsx58(TooltipPrimitive4.Portal, { children: /* @__PURE__ */ jsxs52(
+  return /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+    connector === "Where" ? /* @__PURE__ */ jsx59("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx59("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }) : /* @__PURE__ */ jsx59("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx59(TooltipPrimitive4.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs53(TooltipPrimitive4.Root, { children: [
+      /* @__PURE__ */ jsx59(TooltipPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsx59("span", { className: "text-xs font-medium leading-xs text-muted-foreground cursor-default", children: connector }) }),
+      /* @__PURE__ */ jsx59(TooltipPrimitive4.Portal, { children: /* @__PURE__ */ jsxs53(
         TooltipPrimitive4.Content,
         {
           sideOffset: 4,
           className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
           children: [
             '"Or" operator coming soon',
-            /* @__PURE__ */ jsx58(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
+            /* @__PURE__ */ jsx59(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
           ]
         }
       ) })
     ] }) }) }),
-    /* @__PURE__ */ jsxs52(PopoverPrimitive11.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
-      /* @__PURE__ */ jsx58(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs52("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ jsx58(Icon37, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-muted-foreground" }),
-        /* @__PURE__ */ jsx58("span", { className: "text-sm font-regular leading-sm text-foreground whitespace-nowrap truncate", children: propertyDef.label }),
-        /* @__PURE__ */ jsx58(Icon37, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-foreground" })
+    /* @__PURE__ */ jsxs53(PopoverPrimitive11.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
+      /* @__PURE__ */ jsx59(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs53("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
+        /* @__PURE__ */ jsx59(Icon37, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx59("span", { className: "text-sm font-regular leading-sm text-foreground whitespace-nowrap truncate", children: propertyDef.label }),
+        /* @__PURE__ */ jsx59(Icon37, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-foreground" })
       ] }) }),
-      /* @__PURE__ */ jsx58(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsxs52(
+      /* @__PURE__ */ jsx59(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsxs53(
         PopoverPrimitive11.Content,
         {
           sideOffset: 4,
@@ -8078,7 +8287,7 @@ var AdvancedRow = ({
             "min-w-[200px]"
           ),
           children: [
-            pinnedProperties.map((p) => /* @__PURE__ */ jsxs52(
+            pinnedProperties.map((p) => /* @__PURE__ */ jsxs53(
               "button",
               {
                 type: "button",
@@ -8092,13 +8301,13 @@ var AdvancedRow = ({
                   p.id === condition.propertyId && "bg-dropdown-item-hover"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx58(Icon37, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
-                  /* @__PURE__ */ jsx58("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label })
+                  /* @__PURE__ */ jsx59(Icon37, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
+                  /* @__PURE__ */ jsx59("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label })
                 ]
               },
               p.id
             )),
-            unpinnedProperties.map((p) => /* @__PURE__ */ jsxs52(
+            unpinnedProperties.map((p) => /* @__PURE__ */ jsxs53(
               "button",
               {
                 type: "button",
@@ -8112,9 +8321,9 @@ var AdvancedRow = ({
                   p.id === condition.propertyId && "bg-dropdown-item-hover"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx58(Icon37, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
-                  /* @__PURE__ */ jsx58("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label }),
-                  /* @__PURE__ */ jsx58("span", { className: "ml-auto text-xs font-regular leading-xs text-muted-foreground", children: p.groupLabel })
+                  /* @__PURE__ */ jsx59(Icon37, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
+                  /* @__PURE__ */ jsx59("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label }),
+                  /* @__PURE__ */ jsx59("span", { className: "ml-auto text-xs font-regular leading-xs text-muted-foreground", children: p.groupLabel })
                 ]
               },
               p.id
@@ -8123,12 +8332,12 @@ var AdvancedRow = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs52(PopoverPrimitive11.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
-      /* @__PURE__ */ jsx58(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs52("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ jsx58("span", { className: "text-sm font-regular leading-sm text-foreground whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
-        /* @__PURE__ */ jsx58(Icon37, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-foreground" })
+    /* @__PURE__ */ jsxs53(PopoverPrimitive11.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
+      /* @__PURE__ */ jsx59(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs53("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
+        /* @__PURE__ */ jsx59("span", { className: "text-sm font-regular leading-sm text-foreground whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
+        /* @__PURE__ */ jsx59(Icon37, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-foreground" })
       ] }) }),
-      /* @__PURE__ */ jsx58(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsx58(
+      /* @__PURE__ */ jsx59(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsx59(
         PopoverPrimitive11.Content,
         {
           sideOffset: 4,
@@ -8140,7 +8349,7 @@ var AdvancedRow = ({
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[160px]"
           ),
-          children: /* @__PURE__ */ jsx58(
+          children: /* @__PURE__ */ jsx59(
             OperatorList,
             {
               dataType: propertyDef.type,
@@ -8155,7 +8364,7 @@ var AdvancedRow = ({
       const inputType = getValueInputType(propertyDef.type, condition.operator);
       const isInline = inputType === "TextInput" || inputType === "NumberInput";
       if (isInline) {
-        return /* @__PURE__ */ jsx58(
+        return /* @__PURE__ */ jsx59(
           "input",
           {
             type: inputType === "NumberInput" ? "number" : "text",
@@ -8180,15 +8389,15 @@ var AdvancedRow = ({
         const dyn = propertyDef.dynamicOptions?.find((o) => o.value === v);
         return dyn ? dyn.label : v;
       }) : null;
-      return /* @__PURE__ */ jsxs52(PopoverPrimitive11.Root, { open: valueOpen, onOpenChange: setValueOpen, children: [
-        /* @__PURE__ */ jsx58(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs52(
+      return /* @__PURE__ */ jsxs53(PopoverPrimitive11.Root, { open: valueOpen, onOpenChange: setValueOpen, children: [
+        /* @__PURE__ */ jsx59(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs53(
           "button",
           {
             type: "button",
             className: cn(selectBtnStyle, "flex-1 min-w-[80px] justify-between overflow-hidden"),
             children: [
-              multiTags && multiTags.length > 0 ? /* @__PURE__ */ jsx58(ValueTagRow, { tags: multiTags }) : /* @__PURE__ */ jsxs52(Fragment4, { children: [
-                valueLeadingIcon && /* @__PURE__ */ jsx58(
+              multiTags && multiTags.length > 0 ? /* @__PURE__ */ jsx59(ValueTagRow, { tags: multiTags }) : /* @__PURE__ */ jsxs53(Fragment4, { children: [
+                valueLeadingIcon && /* @__PURE__ */ jsx59(
                   Icon37,
                   {
                     icon: valueLeadingIcon,
@@ -8196,7 +8405,7 @@ var AdvancedRow = ({
                     className: "shrink-0 text-foreground"
                   }
                 ),
-                /* @__PURE__ */ jsx58(
+                /* @__PURE__ */ jsx59(
                   "span",
                   {
                     className: cn(
@@ -8208,7 +8417,7 @@ var AdvancedRow = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx58(
+              /* @__PURE__ */ jsx59(
                 Icon37,
                 {
                   icon: faChevronDownOutline2,
@@ -8219,7 +8428,7 @@ var AdvancedRow = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx58(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsx58(
+        /* @__PURE__ */ jsx59(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsx59(
           PopoverPrimitive11.Content,
           {
             sideOffset: 4,
@@ -8231,7 +8440,7 @@ var AdvancedRow = ({
               "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
             ),
             style: { minWidth: dateWide ? "auto" : "240px" },
-            children: /* @__PURE__ */ jsx58(
+            children: /* @__PURE__ */ jsx59(
               ValueInput,
               {
                 dataType: propertyDef.type,
@@ -8247,7 +8456,7 @@ var AdvancedRow = ({
         ) })
       ] });
     })(),
-    /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx59(
       FilterNodeActions,
       {
         nodeType: "condition",
@@ -8268,10 +8477,10 @@ var tagChip = cn(
   "h-5"
 );
 function ValueTagRow({ tags }) {
-  const containerRef = React51.useRef(null);
-  const measureRef = React51.useRef(null);
-  const [visibleCount, setVisibleCount] = React51.useState(tags.length);
-  React51.useLayoutEffect(() => {
+  const containerRef = React52.useRef(null);
+  const measureRef = React52.useRef(null);
+  const [visibleCount, setVisibleCount] = React52.useState(tags.length);
+  React52.useLayoutEffect(() => {
     const container = containerRef.current;
     const measureRow = measureRef.current;
     if (!container || !measureRow) return;
@@ -8303,32 +8512,32 @@ function ValueTagRow({ tags }) {
   }, [tags]);
   const overflowCount = tags.length - visibleCount;
   const overflowTags = tags.slice(visibleCount);
-  return /* @__PURE__ */ jsxs52("div", { className: "flex flex-1 items-center gap-xs min-w-0 overflow-hidden relative", children: [
-    /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsxs53("div", { className: "flex flex-1 items-center gap-xs min-w-0 overflow-hidden relative", children: [
+    /* @__PURE__ */ jsx59(
       "div",
       {
         ref: measureRef,
         "aria-hidden": true,
         className: "absolute flex items-center gap-xs pointer-events-none",
         style: { visibility: "hidden", whiteSpace: "nowrap", top: 0, left: 0 },
-        children: tags.map((t) => /* @__PURE__ */ jsx58("span", { className: tagChip, children: t }, t))
+        children: tags.map((t) => /* @__PURE__ */ jsx59("span", { className: tagChip, children: t }, t))
       }
     ),
-    /* @__PURE__ */ jsxs52("div", { ref: containerRef, className: "flex flex-1 items-center gap-xs overflow-hidden", children: [
-      tags.slice(0, visibleCount).map((t) => /* @__PURE__ */ jsx58("span", { className: tagChip, children: t }, t)),
-      overflowCount > 0 && /* @__PURE__ */ jsx58(TooltipPrimitive4.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs52(TooltipPrimitive4.Root, { children: [
-        /* @__PURE__ */ jsx58(TooltipPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs52("span", { className: cn(tagChip, "cursor-default bg-filter-chip-badge-bg text-filter-chip-badge-text"), children: [
+    /* @__PURE__ */ jsxs53("div", { ref: containerRef, className: "flex flex-1 items-center gap-xs overflow-hidden", children: [
+      tags.slice(0, visibleCount).map((t) => /* @__PURE__ */ jsx59("span", { className: tagChip, children: t }, t)),
+      overflowCount > 0 && /* @__PURE__ */ jsx59(TooltipPrimitive4.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs53(TooltipPrimitive4.Root, { children: [
+        /* @__PURE__ */ jsx59(TooltipPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs53("span", { className: cn(tagChip, "cursor-default bg-filter-chip-badge-bg text-filter-chip-badge-text"), children: [
           "+",
           overflowCount
         ] }) }),
-        /* @__PURE__ */ jsx58(TooltipPrimitive4.Portal, { children: /* @__PURE__ */ jsxs52(
+        /* @__PURE__ */ jsx59(TooltipPrimitive4.Portal, { children: /* @__PURE__ */ jsxs53(
           TooltipPrimitive4.Content,
           {
             sideOffset: 4,
             className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-xs font-regular leading-xs flex flex-col gap-xs data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
             children: [
-              overflowTags.map((t) => /* @__PURE__ */ jsx58("span", { children: t }, t)),
-              /* @__PURE__ */ jsx58(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
+              overflowTags.map((t) => /* @__PURE__ */ jsx59("span", { children: t }, t)),
+              /* @__PURE__ */ jsx59(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
             ]
           }
         ) })
@@ -8338,10 +8547,10 @@ function ValueTagRow({ tags }) {
 }
 
 // src/components/ui/filter/advanced-group.tsx
-import * as React52 from "react";
+import * as React53 from "react";
 import * as TooltipPrimitive5 from "@radix-ui/react-tooltip";
 import { Icon as Icon38, faPlusOutline as faPlusOutline2 } from "@l3mpire/icons";
-import { jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs54 } from "react/jsx-runtime";
 var AdvancedGroup = ({
   connector,
   onConnectorToggle,
@@ -8352,25 +8561,25 @@ var AdvancedGroup = ({
   properties,
   children
 }) => {
-  const [addOpen, setAddOpen] = React52.useState(false);
-  return /* @__PURE__ */ jsxs53("div", { className: "flex items-start gap-base w-full min-w-0", children: [
-    connector === "Where" ? /* @__PURE__ */ jsx59("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ jsx59("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }) : /* @__PURE__ */ jsx59("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ jsx59(TooltipPrimitive5.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs53(TooltipPrimitive5.Root, { children: [
-      /* @__PURE__ */ jsx59(TooltipPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ jsx59("span", { className: "text-xs font-medium leading-xs text-muted-foreground cursor-default", children: connector }) }),
-      /* @__PURE__ */ jsx59(TooltipPrimitive5.Portal, { children: /* @__PURE__ */ jsxs53(
+  const [addOpen, setAddOpen] = React53.useState(false);
+  return /* @__PURE__ */ jsxs54("div", { className: "flex items-start gap-base w-full min-w-0", children: [
+    connector === "Where" ? /* @__PURE__ */ jsx60("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ jsx60("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }) : /* @__PURE__ */ jsx60("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ jsx60(TooltipPrimitive5.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs54(TooltipPrimitive5.Root, { children: [
+      /* @__PURE__ */ jsx60(TooltipPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ jsx60("span", { className: "text-xs font-medium leading-xs text-muted-foreground cursor-default", children: connector }) }),
+      /* @__PURE__ */ jsx60(TooltipPrimitive5.Portal, { children: /* @__PURE__ */ jsxs54(
         TooltipPrimitive5.Content,
         {
           sideOffset: 4,
           className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
           children: [
             '"Or" operator coming soon',
-            /* @__PURE__ */ jsx59(TooltipPrimitive5.Arrow, { className: "fill-tooltip-default-bg" })
+            /* @__PURE__ */ jsx60(TooltipPrimitive5.Arrow, { className: "fill-tooltip-default-bg" })
           ]
         }
       ) })
     ] }) }) }),
-    /* @__PURE__ */ jsxs53("div", { className: "flex-1 min-w-0 flex flex-col gap-base p-base border border-border rounded-md bg-secondary", children: [
+    /* @__PURE__ */ jsxs54("div", { className: "flex-1 min-w-0 flex flex-col gap-base p-base border border-border rounded-md bg-secondary", children: [
       children,
-      onAddFilter && properties && /* @__PURE__ */ jsx59(
+      onAddFilter && properties && /* @__PURE__ */ jsx60(
         PropertySelector,
         {
           properties,
@@ -8380,13 +8589,13 @@ var AdvancedGroup = ({
           },
           open: addOpen,
           onOpenChange: setAddOpen,
-          children: /* @__PURE__ */ jsxs53(
+          children: /* @__PURE__ */ jsxs54(
             "button",
             {
               type: "button",
               className: "flex items-center gap-sm px-base py-sm text-sm font-medium leading-sm text-muted-foreground cursor-pointer transition-colors rounded-md hover:bg-accent hover:text-foreground w-fit",
               children: [
-                /* @__PURE__ */ jsx59(Icon38, { icon: faPlusOutline2, size: "sm" }),
+                /* @__PURE__ */ jsx60(Icon38, { icon: faPlusOutline2, size: "sm" }),
                 "Add filter"
               ]
             }
@@ -8394,7 +8603,7 @@ var AdvancedGroup = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx59("div", { className: "shrink-0 pt-base", children: /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx60("div", { className: "shrink-0 pt-base", children: /* @__PURE__ */ jsx60(
       FilterNodeActions,
       {
         nodeType: "group",
@@ -8408,7 +8617,7 @@ var AdvancedGroup = ({
 AdvancedGroup.displayName = "AdvancedGroup";
 
 // src/components/ui/filter/advanced-popover.tsx
-import { jsx as jsx60, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs55 } from "react/jsx-runtime";
 var ghostBtn = [
   "flex items-center gap-sm px-base py-sm",
   "min-h-[32px]",
@@ -8424,9 +8633,9 @@ var AdvancedPopover = ({
   children,
   collisionBoundary
 }) => {
-  const [addSelectorOpen, setAddSelectorOpen] = React53.useState(false);
-  const [draftPickerOpen, setDraftPickerOpen] = React53.useState(false);
-  const [groupSelectorOpen, setGroupSelectorOpen] = React53.useState(false);
+  const [addSelectorOpen, setAddSelectorOpen] = React54.useState(false);
+  const [draftPickerOpen, setDraftPickerOpen] = React54.useState(false);
+  const [groupSelectorOpen, setGroupSelectorOpen] = React54.useState(false);
   const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
   const handleAddFilter = (property) => {
     const newFilter = createFilterWithDefaults(property.id, property.type);
@@ -8513,7 +8722,7 @@ var AdvancedPopover = ({
   const renderNode = (node, index) => {
     const connector = index === 0 ? "Where" : (node.logicOperator ?? "and") === "and" ? "And" : "Or";
     if (isFilterGroup(node)) {
-      return /* @__PURE__ */ jsx60(
+      return /* @__PURE__ */ jsx61(
         AdvancedGroup,
         {
           connector,
@@ -8528,7 +8737,7 @@ var AdvancedPopover = ({
           },
           children: node.children.length === 0 ? (
             /* Draft row in empty group */
-            /* @__PURE__ */ jsx60(
+            /* @__PURE__ */ jsx61(
               DraftRow,
               {
                 properties,
@@ -8545,7 +8754,7 @@ var AdvancedPopover = ({
     }
     const propDef = getPropertyDef(node.propertyId);
     if (!propDef) return null;
-    return /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsx61(
       AdvancedRow,
       {
         connector,
@@ -8565,9 +8774,9 @@ var AdvancedPopover = ({
       node.id
     );
   };
-  return /* @__PURE__ */ jsxs54(PopoverPrimitive12.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx60(PopoverPrimitive12.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx60(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ jsxs54(
+  return /* @__PURE__ */ jsxs55(PopoverPrimitive12.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx61(PopoverPrimitive12.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx61(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ jsxs55(
       PopoverPrimitive12.Content,
       {
         sideOffset: 4,
@@ -8584,7 +8793,7 @@ var AdvancedPopover = ({
           collisionBoundary ? "w-[min(640px,var(--radix-popover-content-available-width))] min-w-0" : "w-[min(640px,calc(100vw-32px))] min-w-[360px]"
         ),
         children: [
-          /* @__PURE__ */ jsx60("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ jsx60(
+          /* @__PURE__ */ jsx61("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ jsx61(
             DraftRow,
             {
               properties,
@@ -8593,42 +8802,42 @@ var AdvancedPopover = ({
               onOpenChange: setDraftPickerOpen
             }
           ) }),
-          /* @__PURE__ */ jsxs54("div", { className: "flex items-center justify-between p-base border-t border-border", children: [
-            /* @__PURE__ */ jsxs54("div", { className: "flex items-center gap-sm", children: [
-              /* @__PURE__ */ jsx60(
+          /* @__PURE__ */ jsxs55("div", { className: "flex items-center justify-between p-base border-t border-border", children: [
+            /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-sm", children: [
+              /* @__PURE__ */ jsx61(
                 PropertySelector,
                 {
                   properties,
                   onSelect: handleAddFilter,
                   open: addSelectorOpen,
                   onOpenChange: setAddSelectorOpen,
-                  children: /* @__PURE__ */ jsxs54("button", { type: "button", className: cn(ghostBtn, "text-foreground"), children: [
-                    /* @__PURE__ */ jsx60(Icon39, { icon: faPlusOutline3, size: "sm", className: "text-foreground" }),
+                  children: /* @__PURE__ */ jsxs55("button", { type: "button", className: cn(ghostBtn, "text-foreground"), children: [
+                    /* @__PURE__ */ jsx61(Icon39, { icon: faPlusOutline3, size: "sm", className: "text-foreground" }),
                     "Add filter"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsxs54(
+              /* @__PURE__ */ jsxs55(
                 "button",
                 {
                   type: "button",
                   onClick: handleAddGroup,
                   className: cn(ghostBtn, "text-foreground"),
                   children: [
-                    /* @__PURE__ */ jsx60(Icon39, { icon: faPlusOutline3, size: "sm", className: "text-foreground" }),
+                    /* @__PURE__ */ jsx61(Icon39, { icon: faPlusOutline3, size: "sm", className: "text-foreground" }),
                     "Add filters group"
                   ]
                 }
               )
             ] }),
-            filters.length > 0 && /* @__PURE__ */ jsxs54(
+            filters.length > 0 && /* @__PURE__ */ jsxs55(
               "button",
               {
                 type: "button",
                 onClick: handleClearAll,
                 className: cn(ghostBtn, "text-destructive"),
                 children: [
-                  /* @__PURE__ */ jsx60(Icon39, { icon: faXmarkOutline4, size: "sm", className: "text-destructive" }),
+                  /* @__PURE__ */ jsx61(Icon39, { icon: faXmarkOutline4, size: "sm", className: "text-destructive" }),
                   "Clear filters"
                 ]
               }
@@ -8646,16 +8855,16 @@ var DraftRow = ({
   open: openProp,
   onOpenChange
 }) => {
-  const [internalOpen, setInternalOpen] = React53.useState(false);
+  const [internalOpen, setInternalOpen] = React54.useState(false);
   const isControlled = openProp !== void 0;
   const open = isControlled ? openProp : internalOpen;
   const setOpen = (v) => {
     if (!isControlled) setInternalOpen(v);
     onOpenChange?.(v);
   };
-  return /* @__PURE__ */ jsxs54("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    /* @__PURE__ */ jsx60("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx60("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }),
-    /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+    /* @__PURE__ */ jsx61("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx61("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }),
+    /* @__PURE__ */ jsx61(
       PropertySelector,
       {
         properties,
@@ -8665,7 +8874,7 @@ var DraftRow = ({
         },
         open,
         onOpenChange: setOpen,
-        children: /* @__PURE__ */ jsxs54(
+        children: /* @__PURE__ */ jsxs55(
           "button",
           {
             type: "button",
@@ -8677,8 +8886,8 @@ var DraftRow = ({
               "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover"
             ),
             children: [
-              /* @__PURE__ */ jsx60("span", { className: "text-sm font-regular leading-sm text-muted-foreground whitespace-nowrap", children: "Select property" }),
-              /* @__PURE__ */ jsx60(
+              /* @__PURE__ */ jsx61("span", { className: "text-sm font-regular leading-sm text-muted-foreground whitespace-nowrap", children: "Select property" }),
+              /* @__PURE__ */ jsx61(
                 Icon39,
                 {
                   icon: faChevronDownOutline3,
@@ -8695,11 +8904,11 @@ var DraftRow = ({
 };
 
 // src/components/ui/filter/summary-chip.tsx
-import * as React54 from "react";
+import * as React55 from "react";
 import * as PopoverPrimitive13 from "@radix-ui/react-popover";
 import * as TooltipPrimitive6 from "@radix-ui/react-tooltip";
 import { Icon as Icon40, faFilterOutline as faFilterOutline6, faPlusOutline as faPlusOutline4, faChevronDownOutline as faChevronDownOutline4, faXmarkOutline as faXmarkOutline5 } from "@l3mpire/icons";
-import { jsx as jsx61, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs56 } from "react/jsx-runtime";
 var ghostBtn2 = [
   "flex items-center gap-sm px-base py-sm",
   "min-h-[32px]",
@@ -8719,15 +8928,15 @@ var SummaryChip = ({
   collisionBoundary,
   tooltipContent
 }) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = React54.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React55.useState(false);
   const isControlled = openProp !== void 0;
   const open = isControlled ? openProp : uncontrolledOpen;
   const setOpen = (v) => {
     if (!isControlled) setUncontrolledOpen(v);
     onOpenChange?.(v);
   };
-  const [addSelectorOpen, setAddSelectorOpen] = React54.useState(false);
-  const [draftPickerOpen, setDraftPickerOpen] = React54.useState(false);
+  const [addSelectorOpen, setAddSelectorOpen] = React55.useState(false);
+  const [draftPickerOpen, setDraftPickerOpen] = React55.useState(false);
   const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
   const handleAddFilter = (property) => {
     const newFilter = createFilterWithDefaults(property.id, property.type);
@@ -8809,7 +9018,7 @@ var SummaryChip = ({
   const renderNode = (node, index) => {
     const connector = index === 0 ? "Where" : (node.logicOperator ?? "and") === "and" ? "And" : "Or";
     if (isFilterGroup(node)) {
-      return /* @__PURE__ */ jsx61(
+      return /* @__PURE__ */ jsx62(
         AdvancedGroup,
         {
           connector,
@@ -8822,7 +9031,7 @@ var SummaryChip = ({
             const newFilter = createFilterWithDefaults(prop.id, prop.type);
             handleGroupChildrenChange(node.id, [...node.children, newFilter]);
           },
-          children: node.children.length === 0 ? /* @__PURE__ */ jsx61(
+          children: node.children.length === 0 ? /* @__PURE__ */ jsx62(
             DraftRow2,
             {
               properties,
@@ -8838,7 +9047,7 @@ var SummaryChip = ({
     }
     const propDef = getPropertyDef(node.propertyId);
     if (!propDef) return null;
-    return /* @__PURE__ */ jsx61(
+    return /* @__PURE__ */ jsx62(
       AdvancedRow,
       {
         connector,
@@ -8858,7 +9067,7 @@ var SummaryChip = ({
       node.id
     );
   };
-  const trigger = children ?? /* @__PURE__ */ jsxs55(
+  const trigger = children ?? /* @__PURE__ */ jsxs56(
     "button",
     {
       type: "button",
@@ -8872,27 +9081,27 @@ var SummaryChip = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx61(Icon40, { icon: faFilterOutline6, size: "sm", className: "shrink-0 text-foreground" }),
-        /* @__PURE__ */ jsx61("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: "Filters" }),
-        count > 0 && /* @__PURE__ */ jsx61("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx61("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+        /* @__PURE__ */ jsx62(Icon40, { icon: faFilterOutline6, size: "sm", className: "shrink-0 text-foreground" }),
+        /* @__PURE__ */ jsx62("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: "Filters" }),
+        count > 0 && /* @__PURE__ */ jsx62("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx62("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
       ]
     }
   );
   const hasTooltip = tooltipContent && !open;
-  return /* @__PURE__ */ jsx61(TooltipPrimitive6.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsx61(TooltipPrimitive6.Root, { open: hasTooltip ? void 0 : false, children: /* @__PURE__ */ jsxs55(PopoverPrimitive13.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx61(TooltipPrimitive6.Trigger, { asChild: true, children: /* @__PURE__ */ jsx61(PopoverPrimitive13.Trigger, { asChild: true, children: trigger }) }),
-    hasTooltip && /* @__PURE__ */ jsx61(TooltipPrimitive6.Portal, { children: /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsx62(TooltipPrimitive6.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsx62(TooltipPrimitive6.Root, { open: hasTooltip ? void 0 : false, children: /* @__PURE__ */ jsxs56(PopoverPrimitive13.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx62(TooltipPrimitive6.Trigger, { asChild: true, children: /* @__PURE__ */ jsx62(PopoverPrimitive13.Trigger, { asChild: true, children: trigger }) }),
+    hasTooltip && /* @__PURE__ */ jsx62(TooltipPrimitive6.Portal, { children: /* @__PURE__ */ jsxs56(
       TooltipPrimitive6.Content,
       {
         sideOffset: 4,
         className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm max-w-[320px] data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
         children: [
           tooltipContent,
-          /* @__PURE__ */ jsx61(TooltipPrimitive6.Arrow, { className: "fill-tooltip-default-bg" })
+          /* @__PURE__ */ jsx62(TooltipPrimitive6.Arrow, { className: "fill-tooltip-default-bg" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx61(PopoverPrimitive13.Portal, { children: /* @__PURE__ */ jsxs55(
+    /* @__PURE__ */ jsx62(PopoverPrimitive13.Portal, { children: /* @__PURE__ */ jsxs56(
       PopoverPrimitive13.Content,
       {
         sideOffset: 4,
@@ -8909,7 +9118,7 @@ var SummaryChip = ({
           collisionBoundary ? "w-[min(640px,var(--radix-popover-content-available-width))]" : "w-[min(640px,calc(100vw-32px))]"
         ),
         children: [
-          /* @__PURE__ */ jsx61("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx62("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ jsx62(
             DraftRow2,
             {
               properties,
@@ -8918,27 +9127,27 @@ var SummaryChip = ({
               onOpenChange: setDraftPickerOpen
             }
           ) }),
-          /* @__PURE__ */ jsxs55("div", { className: "flex items-center justify-between p-base border-t border-border", children: [
-            /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-sm", children: [
-              /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsxs56("div", { className: "flex items-center justify-between p-base border-t border-border", children: [
+            /* @__PURE__ */ jsxs56("div", { className: "flex items-center gap-sm", children: [
+              /* @__PURE__ */ jsx62(
                 PropertySelector,
                 {
                   properties,
                   onSelect: handleAddFilter,
                   open: addSelectorOpen,
                   onOpenChange: setAddSelectorOpen,
-                  children: /* @__PURE__ */ jsxs55("button", { type: "button", className: cn(ghostBtn2, "text-foreground"), children: [
-                    /* @__PURE__ */ jsx61(Icon40, { icon: faPlusOutline4, size: "sm", className: "text-foreground" }),
+                  children: /* @__PURE__ */ jsxs56("button", { type: "button", className: cn(ghostBtn2, "text-foreground"), children: [
+                    /* @__PURE__ */ jsx62(Icon40, { icon: faPlusOutline4, size: "sm", className: "text-foreground" }),
                     "Add filter"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsxs55("button", { type: "button", onClick: handleAddGroup, className: cn(ghostBtn2, "text-foreground"), children: [
-                /* @__PURE__ */ jsx61(Icon40, { icon: faPlusOutline4, size: "sm", className: "text-foreground" }),
+              /* @__PURE__ */ jsxs56("button", { type: "button", onClick: handleAddGroup, className: cn(ghostBtn2, "text-foreground"), children: [
+                /* @__PURE__ */ jsx62(Icon40, { icon: faPlusOutline4, size: "sm", className: "text-foreground" }),
                 "Add filters group"
               ] })
             ] }),
-            filters.length > 0 && /* @__PURE__ */ jsxs55(
+            filters.length > 0 && /* @__PURE__ */ jsxs56(
               "button",
               {
                 type: "button",
@@ -8948,7 +9157,7 @@ var SummaryChip = ({
                 },
                 className: cn(ghostBtn2, "text-destructive"),
                 children: [
-                  /* @__PURE__ */ jsx61(Icon40, { icon: faXmarkOutline5, size: "sm", className: "text-destructive" }),
+                  /* @__PURE__ */ jsx62(Icon40, { icon: faXmarkOutline5, size: "sm", className: "text-destructive" }),
                   "Clear filters"
                 ]
               }
@@ -8961,19 +9170,19 @@ var SummaryChip = ({
 };
 SummaryChip.displayName = "SummaryChip";
 var DraftRow2 = ({ properties, onSelect, open: openProp, onOpenChange }) => {
-  const [internalOpen, setInternalOpen] = React54.useState(false);
+  const [internalOpen, setInternalOpen] = React55.useState(false);
   const isCtrl = openProp !== void 0;
   const open = isCtrl ? openProp : internalOpen;
   const setOpen = (v) => {
     if (!isCtrl) setInternalOpen(v);
     onOpenChange?.(v);
   };
-  return /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    /* @__PURE__ */ jsx61("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx61("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }),
-    /* @__PURE__ */ jsx61(PropertySelector, { properties, onSelect: (p) => {
+  return /* @__PURE__ */ jsxs56("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+    /* @__PURE__ */ jsx62("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx62("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }),
+    /* @__PURE__ */ jsx62(PropertySelector, { properties, onSelect: (p) => {
       onSelect(p);
       setOpen(false);
-    }, open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs55(
+    }, open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs56(
       "button",
       {
         type: "button",
@@ -8984,8 +9193,8 @@ var DraftRow2 = ({ properties, onSelect, open: openProp, onOpenChange }) => {
           "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover"
         ),
         children: [
-          /* @__PURE__ */ jsx61("span", { className: "text-sm font-regular leading-sm text-muted-foreground whitespace-nowrap", children: "Select property" }),
-          /* @__PURE__ */ jsx61(Icon40, { icon: faChevronDownOutline4, size: "xs", className: "shrink-0 text-foreground" })
+          /* @__PURE__ */ jsx62("span", { className: "text-sm font-regular leading-sm text-muted-foreground whitespace-nowrap", children: "Select property" }),
+          /* @__PURE__ */ jsx62(Icon40, { icon: faChevronDownOutline4, size: "xs", className: "shrink-0 text-foreground" })
         ]
       }
     ) })
@@ -8993,11 +9202,11 @@ var DraftRow2 = ({ properties, onSelect, open: openProp, onOpenChange }) => {
 };
 
 // src/components/ui/filter/use-filter-bar-mode.ts
-import * as React55 from "react";
+import * as React56 from "react";
 var DEFAULT_BREAKPOINT = 600;
 function useFilterBarMode(ref, override, breakpoint = DEFAULT_BREAKPOINT) {
-  const [mode, setMode] = React55.useState("default");
-  React55.useEffect(() => {
+  const [mode, setMode] = React56.useState("default");
+  React56.useEffect(() => {
     if (override) return;
     const el = ref.current;
     if (!el) return;
@@ -9012,7 +9221,7 @@ function useFilterBarMode(ref, override, breakpoint = DEFAULT_BREAKPOINT) {
 }
 
 // src/components/ui/filter/filter-system.tsx
-import { Fragment as Fragment5, jsx as jsx62, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs57 } from "react/jsx-runtime";
 var FilterSystem = ({
   properties,
   filterState,
@@ -9023,16 +9232,39 @@ var FilterSystem = ({
   bounded = false,
   children,
   actions,
+  filterActions,
+  defaultFiltersRowExpanded = true,
+  filtersRowExpanded,
+  onFiltersRowExpandedChange,
   className
 }) => {
-  const containerRef = React56.useRef(null);
+  const containerRef = React57.useRef(null);
   const mode = useFilterBarMode(containerRef, modeOverride, breakpoint);
   const collisionBoundary = bounded ? containerRef.current : void 0;
-  const [propertySelectorOpen, setPropertySelectorOpen] = React56.useState(false);
-  const [advancedOpen, setAdvancedOpen] = React56.useState(false);
-  const [summaryOpen, setSummaryOpen] = React56.useState(false);
-  const [pendingFilterId, setPendingFilterId] = React56.useState(null);
+  const [propertySelectorOpen, setPropertySelectorOpen] = React57.useState(false);
+  const [advancedOpen, setAdvancedOpen] = React57.useState(false);
+  const [summaryOpen, setSummaryOpen] = React57.useState(false);
+  const [pendingFilterId, setPendingFilterId] = React57.useState(null);
+  const [internalExpanded, setInternalExpanded] = React57.useState(
+    defaultFiltersRowExpanded
+  );
+  const isExpandedControlled = filtersRowExpanded !== void 0;
+  const rowExpanded = isExpandedControlled ? filtersRowExpanded : internalExpanded;
+  const setRowExpanded = React57.useCallback(
+    (next) => {
+      if (!isExpandedControlled) setInternalExpanded(next);
+      onFiltersRowExpandedChange?.(next);
+    },
+    [isExpandedControlled, onFiltersRowExpandedChange]
+  );
   const totalCount = filterState.basicFilters.length + countConditions(filterState.advancedFilters);
+  const prevTotalCount = React57.useRef(totalCount);
+  React57.useEffect(() => {
+    if (prevTotalCount.current === 0 && totalCount > 0) {
+      setRowExpanded(true);
+    }
+    prevTotalCount.current = totalCount;
+  }, [totalCount, setRowExpanded]);
   const handleAddFilter = (property) => {
     const newFilter = createFilterWithDefaults(property.id, property.type);
     if (newFilter.operator && isNoValueOperator(newFilter.operator)) {
@@ -9118,120 +9350,171 @@ var FilterSystem = ({
   };
   const advancedFilterCount = filterState.advancedFilters.length;
   const showAdvancedChip = hasAdvanced || advancedOpen;
-  return /* @__PURE__ */ jsxs56(FilterBar, { ref: containerRef, className, children: [
-    /* @__PURE__ */ jsxs56(FilterBarLeft, { className: "flex-wrap flex-1 min-w-0", children: [
-      children,
-      sortFields && filterState.sort && /* @__PURE__ */ jsx62(
-        SortButton,
-        {
-          fields: sortFields,
-          activeField: filterState.sort.field,
-          direction: filterState.sort.direction,
-          onChange: handleSortChange,
-          iconOnly: isMinimal
-        }
-      ),
-      isMinimal ? /* @__PURE__ */ jsx62(Fragment5, { children: /* @__PURE__ */ jsx62(
-        SummaryChip,
-        {
-          count: totalCount,
-          filters: [...filterState.basicFilters, ...filterState.advancedFilters],
-          properties,
-          onFiltersChange: (nodes) => {
-            onFilterStateChange({
-              ...filterState,
-              basicFilters: [],
-              advancedFilters: nodes
-            });
-          },
-          onClearAll: handleClearAll,
-          open: summaryOpen,
-          onOpenChange: setSummaryOpen,
-          collisionBoundary,
-          tooltipContent: totalCount > 0 ? buildFilterTooltip([...filterState.basicFilters, ...filterState.advancedFilters], properties) : void 0,
-          children: /* @__PURE__ */ jsx62(
-            FilterBarButton,
-            {
-              iconOnly: isIconOnly,
-              count: totalCount > 0 ? totalCount : void 0
-            }
-          )
-        }
-      ) }) : (
-        /* ── DEFAULT MODE ────────────────────────────────────── */
-        /* @__PURE__ */ jsxs56(Fragment5, { children: [
-          showAdvancedChip && /* @__PURE__ */ jsx62(
-            AdvancedPopover,
-            {
-              filters: filterState.advancedFilters,
-              properties,
-              onFiltersChange: handleAdvancedFiltersChange,
-              open: advancedOpen,
-              onOpenChange: setAdvancedOpen,
-              collisionBoundary,
-              children: /* @__PURE__ */ jsx62(
-                AdvancedChip,
-                {
-                  count: filterState.advancedFilters.length,
-                  onClick: () => setAdvancedOpen(true),
-                  onClear: handleClearAdvanced
-                }
-              )
-            }
-          ),
-          filterState.basicFilters.map((filter) => {
-            const propDef = getPropertyDef(filter.propertyId);
-            if (!propDef) return null;
-            return /* @__PURE__ */ jsx62(
-              InteractiveFilterChip,
+  const showFiltersRow = !isMinimal && totalCount > 0 && rowExpanded;
+  const filtersButton = totalCount === 0 ? /* @__PURE__ */ jsx63(
+    PropertySelector,
+    {
+      properties,
+      onSelect: handleAddFilter,
+      open: propertySelectorOpen,
+      onOpenChange: setPropertySelectorOpen,
+      onAdvancedFilter: handleOpenAdvanced,
+      advancedFilterCount,
+      children: /* @__PURE__ */ jsx63(FilterBarButton, {})
+    }
+  ) : /* @__PURE__ */ jsx63(
+    FilterBarButton,
+    {
+      count: totalCount,
+      onClick: () => setRowExpanded(!rowExpanded),
+      "aria-expanded": rowExpanded
+    }
+  );
+  return /* @__PURE__ */ jsxs57(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("w-full flex flex-col", className),
+      children: [
+        /* @__PURE__ */ jsxs57(FilterBar, { children: [
+          /* @__PURE__ */ jsxs57(FilterBarLeft, { className: "flex-wrap flex-1 min-w-0", children: [
+            children,
+            sortFields && filterState.sort && /* @__PURE__ */ jsx63(
+              SortButton,
+              {
+                fields: sortFields,
+                activeField: filterState.sort.field,
+                direction: filterState.sort.direction,
+                onChange: handleSortChange,
+                iconOnly: isMinimal
+              }
+            ),
+            isMinimal ? /* @__PURE__ */ jsx63(
+              SummaryChip,
               {
-                propertyDef: propDef,
-                condition: filter,
+                count: totalCount,
+                filters: [...filterState.basicFilters, ...filterState.advancedFilters],
                 properties,
-                mode: pendingFilterId === filter.id ? "add" : "edit",
-                autoOpen: pendingFilterId === filter.id,
-                onUpdate: handleUpdateFilter,
-                onPropertyChange: (newProp) => handlePropertyChange(filter.id, newProp),
-                onDelete: () => handleDeleteFilter(filter.id),
-                onConvertToAdvanced: () => handleConvertToAdvanced(filter.id),
-                hasAdvancedFilters: hasAdvanced
-              },
-              filter.id
-            );
-          }),
-          /* @__PURE__ */ jsx62(
-            PropertySelector,
-            {
-              properties,
-              onSelect: handleAddFilter,
-              open: propertySelectorOpen,
-              onOpenChange: setPropertySelectorOpen,
-              onAdvancedFilter: handleOpenAdvanced,
-              advancedFilterCount,
-              children: totalCount > 0 ? /* @__PURE__ */ jsx62(
-                "button",
-                {
-                  type: "button",
-                  className: "shrink-0 inline-flex items-center justify-center size-8 rounded-md border border-btn-outlined-neutral-border-default bg-gradient-to-t from-btn-outlined-neutral-bg-default from-[10%] to-btn-outlined-neutral-bg-gradient-to-default shadow-sm cursor-pointer transition-colors hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover",
-                  children: /* @__PURE__ */ jsx62(Icon41, { icon: faPlusOutline5, size: "sm", className: "text-foreground" })
-                }
-              ) : /* @__PURE__ */ jsx62(FilterBarButton, {})
-            }
-          )
-        ] })
-      ),
-      totalCount > 0 && !isIconOnly && /* @__PURE__ */ jsx62(
-        "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 text-btn-ghost-brand-text-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",
-          children: /* @__PURE__ */ jsx62("span", { className: "text-sm font-medium leading-sm", children: "Clear" })
-        }
-      )
-    ] }),
-    actions && /* @__PURE__ */ jsx62(FilterBarRight, { className: "shrink-0", children: actions })
-  ] });
+                onFiltersChange: (nodes) => {
+                  onFilterStateChange({
+                    ...filterState,
+                    basicFilters: [],
+                    advancedFilters: nodes
+                  });
+                },
+                onClearAll: handleClearAll,
+                open: summaryOpen,
+                onOpenChange: setSummaryOpen,
+                collisionBoundary,
+                tooltipContent: totalCount > 0 ? buildFilterTooltip([...filterState.basicFilters, ...filterState.advancedFilters], properties) : void 0,
+                children: /* @__PURE__ */ jsx63(
+                  FilterBarButton,
+                  {
+                    iconOnly: isIconOnly,
+                    count: totalCount > 0 ? totalCount : void 0
+                  }
+                )
+              }
+            ) : (
+              /* ── FULL MODE — Filters button only on Row 1 ────────── */
+              filtersButton
+            ),
+            isMinimal && !isIconOnly && totalCount > 0 && /* @__PURE__ */ jsx63(
+              "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 text-btn-ghost-brand-text-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",
+                children: /* @__PURE__ */ jsx63("span", { className: "text-sm font-medium leading-sm", children: "Clear" })
+              }
+            )
+          ] }),
+          actions && /* @__PURE__ */ jsx63(FilterBarRight, { className: "shrink-0", children: actions })
+        ] }),
+        showFiltersRow && /* @__PURE__ */ jsxs57(
+          "div",
+          {
+            className: "flex items-start justify-between w-full pt-sm pb-md",
+            role: "toolbar",
+            "aria-label": "Active filters",
+            children: [
+              /* @__PURE__ */ jsxs57("div", { className: "flex items-center gap-base flex-wrap flex-1 min-w-0", children: [
+                showAdvancedChip && /* @__PURE__ */ jsx63(
+                  AdvancedPopover,
+                  {
+                    filters: filterState.advancedFilters,
+                    properties,
+                    onFiltersChange: handleAdvancedFiltersChange,
+                    open: advancedOpen,
+                    onOpenChange: setAdvancedOpen,
+                    collisionBoundary,
+                    children: /* @__PURE__ */ jsx63(
+                      AdvancedChip,
+                      {
+                        count: filterState.advancedFilters.length,
+                        onClick: () => setAdvancedOpen(true),
+                        onClear: handleClearAdvanced
+                      }
+                    )
+                  }
+                ),
+                filterState.basicFilters.map((filter) => {
+                  const propDef = getPropertyDef(filter.propertyId);
+                  if (!propDef) return null;
+                  return /* @__PURE__ */ jsx63(
+                    InteractiveFilterChip,
+                    {
+                      propertyDef: propDef,
+                      condition: filter,
+                      properties,
+                      mode: pendingFilterId === filter.id ? "add" : "edit",
+                      autoOpen: pendingFilterId === filter.id,
+                      onUpdate: handleUpdateFilter,
+                      onPropertyChange: (newProp) => handlePropertyChange(filter.id, newProp),
+                      onDelete: () => handleDeleteFilter(filter.id),
+                      onConvertToAdvanced: () => handleConvertToAdvanced(filter.id),
+                      hasAdvancedFilters: hasAdvanced
+                    },
+                    filter.id
+                  );
+                }),
+                /* @__PURE__ */ jsx63(
+                  PropertySelector,
+                  {
+                    properties,
+                    onSelect: handleAddFilter,
+                    open: propertySelectorOpen,
+                    onOpenChange: setPropertySelectorOpen,
+                    onAdvancedFilter: handleOpenAdvanced,
+                    advancedFilterCount,
+                    children: /* @__PURE__ */ jsx63(
+                      "button",
+                      {
+                        type: "button",
+                        className: "shrink-0 inline-flex items-center justify-center size-8 rounded-md border border-btn-outlined-neutral-border-default bg-gradient-to-t from-btn-outlined-neutral-bg-default from-[10%] to-btn-outlined-neutral-bg-gradient-to-default shadow-sm cursor-pointer transition-colors hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover",
+                        "aria-label": "Add filter",
+                        children: /* @__PURE__ */ jsx63(Icon41, { icon: faPlusOutline5, size: "sm", className: "text-foreground" })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx63(
+                  "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 text-btn-ghost-brand-text-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",
+                    children: /* @__PURE__ */ jsx63("span", { className: "text-sm font-medium leading-sm", children: "Clear" })
+                  }
+                )
+              ] }),
+              filterActions && /* @__PURE__ */ jsx63("div", { className: "flex items-center shrink-0 gap-sm", children: filterActions })
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 FilterSystem.displayName = "FilterSystem";
 function buildFilterTooltip(nodes, properties) {
@@ -9243,7 +9526,7 @@ function buildFilterTooltip(nodes, properties) {
       if ("children" in node && node.type === "group") {
         if (connector) {
           result.push(
-            /* @__PURE__ */ jsx62("div", { style: { paddingLeft: depth * 8 }, children: /* @__PURE__ */ jsx62("span", { className: "opacity-50 text-xs", children: connector }) }, `${node.id}-conn`)
+            /* @__PURE__ */ jsx63("div", { style: { paddingLeft: depth * 8 }, children: /* @__PURE__ */ jsx63("span", { className: "opacity-50 text-xs", children: connector }) }, `${node.id}-conn`)
           );
         }
         result.push(...renderNodes(node.children, depth + 1));
@@ -9253,23 +9536,23 @@ function buildFilterTooltip(nodes, properties) {
         if (!prop) continue;
         const val = formatFilterValue(f.value, prop.dynamicOptions, true);
         result.push(
-          /* @__PURE__ */ jsxs56("div", { style: { paddingLeft: depth * 8 }, children: [
-            connector && /* @__PURE__ */ jsxs56("span", { className: "opacity-50 text-xs", children: [
+          /* @__PURE__ */ jsxs57("div", { style: { paddingLeft: depth * 8 }, children: [
+            connector && /* @__PURE__ */ jsxs57("span", { className: "opacity-50 text-xs", children: [
               connector,
               " "
             ] }),
-            /* @__PURE__ */ jsx62("span", { className: "font-medium", children: prop.label }),
+            /* @__PURE__ */ jsx63("span", { className: "font-medium", children: prop.label }),
             " ",
-            /* @__PURE__ */ jsx62("span", { className: "opacity-60", children: f.operator }),
+            /* @__PURE__ */ jsx63("span", { className: "opacity-60", children: f.operator }),
             " ",
-            val && /* @__PURE__ */ jsx62("span", { children: val })
+            val && /* @__PURE__ */ jsx63("span", { children: val })
           ] }, f.id)
         );
       }
     }
     return result;
   };
-  return /* @__PURE__ */ jsx62("div", { className: "flex flex-col gap-2xs", children: renderNodes(nodes, 0) });
+  return /* @__PURE__ */ jsx63("div", { className: "flex flex-col gap-2xs", children: renderNodes(nodes, 0) });
 }
 export {
   AdvancedChip,
@@ -9288,6 +9571,7 @@ export {
   DEFAULT_OPERATOR_BY_TYPE,
   DataTable,
   DataTablePagination,
+  DataTableSettingsModal,
   DateCell,
   DatePicker,
   DatePickerCalendar,