@l3mpire/ui 2.12.0 → 2.13.0

package/dist/index.js

@@ -5131,7 +5131,6 @@ var OPERATORS_BY_TYPE = {
     "is on or before",
     "is on or after",
     "is between",
-    "is relative",
     "is empty",
     "is not empty"
   ],
@@ -5150,7 +5149,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",
@@ -5178,7 +5177,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")
@@ -5729,2285 +5727,2416 @@ var NumberRangeValueInput = ({
 NumberRangeValueInput.displayName = "NumberRangeValueInput";
 
 // src/components/ui/filter/value-inputs/date-value-input.tsx
+var React42 = __toESM(require("react"));
+
+// src/components/ui/date-picker.tsx
+var React41 = __toESM(require("react"));
+var PopoverPrimitive5 = __toESM(require("@radix-ui/react-popover"));
+var import_icons27 = require("@l3mpire/icons");
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var RELATIVE_DATE_PRESETS = [
-  { group: "Past", options: ["Today", "Yesterday", "Last 7 days", "Last 14 days", "Last 30 days", "Last 90 days"] },
-  { group: "Current", options: ["This week", "This month", "This quarter", "This year"] },
-  { group: "Future", options: ["Tomorrow", "Next 7 days", "Next 14 days", "Next 30 days", "Next week", "Next month", "Next quarter"] }
+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 DatePickerValueInput = ({
-  value,
-  onChange,
-  onSubmit,
-  className
-}) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    "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__ */ (0, import_jsx_runtime44.jsx)("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 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 DateRangeValueInput = ({
-  value,
-  onChange,
-  onSubmit,
-  className
-}) => {
-  const rangeVal = Array.isArray(value) ? value : [null, null];
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-base", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        "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
+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;
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-sm text-[var(--color-muted-foreground)]", children: "to" }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        "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
+        return m - 1;
+      });
+    }, []);
+    const goToNextMonth = React41.useCallback(() => {
+      setMonth((m) => {
+        if (m === 11) {
+          setYear((y) => y + 1);
+          return 0;
         }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
-  ] });
-};
-DateRangeValueInput.displayName = "DateRangeValueInput";
-var PresetTagsValueInput = ({
-  value,
-  onChange,
-  onSubmit,
-  className
-}) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: cn("flex flex-col gap-base p-base max-w-[280px]", className), children: RELATIVE_DATE_PRESETS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-col gap-xs", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] uppercase px-xs", children: group.group }),
-  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-wrap gap-xs", children: group.options.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        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__ */ (0, import_jsx_runtime44.jsx)(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      "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__ */ (0, import_jsx_runtime44.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col items-start pt-lg px-lg", className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-base w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons27.Icon, { icon: import_icons27.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          import_icons27.Icon,
+          {
+            icon: import_icons27.faArrowRightOutline,
+            size: "sm",
+            className: "shrink-0 text-datepicker-header-weekday"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons27.Icon, { icon: import_icons27.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__ */ (0, import_jsx_runtime44.jsxs)(
     "button",
     {
       type: "button",
-      onClick: () => {
-        onChange(preset);
-        onSubmit?.();
-      },
+      onClick: () => !isOutside && onSelect(date),
+      onMouseEnter: () => mode === "range" && setHoveredDate(date),
+      onMouseLeave: () => mode === "range" && setHoveredDate(void 0),
+      disabled: isOutside,
       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)]"
+        "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: preset
-    },
-    preset
-  )) })
-] }, group.group)) });
-PresetTagsValueInput.displayName = "PresetTagsValueInput";
-
-// src/components/ui/filter/value-inputs/select-value-input.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var SingleSelectValueInput = ({
-  value,
-  onChange,
-  onSubmit,
-  options,
-  className
-}) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cn("flex flex-col gap-xs p-base max-h-[250px] overflow-y-auto", className), children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-  "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__ */ (0, import_jsx_runtime45.jsx)("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__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("flex flex-col gap-xs p-base", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex flex-col max-h-[200px] overflow-y-auto", children: options.map((opt) => {
-      const isSelected = selected.includes(opt);
-      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-        "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__ */ (0, import_jsx_runtime45.jsx)(
-              "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__ */ (0, import_jsx_runtime45.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("path", { d: "M2 5L4 7L8 3", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
-          ]
-        },
-        opt
-      );
-    }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
-  ] });
-};
-MultiSelectValueInput.displayName = "MultiSelectValueInput";
-
-// src/components/ui/filter/value-inputs/relation-value-input.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var RelationValueInput = ({
-  value,
-  onChange,
-  onSubmit,
-  className
-}) => {
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") onSubmit?.();
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-      "input",
-      {
-        type: "text",
-        value: value ?? "",
-        onChange: (e) => onChange(e.target.value),
-        onKeyDown: handleKeyDown,
-        placeholder: "Search...",
-        autoFocus: true,
-        className: inputClasses
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
-  ] });
-};
-RelationValueInput.displayName = "RelationValueInput";
-
-// src/components/ui/filter/value-input.tsx
-var import_jsx_runtime47 = require("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__ */ (0, import_jsx_runtime47.jsx)(TextValueInput, { value, onChange, onSubmit, className });
-    case "NumberInput":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NumberValueInput, { value, onChange, onSubmit, className });
-    case "NumberRange":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NumberRangeValueInput, { value, onChange, onSubmit, className });
-    case "PresetTags":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PresetTagsValueInput, { value, onChange, onSubmit, className });
-    case "SingleSelect":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SingleSelectValueInput, { value, onChange, onSubmit, options, className });
-    case "MultiSelect":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MultiSelectValueInput, { value, onChange, onSubmit, options, className });
-    case "DatePicker":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DatePickerValueInput, { value, onChange, onSubmit, className });
-    case "DateRange":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DateRangeValueInput, { value, onChange, onSubmit, className });
-    case "RelationPicker":
-    case "MultiRelationPicker":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RelationValueInput, { value, onChange, onSubmit, className });
-    default:
-      return null;
-  }
+      children: [
+        date.getDate(),
+        isToday && !isOutside && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1.5 rounded-full bg-datepicker-day-today" })
+      ]
+    }
+  );
 };
-ValueInput.displayName = "ValueInput";
-
-// src/components/ui/filter/property-selector.tsx
-var React41 = __toESM(require("react"));
-var PopoverPrimitive5 = __toESM(require("@radix-ui/react-popover"));
-var import_icons27 = require("@l3mpire/icons");
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "h-px bg-[var(--color-dropdown-border)] mx-xs" }),
-  /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-    "button",
+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__ */ (0, import_jsx_runtime44.jsxs)(
+    "div",
     {
-      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)]",
+      ref,
+      className: cn("flex flex-col", className),
+      ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          import_icons27.Icon,
-          {
-            icon: import_icons27.faFilterOutline,
-            size: "sm",
-            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: [
-          count,
-          " ",
-          count === 1 ? "rule" : "rules"
+        header,
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-col gap-lg p-lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "text-base font-semibold leading-base text-datepicker-header-text", children: [
+              MONTH_NAMES[month],
+              " ",
+              year
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: goToPrevMonth,
+                  className: "flex items-center justify-center p-xs rounded-base hover:bg-datepicker-day-bg-hover transition-colors cursor-pointer",
+                  "aria-label": "Previous month",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons27.Icon, { icon: import_icons27.faChevronLeftOutline, size: "xs", className: "text-datepicker-header-nav" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: goToNextMonth,
+                  className: "flex items-center justify-center p-xs rounded-base hover:bg-datepicker-day-bg-hover transition-colors cursor-pointer",
+                  "aria-label": "Next month",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons27.Icon, { icon: import_icons27.faChevronRightOutline, size: "xs", className: "text-datepicker-header-nav" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              "span",
+              {
+                className: "w-9 text-center text-xs font-regular leading-xs text-datepicker-header-weekday",
+                children: day
+              },
+              day
+            )) }),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              DatePickerDay,
+              {
+                date: day.date,
+                isOutside: day.isOutside
+              },
+              di
+            )) }, wi)) })
+          ] })
         ] })
       ]
     }
-  )
-] });
-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(() => {
-    if (!open) {
-      setActiveGroup(null);
-      setSearch("");
-    }
-  }, [open]);
-  const groups = React41.useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    for (const prop of properties) {
-      const existing = map.get(prop.group);
-      if (existing) {
-        existing.count++;
+  );
+});
+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 {
-        map.set(prop.group, {
-          group: prop.group,
-          groupLabel: prop.groupLabel,
-          groupIcon: prop.icon,
-          count: 1
-        });
+        ctx.onSelect(val.from);
+        if (val.to) {
+          setTimeout(() => ctx.onSelect(val.to), 0);
+        }
       }
-    }
-    return Array.from(map.values());
-  }, [properties]);
-  const globalSearchResults = React41.useMemo(() => {
-    if (!search || activeGroup) return [];
-    const lower = search.toLowerCase();
-    return properties.filter((p) => p.label.toLowerCase().includes(lower));
-  }, [properties, search, activeGroup]);
-  const filteredGroups = React41.useMemo(() => {
-    if (!search || activeGroup) return groups;
-    const lower = search.toLowerCase();
-    return groups.filter(
-      (g) => g.groupLabel.toLowerCase().includes(lower) || properties.some(
-        (p) => p.group === g.group && p.label.toLowerCase().includes(lower)
-      )
-    );
-  }, [groups, properties, search, activeGroup]);
-  const filteredProperties = React41.useMemo(() => {
-    if (!activeGroup) return [];
-    const groupProps = properties.filter((p) => p.group === activeGroup);
-    if (!search) return groupProps;
-    const lower = search.toLowerCase();
-    return groupProps.filter((p) => p.label.toLowerCase().includes(lower));
-  }, [properties, activeGroup, search]);
-  const activeGroupInfo = groups.find((g) => g.group === activeGroup);
-  const showGlobalResults = search.length > 0 && !activeGroup && globalSearchResults.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(PopoverPrimitive5.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverPrimitive5.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverPrimitive5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-      PopoverPrimitive5.Content,
+    };
+    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__ */ (0, import_jsx_runtime44.jsxs)(
+      "div",
       {
-        sideOffset: 4,
-        align: "start",
-        onCloseAutoFocus: (e) => e.preventDefault(),
+        ref,
         className: cn(
-          "z-50 flex flex-col gap-xs overflow-clip p-xs",
-          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
-          "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",
-          "min-w-[230px]"
+          "flex flex-col border-l border-datepicker-border self-stretch shrink-0",
+          className
         ),
+        ...props,
         children: [
-          activeGroup === null ? (
-            /* ── Level 1: Search + Categories ───────────────────────── */
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                  import_icons27.Icon,
-                  {
-                    icon: import_icons27.faMagnifyingGlassOutline,
-                    size: "sm",
-                    className: "shrink-0 text-[var(--color-muted-foreground)]"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                  "input",
-                  {
-                    type: "text",
-                    value: search,
-                    onChange: (e) => setSearch(e.target.value),
-                    placeholder: "Search...",
-                    autoFocus: true,
-                    className: "flex-1 text-sm font-regular leading-sm text-[var(--color-foreground)] bg-transparent outline-none placeholder:text-[var(--color-muted-foreground)]"
-                  }
-                )
-              ] }),
-              showGlobalResults ? (
-                /* ── Global search results (flat property list) ─────── */
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: globalSearchResults.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      onSelect(prop);
-                      onOpenChange?.(false);
-                    },
-                    className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                        import_icons27.Icon,
-                        {
-                          icon: prop.icon,
-                          size: "sm",
-                          className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: prop.label }),
-                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: prop.groupLabel })
-                    ]
-                  },
-                  prop.id
-                )) })
-              ) : (
-                /* ── Group list ─────────────────────────────────────── */
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col", children: [
-                  filteredGroups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => {
-                        setActiveGroup(g.group);
-                        setSearch("");
-                      },
-                      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                          import_icons27.Icon,
-                          {
-                            icon: g.groupIcon,
-                            size: "sm",
-                            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: g.groupLabel }),
-                        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: g.count }),
-                        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                          import_icons27.Icon,
-                          {
-                            icon: import_icons27.faChevronRightOutline,
-                            size: "xs",
-                            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
-                          }
-                        )
-                      ]
-                    },
-                    g.group
-                  )),
-                  filteredGroups.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
-                ] })
-              )
-            ] })
-          ) : (
-            /* ── Level 2: Properties ─────────────────────────────────── */
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => {
-                    setActiveGroup(null);
-                    setSearch("");
-                  },
-                  className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                      import_icons27.Icon,
-                      {
-                        icon: import_icons27.faChevronLeftOutline,
-                        size: "sm",
-                        className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "flex-1 text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] text-left truncate", children: activeGroupInfo?.groupLabel })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                  import_icons27.Icon,
-                  {
-                    icon: import_icons27.faMagnifyingGlassOutline,
-                    size: "sm",
-                    className: "shrink-0 text-[var(--color-muted-foreground)]"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                  "input",
-                  {
-                    type: "text",
-                    value: search,
-                    onChange: (e) => setSearch(e.target.value),
-                    placeholder: "Search...",
-                    autoFocus: true,
-                    className: "flex-1 text-sm font-regular leading-sm text-[var(--color-foreground)] bg-transparent outline-none placeholder:text-[var(--color-muted-foreground)]"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: [
-                filteredProperties.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      onSelect(prop);
-                      onOpenChange?.(false);
-                    },
-                    className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                        import_icons27.Icon,
-                        {
-                          icon: prop.icon,
-                          size: "sm",
-                          className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime48.jsx)("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
-              ] })
-            ] })
-          ),
-          showAdvancedFooter && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            AdvancedFilterFooter,
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "pt-lg px-base", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "flex-1 text-xs font-semibold leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+            "button",
             {
-              onClick: handleAdvancedClick,
-              count: advancedFilterCount
-            }
-          )
+              type: "button",
+              onClick: () => handleClick(suggestion),
+              className: "flex items-center gap-sm p-base rounded-base hover:bg-datepicker-suggestion-hover transition-colors cursor-pointer text-left",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
+              ]
+            },
+            i
+          )) })
         ]
       }
-    ) })
-  ] });
-};
-PropertySelector.displayName = "PropertySelector";
-
-// src/components/ui/filter/kebab-menu.tsx
-var PopoverPrimitive6 = __toESM(require("@radix-ui/react-popover"));
-var import_icons28 = require("@l3mpire/icons");
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var KebabMenu = ({
-  onConvertToAdvanced,
-  onDelete,
-  open,
-  onOpenChange,
-  children
-}) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(PopoverPrimitive6.Root, { open, onOpenChange, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverPrimitive6.Trigger, { asChild: true, children }),
-  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-    PopoverPrimitive6.Content,
+    );
+  }
+);
+DatePickerSuggestions.displayName = "DatePickerSuggestions";
+var DatePickerFooter = React41.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "div",
     {
-      sideOffset: 4,
-      align: "end",
+      ref,
       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",
-        "data-[side=bottom]:slide-in-from-top-2",
-        "min-w-[210px]"
+        "flex items-center justify-between p-lg",
+        "border-t border-datepicker-footer-border",
+        "bg-datepicker-bg",
+        className
       ),
-      children: [
-        onConvertToAdvanced && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              onConvertToAdvanced();
-              onOpenChange?.(false);
-            },
-            className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                import_icons28.Icon,
-                {
-                  icon: import_icons28.faArrowRightOutline,
-                  size: "sm",
-                  className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)]", children: "Convert to advanced" })
-            ]
-          }
-        ),
-        onConvertToAdvanced && onDelete && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "h-px mx-base my-xs bg-[var(--color-border)]" }),
-        onDelete && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              onDelete();
-              onOpenChange?.(false);
-            },
-            className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                import_icons28.Icon,
-                {
-                  icon: import_icons28.faTrashOutline,
-                  size: "sm",
-                  className: "shrink-0 text-[var(--color-destructive)]"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-destructive)]", children: "Delete filter" })
-            ]
-          }
-        )
-      ]
+      ...props,
+      children
     }
-  ) })
-] });
-KebabMenu.displayName = "KebabMenu";
-
-// src/components/ui/filter/filter-editor.tsx
-var React42 = __toESM(require("react"));
-var PopoverPrimitive7 = __toESM(require("@radix-ui/react-popover"));
-var import_icons29 = require("@l3mpire/icons");
-var import_jsx_runtime50 = require("react/jsx-runtime");
-var FilterEditor = ({
-  propertyDef,
-  condition,
-  mode,
-  onUpdate,
-  onClose,
-  open,
-  onOpenChange,
-  children
-}) => {
-  const [view, setView] = React42.useState(
-    mode === "add" ? "value" : "operator"
-  );
-  const [localOperator, setLocalOperator] = React42.useState(
-    condition.operator
-  );
-  const [localValue, setLocalValue] = React42.useState(
-    condition.value
-  );
-  React42.useEffect(() => {
-    if (open) {
-      setView(mode === "add" ? "value" : "operator");
-      setLocalOperator(condition.operator);
-      setLocalValue(condition.value);
-    }
-  }, [open, mode, condition.operator, condition.value]);
-  const handleOperatorSelect = (op) => {
-    setLocalOperator(op);
-    if (isNoValueOperator(op)) {
-      onUpdate({ ...condition, operator: op, value: null });
-      onOpenChange?.(false);
-      onClose();
-    } else {
-      if (op !== localOperator) {
-        setLocalValue(null);
-      }
-      setView("value");
-    }
-  };
-  const handleSubmit = () => {
-    onUpdate({ ...condition, operator: localOperator, value: localValue });
-    onOpenChange?.(false);
-    onClose();
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(PopoverPrimitive7.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive7.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
-      PopoverPrimitive7.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 data-[state=closed]:zoom-out-95",
-          "data-[side=bottom]:slide-in-from-top-2",
-          "min-w-[240px]"
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-base px-base pt-base pb-xs border-b border-[var(--color-border)]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-              import_icons29.Icon,
-              {
-                icon: propertyDef.icon,
-                size: "sm",
-                className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: propertyDef.label }),
-            localOperator && view === "value" && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
-              "button",
-              {
-                type: "button",
-                onClick: () => setView("operator"),
-                className: "ml-auto text-xs font-regular text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] cursor-pointer transition-colors",
-                children: [
-                  localOperator,
-                  " \u25BE"
-                ]
-              }
-            )
-          ] }),
-          view === "operator" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "p-xs", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-            OperatorList,
-            {
-              dataType: propertyDef.type,
-              activeOperator: localOperator,
-              onSelect: handleOperatorSelect
-            }
-          ) }) : localOperator && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-            ValueInput,
-            {
-              dataType: propertyDef.type,
-              operator: localOperator,
-              value: localValue,
-              onChange: setLocalValue,
-              onSubmit: handleSubmit,
-              options: propertyDef.options
-            }
-          )
-        ]
-      }
-    ) })
-  ] });
-};
-FilterEditor.displayName = "FilterEditor";
-
-// src/components/ui/filter/interactive-filter-chip.tsx
-var React43 = __toESM(require("react"));
-var PopoverPrimitive8 = __toESM(require("@radix-ui/react-popover"));
-var import_jsx_runtime51 = require("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]}`;
+  )
+);
+DatePickerFooter.displayName = "DatePickerFooter";
+var DatePickerPanel = React41.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("flex items-start", className),
+      ...props,
+      children
     }
-    return value[0];
-  }
-  return String(value);
-}
-function getBadgeCount(value) {
-  if (Array.isArray(value) && value.length > 1 && typeof value[0] === "string") {
-    return value.length;
+  )
+);
+DatePickerPanel.displayName = "DatePickerPanel";
+var DatePickerRoot = PopoverPrimitive5.Root;
+var DatePickerTrigger = PopoverPrimitive5.Trigger;
+var DatePickerPopover = React41.forwardRef(({ className, sideOffset = 4, align = "start", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverPrimitive5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  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
   }
-  return void 0;
-}
-var SegmentPopover = ({
-  open,
-  onOpenChange,
-  trigger,
-  children,
-  align = "start",
-  minWidth = "240px"
-}) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(PopoverPrimitive8.Root, { open, onOpenChange, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverPrimitive8.Trigger, { asChild: true, children: trigger }),
-  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverPrimitive8.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    PopoverPrimitive8.Content,
+) }));
+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 },
     {
-      sideOffset: 4,
-      align,
-      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"
-      ),
-      style: { minWidth },
-      children
+      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 })
     }
-  ) })
-] });
-var InteractiveFilterChip = ({
-  propertyDef,
-  condition,
-  properties,
-  mode = "edit",
-  autoOpen = false,
-  onUpdate,
-  onPropertyChange,
-  onDelete,
-  onConvertToAdvanced,
+  ];
+}
+
+// src/components/ui/filter/value-inputs/date-value-input.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var RELATIVE_DATE_PRESETS = [
+  { group: "Past", options: ["Today", "Yesterday", "Last 7 days", "Last 14 days", "Last 30 days", "Last 90 days"] },
+  { group: "Current", options: ["This week", "This month", "This quarter", "This year"] },
+  { 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 [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(() => {
-    if (autoOpen && !autoOpenHandled.current && condition.operator && !isNoValueOperator(condition.operator)) {
-      autoOpenHandled.current = true;
-      setValueOpen(true);
-    }
-  }, [autoOpen, condition.operator]);
-  React43.useEffect(() => {
-    if (!operatorOpen && pendingValueOpen) {
-      setPendingValueOpen(false);
-      setValueOpen(true);
+  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;
     }
-  }, [operatorOpen, pendingValueOpen]);
-  const handleOperatorSelect = (op) => {
-    if (isNoValueOperator(op)) {
-      onUpdate({ ...condition, operator: op, value: null });
-      setOperatorOpen(false);
+    return value instanceof Date ? value : void 0;
+  }, [value, isRange]);
+  const handleValueChange = (v) => {
+    if (v instanceof Date) {
+      onChange(v);
+      if (!isRange) onSubmit?.();
     } else {
-      const resetValue = op !== condition.operator ? null : condition.value;
-      onUpdate({ ...condition, operator: op, value: resetValue });
-      setOperatorOpen(false);
-      if (resetValue == null) {
-        setPendingValueOpen(true);
+      const range = v;
+      if (range.from && range.to) {
+        onChange([range.from, range.to]);
+      } else if (range.from) {
+        onChange([range.from, range.from]);
       }
     }
   };
-  const handleValueChange = (val) => {
-    onUpdate({ ...condition, value: val });
-  };
-  const handleValueSubmit = () => {
-    setValueOpen(false);
-  };
-  const hasOperator = !!condition.operator;
-  const displayValue = formatFilterValue(condition.value);
-  const hasValue = hasOperator && displayValue != null;
-  const badgeCount = getBadgeCount(condition.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  const suggestions = React42.useMemo(() => getDefaultSuggestions(), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cn("flex flex-col", className), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    DatePicker,
+    {
+      mode: isRange ? "range" : "single",
+      value: pickerValue,
+      onValueChange: handleValueChange,
+      children: [
+        isRange && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DatePickerSelects, {}),
+        isRange ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(DatePickerPanel, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DatePickerCalendar, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DatePickerSuggestions, { suggestions })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DatePickerCalendar, {}),
+        isRange && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(DatePickerFooter, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+        ] })
+      ]
+    }
+  ) });
+};
+DateCalendarValueInput.displayName = "DateCalendarValueInput";
+var PresetTagsValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cn("flex flex-col gap-base p-base max-w-[280px]", className), children: RELATIVE_DATE_PRESETS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col gap-xs", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] uppercase px-xs", children: group.group }),
+  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex flex-wrap gap-xs", children: group.options.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    "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
+var import_icons28 = require("@l3mpire/icons");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var DynamicOptionRow = ({
+  option,
+  selected,
+  multi,
+  onClick
+}) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  "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__ */ (0, import_jsx_runtime46.jsx)(
+        "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__ */ (0, import_jsx_runtime46.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            "path",
+            {
+              d: "M2 5L4 7L8 3",
+              stroke: "white",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) })
+        }
+      ),
+      option.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        import_icons28.Icon,
+        {
+          icon: option.icon,
+          size: "sm",
+          className: "shrink-0 mt-[1px] text-[var(--color-interactive-text-primary-dark-default,var(--color-primary))]"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "flex-1 flex flex-col gap-2xs min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] truncate", children: option.label }),
+        option.description && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: option.description })
+      ] })
+    ]
+  }
+);
+var DynamicOptionsDivider = () => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("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__ */ (0, import_jsx_runtime46.jsxs)(
     "div",
     {
       className: cn(
-        "inline-flex items-center overflow-clip",
-        "bg-filter-chip-bg border border-filter-chip-border rounded-md shadow-sm",
+        "flex flex-col gap-xs p-base max-h-[280px] overflow-y-auto",
         className
       ),
       children: [
-        properties ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          PropertySelector,
-          {
-            properties,
-            onSelect: (prop) => {
-              onPropertyChange?.(prop);
-              setPropertyOpen(false);
-            },
-            open: propertyOpen,
-            onOpenChange: setPropertyOpen,
-            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              FilterChipSegment,
-              {
-                segmentType: "property",
-                hasBorder: true,
-                icon: propertyDef.icon,
-                label: propertyDef.label,
-                onClick: () => setPropertyOpen(true)
-              }
-            ) })
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          FilterChipSegment,
-          {
-            segmentType: "property",
-            hasBorder: true,
-            icon: propertyDef.icon,
-            label: propertyDef.label
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          SegmentPopover,
-          {
-            open: operatorOpen,
-            onOpenChange: setOperatorOpen,
-            minWidth: "180px",
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              FilterChipSegment,
-              {
-                segmentType: hasOperator ? "operator" : "placeholder",
-                hasBorder: true,
-                label: hasOperator ? condition.operator : "Select condition",
-                onClick: () => setOperatorOpen(true)
-              }
-            ) }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "p-xs", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              OperatorList,
-              {
-                dataType: propertyDef.type,
-                activeOperator: condition.operator,
-                onSelect: handleOperatorSelect
-              }
-            ) })
-          }
-        ),
-        hasOperator && condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          SegmentPopover,
-          {
-            open: valueOpen,
-            onOpenChange: setValueOpen,
-            minWidth: "240px",
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              FilterChipSegment,
-              {
-                segmentType: hasValue ? "value" : "placeholder",
-                hasBorder: true,
-                label: hasValue ? displayValue : "Enter value",
-                badgeCount,
-                onClick: () => setValueOpen(true)
-              }
-            ) }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              ValueInput,
-              {
-                dataType: propertyDef.type,
-                operator: condition.operator,
-                value: condition.value,
-                onChange: handleValueChange,
-                onSubmit: handleValueSubmit,
-                options: propertyDef.options
-              }
-            )
-          }
-        ),
-        hasOperator && condition.operator && isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          FilterChipSegment,
+        dynamicOptions?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          DynamicOptionRow,
           {
-            segmentType: "value",
-            hasBorder: true,
-            label: condition.operator
-          }
-        ),
-        hasOperator && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          KebabMenu,
+            option: opt,
+            selected: value === opt.value,
+            multi: false,
+            onClick: () => pick(opt.value)
+          },
+          opt.value
+        )),
+        dynamicOptions && dynamicOptions.length > 0 && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicOptionsDivider, {}),
+        options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          "button",
           {
-            open: kebabOpen,
-            onOpenChange: setKebabOpen,
-            onConvertToAdvanced,
-            onDelete,
-            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              FilterChipSegment,
-              {
-                segmentType: "button",
-                onKebabClick: (e) => {
-                  e.stopPropagation();
-                  setKebabOpen(true);
-                }
-              }
-            ) })
-          }
-        )
+            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__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+          },
+          opt
+        ))
       ]
     }
   );
 };
-InteractiveFilterChip.displayName = "InteractiveFilterChip";
-
-// src/components/ui/filter/filter-system.tsx
-var React49 = __toESM(require("react"));
-var import_icons34 = require("@l3mpire/icons");
+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__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("flex flex-col gap-xs p-base", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col max-h-[240px] overflow-y-auto", children: [
+      dynamicOptions?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        DynamicOptionRow,
+        {
+          option: opt,
+          selected: selected.includes(opt.value),
+          multi: true,
+          onClick: () => toggle(opt.value)
+        },
+        opt.value
+      )),
+      dynamicOptions && dynamicOptions.length > 0 && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DynamicOptionsDivider, {}),
+      options.map((opt) => {
+        const isSelected = selected.includes(opt);
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          "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__ */ (0, import_jsx_runtime46.jsx)(
+                "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__ */ (0, import_jsx_runtime46.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                    "path",
+                    {
+                      d: "M2 5L4 7L8 3",
+                      stroke: "white",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  ) })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+            ]
+          },
+          opt
+        );
+      })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+MultiSelectValueInput.displayName = "MultiSelectValueInput";
 
-// src/components/ui/filter/advanced-chip.tsx
-var React44 = __toESM(require("react"));
-var import_icons30 = require("@l3mpire/icons");
-var import_jsx_runtime52 = require("react/jsx-runtime");
-var btnBase = [
-  "flex items-center justify-center",
-  "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)] 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)]"
-];
-var AdvancedChip = React44.forwardRef(
-  ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: cn("inline-flex items-center", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
-      "button",
+// src/components/ui/filter/value-inputs/relation-value-input.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var RelationValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") onSubmit?.();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "input",
       {
-        ref,
-        type: "button",
-        onClick,
-        className: cn(
-          btnBase,
-          "gap-sm px-base py-sm min-w-[80px]",
-          "rounded-l-md -mr-px"
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Advanced filters" }),
-          count > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
-        ]
+        type: "text",
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder: "Search...",
+        autoFocus: true,
+        className: inputClasses
       }
     ),
-    onClear && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick: (e) => {
-          e.stopPropagation();
-          onClear();
-        },
-        className: cn(
-          btnBase,
-          "p-sm",
-          "rounded-r-md -ml-px"
-        ),
-        "aria-label": "Clear all advanced filters",
-        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons30.Icon, { icon: import_icons30.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" })
-      }
-    )
-  ] })
-);
-AdvancedChip.displayName = "AdvancedChip";
-
-// src/components/ui/filter/advanced-popover.tsx
-var React46 = __toESM(require("react"));
-var PopoverPrimitive10 = __toESM(require("@radix-ui/react-popover"));
-var import_icons32 = require("@l3mpire/icons");
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+RelationValueInput.displayName = "RelationValueInput";
 
-// src/components/ui/filter/advanced-row.tsx
-var React45 = __toESM(require("react"));
-var PopoverPrimitive9 = __toESM(require("@radix-ui/react-popover"));
-var import_icons31 = require("@l3mpire/icons");
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var selectBtnStyle = [
-  "flex items-center gap-base",
-  "px-base py-sm",
-  "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)]"
-];
-var AdvancedRow = ({
-  connector,
-  onConnectorToggle,
-  propertyDef,
-  condition,
-  properties,
-  onUpdate,
-  onPropertyChange,
-  onDelete
+// src/components/ui/filter/value-input.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var ValueInput = ({
+  dataType,
+  operator,
+  value,
+  onChange,
+  onSubmit,
+  options = [],
+  dynamicOptions,
+  className
 }) => {
-  const [operatorOpen, setOperatorOpen] = React45.useState(false);
-  const [propertyOpen, setPropertyOpen] = React45.useState(false);
-  const handleOperatorSelect = (op) => {
-    if (isNoValueOperator(op)) {
-      onUpdate({ ...condition, operator: op, value: null });
-    } else {
-      const resetValue = op !== condition.operator ? null : condition.value;
-      onUpdate({ ...condition, operator: op, value: resetValue });
-    }
-    setOperatorOpen(false);
-  };
-  const handleValueChange = (val) => {
-    onUpdate({ ...condition, value: val });
-  };
-  const displayValue = condition.value == null ? "" : typeof condition.value === "string" ? condition.value : String(condition.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
-      "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",
-          "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-          "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-base shadow-sm",
-          "cursor-pointer transition-colors text-xs font-semibold leading-xs text-[var(--color-foreground)]",
-          "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
-        ),
-        children: [
-          connector,
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons31.Icon, { icon: import_icons31.faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(PopoverPrimitive9.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons31.Icon, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate", children: [
-          propertyDef.groupLabel,
-          " > ",
-          propertyDef.label
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons31.Icon, { icon: import_icons31.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        PopoverPrimitive9.Content,
+  const inputType = getValueInputType(dataType, operator);
+  if (!inputType) return null;
+  switch (inputType) {
+    case "TextInput":
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TextValueInput, { value, onChange, onSubmit, className });
+    case "NumberInput":
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NumberValueInput, { value, onChange, onSubmit, className });
+    case "NumberRange":
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NumberRangeValueInput, { value, onChange, onSubmit, className });
+    case "SingleSelect":
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        SingleSelectValueInput,
         {
-          sideOffset: 4,
-          align: "start",
-          className: cn(
-            "z-50 flex flex-col p-xs overflow-clip max-h-[300px] overflow-y-auto",
-            "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-[200px]"
-          ),
-          children: properties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                onPropertyChange(p);
-                setPropertyOpen(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)]",
-                p.id === condition.propertyId && "bg-[var(--color-dropdown-item-hover)]"
-              ),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons31.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-[var(--color-dropdown-item-icon)]" }),
-                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] truncate", children: p.label })
-              ]
-            },
-            p.id
-          ))
+          value,
+          onChange,
+          onSubmit,
+          options,
+          dynamicOptions,
+          className
         }
-      ) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(PopoverPrimitive9.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons31.Icon, { icon: import_icons31.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        PopoverPrimitive9.Content,
+      );
+    case "MultiSelect":
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        MultiSelectValueInput,
         {
-          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__ */ (0, import_jsx_runtime53.jsx)(
-            OperatorList,
-            {
-              dataType: propertyDef.type,
-              activeOperator: condition.operator,
-              onSelect: handleOperatorSelect
-            }
-          )
+          value,
+          onChange,
+          onSubmit,
+          options,
+          dynamicOptions,
+          className
         }
-      ) })
-    ] }),
-    condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-      "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__ */ (0, import_jsx_runtime53.jsx)(
-      "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__ */ (0, import_jsx_runtime53.jsx)(import_icons31.Icon, { icon: import_icons31.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" })
-      }
-    )
-  ] });
+      );
+    case "DatePicker":
+    case "DateRange":
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        DateCalendarValueInput,
+        {
+          operator,
+          value,
+          onChange,
+          onSubmit,
+          className
+        }
+      );
+    case "RelationPicker":
+    case "MultiRelationPicker":
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RelationValueInput, { value, onChange, onSubmit, className });
+    default:
+      return null;
+  }
 };
-AdvancedRow.displayName = "AdvancedRow";
+ValueInput.displayName = "ValueInput";
 
-// src/components/ui/filter/advanced-popover.tsx
-var import_jsx_runtime54 = require("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,
+// src/components/ui/filter/property-selector.tsx
+var React43 = __toESM(require("react"));
+var PopoverPrimitive6 = __toESM(require("@radix-ui/react-popover"));
+var import_icons29 = require("@l3mpire/icons");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "h-px bg-[var(--color-dropdown-border)] mx-xs" }),
+  /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    "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__ */ (0, import_jsx_runtime49.jsx)(
+          import_icons29.Icon,
+          {
+            icon: import_icons29.faFilterOutline,
+            size: "sm",
+            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("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__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: [
+          count,
+          " ",
+          count === 1 ? "rule" : "rules"
+        ] })
+      ]
+    }
+  )
+] });
+var PropertySelector = ({
   properties,
-  onFiltersChange,
+  onSelect,
   open,
   onOpenChange,
-  children
+  children,
+  onAdvancedFilter,
+  advancedFilterCount = 0
 }) => {
-  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 handleAdvancedClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onAdvancedFilter?.();
   };
-  const toggleLogicOp = (filterId) => {
-    onFiltersChange(
-      filters.map(
-        (f) => f.id === filterId ? { ...f, logicOperator: (f.logicOperator ?? "and") === "and" ? "or" : "and" } : f
-      )
-    );
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(PopoverPrimitive10.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverPrimitive10.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-      PopoverPrimitive10.Content,
+  const showAdvancedFooter = !!onAdvancedFilter;
+  const [activeGroup, setActiveGroup] = React43.useState(null);
+  const [search, setSearch] = React43.useState("");
+  React43.useEffect(() => {
+    if (!open) {
+      setActiveGroup(null);
+      setSearch("");
+    }
+  }, [open]);
+  const groups = React43.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const prop of properties) {
+      const existing = map.get(prop.group);
+      if (existing) {
+        existing.count++;
+      } else {
+        map.set(prop.group, {
+          group: prop.group,
+          groupLabel: prop.groupLabel,
+          groupIcon: prop.icon,
+          count: 1
+        });
+      }
+    }
+    return Array.from(map.values());
+  }, [properties]);
+  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 = React43.useMemo(() => {
+    if (!search || activeGroup) return groups;
+    const lower = search.toLowerCase();
+    return groups.filter(
+      (g) => g.groupLabel.toLowerCase().includes(lower) || properties.some(
+        (p) => p.group === g.group && p.label.toLowerCase().includes(lower)
+      )
+    );
+  }, [groups, properties, search, activeGroup]);
+  const filteredProperties = React43.useMemo(() => {
+    if (!activeGroup) return [];
+    const groupProps = properties.filter((p) => p.group === activeGroup);
+    if (!search) return groupProps;
+    const lower = search.toLowerCase();
+    return groupProps.filter((p) => p.label.toLowerCase().includes(lower));
+  }, [properties, activeGroup, search]);
+  const activeGroupInfo = groups.find((g) => g.group === activeGroup);
+  const showGlobalResults = search.length > 0 && !activeGroup && globalSearchResults.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(PopoverPrimitive6.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverPrimitive6.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      PopoverPrimitive6.Content,
       {
         sideOffset: 4,
         align: "start",
-        collisionPadding: 16,
-        onOpenAutoFocus: (e) => e.preventDefault(),
+        onCloseAutoFocus: (e) => e.preventDefault(),
         className: cn(
-          "z-50 flex flex-col",
-          "bg-[var(--color-background)] rounded-md shadow-lg",
+          "z-50 flex flex-col gap-xs overflow-clip p-xs",
+          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
           "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))]"
+          "min-w-[230px]"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("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__ */ (0, import_jsx_runtime54.jsx)(
-                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__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                PropertySelector,
-                {
-                  properties,
-                  onSelect: handleAddFilter,
-                  open: draftPickerOpen,
-                  onOpenChange: setDraftPickerOpen,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+          activeGroup === null ? (
+            /* ── Level 1: Search + Categories ───────────────────────── */
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col gap-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                  import_icons29.Icon,
+                  {
+                    icon: import_icons29.faMagnifyingGlassOutline,
+                    size: "sm",
+                    className: "shrink-0 text-[var(--color-muted-foreground)]"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                  "input",
+                  {
+                    type: "text",
+                    value: search,
+                    onChange: (e) => setSearch(e.target.value),
+                    placeholder: "Search...",
+                    autoFocus: true,
+                    className: "flex-1 text-sm font-regular leading-sm text-[var(--color-foreground)] bg-transparent outline-none placeholder:text-[var(--color-muted-foreground)]"
+                  }
+                )
+              ] }),
+              showGlobalResults ? (
+                /* ── Global search results (flat property list) ─────── */
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: globalSearchResults.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      onSelect(prop);
+                      onOpenChange?.(false);
+                    },
+                    className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                        import_icons29.Icon,
+                        {
+                          icon: prop.icon,
+                          size: "sm",
+                          className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: prop.label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: prop.groupLabel })
+                    ]
+                  },
+                  prop.id
+                )) })
+              ) : (
+                /* ── Group list ─────────────────────────────────────── */
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col", children: [
+                  filteredGroups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                     "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)]"
-                      ),
+                      onClick: () => {
+                        setActiveGroup(g.group);
+                        setSearch("");
+                      },
+                      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                          import_icons32.Icon,
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                          import_icons29.Icon,
+                          {
+                            icon: g.groupIcon,
+                            size: "sm",
+                            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: g.groupLabel }),
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: g.count }),
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                          import_icons29.Icon,
                           {
-                            icon: import_icons32.faChevronDownOutline,
+                            icon: import_icons29.faChevronRightOutline,
                             size: "xs",
-                            className: "shrink-0 text-[var(--color-foreground)]"
+                            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                           }
                         )
                       ]
-                    }
-                  )
-                }
+                    },
+                    g.group
+                  )),
+                  filteredGroups.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
+                ] })
               )
             ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-              PropertySelector,
-              {
-                properties,
-                onSelect: handleAddFilter,
-                open: addSelectorOpen,
-                onOpenChange: setAddSelectorOpen,
-                children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("button", { type: "button", className: cn(outlinedBtn), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons32.Icon, { icon: import_icons32.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
-                  "Add filter"
-                ] })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: handleClearAll,
-                className: "text-sm font-semibold leading-sm text-[var(--color-foreground)] cursor-pointer transition-colors hover:opacity-70 px-base py-sm",
-                children: "Clear all filters"
-              }
-            )
-          ] })
+          ) : (
+            /* ── Level 2: Properties ─────────────────────────────────── */
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col gap-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setActiveGroup(null);
+                    setSearch("");
+                  },
+                  className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                      import_icons29.Icon,
+                      {
+                        icon: import_icons29.faChevronLeftOutline,
+                        size: "sm",
+                        className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "flex-1 text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] text-left truncate", children: activeGroupInfo?.groupLabel })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                  import_icons29.Icon,
+                  {
+                    icon: import_icons29.faMagnifyingGlassOutline,
+                    size: "sm",
+                    className: "shrink-0 text-[var(--color-muted-foreground)]"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                  "input",
+                  {
+                    type: "text",
+                    value: search,
+                    onChange: (e) => setSearch(e.target.value),
+                    placeholder: "Search...",
+                    autoFocus: true,
+                    className: "flex-1 text-sm font-regular leading-sm text-[var(--color-foreground)] bg-transparent outline-none placeholder:text-[var(--color-muted-foreground)]"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: [
+                filteredProperties.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      onSelect(prop);
+                      onOpenChange?.(false);
+                    },
+                    className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                        import_icons29.Icon,
+                        {
+                          icon: prop.icon,
+                          size: "sm",
+                          className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("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__ */ (0, import_jsx_runtime49.jsx)("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
+              ] })
+            ] })
+          ),
+          showAdvancedFooter && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            AdvancedFilterFooter,
+            {
+              onClick: handleAdvancedClick,
+              count: advancedFilterCount
+            }
+          )
         ]
       }
     ) })
   ] });
 };
-AdvancedPopover.displayName = "AdvancedPopover";
+PropertySelector.displayName = "PropertySelector";
 
-// src/components/ui/filter/summary-chip.tsx
-var React47 = __toESM(require("react"));
-var PopoverPrimitive11 = __toESM(require("@radix-ui/react-popover"));
-var import_icons33 = require("@l3mpire/icons");
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var SummaryChip = ({
-  count,
-  filters,
-  properties,
-  onFiltersChange,
-  onClearAll,
-  children,
-  className,
-  open: openProp,
-  onOpenChange
-}) => {
-  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__ */ (0, import_jsx_runtime55.jsxs)(PopoverPrimitive11.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PopoverPrimitive11.Trigger, { asChild: true, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "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
+// src/components/ui/filter/kebab-menu.tsx
+var PopoverPrimitive7 = __toESM(require("@radix-ui/react-popover"));
+var import_icons30 = require("@l3mpire/icons");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var KebabMenu = ({
+  onConvertToAdvanced,
+  onDelete,
+  open,
+  onOpenChange,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(PopoverPrimitive7.Root, { open, onOpenChange, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive7.Trigger, { asChild: true, children }),
+  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    PopoverPrimitive7.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",
+        "data-[side=bottom]:slide-in-from-top-2",
+        "min-w-[210px]"
+      ),
+      children: [
+        onConvertToAdvanced && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onConvertToAdvanced();
+              onOpenChange?.(false);
+            },
+            className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                import_icons30.Icon,
+                {
+                  icon: import_icons30.faArrowRightOutline,
+                  size: "sm",
+                  className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)]", children: "Convert to advanced" })
+            ]
+          }
         ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-            import_icons33.Icon,
-            {
-              icon: import_icons33.faSlidersOutline,
-              size: "sm",
-              className: "shrink-0 text-[var(--color-foreground)]"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
-          count > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
-        ]
+        onConvertToAdvanced && onDelete && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "h-px mx-base my-xs bg-[var(--color-border)]" }),
+        onDelete && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onDelete();
+              onOpenChange?.(false);
+            },
+            className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                import_icons30.Icon,
+                {
+                  icon: import_icons30.faTrashOutline,
+                  size: "sm",
+                  className: "shrink-0 text-[var(--color-destructive)]"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-destructive)]", children: "Delete filter" })
+            ]
+          }
+        )
+      ]
+    }
+  ) })
+] });
+KebabMenu.displayName = "KebabMenu";
+
+// src/components/ui/filter/filter-editor.tsx
+var React44 = __toESM(require("react"));
+var PopoverPrimitive8 = __toESM(require("@radix-ui/react-popover"));
+var import_icons31 = require("@l3mpire/icons");
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var FilterEditor = ({
+  propertyDef,
+  condition,
+  mode,
+  onUpdate,
+  onClose,
+  open,
+  onOpenChange,
+  children
+}) => {
+  const [view, setView] = React44.useState(
+    mode === "add" ? "value" : "operator"
+  );
+  const [localOperator, setLocalOperator] = React44.useState(
+    condition.operator
+  );
+  const [localValue, setLocalValue] = React44.useState(
+    condition.value
+  );
+  React44.useEffect(() => {
+    if (open) {
+      setView(mode === "add" ? "value" : "operator");
+      setLocalOperator(condition.operator);
+      setLocalValue(condition.value);
+    }
+  }, [open, mode, condition.operator, condition.value]);
+  const handleOperatorSelect = (op) => {
+    setLocalOperator(op);
+    if (isNoValueOperator(op)) {
+      onUpdate({ ...condition, operator: op, value: null });
+      onOpenChange?.(false);
+      onClose();
+    } else {
+      if (op !== localOperator) {
+        setLocalValue(null);
       }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
-      PopoverPrimitive11.Content,
+      setView("value");
+    }
+  };
+  const handleSubmit = () => {
+    onUpdate({ ...condition, operator: localOperator, value: localValue });
+    onOpenChange?.(false);
+    onClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(PopoverPrimitive8.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverPrimitive8.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverPrimitive8.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      PopoverPrimitive8.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(520px,calc(100vw-32px))]"
+          "min-w-[240px]"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("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__ */ (0, import_jsx_runtime55.jsx)(
-                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__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-                PropertySelector,
-                {
-                  properties,
-                  onSelect: handleAddFilter,
-                  open: draftPickerOpen,
-                  onOpenChange: setDraftPickerOpen,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
-                    "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__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-                          import_icons33.Icon,
-                          {
-                            icon: import_icons33.faChevronDownOutline,
-                            size: "xs",
-                            className: "shrink-0 text-[var(--color-foreground)]"
-                          }
-                        )
-                      ]
-                    }
-                  )
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-              PropertySelector,
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-base px-base pt-base pb-xs border-b border-[var(--color-border)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              import_icons31.Icon,
               {
-                properties,
-                onSelect: handleAddFilter,
-                open: addSelectorOpen,
-                onOpenChange: setAddSelectorOpen,
-                children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
-                  "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__ */ (0, import_jsx_runtime55.jsx)(import_icons33.Icon, { icon: import_icons33.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
-                      "Add filter"
-                    ]
-                  }
-                )
+                icon: propertyDef.icon,
+                size: "sm",
+                className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
               }
             ),
-            filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: propertyDef.label }),
+            localOperator && view === "value" && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
               "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"
+                onClick: () => setView("operator"),
+                className: "ml-auto text-xs font-regular text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] cursor-pointer transition-colors",
+                children: [
+                  localOperator,
+                  " \u25BE"
+                ]
               }
             )
-          ] })
-        ]
-      }
-    ) })
-  ] });
-};
-SummaryChip.displayName = "SummaryChip";
-
-// src/components/ui/filter/use-filter-bar-mode.ts
-var React48 = __toESM(require("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");
+          ] }),
+          view === "operator" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "p-xs", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            OperatorList,
+            {
+              dataType: propertyDef.type,
+              activeOperator: localOperator,
+              onSelect: handleOperatorSelect
+            }
+          ) }) : localOperator && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            ValueInput,
+            {
+              dataType: propertyDef.type,
+              operator: localOperator,
+              value: localValue,
+              onChange: setLocalValue,
+              onSubmit: handleSubmit,
+              options: propertyDef.options,
+              dynamicOptions: propertyDef.dynamicOptions
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+};
+FilterEditor.displayName = "FilterEditor";
+
+// src/components/ui/filter/interactive-filter-chip.tsx
+var React45 = __toESM(require("react"));
+var PopoverPrimitive9 = __toESM(require("@radix-ui/react-popover"));
+var import_jsx_runtime52 = require("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"
     });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [ref, override, breakpoint]);
-  return override ?? mode;
+  }
+  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);
 }
-
-// src/components/ui/filter/filter-system.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var FilterSystem = ({
-  properties,
-  filterState,
-  onFilterStateChange,
-  sortFields,
-  mode: modeOverride,
-  breakpoint,
+function getBadgeCount(value) {
+  if (Array.isArray(value) && value.length > 1 && typeof value[0] === "string") {
+    return value.length;
+  }
+  return void 0;
+}
+var SegmentPopover = ({
+  open,
+  onOpenChange,
+  trigger,
   children,
-  actions,
+  align = "start",
+  minWidth = "240px"
+}) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(PopoverPrimitive9.Root, { open, onOpenChange, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PopoverPrimitive9.Trigger, { asChild: true, children: trigger }),
+  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    PopoverPrimitive9.Content,
+    {
+      sideOffset: 4,
+      align,
+      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"
+      ),
+      style: { minWidth },
+      children
+    }
+  ) })
+] });
+var InteractiveFilterChip = ({
+  propertyDef,
+  condition,
+  properties,
+  mode = "edit",
+  autoOpen = false,
+  onUpdate,
+  onPropertyChange,
+  onDelete,
+  onConvertToAdvanced,
   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;
+  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);
     }
-    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);
+  }, [autoOpen, condition.operator]);
+  React45.useEffect(() => {
+    if (!operatorOpen && pendingValueOpen) {
+      setPendingValueOpen(false);
+      setValueOpen(true);
     }
-  };
-  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);
+  }, [operatorOpen, pendingValueOpen]);
+  const handleOperatorSelect = (op) => {
+    if (isNoValueOperator(op)) {
+      onUpdate({ ...condition, operator: op, value: null });
+      setOperatorOpen(false);
+    } else {
+      const resetValue = op !== condition.operator ? null : condition.value;
+      onUpdate({ ...condition, operator: op, value: resetValue });
+      setOperatorOpen(false);
+      if (resetValue == null) {
+        setPendingValueOpen(true);
+      }
     }
   };
-  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 handleValueChange = (val) => {
+    onUpdate({ ...condition, value: val });
   };
-  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 handleValueSubmit = () => {
+    setValueOpen(false);
   };
-  const advancedFilterCount = filterState.advancedFilters.length;
-  const showAdvancedChip = hasAdvanced || advancedOpen;
-  const showSummaryChip = totalCount > 0 || summaryOpen;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(FilterBar, { ref: containerRef, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(FilterBarLeft, { className: "flex-nowrap flex-1 min-w-0 overflow-x-auto scrollbar-none outline-none [&>*]:shrink-0", children: [
-      children,
-      sortFields && filterState.sort && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-        SortButton,
-        {
-          fields: sortFields,
-          activeField: filterState.sort.field,
-          direction: filterState.sort.direction,
-          onChange: handleSortChange,
-          iconOnly: isMinimal
-        }
+  const hasOperator = !!condition.operator;
+  const displayValue = formatFilterValue(condition.value);
+  const hasValue = hasOperator && displayValue != null;
+  const badgeCount = getBadgeCount(condition.value);
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center overflow-clip",
+        "bg-filter-chip-bg border border-filter-chip-border rounded-md shadow-sm",
+        className
       ),
-      isMinimal ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-          "div",
-          {
-            className: showSummaryChip ? "inline-flex" : "inline-flex w-0 overflow-hidden opacity-0 pointer-events-none",
-            "aria-hidden": !showSummaryChip || void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              SummaryChip,
-              {
-                count: totalCount,
-                filters: allFilters,
-                properties,
-                onFiltersChange: (filters) => {
-                  onFilterStateChange({
-                    ...filterState,
-                    basicFilters: filters,
-                    advancedFilters: []
-                  });
-                },
-                onClearAll: handleClearAll,
-                open: summaryOpen,
-                onOpenChange: setSummaryOpen
-              }
-            )
-          }
-        ),
-        !showSummaryChip && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      children: [
+        properties ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           PropertySelector,
           {
             properties,
-            onSelect: handleAddFilter,
-            open: propertySelectorOpen,
-            onOpenChange: setPropertySelectorOpen,
-            onAdvancedFilter: handleOpenAdvanced,
-            advancedFilterCount,
-            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FilterBarButton, { iconOnly: true })
+            onSelect: (prop) => {
+              onPropertyChange?.(prop);
+              setPropertyOpen(false);
+            },
+            open: propertyOpen,
+            onOpenChange: setPropertyOpen,
+            children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              FilterChipSegment,
+              {
+                segmentType: "property",
+                hasBorder: true,
+                icon: propertyDef.icon,
+                label: propertyDef.label,
+                onClick: () => setPropertyOpen(true)
+              }
+            ) })
           }
-        )
-      ] }) : (
-        /* ── DEFAULT MODE ────────────────────────────────────── */
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-            AdvancedPopover,
+        ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          FilterChipSegment,
+          {
+            segmentType: "property",
+            hasBorder: true,
+            icon: propertyDef.icon,
+            label: propertyDef.label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          SegmentPopover,
+          {
+            open: operatorOpen,
+            onOpenChange: setOperatorOpen,
+            minWidth: "180px",
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              FilterChipSegment,
+              {
+                segmentType: hasOperator ? "operator" : "placeholder",
+                hasBorder: true,
+                label: hasOperator ? condition.operator : "Select condition",
+                onClick: () => setOperatorOpen(true)
+              }
+            ) }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "p-xs", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              OperatorList,
+              {
+                dataType: propertyDef.type,
+                activeOperator: condition.operator,
+                onSelect: handleOperatorSelect
+              }
+            ) })
+          }
+        ),
+        hasOperator && condition.operator && !isNoValueOperator(condition.operator) && (() => {
+          const inputType = getValueInputType(propertyDef.type, condition.operator);
+          const dateWide = inputType === "DatePicker" || inputType === "DateRange";
+          return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            SegmentPopover,
             {
-              filters: filterState.advancedFilters,
-              properties,
-              onFiltersChange: handleAdvancedFiltersChange,
-              open: advancedOpen,
-              onOpenChange: setAdvancedOpen,
-              children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                "div",
+              open: valueOpen,
+              onOpenChange: setValueOpen,
+              minWidth: dateWide ? "auto" : "240px",
+              trigger: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                FilterChipSegment,
                 {
-                  className: showAdvancedChip ? "inline-flex" : "inline-flex w-0 overflow-hidden opacity-0 pointer-events-none",
-                  "aria-hidden": !showAdvancedChip || void 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                    AdvancedChip,
-                    {
-                      count: filterState.advancedFilters.length,
-                      onClick: () => setAdvancedOpen(true),
-                      onClear: handleClearAdvanced
-                    }
-                  )
+                  segmentType: hasValue ? "value" : "placeholder",
+                  hasBorder: true,
+                  label: hasValue ? displayValue : "Enter value",
+                  badgeCount,
+                  onClick: () => setValueOpen(true)
+                }
+              ) }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                ValueInput,
+                {
+                  dataType: propertyDef.type,
+                  operator: condition.operator,
+                  value: condition.value,
+                  onChange: handleValueChange,
+                  onSubmit: handleValueSubmit,
+                  options: propertyDef.options,
+                  dynamicOptions: propertyDef.dynamicOptions
                 }
               )
             }
-          ),
-          filterState.basicFilters.map((filter) => {
-            const propDef = getPropertyDef(filter.propertyId);
-            if (!propDef) return null;
-            return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              InteractiveFilterChip,
+          );
+        })(),
+        hasOperator && condition.operator && isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          FilterChipSegment,
+          {
+            segmentType: "value",
+            hasBorder: true,
+            label: condition.operator
+          }
+        ),
+        hasOperator && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          KebabMenu,
+          {
+            open: kebabOpen,
+            onOpenChange: setKebabOpen,
+            onConvertToAdvanced,
+            onDelete,
+            children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              FilterChipSegment,
               {
-                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__ */ (0, import_jsx_runtime56.jsx)(
-            PropertySelector,
-            {
-              properties,
-              onSelect: handleAddFilter,
-              open: propertySelectorOpen,
-              onOpenChange: setPropertySelectorOpen,
-              onAdvancedFilter: handleOpenAdvanced,
-              advancedFilterCount,
-              children: totalCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                "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__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: import_icons34.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" })
+                segmentType: "button",
+                onKebabClick: (e) => {
+                  e.stopPropagation();
+                  setKebabOpen(true);
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FilterBarButton, {})
-            }
-          )
-        ] })
-      ),
-      totalCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: handleClearAll,
-          className: "shrink-0 flex items-center gap-sm px-base py-sm min-h-[32px] max-h-[32px] rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
-          children: isMinimal ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: import_icons34.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: "Clear" })
-        }
-      )
-    ] }),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(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";
+InteractiveFilterChip.displayName = "InteractiveFilterChip";
 
-// src/components/ui/date-picker.tsx
-var React50 = __toESM(require("react"));
-var PopoverPrimitive12 = __toESM(require("@radix-ui/react-popover"));
-var import_icons35 = require("@l3mpire/icons");
-var import_jsx_runtime57 = require("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/filter-system.tsx
+var React51 = __toESM(require("react"));
+var import_icons36 = require("@l3mpire/icons");
+
+// src/components/ui/filter/advanced-chip.tsx
+var React46 = __toESM(require("react"));
+var import_icons32 = require("@l3mpire/icons");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var btnBase = [
+  "flex items-center justify-center",
+  "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)] 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)]"
 ];
-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;
+var AdvancedChip = React46.forwardRef(
+  ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("inline-flex items-center", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick,
+        className: cn(
+          btnBase,
+          "gap-sm px-base py-sm min-w-[80px]",
+          "rounded-l-md -mr-px"
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Advanced filters" }),
+          count > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
+        ]
       }
-      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;
-        }
-        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 = React50.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__ */ (0, import_jsx_runtime57.jsx)(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-      "div",
+    ),
+    onClear && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      "button",
       {
-        ref,
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onClear();
+        },
         className: cn(
-          "flex flex-col overflow-clip",
-          "bg-datepicker-bg border border-datepicker-border rounded-md shadow-lg",
-          className
+          btnBase,
+          "p-sm",
+          "rounded-r-md -ml-px"
         ),
-        ...props,
-        children
+        "aria-label": "Clear all advanced filters",
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons32.Icon, { icon: import_icons32.faXmarkOutline, size: "sm", className: "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__ */ (0, import_jsx_runtime57.jsx)(
-    "div",
-    {
-      ref,
-      className: cn("flex flex-col items-start pt-lg px-lg", className),
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-base w-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons35.Icon, { icon: import_icons35.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          import_icons35.Icon,
-          {
-            icon: import_icons35.faArrowRightOutline,
-            size: "sm",
-            className: "shrink-0 text-datepicker-header-weekday"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons35.Icon, { icon: import_icons35.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__ */ (0, import_jsx_runtime57.jsxs)(
-    "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__ */ (0, import_jsx_runtime57.jsx)("span", { className: "absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1.5 rounded-full bg-datepicker-day-today" })
-      ]
-    }
-  );
-};
-var DatePickerCalendar = 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
-      });
-    }
-    for (let d = 1; d <= daysInMonth; d++) {
-      days.push({ date: new Date(year, month, d), isOutside: false });
+AdvancedChip.displayName = "AdvancedChip";
+
+// src/components/ui/filter/advanced-popover.tsx
+var React48 = __toESM(require("react"));
+var PopoverPrimitive11 = __toESM(require("@radix-ui/react-popover"));
+var import_icons34 = require("@l3mpire/icons");
+
+// src/components/ui/filter/advanced-row.tsx
+var React47 = __toESM(require("react"));
+var PopoverPrimitive10 = __toESM(require("@radix-ui/react-popover"));
+var import_icons33 = require("@l3mpire/icons");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var selectBtnStyle = [
+  "flex items-center gap-base",
+  "px-base py-sm",
+  "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)]"
+];
+var AdvancedRow = ({
+  connector,
+  onConnectorToggle,
+  propertyDef,
+  condition,
+  properties,
+  onUpdate,
+  onPropertyChange,
+  onDelete
+}) => {
+  const [operatorOpen, setOperatorOpen] = React47.useState(false);
+  const [propertyOpen, setPropertyOpen] = React47.useState(false);
+  const handleOperatorSelect = (op) => {
+    if (isNoValueOperator(op)) {
+      onUpdate({ ...condition, operator: op, value: null });
+    } else {
+      const resetValue = op !== condition.operator ? null : condition.value;
+      onUpdate({ ...condition, operator: op, value: resetValue });
     }
-    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
+    setOperatorOpen(false);
+  };
+  const handleValueChange = (val) => {
+    onUpdate({ ...condition, value: val });
+  };
+  const displayValue = condition.value == null ? "" : typeof condition.value === "string" ? condition.value : String(condition.value);
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+      "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",
+          "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
+          "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-base shadow-sm",
+          "cursor-pointer transition-colors text-xs font-semibold leading-xs text-[var(--color-foreground)]",
+          "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
         ),
-        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__ */ (0, import_jsx_runtime57.jsxs)(
-    "div",
-    {
-      ref,
-      className: cn("flex flex-col", className),
-      ...props,
-      children: [
-        header,
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-lg p-lg", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "text-base font-semibold leading-base text-datepicker-header-text", children: [
-              MONTH_NAMES[month],
-              " ",
-              year
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                "button",
+        children: [
+          connector,
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons33.Icon, { icon: import_icons33.faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(PopoverPrimitive10.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverPrimitive10.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons33.Icon, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate", children: [
+          propertyDef.groupLabel,
+          " > ",
+          propertyDef.label
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons33.Icon, { icon: import_icons33.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        PopoverPrimitive10.Content,
+        {
+          sideOffset: 4,
+          align: "start",
+          className: cn(
+            "z-50 flex flex-col p-xs overflow-clip max-h-[300px] overflow-y-auto",
+            "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-[200px]"
+          ),
+          children: properties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onPropertyChange(p);
+                setPropertyOpen(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)]",
+                p.id === condition.propertyId && "bg-[var(--color-dropdown-item-hover)]"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons33.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-[var(--color-dropdown-item-icon)]" }),
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] truncate", children: p.label })
+              ]
+            },
+            p.id
+          ))
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(PopoverPrimitive10.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverPrimitive10.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons33.Icon, { icon: import_icons33.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        PopoverPrimitive10.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__ */ (0, import_jsx_runtime54.jsx)(
+            OperatorList,
+            {
+              dataType: propertyDef.type,
+              activeOperator: condition.operator,
+              onSelect: handleOperatorSelect
+            }
+          )
+        }
+      ) })
+    ] }),
+    condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      "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__ */ (0, import_jsx_runtime54.jsx)(
+      "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__ */ (0, import_jsx_runtime54.jsx)(import_icons33.Icon, { icon: import_icons33.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" })
+      }
+    )
+  ] });
+};
+AdvancedRow.displayName = "AdvancedRow";
+
+// src/components/ui/filter/advanced-popover.tsx
+var import_jsx_runtime55 = require("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] = React48.useState(false);
+  const [draftPickerOpen, setDraftPickerOpen] = React48.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__ */ (0, import_jsx_runtime55.jsxs)(PopoverPrimitive11.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PopoverPrimitive11.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+      PopoverPrimitive11.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__ */ (0, import_jsx_runtime55.jsxs)("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__ */ (0, import_jsx_runtime55.jsx)(
+                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__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                PropertySelector,
+                {
+                  properties,
+                  onSelect: handleAddFilter,
+                  open: draftPickerOpen,
+                  onOpenChange: setDraftPickerOpen,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+                    "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__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                          import_icons34.Icon,
+                          {
+                            icon: import_icons34.faChevronDownOutline,
+                            size: "xs",
+                            className: "shrink-0 text-[var(--color-foreground)]"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+              PropertySelector,
+              {
+                properties,
+                onSelect: handleAddFilter,
+                open: addSelectorOpen,
+                onOpenChange: setAddSelectorOpen,
+                children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("button", { type: "button", className: cn(outlinedBtn), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons34.Icon, { icon: import_icons34.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
+                  "Add filter"
+                ] })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handleClearAll,
+                className: "text-sm font-semibold leading-sm text-[var(--color-foreground)] cursor-pointer transition-colors hover:opacity-70 px-base py-sm",
+                children: "Clear all filters"
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+AdvancedPopover.displayName = "AdvancedPopover";
+
+// src/components/ui/filter/summary-chip.tsx
+var React49 = __toESM(require("react"));
+var PopoverPrimitive12 = __toESM(require("@radix-ui/react-popover"));
+var import_icons35 = require("@l3mpire/icons");
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var SummaryChip = ({
+  count,
+  filters,
+  properties,
+  onFiltersChange,
+  onClearAll,
+  children,
+  className,
+  open: openProp,
+  onOpenChange
+}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = React49.useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const setOpen = (v) => {
+    if (!isControlled) setUncontrolledOpen(v);
+    onOpenChange?.(v);
+  };
+  const [addSelectorOpen, setAddSelectorOpen] = React49.useState(false);
+  const [draftPickerOpen, setDraftPickerOpen] = React49.useState(false);
+  const 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__ */ (0, import_jsx_runtime56.jsxs)(PopoverPrimitive12.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverPrimitive12.Trigger, { asChild: true, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "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
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            import_icons35.Icon,
+            {
+              icon: import_icons35.faSlidersOutline,
+              size: "sm",
+              className: "shrink-0 text-[var(--color-foreground)]"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
+          count > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+      PopoverPrimitive12.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(520px,calc(100vw-32px))]"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("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__ */ (0, import_jsx_runtime56.jsx)(
+                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__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                PropertySelector,
+                {
+                  properties,
+                  onSelect: handleAddFilter,
+                  open: draftPickerOpen,
+                  onOpenChange: setDraftPickerOpen,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                    "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__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                          import_icons35.Icon,
+                          {
+                            icon: import_icons35.faChevronDownOutline,
+                            size: "xs",
+                            className: "shrink-0 text-[var(--color-foreground)]"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              PropertySelector,
+              {
+                properties,
+                onSelect: handleAddFilter,
+                open: addSelectorOpen,
+                onOpenChange: setAddSelectorOpen,
+                children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                  "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__ */ (0, import_jsx_runtime56.jsx)(import_icons35.Icon, { icon: import_icons35.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
+                      "Add filter"
+                    ]
+                  }
+                )
+              }
+            ),
+            filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              "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"
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+SummaryChip.displayName = "SummaryChip";
+
+// src/components/ui/filter/use-filter-bar-mode.ts
+var React50 = __toESM(require("react"));
+var DEFAULT_BREAKPOINT = 600;
+function useFilterBarMode(ref, override, breakpoint = DEFAULT_BREAKPOINT) {
+  const [mode, setMode] = React50.useState("default");
+  React50.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
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var FilterSystem = ({
+  properties,
+  filterState,
+  onFilterStateChange,
+  sortFields,
+  mode: modeOverride,
+  breakpoint,
+  children,
+  actions,
+  className
+}) => {
+  const containerRef = React51.useRef(null);
+  const mode = useFilterBarMode(containerRef, modeOverride, breakpoint);
+  const [propertySelectorOpen, setPropertySelectorOpen] = React51.useState(false);
+  const [advancedOpen, setAdvancedOpen] = React51.useState(false);
+  const [summaryOpen, setSummaryOpen] = React51.useState(false);
+  const [pendingFilterId, setPendingFilterId] = React51.useState(null);
+  const allFilters = [...filterState.basicFilters, ...filterState.advancedFilters];
+  const totalCount = allFilters.length;
+  const 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]
+    });
+  };
+  const handleUpdateFilter = (updated) => {
+    onFilterStateChange({
+      ...filterState,
+      basicFilters: filterState.basicFilters.map(
+        (f) => f.id === updated.id ? updated : f
+      )
+    });
+    if (pendingFilterId === updated.id) {
+      setPendingFilterId(null);
+    }
+  };
+  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);
+    }
+  };
+  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__ */ (0, import_jsx_runtime57.jsxs)(FilterBar, { ref: containerRef, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(FilterBarLeft, { className: "flex-nowrap flex-1 min-w-0 overflow-x-auto scrollbar-none outline-none [&>*]:shrink-0", children: [
+      children,
+      sortFields && filterState.sort && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        SortButton,
+        {
+          fields: sortFields,
+          activeField: filterState.sort.field,
+          direction: filterState.sort.direction,
+          onChange: handleSortChange,
+          iconOnly: isMinimal
+        }
+      ),
+      isMinimal ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          "div",
+          {
+            className: showSummaryChip ? "inline-flex" : "inline-flex w-0 overflow-hidden opacity-0 pointer-events-none",
+            "aria-hidden": !showSummaryChip || void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              SummaryChip,
+              {
+                count: totalCount,
+                filters: allFilters,
+                properties,
+                onFiltersChange: (filters) => {
+                  onFilterStateChange({
+                    ...filterState,
+                    basicFilters: filters,
+                    advancedFilters: []
+                  });
+                },
+                onClearAll: handleClearAll,
+                open: summaryOpen,
+                onOpenChange: setSummaryOpen
+              }
+            )
+          }
+        ),
+        !showSummaryChip && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          PropertySelector,
+          {
+            properties,
+            onSelect: handleAddFilter,
+            open: propertySelectorOpen,
+            onOpenChange: setPropertySelectorOpen,
+            onAdvancedFilter: handleOpenAdvanced,
+            advancedFilterCount,
+            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FilterBarButton, { iconOnly: true })
+          }
+        )
+      ] }) : (
+        /* ── DEFAULT MODE ────────────────────────────────────── */
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            AdvancedPopover,
+            {
+              filters: filterState.advancedFilters,
+              properties,
+              onFiltersChange: handleAdvancedFiltersChange,
+              open: advancedOpen,
+              onOpenChange: setAdvancedOpen,
+              children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                "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__ */ (0, import_jsx_runtime57.jsx)(import_icons35.Icon, { icon: import_icons35.faChevronLeftOutline, 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__ */ (0, import_jsx_runtime57.jsx)(
+                    AdvancedChip,
+                    {
+                      count: filterState.advancedFilters.length,
+                      onClick: () => setAdvancedOpen(true),
+                      onClear: handleClearAdvanced
+                    }
+                  )
                 }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              )
+            }
+          ),
+          filterState.basicFilters.map((filter) => {
+            const propDef = getPropertyDef(filter.propertyId);
+            if (!propDef) return null;
+            return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              InteractiveFilterChip,
+              {
+                propertyDef: propDef,
+                condition: filter,
+                properties,
+                mode: pendingFilterId === filter.id ? "add" : "edit",
+                autoOpen: pendingFilterId === filter.id,
+                onUpdate: handleUpdateFilter,
+                onPropertyChange: (newProp) => handlePropertyChange(filter.id, newProp),
+                onDelete: () => handleDeleteFilter(filter.id),
+                onConvertToAdvanced: () => handleConvertToAdvanced(filter.id)
+              },
+              filter.id
+            );
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            PropertySelector,
+            {
+              properties,
+              onSelect: handleAddFilter,
+              open: propertySelectorOpen,
+              onOpenChange: setPropertySelectorOpen,
+              onAdvancedFilter: handleOpenAdvanced,
+              advancedFilterCount,
+              children: totalCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 "button",
                 {
                   type: "button",
-                  onClick: goToNextMonth,
-                  className: "flex items-center justify-center p-xs rounded-base hover:bg-datepicker-day-bg-hover transition-colors cursor-pointer",
-                  "aria-label": "Next month",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons35.Icon, { icon: import_icons35.faChevronRightOutline, 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__ */ (0, import_jsx_runtime57.jsx)(import_icons36.Icon, { icon: import_icons36.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" })
                 }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-              "span",
-              {
-                className: "w-9 text-center text-xs font-regular leading-xs text-datepicker-header-weekday",
-                children: day
-              },
-              day
-            )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-              DatePickerDay,
-              {
-                date: day.date,
-                isOutside: day.isOutside
-              },
-              di
-            )) }, wi)) })
-          ] })
+              ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(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__ */ (0, import_jsx_runtime57.jsxs)(
-      "div",
-      {
-        ref,
-        className: cn(
-          "flex flex-col border-l border-datepicker-border self-stretch shrink-0",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "pt-lg px-base", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "flex-1 text-xs font-semibold leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-            "button",
-            {
-              type: "button",
-              onClick: () => handleClick(suggestion),
-              className: "flex items-center gap-sm p-base rounded-base hover:bg-datepicker-suggestion-hover transition-colors cursor-pointer text-left",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("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__ */ (0, import_jsx_runtime57.jsx)(
-    "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__ */ (0, import_jsx_runtime57.jsx)(
-    "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__ */ (0, import_jsx_runtime57.jsx)(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-  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__ */ (0, import_jsx_runtime57.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleClearAll,
+          className: "shrink-0 flex items-center gap-sm px-base py-sm min-h-[32px] max-h-[32px] rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
+          children: isMinimal ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons36.Icon, { icon: import_icons36.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: "Clear" })
+        }
+      )
+    ] }),
+    actions && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(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";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AdvancedChip,