@burojs/ui-shadcn 0.6.0 → 0.7.0

package/dist/{filter-builder-Bhn-dhZV.js → filter-builder-DaWHUZuV.js}

@@ -1,13 +1,14 @@
 import { l as cn } from "./use-theme-dnE3Od3I.js";
-import { d as PopoverTrigger, s as Popover, u as PopoverContent } from "./toaster-C02XbB9r.js";
+import { m as PopoverTrigger, p as PopoverContent, u as Popover } from "./toaster-Ct_YHGs6.js";
 import { t as Button } from "./button-MWVeZaqj.js";
 import { t as Input } from "./input-CUPStzZO.js";
-import { _ as CommandEmpty, b as CommandItem, d as useRowTitle, h as Command, n as narrowSearchDecl, v as CommandGroup, x as CommandList, y as CommandInput } from "./search-access-CPPmfuvy.js";
-import { EMPTY_FILTER_GROUP, convertValueForOp, enumValueText, isCompletePredicate, isFilterGroup, opArity, resolveEnumLabel } from "@burojs/core";
-import { DEFAULT_LANGUAGE_STORAGE_KEY, useApp, useEnumValues, useI18nCaps, useList, useListAccess, useOptionalT, useRelatedRecord } from "@burojs/react";
-import { IconCheck, IconChevronDown, IconChevronUp, IconFilter, IconFolderPlus, IconLoader2, IconPlus, IconX } from "@tabler/icons-react";
+import { C as CommandEmpty, D as CommandList, E as CommandItem, T as CommandInput, m as useRowTitle, o as narrowSearchDecl, w as CommandGroup, x as Command } from "./relation-create-C43cdPQt.js";
+import { t as Skeleton } from "./skeleton-U2noefj5.js";
+import { EMPTY_FILTER_GROUP, canonicalResourceKey, convertValueForOp, declaredText, enumValueText, formatEntityRef, isCompletePredicate, isFilterGroup, opArity, resolveEnumLabel, resolveSurfaceUi } from "@burojs/core";
+import { DEFAULT_LANGUAGE_STORAGE_KEY, scopeValueOf, useApp, useChromeT, useEnumValues, useFieldDisplayText, useFieldImplementation, useFieldMeta, useFieldMetaSources, useI18nCaps, useImplementationTexts, useList, useListAccess, useLocale, useOptionalLocale, useOptionalT, useRelatedRecord, useResolvedFieldOptions } from "@burojs/react";
+import { IconCheck, IconChevronDown, IconChevronUp, IconCirclePlus, IconFilter, IconFolderPlus, IconLoader2, IconPlus, IconX } from "@tabler/icons-react";
 import * as React from "react";
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as SelectPrimitive from "@radix-ui/react-select";
@@ -27,6 +28,505 @@ function saveLocale(code, storageKey = DEFAULT_LANGUAGE_STORAGE_KEY) {
 	} catch {}
 }
 //#endregion
+//#region src/fields/legacy-field.ts
+const STRING_ITEM = Object.freeze({ type: "string" });
+const LEGACY_KIND_DECLARATIONS = Object.freeze({
+	string: { type: "string" },
+	text: {
+		type: "string",
+		format: "text"
+	},
+	textarea: {
+		type: "string",
+		format: "textarea"
+	},
+	code: {
+		type: "string",
+		format: "code"
+	},
+	email: {
+		type: "string",
+		format: "email"
+	},
+	url: {
+		type: "string",
+		format: "url"
+	},
+	uuid: {
+		type: "string",
+		format: "uuid"
+	},
+	number: { type: "number" },
+	boolean: { type: "boolean" },
+	date: {
+		type: "string",
+		format: "date"
+	},
+	dateTime: {
+		type: "string",
+		format: "date-time"
+	},
+	enum: {
+		type: "string",
+		format: "enum"
+	},
+	json: {
+		type: "object",
+		format: "json"
+	},
+	richText: {
+		type: "string",
+		format: "rich-text"
+	},
+	file: {
+		type: "array",
+		format: "file",
+		items: STRING_ITEM
+	},
+	relation: { type: "relation" },
+	relationMany: {
+		type: "array",
+		format: "relation",
+		items: STRING_ITEM
+	}
+});
+const SEMANTIC_KEYS = Object.freeze([
+	"type",
+	"format",
+	"meta",
+	"required",
+	"nullable",
+	"empty",
+	"default",
+	"constraints",
+	"texts",
+	"options",
+	"items",
+	"properties",
+	"additionalProperties",
+	"variants"
+]);
+function ownData(value, key) {
+	if (value === null || typeof value !== "object" && typeof value !== "function") return { present: false };
+	const descriptor = Object.getOwnPropertyDescriptor(value, key);
+	if (descriptor === void 0 || !Object.prototype.propertyIsEnumerable.call(value, key) || !("value" in descriptor)) return { present: false };
+	return {
+		present: true,
+		value: descriptor.value
+	};
+}
+function ownString(value, key) {
+	const candidate = ownData(value, key).value;
+	return typeof candidate === "string" && candidate.length > 0 ? candidate : void 0;
+}
+function ownSelection(value, key) {
+	const candidate = ownData(value, key).value;
+	if (typeof candidate === "string") return candidate.length > 0 ? candidate : void 0;
+	return candidate !== null && typeof candidate === "object" && !Array.isArray(candidate) ? candidate : void 0;
+}
+function projectUiSelection(input) {
+	const selection = {};
+	const inputId = ownSelection(input, "input");
+	const displayId = ownSelection(input, "display");
+	if (inputId !== void 0) selection.input = inputId;
+	if (displayId !== void 0) selection.display = displayId;
+	return inputId === void 0 && displayId === void 0 ? void 0 : Object.freeze(selection);
+}
+function projectFieldDeclaration(input) {
+	const type = ownString(input, "type");
+	if (type === void 0) return void 0;
+	const projected = { type };
+	for (const key of SEMANTIC_KEYS) {
+		if (key === "type" || key === "items" || key === "properties" || key === "variants") continue;
+		const candidate = ownData(input, key);
+		if (candidate.present && candidate.value !== void 0) projected[key] = candidate.value;
+	}
+	const ui = projectUiSelection(ownData(input, "ui").value);
+	if (ui !== void 0) projected.ui = ui;
+	if (type === "array") {
+		const item = projectFieldDeclaration(ownData(input, "items").value);
+		if (item !== void 0) projected.items = item;
+	}
+	if (type === "object") {
+		const properties = ownData(input, "properties").value;
+		if (properties !== null && typeof properties === "object" && !Array.isArray(properties)) {
+			const output = {};
+			for (const key of Object.keys(properties)) {
+				const child = projectFieldDeclaration(ownData(properties, key).value);
+				if (child !== void 0) output[key] = child;
+			}
+			projected.properties = Object.freeze(output);
+		}
+	}
+	if (type === "union") {
+		const variants = ownData(input, "variants").value;
+		if (Array.isArray(variants)) {
+			const output = [];
+			for (let index = 0; index < variants.length; index += 1) {
+				const child = projectFieldDeclaration(ownData(variants, index).value);
+				if (child !== void 0) output.push(child);
+			}
+			projected.variants = Object.freeze(output);
+		}
+	}
+	return Object.freeze(projected);
+}
+function projectUiHints(input) {
+	if (input === null || typeof input !== "object" || Array.isArray(input)) return void 0;
+	const projected = {};
+	for (const key of Object.keys(input)) {
+		const candidate = ownData(input, key);
+		if (candidate.present) projected[key] = candidate.value;
+	}
+	return Object.freeze(projected);
+}
+function enumValueOptions(field) {
+	const own = ownData(field, "values").value;
+	const values = Array.isArray(own) ? own : ownData(ownData(field, "ui").value, "values").value;
+	if (!Array.isArray(values)) return void 0;
+	const options = values.filter((value) => typeof value === "string").map((value) => Object.freeze({ value }));
+	return options.length === 0 ? void 0 : Object.freeze(options);
+}
+function lowerLegacyField(field) {
+	const declaration = projectFieldDeclaration(ownData(field, "declaration").value);
+	if (declaration !== void 0) return declaration;
+	const direct = projectFieldDeclaration(field);
+	const kind = ownString(field, "kind");
+	const mapping = kind === void 0 ? void 0 : LEGACY_KIND_DECLARATIONS[kind];
+	if (direct !== void 0) {
+		const format = direct.format ?? mapping?.format ?? kind;
+		return format === void 0 ? direct : Object.freeze({
+			...direct,
+			format
+		});
+	}
+	const ui = projectUiHints(ownData(field, "ui").value);
+	const type = kind === "file" && ui?.multiple !== true ? "unknown" : mapping?.type ?? "unknown";
+	const format = ownString(field, "format") ?? mapping?.format ?? kind;
+	const items = type === "array" ? projectFieldDeclaration(ownData(field, "items").value) ?? mapping?.items ?? STRING_ITEM : void 0;
+	const meta = ownData(field, "meta");
+	const texts = ownData(field, "texts");
+	const options = kind === "enum" ? enumValueOptions(field) : void 0;
+	const required = ownData(field, "required");
+	const nullable = ownData(field, "nullable");
+	const opts = ownData(field, "opts").value;
+	const optionRequired = ownData(opts, "required");
+	const optionNullable = ownData(opts, "nullable");
+	const requiredValue = required.present ? required.value : optionRequired.value;
+	const nullableValue = nullable.present ? nullable.value : optionNullable.value;
+	return Object.freeze({
+		type,
+		...format === void 0 ? {} : { format },
+		...items === void 0 ? {} : { items },
+		...meta.present && meta.value !== void 0 ? { meta: meta.value } : {},
+		...options === void 0 ? {} : { options },
+		...texts.present && texts.value !== void 0 ? { texts: texts.value } : {},
+		...requiredValue === true ? { required: true } : {},
+		...nullableValue === true ? { nullable: true } : {}
+	});
+}
+function lowerLegacyFieldSource(field) {
+	const declaration = lowerLegacyField(field);
+	const ui = projectUiHints(ownData(field, "ui").value);
+	if (ui === void 0) return declaration;
+	return Object.freeze({
+		...declaration,
+		ui
+	});
+}
+function fieldDescription(field) {
+	const declaration = field?.declaration;
+	return declaredText("field", declaration, "description") ?? declaredText("field", field, "description");
+}
+//#endregion
+//#region src/fields/resolved-field.tsx
+const EMPTY = Object.freeze({});
+const EMPTY_ISSUES = Object.freeze([]);
+const EMPTY_OPTIONS = Object.freeze([]);
+function canonical(field) {
+	return lowerLegacyField(field);
+}
+function useLoweredField(source) {
+	return useMemo(() => {
+		const sourceAtEdge = lowerLegacyFieldSource(source);
+		return {
+			sourceAtEdge,
+			field: canonical(sourceAtEdge),
+			ui: sourceAtEdge.ui ?? EMPTY
+		};
+	}, [source]);
+}
+const warnedObjectLabels = new Set();
+function optionsFor(field, name) {
+	if (Array.isArray(field.options)) return field.options;
+	const candidate = field.meta?.options;
+	if (!Array.isArray(candidate)) return EMPTY_OPTIONS;
+	const output = [];
+	for (const item of candidate) {
+		if (item === null || typeof item !== "object" || Array.isArray(item)) continue;
+		const raw = item;
+		if (typeof raw.value !== "string" && typeof raw.value !== "number" && typeof raw.value !== "boolean" && raw.value !== null) continue;
+		const { value, label, description, ...legacyMeta } = raw;
+		if (typeof label !== "string" && process.env.NODE_ENV !== "production" && !warnedObjectLabels.has(`${name}:${value}`)) {
+			warnedObjectLabels.add(`${name}:${value}`);
+			console.warn(`[buro/ui-shadcn] field '${name}': option '${value}' has a non-string label, so it renders its raw value. Declare a plain string label and put the translations under fields.${name}.options.${value} (see docs/i18n-guide.md).`);
+		}
+		output.push(Object.freeze({
+			value,
+			label: typeof label === "string" ? label : String(value),
+			...typeof description === "string" ? { description } : {},
+			...Object.keys(legacyMeta).length === 0 ? {} : { meta: Object.freeze(legacyMeta) }
+		}));
+	}
+	return Object.freeze(output);
+}
+function useContextOptions(field, name, meta, ui, resource) {
+	const legacy = field.meta?.options;
+	const options = useMemo(() => optionsFor(field, name), [
+		field.options,
+		legacy,
+		name
+	]);
+	return useResolvedFieldOptions({
+		name,
+		meta,
+		ui,
+		texts: field.texts
+	}, options, resource.id);
+}
+function useContextTexts(field, name, resolved, resource) {
+	return useImplementationTexts({
+		fieldName: name,
+		fieldTexts: field.texts,
+		id: resolved.id,
+		implementation: resolved.implementation
+	}, resource.id);
+}
+function useFieldRuntimeContext(resource, record, values, metaSources) {
+	const locale = useLocale();
+	const caps = useI18nCaps(canonicalResourceKey(resource));
+	const metaSourcesOut = useFieldMetaSources({
+		record,
+		values,
+		extra: metaSources
+	});
+	const scopeState = metaSourcesOut.scope;
+	const scope = scopeState === void 0 ? void 0 : scopeValueOf(scopeState);
+	return useMemo(() => Object.freeze({
+		i18n: Object.freeze({
+			locale,
+			has: caps.has,
+			t: caps.t
+		}),
+		sources: Object.freeze({
+			record: record ?? EMPTY,
+			values: values ?? EMPTY,
+			scope: scope ?? EMPTY
+		}),
+		metaSources: metaSourcesOut
+	}), [
+		caps,
+		locale,
+		record,
+		scope,
+		values,
+		metaSourcesOut
+	]);
+}
+function useFieldMetaDiagnostic(state, resource, name, field, surface, entry) {
+	const reported = useRef(void 0);
+	const reason = state.status === "failed" ? state.reason : void 0;
+	useEffect(() => {
+		if (reason === void 0 || reported.current === reason || process.env.NODE_ENV === "production") return;
+		reported.current = reason;
+		const implementation = resolveSurfaceUi(field, surface, entry).use ?? field.format ?? field.type;
+		console.error(`[burojs] field.meta-invalid: ${formatEntityRef(resource)}.${name} (${implementation}): ${reason}`);
+	}, [
+		reason,
+		resource,
+		name,
+		field,
+		surface,
+		entry
+	]);
+}
+function MetaPlaceholder({ state }) {
+	const t = useOptionalT();
+	if (state.status === "pending") return jsx(Skeleton, {
+		"data-buro-skeleton": "",
+		"data-buro-field-meta": "pending",
+		className: "h-9 w-full"
+	});
+	return jsx("div", {
+		role: "alert",
+		"data-buro-field-meta": "failed",
+		className: "rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground",
+		children: t("field.misconfigured", { defaultValue: "This field is misconfigured" })
+	});
+}
+function useFieldImplementationDiagnostic(diagnostic) {
+	const reported = useRef(void 0);
+	useEffect(() => {
+		if (diagnostic === void 0 || reported.current === diagnostic || process.env.NODE_ENV === "production") return;
+		reported.current = diagnostic;
+		console.warn("[buro/ui-shadcn] missing-field-implementation; rendering fallback.", diagnostic);
+	}, [diagnostic]);
+}
+function ResolvedFieldDisplay({ resource, name, field: source, value, record, testId, fallback, presentation, metaSources, uiSurface = "display", columnEntry }) {
+	const { sourceAtEdge, field, ui } = useLoweredField(source);
+	const surfaceField = useMemo(() => sourceAtEdge.ui === void 0 ? field : Object.freeze({
+		...field,
+		ui
+	}), [
+		sourceAtEdge,
+		field,
+		ui
+	]);
+	const resolved = useFieldImplementation({
+		field: surfaceField,
+		surface: "display",
+		uiSurface,
+		...columnEntry === void 0 ? {} : { uiEntry: columnEntry }
+	});
+	const runtimeContext = useFieldRuntimeContext(resource, record, record, metaSources);
+	const metaState = useFieldMeta(field, resolved.implementation, runtimeContext.metaSources, resolved.params);
+	const textField = useMemo(() => Object.freeze({
+		...surfaceField,
+		name
+	}), [surfaceField, name]);
+	const text = useFieldDisplayText(textField, value, {
+		surface: uiSurface,
+		...columnEntry === void 0 ? {} : { entry: columnEntry },
+		resource: canonicalResourceKey(resource)
+	});
+	const options = useContextOptions(field, name, metaState.status === "ready" ? metaState.meta : void 0, ui, resource);
+	const texts = useContextTexts(field, name, resolved, resource);
+	useFieldMetaDiagnostic(metaState, resource, name, surfaceField, uiSurface, columnEntry);
+	useFieldImplementationDiagnostic(resolved.diagnostic);
+	if (resolved.Component === void 0) return jsx(Fragment$1, { children: fallback });
+	if (metaState.status !== "ready") return jsx(MetaPlaceholder, { state: metaState });
+	const Component = resolved.Component;
+	const context = {
+		owner: resource,
+		resource,
+		field,
+		path: Object.freeze([name]),
+		surface: "display",
+		presentation: presentation ?? "default",
+		record,
+		meta: metaState.meta,
+		ui,
+		options,
+		texts,
+		...text === void 0 ? {} : { text },
+		i18n: runtimeContext.i18n,
+		sources: runtimeContext.sources,
+		pending: false,
+		touched: false,
+		issues: EMPTY_ISSUES,
+		accessibility: EMPTY,
+		testIds: testId === void 0 ? EMPTY : Object.freeze({ display: testId })
+	};
+	if (resolved.multiple) return createElement(Component, {
+		...context,
+		multiple: true,
+		value: Array.isArray(value) ? value : []
+	});
+	return createElement(Component, {
+		...context,
+		multiple: false,
+		value
+	});
+}
+function ResolvedFieldInput({ resource, name, field: source, value, record, form, testId, inputId, onChange, onBlur, disabled, required, placeholder, descriptionId, labelId, errorId, errorMessage, pending = false, touched = errorMessage != null, issues: suppliedIssues, relationSeeds, fixedFilters, link, metaSources, fallback }) {
+	const { sourceAtEdge, field: base } = useLoweredField(source);
+	const field = useMemo(() => required === void 0 || required === base.required ? base : Object.freeze({
+		...base,
+		required
+	}), [base, required]);
+	const ui = useMemo(() => Object.freeze({
+		...sourceAtEdge.ui ?? EMPTY,
+		...placeholder === void 0 ? {} : { placeholder }
+	}), [sourceAtEdge, placeholder]);
+	const inputField = useMemo(() => ({
+		...field,
+		ui
+	}), [field, ui]);
+	const resolved = useFieldImplementation({
+		field: inputField,
+		surface: "input"
+	});
+	const runtimeContext = useFieldRuntimeContext(resource, record, form, metaSources);
+	const metaState = useFieldMeta(field, resolved.implementation, runtimeContext.metaSources, resolved.params);
+	const options = useContextOptions(field, name, metaState.status === "ready" ? metaState.meta : void 0, ui, resource);
+	const texts = useContextTexts(field, name, resolved, resource);
+	useFieldMetaDiagnostic(metaState, resource, name, inputField, "input");
+	useFieldImplementationDiagnostic(resolved.diagnostic);
+	if (resolved.Component === void 0) return jsx(Fragment$1, { children: fallback });
+	if (metaState.status !== "ready") return jsx(MetaPlaceholder, { state: metaState });
+	const Component = resolved.Component;
+	const issues = suppliedIssues ?? (errorMessage == null ? EMPTY_ISSUES : Object.freeze([Object.freeze({
+		code: "ui.field-error",
+		message: {
+			key: "ui.field-error",
+			default: errorMessage
+		},
+		path: Object.freeze([]),
+		source: "field",
+		severity: "error"
+	})]));
+	const context = {
+		owner: resource,
+		resource,
+		field,
+		path: Object.freeze([name]),
+		surface: "input",
+		presentation: "default",
+		record,
+		form,
+		meta: metaState.meta,
+		ui,
+		options,
+		texts,
+		i18n: runtimeContext.i18n,
+		sources: runtimeContext.sources,
+		pending,
+		touched,
+		issues,
+		accessibility: Object.freeze({
+			input: inputId ?? name,
+			label: labelId,
+			description: descriptionId,
+			error: errorId
+		}),
+		testIds: testId === void 0 ? EMPTY : Object.freeze({ input: testId })
+	};
+	if (resolved.multiple) return createElement(Component, {
+		...context,
+		multiple: true,
+		value: Array.isArray(value) ? value : [],
+		onChange,
+		onBlur,
+		disabled,
+		relationSeeds,
+		fixedFilters,
+		link,
+		metaSources: runtimeContext.metaSources
+	});
+	return createElement(Component, {
+		...context,
+		multiple: false,
+		value,
+		onChange,
+		onBlur,
+		disabled,
+		relationSeeds,
+		fixedFilters,
+		link,
+		metaSources: runtimeContext.metaSources
+	});
+}
+//#endregion
 //#region src/primitives/badge.tsx
 const badgeVariants = cva("inline-flex max-w-full items-center truncate rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2", {
 	variants: { variant: {
@@ -104,11 +604,11 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => jsxs(SelectPrimitive.Trigger, {
 	ref,
-	className: cn("flex h-9 w-full items-center justify-between rounded-md border border-input bg-background text-foreground px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-input-disabled [&>span]:line-clamp-1", className),
+	className: cn("flex h-9 w-full items-center justify-between rounded-md border border-input bg-background text-foreground px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-input-disabled [&>span]:block [&>span]:truncate [&>span]:min-w-0 [&>span]:max-h-[1lh] [&>span]:overflow-hidden [&>span]:text-left", className),
 	...props,
 	children: [children, jsx(SelectPrimitive.Icon, {
 		asChild: true,
-		children: jsx(IconChevronDown, { className: "h-4 w-4 opacity-50" })
+		children: jsx(IconChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" })
 	})]
 }));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
@@ -147,15 +647,24 @@ const SelectLabel = React.forwardRef(({ className, ...props }, ref) => jsx(Selec
 	...props
 }));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => jsxs(SelectPrimitive.Item, {
-	ref,
-	className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
-	...props,
-	children: [jsx("span", {
-		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
-		children: jsx(SelectPrimitive.ItemIndicator, { children: jsx(IconCheck, { className: "h-4 w-4" }) })
-	}), jsx(SelectPrimitive.ItemText, { children })]
-}));
+const SelectItem = React.forwardRef(({ className, children, description, ...props }, ref) => {
+	const hasDescription = description !== void 0 && description !== null;
+	return jsxs(SelectPrimitive.Item, {
+		ref,
+		className: cn("relative flex w-full cursor-default select-none rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", hasDescription ? "items-start" : "items-center", className),
+		...props,
+		children: [jsx("span", {
+			className: cn("absolute left-2 flex h-3.5 w-3.5 items-center justify-center", hasDescription && "top-[9px]"),
+			children: jsx(SelectPrimitive.ItemIndicator, { children: jsx(IconCheck, { className: "h-4 w-4" }) })
+		}), !hasDescription ? jsx(SelectPrimitive.ItemText, { children }) : jsxs("span", {
+			className: "flex min-w-0 flex-col gap-0.5",
+			children: [jsx(SelectPrimitive.ItemText, { children }), jsx("span", {
+				className: "text-xs leading-snug text-muted-foreground",
+				children: description
+			})]
+		})]
+	});
+});
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => jsx(SelectPrimitive.Separator, {
 	ref,
@@ -208,9 +717,9 @@ function formatNumber(n, locale) {
 //#endregion
 //#region src/list-kit/filter-builder/describe-row.ts
 const MAX_DESCRIBE_DEPTH = 2;
-function describeValue(value, t, spec, formatValue) {
+function describeValue(value, chromeT, spec, formatValue) {
 	if (value === void 0) return null;
-	if (Array.isArray(value)) return t("filters.selectedCount", { count: value.length }, `${value.length} selected`);
+	if (Array.isArray(value)) return chromeT("filters.selectedCount", { count: value.length }, `${value.length} selected`);
 	const optionLabel = spec?.options?.find((o) => o.value === String(value))?.label;
 	if (optionLabel !== void 0) return optionLabel;
 	if (spec && formatValue) {
@@ -219,20 +728,20 @@ function describeValue(value, t, spec, formatValue) {
 	}
 	return String(value);
 }
-function describeAt(row, available, t, depth, formatValue) {
+function describeAt(row, available, chromeT, depth, formatValue) {
 	if (isFilterGroup(row)) {
 		if (depth > MAX_DESCRIBE_DEPTH) return "…";
-		const joinLabel = t(`filters.${row.join}`, void 0, row.join);
-		return `(${row.rows.map((child) => describeAt(child, available, t, depth + 1, formatValue)).join(` ${joinLabel} `)})`;
+		const joinLabel = chromeT(`filters.${row.join}`, void 0, row.join);
+		return `(${row.rows.map((child) => describeAt(child, available, chromeT, depth + 1, formatValue)).join(` ${joinLabel} `)})`;
 	}
 	const spec = available.find((s) => s.field === row.field);
 	const label = spec?.label ?? row.field;
-	const opLabel = t(`filters.operators.${row.op}`, void 0, row.op);
-	const valueText = opArity(row.op) === "none" ? null : describeValue(row.value, t, spec, formatValue);
+	const opLabel = chromeT(`filters.operators.${row.op}`, void 0, row.op);
+	const valueText = opArity(row.op) === "none" ? null : describeValue(row.value, chromeT, spec, formatValue);
 	return valueText === null ? `${label} ${opLabel}` : `${label} ${opLabel} ${valueText}`;
 }
-function describeRow(row, available, t, formatValue) {
-	return describeAt(row, available, t, 1, formatValue);
+function describeRow(row, available, chromeT, formatValue) {
+	return describeAt(row, available, chromeT, 1, formatValue);
 }
 function relationLabelKey(to, by, value) {
 	return `${by === void 0 ? to : `${to}#${by}`}::${value}`;
@@ -365,15 +874,18 @@ function badgeKey(row, index) {
 	if (isFilterGroup(row)) return `${index}:group:${row.join}`;
 	return `${index}:${row.field}:${row.op}`;
 }
+const BADGE_ROW = "inline-flex max-w-full items-center gap-1 align-middle";
+const REMOVE_BUTTON = "inline-flex size-4 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-foreground/10 hover:text-foreground focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring";
 function FilterBadges(props) {
 	const { group, setGroup, available, fixed, testIdBase, onOpenAt, onRemoved, pinnedFields = [], pinnedValue = [], setPinnedValue } = props;
-	const t = useOptionalT();
-	const tt = (key, params, fallback) => t(key, {
+	const chromeT = useChromeT();
+	const locale = useOptionalLocale();
+	const tt = (key, params, fallback) => chromeT(key, {
 		params,
 		...typeof params?.count === "number" ? { count: params.count } : {},
 		defaultValue: fallback
 	});
-	const removeLabel = t("filters.removeRow", { defaultValue: "Remove filter" });
+	const removeLabel = chromeT("filters.removeRow", { defaultValue: "Remove filter" });
 	const { enumLabels, relationLabels, onEnumResolved, onRelationResolved } = useFormatValueMaps();
 	const formatValue = (kind, value) => {
 		if (kind.kind === "enum") return enumLabels[kind.enumName]?.[String(value)];
@@ -381,7 +893,7 @@ function FilterBadges(props) {
 		if (kind.kind === "date") {
 			const d = new Date(String(value));
 			if (Number.isNaN(d.getTime())) return void 0;
-			return kind.time ? formatDateTime(d) : formatDate(d);
+			return kind.time ? formatDateTime(d, locale) : formatDate(d, locale);
 		}
 	};
 	const orphanPinned = useMemo(() => {
@@ -415,49 +927,56 @@ function FilterBadges(props) {
 				onEnumResolved,
 				onRelationResolved
 			}),
-			group.rows.map((row, index) => jsxs(Badge, {
+			group.rows.map((row, index) => jsx(Badge, {
 				variant: "secondary",
-				className: "gap-1 py-1 pr-1",
-				children: [jsx("button", {
-					type: "button",
-					"data-testid": `${testIdBase}:badge:${index}`,
-					onClick: () => onOpenAt([index]),
-					className: "max-w-full cursor-pointer truncate bg-transparent p-0 text-left",
-					children: describeRow(row, available, tt, formatValue)
-				}), jsx("button", {
-					type: "button",
-					"data-testid": `${testIdBase}:badge:${index}:remove`,
-					"aria-label": removeLabel,
-					onClick: () => handleRemove(index),
-					className: "rounded-sm hover:bg-accent",
-					children: jsx(IconX, {
-						className: "h-3 w-3",
-						"aria-hidden": "true"
-					})
-				})]
+				className: "py-1 pr-1",
+				children: jsxs("span", {
+					className: BADGE_ROW,
+					children: [jsx("button", {
+						type: "button",
+						"data-testid": `${testIdBase}:badge:${index}`,
+						onClick: () => onOpenAt([index]),
+						className: "min-w-0 cursor-pointer truncate bg-transparent p-0 text-left",
+						children: describeRow(row, available, tt, formatValue)
+					}), jsx("button", {
+						type: "button",
+						"data-testid": `${testIdBase}:badge:${index}:remove`,
+						"aria-label": removeLabel,
+						onClick: () => handleRemove(index),
+						className: REMOVE_BUTTON,
+						children: jsx(IconX, {
+							className: "size-3",
+							"aria-hidden": "true"
+						})
+					})]
+				})
 			}, badgeKey(row, index))),
 			labelledFixed.map((entry, index) => jsx(Badge, {
 				variant: "outline",
 				"data-testid": `${testIdBase}:badge:fixed:${index}`,
 				children: entry.label
 			}, `fixed-${index}`)),
-			orphanPinned.map(({ expr, index }) => jsxs(Badge, {
+			orphanPinned.map(({ expr, index }) => jsx(Badge, {
 				variant: "secondary",
-				className: "gap-1 py-1",
-				children: [jsx("span", {
-					"data-testid": `${testIdBase}:badge:pinned:${index}`,
-					children: describeRow(expr, available, tt, formatValue)
-				}), jsx("button", {
-					type: "button",
-					"data-testid": `${testIdBase}:badge:pinned:${index}:remove`,
-					"aria-label": removeLabel,
-					onClick: () => handleRemovePinned(index),
-					className: "rounded-sm hover:bg-accent",
-					children: jsx(IconX, {
-						className: "h-3 w-3",
-						"aria-hidden": "true"
-					})
-				})]
+				className: "py-1 pr-1",
+				children: jsxs("span", {
+					className: BADGE_ROW,
+					children: [jsx("span", {
+						"data-testid": `${testIdBase}:badge:pinned:${index}`,
+						className: "min-w-0 truncate",
+						children: describeRow(expr, available, tt, formatValue)
+					}), jsx("button", {
+						type: "button",
+						"data-testid": `${testIdBase}:badge:pinned:${index}:remove`,
+						"aria-label": removeLabel,
+						onClick: () => handleRemovePinned(index),
+						className: REMOVE_BUTTON,
+						children: jsx(IconX, {
+							className: "size-3",
+							"aria-hidden": "true"
+						})
+					})]
+				})
 			}, `pinned-${index}`))
 		]
 	});
@@ -647,14 +1166,15 @@ const OPTIONS = ["true", "false"];
 function BooleanValueControl(props) {
 	const { value, onChange, testId, arity, autoFocus, fieldLabel, fill } = props;
 	const t = useOptionalT();
-	const ariaLabel = fieldLabel ? t("filters.valueFor", {
+	const chromeT = useChromeT();
+	const ariaLabel = fieldLabel ? chromeT("filters.valueFor", {
 		defaultValue: `Value for ${fieldLabel}`,
 		params: { field: fieldLabel }
-	}) : t("filters.value", { defaultValue: "Value" });
+	}) : chromeT("filters.value", { defaultValue: "Value" });
 	const yesLabel = t("boolean.yes", { defaultValue: "Yes" });
 	const noLabel = t("boolean.no", { defaultValue: "No" });
 	const labelOf = (token) => token === "true" ? yesLabel : noLabel;
-	const clearLabel = t("filters.clear", { defaultValue: "Clear" });
+	const clearLabel = chromeT("filters.clear", { defaultValue: "Clear" });
 	const { open, setOpen, selected, select, triggerLabel, clear } = useSelectableValueControl({
 		value,
 		arity,
@@ -674,7 +1194,7 @@ function BooleanValueControl(props) {
 				"data-testid": testId,
 				"aria-label": ariaLabel,
 				className: cn("h-8 justify-between", fill && "w-full"),
-				children: triggerLabel(labelOf, ariaLabel)
+				children: triggerLabel(labelOf, props.placeholder ?? ariaLabel)
 			})
 		}), jsx(PopoverContent, {
 			className: "w-[140px] p-0",
@@ -707,12 +1227,13 @@ function BooleanValueControl(props) {
 function SelectListValueControl(props) {
 	const { options, value, onChange, testId, arity, autoFocus, fieldLabel, isLoading = false } = props;
 	const t = useOptionalT();
-	const ariaLabel = fieldLabel ? t("filters.valueFor", {
+	const chromeT = useChromeT();
+	const ariaLabel = fieldLabel ? chromeT("filters.valueFor", {
 		defaultValue: `Value for ${fieldLabel}`,
 		params: { field: fieldLabel }
-	}) : t("filters.value", { defaultValue: "Value" });
+	}) : chromeT("filters.value", { defaultValue: "Value" });
 	const loadingLabel = t("table.loading", { defaultValue: "Loading…" });
-	const clearLabel = t("filters.clear", { defaultValue: "Clear" });
+	const clearLabel = chromeT("filters.clear", { defaultValue: "Clear" });
 	const labelFor = props.labelFor ?? ((raw) => options.find((o) => o.value === raw)?.label ?? raw);
 	const { open, setOpen, selected, select, triggerLabel, clear } = useSelectableValueControl({
 		value,
@@ -734,7 +1255,7 @@ function SelectListValueControl(props) {
 				className: cn("h-8 justify-between truncate", props.fill ? "w-full" : "max-w-[200px]"),
 				children: jsx("span", {
 					className: "truncate",
-					children: isLoading ? loadingLabel : triggerLabel(labelFor, ariaLabel)
+					children: isLoading ? loadingLabel : triggerLabel(labelFor, props.placeholder ?? ariaLabel)
 				})
 			})
 		}), jsx(PopoverContent, {
@@ -797,6 +1318,7 @@ function EnumValueControl(props) {
 		arity,
 		autoFocus,
 		fieldLabel,
+		placeholder: props.placeholder,
 		options,
 		labelFor,
 		isLoading,
@@ -843,6 +1365,7 @@ function RelationValueControl(props) {
 	const { to, by, value, onChange, testId, arity, autoFocus, fieldLabel } = props;
 	const app = useApp();
 	const t = useOptionalT();
+	const chromeT = useChromeT();
 	const targetDef = app.registry.get(to);
 	const displayField = targetDef?.displayField ?? "name";
 	const [search, setSearch] = useState("");
@@ -881,11 +1404,11 @@ function RelationValueControl(props) {
 		if (fromRows) return rowTitle(fromRows);
 		return fallbackLabels[id] ?? id;
 	};
-	const ariaLabel = fieldLabel ? t("filters.valueFor", {
+	const ariaLabel = fieldLabel ? chromeT("filters.valueFor", {
 		defaultValue: `Value for ${fieldLabel}`,
 		params: { field: fieldLabel }
-	}) : t("filters.value", { defaultValue: "Value" });
-	const clearLabel = t("filters.clear", { defaultValue: "Clear" });
+	}) : chromeT("filters.value", { defaultValue: "Value" });
+	const clearLabel = chromeT("filters.clear", { defaultValue: "Clear" });
 	return jsxs(Popover, {
 		open,
 		onOpenChange: setOpen,
@@ -901,7 +1424,7 @@ function RelationValueControl(props) {
 				className: cn("h-8 justify-between truncate", props.fill ? "w-full" : "max-w-[220px]"),
 				children: jsx("span", {
 					className: "truncate",
-					children: triggerLabel(labelFor, ariaLabel)
+					children: triggerLabel(labelFor, props.placeholder ?? ariaLabel)
 				})
 			})
 		}), jsx(PopoverContent, {
@@ -957,6 +1480,20 @@ function RelationValueControl(props) {
 	});
 }
 //#endregion
+//#region src/fields/local-date-time.ts
+function toLocalDateTimeText(value) {
+	if (value === void 0 || value === null || value === "") return "";
+	const d = value instanceof Date ? value : new Date(String(value));
+	if (Number.isNaN(d.getTime())) return "";
+	const pad = (n) => String(n).padStart(2, "0");
+	return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+function fromLocalDateTimeText(text) {
+	if (text === "") return void 0;
+	const d = new Date(text);
+	return Number.isNaN(d.getTime()) ? void 0 : d.toISOString();
+}
+//#endregion
 //#region src/list-kit/filter-builder/values/scalar-value-input.tsx
 function isDateTime(kind) {
 	return kind.kind === "date" && kind.time === true;
@@ -969,12 +1506,9 @@ function inputTypeFor(kind) {
 	}
 }
 function toText(kind, value) {
+	if (isDateTime(kind)) return toLocalDateTimeText(value);
 	if (value === void 0 || value === null || value === "") return "";
-	if (!isDateTime(kind)) return String(value);
-	const d = new Date(String(value));
-	if (Number.isNaN(d.getTime())) return "";
-	const pad = (n) => String(n).padStart(2, "0");
-	return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+	return String(value);
 }
 function parseOne(kind, raw) {
 	if (raw === "") return void 0;
@@ -982,19 +1516,16 @@ function parseOne(kind, raw) {
 		const n = Number(raw);
 		return Number.isFinite(n) ? n : void 0;
 	}
-	if (isDateTime(kind)) {
-		const d = new Date(raw);
-		return Number.isNaN(d.getTime()) ? void 0 : d.toISOString();
-	}
+	if (isDateTime(kind)) return fromLocalDateTimeText(raw);
 	return raw;
 }
 function ScalarValueInput(props) {
-	const t = useOptionalT();
+	const chromeT = useChromeT();
 	const inputType = inputTypeFor(props.kind);
-	const ariaLabel = props.fieldLabel ? t("filters.valueFor", {
+	const ariaLabel = props.fieldLabel ? chromeT("filters.valueFor", {
 		defaultValue: `Value for ${props.fieldLabel}`,
 		params: { field: props.fieldLabel }
-	}) : t("filters.value", { defaultValue: "Value" });
+	}) : chromeT("filters.value", { defaultValue: "Value" });
 	if (props.arity === "multi") return jsx(ScalarMultiInput, {
 		...props,
 		inputType,
@@ -1124,6 +1655,7 @@ function FilterValueControl(props) {
 		arity,
 		autoFocus: props.autoFocus,
 		fieldLabel: props.fieldLabel,
+		placeholder: props.placeholder,
 		options: props.options,
 		fill: props.fill
 	});
@@ -1140,6 +1672,7 @@ function FilterValueControl(props) {
 			arity,
 			autoFocus: props.autoFocus,
 			fieldLabel: props.fieldLabel,
+			placeholder: props.placeholder,
 			options: props.kind.values.map((entry) => ({
 				value: entry,
 				label: entry
@@ -1168,10 +1701,10 @@ const FIELD_CLASS = "h-8 min-w-0 shrink basis-40";
 const OPERATOR_CLASS = "h-8 min-w-0 shrink basis-[9.5rem]";
 function FilterRow(props) {
 	const { row, path, available, onPatch, onRemove, testIdBase, debounceMs } = props;
-	const t = useOptionalT();
+	const chromeT = useChromeT();
 	const base = `${testIdBase}:row:${path.join("-")}`;
 	const spec = available.find((s) => s.field === row.field);
-	const removeLabel = t("filters.removeRow", { defaultValue: "Remove filter" });
+	const removeLabel = chromeT("filters.removeRow", { defaultValue: "Remove filter" });
 	if (!spec) return jsxs("div", {
 		className: ROW_CLASS,
 		children: [
@@ -1211,8 +1744,8 @@ function FilterRow(props) {
 	};
 	const handleOpChange = (op) => onPatch(path, { op });
 	const handleValueChange = (value) => onPatch(path, { value });
-	const fieldAriaLabel = t("filters.field", { defaultValue: "Field" });
-	const operatorAriaLabel = t("filters.operator", { defaultValue: "Operator" });
+	const fieldAriaLabel = chromeT("filters.field", { defaultValue: "Field" });
+	const operatorAriaLabel = chromeT("filters.operator", { defaultValue: "Operator" });
 	return jsxs("div", {
 		className: ROW_CLASS,
 		children: [
@@ -1241,7 +1774,7 @@ function FilterRow(props) {
 				}), jsx(SelectContent, { children: spec.operators.map((op) => jsx(SelectItem, {
 					value: op,
 					"data-testid": `${opTestId}:option:${op}`,
-					children: t(`filters.operators.${op}`, { defaultValue: op })
+					children: chromeT(`filters.operators.${op}`, { defaultValue: op })
 				}, op)) })]
 			}),
 			jsx("div", {
@@ -1289,10 +1822,10 @@ function FilterGroupEditor(props) {
 }
 function GroupEditorInner(props) {
 	const { group, path, available, onChange, testIdBase, onRemove, addGroupAt, debounceMs } = props;
-	const t = useOptionalT();
+	const chromeT = useChromeT();
 	const base = `${testIdBase}:group:${path.join("-")}`;
 	const canNestGroup = depthOf(path) < 3;
-	const joinLabel = (join) => t(`filters.${join}`, { defaultValue: join });
+	const joinLabel = (join) => chromeT(`filters.${join}`, { defaultValue: join });
 	const handlePatch = (rowPath, patch) => {
 		const index = rowPath[rowPath.length - 1];
 		if (index === void 0) return;
@@ -1325,11 +1858,11 @@ function GroupEditorInner(props) {
 				return jsxs(Fragment, { children: [jsxs("div", {
 					className: CONNECTOR_CLASS,
 					children: [
-						index === 0 && t("filters.where", { defaultValue: "Where" }),
+						index === 0 && chromeT("filters.where", { defaultValue: "Where" }),
 						index === 1 && jsx("button", {
 							type: "button",
 							"data-testid": `${base}:join`,
-							"aria-label": t("filters.toggleJoin", {
+							"aria-label": chromeT("filters.toggleJoin", {
 								defaultValue: `Join: ${joinLabel(group.join)} — activate to switch to ${joinLabel(otherJoin)}`,
 								params: {
 									current: joinLabel(group.join),
@@ -1381,7 +1914,7 @@ function GroupEditorInner(props) {
 						children: [jsx(IconPlus, {
 							className: "h-4 w-4",
 							"aria-hidden": "true"
-						}), t("filters.addRow", { defaultValue: "Add filter" })]
+						}), chromeT("filters.addRow", { defaultValue: "Add filter" })]
 					}),
 					canNestGroup && jsxs(Button, {
 						type: "button",
@@ -1392,7 +1925,7 @@ function GroupEditorInner(props) {
 						children: [jsx(IconFolderPlus, {
 							className: "h-4 w-4",
 							"aria-hidden": "true"
-						}), t("filters.addGroup", { defaultValue: "Add group" })]
+						}), chromeT("filters.addGroup", { defaultValue: "Add group" })]
 					}),
 					onRemove && jsxs(Button, {
 						type: "button",
@@ -1403,7 +1936,7 @@ function GroupEditorInner(props) {
 						children: [jsx(IconX, {
 							className: "h-4 w-4",
 							"aria-hidden": "true"
-						}), t("filters.removeGroup", { defaultValue: "Remove group" })]
+						}), chromeT("filters.removeGroup", { defaultValue: "Remove group" })]
 					})
 				]
 			})
@@ -1419,7 +1952,7 @@ function countGroupRows(group) {
 }
 function FilterPanel(props) {
 	const { group, setGroup, available, setPage, testIdBase, open, onOpenChange, focusPath, externalRemoval } = props;
-	const t = useOptionalT();
+	const chromeT = useChromeT();
 	const [draft, setDraft] = useState(() => toDraft(group));
 	const wasOpenRef = useRef(open);
 	const topLevelIdsRef = useRef([]);
@@ -1471,7 +2004,7 @@ function FilterPanel(props) {
 						className: "h-4 w-4",
 						"aria-hidden": "true"
 					}),
-					t("filters.title", { defaultValue: "Filters" }),
+					chromeT("filters.title", { defaultValue: "Filters" }),
 					appliedCount > 0 && jsx("span", {
 						"data-testid": `${testIdBase}:count`,
 						className: "ml-1 rounded-full bg-primary px-1.5 text-xs text-primary-foreground",
@@ -1499,13 +2032,13 @@ function FilterPanel(props) {
 					size: "sm",
 					"data-testid": `${testIdBase}:reset`,
 					onClick: handleReset,
-					children: t("filters.reset", { defaultValue: "Reset" })
+					children: chromeT("filters.reset", { defaultValue: "Reset" })
 				}), jsx(Button, {
 					type: "button",
 					size: "sm",
 					"data-testid": `${testIdBase}:apply`,
 					onClick: handleApply,
-					children: t("filters.apply", { defaultValue: "Apply" })
+					children: chromeT("filters.apply", { defaultValue: "Apply" })
 				})]
 			})]
 		})]
@@ -1560,11 +2093,204 @@ function PinnedControl(props) {
 	});
 }
 //#endregion
+//#region src/data-table/data-table-faceted-filter.tsx
+function DataTableFacetedFilter({ column, getTestId, ...rest }) {
+	const filterValue = column.getFilterValue();
+	return jsx(FacetedFilterPicker, {
+		...rest,
+		...getTestId === void 0 ? {} : { getTestId: (role, value) => role === "hint" ? void 0 : getTestId(role, value) },
+		selected: Array.isArray(filterValue) ? filterValue.map(String) : [],
+		onChange: (next) => column.setFilterValue(next.length === 0 ? void 0 : next)
+	});
+}
+function FacetedFilterPicker({ title, options = [], loadOptions, selectedLabelFor, searchPlaceholder, emptyText, getTestId, className, selected: selectedList, onChange, hint, emptyLabel, clearable = true }) {
+	const t = useOptionalT();
+	const chromeT = useChromeT();
+	const selected = useMemo(() => new Set(selectedList), [selectedList]);
+	const [search, setSearch] = useState("");
+	const [asyncOptions, setAsyncOptions] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const debounceRef = useRef(null);
+	const loadOptionsRef = useRef(loadOptions);
+	useEffect(() => {
+		loadOptionsRef.current = loadOptions;
+	});
+	useEffect(() => {
+		if (!loadOptionsRef.current) return;
+		setLoading(true);
+		if (debounceRef.current !== null) clearTimeout(debounceRef.current);
+		let cancelled = false;
+		debounceRef.current = setTimeout(() => {
+			const loader = loadOptionsRef.current;
+			if (!loader) return;
+			loader(search).then((results) => {
+				if (!cancelled) {
+					setAsyncOptions(results);
+					setLoading(false);
+				}
+			}).catch(() => {
+				if (!cancelled) setLoading(false);
+			});
+		}, 250);
+		return () => {
+			cancelled = true;
+			if (debounceRef.current !== null) clearTimeout(debounceRef.current);
+		};
+	}, [search]);
+	const effectiveOptions = loadOptions ? asyncOptions : options;
+	const labelFor = (value) => {
+		const opt = effectiveOptions.find((o) => o.value === value);
+		if (opt) return opt.label;
+		return selectedLabelFor?.(value) ?? value;
+	};
+	const toggle = (value) => {
+		const next = new Set(selected);
+		if (next.has(value)) next.delete(value);
+		else next.add(value);
+		onChange(Array.from(next));
+	};
+	const selectedValues = Array.from(selected);
+	return jsxs(Popover, { children: [jsx(PopoverTrigger, {
+		asChild: true,
+		children: jsxs(Button, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			"data-testid": getTestId?.("trigger"),
+			title: hint,
+			className: cn("h-8 border-dashed", className),
+			children: [
+				jsx(IconCirclePlus, {
+					className: "mr-2 h-4 w-4",
+					"aria-hidden": "true"
+				}),
+				title,
+				selected.size === 0 && emptyLabel !== void 0 && jsxs(Fragment$1, { children: [jsx("span", {
+					className: "mx-2 h-4 w-px bg-border",
+					"aria-hidden": "true"
+				}), jsx(Badge, {
+					variant: "secondary",
+					className: "rounded-sm px-1 font-normal",
+					children: emptyLabel
+				})] }),
+				selected.size > 0 && jsxs(Fragment$1, { children: [
+					jsx("span", {
+						className: "mx-2 h-4 w-px bg-border",
+						"aria-hidden": "true"
+					}),
+					jsx(Badge, {
+						variant: "secondary",
+						className: "rounded-sm px-1 font-normal lg:hidden",
+						children: selected.size
+					}),
+					jsx("div", {
+						className: "hidden gap-1 lg:flex",
+						children: selected.size > 2 ? jsx(Badge, {
+							variant: "secondary",
+							className: "rounded-sm px-1 font-normal",
+							children: t("table.selectedCount", {
+								count: selected.size,
+								defaultValue: "{{count}} selected"
+							})
+						}) : selectedValues.map((value) => jsx(Badge, {
+							variant: "secondary",
+							className: "rounded-sm px-1 font-normal",
+							children: labelFor(value)
+						}, value))
+					})
+				] })
+			]
+		})
+	}), jsx(PopoverContent, {
+		className: "w-[220px] p-0",
+		align: "start",
+		children: jsxs(Command, {
+			shouldFilter: !loadOptions,
+			children: [
+				hint !== void 0 && jsx("p", {
+					"data-testid": getTestId?.("hint"),
+					className: "border-b px-3 py-2 text-xs text-muted-foreground",
+					children: hint
+				}),
+				jsx(CommandInput, {
+					placeholder: searchPlaceholder ?? title,
+					"data-testid": getTestId?.("search"),
+					...loadOptions ? {
+						value: search,
+						onValueChange: setSearch
+					} : {}
+				}),
+				jsxs(CommandList, { children: [
+					loading && jsx("div", {
+						className: "py-6 text-center text-sm text-muted-foreground",
+						children: t("list.loadingShort", { defaultValue: "Loading…" })
+					}),
+					jsx(CommandEmpty, { children: emptyText ?? t("relation.noResults", { defaultValue: "No results." }) }),
+					jsx(CommandGroup, { children: effectiveOptions.map((opt) => {
+						const isSelected = selected.has(opt.value);
+						const Icon = opt.icon;
+						return jsxs(CommandItem, {
+							value: opt.label,
+							"data-testid": getTestId?.("option", opt.value),
+							role: "option",
+							"aria-selected": isSelected,
+							"aria-checked": isSelected,
+							onSelect: () => toggle(opt.value),
+							children: [
+								jsx("span", {
+									className: cn("mr-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border", isSelected ? "border-primary bg-primary text-primary-foreground" : "border-input opacity-50"),
+									"aria-hidden": "true",
+									children: isSelected && jsx(IconCheck, { className: "h-3.5 w-3.5" })
+								}),
+								Icon && jsx(Icon, {
+									className: "mr-2 h-4 w-4 text-muted-foreground",
+									"aria-hidden": "true"
+								}),
+								jsxs("span", {
+									className: "flex min-w-0 flex-1 flex-col text-left",
+									children: [jsx("span", { children: opt.label }), opt.summary !== void 0 && jsx("span", {
+										className: "text-xs text-muted-foreground",
+										children: opt.summary
+									})]
+								})
+							]
+						}, opt.value);
+					}) })
+				] }),
+				clearable && selected.size > 0 && jsx("button", {
+					type: "button",
+					"data-testid": getTestId?.("clear"),
+					onClick: () => onChange([]),
+					className: "flex w-full items-center justify-center border-t px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground",
+					children: chromeT("filters.clearAll", { defaultValue: "Clear filters" })
+				})
+			]
+		})
+	})] });
+}
+//#endregion
+//#region src/list-kit/filter-builder/preset-filter-controls.tsx
+function PresetFilterControls(props) {
+	const { presets, setPreset, testIdBase } = props;
+	return jsx(Fragment$1, { children: presets.map((filter) => jsx(FacetedFilterPicker, {
+		title: filter.label,
+		...filter.hint === void 0 ? {} : { hint: filter.hint },
+		options: filter.options.map((option) => ({
+			value: option.id,
+			label: option.label,
+			...option.summary === void 0 ? {} : { summary: option.summary }
+		})),
+		selected: filter.selected,
+		onChange: (next) => setPreset(filter.id, filter.options.map((option) => option.id).filter((id) => next.includes(id))),
+		getTestId: (role, value) => `${testIdBase}:preset:${filter.id}:${role}${value === void 0 ? "" : `:${value}`}`
+	}, filter.id)) });
+}
+//#endregion
 //#region src/list-kit/filter-builder/filter-builder.tsx
 const EMPTY_PINNED_FIELDS = Object.freeze([]);
 const EMPTY_PINNED_VALUE = Object.freeze([]);
 function FilterBuilder(props) {
-	const { group, setGroup, available, fixed, pinnedFields = EMPTY_PINNED_FIELDS, pinnedValue = EMPTY_PINNED_VALUE, setPinnedValue, setPage, testIdBase } = props;
+	const { group, setGroup, available, fixed, pinnedFields = EMPTY_PINNED_FIELDS, pinnedValue = EMPTY_PINNED_VALUE, setPinnedValue, presets, setPreset, setPage, testIdBase } = props;
 	const [open, setOpen] = useState(false);
 	const [focusPath, setFocusPath] = useState(void 0);
 	const [externalRemoval, setExternalRemoval] = useState(void 0);
@@ -1581,6 +2307,11 @@ function FilterBuilder(props) {
 		setPinnedValue?.(next);
 	};
 	return jsxs(Fragment$1, { children: [
+		presets !== void 0 && presets.length > 0 && setPreset !== void 0 && jsx(PresetFilterControls, {
+			presets,
+			setPreset,
+			testIdBase
+		}),
 		jsx(PinnedFilterControls, {
 			pinnedFields,
 			value: pinnedValue,
@@ -1616,6 +2347,6 @@ function FilterBuilder(props) {
 	] });
 }
 //#endregion
-export { TableHeader as C, DEFAULT_LANGUAGE_STORAGE_KEY as D, badgeVariants as E, loadLocale as O, TableHead as S, Badge as T, SelectValue as _, FilterBadges as a, TableCaption as b, Select as c, SelectItem as d, SelectLabel as f, SelectTrigger as g, SelectSeparator as h, FilterValueControl as i, saveLocale as k, SelectContent as l, SelectScrollUpButton as m, PinnedFilterControls as n, formatDate as o, SelectScrollDownButton as p, FilterPanel as r, formatNumber as s, FilterBuilder as t, SelectGroup as u, Table as v, TableRow as w, TableCell as x, TableBody as y };
+export { TableRow as A, loadLocale as B, SelectValue as C, TableCell as D, TableCaption as E, ResolvedFieldInput as F, useFieldMetaDiagnostic as I, fieldDescription as L, badgeVariants as M, MetaPlaceholder as N, TableHead as O, ResolvedFieldDisplay as P, lowerLegacyField as R, SelectTrigger as S, TableBody as T, saveLocale as V, SelectItem as _, PinnedFilterControls as a, SelectScrollUpButton as b, fromLocalDateTimeText as c, formatDate as d, formatDateTime as f, SelectGroup as g, SelectContent as h, FacetedFilterPicker as i, Badge as j, TableHeader as k, toLocalDateTimeText as l, Select as m, PresetFilterControls as n, FilterPanel as o, formatNumber as p, DataTableFacetedFilter as r, FilterValueControl as s, FilterBuilder as t, FilterBadges as u, SelectLabel as v, Table as w, SelectSeparator as x, SelectScrollDownButton as y, DEFAULT_LANGUAGE_STORAGE_KEY as z };
 
-//# sourceMappingURL=filter-builder-Bhn-dhZV.js.map
+//# sourceMappingURL=filter-builder-DaWHUZuV.js.map