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

package/dist/filter-bar-chip-CR_L2kMF.cjs

@@ -0,0 +1,853 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const comboboxStyles = require('./combobox-styles-BjTWZmnO.cjs');
+const combobox = require('@base-ui/react/combobox');
+const spinner = require('./spinner-DcDI1lhS.cjs');
+const utils_cn = require('./cn-DPfV6E6L.cjs');
+const Button = require('./Button-B1TWWXCy.cjs');
+const kbd = require('./kbd-D5WtLU30.cjs');
+const primitives_floating = require('./primitives/floating.cjs.js');
+const primitives_menuItem = require('./primitives/menu-item.cjs.js');
+const primitives_portalContainer = require('./primitives/portal-container.cjs.js');
+const hooks_useKeyboardShortcutLabel = require('./hooks/use-keyboard-shortcut-label.cjs.js');
+
+const SEGMENTS_LEFT_TO_RIGHT = ["field", "operator", "value", "remove"];
+const SEGMENTS_RIGHT_TO_LEFT = [...SEGMENTS_LEFT_TO_RIGHT].reverse();
+const FilterBarContext = React.createContext(null);
+function useFilterBarContext() {
+  const ctx = React.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 = React.useRef(/* @__PURE__ */ new Map());
+  const inputRef = React.useRef(null);
+  const itemsRef = React.useRef(value);
+  itemsRef.current = value;
+  const [announcement, setAnnouncement] = React.useState("");
+  const [nonRemovableIds, setNonRemovableIds] = React.useState(() => /* @__PURE__ */ new Set());
+  const getField = React.useCallback((fieldId) => fields.find((f) => f.id === fieldId), [fields]);
+  const getOperator = React.useCallback((operatorId) => operators.find((o) => o.id === operatorId), [operators]);
+  const getFieldOperators = React.useCallback(
+    (field) => {
+      if (!field.operators) return operators;
+      const allowed = new Set(field.operators);
+      return operators.filter((o) => allowed.has(o.id));
+    },
+    [operators]
+  );
+  const announce = React.useCallback((message) => setAnnouncement(message), []);
+  const addItem = React.useCallback(
+    (item) => {
+      onValueChange([...itemsRef.current, { ...item, id: createFilterId() }]);
+      announce("Filter added");
+    },
+    [onValueChange, announce]
+  );
+  const updateItem = React.useCallback(
+    (id, patch) => {
+      onValueChange(itemsRef.current.map((item) => item.id === id ? { ...item, ...patch } : item));
+    },
+    [onValueChange]
+  );
+  const removeItem = React.useCallback(
+    (id) => {
+      onValueChange(itemsRef.current.filter((item) => item.id !== id));
+      announce("Filter removed");
+    },
+    [onValueChange, announce]
+  );
+  const clear = React.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 = React.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 = React.useCallback((itemId, segment, el) => {
+    const key = `${itemId}:${segment}`;
+    if (el) segments.current.set(key, el);
+    else segments.current.delete(key);
+  }, []);
+  const registerInput = React.useCallback((el) => {
+    inputRef.current = el;
+  }, []);
+  const focusInput = React.useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+  const focusChip = React.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 = React.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 = React.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__ */ jsxRuntime.jsx(FilterBarContext.Provider, { value: ctx, children });
+}
+
+function FilterBarOptionList({
+  getKey,
+  renderOption,
+  isSelected,
+  isLoading,
+  error,
+  emptyText = "No results.",
+  "aria-label": ariaLabel,
+  "aria-multiselectable": multiselectable
+}) {
+  const idle = !isLoading && error === void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isLoading && /* @__PURE__ */ jsxRuntime.jsxs(combobox.Combobox.Status, { className: comboboxStyles.comboboxStyles.empty, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "sm" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading…" })
+    ] }),
+    !isLoading && error !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Status, { className: comboboxStyles.comboboxStyles.empty, children: "Couldn't load values." }),
+    /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Empty, { className: comboboxStyles.comboboxStyles.empty, children: idle ? emptyText : null }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      combobox.Combobox.List,
+      {
+        "aria-label": ariaLabel,
+        "aria-multiselectable": multiselectable,
+        className: utils_cn.cn(comboboxStyles.comboboxStyles.list, "max-h-[min(var(--max-height-dropdown-max-height),60dvh)]"),
+        children: (option) => {
+          const selected = isSelected?.(option) ?? false;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            combobox.Combobox.Item,
+            {
+              value: option,
+              "data-selected": selected || void 0,
+              className: utils_cn.cn(comboboxStyles.comboboxStyles.item, "min-w-0"),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1.5 truncate", children: renderOption(option) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.comboboxStyles.checkContainer, children: isSelected ? selected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: comboboxStyles.comboboxStyles.checkIcon }) : /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: comboboxStyles.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] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState(void 0);
+  const requestId = React.useRef(0);
+  const resolverRef = React.useRef(resolver);
+  resolverRef.current = resolver;
+  const hasResolver = Boolean(resolver);
+  React.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 = React.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] = React.useState(() => toStrings(initialValue));
+  const initialValueRef = React.useRef(initialValue);
+  initialValueRef.current = initialValue;
+  React.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 = React.useCallback((value) => {
+    setSelected((current) => current.includes(value) ? current.filter((v) => v !== value) : [...current, value]);
+  }, []);
+  const commit = React.useCallback(
+    (values) => onCommit(Array.isArray(values) ? values.map((v) => parseFieldValue(type, v)) : parseFieldValue(type, values)),
+    [onCommit, type]
+  );
+  const handleSelect = React.useCallback(
+    (option) => {
+      if (isMany) toggle(option.value);
+      else commit(option.value);
+    },
+    [isMany, toggle, commit]
+  );
+  const commitSelection = React.useCallback(() => {
+    if (selected.length === 0) return false;
+    commit(selected);
+    return true;
+  }, [selected, commit]);
+  const canCommitFreeText = React.useCallback(
+    (text) => allowFreeText && text.length > 0 && (type !== "number" || Number.isFinite(Number(text))),
+    [allowFreeText, type]
+  );
+  const commitFreeText = React.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 = React.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 = utils_cn.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 = utils_cn.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-[1.1em] shrink-0", "aria-hidden": true }),
+    /* @__PURE__ */ jsxRuntime.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 = React.createContext(null);
+const useChip = () => {
+  const chip = React.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] = React.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 = React.useRef(null);
+  const pinned = readOnly || !removable;
+  const { registerNonRemovable } = ctx;
+  React.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 = React.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 = React.useMemo(
+    () => ({ item, index, field, operator, openSegment, setOpenSegment, readOnly, operatorImplied }),
+    [item, index, field, operator, openSegment, readOnly, operatorImplied]
+  );
+  const content = children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FilterBarChipField, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(FilterBarChipOperator, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(FilterBarChipValue, {}),
+    removable && /* @__PURE__ */ jsxRuntime.jsx(FilterBarChipRemove, {})
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(ChipContext.Provider, { value: chipValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rootRef,
+      role: "group",
+      "aria-label": label,
+      "data-slot": "filter-bar-chip",
+      "data-readonly": readOnly || void 0,
+      className: utils_cn.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__ */ jsxRuntime.jsx("span", { className: utils_cn.cn(segmentClass, "pr-0 text-neutral3"), title: "This filter is locked", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LockIcon, { className: "size-[1.1em]" }) }),
+        content
+      ]
+    }
+  ) });
+}
+const SegmentPopupContext = React.createContext({ highlighted: null });
+function SegmentSearchInput({
+  placeholder,
+  icon: Icon = lucideReact.SearchIcon,
+  inputMode,
+  onKeyDown
+}) {
+  const { highlighted } = React.useContext(SegmentPopupContext);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: comboboxStyles.comboboxStyles.searchContainer, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: comboboxStyles.comboboxStyles.searchIcon }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      combobox.Combobox.Input,
+      {
+        className: comboboxStyles.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 = primitives_portalContainer.usePortalContainer();
+  const open = chip.openSegment === segment;
+  const [highlighted, setHighlighted] = React.useState(null);
+  const isField = segment === "field";
+  const content = isField ? /* @__PURE__ */ jsxRuntime.jsx(FilterBarFieldLabel, { field: chip.field, label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label });
+  if (chip.readOnly) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: utils_cn.cn(segmentClass, isField && "text-neutral6"),
+        style: isField ? fieldSegmentAccentStyle(chip.field) : void 0,
+        title: label,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    combobox.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__ */ jsxRuntime.jsx(
+          combobox.Combobox.Trigger,
+          {
+            ref: (el) => ctx.registerSegment(chip.item.id, segment, el),
+            render: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "data-filter-bar-segment": "",
+                tabIndex: segment === "value" ? 0 : -1,
+                "aria-label": `${ariaLabel}: ${label}`,
+                title: label,
+                className: utils_cn.cn(editableSegmentClass, isField && "text-neutral6"),
+                style: isField ? fieldSegmentAccentStyle(chip.field) : void 0
+              }
+            ),
+            children: content
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
+          combobox.Combobox.Positioner,
+          {
+            align: "start",
+            sideOffset: primitives_menuItem.MENU_SIDE_OFFSET,
+            positionMethod: primitives_floating.FLOATING_POSITION_METHOD,
+            className: comboboxStyles.comboboxStyles.positioner,
+            children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Popup, { className: utils_cn.cn(comboboxStyles.comboboxStyles.popup, "min-w-44"), "data-slot": "filter-bar-editor", children: /* @__PURE__ */ jsxRuntime.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] = React.useState("");
+  const onSelect = React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SegmentSearchInput, { placeholder: "Change field…" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FilterBarOptionList,
+          {
+            "aria-label": "Fields",
+            getKey: (f) => f.id,
+            renderOption: (f) => /* @__PURE__ */ jsxRuntime.jsx(FilterBarFieldLabel, { field: f }),
+            emptyText: "No matching field."
+          }
+        )
+      ]
+    }
+  );
+}
+function OperatorEditor() {
+  const ctx = useFilterBarContext();
+  const chip = useChip();
+  const [query, setQuery] = React.useState("");
+  const options = React.useMemo(() => chip.field ? ctx.getFieldOperators(chip.field) : ctx.operators, [ctx, chip.field]);
+  const onSelect = React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SegmentSearchInput, { placeholder: "Change operator…" }),
+        /* @__PURE__ */ jsxRuntime.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] = React.useState("");
+  const close = React.useCallback(() => chip.setOpenSegment(null), [chip]);
+  const onCommit = React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ValueInput, { step, onCancel: close })
+    }
+  );
+}
+function ValueOptions({ step, onCancel }) {
+  const chip = useChip();
+  const modEnterLabel = hooks_useKeyboardShortcutLabel.useIsApplePlatform() ? "⌘↵" : "Ctrl ↵";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    step.hasSuggestions && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "border-border1 flex items-center justify-end gap-1 border-t p-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { size: "xs", variant: "ghost", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { size: "xs", variant: "default", onClick: () => step.commitSelection() || step.commitFreeText(), children: [
+        "Done",
+        /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "xs", children: modEnterLabel })
+      ] })
+    ] })
+  ] });
+}
+function FreeTextValueInput({
+  step,
+  onCancel,
+  inputMode,
+  noun
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SegmentSearchInput,
+      {
+        icon: step.hasSuggestions ? lucideReact.SearchIcon : lucideReact.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__ */ jsxRuntime.jsx(ValueOptions, { step, onCancel })
+  ] });
+}
+function TextValueInput(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(FreeTextValueInput, { ...props, noun: "value" });
+}
+function NumberValueInput(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(FreeTextValueInput, { ...props, inputMode: "decimal", noun: "number" });
+}
+function BooleanValueInput(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ValueOptions, { ...props });
+}
+const VALUE_INPUTS = {
+  text: TextValueInput,
+  number: NumberValueInput,
+  boolean: BooleanValueInput
+};
+function FilterBarChipField() {
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldEditor, {});
+}
+function FilterBarChipOperator() {
+  const chip = useChip();
+  if (chip.operatorImplied) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(OperatorEditor, {});
+}
+function FilterBarChipValue() {
+  const chip = useChip();
+  if ((chip.operator?.arity ?? "one") === "none") return null;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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: utils_cn.cn(editableSegmentClass, "px-1.5 text-neutral3"),
+      onClick: () => {
+        ctx.removeItem(chip.item.id);
+        ctx.focusAfterRemove(chip.index);
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-[1.1em]" })
+    }
+  );
+}
+FilterBarChip.Field = FilterBarChipField;
+FilterBarChip.Operator = FilterBarChipOperator;
+FilterBarChip.Value = FilterBarChipValue;
+FilterBarChip.Remove = FilterBarChipRemove;
+
+exports.FilterBarChip = FilterBarChip;
+exports.FilterBarChipField = FilterBarChipField;
+exports.FilterBarChipOperator = FilterBarChipOperator;
+exports.FilterBarChipRemove = FilterBarChipRemove;
+exports.FilterBarChipValue = FilterBarChipValue;
+exports.FilterBarFieldLabel = FilterBarFieldLabel;
+exports.FilterBarOptionList = FilterBarOptionList;
+exports.FilterBarProvider = FilterBarProvider;
+exports.editableSegmentClass = editableSegmentClass;
+exports.fieldSegmentAccentStyle = fieldSegmentAccentStyle;
+exports.matchesQueryFilter = matchesQueryFilter;
+exports.segmentClass = segmentClass;
+exports.useFilterBarContext = useFilterBarContext;
+exports.useValueStep = useValueStep;
+//# sourceMappingURL=filter-bar-chip-CR_L2kMF.cjs.map