camox 0.33.1 → 0.34.0

package/dist/features/vite/routeGeneration.js

@@ -1,5 +1,4 @@
 import { STUDIO_ROUTE_SEGMENT } from "../studio/routes.js";
-import { writeIfChanged } from "./utils.js";
 import { mkdirSync, readFileSync, unlinkSync, writeFileSync } from "node:fs";
 import { relative, resolve } from "node:path";
 
@@ -16,132 +15,6 @@ const HEADER = `/* =============================================================
 // @ts-nocheck
 
 `;
-function generatePageRoute(authenticationUrl) {
-	return HEADER + `import { createFileRoute } from "@tanstack/react-router";
-import {
-  createMarkdownMiddleware,
-  createPageLoader,
-  createPageHead,
-  PageRouteComponent,
-} from "camox/_internal/pageRoute";
-import { CamoxProvider } from "camox/CamoxProvider";
-import { camoxApp } from "@/camox/app";
-
-const markdownMiddleware = createMarkdownMiddleware(__CAMOX_API_URL__, __CAMOX_PROJECT_SLUG__, __CAMOX_ENVIRONMENT_NAME__);
-const loader = createPageLoader(__CAMOX_API_URL__, __CAMOX_PROJECT_SLUG__, __CAMOX_ENVIRONMENT_NAME__);
-const head = createPageHead(camoxApp);
-
-export const Route = createFileRoute("/(camox)/(_preview)/$")({
-  server: {
-    middleware: [markdownMiddleware],
-  },
-  component: RouteComponent,
-  notFoundComponent: () => <div>No Camox page on this path</div>,
-  loader,
-  head,
-});
-
-function RouteComponent() {
-  return (
-    <CamoxProvider camoxApp={camoxApp} authenticationUrl="${authenticationUrl}" apiUrl={__CAMOX_API_URL__} projectSlug={__CAMOX_PROJECT_SLUG__} environmentName={__CAMOX_ENVIRONMENT_NAME__}>
-      <PageRouteComponent />
-    </CamoxProvider>
-  );
-}
-`;
-}
-function generateOgRoute() {
-	return HEADER + `import { createFileRoute } from "@tanstack/react-router";
-import { createOgHandler } from "camox/_internal/ogRoute";
-import { camoxApp } from "@/camox/app";
-
-export const Route = createFileRoute("/(camox)/(_preview)/og")({
-  server: {
-    handlers: createOgHandler(camoxApp),
-  },
-});
-`;
-}
-function generateCamoxStudio(authenticationUrl) {
-	return HEADER + `import { Outlet, createFileRoute } from "@tanstack/react-router";
-import { CamoxProvider } from "camox/CamoxProvider";
-import { CamoxStudio } from "camox/CamoxStudio";
-import { camoxApp } from "@/camox/app";
-
-export const Route = createFileRoute("/(camox)/(_studio)/${STUDIO_ROUTE_SEGMENT}")({
-  component: RouteComponent,
-  notFoundComponent: () => <div>Studio page not found</div>,
-});
-
-function RouteComponent() {
-  return (
-    <CamoxProvider camoxApp={camoxApp} authenticationUrl="${authenticationUrl}" apiUrl={__CAMOX_API_URL__} projectSlug={__CAMOX_PROJECT_SLUG__} environmentName={__CAMOX_ENVIRONMENT_NAME__}>
-      <CamoxStudio>
-        <Outlet />
-      </CamoxStudio>
-    </CamoxProvider>
-  );
-}
-`;
-}
-function generateCamoxStudioCatchAll() {
-	return HEADER + `import { Outlet, createFileRoute } from "@tanstack/react-router";
-import { CamoxStudio } from "camox/CamoxStudio";
-
-export const Route = createFileRoute("/(camox)/(_studio)/${STUDIO_ROUTE_SEGMENT}/$")({
-  component: RouteComponent,
-  notFoundComponent: () => <div>Studio page not found</div>,
-});
-
-function RouteComponent() {
-  return (
-    <CamoxStudio>
-      <Outlet />
-    </CamoxStudio>
-  );
-}
-`;
-}
-function generateCamoxStudioContent() {
-	return HEADER + `import { createFileRoute } from "@tanstack/react-router";
-import { CamoxContent } from "camox/CamoxContent";
-
-export const Route = createFileRoute("/(camox)/(_studio)/${STUDIO_ROUTE_SEGMENT}/content")({
-  component: RouteComponent,
-});
-
-function RouteComponent() {
-  return <CamoxContent />;
-}
-`;
-}
-function getRouteFileEntries({ routesDir, authenticationUrl }) {
-	const groupDir = resolve(routesDir, "(camox)");
-	const previewDir = resolve(groupDir, "(_preview)");
-	const studioDir = resolve(groupDir, "(_studio)");
-	return [
-		{
-			path: resolve(previewDir, "$.tsx"),
-			content: generatePageRoute(authenticationUrl)
-		},
-		{
-			path: resolve(previewDir, "og.tsx"),
-			content: generateOgRoute()
-		},
-		{
-			path: resolve(studioDir, `${STUDIO_ROUTE_SEGMENT}.tsx`),
-			content: generateCamoxStudio(authenticationUrl)
-		},
-		{
-			path: resolve(studioDir, `${STUDIO_ROUTE_SEGMENT}.$.tsx`),
-			content: generateCamoxStudioCatchAll()
-		},
-		{
-			path: resolve(studioDir, `${STUDIO_ROUTE_SEGMENT}.content.tsx`),
-			content: generateCamoxStudioContent()
-		}
-	];
-}
 function removeObsoleteRouteFiles(routesDir) {
 	const camoxDir = resolve(routesDir, "_camox");
 	const studioDir = resolve(routesDir, "(camox)", "(_studio)");
@@ -156,7 +29,12 @@ function removeObsoleteRouteFiles(routesDir) {
 		resolve(studioDir, "cmx.tsx"),
 		resolve(studioDir, "cmx-studio.tsx"),
 		resolve(studioDir, "cmx-studio.$.tsx"),
-		resolve(studioDir, "cmx-studio.content.tsx")
+		resolve(studioDir, "cmx-studio.content.tsx"),
+		resolve(routesDir, "(camox)", "(_preview)", "$.tsx"),
+		resolve(routesDir, "(camox)", "(_preview)", "og.tsx"),
+		resolve(studioDir, `${STUDIO_ROUTE_SEGMENT}.tsx`),
+		resolve(studioDir, `${STUDIO_ROUTE_SEGMENT}.$.tsx`),
+		resolve(studioDir, `${STUDIO_ROUTE_SEGMENT}.content.tsx`)
 	];
 	for (const filePath of obsoletePaths) try {
 		if (!readFileSync(filePath, "utf-8").startsWith(HEADER)) continue;
@@ -166,34 +44,9 @@ function removeObsoleteRouteFiles(routesDir) {
 		throw error;
 	}
 }
-function generateRouteFiles(options) {
-	const groupDir = resolve(options.routesDir, "(camox)");
-	mkdirSync(resolve(groupDir, "(_preview)"), { recursive: true });
-	mkdirSync(resolve(groupDir, "(_studio)"), { recursive: true });
-	removeObsoleteRouteFiles(options.routesDir);
-	for (const entry of getRouteFileEntries(options)) writeIfChanged(entry.path, entry.content);
-}
-function watchRouteFiles(options) {
-	const { server, ...routeFilesOptions } = options;
-	const entries = getRouteFileEntries(routeFilesOptions);
-	const expectedByPath = new Map(entries.map((e) => [e.path, e.content]));
-	server.watcher.on("change", (changedPath) => {
-		const expected = expectedByPath.get(changedPath);
-		if (!expected) return;
-		if (readFileSync(changedPath, "utf-8") !== expected) {
-			const rel = relative(server.config.root, changedPath);
-			server.config.logger.warn(`Camox route file "${rel}" was modified — reverting to generated version.`, { timestamp: true });
-			writeFileSync(changedPath, expected, "utf-8");
-		}
-	});
-	server.watcher.on("unlink", (deletedPath) => {
-		const expected = expectedByPath.get(deletedPath);
-		if (!expected) return;
-		const rel = relative(server.config.root, deletedPath);
-		server.config.logger.warn(`Camox route file "${rel}" was deleted — recreating.`, { timestamp: true });
-		writeFileSync(deletedPath, expected, "utf-8");
-	});
+function cleanupGeneratedRouteFiles(routesDir) {
+	removeObsoleteRouteFiles(routesDir);
 }
 
 //#endregion
-export { generateRouteFiles, watchRouteFiles };
+export { cleanupGeneratedRouteFiles };

package/dist/features/vite/runtimeDev.js

@@ -0,0 +1,270 @@
+import { existsSync, readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+//#region src/features/vite/runtimeDev.ts
+const sdkRoot = resolve(dirname(fileURLToPath(import.meta.url)), "../../..");
+const VIRTUAL_CAMOX_APP = "virtual:camox/app";
+const RESOLVED_VIRTUAL_CAMOX_APP = "\0" + VIRTUAL_CAMOX_APP;
+const VIRTUAL_CAMOX_DOCUMENT = "virtual:camox/document";
+const RESOLVED_VIRTUAL_CAMOX_DOCUMENT = "\0" + VIRTUAL_CAMOX_DOCUMENT;
+const VIRTUAL_CAMOX_SERVER = "virtual:camox/server";
+const RESOLVED_VIRTUAL_CAMOX_SERVER = "\0" + VIRTUAL_CAMOX_SERVER;
+const VIRTUAL_CAMOX_NITRO_HANDLER = "#camox/nitro-handler";
+const VIRTUAL_PAGE_SERVER = "virtual:camox/page-server";
+const RESOLVED_VIRTUAL_PAGE_SERVER = "\0" + VIRTUAL_PAGE_SERVER;
+const VIRTUAL_STUDIO_SERVER = "virtual:camox/studio-server";
+const RESOLVED_VIRTUAL_STUDIO_SERVER = "\0" + VIRTUAL_STUDIO_SERVER;
+const VIRTUAL_PAGE_CLIENT = "virtual:camox/page-client";
+const RESOLVED_VIRTUAL_PAGE_CLIENT = "\0" + VIRTUAL_PAGE_CLIENT;
+const VIRTUAL_PAGE_CLIENT_URL = "virtual:camox/page-client-url";
+const RESOLVED_VIRTUAL_PAGE_CLIENT_URL = "\0" + VIRTUAL_PAGE_CLIENT_URL;
+const VIRTUAL_APP_STYLESHEET_URL = "virtual:camox/app-stylesheet-url";
+const RESOLVED_VIRTUAL_APP_STYLESHEET_URL = "\0" + VIRTUAL_APP_STYLESHEET_URL;
+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";
+const RESOLVED_VIRTUAL_OVERLAY_CSS = "\0" + VIRTUAL_OVERLAY_CSS;
+function normalizeImporterPath(importer) {
+	if (!importer) return "";
+	const [path] = importer.split("?");
+	if (path.startsWith("file://")) return fileURLToPath(path);
+	if (path.startsWith("/@fs/")) return path.slice(4);
+	return path;
+}
+function resolveSdkAlias(id, importer) {
+	if (!id.startsWith("@/")) return;
+	const normalizedImporter = normalizeImporterPath(importer).replaceAll("\\", "/");
+	const normalizedSdkSrc = resolve(sdkRoot, "src").replaceAll("\\", "/");
+	if (!normalizedImporter.includes(`${normalizedSdkSrc}/`)) return;
+	const basePath = resolve(sdkRoot, "src", id.slice(2));
+	return [
+		basePath,
+		`${basePath}.ts`,
+		`${basePath}.tsx`,
+		resolve(basePath, "index.ts")
+	].find((candidate) => existsSync(candidate));
+}
+function resolveCamoxSourceImport(id) {
+	return {
+		"camox/createApp": resolve(sdkRoot, "src/core/createApp.ts"),
+		"camox/createBlock": resolve(sdkRoot, "src/core/createBlock.tsx"),
+		"camox/createLayout": resolve(sdkRoot, "src/core/createLayout.tsx"),
+		"camox/document": resolve(sdkRoot, "src/core/defineDocument.ts"),
+		"camox/CamoxProvider": resolve(sdkRoot, "src/features/provider/CamoxProvider.tsx"),
+		"camox/CamoxPreview": resolve(sdkRoot, "src/features/preview/CamoxPreview.tsx"),
+		"camox/navigation": resolve(sdkRoot, "src/features/navigation/navigation.tsx"),
+		"camox/_internal/pageServer": resolve(sdkRoot, "src/features/runtime/pageServer.tsx"),
+		"camox/_internal/pageClient": resolve(sdkRoot, "src/features/runtime/pageClient.tsx"),
+		"camox/_internal/studioServer": resolve(sdkRoot, "src/features/runtime/studioServer.tsx"),
+		"camox/_internal/runtime": resolve(sdkRoot, "src/features/runtime/runtime.ts")
+	}[id];
+}
+function generateVirtualCamoxApp() {
+	return `import { createApp } from "camox/createApp";
+
+const rootBlockModules = import.meta.glob("/src/blocks/*.{ts,tsx}", { eager: true });
+const legacyBlockModules = import.meta.glob("/src/camox/blocks/*.{ts,tsx}", { eager: true });
+const rootLayoutModules = import.meta.glob("/src/layouts/*.{ts,tsx}", { eager: true });
+const legacyLayoutModules = import.meta.glob("/src/camox/layouts/*.{ts,tsx}", { eager: true });
+
+const blocks = [...Object.values(rootBlockModules), ...Object.values(legacyBlockModules)]
+  .map((mod) => mod.block)
+  .filter(Boolean);
+const layouts = [...Object.values(rootLayoutModules), ...Object.values(legacyLayoutModules)]
+  .map((mod) => mod.layout)
+  .filter(Boolean);
+
+export const camoxApp = createApp({ blocks, layouts });
+`;
+}
+function generateVirtualCamoxDocument() {
+	return `const documentModules = import.meta.glob("/src/document.{ts,tsx}", { eager: true });
+const documents = Object.values(documentModules)
+  .map((mod) => mod.default)
+  .filter(Boolean);
+
+export const camoxDocument = documents[0] ?? {};
+`;
+}
+function generateVirtualPageServer() {
+	return `import { renderPageWithApp } from "camox/_internal/pageServer";
+import { camoxApp } from "virtual:camox/app";
+
+export async function renderPage(input) {
+  return renderPageWithApp({ ...input, camoxApp });
+}
+`;
+}
+function generateVirtualStudioServer() {
+	return `import { renderStudioWithApp } from "camox/_internal/studioServer";
+import { camoxApp } from "virtual:camox/app";
+
+export async function renderStudio(input) {
+  return renderStudioWithApp({ ...input, camoxApp });
+}
+`;
+}
+function generateVirtualPageClient() {
+	return `import { hydrateRuntimeWithApp } from "camox/_internal/pageClient";
+import { camoxApp } from "virtual:camox/app";
+
+hydrateRuntimeWithApp(camoxApp);
+`;
+}
+function wrapViteDevId(id) {
+	return `/@id/${id.replace("\0", "__x00__")}`;
+}
+function generateVirtualPageClientUrl() {
+	return `export default ${JSON.stringify(wrapViteDevId(RESOLVED_VIRTUAL_PAGE_CLIENT))};`;
+}
+function generateVirtualAppStylesheetUrl() {
+	return `import stylesheetUrl from "/src/styles.css?url";
+
+export default stylesheetUrl;
+`;
+}
+function generateVirtualCamoxServer(runtimeBasePath) {
+	return `import { handleCamoxRequest as handleRuntimeRequest } from "camox/_internal/runtime";
+import { camoxApp } from "virtual:camox/app";
+import { camoxDocument } from "virtual:camox/document";
+import appStylesheetUrl from "virtual:camox/app-stylesheet-url";
+import pageClientEntryUrl from "virtual:camox/page-client-url";
+import { renderPage } from "virtual:camox/page-server";
+import { renderStudio } from "virtual:camox/studio-server";
+
+export async function handleCamoxRequest(request) {
+  return handleRuntimeRequest(request, {
+    apiUrl: __CAMOX_API_URL__,
+    authenticationUrl: __CAMOX_AUTHENTICATION_URL__,
+    clientEntryUrl: pageClientEntryUrl,
+    environmentName: __CAMOX_ENVIRONMENT_NAME__,
+    getCamoxApp: async () => camoxApp,
+    getDocument: async () => camoxDocument,
+    projectSlug: __CAMOX_PROJECT_SLUG__,
+    renderPage,
+    renderStudio,
+    runtimeBasePath: ${JSON.stringify(runtimeBasePath)},
+    stylesheetUrl: appStylesheetUrl,
+  });
+}
+`;
+}
+function generateVirtualCamoxNitroHandler(runtimeBasePath) {
+	return `import { defineHandler } from "nitro";
+import { handleCamoxRequest } from "virtual:camox/server";
+
+const runtimeBasePath = ${JSON.stringify(normalizeRuntimeBasePath(runtimeBasePath))};
+
+function isDocumentRequest(request) {
+  const accept = request.headers.get("Accept") ?? request.headers.get("accept") ?? "";
+  return accept.includes("text/html") || accept.includes("*/*");
+}
+
+function getRuntimePathname(pathname) {
+  if (!runtimeBasePath) return pathname;
+  if (pathname === runtimeBasePath) return "/";
+  if (!pathname.startsWith(runtimeBasePath + "/")) return null;
+  return pathname.slice(runtimeBasePath.length) || "/";
+}
+
+function shouldHandleRequest(request) {
+  const url = new URL(request.url);
+  const pathname = getRuntimePathname(url.pathname);
+  if (!pathname) return false;
+  if (request.method !== "GET" && request.method !== "HEAD") return false;
+  if (
+    pathname === "/_camox/data" ||
+    pathname === "/_camox/health" ||
+    pathname === "/_camox/registry"
+  ) {
+    return true;
+  }
+  if (pathname === "/og" || pathname === "/sitemap.xml") return true;
+  if (pathname === "/camox" || pathname.startsWith("/camox/")) return true;
+  if (/\\.[a-z0-9]+$/i.test(pathname)) return false;
+  if (pathname.startsWith("/@") || pathname.startsWith("/src/")) return false;
+  if (pathname.startsWith("/__vite")) return false;
+  if (pathname.startsWith("/node_modules/")) return false;
+  return isDocumentRequest(request);
+}
+
+async function transformHtmlResponse(response) {
+  const contentType = response.headers.get("Content-Type") ?? response.headers.get("content-type") ?? "";
+  if (!contentType.includes("text/html")) return response;
+  if (!globalThis.__transform_html__) return response;
+
+  const headers = new Headers(response.headers);
+  headers.delete("Content-Length");
+  headers.delete("content-length");
+
+  return new Response(await globalThis.__transform_html__(await response.text()), {
+    headers,
+    status: response.status,
+    statusText: response.statusText,
+  });
+}
+
+export default defineHandler(async (event) => {
+  if (!shouldHandleRequest(event.req)) {
+    return new Response("Not found", { status: 404 });
+  }
+
+  const response = await handleCamoxRequest(event.req);
+  if (response) return transformHtmlResponse(response);
+  return new Response("Not found", { status: 404 });
+});
+`;
+}
+function resolveRuntimeDevId(id, importer) {
+	const camoxSourceImport = resolveCamoxSourceImport(id);
+	if (camoxSourceImport) return camoxSourceImport;
+	const sdkAlias = resolveSdkAlias(id, importer);
+	if (sdkAlias) return sdkAlias;
+	if (id === VIRTUAL_CAMOX_APP) return RESOLVED_VIRTUAL_CAMOX_APP;
+	if (id === VIRTUAL_CAMOX_DOCUMENT) return RESOLVED_VIRTUAL_CAMOX_DOCUMENT;
+	if (id === VIRTUAL_CAMOX_SERVER) return RESOLVED_VIRTUAL_CAMOX_SERVER;
+	if (id === VIRTUAL_PAGE_SERVER) return RESOLVED_VIRTUAL_PAGE_SERVER;
+	if (id === VIRTUAL_STUDIO_SERVER) return RESOLVED_VIRTUAL_STUDIO_SERVER;
+	if (id === VIRTUAL_PAGE_CLIENT) return RESOLVED_VIRTUAL_PAGE_CLIENT;
+	if (id === VIRTUAL_PAGE_CLIENT_URL) return RESOLVED_VIRTUAL_PAGE_CLIENT_URL;
+	if (id === VIRTUAL_APP_STYLESHEET_URL) return RESOLVED_VIRTUAL_APP_STYLESHEET_URL;
+	if (id === VIRTUAL_STUDIO_CSS) return RESOLVED_VIRTUAL_STUDIO_CSS;
+	if (id === VIRTUAL_OVERLAY_CSS) return RESOLVED_VIRTUAL_OVERLAY_CSS;
+}
+function loadRuntimeDevModule(id, options = {}) {
+	if (id === RESOLVED_VIRTUAL_CAMOX_APP) return generateVirtualCamoxApp();
+	if (id === RESOLVED_VIRTUAL_CAMOX_DOCUMENT) return generateVirtualCamoxDocument();
+	if (id === RESOLVED_VIRTUAL_CAMOX_SERVER) return generateVirtualCamoxServer(options.runtimeBasePath);
+	if (id === VIRTUAL_CAMOX_NITRO_HANDLER) return generateVirtualCamoxNitroHandler(options.runtimeBasePath);
+	if (id === RESOLVED_VIRTUAL_PAGE_SERVER) return generateVirtualPageServer();
+	if (id === RESOLVED_VIRTUAL_STUDIO_SERVER) return generateVirtualStudioServer();
+	if (id === RESOLVED_VIRTUAL_PAGE_CLIENT) return generateVirtualPageClient();
+	if (id === RESOLVED_VIRTUAL_PAGE_CLIENT_URL) return generateVirtualPageClientUrl();
+	if (id === RESOLVED_VIRTUAL_APP_STYLESHEET_URL) return generateVirtualAppStylesheetUrl();
+	if (id === RESOLVED_VIRTUAL_STUDIO_CSS) return `export default "/@fs/${resolve(sdkRoot, "dist/studio.css")}";`;
+	if (id === RESOLVED_VIRTUAL_OVERLAY_CSS) return `export default ${JSON.stringify(readFileSync(resolve(sdkRoot, "dist/studio-overlays.css"), "utf-8"))};`;
+}
+function normalizeRuntimeBasePath(basePath) {
+	if (basePath === void 0) return "";
+	if (!basePath || basePath === "/") return "";
+	return basePath.startsWith("/") ? basePath.replace(/\/+$/, "") : `/${basePath.replace(/\/+$/, "")}`;
+}
+function installRuntimeNitroRoutes(nitro, options) {
+	const routes = options.runtimeBasePath && options.runtimeBasePath !== "/" ? [options.runtimeBasePath, `${options.runtimeBasePath}/**`] : [
+		"/",
+		"/_camox/data",
+		"/_camox/health",
+		"/_camox/registry",
+		"/og",
+		"/sitemap.xml",
+		"/camox",
+		"/camox/**",
+		"/**"
+	];
+	for (const route of routes) nitro.options.routes[route] = VIRTUAL_CAMOX_NITRO_HANDLER;
+	nitro.options.virtual[VIRTUAL_CAMOX_NITRO_HANDLER] = generateVirtualCamoxNitroHandler(options.runtimeBasePath);
+}
+
+//#endregion
+export { installRuntimeNitroRoutes, loadRuntimeDevModule, resolveRuntimeDevId };

package/dist/features/vite/utils.js

@@ -1,10 +1,12 @@
-import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname } from "node:path";
 
 //#region src/features/vite/utils.ts
 function writeIfChanged(filePath, content) {
 	if (existsSync(filePath)) {
 		if (readFileSync(filePath, "utf-8") === content) return;
 	}
+	mkdirSync(dirname(filePath), { recursive: true });
 	writeFileSync(filePath, content, "utf-8");
 }
 

package/dist/features/vite/vite.d.ts

@@ -1,6 +1,24 @@
 import { Plugin } from "vite-plus";
 
 //#region src/features/vite/vite.d.ts
+interface CamoxNitro {
+  hooks: {
+    hook: (name: "compiled", callback: (nitro: CamoxNitro) => void) => void;
+  };
+  options: {
+    output: {
+      publicDir: string;
+      serverDir: string;
+    };
+    routes: Record<string, string>;
+    virtual: Record<string, string>;
+  };
+}
+type CamoxVitePlugin = Plugin & {
+  nitro?: {
+    setup: (nitro: CamoxNitro) => void;
+  };
+};
 interface CamoxPluginOptions {
   /** Stable, human-readable slug identifying this project (e.g. "prestigious-impala-84") */
   projectSlug: string;
@@ -10,12 +28,13 @@ interface CamoxPluginOptions {
   disableTelemetry?: boolean;
   /** Internal options (intended for Camox contributors in development, not for public use) */
   _internal?: {
-    /** URL of the Camox API backend, used for data fetching */apiUrl?: string; /** URL of the Camox authentication backend (default: https://camox.ai) */
+    /** URL of the Camox API backend, used for data fetching */apiUrl?: string; /** URL of the Camox authentication backend (default: https://app.camox.ai) */
     authenticationUrl?: string; /** Show Tanstack query devtools (default: false) */
     enableTanstackDevtools?: boolean; /** Disable automatic code generation (route files, app file, skill files) (default: false) */
-    disableCodeGen?: boolean;
+    disableCodeGen?: boolean; /** Mount the Camox-owned dev runtime at this base path. Use "/" for root mode. */
+    runtimeBasePath?: string;
   };
 }
-declare function camox(options: CamoxPluginOptions): Plugin;
+declare function camox(options: CamoxPluginOptions): CamoxVitePlugin;
 //#endregion
 export { CamoxPluginOptions, camox };

package/dist/features/vite/vite.js

@@ -1,9 +1,10 @@
 import { generateAppFile, watchAppFile } from "./appGeneration.js";
 import { watchNewBlockFiles } from "./blockBoilerplate.js";
 import { syncDefinitions, syncDefinitionsToApi } from "./definitionsSync.js";
-import { generateRouteFiles, watchRouteFiles } from "./routeGeneration.js";
+import { cleanupGeneratedRouteFiles } from "./routeGeneration.js";
+import { installRuntimeNitroRoutes, loadRuntimeDevModule, resolveRuntimeDevId } from "./runtimeDev.js";
 import { generateSkillFiles, watchSkillFiles } from "./skillGeneration.js";
-import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { cpSync, existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { homedir } from "node:os";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
@@ -16,9 +17,11 @@ 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";
 const RESOLVED_VIRTUAL_OVERLAY_CSS = "\0" + VIRTUAL_OVERLAY_CSS;
+const VIRTUAL_PAGE_CLIENT = "virtual:camox/page-client";
+const RESOLVED_VIRTUAL_PAGE_CLIENT_URL = "\0virtual:camox/page-client-url";
 const PRODUCTION_API_URL = "https://api.camox.ai";
-/** Authentication URL to use for Camox authentication (production Camox web app) */
-const DEFAULT_AUTHENTICATION_URL = "https://camox.ai";
+/** Authentication URL to use for Camox authentication (production Camox Dashboard) */
+const DEFAULT_AUTHENTICATION_URL = "https://app.camox.ai";
 const authTokenSchema = z.object({
 	token: z.string(),
 	name: z.string(),
@@ -66,12 +69,16 @@ function camox(options) {
 	const authenticationUrl = options._internal?.authenticationUrl ?? DEFAULT_AUTHENTICATION_URL;
 	const enableTanstackDevtools = options._internal?.enableTanstackDevtools ?? false;
 	const disableCodeGen = options._internal?.disableCodeGen ?? false;
+	const runtimeBasePath = options._internal?.runtimeBasePath;
 	let isBuild = false;
 	let resolvedConfig;
 	let environmentName;
 	return {
 		name: "camox",
-		resolveId(id) {
+		enforce: "pre",
+		resolveId(id, importer) {
+			const runtimeId = resolveRuntimeDevId(id, importer);
+			if (runtimeId) return runtimeId;
 			if (id === VIRTUAL_STUDIO_CSS) return RESOLVED_VIRTUAL_STUDIO_CSS;
 			if (id === VIRTUAL_OVERLAY_CSS) return RESOLVED_VIRTUAL_OVERLAY_CSS;
 		},
@@ -80,11 +87,8 @@ function camox(options) {
 				const cssPath = resolve(sdkRoot, "dist/studio.css");
 				if (isBuild) {
 					const css = readFileSync(cssPath, "utf-8");
-					return `export default import.meta.ROLLUP_FILE_URL_${this.emitFile({
-						type: "asset",
-						name: "studio.css",
-						source: css
-					})};`;
+					const dataUrl = `data:text/css;base64,${Buffer.from(css).toString("base64")}`;
+					return `export default ${JSON.stringify(dataUrl)};`;
 				}
 				return `export default "/@fs/${cssPath}";`;
 			}
@@ -92,18 +96,38 @@ function camox(options) {
 				const css = readFileSync(resolve(sdkRoot, "dist/studio-overlays.css"), "utf-8");
 				return `export default ${JSON.stringify(css)};`;
 			}
+			if (id === RESOLVED_VIRTUAL_PAGE_CLIENT_URL && isBuild) return "export default \"/_chunks/camox-page-client.mjs\";";
+			return loadRuntimeDevModule(id, { runtimeBasePath });
 		},
+		nitro: { setup(nitro) {
+			installRuntimeNitroRoutes(nitro, { runtimeBasePath });
+			nitro.hooks.hook("compiled", ({ options }) => {
+				const serverAssets = join(options.output.serverDir, "assets");
+				if (!existsSync(serverAssets)) return;
+				cpSync(serverAssets, join(options.output.publicDir, "assets"), { recursive: true });
+			});
+		} },
 		config(_config, env) {
 			isBuild = env.command === "build";
 			environmentName = resolveEnvironmentName(env.command, authenticationUrl);
 			return {
+				build: { emitAssets: true },
 				define: {
 					__CAMOX_TELEMETRY_DISABLED__: JSON.stringify(!!options.disableTelemetry),
 					__ENABLE_TANSTACK_DEVTOOLS__: JSON.stringify(enableTanstackDevtools),
 					__CAMOX_ENVIRONMENT_NAME__: JSON.stringify(environmentName),
 					__CAMOX_API_URL__: JSON.stringify(apiUrl),
+					__CAMOX_AUTHENTICATION_URL__: JSON.stringify(authenticationUrl),
 					__CAMOX_PROJECT_SLUG__: JSON.stringify(options.projectSlug)
 				},
+				environments: { client: { build: { rollupOptions: {
+					input: { "camox-page-client": VIRTUAL_PAGE_CLIENT },
+					output: {
+						assetFileNames: "assets/[name]-[hash][extname]",
+						chunkFileNames: "_chunks/[name]-[hash].mjs",
+						entryFileNames: "_chunks/[name].mjs"
+					}
+				} } } },
 				resolve: { alias: [{
 					find: /^tslib$/,
 					replacement: "tslib/tslib.es6.mjs"
@@ -189,10 +213,7 @@ function camox(options) {
 			});
 			if (!disableCodeGen) {
 				generateAppFile(config.root);
-				generateRouteFiles({
-					routesDir,
-					authenticationUrl
-				});
+				cleanupGeneratedRouteFiles(routesDir);
 				generateSkillFiles(config.root);
 			}
 			if (disableCodeGen) config.logger.warn("⚠️  Code generation is disabled (_internal.disableCodeGen). This option is only meant for momentary debugging — do not deploy or commit your app with it enabled.", { timestamp: true });
@@ -203,11 +224,7 @@ function camox(options) {
 			const routesDir = resolve(server.config.root, "src/routes");
 			if (!disableCodeGen) {
 				watchAppFile(server, server.config.root);
-				watchRouteFiles({
-					server,
-					routesDir,
-					authenticationUrl
-				});
+				cleanupGeneratedRouteFiles(routesDir);
 				watchSkillFiles(server, server.config.root);
 				watchNewBlockFiles(server);
 			}