camox 0.34.0 → 0.35.0

package/dist/features/runtime/pageApp.js

@@ -1,27 +1,36 @@
-import { CamoxPreview, PageContent } from "../preview/CamoxPreview.js";
-import { CamoxProvider } from "../provider/CamoxProvider.js";
+import { useAuthState } from "../../lib/auth.js";
+import { CoreCamoxProvider, isLocalhostPreview } from "../provider/CoreCamoxProvider.js";
+import { PublishedPageExperience } from "../page/PublishedPageExperience.js";
 import { PageNavigationProvider } from "./pageNavigation.js";
 import { c } from "react/compiler-runtime";
 import { HydrationBoundary, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/features/runtime/pageApp.tsx
 function PageApp(t0) {
-	const $ = c(18);
-	if ($[0] !== "557a21bc6b4aed13935ede3368115a90db9c6fcffe823bb869ddbaeb394cf48e") {
-		for (let $i = 0; $i < 18; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "557a21bc6b4aed13935ede3368115a90db9c6fcffe823bb869ddbaeb394cf48e";
+	const $ = c(22);
+	if ($[0] !== "41b609b6b6e9223ab6f76c85adfea25789d9d089bc02ca12ea1dd789dd8294d1") {
+		for (let $i = 0; $i < 22; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "41b609b6b6e9223ab6f76c85adfea25789d9d089bc02ca12ea1dd789dd8294d1";
 	}
 	const { camoxApp, input, queryClient } = t0;
 	const t1 = input.dehydratedState;
 	let t2;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(CamoxPreview, { children: /* @__PURE__ */ jsx(PageContent, {}) });
-		$[1] = t2;
-	} else t2 = $[1];
+	if ($[1] !== camoxApp || $[2] !== input || $[3] !== queryClient) {
+		t2 = /* @__PURE__ */ jsx(PageExperience, {
+			camoxApp,
+			input,
+			queryClient
+		});
+		$[1] = camoxApp;
+		$[2] = input;
+		$[3] = queryClient;
+		$[4] = t2;
+	} else t2 = $[4];
 	let t3;
-	if ($[2] !== camoxApp || $[3] !== input.apiUrl || $[4] !== input.authenticationUrl || $[5] !== input.environmentName || $[6] !== input.projectSlug) {
-		t3 = /* @__PURE__ */ jsx(CamoxProvider, {
+	if ($[5] !== camoxApp || $[6] !== input.apiUrl || $[7] !== input.authenticationUrl || $[8] !== input.environmentName || $[9] !== input.projectSlug || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(CoreCamoxProvider, {
 			camoxApp,
 			authenticationUrl: input.authenticationUrl,
 			apiUrl: input.apiUrl,
@@ -29,47 +38,151 @@ function PageApp(t0) {
 			environmentName: input.environmentName,
 			children: t2
 		});
-		$[2] = camoxApp;
-		$[3] = input.apiUrl;
-		$[4] = input.authenticationUrl;
-		$[5] = input.environmentName;
-		$[6] = input.projectSlug;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[5] = camoxApp;
+		$[6] = input.apiUrl;
+		$[7] = input.authenticationUrl;
+		$[8] = input.environmentName;
+		$[9] = input.projectSlug;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
 	let t4;
-	if ($[8] !== input || $[9] !== queryClient || $[10] !== t3) {
+	if ($[12] !== input || $[13] !== queryClient || $[14] !== t3) {
 		t4 = /* @__PURE__ */ jsx(PageNavigationProvider, {
 			initialInput: input,
 			queryClient,
 			children: t3
 		});
-		$[8] = input;
-		$[9] = queryClient;
-		$[10] = t3;
-		$[11] = t4;
-	} else t4 = $[11];
+		$[12] = input;
+		$[13] = queryClient;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
 	let t5;
-	if ($[12] !== t1 || $[13] !== t4) {
+	if ($[16] !== t1 || $[17] !== t4) {
 		t5 = /* @__PURE__ */ jsx(HydrationBoundary, {
 			state: t1,
 			children: t4
 		});
-		$[12] = t1;
-		$[13] = t4;
-		$[14] = t5;
-	} else t5 = $[14];
+		$[16] = t1;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
 	let t6;
-	if ($[15] !== queryClient || $[16] !== t5) {
+	if ($[19] !== queryClient || $[20] !== t5) {
 		t6 = /* @__PURE__ */ jsx(QueryClientProvider, {
 			client: queryClient,
 			children: t5
 		});
-		$[15] = queryClient;
-		$[16] = t5;
-		$[17] = t6;
-	} else t6 = $[17];
+		$[19] = queryClient;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
 	return t6;
 }
+const LazyEditablePageExperience = React.lazy(() => import("../preview/EditablePageExperience.js").then((module) => ({ default: module.EditablePageExperience })));
+const LazyLocalhostPreviewProvider = React.lazy(() => import("../provider/LocalhostPreviewProvider.js").then((module) => ({ default: module.LocalhostPreviewProvider })));
+var EditingActivationBoundary = class extends React.Component {
+	state = { failed: false };
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	componentDidCatch(error) {
+		console.error("Camox editing runtime failed to load; keeping the published page visible.", error);
+	}
+	render() {
+		if (this.state.failed) return this.props.fallback;
+		return this.props.children;
+	}
+};
+function PageExperience(t0) {
+	const $ = c(21);
+	if ($[0] !== "41b609b6b6e9223ab6f76c85adfea25789d9d089bc02ca12ea1dd789dd8294d1") {
+		for (let $i = 0; $i < 21; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "41b609b6b6e9223ab6f76c85adfea25789d9d089bc02ca12ea1dd789dd8294d1";
+	}
+	const { camoxApp, input, queryClient } = t0;
+	const { isAuthenticated } = useAuthState();
+	const [hasOtt] = React.useState(_temp);
+	const local = isLocalhostPreview();
+	const shouldActivateEditing = isAuthenticated || input.source === "draft" || hasOtt;
+	let t1;
+	if ($[1] !== input.source) {
+		t1 = /* @__PURE__ */ jsx(PublishedPageExperience, { source: input.source });
+		$[1] = input.source;
+		$[2] = t1;
+	} else t1 = $[2];
+	const published = t1;
+	if (shouldActivateEditing) {
+		let t2;
+		if ($[3] !== camoxApp || $[4] !== input || $[5] !== queryClient) {
+			t2 = /* @__PURE__ */ jsx(LazyEditablePageExperience, {
+				camoxApp,
+				input,
+				queryClient
+			});
+			$[3] = camoxApp;
+			$[4] = input;
+			$[5] = queryClient;
+			$[6] = t2;
+		} else t2 = $[6];
+		let t3;
+		if ($[7] !== published || $[8] !== t2) {
+			t3 = /* @__PURE__ */ jsx(React.Suspense, {
+				fallback: published,
+				children: t2
+			});
+			$[7] = published;
+			$[8] = t2;
+			$[9] = t3;
+		} else t3 = $[9];
+		let t4;
+		if ($[10] !== published || $[11] !== t3) {
+			t4 = /* @__PURE__ */ jsx(EditingActivationBoundary, {
+				fallback: published,
+				children: t3
+			});
+			$[10] = published;
+			$[11] = t3;
+			$[12] = t4;
+		} else t4 = $[12];
+		return t4;
+	}
+	if (local) {
+		let t2;
+		if ($[13] !== published) {
+			t2 = /* @__PURE__ */ jsx(LazyLocalhostPreviewProvider, { children: published });
+			$[13] = published;
+			$[14] = t2;
+		} else t2 = $[14];
+		let t3;
+		if ($[15] !== published || $[16] !== t2) {
+			t3 = /* @__PURE__ */ jsx(React.Suspense, {
+				fallback: published,
+				children: t2
+			});
+			$[15] = published;
+			$[16] = t2;
+			$[17] = t3;
+		} else t3 = $[17];
+		let t4;
+		if ($[18] !== published || $[19] !== t3) {
+			t4 = /* @__PURE__ */ jsx(EditingActivationBoundary, {
+				fallback: published,
+				children: t3
+			});
+			$[18] = published;
+			$[19] = t3;
+			$[20] = t4;
+		} else t4 = $[20];
+		return t4;
+	}
+	return published;
+}
+function _temp() {
+	if (typeof window === "undefined") return false;
+	return new URL(window.location.href).searchParams.has("ott");
+}
 
 //#endregion
 export { PageApp };

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

@@ -2,6 +2,5 @@ import { CamoxApp } from "../../core/createApp.js";
 
 //#region src/features/runtime/pageClient.d.ts
 declare function hydratePageWithApp(camoxApp: CamoxApp): void;
-declare function hydrateRuntimeWithApp(camoxApp: CamoxApp): void;
 //#endregion
-export { hydratePageWithApp, hydrateRuntimeWithApp };
+export { hydratePageWithApp };

package/dist/features/runtime/pageClient.js

@@ -1,37 +1,20 @@
 import { PageApp } from "./pageApp.js";
-import { StudioApp } from "./studioApp.js";
+import { readHydrationData } from "./hydrationData.js";
 import { QueryClient } from "@tanstack/react-query";
 import { jsx } from "react/jsx-runtime";
 import { hydrateRoot } from "react-dom/client";
 
 //#region src/features/runtime/pageClient.tsx
-function readHydrationData() {
-	const script = document.getElementById("__CAMOX_DATA__");
-	if (!script?.textContent) throw new Error("Camox runtime hydration data was not found.");
-	return JSON.parse(script.textContent);
-}
 function hydratePageWithApp(camoxApp) {
-	hydrateRuntimeWithApp(camoxApp);
-}
-function hydrateRuntimeWithApp(camoxApp) {
 	const root = document.getElementById("root");
 	if (!root) throw new Error("Camox runtime root element was not found.");
 	const queryClient = new QueryClient();
-	const input = readHydrationData();
-	if (input.runtimeKind === "studio") {
-		hydrateRoot(root, /* @__PURE__ */ jsx(StudioApp, {
-			camoxApp,
-			input,
-			queryClient
-		}));
-		return;
-	}
 	hydrateRoot(root, /* @__PURE__ */ jsx(PageApp, {
 		camoxApp,
-		input,
+		input: readHydrationData(),
 		queryClient
 	}));
 }
 
 //#endregion
-export { hydratePageWithApp, hydrateRuntimeWithApp };
+export { hydratePageWithApp };

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

@@ -19,6 +19,7 @@ interface PageRenderInput {
   pathname: string;
   projectSlug: string;
   runtimeBasePath: string;
+  source: "live" | "draft";
 }
 //#endregion
 export { PageRenderInput };

package/dist/features/runtime/studioApp.js

@@ -1,18 +1,23 @@
+import { useSignInRedirect } from "../../lib/auth.js";
 import { STUDIO_CONTENT_PATH } from "../studio/routes.js";
 import { CamoxContent } from "../content/CamoxContent.js";
-import { CamoxProvider } from "../provider/CamoxProvider.js";
+import { AuthGate } from "../../components/AuthGate.js";
+import { AuthenticatedCamoxProvider } from "../provider/AuthenticatedCamoxProvider.js";
+import { CoreCamoxProvider } from "../provider/CoreCamoxProvider.js";
 import { CamoxStudio } from "../studio/CamoxStudio.js";
+import { CompleteBlockEditingRuntimeProvider } from "../../core/editing/CompleteBlockEditingRuntime.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";
+import * as React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
 
 //#region src/features/runtime/studioApp.tsx
 function StudioRouteContent(t0) {
 	const $ = c(4);
-	if ($[0] !== "4c7f5ba34e144c65d886d3b5a39ff5adc9765123d3c37bd6491f55534f919b1f") {
+	if ($[0] !== "4c9c648e70d7360e13c0b3d8d0f0633d0ab4263e359229c8802810bae1f42f17") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "4c7f5ba34e144c65d886d3b5a39ff5adc9765123d3c37bd6491f55534f919b1f";
+		$[0] = "4c9c648e70d7360e13c0b3d8d0f0633d0ab4263e359229c8802810bae1f42f17";
 	}
 	const { input } = t0;
 	if (input.pathname === STUDIO_CONTENT_PATH) {
@@ -44,23 +49,86 @@ function StudioRouteContent(t0) {
 	} else t1 = $[3];
 	return t1;
 }
+function StudioAuthentication(t0) {
+	const $ = c(6);
+	if ($[0] !== "4c9c648e70d7360e13c0b3d8d0f0633d0ab4263e359229c8802810bae1f42f17") {
+		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "4c9c648e70d7360e13c0b3d8d0f0633d0ab4263e359229c8802810bae1f42f17";
+	}
+	const { children } = t0;
+	const signInRedirect = useSignInRedirect(_temp);
+	let t1;
+	let t2;
+	if ($[1] !== signInRedirect) {
+		t1 = () => signInRedirect();
+		t2 = [signInRedirect];
+		$[1] = signInRedirect;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	React.useEffect(t1, t2);
+	let t3;
+	if ($[4] !== children) {
+		t3 = /* @__PURE__ */ jsx(Fragment, { children });
+		$[4] = children;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+}
+function _temp() {
+	if (typeof window === "undefined") return;
+	return new URL("/", window.location.href).href;
+}
+function StudioAccessGate(t0) {
+	const $ = c(6);
+	if ($[0] !== "4c9c648e70d7360e13c0b3d8d0f0633d0ab4263e359229c8802810bae1f42f17") {
+		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "4c9c648e70d7360e13c0b3d8d0f0633d0ab4263e359229c8802810bae1f42f17";
+	}
+	const { children } = t0;
+	let t1;
+	if ($[1] !== children) {
+		t1 = /* @__PURE__ */ jsx(AuthenticatedCamoxProvider, { children });
+		$[1] = children;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(StudioAuthentication, { children: null });
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1) {
+		t3 = /* @__PURE__ */ jsx(AuthGate, {
+			authenticated: t1,
+			loading: null,
+			unauthenticated: t2
+		});
+		$[4] = t1;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+}
 function StudioApp(t0) {
 	const $ = c(21);
-	if ($[0] !== "4c7f5ba34e144c65d886d3b5a39ff5adc9765123d3c37bd6491f55534f919b1f") {
+	if ($[0] !== "4c9c648e70d7360e13c0b3d8d0f0633d0ab4263e359229c8802810bae1f42f17") {
 		for (let $i = 0; $i < 21; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "4c7f5ba34e144c65d886d3b5a39ff5adc9765123d3c37bd6491f55534f919b1f";
+		$[0] = "4c9c648e70d7360e13c0b3d8d0f0633d0ab4263e359229c8802810bae1f42f17";
 	}
 	const { camoxApp, input, queryClient } = t0;
 	const t1 = input.dehydratedState;
 	let t2;
 	if ($[1] !== input) {
-		t2 = /* @__PURE__ */ jsx(CamoxStudio, { children: /* @__PURE__ */ jsx(StudioRouteContent, { input }) });
+		t2 = /* @__PURE__ */ jsx(StudioAccessGate, { children: /* @__PURE__ */ jsx(CompleteBlockEditingRuntimeProvider, { children: /* @__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, {
+		t3 = /* @__PURE__ */ jsx(CoreCamoxProvider, {
 			camoxApp,
 			authenticationUrl: input.authenticationUrl,
 			apiUrl: input.apiUrl,

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

@@ -0,0 +1,6 @@
+import { CamoxApp } from "../../core/createApp.js";
+
+//#region src/features/runtime/studioClient.d.ts
+declare function hydrateStudioWithApp(camoxApp: CamoxApp): void;
+//#endregion
+export { hydrateStudioWithApp };

package/dist/features/runtime/studioClient.js

@@ -0,0 +1,20 @@
+import { readHydrationData } from "./hydrationData.js";
+import { StudioApp } from "./studioApp.js";
+import { QueryClient } from "@tanstack/react-query";
+import { jsx } from "react/jsx-runtime";
+import { hydrateRoot } from "react-dom/client";
+
+//#region src/features/runtime/studioClient.tsx
+function hydrateStudioWithApp(camoxApp) {
+	const root = document.getElementById("root");
+	if (!root) throw new Error("Camox runtime root element was not found.");
+	const queryClient = new QueryClient();
+	hydrateRoot(root, /* @__PURE__ */ jsx(StudioApp, {
+		camoxApp,
+		input: readHydrationData(),
+		queryClient
+	}));
+}
+
+//#endregion
+export { hydrateStudioWithApp };

package/dist/features/studio/CamoxStudio.js

@@ -1,8 +1,8 @@
 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 { trackClientEvent } from "../../lib/telemetry-client.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,18 +1,18 @@
 import { AuthContext } from "../../../lib/auth.js";
 import { environmentMutations, environmentQueries, projectQueries } from "../../../lib/queries.js";
 import { c } from "react/compiler-runtime";
-import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { toast } from "@camox/ui/toaster";
 import { Button } from "@camox/ui/button";
 import { AlertCircle, ChevronDown, Download, Upload } from "lucide-react";
 import { Alert, AlertDescription } from "@camox/ui/alert";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 import { Badge } from "@camox/ui/badge";
+import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import { Separator } from "@camox/ui/separator";
 import { Spinner } from "@camox/ui/spinner";
+import { toast } from "@camox/ui/toaster";
 
 //#region src/features/studio/components/EnvironmentMenu.tsx
 const PRODUCTION_ENV = "production";

package/dist/features/studio/useTheme.js

@@ -9,27 +9,6 @@ function readStoredTheme() {
 	return localStorage.getItem("theme") || "system";
 }
 /**
-* Read-only access to the studio theme. Does not mutate `<html>` or localStorage.
-* Use this when you need the current theme value (e.g. to pass to a Toaster) but
-* are not the owner of the studio chrome — applying the theme would bleed onto
-* the host site.
-*/
-function useThemeValue() {
-	const $ = c(3);
-	if ($[0] !== "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f") {
-		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f";
-	}
-	const [theme] = React.useState(readStoredTheme);
-	let t0;
-	if ($[1] !== theme) {
-		t0 = { theme };
-		$[1] = theme;
-		$[2] = t0;
-	} else t0 = $[2];
-	return t0;
-}
-/**
 * 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.
@@ -222,4 +201,4 @@ function _temp() {
 }
 
 //#endregion
-export { useApplyTheme, useThemeActions, useThemeValue };
+export { useApplyTheme, useThemeActions };

package/dist/features/vite/runtimeDev.js

@@ -19,6 +19,10 @@ const VIRTUAL_PAGE_CLIENT = "virtual:camox/page-client";
 const RESOLVED_VIRTUAL_PAGE_CLIENT = "\0" + VIRTUAL_PAGE_CLIENT;
 const VIRTUAL_PAGE_CLIENT_URL = "virtual:camox/page-client-url";
 const RESOLVED_VIRTUAL_PAGE_CLIENT_URL = "\0" + VIRTUAL_PAGE_CLIENT_URL;
+const VIRTUAL_STUDIO_CLIENT = "virtual:camox/studio-client";
+const RESOLVED_VIRTUAL_STUDIO_CLIENT = "\0" + VIRTUAL_STUDIO_CLIENT;
+const VIRTUAL_STUDIO_CLIENT_URL = "virtual:camox/studio-client-url";
+const RESOLVED_VIRTUAL_STUDIO_CLIENT_URL = "\0" + VIRTUAL_STUDIO_CLIENT_URL;
 const VIRTUAL_APP_STYLESHEET_URL = "virtual:camox/app-stylesheet-url";
 const RESOLVED_VIRTUAL_APP_STYLESHEET_URL = "\0" + VIRTUAL_APP_STYLESHEET_URL;
 const VIRTUAL_STUDIO_CSS = "virtual:camox-studio-css";
@@ -56,6 +60,7 @@ function resolveCamoxSourceImport(id) {
 		"camox/navigation": resolve(sdkRoot, "src/features/navigation/navigation.tsx"),
 		"camox/_internal/pageServer": resolve(sdkRoot, "src/features/runtime/pageServer.tsx"),
 		"camox/_internal/pageClient": resolve(sdkRoot, "src/features/runtime/pageClient.tsx"),
+		"camox/_internal/studioClient": resolve(sdkRoot, "src/features/runtime/studioClient.tsx"),
 		"camox/_internal/studioServer": resolve(sdkRoot, "src/features/runtime/studioServer.tsx"),
 		"camox/_internal/runtime": resolve(sdkRoot, "src/features/runtime/runtime.ts")
 	}[id];
@@ -106,10 +111,17 @@ export async function renderStudio(input) {
 `;
 }
 function generateVirtualPageClient() {
-	return `import { hydrateRuntimeWithApp } from "camox/_internal/pageClient";
+	return `import { hydratePageWithApp } from "camox/_internal/pageClient";
 import { camoxApp } from "virtual:camox/app";
 
-hydrateRuntimeWithApp(camoxApp);
+hydratePageWithApp(camoxApp);
+`;
+}
+function generateVirtualStudioClient() {
+	return `import { hydrateStudioWithApp } from "camox/_internal/studioClient";
+import { camoxApp } from "virtual:camox/app";
+
+hydrateStudioWithApp(camoxApp);
 `;
 }
 function wrapViteDevId(id) {
@@ -118,6 +130,9 @@ function wrapViteDevId(id) {
 function generateVirtualPageClientUrl() {
 	return `export default ${JSON.stringify(wrapViteDevId(RESOLVED_VIRTUAL_PAGE_CLIENT))};`;
 }
+function generateVirtualStudioClientUrl() {
+	return `export default ${JSON.stringify(wrapViteDevId(RESOLVED_VIRTUAL_STUDIO_CLIENT))};`;
+}
 function generateVirtualAppStylesheetUrl() {
 	return `import stylesheetUrl from "/src/styles.css?url";
 
@@ -130,6 +145,7 @@ import { camoxApp } from "virtual:camox/app";
 import { camoxDocument } from "virtual:camox/document";
 import appStylesheetUrl from "virtual:camox/app-stylesheet-url";
 import pageClientEntryUrl from "virtual:camox/page-client-url";
+import studioClientEntryUrl from "virtual:camox/studio-client-url";
 import { renderPage } from "virtual:camox/page-server";
 import { renderStudio } from "virtual:camox/studio-server";
 
@@ -137,7 +153,8 @@ export async function handleCamoxRequest(request) {
   return handleRuntimeRequest(request, {
     apiUrl: __CAMOX_API_URL__,
     authenticationUrl: __CAMOX_AUTHENTICATION_URL__,
-    clientEntryUrl: pageClientEntryUrl,
+    pageClientEntryUrl,
+    studioClientEntryUrl,
     environmentName: __CAMOX_ENVIRONMENT_NAME__,
     getCamoxApp: async () => camoxApp,
     getDocument: async () => camoxDocument,
@@ -228,6 +245,8 @@ function resolveRuntimeDevId(id, importer) {
 	if (id === VIRTUAL_STUDIO_SERVER) return RESOLVED_VIRTUAL_STUDIO_SERVER;
 	if (id === VIRTUAL_PAGE_CLIENT) return RESOLVED_VIRTUAL_PAGE_CLIENT;
 	if (id === VIRTUAL_PAGE_CLIENT_URL) return RESOLVED_VIRTUAL_PAGE_CLIENT_URL;
+	if (id === VIRTUAL_STUDIO_CLIENT) return RESOLVED_VIRTUAL_STUDIO_CLIENT;
+	if (id === VIRTUAL_STUDIO_CLIENT_URL) return RESOLVED_VIRTUAL_STUDIO_CLIENT_URL;
 	if (id === VIRTUAL_APP_STYLESHEET_URL) return RESOLVED_VIRTUAL_APP_STYLESHEET_URL;
 	if (id === VIRTUAL_STUDIO_CSS) return RESOLVED_VIRTUAL_STUDIO_CSS;
 	if (id === VIRTUAL_OVERLAY_CSS) return RESOLVED_VIRTUAL_OVERLAY_CSS;
@@ -241,6 +260,8 @@ function loadRuntimeDevModule(id, options = {}) {
 	if (id === RESOLVED_VIRTUAL_STUDIO_SERVER) return generateVirtualStudioServer();
 	if (id === RESOLVED_VIRTUAL_PAGE_CLIENT) return generateVirtualPageClient();
 	if (id === RESOLVED_VIRTUAL_PAGE_CLIENT_URL) return generateVirtualPageClientUrl();
+	if (id === RESOLVED_VIRTUAL_STUDIO_CLIENT) return generateVirtualStudioClient();
+	if (id === RESOLVED_VIRTUAL_STUDIO_CLIENT_URL) return generateVirtualStudioClientUrl();
 	if (id === RESOLVED_VIRTUAL_APP_STYLESHEET_URL) return generateVirtualAppStylesheetUrl();
 	if (id === RESOLVED_VIRTUAL_STUDIO_CSS) return `export default "/@fs/${resolve(sdkRoot, "dist/studio.css")}";`;
 	if (id === RESOLVED_VIRTUAL_OVERLAY_CSS) return `export default ${JSON.stringify(readFileSync(resolve(sdkRoot, "dist/studio-overlays.css"), "utf-8"))};`;

package/dist/features/vite/vite.js

@@ -19,6 +19,8 @@ const VIRTUAL_OVERLAY_CSS = "virtual:camox-overlay-css";
 const RESOLVED_VIRTUAL_OVERLAY_CSS = "\0" + VIRTUAL_OVERLAY_CSS;
 const VIRTUAL_PAGE_CLIENT = "virtual:camox/page-client";
 const RESOLVED_VIRTUAL_PAGE_CLIENT_URL = "\0virtual:camox/page-client-url";
+const VIRTUAL_STUDIO_CLIENT = "virtual:camox/studio-client";
+const RESOLVED_VIRTUAL_STUDIO_CLIENT_URL = "\0virtual:camox/studio-client-url";
 const PRODUCTION_API_URL = "https://api.camox.ai";
 /** Authentication URL to use for Camox authentication (production Camox Dashboard) */
 const DEFAULT_AUTHENTICATION_URL = "https://app.camox.ai";
@@ -97,6 +99,7 @@ function camox(options) {
 				return `export default ${JSON.stringify(css)};`;
 			}
 			if (id === RESOLVED_VIRTUAL_PAGE_CLIENT_URL && isBuild) return "export default \"/_chunks/camox-page-client.mjs\";";
+			if (id === RESOLVED_VIRTUAL_STUDIO_CLIENT_URL && isBuild) return "export default \"/_chunks/camox-studio-client.mjs\";";
 			return loadRuntimeDevModule(id, { runtimeBasePath });
 		},
 		nitro: { setup(nitro) {
@@ -121,7 +124,10 @@ function camox(options) {
 					__CAMOX_PROJECT_SLUG__: JSON.stringify(options.projectSlug)
 				},
 				environments: { client: { build: { rollupOptions: {
-					input: { "camox-page-client": VIRTUAL_PAGE_CLIENT },
+					input: {
+						"camox-page-client": VIRTUAL_PAGE_CLIENT,
+						"camox-studio-client": VIRTUAL_STUDIO_CLIENT
+					},
 					output: {
 						assetFileNames: "assets/[name]-[hash][extname]",
 						chunkFileNames: "_chunks/[name]-[hash].mjs",

package/dist/lib/normalized-data.js

@@ -1,4 +1,4 @@
-import { blockQueries } from "./queries.js";
+import { viewBlockQueries } from "./view-queries.js";
 import { c } from "react/compiler-runtime";
 import { useQueries } from "@tanstack/react-query";
 import * as React from "react";
@@ -11,9 +11,9 @@ const NormalizedDataContext = React.createContext({
 });
 const NormalizedDataProvider = (t0) => {
 	const $ = c(13);
-	if ($[0] !== "08bed558b0a428c072e8a0761d5efbb6bd49b29518144153bf64ed61004f9dda") {
+	if ($[0] !== "9680f54d18eb424030716d5c43a9901462a27cc0d8227fb40b5d6abb9b464a89") {
 		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "08bed558b0a428c072e8a0761d5efbb6bd49b29518144153bf64ed61004f9dda";
+		$[0] = "9680f54d18eb424030716d5c43a9901462a27cc0d8227fb40b5d6abb9b464a89";
 	}
 	const { files, repeatableItems, children } = t0;
 	let t1;
@@ -74,9 +74,9 @@ function useStableArray(next) {
 }
 function usePageBlocks(pageStructure, t0) {
 	const $ = c(37);
-	if ($[0] !== "08bed558b0a428c072e8a0761d5efbb6bd49b29518144153bf64ed61004f9dda") {
+	if ($[0] !== "9680f54d18eb424030716d5c43a9901462a27cc0d8227fb40b5d6abb9b464a89") {
 		for (let $i = 0; $i < 37; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "08bed558b0a428c072e8a0761d5efbb6bd49b29518144153bf64ed61004f9dda";
+		$[0] = "9680f54d18eb424030716d5c43a9901462a27cc0d8227fb40b5d6abb9b464a89";
 	}
 	const source = t0 === void 0 ? "draft" : t0;
 	const blockIds = pageStructure.page.blockIds;
@@ -97,7 +97,7 @@ function usePageBlocks(pageStructure, t0) {
 	const allIds = t1;
 	let t2;
 	if ($[5] !== allIds || $[6] !== source) {
-		t2 = { queries: allIds.map((id) => blockQueries.get(id, source)) };
+		t2 = { queries: allIds.map((id) => viewBlockQueries.get(id, source)) };
 		$[5] = allIds;
 		$[6] = source;
 		$[7] = t2;