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

package/dist/filter-bar-chip-DFsbUZ-V.cjs

@@ -0,0 +1,1545 @@
+require('./filter-bar-chip.css');const require_types = require("./types-CP7wbYua.cjs");
+const require_spinner = require("./spinner-oS6q4pwx.cjs");
+const require_icons_icon_size_classes = require("./icons/icon-size-classes.cjs.js");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+const require_Button = require("./Button-BfICfyxD.cjs");
+const require_components_Kbd = require("./components/Kbd.cjs.js");
+const require_primitives_control_icon = require("./primitives/control-icon.cjs.js");
+const require_primitives_control_size = require("./primitives/control-size.cjs.js");
+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_combobox_parts = require("./combobox-parts-BeNqgCbj.cjs");
+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");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let _base_ui_react_combobox = require("@base-ui/react/combobox");
+var normalize = (value) => Array.isArray(value) ? {
+	logic: "and",
+	nodes: value
+} : value;
+/** Hands back the shape the consumer gave us: flat arrays only ever contain items. */
+var denormalize = (expr, flat) => flat ? expr.nodes.filter((node) => !require_types.isFilterBarGroup(node)) : expr;
+/**
+* Items in document order (pre-order, depth-first), each tagged with the group it lives
+* in. A group's leaves sit where its advanced chip sits in the bar, so arrow navigation
+* walks the bar left to right.
+*/
+var flattenItems = (expr) => {
+	const out = [];
+	const walk = (nodes, groupId) => {
+		for (const node of nodes) if (require_types.isFilterBarGroup(node)) walk(node.nodes, node.id);
+		else out.push(groupId ? {
+			item: node,
+			groupId
+		} : { item: node });
+	};
+	walk(expr.nodes, void 0);
+	return out;
+};
+var findGroupIn = (nodes, groupId) => {
+	for (const node of nodes) {
+		if (!require_types.isFilterBarGroup(node)) continue;
+		if (node.id === groupId) return node;
+		const nested = findGroupIn(node.nodes, groupId);
+		if (nested) return nested;
+	}
+};
+var findGroup = (expr, groupId) => findGroupIn(expr.nodes, groupId);
+/** Nesting level of a group: root-level groups are at depth 1; `0` when not found. */
+var groupDepth = (expr, groupId) => {
+	const walk = (nodes, depth) => {
+		for (const node of nodes) {
+			if (!require_types.isFilterBarGroup(node)) continue;
+			if (node.id === groupId) return depth;
+			const nested = walk(node.nodes, depth + 1);
+			if (nested) return nested;
+		}
+		return 0;
+	};
+	return walk(expr.nodes, 1);
+};
+/** Number of leaf conditions under a group, at any depth. */
+var countLeaves = (group) => group.nodes.reduce((sum, node) => sum + (require_types.isFilterBarGroup(node) ? countLeaves(node) : 1), 0);
+/** Ids of a group and every node below it. */
+var collectIds = (group) => [group.id, ...group.nodes.flatMap((node) => require_types.isFilterBarGroup(node) ? collectIds(node) : [node.id])];
+var mapGroup = (nodes, groupId, fn) => nodes.map((node) => {
+	if (!require_types.isFilterBarGroup(node)) return node;
+	return node.id === groupId ? fn(node) : {
+		...node,
+		nodes: mapGroup(node.nodes, groupId, fn)
+	};
+});
+var mapItems = (nodes, fn) => nodes.map((node) => require_types.isFilterBarGroup(node) ? {
+	...node,
+	nodes: mapItems(node.nodes, fn)
+} : fn(node));
+var filterNodes = (nodes, keep) => nodes.filter(keep).map((node) => require_types.isFilterBarGroup(node) ? {
+	...node,
+	nodes: filterNodes(node.nodes, keep)
+} : node);
+var updateItem = (expr, itemId, patch) => ({
+	...expr,
+	nodes: mapItems(expr.nodes, (item) => item.id === itemId ? {
+		...item,
+		...patch
+	} : item)
+});
+/** Removes an item or a group by id at any depth. Groups left empty are kept (see `pruneEmptyGroups`). */
+var removeNode = (expr, id) => ({
+	...expr,
+	nodes: filterNodes(expr.nodes, (node) => node.id !== id)
+});
+var pruneNodes = (nodes) => nodes.flatMap((node) => {
+	if (!require_types.isFilterBarGroup(node)) return [node];
+	const pruned = pruneNodes(node.nodes);
+	return pruned.length === 0 ? [] : [{
+		...node,
+		nodes: pruned
+	}];
+});
+/** Drops every group with no leaf left, bottom-up. */
+var pruneEmptyGroups = (expr) => ({
+	...expr,
+	nodes: pruneNodes(expr.nodes)
+});
+var insertItem = (expr, groupId, item) => {
+	if (!groupId || groupId === "root") return {
+		...expr,
+		nodes: [...expr.nodes, item]
+	};
+	return {
+		...expr,
+		nodes: mapGroup(expr.nodes, groupId, (group) => ({
+			...group,
+			nodes: [...group.nodes, item]
+		}))
+	};
+};
+/**
+* Folds a new filter into the one its field already holds. Both values join under the `many`
+* operator they share (`is a` + `is b` → `is any of a, b`) when the field allows it; otherwise
+* the new filter replaces the old one. `operators` are the ones the field allows.
+*/
+var mergeCondition = (existing, next, operators) => {
+	const manyOf = (operatorId) => {
+		const operator = operators.find((o) => o.id === operatorId);
+		return operator?.arity === "many" ? operator.id : operator?.widensTo;
+	};
+	const many = manyOf(existing.operatorId);
+	if (!many || many !== manyOf(next.operatorId) || !operators.some((o) => o.id === many)) return next;
+	const values = [existing.value, next.value].flat().filter((v) => v !== "");
+	return {
+		operatorId: many,
+		value: values.filter((v, i) => values.indexOf(v) === i)
+	};
+};
+var setGroupLogic = (expr, groupId, logic) => {
+	if (groupId === "root") return {
+		...expr,
+		logic
+	};
+	return {
+		...expr,
+		nodes: mapGroup(expr.nodes, groupId, (group) => ({
+			...group,
+			logic
+		}))
+	};
+};
+/** Appends a group to the root, or inside `parentId`. */
+var createGroup = (expr, parentId, group) => {
+	if (!parentId || parentId === "root") return {
+		...expr,
+		nodes: [...expr.nodes, group]
+	};
+	return {
+		...expr,
+		nodes: mapGroup(expr.nodes, parentId, (parent) => ({
+			...parent,
+			nodes: [...parent.nodes, group]
+		}))
+	};
+};
+/** Drops removable items at any depth and every group that ends up empty; pinned items stay. */
+var clearRemovable = (expr, pinned) => pruneEmptyGroups({
+	...expr,
+	nodes: filterNodes(expr.nodes, (node) => require_types.isFilterBarGroup(node) || pinned.has(node.id))
+});
+// src/ds/components/FilterBar/filter-bar-context.tsx
+var SEGMENTS_LEFT_TO_RIGHT = [
+	"field",
+	"operator",
+	"value",
+	"remove"
+];
+var SEGMENTS_RIGHT_TO_LEFT = [...SEGMENTS_LEFT_TO_RIGHT].reverse();
+/**
+* Marks a focus scope: the bar and each open advanced-filter popover. Arrow navigation
+* never crosses scopes, so ←/→ inside a popover cannot land back in the bar.
+*/
+var FILTER_BAR_SCOPE_ATTR = "data-filter-bar-scope";
+var scopeOf = (el) => el?.closest(`[data-filter-bar-scope]`) ?? null;
+var stageOf = (draft) => {
+	if (!draft) return "none";
+	return draft.operatorId ? "operator" : "field";
+};
+var FilterBarContext = (0, react.createContext)(null);
+function useFilterBarContext() {
+	const ctx = (0, react.useContext)(FilterBarContext);
+	if (!ctx) throw new Error("FilterBar compound components must be rendered inside <FilterBar>.");
+	return ctx;
+}
+var idCounter = 0;
+function createFilterId() {
+	if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") return crypto.randomUUID();
+	idCounter += 1;
+	return `filter-${idCounter}`;
+}
+function emptyValueFor(operator) {
+	return operator?.arity === "many" ? [] : "";
+}
+var idsOf = (nodes, out = /* @__PURE__ */ new Set()) => {
+	for (const node of nodes) {
+		out.add(node.id);
+		if (require_types.isFilterBarGroup(node)) idsOf(node.nodes, out);
+	}
+	return out;
+};
+/**
+* The previously rendered tree with the consumer's new `value` folded in: nodes still
+* present take their new version (in their old position), leaving nodes stay where they
+* were, and nodes the consumer added are appended. Once nothing is leaving the result is
+* exactly `next`, so consumer reorders are only deferred, never lost.
+*/
+var mergeNodes = (prev, next, leaving) => {
+	const nextById = new Map(next.map((node) => [node.id, node]));
+	const seen = /* @__PURE__ */ new Set();
+	const out = [];
+	for (const old of prev) {
+		const fresh = nextById.get(old.id);
+		if (fresh) {
+			seen.add(old.id);
+			out.push(require_types.isFilterBarGroup(fresh) && require_types.isFilterBarGroup(old) ? {
+				...fresh,
+				nodes: mergeNodes(old.nodes, fresh.nodes, leaving)
+			} : fresh);
+		} else if (leaving.has(old.id)) out.push(old);
+	}
+	for (const node of next) if (!seen.has(node.id)) out.push(node);
+	return out;
+};
+function FilterBarProvider({ fields, operators, value, onValueChange, createItemId, maxDepth = 3, ariaLabel, describeSuggestionsError, children }) {
+	const segments = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const inputRef = (0, react.useRef)(null);
+	const flat = Array.isArray(value);
+	const expression = (0, react.useMemo)(() => normalize(value), [value]);
+	const exprRef = (0, react.useRef)(expression);
+	exprRef.current = expression;
+	const [announcement, setAnnouncement] = (0, react.useState)("");
+	const [nonRemovableIds, setNonRemovableIds] = (0, react.useState)(() => /* @__PURE__ */ new Set());
+	const [inputTarget, setInputTarget] = (0, react.useState)(void 0);
+	const [openGroupId, setOpenGroupId] = (0, react.useState)(null);
+	const [mounted, setMounted] = (0, react.useState)(false);
+	(0, react.useEffect)(() => setMounted(true), []);
+	const emit = (0, react.useCallback)((next) => onValueChange(denormalize(next, flat)), [onValueChange, flat]);
+	const getField = (0, react.useCallback)((fieldId) => fields.find((f) => f.id === fieldId), [fields]);
+	const getOperator = (0, react.useCallback)((operatorId) => operators.find((o) => o.id === operatorId), [operators]);
+	const getFieldOperators = (0, react.useMemo)(() => {
+		const cache = /* @__PURE__ */ new WeakMap();
+		return (field) => {
+			const cached = cache.get(field);
+			if (cached) return cached;
+			const allowed = field.operators ? new Set(field.operators) : void 0;
+			const result = operators.filter((o) => !allowed || allowed.has(o.id)).map((o) => {
+				const label = field.operatorLabels?.[o.id];
+				return label ? {
+					...o,
+					label
+				} : o;
+			});
+			cache.set(field, result);
+			return result;
+		};
+	}, [operators]);
+	const announce = (0, react.useCallback)((message) => setAnnouncement(message), []);
+	const [draft, setDraftState] = (0, react.useState)(null);
+	const draftRef = (0, react.useRef)(draft);
+	draftRef.current = draft;
+	const [lastCommit, setLastCommit] = (0, react.useState)(null);
+	const settleCommit = (0, react.useCallback)(() => setLastCommit((prev) => prev ? {
+		...prev,
+		glint: false
+	} : null), []);
+	const [leavingIds, setLeavingIds] = (0, react.useState)(() => /* @__PURE__ */ new Set());
+	const settleRemove = (0, react.useCallback)((id) => {
+		setLeavingIds((prev) => {
+			if (!prev.has(id)) return prev;
+			const next = new Set(prev);
+			next.delete(id);
+			return next;
+		});
+	}, []);
+	const markLeaving = (0, react.useCallback)((ids) => {
+		const list = [...ids];
+		if (list.length === 0) return;
+		setLeavingIds((prev) => /* @__PURE__ */ new Set([...prev, ...list]));
+	}, []);
+	const renderedTreeRef = (0, react.useRef)(expression.nodes);
+	const reflectedCommitIdRef = (0, react.useRef)(void 0);
+	(0, react.useLayoutEffect)(() => {
+		if (lastCommit && idsOf(expression.nodes).has(lastCommit.item.id)) reflectedCommitIdRef.current = lastCommit.item.id;
+	}, [lastCommit, expression]);
+	const { rendered, items, leaving, rootGroupOf } = (0, react.useMemo)(() => {
+		const present = idsOf(expression.nodes);
+		let rendered = leavingIds.size === 0 ? expression : {
+			...expression,
+			nodes: mergeNodes(renderedTreeRef.current, expression.nodes, leavingIds)
+		};
+		if (lastCommit && !present.has(lastCommit.item.id) && reflectedCommitIdRef.current !== lastCommit.item.id) rendered = insertItem(rendered, lastCommit.groupId, lastCommit.item);
+		renderedTreeRef.current = rendered.nodes;
+		const shown = idsOf(rendered.nodes);
+		const leaving = new Set([...leavingIds].filter((id) => shown.has(id) && !present.has(id)));
+		const rootGroupOf = /* @__PURE__ */ new Map();
+		for (const node of rendered.nodes) if (require_types.isFilterBarGroup(node)) for (const { item } of flattenItems({
+			logic: "and",
+			nodes: [node]
+		})) rootGroupOf.set(item.id, node.id);
+		return {
+			rendered,
+			items: flattenItems(rendered).map((e) => e.item),
+			leaving,
+			rootGroupOf
+		};
+	}, [
+		expression,
+		lastCommit,
+		leavingIds
+	]);
+	const fieldItem = (0, react.useCallback)((fieldId, groupId) => {
+		if (!createItemId || groupId !== void 0) return void 0;
+		const id = createItemId(fieldId);
+		return exprRef.current.nodes.find((node) => !require_types.isFilterBarGroup(node) && node.id === id);
+	}, [createItemId]);
+	const newItemId = (0, react.useCallback)((fieldId) => createItemId && inputTarget === void 0 && !fieldItem(fieldId, void 0) ? createItemId(fieldId) : createFilterId(), [
+		createItemId,
+		inputTarget,
+		fieldItem
+	]);
+	const setDraft = (0, react.useCallback)((next) => {
+		setLastCommit(null);
+		setDraftState((prev) => next ? {
+			...next,
+			id: prev?.fieldId === next.fieldId ? prev.id : newItemId(next.fieldId),
+			from: stageOf(prev),
+			groupId: inputTarget
+		} : null);
+	}, [newItemId, inputTarget]);
+	const commitDraft = (0, react.useCallback)(({ fieldId, operatorId }, value) => {
+		const id = draftRef.current?.id ?? newItemId(fieldId);
+		const groupId = draftRef.current?.groupId ?? inputTarget;
+		const from = stageOf(draftRef.current);
+		setDraftState(null);
+		const existing = fieldItem(fieldId, groupId);
+		if (existing) {
+			const field = getField(fieldId);
+			const condition = mergeCondition(existing, {
+				operatorId,
+				value
+			}, field ? getFieldOperators(field) : []);
+			const item = {
+				...existing,
+				...condition
+			};
+			emit(updateItem(exprRef.current, existing.id, condition));
+			reflectedCommitIdRef.current = void 0;
+			setLastCommit({
+				item,
+				from,
+				glint: true
+			});
+			announce("Filter updated");
+			return;
+		}
+		const item = {
+			id,
+			fieldId,
+			operatorId,
+			value
+		};
+		emit(insertItem(exprRef.current, groupId, item));
+		reflectedCommitIdRef.current = void 0;
+		setLastCommit({
+			item,
+			from,
+			glint: true,
+			groupId
+		});
+		announce("Filter added");
+	}, [
+		emit,
+		announce,
+		newItemId,
+		inputTarget,
+		fieldItem,
+		getField,
+		getFieldOperators
+	]);
+	const updateItem$1 = (0, react.useCallback)((id, patch) => {
+		emit(updateItem(exprRef.current, id, patch));
+	}, [emit]);
+	const removeItem = (0, react.useCallback)((id) => {
+		markLeaving([id]);
+		emit(removeNode(exprRef.current, id));
+		setLastCommit(null);
+		announce("Filter removed");
+	}, [
+		emit,
+		announce,
+		markLeaving
+	]);
+	const releaseInputTarget = (0, react.useCallback)((gone) => {
+		setInputTarget((prev) => prev && gone.has(prev) ? void 0 : prev);
+	}, []);
+	const removeGroup = (0, react.useCallback)((groupId) => {
+		const expr = exprRef.current;
+		const group = findGroup(expr, groupId);
+		const gone = new Set(group ? collectIds(group) : [groupId]);
+		markLeaving(gone);
+		emit(removeNode(expr, groupId));
+		setLastCommit(null);
+		setDraftState(null);
+		releaseInputTarget(gone);
+		setOpenGroupId((prev) => prev === groupId ? null : prev);
+		announce("Advanced filter removed");
+	}, [
+		emit,
+		announce,
+		markLeaving,
+		releaseInputTarget
+	]);
+	const addGroup = (0, react.useCallback)((parentId, logic) => {
+		const group = {
+			id: createFilterId(),
+			kind: "group",
+			logic,
+			nodes: []
+		};
+		emit(createGroup(exprRef.current, parentId, group));
+		setLastCommit(null);
+		setDraftState(null);
+		setInputTarget(group.id);
+		announce(parentId ? "Nested group added" : "Advanced filter added");
+		return group.id;
+	}, [emit, announce]);
+	const setLogic = (0, react.useCallback)((groupId, logic) => {
+		emit(setGroupLogic(exprRef.current, groupId, logic));
+		announce(`Conditions joined with ${logic}`);
+	}, [emit, announce]);
+	const getGroupDepth = (0, react.useCallback)((groupId) => groupDepth(exprRef.current, groupId), []);
+	const setOpenGroup = (0, react.useCallback)((groupId) => {
+		setOpenGroupId(groupId);
+		if (groupId !== null) return;
+		const expr = exprRef.current;
+		const pruned = pruneEmptyGroups(expr);
+		const kept = idsOf(pruned.nodes);
+		const gone = new Set([...idsOf(expr.nodes)].filter((id) => !kept.has(id)));
+		if (gone.size > 0) {
+			markLeaving(gone);
+			emit(pruned);
+		}
+		setDraftState(null);
+		setInputTarget(void 0);
+	}, [emit, markLeaving]);
+	const focusInput = (0, react.useCallback)(() => {
+		inputRef.current?.focus();
+	}, []);
+	const openGroupInput = (0, react.useCallback)((groupId) => {
+		setInputTarget(groupId);
+		setDraftState(null);
+		if (groupId === void 0) focusInput();
+	}, [focusInput]);
+	const clear = (0, react.useCallback)(() => {
+		const expr = exprRef.current;
+		const next = clearRemovable(expr, nonRemovableIds);
+		const kept = idsOf(next.nodes);
+		const gone = new Set([...idsOf(expr.nodes)].filter((id) => !kept.has(id)));
+		markLeaving(gone);
+		emit(next);
+		setLastCommit(null);
+		setDraftState(null);
+		setInputTarget(void 0);
+		setOpenGroupId(null);
+		announce("All filters removed");
+	}, [
+		emit,
+		announce,
+		nonRemovableIds,
+		markLeaving
+	]);
+	const hasRemovableItems = flattenItems(expression).some(({ item }) => !nonRemovableIds.has(item.id));
+	const registerNonRemovable = (0, react.useCallback)((itemId, nonRemovable) => {
+		setNonRemovableIds((prev) => {
+			if (prev.has(itemId) === nonRemovable) return prev;
+			const next = new Set(prev);
+			if (nonRemovable) next.add(itemId);
+			else next.delete(itemId);
+			return next;
+		});
+	}, []);
+	const registerSegment = (0, react.useCallback)((itemId, segment, el) => {
+		const key = `${itemId}:${segment}`;
+		if (el) segments.current.set(key, el);
+		else segments.current.delete(key);
+	}, []);
+	const registerInput = (0, react.useCallback)((el) => {
+		if (el) inputRef.current = el;
+		else if (!inputRef.current?.isConnected) inputRef.current = null;
+	}, []);
+	const renderedRef = (0, react.useRef)(items);
+	renderedRef.current = items;
+	const rootGroupRef = (0, react.useRef)(rootGroupOf);
+	rootGroupRef.current = rootGroupOf;
+	const focusChip = (0, react.useCallback)((fromIndex, direction, segment) => {
+		const items = renderedRef.current;
+		const rootGroupOf = rootGroupRef.current;
+		const origin = items[fromIndex - direction];
+		const originEl = origin ? [...SEGMENTS_LEFT_TO_RIGHT].map((s) => segments.current.get(`${origin.id}:${s}`)).find(Boolean) : null;
+		const scope = scopeOf(typeof document === "undefined" ? null : document.activeElement) ?? scopeOf(originEl) ?? void 0;
+		const fallbacks = direction === -1 ? SEGMENTS_RIGHT_TO_LEFT : SEGMENTS_LEFT_TO_RIGHT;
+		for (let i = fromIndex; i >= 0 && i < items.length; i += direction) {
+			const item = items[i];
+			if (!item) break;
+			const ownerIds = [item.id, rootGroupOf.get(item.id)].filter((id) => id !== void 0);
+			for (const ownerId of ownerIds) for (const candidate of [segment, ...fallbacks]) {
+				const el = segments.current.get(`${ownerId}:${candidate}`);
+				if (el && (scope === void 0 || scopeOf(el) === scope)) {
+					el.focus();
+					return true;
+				}
+			}
+		}
+		return false;
+	}, []);
+	const focusAfterRemove = (0, react.useCallback)((removedIndex) => {
+		if (focusChip(removedIndex + 1, 1, "value") || focusChip(removedIndex - 1, -1, "value")) return;
+		focusInput();
+	}, [focusChip, focusInput]);
+	const ctx = (0, react.useMemo)(() => ({
+		fields,
+		operators,
+		items,
+		expression: rendered,
+		groupsEnabled: !flat,
+		maxDepth,
+		draft,
+		setDraft,
+		commitDraft,
+		lastCommit,
+		settleCommit,
+		mounted,
+		updateItem: updateItem$1,
+		removeItem,
+		leaving,
+		settleRemove,
+		clear,
+		hasRemovableItems,
+		registerNonRemovable,
+		addGroup,
+		removeGroup,
+		setLogic,
+		getGroupDepth,
+		openGroupId,
+		setOpenGroup,
+		inputTarget,
+		openGroupInput,
+		getField,
+		getOperator,
+		getFieldOperators,
+		registerSegment,
+		registerInput,
+		focusChip,
+		focusInput,
+		focusAfterRemove,
+		announce,
+		announcement,
+		ariaLabel,
+		describeSuggestionsError
+	}), [
+		fields,
+		operators,
+		items,
+		rendered,
+		flat,
+		maxDepth,
+		draft,
+		setDraft,
+		commitDraft,
+		lastCommit,
+		settleCommit,
+		mounted,
+		updateItem$1,
+		removeItem,
+		leaving,
+		settleRemove,
+		clear,
+		hasRemovableItems,
+		registerNonRemovable,
+		addGroup,
+		removeGroup,
+		setLogic,
+		getGroupDepth,
+		openGroupId,
+		setOpenGroup,
+		inputTarget,
+		openGroupInput,
+		getField,
+		getOperator,
+		getFieldOperators,
+		registerSegment,
+		registerInput,
+		focusChip,
+		focusInput,
+		focusAfterRemove,
+		announce,
+		announcement,
+		ariaLabel,
+		describeSuggestionsError
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarContext.Provider, {
+		value: ctx,
+		children
+	});
+}
+// src/ds/components/FilterBar/filter-bar-option-list.tsx
+/** Default value row: the option's leading node (avatar, swatch…) followed by its label. */
+function FilterBarOptionLabel({ option }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [option.start, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "min-w-0 truncate",
+		children: option.label ?? option.value
+	})] });
+}
+/**
+* List/status/empty rows for a `ComboboxPrimitive.Root`, laid out like the DS
+* `Combobox` popup (scroller around the list). Items come
+* from the root's `items`; highlight and keyboard navigation are owned by Base UI.
+*/
+function FilterBarOptionList({ getKey, renderOption, isSelected, isLoading, error, emptyText = "No results.", "aria-label": ariaLabel, "aria-multiselectable": multiselectable }) {
+	const { describeSuggestionsError } = useFilterBarContext();
+	const idle = !isLoading && error === void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_combobox.Combobox.Status, {
+			className: require_combobox_parts.comboboxStyles.empty,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_spinner.Spinner, { size: "sm" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Loading…" })]
+		}),
+		!isLoading && error !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Status, {
+			className: require_combobox_parts.comboboxStyles.empty,
+			children: describeSuggestionsError?.(error) ?? "Couldn't load values."
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Empty, {
+			className: require_combobox_parts.comboboxStyles.empty,
+			children: idle ? emptyText : null
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_utils.cn(require_combobox_parts.comboboxStyles.listScroller, "max-h-[min(var(--spacing-dropdown),60dvh)]"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.List, {
+				"aria-label": ariaLabel,
+				"aria-multiselectable": multiselectable,
+				className: require_combobox_parts.comboboxStyles.list,
+				children: (option) => {
+					const selected = isSelected?.(option) ?? false;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_combobox.Combobox.Item, {
+						value: option,
+						"data-selected": selected || void 0,
+						className: require_utils.cn(require_combobox_parts.comboboxStyles.item, "min-w-0"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_utils.cn("flex min-w-0 flex-1 items-center gap-1.5 truncate", require_icons_icon_size_classes.iconSizeClasses.md, "[&>svg]:shrink-0"),
+							children: renderOption(option)
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_combobox_parts.comboboxStyles.itemRightSlot,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: require_combobox_parts.comboboxStyles.checkContainer,
+								children: isSelected ? selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, { className: require_combobox_parts.comboboxStyles.checkIcon }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, { className: require_combobox_parts.comboboxStyles.checkIcon }) })
+							})
+						})]
+					}, getKey(option));
+				}
+			})
+		})
+	] });
+}
+// src/ds/components/FilterBar/match-query.ts
+/** Every whitespace-separated term of `query` must appear in `text` (case-insensitive). */
+function matchesQuery(text, query) {
+	const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
+	if (terms.length === 0) return true;
+	const haystack = text.toLowerCase();
+	return terms.every((term) => haystack.includes(term));
+}
+/** Base UI `filter` for `ComboboxPrimitive.Root`, matching on the item label. */
+function matchesQueryFilter(item, query, itemToString) {
+	return matchesQuery(itemToString ? itemToString(item) : String(item), query);
+}
+// src/ds/components/FilterBar/use-filter-bar-item-keys.ts
+function isOutside(root, target) {
+	return !(target instanceof Node && root?.contains(target));
+}
+/**
+* An item's place in the bar's keyboard order, shared by every control the bar renders for an
+* item (a chip, the time range): registers whether the input's Backspace may remove it, and moves
+* focus with the arrows across the item's segments and on to its neighbours. Put `onKeyDown` on
+* the element `rootRef` points at.
+*/
+function useFilterBarItemKeys({ item, rootRef, pinned, removable, inert = false, segmentSelector = "[data-filter-bar-segment]" }) {
+	const ctx = useFilterBarContext();
+	const index = ctx.items.findIndex((i) => i.id === item.id);
+	const { registerNonRemovable } = ctx;
+	(0, react.useEffect)(() => {
+		registerNonRemovable(item.id, pinned);
+		return () => registerNonRemovable(item.id, false);
+	}, [
+		registerNonRemovable,
+		item.id,
+		pinned
+	]);
+	const onKeyDown = (event) => {
+		if (inert || isOutside(rootRef.current, event.target)) return;
+		const segments = Array.from(rootRef.current?.querySelectorAll(segmentSelector) ?? []);
+		const current = segments.findIndex((el) => el === event.target);
+		switch (event.key) {
+			case "ArrowRight": {
+				event.preventDefault();
+				const next = segments[current + 1];
+				if (next) next.focus();
+				else if (!ctx.focusChip(index + 1, 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":
+				if (!removable) return;
+				event.preventDefault();
+				ctx.removeItem(item.id);
+				ctx.focusAfterRemove(index);
+		}
+	};
+	return {
+		index,
+		onKeyDown
+	};
+}
+// src/ds/components/FilterBar/use-value-suggestions.ts
+var DEBOUNCE_MS = 150;
+var BOOLEAN_OPTIONS = [{
+	value: "true",
+	label: "True"
+}, {
+	value: "false",
+	label: "False"
+}];
+/** The field's suggestions, defaulting to True/False for boolean fields. */
+var getFieldSuggestions = (field) => field?.suggestions ?? (field?.type === "boolean" ? BOOLEAN_OPTIONS : void 0);
+/**
+* Value suggestions for a field. Static lists are filtered locally. Lazy
+* resolvers run only while `enabled`, are debounced on `query`, receive an
+* AbortSignal, and only the latest response is applied.
+*/
+function useValueSuggestions({ field, operatorId, query, enabled }) {
+	const suggestions = getFieldSuggestions(field);
+	const resolver = typeof suggestions === "function" ? suggestions : void 0;
+	const staticOptions = Array.isArray(suggestions) ? suggestions : void 0;
+	const [remote, setRemote] = (0, react.useState)([]);
+	const [isLoading, setIsLoading] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)(void 0);
+	const requestId = (0, react.useRef)(0);
+	const resolverRef = (0, react.useRef)(resolver);
+	resolverRef.current = resolver;
+	const hasResolver = Boolean(resolver);
+	(0, react.useEffect)(() => {
+		if (!hasResolver || !enabled) {
+			setRemote([]);
+			setIsLoading(false);
+			setError(void 0);
+			return;
+		}
+		const id = ++requestId.current;
+		const controller = new AbortController();
+		setIsLoading(true);
+		const timer = setTimeout(() => {
+			Promise.resolve().then(() => resolverRef.current?.({
+				query,
+				operatorId,
+				signal: controller.signal
+			}) ?? []).then((result) => {
+				if (id !== requestId.current) return;
+				setRemote(result);
+				setError(void 0);
+				setIsLoading(false);
+			}).catch((err) => {
+				if (id !== requestId.current || controller.signal.aborted) return;
+				setError(err);
+				setIsLoading(false);
+			});
+		}, DEBOUNCE_MS);
+		return () => {
+			clearTimeout(timer);
+			controller.abort();
+		};
+	}, [
+		hasResolver,
+		enabled,
+		query,
+		operatorId
+	]);
+	return {
+		options: (0, react.useMemo)(() => {
+			if (staticOptions) return staticOptions.filter((o) => matchesQuery(o.label ?? o.value, query));
+			return remote;
+		}, [
+			staticOptions,
+			remote,
+			query
+		]),
+		isLoading: Boolean(resolver) && isLoading,
+		error,
+		hasSuggestions: Boolean(suggestions)
+	};
+}
+// src/ds/components/FilterBar/use-value-step.ts
+var toStrings = (value) => Array.isArray(value) ? value.map(String) : [];
+/**
+* Shared value-editing logic for the typeahead value step and the chip value
+* editor. Single arity: picking an option (or Enter on free text) commits.
+* Many arity: Enter/click toggles the highlighted option, Enter on free text adds
+* it to the selection; Ctrl/Meta+Enter (or `commitDone`) commits the selection.
+* List navigation itself is owned by the surrounding `ComboboxPrimitive.Root`.
+*/
+function useValueStep({ field, operator, query, enabled, initialValue, setQuery, onCommit }) {
+	const isMany = operator?.arity === "many";
+	const [selected, setSelected] = (0, react.useState)(() => toStrings(initialValue));
+	const initialValueRef = (0, react.useRef)(initialValue);
+	initialValueRef.current = initialValue;
+	(0, react.useEffect)(() => {
+		setSelected(enabled ? toStrings(initialValueRef.current) : []);
+	}, [enabled]);
+	const freeTextOperator = operator?.freeText === true;
+	const suggestions = useValueSuggestions({
+		field: freeTextOperator ? void 0 : field,
+		operatorId: operator?.id ?? "",
+		query,
+		enabled
+	});
+	const type = field?.type;
+	const allowFreeText = (!field?.strict || freeTextOperator) && type !== "boolean";
+	const options = (0, react.useMemo)(() => {
+		if (!isMany) return suggestions.options;
+		const unlisted = unlistedSelection(selected, suggestions.options, suggestions.hasSuggestions, query);
+		if (unlisted.length === 0) return suggestions.options;
+		return [...suggestions.options, ...unlisted];
+	}, [
+		isMany,
+		selected,
+		suggestions.options,
+		suggestions.hasSuggestions,
+		query
+	]);
+	const toggle = (0, react.useCallback)((value) => {
+		setSelected((current) => current.includes(value) ? current.filter((v) => v !== value) : [...current, value]);
+	}, []);
+	const commit = (0, react.useCallback)((values) => onCommit(Array.isArray(values) ? values.map((v) => require_types.parseFieldValue(type, v)) : require_types.parseFieldValue(type, values)), [onCommit, type]);
+	const handleSelect = (0, react.useCallback)((option) => {
+		if (isMany) toggle(option.value);
+		else commit(option.value);
+	}, [
+		isMany,
+		toggle,
+		commit
+	]);
+	const commitSelection = (0, react.useCallback)(() => {
+		if (selected.length === 0) return false;
+		commit(selected);
+		return true;
+	}, [selected, commit]);
+	const canCommitFreeText = (0, react.useCallback)((text) => allowFreeText && text.length > 0 && (type !== "number" || Number.isFinite(Number(text))) && (!freeTextOperator || /[\p{L}\p{M}\p{N}]/u.test(text)), [
+		allowFreeText,
+		freeTextOperator,
+		type
+	]);
+	/** Many arity: adds the typed text to the selection and clears the query, keeping the editor open. */
+	function addFreeText() {
+		const text = query.trim();
+		if (!canCommitFreeText(text)) return false;
+		setSelected((current) => current.includes(text) ? current : [...current, text]);
+		setQuery("");
+		return true;
+	}
+	const commitFreeText = (0, react.useCallback)(() => {
+		const text = query.trim();
+		if (!canCommitFreeText(text)) return false;
+		commit(isMany ? selected.includes(text) ? selected : [...selected, text] : text);
+		return true;
+	}, [
+		canCommitFreeText,
+		query,
+		isMany,
+		selected,
+		commit
+	]);
+	/** Enter on free text (or Apply): commits a single value, adds to a multi-selection. */
+	function submitFreeText() {
+		if (isMany) return addFreeText();
+		return commitFreeText();
+	}
+	/** Done (or Ctrl/Meta+Enter) on a multi-selection. */
+	function commitDone() {
+		if (suggestions.options.length === 0) return commitFreeText() || commitSelection();
+		return commitSelection() || commitFreeText();
+	}
+	/**
+	* Enter handling that Base UI does not cover: Ctrl/Meta+Enter commits a
+	* multi-selection; plain Enter with nothing highlighted submits free text.
+	* Returns `true` when the event was consumed.
+	*/
+	function handleKeyDown(event, highlighted) {
+		if (event.key !== "Enter") return false;
+		if (isMany && (event.ctrlKey || event.metaKey)) {
+			event.preventDefault();
+			return commitDone();
+		}
+		if (highlighted === null) {
+			event.preventDefault();
+			return submitFreeText();
+		}
+		return false;
+	}
+	return {
+		isMany,
+		selected,
+		toggle,
+		options,
+		isLoading: suggestions.isLoading,
+		error: suggestions.error,
+		hasSuggestions: suggestions.hasSuggestions,
+		/** True when there is a list to show: suggestions, or values already added to a multi-selection. */
+		hasOptions: suggestions.hasSuggestions || options.length > 0,
+		allowFreeText,
+		/** True when the current query can be committed as free text (non-empty, numeric when the field is a number). */
+		canCommitQuery: canCommitFreeText(query.trim()),
+		handleSelect,
+		handleKeyDown,
+		submitFreeText,
+		commitDone
+	};
+}
+/** Selected values missing from `options`; with suggestions, only those matching the search. */
+function unlistedSelection(selected, options, hasSuggestions, query) {
+	const listed = new Set(options.map((option) => option.value));
+	const isShown = (value) => !hasSuggestions || matchesQuery(value, query);
+	return selected.filter((value) => !listed.has(value) && isShown(value)).map((value) => ({ value }));
+}
+var segmentClass = require_utils.cn("filter-bar-segment flex max-w-48 min-w-0 items-center gap-(--control-gap) overflow-hidden px-2 text-label whitespace-nowrap outline-none", require_icons_icon_size_classes.iconSizeClasses["sm"], "[&>svg]:shrink-0");
+var alwaysHighlightProps = {
+	autoHighlight: "always",
+	keepHighlight: true
+};
+var chipClass = require_utils.cn("filter-bar-chip relative flex max-w-full items-stretch divide-x divide-border overflow-hidden rounded-full p-px [--control-border:1px]", require_primitives_form_element.inputSurfaceAndFocusWithinStyle, require_primitives_control_size.controlHeight["sm"], require_primitives_control_size.controlSpacing["sm"]);
+var editableSegmentClass = require_utils.cn(segmentClass, require_primitives_control_icon.controlIconState, "cursor-pointer hover:bg-fill-subtle hover:text-foreground", "focus-visible:bg-fill-hover focus-visible:text-foreground data-[popup-open]:bg-fill-hover data-[popup-open]:text-foreground");
+/** Field label with its optional leading icon — used by chips, the draft chip and field option lists. */
+function FilterBarFieldLabel({ field, label }) {
+	const Icon = field?.icon;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { "aria-hidden": true }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "truncate",
+		children: label ?? field?.label
+	})] });
+}
+/** Inline style carrying a field's accent onto its field segment: text and icon, at rest and on hover. */
+var fieldSegmentAccentStyle = (field) => field?.color ? {
+	color: field.color,
+	"--control-icon-rest": field.color,
+	"--control-icon-hover": field.color
+} : void 0;
+/** Segments a chip already showed before its latest step, given how far its draft had got. */
+var settledSegments = (from, operatorImplied) => {
+	if (from === "none") return 0;
+	if (from === "field" || operatorImplied) return 1;
+	return 2;
+};
+var formatValue = (value, field) => {
+	const suggestions = getFieldSuggestions(field);
+	const options = Array.isArray(suggestions) ? suggestions : void 0;
+	const label = (v) => options?.find((o) => o.value === String(v))?.label ?? String(v);
+	return Array.isArray(value) ? value.map(label).join(", ") : label(value);
+};
+var formatValueCompact = (value, field) => {
+	if (!Array.isArray(value) || value.length < 2) return formatValue(value, field);
+	return `${formatValue(value.slice(0, 1), field)} +${value.length - 1}`;
+};
+var ChipContext = (0, react.createContext)(null);
+var useChip = () => {
+	const chip = (0, react.useContext)(ChipContext);
+	if (!chip) throw new Error("FilterBarChip segments must be rendered inside <FilterBarChip>.");
+	return chip;
+};
+function FilterBarChip({ item, readOnly = false, removable = true, draft = false, className, children }) {
+	const ctx = useFilterBarContext();
+	const [initial] = (0, react.useState)(() => !ctx.mounted);
+	const [openSegment, setOpenSegment] = (0, react.useState)(null);
+	const field = ctx.getField(item.fieldId);
+	const operator = (field && ctx.getFieldOperators(field).find((o) => o.id === item.operatorId)) ?? ctx.getOperator(item.operatorId);
+	const rootRef = (0, react.useRef)(null);
+	const leaving = ctx.leaving.has(item.id);
+	const { index, onKeyDown } = useFilterBarItemKeys({
+		item,
+		rootRef,
+		pinned: !draft && (readOnly || !removable),
+		removable,
+		inert: readOnly || draft || leaving
+	});
+	const { settleRemove } = ctx;
+	(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(item.id);
+			return;
+		}
+		let cancelled = false;
+		Promise.all(animations.map((animation) => animation.finished)).then(() => {
+			if (!cancelled) settleRemove(item.id);
+		}).catch(() => {});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		leaving,
+		item.id,
+		settleRemove
+	]);
+	const operatorImplied = field ? ctx.getFieldOperators(field).length === 1 : false;
+	const label = [
+		field?.label ?? item.fieldId,
+		operatorImplied ? "" : operator?.label ?? item.operatorId,
+		draft ? "" : formatValue(item.value, field)
+	].filter(Boolean).join(" ");
+	const commit = !draft && ctx.lastCommit?.item.id === item.id ? ctx.lastCommit : null;
+	const settled = settledSegments(draft ? ctx.draft?.from ?? "none" : commit?.from ?? "none", operatorImplied);
+	const shine = commit?.glint ?? false;
+	const chipValue = (0, react.useMemo)(() => ({
+		item,
+		index,
+		field,
+		operator,
+		openSegment,
+		setOpenSegment,
+		readOnly,
+		draft,
+		leaving,
+		operatorImplied
+	}), [
+		item,
+		index,
+		field,
+		operator,
+		openSegment,
+		readOnly,
+		draft,
+		leaving,
+		operatorImplied
+	]);
+	const content = children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarChipField, {}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarChipOperator, {}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarChipValue, {}),
+		removable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarChipRemove, {})
+	] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipContext.Provider, {
+		value: chipValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: rootRef,
+			role: "group",
+			"aria-label": label,
+			"aria-hidden": draft || leaving || void 0,
+			"data-slot": "filter-bar-chip",
+			"data-draft": draft || void 0,
+			"data-initial": initial || void 0,
+			"data-readonly": readOnly || void 0,
+			"data-leaving": leaving || void 0,
+			"data-shine": shine && !leaving || void 0,
+			className: require_utils.cn(chipClass, leaving && "pointer-events-none", className),
+			style: {
+				"--filter-bar-segments-settled": settled,
+				"--filter-bar-chip-shine": field?.color ?? "currentColor"
+			},
+			onKeyDown,
+			onClick: (event) => event.stopPropagation(),
+			onAnimationEnd: (event) => {
+				if (event.animationName === "filter-bar-chip-shine") ctx.settleCommit();
+			},
+			children: [readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_utils.cn(segmentClass, "pr-0 text-muted-foreground [--filter-bar-segment-padding:0.5rem_0]"),
+				title: "This filter is locked",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LockIcon, {})
+			}), content]
+		})
+	});
+}
+var SegmentPopupContext = (0, react.createContext)({ highlighted: null });
+/** The search/free-text input at the top of a segment popup. */
+function SegmentSearchInput({ placeholder, icon: Icon = lucide_react.SearchIcon, inputMode, onKeyDown }) {
+	const { highlighted } = (0, react.useContext)(SegmentPopupContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_combobox_parts.comboboxStyles.searchContainer,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: require_combobox_parts.comboboxStyles.searchIcon }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Input, {
+			className: require_combobox_parts.comboboxStyles.searchInput,
+			placeholder,
+			inputMode,
+			...require_primitives_password_manager_autofill.passwordManagerOptOutProps,
+			onKeyDown: (event) => onKeyDown?.(event, highlighted)
+		})]
+	});
+}
+/**
+* A chip segment: a button trigger that opens an option popup. The editor
+* owning the segment supplies items, filtering, selection routing and the
+* popup content.
+*/
+function SegmentCombobox({ segment, label, fullLabel = label, ariaLabel, items, itemToString, filter, value = null, query, onQueryChange, onSelect, onOpen, children }) {
+	const ctx = useFilterBarContext();
+	const chip = useChip();
+	const container = require_primitives_portal_container.usePortalContainer();
+	const open = chip.openSegment === segment;
+	const [highlighted, setHighlighted] = (0, react.useState)(null);
+	const isField = segment === "field";
+	const content = isField ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarFieldLabel, {
+		field: chip.field,
+		label
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "truncate",
+		children: label
+	});
+	if (chip.readOnly || chip.draft || chip.leaving) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_utils.cn(segmentClass, isField && "text-foreground"),
+		style: isField ? fieldSegmentAccentStyle(chip.field) : void 0,
+		title: fullLabel,
+		children: content
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_combobox.Combobox.Root, {
+		items,
+		itemToStringLabel: itemToString,
+		itemToStringValue: itemToString,
+		filter,
+		value,
+		onValueChange: (item, details) => {
+			details.cancel();
+			if (item !== null) onSelect(item);
+		},
+		inputValue: query,
+		onInputValueChange: (next, details) => {
+			if (details.reason === "input-change") onQueryChange(next);
+		},
+		onItemHighlighted: (item) => setHighlighted(item ?? null),
+		open,
+		onOpenChange: (next) => {
+			if (next) onOpen?.();
+			else onQueryChange("");
+			chip.setOpenSegment(next ? segment : null);
+		},
+		...alwaysHighlightProps,
+		modal: false,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Trigger, {
+			ref: (el) => ctx.registerSegment(chip.item.id, segment, el),
+			render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"data-filter-bar-segment": "",
+				tabIndex: segment === "value" ? 0 : -1,
+				"aria-label": `${ariaLabel}: ${fullLabel}`,
+				title: fullLabel,
+				className: require_utils.cn(editableSegmentClass, isField && "text-foreground"),
+				style: isField ? fieldSegmentAccentStyle(chip.field) : void 0
+			}),
+			children: content
+		}), /* @__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, {
+				align: "start",
+				sideOffset: 4,
+				positionMethod: require_primitives_floating.FLOATING_POSITION_METHOD,
+				className: require_combobox_parts.comboboxStyles.positioner,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Popup, {
+					className: require_utils.cn(require_combobox_parts.comboboxStyles.popup, "min-w-44"),
+					"data-slot": "filter-bar-editor",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentPopupContext.Provider, {
+						value: { highlighted },
+						children
+					})
+				})
+			})
+		})]
+	});
+}
+var fieldLabel = (field) => field.label;
+var operatorLabel = (operator) => operator.label;
+var optionLabel = (option) => option.label ?? option.value;
+function FieldEditor() {
+	const ctx = useFilterBarContext();
+	const chip = useChip();
+	const [query, setQuery] = (0, react.useState)("");
+	const onSelect = (0, react.useCallback)((field) => {
+		const allowed = ctx.getFieldOperators(field);
+		const nextOperator = allowed.find((o) => o.id === chip.item.operatorId) ?? allowed[0];
+		const arityChanged = nextOperator?.arity !== chip.operator?.arity;
+		ctx.updateItem(chip.item.id, {
+			fieldId: field.id,
+			operatorId: nextOperator?.id ?? chip.item.operatorId,
+			value: arityChanged || field.id !== chip.item.fieldId ? emptyValueFor(nextOperator) : chip.item.value
+		});
+		chip.setOpenSegment(null);
+	}, [ctx, chip]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SegmentCombobox, {
+		segment: "field",
+		ariaLabel: "Field",
+		label: chip.field?.label ?? chip.item.fieldId,
+		items: ctx.fields,
+		itemToString: fieldLabel,
+		filter: matchesQueryFilter,
+		value: chip.field,
+		query,
+		onQueryChange: setQuery,
+		onSelect,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentSearchInput, { placeholder: "Change field" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarOptionList, {
+			"aria-label": "Fields",
+			getKey: (f) => f.id,
+			renderOption: (f) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarFieldLabel, { field: f }),
+			emptyText: "No matching field."
+		})]
+	});
+}
+function OperatorEditor() {
+	const ctx = useFilterBarContext();
+	const chip = useChip();
+	const [query, setQuery] = (0, react.useState)("");
+	const options = (0, react.useMemo)(() => chip.field ? ctx.getFieldOperators(chip.field) : ctx.operators, [ctx, chip.field]);
+	const onSelect = (0, react.useCallback)((operator) => {
+		const arityChanged = (operator.arity ?? "one") !== (chip.operator?.arity ?? "one");
+		ctx.updateItem(chip.item.id, {
+			operatorId: operator.id,
+			value: arityChanged ? emptyValueFor(operator) : chip.item.value
+		});
+		chip.setOpenSegment(null);
+	}, [ctx, chip]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SegmentCombobox, {
+		segment: "operator",
+		ariaLabel: "Operator",
+		label: chip.operator?.label ?? chip.item.operatorId,
+		items: options,
+		itemToString: operatorLabel,
+		filter: matchesQueryFilter,
+		value: chip.operator,
+		query,
+		onQueryChange: setQuery,
+		onSelect,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentSearchInput, { placeholder: "Change operator" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarOptionList, {
+			"aria-label": "Operators",
+			getKey: (o) => o.id,
+			renderOption: (o) => o.label,
+			emptyText: "No matching operator."
+		})]
+	});
+}
+function ValueEditor() {
+	const ctx = useFilterBarContext();
+	const chip = useChip();
+	const open = chip.openSegment === "value";
+	const [query, setQuery] = (0, react.useState)("");
+	const close = (0, react.useCallback)(() => chip.setOpenSegment(null), [chip]);
+	const onCommit = (0, react.useCallback)((value) => {
+		ctx.updateItem(chip.item.id, { value });
+		close();
+	}, [
+		ctx,
+		chip.item.id,
+		close
+	]);
+	const step = useValueStep({
+		field: chip.field,
+		operator: chip.operator,
+		query,
+		enabled: open,
+		initialValue: chip.item.value,
+		setQuery,
+		onCommit
+	});
+	const ValueInput = VALUE_INPUTS[chip.field?.type ?? "text"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentCombobox, {
+		segment: "value",
+		ariaLabel: "Value",
+		label: formatValueCompact(chip.item.value, chip.field) || "…",
+		fullLabel: formatValue(chip.item.value, chip.field) || "…",
+		items: step.options,
+		itemToString: optionLabel,
+		filter: null,
+		query,
+		onQueryChange: setQuery,
+		onSelect: step.handleSelect,
+		onOpen: () => setQuery(!Array.isArray(chip.item.value) && !chip.field?.suggestions ? String(chip.item.value) : ""),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueInput, {
+			step,
+			onCancel: close
+		})
+	});
+}
+/** Suggestion list + multi-select footer, shared by every value input. */
+function ValueOptions({ step, onCancel }) {
+	const chip = useChip();
+	const modEnterLabel = require_hooks_use_keyboard_shortcut_label.useIsApplePlatform() ? "⌘↵" : "Ctrl ↵";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [step.hasOptions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarOptionList, {
+		"aria-label": "Values",
+		"aria-multiselectable": step.isMany || void 0,
+		getKey: (o) => o.value,
+		renderOption: (option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarOptionLabel, { option }),
+		isSelected: (o) => step.isMany ? step.selected.includes(o.value) : String(chip.item.value) === o.value,
+		isLoading: step.isLoading,
+		error: step.error,
+		emptyText: step.allowFreeText ? "No suggestions. Press Enter to use your text." : "No matching value."
+	}), step.isMany && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-end gap-1 border-t border-border p-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+			size: "sm",
+			variant: "ghost",
+			onClick: onCancel,
+			children: "Cancel"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Button.Button, {
+			size: "sm",
+			variant: "default",
+			onClick: () => step.commitDone(),
+			children: ["Done", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Kbd.Kbd, {
+				size: "xs",
+				children: modEnterLabel
+			})]
+		})]
+	})] });
+}
+function freeTextPlaceholder(step, noun) {
+	if (!step.hasSuggestions) return `Type a ${noun}…`;
+	if (step.allowFreeText) return `Search or type a ${noun}…`;
+	return `Search ${noun}s…`;
+}
+/** Free-text (optionally suggestion-backed) value input; text and number share it. */
+function FreeTextValueInput({ step, onCancel, inputMode, noun }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentSearchInput, {
+		icon: step.hasSuggestions ? lucide_react.SearchIcon : lucide_react.PencilIcon,
+		inputMode,
+		placeholder: freeTextPlaceholder(step, noun),
+		onKeyDown: (event, highlighted) => {
+			const highlightedOption = step.hasSuggestions ? highlighted : null;
+			if (step.handleKeyDown(event, highlightedOption) || event.key === "Enter" && highlightedOption === null) event.preventBaseUIHandler();
+		}
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueOptions, {
+		step,
+		onCancel
+	})] });
+}
+function TextValueInput(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FreeTextValueInput, {
+		...props,
+		noun: "value"
+	});
+}
+function NumberValueInput(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FreeTextValueInput, {
+		...props,
+		inputMode: "decimal",
+		noun: "number"
+	});
+}
+/** Select-like: no search input, just the True/False (or custom) options. */
+function BooleanValueInput(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueOptions, { ...props });
+}
+var VALUE_INPUTS = {
+	text: TextValueInput,
+	number: NumberValueInput,
+	boolean: BooleanValueInput
+};
+function FilterBarChipField() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldEditor, {});
+}
+function FilterBarChipOperator() {
+	const chip = useChip();
+	if (chip.operatorImplied) return null;
+	if (chip.draft && !chip.operator) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OperatorEditor, {});
+}
+function FilterBarChipValue() {
+	const chip = useChip();
+	if (chip.draft || (chip.operator?.arity ?? "one") === "none") return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueEditor, {});
+}
+/** The trailing × segment of a chip: its own cell, so it keeps an even inset instead of the pill's outer one. */
+var removeSegmentClass = require_utils.cn(editableSegmentClass, require_primitives_control_icon.controlIconOnly, "filter-bar-segment-remove px-1.5 text-muted-foreground [--filter-bar-segment-padding:0.375rem]");
+function FilterBarChipRemove() {
+	const ctx = useFilterBarContext();
+	const chip = useChip();
+	if (chip.readOnly || chip.draft) return null;
+	if (chip.leaving) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: removeSegmentClass,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {})
+	});
+	const label = `Remove ${chip.field?.label ?? chip.item.fieldId} filter`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"data-filter-bar-segment": "",
+		tabIndex: -1,
+		"aria-label": label,
+		title: label,
+		ref: (el) => ctx.registerSegment(chip.item.id, "remove", el),
+		className: removeSegmentClass,
+		onClick: () => {
+			ctx.removeItem(chip.item.id);
+			ctx.focusAfterRemove(chip.index);
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {})
+	});
+}
+FilterBarChip.Field = FilterBarChipField;
+FilterBarChip.Operator = FilterBarChipOperator;
+FilterBarChip.Value = FilterBarChipValue;
+FilterBarChip.Remove = FilterBarChipRemove;
+Object.defineProperty(exports, "FILTER_BAR_SCOPE_ATTR", {
+	enumerable: true,
+	get: function() {
+		return FILTER_BAR_SCOPE_ATTR;
+	}
+});
+Object.defineProperty(exports, "FilterBarChip", {
+	enumerable: true,
+	get: function() {
+		return FilterBarChip;
+	}
+});
+Object.defineProperty(exports, "FilterBarChipField", {
+	enumerable: true,
+	get: function() {
+		return FilterBarChipField;
+	}
+});
+Object.defineProperty(exports, "FilterBarChipOperator", {
+	enumerable: true,
+	get: function() {
+		return FilterBarChipOperator;
+	}
+});
+Object.defineProperty(exports, "FilterBarChipRemove", {
+	enumerable: true,
+	get: function() {
+		return FilterBarChipRemove;
+	}
+});
+Object.defineProperty(exports, "FilterBarChipValue", {
+	enumerable: true,
+	get: function() {
+		return FilterBarChipValue;
+	}
+});
+Object.defineProperty(exports, "FilterBarFieldLabel", {
+	enumerable: true,
+	get: function() {
+		return FilterBarFieldLabel;
+	}
+});
+Object.defineProperty(exports, "FilterBarOptionLabel", {
+	enumerable: true,
+	get: function() {
+		return FilterBarOptionLabel;
+	}
+});
+Object.defineProperty(exports, "FilterBarOptionList", {
+	enumerable: true,
+	get: function() {
+		return FilterBarOptionList;
+	}
+});
+Object.defineProperty(exports, "FilterBarProvider", {
+	enumerable: true,
+	get: function() {
+		return FilterBarProvider;
+	}
+});
+Object.defineProperty(exports, "alwaysHighlightProps", {
+	enumerable: true,
+	get: function() {
+		return alwaysHighlightProps;
+	}
+});
+Object.defineProperty(exports, "chipClass", {
+	enumerable: true,
+	get: function() {
+		return chipClass;
+	}
+});
+Object.defineProperty(exports, "countLeaves", {
+	enumerable: true,
+	get: function() {
+		return countLeaves;
+	}
+});
+Object.defineProperty(exports, "editableSegmentClass", {
+	enumerable: true,
+	get: function() {
+		return editableSegmentClass;
+	}
+});
+Object.defineProperty(exports, "findGroup", {
+	enumerable: true,
+	get: function() {
+		return findGroup;
+	}
+});
+Object.defineProperty(exports, "formatValue", {
+	enumerable: true,
+	get: function() {
+		return formatValue;
+	}
+});
+Object.defineProperty(exports, "matchesQueryFilter", {
+	enumerable: true,
+	get: function() {
+		return matchesQueryFilter;
+	}
+});
+Object.defineProperty(exports, "removeSegmentClass", {
+	enumerable: true,
+	get: function() {
+		return removeSegmentClass;
+	}
+});
+Object.defineProperty(exports, "useFilterBarContext", {
+	enumerable: true,
+	get: function() {
+		return useFilterBarContext;
+	}
+});
+Object.defineProperty(exports, "useFilterBarItemKeys", {
+	enumerable: true,
+	get: function() {
+		return useFilterBarItemKeys;
+	}
+});
+Object.defineProperty(exports, "useValueStep", {
+	enumerable: true,
+	get: function() {
+		return useValueStep;
+	}
+});
+
+//# sourceMappingURL=filter-bar-chip-DFsbUZ-V.cjs.map