camox 0.43.0 → 0.45.0

package/dist/features/preview/pageRecord.js

@@ -0,0 +1,189 @@
+import { localizedPath } from "../../lib/locale-path.js";
+import { useDraftScope } 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 { fetchRuntimeJson } from "../runtime/navigationTarget.js";
+import { reads, useReadQuery } from "../../lib/studio-reads.js";
+import { asCollectionItem } from "../../core/recordItem.js";
+import { useLatestRecord } from "../../core/editing/useLatestRecord.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+
+//#region src/features/preview/pageRecord.ts
+/** The record a record page renders, as its loader's collection-item envelope names it. */
+function getPageRecord(result) {
+	const record = asCollectionItem(result);
+	if (!record) return void 0;
+	return {
+		collectionId: record.collectionId,
+		id: record.data.id
+	};
+}
+/** The record page `input` renders, or undefined when it renders none. */
+function shownRecordPage(input) {
+	const record = getPageRecord(input.derived?.result);
+	if (!input.derived || !record) return void 0;
+	return {
+		layoutId: input.derived.layoutId,
+		recordId: record.id,
+		runtimeBasePath: input.runtimeBasePath ?? ""
+	};
+}
+/**
+* The previewed code-owned page's loader result. The server rendered the page with `loaded`;
+* editing or publishing records loads it again.
+*/
+function useDerivedPageResult(t0) {
+	const $ = c(6);
+	const { projectUuid, runtimeBasePath, pathname, loaded } = t0;
+	let t1;
+	if ($[0] !== pathname || $[1] !== projectUuid || $[2] !== runtimeBasePath) {
+		t1 = reads.derivedPageData({
+			projectUuid,
+			runtimeBasePath,
+			pathname
+		});
+		$[0] = pathname;
+		$[1] = projectUuid;
+		$[2] = runtimeBasePath;
+		$[3] = t1;
+	} else t1 = $[3];
+	const t2 = loaded != null;
+	let t3;
+	if ($[4] !== t2) {
+		t3 = { enabled: t2 };
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	const { data } = useReadQuery(t1, t3);
+	if (data === void 0) return loaded?.result;
+	return data ?? void 0;
+}
+/**
+* Keeps the Studio on the previewed record's page. Whenever a save through any placement
+* changes the record, the layout's route discovery finds its page again: editing the field the
+* page is found by (its slug) moves the Studio to the new URL rather than leaving it on a 404.
+*/
+function useFollowPageRecord(t0) {
+	const $ = c(18);
+	const { projectUuid, runtimeBasePath, layoutId, record } = t0;
+	const location = useLocation();
+	const navigate = useNavigate();
+	const draftScope = useDraftScope();
+	let t1;
+	if ($[0] !== projectUuid || $[1] !== record?.collectionId || $[2] !== record?.id) {
+		t1 = reads.record({
+			projectUuid,
+			collectionId: record?.collectionId ?? "",
+			id: record?.id ?? ""
+		});
+		$[0] = projectUuid;
+		$[1] = record?.collectionId;
+		$[2] = record?.id;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			enabled: false,
+			select: _temp
+		};
+		$[4] = t2;
+	} else t2 = $[4];
+	const { data: savedAt } = useReadQuery(t1, t2);
+	const { locale } = useViewLocale();
+	let t3;
+	if ($[5] !== draftScope || $[6] !== layoutId || $[7] !== locale || $[8] !== location || $[9] !== navigate || $[10] !== record || $[11] !== runtimeBasePath) {
+		t3 = async (signal) => {
+			if (!layoutId || !record) return;
+			const response = await fetchRuntimeJson(draftScope, "/_camox/routes", runtimeBasePath, {
+				layoutId,
+				recordId: record.id
+			}, draftScope.current(), signal, locale);
+			if (!response.ok) return;
+			const { path } = await response.json();
+			const to = path && localizedPath(path, locale);
+			if (!to || to === location.pathname || signal.aborted) return;
+			await navigate({
+				to: `${to}${location.search}${location.hash}`,
+				replace: true,
+				source: "canvas"
+			});
+		};
+		$[5] = draftScope;
+		$[6] = layoutId;
+		$[7] = locale;
+		$[8] = location;
+		$[9] = navigate;
+		$[10] = record;
+		$[11] = runtimeBasePath;
+		$[12] = t3;
+	} else t3 = $[12];
+	const follow = React.useEffectEvent(t3);
+	let t4;
+	if ($[13] !== follow || $[14] !== savedAt) {
+		t4 = () => {
+			if (savedAt == null) return;
+			const controller = new AbortController();
+			follow(controller.signal).catch(_temp2);
+			return () => controller.abort();
+		};
+		$[13] = follow;
+		$[14] = savedAt;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== savedAt) {
+		t5 = [savedAt];
+		$[16] = savedAt;
+		$[17] = t5;
+	} else t5 = $[17];
+	React.useEffect(t4, t5);
+}
+function _temp2() {}
+function _temp(saved) {
+	return saved.updatedAt;
+}
+/** What the previewed record page's loader returned, for the Studio around its preview. */
+const PageRecordContext = React.createContext(void 0);
+/**
+* The record the previewed record page renders, as the sidebar edits it: as its loader returned
+* it, or as a later save stored it. Null on pages that render no record.
+*/
+function usePageRecordPlacer() {
+	const $ = c(7);
+	const loaded = asCollectionItem(React.use(PageRecordContext));
+	const app = useCamoxApp();
+	const collection = loaded ? app.getCollectionById(loaded.collectionId) : void 0;
+	const collectionId = loaded?.collectionId ?? "";
+	const t0 = collection?._internal.label ?? "";
+	const t1 = collection ? loaded?.data : void 0;
+	let t2;
+	if ($[0] !== collectionId || $[1] !== t0 || $[2] !== t1) {
+		t2 = {
+			collectionId,
+			labelField: t0,
+			loaded: t1
+		};
+		$[0] = collectionId;
+		$[1] = t0;
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	const record = useLatestRecord(t2);
+	let t3;
+	if ($[4] !== collectionId || $[5] !== record) {
+		t3 = record ? {
+			collectionId,
+			record
+		} : null;
+		$[4] = collectionId;
+		$[5] = record;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+
+//#endregion
+export { PageRecordContext, getPageRecord, shownRecordPage, useDerivedPageResult, useFollowPageRecord, usePageRecordPlacer };

package/dist/features/preview/previewConstants.js

@@ -1,8 +1,12 @@
 //#region src/features/preview/previewConstants.ts
-const EDIT_MODE_SHORTCUT = {
+const TOGGLE_CANVAS_SHORTCUT = {
 	key: "Enter",
 	withMeta: true
 };
+const SHOW_WHOLE_CANVAS_SHORTCUT = {
+	key: "Escape",
+	withMeta: true
+};
 
 //#endregion
-export { EDIT_MODE_SHORTCUT };
+export { SHOW_WHOLE_CANVAS_SHORTCUT, TOGGLE_CANVAS_SHORTCUT };

package/dist/features/preview/previewPageFrame.js

@@ -0,0 +1,95 @@
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+
+//#region src/features/preview/previewPageFrame.ts
+/**
+* The Preview's one page frame, which the Canvas borrows for the selected Page.
+* Toggling the Canvas only moves and restyles it, so the page's state, such as an open
+* modal or typed input, carries over in both directions. Selecting another
+* Page renders that Page in it instead.
+*/
+var PreviewPageFrame = class {
+	snapshot = {
+		slot: null,
+		height: 0,
+		overlays: null,
+		iframe: null
+	};
+	listeners = /* @__PURE__ */ new Set();
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	};
+	getSnapshot = () => this.snapshot;
+	update(patch) {
+		const next = {
+			...this.snapshot,
+			...patch
+		};
+		if (!Object.keys(patch).some((key) => next[key] !== this.snapshot[key])) return;
+		this.snapshot = next;
+		for (const listener of this.listeners) listener();
+	}
+	setSlot(slot) {
+		this.update({ slot });
+	}
+	setHeight(height) {
+		this.update({ height });
+	}
+	setOverlays(overlays) {
+		this.update({ overlays });
+	}
+	setIframe(iframe) {
+		this.update({ iframe });
+	}
+};
+/**
+* The frame, whether the Canvas shows, so the frame can take its slot, and the
+* pathname of the page it shows, which the Canvas gives that slot.
+*/
+const PreviewPageFrameContext = React.createContext(null);
+const emptySnapshot = {
+	slot: null,
+	height: 0,
+	overlays: null,
+	iframe: null
+};
+const noSubscription = () => () => {};
+const getEmptySnapshot = () => emptySnapshot;
+function usePreviewPageFrame() {
+	const $ = c(5);
+	const context = React.use(PreviewPageFrameContext);
+	const frame = context?.frame ?? null;
+	const snapshot = React.useSyncExternalStore(frame?.subscribe ?? noSubscription, frame?.getSnapshot ?? getEmptySnapshot, frame?.getSnapshot ?? getEmptySnapshot);
+	const revealed = !!context?.revealed;
+	const t0 = revealed && snapshot.slot !== null;
+	let t1;
+	if ($[0] !== frame || $[1] !== revealed || $[2] !== snapshot || $[3] !== t0) {
+		t1 = {
+			frame,
+			...snapshot,
+			revealed,
+			inCanvas: t0
+		};
+		$[0] = frame;
+		$[1] = revealed;
+		$[2] = snapshot;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+/** Marks the Canvas slot whose Page the Preview page frame shows. */
+const PREVIEW_PAGE_SLOT_ATTRIBUTE = "data-canvas-preview-page";
+const PREVIEW_PAGE_IFRAME_ATTRIBUTE = "data-preview-page-frame";
+const previewPageIframeProps = { [PREVIEW_PAGE_IFRAME_ATTRIBUTE]: "" };
+/** The frame showing a Canvas Page: its own, or the Preview page frame placed over it. */
+function canvasPageIframe(page) {
+	if (!page.hasAttribute("data-canvas-preview-page")) return page.querySelector("iframe");
+	return page.ownerDocument.querySelector(`iframe[${PREVIEW_PAGE_IFRAME_ATTRIBUTE}]`);
+}
+
+//#endregion
+export { PREVIEW_PAGE_SLOT_ATTRIBUTE, PreviewPageFrame, PreviewPageFrameContext, canvasPageIframe, previewPageIframeProps, usePreviewPageFrame };

package/dist/features/preview/previewPreparation.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+
+//#region src/features/preview/previewPreparation.ts
+const PreviewPreparationContext = React.createContext(null);
+
+//#endregion
+export { PreviewPreparationContext };

package/dist/features/preview/previewSelection.js

@@ -1,75 +1,49 @@
-import { previewStore, selectIsCommentMode, selectIsEditMode } from "./previewStore.js";
-import { previewCommentsStore, revealCommentTarget } from "./previewCommentsStore.js";
+import { previewStore, selectIsCanvasShown, selectionForOwner } from "./previewStore.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
+import { useSelector } from "@xstate/store-react";
 
 //#region src/features/preview/previewSelection.ts
-const PreviewPageContext = createContext(null);
-/** Both editing and commenting use the target already known by the editable component. */
-function selectPreviewTarget(selection, pageId, event) {
-	const snapshot = previewStore.getSnapshot();
-	if (!selectIsEditMode(snapshot)) return;
-	if (!selectIsCommentMode(snapshot)) {
-		if (selection.type === "block") {
-			previewStore.send({
-				type: "setFocusedBlock",
-				blockId: selection.blockId
-			});
-			return;
-		}
+const PreviewEditingOwnerContext = createContext(null);
+function usePreviewTargetSelection() {
+	const $ = c(2);
+	const owner = useContext(PreviewEditingOwnerContext);
+	let t0;
+	if ($[0] !== owner) {
+		t0 = (state) => selectionForOwner(state.context, owner);
+		$[0] = owner;
+		$[1] = t0;
+	} else t0 = $[1];
+	return useSelector(previewStore, t0);
+}
+function selectPreviewTarget(selection, owner) {
+	if (!selectIsCanvasShown(previewStore.getSnapshot())) return;
+	if (owner === null) return;
+	if (selection?.type === "block") {
 		previewStore.send({
-			type: "setSelection",
-			selection
+			type: "setFocusedBlock",
+			...owner,
+			blockId: selection.blockId
 		});
 		return;
 	}
-	if (!event) return;
-	event.preventDefault();
-	event.stopPropagation();
-	if (pageId === null) return;
-	const element = event.currentTarget;
-	const rect = element.getBoundingClientRect();
-	const field = selection.type === "block-field" || selection.type === "item-field";
-	const itemId = "itemId" in selection ? selection.itemId : void 0;
-	const attribute = field ? "data-camox-field-id" : selection.type === "item" ? "data-camox-repeater-item-id" : element.hasAttribute("data-camox-comment-block-id") ? "data-camox-comment-block-id" : "data-camox-block-id";
-	const id = field ? [
-		selection.blockId,
-		itemId,
-		selection.fieldName
-	].filter((part) => part != null).join("__") : String(itemId ?? selection.blockId);
-	const target = {
-		blockId: selection.blockId,
-		itemId,
-		fieldName: field ? selection.fieldName : void 0,
-		fieldType: field ? selection.fieldType : void 0,
-		selector: `[${attribute}="${CSS.escape(id)}"]`,
-		label: field ? `Field · ${selection.fieldName}` : `${selection.type === "item" ? "Item" : "Block"} · ${id}`,
-		x: event.clientX == null ? .5 : Math.max(0, Math.min(1, (event.clientX - rect.left) / (rect.width || 1))),
-		y: event.clientY == null ? .5 : Math.max(0, Math.min(1, (event.clientY - rect.top) / (rect.height || 1)))
-	};
-	previewCommentsStore.send({
-		type: "startComment",
-		pageId,
-		target,
-		focusComposer: true
+	previewStore.send({
+		type: "selectTarget",
+		...owner,
+		selection
 	});
-	revealCommentTarget(target);
 }
 function usePreviewSelection() {
-	const $ = c(3);
-	if ($[0] !== "5c1128621012a50122fc348fb93c4181c8f52e6cf8c887d22b4d96421b55a5a6") {
-		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "5c1128621012a50122fc348fb93c4181c8f52e6cf8c887d22b4d96421b55a5a6";
-	}
-	const pageId = useContext(PreviewPageContext);
+	const $ = c(2);
+	const owner = useContext(PreviewEditingOwnerContext);
 	let t0;
-	if ($[1] !== pageId) {
-		t0 = (selection, event) => selectPreviewTarget(selection, pageId, event);
-		$[1] = pageId;
-		$[2] = t0;
-	} else t0 = $[2];
+	if ($[0] !== owner) {
+		t0 = (selection) => selectPreviewTarget(selection, owner);
+		$[0] = owner;
+		$[1] = t0;
+	} else t0 = $[1];
 	return t0;
 }
 
 //#endregion
-export { PreviewPageContext, usePreviewSelection };
+export { PreviewEditingOwnerContext, selectPreviewTarget, usePreviewSelection, usePreviewTargetSelection };