camox 0.44.0 → 0.46.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,30 @@
+import { CANVAS_DEVICES } from "./canvasPages.js";
+
+//#region src/features/canvas/canvasItems.ts
+const CANVAS_ITEM_GAP = 240;
+const CANVAS_SLOT_WIDTH = CANVAS_DEVICES.desktop.width;
+/**
+* World-space positions of the Canvas row, matching its flex layout: every Page
+* side by side, in Canvas order.
+*/
+function positionCanvasPages(pages) {
+	return {
+		items: pages.map((page, index) => ({
+			key: page.key,
+			page,
+			left: index * (CANVAS_SLOT_WIDTH + 240),
+			width: CANVAS_SLOT_WIDTH
+		})),
+		width: Math.max(0, pages.length * (CANVAS_SLOT_WIDTH + 240) - 240)
+	};
+}
+function canvasSnapTargets(items) {
+	return items.map(({ key, left, width }) => ({
+		key,
+		left,
+		width
+	}));
+}
+
+//#endregion
+export { CANVAS_SLOT_WIDTH, canvasSnapTargets, positionCanvasPages };

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 };

package/dist/features/canvas/canvasStore.js

@@ -0,0 +1,60 @@
+import { createStore } from "@xstate/store";
+
+//#region src/features/canvas/canvasStore.ts
+/**
+* What each workspace shows, for the Studio session: it outlives the Canvas, so leaving the
+* Website Section or switching drafts or locales, which mount it afresh, lands where it was.
+*/
+const canvasStore = createStore({
+	context: {
+		views: {},
+		/** Workspaces whose camera is moving, until it has been still for a moment. */
+		moving: {},
+		/** Counts requests to zoom out to the whole Canvas; a mounted Canvas answers each new one. */
+		overviewRequests: 0
+	},
+	on: {
+		reset: () => ({
+			views: {},
+			moving: {},
+			overviewRequests: 0
+		}),
+		requestOverview: (context) => ({
+			...context,
+			overviewRequests: context.overviewRequests + 1
+		}),
+		setCameraMoving: (context, event) => {
+			if (!!context.moving[event.workspaceKey] === event.moving) return context;
+			return {
+				...context,
+				moving: {
+					...context.moving,
+					[event.workspaceKey]: event.moving
+				}
+			};
+		},
+		rememberView: (context, event) => {
+			const previous = context.views[event.workspaceKey];
+			const { camera, fitted } = event.view;
+			const { x, y, scale } = camera;
+			if (previous?.camera.x === x && previous.camera.y === y && previous.camera.scale === scale && previous.fitted === fitted) return context;
+			return {
+				...context,
+				views: {
+					...context.views,
+					[event.workspaceKey]: {
+						camera: {
+							x,
+							y,
+							scale
+						},
+						fitted
+					}
+				}
+			};
+		}
+	}
+});
+
+//#endregion
+export { canvasStore };