camox 0.11.0 → 0.13.0

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

@@ -14,6 +14,7 @@ const EnvironmentMenu = () => {
 	const authCtx = React.useContext(AuthContext);
 	if (!authCtx?.environmentName) return null;
 	const isProduction = authCtx.environmentName === "production";
+	const label = isProduction ? "PROD" : "DEV";
 	const badgeClassName = isProduction ? "bg-green-100 text-green-800 border border-green-300 hover:bg-green-100 dark:bg-green-900 dark:text-green-300 dark:border-green-700 dark:hover:bg-green-900 font-mono text-xs" : "bg-yellow-100 text-yellow-800 border border-yellow-300 hover:bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-300 dark:border-yellow-700 dark:hover:bg-yellow-900 font-mono text-xs";
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -24,14 +25,14 @@ const EnvironmentMenu = () => {
 		$[0] = t0;
 	} else t0 = $[0];
 	let t1;
-	if ($[1] !== authCtx.environmentName || $[2] !== badgeClassName) {
+	if ($[1] !== badgeClassName || $[2] !== label) {
 		t1 = /* @__PURE__ */ jsx(Badge, {
 			variant: "secondary",
 			className: badgeClassName,
-			children: authCtx.environmentName
+			children: label
 		});
-		$[1] = authCtx.environmentName;
-		$[2] = badgeClassName;
+		$[1] = badgeClassName;
+		$[2] = label;
 		$[3] = t1;
 	} else t1 = $[3];
 	let t2;
@@ -61,7 +62,7 @@ const EnvironmentMenu = () => {
 					children: "You are viewing the production environment."
 				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
 					className: "text-sm",
-					children: "This environment is your own space to iterate on content and data structures. It won't affect your teammates or production."
+					children: "This environment is your personal space to iterate on content and data structures. It won't affect your teammates or production."
 				}), /* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground text-xs",
 					children: "You will be able to pull and push data between environments from here."

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

@@ -61,7 +61,7 @@ const Navbar = () => {
 	const t4 = useIsPreviewSheetOpen() ? "opacity-100" : "opacity-0";
 	let t5;
 	if ($[7] !== t4) {
-		t5 = cn("absolute top-0 left-0 w-full h-[calc(100%+2px)] bg-black/10 transition-opacity z-10 will-change-auto pointer-events-none supports-backdrop-filter:backdrop-blur-xs", t4);
+		t5 = cn("absolute top-0 left-0 w-full h-[calc(100%+2px)] bg-black/66 transition-opacity z-10 will-change-auto pointer-events-none", t4);
 		$[7] = t4;
 		$[8] = t5;
 	} else t5 = $[8];

package/dist/features/vite/definitionsSync.js

@@ -11,8 +11,14 @@ const SYNC_DEBOUNCE_DELAY_MS = 100;
 function throwIfSyncAuthError(error) {
 	if (error instanceof Error && error.name === "ORPCError" && error.message.toLowerCase().includes("unauthorized")) throw new Error("[camox] Definition sync failed: invalid syncSecret.");
 }
+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. CAMOX_ENV must be "production" or a dev environment previously created by running the dev server while authenticated. Run \`npx camox login\` if needed.`);
+}
 async function syncDefinitionsToApi(options) {
-	const { camoxApp, projectSlug, apiUrl, syncSecret, environmentName, logger } = options;
+	const { camoxApp, projectSlug, apiUrl, syncSecret, environmentName, autoCreate, logger } = options;
 	const client = createServerApiClient(apiUrl, environmentName);
 	const blocks = camoxApp.getBlocks();
 	const layoutDefinitions = camoxApp.getSerializableLayoutDefinitions();
@@ -33,13 +39,15 @@ async function syncDefinitionsToApi(options) {
 		environmentCreated = (await client.blockDefinitions.sync({
 			projectSlug,
 			syncSecret,
+			autoCreate,
 			definitions
 		})).environmentCreated;
 	} catch (error) {
 		throwIfSyncAuthError(error);
+		if (!autoCreate && isNotFoundError(error)) throwUnknownEnvironmentError(environmentName);
 		throw error;
 	}
-	if (environmentCreated && environmentName) logger.info(`[camox] Created environment "${environmentName}" (forked from production)`, { timestamp: true });
+	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 (layoutDefinitions.length > 0) {
 		let layoutSyncResults;
@@ -47,10 +55,12 @@ async function syncDefinitionsToApi(options) {
 			layoutSyncResults = await client.layouts.sync({
 				projectSlug,
 				syncSecret,
+				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 });
@@ -119,7 +129,7 @@ async function ssrLoadModule(server, modulePath) {
 	}
 }
 async function syncDefinitions(server, options) {
-	const { projectSlug, syncSecret, apiUrl, environmentName } = options;
+	const { projectSlug, syncSecret, apiUrl, environmentName, autoCreate } = options;
 	const blocksDir = path.resolve(server.config.root, "src/camox/blocks");
 	const client = createServerApiClient(apiUrl, environmentName);
 	async function performInitialSync() {
@@ -136,6 +146,7 @@ async function syncDefinitions(server, options) {
 			apiUrl,
 			syncSecret,
 			environmentName,
+			autoCreate,
 			logger: server.config.logger
 		});
 	}

package/dist/features/vite/routeGeneration.js

@@ -15,7 +15,7 @@ const HEADER = `/* =============================================================
 // @ts-nocheck
 
 `;
-function generateCamoxLayout(authenticationUrl, apiUrl, projectSlug, environmentName) {
+function generateCamoxLayout(authenticationUrl) {
 	return HEADER + `import { Outlet, createFileRoute } from "@tanstack/react-router";
 import { CamoxProvider } from "camox/CamoxProvider";
 import { camoxApp } from "@/camox/app";
@@ -26,14 +26,14 @@ export const Route = createFileRoute("/_camox")({
 
 function CamoxPathlessLayout() {
   return (
-    <CamoxProvider camoxApp={camoxApp} authenticationUrl="${authenticationUrl}" apiUrl="${apiUrl}" projectSlug="${projectSlug}" environmentName="${environmentName}">
+    <CamoxProvider camoxApp={camoxApp} authenticationUrl="${authenticationUrl}" apiUrl={__CAMOX_API_URL__} projectSlug={__CAMOX_PROJECT_SLUG__} environmentName={__CAMOX_ENVIRONMENT_NAME__}>
       <Outlet />
     </CamoxProvider>
   );
 }
 `;
 }
-function generatePageRoute(apiUrl, projectSlug, environmentName) {
+function generatePageRoute() {
 	return HEADER + `import { createFileRoute } from "@tanstack/react-router";
 import {
   createMarkdownMiddleware,
@@ -43,8 +43,8 @@ import {
 } from "camox/_internal/pageRoute";
 import { camoxApp } from "@/camox/app";
 
-const markdownMiddleware = createMarkdownMiddleware("${apiUrl}", "${projectSlug}", "${environmentName}");
-const loader = createPageLoader("${apiUrl}", "${projectSlug}", "${environmentName}");
+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/$")({
@@ -134,16 +134,16 @@ function RouteComponent() {
 }
 `;
 }
-function getRouteFileEntries({ routesDir, authenticationUrl, apiUrl, projectSlug, environmentName }) {
+function getRouteFileEntries({ routesDir, authenticationUrl }) {
 	const camoxDir = resolve(routesDir, "_camox");
 	return [
 		{
 			path: resolve(routesDir, "_camox.tsx"),
-			content: generateCamoxLayout(authenticationUrl, apiUrl, projectSlug, environmentName)
+			content: generateCamoxLayout(authenticationUrl)
 		},
 		{
 			path: resolve(camoxDir, "$.tsx"),
-			content: generatePageRoute(apiUrl, projectSlug, environmentName)
+			content: generatePageRoute()
 		},
 		{
 			path: resolve(camoxDir, "og.tsx"),

package/dist/features/vite/vite.js

@@ -8,6 +8,7 @@ import { homedir } from "node:os";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { createServer } from "vite";
+import { z } from "zod";
 
 //#region src/features/vite/vite.ts
 const sdkRoot = resolve(dirname(fileURLToPath(import.meta.url)), "../../..");
@@ -18,18 +19,33 @@ const RESOLVED_VIRTUAL_OVERLAY_CSS = "\0" + VIRTUAL_OVERLAY_CSS;
 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";
-function resolveEnvironmentName(isDev, authenticationUrl) {
-	if (!isDev) return "production";
+const authTokenSchema = z.object({
+	token: z.string(),
+	name: z.string(),
+	email: z.string()
+});
+const authFileSchema = z.record(z.string(), authTokenSchema);
+function readAuthEmail(authenticationUrl) {
 	const authFile = join(homedir(), ".camox", "auth.json");
 	const key = authenticationUrl.replace(/\/+$/, "");
-	let auth;
 	try {
-		auth = JSON.parse(readFileSync(authFile, "utf-8"))[key];
+		const raw = JSON.parse(readFileSync(authFile, "utf-8"));
+		return authFileSchema.parse(raw)[key]?.email ?? null;
 	} catch {
-		throw new Error(`Camox: not authenticated for ${key}. Run \`camox login\` before starting the dev server.\nAuthentication is required so your dev environment is scoped to your user.`);
+		return null;
 	}
-	if (!auth?.email) throw new Error(`Camox: no session found for ${key} in ~/.camox/auth.json. Run \`camox login\` again.`);
-	return `${auth.email.split("@")[0]}-dev`;
+}
+function resolveEnvironmentName(command, authenticationUrl) {
+	if (command === "serve") {
+		const email = readAuthEmail(authenticationUrl);
+		if (!email) throw new Error("Camox: not authenticated. Run `npx camox login` to create your personal dev environment.");
+		return `dev:${email}`;
+	}
+	const envFromProcess = process.env.CAMOX_ENV;
+	if (envFromProcess) return envFromProcess;
+	const email = readAuthEmail(authenticationUrl);
+	const suggestion = email ? `  CAMOX_ENV=dev:${email}    (your personal dev environment)\n  CAMOX_ENV=production     (release build)` : `  CAMOX_ENV=production     (release build)\n\nIf you want to build against a dev environment, run \`npx camox login\` first.`;
+	throw new Error(`Camox: CAMOX_ENV is required on build. Set it to one of:\n${suggestion}`);
 }
 function camox(options) {
 	const apiUrl = options._internal?.apiUrl ?? PRODUCTION_API_URL;
@@ -65,7 +81,7 @@ function camox(options) {
 		},
 		config(_config, env) {
 			isBuild = env.command === "build";
-			environmentName = resolveEnvironmentName(env.command === "serve", authenticationUrl);
+			environmentName = resolveEnvironmentName(env.command, authenticationUrl);
 			return {
 				define: {
 					__CAMOX_ANALYTICS_DISABLED__: JSON.stringify(!!options.disableAnalytics),
@@ -74,51 +90,55 @@ function camox(options) {
 					__CAMOX_API_URL__: JSON.stringify(apiUrl),
 					__CAMOX_PROJECT_SLUG__: JSON.stringify(options.projectSlug)
 				},
-				optimizeDeps: {
-					include: [
-						"camox > @base-ui/react/accordion",
-						"camox > @base-ui/react/alert-dialog",
-						"camox > @base-ui/react/avatar",
-						"camox > @base-ui/react/dialog",
-						"camox > @base-ui/react/input",
-						"camox > @base-ui/react/menu",
-						"camox > @base-ui/react/merge-props",
-						"camox > @base-ui/react/popover",
-						"camox > @base-ui/react/select",
-						"camox > @base-ui/react/separator",
-						"camox > @base-ui/react/switch",
-						"camox > @base-ui/react/tabs",
-						"camox > @base-ui/react/toggle",
-						"camox > @base-ui/react/tooltip",
-						"camox > @base-ui/react/use-render",
-						"camox > @dnd-kit/core",
-						"camox > @dnd-kit/modifiers",
-						"camox > @dnd-kit/sortable",
-						"camox > @dnd-kit/utilities",
-						"camox > @lexical/react/LexicalComposer",
-						"camox > @lexical/react/LexicalComposerContext",
-						"camox > @lexical/react/LexicalContentEditable",
-						"camox > @lexical/react/LexicalOnChangePlugin",
-						"camox > @lexical/react/LexicalRichTextPlugin",
-						"camox > @orpc/client",
-						"camox > @orpc/client/fetch",
-						"camox > @orpc/tanstack-query",
-						"camox > @sinclair/typebox",
-						"camox > @takumi-rs/image-response",
-						"camox > @tanstack/react-form",
-						"camox > @xstate/store",
-						"camox > @xstate/store/react",
-						"camox > @camox/ui > cmdk",
-						"camox > fractional-indexing",
-						"camox > lexical",
-						"camox > posthog-js",
-						"camox > shiki",
-						"camox > @camox/ui > sonner",
-						"camox > @tanstack/react-query-devtools/production",
-						"camox > partysocket/react"
-					],
-					exclude: ["virtual:tanstack-start-client-entry"]
-				}
+				optimizeDeps: { include: [
+					"react",
+					"react-dom",
+					"react-dom/client",
+					"react/jsx-runtime",
+					"react/jsx-dev-runtime",
+					"camox > @base-ui/react/accordion",
+					"camox > @base-ui/react/alert-dialog",
+					"camox > @base-ui/react/avatar",
+					"camox > @base-ui/react/dialog",
+					"camox > @base-ui/react/input",
+					"camox > @base-ui/react/menu",
+					"camox > @base-ui/react/merge-props",
+					"camox > @base-ui/react/popover",
+					"camox > @base-ui/react/select",
+					"camox > @base-ui/react/separator",
+					"camox > @base-ui/react/switch",
+					"camox > @base-ui/react/tabs",
+					"camox > @base-ui/react/toggle",
+					"camox > @base-ui/react/tooltip",
+					"camox > @base-ui/react/use-render",
+					"camox > @dnd-kit/core",
+					"camox > @dnd-kit/modifiers",
+					"camox > @dnd-kit/sortable",
+					"camox > @dnd-kit/utilities",
+					"camox > @lexical/react/LexicalComposer",
+					"camox > @lexical/react/LexicalComposerContext",
+					"camox > @lexical/react/LexicalContentEditable",
+					"camox > @lexical/react/LexicalOnChangePlugin",
+					"camox > @lexical/react/LexicalRichTextPlugin",
+					"camox > @orpc/client",
+					"camox > @orpc/client/fetch",
+					"camox > @orpc/tanstack-query",
+					"camox > @sinclair/typebox",
+					"camox > @takumi-rs/image-response",
+					"camox > @tanstack/react-form",
+					"camox > @xstate/store",
+					"camox > @xstate/store/react",
+					"camox > @camox/ui > cmdk",
+					"camox > fractional-indexing",
+					"camox > lexical",
+					"camox > posthog-js",
+					"camox > shiki",
+					"camox > @camox/ui > sonner",
+					"camox > @camox/ui > lucide-react",
+					"camox > lucide-react",
+					"camox > @tanstack/react-query-devtools/production",
+					"camox > partysocket/react"
+				] }
 			};
 		},
 		configResolved(config) {
@@ -128,10 +148,7 @@ function camox(options) {
 				generateAppFile(config.root);
 				generateRouteFiles({
 					routesDir,
-					authenticationUrl,
-					apiUrl,
-					projectSlug: options.projectSlug,
-					environmentName
+					authenticationUrl
 				});
 				generateSkillFiles(config.root);
 			}
@@ -146,10 +163,7 @@ function camox(options) {
 				watchRouteFiles({
 					server,
 					routesDir,
-					authenticationUrl,
-					apiUrl,
-					projectSlug: options.projectSlug,
-					environmentName
+					authenticationUrl
 				});
 				watchSkillFiles(server, server.config.root);
 				watchNewBlockFiles(server);
@@ -159,7 +173,8 @@ function camox(options) {
 					projectSlug: options.projectSlug,
 					syncSecret: options.syncSecret,
 					apiUrl,
-					environmentName
+					environmentName,
+					autoCreate: true
 				});
 			});
 		},
@@ -182,6 +197,7 @@ function camox(options) {
 					apiUrl,
 					syncSecret: options.syncSecret,
 					environmentName,
+					autoCreate: false,
 					logger: resolvedConfig.logger
 				});
 			} finally {

package/dist/studio-overlays.css

@@ -118,8 +118,7 @@
 .camox-sheet-overlay {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(4px);
+  background: rgba(0, 0, 0, 0.66);
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
   pointer-events: none;