@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

package/dist/filter-bar-chip-C-JxWUU8.js

@@ -0,0 +1,984 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { CheckIcon, LockIcon, XIcon, SearchIcon, PencilIcon } from 'lucide-react';
+import { createContext, useContext, useRef, useState, useCallback, useMemo, forwardRef, useEffect } from 'react';
+import { c as comboboxStyles } from './combobox-styles-CRebmeht.js';
+import { Combobox } from '@base-ui/react/combobox';
+import { S as Spinner } from './spinner-D2C2DYw8.js';
+import { useFluidMenu, FluidMenuItems, useFluidMenuItemRef } from './primitives/fluid-menu.es.js';
+import { c as cn } from './cn-65Adrsfj.js';
+import { B as Button } from './Button-cWcBEd-G.js';
+import { K as Kbd } from './kbd-CINtikLh.js';
+import { controlHeight } from './primitives/control-size.es.js';
+import { FLOATING_POSITION_METHOD } from './primitives/floating.es.js';
+import { inputSurfaceAndFocusWithinStyle } from './primitives/form-element.es.js';
+import { MENU_SIDE_OFFSET } from './primitives/menu-item.es.js';
+import { usePortalContainer } from './primitives/portal-container.es.js';
+import { useIsApplePlatform } from './hooks/use-keyboard-shortcut-label.es.js';
+
+import './filter-bar-chip.css';const SEGMENTS_LEFT_TO_RIGHT = ["field", "operator", "value", "remove"];
+const SEGMENTS_RIGHT_TO_LEFT = [...SEGMENTS_LEFT_TO_RIGHT].reverse();
+const stageOf = (draft) => {
+  if (!draft) return "none";
+  return draft.operatorId ? "operator" : "field";
+};
+const FilterBarContext = createContext(null);
+function useFilterBarContext() {
+  const ctx = useContext(FilterBarContext);
+  if (!ctx) throw new Error("FilterBar compound components must be rendered inside <FilterBar>.");
+  return ctx;
+}
+let idCounter = 0;
+function createFilterId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") return crypto.randomUUID();
+  idCounter += 1;
+  return `filter-${idCounter}`;
+}
+function emptyValueFor(operator) {
+  return operator?.arity === "many" ? [] : "";
+}
+function FilterBarProvider({
+  fields,
+  operators,
+  value,
+  onValueChange,
+  createItemId,
+  ariaLabel,
+  children
+}) {
+  const segments = useRef(/* @__PURE__ */ new Map());
+  const inputRef = useRef(null);
+  const itemsRef = useRef(value);
+  itemsRef.current = value;
+  const [announcement, setAnnouncement] = useState("");
+  const [nonRemovableIds, setNonRemovableIds] = useState(() => /* @__PURE__ */ new Set());
+  const getField = useCallback((fieldId) => fields.find((f) => f.id === fieldId), [fields]);
+  const getOperator = useCallback((operatorId) => operators.find((o) => o.id === operatorId), [operators]);
+  const getFieldOperators = useCallback(
+    (field) => {
+      if (!field.operators) return operators;
+      const allowed = new Set(field.operators);
+      return operators.filter((o) => allowed.has(o.id));
+    },
+    [operators]
+  );
+  const announce = useCallback((message) => setAnnouncement(message), []);
+  const [draft, setDraftState] = useState(null);
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+  const [lastCommit, setLastCommit] = useState(null);
+  const settleCommit = useCallback(() => setLastCommit((prev) => prev ? { ...prev, glint: false } : null), []);
+  const [leavingItems, setLeavingItems] = useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const settleRemove = useCallback((id) => {
+    setLeavingItems((prev) => {
+      if (!prev.has(id)) return prev;
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+  const markLeaving = useCallback((removed) => {
+    if (removed.length === 0) return;
+    setLeavingItems((prev) => {
+      const next = new Map(prev);
+      for (const entry of removed) next.set(entry.item.id, entry);
+      return next;
+    });
+  }, []);
+  const { items, leaving } = useMemo(() => {
+    const present = new Set(value.map((item) => item.id));
+    const items2 = lastCommit && !present.has(lastCommit.item.id) ? [...value, lastCommit.item] : [...value];
+    const leaving2 = /* @__PURE__ */ new Set();
+    const pending = [...leavingItems.values()].filter((entry) => !present.has(entry.item.id)).sort((a, b) => a.index - b.index);
+    for (const entry of pending) {
+      items2.splice(Math.min(entry.index, items2.length), 0, entry.item);
+      leaving2.add(entry.item.id);
+    }
+    return { items: items2, leaving: leaving2 };
+  }, [value, lastCommit, leavingItems]);
+  const newItemId = useCallback(
+    (fieldId) => createItemId ? createItemId(fieldId) : createFilterId(),
+    [createItemId]
+  );
+  const setDraft = useCallback(
+    (next) => {
+      setLastCommit(null);
+      setDraftState(
+        (prev) => next ? { ...next, id: prev?.fieldId === next.fieldId ? prev.id : newItemId(next.fieldId), from: stageOf(prev) } : null
+      );
+    },
+    [newItemId]
+  );
+  const commitDraft = useCallback(
+    ({ fieldId, operatorId }, value2) => {
+      const id = draftRef.current?.id ?? newItemId(fieldId);
+      const item = { id, fieldId, operatorId, value: value2 };
+      onValueChange([...itemsRef.current, item]);
+      setLastCommit({ item, from: stageOf(draftRef.current), glint: true });
+      setDraftState(null);
+      announce("Filter added");
+    },
+    [onValueChange, announce, newItemId]
+  );
+  const updateItem = useCallback(
+    (id, patch) => {
+      onValueChange(itemsRef.current.map((item) => item.id === id ? { ...item, ...patch } : item));
+    },
+    [onValueChange]
+  );
+  const removeItem = useCallback(
+    (id) => {
+      const index = itemsRef.current.findIndex((item2) => item2.id === id);
+      const item = itemsRef.current[index];
+      if (item) markLeaving([{ item, index }]);
+      onValueChange(itemsRef.current.filter((item2) => item2.id !== id));
+      setLastCommit(null);
+      announce("Filter removed");
+    },
+    [onValueChange, announce, markLeaving]
+  );
+  const clear = useCallback(() => {
+    const removed = itemsRef.current.map((item, index) => ({ item, index })).filter(({ item }) => !nonRemovableIds.has(item.id));
+    markLeaving(removed);
+    onValueChange(itemsRef.current.filter((item) => nonRemovableIds.has(item.id)));
+    announce("All filters removed");
+  }, [onValueChange, announce, nonRemovableIds, markLeaving]);
+  const hasRemovableItems = value.some((item) => !nonRemovableIds.has(item.id));
+  const registerNonRemovable = useCallback((itemId, nonRemovable) => {
+    setNonRemovableIds((prev) => {
+      if (prev.has(itemId) === nonRemovable) return prev;
+      const next = new Set(prev);
+      if (nonRemovable) next.add(itemId);
+      else next.delete(itemId);
+      return next;
+    });
+  }, []);
+  const registerSegment = useCallback((itemId, segment, el) => {
+    const key = `${itemId}:${segment}`;
+    if (el) segments.current.set(key, el);
+    else segments.current.delete(key);
+  }, []);
+  const registerInput = useCallback((el) => {
+    inputRef.current = el;
+  }, []);
+  const focusInput = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+  const renderedRef = useRef(items);
+  renderedRef.current = items;
+  const focusChip = useCallback((fromIndex, direction, segment) => {
+    const items2 = renderedRef.current;
+    const fallbacks = direction === -1 ? SEGMENTS_RIGHT_TO_LEFT : SEGMENTS_LEFT_TO_RIGHT;
+    for (let i = fromIndex; i >= 0 && i < items2.length; i += direction) {
+      const item = items2[i];
+      if (!item) break;
+      for (const candidate of [segment, ...fallbacks]) {
+        const el = segments.current.get(`${item.id}:${candidate}`);
+        if (el) {
+          el.focus();
+          return true;
+        }
+      }
+    }
+    return false;
+  }, []);
+  const focusAfterRemove = useCallback(
+    (removedIndex) => {
+      if (focusChip(removedIndex + 1, 1, "value") || focusChip(removedIndex - 1, -1, "value")) return;
+      focusInput();
+    },
+    [focusChip, focusInput]
+  );
+  const ctx = useMemo(
+    () => ({
+      fields,
+      operators,
+      items,
+      draft,
+      setDraft,
+      commitDraft,
+      lastCommit,
+      settleCommit,
+      updateItem,
+      removeItem,
+      leaving,
+      settleRemove,
+      clear,
+      hasRemovableItems,
+      registerNonRemovable,
+      getField,
+      getOperator,
+      getFieldOperators,
+      registerSegment,
+      registerInput,
+      focusChip,
+      focusInput,
+      focusAfterRemove,
+      announce,
+      announcement,
+      ariaLabel
+    }),
+    [
+      fields,
+      operators,
+      items,
+      draft,
+      setDraft,
+      commitDraft,
+      lastCommit,
+      settleCommit,
+      updateItem,
+      removeItem,
+      leaving,
+      settleRemove,
+      clear,
+      hasRemovableItems,
+      registerNonRemovable,
+      getField,
+      getOperator,
+      getFieldOperators,
+      registerSegment,
+      registerInput,
+      focusChip,
+      focusInput,
+      focusAfterRemove,
+      announce,
+      announcement,
+      ariaLabel
+    ]
+  );
+  return /* @__PURE__ */ jsx(FilterBarContext.Provider, { value: ctx, children });
+}
+
+const FluidItem = forwardRef((props, ref) => /* @__PURE__ */ jsx(Combobox.Item, { ref: useFluidMenuItemRef(ref), ...props }));
+FluidItem.displayName = "FilterBarOptionItem";
+function FilterBarOptionList({
+  getKey,
+  renderOption,
+  isSelected,
+  isLoading,
+  error,
+  emptyText = "No results.",
+  "aria-label": ariaLabel,
+  "aria-multiselectable": multiselectable
+}) {
+  const idle = !isLoading && error === void 0;
+  const menu = useFluidMenu();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isLoading && /* @__PURE__ */ jsxs(Combobox.Status, { className: comboboxStyles.empty, children: [
+      /* @__PURE__ */ jsx(Spinner, { size: "sm" }),
+      /* @__PURE__ */ jsx("span", { children: "Loading…" })
+    ] }),
+    !isLoading && error !== void 0 && /* @__PURE__ */ jsx(Combobox.Status, { className: comboboxStyles.empty, children: "Couldn't load values." }),
+    /* @__PURE__ */ jsx(Combobox.Empty, { className: comboboxStyles.empty, children: idle ? emptyText : null }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          comboboxStyles.listScroller,
+          "max-h-[min(var(--spacing-dropdown),60dvh)]",
+          menu.containerClassName
+        ),
+        ...menu.getContainerProps({}),
+        children: /* @__PURE__ */ jsx(FluidMenuItems, { menu, children: /* @__PURE__ */ jsx(
+          Combobox.List,
+          {
+            "aria-label": ariaLabel,
+            "aria-multiselectable": multiselectable,
+            className: comboboxStyles.list,
+            children: (option) => {
+              const selected = isSelected?.(option) ?? false;
+              return /* @__PURE__ */ jsxs(
+                FluidItem,
+                {
+                  value: option,
+                  "data-selected": selected || void 0,
+                  className: cn(comboboxStyles.item, "min-w-0"),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1.5 truncate", children: renderOption(option) }),
+                    /* @__PURE__ */ jsx("span", { className: comboboxStyles.itemRightSlot, children: /* @__PURE__ */ jsx("span", { className: comboboxStyles.checkContainer, children: isSelected ? selected && /* @__PURE__ */ jsx(CheckIcon, { className: comboboxStyles.checkIcon }) : /* @__PURE__ */ jsx(Combobox.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: comboboxStyles.checkIcon }) }) }) })
+                  ]
+                },
+                getKey(option)
+              );
+            }
+          }
+        ) })
+      }
+    )
+  ] });
+}
+
+function matchesQuery(text, query) {
+  const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
+  if (terms.length === 0) return true;
+  const haystack = text.toLowerCase();
+  return terms.every((term) => haystack.includes(term));
+}
+function matchesQueryFilter(item, query, itemToString) {
+  return matchesQuery(itemToString ? itemToString(item) : String(item), query);
+}
+
+const parseFieldValue = (type, text) => {
+  if (type === "number") return Number(text);
+  if (type === "boolean") return text.toLowerCase() === "true";
+  return text;
+};
+
+const DEBOUNCE_MS = 150;
+const BOOLEAN_OPTIONS = [
+  { value: "true", label: "True" },
+  { value: "false", label: "False" }
+];
+const getFieldSuggestions = (field) => field?.suggestions ?? (field?.type === "boolean" ? BOOLEAN_OPTIONS : void 0);
+function useValueSuggestions({
+  field,
+  operatorId,
+  query,
+  enabled
+}) {
+  const suggestions = getFieldSuggestions(field);
+  const resolver = typeof suggestions === "function" ? suggestions : void 0;
+  const staticOptions = Array.isArray(suggestions) ? suggestions : void 0;
+  const [remote, setRemote] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(void 0);
+  const requestId = useRef(0);
+  const resolverRef = useRef(resolver);
+  resolverRef.current = resolver;
+  const hasResolver = Boolean(resolver);
+  useEffect(() => {
+    if (!hasResolver || !enabled) {
+      setRemote([]);
+      setIsLoading(false);
+      setError(void 0);
+      return;
+    }
+    const id = ++requestId.current;
+    const controller = new AbortController();
+    setIsLoading(true);
+    const timer = setTimeout(() => {
+      Promise.resolve().then(() => resolverRef.current?.({ query, operatorId, signal: controller.signal }) ?? []).then((result) => {
+        if (id !== requestId.current) return;
+        setRemote(result);
+        setError(void 0);
+        setIsLoading(false);
+      }).catch((err) => {
+        if (id !== requestId.current || controller.signal.aborted) return;
+        setError(err);
+        setIsLoading(false);
+      });
+    }, DEBOUNCE_MS);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [hasResolver, enabled, query, operatorId]);
+  const options = useMemo(() => {
+    if (staticOptions) return staticOptions.filter((o) => matchesQuery(o.label ?? o.value, query));
+    return remote;
+  }, [staticOptions, remote, query]);
+  return {
+    options,
+    isLoading: Boolean(resolver) && isLoading,
+    error,
+    hasSuggestions: Boolean(suggestions)
+  };
+}
+
+const toStrings = (value) => Array.isArray(value) ? value.map(String) : [];
+function useValueStep({ field, operator, query, enabled, initialValue, onCommit }) {
+  const isMany = operator?.arity === "many";
+  const [selected, setSelected] = useState(() => toStrings(initialValue));
+  const initialValueRef = useRef(initialValue);
+  initialValueRef.current = initialValue;
+  useEffect(() => {
+    setSelected(enabled ? toStrings(initialValueRef.current) : []);
+  }, [enabled]);
+  const suggestions = useValueSuggestions({ field, operatorId: operator?.id ?? "", query, enabled });
+  const type = field?.type;
+  const allowFreeText = !field?.strict && type !== "boolean";
+  const toggle = useCallback((value) => {
+    setSelected((current) => current.includes(value) ? current.filter((v) => v !== value) : [...current, value]);
+  }, []);
+  const commit = useCallback(
+    (values) => onCommit(Array.isArray(values) ? values.map((v) => parseFieldValue(type, v)) : parseFieldValue(type, values)),
+    [onCommit, type]
+  );
+  const handleSelect = useCallback(
+    (option) => {
+      if (isMany) toggle(option.value);
+      else commit(option.value);
+    },
+    [isMany, toggle, commit]
+  );
+  const commitSelection = useCallback(() => {
+    if (selected.length === 0) return false;
+    commit(selected);
+    return true;
+  }, [selected, commit]);
+  const canCommitFreeText = useCallback(
+    (text) => allowFreeText && text.length > 0 && (type !== "number" || Number.isFinite(Number(text))),
+    [allowFreeText, type]
+  );
+  const commitFreeText = useCallback(() => {
+    const text = query.trim();
+    if (!canCommitFreeText(text)) return false;
+    commit(isMany ? selected.includes(text) ? selected : [...selected, text] : text);
+    return true;
+  }, [canCommitFreeText, query, isMany, selected, commit]);
+  const handleKeyDown = useCallback(
+    (event, highlighted) => {
+      if (event.key !== "Enter") return false;
+      if (isMany && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        return commitSelection() || commitFreeText();
+      }
+      if (highlighted === null) {
+        event.preventDefault();
+        return commitFreeText();
+      }
+      return false;
+    },
+    [isMany, commitSelection, commitFreeText]
+  );
+  return {
+    isMany,
+    selected,
+    toggle,
+    options: suggestions.options,
+    isLoading: suggestions.isLoading,
+    error: suggestions.error,
+    hasSuggestions: suggestions.hasSuggestions,
+    allowFreeText,
+    /** True when the current query can be committed as free text (non-empty, numeric when the field is a number). */
+    canCommitQuery: canCommitFreeText(query.trim()),
+    handleSelect,
+    handleKeyDown,
+    commitSelection,
+    commitFreeText
+  };
+}
+
+const segmentClass = cn(
+  "filter-bar-segment flex max-w-48 min-w-0 items-center gap-1 overflow-hidden px-2 text-label whitespace-nowrap outline-none"
+);
+const FILTER_BAR_CONTROL_SIZE = "sm";
+const chipClass = cn(
+  "filter-bar-chip relative flex max-w-full items-stretch divide-x divide-border overflow-hidden rounded-full",
+  inputSurfaceAndFocusWithinStyle,
+  controlHeight[FILTER_BAR_CONTROL_SIZE]
+);
+const editableSegmentClass = cn(
+  segmentClass,
+  "cursor-pointer hover:bg-fill-subtle hover:text-foreground",
+  "focus-visible:bg-fill-hover focus-visible:text-foreground data-[popup-open]:bg-fill-hover data-[popup-open]:text-foreground"
+);
+function FilterBarFieldLabel({ field, label }) {
+  const Icon = field?.icon;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon && /* @__PURE__ */ jsx(Icon, { className: "size-[1.1em] shrink-0", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: label ?? field?.label })
+  ] });
+}
+const fieldSegmentAccentStyle = (field) => field?.color ? { color: field.color } : void 0;
+const settledSegments = (from, operatorImplied) => {
+  if (from === "none") return 0;
+  if (from === "field" || operatorImplied) return 1;
+  return 2;
+};
+const formatValue = (value, field) => {
+  const suggestions = getFieldSuggestions(field);
+  const options = Array.isArray(suggestions) ? suggestions : void 0;
+  const label = (v) => options?.find((o) => o.value === String(v))?.label ?? String(v);
+  return Array.isArray(value) ? value.map(label).join(", ") : label(value);
+};
+const ChipContext = createContext(null);
+const useChip = () => {
+  const chip = useContext(ChipContext);
+  if (!chip) throw new Error("FilterBarChip segments must be rendered inside <FilterBarChip>.");
+  return chip;
+};
+function isInsidePopup(target) {
+  return target instanceof Element && Boolean(target.closest('[data-slot="filter-bar-editor"]'));
+}
+function FilterBarChip({
+  item,
+  readOnly = false,
+  removable = true,
+  draft = false,
+  className,
+  children
+}) {
+  const ctx = useFilterBarContext();
+  const [openSegment, setOpenSegment] = useState(null);
+  const field = ctx.getField(item.fieldId);
+  const operator = ctx.getOperator(item.operatorId);
+  const index = ctx.items.findIndex((i) => i.id === item.id);
+  const rootRef = useRef(null);
+  const leaving = ctx.leaving.has(item.id);
+  const pinned = !draft && (readOnly || !removable);
+  const { registerNonRemovable, settleRemove } = ctx;
+  useEffect(() => {
+    registerNonRemovable(item.id, pinned);
+    return () => registerNonRemovable(item.id, false);
+  }, [registerNonRemovable, item.id, pinned]);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!leaving || !root) return;
+    const animations = typeof root.getAnimations === "function" ? root.getAnimations({ subtree: true }) : [];
+    if (animations.length === 0) {
+      settleRemove(item.id);
+      return;
+    }
+    let cancelled = false;
+    Promise.all(animations.map((animation) => animation.finished)).then(() => {
+      if (!cancelled) settleRemove(item.id);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [leaving, item.id, settleRemove]);
+  const operatorImplied = field ? ctx.getFieldOperators(field).length === 1 : false;
+  const label = [
+    field?.label ?? item.fieldId,
+    operatorImplied ? "" : operator?.label ?? item.operatorId,
+    draft ? "" : formatValue(item.value, field)
+  ].filter(Boolean).join(" ");
+  const commit = !draft && ctx.lastCommit?.item.id === item.id ? ctx.lastCommit : null;
+  const from = draft ? ctx.draft?.from ?? "none" : commit?.from ?? "none";
+  const settled = settledSegments(from, operatorImplied);
+  const shine = commit?.glint ?? false;
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (readOnly || draft || leaving || isInsidePopup(event.target)) return;
+      const segments = Array.from(rootRef.current?.querySelectorAll("[data-filter-bar-segment]") ?? []);
+      const current = segments.findIndex((el) => el === event.target);
+      switch (event.key) {
+        case "ArrowRight": {
+          event.preventDefault();
+          const next = segments[current + 1];
+          if (next) next.focus();
+          else if (!ctx.focusChip(index + 1, 1, "field")) ctx.focusInput();
+          return;
+        }
+        case "ArrowLeft": {
+          event.preventDefault();
+          const prev = segments[current - 1];
+          if (prev) prev.focus();
+          else ctx.focusChip(index - 1, -1, "remove");
+          return;
+        }
+        case "Delete":
+        case "Backspace":
+          if (!removable) return;
+          event.preventDefault();
+          ctx.removeItem(item.id);
+          ctx.focusAfterRemove(index);
+          return;
+      }
+    },
+    [readOnly, draft, leaving, removable, ctx, index, item.id]
+  );
+  const chipValue = useMemo(
+    () => ({ item, index, field, operator, openSegment, setOpenSegment, readOnly, draft, leaving, operatorImplied }),
+    [item, index, field, operator, openSegment, readOnly, draft, leaving, operatorImplied]
+  );
+  const content = children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(FilterBarChipField, {}),
+    /* @__PURE__ */ jsx(FilterBarChipOperator, {}),
+    /* @__PURE__ */ jsx(FilterBarChipValue, {}),
+    removable && /* @__PURE__ */ jsx(FilterBarChipRemove, {})
+  ] });
+  return /* @__PURE__ */ jsx(ChipContext.Provider, { value: chipValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      role: "group",
+      "aria-label": label,
+      "aria-hidden": draft || leaving || void 0,
+      "data-slot": "filter-bar-chip",
+      "data-draft": draft || void 0,
+      "data-readonly": readOnly || void 0,
+      "data-leaving": leaving || void 0,
+      "data-shine": shine && !leaving || void 0,
+      className: cn(chipClass, leaving && "pointer-events-none", className),
+      style: {
+        "--filter-bar-segments-settled": settled,
+        "--filter-bar-chip-shine": field?.color ?? "currentColor"
+      },
+      onKeyDown: handleKeyDown,
+      onClick: (event) => event.stopPropagation(),
+      onAnimationEnd: (event) => {
+        if (event.animationName === "filter-bar-chip-shine") ctx.settleCommit();
+      },
+      children: [
+        readOnly && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(segmentClass, "pr-0 text-muted-foreground [--filter-bar-segment-padding:0.5rem_0]"),
+            title: "This filter is locked",
+            children: /* @__PURE__ */ jsx(LockIcon, { className: "size-[1.1em]" })
+          }
+        ),
+        content
+      ]
+    }
+  ) });
+}
+const SegmentPopupContext = createContext({ highlighted: null });
+function SegmentSearchInput({
+  placeholder,
+  icon: Icon = SearchIcon,
+  inputMode,
+  onKeyDown
+}) {
+  const { highlighted } = useContext(SegmentPopupContext);
+  return /* @__PURE__ */ jsxs("div", { className: comboboxStyles.searchContainer, children: [
+    /* @__PURE__ */ jsx(Icon, { className: comboboxStyles.searchIcon }),
+    /* @__PURE__ */ jsx(
+      Combobox.Input,
+      {
+        className: comboboxStyles.searchInput,
+        placeholder,
+        inputMode,
+        onKeyDown: (event) => onKeyDown?.(event, highlighted)
+      }
+    )
+  ] });
+}
+function SegmentCombobox({
+  segment,
+  label,
+  ariaLabel,
+  items,
+  itemToString,
+  filter,
+  value = null,
+  query,
+  onQueryChange,
+  onSelect,
+  onOpen,
+  children
+}) {
+  const ctx = useFilterBarContext();
+  const chip = useChip();
+  const container = usePortalContainer();
+  const open = chip.openSegment === segment;
+  const [highlighted, setHighlighted] = useState(null);
+  const isField = segment === "field";
+  const content = isField ? /* @__PURE__ */ jsx(FilterBarFieldLabel, { field: chip.field, label }) : /* @__PURE__ */ jsx("span", { className: "truncate", children: label });
+  if (chip.readOnly || chip.draft || chip.leaving) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(segmentClass, isField && "text-foreground"),
+        style: isField ? fieldSegmentAccentStyle(chip.field) : void 0,
+        title: label,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Combobox.Root,
+    {
+      items,
+      itemToStringLabel: itemToString,
+      filter,
+      value,
+      onValueChange: (item, details) => {
+        details.cancel();
+        if (item !== null) onSelect(item);
+      },
+      inputValue: query,
+      onInputValueChange: (next, details) => {
+        if (details.reason === "input-change") onQueryChange(next);
+      },
+      onItemHighlighted: (item) => setHighlighted(item ?? null),
+      open,
+      onOpenChange: (next) => {
+        if (next) onOpen?.();
+        else onQueryChange("");
+        chip.setOpenSegment(next ? segment : null);
+      },
+      autoHighlight: "always",
+      modal: false,
+      children: [
+        /* @__PURE__ */ jsx(
+          Combobox.Trigger,
+          {
+            ref: (el) => ctx.registerSegment(chip.item.id, segment, el),
+            render: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-filter-bar-segment": "",
+                tabIndex: segment === "value" ? 0 : -1,
+                "aria-label": `${ariaLabel}: ${label}`,
+                title: label,
+                className: cn(editableSegmentClass, isField && "text-foreground"),
+                style: isField ? fieldSegmentAccentStyle(chip.field) : void 0
+              }
+            ),
+            children: content
+          }
+        ),
+        /* @__PURE__ */ jsx(Combobox.Portal, { container, children: /* @__PURE__ */ jsx(
+          Combobox.Positioner,
+          {
+            align: "start",
+            sideOffset: MENU_SIDE_OFFSET,
+            positionMethod: FLOATING_POSITION_METHOD,
+            className: comboboxStyles.positioner,
+            children: /* @__PURE__ */ jsx(Combobox.Popup, { className: cn(comboboxStyles.popup, "min-w-44"), "data-slot": "filter-bar-editor", children: /* @__PURE__ */ jsx(SegmentPopupContext.Provider, { value: { highlighted }, children }) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+const fieldLabel = (field) => field.label;
+const operatorLabel = (operator) => operator.label;
+const optionLabel = (option) => option.label ?? option.value;
+function FieldEditor() {
+  const ctx = useFilterBarContext();
+  const chip = useChip();
+  const [query, setQuery] = useState("");
+  const onSelect = useCallback(
+    (field) => {
+      const allowed = ctx.getFieldOperators(field);
+      const nextOperator = allowed.find((o) => o.id === chip.item.operatorId) ?? allowed[0];
+      const arityChanged = nextOperator?.arity !== chip.operator?.arity;
+      ctx.updateItem(chip.item.id, {
+        fieldId: field.id,
+        operatorId: nextOperator?.id ?? chip.item.operatorId,
+        value: arityChanged || field.id !== chip.item.fieldId ? emptyValueFor(nextOperator) : chip.item.value
+      });
+      chip.setOpenSegment(null);
+    },
+    [ctx, chip]
+  );
+  return /* @__PURE__ */ jsxs(
+    SegmentCombobox,
+    {
+      segment: "field",
+      ariaLabel: "Field",
+      label: chip.field?.label ?? chip.item.fieldId,
+      items: ctx.fields,
+      itemToString: fieldLabel,
+      filter: matchesQueryFilter,
+      value: chip.field,
+      query,
+      onQueryChange: setQuery,
+      onSelect,
+      children: [
+        /* @__PURE__ */ jsx(SegmentSearchInput, { placeholder: "Change field…" }),
+        /* @__PURE__ */ jsx(
+          FilterBarOptionList,
+          {
+            "aria-label": "Fields",
+            getKey: (f) => f.id,
+            renderOption: (f) => /* @__PURE__ */ jsx(FilterBarFieldLabel, { field: f }),
+            emptyText: "No matching field."
+          }
+        )
+      ]
+    }
+  );
+}
+function OperatorEditor() {
+  const ctx = useFilterBarContext();
+  const chip = useChip();
+  const [query, setQuery] = useState("");
+  const options = useMemo(() => chip.field ? ctx.getFieldOperators(chip.field) : ctx.operators, [ctx, chip.field]);
+  const onSelect = useCallback(
+    (operator) => {
+      const arityChanged = (operator.arity ?? "one") !== (chip.operator?.arity ?? "one");
+      ctx.updateItem(chip.item.id, {
+        operatorId: operator.id,
+        value: arityChanged ? emptyValueFor(operator) : chip.item.value
+      });
+      chip.setOpenSegment(null);
+    },
+    [ctx, chip]
+  );
+  return /* @__PURE__ */ jsxs(
+    SegmentCombobox,
+    {
+      segment: "operator",
+      ariaLabel: "Operator",
+      label: chip.operator?.label ?? chip.item.operatorId,
+      items: options,
+      itemToString: operatorLabel,
+      filter: matchesQueryFilter,
+      value: chip.operator,
+      query,
+      onQueryChange: setQuery,
+      onSelect,
+      children: [
+        /* @__PURE__ */ jsx(SegmentSearchInput, { placeholder: "Change operator…" }),
+        /* @__PURE__ */ jsx(
+          FilterBarOptionList,
+          {
+            "aria-label": "Operators",
+            getKey: (o) => o.id,
+            renderOption: (o) => o.label,
+            emptyText: "No matching operator."
+          }
+        )
+      ]
+    }
+  );
+}
+function ValueEditor() {
+  const ctx = useFilterBarContext();
+  const chip = useChip();
+  const open = chip.openSegment === "value";
+  const [query, setQuery] = useState("");
+  const close = useCallback(() => chip.setOpenSegment(null), [chip]);
+  const onCommit = useCallback(
+    (value) => {
+      ctx.updateItem(chip.item.id, { value });
+      close();
+    },
+    [ctx, chip.item.id, close]
+  );
+  const step = useValueStep({
+    field: chip.field,
+    operator: chip.operator,
+    query,
+    enabled: open,
+    initialValue: chip.item.value,
+    onCommit
+  });
+  const ValueInput = VALUE_INPUTS[chip.field?.type ?? "text"];
+  return /* @__PURE__ */ jsx(
+    SegmentCombobox,
+    {
+      segment: "value",
+      ariaLabel: "Value",
+      label: formatValue(chip.item.value, chip.field) || "…",
+      items: step.options,
+      itemToString: optionLabel,
+      filter: null,
+      query,
+      onQueryChange: setQuery,
+      onSelect: step.handleSelect,
+      onOpen: () => setQuery(!Array.isArray(chip.item.value) && !chip.field?.suggestions ? String(chip.item.value) : ""),
+      children: /* @__PURE__ */ jsx(ValueInput, { step, onCancel: close })
+    }
+  );
+}
+function ValueOptions({ step, onCancel }) {
+  const chip = useChip();
+  const modEnterLabel = useIsApplePlatform() ? "⌘↵" : "Ctrl ↵";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    step.hasSuggestions && /* @__PURE__ */ jsx(
+      FilterBarOptionList,
+      {
+        "aria-label": "Values",
+        "aria-multiselectable": step.isMany || void 0,
+        getKey: (o) => o.value,
+        renderOption: (o) => o.label ?? o.value,
+        isSelected: (o) => step.isMany ? step.selected.includes(o.value) : String(chip.item.value) === o.value,
+        isLoading: step.isLoading,
+        error: step.error,
+        emptyText: step.allowFreeText ? "No suggestions — press Enter to use your text." : "No matching value."
+      }
+    ),
+    step.isMany && /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center justify-end gap-1 border-t p-1", children: [
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "default", onClick: () => step.commitSelection() || step.commitFreeText(), children: [
+        "Done",
+        /* @__PURE__ */ jsx(Kbd, { size: "xs", children: modEnterLabel })
+      ] })
+    ] })
+  ] });
+}
+function FreeTextValueInput({
+  step,
+  onCancel,
+  inputMode,
+  noun
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SegmentSearchInput,
+      {
+        icon: step.hasSuggestions ? SearchIcon : PencilIcon,
+        inputMode,
+        placeholder: step.hasSuggestions ? step.allowFreeText ? `Search or type a ${noun}…` : `Search ${noun}s…` : `Type a ${noun}…`,
+        onKeyDown: (event, highlighted) => {
+          const highlightedOption = step.hasSuggestions ? highlighted : null;
+          const handled = step.handleKeyDown(event, highlightedOption);
+          if (handled || event.key === "Enter" && highlightedOption === null) event.preventBaseUIHandler();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(ValueOptions, { step, onCancel })
+  ] });
+}
+function TextValueInput(props) {
+  return /* @__PURE__ */ jsx(FreeTextValueInput, { ...props, noun: "value" });
+}
+function NumberValueInput(props) {
+  return /* @__PURE__ */ jsx(FreeTextValueInput, { ...props, inputMode: "decimal", noun: "number" });
+}
+function BooleanValueInput(props) {
+  return /* @__PURE__ */ jsx(ValueOptions, { ...props });
+}
+const VALUE_INPUTS = {
+  text: TextValueInput,
+  number: NumberValueInput,
+  boolean: BooleanValueInput
+};
+function FilterBarChipField() {
+  return /* @__PURE__ */ jsx(FieldEditor, {});
+}
+function FilterBarChipOperator() {
+  const chip = useChip();
+  if (chip.operatorImplied) return null;
+  if (chip.draft && !chip.operator) return null;
+  return /* @__PURE__ */ jsx(OperatorEditor, {});
+}
+function FilterBarChipValue() {
+  const chip = useChip();
+  if (chip.draft || (chip.operator?.arity ?? "one") === "none") return null;
+  return /* @__PURE__ */ jsx(ValueEditor, {});
+}
+function FilterBarChipRemove() {
+  const ctx = useFilterBarContext();
+  const chip = useChip();
+  if (chip.readOnly || chip.draft) return null;
+  const removeClass = cn(editableSegmentClass, "px-1.5 text-muted-foreground [--filter-bar-segment-padding:0.375rem]");
+  if (chip.leaving) {
+    return /* @__PURE__ */ jsx("span", { className: removeClass, children: /* @__PURE__ */ jsx(XIcon, { className: "size-[1.1em]" }) });
+  }
+  const label = `Remove ${chip.field?.label ?? chip.item.fieldId} filter`;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-filter-bar-segment": "",
+      tabIndex: -1,
+      "aria-label": label,
+      title: label,
+      ref: (el) => ctx.registerSegment(chip.item.id, "remove", el),
+      className: removeClass,
+      onClick: () => {
+        ctx.removeItem(chip.item.id);
+        ctx.focusAfterRemove(chip.index);
+      },
+      children: /* @__PURE__ */ jsx(XIcon, { className: "size-[1.1em]" })
+    }
+  );
+}
+FilterBarChip.Field = FilterBarChipField;
+FilterBarChip.Operator = FilterBarChipOperator;
+FilterBarChip.Value = FilterBarChipValue;
+FilterBarChip.Remove = FilterBarChipRemove;
+
+export { FilterBarChip as F, FilterBarFieldLabel as a, useValueStep as b, FILTER_BAR_CONTROL_SIZE as c, FilterBarOptionList as d, editableSegmentClass as e, fieldSegmentAccentStyle as f, FilterBarProvider as g, FilterBarChipField as h, FilterBarChipOperator as i, FilterBarChipRemove as j, FilterBarChipValue as k, matchesQueryFilter as m, segmentClass as s, useFilterBarContext as u };
+//# sourceMappingURL=filter-bar-chip-C-JxWUU8.js.map