camox 0.51.0 → 0.52.2

package/dist/features/preview/studioNotice.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { toast } from "@camox/ui/toaster";
+
+//#region src/features/preview/studioNotice.ts
+/** Shows a notice in this document's toasts. */
+function showNotice({ tone, message }) {
+	toast[tone](message);
+}
+/**
+* Where the notices of a page's blocks go. The renderer frame's document shows no toasts: it
+* hands them to the studio, which shows them.
+*/
+const StudioNoticeContext = React.createContext(null);
+/** Tells the editor something, in the studio's toasts. */
+function useStudioNotice() {
+	return React.use(StudioNoticeContext) ?? showNotice;
+}
+
+//#endregion
+export { StudioNoticeContext, showNotice, useStudioNotice };

package/dist/features/provider/AuthenticatedCamoxProvider.js

@@ -1,6 +1,7 @@
 import { AuthContext, useAuthActions } from "../../lib/auth.js";
 import { useDraftScope } from "../../lib/draft-scope.js";
 import { reads, useReadQuery, useStudioCache } from "../../lib/studio-reads.js";
+import { RevisionsContext, createRevisions } from "../../lib/revisions.js";
 import { useAdminShortcuts } from "./useAdminShortcuts.js";
 import { useApplyTheme, useThemeActions } from "../studio/useTheme.js";
 import { usePreviewPagesActions, useShowCanvasAction } from "../preview/CamoxPreview.js";
@@ -10,13 +11,13 @@ import { draftNoticeMessage } from "../studio/draftNotice.js";
 import { CommandPalette, useCommandPaletteActions } from "./components/CommandPalette.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Toaster, toast } from "@camox/ui/toaster";
 import studioCssUrl from "virtual:camox-studio-css";
 
 //#region src/features/provider/AuthenticatedCamoxProvider.tsx
 function AuthenticatedCamoxProvider(t0) {
-	const $ = c(14);
+	const $ = c(18);
 	const { children } = t0;
 	useAdminShortcuts();
 	useCommandPaletteActions();
@@ -48,49 +49,64 @@ function AuthenticatedCamoxProvider(t0) {
 		t3 = $[4];
 	}
 	React.useEffect(t2, t3);
+	const [revisions] = React.useState(createRevisions);
 	let t4;
-	if ($[5] !== draftScope) {
-		t4 = { onDraftEnded(ended) {
-			if (ended.draftId !== draftScope.current()) return;
-			draftScope.leave(ended, { notice: true });
-		} };
+	if ($[5] !== draftScope || $[6] !== revisions) {
+		let t5;
+		if ($[8] !== revisions) {
+			t5 = (revision) => revisions.announce(revision);
+			$[8] = revisions;
+			$[9] = t5;
+		} else t5 = $[9];
+		t4 = {
+			onDraftEnded(ended) {
+				if (ended.draftId !== draftScope.current()) return;
+				draftScope.leave(ended, { notice: true });
+			},
+			onRevision: t5
+		};
 		$[5] = draftScope;
-		$[6] = t4;
-	} else t4 = $[6];
+		$[6] = revisions;
+		$[7] = t4;
+	} else t4 = $[7];
 	useProjectRoom(apiUrl, project?.id, studioCache, t4);
 	const { resolvedTheme } = useApplyTheme();
 	let t5;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = /* @__PURE__ */ jsx("link", {
 			rel: "stylesheet",
 			href: studioCssUrl,
 			"data-camox-studio": true
 		});
-		$[7] = t5;
-	} else t5 = $[7];
+		$[10] = t5;
+	} else t5 = $[10];
 	let t6;
-	if ($[8] !== resolvedTheme) {
+	if ($[11] !== resolvedTheme) {
 		t6 = /* @__PURE__ */ jsx(Toaster, { theme: resolvedTheme });
-		$[8] = resolvedTheme;
-		$[9] = t6;
-	} else t6 = $[9];
+		$[11] = resolvedTheme;
+		$[12] = t6;
+	} else t6 = $[12];
 	let t7;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
 		t7 = /* @__PURE__ */ jsx(CommandPalette, {});
-		$[10] = t7;
-	} else t7 = $[10];
+		$[13] = t7;
+	} else t7 = $[13];
 	let t8;
-	if ($[11] !== children || $[12] !== t6) {
-		t8 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t5,
-			children,
-			t6,
-			t7
-		] });
-		$[11] = children;
-		$[12] = t6;
-		$[13] = t8;
-	} else t8 = $[13];
+	if ($[14] !== children || $[15] !== revisions || $[16] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(RevisionsContext, {
+			value: revisions,
+			children: [
+				t5,
+				children,
+				t6,
+				t7
+			]
+		});
+		$[14] = children;
+		$[15] = revisions;
+		$[16] = t6;
+		$[17] = t8;
+	} else t8 = $[17];
 	return t8;
 }
 function _temp(notice) {

package/dist/features/renderer/RendererApp.js

@@ -0,0 +1,542 @@
+import { ViewLocaleContext } from "../../lib/view-locale-context.js";
+import { NavigationProvider } from "../navigation/navigation.js";
+import { reads, useRead } from "../../lib/studio-reads.js";
+import { ArtifactStudioContext, ArtifactsRunContext } from "../../core/hooks/useArtifactHost.js";
+import { EditableSurfaceContext } from "../../core/hooks/useIsEditable.js";
+import { CanvasWorkspaceContext } from "../canvas/canvasZoom.js";
+import { PreviewEditingOwnerContext } from "../preview/previewSelection.js";
+import { StudioNoticeContext } from "../preview/studioNotice.js";
+import { ContentEditsContext } from "../../core/editing/contentEdits.js";
+import { PreviewDocumentContext } from "../runtime/PreviewDocumentContext.js";
+import { FrameContext } from "../preview/components/Frame.js";
+import { DerivedPageContent } from "../page/DerivedPageContent.js";
+import { BlockPeek } from "../preview/components/BlockPeek.js";
+import { EditablePageContent } from "../preview/EditablePageContent.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HydrationBoundary } from "@tanstack/react-query";
+import { createPortal } from "react-dom";
+
+//#region src/features/renderer/RendererApp.tsx
+/**
+* The renderer document's app: it renders the page of each frame the studio gives it into that
+* frame's slot, with the site's code, and tells the studio how it went. It never draws any of
+* the studio: the studio keeps its overlays, sidebars and Canvas.
+*
+* `codeLoaded` settles once the site's code loaded: each frame waits for it, and code that fails
+* to load fails each frame, as a page that throws does.
+*/
+function RendererApp(t0) {
+	const $ = c(27);
+	const { connection, camoxApp, codeLoaded, projectUuid, runtimeBasePath } = t0;
+	const frames = React.useSyncExternalStore(connection.subscribe, connection.frames, connection.frames);
+	const thumbnails = React.useSyncExternalStore(connection.subscribe, connection.thumbnails, connection.thumbnails);
+	const t1 = connection.edit;
+	let t2;
+	if ($[0] !== connection) {
+		t2 = (notice) => connection.notify(notice);
+		$[0] = connection;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== camoxApp || $[3] !== codeLoaded || $[4] !== connection || $[5] !== frames || $[6] !== projectUuid || $[7] !== runtimeBasePath) {
+		let t4;
+		if ($[9] !== camoxApp || $[10] !== codeLoaded || $[11] !== connection || $[12] !== projectUuid || $[13] !== runtimeBasePath) {
+			t4 = (frame) => createPortal(/* @__PURE__ */ jsx(RendererFrameContent, {
+				frame,
+				connection,
+				camoxApp,
+				codeLoaded,
+				projectUuid,
+				runtimeBasePath
+			}), frame.slot, frame.frameId);
+			$[9] = camoxApp;
+			$[10] = codeLoaded;
+			$[11] = connection;
+			$[12] = projectUuid;
+			$[13] = runtimeBasePath;
+			$[14] = t4;
+		} else t4 = $[14];
+		t3 = frames.map(t4);
+		$[2] = camoxApp;
+		$[3] = codeLoaded;
+		$[4] = connection;
+		$[5] = frames;
+		$[6] = projectUuid;
+		$[7] = runtimeBasePath;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[15] !== camoxApp || $[16] !== thumbnails) {
+		let t5;
+		if ($[18] !== camoxApp) {
+			t5 = (t6) => {
+				const { thumbnailId, slot, blockType } = t6;
+				return createPortal(/* @__PURE__ */ jsx(RendererThumbnail, {
+					slot,
+					blockType,
+					camoxApp
+				}), slot, thumbnailId);
+			};
+			$[18] = camoxApp;
+			$[19] = t5;
+		} else t5 = $[19];
+		t4 = thumbnails.map(t5);
+		$[15] = camoxApp;
+		$[16] = thumbnails;
+		$[17] = t4;
+	} else t4 = $[17];
+	let t5;
+	if ($[20] !== t2 || $[21] !== t3 || $[22] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(StudioNoticeContext, {
+			value: t2,
+			children: [t3, t4]
+		});
+		$[20] = t2;
+		$[21] = t3;
+		$[22] = t4;
+		$[23] = t5;
+	} else t5 = $[23];
+	let t6;
+	if ($[24] !== connection.edit || $[25] !== t5) {
+		t6 = /* @__PURE__ */ jsx(ContentEditsContext, {
+			value: t1,
+			children: t5
+		});
+		$[24] = connection.edit;
+		$[25] = t5;
+		$[26] = t6;
+	} else t6 = $[26];
+	return t6;
+}
+/** A block's thumbnail, rendered by the draft's code into its frame: nothing for a block it lacks. */
+function RendererThumbnail(t0) {
+	const $ = c(9);
+	const { slot, blockType, camoxApp } = t0;
+	const frameWindow = slot.ownerDocument.defaultView;
+	const t1 = frameWindow?.frameElement ?? null;
+	let t2;
+	if ($[0] !== frameWindow || $[1] !== t1) {
+		t2 = {
+			window: frameWindow,
+			iframeElement: t1
+		};
+		$[0] = frameWindow;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	const frameContext = t2;
+	let t3;
+	if ($[3] !== blockType || $[4] !== camoxApp) {
+		t3 = /* @__PURE__ */ jsx(ThumbnailErrorBoundary, { children: /* @__PURE__ */ jsx(React.Suspense, {
+			fallback: null,
+			children: /* @__PURE__ */ jsx(ThumbnailBlock, {
+				blockType,
+				camoxApp
+			})
+		}) });
+		$[3] = blockType;
+		$[4] = camoxApp;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== frameContext || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(NavigationProvider, {
+			location: THUMBNAIL_LOCATION,
+			navigate: noNavigation,
+			children: /* @__PURE__ */ jsx(FrameContext.Provider, {
+				value: frameContext,
+				children: t3
+			})
+		});
+		$[6] = frameContext;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+const THUMBNAIL_LOCATION = {
+	href: "",
+	pathname: "/",
+	search: "",
+	hash: ""
+};
+const noNavigation = () => {};
+var ThumbnailErrorBoundary = class extends React.Component {
+	state = { failed: false };
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	componentDidCatch(error) {
+		console.error("Camox: a block's thumbnail failed to render.", error);
+	}
+	render() {
+		return this.state.failed ? null : this.props.children;
+	}
+};
+function ThumbnailBlock(t0) {
+	const $ = c(2);
+	const { blockType, camoxApp } = t0;
+	const block = camoxApp.getBlockById(blockType) ?? (camoxApp.canLoadMoreBlocks() ? React.use(camoxApp.loadBlock(blockType)) : void 0);
+	let t1;
+	if ($[0] !== block) {
+		t1 = block ? /* @__PURE__ */ jsx(BlockPeek, { block }) : null;
+		$[0] = block;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+function locationOf(href) {
+	const url = new URL(href);
+	return {
+		href: url.href,
+		pathname: url.pathname,
+		search: url.search,
+		hash: url.hash
+	};
+}
+/** One frame's page, with what the studio says of the frame around it. */
+function RendererFrameContent(t0) {
+	const $ = c(59);
+	const { frame: t1, connection, camoxApp, codeLoaded, projectUuid, runtimeBasePath } = t0;
+	const { frameId, slot, target } = t1;
+	const frameWindow = slot.ownerDocument.defaultView;
+	const frameElement = frameWindow?.frameElement ?? null;
+	let t2;
+	if ($[0] !== target.href) {
+		t2 = locationOf(target.href);
+		$[0] = target.href;
+		$[1] = t2;
+	} else t2 = $[1];
+	const location = t2;
+	let t3;
+	if ($[2] !== connection || $[3] !== frameId) {
+		t3 = (t4) => {
+			const { to } = t4;
+			return connection.send({
+				type: "navigate",
+				frameId,
+				to
+			});
+		};
+		$[2] = connection;
+		$[3] = frameId;
+		$[4] = t3;
+	} else t3 = $[4];
+	const navigate = t3;
+	const workspaceKey = target.canvas?.workspaceKey;
+	let t4;
+	if ($[5] !== connection || $[6] !== frameId || $[7] !== workspaceKey) {
+		t4 = workspaceKey === void 0 ? null : {
+			workspaceKey,
+			mirrorCamera: _temp2,
+			reveal: (element, t5) => {
+				const immediate = t5 === void 0 ? false : t5;
+				return connection.send({
+					type: "reveal",
+					frameId,
+					element,
+					immediate
+				});
+			}
+		};
+		$[5] = connection;
+		$[6] = frameId;
+		$[7] = workspaceKey;
+		$[8] = t4;
+	} else t4 = $[8];
+	const workspace = t4;
+	let t5;
+	if ($[9] !== frameElement || $[10] !== frameWindow) {
+		t5 = {
+			window: frameWindow,
+			iframeElement: frameElement
+		};
+		$[9] = frameElement;
+		$[10] = frameWindow;
+		$[11] = t5;
+	} else t5 = $[11];
+	const frameContext = t5;
+	let t6;
+	if ($[12] !== connection || $[13] !== frameId) {
+		t6 = (message) => connection.send({
+			type: "error",
+			frameId,
+			message
+		});
+		$[12] = connection;
+		$[13] = frameId;
+		$[14] = t6;
+	} else t6 = $[14];
+	const failed = t6;
+	let t7;
+	if ($[15] !== connection || $[16] !== frameId) {
+		t7 = () => connection.send({
+			type: "rendered",
+			frameId
+		});
+		$[15] = connection;
+		$[16] = frameId;
+		$[17] = t7;
+	} else t7 = $[17];
+	const rendered = t7;
+	const t8 = target.resting ? "hidden" : "visible";
+	let t9;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			role: "status",
+			children: "Loading page…"
+		});
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== camoxApp || $[20] !== codeLoaded || $[21] !== projectUuid || $[22] !== rendered || $[23] !== runtimeBasePath || $[24] !== target.derivedLayoutId || $[25] !== target.pathname) {
+		t10 = /* @__PURE__ */ jsx(React.Suspense, {
+			fallback: t9,
+			children: /* @__PURE__ */ jsx(FramePage, {
+				camoxApp,
+				codeLoaded,
+				projectUuid,
+				runtimeBasePath,
+				pathname: target.pathname,
+				derivedLayoutId: target.derivedLayoutId,
+				onRendered: rendered
+			})
+		});
+		$[19] = camoxApp;
+		$[20] = codeLoaded;
+		$[21] = projectUuid;
+		$[22] = rendered;
+		$[23] = runtimeBasePath;
+		$[24] = target.derivedLayoutId;
+		$[25] = target.pathname;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] !== failed || $[28] !== t10 || $[29] !== target.pathname) {
+		t11 = /* @__PURE__ */ jsx(FrameErrorBoundary, {
+			onError: failed,
+			children: t10
+		}, target.pathname);
+		$[27] = failed;
+		$[28] = t10;
+		$[29] = target.pathname;
+		$[30] = t11;
+	} else t11 = $[30];
+	let t12;
+	if ($[31] !== t11 || $[32] !== t8) {
+		t12 = /* @__PURE__ */ jsx(React.Activity, {
+			mode: t8,
+			children: t11
+		});
+		$[31] = t11;
+		$[32] = t8;
+		$[33] = t12;
+	} else t12 = $[33];
+	let t13;
+	if ($[34] !== t12 || $[35] !== target.artifactStudio) {
+		t13 = /* @__PURE__ */ jsx(ArtifactStudioContext, {
+			value: target.artifactStudio,
+			children: t12
+		});
+		$[34] = t12;
+		$[35] = target.artifactStudio;
+		$[36] = t13;
+	} else t13 = $[36];
+	let t14;
+	if ($[37] !== t13 || $[38] !== target.artifactsRun) {
+		t14 = /* @__PURE__ */ jsx(ArtifactsRunContext, {
+			value: target.artifactsRun,
+			children: t13
+		});
+		$[37] = t13;
+		$[38] = target.artifactsRun;
+		$[39] = t14;
+	} else t14 = $[39];
+	let t15;
+	if ($[40] !== t14 || $[41] !== target.editable) {
+		t15 = /* @__PURE__ */ jsx(EditableSurfaceContext, {
+			value: target.editable,
+			children: t14
+		});
+		$[40] = t14;
+		$[41] = target.editable;
+		$[42] = t15;
+	} else t15 = $[42];
+	let t16;
+	if ($[43] !== t15 || $[44] !== workspace) {
+		t16 = /* @__PURE__ */ jsx(CanvasWorkspaceContext, {
+			value: workspace,
+			children: t15
+		});
+		$[43] = t15;
+		$[44] = workspace;
+		$[45] = t16;
+	} else t16 = $[45];
+	let t17;
+	if ($[46] !== t16 || $[47] !== target.owner) {
+		t17 = /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
+			value: target.owner,
+			children: t16
+		});
+		$[46] = t16;
+		$[47] = target.owner;
+		$[48] = t17;
+	} else t17 = $[48];
+	let t18;
+	if ($[49] !== frameContext || $[50] !== t17) {
+		t18 = /* @__PURE__ */ jsx(FrameContext.Provider, {
+			value: frameContext,
+			children: t17
+		});
+		$[49] = frameContext;
+		$[50] = t17;
+		$[51] = t18;
+	} else t18 = $[51];
+	let t19;
+	if ($[52] !== location || $[53] !== navigate || $[54] !== t18) {
+		t19 = /* @__PURE__ */ jsx(NavigationProvider, {
+			location,
+			navigate,
+			children: t18
+		});
+		$[52] = location;
+		$[53] = navigate;
+		$[54] = t18;
+		$[55] = t19;
+	} else t19 = $[55];
+	const content = t19;
+	let t20;
+	if ($[56] !== content || $[57] !== target.locale) {
+		t20 = target.locale ? /* @__PURE__ */ jsx(ViewLocaleContext, {
+			value: target.locale,
+			children: content
+		}) : content;
+		$[56] = content;
+		$[57] = target.locale;
+		$[58] = t20;
+	} else t20 = $[58];
+	return t20;
+}
+function _temp2() {
+	return _temp;
+}
+function _temp() {}
+/** The page at `pathname`, as the runtime renders it in the renderer's draft. */
+function FramePage(t0) {
+	const $ = c(20);
+	const { camoxApp, codeLoaded, projectUuid, runtimeBasePath, pathname, derivedLayoutId, onRendered } = t0;
+	let t1;
+	if ($[0] !== derivedLayoutId || $[1] !== pathname || $[2] !== projectUuid || $[3] !== runtimeBasePath) {
+		let t2;
+		if ($[5] !== derivedLayoutId) {
+			t2 = derivedLayoutId && { derivedLayoutId };
+			$[5] = derivedLayoutId;
+			$[6] = t2;
+		} else t2 = $[6];
+		t1 = reads.canvasFrame({
+			projectUuid,
+			runtimeBasePath,
+			pathname,
+			...t2
+		});
+		$[0] = derivedLayoutId;
+		$[1] = pathname;
+		$[2] = projectUuid;
+		$[3] = runtimeBasePath;
+		$[4] = t1;
+	} else t1 = $[4];
+	const input = useRead(t1);
+	if (codeLoaded) React.use(codeLoaded);
+	const rendered = React.useEffectEvent(onRendered);
+	let t2;
+	if ($[7] !== rendered) {
+		t2 = () => rendered();
+		$[7] = rendered;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== input) {
+		t3 = [input];
+		$[9] = input;
+		$[10] = t3;
+	} else t3 = $[10];
+	React.useEffect(t2, t3);
+	const t4 = input.dehydratedState;
+	let t5;
+	if ($[11] !== camoxApp || $[12] !== input.derived) {
+		t5 = input.derived ? /* @__PURE__ */ jsx(DerivedPageContent, {
+			camoxApp,
+			derived: input.derived
+		}) : /* @__PURE__ */ jsx(EditablePageContent, {});
+		$[11] = camoxApp;
+		$[12] = input.derived;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== input.previewDocument || $[15] !== t5) {
+		t6 = /* @__PURE__ */ jsx(PreviewDocumentContext.Provider, {
+			value: input.previewDocument,
+			children: t5
+		});
+		$[14] = input.previewDocument;
+		$[15] = t5;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== t4 || $[18] !== t6) {
+		t7 = /* @__PURE__ */ jsx(HydrationBoundary, {
+			state: t4,
+			children: t6
+		});
+		$[17] = t4;
+		$[18] = t6;
+		$[19] = t7;
+	} else t7 = $[19];
+	return t7;
+}
+const messageOf = (error) => error instanceof Error ? error.message : String(error);
+const ERROR_STYLE = {
+	padding: "24px",
+	fontFamily: "system-ui, sans-serif",
+	fontSize: "14px",
+	color: "#b91c1c"
+};
+/**
+* Contains an error the page throws while rendering to its own frame, which says so, and tells
+* the studio. The studio and every other frame keep working.
+*/
+var FrameErrorBoundary = class extends React.Component {
+	state = { error: null };
+	static getDerivedStateFromError(error) {
+		return { error: messageOf(error) };
+	}
+	componentDidCatch(error) {
+		this.props.onError(messageOf(error));
+	}
+	render() {
+		if (this.state.error === null) return this.props.children;
+		return /* @__PURE__ */ jsxs("div", {
+			role: "alert",
+			"data-camox-renderer-error": true,
+			style: ERROR_STYLE,
+			children: [/* @__PURE__ */ jsx("p", {
+				style: {
+					margin: 0,
+					fontWeight: 600
+				},
+				children: "This page couldn’t render."
+			}), /* @__PURE__ */ jsx("p", {
+				style: {
+					margin: "8px 0 0",
+					fontFamily: "ui-monospace, monospace"
+				},
+				children: this.state.error
+			})]
+		});
+	}
+};
+
+//#endregion
+export { RendererApp };