@pipe0/react 0.0.2

package/dist/components/internal/combobox/suggest-combobox.mjs

@@ -0,0 +1,294 @@
+import { cn } from "../../../lib/utils.mjs";
+import { Button } from "../../ui/button.mjs";
+import { IconGripVertical } from "../icons.mjs";
+import { useDebouncedFn } from "../../../hooks/use-debounced-fn.mjs";
+import { FieldTypeBadge } from "../../../widgets/field-type-badge.mjs";
+import { WidgetStrip } from "../../../widgets/widget-strip.mjs";
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxItem, ComboboxList, ComboboxTrigger, useComboboxAnchor } from "../../ui/combobox.mjs";
+import { filterOptions } from "../multi-select-popover-trigger.mjs";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+import useSWR from "swr";
+
+//#region src/components/internal/combobox/suggest-combobox.tsx
+/** Split widgets so `field_type` can render on the trailing edge of dropdown
+* rows while every other widget stays in the leading strip. */
+function splitWidgets(widgets) {
+	const { field_type: _ignored, ...rest } = widgets;
+	return { leading: Object.values(rest).some((v) => v != null) ? rest : void 0 };
+}
+/** Reorderable chip matching `ComboboxChip` visually, with a grip handle. */
+function SortableChip({ id, onRemove, children }) {
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+	return /* @__PURE__ */ jsxs("span", {
+		ref: setNodeRef,
+		style: {
+			transform: transform ? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)` : void 0,
+			transition,
+			opacity: isDragging ? .6 : 1
+		},
+		className: cn("pz:flex pz:h-[calc(--spacing(5.25))] pz:w-fit pz:items-center pz:gap-1 pz:rounded-sm pz:bg-muted pz:pl-0.5 pz:pr-0 pz:text-xs pz:font-medium pz:whitespace-nowrap pz:text-foreground"),
+		...attributes,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				role: "button",
+				tabIndex: -1,
+				"aria-label": "Drag to reorder",
+				className: "pz:flex pz:items-center pz:justify-center pz:cursor-grab pz:text-muted-foreground pz:hover:text-foreground pz:touch-none",
+				...listeners,
+				children: /* @__PURE__ */ jsx(IconGripVertical, {
+					width: 12,
+					height: 12
+				})
+			}),
+			children,
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-xs",
+				className: "pz:opacity-50 pz:hover:opacity-100",
+				onClick: (e) => {
+					e.stopPropagation();
+					onRemove();
+				},
+				"aria-label": "Remove",
+				children: /* @__PURE__ */ jsx(XIcon, { className: "pz:pointer-events-none" })
+			})
+		]
+	});
+}
+/**
+* Unified combobox built on `@base-ui/react`'s Combobox primitive.
+*
+* - Chips + inline search input via `ComboboxChips` / `ComboboxChipsInput`.
+* - Static (`options`) or async (`loadOptions`) item sources. External
+*   filtering in both cases so match-sorter ranking / server relevance is
+*   honored and base-ui's built-in filter doesn't double-filter.
+* - Free-text creation (`allowCreate`) renders an inline "Add \"X\"" item.
+* - `maxItems`, `excludeValues`, `disableSearch`, `ariaInvalid`, `disabled`.
+* - Debounced async loader with an in-memory cache keyed by query string.
+*/
+function SuggestCombobox({ value, onChange, options, loadOptions, allowCreate = false, disableSearch = false, maxItems, excludeValues = [], ariaInvalid, disabled, debounceMs = 300, labelFor, iconFor, emptyLabel, placeholder, reorderable = false }) {
+	const [input, setInput] = useState("");
+	const [debouncedQuery, setDebouncedQuery] = useState("");
+	const [open, setOpen] = useState(false);
+	const isAsync = typeof loadOptions === "function";
+	const debouncedSetQuery = useDebouncedFn((q) => setDebouncedQuery(q), debounceMs);
+	const instanceId = useId();
+	const { data: asyncResults = null, isLoading: swrIsLoading, isValidating: swrIsValidating } = useSWR(loadOptions && (open || debouncedQuery !== "") ? [instanceId, debouncedQuery] : null, async ([, q]) => {
+		if (!loadOptions) return [];
+		return (await loadOptions(q)).filter((o) => !!o.value);
+	}, { keepPreviousData: true });
+	const loading = swrIsLoading || swrIsValidating;
+	const excludeSet = useMemo(() => new Set(excludeValues), [excludeValues]);
+	const selectedSet = useMemo(() => new Set(value), [value]);
+	const anchor = useComboboxAnchor();
+	const filteredSuggestions = useMemo(() => {
+		const source = isAsync ? asyncResults ?? [] : options ?? [];
+		return (isAsync ? source : filterOptions(source, input)).filter((o) => !excludeSet.has(o.value));
+	}, [
+		isAsync,
+		asyncResults,
+		options,
+		input,
+		excludeSet
+	]);
+	const trimmedInput = input.trim();
+	const showCreateRow = allowCreate && trimmedInput.length > 0 && !selectedSet.has(trimmedInput) && !excludeSet.has(trimmedInput) && !filteredSuggestions.some((o) => o.value.toLowerCase() === trimmedInput.toLowerCase());
+	const resolveLabel = (v) => {
+		if (labelFor) return labelFor(v);
+		const fromStatic = options?.find((o) => o.value === v)?.label;
+		if (fromStatic) return fromStatic;
+		return asyncResults?.find((o) => o.value === v)?.label ?? v;
+	};
+	const widgetCacheRef = useRef(/* @__PURE__ */ new Map());
+	useEffect(() => {
+		for (const opt of options ?? []) if (opt.widgets) widgetCacheRef.current.set(opt.value, opt.widgets);
+		for (const opt of asyncResults ?? []) if (opt.widgets) widgetCacheRef.current.set(opt.value, opt.widgets);
+	}, [options, asyncResults]);
+	const resolveWidgets = (v) => options?.find((o) => o.value === v)?.widgets ?? asyncResults?.find((o) => o.value === v)?.widgets ?? widgetCacheRef.current.get(v);
+	const valueObjects = useMemo(() => value.map((v) => ({
+		value: v,
+		label: resolveLabel(v),
+		widgets: resolveWidgets(v)
+	})), [
+		value,
+		options,
+		asyncResults,
+		labelFor
+	]);
+	const items = useMemo(() => {
+		const list = [];
+		if (showCreateRow) list.push({
+			value: trimmedInput,
+			label: `Add "${trimmedInput}"`,
+			__create: true
+		});
+		for (const o of filteredSuggestions) list.push(o);
+		return list;
+	}, [
+		showCreateRow,
+		trimmedInput,
+		filteredSuggestions
+	]);
+	const atMax = maxItems !== void 0 && value.length >= maxItems;
+	const sortSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor));
+	const handleDragEnd = (event) => {
+		const { active, over } = event;
+		if (!over || active.id === over.id) return;
+		const from = value.indexOf(String(active.id));
+		const to = value.indexOf(String(over.id));
+		if (from === -1 || to === -1) return;
+		const next = [...value];
+		const [moved] = next.splice(from, 1);
+		next.splice(to, 0, moved);
+		onChange(next);
+	};
+	return /* @__PURE__ */ jsxs(Combobox, {
+		multiple: true,
+		items,
+		filter: null,
+		open,
+		onOpenChange: setOpen,
+		value: valueObjects,
+		onValueChange: (next) => {
+			if (!Array.isArray(next)) return;
+			const seen = /* @__PURE__ */ new Set();
+			const deduped = [];
+			for (const item of next) {
+				const v = typeof item === "string" ? item : item.value;
+				if (!v || seen.has(v)) continue;
+				if (excludeSet.has(v)) continue;
+				if (maxItems !== void 0 && deduped.length >= maxItems) break;
+				seen.add(v);
+				deduped.push(v);
+			}
+			onChange(deduped);
+			setInput("");
+			if (isAsync) debouncedSetQuery("");
+		},
+		isItemEqualToValue: (a, b) => a.value === b.value,
+		itemToStringLabel: (item) => item.label,
+		itemToStringValue: (item) => item.value,
+		inputValue: input,
+		onInputValueChange: (v) => {
+			setInput(v);
+			if (isAsync) debouncedSetQuery(v);
+		},
+		disabled,
+		children: [/* @__PURE__ */ jsxs(ComboboxChips, {
+			"aria-invalid": ariaInvalid || void 0,
+			ref: anchor,
+			children: [
+				reorderable ? /* @__PURE__ */ jsx(DndContext, {
+					sensors: sortSensors,
+					collisionDetection: closestCenter,
+					onDragEnd: handleDragEnd,
+					children: /* @__PURE__ */ jsx(SortableContext, {
+						items: value,
+						strategy: horizontalListSortingStrategy,
+						children: valueObjects.map((v) => /* @__PURE__ */ jsxs(SortableChip, {
+							id: v.value,
+							onRemove: () => onChange(value.filter((x) => x !== v.value)),
+							children: [
+								iconFor?.(v.value),
+								v.widgets && /* @__PURE__ */ jsx(WidgetStrip, {
+									widgets: v.widgets,
+									size: 14
+								}),
+								v.label
+							]
+						}, v.value))
+					})
+				}) : valueObjects.map((v) => /* @__PURE__ */ jsxs(ComboboxChip, { children: [
+					iconFor?.(v.value),
+					v.widgets && /* @__PURE__ */ jsx(WidgetStrip, {
+						widgets: v.widgets,
+						size: 14
+					}),
+					v.label
+				] }, v.value)),
+				/* @__PURE__ */ jsx(ComboboxChipsInput, {
+					placeholder: value.length === 0 ? placeholder : void 0,
+					readOnly: disableSearch,
+					"aria-invalid": ariaInvalid || void 0,
+					onKeyDown: (e) => {
+						if (e.key !== "Enter" || e.nativeEvent.isComposing) return;
+						if (trimmedInput.length === 0) return;
+						e.preventDefault();
+						e.stopPropagation();
+						if (atMax) return;
+						const toAdd = filteredSuggestions.find((o) => o.value.toLowerCase() === trimmedInput.toLowerCase())?.value ?? (allowCreate ? trimmedInput : null);
+						if (!toAdd) return;
+						if (selectedSet.has(toAdd) || excludeSet.has(toAdd)) return;
+						onChange([...value, toAdd]);
+						setInput("");
+						if (isAsync) debouncedSetQuery("");
+					}
+				}),
+				/* @__PURE__ */ jsx(ComboboxTrigger, { className: "pz:ml-auto pz:bg-transparent pz:hover:bg-transparent" })
+			]
+		}), /* @__PURE__ */ jsxs(ComboboxContent, {
+			anchor,
+			children: [
+				loading && items.length > 0 && /* @__PURE__ */ jsx("span", {
+					"aria-label": "Loading",
+					className: "pz:absolute pz:right-2 pz:top-2 pz:z-10 pz:inline-block pz:h-3 pz:w-3 pz:animate-spin pz:rounded-full pz:border-2 pz:border-muted-foreground/30 pz:border-t-muted-foreground"
+				}),
+				loading && items.length === 0 && /* @__PURE__ */ jsx("div", {
+					role: "status",
+					"aria-label": "Loading",
+					className: "pz:flex pz:items-center pz:justify-center pz:py-6",
+					children: /* @__PURE__ */ jsx("span", { className: "pz:inline-block pz:h-5 pz:w-5 pz:animate-spin pz:rounded-full pz:border-2 pz:border-muted-foreground/30 pz:border-t-muted-foreground" })
+				}),
+				/* @__PURE__ */ jsxs(ComboboxList, {
+					className: cn(loading && items.length > 0 && "pz:opacity-50 pz:transition-opacity pz:pointer-events-none"),
+					children: [
+						atMax && /* @__PURE__ */ jsxs("div", {
+							className: "pz:px-2 pz:py-1.5 pz:text-xs pz:text-muted-foreground",
+							children: [
+								"Maximum ",
+								maxItems,
+								" item",
+								maxItems === 1 ? "" : "s",
+								" reached."
+							]
+						}),
+						items.map((item) => {
+							const fieldType = !item.__create ? item.widgets?.field_type : void 0;
+							const leadingWidgets = !item.__create && item.widgets ? splitWidgets(item.widgets).leading : void 0;
+							return /* @__PURE__ */ jsxs(ComboboxItem, {
+								value: item,
+								className: item.__create ? "pz:italic" : void 0,
+								disabled: !selectedSet.has(item.value) && atMax && !item.__create,
+								children: [
+									!item.__create && iconFor?.(item.value),
+									leadingWidgets && /* @__PURE__ */ jsx(WidgetStrip, {
+										widgets: leadingWidgets,
+										size: 14
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "pz:flex-1 pz:truncate",
+										children: item.label
+									}),
+									fieldType && /* @__PURE__ */ jsx(FieldTypeBadge, {
+										type: fieldType.type,
+										format: fieldType.format
+									})
+								]
+							}, `${item.__create ? "__create__:" : ""}${item.value}`);
+						}),
+						!loading && items.length === 0 && /* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyLabel ?? (allowCreate ? options || loadOptions ? "No matches" : "Type to add" : "No options") })
+					]
+				})
+			]
+		})]
+	});
+}
+
+//#endregion
+export { SuggestCombobox };
+//# sourceMappingURL=suggest-combobox.mjs.map

package/dist/components/internal/combobox/suggest-combobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggest-combobox.mjs","names":[],"sources":["../../../../src/components/internal/combobox/suggest-combobox.tsx"],"sourcesContent":["import {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { horizontalListSortingStrategy, SortableContext, useSortable } from \"@dnd-kit/sortable\";\nimport type { WidgetsByKind } from \"@pipe0/base\";\nimport { XIcon } from \"lucide-react\";\nimport { type ReactNode, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport useSWR from \"swr\";\nimport { useDebouncedFn } from \"../../../hooks/use-debounced-fn.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport { FieldTypeBadge } from \"../../../widgets/field-type-badge.js\";\nimport { WidgetStrip } from \"../../../widgets/widget-strip.js\";\nimport { Button } from \"../../ui/button.js\";\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxTrigger,\n  useComboboxAnchor,\n} from \"../../ui/combobox.js\";\nimport { IconGripVertical } from \"../icons.js\";\nimport { filterOptions, type PayloadOption } from \"../multi-select-popover-trigger.js\";\n\n/** Internal item type — the base-ui Combobox handles `{value, label}` natively. */\ntype ComboboxOption = PayloadOption & { __create?: boolean };\n\n/** Split widgets so `field_type` can render on the trailing edge of dropdown\n * rows while every other widget stays in the leading strip. */\nfunction splitWidgets(widgets: WidgetsByKind): {\n  leading: WidgetsByKind | undefined;\n} {\n  const { field_type: _ignored, ...rest } = widgets;\n  const hasLeading = Object.values(rest).some((v) => v != null);\n  return { leading: hasLeading ? rest : undefined };\n}\n\n/** Reorderable chip matching `ComboboxChip` visually, with a grip handle. */\nfunction SortableChip({\n  id,\n  onRemove,\n  children,\n}: {\n  id: string;\n  onRemove: () => void;\n  children: ReactNode;\n}) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id,\n  });\n  const style: React.CSSProperties = {\n    transform: transform\n      ? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)`\n      : undefined,\n    transition,\n    opacity: isDragging ? 0.6 : 1,\n  };\n  return (\n    <span\n      ref={setNodeRef}\n      style={style}\n      className={cn(\n        \"pz:flex pz:h-[calc(--spacing(5.25))] pz:w-fit pz:items-center pz:gap-1 pz:rounded-sm pz:bg-muted pz:pl-0.5 pz:pr-0 pz:text-xs pz:font-medium pz:whitespace-nowrap pz:text-foreground\",\n      )}\n      {...attributes}\n    >\n      <span\n        role=\"button\"\n        tabIndex={-1}\n        aria-label=\"Drag to reorder\"\n        className=\"pz:flex pz:items-center pz:justify-center pz:cursor-grab pz:text-muted-foreground pz:hover:text-foreground pz:touch-none\"\n        {...listeners}\n      >\n        <IconGripVertical width={12} height={12} />\n      </span>\n      {children}\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-xs\"\n        className=\"pz:opacity-50 pz:hover:opacity-100\"\n        onClick={(e) => {\n          e.stopPropagation();\n          onRemove();\n        }}\n        aria-label=\"Remove\"\n      >\n        <XIcon className=\"pz:pointer-events-none\" />\n      </Button>\n    </span>\n  );\n}\n\nexport interface SuggestComboboxProps {\n  value: string[];\n  onChange: (value: string[]) => void;\n  options?: PayloadOption[];\n  loadOptions?: (query: string) => Promise<PayloadOption[]>;\n  allowCreate?: boolean;\n  disableSearch?: boolean;\n  maxItems?: number;\n  excludeValues?: string[];\n  ariaInvalid?: boolean;\n  disabled?: boolean;\n  debounceMs?: number;\n  labelFor?: (value: string) => string;\n  /** Optional leading icon (e.g. provider logo) rendered inside chips and list items. */\n  iconFor?: (value: string) => ReactNode;\n  emptyLabel?: string;\n  placeholder?: string;\n  /** When true, chips become drag-sortable and reorder the `value` array. */\n  reorderable?: boolean;\n}\n\n/**\n * Unified combobox built on `@base-ui/react`'s Combobox primitive.\n *\n * - Chips + inline search input via `ComboboxChips` / `ComboboxChipsInput`.\n * - Static (`options`) or async (`loadOptions`) item sources. External\n *   filtering in both cases so match-sorter ranking / server relevance is\n *   honored and base-ui's built-in filter doesn't double-filter.\n * - Free-text creation (`allowCreate`) renders an inline \"Add \\\"X\\\"\" item.\n * - `maxItems`, `excludeValues`, `disableSearch`, `ariaInvalid`, `disabled`.\n * - Debounced async loader with an in-memory cache keyed by query string.\n */\nexport function SuggestCombobox({\n  value,\n  onChange,\n  options,\n  loadOptions,\n  allowCreate = false,\n  disableSearch = false,\n  maxItems,\n  excludeValues = [],\n  ariaInvalid,\n  disabled,\n  debounceMs = 300,\n  labelFor,\n  iconFor,\n  emptyLabel,\n  placeholder,\n  reorderable = false,\n}: SuggestComboboxProps) {\n  const [input, setInput] = useState(\"\");\n  const [debouncedQuery, setDebouncedQuery] = useState(\"\");\n  const [open, setOpen] = useState(false);\n\n  const isAsync = typeof loadOptions === \"function\";\n\n  const debouncedSetQuery = useDebouncedFn((q: string) => setDebouncedQuery(q), debounceMs);\n\n  // Per-instance cache key prefix so two comboboxes with the same query but\n  // different `loadOptions` functions don't share results.\n  const instanceId = useId();\n\n  // SWR handles dedupe + caching by-query + race-safety. We defer the\n  // empty-query fetch until the user opens the dropdown — some backends\n  // (e.g. Crustdata persondb) don't accept empty queries, and on-mount\n  // fetches are wasted work if the field is never opened. `keepPreviousData`\n  // preserves the prior result set during a refetch so the UI dims rather\n  // than empties.\n  const swrKey: readonly [string, string] | null =\n    loadOptions && (open || debouncedQuery !== \"\") ? [instanceId, debouncedQuery] : null;\n  const {\n    data: asyncResults = null,\n    isLoading: swrIsLoading,\n    isValidating: swrIsValidating,\n  } = useSWR<PayloadOption[], Error, readonly [string, string] | null>(\n    swrKey,\n    async ([, q]) => {\n      // `swrKey` was `null` when `loadOptions` is undefined, so the fetcher\n      // never runs without one — the runtime check is just to satisfy TS.\n      if (!loadOptions) return [];\n      const opts = await loadOptions(q);\n      return opts.filter((o) => !!o.value);\n    },\n    { keepPreviousData: true },\n  );\n  const loading = swrIsLoading || swrIsValidating;\n\n  const excludeSet = useMemo(() => new Set(excludeValues), [excludeValues]);\n  const selectedSet = useMemo(() => new Set(value), [value]);\n\n  const anchor = useComboboxAnchor();\n\n  const filteredSuggestions = useMemo<PayloadOption[]>(() => {\n    const source = isAsync ? (asyncResults ?? []) : (options ?? []);\n    const ranked = isAsync ? source : filterOptions(source, input);\n    return ranked.filter((o) => !excludeSet.has(o.value));\n  }, [isAsync, asyncResults, options, input, excludeSet]);\n\n  const trimmedInput = input.trim();\n  const showCreateRow =\n    allowCreate &&\n    trimmedInput.length > 0 &&\n    !selectedSet.has(trimmedInput) &&\n    !excludeSet.has(trimmedInput) &&\n    !filteredSuggestions.some((o) => o.value.toLowerCase() === trimmedInput.toLowerCase());\n\n  const resolveLabel = (v: string): string => {\n    if (labelFor) return labelFor(v);\n    const fromStatic = options?.find((o) => o.value === v)?.label;\n    if (fromStatic) return fromStatic;\n    const fromAsync = asyncResults?.find((o) => o.value === v)?.label;\n    return fromAsync ?? v;\n  };\n\n  // Persist widgets per value across loadOptions cycles. Async results are\n  // replaced with each query, so without this cache an icon shown when\n  // picking a value would disappear on the next refetch. Updates run in an\n  // effect (not during render) so the cache stays consistent under strict\n  // mode and concurrent rendering.\n  const widgetCacheRef = useRef<Map<string, WidgetsByKind>>(new Map());\n  useEffect(() => {\n    for (const opt of options ?? []) {\n      if (opt.widgets) widgetCacheRef.current.set(opt.value, opt.widgets);\n    }\n    for (const opt of asyncResults ?? []) {\n      if (opt.widgets) widgetCacheRef.current.set(opt.value, opt.widgets);\n    }\n  }, [options, asyncResults]);\n\n  const resolveWidgets = (v: string): WidgetsByKind | undefined =>\n    options?.find((o) => o.value === v)?.widgets ??\n    asyncResults?.find((o) => o.value === v)?.widgets ??\n    widgetCacheRef.current.get(v);\n\n  const valueObjects = useMemo<ComboboxOption[]>(\n    () =>\n      value.map((v) => ({\n        value: v,\n        label: resolveLabel(v),\n        widgets: resolveWidgets(v),\n      })),\n    // resolveLabel/resolveWidgets close over options/asyncResults/labelFor\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [value, options, asyncResults, labelFor],\n  );\n\n  const items = useMemo<ComboboxOption[]>(() => {\n    const list: ComboboxOption[] = [];\n    if (showCreateRow) {\n      list.push({\n        value: trimmedInput,\n        label: `Add \"${trimmedInput}\"`,\n        __create: true,\n      });\n    }\n    for (const o of filteredSuggestions) list.push(o);\n    return list;\n  }, [showCreateRow, trimmedInput, filteredSuggestions]);\n\n  const atMax = maxItems !== undefined && value.length >= maxItems;\n\n  const sortSensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n    useSensor(KeyboardSensor),\n  );\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n    if (!over || active.id === over.id) return;\n    const from = value.indexOf(String(active.id));\n    const to = value.indexOf(String(over.id));\n    if (from === -1 || to === -1) return;\n    const next = [...value];\n    const [moved] = next.splice(from, 1);\n    next.splice(to, 0, moved);\n    onChange(next);\n  };\n\n  return (\n    <Combobox<ComboboxOption, true>\n      multiple\n      items={items}\n      filter={null}\n      open={open}\n      onOpenChange={setOpen}\n      value={valueObjects}\n      onValueChange={(next) => {\n        if (!Array.isArray(next)) return;\n        // Unique by value, rewrite __create items to clean objects.\n        const seen = new Set<string>();\n        const deduped: string[] = [];\n        for (const item of next) {\n          const v = typeof item === \"string\" ? item : (item as ComboboxOption).value;\n          if (!v || seen.has(v)) continue;\n          if (excludeSet.has(v)) continue;\n          if (maxItems !== undefined && deduped.length >= maxItems) break;\n          seen.add(v);\n          deduped.push(v);\n        }\n        onChange(deduped);\n        setInput(\"\");\n        if (isAsync) debouncedSetQuery(\"\");\n      }}\n      isItemEqualToValue={(a, b) => (a as ComboboxOption).value === (b as ComboboxOption).value}\n      itemToStringLabel={(item) => (item as ComboboxOption).label}\n      itemToStringValue={(item) => (item as ComboboxOption).value}\n      inputValue={input}\n      onInputValueChange={(v) => {\n        setInput(v);\n        if (isAsync) debouncedSetQuery(v);\n      }}\n      disabled={disabled}\n    >\n      <ComboboxChips aria-invalid={ariaInvalid || undefined} ref={anchor}>\n        {reorderable ? (\n          <DndContext\n            sensors={sortSensors}\n            collisionDetection={closestCenter}\n            onDragEnd={handleDragEnd}\n          >\n            <SortableContext items={value} strategy={horizontalListSortingStrategy}>\n              {valueObjects.map((v) => (\n                <SortableChip\n                  key={v.value}\n                  id={v.value}\n                  onRemove={() => onChange(value.filter((x) => x !== v.value))}\n                >\n                  {iconFor?.(v.value)}\n                  {v.widgets && <WidgetStrip widgets={v.widgets} size={14} />}\n                  {v.label}\n                </SortableChip>\n              ))}\n            </SortableContext>\n          </DndContext>\n        ) : (\n          valueObjects.map((v) => (\n            <ComboboxChip key={v.value}>\n              {iconFor?.(v.value)}\n              {v.widgets && <WidgetStrip widgets={v.widgets} size={14} />}\n              {v.label}\n            </ComboboxChip>\n          ))\n        )}\n        <ComboboxChipsInput\n          placeholder={value.length === 0 ? placeholder : undefined}\n          readOnly={disableSearch}\n          aria-invalid={ariaInvalid || undefined}\n          onKeyDown={(e) => {\n            if (e.key !== \"Enter\" || e.nativeEvent.isComposing) return;\n            if (trimmedInput.length === 0) return;\n            // Prevent the Enter from bubbling up and submitting an enclosing form.\n            e.preventDefault();\n            e.stopPropagation();\n            if (atMax) return;\n            // Prefer an exact match against the visible suggestions, otherwise\n            // fall back to creating a new value when allowed.\n            const exact = filteredSuggestions.find(\n              (o) => o.value.toLowerCase() === trimmedInput.toLowerCase(),\n            );\n            const toAdd = exact?.value ?? (allowCreate ? trimmedInput : null);\n            if (!toAdd) return;\n            if (selectedSet.has(toAdd) || excludeSet.has(toAdd)) return;\n            onChange([...value, toAdd]);\n            setInput(\"\");\n            if (isAsync) debouncedSetQuery(\"\");\n          }}\n        />\n        <ComboboxTrigger className=\"pz:ml-auto pz:bg-transparent pz:hover:bg-transparent\" />\n      </ComboboxChips>\n      <ComboboxContent anchor={anchor}>\n        {loading && items.length > 0 && (\n          // Refetch: prior items stay visible, dimmed, with a small corner\n          // spinner so the layout doesn't jump while the new page loads.\n          <span\n            aria-label=\"Loading\"\n            className=\"pz:absolute pz:right-2 pz:top-2 pz:z-10 pz:inline-block pz:h-3 pz:w-3 pz:animate-spin pz:rounded-full pz:border-2 pz:border-muted-foreground/30 pz:border-t-muted-foreground\"\n          />\n        )}\n        {loading && items.length === 0 && (\n          // Initial load: nothing to dim, so render a visible spinner in the\n          // popover body to confirm options are being fetched.\n          <div\n            role=\"status\"\n            aria-label=\"Loading\"\n            className=\"pz:flex pz:items-center pz:justify-center pz:py-6\"\n          >\n            <span className=\"pz:inline-block pz:h-5 pz:w-5 pz:animate-spin pz:rounded-full pz:border-2 pz:border-muted-foreground/30 pz:border-t-muted-foreground\" />\n          </div>\n        )}\n        <ComboboxList\n          className={cn(\n            loading &&\n              items.length > 0 &&\n              \"pz:opacity-50 pz:transition-opacity pz:pointer-events-none\",\n          )}\n        >\n          {atMax && (\n            <div className=\"pz:px-2 pz:py-1.5 pz:text-xs pz:text-muted-foreground\">\n              Maximum {maxItems} item{maxItems === 1 ? \"\" : \"s\"} reached.\n            </div>\n          )}\n\n          {items.map((item) => {\n            // Field-type widget renders on the trailing edge of the row so\n            // the field name reads first; everything else stays in the\n            // leading widget strip.\n            const fieldType = !item.__create ? item.widgets?.field_type : undefined;\n            const leadingWidgets =\n              !item.__create && item.widgets ? splitWidgets(item.widgets).leading : undefined;\n            return (\n              <ComboboxItem\n                key={`${item.__create ? \"__create__:\" : \"\"}${item.value}`}\n                value={item}\n                className={item.__create ? \"pz:italic\" : undefined}\n                disabled={!selectedSet.has(item.value) && atMax && !item.__create}\n              >\n                {!item.__create && iconFor?.(item.value)}\n                {leadingWidgets && <WidgetStrip widgets={leadingWidgets} size={14} />}\n                <span className=\"pz:flex-1 pz:truncate\">{item.label}</span>\n                {fieldType && <FieldTypeBadge type={fieldType.type} format={fieldType.format} />}\n              </ComboboxItem>\n            );\n          })}\n\n          {!loading && items.length === 0 && (\n            <ComboboxEmpty>\n              {emptyLabel ??\n                (allowCreate\n                  ? options || loadOptions\n                    ? \"No matches\"\n                    : \"Type to add\"\n                  : \"No options\")}\n            </ComboboxEmpty>\n          )}\n        </ComboboxList>\n      </ComboboxContent>\n    </Combobox>\n  );\n}\n"],"mappings":"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"}

package/dist/components/internal/field-legend.mjs

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/internal/field-legend.tsx
+function separatorAfter(index, total) {
+	if (index === total - 1) return "";
+	if (index === total - 2) return total === 2 ? " and " : ", and ";
+	return ", ";
+}
+/**
+* Single shared legend rendered below tag-aware form-field editors. Lists
+* the active trigger keys (`/`, `@`) with a short description so users
+* discover the suggestion menus without having to type a probe character.
+*
+* Architectural rule: this is the only place trigger-hint copy is
+* rendered. `LiquidEditor` owns it. Adapters never wire their own legend
+* or hint strip — drift between adapters is the only thing this component
+* exists to prevent.
+*/
+function FieldLegend({ entries }) {
+	if (entries.length === 0) return null;
+	return /* @__PURE__ */ jsxs("p", {
+		className: "pz:px-2.5 pz:pt-1 pz:pb-1.5 pz:text-xs pz:text-muted-foreground",
+		children: [entries.map((entry, i) => /* @__PURE__ */ jsxs("span", { children: [
+			/* @__PURE__ */ jsx("kbd", {
+				className: "pz:rounded pz:border pz:bg-muted pz:px-1.5 pz:py-0.5 pz:text-xs",
+				children: entry.key
+			}),
+			" ",
+			entry.label,
+			separatorAfter(i, entries.length)
+		] }, entry.key)), "."]
+	});
+}
+
+//#endregion
+export { FieldLegend };
+//# sourceMappingURL=field-legend.mjs.map

package/dist/components/internal/field-legend.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-legend.mjs","names":[],"sources":["../../../src/components/internal/field-legend.tsx"],"sourcesContent":["export type LegendEntry = { key: string; label: string };\n\nfunction separatorAfter(index: number, total: number): string {\n  if (index === total - 1) return \"\";\n  if (index === total - 2) return total === 2 ? \" and \" : \", and \";\n  return \", \";\n}\n\n/**\n * Single shared legend rendered below tag-aware form-field editors. Lists\n * the active trigger keys (`/`, `@`) with a short description so users\n * discover the suggestion menus without having to type a probe character.\n *\n * Architectural rule: this is the only place trigger-hint copy is\n * rendered. `LiquidEditor` owns it. Adapters never wire their own legend\n * or hint strip — drift between adapters is the only thing this component\n * exists to prevent.\n */\nexport function FieldLegend({ entries }: { entries: LegendEntry[] }) {\n  if (entries.length === 0) return null;\n  return (\n    <p className=\"pz:px-2.5 pz:pt-1 pz:pb-1.5 pz:text-xs pz:text-muted-foreground\">\n      {entries.map((entry, i) => (\n        <span key={entry.key}>\n          <kbd className=\"pz:rounded pz:border pz:bg-muted pz:px-1.5 pz:py-0.5 pz:text-xs\">\n            {entry.key}\n          </kbd>{\" \"}\n          {entry.label}\n          {separatorAfter(i, entries.length)}\n        </span>\n      ))}\n      .\n    </p>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,eAAe,OAAe,OAAuB;AAC5D,KAAI,UAAU,QAAQ,EAAG,QAAO;AAChC,KAAI,UAAU,QAAQ,EAAG,QAAO,UAAU,IAAI,UAAU;AACxD,QAAO;;;;;;;;;;;;AAaT,SAAgB,YAAY,EAAE,WAAuC;AACnE,KAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,QACE,qBAAC,KAAD;EAAG,WAAU;YAAb,CACG,QAAQ,KAAK,OAAO,MACnB,qBAAC,QAAD;GACE,oBAAC,OAAD;IAAK,WAAU;cACZ,MAAM;IACH;GAAC;GACN,MAAM;GACN,eAAe,GAAG,QAAQ,OAAO;GAC7B,IANI,MAAM,IAMV,CACP,EAAC,IAED"}

package/dist/components/internal/form-level-errors.mjs

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFormState } from "react-hook-form";
+
+//#region src/components/internal/form-level-errors.tsx
+function isFieldErrorNode(node) {
+	return !!node && typeof node === "object" && typeof node.message === "string" && typeof node.type === "string";
+}
+const FIELD_ERROR_KEYS = new Set([
+	"message",
+	"type",
+	"ref",
+	"types",
+	"root"
+]);
+function collectErrors(errors, prefix = "") {
+	if (!errors || typeof errors !== "object") return [];
+	const out = [];
+	for (const key of Object.keys(errors)) {
+		const node = errors[key];
+		if (!node) continue;
+		const path = prefix ? `${prefix}.${key}` : key;
+		if (isFieldErrorNode(node)) out.push({
+			path,
+			message: node.message
+		});
+		if (node && typeof node === "object") {
+			const nested = {};
+			for (const childKey of Object.keys(node)) {
+				if (FIELD_ERROR_KEYS.has(childKey)) continue;
+				nested[childKey] = node[childKey];
+			}
+			out.push(...collectErrors(nested, path));
+		}
+	}
+	return out;
+}
+/**
+* Renders any errors set on the form that are not attached to a rendered
+* field. This surfaces:
+*  - root errors (e.g. `errors.root`)
+*  - container-level errors set on non-leaf paths (e.g. a Zod custom check
+*    on `config.filters` that says "You must set at least one filter.")
+*/
+function FormLevelErrors({ control, fieldPaths }) {
+	const { errors, isSubmitted } = useFormState({ control });
+	if (!isSubmitted) return null;
+	const rootMessage = typeof errors?.root === "object" && errors.root && "message" in errors.root && typeof errors.root.message === "string" ? errors.root.message : void 0;
+	const isOwnedByField = (path) => {
+		if (fieldPaths.has(path)) return true;
+		for (const p of fieldPaths) if (path.startsWith(`${p}.`)) return true;
+		return false;
+	};
+	const others = collectErrors(errors).filter((e) => !isOwnedByField(e.path));
+	if (!rootMessage && others.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-p0": "form-errors",
+		role: "alert",
+		className: "pz:flex pz:flex-col pz:gap-1 pz:rounded-md pz:border pz:border-destructive/50 pz:bg-destructive/5 pz:px-3 pz:py-2 pz:text-destructive pz:text-xs pz:font-medium",
+		children: [rootMessage && /* @__PURE__ */ jsx("span", {
+			"data-p0-error-path": "root",
+			children: rootMessage
+		}), others.map((e) => /* @__PURE__ */ jsx("span", {
+			"data-p0-error-path": e.path,
+			children: e.message
+		}, e.path))]
+	});
+}
+
+//#endregion
+export { FormLevelErrors };
+//# sourceMappingURL=form-level-errors.mjs.map

package/dist/components/internal/form-level-errors.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-level-errors.mjs","names":[],"sources":["../../../src/components/internal/form-level-errors.tsx"],"sourcesContent":["import { type Control, type FieldErrors, useFormState } from \"react-hook-form\";\n\ntype CollectedError = { path: string; message: string };\n\nfunction isFieldErrorNode(node: unknown): node is { message: string; type: string } {\n  return (\n    !!node &&\n    typeof node === \"object\" &&\n    typeof (node as { message?: unknown }).message === \"string\" &&\n    typeof (node as { type?: unknown }).type === \"string\"\n  );\n}\n\nconst FIELD_ERROR_KEYS = new Set([\"message\", \"type\", \"ref\", \"types\", \"root\"]);\n\nfunction collectErrors(\n  errors: FieldErrors | Record<string, unknown> | undefined,\n  prefix = \"\",\n): CollectedError[] {\n  if (!errors || typeof errors !== \"object\") return [];\n  const out: CollectedError[] = [];\n  for (const key of Object.keys(errors)) {\n    const node = (errors as Record<string, unknown>)[key];\n    if (!node) continue;\n    const path = prefix ? `${prefix}.${key}` : key;\n    if (isFieldErrorNode(node)) {\n      out.push({ path, message: node.message });\n    }\n    if (node && typeof node === \"object\") {\n      const nested: Record<string, unknown> = {};\n      for (const childKey of Object.keys(node as Record<string, unknown>)) {\n        if (FIELD_ERROR_KEYS.has(childKey)) continue;\n        nested[childKey] = (node as Record<string, unknown>)[childKey];\n      }\n      out.push(...collectErrors(nested, path));\n    }\n  }\n  return out;\n}\n\n/**\n * Renders any errors set on the form that are not attached to a rendered\n * field. This surfaces:\n *  - root errors (e.g. `errors.root`)\n *  - container-level errors set on non-leaf paths (e.g. a Zod custom check\n *    on `config.filters` that says \"You must set at least one filter.\")\n */\nexport function FormLevelErrors({\n  control,\n  fieldPaths,\n}: {\n  control: Control<any>;\n  fieldPaths: Set<string>;\n}) {\n  const { errors, isSubmitted } = useFormState({ control });\n\n  // Match `useFieldError`: only surface errors after the form has been\n  // submitted at least once. Otherwise merely focusing a field triggers\n  // live validation and makes the form feel immediately \"broken\".\n  if (!isSubmitted) return null;\n\n  const rootMessage =\n    typeof errors?.root === \"object\" &&\n    errors.root &&\n    \"message\" in errors.root &&\n    typeof (errors.root as { message?: unknown }).message === \"string\"\n      ? (errors.root as { message: string }).message\n      : undefined;\n\n  // Errors on any rendered field — or on any descendant of a rendered field —\n  // belong to that field's adapter, not the global banner. Complex adapters\n  // like json_extraction / pipes_trigger register a single path at the top\n  // level and render their own inline errors for nested paths underneath.\n  const isOwnedByField = (path: string) => {\n    if (fieldPaths.has(path)) return true;\n    for (const p of fieldPaths) {\n      if (path.startsWith(`${p}.`)) return true;\n    }\n    return false;\n  };\n\n  const others = collectErrors(errors).filter((e) => !isOwnedByField(e.path));\n\n  if (!rootMessage && others.length === 0) return null;\n\n  return (\n    <div\n      data-p0=\"form-errors\"\n      role=\"alert\"\n      className=\"pz:flex pz:flex-col pz:gap-1 pz:rounded-md pz:border pz:border-destructive/50 pz:bg-destructive/5 pz:px-3 pz:py-2 pz:text-destructive pz:text-xs pz:font-medium\"\n    >\n      {rootMessage && <span data-p0-error-path=\"root\">{rootMessage}</span>}\n      {others.map((e) => (\n        <span key={e.path} data-p0-error-path={e.path}>\n          {e.message}\n        </span>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAS,iBAAiB,MAA0D;AAClF,QACE,CAAC,CAAC,QACF,OAAO,SAAS,YAChB,OAAQ,KAA+B,YAAY,YACnD,OAAQ,KAA4B,SAAS;;AAIjD,MAAM,mBAAmB,IAAI,IAAI;CAAC;CAAW;CAAQ;CAAO;CAAS;CAAO,CAAC;AAE7E,SAAS,cACP,QACA,SAAS,IACS;AAClB,KAAI,CAAC,UAAU,OAAO,WAAW,SAAU,QAAO,EAAE;CACpD,MAAM,MAAwB,EAAE;AAChC,MAAK,MAAM,OAAO,OAAO,KAAK,OAAO,EAAE;EACrC,MAAM,OAAQ,OAAmC;AACjD,MAAI,CAAC,KAAM;EACX,MAAM,OAAO,SAAS,GAAG,OAAO,GAAG,QAAQ;AAC3C,MAAI,iBAAiB,KAAK,CACxB,KAAI,KAAK;GAAE;GAAM,SAAS,KAAK;GAAS,CAAC;AAE3C,MAAI,QAAQ,OAAO,SAAS,UAAU;GACpC,MAAM,SAAkC,EAAE;AAC1C,QAAK,MAAM,YAAY,OAAO,KAAK,KAAgC,EAAE;AACnE,QAAI,iBAAiB,IAAI,SAAS,CAAE;AACpC,WAAO,YAAa,KAAiC;;AAEvD,OAAI,KAAK,GAAG,cAAc,QAAQ,KAAK,CAAC;;;AAG5C,QAAO;;;;;;;;;AAUT,SAAgB,gBAAgB,EAC9B,SACA,cAIC;CACD,MAAM,EAAE,QAAQ,gBAAgB,aAAa,EAAE,SAAS,CAAC;AAKzD,KAAI,CAAC,YAAa,QAAO;CAEzB,MAAM,cACJ,OAAO,QAAQ,SAAS,YACxB,OAAO,QACP,aAAa,OAAO,QACpB,OAAQ,OAAO,KAA+B,YAAY,WACrD,OAAO,KAA6B,UACrC;CAMN,MAAM,kBAAkB,SAAiB;AACvC,MAAI,WAAW,IAAI,KAAK,CAAE,QAAO;AACjC,OAAK,MAAM,KAAK,WACd,KAAI,KAAK,WAAW,GAAG,EAAE,GAAG,CAAE,QAAO;AAEvC,SAAO;;CAGT,MAAM,SAAS,cAAc,OAAO,CAAC,QAAQ,MAAM,CAAC,eAAe,EAAE,KAAK,CAAC;AAE3E,KAAI,CAAC,eAAe,OAAO,WAAW,EAAG,QAAO;AAEhD,QACE,qBAAC,OAAD;EACE,WAAQ;EACR,MAAK;EACL,WAAU;YAHZ,CAKG,eAAe,oBAAC,QAAD;GAAM,sBAAmB;aAAQ;GAAmB,GACnE,OAAO,KAAK,MACX,oBAAC,QAAD;GAAmB,sBAAoB,EAAE;aACtC,EAAE;GACE,EAFI,EAAE,KAEN,CACP,CACE"}

package/dist/components/internal/icons.mjs

@@ -0,0 +1,131 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/internal/icons.tsx
+const defaults = {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 16,
+	height: 16,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+function IconPlus(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...defaults,
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M5 12h14" }), /* @__PURE__ */ jsx("path", { d: "M12 5v14" })]
+	});
+}
+function IconMinus(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		...defaults,
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+	});
+}
+function IconInfo(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...defaults,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+		]
+	});
+}
+function IconPencil(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		...defaults,
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" })
+	});
+}
+function IconTrash(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...defaults,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
+			/* @__PURE__ */ jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+			/* @__PURE__ */ jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+		]
+	});
+}
+function IconChevronDown(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		...defaults,
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+	});
+}
+function IconLock(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...defaults,
+		...props,
+		children: [/* @__PURE__ */ jsx("rect", {
+			width: "18",
+			height: "11",
+			x: "3",
+			y: "11",
+			rx: "2",
+			ry: "2"
+		}), /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })]
+	});
+}
+function IconGripVertical(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...defaults,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "9",
+				cy: "12",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "9",
+				cy: "5",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "9",
+				cy: "19",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "15",
+				cy: "12",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "15",
+				cy: "5",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "15",
+				cy: "19",
+				r: "1"
+			})
+		]
+	});
+}
+function IconCheck(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		...defaults,
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+	});
+}
+
+//#endregion
+export { IconCheck, IconChevronDown, IconGripVertical, IconInfo, IconLock, IconMinus, IconPencil, IconPlus, IconTrash };
+//# sourceMappingURL=icons.mjs.map

package/dist/components/internal/icons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.mjs","names":[],"sources":["../../../src/components/internal/icons.tsx"],"sourcesContent":["import type { SVGProps } from \"react\";\n\ntype IconProps = SVGProps<SVGSVGElement>;\n\nconst defaults: IconProps = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  width: 16,\n  height: 16,\n  viewBox: \"0 0 24 24\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  strokeWidth: 2,\n  strokeLinecap: \"round\" as const,\n  strokeLinejoin: \"round\" as const,\n};\n\nexport function IconPlus(props: IconProps) {\n  return (\n    <svg {...defaults} {...props}>\n      <path d=\"M5 12h14\" />\n      <path d=\"M12 5v14\" />\n    </svg>\n  );\n}\n\nexport function IconMinus(props: IconProps) {\n  return (\n    <svg {...defaults} {...props}>\n      <path d=\"M5 12h14\" />\n    </svg>\n  );\n}\n\nexport function IconX(props: IconProps) {\n  return (\n    <svg {...defaults} {...props}>\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n\nexport function IconInfo(props: IconProps) {\n  return (\n    <svg {...defaults} {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M12 16v-4\" />\n      <path d=\"M12 8h.01\" />\n    </svg>\n  );\n}\n\nexport function IconPencil(props: IconProps) {\n  return (\n    <svg {...defaults} {...props}>\n      <path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\" />\n    </svg>\n  );\n}\n\nexport function IconTrash(props: IconProps) {\n  return (\n    <svg {...defaults} {...props}>\n      <path d=\"M3 6h18\" />\n      <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n      <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n    </svg>\n  );\n}\n\nexport function IconChevronDown(props: IconProps) {\n  return (\n    <svg {...defaults} {...props}>\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  );\n}\n\nexport function IconLock(props: IconProps) {\n  return (\n    <svg {...defaults} {...props}>\n      <rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\" />\n      <path d=\"M7 11V7a5 5 0 0 1 10 0v4\" />\n    </svg>\n  );\n}\n\nexport function IconGripVertical(props: IconProps) {\n  return (\n    <svg {...defaults} {...props}>\n      <circle cx=\"9\" cy=\"12\" r=\"1\" />\n      <circle cx=\"9\" cy=\"5\" r=\"1\" />\n      <circle cx=\"9\" cy=\"19\" r=\"1\" />\n      <circle cx=\"15\" cy=\"12\" r=\"1\" />\n      <circle cx=\"15\" cy=\"5\" r=\"1\" />\n      <circle cx=\"15\" cy=\"19\" r=\"1\" />\n    </svg>\n  );\n}\n\nexport function IconMoreHorizontal(props: IconProps) {\n  return (\n    <svg {...defaults} {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"1\" />\n      <circle cx=\"19\" cy=\"12\" r=\"1\" />\n      <circle cx=\"5\" cy=\"12\" r=\"1\" />\n    </svg>\n  );\n}\n\nexport function IconPlay(props: IconProps) {\n  return (\n    <svg {...defaults} {...props}>\n      <polygon points=\"6 3 20 12 6 21 6 3\" fill=\"currentColor\" />\n    </svg>\n  );\n}\n\nexport function IconCheck(props: IconProps) {\n  return (\n    <svg {...defaults} {...props}>\n      <path d=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n"],"mappings":";;;AAIA,MAAM,WAAsB;CAC1B,OAAO;CACP,OAAO;CACP,QAAQ;CACR,SAAS;CACT,MAAM;CACN,QAAQ;CACR,aAAa;CACb,eAAe;CACf,gBAAgB;CACjB;AAED,SAAgB,SAAS,OAAkB;AACzC,QACE,qBAAC,OAAD;EAAK,GAAI;EAAU,GAAI;YAAvB,CACE,oBAAC,QAAD,EAAM,GAAE,YAAa,GACrB,oBAAC,QAAD,EAAM,GAAE,YAAa,EACjB;;;AAIV,SAAgB,UAAU,OAAkB;AAC1C,QACE,oBAAC,OAAD;EAAK,GAAI;EAAU,GAAI;YACrB,oBAAC,QAAD,EAAM,GAAE,YAAa;EACjB;;AAaV,SAAgB,SAAS,OAAkB;AACzC,QACE,qBAAC,OAAD;EAAK,GAAI;EAAU,GAAI;YAAvB;GACE,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;IAAO;GACjC,oBAAC,QAAD,EAAM,GAAE,aAAc;GACtB,oBAAC,QAAD,EAAM,GAAE,aAAc;GAClB;;;AAIV,SAAgB,WAAW,OAAkB;AAC3C,QACE,oBAAC,OAAD;EAAK,GAAI;EAAU,GAAI;YACrB,oBAAC,QAAD,EAAM,GAAE,oIAAqI;EACzI;;AAIV,SAAgB,UAAU,OAAkB;AAC1C,QACE,qBAAC,OAAD;EAAK,GAAI;EAAU,GAAI;YAAvB;GACE,oBAAC,QAAD,EAAM,GAAE,WAAY;GACpB,oBAAC,QAAD,EAAM,GAAE,yCAA0C;GAClD,oBAAC,QAAD,EAAM,GAAE,sCAAuC;GAC3C;;;AAIV,SAAgB,gBAAgB,OAAkB;AAChD,QACE,oBAAC,OAAD;EAAK,GAAI;EAAU,GAAI;YACrB,oBAAC,QAAD,EAAM,GAAE,gBAAiB;EACrB;;AAIV,SAAgB,SAAS,OAAkB;AACzC,QACE,qBAAC,OAAD;EAAK,GAAI;EAAU,GAAI;YAAvB,CACE,oBAAC,QAAD;GAAM,OAAM;GAAK,QAAO;GAAK,GAAE;GAAI,GAAE;GAAK,IAAG;GAAI,IAAG;GAAM,GAC1D,oBAAC,QAAD,EAAM,GAAE,4BAA6B,EACjC;;;AAIV,SAAgB,iBAAiB,OAAkB;AACjD,QACE,qBAAC,OAAD;EAAK,GAAI;EAAU,GAAI;YAAvB;GACE,oBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAK,GAAE;IAAM;GAC/B,oBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAM;GAC9B,oBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAK,GAAE;IAAM;GAC/B,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;IAAM;GAChC,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAI,GAAE;IAAM;GAC/B,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;IAAM;GAC5B;;;AAsBV,SAAgB,UAAU,OAAkB;AAC1C,QACE,oBAAC,OAAD;EAAK,GAAI;EAAU,GAAI;YACrB,oBAAC,QAAD,EAAM,GAAE,mBAAoB;EACxB"}

package/dist/components/internal/multi-select-popover-trigger.mjs

@@ -0,0 +1,26 @@
+import "../../lib/utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { rankItem } from "@tanstack/match-sorter-utils";
+
+//#region src/components/internal/multi-select-popover-trigger.tsx
+/**
+* Rank-filter an option list using match-sorter-utils.
+* Returns options sorted by descending rank, empty `input` returns all options
+* (match-sorter assigns all passing).
+*/
+function filterOptions(options, input) {
+	if (!input) return options;
+	return options.map((option) => {
+		const labelRank = rankItem(option.label, input);
+		const valueRank = rankItem(option.value, input);
+		const ranking = labelRank.rank > valueRank.rank ? labelRank : valueRank;
+		return ranking.passed ? {
+			...option,
+			ranking
+		} : null;
+	}).filter((o) => o !== null).sort((a, b) => b.ranking.rank - a.ranking.rank);
+}
+
+//#endregion
+export { filterOptions };
+//# sourceMappingURL=multi-select-popover-trigger.mjs.map