@dyrected/admin 2.6.0 → 2.6.1

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { HashRouter, Link, MemoryRouter, Route, Routes, useLocation, useNavigate
 import { QueryClient, QueryClientProvider, keepPreviousData, useInfiniteQuery, useMutation, useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
 import { DyrectedError, PREVIEW_TOKEN_PARAM, createClient } from "@dyrected/sdk";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AlertCircle, AlertTriangle, AlignCenter, AlignLeft, AlignRight, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpRight, Bold, Braces, Calendar, Check, CheckCircle, CheckCircle2, ChevronDown, ChevronLeft, ChevronLeftIcon, ChevronRight, ChevronRightIcon, ChevronUp, ChevronsUpDown, Circle, Clock, Clock3, Code, Copy, Database, Download, ExternalLink, Eye, EyeOff, FileDown, FileIcon, FileText, FileUp, Filter, Globe, GripVertical, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, History, Home, Image as Image$1, Info, Italic, KeyRound, Layers, LayoutDashboard, LayoutGrid, Library, Link as Link$1, List, ListOrdered, Loader2, Lock, LogOut, Mail, Menu, Monitor, Moon, MoreHorizontal, MousePointer2, PanelLeftClose, PanelLeftOpen, Pencil, Play, Plus, Quote, RotateCcw, Save, Scissors, Search, Settings, Settings2, Share2, Shield, Smartphone, Sparkles, Star, Strikethrough, Sun, Table, Trash2, Underline, Undo2, Upload, UploadCloud, Users, Video, Volume2, Workflow, X, XCircle, icons } from "lucide-react";
+import { AlertCircle, AlertTriangle, AlignCenter, AlignLeft, AlignRight, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpRight, Bold, Braces, Calendar, Check, CheckCircle, CheckCircle2, ChevronDown, ChevronLeft, ChevronLeftIcon, ChevronRight, ChevronRightIcon, ChevronUp, ChevronsUpDown, Circle, Clock, Clock3, Code, Copy, Database, Download, ExternalLink, Eye, EyeOff, FileDown, FileIcon, FileText, FileUp, Filter, Globe, GripVertical, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, History, Home, Image as Image$1, Info, Italic, KeyRound, Layers, LayoutDashboard, LayoutGrid, Library, Link as Link$1, List, ListOrdered, Loader2, Lock, LogOut, Mail, Menu, MessageSquarePlus, Monitor, Moon, MoreHorizontal, MousePointer2, PanelLeftClose, PanelLeftOpen, Pencil, Play, Plus, Quote, RotateCcw, Save, Scissors, Search, Settings, Settings2, Share2, Shield, Smartphone, Sparkles, Star, Strikethrough, Sun, Table, Trash2, Underline, Undo2, Upload, UploadCloud, Users, Video, Volume2, Workflow, X, XCircle, icons } from "lucide-react";
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -1045,7 +1045,7 @@ function isNewerVersion(latest, current) {
 	return false;
 }
 function useUpdateCheck() {
-	const currentVersion = "2.5.65";
+	const currentVersion = "2.6.0";
 	const [updateInfo, setUpdateInfo] = useState(() => {
 		if (typeof window === "undefined") return null;
 		const cacheKey = "dyrected_latest_release";
@@ -1271,7 +1271,7 @@ function getStatusLabel(doc) {
 }
 function Dashboard() {
 	const { client, components, user } = useDyrected();
-	const currentVersion = "2.5.65";
+	const currentVersion = "2.6.0";
 	const [latestVersion, setLatestVersion] = useState(() => {
 		if (typeof window === "undefined") return null;
 		return localStorage.getItem("dyrected_latest_release");
@@ -9147,7 +9147,7 @@ function ArrayFieldRenderer({ schema, basePath, control, renderField }) {
 	const { schemas } = useDyrected();
 	const { drillInEnabled, drillInto, reconcileAfterMutation, activePath, registerFieldArray, unregisterFieldArray } = useNestedEditor();
 	const [isBulkOpen, setIsBulkOpen] = React$1.useState(false);
-	const [expandedIds, setExpandedIds] = React$1.useState({});
+	const [expandedIds, setExpandedIds] = React$1.useState(() => Object.fromEntries(fields.map((field) => [field.id, true])));
 	const watchedItems = useWatch({
 		control,
 		name: basePath
@@ -9234,7 +9234,7 @@ function ArrayFieldRenderer({ schema, basePath, control, renderField }) {
 			});
 			nextIds.forEach((id) => {
 				if (next[id] === void 0) {
-					next[id] = false;
+					next[id] = true;
 					changed = true;
 				}
 			});
@@ -9729,10 +9729,29 @@ function FormFieldRendererInner({ schema, basePath, control, collection, canUpda
 	});
 }
 //#endregion
+//#region src/lib/workflow-autosave.ts
+var DEFAULT_WORKFLOW_AUTOSAVE_DELAY_MS = 1500;
+function isWorkflowEnabledCollection(collection) {
+	return Boolean(collection?.workflow || collection?.drafts);
+}
+function resolveWorkflowAutosaveSettings(collection) {
+	if (!isWorkflowEnabledCollection(collection)) return {
+		enabled: false,
+		delayMs: DEFAULT_WORKFLOW_AUTOSAVE_DELAY_MS
+	};
+	return {
+		enabled: collection?.admin?.autosave !== false,
+		delayMs: collection?.admin?.autosaveDelayMs ?? 1500
+	};
+}
+function classifyWorkflowAutosaveError(error) {
+	return (typeof error === "object" && error !== null && "statusCode" in error ? error.statusCode : void 0) === 409 ? "conflict" : "error";
+}
+//#endregion
 //#region src/components/forms/form-engine.tsx
 /** Query-string key holding the active form tab (replace-navigated). */
 var TAB_PARAM = "tab";
-function FormEngineInner({ collection, fields, defaultValues = {}, onSubmit, onChange, isLoading, submitLabel = "Save", hideSubmit = false, readOnly, onDataChange, passwordChangeMode = null, documentId, defaultTabLabel }) {
+function FormEngineInner({ collection, fields, defaultValues = {}, onSubmit, onChange, isLoading, submitLabel = "Save", hideSubmit = false, readOnly, onDataChange, passwordChangeMode = null, documentId, defaultTabLabel, autosave }, ref) {
 	const { activePath, navigateToPath, getStableId } = useNestedEditor();
 	const [searchParams, setSearchParams] = useSearchParams();
 	const isDrilledIn = activePath.length > 0;
@@ -9780,6 +9799,12 @@ function FormEngineInner({ collection, fields, defaultValues = {}, onSubmit, onC
 	});
 	const { isDirty } = form.formState;
 	const flatErrors = getFlatErrors(form.formState.errors);
+	const autosaveEnabled = Boolean(autosave?.enabled && autosave.onSave && !readOnly);
+	const autosaveStateRef = React.useRef("idle");
+	const emitAutosaveState = useCallback((state) => {
+		autosaveStateRef.current = state;
+		autosave?.onStatusChange?.(state);
+	}, [autosave]);
 	useEffect(() => {
 		if (flatErrors.length > 0 && form.formState.submitCount > 0) console.warn("[Validation] Submission failed with errors:", form.formState.errors);
 	}, [
@@ -9790,16 +9815,71 @@ function FormEngineInner({ collection, fields, defaultValues = {}, onSubmit, onC
 	useEffect(() => {
 		onChange?.(isDirty);
 	}, [isDirty, onChange]);
+	useEffect(() => {
+		if (!autosaveEnabled) {
+			emitAutosaveState("idle");
+			return;
+		}
+		if (!isDirty) {
+			if (autosaveStateRef.current !== "saving") emitAutosaveState("saved");
+			return;
+		}
+		if (autosaveStateRef.current !== "saving") emitAutosaveState("dirty");
+	}, [
+		autosaveEnabled,
+		emitAutosaveState,
+		isDirty
+	]);
 	const watchedValues = useWatch({ control: form.control });
-	const handleFormSubmit = useCallback(async (data) => {
+	const persistFormData = useCallback(async (data, persist, options) => {
 		const draftKey = `dyrected_draft:${collection}:${defaultValues?.id || "global"}`;
-		localStorage.removeItem(draftKey);
-		await onSubmit(data);
+		if (options?.reportAutosaveStatus) emitAutosaveState("saving");
+		try {
+			localStorage.removeItem(draftKey);
+			const result = await persist(data);
+			form.reset(data);
+			if (options?.reportAutosaveStatus) emitAutosaveState("saved");
+			return result;
+		} catch (error) {
+			if (options?.reportAutosaveStatus) emitAutosaveState(classifyWorkflowAutosaveError(error));
+			throw error;
+		}
 	}, [
 		collection,
 		defaultValues,
-		onSubmit
+		emitAutosaveState,
+		form
+	]);
+	const handleFormSubmit = useCallback(async (data) => {
+		return persistFormData(data, onSubmit, { reportAutosaveStatus: autosaveEnabled });
+	}, [
+		autosaveEnabled,
+		onSubmit,
+		persistFormData
+	]);
+	const submitCurrentDraft = useCallback(() => {
+		return new Promise((resolve, reject) => {
+			form.handleSubmit(async (data) => {
+				try {
+					resolve(await handleFormSubmit(data));
+				} catch (error) {
+					reject(error);
+				}
+			}, () => {
+				if (autosaveEnabled) emitAutosaveState("dirty");
+				reject(/* @__PURE__ */ new Error("Please resolve validation errors before continuing."));
+			})();
+		});
+	}, [
+		autosaveEnabled,
+		emitAutosaveState,
+		form,
+		handleFormSubmit
 	]);
+	React.useImperativeHandle(ref, () => ({
+		submitCurrentDraft,
+		isDirty: () => form.formState.isDirty
+	}), [form.formState.isDirty, submitCurrentDraft]);
 	useEffect(() => {
 		if (readOnly || isLoading) return;
 		const handleKeyDown = (e) => {
@@ -9868,6 +9948,24 @@ function FormEngineInner({ collection, fields, defaultValues = {}, onSubmit, onC
 		collection,
 		defaultValues
 	]);
+	useEffect(() => {
+		if (!autosaveEnabled || !isDirty || isLoading) return;
+		const handler = setTimeout(() => {
+			form.handleSubmit(async (data) => {
+				await persistFormData(data, autosave.onSave, { reportAutosaveStatus: true }).catch(() => {});
+			}, () => emitAutosaveState("dirty"))();
+		}, autosave?.delayMs ?? 1500);
+		return () => clearTimeout(handler);
+	}, [
+		autosave,
+		autosaveEnabled,
+		emitAutosaveState,
+		form,
+		isDirty,
+		isLoading,
+		persistFormData,
+		watchedValues
+	]);
 	useEffect(() => {
 		if (onDataChange) {
 			const handler = setTimeout(() => {
@@ -10213,10 +10311,17 @@ function FormEngineInner({ collection, fields, defaultValues = {}, onSubmit, onC
 		})
 	})] });
 }
-function FormEngine(props) {
-	if (React.useContext(NestedEditorContext)) return /* @__PURE__ */ jsx(FormEngineInner, { ...props });
-	return /* @__PURE__ */ jsx(NestedEditorProvider, { children: /* @__PURE__ */ jsx(FormEngineInner, { ...props }) });
-}
+var ForwardedFormEngineInner = React.forwardRef(FormEngineInner);
+var FormEngine = React.forwardRef(function FormEngine(props, ref) {
+	if (React.useContext(NestedEditorContext)) return /* @__PURE__ */ jsx(ForwardedFormEngineInner, {
+		...props,
+		ref
+	});
+	return /* @__PURE__ */ jsx(NestedEditorProvider, { children: /* @__PURE__ */ jsx(ForwardedFormEngineInner, {
+		...props,
+		ref
+	}) });
+});
 //#endregion
 //#region src/components/forms/fields/relationship-picker.tsx
 var PAGE_SIZE = 50;
@@ -11090,6 +11195,449 @@ function SpreadsheetEditor({ slug, schema, data, onSave, isSaving }) {
 	});
 }
 //#endregion
+//#region src/lib/workflow-ui.ts
+function resolveWorkflowState(workflowConfig, workflowMeta) {
+	if (!workflowConfig || !workflowMeta?.state) return null;
+	return workflowConfig.states.find((state) => state.name === workflowMeta.state) ?? null;
+}
+function resolveWorkflowStateFromDocument(workflowConfig, item) {
+	return resolveWorkflowState(workflowConfig, item._workflow ?? null);
+}
+function resolvePublishingStatus(schema, item) {
+	const hasPublishingState = !!(schema?.workflow || schema?.drafts);
+	const workflowState = resolveWorkflowStateFromDocument(schema?.workflow ?? null, item);
+	const workflowMeta = item._workflow;
+	if (workflowState) {
+		const rawWorkflowLabel = (workflowState.label || workflowState.name || "").trim();
+		const workflowStateLabel = rawWorkflowLabel && !["published", "draft"].includes(rawWorkflowLabel.toLowerCase()) ? rawWorkflowLabel : null;
+		if (workflowState.published) return {
+			label: "Published",
+			color: "success",
+			workflowStateLabel
+		};
+		if (workflowMeta?.publishedRevision) return {
+			label: "Changed",
+			color: "info",
+			workflowStateLabel
+		};
+		return {
+			label: "Draft",
+			color: "warning",
+			workflowStateLabel
+		};
+	}
+	if (!hasPublishingState) return null;
+	const plainStatus = item.status;
+	if (plainStatus === "published") return {
+		label: "Published",
+		color: "success",
+		workflowStateLabel: null
+	};
+	if (plainStatus === "draft") return {
+		label: "Draft",
+		color: "warning",
+		workflowStateLabel: null
+	};
+	return null;
+}
+function getAvailableWorkflowTransitions(workflowConfig, workflowMeta) {
+	if (!workflowConfig || !workflowMeta) return [];
+	const available = new Set(workflowMeta.availableTransitions ?? []);
+	return workflowConfig.transitions.filter((transition) => available.has(transition.name));
+}
+function getPrimaryWorkflowTransition(transitions) {
+	if (transitions.length === 0) return null;
+	if (transitions.length === 1) return transitions[0] ?? null;
+	return transitions.find((transition) => !transition.unpublish) ?? transitions[0] ?? null;
+}
+function groupWorkflowTransitions(transitions) {
+	return transitions.reduce((groups, transition) => {
+		if (transition.unpublish) groups.unpublish.push(transition);
+		else groups.normal.push(transition);
+		return groups;
+	}, {
+		normal: [],
+		unpublish: []
+	});
+}
+function getCommonWorkflowTransitions(workflowConfig, docs) {
+	if (!workflowConfig || docs.length === 0) return [];
+	const availableSets = docs.map((doc) => doc._workflow?.availableTransitions).filter((value) => Array.isArray(value) && value.length > 0).map((value) => new Set(value));
+	if (availableSets.length !== docs.length) return [];
+	return workflowConfig.transitions.filter((transition) => availableSets.every((set) => set.has(transition.name)));
+}
+//#endregion
+//#region src/components/workflow/workflow-transition-controls.tsx
+function formatSingleTransitionSuccessMessage(transitionLabel, documentLabel) {
+	return documentLabel?.trim() ? `${documentLabel}: ${transitionLabel}` : `${transitionLabel} completed`;
+}
+function StateIcon$1({ color }) {
+	if (color === "success") return /* @__PURE__ */ jsx(CheckCircle, { className: "dy-h-3.5 dy-w-3.5" });
+	if (color === "warning") return /* @__PURE__ */ jsx(Clock, { className: "dy-h-3.5 dy-w-3.5" });
+	if (color === "danger") return /* @__PURE__ */ jsx(XCircle, { className: "dy-h-3.5 dy-w-3.5" });
+	if (color === "info") return /* @__PURE__ */ jsx(AlertCircle, { className: "dy-h-3.5 dy-w-3.5" });
+	return /* @__PURE__ */ jsx(Clock, { className: "dy-h-3.5 dy-w-3.5" });
+}
+function WorkflowCommentDialog({ transition, pending, onOpenChange, onConfirm }) {
+	const [comment, setComment] = React$1.useState("");
+	React$1.useEffect(() => {
+		if (!transition) setComment("");
+	}, [transition]);
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: !!transition,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "sm:dy-max-w-md",
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: transition?.label }), /* @__PURE__ */ jsx(DialogDescription, { children: "Add the required comment before applying this workflow transition." })] }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "dy-space-y-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "dy-text-xs dy-font-semibold dy-text-muted-foreground",
+						children: "Comment"
+					}), /* @__PURE__ */ jsx("textarea", {
+						className: "dy-min-h-28 dy-w-full dy-rounded-lg dy-border dy-border-border/60 dy-bg-background dy-px-3 dy-py-2 dy-text-sm dy-text-foreground placeholder:dy-text-muted-foreground focus:dy-outline-none focus:dy-ring-2 focus:dy-ring-primary/30",
+						value: comment,
+						onChange: (event) => setComment(event.target.value),
+						placeholder: `Required for "${transition?.label ?? "this transition"}"`,
+						autoFocus: true
+					})]
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, {
+					className: "dy-flex dy-justify-end dy-gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						onClick: () => onOpenChange(false),
+						disabled: pending,
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx(Button, {
+						onClick: () => onConfirm(comment.trim()),
+						disabled: pending || !comment.trim(),
+						children: pending ? /* @__PURE__ */ jsx(Loader2, { className: "dy-h-4 dy-w-4 dy-animate-spin" }) : transition?.label
+					})]
+				})
+			]
+		})
+	});
+}
+function WorkflowTransitionActionItems({ transitions, workflowConfig, onSelect, disabled }) {
+	return transitions.map((transition) => {
+		return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			onClick: () => onSelect(transition),
+			disabled,
+			className: "dy-flex dy-items-center dy-gap-2",
+			children: [
+				/* @__PURE__ */ jsx(StateIcon$1, { color: workflowConfig.states.find((state) => state.name === transition.to)?.color }),
+				/* @__PURE__ */ jsx("span", {
+					className: "dy-flex-1",
+					children: transition.label
+				}),
+				transition.requireComment && /* @__PURE__ */ jsx(MessageSquarePlus, { className: "dy-h-3.5 dy-w-3.5 dy-text-muted-foreground" })
+			]
+		}, transition.name);
+	});
+}
+function useWorkflowTransitionExecutor({ collection, documentIds, documentLabels, expectedRevisions, invalidateQueryKeys, onComplete, prepareTransition }) {
+	const { client } = useDyrected();
+	const queryClient = useQueryClient();
+	const wfClient = client;
+	const [commentTransition, setCommentTransition] = React$1.useState(null);
+	const [isPreparing, setIsPreparing] = React$1.useState(false);
+	const getDefaultContext = React$1.useCallback(() => ({
+		documentIds,
+		documentLabels,
+		expectedRevisions,
+		invalidateQueryKeys
+	}), [
+		documentIds,
+		documentLabels,
+		expectedRevisions,
+		invalidateQueryKeys
+	]);
+	const mutation = useMutation({
+		mutationFn: async ({ transition, comment, context }) => {
+			let successCount = 0;
+			let failureCount = 0;
+			let firstError;
+			for (const id of context.documentIds) try {
+				await wfClient.transition(collection, id, transition.name, {
+					expectedRevision: context.expectedRevisions?.[id],
+					comment
+				});
+				successCount += 1;
+			} catch (error) {
+				failureCount += 1;
+				if (!firstError) firstError = error instanceof Error ? error : new Error(String(error));
+			}
+			return {
+				transition,
+				successCount,
+				failureCount,
+				firstError,
+				context
+			};
+		},
+		onSuccess: async (result) => {
+			setCommentTransition(null);
+			const queryKeys = [...invalidateQueryKeys ?? [], ...result.context.invalidateQueryKeys ?? []];
+			if (queryKeys.length > 0) await Promise.all(queryKeys.map((queryKey) => queryClient.invalidateQueries({ queryKey: [...queryKey] })));
+			if (result.failureCount === 0) if (result.context.documentIds.length === 1) {
+				const singleDocumentId = result.context.documentIds[0] ?? "";
+				toast.success(formatSingleTransitionSuccessMessage(result.transition.label, result.context.documentLabels?.[singleDocumentId]));
+			} else toast.success(`Applied "${result.transition.label}" to ${result.successCount} ${result.successCount === 1 ? "entry" : "entries"}`);
+			else if (result.successCount === 0) toast.error("Transition failed", { description: result.firstError?.message ?? "The workflow transition could not be completed." });
+			else toast(`Applied "${result.transition.label}" to ${result.successCount} entries`, { description: `${result.failureCount} failed. ${result.firstError?.message ?? ""}`.trim() });
+			onComplete?.(result);
+		},
+		onError: (error) => {
+			setCommentTransition(null);
+			toast.error("Transition failed", { description: error.message });
+		}
+	});
+	return {
+		requestTransition: React$1.useCallback(async (transition) => {
+			try {
+				setIsPreparing(true);
+				const context = await (prepareTransition?.(transition) ?? Promise.resolve(getDefaultContext()));
+				if (!context || context.documentIds.length === 0) return;
+				if (transition.requireComment) {
+					setCommentTransition({
+						transition,
+						context
+					});
+					return;
+				}
+				mutation.mutate({
+					transition,
+					context
+				});
+			} catch (error) {
+				const message = error instanceof Error ? error.message : "The workflow action could not be prepared.";
+				toast.error("Could not continue", { description: message });
+			} finally {
+				setIsPreparing(false);
+			}
+		}, [
+			getDefaultContext,
+			mutation,
+			prepareTransition
+		]),
+		commentTransition,
+		setCommentTransition,
+		confirmComment: React$1.useCallback((comment) => {
+			if (!commentTransition) return;
+			mutation.mutate({
+				transition: commentTransition.transition,
+				comment,
+				context: commentTransition.context
+			});
+		}, [commentTransition, mutation]),
+		mutation,
+		isPreparing
+	};
+}
+function WorkflowTransitionSplitButton({ collection, documentId, workflowConfig, workflowMeta, invalidateQueryKeys, onComplete, onPendingChange, onSaveDraft, saveDraftPending, documentLabel, className, prepareTransition }) {
+	const transitions = React$1.useMemo(() => getAvailableWorkflowTransitions(workflowConfig, workflowMeta), [workflowConfig, workflowMeta]);
+	const groupedTransitions = React$1.useMemo(() => groupWorkflowTransitions(transitions), [transitions]);
+	const primaryTransition = React$1.useMemo(() => getPrimaryWorkflowTransition(transitions), [transitions]);
+	const { requestTransition, commentTransition, setCommentTransition, confirmComment, mutation, isPreparing } = useWorkflowTransitionExecutor({
+		collection,
+		documentIds: [documentId],
+		documentLabels: { [documentId]: documentLabel },
+		expectedRevisions: { [documentId]: workflowMeta.revision },
+		invalidateQueryKeys,
+		onComplete,
+		prepareTransition
+	});
+	const activeTransitionName = mutation.variables?.transition?.name;
+	const isPrimaryLoading = mutation.isPending && activeTransitionName === primaryTransition?.name;
+	const hasTransitions = transitions.length > 0;
+	const hasMenuItems = hasTransitions || !!onSaveDraft;
+	const isBusy = mutation.isPending || isPreparing || !!saveDraftPending;
+	React$1.useEffect(() => {
+		onPendingChange?.(mutation.isPending || isPreparing);
+	}, [
+		isPreparing,
+		mutation.isPending,
+		onPendingChange
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: cn("dy-inline-flex dy-items-center", className),
+		children: [/* @__PURE__ */ jsx("div", { className: "dy-mx-1 dy-h-6 dy-w-px dy-bg-border/60" }), /* @__PURE__ */ jsxs("div", {
+			className: "dy-inline-flex dy-overflow-hidden dy-rounded-lg dy-border dy-border-primary/20 dy-shadow-sm",
+			children: [/* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				className: "dy-h-9 dy-rounded-none dy-border-0 dy-px-4 dy-font-bold dy-bg-primary dy-text-primary-foreground hover:dy-bg-primary/90",
+				disabled: !primaryTransition || isBusy,
+				onClick: () => {
+					if (primaryTransition) requestTransition(primaryTransition);
+				},
+				title: primaryTransition?.label ?? "No workflow actions available",
+				children: isPrimaryLoading || isPreparing ? /* @__PURE__ */ jsxs("span", {
+					className: "dy-flex dy-items-center dy-gap-2",
+					children: [/* @__PURE__ */ jsx(Loader2, { className: "dy-h-3.5 dy-w-3.5 dy-animate-spin" }), isPreparing ? "Saving…" : "Applying…"]
+				}) : primaryTransition?.label ?? "No actions"
+			}), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "ghost",
+					className: "dy-h-9 dy-rounded-none dy-border-0 dy-px-2 dy-text-primary-foreground hover:dy-bg-primary/90 hover:dy-text-primary-foreground",
+					disabled: !hasMenuItems || isBusy,
+					"aria-label": "More workflow actions",
+					children: /* @__PURE__ */ jsx(ChevronDown, { className: "dy-h-4 dy-w-4" })
+				})
+			}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+				align: "end",
+				className: "dy-min-w-56",
+				children: [onSaveDraft && /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: () => void onSaveDraft(),
+					disabled: isBusy,
+					className: "dy-flex dy-items-center dy-gap-2",
+					children: [saveDraftPending ? /* @__PURE__ */ jsx(Loader2, { className: "dy-h-3.5 dy-w-3.5 dy-animate-spin" }) : /* @__PURE__ */ jsx(Save, { className: "dy-h-3.5 dy-w-3.5" }), /* @__PURE__ */ jsx("span", {
+						className: "dy-flex-1",
+						children: saveDraftPending ? "Saving draft..." : "Save draft"
+					})]
+				}), hasTransitions && /* @__PURE__ */ jsxs(Fragment, { children: [
+					onSaveDraft && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+					/* @__PURE__ */ jsx(WorkflowTransitionActionItems, {
+						transitions: groupedTransitions.normal,
+						workflowConfig,
+						onSelect: (transition) => {
+							requestTransition(transition);
+						},
+						disabled: isBusy
+					}),
+					groupedTransitions.unpublish.length > 0 && groupedTransitions.normal.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+					/* @__PURE__ */ jsx(WorkflowTransitionActionItems, {
+						transitions: groupedTransitions.unpublish,
+						workflowConfig,
+						onSelect: (transition) => {
+							requestTransition(transition);
+						},
+						disabled: isBusy
+					})
+				] })]
+			})] })]
+		})]
+	}), /* @__PURE__ */ jsx(WorkflowCommentDialog, {
+		transition: commentTransition?.transition ?? null,
+		pending: mutation.isPending,
+		onOpenChange: (open) => !open && setCommentTransition(null),
+		onConfirm: confirmComment
+	})] });
+}
+function WorkflowTransitionMenu({ collection, documentIds, workflowConfig, transitions, expectedRevisions, invalidateQueryKeys, onComplete, trigger, documentLabels, align = "end", sideOffset = 4, disabled }) {
+	const { requestTransition, commentTransition, setCommentTransition, confirmComment, mutation, isPreparing } = useWorkflowTransitionExecutor({
+		collection,
+		documentIds,
+		documentLabels,
+		expectedRevisions,
+		invalidateQueryKeys,
+		onComplete
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		disabled: disabled || transitions.length === 0,
+		children: trigger
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align,
+		sideOffset,
+		className: "dy-min-w-56",
+		children: /* @__PURE__ */ jsx(WorkflowTransitionActionItems, {
+			transitions,
+			workflowConfig,
+			onSelect: (transition) => {
+				requestTransition(transition);
+			},
+			disabled: mutation.isPending || isPreparing
+		})
+	})] }), /* @__PURE__ */ jsx(WorkflowCommentDialog, {
+		transition: commentTransition?.transition ?? null,
+		pending: mutation.isPending,
+		onOpenChange: (open) => !open && setCommentTransition(null),
+		onConfirm: confirmComment
+	})] });
+}
+function WorkflowTransitionPanelActions({ collection, documentId, workflowConfig, workflowMeta, onSaveDraft, saveDraftPending, prepareTransition }) {
+	const transitions = React$1.useMemo(() => getAvailableWorkflowTransitions(workflowConfig, workflowMeta), [workflowConfig, workflowMeta]);
+	const groupedTransitions = React$1.useMemo(() => groupWorkflowTransitions(transitions), [transitions]);
+	const { requestTransition, commentTransition, setCommentTransition, confirmComment, mutation, isPreparing } = useWorkflowTransitionExecutor({
+		collection,
+		documentIds: [documentId],
+		expectedRevisions: { [documentId]: workflowMeta.revision },
+		invalidateQueryKeys: [
+			[
+				"entry",
+				collection,
+				documentId
+			],
+			["collection", collection],
+			[
+				"workflow-history",
+				collection,
+				documentId
+			]
+		],
+		prepareTransition
+	});
+	const activeTransitionName = mutation.variables?.transition?.name;
+	if (transitions.length === 0 && !onSaveDraft) return /* @__PURE__ */ jsx("p", {
+		className: "dy-text-xs dy-text-muted-foreground/50 dy-italic",
+		children: "No transitions available from this state."
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "dy-space-y-2",
+		children: [
+			onSaveDraft && /* @__PURE__ */ jsxs(Button, {
+				size: "sm",
+				variant: "secondary",
+				className: "dy-w-full dy-h-9 dy-rounded-lg dy-text-xs dy-font-semibold dy-justify-start dy-gap-2",
+				disabled: mutation.isPending || isPreparing || saveDraftPending,
+				onClick: () => void onSaveDraft(),
+				children: [saveDraftPending ? /* @__PURE__ */ jsx(Loader2, { className: "dy-h-3.5 dy-w-3.5 dy-animate-spin" }) : /* @__PURE__ */ jsx(Save, { className: "dy-h-3.5 dy-w-3.5" }), saveDraftPending ? "Saving draft..." : "Save draft"]
+			}),
+			groupedTransitions.normal.map((transition) => {
+				const isLoading = mutation.isPending && activeTransitionName === transition.name;
+				const targetState = workflowConfig.states.find((state) => state.name === transition.to);
+				return /* @__PURE__ */ jsxs(Button, {
+					size: "sm",
+					variant: "default",
+					className: "dy-w-full dy-h-9 dy-rounded-lg dy-text-xs dy-font-semibold dy-justify-start dy-gap-2",
+					disabled: mutation.isPending || isPreparing,
+					onClick: () => {
+						requestTransition(transition);
+					},
+					children: [isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "dy-h-3.5 dy-w-3.5 dy-animate-spin" }) : /* @__PURE__ */ jsx(StateIcon$1, { color: targetState?.color }), transition.label]
+				}, transition.name);
+			}),
+			groupedTransitions.unpublish.length > 0 && groupedTransitions.normal.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "dy-px-1 dy-pt-2",
+				children: /* @__PURE__ */ jsx("div", { className: "dy-h-px dy-bg-border/60" })
+			}),
+			groupedTransitions.unpublish.map((transition) => {
+				const isLoading = mutation.isPending && activeTransitionName === transition.name;
+				const targetState = workflowConfig.states.find((state) => state.name === transition.to);
+				return /* @__PURE__ */ jsxs(Button, {
+					size: "sm",
+					variant: "outline",
+					className: "dy-w-full dy-h-9 dy-rounded-lg dy-text-xs dy-font-semibold dy-justify-start dy-gap-2",
+					disabled: mutation.isPending || isPreparing,
+					onClick: () => {
+						requestTransition(transition);
+					},
+					children: [isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "dy-h-3.5 dy-w-3.5 dy-animate-spin" }) : /* @__PURE__ */ jsx(StateIcon$1, { color: targetState?.color }), transition.label]
+				}, transition.name);
+			})
+		]
+	}), /* @__PURE__ */ jsx(WorkflowCommentDialog, {
+		transition: commentTransition?.transition ?? null,
+		pending: mutation.isPending,
+		onOpenChange: (open) => !open && setCommentTransition(null),
+		onConfirm: confirmComment
+	})] });
+}
+//#endregion
 //#region src/pages/collections/list-page.tsx
 function SortableColumnItem({ id, label, visible, onToggleVisible }) {
 	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
@@ -11119,24 +11667,74 @@ function SortableColumnItem({ id, label, visible, onToggleVisible }) {
 		]
 	});
 }
-function resolvePublishedStateName(schema, item) {
-	const hasPublishingState = !!(schema?.workflow || schema?.drafts);
-	const workflowConfig = schema?.workflow;
-	const workflowMeta = item?._workflow;
-	const workflowState = workflowConfig && workflowMeta ? workflowConfig.states?.find((state) => state.name === workflowMeta.state) : null;
-	if (workflowState) return workflowState.published ? "Published" : "Draft";
-	if (!hasPublishingState) return null;
-	const plainStatus = item.status;
-	if (plainStatus === "published") return "Published";
-	if (plainStatus === "draft") return "Draft";
-	return null;
-}
-function resolveWorkflowState(schema, item) {
-	const workflowConfig = schema?.workflow;
-	const workflowMeta = item?._workflow;
-	return workflowConfig && workflowMeta ? workflowConfig.states?.find((state) => state.name === workflowMeta.state) ?? null : null;
+function WorkflowStatusCell({ schema, slug, item }) {
+	const workflowConfig = schema.workflow ?? null;
+	const workflowMeta = item._workflow ?? null;
+	const publishingStatus = resolvePublishingStatus(schema, item);
+	const documentLabel = resolveDocumentTitle({
+		entry: item,
+		collection: schema,
+		collections: [schema]
+	});
+	if (!publishingStatus) return /* @__PURE__ */ jsx("span", {
+		className: "dy-text-xs dy-text-muted-foreground",
+		children: "-"
+	});
+	const workflowState = resolveWorkflowStateFromDocument(workflowConfig, item);
+	const badgePresentation = {
+		className: WORKFLOW_BADGE_COLORS[publishingStatus.color],
+		style: void 0
+	};
+	const workflowStagePresentation = workflowState && publishingStatus.workflowStateLabel ? getWorkflowBadgePresentation(workflowState.color) : null;
+	const transitions = getAvailableWorkflowTransitions(workflowConfig, workflowMeta);
+	const badge = /* @__PURE__ */ jsxs("div", {
+		className: "dy-inline-flex dy-items-center dy-gap-1.5",
+		children: [/* @__PURE__ */ jsx(Badge, {
+			variant: "outline",
+			className: cn("dy-px-2 dy-py-0 dy-rounded-full dy-text-[10px] dy-font-bold dy-uppercase dy-tracking-wider dy-shrink-0", transitions.length > 0 && "hover:dy-opacity-85", badgePresentation.className),
+			style: badgePresentation.style,
+			children: publishingStatus.label
+		}), publishingStatus.workflowStateLabel && workflowStagePresentation && /* @__PURE__ */ jsx(Badge, {
+			variant: "outline",
+			className: cn("dy-px-2 dy-py-0 dy-rounded-full dy-text-[10px] dy-font-semibold dy-tracking-wide dy-shrink-0", transitions.length > 0 && "hover:dy-opacity-85", workflowStagePresentation.className),
+			style: workflowStagePresentation.style,
+			children: publishingStatus.workflowStateLabel
+		})]
+	});
+	if (!workflowConfig || !workflowMeta || transitions.length === 0 || typeof item.id !== "string") return badge;
+	return /* @__PURE__ */ jsx(WorkflowTransitionMenu, {
+		collection: slug,
+		documentIds: [item.id],
+		documentLabels: { [item.id]: documentLabel },
+		workflowConfig,
+		transitions,
+		expectedRevisions: { [item.id]: workflowMeta.revision },
+		invalidateQueryKeys: [
+			["collection", slug],
+			[
+				"entry",
+				slug,
+				item.id
+			],
+			[
+				"workflow-history",
+				slug,
+				item.id
+			]
+		],
+		trigger: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "dy-inline-flex",
+			title: "Change workflow state",
+			"aria-label": "Change workflow state",
+			children: badge
+		})
+	});
 }
 function CollectionListPage({ slug }) {
+	return /* @__PURE__ */ jsx(CollectionListPageContent, { slug }, slug);
+}
+function CollectionListPageContent({ slug }) {
 	const { client, components, user } = useDyrected();
 	const queryClient = useQueryClient();
 	const [page, setPage] = React$1.useState(1);
@@ -11162,12 +11760,6 @@ function CollectionListPage({ slug }) {
 		}, { replace: true });
 		setPage(1);
 	}, [setSearchParams]);
-	const [prevSlug, setPrevSlug] = React$1.useState(slug);
-	if (prevSlug !== slug) {
-		setPrevSlug(slug);
-		setPage(1);
-		setRowSelection({});
-	}
 	const { data: schemas } = useQuery({
 		queryKey: ["schemas"],
 		queryFn: () => client.getSchemas(),
@@ -11475,6 +12067,10 @@ function CollectionListPage({ slug }) {
 		}
 		if (window.confirm(`Delete ${cleanIds.length} entries? This cannot be undone.`)) bulkDeleteMutation.mutate(cleanIds);
 	}
+	const workflowConfig = schema?.workflow ?? null;
+	const selectedWorkflowDocs = React$1.useMemo(() => Object.keys(rowSelection).filter((id) => rowSelection[id]).map((id) => response?.docs?.find((doc) => String(doc.id) === id)).filter((doc) => !!doc && typeof doc.id === "string" && !!doc._workflow), [rowSelection, response]);
+	const sharedWorkflowTransitions = React$1.useMemo(() => getCommonWorkflowTransitions(workflowConfig, selectedWorkflowDocs), [workflowConfig, selectedWorkflowDocs]);
+	const selectedWorkflowRevisions = React$1.useMemo(() => Object.fromEntries(selectedWorkflowDocs.map((doc) => [doc.id, doc._workflow?.revision])), [selectedWorkflowDocs]);
 	const columns = React$1.useMemo(() => {
 		if (!schema) return [];
 		const allDisplayFields = schema.fields.filter((f) => f.name && f.name !== "password" && !f.admin?.hidden && f.type !== "row" && f.type !== "join");
@@ -11632,21 +12228,10 @@ function CollectionListPage({ slug }) {
 			header: "Status",
 			enableHiding: false,
 			cell: ({ row }) => {
-				const status = resolvePublishedStateName(schema, row.original);
-				if (!status) return /* @__PURE__ */ jsx("span", {
-					className: "dy-text-xs dy-text-muted-foreground",
-					children: "-"
-				});
-				const workflowState = resolveWorkflowState(schema, row.original);
-				const badgePresentation = workflowState ? getWorkflowBadgePresentation(workflowState.color) : {
-					className: status === "Published" ? WORKFLOW_BADGE_COLORS.success : WORKFLOW_BADGE_COLORS.warning,
-					style: void 0
-				};
-				return /* @__PURE__ */ jsx(Badge, {
-					variant: "outline",
-					className: cn("dy-px-2 dy-py-0 dy-rounded-full dy-text-[10px] dy-font-bold dy-uppercase dy-tracking-wider dy-shrink-0", badgePresentation.className),
-					style: badgePresentation.style,
-					children: status
+				return /* @__PURE__ */ jsx(WorkflowStatusCell, {
+					schema,
+					slug,
+					item: row.original
 				});
 			}
 		});
@@ -12060,48 +12645,80 @@ function CollectionListPage({ slug }) {
 								}
 								return canDelete;
 							});
-							return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Button, {
-								variant: "outline",
-								size: "sm",
-								className: "dy-h-8",
-								onClick: () => handleExportSelected(selectedIds),
-								disabled: selectedIds.length === 0,
-								children: [
-									/* @__PURE__ */ jsx(FileDown, { className: "dy-h-4 dy-w-4 dy-mr-2" }),
-									"Export Selected (",
-									selectedIds.length,
-									")"
-								]
-							}), /* @__PURE__ */ jsxs(Button, {
-								variant: "destructive",
-								size: "sm",
-								className: "dy-h-8",
-								onClick: () => handleBulkDelete(deletableIds),
-								disabled: bulkDeleteMutation.isPending || deletableIds.length === 0,
-								children: [
-									/* @__PURE__ */ jsx(Trash2, { className: "dy-h-4 dy-w-4 dy-mr-2" }),
-									"Delete Selected (",
-									deletableIds.length,
-									")"
-								]
-							})] });
-						}
-					}, slug),
-					/* @__PURE__ */ jsx(AdminComponentSlot, {
-						slot: "afterListTable",
-						componentKeys: collectionSlots?.afterListTable,
-						registry: components?.collectionList,
-						componentProps: collectionComponentProps
-					}),
-					/* @__PURE__ */ jsx(Pagination, {
-						page,
-						totalPages,
-						total: response?.total,
-						hasPrevPage,
-						hasNextPage,
-						onPageChange: setPage
-					}),
-					/* @__PURE__ */ jsx(AdminComponentSlot, {
+							return /* @__PURE__ */ jsxs(Fragment, { children: [
+								workflowConfig && selectedWorkflowDocs.length > 0 && sharedWorkflowTransitions.length > 0 && /* @__PURE__ */ jsx(WorkflowTransitionMenu, {
+									collection: slug,
+									documentIds: selectedWorkflowDocs.map((doc) => doc.id),
+									documentLabels: Object.fromEntries(selectedWorkflowDocs.map((doc) => [doc.id, resolveDocumentTitle({
+										entry: doc,
+										collection: schema,
+										collections: [schema]
+									})])),
+									workflowConfig,
+									transitions: sharedWorkflowTransitions,
+									expectedRevisions: selectedWorkflowRevisions,
+									invalidateQueryKeys: [["collection", slug]],
+									onComplete: () => setRowSelection({}),
+									trigger: /* @__PURE__ */ jsxs(Button, {
+										variant: "outline",
+										size: "sm",
+										className: "dy-h-8",
+										disabled: selectedWorkflowDocs.length === 0,
+										children: [
+											"Change state (",
+											selectedWorkflowDocs.length,
+											")"
+										]
+									})
+								}),
+								workflowConfig && selectedWorkflowDocs.length > 0 && sharedWorkflowTransitions.length === 0 && /* @__PURE__ */ jsx("span", {
+									className: "dy-text-xs dy-text-muted-foreground",
+									children: "No shared workflow action for this selection."
+								}),
+								/* @__PURE__ */ jsxs(Button, {
+									variant: "outline",
+									size: "sm",
+									className: "dy-h-8",
+									onClick: () => handleExportSelected(selectedIds),
+									disabled: selectedIds.length === 0,
+									children: [
+										/* @__PURE__ */ jsx(FileDown, { className: "dy-h-4 dy-w-4 dy-mr-2" }),
+										"Export Selected (",
+										selectedIds.length,
+										")"
+									]
+								}),
+								/* @__PURE__ */ jsxs(Button, {
+									variant: "destructive",
+									size: "sm",
+									className: "dy-h-8",
+									onClick: () => handleBulkDelete(deletableIds),
+									disabled: bulkDeleteMutation.isPending || deletableIds.length === 0,
+									children: [
+										/* @__PURE__ */ jsx(Trash2, { className: "dy-h-4 dy-w-4 dy-mr-2" }),
+										"Delete Selected (",
+										deletableIds.length,
+										")"
+									]
+								})
+							] });
+						}
+					}, slug),
+					/* @__PURE__ */ jsx(AdminComponentSlot, {
+						slot: "afterListTable",
+						componentKeys: collectionSlots?.afterListTable,
+						registry: components?.collectionList,
+						componentProps: collectionComponentProps
+					}),
+					/* @__PURE__ */ jsx(Pagination, {
+						page,
+						totalPages,
+						total: response?.total,
+						hasPrevPage,
+						hasNextPage,
+						onPageChange: setPage
+					}),
+					/* @__PURE__ */ jsx(AdminComponentSlot, {
 						slot: "afterList",
 						componentKeys: collectionSlots?.afterList,
 						registry: components?.collectionList,
@@ -12358,55 +12975,11 @@ function StateIcon({ color }) {
 	if (color === "info") return /* @__PURE__ */ jsx(AlertCircle, { className: "dy-h-3.5 dy-w-3.5" });
 	return /* @__PURE__ */ jsx(Clock, { className: "dy-h-3.5 dy-w-3.5" });
 }
-function CommentDialog({ transitionLabel, onConfirm, onCancel, isPending }) {
-	const [comment, setComment] = useState("");
-	return /* @__PURE__ */ jsxs("div", {
-		className: "dy-mt-3 dy-space-y-2",
-		children: [
-			/* @__PURE__ */ jsxs("label", {
-				className: "dy-text-xs dy-font-medium dy-text-muted-foreground",
-				children: ["Comment ", /* @__PURE__ */ jsx("span", {
-					className: "dy-text-destructive",
-					children: "*"
-				})]
-			}),
-			/* @__PURE__ */ jsx("textarea", {
-				className: "dy-w-full dy-rounded-lg dy-border dy-border-border/60 dy-bg-background dy-px-3 dy-py-2 dy-text-sm dy-text-foreground placeholder:dy-text-muted-foreground focus:dy-outline-none focus:dy-ring-2 focus:dy-ring-primary/30 dy-resize-none",
-				rows: 3,
-				placeholder: `Required for "${transitionLabel}"…`,
-				value: comment,
-				onChange: (e) => setComment(e.target.value),
-				autoFocus: true
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "dy-flex dy-gap-2",
-				children: [/* @__PURE__ */ jsx(Button, {
-					size: "sm",
-					className: "dy-h-8 dy-px-3 dy-rounded-lg dy-text-xs dy-font-semibold",
-					disabled: !comment.trim() || isPending,
-					onClick: () => onConfirm(comment.trim()),
-					children: isPending ? /* @__PURE__ */ jsx(Loader2, { className: "dy-h-3 dy-w-3 dy-animate-spin" }) : transitionLabel
-				}), /* @__PURE__ */ jsx(Button, {
-					size: "sm",
-					variant: "ghost",
-					className: "dy-h-8 dy-px-3 dy-rounded-lg dy-text-xs",
-					onClick: onCancel,
-					disabled: isPending,
-					children: "Cancel"
-				})]
-			})
-		]
-	});
-}
-function WorkflowPanel({ collection, documentId, workflowMeta, workflowConfig }) {
+function WorkflowPanel({ collection, documentId, workflowMeta, workflowConfig, onCompareToLive, compareToLiveEnabled = false, compareToLiveReason = null, onSaveDraft, saveDraftPending, prepareTransition }) {
 	const { client } = useDyrected();
-	const queryClient = useQueryClient();
 	const [showHistory, setShowHistory] = useState(false);
-	const [pendingComment, setPendingComment] = useState(null);
 	const currentState = workflowConfig.states.find((s) => s.name === workflowMeta.state);
 	const colors = stateColors(currentState?.color);
-	const available = workflowMeta.availableTransitions ?? [];
-	const availableTransitions = workflowConfig.transitions.filter((t) => available.includes(t.name));
 	const wfClient = client;
 	const { data: historyResult, isLoading: historyLoading } = useQuery({
 		queryKey: [
@@ -12418,34 +12991,6 @@ function WorkflowPanel({ collection, documentId, workflowMeta, workflowConfig })
 		enabled: showHistory && !!client
 	});
 	const history = historyResult?.docs ?? [];
-	const transitionMutation = useMutation({
-		mutationFn: ({ name, comment }) => wfClient.transition(collection, documentId, name, {
-			expectedRevision: workflowMeta.revision,
-			comment
-		}),
-		onSuccess: () => {
-			setPendingComment(null);
-			queryClient.invalidateQueries({ queryKey: [
-				"entry",
-				collection,
-				documentId
-			] });
-			queryClient.invalidateQueries({ queryKey: [
-				"workflow-history",
-				collection,
-				documentId
-			] });
-			toast.success("Transition applied");
-		},
-		onError: (err) => {
-			setPendingComment(null);
-			toast.error("Transition failed", { description: err.message });
-		}
-	});
-	function handleTransitionClick(t) {
-		if (t.requireComment) setPendingComment(t.name);
-		else transitionMutation.mutate({ name: t.name });
-	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: "dy-rounded-2xl dy-border dy-border-border/50 dy-bg-muted/10 dy-p-4 dy-space-y-4",
 		children: [
@@ -12463,32 +13008,32 @@ function WorkflowPanel({ collection, documentId, workflowMeta, workflowConfig })
 				className: "dy-flex dy-gap-4 dy-text-[11px] dy-text-muted-foreground/60",
 				children: [/* @__PURE__ */ jsxs("span", { children: ["Revision ", workflowMeta.revision] }), workflowMeta.publishedAt && /* @__PURE__ */ jsxs("span", { children: ["Published ", new Date(workflowMeta.publishedAt).toLocaleDateString()] })]
 			}),
-			availableTransitions.length > 0 && /* @__PURE__ */ jsx("div", {
-				className: "dy-space-y-2",
-				children: availableTransitions.map((t) => {
-					const isWaiting = pendingComment === t.name;
-					const isLoading = transitionMutation.isPending && transitionMutation.variables?.name === t.name;
-					return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(Button, {
-						size: "sm",
-						variant: t.unpublish || t.name === "reject" ? "outline" : "default",
-						className: cn("dy-w-full dy-h-9 dy-rounded-lg dy-text-xs dy-font-semibold dy-justify-start dy-gap-2", isWaiting && "dy-ring-2 dy-ring-primary/30"),
-						disabled: transitionMutation.isPending,
-						onClick: () => handleTransitionClick(t),
-						children: [isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "dy-h-3.5 dy-w-3.5 dy-animate-spin" }) : /* @__PURE__ */ jsx(StateIcon, { color: workflowConfig.states.find((s) => s.name === t.to)?.color }), t.label]
-					}), isWaiting && /* @__PURE__ */ jsx(CommentDialog, {
-						transitionLabel: t.label,
-						isPending: transitionMutation.isPending,
-						onConfirm: (comment) => transitionMutation.mutate({
-							name: t.name,
-							comment
-						}),
-						onCancel: () => setPendingComment(null)
-					})] }, t.name);
-				})
+			/* @__PURE__ */ jsx(WorkflowTransitionPanelActions, {
+				collection,
+				documentId,
+				workflowConfig,
+				workflowMeta,
+				onSaveDraft,
+				saveDraftPending,
+				prepareTransition
 			}),
-			available.length === 0 && /* @__PURE__ */ jsx("p", {
-				className: "dy-text-xs dy-text-muted-foreground/50 dy-italic",
-				children: "No transitions available from this state."
+			onCompareToLive && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				className: "dy-w-full dy-justify-between dy-rounded-xl dy-border-border/60 dy-bg-background/70 dy-text-left",
+				onClick: onCompareToLive,
+				disabled: !compareToLiveEnabled,
+				title: !compareToLiveEnabled && compareToLiveReason ? compareToLiveReason : "Compare draft to live",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "dy-flex dy-flex-col dy-items-start",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "dy-text-sm dy-font-semibold dy-text-foreground",
+						children: "Compare to live"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "dy-text-xs dy-font-normal dy-text-muted-foreground",
+						children: compareToLiveEnabled ? "See exactly what will change on publish." : compareToLiveReason ?? "Publish this entry once to unlock live comparisons."
+					})]
+				})
 			}),
 			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
 				className: "dy-flex dy-items-center dy-gap-1 dy-text-[11px] dy-font-medium dy-text-muted-foreground/60 hover:dy-text-muted-foreground dy-transition-colors",
@@ -12545,6 +13090,216 @@ function WorkflowPanel({ collection, documentId, workflowMeta, workflowConfig })
 	});
 }
 //#endregion
+//#region src/components/ui/card.tsx
+var Card = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("dy-rounded-lg dy-border dy-bg-card dy-text-card-foreground dy-shadow-sm", className),
+	...props
+}));
+Card.displayName = "Card";
+var CardHeader = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("dy-flex dy-flex-col dy-space-y-1.5 dy-p-6", className),
+	...props
+}));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("dy-text-2xl dy-font-semibold dy-leading-none dy-tracking-tight", className),
+	...props
+}));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("dy-text-sm dy-text-muted-foreground", className),
+	...props
+}));
+CardDescription.displayName = "CardDescription";
+var CardContent = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("dy-p-6 dy-pt-0", className),
+	...props
+}));
+CardContent.displayName = "CardContent";
+var CardFooter = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("dy-flex dy-items-center dy-p-6 dy-pt-0", className),
+	...props
+}));
+CardFooter.displayName = "CardFooter";
+//#endregion
+//#region src/components/workflow/draft-live-compare-sheet.tsx
+function statusBadgeClass(status) {
+	if (status === "Added") return "dy-bg-emerald-50 dy-text-emerald-700 dy-border-emerald-200";
+	if (status === "Removed") return "dy-bg-rose-50 dy-text-rose-700 dy-border-rose-200";
+	return "dy-bg-amber-50 dy-text-amber-700 dy-border-amber-200";
+}
+function DraftLiveCompareSheet({ open, onOpenChange, comparison }) {
+	return /* @__PURE__ */ jsx(Sheet, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side: "right",
+			className: "dy-w-[96vw] sm:dy-max-w-4xl lg:dy-max-w-6xl dy-border-l dy-border-border/60",
+			children: [/* @__PURE__ */ jsx(SheetHeader, {
+				className: "dy-border-b dy-border-border/50 dy-bg-background/95 dy-px-6 dy-py-5 dy-backdrop-blur",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "dy-flex dy-flex-wrap dy-items-start dy-justify-between dy-gap-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "dy-space-y-1",
+						children: [/* @__PURE__ */ jsx(SheetTitle, {
+							className: "dy-text-2xl dy-font-serif dy-font-bold dy-tracking-tight",
+							children: "Compare draft to live"
+						}), /* @__PURE__ */ jsx(SheetDescription, { children: "These changes are in your draft and are not live yet." })]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "dy-flex dy-flex-wrap dy-gap-2",
+						children: [
+							/* @__PURE__ */ jsx(SummaryChip, { label: `${comparison.fieldChangeCount} fields changed` }),
+							/* @__PURE__ */ jsx(SummaryChip, { label: `${comparison.sectionsAdded} sections added` }),
+							/* @__PURE__ */ jsx(SummaryChip, { label: `${comparison.sectionsRemoved} sections removed` })
+						]
+					})]
+				})
+			}), /* @__PURE__ */ jsx(ScrollArea, {
+				className: "dy-h-[calc(100vh-132px)]",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "dy-space-y-8 dy-p-6",
+					children: [!comparison.hasChanges && /* @__PURE__ */ jsx(Card, {
+						className: "dy-rounded-2xl dy-border-border/60",
+						children: /* @__PURE__ */ jsxs(CardContent, {
+							className: "dy-p-8 dy-text-center",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "dy-text-base dy-font-semibold dy-text-foreground",
+								children: "Draft matches the live site."
+							}), /* @__PURE__ */ jsx("p", {
+								className: "dy-mt-2 dy-text-sm dy-text-muted-foreground",
+								children: "There are no unpublished changes in this document right now."
+							})]
+						})
+					}), comparison.groups.map((group) => /* @__PURE__ */ jsxs("section", {
+						className: "dy-space-y-4",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "dy-flex dy-items-center dy-justify-between",
+							children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+								className: "dy-text-sm dy-font-bold dy-uppercase dy-tracking-[0.18em] dy-text-muted-foreground/70",
+								children: group.title
+							}), /* @__PURE__ */ jsxs("p", {
+								className: "dy-mt-1 dy-text-sm dy-text-muted-foreground",
+								children: [
+									group.cards.length,
+									" ",
+									group.cards.length === 1 ? "change" : "changes"
+								]
+							})] })
+						}), /* @__PURE__ */ jsx("div", {
+							className: "dy-space-y-4",
+							children: group.cards.map((card) => /* @__PURE__ */ jsx(ChangeCard, { card }, card.id))
+						})]
+					}, group.title))]
+				})
+			})]
+		})
+	});
+}
+function SummaryChip({ label }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "dy-rounded-full dy-border dy-border-border/60 dy-bg-muted/40 dy-px-3 dy-py-1.5 dy-text-xs dy-font-semibold dy-text-foreground/80",
+		children: label
+	});
+}
+function ChangeCard({ card }) {
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "dy-overflow-hidden dy-rounded-2xl dy-border-border/60",
+		children: [/* @__PURE__ */ jsx(CardHeader, {
+			className: "dy-gap-3 dy-border-b dy-border-border/50 dy-bg-muted/20 dy-px-5 dy-py-4",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "dy-flex dy-flex-wrap dy-items-center dy-justify-between dy-gap-3",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(CardTitle, {
+					className: "dy-text-base dy-font-semibold",
+					children: card.label
+				}), /* @__PURE__ */ jsx("p", {
+					className: "dy-mt-1 dy-text-xs dy-text-muted-foreground",
+					children: card.path
+				})] }), /* @__PURE__ */ jsx(Badge, {
+					variant: "outline",
+					className: cn("dy-rounded-full dy-border dy-px-2.5 dy-py-1 dy-text-[10px] dy-font-bold dy-uppercase dy-tracking-[0.18em]", statusBadgeClass(card.status)),
+					children: card.status
+				})]
+			})
+		}), /* @__PURE__ */ jsxs(CardContent, {
+			className: "dy-grid dy-gap-4 dy-p-5 lg:dy-grid-cols-2",
+			children: [/* @__PURE__ */ jsx(CompareSide, {
+				title: "Live",
+				text: card.liveText,
+				media: card.liveMedia
+			}), /* @__PURE__ */ jsx(CompareSide, {
+				title: "Draft",
+				text: card.draftText,
+				media: card.draftMedia,
+				emphasize: true
+			})]
+		})]
+	});
+}
+function CompareSide({ title, text, media, emphasize = false }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("dy-space-y-3 dy-rounded-2xl dy-border dy-p-4", emphasize ? "dy-border-primary/20 dy-bg-primary/5" : "dy-border-border/60 dy-bg-background"),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "dy-flex dy-items-center dy-justify-between",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "dy-text-[11px] dy-font-bold dy-uppercase dy-tracking-[0.18em] dy-text-muted-foreground/70",
+					children: title
+				})
+			}),
+			media && /* @__PURE__ */ jsx(MediaPreview, { media }),
+			/* @__PURE__ */ jsx("div", {
+				className: "dy-rounded-xl dy-bg-muted/35 dy-p-3",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "dy-whitespace-pre-wrap dy-break-words dy-text-sm dy-leading-6 dy-text-foreground/90",
+					children: text
+				})
+			})
+		]
+	});
+}
+function MediaPreview({ media }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dy-flex dy-gap-3",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "dy-flex dy-h-20 dy-w-20 dy-shrink-0 dy-items-center dy-justify-center dy-overflow-hidden dy-rounded-xl dy-border dy-border-border/60 dy-bg-muted/30",
+			children: media.url ? /* @__PURE__ */ jsx("img", {
+				src: media.url,
+				alt: media.alt || media.filename || "Media preview",
+				className: "dy-h-full dy-w-full dy-object-cover"
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "dy-text-[11px] dy-font-semibold dy-text-muted-foreground",
+				children: "No preview"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "dy-min-w-0 dy-space-y-1",
+			children: [
+				media.filename && /* @__PURE__ */ jsx("p", {
+					className: "dy-text-sm dy-font-semibold dy-text-foreground dy-break-all",
+					children: media.filename
+				}),
+				media.alt && /* @__PURE__ */ jsx("p", {
+					className: "dy-text-xs dy-text-muted-foreground",
+					children: media.alt
+				}),
+				media.url && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					className: "dy-h-auto dy-justify-start dy-p-0 dy-text-xs dy-text-primary hover:dy-bg-transparent hover:dy-text-primary/80",
+					onClick: () => window.open(media.url, "_blank", "noopener,noreferrer"),
+					children: "Open asset"
+				})
+			]
+		})]
+	});
+}
+//#endregion
 //#region src/hooks/useLayoutPreference.ts
 function useLayoutPreference({ key, defaultKeys }) {
 	const { client } = useDyrected();
@@ -12639,6 +13394,292 @@ function useLayoutPreference({ key, defaultKeys }) {
 	};
 }
 //#endregion
+//#region src/lib/draft-live-compare.ts
+var GROUP_ORDER = [
+	"Text changes",
+	"Media changes",
+	"Layout / sections changed",
+	"Settings changed"
+];
+var SYSTEM_KEYS = /* @__PURE__ */ new Set([
+	"id",
+	"_workflow",
+	"__workflow",
+	"__published",
+	"createdAt",
+	"createdBy",
+	"updatedAt",
+	"updatedBy",
+	"password",
+	"oldPassword",
+	"newPassword",
+	"confirmPassword"
+]);
+function buildDraftLiveComparison(args) {
+	const draft = args.draft ?? {};
+	const live = args.live ?? {};
+	const cards = [];
+	const counters = {
+		sectionsAdded: 0,
+		sectionsRemoved: 0
+	};
+	compareFields({
+		fields: args.fields,
+		draft,
+		live,
+		pathPrefix: "",
+		cards,
+		counters
+	});
+	const groups = GROUP_ORDER.map((title) => ({
+		title,
+		cards: cards.filter((card) => card.group === title)
+	})).filter((group) => group.cards.length > 0);
+	return {
+		hasPublishedVersion: !isStructurallyEmpty(live),
+		hasChanges: cards.length > 0,
+		fieldChangeCount: cards.length,
+		sectionsAdded: counters.sectionsAdded,
+		sectionsRemoved: counters.sectionsRemoved,
+		groups
+	};
+}
+function compareFields(args) {
+	const draftRecord = args.draft ?? {};
+	const liveRecord = args.live ?? {};
+	for (const field of args.fields) {
+		if (!field?.name || SYSTEM_KEYS.has(field.name) || field.admin?.hidden) continue;
+		const path = args.pathPrefix ? `${args.pathPrefix}.${field.name}` : field.name;
+		const draftValue = draftRecord[field.name];
+		const liveValue = liveRecord[field.name];
+		if (field.type === "object" && Array.isArray(field.fields)) {
+			compareFields({
+				fields: field.fields,
+				draft: asRecord(draftValue),
+				live: asRecord(liveValue),
+				pathPrefix: path,
+				cards: args.cards,
+				counters: args.counters
+			});
+			continue;
+		}
+		if (field.type === "array" || field.type === "blocks") {
+			compareArrayField({
+				field,
+				path,
+				draftValue,
+				liveValue,
+				cards: args.cards,
+				counters: args.counters
+			});
+			continue;
+		}
+		if (deepEqual(draftValue, liveValue)) continue;
+		args.cards.push(buildCard({
+			field,
+			label: field.label || humanizeKey(field.name),
+			path,
+			draftValue,
+			liveValue
+		}));
+	}
+}
+function compareArrayField(args) {
+	const draftItems = Array.isArray(args.draftValue) ? args.draftValue : [];
+	const liveItems = Array.isArray(args.liveValue) ? args.liveValue : [];
+	const max = Math.max(draftItems.length, liveItems.length);
+	for (let index = 0; index < max; index += 1) {
+		const draftItem = draftItems[index];
+		const liveItem = liveItems[index];
+		if (deepEqual(draftItem, liveItem)) continue;
+		const label = describeArrayItem(args.field, draftItem, liveItem, index);
+		const status = resolveStatus(liveItem, draftItem);
+		if (status === "Added") args.counters.sectionsAdded += 1;
+		if (status === "Removed") args.counters.sectionsRemoved += 1;
+		args.cards.push({
+			id: `${args.path}.${index}`,
+			group: "Layout / sections changed",
+			label,
+			status,
+			path: `${args.path}.${index}`,
+			kind: "array",
+			liveValue: liveItem,
+			draftValue: draftItem,
+			liveText: summarizeArrayItem(liveItem),
+			draftText: summarizeArrayItem(draftItem)
+		});
+	}
+}
+function buildCard(args) {
+	const kind = resolveKind(args.field, args.draftValue, args.liveValue);
+	const status = resolveStatus(args.liveValue, args.draftValue);
+	const liveMedia = kind === "media" ? extractMediaPreview(args.liveValue) : null;
+	const draftMedia = kind === "media" ? extractMediaPreview(args.draftValue) : null;
+	return {
+		id: args.path,
+		group: resolveGroup(args.field, kind),
+		label: args.label,
+		status,
+		path: args.path,
+		kind,
+		liveValue: args.liveValue,
+		draftValue: args.draftValue,
+		liveText: formatValueForPreview(args.liveValue, kind),
+		draftText: formatValueForPreview(args.draftValue, kind),
+		liveMedia,
+		draftMedia
+	};
+}
+function resolveKind(field, draftValue, liveValue) {
+	if (field.type === "richText" || field.type === "json") return "richText";
+	if (field.type === "image" || isMediaLike(draftValue) || isMediaLike(liveValue)) return "media";
+	if (field.type === "relationship" && (field.hasMany || Array.isArray(draftValue) || Array.isArray(liveValue))) return "array";
+	if (isLikelySettingField(field)) return "setting";
+	return "text";
+}
+function resolveGroup(field, kind) {
+	if (kind === "media") return "Media changes";
+	if (kind === "array") return "Layout / sections changed";
+	if (kind === "setting" || isLikelySettingField(field)) return "Settings changed";
+	return "Text changes";
+}
+function resolveStatus(liveValue, draftValue) {
+	if (isStructurallyEmpty(liveValue) && !isStructurallyEmpty(draftValue)) return "Added";
+	if (!isStructurallyEmpty(liveValue) && isStructurallyEmpty(draftValue)) return "Removed";
+	return "Changed";
+}
+function describeArrayItem(field, draftItem, liveItem, index) {
+	const sample = asRecord(draftItem) || asRecord(liveItem);
+	if (field.type === "blocks") {
+		const blockType = typeof sample?.blockType === "string" ? sample.blockType : null;
+		const blockLabel = blockType ? field.blocks?.find((block) => block.slug === blockType)?.labels?.singular ?? humanizeKey(blockType) : `Section ${index + 1}`;
+		return blockLabel.includes("section") || blockLabel.includes("Section") ? blockLabel : `${blockLabel} section`;
+	}
+	const title = extractTitle(sample);
+	if (title) return title;
+	return `${field.label?.replace(/s$/, "") || "Section"} ${index + 1}`;
+}
+function summarizeArrayItem(value) {
+	if (isStructurallyEmpty(value)) return "No content";
+	const record = asRecord(value);
+	if (!record) return formatValueForPreview(value, "text");
+	const summaryParts = [];
+	const title = extractTitle(record);
+	if (title) summaryParts.push(title);
+	const textSnippet = extractTextContent(record);
+	if (textSnippet && textSnippet !== title) summaryParts.push(textSnippet);
+	if (summaryParts.length === 0) {
+		const keys = Object.keys(record).filter((key) => !SYSTEM_KEYS.has(key));
+		if (keys.length > 0) summaryParts.push(`${keys.length} fields`);
+	}
+	return summaryParts.join(" • ") || "No content";
+}
+function formatValueForPreview(value, kind) {
+	if (isStructurallyEmpty(value)) return "Empty";
+	if (kind === "media") {
+		const media = extractMediaPreview(value);
+		return media?.filename || media?.url || media?.alt || "Media updated";
+	}
+	if (kind === "richText") return extractTextContent(value) || "Rich text updated";
+	if (Array.isArray(value)) return value.map((item) => summarizeArrayItem(item)).filter(Boolean).slice(0, 3).join("\n") || `${value.length} items`;
+	if (typeof value === "object") return extractTextContent(value) || JSON.stringify(value);
+	return String(value);
+}
+function extractMediaPreview(value) {
+	const record = asRecord(value);
+	if (!record) return null;
+	const filename = readString(record.filename) || readString(record.name);
+	const url = readString(record.url) || readString(record.src);
+	const alt = readString(record.alt) || readString(record.caption);
+	if (!filename && !url && !alt) return null;
+	return {
+		filename,
+		url,
+		alt
+	};
+}
+function isMediaLike(value) {
+	return !!extractMediaPreview(value);
+}
+function isLikelySettingField(field) {
+	const source = `${field.name ?? ""} ${field.label ?? ""}`.toLowerCase();
+	return [
+		"status",
+		"slug",
+		"seo",
+		"settings",
+		"theme",
+		"variant",
+		"url",
+		"path",
+		"template"
+	].some((token) => source.includes(token));
+}
+function extractTitle(value) {
+	if (!value) return "";
+	for (const key of [
+		"title",
+		"heading",
+		"headline",
+		"label",
+		"name",
+		"question",
+		"slug"
+	]) {
+		const next = readString(value[key]);
+		if (next) return next;
+	}
+	return "";
+}
+function extractTextContent(value) {
+	const parts = [];
+	collectText(value, parts);
+	return truncateText(parts.join(" ").replace(/\s+/g, " ").trim(), 220);
+}
+function collectText(value, parts) {
+	if (value === null || value === void 0) return;
+	if (typeof value === "string") {
+		const cleaned = value.replace(/<[^>]+>/g, " ").replace(/&nbsp;/g, " ").trim();
+		if (cleaned) parts.push(cleaned);
+		return;
+	}
+	if (typeof value === "number" || typeof value === "boolean") {
+		parts.push(String(value));
+		return;
+	}
+	if (Array.isArray(value)) {
+		for (const item of value) collectText(item, parts);
+		return;
+	}
+	if (typeof value === "object") for (const [key, nested] of Object.entries(value)) {
+		if (SYSTEM_KEYS.has(key) || key === "blockType") continue;
+		collectText(nested, parts);
+	}
+}
+function truncateText(value, max) {
+	if (value.length <= max) return value;
+	return `${value.slice(0, max - 1).trimEnd()}…`;
+}
+function asRecord(value) {
+	return value && typeof value === "object" && !Array.isArray(value) ? value : null;
+}
+function readString(value) {
+	return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+function deepEqual(left, right) {
+	return JSON.stringify(left) === JSON.stringify(right);
+}
+function isStructurallyEmpty(value) {
+	if (value === null || value === void 0) return true;
+	if (typeof value === "string") return value.trim().length === 0;
+	if (Array.isArray(value)) return value.length === 0;
+	if (typeof value === "object") return Object.keys(value).length === 0;
+	return false;
+}
+function humanizeKey(value) {
+	return value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().replace(/^./, (char) => char.toUpperCase());
+}
+//#endregion
 //#region src/pages/collections/edit-page.tsx
 function SortableFieldItem({ id, label, type, width, onChangeWidth }) {
 	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
@@ -12712,19 +13753,59 @@ function SortableFieldItem({ id, label, type, width, onChangeWidth }) {
 	});
 }
 /**
-* A single top-bar action: a compact square icon button with active / disabled /
-* busy states. Groups into the horizontal action cluster on the right of the
-* editor header (Storyblok-style top bar rather than a far-right vertical rail).
+* A single top-bar action. It stays icon-only on smaller screens and expands to
+* an icon + label button on desktop so action meaning is visible without relying
+* on tooltips.
 */
 function HeaderAction({ icon: Icon, label, onClick, active, disabled, busy, title, className }) {
-	return /* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		onClick,
 		disabled,
 		title: title || label,
 		"aria-label": title || label,
-		className: cn("dy-flex dy-h-9 dy-w-9 dy-items-center dy-justify-center dy-rounded-lg dy-transition-all", active ? "dy-bg-muted dy-text-primary" : "dy-text-muted-foreground hover:dy-bg-muted/60 hover:dy-text-foreground", disabled && "dy-opacity-50 dy-pointer-events-none", className),
-		children: busy ? /* @__PURE__ */ jsx("span", { className: "dy-h-4 dy-w-4 dy-animate-spin dy-rounded-full dy-border-2 dy-border-current dy-border-t-transparent" }) : /* @__PURE__ */ jsx(Icon, { className: "dy-h-4 dy-w-4" })
+		className: cn("dy-inline-flex dy-h-9 dy-w-9 lg:dy-w-auto dy-items-center dy-justify-center lg:dy-justify-start lg:dy-gap-2 dy-rounded-lg lg:dy-px-3 dy-transition-all", active ? "dy-bg-muted dy-text-primary" : "dy-text-muted-foreground hover:dy-bg-muted/60 hover:dy-text-foreground", disabled && "dy-opacity-50 dy-pointer-events-none", className),
+		children: [busy ? /* @__PURE__ */ jsx("span", { className: "dy-h-4 dy-w-4 dy-animate-spin dy-rounded-full dy-border-2 dy-border-current dy-border-t-transparent" }) : /* @__PURE__ */ jsx(Icon, { className: "dy-h-4 dy-w-4" }), /* @__PURE__ */ jsx("span", {
+			className: "dy-hidden lg:dy-inline dy-text-xs dy-font-medium",
+			children: label
+		})]
+	});
+}
+function DraftSaveStatusBadge({ state }) {
+	const presentation = (() => {
+		switch (state) {
+			case "dirty": return {
+				icon: Save,
+				label: "Unsaved changes",
+				className: "dy-text-amber-700 dy-bg-amber-50 dy-border-amber-200"
+			};
+			case "saving": return {
+				icon: Loader2,
+				label: "Saving...",
+				className: "dy-text-sky-700 dy-bg-sky-50 dy-border-sky-200"
+			};
+			case "saved":
+			case "idle": return {
+				icon: Save,
+				label: "Changes saved",
+				className: "dy-text-emerald-700 dy-bg-emerald-50 dy-border-emerald-200"
+			};
+			case "conflict": return {
+				icon: AlertCircle,
+				label: "Refresh required",
+				className: "dy-text-rose-700 dy-bg-rose-50 dy-border-rose-200"
+			};
+			default: return {
+				icon: AlertCircle,
+				label: "Save failed",
+				className: "dy-text-rose-700 dy-bg-rose-50 dy-border-rose-200"
+			};
+		}
+	})();
+	const Icon = presentation.icon;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("dy-inline-flex dy-items-center dy-gap-1.5 dy-rounded-full dy-border dy-px-2.5 dy-py-1 dy-text-[11px] dy-font-semibold", presentation.className),
+		children: [/* @__PURE__ */ jsx(Icon, { className: cn("dy-h-3.5 dy-w-3.5", state === "saving" && "dy-animate-spin") }), /* @__PURE__ */ jsx("span", { children: presentation.label })]
 	});
 }
 /**
@@ -12796,6 +13877,11 @@ function EditEntryPage() {
 	const [mobilePreview, setMobilePreview] = useState(false);
 	const [isDirty, setIsDirty] = useState(false);
 	const [previewData, setPreviewData] = useState(null);
+	const [workflowAutosaveState, setWorkflowAutosaveState] = useState("idle");
+	const [workflowTransitionPending, setWorkflowTransitionPending] = useState(false);
+	const [compareSheetOpen, setCompareSheetOpen] = useState(false);
+	const formEngineRef = useRef(null);
+	const draftSavePromiseRef = useRef(null);
 	const isEdit = !!id;
 	const [isConfiguringView, setIsConfiguringView] = useState(false);
 	const { data: schemas } = useQuery({
@@ -12878,16 +13964,6 @@ function EditEntryPage() {
 		window.addEventListener("beforeunload", handleBeforeUnload);
 		return () => window.removeEventListener("beforeunload", handleBeforeUnload);
 	}, [isDirty]);
-	useEffect(() => {
-		const handleSave = (e) => {
-			if ((e.metaKey || e.ctrlKey) && e.key === "s") {
-				e.preventDefault();
-				document.getElementById("dyrected-form-submit")?.click();
-			}
-		};
-		window.addEventListener("keydown", handleSave);
-		return () => window.removeEventListener("keydown", handleSave);
-	}, []);
 	const schemaSlug = schema?.slug;
 	const schemaPreviewUrl = schema?.admin?.previewUrl;
 	const syncShowPreview = useState(() => (next) => {
@@ -12901,18 +13977,6 @@ function EditEntryPage() {
 		schemaPreviewUrl,
 		syncShowPreview
 	]);
-	const hasWorkflow = !!schema?.workflow;
-	const syncShowWorkflow = useState(() => (next) => {
-		setActiveTab((prev) => next ? "workflow" : prev === "workflow" ? "edit" : prev);
-	})[0];
-	useEffect(() => {
-		if (!hasWorkflow || schemaPreviewUrl) return;
-		syncShowWorkflow(true);
-	}, [
-		hasWorkflow,
-		schemaPreviewUrl,
-		syncShowWorkflow
-	]);
 	const { data: entry, isLoading: isEntryLoading } = useQuery({
 		queryKey: [
 			"entry",
@@ -12954,7 +14018,7 @@ function EditEntryPage() {
 	const isSelf = !!user && !!id && (user.id === id || user.sub === id);
 	const passwordChangeMode = schema?.auth ? isSelf ? "self" : isAdminUser ? "admin" : null : null;
 	const saveMutation = useMutation({
-		mutationFn: async (data) => {
+		mutationFn: async ({ data }) => {
 			const { oldPassword, newPassword, confirmPassword, ...rest } = data;
 			const results = {};
 			if (isEdit) {
@@ -12970,7 +14034,7 @@ function EditEntryPage() {
 			} else results.doc = await client.collection(slug).create(rest);
 			return results;
 		},
-		onSuccess: (results) => {
+		onSuccess: (results, variables) => {
 			setIsDirty(false);
 			queryClient.invalidateQueries({ queryKey: ["collection", slug] });
 			if (isEdit) queryClient.invalidateQueries({ queryKey: [
@@ -12978,45 +14042,26 @@ function EditEntryPage() {
 				slug,
 				id
 			] });
-			toast.success(isEdit ? "Entry updated successfully" : "Entry created successfully", { description: `${schema?.labels?.singular || schema?.slug} has been saved.` });
-			if (results.passwordChanged) toast.success("Password changed successfully");
+			if (variables.mode === "manual") toast.success(isEdit ? "Entry updated successfully" : "Entry created successfully", { description: `${schema?.labels?.singular || schema?.slug} has been saved.` });
+			if (results.passwordChanged && variables.mode === "manual") toast.success("Password changed successfully");
 			const doc = results.doc;
 			if (!isEdit && doc?.id) navigate(`/collections/${slug}/edit/${doc.id}`, { replace: true });
 		},
-		onError: (error) => {
+		onError: (error, variables) => {
+			if (variables.mode === "autosave") return;
 			toast.error("Failed to save entry", { description: error.message || "An unexpected error occurred." });
 		}
 	});
-	const [sendingReset, setSendingReset] = useState(false);
-	const handleSendResetLink = async () => {
-		if (!entry?.email) return;
-		setSendingReset(true);
-		try {
-			await client.collection(slug).sendResetLink(entry.email);
-			toast.success("Reset link sent", { description: `A password reset email has been sent to ${entry.email}.` });
-		} catch (err) {
-			toast.error("Failed to send reset link", { description: err instanceof Error ? err.message : "An unexpected error occurred." });
-		} finally {
-			setSendingReset(false);
-		}
-	};
-	if (!schema) return /* @__PURE__ */ jsx("div", { children: "Collection not found" });
-	if (isEdit && isEntryLoading) return /* @__PURE__ */ jsx("div", { children: "Loading entry..." });
-	const workflowConfig = schema.workflow ?? null;
+	const workflowConfig = schema?.workflow ?? null;
 	const workflowMeta = isEdit && entry ? entry._workflow ?? null : null;
 	const hasStatus = schema?.fields.some((f) => f.name === "status");
-	const currentStatus = entry?.status || "draft";
-	const workflowState = workflowConfig && workflowMeta ? workflowConfig.states?.find((s) => s.name === workflowMeta.state) : null;
-	const isPublished = workflowState ? !!workflowState.published : currentStatus === "published";
-	const statusBadgeLabel = workflowState ? workflowState.label || workflowState.name : currentStatus === "published" ? "Published" : currentStatus === "draft" ? "Draft" : String(currentStatus);
-	const workflowBadgePresentation = workflowState ? getWorkflowBadgePresentation(workflowState.color) : {
-		className: isPublished ? WORKFLOW_BADGE_COLORS.success : WORKFLOW_BADGE_COLORS.warning,
-		style: void 0
-	};
+	const workflowState = resolveWorkflowState(workflowConfig, workflowMeta);
+	const publishingStatus = resolvePublishingStatus(schema, entry ?? {});
+	const workflowStagePresentation = workflowState && publishingStatus?.workflowStateLabel ? getWorkflowBadgePresentation(workflowState.color) : null;
 	const showStatusBadge = workflowConfig ? !!workflowMeta : hasStatus;
 	const siteUrl = getSiteUrl(schemas?.admin?.siteUrl);
-	const previewUrl = resolvePreviewUrl(schema.admin?.previewUrl, previewData || entry, siteUrl);
-	const readAccess = schema.access?.read;
+	const previewUrl = resolvePreviewUrl(schema?.admin?.previewUrl, previewData || entry, siteUrl);
+	const readAccess = (schema?.access)?.read;
 	let canRead = true;
 	if (readAccess === false) canRead = false;
 	else if (typeof readAccess === "string") try {
@@ -13027,27 +14072,7 @@ function EditEntryPage() {
 	} catch (e) {
 		console.warn("Read access eval failed:", e);
 	}
-	if (!canRead) return /* @__PURE__ */ jsx("div", {
-		className: "dy-flex dy-items-center dy-justify-center dy-h-[calc(100vh-200px)]",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "dy-text-center dy-space-y-3",
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "dy-p-3 dy-bg-destructive/10 dy-text-destructive dy-rounded-full dy-w-12 dy-h-12 dy-mx-auto dy-flex dy-items-center dy-justify-center",
-					children: /* @__PURE__ */ jsx(Archive, { className: "dy-h-6 dy-w-6" })
-				}),
-				/* @__PURE__ */ jsx("h3", {
-					className: "dy-text-lg dy-font-bold",
-					children: "Access Denied"
-				}),
-				/* @__PURE__ */ jsx("p", {
-					className: "dy-text-sm dy-text-muted-foreground",
-					children: "You do not have permission to view this entry."
-				})
-			]
-		})
-	});
-	const createAccess = schema.access?.create;
+	const createAccess = (schema?.access)?.create;
 	let canCreate = true;
 	if (createAccess === false) canCreate = false;
 	else if (typeof createAccess === "string") try {
@@ -13055,7 +14080,7 @@ function EditEntryPage() {
 	} catch (e) {
 		console.warn("Create access eval failed:", e);
 	}
-	const updateAccess = schema.access?.update;
+	const updateAccess = (schema?.access)?.update;
 	let canUpdate = true;
 	if (updateAccess === false) canUpdate = false;
 	else if (typeof updateAccess === "string") try {
@@ -13066,7 +14091,7 @@ function EditEntryPage() {
 	} catch (e) {
 		console.warn("Update access eval failed:", e);
 	}
-	const auditAccess = schema.access?.readAudit ?? readAccess;
+	const auditAccess = (schema?.access)?.readAudit ?? readAccess;
 	let canReadAudit = true;
 	if (auditAccess === false) canReadAudit = false;
 	else if (typeof auditAccess === "string") try {
@@ -13078,11 +14103,158 @@ function EditEntryPage() {
 		canReadAudit = false;
 	}
 	const workflowAvailable = !!(workflowConfig && isEdit && workflowMeta);
+	const liveSnapshot = entry?.__published && typeof entry.__published === "object" ? entry.__published : null;
+	const compareToLiveEnabled = workflowAvailable && !!liveSnapshot;
+	const compareToLiveReason = !workflowAvailable ? "Workflow is not enabled for this entry." : liveSnapshot ? null : "No live snapshot exists yet. Publish this entry once to compare future draft changes.";
+	const draftLiveComparison = useMemo(() => buildDraftLiveComparison({
+		fields: orderedFields,
+		draft: previewData || entry || null,
+		live: liveSnapshot
+	}), [
+		entry,
+		liveSnapshot,
+		orderedFields,
+		previewData
+	]);
+	const workflowAutosaveConfig = resolveWorkflowAutosaveSettings(schema);
+	const workflowAutosaveEnabled = Boolean(isEdit && workflowAutosaveConfig.enabled && (schema?.workflow || schema?.drafts) && canUpdate);
+	const documentLabel = useMemo(() => entry ? resolveDocumentTitle({
+		entry,
+		collection: schema,
+		collections: schemas?.collections
+	}) : void 0, [
+		entry,
+		schema,
+		schemas?.collections
+	]);
+	const persistDraft = useCallback((data, mode) => {
+		const promise = saveMutation.mutateAsync({
+			data,
+			mode
+		});
+		draftSavePromiseRef.current = promise.finally(() => {
+			if (draftSavePromiseRef.current === promise) draftSavePromiseRef.current = null;
+		});
+		return promise;
+	}, [saveMutation]);
+	const handleManualSave = useCallback((data) => {
+		return persistDraft(data, "manual");
+	}, [persistDraft]);
+	const handleWorkflowAutosave = useCallback(async (data) => {
+		await persistDraft(data, "autosave");
+	}, [persistDraft]);
+	const autosaveConfig = useMemo(() => {
+		if (!workflowAutosaveEnabled) return void 0;
+		return {
+			enabled: true,
+			delayMs: workflowAutosaveConfig.delayMs,
+			onSave: handleWorkflowAutosave,
+			onStatusChange: setWorkflowAutosaveState
+		};
+	}, [
+		handleWorkflowAutosave,
+		workflowAutosaveConfig.delayMs,
+		workflowAutosaveEnabled
+	]);
+	const showWorkflowAutosaveStatus = workflowAutosaveEnabled && activeTab === "edit";
+	const showManualSaveChrome = !workflowAutosaveEnabled;
 	const showLivePreview = activeTab === "edit" && showPreview && !!previewUrl;
+	const resolveTransitionContextFromDoc = useCallback((doc) => {
+		const resolvedDocumentId = String(doc?.id ?? id ?? "");
+		const resolvedWorkflowMeta = doc?._workflow ?? workflowMeta ?? null;
+		const resolvedDocumentLabel = doc ? resolveDocumentTitle({
+			entry: doc,
+			collection: schema,
+			collections: schemas?.collections
+		}) : documentLabel;
+		return {
+			documentIds: resolvedDocumentId ? [resolvedDocumentId] : [],
+			documentLabels: resolvedDocumentId ? { [resolvedDocumentId]: resolvedDocumentLabel } : void 0,
+			expectedRevisions: resolvedDocumentId && typeof resolvedWorkflowMeta?.revision === "number" ? { [resolvedDocumentId]: resolvedWorkflowMeta.revision } : void 0,
+			invalidateQueryKeys: resolvedDocumentId ? [
+				[
+					"entry",
+					slug,
+					resolvedDocumentId
+				],
+				["collection", slug],
+				[
+					"workflow-history",
+					slug,
+					resolvedDocumentId
+				]
+			] : [["collection", slug]]
+		};
+	}, [
+		documentLabel,
+		id,
+		schema,
+		schemas?.collections,
+		slug,
+		workflowMeta
+	]);
+	const saveCurrentDraftNow = useCallback(async (mode = "manual") => {
+		if (draftSavePromiseRef.current) await draftSavePromiseRef.current;
+		if (!formEngineRef.current) throw new Error("The editor is not ready yet.");
+		const result = await formEngineRef.current.submitCurrentDraft();
+		const savedDoc = result?.doc ?? null;
+		return {
+			result,
+			context: resolveTransitionContextFromDoc(savedDoc),
+			mode
+		};
+	}, [resolveTransitionContextFromDoc]);
+	const prepareWorkflowTransition = useCallback(async (_transition) => {
+		if (draftSavePromiseRef.current) await draftSavePromiseRef.current;
+		if (formEngineRef.current?.isDirty()) {
+			const { context } = await saveCurrentDraftNow("transition");
+			return context;
+		}
+		return resolveTransitionContextFromDoc(entry ?? null);
+	}, [
+		entry,
+		resolveTransitionContextFromDoc,
+		saveCurrentDraftNow
+	]);
+	const [sendingReset, setSendingReset] = useState(false);
+	const handleSendResetLink = async () => {
+		if (!entry?.email) return;
+		setSendingReset(true);
+		try {
+			await client.collection(slug).sendResetLink(entry.email);
+			toast.success("Reset link sent", { description: `A password reset email has been sent to ${entry.email}.` });
+		} catch (err) {
+			toast.error("Failed to send reset link", { description: err instanceof Error ? err.message : "An unexpected error occurred." });
+		} finally {
+			setSendingReset(false);
+		}
+	};
+	if (!schema) return /* @__PURE__ */ jsx("div", { children: "Collection not found" });
+	if (isEdit && isEntryLoading) return /* @__PURE__ */ jsx("div", { children: "Loading entry..." });
+	if (!canRead) return /* @__PURE__ */ jsx("div", {
+		className: "dy-flex dy-items-center dy-justify-center dy-h-[calc(100vh-200px)]",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "dy-text-center dy-space-y-3",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "dy-p-3 dy-bg-destructive/10 dy-text-destructive dy-rounded-full dy-w-12 dy-h-12 dy-mx-auto dy-flex dy-items-center dy-justify-center",
+					children: /* @__PURE__ */ jsx(Archive, { className: "dy-h-6 dy-w-6" })
+				}),
+				/* @__PURE__ */ jsx("h3", {
+					className: "dy-text-lg dy-font-bold",
+					children: "Access Denied"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "dy-text-sm dy-text-muted-foreground",
+					children: "You do not have permission to view this entry."
+				})
+			]
+		})
+	});
 	const docsToDisplay = debouncedSearchQuery ? siblingEntries?.docs || [] : siblingEntries?.docs?.filter((d) => String(d.id) !== id).slice(0, 4) || [];
-	return /* @__PURE__ */ jsx(NestedEditorProvider, {
+	return /* @__PURE__ */ jsxs(NestedEditorProvider, {
 		drillInEnabled: !!showLivePreview,
-		children: /* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsxs("div", {
 			className: cn("dy-flex dy-flex-col dy--mt-6 dy--mb-6 dy--mx-4 lg:dy--mt-10 lg:dy--mb-10 lg:dy--mx-6", showLivePreview ? "dy-h-screen" : ""),
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "dy-flex dy-flex-wrap dy-shrink-0 dy-items-center dy-gap-2 dy-border-b dy-border-border/50 dy-bg-background dy-px-3 dy-py-2",
@@ -13147,12 +14319,12 @@ function EditEntryPage() {
 						})] }) : /* @__PURE__ */ jsxs("h1", {
 							className: "dy-text-base dy-font-serif dy-font-bold dy-tracking-tight dy-text-foreground dy-truncate",
 							children: ["New ", schema?.labels?.singular || schema?.slug]
-						}), showStatusBadge && /* @__PURE__ */ jsx(Badge, {
-							className: cn("dy-px-2 dy-py-0 dy-rounded-full dy-text-[10px] dy-font-bold dy-uppercase dy-tracking-wider dy-shrink-0", workflowBadgePresentation.className),
-							style: workflowBadgePresentation.style,
+						}), showStatusBadge && /* @__PURE__ */ jsxs(Fragment, { children: [publishingStatus?.workflowStateLabel && workflowStagePresentation && /* @__PURE__ */ jsx(Badge, {
+							className: cn("dy-px-2 dy-py-0 dy-rounded-full dy-text-[10px] dy-font-semibold dy-tracking-wide dy-shrink-0", workflowStagePresentation.className),
+							style: workflowStagePresentation.style,
 							variant: "outline",
-							children: statusBadgeLabel
-						})]
+							children: publishingStatus.workflowStateLabel
+						}), showWorkflowAutosaveStatus && /* @__PURE__ */ jsx(DraftSaveStatusBadge, { state: workflowAutosaveState })] })]
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "dy-ml-auto dy-flex dy-items-center dy-gap-1",
@@ -13180,9 +14352,9 @@ function EditEntryPage() {
 							}),
 							workflowAvailable && /* @__PURE__ */ jsx(HeaderAction, {
 								icon: Workflow,
-								label: "Workflow",
+								label: "Workflow details",
 								active: activeTab === "workflow",
-								title: activeTab === "workflow" ? "Hide workflow transitions" : "Show workflow transitions",
+								title: activeTab === "workflow" ? "Hide workflow details" : "Show workflow details",
 								onClick: () => setActiveTab((tab) => tab === "workflow" ? "edit" : "workflow")
 							}),
 							schema?.audit && isEdit && canReadAudit && /* @__PURE__ */ jsx(HeaderAction, {
@@ -13250,12 +14422,35 @@ function EditEntryPage() {
 									})]
 								})] })]
 							})] }),
-							(isEdit ? canUpdate : canCreate) && activeTab === "edit" && /* @__PURE__ */ jsxs("div", {
+							(isEdit ? canUpdate : canCreate) && activeTab === "edit" && /* @__PURE__ */ jsxs(Fragment, { children: [workflowAvailable && /* @__PURE__ */ jsx(WorkflowTransitionSplitButton, {
+								collection: slug,
+								documentId: id,
+								documentLabel,
+								workflowConfig,
+								workflowMeta,
+								onPendingChange: setWorkflowTransitionPending,
+								onSaveDraft: () => saveCurrentDraftNow("manual").then(() => void 0),
+								saveDraftPending: saveMutation.isPending,
+								prepareTransition: prepareWorkflowTransition,
+								invalidateQueryKeys: [
+									[
+										"entry",
+										slug,
+										id
+									],
+									["collection", slug],
+									[
+										"workflow-history",
+										slug,
+										id
+									]
+								]
+							}), showManualSaveChrome && /* @__PURE__ */ jsxs("div", {
 								className: "dy-hidden md:dy-flex dy-items-center",
 								children: [/* @__PURE__ */ jsx("div", { className: "dy-mx-1 dy-h-6 dy-w-px dy-bg-border/60" }), /* @__PURE__ */ jsx(Button, {
 									size: "sm",
 									className: "dy-h-9 dy-rounded-lg dy-px-4 dy-font-bold dy-bg-primary dy-text-primary-foreground hover:dy-bg-primary/90 dy-shadow-sm dy-shrink-0",
-									onClick: () => document.getElementById("dyrected-form-submit")?.click(),
+									onClick: () => void saveCurrentDraftNow("manual"),
 									disabled: saveMutation.isPending,
 									title: isEdit ? "Save Changes (⌘S)" : "Create Entry (⌘S)",
 									children: saveMutation.isPending ? /* @__PURE__ */ jsxs("span", {
@@ -13266,7 +14461,7 @@ function EditEntryPage() {
 										children: [/* @__PURE__ */ jsx(Save, { className: "dy-h-3.5 dy-w-3.5" }), isEdit ? "Save" : "Create"]
 									})
 								})]
-							})
+							})] })
 						]
 					})
 				]
@@ -13298,7 +14493,13 @@ function EditEntryPage() {
 									collection: slug,
 									documentId: id,
 									workflowMeta,
-									workflowConfig
+									workflowConfig,
+									compareToLiveEnabled,
+									compareToLiveReason,
+									onCompareToLive: () => setCompareSheetOpen(true),
+									onSaveDraft: () => saveCurrentDraftNow("manual").then(() => void 0),
+									saveDraftPending: saveMutation.isPending,
+									prepareTransition: prepareWorkflowTransition
 								})
 							}),
 							activeTab === "audit" && /* @__PURE__ */ jsx("div", {
@@ -13475,19 +14676,21 @@ function EditEntryPage() {
 											queryParamsDefaults[key] = value;
 										});
 										return /* @__PURE__ */ jsx(FormEngine, {
+											ref: formEngineRef,
 											collection: slug,
 											fields: orderedFields,
 											defaultValues: isEdit ? entry : {
 												...queryParamsDefaults,
 												...entry
 											},
-											onSubmit: (data) => saveMutation.mutate(data),
+											onSubmit: handleManualSave,
+											autosave: autosaveConfig,
 											onDataChange: (newData) => setPreviewData({
 												...entry,
 												...newData
 											}),
 											onChange: (dirty) => setIsDirty(dirty),
-											isLoading: saveMutation.isPending || isPreferenceLoading,
+											isLoading: saveMutation.isPending || workflowTransitionPending || isPreferenceLoading,
 											submitLabel: isEdit ? "Save Changes" : "Create Entry",
 											hideSubmit: true,
 											readOnly: isEdit ? !canUpdate : !canCreate,
@@ -13502,7 +14705,7 @@ function EditEntryPage() {
 										form: "dyrected-edit-form",
 										className: "dy-hidden"
 									}),
-									(isDirty || !isEdit) && (isEdit ? canUpdate : canCreate) && /* @__PURE__ */ jsx("div", {
+									showManualSaveChrome && (isDirty || !isEdit) && (isEdit ? canUpdate : canCreate) && /* @__PURE__ */ jsx("div", {
 										className: "dy-hidden md:dy-block dy-sticky dy-bottom-0 dy-left-0 dy-right-0 dy-z-20 dy-pointer-events-none",
 										children: /* @__PURE__ */ jsx("div", {
 											className: "dy-pointer-events-auto dy-mx-auto dy-max-w-2xl dy-px-4 dy-pb-4",
@@ -13514,7 +14717,7 @@ function EditEntryPage() {
 												}), /* @__PURE__ */ jsx(Button, {
 													size: "sm",
 													className: "dy-h-9 dy-px-5 dy-rounded-xl dy-font-bold dy-bg-primary dy-text-primary-foreground hover:dy-bg-primary/90 dy-shadow-sm dy-shrink-0",
-													onClick: () => document.getElementById("dyrected-form-submit")?.click(),
+													onClick: () => void saveCurrentDraftNow("manual"),
 													disabled: saveMutation.isPending,
 													children: saveMutation.isPending ? /* @__PURE__ */ jsxs("div", {
 														className: "dy-flex dy-items-center dy-gap-2",
@@ -13527,11 +14730,11 @@ function EditEntryPage() {
 											})
 										})
 									}),
-									(isEdit ? canUpdate : canCreate) && /* @__PURE__ */ jsx("div", {
+									showManualSaveChrome && (isEdit ? canUpdate : canCreate) && /* @__PURE__ */ jsx("div", {
 										className: "md:dy-hidden dy-sticky dy-bottom-0 dy-left-0 dy-right-0 dy-z-20 dy-border-t dy-border-border dy-bg-background/95 dy-backdrop-blur-sm dy-px-4 dy-py-3",
 										children: /* @__PURE__ */ jsx(Button, {
 											className: "dy-w-full dy-h-11 dy-rounded-xl dy-font-bold dy-bg-primary dy-text-primary-foreground hover:dy-bg-primary/90 dy-shadow-sm",
-											onClick: () => document.getElementById("dyrected-form-submit")?.click(),
+											onClick: () => void saveCurrentDraftNow("manual"),
 											disabled: saveMutation.isPending || !(isDirty || !isEdit),
 											children: saveMutation.isPending ? /* @__PURE__ */ jsxs("span", {
 												className: "dy-flex dy-items-center dy-gap-2",
@@ -13548,7 +14751,11 @@ function EditEntryPage() {
 					})
 				})]
 			})]
-		}, id || "new")
+		}, id || "new"), workflowAvailable && compareToLiveEnabled && /* @__PURE__ */ jsx(DraftLiveCompareSheet, {
+			open: compareSheetOpen,
+			onOpenChange: setCompareSheetOpen,
+			comparison: draftLiveComparison
+		})]
 	});
 }
 function AuditPanel({ collection, documentId }) {
@@ -13679,44 +14886,6 @@ function AuditPanel({ collection, documentId }) {
 	});
 }
 //#endregion
-//#region src/components/ui/card.tsx
-var Card = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
-	ref,
-	className: cn("dy-rounded-lg dy-border dy-bg-card dy-text-card-foreground dy-shadow-sm", className),
-	...props
-}));
-Card.displayName = "Card";
-var CardHeader = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
-	ref,
-	className: cn("dy-flex dy-flex-col dy-space-y-1.5 dy-p-6", className),
-	...props
-}));
-CardHeader.displayName = "CardHeader";
-var CardTitle = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
-	ref,
-	className: cn("dy-text-2xl dy-font-semibold dy-leading-none dy-tracking-tight", className),
-	...props
-}));
-CardTitle.displayName = "CardTitle";
-var CardDescription = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
-	ref,
-	className: cn("dy-text-sm dy-text-muted-foreground", className),
-	...props
-}));
-CardDescription.displayName = "CardDescription";
-var CardContent = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
-	ref,
-	className: cn("dy-p-6 dy-pt-0", className),
-	...props
-}));
-CardContent.displayName = "CardContent";
-var CardFooter = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
-	ref,
-	className: cn("dy-flex dy-items-center dy-p-6 dy-pt-0", className),
-	...props
-}));
-CardFooter.displayName = "CardFooter";
-//#endregion
 //#region src/components/ui/aspect-ratio.tsx
 var AspectRatio = AspectRatioPrimitive.Root;
 //#endregion
@@ -14996,7 +16165,7 @@ function SetupPromptUI({ config }) {
 		setCopied(true);
 		window.setTimeout(() => setCopied(false), 1800);
 	}
-	const currentVersion = "2.5.65";
+	const currentVersion = "2.6.0";
 	const [latestVersion, setLatestVersion] = useState(() => {
 		if (typeof window === "undefined") return null;
 		return localStorage.getItem("dyrected_latest_release");