camox 0.32.0 → 0.33.0

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

@@ -1,17 +1,17 @@
-import { useIsPreviewSheetOpen } from "../../preview/components/PreviewSideSheet.js";
 import { actionsStore } from "../../provider/actionsStore.js";
 import { useProjectSlug } from "../../../lib/auth.js";
 import { pageQueries, projectQueries } from "../../../lib/queries.js";
 import { cn } from "../../../lib/utils.js";
+import { STUDIO_CONTENT_PATH } from "../routes.js";
 import { studioStore } from "../studioStore.js";
 import { EnvironmentMenu } from "./EnvironmentMenu.js";
 import { ProjectMenu } from "./ProjectMenu.js";
 import { UserButton } from "./UserButton.js";
 import { c } from "react/compiler-runtime";
-import { Kbd } from "@camox/ui/kbd";
 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 { Button } from "@camox/ui/button";
 import { Database, Globe, SearchIcon } from "lucide-react";
@@ -24,7 +24,7 @@ const links = [{
 	icon: "Globe",
 	aliases: ["Preview", "Website"]
 }, {
-	to: "/cmx-studio/content",
+	to: STUDIO_CONTENT_PATH,
 	title: "Content",
 	children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Database, { className: "h-4 w-4" }), "Content"] }),
 	icon: "FileText",
@@ -35,10 +35,10 @@ const links = [{
 	]
 }];
 const Navbar = () => {
-	const $ = c(24);
-	if ($[0] !== "bee8f3d13dbb280b2de1a82d82a4017e5a4d40d4e5868be00fe289eb0c74361f") {
-		for (let $i = 0; $i < 24; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "bee8f3d13dbb280b2de1a82d82a4017e5a4d40d4e5868be00fe289eb0c74361f";
+	const $ = c(19);
+	if ($[0] !== "eea0214bb845c9520caf17dd35f6ab89aaf76f8bfb610142be4d515eefd136f8") {
+		for (let $i = 0; $i < 19; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "eea0214bb845c9520caf17dd35f6ab89aaf76f8bfb610142be4d515eefd136f8";
 	}
 	const projectSlug = useProjectSlug();
 	let t0;
@@ -68,75 +68,62 @@ const Navbar = () => {
 	const { data: pages } = useQuery(t3);
 	const isMac = navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
 	const { pathname } = useLocation();
-	const t4 = useIsPreviewSheetOpen() ? "opacity-100" : "opacity-0";
-	let t5;
-	if ($[8] !== 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);
-		$[8] = t4;
-		$[9] = t5;
-	} else t5 = $[9];
-	let t6;
-	if ($[10] !== t5) {
-		t6 = /* @__PURE__ */ jsx("div", { className: t5 });
-		$[10] = t5;
-		$[11] = t6;
-	} else t6 = $[11];
-	let t7;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ jsxs("div", {
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs("div", {
 			className: "flew-row flex gap-1",
 			children: [/* @__PURE__ */ jsx(ProjectMenu, {}), /* @__PURE__ */ jsx(EnvironmentMenu, {})]
 		});
-		$[12] = t7;
-	} else t7 = $[12];
-	let t8;
-	if ($[13] !== pages || $[14] !== pathname) {
-		t8 = links.map((link, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== pages || $[10] !== pathname) {
+		t5 = links.map((link, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
 			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!" },
 			children: link.children
 		}) }, link.to));
-		$[13] = pages;
-		$[14] = pathname;
-		$[15] = t8;
-	} else t8 = $[15];
-	let t9;
-	if ($[16] !== t8) {
-		t9 = /* @__PURE__ */ jsxs("div", {
+		$[9] = pages;
+		$[10] = pathname;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-row gap-2",
-			children: [t7, /* @__PURE__ */ jsx("ul", {
+			children: [t4, /* @__PURE__ */ jsx("ul", {
 				className: "flex items-center gap-1",
-				children: t8
+				children: t5
 			})]
 		});
-		$[16] = t8;
-		$[17] = t9;
-	} else t9 = $[17];
-	let t10;
-	let t11;
-	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = /* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground size-4" });
-		t11 = /* @__PURE__ */ jsx("span", {
+		$[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", {
 			className: "text-muted-foreground",
 			children: "Quick find"
 		});
-		$[18] = t10;
-		$[19] = t11;
+		$[14] = t7;
+		$[15] = t8;
 	} else {
-		t10 = $[18];
-		t11 = $[19];
+		t7 = $[14];
+		t8 = $[15];
 	}
-	let t12;
-	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = /* @__PURE__ */ jsxs("div", {
+	let t9;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [/* @__PURE__ */ jsxs(Button, {
 				variant: "outline",
 				onClick: _temp,
 				children: [
-					t10,
-					t11,
+					t7,
+					t8,
 					/* @__PURE__ */ jsxs(Kbd, {
 						className: "ml-4",
 						children: [isMac ? "⌘" : "Ctrl", " K"]
@@ -144,29 +131,24 @@ const Navbar = () => {
 				]
 			}), /* @__PURE__ */ jsx(UserButton, {})]
 		});
-		$[20] = t12;
-	} else t12 = $[20];
-	let t13;
-	if ($[21] !== t6 || $[22] !== t9) {
-		t13 = /* @__PURE__ */ jsxs("nav", {
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== t6) {
+		t10 = /* @__PURE__ */ jsxs("nav", {
 			className: "relative flex items-center justify-between gap-4 border-b-2 bg-transparent px-2 py-2",
-			children: [
-				t6,
-				t9,
-				t12
-			]
+			children: [t6, t9]
 		});
-		$[21] = t6;
-		$[22] = t9;
-		$[23] = t13;
-	} else t13 = $[23];
-	return t13;
+		$[17] = t6;
+		$[18] = t10;
+	} else t10 = $[18];
+	return t10;
 };
 function useNavbarActions() {
 	const $ = c(4);
-	if ($[0] !== "bee8f3d13dbb280b2de1a82d82a4017e5a4d40d4e5868be00fe289eb0c74361f") {
+	if ($[0] !== "eea0214bb845c9520caf17dd35f6ab89aaf76f8bfb610142be4d515eefd136f8") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "bee8f3d13dbb280b2de1a82d82a4017e5a4d40d4e5868be00fe289eb0c74361f";
+		$[0] = "eea0214bb845c9520caf17dd35f6ab89aaf76f8bfb610142be4d515eefd136f8";
 	}
 	const navigate = useNavigate();
 	let t0;

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

@@ -6,8 +6,8 @@ import { Link } from "@tanstack/react-router";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
 import { ChevronDown, Globe, Info, Settings, Users } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
 import { Skeleton } from "@camox/ui/skeleton";
 
 //#region src/features/studio/components/ProjectMenu.tsx

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

@@ -3,8 +3,8 @@ import { useApplyTheme } from "../useTheme.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
 import { Check, LogOut, Monitor, Moon, Settings, Sun, User } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
 import { Avatar, AvatarFallback, AvatarImage } from "@camox/ui/avatar";
 
 //#region src/features/studio/components/UserButton.tsx

package/dist/features/studio/routes.js

@@ -0,0 +1,7 @@
+//#region src/features/studio/routes.ts
+const STUDIO_ROUTE_SEGMENT = "camox";
+const STUDIO_BASE_PATH = `/${STUDIO_ROUTE_SEGMENT}`;
+const STUDIO_CONTENT_PATH = `${STUDIO_BASE_PATH}/content`;
+
+//#endregion
+export { STUDIO_BASE_PATH, STUDIO_CONTENT_PATH, STUDIO_ROUTE_SEGMENT };

package/dist/features/studio/useTheme.js

@@ -3,6 +3,7 @@ import { c } from "react/compiler-runtime";
 import * as React from "react";
 
 //#region src/features/studio/useTheme.ts
+let activeThemeOwnerCount = 0;
 function readStoredTheme() {
 	if (typeof window === "undefined") return "system";
 	return localStorage.getItem("theme") || "system";
@@ -15,9 +16,9 @@ function readStoredTheme() {
 */
 function useThemeValue() {
 	const $ = c(3);
-	if ($[0] !== "fcb6efcbb121aaf74422b01742d77a7520178fc0fe001e78c2f3645c95a1fa7e") {
+	if ($[0] !== "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f") {
 		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "fcb6efcbb121aaf74422b01742d77a7520178fc0fe001e78c2f3645c95a1fa7e";
+		$[0] = "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f";
 	}
 	const [theme] = React.useState(readStoredTheme);
 	let t0;
@@ -34,34 +35,70 @@ function useThemeValue() {
 * never from contexts that share `<html>` with the user's site.
 */
 function useApplyTheme() {
-	const $ = c(9);
-	if ($[0] !== "fcb6efcbb121aaf74422b01742d77a7520178fc0fe001e78c2f3645c95a1fa7e") {
-		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "fcb6efcbb121aaf74422b01742d77a7520178fc0fe001e78c2f3645c95a1fa7e";
+	const $ = c(10);
+	if ($[0] !== "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f") {
+		for (let $i = 0; $i < 10; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f";
 	}
 	const [theme, setTheme] = React.useState(readStoredTheme);
-	const applyTheme = _temp;
+	const [resolvedTheme, setResolvedTheme] = React.useState("light");
 	let t0;
 	let t1;
 	if ($[1] !== theme) {
 		t0 = () => {
-			const root_0 = window.document.documentElement;
-			root_0.classList.remove("light", "dark");
+			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(mediaQuery.matches ? "dark" : "light");
-				};
-				updateSystemTheme();
+				const updateSystemTheme = () => applyTheme(resolveTheme());
 				mediaQuery.addEventListener("change", updateSystemTheme);
 				return () => {
 					mediaQuery.removeEventListener("change", updateSystemTheme);
-					root_0.classList.remove("light", "dark");
+					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;
 				};
 			}
-			root_0.classList.add(theme);
 			return () => {
-				root_0.classList.remove("light", "dark");
+				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];
@@ -89,26 +126,23 @@ function useApplyTheme() {
 	}
 	React.useEffect(t2, t3);
 	let t4;
-	if ($[7] !== theme) {
+	if ($[7] !== resolvedTheme || $[8] !== theme) {
 		t4 = {
 			theme,
+			resolvedTheme,
 			setTheme
 		};
-		$[7] = theme;
-		$[8] = t4;
-	} else t4 = $[8];
+		$[7] = resolvedTheme;
+		$[8] = theme;
+		$[9] = t4;
+	} else t4 = $[9];
 	return t4;
 }
-function _temp(themeToApply) {
-	const root = window.document.documentElement;
-	root.classList.remove("light", "dark");
-	root.classList.add(themeToApply);
-}
 function useThemeActions() {
 	const $ = c(5);
-	if ($[0] !== "fcb6efcbb121aaf74422b01742d77a7520178fc0fe001e78c2f3645c95a1fa7e") {
+	if ($[0] !== "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "fcb6efcbb121aaf74422b01742d77a7520178fc0fe001e78c2f3645c95a1fa7e";
+		$[0] = "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f";
 	}
 	const { theme, setTheme } = useApplyTheme();
 	let t0;
@@ -125,9 +159,9 @@ function useThemeActions() {
 						"Color mode"
 					],
 					groupLabel: "Studio",
-					checkIfAvailable: _temp2,
+					checkIfAvailable: _temp,
 					hasChildren: true,
-					execute: _temp3
+					execute: _temp2
 				},
 				{
 					id: "switch-to-light-theme",
@@ -164,7 +198,7 @@ function useThemeActions() {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp4)
+					ids: actions.map(_temp3)
 				});
 			};
 		};
@@ -179,11 +213,11 @@ function useThemeActions() {
 	}
 	React.useEffect(t0, t1);
 }
-function _temp4(a) {
+function _temp3(a) {
 	return a.id;
 }
-function _temp3() {}
-function _temp2() {
+function _temp2() {}
+function _temp() {
 	return true;
 }
 

package/dist/features/vite/routeGeneration.js

@@ -1,5 +1,6 @@
+import { STUDIO_ROUTE_SEGMENT } from "../studio/routes.js";
 import { writeIfChanged } from "./utils.js";
-import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { mkdirSync, readFileSync, unlinkSync, writeFileSync } from "node:fs";
 import { relative, resolve } from "node:path";
 
 //#region src/features/vite/routeGeneration.ts
@@ -15,25 +16,7 @@ const HEADER = `/* =============================================================
 // @ts-nocheck
 
 `;
-function generateCamoxLayout(authenticationUrl) {
-	return HEADER + `import { Outlet, createFileRoute } from "@tanstack/react-router";
-import { CamoxProvider } from "camox/CamoxProvider";
-import { camoxApp } from "@/camox/app";
-
-export const Route = createFileRoute("/_camox")({
-  component: CamoxPathlessLayout,
-});
-
-function CamoxPathlessLayout() {
-  return (
-    <CamoxProvider camoxApp={camoxApp} authenticationUrl="${authenticationUrl}" apiUrl={__CAMOX_API_URL__} projectSlug={__CAMOX_PROJECT_SLUG__} environmentName={__CAMOX_ENVIRONMENT_NAME__}>
-      <Outlet />
-    </CamoxProvider>
-  );
-}
-`;
-}
-function generatePageRoute() {
+function generatePageRoute(authenticationUrl) {
 	return HEADER + `import { createFileRoute } from "@tanstack/react-router";
 import {
   createMarkdownMiddleware,
@@ -41,21 +24,30 @@ import {
   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/$")({
+export const Route = createFileRoute("/(camox)/(_preview)/$")({
   server: {
     middleware: [markdownMiddleware],
   },
-  component: PageRouteComponent,
+  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() {
@@ -63,51 +55,40 @@ function generateOgRoute() {
 import { createOgHandler } from "camox/_internal/ogRoute";
 import { camoxApp } from "@/camox/app";
 
-export const Route = createFileRoute("/_camox/og")({
+export const Route = createFileRoute("/(camox)/(_preview)/og")({
   server: {
     handlers: createOgHandler(camoxApp),
   },
 });
 `;
 }
-function generateCmxRedirect() {
-	return HEADER + `import { createFileRoute, redirect } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/_camox/cmx")({
-  component: RouteComponent,
-  loader: () => {
-    throw redirect({ to: "/cmx-studio" });
-  },
-});
-
-function RouteComponent() {
-  return null;
-}
-`;
-}
-function generateCmxStudio() {
+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/cmx-studio")({
+export const Route = createFileRoute("/(camox)/(_studio)/${STUDIO_ROUTE_SEGMENT}")({
   component: RouteComponent,
   notFoundComponent: () => <div>Studio page not found</div>,
 });
 
 function RouteComponent() {
   return (
-    <CamoxStudio>
-      <Outlet />
-    </CamoxStudio>
+    <CamoxProvider camoxApp={camoxApp} authenticationUrl="${authenticationUrl}" apiUrl={__CAMOX_API_URL__} projectSlug={__CAMOX_PROJECT_SLUG__} environmentName={__CAMOX_ENVIRONMENT_NAME__}>
+      <CamoxStudio>
+        <Outlet />
+      </CamoxStudio>
+    </CamoxProvider>
   );
 }
 `;
 }
-function generateCmxStudioCatchAll() {
+function generateCamoxStudioCatchAll() {
 	return HEADER + `import { Outlet, createFileRoute } from "@tanstack/react-router";
 import { CamoxStudio } from "camox/CamoxStudio";
 
-export const Route = createFileRoute("/_camox/cmx-studio/$")({
+export const Route = createFileRoute("/(camox)/(_studio)/${STUDIO_ROUTE_SEGMENT}/$")({
   component: RouteComponent,
   notFoundComponent: () => <div>Studio page not found</div>,
 });
@@ -121,11 +102,11 @@ function RouteComponent() {
 }
 `;
 }
-function generateCmxStudioContent() {
+function generateCamoxStudioContent() {
 	return HEADER + `import { createFileRoute } from "@tanstack/react-router";
 import { CamoxContent } from "camox/CamoxContent";
 
-export const Route = createFileRoute("/_camox/cmx-studio/content")({
+export const Route = createFileRoute("/(camox)/(_studio)/${STUDIO_ROUTE_SEGMENT}/content")({
   component: RouteComponent,
 });
 
@@ -135,40 +116,61 @@ function RouteComponent() {
 `;
 }
 function getRouteFileEntries({ routesDir, authenticationUrl }) {
-	const camoxDir = resolve(routesDir, "_camox");
+	const groupDir = resolve(routesDir, "(camox)");
+	const previewDir = resolve(groupDir, "(_preview)");
+	const studioDir = resolve(groupDir, "(_studio)");
 	return [
 		{
-			path: resolve(routesDir, "_camox.tsx"),
-			content: generateCamoxLayout(authenticationUrl)
-		},
-		{
-			path: resolve(camoxDir, "$.tsx"),
-			content: generatePageRoute()
+			path: resolve(previewDir, "$.tsx"),
+			content: generatePageRoute(authenticationUrl)
 		},
 		{
-			path: resolve(camoxDir, "og.tsx"),
+			path: resolve(previewDir, "og.tsx"),
 			content: generateOgRoute()
 		},
 		{
-			path: resolve(camoxDir, "cmx.tsx"),
-			content: generateCmxRedirect()
+			path: resolve(studioDir, `${STUDIO_ROUTE_SEGMENT}.tsx`),
+			content: generateCamoxStudio(authenticationUrl)
 		},
 		{
-			path: resolve(camoxDir, "cmx-studio.tsx"),
-			content: generateCmxStudio()
+			path: resolve(studioDir, `${STUDIO_ROUTE_SEGMENT}.$.tsx`),
+			content: generateCamoxStudioCatchAll()
 		},
 		{
-			path: resolve(camoxDir, "cmx-studio.$.tsx"),
-			content: generateCmxStudioCatchAll()
-		},
-		{
-			path: resolve(camoxDir, "cmx-studio.content.tsx"),
-			content: generateCmxStudioContent()
+			path: resolve(studioDir, `${STUDIO_ROUTE_SEGMENT}.content.tsx`),
+			content: generateCamoxStudioContent()
 		}
 	];
 }
+function removeObsoleteRouteFiles(routesDir) {
+	const camoxDir = resolve(routesDir, "_camox");
+	const studioDir = resolve(routesDir, "(camox)", "(_studio)");
+	const obsoletePaths = [
+		resolve(routesDir, "_camox.tsx"),
+		resolve(camoxDir, "cmx.tsx"),
+		resolve(camoxDir, "$.tsx"),
+		resolve(camoxDir, "og.tsx"),
+		resolve(camoxDir, "cmx-studio.tsx"),
+		resolve(camoxDir, "cmx-studio.$.tsx"),
+		resolve(camoxDir, "cmx-studio.content.tsx"),
+		resolve(studioDir, "cmx.tsx"),
+		resolve(studioDir, "cmx-studio.tsx"),
+		resolve(studioDir, "cmx-studio.$.tsx"),
+		resolve(studioDir, "cmx-studio.content.tsx")
+	];
+	for (const filePath of obsoletePaths) try {
+		if (!readFileSync(filePath, "utf-8").startsWith(HEADER)) continue;
+		unlinkSync(filePath);
+	} catch (error) {
+		if (error.code === "ENOENT") continue;
+		throw error;
+	}
+}
 function generateRouteFiles(options) {
-	mkdirSync(resolve(options.routesDir, "_camox"), { recursive: true });
+	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) {

package/dist/hooks/use-file-upload.js

@@ -1,8 +1,8 @@
 "use client";
 
-import { trackClientEvent } from "../lib/telemetry-client.js";
 import { getAuthCookieHeader } from "../lib/auth.js";
 import { getApiUrl, getEnvironmentName } from "../lib/api-client.js";
+import { trackClientEvent } from "../lib/telemetry-client.js";
 import { useCallback, useRef, useState } from "react";
 
 //#region src/hooks/use-file-upload.ts