camox 0.44.0 → 0.46.0

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

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

@@ -0,0 +1,124 @@
+import { previewStore } from "../../preview/previewStore.js";
+import { canvasPagePath } from "../canvasPages.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { Plus } from "lucide-react";
+import { Command as Command$1, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, commandFilter } from "@camox/ui/command";
+
+//#region src/features/canvas/sidebar/CanvasNavigator.tsx
+/**
+* The Canvas Navigator, shown while nothing is selected: every Page of the Canvas,
+* in Canvas order, with its path, and a search that takes focus. Picking a Page
+* shows it: the camera goes to it.
+*/
+function CanvasNavigator(t0) {
+	const $ = c(17);
+	const { pages, selectedKey, onShowPage } = t0;
+	const [search, setSearch] = React.useState("");
+	let t1;
+	if ($[0] !== search) {
+		t1 = /* @__PURE__ */ jsx(CommandInput, {
+			placeholder: "Search pages…",
+			autoFocus: true,
+			value: search,
+			onValueChange: setSearch
+		});
+		$[0] = search;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(CommandEmpty, { children: "Nothing found." });
+		$[2] = t2;
+	} else t2 = $[2];
+	const t3 = `Pages (${pages.length})`;
+	let t4;
+	if ($[3] !== onShowPage || $[4] !== pages || $[5] !== selectedKey) {
+		let t5;
+		if ($[7] !== onShowPage || $[8] !== selectedKey) {
+			t5 = (page) => {
+				const selected = page.key === selectedKey;
+				const path = canvasPagePath(page);
+				return /* @__PURE__ */ jsx(CommandItem, {
+					value: page.key,
+					keywords: path ? [page.title, path] : [page.title],
+					"data-checked": selected,
+					"aria-current": selected ? "true" : void 0,
+					onSelect: () => onShowPage(page.key),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-col py-0.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate font-medium",
+							children: page.title
+						}), path && /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground truncate font-mono text-xs",
+							children: path
+						})]
+					})
+				}, page.key);
+			};
+			$[7] = onShowPage;
+			$[8] = selectedKey;
+			$[9] = t5;
+		} else t5 = $[9];
+		t4 = pages.map(t5);
+		$[3] = onShowPage;
+		$[4] = pages;
+		$[5] = selectedKey;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: "p-1",
+			children: /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "secondary",
+				className: "w-full",
+				onClick: _temp2,
+				children: [/* @__PURE__ */ jsx(Plus, {}), "Create page"]
+			})
+		});
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t3 || $[12] !== t4) {
+		t6 = /* @__PURE__ */ jsxs(CommandList, {
+			className: "max-h-none flex-1",
+			children: [t2, /* @__PURE__ */ jsxs(CommandGroup, {
+				heading: t3,
+				children: [t4, t5]
+			})]
+		});
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t1 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsx("div", {
+			"data-canvas-navigator": true,
+			className: "flex min-h-0 flex-1 flex-col",
+			children: /* @__PURE__ */ jsxs(Command$1, {
+				className: "rounded-none! bg-transparent",
+				filter: _temp,
+				children: [t1, t6]
+			})
+		});
+		$[14] = t1;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	return t7;
+}
+function _temp2() {
+	return previewStore.send({ type: "openCreatePageModal" });
+}
+function _temp(_value, search_0, keywords) {
+	return commandFilter(keywords?.join(" ") ?? "", search_0);
+}
+
+//#endregion
+export { CanvasNavigator };

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

@@ -0,0 +1,54 @@
+import { CanvasSidebarFrame } from "./CanvasSidebarFrame.js";
+import { CreatePageModal } from "../../preview/components/CreatePageModal.js";
+import { CanvasNavigator } from "./CanvasNavigator.js";
+import { PageInspector } from "./PageInspector.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/canvas/sidebar/CanvasSidebar.tsx
+/**
+* The sidebar beside the Canvas. Without a selection, it shows the Canvas Navigator;
+* with one, the Canvas Inspector of the selected Page.
+*/
+function CanvasSidebar(t0) {
+	const $ = c(11);
+	const { page, navigator, onShowWholeCanvas, onRenamePage, owner: t1, pageRecord } = t0;
+	const owner = t1 === void 0 ? null : t1;
+	const t2 = page?.title ?? "Canvas navigator";
+	let t3;
+	if ($[0] !== navigator || $[1] !== onRenamePage || $[2] !== onShowWholeCanvas || $[3] !== owner || $[4] !== page || $[5] !== pageRecord) {
+		t3 = page ? /* @__PURE__ */ jsx(PageInspector, {
+			page,
+			owner,
+			pageRecord,
+			onBack: onShowWholeCanvas,
+			onRenamePage
+		}) : /* @__PURE__ */ jsx(CanvasNavigator, { ...navigator });
+		$[0] = navigator;
+		$[1] = onRenamePage;
+		$[2] = onShowWholeCanvas;
+		$[3] = owner;
+		$[4] = page;
+		$[5] = pageRecord;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(CreatePageModal, {});
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t2 || $[9] !== t3) {
+		t5 = /* @__PURE__ */ jsxs(CanvasSidebarFrame, {
+			label: t2,
+			children: [t3, t4]
+		});
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t5;
+	} else t5 = $[10];
+	return t5;
+}
+
+//#endregion
+export { CanvasSidebar };