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

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

@@ -1,868 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const lucideReact = require('lucide-react');
-const React = require('react');
-const comboboxStyles = require('./combobox-styles-1C3D0JLL.cjs');
-const combobox = require('@base-ui/react/combobox');
-const spinner = require('./spinner-cX-ypfV2.cjs');
-const primitives_fluidMenu = require('./primitives/fluid-menu.cjs.js');
-const utils_cn = require('./cn-BuHW7Wrt.cjs');
-const Button = require('./Button-C2dx_QZN.cjs');
-const kbd = require('./kbd-DjjBBIZN.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 });
-}
-
-const FluidItem = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Item, { ref: primitives_fluidMenu.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 = primitives_fluidMenu.useFluidMenu();
-  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(
-      "div",
-      {
-        className: utils_cn.cn(
-          comboboxStyles.comboboxStyles.listScroller,
-          "max-h-[min(var(--max-height-dropdown-max-height),60dvh)]",
-          menu.containerClassName
-        ),
-        ...menu.getContainerProps({}),
-        children: /* @__PURE__ */ jsxRuntime.jsx(primitives_fluidMenu.FluidMenuItems, { menu, children: /* @__PURE__ */ jsxRuntime.jsx(
-          combobox.Combobox.List,
-          {
-            "aria-label": ariaLabel,
-            "aria-multiselectable": multiselectable,
-            className: comboboxStyles.comboboxStyles.list,
-            children: (option) => {
-              const selected = isSelected?.(option) ?? false;
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                FluidItem,
-                {
-                  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.itemRightSlot, children: /* @__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-BR7Xnpeo.cjs.map