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

package/dist/components/FilterBar.es.js

@@ -1,843 +1,6 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useMemo, useEffect, useCallback, Fragment as Fragment$1 } from 'react';
-import { BracesIcon, ListFilterIcon, PlusIcon, FolderPlusIcon, Trash2Icon, FolderIcon, XIcon } from 'lucide-react';
-import { u as useFilterBarContext, b as findGroup, c as useValueStep, m as matchesQueryFilter, d as alwaysHighlightProps, g as FILTER_BAR_CONTROL_SIZE, h as FilterBarOptionList, a as FilterBarFieldLabel, i as FilterBarOptionLabel, F as FilterBarChip, j as countLeaves, e as editableSegmentClass, k as chipClass, l as FILTER_BAR_SCOPE_ATTR, n as FilterBarProvider } from '../filter-bar-chip-C9CXOudu.js';
-export { o as FilterBarChipField, p as FilterBarChipOperator, q as FilterBarChipRemove, r as FilterBarChipValue } from '../filter-bar-chip-C9CXOudu.js';
-import { flushSync } from 'react-dom';
-import { p as parseFieldValue, i as isFilterBarGroup } from '../types-CIPrYAzY.js';
-import { B as Button } from '../Button-D8a5EWJ5.js';
-import { a as comboboxTriggerClass, c as comboboxStyles } from '../combobox-styles-Cens2tsx.js';
-import { Combobox } from '@base-ui/react/combobox';
-import { K as Kbd } from '../kbd-7Xx2pm9f.js';
-import { T as Txt } from '../Txt-BtIGLRk1.js';
-import { FLOATING_POSITION_METHOD } from '../primitives/floating.es.js';
-import { unstyledFormElementStyle, inputFocusBorderWithin } from '../primitives/form-element.es.js';
-import { MENU_SIDE_OFFSET } from '../primitives/menu-item.es.js';
-import { passwordManagerOptOutProps } from '../primitives/password-manager-autofill.es.js';
-import { usePortalContainer } from '../primitives/portal-container.es.js';
-import { useIsApplePlatform } from '../hooks/use-keyboard-shortcut-label.es.js';
-import { c as cn } from '../cn-CQUhN5Jx.js';
-import { P as Popover, b as PopoverTrigger, a as PopoverContent } from '../popover-BqRniR9J.js';
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-
-const getItemLabel = (item) => "label" in item && item.label ? item.label : "value" in item ? item.value : "";
-const EMPTY_ITEMS = [];
-const ADVANCED_FIELD_ID = "__filter-bar-advanced__";
-const ADVANCED_FIELD = {
-  id: ADVANCED_FIELD_ID,
-  label: "Advanced filter…",
-  icon: BracesIcon,
-  operators: []
-};
-function FilterBarInput(props) {
-  const ctx = useFilterBarContext();
-  if (ctx.inputTarget !== props.groupId) return null;
-  return /* @__PURE__ */ jsx(FilterBarInputImpl, { ...props });
-}
-function FilterBarInputImpl({
-  placeholder = "Filter…",
-  className,
-  "aria-label": ariaLabel = "Add filter",
-  groupId,
-  onLeave
-}) {
-  const ctx = useFilterBarContext();
-  const container = usePortalContainer();
-  const inputRef = useRef(null);
-  const anchorRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState("");
-  const [highlighted, setHighlighted] = useState(null);
-  const [emptyForStepChange, setEmptyForStepChange] = useState(false);
-  const modEnterLabel = useIsApplePlatform() ? "⌘↵" : "Ctrl ↵";
-  const { draft, setDraft: setDraftState, commitDraft } = ctx;
-  const step = !draft ? "field" : !draft.operatorId ? "operator" : "value";
-  const field = draft ? ctx.getField(draft.fieldId) : void 0;
-  const operator = draft?.operatorId ? ctx.getOperator(draft.operatorId) : void 0;
-  const fieldOperators = useMemo(() => field ? ctx.getFieldOperators(field) : [], [ctx, field]);
-  const offerAdvanced = ctx.groupsEnabled && groupId === void 0;
-  const visibleFields = useMemo(() => {
-    const fields = ctx.fields.filter((f) => !f.hidden);
-    return offerAdvanced ? [...fields, ADVANCED_FIELD] : fields;
-  }, [ctx.fields, offerAdvanced]);
-  const targetGroup = groupId ? findGroup(ctx.expression, groupId) : void 0;
-  useEffect(() => {
-    if (groupId) inputRef.current?.focus();
-  }, [groupId]);
-  const withHighlightReset = useCallback((change) => {
-    flushSync(() => setEmptyForStepChange(true));
-    change();
-    setEmptyForStepChange(false);
-  }, []);
-  const setDraft = useCallback(
-    (next) => withHighlightReset(() => setDraftState(next)),
-    [withHighlightReset, setDraftState]
-  );
-  const reset = useCallback(() => {
-    setDraftState(null);
-    setQuery("");
-  }, [setDraftState]);
-  const close = useCallback(() => {
-    setOpen(false);
-    reset();
-  }, [reset]);
-  const commit = useCallback(
-    (fieldId, operatorId, value) => {
-      withHighlightReset(() => commitDraft({ fieldId, operatorId }, value));
-      setQuery("");
-      inputRef.current?.focus();
-    },
-    [withHighlightReset, commitDraft]
-  );
-  const selectOperator = useCallback(
-    (fieldId, next) => {
-      if (next.arity === "none") {
-        commit(fieldId, next.id, "");
-        return;
-      }
-      setDraft({ fieldId, operatorId: next.id });
-      setQuery("");
-    },
-    [commit, setDraft]
-  );
-  const selectField = useCallback(
-    (next) => {
-      if (next.id === ADVANCED_FIELD_ID) {
-        const id = ctx.addGroup(void 0, "or");
-        ctx.setOpenGroup(id);
-        ctx.openGroupInput(id);
-        setQuery("");
-        setOpen(false);
-        return;
-      }
-      const [only, ...rest] = ctx.getFieldOperators(next);
-      if (next.search && only && query.trim() !== "") {
-        commit(next.id, only.id, parseFieldValue(next.type, query));
-        return;
-      }
-      if (only && rest.length === 0) {
-        selectOperator(next.id, only);
-        return;
-      }
-      setDraft({ fieldId: next.id });
-      setQuery("");
-    },
-    [ctx, commit, query, selectOperator, setDraft]
-  );
-  const valueStep = useValueStep({
-    field,
-    operator,
-    query,
-    enabled: open && step === "value",
-    setQuery,
-    onCommit: (value) => {
-      if (draft?.operatorId) commit(draft.fieldId, draft.operatorId, value);
-    }
-  });
-  const leaveGroup = useCallback(() => {
-    if (!groupId) return false;
-    ctx.openGroupInput(void 0);
-    onLeave?.();
-    return true;
-  }, [ctx, groupId, onLeave]);
-  const stepBack = useCallback(() => {
-    if (step === "value" && draft) {
-      const skipOperator = field ? fieldOperators.length === 1 : false;
-      setDraft(skipOperator ? null : { fieldId: draft.fieldId });
-    } else if (step === "operator") setDraft(null);
-    else if (!leaveGroup()) setOpen(false);
-    setQuery("");
-  }, [step, draft, field, fieldOperators, setDraft, leaveGroup]);
-  const handleSelect = (item) => {
-    if (step === "field") selectField(item);
-    else if (step === "operator" && draft) selectOperator(draft.fieldId, item);
-    else valueStep.handleSelect(item);
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      event.stopPropagation();
-      event.preventBaseUIHandler();
-      stepBack();
-      return;
-    }
-    if (!open && (event.key === "ArrowDown" || event.key === "Enter")) {
-      event.preventDefault();
-      event.preventBaseUIHandler();
-      setOpen(true);
-      return;
-    }
-    if (query === "") {
-      if (event.key === "Backspace") {
-        event.preventDefault();
-        event.preventBaseUIHandler();
-        if (step !== "field") stepBack();
-        else if (targetGroup) {
-          const last = targetGroup.nodes.findLast((node) => !ctx.leaving.has(node.id));
-          if (last) ctx.removeItem(last.id);
-          else leaveGroup();
-        } else {
-          const last = ctx.items.findLast((item) => !ctx.leaving.has(item.id));
-          if (last) ctx.removeItem(last.id);
-        }
-        return;
-      }
-      if (event.key === "ArrowLeft" && step === "field") {
-        if (ctx.focusChip(ctx.items.length - 1, -1, "remove")) event.preventDefault();
-        return;
-      }
-    }
-    if (!open) return;
-    if (event.key === "Tab" && highlighted && step !== "value" && (step === "operator" || query !== "")) {
-      event.preventDefault();
-      event.preventBaseUIHandler();
-      handleSelect(highlighted);
-      return;
-    }
-    if (step === "value") {
-      const highlightedOption = valueStep.hasSuggestions ? highlighted : null;
-      const handled = valueStep.handleKeyDown(event, highlightedOption);
-      if (handled || event.key === "Enter" && highlightedOption === null) event.preventBaseUIHandler();
-    }
-  };
-  const optionsForStep = {
-    field: visibleFields,
-    operator: fieldOperators,
-    value: valueStep.options
-  };
-  const items = emptyForStepChange ? EMPTY_ITEMS : optionsForStep[step];
-  const filterItem = useCallback(
-    (item, text, itemToString) => "search" in item && item.search === true || matchesQueryFilter(item, text, itemToString),
-    []
-  );
-  const inputPlaceholder = step === "field" ? placeholder : step === "operator" ? "Operator…" : valueStep.hasSuggestions && valueStep.allowFreeText ? "Search or type a value…" : field?.type === "number" ? "Number…" : "Value…";
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    Combobox.Root,
-    {
-      items,
-      itemToStringLabel: getItemLabel,
-      filter: step === "value" ? null : filterItem,
-      value: null,
-      onValueChange: (item, details) => {
-        details.cancel();
-        if (item) handleSelect(item);
-      },
-      inputValue: query,
-      onInputValueChange: (next, details) => {
-        if (details.reason !== "input-change") return;
-        setQuery(next);
-        if (!open) setOpen(true);
-      },
-      onItemHighlighted: (item) => setHighlighted(item ?? null),
-      open,
-      onOpenChange: (next, details) => {
-        if (!next && details.reason === "escape-key") return;
-        if (!next && details.reason === "outside-press" && details.event.target instanceof Node && inputRef.current?.contains(details.event.target)) {
-          return;
-        }
-        if (next) setOpen(true);
-        else close();
-      },
-      ...alwaysHighlightProps,
-      modal: false,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: anchorRef,
-            "data-slot": "filter-bar-input-trigger",
-            className: cn(
-              // Same trigger recipe as every other DS Combobox (fill, radius, `[&>svg]` icon sizing
-              // and the Button icon offset); the bar itself has no chrome. Focus lives on the
-              // nested input, so the recipe's `focus-visible` border becomes `focus-within`.
-              comboboxTriggerClass({ variant: "default", size: FILTER_BAR_CONTROL_SIZE }),
-              "w-auto cursor-text",
-              "focus-within:bg-fill-hover",
-              inputFocusBorderWithin,
-              step === "field" ? "min-w-40" : "min-w-28",
-              className
-            ),
-            children: [
-              /* @__PURE__ */ jsx(ListFilterIcon, { "aria-hidden": true, className: "ml-[-.3em] shrink-0 text-muted-foreground" }),
-              /* @__PURE__ */ jsx(
-                Combobox.Input,
-                {
-                  ref: (el) => {
-                    inputRef.current = el;
-                    ctx.registerInput(el);
-                  },
-                  "aria-label": ariaLabel,
-                  spellCheck: false,
-                  ...passwordManagerOptOutProps,
-                  "data-slot": "filter-bar-input",
-                  "data-step": step,
-                  "data-target": targetGroup?.id,
-                  inputMode: step === "value" && field?.type === "number" ? "decimal" : void 0,
-                  placeholder: inputPlaceholder,
-                  className: cn(
-                    unstyledFormElementStyle,
-                    "min-w-0 flex-1 bg-transparent",
-                    "placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal focus:placeholder:opacity-70"
-                  ),
-                  onFocus: () => setOpen(true),
-                  onKeyDown: handleKeyDown
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(Combobox.Portal, { container, children: /* @__PURE__ */ jsx(
-          Combobox.Positioner,
-          {
-            anchor: anchorRef,
-            align: "start",
-            sideOffset: MENU_SIDE_OFFSET,
-            positionMethod: FLOATING_POSITION_METHOD,
-            className: comboboxStyles.positioner,
-            children: /* @__PURE__ */ jsxs(
-              Combobox.Popup,
-              {
-                className: cn(comboboxStyles.popup, "w-(--anchor-width) min-w-44"),
-                "data-slot": "filter-bar-editor",
-                children: [
-                  step === "field" && /* @__PURE__ */ jsx(
-                    FilterBarOptionList,
-                    {
-                      "aria-label": "Fields",
-                      getKey: (f) => f.id,
-                      renderOption: (f) => /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(FilterBarFieldLabel, { field: f }),
-                        f.search && query !== "" && /* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate text-muted-foreground", children: [
-                          ctx.getFieldOperators(f)[0]?.label,
-                          ' "',
-                          query,
-                          '"'
-                        ] })
-                      ] }),
-                      emptyText: "No matching field."
-                    }
-                  ),
-                  step === "operator" && /* @__PURE__ */ jsx(
-                    FilterBarOptionList,
-                    {
-                      "aria-label": "Operators",
-                      getKey: (o) => o.id,
-                      renderOption: (o) => o.label,
-                      emptyText: "No matching operator."
-                    }
-                  ),
-                  step === "value" && valueStep.hasOptions && /* @__PURE__ */ jsx(
-                    FilterBarOptionList,
-                    {
-                      "aria-label": "Values",
-                      "aria-multiselectable": valueStep.isMany || void 0,
-                      getKey: (o) => o.value,
-                      renderOption: (option) => /* @__PURE__ */ jsx(FilterBarOptionLabel, { option }),
-                      isSelected: (o) => valueStep.isMany && valueStep.selected.includes(o.value),
-                      isLoading: valueStep.isLoading,
-                      error: valueStep.error,
-                      emptyText: valueStep.allowFreeText ? "No suggestions — press Enter to use your text." : "No matching value."
-                    }
-                  ),
-                  step === "value" && !valueStep.hasSuggestions && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 py-1 pr-1 pl-[.9em]", children: [
-                    /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "muted", children: "Type a value" }),
-                    /* @__PURE__ */ jsxs(
-                      Button,
-                      {
-                        size: "sm",
-                        variant: "default",
-                        disabled: !valueStep.canCommitQuery,
-                        onMouseDown: (e) => e.preventDefault(),
-                        onClick: () => valueStep.submitFreeText(),
-                        children: [
-                          "Apply",
-                          /* @__PURE__ */ jsx(Kbd, { size: "xs", children: "↵" })
-                        ]
-                      }
-                    )
-                  ] }),
-                  step === "value" && valueStep.isMany && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-1 border-t border-border p-1", children: /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      size: "sm",
-                      variant: "default",
-                      onMouseDown: (e) => e.preventDefault(),
-                      onClick: () => valueStep.commitDone(),
-                      children: [
-                        "Done",
-                        /* @__PURE__ */ jsx(Kbd, { size: "xs", children: modEnterLabel })
-                      ]
-                    }
-                  ) })
-                ]
-              }
-            )
-          }
-        ) })
-      ]
-    }
-  ) });
-}
-
-function useSettleOnLeave(id, leaving, rootRef) {
-  const { settleRemove } = useFilterBarContext();
-  useEffect(() => {
-    const root = rootRef.current;
-    if (!leaving || !root) return;
-    const animations = typeof root.getAnimations === "function" ? root.getAnimations({ subtree: true }) : [];
-    if (animations.length === 0) {
-      settleRemove(id);
-      return;
-    }
-    let cancelled = false;
-    Promise.all(animations.map((animation) => animation.finished)).then(() => {
-      if (!cancelled) settleRemove(id);
-    }).catch(() => {
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [leaving, id, settleRemove, rootRef]);
-}
-
-const connectorClass = "flex h-control-sm w-14 shrink-0 items-center justify-center rounded-md text-column tracking-wide text-muted-foreground uppercase";
-function FilterBarLogicToggle({ groupId, logic, className }) {
-  const ctx = useFilterBarContext();
-  const next = logic === "and" ? "or" : "and";
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      "data-slot": "filter-bar-logic",
-      "data-logic": logic,
-      "aria-label": `Joined with ${logic}, switch to ${next}`,
-      title: `Switch to ${next}`,
-      className: cn(
-        connectorClass,
-        "filter-bar-logic cursor-pointer border border-border bg-fill-subtle outline-none",
-        "hover:bg-fill-hover hover:text-foreground focus-visible:bg-fill-hover focus-visible:text-foreground",
-        className
-      ),
-      onClick: () => ctx.setLogic(groupId, next),
-      children: logic
-    }
-  );
-}
-function FilterBarLogicSwitch({ groupId, logic }) {
-  const ctx = useFilterBarContext();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "radiogroup",
-      "aria-label": "Group logic",
-      className: "flex h-control-sm items-center gap-0.5 rounded-md border border-border bg-fill-subtle p-0.5",
-      children: ["and", "or"].map((value) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          role: "radio",
-          "aria-checked": logic === value,
-          "aria-label": `Join with ${value}`,
-          className: cn(
-            "h-full cursor-pointer rounded-sm px-1.5 text-column tracking-wide uppercase outline-none",
-            "focus-visible:bg-fill-hover",
-            logic === value ? "bg-fill-hover text-foreground" : "text-muted-foreground hover:text-foreground"
-          ),
-          onClick: () => logic !== value && ctx.setLogic(groupId, value),
-          children: value
-        },
-        value
-      ))
-    }
-  );
-}
-function FilterBarGroupEditor({
-  group,
-  depth,
-  onRemove,
-  removeLabel = "Remove group",
-  className
-}) {
-  const ctx = useFilterBarContext();
-  const addFilterRef = useRef(null);
-  const focusAddFilter = useRef(false);
-  const targeted = ctx.inputTarget === group.id;
-  const canNest = depth < ctx.maxDepth;
-  useEffect(() => {
-    if (targeted || !focusAddFilter.current) return;
-    focusAddFilter.current = false;
-    addFilterRef.current?.focus();
-  }, [targeted]);
-  const rows = [];
-  const connector = (key) => rows.length === 0 ? /* @__PURE__ */ jsx("span", { className: connectorClass, children: "where" }, `${key}:where`) : /* @__PURE__ */ jsx(FilterBarLogicToggle, { groupId: group.id, logic: group.logic }, `${key}:logic`);
-  for (const node of group.nodes) {
-    rows.push(
-      /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        connector(node.id),
-        isFilterBarGroup(node) ? /* @__PURE__ */ jsx(NestedGroupCard, { group: node, depth: depth + 1 }) : /* @__PURE__ */ jsx(FilterBarChip, { item: node, className: "w-fit" })
-      ] }, node.id)
-    );
-  }
-  if (ctx.draft && ctx.draft.groupId === group.id) {
-    const { id, fieldId, operatorId = "" } = ctx.draft;
-    rows.push(
-      /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        connector(id),
-        /* @__PURE__ */ jsx(FilterBarChip, { draft: true, item: { id, fieldId, operatorId, value: "" }, className: "w-fit" })
-      ] }, id)
-    );
-  }
-  if (targeted) {
-    rows.push(
-      /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        connector("input"),
-        /* @__PURE__ */ jsx(
-          FilterBarInput,
-          {
-            groupId: group.id,
-            placeholder: "Add condition…",
-            onLeave: () => {
-              focusAddFilter.current = true;
-            }
-          }
-        )
-      ] }, "input")
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "filter-bar-group-editor",
-      "data-depth": depth,
-      role: "group",
-      "aria-label": `Conditions joined with ${group.logic}`,
-      className: cn("flex min-w-0 flex-col", className),
-      children: [
-        rows.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[auto_minmax(0,1fr)] items-start gap-x-2 gap-y-1.5 p-2", children: rows }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-slot": "filter-bar-editor-actions",
-            className: cn("flex w-full items-center gap-1 p-1", rows.length > 0 && "border-t border-border"),
-            children: [
-              !targeted && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  ref: addFilterRef,
-                  variant: "ghost",
-                  size: "sm",
-                  icon: /* @__PURE__ */ jsx(PlusIcon, {}),
-                  onClick: () => ctx.openGroupInput(group.id),
-                  children: "Condition"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  icon: /* @__PURE__ */ jsx(FolderPlusIcon, {}),
-                  className: "text-muted-foreground",
-                  tooltip: canNest ? void 0 : `Groups can nest ${ctx.maxDepth} levels deep`,
-                  disabled: !canNest,
-                  onClick: () => ctx.addGroup(group.id, group.logic === "and" ? "or" : "and"),
-                  children: "Group"
-                }
-              ),
-              onRemove && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  icon: /* @__PURE__ */ jsx(Trash2Icon, {}),
-                  className: "ml-auto text-muted-foreground",
-                  "aria-label": removeLabel,
-                  onClick: onRemove,
-                  children: "Clear all"
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function NestedGroupCard({ group, depth }) {
-  const ctx = useFilterBarContext();
-  const rootRef = useRef(null);
-  const leaving = ctx.leaving.has(group.id);
-  useSettleOnLeave(group.id, leaving, rootRef);
-  const count = countLeaves(group);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: rootRef,
-      "data-slot": "filter-bar-editor-nested",
-      "data-leaving": leaving || void 0,
-      "aria-hidden": leaving || void 0,
-      className: cn(
-        "filter-bar-editor-nested w-full overflow-hidden rounded-lg border border-border",
-        leaving && "pointer-events-none"
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-2 py-1", children: [
-          /* @__PURE__ */ jsx(FolderIcon, { className: "size-3.5 text-muted-foreground" }),
-          /* @__PURE__ */ jsx(Txt, { as: "span", variant: "label", tone: "ink", children: "Group" }),
-          /* @__PURE__ */ jsxs(Txt, { as: "span", variant: "label", tone: "muted", children: [
-            "· ",
-            count,
-            " ",
-            count === 1 ? "condition" : "conditions"
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx(FilterBarLogicSwitch, { groupId: group.id, logic: group.logic }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon-sm",
-                tooltip: "Remove group",
-                disabled: leaving,
-                onClick: () => ctx.removeGroup(group.id),
-                children: /* @__PURE__ */ jsx(Trash2Icon, {})
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(FilterBarGroupEditor, { group, depth })
-      ]
-    }
-  );
-}
-
-function FilterBarAdvancedChip({ group, className }) {
-  const ctx = useFilterBarContext();
-  const rootRef = useRef(null);
-  const triggerRef = useRef(null);
-  const leaving = ctx.leaving.has(group.id);
-  const open = ctx.openGroupId === group.id;
-  const count = countLeaves(group);
-  const firstLeafIndex = ctx.items.findIndex((item) => isUnder(group, item.id));
-  const index = firstLeafIndex === -1 ? ctx.items.length : firstLeafIndex;
-  useSettleOnLeave(group.id, leaving, rootRef);
-  const handleKeyDown = (event) => {
-    if (leaving) return;
-    const segments = Array.from(rootRef.current?.querySelectorAll("[data-filter-bar-segment]") ?? []);
-    const current = segments.findIndex((el) => el === event.target);
-    if (current === -1) return;
-    switch (event.key) {
-      case "ArrowRight": {
-        event.preventDefault();
-        const next = segments[current + 1];
-        if (next) next.focus();
-        else if (!ctx.focusChip(index + count, 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":
-        event.preventDefault();
-        remove();
-        return;
-    }
-  };
-  const remove = () => {
-    ctx.removeGroup(group.id);
-    ctx.focusAfterRemove(index);
-  };
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: (next) => ctx.setOpenGroup(next ? group.id : null), children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: rootRef,
-        role: "group",
-        "aria-label": `Advanced filter, ${count} ${count === 1 ? "condition" : "conditions"}`,
-        "aria-hidden": leaving || void 0,
-        "data-slot": "filter-bar-advanced",
-        "data-leaving": leaving || void 0,
-        className: cn("filter-bar-advanced", chipClass, leaving && "pointer-events-none", className),
-        onKeyDown: handleKeyDown,
-        children: [
-          /* @__PURE__ */ jsxs(
-            PopoverTrigger,
-            {
-              ref: (el) => {
-                triggerRef.current = el;
-                ctx.registerSegment(group.id, "field", leaving ? null : el);
-              },
-              render: /* @__PURE__ */ jsx("button", { type: "button" }),
-              "data-filter-bar-segment": "field",
-              className: cn(editableSegmentClass, "gap-1.5"),
-              title: "Edit advanced filter",
-              children: [
-                /* @__PURE__ */ jsx(BracesIcon, { className: "size-[1.1em] shrink-0", "aria-hidden": true }),
-                /* @__PURE__ */ jsx("span", { className: "truncate", children: "Advanced filter" }),
-                count > 0 && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "column", tone: "muted", "aria-hidden": true, children: count })
-              ]
-            }
-          ),
-          leaving ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(editableSegmentClass, "px-1.5"), children: /* @__PURE__ */ jsx(XIcon, { className: "size-[1.1em]" }) }) : /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              ref: (el) => ctx.registerSegment(group.id, "remove", el),
-              "data-filter-bar-segment": "remove",
-              "aria-label": "Remove advanced filter",
-              title: "Remove advanced filter",
-              className: cn(editableSegmentClass, "px-1.5"),
-              onClick: remove,
-              children: /* @__PURE__ */ jsx(XIcon, { className: "size-[1.1em]" })
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      PopoverContent,
-      {
-        align: "start",
-        className: "w-[min(92vw,44rem)] p-0",
-        ...{ [FILTER_BAR_SCOPE_ATTR]: "advanced" },
-        finalFocus: triggerRef,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [
-            /* @__PURE__ */ jsx(BracesIcon, { className: "size-3.5 text-muted-foreground" }),
-            /* @__PURE__ */ jsx(Txt, { as: "span", variant: "label", tone: "ink", children: "Advanced filter" }),
-            /* @__PURE__ */ jsx(Txt, { as: "span", variant: "column", tone: "muted", className: "rounded-md bg-fill-subtle px-1.5", children: count }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon-sm",
-                className: "ml-auto",
-                tooltip: "Close",
-                onClick: () => ctx.setOpenGroup(null),
-                children: /* @__PURE__ */ jsx(XIcon, {})
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            FilterBarGroupEditor,
-            {
-              group,
-              depth: 1,
-              removeLabel: "Remove advanced filter",
-              onRemove: () => {
-                ctx.setOpenGroup(null);
-                remove();
-              }
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-const isUnder = (group, itemId) => group.nodes.some((node) => node.id === itemId ? true : "kind" in node && isUnder(node, itemId));
-
-function FilterBarClear({ label }) {
-  const ctx = useFilterBarContext();
-  if (!ctx.hasRemovableItems) return null;
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      variant: "ghost",
-      size: "icon-sm",
-      "aria-label": label,
-      tooltip: label,
-      onClick: (event) => {
-        event.stopPropagation();
-        ctx.clear();
-        ctx.focusInput();
-      },
-      children: /* @__PURE__ */ jsx(XIcon, {})
-    }
-  );
-}
-
-function FilterBarSurface({
-  className,
-  clearLabel,
-  children
-}) {
-  const ctx = useFilterBarContext();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "group",
-      "aria-label": ctx.ariaLabel,
-      "data-slot": "filter-bar",
-      ...{ [FILTER_BAR_SCOPE_ATTR]: "bar" },
-      className: cn(
-        // No chrome of its own: chips and the typeahead input sit directly on the parent surface.
-        // Layout: chips, input, then Clear right beside the input — all in one wrapping row so
-        // Clear never drifts to the far edge of a wide container.
-        "flex w-full flex-wrap items-center gap-1",
-        className
-      ),
-      children: [
-        children,
-        /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center empty:hidden", children: /* @__PURE__ */ jsx(FilterBarClear, { label: clearLabel }) }),
-        /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "polite", children: ctx.announcement })
-      ]
-    }
-  );
-}
-function FilterBar({
-  fields,
-  operators,
-  value,
-  onValueChange,
-  createItemId,
-  maxDepth,
-  "aria-label": ariaLabel = "Filters",
-  describeSuggestionsError,
-  clearLabel = "Clear filters",
-  className,
-  children
-}) {
-  return /* @__PURE__ */ jsx(
-    FilterBarProvider,
-    {
-      fields,
-      operators,
-      value,
-      onValueChange,
-      createItemId,
-      maxDepth,
-      ariaLabel,
-      describeSuggestionsError,
-      children: /* @__PURE__ */ jsx(FilterBarSurface, { className, clearLabel, children })
-    }
-  );
-}
-function FilterBarChips({ renderChip = defaultRenderChip }) {
-  const ctx = useFilterBarContext();
-  const chips = [];
-  for (const node of ctx.expression.nodes) {
-    const chip = isFilterBarGroup(node) ? /* @__PURE__ */ jsx(FilterBarAdvancedChip, { group: node }) : renderChip(node);
-    if (chip !== null) chips.push(/* @__PURE__ */ jsx(Fragment$1, { children: chip }, node.id));
-  }
-  if (ctx.draft && !ctx.draft.groupId) {
-    const { id, fieldId, operatorId = "" } = ctx.draft;
-    chips.push(
-      /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(FilterBarChip, { draft: true, item: { id, fieldId, operatorId, value: "" } }) }, id)
-    );
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children: chips });
-}
-const defaultRenderChip = (item) => /* @__PURE__ */ jsx(FilterBarChip, { item });
-FilterBar.Chips = FilterBarChips;
-FilterBar.Chip = FilterBarChip;
-FilterBar.AdvancedChip = FilterBarAdvancedChip;
-FilterBar.Input = FilterBarInput;
+export { F as FilterBar, a as FilterBarAdvancedChip, b as FilterBarChips, c as FilterBarGroupEditor, d as FilterBarInput, e as FilterBarLogicToggle } from '../filter-bar-pXSJt2ye.js';
+export { F as FilterBarChip, b as FilterBarChipField, c as FilterBarChipOperator, d as FilterBarChipRemove, g as FilterBarChipValue } from '../filter-bar-chip-D2kKMSRA.js';
+export { i as isFilterBarGroup } from '../types-CIPrYAzY.js';
 
 const DEFAULT_FILTER_OPERATORS = [
   { id: "is", label: "is", widensTo: "in" },
@@ -854,5 +17,5 @@ const DEFAULT_FILTER_OPERATORS = [
   { id: "in", label: "in", arity: "many" }
 ];
 
-export { DEFAULT_FILTER_OPERATORS, FilterBar, FilterBarAdvancedChip, FilterBarChip, FilterBarChips, FilterBarGroupEditor, FilterBarInput, FilterBarLogicToggle, isFilterBarGroup };
+export { DEFAULT_FILTER_OPERATORS };
 //# sourceMappingURL=FilterBar.es.js.map