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

package/dist/filter-bar-pXSJt2ye.js

@@ -0,0 +1,842 @@
+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, h as findGroup, i as useValueStep, m as matchesQueryFilter, j as alwaysHighlightProps, k as FILTER_BAR_CONTROL_SIZE, l as FilterBarOptionList, a as FilterBarFieldLabel, n as FilterBarOptionLabel, F as FilterBarChip, o as countLeaves, e as editableSegmentClass, p as chipClass, q as FILTER_BAR_SCOPE_ATTR, r as FilterBarProvider } from './filter-bar-chip-D2kKMSRA.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-CYtMrOov.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 { FilterBar as F, FilterBarAdvancedChip as a, FilterBarChips as b, FilterBarGroupEditor as c, FilterBarInput as d, FilterBarLogicToggle as e };
+//# sourceMappingURL=filter-bar-pXSJt2ye.js.map