@burojs/ui-shadcn 0.6.0 → 0.8.0

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

@@ -1,15 +1,17 @@
 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, canonicalInstant, canonicalResourceKey, convertValueForOp, declaredText, enumValueText, formatEntityRef, formatTimeValue, instantToWall, isCalendarDate, isCompletePredicate, isFilterGroup, isWallTime, opArity, resolveEnumLabel, resolveSurfaceUi, resolveTimeZone, wallToInstant } 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, useTimeContext, useTimeZone } 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 { normaliseFieldZone } from "@burojs/core/internal";
 import * as SelectPrimitive from "@radix-ui/react-select";
 //#region src/layout/language-storage.ts
 function loadLocale(storageKey = DEFAULT_LANGUAGE_STORAGE_KEY) {
@@ -27,6 +29,536 @@ 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",
+	"zone",
+	"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");
+	const layout = ownData(input, "layout").value;
+	if (inputId !== void 0) selection.input = inputId;
+	if (displayId !== void 0) selection.display = displayId;
+	if (Array.isArray(layout)) selection.layout = layout;
+	return Object.keys(selection).length === 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 (Array.isArray(properties)) {
+			const output = {};
+			for (let index = 0; index < properties.length; index += 1) {
+				const entry = ownData(properties, index).value;
+				const name = ownString(entry, "name");
+				const child = projectFieldDeclaration(entry);
+				if (name !== void 0 && child !== void 0) output[name] = child;
+			}
+			projected.properties = Object.freeze(output);
+		} else if (properties !== null && typeof properties === "object") {
+			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 zone = ownData(field, "zone");
+	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 } : {},
+		...zone.present && zone.value !== void 0 ? { zone: zone.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, absentPaths, pathStatus }) {
+	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),
+		...record === void 0 ? {} : { record }
+	});
+	const options = useContextOptions(field, name, metaState.status === "ready" ? metaState.meta : void 0, ui, resource);
+	const texts = useContextTexts(field, name, resolved, resource);
+	const dateDisplay = resolveSurfaceUi(surfaceField, uiSurface, columnEntry).dateDisplay;
+	const contextUi = useMemo(() => dateDisplay === void 0 ? ui : Object.freeze({
+		...ui,
+		display: Object.freeze({
+			...typeof ui.display === "object" && ui.display !== null ? ui.display : {},
+			...dateDisplay
+		})
+	}), [ui, dateDisplay]);
+	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]),
+		...absentPaths === void 0 || absentPaths.length === 0 ? {} : { absentPaths },
+		...pathStatus === void 0 ? {} : { pathStatus },
+		surface: "display",
+		presentation: presentation ?? "default",
+		record,
+		meta: metaState.meta,
+		ui: contextUi,
+		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, optionSubtitle, link, metaSources, baseline, fallback, absentPaths, pathStatus }) {
+	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]),
+		...absentPaths === void 0 || absentPaths.length === 0 ? {} : { absentPaths },
+		...pathStatus === void 0 ? {} : { pathStatus },
+		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,
+		optionSubtitle,
+		link,
+		metaSources: runtimeContext.metaSources,
+		...baseline === void 0 ? {} : { baseline }
+	});
+	return createElement(Component, {
+		...context,
+		multiple: false,
+		value,
+		onChange,
+		onBlur,
+		disabled,
+		relationSeeds,
+		fixedFilters,
+		optionSubtitle,
+		link,
+		metaSources: runtimeContext.metaSources,
+		...baseline === void 0 ? {} : { baseline }
+	});
+}
+//#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 +636,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 +679,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,
@@ -168,8 +709,6 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 function localeTag(locale) {
 	return locale || loadLocale() || "en-US";
 }
-const dateCache = new Map();
-const dateTimeCache = new Map();
 const numberCache = new Map();
 function cached(cache, key, make) {
 	const hit = cache.get(key);
@@ -183,24 +722,6 @@ function cached(cache, key, make) {
 	cache.set(key, made);
 	return made;
 }
-function formatDate(d, locale) {
-	const tag = localeTag(locale);
-	return cached(dateCache, tag, (t) => new Intl.DateTimeFormat(t, {
-		year: "numeric",
-		month: "short",
-		day: "numeric"
-	})).format(d);
-}
-function formatDateTime(d, locale) {
-	const tag = localeTag(locale);
-	return cached(dateTimeCache, tag, (t) => new Intl.DateTimeFormat(t, {
-		year: "numeric",
-		month: "short",
-		day: "numeric",
-		hour: "2-digit",
-		minute: "2-digit"
-	})).format(d);
-}
 function formatNumber(n, locale) {
 	const tag = localeTag(locale);
 	return cached(numberCache, tag, (t) => new Intl.NumberFormat(t)).format(n);
@@ -208,31 +729,31 @@ 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) {
-		const formatted = formatValue(spec.kind, value);
+		const formatted = formatValue(spec.kind, value, spec.zone);
 		if (formatted !== void 0) return formatted;
 	}
 	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,23 +886,33 @@ 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 viewer = useTimeZone();
+	const timeContext = useTimeContext();
+	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) => {
+	const formatValue = (kind, value, fieldZone) => {
 		if (kind.kind === "enum") return enumLabels[kind.enumName]?.[String(value)];
 		if (kind.kind === "relation") return relationLabels[relationLabelKey(kind.to, kind.by, String(value))];
-		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);
+		if (kind.kind === "date" && viewer.status === "ready") {
+			const zone = resolveTimeZone(timeContext.levels, fieldZone, timeContext.sources);
+			if (zone.status === "pending") return void 0;
+			return formatTimeValue(kind.time ? "dateTime" : "date", String(value), {
+				zone: zone.zone,
+				viewerZone: viewer.zone,
+				locale: localeTag(locale),
+				params: {}
+			});
 		}
 	};
 	const orphanPinned = useMemo(() => {
@@ -415,49 +946,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 +1185,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 +1213,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 +1246,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 +1274,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 +1337,7 @@ function EnumValueControl(props) {
 		arity,
 		autoFocus,
 		fieldLabel,
+		placeholder: props.placeholder,
 		options,
 		labelFor,
 		isLoading,
@@ -843,6 +1384,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 +1423,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 +1443,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,7 +1499,56 @@ function RelationValueControl(props) {
 	});
 }
 //#endregion
+//#region src/fields/field-time-zone.ts
+function useFieldTimeZone(zone, row) {
+	const { sources: session } = useTimeContext();
+	const sources = useMemo(() => row === void 0 ? session : {
+		...session,
+		record: {
+			status: "ready",
+			value: row,
+			refreshing: false
+		}
+	}, [session, row]);
+	const fieldZone = useMemo(() => normaliseFieldZone(zone), [zone]);
+	return useTimeZone(fieldZone, sources);
+}
+const DATE_KEYS = [
+	"dateStyle",
+	"timeStyle",
+	"zoneName"
+];
+function dateDisplayParams(ui) {
+	const display = ui?.display;
+	if (display === null || typeof display !== "object") return {};
+	const params = {};
+	for (const key of DATE_KEYS) {
+		const value = display[key];
+		if (value !== void 0) params[key] = value;
+	}
+	return params;
+}
+//#endregion
+//#region src/fields/local-date-time.ts
+function toLocalDateTimeText(value, zone) {
+	if (value === void 0 || value === null || value === "") return "";
+	const instant = canonicalInstant(value instanceof Date ? value.toISOString() : String(value));
+	if (instant === void 0) return "";
+	const { date, time } = instantToWall(instant, zone);
+	return `${date}T${time.slice(0, 5)}`;
+}
+function fromLocalDateTimeText(text, zone) {
+	const [date, time, ...rest] = text.split("T");
+	if (date === void 0 || time === void 0 || rest.length > 0) return void 0;
+	if (!isCalendarDate(date) || !isWallTime(time)) return void 0;
+	return wallToInstant(date, time, zone);
+}
+//#endregion
 //#region src/list-kit/filter-builder/values/scalar-value-input.tsx
+function useFilterZone(fieldZone) {
+	const zone = useFieldTimeZone(fieldZone, void 0);
+	return zone.status === "ready" ? zone.zone : "UTC";
+}
 function isDateTime(kind) {
 	return kind.kind === "date" && kind.time === true;
 }
@@ -968,33 +1559,27 @@ function inputTypeFor(kind) {
 		default: return "text";
 	}
 }
-function toText(kind, value) {
+function toText(kind, value, zone) {
+	if (isDateTime(kind)) return toLocalDateTimeText(value, zone);
 	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) {
+function parseOne(kind, raw, zone) {
 	if (raw === "") return void 0;
 	if (kind.kind === "number") {
 		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, zone);
 	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,
@@ -1008,7 +1593,8 @@ function ScalarValueInput(props) {
 }
 function ScalarSingleInput(props) {
 	const { value, onChange, kind, testId, autoFocus, inputType, ariaLabel, debounceMs = 300 } = props;
-	const storedText = toText(kind, value);
+	const zone = useFilterZone(props.zone);
+	const storedText = toText(kind, value, zone);
 	const [text, setText] = useState(storedText);
 	const lastPushedRef = useRef(storedText);
 	const timerRef = useRef(null);
@@ -1016,8 +1602,8 @@ function ScalarSingleInput(props) {
 	const commitRef = useRef(() => {});
 	useEffect(() => {
 		commitRef.current = (raw) => {
-			const parsed = parseOne(kind, raw);
-			lastPushedRef.current = toText(kind, parsed);
+			const parsed = parseOne(kind, raw, zone);
+			lastPushedRef.current = toText(kind, parsed, zone);
 			pendingRawRef.current = null;
 			onChange(parsed);
 		};
@@ -1066,8 +1652,9 @@ function ScalarMultiInput(props) {
 	const { value, onChange, kind, testId, autoFocus, inputType, ariaLabel } = props;
 	const chips = Array.isArray(value) ? value.map((v) => String(v)) : [];
 	const [draft, setDraft] = useState("");
+	const zone = useFilterZone(props.zone);
 	const addChip = () => {
-		const parsed = parseOne(kind, draft.trim());
+		const parsed = parseOne(kind, draft.trim(), zone);
 		if (parsed === void 0) return;
 		const text = String(parsed);
 		setDraft("");
@@ -1124,6 +1711,7 @@ function FilterValueControl(props) {
 		arity,
 		autoFocus: props.autoFocus,
 		fieldLabel: props.fieldLabel,
+		placeholder: props.placeholder,
 		options: props.options,
 		fill: props.fill
 	});
@@ -1140,6 +1728,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 +1757,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 +1800,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 +1830,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", {
@@ -1255,6 +1844,7 @@ function FilterRow(props) {
 					debounceMs,
 					fieldLabel: spec.label,
 					options: spec.options,
+					...spec.zone === void 0 ? {} : { zone: spec.zone },
 					fill: true
 				})
 			}),
@@ -1289,10 +1879,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 +1915,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 +1971,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 +1982,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 +1993,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 +2009,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 +2061,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 +2089,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" })
 				})]
 			})]
 		})]
@@ -1556,15 +2146,209 @@ function PinnedControl(props) {
 		testId: `${testIdBase}:pinned:${spec.field}`,
 		fieldLabel: spec.label,
 		placeholder: spec.label,
-		options: spec.options
+		options: spec.options,
+		...spec.zone === void 0 ? {} : { zone: spec.zone }
 	});
 }
 //#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 +2365,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 +2405,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 { TableHeader as A, DEFAULT_LANGUAGE_STORAGE_KEY as B, SelectTrigger as C, TableCaption as D, TableBody as E, ResolvedFieldDisplay as F, saveLocale as H, ResolvedFieldInput as I, useFieldMetaDiagnostic as L, Badge as M, badgeVariants as N, TableCell as O, MetaPlaceholder as P, fieldDescription as R, SelectSeparator as S, Table as T, loadLocale as V, SelectGroup as _, PinnedFilterControls as a, SelectScrollDownButton as b, fromLocalDateTimeText as c, useFieldTimeZone as d, FilterBadges as f, SelectContent as g, Select as h, FacetedFilterPicker as i, TableRow as j, TableHead as k, toLocalDateTimeText as l, localeTag as m, PresetFilterControls as n, FilterPanel as o, formatNumber as p, DataTableFacetedFilter as r, FilterValueControl as s, FilterBuilder as t, dateDisplayParams as u, SelectItem as v, SelectValue as w, SelectScrollUpButton as x, SelectLabel as y, lowerLegacyField as z };
 
-//# sourceMappingURL=filter-builder-Bhn-dhZV.js.map
+//# sourceMappingURL=filter-builder-z3Axzf9Y.js.map