camox 0.51.0 → 0.52.1

package/dist/features/preview/CamoxPreview.js

@@ -4,31 +4,28 @@ import { parseLocalePath } from "../../lib/locale-path.js";
 import { useCurrentDraftId, withoutDraft } from "../../lib/draft-scope.js";
 import { useViewLocale } from "../../lib/view-locale-context.js";
 import { useLocation, useNavigate } from "../navigation/navigation.js";
-import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
-import { NormalizedDataProvider, usePageBlocks } from "../../lib/normalized-data.js";
 import { reads, useRead, useStudioCache } from "../../lib/studio-reads.js";
-import { BlockErrorBoundary } from "./components/BlockErrorBoundary.js";
-import { curatedLayoutContext } from "../../core/layoutContext.js";
 import { CollectionItemSheetProvider } from "../content/CollectionItemSheetContext.js";
 import { cn } from "../../lib/utils.js";
 import { ContentCollectionItemSheet } from "../content/ContentCollection.js";
 import { usePageDestinations } from "../../hooks/use-page-destinations.js";
 import { useLocalePath, useLocalizedPath } from "../../lib/view-locale.js";
+import { CanvasLoadingScreen } from "../canvas/CanvasLoadingScreen.js";
 import { canvasStore } from "../canvas/canvasStore.js";
 import { SHOW_WHOLE_CANVAS_SHORTCUT, TOGGLE_CANVAS_SHORTCUT } from "./previewConstants.js";
 import { CanvasSidebarSkeleton } from "../canvas/sidebar/CanvasSidebarSkeleton.js";
-import { DerivedPageContent } from "../page/DerivedPageContent.js";
 import { takeShowCanvasRequest } from "../provider/signInShortcut.js";
+import { previewStore, selectIsCanvasShown } from "./previewStore.js";
+import { PreviewEditingOwnerContext } from "./previewSelection.js";
+import { RendererFramesProvider, RendererSlot, useRendererHost, useRendererStatus } from "../renderer/RendererFrames.js";
 import { STUDIO_CANVAS_PATH } from "../studio/routes.js";
 import { studioStore } from "../studio/studioStore.js";
-import { previewStore, selectIsCanvasShown } from "./previewStore.js";
 import { AddBlockSheet } from "./components/AddBlockSheet.js";
 import { CanvasPreview, prefetchCanvas } from "./components/CanvasPreview.js";
 import { CreatePageModal } from "./components/CreatePageModal.js";
-import { PreviewEditingOwnerContext } from "./previewSelection.js";
 import { PageRecordContext, getPageRecord, useDerivedPageResult, useFollowPageRecord } from "./pageRecord.js";
 import { PreviewPanel } from "./components/PreviewPanel.js";
-import { RemovedBlockPlaceholder } from "./components/RemovedBlockPlaceholder.js";
+import { PAGE_LOADING_LABEL } from "./components/StudioEditingFallback.js";
 import { usePreviewViewportActions } from "./usePreviewViewportActions.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
@@ -69,232 +66,6 @@ function usePreviewedPage() {
 	} else t0 = $[2];
 	return useRead(t0);
 }
-const BlockRenderer = (t0) => {
-	const $ = c(28);
-	const { blockId, mode, showAddBlockTop, showAddBlockBottom } = t0;
-	let t1;
-	if ($[0] !== blockId) {
-		t1 = reads.blockBundle(blockId);
-		$[0] = blockId;
-		$[1] = t1;
-	} else t1 = $[1];
-	const data = useRead(t1);
-	const camoxApp = useCamoxApp();
-	let t2;
-	if ($[2] !== camoxApp || $[3] !== data.block.type) {
-		t2 = camoxApp.getBlockById(data.block.type);
-		$[2] = camoxApp;
-		$[3] = data.block.type;
-		$[4] = t2;
-	} else t2 = $[4];
-	const blockDef = t2;
-	if (!blockDef) {
-		let t3;
-		if ($[5] !== blockId || $[6] !== data.block.type || $[7] !== mode) {
-			t3 = /* @__PURE__ */ jsx(RemovedBlockPlaceholder, {
-				blockId,
-				type: data.block.type,
-				mode
-			});
-			$[5] = blockId;
-			$[6] = data.block.type;
-			$[7] = mode;
-			$[8] = t3;
-		} else t3 = $[8];
-		return t3;
-	}
-	const t3 = data.files;
-	const t4 = data.repeatableItems;
-	let t5;
-	if ($[9] !== data.block) {
-		t5 = [data.block];
-		$[9] = data.block;
-		$[10] = t5;
-	} else t5 = $[10];
-	const T0 = blockDef._internal.Component;
-	const t6 = data.block.id;
-	const t7 = data.block.type;
-	const t8 = data.block.content;
-	const t9 = data.block.settings;
-	const t10 = String(data.block.position);
-	let t11;
-	if ($[11] !== data.block.id || $[12] !== data.block.type || $[13] !== t10 || $[14] !== t8 || $[15] !== t9) {
-		t11 = {
-			_id: t6,
-			type: t7,
-			content: t8,
-			settings: t9,
-			position: t10
-		};
-		$[11] = data.block.id;
-		$[12] = data.block.type;
-		$[13] = t10;
-		$[14] = t8;
-		$[15] = t9;
-		$[16] = t11;
-	} else t11 = $[16];
-	let t12;
-	if ($[17] !== blockDef._internal.Component || $[18] !== mode || $[19] !== showAddBlockBottom || $[20] !== showAddBlockTop || $[21] !== t11) {
-		t12 = /* @__PURE__ */ jsx(T0, {
-			blockData: t11,
-			mode,
-			showAddBlockTop,
-			showAddBlockBottom
-		});
-		$[17] = blockDef._internal.Component;
-		$[18] = mode;
-		$[19] = showAddBlockBottom;
-		$[20] = showAddBlockTop;
-		$[21] = t11;
-		$[22] = t12;
-	} else t12 = $[22];
-	let t13;
-	if ($[23] !== data.files || $[24] !== data.repeatableItems || $[25] !== t12 || $[26] !== t5) {
-		t13 = /* @__PURE__ */ jsx(NormalizedDataProvider, {
-			files: t3,
-			repeatableItems: t4,
-			blocks: t5,
-			children: t12
-		});
-		$[23] = data.files;
-		$[24] = data.repeatableItems;
-		$[25] = t12;
-		$[26] = t5;
-		$[27] = t13;
-	} else t13 = $[27];
-	return t13;
-};
-const PageContent = () => {
-	const $ = c(34);
-	const pageData = usePreviewedPage();
-	const { pageBlocks, beforeBlocks, afterBlocks, layoutFiles, layoutItems } = usePageBlocks(pageData);
-	const camoxApp = useCamoxApp();
-	const { locale } = useViewLocale();
-	let layout;
-	let layoutBlocksMap;
-	let t0;
-	if ($[0] !== afterBlocks || $[1] !== beforeBlocks || $[2] !== camoxApp || $[3] !== pageBlocks || $[4] !== pageData) {
-		layout = pageData.layout ? camoxApp.getLayoutById(pageData.layout.layoutId) : void 0;
-		let t1;
-		bb0: {
-			if (!pageData.layout) {
-				t1 = null;
-				break bb0;
-			}
-			let blocks;
-			if ($[8] !== afterBlocks || $[9] !== beforeBlocks) {
-				const allLayoutBlocks = [...beforeBlocks, ...afterBlocks];
-				blocks = {};
-				for (const block of allLayoutBlocks) blocks[block.type] = {
-					_id: block.id,
-					type: block.type,
-					content: block.content,
-					settings: block.settings,
-					position: String(block.position)
-				};
-				$[8] = afterBlocks;
-				$[9] = beforeBlocks;
-				$[10] = blocks;
-			} else blocks = $[10];
-			t1 = blocks;
-		}
-		layoutBlocksMap = t1;
-		t0 = pageBlocks.map((blockData, index) => /* @__PURE__ */ jsx(BlockErrorBoundary, {
-			blockId: blockData.id,
-			blockType: blockData.type,
-			children: /* @__PURE__ */ jsx(BlockRenderer, {
-				blockId: blockData.id,
-				mode: "site",
-				showAddBlockTop: index === 0 ? layout?._internal.blockDefinitions.some(_temp2) ?? false : true,
-				showAddBlockBottom: true
-			})
-		}, blockData.id));
-		$[0] = afterBlocks;
-		$[1] = beforeBlocks;
-		$[2] = camoxApp;
-		$[3] = pageBlocks;
-		$[4] = pageData;
-		$[5] = layout;
-		$[6] = layoutBlocksMap;
-		$[7] = t0;
-	} else {
-		layout = $[5];
-		layoutBlocksMap = $[6];
-		t0 = $[7];
-	}
-	let t1;
-	if ($[11] !== t0) {
-		t1 = /* @__PURE__ */ jsx(Fragment, { children: t0 });
-		$[11] = t0;
-		$[12] = t1;
-	} else t1 = $[12];
-	const pageBlocksContent = t1;
-	if (layout && layoutBlocksMap) {
-		const ToReact = layout._internal.toReact;
-		let t2;
-		if ($[13] !== afterBlocks || $[14] !== beforeBlocks) {
-			t2 = [...beforeBlocks, ...afterBlocks];
-			$[13] = afterBlocks;
-			$[14] = beforeBlocks;
-			$[15] = t2;
-		} else t2 = $[15];
-		const T0 = layout._internal.Provider;
-		let t3;
-		if ($[16] !== locale || $[17] !== pageData) {
-			t3 = curatedLayoutContext(pageData, locale);
-			$[16] = locale;
-			$[17] = pageData;
-			$[18] = t3;
-		} else t3 = $[18];
-		let t4;
-		if ($[19] !== ToReact || $[20] !== pageBlocksContent || $[21] !== t3) {
-			t4 = /* @__PURE__ */ jsx(ToReact, {
-				...t3,
-				children: pageBlocksContent
-			});
-			$[19] = ToReact;
-			$[20] = pageBlocksContent;
-			$[21] = t3;
-			$[22] = t4;
-		} else t4 = $[22];
-		let t5;
-		if ($[23] !== layout._internal.Provider || $[24] !== layoutBlocksMap || $[25] !== t4) {
-			t5 = /* @__PURE__ */ jsx(T0, {
-				layoutBlocks: layoutBlocksMap,
-				children: t4
-			});
-			$[23] = layout._internal.Provider;
-			$[24] = layoutBlocksMap;
-			$[25] = t4;
-			$[26] = t5;
-		} else t5 = $[26];
-		let t6;
-		if ($[27] !== layoutFiles || $[28] !== layoutItems || $[29] !== t2 || $[30] !== t5) {
-			t6 = /* @__PURE__ */ jsx(NormalizedDataProvider, {
-				files: layoutFiles,
-				repeatableItems: layoutItems,
-				blocks: t2,
-				children: t5
-			});
-			$[27] = layoutFiles;
-			$[28] = layoutItems;
-			$[29] = t2;
-			$[30] = t5;
-			$[31] = t6;
-		} else t6 = $[31];
-		return t6;
-	}
-	let t2;
-	if ($[32] !== pageBlocksContent) {
-		t2 = /* @__PURE__ */ jsx("main", {
-			className: "flex min-h-screen flex-col",
-			children: pageBlocksContent
-		});
-		$[32] = pageBlocksContent;
-		$[33] = t2;
-	} else t2 = $[33];
-	return t2;
-};
 /**
 * The read of the page the Preview shows: a curated page's structure, or a layout page's layout. A
 * Canvas-only location, opened first, has no page to show.
@@ -328,7 +99,7 @@ function useRefreshMemberRead(read) {
 	if ($[4] !== isAuthenticated || $[5] !== read || $[6] !== studioCache) {
 		t1 = () => {
 			if (!isAuthenticated || !read) return;
-			studioCache.reload(read).catch(_temp3);
+			studioCache.reload(read).catch(_temp2);
 		};
 		$[4] = isAuthenticated;
 		$[5] = read;
@@ -351,7 +122,7 @@ function useRefreshMemberRead(read) {
 	} else t3 = $[12];
 	React.useEffect(t2, t3);
 }
-function _temp3() {}
+function _temp2() {}
 /**
 * The page the Preview shows: the current one, or on a Canvas-only location,
 * which has none, the last one. The Canvas keeps showing that page in its slot
@@ -412,10 +183,13 @@ function useRememberWebsiteLocation(location) {
 	}
 	React.useEffect(t0, t1);
 }
+/**
+* The signed-in Website Section. The studio never renders the page itself: the renderer frame,
+* which runs the shown draft's code, renders it into the Preview's slot.
+*/
 const CamoxPreview = (t0) => {
-	const $ = c(36);
-	const { children, runtimeBasePath, derived, canvasOnly } = t0;
-	const camoxApp = useCamoxApp();
+	const $ = c(34);
+	const { runtimeBasePath, derived, canvasOnly } = t0;
 	const location = useLocation();
 	useRememberWebsiteLocation(location);
 	const shown = useShownPage(location, derived, !!canvasOnly);
@@ -484,54 +258,57 @@ const CamoxPreview = (t0) => {
 	useFollowPageRecord(t9);
 	const pageData = data && "page" in data ? data : void 0;
 	const layout = data && !("page" in data) ? data : void 0;
-	const t10 = shown?.location;
-	let t11;
-	if ($[19] !== camoxApp || $[20] !== children || $[21] !== derivedResult || $[22] !== layout || $[23] !== shown || $[24] !== shownDerived) {
-		t11 = shownDerived && layout ? /* @__PURE__ */ jsx(DerivedPageContent, {
-			camoxApp,
-			derived: {
-				...shownDerived,
-				layout,
-				result: derivedResult
-			}
-		}) : shown ? children : null;
-		$[19] = camoxApp;
-		$[20] = children;
-		$[21] = derivedResult;
-		$[22] = layout;
-		$[23] = shown;
-		$[24] = shownDerived;
-		$[25] = t11;
-	} else t11 = $[25];
+	const [pageShown, setPageShown] = React.useState(false);
+	let t10;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = () => setPageShown(true);
+		$[19] = t10;
+	} else t10 = $[19];
+	const showPage = t10;
+	const t11 = shown?.location;
 	let t12;
-	if ($[26] !== canvasOnly || $[27] !== layout || $[28] !== pageData || $[29] !== runtimeBasePath || $[30] !== t10 || $[31] !== t11) {
-		t12 = /* @__PURE__ */ jsx(PreviewShell, {
+	if ($[20] !== pathname || $[21] !== shownDerived?.layoutId) {
+		t12 = pathname !== void 0 && /* @__PURE__ */ jsx(RendererSlot, {
+			pathname,
+			derivedLayoutId: shownDerived?.layoutId,
+			onRendered: showPage,
+			onFailed: showPage
+		});
+		$[20] = pathname;
+		$[21] = shownDerived?.layoutId;
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== canvasOnly || $[24] !== layout || $[25] !== pageData || $[26] !== pageShown || $[27] !== runtimeBasePath || $[28] !== t11 || $[29] !== t12) {
+		t13 = /* @__PURE__ */ jsx(PreviewShell, {
 			pageData,
 			derivedLayout: layout,
-			pageLocation: t10,
+			pageLocation: t11,
 			canvasOnly,
 			runtimeBasePath,
-			children: t11
+			pageShown,
+			children: t12
 		});
-		$[26] = canvasOnly;
-		$[27] = layout;
-		$[28] = pageData;
-		$[29] = runtimeBasePath;
-		$[30] = t10;
-		$[31] = t11;
-		$[32] = t12;
-	} else t12 = $[32];
-	let t13;
-	if ($[33] !== derivedResult || $[34] !== t12) {
-		t13 = /* @__PURE__ */ jsx(PageRecordContext, {
+		$[23] = canvasOnly;
+		$[24] = layout;
+		$[25] = pageData;
+		$[26] = pageShown;
+		$[27] = runtimeBasePath;
+		$[28] = t11;
+		$[29] = t12;
+		$[30] = t13;
+	} else t13 = $[30];
+	let t14;
+	if ($[31] !== derivedResult || $[32] !== t13) {
+		t14 = /* @__PURE__ */ jsx(PageRecordContext, {
 			value: derivedResult,
-			children: t12
+			children: t13
 		});
-		$[33] = derivedResult;
-		$[34] = t12;
-		$[35] = t13;
-	} else t13 = $[35];
-	return t13;
+		$[31] = derivedResult;
+		$[32] = t13;
+		$[33] = t14;
+	} else t14 = $[33];
+	return t14;
 };
 /**
 * A Canvas-only location only exists on the Canvas. Opening one
@@ -632,9 +409,10 @@ function usePrefetchCanvas(enabled, projectUuid) {
 }
 /** Studio chrome is shared; only curated previews require a Camox page record. */
 const PreviewShell = (t0) => {
-	const $ = c(53);
-	const { children, pageData, derivedLayout, pageLocation, canvasOnly, runtimeBasePath: t1 } = t0;
+	const $ = c(62);
+	const { children, pageData, derivedLayout, pageLocation, canvasOnly, runtimeBasePath: t1, pageShown: t2 } = t0;
 	const runtimeBasePath = t1 === void 0 ? "" : t1;
+	const pageShown = t2 === void 0 ? true : t2;
 	const isAuthenticated = useIsAuthenticated();
 	const projectUuid = useProjectUuid();
 	const isMobileStudio = useIsMobileStudio();
@@ -645,75 +423,75 @@ const PreviewShell = (t0) => {
 	const { pathname } = useLocation();
 	const pageId = canvasOnly ? void 0 : pageData?.page.id;
 	const layoutId = canvasOnly ? void 0 : derivedLayout?.layoutId;
-	let t2;
+	let t3;
 	bb0: {
 		if (pageId != null) {
-			let t3;
+			let t4;
 			if ($[0] !== pageId) {
-				t3 = {
+				t4 = {
 					kind: "page",
 					pageId
 				};
 				$[0] = pageId;
-				$[1] = t3;
-			} else t3 = $[1];
-			t2 = t3;
+				$[1] = t4;
+			} else t4 = $[1];
+			t3 = t4;
 			break bb0;
 		}
 		if (layoutId != null) {
-			let t3;
+			let t4;
 			if ($[2] !== layoutId) {
-				t3 = {
+				t4 = {
 					kind: "layout",
 					layoutId
 				};
 				$[2] = layoutId;
-				$[3] = t3;
-			} else t3 = $[3];
-			t2 = t3;
+				$[3] = t4;
+			} else t4 = $[3];
+			t3 = t4;
 			break bb0;
 		}
-		t2 = null;
+		t3 = null;
 	}
-	const editingOwner = t2;
-	let t3;
+	const editingOwner = t3;
 	let t4;
+	let t5;
 	if ($[4] !== isAuthenticated || $[5] !== isMobileStudio) {
-		t3 = () => {
+		t4 = () => {
 			if (isAuthenticated && takeShowCanvasRequest() && !isMobileStudio) previewStore.send({ type: "showCanvas" });
 		};
-		t4 = [isAuthenticated, isMobileStudio];
+		t5 = [isAuthenticated, isMobileStudio];
 		$[4] = isAuthenticated;
 		$[5] = isMobileStudio;
-		$[6] = t3;
-		$[7] = t4;
+		$[6] = t4;
+		$[7] = t5;
 	} else {
-		t3 = $[6];
-		t4 = $[7];
+		t4 = $[6];
+		t5 = $[7];
 	}
-	React.useEffect(t3, t4);
-	let t5;
+	React.useEffect(t4, t5);
 	let t6;
+	let t7;
 	if ($[8] !== isMobileStudio) {
-		t5 = () => {
+		t6 = () => {
 			if (!isMobileStudio) return;
 			previewStore.send({ type: "hideCanvas" });
 			previewStore.send({ type: "closeAddBlockSheet" });
 		};
-		t6 = [isMobileStudio];
+		t7 = [isMobileStudio];
 		$[8] = isMobileStudio;
-		$[9] = t5;
-		$[10] = t6;
+		$[9] = t6;
+		$[10] = t7;
 	} else {
-		t5 = $[9];
-		t6 = $[10];
+		t6 = $[9];
+		t7 = $[10];
 	}
-	React.useEffect(t5, t6);
+	React.useEffect(t6, t7);
 	useCanvasOnlyLocation(!!canvasOnly && isAuthenticated, isCanvasShown, isMobileStudio, pageLocation);
-	let t7;
 	let t8;
+	let t9;
 	if ($[11] !== isAuthenticated || $[12] !== isCanvasShown || $[13] !== isMobileStudio) {
-		t7 = () => {
+		t8 = () => {
 			const actions = [
 				{
 					id: "hide-canvas",
@@ -726,7 +504,7 @@ const PreviewShell = (t0) => {
 					],
 					groupLabel: "Website",
 					checkIfAvailable: () => isAuthenticated && isCanvasShown,
-					execute: _temp4,
+					execute: _temp3,
 					shortcut: TOGGLE_CANVAS_SHORTCUT
 				},
 				{
@@ -739,7 +517,7 @@ const PreviewShell = (t0) => {
 					],
 					groupLabel: "Website",
 					checkIfAvailable: () => isAuthenticated && !isCanvasShown && !isMobileStudio,
-					execute: _temp5,
+					execute: _temp4,
 					shortcut: TOGGLE_CANVAS_SHORTCUT
 				},
 				{
@@ -747,8 +525,8 @@ const PreviewShell = (t0) => {
 					label: "Clear selection",
 					aliases: ["Deselect", "Unselect"],
 					groupLabel: "Website",
-					checkIfAvailable: _temp6,
-					execute: _temp7,
+					checkIfAvailable: _temp5,
+					execute: _temp6,
 					shortcut: "Escape"
 				}
 			];
@@ -759,11 +537,11 @@ const PreviewShell = (t0) => {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp8)
+					ids: actions.map(_temp7)
 				});
 			};
 		};
-		t8 = [
+		t9 = [
 			isCanvasShown,
 			isAuthenticated,
 			isMobileStudio
@@ -771,133 +549,173 @@ const PreviewShell = (t0) => {
 		$[11] = isAuthenticated;
 		$[12] = isCanvasShown;
 		$[13] = isMobileStudio;
-		$[14] = t7;
-		$[15] = t8;
+		$[14] = t8;
+		$[15] = t9;
 	} else {
-		t7 = $[14];
-		t8 = $[15];
+		t8 = $[14];
+		t9 = $[15];
 	}
-	React.useEffect(t7, t8);
+	React.useEffect(t8, t9);
 	if (!isAuthenticated) {
-		let t9;
+		let t10;
 		if ($[16] !== children) {
-			t9 = /* @__PURE__ */ jsx(Fragment, { children });
+			t10 = /* @__PURE__ */ jsx(Fragment, { children });
 			$[16] = children;
-			$[17] = t9;
-		} else t9 = $[17];
-		return t9;
+			$[17] = t10;
+		} else t10 = $[17];
+		return t10;
 	}
-	const t9 = !isCanvasShown && "bg-black";
-	let t10;
-	if ($[18] !== t9) {
-		t10 = cn("bg-background relative flex h-full min-h-0 flex-1 flex-col overflow-hidden", t9);
-		$[18] = t9;
-		$[19] = t10;
-	} else t10 = $[19];
-	const t11 = pageLocation?.pathname;
-	const t12 = !canvasOnly;
-	const t13 = !!derivedLayout;
-	let t14;
-	if ($[20] !== t12 || $[21] !== t13) {
-		t14 = /* @__PURE__ */ jsx(CanvasSidebarSkeleton, {
-			page: t12,
-			layoutPage: t13
+	const t10 = !isCanvasShown && "bg-black";
+	let t11;
+	if ($[18] !== t10) {
+		t11 = cn("bg-background relative flex h-full min-h-0 flex-1 flex-col overflow-hidden", t10);
+		$[18] = t10;
+		$[19] = t11;
+	} else t11 = $[19];
+	const t12 = pageLocation?.pathname;
+	const t13 = !canvasOnly;
+	const t14 = !!derivedLayout;
+	let t15;
+	if ($[20] !== t13 || $[21] !== t14) {
+		t15 = /* @__PURE__ */ jsx(CanvasSidebarSkeleton, {
+			page: t13,
+			layoutPage: t14
 		});
-		$[20] = t12;
-		$[21] = t13;
-		$[22] = t14;
-	} else t14 = $[22];
-	const t15 = !isCanvasEnabled;
-	const t16 = pageData?.page;
-	const t17 = derivedLayout?.layoutId;
-	const t18 = pageData?.projectName;
-	let t19;
-	if ($[23] !== children || $[24] !== isMobileStudio || $[25] !== pageLocation || $[26] !== t15 || $[27] !== t16 || $[28] !== t17 || $[29] !== t18) {
-		t19 = /* @__PURE__ */ jsx("div", {
-			className: "flex min-h-0 flex-1 flex-row items-stretch",
-			children: /* @__PURE__ */ jsx(PreviewPanel, {
-				active: t15,
-				isMobileExperience: isMobileStudio,
-				page: t16,
-				layoutId: t17,
-				pageLocation,
-				projectName: t18,
-				children
-			})
+		$[20] = t13;
+		$[21] = t14;
+		$[22] = t15;
+	} else t15 = $[22];
+	const t16 = !isCanvasEnabled;
+	const t17 = pageData?.page;
+	const t18 = derivedLayout?.layoutId;
+	const t19 = pageData?.projectName;
+	let t20;
+	if ($[23] !== children || $[24] !== isMobileStudio || $[25] !== pageLocation || $[26] !== t16 || $[27] !== t17 || $[28] !== t18 || $[29] !== t19) {
+		t20 = /* @__PURE__ */ jsx(PreviewPanel, {
+			active: t16,
+			isMobileExperience: isMobileStudio,
+			page: t17,
+			layoutId: t18,
+			pageLocation,
+			projectName: t19,
+			children
 		});
 		$[23] = children;
 		$[24] = isMobileStudio;
 		$[25] = pageLocation;
-		$[26] = t15;
-		$[27] = t16;
-		$[28] = t17;
-		$[29] = t18;
-		$[30] = t19;
-	} else t19 = $[30];
-	let t20;
-	if ($[31] !== isCanvasEnabled || $[32] !== pathname || $[33] !== runtimeBasePath || $[34] !== t11 || $[35] !== t14 || $[36] !== t19) {
-		t20 = /* @__PURE__ */ jsx(CanvasPreview, {
-			enabled: isCanvasEnabled,
-			pathname,
-			pagePathname: t11,
-			runtimeBasePath,
-			placeholder: t14,
-			children: t19
-		});
-		$[31] = isCanvasEnabled;
-		$[32] = pathname;
-		$[33] = runtimeBasePath;
-		$[34] = t11;
-		$[35] = t14;
-		$[36] = t19;
-		$[37] = t20;
-	} else t20 = $[37];
+		$[26] = t16;
+		$[27] = t17;
+		$[28] = t18;
+		$[29] = t19;
+		$[30] = t20;
+	} else t20 = $[30];
 	let t21;
-	if ($[38] !== isCanvasEnabled || $[39] !== pageId) {
-		t21 = !isCanvasEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), pageId != null && /* @__PURE__ */ jsx(AddBlockSheet, {})] });
-		$[38] = isCanvasEnabled;
-		$[39] = pageId;
-		$[40] = t21;
-	} else t21 = $[40];
+	if ($[31] !== isCanvasEnabled || $[32] !== pageShown) {
+		t21 = !pageShown && !isCanvasEnabled && /* @__PURE__ */ jsx(PreviewPageLoading, {});
+		$[31] = isCanvasEnabled;
+		$[32] = pageShown;
+		$[33] = t21;
+	} else t21 = $[33];
 	let t22;
-	if ($[41] !== t10 || $[42] !== t20 || $[43] !== t21) {
+	if ($[34] !== t20 || $[35] !== t21) {
 		t22 = /* @__PURE__ */ jsxs("div", {
-			className: t10,
+			className: "relative flex min-h-0 flex-1 flex-row items-stretch",
 			children: [t20, t21]
 		});
-		$[41] = t10;
-		$[42] = t20;
-		$[43] = t21;
-		$[44] = t22;
-	} else t22 = $[44];
+		$[34] = t20;
+		$[35] = t21;
+		$[36] = t22;
+	} else t22 = $[36];
 	let t23;
-	if ($[45] !== editingOwner || $[46] !== t22) {
-		t23 = /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
-			value: editingOwner,
+	if ($[37] !== isCanvasEnabled || $[38] !== pathname || $[39] !== runtimeBasePath || $[40] !== t12 || $[41] !== t15 || $[42] !== t22) {
+		t23 = /* @__PURE__ */ jsx(CanvasPreview, {
+			enabled: isCanvasEnabled,
+			pathname,
+			pagePathname: t12,
+			runtimeBasePath,
+			placeholder: t15,
 			children: t22
 		});
-		$[45] = editingOwner;
-		$[46] = t22;
-		$[47] = t23;
-	} else t23 = $[47];
+		$[37] = isCanvasEnabled;
+		$[38] = pathname;
+		$[39] = runtimeBasePath;
+		$[40] = t12;
+		$[41] = t15;
+		$[42] = t22;
+		$[43] = t23;
+	} else t23 = $[43];
 	let t24;
-	if ($[48] !== projectUuid) {
-		t24 = /* @__PURE__ */ jsx(ContentCollectionItemSheet, { projectUuid });
-		$[48] = projectUuid;
-		$[49] = t24;
-	} else t24 = $[49];
+	if ($[44] !== isCanvasEnabled || $[45] !== pageId) {
+		t24 = !isCanvasEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), pageId != null && /* @__PURE__ */ jsx(AddBlockSheet, {})] });
+		$[44] = isCanvasEnabled;
+		$[45] = pageId;
+		$[46] = t24;
+	} else t24 = $[46];
 	let t25;
-	if ($[50] !== t23 || $[51] !== t24) {
-		t25 = /* @__PURE__ */ jsxs(CollectionItemSheetProvider, {
-			onRouteTargetClose: _temp9,
+	if ($[47] !== t11 || $[48] !== t23 || $[49] !== t24) {
+		t25 = /* @__PURE__ */ jsxs("div", {
+			className: t11,
 			children: [t23, t24]
 		});
-		$[50] = t23;
-		$[51] = t24;
+		$[47] = t11;
+		$[48] = t23;
+		$[49] = t24;
+		$[50] = t25;
+	} else t25 = $[50];
+	let t26;
+	if ($[51] !== editingOwner || $[52] !== t25) {
+		t26 = /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
+			value: editingOwner,
+			children: t25
+		});
+		$[51] = editingOwner;
 		$[52] = t25;
-	} else t25 = $[52];
-	return t25;
+		$[53] = t26;
+	} else t26 = $[53];
+	let t27;
+	if ($[54] !== projectUuid) {
+		t27 = /* @__PURE__ */ jsx(ContentCollectionItemSheet, { projectUuid });
+		$[54] = projectUuid;
+		$[55] = t27;
+	} else t27 = $[55];
+	let t28;
+	if ($[56] !== t26 || $[57] !== t27) {
+		t28 = /* @__PURE__ */ jsxs(CollectionItemSheetProvider, {
+			onRouteTargetClose: _temp8,
+			children: [t26, t27]
+		});
+		$[56] = t26;
+		$[57] = t27;
+		$[58] = t28;
+	} else t28 = $[58];
+	const website = t28;
+	let t29;
+	if ($[59] !== runtimeBasePath || $[60] !== website) {
+		t29 = /* @__PURE__ */ jsx(RendererFramesProvider, {
+			runtimeBasePath,
+			children: website
+		});
+		$[59] = runtimeBasePath;
+		$[60] = website;
+		$[61] = t29;
+	} else t29 = $[61];
+	return t29;
 };
+/**
+* Covers the Preview until the renderer frame shows its page, as the studio does before the
+* editor loads: the studio never shows a page of its own. A renderer of another SDK version
+* says, in the frame, that the preview updates.
+*/
+function PreviewPageLoading() {
+	const $ = c(1);
+	if (useRendererStatus(useRendererHost()) === "updating") return null;
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(CanvasLoadingScreen, { label: PAGE_LOADING_LABEL });
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
 /** Zooms out to the whole Canvas, from anywhere in the site or the Studio. */
 function useShowCanvasAction() {
 	const $ = c(6);
@@ -934,7 +752,7 @@ function useShowCanvasAction() {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp10)
+					ids: actions.map(_temp9)
 				});
 			};
 		};
@@ -956,7 +774,7 @@ function useShowCanvasAction() {
 	}
 	React.useEffect(t0, t1);
 }
-function _temp10(a) {
+function _temp9(a) {
 	return a.id;
 }
 function usePreviewPagesActions() {
@@ -976,8 +794,8 @@ function usePreviewPagesActions() {
 					label: "Create page",
 					aliases: ["New page", "Add page"],
 					groupLabel: "Website",
-					checkIfAvailable: _temp11,
-					execute: _temp12
+					checkIfAvailable: _temp10,
+					execute: _temp11
 				},
 				{
 					id: "edit-current-page",
@@ -1008,7 +826,7 @@ function usePreviewPagesActions() {
 					groupLabel: "Website",
 					checkIfAvailable: () => pages.length > 0,
 					hasChildren: true,
-					execute: _temp13
+					execute: _temp12
 				},
 				...pages.map((page) => ({
 					id: `go-to-page-${page.key}`,
@@ -1016,7 +834,7 @@ function usePreviewPagesActions() {
 					label: `Go to "${page.title}"`,
 					aliases: [page.fullPath],
 					groupLabel: "Website",
-					checkIfAvailable: _temp14,
+					checkIfAvailable: _temp13,
 					execute: () => navigate({ to: localized(page.fullPath) })
 				}))
 			];
@@ -1027,7 +845,7 @@ function usePreviewPagesActions() {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp15)
+					ids: actions.map(_temp14)
 				});
 			};
 		};
@@ -1049,38 +867,35 @@ function usePreviewPagesActions() {
 	}
 	React.useEffect(t0, t1);
 }
-function _temp15(a) {
+function _temp14(a) {
 	return a.id;
 }
-function _temp14() {
+function _temp13() {
 	return true;
 }
-function _temp13() {}
-function _temp12() {
+function _temp12() {}
+function _temp11() {
 	return previewStore.send({ type: "openCreatePageModal" });
 }
-function _temp11() {
+function _temp10() {
 	return true;
 }
-function _temp2(b) {
-	return b.slot === "before";
-}
-function _temp4() {
+function _temp3() {
 	return previewStore.send({ type: "hideCanvas" });
 }
-function _temp5() {
+function _temp4() {
 	return previewStore.send({ type: "showCanvas" });
 }
-function _temp6() {
+function _temp5() {
 	return true;
 }
-function _temp7() {
+function _temp6() {
 	return previewStore.send({ type: "clearSelection" });
 }
-function _temp8(a) {
+function _temp7(a) {
 	return a.id;
 }
-function _temp9() {}
+function _temp8() {}
 
 //#endregion
-export { CamoxPreview, PageContent, PreviewShell, usePreviewPagesActions, usePreviewedPage, useShowCanvasAction };
+export { CamoxPreview, PreviewShell, usePreviewPagesActions, usePreviewedPage, useShowCanvasAction };