camox 0.44.0 → 0.45.0

package/dist/features/preview/previewStore.js

@@ -1,16 +1,87 @@
-import { areCommentsEnabled } from "./commentsEnabled.js";
 import { createStore } from "@xstate/store-react";
-import { toast } from "@camox/ui/toaster";
 
 //#region src/features/preview/previewStore.ts
-/** Extract the blockId from any selection variant. */
+/**
+* Whether a block places the record. Checks `blockId` rather than `layoutId`, because editing
+* events spread a layout editing owner's `layoutId` next to block-owned placements.
+*/
+function isBlockPlacement(placement) {
+	return "blockId" in placement && placement.blockId != null;
+}
+function copyNested(placement) {
+	if (!placement.nested) return {};
+	return { nested: {
+		fieldName: placement.nested.fieldName,
+		recordId: placement.nested.recordId
+	} };
+}
+function recordPlacement(placement) {
+	if (!isBlockPlacement(placement)) return {
+		layoutId: placement.layoutId,
+		recordId: placement.recordId,
+		...copyNested(placement)
+	};
+	return {
+		blockId: placement.blockId,
+		...placement.itemId == null ? {} : { itemId: placement.itemId },
+		fieldName: placement.fieldName,
+		recordId: placement.recordId,
+		...copyNested(placement)
+	};
+}
+/** Whether two placements are the same occurrence: same owner, field and record. */
+function samePlacement(a, b) {
+	if (a.recordId !== b.recordId) return false;
+	if (a.nested?.fieldName !== b.nested?.fieldName) return false;
+	if (a.nested?.recordId !== b.nested?.recordId) return false;
+	if (!isBlockPlacement(a)) return !isBlockPlacement(b) && a.layoutId === b.layoutId;
+	if (!isBlockPlacement(b)) return false;
+	return a.blockId === b.blockId && (a.itemId ?? null) === (b.itemId ?? null) && a.fieldName === b.fieldName;
+}
+function sameEditingOwner(a, b) {
+	if (!a || !b) return a === b;
+	if (a.kind === "page") return b.kind === "page" && a.pageId === b.pageId;
+	return b.kind === "layout" && a.layoutId === b.layoutId;
+}
+function targetContext(owner, selection) {
+	if (owner.kind === "page") return {
+		kind: "page",
+		pageId: owner.pageId,
+		selection
+	};
+	return {
+		kind: "layout",
+		layoutId: owner.layoutId,
+		selection
+	};
+}
+function selectionForOwner(context, owner) {
+	if (!sameEditingOwner(context.editingContext, owner)) return null;
+	return context.editingContext?.selection ?? null;
+}
+/** Read a selection only in the page that contains the editor. */
+function selectionForPage(context, pageId) {
+	return selectionForOwner(context, pageId === null ? null : {
+		kind: "page",
+		pageId
+	});
+}
+/** Narrows to selections inside a block, excluding records placed by a layout. */
+function isBlockSelection(sel) {
+	if (!sel) return false;
+	if (sel.type === "record" || sel.type === "record-field") return isBlockPlacement(sel);
+	return true;
+}
+/** Extract the blockId from any selection variant; null for a record a layout places. */
 function selectionBlockId(sel) {
-	return sel?.blockId ?? null;
+	if (!isBlockSelection(sel)) return null;
+	return sel.blockId;
 }
-/** Extract the itemId from item or item-field selections. */
+/** Extract the itemId from item and item-field selections, and records placed by an item. */
 function selectionItemId(sel) {
-	if (!sel) return null;
+	if (!isBlockSelection(sel)) return null;
 	if (sel.type === "item" || sel.type === "item-field") return sel.itemId;
+	if (sel.type === "record" || sel.type === "record-field") return sel.itemId ?? null;
 	return null;
 }
 /** Check if the selection is viewing a terminal field (link, image, file, etc.). */
@@ -22,46 +93,33 @@ function selectionField(sel) {
 	};
 	return null;
 }
-const selectIsCommentMode = (state) => state.context.mode === "commenting-draft";
-/** Commenting is a draft-only editing submode. */
-const selectIsEditMode = (state) => state.context.mode === "editing-draft" || selectIsCommentMode(state);
-const selectPreviewSource = (state) => state.context.mode === "previewing-live" ? "live" : "draft";
+const selectIsCanvasShown = (state) => state.context.view === "canvas";
+const initialPreviewContext = {
+	view: "preview",
+	isToolbarHidden: false,
+	addBlockDialog: null,
+	isCreatePageModalOpen: false,
+	editingPageId: null,
+	viewportMode: "full",
+	editingContext: null
+};
 const previewStore = createStore({
-	context: {
-		mode: "previewing-draft",
-		isToolbarHidden: false,
-		isAddBlockSidebarOpen: false,
-		isCreatePageModalOpen: false,
-		editingPageId: null,
-		viewportMode: "full",
-		peekedBlock: null,
-		peekedBlockPosition: null,
-		skipPeekedBlockExitAnimation: false,
-		selection: null,
-		iframeElement: null
-	},
+	context: initialPreviewContext,
 	on: {
-		setCommentMode: (context, event) => {
-			if (!selectIsEditMode({ context })) return context;
-			const commenting = areCommentsEnabled() && event.enabled;
+		/** Starts over, as a new Studio session does. */
+		reset: () => initialPreviewContext,
+		hideCanvas: (context) => {
+			if (!selectIsCanvasShown({ context })) return context;
 			return {
 				...context,
-				mode: commenting ? "commenting-draft" : "editing-draft",
-				selection: commenting ? null : context.selection
+				view: "preview"
 			};
 		},
-		exitEditMode: (context) => {
-			if (!selectIsEditMode({ context })) return context;
+		showCanvas: (context) => {
+			if (selectIsCanvasShown({ context })) return context;
 			return {
 				...context,
-				mode: "previewing-draft"
-			};
-		},
-		enterEditMode: (context) => {
-			if (selectIsEditMode({ context })) return context;
-			return {
-				...context,
-				mode: "editing-draft",
+				view: "canvas",
 				isToolbarHidden: false
 			};
 		},
@@ -69,16 +127,6 @@ const previewStore = createStore({
 			...context,
 			isToolbarHidden: true
 		}),
-		viewLivePage: (context, _, enqueue) => {
-			enqueue.effect(() => {
-				toast("Viewing live version of the site");
-			});
-			return {
-				...context,
-				mode: "previewing-live",
-				isToolbarHidden: true
-			};
-		},
 		setViewportMode: (context, event) => {
 			if (context.viewportMode === event.mode) return context;
 			return {
@@ -93,123 +141,192 @@ const previewStore = createStore({
 				viewportMode: nextMode
 			};
 		},
-		setPeekedBlock: (context, event) => {
-			if (!event.block) return context;
+		activatePage: (context, event) => {
+			const owner = event.pageId === null ? null : {
+				kind: "page",
+				pageId: event.pageId
+			};
+			if (sameEditingOwner(context.editingContext, owner)) return context;
 			return {
 				...context,
-				peekedBlock: event.block,
-				peekedBlockPosition: event.afterPosition ?? null
+				editingContext: owner ? targetContext(owner, null) : null,
+				addBlockDialog: null
 			};
 		},
-		exitPeekedBlock: (context) => ({
-			...context,
-			peekedBlock: null,
-			peekedBlockPosition: null,
-			isAddBlockSidebarOpen: false
-		}),
-		clearPeekedBlock: (context) => ({
-			...context,
-			peekedBlock: null,
-			peekedBlockPosition: null
-		}),
-		setSelection: (context, event) => ({
+		activateLayout: (context, event) => {
+			const owner = {
+				kind: "layout",
+				layoutId: event.layoutId
+			};
+			if (sameEditingOwner(context.editingContext, owner)) return context;
+			return {
+				...context,
+				editingContext: targetContext(owner, null),
+				addBlockDialog: null
+			};
+		},
+		selectTarget: (context, event) => ({
 			...context,
-			selection: event.selection
+			editingContext: targetContext(event, event.selection)
 		}),
 		setFocusedBlock: (context, event) => ({
 			...context,
-			selection: {
+			editingContext: targetContext(event, {
 				type: "block",
 				blockId: event.blockId
-			},
-			peekedBlock: null,
-			peekedBlockPosition: null,
-			isAddBlockSidebarOpen: false
+			}),
+			addBlockDialog: null
 		}),
 		selectItem: (context, event) => ({
 			...context,
-			selection: {
+			editingContext: targetContext(event, {
 				type: "item",
 				blockId: event.blockId,
 				itemId: event.itemId
-			}
+			})
 		}),
 		selectBlockField: (context, event) => ({
 			...context,
-			selection: {
+			editingContext: targetContext(event, {
 				type: "block-field",
 				blockId: event.blockId,
 				fieldName: event.fieldName,
 				fieldType: event.fieldType
-			}
+			})
 		}),
 		selectItemField: (context, event) => ({
 			...context,
-			selection: {
+			editingContext: targetContext(event, {
 				type: "item-field",
 				blockId: event.blockId,
 				itemId: event.itemId,
 				fieldName: event.fieldName,
 				fieldType: event.fieldType
-			}
+			})
+		}),
+		selectRecord: (context, event) => ({
+			...context,
+			editingContext: targetContext(event, {
+				type: "record",
+				...recordPlacement(event)
+			})
+		}),
+		selectRecordField: (context, event) => ({
+			...context,
+			editingContext: targetContext(event, {
+				type: "record-field",
+				...recordPlacement(event),
+				recordFieldName: event.recordFieldName,
+				recordFieldType: event.recordFieldType
+			})
 		}),
 		selectParent: (context) => {
-			const sel = context.selection;
+			const editingContext = context.editingContext;
+			const sel = editingContext?.selection;
 			if (!sel) return context;
+			if (sel.type === "record-field") return {
+				...context,
+				editingContext: {
+					...editingContext,
+					selection: {
+						type: "record",
+						...recordPlacement(sel)
+					}
+				}
+			};
+			if (sel.type === "record" && sel.nested) {
+				const { nested: _nested, ...outer } = recordPlacement(sel);
+				return {
+					...context,
+					editingContext: {
+						...editingContext,
+						selection: {
+							type: "record-field",
+							...outer,
+							recordFieldName: sel.nested.fieldName,
+							recordFieldType: "Reference"
+						}
+					}
+				};
+			}
+			if (sel.type === "record" && !isBlockPlacement(sel)) return context;
+			if (sel.type === "record") {
+				const field = {
+					fieldName: sel.fieldName,
+					fieldType: "Reference"
+				};
+				return {
+					...context,
+					editingContext: {
+						...editingContext,
+						selection: sel.itemId == null ? {
+							type: "block-field",
+							blockId: sel.blockId,
+							...field
+						} : {
+							type: "item-field",
+							blockId: sel.blockId,
+							itemId: sel.itemId,
+							...field
+						}
+					}
+				};
+			}
 			if (sel.type === "block-field") return {
 				...context,
-				selection: {
-					type: "block",
-					blockId: sel.blockId
+				editingContext: {
+					...editingContext,
+					selection: {
+						type: "block",
+						blockId: sel.blockId
+					}
 				}
 			};
 			if (sel.type === "item-field") return {
 				...context,
-				selection: {
-					type: "item",
-					blockId: sel.blockId,
-					itemId: sel.itemId
+				editingContext: {
+					...editingContext,
+					selection: {
+						type: "item",
+						blockId: sel.blockId,
+						itemId: sel.itemId
+					}
 				}
 			};
 			if (sel.type === "item") return {
 				...context,
-				selection: {
-					type: "block",
-					blockId: sel.blockId
+				editingContext: {
+					...editingContext,
+					selection: {
+						type: "block",
+						blockId: sel.blockId
+					}
 				}
 			};
 			return context;
 		},
 		clearSelection: (context) => ({
 			...context,
-			selection: null
+			editingContext: context.editingContext ? {
+				...context.editingContext,
+				selection: null
+			} : null
 		}),
-		openAddBlockSidebar: (context, event) => ({
+		openAddBlockDialog: (context, event) => ({
 			...context,
-			isAddBlockSidebarOpen: true,
-			peekedBlock: null,
-			peekedBlockPosition: event.afterPosition ?? null
+			addBlockDialog: { afterPosition: event.afterPosition }
 		}),
-		closeAddBlockSidebar: (context) => ({
+		closeAddBlockDialog: (context) => ({
 			...context,
-			isAddBlockSidebarOpen: false,
-			peekedBlock: null,
-			peekedBlockPosition: null
+			addBlockDialog: null
 		}),
 		focusCreatedBlock: (context, event) => ({
 			...context,
-			selection: {
+			editingContext: targetContext(event, {
 				type: "block",
 				blockId: event.blockId
-			},
-			isAddBlockSidebarOpen: false,
-			peekedBlock: null,
-			peekedBlockPosition: null,
-			skipPeekedBlockExitAnimation: true
-		}),
-		clearSkipPeekedBlockExitAnimation: (context) => ({
-			...context,
-			skipPeekedBlockExitAnimation: false
+			}),
+			addBlockDialog: null
 		}),
 		openCreatePageModal: (context) => ({
 			...context,
@@ -229,24 +346,9 @@ const previewStore = createStore({
 		closeEditPageModal: (context) => ({
 			...context,
 			editingPageId: null
-		}),
-		setIframeElement: (context, event) => ({
-			...context,
-			iframeElement: event.element
-		}),
-		viewDraftPage: (context, _, enqueue) => {
-			if (context.mode !== "previewing-live") return context;
-			enqueue.effect(() => {
-				toast("Previewing draft content", { duration: 2500 });
-			});
-			return {
-				...context,
-				mode: "previewing-draft",
-				isToolbarHidden: false
-			};
-		}
+		})
 	}
 });
 
 //#endregion
-export { previewStore, selectIsCommentMode, selectIsEditMode, selectPreviewSource, selectionBlockId, selectionField, selectionItemId };
+export { isBlockPlacement, isBlockSelection, previewStore, recordPlacement, sameEditingOwner, samePlacement, selectIsCanvasShown, selectionBlockId, selectionField, selectionForOwner, selectionForPage, selectionItemId };

package/dist/features/preview/referencePickerFocus.js

@@ -0,0 +1,29 @@
+import { c } from "react/compiler-runtime";
+import { createStore, useSelector } from "@xstate/store-react";
+
+//#region src/features/preview/referencePickerFocus.ts
+/**
+* One-shot request from the preview (an unset reference placeholder) to focus the record
+* picker of that placement in the sidebar. Keyed by the placement's overlay field ID
+* (`${blockId}__${fieldName}`), which the preview and sidebar already share.
+*/
+const referencePickerFocus = createStore({
+	context: { fieldId: null },
+	on: {
+		request: (_context, event) => ({ fieldId: event.fieldId }),
+		consume: (context, event) => context.fieldId === event.fieldId ? { fieldId: null } : context
+	}
+});
+function useReferencePickerFocusRequested(fieldId) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== fieldId) {
+		t0 = (state) => fieldId !== void 0 && state.context.fieldId === fieldId;
+		$[0] = fieldId;
+		$[1] = t0;
+	} else t0 = $[1];
+	return useSelector(referencePickerFocus, t0);
+}
+
+//#endregion
+export { referencePickerFocus, useReferencePickerFocusRequested };

package/dist/features/preview/repeatableItemTargets.js

@@ -0,0 +1,56 @@
+//#region src/features/preview/repeatableItemTargets.ts
+const registries = /* @__PURE__ */ new WeakMap();
+function registryOf(document) {
+	let registry = registries.get(document);
+	if (registry) return registry;
+	registry = {
+		items: /* @__PURE__ */ new Set(),
+		listeners: /* @__PURE__ */ new Set()
+	};
+	registries.set(document, registry);
+	return registry;
+}
+function notify(registry, kind) {
+	for (const listener of registry.listeners) listener(kind);
+}
+function registerRepeatableItem(document, target) {
+	const registry = registryOf(document);
+	registry.items.add(target);
+	notify(registry, "content");
+	return {
+		update(state) {
+			if (target.hovered === state.hovered && target.focused === state.focused && target.hoverGroup === state.hoverGroup && target.synced === state.synced) return;
+			Object.assign(target, state);
+			notify(registry, "state");
+		},
+		unregister() {
+			registry.items.delete(target);
+			notify(registry, "content");
+		}
+	};
+}
+/** Membership changes move geometry; state changes never do. */
+function subscribeRepeatableItems(document, listener) {
+	const { listeners } = registryOf(document);
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+function fragmentsOf(element) {
+	return element.reactFragments;
+}
+/** Each registered item with its first-level elements, in document order. */
+function repeatableItemElements(document) {
+	const result = /* @__PURE__ */ new Map();
+	const items = registries.get(document)?.items;
+	if (!items?.size) return result;
+	for (const item of items) result.set(item, []);
+	for (const element of document.querySelectorAll("*")) {
+		const fragments = fragmentsOf(element);
+		if (!fragments) continue;
+		for (const item of items) if (fragments.has(item.fragment)) result.get(item).push(element);
+	}
+	return result;
+}
+
+//#endregion
+export { registerRepeatableItem, repeatableItemElements, subscribeRepeatableItems };

package/dist/features/preview/selectionReveal.js

@@ -0,0 +1,21 @@
+//#region src/features/preview/selectionReveal.ts
+/** Room kept between a revealed item and the edge it scrolls to. */
+const REVEAL_MARGIN = 48;
+/** An item counts as in view while this share of it, or of the view if it is taller, shows. */
+const REVEAL_VISIBLE_SHARE = .5;
+/**
+* How far to scroll so a selected item shows: 0 while enough of it already does.
+* Otherwise scroll the least: its top to the view's top, or its bottom to the view's
+* bottom. An item too tall to fit shows from its top.
+*/
+function revealScrollDelta(item, view) {
+	const height = item.bottom - item.top;
+	const viewHeight = view.bottom - view.top;
+	if (Math.max(0, Math.min(item.bottom, view.bottom) - Math.max(item.top, view.top)) >= Math.max(1, Math.min(height, viewHeight)) * .5) return 0;
+	const margin = Math.min(48, viewHeight / 4);
+	if (item.top < view.top || height > viewHeight - margin * 2) return item.top - view.top - margin;
+	return item.bottom - view.bottom + margin;
+}
+
+//#endregion
+export { REVEAL_VISIBLE_SHARE, revealScrollDelta };

package/dist/features/preview/usePreviewViewportActions.js

@@ -0,0 +1,114 @@
+import { actionsStore } from "../provider/actionsStore.js";
+import { previewStore } from "./previewStore.js";
+import { c } from "react/compiler-runtime";
+import { useEffect } from "react";
+
+//#region src/features/preview/usePreviewViewportActions.ts
+/** Preview commands stay available while switching between the site and Canvas. */
+function usePreviewViewportActions() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	useEffect(_temp10, t0);
+}
+function _temp10() {
+	const actions = [
+		{
+			id: "cycle-viewport-mode",
+			label: "Cycle viewport mode",
+			aliases: [
+				"Responsive preview",
+				"Viewport preview",
+				"Device preview"
+			],
+			groupLabel: "Website",
+			checkIfAvailable: _temp,
+			execute: _temp2,
+			shortcut: { key: "m" }
+		},
+		{
+			id: "set-viewport-full",
+			label: "Set full viewport",
+			aliases: [
+				"Full preview",
+				"Desktop preview",
+				"Full width preview"
+			],
+			groupLabel: "Website",
+			checkIfAvailable: _temp3,
+			execute: _temp4
+		},
+		{
+			id: "set-viewport-tablet",
+			label: "Set tablet viewport",
+			aliases: ["Tablet preview", "Responsive preview"],
+			groupLabel: "Website",
+			checkIfAvailable: _temp5,
+			execute: _temp6
+		},
+		{
+			id: "set-viewport-mobile",
+			label: "Set mobile viewport",
+			aliases: [
+				"Mobile preview",
+				"Phone preview",
+				"Responsive preview"
+			],
+			groupLabel: "Website",
+			checkIfAvailable: _temp7,
+			execute: _temp8
+		}
+	];
+	actionsStore.send({
+		type: "registerManyActions",
+		actions
+	});
+	return () => {
+		actionsStore.send({
+			type: "unregisterManyActions",
+			ids: actions.map(_temp9)
+		});
+	};
+}
+function _temp9(action) {
+	return action.id;
+}
+function _temp8() {
+	return previewStore.send({
+		type: "setViewportMode",
+		mode: "mobile"
+	});
+}
+function _temp7() {
+	return true;
+}
+function _temp6() {
+	return previewStore.send({
+		type: "setViewportMode",
+		mode: "tablet"
+	});
+}
+function _temp5() {
+	return true;
+}
+function _temp4() {
+	return previewStore.send({
+		type: "setViewportMode",
+		mode: "full"
+	});
+}
+function _temp3() {
+	return true;
+}
+function _temp2() {
+	return previewStore.send({ type: "cycleViewportMode" });
+}
+function _temp() {
+	return true;
+}
+
+//#endregion
+export { usePreviewViewportActions };