@mastra/playground-ui 55.0.0 → 56.0.0-alpha.10

package/dist/filter-bar-chip-DyITaBNj.js

@@ -0,0 +1,853 @@
+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-BMerfYPX.js';
+import { Combobox } from '@base-ui/react/combobox';
+import { S as Spinner } from './spinner-SvnJqdcS.js';
+import { useFluidMenu, FluidMenuItems, useFluidMenuItemRef } from './primitives/fluid-menu.es.js';
+import { c as cn } from './cn-C6s2yXwM.js';
+import { B as Button } from './Button-DS6O6fvU.js';
+import { K as Kbd } from './kbd-H5Qu573u.js';
+import { FLOATING_POSITION_METHOD } from './primitives/floating.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';
+
+const SEGMENTS_LEFT_TO_RIGHT = ["field", "operator", "value", "remove"];
+const SEGMENTS_RIGHT_TO_LEFT = [...SEGMENTS_LEFT_TO_RIGHT].reverse();
+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,
+  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 addItem = useCallback(
+    (item) => {
+      onValueChange([...itemsRef.current, { ...item, id: createFilterId() }]);
+      announce("Filter added");
+    },
+    [onValueChange, announce]
+  );
+  const updateItem = useCallback(
+    (id, patch) => {
+      onValueChange(itemsRef.current.map((item) => item.id === id ? { ...item, ...patch } : item));
+    },
+    [onValueChange]
+  );
+  const removeItem = useCallback(
+    (id) => {
+      onValueChange(itemsRef.current.filter((item) => item.id !== id));
+      announce("Filter removed");
+    },
+    [onValueChange, announce]
+  );
+  const clear = useCallback(() => {
+    onValueChange(itemsRef.current.filter((item) => nonRemovableIds.has(item.id)));
+    announce("All filters removed");
+  }, [onValueChange, announce, nonRemovableIds]);
+  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 focusChip = useCallback((fromIndex, direction, segment) => {
+    const items = itemsRef.current;
+    const fallbacks = direction === -1 ? SEGMENTS_RIGHT_TO_LEFT : SEGMENTS_LEFT_TO_RIGHT;
+    for (let i = fromIndex; i >= 0 && i < items.length; i += direction) {
+      const item = items[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) => {
+      const next = itemsRef.current[removedIndex + 1] ?? itemsRef.current[removedIndex - 1];
+      if (next) {
+        const el = segments.current.get(`${next.id}:value`) ?? segments.current.get(`${next.id}:field`);
+        if (el) {
+          el.focus();
+          return;
+        }
+      }
+      focusInput();
+    },
+    [focusInput]
+  );
+  const ctx = useMemo(
+    () => ({
+      fields,
+      operators,
+      items: value,
+      addItem,
+      updateItem,
+      removeItem,
+      clear,
+      hasRemovableItems,
+      registerNonRemovable,
+      getField,
+      getOperator,
+      getFieldOperators,
+      registerSegment,
+      registerInput,
+      focusChip,
+      focusInput,
+      focusAfterRemove,
+      announce,
+      announcement,
+      ariaLabel
+    }),
+    [
+      fields,
+      operators,
+      value,
+      addItem,
+      updateItem,
+      removeItem,
+      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(--max-height-dropdown-max-height),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(
+  "flex max-w-48 min-w-0 items-center gap-1 px-2 text-ui-sm leading-ui-sm whitespace-nowrap outline-none",
+  "first:rounded-l-lg last:rounded-r-lg"
+);
+const editableSegmentClass = cn(
+  segmentClass,
+  "cursor-pointer transition-colors hover:bg-neutral6/5 hover:text-neutral6",
+  "focus-visible:bg-neutral6/10 focus-visible:text-neutral6 data-[popup-open]:bg-neutral6/10 data-[popup-open]:text-neutral6"
+);
+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 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, 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 pinned = readOnly || !removable;
+  const { registerNonRemovable } = ctx;
+  useEffect(() => {
+    registerNonRemovable(item.id, pinned);
+    return () => registerNonRemovable(item.id, false);
+  }, [registerNonRemovable, item.id, pinned]);
+  const operatorImplied = field ? ctx.getFieldOperators(field).length === 1 : false;
+  const label = [
+    field?.label ?? item.fieldId,
+    operatorImplied ? "" : operator?.label ?? item.operatorId,
+    formatValue(item.value, field)
+  ].filter(Boolean).join(" ");
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (readOnly || 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, removable, ctx, index, item.id]
+  );
+  const chipValue = useMemo(
+    () => ({ item, index, field, operator, openSegment, setOpenSegment, readOnly, operatorImplied }),
+    [item, index, field, operator, openSegment, readOnly, 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,
+      "data-slot": "filter-bar-chip",
+      "data-readonly": readOnly || void 0,
+      className: cn(
+        "flex max-w-full items-stretch divide-x divide-border1 rounded-lg border border-border1 bg-surface5 text-neutral5",
+        className
+      ),
+      onKeyDown: handleKeyDown,
+      onClick: (event) => event.stopPropagation(),
+      children: [
+        readOnly && /* @__PURE__ */ jsx("span", { className: cn(segmentClass, "pr-0 text-neutral3"), 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) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(segmentClass, isField && "text-neutral6"),
+        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-neutral6"),
+                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-border1 flex items-center justify-end gap-1 border-t p-1", children: [
+      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "ghost", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsxs(Button, { size: "xs", 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;
+  return /* @__PURE__ */ jsx(OperatorEditor, {});
+}
+function FilterBarChipValue() {
+  const chip = useChip();
+  if ((chip.operator?.arity ?? "one") === "none") return null;
+  return /* @__PURE__ */ jsx(ValueEditor, {});
+}
+function FilterBarChipRemove() {
+  const ctx = useFilterBarContext();
+  const chip = useChip();
+  if (chip.readOnly) return null;
+  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: cn(editableSegmentClass, "px-1.5 text-neutral3"),
+      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, FilterBarOptionList as c, FilterBarProvider as d, editableSegmentClass as e, fieldSegmentAccentStyle as f, FilterBarChipField as g, FilterBarChipOperator as h, FilterBarChipRemove as i, FilterBarChipValue as j, matchesQueryFilter as m, segmentClass as s, useFilterBarContext as u };
+//# sourceMappingURL=filter-bar-chip-DyITaBNj.js.map