camox 0.33.1 → 0.34.0

package/dist/features/runtime/runtime.js

@@ -0,0 +1,44 @@
+import "../routes/pageRuntime.js";
+import { QueryClient } from "@tanstack/react-query";
+import "@unhead/react/server";
+
+//#region src/features/runtime/runtime.ts
+function createPageHeadInput(head) {
+	const meta = head.meta ?? [];
+	const links = head.links ?? [];
+	const title = meta.find((entry) => entry.title)?.title;
+	const pageMeta = [];
+	for (const entry of meta) {
+		if (entry.title) continue;
+		if (entry.name && entry.content) {
+			pageMeta.push({
+				name: entry.name,
+				content: entry.content,
+				"data-camox-page-head": "true"
+			});
+			continue;
+		}
+		if (entry.property && entry.content) pageMeta.push({
+			property: entry.property,
+			content: entry.content,
+			"data-camox-page-head": "true"
+		});
+	}
+	const pageLinks = [];
+	for (const entry of links) {
+		if (entry.rel !== "icon" || !entry.href) continue;
+		pageLinks.push({
+			rel: "icon",
+			href: entry.href,
+			"data-camox-page-head": "true"
+		});
+	}
+	return {
+		...title && { title },
+		meta: pageMeta,
+		link: pageLinks
+	};
+}
+
+//#endregion
+export { createPageHeadInput };

package/dist/features/runtime/studioApp.d.ts

@@ -0,0 +1,15 @@
+import { QueryClient } from "@tanstack/react-query";
+//#region src/features/runtime/studioApp.d.ts
+interface StudioRenderInput {
+  apiUrl: string;
+  authenticationUrl: string;
+  dehydratedState: unknown;
+  environmentName?: string;
+  href: string;
+  pathname: string;
+  projectSlug: string;
+  routeKind: "studio" | "studio-content" | "studio-nested";
+  runtimeBasePath: string;
+}
+//#endregion
+export { StudioRenderInput };

package/dist/features/runtime/studioApp.js

@@ -0,0 +1,117 @@
+import { STUDIO_CONTENT_PATH } from "../studio/routes.js";
+import { CamoxContent } from "../content/CamoxContent.js";
+import { CamoxProvider } from "../provider/CamoxProvider.js";
+import { CamoxStudio } from "../studio/CamoxStudio.js";
+import { StudioNavigationProvider } from "./studioNavigation.js";
+import { c } from "react/compiler-runtime";
+import { HydrationBoundary, QueryClientProvider } from "@tanstack/react-query";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/runtime/studioApp.tsx
+function StudioRouteContent(t0) {
+	const $ = c(4);
+	if ($[0] !== "4c7f5ba34e144c65d886d3b5a39ff5adc9765123d3c37bd6491f55534f919b1f") {
+		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "4c7f5ba34e144c65d886d3b5a39ff5adc9765123d3c37bd6491f55534f919b1f";
+	}
+	const { input } = t0;
+	if (input.pathname === STUDIO_CONTENT_PATH) {
+		let t1;
+		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(CamoxContent, {});
+			$[1] = t1;
+		} else t1 = $[1];
+		return t1;
+	}
+	if (input.routeKind === "studio-nested") {
+		let t1;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground p-6 text-sm",
+				children: "Studio page not found"
+			});
+			$[2] = t1;
+		} else t1 = $[2];
+		return t1;
+	}
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground p-6 text-sm",
+			children: "Loading Studio…"
+		});
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+function StudioApp(t0) {
+	const $ = c(21);
+	if ($[0] !== "4c7f5ba34e144c65d886d3b5a39ff5adc9765123d3c37bd6491f55534f919b1f") {
+		for (let $i = 0; $i < 21; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "4c7f5ba34e144c65d886d3b5a39ff5adc9765123d3c37bd6491f55534f919b1f";
+	}
+	const { camoxApp, input, queryClient } = t0;
+	const t1 = input.dehydratedState;
+	let t2;
+	if ($[1] !== input) {
+		t2 = /* @__PURE__ */ jsx(CamoxStudio, { children: /* @__PURE__ */ jsx(StudioRouteContent, { input }) });
+		$[1] = input;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== camoxApp || $[4] !== input.apiUrl || $[5] !== input.authenticationUrl || $[6] !== input.environmentName || $[7] !== input.projectSlug || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(CamoxProvider, {
+			camoxApp,
+			authenticationUrl: input.authenticationUrl,
+			apiUrl: input.apiUrl,
+			projectSlug: input.projectSlug,
+			environmentName: input.environmentName,
+			children: t2
+		});
+		$[3] = camoxApp;
+		$[4] = input.apiUrl;
+		$[5] = input.authenticationUrl;
+		$[6] = input.environmentName;
+		$[7] = input.projectSlug;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== input.href || $[11] !== input.pathname || $[12] !== input.runtimeBasePath || $[13] !== t3) {
+		t4 = /* @__PURE__ */ jsx(StudioNavigationProvider, {
+			href: input.href,
+			pathname: input.pathname,
+			runtimeBasePath: input.runtimeBasePath,
+			children: t3
+		});
+		$[10] = input.href;
+		$[11] = input.pathname;
+		$[12] = input.runtimeBasePath;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== t1 || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsx(HydrationBoundary, {
+			state: t1,
+			children: t4
+		});
+		$[15] = t1;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== queryClient || $[19] !== t5) {
+		t6 = /* @__PURE__ */ jsx(QueryClientProvider, {
+			client: queryClient,
+			children: t5
+		});
+		$[18] = queryClient;
+		$[19] = t5;
+		$[20] = t6;
+	} else t6 = $[20];
+	return t6;
+}
+
+//#endregion
+export { StudioApp };

package/dist/features/runtime/studioNavigation.js

@@ -0,0 +1,115 @@
+import { NavigationProvider } from "../navigation/navigation.js";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/runtime/studioNavigation.tsx
+function normalizeRuntimeBasePath(basePath) {
+	if (!basePath || basePath === "/") return "";
+	return basePath.startsWith("/") ? basePath.replace(/\/+$/, "") : `/${basePath.replace(/\/+$/, "")}`;
+}
+function normalizeRuntimePathname(pathname, runtimeBasePath) {
+	const basePath = normalizeRuntimeBasePath(runtimeBasePath);
+	if (!basePath) return pathname || "/";
+	if (pathname === basePath) return "/";
+	if (pathname.startsWith(`${basePath}/`)) return pathname.slice(basePath.length) || "/";
+	return pathname || "/";
+}
+function toRuntimePathname(pathname, runtimeBasePath) {
+	const basePath = normalizeRuntimeBasePath(runtimeBasePath);
+	const normalizedPathname = pathname.startsWith("/") ? pathname : `/${pathname}`;
+	if (!basePath) return normalizedPathname;
+	if (normalizedPathname === "/") return `${basePath}/`;
+	if (normalizedPathname.startsWith(`${basePath}/`)) return normalizedPathname;
+	return `${basePath}${normalizedPathname}`;
+}
+function getStudioLocation(runtimeBasePath) {
+	return {
+		hash: window.location.hash,
+		href: window.location.href,
+		pathname: normalizeRuntimePathname(window.location.pathname, runtimeBasePath),
+		search: window.location.search
+	};
+}
+function getStudioTarget(to, runtimeBasePath) {
+	const url = new URL(to, window.location.href);
+	if (url.origin !== window.location.origin) return null;
+	url.pathname = toRuntimePathname(normalizeRuntimePathname(url.pathname, runtimeBasePath), runtimeBasePath);
+	return url;
+}
+function StudioNavigationProvider(t0) {
+	const $ = c(19);
+	if ($[0] !== "df5809d38cc8796db839fa5b8c8d05f562a3e4cba7d51a1fec989dc85db9136b") {
+		for (let $i = 0; $i < 19; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "df5809d38cc8796db839fa5b8c8d05f562a3e4cba7d51a1fec989dc85db9136b";
+	}
+	const { children, href, pathname, runtimeBasePath } = t0;
+	let t1;
+	if ($[1] !== runtimeBasePath) {
+		t1 = async (t2) => {
+			const { replace, to } = t2;
+			const target = getStudioTarget(to, runtimeBasePath);
+			if (!target) {
+				window.location.assign(to);
+				return;
+			}
+			if (replace) window.history.replaceState(null, "", target.href);
+			else window.history.pushState(null, "", target.href);
+			window.dispatchEvent(new Event("camox:navigation"));
+		};
+		$[1] = runtimeBasePath;
+		$[2] = t1;
+	} else t1 = $[2];
+	const navigate = t1;
+	let t2;
+	if ($[3] !== runtimeBasePath) {
+		t2 = () => getStudioLocation(runtimeBasePath);
+		$[3] = runtimeBasePath;
+		$[4] = t2;
+	} else t2 = $[4];
+	const getLocation = t2;
+	let t3;
+	if ($[5] !== href) {
+		t3 = new URL(href);
+		$[5] = href;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== href) {
+		t4 = new URL(href);
+		$[7] = href;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== href || $[10] !== pathname || $[11] !== t3.hash || $[12] !== t4.search) {
+		t5 = {
+			hash: t3.hash,
+			href,
+			pathname,
+			search: t4.search
+		};
+		$[9] = href;
+		$[10] = pathname;
+		$[11] = t3.hash;
+		$[12] = t4.search;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== children || $[15] !== getLocation || $[16] !== navigate || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsx(NavigationProvider, {
+			getLocation,
+			initialLocation: t5,
+			navigate,
+			children
+		});
+		$[14] = children;
+		$[15] = getLocation;
+		$[16] = navigate;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	return t6;
+}
+
+//#endregion
+export { StudioNavigationProvider };

package/dist/features/runtime/studioServer.d.ts

@@ -0,0 +1,9 @@
+import { CamoxApp } from "../../core/createApp.js";
+import { StudioRenderInput } from "./studioApp.js";
+
+//#region src/features/runtime/studioServer.d.ts
+declare function renderStudioWithApp(input: StudioRenderInput & {
+  camoxApp: CamoxApp;
+}): Promise<string>;
+//#endregion
+export { renderStudioWithApp };

package/dist/features/runtime/studioServer.js

@@ -0,0 +1,18 @@
+import { StudioApp } from "./studioApp.js";
+import { QueryClient, hydrate } from "@tanstack/react-query";
+import { jsx } from "react/jsx-runtime";
+import { renderToString } from "react-dom/server";
+
+//#region src/features/runtime/studioServer.tsx
+async function renderStudioWithApp(input) {
+	const queryClient = new QueryClient();
+	hydrate(queryClient, input.dehydratedState);
+	return renderToString(/* @__PURE__ */ jsx(StudioApp, {
+		camoxApp: input.camoxApp,
+		input,
+		queryClient
+	}));
+}
+
+//#endregion
+export { renderStudioWithApp };

package/dist/features/studio/CamoxStudio.js

@@ -1,18 +1,18 @@
+import { Navigate, useLocation } from "../navigation/navigation.js";
 import { useAuthState, useSignInRedirect } from "../../lib/auth.js";
 import { trackClientEvent } from "../../lib/telemetry-client.js";
 import { STUDIO_BASE_PATH } from "./routes.js";
 import { Navbar } from "./components/Navbar.js";
 import { c } from "react/compiler-runtime";
-import { Navigate, useLocation } from "@tanstack/react-router";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/features/studio/CamoxStudio.tsx
 const CamoxStudio = (t0) => {
 	const $ = c(14);
-	if ($[0] !== "92bbce1cfb7eb2b02b99b83bd538e0a81e979111219649246f8443dcf12fabf3") {
+	if ($[0] !== "869273f9f42924824ee2b9e5a0066bb2be142208aab9426269ff2984ede38347") {
 		for (let $i = 0; $i < 14; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "92bbce1cfb7eb2b02b99b83bd538e0a81e979111219649246f8443dcf12fabf3";
+		$[0] = "869273f9f42924824ee2b9e5a0066bb2be142208aab9426269ff2984ede38347";
 	}
 	const { children } = t0;
 	const { isAuthenticated, isLoading: isLoadingAuth } = useAuthState();

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

@@ -1,3 +1,4 @@
+import { Link as Link$1, useLocation, useNavigate } from "../../navigation/navigation.js";
 import { actionsStore } from "../../provider/actionsStore.js";
 import { useProjectSlug } from "../../../lib/auth.js";
 import { pageQueries, projectQueries } from "../../../lib/queries.js";
@@ -9,10 +10,9 @@ import { ProjectMenu } from "./ProjectMenu.js";
 import { UserButton } from "./UserButton.js";
 import { c } from "react/compiler-runtime";
 import { useQuery } from "@tanstack/react-query";
-import { Link, useLocation, useNavigate } from "@tanstack/react-router";
 import * as React from "react";
-import { Kbd } from "@camox/ui/kbd";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Kbd } from "@camox/ui/kbd";
 import { Button } from "@camox/ui/button";
 import { Database, Globe, SearchIcon } from "lucide-react";
 
@@ -36,9 +36,9 @@ const links = [{
 }];
 const Navbar = () => {
 	const $ = c(19);
-	if ($[0] !== "eea0214bb845c9520caf17dd35f6ab89aaf76f8bfb610142be4d515eefd136f8") {
+	if ($[0] !== "9b1adcbc6464388cc572701469e917a5652b82c7ccc4e66be74fb1820176f49e") {
 		for (let $i = 0; $i < 19; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "eea0214bb845c9520caf17dd35f6ab89aaf76f8bfb610142be4d515eefd136f8";
+		$[0] = "9b1adcbc6464388cc572701469e917a5652b82c7ccc4e66be74fb1820176f49e";
 	}
 	const projectSlug = useProjectSlug();
 	let t0;
@@ -78,7 +78,7 @@ const Navbar = () => {
 	} else t4 = $[8];
 	let t5;
 	if ($[9] !== pages || $[10] !== pathname) {
-		t5 = links.map((link, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
+		t5 = 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"),
 			activeProps: { className: "bg-accent hover:bg-accent text-accent-foreground!" },
@@ -146,9 +146,9 @@ const Navbar = () => {
 };
 function useNavbarActions() {
 	const $ = c(4);
-	if ($[0] !== "eea0214bb845c9520caf17dd35f6ab89aaf76f8bfb610142be4d515eefd136f8") {
+	if ($[0] !== "9b1adcbc6464388cc572701469e917a5652b82c7ccc4e66be74fb1820176f49e") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "eea0214bb845c9520caf17dd35f6ab89aaf76f8bfb610142be4d515eefd136f8";
+		$[0] = "9b1adcbc6464388cc572701469e917a5652b82c7ccc4e66be74fb1820176f49e";
 	}
 	const navigate = useNavigate();
 	let t0;

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

@@ -1,8 +1,8 @@
+import { Link as Link$1 } from "../../navigation/navigation.js";
 import { AuthContext } from "../../../lib/auth.js";
 import { projectQueries } from "../../../lib/queries.js";
 import { c } from "react/compiler-runtime";
 import { useQuery } from "@tanstack/react-query";
-import { Link } from "@tanstack/react-router";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
@@ -13,9 +13,9 @@ import { Skeleton } from "@camox/ui/skeleton";
 //#region src/features/studio/components/ProjectMenu.tsx
 const Favicon = (t0) => {
 	const $ = c(19);
-	if ($[0] !== "40bfae178d4420104da32b869316c5a2f7a1b383b1d8724af7281134abe451e3") {
+	if ($[0] !== "5b6284d7940526e6093811e0cb2663e0916c58abe0f07e36b7140e4a9eb93d0f") {
 		for (let $i = 0; $i < 19; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "40bfae178d4420104da32b869316c5a2f7a1b383b1d8724af7281134abe451e3";
+		$[0] = "5b6284d7940526e6093811e0cb2663e0916c58abe0f07e36b7140e4a9eb93d0f";
 	}
 	const { size: t1 } = t0;
 	const size = t1 === void 0 ? 16 : t1;
@@ -113,9 +113,9 @@ const Favicon = (t0) => {
 };
 const ProjectMenu = () => {
 	const $ = c(41);
-	if ($[0] !== "40bfae178d4420104da32b869316c5a2f7a1b383b1d8724af7281134abe451e3") {
+	if ($[0] !== "5b6284d7940526e6093811e0cb2663e0916c58abe0f07e36b7140e4a9eb93d0f") {
 		for (let $i = 0; $i < 41; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "40bfae178d4420104da32b869316c5a2f7a1b383b1d8724af7281134abe451e3";
+		$[0] = "5b6284d7940526e6093811e0cb2663e0916c58abe0f07e36b7140e4a9eb93d0f";
 	}
 	const authCtx = React.useContext(AuthContext);
 	let t0;
@@ -172,7 +172,7 @@ const ProjectMenu = () => {
 		$[9] = t3;
 		$[10] = t5;
 	} else t5 = $[10];
-	const t6 = authCtx ? `${authCtx.authenticationUrl}/dashboard/${project.organizationSlug}/${project.slug}/overview` : "#";
+	const t6 = authCtx ? `${authCtx.authenticationUrl}/${project.organizationSlug}/${project.slug}/overview` : "#";
 	let t7;
 	if ($[11] !== t6) {
 		t7 = /* @__PURE__ */ jsx("a", {
@@ -211,7 +211,7 @@ const ProjectMenu = () => {
 		$[17] = project.organizationSlug;
 		$[18] = t11;
 	} else t11 = $[18];
-	const t12 = authCtx ? `${authCtx.authenticationUrl}/dashboard/${project.organizationSlug}/team` : "#";
+	const t12 = authCtx ? `${authCtx.authenticationUrl}/${project.organizationSlug}/team` : "#";
 	let t13;
 	if ($[19] !== t12) {
 		t13 = /* @__PURE__ */ jsx("a", {
@@ -236,7 +236,7 @@ const ProjectMenu = () => {
 		$[22] = t13;
 		$[23] = t15;
 	} else t15 = $[23];
-	const t16 = authCtx ? `${authCtx.authenticationUrl}/dashboard/${project.organizationSlug}/settings` : "#";
+	const t16 = authCtx ? `${authCtx.authenticationUrl}/${project.organizationSlug}/settings` : "#";
 	let t17;
 	if ($[24] !== t16) {
 		t17 = /* @__PURE__ */ jsx("a", {
@@ -281,7 +281,7 @@ const ProjectMenu = () => {
 	let t22;
 	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
 		t22 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
-			render: /* @__PURE__ */ jsx(Link, {
+			render: /* @__PURE__ */ jsx(Link$1, {
 				to: "https://camox.ai",
 				target: "_blank"
 			}),

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

@@ -10,9 +10,9 @@ import { Avatar, AvatarFallback, AvatarImage } from "@camox/ui/avatar";
 //#region src/features/studio/components/UserButton.tsx
 const UserButton = () => {
 	const $ = c(5);
-	if ($[0] !== "97ed2ef8d3be381ca1619f023223f59b7d963b94f2c1afa998b161358220d4af") {
+	if ($[0] !== "12e7d1da288408dfd3abde7ab7d46542026c286c39994da53885abf3ac49204c") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "97ed2ef8d3be381ca1619f023223f59b7d963b94f2c1afa998b161358220d4af";
+		$[0] = "12e7d1da288408dfd3abde7ab7d46542026c286c39994da53885abf3ac49204c";
 	}
 	const { isAuthenticated, isLoading } = useAuthState();
 	const { theme, setTheme } = useApplyTheme();
@@ -82,7 +82,7 @@ function AuthenticatedUserButton({ theme, setTheme }) {
 			}) }),
 			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
 			/* @__PURE__ */ jsxs(DropdownMenuItem, {
-				onClick: () => window.open(`${authenticationUrl}/dashboard/profile`, "_blank"),
+				onClick: () => window.open(`${authenticationUrl}/profile`, "_blank"),
 				children: [/* @__PURE__ */ jsx(Settings, {}), /* @__PURE__ */ jsx("span", { children: "Manage account" })]
 			}),
 			/* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [

package/dist/features/vite/appGeneration.js

@@ -16,18 +16,29 @@ function generateCamoxApp() {
 import type { Block } from 'camox/createBlock';
 import type { Layout } from 'camox/createLayout';
 
-// Auto-import all blocks from the blocks directory
-const blockModules = import.meta.glob<{ block: Block }>('./blocks/*.{ts,tsx}', {
+// Auto-import all blocks from the first-class blocks directory
+const blockModules = import.meta.glob<{ block: Block }>('../blocks/*.{ts,tsx}', {
   eager: true,
 });
-const blocks = Object.values(blockModules).map((mod) => mod.block);
+const legacyBlockModules = import.meta.glob<{ block: Block }>('./blocks/*.{ts,tsx}', {
+  eager: true,
+});
+const blocks = [...Object.values(blockModules), ...Object.values(legacyBlockModules)].map(
+  (mod) => mod.block,
+);
 
-// Auto-import all layouts from the layouts directory
+// Auto-import all layouts from the first-class layouts directory
 const layoutModules = import.meta.glob<{ layout: Layout }>(
+  '../layouts/*.{ts,tsx}',
+  { eager: true },
+);
+const legacyLayoutModules = import.meta.glob<{ layout: Layout }>(
   './layouts/*.{ts,tsx}',
   { eager: true },
 );
-const layouts = Object.values(layoutModules).map((mod) => mod.layout);
+const layouts = [...Object.values(layoutModules), ...Object.values(legacyLayoutModules)].map(
+  (mod) => mod.layout,
+);
 
 export const camoxApp = createApp({
   blocks,

package/dist/features/vite/blockBoilerplate.js

@@ -44,7 +44,7 @@ export { ${camelName} as block };
 `;
 }
 function watchNewBlockFiles(server) {
-	const blocksDir = resolve(server.config.root, "src/camox/blocks");
+	const blocksDir = resolve(server.config.root, "src/blocks");
 	server.watcher.on("add", (filePath) => {
 		if (filePath.startsWith(blocksDir) && /\.tsx?$/.test(filePath) && !filePath.includes("index.")) try {
 			if (readFileSync(filePath, "utf-8").trim().length < MAX_EMPTY_BLOCK_CHARACTER_COUNT) {

package/dist/features/vite/definitionsSync.js

@@ -141,7 +141,8 @@ async function ssrLoadModule(server, modulePath) {
 }
 async function syncDefinitions(server, options) {
 	const { projectSlug, syncSecret, apiUrl, environmentName, autoCreate } = options;
-	const blocksDir = path.resolve(server.config.root, "src/camox/blocks");
+	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);
 	async function performInitialSync() {
 		const appModule = server.moduleGraph.getModuleById(CAMOX_APP_PATH);
@@ -213,12 +214,11 @@ async function syncDefinitions(server, options) {
 		server.config.logger.error(`[camox] Failed to sync block definitions: ${String(error)}`, { timestamp: true });
 	}
 	const debounceTimers = /* @__PURE__ */ new Map();
-	const layoutsDir = path.resolve(server.config.root, "src/camox/layouts");
 	function isBlockFile(filePath) {
-		return filePath.startsWith(blocksDir) && /\.tsx?$/.test(filePath);
+		return blocksDirs.some((blocksDir) => filePath.startsWith(blocksDir)) && /\.tsx?$/.test(filePath);
 	}
 	function isLayoutFile(filePath) {
-		return filePath.startsWith(layoutsDir) && /\.tsx?$/.test(filePath);
+		return layoutsDirs.some((layoutsDir) => filePath.startsWith(layoutsDir)) && /\.tsx?$/.test(filePath);
 	}
 	const handleBlockFileUpsert = (filePath) => {
 		if (!isBlockFile(filePath)) return;