camox 0.53.1 → 0.56.0

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

@@ -0,0 +1,116 @@
+import { cn } from "../../../lib/utils.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/studio/components/Squareling.tsx
+/**
+* Camox's agent, drawn from the logo's shapes: its square, the soft corner, and the knockout as
+* eyes, looking right like the mark. Its face and motion say what the agent is doing. The
+* animations live in `studio.css`.
+*/
+function Squareling(t0) {
+	const $ = c(18);
+	const { status, className, ref } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = cn("squareling shrink-0 overflow-visible", className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("path", {
+			d: "M20 12H80Q88 12 88 20V64Q88 88 64 88H20Q12 88 12 80V20Q12 12 20 12Z",
+			className: "fill-emerald-500"
+		});
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== status) {
+		t3 = (status === "idle" || status === "thinking") && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			className: "squareling-eye",
+			x: "50",
+			y: "36",
+			width: "11",
+			height: "17"
+		}), /* @__PURE__ */ jsx("rect", {
+			className: "squareling-eye",
+			x: "69",
+			y: "36",
+			width: "11",
+			height: "17"
+		})] });
+		$[3] = status;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== status) {
+		t4 = status === "acting" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			x: "50",
+			y: "44",
+			width: "11",
+			height: "6"
+		}), /* @__PURE__ */ jsx("rect", {
+			x: "69",
+			y: "44",
+			width: "11",
+			height: "6"
+		})] });
+		$[5] = status;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== status) {
+		t5 = status === "fixing" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			x: "50",
+			y: "36",
+			width: "11",
+			height: "17"
+		}), /* @__PURE__ */ jsx("rect", {
+			x: "69",
+			y: "44",
+			width: "11",
+			height: "6"
+		})] });
+		$[7] = status;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t3 || $[10] !== t4 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("g", {
+			className: "squareling-body",
+			children: [t2, /* @__PURE__ */ jsxs("g", {
+				className: "squareling-eyes fill-neutral-950",
+				children: [
+					t3,
+					t4,
+					t5
+				]
+			})]
+		});
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== ref || $[14] !== status || $[15] !== t1 || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsx("svg", {
+			ref,
+			viewBox: "0 0 100 100",
+			"aria-hidden": true,
+			"data-squareling": status,
+			className: t1,
+			children: t6
+		});
+		$[13] = ref;
+		$[14] = status;
+		$[15] = t1;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
+}
+
+//#endregion
+export { Squareling };

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

@@ -1,5 +1,7 @@
+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";
@@ -8,143 +10,208 @@ import { MessageScroller, MessageScrollerButton, MessageScrollerContent, Message
 
 //#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. While the end of a turn builds the
-* agent's code, or the agent fixes a build error, it says so instead. 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`).
+* 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.
 */
 function ThreadMessages(t0) {
-	const $ = c(28);
-	const { view, sending: t1, showSenders: t2, continuedIn } = t0;
+	const $ = c(19);
+	const { view, sending: t1 } = 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) {
+	const empty = view.messages.length === 0 && !working;
+	const squareling = useSquarelingMorph(empty);
+	if (empty) {
+		let t2;
+		if ($[0] !== squareling) {
+			t2 = /* @__PURE__ */ jsx(Squareling, {
+				ref: squareling,
+				status: "idle",
+				className: "size-10"
+			});
+			$[0] = squareling;
+			$[1] = t2;
+		} else t2 = $[1];
 		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", {
+			t3 = /* @__PURE__ */ jsx("p", { children: "How can I help?" });
+			$[2] = t3;
+		} else t3 = $[2];
+		let t4;
+		if ($[3] !== t2) {
+			t4 = /* @__PURE__ */ jsxs("div", {
 				"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."
+				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]
 			});
-			$[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;
+			$[3] = t2;
+			$[4] = t4;
+		} else t4 = $[4];
+		return t4;
 	}
+	let t2;
+	if ($[5] !== squareling || $[6] !== view || $[7] !== 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 }), index === view.messages.length - 1 && /* @__PURE__ */ jsx(AgentPresence, {
+				view,
+				working,
+				squareling
+			})]
+		}, message.id));
+		$[5] = squareling;
+		$[6] = view;
+		$[7] = working;
+		$[8] = t2;
+	} else t2 = $[8];
 	let t3;
-	if ($[5] !== continuedIn) {
-		t3 = continuedIn && /* @__PURE__ */ jsx(ContinuedIn, { link: continuedIn });
-		$[5] = continuedIn;
-		$[6] = t3;
-	} else t3 = $[6];
+	if ($[9] !== squareling || $[10] !== view || $[11] !== working) {
+		t3 = view.messages.length === 0 && /* @__PURE__ */ jsx(AgentPresence, {
+			view,
+			working,
+			squareling
+		});
+		$[9] = squareling;
+		$[10] = view;
+		$[11] = working;
+		$[12] = t3;
+	} else t3 = $[12];
 	let t4;
-	if ($[7] !== showSenders || $[8] !== view.messages || $[9] !== view.status || $[10] !== working) {
-		let t5;
-		if ($[12] !== showSenders || $[13] !== view.messages.length || $[14] !== view.status || $[15] !== 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, { status: view.status })]
-			}, message.id);
-			$[12] = showSenders;
-			$[13] = view.messages.length;
-			$[14] = view.status;
-			$[15] = working;
-			$[16] = t5;
-		} else t5 = $[16];
-		t4 = view.messages.map(t5);
-		$[7] = showSenders;
-		$[8] = view.messages;
-		$[9] = view.status;
-		$[10] = working;
-		$[11] = t4;
-	} else t4 = $[11];
-	let t5;
-	if ($[17] !== view.messages.length || $[18] !== view.status || $[19] !== working) {
-		t5 = working && view.messages.length === 0 && /* @__PURE__ */ jsx(Working, { status: view.status });
-		$[17] = view.messages.length;
-		$[18] = view.status;
-		$[19] = working;
-		$[20] = t5;
-	} else t5 = $[20];
-	let t6;
-	if ($[21] !== t3 || $[22] !== t4 || $[23] !== t5) {
-		t6 = /* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
+	if ($[13] !== t2 || $[14] !== t3) {
+		t4 = /* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
 			className: "flex flex-col gap-4 px-2 py-3",
-			children: [
-				t3,
-				t4,
-				t5
-			]
+			children: [t2, t3]
 		}) });
-		$[21] = t3;
-		$[22] = t4;
-		$[23] = t5;
-		$[24] = t6;
-	} else t6 = $[24];
-	let t7;
-	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ jsx(MessageScrollerButton, {});
-		$[25] = t7;
-	} else t7 = $[25];
-	let t8;
-	if ($[26] !== t6) {
-		t8 = /* @__PURE__ */ jsx(MessageScrollerProvider, { children: /* @__PURE__ */ jsxs(MessageScroller, {
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(MessageScrollerButton, {});
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== t4) {
+		t6 = /* @__PURE__ */ jsx(MessageScrollerProvider, { children: /* @__PURE__ */ jsxs(MessageScroller, {
 			className: "min-h-0 flex-1",
-			children: [t6, t7]
+			children: [t4, t5]
 		}) });
-		$[26] = t6;
-		$[27] = t8;
-	} else t8 = $[27];
-	return t8;
+		$[17] = t4;
+		$[18] = t6;
+	} else t6 = $[18];
+	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) {
+function useSquarelingMorph(empty) {
 	const $ = c(2);
-	const { status } = t0;
-	const t1 = status ? STATUS_LINES[status] : "Working…";
+	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] !== t1) {
-		t2 = /* @__PURE__ */ jsx("p", {
+	if ($[0] !== status || $[1] !== usingTools || $[2] !== working) {
+		t2 = working ? squarelingStatus(status, usingTools) : "idle";
+		$[0] = status;
+		$[1] = usingTools;
+		$[2] = working;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== squareling || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Squareling, {
+			ref: squareling,
+			status: t2,
+			className: "size-6"
+		});
+		$[4] = squareling;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	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…"
+		}));
+		$[7] = status;
+		$[8] = working;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t3 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
 			role: "status",
-			className: "shimmer text-muted-foreground text-sm",
-			children: t1
+			className: "text-muted-foreground flex items-center gap-2 text-sm",
+			children: [t3, t4]
 		});
-		$[0] = t1;
-		$[1] = t2;
-	} else t2 = $[1];
-	return t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+function squarelingStatus(status, usingTools) {
+	if (status === "fixing") return "fixing";
+	return status === "building" || usingTools ? "acting" : "thinking";
 }
 const STATUS_LINES = {
 	building: "Building…",
 	fixing: "Fixing a build error…"
 };
 function ThreadMessageRow(t0) {
-	const $ = c(20);
-	const { message, showSender } = t0;
+	const $ = c(14);
+	const { message } = 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;
@@ -198,18 +265,8 @@ function ThreadMessageRow(t0) {
 		$[8] = t1;
 	} else t1 = $[8];
 	let t2;
-	if ($[9] !== message.sender || $[10] !== showSender) {
-		t2 = showSender && /* @__PURE__ */ jsx(MessageHeader, {
-			className: "text-muted-foreground text-xs",
-			children: message.sender.name
-		});
-		$[9] = message.sender;
-		$[10] = showSender;
-		$[11] = t2;
-	} else t2 = $[11];
-	let t3;
-	if ($[12] !== message.text) {
-		t3 = /* @__PURE__ */ jsx(Bubble, {
+	if ($[9] !== message.text) {
+		t2 = /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(Bubble, {
 			align: "end",
 			variant: "muted",
 			className: "max-w-full",
@@ -217,53 +274,21 @@ function ThreadMessageRow(t0) {
 				className: "whitespace-pre-wrap",
 				children: message.text
 			})
+		}) });
+		$[9] = message.text;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== t1 || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Message, {
+			align: "end",
+			children: [t1, t2]
 		});
-		$[12] = message.text;
+		$[11] = t1;
+		$[12] = t2;
 		$[13] = t3;
 	} else t3 = $[13];
-	let t4;
-	if ($[14] !== t2 || $[15] !== t3) {
-		t4 = /* @__PURE__ */ jsxs(MessageContent, { children: [t2, t3] });
-		$[14] = t2;
-		$[15] = t3;
-		$[16] = t4;
-	} else t4 = $[16];
-	let t5;
-	if ($[17] !== t1 || $[18] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(Message, {
-			align: "end",
-			children: [t1, t4]
-		});
-		$[17] = t1;
-		$[18] = t4;
-		$[19] = t5;
-	} else t5 = $[19];
-	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-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
-				})
-			]
-		});
-		$[0] = link.href;
-		$[1] = link.label;
-		$[2] = link.onOpen;
-		$[3] = t1;
-	} else t1 = $[3];
-	return t1;
+	return t3;
 }
 const initials = (name) => name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
 function SenderAvatar(t0) {

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

@@ -0,0 +1,52 @@
+import { cn } from "../../../lib/utils.js";
+import { BOTTOM_CARD_EDGES, CARD_BODY_EDGES } from "../../preview/components/SidebarStack.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/studio/components/WorkersWidget.tsx
+/** The Agent Sidebar's Workers widget, over the Chat widget. A placeholder for now. */
+function WorkersWidget(t0) {
+	const $ = c(6);
+	const { className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = cn("flex flex-col", className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("header", {
+			className: cn("bg-background flex h-11 min-w-0 shrink-0 items-center justify-center px-3", BOTTOM_CARD_EDGES),
+			children: /* @__PURE__ */ jsx("h2", {
+				className: "truncate text-sm font-medium",
+				children: "Workers"
+			})
+		});
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: cn("bg-background text-muted-foreground flex min-h-0 flex-1 items-center justify-center p-4 text-sm", CARD_BODY_EDGES),
+			children: "No workers yet"
+		});
+		$[2] = t2;
+		$[3] = t3;
+	} else {
+		t2 = $[2];
+		t3 = $[3];
+	}
+	let t4;
+	if ($[4] !== t1) {
+		t4 = /* @__PURE__ */ jsxs("section", {
+			"aria-label": "Workers",
+			"data-workers-widget": true,
+			className: t1,
+			children: [t2, t3]
+		});
+		$[4] = t1;
+		$[5] = t4;
+	} else t4 = $[5];
+	return t4;
+}
+
+//#endregion
+export { WorkersWidget };

package/dist/features/studio/studioStore.js

@@ -9,7 +9,7 @@ const studioStore = createStore({
 			open: false,
 			startRenaming: false
 		},
-		isDiscardDraftDialogOpen: false,
+		isDeleteDraftDialogOpen: false,
 		localeDialog: null,
 		websiteLocation: null
 	},
@@ -64,16 +64,16 @@ const studioStore = createStore({
 				}
 			};
 		},
-		openDiscardDraftDialog: (context) => {
+		openDeleteDraftDialog: (context) => {
 			return {
 				...context,
-				isDiscardDraftDialogOpen: true
+				isDeleteDraftDialogOpen: true
 			};
 		},
-		closeDiscardDraftDialog: (context) => {
+		closeDeleteDraftDialog: (context) => {
 			return {
 				...context,
-				isDiscardDraftDialogOpen: false
+				isDeleteDraftDialogOpen: false
 			};
 		},
 		openLocaleDialog: (context, event) => {

package/dist/features/vite/bundlerLogs.js

@@ -10,6 +10,7 @@ function withoutExpectedCamoxLogs(onLog) {
 function isExpectedCamoxLog(log) {
 	if (log.code === "MODULE_LEVEL_DIRECTIVE") return log.message.includes("\"use client\"");
 	if (log.code === "INEFFECTIVE_DYNAMIC_IMPORT") return log.message.includes("virtual:camox/app");
+	if (log.code === "SOURCEMAP_BROKEN") return log.message.includes("(@tailwindcss/vite:");
 	return false;
 }
 

package/dist/features/vite/runtimeDev.js

@@ -30,6 +30,8 @@ const VIRTUAL_BLOCK_CHUNKS = "virtual:camox/block-chunks";
 const RESOLVED_VIRTUAL_BLOCK_CHUNKS = "\0" + VIRTUAL_BLOCK_CHUNKS;
 const VIRTUAL_APP_STYLESHEET_URL = "virtual:camox/app-stylesheet-url";
 const RESOLVED_VIRTUAL_APP_STYLESHEET_URL = "\0" + VIRTUAL_APP_STYLESHEET_URL;
+const VIRTUAL_APP_STYLESHEET = "virtual:camox/app-stylesheet";
+const RESOLVED_VIRTUAL_APP_STYLESHEET = "\0" + VIRTUAL_APP_STYLESHEET;
 const VIRTUAL_STUDIO_CSS = "virtual:camox-studio-css";
 const RESOLVED_VIRTUAL_STUDIO_CSS = "\0" + VIRTUAL_STUDIO_CSS;
 const VIRTUAL_OVERLAY_CSS = "virtual:camox-overlay-css";
@@ -197,6 +199,11 @@ function generateVirtualAppStylesheetUrl() {
 export default stylesheetUrl;
 `;
 }
+/** The app's compiled stylesheet as text, which page images render with. */
+function generateVirtualAppStylesheet() {
+	return `export { default } from "/src/styles.css?inline";
+`;
+}
 function generateVirtualCamoxServer(runtimeBasePath) {
 	return `import {
   handleCamoxRequest as handleRuntimeRequest,
@@ -227,6 +234,8 @@ const options = {
   developmentDraft: __CAMOX_DEVELOPMENT_DRAFT__,
   getCamoxApp: async () => camoxApp,
   getDocument: async () => camoxDocument,
+  // Loaded by the first page image, so the stylesheet stays out of the Worker's main chunk.
+  getImageStylesheet: () => import("virtual:camox/app-stylesheet").then((module) => module.default),
   projectUuid: __CAMOX_PROJECT_ID__,
   renderPage,
   renderStudio,
@@ -272,6 +281,7 @@ function resolveRuntimeDevId(id, importer) {
 	if (id === VIRTUAL_RENDERER_CLIENT) return RESOLVED_VIRTUAL_RENDERER_CLIENT;
 	if (id === VIRTUAL_RENDERER_CLIENT_URL) return RESOLVED_VIRTUAL_RENDERER_CLIENT_URL;
 	if (id === VIRTUAL_APP_STYLESHEET_URL) return RESOLVED_VIRTUAL_APP_STYLESHEET_URL;
+	if (id === VIRTUAL_APP_STYLESHEET) return RESOLVED_VIRTUAL_APP_STYLESHEET;
 	if (id === VIRTUAL_BLOCK_CHUNKS) return RESOLVED_VIRTUAL_BLOCK_CHUNKS;
 	if (id === VIRTUAL_STUDIO_CSS) return RESOLVED_VIRTUAL_STUDIO_CSS;
 	if (id === VIRTUAL_OVERLAY_CSS) return RESOLVED_VIRTUAL_OVERLAY_CSS;
@@ -291,6 +301,7 @@ function loadRuntimeDevModule(id, options = {}) {
 	if (id === RESOLVED_VIRTUAL_RENDERER_CLIENT) return generateVirtualRendererClient();
 	if (id === RESOLVED_VIRTUAL_RENDERER_CLIENT_URL) return generateVirtualRendererClientUrl();
 	if (id === RESOLVED_VIRTUAL_APP_STYLESHEET_URL) return generateVirtualAppStylesheetUrl();
+	if (id === RESOLVED_VIRTUAL_APP_STYLESHEET) return generateVirtualAppStylesheet();
 	if (id === RESOLVED_VIRTUAL_STUDIO_CSS) {
 		const cssUrl = `/@fs/${resolve(sdkRoot, "dist/studio.css").replaceAll("\\", "/").replace(/^\/+/, "")}`;
 		return `export default ${JSON.stringify(cssUrl)};`;

package/dist/features/vite/vite.js

@@ -123,7 +123,8 @@ const CAMOX_OPTIMIZED_DEPS = [
 	"camox > @shikijs/themes/github-dark-high-contrast",
 	"camox > @shikijs/themes/github-light",
 	"camox > @sinclair/typebox",
-	"camox > @takumi-rs/image-response",
+	"camox > takumi-js/helpers",
+	"camox > takumi-js/response",
 	"camox > @tanstack/react-form",
 	"camox > @tanstack/react-query",
 	"camox > @tanstack/react-router",
@@ -189,6 +190,7 @@ function camox(options) {
 	return {
 		name: "camox",
 		enforce: "pre",
+		sharedDuringBuild: true,
 		resolveId(id, importer) {
 			if (hostedProject) {
 				const forbidden = forbiddenImport(hostedProject, id, importer);