@burojs/ui-shadcn 0.6.0 → 0.7.0

package/dist/{resource-page-router-PXfMW9nh.cjs → resource-page-router-C_kGW2o_.cjs}

@@ -1,7 +1,11 @@
-const require_check_confirm_dialog = require("./check-confirm-dialog--gPFnEeg.cjs");
+const require_use_theme = require("./use-theme-DFlpXils.cjs");
+const require_toaster = require("./toaster-BbByOytP.cjs");
+const require_check_confirm_dialog = require("./check-confirm-dialog-C-NHgMST.cjs");
 const require_button = require("./button-BxnnE28H.cjs");
+const require_relation_create = require("./relation-create-DDEYcKfw.cjs");
 const require_skeleton = require("./skeleton-_1gP7wan.cjs");
-const require_place_node = require("./place-node-C5SmIAYU.cjs");
+const require_place_node = require("./place-node-CNb3w-c7.cjs");
+const require_success_notices = require("./success-notices-Dl3M1fZP.cjs");
 let _burojs_core = require("@burojs/core");
 let _burojs_react = require("@burojs/react");
 let react = require("react");
@@ -14,51 +18,104 @@ 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 = (0, _burojs_core.nodeKind)(child);
-		const childKey = canonicalNavKey(child);
-		const href = (0, _burojs_core.navHrefFor)(registry, childKey, { isVisible: isEligible });
-		if (kind === "group") {
-			const label = (0, _burojs_core.resolveNavLabel)(caps, `groups.${childKey}`, (0, _burojs_core.declaredText)("chrome", child, "label"));
-			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: (0, _burojs_core.resolveNavLabel)(caps, `pages.${childKey}`, (0, _burojs_core.declaredText)("chrome", child, "label")),
-			href,
-			icon: icons?.page?.(childKey),
-			active: activeLeaf === childKey
-		});
-		else out.push({
-			kind: "resource",
-			name: childKey,
-			label: (0, _burojs_core.resolveResourceNavLabel)(caps, childKey, child),
-			href,
-			icon: icons?.resource?.(childKey),
-			active: activeLeaf === childKey
-		});
-	}
-	return out;
+//#region src/layout/layouts/secondary-sidebar-layout.tsx
+function Row({ it }) {
+	const RouterLink = require_toaster.useLinkComponent();
+	return (0, react_jsx_runtime.jsx)("li", { children: (0, react_jsx_runtime.jsxs)(RouterLink, {
+		href: it.href,
+		"data-testid": `nav-secondary-item:${it.name}`,
+		"aria-current": it.active ? "page" : void 0,
+		className: require_use_theme.cn("flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium outline-hidden ring-offset-background transition-colors", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", it.active ? "bg-secondary text-secondary-foreground" : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground"),
+		children: [it.icon != null && (0, react_jsx_runtime.jsx)("span", {
+			className: "inline-flex h-4 w-4 shrink-0 items-center justify-center",
+			"aria-hidden": "true",
+			children: it.icon
+		}), (0, react_jsx_runtime.jsx)("span", {
+			className: "truncate",
+			title: it.label,
+			children: it.label
+		})]
+	}) });
+}
+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}`, (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}`,
+		children: [
+			(0, react_jsx_runtime.jsx)("aside", {
+				className: "hidden w-64 shrink-0 border-r bg-background text-foreground md:block",
+				children: (0, react_jsx_runtime.jsxs)("div", {
+					className: "space-y-4 p-4",
+					children: [(0, react_jsx_runtime.jsx)("p", {
+						className: "px-3 text-base font-semibold tracking-tight",
+						children: label
+					}), (0, react_jsx_runtime.jsx)("nav", {
+						"aria-label": label,
+						children: (0, react_jsx_runtime.jsx)("ul", {
+							className: "space-y-0.5",
+							children: items.map((it) => (0, react_jsx_runtime.jsx)(Row, { it }, it.name))
+						})
+					})]
+				})
+			}),
+			(0, react_jsx_runtime.jsx)("nav", {
+				"aria-label": label,
+				"data-testid": `nav-secondary-select:${id}`,
+				className: "-mx-1 mb-4 flex snap-x snap-proximity gap-1.5 overflow-x-auto scroll-smooth px-1 pb-1 [-ms-overflow-style:none] [mask-image:linear-gradient(to_right,transparent,black_8px,black_calc(100%-8px),transparent)] [scrollbar-width:none] md:hidden [&::-webkit-scrollbar]:hidden",
+				children: items.map((it) => (0, react_jsx_runtime.jsx)(RouterLink, {
+					href: it.href,
+					"aria-current": it.active ? "page" : void 0,
+					className: require_use_theme.cn("snap-start whitespace-nowrap rounded-full border px-3 py-1.5 text-sm outline-hidden ring-offset-background transition-colors duration-150", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", it.active ? "border-primary/40 bg-primary/10 font-medium text-foreground" : "border-border text-muted-foreground hover:bg-accent/60 hover:text-accent-foreground"),
+					children: it.label
+				}, it.name))
+			}),
+			(0, react_jsx_runtime.jsx)("div", {
+				className: "min-w-0 flex-1 md:overflow-x-hidden md:p-6",
+				children
+			})
+		]
+	});
+}
+//#endregion
+//#region src/layout/layouts/tabs-layout.tsx
+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}`, (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}`,
+		children: [(0, react_jsx_runtime.jsx)("nav", {
+			"aria-label": label,
+			className: "flex gap-1 overflow-x-auto scroll-smooth border-b border-border [-ms-overflow-style:none] [mask-image:linear-gradient(to_right,transparent,black_8px,black_calc(100%-8px),transparent)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+			children: items.map((it) => (0, react_jsx_runtime.jsxs)(RouterLink, {
+				href: it.href,
+				"aria-current": it.active ? "page" : void 0,
+				"data-testid": `nav-tab:${it.name}`,
+				className: require_use_theme.cn("group/tab relative flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-t-sm px-3 py-2.5 text-sm outline-hidden ring-offset-background transition-colors duration-150", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", it.active ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"),
+				children: [
+					it.icon != null && (0, react_jsx_runtime.jsx)("span", {
+						className: "inline-flex h-4 w-4 shrink-0 items-center justify-center",
+						"aria-hidden": "true",
+						children: it.icon
+					}),
+					it.label,
+					(0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": "true",
+						className: require_use_theme.cn("pointer-events-none absolute inset-x-2 -bottom-px h-0.5 origin-center scale-x-0 rounded-full bg-primary opacity-0 transition-all duration-300 ease-out", it.active ? "scale-x-100 opacity-100" : "group-hover/tab:scale-x-100 group-hover/tab:opacity-30")
+					})
+				]
+			}, it.name))
+		}), (0, react_jsx_runtime.jsx)("div", {
+			className: "min-w-0",
+			children
+		})]
+	});
 }
 //#endregion
 //#region src/layout/nav-slots.ts
@@ -68,9 +125,33 @@ function layoutSlot(key) {
 function useLayout(key) {
 	return (0, _burojs_react.useComponent)(layoutSlot(key));
 }
+const BUILTIN_LAYOUTS = {
+	[layoutSlot("secondary-sidebar")]: SecondarySidebarLayout,
+	[layoutSlot("tabs")]: TabsLayout
+};
 function useLayoutResolver() {
 	const components = (0, react.useContext)(_burojs_react.ComponentsContext);
-	return (key) => components[layoutSlot(key)];
+	return (key) => components[layoutSlot(key)] ?? BUILTIN_LAYOUTS[layoutSlot(key)];
+}
+const unresolvedLayoutReported = new WeakMap();
+function useReportUnresolvedLayouts(groups, resolve) {
+	const app = (0, _burojs_react.useApp)();
+	(0, react.useEffect)(() => {
+		if (process.env.NODE_ENV === "production") return;
+		for (const group of groups) {
+			const layout = group.layout;
+			if (layout === "flat" || layout === "collapsible" || resolve(layout)) continue;
+			const key = canonicalNavKey(group);
+			let seen = unresolvedLayoutReported.get(app);
+			if (!seen) {
+				seen = new Set();
+				unresolvedLayoutReported.set(app, seen);
+			}
+			if (seen.has(key)) continue;
+			seen.add(key);
+			console.error(`[burojs] Nav group "${key}" declares layout "${layout}", and no renderer is registered for it. Register one as components["layout.${layout}"] on <BuroProvider>, or use a built-in layout: "secondary-sidebar", "tabs", "flat", "collapsible".`);
+		}
+	});
 }
 //#endregion
 //#region src/layout/use-nav-routing.ts
@@ -79,6 +160,10 @@ function useNavVisible() {
 	const allowed = usePageAllowed();
 	return (0, react.useCallback)((node) => (0, _burojs_core.evaluateVisible)(node.visible, ctx) && (!(0, _burojs_core.isCustomPageDef)(node) || allowed(node)), [ctx, allowed]);
 }
+function useResourceVisible() {
+	const ctx = (0, _burojs_react.useVisibilityCtx)();
+	return (0, react.useCallback)((def) => (0, _burojs_core.evaluateVisible)(def.visible, ctx), [ctx]);
+}
 function usePageAllowed() {
 	const permissions = (0, _burojs_react.usePermissions)();
 	return (0, react.useCallback)((page) => (0, _burojs_react.pageAccessFor)(page, permissions) === "allowed", [permissions]);
@@ -98,99 +183,17 @@ function useMatch() {
 	return path === void 0 ? null : (0, _burojs_core.matchPath)(app.registry, path, { isVisible });
 }
 //#endregion
-//#region src/layout/nav-chrome-boundary.tsx
-const NavChromeBoundaryContext = (0, react.createContext)(new Set());
-function useNavChromeBoundary() {
-	return (0, react.useContext)(NavChromeBoundaryContext);
-}
-function NavChromeBoundaryProvider({ claim, children }) {
-	const parent = (0, react.useContext)(NavChromeBoundaryContext);
-	const key = claim.join(" ");
-	const merged = (0, react.useMemo)(() => {
-		const s = new Set(parent);
-		for (const n of claim) s.add(n);
-		return s;
-	}, [parent, key]);
-	return (0, react_jsx_runtime.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 = (0, _burojs_react.useApp)();
-	const caps = (0, _burojs_react.useI18nCaps)();
-	const isVisible = useNavVisible();
-	const match = useMatch();
-	const resolveLayout = useLayoutResolver();
-	const boundary = useNavChromeBoundary();
-	if (!match) return (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { 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 = (0, react_jsx_runtime.jsx)(Layout, {
-			group,
-			groupKey,
-			items,
-			children: content
-		});
-	}
-	return (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: content });
-}
-//#endregion
-//#region src/record/record-state.tsx
-function RecordState({ state, onRetry }) {
-	const t = (0, _burojs_react.useT)();
-	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 = state === "not-found" ? t("router.recordNotFound") : 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: t("actions.retry")
-		}) : null]
-	});
+//#region src/layout/nav-chrome-mounted.ts
+const NavChromeMountedContext = (0, react.createContext)(false);
+const NavChromeMountedProvider = NavChromeMountedContext.Provider;
+function useNavChromeMounted() {
+	return (0, react.useContext)(NavChromeMountedContext);
 }
 //#endregion
 //#region src/flows/page-flow-loader.tsx
 function PageFlowRouteLoader({ match }) {
 	const t = (0, _burojs_react.useOptionalT)();
+	const chromeT = (0, _burojs_react.useChromeT)();
 	const loaded = require_check_confirm_dialog.useLoaded(require_check_confirm_dialog.loadPageFlowRoute);
 	const failed = (retry) => (0, react_jsx_runtime.jsxs)("div", {
 		role: "alert",
@@ -199,11 +202,11 @@ function PageFlowRouteLoader({ match }) {
 		children: [(0, react_jsx_runtime.jsx)("p", { children: require_check_confirm_dialog.loadFailedText(t) }), (0, react_jsx_runtime.jsx)("div", { children: (0, react_jsx_runtime.jsx)(require_button.Button, {
 			type: "button",
 			onClick: retry,
-			children: t("actions.retry") === "actions.retry" ? "Retry" : t("actions.retry")
+			children: chromeT("actions.retry", { defaultValue: "Retry" })
 		}) })]
 	});
 	if (loaded.error !== void 0) return failed(loaded.retry);
-	if (loaded.module === void 0) return (0, react_jsx_runtime.jsx)(RecordState, { state: "loading" });
+	if (loaded.module === void 0) return (0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "loading" });
 	const Route = loaded.module.PageFlowRoute;
 	return (0, react_jsx_runtime.jsx)(require_check_confirm_dialog.FlowBoundary, {
 		fallback: (_error, reset) => failed(reset),
@@ -212,7 +215,8 @@ function PageFlowRouteLoader({ match }) {
 }
 //#endregion
 //#region src/list-kit/resource-list-page.tsx
-function ResourceListPage({ resource, meta, renderCell, emptyState }) {
+function ResourceListPage({ resource: resourceInput, meta, renderCell, emptyState }) {
+	const resource = (0, _burojs_core.routeResourceKey)(resourceInput);
 	const app = (0, _burojs_react.useRouteListImplementation)();
 	const implementation = require_place_node.selectImplementation("buro:related-list", app);
 	const View = implementation === void 0 ? void 0 : require_place_node.viewOf(implementation);
@@ -251,7 +255,7 @@ function PageHost({ page, match, notFound }) {
 	const ctx = (0, _burojs_react.useVisibilityCtx)();
 	const access = (0, _burojs_react.usePageAccess)(page);
 	if (!((0, _burojs_core.evaluateVisible)(page.visible, ctx) && match.groupChain.every((group) => isVisible(group)))) return notFound;
-	if (access === "pending") return (0, react_jsx_runtime.jsx)(RecordState, { state: "loading" });
+	if (access === "pending") return (0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "loading" });
 	if (access === "denied") return notFound;
 	return (0, react_jsx_runtime.jsx)(PageParams, {
 		page,
@@ -290,7 +294,7 @@ function PageBody({ page }) {
 		children: [(0, react_jsx_runtime.jsx)("h1", {
 			className: "text-2xl font-semibold tracking-tight",
 			children: label
-		}), screen === null ? (0, react_jsx_runtime.jsx)(RecordState, { state: "error" }) : (0, react_jsx_runtime.jsx)(PageRouteScreen, { children: (0, react_jsx_runtime.jsx)(PlannedBody, {
+		}), screen === null ? (0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "error" }) : (0, react_jsx_runtime.jsx)(PageRouteScreen, { children: (0, react_jsx_runtime.jsx)(PlannedBody, {
 			screen,
 			name,
 			label
@@ -311,8 +315,9 @@ function PageRouteScreen({ children }) {
 		})
 	});
 }
-function PlannedBody({ screen, name, label }) {
-	const page = (0, _burojs_react.usePageScreen)(screen);
+function PlannedBody({ screen, name, label, record }) {
+	const pageOptions = (0, react.useMemo)(() => record === void 0 ? {} : { record }, [record]);
+	const page = (0, _burojs_react.usePageScreen)(screen, pageOptions);
 	const { PlacementScope } = page;
 	const route = (0, react.useContext)(_burojs_react.RouteSourceContext);
 	const catalog = (0, _burojs_react.useFrameImplementations)();
@@ -337,27 +342,23 @@ function PlannedBody({ screen, name, label }) {
 	};
 	return (0, react_jsx_runtime.jsx)(_burojs_react.RouteSourceContext.Provider, {
 		value: null,
-		children: (0, react_jsx_runtime.jsx)(PlacementScope, { children: (0, react_jsx_runtime.jsx)(require_place_node.DeepLinkScope, {
-			plan: page.plan,
-			enabled: true,
-			children: (0, react_jsx_runtime.jsx)("div", {
-				"data-buro-region": "page-body",
-				children: (0, react_jsx_runtime.jsx)(react.Suspense, {
-					fallback: null,
-					children: (0, react_jsx_runtime.jsx)(View, { ...viewProps })
+		children: (0, react_jsx_runtime.jsx)(_burojs_react.ActionRouteContext.Provider, {
+			value: route,
+			children: (0, react_jsx_runtime.jsx)(PlacementScope, { children: (0, react_jsx_runtime.jsx)(require_place_node.DeepLinkScope, {
+				plan: page.plan,
+				enabled: true,
+				children: (0, react_jsx_runtime.jsx)("div", {
+					"data-buro-region": "page-body",
+					children: (0, react_jsx_runtime.jsx)(react.Suspense, {
+						fallback: null,
+						children: (0, react_jsx_runtime.jsx)(View, { ...viewProps })
+					})
 				})
-			})
-		}) })
+			}) })
+		})
 	});
 }
 //#endregion
-//#region src/resource/form-context.tsx
-const FormControlContext = (0, react.createContext)(null);
-const FormControlProvider = FormControlContext.Provider;
-function useFormControl() {
-	return (0, react.useContext)(FormControlContext);
-}
-//#endregion
 //#region src/frames/obligations.tsx
 const SlotMountsContext = (0, react.createContext)(null);
 function useSlotOnce(slot) {
@@ -487,9 +488,9 @@ function timeAgo(savedAt, t) {
 	if (diff < 864e5) return t("draft.timeAgoHours", { count: Math.round(diff / 36e5) });
 	return t("draft.timeAgoDays", { count: Math.round(diff / 864e5) });
 }
-function frameRecordId(frame) {
+function frameRecordId(frame, def) {
 	if (frame.recordId !== void 0) return frame.recordId;
-	const id = frame.record?.id;
+	const id = (0, _burojs_react.recordKeyOf)(def, frame.record);
 	return typeof id === "string" || typeof id === "number" ? String(id) : void 0;
 }
 function BodySlot() {
@@ -497,7 +498,7 @@ function BodySlot() {
 	const { resource, mode, controller } = frame;
 	const chrome = require_place_node.useFrameChrome();
 	const tid = (0, _burojs_react.useTestIds)();
-	const id = frameRecordId(frame);
+	const id = frameRecordId(frame, (0, _burojs_react.useApp)().registry.get(resource));
 	const tree = (0, react_jsx_runtime.jsx)("div", {
 		"data-buro-region": "record-body",
 		"data-buro-slot": _burojs_core.FORM_SLOT,
@@ -646,14 +647,14 @@ function RecordFrameView({ frame: instance }) {
 		...policyRecord ?? {},
 		id: typeof rowId === "string" || typeof rowId === "number" ? String(rowId) : ""
 	}), [policyRecord, rowId]);
-	const showItemActions = require_place_node.useShownItemActions(resource, actionRow, "show");
+	const showItemActions = require_place_node.useShownItemActions(resource, actionRow, "show", void 0, controller.sources);
 	const showActions = mode === "show" && record !== void 0 && showItemActions.length > 0;
 	const View = resolved.view;
 	const builtin = require_place_node.isBuiltinRecordView(resolved);
 	return (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [builtin ? null : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)(require_place_node.HeaderTypeNotice, { resource }), (0, react_jsx_runtime.jsx)(require_place_node.ChangeTypeButton, {})] }), (0, react_jsx_runtime.jsx)(require_place_node.TypeChromeDrawnContext.Provider, {
 		value: !builtin,
 		children: (0, react_jsx_runtime.jsx)(react.Suspense, {
-			fallback: (0, react_jsx_runtime.jsx)(RecordState, { state: "loading" }),
+			fallback: (0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "loading" }),
 			children: (0, react_jsx_runtime.jsx)(FrameObligations, {
 				id,
 				mode,
@@ -664,6 +665,156 @@ function RecordFrameView({ frame: instance }) {
 		})
 	})] });
 }
+function useResourceDimensionOptions(dimension, resource, labelField) {
+	const def = (0, _burojs_react.useApp)().registry.get(resource);
+	const rowTitle = require_relation_create.useRowTitle(resource, labelField ?? def?.displayField);
+	const rows = (0, _burojs_react.useList)(resource, {
+		pagination: {
+			kind: "offset",
+			page: 1,
+			pageSize: 100
+		},
+		total: false,
+		scope: {
+			default: "session",
+			dimensions: { [dimension]: "none" }
+		}
+	}).data?.data;
+	return (0, react.useMemo)(() => (rows ?? []).flatMap((row) => {
+		const key = (0, _burojs_react.recordKeyOf)(def, row);
+		return key === null || key === void 0 ? [] : [{
+			value: key,
+			label: rowTitle(row)
+		}];
+	}), [
+		rows,
+		def,
+		rowTitle
+	]);
+}
+//#endregion
+//#region src/record/scope-mismatch-banner.tsx
+const asList = (value) => value === null ? [] : Array.isArray(value) ? value : [value];
+const isScalar = (value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+function ScopeMismatchBanner(props) {
+	const app = (0, _burojs_react.useApp)();
+	const mapping = app.registry.get(props.resource)?.data?.scope;
+	if (app.scope === void 0 || mapping === void 0 || props.record === void 0) return null;
+	return (0, react_jsx_runtime.jsx)(Banner, {
+		...props,
+		record: props.record,
+		mapping
+	});
+}
+function Banner({ record, mapping, kind = "record" }) {
+	const scope = (0, _burojs_react.useScope)();
+	const chromeT = (0, _burojs_react.useChromeT)();
+	const differences = (0, react.useMemo)(() => {
+		const out = [];
+		for (const [dimension, target] of Object.entries(mapping)) {
+			const definition = scope.definition?.dimensions[dimension];
+			if (definition === void 0 || definition.select === "none") continue;
+			const selected = asList(scope.selection[dimension] ?? null);
+			if (selected.length === 0) continue;
+			const column = (0, _burojs_core.scopeColumnOf)(target);
+			if (!Object.hasOwn(record, column)) continue;
+			const held = record[column];
+			if (held === null || held === void 0 || held === "") {
+				if (kind === "created" || "field" in target && target.empty === "shared") continue;
+				out.push({
+					dimension,
+					value: null,
+					selected,
+					select: definition.select
+				});
+				continue;
+			}
+			if (!isScalar(held)) continue;
+			if (selected.some((value) => String(value) === String(held))) continue;
+			out.push({
+				dimension,
+				value: held,
+				selected,
+				select: definition.select
+			});
+		}
+		return out;
+	}, [
+		mapping,
+		record,
+		scope.definition,
+		scope.selection,
+		kind
+	]);
+	if (differences.length === 0) return null;
+	const apply = () => {
+		for (const difference of differences) scope.select(difference.dimension, difference.value === null ? null : difference.select === "multiple" ? [difference.value] : difference.value);
+	};
+	return (0, react_jsx_runtime.jsxs)("div", {
+		role: "status",
+		"data-testid": "scope-mismatch:banner",
+		className: "flex flex-wrap items-center justify-between gap-3 rounded-md border bg-muted/50 px-3 py-2 text-sm",
+		children: [(0, react_jsx_runtime.jsxs)("div", {
+			className: "space-y-1",
+			children: [(0, react_jsx_runtime.jsx)("p", {
+				className: "font-medium",
+				children: kind === "created" ? chromeT("scope.mismatch.createdOutside", { defaultValue: "Created outside the current scope" }) : chromeT("scope.mismatch.title", { defaultValue: "This record is outside the current scope" })
+			}), (0, react_jsx_runtime.jsx)("ul", {
+				className: "text-muted-foreground",
+				children: differences.map((difference) => (0, react_jsx_runtime.jsx)(DifferenceLine, {
+					difference,
+					definition: scope.definition.dimensions[difference.dimension]
+				}, difference.dimension))
+			})]
+		}), (0, react_jsx_runtime.jsx)(require_button.Button, {
+			type: "button",
+			size: "sm",
+			"data-testid": "scope-mismatch:switch",
+			onClick: apply,
+			children: chromeT("scope.mismatch.switch", { defaultValue: "Switch" })
+		})]
+	});
+}
+function DifferenceLine(props) {
+	const source = props.definition.values;
+	if (source !== void 0 && !Array.isArray(source)) {
+		const { resource, label } = source;
+		return (0, react_jsx_runtime.jsx)(ResourceLine, {
+			...props,
+			resource,
+			...label ? { labelField: label } : {}
+		});
+	}
+	return (0, react_jsx_runtime.jsx)(LineText, {
+		difference: props.difference,
+		options: source ?? []
+	});
+}
+function ResourceLine({ difference, resource, labelField }) {
+	const options = useResourceDimensionOptions(difference.dimension, resource, labelField);
+	return (0, react_jsx_runtime.jsx)(LineText, {
+		difference,
+		options
+	});
+}
+function LineText({ difference, options }) {
+	const chromeT = (0, _burojs_react.useChromeT)();
+	const labelOf = (value) => options.find((option) => String(option.value) === String(value))?.label ?? String(value);
+	const field = (0, _burojs_core.humanizeKey)(difference.dimension);
+	const item = difference.value === null ? chromeT("scope.mismatch.empty", { defaultValue: "not set" }) : labelOf(difference.value);
+	const items = difference.selected.map(labelOf).join(", ");
+	return (0, react_jsx_runtime.jsx)("li", {
+		"data-testid": `scope-mismatch:line:${difference.dimension}`,
+		children: chromeT("scope.mismatch.line", {
+			params: {
+				field,
+				item,
+				items
+			},
+			defaultValue: `${field}: ${item} (selected: ${items})`
+		})
+	});
+}
 //#endregion
 //#region src/record/type-offer.tsx
 function TypeOffer({ resource, offer, onChoose }) {
@@ -726,18 +877,41 @@ function isAbort(error) {
 		return false;
 	}
 }
-function canonicalName(resource) {
-	const ref = (0, _burojs_core.normalizeEntityRef)(typeof resource === "string" ? resource : resource.ref);
-	return (0, _burojs_core.canonicalEntityNodeKey)({
-		name: ref.id,
-		ref
-	});
+const NO_ISSUES = Object.freeze([]);
+const APPLIED_UNREADABLE = Object.freeze({
+	code: "applied-unreadable",
+	message: Object.freeze({
+		key: "errors.appliedUnreadable",
+		default: "Saved. The server's answer could not be read, so the screen may not show the latest values."
+	}),
+	path: Object.freeze([]),
+	source: "server",
+	severity: "info"
+});
+function issuesOf(error) {
+	if (error === null || typeof error !== "object") return void 0;
+	try {
+		const descriptor = Object.getOwnPropertyDescriptor(error, "issues");
+		return descriptor !== void 0 && "value" in descriptor ? descriptor.value : void 0;
+	} catch {
+		return;
+	}
 }
-function frameId(frame) {
-	return frameRecordId(frame);
+const NO_EDITED = new Set();
+function sameValue(a, b) {
+	if (Object.is(a, b)) return true;
+	try {
+		return JSON.stringify(a) === JSON.stringify(b);
+	} catch {
+		return false;
+	}
 }
 function RecordFrameHost(props) {
 	const { resource, mode } = props;
+	const [failed, setFailed] = (0, react.useState)(NO_ISSUES);
+	const named = (0, react.useMemo)(() => failed.length === 0 ? NO_ISSUES : (0, _burojs_core.routeServerIssues)({ issues: failed }, (segment) => segment, (field) => field !== "_form").fields, [failed]);
+	const atFailure = (0, react.useRef)({});
+	const [edited, setEdited] = (0, react.useState)(NO_EDITED);
 	const controller = (0, _burojs_react.useFormController)({
 		resource,
 		mode,
@@ -746,7 +920,8 @@ function RecordFrameHost(props) {
 		...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" } : {}
+		...props.hostTitle ? { entry: "quick" } : {},
+		serverIssues: named
 	});
 	const inputApplied = (0, react.useRef)(false);
 	const { input } = props;
@@ -765,13 +940,26 @@ function RecordFrameHost(props) {
 	const formId = `record-form-${(0, react.useId)()}`;
 	const root = (0, react.useRef)(null);
 	const [submitError, setSubmitError] = (0, react.useState)(void 0);
+	const [submitApplied, setSubmitApplied] = (0, react.useState)(void 0);
+	(0, react.useEffect)(() => {
+		if (plan === null) return;
+		const now = Object.keys(atFailure.current).filter((name) => !edited.has(name) && plan.fields[name] === "active" && !sameValue(controller.field(name).value, atFailure.current[name]));
+		if (now.length > 0) setEdited((previous) => new Set([...previous, ...now]));
+	}, [
+		plan,
+		controller,
+		edited
+	]);
+	const notify = require_success_notices.useNoticeSink(resource);
 	const latest = (0, react.useRef)({
 		controller,
-		onSuccess: props.onSuccess
+		onSuccess: props.onSuccess,
+		notify
 	});
 	latest.current = {
 		controller,
-		onSuccess: props.onSuccess
+		onSuccess: props.onSuccess,
+		notify
 	};
 	const mounted = (0, react.useRef)(true);
 	(0, react.useEffect)(() => {
@@ -782,21 +970,45 @@ function RecordFrameHost(props) {
 	}, []);
 	const submit = (0, react.useCallback)(async () => {
 		setSubmitError(void 0);
+		setSubmitApplied(void 0);
+		setFailed(NO_ISSUES);
+		setEdited(NO_EDITED);
+		atFailure.current = {};
 		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);
+		if (outcome.status === "submitted") {
+			const notices = (0, _burojs_core.successNoticesOf)(outcome.result);
+			if (notices.length > 0) latest.current.notify(notices);
+			latest.current.onSuccess?.(outcome.result);
+		} else if (outcome.status === "failed" && outcome.applied === "yes") {
+			latest.current.notify([APPLIED_UNREADABLE]);
+			latest.current.onSuccess?.(void 0);
+		} else if (outcome.status === "failed" && !isAbort(outcome.error)) {
+			setSubmitError(outcome.error ?? null);
+			setSubmitApplied(outcome.applied);
+			const issues = (0, _burojs_core.normalizeIssueInputs)(issuesOf(outcome.error)).issues;
+			const next = issues.length === 0 ? NO_ISSUES : Object.freeze(issues.map(_burojs_core.issueOfInput));
+			const held = {};
+			const now = latest.current.controller;
+			for (const issue of next) {
+				const head = issue.path[0];
+				if (typeof head === "string" && head !== "_form" && now.plan?.fields[head] === "active") held[head] = now.field(head).value;
+			}
+			atFailure.current = held;
+			setFailed(next);
+		}
 	}, []);
 	const record = controller.record;
+	const recordText = props.recordId === void 0 ? void 0 : String(props.recordId);
 	const frame = (0, react.useMemo)(() => ({
 		resource,
-		recordId: props.recordId,
+		recordId: recordText,
 		mode,
 		record,
 		controller
 	}), [
 		resource,
-		props.recordId,
+		recordText,
 		mode,
 		record,
 		controller
@@ -817,7 +1029,8 @@ function RecordFrameHost(props) {
 		guardText.title,
 		guardText.body
 	]);
-	const typesDecl = (0, _burojs_react.useApp)().registry.get(resource)?.types;
+	const app = (0, _burojs_react.useApp)();
+	const typesDecl = app.registry.get(resource)?.types;
 	const loaded = controller.record;
 	const unsupportedType = (0, react.useMemo)(() => {
 		if (mode === "create" || typesDecl === void 0 || loaded === void 0) return void 0;
@@ -829,6 +1042,10 @@ function RecordFrameHost(props) {
 		typesDecl,
 		loaded
 	]);
+	const shownFailed = (0, react.useMemo)(() => edited.size === 0 ? failed : Object.freeze(failed.filter((issue) => {
+		const head = issue.path[0];
+		return typeof head !== "string" || !edited.has(head);
+	})), [failed, edited]);
 	const chrome = (0, react.useMemo)(() => ({
 		...props.onCancel === void 0 ? {} : { onCancel: props.onCancel },
 		...props.submitLabel === void 0 ? {} : { submitLabel: props.submitLabel },
@@ -838,6 +1055,8 @@ function RecordFrameHost(props) {
 		...props.hostTitle ? { hostTitle: true } : {},
 		formId,
 		submitError,
+		...submitApplied === void 0 ? {} : { submitApplied },
+		serverIssues: shownFailed,
 		submit,
 		root
 	}), [
@@ -849,6 +1068,8 @@ function RecordFrameHost(props) {
 		props.hostTitle,
 		formId,
 		submitError,
+		submitApplied,
+		shownFailed,
 		submit
 	]);
 	(0, _burojs_react.usePublishDocVariant)(mode === "show" ? resource : void 0, record);
@@ -863,45 +1084,51 @@ function RecordFrameHost(props) {
 		resource,
 		mode
 	]);
-	const setValues = (0, react.useCallback)((patch) => {
-		for (const [name, value] of Object.entries(patch)) latest.current.controller.setValue(name, value);
-	}, []);
-	const formControl = (0, react.useMemo)(() => ({ setValues }), [setValues]);
-	const id = frameId(frame);
+	const formControl = require_place_node.useFormControlOf(controller);
+	const id = frameRecordId(frame, app.registry.get(frame.resource));
 	const rootId = mode === "show" ? tid.pageShow(resource, id ?? "") : mode === "edit" ? tid.pageEdit(resource, id ?? "") : tid.pageCreate(resource);
+	const claimedRoute = (0, react.useContext)(_burojs_react.RouteSourceContext);
 	const scopeValues = mode === "show" ? controller.record : controller.values;
 	return (0, react_jsx_runtime.jsx)(_burojs_react.RecordScopeProvider, {
 		resource,
-		...props.recordId === void 0 ? {} : { recordId: props.recordId },
+		...recordText === void 0 ? {} : { recordId: recordText },
 		values: scopeValues,
+		create: mode === "create",
 		children: (0, react_jsx_runtime.jsx)(_burojs_react.RouteSourceContext.Provider, {
 			value: null,
-			children: (0, react_jsx_runtime.jsx)(_burojs_react.RecordFrameContext.Provider, {
-				value: frame,
-				children: (0, react_jsx_runtime.jsx)(require_place_node.FrameChromeContext.Provider, {
-					value: chrome,
-					children: (0, react_jsx_runtime.jsxs)(FormControlProvider, {
-						value: formControl,
-						children: [(0, react_jsx_runtime.jsx)(require_place_node.DeepLinkScope, {
-							plan: controller.plan,
-							enabled: routeScreen && mode !== "create",
-							children: (0, react_jsx_runtime.jsx)("div", {
-								ref: root,
-								"data-testid": rootId,
-								className: "flex flex-col gap-[var(--buro-section-gap)]",
-								children: offering && controller.typeOffer !== null ? (0, react_jsx_runtime.jsx)(TypeOffer, {
-									resource,
-									offer: controller.typeOffer,
-									onChoose: (type) => chooseType(type)
-								}) : failure !== null ? (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)(RecordState, { state: "error" }), (0, react_jsx_runtime.jsx)(require_place_node.FormActions, {})] }) : mode === "edit" && unsupportedType !== void 0 ? (0, react_jsx_runtime.jsx)(require_place_node.UndeclaredTypeNotice, {
-									resource,
-									typeValue: unsupportedType
-								}) : (0, react_jsx_runtime.jsx)(RecordFrameView, { ...props.frame === void 0 ? {} : { frame: props.frame } })
-							})
-						}), controller.checkGate === null ? null : (0, react_jsx_runtime.jsx)(require_check_confirm_dialog.CheckConfirmDialog, {
-							state: controller.checkGate,
-							testid: `${tid.form(resource, mode, id)}:checks`
-						})]
+			children: (0, react_jsx_runtime.jsx)(_burojs_react.ActionRouteContext.Provider, {
+				value: claimedRoute,
+				children: (0, react_jsx_runtime.jsx)(_burojs_react.RecordFrameContext.Provider, {
+					value: frame,
+					children: (0, react_jsx_runtime.jsx)(require_place_node.FrameChromeContext.Provider, {
+						value: chrome,
+						children: (0, react_jsx_runtime.jsxs)(require_place_node.FormControlProvider, {
+							value: formControl,
+							children: [(0, react_jsx_runtime.jsx)(require_place_node.DeepLinkScope, {
+								plan: controller.plan,
+								enabled: routeScreen && mode !== "create",
+								children: (0, react_jsx_runtime.jsx)("div", {
+									ref: root,
+									"data-testid": rootId,
+									className: "flex flex-col gap-[var(--buro-section-gap)]",
+									children: offering && controller.typeOffer !== null ? (0, react_jsx_runtime.jsx)(TypeOffer, {
+										resource,
+										offer: controller.typeOffer,
+										onChoose: (type) => chooseType(type)
+									}) : failure !== null ? (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "error" }), (0, react_jsx_runtime.jsx)(require_place_node.FormActions, {})] }) : mode === "edit" && unsupportedType !== void 0 ? (0, react_jsx_runtime.jsx)(require_place_node.UndeclaredTypeNotice, {
+										resource,
+										typeValue: unsupportedType
+									}) : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)(ScopeMismatchBanner, {
+										resource,
+										record: mode === "create" ? controller.trustedSeeds : controller.record,
+										kind: mode === "create" ? "created" : "record"
+									}), (0, react_jsx_runtime.jsx)(RecordFrameView, { ...props.frame === void 0 ? {} : { frame: props.frame } })] })
+								})
+							}), controller.checkGate === null ? null : (0, react_jsx_runtime.jsx)(require_check_confirm_dialog.CheckConfirmDialog, {
+								state: controller.checkGate,
+								testid: `${tid.form(resource, mode, id)}:checks`
+							})]
+						})
 					})
 				})
 			})
@@ -913,7 +1140,8 @@ function RecordScreen(props) {
 	const routeScreen = (0, react.useContext)(require_place_node.RouteScreenClaimContext);
 	const quickScreen = (0, react.useContext)(require_place_node.QuickScreenClaimContext);
 	const route = (0, react.useContext)(_burojs_react.RouteSourceContext);
-	const resource = canonicalName(props.resource);
+	const resourceInput = props.resource;
+	const resource = (0, _burojs_core.resourceKey)(resourceInput);
 	const tabs = require_place_node.useTabsUrlState(props.mode, routeScreen);
 	const adapter = (0, _burojs_react.useOptionalRouterAdapter)();
 	const router = routeScreen ? adapter : null;
@@ -939,7 +1167,7 @@ function RecordScreen(props) {
 		const query = params.toString();
 		navigate(query === "" ? router.pathname : `${router.pathname}?${query}`);
 	}, [router, navigate]);
-	if (app.registry.get(resource) === void 0) return (0, react_jsx_runtime.jsx)(RecordState, { state: "not-found" });
+	if (app.registry.get(resource) === void 0) return (0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "not-found" });
 	const { type: _declared, ...rest } = props;
 	return (0, react_jsx_runtime.jsx)(require_place_node.RouteScreenClaimContext.Provider, {
 		value: false,
@@ -1175,24 +1403,18 @@ function parse(raw) {
 		return [];
 	}
 }
-function readRecentRecords(userId) {
-	if (typeof window === "undefined") return [];
-	try {
-		return parse(window.localStorage.getItem(recentStorageKey(userId)));
-	} catch {
-		return [];
-	}
+function readRecentRecords(store, userId) {
+	return (0, _burojs_react.maybeThen)((0, _burojs_react.settle)(() => store.get(recentStorageKey(userId)), null), parse);
 }
-function writeRecentRecord(userId, entry) {
-	if (typeof window === "undefined") return;
-	try {
-		const key = recentStorageKey(userId);
+function writeRecentRecord(store, userId, entry) {
+	const key = recentStorageKey(userId);
+	return (0, _burojs_react.maybeThen)((0, _burojs_react.settle)(() => store.get(key), null), (raw) => {
 		const envelope = {
 			version: 2,
-			items: [entry, ...parse(window.localStorage.getItem(key)).filter((item) => !(item.canonicalRef === entry.canonicalRef && item.id === entry.id))].slice(0, 5)
+			items: [entry, ...parse(raw).filter((item) => !(item.canonicalRef === entry.canonicalRef && item.id === entry.id))].slice(0, 5)
 		};
-		window.localStorage.setItem(key, JSON.stringify(envelope));
-	} catch {}
+		return (0, _burojs_react.settle)(() => store.set(key, JSON.stringify(envelope)), void 0);
+	});
 }
 function text(value) {
 	return typeof value === "string" && value.length > 0 ? value : void 0;
@@ -1218,10 +1440,12 @@ function recentLabel(record, id, isGuarded = () => false) {
 //#region src/layout/use-record-visit.ts
 function useRecordVisit(resource, record, opts) {
 	const userId = (0, _burojs_react.useCurrentUserId)();
-	const raw = record?.id;
-	const id = typeof raw === "string" || typeof raw === "number" ? String(raw) : void 0;
+	const store = (0, _burojs_react.usePlatformStorage)().local;
 	const app = (0, _burojs_react.useApp)();
-	const fields = app.registry.get(resource)?.fields;
+	const def = app.registry.get(resource);
+	const raw = (0, _burojs_react.recordKeyOf)(def, record);
+	const id = typeof raw === "string" || typeof raw === "number" ? String(raw) : void 0;
+	const fields = def?.fields;
 	const rules = app.ruleSource?.rules(resource) ?? [];
 	const isGuarded = (field) => fields !== void 0 && Object.hasOwn(fields, field) && (0, _burojs_core.fieldSensitivity)(fields[field]) !== void 0 || (0, _burojs_core.addressesCapability)(rules, "view", {
 		kind: "field",
@@ -1235,7 +1459,7 @@ function useRecordVisit(resource, record, opts) {
 	(0, react.useEffect)(() => {
 		if (userId === null || !isCurrentData || id === void 0 || id === "") return;
 		if (label === void 0) return;
-		writeRecentRecord(userId, {
+		writeRecentRecord(store, userId, {
 			canonicalRef,
 			id,
 			label,
@@ -1243,6 +1467,7 @@ function useRecordVisit(resource, record, opts) {
 			at: new Date().toISOString()
 		});
 	}, [
+		store,
 		userId,
 		isCurrentData,
 		canonicalRef,
@@ -1253,12 +1478,6 @@ function useRecordVisit(resource, record, opts) {
 }
 //#endregion
 //#region src/layout/record-page.tsx
-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";
-}
 function useMountedRef() {
 	const mounted = (0, react.useRef)(true);
 	(0, react.useEffect)(() => {
@@ -1281,7 +1500,7 @@ function RecordRouteHeader({ resource, action, id, record }) {
 		...action === "create" ? {} : { recordName }
 	});
 }
-function RecordShow({ resource, id, record, shown }) {
+function RecordShow({ resource, id, recordId, record, shown }) {
 	return (0, react_jsx_runtime.jsxs)("div", { children: [(0, react_jsx_runtime.jsx)(RecordRouteHeader, {
 		resource,
 		action: "show",
@@ -1290,11 +1509,11 @@ function RecordShow({ resource, id, record, shown }) {
 	}), (0, react_jsx_runtime.jsx)(RecordScreen, {
 		resource,
 		mode: "show",
-		recordId: id,
+		recordId,
 		record
 	})] });
 }
-function RecordEdit({ resource, id, record, shown }) {
+function RecordEdit({ resource, id, recordId, record, shown }) {
 	const app = (0, _burojs_react.useApp)();
 	const navigate = (0, _burojs_react.useRouteNavigate)();
 	const mounted = useMountedRef();
@@ -1307,7 +1526,7 @@ function RecordEdit({ resource, id, record, shown }) {
 	}), (0, react_jsx_runtime.jsx)(RecordScreen, {
 		resource,
 		mode: "edit",
-		recordId: id,
+		recordId,
 		record,
 		onCancel: () => navigate(back),
 		onSuccess: () => {
@@ -1346,12 +1565,12 @@ function RecordCreate({ resource, defaults }) {
 		})
 	})] });
 }
-function RecordRead({ resource, action, id }) {
+function RecordRead({ resource, action, id, recordId }) {
 	const app = (0, _burojs_react.useApp)();
 	const def = app.registry.get(resource);
 	const projection = (0, react.useMemo)(() => def === void 0 ? void 0 : (0, _burojs_core.dtoFields)(def, "record"), [def]);
 	const query = (0, _burojs_react.useOne)(resource, {
-		id,
+		id: recordId,
 		retry: _burojs_react.retryRecordRead,
 		...projection === void 0 ? {} : { projection }
 	});
@@ -1371,18 +1590,18 @@ function RecordRead({ resource, action, id }) {
 	const availability = (0, _burojs_react.useAvailabilityResolver)(resource, "edit");
 	if (result !== void 0) {
 		const record = result.data;
-		if (record === null || typeof record !== "object") return (0, react_jsx_runtime.jsx)(RecordState, { state: "not-found" });
+		if (record === null || typeof record !== "object") return (0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "not-found" });
 		const loaded = record;
 		if (showRuled) {
-			if (query.isPlaceholderData || permissions?.status === "loading") return (0, react_jsx_runtime.jsx)(RecordState, { state: "loading" });
-			if (permissions?.status === "error") return (0, react_jsx_runtime.jsx)(RecordState, { state: "not-found" });
-			if (showHidden) return (0, react_jsx_runtime.jsx)(RecordState, { state: "not-found" });
+			if (query.isPlaceholderData || permissions?.status === "loading") return (0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "loading" });
+			if (permissions?.status === "error") return (0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "not-found" });
+			if (showHidden) return (0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "not-found" });
 		}
-		if (projected.status === "pending" || projected.value === null) return (0, react_jsx_runtime.jsx)(RecordState, { state: "loading" });
+		if (projected.status === "pending" || projected.value === null) return (0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "loading" });
 		const shown = projected.value;
 		if (action === "edit") {
 			const edit = availability("edit", loaded).state;
-			if (edit === "hidden" || edit === "absent") return (0, react_jsx_runtime.jsx)(RecordState, { state: "not-found" });
+			if (edit === "hidden" || edit === "absent") return (0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "not-found" });
 		}
 		return (0, react_jsx_runtime.jsx)(_burojs_react.RouteSourceContext.Provider, {
 			value: route,
@@ -1391,30 +1610,39 @@ function RecordRead({ resource, action, id }) {
 				children: action === "edit" ? (0, react_jsx_runtime.jsx)(RecordEdit, {
 					resource,
 					id,
+					recordId,
 					record: loaded,
 					shown
 				}) : (0, react_jsx_runtime.jsx)(RecordShow, {
 					resource,
 					id,
+					recordId,
 					record: loaded,
 					shown
 				})
 			})
 		});
 	}
-	if (query.error != null) {
-		const state = recordErrorState(query.error);
-		return (0, react_jsx_runtime.jsx)(RecordState, {
-			state,
-			onRetry: state === "error" ? () => void query.refetch() : void 0
-		});
-	}
-	return (0, react_jsx_runtime.jsx)(RecordState, { state: "loading" });
+	if (query.error != null) return (0, react_jsx_runtime.jsx)(require_relation_create.LoadError, {
+		surface: "record",
+		resource,
+		error: query.error,
+		retry: () => void query.refetch()
+	});
+	return (0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "loading" });
 }
 function RecordRouteBody(props) {
 	if (props.action === "create") return (0, react_jsx_runtime.jsx)(RecordCreate, { ...props });
-	if (props.id === "") return (0, react_jsx_runtime.jsx)(RecordState, { state: "not-found" });
-	return (0, react_jsx_runtime.jsx)(RecordRead, { ...props });
+	if (props.id === "") return (0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "not-found" });
+	return (0, react_jsx_runtime.jsx)(RecordReadRoute, { ...props });
+}
+function RecordReadRoute(props) {
+	const recordId = (0, _burojs_react.useRouteRecordId)(props.resource, props.id);
+	if (recordId === void 0) return (0, react_jsx_runtime.jsx)(require_relation_create.InvalidRouteId, { resource: props.resource });
+	return (0, react_jsx_runtime.jsx)(RecordRead, {
+		...props,
+		recordId
+	});
 }
 function RecordRoute(props) {
 	const missingRuntime = (0, _burojs_react.useOptionalDataRuntime)() === null;
@@ -1422,7 +1650,7 @@ function RecordRoute(props) {
 		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 (0, react_jsx_runtime.jsx)(RecordState, { state: "error" });
+	if (missingRuntime) return (0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "error" });
 	return (0, react_jsx_runtime.jsx)(RecordRouteBody, { ...props }, `${props.resource}:${props.id}`);
 }
 function recordPageProblem(input) {
@@ -1437,7 +1665,8 @@ function RecordPage(props) {
 	const app = (0, _burojs_react.useApp)();
 	const match = useMatch();
 	const id = match === null ? null : match.id ?? "";
-	const { resource, action } = props;
+	const { action } = props;
+	const resource = props.resource === void 0 ? void 0 : (0, _burojs_core.routeResourceKey)(props.resource);
 	const onRecordRoute = recordActionOf(match) !== void 0;
 	const problem = recordPageProblem({
 		props,
@@ -1456,7 +1685,7 @@ function RecordPage(props) {
 		logged.add(problem);
 		console.error(problem);
 	}, [app, problem]);
-	if (resource === void 0 || action === void 0 || id === null || !onRecordRoute) return (0, react_jsx_runtime.jsx)(RecordState, { state: "not-found" });
+	if (resource === void 0 || action === void 0 || id === null || !onRecordRoute) return (0, react_jsx_runtime.jsx)(require_relation_create.RecordState, { state: "not-found" });
 	const route = action === "create" ? {
 		resource,
 		action,
@@ -1567,10 +1796,24 @@ function NavAreaNotFound() {
 	});
 }
 const adapterNoticeGiven = new WeakSet();
+const chromeNoticeGiven = new WeakSet();
 function NavAreaPage() {
 	const match = useMatch();
 	const app = (0, _burojs_react.useApp)();
 	const noAdapter = (0, _burojs_react.useOptionalRouterAdapter)() === null;
+	const chromeMounted = useNavChromeMounted();
+	const resolveLayout = useLayoutResolver();
+	const chromeGroup = match?.groupChain.find((g) => resolveLayout(g.layout)) ?? null;
+	(0, react.useEffect)(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (chromeMounted || !chromeGroup || chromeNoticeGiven.has(app)) return;
+		chromeNoticeGiven.add(app);
+		console.error(`[burojs] <NavAreaPage> is inside the nav group "${canonicalNavKey(chromeGroup)}" whose layout "${chromeGroup.layout}" draws area chrome, and no <NavChrome> is mounted above it. <AppShell> mounts one by default; with your own frame, wrap your routes in <NavChrome>.`);
+	}, [
+		app,
+		chromeMounted,
+		chromeGroup
+	]);
 	(0, react.useEffect)(() => {
 		if (!noAdapter || process.env.NODE_ENV === "production") return;
 		if (adapterNoticeGiven.has(app)) return;
@@ -1579,32 +1822,32 @@ function NavAreaPage() {
 	}, [app, noAdapter]);
 	return (0, react_jsx_runtime.jsx)(react.Suspense, {
 		fallback: (0, react_jsx_runtime.jsx)(NavAreaPageSkeleton, {}),
-		children: match ? (0, react_jsx_runtime.jsx)(NavChrome, { children: (0, react_jsx_runtime.jsx)(ResourcePageRouter, { match }) }) : (0, react_jsx_runtime.jsx)(NavAreaNotFound, {})
+		children: match ? (0, react_jsx_runtime.jsx)(ResourcePageRouter, { match }) : (0, react_jsx_runtime.jsx)(NavAreaNotFound, {})
 	});
 }
 //#endregion
-Object.defineProperty(exports, "NavAreaNotFound", {
+Object.defineProperty(exports, "BUILTIN_LAYOUTS", {
 	enumerable: true,
 	get: function() {
-		return NavAreaNotFound;
+		return BUILTIN_LAYOUTS;
 	}
 });
-Object.defineProperty(exports, "NavAreaPage", {
+Object.defineProperty(exports, "NavAreaNotFound", {
 	enumerable: true,
 	get: function() {
-		return NavAreaPage;
+		return NavAreaNotFound;
 	}
 });
-Object.defineProperty(exports, "NavChrome", {
+Object.defineProperty(exports, "NavAreaPage", {
 	enumerable: true,
 	get: function() {
-		return NavChrome;
+		return NavAreaPage;
 	}
 });
-Object.defineProperty(exports, "NavChromeBoundaryProvider", {
+Object.defineProperty(exports, "NavChromeMountedProvider", {
 	enumerable: true,
 	get: function() {
-		return NavChromeBoundaryProvider;
+		return NavChromeMountedProvider;
 	}
 });
 Object.defineProperty(exports, "PlannedBody", {
@@ -1631,12 +1874,6 @@ Object.defineProperty(exports, "RecordScreen", {
 		return RecordScreen;
 	}
 });
-Object.defineProperty(exports, "RecordState", {
-	enumerable: true,
-	get: function() {
-		return RecordState;
-	}
-});
 Object.defineProperty(exports, "ResourceListPage", {
 	enumerable: true,
 	get: function() {
@@ -1649,10 +1886,16 @@ Object.defineProperty(exports, "ResourcePageRouter", {
 		return ResourcePageRouter;
 	}
 });
-Object.defineProperty(exports, "buildNavItems", {
+Object.defineProperty(exports, "SecondarySidebarLayout", {
 	enumerable: true,
 	get: function() {
-		return buildNavItems;
+		return SecondarySidebarLayout;
+	}
+});
+Object.defineProperty(exports, "TabsLayout", {
+	enumerable: true,
+	get: function() {
+		return TabsLayout;
 	}
 });
 Object.defineProperty(exports, "canonicalNavKey", {
@@ -1685,12 +1928,6 @@ Object.defineProperty(exports, "readRecentRecords", {
 		return readRecentRecords;
 	}
 });
-Object.defineProperty(exports, "recordErrorState", {
-	enumerable: true,
-	get: function() {
-		return recordErrorState;
-	}
-});
 Object.defineProperty(exports, "recordTrail", {
 	enumerable: true,
 	get: function() {
@@ -1709,12 +1946,6 @@ Object.defineProperty(exports, "recordTrailRoute", {
 		return recordTrailRoute;
 	}
 });
-Object.defineProperty(exports, "useFormControl", {
-	enumerable: true,
-	get: function() {
-		return useFormControl;
-	}
-});
 Object.defineProperty(exports, "useHref", {
 	enumerable: true,
 	get: function() {
@@ -1739,12 +1970,6 @@ Object.defineProperty(exports, "useMatch", {
 		return useMatch;
 	}
 });
-Object.defineProperty(exports, "useNavChromeBoundary", {
-	enumerable: true,
-	get: function() {
-		return useNavChromeBoundary;
-	}
-});
 Object.defineProperty(exports, "useNavVisible", {
 	enumerable: true,
 	get: function() {
@@ -1775,6 +2000,24 @@ Object.defineProperty(exports, "useRecordVisit", {
 		return useRecordVisit;
 	}
 });
+Object.defineProperty(exports, "useReportUnresolvedLayouts", {
+	enumerable: true,
+	get: function() {
+		return useReportUnresolvedLayouts;
+	}
+});
+Object.defineProperty(exports, "useResourceDimensionOptions", {
+	enumerable: true,
+	get: function() {
+		return useResourceDimensionOptions;
+	}
+});
+Object.defineProperty(exports, "useResourceVisible", {
+	enumerable: true,
+	get: function() {
+		return useResourceVisible;
+	}
+});
 Object.defineProperty(exports, "useTrailContext", {
 	enumerable: true,
 	get: function() {
@@ -1782,4 +2025,4 @@ Object.defineProperty(exports, "useTrailContext", {
 	}
 });
 
-//# sourceMappingURL=resource-page-router-PXfMW9nh.cjs.map
+//# sourceMappingURL=resource-page-router-C_kGW2o_.cjs.map