@burojs/ui-shadcn 0.4.0 → 0.5.0

package/dist/resource-page-router-T4vS5gbJ.js

@@ -0,0 +1,1582 @@
+import { C as loadFailedText, E as loadPageFlowRoute, O as useLoaded, _ as FlowBoundary, o as canonicalResourceName, t as CheckConfirmDialog } from "./check-confirm-dialog-CkaVTPT9.js";
+import { t as Button } from "./button-MWVeZaqj.js";
+import { t as Skeleton } from "./skeleton-U2noefj5.js";
+import { B as RouteScreenClaimContext, H as useIsRouteScreen, L as ScreenTree, R as useTabsUrlState, St as DeepLinkScope, Tt as FieldDisplay, V as RouteScreenContext, _ as useFrameChrome, a as isBuiltinRecordView, c as ChangeTypeButton, d as UndeclaredTypeNotice, ft as isShowAvailable, g as FrameChromeContext, gt as showTarget, ht as recordRouteAvailable, i as RouteListContext, l as HeaderTypeNotice, mt as recordReturnTarget, n as viewOf, o as resolveFrameView, p as FormActions, pt as listTarget, st as PageHeader, t as selectImplementation, u as TypeChromeDrawnContext, vt as useShownItemActions, z as QuickScreenClaimContext } from "./place-node--GdsP688.js";
+import { FORM_SLOT, addressesCapability, builtinFrames, canonicalEntityNodeKey, compilePageScreen, dtoFields, evaluateVisible, fieldSensitivity, formatEntityRef, hasListPage, hrefFor, isCustomPageDef, isScreenFailure, matchPath, navHrefFor, nodeKind, normalizeDataError, normalizeEntityRef, pageParamNames, parsePageParams, resolveNavLabel, resolveResourceNavLabel, snapshotAppFrames, snapshotBlockLookup, snapshotFrameLookup } from "@burojs/core";
+import { ComponentsContext, FrameCheckContext, RecordFrameContext, ResourceContext, RouteSourceContext, ScreenStateProvider, pageAccessFor, policyRecordOf, resolveRoute, retryRecordRead, useApp, useApplicationSnapshot, useAvailabilityResolver, useComponent, useCtx, useCurrentUserId, useFieldAccess, useFormController, useFrameImplementations, useFrameT, useI18nCaps, useNavigationGuardText, useOne, useOptionalDataRuntime, useOptionalRouterAdapter, useOptionalT, usePageAccess, usePageScreen, usePermissions, useProjectedRecord, usePublishDocVariant, useQuickEntry, useRecordFrame, useRecordTitle, useRouteListImplementation, useRouteNavigate, useT, useTestIds, useTranslate, useVisibilityCtx } from "@burojs/react";
+import { Suspense, createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/resource-key.ts
+function canonicalNavKey(node) {
+	return canonicalEntityNodeKey(node);
+}
+function canonicalResourceKey(def) {
+	return canonicalNavKey(def);
+}
+//#endregion
+//#region src/layout/build-nav-items.ts
+function buildNavItems(args) {
+	const { registry, caps, groupName, match, isVisible, entryFilter, icons } = args;
+	const chain = match?.groupChain ?? [];
+	const qualifiedMatch = match;
+	const activeLeaf = qualifiedMatch == null ? void 0 : qualifiedMatch.kind === "group-index" ? canonicalNavKey({
+		name: qualifiedMatch.target ?? qualifiedMatch.name,
+		ref: qualifiedMatch.targetRef
+	}) : canonicalNavKey(qualifiedMatch);
+	const isEligible = (node) => isVisible(node) && (entryFilter ? entryFilter(node) : true);
+	const out = [];
+	for (const child of registry.groups.childrenOf(groupName)) {
+		if (!isEligible(child)) continue;
+		const kind = nodeKind(child);
+		const childKey = canonicalNavKey(child);
+		const href = navHrefFor(registry, childKey, { isVisible: isEligible });
+		if (kind === "group") {
+			const label = resolveNavLabel(caps, `groups.${childKey}`, child.label ?? child.name);
+			const active = chain.some((g) => canonicalNavKey(g) === childKey);
+			out.push({
+				kind: "group",
+				name: childKey,
+				label,
+				href,
+				icon: icons?.group?.(childKey),
+				active
+			});
+		} else if (kind === "custom-page") out.push({
+			kind: "custom-page",
+			name: childKey,
+			label: resolveNavLabel(caps, `pages.${childKey}`, child.label ?? child.name),
+			href,
+			icon: icons?.page?.(childKey),
+			active: activeLeaf === childKey
+		});
+		else out.push({
+			kind: "resource",
+			name: childKey,
+			label: resolveResourceNavLabel(caps, childKey, child),
+			href,
+			icon: icons?.resource?.(childKey),
+			active: activeLeaf === childKey
+		});
+	}
+	return out;
+}
+//#endregion
+//#region src/layout/nav-slots.ts
+function layoutSlot(key) {
+	return `layout.${key}`;
+}
+function useLayout(key) {
+	return useComponent(layoutSlot(key));
+}
+function useLayoutResolver() {
+	const components = useContext(ComponentsContext);
+	return (key) => components[layoutSlot(key)];
+}
+//#endregion
+//#region src/layout/use-nav-routing.ts
+function useNavVisible() {
+	const ctx = useVisibilityCtx();
+	const allowed = usePageAllowed();
+	return useCallback((node) => evaluateVisible(node.visible, ctx) && (!isCustomPageDef(node) || allowed(node)), [ctx, allowed]);
+}
+function usePageAllowed() {
+	const permissions = usePermissions();
+	return useCallback((page) => pageAccessFor(page, permissions) === "allowed", [permissions]);
+}
+function useHref(name, opts) {
+	const app = useApp();
+	const isVisible = useNavVisible();
+	return hrefFor(app.registry, name, {
+		...opts,
+		isVisible
+	});
+}
+function useMatch() {
+	const app = useApp();
+	const isVisible = useNavVisible();
+	const path = useOptionalRouterAdapter()?.pathname;
+	return path === void 0 ? null : matchPath(app.registry, path, { isVisible });
+}
+//#endregion
+//#region src/layout/nav-chrome-boundary.tsx
+const NavChromeBoundaryContext = createContext(new Set());
+function useNavChromeBoundary() {
+	return useContext(NavChromeBoundaryContext);
+}
+function NavChromeBoundaryProvider({ claim, children }) {
+	const parent = useContext(NavChromeBoundaryContext);
+	const key = claim.join(" ");
+	const merged = useMemo(() => {
+		const s = new Set(parent);
+		for (const n of claim) s.add(n);
+		return s;
+	}, [parent, key]);
+	return jsx(NavChromeBoundaryContext.Provider, {
+		value: merged,
+		children
+	});
+}
+//#endregion
+//#region src/layout/nav-chrome.tsx
+const DETAIL_ACTIONS = new Set([
+	"show",
+	"edit",
+	"create"
+]);
+function NavChrome({ children, entryFilter, icons }) {
+	const app = useApp();
+	const caps = useI18nCaps();
+	const isVisible = useNavVisible();
+	const match = useMatch();
+	const resolveLayout = useLayoutResolver();
+	const boundary = useNavChromeBoundary();
+	if (!match) return jsx(Fragment$1, { children });
+	let content = children;
+	for (let i = match.groupChain.length - 1; i >= 0; i--) {
+		const group = match.groupChain[i];
+		if (!group) continue;
+		const groupKey = canonicalNavKey(group);
+		if (boundary.has(groupKey)) continue;
+		if (group.chromeOn === "list" && match.kind === "resource" && DETAIL_ACTIONS.has(match.action)) continue;
+		const Layout = resolveLayout(group.layout);
+		if (!Layout) continue;
+		const items = buildNavItems({
+			registry: app.registry,
+			caps,
+			groupName: groupKey,
+			match,
+			isVisible,
+			entryFilter,
+			icons
+		});
+		content = jsx(Layout, {
+			group,
+			groupKey,
+			items,
+			children: content
+		});
+	}
+	return jsx(Fragment$1, { children: content });
+}
+//#endregion
+//#region src/record/record-state.tsx
+function RecordState({ state, onRetry }) {
+	const t = useT();
+	if (state === "loading") return 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 = state === "not-found" ? t("router.recordNotFound") : state === "session-expired" ? t("router.recordSessionExpired") : t("router.recordError");
+	return 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: [jsx("p", {
+			className: "max-w-sm text-sm text-muted-foreground",
+			children: message
+		}), onRetry ? jsx(Button, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			"data-testid": "record-page:retry",
+			onClick: onRetry,
+			children: t("actions.retry")
+		}) : null]
+	});
+}
+//#endregion
+//#region src/flows/page-flow-loader.tsx
+function PageFlowRouteLoader({ match }) {
+	const t = useOptionalT();
+	const loaded = useLoaded(loadPageFlowRoute);
+	const failed = (retry) => jsxs("div", {
+		role: "alert",
+		"data-buro-flow-load": "failed",
+		className: "flex flex-col gap-3 p-6 text-sm",
+		children: [jsx("p", { children: loadFailedText(t) }), jsx("div", { children: jsx(Button, {
+			type: "button",
+			onClick: retry,
+			children: t("actions.retry") === "actions.retry" ? "Retry" : t("actions.retry")
+		}) })]
+	});
+	if (loaded.error !== void 0) return failed(loaded.retry);
+	if (loaded.module === void 0) return jsx(RecordState, { state: "loading" });
+	const Route = loaded.module.PageFlowRoute;
+	return jsx(FlowBoundary, {
+		fallback: (_error, reset) => failed(reset),
+		children: jsx(Route, { match })
+	});
+}
+//#endregion
+//#region src/list-kit/resource-list-page.tsx
+function ResourceListPage({ resource, meta, renderCell, emptyState }) {
+	const app = useRouteListImplementation();
+	const implementation = selectImplementation("buro:related-list", app);
+	const View = implementation === void 0 ? void 0 : viewOf(implementation);
+	const translate = useTranslate();
+	const route = useMemo(() => ({
+		meta,
+		renderCell,
+		emptyState
+	}), [
+		meta,
+		renderCell,
+		emptyState
+	]);
+	const viewProps = useMemo(() => ({
+		props: { resource: normalizeEntityRef(resource) },
+		data: {},
+		t: (key, options) => translate(`blocks.buro:related-list.${key}`, options)
+	}), [resource, translate]);
+	return jsx("div", {
+		"data-buro-node": "place",
+		"data-buro-size": "full",
+		className: "min-w-0",
+		children: jsx(RouteListContext.Provider, {
+			value: route,
+			children: jsx(Suspense, {
+				fallback: null,
+				children: View === void 0 ? null : jsx(View, { ...viewProps })
+			})
+		})
+	});
+}
+//#endregion
+//#region src/layout/page-host.tsx
+function PageHost({ page, match, notFound }) {
+	const isVisible = useNavVisible();
+	const ctx = useVisibilityCtx();
+	const access = usePageAccess(page);
+	if (!(evaluateVisible(page.visible, ctx) && match.groupChain.every((group) => isVisible(group)))) return notFound;
+	if (access === "pending") return jsx(RecordState, { state: "loading" });
+	if (access === "denied") return notFound;
+	return jsx(PageParams, {
+		page,
+		notFound
+	});
+}
+const NO_SEARCH = new URLSearchParams();
+function PageParams({ page, notFound }) {
+	const search = useOptionalRouterAdapter()?.searchParams ?? (typeof window === "undefined" ? NO_SEARCH : new URLSearchParams(window.location.search));
+	const raw = JSON.stringify(pageParamNames(page.params).map((name) => search.get(name)));
+	const parsed = useMemo(() => parsePageParams(page, search), [page, raw]);
+	if (!parsed.ok) return notFound;
+	return jsx(RouteSourceContext.Provider, {
+		value: parsed.route,
+		children: jsx(PageBody, { page })
+	});
+}
+function PageBody({ page }) {
+	const snapshot = useApplicationSnapshot();
+	const compiled = useMemo(() => compilePageScreen(page, {
+		blocks: snapshotBlockLookup(snapshot),
+		frames: snapshotFrameLookup(snapshot),
+		appFrames: snapshotAppFrames(snapshot)
+	}), [page, snapshot]);
+	const failure = isScreenFailure(compiled) ? compiled : null;
+	const screen = failure === null && !isScreenFailure(compiled) ? compiled : null;
+	const caps = useI18nCaps();
+	const name = canonicalNavKey(page);
+	const label = resolveNavLabel(caps, `pages.${name}`, page.label);
+	useEffect(() => {
+		if (failure === null || process.env.NODE_ENV === "production") return;
+		console.error(`[burojs] The page "${name}" cannot render its body: ${failure.code} at ${failure.path.join(".")}: ${failure.message}.`);
+	}, [failure, name]);
+	return jsxs("div", {
+		className: "flex flex-col gap-4",
+		children: [jsx("h1", {
+			className: "text-2xl font-semibold tracking-tight",
+			children: label
+		}), screen === null ? jsx(RecordState, { state: "error" }) : jsx(PageRouteScreen, { children: jsx(PlannedBody, {
+			screen,
+			name,
+			label
+		}) })]
+	});
+}
+function PageRouteScreen({ children }) {
+	const tabs = useTabsUrlState("show", true);
+	return jsx(RouteScreenClaimContext.Provider, {
+		value: false,
+		children: jsx(RouteScreenContext.Provider, {
+			value: true,
+			children: jsx(ScreenStateProvider, {
+				open: tabs.open,
+				onOpenChange: tabs.onOpenChange,
+				children
+			})
+		})
+	});
+}
+function PlannedBody({ screen, name, label }) {
+	const page = usePageScreen(screen);
+	const { PlacementScope } = page;
+	const route = useContext(RouteSourceContext);
+	const catalog = useFrameImplementations();
+	const id = formatEntityRef(screen.frame);
+	const resolved = useMemo(() => resolveFrameView(screen.frame, catalog, "page"), [screen.frame, catalog]);
+	const t = useFrameT(id);
+	const slots = {};
+	for (const slot of Object.keys(screen.slots)) slots[slot] = (page.plan.slots[slot] ?? []).every((node) => node.state === "absent") ? null : jsx(ScreenTree, {
+		region: slot === "body" ? "page-body" : "record",
+		slot,
+		resource: name,
+		mode: "show",
+		compiled: screen,
+		page
+	}, slot);
+	const View = resolved.view;
+	const viewProps = {
+		slots,
+		label,
+		params: route ?? {},
+		t
+	};
+	return jsx(RouteSourceContext.Provider, {
+		value: null,
+		children: jsx(PlacementScope, { children: jsx(DeepLinkScope, {
+			plan: page.plan,
+			enabled: true,
+			children: jsx("div", {
+				"data-buro-region": "page-body",
+				children: jsx(Suspense, {
+					fallback: null,
+					children: jsx(View, { ...viewProps })
+				})
+			})
+		}) })
+	});
+}
+//#endregion
+//#region src/resource/form-context.tsx
+const FormControlContext = createContext(null);
+const FormControlProvider = FormControlContext.Provider;
+function useFormControl() {
+	return useContext(FormControlContext);
+}
+//#endregion
+//#region src/frames/obligations.tsx
+const SlotMountsContext = createContext(null);
+function useSlotOnce(slot) {
+	const mounts = useContext(SlotMountsContext);
+	const token = useId();
+	const first = mounts === null || mounts.claim(slot, token);
+	useEffect(() => {
+		if (mounts === null) return;
+		mounts.claim(slot, token);
+		return () => mounts.release(slot, token);
+	}, [
+		mounts,
+		slot,
+		token
+	]);
+	useEffect(() => {
+		if (!first) mounts?.twice(slot);
+	}, [
+		first,
+		mounts,
+		slot
+	]);
+	return first;
+}
+function FrameObligations({ id, mode, showActions, root, children }) {
+	const told = useRef(new Set());
+	const counts = useRef(new Map());
+	const owners = useRef(new Map());
+	const tell = (key, write) => {
+		if (told.current.has(key) || process.env.NODE_ENV === "production") return;
+		told.current.add(key);
+		write();
+	};
+	const latestId = useRef(id);
+	latestId.current = id;
+	const slotMounts = useMemo(() => ({
+		claim(slot, token) {
+			const owner = owners.current.get(slot);
+			if (owner === void 0) {
+				owners.current.set(slot, token);
+				return true;
+			}
+			return owner === token;
+		},
+		release(slot, token) {
+			if (owners.current.get(slot) === token) owners.current.delete(slot);
+		},
+		twice(slot) {
+			tell(`slot-twice:${slot}`, () => console.error(`[burojs] frame.slot-twice: ${latestId.current} renders slots.${slot} twice; a slot renders at most once (body twice would mount every field twice under one form).`));
+		}
+	}), []);
+	const pieces = useMemo(() => ({
+		stub: false,
+		mount(piece) {
+			counts.current.set(piece, (counts.current.get(piece) ?? 0) + 1);
+			return () => counts.current.set(piece, (counts.current.get(piece) ?? 1) - 1);
+		}
+	}), []);
+	return jsx(SlotMountsContext.Provider, {
+		value: slotMounts,
+		children: jsxs(FrameCheckContext.Provider, {
+			value: pieces,
+			children: [children, jsx(ObligationCheck, { check: () => {
+				const mounted = (piece) => (counts.current.get(piece) ?? 0) > 0;
+				if (mode !== "show" && !mounted("FormActions")) tell("no-form-actions", () => console.error(`[burojs] frame.no-form-actions: ${id} renders no <FormActions/> in ${mode}; nothing can submit or cancel the form.`));
+				if (mode === "show" && showActions && !mounted("RecordActions")) tell("no-actions", () => console.warn(`[burojs] screen.no-actions: ${id} renders no <RecordActions/> in show, and the resource has item actions there.`));
+				if (root.current?.querySelector("h1") != null) tell("h1", () => console.error(`[burojs] ${id} renders an h1; the route draws the screen's one h1.`));
+			} })]
+		})
+	});
+}
+function ObligationCheck({ check }) {
+	useEffect(() => {
+		check();
+	});
+	return null;
+}
+//#endregion
+//#region src/frames/slot-wrapper.tsx
+function DraftBanner() {
+	const { resource, mode, controller } = useRecordFrame();
+	const t = useOptionalT();
+	const tid = useTestIds();
+	const { draft } = controller;
+	if (mode === "show" || draft.pending === null) return null;
+	return jsxs("div", {
+		"data-testid": tid.formDraftBanner(resource, mode),
+		role: "status",
+		"aria-live": "polite",
+		className: "flex flex-wrap items-center gap-2 rounded-md border border-warning/50 bg-warning/10 px-3 py-2 text-sm",
+		children: [
+			jsx("span", {
+				className: "font-medium",
+				children: draft.recordChanged ? t("draft.recordChanged") : t("draft.found", { params: { time: timeAgo(draft.pending.savedAt, t) } })
+			}),
+			draft.recordChanged ? null : jsx("span", {
+				className: "text-muted-foreground",
+				children: t("draft.restorePrompt")
+			}),
+			jsxs("div", {
+				className: "ml-auto flex gap-2",
+				children: [draft.recordChanged ? null : jsx(Button, {
+					type: "button",
+					size: "sm",
+					variant: "outline",
+					"data-testid": tid.formDraftRestore(resource, mode),
+					onClick: draft.restore,
+					children: t("draft.restore")
+				}), jsx(Button, {
+					type: "button",
+					size: "sm",
+					variant: "ghost",
+					"data-testid": tid.formDraftDiscard(resource, mode),
+					onClick: draft.discard,
+					children: t("draft.discard")
+				})]
+			})
+		]
+	});
+}
+function timeAgo(savedAt, t) {
+	const then = new Date(savedAt).getTime();
+	if (!Number.isFinite(then)) return t("draft.timeAgoRecently");
+	const diff = Date.now() - then;
+	if (diff < 6e4) return t("draft.timeAgoMoment");
+	if (diff < 36e5) return t("draft.timeAgoMinutes", { count: Math.round(diff / 6e4) });
+	if (diff < 864e5) return t("draft.timeAgoHours", { count: Math.round(diff / 36e5) });
+	return t("draft.timeAgoDays", { count: Math.round(diff / 864e5) });
+}
+function frameRecordId(frame) {
+	if (frame.recordId !== void 0) return frame.recordId;
+	const id = frame.record?.id;
+	return typeof id === "string" || typeof id === "number" ? String(id) : void 0;
+}
+function BodySlot() {
+	const frame = useRecordFrame();
+	const { resource, mode, controller } = frame;
+	const chrome = useFrameChrome();
+	const tid = useTestIds();
+	const id = frameRecordId(frame);
+	const tree = jsx("div", {
+		"data-buro-region": "record-body",
+		"data-buro-slot": FORM_SLOT,
+		children: jsx(ScreenTree, {
+			region: "record",
+			slot: FORM_SLOT,
+			resource,
+			mode,
+			compiled: controller.screen,
+			controller
+		})
+	});
+	if (mode === "show") return tree;
+	return jsxs("form", {
+		id: chrome.formId,
+		noValidate: true,
+		"data-testid": tid.form(resource, mode, id),
+		onSubmit: (event) => {
+			event.preventDefault();
+			const steps = controller.steps;
+			if (steps !== null && steps.current !== void 0 && steps.current !== steps.ids[steps.ids.length - 1]) steps.next();
+			else chrome.submit();
+		},
+		className: "flex flex-col gap-4",
+		children: [jsx(DraftBanner, {}), tree]
+	});
+}
+function DisplaySlot({ name }) {
+	const { resource, mode, controller } = useRecordFrame();
+	return jsx(ScreenTree, {
+		region: "record",
+		slot: name,
+		resource,
+		mode,
+		compiled: controller.screen,
+		controller
+	});
+}
+function SlotWrapper({ name }) {
+	if (!useSlotOnce(name)) return null;
+	return name === FORM_SLOT ? jsx(BodySlot, {}) : jsx(DisplaySlot, { name });
+}
+//#endregion
+//#region src/frames/record-frame-host.tsx
+const NO_ROOT = { current: null };
+function drawnFields(roots, compiled, out) {
+	for (const node of roots) {
+		if (node.state === "absent") continue;
+		const field = node.field ?? compiled.nodes[node.index]?.field;
+		if (node.kind === "field" && field !== void 0 && node.state === "ready") out.add(field);
+		drawnFields(node.children, compiled, out);
+	}
+}
+function frameRecord(record, compiled, slots, idField, visible = () => true) {
+	if (record === void 0 || compiled === null || slots === void 0) return void 0;
+	const drawn = new Set();
+	for (const roots of Object.values(slots)) drawnFields(roots, compiled, drawn);
+	const declarations = new Map(compiled.fields.map((entry) => [entry.name, entry.declaration]));
+	const out = {};
+	if (Object.hasOwn(record, idField)) out[idField] = record[idField];
+	for (const name of drawn) {
+		if (!Object.hasOwn(record, name) || !visible(name)) continue;
+		if (fieldSensitivity(declarations.get(name)) !== void 0) continue;
+		out[name] = record[name];
+	}
+	return Object.freeze(out);
+}
+function declaredSlots(compiled) {
+	if (compiled === null) return [];
+	return Object.entries(compiled.slots).filter(([, nodes]) => nodes.length > 0).map(([name]) => name);
+}
+function useEffectiveFrame(instance) {
+	const { resource, mode, controller } = useRecordFrame();
+	const compiled = controller.screen;
+	const missing = useMemo(() => {
+		if (instance === void 0 || instance.for !== "record") return void 0;
+		const own = new Set(Object.keys(instance.slots));
+		return declaredSlots(compiled).find((slot) => !own.has(slot));
+	}, [instance, compiled]);
+	const told = useRef(false);
+	const instanceId = instance === void 0 ? void 0 : formatEntityRef(instance.ref);
+	useEffect(() => {
+		if (missing === void 0 || told.current || process.env.NODE_ENV === "production") return;
+		told.current = true;
+		console.error(`[burojs] <RecordScreen frame={${instanceId}}> lacks the slot ${missing} that ${resource}'s ${mode} screen fills; the screen's own frame draws it.`);
+	}, [
+		missing,
+		instanceId,
+		resource,
+		mode
+	]);
+	if (instance !== void 0 && instance.for === "record" && missing === void 0 && compiled !== null) return {
+		ref: instance.ref,
+		slotNames: Object.keys(instance.slots)
+	};
+	return {
+		ref: compiled?.frame ?? builtinFrames.record.ref,
+		slotNames: compiled === null ? ["header", FORM_SLOT] : Object.keys(compiled.slots)
+	};
+}
+function RecordFrameView({ frame: instance }) {
+	const { resource, mode, controller, record } = useRecordFrame();
+	const chrome = useFrameChrome();
+	const quick = useQuickEntry();
+	const app = useApp();
+	const catalog = useFrameImplementations();
+	const { ref, slotNames } = useEffectiveFrame(instance);
+	const id = formatEntityRef(ref);
+	const resolved = useMemo(() => resolveFrameView(ref, catalog, "record"), [ref, catalog]);
+	const t = useFrameT(id);
+	const compiled = controller.screen;
+	const plan = controller.plan;
+	const slots = {};
+	for (const name of slotNames) {
+		if (name === FORM_SLOT) {
+			slots[name] = jsx(SlotWrapper, { name }, name);
+			continue;
+		}
+		slots[name] = (plan?.slots[name] ?? []).every((node) => node.state === "absent") ? null : jsx(SlotWrapper, { name }, name);
+	}
+	slots[FORM_SLOT] ??= jsx(SlotWrapper, { name: FORM_SLOT });
+	const idField = app.registry.get(resource)?.data?.idField ?? "id";
+	const access = useFieldAccess(resource, "record", record === void 0 ? void 0 : policyRecordOf(controller, record));
+	const projected = useMemo(() => frameRecord(record, compiled, plan?.slots, idField, (name) => access[name]?.view === "visible"), [
+		record,
+		compiled,
+		plan,
+		idField,
+		access
+	]);
+	const quickHost = chrome.hostTitle === true && quick !== null;
+	const props = {
+		slots,
+		host: quickHost ? quick.host : "page",
+		mode,
+		screen: {
+			resource,
+			entry: quickHost ? "quick" : "route"
+		},
+		record: mode === "create" ? void 0 : projected,
+		t
+	};
+	const policyRecord = policyRecordOf(controller, record);
+	const rowId = record?.[idField];
+	const actionRow = useMemo(() => ({
+		...policyRecord ?? {},
+		id: typeof rowId === "string" || typeof rowId === "number" ? String(rowId) : ""
+	}), [policyRecord, rowId]);
+	const showItemActions = useShownItemActions(resource, actionRow, "show");
+	const showActions = mode === "show" && record !== void 0 && showItemActions.length > 0;
+	const View = resolved.view;
+	const builtin = isBuiltinRecordView(resolved);
+	return jsxs(Fragment$1, { children: [builtin ? null : jsxs(Fragment$1, { children: [jsx(HeaderTypeNotice, { resource }), jsx(ChangeTypeButton, {})] }), jsx(TypeChromeDrawnContext.Provider, {
+		value: !builtin,
+		children: jsx(Suspense, {
+			fallback: jsx(RecordState, { state: "loading" }),
+			children: jsx(FrameObligations, {
+				id,
+				mode,
+				showActions,
+				root: chrome.root ?? NO_ROOT,
+				children: jsx(View, { ...props })
+			})
+		})
+	})] });
+}
+//#endregion
+//#region src/record/type-offer.tsx
+function TypeOffer({ resource, offer, onChoose }) {
+	const app = useApp();
+	const t = useOptionalT();
+	const tid = useTestIds();
+	const def = app.registry.get(resource);
+	const by = def?.types?.by;
+	const field = by === void 0 ? void 0 : def?.fields[by];
+	const ref = def?.ref ?? {
+		namespace: "default",
+		id: resource
+	};
+	return jsxs("section", {
+		"aria-labelledby": "type-offer-title",
+		className: "flex flex-col gap-3",
+		children: [jsxs("div", {
+			className: "flex flex-col gap-1",
+			children: [jsx("h2", {
+				id: "type-offer-title",
+				className: "text-base font-semibold",
+				children: t("create.typeOffer.title", { defaultValue: "Choose a type" })
+			}), jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: t("create.typeOffer.hint", { defaultValue: "The type decides which fields the record has." })
+			})]
+		}), offer.status === "pending" ? jsxs("div", {
+			"aria-busy": "true",
+			className: "flex flex-col gap-2",
+			children: [jsx(Skeleton, { className: "h-10 w-full" }), jsx(Skeleton, { className: "h-10 w-full" })]
+		}) : offer.types.length === 0 ? jsx("p", {
+			role: "status",
+			className: "text-sm text-muted-foreground",
+			children: t("create.typeOffer.empty", { defaultValue: "No type can be created here." })
+		}) : jsx("ul", {
+			className: "grid grid-cols-1 gap-2 sm:grid-cols-2",
+			children: offer.types.map((type) => jsx("li", { children: jsx("button", {
+				type: "button",
+				"data-testid": tid.typeOffer(resource, type),
+				onClick: () => onChoose(type),
+				className: "flex w-full items-center gap-2 rounded-md border px-3 py-2 text-left text-sm hover:bg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+				children: by === void 0 || field === void 0 ? type : jsx(FieldDisplay, {
+					resource: ref,
+					name: by,
+					field,
+					value: type,
+					fallback: jsx("span", { children: type })
+				})
+			}) }, type))
+		})]
+	});
+}
+//#endregion
+//#region src/record/record-screen.tsx
+function isAbort(error) {
+	if (error === null || typeof error !== "object" && typeof error !== "function") return false;
+	try {
+		return error.name === "AbortError";
+	} catch {
+		return false;
+	}
+}
+function canonicalName(resource) {
+	const ref = normalizeEntityRef(typeof resource === "string" ? resource : resource.ref);
+	return canonicalEntityNodeKey({
+		name: ref.id,
+		ref
+	});
+}
+function frameId(frame) {
+	return frameRecordId(frame);
+}
+function RecordFrameHost(props) {
+	const { resource, mode } = props;
+	const controller = useFormController({
+		resource,
+		mode,
+		...props.recordId === void 0 ? {} : { recordId: props.recordId },
+		...props.type === void 0 ? {} : { type: props.type },
+		...props.record === void 0 ? {} : { record: props.record },
+		...props.defaults === void 0 ? {} : { defaults: props.defaults },
+		...props.onSubmit === void 0 ? {} : { onSubmit: props.onSubmit },
+		...props.hostTitle ? { entry: "quick" } : {}
+	});
+	const inputApplied = useRef(false);
+	const { input } = props;
+	const plan = controller.plan;
+	useEffect(() => {
+		if (inputApplied.current || input === void 0 || mode !== "create" || plan === null) return;
+		inputApplied.current = true;
+		for (const [key, value] of Object.entries(input)) if (plan.fields[key] === "active") controller.setValue(key, value);
+	}, [
+		input,
+		mode,
+		plan,
+		controller
+	]);
+	const tid = useTestIds();
+	const formId = `record-form-${useId()}`;
+	const root = useRef(null);
+	const [submitError, setSubmitError] = useState(void 0);
+	const latest = useRef({
+		controller,
+		onSuccess: props.onSuccess
+	});
+	latest.current = {
+		controller,
+		onSuccess: props.onSuccess
+	};
+	const mounted = useRef(true);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	const submit = useCallback(async () => {
+		setSubmitError(void 0);
+		const outcome = await latest.current.controller.submit();
+		if (!mounted.current) return;
+		if (outcome.status === "submitted") latest.current.onSuccess?.(outcome.result);
+		else if (outcome.status === "failed" && !isAbort(outcome.error)) setSubmitError(outcome.error ?? null);
+	}, []);
+	const record = controller.record;
+	const frame = useMemo(() => ({
+		resource,
+		recordId: props.recordId,
+		mode,
+		record,
+		controller
+	}), [
+		resource,
+		props.recordId,
+		mode,
+		record,
+		controller
+	]);
+	const { chooseType } = props;
+	const typedAndAccepted = mode === "create" && controller.typeOffer !== null && controller.failure === null;
+	const routeScreen = useIsRouteScreen();
+	const adapter = useOptionalRouterAdapter();
+	const hostRouter = routeScreen ? adapter : null;
+	const guardText = useNavigationGuardText();
+	const changeType = useMemo(() => typedAndAccepted ? () => {
+		if (hostRouter === null && latest.current.controller.isDirty && !window.confirm(`${guardText.title}\n\n${guardText.body}`)) return;
+		chooseType(void 0);
+	} : void 0, [
+		typedAndAccepted,
+		chooseType,
+		hostRouter,
+		guardText.title,
+		guardText.body
+	]);
+	const typesDecl = useApp().registry.get(resource)?.types;
+	const loaded = controller.record;
+	const unsupportedType = useMemo(() => {
+		if (mode === "create" || typesDecl === void 0 || loaded === void 0) return void 0;
+		const value = loaded[typesDecl.by];
+		const name = typeof value === "string" && value !== "" ? value : null;
+		return name !== null && typesDecl.items.some((item) => item.name === name) ? void 0 : name;
+	}, [
+		mode,
+		typesDecl,
+		loaded
+	]);
+	const chrome = useMemo(() => ({
+		...props.onCancel === void 0 ? {} : { onCancel: props.onCancel },
+		...props.submitLabel === void 0 ? {} : { submitLabel: props.submitLabel },
+		...props.extraActions === void 0 ? {} : { extraActions: props.extraActions },
+		...changeType === void 0 ? {} : { changeType },
+		...unsupportedType === void 0 ? {} : { unsupportedType },
+		...props.hostTitle ? { hostTitle: true } : {},
+		formId,
+		submitError,
+		submit,
+		root
+	}), [
+		props.onCancel,
+		props.submitLabel,
+		props.extraActions,
+		changeType,
+		unsupportedType,
+		props.hostTitle,
+		formId,
+		submitError,
+		submit
+	]);
+	usePublishDocVariant(mode === "show" ? resource : void 0, record);
+	const failure = controller.failure;
+	const offering = failure?.kind === "type-required" && controller.typeOffer !== null;
+	useEffect(() => {
+		if (failure === null || offering || process.env.NODE_ENV === "production") return;
+		console.error(`[burojs] <RecordScreen resource="${resource}" mode="${mode}"> cannot render its screen: ${failure.kind === "screen" ? `${failure.failure.code} at ${failure.failure.path.join(".")}: ${failure.failure.message}` : "a typed create needs an accepted type"}.`);
+	}, [
+		failure,
+		offering,
+		resource,
+		mode
+	]);
+	const setValues = useCallback((patch) => {
+		for (const [name, value] of Object.entries(patch)) latest.current.controller.setValue(name, value);
+	}, []);
+	const formControl = useMemo(() => ({ setValues }), [setValues]);
+	const id = frameId(frame);
+	const rootId = mode === "show" ? tid.pageShow(resource, id ?? "") : mode === "edit" ? tid.pageEdit(resource, id ?? "") : tid.pageCreate(resource);
+	return jsx(RouteSourceContext.Provider, {
+		value: null,
+		children: jsx(RecordFrameContext.Provider, {
+			value: frame,
+			children: jsx(FrameChromeContext.Provider, {
+				value: chrome,
+				children: jsxs(FormControlProvider, {
+					value: formControl,
+					children: [jsx(DeepLinkScope, {
+						plan: controller.plan,
+						enabled: routeScreen && mode !== "create",
+						children: jsx("div", {
+							ref: root,
+							"data-testid": rootId,
+							className: "flex flex-col gap-[var(--buro-section-gap)]",
+							children: offering && controller.typeOffer !== null ? jsx(TypeOffer, {
+								resource,
+								offer: controller.typeOffer,
+								onChoose: (type) => chooseType(type)
+							}) : failure !== null ? jsxs(Fragment$1, { children: [jsx(RecordState, { state: "error" }), jsx(FormActions, {})] }) : mode === "edit" && unsupportedType !== void 0 ? jsx(UndeclaredTypeNotice, {
+								resource,
+								typeValue: unsupportedType
+							}) : jsx(RecordFrameView, { ...props.frame === void 0 ? {} : { frame: props.frame } })
+						})
+					}), controller.checkGate === null ? null : jsx(CheckConfirmDialog, {
+						state: controller.checkGate,
+						testid: `${tid.form(resource, mode, id)}:checks`
+					})]
+				})
+			})
+		})
+	});
+}
+function RecordScreen(props) {
+	const app = useApp();
+	const routeScreen = useContext(RouteScreenClaimContext);
+	const quickScreen = useContext(QuickScreenClaimContext);
+	const route = useContext(RouteSourceContext);
+	const resource = canonicalName(props.resource);
+	const tabs = useTabsUrlState(props.mode, routeScreen);
+	const adapter = useOptionalRouterAdapter();
+	const router = routeScreen ? adapter : null;
+	const navigate = useRouteNavigate();
+	const [local, setLocal] = useState(props.type);
+	const [typeProp, setTypeProp] = useState(props.type);
+	if (props.type !== typeProp) {
+		setTypeProp(props.type);
+		setLocal(props.type);
+	}
+	const [chose, setChose] = useState(false);
+	const fromUrl = router?.searchParams.get("type") ?? void 0;
+	const type = props.mode !== "create" ? props.type : router === null ? local : chose ? fromUrl : props.type ?? fromUrl;
+	const chooseType = useCallback((next) => {
+		if (router === null) {
+			setLocal(next);
+			return;
+		}
+		setChose(true);
+		const params = new URLSearchParams(router.searchParams);
+		if (next === void 0) params.delete("type");
+		else params.set("type", next);
+		const query = params.toString();
+		navigate(query === "" ? router.pathname : `${router.pathname}?${query}`);
+	}, [router, navigate]);
+	if (app.registry.get(resource) === void 0) return jsx(RecordState, { state: "not-found" });
+	const { type: _declared, ...rest } = props;
+	return jsx(RouteScreenClaimContext.Provider, {
+		value: false,
+		children: jsx(QuickScreenClaimContext.Provider, {
+			value: false,
+			children: jsx(RouteSourceContext.Provider, {
+				value: routeScreen || quickScreen ? route : null,
+				children: jsx(RouteScreenContext.Provider, {
+					value: routeScreen,
+					children: jsx(ResourceContext.Provider, {
+						value: { resource },
+						children: jsx(ScreenStateProvider, {
+							open: tabs.open,
+							onOpenChange: tabs.onOpenChange,
+							children: jsx(RecordFrameHost, {
+								...rest,
+								...type === void 0 ? {} : { type },
+								resource,
+								chooseType,
+								hostTitle: quickScreen
+							}, type ?? "")
+						})
+					})
+				})
+			})
+		})
+	});
+}
+//#endregion
+//#region src/layout/record-trail-store.ts
+const stores = new WeakMap();
+function storeOf(app) {
+	let store = stores.get(app);
+	if (store === void 0) {
+		store = {
+			current: null,
+			listeners: new Set()
+		};
+		stores.set(app, store);
+	}
+	return store;
+}
+function set(store, value) {
+	store.current = value;
+	for (const listener of store.listeners) listener();
+}
+function recordTrailKey(resource, id, route) {
+	return JSON.stringify([
+		resource,
+		id,
+		route
+	]);
+}
+function usePublishRecordTrail(entry) {
+	const app = useApp();
+	const key = entry?.key;
+	const title = entry?.title;
+	const flowLabel = entry?.flowLabel;
+	useEffect(() => {
+		if (key === void 0 || title === void 0) return;
+		const store = storeOf(app);
+		const value = {
+			key,
+			title,
+			...flowLabel === void 0 ? {} : { flowLabel }
+		};
+		set(store, value);
+		return () => {
+			if (store.current === value) set(store, null);
+		};
+	}, [
+		app,
+		key,
+		title,
+		flowLabel
+	]);
+}
+function usePublishedRecordTrail(key) {
+	const store = storeOf(useApp());
+	const subscribe = useCallback((listener) => {
+		store.listeners.add(listener);
+		return () => {
+			store.listeners.delete(listener);
+		};
+	}, [store]);
+	const current = useSyncExternalStore(subscribe, () => store.current, () => null);
+	return current !== null && current.key === key ? current : null;
+}
+//#endregion
+//#region src/layout/route-trail.ts
+function useTrailContext() {
+	const app = useApp();
+	const caps = useI18nCaps();
+	const isVisible = useNavVisible();
+	const t = useT();
+	return {
+		registry: app.registry,
+		caps,
+		isVisible,
+		t
+	};
+}
+function groupCrumbHref(registry, group, isVisible) {
+	let href;
+	try {
+		href = navHrefFor(registry, group, { isVisible });
+	} catch {
+		return;
+	}
+	return matchPath(registry, href, { isVisible }) === null ? void 0 : href;
+}
+function groupCrumbs(ctx, chain) {
+	return chain.map((group) => {
+		const key = canonicalNavKey(group);
+		return {
+			label: resolveNavLabel(ctx.caps, `groups.${key}`, group.label),
+			href: groupCrumbHref(ctx.registry, key, ctx.isVisible)
+		};
+	});
+}
+function nonEmpty(crumbs) {
+	return crumbs.length > 0 ? crumbs : void 0;
+}
+function recordActionOf(match) {
+	if (match === null || match.kind !== "resource") return void 0;
+	switch (match.action) {
+		case "show":
+		case "edit":
+		case "create": return match.action;
+		default: return;
+	}
+}
+function recordTrail(ctx, input) {
+	const { resource, action, id } = input;
+	const leadingSegments = nonEmpty(groupCrumbs(ctx, input.groupChain));
+	if (action !== "create" && id === "") return {
+		resource,
+		leadingSegments
+	};
+	const recordLabel = input.title || id;
+	const middleSegments = action === "edit" ? [isShowAvailable(ctx.registry, resource) ? {
+		label: recordLabel,
+		href: resolveRoute(showTarget(resource, id), ctx.registry)
+	} : { label: recordLabel }] : void 0;
+	const pageLabel = action === "create" ? ctx.t("breadcrumbs.create") : action === "edit" ? ctx.t("breadcrumbs.edit") : recordLabel;
+	return {
+		resource,
+		recordId: action === "create" ? void 0 : id,
+		pageLabel,
+		leadingSegments,
+		middleSegments
+	};
+}
+function recordTrailRoute(registry, match) {
+	if (match === null || match.kind !== "resource") return null;
+	const resource = canonicalNavKey(match);
+	const { groupChain } = match;
+	if (match.action === "flow") return {
+		resource,
+		action: "show",
+		id: match.id ?? "",
+		flow: match.flow ?? "",
+		groupChain
+	};
+	const action = recordActionOf(match);
+	if (action === void 0 || !recordRouteAvailable(registry, resource, action)) return null;
+	return {
+		resource,
+		action,
+		id: action === "create" ? "" : match.id ?? "",
+		groupChain
+	};
+}
+function headerTrail(ctx, match) {
+	if (match === null) return null;
+	const key = canonicalNavKey(match);
+	switch (match.kind) {
+		case "resource": {
+			const leadingSegments = nonEmpty(groupCrumbs(ctx, match.groupChain));
+			const action = recordActionOf(match);
+			if (recordTrailRoute(ctx.registry, match) !== null) return null;
+			if (action === void 0) return {
+				resource: key,
+				leadingSegments
+			};
+			return {
+				resource: key,
+				recordId: match.id,
+				pageLabel: ctx.t("router.notFoundTitle"),
+				leadingSegments
+			};
+		}
+		case "custom-page": {
+			const page = ctx.registry.customPages.get(match.name);
+			if (page === void 0 || !ctx.isVisible(page)) return null;
+			return {
+				name: key,
+				pageLabel: resolveNavLabel(ctx.caps, `pages.${key}`, page?.label ?? match.name),
+				leadingSegments: nonEmpty(groupCrumbs(ctx, match.groupChain))
+			};
+		}
+		case "group-index": {
+			const own = match.groupChain[match.groupChain.length - 1];
+			if (own === void 0) return null;
+			const crumbs = groupCrumbs(ctx, match.groupChain);
+			const current = crumbs[crumbs.length - 1];
+			return {
+				name: canonicalNavKey(own),
+				pageLabel: current.label,
+				leadingSegments: nonEmpty(crumbs.slice(0, -1))
+			};
+		}
+		default: return null;
+	}
+}
+function recentStorageKey(userId) {
+	return `buro:recent:v2:${userId}`;
+}
+function isRecent(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const entry = value;
+	return typeof entry.canonicalRef === "string" && typeof entry.id === "string" && typeof entry.label === "string" && (entry.labelField === void 0 || typeof entry.labelField === "string") && typeof entry.at === "string";
+}
+function parse(raw) {
+	if (raw === null) return [];
+	try {
+		const parsed = JSON.parse(raw);
+		if (typeof parsed !== "object" || parsed === null) return [];
+		const envelope = parsed;
+		if (envelope.version !== 2 || !Array.isArray(envelope.items)) return [];
+		return envelope.items.filter(isRecent);
+	} catch {
+		return [];
+	}
+}
+function readRecentRecords(userId) {
+	if (typeof window === "undefined") return [];
+	try {
+		return parse(window.localStorage.getItem(recentStorageKey(userId)));
+	} catch {
+		return [];
+	}
+}
+function writeRecentRecord(userId, entry) {
+	if (typeof window === "undefined") return;
+	try {
+		const key = recentStorageKey(userId);
+		const envelope = {
+			version: 2,
+			items: [entry, ...parse(window.localStorage.getItem(key)).filter((item) => !(item.canonicalRef === entry.canonicalRef && item.id === entry.id))].slice(0, 5)
+		};
+		window.localStorage.setItem(key, JSON.stringify(envelope));
+	} catch {}
+}
+function text(value) {
+	return typeof value === "string" && value.length > 0 ? value : void 0;
+}
+const RECENT_LABEL_KEYS = [
+	"alias",
+	"name",
+	"title",
+	"label"
+];
+function recentLabel(record, id, isGuarded = () => false) {
+	for (const key of RECENT_LABEL_KEYS) {
+		if (isGuarded(key)) continue;
+		const value = text(record[key]);
+		if (value !== void 0) return {
+			label: value,
+			field: key
+		};
+	}
+	return { label: id };
+}
+//#endregion
+//#region src/layout/use-record-visit.ts
+function useRecordVisit(resource, record, opts) {
+	const userId = useCurrentUserId();
+	const raw = record?.id;
+	const id = typeof raw === "string" || typeof raw === "number" ? String(raw) : void 0;
+	const app = useApp();
+	const fields = app.registry.get(resource)?.fields;
+	const rules = app.ruleSource?.rules(resource) ?? [];
+	const isGuarded = (field) => fields !== void 0 && Object.hasOwn(fields, field) && fieldSensitivity(fields[field]) !== void 0 || addressesCapability(rules, "view", {
+		kind: "field",
+		name: field
+	});
+	const picked = record != null && id !== void 0 ? recentLabel(record, id, isGuarded) : void 0;
+	const label = picked?.label;
+	const labelField = picked?.field;
+	const canonicalRef = canonicalResourceName(resource);
+	const { isCurrentData } = opts;
+	useEffect(() => {
+		if (userId === null || !isCurrentData || id === void 0 || id === "") return;
+		if (label === void 0) return;
+		writeRecentRecord(userId, {
+			canonicalRef,
+			id,
+			label,
+			...labelField === void 0 ? {} : { labelField },
+			at: new Date().toISOString()
+		});
+	}, [
+		userId,
+		isCurrentData,
+		canonicalRef,
+		id,
+		label,
+		labelField
+	]);
+}
+//#endregion
+//#region src/layout/record-page.tsx
+function recordErrorState(error) {
+	const { kind } = normalizeDataError(error);
+	if (kind === "not-found" || kind === "forbidden") return "not-found";
+	if (kind === "auth") return "session-expired";
+	return "error";
+}
+function useMountedRef() {
+	const mounted = useRef(true);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	return mounted;
+}
+function RecordRouteHeader({ resource, action, id, record }) {
+	const recordName = useRecordTitle(resource, action === "create" ? void 0 : id, record);
+	usePublishRecordTrail(action === "create" ? null : {
+		key: recordTrailKey(resource, id, action),
+		title: recordName
+	});
+	return jsx(PageHeader, {
+		resource,
+		mode: action,
+		...action === "create" ? {} : { recordName }
+	});
+}
+function RecordShow({ resource, id, record, shown }) {
+	return jsxs("div", { children: [jsx(RecordRouteHeader, {
+		resource,
+		action: "show",
+		id,
+		record: shown
+	}), jsx(RecordScreen, {
+		resource,
+		mode: "show",
+		recordId: id,
+		record
+	})] });
+}
+function RecordEdit({ resource, id, record, shown }) {
+	const app = useApp();
+	const navigate = useRouteNavigate();
+	const mounted = useMountedRef();
+	const back = recordReturnTarget(app.registry, resource, id);
+	return jsxs("div", { children: [jsx(RecordRouteHeader, {
+		resource,
+		action: "edit",
+		id,
+		record: shown
+	}), jsx(RecordScreen, {
+		resource,
+		mode: "edit",
+		recordId: id,
+		record,
+		onCancel: () => navigate(back),
+		onSuccess: () => {
+			if (mounted.current) navigate(back);
+		}
+	})] });
+}
+function createdId(result) {
+	const id = result?.id;
+	return typeof id === "string" || typeof id === "number" ? String(id) : void 0;
+}
+function RecordCreate({ resource, defaults }) {
+	const app = useApp();
+	const navigate = useRouteNavigate();
+	const mounted = useMountedRef();
+	const adapter = useOptionalRouterAdapter();
+	const list = listTarget(resource);
+	const type = adapter?.searchParams.get("type") ?? void 0;
+	return jsxs("div", { children: [jsx(RecordRouteHeader, {
+		resource,
+		action: "create",
+		id: ""
+	}), jsx(RouteScreenClaimContext.Provider, {
+		value: true,
+		children: jsx(RecordScreen, {
+			resource,
+			mode: "create",
+			...type === void 0 ? {} : { type },
+			...defaults === void 0 ? {} : { defaults },
+			onCancel: () => navigate(list),
+			onSuccess: (result) => {
+				if (!mounted.current) return;
+				const id = createdId(result);
+				navigate(id === void 0 ? list : recordReturnTarget(app.registry, resource, id));
+			}
+		})
+	})] });
+}
+function RecordRead({ resource, action, id }) {
+	const app = useApp();
+	const def = app.registry.get(resource);
+	const projection = useMemo(() => def === void 0 ? void 0 : dtoFields(def, "record"), [def]);
+	const query = useOne(resource, {
+		id,
+		retry: retryRecordRead,
+		...projection === void 0 ? {} : { projection }
+	});
+	const result = query.data;
+	const read = result?.data;
+	const projected = useProjectedRecord(resource, read, { placeholder: query.isPlaceholderData });
+	const showAvailability = useAvailabilityResolver(resource, "show");
+	const permissions = useCtx((c) => c.permissions);
+	const showRuled = addressesCapability(app.ruleSource.rules(resource), "run", {
+		kind: "action",
+		name: "show"
+	});
+	const showHidden = showRuled && read !== null && typeof read === "object" && showAvailability("show", read).state !== "available";
+	const showSettled = !showRuled || !query.isPlaceholderData && permissions?.status !== "loading" && permissions?.status !== "error";
+	useRecordVisit(resource, projected.status === "ready" && showSettled && !showHidden ? projected.value : null, { isCurrentData: !query.isPlaceholderData });
+	const route = useMemo(() => Object.freeze({ id }), [id]);
+	const availability = useAvailabilityResolver(resource, "edit");
+	if (result !== void 0) {
+		const record = result.data;
+		if (record === null || typeof record !== "object") return jsx(RecordState, { state: "not-found" });
+		const loaded = record;
+		if (showRuled) {
+			if (query.isPlaceholderData || permissions?.status === "loading") return jsx(RecordState, { state: "loading" });
+			if (permissions?.status === "error") return jsx(RecordState, { state: "not-found" });
+			if (showHidden) return jsx(RecordState, { state: "not-found" });
+		}
+		if (projected.status === "pending" || projected.value === null) return jsx(RecordState, { state: "loading" });
+		const shown = projected.value;
+		if (action === "edit") {
+			const edit = availability("edit", loaded).state;
+			if (edit === "hidden" || edit === "absent") return jsx(RecordState, { state: "not-found" });
+		}
+		return jsx(RouteSourceContext.Provider, {
+			value: route,
+			children: jsx(RouteScreenClaimContext.Provider, {
+				value: true,
+				children: action === "edit" ? jsx(RecordEdit, {
+					resource,
+					id,
+					record: loaded,
+					shown
+				}) : jsx(RecordShow, {
+					resource,
+					id,
+					record: loaded,
+					shown
+				})
+			})
+		});
+	}
+	if (query.error != null) {
+		const state = recordErrorState(query.error);
+		return jsx(RecordState, {
+			state,
+			onRetry: state === "error" ? () => void query.refetch() : void 0
+		});
+	}
+	return jsx(RecordState, { state: "loading" });
+}
+function RecordRouteBody(props) {
+	if (props.action === "create") return jsx(RecordCreate, { ...props });
+	if (props.id === "") return jsx(RecordState, { state: "not-found" });
+	return jsx(RecordRead, { ...props });
+}
+function RecordRoute(props) {
+	const missingRuntime = useOptionalDataRuntime() === null;
+	useEffect(() => {
+		if (!missingRuntime || process.env.NODE_ENV === "production") return;
+		console.error(`[burojs] The '${props.resource}' record page has no data runtime to read or write with: BuroProvider.dataRuntime is not set. Pass <BuroProvider dataRuntime={…}> (createDataRuntime from @burojs/react); until then record routes render the error state.`);
+	}, [missingRuntime, props.resource]);
+	if (missingRuntime) return jsx(RecordState, { state: "error" });
+	return jsx(RecordRouteBody, { ...props }, `${props.resource}:${props.id}`);
+}
+function recordPageProblem(input) {
+	const { props, resource, action } = input;
+	if (resource === void 0 || action === void 0) return "[burojs] <RecordPage> needs both `resource` and `action`. Pass them; until then it renders not-found.";
+	if (!input.onRecordRoute) return `[burojs] <RecordPage resource="${resource}" action="${action}"> is not on a record route (show, edit or create), so it has no record to read: render it on one, under a RouterAdapterProvider. Until then it renders not-found.`;
+	if (props.defaults !== void 0 && action !== "create") return `[burojs] <RecordPage defaults> applies to create only; on this '${action}' route it is ignored.`;
+	return null;
+}
+const recordPageProblemsLogged = new WeakMap();
+function RecordPage(props) {
+	const app = useApp();
+	const match = useMatch();
+	const id = match === null ? null : match.id ?? "";
+	const { resource, action } = props;
+	const onRecordRoute = recordActionOf(match) !== void 0;
+	const problem = recordPageProblem({
+		props,
+		resource,
+		action,
+		onRecordRoute
+	});
+	useEffect(() => {
+		if (problem === null || process.env.NODE_ENV === "production") return;
+		let logged = recordPageProblemsLogged.get(app);
+		if (logged === void 0) {
+			logged = new Set();
+			recordPageProblemsLogged.set(app, logged);
+		}
+		if (logged.has(problem)) return;
+		logged.add(problem);
+		console.error(problem);
+	}, [app, problem]);
+	if (resource === void 0 || action === void 0 || id === null || !onRecordRoute) return jsx(RecordState, { state: "not-found" });
+	const route = action === "create" ? {
+		resource,
+		action,
+		defaults: props.defaults
+	} : {
+		resource,
+		action
+	};
+	return jsx(RecordRoute, {
+		...route,
+		id
+	});
+}
+//#endregion
+//#region src/layout/resource-page-router.tsx
+function ResourcePageRouterEmpty() {
+	const t = useT();
+	return jsxs("div", {
+		"data-testid": "resource-page-router-empty",
+		className: "flex flex-col items-center justify-center gap-1 px-6 py-24 text-center",
+		children: [jsx("h2", {
+			className: "text-base font-semibold tracking-tight",
+			children: t("router.emptyTitle")
+		}), jsx("p", {
+			className: "max-w-sm text-sm text-muted-foreground",
+			children: t("router.emptyBody")
+		})]
+	});
+}
+function ResourcePageRouter({ match }) {
+	const app = useApp();
+	const qualifiedMatch = match;
+	const resource = canonicalNavKey(qualifiedMatch);
+	const target = canonicalNavKey({
+		name: match.target ?? match.name,
+		ref: qualifiedMatch.targetRef
+	});
+	const recordAction = recordActionOf(match);
+	switch (match.kind) {
+		case "resource":
+			if (match.action === "list") {
+				const def = app.registry.get(resource);
+				return def !== void 0 && !hasListPage(def) ? jsx(NavAreaNotFound, {}) : jsx(ResourceListPage, { resource });
+			}
+			if (match.action === "flow") return jsx(PageFlowRouteLoader, { match });
+			if (recordAction === void 0) return jsx(ResourcePageRouterEmpty, {});
+			if (!recordRouteAvailable(app.registry, resource, recordAction)) return jsx(NavAreaNotFound, {});
+			return jsx(RecordRoute, {
+				resource,
+				action: recordAction,
+				id: match.id ?? ""
+			});
+		case "custom-page": {
+			const page = app.registry.customPages.get(resource);
+			if (page === void 0) return jsx(ResourcePageRouterEmpty, {});
+			if (!page.body?.length) return jsx(NavAreaNotFound, {});
+			return jsx(PageHost, {
+				page,
+				match,
+				notFound: jsx(NavAreaNotFound, {})
+			}, resource);
+		}
+		case "group-index": {
+			const indexPage = app.registry.customPages.get(target);
+			if (indexPage?.body?.length) return jsx(PageHost, {
+				page: indexPage,
+				match,
+				notFound: jsx(NavAreaNotFound, {})
+			}, target);
+			const targetDef = app.registry.get(target);
+			if (targetDef !== void 0) return hasListPage(targetDef) ? jsx(ResourceListPage, { resource: target }) : jsx(NavAreaNotFound, {});
+			return jsx(ResourcePageRouterEmpty, {});
+		}
+		default: return jsx(ResourcePageRouterEmpty, {});
+	}
+}
+function NavAreaPageSkeleton() {
+	return jsxs("div", {
+		className: "space-y-3 p-6",
+		role: "status",
+		"aria-busy": "true",
+		"aria-live": "polite",
+		"data-testid": "nav-area-skeleton",
+		children: [
+			jsx("span", {
+				className: "sr-only",
+				children: "Loading…"
+			}),
+			jsx("div", { className: "h-6 w-48 animate-pulse rounded bg-muted/60" }),
+			jsx("div", { className: "h-4 w-full animate-pulse rounded bg-muted/40" }),
+			jsx("div", { className: "h-4 w-5/6 animate-pulse rounded bg-muted/40" }),
+			jsx("div", { className: "h-4 w-2/3 animate-pulse rounded bg-muted/40" })
+		]
+	});
+}
+function NavAreaNotFound() {
+	const t = useT();
+	return jsxs("div", {
+		"data-testid": "nav-area-not-found",
+		className: "flex flex-col items-center justify-center gap-1 px-6 py-24 text-center",
+		children: [jsx("h2", {
+			className: "text-base font-semibold tracking-tight",
+			children: t("router.notFoundTitle")
+		}), jsx("p", {
+			className: "max-w-sm text-sm text-muted-foreground",
+			children: t("router.notFoundBody")
+		})]
+	});
+}
+const adapterNoticeGiven = new WeakSet();
+function NavAreaPage() {
+	const match = useMatch();
+	const app = useApp();
+	const noAdapter = useOptionalRouterAdapter() === null;
+	useEffect(() => {
+		if (!noAdapter || process.env.NODE_ENV === "production") return;
+		if (adapterNoticeGiven.has(app)) return;
+		adapterNoticeGiven.add(app);
+		console.error("[burojs] <NavAreaPage> has no location to match: no RouterAdapterProvider is mounted. Mount your router’s adapter (RouterAdapterProvider from @burojs/react) above <BuroProvider>; until then every route renders not-found.");
+	}, [app, noAdapter]);
+	return jsx(Suspense, {
+		fallback: jsx(NavAreaPageSkeleton, {}),
+		children: match ? jsx(NavChrome, { children: jsx(ResourcePageRouter, { match }) }) : jsx(NavAreaNotFound, {})
+	});
+}
+//#endregion
+export { useLayoutResolver as A, useNavChromeBoundary as C, usePageAllowed as D, useNavVisible as E, canonicalNavKey as M, canonicalResourceKey as N, layoutSlot as O, NavChromeBoundaryProvider as S, useMatch as T, useFormControl as _, recordErrorState as a, RecordState as b, readRecentRecords as c, recordTrailRoute as d, useTrailContext as f, RecordScreen as g, usePublishedRecordTrail as h, RecordPage as i, buildNavItems as j, useLayout as k, headerTrail as l, usePublishRecordTrail as m, NavAreaPage as n, useRecordVisit as o, recordTrailKey as p, ResourcePageRouter as r, RECENT_LABEL_KEYS as s, NavAreaNotFound as t, recordTrail as u, PlannedBody as v, useHref as w, NavChrome as x, ResourceListPage as y };
+
+//# sourceMappingURL=resource-page-router-T4vS5gbJ.js.map