camox 0.44.0 → 0.45.0

package/dist/features/vite/blockChunks.js

@@ -0,0 +1,31 @@
+import { relative } from "node:path";
+
+//#region src/features/vite/blockChunks.ts
+const BLOCK_MODULE = /^src\/(camox\/)?blocks\/[^/]+\.tsx?$/;
+/**
+* The chunks the browser must load to render each block, by the block's module path (as the
+* app's globs name it). Chunks every entry already loads are left out: they need no preload.
+*/
+function collectBlockChunks(bundle, root) {
+	const chunks = /* @__PURE__ */ new Map();
+	for (const output of Object.values(bundle)) if (output.type === "chunk") chunks.set(output.fileName, output);
+	const withImports = (fileName, into = /* @__PURE__ */ new Set()) => {
+		if (into.has(fileName)) return into;
+		into.add(fileName);
+		for (const imported of chunks.get(fileName)?.imports ?? []) withImports(imported, into);
+		return into;
+	};
+	const loadedByEntries = /* @__PURE__ */ new Set();
+	for (const chunk of chunks.values()) if (chunk.isEntry) withImports(chunk.fileName, loadedByEntries);
+	const blockChunks = {};
+	for (const chunk of chunks.values()) {
+		if (!chunk.isDynamicEntry || !chunk.facadeModuleId) continue;
+		const modulePath = relative(root, chunk.facadeModuleId).replaceAll("\\", "/");
+		if (!BLOCK_MODULE.test(modulePath)) continue;
+		blockChunks[`/${modulePath}`] = [...withImports(chunk.fileName)].filter((fileName) => !loadedByEntries.has(fileName));
+	}
+	return blockChunks;
+}
+
+//#endregion
+export { collectBlockChunks };

package/dist/features/vite/bundlerLogs.js

@@ -0,0 +1,17 @@
+//#region src/features/vite/bundlerLogs.ts
+/** Wraps the app's own `onLog`, if any, so it never sees warnings every Camox app produces. */
+function withoutExpectedCamoxLogs(onLog) {
+	return (level, log, handler) => {
+		if (isExpectedCamoxLog(log)) return;
+		if (onLog) return onLog(level, log, handler);
+		handler(level, log);
+	};
+}
+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");
+	return false;
+}
+
+//#endregion
+export { withoutExpectedCamoxLogs };

package/dist/features/vite/definitionsSync.js

@@ -1,279 +1,211 @@
 import { createServerApiClient } from "../../lib/api-client-server.js";
-import path from "node:path";
-import { createServer, isRunnableDevEnvironment } from "vite-plus";
+import { DEVELOPMENT_DRAFT } from "@camox/api-contract/drafts";
+import { isRunnableDevEnvironment } from "vite-plus";
 
 //#region src/features/vite/definitionsSync.ts
 const SYNC_DEBOUNCE_DELAY_MS = 100;
 /**
-* Sync block and layout definitions to the API.
-* This is the core sync logic, independent of ViteDevServer.
+* The client definitions sync with. A release (deploy token) syncs Live's definitions; dev mode
+* sends the developer's session and syncs their development draft, which its first sync
+* creates (ADR 0006).
 */
+function createSyncClient(options) {
+	const draftId = options.deployToken ? void 0 : DEVELOPMENT_DRAFT;
+	return createServerApiClient(options.apiUrl, options.authToken, draftId);
+}
 function throwIfSyncAuthError(error) {
 	if (error instanceof Error && error.name === "ORPCError" && error.message.toLowerCase().includes("unauthorized")) throw new Error("[camox] Definition sync failed: invalid or missing credentials.");
 }
 function isNotFoundError(error) {
 	return error instanceof Error && error.name === "ORPCError" && error.message.toLowerCase().includes("not found");
 }
-function throwUnknownEnvironmentError(environmentName) {
-	throw new Error(`[camox] Environment "${environmentName}" does not exist. Run the dev server while authenticated to create your personal environment first.`);
+/**
+* A sync that may not create the development draft finds nothing to write to: a release names a
+* project that doesn't exist, or dev mode has no development draft yet (ADR 0006).
+*/
+function throwSyncTargetNotFoundError(projectUuid, deployToken) {
+	if (deployToken) throw new Error(`[camox] No project has the Project ID "${projectUuid}". Check the camox() projectId.`);
+	throw new Error(`[camox] You have no development draft in the project with Project ID "${projectUuid}" yet. Run the dev server while authenticated to create it first.`);
+}
+/** `count` of `noun`, pluralized: "1 block", "2 blocks". */
+function counted(count, noun) {
+	return `${count} ${noun}${count === 1 ? "" : "s"}`;
+}
+/** Names quoted and listed: `"hero", "footer"`. */
+function quoted(names) {
+	return names.map((name) => `"${name}"`).join(", ");
 }
+/**
+* Send a Definition Set to the API: Live's for a release, the development draft's in dev mode.
+* It goes in one `definitions.sync` call, which either fully applies it or changes nothing.
+*/
 async function syncDefinitionsToApi(options) {
-	const { camoxApp, projectSlug, apiUrl, environmentName, autoCreate, authToken, deployToken, logger } = options;
-	const client = createServerApiClient(apiUrl, environmentName, authToken);
-	const blocks = camoxApp.getBlocks();
-	const layoutDefinitions = camoxApp.getSerializableLayoutDefinitions();
-	const typesUsedInLayouts = /* @__PURE__ */ new Set();
-	for (const layout of layoutDefinitions) for (const blockDef of layout.blocks) typesUsedInLayouts.add(blockDef.type);
-	const definitions = blocks.filter((block) => !block._internal.layoutOnly || typesUsedInLayouts.has(block._internal.id)).map((block) => ({
-		blockId: block._internal.id,
-		title: block._internal.title,
-		description: block._internal.description,
-		contentSchema: block._internal.contentSchema,
-		settingsSchema: block._internal.settingsSchema,
-		defaultContent: block._internal.getInitialContent(),
-		defaultSettings: block._internal.getInitialSettings(),
-		layoutOnly: block._internal.layoutOnly || void 0,
-		synced: block._internal.synced
-	}));
-	let environmentCreated = false;
-	let deletedDefinitionTypes = [];
-	let blockedDefinitionDeletions = [];
+	const { definitionSet, projectUuid, autoCreate, deployToken, logger } = options;
+	const client = createSyncClient(options);
+	let result;
 	try {
-		const result = await client.blockDefinitions.sync({
-			projectSlug,
+		result = await client.definitions.sync({
+			projectUuid,
 			deployToken,
 			autoCreate,
-			definitions
+			definitionSet
 		});
-		environmentCreated = result.environmentCreated;
-		deletedDefinitionTypes = result.deletedDefinitionTypes;
-		blockedDefinitionDeletions = result.blockedDefinitionDeletions;
 	} catch (error) {
 		throwIfSyncAuthError(error);
-		if (!autoCreate && isNotFoundError(error)) throwUnknownEnvironmentError(environmentName);
+		if (!autoCreate && isNotFoundError(error)) throwSyncTargetNotFoundError(projectUuid, deployToken);
 		throw error;
 	}
-	if (environmentCreated) logger.info(`[camox] Created empty environment "${environmentName}"`, { timestamp: true });
-	logger.info(`[camox] Synced ${definitions.length} block definition${definitions.length === 1 ? "" : "s"}`, { timestamp: true });
-	if (deletedDefinitionTypes.length > 0) {
-		const blockList = deletedDefinitionTypes.map((t) => `"${t}"`).join(", ");
-		logger.info(`[camox] Removed ${deletedDefinitionTypes.length} orphaned block definition${deletedDefinitionTypes.length === 1 ? "" : "s"} (no longer in code): ${blockList}`, { timestamp: true });
-	}
-	for (const blocked of blockedDefinitionDeletions) logger.warn(`[camox] Cannot delete block definition "${blocked.blockId}": still used by ${blocked.blockCount} block${blocked.blockCount === 1 ? "" : "s"}. Delete those blocks first.`, { timestamp: true });
-	if (layoutDefinitions.length > 0) {
-		let layoutSyncResults;
-		try {
-			layoutSyncResults = await client.layouts.sync({
-				projectSlug,
-				deployToken,
-				autoCreate,
-				layouts: layoutDefinitions
-			});
-		} catch (error) {
-			throwIfSyncAuthError(error);
-			if (!autoCreate && isNotFoundError(error)) throwUnknownEnvironmentError(environmentName);
-			throw error;
-		}
-		logger.info(`[camox] Synced ${layoutDefinitions.length} layout${layoutDefinitions.length === 1 ? "" : "s"} to Camox API`, { timestamp: true });
-		for (const result of layoutSyncResults.layouts) {
-			if (result.wasExisting && result.createdBlockTypes.length > 0) {
-				const blockList = result.createdBlockTypes.map((t) => `"${t}"`).join(", ");
-				logger.info(`[camox] Added ${result.createdBlockTypes.length} block${result.createdBlockTypes.length === 1 ? "" : "s"} to existing layout "${result.layout.layoutId}": ${blockList}`, { timestamp: true });
-			}
-			if (result.removedBlockTypes.length > 0) {
-				const blockList = result.removedBlockTypes.map((t) => `"${t}"`).join(", ");
-				logger.info(`[camox] Removed ${result.removedBlockTypes.length} layoutOnly block${result.removedBlockTypes.length === 1 ? "" : "s"} from layout "${result.layout.layoutId}": ${blockList}`, { timestamp: true });
-			}
-			if (result.skippedOrphanTypes.length > 0) {
-				const blockList = result.skippedOrphanTypes.map((t) => `"${t}"`).join(", ");
-				logger.info(`[camox] Layout "${result.layout.layoutId}" has ${result.skippedOrphanTypes.length} block${result.skippedOrphanTypes.length === 1 ? "" : "s"} still in DB but removed from code: ${blockList} (kept because not layoutOnly)`, { timestamp: true });
-			}
-		}
-		for (const layoutId of layoutSyncResults.deletedLayoutIds) logger.info(`[camox] Deleted layout "${layoutId}"`, { timestamp: true });
-		for (const blocked of layoutSyncResults.blockedLayoutDeletions) logger.warn(`[camox] Cannot delete layout "${blocked.layoutId}": still used by ${blocked.pageCount} page${blocked.pageCount === 1 ? "" : "s"}. Reassign or delete those pages first.`, { timestamp: true });
-		if (layoutSyncResults.deletedDefinitionTypes.length > 0) {
-			const blockList = layoutSyncResults.deletedDefinitionTypes.map((t) => `"${t}"`).join(", ");
-			logger.info(`[camox] Removed ${layoutSyncResults.deletedDefinitionTypes.length} layoutOnly block definition${layoutSyncResults.deletedDefinitionTypes.length === 1 ? "" : "s"} (no layout uses ${layoutSyncResults.deletedDefinitionTypes.length === 1 ? "it" : "them"} anymore): ${blockList}`, { timestamp: true });
+	if (result.draftCreated) logger.info("[camox] Created your development draft", { timestamp: true });
+	logger.info(`[camox] Synced ${counted(result.blocks.count, "block definition")}`, { timestamp: true });
+	const { deletedDefinitionTypes } = result.blocks;
+	if (deletedDefinitionTypes.length > 0) logger.info(`[camox] Removed ${counted(deletedDefinitionTypes.length, "block definition")} no longer in code: ${quoted(deletedDefinitionTypes)}. Their blocks are kept and render nothing until the definition comes back.`, { timestamp: true });
+	logger.info(`[camox] Synced ${result.collections.count} collection definitions`, { timestamp: true });
+	for (const id of result.collections.retired) logger.warn(`[camox] Removed collection "${id}"; its records are kept and hidden`, { timestamp: true });
+	const layoutSyncResults = result.layouts;
+	if (layoutSyncResults) {
+		logger.info(`[camox] Synced ${counted(layoutSyncResults.count, "layout")} to Camox API`, { timestamp: true });
+		for (const layout of layoutSyncResults.layouts) {
+			const { layoutId, createdBlockTypes, removedBlockTypes, skippedOrphanTypes } = layout;
+			if (layout.wasExisting && createdBlockTypes.length > 0) logger.info(`[camox] Added ${counted(createdBlockTypes.length, "block")} to existing layout "${layoutId}": ${quoted(createdBlockTypes)}`, { timestamp: true });
+			if (removedBlockTypes.length > 0) logger.info(`[camox] Removed ${counted(removedBlockTypes.length, "layoutOnly block")} from layout "${layoutId}": ${quoted(removedBlockTypes)}`, { timestamp: true });
+			if (skippedOrphanTypes.length > 0) logger.info(`[camox] Layout "${layoutId}" has ${counted(skippedOrphanTypes.length, "block")} still in DB but removed from code: ${quoted(skippedOrphanTypes)} (kept because not layoutOnly)`, { timestamp: true });
 		}
+		for (const layoutId of layoutSyncResults.removedLayoutIds) logger.info(`[camox] Removed layout "${layoutId}"; its pages are kept and listed as needing a layout`, { timestamp: true });
+		const unused = layoutSyncResults.deletedDefinitionTypes;
+		if (unused.length > 0) logger.info(`[camox] Removed ${counted(unused.length, "layoutOnly block definition")} (no layout uses ${unused.length === 1 ? "it" : "them"} anymore): ${quoted(unused)}`, { timestamp: true });
 	}
-	const initialPage = camoxApp.getInitialPageBundles();
-	if (initialPage) try {
-		const result = await client.projects.initializeContent({
-			projectSlug,
-			deployToken,
-			layoutId: initialPage.layoutId,
-			blocks: initialPage.blocks
-		});
-		if (result.created) if (initialPage.hasInitialBlocks) logger.info(`[camox] Initialized content: homepage with ${result.blockCount} block${result.blockCount === 1 ? "" : "s"}`, { timestamp: true });
+	const { homepage } = definitionSet;
+	if (homepage && result.homepage?.created) {
+		if (homepage.hasInitialBlocks) logger.info(`[camox] Initialized content: homepage with ${counted(result.homepage.blockCount, "block")}`, { timestamp: true });
 		else {
 			logger.info("[camox] Created empty homepage (using first layout)", { timestamp: true });
 			logger.info("[camox] Tip: add blocks.initial to your layout to pre-populate pages with content", { timestamp: true });
 		}
-	} catch (error) {
-		throwIfSyncAuthError(error);
-		throw error;
 	}
 }
-function getBlockIdFromFilePath(filePath) {
-	return path.basename(filePath, path.extname(filePath));
-}
-const CAMOX_APP_PATH = "./src/camox/app.ts";
+const VIRTUAL_CAMOX_APP = "virtual:camox/app";
+const RESOLVED_VIRTUAL_CAMOX_APP = "\0virtual:camox/app";
 /**
-* Load a module using SSR. Uses the server's SSR environment runner if available,
-* otherwise falls back to a temporary Vite server (needed when Nitro or other
-* frameworks configure the SSR environment as non-runnable).
+* The dev server's Node `ssr` environment, which runs alongside the Worker's own environment:
+* the Cloudflare plugin runs the Worker in workerd, where the dev server can't import modules.
 */
-async function ssrLoadModule(server, modulePath) {
+function getNodeEnvironment(server) {
 	const ssrEnv = server.environments.ssr;
-	if (ssrEnv && isRunnableDevEnvironment(ssrEnv)) return ssrEnv.runner.import(modulePath);
-	const tempServer = await createServer({
-		configFile: false,
-		root: server.config.root,
-		cacheDir: path.join(server.config.root, "node_modules", ".vite-camox-temp"),
-		resolve: server.config.resolve,
-		server: { middlewareMode: true },
-		logLevel: "silent"
-	});
-	try {
-		return await tempServer.ssrLoadModule(modulePath);
-	} finally {
-		await tempServer.close();
+	if (!ssrEnv || !isRunnableDevEnvironment(ssrEnv)) throw new Error("[camox] The dev server has no Node ssr environment to load the app in.");
+	return ssrEnv;
+}
+/**
+* The app's current Definition Set, evaluated afresh in the dev server's Node `ssr` environment.
+*/
+async function loadDefinitionSet(server) {
+	const nodeEnvironment = getNodeEnvironment(server);
+	const appModule = nodeEnvironment.moduleGraph.getModuleById(RESOLVED_VIRTUAL_CAMOX_APP);
+	if (appModule) nodeEnvironment.moduleGraph.invalidateModule(appModule);
+	nodeEnvironment.runner.evaluatedModules.clear();
+	const { camoxApp } = await nodeEnvironment.runner.import(VIRTUAL_CAMOX_APP);
+	return camoxApp.getDefinitionSet();
+}
+/**
+* A Definition Set as a string that is equal for equal sets: object keys are sorted, and only
+* what reaches the API (JSON) counts.
+*/
+function serializeDefinitionSet(definitionSet) {
+	return JSON.stringify(definitionSet, (_key, value) => value && typeof value === "object" && !Array.isArray(value) ? Object.fromEntries(Object.keys(value).sort().map((key) => [key, value[key]])) : value);
+}
+/** Whether the app, as the `ssr` environment last loaded it, imports `file`, even indirectly. */
+function isAppDependency(server, file) {
+	const { moduleGraph } = getNodeEnvironment(server);
+	const pending = [...moduleGraph.getModulesByFile(file) ?? []];
+	const seen = new Set(pending);
+	for (let module = pending.pop(); module; module = pending.pop()) {
+		if (module.id === RESOLVED_VIRTUAL_CAMOX_APP) return true;
+		for (const importer of module.importers) {
+			if (seen.has(importer)) continue;
+			seen.add(importer);
+			pending.push(importer);
+		}
 	}
+	return false;
 }
+/** Whether a file is a script module, which the app's globs may pick up when it appears. */
+function isScriptFile(file) {
+	return /\.[cm]?[jt]sx?$/.test(file) && !file.endsWith(".d.ts");
+}
+/** Whether a project's Live has no pages, as on a fresh database. */
+async function liveHasNoPages(apiUrl, projectUuid) {
+	const { pages } = await createServerApiClient(apiUrl).pages.listBySlug({ projectUuid });
+	return pages.length === 0;
+}
+/**
+* Sync the app's whole Definition Set to the development draft now, then again whenever a module
+* the app depends on changes (debounced), skipping a sync when the set equals the last one sent
+* (ADR 0006). Resolves once the initial sync settles: `synced` if definitions reached the API,
+* and `releasedToLive` if it first released them to an empty Live (`releaseToEmptyLive`).
+*/
 async function syncDefinitions(server, options) {
-	const { projectSlug, apiUrl, environmentName, autoCreate, authToken, deployToken } = options;
-	const blocksDirs = [path.resolve(server.config.root, "src/blocks"), path.resolve(server.config.root, "src/camox/blocks")];
-	const layoutsDirs = [path.resolve(server.config.root, "src/layouts"), path.resolve(server.config.root, "src/camox/layouts")];
-	const client = createServerApiClient(apiUrl, environmentName, authToken);
-	async function performInitialSync() {
-		const appModule = server.moduleGraph.getModuleById(CAMOX_APP_PATH);
-		if (appModule) server.moduleGraph.invalidateModule(appModule);
-		const camoxModule = await ssrLoadModule(server, CAMOX_APP_PATH);
-		if (!camoxModule.camoxApp) {
-			server.config.logger.warn(`[camox] No camoxApp export found in ${CAMOX_APP_PATH}`, { timestamp: true });
-			return;
+	const { projectUuid, apiUrl, autoCreate, authToken, deployToken, releaseToEmptyLive } = options;
+	const logger = server.config.logger;
+	/** What the development draft last received, so an unchanged set isn't sent again. */
+	let lastSynced;
+	let releasedToLive = false;
+	async function sync({ initial = false } = {}) {
+		const definitionSet = await loadDefinitionSet(server);
+		const serialized = serializeDefinitionSet(definitionSet);
+		if (serialized === lastSynced) return;
+		if (initial && releaseToEmptyLive && await liveHasNoPages(apiUrl, projectUuid)) {
+			logger.info("[camox] Live is empty: releasing your definitions to it", { timestamp: true });
+			await syncDefinitionsToApi({
+				definitionSet,
+				projectUuid,
+				apiUrl,
+				autoCreate: false,
+				deployToken: releaseToEmptyLive,
+				logger
+			});
+			releasedToLive = true;
 		}
 		await syncDefinitionsToApi({
-			camoxApp: camoxModule.camoxApp,
-			projectSlug,
+			definitionSet,
+			projectUuid,
 			apiUrl,
-			environmentName,
 			autoCreate,
 			authToken,
 			deployToken,
-			logger: server.config.logger
+			logger
 		});
+		lastSynced = serialized;
 	}
-	async function upsertBlock(filePath) {
-		const relativePath = "./" + path.relative(server.config.root, filePath);
-		const moduleNode = server.moduleGraph.getModuleById(relativePath);
-		if (moduleNode) server.moduleGraph.invalidateModule(moduleNode);
-		const blockModule = await ssrLoadModule(server, relativePath);
-		if (!blockModule.block) {
-			server.config.logger.warn(`[camox] No block export found in ${relativePath}`, { timestamp: true });
-			return;
-		}
-		const block = blockModule.block;
-		if (block._internal.layoutOnly) return;
-		let result;
-		try {
-			result = await client.blockDefinitions.upsert({
-				projectSlug,
-				deployToken,
-				blockId: block._internal.id,
-				title: block._internal.title,
-				description: block._internal.description,
-				contentSchema: block._internal.contentSchema,
-				settingsSchema: block._internal.settingsSchema,
-				defaultContent: block._internal.getInitialContent(),
-				defaultSettings: block._internal.getInitialSettings(),
-				layoutOnly: block._internal.layoutOnly || void 0,
-				synced: block._internal.synced
-			});
-		} catch (error) {
-			throwIfSyncAuthError(error);
-			throw error;
-		}
-		server.config.logger.info(`[camox] ${result.action === "created" ? "Created" : "Updated"} block definition "${block._internal.id}"`, { timestamp: true });
-	}
-	async function deleteBlock(filePath) {
-		const blockId = getBlockIdFromFilePath(filePath);
-		let result;
-		try {
-			result = await client.blockDefinitions.delete({
-				projectSlug,
-				deployToken,
-				blockId
-			});
-		} catch (error) {
-			throwIfSyncAuthError(error);
-			throw error;
-		}
-		if (result.deleted) server.config.logger.info(`[camox] Deleted block definition "${blockId}"`, { timestamp: true });
-	}
+	let synced = false;
 	try {
-		await performInitialSync();
+		await sync({ initial: true });
+		synced = true;
 	} catch (error) {
-		server.config.logger.error(`[camox] Failed to sync block definitions: ${String(error)}`, { timestamp: true });
+		logger.error(`[camox] Failed to sync block definitions: ${String(error)}`, { timestamp: true });
 	}
-	const debounceTimers = /* @__PURE__ */ new Map();
-	function isBlockFile(filePath) {
-		return blocksDirs.some((blocksDir) => filePath.startsWith(blocksDir)) && /\.tsx?$/.test(filePath);
-	}
-	function isLayoutFile(filePath) {
-		return layoutsDirs.some((layoutsDir) => filePath.startsWith(layoutsDir)) && /\.tsx?$/.test(filePath);
-	}
-	const handleBlockFileUpsert = (filePath) => {
-		if (!isBlockFile(filePath)) return;
-		const existingTimer = debounceTimers.get(filePath);
-		if (existingTimer) clearTimeout(existingTimer);
-		debounceTimers.set(filePath, setTimeout(async () => {
-			debounceTimers.delete(filePath);
-			try {
-				await upsertBlock(filePath);
-			} catch (error) {
-				server.config.logger.error(`[camox] Failed to sync block: ${String(error)}`, { timestamp: true });
-			}
-		}, SYNC_DEBOUNCE_DELAY_MS));
-	};
-	const handleBlockFileDelete = (filePath) => {
-		if (!isBlockFile(filePath)) return;
-		const existingTimer = debounceTimers.get(filePath);
-		if (existingTimer) {
-			clearTimeout(existingTimer);
-			debounceTimers.delete(filePath);
-		}
-		setTimeout(async () => {
-			try {
-				await deleteBlock(filePath);
-			} catch (error) {
-				server.config.logger.error(`[camox] Failed to delete block: ${String(error)}`, { timestamp: true });
-			}
+	let running = Promise.resolve();
+	let timer;
+	const scheduleSync = () => {
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			running = running.then(() => sync().catch((error) => {
+				logger.error(`[camox] Failed to sync block definitions: ${String(error)}`, { timestamp: true });
+			}));
 		}, SYNC_DEBOUNCE_DELAY_MS);
 	};
-	let layoutSyncTimer = null;
-	const handleLayoutFileChange = (filePath) => {
-		if (!isLayoutFile(filePath)) return;
-		const relativePath = "./" + path.relative(server.config.root, filePath);
-		const moduleNode = server.moduleGraph.getModuleById(relativePath);
-		if (moduleNode) server.moduleGraph.invalidateModule(moduleNode);
-		if (layoutSyncTimer) clearTimeout(layoutSyncTimer);
-		layoutSyncTimer = setTimeout(async () => {
-			layoutSyncTimer = null;
-			try {
-				await performInitialSync();
-			} catch (error) {
-				server.config.logger.error(`[camox] Failed to sync layouts: ${String(error)}`, { timestamp: true });
-			}
-		}, SYNC_DEBOUNCE_DELAY_MS);
+	server.watcher.on("change", (file) => {
+		if (isAppDependency(server, file)) scheduleSync();
+	});
+	server.watcher.on("add", (file) => {
+		if (isScriptFile(file)) scheduleSync();
+	});
+	server.watcher.on("unlink", (file) => {
+		if (isScriptFile(file) || isAppDependency(server, file)) scheduleSync();
+	});
+	return {
+		synced,
+		releasedToLive
 	};
-	server.watcher.on("change", handleBlockFileUpsert);
-	server.watcher.on("change", handleLayoutFileChange);
-	server.watcher.on("add", handleBlockFileUpsert);
-	server.watcher.on("add", handleLayoutFileChange);
-	server.watcher.on("unlink", handleBlockFileDelete);
-	server.watcher.on("unlink", handleLayoutFileChange);
 }
 
 //#endregion
-export { syncDefinitions, syncDefinitionsToApi };
+export { VIRTUAL_CAMOX_APP, syncDefinitions, syncDefinitionsToApi };

package/dist/features/vite/devAuthentication.js

@@ -1,10 +1,11 @@
+import { authPageStyles } from "../../lib/auth-page-styles.js";
 import { verifyOneTimeToken, writeAuthTokenForUrl } from "./auth.js";
 import { randomBytes } from "node:crypto";
 
 //#region src/features/vite/devAuthentication.ts
 const CALLBACK_PATH = "/__camox/auth/callback";
 const READY_PATH = "/__camox/auth/ready";
-const AUTH_REQUEST_TTL_MS = 600 * 1e3;
+const AUTH_REQUEST_TTL_MS = 6e5;
 function normalizeUrl(url) {
 	return url.replace(/\/+$/, "");
 }
@@ -57,17 +58,10 @@ function sendRestartingPage(res, returnPath) {
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Connecting to Camox…</title>
-    <style>
-      :root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
-      body { align-items: center; background: #09090b; color: #fafafa; display: flex; justify-content: center; margin: 0; min-height: 100vh; }
-      main { align-items: center; display: flex; flex-direction: column; gap: 16px; text-align: center; }
-      .spinner { animation: spin 800ms linear infinite; border: 2px solid #3f3f46; border-radius: 999px; border-top-color: #fafafa; height: 24px; width: 24px; }
-      p { color: #a1a1aa; margin: 0; }
-      @keyframes spin { to { transform: rotate(360deg); } }
-    </style>
+    <style>${authPageStyles}</style>
   </head>
   <body>
-    <main><div class="spinner"></div><p>Starting your Camox site…</p></main>
+    <main class="camox-auth-page" role="status"><div class="camox-auth-spinner" aria-hidden="true"></div><p>Starting your Camox site…</p></main>
     <script>
       const returnPath = ${serializedReturnPath};
       async function waitUntilReady() {
@@ -144,12 +138,6 @@ function installDevAuthenticationMiddleware(server, options) {
 		}
 		redirect(res, authorizationUrl.toString());
 	});
-	const authenticationLayer = server.middlewares.stack.at(-1);
-	const nitroMiddlewareIndex = server.middlewares.stack.findIndex((layer) => typeof layer.handle === "function" && layer.handle.name === "nitroDevMiddlewarePre");
-	if (authenticationLayer && nitroMiddlewareIndex >= 0) {
-		server.middlewares.stack.pop();
-		server.middlewares.stack.splice(nitroMiddlewareIndex, 0, authenticationLayer);
-	}
 }
 async function handleAuthenticationCallback(req, res, server, options, pendingAuthentications) {
 	const requestUrl = new URL(req.url ?? "/", "http://localhost");

package/dist/features/vite/devSignIn.js

@@ -0,0 +1,87 @@
+import { createPreviewSignInUrl, isLoopbackUrl } from "@camox/cli/auth";
+import childProcess from "node:child_process";
+import { open } from "node:fs/promises";
+import { setTimeout } from "node:timers/promises";
+
+//#region src/features/vite/devSignIn.ts
+const openedKey = Symbol.for("camox.devSignIn.opened");
+const processState = globalThis;
+const opened = processState[openedKey] ??= /* @__PURE__ */ new Set();
+function openBrowser(url, onError) {
+	const command = process.platform === "darwin" ? "open" : process.platform === "win32" ? "rundll32.exe" : "xdg-open";
+	const args = process.platform === "win32" ? ["url.dll,FileProtocolHandler", url] : [url];
+	try {
+		const child = childProcess.spawn(command, args, {
+			stdio: "ignore",
+			detached: true
+		});
+		child.once("error", onError);
+		child.once("exit", (code) => {
+			if (code !== 0) onError();
+		});
+		child.unref();
+	} catch {
+		onError();
+	}
+}
+/** Mint only after Vite has resolved its actual port, including port fallback. */
+function installDevSignInLink(server, options) {
+	const controller = new AbortController();
+	server.httpServer?.once("close", () => controller.abort());
+	const printUrls = server.printUrls.bind(server);
+	let started = false;
+	server.printUrls = () => {
+		printUrls();
+		if (started) return;
+		const urls = server.resolvedUrls;
+		const destination = [...urls?.local ?? [], ...urls?.network ?? []].find((url) => isLoopbackUrl(new URL(url)));
+		if (!destination) return;
+		started = true;
+		printSignInLink(destination);
+	};
+	async function printSignInLink(destination) {
+		const signal = AbortSignal.any([controller.signal, AbortSignal.timeout(3e4)]);
+		while (!signal.aborted) try {
+			const url = await createPreviewSignInUrl(destination, {
+				projectUuid: options.projectUuid,
+				apiUrl: options.apiUrl
+			}, options.authToken, signal);
+			if (signal.aborted) return;
+			server.config.logger.info(`  ➜  Camox sign in (single-use, expires in 3 minutes; do not share): ${url}`);
+			if (options.open) await openSignInLink(url);
+			return;
+		} catch {
+			try {
+				await setTimeout(1e3, void 0, { signal });
+			} catch {
+				break;
+			}
+		}
+		if (controller.signal.aborted) return;
+		server.config.logger.warn("Camox sign-in link unavailable. Use the normal local URL to sign in, or run camox preview for a fresh link.");
+	}
+	async function openSignInLink(url) {
+		let warned = false;
+		const warn = () => {
+			if (warned || controller.signal.aborted) return;
+			warned = true;
+			server.config.logger.warn("Camox could not open your browser. Use the sign-in link printed above.");
+		};
+		try {
+			if (options.openOnceFile) await (await open(options.openOnceFile, "wx", 384)).close();
+			else {
+				const key = JSON.stringify([server.config.root, options.projectUuid]);
+				if (opened.has(key)) return;
+				opened.add(key);
+			}
+			if (controller.signal.aborted) return;
+			openBrowser(url, warn);
+		} catch (error) {
+			if (error.code === "EEXIST") return;
+			warn();
+		}
+	}
+}
+
+//#endregion
+export { installDevSignInLink };

package/dist/features/vite/iconGeneration.js

@@ -1,6 +1,6 @@
-import { iconCollectionIds, loadIconCollection } from "@camox/api-contract";
 import { mkdirSync, writeFileSync } from "node:fs";
 import { resolve } from "node:path";
+import { iconCollectionIds, loadIconCollection } from "@camox/api-contract/icon-catalog";
 
 //#region src/features/vite/iconGeneration.ts
 async function generateIconTypes(root, prefix) {

package/dist/features/vite/layoutGeneration.js

@@ -37,6 +37,16 @@ export const Layout = createLayout(${JSON.stringify(id)})({
 	}
 	writeIfChanged(resolve(appRoot, "src/camox/layouts.gen.d.ts"), `// Generated by Camox.\nimport "camox/createLayout";\ndeclare module "camox/createLayout" {\n  interface LayoutFileRoutes ${declarations.length ? `{\n${declarations.join("\n")}\n  }` : "{}"}\n}\n`);
 }
+/** Regenerate layout files whenever a layout file is added, changed or deleted. */
+function watchLayoutFiles(server, appRoot) {
+	for (const event of [
+		"add",
+		"change",
+		"unlink"
+	]) server.watcher.on(event, (path) => {
+		if (path.startsWith(resolve(appRoot, "src/layouts") + "/")) generateLayoutFiles(appRoot);
+	});
+}
 
 //#endregion
-export { generateLayoutFiles };
+export { generateLayoutFiles, watchLayoutFiles };