camox 0.44.0 → 0.45.0

package/dist/features/canvas/canvasStore.js

@@ -0,0 +1,149 @@
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+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: {},
+		collapsedShelves: {},
+		moving: {},
+		overviewRequests: 0
+	},
+	on: {
+		reset: () => ({
+			views: {},
+			collapsedShelves: {},
+			moving: {},
+			overviewRequests: 0
+		}),
+		openShelves: (context, event) => ({
+			...context,
+			collapsedShelves: {
+				...context.collapsedShelves,
+				[event.workspaceKey]: event.collapsed
+			}
+		}),
+		setShelfCollapsed: (context, event) => {
+			const collapsed = context.collapsedShelves[event.workspaceKey] ?? [];
+			if (collapsed.includes(event.shelfKey) === event.collapsed) return context;
+			const next = event.collapsed ? [...collapsed, event.shelfKey] : collapsed.filter((key) => key !== event.shelfKey);
+			return {
+				...context,
+				collapsedShelves: {
+					...context.collapsedShelves,
+					[event.workspaceKey]: next
+				}
+			};
+		},
+		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
+					}
+				}
+			};
+		}
+	}
+});
+function subscribe(onChange) {
+	const subscription = canvasStore.subscribe(onChange);
+	return () => subscription.unsubscribe();
+}
+const noShelves = [];
+/**
+* The keys of a workspace's collapsed shelves. The first time a workspace opens
+* in the session, `defaults` are collapsed. It always opens with the shelf
+* holding the selection expanded, so the camera can start on the selection.
+*/
+function useCollapsedShelves(workspaceKey, defaults, selectedShelf) {
+	const $ = c(12);
+	let t0;
+	if ($[0] !== workspaceKey) {
+		t0 = () => canvasStore.getSnapshot().context.collapsedShelves[workspaceKey];
+		$[0] = workspaceKey;
+		$[1] = t0;
+	} else t0 = $[1];
+	const stored = React.useSyncExternalStore(subscribe, t0, _temp);
+	let t1;
+	if ($[2] !== defaults || $[3] !== selectedShelf || $[4] !== workspaceKey) {
+		t1 = () => (canvasStore.getSnapshot().context.collapsedShelves[workspaceKey] ?? defaults).filter((key) => key !== selectedShelf);
+		$[2] = defaults;
+		$[3] = selectedShelf;
+		$[4] = workspaceKey;
+		$[5] = t1;
+	} else t1 = $[5];
+	const [opening, setOpening] = React.useState(t1);
+	let t2;
+	let t3;
+	if ($[6] !== opening || $[7] !== workspaceKey) {
+		t2 = () => {
+			if (!opening) return;
+			canvasStore.send({
+				type: "openShelves",
+				workspaceKey,
+				collapsed: opening
+			});
+			setOpening(null);
+		};
+		t3 = [opening, workspaceKey];
+		$[6] = opening;
+		$[7] = workspaceKey;
+		$[8] = t2;
+		$[9] = t3;
+	} else {
+		t2 = $[8];
+		t3 = $[9];
+	}
+	React.useLayoutEffect(t2, t3);
+	const keys = opening ?? stored ?? noShelves;
+	let t4;
+	if ($[10] !== keys) {
+		t4 = new Set(keys);
+		$[10] = keys;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+function _temp() {}
+function setShelfCollapsed(workspaceKey, shelfKey, collapsed) {
+	canvasStore.send({
+		type: "setShelfCollapsed",
+		workspaceKey,
+		shelfKey,
+		collapsed
+	});
+}
+
+//#endregion
+export { canvasStore, setShelfCollapsed, useCollapsedShelves };

package/dist/features/canvas/canvasThumbnails.js

@@ -0,0 +1,304 @@
+import { createFrameCapturer } from "./canvasFrameCapture.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { QueryObserver, replaceEqualDeep } from "@tanstack/react-query";
+
+//#region src/features/canvas/canvasThumbnails.ts
+/**
+* Below this zoom, Canvas Pages show a still image of themselves rather than their live frame,
+* except the selected one. Many live frames in view are what slows the camera down, while from
+* this far, an image looks the same.
+*/
+const CANVAS_THUMBNAIL_MAX_ZOOM = .25;
+/**
+* Whether this browser draws captures faithfully. WebKit draws an SVG image before the images
+* embedded in it have decoded, so its captures miss their images.
+*/
+function canvasThumbnailsSupported() {
+	if (typeof navigator === "undefined" || typeof OffscreenCanvas === "undefined") return false;
+	const agent = navigator.userAgent;
+	return !(/AppleWebKit/.test(agent) && !/Chrome|Chromium|CriOS|Edg\//.test(agent));
+}
+/**
+* Whether a read's data changed. Loading a page seeds the reads of its layout's blocks again,
+* with equal data but new objects, which mustn't make every Page sharing them stale.
+*/
+function changed(before, after) {
+	return before !== after && replaceEqualDeep(before, after) !== before;
+}
+/** The longest a capture waits for fetches to finish. */
+const FETCH_WAIT_MS = 5e3;
+/**
+* Resolves once nothing is fetching, or after `FETCH_WAIT_MS`. Blocks load their own data through
+* the same cache, and a refreshing Page refetches what changed: until those arrive, the frame
+* shows them loading, or out of date.
+*/
+function fetchesDone(queryClient) {
+	if (!queryClient.isFetching()) return Promise.resolve();
+	return new Promise((resolve) => {
+		const done = () => {
+			clearTimeout(timer);
+			unsubscribe();
+			resolve();
+		};
+		const timer = setTimeout(done, FETCH_WAIT_MS);
+		const unsubscribe = queryClient.getQueryCache().subscribe(() => {
+			if (!queryClient.isFetching()) done();
+		});
+	});
+}
+/** Resolves after the frame renders twice more, so what arrived last is on screen. */
+function framesRendered(frame) {
+	const view = frame.contentDocument?.defaultView;
+	if (!view) return Promise.resolve();
+	const next = () => new Promise((resolve) => view.requestAnimationFrame(resolve));
+	return next().then(next);
+}
+/** The values a query key names, at any depth. */
+function keyValues(value, values = []) {
+	if (typeof value === "string" || typeof value === "number") values.push(String(value));
+	else if (Array.isArray(value)) for (const item of value) keyValues(item, values);
+	else if (value && typeof value === "object") for (const item of Object.values(value)) keyValues(item, values);
+	return values;
+}
+/**
+* The still images of a Canvas's Pages. A Page's image goes stale once a read it used changes or
+* is invalidated, as realtime does for an agent's edits. Stale images refresh one at a time,
+* while the camera is still, by mounting their Page out of sight.
+*/
+function createCanvasThumbnails(queryClient, capturer = createFrameCapturer()) {
+	const entries = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	const waiting = /* @__PURE__ */ new Set();
+	let refreshing = null;
+	let moving = false;
+	const generations = /* @__PURE__ */ new Map();
+	const notify = () => {
+		for (const listener of listeners) listener();
+	};
+	const markStale = (key) => {
+		const entry = entries.get(key);
+		if (!entry || entry.stale) return;
+		entries.set(key, {
+			...entry,
+			stale: true
+		});
+		notify();
+	};
+	const drop = (key) => {
+		const entry = entries.get(key);
+		if (!entry) return;
+		entry.release();
+		URL.revokeObjectURL(entry.url);
+		entries.delete(key);
+	};
+	const hold = (query) => {
+		return new QueryObserver(queryClient, {
+			...query.options,
+			queryKey: query.queryKey,
+			enabled: false
+		}).subscribe(() => {});
+	};
+	const pump = () => {
+		if (refreshing !== null || moving) return;
+		const next = waiting.values().next();
+		if (next.done) return;
+		refreshing = next.value;
+		notify();
+	};
+	const finishRefresh = (key) => {
+		waiting.delete(key);
+		if (refreshing !== key) return;
+		refreshing = null;
+		notify();
+		pump();
+	};
+	return {
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => void listeners.delete(listener);
+		},
+		get(key) {
+			return entries.get(key) ?? null;
+		},
+		isRefreshing(key) {
+			return refreshing === key;
+		},
+		connect() {
+			const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
+				if (event.type !== "updated" && event.type !== "removed") return;
+				const { query } = event;
+				const invalidated = event.type === "updated" && event.action.type === "invalidate";
+				let values = null;
+				for (const [key, entry] of entries) {
+					if (entry.stale) continue;
+					if (entry.reads.has(query)) {
+						if (event.type === "removed" || invalidated) markStale(key);
+						else if (changed(entry.reads.get(query), query.state.data)) markStale(key);
+						continue;
+					}
+					if (!invalidated) continue;
+					values ??= new Set(keyValues(query.queryKey));
+					for (const value of values) {
+						if (!entry.tokens.has(value)) continue;
+						markStale(key);
+						break;
+					}
+				}
+			});
+			return () => {
+				unsubscribe();
+				for (const key of Array.from(entries.keys())) drop(key);
+				waiting.clear();
+				refreshing = null;
+				notify();
+			};
+		},
+		markAllStale() {
+			for (const key of entries.keys()) markStale(key);
+		},
+		setMoving(next) {
+			moving = next;
+			if (!moving) pump();
+		},
+		requestRefresh(key) {
+			waiting.add(key);
+			pump();
+			return () => finishRefresh(key);
+		},
+		async capture(key, frame, tokens, options) {
+			const generation = (generations.get(key) ?? 0) + 1;
+			generations.set(key, generation);
+			await fetchesDone(queryClient);
+			await framesRendered(frame);
+			if (generations.get(key) !== generation) return;
+			const root = frame.contentDocument?.body;
+			const allTokens = new Set(tokens);
+			root?.querySelectorAll("[data-camox-viewport-block]").forEach((block) => allTokens.add(block.getAttribute("data-camox-viewport-block") ?? ""));
+			allTokens.delete("");
+			const reads = /* @__PURE__ */ new Map();
+			for (const query of queryClient.getQueryCache().getAll()) if (keyValues(query.queryKey).some((value) => allTokens.has(value))) reads.set(query, query.state.data);
+			const captured = await capturer.capture(frame, options);
+			if (generations.get(key) !== generation) return;
+			const url = URL.createObjectURL(captured.blob);
+			if (typeof Image !== "undefined") {
+				const image = new Image();
+				image.src = url;
+				await image.decode().catch(() => {});
+			}
+			if (generations.get(key) !== generation) {
+				URL.revokeObjectURL(url);
+				return;
+			}
+			drop(key);
+			const holds = Array.from(reads.keys(), hold);
+			entries.set(key, {
+				url,
+				width: captured.width,
+				height: captured.height,
+				stale: false,
+				tokens: allTokens,
+				reads,
+				release: () => holds.forEach((release) => release())
+			});
+			finishRefresh(key);
+			notify();
+		},
+		abandon(key) {
+			finishRefresh(key);
+		}
+	};
+}
+const CanvasThumbnailsContext = React.createContext(null);
+const noThumbnails = () => () => {};
+/** `key`'s image, and whether it's the one refreshing. */
+function useCanvasThumbnail(key) {
+	const $ = c(10);
+	const thumbnails = React.use(CanvasThumbnailsContext);
+	const subscribe = thumbnails?.subscribe ?? noThumbnails;
+	let t0;
+	if ($[0] !== key || $[1] !== thumbnails) {
+		t0 = () => thumbnails?.get(key) ?? null;
+		$[0] = key;
+		$[1] = thumbnails;
+		$[2] = t0;
+	} else t0 = $[2];
+	const thumbnail = React.useSyncExternalStore(subscribe, t0);
+	let t1;
+	if ($[3] !== key || $[4] !== thumbnails) {
+		t1 = () => thumbnails?.isRefreshing(key) ?? false;
+		$[3] = key;
+		$[4] = thumbnails;
+		$[5] = t1;
+	} else t1 = $[5];
+	const refreshing = React.useSyncExternalStore(subscribe, t1);
+	let t2;
+	if ($[6] !== refreshing || $[7] !== thumbnail || $[8] !== thumbnails) {
+		t2 = {
+			thumbnails,
+			thumbnail,
+			refreshing
+		};
+		$[6] = refreshing;
+		$[7] = thumbnail;
+		$[8] = thumbnails;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+}
+/** How long a frame's content must stay unchanged before it counts as settled again. */
+const SETTLE_DELAY_MS = 600;
+/** The longest a frame waits for its images to load before it counts as settled anyway. */
+const IMAGE_WAIT_MS = 3e3;
+/**
+* Calls `onSettled` once a frame's content has rendered, with its fonts and images loaded, and
+* again each time its content settles after changing.
+*/
+function useFrameSettled(frame, root, onSettled) {
+	const report = React.useEffectEvent((settled) => onSettled?.(settled));
+	const enabled = onSettled !== void 0;
+	React.useEffect(() => {
+		if (!frame || !root || !enabled) return;
+		const doc = root.ownerDocument;
+		const view = doc.defaultView;
+		if (!view) return;
+		let run = 0;
+		let timer = 0;
+		let disposed = false;
+		const nextFrame = () => new Promise((resolve) => view.requestAnimationFrame(resolve));
+		const settle = async () => {
+			const current = ++run;
+			await doc.fonts.ready;
+			const loading = Array.from(root.querySelectorAll("img")).filter((image) => !image.complete && image.loading !== "lazy");
+			await Promise.race([Promise.all(loading.map((image) => image.decode().catch(() => {}))), new Promise((resolve) => view.setTimeout(resolve, IMAGE_WAIT_MS))]);
+			await nextFrame();
+			await nextFrame();
+			if (!disposed && current === run) report(frame);
+		};
+		const changed = () => {
+			run++;
+			view.clearTimeout(timer);
+			timer = view.setTimeout(() => void settle(), SETTLE_DELAY_MS);
+		};
+		const observer = new MutationObserver(changed);
+		observer.observe(root, {
+			subtree: true,
+			childList: true,
+			characterData: true,
+			attributes: true
+		});
+		settle();
+		return () => {
+			disposed = true;
+			view.clearTimeout(timer);
+			observer.disconnect();
+		};
+	}, [
+		frame,
+		root,
+		enabled
+	]);
+}
+
+//#endregion
+export { CANVAS_THUMBNAIL_MAX_ZOOM, CanvasThumbnailsContext, canvasThumbnailsSupported, createCanvasThumbnails, useCanvasThumbnail, useFrameSettled };

package/dist/features/canvas/canvasZoom.js

@@ -0,0 +1,10 @@
+import "./canvasStore.js";
+import { c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
+import { useSelector } from "@xstate/store-react";
+
+//#region src/features/canvas/canvasZoom.ts
+const CanvasWorkspaceContext = createContext(null);
+
+//#endregion
+export { CanvasWorkspaceContext };

package/dist/features/canvas/sidebar/CanvasInspector.js

@@ -0,0 +1,202 @@
+import { formatShortcut } from "../../../lib/utils.js";
+import "../../preview/components/PageNicknameField.js";
+import { SHOW_WHOLE_CANVAS_SHORTCUT } from "../../preview/previewConstants.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { Minimize } from "lucide-react";
+import { toast } from "@camox/ui/toaster";
+import * as Tooltip$1 from "@camox/ui/tooltip";
+import { Skeleton } from "@camox/ui/skeleton";
+
+//#region src/features/canvas/sidebar/CanvasInspector.tsx
+/**
+* A page nickname that reads as the header's title, and shows it can be edited on hover.
+* Its border and padding are always there, transparent until hovered or focused, so they
+* never move the text. Saves on Enter or blur; Escape puts the nickname back.
+*/
+function PageNicknameInput(t0) {
+	const $ = c(11);
+	const { nickname, onRename } = t0;
+	let t1;
+	if ($[0] !== nickname || $[1] !== onRename) {
+		t1 = async (input) => {
+			const next = input.value.trim();
+			if (next === nickname) return;
+			if (!next) {
+				toast.error("Page nickname is required");
+				input.value = nickname;
+				return;
+			}
+			try {
+				await onRename(next);
+			} catch {
+				toast.error("Could not update page");
+				input.value = nickname;
+			}
+		};
+		$[0] = nickname;
+		$[1] = onRename;
+		$[2] = t1;
+	} else t1 = $[2];
+	const save = t1;
+	let t2;
+	if ($[3] !== save) {
+		t2 = (event) => void save(event.currentTarget);
+		$[3] = save;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== nickname) {
+		t3 = (event_0) => {
+			event_0.stopPropagation();
+			if (event_0.key === "Enter") {
+				event_0.preventDefault();
+				event_0.currentTarget.blur();
+			}
+			if (event_0.key === "Escape") {
+				event_0.currentTarget.value = nickname;
+				event_0.currentTarget.blur();
+			}
+		};
+		$[5] = nickname;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== nickname || $[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx("input", {
+			"aria-label": "Page nickname",
+			defaultValue: nickname,
+			title: nickname,
+			maxLength: 80,
+			className: "hover:border-input focus-visible:border-ring focus-visible:ring-ring/50 -mx-1.5 h-8 w-full min-w-0 truncate rounded-md border border-transparent bg-transparent px-1.5 text-sm font-medium transition-[color,box-shadow,border-color] outline-none hover:shadow-xs focus-visible:ring-3",
+			onBlur: t2,
+			onKeyDown: t3
+		}, nickname);
+		$[7] = nickname;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+const HEADER_CLASS_NAME = "border-border flex min-w-0 items-center gap-2.5 border-b p-2";
+/** The item's name, beside a button that leaves the selection and zooms out to the whole Canvas. */
+function CanvasInspectorHeader(t0) {
+	const $ = c(11);
+	const { onBack, children } = t0;
+	let t1;
+	if ($[0] !== onBack) {
+		t1 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			size: "icon-sm",
+			"aria-label": "Show whole canvas",
+			onClick: onBack
+		});
+		$[0] = onBack;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Minimize, { className: "text-muted-foreground" });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
+			render: t1,
+			children: t2
+		});
+		$[3] = t1;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs(Tooltip$1.TooltipContent, {
+			side: "bottom",
+			children: ["Show whole canvas ", formatShortcut(SHOW_WHOLE_CANVAS_SHORTCUT)]
+		});
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== t3) {
+		t5 = /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [t3, t4] });
+		$[6] = t3;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== children || $[9] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("header", {
+			className: HEADER_CLASS_NAME,
+			children: [t5, children]
+		});
+		$[8] = children;
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	return t6;
+}
+/** Stands in for the header while the item loads, in its layout, so nothing shifts. */
+function CanvasInspectorHeaderSkeleton() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsxs("header", {
+			className: HEADER_CLASS_NAME,
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-8" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-28" })]
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+function CanvasInspectorTitle(t0) {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx("h2", {
+			className: "truncate text-sm font-medium",
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+/** A curated page's nickname as the title, which can be renamed in place. */
+function CanvasInspectorNicknameTitle(t0) {
+	const $ = c(3);
+	const { nickname, onRename } = t0;
+	let t1;
+	if ($[0] !== nickname || $[1] !== onRename) {
+		t1 = /* @__PURE__ */ jsx("h2", {
+			className: "flex min-w-0 flex-1",
+			children: /* @__PURE__ */ jsx(PageNicknameInput, {
+				nickname,
+				onRename
+			})
+		});
+		$[0] = nickname;
+		$[1] = onRename;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+function CanvasInspectorBody(t0) {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-0 flex-1 flex-col",
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+
+//#endregion
+export { CanvasInspectorBody, CanvasInspectorHeader, CanvasInspectorHeaderSkeleton, CanvasInspectorNicknameTitle, CanvasInspectorTitle };