camox 0.78.0 → 0.80.0

package/dist/features/brand/VoiceGroup.js

@@ -0,0 +1,443 @@
+import { useDraftScope } from "../../lib/draft-scope.js";
+import { useNavigate } from "../navigation/navigation.js";
+import { reads, useReadQuery, useStudioCache } from "../../lib/studio-reads.js";
+import { cn } from "../../lib/utils.js";
+import { brandMutations } from "../../lib/queries.js";
+import { previewStore } from "../preview/previewStore.js";
+import { useWebsiteHref } from "../studio/components/Navbar.js";
+import { BrandPart } from "./BrandPart.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
+import { Button } from "@camox/ui/button";
+import { Skeleton } from "@camox/ui/skeleton";
+import { Spinner } from "@camox/ui/spinner";
+import { Slider } from "@base-ui/react/slider";
+import { VOICE_AXES } from "@camox/api-contract/voice";
+
+//#region src/features/brand/VoiceGroup.tsx
+/**
+* The Voice group, at the top of the Brand Section (ADR 0051): a slider per Voice Axis, showing
+* its chosen step and that step's definition, as models read it. Moving sliders saves nothing:
+* Save shows while they differ from the saved Voice, and saves every moved axis as one change.
+* Like any edit to the brand, saving while viewing Live starts a draft. "Save and rewrite", beside it,
+* also asks Camox's agent, as the member, to rewrite the site's copy in the new Voice, and shows
+* the draft with its thread beside the Canvas, where the rewrite happens.
+*/
+function VoiceGroup(t0) {
+	const $ = c(37);
+	const { projectId } = t0;
+	let t1;
+	if ($[0] !== projectId) {
+		t1 = reads.voice({ projectId });
+		$[0] = projectId;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { data: saved } = useReadQuery(t1);
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {};
+		$[2] = t2;
+	} else t2 = $[2];
+	const [moved, setMoved] = React.useState(t2);
+	const cache = useStudioCache();
+	const draftScope = useDraftScope();
+	const navigate = useNavigate();
+	const websiteHref = useWebsiteHref();
+	const heading = React.useRef(null);
+	const actions = React.useRef(null);
+	const [justSaved, setJustSaved] = React.useState(false);
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = brandMutations.saveVoice();
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== cache || $[5] !== draftScope || $[6] !== navigate || $[7] !== projectId || $[8] !== websiteHref) {
+		t4 = {
+			...t3,
+			onSuccess: (_voice, t5) => {
+				const { rewrite } = t5;
+				const focused = document.activeElement;
+				const focusWasOnSave = !focused || focused === document.body || actions.current?.contains(focused);
+				setMoved({});
+				cache.invalidate(reads.voice({ projectId }));
+				if (!rewrite) {
+					setJustSaved(true);
+					if (focusWasOnSave) heading.current?.focus();
+					return;
+				}
+				previewStore.send({ type: "showCanvas" });
+				navigate({
+					to: websiteHref(),
+					draft: draftScope.current() ?? void 0
+				});
+			}
+		};
+		$[4] = cache;
+		$[5] = draftScope;
+		$[6] = navigate;
+		$[7] = projectId;
+		$[8] = websiteHref;
+		$[9] = t4;
+	} else t4 = $[9];
+	const save = useMutation(t4);
+	let t5;
+	if ($[10] !== moved || $[11] !== saved) {
+		t5 = saved && {
+			...saved,
+			...moved
+		};
+		$[10] = moved;
+		$[11] = saved;
+		$[12] = t5;
+	} else t5 = $[12];
+	const voice = t5;
+	let t6;
+	if ($[13] !== saved || $[14] !== voice) {
+		t6 = saved && voice ? changedAxes(saved, voice) : {};
+		$[13] = saved;
+		$[14] = voice;
+		$[15] = t6;
+	} else t6 = $[15];
+	const changed = t6;
+	let t7;
+	if ($[16] !== changed) {
+		t7 = Object.keys(changed);
+		$[16] = changed;
+		$[17] = t7;
+	} else t7 = $[17];
+	const dirty = t7.length > 0;
+	const t8 = dirty ? "The Voice has unsaved changes." : justSaved ? "Voice saved." : "";
+	let t9;
+	if ($[18] !== t8) {
+		t9 = /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "sr-only",
+			children: t8
+		});
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== changed || $[21] !== dirty || $[22] !== projectId || $[23] !== save) {
+		t10 = dirty && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap gap-2",
+			children: [/* @__PURE__ */ jsxs(Button, {
+				disabled: save.isPending,
+				onClick: () => save.mutate({
+					projectId,
+					steps: changed
+				}),
+				children: [save.isPending && !save.variables?.rewrite && /* @__PURE__ */ jsx(Spinner, {}), "Save"]
+			}), /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				disabled: save.isPending,
+				onClick: () => save.mutate({
+					projectId,
+					steps: changed,
+					rewrite: true
+				}),
+				children: [save.isPending && save.variables?.rewrite && /* @__PURE__ */ jsx(Spinner, {}), "Save and rewrite"]
+			})]
+		});
+		$[20] = changed;
+		$[21] = dirty;
+		$[22] = projectId;
+		$[23] = save;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== save.error) {
+		t11 = save.error && /* @__PURE__ */ jsx("p", {
+			"data-voice-error": true,
+			role: "alert",
+			className: "text-destructive text-xs",
+			children: save.error.message
+		});
+		$[25] = save.error;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== t10 || $[28] !== t11 || $[29] !== t9) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			ref: actions,
+			className: "flex flex-col items-start gap-3",
+			children: [
+				t9,
+				t10,
+				t11
+			]
+		});
+		$[27] = t10;
+		$[28] = t11;
+		$[29] = t9;
+		$[30] = t12;
+	} else t12 = $[30];
+	let t13;
+	if ($[31] !== save || $[32] !== voice) {
+		t13 = voice ? /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-12",
+			children: VOICE_AXES.map((axis) => /* @__PURE__ */ jsx(VoiceAxisRow, {
+				axis,
+				step: voice[axis.key],
+				disabled: save.isPending,
+				onStep: (step) => {
+					setMoved((current) => ({
+						...current,
+						[axis.key]: step
+					}));
+					setJustSaved(false);
+					save.reset();
+				}
+			}, axis.key))
+		}) : /* @__PURE__ */ jsx(Skeleton, { className: "h-96" });
+		$[31] = save;
+		$[32] = voice;
+		$[33] = t13;
+	} else t13 = $[33];
+	let t14;
+	if ($[34] !== t12 || $[35] !== t13) {
+		t14 = /* @__PURE__ */ jsx(BrandPart, {
+			"data-voice": true,
+			title: "Voice",
+			description: "How the website speaks to visitors.",
+			headingRef: heading,
+			aside: t12,
+			children: t13
+		});
+		$[34] = t12;
+		$[35] = t13;
+		$[36] = t14;
+	} else t14 = $[36];
+	return t14;
+}
+/** The axes `voice` moves away from `saved`, with their new steps. */
+function changedAxes(saved, voice) {
+	const changed = {};
+	for (const { key } of VOICE_AXES) if (voice[key] !== saved[key]) changed[key] = voice[key];
+	return changed;
+}
+const sentenceCase = (text) => text.charAt(0).toUpperCase() + text.slice(1);
+/**
+* One Voice Axis: its name over an oversized slider, with the chosen step's name and definition
+* centered under its stop, and following it as it moves.
+*/
+function VoiceAxisRow(t0) {
+	const $ = c(55);
+	const { axis, step, disabled, onStep } = t0;
+	const steps = axis.steps;
+	const last = steps.length - 1;
+	let t1;
+	if ($[0] !== step || $[1] !== steps) {
+		let t2;
+		if ($[3] !== step) {
+			t2 = (candidate) => candidate.key === step;
+			$[3] = step;
+			$[4] = t2;
+		} else t2 = $[4];
+		t1 = steps.findIndex(t2);
+		$[0] = step;
+		$[1] = steps;
+		$[2] = t1;
+	} else t1 = $[2];
+	const index = Math.max(t1, 0);
+	const chosen = steps[index];
+	const at = index / last * 100;
+	let t2;
+	if ($[5] !== axis.name) {
+		t2 = /* @__PURE__ */ jsx("h3", {
+			"data-voice-axis-name": true,
+			className: "text-sm font-medium",
+			children: axis.name
+		});
+		$[5] = axis.name;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== onStep || $[8] !== steps) {
+		t3 = (value) => {
+			const next = steps[value];
+			if (next) onStep(next.key);
+		};
+		$[7] = onStep;
+		$[8] = steps;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== last || $[11] !== steps) {
+		let t5;
+		if ($[13] !== last) {
+			t5 = (candidate_0, stop) => /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "bg-muted-foreground/80 absolute top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full",
+				style: { left: `${stop / last * 100}%` }
+			}, candidate_0.key);
+			$[13] = last;
+			$[14] = t5;
+		} else t5 = $[14];
+		t4 = steps.map(t5);
+		$[10] = last;
+		$[11] = steps;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[15] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Slider.Track, {
+			className: "bg-muted relative h-2 w-full rounded-full",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none absolute inset-x-3.5 inset-y-0",
+				children: t4
+			})
+		});
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== axis.name) {
+		t6 = () => axis.name;
+		$[17] = axis.name;
+		$[18] = t6;
+	} else t6 = $[18];
+	const t7 = chosen.name;
+	const t8 = steps.length;
+	let t9;
+	if ($[19] !== chosen.definition) {
+		t9 = sentenceCase(chosen.definition);
+		$[19] = chosen.definition;
+		$[20] = t9;
+	} else t9 = $[20];
+	const t10 = `${t7}, ${index + 1} of ${t8}. ${t9}`;
+	let t11;
+	if ($[21] !== t10 || $[22] !== t6) {
+		t11 = /* @__PURE__ */ jsx(Slider.Thumb, {
+			getAriaLabel: t6,
+			"aria-valuetext": t10,
+			className: "border-primary bg-background ring-ring/50 block size-7 shrink-0 rounded-full border-[3px] shadow-md transition-[left,box-shadow] duration-150 ease-out outline-none hover:ring-4 has-focus-visible:ring-4 data-disabled:pointer-events-none motion-reduce:transition-none"
+		});
+		$[21] = t10;
+		$[22] = t6;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t11 || $[25] !== t5) {
+		t12 = /* @__PURE__ */ jsxs(Slider.Control, {
+			className: "relative flex h-8 w-full cursor-pointer touch-none items-center select-none data-disabled:cursor-not-allowed",
+			children: [t5, t11]
+		});
+		$[24] = t11;
+		$[25] = t5;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== disabled || $[28] !== index || $[29] !== last || $[30] !== t12 || $[31] !== t3) {
+		t13 = /* @__PURE__ */ jsx(Slider.Root, {
+			value: index,
+			min: 0,
+			max: last,
+			step: 1,
+			thumbAlignment: "edge",
+			disabled,
+			className: "data-disabled:opacity-50",
+			onValueChange: t3,
+			children: t12
+		});
+		$[27] = disabled;
+		$[28] = index;
+		$[29] = last;
+		$[30] = t12;
+		$[31] = t3;
+		$[32] = t13;
+	} else t13 = $[32];
+	const t14 = index === 0 ? "text-left" : index === last ? "text-right" : "text-center";
+	let t15;
+	if ($[33] !== t14) {
+		t15 = cn("transition-[margin-left] duration-200 ease-out motion-reduce:transition-none", t14);
+		$[33] = t14;
+		$[34] = t15;
+	} else t15 = $[34];
+	const t16 = `clamp(-0.875rem, calc(${at}% - min(8rem, 50%)), calc(100% + 0.875rem - min(16rem, 100%)))`;
+	let t17;
+	if ($[35] !== t16) {
+		t17 = {
+			width: "min(16rem, 100%)",
+			marginLeft: t16
+		};
+		$[35] = t16;
+		$[36] = t17;
+	} else t17 = $[36];
+	const t18 = chosen.key;
+	let t19;
+	if ($[37] !== chosen.name) {
+		t19 = /* @__PURE__ */ jsx("p", {
+			"data-voice-step": true,
+			className: "font-semibold",
+			children: chosen.name
+		});
+		$[37] = chosen.name;
+		$[38] = t19;
+	} else t19 = $[38];
+	let t20;
+	if ($[39] !== chosen.definition) {
+		t20 = sentenceCase(chosen.definition);
+		$[39] = chosen.definition;
+		$[40] = t20;
+	} else t20 = $[40];
+	let t21;
+	if ($[41] !== t20) {
+		t21 = /* @__PURE__ */ jsx("p", {
+			"data-voice-definition": true,
+			className: "text-muted-foreground mt-0.5 text-sm",
+			children: t20
+		});
+		$[41] = t20;
+		$[42] = t21;
+	} else t21 = $[42];
+	let t22;
+	if ($[43] !== chosen.key || $[44] !== t19 || $[45] !== t21) {
+		t22 = /* @__PURE__ */ jsxs("div", {
+			className: "animate-in fade-in-0 duration-200",
+			children: [t19, t21]
+		}, t18);
+		$[43] = chosen.key;
+		$[44] = t19;
+		$[45] = t21;
+		$[46] = t22;
+	} else t22 = $[46];
+	let t23;
+	if ($[47] !== t15 || $[48] !== t17 || $[49] !== t22) {
+		t23 = /* @__PURE__ */ jsx("div", {
+			className: "mx-3.5 min-h-21",
+			children: /* @__PURE__ */ jsx("div", {
+				className: t15,
+				style: t17,
+				children: t22
+			})
+		});
+		$[47] = t15;
+		$[48] = t17;
+		$[49] = t22;
+		$[50] = t23;
+	} else t23 = $[50];
+	let t24;
+	if ($[51] !== t13 || $[52] !== t2 || $[53] !== t23) {
+		t24 = /* @__PURE__ */ jsxs("li", {
+			"data-voice-axis": true,
+			className: "flex flex-col gap-3",
+			children: [
+				t2,
+				t13,
+				t23
+			]
+		});
+		$[51] = t13;
+		$[52] = t2;
+		$[53] = t23;
+		$[54] = t24;
+	} else t24 = $[54];
+	return t24;
+}
+
+//#endregion
+export { VoiceGroup };

package/dist/features/preview/EditablePageExperience.js

@@ -3,7 +3,7 @@ import { CamoxContent } from "../content/CamoxContent.js";
 import { AuthenticatedCamoxProvider } from "../provider/AuthenticatedCamoxProvider.js";
 import { CamoxStudio } from "../studio/CamoxStudio.js";
 import { CompleteBlockEditingRuntimeProvider } from "../../core/editing/CompleteBlockEditingRuntime.js";
-import { CamoxMemory } from "../memory/CamoxMemory.js";
+import { CamoxBrand } from "../brand/CamoxBrand.js";
 import { CamoxSettings } from "../settings/CamoxSettings.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
@@ -12,7 +12,7 @@ import { jsx } from "react/jsx-runtime";
 /** The studio section each studio route shows. */
 const STUDIO_SECTIONS = {
 	"studio-content": CamoxContent,
-	"studio-memory": CamoxMemory,
+	"studio-brand": CamoxBrand,
 	"studio-settings": CamoxSettings
 };
 function EditablePageExperience(t0) {

package/dist/features/runtime/artifactReplay.d.ts

@@ -0,0 +1,3 @@
+import { artifactFrameProps } from "../../core/lib/artifact.js";
+import { connectArtifactHost } from "../../core/lib/artifactHost.js";
+export { artifactFrameProps, connectArtifactHost };

package/dist/features/runtime/artifactReplay.js

@@ -0,0 +1,4 @@
+import { artifactFrameProps } from "../../core/lib/artifact.js";
+import { connectArtifactHost } from "../../core/lib/artifactHost.js";
+
+export { artifactFrameProps, connectArtifactHost };

package/dist/features/runtime/runtime.d.ts

@@ -11,7 +11,7 @@ import { LookPlaceholderHeight } from "@camox/api-contract/drafts";
 import { UseHeadInput } from "unhead/types";
 //#region src/features/runtime/runtime.d.ts
 /** The studio's own routes, rather than a page or the Canvas. */
-declare const STUDIO_ROUTE_KINDS: readonly ["studio", "studio-content", "studio-memory", "studio-settings", "studio-nested"];
+declare const STUDIO_ROUTE_KINDS: readonly ["studio", "studio-content", "studio-brand", "studio-settings", "studio-nested"];
 export type StudioRouteKind = (typeof STUDIO_ROUTE_KINDS)[number];
 export type RuntimeRouteKind = RuntimeOwnedRouteKind | "canvas" | "page" | StudioRouteKind;
 export interface RuntimeRouteMatch {

package/dist/features/runtime/runtime.js

@@ -8,7 +8,7 @@ import { ARTIFACTS_PATH_PREFIX, RUNTIME_ROUTE_PATHS, matchRuntimeOwnedRoute } fr
 import { reads } from "../../lib/studio-reads.js";
 import { recordMarkdownTemplate } from "../../core/recordItem.js";
 import { PLATFORM_SCRIPT } from "../../lib/platform.js";
-import { STUDIO_ASSETS_PATH, STUDIO_CANVAS_PATH, STUDIO_CONTENT_PATH, STUDIO_MEMORY_PATH, STUDIO_SETTINGS_PATH, matchCollectionContentPath } from "../studio/routes.js";
+import { STUDIO_ASSETS_PATH, STUDIO_BRAND_PATH, STUDIO_CANVAS_PATH, STUDIO_CONTENT_PATH, STUDIO_SETTINGS_PATH, matchCollectionContentPath } from "../studio/routes.js";
 import { STUDIO_THEME_SCRIPT } from "../studio/studioTheme.js";
 import { DefaultPageImage, renderPageImage } from "../og/pageImage.js";
 import { discoverLayoutPages } from "../../core/derivedRoutes.js";
@@ -39,7 +39,7 @@ const DEFAULT_RUNTIME_BASE_PATH = "";
 const STUDIO_ROUTE_KINDS = [
 	"studio",
 	"studio-content",
-	"studio-memory",
+	"studio-brand",
 	"studio-settings",
 	"studio-nested"
 ];
@@ -123,8 +123,8 @@ function matchRuntimeRoute(pathname) {
 		kind: "studio-content",
 		pathname
 	};
-	if (pathname === "/camox/memory" || pathname === `${"/camox/memory"}/`) return {
-		kind: "studio-memory",
+	if (pathname === "/camox/brand" || pathname === `${"/camox/brand"}/`) return {
+		kind: "studio-brand",
 		pathname
 	};
 	if (pathname === "/camox/settings" || pathname === `${"/camox/settings"}/`) return {

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

@@ -16,15 +16,16 @@ import { toast } from "@camox/ui/toaster";
 import { Skeleton } from "@camox/ui/skeleton";
 import { Spinner } from "@camox/ui/spinner";
 import { Popover, PopoverContent, PopoverHeader, PopoverTitle, PopoverTrigger } from "@camox/ui/popover";
+import { voiceAxis, voiceStep } from "@camox/api-contract/voice";
 
 //#region src/features/studio/components/DraftReview.tsx
 /**
-* Where a subject sits: its page or layout, or the files, the languages or memory, which belong
-* to none.
+* Where a subject sits: its page or layout, or the files, the languages or the brand (the Voice
+* and memory), which belong to none.
 */
 function ownerName(owner, entity) {
 	if (entity === "locale") return "Languages";
-	if (entity === "memory") return "Memory";
+	if (entity === "memory" || entity === "voiceAxis") return "Brand";
 	if (!owner) return entity === "file" ? "Files" : "Elsewhere";
 	if (owner.kind === "layout") return `Layout ${owner.name}`;
 	if (owner.kind === "syncedBlock") return `Synced block ${owner.title}`;
@@ -219,44 +220,57 @@ const MEMORY_CHANGE_LABELS = {
 	changed: "Changed",
 	deleted: "Deleted"
 };
+/** A Voice Axis the draft moves, as it reads: "Humor: Earnest → Light". */
+function voiceLine({ axis, before, after }) {
+	const stepName = (key) => voiceStep(axis, key).name;
+	return `${voiceAxis(axis).name}: ${stepName(before)} → ${stepName(after)}`;
+}
 /**
-* The memories the draft adds, changes and deletes, each with its text, and Live's before a
-* change: what Camox's agent will remember once it's published. Nothing when it changes none.
+* What publishing the draft changes in the brand: each Voice Axis it moves, from Live's step to the
+* draft's, then the memories it adds, changes and deletes, each with its text, and Live's before a
+* change. Nothing when it changes neither.
 */
-function MemoryChanges(t0) {
-	const $ = c(5);
-	const { changes } = t0;
-	if (changes.length === 0) return null;
+function BrandChanges(t0) {
+	const $ = c(8);
+	const { voice, changes } = t0;
+	if (voice.length === 0 && changes.length === 0) return null;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = /* @__PURE__ */ jsx("h3", {
 			className: "text-sm font-medium",
-			children: "Memory"
+			children: "Brand"
 		});
 		$[0] = t1;
 	} else t1 = $[0];
 	let t2;
-	if ($[1] !== changes) {
-		t2 = changes.map(_temp4);
-		$[1] = changes;
+	if ($[1] !== voice) {
+		t2 = voice.map(_temp4);
+		$[1] = voice;
 		$[2] = t2;
 	} else t2 = $[2];
 	let t3;
-	if ($[3] !== t2) {
-		t3 = /* @__PURE__ */ jsxs("section", {
-			"data-memory-changes": true,
+	if ($[3] !== changes) {
+		t3 = changes.map(_temp5);
+		$[3] = changes;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t2 || $[6] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("section", {
+			"data-brand-changes": true,
 			className: "flex flex-col gap-2",
-			children: [t1, /* @__PURE__ */ jsx("ul", {
+			children: [t1, /* @__PURE__ */ jsxs("ul", {
 				className: "flex flex-col gap-2",
-				children: t2
+				children: [t2, t3]
 			})]
 		});
-		$[3] = t2;
-		$[4] = t3;
-	} else t3 = $[4];
-	return t3;
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
 }
-function _temp4(memory) {
+function _temp5(memory) {
 	return /* @__PURE__ */ jsxs("li", {
 		className: "flex flex-col gap-0.5 rounded-lg border p-3 text-sm",
 		children: [
@@ -275,6 +289,12 @@ function _temp4(memory) {
 		]
 	}, memory.id);
 }
+function _temp4(change) {
+	return /* @__PURE__ */ jsx("li", {
+		className: "rounded-lg border p-3 text-sm",
+		children: /* @__PURE__ */ jsx("p", { children: voiceLine(change) })
+	}, change.axis);
+}
 /**
 * The draft's overview: the bullets AI wrote about its changes, in full, saying it's updating
 * while they describe an older version of the draft. While
@@ -290,7 +310,7 @@ function DraftOverview(t0) {
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = {
 			...draftMutations.retryOverview(),
-			onError: _temp5
+			onError: _temp6
 		};
 		$[0] = t1;
 	} else t1 = $[0];
@@ -311,7 +331,7 @@ function DraftOverview(t0) {
 	if (overview.status === "ready") {
 		let t2;
 		if ($[3] !== overview.bullets) {
-			t2 = overview.bullets.map(_temp6);
+			t2 = overview.bullets.map(_temp7);
 			$[3] = overview.bullets;
 			$[4] = t2;
 		} else t2 = $[4];
@@ -352,7 +372,7 @@ function DraftOverview(t0) {
 	if (overview.status === "failed") {
 		let t2;
 		if ($[12] !== changes) {
-			t2 = new Set(changes.map(_temp7));
+			t2 = new Set(changes.map(_temp8));
 			$[12] = changes;
 			$[13] = t2;
 		} else t2 = $[13];
@@ -455,13 +475,13 @@ function DraftOverview(t0) {
 	} else t2 = $[34];
 	return t2;
 }
-function _temp7(change) {
+function _temp8(change) {
 	return ownerName(change.owner, change.entity);
 }
-function _temp6(bullet, index) {
+function _temp7(bullet, index) {
 	return /* @__PURE__ */ jsx("li", { children: bullet }, index);
 }
-function _temp5(error) {
+function _temp6(error) {
 	return toast.error(error.message || "Could not summarize the draft");
 }
 /**
@@ -569,8 +589,11 @@ function DraftReview(t0) {
 						showInCanvas(target);
 					}
 				}),
-				lines.map(_temp8),
-				/* @__PURE__ */ jsx(MemoryChanges, { changes: data.memoryChanges })
+				lines.map(_temp9),
+				/* @__PURE__ */ jsx(BrandChanges, {
+					voice: data.voiceChanges,
+					changes: data.memoryChanges
+				})
 			]
 		}) : /* @__PURE__ */ jsx("div", {
 			className: cn("flex items-center justify-center", REVIEW_BODY_HEIGHT),
@@ -646,7 +669,7 @@ function DraftReview(t0) {
 	} else t16 = $[50];
 	return t16;
 }
-function _temp8(line) {
+function _temp9(line) {
 	return /* @__PURE__ */ jsx("p", {
 		className: "text-sm text-amber-700 dark:text-amber-400",
 		"data-review-line": true,