@burojs/ui-shadcn 0.6.0 → 0.7.0

package/dist/{filter-builder-nXqtM_h4.cjs → filter-builder-DFu0JP-1.cjs}

@@ -1,8 +1,9 @@
 const require_use_theme = require("./use-theme-DFlpXils.cjs");
-const require_toaster = require("./toaster-Cr51X7bz.cjs");
+const require_toaster = require("./toaster-BbByOytP.cjs");
 const require_button = require("./button-BxnnE28H.cjs");
 const require_input = require("./input-BI0czGyI.cjs");
-const require_search_access = require("./search-access-Dugvttlg.cjs");
+const require_relation_create = require("./relation-create-DDEYcKfw.cjs");
+const require_skeleton = require("./skeleton-_1gP7wan.cjs");
 let _burojs_core = require("@burojs/core");
 let _burojs_react = require("@burojs/react");
 let _tabler_icons_react = require("@tabler/icons-react");
@@ -28,6 +29,505 @@ function saveLocale(code, storageKey = _burojs_react.DEFAULT_LANGUAGE_STORAGE_KE
 	} 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 (0, _burojs_core.declaredText)("field", declaration, "description") ?? (0, _burojs_core.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 (0, react.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 = (0, react.useMemo)(() => optionsFor(field, name), [
+		field.options,
+		legacy,
+		name
+	]);
+	return (0, _burojs_react.useResolvedFieldOptions)({
+		name,
+		meta,
+		ui,
+		texts: field.texts
+	}, options, resource.id);
+}
+function useContextTexts(field, name, resolved, resource) {
+	return (0, _burojs_react.useImplementationTexts)({
+		fieldName: name,
+		fieldTexts: field.texts,
+		id: resolved.id,
+		implementation: resolved.implementation
+	}, resource.id);
+}
+function useFieldRuntimeContext(resource, record, values, metaSources) {
+	const locale = (0, _burojs_react.useLocale)();
+	const caps = (0, _burojs_react.useI18nCaps)((0, _burojs_core.canonicalResourceKey)(resource));
+	const metaSourcesOut = (0, _burojs_react.useFieldMetaSources)({
+		record,
+		values,
+		extra: metaSources
+	});
+	const scopeState = metaSourcesOut.scope;
+	const scope = scopeState === void 0 ? void 0 : (0, _burojs_react.scopeValueOf)(scopeState);
+	return (0, react.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 = (0, react.useRef)(void 0);
+	const reason = state.status === "failed" ? state.reason : void 0;
+	(0, react.useEffect)(() => {
+		if (reason === void 0 || reported.current === reason || process.env.NODE_ENV === "production") return;
+		reported.current = reason;
+		const implementation = (0, _burojs_core.resolveSurfaceUi)(field, surface, entry).use ?? field.format ?? field.type;
+		console.error(`[burojs] field.meta-invalid: ${(0, _burojs_core.formatEntityRef)(resource)}.${name} (${implementation}): ${reason}`);
+	}, [
+		reason,
+		resource,
+		name,
+		field,
+		surface,
+		entry
+	]);
+}
+function MetaPlaceholder({ state }) {
+	const t = (0, _burojs_react.useOptionalT)();
+	if (state.status === "pending") return (0, react_jsx_runtime.jsx)(require_skeleton.Skeleton, {
+		"data-buro-skeleton": "",
+		"data-buro-field-meta": "pending",
+		className: "h-9 w-full"
+	});
+	return (0, react_jsx_runtime.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 = (0, react.useRef)(void 0);
+	(0, react.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 = (0, react.useMemo)(() => sourceAtEdge.ui === void 0 ? field : Object.freeze({
+		...field,
+		ui
+	}), [
+		sourceAtEdge,
+		field,
+		ui
+	]);
+	const resolved = (0, _burojs_react.useFieldImplementation)({
+		field: surfaceField,
+		surface: "display",
+		uiSurface,
+		...columnEntry === void 0 ? {} : { uiEntry: columnEntry }
+	});
+	const runtimeContext = useFieldRuntimeContext(resource, record, record, metaSources);
+	const metaState = (0, _burojs_react.useFieldMeta)(field, resolved.implementation, runtimeContext.metaSources, resolved.params);
+	const textField = (0, react.useMemo)(() => Object.freeze({
+		...surfaceField,
+		name
+	}), [surfaceField, name]);
+	const text = (0, _burojs_react.useFieldDisplayText)(textField, value, {
+		surface: uiSurface,
+		...columnEntry === void 0 ? {} : { entry: columnEntry },
+		resource: (0, _burojs_core.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 (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: fallback });
+	if (metaState.status !== "ready") return (0, react_jsx_runtime.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 (0, react.createElement)(Component, {
+		...context,
+		multiple: true,
+		value: Array.isArray(value) ? value : []
+	});
+	return (0, react.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 = (0, react.useMemo)(() => required === void 0 || required === base.required ? base : Object.freeze({
+		...base,
+		required
+	}), [base, required]);
+	const ui = (0, react.useMemo)(() => Object.freeze({
+		...sourceAtEdge.ui ?? EMPTY,
+		...placeholder === void 0 ? {} : { placeholder }
+	}), [sourceAtEdge, placeholder]);
+	const inputField = (0, react.useMemo)(() => ({
+		...field,
+		ui
+	}), [field, ui]);
+	const resolved = (0, _burojs_react.useFieldImplementation)({
+		field: inputField,
+		surface: "input"
+	});
+	const runtimeContext = useFieldRuntimeContext(resource, record, form, metaSources);
+	const metaState = (0, _burojs_react.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 (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: fallback });
+	if (metaState.status !== "ready") return (0, react_jsx_runtime.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 (0, react.createElement)(Component, {
+		...context,
+		multiple: true,
+		value: Array.isArray(value) ? value : [],
+		onChange,
+		onBlur,
+		disabled,
+		relationSeeds,
+		fixedFilters,
+		link,
+		metaSources: runtimeContext.metaSources
+	});
+	return (0, react.createElement)(Component, {
+		...context,
+		multiple: false,
+		value,
+		onChange,
+		onBlur,
+		disabled,
+		relationSeeds,
+		fixedFilters,
+		link,
+		metaSources: runtimeContext.metaSources
+	});
+}
+//#endregion
 //#region src/primitives/badge.tsx
 const badgeVariants = (0, class_variance_authority.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: {
@@ -105,11 +605,11 @@ const SelectGroup = _radix_ui_react_select.Group;
 const SelectValue = _radix_ui_react_select.Value;
 const SelectTrigger = react.forwardRef(({ className, children, ...props }, ref) => (0, react_jsx_runtime.jsxs)(_radix_ui_react_select.Trigger, {
 	ref,
-	className: require_use_theme.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: require_use_theme.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, (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Icon, {
 		asChild: true,
-		children: (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconChevronDown, { className: "h-4 w-4 opacity-50" })
+		children: (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" })
 	})]
 }));
 SelectTrigger.displayName = _radix_ui_react_select.Trigger.displayName;
@@ -148,15 +648,24 @@ const SelectLabel = react.forwardRef(({ className, ...props }, ref) => (0, react
 	...props
 }));
 SelectLabel.displayName = _radix_ui_react_select.Label.displayName;
-const SelectItem = react.forwardRef(({ className, children, ...props }, ref) => (0, react_jsx_runtime.jsxs)(_radix_ui_react_select.Item, {
-	ref,
-	className: require_use_theme.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: [(0, react_jsx_runtime.jsx)("span", {
-		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
-		children: (0, react_jsx_runtime.jsx)(_radix_ui_react_select.ItemIndicator, { children: (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconCheck, { className: "h-4 w-4" }) })
-	}), (0, react_jsx_runtime.jsx)(_radix_ui_react_select.ItemText, { children })]
-}));
+const SelectItem = react.forwardRef(({ className, children, description, ...props }, ref) => {
+	const hasDescription = description !== void 0 && description !== null;
+	return (0, react_jsx_runtime.jsxs)(_radix_ui_react_select.Item, {
+		ref,
+		className: require_use_theme.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: [(0, react_jsx_runtime.jsx)("span", {
+			className: require_use_theme.cn("absolute left-2 flex h-3.5 w-3.5 items-center justify-center", hasDescription && "top-[9px]"),
+			children: (0, react_jsx_runtime.jsx)(_radix_ui_react_select.ItemIndicator, { children: (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconCheck, { className: "h-4 w-4" }) })
+		}), !hasDescription ? (0, react_jsx_runtime.jsx)(_radix_ui_react_select.ItemText, { children }) : (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex min-w-0 flex-col gap-0.5",
+			children: [(0, react_jsx_runtime.jsx)(_radix_ui_react_select.ItemText, { children }), (0, react_jsx_runtime.jsx)("span", {
+				className: "text-xs leading-snug text-muted-foreground",
+				children: description
+			})]
+		})]
+	});
+});
 SelectItem.displayName = _radix_ui_react_select.Item.displayName;
 const SelectSeparator = react.forwardRef(({ className, ...props }, ref) => (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Separator, {
 	ref,
@@ -209,9 +718,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) {
@@ -220,20 +729,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 ((0, _burojs_core.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 = (0, _burojs_core.opArity)(row.op) === "none" ? null : describeValue(row.value, t, spec, formatValue);
+	const opLabel = chromeT(`filters.operators.${row.op}`, void 0, row.op);
+	const valueText = (0, _burojs_core.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}`;
@@ -296,7 +805,7 @@ function RelationLabelResolver(props) {
 	const { to, id, by, onResolve } = props;
 	const targetDef = (0, _burojs_react.useApp)().registry.get(to);
 	const { record } = (0, _burojs_react.useRelatedRecord)(to, id, by === void 0 ? void 0 : { by });
-	const rowTitle = require_search_access.useRowTitle(to, targetDef?.displayField);
+	const rowTitle = require_relation_create.useRowTitle(to, targetDef?.displayField);
 	(0, react.useEffect)(() => {
 		if (!record) return;
 		onResolve(relationLabelKey(to, by, id), rowTitle(record));
@@ -366,15 +875,18 @@ function badgeKey(row, index) {
 	if ((0, _burojs_core.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 = (0, _burojs_react.useOptionalT)();
-	const tt = (key, params, fallback) => t(key, {
+	const chromeT = (0, _burojs_react.useChromeT)();
+	const locale = (0, _burojs_react.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)];
@@ -382,7 +894,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 = (0, react.useMemo)(() => {
@@ -416,49 +928,56 @@ function FilterBadges(props) {
 				onEnumResolved,
 				onRelationResolved
 			}),
-			group.rows.map((row, index) => (0, react_jsx_runtime.jsxs)(Badge, {
+			group.rows.map((row, index) => (0, react_jsx_runtime.jsx)(Badge, {
 				variant: "secondary",
-				className: "gap-1 py-1 pr-1",
-				children: [(0, react_jsx_runtime.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)
-				}), (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					"data-testid": `${testIdBase}:badge:${index}:remove`,
-					"aria-label": removeLabel,
-					onClick: () => handleRemove(index),
-					className: "rounded-sm hover:bg-accent",
-					children: (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, {
-						className: "h-3 w-3",
-						"aria-hidden": "true"
-					})
-				})]
+				className: "py-1 pr-1",
+				children: (0, react_jsx_runtime.jsxs)("span", {
+					className: BADGE_ROW,
+					children: [(0, react_jsx_runtime.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)
+					}), (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"data-testid": `${testIdBase}:badge:${index}:remove`,
+						"aria-label": removeLabel,
+						onClick: () => handleRemove(index),
+						className: REMOVE_BUTTON,
+						children: (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, {
+							className: "size-3",
+							"aria-hidden": "true"
+						})
+					})]
+				})
 			}, badgeKey(row, index))),
 			labelledFixed.map((entry, index) => (0, react_jsx_runtime.jsx)(Badge, {
 				variant: "outline",
 				"data-testid": `${testIdBase}:badge:fixed:${index}`,
 				children: entry.label
 			}, `fixed-${index}`)),
-			orphanPinned.map(({ expr, index }) => (0, react_jsx_runtime.jsxs)(Badge, {
+			orphanPinned.map(({ expr, index }) => (0, react_jsx_runtime.jsx)(Badge, {
 				variant: "secondary",
-				className: "gap-1 py-1",
-				children: [(0, react_jsx_runtime.jsx)("span", {
-					"data-testid": `${testIdBase}:badge:pinned:${index}`,
-					children: describeRow(expr, available, tt, formatValue)
-				}), (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					"data-testid": `${testIdBase}:badge:pinned:${index}:remove`,
-					"aria-label": removeLabel,
-					onClick: () => handleRemovePinned(index),
-					className: "rounded-sm hover:bg-accent",
-					children: (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, {
-						className: "h-3 w-3",
-						"aria-hidden": "true"
-					})
-				})]
+				className: "py-1 pr-1",
+				children: (0, react_jsx_runtime.jsxs)("span", {
+					className: BADGE_ROW,
+					children: [(0, react_jsx_runtime.jsx)("span", {
+						"data-testid": `${testIdBase}:badge:pinned:${index}`,
+						className: "min-w-0 truncate",
+						children: describeRow(expr, available, tt, formatValue)
+					}), (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"data-testid": `${testIdBase}:badge:pinned:${index}:remove`,
+						"aria-label": removeLabel,
+						onClick: () => handleRemovePinned(index),
+						className: REMOVE_BUTTON,
+						children: (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, {
+							className: "size-3",
+							"aria-hidden": "true"
+						})
+					})]
+				})
 			}, `pinned-${index}`))
 		]
 	});
@@ -648,14 +1167,15 @@ const OPTIONS = ["true", "false"];
 function BooleanValueControl(props) {
 	const { value, onChange, testId, arity, autoFocus, fieldLabel, fill } = props;
 	const t = (0, _burojs_react.useOptionalT)();
-	const ariaLabel = fieldLabel ? t("filters.valueFor", {
+	const chromeT = (0, _burojs_react.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,
@@ -675,12 +1195,12 @@ function BooleanValueControl(props) {
 				"data-testid": testId,
 				"aria-label": ariaLabel,
 				className: require_use_theme.cn("h-8 justify-between", fill && "w-full"),
-				children: triggerLabel(labelOf, ariaLabel)
+				children: triggerLabel(labelOf, props.placeholder ?? ariaLabel)
 			})
 		}), (0, react_jsx_runtime.jsx)(require_toaster.PopoverContent, {
 			className: "w-[140px] p-0",
 			align: "start",
-			children: (0, react_jsx_runtime.jsx)(require_search_access.Command, { children: (0, react_jsx_runtime.jsx)(require_search_access.CommandList, { children: (0, react_jsx_runtime.jsxs)(require_search_access.CommandGroup, { children: [arity === "single" && selected.size > 0 && (0, react_jsx_runtime.jsxs)(require_search_access.CommandItem, {
+			children: (0, react_jsx_runtime.jsx)(require_relation_create.Command, { children: (0, react_jsx_runtime.jsx)(require_relation_create.CommandList, { children: (0, react_jsx_runtime.jsxs)(require_relation_create.CommandGroup, { children: [arity === "single" && selected.size > 0 && (0, react_jsx_runtime.jsxs)(require_relation_create.CommandItem, {
 				"data-testid": `${testId}:clear`,
 				value: "__clear__",
 				onSelect: () => clear(),
@@ -690,7 +1210,7 @@ function BooleanValueControl(props) {
 				}), clearLabel]
 			}), OPTIONS.map((token) => {
 				const isSelected = selected.has(token);
-				return (0, react_jsx_runtime.jsxs)(require_search_access.CommandItem, {
+				return (0, react_jsx_runtime.jsxs)(require_relation_create.CommandItem, {
 					value: labelOf(token),
 					"data-testid": `${testId}:option:${token}`,
 					onSelect: () => select(token),
@@ -708,12 +1228,13 @@ function BooleanValueControl(props) {
 function SelectListValueControl(props) {
 	const { options, value, onChange, testId, arity, autoFocus, fieldLabel, isLoading = false } = props;
 	const t = (0, _burojs_react.useOptionalT)();
-	const ariaLabel = fieldLabel ? t("filters.valueFor", {
+	const chromeT = (0, _burojs_react.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,
@@ -735,16 +1256,16 @@ function SelectListValueControl(props) {
 				className: require_use_theme.cn("h-8 justify-between truncate", props.fill ? "w-full" : "max-w-[200px]"),
 				children: (0, react_jsx_runtime.jsx)("span", {
 					className: "truncate",
-					children: isLoading ? loadingLabel : triggerLabel(labelFor, ariaLabel)
+					children: isLoading ? loadingLabel : triggerLabel(labelFor, props.placeholder ?? ariaLabel)
 				})
 			})
 		}), (0, react_jsx_runtime.jsx)(require_toaster.PopoverContent, {
 			className: "w-[220px] p-0",
 			align: "start",
-			children: (0, react_jsx_runtime.jsxs)(require_search_access.Command, { children: [(0, react_jsx_runtime.jsx)(require_search_access.CommandInput, {
+			children: (0, react_jsx_runtime.jsxs)(require_relation_create.Command, { children: [(0, react_jsx_runtime.jsx)(require_relation_create.CommandInput, {
 				placeholder: ariaLabel,
 				"data-testid": `${testId}:search`
-			}), (0, react_jsx_runtime.jsxs)(require_search_access.CommandList, { children: [
+			}), (0, react_jsx_runtime.jsxs)(require_relation_create.CommandList, { children: [
 				isLoading && (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground",
 					"data-testid": `${testId}:loading`,
@@ -753,8 +1274,8 @@ function SelectListValueControl(props) {
 						"aria-hidden": "true"
 					}), loadingLabel]
 				}),
-				!isLoading && (0, react_jsx_runtime.jsx)(require_search_access.CommandEmpty, { children: t("relation.noResults", { defaultValue: "No results." }) }),
-				!isLoading && (0, react_jsx_runtime.jsxs)(require_search_access.CommandGroup, { children: [arity === "single" && selected.size > 0 && (0, react_jsx_runtime.jsxs)(require_search_access.CommandItem, {
+				!isLoading && (0, react_jsx_runtime.jsx)(require_relation_create.CommandEmpty, { children: t("relation.noResults", { defaultValue: "No results." }) }),
+				!isLoading && (0, react_jsx_runtime.jsxs)(require_relation_create.CommandGroup, { children: [arity === "single" && selected.size > 0 && (0, react_jsx_runtime.jsxs)(require_relation_create.CommandItem, {
 					"data-testid": `${testId}:clear`,
 					value: "__clear__",
 					onSelect: () => clear(),
@@ -765,7 +1286,7 @@ function SelectListValueControl(props) {
 				}), options.map((entry) => {
 					const isSelected = selected.has(entry.value);
 					const label = labelFor(entry.value);
-					return (0, react_jsx_runtime.jsxs)(require_search_access.CommandItem, {
+					return (0, react_jsx_runtime.jsxs)(require_relation_create.CommandItem, {
 						value: label,
 						"data-testid": `${testId}:option:${entry.value}`,
 						onSelect: () => select(entry.value),
@@ -798,6 +1319,7 @@ function EnumValueControl(props) {
 		arity,
 		autoFocus,
 		fieldLabel,
+		placeholder: props.placeholder,
 		options,
 		labelFor,
 		isLoading,
@@ -809,7 +1331,7 @@ function EnumValueControl(props) {
 function useRelatedLabels(to, ids, by) {
 	const targetDef = (0, _burojs_react.useApp)().registry.get(to);
 	const idField = (targetDef?.data)?.idField;
-	const rowTitle = require_search_access.useRowTitle(to, targetDef?.displayField);
+	const rowTitle = require_relation_create.useRowTitle(to, targetDef?.displayField);
 	const field = by ?? (typeof idField === "string" && idField.length > 0 ? idField : "id");
 	const query = (0, _burojs_react.useList)(to, {
 		pagination: {
@@ -844,6 +1366,7 @@ function RelationValueControl(props) {
 	const { to, by, value, onChange, testId, arity, autoFocus, fieldLabel } = props;
 	const app = (0, _burojs_react.useApp)();
 	const t = (0, _burojs_react.useOptionalT)();
+	const chromeT = (0, _burojs_react.useChromeT)();
 	const targetDef = app.registry.get(to);
 	const displayField = targetDef?.displayField ?? "name";
 	const [search, setSearch] = (0, react.useState)("");
@@ -852,9 +1375,9 @@ function RelationValueControl(props) {
 		arity,
 		onChange
 	});
-	const rowTitle = require_search_access.useRowTitle(to, targetDef?.displayField);
+	const rowTitle = require_relation_create.useRowTitle(to, targetDef?.displayField);
 	const access = (0, _burojs_react.useListAccess)(to);
-	const searchable = (0, react.useMemo)(() => access.status === "ready" && require_search_access.narrowSearchDecl({ fields: [displayField] }, (name) => access.fieldVisible(name)) !== void 0, [access, displayField]);
+	const searchable = (0, react.useMemo)(() => access.status === "ready" && require_relation_create.narrowSearchDecl({ fields: [displayField] }, (name) => access.fieldVisible(name)) !== void 0, [access, displayField]);
 	const listQuery = (0, _burojs_react.useList)(to, {
 		pagination: {
 			kind: "offset",
@@ -882,11 +1405,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 (0, react_jsx_runtime.jsxs)(require_toaster.Popover, {
 		open,
 		onOpenChange: setOpen,
@@ -902,20 +1425,20 @@ function RelationValueControl(props) {
 				className: require_use_theme.cn("h-8 justify-between truncate", props.fill ? "w-full" : "max-w-[220px]"),
 				children: (0, react_jsx_runtime.jsx)("span", {
 					className: "truncate",
-					children: triggerLabel(labelFor, ariaLabel)
+					children: triggerLabel(labelFor, props.placeholder ?? ariaLabel)
 				})
 			})
 		}), (0, react_jsx_runtime.jsx)(require_toaster.PopoverContent, {
 			className: "w-[240px] p-0",
 			align: "start",
-			children: (0, react_jsx_runtime.jsxs)(require_search_access.Command, {
+			children: (0, react_jsx_runtime.jsxs)(require_relation_create.Command, {
 				shouldFilter: false,
-				children: [searchable && (0, react_jsx_runtime.jsx)(require_search_access.CommandInput, {
+				children: [searchable && (0, react_jsx_runtime.jsx)(require_relation_create.CommandInput, {
 					value: search,
 					onValueChange: setSearch,
 					placeholder: ariaLabel,
 					"data-testid": `${testId}:search`
-				}), (0, react_jsx_runtime.jsxs)(require_search_access.CommandList, { children: [
+				}), (0, react_jsx_runtime.jsxs)(require_relation_create.CommandList, { children: [
 					listQuery.isLoading && (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground",
 						"data-testid": `${testId}:loading`,
@@ -924,8 +1447,8 @@ function RelationValueControl(props) {
 							"aria-hidden": "true"
 						}), t("table.loading", { defaultValue: "Loading…" })]
 					}),
-					!listQuery.isLoading && rows.length === 0 && (0, react_jsx_runtime.jsx)(require_search_access.CommandEmpty, { children: t("relation.noResults", { defaultValue: "No results." }) }),
-					!listQuery.isLoading && arity === "single" && selected.size > 0 && (0, react_jsx_runtime.jsxs)(require_search_access.CommandItem, {
+					!listQuery.isLoading && rows.length === 0 && (0, react_jsx_runtime.jsx)(require_relation_create.CommandEmpty, { children: t("relation.noResults", { defaultValue: "No results." }) }),
+					!listQuery.isLoading && arity === "single" && selected.size > 0 && (0, react_jsx_runtime.jsxs)(require_relation_create.CommandItem, {
 						"data-testid": `${testId}:clear`,
 						value: "__clear__",
 						onSelect: () => clear(),
@@ -939,7 +1462,7 @@ function RelationValueControl(props) {
 						if (id === void 0) return null;
 						const label = rowTitle(row);
 						const isSelected = selected.has(id);
-						return (0, react_jsx_runtime.jsxs)(require_search_access.CommandItem, {
+						return (0, react_jsx_runtime.jsxs)(require_relation_create.CommandItem, {
 							value: `${label} ${id}`,
 							"data-testid": `${testId}:option:${id}`,
 							onSelect: () => select(id),
@@ -958,6 +1481,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;
@@ -970,12 +1507,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;
@@ -983,19 +1517,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 = (0, _burojs_react.useOptionalT)();
+	const chromeT = (0, _burojs_react.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 (0, react_jsx_runtime.jsx)(ScalarMultiInput, {
 		...props,
 		inputType,
@@ -1125,6 +1656,7 @@ function FilterValueControl(props) {
 		arity,
 		autoFocus: props.autoFocus,
 		fieldLabel: props.fieldLabel,
+		placeholder: props.placeholder,
 		options: props.options,
 		fill: props.fill
 	});
@@ -1141,6 +1673,7 @@ function FilterValueControl(props) {
 			arity,
 			autoFocus: props.autoFocus,
 			fieldLabel: props.fieldLabel,
+			placeholder: props.placeholder,
 			options: props.kind.values.map((entry) => ({
 				value: entry,
 				label: entry
@@ -1169,10 +1702,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 = (0, _burojs_react.useOptionalT)();
+	const chromeT = (0, _burojs_react.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 (0, react_jsx_runtime.jsxs)("div", {
 		className: ROW_CLASS,
 		children: [
@@ -1212,8 +1745,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 (0, react_jsx_runtime.jsxs)("div", {
 		className: ROW_CLASS,
 		children: [
@@ -1242,7 +1775,7 @@ function FilterRow(props) {
 				}), (0, react_jsx_runtime.jsx)(SelectContent, { children: spec.operators.map((op) => (0, react_jsx_runtime.jsx)(SelectItem, {
 					value: op,
 					"data-testid": `${opTestId}:option:${op}`,
-					children: t(`filters.operators.${op}`, { defaultValue: op })
+					children: chromeT(`filters.operators.${op}`, { defaultValue: op })
 				}, op)) })]
 			}),
 			(0, react_jsx_runtime.jsx)("div", {
@@ -1290,10 +1823,10 @@ function FilterGroupEditor(props) {
 }
 function GroupEditorInner(props) {
 	const { group, path, available, onChange, testIdBase, onRemove, addGroupAt, debounceMs } = props;
-	const t = (0, _burojs_react.useOptionalT)();
+	const chromeT = (0, _burojs_react.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;
@@ -1326,11 +1859,11 @@ function GroupEditorInner(props) {
 				return (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [(0, react_jsx_runtime.jsxs)("div", {
 					className: CONNECTOR_CLASS,
 					children: [
-						index === 0 && t("filters.where", { defaultValue: "Where" }),
+						index === 0 && chromeT("filters.where", { defaultValue: "Where" }),
 						index === 1 && (0, react_jsx_runtime.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),
@@ -1382,7 +1915,7 @@ function GroupEditorInner(props) {
 						children: [(0, react_jsx_runtime.jsx)(_tabler_icons_react.IconPlus, {
 							className: "h-4 w-4",
 							"aria-hidden": "true"
-						}), t("filters.addRow", { defaultValue: "Add filter" })]
+						}), chromeT("filters.addRow", { defaultValue: "Add filter" })]
 					}),
 					canNestGroup && (0, react_jsx_runtime.jsxs)(require_button.Button, {
 						type: "button",
@@ -1393,7 +1926,7 @@ function GroupEditorInner(props) {
 						children: [(0, react_jsx_runtime.jsx)(_tabler_icons_react.IconFolderPlus, {
 							className: "h-4 w-4",
 							"aria-hidden": "true"
-						}), t("filters.addGroup", { defaultValue: "Add group" })]
+						}), chromeT("filters.addGroup", { defaultValue: "Add group" })]
 					}),
 					onRemove && (0, react_jsx_runtime.jsxs)(require_button.Button, {
 						type: "button",
@@ -1404,7 +1937,7 @@ function GroupEditorInner(props) {
 						children: [(0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, {
 							className: "h-4 w-4",
 							"aria-hidden": "true"
-						}), t("filters.removeGroup", { defaultValue: "Remove group" })]
+						}), chromeT("filters.removeGroup", { defaultValue: "Remove group" })]
 					})
 				]
 			})
@@ -1420,7 +1953,7 @@ function countGroupRows(group) {
 }
 function FilterPanel(props) {
 	const { group, setGroup, available, setPage, testIdBase, open, onOpenChange, focusPath, externalRemoval } = props;
-	const t = (0, _burojs_react.useOptionalT)();
+	const chromeT = (0, _burojs_react.useChromeT)();
 	const [draft, setDraft] = (0, react.useState)(() => toDraft(group));
 	const wasOpenRef = (0, react.useRef)(open);
 	const topLevelIdsRef = (0, react.useRef)([]);
@@ -1472,7 +2005,7 @@ function FilterPanel(props) {
 						className: "h-4 w-4",
 						"aria-hidden": "true"
 					}),
-					t("filters.title", { defaultValue: "Filters" }),
+					chromeT("filters.title", { defaultValue: "Filters" }),
 					appliedCount > 0 && (0, react_jsx_runtime.jsx)("span", {
 						"data-testid": `${testIdBase}:count`,
 						className: "ml-1 rounded-full bg-primary px-1.5 text-xs text-primary-foreground",
@@ -1500,13 +2033,13 @@ function FilterPanel(props) {
 					size: "sm",
 					"data-testid": `${testIdBase}:reset`,
 					onClick: handleReset,
-					children: t("filters.reset", { defaultValue: "Reset" })
+					children: chromeT("filters.reset", { defaultValue: "Reset" })
 				}), (0, react_jsx_runtime.jsx)(require_button.Button, {
 					type: "button",
 					size: "sm",
 					"data-testid": `${testIdBase}:apply`,
 					onClick: handleApply,
-					children: t("filters.apply", { defaultValue: "Apply" })
+					children: chromeT("filters.apply", { defaultValue: "Apply" })
 				})]
 			})]
 		})]
@@ -1561,11 +2094,204 @@ function PinnedControl(props) {
 	});
 }
 //#endregion
+//#region src/data-table/data-table-faceted-filter.tsx
+function DataTableFacetedFilter({ column, getTestId, ...rest }) {
+	const filterValue = column.getFilterValue();
+	return (0, react_jsx_runtime.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 = (0, _burojs_react.useOptionalT)();
+	const chromeT = (0, _burojs_react.useChromeT)();
+	const selected = (0, react.useMemo)(() => new Set(selectedList), [selectedList]);
+	const [search, setSearch] = (0, react.useState)("");
+	const [asyncOptions, setAsyncOptions] = (0, react.useState)([]);
+	const [loading, setLoading] = (0, react.useState)(false);
+	const debounceRef = (0, react.useRef)(null);
+	const loadOptionsRef = (0, react.useRef)(loadOptions);
+	(0, react.useEffect)(() => {
+		loadOptionsRef.current = loadOptions;
+	});
+	(0, react.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 (0, react_jsx_runtime.jsxs)(require_toaster.Popover, { children: [(0, react_jsx_runtime.jsx)(require_toaster.PopoverTrigger, {
+		asChild: true,
+		children: (0, react_jsx_runtime.jsxs)(require_button.Button, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			"data-testid": getTestId?.("trigger"),
+			title: hint,
+			className: require_use_theme.cn("h-8 border-dashed", className),
+			children: [
+				(0, react_jsx_runtime.jsx)(_tabler_icons_react.IconCirclePlus, {
+					className: "mr-2 h-4 w-4",
+					"aria-hidden": "true"
+				}),
+				title,
+				selected.size === 0 && emptyLabel !== void 0 && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("span", {
+					className: "mx-2 h-4 w-px bg-border",
+					"aria-hidden": "true"
+				}), (0, react_jsx_runtime.jsx)(Badge, {
+					variant: "secondary",
+					className: "rounded-sm px-1 font-normal",
+					children: emptyLabel
+				})] }),
+				selected.size > 0 && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					(0, react_jsx_runtime.jsx)("span", {
+						className: "mx-2 h-4 w-px bg-border",
+						"aria-hidden": "true"
+					}),
+					(0, react_jsx_runtime.jsx)(Badge, {
+						variant: "secondary",
+						className: "rounded-sm px-1 font-normal lg:hidden",
+						children: selected.size
+					}),
+					(0, react_jsx_runtime.jsx)("div", {
+						className: "hidden gap-1 lg:flex",
+						children: selected.size > 2 ? (0, react_jsx_runtime.jsx)(Badge, {
+							variant: "secondary",
+							className: "rounded-sm px-1 font-normal",
+							children: t("table.selectedCount", {
+								count: selected.size,
+								defaultValue: "{{count}} selected"
+							})
+						}) : selectedValues.map((value) => (0, react_jsx_runtime.jsx)(Badge, {
+							variant: "secondary",
+							className: "rounded-sm px-1 font-normal",
+							children: labelFor(value)
+						}, value))
+					})
+				] })
+			]
+		})
+	}), (0, react_jsx_runtime.jsx)(require_toaster.PopoverContent, {
+		className: "w-[220px] p-0",
+		align: "start",
+		children: (0, react_jsx_runtime.jsxs)(require_relation_create.Command, {
+			shouldFilter: !loadOptions,
+			children: [
+				hint !== void 0 && (0, react_jsx_runtime.jsx)("p", {
+					"data-testid": getTestId?.("hint"),
+					className: "border-b px-3 py-2 text-xs text-muted-foreground",
+					children: hint
+				}),
+				(0, react_jsx_runtime.jsx)(require_relation_create.CommandInput, {
+					placeholder: searchPlaceholder ?? title,
+					"data-testid": getTestId?.("search"),
+					...loadOptions ? {
+						value: search,
+						onValueChange: setSearch
+					} : {}
+				}),
+				(0, react_jsx_runtime.jsxs)(require_relation_create.CommandList, { children: [
+					loading && (0, react_jsx_runtime.jsx)("div", {
+						className: "py-6 text-center text-sm text-muted-foreground",
+						children: t("list.loadingShort", { defaultValue: "Loading…" })
+					}),
+					(0, react_jsx_runtime.jsx)(require_relation_create.CommandEmpty, { children: emptyText ?? t("relation.noResults", { defaultValue: "No results." }) }),
+					(0, react_jsx_runtime.jsx)(require_relation_create.CommandGroup, { children: effectiveOptions.map((opt) => {
+						const isSelected = selected.has(opt.value);
+						const Icon = opt.icon;
+						return (0, react_jsx_runtime.jsxs)(require_relation_create.CommandItem, {
+							value: opt.label,
+							"data-testid": getTestId?.("option", opt.value),
+							role: "option",
+							"aria-selected": isSelected,
+							"aria-checked": isSelected,
+							onSelect: () => toggle(opt.value),
+							children: [
+								(0, react_jsx_runtime.jsx)("span", {
+									className: require_use_theme.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 && (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconCheck, { className: "h-3.5 w-3.5" })
+								}),
+								Icon && (0, react_jsx_runtime.jsx)(Icon, {
+									className: "mr-2 h-4 w-4 text-muted-foreground",
+									"aria-hidden": "true"
+								}),
+								(0, react_jsx_runtime.jsxs)("span", {
+									className: "flex min-w-0 flex-1 flex-col text-left",
+									children: [(0, react_jsx_runtime.jsx)("span", { children: opt.label }), opt.summary !== void 0 && (0, react_jsx_runtime.jsx)("span", {
+										className: "text-xs text-muted-foreground",
+										children: opt.summary
+									})]
+								})
+							]
+						}, opt.value);
+					}) })
+				] }),
+				clearable && selected.size > 0 && (0, react_jsx_runtime.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 (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: presets.map((filter) => (0, react_jsx_runtime.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] = (0, react.useState)(false);
 	const [focusPath, setFocusPath] = (0, react.useState)(void 0);
 	const [externalRemoval, setExternalRemoval] = (0, react.useState)(void 0);
@@ -1582,6 +2308,11 @@ function FilterBuilder(props) {
 		setPinnedValue?.(next);
 	};
 	return (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		presets !== void 0 && presets.length > 0 && setPreset !== void 0 && (0, react_jsx_runtime.jsx)(PresetFilterControls, {
+			presets,
+			setPreset,
+			testIdBase
+		}),
 		(0, react_jsx_runtime.jsx)(PinnedFilterControls, {
 			pinnedFields,
 			value: pinnedValue,
@@ -1623,6 +2354,18 @@ Object.defineProperty(exports, "Badge", {
 		return Badge;
 	}
 });
+Object.defineProperty(exports, "DataTableFacetedFilter", {
+	enumerable: true,
+	get: function() {
+		return DataTableFacetedFilter;
+	}
+});
+Object.defineProperty(exports, "FacetedFilterPicker", {
+	enumerable: true,
+	get: function() {
+		return FacetedFilterPicker;
+	}
+});
 Object.defineProperty(exports, "FilterBadges", {
 	enumerable: true,
 	get: function() {
@@ -1647,12 +2390,36 @@ Object.defineProperty(exports, "FilterValueControl", {
 		return FilterValueControl;
 	}
 });
+Object.defineProperty(exports, "MetaPlaceholder", {
+	enumerable: true,
+	get: function() {
+		return MetaPlaceholder;
+	}
+});
 Object.defineProperty(exports, "PinnedFilterControls", {
 	enumerable: true,
 	get: function() {
 		return PinnedFilterControls;
 	}
 });
+Object.defineProperty(exports, "PresetFilterControls", {
+	enumerable: true,
+	get: function() {
+		return PresetFilterControls;
+	}
+});
+Object.defineProperty(exports, "ResolvedFieldDisplay", {
+	enumerable: true,
+	get: function() {
+		return ResolvedFieldDisplay;
+	}
+});
+Object.defineProperty(exports, "ResolvedFieldInput", {
+	enumerable: true,
+	get: function() {
+		return ResolvedFieldInput;
+	}
+});
 Object.defineProperty(exports, "Select", {
 	enumerable: true,
 	get: function() {
@@ -1761,29 +2528,65 @@ Object.defineProperty(exports, "badgeVariants", {
 		return badgeVariants;
 	}
 });
+Object.defineProperty(exports, "fieldDescription", {
+	enumerable: true,
+	get: function() {
+		return fieldDescription;
+	}
+});
 Object.defineProperty(exports, "formatDate", {
 	enumerable: true,
 	get: function() {
 		return formatDate;
 	}
 });
+Object.defineProperty(exports, "formatDateTime", {
+	enumerable: true,
+	get: function() {
+		return formatDateTime;
+	}
+});
 Object.defineProperty(exports, "formatNumber", {
 	enumerable: true,
 	get: function() {
 		return formatNumber;
 	}
 });
+Object.defineProperty(exports, "fromLocalDateTimeText", {
+	enumerable: true,
+	get: function() {
+		return fromLocalDateTimeText;
+	}
+});
 Object.defineProperty(exports, "loadLocale", {
 	enumerable: true,
 	get: function() {
 		return loadLocale;
 	}
 });
+Object.defineProperty(exports, "lowerLegacyField", {
+	enumerable: true,
+	get: function() {
+		return lowerLegacyField;
+	}
+});
 Object.defineProperty(exports, "saveLocale", {
 	enumerable: true,
 	get: function() {
 		return saveLocale;
 	}
 });
+Object.defineProperty(exports, "toLocalDateTimeText", {
+	enumerable: true,
+	get: function() {
+		return toLocalDateTimeText;
+	}
+});
+Object.defineProperty(exports, "useFieldMetaDiagnostic", {
+	enumerable: true,
+	get: function() {
+		return useFieldMetaDiagnostic;
+	}
+});
 
-//# sourceMappingURL=filter-builder-nXqtM_h4.cjs.map
+//# sourceMappingURL=filter-builder-DFu0JP-1.cjs.map