@mastra/playground-ui 56.0.0 → 57.0.0-alpha.0

package/dist/components/FilterBar.es.js

@@ -1,8 +1,10 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useMemo, useCallback, Fragment as Fragment$1 } from 'react';
-import { u as useFilterBarContext, b as useValueStep, m as matchesQueryFilter, c as FILTER_BAR_CONTROL_SIZE, d as FilterBarOptionList, a as FilterBarFieldLabel, g as FilterBarProvider, F as FilterBarChip } from '../filter-bar-chip-C-JxWUU8.js';
-export { h as FilterBarChipField, i as FilterBarChipOperator, j as FilterBarChipRemove, k as FilterBarChipValue } from '../filter-bar-chip-C-JxWUU8.js';
-import { XIcon, ListFilterIcon, Search } from 'lucide-react';
+import { useRef, useState, useMemo, useEffect, useCallback, Fragment as Fragment$1 } from 'react';
+import { BracesIcon, ListFilterIcon, Search, PlusIcon, FolderPlusIcon, Trash2Icon, FolderIcon, XIcon } from 'lucide-react';
+import { u as useFilterBarContext, b as findGroup, c as useValueStep, m as matchesQueryFilter, d as FILTER_BAR_CONTROL_SIZE, g as FilterBarOptionList, a as FilterBarFieldLabel, h as FilterBarOptionLabel, F as FilterBarChip, i as countLeaves, e as editableSegmentClass, j as chipClass, k as FILTER_BAR_SCOPE_ATTR, l as FilterBarProvider } from '../filter-bar-chip-luoMVy8-.js';
+export { n as FilterBarChipField, o as FilterBarChipOperator, p as FilterBarChipRemove, q as FilterBarChipValue } from '../filter-bar-chip-luoMVy8-.js';
+import { flushSync } from 'react-dom';
+import { p as parseFieldValue, i as isFilterBarGroup } from '../types-CIPrYAzY.js';
 import { B as Button } from '../Button-cWcBEd-G.js';
 import { a as comboboxTriggerClass, c as comboboxStyles } from '../combobox-styles-CRebmeht.js';
 import { Combobox } from '@base-ui/react/combobox';
@@ -14,33 +16,29 @@ import { MENU_SIDE_OFFSET } from '../primitives/menu-item.es.js';
 import { usePortalContainer } from '../primitives/portal-container.es.js';
 import { useIsApplePlatform } from '../hooks/use-keyboard-shortcut-label.es.js';
 import { c as cn } from '../cn-65Adrsfj.js';
+import { P as Popover, b as PopoverTrigger, a as PopoverContent } from '../popover-Dg70UGyn.js';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 
-function FilterBarClear({ label }) {
+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.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, {})
-    }
-  );
+  if (ctx.inputTarget !== props.groupId) return null;
+  return /* @__PURE__ */ jsx(FilterBarInputImpl, { ...props });
 }
-
-const getItemLabel = (item) => "label" in item && item.label ? item.label : "value" in item ? item.value : "";
-function FilterBarInput({
+function FilterBarInputImpl({
   placeholder = "Filter…",
   className,
-  "aria-label": ariaLabel = "Add filter"
+  "aria-label": ariaLabel = "Add filter",
+  groupId,
+  onLeave
 }) {
   const ctx = useFilterBarContext();
   const container = usePortalContainer();
@@ -48,28 +46,46 @@ function FilterBarInput({
   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, commitDraft } = ctx;
+  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 visibleFields = useMemo(() => ctx.fields.filter((f) => !f.hidden), [ctx.fields]);
+  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(() => {
-    setDraft(null);
+    setDraftState(null);
     setQuery("");
-  }, [setDraft]);
+  }, [setDraftState]);
   const close = useCallback(() => {
     setOpen(false);
     reset();
   }, [reset]);
   const commit = useCallback(
     (fieldId, operatorId, value) => {
-      commitDraft({ fieldId, operatorId }, value);
+      withHighlightReset(() => commitDraft({ fieldId, operatorId }, value));
       setQuery("");
       inputRef.current?.focus();
     },
-    [commitDraft]
+    [withHighlightReset, commitDraft]
   );
   const selectOperator = useCallback(
     (fieldId, next) => {
@@ -84,7 +100,19 @@ function FilterBarInput({
   );
   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;
@@ -92,7 +120,7 @@ function FilterBarInput({
       setDraft({ fieldId: next.id });
       setQuery("");
     },
-    [ctx, selectOperator, setDraft]
+    [ctx, commit, query, selectOperator, setDraft]
   );
   const valueStep = useValueStep({
     field,
@@ -103,14 +131,20 @@ function FilterBarInput({
       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 setOpen(false);
+    else if (!leaveGroup()) setOpen(false);
     setQuery("");
-  }, [step, draft, field, fieldOperators, setDraft]);
+  }, [step, draft, field, fieldOperators, setDraft, leaveGroup]);
   const handleSelect = (item) => {
     if (step === "field") selectField(item);
     else if (step === "operator" && draft) selectOperator(draft.fieldId, item);
@@ -119,6 +153,7 @@ function FilterBarInput({
   const handleKeyDown = (event) => {
     if (event.key === "Escape") {
       event.preventDefault();
+      event.stopPropagation();
       event.preventBaseUIHandler();
       stepBack();
       return;
@@ -134,7 +169,11 @@ function FilterBarInput({
         event.preventDefault();
         event.preventBaseUIHandler();
         if (step !== "field") stepBack();
-        else {
+        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);
         }
@@ -158,7 +197,16 @@ function FilterBarInput({
       if (handled || event.key === "Enter" && highlightedOption === null) event.preventBaseUIHandler();
     }
   };
-  const items = step === "field" ? visibleFields : step === "operator" ? fieldOperators : valueStep.options;
+  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 searchPlaceholder = step === "field" ? "Search fields…" : step === "operator" ? "Search operators…" : "Search values…";
   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(
@@ -166,7 +214,7 @@ function FilterBarInput({
     {
       items,
       itemToStringLabel: getItemLabel,
-      filter: step === "value" ? null : matchesQueryFilter,
+      filter: step === "value" ? null : filterItem,
       value: null,
       onValueChange: (item, details) => {
         details.cancel();
@@ -219,6 +267,7 @@ function FilterBarInput({
                   spellCheck: false,
                   "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(
@@ -276,7 +325,15 @@ function FilterBarInput({
                     {
                       "aria-label": "Fields",
                       getKey: (f) => f.id,
-                      renderOption: (f) => /* @__PURE__ */ jsx(FilterBarFieldLabel, { field: f }),
+                      renderOption: (f) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(FilterBarFieldLabel, { field: f }),
+                        f.search && query !== "" && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground min-w-0 truncate", children: [
+                          ctx.getFieldOperators(f)[0]?.label,
+                          ' "',
+                          query,
+                          '"'
+                        ] })
+                      ] }),
                       emptyText: "No matching field."
                     }
                   ),
@@ -295,7 +352,7 @@ function FilterBarInput({
                       "aria-label": "Values",
                       "aria-multiselectable": valueStep.isMany || void 0,
                       getKey: (o) => o.value,
-                      renderOption: (o) => o.label ?? o.value,
+                      renderOption: (option) => /* @__PURE__ */ jsx(FilterBarOptionLabel, { option }),
                       isSelected: (o) => valueStep.isMany && valueStep.selected.includes(o.value),
                       isLoading: valueStep.isLoading,
                       error: valueStep.error,
@@ -342,6 +399,389 @@ function FilterBarInput({
   ) });
 }
 
+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: "h-control-sm border-border bg-fill-subtle flex items-center gap-0.5 rounded-md border 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: "text-muted-foreground ml-auto",
+                  "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: "border-border flex items-center gap-2 border-b px-2 py-1", children: [
+          /* @__PURE__ */ jsx(FolderIcon, { className: "text-muted-foreground size-3.5" }),
+          /* @__PURE__ */ jsx("span", { className: "text-label text-foreground", children: "Group" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-label text-muted-foreground", 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("span", { className: "text-column text-muted-foreground", "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: "border-border flex items-center gap-2 border-b px-3 py-2", children: [
+            /* @__PURE__ */ jsx(BracesIcon, { className: "text-muted-foreground size-3.5" }),
+            /* @__PURE__ */ jsx("span", { className: "text-label text-foreground", children: "Advanced filter" }),
+            /* @__PURE__ */ jsx("span", { className: "bg-fill-subtle text-column text-muted-foreground rounded-md 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,
@@ -354,6 +794,7 @@ function FilterBarSurface({
       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
@@ -375,6 +816,7 @@ function FilterBar({
   value,
   onValueChange,
   createItemId,
+  maxDepth,
   "aria-label": ariaLabel = "Filters",
   clearLabel = "Clear filters",
   className,
@@ -388,6 +830,7 @@ function FilterBar({
       value,
       onValueChange,
       createItemId,
+      maxDepth,
       ariaLabel,
       children: /* @__PURE__ */ jsx(FilterBarSurface, { className, clearLabel, children })
     }
@@ -395,8 +838,12 @@ function FilterBar({
 }
 function FilterBarChips({ renderChip = defaultRenderChip }) {
   const ctx = useFilterBarContext();
-  const chips = ctx.items.map((item) => /* @__PURE__ */ jsx(Fragment$1, { children: renderChip(item) }, item.id));
-  if (ctx.draft) {
+  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)
@@ -407,6 +854,7 @@ function FilterBarChips({ renderChip = defaultRenderChip }) {
 const defaultRenderChip = (item) => /* @__PURE__ */ jsx(FilterBarChip, { item });
 FilterBar.Chips = FilterBarChips;
 FilterBar.Chip = FilterBarChip;
+FilterBar.AdvancedChip = FilterBarAdvancedChip;
 FilterBar.Input = FilterBarInput;
 
 const DEFAULT_FILTER_OPERATORS = [
@@ -424,5 +872,5 @@ const DEFAULT_FILTER_OPERATORS = [
   { id: "in", label: "in", arity: "many" }
 ];
 
-export { DEFAULT_FILTER_OPERATORS, FilterBar, FilterBarChip, FilterBarChips, FilterBarInput };
+export { DEFAULT_FILTER_OPERATORS, FilterBar, FilterBarAdvancedChip, FilterBarChip, FilterBarChips, FilterBarGroupEditor, FilterBarInput, FilterBarLogicToggle, isFilterBarGroup };
 //# sourceMappingURL=FilterBar.es.js.map