camox 0.44.0 → 0.45.0

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

@@ -1,10 +1,12 @@
 import "../../provider/components/CamoxAppContext.js";
+import "../../../lib/studio-reads.js";
 import { repeatableItemMutations } from "../../../lib/queries.js";
-import { previewStore } from "../previewStore.js";
-import { useRequireDraftSource } from "../../../core/hooks/useRequireDraftSource.js";
+import { previewStore, sameEditingOwner } from "../previewStore.js";
+import { PreviewEditingOwnerContext } from "../previewSelection.js";
 import { c } from "react/compiler-runtime";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import * as React from "react";
 import { generateKeyBetween } from "fractional-indexing";
+import { useMutation } from "@tanstack/react-query";
 
 //#region src/features/preview/components/useRepeatableItemActions.ts
 const buildDefaultContent = (itemProperties) => {
@@ -51,32 +53,28 @@ const buildNestedItemSeeds = (itemProperties) => {
 	return seeds;
 };
 const useRepeatableItemActions = (t0) => {
-	const $ = c(18);
-	if ($[0] !== "16e9f8f4b1a1e8d41d093c0930e510d6bea72e481f78c01b1ca1e595bec9f4cb") {
-		for (let $i = 0; $i < 18; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "16e9f8f4b1a1e8d41d093c0930e510d6bea72e481f78c01b1ca1e595bec9f4cb";
-	}
+	const $ = c(16);
 	const { blockId, fieldName, parentItemId, arraySchema, siblingCount } = t0;
+	const owner = React.useContext(PreviewEditingOwnerContext);
 	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = repeatableItemMutations.create();
-		$[1] = t1;
-	} else t1 = $[1];
+		$[0] = t1;
+	} else t1 = $[0];
 	const createRepeatableItem = useMutation(t1);
 	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = repeatableItemMutations.delete();
-		$[2] = t2;
-	} else t2 = $[2];
+		$[1] = t2;
+	} else t2 = $[1];
 	const deleteRepeatableItem = useMutation(t2);
-	const requireDraft = useRequireDraftSource();
 	const canAdd = arraySchema != null && (arraySchema.maxItems === void 0 || siblingCount < arraySchema.maxItems);
 	const canRemove = arraySchema != null && (arraySchema.minItems === void 0 || siblingCount > arraySchema.minItems);
 	let t3;
-	if ($[3] !== arraySchema || $[4] !== blockId || $[5] !== createRepeatableItem || $[6] !== fieldName || $[7] !== parentItemId || $[8] !== requireDraft) {
+	if ($[2] !== arraySchema || $[3] !== blockId || $[4] !== createRepeatableItem || $[5] !== fieldName || $[6] !== owner || $[7] !== parentItemId) {
 		t3 = (options) => {
+			if (owner === null) return;
 			if (!arraySchema) return;
-			if (!requireDraft()) return;
 			const itemsSchema = arraySchema.items;
 			const defaultContent = buildDefaultContent(itemsSchema?.properties);
 			const defaultSettings = arraySchema.defaultItemSettings;
@@ -90,47 +88,47 @@ const useRepeatableItemActions = (t0) => {
 				nestedItems: nestedItems.length > 0 ? nestedItems : void 0,
 				afterPosition: options?.afterPosition
 			}, { onSuccess: (created) => {
+				if (!sameEditingOwner(previewStore.getSnapshot().context.editingContext, owner)) return;
 				previewStore.send({
 					type: "selectItem",
+					...owner,
 					blockId,
 					itemId: created.id
 				});
 			} });
 		};
-		$[3] = arraySchema;
-		$[4] = blockId;
-		$[5] = createRepeatableItem;
-		$[6] = fieldName;
+		$[2] = arraySchema;
+		$[3] = blockId;
+		$[4] = createRepeatableItem;
+		$[5] = fieldName;
+		$[6] = owner;
 		$[7] = parentItemId;
-		$[8] = requireDraft;
-		$[9] = t3;
-	} else t3 = $[9];
+		$[8] = t3;
+	} else t3 = $[8];
 	const addItem = t3;
 	let t4;
-	if ($[10] !== deleteRepeatableItem || $[11] !== requireDraft) {
+	if ($[9] !== deleteRepeatableItem) {
 		t4 = (itemId, options_0) => {
-			if (!requireDraft()) return;
 			deleteRepeatableItem.mutate({ id: itemId }, { onSuccess: options_0?.onSuccess });
 		};
-		$[10] = deleteRepeatableItem;
-		$[11] = requireDraft;
-		$[12] = t4;
-	} else t4 = $[12];
+		$[9] = deleteRepeatableItem;
+		$[10] = t4;
+	} else t4 = $[10];
 	const removeItem = t4;
 	let t5;
-	if ($[13] !== addItem || $[14] !== canAdd || $[15] !== canRemove || $[16] !== removeItem) {
+	if ($[11] !== addItem || $[12] !== canAdd || $[13] !== canRemove || $[14] !== removeItem) {
 		t5 = {
 			canAdd,
 			addItem,
 			canRemove,
 			removeItem
 		};
-		$[13] = addItem;
-		$[14] = canAdd;
-		$[15] = canRemove;
-		$[16] = removeItem;
-		$[17] = t5;
-	} else t5 = $[17];
+		$[11] = addItem;
+		$[12] = canAdd;
+		$[13] = canRemove;
+		$[14] = removeItem;
+		$[15] = t5;
+	} else t5 = $[15];
 	return t5;
 };
 

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

@@ -1,39 +1,41 @@
-import { useLocation } from "../../navigation/navigation.js";
+import { useProjectUuid } from "../../../lib/auth.js";
+import { reads, useStudioCache } from "../../../lib/studio-reads.js";
 import { blockMutations } from "../../../lib/queries.js";
+import { useLocalePath } from "../../../lib/view-locale.js";
 import { c } from "react/compiler-runtime";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { generateKeyBetween } from "fractional-indexing";
-import { queryKeys } from "@camox/api-contract/query-keys";
+import { useMutation } from "@tanstack/react-query";
 
 //#region src/features/preview/components/useUpdateBlockPosition.ts
 function useUpdateBlockPosition() {
 	const $ = c(5);
-	if ($[0] !== "fed14916f5b55681b4a767606bad92ee9c3a074376e24f2981a9af1a6551ad97") {
-		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "fed14916f5b55681b4a767606bad92ee9c3a074376e24f2981a9af1a6551ad97";
-	}
-	const queryClient = useQueryClient();
-	const { pathname } = useLocation();
+	const studioCache = useStudioCache();
+	const projectUuid = useProjectUuid();
+	const pathname = useLocalePath();
 	let t0;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = blockMutations.updatePosition();
-		$[1] = t0;
-	} else t0 = $[1];
+		$[0] = t0;
+	} else t0 = $[0];
 	let t1;
-	if ($[2] !== pathname || $[3] !== queryClient) {
+	if ($[1] !== pathname || $[2] !== projectUuid || $[3] !== studioCache) {
 		t1 = {
 			...t0,
 			onMutate: (variables) => {
-				const pageQueryKey = queryKeys.pages.getByPath(pathname, "draft");
-				const previousPage = queryClient.getQueryData(pageQueryKey);
-				if (!previousPage) return {};
+				const edit = studioCache.edit();
+				const page = reads.pageStructure({
+					path: pathname,
+					projectUuid
+				});
+				const previousPage = edit.get(page);
+				if (!previousPage) return { edit };
 				const newPosition = generateKeyBetween(variables.afterPosition ?? null, variables.beforePosition ?? null);
-				const blockKey = queryKeys.blocks.get(variables.id, "draft");
-				const prevBundle = queryClient.getQueryData(blockKey);
-				if (prevBundle) queryClient.setQueryData(blockKey, {
-					...prevBundle,
+				const moved = reads.blockBundle(variables.id);
+				const movedBundle = edit.get(moved);
+				if (movedBundle) edit.set(moved, {
+					...movedBundle,
 					block: {
-						...prevBundle.block,
+						...movedBundle.block,
 						position: newPosition
 					}
 				});
@@ -41,7 +43,7 @@ function useUpdateBlockPosition() {
 				const positions = /* @__PURE__ */ new Map();
 				for (const id of blockIds) if (id === variables.id) positions.set(id, newPosition);
 				else {
-					const bundle = queryClient.getQueryData(queryKeys.blocks.get(id, "draft"));
+					const bundle = edit.get(reads.blockBundle(id));
 					if (bundle) positions.set(id, bundle.block.position);
 				}
 				const sortedIds = [...blockIds].sort((a, b) => {
@@ -49,33 +51,31 @@ function useUpdateBlockPosition() {
 					const posB = positions.get(b) ?? "";
 					return posA.localeCompare(posB);
 				});
-				queryClient.setQueryData(pageQueryKey, {
+				edit.set(page, {
 					...previousPage,
 					page: {
 						...previousPage.page,
 						blockIds: sortedIds
 					}
 				});
-				queryClient.cancelQueries({ queryKey: pageQueryKey });
-				return {
-					previousPage,
-					prevBundle
-				};
-			},
-			onError: (_error, variables_0, context) => {
-				if (context?.previousPage) queryClient.setQueryData(queryKeys.pages.getByPath(pathname, "draft"), context.previousPage);
-				if (context?.prevBundle) queryClient.setQueryData(queryKeys.blocks.get(variables_0.id, "draft"), context.prevBundle);
+				return { edit };
 			},
-			onSettled: () => {
-				queryClient.invalidateQueries({ queryKey: queryKeys.pages.getByPath(pathname, "draft") });
-			}
+			onError: _temp,
+			onSettled: _temp2
 		};
-		$[2] = pathname;
-		$[3] = queryClient;
+		$[1] = pathname;
+		$[2] = projectUuid;
+		$[3] = studioCache;
 		$[4] = t1;
 	} else t1 = $[4];
 	return useMutation(t1);
 }
+function _temp2(_data, _error_0, _variables_0, context_0) {
+	return context_0?.edit.settle();
+}
+function _temp(_error, _variables, context) {
+	return context?.edit.rollback();
+}
 
 //#endregion
 export { useUpdateBlockPosition };

package/dist/features/preview/editingFrame.js

@@ -0,0 +1,197 @@
+import { previewStore } from "./previewStore.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { useSelector } from "@xstate/store-react";
+import { createStore as createStore$1 } from "@xstate/store";
+
+//#region src/features/preview/editingFrame.ts
+const editingFrameStore = createStore$1({
+	context: { claim: null },
+	on: {
+		claim: (_, claim) => ({ claim }),
+		release: () => ({ claim: null })
+	}
+});
+function holds(holder) {
+	return editingFrameStore.getSnapshot().context.claim?.holder === holder;
+}
+function claim(holder, frame, owner) {
+	editingFrameStore.send({
+		type: "claim",
+		holder,
+		frame
+	});
+	if (owner?.kind === "layout") {
+		previewStore.send({
+			type: "activateLayout",
+			layoutId: owner.layoutId
+		});
+		return;
+	}
+	previewStore.send({
+		type: "activatePage",
+		pageId: owner?.pageId ?? null
+	});
+}
+function release(holder) {
+	if (!holds(holder)) return;
+	editingFrameStore.send({ type: "release" });
+	previewStore.send({ type: "clearSelection" });
+}
+/**
+* The owner a frame edits. A derived layout's pages have no page row, so they edit
+* their layout; any other Page edits itself.
+*/
+function useEditingOwner(t0) {
+	const $ = c(4);
+	const { pageId, layoutId } = t0;
+	let t1;
+	bb0: {
+		if (layoutId != null) {
+			let t2;
+			if ($[0] !== layoutId) {
+				t2 = {
+					kind: "layout",
+					layoutId
+				};
+				$[0] = layoutId;
+				$[1] = t2;
+			} else t2 = $[1];
+			t1 = t2;
+			break bb0;
+		}
+		if (pageId != null) {
+			let t2;
+			if ($[2] !== pageId) {
+				t2 = {
+					kind: "page",
+					pageId
+				};
+				$[2] = pageId;
+				$[3] = t2;
+			} else t2 = $[3];
+			t1 = t2;
+			break bb0;
+		}
+		t1 = null;
+	}
+	return t1;
+}
+/**
+* For the Preview and the Canvas: returns a stable `claim`, which makes `frame`
+* the editing frame, for `owner`, and returns its release. Call it from effects
+* and handlers, never while rendering.
+*
+* The claim follows `frame` while it is active, so it may be made before the frame
+* loads. Unmounting releases it.
+*/
+function useEditingFrameClaim(frame, owner) {
+	const $ = c(15);
+	const [holder] = React.useState(_temp);
+	let t0;
+	if ($[0] !== frame || $[1] !== owner) {
+		t0 = {
+			frame,
+			owner
+		};
+		$[0] = frame;
+		$[1] = owner;
+		$[2] = t0;
+	} else t0 = $[2];
+	const latest = React.useRef(t0);
+	let t1;
+	if ($[3] !== frame || $[4] !== owner) {
+		t1 = () => {
+			latest.current = {
+				frame,
+				owner
+			};
+		};
+		$[3] = frame;
+		$[4] = owner;
+		$[5] = t1;
+	} else t1 = $[5];
+	React.useLayoutEffect(t1);
+	let t2;
+	let t3;
+	if ($[6] !== frame || $[7] !== holder) {
+		t2 = () => {
+			if (!holds(holder)) return;
+			editingFrameStore.send({
+				type: "claim",
+				holder,
+				frame
+			});
+		};
+		t3 = [holder, frame];
+		$[6] = frame;
+		$[7] = holder;
+		$[8] = t2;
+		$[9] = t3;
+	} else {
+		t2 = $[8];
+		t3 = $[9];
+	}
+	React.useLayoutEffect(t2, t3);
+	let t4;
+	let t5;
+	if ($[10] !== holder) {
+		t4 = () => () => release(holder);
+		t5 = [holder];
+		$[10] = holder;
+		$[11] = t4;
+		$[12] = t5;
+	} else {
+		t4 = $[11];
+		t5 = $[12];
+	}
+	React.useLayoutEffect(t4, t5);
+	let t6;
+	if ($[13] !== holder) {
+		t6 = () => {
+			claim(holder, latest.current.frame, latest.current.owner);
+			return () => release(holder);
+		};
+		$[13] = holder;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+}
+function _temp() {
+	return Symbol("editing frame claim");
+}
+/**
+* For everything else: the editing frame's document, if any, and `send`, which
+* posts an overlay message to it. Sending without an editing frame does nothing.
+* `send` changes with the editing frame, so an effect's cleanup reaches the frame
+* its effect sent to.
+*/
+function useEditingFrame() {
+	const $ = c(5);
+	const frame = useSelector(editingFrameStore, _temp2);
+	let t0;
+	if ($[0] !== frame?.contentWindow) {
+		t0 = (message) => frame?.contentWindow?.postMessage(message, "*");
+		$[0] = frame?.contentWindow;
+		$[1] = t0;
+	} else t0 = $[1];
+	const send = t0;
+	const t1 = frame?.contentDocument ?? null;
+	let t2;
+	if ($[2] !== send || $[3] !== t1) {
+		t2 = {
+			document: t1,
+			send
+		};
+		$[2] = send;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+function _temp2(state) {
+	return state.context.claim?.frame ?? null;
+}
+
+//#endregion
+export { useEditingFrame, useEditingFrameClaim, useEditingOwner };

package/dist/features/preview/overlayHighlights.js

@@ -1,54 +1,27 @@
 //#region src/features/preview/overlayHighlights.ts
-const states = ["hovered", "focused"];
-/** Detached borders represent their parent, not the portal div's DOM depth. */
-function targetOf(element) {
-	return element.hasAttribute("data-camox-detached") ? element.parentElement ?? element : element;
-}
-function depthOf(element) {
-	let depth = 0;
-	for (let parent = element.parentElement; parent; parent = parent.parentElement) depth++;
-	return depth;
-}
 /**
-* Local and remote interactions publish the same candidate attributes. Resolve
+* Local and remote interactions publish the same candidate state. Resolve
 * them together, independently for hover and selection, before the browser paints.
-* Equal-depth candidates (e.g. a sidebar-hovered list) use document order.
+* A repeater-level hover represents all items in that group, not just its deepest
+* item. Individual targets still resolve by depth, with candidate order breaking ties.
 */
-function observeOverlayHighlights(document) {
-	const Observer = document.defaultView?.MutationObserver;
-	if (!Observer) return () => {};
-	const winners = /* @__PURE__ */ new Map();
-	const update = () => {
-		for (const state of states) {
-			let winner;
-			let deepest = -1;
-			for (const candidate of document.querySelectorAll(`[data-camox-${state}]`)) {
-				const depth = depthOf(targetOf(candidate));
-				if (depth <= deepest) continue;
-				deepest = depth;
-				winner = candidate;
-			}
-			const previous = winners.get(state);
-			if (previous === winner) continue;
-			previous?.removeAttribute(`data-camox-highlight-${state}`);
-			winner?.setAttribute(`data-camox-highlight-${state}`, "");
-			if (winner) winners.set(state, winner);
-			else winners.delete(state);
+function resolveOverlayHighlights(candidates) {
+	const resolve = (state) => {
+		let winner;
+		for (const candidate of candidates) {
+			if (!candidate[state]) continue;
+			if (winner && candidate.depth <= winner.depth) continue;
+			winner = candidate;
 		}
+		const group = state === "hovered" ? winner?.hoverGroup : null;
+		if (!group) return new Set(winner ? [winner] : []);
+		return new Set(candidates.filter((candidate) => candidate[state] && candidate.hoverGroup === group));
 	};
-	const observer = new Observer(update);
-	observer.observe(document, {
-		subtree: true,
-		childList: true,
-		attributes: true,
-		attributeFilter: states.map((state) => `data-camox-${state}`)
-	});
-	update();
-	return () => {
-		observer.disconnect();
-		for (const [state, winner] of winners) winner.removeAttribute(`data-camox-highlight-${state}`);
+	return {
+		hovered: resolve("hovered"),
+		focused: resolve("focused")
 	};
 }
 
 //#endregion
-export { observeOverlayHighlights };
+export { resolveOverlayHighlights };

package/dist/features/preview/overlayMessages.js

@@ -1,4 +1,75 @@
+import { isBlockPlacement } from "./previewStore.js";
+
 //#region src/features/preview/overlayMessages.ts
+/**
+* The field ID shared by the preview's editable fields and the sidebar's hover/focus messages:
+* `block__field` for block fields, `block__item__field` for repeater item fields, and
+* the placement's ID followed by `__recordField` for the fields of a placed collection record.
+* Record field IDs carry the record ID so that each record of a reference list is its own target.
+*/
+function overlayFieldId(blockId, fieldName, scope = {}) {
+	if (scope.placement) return recordFieldId(scope.placement, fieldName);
+	if (scope.itemId != null) return `${blockId}__${scope.itemId}__${fieldName}`;
+	return `${blockId}__${fieldName}`;
+}
+/** The field ID of one field of a placed collection record. */
+function recordFieldId(placement, recordFieldName) {
+	return `${recordPlacementId(placement)}__${recordFieldName}`;
+}
+/**
+* The overlay ID of one placement of a record: `block__referenceField__record`, or
+* `block__item__referenceField__record` when a repeatable item places it, or
+* `layout-layoutId__record` when a layout renders it on a record page. Followed by
+* `__recordField__linkedRecord` for a record that record links. Unique per record
+* within a reference list, and distinct from the same record placed elsewhere.
+*/
+function recordPlacementId(placement) {
+	const id = isBlockPlacement(placement) ? `${blockPlacementOwnerId(placement)}__${placement.fieldName}__${placement.recordId}` : `layout-${placement.layoutId}__${placement.recordId}`;
+	if (!placement.nested) return id;
+	return `${id}__${placement.nested.fieldName}__${placement.nested.recordId}`;
+}
+function blockPlacementOwnerId(placement) {
+	if (placement.itemId == null) return String(placement.blockId);
+	return `${placement.blockId}__${placement.itemId}`;
+}
+/** Use the same preview targets for selection-path hover as the sidebar editors. */
+function selectionHoverMessage(selection, hovered) {
+	if (!selection) return { type: hovered ? "CAMOX_HOVER_PAGE" : "CAMOX_HOVER_PAGE_END" };
+	if (selection.type === "record") {
+		const fieldId = recordPlacementId(selection);
+		return {
+			type: hovered ? "CAMOX_HOVER_FIELD" : "CAMOX_HOVER_FIELD_END",
+			fieldId
+		};
+	}
+	if (selection.type === "record-field") {
+		const fieldId = recordFieldId(selection, selection.recordFieldName);
+		return {
+			type: hovered ? "CAMOX_HOVER_FIELD" : "CAMOX_HOVER_FIELD_END",
+			fieldId
+		};
+	}
+	const blockId = String(selection.blockId);
+	if (selection.type === "block") return {
+		type: hovered ? "CAMOX_HOVER_BLOCK" : "CAMOX_HOVER_BLOCK_END",
+		blockId
+	};
+	if (selection.type === "item") return {
+		type: hovered ? "CAMOX_HOVER_REPEATABLE_ITEM" : "CAMOX_HOVER_REPEATABLE_ITEM_END",
+		blockId,
+		itemId: String(selection.itemId)
+	};
+	if (selection.fieldType === "Repeater") return {
+		type: hovered ? "CAMOX_HOVER_REPEATER" : "CAMOX_HOVER_REPEATER_END",
+		blockId,
+		fieldName: selection.fieldName
+	};
+	const fieldId = overlayFieldId(blockId, selection.fieldName, { itemId: selection.type === "item-field" ? selection.itemId : null });
+	return {
+		type: hovered ? "CAMOX_HOVER_FIELD" : "CAMOX_HOVER_FIELD_END",
+		fieldId
+	};
+}
 function isOverlayMessage(data) {
 	return typeof data === "object" && data !== null && "type" in data && typeof data.type === "string" && data.type.startsWith("CAMOX_");
 }
@@ -7,4 +78,4 @@ function postOverlayMessage(message) {
 }
 
 //#endregion
-export { isOverlayMessage, postOverlayMessage };
+export { isOverlayMessage, overlayFieldId, postOverlayMessage, recordFieldId, recordPlacementId, selectionHoverMessage };