camox 0.76.0 → 0.77.0

package/dist/core/editing/fieldSlot.js

@@ -0,0 +1,251 @@
+//#region src/core/editing/fieldSlot.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;
+}
+/** The owner the loose ids name: a placed record's, else a repeatable item's, else the block's. */
+function fieldOwner({ blockId, itemId, placement }) {
+	if (placement) return {
+		kind: "record",
+		placement
+	};
+	if (itemId != null) return {
+		kind: "item",
+		blockId,
+		itemId
+	};
+	return {
+		kind: "block",
+		blockId
+	};
+}
+/** The selection that selects the slot. */
+function slotSelection({ owner, name, type }) {
+	switch (owner.kind) {
+		case "block": return {
+			type: "block-field",
+			blockId: owner.blockId,
+			fieldName: name,
+			fieldType: type
+		};
+		case "item": return {
+			type: "item-field",
+			blockId: owner.blockId,
+			itemId: owner.itemId,
+			fieldName: name,
+			fieldType: type
+		};
+		case "record": return {
+			type: "record-field",
+			...recordPlacement(owner.placement),
+			recordFieldName: name,
+			recordFieldType: type
+		};
+	}
+}
+/** The slot a selection selects, or null when it selects no field. */
+function slotOf(selection) {
+	switch (selection?.type) {
+		case "block-field": return {
+			owner: {
+				kind: "block",
+				blockId: selection.blockId
+			},
+			name: selection.fieldName,
+			type: selection.fieldType
+		};
+		case "item-field": return {
+			owner: {
+				kind: "item",
+				blockId: selection.blockId,
+				itemId: selection.itemId
+			},
+			name: selection.fieldName,
+			type: selection.fieldType
+		};
+		case "record-field": return {
+			owner: {
+				kind: "record",
+				placement: recordPlacement(selection)
+			},
+			name: selection.recordFieldName,
+			type: selection.recordFieldType
+		};
+		default: return null;
+	}
+}
+/** The selection that selects the owner itself: a slot's parent. */
+function ownerSelection(owner) {
+	switch (owner.kind) {
+		case "block": return {
+			type: "block",
+			blockId: owner.blockId
+		};
+		case "item": return {
+			type: "item",
+			blockId: owner.blockId,
+			itemId: owner.itemId
+		};
+		case "record": return {
+			type: "record",
+			...recordPlacement(owner.placement)
+		};
+	}
+}
+/**
+* What selecting the parent of `selection` selects: a field's owner; a placed record's
+* reference field, in the block, item or record that places it; an item's block. A block and a
+* record page's record have none.
+*/
+function parentOf(selection) {
+	const slot = slotOf(selection);
+	if (slot) return ownerSelection(slot.owner);
+	switch (selection.type) {
+		case "item": return {
+			type: "block",
+			blockId: selection.blockId
+		};
+		case "record":
+			if (selection.nested) {
+				const { nested, ...outer } = recordPlacement(selection);
+				return slotSelection({
+					owner: {
+						kind: "record",
+						placement: outer
+					},
+					name: nested.fieldName,
+					type: "Reference"
+				});
+			}
+			if (!isBlockPlacement(selection)) return null;
+			return slotSelection({
+				owner: fieldOwner(selection),
+				name: selection.fieldName,
+				type: "Reference"
+			});
+		default: return null;
+	}
+}
+/**
+* Where a record is placed through the reference field `fieldName` of `owner`: directly by a
+* block or repeatable item, or, from a placed record, as the second hop it links.
+*/
+function placementThrough(owner, fieldName, recordId) {
+	if (owner.kind === "record") return {
+		...recordPlacement(owner.placement),
+		nested: {
+			fieldName,
+			recordId
+		}
+	};
+	return {
+		blockId: owner.blockId,
+		...owner.kind === "item" ? { itemId: owner.itemId } : {},
+		fieldName,
+		recordId
+	};
+}
+/**
+* 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 placementId(placement) {
+	const id = isBlockPlacement(placement) ? `${ownerId(fieldOwner(placement))}__${placement.fieldName}__${placement.recordId}` : `layout-${placement.layoutId}__${placement.recordId}`;
+	if (!placement.nested) return id;
+	return `${id}__${placement.nested.fieldName}__${placement.nested.recordId}`;
+}
+function ownerId(owner) {
+	switch (owner.kind) {
+		case "block": return owner.blockId;
+		case "item": return `${owner.blockId}__${owner.itemId}`;
+		case "record": return placementId(owner.placement);
+	}
+}
+/**
+* The slot's overlay id: `block__field`, `block__item__field`, or the record placement's id
+* followed by `__recordField`, so each record of a reference list is its own target.
+*/
+function slotId({ owner, name }) {
+	return `${ownerId(owner)}__${name}`;
+}
+/**
+* Whether two selections point to the same thing. A field is the same field whatever kind it is
+* read as: its name is unique in its owner.
+*/
+function sameTarget(a, b) {
+	if (!a || !b) return false;
+	const slotA = slotOf(a);
+	const slotB = slotOf(b);
+	if (slotA || slotB) return !!slotA && !!slotB && slotA.name === slotB.name && sameOwner(slotA.owner, slotB.owner);
+	if (a.type === "record" || b.type === "record") return a.type === "record" && b.type === "record" && samePlacement(a, b);
+	if (a.type === "item" || b.type === "item") return a.type === "item" && b.type === "item" && a.itemId === b.itemId;
+	return a.type === "block" && b.type === "block" && a.blockId === b.blockId;
+}
+function sameOwner(a, b) {
+	if (a.kind === "record" || b.kind === "record") return a.kind === "record" && b.kind === "record" && samePlacement(a.placement, b.placement);
+	if (a.kind === "item" || b.kind === "item") return a.kind === "item" && b.kind === "item" && a.itemId === b.itemId;
+	return a.blockId === b.blockId;
+}
+/** The edit that writes `value` to field `name` of the target. */
+function fieldEdit(target, name, value) {
+	switch (target.kind) {
+		case "block": return {
+			type: "blockContent",
+			blockId: target.blockId,
+			content: { [name]: value }
+		};
+		case "item": return {
+			type: "itemContent",
+			itemId: target.itemId,
+			content: { [name]: value }
+		};
+		case "record":
+			const { projectUuid, record } = target;
+			return {
+				type: "recordField",
+				projectUuid,
+				record,
+				field: name,
+				value
+			};
+	}
+}
+
+//#endregion
+export { fieldEdit, fieldOwner, isBlockPlacement, ownerSelection, parentOf, placementId, placementThrough, recordPlacement, samePlacement, sameTarget, slotId, slotOf, slotSelection };

package/dist/core/editing/useFieldSlot.js

@@ -0,0 +1,159 @@
+import { useIsAuthenticated } from "../../lib/auth.js";
+import { fieldEdit, ownerSelection, sameTarget, slotId, slotSelection } from "./fieldSlot.js";
+import { previewStore, selectIsCanvasShown } from "../../features/preview/previewStore.js";
+import { isOverlayMessage, selectionHoverMessage } from "../../features/preview/overlayMessages.js";
+import { useFrame } from "../../features/preview/components/Frame.js";
+import { usePreviewSelection, usePreviewTargetSelection } from "../../features/preview/previewSelection.js";
+import { useApplyContentEdit } from "./contentEdits.js";
+import * as React from "react";
+import { useSelector } from "@xstate/store-react";
+
+//#region src/core/editing/useFieldSlot.tsx
+/** Whether `data` carries every entry of `message`. */
+const carries = (data, message) => Object.entries(message).every(([key, value]) => data[key] === value);
+/**
+* The studio's transport: the preview store, scoped to the page the frame edits, and the
+* sidebar's hover messages posted to the frame's window.
+*/
+const studioTransport = {
+	useEditing() {
+		const isAuthenticated = useIsAuthenticated();
+		const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
+		return isAuthenticated && isCanvasShown;
+	},
+	useSelection: usePreviewTargetSelection,
+	useSelect: usePreviewSelection,
+	useSidebarHover(target, enabled) {
+		const { window: frameWindow } = useFrame();
+		const [hovered, setHovered] = React.useState(false);
+		const start = target ? JSON.stringify(selectionHoverMessage(target, true)) : null;
+		React.useEffect(() => {
+			if (!enabled || !frameWindow || !start) return;
+			const startMessage = JSON.parse(start);
+			const endMessage = {
+				...startMessage,
+				type: `${String(startMessage.type)}_END`
+			};
+			const handleMessage = (event) => {
+				if (!isOverlayMessage(event.data)) return;
+				const data = event.data;
+				if (carries(data, startMessage)) setHovered(true);
+				else if (carries(data, endMessage)) setHovered(false);
+			};
+			frameWindow.addEventListener("message", handleMessage);
+			return () => frameWindow.removeEventListener("message", handleMessage);
+		}, [
+			enabled,
+			frameWindow,
+			start
+		]);
+		return enabled && hovered;
+	}
+};
+const SelectionTransportContext = React.createContext(studioTransport);
+function useTransport() {
+	return React.use(SelectionTransportContext);
+}
+/** What is selected on the page this frame edits, or null. */
+function useEditingSelection() {
+	return useTransport().useSelection();
+}
+/** Selects a target on the page this frame edits. */
+function useSelectTarget() {
+	return useTransport().useSelect();
+}
+/**
+* Whether the frame offers editing while the Canvas shows. Only the selected Page's frame does:
+* the others render as the site does, so a click on them only selects the Page. Frames keep
+* the editing runtime either way, so toggling never remounts the page.
+*/
+const EditableSurfaceContext = React.createContext(true);
+/**
+* Whether content on this page edits in place: for a member, while the Canvas shows, in the
+* frame that offers editing.
+*/
+function useIsEditable() {
+	return useTransport().useEditing() && React.use(EditableSurfaceContext);
+}
+/** Whether the sidebar hovers `target`, followed only while `enabled`. */
+function useSidebarHover(target, enabled) {
+	return useTransport().useSidebarHover(target, enabled);
+}
+const FieldScopeContext = React.createContext(null);
+/** The scope fields render in here, or null outside any. */
+function useFieldScope() {
+	return React.use(FieldScopeContext);
+}
+/** Inline field writes report no failure unless their owner follows them. */
+const ignore = () => {};
+/** How an editable element is outlined: shared content is told apart from the block's own. */
+function overlayMode(owner, synced) {
+	if (owner.kind === "record") return "reference";
+	return synced ? "synced" : void 0;
+}
+/**
+* What a field kind needs to edit one field where it renders: its value and schema, whether it
+* is hovered, selected and focused, how to select it, how to write it, and its parent. Its
+* overlay props, spread onto the element that stands for the field, outline it and select it on
+* click.
+*/
+function useFieldSlot(name, type, { editing = false, enabled = true } = {}) {
+	const scope = useFieldScope();
+	if (!scope) throw new Error(`The "${name}" field must render inside a Block Component`);
+	const transport = useTransport();
+	const editable = useIsEditable() && enabled;
+	const slot = scope.list ? {
+		owner: scope.owner,
+		name: scope.list.name,
+		type: scope.list.type
+	} : {
+		owner: scope.owner,
+		name,
+		type
+	};
+	const target = slotSelection(slot);
+	const selection = transport.useSelection();
+	const selectTarget = transport.useSelect();
+	const sidebarHovered = transport.useSidebarHover(target, editable);
+	const [pointerHovered, setPointerHovered] = React.useState(false);
+	const applyEdit = useApplyContentEdit();
+	const selected = sameTarget(selection, target);
+	const hovered = editable && (pointerHovered || sidebarHovered);
+	const focused = editable && (selected || editing);
+	const select = () => {
+		if (editable) selectTarget(target);
+	};
+	const write = (value) => {
+		if (!scope.target) return;
+		const writing = applyEdit(fieldEdit(scope.target, slot.name, value));
+		if (scope.onWrite) scope.onWrite(writing);
+		else writing.catch(ignore);
+	};
+	const id = slotId(slot);
+	return {
+		slot,
+		id,
+		editable,
+		value: scope.content[name],
+		schema: scope.schema?.[slot.name],
+		hovered,
+		selected,
+		focused,
+		select,
+		write,
+		/** The owner's selection: what selecting the field's parent selects. */
+		parent: ownerSelection(slot.owner),
+		overlayProps: {
+			"data-camox-field-id": id,
+			"data-camox-hovered": hovered || void 0,
+			"data-camox-focused": focused || void 0,
+			"data-camox-overlay-mode": overlayMode(slot.owner, scope.synced),
+			onMouseEnter: () => setPointerHovered(true),
+			onMouseLeave: () => setPointerHovered(false),
+			onClickCapture: select
+		}
+	};
+}
+
+//#endregion
+export { EditableSurfaceContext, FieldScopeContext, SelectionTransportContext, studioTransport, useEditingSelection, useFieldScope, useFieldSlot, useIsEditable, useSelectTarget, useSidebarHover };

package/dist/core/layoutContext.d.ts

@@ -1,4 +1,6 @@
 import "../lib/locale-path.js";
+import "./createLayout.js";
+import "./createCollection.js";
 //#region src/core/layoutContext.d.ts
 /**
  * The context every layout `to*` option receives. Each name always means the same thing and is

package/dist/core/layoutContext.js

@@ -1,4 +1,5 @@
 import { localizedPath } from "../lib/locale-path.js";
+import { asCollectionItem, recordPageValues } from "./recordItem.js";
 
 //#region src/core/layoutContext.ts
 /**
@@ -61,6 +62,31 @@ function buildLayoutContext(layout, source) {
 		...source.record && { content: source.record.content }
 	};
 }
+/**
+* A Layout Page's context, from what its loader returned, and the record it renders when it's a
+* Record Page. The server's Page Read and the client's render build it the same way.
+*/
+function layoutPageContext(app, layout, source) {
+	const item = asCollectionItem(source.result);
+	const collection = item && app.getCollectionById(item.collectionId);
+	const record = item && collection && {
+		item,
+		collection,
+		values: recordPageValues(collection, item)
+	};
+	const context = buildLayoutContext(layout, {
+		path: source.path,
+		locale: source.locale,
+		projectName: source.projectName,
+		data: source.result?.data,
+		params: source.params,
+		record: record?.values
+	});
+	return record ? {
+		context,
+		record
+	} : { context };
+}
 
 //#endregion
-export { buildLayoutContext, curatedLayoutContext, curatedPageTitle };
+export { buildLayoutContext, curatedLayoutContext, curatedPageTitle, layoutPageContext };

package/dist/core/lib/artifactTheme.js

@@ -39,18 +39,55 @@ function readArtifactTheme(frame) {
 function isThemeAttribute(name) {
 	return name === "class" || name === "style" || !!name?.startsWith("data-");
 }
+const isStylesheet = (node) => node?.nodeName === "STYLE" || node?.nodeName === "LINK" && /\bstylesheet\b/i.test(node.getAttribute("rel") ?? "");
+/** Whether a change in the page's head may change its stylesheets. */
+function isStylesheetChange(record) {
+	if (record.type === "childList") {
+		if (isStylesheet(record.target)) return true;
+		return [...record.addedNodes, ...record.removedNodes].some(isStylesheet);
+	}
+	const target = record.type === "characterData" ? record.target.parentNode : record.target;
+	return isStylesheet(target);
+}
 /**
-* Calls `onChange` when the `class`, `style` or `data-*` attributes of the frame or one of its
-* ancestors change, as these may change the tokens at its position. Returns a disconnect.
+* Calls `onChange` when the tokens at the frame's position may have changed: when the `class`,
+* `style` or `data-*` attributes of the frame or one of its ancestors change, or when the page's
+* stylesheets do, as the studio swaps them when it shows Live or a draft, or a draft's code
+* changes them. A new stylesheet's tokens only resolve once it loaded, so its load counts too.
+* Returns a disconnect.
 */
 function observeArtifactTheme(frame, onChange) {
-	const page = frame.ownerDocument.defaultView;
+	const doc = frame.ownerDocument;
+	const page = doc.defaultView;
 	if (!page) return () => {};
-	const observer = new page.MutationObserver((records) => {
+	const ancestors = new page.MutationObserver((records) => {
 		if (records.some((record) => isThemeAttribute(record.attributeName))) onChange();
 	});
-	for (let element = frame; element; element = element.parentElement) observer.observe(element, { attributes: true });
-	return () => observer.disconnect();
+	for (let element = frame; element; element = element.parentElement) ancestors.observe(element, { attributes: true });
+	const stylesheets = new page.MutationObserver((records) => {
+		if (records.some(isStylesheetChange)) onChange();
+	});
+	stylesheets.observe(doc.head, {
+		childList: true,
+		subtree: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"href",
+			"rel",
+			"media",
+			"disabled"
+		]
+	});
+	const onLoad = (event) => {
+		if (isStylesheet(event.target)) onChange();
+	};
+	doc.addEventListener("load", onLoad, true);
+	return () => {
+		ancestors.disconnect();
+		stylesheets.disconnect();
+		doc.removeEventListener("load", onLoad, true);
+	};
 }
 
 //#endregion

package/dist/features/canvas/CanvasPageFrame.js

@@ -1,11 +1,11 @@
 import { ArtifactsRunContext } from "../../core/hooks/useArtifactHost.js";
 import { useEditingFrameClaim, useEditingOwner } from "../preview/editingFrame.js";
-import { EditableSurfaceContext } from "../../core/hooks/useIsEditable.js";
+import { PreviewDocumentContext } from "../runtime/PreviewDocumentContext.js";
 import { PreviewEditingOwnerContext } from "../preview/previewSelection.js";
+import { EditableSurfaceContext } from "../../core/editing/useFieldSlot.js";
 import { RendererSlot, useRendererHost } from "../renderer/RendererFrames.js";
 import { PreviewPreparationContext } from "../preview/previewPreparation.js";
 import { canvasPageHref, measureCanvasDocument } from "./canvasFrameDocument.js";
-import { PreviewDocumentContext } from "../runtime/PreviewDocumentContext.js";
 import { Overlays } from "../preview/components/Overlays.js";
 import { PreviewFrameEffects } from "../preview/components/PreviewPanel.js";
 import { CanvasOverlays } from "./CanvasOverlays.js";

package/dist/features/canvas/CanvasPreviewPageSlot.js

@@ -1,8 +1,8 @@
 import { useEditingFrameClaim, useEditingOwner } from "../preview/editingFrame.js";
+import { ViewportContinuityContext } from "../preview/viewportContinuity.js";
 import { CanvasWorkspaceContext } from "./canvasZoom.js";
 import { usePreviewPageFrame } from "../preview/previewPageFrame.js";
 import { PreviewPreparationContext } from "../preview/previewPreparation.js";
-import { ViewportContinuityContext } from "../preview/viewportContinuity.js";
 import { useCanvasFrameMode } from "./canvasFrameMode.js";
 import { CanvasOverlays } from "./CanvasOverlays.js";
 import { CanvasPageEdge } from "./CanvasPageEdge.js";