camox 0.48.0 → 0.52.1

package/dist/features/studio/components/ReviewDraftSheet.js

@@ -2,27 +2,33 @@ import { useDraftScope } from "../../../lib/draft-scope.js";
 import { reads, useReadQuery } from "../../../lib/studio-reads.js";
 import { cn } from "../../../lib/utils.js";
 import { draftMutations } from "../../../lib/queries.js";
+import { previewStore } from "../../preview/previewStore.js";
 import { localeLabel } from "../localeOptions.js";
 import { draftLabel, plural, timeAgo } from "../draftLabel.js";
 import { useRenameDraft } from "./RenameDraftDialog.js";
+import { useShowInCanvas } from "../showInCanvas.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
-import { CONFLICTS_CHANGED_ERROR, TRANSLATIONS_PENDING_ERROR } from "@camox/api-contract/drafts";
+import { CONFLICTS_CHANGED_ERROR, REVISION_CHANGED_ERROR, TRANSLATIONS_PENDING_ERROR } from "@camox/api-contract/drafts";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMutation } from "@tanstack/react-query";
 import { Button } from "@camox/ui/button";
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from "@camox/ui/sheet";
-import { Blocks, ChevronRight, CircleCheck, Database, FileText, History, Image, Info, Languages, OctagonX, PanelsTopLeft, Shapes, Trash2, TriangleAlert, Unlink } from "lucide-react";
+import { CircleCheck, OctagonX, Replace, Trash2, TriangleAlert, Unlink } from "lucide-react";
 import { toast } from "@camox/ui/toaster";
+import { Skeleton } from "@camox/ui/skeleton";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 import { Spinner } from "@camox/ui/spinner";
-import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger } from "@camox/ui/accordion";
 
 //#region src/features/studio/components/ReviewDraftSheet.tsx
 const dateFormat = new Intl.DateTimeFormat(void 0, {
 	month: "short",
 	day: "numeric"
 });
+const listFormat = new Intl.ListFormat("en", {
+	style: "long",
+	type: "conjunction"
+});
 /** Where a subject sits: its page or layout, or the files, which belong to neither. */
 function ownerName(owner, entity) {
 	if (!owner) return entity === "file" ? "Files" : "Elsewhere";
@@ -39,75 +45,52 @@ function problemPlace(problem) {
 	if (!problem.owner && problem.entity !== "file") return null;
 	return ownerName(problem.owner, problem.entity);
 }
-const groupKind = ({ owner, entity }) => {
-	if (owner) return owner.kind;
-	if (entity === "file") return "files";
-	return entity === "locale" ? "languages" : "elsewhere";
-};
-/** Where a change is listed: its page or layout, the files, or the languages for a locale. */
-const placeOf = (change) => change.entity === "locale" ? "Languages" : ownerName(change.owner, change.entity);
-/** What a change is listed as: a locale added or removed by its name, anything else its label. */
-const changeLabel = (change) => change.entity === "locale" ? localeLabel(change.label) : change.label;
-const GROUPS = {
-	page: {
-		rank: 0,
-		icon: FileText
-	},
-	layout: {
-		rank: 1,
-		icon: PanelsTopLeft
-	},
-	syncedBlock: {
-		rank: 2,
-		icon: Blocks
-	},
-	collection: {
-		rank: 3,
-		icon: Database
-	},
-	files: {
-		rank: 4,
-		icon: Image
-	},
-	languages: {
-		rank: 5,
-		icon: Languages
-	},
-	elsewhere: {
-		rank: 6,
-		icon: Shapes
-	}
-};
-const CHANGES = {
-	created: {
-		sign: "+",
-		className: "text-green-600 dark:text-green-400"
-	},
-	changed: {
-		sign: "~",
-		className: "text-muted-foreground"
-	},
-	deleted: {
-		sign: "−",
-		className: "text-destructive"
+/**
+* Where a conflict or lost change sits: its page, layout or collection, and its locale when the
+* draft's change is in another than the default.
+*/
+function placeInLocale(subject, defaultLocale) {
+	const place = ownerName(subject.owner, subject.entity);
+	if (!subject.locale || subject.locale === defaultLocale) return place;
+	return `${place} · ${localeLabel(subject.locale)}`;
+}
+/** Where in the Canvas a blocker is, or null when it sits on no page, like a definition. */
+function blockerTarget(problem) {
+	if (problem.owner?.kind !== "page") return null;
+	return {
+		pageId: problem.owner.id,
+		locale: problem.locale,
+		blockId: problem.blockId,
+		itemId: problem.entity === "repeatableItem" ? problem.id : null,
+		field: problem.blockId && problem.field ? {
+			name: problem.field,
+			kind: problem.fieldKind
+		} : null
+	};
+}
+const isImage = (problem) => problem.fieldKind === "Image" || problem.fieldKind === "ImageList";
+/** What a blocker's action does, named by the fix where it's obvious. */
+function blockerActionLabel(problem) {
+	switch (problem.code) {
+		case "emptyRequiredFile": return isImage(problem) ? "Choose an image" : "Choose a file";
+		case "missingFile":
+		case "unacceptedFileType": return isImage(problem) ? "Choose another image" : "Choose another file";
+		case "emptyRequiredReference": return "Choose a record";
+		case "danglingReference": return "Choose another record";
+		case "danglingPageLink": return "Fix the link";
+		case "duplicatePath": return "Fix the path";
+		case "missingMetaTitle": return "Write a meta title";
+		default: return "Show in Canvas";
 	}
-};
+}
 const TONES = {
 	danger: {
 		card: "border-destructive/30 bg-destructive/5",
-		icon: "bg-destructive/10 text-destructive"
+		icon: "text-destructive"
 	},
 	warning: {
 		card: "border-amber-500/30 bg-amber-500/5",
-		icon: "bg-amber-500/15 text-amber-600 dark:text-amber-400"
-	},
-	success: {
-		card: "border-green-500/30 bg-green-500/5",
-		icon: "bg-green-500/15 text-green-600 dark:text-green-400"
-	},
-	neutral: {
-		card: "bg-muted/40",
-		icon: "bg-muted text-muted-foreground"
+		icon: "text-amber-600 dark:text-amber-400"
 	}
 };
 /** A conflict as Live's version of an entity in a locale, to tell a new one from those shown. */
@@ -117,697 +100,868 @@ const conflictKey = (conflict) => JSON.stringify([
 	conflict.locale,
 	conflict.liveVersion
 ]);
-/** Who made Live's version of a conflicting entity: a member, a release, or nobody known. */
-function changedBy(conflict) {
-	if (conflict.release) return " by a release";
-	if (conflict.publishedBy) return ` by ${conflict.publishedBy.name}`;
-	return "";
-}
 const LOST_REASONS = {
-	parentGone: "What it belongs to is gone from Live and from this draft, so it's dropped.",
-	writtenAfterDeletion: "This draft deletes what it was added to, so it goes too."
+	parentGone: "What it belongs to is gone from Live and from this draft, so publishing drops this change.",
+	writtenAfterDeletion: "This draft deletes what it was added to, so publishing deletes it too."
 };
-/** The verdict at the top of the review: can this draft go to Live, and is there a catch? */
-function Verdict(t0) {
-	const $ = c(23);
-	const { preview } = t0;
-	const { blockers, conflicts, lost } = preview;
-	const catches = conflicts.length + lost.length;
-	let t1;
-	if ($[0] !== blockers.length || $[1] !== catches) {
-		t1 = blockers.length ? [
-			"danger",
-			OctagonX,
-			"Not ready to publish",
-			`Fix ${blockers.length === 1 ? "this problem" : `these ${blockers.length} problems`} in the draft first.`
-		] : catches ? [
-			"warning",
-			TriangleAlert,
-			`Ready, with ${plural(catches, "thing")} to know`,
-			"Publishing replaces Live's version wherever the two differ."
-		] : [
-			"success",
-			CircleCheck,
-			"Ready to publish",
-			"Nothing on Live changed since this draft did."
-		];
-		$[0] = blockers.length;
-		$[1] = catches;
-		$[2] = t1;
-	} else t1 = $[2];
-	const [tone, Icon, title, description] = t1;
-	const t2 = TONES[tone];
-	let t3;
-	if ($[3] !== t2.card) {
-		t3 = cn("flex gap-3 rounded-xl border p-4", t2.card);
-		$[3] = t2.card;
-		$[4] = t3;
-	} else t3 = $[4];
-	const t4 = TONES[tone];
-	let t5;
-	if ($[5] !== t4.icon) {
-		t5 = cn("flex size-9 shrink-0 items-center justify-center rounded-lg", t4.icon);
-		$[5] = t4.icon;
-		$[6] = t5;
-	} else t5 = $[6];
-	let t6;
-	if ($[7] !== Icon) {
-		t6 = /* @__PURE__ */ jsx(Icon, { className: "size-5" });
-		$[7] = Icon;
-		$[8] = t6;
-	} else t6 = $[8];
-	let t7;
-	if ($[9] !== t5 || $[10] !== t6) {
-		t7 = /* @__PURE__ */ jsx("span", {
-			className: t5,
-			children: t6
-		});
-		$[9] = t5;
-		$[10] = t6;
-		$[11] = t7;
-	} else t7 = $[11];
-	let t8;
-	if ($[12] !== title) {
-		t8 = /* @__PURE__ */ jsx("p", {
-			className: "font-medium",
-			children: title
-		});
-		$[12] = title;
-		$[13] = t8;
-	} else t8 = $[13];
-	let t9;
-	if ($[14] !== description) {
-		t9 = /* @__PURE__ */ jsx("p", {
-			className: "text-foreground/70 text-sm",
-			children: description
-		});
-		$[14] = description;
-		$[15] = t9;
-	} else t9 = $[15];
-	let t10;
-	if ($[16] !== t8 || $[17] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-0.5",
-			children: [t8, t9]
-		});
-		$[16] = t8;
-		$[17] = t9;
-		$[18] = t10;
-	} else t10 = $[18];
-	let t11;
-	if ($[19] !== t10 || $[20] !== t3 || $[21] !== t7) {
-		t11 = /* @__PURE__ */ jsxs("div", {
-			className: t3,
-			children: [t7, t10]
-		});
-		$[19] = t10;
-		$[20] = t3;
-		$[21] = t7;
-		$[22] = t11;
-	} else t11 = $[22];
-	return t11;
-}
-const INSIGHT_LIST = "bg-background divide-y overflow-hidden rounded-lg border";
-function Insight(t0) {
-	const $ = c(23);
-	const { tone, icon: Icon, title, hint, count, children } = t0;
+/**
+* A card for something to know before publishing: blockers in red; removals, conflicts and lost
+* changes in amber.
+*/
+function Card(t0) {
+	const $ = c(22);
+	const { tone, icon: Icon, title, action, children } = t0;
 	const t1 = TONES[tone];
 	let t2;
-	if ($[0] !== t1.icon) {
-		t2 = cn("flex size-6 shrink-0 items-center justify-center rounded-md", t1.icon);
-		$[0] = t1.icon;
+	if ($[0] !== t1.card) {
+		t2 = cn("flex items-start gap-2 rounded-lg border p-3", t1.card);
+		$[0] = t1.card;
 		$[1] = t2;
 	} else t2 = $[1];
-	let t3;
-	if ($[2] !== Icon) {
-		t3 = /* @__PURE__ */ jsx(Icon, { className: "size-3.5" });
-		$[2] = Icon;
-		$[3] = t3;
-	} else t3 = $[3];
+	const t3 = TONES[tone];
 	let t4;
-	if ($[4] !== t2 || $[5] !== t3) {
-		t4 = /* @__PURE__ */ jsx("span", {
-			className: t2,
-			children: t3
-		});
-		$[4] = t2;
-		$[5] = t3;
-		$[6] = t4;
-	} else t4 = $[6];
+	if ($[2] !== t3.icon) {
+		t4 = cn("mt-0.5 size-4 shrink-0", t3.icon);
+		$[2] = t3.icon;
+		$[3] = t4;
+	} else t4 = $[3];
 	let t5;
+	if ($[4] !== Icon || $[5] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Icon, { className: t4 });
+		$[4] = Icon;
+		$[5] = t4;
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
 	if ($[7] !== title) {
-		t5 = /* @__PURE__ */ jsx("h3", {
+		t6 = /* @__PURE__ */ jsx("p", {
 			className: "text-sm font-medium",
+			"data-card-title": true,
 			children: title
 		});
 		$[7] = title;
-		$[8] = t5;
-	} else t5 = $[8];
-	let t6;
-	if ($[9] !== count) {
-		t6 = /* @__PURE__ */ jsx("span", {
-			className: "text-muted-foreground bg-muted rounded-full px-1.5 text-xs tabular-nums",
-			children: count
-		});
-		$[9] = count;
-		$[10] = t6;
-	} else t6 = $[10];
+		$[8] = t6;
+	} else t6 = $[8];
 	let t7;
-	if ($[11] !== t4 || $[12] !== t5 || $[13] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [
-				t4,
-				t5,
-				t6
-			]
+	if ($[9] !== children) {
+		t7 = /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground text-sm",
+			children
 		});
-		$[11] = t4;
-		$[12] = t5;
-		$[13] = t6;
-		$[14] = t7;
-	} else t7 = $[14];
+		$[9] = children;
+		$[10] = t7;
+	} else t7 = $[10];
 	let t8;
-	if ($[15] !== hint) {
-		t8 = /* @__PURE__ */ jsx("p", {
-			className: "text-muted-foreground text-xs",
-			children: hint
+	if ($[11] !== action) {
+		t8 = action && /* @__PURE__ */ jsx("div", {
+			className: "pt-1",
+			children: action
 		});
-		$[15] = hint;
-		$[16] = t8;
-	} else t8 = $[16];
+		$[11] = action;
+		$[12] = t8;
+	} else t8 = $[12];
 	let t9;
-	if ($[17] !== children) {
-		t9 = /* @__PURE__ */ jsx("ul", {
-			className: INSIGHT_LIST,
-			children
-		});
-		$[17] = children;
-		$[18] = t9;
-	} else t9 = $[18];
-	let t10;
-	if ($[19] !== t7 || $[20] !== t8 || $[21] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("section", {
-			className: "flex flex-col gap-2",
+	if ($[13] !== t6 || $[14] !== t7 || $[15] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-1",
 			children: [
+				t6,
 				t7,
-				t8,
-				t9
+				t8
 			]
 		});
-		$[19] = t7;
-		$[20] = t8;
-		$[21] = t9;
-		$[22] = t10;
-	} else t10 = $[22];
-	return t10;
-}
-function InsightItem(t0) {
-	const $ = c(12);
-	const { label, place, detail } = t0;
-	let t1;
-	if ($[0] !== label) {
-		t1 = /* @__PURE__ */ jsx("span", {
-			className: "truncate text-sm font-medium",
-			children: label
-		});
-		$[0] = label;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== place) {
-		t2 = place && /* @__PURE__ */ jsx("span", {
-			className: "text-muted-foreground truncate text-xs",
-			children: place
-		});
-		$[2] = place;
-		$[3] = t2;
-	} else t2 = $[3];
-	let t3;
-	if ($[4] !== t1 || $[5] !== t2) {
-		t3 = /* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 items-baseline gap-2",
-			children: [t1, t2]
-		});
-		$[4] = t1;
-		$[5] = t2;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== detail) {
-		t4 = /* @__PURE__ */ jsx("p", {
-			className: "text-muted-foreground text-sm",
-			children: detail
-		});
-		$[7] = detail;
-		$[8] = t4;
-	} else t4 = $[8];
-	let t5;
-	if ($[9] !== t3 || $[10] !== t4) {
-		t5 = /* @__PURE__ */ jsxs("li", {
-			className: "flex flex-col gap-0.5 px-3 py-2.5",
-			children: [t3, t4]
+		$[13] = t6;
+		$[14] = t7;
+		$[15] = t8;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== t2 || $[18] !== t5 || $[19] !== t9 || $[20] !== tone) {
+		t10 = /* @__PURE__ */ jsxs("li", {
+			className: t2,
+			"data-card": tone,
+			children: [t5, t9]
 		});
-		$[9] = t3;
-		$[10] = t4;
-		$[11] = t5;
-	} else t5 = $[11];
-	return t5;
+		$[17] = t2;
+		$[18] = t5;
+		$[19] = t9;
+		$[20] = tone;
+		$[21] = t10;
+	} else t10 = $[21];
+	return t10;
 }
-/** From how many problems sharing a message they read as one item, naming each subject. */
+/** From how many problems sharing a message they fold into one card, naming each subject. */
 const SHARED_MESSAGE_MIN = 3;
 /**
-* Problems, with those sharing a message folded into one item: a draft can hold dozens of
-* definitions to release, and the message is the same for each.
+* Warnings the review shows: what the draft's code removes while Live content uses it, which is
+* about the draft. Other warnings are about problems already on Live, and stay out (ADR 0009).
 */
-function ProblemItems({ problems }) {
+const isShownWarning = (problem) => problem.code === "removedInUse";
+/**
+* One card per problem, saying what's wrong and where. Problems sharing a message fold into one
+* card naming each: a development draft can hold dozens of definitions to release, and a removed
+* block can sit on dozens of pages, with the same message for each. A problem on a page has an
+* action that shows it in the Canvas; a blocker in the draft's code, which only the agent fixes,
+* one that opens the draft's thread.
+*/
+function ProblemCards({ problems, tone, icon, onShow, onOpenThread }) {
 	const byMessage = /* @__PURE__ */ new Map();
 	for (const problem of problems) byMessage.set(problem.message, [...byMessage.get(problem.message) ?? [], problem]);
 	return [...byMessage].flatMap(([message, shared]) => {
-		if (shared.length < SHARED_MESSAGE_MIN) return shared.map((problem) => /* @__PURE__ */ jsx(InsightItem, {
-			label: problem.label,
-			place: problemPlace(problem),
-			detail: problem.message
-		}, `${problem.code}:${problem.id}:${problem.field}`));
-		return [/* @__PURE__ */ jsxs("li", {
-			className: "flex flex-col gap-2 px-3 py-2.5",
-			children: [/* @__PURE__ */ jsx("p", {
-				className: "text-sm font-medium",
-				children: message
-			}), /* @__PURE__ */ jsx("ul", {
-				className: "flex flex-wrap gap-1",
+		if (shared.length < SHARED_MESSAGE_MIN) return shared.map((problem) => {
+			const place = problemPlace(problem);
+			const target = blockerTarget(problem);
+			return /* @__PURE__ */ jsx(Card, {
+				tone,
+				icon,
+				title: problem.message,
+				action: problem.entity === "code" ? /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: onOpenThread,
+					children: "Open the thread"
+				}) : target && /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => onShow(target),
+					children: blockerActionLabel(problem)
+				}),
+				children: place ? `${problem.label} · ${place}` : problem.label
+			}, `${problem.code}:${problem.id}:${problem.locale}:${problem.field}`);
+		});
+		return [/* @__PURE__ */ jsx(Card, {
+			tone,
+			icon,
+			title: message,
+			children: /* @__PURE__ */ jsx("ul", {
+				className: "flex flex-wrap gap-1 pt-0.5",
 				children: shared.map((problem) => {
 					const place = problemPlace(problem);
 					return /* @__PURE__ */ jsxs("li", {
-						className: "bg-muted text-muted-foreground rounded-md px-1.5 py-0.5 text-xs",
+						className: "bg-background rounded-md border px-1.5 py-0.5 text-xs",
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "text-foreground",
 							children: problem.label
 						}), place && ` · ${place}`]
-					}, `${problem.code}:${problem.id}:${problem.field}`);
+					}, `${problem.code}:${problem.id}:${problem.locale}:${problem.field}`);
 				})
-			})]
+			})
 		}, `shared:${message}`)];
 	});
 }
-/** What publishing will do, in the order ADR 0009 lists it. */
-function Insights(t0) {
-	const $ = c(13);
-	const { preview } = t0;
-	const { blockers, conflicts, lost, warnings } = preview;
+/** Who made Live's version of a conflict, as a sentence's subject: a member, a release, or none. */
+function whoChanged(conflict) {
+	if (conflict.release) return "A release";
+	return conflict.publishedBy?.name ?? null;
+}
+/** Whose edit a conflict replaces, as its card's title: a member's, a release's, or nobody's. */
+function conflictTitle(conflict) {
+	if (conflict.liveVersion === null) return `Brings back the ${conflict.label}`;
+	if (conflict.release) return `Replaces a release's change to the ${conflict.label}`;
+	if (conflict.publishedBy) return `Replaces ${conflict.publishedBy.name}'s edit to the ${conflict.label}`;
+	return `Replaces an edit to the ${conflict.label}`;
+}
+/** What publishing does to a conflict's entity, and when Live changed it. */
+function conflictDetail(conflict, draftDeletes) {
+	const who = whoChanged(conflict);
+	const when = conflict.publishedAt ? ` on ${dateFormat.format(conflict.publishedAt)}` : "";
+	if (conflict.liveVersion === null) return `${who ? `${who} deleted it from Live${when}.` : `Live deleted it${when}.`} Publishing brings it back.`;
+	const changed = who ? `${who} changed it on Live${when}.` : `Live changed it${when}.`;
+	return draftDeletes ? `${changed} This draft deletes it, so publishing deletes it anyway.` : `${changed} Publishing replaces it with this draft's version.`;
+}
+/** Who made Live's version of a conflict and when, labelling Live's values: "On Live now · Ada, Oct 13". */
+function liveValuesLabel(conflict) {
+	const made = [whoChanged(conflict), conflict.publishedAt ? dateFormat.format(conflict.publishedAt) : null].filter((part) => part !== null);
+	return made.length > 0 ? `On Live now · ${made.join(", ")}` : "On Live now";
+}
+/**
+* The fields a conflict overwrites: Live's value crossed out, above the draft's, and how many
+* more fields differ.
+*/
+function ConflictFields(t0) {
+	const $ = c(12);
+	const { conflict } = t0;
+	if (conflict.fields.length === 0) return null;
 	let t1;
-	if ($[0] !== blockers) {
-		t1 = blockers.length > 0 && /* @__PURE__ */ jsx("ul", {
-			className: INSIGHT_LIST,
-			children: /* @__PURE__ */ jsx(ProblemItems, { problems: blockers })
-		});
-		$[0] = blockers;
+	if ($[0] !== conflict) {
+		t1 = liveValuesLabel(conflict);
+		$[0] = conflict;
 		$[1] = t1;
 	} else t1 = $[1];
+	const liveLabel = t1;
 	let t2;
-	if ($[2] !== conflicts) {
-		t2 = conflicts.length > 0 && /* @__PURE__ */ jsx(Insight, {
-			tone: "warning",
-			icon: History,
-			title: "Changed on Live since this draft",
-			hint: "This draft's version replaces Live's. Check nothing important gets overwritten.",
-			count: conflicts.length,
-			children: conflicts.map(_temp)
-		});
-		$[2] = conflicts;
-		$[3] = t2;
-	} else t2 = $[3];
+	if ($[2] !== conflict.fields || $[3] !== liveLabel) {
+		let t3;
+		if ($[5] !== liveLabel) {
+			t3 = (t4) => {
+				const { field, live, draft } = t4;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "bg-background flex flex-col gap-1 rounded-md border p-2",
+					"data-conflict-field": true,
+					children: [
+						/* @__PURE__ */ jsx("p", {
+							className: "text-foreground text-xs font-medium",
+							"data-field-title": true,
+							children: field
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-xs",
+								children: liveLabel
+							}), /* @__PURE__ */ jsx("del", {
+								className: "break-words",
+								"data-live-value": true,
+								children: live
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-xs",
+								children: "This draft"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "text-foreground break-words",
+								"data-draft-value": true,
+								children: draft
+							})]
+						})
+					]
+				}, field);
+			};
+			$[5] = liveLabel;
+			$[6] = t3;
+		} else t3 = $[6];
+		t2 = conflict.fields.map(t3);
+		$[2] = conflict.fields;
+		$[3] = liveLabel;
+		$[4] = t2;
+	} else t2 = $[4];
 	let t3;
-	if ($[4] !== lost) {
-		t3 = lost.length > 0 && /* @__PURE__ */ jsx(Insight, {
-			tone: "warning",
-			icon: Unlink,
-			title: "Changes that will be lost",
-			hint: "These can't be kept, and can't be brought back after publishing.",
-			count: lost.length,
-			children: lost.map(_temp2)
+	if ($[7] !== conflict.moreFields) {
+		t3 = conflict.moreFields > 0 && /* @__PURE__ */ jsxs("p", {
+			className: "text-xs",
+			children: ["And ", plural(conflict.moreFields, "more field")]
 		});
-		$[4] = lost;
-		$[5] = t3;
-	} else t3 = $[5];
+		$[7] = conflict.moreFields;
+		$[8] = t3;
+	} else t3 = $[8];
 	let t4;
-	if ($[6] !== warnings) {
-		t4 = warnings.length > 0 && /* @__PURE__ */ jsx(Insight, {
-			tone: "neutral",
-			icon: Info,
-			title: "Already on Live",
-			hint: "These don't block publishing, but are worth fixing.",
-			count: warnings.length,
-			children: /* @__PURE__ */ jsx(ProblemItems, { problems: warnings })
+	if ($[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 pt-1",
+			children: [t2, t3]
 		});
-		$[6] = warnings;
-		$[7] = t4;
-	} else t4 = $[7];
-	let t5;
-	if ($[8] !== t1 || $[9] !== t2 || $[10] !== t3 || $[11] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t1,
-			t2,
-			t3,
-			t4
-		] });
-		$[8] = t1;
 		$[9] = t2;
 		$[10] = t3;
 		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
-	return t5;
-}
-function _temp2(change) {
-	return /* @__PURE__ */ jsx(InsightItem, {
-		label: change.label,
-		place: ownerName(change.owner, change.entity),
-		detail: LOST_REASONS[change.reason]
-	}, change.id);
+	} else t4 = $[11];
+	return t4;
 }
-function _temp(conflict) {
-	return /* @__PURE__ */ jsx(InsightItem, {
-		label: conflict.label,
-		place: ownerName(conflict.owner, conflict.entity),
-		detail: /* @__PURE__ */ jsxs(Fragment, { children: [
-			conflict.liveVersion === null ? "Deleted" : "Changed",
-			changedBy(conflict),
-			conflict.publishedAt ? `, ${dateFormat.format(conflict.publishedAt)}` : ""
-		] })
-	}, conflict.id);
+/** Whose version of a conflict's entity Live holds, for its "Use … version instead" action. */
+function liveVersionName(conflict) {
+	if (conflict.release) return "a release's";
+	if (conflict.publishedBy) return `${conflict.publishedBy.name}'s`;
+	return "Live's";
 }
-/** Changes grouped by where they're listed: pages first, then layouts, then collections. */
-function placesOf(changes) {
-	const places = /* @__PURE__ */ new Map();
-	const sorted = [...changes].sort((a, b) => GROUPS[groupKind(a)].rank - GROUPS[groupKind(b)].rank);
-	for (const change of sorted) {
-		const name = placeOf(change);
-		const place = places.get(name) ?? {
-			kind: groupKind(change),
-			changes: []
+/**
+* Drops the draft's change to a conflict's entity, so the draft reads Live's version again, then
+* reads the review again: the conflict is gone, and the preview has a new token.
+*/
+function UseLiveVersionButton(t0) {
+	const $ = c(20);
+	const { projectId, conflict, onUsed } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = draftMutations.revertToLive();
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== onUsed) {
+		t2 = (error) => {
+			toast.error(error.message || "Could not use Live's version");
+			onUsed();
 		};
-		place.changes.push(change);
-		places.set(name, place);
-	}
-	return places;
+		$[1] = onUsed;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== onUsed || $[4] !== t2) {
+		t3 = {
+			...t1,
+			onSuccess: onUsed,
+			onError: t2
+		};
+		$[3] = onUsed;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	const revert = useMutation(t3);
+	const t4 = revert.isPending;
+	let t5;
+	if ($[6] !== conflict.entity || $[7] !== conflict.id || $[8] !== projectId || $[9] !== revert) {
+		t5 = () => revert.mutate({
+			projectId,
+			entity: conflict.entity,
+			id: conflict.id
+		});
+		$[6] = conflict.entity;
+		$[7] = conflict.id;
+		$[8] = projectId;
+		$[9] = revert;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== revert.isPending) {
+		t6 = revert.isPending ? /* @__PURE__ */ jsx(Spinner, {}) : null;
+		$[11] = revert.isPending;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== conflict) {
+		t7 = liveVersionName(conflict);
+		$[13] = conflict;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== revert.isPending || $[16] !== t5 || $[17] !== t6 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Button, {
+			variant: "outline",
+			size: "sm",
+			className: "mt-1",
+			disabled: t4,
+			onClick: t5,
+			children: [
+				t6,
+				"Use ",
+				t7,
+				" version instead"
+			]
+		});
+		$[15] = revert.isPending;
+		$[16] = t5;
+		$[17] = t6;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	return t8;
 }
 /**
-* Changes grouped by locale, the default locale first, then what's stored once, like files,
-* under no locale. A draft changing only its default locale names no locale at all.
+* Blockers first, then what the draft's code removes while Live content uses it, then conflicts,
+* then lost changes: one card each, with no section heading.
 */
-function localesOf(changes, defaultLocale) {
-	const tags = [...new Set(changes.flatMap((change) => change.locale ?? []))];
-	if (defaultLocale ? tags.every((tag) => tag === defaultLocale) : tags.length <= 1) return [{
-		locale: null,
-		places: placesOf(changes)
-	}];
-	const rank = (tag) => tag === defaultLocale ? 0 : tag === null ? 2 : 1;
-	return [...tags, null].sort((a, b) => rank(a) - rank(b) || localeLabel(a ?? "").localeCompare(localeLabel(b ?? ""))).map((locale) => ({
-		locale,
-		places: placesOf(changes.filter((change) => change.locale === locale))
-	})).filter(({ places }) => places.size > 0);
-}
-/** The changes listed in one place. */
-function Place(t0) {
-	const $ = c(12);
-	const { name, place } = t0;
-	const Icon = GROUPS[place.kind].icon;
+function Cards(t0) {
+	const $ = c(33);
+	const { projectId, preview, onChanged, onShow, onOpenThread } = t0;
+	const { blockers, conflicts, lost, changes, defaultLocale } = preview;
 	let t1;
-	if ($[0] !== Icon) {
-		t1 = /* @__PURE__ */ jsx(Icon, { className: "size-3.5" });
-		$[0] = Icon;
+	if ($[0] !== preview.warnings) {
+		t1 = preview.warnings.filter(isShownWarning);
+		$[0] = preview.warnings;
 		$[1] = t1;
 	} else t1 = $[1];
+	const warnings = t1;
+	if (blockers.length + warnings.length + conflicts.length + lost.length === 0) return null;
 	let t2;
-	if ($[2] !== name || $[3] !== t1) {
-		t2 = /* @__PURE__ */ jsxs("h4", {
-			className: "text-muted-foreground flex items-center gap-1.5 text-xs font-medium",
-			children: [t1, name]
-		});
-		$[2] = name;
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
+	if ($[2] !== changes) {
+		t2 = new Set(changes.filter(_temp).map(_temp2));
+		$[2] = changes;
+		$[3] = t2;
+	} else t2 = $[3];
+	const deleted = t2;
 	let t3;
-	if ($[5] !== place.changes) {
-		t3 = place.changes.map(_temp3);
-		$[5] = place.changes;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== t3) {
-		t4 = /* @__PURE__ */ jsx("ul", {
-			className: "flex flex-col",
-			children: t3
+	if ($[4] !== blockers || $[5] !== onOpenThread || $[6] !== onShow) {
+		t3 = /* @__PURE__ */ jsx(ProblemCards, {
+			problems: blockers,
+			tone: "danger",
+			icon: OctagonX,
+			onShow,
+			onOpenThread
 		});
+		$[4] = blockers;
+		$[5] = onOpenThread;
+		$[6] = onShow;
 		$[7] = t3;
-		$[8] = t4;
-	} else t4 = $[8];
-	let t5;
-	if ($[9] !== t2 || $[10] !== t4) {
-		t5 = /* @__PURE__ */ jsxs("section", {
-			className: "flex flex-col gap-1",
-			children: [t2, t4]
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== onOpenThread || $[9] !== onShow || $[10] !== warnings) {
+		t4 = /* @__PURE__ */ jsx(ProblemCards, {
+			problems: warnings,
+			tone: "warning",
+			icon: TriangleAlert,
+			onShow,
+			onOpenThread
 		});
-		$[9] = t2;
-		$[10] = t4;
-		$[11] = t5;
-	} else t5 = $[11];
-	return t5;
-}
-function _temp3(change) {
-	return /* @__PURE__ */ jsxs("li", {
-		className: "flex items-center gap-2 py-0.5 pl-5 text-sm",
-		title: change.change,
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				"aria-hidden": true,
-				className: cn("w-2 text-center font-mono", CHANGES[change.change].className),
-				children: CHANGES[change.change].sign
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "truncate",
-				"data-change-label": true,
-				children: changeLabel(change)
-			}),
-			/* @__PURE__ */ jsxs("span", {
-				className: "sr-only",
+		$[8] = onOpenThread;
+		$[9] = onShow;
+		$[10] = warnings;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== conflicts || $[13] !== defaultLocale || $[14] !== deleted || $[15] !== onChanged || $[16] !== projectId) {
+		let t6;
+		if ($[18] !== defaultLocale || $[19] !== deleted || $[20] !== onChanged || $[21] !== projectId) {
+			t6 = (conflict) => /* @__PURE__ */ jsxs(Card, {
+				tone: "warning",
+				icon: Replace,
+				title: conflictTitle(conflict),
 				children: [
-					"(",
-					change.change,
-					")"
+					/* @__PURE__ */ jsx("p", { children: placeInLocale(conflict, defaultLocale) }),
+					/* @__PURE__ */ jsx("p", { children: conflictDetail(conflict, deleted.has(JSON.stringify([
+						conflict.entity,
+						conflict.id,
+						conflict.locale
+					]))) }),
+					/* @__PURE__ */ jsx(ConflictFields, { conflict }),
+					conflict.revertible && /* @__PURE__ */ jsx(UseLiveVersionButton, {
+						projectId,
+						conflict,
+						onUsed: onChanged
+					})
 				]
-			})
-		]
-	}, `${change.entity}:${change.id}`);
+			}, conflictKey(conflict));
+			$[18] = defaultLocale;
+			$[19] = deleted;
+			$[20] = onChanged;
+			$[21] = projectId;
+			$[22] = t6;
+		} else t6 = $[22];
+		t5 = conflicts.map(t6);
+		$[12] = conflicts;
+		$[13] = defaultLocale;
+		$[14] = deleted;
+		$[15] = onChanged;
+		$[16] = projectId;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[23] !== defaultLocale || $[24] !== lost) {
+		let t7;
+		if ($[26] !== defaultLocale) {
+			t7 = (change_1) => /* @__PURE__ */ jsxs(Card, {
+				tone: "warning",
+				icon: Unlink,
+				title: change_1.reason === "writtenAfterDeletion" ? change_1.label : `Loses the change to the ${change_1.label}`,
+				children: [/* @__PURE__ */ jsx("p", { children: placeInLocale(change_1, defaultLocale) }), /* @__PURE__ */ jsx("p", { children: LOST_REASONS[change_1.reason] })]
+			}, JSON.stringify([
+				change_1.entity,
+				change_1.id,
+				change_1.locale
+			]));
+			$[26] = defaultLocale;
+			$[27] = t7;
+		} else t7 = $[27];
+		t6 = lost.map(t7);
+		$[23] = defaultLocale;
+		$[24] = lost;
+		$[25] = t6;
+	} else t6 = $[25];
+	let t7;
+	if ($[28] !== t3 || $[29] !== t4 || $[30] !== t5 || $[31] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("ul", {
+			className: "flex flex-col gap-2",
+			children: [
+				t3,
+				t4,
+				t5,
+				t6
+			]
+		});
+		$[28] = t3;
+		$[29] = t4;
+		$[30] = t5;
+		$[31] = t6;
+		$[32] = t7;
+	} else t7 = $[32];
+	return t7;
 }
-/**
-* The draft's changes, grouped by locale once the draft changes more than its default locale,
-* then by page, layout and collection. Collapsed at first: the insights above are what to read
-* before publishing.
-*/
-function Changes(t0) {
-	const $ = c(46);
-	const { changes, defaultLocale } = t0;
+function _temp2(change_0) {
+	return JSON.stringify([
+		change_0.entity,
+		change_0.id,
+		change_0.locale
+	]);
+}
+function _temp(change) {
+	return change.change === "deleted";
+}
+/** A quiet line saying something is done, with a check, or still running, with a spinner. */
+function StatusLine(t0) {
+	const $ = c(7);
+	const { done, children } = t0;
 	let t1;
-	if ($[0] !== changes) {
-		t1 = new Set(changes.map(placeOf));
-		$[0] = changes;
+	if ($[0] !== done) {
+		t1 = done ? /* @__PURE__ */ jsx(CircleCheck, { className: "mt-0.5 size-4 shrink-0" }) : /* @__PURE__ */ jsx(Spinner, {
+			"aria-hidden": true,
+			className: "mt-0.5 size-4 shrink-0"
+		});
+		$[0] = done;
 		$[1] = t1;
 	} else t1 = $[1];
-	const groups = t1;
-	let T0;
-	let T1;
-	let T2;
+	let t2;
+	if ($[2] !== children) {
+		t2 = /* @__PURE__ */ jsx("span", { children });
+		$[2] = children;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("li", {
+			className: "text-muted-foreground flex items-start gap-2 text-sm",
+			"data-status-line": true,
+			children: [t1, t2]
+		});
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+/** What Publish sends: the review's token, and the revision a draft with code shows. */
+const publishInput = (projectId, shown, publishAnyway) => ({
+	projectId,
+	token: shown.token,
+	...shown.code?.revision && { revision: shown.code.revision },
+	...publishAnyway && { publishAnyway }
+});
+/** Why a publish with code went back to the review, as the review says it. */
+const PUBLISH_ABORTED = {
+	revisionChanged: "The agent changed the code since this review opened, so the publish stopped. Check the preview, then publish again.",
+	conflictsChanged: "Live changed while publishing, so the publish stopped and Live is as it was. Check the new list.",
+	blocked: "Something now needs fixing before publishing, so the publish stopped.",
+	codeDoesNotMerge: "Live's code changed while publishing, and it doesn't merge with this draft's yet, so the publish stopped. Camox's agent is fixing it in the draft's thread: publish again once it's done.",
+	liveCodeMoved: "Live's code changed while publishing, and the draft took too long to take it in, so the publish stopped. Try again.",
+	failed: "The publish couldn't finish on Camox's side, and Live is as it was. Try again."
+};
+/**
+* What's fine or still running: the draft is up to date with Live, its latest code changes
+* building, its translations, and the page SEO being written.
+*/
+function StatusLines(t0) {
+	const $ = c(34);
+	const { preview, locales, waiting } = t0;
+	const { conflicts, translating, warnings, code } = preview;
+	let seoPages;
+	let t1;
 	let t2;
 	let t3;
 	let t4;
 	let t5;
 	let t6;
-	if ($[2] !== changes || $[3] !== defaultLocale || $[4] !== groups.size) {
-		t6 = Symbol.for("react.early_return_sentinel");
-		bb0: {
-			const locales = localesOf(changes, defaultLocale);
-			if (groups.size === 0) {
-				let t7;
-				if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-					t7 = /* @__PURE__ */ jsx("p", {
-						className: "text-muted-foreground text-sm",
-						children: "This draft has no changes."
-					});
-					$[13] = t7;
-				} else t7 = $[13];
-				t6 = t7;
-				break bb0;
-			}
-			let t7;
-			if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-				t7 = Object.keys(CHANGES);
-				$[14] = t7;
-			} else t7 = $[14];
-			let t8;
-			if ($[15] !== changes) {
-				t8 = t7.map((kind) => [kind, changes.filter((change) => change.change === kind).length]).filter(_temp4);
-				$[15] = changes;
-				$[16] = t8;
-			} else t8 = $[16];
-			const counts = t8;
-			T2 = Accordion;
-			t5 = "rounded-lg border";
-			T1 = AccordionItem;
-			let t9;
-			if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-				t9 = /* @__PURE__ */ jsx(ChevronRight, { className: "text-muted-foreground size-4 shrink-0 transition-transform group-data-panel-open:rotate-90" });
-				$[17] = t9;
-			} else t9 = $[17];
-			let t10;
-			if ($[18] !== changes.length) {
-				t10 = plural(changes.length, "change");
-				$[18] = changes.length;
-				$[19] = t10;
-			} else t10 = $[19];
-			let t11;
-			if ($[20] !== t10) {
-				t11 = /* @__PURE__ */ jsx("span", {
-					className: "text-sm font-medium",
-					children: t10
-				});
-				$[20] = t10;
-				$[21] = t11;
-			} else t11 = $[21];
-			let t12;
-			if ($[22] !== groups.size) {
-				t12 = plural(groups.size, "place");
-				$[22] = groups.size;
-				$[23] = t12;
-			} else t12 = $[23];
-			let t13;
-			if ($[24] !== t12) {
-				t13 = /* @__PURE__ */ jsxs("span", {
-					className: "text-muted-foreground text-sm",
-					children: ["in ", t12]
-				});
-				$[24] = t12;
-				$[25] = t13;
-			} else t13 = $[25];
-			let t14;
-			if ($[26] !== counts) {
-				t14 = /* @__PURE__ */ jsx("span", {
-					className: "ml-auto flex items-center gap-2 text-xs tabular-nums",
-					children: counts.map(_temp5)
-				});
-				$[26] = counts;
-				$[27] = t14;
-			} else t14 = $[27];
-			if ($[28] !== t11 || $[29] !== t13 || $[30] !== t14) {
-				t4 = /* @__PURE__ */ jsx(AccordionHeader, { children: /* @__PURE__ */ jsxs(AccordionTrigger, {
-					className: "group hover:bg-muted/50 flex w-full items-center gap-2 rounded-lg px-3 py-2.5 text-left",
-					children: [
-						t9,
-						t11,
-						t13,
-						t14
-					]
-				}) });
-				$[28] = t11;
-				$[29] = t13;
-				$[30] = t14;
-				$[31] = t4;
-			} else t4 = $[31];
-			T0 = AccordionPanel;
-			t2 = "flex flex-col gap-4 border-t px-3 py-3";
-			t3 = locales.map(_temp7);
-		}
-		$[2] = changes;
-		$[3] = defaultLocale;
-		$[4] = groups.size;
-		$[5] = T0;
-		$[6] = T1;
-		$[7] = T2;
+	if ($[0] !== code || $[1] !== conflicts.length || $[2] !== locales || $[3] !== translating || $[4] !== waiting || $[5] !== warnings) {
+		const translations = locales.filter(_temp3).map(_temp4);
+		let t7;
+		if ($[13] !== warnings) {
+			t7 = new Set(warnings.filter(_temp5).map(_temp6));
+			$[13] = warnings;
+			$[14] = t7;
+		} else t7 = $[14];
+		seoPages = t7.size;
+		const aborted = code?.publishAborted && !code.publishing ? code.publishAborted : null;
+		t1 = "flex flex-col gap-1.5";
+		if ($[15] !== aborted) {
+			t2 = aborted && /* @__PURE__ */ jsx("li", {
+				className: "text-sm text-amber-700 dark:text-amber-400",
+				children: PUBLISH_ABORTED[aborted] ?? PUBLISH_ABORTED.failed
+			});
+			$[15] = aborted;
+			$[16] = t2;
+		} else t2 = $[16];
+		if ($[17] !== code?.includesLive || $[18] !== conflicts.length) {
+			t3 = conflicts.length === 0 && (code?.includesLive ?? true) && /* @__PURE__ */ jsx(StatusLine, {
+				done: true,
+				children: "Includes everything published to Live since this draft started"
+			});
+			$[17] = code?.includesLive;
+			$[18] = conflicts.length;
+			$[19] = t3;
+		} else t3 = $[19];
+		if ($[20] !== code?.building) {
+			t4 = code?.building && /* @__PURE__ */ jsx(StatusLine, {
+				done: false,
+				children: "Building the latest changes…"
+			});
+			$[20] = code?.building;
+			$[21] = t4;
+		} else t4 = $[21];
+		if ($[22] !== code?.publishing) {
+			t5 = code?.publishing && /* @__PURE__ */ jsx(StatusLine, {
+				done: false,
+				children: "Publishing the new code and content…"
+			});
+			$[22] = code?.publishing;
+			$[23] = t5;
+		} else t5 = $[23];
+		t6 = translating.length > 0 ? /* @__PURE__ */ jsxs(StatusLine, {
+			done: false,
+			children: [
+				"Translating into ",
+				listFormat.format(translating.map(localeLabel)),
+				".",
+				" ",
+				waiting ? "Publishing once translated." : "Publishing waits for it."
+			]
+		}) : translations.length > 0 && /* @__PURE__ */ jsxs(StatusLine, {
+			done: true,
+			children: ["Translated into ", listFormat.format(translations.map(localeLabel))]
+		});
+		$[0] = code;
+		$[1] = conflicts.length;
+		$[2] = locales;
+		$[3] = translating;
+		$[4] = waiting;
+		$[5] = warnings;
+		$[6] = seoPages;
+		$[7] = t1;
 		$[8] = t2;
 		$[9] = t3;
 		$[10] = t4;
 		$[11] = t5;
 		$[12] = t6;
 	} else {
-		T0 = $[5];
-		T1 = $[6];
-		T2 = $[7];
+		seoPages = $[6];
+		t1 = $[7];
 		t2 = $[8];
 		t3 = $[9];
 		t4 = $[10];
 		t5 = $[11];
 		t6 = $[12];
 	}
-	if (t6 !== Symbol.for("react.early_return_sentinel")) return t6;
 	let t7;
-	if ($[32] !== t2 || $[33] !== t3) {
-		t7 = /* @__PURE__ */ jsx("div", {
-			className: t2,
-			children: t3
+	if ($[24] !== seoPages) {
+		t7 = seoPages > 0 && /* @__PURE__ */ jsxs(StatusLine, {
+			done: false,
+			children: [
+				"Writing SEO for ",
+				plural(seoPages, "page"),
+				"…"
+			]
 		});
-		$[32] = t2;
-		$[33] = t3;
-		$[34] = t7;
-	} else t7 = $[34];
+		$[24] = seoPages;
+		$[25] = t7;
+	} else t7 = $[25];
 	let t8;
-	if ($[35] !== T0 || $[36] !== t7) {
-		t8 = /* @__PURE__ */ jsx(T0, { children: t7 });
-		$[35] = T0;
-		$[36] = t7;
-		$[37] = t8;
-	} else t8 = $[37];
-	let t9;
-	if ($[38] !== T1 || $[39] !== t4 || $[40] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(T1, { children: [t4, t8] });
-		$[38] = T1;
-		$[39] = t4;
-		$[40] = t8;
-		$[41] = t9;
-	} else t9 = $[41];
-	let t10;
-	if ($[42] !== T2 || $[43] !== t5 || $[44] !== t9) {
-		t10 = /* @__PURE__ */ jsx(T2, {
-			className: t5,
-			children: t9
+	if ($[26] !== t1 || $[27] !== t2 || $[28] !== t3 || $[29] !== t4 || $[30] !== t5 || $[31] !== t6 || $[32] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("ul", {
+			className: t1,
+			children: [
+				t2,
+				t3,
+				t4,
+				t5,
+				t6,
+				t7
+			]
 		});
-		$[42] = T2;
-		$[43] = t5;
-		$[44] = t9;
-		$[45] = t10;
-	} else t10 = $[45];
-	return t10;
+		$[26] = t1;
+		$[27] = t2;
+		$[28] = t3;
+		$[29] = t4;
+		$[30] = t5;
+		$[31] = t6;
+		$[32] = t7;
+		$[33] = t8;
+	} else t8 = $[33];
+	return t8;
 }
-function _temp7(t0) {
-	const { locale, places } = t0;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-4",
-		children: [locale && /* @__PURE__ */ jsx("p", {
-			className: "text-sm font-medium",
-			"data-change-locale": true,
-			children: localeLabel(locale)
-		}), [...places].map(_temp6)]
-	}, locale ?? "");
+function _temp6(warning_0) {
+	return warning_0.id;
 }
-function _temp6(t0) {
-	const [name, place] = t0;
-	return /* @__PURE__ */ jsx(Place, {
-		name,
-		place
-	}, name);
+function _temp5(warning) {
+	return warning.code === "metaTitlePending";
 }
-function _temp5(t0) {
-	const [kind_0, count_0] = t0;
-	return /* @__PURE__ */ jsxs("span", {
-		title: `${count_0} ${kind_0}`,
-		className: CHANGES[kind_0].className,
-		children: [CHANGES[kind_0].sign, count_0]
-	}, kind_0);
+function _temp4(locale_0) {
+	return locale_0.tag;
 }
-function _temp4(t0) {
-	const [, count] = t0;
-	return count > 0;
+function _temp3(locale) {
+	return !locale.isDefault;
+}
+/**
+* The draft's overview: the bullets AI wrote about its changes, in full, under the headline the
+* header shows, saying it's updating while they describe an older version of the draft. While
+* it's first written, skeleton lines; once it failed, a Retry and a plain count of the changes,
+* so the draft can still be reviewed. Nothing for a draft that gets no overview, as a catch-up
+* draft.
+*/
+function DraftOverview(t0) {
+	const $ = c(34);
+	const { projectId, preview } = t0;
+	const { overview, changes } = preview;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			...draftMutations.retryOverview(),
+			onError: _temp7
+		};
+		$[0] = t1;
+	} else t1 = $[0];
+	const retry = useMutation(t1);
+	if (changes.length === 0) {
+		let t2;
+		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: "This draft has no changes."
+			});
+			$[1] = t2;
+		} else t2 = $[1];
+		return t2;
+	}
+	if (overview.status === "ready") {
+		let t2;
+		if ($[2] !== overview.bullets) {
+			t2 = overview.bullets.map(_temp8);
+			$[2] = overview.bullets;
+			$[3] = t2;
+		} else t2 = $[3];
+		let t3;
+		if ($[4] !== t2) {
+			t3 = /* @__PURE__ */ jsx("ul", {
+				className: "text-foreground/85 flex list-disc flex-col gap-1.5 pl-5 leading-relaxed",
+				children: t2
+			});
+			$[4] = t2;
+			$[5] = t3;
+		} else t3 = $[5];
+		let t4;
+		if ($[6] !== overview.stale) {
+			t4 = overview.stale && /* @__PURE__ */ jsxs("p", {
+				className: "text-muted-foreground flex items-center gap-1.5 text-xs",
+				children: [/* @__PURE__ */ jsx(Spinner, {
+					"aria-hidden": true,
+					className: "size-3"
+				}), "Updating…"]
+			});
+			$[6] = overview.stale;
+			$[7] = t4;
+		} else t4 = $[7];
+		let t5;
+		if ($[8] !== t3 || $[9] !== t4) {
+			t5 = /* @__PURE__ */ jsxs("div", {
+				"data-overview": true,
+				className: "flex flex-col gap-2",
+				children: [t3, t4]
+			});
+			$[8] = t3;
+			$[9] = t4;
+			$[10] = t5;
+		} else t5 = $[10];
+		return t5;
+	}
+	if (overview.status === "failed") {
+		let t2;
+		if ($[11] !== changes) {
+			t2 = new Set(changes.map(_temp9));
+			$[11] = changes;
+			$[12] = t2;
+		} else t2 = $[12];
+		const places = t2.size;
+		let t3;
+		if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+			t3 = /* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium",
+				children: "Couldn't summarize this draft"
+			});
+			$[13] = t3;
+		} else t3 = $[13];
+		let t4;
+		if ($[14] !== projectId || $[15] !== retry) {
+			t4 = () => retry.mutate({ projectId });
+			$[14] = projectId;
+			$[15] = retry;
+			$[16] = t4;
+		} else t4 = $[16];
+		let t5;
+		if ($[17] !== retry.isPending) {
+			t5 = retry.isPending ? /* @__PURE__ */ jsx(Spinner, {}) : null;
+			$[17] = retry.isPending;
+			$[18] = t5;
+		} else t5 = $[18];
+		let t6;
+		if ($[19] !== retry.isPending || $[20] !== t4 || $[21] !== t5) {
+			t6 = /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [t3, /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					size: "sm",
+					className: "ml-auto",
+					disabled: retry.isPending,
+					onClick: t4,
+					children: [t5, "Retry"]
+				})]
+			});
+			$[19] = retry.isPending;
+			$[20] = t4;
+			$[21] = t5;
+			$[22] = t6;
+		} else t6 = $[22];
+		let t7;
+		if ($[23] !== changes.length) {
+			t7 = plural(changes.length, "change");
+			$[23] = changes.length;
+			$[24] = t7;
+		} else t7 = $[24];
+		let t8;
+		if ($[25] !== places) {
+			t8 = plural(places, "place");
+			$[25] = places;
+			$[26] = t8;
+		} else t8 = $[26];
+		let t9;
+		if ($[27] !== t7 || $[28] !== t8) {
+			t9 = /* @__PURE__ */ jsxs("p", {
+				className: "text-muted-foreground text-sm",
+				children: [
+					t7,
+					" in ",
+					t8
+				]
+			});
+			$[27] = t7;
+			$[28] = t8;
+			$[29] = t9;
+		} else t9 = $[29];
+		let t10;
+		if ($[30] !== t6 || $[31] !== t9) {
+			t10 = /* @__PURE__ */ jsxs("div", {
+				"data-overview": true,
+				className: "flex flex-col gap-2",
+				children: [t6, t9]
+			});
+			$[30] = t6;
+			$[31] = t9;
+			$[32] = t10;
+		} else t10 = $[32];
+		return t10;
+	}
+	if (overview.status === "none") return null;
+	let t2;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsxs("div", {
+			"data-overview": true,
+			className: "flex flex-col gap-2",
+			children: [
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-11/12" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4/5" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" }),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: "Summarizing this draft…"
+				})
+			]
+		});
+		$[33] = t2;
+	} else t2 = $[33];
+	return t2;
+}
+function _temp9(change) {
+	return change.entity === "locale" ? "Languages" : ownerName(change.owner, change.entity);
+}
+function _temp8(bullet, index) {
+	return /* @__PURE__ */ jsx("li", { children: bullet }, index);
+}
+function _temp7(error) {
+	return toast.error(error.message || "Could not summarize the draft");
 }
 /**
 * Switches the studio to Live once its draft ended here, replacing the draft's URL entry. A
@@ -833,8 +987,8 @@ function useLeaveDraft() {
 * blur, and a blank name clears it; Escape puts the name back.
 */
 function DraftNameInput(t0) {
-	const $ = c(20);
-	const { projectId, draft, ref } = t0;
+	const $ = c(23);
+	const { projectId, draft, ref, className } = t0;
 	const rename = useRenameDraft(projectId);
 	const name = draft.name ?? "";
 	let t1;
@@ -872,14 +1026,20 @@ function DraftNameInput(t0) {
 		$[8] = t3;
 	} else t3 = $[8];
 	let t4;
-	if ($[9] !== save) {
-		t4 = (event) => save(event.currentTarget);
-		$[9] = save;
+	if ($[9] !== className) {
+		t4 = cn("hover:border-input focus-visible:border-ring focus-visible:ring-ring/50 placeholder:text-foreground focus:placeholder:text-muted-foreground -mx-1.5 h-8 w-full min-w-0 truncate rounded-md border border-transparent bg-transparent px-1.5 text-base font-medium transition-[color,box-shadow,border-color] outline-none hover:shadow-xs focus-visible:ring-3", className);
+		$[9] = className;
 		$[10] = t4;
 	} else t4 = $[10];
 	let t5;
-	if ($[11] !== name) {
-		t5 = (event_0) => {
+	if ($[11] !== save) {
+		t5 = (event) => save(event.currentTarget);
+		$[11] = save;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== name) {
+		t6 = (event_0) => {
 			if (event_0.key === "Enter") {
 				event_0.preventDefault();
 				event_0.currentTarget.blur();
@@ -889,31 +1049,32 @@ function DraftNameInput(t0) {
 			event_0.currentTarget.value = name;
 			event_0.currentTarget.blur();
 		};
-		$[11] = name;
-		$[12] = t5;
-	} else t5 = $[12];
-	let t6;
-	if ($[13] !== name || $[14] !== ref || $[15] !== t2 || $[16] !== t3 || $[17] !== t4 || $[18] !== t5) {
-		t6 = /* @__PURE__ */ jsx("input", {
+		$[13] = name;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== name || $[16] !== ref || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== t5 || $[21] !== t6) {
+		t7 = /* @__PURE__ */ jsx("input", {
 			ref,
 			"aria-label": "Draft name",
 			defaultValue: name,
 			placeholder: t2,
 			title: t3,
 			maxLength: 200,
-			className: "hover:border-input focus-visible:border-ring focus-visible:ring-ring/50 placeholder:text-foreground focus:placeholder:text-muted-foreground -mx-1.5 h-8 w-full min-w-0 truncate rounded-md border border-transparent bg-transparent px-1.5 text-base font-medium transition-[color,box-shadow,border-color] outline-none hover:shadow-xs focus-visible:ring-3",
-			onBlur: t4,
-			onKeyDown: t5
+			className: t4,
+			onBlur: t5,
+			onKeyDown: t6
 		}, name);
-		$[13] = name;
-		$[14] = ref;
-		$[15] = t2;
-		$[16] = t3;
-		$[17] = t4;
-		$[18] = t5;
-		$[19] = t6;
-	} else t6 = $[19];
-	return t6;
+		$[15] = name;
+		$[16] = ref;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t7;
+	} else t7 = $[22];
+	return t7;
 }
 /**
 * Reviews a draft before publishing it whole, or discards it (ADR 0009). Publishing sends back
@@ -921,7 +1082,7 @@ function DraftNameInput(t0) {
 * preview is shown. Once the draft ends, the studio switches to Live.
 */
 function ReviewDraftSheet(t0) {
-	const $ = c(106);
+	const $ = c(101);
 	const { projectId, draftId, open, startRenaming: t1, onOpenChange } = t0;
 	const startRenaming = t1 === void 0 ? false : t1;
 	const [confirmingDiscard, setConfirmingDiscard] = React.useState(false);
@@ -959,84 +1120,107 @@ function ReviewDraftSheet(t0) {
 		$[9] = t5;
 	} else t5 = $[9];
 	const draft = useReadQuery(t4, t5);
+	let t6;
+	if ($[10] !== projectId) {
+		t6 = reads.localeList({ projectId });
+		$[10] = projectId;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== open) {
+		t7 = { enabled: open };
+		$[12] = open;
+		$[13] = t7;
+	} else t7 = $[13];
+	const locales = useReadQuery(t6, t7);
 	const leaveDraft = useLeaveDraft();
+	const showInCanvas = useShowInCanvas();
 	const popup = React.useRef(null);
 	const nameInput = React.useRef(null);
-	let t6;
-	if ($[10] !== startRenaming) {
-		t6 = () => {
+	let t8;
+	if ($[14] !== startRenaming) {
+		t8 = () => {
 			if (startRenaming && nameInput.current) {
 				nameInput.current.select();
 				return nameInput.current;
 			}
 			return popup.current;
 		};
-		$[10] = startRenaming;
-		$[11] = t6;
-	} else t6 = $[11];
-	const initialFocus = t6;
-	let t7;
-	if ($[12] !== draft.data?.translatingLocales) {
-		t7 = draft.data?.translatingLocales.join(",");
-		$[12] = draft.data?.translatingLocales;
-		$[13] = t7;
-	} else t7 = $[13];
-	const pending = t7;
+		$[14] = startRenaming;
+		$[15] = t8;
+	} else t8 = $[15];
+	const initialFocus = t8;
+	let t9;
+	if ($[16] !== draft.data?.translatingLocales) {
+		t9 = draft.data?.translatingLocales.join(",");
+		$[16] = draft.data?.translatingLocales;
+		$[17] = t9;
+	} else t9 = $[17];
+	const pending = t9;
 	const seenPending = React.useRef(pending);
 	const { refetch } = preview;
-	let t8;
-	let t9;
-	if ($[14] !== pending || $[15] !== refetch) {
-		t8 = () => {
+	let t10;
+	let t11;
+	if ($[18] !== pending || $[19] !== refetch) {
+		t10 = () => {
 			if (seenPending.current !== void 0 && seenPending.current !== pending) refetch();
 			seenPending.current = pending;
 		};
-		t9 = [pending, refetch];
-		$[14] = pending;
-		$[15] = refetch;
-		$[16] = t8;
-		$[17] = t9;
+		t11 = [pending, refetch];
+		$[18] = pending;
+		$[19] = refetch;
+		$[20] = t10;
+		$[21] = t11;
 	} else {
-		t8 = $[16];
-		t9 = $[17];
+		t10 = $[20];
+		t11 = $[21];
 	}
-	React.useEffect(t8, t9);
-	let t10;
-	if ($[18] !== leaveDraft || $[19] !== onOpenChange) {
-		t10 = (ended) => {
+	React.useEffect(t10, t11);
+	let t12;
+	if ($[22] !== leaveDraft || $[23] !== onOpenChange) {
+		t12 = (ended) => {
 			onOpenChange(false);
 			leaveDraft(ended);
 		};
-		$[18] = leaveDraft;
-		$[19] = onOpenChange;
-		$[20] = t10;
-	} else t10 = $[20];
-	const leave = t10;
-	let t11;
-	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = draftMutations.publish();
-		$[21] = t11;
-	} else t11 = $[21];
-	let t12;
-	if ($[22] !== leave || $[23] !== preview) {
-		t12 = (t13) => {
-			const { empty, ended: ended_0 } = t13;
+		$[22] = leaveDraft;
+		$[23] = onOpenChange;
+		$[24] = t12;
+	} else t12 = $[24];
+	const leave = t12;
+	let t13;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = draftMutations.publish();
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== leave || $[27] !== preview) {
+		t14 = (result) => {
+			if ("publishing" in result && result.publishing) {
+				preview.refetch();
+				return;
+			}
+			const { empty, ended: ended_0 } = result;
 			if (!empty) return leave(ended_0);
 			toast.info("This draft has no changes, so there is nothing to publish.");
 			preview.refetch();
 		};
-		$[22] = leave;
-		$[23] = preview;
-		$[24] = t12;
-	} else t12 = $[24];
-	let t13;
-	if ($[25] !== preview) {
-		t13 = (error) => {
+		$[26] = leave;
+		$[27] = preview;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] !== preview) {
+		t15 = (error) => {
 			if (error.code === CONFLICTS_CHANGED_ERROR) {
 				toast.error("Live changed since you opened this review. Check the new list.");
 				preview.refetch();
 				return;
 			}
+			if (error.code === REVISION_CHANGED_ERROR) {
+				toast.error(error.message || "The draft changed since you opened this review.");
+				preview.refetch();
+				return;
+			}
 			if (error.code === TRANSLATIONS_PENDING_ERROR) {
 				toast.info("Translations are still running. Wait for them, or publish anyway.");
 				preview.refetch();
@@ -1045,31 +1229,32 @@ function ReviewDraftSheet(t0) {
 			toast.error(error.message || "Could not publish the draft");
 			preview.refetch();
 		};
-		$[25] = preview;
-		$[26] = t13;
-	} else t13 = $[26];
-	let t14;
-	if ($[27] !== t12 || $[28] !== t13) {
-		t14 = {
-			...t11,
-			onSuccess: t12,
-			onError: t13
+		$[29] = preview;
+		$[30] = t15;
+	} else t15 = $[30];
+	let t16;
+	if ($[31] !== t14 || $[32] !== t15) {
+		t16 = {
+			...t13,
+			onSuccess: t14,
+			onError: t15
 		};
-		$[27] = t12;
-		$[28] = t13;
-		$[29] = t14;
-	} else t14 = $[29];
-	const publish = useMutation(t14);
+		$[31] = t14;
+		$[32] = t15;
+		$[33] = t16;
+	} else t16 = $[33];
+	const publish = useMutation(t16);
 	const data = preview.data;
+	const headline = data?.overview.status === "ready" ? data.overview.headline : null;
 	const busy = publish.isPending;
-	const ready = !!data && data.blockers.length === 0 && !busy && !preview.isFetching;
-	let t15;
-	if ($[30] !== data?.translating) {
-		t15 = data?.translating ?? [];
-		$[30] = data?.translating;
-		$[31] = t15;
-	} else t15 = $[31];
-	const translating = t15;
+	const ready = !!data && data.blockers.length === 0 && !data.code?.building && !data.code?.publishing && !busy && !preview.isFetching;
+	let t17;
+	if ($[34] !== data?.translating) {
+		t17 = data?.translating ?? [];
+		$[34] = data?.translating;
+		$[35] = t17;
+	} else t17 = $[35];
+	const translating = t17;
 	const [waiting, setWaiting] = React.useState(null);
 	const translated = !!data && !preview.isFetching && data.translating.length === 0;
 	if (waiting && translated) {
@@ -1077,17 +1262,14 @@ function ReviewDraftSheet(t0) {
 		if (data.blockers.length > 0 || appeared) setWaiting(null);
 	}
 	const { mutate } = publish;
-	let t16;
-	let t17;
-	if ($[32] !== busy || $[33] !== data || $[34] !== mutate || $[35] !== projectId || $[36] !== translated || $[37] !== waiting) {
-		t16 = () => {
+	let t18;
+	let t19;
+	if ($[36] !== busy || $[37] !== data || $[38] !== mutate || $[39] !== projectId || $[40] !== translated || $[41] !== waiting) {
+		t18 = () => {
 			if (!waiting || !translated || !data || busy) return;
-			mutate({
-				projectId,
-				token: data.token
-			}, { onSettled: () => setWaiting(null) });
+			mutate(publishInput(projectId, data), { onSettled: () => setWaiting(null) });
 		};
-		t17 = [
+		t19 = [
 			waiting,
 			translated,
 			data,
@@ -1095,277 +1277,255 @@ function ReviewDraftSheet(t0) {
 			mutate,
 			projectId
 		];
-		$[32] = busy;
-		$[33] = data;
-		$[34] = mutate;
-		$[35] = projectId;
-		$[36] = translated;
-		$[37] = waiting;
-		$[38] = t16;
-		$[39] = t17;
+		$[36] = busy;
+		$[37] = data;
+		$[38] = mutate;
+		$[39] = projectId;
+		$[40] = translated;
+		$[41] = waiting;
+		$[42] = t18;
+		$[43] = t19;
 	} else {
-		t16 = $[38];
-		t17 = $[39];
+		t18 = $[42];
+		t19 = $[43];
 	}
-	React.useEffect(t16, t17);
-	let t18;
-	if ($[40] !== data || $[41] !== projectId || $[42] !== publish || $[43] !== translating.length) {
-		t18 = () => {
+	React.useEffect(t18, t19);
+	let t20;
+	if ($[44] !== data || $[45] !== projectId || $[46] !== publish || $[47] !== translating.length) {
+		t20 = () => {
 			if (!data) return;
-			if (translating.length === 0) return publish.mutate({
-				projectId,
-				token: data.token
-			});
+			if (translating.length === 0) return publish.mutate(publishInput(projectId, data));
 			setWaiting({ conflicts: new Set(data.conflicts.map(conflictKey)) });
 		};
-		$[40] = data;
-		$[41] = projectId;
-		$[42] = publish;
-		$[43] = translating.length;
-		$[44] = t18;
-	} else t18 = $[44];
-	const publishAll = t18;
-	let t19;
-	if ($[45] !== draft.data || $[46] !== projectId) {
-		t19 = draft.data?.kind === "regular" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SheetTitle, {
-			className: "sr-only",
-			children: draftLabel(draft.data)
-		}), /* @__PURE__ */ jsx(DraftNameInput, {
-			ref: nameInput,
-			projectId,
-			draft: draft.data
-		})] }) : /* @__PURE__ */ jsx(SheetTitle, {
-			className: "text-base",
-			children: draft.data ? draftLabel(draft.data) : "Draft"
-		});
-		$[45] = draft.data;
-		$[46] = projectId;
-		$[47] = t19;
-	} else t19 = $[47];
-	let t20;
-	if ($[48] !== draft.data) {
-		t20 = draft.data ? `${draft.data.createdBy.name} · started ${timeAgo(draft.data.createdAt)}` : "Publishing applies this whole draft to Live.";
-		$[48] = draft.data;
-		$[49] = t20;
-	} else t20 = $[49];
+		$[44] = data;
+		$[45] = projectId;
+		$[46] = publish;
+		$[47] = translating.length;
+		$[48] = t20;
+	} else t20 = $[48];
+	const publishWhole = t20;
 	let t21;
-	if ($[50] !== t20) {
-		t21 = /* @__PURE__ */ jsx(SheetDescription, { children: t20 });
-		$[50] = t20;
-		$[51] = t21;
-	} else t21 = $[51];
-	let t22;
-	if ($[52] !== t19 || $[53] !== t21) {
-		t22 = /* @__PURE__ */ jsxs("div", {
+	if ($[49] !== draft.data || $[50] !== headline || $[51] !== projectId) {
+		t21 = /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-1 border-b p-4 pr-12",
-			children: [t19, t21]
+			children: headline ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(SheetDescription, {
+				className: "flex min-w-0 items-center gap-1",
+				children: [draft.data?.kind === "regular" ? /* @__PURE__ */ jsx(DraftNameInput, {
+					ref: nameInput,
+					projectId,
+					draft: draft.data,
+					className: "placeholder:text-muted-foreground text-muted-foreground field-sizing-content h-6 w-auto max-w-full text-sm font-normal"
+				}) : draft.data && /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: draftLabel(draft.data)
+				}), draft.data && /* @__PURE__ */ jsxs("span", {
+					className: "shrink-0",
+					children: [
+						"· ",
+						draft.data.createdBy.name,
+						", started ",
+						timeAgo(draft.data.createdAt)
+					]
+				})]
+			}), /* @__PURE__ */ jsx(SheetTitle, {
+				className: "text-lg leading-snug font-semibold",
+				children: headline
+			})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [draft.data?.kind === "regular" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SheetTitle, {
+				className: "sr-only",
+				children: draftLabel(draft.data)
+			}), /* @__PURE__ */ jsx(DraftNameInput, {
+				ref: nameInput,
+				projectId,
+				draft: draft.data
+			})] }) : /* @__PURE__ */ jsx(SheetTitle, {
+				className: "text-base",
+				children: draft.data ? draftLabel(draft.data) : "Draft"
+			}), /* @__PURE__ */ jsx(SheetDescription, { children: draft.data ? `${draft.data.createdBy.name} · started ${timeAgo(draft.data.createdAt)}` : "Publishing applies this whole draft to Live." })] })
 		});
-		$[52] = t19;
-		$[53] = t21;
-		$[54] = t22;
-	} else t22 = $[54];
-	let t23;
-	if ($[55] !== data) {
-		t23 = data ? /* @__PURE__ */ jsxs("div", {
+		$[49] = draft.data;
+		$[50] = headline;
+		$[51] = projectId;
+		$[52] = t21;
+	} else t21 = $[52];
+	let t22;
+	if ($[53] !== data || $[54] !== locales || $[55] !== onOpenChange || $[56] !== preview || $[57] !== projectId || $[58] !== showInCanvas || $[59] !== waiting) {
+		t22 = data ? /* @__PURE__ */ jsxs("div", {
 			className: "flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-4",
 			children: [
-				/* @__PURE__ */ jsx(Verdict, { preview: data }),
-				/* @__PURE__ */ jsx(Insights, { preview: data }),
-				/* @__PURE__ */ jsx(Changes, {
-					changes: data.changes,
-					defaultLocale: data.defaultLocale ?? void 0
+				/* @__PURE__ */ jsx(DraftOverview, {
+					projectId,
+					preview: data
+				}),
+				/* @__PURE__ */ jsx(Cards, {
+					projectId,
+					preview: data,
+					onChanged: () => void preview.refetch(),
+					onShow: (target) => {
+						onOpenChange(false);
+						showInCanvas(target);
+					},
+					onOpenThread: () => {
+						onOpenChange(false);
+						previewStore.send({ type: "showCanvas" });
+					}
+				}),
+				/* @__PURE__ */ jsx(StatusLines, {
+					preview: data,
+					locales: locales.data ?? [],
+					waiting: !!waiting
 				})
 			]
 		}) : /* @__PURE__ */ jsx("div", {
 			className: "flex flex-1 items-center justify-center",
 			children: /* @__PURE__ */ jsx(Spinner, { className: "text-muted-foreground" })
 		});
-		$[55] = data;
-		$[56] = t23;
-	} else t23 = $[56];
+		$[53] = data;
+		$[54] = locales;
+		$[55] = onOpenChange;
+		$[56] = preview;
+		$[57] = projectId;
+		$[58] = showInCanvas;
+		$[59] = waiting;
+		$[60] = t22;
+	} else t22 = $[60];
+	let t23;
 	let t24;
-	if ($[57] !== translating || $[58] !== waiting) {
-		t24 = translating.length > 0 && /* @__PURE__ */ jsxs("p", {
-			className: "text-muted-foreground flex items-center gap-2 text-sm",
-			children: [
-				/* @__PURE__ */ jsx(Spinner, {
-					"aria-hidden": true,
-					className: "size-3.5 shrink-0"
-				}),
-				"Translating into ",
-				translating.map(localeLabel).join(", "),
-				"…",
-				" ",
-				waiting ? "Publishing once translated." : "Publishing waits for it."
-			]
-		});
-		$[57] = translating;
-		$[58] = waiting;
-		$[59] = t24;
-	} else t24 = $[59];
-	let t25;
-	if ($[60] !== data) {
-		t25 = data && data.conflicts.length > 0 && /* @__PURE__ */ jsxs("p", {
-			className: "text-muted-foreground text-sm",
-			children: [plural(data.conflicts.length, "Live change"), " will be overwritten"]
-		});
-		$[60] = data;
-		$[61] = t25;
-	} else t25 = $[61];
-	let t26;
-	let t27;
-	if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
-		t26 = () => setConfirmingDiscard(true);
-		t27 = /* @__PURE__ */ jsx(Trash2, {});
-		$[62] = t26;
-		$[63] = t27;
+	if ($[61] === Symbol.for("react.memo_cache_sentinel")) {
+		t23 = () => setConfirmingDiscard(true);
+		t24 = /* @__PURE__ */ jsx(Trash2, {});
+		$[61] = t23;
+		$[62] = t24;
 	} else {
-		t26 = $[62];
-		t27 = $[63];
+		t23 = $[61];
+		t24 = $[62];
 	}
-	let t28;
-	if ($[64] !== busy) {
-		t28 = /* @__PURE__ */ jsxs(Button, {
+	let t25;
+	if ($[63] !== busy) {
+		t25 = /* @__PURE__ */ jsxs(Button, {
 			variant: "ghost",
 			className: "text-destructive",
 			disabled: busy,
-			onClick: t26,
-			children: [t27, "Discard draft"]
+			onClick: t23,
+			children: [t24, "Discard draft"]
 		});
-		$[64] = busy;
-		$[65] = t28;
-	} else t28 = $[65];
-	let t29;
-	if ($[66] !== data || $[67] !== projectId || $[68] !== publish || $[69] !== ready || $[70] !== translating.length) {
-		t29 = translating.length > 0 && /* @__PURE__ */ jsx(Button, {
+		$[63] = busy;
+		$[64] = t25;
+	} else t25 = $[64];
+	let t26;
+	if ($[65] !== data || $[66] !== projectId || $[67] !== publish || $[68] !== ready || $[69] !== translating.length) {
+		t26 = translating.length > 0 && /* @__PURE__ */ jsx(Button, {
 			variant: "outline",
 			className: "ml-auto",
 			disabled: !ready,
-			onClick: () => data && publish.mutate({
-				projectId,
-				token: data.token,
-				publishAnyway: true
-			}),
+			onClick: () => data && publish.mutate(publishInput(projectId, data, true)),
 			children: "Publish anyway"
 		});
-		$[66] = data;
-		$[67] = projectId;
-		$[68] = publish;
-		$[69] = ready;
-		$[70] = translating.length;
-		$[71] = t29;
-	} else t29 = $[71];
-	const t30 = translating.length === 0 && "ml-auto";
+		$[65] = data;
+		$[66] = projectId;
+		$[67] = publish;
+		$[68] = ready;
+		$[69] = translating.length;
+		$[70] = t26;
+	} else t26 = $[70];
+	const t27 = translating.length === 0 && "ml-auto";
+	let t28;
+	if ($[71] !== t27) {
+		t28 = cn(t27);
+		$[71] = t27;
+		$[72] = t28;
+	} else t28 = $[72];
+	const t29 = !ready || !!waiting;
+	let t30;
+	if ($[73] !== publish.isPending || $[74] !== waiting) {
+		t30 = publish.isPending || waiting ? /* @__PURE__ */ jsx(Spinner, {}) : null;
+		$[73] = publish.isPending;
+		$[74] = waiting;
+		$[75] = t30;
+	} else t30 = $[75];
 	let t31;
-	if ($[72] !== t30) {
-		t31 = cn(t30);
-		$[72] = t30;
-		$[73] = t31;
-	} else t31 = $[73];
-	const t32 = !ready || !!waiting;
-	let t33;
-	if ($[74] !== publish.isPending || $[75] !== waiting) {
-		t33 = publish.isPending || waiting ? /* @__PURE__ */ jsx(Spinner, {}) : null;
-		$[74] = publish.isPending;
-		$[75] = waiting;
-		$[76] = t33;
-	} else t33 = $[76];
-	let t34;
-	if ($[77] !== publishAll || $[78] !== t31 || $[79] !== t32 || $[80] !== t33) {
-		t34 = /* @__PURE__ */ jsxs(Button, {
-			className: t31,
-			disabled: t32,
-			onClick: publishAll,
-			children: [t33, "Publish all"]
+	if ($[76] !== publishWhole || $[77] !== t28 || $[78] !== t29 || $[79] !== t30) {
+		t31 = /* @__PURE__ */ jsxs(Button, {
+			className: t28,
+			disabled: t29,
+			onClick: publishWhole,
+			children: [t30, "Publish"]
 		});
-		$[77] = publishAll;
-		$[78] = t31;
-		$[79] = t32;
-		$[80] = t33;
-		$[81] = t34;
-	} else t34 = $[81];
-	let t35;
-	if ($[82] !== t28 || $[83] !== t29 || $[84] !== t34) {
-		t35 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [
-				t28,
-				t29,
-				t34
-			]
-		});
-		$[82] = t28;
-		$[83] = t29;
-		$[84] = t34;
-		$[85] = t35;
-	} else t35 = $[85];
-	let t36;
-	if ($[86] !== t24 || $[87] !== t25 || $[88] !== t35) {
-		t36 = /* @__PURE__ */ jsxs("div", {
+		$[76] = publishWhole;
+		$[77] = t28;
+		$[78] = t29;
+		$[79] = t30;
+		$[80] = t31;
+	} else t31 = $[80];
+	let t32;
+	if ($[81] !== t25 || $[82] !== t26 || $[83] !== t31) {
+		t32 = /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-3 border-t p-4",
-			children: [
-				t24,
-				t25,
-				t35
-			]
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					t25,
+					t26,
+					t31
+				]
+			})
 		});
-		$[86] = t24;
-		$[87] = t25;
-		$[88] = t35;
-		$[89] = t36;
-	} else t36 = $[89];
-	let t37;
-	if ($[90] !== initialFocus || $[91] !== t22 || $[92] !== t23 || $[93] !== t36) {
-		t37 = /* @__PURE__ */ jsxs(SheetContent, {
+		$[81] = t25;
+		$[82] = t26;
+		$[83] = t31;
+		$[84] = t32;
+	} else t32 = $[84];
+	let t33;
+	if ($[85] !== initialFocus || $[86] !== t21 || $[87] !== t22 || $[88] !== t32) {
+		t33 = /* @__PURE__ */ jsxs(SheetContent, {
 			ref: popup,
 			initialFocus,
 			side: "right",
 			className: "w-full gap-0 data-[side=right]:sm:max-w-lg",
 			children: [
+				t21,
 				t22,
-				t23,
-				t36
+				t32
 			]
 		});
-		$[90] = initialFocus;
-		$[91] = t22;
-		$[92] = t23;
-		$[93] = t36;
-		$[94] = t37;
-	} else t37 = $[94];
-	let t38;
-	if ($[95] !== onOpenChange || $[96] !== open || $[97] !== t37) {
-		t38 = /* @__PURE__ */ jsx(Sheet, {
+		$[85] = initialFocus;
+		$[86] = t21;
+		$[87] = t22;
+		$[88] = t32;
+		$[89] = t33;
+	} else t33 = $[89];
+	let t34;
+	if ($[90] !== onOpenChange || $[91] !== open || $[92] !== t33) {
+		t34 = /* @__PURE__ */ jsx(Sheet, {
 			open,
 			onOpenChange,
-			children: t37
+			children: t33
 		});
-		$[95] = onOpenChange;
-		$[96] = open;
-		$[97] = t37;
-		$[98] = t38;
-	} else t38 = $[98];
-	let t39;
-	if ($[99] !== confirmingDiscard || $[100] !== leave || $[101] !== projectId) {
-		t39 = /* @__PURE__ */ jsx(DiscardDraftDialog, {
+		$[90] = onOpenChange;
+		$[91] = open;
+		$[92] = t33;
+		$[93] = t34;
+	} else t34 = $[93];
+	let t35;
+	if ($[94] !== confirmingDiscard || $[95] !== leave || $[96] !== projectId) {
+		t35 = /* @__PURE__ */ jsx(DiscardDraftDialog, {
 			projectId,
 			open: confirmingDiscard,
 			onOpenChange: setConfirmingDiscard,
 			onDiscarded: leave
 		});
-		$[99] = confirmingDiscard;
-		$[100] = leave;
-		$[101] = projectId;
-		$[102] = t39;
-	} else t39 = $[102];
-	let t40;
-	if ($[103] !== t38 || $[104] !== t39) {
-		t40 = /* @__PURE__ */ jsxs(Fragment, { children: [t38, t39] });
-		$[103] = t38;
-		$[104] = t39;
-		$[105] = t40;
-	} else t40 = $[105];
-	return t40;
+		$[94] = confirmingDiscard;
+		$[95] = leave;
+		$[96] = projectId;
+		$[97] = t35;
+	} else t35 = $[97];
+	let t36;
+	if ($[98] !== t34 || $[99] !== t35) {
+		t36 = /* @__PURE__ */ jsxs(Fragment, { children: [t34, t35] });
+		$[98] = t34;
+		$[99] = t35;
+		$[100] = t36;
+	} else t36 = $[100];
+	return t36;
 }
 /** Asks before discarding the draft the studio is in, then discards it. */
 function DiscardDraftDialog(t0) {
@@ -1385,7 +1545,7 @@ function DiscardDraftDialog(t0) {
 				onOpenChange(false);
 				onDiscarded(ended);
 			},
-			onError: _temp8
+			onError: _temp10
 		};
 		$[1] = onDiscarded;
 		$[2] = onOpenChange;
@@ -1464,7 +1624,7 @@ function DiscardDraftDialog(t0) {
 	} else t10 = $[25];
 	return t10;
 }
-function _temp8(error) {
+function _temp10(error) {
 	return toast.error(error.message || "Could not discard the draft");
 }