@flanksource/clicky-ui 0.2.2 → 0.2.4

package/dist/components/FilterBar.cjs

@@ -0,0 +1,2120 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const FilterPill = require("../data/FilterPill.cjs");
+const Icon = require("../data/Icon.cjs");
+const utils = require("../lib/utils.cjs");
+const button = require("./button.cjs");
+const DateTimePicker = require("./DateTimePicker.cjs");
+const MultiSelect = require("./MultiSelect.cjs");
+const RangeSlider = require("./RangeSlider.cjs");
+const select = require("./select.cjs");
+const TimeRange = require("./TimeRange.cjs");
+const UiSearch = require("../icons/components/UiSearch.cjs");
+const UiFilter = require("../icons/components/UiFilter.cjs");
+const UiClose = require("../icons/components/UiClose.cjs");
+const UiChevronUp = require("../icons/components/UiChevronUp.cjs");
+const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
+const UiChevronRight = require("../icons/components/UiChevronRight.cjs");
+const FILTER_INPUT_DEBOUNCE_MS = 500;
+const FILTER_BAR_GAP_PX = 8;
+const FILTER_BAR_OVERFLOW_TRIGGER_ESTIMATE_PX = 44;
+const FilterBarContext = react.createContext({
+  autoSubmit: true
+});
+function FilterBar({
+  search,
+  filters,
+  timeRange,
+  dateRange,
+  children,
+  leading,
+  trailing,
+  className,
+  autoSubmit = true,
+  onApply,
+  applyLabel = "Apply",
+  isPending = false,
+  overflowMode = "responsive"
+}) {
+  const hasRangeControls = Boolean(timeRange || dateRange);
+  const showApply = !autoSubmit && !!onApply;
+  const contextValue = react.useMemo(() => ({ autoSubmit }), [autoSubmit]);
+  const allFilters = filters ?? [];
+  const responsiveOverflow = overflowMode === "responsive" && allFilters.length > 0;
+  const filterListRef = react.useRef(null);
+  const overflowTriggerRef = react.useRef(null);
+  const filterNodeRefs = react.useRef(/* @__PURE__ */ new Map());
+  const filterWidthCache = react.useRef(/* @__PURE__ */ new Map());
+  const filterKeys = react.useMemo(
+    () => allFilters.map((filter) => filter.key).join("\0"),
+    [allFilters]
+  );
+  const [visibleFilterCount, setVisibleFilterCount] = react.useState(allFilters.length);
+  const allFiltersRef = react.useRef(allFilters);
+  const responsiveOverflowRef = react.useRef(responsiveOverflow);
+  allFiltersRef.current = allFilters;
+  responsiveOverflowRef.current = responsiveOverflow;
+  react.useLayoutEffect(() => {
+    setVisibleFilterCount(allFiltersRef.current.length);
+  }, [filterKeys]);
+  const measureOverflow = react.useCallback(() => {
+    var _a;
+    const current = allFiltersRef.current;
+    if (!responsiveOverflowRef.current) {
+      setVisibleFilterCount(current.length);
+      return;
+    }
+    const filterList = filterListRef.current;
+    if (!filterList) return;
+    const availableWidth = Math.floor(filterList.getBoundingClientRect().width);
+    if (availableWidth <= 0) return;
+    const widths = current.map((filter) => {
+      const node = filterNodeRefs.current.get(filter.key);
+      const measured = (node == null ? void 0 : node.getBoundingClientRect().width) ?? 0;
+      if (measured > 0) {
+        const width = Math.ceil(measured);
+        filterWidthCache.current.set(filter.key, width);
+        return width;
+      }
+      return filterWidthCache.current.get(filter.key) ?? estimateFilterWidth(filter);
+    });
+    const triggerWidth = Math.ceil(
+      ((_a = overflowTriggerRef.current) == null ? void 0 : _a.getBoundingClientRect().width) ?? FILTER_BAR_OVERFLOW_TRIGGER_ESTIMATE_PX
+    );
+    const triggerGap = triggerWidth > 0 ? FILTER_BAR_GAP_PX : 0;
+    const allFiltersWidth = sumFilterWidths(widths);
+    const nextVisible = allFiltersWidth <= availableWidth ? current.length : calculateVisibleFilterCount(
+      widths,
+      Math.max(0, availableWidth - triggerWidth - triggerGap)
+    );
+    setVisibleFilterCount((prev) => prev === nextVisible ? prev : nextVisible);
+  }, []);
+  react.useLayoutEffect(() => {
+    measureOverflow();
+  }, [measureOverflow]);
+  react.useEffect(() => {
+    if (!responsiveOverflow) return;
+    const filterList = filterListRef.current;
+    const trigger = overflowTriggerRef.current;
+    const ResizeObserverCtor = typeof ResizeObserver === "undefined" ? null : ResizeObserver;
+    if (!ResizeObserverCtor) {
+      window.addEventListener("resize", measureOverflow);
+      measureOverflow();
+      return () => window.removeEventListener("resize", measureOverflow);
+    }
+    const observer = new ResizeObserverCtor(() => measureOverflow());
+    if (filterList) observer.observe(filterList);
+    if (trigger) observer.observe(trigger);
+    window.addEventListener("resize", measureOverflow);
+    measureOverflow();
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", measureOverflow);
+    };
+  }, [measureOverflow, responsiveOverflow]);
+  const inlineFilters = responsiveOverflow ? allFilters.slice(0, Math.min(visibleFilterCount, allFilters.length)) : allFilters;
+  const overflowFilters = responsiveOverflow ? allFilters.slice(Math.min(visibleFilterCount, allFilters.length)) : [];
+  const activeOverflowCount = overflowFilters.filter(isFilterBarFilterActive).length;
+  const setFilterNode = react.useCallback((key, node) => {
+    if (!node) {
+      filterNodeRefs.current.delete(key);
+      return;
+    }
+    filterNodeRefs.current.set(key, node);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(FilterBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex flex-nowrap items-center gap-2 overflow-visible rounded-lg border border-input bg-background px-2 py-1.5 shadow-sm",
+        overflowMode === "wrap" && "flex-wrap",
+        className
+      ),
+      children: [
+        leading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: leading }),
+        search && /* @__PURE__ */ jsxRuntime.jsx(SearchField, { search }),
+        children,
+        allFilters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: filterListRef,
+            "data-filter-bar-list": true,
+            className: utils.cn(
+              "flex min-w-0 items-center gap-2",
+              overflowMode === "wrap" ? "flex-wrap" : "flex-1"
+            ),
+            children: inlineFilters.map((filter, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: (node) => setFilterNode(filter.key, node),
+                "data-filter-bar-item": filter.key,
+                className: "min-w-0 shrink-0",
+                children: renderFilterField(filter, !search && index === 0)
+              },
+              filter.key
+            ))
+          }
+        ),
+        responsiveOverflow && overflowFilters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          OverflowFiltersMenu,
+          {
+            triggerRef: overflowTriggerRef,
+            filters: overflowFilters,
+            activeHidden: activeOverflowCount,
+            ...onApply ? { onApply } : {}
+          }
+        ),
+        (hasRangeControls || trailing || showApply) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex shrink-0 flex-nowrap items-center gap-2", children: [
+          dateRange && /* @__PURE__ */ jsxRuntime.jsx(RangeControlButton, { kind: "date", label: "Date range", ...dateRange }),
+          timeRange && /* @__PURE__ */ jsxRuntime.jsx(RangeControlButton, { kind: "time", label: "Time range", ...timeRange }),
+          trailing,
+          showApply && /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              type: "button",
+              variant: "default",
+              size: "sm",
+              disabled: isPending,
+              onClick: onApply,
+              children: isPending ? "Loading…" : applyLabel
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+function FilterBarFilterPanel({
+  filter,
+  chrome = "full",
+  autoSubmit = true
+}) {
+  const contextValue = react.useMemo(() => ({ autoSubmit }), [autoSubmit]);
+  return /* @__PURE__ */ jsxRuntime.jsx(FilterBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarFilterPanelContent, { filter, chrome }) });
+}
+function FilterBarFilterPanelContent({
+  filter,
+  chrome = "full"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    filter.kind === "lookup" && /* @__PURE__ */ jsxRuntime.jsx(LookupFilterField, { filter, grow: true }),
+    filter.kind === "lookup-multi" && /* @__PURE__ */ jsxRuntime.jsx(LookupMultiFilterField, { filter, grow: true }),
+    filter.kind === "multi" && /* @__PURE__ */ jsxRuntime.jsx(MultiFilterPanel, { filter, chrome }),
+    filter.kind === "nested-multi" && /* @__PURE__ */ jsxRuntime.jsx(NestedMultiFilterPanel, { filter, chrome }),
+    filter.kind === "select-multi" && /* @__PURE__ */ jsxRuntime.jsx(SelectMultiFilterField, { filter, grow: true }),
+    filter.kind === "number" && /* @__PURE__ */ jsxRuntime.jsx(NumberFilterPanel, { filter, chrome }),
+    filter.kind === "enum" && /* @__PURE__ */ jsxRuntime.jsx(EnumFilterField, { filter, grow: true }),
+    filter.kind === "boolean" && /* @__PURE__ */ jsxRuntime.jsx(BooleanFilterField, { filter }),
+    filter.kind === "text" && /* @__PURE__ */ jsxRuntime.jsx(TextFilterField, { filter, grow: true })
+  ] });
+}
+function renderFilterField(filter, grow) {
+  if (filter.kind === "lookup") {
+    return /* @__PURE__ */ jsxRuntime.jsx(LookupFilterField, { filter, grow });
+  }
+  if (filter.kind === "lookup-multi") {
+    return /* @__PURE__ */ jsxRuntime.jsx(LookupMultiFilterField, { filter, grow });
+  }
+  if (filter.kind === "multi") {
+    return /* @__PURE__ */ jsxRuntime.jsx(MultiFilterField, { filter, grow });
+  }
+  if (filter.kind === "nested-multi") {
+    return /* @__PURE__ */ jsxRuntime.jsx(NestedMultiFilterField, { filter, grow });
+  }
+  if (filter.kind === "select-multi") {
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectMultiFilterField, { filter, grow });
+  }
+  if (filter.kind === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsx(NumberFilterField, { filter, grow });
+  }
+  if (filter.kind === "enum") {
+    return /* @__PURE__ */ jsxRuntime.jsx(EnumFilterField, { filter, grow });
+  }
+  if (filter.kind === "boolean") {
+    return /* @__PURE__ */ jsxRuntime.jsx(BooleanFilterField, { filter });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(TextFilterField, { filter, grow });
+}
+function OverflowFiltersMenu({
+  triggerRef,
+  filters,
+  activeHidden,
+  onApply
+}) {
+  const rootRef = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  const [stagedValues, setStagedValues] = react.useState({});
+  const hasHidden = filters.length > 0;
+  const hiddenFilterKeys = react.useMemo(
+    () => filters.map((filter) => filter.key).join("\0"),
+    [filters]
+  );
+  const openOverflowMenu = react.useCallback(() => {
+    setStagedValues(createFilterValueMap(filters));
+    setOpen(true);
+  }, [filters]);
+  const closeOverflowMenu = react.useCallback(() => {
+    setStagedValues(createFilterValueMap(filters));
+    setOpen(false);
+  }, [filters]);
+  useDismissablePopup(open, rootRef, triggerRef, closeOverflowMenu);
+  react.useEffect(() => {
+    if (!hasHidden) closeOverflowMenu();
+  }, [closeOverflowMenu, hasHidden]);
+  react.useEffect(() => {
+    if (!open) return;
+    setStagedValues(createFilterValueMap(filters));
+  }, [hiddenFilterKeys, open]);
+  const stagedFilters = filters.map(
+    (filter) => filterWithStagedValue(
+      filter,
+      stagedValues[filter.key] ?? filterBarFilterValue(filter),
+      (next) => setStagedValues((current) => ({
+        ...current,
+        [filter.key]: next
+      }))
+    )
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: utils.cn("relative shrink-0", !hasHidden && "invisible pointer-events-none"),
+      "aria-hidden": !hasHidden || void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          button.Button,
+          {
+            ref: triggerRef,
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            "aria-label": "More filters",
+            "aria-haspopup": "dialog",
+            "aria-expanded": hasHidden ? open : false,
+            tabIndex: hasHidden ? 0 : -1,
+            title: hasHidden ? "More filters" : void 0,
+            onClick: () => {
+              if (!hasHidden) return;
+              if (open) {
+                closeOverflowMenu();
+              } else {
+                openOverflowMenu();
+              }
+            },
+            className: utils.cn(
+              "h-8 min-w-0 gap-1.5 px-2 text-xs font-normal",
+              activeHidden > 0 && "border-primary/40 text-primary"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiFilter.UiFilter, className: "text-[14px]" }),
+              activeHidden > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-muted px-1.5 text-[10px] font-medium text-muted-foreground", children: activeHidden })
+            ]
+          }
+        ),
+        hasHidden && open && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-label": "Overflow filters",
+            className: "absolute right-0 top-[calc(100%+0.375rem)] z-50 w-[min(34rem,calc(100vw-2rem))] overflow-visible rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/5",
+            onClick: (event) => event.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2 px-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Filters" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "rounded px-1.5 py-0.5 text-xs text-primary transition-colors hover:bg-accent focus:bg-accent focus:outline-none disabled:text-muted-foreground",
+                      onClick: () => stagedFilters.forEach(clearFilterBarFilter),
+                      disabled: stagedFilters.every((filter) => !isFilterBarFilterActive(filter)),
+                      children: "Clear all"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Close overflow filters",
+                      title: "Close",
+                      className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+                      onClick: closeOverflowMenu,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "text-sm" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border/70 rounded-md border border-border/70", children: stagedFilters.map((filter) => {
+                const active = isFilterBarFilterActive(filter);
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    "data-overflow-filter-row": filter.key,
+                    className: "grid h-12 grid-cols-[minmax(7rem,10rem)_auto_minmax(0,1fr)_auto] items-center gap-2 overflow-visible p-2",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "label",
+                        {
+                          htmlFor: filterInputId(filter),
+                          className: "min-w-0 truncate text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+                          title: filter.description ?? filter.label,
+                          children: filter.label
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "=" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 overflow-visible", children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarContext.Provider, { value: { autoSubmit: false }, children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarKeyValueControl, { filter }) }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": `Clear ${filter.label}`,
+                          title: `Clear ${filter.label}`,
+                          className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none disabled:text-muted-foreground/40",
+                          onClick: () => clearFilterBarFilter(filter),
+                          disabled: !active,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "text-sm" })
+                        }
+                      )
+                    ]
+                  },
+                  filter.key
+                );
+              }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex justify-end gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-8 px-3 text-xs",
+                    onClick: closeOverflowMenu,
+                    children: "Close"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    type: "button",
+                    variant: "default",
+                    size: "sm",
+                    className: "h-8 px-3 text-xs",
+                    onClick: () => {
+                      applyStagedFilterValues(filters, stagedValues);
+                      onApply == null ? void 0 : onApply();
+                      setOpen(false);
+                    },
+                    children: "Apply"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function FilterBarKeyValueControl({ filter }) {
+  if (filter.kind === "text") {
+    return /* @__PURE__ */ jsxRuntime.jsx(TextFilterValueControl, { filter });
+  }
+  if (filter.kind === "lookup") {
+    return /* @__PURE__ */ jsxRuntime.jsx(LookupFilterValueControl, { filter });
+  }
+  if (filter.kind === "lookup-multi") {
+    return /* @__PURE__ */ jsxRuntime.jsx(LookupMultiFilterValueControl, { filter });
+  }
+  if (filter.kind === "enum") {
+    return /* @__PURE__ */ jsxRuntime.jsx(EnumFilterValueControl, { filter });
+  }
+  if (filter.kind === "boolean") {
+    return /* @__PURE__ */ jsxRuntime.jsx(BooleanFilterValueControl, { filter });
+  }
+  if (filter.kind === "select-multi") {
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectMultiFilterValueControl, { filter });
+  }
+  if (filter.kind === "multi") {
+    return /* @__PURE__ */ jsxRuntime.jsx(MultiFilterField, { filter, grow: true });
+  }
+  if (filter.kind === "nested-multi") {
+    return /* @__PURE__ */ jsxRuntime.jsx(NestedMultiFilterField, { filter, grow: true });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(NumberFilterField, { filter, grow: true });
+}
+function filterInputId(filter) {
+  return `filterbar-overflow-${filter.key}`;
+}
+function valueInputClassName(disabled) {
+  return utils.cn(
+    "h-8 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring",
+    disabled && "cursor-not-allowed opacity-60"
+  );
+}
+function TextFilterValueControl({ filter }) {
+  const [draft, setDraft] = useDebouncedTextDraft(filter.value, filter.onChange);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      id: filterInputId(filter),
+      type: "text",
+      "aria-label": filter.label,
+      className: valueInputClassName(filter.disabled),
+      placeholder: filter.placeholder ?? "Filter...",
+      value: draft,
+      disabled: filter.disabled,
+      onChange: (event) => setDraft(event.target.value)
+    }
+  );
+}
+function LookupFilterValueControl({ filter }) {
+  const [draft, setDraft] = useDebouncedTextDraft(filter.value, filter.onChange);
+  const listId = `${filter.key}-overflow-lookup-options`;
+  if (filter.inputType === "date") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DateTimePicker.DateTimePicker,
+      {
+        id: filterInputId(filter),
+        "aria-label": filter.label,
+        className: "w-full",
+        inputClassName: valueInputClassName(filter.disabled),
+        buttonClassName: "right-1",
+        placeholder: filter.placeholder ?? "Filter...",
+        value: draft,
+        list: listId,
+        disabled: filter.disabled,
+        onChange: setDraft
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        id: filterInputId(filter),
+        type: filter.inputType === "number" ? "number" : "text",
+        "aria-label": filter.label,
+        className: valueInputClassName(filter.disabled),
+        placeholder: filter.placeholder ?? "Filter...",
+        value: draft,
+        list: listId,
+        disabled: filter.disabled,
+        onChange: (event) => setDraft(event.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: listId, children: filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      "option",
+      {
+        value: option.value,
+        label: option.label ?? option.value,
+        disabled: option.disabled
+      },
+      option.value
+    )) })
+  ] });
+}
+function LookupMultiFilterValueControl({ filter }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MultiSelect.MultiSelect,
+    {
+      options: filter.options.map((option) => ({
+        value: option.value,
+        label: option.label ?? option.value,
+        ...option.disabled !== void 0 ? { disabled: option.disabled } : {},
+        ...option.title !== void 0 ? { title: option.title } : {}
+      })),
+      value: filter.value,
+      onChange: filter.onChange,
+      placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+      ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {},
+      triggerClassName: "h-8 w-full rounded-md border border-input bg-background px-2 text-sm shadow-none",
+      menuClassName: "left-auto right-0"
+    }
+  );
+}
+function EnumFilterValueControl({ filter }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    select.Select,
+    {
+      id: filterInputId(filter),
+      "aria-label": filter.label,
+      className: "h-8 w-full rounded-md border border-input bg-background px-2 text-sm shadow-none",
+      value: filter.value,
+      placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+      disabled: filter.disabled,
+      onChange: (event) => filter.onChange(event.target.value),
+      options: filter.options.map((option) => ({
+        value: option.value,
+        label: option.label ?? option.value
+      }))
+    }
+  );
+}
+function BooleanFilterValueControl({ filter }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      id: filterInputId(filter),
+      type: "checkbox",
+      "aria-label": filter.label,
+      className: "h-4 w-4 accent-primary",
+      checked: filter.value,
+      disabled: filter.disabled,
+      onChange: (event) => filter.onChange(event.target.checked)
+    }
+  ) });
+}
+function SelectMultiFilterValueControl({ filter }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MultiSelect.MultiSelect,
+    {
+      options: filter.options,
+      value: filter.value,
+      onChange: filter.onChange,
+      placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+      ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {},
+      triggerClassName: "h-8 w-full rounded-md border border-input bg-background px-2 text-sm shadow-none",
+      menuClassName: "left-auto right-0"
+    }
+  );
+}
+function FilterBarRangePanel({
+  kind,
+  label,
+  from = "",
+  to = "",
+  onApply,
+  presets,
+  timeEnabled,
+  timeZone,
+  timeZones,
+  fromPlaceholder,
+  toPlaceholder,
+  emptyLabel
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-72 p-3 text-popover-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(
+    TimeRange.TimeRange,
+    {
+      kind,
+      label,
+      align: "left",
+      from,
+      to,
+      onApply,
+      ...presets ? { presets } : {},
+      ...timeEnabled !== void 0 ? { timeEnabled } : {},
+      ...timeZone ? { timeZone } : {},
+      ...timeZones ? { timeZones } : {},
+      ...fromPlaceholder ? { fromPlaceholder } : {},
+      ...toPlaceholder ? { toPlaceholder } : {},
+      ...emptyLabel ? { emptyLabel } : {},
+      panelClassName: "left-0 right-auto"
+    }
+  ) });
+}
+function EnumFilterField({ filter, grow }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      title: filter.description,
+      className: utils.cn(
+        "flex h-8 items-center gap-2 rounded-md border border-input bg-muted/30 pl-2 pr-1 text-xs",
+        grow ? "min-w-[12rem] max-w-[18rem] flex-1" : "min-w-[11rem] max-w-[15rem] shrink-0",
+        filter.disabled && "opacity-60",
+        filter.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          select.Select,
+          {
+            "aria-label": filter.label,
+            className: "h-6 border-0 bg-transparent px-1 text-xs shadow-none focus-visible:ring-0",
+            value: filter.value,
+            placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+            disabled: filter.disabled,
+            onChange: (event) => filter.onChange(event.target.value),
+            options: filter.options.map((option) => ({
+              value: option.value,
+              label: option.label ?? option.value
+            }))
+          }
+        )
+      ]
+    }
+  );
+}
+function BooleanFilterField({ filter }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      title: filter.description,
+      className: utils.cn(
+        "flex h-8 shrink-0 items-center gap-2 rounded-md border border-input bg-muted/30 px-2 text-xs",
+        filter.disabled && "opacity-60",
+        filter.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            "aria-label": filter.label,
+            className: "h-3.5 w-3.5 accent-primary",
+            checked: filter.value,
+            disabled: filter.disabled,
+            onChange: (event) => filter.onChange(event.target.checked)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap font-medium uppercase tracking-wide text-muted-foreground", children: filter.label })
+      ]
+    }
+  );
+}
+function SearchField({ search }) {
+  const [draft, setDraft] = useDebouncedTextDraft(search.value, search.onChange);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-[14rem] max-w-[24rem] flex-1 items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: utils.cn(
+        "flex h-8 min-w-0 flex-1 items-center rounded-md border border-input bg-background px-3 text-sm",
+        search.className
+      ),
+      children: [
+        draft.trim() ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 whitespace-nowrap text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: search.ariaLabel ?? "Search" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSearch.UiSearch, className: "mr-2 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "search",
+            "aria-label": search.ariaLabel ?? search.placeholder ?? "Search",
+            className: "w-full bg-transparent outline-none placeholder:text-muted-foreground",
+            placeholder: search.placeholder ?? "Search…",
+            value: draft,
+            onChange: (event) => setDraft(event.target.value)
+          }
+        )
+      ]
+    }
+  ) });
+}
+function TextFilterField({ filter, grow }) {
+  const [draft, setDraft] = useDebouncedTextDraft(filter.value, filter.onChange);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      title: filter.description,
+      className: utils.cn(
+        "flex h-8 items-center gap-2 rounded-md border border-input bg-muted/30 pl-2 pr-2 text-xs",
+        grow ? "min-w-[12rem] max-w-[18rem] flex-1" : "min-w-[11rem] max-w-[15rem] shrink-0",
+        filter.disabled && "opacity-60",
+        filter.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            "aria-label": filter.label,
+            className: "w-full min-w-0 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+            placeholder: filter.placeholder ?? "Filter…",
+            value: draft,
+            disabled: filter.disabled,
+            onChange: (event) => setDraft(event.target.value)
+          }
+        )
+      ]
+    }
+  );
+}
+function LookupFilterField({ filter, grow }) {
+  const [draft, setDraft] = useDebouncedTextDraft(filter.value, filter.onChange);
+  const listId = `${filter.key}-lookup-options`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      title: filter.description,
+      className: utils.cn(
+        "flex h-8 items-center gap-2 rounded-md border border-input bg-muted/30 pl-2 pr-2 text-xs",
+        grow ? "min-w-[12rem] max-w-[18rem] flex-1" : "min-w-[11rem] max-w-[15rem] shrink-0",
+        filter.disabled && "opacity-60",
+        filter.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
+        filter.inputType === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
+          DateTimePicker.DateTimePicker,
+          {
+            "aria-label": filter.label,
+            className: "w-full",
+            inputClassName: "w-full min-w-0 border-0 bg-transparent px-0 pr-6 text-sm text-foreground shadow-none focus-visible:ring-0",
+            buttonClassName: "right-0",
+            placeholder: filter.placeholder ?? "Filter…",
+            value: draft,
+            list: listId,
+            disabled: filter.disabled,
+            onChange: setDraft
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: filter.inputType === "number" ? "number" : "text",
+            "aria-label": filter.label,
+            className: "w-full min-w-0 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+            placeholder: filter.placeholder ?? "Filter…",
+            value: draft,
+            list: listId,
+            disabled: filter.disabled,
+            onChange: (event) => setDraft(event.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: listId, children: filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          "option",
+          {
+            value: option.value,
+            label: option.label ?? option.value,
+            disabled: option.disabled
+          },
+          option.value
+        )) })
+      ]
+    }
+  );
+}
+function LookupMultiFilterField({
+  filter,
+  grow
+}) {
+  const [draft, setDraft] = useDebouncedTextDraft(
+    filter.value.join(", "),
+    (next) => filter.onChange(parseLookupMultiValue(next))
+  );
+  const listId = `${filter.key}-lookup-options`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      title: filter.description,
+      className: utils.cn(
+        "flex h-8 items-center gap-2 rounded-md border border-input bg-muted/30 pl-2 pr-2 text-xs",
+        grow ? "min-w-[12rem] max-w-[18rem] flex-1" : "min-w-[11rem] max-w-[15rem] shrink-0",
+        filter.disabled && "opacity-60",
+        filter.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            "aria-label": filter.label,
+            className: "w-full min-w-0 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+            placeholder: filter.placeholder ?? "value-1, value-2",
+            value: draft,
+            list: listId,
+            disabled: filter.disabled,
+            onChange: (event) => setDraft(event.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: listId, children: filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          "option",
+          {
+            value: option.value,
+            label: option.label ?? option.value,
+            disabled: option.disabled
+          },
+          option.value
+        )) })
+      ]
+    }
+  );
+}
+function NumberFilterField({ filter, grow }) {
+  const rootRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  useDismissablePopup(open, rootRef, triggerRef, () => setOpen(false));
+  const bounds = resolveNumberFilterBounds(filter);
+  const [draft, setDraft] = useDebouncedNumberDraft(filter.value, filter.onChange);
+  const sliderMin = clampNumber(parseFilterNumber(draft.min) ?? bounds.min, bounds.min, bounds.max);
+  const sliderMax = clampNumber(parseFilterNumber(draft.max) ?? bounds.max, bounds.min, bounds.max);
+  const activeMin = Math.min(sliderMin, sliderMax);
+  const activeMax = Math.max(sliderMin, sliderMax);
+  const summary = summarizeNumberFilter(filter, bounds, draft);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rootRef,
+      title: filter.description,
+      className: utils.cn(
+        "relative min-w-0",
+        grow ? "min-w-[8rem] max-w-[12rem] flex-1" : "shrink-0",
+        filter.disabled && "opacity-60",
+        filter.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          button.Button,
+          {
+            ref: triggerRef,
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            "aria-label": `${filter.label} filter`,
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            disabled: filter.disabled,
+            onClick: () => setOpen((current) => !current),
+            className: utils.cn(
+              "min-w-0 gap-2 font-normal",
+              grow ? "w-full max-w-[12rem] justify-between" : "w-auto max-w-[9.5rem] px-2.5",
+              summary === filter.label && "text-muted-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: summary }),
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: open ? UiChevronUp.UiChevronUp : UiChevronDown.UiChevronDown, className: "text-muted-foreground" })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 top-[calc(100%+0.375rem)] z-50 min-w-[18rem] max-w-[22rem] rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-lg shadow-black/5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "text-[10px] text-primary disabled:text-muted-foreground",
+                onClick: () => {
+                  setDraft({});
+                  filter.onChange({});
+                },
+                disabled: !String(draft.min ?? "").trim() && !String(draft.max ?? "").trim(),
+                children: "Clear all"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-[11px] text-muted-foreground", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatNumberValue(bounds.min, filter) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatNumberValue(bounds.max, filter) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+                RangeSlider.RangeSlider,
+                {
+                  min: bounds.min,
+                  max: bounds.max,
+                  step: bounds.step,
+                  value: [activeMin, activeMax],
+                  ariaLabelMin: `${filter.label} minimum slider`,
+                  ariaLabelMax: `${filter.label} maximum slider`,
+                  onChange: ([nextMin, nextMax]) => setDraft(numberFilterValueFromSlider([nextMin, nextMax], bounds))
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[10px] text-muted-foreground", children: "Min" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "number",
+                    inputMode: "decimal",
+                    step: bounds.step,
+                    "aria-label": `${filter.label} minimum`,
+                    className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    placeholder: filter.minPlaceholder ?? formatNumberValue(bounds.min, filter),
+                    value: draft.min ?? "",
+                    onChange: (event) => setDraft(
+                      normalizeNumberFilterValue(
+                        { min: event.target.value, max: draft.max ?? "" },
+                        "min-input"
+                      )
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[10px] text-muted-foreground", children: "Max" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "number",
+                    inputMode: "decimal",
+                    step: bounds.step,
+                    "aria-label": `${filter.label} maximum`,
+                    className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    placeholder: filter.maxPlaceholder ?? formatNumberValue(bounds.max, filter),
+                    value: draft.max ?? "",
+                    onChange: (event) => setDraft(
+                      normalizeNumberFilterValue(
+                        { min: draft.min ?? "", max: event.target.value },
+                        "max-input"
+                      )
+                    )
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function NumberFilterPanel({
+  filter,
+  chrome = "full"
+}) {
+  const bounds = resolveNumberFilterBounds(filter);
+  const [draft, setDraft] = useDebouncedNumberDraft(filter.value, filter.onChange);
+  const sliderMin = clampNumber(parseFilterNumber(draft.min) ?? bounds.min, bounds.min, bounds.max);
+  const sliderMax = clampNumber(parseFilterNumber(draft.max) ?? bounds.max, bounds.min, bounds.max);
+  const activeMin = Math.min(sliderMin, sliderMax);
+  const activeMax = Math.max(sliderMin, sliderMax);
+  const embedded = chrome === "embedded";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-filter-panel-chrome": chrome,
+      className: utils.cn(
+        "min-w-[18rem] max-w-[22rem] text-popover-foreground",
+        embedded ? "p-0" : "rounded-md border border-border bg-popover p-3 shadow-sm shadow-black/5"
+      ),
+      children: [
+        !embedded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-[10px] text-primary disabled:text-muted-foreground",
+              onClick: () => {
+                setDraft({});
+                filter.onChange({});
+              },
+              disabled: !String(draft.min ?? "").trim() && !String(draft.max ?? "").trim(),
+              children: "Clear all"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-[11px] text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatNumberValue(bounds.min, filter) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatNumberValue(bounds.max, filter) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+              RangeSlider.RangeSlider,
+              {
+                min: bounds.min,
+                max: bounds.max,
+                step: bounds.step,
+                value: [activeMin, activeMax],
+                ariaLabelMin: `${filter.label} minimum slider`,
+                ariaLabelMax: `${filter.label} maximum slider`,
+                onChange: ([nextMin, nextMax]) => setDraft(numberFilterValueFromSlider([nextMin, nextMax], bounds))
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[10px] text-muted-foreground", children: "Min" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "number",
+                  inputMode: "decimal",
+                  step: bounds.step,
+                  "aria-label": `${filter.label} minimum`,
+                  className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  placeholder: filter.minPlaceholder ?? formatNumberValue(bounds.min, filter),
+                  value: draft.min ?? "",
+                  onChange: (event) => setDraft(
+                    normalizeNumberFilterValue(
+                      { min: event.target.value, max: draft.max ?? "" },
+                      "min-input"
+                    )
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[10px] text-muted-foreground", children: "Max" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "number",
+                  inputMode: "decimal",
+                  step: bounds.step,
+                  "aria-label": `${filter.label} maximum`,
+                  className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  placeholder: filter.maxPlaceholder ?? formatNumberValue(bounds.max, filter),
+                  value: draft.max ?? "",
+                  onChange: (event) => setDraft(
+                    normalizeNumberFilterValue(
+                      { min: draft.min ?? "", max: event.target.value },
+                      "max-input"
+                    )
+                  )
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function MultiFilterField({ filter, grow }) {
+  const rootRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  const [optionQuery, setOptionQuery] = react.useState("");
+  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);
+  useDismissablePopup(open, rootRef, triggerRef, () => setOpen(false));
+  const summary = summarizeMultiFilter(filter.label, draft);
+  const showOptionFilter = filter.options.length > 7;
+  const visibleOptions = react.useMemo(() => {
+    const query = optionQuery.trim().toLowerCase();
+    if (!query) return filter.options;
+    return filter.options.filter(
+      (option) => multiSelectOptionText(option).toLowerCase().includes(query)
+    );
+  }, [filter.options, optionQuery]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rootRef,
+      title: filter.description,
+      className: utils.cn(
+        "relative min-w-0",
+        grow ? "min-w-[8rem] max-w-[12rem] flex-1" : "shrink-0",
+        filter.disabled && "opacity-60",
+        filter.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          button.Button,
+          {
+            ref: triggerRef,
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            "aria-label": `${filter.label} filter`,
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            disabled: filter.disabled,
+            onClick: () => setOpen((current) => !current),
+            className: utils.cn(
+              "min-w-0 gap-2 font-normal",
+              grow ? "w-full max-w-[12rem] justify-between" : "w-auto max-w-[8.5rem] px-2.5",
+              summary === filter.label && "text-muted-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: summary }),
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: open ? UiChevronUp.UiChevronUp : UiChevronDown.UiChevronDown, className: "text-muted-foreground" })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 top-[calc(100%+0.375rem)] z-50 min-w-[18rem] max-w-[22rem] rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "text-[10px] text-primary disabled:text-muted-foreground",
+                onClick: () => setDraft({}),
+                disabled: Object.keys(draft).length === 0,
+                children: "Clear all"
+              }
+            )
+          ] }),
+          showOptionFilter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-2 rounded-md border border-input bg-background px-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSearch.UiSearch, className: "shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "search",
+                "aria-label": `Filter ${filter.label} options`,
+                className: "h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+                placeholder: `Filter ${filter.label.toLowerCase()}`,
+                value: optionQuery,
+                onChange: (event) => setOptionQuery(event.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-72 space-y-0.5 overflow-auto", children: [
+            visibleOptions.map((option) => {
+              const mode = draft[option.value] ?? "neutral";
+              const title = option.title ?? multiSelectOptionText(option);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  role: "button",
+                  tabIndex: 0,
+                  "data-filter-option": option.value,
+                  className: "rounded-md px-1.5 py-0.5 hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
+                  onClick: () => setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode))),
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode)));
+                    }
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    FilterPill.FilterPill,
+                    {
+                      className: "w-full justify-between",
+                      label: option.label,
+                      mode,
+                      title,
+                      togglePosition: "right",
+                      onModeChange: (next) => setDraft(updateMultiFilterValue(draft, option.value, next))
+                    }
+                  )
+                },
+                option.value
+              );
+            }),
+            visibleOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground", children: "No options found" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function MultiFilterPanel({
+  filter,
+  chrome = "full"
+}) {
+  const [optionQuery, setOptionQuery] = react.useState("");
+  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);
+  const showOptionFilter = filter.options.length > 7;
+  const embedded = chrome === "embedded";
+  const visibleOptions = react.useMemo(() => {
+    const query = optionQuery.trim().toLowerCase();
+    if (!query) return filter.options;
+    return filter.options.filter(
+      (option) => multiSelectOptionText(option).toLowerCase().includes(query)
+    );
+  }, [filter.options, optionQuery]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-filter-panel-chrome": chrome,
+      className: utils.cn(
+        "min-w-[18rem] max-w-[22rem] text-popover-foreground",
+        embedded ? "p-0" : "rounded-md border border-border bg-popover p-2 shadow-sm shadow-black/5"
+      ),
+      children: [
+        !embedded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-[10px] text-primary disabled:text-muted-foreground",
+              onClick: () => setDraft({}),
+              disabled: Object.keys(draft).length === 0,
+              children: "Clear all"
+            }
+          )
+        ] }),
+        showOptionFilter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-2 rounded-md border border-input bg-background px-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSearch.UiSearch, className: "shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "search",
+              "aria-label": `Filter ${filter.label} options`,
+              className: "h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+              placeholder: `Filter ${filter.label.toLowerCase()}`,
+              value: optionQuery,
+              onChange: (event) => setOptionQuery(event.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-72 space-y-0.5 overflow-auto", children: [
+          visibleOptions.map((option) => {
+            const mode = draft[option.value] ?? "neutral";
+            const title = option.title ?? multiSelectOptionText(option);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                "data-filter-option": option.value,
+                className: "rounded-md px-1.5 py-0.5 hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
+                onClick: () => setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode))),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode)));
+                  }
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  FilterPill.FilterPill,
+                  {
+                    className: "w-full justify-between",
+                    label: option.label,
+                    mode,
+                    title,
+                    togglePosition: "right",
+                    onModeChange: (next) => setDraft(updateMultiFilterValue(draft, option.value, next))
+                  }
+                )
+              },
+              option.value
+            );
+          }),
+          visibleOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground", children: "No options found" })
+        ] })
+      ]
+    }
+  );
+}
+function NestedMultiFilterPanel({
+  filter,
+  chrome = "full"
+}) {
+  var _a;
+  const [activeGroup, setActiveGroup] = react.useState(((_a = filter.groups[0]) == null ? void 0 : _a.groupKey) ?? null);
+  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);
+  const groups = filter.groups;
+  const embedded = chrome === "embedded";
+  const activeGroupData = react.useMemo(
+    () => groups.find((group) => group.groupKey === activeGroup) ?? groups[0] ?? null,
+    [groups, activeGroup]
+  );
+  const selectedByGroup = react.useMemo(() => {
+    const counts = {};
+    for (const group of groups) {
+      let n = 0;
+      for (const option of group.options) {
+        if (draft[option.value]) n += 1;
+      }
+      counts[group.groupKey] = n;
+    }
+    return counts;
+  }, [groups, draft]);
+  const sortedGroups = react.useMemo(() => {
+    const selected = [];
+    const rest = [];
+    for (const group of groups) {
+      if ((selectedByGroup[group.groupKey] ?? 0) > 0) selected.push(group);
+      else rest.push(group);
+    }
+    return [...selected, ...rest];
+  }, [groups, selectedByGroup]);
+  const clearGroup = (groupKey) => {
+    const group = groups.find((g) => g.groupKey === groupKey);
+    if (!group) return;
+    const next = { ...draft };
+    for (const option of group.options) {
+      delete next[option.value];
+    }
+    setDraft(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "dialog", className: "flex", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-filter-panel-chrome": chrome,
+        className: utils.cn(
+          "min-w-[14rem] max-w-[16rem] text-popover-foreground",
+          embedded ? "p-0" : "rounded-md border border-border bg-popover p-2 shadow-sm shadow-black/5"
+        ),
+        children: [
+          !embedded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "text-[10px] text-primary disabled:text-muted-foreground",
+                onClick: () => setDraft({}),
+                disabled: Object.keys(draft).length === 0,
+                children: "Clear all"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-72 space-y-0.5 overflow-auto", children: [
+            sortedGroups.map((group) => {
+              const selected = selectedByGroup[group.groupKey] ?? 0;
+              const isActive = group.groupKey === activeGroup;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  role: "button",
+                  tabIndex: 0,
+                  onMouseEnter: () => setActiveGroup(group.groupKey),
+                  onFocus: () => setActiveGroup(group.groupKey),
+                  onClick: () => setActiveGroup(group.groupKey),
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter" || event.key === " " || event.key === "ArrowRight") {
+                      event.preventDefault();
+                      setActiveGroup(group.groupKey);
+                    }
+                  },
+                  className: utils.cn(
+                    "flex cursor-pointer items-center justify-between gap-2 rounded-md px-1.5 py-0.5 text-sm",
+                    "hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
+                    isActive && "bg-accent/60"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: group.label ?? group.groupKey }),
+                    selected > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rounded-full bg-primary/15 px-1.5 text-[10px] font-medium text-primary", children: [
+                      selected,
+                      "/",
+                      group.options.length
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronRight.UiChevronRight, className: "shrink-0 text-muted-foreground" })
+                  ]
+                },
+                group.groupKey
+              );
+            }),
+            groups.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground", children: "No groups" })
+          ] })
+        ]
+      }
+    ),
+    activeGroupData && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        onMouseEnter: () => setActiveGroup(activeGroupData.groupKey),
+        className: "ml-1.5 min-w-[16rem] max-w-[20rem] rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-sm shadow-black/5",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: activeGroupData.label ?? activeGroupData.groupKey }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "text-[10px] text-primary disabled:text-muted-foreground",
+                onClick: () => clearGroup(activeGroupData.groupKey),
+                disabled: (selectedByGroup[activeGroupData.groupKey] ?? 0) === 0,
+                children: "Clear"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-72 space-y-0.5 overflow-auto", children: [
+            activeGroupData.options.map((option) => {
+              const mode = draft[option.value] ?? "neutral";
+              const title = option.title ?? multiSelectOptionText(option);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  role: "button",
+                  tabIndex: 0,
+                  "data-filter-option": option.value,
+                  className: "rounded-md px-1.5 py-0.5 hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
+                  onClick: () => setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode))),
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode)));
+                    } else if (event.key === "ArrowLeft") {
+                      event.preventDefault();
+                      setActiveGroup(null);
+                    }
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    FilterPill.FilterPill,
+                    {
+                      className: "w-full justify-between",
+                      label: renderNestedOptionLabel(option, activeGroupData.groupKey),
+                      mode,
+                      title,
+                      togglePosition: "right",
+                      onModeChange: (next) => setDraft(updateMultiFilterValue(draft, option.value, next))
+                    }
+                  )
+                },
+                option.value
+              );
+            }),
+            activeGroupData.options.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground", children: "No values" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function multiSelectOptionText(option) {
+  const label = typeof option.label === "string" ? option.label : "";
+  return [option.value, label, option.title ?? ""].filter(Boolean).join(" ");
+}
+function NestedMultiFilterField({
+  filter,
+  grow
+}) {
+  const rootRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  const [activeGroup, setActiveGroup] = react.useState(null);
+  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);
+  useDismissablePopup(open, rootRef, triggerRef, () => {
+    setOpen(false);
+    setActiveGroup(null);
+  });
+  const summary = summarizeMultiFilter(filter.label, draft);
+  const groups = filter.groups;
+  const activeGroupData = react.useMemo(
+    () => groups.find((group) => group.groupKey === activeGroup) ?? null,
+    [groups, activeGroup]
+  );
+  const selectedByGroup = react.useMemo(() => {
+    const counts = {};
+    for (const group of groups) {
+      let n = 0;
+      for (const option of group.options) {
+        if (draft[option.value]) n += 1;
+      }
+      counts[group.groupKey] = n;
+    }
+    return counts;
+  }, [groups, draft]);
+  const sortedGroups = react.useMemo(() => {
+    const selected = [];
+    const rest = [];
+    for (const group of groups) {
+      if ((selectedByGroup[group.groupKey] ?? 0) > 0) selected.push(group);
+      else rest.push(group);
+    }
+    return [...selected, ...rest];
+  }, [groups, selectedByGroup]);
+  const clearGroup = (groupKey) => {
+    const group = groups.find((g) => g.groupKey === groupKey);
+    if (!group) return;
+    const next = { ...draft };
+    for (const option of group.options) {
+      delete next[option.value];
+    }
+    setDraft(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rootRef,
+      title: filter.description,
+      className: utils.cn(
+        "relative min-w-0",
+        grow ? "min-w-[8rem] max-w-[12rem] flex-1" : "shrink-0",
+        filter.disabled && "opacity-60",
+        filter.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          button.Button,
+          {
+            ref: triggerRef,
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            "aria-label": `${filter.label} filter`,
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            disabled: filter.disabled,
+            onClick: () => {
+              setOpen((current) => !current);
+              if (open) setActiveGroup(null);
+            },
+            className: utils.cn(
+              "min-w-0 gap-2 font-normal",
+              grow ? "w-full max-w-[12rem] justify-between" : "w-auto max-w-[8.5rem] px-2.5",
+              summary === filter.label && "text-muted-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: summary }),
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: open ? UiChevronUp.UiChevronUp : UiChevronDown.UiChevronDown, className: "text-muted-foreground" })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "dialog",
+            onKeyDown: (event) => {
+              if (event.key === "Escape") {
+                event.preventDefault();
+                setOpen(false);
+                setActiveGroup(null);
+              }
+            },
+            className: "absolute left-0 top-[calc(100%+0.375rem)] z-50 flex",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-[14rem] max-w-[16rem] rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/5", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "text-[10px] text-primary disabled:text-muted-foreground",
+                      onClick: () => setDraft({}),
+                      disabled: Object.keys(draft).length === 0,
+                      children: "Clear all"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-72 space-y-0.5 overflow-auto", children: [
+                  sortedGroups.map((group) => {
+                    const selected = selectedByGroup[group.groupKey] ?? 0;
+                    const isActive = group.groupKey === activeGroup;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        role: "button",
+                        tabIndex: 0,
+                        onMouseEnter: () => setActiveGroup(group.groupKey),
+                        onFocus: () => setActiveGroup(group.groupKey),
+                        onClick: () => setActiveGroup(group.groupKey),
+                        onKeyDown: (event) => {
+                          if (event.key === "Enter" || event.key === " " || event.key === "ArrowRight") {
+                            event.preventDefault();
+                            setActiveGroup(group.groupKey);
+                          }
+                        },
+                        className: utils.cn(
+                          "flex cursor-pointer items-center justify-between gap-2 rounded-md px-1.5 py-0.5 text-sm",
+                          "hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
+                          isActive && "bg-accent/60"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: group.label ?? group.groupKey }),
+                          selected > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rounded-full bg-primary/15 px-1.5 text-[10px] font-medium text-primary", children: [
+                            selected,
+                            "/",
+                            group.options.length
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronRight.UiChevronRight, className: "shrink-0 text-muted-foreground" })
+                        ]
+                      },
+                      group.groupKey
+                    );
+                  }),
+                  groups.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground", children: "No groups" })
+                ] })
+              ] }),
+              activeGroupData && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  onMouseEnter: () => setActiveGroup(activeGroupData.groupKey),
+                  className: "ml-1.5 min-w-[16rem] max-w-[20rem] rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/5",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: activeGroupData.label ?? activeGroupData.groupKey }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "text-[10px] text-primary disabled:text-muted-foreground",
+                          onClick: () => clearGroup(activeGroupData.groupKey),
+                          disabled: (selectedByGroup[activeGroupData.groupKey] ?? 0) === 0,
+                          children: "Clear"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-72 space-y-0.5 overflow-auto", children: [
+                      activeGroupData.options.map((option) => {
+                        const mode = draft[option.value] ?? "neutral";
+                        const title = option.title ?? multiSelectOptionText(option);
+                        return /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            role: "button",
+                            tabIndex: 0,
+                            "data-filter-option": option.value,
+                            className: "rounded-md px-1.5 py-0.5 hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
+                            onClick: () => setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode))),
+                            onKeyDown: (event) => {
+                              if (event.key === "Enter" || event.key === " ") {
+                                event.preventDefault();
+                                setDraft(
+                                  updateMultiFilterValue(draft, option.value, nextFilterMode(mode))
+                                );
+                              } else if (event.key === "ArrowLeft") {
+                                event.preventDefault();
+                                setActiveGroup(null);
+                              }
+                            },
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              FilterPill.FilterPill,
+                              {
+                                className: "w-full justify-between",
+                                label: renderNestedOptionLabel(option, activeGroupData.groupKey),
+                                mode,
+                                title,
+                                togglePosition: "right",
+                                onModeChange: (next) => setDraft(updateMultiFilterValue(draft, option.value, next))
+                              }
+                            )
+                          },
+                          option.value
+                        );
+                      }),
+                      activeGroupData.options.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground", children: "No values" })
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function renderNestedOptionLabel(option, groupKey) {
+  if (typeof option.label === "string") {
+    const prefix = `${groupKey}=`;
+    if (option.label.startsWith(prefix)) return option.label.slice(prefix.length);
+    return option.label;
+  }
+  return option.label ?? option.value;
+}
+function SelectMultiFilterField({
+  filter,
+  grow
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      title: filter.description,
+      className: utils.cn(
+        "flex h-8 items-center gap-2 rounded-md border border-input bg-muted/30 pl-2 pr-1 text-xs",
+        grow ? "min-w-[12rem] max-w-[18rem] flex-1" : "min-w-[11rem] max-w-[15rem] shrink-0",
+        filter.disabled && "opacity-60",
+        filter.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MultiSelect.MultiSelect,
+          {
+            options: filter.options,
+            value: filter.value,
+            onChange: filter.onChange,
+            placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+            ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {},
+            triggerClassName: "h-6 min-w-0 border-0 bg-transparent px-1 text-xs shadow-none focus-visible:ring-0",
+            menuClassName: "left-auto right-0"
+          }
+        )
+      ]
+    }
+  );
+}
+function RangeControlButton({
+  kind,
+  label,
+  from = "",
+  to = "",
+  onApply,
+  presets,
+  timeEnabled,
+  timeZone,
+  timeZones,
+  fromPlaceholder,
+  toPlaceholder,
+  emptyLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TimeRange.TimeRange,
+    {
+      kind,
+      label,
+      from,
+      to,
+      onApply,
+      ...presets ? { presets } : {},
+      ...timeEnabled !== void 0 ? { timeEnabled } : {},
+      ...timeZone ? { timeZone } : {},
+      ...timeZones ? { timeZones } : {},
+      ...fromPlaceholder ? { fromPlaceholder } : {},
+      ...toPlaceholder ? { toPlaceholder } : {},
+      ...emptyLabel ? { emptyLabel } : {},
+      ...className ? { className } : {}
+    }
+  );
+}
+function useDismissablePopup(open, rootRef, triggerRef, onClose) {
+  react.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      var _a;
+      if (!((_a = rootRef.current) == null ? void 0 : _a.contains(event.target))) {
+        onClose();
+      }
+    };
+    const onKeyDown = (event) => {
+      var _a;
+      if (event.key === "Escape") {
+        onClose();
+        (_a = triggerRef.current) == null ? void 0 : _a.focus();
+      }
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [onClose, open, rootRef, triggerRef]);
+}
+function summarizeMultiFilter(label, value) {
+  const includeCount = Object.values(value).filter((mode) => mode === "include").length;
+  const excludeCount = Object.values(value).filter((mode) => mode === "exclude").length;
+  if (includeCount === 0 && excludeCount === 0) {
+    return label;
+  }
+  const counts = [
+    includeCount > 0 ? `+${includeCount}` : null,
+    excludeCount > 0 ? `-${excludeCount}` : null
+  ].filter(Boolean);
+  return `${label} ${counts.join(" ")}`;
+}
+function parseLookupMultiValue(value) {
+  return value.split(",").map((item) => item.trim()).filter(Boolean);
+}
+function useDebouncedMultiDraft(value, onChange) {
+  const { autoSubmit } = react.useContext(FilterBarContext);
+  const [draft, setDraft] = react.useState(value);
+  const latestOnChange = react.useRef(onChange);
+  react.useEffect(() => {
+    latestOnChange.current = onChange;
+  }, [onChange]);
+  react.useEffect(() => {
+    setDraft(value);
+  }, [value]);
+  react.useEffect(() => {
+    if (sameMultiFilterValue(draft, value)) return;
+    if (!autoSubmit) {
+      latestOnChange.current(draft);
+      return;
+    }
+    const timeoutId = window.setTimeout(() => {
+      latestOnChange.current(draft);
+    }, FILTER_INPUT_DEBOUNCE_MS);
+    return () => window.clearTimeout(timeoutId);
+  }, [autoSubmit, draft, value]);
+  return [draft, setDraft];
+}
+function sameMultiFilterValue(a, b) {
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (const key of aKeys) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+function useDebouncedTextDraft(value, onChange) {
+  const { autoSubmit } = react.useContext(FilterBarContext);
+  const [draft, setDraft] = react.useState(value);
+  const latestOnChange = react.useRef(onChange);
+  react.useEffect(() => {
+    latestOnChange.current = onChange;
+  }, [onChange]);
+  react.useEffect(() => {
+    setDraft(value);
+  }, [value]);
+  react.useEffect(() => {
+    if (draft === value) return;
+    if (!autoSubmit) {
+      latestOnChange.current(draft);
+      return;
+    }
+    const timeoutId = window.setTimeout(() => {
+      latestOnChange.current(draft);
+    }, FILTER_INPUT_DEBOUNCE_MS);
+    return () => window.clearTimeout(timeoutId);
+  }, [autoSubmit, draft, value]);
+  return [draft, setDraft];
+}
+function useDebouncedNumberDraft(value, onChange) {
+  const { autoSubmit } = react.useContext(FilterBarContext);
+  const [draft, setDraft] = react.useState(value);
+  const latestOnChange = react.useRef(onChange);
+  react.useEffect(() => {
+    latestOnChange.current = onChange;
+  }, [onChange]);
+  react.useEffect(() => {
+    setDraft(value);
+  }, [value.max, value.min]);
+  react.useEffect(() => {
+    if (sameNumberFilterValue(draft, value)) return;
+    if (!autoSubmit) {
+      latestOnChange.current(draft);
+      return;
+    }
+    const timeoutId = window.setTimeout(() => {
+      latestOnChange.current(draft);
+    }, FILTER_INPUT_DEBOUNCE_MS);
+    return () => window.clearTimeout(timeoutId);
+  }, [autoSubmit, draft, value]);
+  return [draft, setDraft];
+}
+function sameNumberFilterValue(left, right) {
+  return (left.min ?? "") === (right.min ?? "") && (left.max ?? "") === (right.max ?? "");
+}
+function resolveNumberFilterBounds(filter) {
+  const parsedMin = parseFilterNumber(filter.value.min);
+  const parsedMax = parseFilterNumber(filter.value.max);
+  const fallbackMin = parsedMin ?? 0;
+  const fallbackMax = parsedMax ?? Math.max(fallbackMin + 100, 100);
+  const min = filter.domainMin ?? Math.min(fallbackMin, fallbackMax);
+  const max = filter.domainMax ?? Math.max(fallbackMax, min + 100);
+  const step = filter.step && filter.step > 0 ? filter.step : 1;
+  return {
+    min,
+    max: max <= min ? min + step : max,
+    step
+  };
+}
+function summarizeNumberFilter(filter, bounds, value) {
+  const parsedMin = parseFilterNumber(value.min);
+  const parsedMax = parseFilterNumber(value.max);
+  const hasMin = String(value.min ?? "").trim() !== "";
+  const hasMax = String(value.max ?? "").trim() !== "";
+  if (!hasMin && !hasMax) {
+    return filter.label;
+  }
+  const minLabel = parsedMin == null ? formatNumberValue(bounds.min, filter) : formatNumberValue(parsedMin, filter);
+  const maxLabel = parsedMax == null ? formatNumberValue(bounds.max, filter) : formatNumberValue(parsedMax, filter);
+  if (hasMin && hasMax) {
+    if (minLabel === maxLabel) {
+      return `${filter.label} ${minLabel}`;
+    }
+    return `${filter.label} ${minLabel}-${maxLabel}`;
+  }
+  if (hasMin) {
+    return `${filter.label} >=${minLabel}`;
+  }
+  return `${filter.label} <=${maxLabel}`;
+}
+function normalizeNumberFilterValue(nextValue, source) {
+  let min = nextValue.min ?? "";
+  let max = nextValue.max ?? "";
+  const parsedMin = parseFilterNumber(min);
+  const parsedMax = parseFilterNumber(max);
+  if (parsedMin != null && parsedMax != null && parsedMin > parsedMax) {
+    if (source.startsWith("min")) {
+      max = min;
+    } else {
+      min = max;
+    }
+  }
+  return { min, max };
+}
+function numberFilterValueFromSlider(value, bounds) {
+  const [min, max] = value;
+  return {
+    min: min <= bounds.min ? "" : formatRawNumber(clampNumber(min, bounds.min, bounds.max)),
+    max: max >= bounds.max ? "" : formatRawNumber(clampNumber(max, bounds.min, bounds.max))
+  };
+}
+function parseFilterNumber(value) {
+  if (!(value == null ? void 0 : value.trim())) return null;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+function clampNumber(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function formatNumberValue(value, filter) {
+  if (filter.formatValue) {
+    return filter.formatValue(value);
+  }
+  return formatRawNumber(value);
+}
+function formatRawNumber(value) {
+  return Number.isInteger(value) ? String(value) : String(Number(value.toFixed(6)));
+}
+function updateMultiFilterValue(current, optionValue, nextMode) {
+  const next = { ...current };
+  if (nextMode === "neutral") {
+    delete next[optionValue];
+    return next;
+  }
+  if (nextMode === "include" || nextMode === "exclude") {
+    next[optionValue] = nextMode;
+  }
+  return next;
+}
+function nextFilterMode(mode) {
+  if (mode === "include") return "exclude";
+  if (mode === "exclude") return "neutral";
+  return "include";
+}
+function clearFilterBarFilter(filter) {
+  if (filter.kind === "text" || filter.kind === "lookup" || filter.kind === "enum") {
+    filter.onChange("");
+    return;
+  }
+  if (filter.kind === "lookup-multi" || filter.kind === "select-multi") {
+    filter.onChange([]);
+    return;
+  }
+  if (filter.kind === "number") {
+    filter.onChange({});
+    return;
+  }
+  if (filter.kind === "boolean") {
+    filter.onChange(false);
+    return;
+  }
+  filter.onChange({});
+}
+function isFilterBarFilterActive(filter) {
+  if (filter.kind === "text" || filter.kind === "lookup" || filter.kind === "enum") {
+    return String(filter.value ?? "").trim() !== "";
+  }
+  if (filter.kind === "lookup-multi" || filter.kind === "select-multi") {
+    return filter.value.length > 0;
+  }
+  if (filter.kind === "number") {
+    return String(filter.value.min ?? "").trim() !== "" || String(filter.value.max ?? "").trim() !== "";
+  }
+  if (filter.kind === "boolean") return filter.value;
+  return Object.keys(filter.value).length > 0;
+}
+function createFilterValueMap(filters) {
+  return Object.fromEntries(filters.map((filter) => [filter.key, filterBarFilterValue(filter)]));
+}
+function filterBarFilterValue(filter) {
+  return filter.value;
+}
+function filterWithStagedValue(filter, value, onChange) {
+  if (filter.kind === "text") {
+    return {
+      ...filter,
+      value: String(value ?? ""),
+      onChange: (next) => onChange(next)
+    };
+  }
+  if (filter.kind === "lookup") {
+    return {
+      ...filter,
+      value: String(value ?? ""),
+      onChange: (next) => onChange(next)
+    };
+  }
+  if (filter.kind === "lookup-multi") {
+    return {
+      ...filter,
+      value: Array.isArray(value) ? value.map(String) : [],
+      onChange: (next) => onChange(next)
+    };
+  }
+  if (filter.kind === "multi") {
+    return {
+      ...filter,
+      value: isMultiFilterValue(value) ? value : {},
+      onChange: (next) => onChange(next)
+    };
+  }
+  if (filter.kind === "nested-multi") {
+    return {
+      ...filter,
+      value: isMultiFilterValue(value) ? value : {},
+      onChange: (next) => onChange(next)
+    };
+  }
+  if (filter.kind === "select-multi") {
+    return {
+      ...filter,
+      value: Array.isArray(value) ? value.map(String) : [],
+      onChange: (next) => onChange(next)
+    };
+  }
+  if (filter.kind === "number") {
+    return {
+      ...filter,
+      value: isNumberFilterValue(value) ? value : {},
+      onChange: (next) => onChange(next)
+    };
+  }
+  if (filter.kind === "enum") {
+    return {
+      ...filter,
+      value: String(value ?? ""),
+      onChange: (next) => onChange(next)
+    };
+  }
+  return {
+    ...filter,
+    value: Boolean(value),
+    onChange: (next) => onChange(next)
+  };
+}
+function applyStagedFilterValues(filters, stagedValues) {
+  for (const filter of filters) {
+    const next = stagedValues[filter.key] ?? filterBarFilterValue(filter);
+    if (sameFilterBarValue(filterBarFilterValue(filter), next)) continue;
+    applyFilterBarValue(filter, next);
+  }
+}
+function applyFilterBarValue(filter, value) {
+  if (filter.kind === "text" || filter.kind === "lookup" || filter.kind === "enum") {
+    filter.onChange(String(value ?? ""));
+    return;
+  }
+  if (filter.kind === "lookup-multi" || filter.kind === "select-multi") {
+    filter.onChange(Array.isArray(value) ? value.map(String) : []);
+    return;
+  }
+  if (filter.kind === "number") {
+    filter.onChange(isNumberFilterValue(value) ? value : {});
+    return;
+  }
+  if (filter.kind === "boolean") {
+    filter.onChange(Boolean(value));
+    return;
+  }
+  filter.onChange(isMultiFilterValue(value) ? value : {});
+}
+function sameFilterBarValue(left, right) {
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+function isNumberFilterValue(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isMultiFilterValue(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function calculateVisibleFilterCount(widths, availableWidth) {
+  if (widths.length === 0) return 0;
+  let used = 0;
+  let count = 0;
+  for (const width of widths) {
+    const nextUsed = used + (count > 0 ? FILTER_BAR_GAP_PX : 0) + width;
+    if (nextUsed > availableWidth) break;
+    used = nextUsed;
+    count += 1;
+  }
+  return count;
+}
+function sumFilterWidths(widths) {
+  if (widths.length === 0) return 0;
+  return widths.reduce((total, width) => total + width, 0) + (widths.length - 1) * FILTER_BAR_GAP_PX;
+}
+function estimateFilterWidth(filter) {
+  if (filter.kind === "boolean") return Math.max(88, filter.label.length * 8 + 40);
+  if (filter.kind === "multi" || filter.kind === "nested-multi") return 136;
+  if (filter.kind === "number") return 152;
+  return Math.max(144, filter.label.length * 8 + 96);
+}
+exports.FilterBar = FilterBar;
+exports.FilterBarFilterPanel = FilterBarFilterPanel;
+exports.FilterBarRangePanel = FilterBarRangePanel;
+exports.clearFilterBarFilter = clearFilterBarFilter;
+exports.isFilterBarFilterActive = isFilterBarFilterActive;
+//# sourceMappingURL=FilterBar.cjs.map