@riducms/admin 0.2.2 → 0.3.0

package/src/app/admin-navigation-progress.svelte

@@ -1,24 +1,19 @@
 <script lang="ts">
-	import { useLocation } from "@hvniel/svelte-router";
-	import { onMount, tick } from "svelte";
+	import { useNavigation } from "@hvniel/svelte-router";
+	import { tick, untrack } from "svelte";
 
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
 
 	const revealDelayMilliseconds = 160;
 	const minimumVisibleMilliseconds = 180;
 	const completionMilliseconds = 150;
-	const fallbackIntentMilliseconds = 140;
 	const runtime = getAdminRuntime();
-	const routeLocation = $derived(useLocation());
-	const routeKey = $derived(
-		`${routeLocation.pathname}${routeLocation.search}${routeLocation.hash}`
-	);
+	const navigation = useNavigation();
 
 	type ProgressPhase = "idle" | "pending" | "running" | "finishing";
 
 	let phase = $state<ProgressPhase>("idle");
 	let progress = $state(0);
-	let observedRouteKey = "";
 	let startedAt = 0;
 	let generation = 0;
 	let revealTimer: number | undefined;
@@ -26,7 +21,6 @@
 	let finishTimer: number | undefined;
 	let hideTimer: number | undefined;
 	let resetTimer: number | undefined;
-	let intentTimer: number | undefined;
 
 	function clearTimer(timer: number | undefined) {
 		if (timer !== undefined) window.clearTimeout(timer);
@@ -52,16 +46,12 @@
 
 	function start() {
 		clearCompletionTimers();
-		clearTimer(intentTimer);
-		intentTimer = undefined;
-
-		if (phase === "pending") return;
-		if (phase === "running") {
-			generation += 1;
+		generation += 1;
+		// Progress phase is an output of this navigation synchronization, not one of its inputs.
+		if (untrack(() => phase) === "running") {
 			return;
 		}
 
-		generation += 1;
 		const activeGeneration = generation;
 		phase = "pending";
 		progress = 0;
@@ -77,6 +67,8 @@
 	}
 
 	function afterDestinationPaint() {
+		// The destination DOM flushes at tick; two frames keep the progress bar visible until that
+		// DOM has reached a browser paint rather than finishing over the retained outgoing page.
 		return new Promise<void>((resolve) => {
 			requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
 		});
@@ -112,74 +104,16 @@
 		}, remaining);
 	}
 
-	function startIntent() {
-		const routeBeforeIntent = routeKey;
-		start();
-		intentTimer = window.setTimeout(() => {
-			intentTimer = undefined;
-			if (routeKey === routeBeforeIntent) void finish();
-		}, fallbackIntentMilliseconds);
-	}
-
-	function handleLinkIntent(event: MouseEvent) {
-		if (
-			event.defaultPrevented ||
-			event.button !== 0 ||
-			event.metaKey ||
-			event.ctrlKey ||
-			event.shiftKey ||
-			event.altKey ||
-			!(event.target instanceof Element)
-		) {
-			return;
-		}
-
-		const anchor = event.target.closest<HTMLAnchorElement>("a[href]");
-		if (
-			anchor === null ||
-			anchor.hasAttribute("download") ||
-			(anchor.target !== "" && anchor.target !== "_self")
-		) {
-			return;
-		}
-
-		const destination = new URL(anchor.href, window.location.href);
-		if (
-			destination.origin !== window.location.origin ||
-			`${destination.pathname}${destination.search}${destination.hash}` ===
-				`${window.location.pathname}${window.location.search}${window.location.hash}`
-		) {
-			return;
-		}
-
-		startIntent();
-	}
-
 	$effect(() => {
-		const nextRouteKey = routeKey;
-		if (observedRouteKey === "") {
-			observedRouteKey = nextRouteKey;
-			return;
-		}
-		if (nextRouteKey === observedRouteKey) return;
-
-		observedRouteKey = nextRouteKey;
-		start();
-		void finish();
+		if (navigation.current.state === "idle") void finish();
+		else start();
 	});
 
-	onMount(() => {
-		const handleHistoryIntent = () => startIntent();
-		document.addEventListener("click", handleLinkIntent, true);
-		window.addEventListener("popstate", handleHistoryIntent);
-
+	$effect(() => {
 		return () => {
 			generation += 1;
-			document.removeEventListener("click", handleLinkIntent, true);
-			window.removeEventListener("popstate", handleHistoryIntent);
 			clearTimer(revealTimer);
 			clearTimer(trickleTimer);
-			clearTimer(intentTimer);
 			clearCompletionTimers();
 		};
 	});

package/src/app/admin-page-title.svelte

@@ -1,94 +1,26 @@
 <script lang="ts">
 	import { useLocation } from "@hvniel/svelte-router";
 
-	import { ADMIN_NAME } from "@admin/app-meta";
+	import { ADMIN_NAME, adminApplicationName } from "@admin/app-meta";
+	import { resolveAdminPageLabel } from "@admin/app/admin-page-title";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
 
 	const runtime = getAdminRuntime();
-	const location = $derived(useLocation());
-	const pageTitle = $derived.by(resolvePageTitle);
-
-	function resolvePageTitle() {
-		const segments = location.pathname.split("/").filter(Boolean);
-		if (segments.length === 0) return titled(runtime.i18n.t("dashboard:heading"));
-		if (segments[0] === "create-first-user") return titled(runtime.i18n.t("auth:createFirstUser"));
-		if (segments[0] === "login") return titled(runtime.i18n.t("auth:login"));
-		if (segments[0] === "forgot-password") return titled(runtime.i18n.t("auth:forgotPassword"));
-		if (segments[0] === "reset-password") return titled(runtime.i18n.t("auth:resetPassword"));
-		if (segments[0] === "request-verification")
-			return titled(runtime.i18n.t("auth:requestVerification"));
-		if (segments[0] === "verify-email") return titled(runtime.i18n.t("auth:verifyEmail"));
-		if (segments[0] === "account") {
-			return titled(
-				segments[1] === "security"
-					? runtime.i18n.t("account:accountSecurity")
-					: runtime.i18n.t("account:account")
-			);
-		}
-		if (segments[0] === "collections" && segments[1] !== undefined) {
-			const collection = runtime.manifest?.collections.find(
-				(candidate) => candidate.slug === segments[1]
-			);
-			const singular =
-				collection === undefined
-					? humanize(segments[1])
-					: runtime.i18n.text(collection.labels.singular, collection.labels.singularTranslations);
-			const plural =
-				collection === undefined
-					? singular
-					: runtime.i18n.text(collection.labels.plural, collection.labels.pluralTranslations);
-			if (segments[2] === undefined) return titled(plural);
-			if (segments[2] === "create") {
-				return titled(
-					segments[3] === "api"
-						? runtime.i18n.t("documents:apiFor", { label: singular })
-						: runtime.i18n.t("collections:createNew", { label: singular })
-				);
-			}
-			if (segments[2] === "trash")
-				return titled(
-					runtime.i18n.t("collections:trashFor", {
-						label: plural,
-					})
-				);
-			if (segments[3] === "api")
-				return titled(runtime.i18n.t("documents:apiFor", { label: singular }));
-			if (segments[3] === "versions")
-				return titled(runtime.i18n.t("documents:versionsFor", { label: singular }));
-			return titled(runtime.i18n.t("documents:editing", { label: singular }));
-		}
-		if (segments[0] === "globals" && segments[1] !== undefined) {
-			const global = runtime.manifest?.globals?.find((candidate) => candidate.slug === segments[1]);
-			const label =
-				global === undefined
-					? humanize(segments[1])
-					: runtime.i18n.text(global.labels.singular, global.labels.singularTranslations);
-			if (segments[2] === "api") return titled(runtime.i18n.t("documents:apiFor", { label }));
-			if (segments[2] === "versions")
-				return titled(runtime.i18n.t("documents:versionsFor", { label }));
-			return titled(label);
-		}
-		const pluginPath = segments.join("/");
-		const pluginRoute = runtime.pluginRoutes.find((route) => route.path === pluginPath);
-		if (pluginRoute?.navigation?.labelKey !== undefined)
-			return titled(runtime.i18n.t(pluginRoute.navigation.labelKey));
-		if (pluginRoute?.navigation?.label !== undefined) return titled(pluginRoute.navigation.label);
-		return titled(humanize(segments.at(-1) ?? runtime.i18n.t("navigation:page")));
-	}
-
-	function titled(value: string) {
-		const application = runtime.manifest?.application;
-		const name =
-			application === undefined
-				? ADMIN_NAME
-				: runtime.i18n.text(application.name, application.nameTranslations);
-		return `${value} - ${name}`;
-	}
-
-	function humanize(value: string) {
-		const decoded = decodeURIComponent(value).replaceAll("-", " ");
-		return decoded.charAt(0).toLocaleUpperCase(runtime.i18n.language) + decoded.slice(1);
-	}
+	const location = useLocation();
+	const extensions = runtime.config.extensions;
+	const pageLabel = $derived(
+		resolveAdminPageLabel({
+			pathname: location.current.pathname,
+			manifest: runtime.manifest,
+			routes: extensions.routes,
+			documentViews: extensions.documentViews,
+			i18n: runtime.i18n,
+		})
+	);
+	const applicationName = $derived(
+		adminApplicationName(runtime.manifest, runtime.i18n, ADMIN_NAME)
+	);
+	const pageTitle = $derived(`${pageLabel} - ${applicationName}`);
 </script>
 
 <svelte:head><title>{pageTitle}</title></svelte:head>

package/src/app/admin-page-title.ts

@@ -0,0 +1,136 @@
+import type { AdminDocumentView, AdminRoute } from "@riducms/plugin";
+import type { SchemaManifest } from "@riducms/protocol";
+import type { AdminI18n, ExtensionTranslationKey } from "@riducms/translations";
+
+import { adminPathSegments, humanizeAdminPathSegment } from "@admin/core/routing/admin-paths";
+
+type PageTitleI18n = Pick<AdminI18n, "language" | "t" | "text">;
+
+interface AdminPageLabelOptions {
+	pathname: string;
+	manifest: SchemaManifest | undefined;
+	routes: readonly AdminRoute[];
+	documentViews: readonly AdminDocumentView[];
+	i18n: PageTitleI18n;
+}
+
+export function resolveAdminPageLabel(options: AdminPageLabelOptions): string {
+	const segments = adminPathSegments(options.pathname);
+	const [root, resource, action, view] = segments;
+
+	switch (root) {
+		case undefined:
+			return options.i18n.t("dashboard:heading");
+		case "create-first-user":
+			return options.i18n.t("auth:createFirstUser");
+		case "login":
+			return options.i18n.t("auth:login");
+		case "forgot-password":
+			return options.i18n.t("auth:forgotPassword");
+		case "reset-password":
+			return options.i18n.t("auth:resetPassword");
+		case "request-verification":
+			return options.i18n.t("auth:requestVerification");
+		case "verify-email":
+			return options.i18n.t("auth:verifyEmail");
+		case "account":
+			return options.i18n.t(
+				resource === "security" ? "account:accountSecurity" : "account:account"
+			);
+		case "collections":
+			return resolveCollectionLabel(options, resource, action, view);
+		case "globals":
+			return resolveGlobalLabel(options, resource, action);
+		default:
+			return resolvePluginOrFallbackLabel(options, segments);
+	}
+}
+
+function resolveCollectionLabel(
+	options: AdminPageLabelOptions,
+	resource: string | undefined,
+	action: string | undefined,
+	view: string | undefined
+) {
+	if (resource === undefined) return humanize("collections", options.i18n);
+
+	const collection = options.manifest?.collections.find((candidate) => candidate.slug === resource);
+	const singular =
+		collection === undefined
+			? humanize(resource, options.i18n)
+			: options.i18n.text(collection.labels.singular, collection.labels.singularTranslations);
+	const plural =
+		collection === undefined
+			? singular
+			: options.i18n.text(collection.labels.plural, collection.labels.pluralTranslations);
+
+	if (action === undefined) return plural;
+	if (action === "create") {
+		return view === "api"
+			? options.i18n.t("documents:apiFor", { label: singular })
+			: options.i18n.t("collections:createNew", { label: singular });
+	}
+	if (action === "trash") return options.i18n.t("collections:trashFor", { label: plural });
+	if (action === "upload") return options.i18n.t("uploads:bulkUpload");
+	if (view === "api") return options.i18n.t("documents:apiFor", { label: singular });
+	if (view === "versions") return options.i18n.t("documents:versionsFor", { label: singular });
+
+	return (
+		resolveDocumentViewLabel(options, resource, view) ??
+		options.i18n.t("documents:editing", { label: singular })
+	);
+}
+
+function resolveGlobalLabel(
+	options: AdminPageLabelOptions,
+	resource: string | undefined,
+	view: string | undefined
+) {
+	if (resource === undefined) return humanize("globals", options.i18n);
+
+	const global = options.manifest?.globals?.find((candidate) => candidate.slug === resource);
+	const label =
+		global === undefined
+			? humanize(resource, options.i18n)
+			: options.i18n.text(global.labels.singular, global.labels.singularTranslations);
+
+	if (view === "api") return options.i18n.t("documents:apiFor", { label });
+	if (view === "versions") return options.i18n.t("documents:versionsFor", { label });
+	return resolveDocumentViewLabel(options, resource, view) ?? label;
+}
+
+function resolveDocumentViewLabel(
+	options: AdminPageLabelOptions,
+	resource: string,
+	view: string | undefined
+) {
+	if (view === undefined) return undefined;
+	return resolveExtensionLabel(
+		options.documentViews.find(
+			(candidate) =>
+				candidate.key === view &&
+				(candidate.collection === undefined || candidate.collection === resource)
+		),
+		options.i18n
+	);
+}
+
+function resolvePluginOrFallbackLabel(options: AdminPageLabelOptions, segments: string[]) {
+	const route = options.routes.find((candidate) => candidate.path === segments.join("/"));
+	return (
+		resolveExtensionLabel(route?.navigation, options.i18n) ??
+		humanize(segments.at(-1) ?? options.i18n.t("navigation:page"), options.i18n)
+	);
+}
+
+function resolveExtensionLabel(
+	extension: { label: string; labelKey?: ExtensionTranslationKey } | undefined,
+	i18n: PageTitleI18n
+) {
+	if (extension?.labelKey !== undefined) return i18n.t(extension.labelKey);
+	return extension?.label;
+}
+
+function humanize(value: string, i18n: PageTitleI18n) {
+	return humanizeAdminPathSegment(value, i18n.language);
+}

package/src/app/admin-route-error.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Link, useRouteError } from "@hvniel/svelte-router";
+	import { getAdminI18n } from "@riducms/plugin";
+	import { Button, buttonVariants } from "@riducms/ui";
+
+	const i18n = getAdminI18n();
+	const error = useRouteError();
+
+	$effect(() => {
+		console.error("Ridu admin route failed", error.current);
+	});
+</script>
+
+<main class="grid min-h-screen place-items-center p-6">
+	<section class="grid max-w-lg justify-items-start gap-5" role="alert">
+		<h1 class="text-2xl font-semibold">{i18n.t("errors:unknown")}</h1>
+		<div class="flex flex-wrap gap-3">
+			<Button onclick={() => window.location.reload()}>{i18n.t("general:reloadPage")}</Button>
+			<Link to="/" replace class={buttonVariants({ variant: "outline" })}>
+				{i18n.t("errors:returnDashboard")}
+			</Link>
+		</div>
+	</section>
+</main>

package/src/app/admin-router-provider.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { createBrowserRouter, RouterProvider } from "@hvniel/svelte-router";
+
+	import AdminRouteError from "@admin/app/admin-route-error.svelte";
+	import AdminRouterRoot from "@admin/app/admin-router-root.svelte";
+	import type { AdminBootstrapCoordinator } from "@admin/core/bootstrap/admin-bootstrap";
+
+	let {
+		coordinator,
+		adminBasePath,
+	}: { coordinator: AdminBootstrapCoordinator; adminBasePath: string } = $props();
+	// One router owns the coordinator and base path selected when this provider mounts.
+	// svelte-ignore state_referenced_locally
+	const router = createBrowserRouter(
+		[
+			{
+				id: "admin-root",
+				path: "*",
+				Component: AdminRouterRoot,
+				ErrorBoundary: AdminRouteError,
+				loader: coordinator.loader,
+				shouldRevalidate: coordinator.shouldRevalidate,
+			},
+		],
+		{
+			basename: adminBasePath,
+			hydrationData: { loaderData: { "admin-root": coordinator.initialState ?? null } },
+		}
+	);
+
+	$effect(() => () => router.dispose());
+</script>
+
+<RouterProvider {router} />

package/src/app/admin-router-root.svelte

@@ -1,7 +1,48 @@
 <script lang="ts">
+	import { useLoaderData, useLocation } from "@hvniel/svelte-router";
+	import type { AdminPreparedRouteStateV1 } from "@riducms/protocol";
+	import { tick } from "svelte";
+
+	import { createAdminScroll } from "@admin/core/routing/admin-scroll.svelte";
+	import { getAdminBootstrapCoordinator } from "@admin/core/bootstrap/admin-bootstrap";
+	import { normalizedURLIdentity } from "@admin/core/bootstrap/admin-prepared-state";
 	import AdminNavigationProgress from "@admin/app/admin-navigation-progress.svelte";
 	import AdminPageTitle from "@admin/app/admin-page-title.svelte";
 	import AdminRoutes from "@admin/app/admin-routes.svelte";
+
+	const coordinator = getAdminBootstrapCoordinator();
+	const location = useLocation();
+	const loaderData = useLoaderData<AdminPreparedRouteStateV1 | null>();
+	createAdminScroll();
+	let committedStateKey = "";
+	let markedIdentity = "";
+
+	$effect.pre(() => {
+		const routedIdentity = normalizedURLIdentity(location.current);
+		const state = loaderData.current;
+		const stateKey = `${routedIdentity}:${state?.fingerprint ?? "none"}:${state?.outcome ?? "none"}`;
+		if (stateKey === committedStateKey) return;
+
+		committedStateKey = stateKey;
+		if (state == null) return;
+
+		const stateIdentity = `${state.pathname}${state.search}`;
+		const url = new URL(stateIdentity, window.location.origin);
+		const preparedRoute = coordinator.commit(state, url);
+		if (preparedRoute !== true) return;
+
+		// Descendant controllers adopt the staged seed during this update. Discard it only after
+		// their pre-effects and the resulting DOM have committed.
+		tick().then(() => {
+			if (!coordinator.isRouteStaged(state)) return;
+			coordinator.discardRouteData(state);
+
+			if (stateIdentity !== markedIdentity) {
+				markedIdentity = stateIdentity;
+				performance.mark("ridu:admin-route-ready");
+			}
+		});
+	});
 </script>
 
 <AdminNavigationProgress />

package/src/app/admin-routes.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Route, Routes, useLocation } from "@hvniel/svelte-router";
+	import { Navigate, Route, Routes, useLocation } from "@hvniel/svelte-router";
 
 	import {
 		adminCreateFirstUserPath,
@@ -9,40 +9,42 @@
 	} from "@admin/core/routing/admin-paths";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
 	import CollectionListRoute from "@admin/features/collections/collection-list-route.svelte";
-	import BulkUploadRoute from "@admin/features/uploads/bulk-upload-route.svelte";
+	import BulkUploadRoute from "@admin/features/uploads/bulk-upload-route-loader.svelte";
 	import LoginRoute from "@admin/features/auth/login-route.svelte";
 	import CreateFirstUserRoute from "@admin/features/auth/create-first-user-route.svelte";
 	import ForgotPasswordRoute from "@admin/features/auth/forgot-password-route.svelte";
 	import ResetPasswordRoute from "@admin/features/auth/reset-password-route.svelte";
 	import RequestVerificationRoute from "@admin/features/auth/request-verification-route.svelte";
 	import VerifyEmailRoute from "@admin/features/auth/verify-email-route.svelte";
-	import AccountSecurityRoute from "@admin/features/auth/account-security-route.svelte";
-	import AccountRoute from "@admin/features/auth/account-route.svelte";
+	import AccountSecurityRoute from "@admin/features/account/account-security-route.svelte";
+	import AccountRoute from "@admin/features/account/account-route.svelte";
 	import DashboardRoute from "@admin/features/dashboard/dashboard-route.svelte";
 	import DocumentRoute from "@admin/features/documents/document-route-loader.svelte";
-	import VersionHistoryRoute from "@admin/features/versions/version-history-route.svelte";
+	import VersionHistoryRoute from "@admin/features/versions/version-history-route-loader.svelte";
 
 	import AdminLayout from "@admin/app/admin-layout.svelte";
 	import AdminCoreViewRoute from "@admin/app/admin-core-view-route.svelte";
-	import DeferredRedirect from "@admin/app/deferred-redirect.svelte";
+	import AdminExtensionRoute from "@admin/app/admin-extension-route.svelte";
 	import NotFoundRoute from "@admin/app/not-found-route.svelte";
 
 	const runtime = getAdminRuntime();
-	const location = $derived(useLocation());
-	const requestedPath = $derived(`${location.pathname}${location.search}${location.hash}`);
-	const postLoginPath = $derived(adminRedirectFromSearch(location.search));
+	const location = useLocation();
+	const requestedPath = $derived(
+		`${location.current.pathname}${location.current.search}${location.current.hash}`
+	);
+	const postLoginPath = $derived(adminRedirectFromSearch(location.current.search));
 </script>
 
 {#if runtime.authenticated}
 	<Routes>
 		<Route path="login">
 			{#snippet element()}
-				<DeferredRedirect to={postLoginPath} replace />
+				<Navigate to={postLoginPath} replace />
 			{/snippet}
 		</Route>
 		<Route path="create-first-user">
 			{#snippet element()}
-				<DeferredRedirect to={adminRoutePatterns.home} replace />
+				<Navigate to={adminRoutePatterns.home} replace />
 			{/snippet}
 		</Route>
 		<Route Component={AdminLayout}>
@@ -56,7 +58,12 @@
 			</Route>
 			<Route path="collections/:collection/trash" Component={CollectionListRoute} />
 			<Route path="collections/:collection/upload" Component={BulkUploadRoute} />
-			<Route path="collections/:collection/create/:view?">
+			<Route path="collections/:collection/create">
+				{#snippet element()}
+					<AdminCoreViewRoute surface="collectionCreate" DefaultView={DocumentRoute} />
+				{/snippet}
+			</Route>
+			<Route path="collections/:collection/create/api">
 				{#snippet element()}
 					<AdminCoreViewRoute surface="collectionCreate" DefaultView={DocumentRoute} />
 				{/snippet}
@@ -65,19 +72,49 @@
 				path="collections/:collection/:document/versions/:revision?"
 				Component={VersionHistoryRoute}
 			/>
-			<Route path="collections/:collection/:document/:view?">
+			<Route path="collections/:collection/:document">
+				{#snippet element()}
+					<AdminCoreViewRoute surface="collectionEdit" DefaultView={DocumentRoute} />
+				{/snippet}
+			</Route>
+			<Route path="collections/:collection/:document/api">
 				{#snippet element()}
 					<AdminCoreViewRoute surface="collectionEdit" DefaultView={DocumentRoute} />
 				{/snippet}
 			</Route>
+			{#each runtime.config.extensions.documentViews as view (`${view.collection ?? "*"}:${view.key}`)}
+				<Route
+					path={view.collection === undefined
+						? `collections/:collection/:document/${view.key}`
+						: `collections/${view.collection}/:document/${view.key}`}
+					Component={DocumentRoute}
+				/>
+			{/each}
 			<Route path="globals/:global/versions/:revision?" Component={VersionHistoryRoute} />
-			<Route path="globals/:global/:view?">
+			<Route path="globals/:global">
 				{#snippet element()}
 					<AdminCoreViewRoute surface="global" DefaultView={DocumentRoute} />
 				{/snippet}
 			</Route>
-			{#each runtime.pluginRoutes as pluginRoute (pluginRoute.path)}
-				<Route path={pluginRoute.path} Component={pluginRoute.component} />
+			<Route path="globals/:global/api">
+				{#snippet element()}
+					<AdminCoreViewRoute surface="global" DefaultView={DocumentRoute} />
+				{/snippet}
+			</Route>
+			{#each runtime.config.extensions.documentViews as view (`${view.collection ?? "*"}:${view.key}`)}
+				<Route
+					path={view.collection === undefined
+						? `globals/:global/${view.key}`
+						: `globals/${view.collection}/${view.key}`}
+					Component={DocumentRoute}
+				/>
+			{/each}
+			{#each runtime.config.extensions.routes as pluginRoute (pluginRoute.path)}
+				<Route path={pluginRoute.path}>
+					{#snippet element()}
+						<AdminExtensionRoute route={pluginRoute} />
+					{/snippet}
+				</Route>
 			{/each}
 			<Route path="*">
 				{#snippet element()}
@@ -91,7 +128,7 @@
 		<Route path="create-first-user" Component={CreateFirstUserRoute} />
 		<Route path="*">
 			{#snippet element()}
-				<DeferredRedirect to={adminCreateFirstUserPath()} replace />
+				<Navigate to={adminCreateFirstUserPath()} replace />
 			{/snippet}
 		</Route>
 	</Routes>
@@ -99,7 +136,7 @@
 	<Routes>
 		<Route path="create-first-user">
 			{#snippet element()}
-				<DeferredRedirect to={adminRoutePatterns.login} replace />
+				<Navigate to={adminRoutePatterns.login} replace />
 			{/snippet}
 		</Route>
 		<Route path="login" Component={LoginRoute} />
@@ -109,7 +146,7 @@
 		<Route path="verify-email" Component={VerifyEmailRoute} />
 		<Route path="*">
 			{#snippet element()}
-				<DeferredRedirect to={adminLoginPath(requestedPath)} replace />
+				<Navigate to={adminLoginPath(requestedPath)} replace />
 			{/snippet}
 		</Route>
 	</Routes>

package/src/app/loading-boundary.svelte

@@ -3,10 +3,11 @@
 
 	import RiduLogo from "@admin/components/brand/ridu-logo.svelte";
 	import { Banner } from "@admin/components/ui/banner";
-	import { Button } from "@admin/components/ui/button";
+	import { Button } from "@riducms/ui";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
 
 	let { children }: { children: Snippet } = $props();
+
 	const runtime = getAdminRuntime();
 	const development = import.meta.hot !== undefined;
 </script>
@@ -14,6 +15,7 @@
 {#if runtime.loading}
 	<main
 		class="ridu-surface-grid grid min-h-screen place-items-center"
+		data-ridu-loading-surface="runtime"
 		aria-label={runtime.i18n.t("general:loadingSchema")}
 	>
 		<div class="grid justify-items-center gap-4 text-[13px] text-foreground-muted">