camox 0.9.0 → 0.9.1

package/dist/features/preview/CamoxPreview.js

@@ -147,7 +147,7 @@ function usePreviewedPage() {
 		$[20] = t9;
 	} else t9 = $[20];
 	const { data: peekedPage } = useQuery(t9);
-	return peekedPage ?? currentPage;
+	return peekedPagePathname ? peekedPage ?? currentPage : currentPage;
 }
 function _temp(state) {
 	return state.context.peekedPagePathname;

package/dist/features/preview/components/EditPageSheet.js

@@ -22,6 +22,7 @@ import { Globe, Info } from "lucide-react";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
 import { Spinner } from "@camox/ui/spinner";
 import { useForm } from "@tanstack/react-form";
+import { Alert, AlertDescription, AlertTitle } from "@camox/ui/alert";
 import { Switch } from "@camox/ui/switch";
 
 //#region src/features/preview/components/EditPageSheet.tsx
@@ -149,7 +150,11 @@ const EditPageSheetContent = ({ pageId }) => {
 								},
 								className: "space-y-4",
 								children: [
-									/* @__PURE__ */ jsx(form.Field, {
+									isRootPage ? /* @__PURE__ */ jsxs(Alert, { children: [
+										/* @__PURE__ */ jsx(Info, { className: "size-4" }),
+										/* @__PURE__ */ jsx(AlertTitle, { children: "Homepage" }),
+										/* @__PURE__ */ jsx(AlertDescription, { children: "You can't change the path of the home page." })
+									] }) : /* @__PURE__ */ jsx(form.Field, {
 										name: "parentPageId",
 										children: (parentField) => /* @__PURE__ */ jsx(form.Field, {
 											name: "pathSegment",
@@ -158,7 +163,6 @@ const EditPageSheetContent = ({ pageId }) => {
 												onParentPageIdChange: parentField.handleChange,
 												pathSegment: pathField.state.value,
 												onPathSegmentChange: pathField.handleChange,
-												disabled: isRootPage,
 												pages,
 												excludePageId: page.id
 											})

package/dist/features/preview/components/PagePicker.js

@@ -30,6 +30,10 @@ const PagePicker = () => {
 	});
 	const { pathname } = useLocation();
 	const navigate = useNavigate();
+	const closePopover = () => {
+		previewStore.send({ type: "clearPeekedPage" });
+		setOpen(false);
+	};
 	const handleDeletePage = async (page) => {
 		const displayName = page.metaTitle ?? formatPathSegment(page.pathSegment);
 		try {
@@ -54,7 +58,10 @@ const PagePicker = () => {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Popover, {
 		open,
 		onOpenChange: (value) => {
-			previewStore.send({ type: "clearPeekedPage" });
+			if (!value) {
+				closePopover();
+				return;
+			}
 			setOpen(value);
 		},
 		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
@@ -97,7 +104,7 @@ const PagePicker = () => {
 							hideCheck: true,
 							onSelect: () => {
 								navigate({ to: page_1.fullPath });
-								setOpen(false);
+								closePopover();
 							},
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "flex min-w-0 flex-1 items-start gap-2",
@@ -122,7 +129,7 @@ const PagePicker = () => {
 											type: "openEditPageSheet",
 											pageId: page_1.id
 										});
-										setOpen(false);
+										closePopover();
 									},
 									onKeyDown: (e_0) => {
 										if (e_0.key === "Enter" || e_0.key === " ") {
@@ -132,7 +139,7 @@ const PagePicker = () => {
 												type: "openEditPageSheet",
 												pageId: page_1.id
 											});
-											setOpen(false);
+											closePopover();
 										}
 									},
 									children: /* @__PURE__ */ jsx(Pencil, { className: "size-4" })
@@ -158,7 +165,7 @@ const PagePicker = () => {
 					/* @__PURE__ */ jsx(CommandSeparator, {}),
 					/* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsxs(CommandItem, {
 						onSelect: () => {
-							setOpen(false);
+							closePopover();
 							previewStore.send({ type: "openCreatePageSheet" });
 						},
 						value: CREATE_PAGE_VALUE,

package/dist/features/provider/CamoxProvider.js

@@ -10,7 +10,7 @@ import { useProjectRoom } from "../../lib/use-project-room.js";
 import { CommandPalette, useCommandPaletteActions } from "./components/CommandPalette.js";
 import { useAdminShortcuts } from "./useAdminShortcuts.js";
 import { c } from "react/compiler-runtime";
-import { Toaster } from "@camox/ui/toaster";
+import { Toaster, toast } from "@camox/ui/toaster";
 import { useQuery } from "@tanstack/react-query";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -62,7 +62,7 @@ const AuthenticatedCamoxProvider = (t0) => {
 	return t4;
 };
 const UnauthenticatedCamoxProvider = (t0) => {
-	const $ = c(7);
+	const $ = c(11);
 	const { children } = t0;
 	const signInRedirect = useSignInRedirect();
 	const { authenticationUrl } = useAuthContext();
@@ -90,15 +90,47 @@ const UnauthenticatedCamoxProvider = (t0) => {
 	} else t2 = $[4];
 	React.useEffect(t1, t2);
 	let t3;
-	if ($[5] !== children) {
-		t3 = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
+	let t4;
+	if ($[5] !== signInRedirect) {
+		t3 = () => {
+			if (!import.meta.env.PROD) return;
+			const toastId = toast("Sign in to open Camox Studio", {
+				duration: Infinity,
+				action: {
+					label: "Sign in",
+					onClick: () => signInRedirect()
+				}
+			});
+			return () => void toast.dismiss(toastId);
+		};
+		t4 = [signInRedirect];
+		$[5] = signInRedirect;
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		t3 = $[6];
+		t4 = $[7];
+	}
+	React.useEffect(t3, t4);
+	let t5;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Toaster, {
+			theme: "light",
+			position: "bottom-right",
+			offset: { bottom: "1rem" }
+		});
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== children) {
+		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [t5, /* @__PURE__ */ jsx("div", {
 			className: "bg-background min-h-screen",
 			children
-		}) });
-		$[5] = children;
-		$[6] = t3;
-	} else t3 = $[6];
-	return t3;
+		})] });
+		$[9] = children;
+		$[10] = t6;
+	} else t6 = $[10];
+	return t6;
 };
 function CamoxProvider({ children, camoxApp, authenticationUrl, apiUrl, projectSlug, environmentName }) {
 	const authClient = React.useMemo(() => createCamoxAuthClient(apiUrl), [apiUrl]);

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

@@ -4,7 +4,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
-import { ChevronsUpDown } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 import { Badge } from "@camox/ui/badge";
 
 //#region src/features/studio/components/EnvironmentMenu.tsx
@@ -36,7 +36,7 @@ const EnvironmentMenu = () => {
 	} else t1 = $[3];
 	let t2;
 	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(ChevronsUpDown, { className: "shrink-0 opacity-50" });
+		t2 = /* @__PURE__ */ jsx(ChevronDown, { className: "shrink-0 opacity-50" });
 		$[4] = t2;
 	} else t2 = $[4];
 	let t3;

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

@@ -1,7 +1,6 @@
-import { AuthContext, useAuthState } from "../../../lib/auth.js";
+import { useAuthContext, useAuthState } from "../../../lib/auth.js";
 import { useTheme } from "../useTheme.js";
 import { c } from "react/compiler-runtime";
-import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
 import { LogOut, Monitor, Moon, Settings, Sun, User } from "lucide-react";
@@ -34,7 +33,7 @@ const UserButton = () => {
 	return t0;
 };
 function AuthenticatedUserButton({ setTheme }) {
-	const authCtx = useContext(AuthContext);
+	const authCtx = useAuthContext();
 	const { data: session } = authCtx.authClient.useSession();
 	const authenticationUrl = authCtx.authenticationUrl;
 	const userName = session?.user?.name || "User";
@@ -100,7 +99,7 @@ function AuthenticatedUserButton({ setTheme }) {
 				})
 			] })] }),
 			/* @__PURE__ */ jsxs(DropdownMenuItem, {
-				onClick: () => authCtx.authClient.signOut(),
+				onClick: () => void authCtx.authClient.signOut(),
 				children: [/* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", { children: "Sign out" })]
 			})
 		]

package/dist/features/vite/blockBoilerplate.js

@@ -27,13 +27,14 @@ const ${camelName} = createBlock({
     title: Type.String({ default: "Title" }),
   },
   component: ${pascalName}Component,
+  toMarkdown: ['{{title}}']
 });
 
 function ${pascalName}Component() {
   return (
     <section>
       <${camelName}.Field name="title">
-        {(content) => <h1>{content}</h1>}
+        {(props) => <h1 {...props} />}
       </${camelName}.Field>
     </section>
   );

package/dist/features/vite/definitionsSync.js

@@ -14,7 +14,11 @@ function throwIfSyncAuthError(error) {
 async function syncDefinitionsToApi(options) {
 	const { camoxApp, projectSlug, apiUrl, syncSecret, environmentName, logger } = options;
 	const client = createServerApiClient(apiUrl, environmentName);
-	const definitions = camoxApp.getBlocks().map((block) => ({
+	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.layoutOnly || typesUsedInLayouts.has(block.id)).map((block) => ({
 		blockId: block.id,
 		title: block.title,
 		description: block.description,
@@ -37,10 +41,10 @@ async function syncDefinitionsToApi(options) {
 	}
 	if (environmentCreated && environmentName) logger.info(`[camox] Created environment "${environmentName}" (forked from production)`, { timestamp: true });
 	logger.info(`[camox] Synced ${definitions.length} block definition${definitions.length === 1 ? "" : "s"}`, { timestamp: true });
-	const layoutDefinitions = camoxApp.getSerializableLayoutDefinitions();
 	if (layoutDefinitions.length > 0) {
+		let layoutSyncResults;
 		try {
-			await client.layouts.sync({
+			layoutSyncResults = await client.layouts.sync({
 				projectSlug,
 				syncSecret,
 				layouts: layoutDefinitions
@@ -50,6 +54,26 @@ async function syncDefinitionsToApi(options) {
 			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 });
+		}
 	}
 	const initialPage = camoxApp.getInitialPageBundles();
 	if (initialPage) try {
@@ -99,6 +123,8 @@ async function syncDefinitions(server, options) {
 	const blocksDir = path.resolve(server.config.root, "src/camox/blocks");
 	const client = createServerApiClient(apiUrl, environmentName);
 	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 });
@@ -123,6 +149,7 @@ async function syncDefinitions(server, options) {
 			return;
 		}
 		const block = blockModule.block;
+		if (block.layoutOnly) return;
 		let result;
 		try {
 			result = await client.blockDefinitions.upsert({
@@ -141,7 +168,7 @@ async function syncDefinitions(server, options) {
 			throwIfSyncAuthError(error);
 			throw error;
 		}
-		server.config.logger.info(`[camox] ${result.action === "created" ? "Created" : "Updated"} block "${block.id}"`, { timestamp: true });
+		server.config.logger.info(`[camox] ${result.action === "created" ? "Created" : "Updated"} block definition "${block.id}"`, { timestamp: true });
 	}
 	async function deleteBlock(filePath) {
 		const blockId = getBlockIdFromFilePath(filePath);
@@ -156,7 +183,7 @@ async function syncDefinitions(server, options) {
 			throwIfSyncAuthError(error);
 			throw error;
 		}
-		if (result.deleted) server.config.logger.info(`[camox] Deleted block "${blockId}"`, { timestamp: true });
+		if (result.deleted) server.config.logger.info(`[camox] Deleted block definition "${blockId}"`, { timestamp: true });
 	}
 	try {
 		await performInitialSync();
@@ -202,6 +229,9 @@ async function syncDefinitions(server, options) {
 	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;
@@ -217,6 +247,7 @@ async function syncDefinitions(server, options) {
 	server.watcher.on("add", handleBlockFileUpsert);
 	server.watcher.on("add", handleLayoutFileChange);
 	server.watcher.on("unlink", handleBlockFileDelete);
+	server.watcher.on("unlink", handleLayoutFileChange);
 }
 
 //#endregion

package/dist/lib/auth.js

@@ -46,10 +46,12 @@ function getCookie(cookie) {
 	try {
 		parsed = JSON.parse(cookie);
 	} catch {}
-	return Object.entries(parsed).reduce((acc, [key, value]) => {
-		if (value.expires && new Date(value.expires) < /* @__PURE__ */ new Date()) return acc;
-		return `${acc}; ${key}=${value.value}`;
-	}, "");
+	const parts = [];
+	for (const [key, value] of Object.entries(parsed)) {
+		if (value.expires && new Date(value.expires) < /* @__PURE__ */ new Date()) continue;
+		parts.push(`${key}=${value.value}`);
+	}
+	return parts.join("; ");
 }
 /**
 * Read the cross-domain auth cookie from localStorage and return it as a

package/dist/lib/use-project-room.js

@@ -20,10 +20,10 @@ function useProjectRoom(apiUrl, projectId) {
 	if ($[1] !== apiUrl) {
 		let t2;
 		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-			t2 = /^https?:\/\//;
+			t2 = /\/+$/;
 			$[3] = t2;
 		} else t2 = $[3];
-		t1 = apiUrl.replace(t2, "");
+		t1 = apiUrl.replace(/^https?:\/\//, "").replace(t2, "");
 		$[1] = apiUrl;
 		$[2] = t1;
 	} else t1 = $[2];
@@ -39,18 +39,30 @@ function useProjectRoom(apiUrl, projectId) {
 			prefix: "parties",
 			query: _temp,
 			enabled: t3,
-			onMessage(event) {
+			onOpen() {
+				if (process.env.NODE_ENV !== "production") console.debug("[useProjectRoom] WebSocket connected");
+			},
+			onClose(event) {
+				console.warn(`[useProjectRoom] WebSocket closed (code=${event.code}, reason=${event.reason || "none"})`);
+			},
+			onError(event_0) {
+				console.error("[useProjectRoom] WebSocket error:", event_0);
+			},
+			onMessage(event_1) {
+				let data;
 				try {
-					const data = JSON.parse(event.data);
-					if (data.type !== "invalidate") return;
-					pendingRef.current.push(...data.targets);
-					clearTimeout(timerRef.current);
-					timerRef.current = setTimeout(() => {
-						const targets = pendingRef.current;
-						pendingRef.current = [];
-						for (const queryKey of targets) queryClient.invalidateQueries({ queryKey });
-					}, DEBOUNCE_MS);
-				} catch {}
+					data = JSON.parse(event_1.data);
+				} catch {
+					return;
+				}
+				if (data.type !== "invalidate") return;
+				pendingRef.current.push(...data.targets);
+				clearTimeout(timerRef.current);
+				timerRef.current = setTimeout(() => {
+					const targets = pendingRef.current;
+					pendingRef.current = [];
+					for (const queryKey of targets) queryClient.invalidateQueries({ queryKey });
+				}, DEBOUNCE_MS);
 			}
 		};
 		$[4] = host;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "camox",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "bin": {
     "camox": "./bin/camox.mjs"
   },
@@ -97,9 +97,9 @@
     "react-dom": "^19.2.5",
     "react-og-preview": "^0.2.0",
     "shiki": "^4.0.2",
-    "@camox/api-contract": "0.9.0",
-    "@camox/ui": "0.9.0",
-    "@camox/cli": "0.9.0"
+    "@camox/api-contract": "0.9.1",
+    "@camox/ui": "0.9.1",
+    "@camox/cli": "0.9.1"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",