camox 0.75.0 → 0.76.1

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

@@ -0,0 +1,105 @@
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/preview/components/ZoomableImage.tsx
+/**
+* An image shown whole in the area it fills, which a click zooms to twice its size and another
+* click zooms back out. Zoomed in, the area scrolls to every edge of the image, centered on where
+* it was clicked. The checkerboard shows only through the image's transparent pixels.
+*/
+function ZoomableImage(t0) {
+	const $ = c(14);
+	const { src, alt } = t0;
+	const containerRef = useRef(null);
+	const imgRef = useRef(null);
+	const [zoomedWidth, setZoomedWidth] = useState(null);
+	const clickFractionRef = useRef(null);
+	let t1;
+	let t2;
+	if ($[0] !== zoomedWidth) {
+		t1 = () => {
+			const container = containerRef.current;
+			const img = imgRef.current;
+			const frac = clickFractionRef.current;
+			if (zoomedWidth == null || !container || !img || !frac) return;
+			const frame = requestAnimationFrame(() => {
+				container.scrollTo(img.offsetLeft + img.offsetWidth * frac.x - container.clientWidth / 2, img.offsetTop + img.offsetHeight * frac.y - container.clientHeight / 2);
+				clickFractionRef.current = null;
+			});
+			return () => cancelAnimationFrame(frame);
+		};
+		t2 = [zoomedWidth];
+		$[0] = zoomedWidth;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
+	const zoomed = zoomedWidth != null;
+	const t3 = `absolute inset-0 ${zoomed ? "overflow-auto" : "flex items-center justify-center overflow-hidden p-6"}`;
+	let t4;
+	if ($[3] !== zoomed) {
+		t4 = (e) => {
+			const img_0 = imgRef.current;
+			if (!img_0) return;
+			if (zoomed) {
+				setZoomedWidth(null);
+				containerRef.current?.scrollTo(0, 0);
+				return;
+			}
+			const rect = img_0.getBoundingClientRect();
+			clickFractionRef.current = {
+				x: (e.clientX - rect.left) / rect.width,
+				y: (e.clientY - rect.top) / rect.height
+			};
+			setZoomedWidth(img_0.clientWidth * 2);
+		};
+		$[3] = zoomed;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== alt || $[6] !== src || $[7] !== zoomed || $[8] !== zoomedWidth) {
+		t5 = zoomed ? /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-full w-max min-w-full p-6",
+			children: /* @__PURE__ */ jsx("img", {
+				ref: imgRef,
+				src,
+				alt,
+				className: "checkered m-auto max-w-none cursor-zoom-out shadow-lg",
+				style: { width: zoomedWidth },
+				draggable: false
+			})
+		}) : /* @__PURE__ */ jsx("img", {
+			ref: imgRef,
+			src,
+			alt,
+			className: "checkered max-h-full max-w-full cursor-zoom-in object-contain shadow-lg",
+			draggable: false
+		});
+		$[5] = alt;
+		$[6] = src;
+		$[7] = zoomed;
+		$[8] = zoomedWidth;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t3 || $[11] !== t4 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			className: t3,
+			onClick: t4,
+			children: t5
+		});
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	return t6;
+}
+
+//#endregion
+export { ZoomableImage };

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

@@ -7,6 +7,8 @@ function contentFieldSchema(schema, fieldName) {
 function contentFieldNames(schema) {
 	return Object.keys(schema?.properties ?? {});
 }
+/** A field's name as a label, for fields without a title: `ctaLabel` reads "Cta Label". */
+const formatFieldName = (fieldName) => fieldName.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
 
 //#endregion
-export { contentFieldNames, contentFieldSchema };
+export { contentFieldNames, contentFieldSchema, formatFieldName };

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

@@ -3,13 +3,13 @@ import { referenceList } from "../../../lib/normalized-data.js";
 import { reads, useStudioCache } from "../../../lib/studio-reads.js";
 import { referenceListIds } from "../../../core/lib/reference.js";
 import { recordText } from "../../../core/recordItem.js";
-import { blockMutations, collectionMutations, repeatableItemMutations } from "../../../lib/queries.js";
-import { invalidateCollectionRecordViews } from "../../../lib/collection-cache.js";
+import { blockMutations, repeatableItemMutations } from "../../../lib/queries.js";
 import { serializeAssetField } from "../../content/collection-form.js";
-import { referenceWritesFor } from "../../../core/editing/referenceWrites.js";
+import { fieldEdit } from "../../../core/editing/fieldSlot.js";
+import { useApplyContentEdit } from "../../../core/editing/contentEdits.js";
 import { contentFieldSchema } from "./contentFieldSchema.js";
 import { c } from "react/compiler-runtime";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { toast } from "@camox/ui/toaster";
 
 //#region src/features/preview/components/useFieldWriter.ts
@@ -73,8 +73,7 @@ function applyReferenceListOptimistically(studioCache, blockId, owner, fieldName
 * collection asset snapshots rather than block file markers.
 */
 function useFieldWriter(target, schema) {
-	const $ = c(12);
-	const queryClient = useQueryClient();
+	const $ = c(10);
 	const projectUuid = useProjectUuid();
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -88,35 +87,17 @@ function useFieldWriter(target, schema) {
 		$[1] = t1;
 	} else t1 = $[1];
 	const updateItemContent = useMutation(t1);
-	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = collectionMutations.edit();
-		$[2] = t2;
-	} else t2 = $[2];
-	const editRecord = useMutation(t2);
+	const applyEdit = useApplyContentEdit();
 	const studioCache = useStudioCache();
-	let t3;
-	if ($[3] !== editRecord || $[4] !== projectUuid || $[5] !== queryClient || $[6] !== schema || $[7] !== studioCache || $[8] !== target || $[9] !== updateBlockContent || $[10] !== updateItemContent) {
-		t3 = (fieldName, value) => {
+	let t2;
+	if ($[2] !== applyEdit || $[3] !== projectUuid || $[4] !== schema || $[5] !== studioCache || $[6] !== target || $[7] !== updateBlockContent || $[8] !== updateItemContent) {
+		t2 = (fieldName, value) => {
 			if (target?.kind === "record") {
 				const fieldType = fieldTypeOf(schema, fieldName);
 				const awaited = fieldType === "Reference" || fieldType === "ReferenceList";
-				const { record } = target;
-				const saving = referenceWritesFor(queryClient).save(record, fieldName, serializeAssetField(fieldType, value), async (input) => {
-					const saved = await editRecord.mutateAsync({
-						...input,
-						projectUuid
-					});
-					studioCache.set(reads.record({
-						projectUuid,
-						collectionId: record.collectionId,
-						id: record.id
-					}), saved);
-					invalidateCollectionRecordViews(studioCache, projectUuid, record.collectionId);
-					return saved;
-				}).then(_temp);
+				const saving = applyEdit(fieldEdit(target, fieldName, serializeAssetField(fieldType, value)));
 				if (awaited) return saving;
-				saving.catch(_temp2);
+				saving.catch(_temp);
 				return;
 			}
 			const content = { [fieldName]: value };
@@ -124,10 +105,10 @@ function useFieldWriter(target, schema) {
 			const id = target?.kind === "item" ? target.itemId : target?.blockId;
 			const field = contentFieldSchema(schema, fieldName);
 			if (field?.fieldType === "ReferenceList" && target) {
-				const { collectionId: t4 } = field;
-				const collectionId = t4 === void 0 ? "" : t4;
+				const { collectionId: t3 } = field;
+				const collectionId = t3 === void 0 ? "" : t3;
 				const linkRecord = async (recordId) => {
-					const [record_0, collection] = await Promise.all([studioCache.ensure(reads.record({
+					const [record, collection] = await Promise.all([studioCache.ensure(reads.record({
 						projectUuid,
 						collectionId,
 						id: recordId
@@ -136,10 +117,10 @@ function useFieldWriter(target, schema) {
 						collectionId
 					}))]);
 					return {
-						id: record_0.id,
+						id: record.id,
 						collectionId,
-						content: record_0.content,
-						...recordText(collection, record_0.content)
+						content: record.content,
+						...recordText(collection, record.content)
 					};
 				};
 				return (async () => {
@@ -156,8 +137,8 @@ function useFieldWriter(target, schema) {
 							id: target.blockId,
 							content
 						});
-					} catch (t5) {
-						const cause_0 = t5;
+					} catch (t4) {
+						const cause_0 = t4;
 						restore();
 						throw cause_0;
 					}
@@ -177,22 +158,20 @@ function useFieldWriter(target, schema) {
 				content
 			});
 		};
-		$[3] = editRecord;
-		$[4] = projectUuid;
-		$[5] = queryClient;
-		$[6] = schema;
-		$[7] = studioCache;
-		$[8] = target;
-		$[9] = updateBlockContent;
-		$[10] = updateItemContent;
-		$[11] = t3;
-	} else t3 = $[11];
-	return t3;
+		$[2] = applyEdit;
+		$[3] = projectUuid;
+		$[4] = schema;
+		$[5] = studioCache;
+		$[6] = target;
+		$[7] = updateBlockContent;
+		$[8] = updateItemContent;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
 }
-function _temp2(cause) {
+function _temp(cause) {
 	toast.error(cause instanceof Error ? cause.message : "Could not save item");
 }
-function _temp() {}
 
 //#endregion
 export { useFieldWriter };

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

@@ -1,9 +1,9 @@
 import { placedRecords, referenceList } from "../../../lib/normalized-data.js";
 import { referenceListIds } from "../../../core/lib/reference.js";
 import { useCollectionDefinition } from "../../../lib/studio-definitions.js";
-import { isBlockPlacement, previewStore, recordPlacement } from "../previewStore.js";
-import { contentFieldSchema } from "./contentFieldSchema.js";
-import { formatFieldName } from "./ItemFieldsEditor.js";
+import { isBlockPlacement, recordPlacement } from "../../../core/editing/fieldSlot.js";
+import { previewStore } from "../previewStore.js";
+import { contentFieldSchema, formatFieldName } from "./contentFieldSchema.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { isQueryBacked } from "@camox/api-contract";

package/dist/features/preview/overlayMessages.js

@@ -1,78 +1,40 @@
-import { isBlockPlacement } from "./previewStore.js";
+import { placementId, slotId, slotOf } from "../../core/editing/fieldSlot.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.
+* The message that starts or ends the sidebar's hover of what `selection` selects, as the page's
+* editable fields and records follow it.
 */
-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);
+	const field = (fieldId) => ({
+		type: hovered ? "CAMOX_HOVER_FIELD" : "CAMOX_HOVER_FIELD_END",
+		fieldId
+	});
+	if (selection.type === "record") return field(placementId(selection));
+	if (selection.type === "block") {
+		const { blockId } = selection;
 		return {
-			type: hovered ? "CAMOX_HOVER_FIELD" : "CAMOX_HOVER_FIELD_END",
-			fieldId
+			type: hovered ? "CAMOX_HOVER_BLOCK" : "CAMOX_HOVER_BLOCK_END",
+			blockId
 		};
 	}
-	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)
+		blockId: selection.blockId,
+		itemId: selection.itemId
 	};
-	if (selection.fieldType === "Repeater") return {
+	const slot = slotOf(selection);
+	if (slot.type === "Repeater" && slot.owner.kind !== "record") 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
+		blockId: slot.owner.blockId,
+		fieldName: slot.name
 	};
+	return field(slotId(slot));
 }
 function isOverlayMessage(data) {
 	return typeof data === "object" && data !== null && "type" in data && typeof data.type === "string" && data.type.startsWith("CAMOX_");
 }
 
 //#endregion
-export { isOverlayMessage, overlayFieldId, recordFieldId, recordPlacementId, selectionHoverMessage };
+export { isOverlayMessage, selectionHoverMessage };

package/dist/features/preview/previewStore.js

@@ -1,43 +1,7 @@
+import { isBlockPlacement, parentOf, recordPlacement, samePlacement } from "../../core/editing/fieldSlot.js";
 import { createStore } from "@xstate/store-react";
 
 //#region src/features/preview/previewStore.ts
-/**
-* 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;
@@ -84,15 +48,6 @@ function selectionItemId(sel) {
 	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.). */
-function selectionField(sel) {
-	if (!sel) return null;
-	if (sel.type === "block-field" || sel.type === "item-field") return {
-		fieldName: sel.fieldName,
-		fieldType: sel.fieldType
-	};
-	return null;
-}
 const selectIsCanvasShown = (state) => state.context.view === "canvas";
 const initialPreviewContext = {
 	view: "preview",
@@ -221,87 +176,15 @@ const previewStore = createStore({
 		selectParent: (context) => {
 			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,
-				editingContext: {
-					...editingContext,
-					selection: {
-						type: "block",
-						blockId: sel.blockId
-					}
-				}
-			};
-			if (sel.type === "item-field") return {
-				...context,
-				editingContext: {
-					...editingContext,
-					selection: {
-						type: "item",
-						blockId: sel.blockId,
-						itemId: sel.itemId
-					}
-				}
-			};
-			if (sel.type === "item") return {
+			const parent = sel ? parentOf(sel) : null;
+			if (!parent || !editingContext) return context;
+			return {
 				...context,
 				editingContext: {
 					...editingContext,
-					selection: {
-						type: "block",
-						blockId: sel.blockId
-					}
+					selection: parent
 				}
 			};
-			return context;
 		},
 		clearSelection: (context) => ({
 			...context,
@@ -333,4 +216,4 @@ const previewStore = createStore({
 });
 
 //#endregion
-export { isBlockPlacement, isBlockSelection, previewStore, recordPlacement, sameEditingOwner, samePlacement, selectIsCanvasShown, selectionBlockId, selectionField, selectionForOwner, selectionForPage, selectionItemId };
+export { isBlockPlacement, isBlockSelection, previewStore, recordPlacement, sameEditingOwner, selectIsCanvasShown, selectionBlockId, selectionForOwner, selectionForPage, selectionItemId };

package/dist/features/preview/repeatableItemPath.js

@@ -0,0 +1,47 @@
+//#region src/features/preview/repeatableItemPath.ts
+/** The repeatable items from the block down to `itemId`, each item's parent before it. */
+function itemPath(itemId, itemsMap) {
+	const path = [];
+	for (let item = itemId == null ? void 0 : itemsMap.get(itemId); item;) {
+		path.unshift(item);
+		item = item.parentItemId ? itemsMap.get(item.parentItemId) : void 0;
+	}
+	return path;
+}
+/**
+* The repeater field schemas along a path, from the block's content schema: the one holding each
+* item of the path, in order. Stops where the schema no longer declares the item's repeater.
+*/
+function repeaterSchemas(contentSchema, path) {
+	const repeaters = [];
+	let schema = contentSchema;
+	for (const item of path) {
+		const repeater = schema?.properties?.[item.fieldName];
+		if (!repeater?.items) break;
+		repeaters.push(repeater);
+		schema = repeater.items;
+	}
+	return repeaters;
+}
+/**
+* The content schema of the path's last item: the block's own with no item, or null when the
+* block's schema no longer declares it.
+*/
+function itemContentSchema(contentSchema, path) {
+	const repeaters = repeaterSchemas(contentSchema, path);
+	if (repeaters.length < path.length) return null;
+	const last = repeaters.at(-1);
+	return last ? last.items : contentSchema;
+}
+/**
+* The repeater field schema holding the path's last item, where its item settings are declared,
+* or null when the block's schema no longer declares it.
+*/
+function itemRepeaterSchema(contentSchema, path) {
+	if (path.length === 0) return null;
+	const repeaters = repeaterSchemas(contentSchema, path);
+	return repeaters.length < path.length ? null : repeaters.at(-1);
+}
+
+//#endregion
+export { itemContentSchema, itemPath, itemRepeaterSchema };