camox 0.51.0 → 0.52.2

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

@@ -9,12 +9,13 @@ 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. A draft's thread is shared, so it shows
+* 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`).
 */
 function ThreadMessages(t0) {
-	const $ = c(25);
+	const $ = c(28);
 	const { view, sending: t1, showSenders: t2, continuedIn } = t0;
 	const sending = t1 === void 0 ? false : t1;
 	const showSenders = t2 === void 0 ? false : t2;
@@ -53,9 +54,9 @@ function ThreadMessages(t0) {
 		$[6] = t3;
 	} else t3 = $[6];
 	let t4;
-	if ($[7] !== showSenders || $[8] !== view.messages || $[9] !== working) {
+	if ($[7] !== showSenders || $[8] !== view.messages || $[9] !== view.status || $[10] !== working) {
 		let t5;
-		if ($[11] !== showSenders || $[12] !== view.messages.length || $[13] !== working) {
+		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",
@@ -63,28 +64,31 @@ function ThreadMessages(t0) {
 				children: [/* @__PURE__ */ jsx(ThreadMessageRow, {
 					message,
 					showSender: showSenders
-				}), working && index === view.messages.length - 1 && /* @__PURE__ */ jsx(Working, {})]
+				}), working && index === view.messages.length - 1 && /* @__PURE__ */ jsx(Working, { status: view.status })]
 			}, message.id);
-			$[11] = showSenders;
-			$[12] = view.messages.length;
-			$[13] = working;
-			$[14] = t5;
-		} else t5 = $[14];
+			$[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] = working;
-		$[10] = t4;
-	} else t4 = $[10];
+		$[9] = view.status;
+		$[10] = working;
+		$[11] = t4;
+	} else t4 = $[11];
 	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];
+	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 ($[18] !== t3 || $[19] !== t4 || $[20] !== t5) {
+	if ($[21] !== t3 || $[22] !== t4 || $[23] !== t5) {
 		t6 = /* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
 			className: "flex flex-col gap-4 px-2 py-3",
 			children: [
@@ -93,46 +97,53 @@ function ThreadMessages(t0) {
 				t5
 			]
 		}) });
-		$[18] = t3;
-		$[19] = t4;
-		$[20] = t5;
-		$[21] = t6;
-	} else t6 = $[21];
+		$[21] = t3;
+		$[22] = t4;
+		$[23] = t5;
+		$[24] = t6;
+	} else t6 = $[24];
 	let t7;
-	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
 		t7 = /* @__PURE__ */ jsx(MessageScrollerButton, {});
-		$[22] = t7;
-	} else t7 = $[22];
+		$[25] = t7;
+	} else t7 = $[25];
 	let t8;
-	if ($[23] !== t6) {
+	if ($[26] !== 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];
+		$[26] = t6;
+		$[27] = t8;
+	} else t8 = $[27];
 	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", {
+function Working(t0) {
+	const $ = c(2);
+	const { status } = t0;
+	const t1 = status ? STATUS_LINES[status] : "Working…";
+	let t2;
+	if ($[0] !== t1) {
+		t2 = /* @__PURE__ */ jsx("p", {
 			role: "status",
 			className: "shimmer text-muted-foreground text-sm",
-			children: "Working…"
+			children: t1
 		});
-		$[0] = t0;
-	} else t0 = $[0];
-	return t0;
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	return t2;
 }
+const STATUS_LINES = {
+	building: "Building…",
+	fixing: "Fixing a build error…"
+};
 function ThreadMessageRow(t0) {
-	const $ = c(17);
+	const $ = c(20);
 	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.";
@@ -156,24 +167,48 @@ function ThreadMessageRow(t0) {
 		} else t1 = $[3];
 		return t1;
 	}
+	if (message.from === "camox") {
+		let t1;
+		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(MessageHeader, {
+				className: "text-muted-foreground text-xs",
+				children: "Camox"
+			});
+			$[4] = t1;
+		} else t1 = $[4];
+		let t2;
+		if ($[5] !== message.text) {
+			t2 = /* @__PURE__ */ jsx(Message, { children: /* @__PURE__ */ jsxs(MessageContent, { children: [t1, /* @__PURE__ */ jsx(Bubble, {
+				variant: "muted",
+				className: "max-w-full",
+				children: /* @__PURE__ */ jsx(BubbleContent, {
+					className: "whitespace-pre-wrap",
+					children: message.text
+				})
+			})] }) });
+			$[5] = message.text;
+			$[6] = t2;
+		} else t2 = $[6];
+		return t2;
+	}
 	let t1;
-	if ($[4] !== message.sender) {
+	if ($[7] !== message.sender) {
 		t1 = /* @__PURE__ */ jsx(MessageAvatar, { children: /* @__PURE__ */ jsx(SenderAvatar, { sender: message.sender }) });
-		$[4] = message.sender;
-		$[5] = t1;
-	} else t1 = $[5];
+		$[7] = message.sender;
+		$[8] = t1;
+	} else t1 = $[8];
 	let t2;
-	if ($[6] !== message.sender || $[7] !== showSender) {
+	if ($[9] !== message.sender || $[10] !== 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];
+		$[9] = message.sender;
+		$[10] = showSender;
+		$[11] = t2;
+	} else t2 = $[11];
 	let t3;
-	if ($[9] !== message.text) {
+	if ($[12] !== message.text) {
 		t3 = /* @__PURE__ */ jsx(Bubble, {
 			align: "end",
 			variant: "muted",
@@ -183,26 +218,26 @@ function ThreadMessageRow(t0) {
 				children: message.text
 			})
 		});
-		$[9] = message.text;
-		$[10] = t3;
-	} else t3 = $[10];
+		$[12] = message.text;
+		$[13] = t3;
+	} else t3 = $[13];
 	let t4;
-	if ($[11] !== t2 || $[12] !== t3) {
+	if ($[14] !== t2 || $[15] !== t3) {
 		t4 = /* @__PURE__ */ jsxs(MessageContent, { children: [t2, t3] });
-		$[11] = t2;
-		$[12] = t3;
-		$[13] = t4;
-	} else t4 = $[13];
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
 	let t5;
-	if ($[14] !== t1 || $[15] !== t4) {
+	if ($[17] !== t1 || $[18] !== t4) {
 		t5 = /* @__PURE__ */ jsxs(Message, {
 			align: "end",
 			children: [t1, t4]
 		});
-		$[14] = t1;
-		$[15] = t4;
-		$[16] = t5;
-	} else t5 = $[16];
+		$[17] = t1;
+		$[18] = t4;
+		$[19] = t5;
+	} else t5 = $[19];
 	return t5;
 }
 function ContinuedIn(t0) {

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

@@ -2,9 +2,9 @@ import { useAuthContext, useAuthState } from "../../../lib/auth.js";
 import { useNavigate } from "../../navigation/navigation.js";
 import { useLocalePath, useLocalizedPath } from "../../../lib/view-locale.js";
 import { PlatformLabel } from "../../../components/PlatformLabel.js";
+import { previewStore, selectIsCanvasShown } from "../../preview/previewStore.js";
 import { STUDIO_BASE_PATH } from "../routes.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 { useSelector } from "@xstate/store-react";

package/dist/features/vite/definitionsSync.js

@@ -207,4 +207,4 @@ async function syncDefinitions(server, options) {
 }
 
 //#endregion
-export { VIRTUAL_CAMOX_APP, syncDefinitions, syncDefinitionsToApi };
+export { VIRTUAL_CAMOX_APP, loadDefinitionSet, syncDefinitions, syncDefinitionsToApi };

package/dist/features/vite/hostedChecks.js

@@ -0,0 +1,127 @@
+import { readFileSync } from "node:fs";
+import { dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
+import { fileURLToPath } from "node:url";
+import { Visitor, parseSync } from "vite-plus";
+
+//#region src/features/vite/hostedChecks.ts
+/**
+* Set by Camox's revision and release sandboxes: a hosted project's build checks the code an
+* agent may have written (ADR 0021). `apps/landing` and dev mode never set it.
+*/
+const HOSTED_BUILD_ENV = "CAMOX_INTERNAL_HOSTED";
+const sdkRoot = resolve(dirname(fileURLToPath(import.meta.url)), "../../..");
+/** `camox`'s public entry points, as `camox/<path>`: its exports, less its internal ones. */
+function camoxEntryPoints() {
+	const { exports } = JSON.parse(readFileSync(join(sdkRoot, "package.json"), "utf8"));
+	return new Set(Object.keys(exports).filter((path) => !path.startsWith("./_internal/")).map((path) => `camox${path.slice(1)}`));
+}
+function readHostedProject(root) {
+	const { dependencies = {} } = JSON.parse(readFileSync(join(root, "package.json"), "utf8"));
+	return {
+		root,
+		src: join(root, "src"),
+		dependencies: new Set(Object.keys(dependencies)),
+		camoxEntryPoints: camoxEntryPoints()
+	};
+}
+const withoutQuery = (path) => path.replace(/[?#].*$/, "");
+const isInside = (dir, path) => path.startsWith(dir + sep);
+const displayPath = (project, file) => relative(project.root, file).split(sep).join("/");
+/** The project's own file an importer names, when it is one of `src/`'s: the code it checks. */
+function sourceFile(project, importer) {
+	if (!importer || importer.startsWith("\0")) return;
+	const file = withoutQuery(importer);
+	return isAbsolute(file) && isInside(project.src, file) ? file : void 0;
+}
+function isAllowedImport(project, specifier, importer) {
+	if (specifier.startsWith("\0")) return true;
+	const path = withoutQuery(specifier);
+	let file;
+	if (path.startsWith("./") || path.startsWith("../")) file = resolve(dirname(importer), path);
+	else if (path.startsWith("@/")) file = resolve(project.src, path.slice(2));
+	else if (path.startsWith("/")) file = isInside(project.root, path) ? resolve(path) : resolve(project.root, `.${path}`);
+	if (file !== void 0) return isInside(project.src, file);
+	if (path === "camox" || path.startsWith("camox/")) return project.camoxEntryPoints.has(path);
+	const [scopeOrName, name] = path.split("/");
+	const packageName = scopeOrName.startsWith("@") ? `${scopeOrName}/${name}` : scopeOrName;
+	return project.dependencies.has(packageName);
+}
+/**
+* Why a file of `src/` can't import `specifier`, or nothing when it may: files of `src/`,
+* `camox`'s public entry points and `package.json`'s `dependencies`.
+*/
+function forbiddenImport(project, specifier, importer) {
+	const file = sourceFile(project, importer);
+	if (!file || isAllowedImport(project, specifier, file)) return;
+	return `${displayPath(project, file)} imports "${specifier}", which a hosted project can't import. It can import files in src/, camox's public entry points and the packages package.json lists in dependencies.`;
+}
+/** The modules the registry loads blocks from, as its globs name them. */
+const BLOCK_MODULE = /^src\/(?:camox\/)?blocks\/([^/]+)\.tsx?$/;
+/** A string an expression spells out, without running it. */
+function literalString(node) {
+	if (node?.type === "Literal" && typeof node.value === "string") return node.value;
+	if (node?.type === "TemplateLiteral" && node.expressions.length === 0) return node.quasis[0]?.value.cooked ?? void 0;
+}
+/**
+* Whether `callee` calls `createBlock`: by its name, the names a module imports it as
+* (`import { createBlock as defineBlock }`), or as a namespace's member.
+*/
+function isCreateBlock(callee, names) {
+	if (callee.type === "Identifier") return names.has(callee.name);
+	return callee.type === "MemberExpression" && callee.property.type === "Identifier" && callee.property.name === "createBlock";
+}
+/** The local names a module calls `createBlock` by: its own name, and its imports' aliases. */
+function createBlockNames(program) {
+	const names = /* @__PURE__ */ new Set(["createBlock"]);
+	for (const statement of program.body) {
+		if (statement.type !== "ImportDeclaration") continue;
+		for (const specifier of statement.specifiers) {
+			if (specifier.type !== "ImportSpecifier") continue;
+			const imported = specifier.imported;
+			if ((imported.type === "Identifier" ? imported.name : imported.value) === "createBlock") names.add(specifier.local.name);
+		}
+	}
+	return names;
+}
+/** The `id` a block definition's object literal spells out. */
+function definitionId(definition) {
+	if (definition?.type !== "ObjectExpression") return;
+	for (const property of definition.properties) {
+		if (property.type !== "Property" || property.computed) continue;
+		const key = property.key;
+		if (key.type === "Identifier" && key.name === "id" || key.type === "Literal" && key.value === "id") return property.value;
+	}
+}
+/**
+* Why a block's module breaks the registry, or nothing when it doesn't. The browser finds a block
+* by its file name, so a block's file must be named after its id: the build reads the id from the
+* `createBlock()` call, and needs it written as a string.
+*/
+function misnamedBlock(project, moduleId, code) {
+	const file = sourceFile(project, moduleId);
+	if (!file) return;
+	const path = displayPath(project, file);
+	const fileName = BLOCK_MODULE.exec(path)?.[1];
+	if (!fileName) return;
+	const { program, errors } = parseSync(file, code);
+	if (errors.length > 0) return;
+	let problem;
+	const names = createBlockNames(program);
+	new Visitor({ CallExpression(call) {
+		if (problem || !isCreateBlock(call.callee, names)) return;
+		const id = literalString(definitionId(call.arguments[0]));
+		const at = definitionId(call.arguments[0])?.start ?? call.start;
+		if (id === void 0) problem = {
+			message: `${path} calls createBlock() without its id as a string literal, which the build needs to check that the file is named after it: write \`id: "${fileName}"\`.`,
+			at
+		};
+		else if (id !== fileName) problem = {
+			message: `${path} defines the block "${id}", but its file is named "${fileName}": a block's file is named after its id. Rename the file to ${id}${file.slice(file.lastIndexOf("."))} or the id to "${fileName}".`,
+			at
+		};
+	} }).visit(program);
+	return problem;
+}
+
+//#endregion
+export { HOSTED_BUILD_ENV, forbiddenImport, misnamedBlock, readHostedProject };

package/dist/features/vite/runtimeDev.js

@@ -22,6 +22,10 @@ const VIRTUAL_STUDIO_CLIENT = "virtual:camox/studio-client";
 const RESOLVED_VIRTUAL_STUDIO_CLIENT = "\0" + VIRTUAL_STUDIO_CLIENT;
 const VIRTUAL_STUDIO_CLIENT_URL = "virtual:camox/studio-client-url";
 const RESOLVED_VIRTUAL_STUDIO_CLIENT_URL = "\0" + VIRTUAL_STUDIO_CLIENT_URL;
+const VIRTUAL_RENDERER_CLIENT = "virtual:camox/renderer-client";
+const RESOLVED_VIRTUAL_RENDERER_CLIENT = "\0" + VIRTUAL_RENDERER_CLIENT;
+const VIRTUAL_RENDERER_CLIENT_URL = "virtual:camox/renderer-client-url";
+const RESOLVED_VIRTUAL_RENDERER_CLIENT_URL = "\0" + VIRTUAL_RENDERER_CLIENT_URL;
 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";
@@ -64,6 +68,7 @@ function resolveCamoxSourceImport(id) {
 		"camox/_internal/pageServer": resolve(sdkRoot, "src/features/runtime/pageServer.tsx"),
 		"camox/_internal/pageClient": resolve(sdkRoot, "src/features/runtime/pageClient.tsx"),
 		"camox/_internal/studioClient": resolve(sdkRoot, "src/features/runtime/studioClient.tsx"),
+		"camox/_internal/rendererClient": resolve(sdkRoot, "src/features/runtime/rendererClient.tsx"),
 		"camox/_internal/studioServer": resolve(sdkRoot, "src/features/runtime/studioServer.tsx"),
 		"camox/_internal/runtime": resolve(sdkRoot, "src/features/runtime/runtime.ts"),
 		"camox/worker": resolve(sdkRoot, "src/features/runtime/worker.ts")
@@ -167,6 +172,13 @@ import { camoxApp } from "virtual:camox/app";
 hydrateStudioWithApp(camoxApp);
 `;
 }
+function generateVirtualRendererClient() {
+	return `import { startRendererWithApp } from "camox/_internal/rendererClient";
+import { camoxApp } from "virtual:camox/app";
+
+startRendererWithApp(camoxApp);
+`;
+}
 function wrapViteDevId(id) {
 	return `/@id/${id.replace("\0", "__x00__")}`;
 }
@@ -176,6 +188,9 @@ function generateVirtualPageClientUrl() {
 function generateVirtualStudioClientUrl() {
 	return `export default ${JSON.stringify(wrapViteDevId(RESOLVED_VIRTUAL_STUDIO_CLIENT))};`;
 }
+function generateVirtualRendererClientUrl() {
+	return `export default ${JSON.stringify(wrapViteDevId(RESOLVED_VIRTUAL_RENDERER_CLIENT))};`;
+}
 function generateVirtualAppStylesheetUrl() {
 	return `import stylesheetUrl from "/src/styles.css?url";
 
@@ -194,6 +209,7 @@ import appStylesheetUrl from "virtual:camox/app-stylesheet-url";
 import studioStylesheetUrl from "virtual:camox-studio-css";
 import pageClientEntryUrl from "virtual:camox/page-client-url";
 import studioClientEntryUrl from "virtual:camox/studio-client-url";
+import rendererClientEntryUrl from "virtual:camox/renderer-client-url";
 import { renderPage } from "virtual:camox/page-server";
 import { renderStudio } from "virtual:camox/studio-server";
 import devHtml from "virtual:camox/dev-html";
@@ -207,6 +223,7 @@ const options = {
   blockPreloads: { modulePaths: blockModulePaths, chunks: blockChunks },
   pageClientEntryUrl,
   studioClientEntryUrl,
+  rendererClientEntryUrl,
   developmentDraft: __CAMOX_DEVELOPMENT_DRAFT__,
   getCamoxApp: async () => camoxApp,
   getDocument: async () => camoxDocument,
@@ -231,6 +248,11 @@ export async function handleCamoxRequest(request) {
 export function isPublicRequest(request) {
   return isPublicRuntimeRequest(request, options);
 }
+
+// JSON, as \`definitions.sync\` receives it: what isn't JSON never reaches the API.
+export async function readDefinitionSet() {
+  return JSON.parse(JSON.stringify(await camoxApp.getDefinitionSet()));
+}
 `;
 }
 function resolveRuntimeDevId(id, importer) {
@@ -247,6 +269,8 @@ function resolveRuntimeDevId(id, importer) {
 	if (id === VIRTUAL_PAGE_CLIENT_URL) return RESOLVED_VIRTUAL_PAGE_CLIENT_URL;
 	if (id === VIRTUAL_STUDIO_CLIENT) return RESOLVED_VIRTUAL_STUDIO_CLIENT;
 	if (id === VIRTUAL_STUDIO_CLIENT_URL) return RESOLVED_VIRTUAL_STUDIO_CLIENT_URL;
+	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_BLOCK_CHUNKS) return RESOLVED_VIRTUAL_BLOCK_CHUNKS;
 	if (id === VIRTUAL_STUDIO_CSS) return RESOLVED_VIRTUAL_STUDIO_CSS;
@@ -264,6 +288,8 @@ function loadRuntimeDevModule(id, options = {}) {
 	if (id === RESOLVED_VIRTUAL_PAGE_CLIENT_URL) return generateVirtualPageClientUrl();
 	if (id === RESOLVED_VIRTUAL_STUDIO_CLIENT) return generateVirtualStudioClient();
 	if (id === RESOLVED_VIRTUAL_STUDIO_CLIENT_URL) return generateVirtualStudioClientUrl();
+	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_STUDIO_CSS) {
 		const cssUrl = `/@fs/${resolve(sdkRoot, "dist/studio.css").replaceAll("\\", "/").replace(/^\/+/, "")}`;

package/dist/features/vite/vite.js

@@ -1,4 +1,5 @@
 import { createServerApiClient } from "../../lib/api-client-server.js";
+import { ASSET_PREFIX_GLOBAL } from "../runtime/assetPrefix.js";
 import { transformArtifactRuntime } from "./artifactRuntimeMinification.js";
 import { readAuthTokenForUrl } from "./auth.js";
 import { watchNewBlockFiles } from "./blockBoilerplate.js";
@@ -6,6 +7,7 @@ import { collectBlockChunks } from "./blockChunks.js";
 import { withoutExpectedCamoxLogs } from "./bundlerLogs.js";
 import { installDevAuthenticationMiddleware } from "./devAuthentication.js";
 import { installDevSignInLink } from "./devSignIn.js";
+import { HOSTED_BUILD_ENV, forbiddenImport, misnamedBlock, readHostedProject } from "./hostedChecks.js";
 import { generateIconTypes } from "./iconGeneration.js";
 import { generateLayoutFiles, watchLayoutFiles } from "./layoutGeneration.js";
 import { publicFilesInHashedDirs, readOwnHeaders, staticAssetHeaders, unhashedEntries } from "./staticAssetHeaders.js";
@@ -18,7 +20,7 @@ import { projectIdSchema } from "@camox/api-contract/ids";
 import { DEVELOPMENT_DRAFT } from "@camox/api-contract/drafts";
 import { createHash, randomUUID } from "node:crypto";
 import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { dirname, join, resolve } from "node:path";
+import { dirname, join, posix, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { createServer } from "vite-plus";
 
@@ -34,7 +36,11 @@ const VIRTUAL_PAGE_CLIENT = "virtual:camox/page-client";
 const RESOLVED_VIRTUAL_PAGE_CLIENT_URL = "\0virtual:camox/page-client-url";
 const VIRTUAL_STUDIO_CLIENT = "virtual:camox/studio-client";
 const RESOLVED_VIRTUAL_STUDIO_CLIENT_URL = "\0virtual:camox/studio-client-url";
+const VIRTUAL_RENDERER_CLIENT = "virtual:camox/renderer-client";
+const RESOLVED_VIRTUAL_RENDERER_CLIENT_URL = "\0virtual:camox/renderer-client-url";
 const RESOLVED_VIRTUAL_BLOCK_CHUNKS = "\0virtual:camox/block-chunks";
+/** A built file's URL in the server bundle: under the asset prefix, read when the bundle loads. */
+const serverAssetUrl = (file) => `(globalThis.${ASSET_PREFIX_GLOBAL} ?? "/") + ${JSON.stringify(file)}`;
 const PRODUCTION_API_URL = "https://api.camox.ai";
 /** Authentication URL to use for Camox authentication (production Camox Dashboard) */
 const DEFAULT_AUTHENTICATION_URL = "https://app.camox.ai";
@@ -174,6 +180,8 @@ function camox(options) {
 	let isRelease = false;
 	/** A release's build, without syncing to Live: what the upgrade job checks a project with. */
 	let isDryRun = false;
+	/** Set when the build checks a hosted project's code. */
+	let hostedProject;
 	let resolvedConfig;
 	let localAuth = null;
 	let blockChunks = {};
@@ -182,6 +190,10 @@ function camox(options) {
 		name: "camox",
 		enforce: "pre",
 		resolveId(id, importer) {
+			if (hostedProject) {
+				const forbidden = forbiddenImport(hostedProject, id, importer);
+				if (forbidden) this.error(forbidden);
+			}
 			const runtimeId = resolveRuntimeDevId(id, importer);
 			if (runtimeId) return runtimeId;
 			if (id === VIRTUAL_STUDIO_CSS) return RESOLVED_VIRTUAL_STUDIO_CSS;
@@ -199,7 +211,8 @@ function camox(options) {
 						fileName,
 						source: css
 					});
-					return `export default ${JSON.stringify(`/${fileName}`)};`;
+					if (this.environment.config.consumer === "client") return `export default new URL(/* @vite-ignore */ ${JSON.stringify(`../${fileName}`)}, import.meta.url).href;`;
+					return `export default ${serverAssetUrl(fileName)};`;
 				}
 				const cssUrl = `/@fs/${cssPath.replaceAll("\\", "/").replace(/^\/+/, "")}`;
 				return `export default ${JSON.stringify(cssUrl)};`;
@@ -209,8 +222,9 @@ function camox(options) {
 				const css = readFileSync(cssPath, "utf-8");
 				return `export default ${JSON.stringify(css)};`;
 			}
-			if (id === RESOLVED_VIRTUAL_PAGE_CLIENT_URL && isBuild) return "export default \"/_chunks/camox-page-client.mjs\";";
-			if (id === RESOLVED_VIRTUAL_STUDIO_CLIENT_URL && isBuild) return "export default \"/_chunks/camox-studio-client.mjs\";";
+			if (id === RESOLVED_VIRTUAL_PAGE_CLIENT_URL && isBuild) return `export default ${serverAssetUrl("_chunks/camox-page-client.mjs")};`;
+			if (id === RESOLVED_VIRTUAL_STUDIO_CLIENT_URL && isBuild) return `export default ${serverAssetUrl("_chunks/camox-studio-client.mjs")};`;
+			if (id === RESOLVED_VIRTUAL_RENDERER_CLIENT_URL && isBuild) return `export default ${serverAssetUrl("_chunks/camox-renderer-client.mjs")};`;
 			if (id === RESOLVED_VIRTUAL_BLOCK_CHUNKS && isBuild) return `export default ${JSON.stringify(blockChunks)};`;
 			if (id === "\0virtual:camox/dev-html") {
 				if (!devServer) return "export default null;";
@@ -222,6 +236,10 @@ function camox(options) {
 			});
 		},
 		transform(code, id) {
+			if (hostedProject) {
+				const misnamed = misnamedBlock(hostedProject, id, code);
+				if (misnamed) this.error(misnamed.message, misnamed.at);
+			}
 			return transformArtifactRuntime(code, id);
 		},
 		generateBundle(_outputOptions, bundle) {
@@ -249,6 +267,14 @@ function camox(options) {
 				if (isBuild && !localAuth) throw new Error("Camox: not authenticated. Run `npx camox login` before building the site.");
 			}
 			return {
+				...isBuild && {
+					base: "./",
+					experimental: { renderBuiltUrl(filename, { ssr, hostType }) {
+						if (hostType === "css") return posix.relative("assets", filename);
+						if (!ssr) return { relative: true };
+						return { runtime: serverAssetUrl(filename) };
+					} }
+				},
 				build: { emitAssets: true },
 				..._config.builder?.buildApp ? {} : { builder: { buildApp: buildClientThenWorker } },
 				define: {
@@ -266,7 +292,8 @@ function camox(options) {
 					onLog: withoutExpectedCamoxLogs(findClientOnLog(_config)),
 					input: {
 						"camox-page-client": VIRTUAL_PAGE_CLIENT,
-						"camox-studio-client": VIRTUAL_STUDIO_CLIENT
+						"camox-studio-client": VIRTUAL_STUDIO_CLIENT,
+						"camox-renderer-client": VIRTUAL_RENDERER_CLIENT
 					},
 					output: {
 						assetFileNames: "assets/[name]-[hash][extname]",
@@ -298,6 +325,7 @@ function camox(options) {
 		},
 		configResolved(config) {
 			resolvedConfig = config;
+			if (process.env["CAMOX_INTERNAL_HOSTED"] === "1") hostedProject = readHostedProject(config.root);
 			if (!config.plugins.some((plugin) => plugin.name.startsWith("vite-plugin-cloudflare"))) throw new Error("Camox: Camox apps run on Cloudflare Workers. Add `cloudflare()` from `@cloudflare/vite-plugin` to your Vite plugins, and point `main` in `wrangler.jsonc` at `camox/worker`.");
 			const routesDir = resolve(config.root, "src/routes");
 			writeRuntimeSidecar(config.root, {

package/dist/hooks/use-page-destinations.js

@@ -1,7 +1,7 @@
 import { useProjectUuid } from "../lib/auth.js";
-import { useCamoxApp } from "../features/provider/components/CamoxAppContext.js";
 import { reads, useReadQuery } from "../lib/studio-reads.js";
 import { linkablePages, useLinkablePages } from "../lib/link-pages.js";
+import { useRoutableLayouts } from "../lib/studio-definitions.js";
 import { getPageDestinations } from "../core/pageDestinations.js";
 import { c } from "react/compiler-runtime";
 
@@ -9,7 +9,7 @@ import { c } from "react/compiler-runtime";
 /** The pages of the locale viewed, which the studio navigates to. */
 function usePageDestinations() {
 	const $ = c(11);
-	const app = useCamoxApp();
+	const layouts = useRoutableLayouts();
 	const projectUuid = useProjectUuid();
 	let t0;
 	if ($[0] !== projectUuid) {
@@ -39,9 +39,9 @@ function usePageDestinations() {
 		$[7] = t4;
 	} else t4 = $[7];
 	let t5;
-	if ($[8] !== app || $[9] !== t4) {
-		t5 = getPageDestinations(t4, app.getLayouts());
-		$[8] = app;
+	if ($[8] !== layouts || $[9] !== t4) {
+		t5 = getPageDestinations(t4, layouts);
+		$[8] = layouts;
 		$[9] = t4;
 		$[10] = t5;
 	} else t5 = $[10];
@@ -53,7 +53,7 @@ function usePageDestinations() {
 */
 function useLinkDestinations() {
 	const $ = c(7);
-	const app = useCamoxApp();
+	const layouts = useRoutableLayouts();
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = { fetchProject: true };
@@ -61,16 +61,16 @@ function useLinkDestinations() {
 	} else t0 = $[0];
 	const { pages, fallbackPages } = useLinkablePages(useProjectUuid(), t0);
 	let t1;
-	if ($[1] !== app || $[2] !== fallbackPages || $[3] !== pages) {
+	if ($[1] !== fallbackPages || $[2] !== layouts || $[3] !== pages) {
 		let t2;
 		if ($[5] !== pages) {
 			t2 = pages ?? [];
 			$[5] = pages;
 			$[6] = t2;
 		} else t2 = $[6];
-		t1 = getPageDestinations(linkablePages(t2, fallbackPages).map(_temp), app.getLayouts());
-		$[1] = app;
-		$[2] = fallbackPages;
+		t1 = getPageDestinations(linkablePages(t2, fallbackPages).map(_temp), layouts);
+		$[1] = fallbackPages;
+		$[2] = layouts;
 		$[3] = pages;
 		$[4] = t1;
 	} else t1 = $[4];