@aphexcms/cms-core 9.6.0 → 9.8.0

package/dist/components/admin/DocumentEditor.svelte

@@ -14,6 +14,7 @@
 	import { setSaveStateContext } from '../../save-state-context.svelte';
 	import { usePermissions } from '../../permissions-context.svelte';
 	import AdminSlot from './AdminSlot.svelte';
+	import ScheduleDialog from './ScheduleDialog.svelte';
 	import { createPartResolver } from '../../plugins/resolver';
 	import type { CMSPlugin, DocumentActionProps } from '../../plugins/types';
 	import { getDefaultValueForFieldType } from '../../utils/field-defaults';
@@ -37,11 +38,19 @@
 		Smartphone,
 		ZoomIn,
 		ZoomOut,
-		ArrowLeft
+		ArrowLeft,
+		CalendarClock,
+		X,
+		Lock
 	} from '@lucide/svelte';
 	import { stegaEncodeDocument } from '../../preview/stega.js';
 	import { collectAssetRefs, injectAssetData, type ResolvedAsset } from '../../preview/assets.js';
 	import { setRichtextEditorRegistry } from '../../richtext-context.svelte.js';
+	import { documentWorkspaceRegistry } from '../../document-workspace-registry.svelte';
+	import type {
+		DocumentWorkspace,
+		DocumentWorkspaceOperation
+	} from '../../types/document-workspace';
 
 	interface Props {
 		schemas: SchemaType[];
@@ -68,6 +77,12 @@
 			createdAt?: string;
 		} | null;
 		isReadOnly?: boolean;
+		/** Suppresses the bottom action bar (Publish / Schedule / Unpublish / Delete).
+		 *  Set by the host when another editor is stacked on top of this one and owns
+		 *  the actions instead — two action bars in the same corner give no clue which
+		 *  document each one publishes. This hides the bar only; the document keeps
+		 *  auto-saving and its status stays visible in the header. */
+		hideActionBar?: boolean;
 		/** When true, the host has hidden side panels — show a Minimize toggle. */
 		focusMode?: boolean;
 		/** Toggle host-driven focus mode. Omit to hide the focus button entirely. */
@@ -105,6 +120,7 @@
 		onOpenVersionHistory,
 		externalVersionPreview = null,
 		isReadOnly = false,
+		hideActionBar = false,
 		focusMode = false,
 		onToggleFocus,
 		presentationMode = false,
@@ -160,6 +176,14 @@
 	let publishedData = $state<Record<string, any> | null>(null);
 	const isViewingPublished = $derived(perspective === 'published');
 
+	// The scheduled action follows the active perspective — the tab IS the intent:
+	// Draft tab → publish (send this draft live later); Published tab → unpublish (take it
+	// down later). No toggle in the dialog. The control is gated on the matching permission.
+	const scheduleAction = $derived<'publish' | 'unpublish'>(
+		perspective === 'published' ? 'unpublish' : 'publish'
+	);
+	const canScheduleNow = $derived(scheduleAction === 'publish' ? canPublishDoc : canUnpublishDoc);
+
 	// Plugin document actions applicable to this type. Capability-gated, with
 	// built-in privileged roles bypassing. Cheap to rebuild from the plugin list.
 	const pluginDocumentActions = $derived(
@@ -198,6 +222,80 @@
 			: null
 	);
 
+	// A live handle onto this document's editable state — the seam an external caller (today:
+	// the agent's content_patch_fields/content_save_draft bridge tools) plugs into instead of
+	// reaching into this component's internals directly. See types/document-workspace.ts for
+	// why this is shaped generically rather than as an AI-specific bridge.
+	const documentWorkspace: DocumentWorkspace = {
+		getSnapshot() {
+			return {
+				documentId: documentId ?? fullDocument?.id ?? null,
+				collection: documentType,
+				data: $state.snapshot(documentData),
+				status: !documentId
+					? 'new'
+					: fullDocument?._meta?.status === 'published'
+						? 'published'
+						: fullDocument?._meta?.status === 'unpublished'
+							? 'unpublished'
+							: 'draft',
+				revision: (fullDocument?._meta?.revision as number | undefined) ?? null
+			};
+		},
+		getSelection() {
+			return { fieldName: focusedFieldName };
+		},
+		apply(operation: DocumentWorkspaceOperation) {
+			if (operation.type === 'patchFields') {
+				documentData = { ...documentData, ...operation.fields };
+				hasUnsavedChanges = true;
+			}
+		},
+		async validate() {
+			const invalid = await validateAllFields();
+			return {
+				isValid: invalid.length === 0,
+				errors: invalid.map((f) => ({ field: f.name, errors: f.messages }))
+			};
+		},
+		async flushSave(_expectedRevision) {
+			return await saveDocument(false);
+		},
+		async publish(_expectedRevision) {
+			await publishDocument();
+			if (saveError) {
+				return { success: false, conflict: saveError.startsWith('Conflict'), error: saveError };
+			}
+			return {
+				success: true,
+				revision: (fullDocument?._meta?.revision as number | undefined) ?? undefined
+			};
+		},
+		beginBatch(_source) {
+			batchActive = true;
+		},
+		endBatch() {
+			batchActive = false;
+		}
+	};
+
+	// Registers/clears this document's workspace handle in the shared registry
+	// (document-workspace-registry.svelte.ts) whenever the active document id changes —
+	// covers create→save (id appears), navigating between two open documents, and unmount.
+	$effect(() => {
+		const activeId = documentId ?? fullDocument?.id ?? null;
+		if (activeId) {
+			documentWorkspaceRegistry.register({
+				documentId: activeId,
+				collection: documentType,
+				workspace: documentWorkspace
+			});
+		}
+		return () => {
+			if (activeId) documentWorkspaceRegistry.clear(activeId);
+		};
+	});
+
 	// Field-level access: mirrors the server's strip/drop logic so the form
 	// only shows fields the user can see and disables fields they can't write.
 	function fieldRoleAllowed(list: string[] | undefined): boolean {
@@ -299,7 +397,9 @@
 				type: 'aphex:data',
 				documentType,
 				documentId: documentId ?? undefined,
-				document: iframeStega ? stegaEncodeDocument(snapshot, schema?.fields ?? []) : snapshot
+				document: iframeStega
+					? stegaEncodeDocument(snapshot, schema?.fields ?? [], schemas)
+					: snapshot
 			},
 			'*'
 		);
@@ -620,6 +720,39 @@
 			return;
 		}
 
+		// 2a. Object array item — objectPath like "[0].heading" (or "[0]" alone). The
+		// item's fields live behind ObjectModal, so open that item's modal, then focus
+		// the subfield by the remaining dotted path (the modal renders subfields with
+		// bare data-field-path, e.g. "heading" or "seo.title").
+		if (objectPath) {
+			const itemMatch = objectPath.match(/^\[(\d+)\](?:\.(.*))?$/);
+			if (itemMatch) {
+				const itemIndex = Number(itemMatch[1]);
+				const subPath = itemMatch[2] ?? '';
+				const card = container.querySelector<HTMLElement>(`[data-array-item-index="${itemIndex}"]`);
+				if (card) {
+					card.click(); // opens the item's ObjectModal
+					if (subPath) {
+						// The modal mounts/animates in; poll a few frames for the subfield.
+						for (let attempt = 0; attempt < 20; attempt++) {
+							await tick();
+							const target = document.querySelector<HTMLElement>(`[data-field-path="${subPath}"]`);
+							if (target) {
+								target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+								const focusable = target.querySelector<HTMLElement>(
+									'input:not([disabled]):not([readonly]), textarea:not([disabled]):not([readonly])'
+								);
+								focusable?.focus();
+								break;
+							}
+							await new Promise((r) => requestAnimationFrame(r));
+						}
+					}
+					return;
+				}
+			}
+		}
+
 		// 2. Nested object subfield — find the subfield container by its dotted path
 		if (objectPath) {
 			const subContainer = container.querySelector<HTMLElement>(
@@ -635,7 +768,30 @@
 			}
 		}
 
-		// 3. Primitive array — focus the Nth input inside the array field
+		// 3a. Object / reference array — reveal the Nth *row* rather than opening it.
+		// These rows are the drag-to-reorder handles, so surfacing the row in place is
+		// what lets an author act on it (reorder, remove, or click in themselves);
+		// auto-opening the row's editor would take that away and, for a reference row,
+		// navigate off the document entirely.
+		if (arrayIndex != null) {
+			const row = container.querySelector<HTMLElement>(`[data-array-index="${arrayIndex}"]`);
+			if (row) {
+				row.scrollIntoView({ behavior: 'smooth', block: 'center' });
+				// Animated directly rather than via `focusedFieldName` state: that ring is
+				// field-wide, and plumbing a per-row index down through SchemaField →
+				// ArrayField would add a prop to every array just for a 1.2s flash.
+				row.animate(
+					[
+						{ outline: '2px solid var(--primary)', outlineOffset: '3px', borderRadius: '6px' },
+						{ outline: '2px solid transparent', outlineOffset: '8px', borderRadius: '6px' }
+					],
+					{ duration: 1200, easing: 'ease-out', fill: 'none' }
+				);
+				return;
+			}
+		}
+
+		// 3b. Primitive array — focus the Nth input inside the array field
 		if (arrayIndex != null) {
 			const inputs = container.querySelectorAll<HTMLElement>(
 				'input:not([disabled]):not([readonly]), textarea:not([disabled]):not([readonly])'
@@ -706,6 +862,53 @@
 
 	// Header options dropdown
 	let showHeaderMenu = $state(false);
+	let showScheduleDialog = $state(false);
+
+	// Pending scheduled publish/unpublish for this document (replace semantics → at most one).
+	type ScheduledJob = { jobId: string; type: string; runAt: string; status: string };
+	let scheduledJobs = $state<ScheduledJob[]>([]);
+	// The soonest pending schedule — what the header indicator shows.
+	const nextSchedule = $derived(
+		[...scheduledJobs].sort(
+			(a, b) => new Date(a.runAt).getTime() - new Date(b.runAt).getTime()
+		)[0] ?? null
+	);
+
+	async function loadSchedule() {
+		if (!documentId) {
+			scheduledJobs = [];
+			return;
+		}
+		try {
+			const res = await documents.getSchedule(documentId);
+			scheduledJobs = res.success ? (res.data ?? []) : [];
+		} catch {
+			scheduledJobs = [];
+		}
+	}
+
+	// Optimistic: the schedule call returns the created job, so show the badge immediately.
+	// Replace semantics on the server mean this new job supersedes any prior one. Reconcile
+	// with a background fetch so we converge on server truth (id, exact runAt).
+	function onScheduleCreated(job: ScheduledJob) {
+		scheduledJobs = [job];
+		loadSchedule();
+	}
+
+	async function cancelSchedule() {
+		if (!documentId) return;
+		// Optimistically clear the badge; restore from the server if the cancel fails.
+		const previous = scheduledJobs;
+		scheduledJobs = [];
+		const res = await documents.cancelSchedule(documentId);
+		if (res.success) {
+			toast.success('Schedule cancelled');
+			loadSchedule();
+		} else {
+			scheduledJobs = previous;
+			toast.error(res.error || 'Failed to cancel schedule');
+		}
+	}
 
 	// Version history
 	let showVersionHistory = $state(false);
@@ -775,9 +978,40 @@
 
 	const savedAgoText = $derived(lastSaved ? `Saved ${timeAgo(lastSaved)}` : null);
 
+	// Relative future time for the scheduled-publish indicator ("in 3h"). Reads `now` so it ticks.
+	function timeUntil(date: Date): string {
+		const seconds = Math.floor((date.getTime() - now) / 1000);
+		if (seconds <= 0) return 'now';
+		if (seconds < 60) return `in ${seconds}s`;
+		const minutes = Math.floor(seconds / 60);
+		if (minutes < 60) return `in ${minutes}m`;
+		const hours = Math.floor(minutes / 60);
+		if (hours < 24) return `in ${hours}h`;
+		const days = Math.floor(hours / 24);
+		return `in ${days}d`;
+	}
+
+	// Human phrasing for the schedule banner: "today/tomorrow at 8:00 AM", "on Monday at …",
+	// or "on Nov 10 at …" further out. Reads `now` so it stays current.
+	function humanizeSchedule(date: Date): string {
+		const time = date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+		const startOfDay = (x: Date) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
+		const days = Math.round((startOfDay(date) - startOfDay(new Date(now))) / 86_400_000);
+		let day: string;
+		if (days <= 0) day = 'today';
+		else if (days === 1) day = 'tomorrow';
+		else if (days < 7) day = `on ${date.toLocaleDateString(undefined, { weekday: 'long' })}`;
+		else day = `on ${date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}`;
+		return `${day} at ${time}`;
+	}
+
 	// Auto-save functionality (every 2 seconds when there are changes)
 	let hasUnsavedChanges = $state(false);
 	let autoSaveTimer: ReturnType<typeof setTimeout> | null = null;
+	// Set while a `DocumentWorkspace` batch (currently: one agent turn) is applying a burst of
+	// `apply()` patches — suppresses autosave so N patches don't produce N separate CAS writes;
+	// the batch's caller is responsible for one explicit `flushSave` before/at `endBatch()`.
+	let batchActive = $state(false);
 	let hasValidationErrors = $state(false);
 	// Snapshot of the default-initialized data for a brand-new (unsaved) document.
 	// Used to detect real user edits without relying on "is the value truthy" heuristics,
@@ -817,6 +1051,14 @@
 		(hasUnpublishedContent || isUnpublished) && !saving && documentId && !hasValidationErrors
 	);
 
+	// The schedule button mirrors the inline action button's enabled state (permission is checked
+	// separately, for visibility): scheduling a PUBLISH is enabled exactly when the Publish button
+	// is (`canPublish` — there are unpublished, valid changes), so you can't queue a no-op publish;
+	// scheduling an UNPUBLISH mirrors the Unpublish button (enabled whenever not mid-save).
+	const canScheduleActionNow = $derived(
+		scheduleAction === 'publish' ? Boolean(canPublish) : !saving
+	);
+
 	// Get preview title based on schema config. When viewing in published
 	// perspective, read from the loaded published snapshot — otherwise the
 	// header shows the draft's title even though the body shows published
@@ -884,6 +1126,14 @@
 		}
 	});
 
+	// Keep the schedule indicator in sync with the current document.
+	$effect(() => {
+		// Reference documentId so this re-runs when the editor switches documents.
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- reactive dependency
+		documentId;
+		loadSchedule();
+	});
+
 	// Load existing document data when editing
 	$effect(() => {
 		if (!isCreating && documentId) {
@@ -1084,7 +1334,7 @@
 		// Debounced auto-save. Comparing against the initial-defaults snapshot (for new
 		// docs) or the saved draft (for existing docs) means any real user edit triggers
 		// save — including unchecking a boolean or clearing a field.
-		if (hasChanges && schema && canWriteCurrentDoc) {
+		if (hasChanges && schema && canWriteCurrentDoc && !batchActive) {
 			autoSaveTimer = setTimeout(() => {
 				cmsLogger.debug(
 					'[Document Editor]',
@@ -1106,12 +1356,15 @@
 		};
 	});
 
-	async function saveDocument(isAutoSave = false) {
-		if (saving) return;
-
-		saving = true;
-		saveError = null;
-
+	/** The actual persist — no toasts, no side-effect UI updates, just the write + CAS-conflict
+	 * detection, returning a result `DocumentWorkspace.flushSave` can also consume directly.
+	 * `saveDocument` (below) is the UI-facing wrapper that adds toasts/state-sync around this. */
+	async function performSave(): Promise<{
+		success: boolean;
+		revision?: number;
+		conflict?: boolean;
+		error?: string;
+	}> {
 		try {
 			let response;
 
@@ -1142,12 +1395,15 @@
 					// Always call onSaved to switch to edit mode after creation
 					onSaved?.(response.data.id);
 				} else {
-					toast.error(response?.error || 'Failed to create document');
+					return { success: false, error: response?.error || 'Failed to create document' };
 				}
 			} else if (documentId) {
-				// Update existing document
+				// Update existing document. Send the revision we last read so a stale
+				// write (another tab, an AI agent) surfaces as a 409 conflict below
+				// instead of silently overwriting whatever changed in between.
 				response = await documents.updateById(documentId, {
-					data: documentData
+					data: documentData,
+					expectedRevision: fullDocument?._meta?.revision as number | undefined
 				});
 
 				// Update fullDocument with the response to keep saved data in sync
@@ -1167,47 +1423,84 @@
 			}
 
 			if (response?.success) {
-				lastSaved = new Date();
-				hasUnsavedChanges = false;
-				if (response.data?.id) notifyDocumentChanged(response.data.id);
-				if (presentationMode && iframeRef?.contentWindow) {
-					iframeRef.contentWindow.postMessage({ type: 'aphex:refresh' }, '*');
-				}
-				if (isAutoSave) {
-					// Trigger validation on all fields after auto-save
-					validateAllFields(); // Update validation status
-					schemaFields.forEach((fieldComponent, index) => {
-						const field = schema?.fields[index];
-						if (fieldComponent && field) {
-							fieldComponent.performValidation(documentData[field.name], {});
-						}
-					}); // Notify parent of autosave with current title
-					if (onAutoSaved && documentId) {
-						onAutoSaved(documentId, getPreviewTitle());
-					}
-				}
-				if (showVersionHistory) {
-					loadVersions();
-				}
-			} else {
-				throw new Error(response?.error || 'Failed to save document');
+				return { success: true, revision: fullDocument?._meta?.revision as number | undefined };
 			}
+			return { success: false, error: response?.error || 'Failed to save document' };
 		} catch (err) {
-			toast.error(err instanceof ApiError ? err.message : 'Failed to save document');
-
-			// Extract validation errors if present
+			// A 409 means someone else (another tab, an AI agent) saved this document
+			// since we last read it — surface that distinctly rather than a generic
+			// error, and never retry with a blind overwrite. The caller must reload to
+			// see the other writer's change before saving again.
+			if (err instanceof ApiError && err.status === 409) {
+				return {
+					success: false,
+					conflict: true,
+					error:
+						'Conflict: this document was updated by someone else. Reload the page to continue editing.'
+				};
+			}
 			if (err instanceof ApiError && err.response?.validationErrors) {
 				const validationErrors = err.response.validationErrors;
 				const errorMessages = validationErrors
 					.map((ve: any) => `${ve.field}: ${ve.errors.join(', ')}`)
 					.join('; ');
-				saveError = `Validation failed: ${errorMessages}`;
+				return { success: false, error: `Validation failed: ${errorMessages}` };
+			}
+			return {
+				success: false,
+				error: err instanceof ApiError ? err.message : 'Failed to save document'
+			};
+		}
+	}
+
+	async function saveDocument(isAutoSave = false) {
+		if (saving)
+			return { success: false, error: 'Already saving' } as {
+				success: boolean;
+				revision?: number;
+				conflict?: boolean;
+				error?: string;
+			};
+
+		saving = true;
+		saveError = null;
+
+		const result = await performSave();
+
+		if (result.success) {
+			lastSaved = new Date();
+			hasUnsavedChanges = false;
+			if (fullDocument?.id) notifyDocumentChanged(fullDocument.id);
+			if (presentationMode && iframeRef?.contentWindow) {
+				iframeRef.contentWindow.postMessage({ type: 'aphex:refresh' }, '*');
+			}
+			if (isAutoSave) {
+				// Trigger validation on all fields after auto-save
+				validateAllFields(); // Update validation status
+				schemaFields.forEach((fieldComponent, index) => {
+					const field = schema?.fields[index];
+					if (fieldComponent && field) {
+						fieldComponent.performValidation(documentData[field.name], {});
+					}
+				}); // Notify parent of autosave with current title
+				if (onAutoSaved && documentId) {
+					onAutoSaved(documentId, getPreviewTitle());
+				}
+			}
+			if (showVersionHistory) {
+				loadVersions();
+			}
+		} else {
+			if (result.conflict) {
+				toast.error('This document was changed elsewhere. Reload to see the latest version.');
 			} else {
-				saveError = err instanceof ApiError ? err.message : 'Failed to save document';
+				toast.error(result.error ?? 'Failed to save document');
 			}
-		} finally {
-			saving = false;
+			saveError = result.error ?? 'Failed to save document';
 		}
+
+		saving = false;
+		return result;
 	}
 
 	async function publishDocument() {
@@ -1287,7 +1580,9 @@
 		saveError = null;
 
 		try {
-			const response = await documents.publish(documentId);
+			const response = await documents.publish(documentId, {
+				expectedRevision: fullDocument?._meta?.revision as number | undefined
+			});
 
 			if (response.success && response.data) {
 				// Update local state with new published hash. Sync documentData from
@@ -1315,17 +1610,23 @@
 				throw new Error(response.error || 'Failed to publish document');
 			}
 		} catch (err) {
-			toast.error(err instanceof ApiError ? err.message : 'Failed to publish document');
-
-			// Extract validation errors if present
-			if (err instanceof ApiError && err.response?.validationErrors) {
-				const validationErrors = err.response.validationErrors;
-				const errorMessages = validationErrors
-					.map((ve: any) => `${ve.field}: ${ve.errors.join(', ')}`)
-					.join('; ');
-				saveError = `Cannot publish - Validation failed: ${errorMessages}`;
+			if (err instanceof ApiError && err.status === 409) {
+				toast.error('This document was changed elsewhere. Reload to see the latest version.');
+				saveError =
+					'Conflict: this document was updated by someone else. Reload the page to continue editing.';
 			} else {
-				saveError = err instanceof ApiError ? err.message : 'Failed to publish document';
+				toast.error(err instanceof ApiError ? err.message : 'Failed to publish document');
+
+				// Extract validation errors if present
+				if (err instanceof ApiError && err.response?.validationErrors) {
+					const validationErrors = err.response.validationErrors;
+					const errorMessages = validationErrors
+						.map((ve: any) => `${ve.field}: ${ve.errors.join(', ')}`)
+						.join('; ');
+					saveError = `Cannot publish - Validation failed: ${errorMessages}`;
+				} else {
+					saveError = err instanceof ApiError ? err.message : 'Failed to publish document';
+				}
 			}
 		} finally {
 			saving = false;
@@ -1388,7 +1689,9 @@
 		saveError = null;
 
 		try {
-			const response = await documents.unpublish(documentId);
+			const response = await documents.unpublish(documentId, {
+				expectedRevision: fullDocument?._meta?.revision as number | undefined
+			});
 			if (response.success) {
 				fullDocument = {
 					...fullDocument,
@@ -1403,7 +1706,11 @@
 				throw new Error(response.error || 'Failed to unpublish');
 			}
 		} catch (err) {
-			toast.error(err instanceof ApiError ? err.message : 'Failed to unpublish document');
+			if (err instanceof ApiError && err.status === 409) {
+				toast.error('This document was changed elsewhere. Reload to see the latest version.');
+			} else {
+				toast.error(err instanceof ApiError ? err.message : 'Failed to unpublish document');
+			}
 		} finally {
 			saving = false;
 		}
@@ -1775,6 +2082,41 @@
 {/if}
 
 <div class="relative flex h-full w-full min-w-0 flex-col overflow-hidden">
+	<!-- Scheduled publish/unpublish banner — a full-width strip pinned to the very top edge of
+	     the editor, above the hero header (breadcrumb + actions), so a pending schedule is the
+	     first thing seen. Inner padding matches the hero's (px-4 lg:px-6) so its text lines up
+	     with the title below. -->
+	{#if !presentationMode && nextSchedule}
+		{@const isPub = nextSchedule.type === 'document.publish'}
+		{@const runAtDate = new Date(nextSchedule.runAt)}
+		<div
+			class="border-primary/15 bg-primary/5 text-primary flex w-full flex-wrap items-center gap-x-2 gap-y-1 border-b px-4 py-2.5 lg:px-6"
+		>
+			<Lock class="h-4 w-4 shrink-0" />
+			<span class="min-w-0 text-[0.9375rem] leading-tight font-medium">
+				Scheduled to be {isPub ? 'published' : 'unpublished'}
+				{humanizeSchedule(runAtDate)}
+				<span class="text-primary/50 font-normal">· {timeUntil(runAtDate)}</span>
+			</span>
+			<div class="ml-auto flex items-center gap-1">
+				<button
+					type="button"
+					class="hover:bg-primary/10 rounded px-2 py-1 text-xs font-medium transition-colors"
+					onclick={() => (showScheduleDialog = true)}
+				>
+					Reschedule
+				</button>
+				<button
+					type="button"
+					class="hover:bg-primary/10 flex items-center gap-1 rounded px-2 py-1 text-xs font-medium transition-colors"
+					onclick={cancelSchedule}
+				>
+					<X class="h-3 w-3" /> Cancel
+				</button>
+			</div>
+		</div>
+	{/if}
+
 	<!-- Hero Header -->
 	{#if !presentationMode}
 		<div class="bg-background w-full min-w-0 overflow-x-clip px-4 pt-4 pb-5 lg:px-6 lg:pt-5">
@@ -1795,7 +2137,7 @@
 				<!-- Always one line (`truncate`); font shrinks where space is tight (narrow
 				     editor / reference panel) so more of the title fits before the ellipsis,
 				     and stays large on wide screens. -->
-				<h1 class="block w-full min-w-0 truncate text-xl font-semibold tracking-tight lg:text-2xl">
+				<h1 class="block w-full min-w-0 truncate text-2xl font-semibold tracking-tight lg:text-4xl">
 					{getPreviewTitle()}
 				</h1>
 
@@ -2205,7 +2547,7 @@
 	</div>
 
 	<!-- Sanity-style bottom bar -->
-	{#if documentId}
+	{#if documentId && !hideActionBar}
 		<div class="border-rule bg-background relative z-50 border-t p-4">
 			{#if isPreviewingVersion && activePreview}
 				<!-- Version preview footer -->
@@ -2221,7 +2563,9 @@
 						onclick={async () => {
 							if (!documentId || !activePreview) return;
 							try {
-								await documents.restoreVersion(documentId, activePreview.versionNumber);
+								await documents.restoreVersion(documentId, activePreview.versionNumber, {
+									expectedRevision: fullDocument?._meta?.revision as number | undefined
+								});
 								const docRes = await documents.getById(documentId);
 								if (docRes.success && docRes.data) {
 									const doc = docRes.data as Record<string, any>;
@@ -2245,8 +2589,14 @@
 								if (onRestored && documentId) {
 									onRestored(documentId);
 								}
-							} catch {
-								toast.error('Failed to restore revision');
+							} catch (err) {
+								if (err instanceof ApiError && err.status === 409) {
+									toast.error(
+										'This document was changed elsewhere. Reload to see the latest version.'
+									);
+								} else {
+									toast.error('Failed to restore revision');
+								}
 							}
 						}}
 					>
@@ -2272,15 +2622,37 @@
 								: 'Unknown'}
 						{/if}
 					</p>
-					{#if fullDocument?._meta?.status === 'unpublished'}
-						{#if canPublishDoc}
-							<Button size="sm" onclick={publishDocument} disabled={saving}>Publish</Button>
+					<div class="flex items-center gap-2">
+						{#if documentId && canScheduleNow}
+							<Button
+								variant="ghost"
+								size="icon"
+								disabled={!canScheduleActionNow}
+								onclick={() => (showScheduleDialog = true)}
+								class="h-8 w-8 {canScheduleActionNow ? 'cursor-pointer' : ''} {nextSchedule
+									? 'text-primary'
+									: ''}"
+								title={!canScheduleActionNow
+									? 'Nothing to publish — make a change first'
+									: nextSchedule
+										? 'Reschedule'
+										: scheduleAction === 'publish'
+											? 'Schedule publish'
+											: 'Schedule unpublish'}
+							>
+								<CalendarClock class="h-4 w-4" />
+							</Button>
 						{/if}
-					{:else if canUnpublishDoc}
-						<Button size="sm" variant="secondary" onclick={unpublishDocument} disabled={saving}>
-							Unpublish
-						</Button>
-					{/if}
+						{#if fullDocument?._meta?.status === 'unpublished'}
+							{#if canPublishDoc}
+								<Button size="sm" onclick={publishDocument} disabled={saving}>Publish</Button>
+							{/if}
+						{:else if canUnpublishDoc}
+							<Button size="sm" variant="secondary" onclick={unpublishDocument} disabled={saving}>
+								Unpublish
+							</Button>
+						{/if}
+					</div>
 				</div>
 			{:else}
 				<div class="flex items-center justify-between">
@@ -2293,6 +2665,24 @@
 
 					<!-- Right: Publish button + horizontal three dots menu -->
 					<div class="flex items-center gap-2">
+						{#if documentId && canScheduleNow}
+							<Button
+								variant="ghost"
+								size="icon"
+								disabled={!canScheduleActionNow}
+								onclick={() => (showScheduleDialog = true)}
+								class="h-8 w-8 {canScheduleActionNow ? 'cursor-pointer' : ''} {nextSchedule
+									? 'text-primary'
+									: ''}"
+								title={!canScheduleActionNow
+									? 'Nothing to publish — make a change first'
+									: nextSchedule
+										? 'Reschedule'
+										: 'Schedule publish'}
+							>
+								<CalendarClock class="h-4 w-4" />
+							</Button>
+						{/if}
 						{#if canPublishDoc && !isViewingPublished}
 							<Button
 								onclick={publishDocument}
@@ -2428,6 +2818,15 @@
 	{/if}
 
 	<!-- Inspect Modal -->
+	{#if documentId}
+		<ScheduleDialog
+			bind:open={showScheduleDialog}
+			{documentId}
+			action={scheduleAction}
+			onScheduled={onScheduleCreated}
+		/>
+	{/if}
+
 	{#if showInspect}
 		<div class="absolute inset-0 z-50 flex items-center justify-center bg-black/50">
 			<div