@l3mpire/ui 2.24.1 → 2.25.0

package/dist/index.js

@@ -46,6 +46,7 @@ __export(index_exports, {
   DEFAULT_OPERATOR_BY_TYPE: () => DEFAULT_OPERATOR_BY_TYPE,
   DataTable: () => DataTable,
   DataTablePagination: () => DataTablePagination,
+  DataTableSettingsModal: () => DataTableSettingsModal,
   DateCell: () => DateCell,
   DatePicker: () => DatePicker,
   DatePickerCalendar: () => DatePickerCalendar,
@@ -4422,7 +4423,7 @@ var RowActions = ({ children, className }) => /* @__PURE__ */ (0, import_jsx_run
 RowActions.displayName = "RowActions";
 
 // src/components/ui/data-table.tsx
-var React36 = __toESM(require("react"));
+var React37 = __toESM(require("react"));
 var import_react_table = require("@tanstack/react-table");
 var import_core = require("@dnd-kit/core");
 var import_sortable = require("@dnd-kit/sortable");
@@ -4520,8 +4521,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
+var React36 = __toESM(require("react"));
 var import_jsx_runtime36 = require("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__ */ (0, import_jsx_runtime36.jsx)(Modal, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ModalContent, { size: "sm", className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ModalHeader, { onClose: () => onOpenChange(false), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ModalTitle, { children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ModalBody, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between gap-base", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "text-sm font-medium text-table-cell-text-secondary", children: [
+          "Columns ",
+          visibleCount,
+          " / ",
+          totalCount
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            "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__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-xs text-table-cell-text-secondary", children: "\xB7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            "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__ */ (0, import_jsx_runtime36.jsx)(
+        SearchBar,
+        {
+          size: "sm",
+          placeholder: "Search columns",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          onClear: () => setSearch("")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "div",
+        {
+          className: cn(
+            "flex flex-col max-h-[360px] overflow-auto rounded-base",
+            "border border-table-border"
+          ),
+          children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("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__ */ (0, import_jsx_runtime36.jsxs)(
+              "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__ */ (0, import_jsx_runtime36.jsx)(
+                    Checkbox,
+                    {
+                      checked,
+                      onCheckedChange: () => toggle(key)
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-sm text-table-cell-text-primary", children: label })
+                ]
+              },
+              key
+            );
+          })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ModalFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ModalClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { appearance: "ghost", intent: "brand", size: "md", children: "Cancel" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        Button,
+        {
+          appearance: "solid",
+          intent: "brand",
+          size: "md",
+          onClick: () => {
+            onApply(draft);
+            onOpenChange(false);
+          },
+          children: "Apply"
+        }
+      )
+    ] })
+  ] }) });
+}
+DataTableSettingsModal.displayName = "DataTableSettingsModal";
+
+// src/components/ui/data-table.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var filterOperatorsByType = {
   string: [
     { value: "contains", label: "Contains" },
@@ -4571,12 +4740,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);
@@ -4586,9 +4755,9 @@ function ColumnFilterPopover({
       setInputValue("");
     }
   }, [open, filterValue, operators]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(PopoverPrimitive2.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PopoverPrimitive2.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(PopoverPrimitive2.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PopoverPrimitive2.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       PopoverPrimitive2.Content,
       {
         align: "start",
@@ -4598,9 +4767,9 @@ function ColumnFilterPopover({
           "animate-in fade-in-0 zoom-in-95"
         ),
         onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-xs font-medium text-table-head-text", children: "Filter" }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-xs font-medium text-table-head-text", children: "Filter" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "select",
             {
               className: cn(
@@ -4610,10 +4779,10 @@ function ColumnFilterPopover({
               ),
               value: operator,
               onChange: (e) => setOperator(e.target.value),
-              children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("option", { value: op.value, children: op.label }, op.value))
+              children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("option", { value: op.value, children: op.label }, op.value))
             }
           ),
-          !noValueOperators.has(operator) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          !noValueOperators.has(operator) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "input",
             {
               type: filterType === "number" ? "number" : filterType === "date" ? "date" : "text",
@@ -4633,8 +4802,8 @@ function ColumnFilterPopover({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-end gap-xs pt-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-end gap-xs pt-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               Button,
               {
                 appearance: "ghost",
@@ -4647,7 +4816,7 @@ function ColumnFilterPopover({
                 children: "Clear"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               Button,
               {
                 appearance: "solid",
@@ -4680,7 +4849,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,
@@ -4702,7 +4871,7 @@ function DraggableHeaderCell({
     opacity: isDragging ? 0.5 : 1,
     zIndex: isDragging ? 1 : void 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     TableHead,
     {
       ref: setNodeRef,
@@ -4716,15 +4885,15 @@ function DraggableHeaderCell({
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-xs", children: [
-          leadingIcon && (canDrag ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-xs", children: [
+          leadingIcon && (canDrag ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "div",
             {
               ...attributes,
               ...listeners,
               className: "shrink-0 flex items-center cursor-grab",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                 import_icons24.Icon,
                 {
                   icon: isHovered ? import_icons24.faGripDotsVerticalSolid : leadingIcon,
@@ -4733,7 +4902,7 @@ function DraggableHeaderCell({
                 }
               )
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             import_icons24.Icon,
             {
               icon: leadingIcon,
@@ -4741,14 +4910,14 @@ function DraggableHeaderCell({
               className: "shrink-0 text-table-head-icon"
             }
           )),
-          !leadingIcon && canDrag && isHovered && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          !leadingIcon && canDrag && isHovered && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "div",
             {
               ...attributes,
               ...listeners,
               className: "shrink-0 flex items-center cursor-grab",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                 import_icons24.Icon,
                 {
                   icon: import_icons24.faGripDotsVerticalSolid,
@@ -4758,11 +4927,11 @@ function DraggableHeaderCell({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 truncate", children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex-1 truncate", children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
             header.column.columnDef.header,
             header.getContext()
           ) }),
-          canSort && (isSorted || isHovered) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          canSort && (isSorted || isHovered) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             import_icons24.Icon,
             {
               icon: isSorted === "asc" ? import_icons24.faSortUpSolid : isSorted === "desc" ? import_icons24.faSortDownSolid : import_icons24.faSortSolid,
@@ -4770,20 +4939,20 @@ function DraggableHeaderCell({
               className: "shrink-0 text-table-head-icon"
             }
           ),
-          enableFiltering && (isFiltered || isHovered) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          enableFiltering && (isFiltered || isHovered) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             ColumnFilterPopover,
             {
               filterType,
               filterValue: header.column.getFilterValue(),
               onApply: (val) => header.column.setFilterValue(val),
               onClear: () => header.column.setFilterValue(void 0),
-              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                 "button",
                 {
                   type: "button",
                   onClick: (e) => e.stopPropagation(),
                   className: "shrink-0 p-0 border-0 bg-transparent cursor-pointer",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                     import_icons24.Icon,
                     {
                       icon: isFiltered ? import_icons24.faFilterSolid : import_icons24.faFilterOutline,
@@ -4796,7 +4965,7 @@ function DraggableHeaderCell({
             }
           )
         ] }),
-        enableColumnResizing && header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        enableColumnResizing && header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "div",
           {
             onMouseDown: header.getResizeHandler(),
@@ -4894,6 +5063,9 @@ function DataTableInner({
   enableColumnPinning = false,
   enableColumnResizing = false,
   enableColumnDrag = false,
+  enableTableSettings = false,
+  lockedColumnIds,
+  tableSettingsTitle,
   sorting: sortingProp,
   onSortingChange,
   columnFilters: columnFiltersProp,
@@ -4914,17 +5086,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);
@@ -4968,7 +5142,7 @@ function DataTableInner({
       onRowSelectionChange: onRowSelectionChange ?? setInternalRowSelection
     },
     // Column visibility
-    ...enableColumnVisibility && {
+    ...effectiveColumnVisibility && {
       onColumnVisibilityChange: onColumnVisibilityChange ?? setInternalColumnVisibility
     },
     // Column order (always wire up for drag reorder)
@@ -4997,7 +5171,7 @@ function DataTableInner({
       ...enableRowSelection && {
         rowSelection: rowSelectionProp ?? internalRowSelection
       },
-      ...enableColumnVisibility && {
+      ...effectiveColumnVisibility && {
         columnVisibility: columnVisibilityProp ?? internalColumnVisibility
       },
       columnOrder,
@@ -5018,7 +5192,7 @@ function DataTableInner({
     }),
     (0, import_core.useSensor)(import_core.KeyboardSensor)
   );
-  const handleDragEnd = React36.useCallback(
+  const handleDragEnd = React37.useCallback(
     (event) => {
       const { active, over } = event;
       if (!over || active.id === over.id) return;
@@ -5032,12 +5206,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 = {};
@@ -5048,52 +5222,72 @@ function DataTableInner({
     return vars;
   }, [enableColumnResizing, table.getState().columnSizing]);
   const totalSize = enableColumnResizing ? table.getTotalSize() : void 0;
-  const tableContent = /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("w-full", className), style: columnSizeVars, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  const tableContent = /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("w-full", className), style: columnSizeVars, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       Table,
       {
         style: totalSize ? { width: totalSize, tableLayout: "fixed" } : void 0,
         className: totalSize ? "w-auto" : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             TableHeader,
             {
               className: cn(bordered && "border-t border-table-border"),
-              children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TableRow, { children: enableColumnDrag ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                import_sortable.SortableContext,
-                {
-                  items: columnIds,
-                  strategy: import_sortable.horizontalListSortingStrategy,
-                  children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                    DraggableHeaderCell,
-                    {
-                      header,
-                      enableSorting,
-                      enableFiltering,
-                      enableColumnResizing,
-                      isDragEnabled: enableColumnDrag
-                    },
-                    header.id
-                  ))
-                }
-              ) : headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                DraggableHeaderCell,
-                {
-                  header,
-                  enableSorting,
-                  enableFiltering,
-                  enableColumnResizing,
-                  isDragEnabled: false
-                },
-                header.id
-              )) }, headerGroup.id))
+              children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(TableRow, { children: [
+                enableColumnDrag ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  import_sortable.SortableContext,
+                  {
+                    items: columnIds,
+                    strategy: import_sortable.horizontalListSortingStrategy,
+                    children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                      DraggableHeaderCell,
+                      {
+                        header,
+                        enableSorting,
+                        enableFiltering,
+                        enableColumnResizing,
+                        isDragEnabled: enableColumnDrag
+                      },
+                      header.id
+                    ))
+                  }
+                ) : headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  DraggableHeaderCell,
+                  {
+                    header,
+                    enableSorting,
+                    enableFiltering,
+                    enableColumnResizing,
+                    isDragEnabled: false
+                  },
+                  header.id
+                )),
+                enableTableSettings && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  "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__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons24.Icon, { icon: import_icons24.faEllipsisVerticalSolid, size: "xs" }) })
+                  }
+                )
+              ] }, headerGroup.id))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             TableRow,
             {
               "data-state": row.getIsSelected() ? "selected" : void 0,
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                 TableCell,
                 {
                   style: enableColumnResizing ? { width: `var(--col-${cell.column.id}-size)` } : void 0,
@@ -5107,21 +5301,36 @@ function DataTableInner({
               ))
             },
             row.id
-          )) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          )) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             TableCell,
             {
               colSpan: columns.length,
               className: "h-48 text-center border-b-0",
-              children: emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-sm text-table-cell-text-secondary", children: emptyMessage })
+              children: emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-sm text-table-cell-text-secondary", children: emptyMessage })
             }
           ) }) })
         ]
       }
     ),
-    children?.(table)
+    children?.(table),
+    enableTableSettings && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      DataTableSettingsModal,
+      {
+        open: tableSettingsOpen,
+        onOpenChange: setTableSettingsOpen,
+        columns,
+        columnVisibility: columnVisibilityProp ?? internalColumnVisibility,
+        onApply: (next) => {
+          const apply = onColumnVisibilityChange ?? setInternalColumnVisibility;
+          apply(next);
+        },
+        lockedColumnIds,
+        title: tableSettingsTitle
+      }
+    )
   ] });
   if (enableColumnDrag) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       import_core.DndContext,
       {
         sensors,
@@ -5142,7 +5351,7 @@ function DataTablePagination({
   const totalCount = table.getFilteredRowModel().rows.length;
   const pageIndex = table.getState().pagination.pageIndex;
   const pageCount = table.getPageCount();
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       className: cn(
@@ -5150,16 +5359,16 @@ function DataTablePagination({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "text-xs text-table-cell-text-secondary", children: selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "text-xs text-table-cell-text-secondary", children: selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { children: [
           selectedCount,
           " of ",
           totalCount,
           " row(s) selected"
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-lg", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-sm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: "Rows per page" }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: "Rows per page" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "select",
               {
                 className: cn(
@@ -5169,18 +5378,18 @@ function DataTablePagination({
                 ),
                 value: table.getState().pagination.pageSize,
                 onChange: (e) => table.setPageSize(Number(e.target.value)),
-                children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("option", { value: size, children: size }, size))
+                children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("option", { value: size, children: size }, size))
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: [
             "Page ",
             pageIndex + 1,
             " of ",
             pageCount
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               Button,
               {
                 appearance: "outlined",
@@ -5192,7 +5401,7 @@ function DataTablePagination({
                 "aria-label": "Previous page"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               Button,
               {
                 appearance: "outlined",
@@ -5214,15 +5423,15 @@ var DataTable = Object.assign(DataTableInner, { displayName: "DataTable" });
 Object.assign(DataTablePagination, { displayName: "DataTablePagination" });
 
 // src/components/ui/side-panel.tsx
-var React37 = __toESM(require("react"));
+var React38 = __toESM(require("react"));
 var DialogPrimitive2 = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("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__ */ (0, import_jsx_runtime37.jsxs)(DialogPrimitive2.Portal, { children: [
-  overlay && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ModalOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var SidePanelContent = React38.forwardRef(({ className, overlay = true, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(DialogPrimitive2.Portal, { children: [
+  overlay && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ModalOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     DialogPrimitive2.Content,
     {
       ref,
@@ -5243,11 +5452,11 @@ var SidePanelContent = React37.forwardRef(({ className, overlay = true, children
 SidePanelContent.displayName = "SidePanelContent";
 
 // src/components/ui/filter/filter-chip-segment.tsx
-var React38 = __toESM(require("react"));
+var React39 = __toESM(require("react"));
 var TooltipPrimitive3 = __toESM(require("@radix-ui/react-tooltip"));
 var import_class_variance_authority19 = require("class-variance-authority");
 var import_icons25 = require("@l3mpire/icons");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var filterChipSegmentVariants = (0, import_class_variance_authority19.cva)(
   ["flex items-center shrink-0 transition-colors"],
   {
@@ -5275,15 +5484,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__ */ (0, import_jsx_runtime38.jsx)(
+  const span = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "span",
     {
       ref: textRef,
@@ -5292,22 +5501,22 @@ function TruncatedLabel({
     }
   );
   if (!isTruncated) return span;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive3.Provider, { delayDuration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(TooltipPrimitive3.Root, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive3.Trigger, { asChild: true, children: span }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive3.Provider, { delayDuration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(TooltipPrimitive3.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive3.Trigger, { asChild: true, children: span }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       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__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
         ]
       }
     ) })
   ] }) });
 }
-var FilterChipSegment = React38.forwardRef(
+var FilterChipSegment = React39.forwardRef(
   ({
     className,
     segmentType = "property",
@@ -5321,24 +5530,24 @@ var FilterChipSegment = React38.forwardRef(
     ...props
   }, ref) => {
     if (segmentType === "button") {
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
         "div",
         {
           ref,
           className: cn(filterChipSegmentVariants({ type: "button", hasBorder: false }), className),
           ...props,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "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__ */ (0, import_jsx_runtime38.jsx)("span", { className: "size-5 flex items-center justify-center text-sm leading-sm text-filter-chip-kebab-text", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "10", cy: "4.5", r: "1.5" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "10", cy: "10", r: "1.5" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "10", cy: "15.5", r: "1.5" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "size-5 flex items-center justify-center text-sm leading-sm text-filter-chip-kebab-text", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("circle", { cx: "10", cy: "4.5", r: "1.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("circle", { cx: "10", cy: "10", r: "1.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("circle", { cx: "10", cy: "15.5", r: "1.5" })
                 ] }) })
               }
             ),
@@ -5347,7 +5556,7 @@ var FilterChipSegment = React38.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "div",
       {
         ref,
@@ -5358,8 +5567,8 @@ var FilterChipSegment = React38.forwardRef(
         ),
         ...props,
         children: [
-          adornment && segmentType === "value" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "shrink-0 inline-flex items-center justify-center leading-none", children: adornment }),
-          icon && segmentType === "property" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          adornment && segmentType === "value" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "shrink-0 inline-flex items-center justify-center leading-none", children: adornment }),
+          icon && segmentType === "property" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             import_icons25.Icon,
             {
               icon,
@@ -5367,7 +5576,7 @@ var FilterChipSegment = React38.forwardRef(
               className: "shrink-0 text-filter-chip-segment-icon"
             }
           ),
-          label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             TruncatedLabel,
             {
               label,
@@ -5378,7 +5587,7 @@ var FilterChipSegment = React38.forwardRef(
               )
             }
           ),
-          badgeCount != null && badgeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex items-center gap-2xs p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: badgeCount }) }),
+          badgeCount != null && badgeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "flex items-center gap-2xs p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: badgeCount }) }),
           children
         ]
       }
@@ -5388,9 +5597,9 @@ var FilterChipSegment = React38.forwardRef(
 FilterChipSegment.displayName = "FilterChipSegment";
 
 // src/components/ui/filter/filter-chip.tsx
-var React39 = __toESM(require("react"));
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var FilterChip = React39.forwardRef(
+var React40 = __toESM(require("react"));
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var FilterChip = React40.forwardRef(
   ({
     className,
     icon,
@@ -5407,7 +5616,7 @@ var FilterChip = React39.forwardRef(
   }, ref) => {
     const hasOperator = !!operator;
     const hasValue = hasOperator && value != null;
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
       {
         ref,
@@ -5418,7 +5627,7 @@ var FilterChip = React39.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             FilterChipSegment,
             {
               segmentType: "property",
@@ -5428,7 +5637,7 @@ var FilterChip = React39.forwardRef(
               onClick: onPropertyClick
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             FilterChipSegment,
             {
               segmentType: hasOperator ? "operator" : "placeholder",
@@ -5437,7 +5646,7 @@ var FilterChip = React39.forwardRef(
               onClick: onOperatorClick
             }
           ),
-          hasOperator && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          hasOperator && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             FilterChipSegment,
             {
               segmentType: hasValue ? "value" : "placeholder",
@@ -5448,7 +5657,7 @@ var FilterChip = React39.forwardRef(
               onClick: onValueClick
             }
           ),
-          hasOperator && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          hasOperator && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             FilterChipSegment,
             {
               segmentType: "button",
@@ -5710,10 +5919,10 @@ function countConditions(nodes) {
 }
 
 // src/components/ui/filter/filter-bar.tsx
-var React40 = __toESM(require("react"));
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var FilterBar = React40.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+var React41 = __toESM(require("react"));
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var FilterBar = React41.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       ref,
@@ -5730,8 +5939,8 @@ var FilterBar = React40.forwardRef(
   )
 );
 FilterBar.displayName = "FilterBar";
-var FilterBarLeft = React40.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+var FilterBarLeft = React41.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       ref,
@@ -5742,8 +5951,8 @@ var FilterBarLeft = React40.forwardRef(
   )
 );
 FilterBarLeft.displayName = "FilterBarLeft";
-var FilterBarRight = React40.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+var FilterBarRight = React41.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       ref,
@@ -5756,11 +5965,11 @@ var FilterBarRight = React40.forwardRef(
 FilterBarRight.displayName = "FilterBarRight";
 
 // src/components/ui/filter/sort-button.tsx
-var React41 = __toESM(require("react"));
+var React42 = __toESM(require("react"));
 var PopoverPrimitive3 = __toESM(require("@radix-ui/react-popover"));
 var import_icons26 = require("@l3mpire/icons");
 var import_icons27 = require("@l3mpire/icons");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var SortButton = ({
   className,
   fields,
@@ -5770,11 +5979,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__ */ (0, import_jsx_runtime41.jsxs)(PopoverPrimitive3.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(PopoverPrimitive3.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       "button",
       {
         type: "button",
@@ -5789,7 +5998,7 @@ var SortButton = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             import_icons26.Icon,
             {
               icon: direction === "asc" ? import_icons27.faArrowUpSmallBigOutline : import_icons27.faArrowDownBigSmallOutline,
@@ -5797,17 +6006,17 @@ var SortButton = ({
               className: "shrink-0 text-foreground"
             }
           ),
-          !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "text-muted-foreground", children: [
+          !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-muted-foreground", children: [
               "Sort by",
               " "
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-foreground", children: activeLabel })
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-foreground", children: activeLabel })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PopoverPrimitive3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverPrimitive3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       PopoverPrimitive3.Content,
       {
         sideOffset: 4,
@@ -5821,7 +6030,7 @@ var SortButton = ({
           "min-w-[180px]"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-col", children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-col", children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
             "button",
             {
               type: "button",
@@ -5835,7 +6044,7 @@ var SortButton = ({
                 field.id === activeField ? "bg-dropdown-item-hover" : ""
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   import_icons26.Icon,
                   {
                     icon: field.icon,
@@ -5846,7 +6055,7 @@ var SortButton = ({
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   "span",
                   {
                     className: cn(
@@ -5860,9 +6069,9 @@ var SortButton = ({
             },
             field.id
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "h-px bg-border" }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-px bg-border" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
               "button",
               {
                 type: "button",
@@ -5876,7 +6085,7 @@ var SortButton = ({
                   direction === "asc" ? "bg-dropdown-item-hover" : ""
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     import_icons26.Icon,
                     {
                       icon: import_icons27.faArrowUpSmallBigOutline,
@@ -5887,7 +6096,7 @@ var SortButton = ({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     "span",
                     {
                       className: cn(
@@ -5900,7 +6109,7 @@ var SortButton = ({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
               "button",
               {
                 type: "button",
@@ -5914,7 +6123,7 @@ var SortButton = ({
                   direction === "desc" ? "bg-dropdown-item-hover" : ""
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     import_icons26.Icon,
                     {
                       icon: import_icons27.faArrowDownBigSmallOutline,
@@ -5925,7 +6134,7 @@ var SortButton = ({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     "span",
                     {
                       className: cn(
@@ -5947,10 +6156,10 @@ var SortButton = ({
 SortButton.displayName = "SortButton";
 
 // src/components/ui/filter/filter-bar-button.tsx
-var React42 = __toESM(require("react"));
+var React43 = __toESM(require("react"));
 var import_icons28 = require("@l3mpire/icons");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var FilterBarButton = React42.forwardRef(({ className, count, iconOnly = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var FilterBarButton = React43.forwardRef(({ className, count, iconOnly = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
   "button",
   {
     ref,
@@ -5967,7 +6176,7 @@ var FilterBarButton = React42.forwardRef(({ className, count, iconOnly = false,
     ),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         import_icons28.Icon,
         {
           icon: import_icons28.faFilterOutline,
@@ -5975,18 +6184,18 @@ var FilterBarButton = React42.forwardRef(({ className, count, iconOnly = false,
           className: "shrink-0 text-foreground"
         }
       ),
-      !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: children ?? "Filters" }),
-      count != null && count > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+      !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: children ?? "Filters" }),
+      count != null && count > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("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
-var React43 = __toESM(require("react"));
+var React44 = __toESM(require("react"));
 var import_icons29 = require("@l3mpire/icons");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var SaveViewButton = React43.forwardRef(
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var SaveViewButton = React44.forwardRef(
   ({ className, label = "Save view", onSave, onDropdown, ...props }, ref) => {
     const sharedStyle = [
       "relative flex items-center justify-center",
@@ -5996,14 +6205,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__ */ (0, import_jsx_runtime43.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
       "div",
       {
         ref,
         className: cn("flex items-center", className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
             "button",
             {
               type: "button",
@@ -6014,12 +6223,12 @@ var SaveViewButton = React43.forwardRef(
                 "rounded-l-md -mr-px"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-btn-solid-brand-text-default", children: label }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "absolute inset-0 rounded-l-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-btn-solid-brand-text-default", children: label }),
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "absolute inset-0 rounded-l-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
             "button",
             {
               type: "button",
@@ -6030,7 +6239,7 @@ var SaveViewButton = React43.forwardRef(
                 "rounded-r-md -ml-px"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                   import_icons29.Icon,
                   {
                     icon: import_icons29.faChevronDownOutline,
@@ -6038,7 +6247,7 @@ var SaveViewButton = React43.forwardRef(
                     className: "text-btn-solid-brand-text-default"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "absolute inset-0 rounded-r-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "absolute inset-0 rounded-r-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
               ]
             }
           )
@@ -6051,7 +6260,7 @@ SaveViewButton.displayName = "SaveViewButton";
 
 // src/components/ui/filter/operator-selector.tsx
 var PopoverPrimitive4 = __toESM(require("@radix-ui/react-popover"));
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var OperatorSelector = ({
   dataType,
   activeOperator,
@@ -6061,9 +6270,9 @@ var OperatorSelector = ({
   children
 }) => {
   const operators = OPERATORS_BY_TYPE[dataType];
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(PopoverPrimitive4.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverPrimitive4.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverPrimitive4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(PopoverPrimitive4.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverPrimitive4.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverPrimitive4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       PopoverPrimitive4.Content,
       {
         sideOffset: 4,
@@ -6076,7 +6285,7 @@ var OperatorSelector = ({
           "data-[side=bottom]:slide-in-from-top-2",
           "min-w-[180px]"
         ),
-        children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           "button",
           {
             type: "button",
@@ -6087,7 +6296,7 @@ var OperatorSelector = ({
               op === activeOperator && "bg-dropdown-item-hover"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 "span",
                 {
                   className: cn(
@@ -6097,7 +6306,7 @@ var OperatorSelector = ({
                   children: op
                 }
               ),
-              isNoValueOperator(op) && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ml-auto text-xs text-muted-foreground", children: "instant" })
+              isNoValueOperator(op) && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ml-auto text-xs text-muted-foreground", children: "instant" })
             ]
           },
           op
@@ -6113,7 +6322,7 @@ var OperatorList = ({
   onSelect
 }) => {
   const operators = OPERATORS_BY_TYPE[dataType];
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-col", children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex flex-col", children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "button",
     {
       type: "button",
@@ -6123,7 +6332,7 @@ var OperatorList = ({
         "hover:bg-dropdown-item-hover",
         op === activeOperator && "bg-dropdown-item-hover"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "span",
         {
           className: cn(
@@ -6153,7 +6362,7 @@ var halfInputClasses = [
 ].join(" ");
 
 // src/components/ui/filter/value-inputs/text-value-input.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var TextValueInput = ({
   value,
   onChange,
@@ -6163,8 +6372,8 @@ var TextValueInput = ({
   const handleKeyDown = (e) => {
     if (e.key === "Enter") onSubmit?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "input",
       {
         type: "text",
@@ -6176,13 +6385,13 @@ var TextValueInput = ({
         className: inputClasses
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(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
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var NumberValueInput = ({
   value,
   onChange,
@@ -6192,8 +6401,8 @@ var NumberValueInput = ({
   const handleKeyDown = (e) => {
     if (e.key === "Enter") onSubmit?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "input",
       {
         type: "number",
@@ -6205,7 +6414,7 @@ var NumberValueInput = ({
         className: inputClasses
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 NumberValueInput.displayName = "NumberValueInput";
@@ -6216,9 +6425,9 @@ var NumberRangeValueInput = ({
   className
 }) => {
   const rangeVal = value ?? [0, 0];
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-base", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-base", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         "input",
         {
           type: "number",
@@ -6229,8 +6438,8 @@ var NumberRangeValueInput = ({
           className: halfInputClasses
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm text-muted-foreground", children: "and" }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm text-muted-foreground", children: "and" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         "input",
         {
           type: "number",
@@ -6241,19 +6450,19 @@ var NumberRangeValueInput = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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
-var React45 = __toESM(require("react"));
+var React46 = __toESM(require("react"));
 
 // src/components/ui/date-picker.tsx
-var React44 = __toESM(require("react"));
+var React45 = __toESM(require("react"));
 var PopoverPrimitive5 = __toESM(require("@radix-ui/react-popover"));
 var import_icons30 = require("@l3mpire/icons");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function getDaysInMonth(year, month) {
   return new Date(year, month + 1, 0).getDate();
 }
@@ -6285,16 +6494,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",
@@ -6305,22 +6514,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);
@@ -6329,7 +6538,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);
@@ -6338,7 +6547,7 @@ var DatePicker = React44.forwardRef(
         return m + 1;
       });
     }, []);
-    const onSelect = React44.useCallback(
+    const onSelect = React45.useCallback(
       (date) => {
         if (mode === "single") {
           onValueChange?.(date);
@@ -6357,7 +6566,7 @@ var DatePicker = React44.forwardRef(
       },
       [mode, value, onValueChange]
     );
-    const ctxValue = React44.useMemo(
+    const ctxValue = React45.useMemo(
       () => ({
         mode,
         selected: value,
@@ -6384,7 +6593,7 @@ var DatePicker = React44.forwardRef(
         hoveredDate
       ]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "div",
       {
         ref,
@@ -6407,22 +6616,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__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "div",
     {
       ref,
       className: cn("flex flex-col items-start pt-lg px-lg", className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-base w-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("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__ */ (0, import_jsx_runtime47.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons30.Icon, { icon: import_icons30.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-base w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("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__ */ (0, import_jsx_runtime48.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons30.Icon, { icon: import_icons30.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           import_icons30.Icon,
           {
             icon: import_icons30.faArrowRightOutline,
@@ -6430,9 +6639,9 @@ var DatePickerSelects = React44.forwardRef(({ className, formatDate = defaultFor
             className: "shrink-0 text-datepicker-header-weekday"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("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__ */ (0, import_jsx_runtime47.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons30.Icon, { icon: import_icons30.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("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__ */ (0, import_jsx_runtime48.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons30.Icon, { icon: import_icons30.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] })
       ] })
     }
@@ -6448,7 +6657,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__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "button",
     {
       type: "button",
@@ -6472,14 +6681,14 @@ var DatePickerDay = ({ date, isOutside }) => {
       ),
       children: [
         date.getDate(),
-        isToday && !isOutside && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("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__ */ (0, import_jsx_runtime48.jsx)("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);
@@ -6519,7 +6728,7 @@ var DatePickerCalendar = React44.forwardRef(({ className, header, ...props }, re
     }
     return result;
   }, [month, year]);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
       ref,
@@ -6527,38 +6736,38 @@ var DatePickerCalendar = React44.forwardRef(({ className, header, ...props }, re
       ...props,
       children: [
         header,
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-col gap-lg p-lg", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "text-base font-medium leading-base text-datepicker-header-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-lg p-lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "text-base font-medium leading-base text-datepicker-header-text", children: [
               MONTH_NAMES[month],
               " ",
               year
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 "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__ */ (0, import_jsx_runtime47.jsx)(import_icons30.Icon, { icon: import_icons30.faChevronLeftOutline, size: "xs", className: "text-datepicker-header-nav" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons30.Icon, { icon: import_icons30.faChevronLeftOutline, size: "xs", className: "text-datepicker-header-nav" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 "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__ */ (0, import_jsx_runtime47.jsx)(import_icons30.Icon, { icon: import_icons30.faChevronRightOutline, size: "xs", className: "text-datepicker-header-nav" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons30.Icon, { icon: import_icons30.faChevronRightOutline, size: "xs", className: "text-datepicker-header-nav" })
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               "span",
               {
                 className: "w-9 text-center text-xs font-regular leading-xs text-datepicker-header-weekday",
@@ -6566,7 +6775,7 @@ var DatePickerCalendar = React44.forwardRef(({ className, header, ...props }, re
               },
               day
             )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               DatePickerDay,
               {
                 date: day.date,
@@ -6581,10 +6790,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();
@@ -6606,7 +6815,7 @@ var DatePickerSuggestions = React44.forwardRef(
       const to = val.to ? formatDate(val.to) : "";
       return to ? `${from} - ${to}` : from;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
       "div",
       {
         ref,
@@ -6616,16 +6825,16 @@ var DatePickerSuggestions = React44.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "pt-lg px-base", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "pt-lg px-base", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
             "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__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
               ]
             },
             i
@@ -6636,8 +6845,8 @@ var DatePickerSuggestions = React44.forwardRef(
   }
 );
 DatePickerSuggestions.displayName = "DatePickerSuggestions";
-var DatePickerFooter = React44.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var DatePickerFooter = React45.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "div",
     {
       ref,
@@ -6653,8 +6862,8 @@ var DatePickerFooter = React44.forwardRef(
   )
 );
 DatePickerFooter.displayName = "DatePickerFooter";
-var DatePickerPanel = React44.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var DatePickerPanel = React45.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "div",
     {
       ref,
@@ -6667,7 +6876,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__ */ (0, import_jsx_runtime47.jsx)(PopoverPrimitive5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var DatePickerPopover = React45.forwardRef(({ className, sideOffset = 4, align = "start", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverPrimitive5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
   PopoverPrimitive5.Content,
   {
     ref,
@@ -6743,7 +6952,7 @@ function getDefaultSuggestions(referenceDate) {
 }
 
 // src/components/ui/filter/value-inputs/date-value-input.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("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"] },
@@ -6757,7 +6966,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;
@@ -6782,22 +6991,22 @@ var DateCalendarValueInput = ({
       }
     }
   };
-  const suggestions = React45.useMemo(() => getDefaultSuggestions(), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: cn("flex flex-col", className), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  const suggestions = React46.useMemo(() => getDefaultSuggestions(), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn("flex flex-col", className), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     DatePicker,
     {
       mode: isRange ? "range" : "single",
       value: pickerValue,
       onValueChange: handleValueChange,
       children: [
-        isRange && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DatePickerSelects, {}),
-        isRange ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(DatePickerPanel, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DatePickerCalendar, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DatePickerSuggestions, { suggestions })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DatePickerCalendar, {}),
-        isRange && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(DatePickerFooter, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Button, { appearance: "solid", intent: "brand", size: "sm", onClick: onSubmit, children: "Apply" })
+        isRange && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DatePickerSelects, {}),
+        isRange ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(DatePickerPanel, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DatePickerCalendar, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DatePickerSuggestions, { suggestions })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DatePickerCalendar, {}),
+        isRange && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(DatePickerFooter, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Button, { appearance: "solid", intent: "brand", size: "sm", onClick: onSubmit, children: "Apply" })
         ] })
       ]
     }
@@ -6809,9 +7018,9 @@ var PresetTagsValueInput = ({
   onChange,
   onSubmit,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: cn("flex flex-col gap-base p-xs max-w-[280px]", className), children: RELATIVE_DATE_PRESETS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-xs", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground uppercase px-xs", children: group.group }),
-  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-wrap gap-xs", children: group.options.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn("flex flex-col gap-base p-xs max-w-[280px]", className), children: RELATIVE_DATE_PRESETS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col gap-xs", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground uppercase px-xs", children: group.group }),
+  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex flex-wrap gap-xs", children: group.options.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "button",
     {
       type: "button",
@@ -6832,7 +7041,7 @@ PresetTagsValueInput.displayName = "PresetTagsValueInput";
 
 // src/components/ui/filter/value-inputs/select-value-input.tsx
 var import_icons31 = require("@l3mpire/icons");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var intentDotClass = {
   primary: "bg-primary",
   success: "bg-success",
@@ -6840,7 +7049,7 @@ var intentDotClass = {
   critical: "bg-destructive",
   neutral: "bg-muted-foreground"
 };
-var IntentDot = ({ intent }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var IntentDot = ({ intent }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
   "span",
   {
     className: cn(
@@ -6852,7 +7061,7 @@ var IntentDot = ({ intent }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
 );
 var OptionLeading = ({ option }) => {
   if (option.icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       import_icons31.Icon,
       {
         icon: option.icon,
@@ -6862,7 +7071,7 @@ var OptionLeading = ({ option }) => {
     );
   }
   if (option.intent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(IntentDot, { intent: option.intent });
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(IntentDot, { intent: option.intent });
   }
   return null;
 };
@@ -6871,7 +7080,7 @@ var DynamicOptionRow = ({
   selected,
   multi,
   onClick
-}) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
   "button",
   {
     type: "button",
@@ -6882,14 +7091,14 @@ var DynamicOptionRow = ({
       selected && "bg-dropdown-item-hover"
     ),
     children: [
-      multi && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      multi && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "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__ */ (0, import_jsx_runtime49.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          children: selected && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             "path",
             {
               d: "M2 5L4 7L8 3",
@@ -6901,9 +7110,9 @@ var DynamicOptionRow = ({
           ) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "flex-1 flex flex-col gap-2xs min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground truncate", children: option.label }),
-        option.description && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: option.description })
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "flex-1 flex flex-col gap-2xs min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground truncate", children: option.label }),
+        option.description && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: option.description })
       ] })
     ]
   }
@@ -6920,7 +7129,7 @@ var SingleSelectValueInput = ({
     onChange(v);
     onSubmit?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "div",
     {
       className: cn(
@@ -6928,7 +7137,7 @@ var SingleSelectValueInput = ({
         className
       ),
       children: [
-        dynamicOptions?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        dynamicOptions?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           DynamicOptionRow,
           {
             option: opt,
@@ -6940,7 +7149,7 @@ var SingleSelectValueInput = ({
         )),
         options.map((rawOpt) => {
           const opt = resolveEnumOption(rawOpt);
-          return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
             "button",
             {
               type: "button",
@@ -6951,8 +7160,8 @@ var SingleSelectValueInput = ({
                 value === opt.value && "bg-dropdown-item-hover"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(OptionLeading, { option: opt }),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground truncate", children: opt.label })
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(OptionLeading, { option: opt }),
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground truncate", children: opt.label })
               ]
             },
             opt.value
@@ -6976,9 +7185,9 @@ var MultiSelectValueInput = ({
     const next = selected.includes(v) ? selected.filter((s) => s !== v) : [...selected, v];
     onChange(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("flex flex-col gap-xs p-xs", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col max-h-[240px] overflow-y-auto", children: [
-      dynamicOptions?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cn("flex flex-col gap-xs p-xs", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col max-h-[240px] overflow-y-auto", children: [
+      dynamicOptions?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         DynamicOptionRow,
         {
           option: opt,
@@ -6991,7 +7200,7 @@ var MultiSelectValueInput = ({
       options.map((rawOpt) => {
         const opt = resolveEnumOption(rawOpt);
         const isSelected = selected.includes(opt.value);
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
           "button",
           {
             type: "button",
@@ -7001,14 +7210,14 @@ var MultiSelectValueInput = ({
               "hover:bg-dropdown-item-hover"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 "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__ */ (0, import_jsx_runtime49.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                  children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                     "path",
                     {
                       d: "M2 5L4 7L8 3",
@@ -7020,21 +7229,21 @@ var MultiSelectValueInput = ({
                   ) })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(OptionLeading, { option: opt }),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground truncate", children: opt.label })
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(OptionLeading, { option: opt }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground truncate", children: opt.label })
             ]
           },
           opt.value
         );
       })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(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
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var RelationValueInput = ({
   value,
   onChange,
@@ -7044,8 +7253,8 @@ var RelationValueInput = ({
   const handleKeyDown = (e) => {
     if (e.key === "Enter") onSubmit?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "input",
       {
         type: "text",
@@ -7057,13 +7266,13 @@ var RelationValueInput = ({
         className: inputClasses
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 RelationValueInput.displayName = "RelationValueInput";
 
 // src/components/ui/filter/value-input.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var ValueInput = ({
   dataType,
   operator,
@@ -7078,13 +7287,13 @@ var ValueInput = ({
   if (!inputType) return null;
   switch (inputType) {
     case "TextInput":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TextValueInput, { value, onChange, onSubmit, className });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TextValueInput, { value, onChange, onSubmit, className });
     case "NumberInput":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NumberValueInput, { value, onChange, onSubmit, className });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NumberValueInput, { value, onChange, onSubmit, className });
     case "NumberRange":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NumberRangeValueInput, { value, onChange, onSubmit, className });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NumberRangeValueInput, { value, onChange, onSubmit, className });
     case "SingleSelect":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         SingleSelectValueInput,
         {
           value,
@@ -7096,7 +7305,7 @@ var ValueInput = ({
         }
       );
     case "MultiSelect":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         MultiSelectValueInput,
         {
           value,
@@ -7109,7 +7318,7 @@ var ValueInput = ({
       );
     case "DatePicker":
     case "DateRange":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         DateCalendarValueInput,
         {
           operator,
@@ -7121,7 +7330,7 @@ var ValueInput = ({
       );
     case "RelationPicker":
     case "MultiRelationPicker":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RelationValueInput, { value, onChange, onSubmit, className });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(RelationValueInput, { value, onChange, onSubmit, className });
     default:
       return null;
   }
@@ -7129,13 +7338,13 @@ var ValueInput = ({
 ValueInput.displayName = "ValueInput";
 
 // src/components/ui/filter/property-selector.tsx
-var React46 = __toESM(require("react"));
+var React47 = __toESM(require("react"));
 var PopoverPrimitive6 = __toESM(require("@radix-ui/react-popover"));
 var import_icons32 = require("@l3mpire/icons");
-var import_jsx_runtime52 = require("react/jsx-runtime");
-var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "shrink-0 flex flex-col", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "h-px bg-dropdown-border mx-xs" }),
-  /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "shrink-0 flex flex-col", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "h-px bg-dropdown-border mx-xs" }),
+  /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "button",
     {
       type: "button",
@@ -7143,7 +7352,7 @@ var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ (0, import_js
       onClick,
       className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           import_icons32.Icon,
           {
             icon: import_icons32.faFilterOutline,
@@ -7151,8 +7360,8 @@ var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ (0, import_js
             className: "shrink-0 text-dropdown-item-icon"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: "Advanced filter" }),
-        count > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: "Advanced filter" }),
+        count > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: [
           count,
           " ",
           count === 1 ? "rule" : "rules"
@@ -7176,26 +7385,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;
@@ -7213,14 +7422,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(
@@ -7229,7 +7438,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;
@@ -7237,16 +7446,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__ */ (0, import_jsx_runtime52.jsxs)(PopoverPrimitive6.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PopoverPrimitive6.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(PopoverPrimitive6.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverPrimitive6.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
       PopoverPrimitive6.Content,
       {
         sideOffset: 4,
@@ -7263,9 +7472,9 @@ var PropertySelector = ({
         children: [
           activeGroup === null ? (
             /* ── Level 1: Search + (pinned props) + Categories ──────── */
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   import_icons32.Icon,
                   {
                     icon: import_icons32.faMagnifyingGlassOutline,
@@ -7273,7 +7482,7 @@ var PropertySelector = ({
                     className: "shrink-0 text-muted-foreground"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   "input",
                   {
                     type: "text",
@@ -7285,8 +7494,8 @@ var PropertySelector = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto", children: [
-                filteredPinnedProperties.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto", children: [
+                filteredPinnedProperties.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -7296,7 +7505,7 @@ var PropertySelector = ({
                     },
                     className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                         import_icons32.Icon,
                         {
                           icon: prop.icon,
@@ -7304,14 +7513,14 @@ var PropertySelector = ({
                           className: "shrink-0 text-dropdown-item-icon"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label })
+                      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("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__ */ (0, import_jsx_runtime52.jsxs)(
+                  nonPinnedSearchResults.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
                     "button",
                     {
                       type: "button",
@@ -7321,7 +7530,7 @@ var PropertySelector = ({
                       },
                       className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                           import_icons32.Icon,
                           {
                             icon: prop.icon,
@@ -7329,15 +7538,15 @@ var PropertySelector = ({
                             className: "shrink-0 text-dropdown-item-icon"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label }),
-                        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: prop.groupLabel })
+                        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label }),
+                        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: prop.groupLabel })
                       ]
                     },
                     prop.id
                   ))
                 ) : (
                   /* ── Category list ────────────────────────────────── */
-                  filteredGroups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+                  filteredGroups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
                     "button",
                     {
                       type: "button",
@@ -7347,7 +7556,7 @@ var PropertySelector = ({
                       },
                       className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                           import_icons32.Icon,
                           {
                             icon: g.groupIcon,
@@ -7355,9 +7564,9 @@ var PropertySelector = ({
                             className: "shrink-0 text-dropdown-item-icon"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: g.groupLabel }),
-                        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: g.count }),
-                        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: g.groupLabel }),
+                        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: g.count }),
+                        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                           import_icons32.Icon,
                           {
                             icon: import_icons32.faChevronRightOutline,
@@ -7370,13 +7579,13 @@ var PropertySelector = ({
                     g.group
                   ))
                 ),
-                filteredPinnedProperties.length === 0 && (search ? nonPinnedSearchResults.length === 0 : filteredGroups.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
+                filteredPinnedProperties.length === 0 && (search ? nonPinnedSearchResults.length === 0 : filteredGroups.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
               ] })
             ] })
           ) : (
             /* ── Level 2: Properties ─────────────────────────────────── */
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -7386,7 +7595,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__ */ (0, import_jsx_runtime52.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                       import_icons32.Icon,
                       {
                         icon: import_icons32.faChevronLeftOutline,
@@ -7394,12 +7603,12 @@ var PropertySelector = ({
                         className: "shrink-0 text-dropdown-item-icon"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex-1 text-xs font-medium leading-xs text-muted-foreground text-left truncate", children: activeGroupInfo?.groupLabel })
+                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "flex-1 text-xs font-medium leading-xs text-muted-foreground text-left truncate", children: activeGroupInfo?.groupLabel })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   import_icons32.Icon,
                   {
                     icon: import_icons32.faMagnifyingGlassOutline,
@@ -7407,7 +7616,7 @@ var PropertySelector = ({
                     className: "shrink-0 text-muted-foreground"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   "input",
                   {
                     type: "text",
@@ -7419,8 +7628,8 @@ var PropertySelector = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto", children: [
-                filteredProperties.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto", children: [
+                filteredProperties.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -7430,7 +7639,7 @@ var PropertySelector = ({
                     },
                     className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                         import_icons32.Icon,
                         {
                           icon: prop.icon,
@@ -7438,16 +7647,16 @@ var PropertySelector = ({
                           className: "shrink-0 text-dropdown-item-icon"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label })
+                      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("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__ */ (0, import_jsx_runtime52.jsx)("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
+                filteredProperties.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
               ] })
             ] })
           ),
-          showAdvancedFooter && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          showAdvancedFooter && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             AdvancedFilterFooter,
             {
               onClick: handleAdvancedClick,
@@ -7464,7 +7673,7 @@ PropertySelector.displayName = "PropertySelector";
 // src/components/ui/filter/kebab-menu.tsx
 var PopoverPrimitive7 = __toESM(require("@radix-ui/react-popover"));
 var import_icons33 = require("@l3mpire/icons");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var KebabMenu = ({
   onConvertToAdvanced,
   hasAdvancedFilters = false,
@@ -7472,9 +7681,9 @@ var KebabMenu = ({
   open,
   onOpenChange,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(PopoverPrimitive7.Root, { open, onOpenChange, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverPrimitive7.Trigger, { asChild: true, children }),
-  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(PopoverPrimitive7.Root, { open, onOpenChange, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverPrimitive7.Trigger, { asChild: true, children }),
+  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     PopoverPrimitive7.Content,
     {
       sideOffset: 4,
@@ -7488,7 +7697,7 @@ var KebabMenu = ({
         "min-w-[210px]"
       ),
       children: [
-        onConvertToAdvanced && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+        onConvertToAdvanced && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
           "button",
           {
             type: "button",
@@ -7498,7 +7707,7 @@ var KebabMenu = ({
             },
             className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 import_icons33.Icon,
                 {
                   icon: import_icons33.faArrowRightOutline,
@@ -7506,12 +7715,12 @@ var KebabMenu = ({
                   className: "shrink-0 text-dropdown-item-icon"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text", children: hasAdvancedFilters ? "Add to advanced filters" : "Convert to advanced" })
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text", children: hasAdvancedFilters ? "Add to advanced filters" : "Convert to advanced" })
             ]
           }
         ),
-        onConvertToAdvanced && onDelete && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "h-px mx-base my-xs bg-border" }),
-        onDelete && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+        onConvertToAdvanced && onDelete && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "h-px mx-base my-xs bg-border" }),
+        onDelete && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
           "button",
           {
             type: "button",
@@ -7521,7 +7730,7 @@ var KebabMenu = ({
             },
             className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 import_icons33.Icon,
                 {
                   icon: import_icons33.faTrashOutline,
@@ -7529,7 +7738,7 @@ var KebabMenu = ({
                   className: "shrink-0 text-destructive"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm font-regular leading-sm text-destructive", children: "Delete filter" })
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm font-regular leading-sm text-destructive", children: "Delete filter" })
             ]
           }
         )
@@ -7540,10 +7749,10 @@ var KebabMenu = ({
 KebabMenu.displayName = "KebabMenu";
 
 // src/components/ui/filter/filter-editor.tsx
-var React47 = __toESM(require("react"));
+var React48 = __toESM(require("react"));
 var PopoverPrimitive8 = __toESM(require("@radix-ui/react-popover"));
 var import_icons34 = require("@l3mpire/icons");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var FilterEditor = ({
   propertyDef,
   condition,
@@ -7554,16 +7763,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);
@@ -7588,9 +7797,9 @@ var FilterEditor = ({
     onOpenChange?.(false);
     onClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(PopoverPrimitive8.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverPrimitive8.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverPrimitive8.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(PopoverPrimitive8.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PopoverPrimitive8.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PopoverPrimitive8.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       PopoverPrimitive8.Content,
       {
         sideOffset: 4,
@@ -7604,8 +7813,8 @@ var FilterEditor = ({
           "min-w-[240px]"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-base px-base pt-base pb-xs border-b border-border", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center gap-base px-base pt-base pb-xs border-b border-border", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
               import_icons34.Icon,
               {
                 icon: propertyDef.icon,
@@ -7613,8 +7822,8 @@ var FilterEditor = ({
                 className: "shrink-0 text-dropdown-item-icon"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm font-medium leading-sm text-foreground", children: propertyDef.label }),
-            localOperator && view === "value" && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-sm font-medium leading-sm text-foreground", children: propertyDef.label }),
+            localOperator && view === "value" && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
               "button",
               {
                 type: "button",
@@ -7627,14 +7836,14 @@ var FilterEditor = ({
               }
             )
           ] }),
-          view === "operator" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "p-xs", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          view === "operator" ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "p-xs", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             OperatorList,
             {
               dataType: propertyDef.type,
               activeOperator: localOperator,
               onSelect: handleOperatorSelect
             }
-          ) }) : localOperator && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          ) }) : localOperator && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             ValueInput,
             {
               dataType: propertyDef.type,
@@ -7654,10 +7863,10 @@ var FilterEditor = ({
 FilterEditor.displayName = "FilterEditor";
 
 // src/components/ui/filter/interactive-filter-chip.tsx
-var React48 = __toESM(require("react"));
+var React49 = __toESM(require("react"));
 var PopoverPrimitive9 = __toESM(require("@radix-ui/react-popover"));
 var import_icons35 = require("@l3mpire/icons");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var SegmentPopover = ({
   open,
   onOpenChange,
@@ -7665,9 +7874,9 @@ var SegmentPopover = ({
   children,
   align = "start",
   minWidth = "240px"
-}) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(PopoverPrimitive9.Root, { open, onOpenChange, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PopoverPrimitive9.Trigger, { asChild: true, children: trigger }),
-  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(PopoverPrimitive9.Root, { open, onOpenChange, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverPrimitive9.Trigger, { asChild: true, children: trigger }),
+  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     PopoverPrimitive9.Content,
     {
       sideOffset: 4,
@@ -7697,19 +7906,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);
@@ -7743,13 +7952,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__ */ (0, import_jsx_runtime55.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         import_icons35.Icon,
         {
           icon: opt.icon,
@@ -7760,7 +7969,7 @@ var InteractiveFilterChip = ({
     }
     return null;
   }, [condition.value, propertyDef.options]);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "div",
     {
       className: cn(
@@ -7769,7 +7978,7 @@ var InteractiveFilterChip = ({
         className
       ),
       children: [
-        properties ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        properties ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           PropertySelector,
           {
             properties,
@@ -7779,7 +7988,7 @@ var InteractiveFilterChip = ({
             },
             open: propertyOpen,
             onOpenChange: setPropertyOpen,
-            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               FilterChipSegment,
               {
                 segmentType: "property",
@@ -7790,7 +7999,7 @@ var InteractiveFilterChip = ({
               }
             ) })
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           FilterChipSegment,
           {
             segmentType: "property",
@@ -7799,13 +8008,13 @@ var InteractiveFilterChip = ({
             label: propertyDef.label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           SegmentPopover,
           {
             open: operatorOpen,
             onOpenChange: setOperatorOpen,
             minWidth: "180px",
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               FilterChipSegment,
               {
                 segmentType: hasOperator ? "operator" : "placeholder",
@@ -7814,7 +8023,7 @@ var InteractiveFilterChip = ({
                 onClick: () => setOperatorOpen(true)
               }
             ) }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "p-xs", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "p-xs", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               OperatorList,
               {
                 dataType: propertyDef.type,
@@ -7827,13 +8036,13 @@ var InteractiveFilterChip = ({
         hasOperator && condition.operator && !isNoValueOperator(condition.operator) && (() => {
           const inputType = getValueInputType(propertyDef.type, condition.operator);
           const dateWide = inputType === "DatePicker" || inputType === "DateRange";
-          return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             SegmentPopover,
             {
               open: valueOpen,
               onOpenChange: setValueOpen,
               minWidth: dateWide ? "auto" : "240px",
-              trigger: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+              trigger: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 FilterChipSegment,
                 {
                   segmentType: hasValue ? "value" : "placeholder",
@@ -7844,7 +8053,7 @@ var InteractiveFilterChip = ({
                   onClick: () => setValueOpen(true)
                 }
               ) }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 ValueInput,
                 {
                   dataType: propertyDef.type,
@@ -7859,7 +8068,7 @@ var InteractiveFilterChip = ({
             }
           );
         })(),
-        hasOperator && condition.operator && isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        hasOperator && condition.operator && isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           FilterChipSegment,
           {
             segmentType: "value",
@@ -7867,7 +8076,7 @@ var InteractiveFilterChip = ({
             label: condition.operator
           }
         ),
-        hasOperator && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        hasOperator && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           KebabMenu,
           {
             open: kebabOpen,
@@ -7875,7 +8084,7 @@ var InteractiveFilterChip = ({
             onConvertToAdvanced,
             hasAdvancedFilters,
             onDelete,
-            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               FilterChipSegment,
               {
                 segmentType: "button",
@@ -7894,13 +8103,13 @@ var InteractiveFilterChip = ({
 InteractiveFilterChip.displayName = "InteractiveFilterChip";
 
 // src/components/ui/filter/filter-system.tsx
-var React56 = __toESM(require("react"));
+var React57 = __toESM(require("react"));
 var import_icons42 = require("@l3mpire/icons");
 
 // src/components/ui/filter/advanced-chip.tsx
-var React49 = __toESM(require("react"));
+var React50 = __toESM(require("react"));
 var import_icons36 = require("@l3mpire/icons");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var btnBase = [
   "flex items-center justify-center",
   "min-h-[32px] max-h-[32px]",
@@ -7909,9 +8118,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__ */ (0, import_jsx_runtime56.jsxs)("div", { className: cn("inline-flex items-center", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+var AdvancedChip = React50.forwardRef(
+  ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("inline-flex items-center", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
       "button",
       {
         ref,
@@ -7924,7 +8133,7 @@ var AdvancedChip = React49.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             import_icons36.Icon,
             {
               icon: import_icons36.faFilterOutline,
@@ -7932,12 +8141,12 @@ var AdvancedChip = React49.forwardRef(
               className: "shrink-0 text-foreground"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: "Advanced filters" }),
-          count > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: "Advanced filters" }),
+          count > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
         ]
       }
     ),
-    onClear && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    onClear && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "button",
       {
         type: "button",
@@ -7951,7 +8160,7 @@ var AdvancedChip = React49.forwardRef(
           "rounded-r-md -ml-px"
         ),
         "aria-label": "Clear all advanced filters",
-        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons36.Icon, { icon: import_icons36.faXmarkOutline, size: "sm", className: "text-foreground" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons36.Icon, { icon: import_icons36.faXmarkOutline, size: "sm", className: "text-foreground" })
       }
     )
   ] })
@@ -7959,28 +8168,28 @@ var AdvancedChip = React49.forwardRef(
 AdvancedChip.displayName = "AdvancedChip";
 
 // src/components/ui/filter/advanced-popover.tsx
-var React53 = __toESM(require("react"));
+var React54 = __toESM(require("react"));
 var PopoverPrimitive12 = __toESM(require("@radix-ui/react-popover"));
 var import_icons40 = require("@l3mpire/icons");
 
 // src/components/ui/filter/advanced-row.tsx
-var React51 = __toESM(require("react"));
+var React52 = __toESM(require("react"));
 var PopoverPrimitive11 = __toESM(require("@radix-ui/react-popover"));
 var TooltipPrimitive4 = __toESM(require("@radix-ui/react-tooltip"));
 var import_icons38 = require("@l3mpire/icons");
 
 // src/components/ui/filter/filter-node-actions.tsx
-var React50 = __toESM(require("react"));
+var React51 = __toESM(require("react"));
 var PopoverPrimitive10 = __toESM(require("@radix-ui/react-popover"));
 var import_icons37 = require("@l3mpire/icons");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("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",
@@ -7999,14 +8208,14 @@ var FilterNodeActions = ({
       destructive: true
     }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(PopoverPrimitive10.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PopoverPrimitive10.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(PopoverPrimitive10.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PopoverPrimitive10.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "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__ */ (0, import_jsx_runtime57.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           import_icons37.Icon,
           {
             icon: import_icons37.faEllipsisOutline,
@@ -8016,7 +8225,7 @@ var FilterNodeActions = ({
         )
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       PopoverPrimitive10.Content,
       {
         sideOffset: 4,
@@ -8028,7 +8237,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__ */ (0, import_jsx_runtime57.jsxs)(
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
           "button",
           {
             type: "button",
@@ -8042,7 +8251,7 @@ var FilterNodeActions = ({
               item.destructive && "text-destructive"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                 import_icons37.Icon,
                 {
                   icon: item.icon,
@@ -8053,7 +8262,7 @@ var FilterNodeActions = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                 "span",
                 {
                   className: cn(
@@ -8074,7 +8283,7 @@ var FilterNodeActions = ({
 FilterNodeActions.displayName = "FilterNodeActions";
 
 // src/components/ui/filter/advanced-row.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var selectBtnStyle = [
   "flex items-center gap-base",
   "px-base py-sm",
@@ -8095,10 +8304,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);
@@ -8129,7 +8338,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;
@@ -8137,28 +8346,28 @@ var AdvancedRow = ({
   }, [condition.value, propertyDef.options]);
   const badgeCount = getBadgeCount(condition.value);
   const hasValue = displayValue != null;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TooltipPrimitive4.Provider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(TooltipPrimitive4.Root, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TooltipPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground cursor-default", children: connector }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TooltipPrimitive4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive4.Provider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(TooltipPrimitive4.Root, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground cursor-default", children: connector }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
         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__ */ (0, import_jsx_runtime58.jsx)(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
           ]
         }
       ) })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(PopoverPrimitive11.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons38.Icon, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-muted-foreground" }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground whitespace-nowrap truncate", children: propertyDef.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons38.Icon, { icon: import_icons38.faChevronDownOutline, size: "xs", className: "shrink-0 text-foreground" })
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(PopoverPrimitive11.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons38.Icon, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground whitespace-nowrap truncate", children: propertyDef.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons38.Icon, { icon: import_icons38.faChevronDownOutline, size: "xs", className: "shrink-0 text-foreground" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
         PopoverPrimitive11.Content,
         {
           sideOffset: 4,
@@ -8171,7 +8380,7 @@ var AdvancedRow = ({
             "min-w-[200px]"
           ),
           children: [
-            pinnedProperties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+            pinnedProperties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
               "button",
               {
                 type: "button",
@@ -8185,13 +8394,13 @@ var AdvancedRow = ({
                   p.id === condition.propertyId && "bg-dropdown-item-hover"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons38.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label })
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons38.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label })
                 ]
               },
               p.id
             )),
-            unpinnedProperties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+            unpinnedProperties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
               "button",
               {
                 type: "button",
@@ -8205,9 +8414,9 @@ var AdvancedRow = ({
                   p.id === condition.propertyId && "bg-dropdown-item-hover"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons38.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ml-auto text-xs font-regular leading-xs text-muted-foreground", children: p.groupLabel })
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons38.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ml-auto text-xs font-regular leading-xs text-muted-foreground", children: p.groupLabel })
                 ]
               },
               p.id
@@ -8216,12 +8425,12 @@ var AdvancedRow = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(PopoverPrimitive11.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons38.Icon, { icon: import_icons38.faChevronDownOutline, size: "xs", className: "shrink-0 text-foreground" })
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(PopoverPrimitive11.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons38.Icon, { icon: import_icons38.faChevronDownOutline, size: "xs", className: "shrink-0 text-foreground" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         PopoverPrimitive11.Content,
         {
           sideOffset: 4,
@@ -8233,7 +8442,7 @@ var AdvancedRow = ({
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[160px]"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
             OperatorList,
             {
               dataType: propertyDef.type,
@@ -8248,7 +8457,7 @@ var AdvancedRow = ({
       const inputType = getValueInputType(propertyDef.type, condition.operator);
       const isInline = inputType === "TextInput" || inputType === "NumberInput";
       if (isInline) {
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "input",
           {
             type: inputType === "NumberInput" ? "number" : "text",
@@ -8273,15 +8482,15 @@ var AdvancedRow = ({
         const dyn = propertyDef.dynamicOptions?.find((o) => o.value === v);
         return dyn ? dyn.label : v;
       }) : null;
-      return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(PopoverPrimitive11.Root, { open: valueOpen, onOpenChange: setValueOpen, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(PopoverPrimitive11.Root, { open: valueOpen, onOpenChange: setValueOpen, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
           "button",
           {
             type: "button",
             className: cn(selectBtnStyle, "flex-1 min-w-[80px] justify-between overflow-hidden"),
             children: [
-              multiTags && multiTags.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ValueTagRow, { tags: multiTags }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
-                valueLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              multiTags && multiTags.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ValueTagRow, { tags: multiTags }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+                valueLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                   import_icons38.Icon,
                   {
                     icon: valueLeadingIcon,
@@ -8289,7 +8498,7 @@ var AdvancedRow = ({
                     className: "shrink-0 text-foreground"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                   "span",
                   {
                     className: cn(
@@ -8301,7 +8510,7 @@ var AdvancedRow = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 import_icons38.Icon,
                 {
                   icon: import_icons38.faChevronDownOutline,
@@ -8312,7 +8521,7 @@ var AdvancedRow = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           PopoverPrimitive11.Content,
           {
             sideOffset: 4,
@@ -8324,7 +8533,7 @@ var AdvancedRow = ({
               "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
             ),
             style: { minWidth: dateWide ? "auto" : "240px" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               ValueInput,
               {
                 dataType: propertyDef.type,
@@ -8340,7 +8549,7 @@ var AdvancedRow = ({
         ) })
       ] });
     })(),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       FilterNodeActions,
       {
         nodeType: "condition",
@@ -8361,10 +8570,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;
@@ -8396,32 +8605,32 @@ function ValueTagRow({ tags }) {
   }, [tags]);
   const overflowCount = tags.length - visibleCount;
   const overflowTags = tags.slice(visibleCount);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-1 items-center gap-xs min-w-0 overflow-hidden relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-1 items-center gap-xs min-w-0 overflow-hidden relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "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__ */ (0, import_jsx_runtime58.jsx)("span", { className: tagChip, children: t }, t))
+        children: tags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: tagChip, children: t }, t))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { ref: containerRef, className: "flex flex-1 items-center gap-xs overflow-hidden", children: [
-      tags.slice(0, visibleCount).map((t) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: tagChip, children: t }, t)),
-      overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TooltipPrimitive4.Provider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(TooltipPrimitive4.Root, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TooltipPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: cn(tagChip, "cursor-default bg-filter-chip-badge-bg text-filter-chip-badge-text"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { ref: containerRef, className: "flex flex-1 items-center gap-xs overflow-hidden", children: [
+      tags.slice(0, visibleCount).map((t) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: tagChip, children: t }, t)),
+      overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive4.Provider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(TooltipPrimitive4.Root, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: cn(tagChip, "cursor-default bg-filter-chip-badge-bg text-filter-chip-badge-text"), children: [
           "+",
           overflowCount
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TooltipPrimitive4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
           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__ */ (0, import_jsx_runtime58.jsx)("span", { children: t }, t)),
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
+              overflowTags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: t }, t)),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
             ]
           }
         ) })
@@ -8431,10 +8640,10 @@ function ValueTagRow({ tags }) {
 }
 
 // src/components/ui/filter/advanced-group.tsx
-var React52 = __toESM(require("react"));
+var React53 = __toESM(require("react"));
 var TooltipPrimitive5 = __toESM(require("@radix-ui/react-tooltip"));
 var import_icons39 = require("@l3mpire/icons");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var AdvancedGroup = ({
   connector,
   onConnectorToggle,
@@ -8445,25 +8654,25 @@ var AdvancedGroup = ({
   properties,
   children
 }) => {
-  const [addOpen, setAddOpen] = React52.useState(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-start gap-base w-full min-w-0", children: [
-    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive5.Provider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(TooltipPrimitive5.Root, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground cursor-default", children: connector }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  const [addOpen, setAddOpen] = React53.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-start gap-base w-full min-w-0", children: [
+    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipPrimitive5.Provider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(TooltipPrimitive5.Root, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground cursor-default", children: connector }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipPrimitive5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
         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__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive5.Arrow, { className: "fill-tooltip-default-bg" })
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipPrimitive5.Arrow, { className: "fill-tooltip-default-bg" })
           ]
         }
       ) })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex-1 min-w-0 flex flex-col gap-base p-base border border-border rounded-md bg-secondary", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("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__ */ (0, import_jsx_runtime59.jsx)(
+      onAddFilter && properties && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         PropertySelector,
         {
           properties,
@@ -8473,13 +8682,13 @@ var AdvancedGroup = ({
           },
           open: addOpen,
           onOpenChange: setAddOpen,
-          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
             "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__ */ (0, import_jsx_runtime59.jsx)(import_icons39.Icon, { icon: import_icons39.faPlusOutline, size: "sm" }),
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_icons39.Icon, { icon: import_icons39.faPlusOutline, size: "sm" }),
                 "Add filter"
               ]
             }
@@ -8487,7 +8696,7 @@ var AdvancedGroup = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "shrink-0 pt-base", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "shrink-0 pt-base", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       FilterNodeActions,
       {
         nodeType: "group",
@@ -8501,7 +8710,7 @@ var AdvancedGroup = ({
 AdvancedGroup.displayName = "AdvancedGroup";
 
 // src/components/ui/filter/advanced-popover.tsx
-var import_jsx_runtime60 = (
+var import_jsx_runtime61 = (
   /* Draft row in empty group */
   require("react/jsx-runtime")
 );
@@ -8520,9 +8729,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);
@@ -8609,7 +8818,7 @@ var AdvancedPopover = ({
   const renderNode = (node, index) => {
     const connector = index === 0 ? "Where" : (node.logicOperator ?? "and") === "and" ? "And" : "Or";
     if (isFilterGroup(node)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         AdvancedGroup,
         {
           connector,
@@ -8622,7 +8831,7 @@ var AdvancedPopover = ({
             const newFilter = createFilterWithDefaults(prop.id, prop.type);
             handleGroupChildrenChange(node.id, [...node.children, newFilter]);
           },
-          children: node.children.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          children: node.children.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             DraftRow,
             {
               properties,
@@ -8638,7 +8847,7 @@ var AdvancedPopover = ({
     }
     const propDef = getPropertyDef(node.propertyId);
     if (!propDef) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       AdvancedRow,
       {
         connector,
@@ -8658,9 +8867,9 @@ var AdvancedPopover = ({
       node.id
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(PopoverPrimitive12.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(PopoverPrimitive12.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(PopoverPrimitive12.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(PopoverPrimitive12.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
       PopoverPrimitive12.Content,
       {
         sideOffset: 4,
@@ -8677,7 +8886,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__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             DraftRow,
             {
               properties,
@@ -8686,42 +8895,42 @@ var AdvancedPopover = ({
               onOpenChange: setDraftPickerOpen
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-border", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center gap-sm", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-border", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center gap-sm", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 PropertySelector,
                 {
                   properties,
                   onSelect: handleAddFilter,
                   open: addSelectorOpen,
                   onOpenChange: setAddSelectorOpen,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("button", { type: "button", className: cn(ghostBtn, "text-foreground"), children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_icons40.Icon, { icon: import_icons40.faPlusOutline, size: "sm", className: "text-foreground" }),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("button", { type: "button", className: cn(ghostBtn, "text-foreground"), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_icons40.Icon, { icon: import_icons40.faPlusOutline, size: "sm", className: "text-foreground" }),
                     "Add filter"
                   ] })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
                 "button",
                 {
                   type: "button",
                   onClick: handleAddGroup,
                   className: cn(ghostBtn, "text-foreground"),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_icons40.Icon, { icon: import_icons40.faPlusOutline, size: "sm", className: "text-foreground" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_icons40.Icon, { icon: import_icons40.faPlusOutline, size: "sm", className: "text-foreground" }),
                     "Add filters group"
                   ]
                 }
               )
             ] }),
-            filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+            filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
               "button",
               {
                 type: "button",
                 onClick: handleClearAll,
                 className: cn(ghostBtn, "text-destructive"),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_icons40.Icon, { icon: import_icons40.faXmarkOutline, size: "sm", className: "text-destructive" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_icons40.Icon, { icon: import_icons40.faXmarkOutline, size: "sm", className: "text-destructive" }),
                   "Clear filters"
                 ]
               }
@@ -8739,16 +8948,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__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       PropertySelector,
       {
         properties,
@@ -8758,7 +8967,7 @@ var DraftRow = ({
         },
         open,
         onOpenChange: setOpen,
-        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
           "button",
           {
             type: "button",
@@ -8770,8 +8979,8 @@ var DraftRow = ({
               "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-sm font-regular leading-sm text-muted-foreground whitespace-nowrap", children: "Select property" }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-sm font-regular leading-sm text-muted-foreground whitespace-nowrap", children: "Select property" }),
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 import_icons40.Icon,
                 {
                   icon: import_icons40.faChevronDownOutline,
@@ -8788,11 +8997,11 @@ var DraftRow = ({
 };
 
 // src/components/ui/filter/summary-chip.tsx
-var React54 = __toESM(require("react"));
+var React55 = __toESM(require("react"));
 var PopoverPrimitive13 = __toESM(require("@radix-ui/react-popover"));
 var TooltipPrimitive6 = __toESM(require("@radix-ui/react-tooltip"));
 var import_icons41 = require("@l3mpire/icons");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var ghostBtn2 = [
   "flex items-center gap-sm px-base py-sm",
   "min-h-[32px]",
@@ -8812,15 +9021,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);
@@ -8902,7 +9111,7 @@ var SummaryChip = ({
   const renderNode = (node, index) => {
     const connector = index === 0 ? "Where" : (node.logicOperator ?? "and") === "and" ? "And" : "Or";
     if (isFilterGroup(node)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         AdvancedGroup,
         {
           connector,
@@ -8915,7 +9124,7 @@ var SummaryChip = ({
             const newFilter = createFilterWithDefaults(prop.id, prop.type);
             handleGroupChildrenChange(node.id, [...node.children, newFilter]);
           },
-          children: node.children.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          children: node.children.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             DraftRow2,
             {
               properties,
@@ -8931,7 +9140,7 @@ var SummaryChip = ({
     }
     const propDef = getPropertyDef(node.propertyId);
     if (!propDef) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       AdvancedRow,
       {
         connector,
@@ -8951,7 +9160,7 @@ var SummaryChip = ({
       node.id
     );
   };
-  const trigger = children ?? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+  const trigger = children ?? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     "button",
     {
       type: "button",
@@ -8965,27 +9174,27 @@ var SummaryChip = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_icons41.Icon, { icon: import_icons41.faFilterOutline, size: "sm", className: "shrink-0 text-foreground" }),
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: "Filters" }),
-        count > 0 && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_icons41.Icon, { icon: import_icons41.faFilterOutline, size: "sm", className: "shrink-0 text-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: "Filters" }),
+        count > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
       ]
     }
   );
   const hasTooltip = tooltipContent && !open;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipPrimitive6.Provider, { delayDuration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipPrimitive6.Root, { open: hasTooltip ? void 0 : false, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(PopoverPrimitive13.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipPrimitive6.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(PopoverPrimitive13.Trigger, { asChild: true, children: trigger }) }),
-    hasTooltip && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipPrimitive6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TooltipPrimitive6.Provider, { delayDuration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TooltipPrimitive6.Root, { open: hasTooltip ? void 0 : false, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(PopoverPrimitive13.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TooltipPrimitive6.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(PopoverPrimitive13.Trigger, { asChild: true, children: trigger }) }),
+    hasTooltip && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TooltipPrimitive6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
       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__ */ (0, import_jsx_runtime61.jsx)(TooltipPrimitive6.Arrow, { className: "fill-tooltip-default-bg" })
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TooltipPrimitive6.Arrow, { className: "fill-tooltip-default-bg" })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(PopoverPrimitive13.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(PopoverPrimitive13.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
       PopoverPrimitive13.Content,
       {
         sideOffset: 4,
@@ -9002,7 +9211,7 @@ var SummaryChip = ({
           collisionBoundary ? "w-[min(640px,var(--radix-popover-content-available-width))]" : "w-[min(640px,calc(100vw-32px))]"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             DraftRow2,
             {
               properties,
@@ -9011,27 +9220,27 @@ var SummaryChip = ({
               onOpenChange: setDraftPickerOpen
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-border", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center gap-sm", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-border", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex items-center gap-sm", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                 PropertySelector,
                 {
                   properties,
                   onSelect: handleAddFilter,
                   open: addSelectorOpen,
                   onOpenChange: setAddSelectorOpen,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("button", { type: "button", className: cn(ghostBtn2, "text-foreground"), children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_icons41.Icon, { icon: import_icons41.faPlusOutline, size: "sm", className: "text-foreground" }),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("button", { type: "button", className: cn(ghostBtn2, "text-foreground"), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_icons41.Icon, { icon: import_icons41.faPlusOutline, size: "sm", className: "text-foreground" }),
                     "Add filter"
                   ] })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("button", { type: "button", onClick: handleAddGroup, className: cn(ghostBtn2, "text-foreground"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_icons41.Icon, { icon: import_icons41.faPlusOutline, size: "sm", className: "text-foreground" }),
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("button", { type: "button", onClick: handleAddGroup, className: cn(ghostBtn2, "text-foreground"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_icons41.Icon, { icon: import_icons41.faPlusOutline, size: "sm", className: "text-foreground" }),
                 "Add filters group"
               ] })
             ] }),
-            filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+            filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
               "button",
               {
                 type: "button",
@@ -9041,7 +9250,7 @@ var SummaryChip = ({
                 },
                 className: cn(ghostBtn2, "text-destructive"),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_icons41.Icon, { icon: import_icons41.faXmarkOutline, size: "sm", className: "text-destructive" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_icons41.Icon, { icon: import_icons41.faXmarkOutline, size: "sm", className: "text-destructive" }),
                   "Clear filters"
                 ]
               }
@@ -9054,19 +9263,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__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(PropertySelector, { properties, onSelect: (p) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(PropertySelector, { properties, onSelect: (p) => {
       onSelect(p);
       setOpen(false);
-    }, open, onOpenChange: setOpen, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+    }, open, onOpenChange: setOpen, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
       "button",
       {
         type: "button",
@@ -9077,8 +9286,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__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-sm font-regular leading-sm text-muted-foreground whitespace-nowrap", children: "Select property" }),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_icons41.Icon, { icon: import_icons41.faChevronDownOutline, size: "xs", className: "shrink-0 text-foreground" })
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-sm font-regular leading-sm text-muted-foreground whitespace-nowrap", children: "Select property" }),
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_icons41.Icon, { icon: import_icons41.faChevronDownOutline, size: "xs", className: "shrink-0 text-foreground" })
         ]
       }
     ) })
@@ -9086,11 +9295,11 @@ var DraftRow2 = ({ properties, onSelect, open: openProp, onOpenChange }) => {
 };
 
 // src/components/ui/filter/use-filter-bar-mode.ts
-var React55 = __toESM(require("react"));
+var React56 = __toESM(require("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;
@@ -9105,7 +9314,7 @@ function useFilterBarMode(ref, override, breakpoint = DEFAULT_BREAKPOINT) {
 }
 
 // src/components/ui/filter/filter-system.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var FilterSystem = ({
   properties,
   filterState,
@@ -9116,16 +9325,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)) {
@@ -9211,120 +9443,171 @@ var FilterSystem = ({
   };
   const advancedFilterCount = filterState.advancedFilters.length;
   const showAdvancedChip = hasAdvanced || advancedOpen;
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(FilterBar, { ref: containerRef, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(FilterBarLeft, { className: "flex-wrap flex-1 min-w-0", children: [
-      children,
-      sortFields && filterState.sort && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-        SortButton,
-        {
-          fields: sortFields,
-          activeField: filterState.sort.field,
-          direction: filterState.sort.direction,
-          onChange: handleSortChange,
-          iconOnly: isMinimal
-        }
-      ),
-      isMinimal ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_jsx_runtime62.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-        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__ */ (0, import_jsx_runtime62.jsx)(
-            FilterBarButton,
-            {
-              iconOnly: isIconOnly,
-              count: totalCount > 0 ? totalCount : void 0
-            }
-          )
-        }
-      ) }) : (
-        /* ── DEFAULT MODE ────────────────────────────────────── */
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-          showAdvancedChip && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-            AdvancedPopover,
-            {
-              filters: filterState.advancedFilters,
-              properties,
-              onFiltersChange: handleAdvancedFiltersChange,
-              open: advancedOpen,
-              onOpenChange: setAdvancedOpen,
-              collisionBoundary,
-              children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-                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__ */ (0, import_jsx_runtime62.jsx)(
-              InteractiveFilterChip,
+  const showFiltersRow = !isMinimal && totalCount > 0 && rowExpanded;
+  const filtersButton = totalCount === 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    PropertySelector,
+    {
+      properties,
+      onSelect: handleAddFilter,
+      open: propertySelectorOpen,
+      onOpenChange: setPropertySelectorOpen,
+      onAdvancedFilter: handleOpenAdvanced,
+      advancedFilterCount,
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(FilterBarButton, {})
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    FilterBarButton,
+    {
+      count: totalCount,
+      onClick: () => setRowExpanded(!rowExpanded),
+      "aria-expanded": rowExpanded
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("w-full flex flex-col", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(FilterBar, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(FilterBarLeft, { className: "flex-wrap flex-1 min-w-0", children: [
+            children,
+            sortFields && filterState.sort && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              SortButton,
               {
-                propertyDef: propDef,
-                condition: filter,
+                fields: sortFields,
+                activeField: filterState.sort.field,
+                direction: filterState.sort.direction,
+                onChange: handleSortChange,
+                iconOnly: isMinimal
+              }
+            ),
+            isMinimal ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              SummaryChip,
+              {
+                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__ */ (0, import_jsx_runtime62.jsx)(
-            PropertySelector,
-            {
-              properties,
-              onSelect: handleAddFilter,
-              open: propertySelectorOpen,
-              onOpenChange: setPropertySelectorOpen,
-              onAdvancedFilter: handleOpenAdvanced,
-              advancedFilterCount,
-              children: totalCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-                "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__ */ (0, import_jsx_runtime62.jsx)(import_icons42.Icon, { icon: import_icons42.faPlusOutline, size: "sm", className: "text-foreground" })
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(FilterBarButton, {})
-            }
-          )
-        ] })
-      ),
-      totalCount > 0 && !isIconOnly && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-        "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__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-sm font-medium leading-sm", children: "Clear" })
-        }
-      )
-    ] }),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(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__ */ (0, import_jsx_runtime63.jsx)(
+                  FilterBarButton,
+                  {
+                    iconOnly: isIconOnly,
+                    count: totalCount > 0 ? totalCount : void 0
+                  }
+                )
+              }
+            ) : (
+              /* ── FULL MODE — Filters button only on Row 1 ────────── */
+              filtersButton
+            ),
+            isMinimal && !isIconOnly && totalCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              "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__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-sm font-medium leading-sm", children: "Clear" })
+              }
+            )
+          ] }),
+          actions && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(FilterBarRight, { className: "shrink-0", children: actions })
+        ] }),
+        showFiltersRow && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+          "div",
+          {
+            className: "flex items-start justify-between w-full pt-sm pb-md",
+            role: "toolbar",
+            "aria-label": "Active filters",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-center gap-base flex-wrap flex-1 min-w-0", children: [
+                showAdvancedChip && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                  AdvancedPopover,
+                  {
+                    filters: filterState.advancedFilters,
+                    properties,
+                    onFiltersChange: handleAdvancedFiltersChange,
+                    open: advancedOpen,
+                    onOpenChange: setAdvancedOpen,
+                    collisionBoundary,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                      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__ */ (0, import_jsx_runtime63.jsx)(
+                    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__ */ (0, import_jsx_runtime63.jsx)(
+                  PropertySelector,
+                  {
+                    properties,
+                    onSelect: handleAddFilter,
+                    open: propertySelectorOpen,
+                    onOpenChange: setPropertySelectorOpen,
+                    onAdvancedFilter: handleOpenAdvanced,
+                    advancedFilterCount,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                      "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__ */ (0, import_jsx_runtime63.jsx)(import_icons42.Icon, { icon: import_icons42.faPlusOutline, size: "sm", className: "text-foreground" })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                  "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__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-sm font-medium leading-sm", children: "Clear" })
+                  }
+                )
+              ] }),
+              filterActions && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex items-center shrink-0 gap-sm", children: filterActions })
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 FilterSystem.displayName = "FilterSystem";
 function buildFilterTooltip(nodes, properties) {
@@ -9336,7 +9619,7 @@ function buildFilterTooltip(nodes, properties) {
       if ("children" in node && node.type === "group") {
         if (connector) {
           result.push(
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { style: { paddingLeft: depth * 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "opacity-50 text-xs", children: connector }) }, `${node.id}-conn`)
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { style: { paddingLeft: depth * 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "opacity-50 text-xs", children: connector }) }, `${node.id}-conn`)
           );
         }
         result.push(...renderNodes(node.children, depth + 1));
@@ -9346,23 +9629,23 @@ function buildFilterTooltip(nodes, properties) {
         if (!prop) continue;
         const val = formatFilterValue(f.value, prop.dynamicOptions, true);
         result.push(
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { style: { paddingLeft: depth * 8 }, children: [
-            connector && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "opacity-50 text-xs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { style: { paddingLeft: depth * 8 }, children: [
+            connector && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "opacity-50 text-xs", children: [
               connector,
               " "
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "font-medium", children: prop.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "font-medium", children: prop.label }),
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "opacity-60", children: f.operator }),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "opacity-60", children: f.operator }),
             " ",
-            val && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: val })
+            val && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: val })
           ] }, f.id)
         );
       }
     }
     return result;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "flex flex-col gap-2xs", children: renderNodes(nodes, 0) });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex flex-col gap-2xs", children: renderNodes(nodes, 0) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -9382,6 +9665,7 @@ function buildFilterTooltip(nodes, properties) {
   DEFAULT_OPERATOR_BY_TYPE,
   DataTable,
   DataTablePagination,
+  DataTableSettingsModal,
   DateCell,
   DatePicker,
   DatePickerCalendar,