@l3mpire/ui 2.12.0 → 2.14.0

package/dist/index.mjs

@@ -5016,7 +5016,6 @@ var OPERATORS_BY_TYPE = {
     "is on or before",
     "is on or after",
     "is between",
-    "is relative",
     "is empty",
     "is not empty"
   ],
@@ -5035,7 +5034,7 @@ var OPERATORS_BY_TYPE = {
 var DEFAULT_OPERATOR_BY_TYPE = {
   text: "contains",
   number: "=",
-  date: "is relative",
+  date: "is between",
   enum: "is",
   tags: "contains",
   boolean: "is true",
@@ -5063,7 +5062,6 @@ function getValueInputType(type, operator) {
     return operator === "is between" ? "NumberRange" : "NumberInput";
   if (type === "date") {
     if (operator === "is between") return "DateRange";
-    if (operator === "is relative") return "PresetTags";
     return "DatePicker";
   }
   if (type === "enum")
@@ -5074,6 +5072,130 @@ function getValueInputType(type, operator) {
     return ["is any of", "is none of"].includes(operator) ? "MultiRelationPicker" : "RelationPicker";
   return null;
 }
+function formatFilterValue(value) {
+  if (value == null) return void 0;
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (value instanceof Date) {
+    return value.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) return void 0;
+    if (value.length === 2 && typeof value[0] === "number") {
+      return `${value[0]} \u2013 ${value[1]}`;
+    }
+    if (value.length === 2 && value[0] instanceof Date) {
+      const fmt = (d) => d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+      return `${fmt(value[0])} \u2013 ${value[1] instanceof Date ? fmt(value[1]) : "\u2026"}`;
+    }
+    return String(value[0]);
+  }
+  return String(value);
+}
+function getBadgeCount(value) {
+  if (Array.isArray(value) && value.length > 1 && typeof value[0] === "string") {
+    return value.length;
+  }
+  return void 0;
+}
+function isFilterGroup(node) {
+  return node.type === "group";
+}
+function createEmptyGroup() {
+  return {
+    id: crypto.randomUUID(),
+    type: "group",
+    children: []
+  };
+}
+function duplicateNode(node) {
+  if (isFilterGroup(node)) {
+    return {
+      ...node,
+      id: crypto.randomUUID(),
+      children: node.children.map(duplicateNode)
+    };
+  }
+  return { ...node, id: crypto.randomUUID() };
+}
+function wrapInGroup(condition) {
+  return {
+    id: crypto.randomUUID(),
+    type: "group",
+    logicOperator: condition.logicOperator,
+    children: [{ ...condition, logicOperator: void 0 }]
+  };
+}
+function unwrapGroup(group) {
+  const first = group.children.find((c) => !isFilterGroup(c));
+  if (!first) return null;
+  return { ...first, logicOperator: group.logicOperator };
+}
+function updateNodeInTree(nodes, id, updater) {
+  return nodes.map((node) => {
+    if (node.id === id) return updater(node);
+    if (isFilterGroup(node)) {
+      const updated = updateNodeInTree(node.children, id, updater);
+      if (updated !== node.children) return { ...node, children: updated };
+    }
+    return node;
+  });
+}
+function removeNodeFromTree(nodes, id) {
+  const result = [];
+  for (const node of nodes) {
+    if (node.id === id) continue;
+    if (isFilterGroup(node)) {
+      const updated = removeNodeFromTree(node.children, id);
+      result.push(updated !== node.children ? { ...node, children: updated } : node);
+    } else {
+      result.push(node);
+    }
+  }
+  return result;
+}
+function insertAfterInTree(nodes, afterId, newNode) {
+  const result = [];
+  let inserted = false;
+  for (const node of nodes) {
+    result.push(node);
+    if (node.id === afterId) {
+      result.push(newNode);
+      inserted = true;
+    } else if (!inserted && isFilterGroup(node)) {
+      const updated = insertAfterInTree(node.children, afterId, newNode);
+      if (updated.length !== node.children.length) {
+        result[result.length - 1] = { ...node, children: updated };
+        inserted = true;
+      }
+    }
+  }
+  return result;
+}
+function replaceNodeInTree(nodes, id, replacement) {
+  return nodes.map((node) => {
+    if (node.id === id) return replacement;
+    if (isFilterGroup(node)) {
+      const updated = replaceNodeInTree(node.children, id, replacement);
+      if (updated !== node.children) return { ...node, children: updated };
+    }
+    return node;
+  });
+}
+function countConditions(nodes) {
+  let count = 0;
+  for (const node of nodes) {
+    if (isFilterGroup(node)) {
+      count += countConditions(node.children);
+    } else {
+      count++;
+    }
+  }
+  return count;
+}
 
 // src/components/ui/filter/filter-bar.tsx
 import * as React37 from "react";
@@ -5617,304 +5739,924 @@ var NumberRangeValueInput = ({
 NumberRangeValueInput.displayName = "NumberRangeValueInput";
 
 // src/components/ui/filter/value-inputs/date-value-input.tsx
-import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
-var RELATIVE_DATE_PRESETS = [
-  { group: "Past", options: ["Today", "Yesterday", "Last 7 days", "Last 14 days", "Last 30 days", "Last 90 days"] },
-  { group: "Current", options: ["This week", "This month", "This quarter", "This year"] },
-  { group: "Future", options: ["Tomorrow", "Next 7 days", "Next 14 days", "Next 30 days", "Next week", "Next month", "Next quarter"] }
-];
-var DatePickerValueInput = ({
-  value,
-  onChange,
-  onSubmit,
-  className
-}) => /* @__PURE__ */ jsxs39("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-  /* @__PURE__ */ jsx44(
-    "input",
-    {
-      type: "date",
-      value: value instanceof Date ? value.toISOString().split("T")[0] : value ?? "",
-      onChange: (e) => onChange(e.target.value ? new Date(e.target.value) : null),
-      autoFocus: true,
-      className: inputClasses
-    }
-  ),
-  /* @__PURE__ */ jsx44("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
-] });
-DatePickerValueInput.displayName = "DatePickerValueInput";
-function toDateString(d) {
-  if (!d) return "";
-  if (d instanceof Date) return d.toISOString().split("T")[0];
-  return String(d);
-}
-var DateRangeValueInput = ({
-  value,
-  onChange,
-  onSubmit,
-  className
-}) => {
-  const rangeVal = Array.isArray(value) ? value : [null, null];
-  return /* @__PURE__ */ jsxs39("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-    /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-base", children: [
-      /* @__PURE__ */ jsx44(
-        "input",
-        {
-          type: "date",
-          value: toDateString(rangeVal[0]),
-          onChange: (e) => {
-            const from = e.target.value ? new Date(e.target.value) : null;
-            onChange([from, rangeVal[1]]);
-          },
-          autoFocus: true,
-          className: halfInputClasses
-        }
-      ),
-      /* @__PURE__ */ jsx44("span", { className: "text-sm text-[var(--color-muted-foreground)]", children: "to" }),
-      /* @__PURE__ */ jsx44(
-        "input",
-        {
-          type: "date",
-          value: toDateString(rangeVal[1]),
-          onChange: (e) => {
-            const to = e.target.value ? new Date(e.target.value) : null;
-            onChange([rangeVal[0], to]);
-          },
-          className: halfInputClasses
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx44("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
-  ] });
-};
-DateRangeValueInput.displayName = "DateRangeValueInput";
-var PresetTagsValueInput = ({
-  value,
-  onChange,
-  onSubmit,
-  className
-}) => /* @__PURE__ */ jsx44("div", { className: cn("flex flex-col gap-base p-base max-w-[280px]", className), children: RELATIVE_DATE_PRESETS.map((group) => /* @__PURE__ */ jsxs39("div", { className: "flex flex-col gap-xs", children: [
-  /* @__PURE__ */ jsx44("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] uppercase px-xs", children: group.group }),
-  /* @__PURE__ */ jsx44("div", { className: "flex flex-wrap gap-xs", children: group.options.map((preset) => /* @__PURE__ */ jsx44(
-    "button",
-    {
-      type: "button",
-      onClick: () => {
-        onChange(preset);
-        onSubmit?.();
-      },
-      className: cn(
-        "px-base py-2xs rounded-base border cursor-pointer transition-colors text-sm font-regular leading-sm",
-        value === preset ? "border-[var(--color-ring)] bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "border-[var(--color-input)] bg-[var(--color-background)] text-[var(--color-foreground)] hover:bg-[var(--color-accent)]"
-      ),
-      children: preset
-    },
-    preset
-  )) })
-] }, group.group)) });
-PresetTagsValueInput.displayName = "PresetTagsValueInput";
-
-// src/components/ui/filter/value-inputs/select-value-input.tsx
-import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
-var SingleSelectValueInput = ({
-  value,
-  onChange,
-  onSubmit,
-  options,
-  className
-}) => /* @__PURE__ */ jsx45("div", { className: cn("flex flex-col gap-xs p-base max-h-[250px] overflow-y-auto", className), children: options.map((opt) => /* @__PURE__ */ jsx45(
-  "button",
-  {
-    type: "button",
-    onClick: () => {
-      onChange(opt);
-      onSubmit?.();
-    },
-    className: cn(
-      "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-      "hover:bg-[var(--color-dropdown-item-hover)]",
-      value === opt && "bg-[var(--color-dropdown-item-hover)]"
-    ),
-    children: /* @__PURE__ */ jsx45("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
-  },
-  opt
-)) });
-SingleSelectValueInput.displayName = "SingleSelectValueInput";
-var MultiSelectValueInput = ({
-  value,
-  onChange,
-  onSubmit,
-  options,
-  className
-}) => {
-  const selected = Array.isArray(value) ? value : [];
-  return /* @__PURE__ */ jsxs40("div", { className: cn("flex flex-col gap-xs p-base", className), children: [
-    /* @__PURE__ */ jsx45("div", { className: "flex flex-col max-h-[200px] overflow-y-auto", children: options.map((opt) => {
-      const isSelected = selected.includes(opt);
-      return /* @__PURE__ */ jsxs40(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            const next = isSelected ? selected.filter((s) => s !== opt) : [...selected, opt];
-            onChange(next);
-          },
-          className: cn(
-            "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-            "hover:bg-[var(--color-dropdown-item-hover)]"
-          ),
-          children: [
-            /* @__PURE__ */ jsx45(
-              "span",
-              {
-                className: cn(
-                  "flex items-center justify-center size-4 rounded-xs border transition-colors",
-                  isSelected ? "bg-[var(--color-primary)] border-[var(--color-primary)]" : "border-[var(--color-input)] bg-[var(--color-background)]"
-                ),
-                children: isSelected && /* @__PURE__ */ jsx45("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx45("path", { d: "M2 5L4 7L8 3", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-              }
-            ),
-            /* @__PURE__ */ jsx45("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
-          ]
-        },
-        opt
-      );
-    }) }),
-    /* @__PURE__ */ jsx45("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
-  ] });
-};
-MultiSelectValueInput.displayName = "MultiSelectValueInput";
-
-// src/components/ui/filter/value-inputs/relation-value-input.tsx
-import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
-var RelationValueInput = ({
-  value,
-  onChange,
-  onSubmit,
-  className
-}) => {
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") onSubmit?.();
-  };
-  return /* @__PURE__ */ jsxs41("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-    /* @__PURE__ */ jsx46(
-      "input",
-      {
-        type: "text",
-        value: value ?? "",
-        onChange: (e) => onChange(e.target.value),
-        onKeyDown: handleKeyDown,
-        placeholder: "Search...",
-        autoFocus: true,
-        className: inputClasses
-      }
-    ),
-    /* @__PURE__ */ jsx46("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
-  ] });
-};
-RelationValueInput.displayName = "RelationValueInput";
-
-// src/components/ui/filter/value-input.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
-var ValueInput = ({
-  dataType,
-  operator,
-  value,
-  onChange,
-  onSubmit,
-  options = [],
-  className
-}) => {
-  const inputType = getValueInputType(dataType, operator);
-  if (!inputType) return null;
-  switch (inputType) {
-    case "TextInput":
-      return /* @__PURE__ */ jsx47(TextValueInput, { value, onChange, onSubmit, className });
-    case "NumberInput":
-      return /* @__PURE__ */ jsx47(NumberValueInput, { value, onChange, onSubmit, className });
-    case "NumberRange":
-      return /* @__PURE__ */ jsx47(NumberRangeValueInput, { value, onChange, onSubmit, className });
-    case "PresetTags":
-      return /* @__PURE__ */ jsx47(PresetTagsValueInput, { value, onChange, onSubmit, className });
-    case "SingleSelect":
-      return /* @__PURE__ */ jsx47(SingleSelectValueInput, { value, onChange, onSubmit, options, className });
-    case "MultiSelect":
-      return /* @__PURE__ */ jsx47(MultiSelectValueInput, { value, onChange, onSubmit, options, className });
-    case "DatePicker":
-      return /* @__PURE__ */ jsx47(DatePickerValueInput, { value, onChange, onSubmit, className });
-    case "DateRange":
-      return /* @__PURE__ */ jsx47(DateRangeValueInput, { value, onChange, onSubmit, className });
-    case "RelationPicker":
-    case "MultiRelationPicker":
-      return /* @__PURE__ */ jsx47(RelationValueInput, { value, onChange, onSubmit, className });
-    default:
-      return null;
-  }
-};
-ValueInput.displayName = "ValueInput";
+import * as React42 from "react";
 
-// src/components/ui/filter/property-selector.tsx
+// src/components/ui/date-picker.tsx
 import * as React41 from "react";
 import * as PopoverPrimitive5 from "@radix-ui/react-popover";
 import {
   Icon as Icon26,
   faChevronLeftOutline as faChevronLeftOutline2,
   faChevronRightOutline as faChevronRightOutline2,
-  faMagnifyingGlassOutline,
-  faFilterOutline as faFilterOutline2
+  faArrowRightOutline,
+  faCalendarOutline
 } from "@l3mpire/icons";
-import { Fragment as Fragment4, jsx as jsx48, jsxs as jsxs42 } from "react/jsx-runtime";
-var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ jsxs42(Fragment4, { children: [
-  /* @__PURE__ */ jsx48("div", { className: "h-px bg-[var(--color-dropdown-border)] mx-xs" }),
-  /* @__PURE__ */ jsxs42(
-    "button",
-    {
-      type: "button",
-      onPointerDown: (e) => e.preventDefault(),
-      onClick,
-      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
-      children: [
-        /* @__PURE__ */ jsx48(
-          Icon26,
-          {
-            icon: faFilterOutline2,
-            size: "sm",
-            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
-          }
-        ),
-        /* @__PURE__ */ jsx48("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: "Advanced filter" }),
-        count > 0 && /* @__PURE__ */ jsxs42("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: [
-          count,
-          " ",
-          count === 1 ? "rule" : "rules"
-        ] })
-      ]
-    }
-  )
-] });
-var PropertySelector = ({
-  properties,
-  onSelect,
-  open,
-  onOpenChange,
-  children,
-  onAdvancedFilter,
-  advancedFilterCount = 0
-}) => {
-  const handleAdvancedClick = (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    onAdvancedFilter?.();
-  };
-  const showAdvancedFooter = !!onAdvancedFilter;
-  const [activeGroup, setActiveGroup] = React41.useState(null);
-  const [search, setSearch] = React41.useState("");
-  React41.useEffect(() => {
+import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getWeekdayIndex(date) {
+  return (date.getDay() + 6) % 7;
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isInRange(date, from, to) {
+  const t = date.getTime();
+  return t >= from.getTime() && t <= to.getTime();
+}
+function startOfDay(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+var WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DatePickerContext = React41.createContext(
+  null
+);
+function useDatePickerContext() {
+  const ctx = React41.useContext(DatePickerContext);
+  if (!ctx)
+    throw new Error("DatePicker compound components must be used within <DatePicker>");
+  return ctx;
+}
+var DatePicker = React41.forwardRef(
+  ({
+    className,
+    mode = "single",
+    value,
+    onValueChange,
+    defaultMonth,
+    defaultYear,
+    children,
+    ...props
+  }, ref) => {
+    const today = React41.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+    const initialDate = React41.useMemo(() => {
+      if (value) {
+        if (value instanceof Date) return value;
+        return value.from;
+      }
+      return today;
+    }, []);
+    const [month, setMonth] = React41.useState(
+      defaultMonth ?? initialDate.getMonth()
+    );
+    const [year, setYear] = React41.useState(
+      defaultYear ?? initialDate.getFullYear()
+    );
+    const [hoveredDate, setHoveredDate] = React41.useState();
+    const goToPrevMonth = React41.useCallback(() => {
+      setMonth((m) => {
+        if (m === 0) {
+          setYear((y) => y - 1);
+          return 11;
+        }
+        return m - 1;
+      });
+    }, []);
+    const goToNextMonth = React41.useCallback(() => {
+      setMonth((m) => {
+        if (m === 11) {
+          setYear((y) => y + 1);
+          return 0;
+        }
+        return m + 1;
+      });
+    }, []);
+    const onSelect = React41.useCallback(
+      (date) => {
+        if (mode === "single") {
+          onValueChange?.(date);
+          return;
+        }
+        if (!value || value instanceof Date) {
+          onValueChange?.({ from: date });
+          return;
+        }
+        const range = value;
+        if (range.to || date.getTime() < range.from.getTime()) {
+          onValueChange?.({ from: date });
+        } else {
+          onValueChange?.({ from: range.from, to: date });
+        }
+      },
+      [mode, value, onValueChange]
+    );
+    const ctxValue = React41.useMemo(
+      () => ({
+        mode,
+        selected: value,
+        onSelect,
+        month,
+        year,
+        setMonth,
+        setYear,
+        goToPrevMonth,
+        goToNextMonth,
+        today,
+        hoveredDate,
+        setHoveredDate
+      }),
+      [
+        mode,
+        value,
+        onSelect,
+        month,
+        year,
+        goToPrevMonth,
+        goToNextMonth,
+        today,
+        hoveredDate
+      ]
+    );
+    return /* @__PURE__ */ jsx44(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx44(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col overflow-clip",
+          "bg-datepicker-bg border border-datepicker-border rounded-md shadow-lg",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+DatePicker.displayName = "DatePicker";
+function defaultFormatDate(date) {
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+var DatePickerSelects = React41.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__ */ jsx44(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col items-start pt-lg px-lg", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-base w-full", children: [
+        /* @__PURE__ */ jsxs39("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__ */ jsx44("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
+          /* @__PURE__ */ jsx44(Icon26, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+        ] }),
+        /* @__PURE__ */ jsx44(
+          Icon26,
+          {
+            icon: faArrowRightOutline,
+            size: "sm",
+            className: "shrink-0 text-datepicker-header-weekday"
+          }
+        ),
+        /* @__PURE__ */ jsxs39("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__ */ jsx44("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
+          /* @__PURE__ */ jsx44(Icon26, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+        ] })
+      ] })
+    }
+  );
+});
+DatePickerSelects.displayName = "DatePickerSelects";
+var DatePickerDay = ({ date, isOutside }) => {
+  const { mode, selected, onSelect, today, hoveredDate, setHoveredDate } = useDatePickerContext();
+  const isToday = isSameDay(date, today);
+  const isSelected = selected instanceof Date ? isSameDay(date, selected) : selected?.from ? isSameDay(date, selected.from) || (selected.to ? isSameDay(date, selected.to) : false) : false;
+  const isRangeStart = mode === "range" && selected && !(selected instanceof Date) && selected.from && isSameDay(date, selected.from);
+  const isRangeEnd = mode === "range" && selected && !(selected instanceof Date) && selected.to && isSameDay(date, selected.to);
+  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__ */ jsxs39(
+    "button",
+    {
+      type: "button",
+      onClick: () => !isOutside && onSelect(date),
+      onMouseEnter: () => mode === "range" && setHoveredDate(date),
+      onMouseLeave: () => mode === "range" && setHoveredDate(void 0),
+      disabled: isOutside,
+      className: cn(
+        "relative flex flex-col items-center justify-center w-9 rounded-full p-2 cursor-pointer transition-colors",
+        "text-sm font-semibold leading-sm text-center",
+        // Default
+        !isOutside && !isSelected && !isInRangeOrPreview && "text-datepicker-day-text-default hover:bg-datepicker-day-bg-hover",
+        // Outside month (disabled)
+        isOutside && "text-datepicker-day-text-disabled cursor-default",
+        // Selected
+        isSelected && "bg-datepicker-day-bg-selected text-datepicker-day-text-selected",
+        // In range
+        isInRangeOrPreview && "bg-datepicker-day-bg-range text-datepicker-day-text-range",
+        // Range start/end get full rounded; in-range items could be less rounded
+        (isRangeStart || isRangeEnd) && "rounded-full"
+      ),
+      children: [
+        date.getDate(),
+        isToday && !isOutside && /* @__PURE__ */ jsx44("span", { className: "absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1.5 rounded-full bg-datepicker-day-today" })
+      ]
+    }
+  );
+};
+var DatePickerCalendar = React41.forwardRef(({ className, header, ...props }, ref) => {
+  const { month, year, goToPrevMonth, goToNextMonth } = useDatePickerContext();
+  const weeks = React41.useMemo(() => {
+    const firstDay = new Date(year, month, 1);
+    const startOffset = getWeekdayIndex(firstDay);
+    const daysInMonth = getDaysInMonth(year, month);
+    const daysInPrevMonth = getDaysInMonth(
+      month === 0 ? year - 1 : year,
+      month === 0 ? 11 : month - 1
+    );
+    const days = [];
+    for (let i = startOffset - 1; i >= 0; i--) {
+      const d = daysInPrevMonth - i;
+      days.push({
+        date: new Date(
+          month === 0 ? year - 1 : year,
+          month === 0 ? 11 : month - 1,
+          d
+        ),
+        isOutside: true
+      });
+    }
+    for (let d = 1; d <= daysInMonth; d++) {
+      days.push({ date: new Date(year, month, d), isOutside: false });
+    }
+    const remaining = 42 - days.length;
+    for (let d = 1; d <= remaining; d++) {
+      days.push({
+        date: new Date(
+          month === 11 ? year + 1 : year,
+          month === 11 ? 0 : month + 1,
+          d
+        ),
+        isOutside: true
+      });
+    }
+    const result = [];
+    for (let i = 0; i < days.length; i += 7) {
+      result.push(days.slice(i, i + 7));
+    }
+    return result;
+  }, [month, year]);
+  return /* @__PURE__ */ jsxs39(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col", className),
+      ...props,
+      children: [
+        header,
+        /* @__PURE__ */ jsxs39("div", { className: "flex flex-col gap-lg p-lg", children: [
+          /* @__PURE__ */ jsxs39("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs39("span", { className: "text-base font-semibold leading-base text-datepicker-header-text", children: [
+              MONTH_NAMES[month],
+              " ",
+              year
+            ] }),
+            /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-xs", children: [
+              /* @__PURE__ */ jsx44(
+                "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__ */ jsx44(Icon26, { icon: faChevronLeftOutline2, size: "xs", className: "text-datepicker-header-nav" })
+                }
+              ),
+              /* @__PURE__ */ jsx44(
+                "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__ */ jsx44(Icon26, { icon: faChevronRightOutline2, size: "xs", className: "text-datepicker-header-nav" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs39("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx44("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx44(
+              "span",
+              {
+                className: "w-9 text-center text-xs font-regular leading-xs text-datepicker-header-weekday",
+                children: day
+              },
+              day
+            )) }),
+            /* @__PURE__ */ jsx44("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ jsx44("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ jsx44(
+              DatePickerDay,
+              {
+                date: day.date,
+                isOutside: day.isOutside
+              },
+              di
+            )) }, wi)) })
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+DatePickerCalendar.displayName = "DatePickerCalendar";
+var DatePickerSuggestions = React41.forwardRef(
+  ({ className, suggestions, formatDate = defaultFormatDate, ...props }, ref) => {
+    const { onSelect, mode } = useDatePickerContext();
+    const onValueChange = React41.useContext(DatePickerContext) ? void 0 : void 0;
+    const ctx = useDatePickerContext();
+    const handleClick = (suggestion) => {
+      const val = suggestion.getValue();
+      if (val instanceof Date) {
+        ctx.onSelect(val);
+      } else {
+        ctx.onSelect(val.from);
+        if (val.to) {
+          setTimeout(() => ctx.onSelect(val.to), 0);
+        }
+      }
+    };
+    const formatSuggestionDate = (suggestion) => {
+      const val = suggestion.getValue();
+      if (val instanceof Date) {
+        return formatDate(val);
+      }
+      const from = formatDate(val.from);
+      const to = val.to ? formatDate(val.to) : "";
+      return to ? `${from} - ${to}` : from;
+    };
+    return /* @__PURE__ */ jsxs39(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col border-l border-datepicker-border self-stretch shrink-0",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx44("div", { className: "pt-lg px-base", children: /* @__PURE__ */ jsx44("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ jsx44("span", { className: "flex-1 text-xs font-semibold leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
+          /* @__PURE__ */ jsx44("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ jsxs39(
+            "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__ */ jsx44("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
+                /* @__PURE__ */ jsx44("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
+              ]
+            },
+            i
+          )) })
+        ]
+      }
+    );
+  }
+);
+DatePickerSuggestions.displayName = "DatePickerSuggestions";
+var DatePickerFooter = React41.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx44(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-between p-lg",
+        "border-t border-datepicker-footer-border",
+        "bg-datepicker-bg",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+);
+DatePickerFooter.displayName = "DatePickerFooter";
+var DatePickerPanel = React41.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx44(
+    "div",
+    {
+      ref,
+      className: cn("flex items-start", className),
+      ...props,
+      children
+    }
+  )
+);
+DatePickerPanel.displayName = "DatePickerPanel";
+var DatePickerRoot = PopoverPrimitive5.Root;
+var DatePickerTrigger = PopoverPrimitive5.Trigger;
+var DatePickerPopover = React41.forwardRef(({ className, sideOffset = 4, align = "start", children, ...props }, ref) => /* @__PURE__ */ jsx44(PopoverPrimitive5.Portal, { children: /* @__PURE__ */ jsx44(
+  PopoverPrimitive5.Content,
+  {
+    ref,
+    sideOffset,
+    align,
+    className: cn(
+      "z-50",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props,
+    children
+  }
+) }));
+DatePickerPopover.displayName = "DatePickerPopover";
+function getDefaultSuggestions(referenceDate) {
+  const now = referenceDate ?? /* @__PURE__ */ new Date();
+  const today = startOfDay(now);
+  const dayOfWeek = getWeekdayIndex(today);
+  const startOfThisWeek = new Date(today);
+  startOfThisWeek.setDate(today.getDate() - dayOfWeek);
+  const endOfThisWeek = new Date(startOfThisWeek);
+  endOfThisWeek.setDate(startOfThisWeek.getDate() + 6);
+  const startOfThisMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+  const endOfThisMonth = new Date(
+    today.getFullYear(),
+    today.getMonth() + 1,
+    0
+  );
+  const startOfThisYear = new Date(today.getFullYear(), 0, 1);
+  const endOfThisYear = new Date(today.getFullYear(), 11, 31);
+  const startOfLastWeek = new Date(startOfThisWeek);
+  startOfLastWeek.setDate(startOfThisWeek.getDate() - 7);
+  const endOfLastWeek = new Date(startOfThisWeek);
+  endOfLastWeek.setDate(startOfThisWeek.getDate() - 1);
+  const startOfLastMonth = new Date(
+    today.getFullYear(),
+    today.getMonth() - 1,
+    1
+  );
+  const endOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
+  const startOfLastYear = new Date(today.getFullYear() - 1, 0, 1);
+  const endOfLastYear = new Date(today.getFullYear() - 1, 11, 31);
+  return [
+    { label: "Today", getValue: () => today },
+    {
+      label: "This week",
+      getValue: () => ({ from: startOfThisWeek, to: endOfThisWeek })
+    },
+    {
+      label: "This month",
+      getValue: () => ({ from: startOfThisMonth, to: endOfThisMonth })
+    },
+    {
+      label: "This year",
+      getValue: () => ({ from: startOfThisYear, to: endOfThisYear })
+    },
+    {
+      label: "Last week",
+      getValue: () => ({ from: startOfLastWeek, to: endOfLastWeek })
+    },
+    {
+      label: "Last month",
+      getValue: () => ({ from: startOfLastMonth, to: endOfLastMonth })
+    },
+    {
+      label: "Last year",
+      getValue: () => ({ from: startOfLastYear, to: endOfLastYear })
+    }
+  ];
+}
+
+// src/components/ui/filter/value-inputs/date-value-input.tsx
+import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+var RELATIVE_DATE_PRESETS = [
+  { group: "Past", options: ["Today", "Yesterday", "Last 7 days", "Last 14 days", "Last 30 days", "Last 90 days"] },
+  { group: "Current", options: ["This week", "This month", "This quarter", "This year"] },
+  { group: "Future", options: ["Tomorrow", "Next 7 days", "Next 14 days", "Next 30 days", "Next week", "Next month", "Next quarter"] }
+];
+var DateCalendarValueInput = ({
+  operator,
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => {
+  const isRange = operator === "is between";
+  const pickerValue = React42.useMemo(() => {
+    if (isRange) {
+      if (Array.isArray(value) && value.length === 2) {
+        const [from, to] = value;
+        return { from, to };
+      }
+      return void 0;
+    }
+    return value instanceof Date ? value : void 0;
+  }, [value, isRange]);
+  const handleValueChange = (v) => {
+    if (v instanceof Date) {
+      onChange(v);
+      if (!isRange) onSubmit?.();
+    } else {
+      const range = v;
+      if (range.from && range.to) {
+        onChange([range.from, range.to]);
+      } else if (range.from) {
+        onChange([range.from, range.from]);
+      }
+    }
+  };
+  const suggestions = React42.useMemo(() => getDefaultSuggestions(), []);
+  return /* @__PURE__ */ jsx45("div", { className: cn("flex flex-col", className), children: /* @__PURE__ */ jsxs40(
+    DatePicker,
+    {
+      mode: isRange ? "range" : "single",
+      value: pickerValue,
+      onValueChange: handleValueChange,
+      children: [
+        isRange && /* @__PURE__ */ jsx45(DatePickerSelects, {}),
+        isRange ? /* @__PURE__ */ jsxs40(DatePickerPanel, { children: [
+          /* @__PURE__ */ jsx45(DatePickerCalendar, {}),
+          /* @__PURE__ */ jsx45(DatePickerSuggestions, { suggestions })
+        ] }) : /* @__PURE__ */ jsx45(DatePickerCalendar, {}),
+        isRange && /* @__PURE__ */ jsxs40(DatePickerFooter, { children: [
+          /* @__PURE__ */ jsx45("div", {}),
+          /* @__PURE__ */ jsx45("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+        ] })
+      ]
+    }
+  ) });
+};
+DateCalendarValueInput.displayName = "DateCalendarValueInput";
+var PresetTagsValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => /* @__PURE__ */ jsx45("div", { className: cn("flex flex-col gap-base p-base max-w-[280px]", className), children: RELATIVE_DATE_PRESETS.map((group) => /* @__PURE__ */ jsxs40("div", { className: "flex flex-col gap-xs", children: [
+  /* @__PURE__ */ jsx45("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] uppercase px-xs", children: group.group }),
+  /* @__PURE__ */ jsx45("div", { className: "flex flex-wrap gap-xs", children: group.options.map((preset) => /* @__PURE__ */ jsx45(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        onChange(preset);
+        onSubmit?.();
+      },
+      className: cn(
+        "px-base py-2xs rounded-base border cursor-pointer transition-colors text-sm font-regular leading-sm",
+        value === preset ? "border-[var(--color-ring)] bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "border-[var(--color-input)] bg-[var(--color-background)] text-[var(--color-foreground)] hover:bg-[var(--color-accent)]"
+      ),
+      children: preset
+    },
+    preset
+  )) })
+] }, group.group)) });
+PresetTagsValueInput.displayName = "PresetTagsValueInput";
+
+// src/components/ui/filter/value-inputs/select-value-input.tsx
+import { Icon as Icon27 } from "@l3mpire/icons";
+import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+var DynamicOptionRow = ({
+  option,
+  selected,
+  multi,
+  onClick
+}) => /* @__PURE__ */ jsxs41(
+  "button",
+  {
+    type: "button",
+    onClick,
+    className: cn(
+      "flex items-start gap-base p-base rounded-base cursor-pointer transition-colors text-left",
+      "hover:bg-[var(--color-dropdown-item-hover)]",
+      selected && "bg-[var(--color-dropdown-item-hover)]"
+    ),
+    children: [
+      multi && /* @__PURE__ */ jsx46(
+        "span",
+        {
+          className: cn(
+            "mt-[2px] flex items-center justify-center size-4 rounded-xs border transition-colors shrink-0",
+            selected ? "bg-[var(--color-primary)] border-[var(--color-primary)]" : "border-[var(--color-input)] bg-[var(--color-background)]"
+          ),
+          children: selected && /* @__PURE__ */ jsx46("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx46(
+            "path",
+            {
+              d: "M2 5L4 7L8 3",
+              stroke: "white",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) })
+        }
+      ),
+      option.icon && /* @__PURE__ */ jsx46(
+        Icon27,
+        {
+          icon: option.icon,
+          size: "sm",
+          className: "shrink-0 mt-[1px] text-[var(--color-interactive-text-primary-dark-default,var(--color-primary))]"
+        }
+      ),
+      /* @__PURE__ */ jsxs41("span", { className: "flex-1 flex flex-col gap-2xs min-w-0", children: [
+        /* @__PURE__ */ jsx46("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] truncate", children: option.label }),
+        option.description && /* @__PURE__ */ jsx46("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: option.description })
+      ] })
+    ]
+  }
+);
+var DynamicOptionsDivider = () => /* @__PURE__ */ jsx46("div", { className: "h-px bg-[var(--color-dropdown-border)] mx-xs my-xs" });
+var SingleSelectValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  options,
+  dynamicOptions,
+  className
+}) => {
+  const pick = (v) => {
+    onChange(v);
+    onSubmit?.();
+  };
+  return /* @__PURE__ */ jsxs41(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-xs p-base max-h-[280px] overflow-y-auto",
+        className
+      ),
+      children: [
+        dynamicOptions?.map((opt) => /* @__PURE__ */ jsx46(
+          DynamicOptionRow,
+          {
+            option: opt,
+            selected: value === opt.value,
+            multi: false,
+            onClick: () => pick(opt.value)
+          },
+          opt.value
+        )),
+        dynamicOptions && dynamicOptions.length > 0 && options.length > 0 && /* @__PURE__ */ jsx46(DynamicOptionsDivider, {}),
+        options.map((opt) => /* @__PURE__ */ jsx46(
+          "button",
+          {
+            type: "button",
+            onClick: () => pick(opt),
+            className: cn(
+              "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
+              "hover:bg-[var(--color-dropdown-item-hover)]",
+              value === opt && "bg-[var(--color-dropdown-item-hover)]"
+            ),
+            children: /* @__PURE__ */ jsx46("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+          },
+          opt
+        ))
+      ]
+    }
+  );
+};
+SingleSelectValueInput.displayName = "SingleSelectValueInput";
+var MultiSelectValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  options,
+  dynamicOptions,
+  className
+}) => {
+  const selected = Array.isArray(value) ? value : [];
+  const toggle = (v) => {
+    const next = selected.includes(v) ? selected.filter((s) => s !== v) : [...selected, v];
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsxs41("div", { className: cn("flex flex-col gap-xs p-base", className), children: [
+    /* @__PURE__ */ jsxs41("div", { className: "flex flex-col max-h-[240px] overflow-y-auto", children: [
+      dynamicOptions?.map((opt) => /* @__PURE__ */ jsx46(
+        DynamicOptionRow,
+        {
+          option: opt,
+          selected: selected.includes(opt.value),
+          multi: true,
+          onClick: () => toggle(opt.value)
+        },
+        opt.value
+      )),
+      dynamicOptions && dynamicOptions.length > 0 && options.length > 0 && /* @__PURE__ */ jsx46(DynamicOptionsDivider, {}),
+      options.map((opt) => {
+        const isSelected = selected.includes(opt);
+        return /* @__PURE__ */ jsxs41(
+          "button",
+          {
+            type: "button",
+            onClick: () => toggle(opt),
+            className: cn(
+              "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
+              "hover:bg-[var(--color-dropdown-item-hover)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx46(
+                "span",
+                {
+                  className: cn(
+                    "flex items-center justify-center size-4 rounded-xs border transition-colors",
+                    isSelected ? "bg-[var(--color-primary)] border-[var(--color-primary)]" : "border-[var(--color-input)] bg-[var(--color-background)]"
+                  ),
+                  children: isSelected && /* @__PURE__ */ jsx46("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx46(
+                    "path",
+                    {
+                      d: "M2 5L4 7L8 3",
+                      stroke: "white",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  ) })
+                }
+              ),
+              /* @__PURE__ */ jsx46("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+            ]
+          },
+          opt
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsx46("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+MultiSelectValueInput.displayName = "MultiSelectValueInput";
+
+// src/components/ui/filter/value-inputs/relation-value-input.tsx
+import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
+var RelationValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") onSubmit?.();
+  };
+  return /* @__PURE__ */ jsxs42("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+    /* @__PURE__ */ jsx47(
+      "input",
+      {
+        type: "text",
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder: "Search...",
+        autoFocus: true,
+        className: inputClasses
+      }
+    ),
+    /* @__PURE__ */ jsx47("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+RelationValueInput.displayName = "RelationValueInput";
+
+// src/components/ui/filter/value-input.tsx
+import { jsx as jsx48 } from "react/jsx-runtime";
+var ValueInput = ({
+  dataType,
+  operator,
+  value,
+  onChange,
+  onSubmit,
+  options = [],
+  dynamicOptions,
+  className
+}) => {
+  const inputType = getValueInputType(dataType, operator);
+  if (!inputType) return null;
+  switch (inputType) {
+    case "TextInput":
+      return /* @__PURE__ */ jsx48(TextValueInput, { value, onChange, onSubmit, className });
+    case "NumberInput":
+      return /* @__PURE__ */ jsx48(NumberValueInput, { value, onChange, onSubmit, className });
+    case "NumberRange":
+      return /* @__PURE__ */ jsx48(NumberRangeValueInput, { value, onChange, onSubmit, className });
+    case "SingleSelect":
+      return /* @__PURE__ */ jsx48(
+        SingleSelectValueInput,
+        {
+          value,
+          onChange,
+          onSubmit,
+          options,
+          dynamicOptions,
+          className
+        }
+      );
+    case "MultiSelect":
+      return /* @__PURE__ */ jsx48(
+        MultiSelectValueInput,
+        {
+          value,
+          onChange,
+          onSubmit,
+          options,
+          dynamicOptions,
+          className
+        }
+      );
+    case "DatePicker":
+    case "DateRange":
+      return /* @__PURE__ */ jsx48(
+        DateCalendarValueInput,
+        {
+          operator,
+          value,
+          onChange,
+          onSubmit,
+          className
+        }
+      );
+    case "RelationPicker":
+    case "MultiRelationPicker":
+      return /* @__PURE__ */ jsx48(RelationValueInput, { value, onChange, onSubmit, className });
+    default:
+      return null;
+  }
+};
+ValueInput.displayName = "ValueInput";
+
+// src/components/ui/filter/property-selector.tsx
+import * as React43 from "react";
+import * as PopoverPrimitive6 from "@radix-ui/react-popover";
+import {
+  Icon as Icon28,
+  faChevronLeftOutline as faChevronLeftOutline3,
+  faChevronRightOutline as faChevronRightOutline3,
+  faMagnifyingGlassOutline,
+  faFilterOutline as faFilterOutline2
+} from "@l3mpire/icons";
+import { Fragment as Fragment4, jsx as jsx49, jsxs as jsxs43 } from "react/jsx-runtime";
+var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ jsxs43(Fragment4, { children: [
+  /* @__PURE__ */ jsx49("div", { className: "h-px bg-[var(--color-dropdown-border)] mx-xs" }),
+  /* @__PURE__ */ jsxs43(
+    "button",
+    {
+      type: "button",
+      onPointerDown: (e) => e.preventDefault(),
+      onClick,
+      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+      children: [
+        /* @__PURE__ */ jsx49(
+          Icon28,
+          {
+            icon: faFilterOutline2,
+            size: "sm",
+            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+          }
+        ),
+        /* @__PURE__ */ jsx49("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: "Advanced filter" }),
+        count > 0 && /* @__PURE__ */ jsxs43("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: [
+          count,
+          " ",
+          count === 1 ? "rule" : "rules"
+        ] })
+      ]
+    }
+  )
+] });
+var PropertySelector = ({
+  properties,
+  onSelect,
+  open,
+  onOpenChange,
+  children,
+  onAdvancedFilter,
+  advancedFilterCount = 0
+}) => {
+  const handleAdvancedClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onAdvancedFilter?.();
+  };
+  const showAdvancedFooter = !!onAdvancedFilter;
+  const [activeGroup, setActiveGroup] = React43.useState(null);
+  const [search, setSearch] = React43.useState("");
+  React43.useEffect(() => {
     if (!open) {
       setActiveGroup(null);
       setSearch("");
     }
   }, [open]);
-  const groups = React41.useMemo(() => {
+  const groups = React43.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const prop of properties) {
       const existing = map.get(prop.group);
@@ -5931,12 +6673,12 @@ var PropertySelector = ({
     }
     return Array.from(map.values());
   }, [properties]);
-  const globalSearchResults = React41.useMemo(() => {
+  const globalSearchResults = React43.useMemo(() => {
     if (!search || activeGroup) return [];
     const lower = search.toLowerCase();
     return properties.filter((p) => p.label.toLowerCase().includes(lower));
   }, [properties, search, activeGroup]);
-  const filteredGroups = React41.useMemo(() => {
+  const filteredGroups = React43.useMemo(() => {
     if (!search || activeGroup) return groups;
     const lower = search.toLowerCase();
     return groups.filter(
@@ -5945,7 +6687,7 @@ var PropertySelector = ({
       )
     );
   }, [groups, properties, search, activeGroup]);
-  const filteredProperties = React41.useMemo(() => {
+  const filteredProperties = React43.useMemo(() => {
     if (!activeGroup) return [];
     const groupProps = properties.filter((p) => p.group === activeGroup);
     if (!search) return groupProps;
@@ -5954,10 +6696,10 @@ var PropertySelector = ({
   }, [properties, activeGroup, search]);
   const activeGroupInfo = groups.find((g) => g.group === activeGroup);
   const showGlobalResults = search.length > 0 && !activeGroup && globalSearchResults.length > 0;
-  return /* @__PURE__ */ jsxs42(PopoverPrimitive5.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx48(PopoverPrimitive5.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx48(PopoverPrimitive5.Portal, { children: /* @__PURE__ */ jsxs42(
-      PopoverPrimitive5.Content,
+  return /* @__PURE__ */ jsxs43(PopoverPrimitive6.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx49(PopoverPrimitive6.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx49(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ jsxs43(
+      PopoverPrimitive6.Content,
       {
         sideOffset: 4,
         align: "start",
@@ -5973,17 +6715,17 @@ var PropertySelector = ({
         children: [
           activeGroup === null ? (
             /* ── Level 1: Search + Categories ───────────────────────── */
-            /* @__PURE__ */ jsxs42("div", { className: "flex flex-col gap-xs", children: [
-              /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
-                /* @__PURE__ */ jsx48(
-                  Icon26,
+            /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-xs", children: [
+              /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
+                /* @__PURE__ */ jsx49(
+                  Icon28,
                   {
                     icon: faMagnifyingGlassOutline,
                     size: "sm",
                     className: "shrink-0 text-[var(--color-muted-foreground)]"
                   }
                 ),
-                /* @__PURE__ */ jsx48(
+                /* @__PURE__ */ jsx49(
                   "input",
                   {
                     type: "text",
@@ -5997,7 +6739,7 @@ var PropertySelector = ({
               ] }),
               showGlobalResults ? (
                 /* ── Global search results (flat property list) ─────── */
-                /* @__PURE__ */ jsx48("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: globalSearchResults.map((prop) => /* @__PURE__ */ jsxs42(
+                /* @__PURE__ */ jsx49("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: globalSearchResults.map((prop) => /* @__PURE__ */ jsxs43(
                   "button",
                   {
                     type: "button",
@@ -6007,24 +6749,24 @@ var PropertySelector = ({
                     },
                     className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
                     children: [
-                      /* @__PURE__ */ jsx48(
-                        Icon26,
+                      /* @__PURE__ */ jsx49(
+                        Icon28,
                         {
                           icon: prop.icon,
                           size: "sm",
                           className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                         }
                       ),
-                      /* @__PURE__ */ jsx48("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: prop.label }),
-                      /* @__PURE__ */ jsx48("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: prop.groupLabel })
+                      /* @__PURE__ */ jsx49("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: prop.label }),
+                      /* @__PURE__ */ jsx49("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: prop.groupLabel })
                     ]
                   },
                   prop.id
                 )) })
               ) : (
                 /* ── Group list ─────────────────────────────────────── */
-                /* @__PURE__ */ jsxs42("div", { className: "flex flex-col", children: [
-                  filteredGroups.map((g) => /* @__PURE__ */ jsxs42(
+                /* @__PURE__ */ jsxs43("div", { className: "flex flex-col", children: [
+                  filteredGroups.map((g) => /* @__PURE__ */ jsxs43(
                     "button",
                     {
                       type: "button",
@@ -6034,20 +6776,20 @@ var PropertySelector = ({
                       },
                       className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
                       children: [
-                        /* @__PURE__ */ jsx48(
-                          Icon26,
+                        /* @__PURE__ */ jsx49(
+                          Icon28,
                           {
                             icon: g.groupIcon,
                             size: "sm",
                             className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                           }
                         ),
-                        /* @__PURE__ */ jsx48("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: g.groupLabel }),
-                        /* @__PURE__ */ jsx48("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: g.count }),
-                        /* @__PURE__ */ jsx48(
-                          Icon26,
+                        /* @__PURE__ */ jsx49("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: g.groupLabel }),
+                        /* @__PURE__ */ jsx49("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: g.count }),
+                        /* @__PURE__ */ jsx49(
+                          Icon28,
                           {
-                            icon: faChevronRightOutline2,
+                            icon: faChevronRightOutline3,
                             size: "xs",
                             className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                           }
@@ -6056,14 +6798,14 @@ var PropertySelector = ({
                     },
                     g.group
                   )),
-                  filteredGroups.length === 0 && /* @__PURE__ */ jsx48("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
+                  filteredGroups.length === 0 && /* @__PURE__ */ jsx49("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
                 ] })
               )
             ] })
           ) : (
             /* ── Level 2: Properties ─────────────────────────────────── */
-            /* @__PURE__ */ jsxs42("div", { className: "flex flex-col gap-xs", children: [
-              /* @__PURE__ */ jsxs42(
+            /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-xs", children: [
+              /* @__PURE__ */ jsxs43(
                 "button",
                 {
                   type: "button",
@@ -6073,28 +6815,28 @@ var PropertySelector = ({
                   },
                   className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
                   children: [
-                    /* @__PURE__ */ jsx48(
-                      Icon26,
+                    /* @__PURE__ */ jsx49(
+                      Icon28,
                       {
-                        icon: faChevronLeftOutline2,
+                        icon: faChevronLeftOutline3,
                         size: "sm",
                         className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                       }
                     ),
-                    /* @__PURE__ */ jsx48("span", { className: "flex-1 text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] text-left truncate", children: activeGroupInfo?.groupLabel })
+                    /* @__PURE__ */ jsx49("span", { className: "flex-1 text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] text-left truncate", children: activeGroupInfo?.groupLabel })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
-                /* @__PURE__ */ jsx48(
-                  Icon26,
+              /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
+                /* @__PURE__ */ jsx49(
+                  Icon28,
                   {
                     icon: faMagnifyingGlassOutline,
                     size: "sm",
                     className: "shrink-0 text-[var(--color-muted-foreground)]"
                   }
                 ),
-                /* @__PURE__ */ jsx48(
+                /* @__PURE__ */ jsx49(
                   "input",
                   {
                     type: "text",
@@ -6106,8 +6848,8 @@ var PropertySelector = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs42("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: [
-                filteredProperties.map((prop) => /* @__PURE__ */ jsxs42(
+              /* @__PURE__ */ jsxs43("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: [
+                filteredProperties.map((prop) => /* @__PURE__ */ jsxs43(
                   "button",
                   {
                     type: "button",
@@ -6117,24 +6859,24 @@ var PropertySelector = ({
                     },
                     className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
                     children: [
-                      /* @__PURE__ */ jsx48(
-                        Icon26,
+                      /* @__PURE__ */ jsx49(
+                        Icon28,
                         {
                           icon: prop.icon,
                           size: "sm",
                           className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                         }
                       ),
-                      /* @__PURE__ */ jsx48("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: prop.label })
+                      /* @__PURE__ */ jsx49("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: prop.label })
                     ]
                   },
                   prop.id
                 )),
-                filteredProperties.length === 0 && /* @__PURE__ */ jsx48("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
+                filteredProperties.length === 0 && /* @__PURE__ */ jsx49("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
               ] })
             ] })
           ),
-          showAdvancedFooter && /* @__PURE__ */ jsx48(
+          showAdvancedFooter && /* @__PURE__ */ jsx49(
             AdvancedFilterFooter,
             {
               onClick: handleAdvancedClick,
@@ -6149,19 +6891,19 @@ var PropertySelector = ({
 PropertySelector.displayName = "PropertySelector";
 
 // src/components/ui/filter/kebab-menu.tsx
-import * as PopoverPrimitive6 from "@radix-ui/react-popover";
-import { Icon as Icon27, faArrowRightOutline, faTrashOutline } from "@l3mpire/icons";
-import { jsx as jsx49, jsxs as jsxs43 } from "react/jsx-runtime";
+import * as PopoverPrimitive7 from "@radix-ui/react-popover";
+import { Icon as Icon29, faArrowRightOutline as faArrowRightOutline2, faTrashOutline } from "@l3mpire/icons";
+import { jsx as jsx50, jsxs as jsxs44 } from "react/jsx-runtime";
 var KebabMenu = ({
   onConvertToAdvanced,
   onDelete,
   open,
   onOpenChange,
   children
-}) => /* @__PURE__ */ jsxs43(PopoverPrimitive6.Root, { open, onOpenChange, children: [
-  /* @__PURE__ */ jsx49(PopoverPrimitive6.Trigger, { asChild: true, children }),
-  /* @__PURE__ */ jsx49(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ jsxs43(
-    PopoverPrimitive6.Content,
+}) => /* @__PURE__ */ jsxs44(PopoverPrimitive7.Root, { open, onOpenChange, children: [
+  /* @__PURE__ */ jsx50(PopoverPrimitive7.Trigger, { asChild: true, children }),
+  /* @__PURE__ */ jsx50(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsxs44(
+    PopoverPrimitive7.Content,
     {
       sideOffset: 4,
       align: "end",
@@ -6174,7 +6916,7 @@ var KebabMenu = ({
         "min-w-[210px]"
       ),
       children: [
-        onConvertToAdvanced && /* @__PURE__ */ jsxs43(
+        onConvertToAdvanced && /* @__PURE__ */ jsxs44(
           "button",
           {
             type: "button",
@@ -6184,20 +6926,20 @@ var KebabMenu = ({
             },
             className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
             children: [
-              /* @__PURE__ */ jsx49(
-                Icon27,
+              /* @__PURE__ */ jsx50(
+                Icon29,
                 {
-                  icon: faArrowRightOutline,
+                  icon: faArrowRightOutline2,
                   size: "sm",
                   className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                 }
               ),
-              /* @__PURE__ */ jsx49("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)]", children: "Convert to advanced" })
+              /* @__PURE__ */ jsx50("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)]", children: "Convert to advanced" })
             ]
           }
         ),
-        onConvertToAdvanced && onDelete && /* @__PURE__ */ jsx49("div", { className: "h-px mx-base my-xs bg-[var(--color-border)]" }),
-        onDelete && /* @__PURE__ */ jsxs43(
+        onConvertToAdvanced && onDelete && /* @__PURE__ */ jsx50("div", { className: "h-px mx-base my-xs bg-[var(--color-border)]" }),
+        onDelete && /* @__PURE__ */ jsxs44(
           "button",
           {
             type: "button",
@@ -6207,15 +6949,15 @@ var KebabMenu = ({
             },
             className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
             children: [
-              /* @__PURE__ */ jsx49(
-                Icon27,
+              /* @__PURE__ */ jsx50(
+                Icon29,
                 {
                   icon: faTrashOutline,
                   size: "sm",
                   className: "shrink-0 text-[var(--color-destructive)]"
                 }
               ),
-              /* @__PURE__ */ jsx49("span", { className: "text-sm font-regular leading-sm text-[var(--color-destructive)]", children: "Delete filter" })
+              /* @__PURE__ */ jsx50("span", { className: "text-sm font-regular leading-sm text-[var(--color-destructive)]", children: "Delete filter" })
             ]
           }
         )
@@ -6226,10 +6968,10 @@ var KebabMenu = ({
 KebabMenu.displayName = "KebabMenu";
 
 // src/components/ui/filter/filter-editor.tsx
-import * as React42 from "react";
-import * as PopoverPrimitive7 from "@radix-ui/react-popover";
-import { Icon as Icon28 } from "@l3mpire/icons";
-import { jsx as jsx50, jsxs as jsxs44 } from "react/jsx-runtime";
+import * as React44 from "react";
+import * as PopoverPrimitive8 from "@radix-ui/react-popover";
+import { Icon as Icon30 } from "@l3mpire/icons";
+import { jsx as jsx51, jsxs as jsxs45 } from "react/jsx-runtime";
 var FilterEditor = ({
   propertyDef,
   condition,
@@ -6240,16 +6982,16 @@ var FilterEditor = ({
   onOpenChange,
   children
 }) => {
-  const [view, setView] = React42.useState(
+  const [view, setView] = React44.useState(
     mode === "add" ? "value" : "operator"
   );
-  const [localOperator, setLocalOperator] = React42.useState(
+  const [localOperator, setLocalOperator] = React44.useState(
     condition.operator
   );
-  const [localValue, setLocalValue] = React42.useState(
+  const [localValue, setLocalValue] = React44.useState(
     condition.value
   );
-  React42.useEffect(() => {
+  React44.useEffect(() => {
     if (open) {
       setView(mode === "add" ? "value" : "operator");
       setLocalOperator(condition.operator);
@@ -6274,10 +7016,10 @@ var FilterEditor = ({
     onOpenChange?.(false);
     onClose();
   };
-  return /* @__PURE__ */ jsxs44(PopoverPrimitive7.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx50(PopoverPrimitive7.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx50(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsxs44(
-      PopoverPrimitive7.Content,
+  return /* @__PURE__ */ jsxs45(PopoverPrimitive8.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx51(PopoverPrimitive8.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx51(PopoverPrimitive8.Portal, { children: /* @__PURE__ */ jsxs45(
+      PopoverPrimitive8.Content,
       {
         sideOffset: 4,
         align: "start",
@@ -6290,17 +7032,17 @@ var FilterEditor = ({
           "min-w-[240px]"
         ),
         children: [
-          /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-base px-base pt-base pb-xs border-b border-[var(--color-border)]", children: [
-            /* @__PURE__ */ jsx50(
-              Icon28,
+          /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-base px-base pt-base pb-xs border-b border-[var(--color-border)]", children: [
+            /* @__PURE__ */ jsx51(
+              Icon30,
               {
                 icon: propertyDef.icon,
                 size: "sm",
                 className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
               }
             ),
-            /* @__PURE__ */ jsx50("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: propertyDef.label }),
-            localOperator && view === "value" && /* @__PURE__ */ jsxs44(
+            /* @__PURE__ */ jsx51("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: propertyDef.label }),
+            localOperator && view === "value" && /* @__PURE__ */ jsxs45(
               "button",
               {
                 type: "button",
@@ -6313,14 +7055,14 @@ var FilterEditor = ({
               }
             )
           ] }),
-          view === "operator" ? /* @__PURE__ */ jsx50("div", { className: "p-xs", children: /* @__PURE__ */ jsx50(
+          view === "operator" ? /* @__PURE__ */ jsx51("div", { className: "p-xs", children: /* @__PURE__ */ jsx51(
             OperatorList,
             {
               dataType: propertyDef.type,
               activeOperator: localOperator,
               onSelect: handleOperatorSelect
             }
-          ) }) : localOperator && /* @__PURE__ */ jsx50(
+          ) }) : localOperator && /* @__PURE__ */ jsx51(
             ValueInput,
             {
               dataType: propertyDef.type,
@@ -6328,7 +7070,8 @@ var FilterEditor = ({
               value: localValue,
               onChange: setLocalValue,
               onSubmit: handleSubmit,
-              options: propertyDef.options
+              options: propertyDef.options,
+              dynamicOptions: propertyDef.dynamicOptions
             }
           )
         ]
@@ -6339,34 +7082,9 @@ var FilterEditor = ({
 FilterEditor.displayName = "FilterEditor";
 
 // src/components/ui/filter/interactive-filter-chip.tsx
-import * as React43 from "react";
-import * as PopoverPrimitive8 from "@radix-ui/react-popover";
-import { jsx as jsx51, jsxs as jsxs45 } from "react/jsx-runtime";
-function formatFilterValue(value) {
-  if (value == null) return void 0;
-  if (typeof value === "boolean") return value ? "Yes" : "No";
-  if (value instanceof Date) {
-    return value.toLocaleDateString("en-US", {
-      month: "short",
-      day: "numeric",
-      year: "numeric"
-    });
-  }
-  if (Array.isArray(value)) {
-    if (value.length === 0) return void 0;
-    if (value.length === 2 && typeof value[0] === "number") {
-      return `${value[0]} \u2013 ${value[1]}`;
-    }
-    return value[0];
-  }
-  return String(value);
-}
-function getBadgeCount(value) {
-  if (Array.isArray(value) && value.length > 1 && typeof value[0] === "string") {
-    return value.length;
-  }
-  return void 0;
-}
+import * as React45 from "react";
+import * as PopoverPrimitive9 from "@radix-ui/react-popover";
+import { jsx as jsx52, jsxs as jsxs46 } from "react/jsx-runtime";
 var SegmentPopover = ({
   open,
   onOpenChange,
@@ -6374,10 +7092,10 @@ var SegmentPopover = ({
   children,
   align = "start",
   minWidth = "240px"
-}) => /* @__PURE__ */ jsxs45(PopoverPrimitive8.Root, { open, onOpenChange, children: [
-  /* @__PURE__ */ jsx51(PopoverPrimitive8.Trigger, { asChild: true, children: trigger }),
-  /* @__PURE__ */ jsx51(PopoverPrimitive8.Portal, { children: /* @__PURE__ */ jsx51(
-    PopoverPrimitive8.Content,
+}) => /* @__PURE__ */ jsxs46(PopoverPrimitive9.Root, { open, onOpenChange, children: [
+  /* @__PURE__ */ jsx52(PopoverPrimitive9.Trigger, { asChild: true, children: trigger }),
+  /* @__PURE__ */ jsx52(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ jsx52(
+    PopoverPrimitive9.Content,
     {
       sideOffset: 4,
       align,
@@ -6405,19 +7123,19 @@ var InteractiveFilterChip = ({
   onConvertToAdvanced,
   className
 }) => {
-  const [operatorOpen, setOperatorOpen] = React43.useState(false);
-  const [valueOpen, setValueOpen] = React43.useState(false);
-  const [propertyOpen, setPropertyOpen] = React43.useState(false);
-  const [kebabOpen, setKebabOpen] = React43.useState(false);
-  const [pendingValueOpen, setPendingValueOpen] = React43.useState(false);
-  const autoOpenHandled = React43.useRef(false);
-  React43.useEffect(() => {
+  const [operatorOpen, setOperatorOpen] = React45.useState(false);
+  const [valueOpen, setValueOpen] = React45.useState(false);
+  const [propertyOpen, setPropertyOpen] = React45.useState(false);
+  const [kebabOpen, setKebabOpen] = React45.useState(false);
+  const [pendingValueOpen, setPendingValueOpen] = React45.useState(false);
+  const autoOpenHandled = React45.useRef(false);
+  React45.useEffect(() => {
     if (autoOpen && !autoOpenHandled.current && condition.operator && !isNoValueOperator(condition.operator)) {
       autoOpenHandled.current = true;
       setValueOpen(true);
     }
   }, [autoOpen, condition.operator]);
-  React43.useEffect(() => {
+  React45.useEffect(() => {
     if (!operatorOpen && pendingValueOpen) {
       setPendingValueOpen(false);
       setValueOpen(true);
@@ -6446,7 +7164,7 @@ var InteractiveFilterChip = ({
   const displayValue = formatFilterValue(condition.value);
   const hasValue = hasOperator && displayValue != null;
   const badgeCount = getBadgeCount(condition.value);
-  return /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs46(
     "div",
     {
       className: cn(
@@ -6455,7 +7173,7 @@ var InteractiveFilterChip = ({
         className
       ),
       children: [
-        properties ? /* @__PURE__ */ jsx51(
+        properties ? /* @__PURE__ */ jsx52(
           PropertySelector,
           {
             properties,
@@ -6465,7 +7183,7 @@ var InteractiveFilterChip = ({
             },
             open: propertyOpen,
             onOpenChange: setPropertyOpen,
-            children: /* @__PURE__ */ jsx51("div", { children: /* @__PURE__ */ jsx51(
+            children: /* @__PURE__ */ jsx52("div", { children: /* @__PURE__ */ jsx52(
               FilterChipSegment,
               {
                 segmentType: "property",
@@ -6476,7 +7194,7 @@ var InteractiveFilterChip = ({
               }
             ) })
           }
-        ) : /* @__PURE__ */ jsx51(
+        ) : /* @__PURE__ */ jsx52(
           FilterChipSegment,
           {
             segmentType: "property",
@@ -6485,13 +7203,13 @@ var InteractiveFilterChip = ({
             label: propertyDef.label
           }
         ),
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx52(
           SegmentPopover,
           {
             open: operatorOpen,
             onOpenChange: setOperatorOpen,
             minWidth: "180px",
-            trigger: /* @__PURE__ */ jsx51("div", { children: /* @__PURE__ */ jsx51(
+            trigger: /* @__PURE__ */ jsx52("div", { children: /* @__PURE__ */ jsx52(
               FilterChipSegment,
               {
                 segmentType: hasOperator ? "operator" : "placeholder",
@@ -6500,7 +7218,7 @@ var InteractiveFilterChip = ({
                 onClick: () => setOperatorOpen(true)
               }
             ) }),
-            children: /* @__PURE__ */ jsx51("div", { className: "p-xs", children: /* @__PURE__ */ jsx51(
+            children: /* @__PURE__ */ jsx52("div", { className: "p-xs", children: /* @__PURE__ */ jsx52(
               OperatorList,
               {
                 dataType: propertyDef.type,
@@ -6510,36 +7228,41 @@ var InteractiveFilterChip = ({
             ) })
           }
         ),
-        hasOperator && condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ jsx51(
-          SegmentPopover,
-          {
-            open: valueOpen,
-            onOpenChange: setValueOpen,
-            minWidth: "240px",
-            trigger: /* @__PURE__ */ jsx51("div", { children: /* @__PURE__ */ jsx51(
-              FilterChipSegment,
-              {
-                segmentType: hasValue ? "value" : "placeholder",
-                hasBorder: true,
-                label: hasValue ? displayValue : "Enter value",
-                badgeCount,
-                onClick: () => setValueOpen(true)
-              }
-            ) }),
-            children: /* @__PURE__ */ jsx51(
-              ValueInput,
-              {
-                dataType: propertyDef.type,
-                operator: condition.operator,
-                value: condition.value,
-                onChange: handleValueChange,
-                onSubmit: handleValueSubmit,
-                options: propertyDef.options
-              }
-            )
-          }
-        ),
-        hasOperator && condition.operator && isNoValueOperator(condition.operator) && /* @__PURE__ */ jsx51(
+        hasOperator && condition.operator && !isNoValueOperator(condition.operator) && (() => {
+          const inputType = getValueInputType(propertyDef.type, condition.operator);
+          const dateWide = inputType === "DatePicker" || inputType === "DateRange";
+          return /* @__PURE__ */ jsx52(
+            SegmentPopover,
+            {
+              open: valueOpen,
+              onOpenChange: setValueOpen,
+              minWidth: dateWide ? "auto" : "240px",
+              trigger: /* @__PURE__ */ jsx52("div", { children: /* @__PURE__ */ jsx52(
+                FilterChipSegment,
+                {
+                  segmentType: hasValue ? "value" : "placeholder",
+                  hasBorder: true,
+                  label: hasValue ? displayValue : "Enter value",
+                  badgeCount,
+                  onClick: () => setValueOpen(true)
+                }
+              ) }),
+              children: /* @__PURE__ */ jsx52(
+                ValueInput,
+                {
+                  dataType: propertyDef.type,
+                  operator: condition.operator,
+                  value: condition.value,
+                  onChange: handleValueChange,
+                  onSubmit: handleValueSubmit,
+                  options: propertyDef.options,
+                  dynamicOptions: propertyDef.dynamicOptions
+                }
+              )
+            }
+          );
+        })(),
+        hasOperator && condition.operator && isNoValueOperator(condition.operator) && /* @__PURE__ */ jsx52(
           FilterChipSegment,
           {
             segmentType: "value",
@@ -6547,14 +7270,14 @@ var InteractiveFilterChip = ({
             label: condition.operator
           }
         ),
-        hasOperator && /* @__PURE__ */ jsx51(
+        hasOperator && /* @__PURE__ */ jsx52(
           KebabMenu,
           {
             open: kebabOpen,
             onOpenChange: setKebabOpen,
             onConvertToAdvanced,
             onDelete,
-            children: /* @__PURE__ */ jsx51("div", { children: /* @__PURE__ */ jsx51(
+            children: /* @__PURE__ */ jsx52("div", { children: /* @__PURE__ */ jsx52(
               FilterChipSegment,
               {
                 segmentType: "button",
@@ -6573,13 +7296,13 @@ var InteractiveFilterChip = ({
 InteractiveFilterChip.displayName = "InteractiveFilterChip";
 
 // src/components/ui/filter/filter-system.tsx
-import * as React49 from "react";
-import { Icon as Icon33, faXmarkOutline as faXmarkOutline4, faPlusOutline as faPlusOutline4 } from "@l3mpire/icons";
+import * as React53 from "react";
+import { Icon as Icon37, faXmarkOutline as faXmarkOutline5, faPlusOutline as faPlusOutline5 } from "@l3mpire/icons";
 
 // src/components/ui/filter/advanced-chip.tsx
-import * as React44 from "react";
-import { Icon as Icon29, faXmarkOutline as faXmarkOutline2 } from "@l3mpire/icons";
-import { jsx as jsx52, jsxs as jsxs46 } from "react/jsx-runtime";
+import * as React46 from "react";
+import { Icon as Icon31, faXmarkOutline as faXmarkOutline2 } from "@l3mpire/icons";
+import { jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
 var btnBase = [
   "flex items-center justify-center",
   "min-h-[32px] max-h-[32px]",
@@ -6588,9 +7311,9 @@ var btnBase = [
   "cursor-pointer transition-colors",
   "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
 ];
-var AdvancedChip = React44.forwardRef(
-  ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ jsxs46("div", { className: cn("inline-flex items-center", className), children: [
-    /* @__PURE__ */ jsxs46(
+var AdvancedChip = React46.forwardRef(
+  ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ jsxs47("div", { className: cn("inline-flex items-center", className), children: [
+    /* @__PURE__ */ jsxs47(
       "button",
       {
         ref,
@@ -6603,12 +7326,12 @@ var AdvancedChip = React44.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx52("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Advanced filters" }),
-          count > 0 && /* @__PURE__ */ jsx52("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx52("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
+          /* @__PURE__ */ jsx53("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Advanced filters" }),
+          count > 0 && /* @__PURE__ */ jsx53("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx53("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
         ]
       }
     ),
-    onClear && /* @__PURE__ */ jsx52(
+    onClear && /* @__PURE__ */ jsx53(
       "button",
       {
         type: "button",
@@ -6622,7 +7345,7 @@ var AdvancedChip = React44.forwardRef(
           "rounded-r-md -ml-px"
         ),
         "aria-label": "Clear all advanced filters",
-        children: /* @__PURE__ */ jsx52(Icon29, { icon: faXmarkOutline2, size: "sm", className: "text-[var(--color-foreground)]" })
+        children: /* @__PURE__ */ jsx53(Icon31, { icon: faXmarkOutline2, size: "sm", className: "text-[var(--color-foreground)]" })
       }
     )
   ] })
@@ -6630,15 +7353,128 @@ var AdvancedChip = React44.forwardRef(
 AdvancedChip.displayName = "AdvancedChip";
 
 // src/components/ui/filter/advanced-popover.tsx
-import * as React46 from "react";
+import * as React50 from "react";
+import * as PopoverPrimitive12 from "@radix-ui/react-popover";
+import { Icon as Icon35, faPlusOutline as faPlusOutline3, faChevronDownOutline as faChevronDownOutline3, faXmarkOutline as faXmarkOutline3 } from "@l3mpire/icons";
+
+// src/components/ui/filter/advanced-row.tsx
+import * as React48 from "react";
+import * as PopoverPrimitive11 from "@radix-ui/react-popover";
+import { Icon as Icon33, faRefreshOutline, faChevronDownOutline as faChevronDownOutline2 } from "@l3mpire/icons";
+
+// src/components/ui/filter/filter-node-actions.tsx
+import * as React47 from "react";
 import * as PopoverPrimitive10 from "@radix-ui/react-popover";
-import { Icon as Icon31, faPlusOutline as faPlusOutline2, faChevronDownOutline as faChevronDownOutline3 } from "@l3mpire/icons";
+import {
+  Icon as Icon32,
+  faEllipsisOutline,
+  faCopyOutline,
+  faTrashOutline as faTrashOutline2,
+  faFolderOutline,
+  faFilterOutline as faFilterOutline3
+} from "@l3mpire/icons";
+import { jsx as jsx54, jsxs as jsxs48 } from "react/jsx-runtime";
+var FilterNodeActions = ({
+  nodeType,
+  onDuplicate,
+  onConvert,
+  onDelete
+}) => {
+  const [open, setOpen] = React47.useState(false);
+  const items = [
+    {
+      label: "Duplicate",
+      icon: faCopyOutline,
+      action: onDuplicate
+    },
+    {
+      label: nodeType === "condition" ? "Turn into group" : "Turn into filter",
+      icon: nodeType === "condition" ? faFolderOutline : faFilterOutline3,
+      action: onConvert
+    },
+    {
+      label: "Delete",
+      icon: faTrashOutline2,
+      action: onDelete,
+      destructive: true
+    }
+  ];
+  return /* @__PURE__ */ jsxs48(PopoverPrimitive10.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx54(PopoverPrimitive10.Trigger, { asChild: true, children: /* @__PURE__ */ jsx54(
+      "button",
+      {
+        type: "button",
+        className: "shrink-0 flex items-center justify-center p-sm rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
+        "aria-label": "More actions",
+        children: /* @__PURE__ */ jsx54(
+          Icon32,
+          {
+            icon: faEllipsisOutline,
+            size: "sm",
+            className: "text-[var(--color-foreground)]"
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx54(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ jsx54(
+      PopoverPrimitive10.Content,
+      {
+        sideOffset: 4,
+        align: "end",
+        className: cn(
+          "z-50 flex flex-col p-xs overflow-clip",
+          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "min-w-[180px]"
+        ),
+        children: items.map((item) => /* @__PURE__ */ jsxs48(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              item.action();
+              setOpen(false);
+            },
+            className: cn(
+              "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
+              "hover:bg-[var(--color-dropdown-item-hover)]",
+              item.destructive && "text-[var(--color-destructive,#ef4444)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx54(
+                Icon32,
+                {
+                  icon: item.icon,
+                  size: "sm",
+                  className: cn(
+                    "shrink-0",
+                    item.destructive ? "text-[var(--color-destructive,#ef4444)]" : "text-[var(--color-dropdown-item-icon)]"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx54(
+                "span",
+                {
+                  className: cn(
+                    "text-sm font-regular leading-sm",
+                    item.destructive ? "text-[var(--color-destructive,#ef4444)]" : "text-[var(--color-dropdown-item-text)]"
+                  ),
+                  children: item.label
+                }
+              )
+            ]
+          },
+          item.label
+        ))
+      }
+    ) })
+  ] });
+};
+FilterNodeActions.displayName = "FilterNodeActions";
 
 // src/components/ui/filter/advanced-row.tsx
-import * as React45 from "react";
-import * as PopoverPrimitive9 from "@radix-ui/react-popover";
-import { Icon as Icon30, faXmarkOutline as faXmarkOutline3, faRefreshOutline, faChevronDownOutline as faChevronDownOutline2 } from "@l3mpire/icons";
-import { jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs49 } from "react/jsx-runtime";
 var selectBtnStyle = [
   "flex items-center gap-base",
   "px-base py-sm",
@@ -6655,10 +7491,13 @@ var AdvancedRow = ({
   properties,
   onUpdate,
   onPropertyChange,
-  onDelete
+  onDelete,
+  onDuplicate,
+  onTurnIntoGroup
 }) => {
-  const [operatorOpen, setOperatorOpen] = React45.useState(false);
-  const [propertyOpen, setPropertyOpen] = React45.useState(false);
+  const [operatorOpen, setOperatorOpen] = React48.useState(false);
+  const [propertyOpen, setPropertyOpen] = React48.useState(false);
+  const [valueOpen, setValueOpen] = React48.useState(false);
   const handleOperatorSelect = (op) => {
     if (isNoValueOperator(op)) {
       onUpdate({ ...condition, operator: op, value: null });
@@ -6671,16 +7510,18 @@ var AdvancedRow = ({
   const handleValueChange = (val) => {
     onUpdate({ ...condition, value: val });
   };
-  const displayValue = condition.value == null ? "" : typeof condition.value === "string" ? condition.value : String(condition.value);
-  return /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    connector === "Where" ? /* @__PURE__ */ jsx53("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx53("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ jsxs47(
+  const displayValue = formatFilterValue(condition.value);
+  const badgeCount = getBadgeCount(condition.value);
+  const hasValue = displayValue != null;
+  return /* @__PURE__ */ jsxs49("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+    connector === "Where" ? /* @__PURE__ */ jsx55("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx55("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ jsxs49(
       "button",
       {
         type: "button",
         onClick: onConnectorToggle,
         className: cn(
           "shrink-0 flex items-center justify-center gap-xs",
-          "min-w-[64px] min-h-[24px] max-h-[24px] p-xs",
+          "min-w-[64px] min-h-[32px] max-h-[32px] px-base py-sm",
           "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
           "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-base shadow-sm",
           "cursor-pointer transition-colors text-xs font-semibold leading-xs text-[var(--color-foreground)]",
@@ -6688,22 +7529,18 @@ var AdvancedRow = ({
         ),
         children: [
           connector,
-          /* @__PURE__ */ jsx53(Icon30, { icon: faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
+          /* @__PURE__ */ jsx55(Icon33, { icon: faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs47(PopoverPrimitive9.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
-      /* @__PURE__ */ jsx53(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs47("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ jsx53(Icon30, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
-        /* @__PURE__ */ jsxs47("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate", children: [
-          propertyDef.groupLabel,
-          " > ",
-          propertyDef.label
-        ] }),
-        /* @__PURE__ */ jsx53(Icon30, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+    /* @__PURE__ */ jsxs49(PopoverPrimitive11.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
+      /* @__PURE__ */ jsx55(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs49("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
+        /* @__PURE__ */ jsx55(Icon33, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
+        /* @__PURE__ */ jsx55("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate", children: propertyDef.label }),
+        /* @__PURE__ */ jsx55(Icon33, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
       ] }) }),
-      /* @__PURE__ */ jsx53(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ jsx53(
-        PopoverPrimitive9.Content,
+      /* @__PURE__ */ jsx55(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsx55(
+        PopoverPrimitive11.Content,
         {
           sideOffset: 4,
           align: "start",
@@ -6714,7 +7551,7 @@ var AdvancedRow = ({
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[200px]"
           ),
-          children: properties.map((p) => /* @__PURE__ */ jsxs47(
+          children: properties.map((p) => /* @__PURE__ */ jsxs49(
             "button",
             {
               type: "button",
@@ -6728,8 +7565,8 @@ var AdvancedRow = ({
                 p.id === condition.propertyId && "bg-[var(--color-dropdown-item-hover)]"
               ),
               children: [
-                /* @__PURE__ */ jsx53(Icon30, { icon: p.icon, size: "sm", className: "shrink-0 text-[var(--color-dropdown-item-icon)]" }),
-                /* @__PURE__ */ jsx53("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] truncate", children: p.label })
+                /* @__PURE__ */ jsx55(Icon33, { icon: p.icon, size: "sm", className: "shrink-0 text-[var(--color-dropdown-item-icon)]" }),
+                /* @__PURE__ */ jsx55("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] truncate", children: p.label })
               ]
             },
             p.id
@@ -6737,1177 +7574,1021 @@ var AdvancedRow = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs47(PopoverPrimitive9.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
-      /* @__PURE__ */ jsx53(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs47("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ jsx53("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
-        /* @__PURE__ */ jsx53(Icon30, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+    /* @__PURE__ */ jsxs49(PopoverPrimitive11.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
+      /* @__PURE__ */ jsx55(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs49("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
+        /* @__PURE__ */ jsx55("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
+        /* @__PURE__ */ jsx55(Icon33, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
       ] }) }),
-      /* @__PURE__ */ jsx53(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ jsx53(
-        PopoverPrimitive9.Content,
+      /* @__PURE__ */ jsx55(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsx55(
+        PopoverPrimitive11.Content,
         {
           sideOffset: 4,
           align: "start",
           className: cn(
             "z-50 flex flex-col p-xs overflow-clip",
             "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
-            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
-            "min-w-[160px]"
-          ),
-          children: /* @__PURE__ */ jsx53(
-            OperatorList,
-            {
-              dataType: propertyDef.type,
-              activeOperator: condition.operator,
-              onSelect: handleOperatorSelect
-            }
-          )
-        }
-      ) })
-    ] }),
-    condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ jsx53(
-      "input",
-      {
-        type: "text",
-        value: displayValue,
-        onChange: (e) => handleValueChange(e.target.value),
-        placeholder: "Placeholder",
-        className: cn(
-          "flex-1 min-w-[80px] px-base py-sm rounded-md",
-          "border border-[var(--color-input)]",
-          "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
-          "placeholder:text-[var(--color-muted-foreground)]",
-          "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-0"
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx53(
-      "button",
-      {
-        type: "button",
-        onClick: onDelete,
-        className: "ml-auto shrink-0 flex items-center justify-center p-sm rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
-        "aria-label": "Remove filter",
-        children: /* @__PURE__ */ jsx53(Icon30, { icon: faXmarkOutline3, size: "sm", className: "text-[var(--color-foreground)]" })
-      }
-    )
-  ] });
-};
-AdvancedRow.displayName = "AdvancedRow";
-
-// src/components/ui/filter/advanced-popover.tsx
-import { jsx as jsx54, jsxs as jsxs48 } from "react/jsx-runtime";
-var outlinedBtn = [
-  "flex items-center gap-sm px-base py-sm",
-  "min-h-[32px] max-h-[32px] min-w-[80px]",
-  "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-  "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
-  "cursor-pointer transition-colors text-sm font-semibold leading-sm text-[var(--color-foreground)]",
-  "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
-];
-var AdvancedPopover = ({
-  filters,
-  properties,
-  onFiltersChange,
-  open,
-  onOpenChange,
-  children
-}) => {
-  const [addSelectorOpen, setAddSelectorOpen] = React46.useState(false);
-  const [draftPickerOpen, setDraftPickerOpen] = React46.useState(false);
-  const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
-  const handleUpdateFilter = (updated) => {
-    onFiltersChange(filters.map((f) => f.id === updated.id ? updated : f));
-  };
-  const handleDeleteFilter = (id) => {
-    onFiltersChange(filters.filter((f) => f.id !== id));
-  };
-  const handlePropertyChange = (filterId, newProp) => {
-    const newCondition = createFilterWithDefaults(newProp.id, newProp.type);
-    onFiltersChange(
-      filters.map((f) => f.id === filterId ? { ...newCondition, id: filterId } : f)
-    );
-  };
-  const handleAddFilter = (property) => {
-    const newFilter = createFilterWithDefaults(property.id, property.type);
-    onFiltersChange([...filters, newFilter]);
-    setAddSelectorOpen(false);
-  };
-  const handleClearAll = () => {
-    onFiltersChange([]);
-    onOpenChange?.(false);
-  };
-  const toggleLogicOp = (filterId) => {
-    onFiltersChange(
-      filters.map(
-        (f) => f.id === filterId ? { ...f, logicOperator: (f.logicOperator ?? "and") === "and" ? "or" : "and" } : f
-      )
-    );
-  };
-  return /* @__PURE__ */ jsxs48(PopoverPrimitive10.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx54(PopoverPrimitive10.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx54(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ jsxs48(
-      PopoverPrimitive10.Content,
-      {
-        sideOffset: 4,
-        align: "start",
-        collisionPadding: 16,
-        onOpenAutoFocus: (e) => e.preventDefault(),
-        className: cn(
-          "z-50 flex flex-col",
-          "bg-[var(--color-background)] rounded-md shadow-lg",
-          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          "data-[side=bottom]:slide-in-from-top-2",
-          "w-[min(520px,calc(100vw-32px))]"
-        ),
-        children: [
-          /* @__PURE__ */ jsxs48("div", { className: "flex flex-col gap-base p-base", children: [
-            filters.map((filter, i) => {
-              const propDef = getPropertyDef(filter.propertyId);
-              if (!propDef) return null;
-              return /* @__PURE__ */ jsx54(
-                AdvancedRow,
-                {
-                  connector: i === 0 ? "Where" : (filter.logicOperator ?? "and") === "and" ? "And" : "Or",
-                  onConnectorToggle: i > 0 ? () => toggleLogicOp(filter.id) : void 0,
-                  propertyDef: propDef,
-                  condition: filter,
-                  properties,
-                  onUpdate: handleUpdateFilter,
-                  onPropertyChange: (p) => handlePropertyChange(filter.id, p),
-                  onDelete: () => handleDeleteFilter(filter.id)
-                },
-                filter.id
-              );
-            }),
-            filters.length === 0 && /* ── Draft row: inline "Select property" placeholder ──── */
-            /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-              /* @__PURE__ */ jsx54("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx54("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
-              /* @__PURE__ */ jsx54(
-                PropertySelector,
+            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+            "min-w-[160px]"
+          ),
+          children: /* @__PURE__ */ jsx55(
+            OperatorList,
+            {
+              dataType: propertyDef.type,
+              activeOperator: condition.operator,
+              onSelect: handleOperatorSelect
+            }
+          )
+        }
+      ) })
+    ] }),
+    condition.operator && !isNoValueOperator(condition.operator) && (() => {
+      const inputType = getValueInputType(propertyDef.type, condition.operator);
+      const dateWide = inputType === "DatePicker" || inputType === "DateRange";
+      return /* @__PURE__ */ jsxs49(PopoverPrimitive11.Root, { open: valueOpen, onOpenChange: setValueOpen, children: [
+        /* @__PURE__ */ jsx55(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs49(
+          "button",
+          {
+            type: "button",
+            className: cn(selectBtnStyle, "flex-1 min-w-[80px] justify-between"),
+            children: [
+              /* @__PURE__ */ jsx55(
+                "span",
                 {
-                  properties,
-                  onSelect: handleAddFilter,
-                  open: draftPickerOpen,
-                  onOpenChange: setDraftPickerOpen,
-                  children: /* @__PURE__ */ jsxs48(
-                    "button",
-                    {
-                      type: "button",
-                      className: cn(
-                        "flex items-center gap-base px-base py-sm min-w-0",
-                        "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-                        "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
-                        "cursor-pointer transition-colors",
-                        "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx54("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
-                        /* @__PURE__ */ jsx54(
-                          Icon31,
-                          {
-                            icon: faChevronDownOutline3,
-                            size: "xs",
-                            className: "shrink-0 text-[var(--color-foreground)]"
-                          }
-                        )
-                      ]
-                    }
-                  )
+                  className: cn(
+                    "text-sm font-regular leading-sm whitespace-nowrap truncate text-left",
+                    hasValue ? "text-[var(--color-foreground)]" : "text-[var(--color-muted-foreground)]"
+                  ),
+                  children: hasValue ? displayValue : "Enter a value"
                 }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
-            /* @__PURE__ */ jsx54(
-              PropertySelector,
-              {
-                properties,
-                onSelect: handleAddFilter,
-                open: addSelectorOpen,
-                onOpenChange: setAddSelectorOpen,
-                children: /* @__PURE__ */ jsxs48("button", { type: "button", className: cn(outlinedBtn), children: [
-                  /* @__PURE__ */ jsx54(Icon31, { icon: faPlusOutline2, size: "sm", className: "text-[var(--color-foreground)]" }),
-                  "Add filter"
-                ] })
-              }
+              ),
+              /* @__PURE__ */ jsxs49("span", { className: "flex items-center gap-xs shrink-0", children: [
+                badgeCount != null && /* @__PURE__ */ jsxs49("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: [
+                  "+",
+                  badgeCount - 1
+                ] }),
+                /* @__PURE__ */ jsx55(
+                  Icon33,
+                  {
+                    icon: faChevronDownOutline2,
+                    size: "xs",
+                    className: "text-[var(--color-foreground)]"
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx55(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsx55(
+          PopoverPrimitive11.Content,
+          {
+            sideOffset: 4,
+            align: "start",
+            className: cn(
+              "z-50 flex flex-col overflow-clip",
+              "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+              "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+              "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
             ),
-            /* @__PURE__ */ jsx54(
-              "button",
+            style: { minWidth: dateWide ? "auto" : "240px" },
+            children: /* @__PURE__ */ jsx55(
+              ValueInput,
               {
-                type: "button",
-                onClick: handleClearAll,
-                className: "text-sm font-semibold leading-sm text-[var(--color-foreground)] cursor-pointer transition-colors hover:opacity-70 px-base py-sm",
-                children: "Clear all filters"
+                dataType: propertyDef.type,
+                operator: condition.operator,
+                value: condition.value,
+                onChange: handleValueChange,
+                onSubmit: () => setValueOpen(false),
+                options: propertyDef.options,
+                dynamicOptions: propertyDef.dynamicOptions
               }
             )
-          ] })
-        ]
+          }
+        ) })
+      ] });
+    })(),
+    /* @__PURE__ */ jsx55(
+      FilterNodeActions,
+      {
+        nodeType: "condition",
+        onDuplicate: onDuplicate ?? (() => {
+        }),
+        onConvert: onTurnIntoGroup ?? (() => {
+        }),
+        onDelete
       }
-    ) })
+    )
   ] });
 };
-AdvancedPopover.displayName = "AdvancedPopover";
+AdvancedRow.displayName = "AdvancedRow";
 
-// src/components/ui/filter/summary-chip.tsx
-import * as React47 from "react";
-import * as PopoverPrimitive11 from "@radix-ui/react-popover";
-import { Icon as Icon32, faSlidersOutline as faSlidersOutline2, faPlusOutline as faPlusOutline3, faChevronDownOutline as faChevronDownOutline4 } from "@l3mpire/icons";
-import { jsx as jsx55, jsxs as jsxs49 } from "react/jsx-runtime";
-var SummaryChip = ({
-  count,
-  filters,
+// src/components/ui/filter/advanced-group.tsx
+import * as React49 from "react";
+import { Icon as Icon34, faRefreshOutline as faRefreshOutline2, faPlusOutline as faPlusOutline2 } from "@l3mpire/icons";
+import { jsx as jsx56, jsxs as jsxs50 } from "react/jsx-runtime";
+var AdvancedGroup = ({
+  connector,
+  onConnectorToggle,
+  onDuplicate,
+  onTurnIntoFilter,
+  onDelete,
+  onAddFilter,
   properties,
-  onFiltersChange,
-  onClearAll,
-  children,
-  className,
-  open: openProp,
-  onOpenChange
+  children
 }) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = React47.useState(false);
-  const isControlled = openProp !== void 0;
-  const open = isControlled ? openProp : uncontrolledOpen;
-  const setOpen = (v) => {
-    if (!isControlled) setUncontrolledOpen(v);
-    onOpenChange?.(v);
-  };
-  const [addSelectorOpen, setAddSelectorOpen] = React47.useState(false);
-  const [draftPickerOpen, setDraftPickerOpen] = React47.useState(false);
-  const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
-  const handleUpdateFilter = (updated) => {
-    onFiltersChange(filters.map((f) => f.id === updated.id ? updated : f));
-  };
-  const handleDeleteFilter = (id) => {
-    const next = filters.filter((f) => f.id !== id);
-    onFiltersChange(next);
-    if (next.length === 0) setOpen(false);
-  };
-  const handlePropertyChange = (filterId, newProp) => {
-    const newCondition = createFilterWithDefaults(newProp.id, newProp.type);
-    onFiltersChange(
-      filters.map((f) => f.id === filterId ? { ...newCondition, id: filterId } : f)
-    );
-  };
-  const handleAddFilter = (property) => {
-    const newFilter = createFilterWithDefaults(property.id, property.type);
-    onFiltersChange([...filters, newFilter]);
-    setAddSelectorOpen(false);
-  };
-  const toggleLogicOp = (filterId) => {
-    onFiltersChange(
-      filters.map(
-        (f) => f.id === filterId ? { ...f, logicOperator: (f.logicOperator ?? "and") === "and" ? "or" : "and" } : f
-      )
-    );
-  };
-  return /* @__PURE__ */ jsxs49(PopoverPrimitive11.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx55(PopoverPrimitive11.Trigger, { asChild: true, children: children ?? /* @__PURE__ */ jsxs49(
+  const [addOpen, setAddOpen] = React49.useState(false);
+  return /* @__PURE__ */ jsxs50("div", { className: "flex items-start gap-base w-full min-w-0", children: [
+    connector === "Where" ? /* @__PURE__ */ jsx56("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ jsx56("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ jsx56("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ jsxs50(
       "button",
       {
         type: "button",
+        onClick: onConnectorToggle,
         className: cn(
-          "inline-flex items-center gap-sm px-base py-sm",
-          "min-h-[32px] max-h-[32px]",
+          "flex items-center justify-center gap-xs",
+          "min-w-[64px] min-h-[32px] max-h-[32px] px-base py-sm",
           "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-          "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
-          "cursor-pointer transition-colors",
-          "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
-          className
+          "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-base shadow-sm",
+          "cursor-pointer transition-colors text-xs font-semibold leading-xs text-[var(--color-foreground)]",
+          "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
         ),
         children: [
-          /* @__PURE__ */ jsx55(
-            Icon32,
-            {
-              icon: faSlidersOutline2,
-              size: "sm",
-              className: "shrink-0 text-[var(--color-foreground)]"
-            }
-          ),
-          /* @__PURE__ */ jsx55("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
-          count > 0 && /* @__PURE__ */ jsx55("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx55("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
+          connector,
+          /* @__PURE__ */ jsx56(Icon34, { icon: faRefreshOutline2, size: "xs", className: "text-[var(--color-foreground)]" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx55(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsxs49(
-      PopoverPrimitive11.Content,
+    /* @__PURE__ */ jsxs50("div", { className: "flex-1 min-w-0 flex flex-col gap-base p-base border border-[var(--color-border)] rounded-md bg-[var(--color-secondary,var(--color-accent))]", children: [
+      children,
+      onAddFilter && properties && /* @__PURE__ */ jsx56(
+        PropertySelector,
+        {
+          properties,
+          onSelect: (prop) => {
+            onAddFilter(prop);
+            setAddOpen(false);
+          },
+          open: addOpen,
+          onOpenChange: setAddOpen,
+          children: /* @__PURE__ */ jsxs50(
+            "button",
+            {
+              type: "button",
+              className: "flex items-center gap-sm px-base py-sm text-sm font-semibold leading-sm text-[var(--color-muted-foreground)] cursor-pointer transition-colors rounded-md hover:bg-[var(--color-accent)] hover:text-[var(--color-foreground)] w-fit",
+              children: [
+                /* @__PURE__ */ jsx56(Icon34, { icon: faPlusOutline2, size: "sm" }),
+                "Add filter"
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx56("div", { className: "shrink-0 pt-base", children: /* @__PURE__ */ jsx56(
+      FilterNodeActions,
       {
-        sideOffset: 4,
-        align: "start",
-        collisionPadding: 16,
-        onOpenAutoFocus: (e) => e.preventDefault(),
-        className: cn(
-          "z-50 flex flex-col overflow-clip",
-          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
-          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          "data-[side=bottom]:slide-in-from-top-2",
-          "w-[min(520px,calc(100vw-32px))]"
-        ),
-        children: [
-          /* @__PURE__ */ jsxs49("div", { className: "flex flex-col gap-base p-base", children: [
-            filters.map((filter, i) => {
-              const propDef = getPropertyDef(filter.propertyId);
-              if (!propDef) return null;
-              return /* @__PURE__ */ jsx55(
-                AdvancedRow,
-                {
-                  connector: i === 0 ? "Where" : (filter.logicOperator ?? "and") === "and" ? "And" : "Or",
-                  onConnectorToggle: i > 0 ? () => toggleLogicOp(filter.id) : void 0,
-                  propertyDef: propDef,
-                  condition: filter,
-                  properties,
-                  onUpdate: handleUpdateFilter,
-                  onPropertyChange: (p) => handlePropertyChange(filter.id, p),
-                  onDelete: () => handleDeleteFilter(filter.id)
-                },
-                filter.id
-              );
-            }),
-            filters.length === 0 && /* ── Draft row: inline "Select property" placeholder ──── */
-            /* @__PURE__ */ jsxs49("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-              /* @__PURE__ */ jsx55("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx55("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
-              /* @__PURE__ */ jsx55(
-                PropertySelector,
-                {
-                  properties,
-                  onSelect: handleAddFilter,
-                  open: draftPickerOpen,
-                  onOpenChange: setDraftPickerOpen,
-                  children: /* @__PURE__ */ jsxs49(
-                    "button",
-                    {
-                      type: "button",
-                      className: cn(
-                        "flex items-center gap-base px-base py-sm min-w-0",
-                        "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-                        "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
-                        "cursor-pointer transition-colors",
-                        "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx55("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
-                        /* @__PURE__ */ jsx55(
-                          Icon32,
-                          {
-                            icon: faChevronDownOutline4,
-                            size: "xs",
-                            className: "shrink-0 text-[var(--color-foreground)]"
-                          }
-                        )
-                      ]
-                    }
-                  )
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs49("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
-            /* @__PURE__ */ jsx55(
-              PropertySelector,
-              {
-                properties,
-                onSelect: handleAddFilter,
-                open: addSelectorOpen,
-                onOpenChange: setAddSelectorOpen,
-                children: /* @__PURE__ */ jsxs49(
-                  "button",
-                  {
-                    type: "button",
-                    className: cn(
-                      "flex items-center gap-sm px-base py-sm",
-                      "min-h-[32px] max-h-[32px] min-w-[80px]",
-                      "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-                      "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
-                      "cursor-pointer transition-colors text-sm font-semibold leading-sm text-[var(--color-foreground)]",
-                      "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx55(Icon32, { icon: faPlusOutline3, size: "sm", className: "text-[var(--color-foreground)]" }),
-                      "Add filter"
-                    ]
-                  }
-                )
-              }
-            ),
-            filters.length > 0 && /* @__PURE__ */ jsx55(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  onClearAll();
-                  setOpen(false);
-                },
-                className: "text-sm font-semibold leading-sm text-[var(--color-foreground)] cursor-pointer transition-colors hover:opacity-70 px-base py-sm",
-                children: "Clear all filters"
-              }
-            )
-          ] })
-        ]
+        nodeType: "group",
+        onDuplicate,
+        onConvert: onTurnIntoFilter,
+        onDelete
       }
     ) })
   ] });
 };
-SummaryChip.displayName = "SummaryChip";
-
-// src/components/ui/filter/use-filter-bar-mode.ts
-import * as React48 from "react";
-var DEFAULT_BREAKPOINT = 600;
-function useFilterBarMode(ref, override, breakpoint = DEFAULT_BREAKPOINT) {
-  const [mode, setMode] = React48.useState("default");
-  React48.useEffect(() => {
-    if (override) return;
-    const el = ref.current;
-    if (!el) return;
-    const observer = new ResizeObserver((entries) => {
-      const width = entries[0]?.contentRect.width ?? 0;
-      setMode(width > breakpoint ? "default" : "minimal");
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [ref, override, breakpoint]);
-  return override ?? mode;
-}
+AdvancedGroup.displayName = "AdvancedGroup";
 
-// src/components/ui/filter/filter-system.tsx
-import { Fragment as Fragment5, jsx as jsx56, jsxs as jsxs50 } from "react/jsx-runtime";
-var FilterSystem = ({
-  properties,
-  filterState,
-  onFilterStateChange,
-  sortFields,
-  mode: modeOverride,
-  breakpoint,
-  children,
-  actions,
-  className
-}) => {
-  const containerRef = React49.useRef(null);
-  const mode = useFilterBarMode(containerRef, modeOverride, breakpoint);
-  const [propertySelectorOpen, setPropertySelectorOpen] = React49.useState(false);
-  const [advancedOpen, setAdvancedOpen] = React49.useState(false);
-  const [summaryOpen, setSummaryOpen] = React49.useState(false);
-  const [pendingFilterId, setPendingFilterId] = React49.useState(null);
-  const allFilters = [...filterState.basicFilters, ...filterState.advancedFilters];
-  const totalCount = allFilters.length;
-  const handleAddFilter = (property) => {
-    const newFilter = createFilterWithDefaults(property.id, property.type);
-    if (newFilter.operator && isNoValueOperator(newFilter.operator)) {
-      onFilterStateChange({
-        ...filterState,
-        basicFilters: [...filterState.basicFilters, newFilter]
-      });
-      return;
-    }
-    setPendingFilterId(newFilter.id);
-    onFilterStateChange({
-      ...filterState,
-      basicFilters: [...filterState.basicFilters, newFilter]
-    });
+// src/components/ui/filter/advanced-popover.tsx
+import { jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
+var ghostBtn = [
+  "flex items-center gap-sm px-base py-sm",
+  "min-h-[32px]",
+  "cursor-pointer transition-colors text-sm font-semibold leading-sm",
+  "rounded-md hover:bg-[var(--color-accent)]"
+];
+var AdvancedPopover = ({
+  filters,
+  properties,
+  onFiltersChange,
+  open,
+  onOpenChange,
+  children
+}) => {
+  const [addSelectorOpen, setAddSelectorOpen] = React50.useState(false);
+  const [draftPickerOpen, setDraftPickerOpen] = React50.useState(false);
+  const [groupSelectorOpen, setGroupSelectorOpen] = React50.useState(false);
+  const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
+  const handleAddFilter = (property) => {
+    const newFilter = createFilterWithDefaults(property.id, property.type);
+    onFiltersChange([...filters, newFilter]);
+    setAddSelectorOpen(false);
   };
-  const handleUpdateFilter = (updated) => {
-    onFilterStateChange({
-      ...filterState,
-      basicFilters: filterState.basicFilters.map(
-        (f) => f.id === updated.id ? updated : f
-      )
-    });
-    if (pendingFilterId === updated.id) {
-      setPendingFilterId(null);
-    }
+  const handleAddGroup = () => {
+    const group = createEmptyGroup();
+    onFiltersChange([...filters, group]);
+    setGroupSelectorOpen(false);
   };
-  const handleDeleteFilter = (id) => {
-    onFilterStateChange({
-      ...filterState,
-      basicFilters: filterState.basicFilters.filter((f) => f.id !== id)
-    });
+  const handleClearAll = () => {
+    onFiltersChange([]);
+    onOpenChange?.(false);
   };
-  const handlePropertyChange = (filterId, newProp) => {
-    const newCondition = createFilterWithDefaults(newProp.id, newProp.type);
-    onFilterStateChange({
-      ...filterState,
-      basicFilters: filterState.basicFilters.map(
-        (f) => f.id === filterId ? { ...newCondition, id: filterId } : f
-      )
-    });
-    if (newCondition.operator && !isNoValueOperator(newCondition.operator)) {
-      setPendingFilterId(filterId);
-    }
+  const handleUpdateNode = (id, updated) => {
+    onFiltersChange(updateNodeInTree(filters, id, () => updated));
   };
-  const handleConvertToAdvanced = (id) => {
-    const filter = filterState.basicFilters.find((f) => f.id === id);
-    if (!filter) return;
-    onFilterStateChange({
-      ...filterState,
-      basicFilters: filterState.basicFilters.filter((f) => f.id !== id),
-      advancedFilters: [...filterState.advancedFilters, filter]
-    });
+  const handleDeleteNode = (id) => {
+    onFiltersChange(removeNodeFromTree(filters, id));
   };
-  const handleAdvancedFiltersChange = (filters) => {
-    onFilterStateChange({ ...filterState, advancedFilters: filters });
+  const handleDuplicateNode = (id) => {
+    const find = (nodes) => {
+      for (const n of nodes) {
+        if (n.id === id) return n;
+        if (isFilterGroup(n)) {
+          const found = find(n.children);
+          if (found) return found;
+        }
+      }
+    };
+    const node = find(filters);
+    if (!node) return;
+    const clone = duplicateNode(node);
+    clone.logicOperator = node.logicOperator ?? "and";
+    onFiltersChange(insertAfterInTree(filters, id, clone));
   };
-  const handleClearAdvanced = () => {
-    onFilterStateChange({ ...filterState, advancedFilters: [] });
+  const handleWrapInGroup = (id) => {
+    const find = (nodes) => {
+      for (const n of nodes) {
+        if (n.id === id && !isFilterGroup(n)) return n;
+        if (isFilterGroup(n)) {
+          const found = find(n.children);
+          if (found) return found;
+        }
+      }
+    };
+    const condition = find(filters);
+    if (!condition) return;
+    const group = wrapInGroup(condition);
+    onFiltersChange(replaceNodeInTree(filters, id, group));
   };
-  const handleClearAll = () => {
-    onFilterStateChange({
-      ...filterState,
-      basicFilters: [],
-      advancedFilters: []
-    });
+  const handleUnwrapGroup = (id) => {
+    const find = (nodes) => {
+      for (const n of nodes) {
+        if (n.id === id && isFilterGroup(n)) return n;
+        if (isFilterGroup(n)) {
+          const found = find(n.children);
+          if (found) return found;
+        }
+      }
+    };
+    const group = find(filters);
+    if (!group) return;
+    const replacement = unwrapGroup(group);
+    if (replacement) {
+      onFiltersChange(replaceNodeInTree(filters, id, replacement));
+    } else {
+      onFiltersChange(removeNodeFromTree(filters, id));
+    }
   };
-  const handleSortChange = (field, direction) => {
-    onFilterStateChange({ ...filterState, sort: { field, direction } });
+  const toggleLogicOp = (id) => {
+    onFiltersChange(
+      updateNodeInTree(filters, id, (n) => ({
+        ...n,
+        logicOperator: (n.logicOperator ?? "and") === "and" ? "or" : "and"
+      }))
+    );
   };
-  const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
-  const hasAdvanced = filterState.advancedFilters.length > 0;
-  const isMinimal = mode === "minimal";
-  const handleOpenAdvanced = () => {
-    setPropertySelectorOpen(false);
-    requestAnimationFrame(() => {
-      if (isMinimal) {
-        setSummaryOpen(true);
-      } else {
-        setAdvancedOpen(true);
-      }
-    });
+  const handleGroupChildrenChange = (groupId, children2) => {
+    onFiltersChange(
+      updateNodeInTree(
+        filters,
+        groupId,
+        (n) => isFilterGroup(n) ? { ...n, children: children2 } : n
+      )
+    );
   };
-  const advancedFilterCount = filterState.advancedFilters.length;
-  const showAdvancedChip = hasAdvanced || advancedOpen;
-  const showSummaryChip = totalCount > 0 || summaryOpen;
-  return /* @__PURE__ */ jsxs50(FilterBar, { ref: containerRef, className, children: [
-    /* @__PURE__ */ jsxs50(FilterBarLeft, { className: "flex-nowrap flex-1 min-w-0 overflow-x-auto scrollbar-none outline-none [&>*]:shrink-0", children: [
-      children,
-      sortFields && filterState.sort && /* @__PURE__ */ jsx56(
-        SortButton,
+  const renderNode = (node, index) => {
+    const connector = index === 0 ? "Where" : (node.logicOperator ?? "and") === "and" ? "And" : "Or";
+    if (isFilterGroup(node)) {
+      return /* @__PURE__ */ jsx57(
+        AdvancedGroup,
         {
-          fields: sortFields,
-          activeField: filterState.sort.field,
-          direction: filterState.sort.direction,
-          onChange: handleSortChange,
-          iconOnly: isMinimal
-        }
-      ),
-      isMinimal ? /* @__PURE__ */ jsxs50(Fragment5, { children: [
-        /* @__PURE__ */ jsx56(
-          "div",
-          {
-            className: showSummaryChip ? "inline-flex" : "inline-flex w-0 overflow-hidden opacity-0 pointer-events-none",
-            "aria-hidden": !showSummaryChip || void 0,
-            children: /* @__PURE__ */ jsx56(
-              SummaryChip,
+          connector,
+          onConnectorToggle: index > 0 ? () => toggleLogicOp(node.id) : void 0,
+          onDuplicate: () => handleDuplicateNode(node.id),
+          onTurnIntoFilter: () => handleUnwrapGroup(node.id),
+          onDelete: () => handleDeleteNode(node.id),
+          properties,
+          onAddFilter: (prop) => {
+            const newFilter = createFilterWithDefaults(prop.id, prop.type);
+            handleGroupChildrenChange(node.id, [...node.children, newFilter]);
+          },
+          children: node.children.length === 0 ? (
+            /* Draft row in empty group */
+            /* @__PURE__ */ jsx57(
+              DraftRow,
               {
-                count: totalCount,
-                filters: allFilters,
                 properties,
-                onFiltersChange: (filters) => {
-                  onFilterStateChange({
-                    ...filterState,
-                    basicFilters: filters,
-                    advancedFilters: []
-                  });
-                },
-                onClearAll: handleClearAll,
-                open: summaryOpen,
-                onOpenChange: setSummaryOpen
+                onSelect: (prop) => {
+                  const newFilter = createFilterWithDefaults(prop.id, prop.type);
+                  handleGroupChildrenChange(node.id, [newFilter]);
+                }
               }
             )
-          }
+          ) : node.children.map((child, i) => renderNode(child, i))
+        },
+        node.id
+      );
+    }
+    const propDef = getPropertyDef(node.propertyId);
+    if (!propDef) return null;
+    return /* @__PURE__ */ jsx57(
+      AdvancedRow,
+      {
+        connector,
+        onConnectorToggle: index > 0 ? () => toggleLogicOp(node.id) : void 0,
+        propertyDef: propDef,
+        condition: node,
+        properties,
+        onUpdate: (updated) => handleUpdateNode(node.id, updated),
+        onPropertyChange: (p) => {
+          const newCondition = createFilterWithDefaults(p.id, p.type);
+          handleUpdateNode(node.id, { ...newCondition, id: node.id });
+        },
+        onDelete: () => handleDeleteNode(node.id),
+        onDuplicate: () => handleDuplicateNode(node.id),
+        onTurnIntoGroup: () => handleWrapInGroup(node.id)
+      },
+      node.id
+    );
+  };
+  return /* @__PURE__ */ jsxs51(PopoverPrimitive12.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx57(PopoverPrimitive12.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx57(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ jsxs51(
+      PopoverPrimitive12.Content,
+      {
+        sideOffset: 4,
+        align: "start",
+        collisionPadding: 16,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        className: cn(
+          "z-50 flex flex-col",
+          "bg-[var(--color-background)] rounded-md shadow-lg",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2",
+          "w-[min(640px,calc(100vw-32px))]"
         ),
-        !showSummaryChip && /* @__PURE__ */ jsx56(
-          PropertySelector,
-          {
-            properties,
-            onSelect: handleAddFilter,
-            open: propertySelectorOpen,
-            onOpenChange: setPropertySelectorOpen,
-            onAdvancedFilter: handleOpenAdvanced,
-            advancedFilterCount,
-            children: /* @__PURE__ */ jsx56(FilterBarButton, { iconOnly: true })
-          }
-        )
-      ] }) : (
-        /* ── DEFAULT MODE ────────────────────────────────────── */
-        /* @__PURE__ */ jsxs50(Fragment5, { children: [
-          /* @__PURE__ */ jsx56(
-            AdvancedPopover,
+        children: [
+          /* @__PURE__ */ jsx57("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ jsx57(
+            DraftRow,
             {
-              filters: filterState.advancedFilters,
               properties,
-              onFiltersChange: handleAdvancedFiltersChange,
-              open: advancedOpen,
-              onOpenChange: setAdvancedOpen,
-              children: /* @__PURE__ */ jsx56(
-                "div",
+              onSelect: handleAddFilter,
+              open: draftPickerOpen,
+              onOpenChange: setDraftPickerOpen
+            }
+          ) }),
+          /* @__PURE__ */ jsxs51("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
+            /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-sm", children: [
+              /* @__PURE__ */ jsx57(
+                PropertySelector,
                 {
-                  className: showAdvancedChip ? "inline-flex" : "inline-flex w-0 overflow-hidden opacity-0 pointer-events-none",
-                  "aria-hidden": !showAdvancedChip || void 0,
-                  children: /* @__PURE__ */ jsx56(
-                    AdvancedChip,
-                    {
-                      count: filterState.advancedFilters.length,
-                      onClick: () => setAdvancedOpen(true),
-                      onClear: handleClearAdvanced
-                    }
-                  )
+                  properties,
+                  onSelect: handleAddFilter,
+                  open: addSelectorOpen,
+                  onOpenChange: setAddSelectorOpen,
+                  children: /* @__PURE__ */ jsxs51("button", { type: "button", className: cn(ghostBtn, "text-[var(--color-foreground)]"), children: [
+                    /* @__PURE__ */ jsx57(Icon35, { icon: faPlusOutline3, size: "sm", className: "text-[var(--color-foreground)]" }),
+                    "Add filter"
+                  ] })
                 }
-              )
-            }
-          ),
-          filterState.basicFilters.map((filter) => {
-            const propDef = getPropertyDef(filter.propertyId);
-            if (!propDef) return null;
-            return /* @__PURE__ */ jsx56(
-              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)
-              },
-              filter.id
-            );
-          }),
-          /* @__PURE__ */ jsx56(
-            PropertySelector,
-            {
-              properties,
-              onSelect: handleAddFilter,
-              open: propertySelectorOpen,
-              onOpenChange: setPropertySelectorOpen,
-              onAdvancedFilter: handleOpenAdvanced,
-              advancedFilterCount,
-              children: totalCount > 0 ? /* @__PURE__ */ jsx56(
+              ),
+              /* @__PURE__ */ jsxs51(
                 "button",
                 {
                   type: "button",
-                  className: "shrink-0 inline-flex items-center justify-center size-8 rounded-md border border-[var(--color-btn-outlined-neutral-border-default)] bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)] shadow-sm cursor-pointer transition-colors hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
-                  children: /* @__PURE__ */ jsx56(Icon33, { icon: faPlusOutline4, size: "sm", className: "text-[var(--color-foreground)]" })
+                  onClick: handleAddGroup,
+                  className: cn(ghostBtn, "text-[var(--color-foreground)]"),
+                  children: [
+                    /* @__PURE__ */ jsx57(Icon35, { icon: faPlusOutline3, size: "sm", className: "text-[var(--color-foreground)]" }),
+                    "Add filters group"
+                  ]
                 }
-              ) : /* @__PURE__ */ jsx56(FilterBarButton, {})
-            }
-          )
-        ] })
-      ),
-      totalCount > 0 && /* @__PURE__ */ jsx56(
-        "button",
-        {
-          type: "button",
-          onClick: handleClearAll,
-          className: "shrink-0 flex items-center gap-sm px-base py-sm min-h-[32px] max-h-[32px] rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
-          children: isMinimal ? /* @__PURE__ */ jsx56(Icon33, { icon: faXmarkOutline4, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ jsx56("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: "Clear" })
-        }
-      )
-    ] }),
-    actions && /* @__PURE__ */ jsx56(FilterBarRight, { className: "shrink-0 -ml-2xl pl-2xl relative z-10 bg-[linear-gradient(to_right,transparent_0px,var(--filter-bar-bg,var(--color-background,#fff))_24px)]", children: actions })
+              )
+            ] }),
+            filters.length > 0 && /* @__PURE__ */ jsxs51(
+              "button",
+              {
+                type: "button",
+                onClick: handleClearAll,
+                className: cn(ghostBtn, "text-[var(--color-destructive,#ef4444)]"),
+                children: [
+                  /* @__PURE__ */ jsx57(Icon35, { icon: faXmarkOutline3, size: "sm", className: "text-[var(--color-destructive,#ef4444)]" }),
+                  "Clear filters"
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+AdvancedPopover.displayName = "AdvancedPopover";
+var DraftRow = ({
+  properties,
+  onSelect,
+  open: openProp,
+  onOpenChange
+}) => {
+  const [internalOpen, setInternalOpen] = React50.useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : internalOpen;
+  const setOpen = (v) => {
+    if (!isControlled) setInternalOpen(v);
+    onOpenChange?.(v);
+  };
+  return /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+    /* @__PURE__ */ jsx57("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx57("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
+    /* @__PURE__ */ jsx57(
+      PropertySelector,
+      {
+        properties,
+        onSelect: (prop) => {
+          onSelect(prop);
+          setOpen(false);
+        },
+        open,
+        onOpenChange: setOpen,
+        children: /* @__PURE__ */ jsxs51(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "flex items-center gap-base px-base py-sm min-w-0",
+              "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
+              "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+              "cursor-pointer transition-colors",
+              "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx57("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
+              /* @__PURE__ */ jsx57(
+                Icon35,
+                {
+                  icon: faChevronDownOutline3,
+                  size: "xs",
+                  className: "shrink-0 text-[var(--color-foreground)]"
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
   ] });
 };
-FilterSystem.displayName = "FilterSystem";
 
-// src/components/ui/date-picker.tsx
-import * as React50 from "react";
-import * as PopoverPrimitive12 from "@radix-ui/react-popover";
-import {
-  Icon as Icon34,
-  faChevronLeftOutline as faChevronLeftOutline3,
-  faChevronRightOutline as faChevronRightOutline3,
-  faArrowRightOutline as faArrowRightOutline2,
-  faCalendarOutline
-} from "@l3mpire/icons";
-import { jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
-function getDaysInMonth(year, month) {
-  return new Date(year, month + 1, 0).getDate();
-}
-function getWeekdayIndex(date) {
-  return (date.getDay() + 6) % 7;
-}
-function isSameDay(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
-function isInRange(date, from, to) {
-  const t = date.getTime();
-  return t >= from.getTime() && t <= to.getTime();
-}
-function startOfDay(d) {
-  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
-}
-var WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-var MONTH_NAMES = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
+// src/components/ui/filter/summary-chip.tsx
+import * as React51 from "react";
+import * as PopoverPrimitive13 from "@radix-ui/react-popover";
+import { Icon as Icon36, faSlidersOutline as faSlidersOutline2, faPlusOutline as faPlusOutline4, faChevronDownOutline as faChevronDownOutline4, faXmarkOutline as faXmarkOutline4 } from "@l3mpire/icons";
+import { jsx as jsx58, jsxs as jsxs52 } from "react/jsx-runtime";
+var ghostBtn2 = [
+  "flex items-center gap-sm px-base py-sm",
+  "min-h-[32px]",
+  "cursor-pointer transition-colors text-sm font-semibold leading-sm",
+  "rounded-md hover:bg-[var(--color-accent)]"
 ];
-var DatePickerContext = React50.createContext(
-  null
-);
-function useDatePickerContext() {
-  const ctx = React50.useContext(DatePickerContext);
-  if (!ctx)
-    throw new Error("DatePicker compound components must be used within <DatePicker>");
-  return ctx;
-}
-var DatePicker = React50.forwardRef(
-  ({
-    className,
-    mode = "single",
-    value,
-    onValueChange,
-    defaultMonth,
-    defaultYear,
-    children,
-    ...props
-  }, ref) => {
-    const today = React50.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-    const initialDate = React50.useMemo(() => {
-      if (value) {
-        if (value instanceof Date) return value;
-        return value.from;
-      }
-      return today;
-    }, []);
-    const [month, setMonth] = React50.useState(
-      defaultMonth ?? initialDate.getMonth()
-    );
-    const [year, setYear] = React50.useState(
-      defaultYear ?? initialDate.getFullYear()
-    );
-    const [hoveredDate, setHoveredDate] = React50.useState();
-    const goToPrevMonth = React50.useCallback(() => {
-      setMonth((m) => {
-        if (m === 0) {
-          setYear((y) => y - 1);
-          return 11;
-        }
-        return m - 1;
-      });
-    }, []);
-    const goToNextMonth = React50.useCallback(() => {
-      setMonth((m) => {
-        if (m === 11) {
-          setYear((y) => y + 1);
-          return 0;
-        }
-        return m + 1;
-      });
-    }, []);
-    const onSelect = React50.useCallback(
-      (date) => {
-        if (mode === "single") {
-          onValueChange?.(date);
-          return;
+var SummaryChip = ({
+  count,
+  filters,
+  properties,
+  onFiltersChange,
+  onClearAll,
+  children,
+  className,
+  open: openProp,
+  onOpenChange
+}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = React51.useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const setOpen = (v) => {
+    if (!isControlled) setUncontrolledOpen(v);
+    onOpenChange?.(v);
+  };
+  const [addSelectorOpen, setAddSelectorOpen] = React51.useState(false);
+  const [draftPickerOpen, setDraftPickerOpen] = React51.useState(false);
+  const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
+  const handleAddFilter = (property) => {
+    const newFilter = createFilterWithDefaults(property.id, property.type);
+    onFiltersChange([...filters, newFilter]);
+    setAddSelectorOpen(false);
+  };
+  const handleAddGroup = () => {
+    onFiltersChange([...filters, createEmptyGroup()]);
+  };
+  const handleUpdateNode = (id, updated) => {
+    onFiltersChange(updateNodeInTree(filters, id, () => updated));
+  };
+  const handleDeleteNode = (id) => {
+    const next = removeNodeFromTree(filters, id);
+    onFiltersChange(next);
+    if (next.length === 0) setOpen(false);
+  };
+  const handleDuplicateNode = (id) => {
+    const find = (nodes) => {
+      for (const n of nodes) {
+        if (n.id === id) return n;
+        if (isFilterGroup(n)) {
+          const f = find(n.children);
+          if (f) return f;
         }
-        if (!value || value instanceof Date) {
-          onValueChange?.({ from: date });
-          return;
+      }
+    };
+    const node = find(filters);
+    if (!node) return;
+    const clone = duplicateNode(node);
+    clone.logicOperator = node.logicOperator ?? "and";
+    onFiltersChange(insertAfterInTree(filters, id, clone));
+  };
+  const handleWrapInGroup = (id) => {
+    const find = (nodes) => {
+      for (const n of nodes) {
+        if (n.id === id && !isFilterGroup(n)) return n;
+        if (isFilterGroup(n)) {
+          const f = find(n.children);
+          if (f) return f;
         }
-        const range = value;
-        if (range.to || date.getTime() < range.from.getTime()) {
-          onValueChange?.({ from: date });
-        } else {
-          onValueChange?.({ from: range.from, to: date });
+      }
+    };
+    const condition = find(filters);
+    if (!condition) return;
+    onFiltersChange(replaceNodeInTree(filters, id, wrapInGroup(condition)));
+  };
+  const handleUnwrapGroup = (id) => {
+    const find = (nodes) => {
+      for (const n of nodes) {
+        if (n.id === id && isFilterGroup(n)) return n;
+        if (isFilterGroup(n)) {
+          const f = find(n.children);
+          if (f) return f;
         }
-      },
-      [mode, value, onValueChange]
+      }
+    };
+    const group = find(filters);
+    if (!group) return;
+    const replacement = unwrapGroup(group);
+    if (replacement) {
+      onFiltersChange(replaceNodeInTree(filters, id, replacement));
+    } else {
+      onFiltersChange(removeNodeFromTree(filters, id));
+    }
+  };
+  const toggleLogicOp = (id) => {
+    onFiltersChange(
+      updateNodeInTree(filters, id, (n) => ({
+        ...n,
+        logicOperator: (n.logicOperator ?? "and") === "and" ? "or" : "and"
+      }))
     );
-    const ctxValue = React50.useMemo(
-      () => ({
-        mode,
-        selected: value,
-        onSelect,
-        month,
-        year,
-        setMonth,
-        setYear,
-        goToPrevMonth,
-        goToNextMonth,
-        today,
-        hoveredDate,
-        setHoveredDate
-      }),
-      [
-        mode,
-        value,
-        onSelect,
-        month,
-        year,
-        goToPrevMonth,
-        goToNextMonth,
-        today,
-        hoveredDate
-      ]
+  };
+  const handleGroupChildrenChange = (groupId, newChildren) => {
+    onFiltersChange(
+      updateNodeInTree(
+        filters,
+        groupId,
+        (n) => isFilterGroup(n) ? { ...n, children: newChildren } : n
+      )
     );
-    return /* @__PURE__ */ jsx57(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx57(
-      "div",
+  };
+  const renderNode = (node, index) => {
+    const connector = index === 0 ? "Where" : (node.logicOperator ?? "and") === "and" ? "And" : "Or";
+    if (isFilterGroup(node)) {
+      return /* @__PURE__ */ jsx58(
+        AdvancedGroup,
+        {
+          connector,
+          onConnectorToggle: index > 0 ? () => toggleLogicOp(node.id) : void 0,
+          onDuplicate: () => handleDuplicateNode(node.id),
+          onTurnIntoFilter: () => handleUnwrapGroup(node.id),
+          onDelete: () => handleDeleteNode(node.id),
+          properties,
+          onAddFilter: (prop) => {
+            const newFilter = createFilterWithDefaults(prop.id, prop.type);
+            handleGroupChildrenChange(node.id, [...node.children, newFilter]);
+          },
+          children: node.children.length === 0 ? /* @__PURE__ */ jsx58(
+            DraftRow2,
+            {
+              properties,
+              onSelect: (prop) => {
+                const newFilter = createFilterWithDefaults(prop.id, prop.type);
+                handleGroupChildrenChange(node.id, [newFilter]);
+              }
+            }
+          ) : node.children.map((child, i) => renderNode(child, i))
+        },
+        node.id
+      );
+    }
+    const propDef = getPropertyDef(node.propertyId);
+    if (!propDef) return null;
+    return /* @__PURE__ */ jsx58(
+      AdvancedRow,
       {
-        ref,
+        connector,
+        onConnectorToggle: index > 0 ? () => toggleLogicOp(node.id) : void 0,
+        propertyDef: propDef,
+        condition: node,
+        properties,
+        onUpdate: (updated) => handleUpdateNode(node.id, updated),
+        onPropertyChange: (p) => {
+          const newCondition = createFilterWithDefaults(p.id, p.type);
+          handleUpdateNode(node.id, { ...newCondition, id: node.id });
+        },
+        onDelete: () => handleDeleteNode(node.id),
+        onDuplicate: () => handleDuplicateNode(node.id),
+        onTurnIntoGroup: () => handleWrapInGroup(node.id)
+      },
+      node.id
+    );
+  };
+  return /* @__PURE__ */ jsxs52(PopoverPrimitive13.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx58(PopoverPrimitive13.Trigger, { asChild: true, children: children ?? /* @__PURE__ */ jsxs52(
+      "button",
+      {
+        type: "button",
         className: cn(
-          "flex flex-col overflow-clip",
-          "bg-datepicker-bg border border-datepicker-border rounded-md shadow-lg",
+          "inline-flex items-center gap-sm px-base py-sm",
+          "min-h-[32px] max-h-[32px]",
+          "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
+          "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+          "cursor-pointer transition-colors",
+          "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
           className
         ),
-        ...props,
-        children
+        children: [
+          /* @__PURE__ */ jsx58(Icon36, { icon: faSlidersOutline2, size: "sm", className: "shrink-0 text-[var(--color-foreground)]" }),
+          /* @__PURE__ */ jsx58("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
+          count > 0 && /* @__PURE__ */ jsx58("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx58("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx58(PopoverPrimitive13.Portal, { children: /* @__PURE__ */ jsxs52(
+      PopoverPrimitive13.Content,
+      {
+        sideOffset: 4,
+        align: "start",
+        collisionPadding: 16,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        className: cn(
+          "z-50 flex flex-col overflow-clip",
+          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2",
+          "w-[min(640px,calc(100vw-32px))]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx58("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ jsx58(
+            DraftRow2,
+            {
+              properties,
+              onSelect: handleAddFilter,
+              open: draftPickerOpen,
+              onOpenChange: setDraftPickerOpen
+            }
+          ) }),
+          /* @__PURE__ */ jsxs52("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
+            /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-sm", children: [
+              /* @__PURE__ */ jsx58(
+                PropertySelector,
+                {
+                  properties,
+                  onSelect: handleAddFilter,
+                  open: addSelectorOpen,
+                  onOpenChange: setAddSelectorOpen,
+                  children: /* @__PURE__ */ jsxs52("button", { type: "button", className: cn(ghostBtn2, "text-[var(--color-foreground)]"), children: [
+                    /* @__PURE__ */ jsx58(Icon36, { icon: faPlusOutline4, size: "sm", className: "text-[var(--color-foreground)]" }),
+                    "Add filter"
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxs52("button", { type: "button", onClick: handleAddGroup, className: cn(ghostBtn2, "text-[var(--color-foreground)]"), children: [
+                /* @__PURE__ */ jsx58(Icon36, { icon: faPlusOutline4, size: "sm", className: "text-[var(--color-foreground)]" }),
+                "Add filters group"
+              ] })
+            ] }),
+            filters.length > 0 && /* @__PURE__ */ jsxs52(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onClearAll();
+                  setOpen(false);
+                },
+                className: cn(ghostBtn2, "text-[var(--color-destructive,#ef4444)]"),
+                children: [
+                  /* @__PURE__ */ jsx58(Icon36, { icon: faXmarkOutline4, size: "sm", className: "text-[var(--color-destructive,#ef4444)]" }),
+                  "Clear filters"
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+SummaryChip.displayName = "SummaryChip";
+var DraftRow2 = ({ properties, onSelect, open: openProp, onOpenChange }) => {
+  const [internalOpen, setInternalOpen] = React51.useState(false);
+  const isCtrl = openProp !== void 0;
+  const open = isCtrl ? openProp : internalOpen;
+  const setOpen = (v) => {
+    if (!isCtrl) setInternalOpen(v);
+    onOpenChange?.(v);
+  };
+  return /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+    /* @__PURE__ */ jsx58("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx58("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
+    /* @__PURE__ */ jsx58(PropertySelector, { properties, onSelect: (p) => {
+      onSelect(p);
+      setOpen(false);
+    }, open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs52(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "flex items-center gap-base px-base py-sm min-w-0",
+          "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
+          "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm cursor-pointer transition-colors",
+          "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx58("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
+          /* @__PURE__ */ jsx58(Icon36, { icon: faChevronDownOutline4, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+        ]
       }
-    ) });
-  }
-);
-DatePicker.displayName = "DatePicker";
-function defaultFormatDate(date) {
-  return date.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric"
-  });
-}
-var DatePickerSelects = React50.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__ */ jsx57(
-    "div",
-    {
-      ref,
-      className: cn("flex flex-col items-start pt-lg px-lg", className),
-      ...props,
-      children: /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-base w-full", children: [
-        /* @__PURE__ */ jsxs51("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
-          /* @__PURE__ */ jsx57("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
-          /* @__PURE__ */ jsx57(Icon34, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
-        ] }),
-        /* @__PURE__ */ jsx57(
-          Icon34,
-          {
-            icon: faArrowRightOutline2,
-            size: "sm",
-            className: "shrink-0 text-datepicker-header-weekday"
-          }
-        ),
-        /* @__PURE__ */ jsxs51("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
-          /* @__PURE__ */ jsx57("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
-          /* @__PURE__ */ jsx57(Icon34, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
-        ] })
-      ] })
-    }
-  );
-});
-DatePickerSelects.displayName = "DatePickerSelects";
-var DatePickerDay = ({ date, isOutside }) => {
-  const { mode, selected, onSelect, today, hoveredDate, setHoveredDate } = useDatePickerContext();
-  const isToday = isSameDay(date, today);
-  const isSelected = selected instanceof Date ? isSameDay(date, selected) : selected?.from ? isSameDay(date, selected.from) || (selected.to ? isSameDay(date, selected.to) : false) : false;
-  const isRangeStart = mode === "range" && selected && !(selected instanceof Date) && selected.from && isSameDay(date, selected.from);
-  const isRangeEnd = mode === "range" && selected && !(selected instanceof Date) && selected.to && isSameDay(date, selected.to);
-  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__ */ jsxs51(
-    "button",
-    {
-      type: "button",
-      onClick: () => !isOutside && onSelect(date),
-      onMouseEnter: () => mode === "range" && setHoveredDate(date),
-      onMouseLeave: () => mode === "range" && setHoveredDate(void 0),
-      disabled: isOutside,
-      className: cn(
-        "relative flex flex-col items-center justify-center w-9 rounded-full p-2 cursor-pointer transition-colors",
-        "text-sm font-semibold leading-sm text-center",
-        // Default
-        !isOutside && !isSelected && !isInRangeOrPreview && "text-datepicker-day-text-default hover:bg-datepicker-day-bg-hover",
-        // Outside month (disabled)
-        isOutside && "text-datepicker-day-text-disabled cursor-default",
-        // Selected
-        isSelected && "bg-datepicker-day-bg-selected text-datepicker-day-text-selected",
-        // In range
-        isInRangeOrPreview && "bg-datepicker-day-bg-range text-datepicker-day-text-range",
-        // Range start/end get full rounded; in-range items could be less rounded
-        (isRangeStart || isRangeEnd) && "rounded-full"
-      ),
-      children: [
-        date.getDate(),
-        isToday && !isOutside && /* @__PURE__ */ jsx57("span", { className: "absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1.5 rounded-full bg-datepicker-day-today" })
-      ]
-    }
-  );
+    ) })
+  ] });
 };
-var DatePickerCalendar = React50.forwardRef(({ className, header, ...props }, ref) => {
-  const { month, year, goToPrevMonth, goToNextMonth } = useDatePickerContext();
-  const weeks = React50.useMemo(() => {
-    const firstDay = new Date(year, month, 1);
-    const startOffset = getWeekdayIndex(firstDay);
-    const daysInMonth = getDaysInMonth(year, month);
-    const daysInPrevMonth = getDaysInMonth(
-      month === 0 ? year - 1 : year,
-      month === 0 ? 11 : month - 1
-    );
-    const days = [];
-    for (let i = startOffset - 1; i >= 0; i--) {
-      const d = daysInPrevMonth - i;
-      days.push({
-        date: new Date(
-          month === 0 ? year - 1 : year,
-          month === 0 ? 11 : month - 1,
-          d
-        ),
-        isOutside: true
+
+// src/components/ui/filter/use-filter-bar-mode.ts
+import * as React52 from "react";
+var DEFAULT_BREAKPOINT = 600;
+function useFilterBarMode(ref, override, breakpoint = DEFAULT_BREAKPOINT) {
+  const [mode, setMode] = React52.useState("default");
+  React52.useEffect(() => {
+    if (override) return;
+    const el = ref.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width ?? 0;
+      setMode(width > breakpoint ? "default" : "minimal");
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref, override, breakpoint]);
+  return override ?? mode;
+}
+
+// src/components/ui/filter/filter-system.tsx
+import { Fragment as Fragment5, jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
+var FilterSystem = ({
+  properties,
+  filterState,
+  onFilterStateChange,
+  sortFields,
+  mode: modeOverride,
+  breakpoint,
+  children,
+  actions,
+  className
+}) => {
+  const containerRef = React53.useRef(null);
+  const mode = useFilterBarMode(containerRef, modeOverride, breakpoint);
+  const [propertySelectorOpen, setPropertySelectorOpen] = React53.useState(false);
+  const [advancedOpen, setAdvancedOpen] = React53.useState(false);
+  const [summaryOpen, setSummaryOpen] = React53.useState(false);
+  const [pendingFilterId, setPendingFilterId] = React53.useState(null);
+  const totalCount = filterState.basicFilters.length + countConditions(filterState.advancedFilters);
+  const handleAddFilter = (property) => {
+    const newFilter = createFilterWithDefaults(property.id, property.type);
+    if (newFilter.operator && isNoValueOperator(newFilter.operator)) {
+      onFilterStateChange({
+        ...filterState,
+        basicFilters: [...filterState.basicFilters, newFilter]
       });
+      return;
     }
-    for (let d = 1; d <= daysInMonth; d++) {
-      days.push({ date: new Date(year, month, d), isOutside: false });
-    }
-    const remaining = 42 - days.length;
-    for (let d = 1; d <= remaining; d++) {
-      days.push({
-        date: new Date(
-          month === 11 ? year + 1 : year,
-          month === 11 ? 0 : month + 1,
-          d
-        ),
-        isOutside: true
-      });
+    setPendingFilterId(newFilter.id);
+    onFilterStateChange({
+      ...filterState,
+      basicFilters: [...filterState.basicFilters, newFilter]
+    });
+  };
+  const handleUpdateFilter = (updated) => {
+    onFilterStateChange({
+      ...filterState,
+      basicFilters: filterState.basicFilters.map(
+        (f) => f.id === updated.id ? updated : f
+      )
+    });
+    if (pendingFilterId === updated.id) {
+      setPendingFilterId(null);
     }
-    const result = [];
-    for (let i = 0; i < days.length; i += 7) {
-      result.push(days.slice(i, i + 7));
+  };
+  const handleDeleteFilter = (id) => {
+    onFilterStateChange({
+      ...filterState,
+      basicFilters: filterState.basicFilters.filter((f) => f.id !== id)
+    });
+  };
+  const handlePropertyChange = (filterId, newProp) => {
+    const newCondition = createFilterWithDefaults(newProp.id, newProp.type);
+    onFilterStateChange({
+      ...filterState,
+      basicFilters: filterState.basicFilters.map(
+        (f) => f.id === filterId ? { ...newCondition, id: filterId } : f
+      )
+    });
+    if (newCondition.operator && !isNoValueOperator(newCondition.operator)) {
+      setPendingFilterId(filterId);
     }
-    return result;
-  }, [month, year]);
-  return /* @__PURE__ */ jsxs51(
-    "div",
-    {
-      ref,
-      className: cn("flex flex-col", className),
-      ...props,
-      children: [
-        header,
-        /* @__PURE__ */ jsxs51("div", { className: "flex flex-col gap-lg p-lg", children: [
-          /* @__PURE__ */ jsxs51("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs51("span", { className: "text-base font-semibold leading-base text-datepicker-header-text", children: [
-              MONTH_NAMES[month],
-              " ",
-              year
-            ] }),
-            /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-xs", children: [
-              /* @__PURE__ */ jsx57(
-                "button",
+  };
+  const handleConvertToAdvanced = (id) => {
+    const filter = filterState.basicFilters.find((f) => f.id === id);
+    if (!filter) return;
+    onFilterStateChange({
+      ...filterState,
+      basicFilters: filterState.basicFilters.filter((f) => f.id !== id),
+      advancedFilters: [...filterState.advancedFilters, filter]
+    });
+  };
+  const handleAdvancedFiltersChange = (filters) => {
+    onFilterStateChange({ ...filterState, advancedFilters: filters });
+  };
+  const handleClearAdvanced = () => {
+    onFilterStateChange({ ...filterState, advancedFilters: [] });
+  };
+  const handleClearAll = () => {
+    onFilterStateChange({
+      ...filterState,
+      basicFilters: [],
+      advancedFilters: []
+    });
+  };
+  const handleSortChange = (field, direction) => {
+    onFilterStateChange({ ...filterState, sort: { field, direction } });
+  };
+  const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
+  const hasAdvanced = filterState.advancedFilters.length > 0;
+  const isMinimal = mode === "minimal";
+  const handleOpenAdvanced = () => {
+    setPropertySelectorOpen(false);
+    requestAnimationFrame(() => {
+      if (isMinimal) {
+        setSummaryOpen(true);
+      } else {
+        setAdvancedOpen(true);
+      }
+    });
+  };
+  const advancedFilterCount = filterState.advancedFilters.length;
+  const showAdvancedChip = hasAdvanced || advancedOpen;
+  const showSummaryChip = totalCount > 0 || summaryOpen;
+  return /* @__PURE__ */ jsxs53(FilterBar, { ref: containerRef, className, children: [
+    /* @__PURE__ */ jsxs53(FilterBarLeft, { className: "flex-nowrap flex-1 min-w-0 overflow-x-auto scrollbar-none outline-none [&>*]:shrink-0", children: [
+      children,
+      sortFields && filterState.sort && /* @__PURE__ */ jsx59(
+        SortButton,
+        {
+          fields: sortFields,
+          activeField: filterState.sort.field,
+          direction: filterState.sort.direction,
+          onChange: handleSortChange,
+          iconOnly: isMinimal
+        }
+      ),
+      isMinimal ? /* @__PURE__ */ jsxs53(Fragment5, { children: [
+        /* @__PURE__ */ jsx59(
+          "div",
+          {
+            className: showSummaryChip ? "inline-flex" : "inline-flex w-0 overflow-hidden opacity-0 pointer-events-none",
+            "aria-hidden": !showSummaryChip || void 0,
+            children: /* @__PURE__ */ jsx59(
+              SummaryChip,
+              {
+                count: totalCount,
+                filters: [...filterState.basicFilters, ...filterState.advancedFilters],
+                properties,
+                onFiltersChange: (nodes) => {
+                  onFilterStateChange({
+                    ...filterState,
+                    basicFilters: [],
+                    advancedFilters: nodes
+                  });
+                },
+                onClearAll: handleClearAll,
+                open: summaryOpen,
+                onOpenChange: setSummaryOpen
+              }
+            )
+          }
+        ),
+        !showSummaryChip && /* @__PURE__ */ jsx59(
+          PropertySelector,
+          {
+            properties,
+            onSelect: handleAddFilter,
+            open: propertySelectorOpen,
+            onOpenChange: setPropertySelectorOpen,
+            onAdvancedFilter: handleOpenAdvanced,
+            advancedFilterCount,
+            children: /* @__PURE__ */ jsx59(FilterBarButton, { iconOnly: true })
+          }
+        )
+      ] }) : (
+        /* ── DEFAULT MODE ────────────────────────────────────── */
+        /* @__PURE__ */ jsxs53(Fragment5, { children: [
+          /* @__PURE__ */ jsx59(
+            AdvancedPopover,
+            {
+              filters: filterState.advancedFilters,
+              properties,
+              onFiltersChange: handleAdvancedFiltersChange,
+              open: advancedOpen,
+              onOpenChange: setAdvancedOpen,
+              children: /* @__PURE__ */ jsx59(
+                "div",
                 {
-                  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__ */ jsx57(Icon34, { icon: faChevronLeftOutline3, size: "xs", className: "text-datepicker-header-nav" })
+                  className: showAdvancedChip ? "inline-flex" : "inline-flex w-0 overflow-hidden opacity-0 pointer-events-none",
+                  "aria-hidden": !showAdvancedChip || void 0,
+                  children: /* @__PURE__ */ jsx59(
+                    AdvancedChip,
+                    {
+                      count: filterState.advancedFilters.length,
+                      onClick: () => setAdvancedOpen(true),
+                      onClear: handleClearAdvanced
+                    }
+                  )
                 }
-              ),
-              /* @__PURE__ */ jsx57(
+              )
+            }
+          ),
+          filterState.basicFilters.map((filter) => {
+            const propDef = getPropertyDef(filter.propertyId);
+            if (!propDef) return null;
+            return /* @__PURE__ */ jsx59(
+              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)
+              },
+              filter.id
+            );
+          }),
+          /* @__PURE__ */ jsx59(
+            PropertySelector,
+            {
+              properties,
+              onSelect: handleAddFilter,
+              open: propertySelectorOpen,
+              onOpenChange: setPropertySelectorOpen,
+              onAdvancedFilter: handleOpenAdvanced,
+              advancedFilterCount,
+              children: totalCount > 0 ? /* @__PURE__ */ jsx59(
                 "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__ */ jsx57(Icon34, { icon: faChevronRightOutline3, size: "xs", className: "text-datepicker-header-nav" })
+                  className: "shrink-0 inline-flex items-center justify-center size-8 rounded-md border border-[var(--color-btn-outlined-neutral-border-default)] bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)] shadow-sm cursor-pointer transition-colors hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
+                  children: /* @__PURE__ */ jsx59(Icon37, { icon: faPlusOutline5, size: "sm", className: "text-[var(--color-foreground)]" })
                 }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs51("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx57("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx57(
-              "span",
-              {
-                className: "w-9 text-center text-xs font-regular leading-xs text-datepicker-header-weekday",
-                children: day
-              },
-              day
-            )) }),
-            /* @__PURE__ */ jsx57("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ jsx57("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ jsx57(
-              DatePickerDay,
-              {
-                date: day.date,
-                isOutside: day.isOutside
-              },
-              di
-            )) }, wi)) })
-          ] })
+              ) : /* @__PURE__ */ jsx59(FilterBarButton, {})
+            }
+          )
         ] })
-      ]
-    }
-  );
-});
-DatePickerCalendar.displayName = "DatePickerCalendar";
-var DatePickerSuggestions = React50.forwardRef(
-  ({ className, suggestions, formatDate = defaultFormatDate, ...props }, ref) => {
-    const { onSelect, mode } = useDatePickerContext();
-    const onValueChange = React50.useContext(DatePickerContext) ? void 0 : void 0;
-    const ctx = useDatePickerContext();
-    const handleClick = (suggestion) => {
-      const val = suggestion.getValue();
-      if (val instanceof Date) {
-        ctx.onSelect(val);
-      } else {
-        ctx.onSelect(val.from);
-        if (val.to) {
-          setTimeout(() => ctx.onSelect(val.to), 0);
-        }
-      }
-    };
-    const formatSuggestionDate = (suggestion) => {
-      const val = suggestion.getValue();
-      if (val instanceof Date) {
-        return formatDate(val);
-      }
-      const from = formatDate(val.from);
-      const to = val.to ? formatDate(val.to) : "";
-      return to ? `${from} - ${to}` : from;
-    };
-    return /* @__PURE__ */ jsxs51(
-      "div",
-      {
-        ref,
-        className: cn(
-          "flex flex-col border-l border-datepicker-border self-stretch shrink-0",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx57("div", { className: "pt-lg px-base", children: /* @__PURE__ */ jsx57("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ jsx57("span", { className: "flex-1 text-xs font-semibold leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
-          /* @__PURE__ */ jsx57("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ jsxs51(
-            "button",
-            {
-              type: "button",
-              onClick: () => handleClick(suggestion),
-              className: "flex items-center gap-sm p-base rounded-base hover:bg-datepicker-suggestion-hover transition-colors cursor-pointer text-left",
-              children: [
-                /* @__PURE__ */ jsx57("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
-                /* @__PURE__ */ jsx57("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
-              ]
-            },
-            i
-          )) })
-        ]
-      }
-    );
-  }
-);
-DatePickerSuggestions.displayName = "DatePickerSuggestions";
-var DatePickerFooter = React50.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx57(
-    "div",
-    {
-      ref,
-      className: cn(
-        "flex items-center justify-between p-lg",
-        "border-t border-datepicker-footer-border",
-        "bg-datepicker-bg",
-        className
       ),
-      ...props,
-      children
-    }
-  )
-);
-DatePickerFooter.displayName = "DatePickerFooter";
-var DatePickerPanel = React50.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx57(
-    "div",
-    {
-      ref,
-      className: cn("flex items-start", className),
-      ...props,
-      children
-    }
-  )
-);
-DatePickerPanel.displayName = "DatePickerPanel";
-var DatePickerRoot = PopoverPrimitive12.Root;
-var DatePickerTrigger = PopoverPrimitive12.Trigger;
-var DatePickerPopover = React50.forwardRef(({ className, sideOffset = 4, align = "start", children, ...props }, ref) => /* @__PURE__ */ jsx57(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ jsx57(
-  PopoverPrimitive12.Content,
-  {
-    ref,
-    sideOffset,
-    align,
-    className: cn(
-      "z-50",
-      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-      "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props,
-    children
-  }
-) }));
-DatePickerPopover.displayName = "DatePickerPopover";
-function getDefaultSuggestions(referenceDate) {
-  const now = referenceDate ?? /* @__PURE__ */ new Date();
-  const today = startOfDay(now);
-  const dayOfWeek = getWeekdayIndex(today);
-  const startOfThisWeek = new Date(today);
-  startOfThisWeek.setDate(today.getDate() - dayOfWeek);
-  const endOfThisWeek = new Date(startOfThisWeek);
-  endOfThisWeek.setDate(startOfThisWeek.getDate() + 6);
-  const startOfThisMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-  const endOfThisMonth = new Date(
-    today.getFullYear(),
-    today.getMonth() + 1,
-    0
-  );
-  const startOfThisYear = new Date(today.getFullYear(), 0, 1);
-  const endOfThisYear = new Date(today.getFullYear(), 11, 31);
-  const startOfLastWeek = new Date(startOfThisWeek);
-  startOfLastWeek.setDate(startOfThisWeek.getDate() - 7);
-  const endOfLastWeek = new Date(startOfThisWeek);
-  endOfLastWeek.setDate(startOfThisWeek.getDate() - 1);
-  const startOfLastMonth = new Date(
-    today.getFullYear(),
-    today.getMonth() - 1,
-    1
-  );
-  const endOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
-  const startOfLastYear = new Date(today.getFullYear() - 1, 0, 1);
-  const endOfLastYear = new Date(today.getFullYear() - 1, 11, 31);
-  return [
-    { label: "Today", getValue: () => today },
-    {
-      label: "This week",
-      getValue: () => ({ from: startOfThisWeek, to: endOfThisWeek })
-    },
-    {
-      label: "This month",
-      getValue: () => ({ from: startOfThisMonth, to: endOfThisMonth })
-    },
-    {
-      label: "This year",
-      getValue: () => ({ from: startOfThisYear, to: endOfThisYear })
-    },
-    {
-      label: "Last week",
-      getValue: () => ({ from: startOfLastWeek, to: endOfLastWeek })
-    },
-    {
-      label: "Last month",
-      getValue: () => ({ from: startOfLastMonth, to: endOfLastMonth })
-    },
-    {
-      label: "Last year",
-      getValue: () => ({ from: startOfLastYear, to: endOfLastYear })
-    }
-  ];
-}
+      totalCount > 0 && /* @__PURE__ */ jsx59(
+        "button",
+        {
+          type: "button",
+          onClick: handleClearAll,
+          className: "shrink-0 flex items-center gap-sm px-base py-sm min-h-[32px] max-h-[32px] rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
+          children: isMinimal ? /* @__PURE__ */ jsx59(Icon37, { icon: faXmarkOutline5, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ jsx59("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: "Clear" })
+        }
+      )
+    ] }),
+    actions && /* @__PURE__ */ jsx59(FilterBarRight, { className: "shrink-0 -ml-2xl pl-2xl relative z-10 bg-[linear-gradient(to_right,transparent_0px,var(--filter-bar-bg,var(--color-background,#fff))_24px)]", children: actions })
+  ] });
+};
+FilterSystem.displayName = "FilterSystem";
 export {
   AdvancedChip,
   AdvancedPopover,