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

package/dist/components/FilterBar.cjs.js

@@ -3,20 +3,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const lucideReact = require('lucide-react');
-const filterBarChip = require('../filter-bar-chip-BR7Xnpeo.cjs');
-const Button = require('../Button-C2dx_QZN.cjs');
 const React = require('react');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
-const comboboxStyles = require('../combobox-styles-1C3D0JLL.cjs');
+const filterBarChip = require('../filter-bar-chip-BxI0NgEz.cjs');
+const lucideReact = require('lucide-react');
+const Button = require('../Button-CVewl8nT.cjs');
+const comboboxStyles = require('../combobox-styles-DYlNNjKC.cjs');
 const combobox = require('@base-ui/react/combobox');
-const kbd = require('../kbd-DjjBBIZN.cjs');
-const Txt = require('../Txt-C7rZCmrg.cjs');
+const kbd = require('../kbd-B-Z2sNvK.cjs');
+const Txt = require('../Txt-B4-2nLaI.cjs');
 const primitives_floating = require('../primitives/floating.cjs.js');
 const primitives_formElement = require('../primitives/form-element.cjs.js');
 const primitives_menuItem = require('../primitives/menu-item.cjs.js');
 const primitives_portalContainer = require('../primitives/portal-container.cjs.js');
 const hooks_useKeyboardShortcutLabel = require('../hooks/use-keyboard-shortcut-label.cjs.js');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
 const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
 
 function FilterBarClear({ label }) {
@@ -26,7 +26,7 @@ function FilterBarClear({ label }) {
     Button.Button,
     {
       variant: "ghost",
-      size: "icon-xs",
+      size: "icon-sm",
       "aria-label": label,
       tooltip: label,
       onClick: (event) => {
@@ -39,26 +39,6 @@ function FilterBarClear({ label }) {
   );
 }
 
-function FilterBarDraftChip({ field, operator }) {
-  if (!field) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      "aria-hidden": true,
-      "data-slot": "filter-bar-draft-chip",
-      className: utils_cn.cn(
-        "flex max-w-full items-stretch divide-x divide-border1 rounded-lg border border-border1 bg-surface5 text-neutral5",
-        "rounded-r-none"
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn(filterBarChip.segmentClass, "text-neutral6 last:rounded-r-none"), style: filterBarChip.fieldSegmentAccentStyle(field), children: /* @__PURE__ */ jsxRuntime.jsx(filterBarChip.FilterBarFieldLabel, { field }) }),
-        operator && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn(filterBarChip.segmentClass, "last:rounded-r-none"), children: operator.label })
-      ]
-    }
-  );
-}
-
-const INITIAL_DRAFT = { step: "field" };
 const getItemLabel = (item) => "label" in item && item.label ? item.label : "value" in item ? item.value : "";
 function FilterBarInput({
   placeholder = "Filter…",
@@ -70,28 +50,29 @@ function FilterBarInput({
   const inputRef = React.useRef(null);
   const [open, setOpen] = React.useState(false);
   const [query, setQuery] = React.useState("");
-  const [draft, setDraft] = React.useState(INITIAL_DRAFT);
   const [highlighted, setHighlighted] = React.useState(null);
   const modEnterLabel = hooks_useKeyboardShortcutLabel.useIsApplePlatform() ? "⌘↵" : "Ctrl ↵";
-  const field = draft.fieldId ? ctx.getField(draft.fieldId) : void 0;
-  const operator = draft.operatorId ? ctx.getOperator(draft.operatorId) : void 0;
+  const { draft, setDraft, 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 = React.useMemo(() => field ? ctx.getFieldOperators(field) : [], [ctx, field]);
   const visibleFields = React.useMemo(() => ctx.fields.filter((f) => !f.hidden), [ctx.fields]);
   const reset = React.useCallback(() => {
-    setDraft(INITIAL_DRAFT);
+    setDraft(null);
     setQuery("");
-  }, []);
+  }, [setDraft]);
   const close = React.useCallback(() => {
     setOpen(false);
     reset();
   }, [reset]);
   const commit = React.useCallback(
     (fieldId, operatorId, value) => {
-      ctx.addItem({ fieldId, operatorId, value });
-      reset();
+      commitDraft({ fieldId, operatorId }, value);
+      setQuery("");
       inputRef.current?.focus();
     },
-    [ctx, reset]
+    [commitDraft]
   );
   const selectOperator = React.useCallback(
     (fieldId, next) => {
@@ -99,10 +80,10 @@ function FilterBarInput({
         commit(fieldId, next.id, "");
         return;
       }
-      setDraft({ step: "value", fieldId, operatorId: next.id });
+      setDraft({ fieldId, operatorId: next.id });
       setQuery("");
     },
-    [commit]
+    [commit, setDraft]
   );
   const selectField = React.useCallback(
     (next) => {
@@ -111,31 +92,31 @@ function FilterBarInput({
         selectOperator(next.id, only);
         return;
       }
-      setDraft({ step: "operator", fieldId: next.id });
+      setDraft({ fieldId: next.id });
       setQuery("");
     },
-    [ctx, selectOperator]
+    [ctx, selectOperator, setDraft]
   );
   const valueStep = filterBarChip.useValueStep({
     field,
     operator,
     query,
-    enabled: open && draft.step === "value",
+    enabled: open && step === "value",
     onCommit: (value) => {
-      if (draft.fieldId && draft.operatorId) commit(draft.fieldId, draft.operatorId, value);
+      if (draft?.operatorId) commit(draft.fieldId, draft.operatorId, value);
     }
   });
   const stepBack = React.useCallback(() => {
-    if (draft.step === "value") {
+    if (step === "value" && draft) {
       const skipOperator = field ? fieldOperators.length === 1 : false;
-      setDraft(skipOperator ? INITIAL_DRAFT : { step: "operator", fieldId: draft.fieldId });
-    } else if (draft.step === "operator") setDraft(INITIAL_DRAFT);
+      setDraft(skipOperator ? null : { fieldId: draft.fieldId });
+    } else if (step === "operator") setDraft(null);
     else setOpen(false);
     setQuery("");
-  }, [draft, field, fieldOperators]);
+  }, [step, draft, field, fieldOperators, setDraft]);
   const handleSelect = (item) => {
-    if (draft.step === "field") selectField(item);
-    else if (draft.step === "operator" && draft.fieldId) selectOperator(draft.fieldId, item);
+    if (step === "field") selectField(item);
+    else if (step === "operator" && draft) selectOperator(draft.fieldId, item);
     else valueStep.handleSelect(item);
   };
   const handleKeyDown = (event) => {
@@ -155,199 +136,213 @@ function FilterBarInput({
       if (event.key === "Backspace") {
         event.preventDefault();
         event.preventBaseUIHandler();
-        if (draft.step !== "field") stepBack();
+        if (step !== "field") stepBack();
         else {
-          const last = ctx.items[ctx.items.length - 1];
+          const last = ctx.items.findLast((item) => !ctx.leaving.has(item.id));
           if (last) ctx.removeItem(last.id);
         }
         return;
       }
-      if (event.key === "ArrowLeft" && draft.step === "field") {
+      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 && draft.step !== "value" && (draft.step === "operator" || query !== "")) {
+    if (event.key === "Tab" && highlighted && step !== "value" && (step === "operator" || query !== "")) {
       event.preventDefault();
       event.preventBaseUIHandler();
       handleSelect(highlighted);
       return;
     }
-    if (draft.step === "value") {
+    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 items = draft.step === "field" ? visibleFields : draft.step === "operator" ? fieldOperators : valueStep.options;
-  const searchPlaceholder = draft.step === "field" ? "Search fields…" : draft.step === "operator" ? "Search operators…" : "Search values…";
-  const inputPlaceholder = draft.step === "field" ? placeholder : draft.step === "operator" ? "Operator…" : valueStep.hasSuggestions && valueStep.allowFreeText ? "Search or type a value…" : field?.type === "number" ? "Number…" : "Value…";
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(FilterBarDraftChip, { field, operator: fieldOperators.length === 1 ? void 0 : operator }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      combobox.Combobox.Root,
-      {
-        items,
-        itemToStringLabel: getItemLabel,
-        filter: draft.step === "value" ? null : filterBarChip.matchesQueryFilter,
-        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();
-        },
-        autoHighlight: "always",
-        modal: false,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            combobox.Combobox.Input,
-            {
-              ref: (el) => {
-                inputRef.current = el;
-                ctx.registerInput(el);
-              },
-              "aria-label": ariaLabel,
-              spellCheck: false,
-              "data-slot": "filter-bar-input",
-              "data-step": draft.step,
-              inputMode: draft.step === "value" && field?.type === "number" ? "decimal" : void 0,
-              placeholder: inputPlaceholder,
-              className: utils_cn.cn(
-                // Naked control inside the styled FilterBar surface — same baseline as the DS Input `unstyled` variant.
-                primitives_formElement.unstyledFormElementStyle,
-                "flex-1 px-1 text-ui-smd leading-ui-sm text-neutral6",
-                "placeholder:text-neutral2 placeholder:transition-opacity placeholder:duration-normal focus:placeholder:opacity-70",
-                draft.step === "field" ? "min-w-32" : "min-w-24 pl-0",
-                className
-              ),
-              onFocus: () => setOpen(true),
-              onKeyDown: handleKeyDown
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
-            combobox.Combobox.Positioner,
-            {
-              align: "start",
-              sideOffset: primitives_menuItem.MENU_SIDE_OFFSET,
-              positionMethod: primitives_floating.FLOATING_POSITION_METHOD,
-              className: comboboxStyles.comboboxStyles.positioner,
-              children: /* @__PURE__ */ jsxRuntime.jsxs(
-                combobox.Combobox.Popup,
+  const items = step === "field" ? visibleFields : step === "operator" ? fieldOperators : valueStep.options;
+  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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    combobox.Combobox.Root,
+    {
+      items,
+      itemToStringLabel: getItemLabel,
+      filter: step === "value" ? null : filterBarChip.matchesQueryFilter,
+      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();
+      },
+      autoHighlight: "always",
+      modal: false,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-slot": "filter-bar-input-trigger",
+            className: utils_cn.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`.
+              comboboxStyles.comboboxTriggerClass({ variant: "default", size: filterBarChip.FILTER_BAR_CONTROL_SIZE }),
+              "w-auto cursor-text",
+              "focus-within:bg-fill-hover",
+              primitives_formElement.inputFocusBorderWithin,
+              step === "field" ? "min-w-40" : "min-w-28",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListFilterIcon, { "aria-hidden": true, className: "text-muted-foreground -ml-[.3em] shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                combobox.Combobox.Input,
                 {
-                  className: utils_cn.cn(comboboxStyles.comboboxStyles.popup, "min-w-56"),
-                  "data-slot": "filter-bar-editor",
-                  children: [
-                    (draft.step !== "value" || valueStep.hasSuggestions) && // Search row mirroring the bar input, so the popup reads as a searchable combobox.
-                    // The bar input stays the only real input: focus and keyboard navigation never move.
+                  ref: (el) => {
+                    inputRef.current = el;
+                    ctx.registerInput(el);
+                  },
+                  "aria-label": ariaLabel,
+                  spellCheck: false,
+                  "data-slot": "filter-bar-input",
+                  "data-step": step,
+                  inputMode: step === "value" && field?.type === "number" ? "decimal" : void 0,
+                  placeholder: inputPlaceholder,
+                  className: utils_cn.cn(
+                    primitives_formElement.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__ */ jsxRuntime.jsx(combobox.Combobox.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
+          combobox.Combobox.Positioner,
+          {
+            align: "start",
+            sideOffset: primitives_menuItem.MENU_SIDE_OFFSET,
+            positionMethod: primitives_floating.FLOATING_POSITION_METHOD,
+            className: comboboxStyles.comboboxStyles.positioner,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              combobox.Combobox.Popup,
+              {
+                className: utils_cn.cn(comboboxStyles.comboboxStyles.popup, "min-w-56"),
+                "data-slot": "filter-bar-editor",
+                children: [
+                  (step !== "value" || valueStep.hasSuggestions) && // Search row mirroring the bar input, so the popup reads as a searchable combobox.
+                  // The bar input stays the only real input: focus and keyboard navigation never move.
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: utils_cn.cn(comboboxStyles.comboboxStyles.searchContainer, "cursor-text"),
+                      "data-slot": "filter-bar-search",
+                      onMouseDown: (e) => e.preventDefault(),
+                      onClick: () => inputRef.current?.focus(),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: comboboxStyles.comboboxStyles.searchIcon }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: utils_cn.cn(
+                              comboboxStyles.comboboxStyles.searchInput,
+                              "flex items-center truncate",
+                              query === "" && comboboxStyles.comboboxStyles.placeholder
+                            ),
+                            children: query === "" ? searchPlaceholder : query
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  step === "field" && /* @__PURE__ */ jsxRuntime.jsx(
+                    filterBarChip.FilterBarOptionList,
+                    {
+                      "aria-label": "Fields",
+                      getKey: (f) => f.id,
+                      renderOption: (f) => /* @__PURE__ */ jsxRuntime.jsx(filterBarChip.FilterBarFieldLabel, { field: f }),
+                      emptyText: "No matching field."
+                    }
+                  ),
+                  step === "operator" && /* @__PURE__ */ jsxRuntime.jsx(
+                    filterBarChip.FilterBarOptionList,
+                    {
+                      "aria-label": "Operators",
+                      getKey: (o) => o.id,
+                      renderOption: (o) => o.label,
+                      emptyText: "No matching operator."
+                    }
+                  ),
+                  step === "value" && valueStep.hasSuggestions && /* @__PURE__ */ jsxRuntime.jsx(
+                    filterBarChip.FilterBarOptionList,
+                    {
+                      "aria-label": "Values",
+                      "aria-multiselectable": valueStep.isMany || void 0,
+                      getKey: (o) => o.value,
+                      renderOption: (o) => o.label ?? o.value,
+                      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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 py-1 pr-1 pl-[.9em]", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "caption", tone: "muted", children: "Type a value" }),
                     /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        className: utils_cn.cn(comboboxStyles.comboboxStyles.searchContainer, "cursor-text"),
-                        "data-slot": "filter-bar-search",
-                        onMouseDown: (e) => e.preventDefault(),
-                        onClick: () => inputRef.current?.focus(),
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: comboboxStyles.comboboxStyles.searchIcon }),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "span",
-                            {
-                              className: utils_cn.cn(
-                                comboboxStyles.comboboxStyles.searchInput,
-                                "flex items-center truncate",
-                                query === "" && comboboxStyles.comboboxStyles.placeholder
-                              ),
-                              children: query === "" ? searchPlaceholder : query
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    draft.step === "field" && /* @__PURE__ */ jsxRuntime.jsx(
-                      filterBarChip.FilterBarOptionList,
-                      {
-                        "aria-label": "Fields",
-                        getKey: (f) => f.id,
-                        renderOption: (f) => /* @__PURE__ */ jsxRuntime.jsx(filterBarChip.FilterBarFieldLabel, { field: f }),
-                        emptyText: "No matching field."
-                      }
-                    ),
-                    draft.step === "operator" && /* @__PURE__ */ jsxRuntime.jsx(
-                      filterBarChip.FilterBarOptionList,
-                      {
-                        "aria-label": "Operators",
-                        getKey: (o) => o.id,
-                        renderOption: (o) => o.label,
-                        emptyText: "No matching operator."
-                      }
-                    ),
-                    draft.step === "value" && valueStep.hasSuggestions && /* @__PURE__ */ jsxRuntime.jsx(
-                      filterBarChip.FilterBarOptionList,
-                      {
-                        "aria-label": "Values",
-                        "aria-multiselectable": valueStep.isMany || void 0,
-                        getKey: (o) => o.value,
-                        renderOption: (o) => o.label ?? o.value,
-                        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."
-                      }
-                    ),
-                    draft.step === "value" && !valueStep.hasSuggestions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 py-1 pr-1 pl-[.9em]", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "ui-sm", className: "text-neutral3", children: "Type a value" }),
-                      /* @__PURE__ */ jsxRuntime.jsxs(
-                        Button.Button,
-                        {
-                          size: "xs",
-                          variant: "default",
-                          disabled: !valueStep.canCommitQuery,
-                          onMouseDown: (e) => e.preventDefault(),
-                          onClick: () => valueStep.commitFreeText(),
-                          children: [
-                            "Apply",
-                            /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "xs", children: "↵" })
-                          ]
-                        }
-                      )
-                    ] }),
-                    draft.step === "value" && valueStep.isMany && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border1 flex items-center justify-end gap-1 border-t p-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
                       Button.Button,
                       {
-                        size: "xs",
+                        size: "sm",
                         variant: "default",
+                        disabled: !valueStep.canCommitQuery,
                         onMouseDown: (e) => e.preventDefault(),
-                        onClick: () => valueStep.commitSelection() || valueStep.commitFreeText(),
+                        onClick: () => valueStep.commitFreeText(),
                         children: [
-                          "Done",
-                          /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "xs", children: modEnterLabel })
+                          "Apply",
+                          /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "xs", children: "↵" })
                         ]
                       }
-                    ) })
-                  ]
-                }
-              )
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
+                    )
+                  ] }),
+                  step === "value" && valueStep.isMany && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border flex items-center justify-end gap-1 border-t p-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    Button.Button,
+                    {
+                      size: "sm",
+                      variant: "default",
+                      onMouseDown: (e) => e.preventDefault(),
+                      onClick: () => valueStep.commitSelection() || valueStep.commitFreeText(),
+                      children: [
+                        "Done",
+                        /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "xs", children: modEnterLabel })
+                      ]
+                    }
+                  ) })
+                ]
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  ) });
 }
 
 function FilterBarSurface({
@@ -363,21 +358,14 @@ function FilterBarSurface({
       "aria-label": ctx.ariaLabel,
       "data-slot": "filter-bar",
       className: utils_cn.cn(
-        // Same surface/hover/focus recipe as InputGroup (wrapper whose focus lives on the nested input).
-        // Layout: leading icon | wrapping chip list | Clear. Icon and Clear stay pinned to the
-        // first line; only the list wraps.
-        "flex w-full items-start gap-0.5 rounded-2xl border border-border1 bg-surface-overlay-soft p-0.5",
-        "cursor-text transition-all duration-normal ease-out-custom",
-        "hover:bg-surface-overlay-strong",
-        primitives_formElement.inputHoverBorderWithin,
-        "outline-hidden focus-within:bg-surface-overlay-strong focus-within:outline-hidden",
-        primitives_formElement.inputFocusBorderWithin,
+        // 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
       ),
-      onClick: ctx.focusInput,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center py-1 pr-1 pl-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListFilterIcon, { "aria-hidden": true, className: "text-neutral3 size-3" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "filter-bar-list", className: "flex min-w-0 flex-1 flex-wrap items-center gap-0.5", children }),
+        children,
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center empty:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarClear, { label: clearLabel }) }),
         /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { "aria-live": "polite", children: ctx.announcement })
       ]
@@ -389,6 +377,7 @@ function FilterBar({
   operators,
   value,
   onValueChange,
+  createItemId,
   "aria-label": ariaLabel = "Filters",
   clearLabel = "Clear filters",
   className,
@@ -401,15 +390,24 @@ function FilterBar({
       operators,
       value,
       onValueChange,
+      createItemId,
       ariaLabel,
       children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarSurface, { className, clearLabel, children })
     }
   );
 }
-function FilterBarChips() {
+function FilterBarChips({ renderChip = defaultRenderChip }) {
   const ctx = filterBarChip.useFilterBarContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: ctx.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(filterBarChip.FilterBarChip, { item }, item.id)) });
+  const chips = ctx.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderChip(item) }, item.id));
+  if (ctx.draft) {
+    const { id, fieldId, operatorId = "" } = ctx.draft;
+    chips.push(
+      /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(filterBarChip.FilterBarChip, { draft: true, item: { id, fieldId, operatorId, value: "" } }) }, id)
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: chips });
 }
+const defaultRenderChip = (item) => /* @__PURE__ */ jsxRuntime.jsx(filterBarChip.FilterBarChip, { item });
 FilterBar.Chips = FilterBarChips;
 FilterBar.Chip = filterBarChip.FilterBarChip;
 FilterBar.Input = FilterBarInput;