@burojs/ui-shadcn 0.6.0 → 0.8.0

package/dist/{search-access-Dugvttlg.cjs → relation-create-DDEYcKfw.cjs}

@@ -1,6 +1,7 @@
 const require_use_theme = require("./use-theme-DFlpXils.cjs");
-const require_toaster = require("./toaster-Cr51X7bz.cjs");
-const require_dialog = require("./dialog-DRNUq9EA.cjs");
+const require_toaster = require("./toaster-BbByOytP.cjs");
+const require_button = require("./button-BxnnE28H.cjs");
+const require_dialog = require("./dialog-vmMdfUWs.cjs");
 let _burojs_core = require("@burojs/core");
 let _burojs_react = require("@burojs/react");
 let _tabler_icons_react = require("@tabler/icons-react");
@@ -8,6 +9,7 @@ let react = require("react");
 react = require_use_theme.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let cmdk = require("cmdk");
+let sonner = require("sonner");
 //#region src/primitives/command.tsx
 const Command = react.forwardRef(({ className, ...props }, ref) => (0, react_jsx_runtime.jsx)(cmdk.Command, {
 	ref,
@@ -92,6 +94,243 @@ function CommandDialog({ open, onOpenChange, defaultOpen, modal, title = "Comman
 }
 CommandDialog.displayName = "CommandDialog";
 //#endregion
+//#region src/record/record-state.tsx
+function RecordState({ state, onRetry, message: given }) {
+	const t = (0, _burojs_react.useT)();
+	const chromeT = (0, _burojs_react.useChromeT)();
+	if (state === "loading") return (0, react_jsx_runtime.jsx)("div", {
+		role: "status",
+		"aria-busy": "true",
+		"data-testid": "record-page:loading",
+		className: "p-6 text-sm text-muted-foreground",
+		children: t("router.recordLoading")
+	});
+	const message = given ?? (state === "not-found" ? t("record.notFoundOrNoAccess") : state === "session-expired" ? t("router.recordSessionExpired") : t("router.recordError"));
+	return (0, react_jsx_runtime.jsxs)("div", {
+		role: "alert",
+		"data-testid": `record-page:${state}`,
+		className: "flex flex-col items-center justify-center gap-3 px-6 py-24 text-center",
+		children: [(0, react_jsx_runtime.jsx)("p", {
+			className: "max-w-sm text-sm text-muted-foreground",
+			children: message
+		}), onRetry ? (0, react_jsx_runtime.jsx)(require_button.Button, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			"data-testid": "record-page:retry",
+			onClick: onRetry,
+			children: chromeT("actions.retry")
+		}) : null]
+	});
+}
+//#endregion
+//#region src/load-error/list-error-panel.tsx
+function ListErrorPanel({ text, technical, onRetry, resource, title, className }) {
+	(0, _burojs_react.useT)();
+	const t = (0, _burojs_react.useOptionalT)();
+	const chromeT = (0, _burojs_react.useChromeT)();
+	const raw = process.env.NODE_ENV === "production" ? void 0 : technical;
+	return (0, react_jsx_runtime.jsxs)("div", {
+		role: "alert",
+		className: require_use_theme.cn("flex flex-col items-center justify-center gap-3 px-6 py-16 rounded-lg border border-destructive/40 bg-destructive/5 text-center", className),
+		"data-testid": "error",
+		children: [
+			(0, react_jsx_runtime.jsx)("div", {
+				className: "rounded-full bg-destructive/10 p-3 text-destructive",
+				children: (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconAlertCircle, {
+					className: "size-6",
+					"aria-hidden": "true"
+				})
+			}),
+			(0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-1",
+				children: [(0, react_jsx_runtime.jsx)("h3", {
+					className: "text-base font-semibold tracking-tight text-destructive",
+					children: title ?? t("list.errorTitle")
+				}), (0, react_jsx_runtime.jsx)("p", {
+					className: "max-w-md text-sm text-muted-foreground",
+					children: text
+				})]
+			}),
+			raw && raw !== text ? (0, react_jsx_runtime.jsxs)("details", {
+				className: "max-w-md text-left",
+				children: [(0, react_jsx_runtime.jsx)("summary", {
+					className: "cursor-pointer text-xs text-muted-foreground hover:text-foreground",
+					children: t("list.errorDetails")
+				}), (0, react_jsx_runtime.jsx)("p", {
+					className: "mt-1.5 break-all font-mono text-xs text-muted-foreground",
+					"data-testid": "list-error-detail",
+					children: raw
+				})]
+			}) : null,
+			onRetry && (0, react_jsx_runtime.jsx)("div", {
+				className: "flex justify-center pt-2",
+				children: (0, react_jsx_runtime.jsxs)(require_button.Button, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					"data-testid": resource ? `list-error-retry:${resource}` : "list-error-retry",
+					onClick: onRetry,
+					className: "gap-1.5",
+					children: [(0, react_jsx_runtime.jsx)(_tabler_icons_react.IconRefresh, {
+						className: "size-3.5",
+						"aria-hidden": "true"
+					}), chromeT("actions.retry")]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/load-error/state.ts
+function recordErrorState(error) {
+	const { kind } = (0, _burojs_core.normalizeDataError)(error);
+	if (kind === "not-found" || kind === "forbidden") return "not-found";
+	if (kind === "auth") return "session-expired";
+	return "error";
+}
+//#endregion
+//#region src/load-error/load-error-view.tsx
+const RECORD_KEYS = {
+	"not-found": "record.notFoundOrNoAccess",
+	"session-expired": "router.recordSessionExpired",
+	error: "router.recordError"
+};
+const LIST_FALLBACK = {
+	key: "list.errorBody",
+	default: "Failed to load data. Please try again."
+};
+function loadErrorTechnicalTexts(error, original) {
+	const out = [...require_toaster.technicalTexts(error), ...require_toaster.technicalTexts(original)];
+	if (original !== null && typeof original === "object" && !(original instanceof Error)) {
+		const message = original.message;
+		if (typeof message === "string") out.push(message);
+	}
+	return out.filter((text, index) => text.length > 0 && out.indexOf(text) === index);
+}
+function useLoadErrorText(error, original, state, surface, fallback) {
+	const t = (0, _burojs_react.useOptionalT)();
+	const caps = (0, _burojs_react.useI18nCaps)();
+	if (state !== "error") return t(RECORD_KEYS[state]);
+	const own = (0, _burojs_react.specificErrorText)(error, caps);
+	if (own !== void 0) return own;
+	const strings = require_toaster.friendlyStringsFrom(t);
+	for (const text of loadErrorTechnicalTexts(error, original)) {
+		const friendly = require_toaster.toFriendlyError(text, "", strings);
+		if (friendly.replaced && friendly.detail !== strings.generic) return friendly.detail;
+	}
+	const generic = surface === "list" ? fallback ?? LIST_FALLBACK : fallback;
+	if (surface === "record" || generic === void 0) return t(RECORD_KEYS.error);
+	return t(generic.key, { defaultValue: generic.default });
+}
+function DefaultLoadErrorView(props) {
+	const { error, surface, state, retry, original, fallback, testId, className, children, attributes } = props;
+	const text = useLoadErrorText(error, original, state, surface, fallback);
+	const chromeT = (0, _burojs_react.useChromeT)();
+	if (surface === "record") return (0, react_jsx_runtime.jsx)(RecordState, {
+		state,
+		message: text,
+		...retry === void 0 ? {} : { onRetry: retry }
+	});
+	if (surface === "list") return (0, react_jsx_runtime.jsx)(ListErrorPanel, {
+		text,
+		technical: loadErrorTechnicalTexts(error, original)[0],
+		...retry === void 0 ? {} : { onRetry: retry },
+		...props.resource === void 0 ? {} : { resource: props.resource },
+		...props.title === void 0 ? {} : { title: props.title },
+		...className === void 0 ? {} : { className }
+	});
+	if (surface === "relation" || surface === "picker") {
+		const technical = process.env.NODE_ENV === "production" ? void 0 : loadErrorTechnicalTexts(error, original)[0];
+		return (0, react_jsx_runtime.jsx)("span", {
+			...attributes,
+			...testId === void 0 ? {} : { "data-testid": testId },
+			className,
+			title: technical === void 0 ? text : `${text} (${technical})`,
+			children: children ?? text
+		});
+	}
+	return (0, react_jsx_runtime.jsxs)("div", {
+		...attributes,
+		role: "alert",
+		...testId === void 0 ? {} : { "data-testid": testId },
+		className: require_use_theme.cn("flex flex-wrap items-center gap-2 rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground", className),
+		children: [(0, react_jsx_runtime.jsx)("span", { children: text }), retry === void 0 ? null : (0, react_jsx_runtime.jsx)(require_button.Button, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			onClick: retry,
+			children: chromeT("actions.retry", { defaultValue: "Retry" })
+		})]
+	});
+}
+const UNSET = Symbol("unset");
+var AppViewBoundary = class extends react.Component {
+	state = {
+		failedFor: UNSET,
+		failed: false
+	};
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	static getDerivedStateFromProps(props, state) {
+		if (state.failed && state.failedFor !== UNSET && state.failedFor !== props.error) return {
+			failedFor: UNSET,
+			failed: false
+		};
+		return null;
+	}
+	componentDidCatch(error, _info) {
+		this.setState({ failedFor: this.props.error });
+		if (process.env.NODE_ENV !== "production") console.error("[burojs] load-error.view-threw: the app's views.loadError threw while rendering; the kit's view is shown instead.", error);
+	}
+	render() {
+		return this.state.failed ? this.props.fallback : this.props.children;
+	}
+};
+function LoadError(props) {
+	const App = (0, _burojs_react.useLoadErrorView)();
+	const { error: original, surface, resource } = props;
+	const error = (0, react.useMemo)(() => (0, _burojs_core.normalizeDataError)(original), [original]);
+	const state = props.state ?? recordErrorState(error);
+	const retry = state === "error" ? props.retry : void 0;
+	const viewProps = {
+		error,
+		surface,
+		state,
+		...resource === void 0 ? {} : { resource },
+		...retry === void 0 ? {} : { retry }
+	};
+	const standard = (0, react_jsx_runtime.jsx)(DefaultLoadErrorView, {
+		...viewProps,
+		original,
+		fallback: props.fallback,
+		testId: props.testId,
+		className: props.className,
+		title: props.title,
+		attributes: props.attributes,
+		children: props.children
+	});
+	if (App === void 0) return standard;
+	return (0, react_jsx_runtime.jsx)(AppViewBoundary, {
+		error: original,
+		fallback: standard,
+		children: (0, react_jsx_runtime.jsx)(App, { ...viewProps })
+	});
+}
+const INVALID_ROUTE_ID = Object.freeze({
+	kind: "not-found",
+	code: "invalid-record-id"
+});
+function InvalidRouteId({ resource }) {
+	return (0, react_jsx_runtime.jsx)(LoadError, {
+		surface: "record",
+		resource,
+		state: "not-found",
+		error: INVALID_ROUTE_ID
+	});
+}
+//#endregion
 //#region src/fields/claimed-quick-link.tsx
 function isPlainLeftClick(event) {
 	return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
@@ -330,7 +569,8 @@ function RelationDisplay({ value, field }) {
 		open
 	});
 }
-function RelationField({ to, value }) {
+function RelationField({ to: toInput, value }) {
+	const to = (0, _burojs_core.routeResourceKey)(toInput);
 	return (0, react_jsx_runtime.jsx)(RelationDisplay, {
 		value,
 		field: {
@@ -484,7 +724,7 @@ function LazyByOpener({ to, by, idStr, target }) {
 		if (!asked || rows === void 0 || !requested.current) return;
 		if (rows.length > 1) {
 			requested.current = false;
-			if (process.env.NODE_ENV !== "production") console.error(`[burojs] ${(0, _burojs_core.relationAmbiguousError)(to, by, idStr).message}`);
+			if (process.env.NODE_ENV !== "production") console.error(`[burojs] ${require_toaster.technicalText((0, _burojs_core.relationAmbiguousError)(to, by, idStr))}`);
 			return;
 		}
 		requested.current = false;
@@ -572,10 +812,16 @@ function RelationDisplayBody({ to, by, id, idStr, app, open: openMode, quickTarg
 		title: `${to}: more than one row has ${by ?? "id"} ${idStr}`,
 		children: idStr
 	});
-	if (error) return (0, react_jsx_runtime.jsx)("span", {
-		"data-testid": `${baseId}:error`,
+	if (error) return (0, react_jsx_runtime.jsx)(LoadError, {
+		surface: "relation",
+		error,
+		resource: to,
+		testId: `${baseId}:error`,
 		className: "text-muted-foreground",
-		title: error.message,
+		fallback: {
+			key: "relation.failed",
+			default: "Failed to load options."
+		},
 		children: idStr
 	});
 	if (!record) return (0, react_jsx_runtime.jsx)("span", {
@@ -649,6 +895,343 @@ function namesHiddenField(filter, visible) {
 	return filter !== void 0 && (0, _burojs_react.filterFields)(filter).some((field) => !visible(field));
 }
 //#endregion
+//#region src/fields/relation-hand-back.tsx
+function createdOptionFilter(input) {
+	const own = createdOptionScope(input);
+	const byId = {
+		field: input.idField,
+		op: "eq",
+		value: input.id
+	};
+	return own === void 0 ? byId : { and: [own, byId] };
+}
+function createdOptionScope(input) {
+	return (0, _burojs_core.composeListFilter)({
+		fixed: (0, _burojs_core.normalizeFixedFilters)(input.fixed),
+		search: "",
+		...input.searchDecl === void 0 ? {} : { searchDecl: input.searchDecl },
+		...input.searchContext === void 0 ? {} : { searchContext: input.searchContext }
+	});
+}
+function CreatedOptionRead({ to, filter, scope, scopeField, by, idField, onSettled }) {
+	const query = (0, _burojs_react.useList)(to, {
+		filter,
+		pagination: {
+			kind: "offset",
+			page: 1,
+			pageSize: 1
+		},
+		scope,
+		...scopeField === void 0 ? {} : { scopeField },
+		retry: false
+	});
+	const settled = react.useRef(false);
+	const latest = react.useRef(onSettled);
+	latest.current = onSettled;
+	const rows = query.data?.data;
+	const answered = rows !== void 0 && query.isCurrentData && !query.isFetching;
+	const failed = query.isError && !query.isFetching;
+	react.useEffect(() => {
+		if (settled.current) return;
+		if (failed) {
+			settled.current = true;
+			latest.current({ kind: "failed" });
+			return;
+		}
+		if (!answered) return;
+		settled.current = true;
+		const value = rows[0]?.[by ?? idField];
+		latest.current(typeof value === "string" || typeof value === "number" ? {
+			kind: "fits",
+			value
+		} : { kind: "does-not-fit" });
+	}, [
+		answered,
+		failed,
+		rows,
+		by,
+		idField
+	]);
+	return null;
+}
+//#endregion
+//#region src/fields/relation-view-button.tsx
+function selectKey(value) {
+	if (typeof value === "string") return value.length === 0 ? null : value;
+	if (typeof value === "number") return Number.isFinite(value) ? String(value) : null;
+	return null;
+}
+const VIEW_CLASS = require_use_theme.cn(require_button.buttonVariants({
+	variant: "outline",
+	size: "icon"
+}), "shrink-0");
+const TITLE_CLASS = "min-w-0 max-w-[16rem] truncate";
+const TITLE_VIEW_CLASS = require_use_theme.cn(TITLE_CLASS, "cursor-pointer rounded-sm text-left hover:underline focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring");
+function RelationViewButton(props) {
+	const gate = (0, _burojs_react.useEntryGate)();
+	const { to, value, by } = props;
+	const access = (0, _burojs_react.useListAccess)(to);
+	const key = selectKey(value);
+	const plain = plainTitle(props.title);
+	if (key === null || props.open === "none") return plain;
+	if (by !== void 0 && !(access.status === "ready" && access.fieldVisible(by))) return plain;
+	if (gate(to, "show").state !== "open") return plain;
+	return (0, react_jsx_runtime.jsx)(ViewButton, {
+		...props,
+		keyString: key
+	}, key);
+}
+function plainTitle(title) {
+	return title === void 0 ? null : (0, react_jsx_runtime.jsx)("span", {
+		className: TITLE_CLASS,
+		children: title
+	});
+}
+function ViewButton({ to, by, fieldName, keyString, beforeOpen, open: openMode = "quick", title }) {
+	const app = (0, _burojs_react.useApp)();
+	const t = (0, _burojs_react.useOptionalT)();
+	const tid = (0, _burojs_react.useTestIds)();
+	const quick = (0, _burojs_react.useQuick)();
+	const navigate = (0, _burojs_react.useRouteNavigate)();
+	const RouterLink = require_toaster.useLinkComponent();
+	const [asked, setAsked] = react.useState(false);
+	const requested = react.useRef(false);
+	const targetDef = app.registry.get(to);
+	const rawIdField = (targetDef?.data)?.idField;
+	const idField = typeof rawIdField === "string" && rawIdField.length > 0 ? rawIdField : "id";
+	const read = (0, _burojs_react.useList)(to, {
+		...asked && by !== void 0 ? {
+			filter: {
+				field: by,
+				op: "eq",
+				value: keyString
+			},
+			pagination: {
+				kind: "offset",
+				page: 1,
+				pageSize: 2
+			}
+		} : {},
+		scope: "none",
+		enabled: asked && by !== void 0,
+		retry: false
+	});
+	const rows = read.isCurrentData && !read.isPlaceholderData && !read.isFetching ? read.data?.data : void 0;
+	const open = react.useCallback((id) => {
+		beforeOpen();
+		if (openMode === "page") {
+			if (targetDef !== void 0 && linksToPage(app, targetDef)) navigate((0, _burojs_core.resourceShowHref)(app.registry, targetDef, to, id));
+			return;
+		}
+		quick.show(to, id);
+	}, [
+		beforeOpen,
+		quick,
+		to,
+		openMode,
+		navigate,
+		app,
+		targetDef
+	]);
+	react.useEffect(() => {
+		if (by === void 0 || !asked || rows === void 0 || !requested.current) return;
+		requested.current = false;
+		if (rows.length !== 1) {
+			if (rows.length > 1 && process.env.NODE_ENV !== "production") console.error(`[burojs] ${to}: more than one row has ${by} ${keyString}; "view" opened nothing.`);
+			return;
+		}
+		const id = rows[0]?.[idField];
+		const next = selectKey(id);
+		if (next !== null) open(next);
+	}, [
+		by,
+		asked,
+		rows,
+		idField,
+		keyString,
+		to,
+		open
+	]);
+	const label = t("relationPicker.view", { defaultValue: "View" });
+	const content = title === void 0 ? (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconEye, {
+		className: "h-4 w-4",
+		"aria-hidden": true
+	}) : title;
+	const className = title === void 0 ? VIEW_CLASS : TITLE_VIEW_CLASS;
+	const testid = tid.relationView(to, fieldName);
+	if (openMode === "page" && (targetDef === void 0 || !linksToPage(app, targetDef))) return plainTitle(title);
+	if (openMode === "page" && by === void 0 && targetDef !== void 0) return (0, react_jsx_runtime.jsxs)(RouterLink, {
+		href: (0, _burojs_core.resourceShowHref)(app.registry, targetDef, to, keyString),
+		"data-testid": testid,
+		className,
+		onClick: () => beforeOpen(),
+		children: [(0, react_jsx_runtime.jsxs)("span", {
+			className: "sr-only",
+			children: [label, " "]
+		}), content]
+	});
+	if (by === void 0 && targetDef !== void 0 && linksToPage(app, targetDef)) return (0, react_jsx_runtime.jsxs)(ClaimedQuickLink, {
+		href: (0, _burojs_core.resourceShowHref)(app.registry, targetDef, to, keyString),
+		testid,
+		className,
+		onOpen: () => open(keyString),
+		children: [(0, react_jsx_runtime.jsxs)("span", {
+			className: "sr-only",
+			children: [label, " "]
+		}), content]
+	});
+	return (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		className,
+		"data-testid": testid,
+		"aria-label": title === void 0 ? label : `${label} ${title}`,
+		[_burojs_react.QUICK_ANCHOR_ATTRIBUTE]: "",
+		onClick: (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			if (!isPlainLeftClick(event)) return;
+			if (by === void 0) {
+				open(keyString);
+				return;
+			}
+			requested.current = true;
+			setAsked(true);
+			if (rows !== void 0 && rows.length === 1) {
+				const next = selectKey(rows[0]?.[idField]);
+				requested.current = false;
+				if (next !== null) open(next);
+			}
+		},
+		children: content
+	});
+}
+//#endregion
+//#region src/fields/relation-create.tsx
+function useSelectCreate(input) {
+	const t = (0, _burojs_react.useOptionalT)();
+	const { to: target } = input;
+	const [pending, setPending] = react.useState(false);
+	const [created, setCreated] = react.useState(null);
+	const latch = react.useRef(false);
+	const mounted = react.useRef(true);
+	react.useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	const latest = react.useRef(input);
+	latest.current = input;
+	const access = (0, _burojs_react.useListAccess)(target);
+	const blocked = input.held === true || access.status !== "ready" || namesHiddenField(createdOptionScope({
+		fixed: input.fixedFilters,
+		searchDecl: input.searchDecl,
+		searchContext: input.searchContext
+	}), (name) => access.fieldVisible(name));
+	const blockedRef = react.useRef(blocked);
+	blockedRef.current = blocked;
+	const release = react.useCallback(() => {
+		latch.current = false;
+		if (mounted.current) {
+			setPending(false);
+			setCreated(null);
+		}
+	}, []);
+	const start = react.useCallback((open) => {
+		if (latch.current || !mounted.current || blockedRef.current) return;
+		latch.current = true;
+		setPending(true);
+		let opened;
+		try {
+			opened = open();
+		} catch (error) {
+			release();
+			throw error;
+		}
+		opened.then((row) => {
+			if (!mounted.current) {
+				latch.current = false;
+				return;
+			}
+			const id = row === null ? null : selectKey(row[latest.current.idField]) ?? selectKey(row.id);
+			if (id === null) release();
+			else setCreated({ id });
+		}, () => release());
+	}, [release]);
+	const settle = react.useCallback((result) => {
+		if (mounted.current) {
+			if (result.kind === "fits") latest.current.onValue(result.value);
+			else if (result.kind === "does-not-fit") (0, sonner.toast)(t("relationPicker.createdNotFitting", { defaultValue: "The record was created but does not fit this field" }));
+			else sonner.toast.error(t("relationPicker.createdNotSelected", { defaultValue: "The record was created but could not be selected" }));
+		}
+		release();
+	}, [release, t]);
+	return {
+		create: react.useMemo(() => ({
+			pending,
+			blocked,
+			start
+		}), [
+			pending,
+			blocked,
+			start
+		]),
+		reader: created === null || blocked ? null : (0, react_jsx_runtime.jsx)(CreatedOptionRead, {
+			to: target,
+			filter: createdOptionFilter({
+				fixed: input.fixedFilters,
+				idField: input.idField,
+				id: created.id,
+				searchDecl: input.searchDecl,
+				searchContext: input.searchContext
+			}),
+			scope: input.scope,
+			...input.scopeField === void 0 ? {} : { scopeField: input.scopeField },
+			by: input.by,
+			idField: input.idField,
+			onSettled: settle
+		}, created.id)
+	};
+}
+function plainStringField(def) {
+	if (def === null || typeof def !== "object") return false;
+	const field = def;
+	return field.kind === "string" && field.system !== true && field.opts?.system !== true && field.opts?.enum === void 0 && field.opts?.localized !== true;
+}
+function RelationCreateButton(props) {
+	const gate = (0, _burojs_react.useEntryGate)();
+	const { to } = props;
+	if (props.create.blocked || gate(to, "create").state !== "open") return null;
+	return (0, react_jsx_runtime.jsx)(CreateButton, { ...props });
+}
+function CreateButton({ to, fieldName, create, seeds, search, beforeOpen, className, testId }) {
+	const app = (0, _burojs_react.useApp)();
+	const t = (0, _burojs_react.useOptionalT)();
+	const tid = (0, _burojs_react.useTestIds)();
+	const quick = (0, _burojs_react.useQuick)();
+	const label = t("relationPicker.create", { defaultValue: "+ Create" });
+	return (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"data-testid": testId ?? tid.relationCreate(to, fieldName),
+		disabled: create.pending,
+		className,
+		onClick: () => {
+			const text = search?.trim() ?? "";
+			const displayField = app.registry.get(to)?.displayField;
+			const fields = app.registry.get(to)?.fields;
+			const prefill = text.length > 0 && typeof displayField === "string" && fields !== void 0 && Object.hasOwn(fields, displayField) && plainStringField(fields[displayField]) ? { [displayField]: text } : void 0;
+			create.start(() => {
+				beforeOpen();
+				return quick.create(to, {
+					...seeds === void 0 || Object.keys(seeds).length === 0 ? {} : { defaults: seeds },
+					...prefill === void 0 ? {} : { input: prefill }
+				});
+			});
+		},
+		children: label
+	});
+}
+//#endregion
 Object.defineProperty(exports, "ClaimedQuickLink", {
 	enumerable: true,
 	get: function() {
@@ -709,6 +1292,18 @@ Object.defineProperty(exports, "CommandSeparator", {
 		return CommandSeparator;
 	}
 });
+Object.defineProperty(exports, "InvalidRouteId", {
+	enumerable: true,
+	get: function() {
+		return InvalidRouteId;
+	}
+});
+Object.defineProperty(exports, "LoadError", {
+	enumerable: true,
+	get: function() {
+		return LoadError;
+	}
+});
 Object.defineProperty(exports, "PeekContext", {
 	enumerable: true,
 	get: function() {
@@ -721,6 +1316,18 @@ Object.defineProperty(exports, "PeekHostContext", {
 		return PeekHostContext;
 	}
 });
+Object.defineProperty(exports, "RecordState", {
+	enumerable: true,
+	get: function() {
+		return RecordState;
+	}
+});
+Object.defineProperty(exports, "RelationCreateButton", {
+	enumerable: true,
+	get: function() {
+		return RelationCreateButton;
+	}
+});
 Object.defineProperty(exports, "RelationDisplay", {
 	enumerable: true,
 	get: function() {
@@ -733,22 +1340,22 @@ Object.defineProperty(exports, "RelationField", {
 		return RelationField;
 	}
 });
-Object.defineProperty(exports, "focusWithoutPeek", {
+Object.defineProperty(exports, "RelationViewButton", {
 	enumerable: true,
 	get: function() {
-		return focusWithoutPeek;
+		return RelationViewButton;
 	}
 });
-Object.defineProperty(exports, "isPlainLeftClick", {
+Object.defineProperty(exports, "focusWithoutPeek", {
 	enumerable: true,
 	get: function() {
-		return isPlainLeftClick;
+		return focusWithoutPeek;
 	}
 });
-Object.defineProperty(exports, "linksToPage", {
+Object.defineProperty(exports, "isPlainLeftClick", {
 	enumerable: true,
 	get: function() {
-		return linksToPage;
+		return isPlainLeftClick;
 	}
 });
 Object.defineProperty(exports, "namesHiddenField", {
@@ -781,11 +1388,23 @@ Object.defineProperty(exports, "relationLinkClassName", {
 		return relationLinkClassName;
 	}
 });
+Object.defineProperty(exports, "selectKey", {
+	enumerable: true,
+	get: function() {
+		return selectKey;
+	}
+});
 Object.defineProperty(exports, "useRowTitle", {
 	enumerable: true,
 	get: function() {
 		return useRowTitle;
 	}
 });
+Object.defineProperty(exports, "useSelectCreate", {
+	enumerable: true,
+	get: function() {
+		return useSelectCreate;
+	}
+});
 
-//# sourceMappingURL=search-access-Dugvttlg.cjs.map
+//# sourceMappingURL=relation-create-DDEYcKfw.cjs.map