camox 0.71.0 → 0.74.1

package/dist/features/renderer/RendererApp.js

@@ -8,11 +8,10 @@ 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 { restyle } from "../preview/components/previewStyles.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";
@@ -30,10 +29,9 @@ import { createPortal } from "react-dom";
 * to load fails each frame, as a page that throws does.
 */
 function RendererApp(t0) {
-	const $ = c(27);
+	const $ = c(21);
 	const { connection, camoxApp, codeLoaded, projectUuid, runtimeBasePath } = t0;
 	const frames = useFrames(connection);
-	const thumbnails = React.useSyncExternalStore(connection.subscribe, connection.thumbnails, connection.thumbnails);
 	const t1 = connection.edit;
 	let t2;
 	if ($[0] !== connection) {
@@ -70,47 +68,26 @@ function RendererApp(t0) {
 		$[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;
+	if ($[15] !== t2 || $[16] !== t3) {
+		t4 = /* @__PURE__ */ jsx(StudioNoticeContext, {
+			value: t2,
+			children: t3
+		});
+		$[15] = t2;
+		$[16] = t3;
 		$[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, {
+	if ($[18] !== connection.edit || $[19] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ContentEditsContext, {
 			value: t1,
-			children: t5
+			children: t4
 		});
-		$[24] = connection.edit;
-		$[25] = t5;
-		$[26] = t6;
-	} else t6 = $[26];
-	return t6;
+		$[18] = connection.edit;
+		$[19] = t4;
+		$[20] = t5;
+	} else t5 = $[20];
+	return t5;
 }
 /**
 * The frames the studio gives the renderer to fill. Each change renders in a transition, so a
@@ -138,107 +115,6 @@ function useFrames(connection) {
 	React.useEffect(t0, t1);
 	return frames;
 }
-/** A block's thumbnail, rendered by the draft's code into its frame: nothing for a block it lacks. */
-function RendererThumbnail(t0) {
-	const $ = c(17);
-	const { slot, blockType, camoxApp } = t0;
-	const frameWindow = slot.ownerDocument.defaultView;
-	const left = useLeftInSlot(slot);
-	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(ThumbnailBlock, {
-			blockType,
-			camoxApp
-		});
-		$[3] = blockType;
-		$[4] = camoxApp;
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
-	if ($[6] !== left) {
-		t4 = /* @__PURE__ */ jsx(RemovesLeft, { nodes: left });
-		$[6] = left;
-		$[7] = t4;
-	} else t4 = $[7];
-	let t5;
-	if ($[8] !== t3 || $[9] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(React.Suspense, {
-			fallback: null,
-			children: [t3, t4]
-		});
-		$[8] = t3;
-		$[9] = t4;
-		$[10] = t5;
-	} else t5 = $[10];
-	let t6;
-	if ($[11] !== left || $[12] !== t5) {
-		t6 = /* @__PURE__ */ jsx(ThumbnailErrorBoundary, {
-			left,
-			children: t5
-		});
-		$[11] = left;
-		$[12] = t5;
-		$[13] = t6;
-	} else t6 = $[13];
-	let t7;
-	if ($[14] !== frameContext || $[15] !== t6) {
-		t7 = /* @__PURE__ */ jsx(NavigationProvider, {
-			location: THUMBNAIL_LOCATION,
-			navigate: noNavigation,
-			children: /* @__PURE__ */ jsx(FrameContext.Provider, {
-				value: frameContext,
-				children: t6
-			})
-		});
-		$[14] = frameContext;
-		$[15] = t6;
-		$[16] = t7;
-	} else t7 = $[16];
-	return t7;
-}
-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 ? /* @__PURE__ */ jsx(RemovesLeft, { nodes: this.props.left }) : 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;
-}
 /**
 * What another renderer document left in `slot`, read before this one renders into it. Each new
 * revision loads another renderer document, and removing the last one's frame never unmounts

package/dist/features/renderer/definitionAnswers.js

@@ -1,15 +1,8 @@
 import { curatedLayoutContext } from "../../core/layoutContext.js";
 
 //#region src/features/renderer/definitionAnswers.ts
-/** The block of `type` in the draft's code, loading it if it is lazy. */
-async function blockOfCode(camoxApp, type) {
-	const block = camoxApp.getBlockById(type);
-	if (block || !camoxApp.canLoadMoreBlocks()) return block;
-	return camoxApp.loadBlock(type);
-}
 async function answerFromCode(camoxApp, question) {
 	switch (question.type) {
-		case "initialBundle": return (await blockOfCode(camoxApp, question.blockType))?._internal.getInitialBundle() ?? null;
 		case "prepareFrame": return null;
 		case "pageTitle": {
 			const layout = camoxApp.getLayoutById(question.layoutId);
@@ -24,4 +17,4 @@ async function answerFromCode(camoxApp, question) {
 }
 
 //#endregion
-export { answerFromCode, blockOfCode };
+export { answerFromCode };

package/dist/features/renderer/rendererHost.js

@@ -1,4 +1,3 @@
-import { referencePickerFocus } from "../preview/referencePickerFocus.js";
 import { canvasStore } from "../canvas/canvasStore.js";
 import { previewStore } from "../preview/previewStore.js";
 import { SDK_VERSION, deferredInbox } from "./protocol.js";
@@ -20,10 +19,7 @@ const storeMessages = {
 	})
 };
 /** The stores the renderer forwards its events to, as the host applies them. */
-const forwarded = {
-	preview: previewStore,
-	referencePickerFocus
-};
+const forwarded = { preview: previewStore };
 /** Applies an event the renderer forwarded to the studio's store. */
 const applyStoreEvent = (message) => {
 	const store = forwarded[message.store];
@@ -43,7 +39,6 @@ function createRendererHost({ studioCache, draftScope, queryClient, notify } = {
 		studioCache
 	}) : void 0;
 	const frames = /* @__PURE__ */ new Map();
-	const thumbnails = /* @__PURE__ */ new Map();
 	/** The questions asked that no renderer answered yet. */
 	const asked = /* @__PURE__ */ new Map();
 	let lastAskId = 0;
@@ -122,12 +117,6 @@ function createRendererHost({ studioCache, draftScope, queryClient, notify } = {
 					slot,
 					target
 				});
-				for (const [thumbnailId, { slot, blockType }] of thumbnails) post({
-					type: "thumbnail",
-					thumbnailId,
-					slot,
-					blockType
-				});
 				for (const [askId, { question }] of asked) post({
 					type: "ask",
 					askId,
@@ -213,25 +202,6 @@ function createRendererHost({ studioCache, draftScope, queryClient, notify } = {
 				});
 			});
 		},
-		showThumbnail(thumbnailId, slot, blockType) {
-			thumbnails.set(thumbnailId, {
-				slot,
-				blockType
-			});
-			post({
-				type: "thumbnail",
-				thumbnailId,
-				slot,
-				blockType
-			});
-		},
-		hideThumbnail(thumbnailId) {
-			if (!thumbnails.delete(thumbnailId)) return;
-			post({
-				type: "thumbnailEnd",
-				thumbnailId
-			});
-		},
 		subscribe(listener) {
 			connectionListeners.add(listener);
 			return () => connectionListeners.delete(listener);

package/dist/features/renderer/studioConnection.js

@@ -1,4 +1,3 @@
-import { referencePickerFocus } from "../preview/referencePickerFocus.js";
 import { canvasStore } from "../canvas/canvasStore.js";
 import { previewStore } from "../preview/previewStore.js";
 import { SDK_VERSION, deferredInbox } from "./protocol.js";
@@ -11,10 +10,7 @@ const mirrors = {
 	canvas: canvasStore
 };
 /** The stores of this document whose events are forwarded to the studio's. */
-const forwards = {
-	preview: previewStore,
-	referencePickerFocus
-};
+const forwards = { preview: previewStore };
 /** Has this document's copy of a mirrored store take the studio's state. */
 const mirror = (message) => mirrors[message.store]?.send({
 	type: "mirror",
@@ -30,7 +26,6 @@ function connectToStudio(handle, { queryClient, studioCache, draftScope, camoxAp
 	let welcomed = false;
 	let frames = [];
 	const listeners = /* @__PURE__ */ new Set();
-	let thumbnails = [];
 	const changed = () => {
 		for (const listener of listeners) listener();
 	};
@@ -38,10 +33,6 @@ function connectToStudio(handle, { queryClient, studioCache, draftScope, camoxAp
 		frames = next;
 		changed();
 	};
-	const setThumbnails = (next) => {
-		thumbnails = next;
-		changed();
-	};
 	/** The edits sent to the studio that it hasn't answered yet. */
 	const editsInFlight = /* @__PURE__ */ new Map();
 	let lastEditId = 0;
@@ -93,20 +84,6 @@ function connectToStudio(handle, { queryClient, studioCache, draftScope, camoxAp
 					exact: true
 				});
 				return;
-			case "thumbnail": {
-				const { thumbnailId, slot, blockType } = message;
-				const thumbnail = {
-					thumbnailId,
-					slot,
-					blockType
-				};
-				const index = thumbnails.findIndex((shown) => shown.thumbnailId === thumbnailId);
-				setThumbnails(index < 0 ? [...thumbnails, thumbnail] : thumbnails.map((shown, at) => at === index ? thumbnail : shown));
-				return;
-			}
-			case "thumbnailEnd":
-				setThumbnails(thumbnails.filter(({ thumbnailId }) => thumbnailId !== message.thumbnailId));
-				return;
 			case "ask": {
 				const { askId, question } = message;
 				if (question.type === "prepareFrame") {
@@ -165,7 +142,6 @@ function connectToStudio(handle, { queryClient, studioCache, draftScope, camoxAp
 	return {
 		connected: () => welcomed,
 		frames: () => frames,
-		thumbnails: () => thumbnails,
 		subscribe(listener) {
 			listeners.add(listener);
 			return () => listeners.delete(listener);

package/dist/features/routes/pageRuntime.js

@@ -157,13 +157,24 @@ function createServerStudioCache(queryClient, { apiUrl, authCookieHeader, lookTo
 }
 /**
 * The locales of the scope a request reads: the URL's draft's for a session naming one, else
-* Live's. A draft the API refuses reads Live's, as the request's other reads then do.
+* Live's. A draft the API refuses reads Live's, as the request's other reads then do. Live's read
+* keeps the session: a member's studio routes the locales Live doesn't serve yet, which visitors
+* never see (ADR 0043), and a render with a session is private.
 */
 async function readScopeLocales({ apiUrl, authCookieHeader, draftId, projectUuid }) {
-	const { value } = await readDraftOrLive(draftId, !!authCookieHeader, (readDraftId) => createServerApiClient(apiUrl, {
-		authCookieHeader: readDraftId ? authCookieHeader : void 0,
+	const list = (session, readDraftId) => createServerApiClient(apiUrl, {
+		authCookieHeader: session,
 		draftId: readDraftId
-	}).locales.list({ projectUuid }));
+	}).locales.list({ projectUuid });
+	const { value } = await readDraftOrLive(draftId, !!authCookieHeader, async (readDraftId) => {
+		if (readDraftId || !authCookieHeader) return list(authCookieHeader, readDraftId);
+		try {
+			return await list(authCookieHeader, void 0);
+		} catch (error) {
+			if (!isAuthSessionError(error)) throw error;
+			return list(void 0, void 0);
+		}
+	});
 	return value;
 }
 /**

package/dist/features/runtime/ClaimCard.js

@@ -0,0 +1,192 @@
+import { useOptionalDraftScope } from "../../lib/draft-scope.js";
+import { useAuthContext, useSignInRedirect } from "../../lib/auth.js";
+import { getApiClient } from "../../lib/api-client.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CLAIM_LINK_SEARCH_PARAM } from "@camox/api-contract/claim-links";
+
+//#region src/features/runtime/ClaimCard.tsx
+/** The page's URL without the Claim Link's token, which would reopen the card. */
+function pageWithoutToken() {
+	const url = new URL(window.location.href);
+	url.searchParams.delete(CLAIM_LINK_SEARCH_PARAM);
+	return url.href;
+}
+/**
+* The claim card, on a page opened from a Claim Link: who built the website for whom, with a
+* button to claim it, or why it can't be claimed. A member of the website's organization sees it
+* as a preview. Nothing shows without a token, or in a draft.
+*/
+function ClaimCard() {
+	const $ = c(15);
+	const [token, setToken] = React.useState(null);
+	const [opening, setOpening] = React.useState(null);
+	const [closed, setClosed] = React.useState(false);
+	const { authenticationUrl } = useAuthContext();
+	const signIn = useSignInRedirect(pageWithoutToken);
+	const inDraft = useOptionalDraftScope().draftId !== null;
+	let t0;
+	let t1;
+	if ($[0] !== inDraft) {
+		t0 = () => {
+			if (inDraft) return;
+			const found = new URL(window.location.href).searchParams.get(CLAIM_LINK_SEARCH_PARAM);
+			if (!found) return;
+			setToken(found);
+			let current = true;
+			getApiClient().claimLinks.open({ token: found }).then((opened) => current && setOpening(opened), _temp);
+			return () => {
+				current = false;
+			};
+		};
+		t1 = [inDraft];
+		$[0] = inDraft;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	React.useEffect(t0, t1);
+	if (inDraft || !token || !opening || closed) return null;
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			window.history.replaceState(window.history.state, "", pageWithoutToken());
+			setClosed(true);
+		};
+		$[3] = t2;
+	} else t2 = $[3];
+	const close = t2;
+	let t3;
+	if ($[4] !== authenticationUrl || $[5] !== token) {
+		t3 = () => {
+			const destination = new URL("/claim", authenticationUrl);
+			destination.searchParams.set("token", token);
+			destination.searchParams.set("callback", pageWithoutToken());
+			window.location.href = destination.href;
+		};
+		$[4] = authenticationUrl;
+		$[5] = token;
+		$[6] = t3;
+	} else t3 = $[6];
+	const claim = t3;
+	let t4;
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx("style", { children: claimCardStyles });
+		t5 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "camox-claim-close",
+			"aria-label": "Close",
+			onClick: close,
+			children: "×"
+		});
+		$[7] = t4;
+		$[8] = t5;
+	} else {
+		t4 = $[7];
+		t5 = $[8];
+	}
+	let t6;
+	if ($[9] !== claim || $[10] !== opening.operatorName || $[11] !== opening.organizationName || $[12] !== opening.state || $[13] !== signIn) {
+		t6 = /* @__PURE__ */ jsxs("aside", {
+			className: "camox-claim-card",
+			"aria-label": "Claim this website",
+			children: [
+				t4,
+				t5,
+				opening.state === "open" || opening.state === "preview" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					opening.state === "preview" && /* @__PURE__ */ jsx("span", {
+						className: "camox-claim-preview",
+						children: "Preview: this is the card whoever you send the link to sees"
+					}),
+					/* @__PURE__ */ jsxs("p", { children: [
+						opening.operatorName,
+						" from Camox built this website for ",
+						opening.organizationName,
+						". Claim it to start editing."
+					] }),
+					opening.state === "open" && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "camox-claim-action",
+						onClick: claim,
+						children: "Claim website"
+					})
+				] }) : opening.state === "claimed" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", { children: "This website has been claimed." }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "camox-claim-action",
+					onClick: signIn,
+					children: "Sign in"
+				})] }) : /* @__PURE__ */ jsx("p", { children: "This link no longer works. Ask whoever sent it for a new one." })
+			]
+		});
+		$[9] = claim;
+		$[10] = opening.operatorName;
+		$[11] = opening.organizationName;
+		$[12] = opening.state;
+		$[13] = signIn;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+}
+function _temp(error) {
+	return console.error("The Claim Link couldn't be opened", error);
+}
+const claimCardStyles = `
+  .camox-claim-card {
+    background: #09090b;
+    border: 1px solid #27272a;
+    border-radius: 12px;
+    bottom: 24px;
+    box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
+    box-sizing: border-box;
+    color: #fafafa;
+    color-scheme: dark;
+    display: flex;
+    flex-direction: column;
+    font: 15px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
+    gap: 12px;
+    max-width: min(24rem, calc(100vw - 32px));
+    padding: 20px 44px 20px 20px;
+    position: fixed;
+    right: 16px;
+    text-align: left;
+    z-index: 2147483647;
+  }
+  .camox-claim-card p { margin: 0; }
+  .camox-claim-card button { cursor: pointer; font: inherit; }
+  .camox-claim-card .camox-claim-close {
+    background: none;
+    border: 0;
+    color: #a1a1aa;
+    font-size: 20px;
+    line-height: 1;
+    padding: 4px 8px;
+    position: absolute;
+    right: 8px;
+    top: 8px;
+  }
+  .camox-claim-card .camox-claim-close:hover { color: #fafafa; }
+  .camox-claim-card .camox-claim-preview {
+    align-self: flex-start;
+    background: #27272a;
+    border-radius: 999px;
+    color: #d4d4d8;
+    font-size: 12px;
+    padding: 2px 10px;
+  }
+  .camox-claim-card .camox-claim-action {
+    align-self: flex-start;
+    background: #fafafa;
+    border: 0;
+    border-radius: 8px;
+    color: #09090b;
+    font-weight: 600;
+    padding: 8px 14px;
+  }
+`;
+
+//#endregion
+export { ClaimCard };

package/dist/features/runtime/pageApp.js

@@ -2,8 +2,8 @@ import { DraftScopeContext } from "../../lib/draft-scope.js";
 import { useAuthState, useSignInRedirect } from "../../lib/auth.js";
 import { ArtifactCaptureContext } from "../../core/hooks/useArtifactHost.js";
 import { useSignInShortcut } from "../provider/signInShortcut.js";
-import { PreviewDocumentContext } from "./PreviewDocumentContext.js";
 import { PreviewActivation } from "../preview/components/PreviewActivation.js";
+import { PreviewDocumentContext } from "./PreviewDocumentContext.js";
 import { Frame } from "../preview/components/Frame.js";
 import { PreviewSignInPage } from "../provider/PreviewSignInPage.js";
 import { CoreCamoxProvider } from "../provider/CoreCamoxProvider.js";
@@ -11,12 +11,13 @@ import { CuratedPageContent } from "../page/CuratedPageContent.js";
 import { DerivedPageContent } from "../page/DerivedPageContent.js";
 import { UnplacedBlockContent } from "../page/UnplacedBlockContent.js";
 import { UnplacedLayoutContent } from "../page/UnplacedLayoutContent.js";
+import { ClaimCard } from "./ClaimCard.js";
 import { EditingFallbackSlot } from "./editingFallback.js";
 import { PageNavigationProvider } from "./pageNavigation.js";
 import { RuntimeChromeSlot } from "./runtimeChromeLoader.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { HydrationBoundary, QueryClientProvider } from "@tanstack/react-query";
 
 //#region src/features/runtime/pageApp.tsx
@@ -43,12 +44,12 @@ function PageApp(t0) {
 						camoxApp,
 						input: currentInput
 					})
-				}) : /* @__PURE__ */ jsx(PageExperience, {
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PageExperience, {
 					camoxApp,
 					input: currentInput,
 					queryClient,
 					studioDocument: input.presentation === "studio"
-				})
+				}), /* @__PURE__ */ jsx(ClaimCard, {})] })
 			})
 		});
 		$[0] = camoxApp;