@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/FilterBar-CR8nbvoe.cjs

@@ -0,0 +1,902 @@
+const require_filter_bar_chip = require("./filter-bar-chip-DFsbUZ-V.cjs");
+const require_types = require("./types-CP7wbYua.cjs");
+const require_Button = require("./Button-BfICfyxD.cjs");
+const require_combobox_parts = require("./combobox-parts-BeNqgCbj.cjs");
+const require_components_Kbd = require("./components/Kbd.cjs.js");
+const require_Txt = require("./Txt-_00wWxTd.cjs");
+const require_primitives_floating = require("./primitives/floating.cjs.js");
+const require_primitives_form_element = require("./primitives/form-element.cjs.js");
+require("./primitives/menu-item.cjs.js");
+const require_primitives_password_manager_autofill = require("./primitives/password-manager-autofill.cjs.js");
+const require_primitives_portal_container = require("./primitives/portal-container.cjs.js");
+const require_hooks_use_keyboard_shortcut_label = require("./hooks/use-keyboard-shortcut-label.cjs.js");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+const require_popover = require("./popover-D9AfJmla.cjs");
+const require_clear_filters_button = require("./clear-filters-button-CCO-y7kt.cjs");
+const require_filter_bar_time_range = require("./filter-bar-time-range-CEgdThCy.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let react_dom = require("react-dom");
+let _base_ui_react_combobox = require("@base-ui/react/combobox");
+let _radix_ui_react_visually_hidden = require("@radix-ui/react-visually-hidden");
+// src/ds/components/FilterBar/filter-bar-input.tsx
+var getItemLabel = (item) => "label" in item && item.label ? item.label : "value" in item ? item.value : "";
+var EMPTY_ITEMS = [];
+/** Pinned last entry of the field list that spawns an advanced filter (an `or` group) instead of a filter. */
+var ADVANCED_FIELD_ID = "__filter-bar-advanced__";
+var ADVANCED_FIELD = {
+	id: ADVANCED_FIELD_ID,
+	label: "Advanced filter…",
+	icon: lucide_react.BracesIcon,
+	operators: []
+};
+/**
+* Typeahead entry point: type to pick a field, then an operator, then a value.
+* Focus never leaves the input; the popup is driven with the arrow keys.
+*/
+function FilterBarInput(props) {
+	if (require_filter_bar_chip.useFilterBarContext().inputTarget !== props.groupId) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarInputImpl, { ...props });
+}
+function FilterBarInputImpl({ placeholder = "Filter", className, "aria-label": ariaLabel = "Add filter", groupId, onLeave }) {
+	const ctx = require_filter_bar_chip.useFilterBarContext();
+	const container = require_primitives_portal_container.usePortalContainer();
+	const inputRef = (0, react.useRef)(null);
+	const anchorRef = (0, react.useRef)(null);
+	const [open, setOpen] = (0, react.useState)(false);
+	const [query, setQuery] = (0, react.useState)("");
+	const [highlighted, setHighlighted] = (0, react.useState)(null);
+	const [emptyForStepChange, setEmptyForStepChange] = (0, react.useState)(false);
+	const modEnterLabel = require_hooks_use_keyboard_shortcut_label.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 fieldOperators = (0, react.useMemo)(() => field ? ctx.getFieldOperators(field) : [], [ctx, field]);
+	const operator = draft?.operatorId ? fieldOperators.find((o) => o.id === draft.operatorId) ?? ctx.getOperator(draft.operatorId) : void 0;
+	const offerAdvanced = ctx.groupsEnabled && groupId === void 0;
+	const visibleFields = (0, react.useMemo)(() => {
+		const fields = ctx.fields.filter((f) => !f.hidden);
+		return offerAdvanced ? [...fields, ADVANCED_FIELD] : fields;
+	}, [ctx.fields, offerAdvanced]);
+	const targetGroup = groupId ? require_filter_bar_chip.findGroup(ctx.expression, groupId) : void 0;
+	(0, react.useEffect)(() => {
+		if (groupId) inputRef.current?.focus();
+	}, [groupId]);
+	const withHighlightReset = (0, react.useCallback)((change) => {
+		(0, react_dom.flushSync)(() => setEmptyForStepChange(true));
+		change();
+		setEmptyForStepChange(false);
+	}, []);
+	const setDraft = (0, react.useCallback)((next) => withHighlightReset(() => setDraftState(next)), [withHighlightReset, setDraftState]);
+	const reset = (0, react.useCallback)(() => {
+		setDraftState(null);
+		setQuery("");
+	}, [setDraftState]);
+	const close = (0, react.useCallback)(() => {
+		setOpen(false);
+		reset();
+	}, [reset]);
+	const commit = (0, react.useCallback)((fieldId, operatorId, value) => {
+		withHighlightReset(() => commitDraft({
+			fieldId,
+			operatorId
+		}, value));
+		setQuery("");
+		inputRef.current?.focus();
+	}, [withHighlightReset, commitDraft]);
+	const selectOperator = (0, react.useCallback)((fieldId, next) => {
+		if (next.arity === "none") {
+			commit(fieldId, next.id, "");
+			return;
+		}
+		setDraft({
+			fieldId,
+			operatorId: next.id
+		});
+		setQuery("");
+	}, [commit, setDraft]);
+	const selectField = (0, react.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, require_types.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 = require_filter_bar_chip.useValueStep({
+		field,
+		operator,
+		query,
+		enabled: open && step === "value",
+		setQuery,
+		onCommit: (value) => {
+			if (draft?.operatorId) commit(draft.fieldId, draft.operatorId, value);
+		}
+	});
+	const leaveGroup = (0, react.useCallback)(() => {
+		if (!groupId) return false;
+		ctx.openGroupInput(void 0);
+		onLeave?.();
+		return true;
+	}, [
+		ctx,
+		groupId,
+		onLeave
+	]);
+	const stepBack = (0, react.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;
+			if (valueStep.handleKeyDown(event, highlightedOption) || 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 = (0, react.useCallback)((item, text, itemToString) => "search" in item && item.search === true || require_filter_bar_chip.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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_combobox.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();
+		},
+		...require_filter_bar_chip.alwaysHighlightProps,
+		modal: false,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: anchorRef,
+			"data-slot": "filter-bar-input-trigger",
+			className: require_utils.cn(require_combobox_parts.comboboxTriggerClass({
+				variant: "default",
+				size: "sm"
+			}), "w-auto cursor-text", "focus-within:bg-fill-hover", require_primitives_form_element.inputFocusBorderWithin, step === "field" ? "min-w-40" : "min-w-28", className),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ListFilterIcon, {
+				"aria-hidden": true,
+				className: "shrink-0"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Input, {
+				ref: (el) => {
+					inputRef.current = el;
+					ctx.registerInput(el);
+				},
+				"aria-label": ariaLabel,
+				spellCheck: false,
+				...require_primitives_password_manager_autofill.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: require_utils.cn(require_primitives_form_element.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__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Portal, {
+			container,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Positioner, {
+				anchor: anchorRef,
+				align: "start",
+				sideOffset: 4,
+				positionMethod: require_primitives_floating.FLOATING_POSITION_METHOD,
+				className: require_combobox_parts.comboboxStyles.positioner,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_combobox.Combobox.Popup, {
+					className: require_utils.cn(require_combobox_parts.comboboxStyles.popup, "w-(--anchor-width) min-w-44"),
+					"data-slot": "filter-bar-editor",
+					children: [
+						step === "field" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_bar_chip.FilterBarOptionList, {
+							"aria-label": "Fields",
+							getKey: (f) => f.id,
+							renderOption: (f) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_bar_chip.FilterBarFieldLabel, { field: f }), f.search && query !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "min-w-0 truncate text-muted-foreground",
+								children: [
+									ctx.getFieldOperators(f)[0]?.label,
+									" \"",
+									query,
+									"\""
+								]
+							})] }),
+							emptyText: "No matching field."
+						}),
+						step === "operator" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_bar_chip.FilterBarOptionList, {
+							"aria-label": "Operators",
+							getKey: (o) => o.id,
+							renderOption: (o) => o.label,
+							emptyText: "No matching operator."
+						}),
+						step === "value" && valueStep.hasOptions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_bar_chip.FilterBarOptionList, {
+							"aria-label": "Values",
+							"aria-multiselectable": valueStep.isMany || void 0,
+							getKey: (o) => o.value,
+							renderOption: (option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_bar_chip.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center justify-between gap-2 py-1 pr-1 pl-[.9em]",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+								variant: "caption",
+								tone: "muted",
+								children: "Type a value"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Button.Button, {
+								size: "sm",
+								variant: "default",
+								disabled: !valueStep.canCommitQuery,
+								onMouseDown: (e) => e.preventDefault(),
+								onClick: () => valueStep.submitFreeText(),
+								children: ["Apply", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Kbd.Kbd, {
+									size: "xs",
+									children: "↵"
+								})]
+							})]
+						}),
+						step === "value" && valueStep.isMany && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "flex items-center justify-end gap-1 border-t border-border p-1",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Button.Button, {
+								size: "sm",
+								variant: "default",
+								onMouseDown: (e) => e.preventDefault(),
+								onClick: () => valueStep.commitDone(),
+								children: ["Done", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Kbd.Kbd, {
+									size: "xs",
+									children: modEnterLabel
+								})]
+							})
+						})
+					]
+				})
+			})
+		})]
+	}) });
+}
+// src/ds/components/FilterBar/use-settle-on-leave.ts
+/** Keeps a leaving node in the DOM until its exit animation has played, then releases it. */
+function useSettleOnLeave(id, leaving, rootRef) {
+	const { settleRemove } = require_filter_bar_chip.useFilterBarContext();
+	(0, react.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
+	]);
+}
+// src/ds/components/FilterBar/filter-bar-group-editor.tsx
+var connectorClass = "flex h-control-sm w-14 shrink-0 items-center justify-center rounded-md text-column tracking-wide text-muted-foreground uppercase";
+/** `and` / `or` connector in front of a row; every connector of a group shares its logic. */
+function FilterBarLogicToggle({ groupId, logic, className }) {
+	const ctx = require_filter_bar_chip.useFilterBarContext();
+	const next = logic === "and" ? "or" : "and";
+	return /* @__PURE__ */ (0, react_jsx_runtime.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: require_utils.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
+	});
+}
+/** Segmented `and | or` control shown in a nested group's header. */
+function FilterBarLogicSwitch({ groupId, logic }) {
+	const ctx = require_filter_bar_chip.useFilterBarContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			role: "radio",
+			"aria-checked": logic === value,
+			"aria-label": `Join with ${value}`,
+			className: require_utils.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))
+	});
+}
+/**
+* Recursive rule builder shown in an advanced-filter popover. Rows are laid out as
+* `connector | condition`: the first row reads `where`, the following ones carry the
+* group's `and` / `or` toggle. Nested groups render as bordered cards with their own
+* header (logic switch + remove) and footer. The shared typeahead input renders as the
+* last row of the group it is pointed at.
+*/
+function FilterBarGroupEditor({ group, depth, onRemove, removeLabel = "Remove group", className }) {
+	const ctx = require_filter_bar_chip.useFilterBarContext();
+	const addFilterRef = (0, react.useRef)(null);
+	const focusAddFilter = (0, react.useRef)(false);
+	const targeted = ctx.inputTarget === group.id;
+	const canNest = depth < ctx.maxDepth;
+	(0, react.useEffect)(() => {
+		if (targeted || !focusAddFilter.current) return;
+		focusAddFilter.current = false;
+		addFilterRef.current?.focus();
+	}, [targeted]);
+	const rows = [];
+	const connector = (key) => rows.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: connectorClass,
+		children: "where"
+	}, `${key}:where`) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarLogicToggle, {
+		groupId: group.id,
+		logic: group.logic
+	}, `${key}:logic`);
+	for (const node of group.nodes) rows.push(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [connector(node.id), require_types.isFilterBarGroup(node) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NestedGroupCard, {
+		group: node,
+		depth: depth + 1
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_bar_chip.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__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [connector(id), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_bar_chip.FilterBarChip, {
+			draft: true,
+			item: {
+				id,
+				fieldId,
+				operatorId,
+				value: ""
+			},
+			className: "w-fit"
+		})] }, id));
+	}
+	if (targeted) rows.push(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [connector("input"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarInput, {
+		groupId: group.id,
+		placeholder: "Add condition",
+		onLeave: () => {
+			focusAddFilter.current = true;
+		}
+	})] }, "input"));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "filter-bar-group-editor",
+		"data-depth": depth,
+		role: "group",
+		"aria-label": `Conditions joined with ${group.logic}`,
+		className: require_utils.cn("flex min-w-0 flex-col", className),
+		children: [rows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "grid grid-cols-[auto_minmax(0,1fr)] items-start gap-x-2 gap-y-1.5 p-2",
+			children: rows
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-slot": "filter-bar-editor-actions",
+			className: require_utils.cn("flex w-full items-center gap-1 p-1", rows.length > 0 && "border-t border-border"),
+			children: [
+				!targeted && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					ref: addFilterRef,
+					variant: "ghost",
+					size: "sm",
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PlusIcon, {}),
+					onClick: () => ctx.openGroupInput(group.id),
+					children: "Condition"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					variant: "ghost",
+					size: "sm",
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					variant: "ghost",
+					size: "sm",
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2Icon, {}),
+					className: "ml-auto text-muted-foreground",
+					"aria-label": removeLabel,
+					onClick: onRemove,
+					children: "Clear all"
+				})
+			]
+		})]
+	});
+}
+function NestedGroupCard({ group, depth }) {
+	const ctx = require_filter_bar_chip.useFilterBarContext();
+	const rootRef = (0, react.useRef)(null);
+	const leaving = ctx.leaving.has(group.id);
+	useSettleOnLeave(group.id, leaving, rootRef);
+	const count = require_filter_bar_chip.countLeaves(group);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: rootRef,
+		"data-slot": "filter-bar-editor-nested",
+		"data-leaving": leaving || void 0,
+		"aria-hidden": leaving || void 0,
+		className: require_utils.cn("filter-bar-editor-nested w-full overflow-hidden rounded-lg border border-border", leaving && "pointer-events-none"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 border-b border-border px-2 py-1",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FolderIcon, { className: "size-3.5 text-muted-foreground" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+					as: "span",
+					variant: "label",
+					tone: "ink",
+					children: "Group"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
+					as: "span",
+					variant: "label",
+					tone: "muted",
+					children: [
+						count,
+						" ",
+						count === 1 ? "condition" : "conditions"
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ml-auto flex items-center gap-1",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarLogicSwitch, {
+						groupId: group.id,
+						logic: group.logic
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						tooltip: "Remove group",
+						disabled: leaving,
+						onClick: () => ctx.removeGroup(group.id),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2Icon, {})
+					})]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarGroupEditor, {
+			group,
+			depth
+		})]
+	});
+}
+// src/ds/components/FilterBar/filter-bar-advanced-chip.tsx
+/**
+* A root-level group rendered as one "Advanced filter" chip. Its popover hosts the
+* recursive rule builder; the chip's remove button drops the whole subtree.
+*/
+function FilterBarAdvancedChip({ group, className }) {
+	const ctx = require_filter_bar_chip.useFilterBarContext();
+	const [initial] = (0, react.useState)(() => !ctx.mounted);
+	const rootRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const leaving = ctx.leaving.has(group.id);
+	const open = ctx.openGroupId === group.id;
+	const count = require_filter_bar_chip.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();
+		}
+	};
+	const remove = () => {
+		ctx.removeGroup(group.id);
+		ctx.focusAfterRemove(index);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.Popover, {
+		open,
+		onOpenChange: (next) => ctx.setOpenGroup(next ? group.id : null),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.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-initial": initial || void 0,
+			"data-leaving": leaving || void 0,
+			className: require_utils.cn("filter-bar-advanced", require_filter_bar_chip.chipClass, leaving && "pointer-events-none", className),
+			onKeyDown: handleKeyDown,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.PopoverTrigger, {
+				ref: (el) => {
+					triggerRef.current = el;
+					ctx.registerSegment(group.id, "field", leaving ? null : el);
+				},
+				render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", { type: "button" }),
+				"data-filter-bar-segment": "field",
+				className: require_filter_bar_chip.editableSegmentClass,
+				title: "Edit advanced filter",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BracesIcon, { "aria-hidden": true }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "truncate",
+						children: "Advanced filter"
+					}),
+					count > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "column",
+						tone: "muted",
+						"aria-hidden": true,
+						children: count
+					})
+				]
+			}), leaving ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": true,
+				className: require_filter_bar_chip.removeSegmentClass,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.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: require_filter_bar_chip.removeSegmentClass,
+				onClick: remove,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.PopoverContent, {
+			align: "start",
+			className: "w-[min(92vw,44rem)] p-0",
+			[require_filter_bar_chip.FILTER_BAR_SCOPE_ATTR]: "advanced",
+			finalFocus: triggerRef,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2 border-b border-border px-3 py-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BracesIcon, { className: "size-3.5 text-muted-foreground" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "label",
+						tone: "ink",
+						children: "Advanced filter"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "column",
+						tone: "muted",
+						className: "rounded-md bg-fill-subtle px-1.5",
+						children: count
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						className: "ml-auto",
+						tooltip: "Close",
+						onClick: () => ctx.setOpenGroup(null),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {})
+					})
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarGroupEditor, {
+				group,
+				depth: 1,
+				removeLabel: "Remove advanced filter",
+				onRemove: () => {
+					ctx.setOpenGroup(null);
+					remove();
+				}
+			})]
+		})]
+	});
+}
+var isUnder = (group, itemId) => group.nodes.some((node) => node.id === itemId ? true : "kind" in node && isUnder(node, itemId));
+// src/ds/components/FilterBar/filter-bar-clear.tsx
+/** Removes every removable filter. Rendered by FilterBar at its trailing edge; hidden while nothing can be removed. */
+function FilterBarClear({ label }) {
+	const ctx = require_filter_bar_chip.useFilterBarContext();
+	if (!ctx.hasRemovableItems) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_clear_filters_button.ClearFiltersButton, {
+		label,
+		onClick: (event) => {
+			event.stopPropagation();
+			ctx.clear();
+			ctx.focusInput();
+		}
+	});
+}
+// src/ds/components/FilterBar/filter-bar.tsx
+function FilterBarSurface({ className, clearLabel, children }) {
+	const ctx = require_filter_bar_chip.useFilterBarContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "group",
+		"aria-label": ctx.ariaLabel,
+		"data-slot": "filter-bar",
+		[require_filter_bar_chip.FILTER_BAR_SCOPE_ATTR]: "bar",
+		className: require_utils.cn("flex w-full flex-wrap items-center gap-1.5", className),
+		children: [
+			children,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "flex shrink-0 items-center empty:hidden",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarClear, { label: clearLabel })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_visually_hidden.VisuallyHidden, {
+				"aria-live": "polite",
+				children: ctx.announcement
+			})
+		]
+	});
+}
+/**
+* Braintrust-style filter bar: `field → operator → value` filters built from a
+* single typeahead input, rendered as inline editable chips. Domain-agnostic —
+* fields, operators and values are plain strings supplied by the consumer.
+*
+* Pass a `FilterBarExpression` as `value` to enable Linear-style advanced filters:
+* the input offers "Advanced filter…", which adds one chip whose popover hosts a
+* recursive rule builder (`and` / `or` connectors, nested groups). The bar itself
+* stays flat. A flat `FilterBarItem[]` stays flat.
+*
+* @example
+* <FilterBar value={items} onValueChange={setItems} fields={fields} operators={DEFAULT_FILTER_OPERATORS}>
+*   <FilterBar.Chips />
+*   <FilterBar.Input />
+* </FilterBar>
+*/
+function FilterBar({ fields, operators, value, onValueChange, createItemId, maxDepth, "aria-label": ariaLabel = "Filters", describeSuggestionsError, clearLabel = "Clear filters", className, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_bar_chip.FilterBarProvider, {
+		fields,
+		operators,
+		value,
+		onValueChange,
+		createItemId,
+		maxDepth,
+		ariaLabel,
+		describeSuggestionsError,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarSurface, {
+			className,
+			clearLabel,
+			children
+		})
+	});
+}
+/**
+* Default layout: one editable chip per root item, one "Advanced filter" chip per root
+* group, in order, then the chip of the filter being built in the bar's input (which
+* becomes the last item's chip once committed).
+*/
+function FilterBarChips({ renderChip = defaultRenderChip }) {
+	const ctx = require_filter_bar_chip.useFilterBarContext();
+	const chips = [];
+	for (const node of ctx.expression.nodes) {
+		const chip = require_types.isFilterBarGroup(node) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarAdvancedChip, { group: node }) : renderChip(node);
+		if (chip !== null) chips.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: chip }, node.id));
+	}
+	if (ctx.draft && !ctx.draft.groupId) {
+		const { id, fieldId, operatorId = "" } = ctx.draft;
+		chips.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_bar_chip.FilterBarChip, {
+			draft: true,
+			item: {
+				id,
+				fieldId,
+				operatorId,
+				value: ""
+			}
+		}) }, id));
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: chips });
+}
+var defaultRenderChip = (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_bar_chip.FilterBarChip, { item });
+FilterBar.Chips = FilterBarChips;
+FilterBar.Chip = require_filter_bar_chip.FilterBarChip;
+FilterBar.AdvancedChip = FilterBarAdvancedChip;
+FilterBar.Input = FilterBarInput;
+FilterBar.TimeRange = require_filter_bar_time_range.FilterBarTimeRange;
+// src/ds/components/FilterBar/default-operators.ts
+/** Opt-in starter set. Pure data: the component attaches no semantics to ids. */
+var DEFAULT_FILTER_OPERATORS = [
+	{
+		id: "is",
+		label: "is",
+		widensTo: "in"
+	},
+	{
+		id: "is-not",
+		label: "is not"
+	},
+	{
+		id: "contains",
+		label: "contains"
+	},
+	{
+		id: "not-contains",
+		label: "does not contain"
+	},
+	{
+		id: "starts-with",
+		label: "starts with"
+	},
+	{
+		id: "gt",
+		label: ">"
+	},
+	{
+		id: "lt",
+		label: "<"
+	},
+	{
+		id: "gte",
+		label: ">="
+	},
+	{
+		id: "lte",
+		label: "<="
+	},
+	{
+		id: "is-empty",
+		label: "is empty",
+		arity: "none"
+	},
+	{
+		id: "is-not-empty",
+		label: "is not empty",
+		arity: "none"
+	},
+	{
+		id: "in",
+		label: "in",
+		arity: "many"
+	}
+];
+Object.defineProperty(exports, "DEFAULT_FILTER_OPERATORS", {
+	enumerable: true,
+	get: function() {
+		return DEFAULT_FILTER_OPERATORS;
+	}
+});
+Object.defineProperty(exports, "FilterBar", {
+	enumerable: true,
+	get: function() {
+		return FilterBar;
+	}
+});
+Object.defineProperty(exports, "FilterBarAdvancedChip", {
+	enumerable: true,
+	get: function() {
+		return FilterBarAdvancedChip;
+	}
+});
+Object.defineProperty(exports, "FilterBarChips", {
+	enumerable: true,
+	get: function() {
+		return FilterBarChips;
+	}
+});
+Object.defineProperty(exports, "FilterBarGroupEditor", {
+	enumerable: true,
+	get: function() {
+		return FilterBarGroupEditor;
+	}
+});
+Object.defineProperty(exports, "FilterBarInput", {
+	enumerable: true,
+	get: function() {
+		return FilterBarInput;
+	}
+});
+Object.defineProperty(exports, "FilterBarLogicToggle", {
+	enumerable: true,
+	get: function() {
+		return FilterBarLogicToggle;
+	}
+});
+
+//# sourceMappingURL=FilterBar-CR8nbvoe.cjs.map