camox 0.63.0 → 0.66.0

package/dist/features/routes/pageRuntime.js

@@ -6,7 +6,7 @@ import { PAGE_IMAGE_SIZE, pageImageUrl } from "../og/pageImage.js";
 import { curatedLayoutContext } from "../../core/layoutContext.js";
 import { isArticle } from "../../core/structuredData.js";
 import { publishingDraft } from "../runtime/publishingDraft.js";
-import { DRAFT_ENDED_ERROR_CODE, DRAFT_HEADER, PUBLISHING_DRAFT_HEADER } from "@camox/api-contract/drafts";
+import { DRAFT_ENDED_ERROR_CODE, DRAFT_HEADER, LOOK_TOKEN_HEADER, PUBLISHING_DRAFT_HEADER } from "@camox/api-contract/drafts";
 import { createORPCClient } from "@orpc/client";
 import { RPCLink } from "@orpc/client/fetch";
 
@@ -38,7 +38,8 @@ function parseMarkdownPath(pathname) {
 }
 function createServerApiClient(apiUrl, options) {
 	const headers = localeHeaders(options?.locale);
-	if (options?.draftId && options.authCookieHeader) headers[DRAFT_HEADER] = options.draftId;
+	if (options?.lookToken) headers[LOOK_TOKEN_HEADER] = options.lookToken;
+	if (options?.draftId && (options.authCookieHeader || options.lookToken)) headers[DRAFT_HEADER] = options.draftId;
 	else {
 		const publishing = publishingDraft();
 		if (publishing) headers[PUBLISHING_DRAFT_HEADER] = publishing;
@@ -115,13 +116,14 @@ async function readDraftOrLive(draftId, member, read) {
 function renderedHref(url, read) {
 	return read.refusedDraft ? withoutDraft(url) : url;
 }
-async function loadCamoxPage({ apiUrl, authCookieHeader, draftId, locale, pathname, projectUuid, queryClient }) {
+async function loadCamoxPage({ apiUrl, authCookieHeader, lookToken, draftId, locale, pathname, projectUuid, queryClient }) {
 	const studioCache = createServerStudioCache(queryClient, {
 		apiUrl,
 		authCookieHeader,
+		lookToken,
 		locale
 	});
-	const inDraft = { in: draftId && authCookieHeader ? draftId : null };
+	const inDraft = { in: draftId && (authCookieHeader || lookToken) ? draftId : null };
 	const fallback = locale && linkFallbackLocale(locale);
 	const [page] = await Promise.all([
 		studioCache.ensure(reads.pageStructure({
@@ -140,12 +142,13 @@ async function loadCamoxPage({ apiUrl, authCookieHeader, draftId, locale, pathna
 * The studio's reads for one server request, read with its session. Each operation names the
 * draft it acts in, once the request settled which one it reads.
 */
-function createServerStudioCache(queryClient, { apiUrl, authCookieHeader, locale }) {
+function createServerStudioCache(queryClient, { apiUrl, authCookieHeader, lookToken, locale }) {
 	return createStudioCache({
 		queryClient,
 		scope: createDraftScope({ queryClient }),
 		api: (draft, inLocale) => createServerApiClient(apiUrl, {
 			authCookieHeader,
+			lookToken,
 			draftId: draft ?? void 0,
 			locale: inLocale
 		}),

package/dist/features/runtime/RuntimeChrome.js

@@ -5,6 +5,7 @@ import { Navbar } from "../studio/components/Navbar.js";
 import { EditingFallbackContext } from "./editingFallback.js";
 import { PreviewToolbar } from "../preview/components/PreviewToolbar.js";
 import { AgentSidebar } from "../studio/components/AgentSidebar.js";
+import { UnnamedDraftBar } from "../studio/components/UnnamedDraftBar.js";
 import { FollowAgentProvider } from "../studio/FollowAgentProvider.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -14,7 +15,7 @@ import studioCssUrl from "virtual:camox-studio-css";
 //#region src/features/runtime/RuntimeChrome.tsx
 const renderEditingFallback = ({ layoutPage }) => /* @__PURE__ */ jsx(StudioEditingFallback, { layoutPage });
 function RuntimeChrome(t0) {
-	const $ = c(32);
+	const $ = c(39);
 	const { input, children } = t0;
 	const website = !input.routeKind;
 	const hidden = useSelector(previewStore, _temp);
@@ -92,56 +93,81 @@ function RuntimeChrome(t0) {
 		$[15] = t11;
 		$[16] = t13;
 	} else t13 = $[16];
-	let t14;
-	if ($[17] !== t13 || $[18] !== t9) {
-		t14 = /* @__PURE__ */ jsxs("div", {
-			className: "relative flex min-h-0 min-w-0 flex-1 flex-col",
-			children: [t9, t13]
+	const t14 = website && hidden;
+	const t15 = website ? "max-md:hidden" : void 0;
+	let t16;
+	if ($[17] !== website) {
+		t16 = /* @__PURE__ */ jsx(UnnamedDraftBar, { stacked: website });
+		$[17] = website;
+		$[18] = t16;
+	} else t16 = $[18];
+	let t17;
+	if ($[19] !== t14 || $[20] !== t15 || $[21] !== t16) {
+		t17 = /* @__PURE__ */ jsx("div", {
+			hidden: t14,
+			className: t15,
+			children: t16
 		});
-		$[17] = t13;
-		$[18] = t9;
 		$[19] = t14;
-	} else t14 = $[19];
-	const t15 = !showAgentSidebar;
-	let t16;
-	if ($[20] !== t15) {
-		t16 = /* @__PURE__ */ jsx(AgentSidebar, { hidden: t15 });
 		$[20] = t15;
 		$[21] = t16;
-	} else t16 = $[21];
-	let t17;
-	if ($[22] !== t14 || $[23] !== t16) {
-		t17 = /* @__PURE__ */ jsxs("div", {
-			className: "relative flex min-h-0 flex-1",
-			children: [t14, t16]
-		});
-		$[22] = t14;
-		$[23] = t16;
-		$[24] = t17;
-	} else t17 = $[24];
+		$[22] = t17;
+	} else t17 = $[22];
 	let t18;
-	if ($[25] !== t17 || $[26] !== t7) {
+	if ($[23] !== t13 || $[24] !== t17 || $[25] !== t9) {
 		t18 = /* @__PURE__ */ jsxs("div", {
+			className: "relative flex min-h-0 min-w-0 flex-1 flex-col",
+			children: [
+				t9,
+				t13,
+				t17
+			]
+		});
+		$[23] = t13;
+		$[24] = t17;
+		$[25] = t9;
+		$[26] = t18;
+	} else t18 = $[26];
+	const t19 = !showAgentSidebar;
+	let t20;
+	if ($[27] !== t19) {
+		t20 = /* @__PURE__ */ jsx(AgentSidebar, { hidden: t19 });
+		$[27] = t19;
+		$[28] = t20;
+	} else t20 = $[28];
+	let t21;
+	if ($[29] !== t18 || $[30] !== t20) {
+		t21 = /* @__PURE__ */ jsxs("div", {
+			className: "relative flex min-h-0 flex-1",
+			children: [t18, t20]
+		});
+		$[29] = t18;
+		$[30] = t20;
+		$[31] = t21;
+	} else t21 = $[31];
+	let t22;
+	if ($[32] !== t21 || $[33] !== t7) {
+		t22 = /* @__PURE__ */ jsxs("div", {
 			className: "bg-background flex h-screen flex-col overflow-hidden",
-			children: [t7, t17]
+			children: [t7, t21]
 		});
-		$[25] = t17;
-		$[26] = t7;
-		$[27] = t18;
-	} else t18 = $[27];
-	let t19;
-	if ($[28] !== input.runtimeBasePath || $[29] !== t18 || $[30] !== website) {
-		t19 = /* @__PURE__ */ jsxs(FollowAgentProvider, {
+		$[32] = t21;
+		$[33] = t7;
+		$[34] = t22;
+	} else t22 = $[34];
+	let t23;
+	if ($[35] !== input.runtimeBasePath || $[36] !== t22 || $[37] !== website) {
+		t23 = /* @__PURE__ */ jsxs(FollowAgentProvider, {
 			runtimeBasePath: t1,
 			website,
-			children: [t2, t18]
+			children: [t2, t22]
 		});
-		$[28] = input.runtimeBasePath;
-		$[29] = t18;
-		$[30] = website;
-		$[31] = t19;
-	} else t19 = $[31];
-	return t19;
+		$[35] = input.runtimeBasePath;
+		$[36] = t22;
+		$[37] = website;
+		$[38] = t23;
+	} else t23 = $[38];
+	return t23;
 }
 function _temp(state) {
 	return state.context.isToolbarHidden;

package/dist/features/runtime/pageApp.js

@@ -8,6 +8,7 @@ import { PreviewSignInPage } from "../provider/PreviewSignInPage.js";
 import { CoreCamoxProvider } from "../provider/CoreCamoxProvider.js";
 import { CuratedPageContent } from "../page/CuratedPageContent.js";
 import { DerivedPageContent } from "../page/DerivedPageContent.js";
+import { UnplacedBlockContent } from "../page/UnplacedBlockContent.js";
 import { EditingFallbackSlot } from "./editingFallback.js";
 import { PageNavigationProvider } from "./pageNavigation.js";
 import { RuntimeChromeSlot } from "./runtimeChromeLoader.js";
@@ -19,11 +20,11 @@ import { HydrationBoundary, QueryClientProvider } from "@tanstack/react-query";
 //#region src/features/runtime/pageApp.tsx
 /** The page app of one server request or browser window, viewing the draft `draftScope` names. */
 function PageApp(t0) {
-	const $ = c(22);
+	const $ = c(23);
 	const { camoxApp, draftScope, input, queryClient } = t0;
 	const t1 = input.dehydratedState;
 	let t2;
-	if ($[0] !== camoxApp || $[1] !== input.apiUrl || $[2] !== input.authenticationUrl || $[3] !== input.presentation || $[4] !== input.previewHandoff || $[5] !== input.projectUuid || $[6] !== queryClient) {
+	if ($[0] !== camoxApp || $[1] !== input.apiUrl || $[2] !== input.authenticationUrl || $[3] !== input.look || $[4] !== input.presentation || $[5] !== input.previewHandoff || $[6] !== input.projectUuid || $[7] !== queryClient) {
 		t2 = (currentInput) => /* @__PURE__ */ jsx(CoreCamoxProvider, {
 			camoxApp,
 			authenticationUrl: input.authenticationUrl,
@@ -31,9 +32,13 @@ function PageApp(t0) {
 			projectUuid: input.projectUuid,
 			initialAuthenticated: input.presentation === "studio",
 			initialProject: currentInput.project,
+			sessionless: input.look,
 			children: /* @__PURE__ */ jsx(PreviewDocumentContext.Provider, {
 				value: currentInput.previewDocument,
-				children: input.previewHandoff ? /* @__PURE__ */ jsx(PreviewSignInPage, {}) : /* @__PURE__ */ jsx(PageExperience, {
+				children: input.previewHandoff ? /* @__PURE__ */ jsx(PreviewSignInPage, {}) : input.look ? /* @__PURE__ */ jsx(PageContent, {
+					camoxApp,
+					input: currentInput
+				}) : /* @__PURE__ */ jsx(PageExperience, {
 					camoxApp,
 					input: currentInput,
 					queryClient,
@@ -44,56 +49,57 @@ function PageApp(t0) {
 		$[0] = camoxApp;
 		$[1] = input.apiUrl;
 		$[2] = input.authenticationUrl;
-		$[3] = input.presentation;
-		$[4] = input.previewHandoff;
-		$[5] = input.projectUuid;
-		$[6] = queryClient;
-		$[7] = t2;
-	} else t2 = $[7];
+		$[3] = input.look;
+		$[4] = input.presentation;
+		$[5] = input.previewHandoff;
+		$[6] = input.projectUuid;
+		$[7] = queryClient;
+		$[8] = t2;
+	} else t2 = $[8];
 	let t3;
-	if ($[8] !== camoxApp || $[9] !== input || $[10] !== queryClient || $[11] !== t2) {
+	if ($[9] !== camoxApp || $[10] !== input || $[11] !== queryClient || $[12] !== t2) {
 		t3 = /* @__PURE__ */ jsx(PageNavigationProvider, {
 			camoxApp,
 			initialInput: input,
 			queryClient,
 			children: t2
 		});
-		$[8] = camoxApp;
-		$[9] = input;
-		$[10] = queryClient;
-		$[11] = t2;
-		$[12] = t3;
-	} else t3 = $[12];
+		$[9] = camoxApp;
+		$[10] = input;
+		$[11] = queryClient;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
 	let t4;
-	if ($[13] !== t1 || $[14] !== t3) {
+	if ($[14] !== t1 || $[15] !== t3) {
 		t4 = /* @__PURE__ */ jsx(HydrationBoundary, {
 			state: t1,
 			children: t3
 		});
-		$[13] = t1;
-		$[14] = t3;
-		$[15] = t4;
-	} else t4 = $[15];
+		$[14] = t1;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
 	let t5;
-	if ($[16] !== draftScope || $[17] !== t4) {
+	if ($[17] !== draftScope || $[18] !== t4) {
 		t5 = /* @__PURE__ */ jsx(DraftScopeContext.Provider, {
 			value: draftScope,
 			children: t4
 		});
-		$[16] = draftScope;
-		$[17] = t4;
-		$[18] = t5;
-	} else t5 = $[18];
+		$[17] = draftScope;
+		$[18] = t4;
+		$[19] = t5;
+	} else t5 = $[19];
 	let t6;
-	if ($[19] !== queryClient || $[20] !== t5) {
+	if ($[20] !== queryClient || $[21] !== t5) {
 		t6 = /* @__PURE__ */ jsx(QueryClientProvider, {
 			client: queryClient,
 			children: t5
 		});
-		$[19] = queryClient;
-		$[20] = t5;
-		$[21] = t6;
-	} else t6 = $[21];
+		$[20] = queryClient;
+		$[21] = t5;
+		$[22] = t6;
+	} else t6 = $[22];
 	return t6;
 }
 const LazyEditablePageExperience = React.lazy(() => import("../preview/EditablePageExperience.js").then((module) => ({ default: module.EditablePageExperience })));
@@ -111,7 +117,7 @@ var EditingActivationBoundary = class extends React.Component {
 };
 const subscribeToHydration = () => () => {};
 function PageExperience(t0) {
-	const $ = c(31);
+	const $ = c(29);
 	const { camoxApp, input, queryClient, studioDocument } = t0;
 	const { isAuthenticated, isLoading } = useAuthState();
 	const hasHydrated = React.useSyncExternalStore(subscribeToHydration, _temp, _temp2);
@@ -151,48 +157,46 @@ function PageExperience(t0) {
 	} else t3 = $[6];
 	const loading = t3;
 	let t4;
-	if ($[7] !== camoxApp || $[8] !== input.canvasOnly || $[9] !== input.derived || $[10] !== input.routeKind) {
-		t4 = input.routeKind ? loading : input.canvasOnly ? null : input.derived ? /* @__PURE__ */ jsx(DerivedPageContent, {
+	if ($[7] !== camoxApp || $[8] !== input) {
+		t4 = input.routeKind ? loading : input.canvasOnly ? null : /* @__PURE__ */ jsx(PageContent, {
 			camoxApp,
-			derived: input.derived
-		}) : /* @__PURE__ */ jsx(CuratedPageContent, {});
+			input
+		});
 		$[7] = camoxApp;
-		$[8] = input.canvasOnly;
-		$[9] = input.derived;
-		$[10] = input.routeKind;
-		$[11] = t4;
-	} else t4 = $[11];
+		$[8] = input;
+		$[9] = t4;
+	} else t4 = $[9];
 	const readOnlyPage = t4;
 	let t5;
-	if ($[12] !== readOnlyPage) {
+	if ($[10] !== readOnlyPage) {
 		t5 = /* @__PURE__ */ jsx(Frame, { children: readOnlyPage });
-		$[12] = readOnlyPage;
-		$[13] = t5;
-	} else t5 = $[13];
+		$[10] = readOnlyPage;
+		$[11] = t5;
+	} else t5 = $[11];
 	const isolatedPage = t5;
 	if (isAuthenticated) {
 		let t6;
-		if ($[14] !== camoxApp || $[15] !== hasHydrated || $[16] !== input || $[17] !== queryClient) {
+		if ($[12] !== camoxApp || $[13] !== hasHydrated || $[14] !== input || $[15] !== queryClient) {
 			t6 = hasHydrated ? /* @__PURE__ */ jsx(LazyEditablePageExperience, {
 				camoxApp,
 				input,
 				queryClient
 			}) : null;
-			$[14] = camoxApp;
-			$[15] = hasHydrated;
-			$[16] = input;
-			$[17] = queryClient;
-			$[18] = t6;
-		} else t6 = $[18];
+			$[12] = camoxApp;
+			$[13] = hasHydrated;
+			$[14] = input;
+			$[15] = queryClient;
+			$[16] = t6;
+		} else t6 = $[16];
 		const editor = t6;
 		const t7 = input.routeKind ? loading : studioDocument ? null : isolatedPage;
 		let t8;
-		if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
 			t8 = /* @__PURE__ */ jsx(StudioLoadError, {});
-			$[19] = t8;
-		} else t8 = $[19];
+			$[17] = t8;
+		} else t8 = $[17];
 		let t9;
-		if ($[20] !== editor || $[21] !== input.derived || $[22] !== input.routeKind) {
+		if ($[18] !== editor || $[19] !== input.derived || $[20] !== input.routeKind) {
 			t9 = /* @__PURE__ */ jsx(EditingActivationBoundary, {
 				fallback: t8,
 				children: input.routeKind ? /* @__PURE__ */ jsx(React.Suspense, {
@@ -203,41 +207,41 @@ function PageExperience(t0) {
 					children: editor
 				})
 			});
-			$[20] = editor;
-			$[21] = input.derived;
-			$[22] = input.routeKind;
-			$[23] = t9;
-		} else t9 = $[23];
+			$[18] = editor;
+			$[19] = input.derived;
+			$[20] = input.routeKind;
+			$[21] = t9;
+		} else t9 = $[21];
 		let t10;
-		if ($[24] !== input || $[25] !== t7 || $[26] !== t9) {
+		if ($[22] !== input || $[23] !== t7 || $[24] !== t9) {
 			t10 = /* @__PURE__ */ jsx(RuntimeChromeSlot, {
 				input,
 				fallback: t7,
 				children: t9
 			});
-			$[24] = input;
-			$[25] = t7;
-			$[26] = t9;
-			$[27] = t10;
-		} else t10 = $[27];
+			$[22] = input;
+			$[23] = t7;
+			$[24] = t9;
+			$[25] = t10;
+		} else t10 = $[25];
 		return t10;
 	}
 	if (studioOnly) return null;
 	if (studioDocument) {
 		let t6;
-		if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
 			t6 = { height: "100vh" };
-			$[28] = t6;
-		} else t6 = $[28];
+			$[26] = t6;
+		} else t6 = $[26];
 		let t7;
-		if ($[29] !== isolatedPage) {
+		if ($[27] !== isolatedPage) {
 			t7 = /* @__PURE__ */ jsx("div", {
 				style: t6,
 				children: isolatedPage
 			});
-			$[29] = isolatedPage;
-			$[30] = t7;
-		} else t7 = $[30];
+			$[27] = isolatedPage;
+			$[28] = t7;
+		} else t7 = $[28];
 		return t7;
 	}
 	return readOnlyPage;
@@ -248,6 +252,39 @@ function _temp2() {
 function _temp() {
 	return true;
 }
+/** The page's blocks, read-only, or the look document's one unplaced block. */
+function PageContent(t0) {
+	const $ = c(6);
+	const { camoxApp, input } = t0;
+	if (input.lookBlock) {
+		let t1;
+		if ($[0] !== input.lookBlock) {
+			t1 = /* @__PURE__ */ jsx(UnplacedBlockContent, { blockId: input.lookBlock });
+			$[0] = input.lookBlock;
+			$[1] = t1;
+		} else t1 = $[1];
+		return t1;
+	}
+	if (input.derived) {
+		let t1;
+		if ($[2] !== camoxApp || $[3] !== input.derived) {
+			t1 = /* @__PURE__ */ jsx(DerivedPageContent, {
+				camoxApp,
+				derived: input.derived
+			});
+			$[2] = camoxApp;
+			$[3] = input.derived;
+			$[4] = t1;
+		} else t1 = $[4];
+		return t1;
+	}
+	let t1;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(CuratedPageContent, {});
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+}
 function StudioLoadError() {
 	const $ = c(1);
 	let t0;

package/dist/features/runtime/pageClient.js

@@ -4,11 +4,31 @@ import { getPageBlockTypes } from "./pageBlockTypes.js";
 import { loadRuntimeChrome } from "./runtimeChromeLoader.js";
 import { PageApp } from "./pageApp.js";
 import { readHydrationData } from "./hydrationData.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { QueryClient } from "@tanstack/react-query";
 import { hydrateRoot } from "react-dom/client";
 
 //#region src/features/runtime/pageClient.tsx
+/**
+* Announces, as `camox:hydrated` on the window, that React hydrated the page: the look document
+* waits on it before it marks itself ready (ADR 0032).
+*/
+function AnnounceHydrated(t0) {
+	const $ = c(1);
+	const { children } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[0] = t1;
+	} else t1 = $[0];
+	React.useEffect(_temp, t1);
+	return children;
+}
+function _temp() {
+	window.dispatchEvent(new window.Event("camox:hydrated"));
+}
 async function hydratePageWithApp(camoxApp) {
 	const root = document.getElementById("root");
 	if (!root) throw new Error("Camox runtime root element was not found.");
@@ -23,12 +43,12 @@ async function hydratePageWithApp(camoxApp) {
 		queryClient,
 		browser: window
 	});
-	hydrateRoot(root, /* @__PURE__ */ jsx(PageApp, {
+	hydrateRoot(root, /* @__PURE__ */ jsx(AnnounceHydrated, { children: /* @__PURE__ */ jsx(PageApp, {
 		camoxApp,
 		draftScope,
 		input,
 		queryClient
-	}));
+	}) }));
 }
 
 //#endregion

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

@@ -34,6 +34,16 @@ export interface PageRenderInput extends DraftRead {
   analytics?: AnalyticsProviders;
   /** Authenticate before rendering, to show the Studio around the page. */
   previewHandoff?: boolean;
+  /**
+   * The look document's Block Definition mode (ADR 0032): the id of the one block it shows, alone,
+   * instead of a page. Its block bundle is in the dehydrated state.
+   */
+  lookBlock?: string;
+  /**
+   * Whether this is the look document (ADR 0032), whose client only shows the draft: it asks
+   * nothing about a session and offers no sign-in, which would add requests to its captures.
+   */
+  look?: boolean;
   previewDocument?: string;
   routeKind?: StudioRouteKind;
   /** Whether the location is the Canvas with nothing selected, which only the Canvas shows. */