camox 0.43.0 → 0.45.0

package/dist/features/studio/followAgent.js

@@ -0,0 +1,250 @@
+import { previewStore, sameEditingOwner } from "../preview/previewStore.js";
+
+//#region src/features/studio/followAgent.ts
+/**
+* How long following stays on a page it went to before it leaves for another one, in
+* milliseconds. A product tuning value: long enough to see each destination, short enough to
+* keep up with the agent.
+*/
+const FOLLOW_MINIMUM_STAY = 2e3;
+const pageRowId = (page) => page.owner.kind === "page" ? page.owner.pageId : null;
+function findPage(where, ref) {
+	return where.pages.find((page) => "key" in ref ? page.key === ref.key : pageRowId(page) === ref.pageId);
+}
+/** The Page the editor is on, if any. */
+const currentPage = (where) => where.pageKey ? where.pages.find((page) => page.key === where.pageKey) : void 0;
+const refKey = (ref) => "key" in ref ? `key:${ref.key}` : `page:${ref.pageId}`;
+function locate(where, here, touch) {
+	const elsewhere = !!touch.locale && touch.locale !== where.locale;
+	const keptBlock = (id) => id && !elsewhere && touch.kind !== "deleted" && touch.kind !== "settings" ? id : void 0;
+	const at = (page, blockId) => {
+		const id = keptBlock(blockId);
+		return {
+			page,
+			...id ? { blockId: id } : {}
+		};
+	};
+	if (touch.entity === "page") {
+		const shown = where.pages.some((page) => pageRowId(page) === touch.pageId);
+		if (elsewhere && !shown) return null;
+		return at({ pageId: touch.pageId }, touch.blockId);
+	}
+	if (touch.entity === "layout") {
+		const page = here?.layoutId === touch.layoutId ? here : where.pages.find((candidate) => candidate.layoutId === touch.layoutId && candidate.pathname);
+		return page ? at({ key: page.key }, touch.blockId) : null;
+	}
+	const placement = here?.blocks?.find((block) => block.type === touch.blockType);
+	if (here && placement) return at({ key: here.key }, placement.id);
+	return elsewhere ? null : { catalog: touch.blockType };
+}
+function destinationOf(where, batch) {
+	const here = currentPage(where);
+	const deletedPages = new Set(batch.touches.flatMap((touch) => touch.entity === "page" && touch.kind === "deleted" && !touch.blockId ? [touch.pageId] : []));
+	const located = batch.touches.filter((touch) => !(touch.entity === "page" && deletedPages.has(touch.pageId))).flatMap((touch) => {
+		const at = locate(where, here, touch);
+		return at ? [at] : [];
+	});
+	const touched = /* @__PURE__ */ new Map();
+	const identity = (ref) => {
+		const page = findPage(where, ref);
+		return page ? `key:${page.key}` : refKey(ref);
+	};
+	for (const at of located) {
+		if ("catalog" in at) continue;
+		const key = identity(at.page);
+		const entry = touched.get(key) ?? {
+			page: at.page,
+			blockIds: [],
+			count: 0
+		};
+		entry.count += 1;
+		if (at.blockId && !entry.blockIds.includes(at.blockId)) entry.blockIds.push(at.blockId);
+		touched.set(key, entry);
+	}
+	if (touched.size === 0) {
+		const catalog = located.find((at) => "catalog" in at);
+		return catalog && "catalog" in catalog ? {
+			kind: "catalog",
+			blockType: catalog.catalog
+		} : null;
+	}
+	const order = (ref) => {
+		const page = findPage(where, ref);
+		return page ? where.pages.indexOf(page) : where.pages.length;
+	};
+	const entries = [...touched.values()];
+	const chosen = (here && touched.get(`key:${here.key}`)) ?? entries.reduce((best, entry) => entry.count > best.count || entry.count === best.count && order(entry.page) < order(best.page) ? entry : best);
+	return {
+		kind: "page",
+		page: chosen.page,
+		blockIds: chosen.blockIds
+	};
+}
+/** The topmost of the touched blocks by its order on the page; ones not shown yet come last. */
+function topmostBlock(page, blockIds) {
+	const position = (id) => {
+		const index = page.blocks?.findIndex((block) => block.id === id) ?? -1;
+		return index === -1 ? Infinity : index;
+	};
+	return [...blockIds].sort((a, b) => position(a) - position(b))[0];
+}
+/**
+* Following the agent on the Canvas or in the Preview: each touched batch gives at most one
+* destination, which the Studio goes to through the existing selection. Pages are selected
+* through the URL, replacing the history entry, and blocks through the preview store once the
+* destination page's editing frame is active.
+*/
+function createFollowAgent({ navigate, where: initial }) {
+	let where = initial;
+	let following = true;
+	/** When following last arrived on another page; it stays there for the minimum stay. */
+	let arrivedAt = -Infinity;
+	/** The latest destination on another page, waiting for the minimum stay or for its page. */
+	let pendingNavigation = null;
+	/** When the pending destination's page has to show by, once following could go there. */
+	let pendingNavigationUntil = 0;
+	let timer = null;
+	/** Blocks to select once their page's editing frame is active. */
+	let blocksToSelect = null;
+	/** The block following last selected, to move to a topmost one that shows later. */
+	let selected = null;
+	/** The block following selected last, whichever page it's on, to tell the editor's apart. */
+	let ownSelection = null;
+	/** Selects the topmost of the touched blocks on `page`, if one shows. */
+	const selectTopmost = (touched, page) => {
+		const blockId = topmostBlock(page, touched.blockIds);
+		if (!blockId) return;
+		selected = {
+			page: touched.page,
+			blockIds: touched.blockIds,
+			blockId
+		};
+		ownSelection = {
+			owner: page.owner,
+			blockId
+		};
+		previewStore.send({
+			type: "setFocusedBlock",
+			...page.owner,
+			blockId
+		});
+	};
+	const selectBlocks = () => {
+		if (!blocksToSelect) return;
+		const page = findPage(where, blocksToSelect.page);
+		const { editingContext } = previewStore.getSnapshot().context;
+		if (!page || !sameEditingOwner(editingContext, page.owner)) return;
+		const touched = blocksToSelect;
+		blocksToSelect = null;
+		selectTopmost(touched, page);
+	};
+	/** Reselects when a touched block above the selected one shows, while the selection is ours. */
+	const reselectTopmost = () => {
+		if (!selected) return;
+		const page = findPage(where, selected.page);
+		const selection = previewStore.getSnapshot().context.editingContext?.selection;
+		if (!page || selection?.type !== "block" || selection.blockId !== selected.blockId) {
+			selected = null;
+			return;
+		}
+		if (topmostBlock(page, selected.blockIds) !== selected.blockId) selectTopmost(selected, page);
+	};
+	const clearTimer = () => {
+		if (timer !== null) clearTimeout(timer);
+		timer = null;
+	};
+	/** Goes to the pending destination, once the minimum stay is over and its page is known. */
+	const navigatePending = () => {
+		if (!pendingNavigation) return;
+		const wait = arrivedAt + FOLLOW_MINIMUM_STAY - Date.now();
+		if (wait > 0) {
+			timer ??= setTimeout(() => {
+				timer = null;
+				navigatePending();
+			}, wait);
+			return;
+		}
+		if (Date.now() >= pendingNavigationUntil) {
+			pendingNavigation = null;
+			return;
+		}
+		const destination = pendingNavigation;
+		const pathname = destination.kind === "catalog" ? where.blockCatalogPath(destination.blockType) : findPage(where, destination.page)?.pathname;
+		if (!pathname) return;
+		pendingNavigation = null;
+		arrivedAt = Date.now();
+		blocksToSelect = destination.kind === "page" && destination.blockIds.length ? destination : null;
+		selected = null;
+		navigate({
+			to: `${pathname}${where.location.search}`,
+			replace: true,
+			source: "follow"
+		});
+	};
+	/**
+	* Whether the editor selected something themselves: a selection following didn't make.
+	* Clearing it isn't one, as frames do when the Canvas mounts or a navigation releases them.
+	*/
+	const editorSelected = () => {
+		const { editingContext } = previewStore.getSnapshot().context;
+		const selection = editingContext?.selection;
+		if (!selection) return false;
+		return !(ownSelection && selection.type === "block" && selection.blockId === ownSelection.blockId && sameEditingOwner(editingContext, ownSelection.owner));
+	};
+	let lastSelection = previewStore.getSnapshot().context.editingContext?.selection ?? null;
+	const subscription = previewStore.subscribe(({ context }) => {
+		const selection = context.editingContext?.selection ?? null;
+		const changed = selection !== lastSelection;
+		lastSelection = selection;
+		if (changed && editorSelected()) {
+			follow.takeOver();
+			return;
+		}
+		selectBlocks();
+	});
+	const follow = {
+		receive(batch) {
+			if (!following) return;
+			const destination = destinationOf(where, batch);
+			if (!destination) return;
+			const here = currentPage(where);
+			if (destination.kind === "page" && here && findPage(where, destination.page) === here) {
+				pendingNavigation = null;
+				clearTimer();
+				if (!destination.blockIds.length) return;
+				blocksToSelect = destination;
+				selectBlocks();
+				return;
+			}
+			pendingNavigation = destination;
+			pendingNavigationUntil = Math.max(Date.now(), arrivedAt + FOLLOW_MINIMUM_STAY) + FOLLOW_MINIMUM_STAY;
+			navigatePending();
+		},
+		update(next) {
+			const navigated = next.location.pathname !== where.location.pathname;
+			where = next;
+			if (navigated && next.location.source === void 0) follow.takeOver();
+			navigatePending();
+			selectBlocks();
+			reselectTopmost();
+		},
+		takeOver() {
+			following = false;
+			pendingNavigation = null;
+			blocksToSelect = null;
+			selected = null;
+			clearTimer();
+		},
+		resume() {
+			following = true;
+		},
+		dispose() {
+			clearTimer();
+			subscription.unsubscribe();
+		}
+	};
+	return follow;
+}
+
+//#endregion
+export { FOLLOW_MINIMUM_STAY, createFollowAgent };

package/dist/features/studio/followAgentContext.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+
+//#region src/features/studio/followAgentContext.ts
+const FollowAgentContext = React.createContext(null);
+
+//#endregion
+export { FollowAgentContext };

package/dist/features/studio/localeOptions.js

@@ -0,0 +1,118 @@
+//#region src/features/studio/localeOptions.ts
+const localeNames = new Intl.DisplayNames(["en"], { type: "language" });
+/** A locale's name as the studio shows it, "German (de)", or its tag alone when unnamed. */
+function localeLabel(tag) {
+	try {
+		const name = localeNames.of(tag);
+		return name && name !== tag ? `${name} (${tag})` : tag;
+	} catch {
+		return tag;
+	}
+}
+/** The BCP 47 tags the studio offers to add: widely used languages and their main regions. */
+const OFFERED_TAGS = [
+	"af",
+	"am",
+	"ar",
+	"az",
+	"be",
+	"bg",
+	"bn",
+	"bs",
+	"ca",
+	"cs",
+	"cy",
+	"da",
+	"de",
+	"de-AT",
+	"de-CH",
+	"el",
+	"en",
+	"en-AU",
+	"en-CA",
+	"en-GB",
+	"en-IE",
+	"en-IN",
+	"en-NZ",
+	"en-US",
+	"es",
+	"es-419",
+	"es-ES",
+	"es-MX",
+	"et",
+	"eu",
+	"fa",
+	"fi",
+	"fil",
+	"fr",
+	"fr-BE",
+	"fr-CA",
+	"fr-CH",
+	"ga",
+	"gl",
+	"gu",
+	"he",
+	"hi",
+	"hr",
+	"hu",
+	"hy",
+	"id",
+	"is",
+	"it",
+	"ja",
+	"ka",
+	"kk",
+	"km",
+	"kn",
+	"ko",
+	"lo",
+	"lt",
+	"lv",
+	"mk",
+	"ml",
+	"mn",
+	"mr",
+	"ms",
+	"mt",
+	"my",
+	"nb",
+	"ne",
+	"nl",
+	"nl-BE",
+	"pa",
+	"pl",
+	"pt",
+	"pt-BR",
+	"pt-PT",
+	"ro",
+	"ru",
+	"si",
+	"sk",
+	"sl",
+	"sq",
+	"sr",
+	"sv",
+	"sw",
+	"ta",
+	"te",
+	"th",
+	"tr",
+	"uk",
+	"ur",
+	"uz",
+	"vi",
+	"zh-Hans",
+	"zh-Hant",
+	"zu"
+];
+/** The locales a project can add, by name: the offered tags it doesn't have yet. */
+function localeOptions(existing) {
+	const taken = new Set(existing.map((locale) => locale.tag.toLowerCase()));
+	return OFFERED_TAGS.filter((tag) => !taken.has(tag.toLowerCase())).map((tag) => ({
+		tag,
+		label: localeLabel(tag)
+	})).sort((a, b) => a.label.localeCompare(b.label));
+}
+
+//#endregion
+export { localeLabel, localeOptions };

package/dist/features/studio/localeSwitch.js

@@ -0,0 +1,19 @@
+import { STUDIO_BASE_PATH } from "./routes.js";
+
+//#region src/features/studio/localeSwitch.ts
+/**
+* The locale-relative path switching to another locale goes to from `path`. A curated page keeps
+* its localization's path there, found by its id (ADR 0015). Studio routes and singleton pages
+* keep their code-owned path. A derived layout's record page goes to the record's page there, as
+* that locale's route discovery finds it. Anything else, such as a page missing from the other
+* locale, goes to that locale's home.
+*/
+function pathInLocale(path, { shown, target, singleton, recordPath }) {
+	if (path === "/camox" || path.startsWith(`${"/camox"}/`) || singleton(path)) return path;
+	const page = shown.find((candidate) => candidate.fullPath === path);
+	if (page) return target.find((candidate) => candidate.id === page.id)?.fullPath ?? "/";
+	return recordPath ?? "/";
+}
+
+//#endregion
+export { pathInLocale };

package/dist/features/studio/routes.js

@@ -2,6 +2,53 @@
 const STUDIO_ROUTE_SEGMENT = "camox";
 const STUDIO_BASE_PATH = `/${STUDIO_ROUTE_SEGMENT}`;
 const STUDIO_CONTENT_PATH = `${STUDIO_BASE_PATH}/content`;
+const STUDIO_ASSETS_PATH = `${STUDIO_CONTENT_PATH}/assets`;
+const collectionContentPath = (collectionId) => `${STUDIO_CONTENT_PATH}/collections/${encodeURIComponent(collectionId)}`;
+function matchCollectionContentPath(pathname) {
+	const match = /^\/camox\/content\/collections\/([^/]+)(?:(\/new)|\/([^/]+)\/edit)?$/.exec(pathname);
+	if (!match) return null;
+	try {
+		const collectionId = decodeURIComponent(match[1]);
+		if (!collectionId || collectionId.includes("/")) return null;
+		if (!match[3]) return {
+			collectionId,
+			isNew: !!match[2]
+		};
+		const itemId = decodeURIComponent(match[3]);
+		if (!itemId || itemId.includes("/")) return null;
+		return {
+			collectionId,
+			isNew: false,
+			itemId
+		};
+	} catch {
+		return null;
+	}
+}
+/** The Studio URL of the Canvas with nothing selected. */
+const STUDIO_CANVAS_PATH = `${STUDIO_BASE_PATH}/canvas`;
+const STUDIO_BLOCKS_PATH = `${STUDIO_BASE_PATH}/blocks`;
+/** The Studio URL of a block of the Block Catalog. */
+const blockCatalogPath = (blockId) => `${STUDIO_BLOCKS_PATH}/${encodeURIComponent(blockId)}`;
+/** The id of the Block Catalog block a pathname selects, if any. */
+function matchBlockCatalogPath(pathname) {
+	const match = /^\/camox\/blocks\/([^/]+)$/.exec(pathname);
+	if (!match) return null;
+	try {
+		return decodeURIComponent(match[1]) || null;
+	} catch {
+		return null;
+	}
+}
+/**
+* A location that only exists on the Canvas: the Canvas with
+* nothing selected, or a block of the Block Catalog.
+*/
+function matchCanvasOnlyPath(pathname) {
+	if (pathname === "/camox/canvas") return {};
+	const blockId = matchBlockCatalogPath(pathname);
+	return blockId ? { blockId } : null;
+}
 
 //#endregion
-export { STUDIO_BASE_PATH, STUDIO_CONTENT_PATH, STUDIO_ROUTE_SEGMENT };
+export { STUDIO_ASSETS_PATH, STUDIO_BASE_PATH, STUDIO_BLOCKS_PATH, STUDIO_CANVAS_PATH, STUDIO_CONTENT_PATH, STUDIO_ROUTE_SEGMENT, blockCatalogPath, collectionContentPath, matchBlockCatalogPath, matchCanvasOnlyPath, matchCollectionContentPath };

package/dist/features/studio/studioStore.js

@@ -4,7 +4,14 @@ import { createStore } from "@xstate/store-react";
 const studioStore = createStore({
 	context: {
 		isCommandPaletteOpen: false,
-		commandPalettePages: []
+		commandPalettePages: [],
+		reviewDraftSheet: {
+			open: false,
+			startRenaming: false
+		},
+		isDiscardDraftDialogOpen: false,
+		localeDialog: null,
+		websiteLocation: null
 	},
 	on: {
 		openCommandPalette: (context) => {
@@ -38,6 +45,62 @@ const studioStore = createStore({
 				...context,
 				commandPalettePages: context.commandPalettePages.slice(0, -1)
 			};
+		},
+		openReviewDraftSheet: (context, event) => {
+			return {
+				...context,
+				reviewDraftSheet: {
+					open: true,
+					startRenaming: event.startRenaming ?? false
+				}
+			};
+		},
+		closeReviewDraftSheet: (context) => {
+			return {
+				...context,
+				reviewDraftSheet: {
+					open: false,
+					startRenaming: false
+				}
+			};
+		},
+		openDiscardDraftDialog: (context) => {
+			return {
+				...context,
+				isDiscardDraftDialogOpen: true
+			};
+		},
+		closeDiscardDraftDialog: (context) => {
+			return {
+				...context,
+				isDiscardDraftDialogOpen: false
+			};
+		},
+		openLocaleDialog: (context, event) => {
+			return {
+				...context,
+				localeDialog: event.dialog
+			};
+		},
+		closeLocaleDialog: (context) => {
+			return {
+				...context,
+				localeDialog: null
+			};
+		},
+		rememberWebsiteLocation: (context, event) => {
+			const previous = context.websiteLocation;
+			const { locale, path, search, hash } = event.location;
+			if (previous?.locale === locale && previous.path === path && previous.search === search && previous.hash === hash) return context;
+			return {
+				...context,
+				websiteLocation: {
+					locale,
+					path,
+					search,
+					hash
+				}
+			};
 		}
 	}
 });

package/dist/features/studio/useTheme.js

@@ -35,31 +35,32 @@ function setTheme(theme) {
 	applyTheme(theme);
 	notify();
 }
+/**
+* Owns the studio theme: writes the active class onto `<html>` and persists
+* changes to localStorage. Should only be mounted from the studio chrome —
+* never from contexts that share `<html>` with the user's site.
+*/
 function useApplyTheme() {
-	const $ = c(5);
-	if ($[0] !== "5860ae8e48f7dc27e488236def482df22f144de61ae2d86bfde82aeeea4f9874") {
-		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "5860ae8e48f7dc27e488236def482df22f144de61ae2d86bfde82aeeea4f9874";
-	}
+	const $ = c(4);
 	const theme = React.useSyncExternalStore(subscribe, readStoredTheme, _temp2);
 	const resolvedTheme = React.useSyncExternalStore(subscribe, _temp3, _temp4);
 	let t0;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = [];
-		$[1] = t0;
-	} else t0 = $[1];
+		$[0] = t0;
+	} else t0 = $[0];
 	React.useEffect(_temp7, t0);
 	let t1;
-	if ($[2] !== resolvedTheme || $[3] !== theme) {
+	if ($[1] !== resolvedTheme || $[2] !== theme) {
 		t1 = {
 			theme,
 			resolvedTheme,
 			setTheme
 		};
-		$[2] = resolvedTheme;
-		$[3] = theme;
-		$[4] = t1;
-	} else t1 = $[4];
+		$[1] = resolvedTheme;
+		$[2] = theme;
+		$[3] = t1;
+	} else t1 = $[3];
 	return t1;
 }
 function _temp7() {
@@ -103,15 +104,11 @@ function _temp2() {
 	return "system";
 }
 function useThemeActions() {
-	const $ = c(5);
-	if ($[0] !== "5860ae8e48f7dc27e488236def482df22f144de61ae2d86bfde82aeeea4f9874") {
-		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "5860ae8e48f7dc27e488236def482df22f144de61ae2d86bfde82aeeea4f9874";
-	}
+	const $ = c(4);
 	const { theme, setTheme } = useApplyTheme();
 	let t0;
 	let t1;
-	if ($[1] !== setTheme || $[2] !== theme) {
+	if ($[0] !== setTheme || $[1] !== theme) {
 		t0 = () => {
 			const actions = [
 				{
@@ -162,22 +159,22 @@ function useThemeActions() {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp0)
+					ids: actions.map(_temp10)
 				});
 			};
 		};
 		t1 = [theme, setTheme];
-		$[1] = setTheme;
-		$[2] = theme;
-		$[3] = t0;
-		$[4] = t1;
+		$[0] = setTheme;
+		$[1] = theme;
+		$[2] = t0;
+		$[3] = t1;
 	} else {
-		t0 = $[3];
-		t1 = $[4];
+		t0 = $[2];
+		t1 = $[3];
 	}
 	React.useEffect(t0, t1);
 }
-function _temp0(a) {
+function _temp10(a) {
 	return a.id;
 }
 function _temp9() {}

package/dist/features/vite/artifactRuntimeMinification.js

@@ -0,0 +1,36 @@
+import { minifySync } from "vite-plus";
+
+//#region src/features/vite/artifactRuntimeMinification.ts
+/** The runtime's source module, also with the query Vite's dev server may add to it. */
+const RUNTIME_MODULE = /[\\/]src[\\/]core[\\/]lib[\\/]artifactRuntime\.ts(\?.*)?$/;
+const RUNTIME_EXPORT = /export const ARTIFACT_RUNTIME = `([^`]*)`;/;
+/**
+* Minifies the `camox` runtime in the source of `artifactRuntime.ts`. Every artifact frame inlines
+* the runtime in its `srcDoc`, so the website's HTML carries one copy per artifact, and the SDK's
+* bundle is otherwise left unminified. Throws when the module no longer holds the runtime as one
+* plain template literal, rather than shipping it unminified.
+*/
+function minifyArtifactRuntimeModule(code) {
+	const match = RUNTIME_EXPORT.exec(code);
+	if (!match) throw new Error("artifactRuntime.ts no longer exports ARTIFACT_RUNTIME as `…`.");
+	const runtime = match[1];
+	if (runtime.includes("\\") || runtime.includes("${")) throw new Error("The artifact runtime must have no backslashes or interpolations.");
+	const { code: minified, errors } = minifySync("artifactRuntime.js", runtime);
+	if (errors.length > 0) throw new Error(`The artifact runtime failed to minify: ${errors[0].message}`);
+	return code.replace(match[0], () => `export const ARTIFACT_RUNTIME = ${JSON.stringify(minified.trim())};`);
+}
+/**
+* A build `transform` that minifies the runtime's source module and leaves every other module
+* alone. The SDK's own build applies it, and so does the `camox` Vite plugin, for apps that
+* compile the SDK from source.
+*/
+function transformArtifactRuntime(code, id) {
+	if (!RUNTIME_MODULE.test(id)) return null;
+	return {
+		code: minifyArtifactRuntimeModule(code),
+		map: { mappings: "" }
+	};
+}
+
+//#endregion
+export { minifyArtifactRuntimeModule, transformArtifactRuntime };