camox 0.40.0 → 0.41.1

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

@@ -2,6 +2,7 @@ import { Link as Link$1, useLocation, useNavigate } from "../../navigation/navig
 import { actionsStore } from "../../provider/actionsStore.js";
 import { useProjectSlug } from "../../../lib/auth.js";
 import { pageQueries, projectQueries } from "../../../lib/queries.js";
+import { PlatformLabel } from "../../../components/PlatformLabel.js";
 import { cn } from "../../../lib/utils.js";
 import { STUDIO_CONTENT_PATH } from "../routes.js";
 import { studioStore } from "../studioStore.js";
@@ -34,121 +35,126 @@ const links = [{
 		"CMS"
 	]
 }];
-const Navbar = () => {
-	const $ = c(19);
-	if ($[0] !== "4fd5828728ac76dc7c63a1b38dbea3991a6750be46540e90d91c5dccb46797e2") {
-		for (let $i = 0; $i < 19; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "4fd5828728ac76dc7c63a1b38dbea3991a6750be46540e90d91c5dccb46797e2";
+const Navbar = (t0) => {
+	const $ = c(20);
+	if ($[0] !== "4608f306773df1a594409c84a68bc5a0c72c93c4fbda9136da94d4900e84546d") {
+		for (let $i = 0; $i < 20; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "4608f306773df1a594409c84a68bc5a0c72c93c4fbda9136da94d4900e84546d";
 	}
+	const { isPreview: t1 } = t0;
+	const isPreview = t1 === void 0 ? false : t1;
 	const projectSlug = useProjectSlug();
-	let t0;
+	let t2;
 	if ($[1] !== projectSlug) {
-		t0 = projectQueries.getBySlug(projectSlug);
+		t2 = projectQueries.getBySlug(projectSlug);
 		$[1] = projectSlug;
-		$[2] = t0;
-	} else t0 = $[2];
-	const { data: project } = useQuery(t0);
-	let t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	const { data: project } = useQuery(t2);
+	let t3;
 	if ($[3] !== project?.id) {
-		t1 = pageQueries.list(project?.id ?? 0);
+		t3 = pageQueries.list(project?.id ?? 0);
 		$[3] = project?.id;
-		$[4] = t1;
-	} else t1 = $[4];
-	const t2 = !!project;
-	let t3;
-	if ($[5] !== t1 || $[6] !== t2) {
-		t3 = {
-			...t1,
-			enabled: t2
+		$[4] = t3;
+	} else t3 = $[4];
+	const t4 = !!project;
+	let t5;
+	if ($[5] !== t3 || $[6] !== t4) {
+		t5 = {
+			...t3,
+			enabled: t4
 		};
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	const { data: pages } = useQuery(t3);
-	const isMac = navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
+		$[5] = t3;
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	const { data: pages } = useQuery(t5);
 	const { pathname } = useLocation();
-	let t4;
+	let t6;
 	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsxs("div", {
+		t6 = /* @__PURE__ */ jsxs("div", {
 			className: "flew-row flex gap-1",
 			children: [/* @__PURE__ */ jsx(ProjectMenu, {}), /* @__PURE__ */ jsx(EnvironmentMenu, {})]
 		});
-		$[8] = t4;
-	} else t4 = $[8];
-	let t5;
-	if ($[9] !== pages || $[10] !== pathname) {
-		t5 = links.map((link, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link$1, {
+		$[8] = t6;
+	} else t6 = $[8];
+	let t7;
+	if ($[9] !== isPreview || $[10] !== pages || $[11] !== pathname) {
+		t7 = links.map((link, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link$1, {
 			to: link.to,
-			className: cn("flex gap-2 items-center rounded-md px-4 py-2 text-sm font-medium", "hover:bg-accent hover:text-accent-foreground outline-none transition-[color,box-shadow] focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-1", pages?.some((page) => page.fullPath === pathname) && index === 0 ? "bg-accent hover:bg-accent text-accent-foreground" : "text-muted-foreground"),
+			className: cn("flex gap-2 items-center rounded-md px-4 py-2 text-sm font-medium", "hover:bg-accent hover:text-accent-foreground outline-none transition-[color,box-shadow] focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-1", (isPreview || pages?.some((page) => page.fullPath === pathname)) && index === 0 ? "bg-accent hover:bg-accent text-accent-foreground" : "text-muted-foreground"),
 			activeProps: { className: "bg-accent hover:bg-accent text-accent-foreground!" },
 			children: link.children
 		}) }, link.to));
-		$[9] = pages;
-		$[10] = pathname;
-		$[11] = t5;
-	} else t5 = $[11];
-	let t6;
-	if ($[12] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("div", {
+		$[9] = isPreview;
+		$[10] = pages;
+		$[11] = pathname;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-row gap-2",
-			children: [t4, /* @__PURE__ */ jsx("ul", {
+			children: [t6, /* @__PURE__ */ jsx("ul", {
 				className: "flex items-center gap-1",
-				children: t5
+				children: t7
 			})]
 		});
-		$[12] = t5;
-		$[13] = t6;
-	} else t6 = $[13];
-	let t7;
-	let t8;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground size-4" });
-		t8 = /* @__PURE__ */ jsx("span", {
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t10;
+	let t9;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground size-4" });
+		t10 = /* @__PURE__ */ jsx("span", {
 			className: "text-muted-foreground",
 			children: "Quick find"
 		});
-		$[14] = t7;
-		$[15] = t8;
+		$[15] = t10;
+		$[16] = t9;
 	} else {
-		t7 = $[14];
-		t8 = $[15];
+		t10 = $[15];
+		t9 = $[16];
 	}
-	let t9;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsxs("div", {
+	let t11;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [/* @__PURE__ */ jsxs(Button, {
 				variant: "outline",
 				onClick: _temp,
 				children: [
-					t7,
-					t8,
-					/* @__PURE__ */ jsxs(Kbd, {
+					t9,
+					t10,
+					/* @__PURE__ */ jsx(Kbd, {
 						className: "ml-4",
-						children: [isMac ? "⌘" : "Ctrl", " K"]
+						children: /* @__PURE__ */ jsx(PlatformLabel, {
+							mac: "⌘ K",
+							other: "Ctrl K"
+						})
 					})
 				]
 			}), /* @__PURE__ */ jsx(UserButton, {})]
 		});
-		$[16] = t9;
-	} else t9 = $[16];
-	let t10;
-	if ($[17] !== t6) {
-		t10 = /* @__PURE__ */ jsxs("nav", {
+		$[17] = t11;
+	} else t11 = $[17];
+	let t12;
+	if ($[18] !== t8) {
+		t12 = /* @__PURE__ */ jsxs("nav", {
 			className: "bg-background relative flex items-center justify-between gap-4 border-b-2 px-2 py-2",
-			children: [t6, t9]
+			children: [t8, t11]
 		});
-		$[17] = t6;
-		$[18] = t10;
-	} else t10 = $[18];
-	return t10;
+		$[18] = t8;
+		$[19] = t12;
+	} else t12 = $[19];
+	return t12;
 };
 function useNavbarActions() {
 	const $ = c(4);
-	if ($[0] !== "4fd5828728ac76dc7c63a1b38dbea3991a6750be46540e90d91c5dccb46797e2") {
+	if ($[0] !== "4608f306773df1a594409c84a68bc5a0c72c93c4fbda9136da94d4900e84546d") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "4fd5828728ac76dc7c63a1b38dbea3991a6750be46540e90d91c5dccb46797e2";
+		$[0] = "4608f306773df1a594409c84a68bc5a0c72c93c4fbda9136da94d4900e84546d";
 	}
 	const navigate = useNavigate();
 	let t0;

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

@@ -1,7 +1,7 @@
 import { useLocation, useNavigate } from "../../navigation/navigation.js";
 import { useAuthContext, useAuthState } from "../../../lib/auth.js";
 import { STUDIO_BASE_PATH } from "../routes.js";
-import { previewStore } from "../../preview/previewStore.js";
+import { previewStore, selectIsEditMode } from "../../preview/previewStore.js";
 import { useApplyTheme } from "../useTheme.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -14,9 +14,9 @@ import { Avatar, AvatarFallback, AvatarImage } from "@camox/ui/avatar";
 //#region src/features/studio/components/UserButton.tsx
 const UserButton = () => {
 	const $ = c(5);
-	if ($[0] !== "a09d40e74ed3a5b0583d8899c9b1d3c569af18304db9c6f598775bf2c16e2608") {
+	if ($[0] !== "b876c985f56cb759905567177978ca8597789d0818f006e69fd4bcfb86c58f94") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "a09d40e74ed3a5b0583d8899c9b1d3c569af18304db9c6f598775bf2c16e2608";
+		$[0] = "b876c985f56cb759905567177978ca8597789d0818f006e69fd4bcfb86c58f94";
 	}
 	const { isAuthenticated, isLoading } = useAuthState();
 	const { theme, setTheme } = useApplyTheme();
@@ -48,7 +48,7 @@ function AuthenticatedUserButton({ theme, setTheme }) {
 	const authCtx = useAuthContext();
 	const { data: session } = authCtx.authClient.useSession();
 	const authenticationUrl = authCtx.authenticationUrl;
-	const isEditMode = useSelector(previewStore, (state) => state.context.isEditMode);
+	const isEditMode = useSelector(previewStore, selectIsEditMode);
 	const { pathname } = useLocation();
 	const navigate = useNavigate();
 	const isPreviewPage = pathname !== STUDIO_BASE_PATH && !pathname.startsWith(`${STUDIO_BASE_PATH}/`);

package/dist/features/studio/studioTheme.js

@@ -0,0 +1,25 @@
+//#region src/features/studio/studioTheme.ts
+const STUDIO_THEME_STORAGE_KEY = "camox:studio:theme";
+function readStudioTheme() {
+	try {
+		const value = localStorage.getItem("camox:studio:theme") ?? localStorage.getItem("theme");
+		if (value === "light" || value === "dark") return value;
+	} catch {}
+	return "system";
+}
+function bootstrapStudioTheme(preference) {
+	let theme = preference ?? "system";
+	if (!preference) try {
+		theme = localStorage.getItem("camox:studio:theme") ?? localStorage.getItem("theme") ?? "system";
+	} catch {}
+	const resolved = theme === "dark" || theme !== "light" && matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	const root = document.documentElement;
+	root.classList.remove("light", "dark");
+	root.classList.add(resolved);
+	root.dataset.camoxStudioTheme = resolved;
+	root.style.colorScheme = resolved;
+}
+const STUDIO_THEME_SCRIPT = `(${bootstrapStudioTheme.toString()})();`;
+
+//#endregion
+export { STUDIO_THEME_SCRIPT, STUDIO_THEME_STORAGE_KEY, bootstrapStudioTheme, readStudioTheme };

package/dist/features/studio/useTheme.js

@@ -1,127 +1,112 @@
 import { actionsStore } from "../provider/actionsStore.js";
+import { STUDIO_THEME_STORAGE_KEY, bootstrapStudioTheme, readStudioTheme } from "./studioTheme.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 
 //#region src/features/studio/useTheme.ts
 let activeThemeOwnerCount = 0;
+const listeners = /* @__PURE__ */ new Set();
+let preference;
 function readStoredTheme() {
 	if (typeof window === "undefined") return "system";
-	return localStorage.getItem("theme") || "system";
+	return preference ?? readStudioTheme();
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+function notify() {
+	listeners.forEach((listener) => listener());
+}
+function applyTheme(theme = readStoredTheme()) {
+	bootstrapStudioTheme(theme);
+	const resolved = document.documentElement.dataset.camoxStudioTheme;
+	document.body.classList.remove("light", "dark");
+	document.body.classList.add("camox-studio-theme", resolved);
+	document.body.dataset.camoxStudioTheme = resolved;
+}
+function setTheme(theme) {
+	preference = theme;
+	try {
+		localStorage.setItem(STUDIO_THEME_STORAGE_KEY, theme);
+	} catch {}
+	applyTheme(theme);
+	notify();
 }
-/**
-* Owns the studio theme: writes the active class onto `<html>` and persists
-* changes to localStorage. Should only be mounted from the studio chrome —
-* never from contexts that share `<html>` with the user's site.
-*/
 function useApplyTheme() {
-	const $ = c(10);
-	if ($[0] !== "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f") {
-		for (let $i = 0; $i < 10; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f";
+	const $ = c(5);
+	if ($[0] !== "5860ae8e48f7dc27e488236def482df22f144de61ae2d86bfde82aeeea4f9874") {
+		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "5860ae8e48f7dc27e488236def482df22f144de61ae2d86bfde82aeeea4f9874";
 	}
-	const [theme, setTheme] = React.useState(readStoredTheme);
-	const [resolvedTheme, setResolvedTheme] = React.useState("light");
+	const theme = React.useSyncExternalStore(subscribe, readStoredTheme, _temp2);
+	const resolvedTheme = React.useSyncExternalStore(subscribe, _temp3, _temp4);
 	let t0;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[1] = t0;
+	} else t0 = $[1];
+	React.useEffect(_temp7, t0);
 	let t1;
-	if ($[1] !== theme) {
-		t0 = () => {
-			const root = window.document.documentElement;
-			const body = window.document.body;
-			activeThemeOwnerCount = activeThemeOwnerCount + 1;
-			const applyTheme = (themeToApply) => {
-				setResolvedTheme(themeToApply);
-				root.classList.remove("light", "dark");
-				root.classList.add(themeToApply);
-				root.dataset.camoxStudioTheme = themeToApply;
-				body.classList.remove("light", "dark");
-				body.classList.add("camox-studio-theme", themeToApply);
-				body.dataset.camoxStudioTheme = themeToApply;
-			};
-			const resolveTheme = () => {
-				if (theme !== "system") return theme;
-				return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-			};
-			applyTheme(resolveTheme());
-			const observer = new MutationObserver(() => {
-				const themeToApply_0 = resolveTheme();
-				if (root.classList.contains(themeToApply_0) && body.classList.contains(themeToApply_0)) return;
-				applyTheme(themeToApply_0);
-			});
-			observer.observe(root, {
-				attributes: true,
-				attributeFilter: ["class"]
-			});
-			observer.observe(body, {
-				attributes: true,
-				attributeFilter: ["class"]
-			});
-			if (theme === "system") {
-				const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-				const updateSystemTheme = () => applyTheme(resolveTheme());
-				mediaQuery.addEventListener("change", updateSystemTheme);
-				return () => {
-					mediaQuery.removeEventListener("change", updateSystemTheme);
-					observer.disconnect();
-					activeThemeOwnerCount = activeThemeOwnerCount - 1;
-					if (activeThemeOwnerCount > 0) return;
-					root.classList.remove("light", "dark");
-					delete root.dataset.camoxStudioTheme;
-					body.classList.remove("camox-studio-theme", "light", "dark");
-					delete body.dataset.camoxStudioTheme;
-				};
-			}
-			return () => {
-				observer.disconnect();
-				activeThemeOwnerCount = activeThemeOwnerCount - 1;
-				if (activeThemeOwnerCount > 0) return;
-				root.classList.remove("light", "dark");
-				delete root.dataset.camoxStudioTheme;
-				body.classList.remove("camox-studio-theme", "light", "dark");
-				delete body.dataset.camoxStudioTheme;
-			};
-		};
-		t1 = [theme];
-		$[1] = theme;
-		$[2] = t0;
-		$[3] = t1;
-	} else {
-		t0 = $[2];
-		t1 = $[3];
-	}
-	React.useEffect(t0, t1);
-	let t2;
-	let t3;
-	if ($[4] !== theme) {
-		t2 = () => {
-			localStorage.setItem("theme", theme);
-		};
-		t3 = [theme];
-		$[4] = theme;
-		$[5] = t2;
-		$[6] = t3;
-	} else {
-		t2 = $[5];
-		t3 = $[6];
-	}
-	React.useEffect(t2, t3);
-	let t4;
-	if ($[7] !== resolvedTheme || $[8] !== theme) {
-		t4 = {
+	if ($[2] !== resolvedTheme || $[3] !== theme) {
+		t1 = {
 			theme,
 			resolvedTheme,
 			setTheme
 		};
-		$[7] = resolvedTheme;
-		$[8] = theme;
-		$[9] = t4;
-	} else t4 = $[9];
-	return t4;
+		$[2] = resolvedTheme;
+		$[3] = theme;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+function _temp7() {
+	const root = window.document.documentElement;
+	const body = window.document.body;
+	activeThemeOwnerCount = activeThemeOwnerCount + 1;
+	setTheme(readStoredTheme());
+	const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+	const updateSystemTheme = _temp5;
+	const onStorage = _temp6;
+	mediaQuery.addEventListener("change", updateSystemTheme);
+	window.addEventListener("storage", onStorage);
+	return () => {
+		mediaQuery.removeEventListener("change", updateSystemTheme);
+		window.removeEventListener("storage", onStorage);
+		activeThemeOwnerCount = activeThemeOwnerCount - 1;
+		if (activeThemeOwnerCount > 0) return;
+		root.classList.remove("light", "dark");
+		root.style.removeProperty("color-scheme");
+		delete root.dataset.camoxStudioTheme;
+		body.classList.remove("camox-studio-theme", "light", "dark");
+		delete body.dataset.camoxStudioTheme;
+	};
+}
+function _temp6(event) {
+	if (event.key !== "camox:studio:theme" && event.key !== null) return;
+	preference = void 0;
+	applyTheme();
+	notify();
+}
+function _temp5() {
+	if (readStoredTheme() === "system") setTheme("system");
+}
+function _temp4() {
+	return "light";
+}
+function _temp3() {
+	return document.documentElement.dataset.camoxStudioTheme === "dark" ? "dark" : "light";
+}
+function _temp2() {
+	return "system";
 }
 function useThemeActions() {
 	const $ = c(5);
-	if ($[0] !== "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f") {
+	if ($[0] !== "5860ae8e48f7dc27e488236def482df22f144de61ae2d86bfde82aeeea4f9874") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f";
+		$[0] = "5860ae8e48f7dc27e488236def482df22f144de61ae2d86bfde82aeeea4f9874";
 	}
 	const { theme, setTheme } = useApplyTheme();
 	let t0;
@@ -138,9 +123,9 @@ function useThemeActions() {
 						"Color mode"
 					],
 					groupLabel: "Studio",
-					checkIfAvailable: _temp,
+					checkIfAvailable: _temp8,
 					hasChildren: true,
-					execute: _temp2
+					execute: _temp9
 				},
 				{
 					id: "switch-to-light-theme",
@@ -177,7 +162,7 @@ function useThemeActions() {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp3)
+					ids: actions.map(_temp0)
 				});
 			};
 		};
@@ -192,11 +177,11 @@ function useThemeActions() {
 	}
 	React.useEffect(t0, t1);
 }
-function _temp3(a) {
+function _temp0(a) {
 	return a.id;
 }
-function _temp2() {}
-function _temp() {
+function _temp9() {}
+function _temp8() {
 	return true;
 }
 

package/dist/features/vite/appGeneration.js

@@ -1,4 +1,5 @@
 import { writeIfChanged } from "./utils.js";
+import { generateLayoutFiles } from "./layoutGeneration.js";
 import { readFileSync, writeFileSync } from "node:fs";
 import { relative, resolve } from "node:path";
 
@@ -28,16 +29,16 @@ const blocks = [...Object.values(blockModules), ...Object.values(legacyBlockModu
 );
 
 // Auto-import all layouts from the first-class layouts directory
-const layoutModules = import.meta.glob<{ layout: Layout }>(
+const layoutModules = import.meta.glob<{ layout?: Layout; Layout?: Layout }>(
   '../layouts/*.{ts,tsx}',
   { eager: true },
 );
-const legacyLayoutModules = import.meta.glob<{ layout: Layout }>(
+const legacyLayoutModules = import.meta.glob<{ layout?: Layout; Layout?: Layout }>(
   './layouts/*.{ts,tsx}',
   { eager: true },
 );
 const layouts = [...Object.values(layoutModules), ...Object.values(legacyLayoutModules)].map(
-  (mod) => mod.layout,
+  (mod) => (mod.Layout ?? mod.layout)!,
 );
 
 export const camoxApp = createApp({
@@ -53,9 +54,17 @@ function getAppFileEntries(appRoot) {
 	}];
 }
 function generateAppFile(appRoot) {
+	generateLayoutFiles(appRoot);
 	for (const entry of getAppFileEntries(appRoot)) writeIfChanged(entry.path, entry.content);
 }
 function watchAppFile(server, appRoot) {
+	for (const event of [
+		"add",
+		"change",
+		"unlink"
+	]) server.watcher.on(event, (path) => {
+		if (path.startsWith(resolve(appRoot, "src/layouts") + "/")) generateLayoutFiles(appRoot);
+	});
 	const entries = getAppFileEntries(appRoot);
 	const expectedByPath = new Map(entries.map((e) => [e.path, e.content]));
 	server.watcher.on("change", (changedPath) => {

package/dist/features/vite/definitionsSync.js

@@ -32,7 +32,8 @@ async function syncDefinitionsToApi(options) {
 		settingsSchema: block._internal.settingsSchema,
 		defaultContent: block._internal.getInitialContent(),
 		defaultSettings: block._internal.getInitialSettings(),
-		layoutOnly: block._internal.layoutOnly || void 0
+		layoutOnly: block._internal.layoutOnly || void 0,
+		synced: block._internal.synced
 	}));
 	let environmentCreated = false;
 	let deletedDefinitionTypes = [];
@@ -186,7 +187,8 @@ async function syncDefinitions(server, options) {
 				settingsSchema: block._internal.settingsSchema,
 				defaultContent: block._internal.getInitialContent(),
 				defaultSettings: block._internal.getInitialSettings(),
-				layoutOnly: block._internal.layoutOnly || void 0
+				layoutOnly: block._internal.layoutOnly || void 0,
+				synced: block._internal.synced
 			});
 		} catch (error) {
 			throwIfSyncAuthError(error);

package/dist/features/vite/layoutGeneration.js

@@ -0,0 +1,38 @@
+import { writeIfChanged } from "./utils.js";
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { basename, resolve } from "node:path";
+
+//#region src/features/vite/layoutGeneration.ts
+/** Keep file identities stable across moves without executing application modules. */
+function generateLayoutFiles(appRoot) {
+	const directory = resolve(appRoot, "src/layouts");
+	if (!existsSync(directory)) return;
+	const declarations = [];
+	for (const file of readdirSync(directory).sort()) {
+		if (!/\.(ts|tsx)$/.test(file) || file.endsWith(".d.ts")) continue;
+		const id = basename(file).replace(/\.(ts|tsx)$/, "");
+		const path = resolve(directory, file);
+		let source = readFileSync(path, "utf8");
+		if (!source.trim()) source = `import { createLayout } from "camox/createLayout";
+
+export const Layout = createLayout(${JSON.stringify(id)})({
+  kind: "curated",
+  title: ${JSON.stringify(id)},
+  description: "",
+  blocks: { before: [], after: [] },
+  buildMetaTitle: ({ pageMetaTitle }) => pageMetaTitle,
+  component: ({ children }) => <main><Layout.BeforeBlocks />{children}<Layout.AfterBlocks /></main>,
+});
+`;
+		source = source.replace(/(createLayout\(\s*)["'][^"']+["'](\s*\)\s*\()/g, `$1${JSON.stringify(id)}$2`);
+		writeIfChanged(path, source);
+		const segments = id.split(".");
+		const route = "/" + segments.map((segment) => segment.startsWith("$") ? `:${segment.slice(1)}` : segment).join("/");
+		const params = segments.filter((segment) => segment.startsWith("$")).map((segment) => `${JSON.stringify(segment.slice(1))}: string`).join("; ");
+		declarations.push(`${JSON.stringify(id)}: { route: ${JSON.stringify(route)}; params: { ${params} } };`);
+	}
+	writeIfChanged(resolve(appRoot, "src/camox/layouts.gen.d.ts"), `// Generated by Camox.\nimport "camox/createLayout";\ndeclare module "camox/createLayout" {\n  interface LayoutFileRoutes {\n    ${declarations.join("\n    ")}\n  }\n}\n`);
+}
+
+//#endregion
+export { generateLayoutFiles };

package/dist/features/vite/runtimeDev.js

@@ -79,7 +79,7 @@ const blocks = [...Object.values(rootBlockModules), ...Object.values(legacyBlock
   .map((mod) => mod.block)
   .filter(Boolean);
 const layouts = [...Object.values(rootLayoutModules), ...Object.values(legacyLayoutModules)]
-  .map((mod) => mod.layout)
+  .map((mod) => mod.Layout ?? mod.layout)
   .filter(Boolean);
 
 export const camoxApp = createApp({ blocks, layouts });
@@ -146,6 +146,7 @@ function generateVirtualCamoxServer(runtimeBasePath) {
 import { camoxApp } from "virtual:camox/app";
 import { camoxDocument } from "virtual:camox/document";
 import appStylesheetUrl from "virtual:camox/app-stylesheet-url";
+import studioStylesheetUrl from "virtual:camox-studio-css";
 import pageClientEntryUrl from "virtual:camox/page-client-url";
 import studioClientEntryUrl from "virtual:camox/studio-client-url";
 import { renderPage } from "virtual:camox/page-server";
@@ -165,6 +166,7 @@ export async function handleCamoxRequest(request) {
     renderStudio,
     runtimeBasePath: ${JSON.stringify(runtimeBasePath)},
     stylesheetUrl: appStylesheetUrl,
+    studioStylesheetUrl,
   });
 }
 `;