camox 0.44.0 → 0.45.0

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

@@ -0,0 +1,157 @@
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUp, Square } from "lucide-react";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from "@camox/ui/input-group";
+
+//#region src/features/studio/components/ThreadComposer.tsx
+/**
+* Where an editor writes to the agent: Enter sends, Shift+Enter adds a line. While a run is
+* going, sending steers it, and a Stop button sits beside Send.
+*/
+function ThreadComposer(t0) {
+	const $ = c(32);
+	const { onSend, onStop, running: t1, disabled: t2 } = t0;
+	const running = t1 === void 0 ? false : t1;
+	const disabled = t2 === void 0 ? false : t2;
+	const [text, setText] = useState("");
+	let t3;
+	if ($[0] !== text) {
+		t3 = text.trim();
+		$[0] = text;
+		$[1] = t3;
+	} else t3 = $[1];
+	const message = t3;
+	const canSend = !disabled && message !== "" && onSend !== void 0;
+	let t4;
+	if ($[2] !== canSend || $[3] !== message || $[4] !== onSend) {
+		t4 = () => {
+			if (!canSend) return;
+			onSend(message);
+			setText("");
+		};
+		$[2] = canSend;
+		$[3] = message;
+		$[4] = onSend;
+		$[5] = t4;
+	} else t4 = $[5];
+	const submit = t4;
+	let t5;
+	if ($[6] !== submit) {
+		t5 = (event) => {
+			event.preventDefault();
+			submit();
+		};
+		$[6] = submit;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (event_0) => setText(event_0.target.value);
+		$[8] = t6;
+	} else t6 = $[8];
+	let t7;
+	if ($[9] !== submit) {
+		t7 = (event_1) => {
+			if (event_1.key !== "Enter" || event_1.shiftKey || event_1.nativeEvent.isComposing) return;
+			event_1.preventDefault();
+			submit();
+		};
+		$[9] = submit;
+		$[10] = t7;
+	} else t7 = $[10];
+	let t8;
+	if ($[11] !== disabled || $[12] !== t7 || $[13] !== text) {
+		t8 = /* @__PURE__ */ jsx(InputGroupTextarea, {
+			"aria-label": "Message",
+			placeholder: "Message Camox…",
+			value: text,
+			disabled,
+			onChange: t6,
+			onKeyDown: t7,
+			className: "max-h-48 min-h-14"
+		});
+		$[11] = disabled;
+		$[12] = t7;
+		$[13] = text;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== disabled || $[16] !== onStop || $[17] !== running) {
+		t9 = running && onStop && /* @__PURE__ */ jsxs(InputGroupButton, {
+			type: "button",
+			variant: "outline",
+			size: "icon-sm",
+			disabled,
+			onClick: onStop,
+			children: [/* @__PURE__ */ jsx(Square, { className: "fill-current" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Stop"
+			})]
+		});
+		$[15] = disabled;
+		$[16] = onStop;
+		$[17] = running;
+		$[18] = t9;
+	} else t9 = $[18];
+	const t10 = !canSend;
+	let t11;
+	let t12;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(ArrowUp, {});
+		t12 = /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Send"
+		});
+		$[19] = t11;
+		$[20] = t12;
+	} else {
+		t11 = $[19];
+		t12 = $[20];
+	}
+	let t13;
+	if ($[21] !== t10) {
+		t13 = /* @__PURE__ */ jsxs(InputGroupButton, {
+			type: "submit",
+			variant: "default",
+			size: "icon-sm",
+			disabled: t10,
+			children: [t11, t12]
+		});
+		$[21] = t10;
+		$[22] = t13;
+	} else t13 = $[22];
+	let t14;
+	if ($[23] !== t13 || $[24] !== t9) {
+		t14 = /* @__PURE__ */ jsxs(InputGroupAddon, {
+			align: "block-end",
+			className: "justify-end",
+			children: [t9, t13]
+		});
+		$[23] = t13;
+		$[24] = t9;
+		$[25] = t14;
+	} else t14 = $[25];
+	let t15;
+	if ($[26] !== t14 || $[27] !== t8) {
+		t15 = /* @__PURE__ */ jsxs(InputGroup, { children: [t8, t14] });
+		$[26] = t14;
+		$[27] = t8;
+		$[28] = t15;
+	} else t15 = $[28];
+	let t16;
+	if ($[29] !== t15 || $[30] !== t5) {
+		t16 = /* @__PURE__ */ jsx("form", {
+			className: "p-2",
+			onSubmit: t5,
+			children: t15
+		});
+		$[29] = t15;
+		$[30] = t5;
+		$[31] = t16;
+	} else t16 = $[31];
+	return t16;
+}
+
+//#endregion
+export { ThreadComposer };

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

@@ -0,0 +1,113 @@
+import { isHttpTextLinkTarget, isInternalTextLinkTarget } from "../../../core/lib/textLinks.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Lexer } from "marked";
+
+//#region src/features/studio/components/ThreadMarkdown.tsx
+/**
+* The agent's Markdown, rendered as React elements from `marked`'s tokens. Nothing is ever set as
+* HTML: raw HTML in the Markdown shows as text, and only web and root-relative links are links.
+*/
+function ThreadMarkdown(t0) {
+	const $ = c(4);
+	const { text } = t0;
+	let t1;
+	if ($[0] !== text) {
+		t1 = blocks(Lexer.lex(text));
+		$[0] = text;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-2 leading-relaxed",
+			children: t1
+		});
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+}
+const blocks = (tokens) => tokens.map((token, index) => block(token, index));
+function block(token, key) {
+	switch (token.type) {
+		case "space": return null;
+		case "paragraph": return /* @__PURE__ */ jsx("p", { children: inline(token.tokens) }, key);
+		case "heading": return /* @__PURE__ */ jsx("p", {
+			className: "font-semibold",
+			children: inline(token.tokens)
+		}, key);
+		case "list": {
+			const list = token;
+			const items = list.items.map((item, index) => /* @__PURE__ */ jsx("li", { children: item.tokens.flatMap((child, i) => listItemPart(child, i)) }, index));
+			return list.ordered ? /* @__PURE__ */ jsx("ol", {
+				className: "list-decimal pl-5",
+				start: list.start || void 0,
+				children: items
+			}, key) : /* @__PURE__ */ jsx("ul", {
+				className: "list-disc pl-5",
+				children: items
+			}, key);
+		}
+		case "code": return /* @__PURE__ */ jsx("pre", {
+			className: "bg-muted overflow-x-auto rounded-md p-2 text-xs",
+			children: /* @__PURE__ */ jsx("code", { children: token.text })
+		}, key);
+		case "blockquote": return /* @__PURE__ */ jsx("blockquote", {
+			className: "text-muted-foreground border-l-2 pl-3",
+			children: blocks(token.tokens)
+		}, key);
+		case "hr": return /* @__PURE__ */ jsx("hr", {}, key);
+		case "text": {
+			const text = token;
+			return /* @__PURE__ */ jsx("p", { children: text.tokens ? inline(text.tokens) : text.text }, key);
+		}
+		default: return /* @__PURE__ */ jsx("p", { children: token.raw.trim() }, key);
+	}
+}
+/** A list item's tight text stays inline; anything else is a block. */
+function listItemPart(token, key) {
+	if (token.type === "text") {
+		const text = token;
+		return /* @__PURE__ */ jsx("span", { children: text.tokens ? inline(text.tokens) : text.text }, key);
+	}
+	return block(token, key);
+}
+const inline = (tokens = []) => tokens.map((token, key) => inlineToken(token, key));
+function inlineToken(token, key) {
+	switch (token.type) {
+		case "strong": return /* @__PURE__ */ jsx("strong", { children: inline(token.tokens) }, key);
+		case "em": return /* @__PURE__ */ jsx("em", { children: inline(token.tokens) }, key);
+		case "del": return /* @__PURE__ */ jsx("del", { children: inline(token.tokens) }, key);
+		case "codespan": return /* @__PURE__ */ jsx("code", {
+			className: "bg-muted rounded px-1 text-xs",
+			children: token.text
+		}, key);
+		case "br": return /* @__PURE__ */ jsx("br", {}, key);
+		case "link": {
+			const link = token;
+			if (isHttpTextLinkTarget(link.href)) return /* @__PURE__ */ jsx("a", {
+				href: link.href,
+				target: "_blank",
+				rel: "noreferrer",
+				className: "underline",
+				children: inline(link.tokens)
+			}, key);
+			if (isInternalTextLinkTarget(link.href)) return /* @__PURE__ */ jsx("a", {
+				href: link.href,
+				className: "underline",
+				children: inline(link.tokens)
+			}, key);
+			return /* @__PURE__ */ jsx("span", { children: inline(link.tokens) }, key);
+		}
+		case "text":
+		case "escape": {
+			const text = token;
+			return text.tokens ? /* @__PURE__ */ jsx("span", { children: inline(text.tokens) }, key) : text.text;
+		}
+		default: return token.raw;
+	}
+}
+
+//#endregion
+export { ThreadMarkdown };

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

@@ -0,0 +1,270 @@
+import { ThreadMarkdown } from "./ThreadMarkdown.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarFallback, AvatarImage } from "@camox/ui/avatar";
+import { Bubble, BubbleContent } from "@camox/ui/bubble";
+import { Message, MessageAvatar, MessageContent, MessageHeader } from "@camox/ui/message";
+import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "@camox/ui/message-scroller";
+
+//#region src/features/studio/components/ThreadMessages.tsx
+/**
+* A thread's messages, and "Working…" while a run is going or a message is still `sending`: on
+* its way to the thread, which hasn't accepted it yet. A draft's thread is shared, so it shows
+* senders' names too (`showSenders`). A fresh Live thread links to the draft the editor's
+* previous one continued in (`continuedIn`).
+*/
+function ThreadMessages(t0) {
+	const $ = c(25);
+	const { view, sending: t1, showSenders: t2, continuedIn } = t0;
+	const sending = t1 === void 0 ? false : t1;
+	const showSenders = t2 === void 0 ? false : t2;
+	const working = view.running || sending;
+	if (view.messages.length === 0 && !working) {
+		let t3;
+		if ($[0] !== continuedIn) {
+			t3 = continuedIn && /* @__PURE__ */ jsx(ContinuedIn, { link: continuedIn });
+			$[0] = continuedIn;
+			$[1] = t3;
+		} else t3 = $[1];
+		let t4;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = /* @__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."
+			});
+			$[2] = t4;
+		} else t4 = $[2];
+		let t5;
+		if ($[3] !== t3) {
+			t5 = /* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-0 flex-1 flex-col",
+				children: [t3, t4]
+			});
+			$[3] = t3;
+			$[4] = t5;
+		} else t5 = $[4];
+		return t5;
+	}
+	let t3;
+	if ($[5] !== continuedIn) {
+		t3 = continuedIn && /* @__PURE__ */ jsx(ContinuedIn, { link: continuedIn });
+		$[5] = continuedIn;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== showSenders || $[8] !== view.messages || $[9] !== working) {
+		let t5;
+		if ($[11] !== showSenders || $[12] !== view.messages.length || $[13] !== working) {
+			t5 = (message, index) => /* @__PURE__ */ jsxs(MessageScrollerItem, {
+				messageId: message.id,
+				scrollAnchor: message.from === "editor",
+				className: "flex flex-col gap-4",
+				children: [/* @__PURE__ */ jsx(ThreadMessageRow, {
+					message,
+					showSender: showSenders
+				}), working && index === view.messages.length - 1 && /* @__PURE__ */ jsx(Working, {})]
+			}, message.id);
+			$[11] = showSenders;
+			$[12] = view.messages.length;
+			$[13] = working;
+			$[14] = t5;
+		} else t5 = $[14];
+		t4 = view.messages.map(t5);
+		$[7] = showSenders;
+		$[8] = view.messages;
+		$[9] = working;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[15] !== view.messages.length || $[16] !== working) {
+		t5 = working && view.messages.length === 0 && /* @__PURE__ */ jsx(Working, {});
+		$[15] = view.messages.length;
+		$[16] = working;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== t3 || $[19] !== t4 || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
+			className: "flex flex-col gap-4 p-3",
+			children: [
+				t3,
+				t4,
+				t5
+			]
+		}) });
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	let t7;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(MessageScrollerButton, {});
+		$[22] = t7;
+	} else t7 = $[22];
+	let t8;
+	if ($[23] !== t6) {
+		t8 = /* @__PURE__ */ jsx(MessageScrollerProvider, { children: /* @__PURE__ */ jsxs(MessageScroller, {
+			className: "min-h-0 flex-1",
+			children: [t6, t7]
+		}) });
+		$[23] = t6;
+		$[24] = t8;
+	} else t8 = $[24];
+	return t8;
+}
+/**
+* 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 Working() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "shimmer text-muted-foreground text-sm",
+			children: "Working…"
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+function ThreadMessageRow(t0) {
+	const $ = c(17);
+	const { message, showSender } = t0;
+	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) {
+			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];
+		return t2;
+	}
+	if (message.from === "agent") {
+		let t1;
+		if ($[2] !== 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];
+		return t1;
+	}
+	let t1;
+	if ($[4] !== message.sender) {
+		t1 = /* @__PURE__ */ jsx(MessageAvatar, { children: /* @__PURE__ */ jsx(SenderAvatar, { sender: message.sender }) });
+		$[4] = message.sender;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== message.sender || $[7] !== showSender) {
+		t2 = showSender && /* @__PURE__ */ jsx(MessageHeader, {
+			className: "text-muted-foreground text-xs",
+			children: message.sender.name
+		});
+		$[6] = message.sender;
+		$[7] = showSender;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== message.text) {
+		t3 = /* @__PURE__ */ jsx(Bubble, {
+			align: "end",
+			variant: "muted",
+			className: "max-w-full",
+			children: /* @__PURE__ */ jsx(BubbleContent, {
+				className: "whitespace-pre-wrap",
+				children: message.text
+			})
+		});
+		$[9] = message.text;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== t2 || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(MessageContent, { children: [t2, t3] });
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== t1 || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Message, {
+			align: "end",
+			children: [t1, t4]
+		});
+		$[14] = t1;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
+}
+function ContinuedIn(t0) {
+	const $ = c(4);
+	const { link } = t0;
+	let t1;
+	if ($[0] !== link.href || $[1] !== link.label || $[2] !== link.onOpen) {
+		t1 = /* @__PURE__ */ jsxs("p", {
+			className: "text-muted-foreground px-4 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
+				})
+			]
+		});
+		$[0] = link.href;
+		$[1] = link.label;
+		$[2] = link.onOpen;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const initials = (name) => name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
+function SenderAvatar(t0) {
+	const $ = c(10);
+	const { sender } = t0;
+	let t1;
+	if ($[0] !== sender.image || $[1] !== sender.name) {
+		t1 = sender.image && /* @__PURE__ */ jsx(AvatarImage, {
+			src: sender.image,
+			alt: sender.name
+		});
+		$[0] = sender.image;
+		$[1] = sender.name;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== sender.name) {
+		t2 = initials(sender.name);
+		$[3] = sender.name;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(AvatarFallback, { children: t2 });
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t1 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Avatar, { children: [t1, t3] });
+		$[7] = t1;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+}
+
+//#endregion
+export { ThreadMessages };

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

@@ -1,61 +1,61 @@
-import { useLocation, useNavigate } from "../../navigation/navigation.js";
 import { useAuthContext, useAuthState } from "../../../lib/auth.js";
+import { useNavigate } from "../../navigation/navigation.js";
+import { PlatformLabel } from "../../../components/PlatformLabel.js";
+import { useLocalePath, useLocalizedPath } from "../../../lib/view-locale.js";
 import { STUDIO_BASE_PATH } from "../routes.js";
-import { previewStore, selectIsEditMode } from "../../preview/previewStore.js";
+import { studioStore } from "../studioStore.js";
+import { previewStore, selectIsCanvasShown } from "../../preview/previewStore.js";
 import { useApplyTheme } from "../useTheme.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@xstate/store-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
-import { Check, EyeOff, LogOut, Monitor, Moon, Settings, Sun, User } from "lucide-react";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
+import { Check, Command, EyeOff, LogOut, Monitor, Moon, Settings, Sun, User } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "@camox/ui/avatar";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
 
 //#region src/features/studio/components/UserButton.tsx
 const UserButton = () => {
-	const $ = c(5);
-	if ($[0] !== "b876c985f56cb759905567177978ca8597789d0818f006e69fd4bcfb86c58f94") {
-		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b876c985f56cb759905567177978ca8597789d0818f006e69fd4bcfb86c58f94";
-	}
+	const $ = c(4);
 	const { isAuthenticated, isLoading } = useAuthState();
 	const { theme, setTheme } = useApplyTheme();
 	if (!isAuthenticated || isLoading) {
 		let t0;
-		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 			t0 = /* @__PURE__ */ jsx(Button, {
 				variant: "outline",
 				size: "icon",
 				children: /* @__PURE__ */ jsx(User, { className: "h-4 w-4" })
 			});
-			$[1] = t0;
-		} else t0 = $[1];
+			$[0] = t0;
+		} else t0 = $[0];
 		return t0;
 	}
 	let t0;
-	if ($[2] !== setTheme || $[3] !== theme) {
+	if ($[1] !== setTheme || $[2] !== theme) {
 		t0 = /* @__PURE__ */ jsx(AuthenticatedUserButton, {
 			theme,
 			setTheme
 		});
-		$[2] = setTheme;
-		$[3] = theme;
-		$[4] = t0;
-	} else t0 = $[4];
+		$[1] = setTheme;
+		$[2] = theme;
+		$[3] = t0;
+	} else t0 = $[3];
 	return t0;
 };
 function AuthenticatedUserButton({ theme, setTheme }) {
 	const authCtx = useAuthContext();
 	const { data: session } = authCtx.authClient.useSession();
 	const authenticationUrl = authCtx.authenticationUrl;
-	const isEditMode = useSelector(previewStore, selectIsEditMode);
-	const { pathname } = useLocation();
+	const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
+	const pathname = useLocalePath();
+	const localized = useLocalizedPath();
 	const navigate = useNavigate();
-	const isPreviewPage = pathname !== STUDIO_BASE_PATH && !pathname.startsWith(`${STUDIO_BASE_PATH}/`);
+	const isPreviewPage = pathname !== "/camox" && !pathname.startsWith(`${"/camox"}/`);
 	const hideCamoxUi = () => {
 		previewStore.send({ type: "hideToolbar" });
 		if (isPreviewPage) return;
-		navigate({ to: "/" });
+		navigate({ to: localized("/") });
 	};
 	const userName = session?.user?.name || "User";
 	const userEmail = session?.user?.email;
@@ -132,7 +132,18 @@ function AuthenticatedUserButton({ theme, setTheme }) {
 				]
 			})] }),
 			/* @__PURE__ */ jsxs(DropdownMenuItem, {
-				disabled: isPreviewPage && isEditMode,
+				onClick: () => studioStore.send({ type: "openCommandPalette" }),
+				children: [
+					/* @__PURE__ */ jsx(Command, {}),
+					/* @__PURE__ */ jsx("span", { children: "Command palette" }),
+					/* @__PURE__ */ jsx(DropdownMenuShortcut, { children: /* @__PURE__ */ jsx(PlatformLabel, {
+						mac: "⌘ K",
+						other: "Ctrl K"
+					}) })
+				]
+			}),
+			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				disabled: isPreviewPage && isCanvasShown,
 				onClick: hideCamoxUi,
 				children: [/* @__PURE__ */ jsx(EyeOff, {}), /* @__PURE__ */ jsx("span", { children: "Hide Camox UI" })]
 			}),

package/dist/features/studio/draftLabel.js

@@ -0,0 +1,33 @@
+//#region src/features/studio/draftLabel.ts
+const dayFormat = new Intl.DateTimeFormat(void 0, {
+	month: "short",
+	day: "numeric"
+});
+/**
+* A draft's name, or for an unnamed draft its creator and creation date formatted for the
+* viewer, e.g. "Rémi, Oct 13". A development draft is the development draft.
+*/
+function draftLabel(draft) {
+	if (draft.kind === "development") return "Development draft";
+	if (draft.name) return draft.name;
+	return `${draft.createdBy.name}, ${dayFormat.format(draft.createdAt)}`;
+}
+const relative = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+const units = [
+	["year", 31536e6],
+	["month", 2592e6],
+	["week", 6048e5],
+	["day", 864e5],
+	["hour", 36e5],
+	["minute", 6e4]
+];
+/** How long ago a moment was, for the viewer: "3 days ago", "yesterday", "now". */
+function timeAgo(at, now = Date.now()) {
+	const elapsed = now - at;
+	for (const [unit, size] of units) if (elapsed >= size) return relative.format(-Math.round(elapsed / size), unit);
+	return relative.format(0, "minute");
+}
+const plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
+
+//#endregion
+export { draftLabel, plural, timeAgo };

package/dist/features/studio/draftNotice.js

@@ -0,0 +1,13 @@
+//#region src/features/studio/draftNotice.ts
+/** What a member is told when the studio shows Live instead of the draft they opened. */
+function draftNoticeMessage(notice) {
+	switch (notice.reason) {
+		case "missing": return "This draft doesn't exist, so you're viewing Live.";
+		case "noDevelopmentDraft": return "Your development draft doesn't exist until the dev server syncs your definitions, so you're viewing Live.";
+		case "forbidden": return "You can't open this draft, so you're viewing Live.";
+		case "ended": return `${notice.endedBy.name} ${notice.outcome} this draft, so you're viewing Live.`;
+	}
+}
+
+//#endregion
+export { draftNoticeMessage };