@burojs/ui-shadcn 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -1,22 +1,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_use_theme = require("./use-theme-DFlpXils.cjs");
-const require_toaster = require("./toaster-C7CiYA4Z.cjs");
-const require_check_confirm_dialog = require("./check-confirm-dialog-BRByTFpg.cjs");
+const require_toaster = require("./toaster-Cr51X7bz.cjs");
+const require_check_confirm_dialog = require("./check-confirm-dialog--gPFnEeg.cjs");
 const require_button = require("./button-BxnnE28H.cjs");
 const require_input = require("./input-BI0czGyI.cjs");
 const require_dialog = require("./dialog-DRNUq9EA.cjs");
-const require_search_access = require("./search-access-B7G5oR8n.cjs");
+const require_search_access = require("./search-access-Dugvttlg.cjs");
 const require_shell = require("./shell-DxhlsPwm.cjs");
 const require_skeleton = require("./skeleton-_1gP7wan.cjs");
-const require_place_node = require("./place-node-SIp4XYQH.cjs");
+const require_place_node = require("./place-node-C5SmIAYU.cjs");
 const require_layout_theme_storage_key = require("./layout/theme-storage-key.cjs");
-const require_resource_page_router = require("./resource-page-router-OSQyRA5b.cjs");
+const require_filter_builder = require("./filter-builder-nXqtM_h4.cjs");
+const require_resource_page_router = require("./resource-page-router-PXfMW9nh.cjs");
 const require_label = require("./label-w6JYf2cF.cjs");
-const require_filter_builder = require("./filter-builder-B3mZFL-K.cjs");
-const require_relation_picker = require("./relation-picker-Da_uhFvA.cjs");
-const require_lazy_relation_picker_dialog = require("./lazy-relation-picker-dialog-BfAGKzUG.cjs");
-const require_use_dialog_filter_state = require("./use-dialog-filter-state-BBCC0OEK.cjs");
-const require_peek_filter = require("./peek-filter-CnqHwTMU.cjs");
+const require_relation_picker = require("./relation-picker-gag0qSR5.cjs");
+const require_candidates_gate = require("./candidates-gate-D33jXLHO.cjs");
+const require_use_dialog_filter_state = require("./use-dialog-filter-state-Dhe8PcB5.cjs");
 let _burojs_core = require("@burojs/core");
 let _burojs_react = require("@burojs/react");
 let _tabler_icons_react = require("@tabler/icons-react");
@@ -1309,7 +1308,7 @@ function useLanguageSwitch() {
 		locale,
 		locales: (0, react.useMemo)(() => i18n?.locales?.() ?? [locale], [i18n, locale]),
 		change: (0, react.useCallback)((code) => {
-			require_toaster.saveLocale(code, storageKey);
+			require_filter_builder.saveLocale(code, storageKey);
 			changeLocale(code);
 		}, [changeLocale, storageKey])
 	};
@@ -1753,9 +1752,9 @@ function useNavTree(opts = {}) {
 	const topLevelCustomPages = allCustomPages.filter((p) => !p.section && !p.group).filter(pageAllowed).filter(passesEntryFilter);
 	const resourceHref = (def) => (0, _burojs_core.hrefFor)(app.registry, require_resource_page_router.canonicalResourceKey(def));
 	const resourceLabel = (def) => (0, _burojs_core.resolveResourceNavLabel)(caps, require_resource_page_router.canonicalResourceKey(def), def);
-	const pageLabel = (page) => (0, _burojs_core.resolveNavLabel)(caps, `pages.${require_resource_page_router.canonicalNavKey(page)}`, page.label);
-	const sectionLabel = (section) => (0, _burojs_core.resolveNavLabel)(caps, `sections.${require_resource_page_router.canonicalNavKey(section)}`, section.label);
-	const groupLabel = (group) => (0, _burojs_core.resolveNavLabel)(caps, `groups.${require_resource_page_router.canonicalNavKey(group)}`, group.label);
+	const pageLabel = (page) => (0, _burojs_core.resolveNavLabel)(caps, `pages.${require_resource_page_router.canonicalNavKey(page)}`, (0, _burojs_core.declaredText)("chrome", page, "label"));
+	const sectionLabel = (section) => (0, _burojs_core.resolveNavLabel)(caps, `sections.${require_resource_page_router.canonicalNavKey(section)}`, (0, _burojs_core.declaredText)("chrome", section, "label"));
+	const groupLabel = (group) => (0, _burojs_core.resolveNavLabel)(caps, `groups.${require_resource_page_router.canonicalNavKey(group)}`, (0, _burojs_core.declaredText)("chrome", group, "label"));
 	const pageEntry = (page) => {
 		const href = page.path;
 		return {
@@ -2046,7 +2045,7 @@ function SecondarySidebarLayout({ group, groupKey, items, children }) {
 	const RouterLink = require_toaster.useLinkComponent();
 	const caps = (0, _burojs_react.useI18nCaps)();
 	const id = groupKey ?? group.name;
-	const label = (0, _burojs_core.resolveNavLabel)(caps, `groups.${id}`, group.label);
+	const label = (0, _burojs_core.resolveNavLabel)(caps, `groups.${id}`, (0, _burojs_core.declaredText)("chrome", group, "label"));
 	return (0, react_jsx_runtime.jsxs)("div", {
 		className: "md:-m-6 md:flex md:min-h-[calc(100%+3rem)]",
 		"data-testid": `nav-secondary:${id}`,
@@ -2091,7 +2090,7 @@ function TabsLayout({ group, groupKey, items, children }) {
 	const RouterLink = require_toaster.useLinkComponent();
 	const caps = (0, _burojs_react.useI18nCaps)();
 	const id = groupKey ?? group.name;
-	const label = (0, _burojs_core.resolveNavLabel)(caps, `groups.${id}`, group.label);
+	const label = (0, _burojs_core.resolveNavLabel)(caps, `groups.${id}`, (0, _burojs_core.declaredText)("chrome", group, "label"));
 	return (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex flex-col gap-4",
 		"data-testid": `nav-tabs:${id}`,
@@ -2558,7 +2557,7 @@ function CommandPaletteNavigationGroups({ onSelect, getTestId }) {
 		navigate(href);
 	};
 	const resourceLabel = (def) => (0, _burojs_core.resolveResourceLabel)(caps, require_resource_page_router.canonicalResourceKey(def), "plural", def);
-	const pageLabel = (def) => (0, _burojs_core.resolveNavLabel)(caps, `pages.${require_resource_page_router.canonicalNavKey(def)}`, def.label);
+	const pageLabel = (def) => (0, _burojs_core.resolveNavLabel)(caps, `pages.${require_resource_page_router.canonicalNavKey(def)}`, (0, _burojs_core.declaredText)("chrome", def, "label"));
 	const groups = [];
 	if (topLevelResources.length > 0) groups.push((0, react_jsx_runtime.jsx)(require_search_access.CommandGroup, {
 		heading: t("commandPalette.resources", { defaultValue: "Resources" }),
@@ -2590,7 +2589,7 @@ function CommandPaletteNavigationGroups({ onSelect, getTestId }) {
 	}, "pages"));
 	for (const { section, children } of sectionGroups) {
 		const sectionKey = require_resource_page_router.canonicalNavKey(section);
-		const sectionLabel = (0, _burojs_core.resolveNavLabel)(caps, `sections.${sectionKey}`, section.label);
+		const sectionLabel = (0, _burojs_core.resolveNavLabel)(caps, `sections.${sectionKey}`, (0, _burojs_core.declaredText)("chrome", section, "label"));
 		groups.push((0, react_jsx_runtime.jsxs)(require_search_access.CommandGroup, {
 			heading: sectionLabel,
 			children: [(0, react_jsx_runtime.jsx)(require_search_access.CommandItem, {
@@ -2629,7 +2628,7 @@ function CommandPaletteNavigationGroups({ onSelect, getTestId }) {
 		const items = [];
 		if (!!resolveLayout(group.layout)) {
 			const groupKey = require_resource_page_router.canonicalNavKey(group);
-			const label = (0, _burojs_core.resolveNavLabel)(caps, `groups.${groupKey}`, group.label);
+			const label = (0, _burojs_core.resolveNavLabel)(caps, `groups.${groupKey}`, (0, _burojs_core.declaredText)("chrome", group, "label"));
 			const href = (0, _burojs_core.navHrefFor)(app.registry, groupKey, { isVisible });
 			items.push((0, react_jsx_runtime.jsx)(require_search_access.CommandItem, {
 				value: `group:${idPath}:${label}`,
@@ -2683,7 +2682,7 @@ function CommandPaletteNavigationGroups({ onSelect, getTestId }) {
 		const groupKey = require_resource_page_router.canonicalNavKey(group);
 		const items = collectGroupItems(group, groupKey, 0);
 		if (items.length === 0) continue;
-		const heading = (0, _burojs_core.resolveNavLabel)(caps, `groups.${groupKey}`, group.label);
+		const heading = (0, _burojs_core.resolveNavLabel)(caps, `groups.${groupKey}`, (0, _burojs_core.declaredText)("chrome", group, "label"));
 		groups.push((0, react_jsx_runtime.jsx)(require_search_access.CommandGroup, {
 			heading,
 			children: items
@@ -2855,6 +2854,7 @@ function PerResourceSearchHits({ def, displayField, query, pageSize, goTo, recor
 			page: 1,
 			pageSize
 		},
+		scope: "session",
 		enabled: shouldFetch
 	});
 	const report = useCommandPaletteResults(`records:${resource}`);
@@ -3226,7 +3226,6 @@ function localizedSchema(t) {
 function LoginForm({ onSubmit, title, description, className }) {
 	const tid = (0, _burojs_react.useTestIds)();
 	const t = (0, _burojs_react.useOptionalT)();
-	const locale = (0, _burojs_react.useLocale)();
 	const resolvedTitle = title ?? t("auth.signIn", { defaultValue: "Sign in" });
 	const { register, handleSubmit, formState: { errors, isSubmitting } } = (0, react_hook_form.useForm)({
 		resolver: (0, _hookform_resolvers_zod.zodResolver)(localizedSchema(t)),
@@ -3242,7 +3241,7 @@ function LoginForm({ onSubmit, title, description, className }) {
 			await onSubmit(values);
 		} catch (e) {
 			const raw = e instanceof Error ? e.message : String(e);
-			const friendly = require_toaster.toFriendlyError(raw, "", locale);
+			const friendly = require_toaster.toFriendlyError(raw, "", require_toaster.friendlyStringsFrom(t));
 			setSubmitError(friendly.replaced ? `${friendly.title}. ${friendly.detail}` : credentialsMessage(raw, t));
 		}
 	});
@@ -3434,7 +3433,7 @@ function EnumPicker({ enumName, value, onChange, renderAs = "select", name, id,
 					...ariaErrorMessage ? { "aria-errormessage": ariaErrorMessage } : {},
 					"data-testid": `${tid}:option:${entry.value}`,
 					className: "h-4 w-4"
-				}), (0, react_jsx_runtime.jsx)("span", { children: (0, _burojs_core.resolveEnumLabel)(caps, ns, entry.value, entry.label) })]
+				}), (0, react_jsx_runtime.jsx)("span", { children: (0, _burojs_core.resolveEnumLabel)(caps, ns, entry.value, (0, _burojs_core.enumValueText)(def, entry.value) ?? entry.label) })]
 			}, entry.value);
 		})
 	});
@@ -3455,7 +3454,7 @@ function EnumPicker({ enumName, value, onChange, renderAs = "select", name, id,
 				disabled,
 				onClick: () => onChange(entry.value),
 				className: require_use_theme.cn("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all", "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs", "disabled:pointer-events-none disabled:opacity-50", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"),
-				children: (0, _burojs_core.resolveEnumLabel)(caps, ns, entry.value, entry.label)
+				children: (0, _burojs_core.resolveEnumLabel)(caps, ns, entry.value, (0, _burojs_core.enumValueText)(def, entry.value) ?? entry.label)
 			}, entry.value);
 		})
 	});
@@ -3487,7 +3486,7 @@ function EnumPicker({ enumName, value, onChange, renderAs = "select", name, id,
 			"data-testid": `${tid}:option:__clear__`,
 			children: clearLabel
 		}), values.map((entry) => {
-			const optionLabel = (0, _burojs_core.resolveEnumLabel)(caps, ns, entry.value, entry.label);
+			const optionLabel = (0, _burojs_core.resolveEnumLabel)(caps, ns, entry.value, (0, _burojs_core.enumValueText)(def, entry.value) ?? entry.label);
 			const optionDoc = (0, _burojs_core.resolveDoc)(caps, `enum/${ns}/${entry.value}`)?.summary;
 			return (0, react_jsx_runtime.jsx)(require_filter_builder.SelectItem, {
 				value: entry.value,
@@ -3577,20 +3576,28 @@ function DateInput({ name, id, value, onChange, testid, disabled, required, aria
 function optionLabel(caps, field, value, inline) {
 	const ns = (0, _burojs_core.enumNamespaceOf)(field);
 	if (ns) return (0, _burojs_core.resolveEnumLabel)(caps, ns, value, inline);
-	return field ? (0, _burojs_core.resolveContentSlot)(caps, [(0, _burojs_core.fieldOptionKey)(field.name, value)], { default: inline }) : inline;
+	return field ? (0, _burojs_core.resolveFieldOptionLabel)(caps, field.name, value, inline) : inline;
+}
+function declaredOptionLabel(option, value, enumDef) {
+	return (enumDef === void 0 ? void 0 : (0, _burojs_core.enumValueText)(enumDef, value)) ?? (typeof option?.label === "string" ? option.label : value);
+}
+function useBoundEnum(field) {
+	const app = (0, _burojs_react.useOptionalApp)();
+	const namespace = (0, _burojs_core.enumNamespaceOf)(field);
+	return namespace === void 0 ? void 0 : app?.registry.enums.get(namespace);
 }
 function useOptionCaps(resource) {
 	return (0, _burojs_react.useI18nCaps)((0, react.useContext)(_burojs_react.ResourceContext).resource ?? resource);
 }
 function EnumDisplay({ value, options, field, resource }) {
 	const caps = useOptionCaps(resource);
+	const enumDef = useBoundEnum(field);
 	if (value == null || value === "") return (0, react_jsx_runtime.jsx)("span", {
 		className: "text-muted-foreground",
 		children: "—"
 	});
 	const opt = options?.find((o) => o.value === String(value));
-	const inline = typeof opt?.label === "string" ? opt.label : String(value);
-	const label = optionLabel(caps, field, String(value), inline);
+	const label = optionLabel(caps, field, String(value), declaredOptionLabel(opt, String(value), enumDef));
 	return (0, react_jsx_runtime.jsxs)("span", {
 		className: "inline-flex items-center gap-1",
 		children: [opt?.icon ? (0, react_jsx_runtime.jsx)(require_check_confirm_dialog.Icon, {
@@ -3602,6 +3609,7 @@ function EnumDisplay({ value, options, field, resource }) {
 function EnumInput({ name, id, value, onChange, testid, options, field, placeholder, disabled, required, ariaInvalid, ariaDescribedBy, ariaErrorMessage, resource }) {
 	const t = (0, _burojs_react.useOptionalT)();
 	const caps = useOptionCaps(resource);
+	const enumDef = useBoundEnum(field);
 	return (0, react_jsx_runtime.jsxs)(require_filter_builder.Select, {
 		value: value ?? "",
 		onValueChange: onChange,
@@ -3623,7 +3631,7 @@ function EnumInput({ name, id, value, onChange, testid, options, field, placehol
 				children: [o.icon ? (0, react_jsx_runtime.jsx)(require_check_confirm_dialog.Icon, {
 					name: o.icon,
 					className: "size-3.5 shrink-0 text-muted-foreground"
-				}) : null, optionLabel(caps, field, o.value, typeof o.label === "string" ? o.label : o.value)]
+				}) : null, optionLabel(caps, field, o.value, declaredOptionLabel(o, o.value, enumDef))]
 			})
 		}, o.value)) })]
 	});
@@ -3996,6 +4004,7 @@ function JsonDisplay({ value, presentation, testid }) {
 	});
 }
 function JsonInput({ name, id, value, onChange, testid, disabled, required, ariaInvalid, ariaDescribedBy, ariaErrorMessage }) {
+	const t = (0, _burojs_react.useOptionalT)();
 	const seed = react.useMemo(() => {
 		if (value == null || value === "") return "";
 		return require_place_node.toDisplayText(value).text;
@@ -4039,13 +4048,13 @@ function JsonInput({ name, id, value, onChange, testid, disabled, required, aria
 		}), invalid && (0, react_jsx_runtime.jsx)("p", {
 			className: "text-[13px] leading-snug text-destructive",
 			"data-testid": `${testid}-json-error`,
-			children: "Некорректный JSON — изменения не будут сохранены, пока он не станет валидным."
+			children: t("field.jsonInvalid", { defaultValue: "Invalid JSON. Changes will not be saved until it is valid." })
 		})]
 	});
 }
 //#endregion
 //#region src/fields/lazy-relation-many.tsx
-const RelationManyPickerInput = (0, react.lazy)(() => Promise.resolve().then(() => require("./relation-many-picker-B-NCEUgX.cjs")).then((module) => ({ default: module.RelationManyPickerInput })));
+const RelationManyPickerInput = (0, react.lazy)(() => Promise.resolve().then(() => require("./relation-many-picker-C8zFEjwd.cjs")).then((module) => ({ default: module.RelationManyPickerInput })));
 function LazyRelationManyInput(props) {
 	return (0, react_jsx_runtime.jsx)(react.Suspense, {
 		fallback: (0, react_jsx_runtime.jsx)(require_skeleton.Skeleton, {
@@ -4156,6 +4165,192 @@ function NumberInput({ name, id, value, onChange, testid, placeholder, disabled,
 	});
 }
 //#endregion
+//#region src/fields/link-keys-display.tsx
+const isRecord$1 = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+function qualify(name, owner) {
+	try {
+		const namespace = (0, _burojs_core.normalizeEntityRef)(owner).namespace;
+		const ref = (0, _burojs_core.normalizeEntityRef)(name, { defaultNamespace: namespace });
+		return ref.namespace === "default" ? ref.id : `${ref.namespace}:${ref.id}`;
+	} catch {
+		return;
+	}
+}
+function idFieldOf(def) {
+	const declared = (def?.data)?.idField;
+	return typeof declared === "string" && declared.length > 0 ? declared : "id";
+}
+function byOf(field) {
+	const by = isRecord$1(field) && isRecord$1(field.meta) ? field.meta.by : void 0;
+	return typeof by === "string" && by.length > 0 ? by : void 0;
+}
+const chipClassName = "inline-flex items-center rounded-md border border-border bg-muted/40 px-1.5 py-0.5 text-xs";
+function LinkKeysDisplay(props) {
+	const { field, record } = props;
+	const owner = props.owner ?? props.resource ?? "";
+	const name = field?.name ?? "";
+	const app = (0, _burojs_react.useApp)();
+	const t = (0, _burojs_react.useOptionalT)();
+	const tid = (0, _burojs_react.useTestIds)();
+	const ownerDef = owner === "" ? void 0 : app.registry.get(owner);
+	const declaration = ownerDef === void 0 ? void 0 : (0, _burojs_core.declaredField)(ownerDef, name);
+	const link = isRecord$1(declaration) ? (0, _burojs_core.linkOf)(declaration) : void 0;
+	const junctionName = link === void 0 ? void 0 : qualify(link.junction, owner);
+	const junctionDef = junctionName === void 0 ? void 0 : app.registry.get(junctionName);
+	const junctionField = (key) => junctionDef === void 0 ? void 0 : (0, _burojs_core.declaredField)(junctionDef, key);
+	const ownerField = link === void 0 ? idFieldOf(ownerDef) : byOf(junctionField(link.sourceKey)) ?? idFieldOf(ownerDef);
+	const targetBy = link === void 0 ? void 0 : byOf(junctionField(link.targetKey));
+	const ownerKey = record?.[ownerField];
+	const { keys, complete, isLoading, error } = (0, _burojs_react.useLinkKeys)(owner, name, ownerKey);
+	const [missed, setMissed] = (0, react.useState)(() => new Set());
+	const onMiss = (0, react.useCallback)((key, miss) => {
+		setMissed((current) => {
+			if (current.has(key) === miss) return current;
+			const next = new Set(current);
+			if (miss) next.add(key);
+			else next.delete(key);
+			return next;
+		});
+	}, []);
+	const target = (isRecord$1(declaration) && isRecord$1(declaration.meta) ? declaration.meta.to : void 0) ?? field?.meta?.to;
+	const chipField = (0, react.useMemo)(() => ({
+		name,
+		meta: {
+			...target === void 0 ? {} : { to: target },
+			...targetBy === void 0 ? {} : { by: targetBy }
+		},
+		...field?.ui === void 0 ? {} : { ui: field.ui }
+	}), [
+		name,
+		target,
+		field?.ui,
+		targetBy
+	]);
+	const chipsId = tid.linkChips(owner, name);
+	if (error) return (0, react_jsx_runtime.jsx)("span", {
+		"data-testid": tid.linkError(owner, name),
+		role: "status",
+		className: "text-destructive text-xs",
+		title: error.message,
+		children: t("fields.link.failed", { defaultValue: "Links could not be loaded" })
+	});
+	if (keys === void 0) {
+		if (!isLoading) return (0, react_jsx_runtime.jsx)("span", {
+			"data-testid": "relation-many-display:empty",
+			className: "text-muted-foreground",
+			children: "—"
+		});
+		return (0, react_jsx_runtime.jsx)("span", {
+			"data-testid": `${chipsId}:loading`,
+			className: "inline-block h-5 w-20 animate-pulse rounded bg-muted",
+			"aria-busy": "true"
+		});
+	}
+	if (!complete) return (0, react_jsx_runtime.jsx)("span", {
+		"data-testid": chipsId,
+		className: "inline-flex flex-wrap gap-1",
+		children: (0, react_jsx_runtime.jsx)("span", {
+			"data-testid": tid.linkIncomplete(owner, name),
+			className: "text-muted-foreground",
+			children: t("fields.link.incomplete", {
+				count: keys.length,
+				defaultValue: "More than {{count}} links"
+			})
+		})
+	});
+	if (keys.length === 0) return (0, react_jsx_runtime.jsx)("span", {
+		"data-testid": "relation-many-display:empty",
+		className: "text-muted-foreground",
+		children: "—"
+	});
+	const hidden = keys.filter((key) => missed.has(String(key))).length;
+	return (0, react_jsx_runtime.jsxs)("span", {
+		"data-testid": chipsId,
+		className: "inline-flex flex-wrap gap-1",
+		children: [keys.map((key) => (0, react_jsx_runtime.jsx)(LinkChip, {
+			value: key,
+			field: chipField,
+			onMiss
+		}, String(key))), hidden > 0 ? (0, react_jsx_runtime.jsx)("span", {
+			"data-testid": tid.linkHidden(owner, name),
+			className: `${chipClassName} text-muted-foreground`,
+			children: t("fields.link.hidden", {
+				count: hidden,
+				defaultValue: "{{count}} not visible"
+			})
+		}) : null]
+	});
+}
+function LinkChip({ value, field, onMiss }) {
+	const gate = (0, _burojs_react.useEntryGate)();
+	const meta = field.meta;
+	let to;
+	try {
+		to = meta?.to === void 0 ? void 0 : (0, _burojs_core.resourceKey)(meta.to);
+	} catch {
+		to = void 0;
+	}
+	const answer = to === void 0 ? void 0 : gate(to, "show");
+	if (!(to !== void 0 && answer !== void 0 && answer.state !== "undecided" && answer.state !== "hidden" && answer.state !== "disabled")) return (0, react_jsx_runtime.jsx)("span", {
+		className: chipClassName,
+		children: (0, react_jsx_runtime.jsx)(require_search_access.RelationDisplay, {
+			value,
+			field
+		})
+	});
+	return (0, react_jsx_runtime.jsx)(ReadChip, {
+		to,
+		value,
+		field,
+		onMiss
+	});
+}
+function ReadChip({ to, value, field, onMiss }) {
+	const app = (0, _burojs_react.useApp)();
+	const by = field.meta?.by;
+	const { record, isLoading, error, ambiguous } = (0, _burojs_react.useRelatedRecord)(to, value, typeof by === "string" ? { by } : void 0);
+	const miss = app.registry.get(to) !== void 0 && !isLoading && !error && !ambiguous && !record;
+	const key = String(value);
+	(0, react.useEffect)(() => {
+		onMiss(key, miss);
+	}, [
+		onMiss,
+		key,
+		miss
+	]);
+	(0, react.useEffect)(() => () => onMiss(key, false), [onMiss, key]);
+	if (miss) return null;
+	return (0, react_jsx_runtime.jsx)("span", {
+		className: chipClassName,
+		children: (0, react_jsx_runtime.jsx)(require_search_access.RelationDisplay, {
+			value,
+			field
+		})
+	});
+}
+function RelationManyDisplay(props) {
+	const app = (0, _burojs_react.useApp)();
+	const owner = props.owner ?? props.resource ?? "";
+	const ownerDef = owner === "" ? void 0 : app.registry.get(owner);
+	const declared = ownerDef === void 0 || props.field?.name === void 0 ? void 0 : (0, _burojs_core.declaredField)(ownerDef, props.field.name);
+	if (isRecord$1(declared) && (0, _burojs_core.linkOf)(declared) !== void 0) return (0, react_jsx_runtime.jsx)(LinkKeysDisplay, { ...props });
+	const { value, field } = props;
+	const keys = Array.isArray(value) ? value : [];
+	if (keys.length === 0) return (0, react_jsx_runtime.jsx)("span", {
+		"data-testid": "relation-many-display:empty",
+		className: "text-muted-foreground",
+		children: "—"
+	});
+	return (0, react_jsx_runtime.jsx)("span", {
+		className: "inline-flex flex-wrap gap-x-2",
+		"data-testid": "relation-many-display",
+		children: keys.map((key, index) => (0, react_jsx_runtime.jsx)(require_search_access.RelationDisplay, {
+			value: key,
+			field
+		}, `${String(key)}:${index}`))
+	});
+}
+//#endregion
 //#region src/fields/relation-meta-schema.ts
 const isRecord = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
 const relationMetaSchema = Object.freeze({ "~standard": Object.freeze({
@@ -4287,20 +4482,28 @@ function TextareaInput({ name, id, value, onChange, testid, placeholder, disable
 //#region src/fields/default-renderers.ts
 function legacyField(props) {
 	const name = typeof props.path.at(-1) === "string" ? props.path.at(-1) : "field";
+	const texts = props.field.texts;
 	return Object.freeze({
 		name,
 		meta: props.meta,
 		ui: props.ui,
-		codec: props.field.codec
+		codec: props.field.codec,
+		...texts === void 0 ? {} : { texts }
 	});
 }
-function legacyOptions(options) {
+function legacyOptions(options, field) {
 	if (options.length === 0) return void 0;
-	return options.map((option) => Object.freeze({
-		value: String(option.value ?? ""),
-		label: option.label,
-		...typeof option.meta?.icon === "string" ? { icon: option.meta.icon } : {}
-	}));
+	return options.map((option) => {
+		const value = String(option.value ?? "");
+		return Object.freeze({
+			value,
+			label: (0, _burojs_core.fieldOptionText)(field, value) ?? value,
+			...typeof option.meta?.icon === "string" ? { icon: option.meta.icon } : {}
+		});
+	});
+}
+function registryKey(ref) {
+	return ref.namespace === "default" ? ref.id : (0, _burojs_core.formatEntityRef)(ref);
 }
 function display(renderer) {
 	return function ShadcnDisplay(props) {
@@ -4308,8 +4511,9 @@ function display(renderer) {
 			value: props.value,
 			multiple: props.multiple,
 			field: legacyField(props),
-			options: legacyOptions(props.options),
+			options: legacyOptions(props.options, props.field),
 			resource: props.resource.id,
+			owner: registryKey(props.resource),
 			record: props.record,
 			presentation: props.presentation,
 			testid: props.testIds.display
@@ -4334,7 +4538,7 @@ function input(renderer) {
 			multiple: props.multiple,
 			onChange: props.onChange ?? (() => void 0),
 			testid: props.testIds.input,
-			options: legacyOptions(props.options),
+			options: legacyOptions(props.options, props.field),
 			placeholder: typeof props.ui.placeholder === "string" ? props.ui.placeholder : void 0,
 			disabled: props.disabled,
 			required: props.field.required === true,
@@ -4475,7 +4679,7 @@ const rich = {
 	Input: LazyRichTextInput
 };
 const relationMany = collection({
-	Display: require_search_access.RelationManyDisplay,
+	Display: RelationManyDisplay,
 	Input: LazyRelationManyInput
 });
 const shadcnFieldImplementations = Object.freeze({
@@ -4508,6 +4712,313 @@ const shadcnFieldImplementations = Object.freeze({
 	file: scalarOrCollection(file, { size: "full" })
 });
 //#endregion
+//#region src/fields/use-relation-picker.tsx
+const noop = () => void 0;
+function safeKey(input) {
+	if (input === void 0 || input === null) return void 0;
+	try {
+		return (0, _burojs_core.resourceKey)(input);
+	} catch {
+		return;
+	}
+}
+function sessionIdentity(runtime) {
+	const state = runtime.dataSession.getState();
+	const snapshot = state.status === "ready" ? state.snapshot : state.target;
+	let scopeKey;
+	try {
+		scopeKey = JSON.stringify(snapshot.scopeKey) ?? "";
+	} catch {
+		scopeKey = String(snapshot.scopeKey);
+	}
+	return {
+		sessionKey: snapshot.sessionKey,
+		scopeKey
+	};
+}
+function PickerHost(props) {
+	const { register } = props;
+	react.useEffect(() => register(), [register]);
+	return (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: props.children });
+}
+function useRelationPicker(options) {
+	const app = (0, _burojs_react.useApp)();
+	const runtime = (0, _burojs_react.useDataRuntime)();
+	const frame = (0, _burojs_react.useOptionalRecordFrame)();
+	const frames = (0, _burojs_react.useRecordScopeFrames)();
+	const multiple = options.multiple === true;
+	const fieldName = options.field;
+	let to;
+	let declaredBy;
+	let declaredCandidates;
+	if (fieldName !== void 0) {
+		const meta = ((frame === null ? void 0 : app.registry.get(frame.resource)?.fields)?.[fieldName])?.meta;
+		to = safeKey(meta?.to);
+		declaredBy = typeof meta?.by === "string" ? meta.by : void 0;
+		declaredCandidates = Array.isArray(meta?.candidates) ? meta.candidates : void 0;
+	} else to = safeKey(options.to);
+	const target = to ?? "";
+	const by = options.valueField ?? declaredBy;
+	const scope = options.scope ?? "context";
+	const selection = require_candidates_gate.useCandidateSelection({
+		to,
+		candidates: options.candidates ?? declaredCandidates,
+		sources: frame?.controller.sources,
+		resource: frame?.resource ?? "",
+		fieldName: fieldName ?? target,
+		fixedFilters: options.fixedFilters
+	});
+	const held = selection.gate !== void 0;
+	const pendingRef = react.useRef(null);
+	const [active, setActive] = react.useState(null);
+	const activeRef = react.useRef(null);
+	activeRef.current = active;
+	const rowsRef = react.useRef(new Map());
+	const createdRowRef = react.useRef(void 0);
+	const alive = react.useRef(true);
+	const mounts = react.useRef(0);
+	const sequence = react.useRef(0);
+	const latest = react.useRef({
+		multiple,
+		select: options.select,
+		idField: "id",
+		valueField: "id",
+		available: false,
+		frames
+	});
+	const project = react.useCallback((row) => {
+		const select = latest.current.select;
+		if (select === void 0) return { ...row };
+		const out = {};
+		const key = row.id !== void 0 ? row.id : row[latest.current.idField];
+		if (key !== void 0) out.id = key;
+		const { valueField } = latest.current;
+		if (Object.hasOwn(row, valueField)) out[valueField] = row[valueField];
+		for (const name of select) if (Object.hasOwn(row, name)) out[name] = row[name];
+		return out;
+	}, []);
+	const settle = react.useCallback((result) => {
+		const pending = pendingRef.current;
+		if (pending === null) return;
+		pendingRef.current = null;
+		pending.detach();
+		if (alive.current) setActive(null);
+		pending.resolve(result);
+	}, []);
+	const toggle = react.useCallback((key, row) => {
+		setActive((current) => {
+			if (current === null) return current;
+			const has = current.selected.some((k) => String(k) === String(key));
+			if (has) rowsRef.current.delete(String(key));
+			else if (row !== void 0) rowsRef.current.set(String(key), row);
+			const selected = has ? current.selected.filter((k) => String(k) !== String(key)) : [...current.selected, key];
+			const next = {
+				...current,
+				selected
+			};
+			activeRef.current = next;
+			return next;
+		});
+	}, []);
+	const onValue = react.useCallback((value) => {
+		const row = createdRowRef.current;
+		createdRowRef.current = void 0;
+		if (latest.current.multiple) {
+			const current = activeRef.current;
+			if (current !== null && !current.selected.some((k) => String(k) === String(value))) toggle(value, row);
+			return;
+		}
+		settle({
+			kind: "selected",
+			keys: [value],
+			rows: row === void 0 ? [] : [project(row)]
+		});
+	}, [
+		project,
+		settle,
+		toggle
+	]);
+	const wiring = require_relation_picker.useRelationSelect({
+		to: target,
+		by,
+		fixedFilters: selection.fixedFilters,
+		scope,
+		...fieldName === void 0 ? {} : { scopeField: fieldName },
+		held,
+		onValue
+	});
+	latest.current = {
+		multiple,
+		select: options.select,
+		idField: wiring.idField,
+		valueField: wiring.valueField,
+		available: to !== void 0 && wiring.targetDef !== void 0 && !held,
+		frames
+	};
+	const { create: shared } = wiring;
+	const create = react.useMemo(() => ({
+		...shared,
+		start: (openCreate) => shared.start(() => {
+			const opened = openCreate();
+			opened.then((row) => {
+				createdRowRef.current = row === null ? void 0 : { ...row };
+			}, noop);
+			return opened;
+		})
+	}), [shared]);
+	react.useEffect(() => runtime.dataSession.subscribe(() => {
+		const pending = pendingRef.current;
+		if (pending === null) return;
+		const now = sessionIdentity(runtime);
+		if (now.sessionKey !== pending.sessionKey || now.scopeKey !== pending.scopeKey) settle({
+			kind: "cancelled",
+			reason: "session-changed"
+		});
+	}), [runtime, settle]);
+	react.useEffect(() => {
+		alive.current = true;
+		return () => {
+			alive.current = false;
+			settle({
+				kind: "cancelled",
+				reason: "unmounted"
+			});
+		};
+	}, [settle]);
+	react.useEffect(() => {
+		if (held) settle({
+			kind: "cancelled",
+			reason: "unavailable"
+		});
+	}, [held, settle]);
+	const register = react.useCallback(() => {
+		mounts.current += 1;
+		return () => {
+			mounts.current -= 1;
+			if (mounts.current === 0) settle({
+				kind: "cancelled",
+				reason: "unmounted"
+			});
+		};
+	}, [settle]);
+	const open = react.useCallback((opts = {}) => new Promise((resolve) => {
+		settle({
+			kind: "cancelled",
+			reason: "superseded"
+		});
+		if (mounts.current === 0) {
+			if (process.env.NODE_ENV !== "production") console.error("[burojs] useRelationPicker: open() was called but its element is not rendered — render `handle.element` once in your tree.");
+			resolve({
+				kind: "cancelled",
+				reason: "not-mounted"
+			});
+			return;
+		}
+		const { signal } = opts;
+		if (signal?.aborted === true) {
+			resolve({
+				kind: "cancelled",
+				reason: "aborted"
+			});
+			return;
+		}
+		if (!latest.current.available) {
+			resolve({
+				kind: "cancelled",
+				reason: "unavailable"
+			});
+			return;
+		}
+		sequence.current += 1;
+		const id = sequence.current;
+		const onAbort = () => {
+			if (pendingRef.current?.id === id) settle({
+				kind: "cancelled",
+				reason: "aborted"
+			});
+		};
+		signal?.addEventListener("abort", onAbort, { once: true });
+		pendingRef.current = {
+			id,
+			...sessionIdentity(runtime),
+			resolve,
+			detach: () => signal?.removeEventListener("abort", onAbort)
+		};
+		rowsRef.current = new Map();
+		createdRowRef.current = void 0;
+		const next = {
+			id,
+			frames: latest.current.frames,
+			selected: opts.selected ?? []
+		};
+		activeRef.current = next;
+		setActive(next);
+	}), [runtime, settle]);
+	const onSelectRow = react.useCallback((row) => {
+		const field = wiring.valueField;
+		const value = field === "id" ? row.id : row[field];
+		if (typeof value !== "string" && typeof value !== "number") return;
+		settle({
+			kind: "selected",
+			keys: [value],
+			rows: [project(row)]
+		});
+	}, [
+		wiring.valueField,
+		settle,
+		project
+	]);
+	const onDone = react.useCallback(() => {
+		const keys = activeRef.current?.selected ?? [];
+		const rows = keys.flatMap((key) => {
+			const row = rowsRef.current.get(String(key));
+			return row === void 0 ? [] : [project(row)];
+		});
+		settle({
+			kind: "selected",
+			keys,
+			rows
+		});
+	}, [settle, project]);
+	const onOpenChange = react.useCallback((next) => {
+		if (!next) settle({
+			kind: "cancelled",
+			reason: "dismissed"
+		});
+	}, [settle]);
+	return {
+		open,
+		element: (0, react_jsx_runtime.jsx)(PickerHost, {
+			register,
+			children: active === null || held ? null : (0, react_jsx_runtime.jsxs)(_burojs_react.RecordScopeChain, {
+				frames: active.frames,
+				children: [(0, react_jsx_runtime.jsx)(require_candidates_gate.LazyRelationPickerDialog, {
+					to: target,
+					open: true,
+					onOpenChange,
+					onSelect: noop,
+					onSelectRow,
+					valueField: wiring.valueField,
+					...selection.fixedFilters === void 0 ? {} : { fixedFilters: selection.fixedFilters },
+					scope,
+					...fieldName === void 0 ? {} : { scopeField: fieldName },
+					...options.create === void 0 ? {} : {
+						create,
+						...options.create.seeds === void 0 ? {} : { createSeeds: options.create.seeds }
+					},
+					fieldName: fieldName ?? target,
+					...multiple ? {
+						multiple: true,
+						selected: active.selected,
+						onToggle: (value, row) => toggle(value, row),
+						onDone
+					} : {}
+				}), wiring.reader]
+			}, active.id)
+		})
+	};
+}
+//#endregion
 //#region src/forms/declarative-display.tsx
 function DeclarativeDisplay(props) {
 	return (0, react_jsx_runtime.jsx)(_burojs_react.ScreenStateProvider, { children: (0, react_jsx_runtime.jsx)(DisplayBody, { ...props }) });
@@ -4563,7 +5074,7 @@ function EnumDisplay$1({ enumName, value, variant = "badge", testid, className }
 		children: value
 	});
 	const entry = values?.find((v) => v.value === value);
-	const label = entry === void 0 && def?.fallback ? (0, _burojs_core.resolveContentSlot)(caps, [(0, _burojs_core.enumFallbackKey)(ns)], { default: def.fallback.label }) ?? value : (0, _burojs_core.resolveEnumLabel)(caps, ns, value, entry?.label);
+	const label = entry === void 0 && (def?.fallback !== void 0 || (0, _burojs_core.enumFallbackText)(def) !== void 0) ? (0, _burojs_core.resolveContentSlot)(caps, [(0, _burojs_core.enumFallbackKey)(ns)], { default: (0, _burojs_core.enumFallbackText)(def) }) ?? value : (0, _burojs_core.resolveEnumLabel)(caps, ns, value, (0, _burojs_core.enumValueText)(def, value) ?? entry?.label);
 	const icon = entry?.icon;
 	if (variant === "icon-label") return (0, react_jsx_runtime.jsxs)("span", {
 		"data-testid": id,
@@ -4883,7 +5394,11 @@ const OPERATOR_LABELS = {
 	null: "is null",
 	nnull: "is not null",
 	startswith: "starts with",
-	endswith: "ends with"
+	endswith: "ends with",
+	has: "has",
+	hasAny: "has any of",
+	hasAll: "has all of",
+	hasNone: "has none of"
 };
 function formatOperatorLabel(op, t) {
 	return t ? t(`filters.operators.${op}`, { defaultValue: OPERATOR_LABELS[op] }) : OPERATOR_LABELS[op];
@@ -5138,7 +5653,7 @@ function peekFields(def, columns, capabilityFor, fieldVisible = () => true) {
 	for (const name of columns) {
 		if (out.length === 5) break;
 		if (name === def.displayField || out.includes(name) || !record.has(name)) continue;
-		if (!require_peek_filter.peekLeafAllowed(def, name, capabilityFor, fieldVisible) || relation(require_peek_filter.peekFieldDefinition(def, name))) continue;
+		if (!require_place_node.peekLeafAllowed(def, name, capabilityFor, fieldVisible) || relation(require_place_node.peekFieldDefinition(def, name))) continue;
 		out.push(name);
 	}
 	return Object.freeze(out);
@@ -5205,6 +5720,7 @@ function PeekByKey({ target, by }) {
 			page: 1,
 			pageSize: 2
 		},
+		scope: "none",
 		enabled: by.key !== "",
 		retry: false
 	});
@@ -5325,7 +5841,7 @@ function PeekRecord({ target, testid, row }) {
 	]);
 	const access = (0, _burojs_react.useFieldAccess)(target, "record", dto);
 	const fieldVisible = (0, react.useCallback)((name) => access[name]?.view === "visible", [access]);
-	const record = (0, react.useMemo)(() => require_peek_filter.peekRecord(def, dto, idField, capabilityFor, fieldVisible), [
+	const record = (0, react.useMemo)(() => require_place_node.peekRecord(def, dto, idField, capabilityFor, fieldVisible), [
 		dto,
 		def,
 		idField,
@@ -5336,7 +5852,7 @@ function PeekRecord({ target, testid, row }) {
 		if (def === void 0 || screen === void 0) return record;
 		const drawn = new Set();
 		for (const node of screen.nodes) if (node.kind === "field" && node.field !== void 0) drawn.add(node.field);
-		return require_peek_filter.peekRow(def, dto, idField, capabilityFor, fieldVisible, drawn);
+		return require_place_node.peekRow(def, dto, idField, capabilityFor, fieldVisible, drawn);
 	}, [
 		def,
 		screen,
@@ -5418,7 +5934,7 @@ function DeclaredPeekBody({ target, testid, record, frameRecord, def, capability
 	const compiled = controller.screen;
 	const hidden = (0, react.useMemo)(() => {
 		const out = new Set();
-		for (const entry of compiled?.fields ?? []) if (def === void 0 || !require_peek_filter.peekLeafAllowed(def, entry.name, capabilityFor, fieldVisible)) out.add(entry.name);
+		for (const entry of compiled?.fields ?? []) if (def === void 0 || !require_place_node.peekLeafAllowed(def, entry.name, capabilityFor, fieldVisible)) out.add(entry.name);
 		return out;
 	}, [
 		compiled,
@@ -5521,14 +6037,14 @@ function DefaultPeekBody({ target, testid, row, open }) {
 		}), columns.length === 0 ? null : (0, react_jsx_runtime.jsx)("dl", {
 			className: "grid gap-1.5",
 			children: columns.map((name) => {
-				const field = require_peek_filter.peekFieldDefinition(def, name);
+				const field = require_place_node.peekFieldDefinition(def, name);
 				const value = record[name];
 				return (0, react_jsx_runtime.jsxs)("div", {
 					"data-testid": `${testid}:field:${name}`,
 					className: "flex min-w-0 items-baseline gap-2 text-sm",
 					children: [(0, react_jsx_runtime.jsx)("dt", {
 						className: "w-24 shrink-0 truncate text-xs text-muted-foreground",
-						children: (0, _burojs_core.resolveFieldLabel)(caps, name, field?.label)
+						children: (0, _burojs_core.resolveFieldLabel)(caps, name, (0, _burojs_core.declaredText)("field", field, "label"))
 					}), (0, react_jsx_runtime.jsx)("dd", {
 						className: "min-w-0 break-words",
 						children: (0, react_jsx_runtime.jsx)(require_place_node.ResolvedFieldDisplay, {
@@ -5549,6 +6065,12 @@ function DefaultPeekBody({ target, testid, row, open }) {
 //#region src/quick/quick-body.tsx
 const EMPTY_ROUTE = Object.freeze({});
 function QuickBody({ entry }) {
+	return (0, react_jsx_runtime.jsx)(_burojs_react.RecordScopeChain, {
+		frames: entry.scopeFrames ?? _burojs_react.NO_RECORD_SCOPE_FRAMES,
+		children: (0, react_jsx_runtime.jsx)(QuickBodyOf, { entry })
+	});
+}
+function QuickBodyOf({ entry }) {
 	if (entry.mode === "create") return (0, react_jsx_runtime.jsx)(QuickScreenOf, {
 		entry,
 		route: EMPTY_ROUTE
@@ -6431,7 +6953,6 @@ exports.ContextPicker = ContextPicker;
 exports.CopyId = require_place_node.CopyId;
 exports.CreateButton = require_place_node.CreateButton;
 exports.CursorLoadMore = require_place_node.CursorLoadMore;
-exports.DEFAULT_LANGUAGE = require_toaster.DEFAULT_LANGUAGE;
 exports.DEFAULT_LANGUAGE_STORAGE_KEY = _burojs_react.DEFAULT_LANGUAGE_STORAGE_KEY;
 exports.DataTable = require_place_node.DataTable;
 exports.DataTableDateRangeFilter = DataTableDateRangeFilter;
@@ -6515,6 +7036,7 @@ exports.Label = require_label.Label;
 exports.LanguageSubmenu = LanguageSubmenu;
 exports.LanguageSwitch = LanguageSwitch;
 exports.LinkComponentProvider = require_toaster.LinkComponentProvider;
+exports.LinkKeysDisplay = LinkKeysDisplay;
 exports.ListBody = require_place_node.ListBody;
 exports.ListBulkBar = require_place_node.ListBulkBar;
 exports.ListColumns = require_place_node.ListColumns;
@@ -6555,9 +7077,9 @@ exports.RecordTitle = require_place_node.RecordTitle;
 exports.RefreshButton = RefreshButton;
 exports.RelationDisplay = require_search_access.RelationDisplay;
 exports.RelationField = require_search_access.RelationField;
-exports.RelationManyDisplay = require_search_access.RelationManyDisplay;
+exports.RelationManyDisplay = RelationManyDisplay;
 exports.RelationPicker = require_relation_picker.RelationPicker;
-exports.RelationPickerDialog = require_lazy_relation_picker_dialog.LazyRelationPickerDialog;
+exports.RelationPickerDialog = require_candidates_gate.LazyRelationPickerDialog;
 exports.RelationPickerInput = require_relation_picker.RelationPickerInput;
 exports.ResourceList = require_place_node.ResourceList;
 exports.ResourceListPage = require_resource_page_router.ResourceListPage;
@@ -6655,8 +7177,7 @@ exports.i18nPrefixToRef = _burojs_core.i18nPrefixToRef;
 exports.isImage = _burojs_file_storage.isImage;
 exports.layoutSlot = require_resource_page_router.layoutSlot;
 exports.listSlot = require_check_confirm_dialog.listSlot;
-exports.loadLanguage = require_toaster.loadLanguage;
-exports.loadLocale = require_toaster.loadLocale;
+exports.loadLocale = require_filter_builder.loadLocale;
 exports.localeLabel = localeLabel;
 Object.defineProperty(exports, "modeForSurface", {
 	enumerable: true,
@@ -6669,8 +7190,7 @@ exports.registerIcons = require_check_confirm_dialog.registerIcons;
 exports.relationLinkClassName = require_search_access.relationLinkClassName;
 exports.resolveNavIcon = resolveNavIcon;
 exports.resolveUpdater = require_place_node.resolveUpdater;
-exports.saveLanguage = require_toaster.saveLanguage;
-exports.saveLocale = require_toaster.saveLocale;
+exports.saveLocale = require_filter_builder.saveLocale;
 exports.shadcnBlockImplementations = require_place_node.shadcnBlockImplementations;
 exports.shadcnFieldImplementations = shadcnFieldImplementations;
 exports.shadcnPresentationHosts = shadcnPresentationHosts;
@@ -6701,6 +7221,7 @@ exports.useNavVisible = require_resource_page_router.useNavVisible;
 exports.useOptionalSidebar = useOptionalSidebar;
 exports.usePaletteState = require_place_node.usePaletteState;
 exports.usePresentationCopy = usePresentationCopy;
+exports.useRelationPicker = useRelationPicker;
 exports.useShell = require_place_node.useShell;
 exports.useSidebar = useSidebar;
 exports.useTheme = require_use_theme.useTheme;