camox 0.44.0 → 0.46.0

package/dist/core/editing/referenceWrites.js

@@ -0,0 +1,51 @@
+//#region src/core/editing/referenceWrites.ts
+/**
+* One queue per record and client. Two placements editing a shared record must
+* not race each other or replace fields from a stale full-content snapshot:
+* while saves are queued, each builds on the content the previous one saved.
+*/
+var ReferenceWrites = class {
+	sources = /* @__PURE__ */ new Map();
+	save(record, field, value, write) {
+		const key = `${record.collectionId}/${record.id}`;
+		let source = this.sources.get(key);
+		if (!source?.pending) {
+			source = { record };
+			this.sources.set(key, source);
+		}
+		const state = source;
+		const operation = (state.pending ?? Promise.resolve()).then(async () => {
+			const saved = await write({
+				id: record.id,
+				collectionId: record.collectionId,
+				content: {
+					...state.record.content,
+					[field]: value
+				}
+			});
+			state.record = {
+				...state.record,
+				content: saved.content
+			};
+		});
+		state.pending = operation;
+		operation.then(() => {
+			if (state.pending === operation) state.pending = void 0;
+		}, () => {
+			if (state.pending === operation) state.pending = void 0;
+		});
+		return operation;
+	}
+};
+const writers = /* @__PURE__ */ new WeakMap();
+function referenceWritesFor(client) {
+	let writer = writers.get(client);
+	if (!writer) {
+		writer = new ReferenceWrites();
+		writers.set(client, writer);
+	}
+	return writer;
+}
+
+//#endregion
+export { ReferenceWrites, referenceWritesFor };

package/dist/core/editing/useLatestRecord.js

@@ -0,0 +1,90 @@
+import { useProjectUuid } from "../../lib/auth.js";
+import { reads, useReadQuery } from "../../lib/studio-reads.js";
+import { latestContent } from "../lib/reference.js";
+import { fieldPlainText } from "../recordItem.js";
+import { c } from "react/compiler-runtime";
+
+//#region src/core/editing/useLatestRecord.ts
+/**
+* A record page's record as the Studio shows it: as its loader returned it, or as a later save
+* through any placement stored it in the shared record cache. Undefined without a record.
+*/
+function useLatestRecord(t0) {
+	const $ = c(21);
+	const { collectionId, labelField, loaded } = t0;
+	const projectUuid = useProjectUuid();
+	let t1;
+	if ($[0] !== collectionId || $[1] !== loaded?.id || $[2] !== projectUuid) {
+		t1 = reads.record({
+			projectUuid,
+			collectionId,
+			id: loaded?.id ?? ""
+		});
+		$[0] = collectionId;
+		$[1] = loaded?.id;
+		$[2] = projectUuid;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { enabled: false };
+		$[4] = t2;
+	} else t2 = $[4];
+	const { data: saved } = useReadQuery(t1, t2);
+	let t3;
+	bb0: {
+		if (!loaded) {
+			t3 = void 0;
+			break bb0;
+		}
+		let content;
+		let t4;
+		let t5;
+		let t6;
+		let updatedAt;
+		if ($[5] !== collectionId || $[6] !== labelField || $[7] !== loaded || $[8] !== saved) {
+			({content, updatedAt} = latestContent(loaded, saved));
+			t4 = loaded.id;
+			t5 = collectionId;
+			t6 = fieldPlainText(content[labelField]);
+			$[5] = collectionId;
+			$[6] = labelField;
+			$[7] = loaded;
+			$[8] = saved;
+			$[9] = content;
+			$[10] = t4;
+			$[11] = t5;
+			$[12] = t6;
+			$[13] = updatedAt;
+		} else {
+			content = $[9];
+			t4 = $[10];
+			t5 = $[11];
+			t6 = $[12];
+			updatedAt = $[13];
+		}
+		let t7;
+		if ($[14] !== content || $[15] !== loaded.references || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 || $[19] !== updatedAt) {
+			t7 = {
+				id: t4,
+				collectionId: t5,
+				label: t6,
+				content,
+				references: loaded.references,
+				updatedAt
+			};
+			$[14] = content;
+			$[15] = loaded.references;
+			$[16] = t4;
+			$[17] = t5;
+			$[18] = t6;
+			$[19] = updatedAt;
+			$[20] = t7;
+		} else t7 = $[20];
+		t3 = t7;
+	}
+	return t3;
+}
+
+//#endregion
+export { useLatestRecord };

package/dist/core/hooks/useArtifactHost.js

@@ -0,0 +1,139 @@
+import { connectArtifactHost } from "../lib/artifactHost.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+
+//#region src/core/hooks/useArtifactHost.ts
+/**
+* The studio context of artifacts rendered outside the editing runtime, such as the Preview's
+* read-only page. Absent on the website, where artifacts see `camox.studio` as `null`.
+*/
+const ArtifactStudioContext = React.createContext(null);
+/**
+* Whether artifacts run their source here, or show a still stand-in. On the Canvas, only the
+* selected item's artifacts run: each running artifact gets a browser process of its own, which
+* the Canvas waits on for every frame while the camera moves.
+*/
+const ArtifactsRunContext = React.createContext(true);
+/**
+* Connects an artifact's `<iframe>` to the `camox` runtime inside it: keeps sharing `studio` and
+* its Artifact Data as they change, sizes frames sized to their content, and routes the
+* artifact's navigation.
+*/
+function useArtifactHost(t0) {
+	const $ = c(18);
+	const { studio, data: t1, size, navigate } = t0;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = t1 === void 0 ? {} : t1;
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const data = t2;
+	const host = React.useRef(null);
+	let t3;
+	if ($[2] !== data || $[3] !== studio) {
+		t3 = {
+			studio,
+			data
+		};
+		$[2] = data;
+		$[3] = studio;
+		$[4] = t3;
+	} else t3 = $[4];
+	const latest = React.useRef(t3);
+	const latestNavigate = React.useRef(navigate);
+	const [height, setHeight] = React.useState(null);
+	let t4;
+	if ($[5] !== data || $[6] !== navigate || $[7] !== studio) {
+		t4 = () => {
+			latest.current = {
+				studio,
+				data
+			};
+			latestNavigate.current = navigate;
+			host.current?.update({
+				studio,
+				data
+			});
+		};
+		$[5] = data;
+		$[6] = navigate;
+		$[7] = studio;
+		$[8] = t4;
+	} else t4 = $[8];
+	React.useEffect(t4);
+	let t5;
+	if ($[9] !== size) {
+		t5 = (frame) => {
+			if (!frame) return;
+			const options = {
+				size,
+				onHeight: setHeight,
+				navigate: (path) => void latestNavigate.current({ to: path })
+			};
+			const connected = connectArtifactHost(frame, latest.current, options);
+			host.current = connected;
+			return () => {
+				connected.disconnect();
+				if (host.current === connected) host.current = null;
+			};
+		};
+		$[9] = size;
+		$[10] = t5;
+	} else t5 = $[10];
+	const ref = t5;
+	if (size !== "content" || height === null) {
+		let t6;
+		if ($[11] !== ref) {
+			t6 = { ref };
+			$[11] = ref;
+			$[12] = t6;
+		} else t6 = $[12];
+		return t6;
+	}
+	let t6;
+	if ($[13] !== height) {
+		t6 = { height };
+		$[13] = height;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== ref || $[16] !== t6) {
+		t7 = {
+			ref,
+			style: t6
+		};
+		$[15] = ref;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
+}
+/**
+* The Artifact Data to inline in an artifact's `srcDoc`: the data its source first rendered
+* with. Later changes reach the artifact through its host, so they never reload the frame; a new
+* source starts again from the current data.
+*/
+function useInitialArtifactData(source, data) {
+	const $ = c(3);
+	let t0;
+	if ($[0] !== data || $[1] !== source) {
+		t0 = {
+			source,
+			data
+		};
+		$[0] = data;
+		$[1] = source;
+		$[2] = t0;
+	} else t0 = $[2];
+	const [initial, setInitial] = React.useState(t0);
+	if (initial.source === source) return initial.data;
+	setInitial({
+		source,
+		data
+	});
+	return data;
+}
+
+//#endregion
+export { ArtifactStudioContext, ArtifactsRunContext, useArtifactHost, useInitialArtifactData };

package/dist/core/hooks/useFieldSelection.js

@@ -1,42 +1,67 @@
-import { previewStore } from "../../features/preview/previewStore.js";
+import { previewStore, samePlacement, selectionBlockId, selectionForOwner } from "../../features/preview/previewStore.js";
+import { PreviewEditingOwnerContext } from "../../features/preview/previewSelection.js";
 import { c } from "react/compiler-runtime";
+import { useContext } from "react";
 import { useSelector } from "@xstate/store-react";
 
 //#region src/core/hooks/useFieldSelection.ts
 /**
 * Returns whether the given field is currently selected based on the normalized selection state.
 *
-* Matches when the selection points to this exact field (type + name + optional repeater item).
+* Matches when the selection points to this exact field (type + name + optional repeatable item).
 */
-function useFieldSelection(blockId, fieldName, fieldType, repeaterItemId) {
+function useFieldSelection(blockId, fieldName, fieldType, repeatableItemId) {
 	const $ = c(6);
-	if ($[0] !== "d38da1cfe1462f293f7a9f0ae3e6649ca277091bc93b0a6a0e1cbbe5ba4d1fef") {
-		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "d38da1cfe1462f293f7a9f0ae3e6649ca277091bc93b0a6a0e1cbbe5ba4d1fef";
-	}
+	const owner = useContext(PreviewEditingOwnerContext);
 	let t0;
-	if ($[1] !== blockId || $[2] !== fieldName || $[3] !== fieldType || $[4] !== repeaterItemId) {
+	if ($[0] !== blockId || $[1] !== fieldName || $[2] !== fieldType || $[3] !== owner || $[4] !== repeatableItemId) {
 		t0 = (state) => {
-			const sel = state.context.selection;
-			if (!sel || sel.blockId !== blockId) return false;
+			const sel = selectionForOwner(state.context, owner);
+			if (!sel || selectionBlockId(sel) !== blockId) return false;
 			if (sel.type === "block-field") {
-				if (repeaterItemId) return false;
+				if (repeatableItemId) return false;
 				return sel.fieldType === fieldType && sel.fieldName === fieldName;
 			}
 			if (sel.type === "item-field") {
-				if (!repeaterItemId) return false;
-				return sel.itemId === repeaterItemId && sel.fieldType === fieldType && sel.fieldName === fieldName;
+				if (!repeatableItemId) return false;
+				return sel.itemId === repeatableItemId && sel.fieldType === fieldType && sel.fieldName === fieldName;
 			}
 			return false;
 		};
-		$[1] = blockId;
-		$[2] = fieldName;
-		$[3] = fieldType;
-		$[4] = repeaterItemId;
+		$[0] = blockId;
+		$[1] = fieldName;
+		$[2] = fieldType;
+		$[3] = owner;
+		$[4] = repeatableItemId;
 		$[5] = t0;
 	} else t0 = $[5];
 	return useSelector(previewStore, t0);
 }
+/**
+* Returns whether the placed record, or one of its record fields when `recordFieldName` is
+* given, is selected. Matches only this placement, so other placements of the same record
+* stay unselected.
+*/
+function useRecordSelection(placement, recordFieldName) {
+	const $ = c(4);
+	const owner = useContext(PreviewEditingOwnerContext);
+	let t0;
+	if ($[0] !== owner || $[1] !== placement || $[2] !== recordFieldName) {
+		t0 = (state) => {
+			const sel = selectionForOwner(state.context, owner);
+			if (!placement || !sel) return false;
+			if (sel.type !== "record" && sel.type !== "record-field") return false;
+			if (!samePlacement(sel, placement)) return false;
+			if (recordFieldName === void 0) return sel.type === "record";
+			return sel.type === "record-field" && sel.recordFieldName === recordFieldName;
+		};
+		$[0] = owner;
+		$[1] = placement;
+		$[2] = recordFieldName;
+		$[3] = t0;
+	} else t0 = $[3];
+	return useSelector(previewStore, t0);
+}
 
 //#endregion
-export { useFieldSelection };
+export { useFieldSelection, useRecordSelection };

package/dist/core/hooks/useIsEditable.js

@@ -1,19 +1,21 @@
 import { useIsAuthenticated } from "../../lib/auth.js";
-import { previewStore, selectIsEditMode } from "../../features/preview/previewStore.js";
-import { c } from "react/compiler-runtime";
+import { previewStore, selectIsCanvasShown } from "../../features/preview/previewStore.js";
+import * as React from "react";
 import { useSelector } from "@xstate/store-react";
 
 //#region src/core/hooks/useIsEditable.ts
+/**
+* Whether the surrounding 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);
 function useIsEditable(mode) {
-	const $ = c(1);
-	if ($[0] !== "baeaba7613c819c1f4460b64af1c246a057a26cf699e41daca4193d0ee512f1c") {
-		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "baeaba7613c819c1f4460b64af1c246a057a26cf699e41daca4193d0ee512f1c";
-	}
 	const isAuthenticated = useIsAuthenticated();
-	const isEditMode = useSelector(previewStore, selectIsEditMode);
-	return isAuthenticated && (mode === "site" || mode === "layout") && isEditMode;
+	const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
+	const surface = React.use(EditableSurfaceContext);
+	return isAuthenticated && (mode === "site" || mode === "layout") && isCanvasShown && surface;
 }
 
 //#endregion
-export { useIsEditable };
+export { EditableSurfaceContext, useIsEditable };

package/dist/core/hooks/useOverlayMessage.js

@@ -11,22 +11,18 @@ import * as React from "react";
 * `match` is undefined.
 */
 function useOverlayMessage(iframeWindow, enabled, startType, endType, match) {
-	const $ = c(10);
-	if ($[0] !== "054e151c2e2c2385d80749bd79af75fa91d1c017ccb12caf70e0f41df7360b1a") {
-		for (let $i = 0; $i < 10; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "054e151c2e2c2385d80749bd79af75fa91d1c017ccb12caf70e0f41df7360b1a";
-	}
+	const $ = c(9);
 	const [active, setActive] = React.useState(false);
 	let t0;
-	if ($[1] !== match) {
+	if ($[0] !== match) {
 		t0 = JSON.stringify(match);
-		$[1] = match;
-		$[2] = t0;
-	} else t0 = $[2];
+		$[0] = match;
+		$[1] = t0;
+	} else t0 = $[1];
 	const matchJson = t0;
 	let t1;
 	let t2;
-	if ($[3] !== enabled || $[4] !== endType || $[5] !== iframeWindow || $[6] !== matchJson || $[7] !== startType) {
+	if ($[2] !== enabled || $[3] !== endType || $[4] !== iframeWindow || $[5] !== matchJson || $[6] !== startType) {
 		t1 = () => {
 			if (!enabled || !iframeWindow) return;
 			const matchEntries = Object.entries(JSON.parse(matchJson));
@@ -51,16 +47,16 @@ function useOverlayMessage(iframeWindow, enabled, startType, endType, match) {
 			endType,
 			matchJson
 		];
-		$[3] = enabled;
-		$[4] = endType;
-		$[5] = iframeWindow;
-		$[6] = matchJson;
-		$[7] = startType;
-		$[8] = t1;
-		$[9] = t2;
+		$[2] = enabled;
+		$[3] = endType;
+		$[4] = iframeWindow;
+		$[5] = matchJson;
+		$[6] = startType;
+		$[7] = t1;
+		$[8] = t2;
 	} else {
-		t1 = $[8];
-		t2 = $[9];
+		t1 = $[7];
+		t2 = $[8];
 	}
 	React.useEffect(t1, t2);
 	return active;

package/dist/core/lib/artifact.d.ts

@@ -0,0 +1,21 @@
+import "../defineDocument.js";
+import "./artifactData.js";
+import * as React from "react";
+import "@camox/api-contract";
+//#region src/core/lib/artifact.d.ts
+/** The frame attributes of an artifact source. */
+export type ArtifactFrameProps = {
+  srcDoc: string;
+  sandbox: string;
+  allow: string;
+  title: string;
+  loading: "lazy";
+};
+/** What `block.Artifact` passes to its render prop, to spread onto an `<iframe>`. */
+export type ArtifactRenderProps = ArtifactFrameProps & {
+  /** Connects the frame to the `camox` runtime inside it. */
+  ref: React.RefCallback<HTMLIFrameElement>;
+  /** For `size: "content"`, the height the artifact's content needs, once it reports it. */
+  style?: React.CSSProperties;
+};
+//#endregion

package/dist/core/lib/artifact.js

@@ -0,0 +1,154 @@
+import { escapeAttribute } from "../../lib/html.js";
+import { ARTIFACT_RUNTIME } from "./artifactRuntime.js";
+import { artifactTitle } from "@camox/api-contract";
+
+//#region src/core/lib/artifact.ts
+const FONT_LINK_RELS = /* @__PURE__ */ new Set(["stylesheet", "preconnect"]);
+const UNHEAD_TAG_OPTIONS = /* @__PURE__ */ new Set([
+	"key",
+	"tagPriority",
+	"tagPosition",
+	"tagDuplicateStrategy",
+	"processTemplateParams",
+	"innerHTML",
+	"textContent"
+]);
+function renderLink(link) {
+	let attributes = "";
+	for (const [name, value] of Object.entries(link)) {
+		if (UNHEAD_TAG_OPTIONS.has(name) || !/^[a-z][a-z0-9-]*$/i.test(name)) continue;
+		if (value === true) attributes += ` ${name}`;
+		if (typeof value === "string" || typeof value === "number") attributes += ` ${name}="${escapeAttribute(String(value))}"`;
+	}
+	return `<link${attributes}>`;
+}
+const DATA_SCRIPT_OPEN = "<script type=\"application/json\" data-camox-data>";
+/**
+* The initial Artifact Data as an inert JSON script, which the runtime reads on first access.
+* `<` is escaped so no value can close the script early.
+*/
+function artifactDataScript(data) {
+	const json = JSON.stringify(data).replaceAll("<", "\\u003c");
+	return `${DATA_SCRIPT_OPEN}${json}<\/script>`;
+}
+/**
+* The stylesheet and preconnect links of the project's document definition, as HTML, so artifacts
+* use the website's fonts from their first render. Nothing else from the document's head: its
+* title, meta, scripts and icons belong to the website, not to the artifact.
+*/
+function artifactFontLinks(document) {
+	const links = document?.link;
+	if (!Array.isArray(links)) return "";
+	return links.filter((link) => {
+		if (typeof link !== "object" || link === null) return false;
+		const rel = link.rel;
+		if (typeof rel !== "string") return false;
+		return rel.split(/\s+/).some((token) => FONT_LINK_RELS.has(token.toLowerCase()));
+	}).map(renderLink).join("");
+}
+/**
+* The document an artifact frame loads: the `camox` runtime, the website's font links, the initial
+* Artifact Data, then the stored source. The doctype comes first so the runtime's script never
+* puts the page in quirks mode; the source's own doctype, if any, is then ignored by the parser.
+*/
+function artifactDocument(source, { fontLinks = "", data = {} }) {
+	return `<!doctype html>${`<script>${ARTIFACT_RUNTIME}<\/script>${fontLinks}${artifactDataScript(data)}`}${source}`;
+}
+/**
+* The artifact source inside an artifact's document, the reverse of `artifactDocument`, or `null`
+* for any other document. The font links can't hold `<` (their attributes escape it) and the data
+* JSON escapes it too, so the first `<\/script>` after the data's opening tag ends the data.
+*/
+function artifactSourceOf(document) {
+	const head = `<!doctype html><script>${ARTIFACT_RUNTIME}<\/script>`;
+	if (!document.startsWith(head)) return null;
+	const data = document.indexOf(DATA_SCRIPT_OPEN, head.length);
+	if (data < 0 || document.slice(head.length, data).includes("<script")) return null;
+	const end = document.indexOf("<\/script>", data + 48);
+	if (end < 0) return null;
+	return document.slice(end + 9);
+}
+/**
+* The frame props for an artifact source, with its initial Artifact Data and the website's font
+* links. This getter is the boundary that hides how the source reaches the frame (inline `srcdoc`
+* today), so blocks never depend on it.
+*/
+function artifactFrameProps(source, options = {}) {
+	return {
+		srcDoc: artifactDocument(source, options),
+		sandbox: "allow-scripts",
+		allow: "fullscreen; clipboard-write",
+		title: artifactTitle(source),
+		loading: "lazy"
+	};
+}
+const PLACEHOLDER_SOURCE = `<!doctype html>
+<html>
+  <head>
+    <title>Empty artifact</title>
+    <style>
+      html, body { height: 100%; margin: 0; }
+      body {
+        display: grid;
+        place-items: center;
+        min-height: 8rem;
+        box-sizing: border-box;
+        border: 1px dashed #a1a1aa;
+        background: #f4f4f5;
+        color: #71717a;
+        font: 14px/1.4 system-ui, sans-serif;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body><p>Empty artifact<br />Ask an agent to create it</p></body>
+</html>`;
+/**
+* The frame props of a still page: no script runs in it, so it can keep the website's origin,
+* and render in the website's own browser process rather than one of its own.
+*/
+function stillFrameProps(srcDoc, title) {
+	return {
+		srcDoc,
+		sandbox: "allow-same-origin",
+		allow: "",
+		title,
+		loading: "lazy"
+	};
+}
+/** The frame props of an empty artifact in the studio preview, so it takes the block's frame. */
+function artifactPlaceholderProps() {
+	return stillFrameProps(PLACEHOLDER_SOURCE, "Empty artifact");
+}
+/**
+* The frame props of an artifact that doesn't run, such as one on a Canvas Page that isn't
+* selected: a still page with only the artifact's title, over whatever is behind the frame.
+*/
+function artifactStandInProps(source) {
+	const title = artifactTitle(source);
+	const text = escapeAttribute(title);
+	return stillFrameProps(`<!doctype html>
+<html>
+  <head>
+    <title>${text}</title>
+    <style>
+      html, body { height: 100%; margin: 0; }
+      body {
+        display: grid;
+        place-items: center;
+        color: #a1a1aa;
+        font: 14px/1.4 system-ui, sans-serif;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body><p>${text}</p></body>
+</html>`, title);
+}
+/** Whether a stored artifact value holds a source to render. */
+function isArtifactSource(value) {
+	return typeof value === "string" && value.trim() !== "";
+}
+
+//#endregion
+export { artifactFontLinks, artifactFrameProps, artifactPlaceholderProps, artifactSourceOf, artifactStandInProps, artifactTitle, isArtifactSource };