camox 0.44.0 → 0.45.0

package/dist/features/canvas/canvasFrameMode.js

@@ -0,0 +1,53 @@
+import { canvasStore } from "./canvasStore.js";
+import { CanvasWorkspaceContext } from "./canvasZoom.js";
+import { c } from "react/compiler-runtime";
+import { useContext, useState } from "react";
+import { useSelector } from "@xstate/store-react";
+
+//#region src/features/canvas/canvasFrameMode.ts
+function canvasFrameMode({ near, selected, moving }) {
+	if (!near && !selected) return "resting";
+	if (moving || !selected) return "paused";
+	return "live";
+}
+/**
+* A frame's mode as the camera moves. A frame that leaves the camera rests only
+* once the camera is still: while it moves, every frame is paused anyway, and
+* frames it passes by would otherwise stop and restart all their effects.
+*/
+function useCanvasFrameMode(t0) {
+	const $ = c(8);
+	const { near, selected } = t0;
+	const workspaceKey = useContext(CanvasWorkspaceContext)?.workspaceKey;
+	let t1;
+	if ($[0] !== near || $[1] !== selected || $[2] !== workspaceKey) {
+		t1 = (state) => (selected || !near) && workspaceKey != null && !!state.context.moving[workspaceKey];
+		$[0] = near;
+		$[1] = selected;
+		$[2] = workspaceKey;
+		$[3] = t1;
+	} else t1 = $[3];
+	const moving = useSelector(canvasStore, t1);
+	const away = !near && !selected;
+	const [resting, setResting] = useState(away);
+	if (resting !== away && (!away || !moving)) setResting(away);
+	if (!away) {
+		let t2;
+		if ($[4] !== moving || $[5] !== near || $[6] !== selected) {
+			t2 = canvasFrameMode({
+				near,
+				selected,
+				moving
+			});
+			$[4] = moving;
+			$[5] = near;
+			$[6] = selected;
+			$[7] = t2;
+		} else t2 = $[7];
+		return t2;
+	}
+	return resting ? "resting" : "paused";
+}
+
+//#endregion
+export { canvasFrameMode, useCanvasFrameMode };

package/dist/features/canvas/canvasInsertionSeams.js

@@ -0,0 +1,44 @@
+//#region src/features/canvas/canvasInsertionSeams.ts
+/** Main block wrappers publish insertion permissions, including layout boundaries.
+* Detached block targets and fields deliberately do not publish this metadata. */
+function readBlockInsertion(element) {
+	const value = element.getAttribute("data-camox-block-insertion");
+	if (!value) return;
+	try {
+		const insertion = JSON.parse(value);
+		if (!insertion || typeof insertion.position !== "string" || typeof insertion.before !== "boolean" || typeof insertion.after !== "boolean" || insertion.afterPosition !== void 0 && insertion.afterPosition !== null && typeof insertion.afterPosition !== "string") return;
+		return insertion;
+	} catch {
+		return;
+	}
+}
+/** Walk boundaries, not blocks: the bottom of one block and the top of its
+* successor describe ONE insertion seam, even when both permit insertion. */
+function canvasInsertionSeams(targets) {
+	const blocks = targets.filter((target) => target.insertion && target.bounds.width > 0 && target.bounds.height > 0);
+	const seams = [];
+	for (let index = 0; index <= blocks.length; index++) {
+		const previous = blocks[index - 1];
+		const next = blocks[index];
+		const anchor = previous?.insertion?.after ? previous : next?.insertion?.before ? next : null;
+		if (!anchor?.insertion) continue;
+		const insertPosition = anchor === previous ? "after" : "before";
+		const { position, afterPosition } = anchor.insertion;
+		const y = previous && next ? (previous.bounds.y + previous.bounds.height + next.bounds.y) / 2 : anchor.bounds.y + (insertPosition === "after" ? anchor.bounds.height : 0);
+		seams.push({
+			key: `${previous?.element.getAttribute("data-camox-block-id") ?? "start"}:${next?.element.getAttribute("data-camox-block-id") ?? "end"}`,
+			x: anchor.bounds.x + anchor.bounds.width / 2,
+			y,
+			request: {
+				type: "CAMOX_ADD_BLOCK_REQUEST",
+				blockPosition: position,
+				insertPosition,
+				...afterPosition !== void 0 ? { afterPosition } : {}
+			}
+		});
+	}
+	return seams;
+}
+
+//#endregion
+export { canvasInsertionSeams, readBlockInsertion };

package/dist/features/canvas/canvasItems.js

@@ -0,0 +1,120 @@
+import { CANVAS_DEVICES } from "./canvasPages.js";
+
+//#region src/features/canvas/canvasItems.ts
+const CANVAS_ITEM_GAP = 240;
+const CANVAS_SHELF_GAP = 480;
+const CANVAS_SLOT_WIDTH = CANVAS_DEVICES.desktop.width;
+/** Per-kind layout and camera behavior. */
+const CANVAS_ITEM_KINDS = {
+	page: {
+		width: CANVAS_SLOT_WIDTH,
+		snappable: true
+	},
+	block: {
+		width: CANVAS_SLOT_WIDTH,
+		snappable: true
+	}
+};
+/** The key of a block's item in the Canvas row. */
+function canvasBlockKey(blockId) {
+	return `block:${blockId}`;
+}
+/** The Block Catalog: every page-content Block Definition, alphabetically by title. */
+function getBlockCatalog(blocks) {
+	return blocks.filter((block) => !block._internal.layoutOnly).sort((a, b) => a._internal.title.localeCompare(b._internal.title));
+}
+function getCanvasShelves(pages, blocks) {
+	return [{
+		key: "shelf:pages",
+		label: "Pages",
+		items: pages.map((page) => ({
+			kind: "page",
+			key: page.key,
+			page
+		}))
+	}, {
+		key: "shelf:blocks",
+		label: "Blocks",
+		shownWhenEmpty: true,
+		collapsedByDefault: true,
+		unmountedWhenCollapsed: true,
+		items: getBlockCatalog(blocks).map((block) => ({
+			kind: "block",
+			key: canvasBlockKey(block._internal.id),
+			block
+		}))
+	}];
+}
+/**
+* World-space positions of the Canvas row, matching its flex layout, and the
+* markers above it. Items of collapsed shelves are left out of the row; each
+* collapsed shelf, or empty one that is still shown, takes a zero-width slot
+* instead, so its marker keeps a place and shows as collapsed.
+*/
+function positionCanvasShelves(shelves, collapsed = /* @__PURE__ */ new Set()) {
+	const items = [];
+	const markers = [];
+	let left = 0;
+	for (const shelf of shelves) {
+		if (!isCanvasShelfShown(shelf)) continue;
+		const start = left;
+		const marker = {
+			key: shelf.key,
+			label: shelf.label,
+			count: shelf.items.length
+		};
+		if (collapsed.has(shelf.key) || shelf.items.length === 0) {
+			markers.push({
+				...marker,
+				start,
+				end: start,
+				collapsed: true
+			});
+			left += 480;
+			continue;
+		}
+		for (const item of shelf.items) {
+			const { width } = CANVAS_ITEM_KINDS[item.kind];
+			items.push({
+				...item,
+				left,
+				width
+			});
+			left += width + 240;
+		}
+		const end = left - 240;
+		markers.push({
+			...marker,
+			start,
+			end,
+			collapsed: false
+		});
+		left = end + 480;
+	}
+	return {
+		items,
+		markers,
+		width: Math.max(0, left - 480)
+	};
+}
+/** The shelves collapsed when the Canvas first opens in a Studio session. */
+function getDefaultCollapsedShelves(shelves) {
+	return shelves.filter((shelf) => shelf.collapsedByDefault).map(({ key }) => key);
+}
+/** Whether a shelf has a marker and a place in the row. */
+function isCanvasShelfShown(shelf) {
+	return shelf.items.length > 0 || shelf.shownWhenEmpty === true;
+}
+function isCanvasBlock(item) {
+	return item.kind === "block";
+}
+function canvasSnapTargets(items) {
+	return items.filter((item) => CANVAS_ITEM_KINDS[item.kind].snappable).map(({ key, left, width }) => ({
+		key,
+		left,
+		width
+	}));
+}
+
+//#endregion
+export { CANVAS_SLOT_WIDTH, canvasBlockKey, canvasSnapTargets, getBlockCatalog, getCanvasShelves, getDefaultCollapsedShelves, isCanvasBlock, isCanvasShelfShown, positionCanvasShelves };

package/dist/features/canvas/canvasOverlayGeometry.js

@@ -0,0 +1,240 @@
+import { PREVIEW_PAUSED_ATTRIBUTE } from "../../core/lib/previewPaused.js";
+import { readBlockInsertion } from "./canvasInsertionSeams.js";
+import { resolveOverlayHighlights } from "../preview/overlayHighlights.js";
+import { repeatableItemElements, subscribeRepeatableItems } from "../preview/repeatableItemTargets.js";
+
+//#region src/features/canvas/canvasOverlayGeometry.ts
+const targetSelector = "[data-camox-field-id], [data-camox-block-id]";
+const stateAttributes = /* @__PURE__ */ new Set([
+	"data-camox-hovered",
+	"data-camox-focused",
+	"data-camox-overlay-mode",
+	PREVIEW_PAUSED_ATTRIBUTE
+]);
+function rectOf({ x, y, width, height }) {
+	return {
+		x,
+		y,
+		width,
+		height
+	};
+}
+function hasArea(rect) {
+	return rect.width > 0 && rect.height > 0;
+}
+function unionOf(rects) {
+	const left = Math.min(...rects.map((rect) => rect.x));
+	const top = Math.min(...rects.map((rect) => rect.y));
+	const right = Math.max(...rects.map((rect) => rect.x + rect.width));
+	const bottom = Math.max(...rects.map((rect) => rect.y + rect.height));
+	return {
+		x: left,
+		y: top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+function depthOf(element) {
+	let depth = 0;
+	for (let parent = element.parentElement; parent; parent = parent.parentElement) depth++;
+	return depth;
+}
+function isVisible(element) {
+	return element.checkVisibility({
+		opacityProperty: true,
+		visibilityProperty: true
+	});
+}
+function inheritsSyncedMode(element) {
+	return ["synced", "reference"].includes(element.closest("[data-camox-overlay-mode]")?.getAttribute("data-camox-overlay-mode") ?? "");
+}
+function rawStateOf({ target, item }) {
+	if (item) return {
+		hovered: item.hovered,
+		focused: item.focused,
+		hoverGroup: item.hoverGroup,
+		synced: item.synced || inheritsSyncedMode(target.element)
+	};
+	return {
+		hovered: target.element.hasAttribute("data-camox-hovered"),
+		focused: target.element.hasAttribute("data-camox-focused"),
+		hoverGroup: null,
+		synced: inheritsSyncedMode(target.element)
+	};
+}
+function measureElement(element) {
+	const stringField = element.hasAttribute("data-camox-field-id") && !element.hasAttribute("data-camox-field-type");
+	const inline = stringField || element.localName === "svg" && element.getAttribute("data-camox-field-type") === "icon";
+	const bounds = rectOf(element.getBoundingClientRect());
+	const rects = stringField ? Array.from(element.getClientRects(), rectOf) : [bounds];
+	return {
+		depth: depthOf(element),
+		target: {
+			element,
+			bounds,
+			rects: rects.filter(hasArea),
+			visible: isVisible(element),
+			inline,
+			insertion: readBlockInsertion(element),
+			hovered: false,
+			focused: false,
+			synced: false
+		}
+	};
+}
+function measureItem(item, elements) {
+	const rects = Array.from(item.fragment.getClientRects(), rectOf).filter(hasArea);
+	return {
+		item,
+		depth: Math.min(...elements.map(depthOf)) - 1 / (item.nesting + 2),
+		target: {
+			element: elements[0],
+			item: {
+				blockId: item.blockId,
+				itemId: item.itemId
+			},
+			bounds: rects.length > 0 ? unionOf(rects) : rectOf(elements[0].getBoundingClientRect()),
+			rects,
+			visible: elements.some(isVisible),
+			inline: false,
+			hovered: false,
+			focused: false,
+			synced: false
+		}
+	};
+}
+function sameRect(a, b) {
+	return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+function sameInsertion(a, b) {
+	if (!a || !b) return a === b;
+	return a.position === b.position && a.before === b.before && a.after === b.after && (a.afterPosition ?? null) === (b.afterPosition ?? null);
+}
+/** Whether a measurement found every target where it already was. */
+function sameGeometry(previous, next) {
+	if (previous.length !== next.length) return false;
+	return next.every(({ target, depth, item }, index) => {
+		const before = previous[index];
+		return before.target.element === target.element && before.item === item && before.depth === depth && before.target.visible === target.visible && before.target.inline === target.inline && sameRect(before.target.bounds, target.bounds) && before.target.rects.length === target.rects.length && before.target.rects.every((rect, rectIndex) => sameRect(rect, target.rects[rectIndex])) && sameInsertion(before.target.insertion, target.insertion);
+	});
+}
+const isInlineStyleChange = (mutation) => mutation.type === "attributes" && mutation.attributeName === "style";
+/**
+* Animations rewrite inline styles every frame. Batches of only those measure at
+* most this often, and always once more after the last one.
+*/
+const INLINE_STYLE_MEASURE_INTERVAL = 100;
+/**
+* Coordinates stay in the non-scrolling iframe's viewport. The canvas camera
+* transforms the iframe and its overlay layer together, without remeasurement.
+* This owns highlight arbitration as well as its mutation observer.
+*/
+function observeCanvasOverlays(document, onChange) {
+	let entries = [];
+	let targets = [];
+	let stopped = false;
+	let frame;
+	const window = document.defaultView;
+	const publish = (force) => {
+		const states = entries.map(rawStateOf);
+		const candidates = entries.flatMap((entry, index) => entry.target.visible ? [{
+			index,
+			depth: entry.depth,
+			...states[index]
+		}] : []);
+		const winners = resolveOverlayHighlights(candidates);
+		const hovered = new Set(Array.from(winners.hovered, ({ index }) => index));
+		const focused = new Set(Array.from(winners.focused, ({ index }) => index));
+		let changed = force;
+		const next = entries.map((entry, index) => {
+			const state = {
+				hovered: hovered.has(index),
+				focused: focused.has(index),
+				synced: states[index].synced
+			};
+			const previous = force ? entry.target : targets[index];
+			if (!force && state.hovered === previous.hovered && state.focused === previous.focused && state.synced === previous.synced) return previous;
+			changed = true;
+			return {
+				...entry.target,
+				...state
+			};
+		});
+		if (!changed) return;
+		targets = next;
+		onChange(targets);
+	};
+	const measureAll = () => {
+		frame = void 0;
+		if (stopped) return;
+		const measured = Array.from(document.querySelectorAll(targetSelector), measureElement);
+		for (const [item, elements] of repeatableItemElements(document)) if (elements.length > 0) measured.push(measureItem(item, elements));
+		if (sameGeometry(entries, measured)) {
+			publish(false);
+			return;
+		}
+		entries = measured;
+		publish(true);
+	};
+	let styleTimer;
+	const scheduleStyleMeasurement = () => {
+		if (stopped || styleTimer !== void 0) return;
+		if (!window) {
+			scheduleMeasurement();
+			return;
+		}
+		styleTimer = window.setTimeout(() => {
+			styleTimer = void 0;
+			scheduleMeasurement();
+		}, INLINE_STYLE_MEASURE_INTERVAL);
+	};
+	const scheduleMeasurement = () => {
+		if (stopped || frame !== void 0) return;
+		if (!window) {
+			measureAll();
+			return;
+		}
+		frame = window.requestAnimationFrame(measureAll);
+	};
+	const Observer = document.defaultView?.MutationObserver;
+	const observer = Observer ? new Observer((mutations) => {
+		if (stopped) return;
+		if (mutations.some((mutation) => !isInlineStyleChange(mutation) && (mutation.type !== "attributes" || !stateAttributes.has(mutation.attributeName ?? "")))) {
+			scheduleMeasurement();
+			return;
+		}
+		if (mutations.some(isInlineStyleChange)) scheduleStyleMeasurement();
+		if (mutations.some((mutation) => !isInlineStyleChange(mutation))) publish(false);
+	}) : void 0;
+	observer?.observe(document, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true
+	});
+	const unsubscribeItems = subscribeRepeatableItems(document, (kind) => {
+		if (stopped) return;
+		if (kind === "content") scheduleMeasurement();
+		else publish(false);
+	});
+	document.addEventListener("load", scheduleMeasurement, true);
+	document.addEventListener("error", scheduleMeasurement, true);
+	document.fonts?.addEventListener("loadingdone", scheduleMeasurement);
+	document.fonts?.ready.then(scheduleMeasurement);
+	scheduleMeasurement();
+	return () => {
+		stopped = true;
+		if (frame !== void 0) window?.cancelAnimationFrame(frame);
+		if (styleTimer !== void 0) window?.clearTimeout(styleTimer);
+		observer?.disconnect();
+		unsubscribeItems();
+		document.removeEventListener("load", scheduleMeasurement, true);
+		document.removeEventListener("error", scheduleMeasurement, true);
+		document.fonts?.removeEventListener("loadingdone", scheduleMeasurement);
+		entries = [];
+		targets = [];
+	};
+}
+
+//#endregion
+export { observeCanvasOverlays };

package/dist/features/canvas/canvasPages.js

@@ -0,0 +1,79 @@
+import { UNNAMED_DEFAULT_LOCALE, localizedPath } from "../../lib/locale-path.js";
+import { getPageDestinations } from "../../core/pageDestinations.js";
+
+//#region src/features/canvas/canvasPages.ts
+/** The page row a curated page edits. */
+function canvasPageId(page) {
+	return page?.kind === "curated" ? page.pageId : void 0;
+}
+/** The layout a layout page edits, singleton or derived. */
+function canvasLayoutId(page) {
+	return page && page.kind !== "curated" ? page.layoutId : void 0;
+}
+/** The derived layout a derived page's frame must render. */
+function derivedLayoutIdOf(page) {
+	return page?.kind === "derived" ? page.layoutId : void 0;
+}
+/** A Page's path, or its route pattern while a derived page has no path yet. */
+function canvasPagePath(page) {
+	return page.pathname ?? (page.kind === "derived" ? page.pattern : null);
+}
+const CANVAS_DEVICES = {
+	desktop: {
+		label: "Desktop",
+		width: 1366,
+		height: 900
+	},
+	tablet: {
+		label: "Tablet",
+		width: 768,
+		height: 1024
+	},
+	mobile: {
+		label: "Mobile",
+		width: 390,
+		height: 844
+	}
+};
+/**
+* Concrete pages plus one frame per derived layout, never every generated URL.
+* A derived frame previews its layout's first discovered page until a path is chosen.
+* Paths are runtime paths in `locale`, under its prefix; `pages` are its localizations, and
+* `discoveredPaths` the paths route discovery found in it, after its prefix.
+*/
+function getCanvasPages(pages, layouts, discoveredPaths, locale = UNNAMED_DEFAULT_LOCALE) {
+	const inLocale = (path) => localizedPath(path, locale);
+	const discoveredPathIn = (layoutId) => {
+		const path = discoveredPaths?.get(layoutId);
+		return path ? inLocale(path) : null;
+	};
+	const concrete = getPageDestinations(pages, layouts).map((page) => page.kind === "curated" ? {
+		kind: "curated",
+		key: page.key,
+		title: page.title,
+		pathname: inLocale(page.fullPath),
+		pageId: page.pageId
+	} : {
+		kind: "singleton",
+		key: page.key,
+		title: page.title,
+		pathname: inLocale(page.fullPath),
+		layoutId: page.layoutId
+	});
+	const derivedLayouts = layouts.filter((layout) => layout._internal.kind === "derived").map(({ _internal: layout }) => {
+		const segments = layout.id.split(".");
+		const pattern = `/${segments.map((part) => part.startsWith("$") ? `:${part.slice(1)}` : encodeURIComponent(part)).join("/")}`;
+		return {
+			kind: "derived",
+			key: `derived:${layout.id}`,
+			title: layout.title,
+			pathname: segments.some((part) => part.startsWith("$")) ? discoveredPathIn(layout.id) : inLocale(pattern),
+			layoutId: layout.id,
+			pattern
+		};
+	});
+	return [...concrete, ...derivedLayouts];
+}
+
+//#endregion
+export { CANVAS_DEVICES, canvasLayoutId, canvasPageId, canvasPagePath, derivedLayoutIdOf, getCanvasPages };

package/dist/features/canvas/canvasScreenSpace.js

@@ -0,0 +1,26 @@
+//#region src/features/canvas/canvasScreenSpace.ts
+/**
+* CSS projections from Canvas world space to the workspace's screen space,
+* driven by the camera's CSS variables so overlays never rerender on pan/zoom.
+* Fallbacks match the overview before the camera has mounted.
+*/
+const CANVAS_X = "var(--canvas-x, 64px)";
+const CANVAS_Y = "var(--canvas-y, 112px)";
+const CANVAS_ZOOM = "var(--canvas-zoom, .4)";
+/** Places and scales the world-space row. */
+const CANVAS_WORLD_TRANSFORM = `translate(${CANVAS_X}, ${CANVAS_Y}) scale(${CANVAS_ZOOM})`;
+/** Screen x of a world x. */
+function canvasScreenX(worldX) {
+	return `calc(${CANVAS_X} + ${worldX}px * ${CANVAS_ZOOM})`;
+}
+/** Screen y a constant on-screen distance above the top of the row, e.g. for headers. */
+function canvasScreenAbove(distance) {
+	return `calc(${CANVAS_Y} - ${distance}px)`;
+}
+/** On-screen length of a world length. */
+function canvasScreenLength(worldLength) {
+	return `calc(${worldLength}px * ${CANVAS_ZOOM})`;
+}
+
+//#endregion
+export { CANVAS_WORLD_TRANSFORM, canvasScreenAbove, canvasScreenLength, canvasScreenX };

package/dist/features/canvas/canvasSelection.js

@@ -0,0 +1,18 @@
+import { parseLocalePath } from "../../lib/locale-path.js";
+import { matchDerivedLayout } from "../../core/derivedRoutes.js";
+
+//#region src/features/canvas/canvasSelection.ts
+/**
+* The Page a runtime path selects. With the scope's `locales`, derived routes match the path
+* after its locale's prefix, as the runtime matches them.
+*/
+function selectedCanvasPage(pages, layouts, pathname, locales) {
+	const concrete = pages.find((page) => page.kind !== "derived" && page.pathname === pathname);
+	if (concrete) return concrete;
+	const path = locales ? parseLocalePath(pathname, locales).path : pathname;
+	const derivedLayoutId = matchDerivedLayout(layouts, path)?.layout._internal.id;
+	return pages.find((page) => page.kind === "derived" && page.layoutId === derivedLayoutId);
+}
+
+//#endregion
+export { selectedCanvasPage };