camox 0.63.0 → 0.65.1

package/dist/features/canvas/canvasCamera.js

@@ -23,6 +23,11 @@ const MAX_CANVAS_ZOOM = 2;
 * camera, so painting and panning slow down with the size of the site.
 */
 const MIN_CANVAS_ZOOM = .1;
+/**
+* The overview is at most this fraction of the page fit's zoom, so it always
+* shows a Page as an item on the Canvas, even when the site is one short Page.
+*/
+const CANVAS_OVERVIEW_PAGE_ZOOM = .6;
 /** Log-scale zoom per pixel of Ctrl/⌘ + wheel, including trackpad pinches. */
 const CANVAS_WHEEL_ZOOM_RATE = .0139392;
 /** Relative (log-scale) bands make the detent feel the same at every page width. */
@@ -178,7 +183,11 @@ function zoomCanvasAt(camera, point, scale, minimumScale = Number.EPSILON, maxim
 }
 function fitCanvas(viewport, content) {
 	const padding = canvasInsets(viewport);
-	const scale = Math.max(Number.EPSILON, Math.min(1, (viewport.width - padding.x * 2) / Math.max(1, content.width), (viewport.height - padding.top - padding.bottom) / Math.max(1, content.height)));
+	const pageZoom = content.pageWidth === void 0 ? Infinity : CANVAS_OVERVIEW_PAGE_ZOOM * fitCanvasPage(viewport, {
+		left: 0,
+		width: content.pageWidth
+	}).scale;
+	const scale = Math.max(Number.EPSILON, Math.min(1, pageZoom, (viewport.width - padding.x * 2) / Math.max(1, content.width), (viewport.height - padding.top - padding.bottom) / Math.max(1, content.height)));
 	return {
 		x: (viewport.width - content.width * scale) / 2,
 		y: (viewport.height + padding.top - padding.bottom - content.height * scale) / 2,
@@ -241,4 +250,4 @@ function canvasWheelDelta(delta, mode, viewportSize) {
 }
 
 //#endregion
-export { CANVAS_OVERSCROLL, CANVAS_WHEEL_ZOOM_RATE, MIN_CANVAS_ZOOM, PAN_SNAP_CAPTURE, PAN_SNAP_RELEASE, ZOOM_SNAP_CAPTURE, ZOOM_SNAP_RELEASE, ZOOM_STRETCH, canvasInsets, canvasMaximumScale, canvasMinimumScale, canvasOverview, canvasTargetOffset, canvasVerticalRail, canvasWheelDelta, constrainCanvasCamera, findCanvasSnapTarget, fitCanvas, fitCanvasPage, isCanvasCameraSnapped, isCanvasPageScale, isInCanvasSnapWindow, placeCanvasPageAnchor, snapCanvasZoom, stretchCanvasZoom, unstretchCanvasZoom, zoomCanvasAt };
+export { CANVAS_OVERSCROLL, CANVAS_OVERVIEW_PAGE_ZOOM, CANVAS_WHEEL_ZOOM_RATE, MIN_CANVAS_ZOOM, PAN_SNAP_CAPTURE, PAN_SNAP_RELEASE, ZOOM_SNAP_CAPTURE, ZOOM_SNAP_RELEASE, ZOOM_STRETCH, canvasInsets, canvasMaximumScale, canvasMinimumScale, canvasOverview, canvasTargetOffset, canvasVerticalRail, canvasWheelDelta, constrainCanvasCamera, findCanvasSnapTarget, fitCanvas, fitCanvasPage, isCanvasCameraSnapped, isCanvasPageScale, isInCanvasSnapWindow, placeCanvasPageAnchor, snapCanvasZoom, stretchCanvasZoom, unstretchCanvasZoom, zoomCanvasAt };

package/dist/features/canvas/useCanvasCamera.js

@@ -117,10 +117,19 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			};
 		};
 		let viewportSize = measureViewport();
-		const measureContent = () => ({
-			width: rowRef.current?.width ?? content.offsetWidth,
-			height: content.offsetHeight
-		});
+		const page = initialTargetRef.current;
+		const targets = () => rowRef.current?.targets ?? (page ? [{
+			...page,
+			key: "initial"
+		}] : []);
+		const measureContent = () => {
+			const widths = targets().map((target) => target.width);
+			return {
+				width: rowRef.current?.width ?? content.offsetWidth,
+				height: content.offsetHeight,
+				pageWidth: widths.length ? Math.min(...widths) : void 0
+			};
+		};
 		let contentSize = measureContent();
 		let minimumScale = canvasMinimumScale(viewportSize, contentSize);
 		const updateGeometry = (nextViewport = measureViewport(), nextContent = measureContent()) => {
@@ -128,11 +137,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			contentSize = nextContent;
 			minimumScale = canvasMinimumScale(viewportSize, contentSize);
 		};
-		const page = initialTargetRef.current;
-		const targets = () => rowRef.current?.targets ?? (page ? [{
-			...page,
-			key: "initial"
-		}] : []);
 		const targetOf = (key) => key == null ? void 0 : targets().find((candidate) => candidate.key === key);
 		let stretch;
 		let zoomEnd = 0;
@@ -511,7 +515,7 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			const previousInsets = insets;
 			const nextViewport = measureViewport();
 			const nextContent = measureContent();
-			if (insets.left === previousInsets.left && insets.top === previousInsets.top && nextViewport.width === viewportSize.width && nextViewport.height === viewportSize.height && nextContent.width === contentSize.width && nextContent.height === contentSize.height) return;
+			if (insets.left === previousInsets.left && insets.top === previousInsets.top && nextViewport.width === viewportSize.width && nextViewport.height === viewportSize.height && nextContent.width === contentSize.width && nextContent.height === contentSize.height && nextContent.pageWidth === contentSize.pageWidth) return;
 			const wasFitted = isOverview(target);
 			gesture = void 0;
 			const held = nextViewport.width !== viewportSize.width && !flight && !fittingInitialPage ? targetOf(selection) : void 0;

package/dist/features/page/CuratedPageContent.js

@@ -12,6 +12,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/features/page/CuratedPageContent.tsx
+/** A block read with its bundle, rendered by its definition's code as a page shows it. */
 function PageBlock(t0) {
 	const $ = c(19);
 	const { blockId, mode } = t0;
@@ -177,4 +178,4 @@ function _temp(block) {
 }
 
 //#endregion
-export { CuratedPageContent };
+export { CuratedPageContent, PageBlock };

package/dist/features/page/UnplacedBlockContent.js

@@ -0,0 +1,52 @@
+import { reads, useRead } from "../../lib/studio-reads.js";
+import { BlockErrorBoundary } from "../preview/components/BlockErrorBoundary.js";
+import { PageBlock } from "./CuratedPageContent.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/page/UnplacedBlockContent.tsx
+/**
+* A block placed nowhere, alone, as a page would show it: the look document's Block Definition
+* mode (ADR 0032). Its bundle is read like a page's block, so it renders and hydrates as one.
+* Thumbnails render a Block Definition their own way (`BlockPeek`); only the block render is
+* shared.
+*/
+function UnplacedBlockContent(t0) {
+	const $ = c(8);
+	const { blockId } = t0;
+	let t1;
+	if ($[0] !== blockId) {
+		t1 = reads.blockBundle(blockId);
+		$[0] = blockId;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { block } = useRead(t1);
+	let t2;
+	if ($[2] !== blockId) {
+		t2 = /* @__PURE__ */ jsx(PageBlock, {
+			blockId,
+			mode: "site"
+		});
+		$[2] = blockId;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== block.type || $[5] !== blockId || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx("main", {
+			className: "flex flex-col",
+			children: /* @__PURE__ */ jsx(BlockErrorBoundary, {
+				blockId,
+				blockType: block.type,
+				children: t2
+			})
+		});
+		$[4] = block.type;
+		$[5] = blockId;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+}
+
+//#endregion
+export { UnplacedBlockContent };

package/dist/features/preview/components/PreviewPanel.js

@@ -11,6 +11,7 @@ import { previewPageIframeProps, usePreviewPageFrame } from "../previewPageFrame
 import { adoptCanvasDocument, pauseCanvasDocument } from "../../canvas/canvasFrameDocument.js";
 import { forwardCanvasWheel, useCanvasFrameInput } from "../../canvas/useCanvasFrameInput.js";
 import { useActionShortcuts } from "../../provider/useAdminShortcuts.js";
+import { guardStrayCaret } from "../strayCaretGuard.js";
 import { useBlockActionsShortcuts } from "./BlockActionsPopover.js";
 import { FieldOverlayStyles } from "./FieldOverlayStyles.js";
 import { MobilePreviewDrawer } from "./MobilePreviewDrawer.js";
@@ -60,6 +61,7 @@ const PreviewFrameEffects = () => {
 		t0 = /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(FieldOverlayStyles, {}),
 			/* @__PURE__ */ jsx(KeyDownForwarder, {}),
+			/* @__PURE__ */ jsx(StrayCaretGuard, {}),
 			/* @__PURE__ */ jsx(OverlayTracker, {})
 		] });
 		$[0] = t0;
@@ -72,6 +74,27 @@ const KeyDownForwarder = () => {
 	useActionShortcuts(inIframe ? iframeWindow : null);
 	return null;
 };
+const StrayCaretGuard = () => {
+	const $ = c(3);
+	const { window: iframeWindow } = useFrame();
+	let t0;
+	let t1;
+	if ($[0] !== iframeWindow) {
+		t0 = () => {
+			if (!iframeWindow) return;
+			return guardStrayCaret(iframeWindow.document);
+		};
+		t1 = [iframeWindow];
+		$[0] = iframeWindow;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	React.useEffect(t0, t1);
+	return null;
+};
 /** The preview's read-only tree is never editable, whether or not the Canvas shows. */
 const READ_ONLY_ARTIFACT_STUDIO = {
 	editing: false,
@@ -91,7 +114,7 @@ function CuratedBlockShortcuts() {
 * when used, pauses with the camera, and draws its editing overlays.
 */
 function PreviewPageCanvasEffects(t0) {
-	const $ = c(30);
+	const $ = c(31);
 	const { owner } = t0;
 	const { window: frameWindow, iframeElement } = useFrame();
 	const { frame, slot, inCanvas } = usePreviewPageFrame();
@@ -225,33 +248,38 @@ function PreviewPageCanvasEffects(t0) {
 	if (!placed) return null;
 	let t11;
 	let t12;
+	let t13;
 	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
 		t11 = /* @__PURE__ */ jsx(FieldOverlayStyles, {});
-		t12 = /* @__PURE__ */ jsx(OverlayTracker, {});
+		t12 = /* @__PURE__ */ jsx(StrayCaretGuard, {});
+		t13 = /* @__PURE__ */ jsx(OverlayTracker, {});
 		$[24] = t11;
 		$[25] = t12;
+		$[26] = t13;
 	} else {
 		t11 = $[24];
 		t12 = $[25];
+		t13 = $[26];
 	}
-	const t13 = owner?.kind === "page";
-	let t14;
-	if ($[26] !== iframeElement || $[27] !== owner || $[28] !== t13) {
-		t14 = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const t14 = owner?.kind === "page";
+	let t15;
+	if ($[27] !== iframeElement || $[28] !== owner || $[29] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(Fragment, { children: [
 			t11,
 			t12,
+			t13,
 			/* @__PURE__ */ jsx(Overlays, {
 				frame: iframeElement,
 				owner,
-				canAddBlocks: t13
+				canAddBlocks: t14
 			})
 		] });
-		$[26] = iframeElement;
-		$[27] = owner;
-		$[28] = t13;
+		$[27] = iframeElement;
+		$[28] = owner;
 		$[29] = t14;
-	} else t14 = $[29];
-	return t14;
+		$[30] = t15;
+	} else t15 = $[30];
+	return t15;
 }
 function _temp(event) {
 	if (event.target?.closest?.("a")) event.preventDefault();

package/dist/features/preview/components/SidebarStack.js

@@ -143,6 +143,8 @@ function SidebarStack(t0) {
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = {
 			ready: false,
+			boxes: /* @__PURE__ */ new Map(),
+			observer: null,
 			front: null,
 			behind: null,
 			inFront: null
@@ -156,8 +158,16 @@ function SidebarStack(t0) {
 		t2 = () => {
 			const current = motion.current;
 			current.ready = true;
+			if (typeof ResizeObserver !== "undefined") {
+				const observer = new ResizeObserver(() => measureCards(current));
+				current.observer = observer;
+				for (const card of current.boxes.keys()) observer.observe(card);
+				if (current.inFront?.parentElement) observer.observe(current.inFront.parentElement);
+			}
 			return () => {
 				current.ready = false;
+				current.observer?.disconnect();
+				current.observer = null;
 			};
 		};
 		t3 = [];
@@ -233,20 +243,57 @@ function SidebarStack(t0) {
 	} else t9 = $[12];
 	return t9;
 }
-/** A still copy of a card, where it was, so it can move away once the card is gone. */
-function copyCard(card, layer) {
-	const layerRect = layer.getBoundingClientRect();
+/**
+* Where a card is laid out relative to `stack`, whose box its layers fill. Offsets leave out the
+* transforms that move cards as they come.
+*/
+function layoutBox(card, stack) {
+	let left = 0;
+	let top = 0;
+	let node = card;
+	while (node && node !== stack) {
+		left += node.offsetLeft;
+		top += node.offsetTop;
+		const parent = node.offsetParent;
+		if (parent && parent !== stack) {
+			left += parent.clientLeft;
+			top += parent.clientTop;
+		}
+		node = parent;
+	}
+	if (node === stack) return {
+		left,
+		top,
+		width: card.offsetWidth,
+		height: card.offsetHeight
+	};
+	const stackRect = stack.getBoundingClientRect();
 	const rect = card.getBoundingClientRect();
+	return {
+		left: rect.left - stackRect.left,
+		top: rect.top - stackRect.top,
+		width: rect.width,
+		height: rect.height
+	};
+}
+/** Notes where each card of the stack is laid out now. */
+function measureCards(motion) {
+	const stack = motion.inFront?.parentElement;
+	if (!stack) return;
+	for (const card of motion.boxes.keys()) if (card.isConnected) motion.boxes.set(card, layoutBox(card, stack));
+}
+/** A still copy of a card, at `box`, so it can move away once the card is gone. */
+function copyCard(card, box) {
 	const copy = card.cloneNode(true);
 	copy.setAttribute("aria-hidden", "true");
 	copy.setAttribute("inert", "");
 	Object.assign(copy.style, {
 		position: "absolute",
 		margin: "0",
-		left: `${rect.left - layerRect.left}px`,
-		top: `${rect.top - layerRect.top}px`,
-		width: `${rect.width}px`,
-		height: `${rect.height}px`
+		left: `${box.left}px`,
+		top: `${box.top}px`,
+		width: `${box.width}px`,
+		height: `${box.height}px`
 	});
 	const scrolled = [];
 	const walk = (node, path) => {
@@ -276,6 +323,13 @@ function useStackCard(ref, depth, isView) {
 		const card = ref.current;
 		const motion = stack?.current;
 		if (!card || !motion || depth == null) return;
+		if (!motion.boxes.has(card)) motion.boxes.set(card, {
+			left: 0,
+			top: 0,
+			width: 0,
+			height: 0
+		});
+		motion.observer?.observe(card);
 		const previousFront = motion.front;
 		if (isView) motion.front = depth;
 		if (motion.ready && previousFront != null && prefersMotion()) {
@@ -289,10 +343,21 @@ function useStackCard(ref, depth, isView) {
 		}
 		return () => {
 			const { behind, inFront } = motion;
-			if (!motion.ready || !behind || !inFront || !prefersMotion()) return;
-			const { copy, restoreScroll } = copyCard(card, inFront);
+			const box = motion.boxes.get(card);
+			const forget = () => {
+				motion.boxes.delete(card);
+				motion.observer?.unobserve(card);
+			};
+			if (!motion.ready || !behind || !inFront || !box || !prefersMotion()) {
+				queueMicrotask(() => {
+					if (!card.isConnected) forget();
+				});
+				return;
+			}
+			const { copy, restoreScroll } = copyCard(card, box);
 			queueMicrotask(() => {
 				if (card.isConnected) return;
+				forget();
 				const how = motionFor(depth, motion.front ?? depth);
 				(how === "front" ? inFront : behind).append(copy);
 				restoreScroll();
@@ -303,6 +368,10 @@ function useStackCard(ref, depth, isView) {
 			});
 		};
 	}, []);
+	React.useLayoutEffect(() => {
+		const motion = stack?.current;
+		if (motion) measureCards(motion);
+	});
 }
 /**
 * Eases a header's card and content from where they were laid out before `shape` changed to

package/dist/features/preview/strayCaretGuard.js

@@ -0,0 +1,34 @@
+//#region src/features/preview/strayCaretGuard.ts
+/** Where the browser would put the caret for a click at this point. */
+function caretNodeAt(doc, x, y) {
+	if (typeof doc.caretPositionFromPoint === "function") return doc.caretPositionFromPoint(x, y)?.offsetNode ?? null;
+	return doc.caretRangeFromPoint?.(x, y)?.startContainer ?? null;
+}
+function isEditable(node) {
+	return (node?.nodeType === 1 ? node : node?.parentElement ?? null)?.closest("[contenteditable=\"\"], [contenteditable=\"true\"]") != null;
+}
+/**
+* Keep a click beside an editable field from landing in it. On a click over
+* non-editable content, browsers put the caret at the nearest text, and when that
+* text is in a field, they focus it: clicking a block's padding next to a heading
+* starts editing the heading instead of selecting the block. Such a click now only
+* leaves the field being edited, as a click on content without text would.
+*/
+function guardStrayCaret(doc) {
+	const onMouseDown = (event) => {
+		if (event.button !== 0) return;
+		const target = event.target;
+		if (!target || isEditable(target)) return;
+		if (target.closest?.("input, textarea, select, button")) return;
+		if (!isEditable(caretNodeAt(doc, event.clientX, event.clientY))) return;
+		event.preventDefault();
+		const active = doc.activeElement;
+		if (active?.isContentEditable) active.blur();
+		doc.getSelection()?.removeAllRanges();
+	};
+	doc.addEventListener("mousedown", onMouseDown, true);
+	return () => doc.removeEventListener("mousedown", onMouseDown, true);
+}
+
+//#endregion
+export { guardStrayCaret };

package/dist/features/provider/CoreCamoxProvider.js

@@ -9,7 +9,7 @@ import { jsx } from "react/jsx-runtime";
 import { replaceEqualDeep, useQueryClient } from "@tanstack/react-query";
 
 //#region src/features/provider/CoreCamoxProvider.tsx
-function CoreCamoxProvider({ apiUrl, authenticationUrl, camoxApp, children, projectUuid, initialAuthenticated = false, initialProject }) {
+function CoreCamoxProvider({ apiUrl, authenticationUrl, camoxApp, children, projectUuid, initialAuthenticated = false, initialProject, sessionless = false }) {
 	const queryClient = useQueryClient();
 	const authClient = React.useMemo(() => createCamoxAuthClient(apiUrl), [apiUrl]);
 	const providedScope = React.useContext(DraftScopeContext);
@@ -48,14 +48,16 @@ function CoreCamoxProvider({ apiUrl, authenticationUrl, camoxApp, children, proj
 		apiUrl,
 		projectUuid,
 		initialAuthenticated,
-		exchangingToken
+		exchangingToken,
+		sessionless
 	}), [
 		authClient,
 		authenticationUrl,
 		apiUrl,
 		projectUuid,
 		initialAuthenticated,
-		exchangingToken
+		exchangingToken,
+		sessionless
 	]);
 	const [isPreviewHandoff, setIsPreviewHandoff] = React.useState(false);
 	React.useEffect(() => {

package/dist/features/routes/pageRuntime.d.ts

@@ -46,6 +46,8 @@ export interface DraftRead {
 }
 export declare function createServerApiClient(apiUrl: string, options?: {
   authCookieHeader?: string;
+  /** A look token, which reads the draft it was signed for without a session (ADR 0032). */
+  lookToken?: string;
   draftId?: string;
   locale?: LocaleView;
 }): RouterClient<Router>;

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
 		}),