@flanksource/clicky-ui 0.3.35 → 0.3.37

package/dist/components/FilterBar.cjs

@@ -11,6 +11,7 @@ const filterBarUtils = require("./filter-bar-utils.cjs");
 const Icon = require("../data/Icon.cjs");
 const timestampFormat = require("../data/cells/timestamp-format.cjs");
 const utils = require("../lib/utils.cjs");
+const useMediaQuery = require("../hooks/use-media-query.cjs");
 const Modal = require("../overlay/Modal.cjs");
 const modalStack = require("../overlay/modalStack.cjs");
 const button = require("./button.cjs");
@@ -48,39 +49,57 @@ function FilterBar({
 }) {
   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 mobileFilterOverflow = useMediaQuery("(max-width: 767px)");
-  const mobilePageOverflow = useMediaQuery("(max-width: 639px)");
+  const allFilters = react.useMemo(() => {
+    const configured = filters ?? [];
+    return [
+      ...configured.filter((filter) => filter.placement !== "overflow"),
+      ...configured.filter((filter) => filter.placement === "overflow")
+    ];
+  }, [filters]);
+  const inlineFilterLimit = allFilters.findIndex(
+    (filter) => filter.placement === "overflow"
+  );
+  const maximumInlineFilters = inlineFilterLimit === -1 ? allFilters.length : inlineFilterLimit;
+  const hasForcedOverflow = maximumInlineFilters < allFilters.length;
+  const mobileFilterOverflow = useMediaQuery.useMediaQuery("(max-width: 767px)");
+  const mobilePageOverflow = useMediaQuery.useMediaQuery("(max-width: 639px)");
+  const contextValue = react.useMemo(
+    () => ({ autoSubmit, compact: mobileFilterOverflow }),
+    [autoSubmit, mobileFilterOverflow]
+  );
+  const mobileCollapse = overflowMode === "responsive" ? mobileFilterOverflow : mobilePageOverflow;
+  const responsiveOverflow = allFilters.length > 0 && (overflowMode === "responsive" || mobileCollapse || hasForcedOverflow);
   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.map((filter) => `${filter.key}:${filter.placement ?? "auto"}`).join("\0"),
     [allFilters]
   );
-  const [visibleFilterCount, setVisibleFilterCount] = react.useState(allFilters.length);
+  const [visibleFilterCount, setVisibleFilterCount] = react.useState(maximumInlineFilters);
   const allFiltersRef = react.useRef(allFilters);
   const responsiveOverflowRef = react.useRef(responsiveOverflow);
-  const mobileFilterOverflowRef = react.useRef(mobileFilterOverflow);
+  const mobileCollapseRef = react.useRef(mobileCollapse);
+  const maximumInlineFiltersRef = react.useRef(maximumInlineFilters);
   allFiltersRef.current = allFilters;
   responsiveOverflowRef.current = responsiveOverflow;
-  mobileFilterOverflowRef.current = mobileFilterOverflow;
+  mobileCollapseRef.current = mobileCollapse;
+  maximumInlineFiltersRef.current = maximumInlineFilters;
   react.useLayoutEffect(() => {
     setVisibleFilterCount(
-      responsiveOverflowRef.current && mobileFilterOverflowRef.current ? 0 : allFiltersRef.current.length
+      responsiveOverflowRef.current && mobileCollapseRef.current ? 0 : maximumInlineFiltersRef.current
     );
-  }, [filterKeys, mobileFilterOverflow]);
+  }, [filterKeys, mobileCollapse]);
   const measureOverflow = react.useCallback(() => {
     var _a;
     const current = allFiltersRef.current;
+    const maximumInline = maximumInlineFiltersRef.current;
     if (!responsiveOverflowRef.current) {
       setVisibleFilterCount(current.length);
       return;
     }
-    if (mobileFilterOverflowRef.current) {
+    if (mobileCollapseRef.current) {
       setVisibleFilterCount(0);
       return;
     }
@@ -88,7 +107,7 @@ function FilterBar({
     if (!filterList) return;
     const availableWidth = Math.floor(filterList.getBoundingClientRect().width);
     if (availableWidth <= 0) return;
-    const widths = current.map((filter) => {
+    const widths = current.slice(0, maximumInline).map((filter) => {
       const node = filterNodeRefs.current.get(filter.key);
       const measured = (node == null ? void 0 : node.getBoundingClientRect().width) ?? 0;
       if (measured > 0) {
@@ -102,12 +121,15 @@ function FilterBar({
       ((_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(
+    const allInlineWidth = sumFilterWidths(widths);
+    const forcedOverflow = maximumInline < current.length;
+    const nextVisible = !forcedOverflow && allInlineWidth <= availableWidth ? maximumInline : calculateVisibleFilterCount(
       widths,
       Math.max(0, availableWidth - triggerWidth - triggerGap)
     );
-    setVisibleFilterCount((prev) => prev === nextVisible ? prev : nextVisible);
+    setVisibleFilterCount(
+      (prev) => prev === nextVisible ? prev : nextVisible
+    );
   }, []);
   react.useLayoutEffect(() => {
     measureOverflow();
@@ -131,17 +153,23 @@ function FilterBar({
       observer.disconnect();
       window.removeEventListener("resize", measureOverflow);
     };
-  }, [measureOverflow, responsiveOverflow, mobileFilterOverflow]);
-  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(filterBarUtils.isFilterBarFilterActive).length;
-  const setFilterNode = react.useCallback((key, node) => {
-    if (!node) {
-      filterNodeRefs.current.delete(key);
-      return;
-    }
-    filterNodeRefs.current.set(key, node);
-  }, []);
+  }, [measureOverflow, responsiveOverflow, mobileCollapse]);
+  const inlineEnd = Math.min(visibleFilterCount, maximumInlineFilters);
+  const inlineFilters = responsiveOverflow ? allFilters.slice(0, inlineEnd) : allFilters;
+  const overflowFilters = responsiveOverflow ? allFilters.slice(inlineEnd) : [];
+  const activeOverflowCount = overflowFilters.filter(
+    filterBarUtils.isFilterBarFilterActive
+  ).length;
+  const setFilterNode = react.useCallback(
+    (key, node) => {
+      if (!node) {
+        filterNodeRefs.current.delete(key);
+        return;
+      }
+      filterNodeRefs.current.set(key, node);
+    },
+    []
+  );
   const row = /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -153,7 +181,9 @@ function FilterBar({
         // so twMerge keeps both and the breakpoint variant still wins above
         // md — which made the documented escape hatch do nothing on exactly
         // the desktop widths where a crowded bar overflows the viewport.
-        overflowMode === "wrap" ? "flex-wrap" : "flex-wrap md:flex-nowrap",
+        // Below `sm` the row only ever holds search, the Filters trigger
+        // and the trailing group, so it never needs a second line.
+        overflowMode === "wrap" ? "flex-wrap max-sm:flex-nowrap" : "flex-wrap max-sm:flex-nowrap md:flex-nowrap",
         className,
         // Hidden rather than unmounted, so a half-typed search survives the
         // takeover. `visibility: hidden` is not focusable per spec, so this
@@ -192,12 +222,20 @@ function FilterBar({
             triggerRef: overflowTriggerRef,
             filters: overflowFilters,
             activeHidden: activeOverflowCount,
+            allHidden: inlineFilters.length === 0,
             mobilePage: mobilePageOverflow,
             ...onApply ? { onApply } : {}
           }
         ),
-        (hasRangeControls || trailing || showApply) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex min-w-0 shrink-0 flex-wrap items-center justify-end gap-2", children: [
-          dateRange && /* @__PURE__ */ jsxRuntime.jsx(RangeControlButton, { kind: "date", label: "Date range", ...dateRange }),
+        (hasRangeControls || trailing || showApply) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex min-w-0 items-center justify-end gap-2 max-md:flex-nowrap md:shrink-0 md:flex-wrap", children: [
+          dateRange && /* @__PURE__ */ jsxRuntime.jsx(
+            RangeControlButton,
+            {
+              kind: "date",
+              label: "Date range",
+              ...dateRange
+            }
+          ),
           timeRange && /* @__PURE__ */ jsxRuntime.jsx(
             RangeControlButton,
             {
@@ -229,7 +267,10 @@ function FilterBar({
       "div",
       {
         "data-slot": "filter-bar-overlay",
-        className: utils.cn(FILTER_BAR_ROW_CLASS, "col-start-1 row-start-1 min-w-0 flex-wrap"),
+        className: utils.cn(
+          FILTER_BAR_ROW_CLASS,
+          "col-start-1 row-start-1 min-w-0 flex-wrap"
+        ),
         children: overlay
       }
     )
@@ -240,7 +281,10 @@ function FilterBarFilterPanel({
   chrome = "full",
   autoSubmit = true
 }) {
-  const contextValue = react.useMemo(() => ({ autoSubmit }), [autoSubmit]);
+  const contextValue = react.useMemo(
+    () => ({ autoSubmit, compact: false }),
+    [autoSubmit]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarFilterPanelContent, { filter, chrome }) });
 }
 function FilterBarFilterPanelContent({
@@ -254,7 +298,7 @@ function FilterBarFilterPanelContent({
     filter.kind === "nested-multi" && /* @__PURE__ */ jsxRuntime.jsx(NestedMultiFilterPanel, { filter, chrome }),
     filter.kind === "workload" && /* @__PURE__ */ jsxRuntime.jsx(WorkloadFilterField, { filter, grow: true }),
     filter.kind === "select-multi" && /* @__PURE__ */ jsxRuntime.jsx(SelectMultiFilterField, { filter, grow: true }),
-    filter.kind === "number" && /* @__PURE__ */ jsxRuntime.jsx(NumberFilterPanel, { filter, chrome }),
+    (filter.kind === "number" || filter.kind === "duration") && /* @__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 === "tristate" && /* @__PURE__ */ jsxRuntime.jsx(TriStateFilterField, { filter }),
@@ -288,7 +332,7 @@ function renderFilterField(filter, grow) {
   if (filter.kind === "select-multi") {
     return /* @__PURE__ */ jsxRuntime.jsx(SelectMultiFilterField, { filter, grow });
   }
-  if (filter.kind === "number") {
+  if (filter.kind === "number" || filter.kind === "duration") {
     return /* @__PURE__ */ jsxRuntime.jsx(NumberFilterField, { filter, grow });
   }
   if (filter.kind === "enum") {
@@ -316,6 +360,7 @@ function OverflowFiltersMenu({
   triggerRef,
   filters,
   activeHidden,
+  allHidden,
   mobilePage,
   onApply
 }) {
@@ -326,7 +371,14 @@ function OverflowFiltersMenu({
     () => filters.map((filter) => filter.key).join("\0"),
     [filters]
   );
-  const { refs, floatingStyles, context, floatingZ, getReferenceProps, getFloatingProps } = useAnchoredPopup(
+  const {
+    refs,
+    floatingStyles,
+    context,
+    floatingZ,
+    getReferenceProps,
+    getFloatingProps
+  } = useAnchoredPopup(
     open && !mobilePage,
     (next) => {
       setStagedValues(createFilterValueMap(filters));
@@ -367,17 +419,34 @@ function OverflowFiltersMenu({
     "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",
+      className: utils.cn(
+        "rounded text-primary transition-colors hover:bg-accent focus:bg-accent focus:outline-none disabled:text-muted-foreground",
+        // The sheet is a touch surface: its controls need finger-sized targets.
+        mobilePage ? "h-10 px-3 text-sm" : "px-1.5 py-0.5 text-xs"
+      ),
       onClick: () => stagedFilters.forEach(filterBarUtils.clearFilterBarFilter),
-      disabled: stagedFilters.every((filter) => !filterBarUtils.isFilterBarFilterActive(filter)),
+      disabled: stagedFilters.every(
+        (filter) => !filterBarUtils.isFilterBarFilterActive(filter)
+      ),
       children: "Clear all"
     }
   );
-  const actions = /* @__PURE__ */ jsxRuntime.jsx(OverflowFilterActions, { onClose: closeOverflowMenu, onApply: applyOverflowFilters });
+  const actions = /* @__PURE__ */ jsxRuntime.jsx(
+    OverflowFilterActions,
+    {
+      onClose: closeOverflowMenu,
+      onApply: applyOverflowFilters,
+      mobilePage
+    }
+  );
+  const triggerLabel = allHidden ? "Filters" : "More filters";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: utils.cn("inline-flex shrink-0", !hasHidden && "invisible pointer-events-none"),
+      className: utils.cn(
+        "inline-flex shrink-0",
+        !hasHidden && "invisible pointer-events-none"
+      ),
       "aria-hidden": !hasHidden || void 0,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -387,17 +456,18 @@ function OverflowFiltersMenu({
             type: "button",
             variant: "outline",
             size: "sm",
-            "aria-label": "More filters",
+            "aria-label": triggerLabel,
             tabIndex: hasHidden ? 0 : -1,
-            title: hasHidden ? "More filters" : void 0,
+            title: hasHidden ? triggerLabel : void 0,
             className: utils.cn(
-              "h-8 min-w-0 gap-1.5 px-2 text-xs font-normal",
+              "h-8 min-w-0 gap-1.5 px-2 text-xs font-normal max-md:h-9",
               activeHidden > 0 && "border-primary/40 text-primary"
             ),
             ...getReferenceProps(),
             "aria-expanded": open,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiFilter.UiFilter, className: "text-[14px]" }),
+              allHidden && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Filters" }),
               activeHidden > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-muted px-1.5 text-[10px] font-medium text-muted-foreground", children: activeHidden })
             ]
           }
@@ -476,20 +546,35 @@ function OverflowFilterRows({
                   className: "col-span-2 flex min-w-0 items-center gap-1 truncate text-[10px] font-medium uppercase tracking-wide text-muted-foreground md:col-span-1",
                   title: filter.description ?? filter.label,
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: filterBarFieldUtils.sizedIcon(filter.icon, 12), className: "text-[12px] normal-case" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Icon.LabelIcon,
+                      {
+                        icon: filterBarFieldUtils.sizedIcon(filter.icon, 12),
+                        className: "text-[12px] normal-case"
+                      }
+                    ),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: filter.label })
                   ]
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden text-sm text-muted-foreground md:block", children: "=" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 overflow-visible", children: /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: { autoSubmit: false }, children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarKeyValueControl, { filter }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 overflow-visible", children: /* @__PURE__ */ jsxRuntime.jsx(
+                filterBarContext.FilterBarContext.Provider,
+                {
+                  value: { autoSubmit: false, compact: 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 self-center 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",
+                  className: utils.cn(
+                    "inline-flex self-center 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",
+                    mobilePage ? "h-10 w-10" : "h-6 w-6"
+                  ),
                   onClick: () => filterBarUtils.clearFilterBarFilter(filter),
                   disabled: !active,
                   children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "text-sm" })
@@ -505,11 +590,33 @@ function OverflowFilterRows({
 }
 function OverflowFilterActions({
   onClose,
-  onApply
+  onApply,
+  mobilePage = false
 }) {
+  const size = mobilePage ? "h-10 px-4 text-sm" : "h-8 px-3 text-xs";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "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: onClose, children: "Close" }),
-    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "button", variant: "default", size: "sm", className: "h-8 px-3 text-xs", onClick: onApply, children: "Apply" })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: size,
+        onClick: onClose,
+        children: "Close"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        type: "button",
+        variant: "default",
+        size: "sm",
+        className: size,
+        onClick: onApply,
+        children: "Apply"
+      }
+    )
   ] });
 }
 function FilterBarKeyValueControl({ filter }) {
@@ -562,7 +669,10 @@ function lookupOptionsToCombobox(options) {
   return options.map((option) => ({
     value: option.value,
     label: option.label ?? option.value,
-    ...option.disabled !== void 0 ? { disabled: option.disabled } : {}
+    ...option.disabled !== void 0 ? { disabled: option.disabled } : {},
+    // Neither "lookup" nor "lookup-multi" renders tristate, so the count
+    // reaches the row through `trailing`, not the tristate pill's badge.
+    ...option.count !== void 0 ? { trailing: /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.count.toLocaleString() }) } : {}
   }));
 }
 function WorkloadFilterField({
@@ -591,7 +701,10 @@ function valueInputClassName(disabled) {
   );
 }
 function TextFilterValueControl({ filter }) {
-  const [draft, setDraft] = useDebouncedTextDraft(filter.value, filter.onChange);
+  const [draft, setDraft] = useDebouncedTextDraft(
+    filter.value,
+    filter.onChange
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
@@ -606,8 +719,13 @@ function TextFilterValueControl({ filter }) {
     }
   );
 }
-function LookupFilterValueControl({ filter }) {
-  const [draft, setDraft] = useDebouncedTextDraft(filter.value, filter.onChange);
+function LookupFilterValueControl({
+  filter
+}) {
+  const [draft, setDraft] = useDebouncedTextDraft(
+    filter.value,
+    filter.onChange
+  );
   if (filter.inputType === "date") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       DateTimePicker.DateTimePicker,
@@ -654,7 +772,9 @@ function LookupFilterValueControl({ filter }) {
     }
   );
 }
-function LookupMultiFilterValueControl({ filter }) {
+function LookupMultiFilterValueControl({
+  filter
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Combobox.Combobox,
     {
@@ -694,7 +814,9 @@ function EnumFilterValueControl({ filter }) {
     }
   );
 }
-function BooleanFilterValueControl({ filter }) {
+function BooleanFilterValueControl({
+  filter
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
@@ -708,7 +830,9 @@ function BooleanFilterValueControl({ filter }) {
     }
   ) });
 }
-function TriStateFilterValueControl({ filter }) {
+function TriStateFilterValueControl({
+  filter
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
     TriStateToggle.TriStateToggle,
     {
@@ -722,7 +846,9 @@ function TriStateFilterValueControl({ filter }) {
     }
   ) });
 }
-function SelectMultiFilterValueControl({ filter }) {
+function SelectMultiFilterValueControl({
+  filter
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     MultiSelect.MultiSelect,
     {
@@ -773,7 +899,10 @@ function FilterBarRangePanel({
     }
   ) });
 }
-function EnumFilterField({ filter, grow }) {
+function EnumFilterField({
+  filter,
+  grow
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Combobox.Combobox,
     {
@@ -843,8 +972,11 @@ function BooleanFilterField({ filter }) {
   );
 }
 function SearchField({ search }) {
-  const [draft, setDraft] = useDebouncedTextDraft(search.value, search.onChange);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-[1_1_14rem] items-center gap-2 md:min-w-[14rem] md:max-w-[24rem]", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const [draft, setDraft] = useDebouncedTextDraft(
+    search.value,
+    search.onChange
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2 md:flex-[1_1_14rem] md:min-w-[14rem] md:max-w-[24rem]", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "label",
     {
       className: utils.cn(
@@ -852,13 +984,19 @@ function SearchField({ search }) {
         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" }),
+        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-placeholder",
+            className: "w-full min-w-0 bg-transparent outline-none placeholder:text-placeholder",
             placeholder: search.placeholder ?? "Search…",
             value: draft,
             onChange: (event) => setDraft(event.target.value)
@@ -868,8 +1006,14 @@ function SearchField({ search }) {
     }
   ) });
 }
-function TextFilterField({ filter, grow }) {
-  const [draft, setDraft] = useDebouncedTextDraft(filter.value, filter.onChange);
+function TextFilterField({
+  filter,
+  grow
+}) {
+  const [draft, setDraft] = useDebouncedTextDraft(
+    filter.value,
+    filter.onChange
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "label",
     {
@@ -898,14 +1042,23 @@ function TextFilterField({ filter, grow }) {
     }
   );
 }
-function FilterFieldLabel({ icon, label }) {
+function FilterFieldLabel({
+  icon,
+  label
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 whitespace-nowrap font-medium uppercase tracking-wide text-muted-foreground", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon, className: "text-[13px] normal-case" }),
     label
   ] });
 }
-function LookupFilterField({ filter, grow }) {
-  const [draft, setDraft] = useDebouncedTextDraft(filter.value, filter.onChange);
+function LookupFilterField({
+  filter,
+  grow
+}) {
+  const [draft, setDraft] = useDebouncedTextDraft(
+    filter.value,
+    filter.onChange
+  );
   if (filter.inputType === "date" || filter.inputType === "number") {
     const dateTitle = filter.inputType === "date" && draft ? timestampFormat.formatDateTimeRelative(draft) : void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -996,16 +1149,31 @@ function lookupMultiFilterFooter(filter) {
     filter.onSearch ? " — type to search all" : ""
   ] });
 }
-function NumberFilterField({ filter, grow }) {
+function NumberFilterField({
+  filter,
+  grow
+}) {
   const [open, setOpen] = react.useState(false);
   const popup = useAnchoredPopup(open, setOpen);
   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 [draft, setDraft] = useDebouncedNumberDraft(
+    filter.value,
+    (next) => applyBoundedFilterValue(filter, next)
+  );
+  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);
+  const showSlider = filter.domainMin !== void 0 && filter.domainMax !== void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1033,9 +1201,21 @@ function NumberFilterField({ filter, grow }) {
             ),
             ...popup.getReferenceProps(),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: filter.icon, className: "text-[14px] text-muted-foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Icon.LabelIcon,
+                {
+                  icon: filter.icon,
+                  className: "text-[14px] text-muted-foreground"
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: summary }),
-              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: open ? UiChevronUp.UiChevronUp : UiChevronDown.UiChevronDown, className: "text-muted-foreground" })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Icon.Icon,
+                {
+                  icon: open ? UiChevronUp.UiChevronUp : UiChevronDown.UiChevronDown,
+                  className: "text-muted-foreground"
+                }
+              )
             ]
           }
         ),
@@ -1058,7 +1238,7 @@ function NumberFilterField({ filter, grow }) {
                     className: "text-[10px] text-primary disabled:text-muted-foreground",
                     onClick: () => {
                       setDraft({});
-                      filter.onChange({});
+                      applyBoundedFilterValue(filter, {});
                     },
                     disabled: !String(draft.min ?? "").trim() && !String(draft.max ?? "").trim(),
                     children: "Clear all"
@@ -1066,7 +1246,7 @@ function NumberFilterField({ filter, grow }) {
                 )
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                showSlider && /* @__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) })
@@ -1080,54 +1260,25 @@ function NumberFilterField({ filter, grow }) {
                       value: [activeMin, activeMax],
                       ariaLabelMin: `${filter.label} minimum slider`,
                       ariaLabelMax: `${filter.label} maximum slider`,
-                      onChange: ([nextMin, nextMax]) => setDraft(numberFilterValueFromSlider([nextMin, nextMax], bounds))
+                      onChange: ([nextMin, nextMax]) => setDraft(
+                        numberFilterValueFromSlider(
+                          [nextMin, nextMax],
+                          bounds,
+                          filter
+                        )
+                      )
                     }
                   ) })
                 ] }),
-                /* @__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",
-                        ...filter.minPlaceholder !== void 0 ? { placeholder: filter.minPlaceholder } : {},
-                        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",
-                        ...filter.maxPlaceholder !== void 0 ? { placeholder: filter.maxPlaceholder } : {},
-                        value: draft.max ?? "",
-                        onChange: (event) => setDraft(
-                          normalizeNumberFilterValue(
-                            { min: draft.min ?? "", max: event.target.value },
-                            "max-input"
-                          )
-                        )
-                      }
-                    )
-                  ] })
-                ] })
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  NumberFilterInputs,
+                  {
+                    filter,
+                    value: draft,
+                    onChange: setDraft,
+                    bounds
+                  }
+                )
               ] })
             ]
           }
@@ -1141,12 +1292,24 @@ function NumberFilterPanel({
   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 [draft, setDraft] = useDebouncedNumberDraft(
+    filter.value,
+    (next) => applyBoundedFilterValue(filter, next)
+  );
+  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";
+  const showSlider = filter.domainMin !== void 0 && filter.domainMax !== void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1165,7 +1328,7 @@ function NumberFilterPanel({
               className: "text-[10px] text-primary disabled:text-muted-foreground",
               onClick: () => {
                 setDraft({});
-                filter.onChange({});
+                applyBoundedFilterValue(filter, {});
               },
               disabled: !String(draft.min ?? "").trim() && !String(draft.max ?? "").trim(),
               children: "Clear all"
@@ -1173,7 +1336,7 @@ function NumberFilterPanel({
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          showSlider && /* @__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) })
@@ -1187,66 +1350,166 @@ function NumberFilterPanel({
                 value: [activeMin, activeMax],
                 ariaLabelMin: `${filter.label} minimum slider`,
                 ariaLabelMax: `${filter.label} maximum slider`,
-                onChange: ([nextMin, nextMax]) => setDraft(numberFilterValueFromSlider([nextMin, nextMax], bounds))
+                onChange: ([nextMin, nextMax]) => setDraft(
+                  numberFilterValueFromSlider(
+                    [nextMin, nextMax],
+                    bounds,
+                    filter
+                  )
+                )
               }
             ) })
           ] }),
-          /* @__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",
-                  ...filter.minPlaceholder !== void 0 ? { placeholder: filter.minPlaceholder } : {},
-                  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",
-                  ...filter.maxPlaceholder !== void 0 ? { placeholder: filter.maxPlaceholder } : {},
-                  value: draft.max ?? "",
-                  onChange: (event) => setDraft(
-                    normalizeNumberFilterValue(
-                      { min: draft.min ?? "", max: event.target.value },
-                      "max-input"
-                    )
-                  )
-                }
-              )
-            ] })
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            NumberFilterInputs,
+            {
+              filter,
+              value: draft,
+              onChange: setDraft,
+              bounds
+            }
+          )
         ] })
       ]
     }
   );
 }
+function NumberFilterInputs({
+  filter,
+  value,
+  onChange,
+  bounds
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumberFilterEdge,
+      {
+        filter,
+        value,
+        onChange,
+        bounds,
+        edge: "min"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumberFilterEdge,
+      {
+        filter,
+        value,
+        onChange,
+        bounds,
+        edge: "max"
+      }
+    )
+  ] });
+}
+function NumberFilterEdge({
+  filter,
+  value,
+  onChange,
+  bounds,
+  edge
+}) {
+  const minimum = edge === "min";
+  const label = minimum ? "minimum" : "maximum";
+  const operator = minimum ? value.minOperator ?? ">=" : value.maxOperator ?? "<=";
+  const operand = minimum ? value.min ?? "" : value.max ?? "";
+  const duration = filter.kind === "duration" ? value : void 0;
+  const unit = minimum ? duration == null ? void 0 : duration.minUnit : duration == null ? void 0 : duration.maxUnit;
+  const setOperand = (next) => {
+    const nextValue = minimum ? { ...value, min: next } : { ...value, max: next };
+    onChange(
+      filter.kind === "duration" ? nextValue : normalizeNumberFilterValue(
+        nextValue,
+        minimum ? "min-input" : "max-input"
+      )
+    );
+  };
+  const setOperator = (next) => onChange(
+    minimum ? { ...value, minOperator: next } : { ...value, maxOperator: next }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[2.5rem_3.5rem_minmax(0,1fr)_auto] items-center gap-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: minimum ? "Min" : "Max" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        "aria-label": `${filter.label} ${label} operator`,
+        className: "h-8 rounded-md border border-input bg-background px-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        value: operator,
+        disabled: filter.disabled,
+        onChange: (event) => setOperator(event.target.value),
+        children: (minimum ? [">=", ">"] : ["<=", "<"]).map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option, children: option }, option))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "number",
+        inputMode: "decimal",
+        step: bounds.step,
+        "aria-label": `${filter.label} ${label}`,
+        className: "h-8 min-w-0 rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        ...(minimum ? filter.minPlaceholder : filter.maxPlaceholder) !== void 0 ? {
+          placeholder: minimum ? filter.minPlaceholder : filter.maxPlaceholder
+        } : {},
+        value: operand,
+        disabled: filter.disabled,
+        onChange: (event) => setOperand(event.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumberFilterUnit,
+      {
+        filter,
+        value,
+        edge,
+        ...unit ? { unit } : {},
+        onChange
+      }
+    )
+  ] });
+}
+function NumberFilterUnit({
+  filter,
+  value,
+  edge,
+  unit,
+  onChange
+}) {
+  if (filter.kind === "number") {
+    return filter.unit ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-8 text-xs text-muted-foreground", children: filter.unit }) : null;
+  }
+  const selected = unit ?? filter.unit ?? "ms";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "select",
+    {
+      "aria-label": `${filter.label} ${edge === "min" ? "minimum" : "maximum"} unit`,
+      className: "h-8 rounded-md border border-input bg-background px-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      value: selected,
+      disabled: filter.disabled,
+      onChange: (event) => {
+        const next = edge === "min" ? { ...value, minUnit: event.target.value } : {
+          ...value,
+          maxUnit: event.target.value
+        };
+        onChange(next);
+      },
+      children: ["ms", "s", "m", "h"].map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option, children: option }, option))
+    }
+  );
+}
 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] = filterBarFieldUtils.useDebouncedMultiDraft(filter.value, filter.onChange);
+  const [activeGroup, setActiveGroup] = react.useState(
+    ((_a = filter.groups[0]) == null ? void 0 : _a.groupKey) ?? null
+  );
+  const [draft, setDraft] = filterBarFieldUtils.useDebouncedMultiDraft(
+    filter.value,
+    filter.onChange
+  );
   const groups = filter.groups;
   const embedded = chrome === "embedded";
   const activeGroupData = react.useMemo(
@@ -1335,7 +1598,13 @@ function NestedMultiFilterPanel({
                       "/",
                       group.options.length
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronRight.UiChevronRight, className: "shrink-0 text-muted-foreground" })
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Icon.Icon,
+                      {
+                        icon: UiChevronRight.UiChevronRight,
+                        className: "shrink-0 text-muted-foreground"
+                      }
+                    )
                   ]
                 },
                 group.groupKey
@@ -1376,11 +1645,23 @@ function NestedMultiFilterPanel({
                   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(filterBarFieldUtils.updateMultiFilterValue(draft, option.value, filterBarFieldUtils.nextFilterMode(mode))),
+                  onClick: () => setDraft(
+                    filterBarFieldUtils.updateMultiFilterValue(
+                      draft,
+                      option.value,
+                      filterBarFieldUtils.nextFilterMode(mode)
+                    )
+                  ),
                   onKeyDown: (event) => {
                     if (event.key === "Enter" || event.key === " ") {
                       event.preventDefault();
-                      setDraft(filterBarFieldUtils.updateMultiFilterValue(draft, option.value, filterBarFieldUtils.nextFilterMode(mode)));
+                      setDraft(
+                        filterBarFieldUtils.updateMultiFilterValue(
+                          draft,
+                          option.value,
+                          filterBarFieldUtils.nextFilterMode(mode)
+                        )
+                      );
                     } else if (event.key === "ArrowLeft") {
                       event.preventDefault();
                       setActiveGroup(null);
@@ -1390,11 +1671,16 @@ function NestedMultiFilterPanel({
                     FilterPill.FilterPill,
                     {
                       className: "w-full justify-between",
-                      label: renderNestedOptionLabel(option, activeGroupData.groupKey),
+                      label: renderNestedOptionLabel(
+                        option,
+                        activeGroupData.groupKey
+                      ),
                       mode,
                       title,
                       togglePosition: "right",
-                      onModeChange: (next) => setDraft(filterBarFieldUtils.updateMultiFilterValue(draft, option.value, next))
+                      onModeChange: (next) => setDraft(
+                        filterBarFieldUtils.updateMultiFilterValue(draft, option.value, next)
+                      )
                     }
                   )
                 },
@@ -1414,7 +1700,10 @@ function NestedMultiFilterField({
 }) {
   const [open, setOpen] = react.useState(false);
   const [activeGroup, setActiveGroup] = react.useState(null);
-  const [draft, setDraft] = filterBarFieldUtils.useDebouncedMultiDraft(filter.value, filter.onChange);
+  const [draft, setDraft] = filterBarFieldUtils.useDebouncedMultiDraft(
+    filter.value,
+    filter.onChange
+  );
   const popup = useAnchoredPopup(open, (next) => {
     setOpen(next);
     if (!next) setActiveGroup(null);
@@ -1482,7 +1771,13 @@ function NestedMultiFilterField({
             ...popup.getReferenceProps(),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: summary }),
-              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: open ? UiChevronUp.UiChevronUp : UiChevronDown.UiChevronDown, className: "text-muted-foreground" })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Icon.Icon,
+                {
+                  icon: open ? UiChevronUp.UiChevronUp : UiChevronDown.UiChevronDown,
+                  className: "text-muted-foreground"
+                }
+              )
             ]
           }
         ),
@@ -1540,7 +1835,13 @@ function NestedMultiFilterField({
                             "/",
                             group.options.length
                           ] }),
-                          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronRight.UiChevronRight, className: "shrink-0 text-muted-foreground" })
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Icon.Icon,
+                            {
+                              icon: UiChevronRight.UiChevronRight,
+                              className: "shrink-0 text-muted-foreground"
+                            }
+                          )
                         ]
                       },
                       group.groupKey
@@ -1579,12 +1880,22 @@ function NestedMultiFilterField({
                             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(filterBarFieldUtils.updateMultiFilterValue(draft, option.value, filterBarFieldUtils.nextFilterMode(mode))),
+                            onClick: () => setDraft(
+                              filterBarFieldUtils.updateMultiFilterValue(
+                                draft,
+                                option.value,
+                                filterBarFieldUtils.nextFilterMode(mode)
+                              )
+                            ),
                             onKeyDown: (event) => {
                               if (event.key === "Enter" || event.key === " ") {
                                 event.preventDefault();
                                 setDraft(
-                                  filterBarFieldUtils.updateMultiFilterValue(draft, option.value, filterBarFieldUtils.nextFilterMode(mode))
+                                  filterBarFieldUtils.updateMultiFilterValue(
+                                    draft,
+                                    option.value,
+                                    filterBarFieldUtils.nextFilterMode(mode)
+                                  )
                                 );
                               } else if (event.key === "ArrowLeft") {
                                 event.preventDefault();
@@ -1595,11 +1906,20 @@ function NestedMultiFilterField({
                               FilterPill.FilterPill,
                               {
                                 className: "w-full justify-between",
-                                label: renderNestedOptionLabel(option, activeGroupData.groupKey),
+                                label: renderNestedOptionLabel(
+                                  option,
+                                  activeGroupData.groupKey
+                                ),
                                 mode,
                                 title,
                                 togglePosition: "right",
-                                onModeChange: (next) => setDraft(filterBarFieldUtils.updateMultiFilterValue(draft, option.value, next))
+                                onModeChange: (next) => setDraft(
+                                  filterBarFieldUtils.updateMultiFilterValue(
+                                    draft,
+                                    option.value,
+                                    next
+                                  )
+                                )
                               }
                             )
                           },
@@ -1621,7 +1941,8 @@ function NestedMultiFilterField({
 function renderNestedOptionLabel(option, groupKey) {
   if (typeof option.label === "string") {
     const prefix = `${groupKey}=`;
-    if (option.label.startsWith(prefix)) return option.label.slice(prefix.length);
+    if (option.label.startsWith(prefix))
+      return option.label.slice(prefix.length);
     return option.label;
   }
   return option.label ?? option.value;
@@ -1675,6 +1996,7 @@ function RangeControlButton({
   className,
   disabled
 }) {
+  const { compact } = react.useContext(filterBarContext.FilterBarContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TimeRange.TimeRange,
     {
@@ -1683,6 +2005,7 @@ function RangeControlButton({
       from,
       to,
       onApply,
+      compact,
       ...disabled !== void 0 ? { disabled } : {},
       ...presets ? { presets } : {},
       ...timeEnabled !== void 0 ? { timeEnabled } : {},
@@ -1711,42 +2034,40 @@ function useAnchoredPopup(open, onOpenChange, placement = "bottom-start") {
   ]);
   modalStack.useEscapeLayer(open, () => {
     onOpenChange(false);
-    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();
+    if (refs.domReference.current instanceof HTMLElement)
+      refs.domReference.current.focus();
   });
-  return { refs, floatingStyles, context, floatingZ, getReferenceProps, getFloatingProps };
-}
-function useMediaQuery(query) {
-  const [matches, setMatches] = react.useState(() => {
-    if (typeof window === "undefined" || !window.matchMedia) return false;
-    return window.matchMedia(query).matches;
-  });
-  react.useEffect(() => {
-    var _a;
-    if (typeof window === "undefined" || !window.matchMedia) return;
-    const media = window.matchMedia(query);
-    const onChange = () => setMatches(media.matches);
-    onChange();
-    (_a = media.addEventListener) == null ? void 0 : _a.call(media, "change", onChange);
-    return () => {
-      var _a2;
-      return (_a2 = media.removeEventListener) == null ? void 0 : _a2.call(media, "change", onChange);
-    };
-  }, [query]);
-  return matches;
+  return {
+    refs,
+    floatingStyles,
+    context,
+    floatingZ,
+    getReferenceProps,
+    getFloatingProps
+  };
 }
 function useDebouncedTextDraft(value, onChange) {
   const { autoSubmit } = react.useContext(filterBarContext.FilterBarContext);
   const [draft, setDraft] = react.useState(value);
   const latestOnChange = react.useRef(onChange);
+  const lastValue = react.useRef(value);
+  const skipDraftChange = react.useRef(false);
   react.useEffect(() => {
     latestOnChange.current = onChange;
   }, [onChange]);
   react.useEffect(() => {
+    if (lastValue.current === value) return;
+    lastValue.current = value;
+    skipDraftChange.current = true;
     setDraft(value);
   }, [value]);
   react.useEffect(() => {
+    if (skipDraftChange.current) {
+      skipDraftChange.current = false;
+      return;
+    }
     if (draft === value) return;
-    if (!autoSubmit) {
+    if (!autoSubmit || draft === "") {
       latestOnChange.current(draft);
       return;
     }
@@ -1766,7 +2087,14 @@ function useDebouncedNumberDraft(value, onChange) {
   }, [onChange]);
   react.useEffect(() => {
     setDraft(value);
-  }, [value.max, value.min]);
+  }, [
+    value.max,
+    value.maxOperator,
+    value.maxUnit,
+    value.min,
+    value.minOperator,
+    value.minUnit
+  ]);
   react.useEffect(() => {
     if (sameNumberFilterValue(draft, value)) return;
     if (!autoSubmit) {
@@ -1781,7 +2109,9 @@ function useDebouncedNumberDraft(value, onChange) {
   return [draft, setDraft];
 }
 function sameNumberFilterValue(left, right) {
-  return (left.min ?? "") === (right.min ?? "") && (left.max ?? "") === (right.max ?? "");
+  const leftDuration = left;
+  const rightDuration = right;
+  return (left.min ?? "") === (right.min ?? "") && (left.minOperator ?? ">=") === (right.minOperator ?? ">=") && (leftDuration.minUnit ?? "") === (rightDuration.minUnit ?? "") && (left.max ?? "") === (right.max ?? "") && (left.maxOperator ?? "<=") === (right.maxOperator ?? "<=") && (leftDuration.maxUnit ?? "") === (rightDuration.maxUnit ?? "");
 }
 function resolveNumberFilterBounds(filter) {
   const parsedMin = parseFilterNumber(filter.value.min);
@@ -1805,18 +2135,25 @@ function summarizeNumberFilter(filter, bounds, value) {
   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);
+  const minLabel = formatNumberOperand(
+    parsedMin ?? bounds.min,
+    filter,
+    value,
+    "min"
+  );
+  const maxLabel = formatNumberOperand(
+    parsedMax ?? bounds.max,
+    filter,
+    value,
+    "max"
+  );
   if (hasMin && hasMax) {
-    if (minLabel === maxLabel) {
-      return `${filter.label} ${minLabel}`;
-    }
-    return `${filter.label} ${minLabel}-${maxLabel}`;
+    return `${filter.label} ${value.minOperator ?? ">="}${minLabel}, ${value.maxOperator ?? "<="}${maxLabel}`;
   }
   if (hasMin) {
-    return `${filter.label} >=${minLabel}`;
+    return `${filter.label} ${value.minOperator ?? ">="}${minLabel}`;
   }
-  return `${filter.label} <=${maxLabel}`;
+  return `${filter.label} ${value.maxOperator ?? "<="}${maxLabel}`;
 }
 function normalizeNumberFilterValue(nextValue, source) {
   let min = nextValue.min ?? "";
@@ -1830,14 +2167,21 @@ function normalizeNumberFilterValue(nextValue, source) {
       min = max;
     }
   }
-  return { min, max };
+  return { ...nextValue, min, max };
 }
-function numberFilterValueFromSlider(value, bounds) {
+function numberFilterValueFromSlider(value, bounds, filter) {
   const [min, max] = value;
-  return {
+  const next = {
     min: min <= bounds.min ? "" : formatRawNumber(clampNumber(min, bounds.min, bounds.max)),
-    max: max >= bounds.max ? "" : formatRawNumber(clampNumber(max, bounds.min, bounds.max))
+    minOperator: ">=",
+    max: max >= bounds.max ? "" : formatRawNumber(clampNumber(max, bounds.min, bounds.max)),
+    maxOperator: "<="
   };
+  if (filter.kind === "duration") {
+    next.minUnit = filter.unit ?? "ms";
+    next.maxUnit = filter.unit ?? "ms";
+  }
+  return next;
 }
 function parseFilterNumber(value) {
   if (!(value == null ? void 0 : value.trim())) return null;
@@ -1848,16 +2192,30 @@ function clampNumber(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
 function formatNumberValue(value, filter) {
-  if (filter.formatValue) {
+  if (filter.kind === "number" && filter.formatValue) {
     return filter.formatValue(value);
   }
-  return formatRawNumber(value);
+  if (filter.kind === "duration") {
+    return `${formatRawNumber(value)} ${filter.unit ?? "ms"}`;
+  }
+  return filter.unit ? `${formatRawNumber(value)} ${filter.unit}` : formatRawNumber(value);
+}
+function formatNumberOperand(value, filter, bounds, edge) {
+  if (filter.kind !== "duration") return formatNumberValue(value, filter);
+  const duration = bounds;
+  const unit = edge === "min" ? duration.minUnit : duration.maxUnit;
+  return `${formatRawNumber(value)} ${unit ?? filter.unit ?? "ms"}`;
+}
+function applyBoundedFilterValue(filter, value) {
+  filter.onChange(value);
 }
 function formatRawNumber(value) {
   return Number.isInteger(value) ? String(value) : String(Number(value.toFixed(6)));
 }
 function createFilterValueMap(filters) {
-  return Object.fromEntries(filters.map((filter) => [filter.key, filterBarFilterValue(filter)]));
+  return Object.fromEntries(
+    filters.map((filter) => [filter.key, filterBarFilterValue(filter)])
+  );
 }
 function isStageableFilter(filter) {
   return filter.kind !== "date-range";
@@ -1917,7 +2275,7 @@ function filterWithStagedValue(filter, value, onChange) {
       onChange: (next) => onChange(next)
     };
   }
-  if (filter.kind === "number") {
+  if (filter.kind === "number" || filter.kind === "duration") {
     return {
       ...filter,
       value: isNumberFilterValue(value) ? value : {},
@@ -1962,8 +2320,9 @@ function applyFilterBarValue(filter, value) {
     filter.onChange(Array.isArray(value) ? value.map(String) : []);
     return;
   }
-  if (filter.kind === "number") {
-    filter.onChange(isNumberFilterValue(value) ? value : {});
+  if (filter.kind === "number" || filter.kind === "duration") {
+    const next = isNumberFilterValue(value) ? value : {};
+    applyBoundedFilterValue(filter, next);
     return;
   }
   if (filter.kind === "boolean") {
@@ -2002,11 +2361,12 @@ function sumFilterWidths(widths) {
   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 === "boolean")
+    return Math.max(88, filter.label.length * 8 + 40);
   if (filter.kind === "multi") return 176;
   if (filter.kind === "nested-multi") return 136;
   if (filter.kind === "workload") return 224;
-  if (filter.kind === "number") return 152;
+  if (filter.kind === "number" || filter.kind === "duration") return 152;
   return Math.max(144, filter.label.length * 8 + 96);
 }
 exports.TriStateMultiSelect = filterBarMulti.TriStateMultiSelect;