camox 0.54.0 → 0.57.0

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

@@ -1,6 +1,8 @@
+import { cn } from "../../../lib/utils.js";
 import { Squareling } from "./Squareling.js";
 import { ThreadMarkdown } from "./ThreadMarkdown.js";
 import { c } from "react/compiler-runtime";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar, AvatarFallback, AvatarImage } from "@camox/ui/avatar";
 import { Bubble, BubbleContent } from "@camox/ui/bubble";
@@ -9,38 +11,43 @@ import { MessageScroller, MessageScrollerButton, MessageScrollerContent, Message
 
 //#region src/features/studio/components/ThreadMessages.tsx
 /**
-* A thread's messages, and the agent's squareling at work while a run is going or a message is
-* still `sending`: on its way to the thread, which hasn't accepted it yet. Its face says whether
-* the agent thinks or acts (uses its tools, or builds its code). While the end of a turn builds
-* the agent's code, or the agent fixes a build error, it says so in words too. Each editor's message shows its sender's
-* avatar, without their name. A fresh Live thread links to the draft the editor's previous one
-* continued in (`continuedIn`).
+* A thread's messages, and the agent's squareling, which always lives in it. An empty thread has
+* it greet the editor; when the first message arrives, it moves to the end of the thread, and
+* stays there after each message. While a run is going or a message is still `sending` (on its
+* way to the thread, which hasn't accepted it yet), its face says whether the agent thinks or
+* acts (uses its tools, or builds its code). While the end of a turn builds the agent's code, or
+* the agent fixes a build error, it says so in words too. Each editor's message shows its
+* sender's avatar, without their name. A Live turn handed off to a draft ends on the draft's
+* card, which `onOpenDraft` opens.
 */
 function ThreadMessages(t0) {
 	const $ = c(20);
-	const { view, sending: t1, continuedIn } = t0;
+	const { view, sending: t1, onOpenDraft } = t0;
 	const sending = t1 === void 0 ? false : t1;
 	const working = view.running || sending;
-	if (view.messages.length === 0 && !working) {
+	const empty = view.messages.length === 0 && !working;
+	const squareling = useSquarelingMorph(empty);
+	if (empty) {
 		let t2;
-		if ($[0] !== continuedIn) {
-			t2 = continuedIn && /* @__PURE__ */ jsx(ContinuedIn, { link: continuedIn });
-			$[0] = continuedIn;
+		if ($[0] !== squareling) {
+			t2 = /* @__PURE__ */ jsx(Squareling, {
+				ref: squareling,
+				status: "idle",
+				className: "size-10"
+			});
+			$[0] = squareling;
 			$[1] = t2;
 		} else t2 = $[1];
 		let t3;
 		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-			t3 = /* @__PURE__ */ jsx("p", {
-				"data-thread-empty": true,
-				className: "text-muted-foreground flex min-h-0 flex-1 items-center justify-center p-4 text-center text-sm",
-				children: "Ask Camox about your website’s content."
-			});
+			t3 = /* @__PURE__ */ jsx("p", { children: "How can I help?" });
 			$[2] = t3;
 		} else t3 = $[2];
 		let t4;
 		if ($[3] !== t2) {
 			t4 = /* @__PURE__ */ jsxs("div", {
-				className: "flex min-h-0 flex-1 flex-col",
+				"data-thread-empty": true,
+				className: "text-muted-foreground flex min-h-0 flex-1 flex-col items-center justify-center gap-3 p-4 text-center text-sm",
 				children: [t2, t3]
 			});
 			$[3] = t2;
@@ -49,108 +56,155 @@ function ThreadMessages(t0) {
 		return t4;
 	}
 	let t2;
-	if ($[5] !== continuedIn) {
-		t2 = continuedIn && /* @__PURE__ */ jsx(ContinuedIn, { link: continuedIn });
-		$[5] = continuedIn;
-		$[6] = t2;
-	} else t2 = $[6];
-	let t3;
-	if ($[7] !== view || $[8] !== working) {
-		t3 = view.messages.map((message, index) => /* @__PURE__ */ jsxs(MessageScrollerItem, {
+	if ($[5] !== onOpenDraft || $[6] !== squareling || $[7] !== view || $[8] !== working) {
+		t2 = view.messages.map((message, index) => /* @__PURE__ */ jsxs(MessageScrollerItem, {
 			messageId: message.id,
 			scrollAnchor: message.from === "editor",
 			className: "flex flex-col gap-4",
-			children: [/* @__PURE__ */ jsx(ThreadMessageRow, { message }), working && index === view.messages.length - 1 && /* @__PURE__ */ jsx(Working, { view })]
+			children: [/* @__PURE__ */ jsx(ThreadMessageRow, {
+				message,
+				onOpenDraft
+			}), index === view.messages.length - 1 && /* @__PURE__ */ jsx(AgentPresence, {
+				view,
+				working,
+				squareling
+			})]
 		}, message.id));
+		$[5] = onOpenDraft;
+		$[6] = squareling;
 		$[7] = view;
 		$[8] = working;
-		$[9] = t3;
-	} else t3 = $[9];
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== squareling || $[11] !== view || $[12] !== working) {
+		t3 = view.messages.length === 0 && /* @__PURE__ */ jsx(AgentPresence, {
+			view,
+			working,
+			squareling
+		});
+		$[10] = squareling;
+		$[11] = view;
+		$[12] = working;
+		$[13] = t3;
+	} else t3 = $[13];
 	let t4;
-	if ($[10] !== view || $[11] !== working) {
-		t4 = working && view.messages.length === 0 && /* @__PURE__ */ jsx(Working, { view });
-		$[10] = view;
-		$[11] = working;
-		$[12] = t4;
-	} else t4 = $[12];
-	let t5;
-	if ($[13] !== t2 || $[14] !== t3 || $[15] !== t4) {
-		t5 = /* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
+	if ($[14] !== t2 || $[15] !== t3) {
+		t4 = /* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
 			className: "flex flex-col gap-4 px-2 py-3",
-			children: [
-				t2,
-				t3,
-				t4
-			]
+			children: [t2, t3]
 		}) });
-		$[13] = t2;
-		$[14] = t3;
-		$[15] = t4;
-		$[16] = t5;
-	} else t5 = $[16];
-	let t6;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	let t5;
 	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(MessageScrollerButton, {});
-		$[17] = t6;
-	} else t6 = $[17];
-	let t7;
-	if ($[18] !== t5) {
-		t7 = /* @__PURE__ */ jsx(MessageScrollerProvider, { children: /* @__PURE__ */ jsxs(MessageScroller, {
+		t5 = /* @__PURE__ */ jsx(MessageScrollerButton, {});
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== t4) {
+		t6 = /* @__PURE__ */ jsx(MessageScrollerProvider, { children: /* @__PURE__ */ jsxs(MessageScroller, {
 			className: "min-h-0 flex-1",
-			children: [t5, t6]
+			children: [t4, t5]
 		}) });
-		$[18] = t5;
-		$[19] = t7;
-	} else t7 = $[19];
-	return t7;
+		$[18] = t4;
+		$[19] = t6;
+	} else t6 = $[19];
+	return t6;
 }
+/** How long the greeting's squareling takes to reach the end of the thread, in ms. */
+const MORPH_DURATION = 350;
+/** A strong ease-in-out, for moving across the screen. */
+const MORPH_EASING = "cubic-bezier(0.77, 0, 0.175, 1)";
 /**
-* Shown in the last message, not after it: the scroller only brings a message the editor just
-* sent into view when it's appended last, and it arrives while the agent is already working.
+* Moves the squareling from where the greeting showed it to the end of the thread, as the first
+* message arrives, so it reads as the same one. Without motion for editors who reduce it.
 */
-function Working(t0) {
-	const $ = c(10);
-	const { view: t1 } = t0;
+function useSquarelingMorph(empty) {
+	const $ = c(2);
+	const node = React.useRef(null);
+	const greeting = React.useRef(null);
+	let t0;
+	if ($[0] !== empty) {
+		t0 = () => {
+			const element = node.current;
+			if (!element) return;
+			if (empty) {
+				greeting.current = element.getBoundingClientRect();
+				return;
+			}
+			const from = greeting.current;
+			greeting.current = null;
+			if (!from || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+			const to = element.getBoundingClientRect();
+			if (to.width === 0) return;
+			const dx = from.left + from.width / 2 - (to.left + to.width / 2);
+			const dy = from.top + from.height / 2 - (to.top + to.height / 2);
+			element.animate([{ transform: `translate(${dx}px, ${dy}px) scale(${from.width / to.width})` }, { transform: "none" }], {
+				duration: MORPH_DURATION,
+				easing: MORPH_EASING
+			});
+		};
+		$[0] = empty;
+		$[1] = t0;
+	} else t0 = $[1];
+	React.useLayoutEffect(t0);
+	return node;
+}
+/**
+* The squareling at the end of the thread: idle between turns, at work during one. Shown in the
+* last message, not after it: the scroller only brings a message the editor just sent into view
+* when it's appended last, and it arrives while the agent is already working.
+*/
+function AgentPresence(t0) {
+	const $ = c(13);
+	const { view: t1, working, squareling } = t0;
 	const { status, usingTools } = t1;
 	let t2;
-	if ($[0] !== status || $[1] !== usingTools) {
-		t2 = squarelingStatus(status, usingTools);
+	if ($[0] !== status || $[1] !== usingTools || $[2] !== working) {
+		t2 = working ? squarelingStatus(status, usingTools) : "idle";
 		$[0] = status;
 		$[1] = usingTools;
-		$[2] = t2;
-	} else t2 = $[2];
+		$[2] = working;
+		$[3] = t2;
+	} else t2 = $[3];
 	let t3;
-	if ($[3] !== t2) {
+	if ($[4] !== squareling || $[5] !== t2) {
 		t3 = /* @__PURE__ */ jsx(Squareling, {
+			ref: squareling,
 			status: t2,
 			className: "size-6"
 		});
-		$[3] = t2;
-		$[4] = t3;
-	} else t3 = $[4];
+		$[4] = squareling;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
 	let t4;
-	if ($[5] !== status) {
-		t4 = status ? /* @__PURE__ */ jsx("span", {
+	if ($[7] !== status || $[8] !== working) {
+		t4 = working && (status ? /* @__PURE__ */ jsx("span", {
 			className: "shimmer",
 			children: STATUS_LINES[status]
 		}) : /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Working…"
-		});
-		$[5] = status;
-		$[6] = t4;
-	} else t4 = $[6];
+		}));
+		$[7] = status;
+		$[8] = working;
+		$[9] = t4;
+	} else t4 = $[9];
 	let t5;
-	if ($[7] !== t3 || $[8] !== t4) {
+	if ($[10] !== t3 || $[11] !== t4) {
 		t5 = /* @__PURE__ */ jsxs("div", {
 			role: "status",
 			className: "text-muted-foreground flex items-center gap-2 text-sm",
 			children: [t3, t4]
 		});
-		$[7] = t3;
-		$[8] = t4;
-		$[9] = t5;
-	} else t5 = $[9];
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
 	return t5;
 }
 function squarelingStatus(status, usingTools) {
@@ -162,41 +216,54 @@ const STATUS_LINES = {
 	fixing: "Fixing a build error…"
 };
 function ThreadMessageRow(t0) {
-	const $ = c(14);
-	const { message } = t0;
+	const $ = c(17);
+	const { message, onOpenDraft } = t0;
+	if (message.from === "draft") {
+		let t1;
+		if ($[0] !== message || $[1] !== onOpenDraft) {
+			t1 = /* @__PURE__ */ jsx(Message, { children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(DraftCard, {
+				message,
+				onOpenDraft
+			}) }) });
+			$[0] = message;
+			$[1] = onOpenDraft;
+			$[2] = t1;
+		} else t1 = $[2];
+		return t1;
+	}
 	if (message.from === "stopped" || message.from === "failed") {
 		const t1 = message.from === "stopped" ? `Stopped by ${message.sender.name}` : "Camox couldn’t finish this. Send your message again to retry.";
 		let t2;
-		if ($[0] !== t1) {
+		if ($[3] !== t1) {
 			t2 = /* @__PURE__ */ jsx(Message, { children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground text-sm",
 				children: t1
 			}) }) });
-			$[0] = t1;
-			$[1] = t2;
-		} else t2 = $[1];
+			$[3] = t1;
+			$[4] = t2;
+		} else t2 = $[4];
 		return t2;
 	}
 	if (message.from === "agent") {
 		let t1;
-		if ($[2] !== message.text) {
+		if ($[5] !== message.text) {
 			t1 = /* @__PURE__ */ jsx(Message, { children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(ThreadMarkdown, { text: message.text }) }) });
-			$[2] = message.text;
-			$[3] = t1;
-		} else t1 = $[3];
+			$[5] = message.text;
+			$[6] = t1;
+		} else t1 = $[6];
 		return t1;
 	}
 	if (message.from === "camox") {
 		let t1;
-		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
 			t1 = /* @__PURE__ */ jsx(MessageHeader, {
 				className: "text-muted-foreground text-xs",
 				children: "Camox"
 			});
-			$[4] = t1;
-		} else t1 = $[4];
+			$[7] = t1;
+		} else t1 = $[7];
 		let t2;
-		if ($[5] !== message.text) {
+		if ($[8] !== message.text) {
 			t2 = /* @__PURE__ */ jsx(Message, { children: /* @__PURE__ */ jsxs(MessageContent, { children: [t1, /* @__PURE__ */ jsx(Bubble, {
 				variant: "muted",
 				className: "max-w-full",
@@ -205,19 +272,19 @@ function ThreadMessageRow(t0) {
 					children: message.text
 				})
 			})] }) });
-			$[5] = message.text;
-			$[6] = t2;
-		} else t2 = $[6];
+			$[8] = message.text;
+			$[9] = t2;
+		} else t2 = $[9];
 		return t2;
 	}
 	let t1;
-	if ($[7] !== message.sender) {
+	if ($[10] !== message.sender) {
 		t1 = /* @__PURE__ */ jsx(MessageAvatar, { children: /* @__PURE__ */ jsx(SenderAvatar, { sender: message.sender }) });
-		$[7] = message.sender;
-		$[8] = t1;
-	} else t1 = $[8];
+		$[10] = message.sender;
+		$[11] = t1;
+	} else t1 = $[11];
 	let t2;
-	if ($[9] !== message.text) {
+	if ($[12] !== message.text) {
 		t2 = /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(Bubble, {
 			align: "end",
 			variant: "muted",
@@ -227,47 +294,100 @@ function ThreadMessageRow(t0) {
 				children: message.text
 			})
 		}) });
-		$[9] = message.text;
-		$[10] = t2;
-	} else t2 = $[10];
+		$[12] = message.text;
+		$[13] = t2;
+	} else t2 = $[13];
 	let t3;
-	if ($[11] !== t1 || $[12] !== t2) {
+	if ($[14] !== t1 || $[15] !== t2) {
 		t3 = /* @__PURE__ */ jsxs(Message, {
 			align: "end",
 			children: [t1, t2]
 		});
-		$[11] = t1;
-		$[12] = t2;
-		$[13] = t3;
-	} else t3 = $[13];
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+	} else t3 = $[16];
 	return t3;
 }
-function ContinuedIn(t0) {
-	const $ = c(4);
-	const { link } = t0;
+const initials = (name) => name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
+const DRAFT_CARD_CLASSES = "bg-muted/50 flex w-full flex-col items-start gap-0.5 rounded-lg border px-3 py-2 text-left text-sm";
+/**
+* The card of the draft the agent on Live handed the request off to, where its agent does the
+* work: it opens the draft. Once the draft ended, there's nothing to open: it says how it ended.
+*/
+function DraftCard(t0) {
+	const $ = c(15);
+	const { message, onOpenDraft } = t0;
 	let t1;
-	if ($[0] !== link.href || $[1] !== link.label || $[2] !== link.onOpen) {
-		t1 = /* @__PURE__ */ jsxs("p", {
-			className: "text-muted-foreground px-2 pt-3 text-center text-sm",
-			children: [
-				"Continued in",
-				" ",
-				/* @__PURE__ */ jsx("a", {
-					href: link.href,
-					onClick: link.onOpen,
-					className: "text-foreground underline",
-					children: link.label
-				})
-			]
+	if ($[0] !== message.name) {
+		t1 = /* @__PURE__ */ jsx("span", {
+			className: "font-medium",
+			children: message.name
 		});
-		$[0] = link.href;
-		$[1] = link.label;
-		$[2] = link.onOpen;
-		$[3] = t1;
-	} else t1 = $[3];
-	return t1;
+		$[0] = message.name;
+		$[1] = t1;
+	} else t1 = $[1];
+	const name = t1;
+	if (message.ended) {
+		const t2 = message.ended === "published" ? "Published" : "Deleted";
+		let t3;
+		if ($[2] !== t2) {
+			t3 = /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs",
+				children: t2
+			});
+			$[2] = t2;
+			$[3] = t3;
+		} else t3 = $[3];
+		let t4;
+		if ($[4] !== name || $[5] !== t3) {
+			t4 = /* @__PURE__ */ jsxs("div", {
+				"data-thread-draft-card": true,
+				className: DRAFT_CARD_CLASSES,
+				children: [t3, name]
+			});
+			$[4] = name;
+			$[5] = t3;
+			$[6] = t4;
+		} else t4 = $[6];
+		return t4;
+	}
+	let t2;
+	if ($[7] !== message.draftId || $[8] !== onOpenDraft) {
+		t2 = () => onOpenDraft?.(message.draftId);
+		$[7] = message.draftId;
+		$[8] = onOpenDraft;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	let t4;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = cn(DRAFT_CARD_CLASSES, "hover:bg-muted focus-visible:ring-ring transition-colors focus-visible:ring-2 focus-visible:outline-none");
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground text-xs",
+			children: "Started a draft"
+		});
+		$[10] = t3;
+		$[11] = t4;
+	} else {
+		t3 = $[10];
+		t4 = $[11];
+	}
+	let t5;
+	if ($[12] !== name || $[13] !== t2) {
+		t5 = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-thread-draft-card": true,
+			onClick: t2,
+			className: t3,
+			children: [t4, name]
+		});
+		$[12] = name;
+		$[13] = t2;
+		$[14] = t5;
+	} else t5 = $[14];
+	return t5;
 }
-const initials = (name) => name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
 function SenderAvatar(t0) {
 	const $ = c(10);
 	const { sender } = t0;

package/dist/features/studio/localeOptions.js

@@ -2,9 +2,13 @@
 const localeNames = new Intl.DisplayNames(["en"], { type: "language" });
 /** A locale's name as the studio shows it, "German (de)", or its tag alone when unnamed. */
 function localeLabel(tag) {
+	const name = localeName(tag);
+	return name !== tag ? `${name} (${tag})` : tag;
+}
+/** A locale's name in the studio's language, "German", or its tag alone when unnamed. */
+function localeName(tag) {
 	try {
-		const name = localeNames.of(tag);
-		return name && name !== tag ? `${name} (${tag})` : tag;
+		return localeNames.of(tag) ?? tag;
 	} catch {
 		return tag;
 	}
@@ -115,4 +119,4 @@ function localeOptions(existing) {
 }
 
 //#endregion
-export { localeLabel, localeOptions };
+export { localeLabel, localeName, localeOptions };

package/dist/features/studio/reportSentence.js

@@ -0,0 +1,75 @@
+import { localeName } from "./localeOptions.js";
+import { reportLocale } from "@camox/api-contract/patrol";
+
+//#region src/features/studio/reportSentence.ts
+const PHRASES = {
+	translated: {
+		done: "Translated",
+		failed: "Couldn't translate",
+		locale: "to"
+	},
+	mergedWithLive: {
+		done: "Translated",
+		failed: "Couldn't translate",
+		locale: "to"
+	},
+	wroteSeo: {
+		done: "Wrote SEO for",
+		failed: "Couldn't write SEO for",
+		locale: "in"
+	},
+	describedFile: {
+		done: "Described",
+		failed: "Couldn't describe",
+		locale: "in"
+	},
+	publishedCatchUp: {
+		done: "Published the caught-up translations",
+		failed: "Couldn't publish the caught-up translations"
+	}
+};
+/** A report as a sentence: "Wrote SEO for Pricing in German", or the text an AI wrote. */
+function reportSentence(summary, outcome) {
+	if (summary.kind === "text") return summary.text;
+	const phrase = PHRASES[summary.verb];
+	const parts = [phrase[outcome]];
+	if (summary.subject) parts.push(summary.subject.name);
+	if (summary.locale && phrase.locale) parts.push(phrase.locale, localeName(summary.locale));
+	return parts.join(" ");
+}
+/**
+* Where clicking a report leads, as its accessible name ends: "show it on the Canvas in German",
+* "open the file on Live". Null for a report that leads nowhere: one without a place.
+*/
+function whereReportLeads({ summary, place, live }, inDraft) {
+	if (!place) return null;
+	const locale = reportLocale(summary);
+	const inLocale = locale ? ` in ${localeName(locale)}` : "";
+	const onLive = inDraft && live;
+	if (place.kind === "file") return `open the file${onLive ? " on Live" : ""}`;
+	if (place.kind === "record") return `open it${inLocale}${onLive ? " on Live" : ""}`;
+	return `show it on ${onLive ? "Live's" : "the"} Canvas${inLocale}`;
+}
+/** The reports not shown, by locale: "…and 212 more in German, 3 in French". */
+function moreSentence(more) {
+	return `…and ${more.map(({ locale, count }, index) => {
+		const where = locale === null ? "" : ` in ${localeName(locale)}`;
+		return `${count}${index === 0 ? " more" : ""}${where}`;
+	}).join(", ")}`;
+}
+const SHORT_UNITS = [
+	["y", 31536e6],
+	["w", 6048e5],
+	["d", 864e5],
+	["h", 36e5],
+	["m", 6e4]
+];
+/** How long ago a moment was, briefly: "now", "2m", "1h". */
+function shortTimeAgo(at, now = Date.now()) {
+	const elapsed = now - at;
+	for (const [unit, size] of SHORT_UNITS) if (elapsed >= size) return `${Math.floor(elapsed / size)}${unit}`;
+	return "now";
+}
+
+//#endregion
+export { moreSentence, reportSentence, shortTimeAgo, whereReportLeads };

package/dist/features/studio/routes.js

@@ -6,6 +6,7 @@ const STUDIO_ASSETS_PATH = `${STUDIO_CONTENT_PATH}/assets`;
 /** The Settings Section, where members change Project Settings. */
 const STUDIO_SETTINGS_PATH = `${STUDIO_BASE_PATH}/settings`;
 const collectionContentPath = (collectionId) => `${STUDIO_CONTENT_PATH}/collections/${encodeURIComponent(collectionId)}`;
+const editCollectionItemPath = (collectionId, id) => `${collectionContentPath(collectionId)}/${encodeURIComponent(id)}/edit`;
 function matchCollectionContentPath(pathname) {
 	const match = /^\/camox\/content\/collections\/([^/]+)(?:(\/new)|\/([^/]+)\/edit)?$/.exec(pathname);
 	if (!match) return null;
@@ -31,4 +32,4 @@ function matchCollectionContentPath(pathname) {
 const STUDIO_CANVAS_PATH = `${STUDIO_BASE_PATH}/canvas`;
 
 //#endregion
-export { STUDIO_ASSETS_PATH, STUDIO_BASE_PATH, STUDIO_CANVAS_PATH, STUDIO_CONTENT_PATH, STUDIO_ROUTE_SEGMENT, STUDIO_SETTINGS_PATH, collectionContentPath, matchCollectionContentPath };
+export { STUDIO_ASSETS_PATH, STUDIO_BASE_PATH, STUDIO_CANVAS_PATH, STUDIO_CONTENT_PATH, STUDIO_ROUTE_SEGMENT, STUDIO_SETTINGS_PATH, collectionContentPath, editCollectionItemPath, matchCollectionContentPath };

package/dist/features/studio/showInCanvas.js

@@ -97,7 +97,11 @@ function useShowInCanvas() {
 	if ($[1] !== cache || $[2] !== navigate || $[3] !== projectUuid || $[4] !== search || $[5] !== view.locale || $[6] !== view.locales) {
 		t1 = async (target) => {
 			const locale = view.locales.find((each) => each.tag === target.locale) ?? view.locale;
-			const page = (await cache.ensure(reads.pageList({ projectUuid }), { locale }).catch(_temp2)).find((each_0) => each_0.id === target.pageId);
+			const inDraft = target.draft === void 0 ? {} : { in: target.draft };
+			const page = (await cache.ensure(reads.pageList({ projectUuid }), {
+				locale,
+				...inDraft
+			}).catch(_temp2)).find((each_0) => each_0.id === target.pageId);
 			if (!page) return;
 			const selection = selectionOf(target);
 			if (selection) selectOnceShown({
@@ -106,7 +110,10 @@ function useShowInCanvas() {
 			}, selection);
 			else stopSelecting?.();
 			previewStore.send({ type: "showCanvas" });
-			await navigate({ to: `${localizedPath(page.fullPath, locale)}${search}` });
+			await navigate({
+				to: `${localizedPath(page.fullPath, locale)}${search}`,
+				...target.draft === void 0 ? {} : { draft: target.draft }
+			});
 		};
 		$[1] = cache;
 		$[2] = navigate;