@riducms/admin 0.2.2 → 0.3.0

package/src/features/documents/document-route.svelte

@@ -1,52 +1,23 @@
-<script lang="ts" module>
-	import { resolveBlockTypes } from "@riducms/protocol";
-
-	import type { SchemaField } from "@riducms/protocol";
-
-	function fieldUsesLocalization(field: SchemaField): boolean {
-		if (field.localized === true) return true;
-		if (field.nested?.fields.some(fieldUsesLocalization)) return true;
-		return (
-			resolveBlockTypes(field.blocks).some((block) => block.fields.some(fieldUsesLocalization)) ===
-			true
-		);
-	}
-
-	function withContentLocale(path: string, locale: string | undefined) {
-		if (locale === undefined) return path;
-		return `${path}?${new URLSearchParams({ locale }).toString()}`;
-	}
-</script>
-
 <script lang="ts">
 	import { focusFieldIssue } from "@admin/core/forms/field-issue-focus";
 	import type { AdminDocumentExtensionHost } from "@riducms/plugin";
 	import { Link, useBlocker, useLocation, useNavigate, useParams } from "@hvniel/svelte-router";
-	import { tick, untrack } from "svelte";
-	import CopyIcon from "~icons/lucide/copy";
-	import DownloadIcon from "~icons/lucide/download";
-	import FileUpIcon from "~icons/lucide/file-up";
-	import Trash2Icon from "~icons/lucide/trash-2";
-	import KeyRoundIcon from "~icons/lucide/key-round";
-	import MonitorUpIcon from "~icons/lucide/monitor-up";
-	import MoreVerticalIcon from "~icons/lucide/more-vertical";
+	import { tick } from "svelte";
+	import type { Attachment } from "svelte/attachments";
 	import LockKeyholeIcon from "~icons/lucide/lock-keyhole";
 
 	import { Banner } from "@admin/components/ui/banner";
-	import { Button, buttonVariants } from "@admin/components/ui/button";
 	import {
+		Button,
 		Dialog,
 		DialogContent,
 		DialogDescription,
 		DialogFooter,
 		DialogHeader,
 		DialogTitle,
-	} from "@admin/components/ui/dialog";
-	import { Popover, PopoverContent, PopoverTrigger } from "@admin/components/ui/popover";
-	import { Select, SelectContent, SelectItem, SelectTrigger } from "@admin/components/ui/select";
+	} from "@riducms/ui";
 	import { Skeleton } from "@admin/components/ui/skeleton";
 	import {
-		collectionPath,
 		createDocumentAPIPath,
 		createDocumentPath,
 		documentIDFromAdminPath,
@@ -56,41 +27,54 @@
 		globalAPIPath,
 		globalPath,
 		globalVersionsPath,
+		withContentLocale,
 	} from "@admin/core/routing/admin-paths";
 	import { getNotificationCenter } from "@admin/core/notifications/notification-center.svelte";
+	import { registerAdminScrollPage } from "@admin/core/routing/admin-scroll.svelte";
+	import { MediaQuery } from "svelte/reactivity";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import { getAdminBootstrapCoordinator } from "@admin/core/bootstrap/admin-bootstrap";
+	import { fieldsUseLocalization } from "@admin/core/schema/field-localization";
 	import { DocumentController } from "@admin/features/documents/document-controller.svelte";
 	import {
 		documentRouteIsDirty,
+		validateNewUserCredentials,
 		saveAuthCreateWithClearedCredentials,
 		type AuthCreateCredentials,
-	} from "@admin/features/documents/document-route-dirty";
+	} from "@admin/features/documents/document-credentials";
 	import LivePreviewPanel from "@admin/features/documents/live-preview-panel.svelte";
 	import UploadDocumentPreview from "@admin/features/documents/upload-document-preview-loader.svelte";
 	import DocumentFieldSections from "@admin/features/documents/document-field-sections.svelte";
 	import DocumentAPIView from "@admin/features/documents/document-api-view-loader.svelte";
 
+	import { getBreadcrumbs } from "@admin/features/navigation/breadcrumb-context.svelte";
+	import DocumentActionBar from "@admin/features/documents/document-action-bar.svelte";
+	import DocumentOperationDialogs from "@admin/features/documents/document-operation-dialogs.svelte";
+	import DocumentCredentials from "@admin/features/documents/document-credentials.svelte";
+
+	import "@admin/features/documents/document.scss";
+
 	const runtime = getAdminRuntime();
+	const bootstrap = getAdminBootstrapCoordinator();
 	const notifications = getNotificationCenter();
 	const navigate = useNavigate();
-	const params = $derived(useParams<"collection" | "document" | "global">());
-	const location = $derived(useLocation());
-	const globalResource = $derived(params.global !== undefined);
-	const slug = $derived(params.global ?? params.collection ?? "");
+	const params = useParams<"collection" | "document" | "global">();
+	const location = useLocation();
+	const preparedRoute = $derived(
+		bootstrap.routeData(location.current.pathname, location.current.search)
+	);
+	const globalResource = $derived(params.current.global !== undefined);
+	const slug = $derived(params.current.global ?? params.current.collection ?? "");
 	let routeDocumentID = $state(
-		untrack(() =>
-			params.document === undefined ? undefined : documentIDFromAdminPath(location.pathname)
-		)
+		params.current.document === undefined
+			? undefined
+			: documentIDFromAdminPath(location.current.pathname)
 	);
-	$effect(() => {
-		if (params.document === undefined) {
-			routeDocumentID = undefined;
-			return;
-		}
-		const decoded = documentIDFromAdminPath(location.pathname);
-		// A parent route can remain mounted for one render after navigation has
-		// moved to the collection list. Retain its exact ID until unmount so the
-		// document controller does not transiently enter create mode.
+	$effect.pre(() => {
+		if (params.current.document === undefined) return;
+		const decoded = documentIDFromAdminPath(location.current.pathname);
+		// Parent route params can clear one render before unmount. Retain the exact
+		// document owner so the outgoing editor cannot transiently enter create mode.
 		if (decoded !== undefined) routeDocumentID = decoded;
 	});
 	const localization = $derived(runtime.manifest?.application.localization);
@@ -99,19 +83,16 @@
 			(candidate) => candidate.slug === slug
 		)
 	);
-	const localeEnabled = $derived(resourceSchema?.fields.some(fieldUsesLocalization) === true);
-	const requestedLocale = $derived(new URLSearchParams(location.search).get("locale"));
-	const activeLocale = $derived(
-		localization?.locales.some((locale) => locale.code === requestedLocale)
-			? (requestedLocale ?? localization?.defaultLocale)
-			: (runtime.contentLocale ?? localization?.defaultLocale)
-	);
+	const localeEnabled = $derived(fieldsUseLocalization(resourceSchema?.fields ?? []));
+	const requestedLocale = $derived(new URLSearchParams(location.current.search).get("locale"));
+	const activeLocale = $derived(runtime.resolveContentLocale(requestedLocale));
 	const activeLocaleConfig = $derived(
 		localeEnabled ? localization?.locales.find((locale) => locale.code === activeLocale) : undefined
 	);
 	const routeDocumentView = $derived<"edit" | "api">(
-		location.pathname.endsWith("/api") ? "api" : "edit"
+		location.current.pathname.endsWith("/api") ? "api" : "edit"
 	);
+	let documentView = $derived<string>(routeDocumentView);
 	const editPath = $derived(
 		withContentLocale(
 			globalResource
@@ -151,81 +132,30 @@
 		get global() {
 			return globalResource;
 		},
-		get view() {
-			return routeDocumentView;
-		},
 		get locale() {
 			return activeLocale;
 		},
+		get editable() {
+			return routeDocumentView === "edit";
+		},
+		get prepared() {
+			if (preparedRoute?.kind === "collection-create") return preparedRoute.create;
+			if (
+				preparedRoute?.kind === "collection-document" ||
+				preparedRoute?.kind === "global-document" ||
+				preparedRoute?.kind === "collection-api" ||
+				preparedRoute?.kind === "global-api"
+			)
+				return preparedRoute.document;
+			return undefined;
+		},
 	});
 	const form = controller.form;
-	const {
-		assetFilename,
-		assetURL,
-		canDelete,
-		canDuplicate,
-		canEditImage,
-		canPublish,
-		canReadVersions,
-		canSave,
-		canTakeOverLock,
-		canUnpublish,
-		collection,
-		collectionSlug,
-		copiedAssetURL,
-		creating,
-		currentDocument,
-		currentStatus,
-		draftsCollection,
-		documentFields,
-		documentHeading,
-		documentID,
-		documentView,
-		duplicateOperation,
-		error,
-		imageOperation,
-		imageOutcomeUncertain,
-		loading,
-		lockedByAnotherEditor,
-		hasUnsavedChanges,
-		lockOperation,
-		lockOwnerLabel,
-		lockUpdatedAt,
-		pendingRestore,
-		saveOutcomeUncertain,
-		selectedFile,
-		uploadCollection,
-		versionOperation,
-		versionedCollection,
-		versions,
-	} = $derived(controller);
-	const {
-		changePublication,
-		copyAssetURL,
-		duplicate,
-		documentDate,
-		remove,
-		requestRestore,
-		restore,
-		save,
-		takeOverLock,
-		updateUploadImage,
-		versionDate,
-	} = controller;
-	const customDocumentActions = $derived(
-		globalResource
-			? []
-			: runtime.documentActions.filter(
-					(action) =>
-						(action.collection === undefined || action.collection === collectionSlug) &&
-						(action.requires === undefined || form.access?.operations[action.requires] === true)
-				)
-	);
 	const customDocumentViews = $derived(
-		currentDocument === undefined
+		controller.currentDocument === undefined
 			? []
-			: runtime.documentViews.filter(
-					(view) => view.collection === undefined || view.collection === collectionSlug
+			: runtime.config.extensions.documentViews.filter(
+					(view) => view.collection === undefined || view.collection === controller.collectionSlug
 				)
 	);
 	const customDocumentView = $derived(
@@ -235,65 +165,65 @@
 		refresh: controller.refresh,
 		notify: (tone, title, message) => notifications[tone]({ title, message }),
 	};
-	let unlockOperation = $state(false);
-	let newUserPassword = $state("");
-	let newUserPasswordConfirmation = $state("");
+	let credentials = $state<AuthCreateCredentials>({ password: "", passwordConfirmation: "" });
 	let credentialIssue = $state<string>();
 	let livePreviewOpen = $state(false);
-	let moreActionsOpen = $state(false);
-	let copyLocaleOperation = $state(false);
+	let viewport: HTMLElement | null = null;
+	let fieldsViewport: HTMLElement | null = null;
+	const attachViewport: Attachment<HTMLElement> = (element) => {
+		viewport = element;
+		return () => {
+			if (viewport === element) viewport = null;
+		};
+	};
+	const attachFieldsViewport: Attachment<HTMLElement> = (element) => {
+		fieldsViewport = element;
+		return () => {
+			if (fieldsViewport === element) fieldsViewport = null;
+		};
+	};
+	const splitPreview = new MediaQuery("(min-width: 1240px)");
+	registerAdminScrollPage({
+		ready: () => !controller.loading,
+		target: () =>
+			documentView !== "api" && livePreviewOpen && splitPreview.current ? fieldsViewport : viewport,
+	});
 	const livePreviewRouteKey = $derived(
-		`${globalResource ? "global" : "collection"}:${collectionSlug}:${documentID ?? collectionSlug}`
+		`${globalResource ? "global" : "collection"}:${controller.collectionSlug}:${controller.documentID ?? controller.collectionSlug}`
 	);
 	let previousLivePreviewRouteKey: string | undefined;
-	let dismissedLock = $state<string>();
-	const livePreview = $derived(collection?.admin.livePreview);
+	const livePreview = $derived(controller.collection?.admin.livePreview);
 	$effect(() => {
-		const state = location.state as { openLivePreview?: boolean } | null;
+		const state = location.current.state as { openLivePreview?: boolean } | null;
 		if (routeDocumentView !== "edit" || state?.openLivePreview !== true) return;
 		livePreviewOpen = true;
 		// API and edit views have separate route instances. Consume the transient
 		// intent on arrival so Back or reload cannot reopen a dismissed preview.
 		const { openLivePreview: _, ...remainingState } = state;
-		navigate(`${location.pathname}${location.search}${location.hash}`, {
+		navigate(`${location.current.pathname}${location.current.search}${location.current.hash}`, {
 			replace: true,
 			state: remainingState,
 		});
 	});
-	const creatingAuthUser = $derived(
-		creating && !globalResource && collection?.capabilities.auth === true
-	);
 	const dirty = $derived(
 		documentRouteIsDirty({
-			documentValuesDirty: hasUnsavedChanges,
-			creatingAuthUser,
-			password: newUserPassword,
-			passwordConfirmation: newUserPasswordConfirmation,
+			documentValuesDirty: controller.hasUnsavedChanges,
+			creatingAuthUser: controller.creatingAuthUser,
+			password: credentials.password,
+			passwordConfirmation: credentials.passwordConfirmation,
 		})
 	);
 	const navigationBlocker = useBlocker(() => dirty || form.submitting);
-	const canForceUnlock = $derived(
-		!globalResource &&
-			!creating &&
-			collection?.capabilities.auth === true &&
-			(collection.authSettings?.maxLoginAttempts ?? 0) > 0 &&
-			form.access?.operations.update === true
-	);
-	$effect(() => {
-		if (activeLocale === undefined || requestedLocale === activeLocale) return;
-		const next = new URLSearchParams(location.search);
-		next.set("locale", activeLocale);
-		navigate(`${location.pathname}?${next.toString()}${location.hash}`, { replace: true });
-	});
+
 	$effect(() => {
 		return runtime.registerContentLocaleBlocker(
 			() =>
 				dirty ||
 				form.submitting ||
-				controller.versionOperation ||
-				controller.imageOperation ||
+				controller.publicationOperation ||
+				controller.upload.busy ||
 				controller.duplicateOperation ||
-				copyLocaleOperation
+				controller.copyLocaleOperation
 		);
 	});
 	$effect(() => {
@@ -322,127 +252,69 @@
 		}
 	});
 
-	async function forceUnlock() {
-		if (collection === undefined || currentDocument === undefined) return;
-		unlockOperation = true;
-		try {
-			await runtime.client.forceUnlock(collection.slug, currentDocument.id);
-			notifications.success({ title: runtime.i18n.t("documents:accountUnlocked") });
-		} catch (cause) {
-			notifications.error({
-				title: runtime.i18n.t("documents:accountUnlockFailed"),
-				message: cause instanceof Error ? cause.message : undefined,
-			});
-		} finally {
-			unlockOperation = false;
-		}
-	}
-
 	function toggleLivePreview() {
 		if (!livePreviewOpen && routeDocumentView === "api") {
 			navigate(editPath, { replace: true, state: { openLivePreview: true } });
 			return;
 		}
 		livePreviewOpen = !livePreviewOpen;
-		if (livePreviewOpen) {
-			controller.documentView = "edit";
-		}
+		if (livePreviewOpen) documentView = "edit";
 	}
 
 	function selectCustomDocumentView(view: string) {
-		controller.documentView = view;
+		documentView = view;
 		if (routeDocumentView === "api") navigate(editPath, { replace: true });
 	}
 
-	async function copyFromLocale(source: string) {
-		if (
-			activeLocale === undefined ||
-			source === activeLocale ||
-			currentDocument === undefined ||
-			copyLocaleOperation
-		)
-			return;
-		copyLocaleOperation = true;
-		try {
-			if (globalResource) {
-				await runtime.client.copyGlobalLocale(
-					slug,
-					{ from: source, to: activeLocale },
-					{ revision: currentDocument._revision }
-				);
-			} else {
-				await runtime.client.copyLocale(
-					slug,
-					currentDocument.id,
-					{ from: source, to: activeLocale },
-					{ revision: currentDocument._revision }
-				);
-			}
-			await controller.refresh();
-			runtime.documentsChanged();
-			notifications.success({
-				title: runtime.i18n.t("documents:localeCopied"),
-				message: runtime.i18n.t("documents:localeCopiedDescription", {
-					source,
-					destination: activeLocale,
-				}),
-			});
-		} catch (cause) {
-			notifications.error({
-				title: runtime.i18n.t("documents:localeNotCopied"),
-				message:
-					cause instanceof Error ? cause.message : runtime.i18n.t("documents:localeCopyFailed"),
-			});
-		} finally {
-			copyLocaleOperation = false;
-		}
-	}
-
-	async function handleTakeover() {
-		await takeOverLock();
-	}
-
-	const lockKey = $derived(
-		lockedByAnotherEditor
-			? `${collectionSlug}:${controller.documentID ?? ""}:${lockOwnerLabel ?? ""}:${lockUpdatedAt ?? ""}`
-			: undefined
-	);
-
 	async function submitDocument(event: Event, publish: boolean) {
 		event.preventDefault();
-		if (creatingAuthUser) {
-			credentialIssue = validateNewUserPassword();
+		if (controller.creatingAuthUser) {
+			credentialIssue = validateNewUserCredentials(
+				credentials,
+				controller.collection?.authSettings,
+				runtime.i18n
+			);
 			if (credentialIssue !== undefined) {
 				document.getElementById("ridu-new-user-password")?.focus();
 				return;
 			}
 		}
-		const saved = creatingAuthUser
+		const saved = controller.creatingAuthUser
 			? await saveAuthCreateWithClearedCredentials(
 					{
-						password: newUserPassword,
-						passwordConfirmation: newUserPasswordConfirmation,
+						password: credentials.password,
+						passwordConfirmation: credentials.passwordConfirmation,
 					},
 					replaceNewUserCredentials,
-					(password) => save({ password, publish })
+					(password) => controller.save({ password, publish })
 				)
-			: await save({ publish });
+			: await controller.save({ publish });
 		if (saved) {
 			resetNewUserCredentials();
 			return;
 		}
-		const issuePath = controller.revealFirstIssue();
+		const issuePath = form.issues[0]?.path;
 		if (issuePath === undefined) return;
+		documentView = "edit";
 		await tick();
-		await focusFieldIssue(issuePath);
+		if (fieldsViewport) await focusFieldIssue(issuePath, fieldsViewport);
 	}
 
-	async function handleSave(event: Event) {
-		await submitDocument(event, !creating && versionedCollection && currentStatus === "published");
+	function handleSave(event: Event) {
+		return submitDocument(
+			event,
+			!controller.creating &&
+				controller.versionedCollection &&
+				controller.currentStatus === "published"
+		);
 	}
 
-	async function handlePublish(event: Event) {
-		await submitDocument(event, true);
+	function handlePublish(event: Event) {
+		if (!controller.creating && controller.currentStatus === "draft" && !dirty) {
+			event.preventDefault();
+			return controller.changePublication("published");
+		}
+		return submitDocument(event, true);
 	}
 
 	function cancelNavigation() {
@@ -456,512 +328,254 @@
 		navigationBlocker.proceed();
 	}
 
+	const breadcrumbs = getBreadcrumbs();
+	$effect(() => {
+		if (!breadcrumbs) return;
+		const entry = { pathname: location.current.pathname, label: controller.documentHeading };
+		breadcrumbs.document = entry;
+		return () => {
+			if (breadcrumbs.document === entry) breadcrumbs.document = undefined;
+		};
+	});
+
 	function resetNewUserCredentials() {
 		replaceNewUserCredentials({ password: "", passwordConfirmation: "" });
 	}
 
-	function replaceNewUserCredentials(credentials: AuthCreateCredentials) {
-		newUserPassword = credentials.password;
-		newUserPasswordConfirmation = credentials.passwordConfirmation;
+	function replaceNewUserCredentials(next: AuthCreateCredentials) {
+		credentials = next;
 		credentialIssue = undefined;
 	}
-
-	function validateNewUserPassword() {
-		if (!creatingAuthUser || collection?.authSettings === undefined) return undefined;
-		if (newUserPassword === "") return runtime.i18n.t("documents:enterNewAccountPassword");
-		if (Array.from(newUserPassword).length < collection.authSettings.passwordMinLength) {
-			return runtime.i18n.t("documents:passwordTooShort", {
-				minimum: runtime.i18n.formatNumber(collection.authSettings.passwordMinLength),
-			});
-		}
-		if (
-			new TextEncoder().encode(newUserPassword).length > collection.authSettings.passwordMaxBytes
-		) {
-			return runtime.i18n.t("documents:passwordTooLong", {
-				maximum: runtime.i18n.formatNumber(collection.authSettings.passwordMaxBytes),
-			});
-		}
-		if (newUserPassword !== newUserPasswordConfirmation)
-			return runtime.i18n.t("documents:passwordsDoNotMatch");
-		return undefined;
-	}
 </script>
 
 <section
-	class="flex min-h-screen flex-col md:h-full md:min-h-0 md:overflow-x-hidden md:overflow-y-auto"
+	{@attach attachViewport}
+	data-slot="document-viewport"
+	class={["ridu-document", documentView === "api" && "ridu-document--api"]}
 >
-	<header class="shrink-0 bg-background">
-		<div
-			class="flex min-h-[88px] flex-col justify-center gap-3 px-5 py-3 sm:px-8 lg:flex-row lg:items-center lg:justify-between lg:px-[60px]"
-		>
+	<header class="ridu-document-header">
+		<div class="ridu-document-heading">
 			<h1
-				class="text-[30px] font-semibold leading-tight tracking-[-0.025em] text-foreground-strong"
-				aria-busy={loading && currentDocument === undefined && !creating}
+				class="ridu-document-title"
+				aria-busy={controller.loading &&
+					controller.currentDocument === undefined &&
+					!controller.creating}
 			>
-				{documentHeading}
+				{controller.documentHeading}
 			</h1>
-			<nav
-				class="flex min-w-0 shrink-0 items-center gap-5 overflow-x-auto lg:ms-auto"
-				aria-label={runtime.i18n.t("documents:documentViews")}
-			>
-				<Link
-					to={editPath}
-					class={[
-						"mt-2 flex h-8 items-center px-3 text-[12.5px] text-foreground-muted lg:mt-0",
-						documentView === "edit" && "bg-control text-foreground-strong",
-					]}
-					onclick={() => (controller.documentView = "edit")}
-				>
-					{runtime.i18n.t("documents:edit")}
-				</Link>
-				<Link
-					to={apiPath}
-					class={[
-						"mt-2 flex h-8 items-center px-3 text-[12.5px] text-foreground-muted lg:mt-0",
-						documentView === "api" && "bg-control text-foreground-strong",
-					]}
-				>
-					{runtime.i18n.t("documents:api")}
-				</Link>
-				{#each customDocumentViews as view (view.key)}<button
-						type="button"
-						class={[
-							"mt-2 h-8 shrink-0 px-3 text-[12.5px] text-foreground-muted lg:mt-0",
-							documentView === view.key && "bg-control text-foreground-strong",
-						]}
-						onclick={() => selectCustomDocumentView(view.key)}
+			{#if !controller.creating || routeDocumentView === "api"}
+				<nav class="ridu-document-tabs" aria-label={runtime.i18n.t("documents:documentViews")}>
+					<Link
+						to={editPath}
+						class={["ridu-document-tab", documentView === "edit" && "ridu-document-tab--active"]}
+						onclick={() => (documentView = "edit")}
 					>
-						{view.labelKey === undefined ? view.label : runtime.i18n.t(view.labelKey)}
-					</button>{/each}
-				{#if !creating && versionedCollection && canReadVersions}<Link
-						class="mt-2 flex h-8 items-center px-3 text-[12.5px] text-foreground-muted hover:text-foreground-strong lg:mt-0"
-						to={versionHistoryPath}
+						{runtime.i18n.t("documents:edit")}
+					</Link>
+
+					{#each customDocumentViews as view (view.key)}
+						<button
+							type="button"
+							class={[
+								"ridu-document-tab",
+								documentView === view.key && "ridu-document-tab--active",
+							]}
+							onclick={() => selectCustomDocumentView(view.key)}
+						>
+							{view.labelKey === undefined ? view.label : runtime.i18n.t(view.labelKey)}
+						</button>
+					{/each}
+					{#if !controller.creating && controller.versionedCollection && controller.canReadVersions}
+						<Link class="ridu-document-tab" to={versionHistoryPath}>
+							{runtime.i18n.t("documents:versions")}
+						</Link>
+					{/if}
+					<Link
+						to={apiPath}
+						class={["ridu-document-tab", documentView === "api" && "ridu-document-tab--active"]}
 					>
-						{runtime.i18n.t("documents:versions")}
-					</Link>{/if}
-			</nav>
+						{runtime.i18n.t("documents:api")}
+					</Link>
+				</nav>
+			{/if}
 		</div>
+		{#if documentView !== "api" && controller.collection?.admin.description}
+			<p class="ridu-document-description">
+				{runtime.i18n.text(
+					controller.collection.admin.description,
+					controller.collection.admin.descriptionTranslations
+				)}
+			</p>
+		{/if}
 	</header>
 
+	{#if documentView !== "api"}
+		<!-- Editor-owned overlays and extension actions must not survive a route or locale identity change. -->
+		{#key `${livePreviewRouteKey}:${activeLocale ?? ""}`}
+			<DocumentActionBar
+				{controller}
+				{extensionHost}
+				{localeEnabled}
+				{activeLocale}
+				{livePreviewOpen}
+				onTogglePreview={toggleLivePreview}
+				onSave={handleSave}
+				onPublish={handlePublish}
+			/>
+		{/key}
+	{/if}
+
 	<div
-		class="relative sticky top-[-3.5rem] z-20 shrink-0 border-y border-control-border bg-background/96 backdrop-blur-md before:pointer-events-none before:absolute before:top-[-1px] before:end-[-1rem] before:h-px before:w-4 before:bg-control-border after:pointer-events-none after:absolute after:end-[-1rem] after:bottom-[-1px] after:h-px after:w-4 after:bg-control-border xl:top-0 xl:grid xl:grid-cols-1"
+		class={[
+			"ridu-document-body",
+			{ "ridu-document-body--preview": documentView !== "api" && livePreviewOpen },
+		]}
 	>
 		<div
-			class="flex min-h-14 flex-wrap items-center gap-x-10 gap-y-1 px-5 py-2 text-[11.5px] text-foreground-faint sm:px-8 lg:px-[60px] xl:col-start-1 xl:row-start-1 xl:pe-[620px]"
-		>
-			{#if localeEnabled && activeLocale !== undefined && localization !== undefined && !creating && currentDocument !== undefined && localization.locales.length > 1}
-				<div class="flex items-center gap-2.5">
-					<Select
-						type="single"
-						value=""
-						disabled={form.dirty || loading || form.submitting || copyLocaleOperation}
-						onValueChange={copyFromLocale}
-					>
-						<SelectTrigger
-							size="compact"
-							class="min-w-28"
-							aria-label={runtime.i18n.t("documents:copyFromLocale")}
-						>
-							<span>
-								{copyLocaleOperation
-									? runtime.i18n.t("documents:copying")
-									: runtime.i18n.t("documents:copyFrom")}
-							</span>
-						</SelectTrigger>
-						<SelectContent>
-							{#each localization.locales.filter((locale) => locale.code !== activeLocale) as locale (locale.code)}
-								<SelectItem value={locale.code} label={locale.label}>
-									<span>{locale.label}</span>
-									<span class="ms-1 text-foreground-faint">{locale.code}</span>
-								</SelectItem>
-							{/each}
-						</SelectContent>
-					</Select>
-				</div>
-			{/if}
-			<span>
-				{runtime.i18n.t("documents:status")}:
-				<strong class="font-semibold text-foreground-strong">
-					{versionedCollection
-						? runtime.i18n.t(currentStatus === "draft" ? "documents:draft" : "documents:published")
-						: creating
-							? runtime.i18n.t("documents:draft")
-							: runtime.i18n.t("documents:saved")}
-				</strong>
-			</span>
-			{#if !creating && currentDocument !== undefined}
-				<span class="hidden sm:inline">
-					{runtime.i18n.t("documents:lastModifiedLabel")}:
-					<strong class="font-semibold text-foreground-strong">
-						{documentDate(currentDocument.updatedAt)}
-					</strong>
-				</span>
-				<span class="hidden md:inline">
-					{runtime.i18n.t("documents:createdLabelPlain")}:
-					<strong class="font-semibold text-foreground-strong">
-						{documentDate(currentDocument.createdAt)}
-					</strong>
-				</span>
-			{/if}
-		</div>
-
-		<div
-			class="flex min-h-12 items-center gap-2 border-t border-control-border bg-background px-5 sm:px-8 lg:px-[60px] xl:col-start-1 xl:row-start-1 xl:min-h-14 xl:w-fit xl:justify-self-end xl:border-t-0 xl:pe-[60px] xl:ps-0"
+			{@attach attachFieldsViewport}
+			data-slot="document-fields-viewport"
+			class="ridu-document-editor"
 		>
-			{#if !creating && currentDocument !== undefined && livePreview !== undefined}
-				<Button
-					variant="outline"
-					size="icon-sm"
-					onclick={toggleLivePreview}
-					aria-label={runtime.i18n.t("documents:livePreview")}
-					aria-pressed={livePreviewOpen}
-				>
-					<MonitorUpIcon class="size-3.5" aria-hidden="true" />
-				</Button>
-			{/if}
-			{#if canTakeOverLock}<Button
-					variant="outline"
-					size="sm"
-					disabled={lockOperation}
-					onclick={handleTakeover}
-				>
-					<LockKeyholeIcon class="size-3.5" aria-hidden="true" />{lockOperation
-						? runtime.i18n.t("documents:takingOver")
-						: runtime.i18n.t("documents:takeOver")}
-				</Button>{/if}
-			{#if creating && draftsCollection && canPublish && !uploadCollection && !creatingAuthUser}
-				<Button
-					variant="outline"
-					size="sm"
-					disabled={!canSave}
-					aria-busy={form.submitting}
-					onclick={handleSave}
-				>
-					{runtime.i18n.t("documents:saveDraft")}
-				</Button>
-				<Button size="sm" disabled={!canSave} aria-busy={form.submitting} onclick={handlePublish}>
-					{runtime.i18n.t("documents:publish")}
-				</Button>
-			{:else if creating && versionedCollection && !draftsCollection}
-				<Button
-					size="sm"
-					disabled={!canSave || !canPublish}
-					aria-busy={form.submitting}
-					onclick={handlePublish}
-				>
-					{runtime.i18n.t("documents:publish")}
-				</Button>
-			{:else}
-				<Button
-					size="sm"
-					disabled={!canSave ||
-						(versionedCollection && currentStatus === "published" && !canPublish)}
-					aria-busy={form.submitting}
-					onclick={handleSave}
-				>
-					{creating && draftsCollection
-						? runtime.i18n.t("documents:saveDraft")
-						: versionedCollection
-							? currentStatus === "published"
-								? runtime.i18n.t("documents:publishChanges")
-								: runtime.i18n.t("documents:saveDraft")
-							: runtime.i18n.t("documents:save")}
-				</Button>
-			{/if}
-			{#if !creating && versionedCollection && currentStatus === "draft" && canPublish}
-				<Button
-					variant="outline"
-					size="sm"
-					disabled={versionOperation || form.dirty || form.submitting}
-					onclick={() => changePublication("published")}
-				>
-					{runtime.i18n.t("documents:publish")}
-				</Button>
-			{/if}
-			<div class="ms-auto flex items-center gap-2">
-				{#if collection !== undefined && currentDocument !== undefined && !lockedByAnotherEditor}{#each customDocumentActions as action (action.key)}<action.component
-							{collection}
-							document={currentDocument}
-							host={extensionHost}
-							i18n={runtime.i18n}
-						/>{/each}{/if}
-				{#if (!globalResource && !creating && canDuplicate) || (!globalResource && !creating && uploadCollection && assetURL !== undefined) || (!creating && versionedCollection && currentStatus === "published" && canUnpublish) || (!globalResource && !creating && canDelete) || canForceUnlock}
-					<Popover bind:open={moreActionsOpen}>
-						<PopoverTrigger
-							class={buttonVariants({ variant: "outline", size: "sm", class: "size-9 p-0" })}
-							aria-label={runtime.i18n.t("documents:moreActions")}
+			<div class="ridu-document-fields">
+				{#if controller.lock.error !== undefined}
+					<Banner class="ridu-document-notice" tone="destructive">
+						<span class="ridu-document-notice__message">{controller.lock.error}</span>
+						<Button
+							type="button"
+							variant="outline"
+							size="xs"
+							disabled={controller.lock.operation}
+							onclick={controller.lock.retry}
 						>
-							<MoreVerticalIcon class="size-4" aria-hidden="true" />
-						</PopoverTrigger>
-						<PopoverContent align="end" class="w-52 gap-1 p-1.5">
-							{#if !globalResource && !creating && canDuplicate}<Button
-									variant="ghost"
-									class="w-full justify-start"
-									disabled={duplicateOperation}
-									onclick={() => {
-										moreActionsOpen = false;
-										duplicate();
-									}}
-								>
-									<CopyIcon class="size-3.5" />{duplicateOperation
-										? runtime.i18n.t("documents:duplicating")
-										: runtime.i18n.t("documents:duplicate")}
-								</Button>{/if}
-							{#if !globalResource && !creating && uploadCollection && assetURL !== undefined}<Button
-									variant="ghost"
-									class="w-full justify-start"
-									href={assetURL}
-									download={assetFilename}
-								>
-									<DownloadIcon class="size-3.5" />
-									{runtime.i18n.t("documents:download")}
-								</Button>{/if}
-							{#if !creating && versionedCollection && currentStatus === "published" && canUnpublish}<Button
-									variant="ghost"
-									class="w-full justify-start"
-									disabled={versionOperation || form.dirty || form.submitting}
-									onclick={() => {
-										moreActionsOpen = false;
-										changePublication("draft");
-									}}
-								>
-									{runtime.i18n.t("documents:unpublish")}
-								</Button>{/if}
-							{#if !globalResource && !creating && canDelete}<Button
-									variant="ghost"
-									class="w-full justify-start text-destructive hover:bg-destructive/7 hover:text-destructive"
-									onclick={() => {
-										moreActionsOpen = false;
-										controller.deleteDialogOpen = true;
-									}}
-								>
-									<Trash2Icon class="size-3.5" />
-									{runtime.i18n.t(
-										uploadCollection ? "documents:deleteAsset" : "documents:deleteDocument"
-									)}
-								</Button>{/if}
-							{#if canForceUnlock}<Button
-									variant="ghost"
-									class="w-full justify-start"
-									disabled={unlockOperation}
-									onclick={() => {
-										moreActionsOpen = false;
-										forceUnlock();
-									}}
-								>
-									<KeyRoundIcon class="size-3.5" aria-hidden="true" />{unlockOperation
-										? runtime.i18n.t("documents:unlocking")
-										: runtime.i18n.t("documents:forceUnlock")}
-								</Button>{/if}
-						</PopoverContent>
-					</Popover>
+							{runtime.i18n.t("general:retry")}
+						</Button>
+					</Banner>
 				{/if}
-			</div>
-		</div>
-	</div>
-
-	<div
-		class={[
-			"flex min-h-0 flex-1 flex-col",
-			livePreviewOpen && "min-[1240px]:flex-row min-[1240px]:overflow-hidden",
-		]}
-	>
-		<div class={["min-w-0 flex-1", livePreviewOpen && "min-[1240px]:overflow-y-auto"]}>
-			<div class="w-full px-5 py-8 sm:px-8 sm:py-9 lg:px-[60px]">
-				{#if lockedByAnotherEditor}
-					<Banner class="mb-6" tone="warning">
-						<LockKeyholeIcon class="mt-0.5 size-4 shrink-0" aria-hidden="true" />
+				{#if controller.lock.lockedByAnotherEditor}
+					<Banner class="ridu-document-notice" tone="warning">
+						<LockKeyholeIcon class="ridu-document-notice__icon" aria-hidden="true" />
 						<span>
 							{runtime.i18n.t("documents:lockedReadOnly", {
-								owner: lockOwnerLabel ?? runtime.i18n.t("documents:anotherEditor"),
+								owner: controller.lock.ownerLabel ?? runtime.i18n.t("documents:anotherEditor"),
 							})}
 						</span>
 					</Banner>
 				{/if}
-				{#if error !== undefined}
-					<Banner class="mb-6" tone="destructive">
-						<span class="size-2 shrink-0 rounded-full bg-destructive" aria-hidden="true"></span>
-						{error}
-					</Banner>
-				{/if}
-
-				{#if saveOutcomeUncertain}
-					<Banner class="mb-6" tone="warning">
-						{runtime.i18n.t("uploads:outcomeUnknownDescription")}
+				{#if documentView !== "api" && controller.error !== undefined}
+					<Banner class="ridu-document-notice" tone="destructive">
+						<span class="ridu-document-notice__error-marker" aria-hidden="true"></span>
+						{controller.error}
 					</Banner>
 				{/if}
 
-				{#if imageOutcomeUncertain}
-					<Banner class="mb-6" tone="warning">
-						{runtime.i18n.t("uploads:imageOutcomeUnknownDescription")}
+				{#if controller.saveOutcomeUncertain}
+					<Banner class="ridu-document-notice" tone="warning">
+						{runtime.i18n.t(
+							controller.creating
+								? "uploads:outcomeUnknownDescription"
+								: "uploads:saveOutcomeUnknownDescription"
+						)}
+						{#if !controller.creating}
+							<Button
+								variant="outline"
+								size="sm"
+								disabled={controller.loading}
+								onclick={controller.refresh}
+							>
+								{runtime.i18n.t("uploads:reloadSaved")}
+							</Button>
+						{/if}
 					</Banner>
 				{/if}
 
-				{#if loading}
-					<div class="grid gap-5" aria-label={runtime.i18n.t("documents:loadingDocument")}>
-						<Skeleton class="h-12 w-2/3" />
-						<Skeleton class="mt-5 h-10.5" />
-						<Skeleton class="h-28" />
-					</div>
-				{:else if !creating && currentDocument === undefined}
-					<!-- A failed read has no editable document; the recovery/error banner remains visible. -->
-				{:else if documentView === "api"}
+				{#if documentView === "api"}
 					<DocumentAPIView
 						resourceSlug={slug}
-						resourceLabel={collection === undefined
-							? runtime.i18n.t("documents:document")
-							: runtime.i18n.text(
-									collection.labels.singular,
-									collection.labels.singularTranslations
-								)}
 						documentID={routeDocumentID}
 						{globalResource}
+						contentLocale={activeLocale}
 						fallbackValue={form.values}
+						prepared={preparedRoute?.kind === "collection-api" ||
+						preparedRoute?.kind === "global-api"
+							? preparedRoute.document.document
+							: undefined}
 					/>
-				{:else if customDocumentView !== undefined && collection !== undefined && currentDocument !== undefined}
+				{:else if controller.loading}
+					<div
+						class="ridu-document-loading"
+						data-ridu-loading-surface="document"
+						aria-label={runtime.i18n.t("documents:loadingDocument")}
+					>
+						<Skeleton class="ridu-document-loading__heading" />
+						<Skeleton class="ridu-document-loading__input" />
+						<Skeleton class="ridu-document-loading__textarea" />
+					</div>
+				{:else if !controller.creating && controller.currentDocument === undefined}
+					<!-- A failed read has no editable document; the recovery/error banner remains visible. -->
+				{:else if customDocumentView !== undefined && controller.collection !== undefined && controller.currentDocument !== undefined}
 					<customDocumentView.component
-						{collection}
-						document={currentDocument}
+						collection={controller.collection}
+						document={controller.currentDocument}
 						host={extensionHost}
 						i18n={runtime.i18n}
 					/>
-				{:else if uploadCollection && !creating && currentDocument !== undefined}
-					{#key currentDocument.id}
-						<UploadDocumentPreview
-							document={currentDocument}
-							editable={canEditImage}
-							updating={imageOperation}
-							onUpdate={updateUploadImage}
-						/>
-					{/key}
-
-					<form class="mt-8" dir={activeLocaleConfig?.rtl ? "rtl" : "ltr"} onsubmit={handleSave}>
-						<fieldset class="contents" disabled={form.submitting || imageOperation}>
-							<DocumentFieldSections fields={documentFields} {form} stacked={livePreviewOpen} />
-							<button class="sr-only" type="submit">{runtime.i18n.t("documents:save")}</button>
-						</fieldset>
-					</form>
 				{:else}
 					<form
-						class="grid gap-y-7"
+						class="ridu-document-form"
 						dir={activeLocaleConfig?.rtl ? "rtl" : "ltr"}
+						novalidate
 						onsubmit={handleSave}
 					>
-						<fieldset class="contents" disabled={form.submitting}>
-							{#if creating && uploadCollection}
-								<div class="grid gap-2">
-									<div class="flex items-baseline justify-between gap-3">
-										<span class="ridu-field-label">
-											{runtime.i18n.t("uploads:file")}
-											<span class="ridu-field-required" aria-hidden="true">*</span>
-										</span>
-									</div>
-									<label
-										class="grid min-h-42 cursor-pointer place-items-center rounded-[4px] border border-dashed border-control-border bg-control px-5 py-7 text-center transition-colors hover:border-primary/55 hover:bg-primary/[0.035]"
-									>
-										<input
-											class="sr-only"
-											type="file"
-											accept={collection?.uploadSettings?.mimeTypes.join(",")}
-											required
-											disabled={form.access?.operations.create !== true}
-											bind:files={controller.selectedFiles}
-										/>
-										<span>
-											<FileUpIcon class="mx-auto size-5 text-foreground-faint" />
-											<span class="mt-3 block text-[13.5px] font-medium text-foreground-muted">
-												{selectedFile?.name ?? runtime.i18n.t("uploads:chooseFileToUpload")}
-											</span>
-											<span class="mt-1 block text-[11.5px] text-foreground-faint">
-												{runtime.i18n.t("uploads:maximumSize", {
-													size: runtime.i18n.formatNumber(
-														(collection?.uploadSettings?.maxFileSize ?? 0) / 1_048_576,
-														{ maximumFractionDigits: 0, style: "unit", unit: "megabyte" }
-													),
-												})}
-											</span>
-										</span>
-									</label>
-								</div>
+						<fieldset class="ridu-document-form__fieldset" disabled={form.submitting}>
+							{#if controller.uploadCollection && controller.collection?.uploadSettings}
+								{#key JSON.stringify([globalResource, slug, routeDocumentID, activeLocale])}
+									<UploadDocumentPreview
+										draft={controller.upload}
+										settings={controller.collection.uploadSettings}
+										editable={controller.canEditUpload}
+									/>
+								{/key}
 							{/if}
 
-							{#if creatingAuthUser}
-								<fieldset
-									class="grid gap-4 rounded-[4px] border border-control-border bg-control p-4.5"
-								>
-									<legend class="px-1 text-[13px] font-semibold text-foreground">
-										{runtime.i18n.t("documents:credentials")}
-									</legend>
-									<p class="text-[11.5px] leading-5 text-foreground-faint">
-										{runtime.i18n.t("documents:credentialsDescription")}
-									</p>
-									<div class="grid gap-4 sm:grid-cols-2">
-										<label class="grid gap-2" for="ridu-new-user-password">
-											<span class="ridu-field-label">
-												{runtime.i18n.t("documents:password")}
-												<span class="ridu-field-required" aria-hidden="true">*</span>
-											</span>
-											<input
-												id="ridu-new-user-password"
-												type="password"
-												autocomplete="new-password"
-												minlength={collection?.authSettings?.passwordMinLength}
-												required
-												aria-invalid={credentialIssue !== undefined}
-												aria-describedby="ridu-new-user-password-help"
-												bind:value={newUserPassword}
-												oninput={() => (credentialIssue = undefined)}
-											/>
-										</label>
-										<label class="grid gap-2" for="ridu-new-user-password-confirmation">
-											<span class="ridu-field-label">
-												{runtime.i18n.t("documents:confirmPassword")}
-												<span class="ridu-field-required" aria-hidden="true">*</span>
-											</span>
-											<input
-												id="ridu-new-user-password-confirmation"
-												type="password"
-												autocomplete="new-password"
-												required
-												aria-invalid={credentialIssue !== undefined}
-												aria-describedby="ridu-new-user-password-help"
-												bind:value={newUserPasswordConfirmation}
-												oninput={() => (credentialIssue = undefined)}
-											/>
-										</label>
-									</div>
-									<p
-										id="ridu-new-user-password-help"
-										class={credentialIssue === undefined ? "ridu-field-help" : "ridu-field-error"}
-										role={credentialIssue === undefined ? undefined : "alert"}
-									>
-										{credentialIssue ??
-											runtime.i18n.t("documents:passwordMinimum", {
-												minimum: runtime.i18n.formatNumber(
-													collection?.authSettings?.passwordMinLength ?? 8
-												),
-											})}
-									</p>
-								</fieldset>
+							{#if controller.creatingAuthUser}
+								<DocumentCredentials
+									bind:credentials
+									bind:issue={credentialIssue}
+									minimumLength={controller.collection?.authSettings?.passwordMinLength}
+								/>
 							{/if}
 
-							<DocumentFieldSections fields={documentFields} {form} stacked={livePreviewOpen} />
-							<button class="sr-only" type="submit">{runtime.i18n.t("documents:save")}</button>
+							<DocumentFieldSections
+								fields={controller.documentFields}
+								{form}
+								stacked={livePreviewOpen}
+							/>
+							<button
+								class="ridu-document-form__submit"
+								type="submit"
+								aria-busy={form.submitting}
+								disabled={!controller.canSave ||
+									(!controller.creating &&
+										controller.versionedCollection &&
+										controller.currentStatus === "published" &&
+										!controller.canPublish)}
+							>
+								{runtime.i18n.t("documents:save")}
+							</button>
 						</fieldset>
 					</form>
 				{/if}
 			</div>
 		</div>
 
-		{#if livePreviewOpen && livePreview !== undefined && currentDocument !== undefined}
+		{#if documentView !== "api" && livePreviewOpen && livePreview !== undefined && controller.currentDocument !== undefined}
 			{#key livePreviewRouteKey}
 				<LivePreviewPanel
 					preview={livePreview}
-					collection={collectionSlug}
-					documentID={documentID ?? collectionSlug}
+					collection={controller.collectionSlug}
+					documentID={controller.documentID ?? controller.collectionSlug}
 					resource={globalResource ? "global" : "collection"}
 					values={form.values}
-					onclose={() => (livePreviewOpen = false)}
 				/>
 			{/key}
 		{/if}
@@ -974,15 +588,12 @@
 		if (!open) cancelNavigation();
 	}}
 >
-	<DialogContent>
+	<DialogContent variant="confirmation">
 		<DialogHeader>
-			<p class="font-mono text-[10px] tracking-[0.13em] text-warning uppercase">
-				{runtime.i18n.t("documents:unsavedChanges")}
-			</p>
-			<DialogTitle class="text-[28px] font-semibold leading-tight tracking-[-0.02em]">
+			<DialogTitle>
 				{runtime.i18n.t("documents:leaveWithoutSavingQuestion")}
 			</DialogTitle>
-			<DialogDescription class="mt-1 text-[13.5px] leading-5 text-foreground-muted">
+			<DialogDescription>
 				{runtime.i18n.t("documents:leaveWithoutSavingDescription")}
 			</DialogDescription>
 		</DialogHeader>
@@ -990,128 +601,11 @@
 			<Button variant="outline" onclick={cancelNavigation}>
 				{runtime.i18n.t("documents:keepEditing")}
 			</Button>
-			<Button variant="destructive" disabled={form.submitting} onclick={discardAndNavigate}>
+			<Button disabled={form.submitting} onclick={discardAndNavigate}>
 				{runtime.i18n.t("documents:leaveWithoutSaving")}
 			</Button>
 		</DialogFooter>
 	</DialogContent>
 </Dialog>
 
-{#if !globalResource && canDelete}
-	{const deleteConfirmation = $derived(
-		collection?.capabilities.trash === true
-			? {
-					title: runtime.i18n.t("documents:moveToTrashQuestion"),
-					description: runtime.i18n.t("documents:moveToTrashDescription", {
-						label: documentHeading,
-					}),
-					action: runtime.i18n.t("documents:moveToTrash"),
-				}
-			: {
-					title: runtime.i18n.t("documents:deleteQuestion"),
-					description: runtime.i18n.t("documents:deleteDescription", {
-						label: documentHeading,
-					}),
-					action: runtime.i18n.t("documents:deleteDocument"),
-				}
-	)}
-
-	<Dialog bind:open={controller.deleteDialogOpen}>
-		<DialogContent>
-			<DialogHeader>
-				<p class="font-mono text-[10px] tracking-[0.13em] text-destructive uppercase">
-					{runtime.i18n.t("documents:destructiveAction")}
-				</p>
-				<DialogTitle class="text-[28px] font-semibold leading-tight tracking-[-0.02em]">
-					{deleteConfirmation.title}
-				</DialogTitle>
-				<DialogDescription class="mt-1 text-[13.5px] leading-5 text-foreground-muted">
-					{deleteConfirmation.description}
-				</DialogDescription>
-			</DialogHeader>
-			<DialogFooter>
-				<Button variant="outline" onclick={() => (controller.deleteDialogOpen = false)}>
-					{runtime.i18n.t("documents:cancel")}
-				</Button>
-				<Button variant="destructive" onclick={remove}>
-					{deleteConfirmation.action}
-				</Button>
-			</DialogFooter>
-		</DialogContent>
-	</Dialog>
-{/if}
-
-<Dialog
-	open={lockKey !== undefined && dismissedLock !== lockKey}
-	onOpenChange={(open) => {
-		if (!open) dismissedLock = lockKey;
-	}}
->
-	<DialogContent>
-		<DialogHeader>
-			<p class="font-mono text-[10px] tracking-[0.13em] text-warning uppercase">
-				{runtime.i18n.t("documents:documentLocked")}
-			</p>
-			<DialogTitle class="text-[28px] font-semibold leading-tight tracking-[-0.02em]">
-				{runtime.i18n.t("documents:currentlyEditing", {
-					owner: lockOwnerLabel ?? runtime.i18n.t("documents:anotherEditor"),
-				})}
-			</DialogTitle>
-			<DialogDescription class="mt-1 text-[13.5px] leading-5 text-foreground-muted">
-				{lockUpdatedAt === undefined
-					? runtime.i18n.t("documents:editingLeaseActive")
-					: runtime.i18n.t("documents:editedSince", { date: documentDate(lockUpdatedAt) })}
-				{canTakeOverLock
-					? runtime.i18n.t("documents:lockOptionsWithTakeover")
-					: runtime.i18n.t("documents:lockOptionsReadOnly")}
-			</DialogDescription>
-		</DialogHeader>
-		<DialogFooter>
-			<Link class={buttonVariants({ variant: "ghost" })} to={collectionPath(collectionSlug)}>
-				{runtime.i18n.t("documents:goBack")}
-			</Link>
-			<Button variant="outline" onclick={() => (dismissedLock = lockKey)}>
-				{runtime.i18n.t("documents:viewReadOnly")}
-			</Button>
-			{#if canTakeOverLock}
-				<Button disabled={lockOperation} onclick={handleTakeover}>
-					{lockOperation
-						? runtime.i18n.t("documents:takingOver")
-						: runtime.i18n.t("documents:takeOver")}
-				</Button>
-			{/if}
-		</DialogFooter>
-	</DialogContent>
-</Dialog>
-
-<Dialog bind:open={controller.restoreDialogOpen}>
-	<DialogContent>
-		<DialogHeader>
-			<p class="font-mono text-[10px] tracking-[0.13em] text-warning uppercase">
-				{runtime.i18n.t("versions:restore")}
-			</p>
-			<DialogTitle class="text-[28px] font-semibold leading-tight tracking-[-0.02em]">
-				{runtime.i18n.t("versions:restoreRevisionQuestion", {
-					revision:
-						pendingRestore === undefined ? "—" : runtime.i18n.formatNumber(pendingRestore.Revision),
-				})}
-			</DialogTitle>
-			<DialogDescription class="mt-1 text-[13.5px] leading-5 text-foreground-muted">
-				{runtime.i18n.t("versions:restoreDescription")}
-			</DialogDescription>
-		</DialogHeader>
-		<DialogFooter>
-			<Button variant="outline" onclick={() => (controller.restoreDialogOpen = false)}>
-				{runtime.i18n.t("versions:cancel")}
-			</Button>
-			<Button
-				disabled={pendingRestore === undefined || versionOperation || !controller.canRestoreVersion}
-				onclick={() => pendingRestore !== undefined && restore(pendingRestore)}
-			>
-				{versionOperation
-					? runtime.i18n.t("versions:restoring")
-					: runtime.i18n.t("versions:restore")}
-			</Button>
-		</DialogFooter>
-	</DialogContent>
-</Dialog>
+<DocumentOperationDialogs {controller} />