camox 0.43.0 → 0.45.0

package/dist/features/canvas/CanvasBlockFrame.js

@@ -0,0 +1,353 @@
+import { NormalizedDataProvider } from "../../lib/normalized-data.js";
+import { reads, useRead } from "../../lib/studio-reads.js";
+import { BlockEditingRuntimeProvider } from "../../core/editing/BlockEditingRuntime.js";
+import { ArtifactStudioContext, ArtifactsRunContext } from "../../core/hooks/useArtifactHost.js";
+import { BlockErrorBoundary } from "../preview/components/BlockErrorBoundary.js";
+import { PreviewDocumentContext } from "../runtime/PreviewDocumentContext.js";
+import { canvasDocumentStyles, canvasPageHref } from "./canvasFrameDocument.js";
+import { useCanvasFrameMode } from "./canvasFrameMode.js";
+import { CanvasFrameProviders, preventLinkNavigation, useCanvasFrame } from "./useCanvasFrame.js";
+import { useCanvasNearness } from "./useCanvasNearness.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+
+//#region src/features/canvas/CanvasBlockFrame.tsx
+/** World-space height reserved for a frame until it mounts and measures its block. */
+const PLACEHOLDER_HEIGHT = 400;
+/** Block Catalog blocks render as on the website, but on the Canvas and never editable. */
+const CATALOG_ARTIFACT_STUDIO = {
+	editing: false,
+	canvas: true
+};
+/**
+* A live frame of the Block Catalog: one block with its default content, or a
+* Synced Block's shared content when the project has some, bare and
+* interactive, but with no editing. It mounts once it comes near the
+* Canvas viewport and stays mounted, so its state survives panning away,
+* though it only runs while selected and the camera is still.
+*/
+function CanvasBlockFrame(props) {
+	const $ = c(17);
+	const ref = React.useRef(null);
+	const { near, reached } = useCanvasNearness(ref);
+	let t0;
+	if ($[0] !== near || $[1] !== props.selected) {
+		t0 = {
+			near,
+			selected: props.selected
+		};
+		$[0] = near;
+		$[1] = props.selected;
+		$[2] = t0;
+	} else t0 = $[2];
+	const mode = useCanvasFrameMode(t0);
+	const previewDocument = React.useContext(PreviewDocumentContext);
+	let t1;
+	if ($[3] !== previewDocument || $[4] !== reached) {
+		t1 = reached ? canvasDocumentStyles(previewDocument) : "";
+		$[3] = previewDocument;
+		$[4] = reached;
+		$[5] = t1;
+	} else t1 = $[5];
+	const styles = t1;
+	const t2 = near || props.selected ? void 0 : "hidden";
+	let t3;
+	if ($[6] !== t2) {
+		t3 = { visibility: t2 };
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== mode || $[9] !== previewDocument || $[10] !== props || $[11] !== reached || $[12] !== styles) {
+		t4 = reached ? /* @__PURE__ */ jsx(BlockFrame, {
+			...props,
+			previewDocument,
+			mode
+		}, styles) : /* @__PURE__ */ jsx("div", {
+			"data-canvas-block-placeholder": true,
+			style: { height: PLACEHOLDER_HEIGHT }
+		});
+		$[8] = mode;
+		$[9] = previewDocument;
+		$[10] = props;
+		$[11] = reached;
+		$[12] = styles;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== t3 || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			ref,
+			style: t3,
+			children: t4
+		});
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
+}
+function BlockFrame(t0) {
+	const $ = c(26);
+	const { block, projectId, runtimeBasePath, width, viewportHeight, selected, onSelect, previewDocument, mode } = t0;
+	const [initialPreviewDocument] = React.useState(previewDocument);
+	let t1;
+	if ($[0] !== runtimeBasePath) {
+		t1 = () => canvasPageHref({
+			runtimeBasePath,
+			pathname: "/",
+			href: window.location.href
+		});
+		$[0] = runtimeBasePath;
+		$[1] = t1;
+	} else t1 = $[1];
+	const [href] = React.useState(t1);
+	let t2;
+	if ($[2] !== href || $[3] !== initialPreviewDocument || $[4] !== mode || $[5] !== viewportHeight || $[6] !== width) {
+		t2 = {
+			previewDocument: initialPreviewDocument,
+			href,
+			width,
+			viewportHeight,
+			fit: "content",
+			subject: "block",
+			mode
+		};
+		$[2] = href;
+		$[3] = initialPreviewDocument;
+		$[4] = mode;
+		$[5] = viewportHeight;
+		$[6] = width;
+		$[7] = t2;
+	} else t2 = $[7];
+	const { iframe, mount, iframeProps } = useCanvasFrame(t2);
+	const { title, synced } = block._internal;
+	let t3;
+	if ($[8] !== iframeProps || $[9] !== title || $[10] !== viewportHeight || $[11] !== width) {
+		t3 = iframeProps.srcDoc && /* @__PURE__ */ jsx("iframe", {
+			...iframeProps,
+			title: `Block preview: ${title}`,
+			style: {
+				display: "block",
+				width,
+				height: viewportHeight,
+				border: 0
+			}
+		});
+		$[8] = iframeProps;
+		$[9] = title;
+		$[10] = viewportHeight;
+		$[11] = width;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== block || $[14] !== href || $[15] !== iframe || $[16] !== mode || $[17] !== mount || $[18] !== onSelect || $[19] !== projectId || $[20] !== selected || $[21] !== synced) {
+		t4 = mount && createPortal(/* @__PURE__ */ jsx(BlockEditingRuntimeProvider, {
+			runtime: null,
+			children: /* @__PURE__ */ jsx(ArtifactStudioContext, {
+				value: CATALOG_ARTIFACT_STUDIO,
+				children: /* @__PURE__ */ jsx(ArtifactsRunContext, {
+					value: selected,
+					children: /* @__PURE__ */ jsx(CanvasFrameProviders, {
+						pathname: "/",
+						href,
+						mount,
+						iframe,
+						children: /* @__PURE__ */ jsx(React.Activity, {
+							mode: mode === "resting" ? "hidden" : "visible",
+							children: /* @__PURE__ */ jsx("div", {
+								style: { display: "flow-root" },
+								onPointerDownCapture: onSelect,
+								onFocusCapture: onSelect,
+								onClick: preventLinkNavigation,
+								children: /* @__PURE__ */ jsx(React.Suspense, {
+									fallback: /* @__PURE__ */ jsx("div", {
+										role: "status",
+										children: "Loading block…"
+									}),
+									children: synced ? /* @__PURE__ */ jsx(SyncedBlockContent, {
+										block,
+										projectId
+									}) : /* @__PURE__ */ jsx(DefaultBlockContent, { block })
+								})
+							})
+						})
+					})
+				})
+			})
+		}), mount);
+		$[13] = block;
+		$[14] = href;
+		$[15] = iframe;
+		$[16] = mode;
+		$[17] = mount;
+		$[18] = onSelect;
+		$[19] = projectId;
+		$[20] = selected;
+		$[21] = synced;
+		$[22] = t4;
+	} else t4 = $[22];
+	let t5;
+	if ($[23] !== t3 || $[24] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, t4] });
+		$[23] = t3;
+		$[24] = t4;
+		$[25] = t5;
+	} else t5 = $[25];
+	return t5;
+}
+function DefaultBlockContent(t0) {
+	const $ = c(13);
+	const { block } = t0;
+	let t1;
+	if ($[0] !== block._internal) {
+		t1 = block._internal.getPeekBundle();
+		$[0] = block._internal;
+		$[1] = t1;
+	} else t1 = $[1];
+	const bundle = t1;
+	let t2;
+	if ($[2] !== bundle.block.content || $[3] !== bundle.block.id || $[4] !== bundle.block.position || $[5] !== bundle.block.settings || $[6] !== bundle.block.type) {
+		t2 = {
+			_id: bundle.block.id,
+			type: bundle.block.type,
+			content: bundle.block.content,
+			settings: bundle.block.settings,
+			position: bundle.block.position
+		};
+		$[2] = bundle.block.content;
+		$[3] = bundle.block.id;
+		$[4] = bundle.block.position;
+		$[5] = bundle.block.settings;
+		$[6] = bundle.block.type;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== block || $[9] !== bundle.files || $[10] !== bundle.repeatableItems || $[11] !== t2) {
+		t3 = /* @__PURE__ */ jsx(BlockContent, {
+			block,
+			files: bundle.files,
+			repeatableItems: bundle.repeatableItems,
+			blockData: t2
+		});
+		$[8] = block;
+		$[9] = bundle.files;
+		$[10] = bundle.repeatableItems;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
+	return t3;
+}
+/** A Synced Block shows the project's shared content, or its defaults until it has some. */
+function SyncedBlockContent(t0) {
+	const $ = c(19);
+	const { block, projectId } = t0;
+	let t1;
+	if ($[0] !== block._internal.id || $[1] !== projectId) {
+		t1 = reads.syncedContent({
+			projectId,
+			type: block._internal.id
+		});
+		$[0] = block._internal.id;
+		$[1] = projectId;
+		$[2] = t1;
+	} else t1 = $[2];
+	const shared = useRead(t1);
+	if (!shared) {
+		let t2;
+		if ($[3] !== block) {
+			t2 = /* @__PURE__ */ jsx(DefaultBlockContent, { block });
+			$[3] = block;
+			$[4] = t2;
+		} else t2 = $[4];
+		return t2;
+	}
+	let t2;
+	if ($[5] !== shared.block) {
+		t2 = [shared.block];
+		$[5] = shared.block;
+		$[6] = t2;
+	} else t2 = $[6];
+	const t3 = shared.block.content;
+	const t4 = shared.block.settings;
+	let t5;
+	if ($[7] !== shared.block.id || $[8] !== shared.block.position || $[9] !== shared.block.type || $[10] !== t3 || $[11] !== t4) {
+		t5 = {
+			_id: shared.block.id,
+			type: shared.block.type,
+			content: t3,
+			settings: t4,
+			position: shared.block.position
+		};
+		$[7] = shared.block.id;
+		$[8] = shared.block.position;
+		$[9] = shared.block.type;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== block || $[14] !== shared.files || $[15] !== shared.repeatableItems || $[16] !== t2 || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsx(BlockContent, {
+			block,
+			files: shared.files,
+			repeatableItems: shared.repeatableItems,
+			references: t2,
+			blockData: t5
+		});
+		$[13] = block;
+		$[14] = shared.files;
+		$[15] = shared.repeatableItems;
+		$[16] = t2;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	return t6;
+}
+function BlockContent(t0) {
+	const $ = c(12);
+	const { block, files, repeatableItems, references, blockData } = t0;
+	const { id, Component } = block._internal;
+	let t1;
+	if ($[0] !== Component || $[1] !== blockData) {
+		t1 = /* @__PURE__ */ jsx(Component, {
+			blockData,
+			mode: "peek"
+		});
+		$[0] = Component;
+		$[1] = blockData;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== files || $[4] !== references || $[5] !== repeatableItems || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(NormalizedDataProvider, {
+			files,
+			repeatableItems,
+			blocks: references,
+			children: t1
+		});
+		$[3] = files;
+		$[4] = references;
+		$[5] = repeatableItems;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== blockData._id || $[9] !== id || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(BlockErrorBoundary, {
+			blockId: blockData._id,
+			blockType: id,
+			children: t2
+		});
+		$[8] = blockData._id;
+		$[9] = id;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+
+//#endregion
+export { CanvasBlockFrame };

package/dist/features/canvas/CanvasBlockHeader.js

@@ -0,0 +1,55 @@
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/canvas/CanvasBlockHeader.tsx
+/** How many Pages place a block, as shown in its header. */
+function formatCanvasBlockUsage(pageCount) {
+	if (pageCount === 0) return "Unused";
+	return `Used on ${pageCount} ${pageCount === 1 ? "page" : "pages"}`;
+}
+/**
+* The header above a block of the Block Catalog. Its title sits on the line of
+* Page nicknames and selects the block.
+* Its usage sits above the title once known, like a Page header's path.
+*/
+function CanvasBlockHeader(t0) {
+	const $ = c(8);
+	const { block, pageCount, onSelect } = t0;
+	const { title } = block._internal;
+	let t1;
+	if ($[0] !== pageCount) {
+		t1 = pageCount !== void 0 && /* @__PURE__ */ jsx("span", {
+			"data-canvas-block-usage": true,
+			className: "text-muted-foreground w-full min-w-0 truncate text-left text-xs font-normal",
+			children: formatCanvasBlockUsage(pageCount)
+		});
+		$[0] = pageCount;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== onSelect || $[3] !== title) {
+		t2 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "focus-visible:ring-ring max-w-full min-w-0 truncate text-left text-sm font-medium outline-none focus-visible:ring-2",
+			onClick: onSelect,
+			children: title
+		});
+		$[2] = onSelect;
+		$[3] = title;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("h2", {
+			className: "text-foreground flex h-10 w-full min-w-0 flex-col items-start justify-end gap-1 text-left",
+			children: [t1, t2]
+		});
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+}
+
+//#endregion
+export { CanvasBlockHeader, formatCanvasBlockUsage };

package/dist/features/canvas/CanvasLoadingScreen.js

@@ -0,0 +1,35 @@
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Spinner } from "@camox/ui/spinner";
+
+//#region src/features/canvas/CanvasLoadingScreen.tsx
+/**
+* Covers where the Canvas will show while it loads, in the Canvas's own background, so the
+* Canvas appears onto it rather than replacing some version of the page. A spinner at its
+* center shows the Canvas is loading.
+*/
+function CanvasLoadingScreen(t0) {
+	const $ = c(4);
+	const { spinner: t1 } = t0;
+	const spinner = t1 === void 0 ? true : t1;
+	let t2;
+	if ($[0] !== spinner) {
+		t2 = spinner && /* @__PURE__ */ jsx(Spinner, { className: "text-muted-foreground size-6" });
+		$[0] = spinner;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			"data-canvas-loading": true,
+			className: "bg-muted absolute inset-0 grid place-items-center",
+			children: t2
+		});
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+
+//#endregion
+export { CanvasLoadingScreen };

package/dist/features/canvas/CanvasOverlays.js

@@ -0,0 +1,254 @@
+import { previewStore, selectIsCanvasShown } from "../preview/previewStore.js";
+import { useEditingFrame } from "../preview/editingFrame.js";
+import { postOverlayMessage } from "../preview/overlayMessages.js";
+import { FieldToolbar } from "../preview/components/FieldToolbar.js";
+import { canvasInsertionSeams } from "./canvasInsertionSeams.js";
+import { observeCanvasOverlays } from "./canvasOverlayGeometry.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { useSelector } from "@xstate/store-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { PlusIcon } from "lucide-react";
+
+//#region src/features/canvas/CanvasOverlays.tsx
+/** Geometry stays in page coordinates. CSS projects it through the camera without
+* measuring the page or rerendering React during pan/zoom. */
+function canvasOverlayStyle(rect) {
+	return {
+		position: "absolute",
+		left: `calc(${rect.x}px * var(--canvas-zoom, 1))`,
+		top: `calc(${rect.y}px * var(--canvas-zoom, 1))`,
+		width: `calc(${rect.width}px * var(--canvas-zoom, 1))`,
+		height: `calc(${rect.height}px * var(--canvas-zoom, 1))`
+	};
+}
+/**
+* Whether the Canvas draws editing overlays: only while it has a selection. Zoomed
+* out past the snap, with nothing selected, no frame shows any.
+*/
+const CanvasOverlaysShownContext = React.createContext(true);
+function CanvasOverlays(t0) {
+	const $ = c(48);
+	const { document, activate, canAddBlocks: t1, pageHovered: t2, children } = t0;
+	const canAddBlocks = t1 === void 0 ? false : t1;
+	const pageHovered = t2 === void 0 ? false : t2;
+	let t3;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = [];
+		$[0] = t3;
+	} else t3 = $[0];
+	const [targets, setTargets] = React.useState(t3);
+	const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
+	const shown = React.use(CanvasOverlaysShownContext);
+	const { document: editingDocument } = useEditingFrame();
+	const [breadcrumbHoveredDocument, setBreadcrumbHoveredDocument] = React.useState(null);
+	const isEditingFrame = !!document && editingDocument === document;
+	const pageHover = pageHovered || isEditingFrame && breadcrumbHoveredDocument === document;
+	let t4;
+	let t5;
+	if ($[1] !== document) {
+		t4 = () => {
+			const frameWindow = document?.defaultView;
+			if (!frameWindow) return;
+			const onMessage = (event) => {
+				if (event.data?.type === "CAMOX_HOVER_PAGE") setBreadcrumbHoveredDocument(document);
+				if (event.data?.type === "CAMOX_HOVER_PAGE_END") setBreadcrumbHoveredDocument(null);
+			};
+			frameWindow.addEventListener("message", onMessage);
+			return () => frameWindow.removeEventListener("message", onMessage);
+		};
+		t5 = [document];
+		$[1] = document;
+		$[2] = t4;
+		$[3] = t5;
+	} else {
+		t4 = $[2];
+		t5 = $[3];
+	}
+	React.useEffect(t4, t5);
+	let t6;
+	let t7;
+	if ($[4] !== document) {
+		t6 = () => {
+			if (!document) return;
+			return observeCanvasOverlays(document, setTargets);
+		};
+		t7 = [document];
+		$[4] = document;
+		$[5] = t6;
+		$[6] = t7;
+	} else {
+		t6 = $[5];
+		t7 = $[6];
+	}
+	React.useEffect(t6, t7);
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	let t14;
+	let t15;
+	let t16;
+	let t8;
+	let t9;
+	if ($[7] !== activate || $[8] !== canAddBlocks || $[9] !== children || $[10] !== document || $[11] !== isCanvasShown || $[12] !== isEditingFrame || $[13] !== pageHover || $[14] !== shown || $[15] !== targets) {
+		const seams = canAddBlocks ? canvasInsertionSeams(targets) : [];
+		if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+			t15 = { position: "relative" };
+			$[25] = t15;
+		} else t15 = $[25];
+		t16 = children;
+		t8 = "camox-canvas-overlays";
+		t9 = true;
+		const t17 = isCanvasShown && shown ? "block" : "none";
+		if ($[26] !== t17) {
+			t10 = {
+				position: "absolute",
+				left: 0,
+				top: 0,
+				width: "calc(100% * var(--canvas-zoom, 1))",
+				height: "calc(100% * var(--canvas-zoom, 1))",
+				zIndex: 10,
+				pointerEvents: "none",
+				display: t17,
+				transform: "scale(calc(1 / var(--canvas-zoom, 1)))",
+				transformOrigin: "0 0"
+			};
+			$[26] = t17;
+			$[27] = t10;
+		} else t10 = $[27];
+		if ($[28] !== pageHover) {
+			t11 = pageHover && /* @__PURE__ */ jsx("div", {
+				className: "camox-canvas-outline",
+				"data-canvas-page-outline": true,
+				style: {
+					position: "absolute",
+					inset: 0
+				}
+			});
+			$[28] = pageHover;
+			$[29] = t11;
+		} else t11 = $[29];
+		if ($[30] !== document || $[31] !== isCanvasShown || $[32] !== isEditingFrame) {
+			t12 = isCanvasShown && isEditingFrame && /* @__PURE__ */ jsx(FieldToolbar, { document });
+			$[30] = document;
+			$[31] = isCanvasShown;
+			$[32] = isEditingFrame;
+			$[33] = t12;
+		} else t12 = $[33];
+		if ($[34] !== targets) {
+			t13 = targets.flatMap(_temp);
+			$[34] = targets;
+			$[35] = t13;
+		} else t13 = $[35];
+		t14 = isCanvasShown && seams.map((seam) => /* @__PURE__ */ jsxs("div", {
+			"data-canvas-overlay-control": true,
+			"data-canvas-insertion-seam": seam.key,
+			className: "group/seam flex items-center justify-center",
+			style: {
+				position: "absolute",
+				left: 0,
+				top: `calc(${seam.y}px * var(--canvas-zoom, 1))`,
+				width: "100%",
+				height: 40,
+				transform: "translateY(-50%)",
+				pointerEvents: "auto",
+				cursor: "default"
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				"data-canvas-insertion-line": true,
+				className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 opacity-0 group-focus-within/seam:opacity-100 group-hover/seam:opacity-100",
+				style: {
+					height: "var(--camox-overlay-width-hover)",
+					backgroundColor: "var(--camox-overlay-color-hover)"
+				}
+			}), /* @__PURE__ */ jsxs(Button, {
+				size: "xs",
+				className: "relative z-10 text-white opacity-0 shadow-sm group-focus-within/seam:opacity-100 group-hover/seam:opacity-100",
+				style: { backgroundColor: "var(--camox-overlay-color-selected)" },
+				onClick: (event_0) => {
+					event_0.stopPropagation();
+					activate();
+					postOverlayMessage(seam.request);
+				},
+				children: [/* @__PURE__ */ jsx(PlusIcon, {}), "Add block"]
+			})]
+		}, seam.key));
+		$[7] = activate;
+		$[8] = canAddBlocks;
+		$[9] = children;
+		$[10] = document;
+		$[11] = isCanvasShown;
+		$[12] = isEditingFrame;
+		$[13] = pageHover;
+		$[14] = shown;
+		$[15] = targets;
+		$[16] = t10;
+		$[17] = t11;
+		$[18] = t12;
+		$[19] = t13;
+		$[20] = t14;
+		$[21] = t15;
+		$[22] = t16;
+		$[23] = t8;
+		$[24] = t9;
+	} else {
+		t10 = $[16];
+		t11 = $[17];
+		t12 = $[18];
+		t13 = $[19];
+		t14 = $[20];
+		t15 = $[21];
+		t16 = $[22];
+		t8 = $[23];
+		t9 = $[24];
+	}
+	let t17;
+	if ($[36] !== t10 || $[37] !== t11 || $[38] !== t12 || $[39] !== t13 || $[40] !== t14 || $[41] !== t8 || $[42] !== t9) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			className: t8,
+			"data-canvas-overlays": t9,
+			style: t10,
+			children: [
+				t11,
+				t12,
+				t13,
+				t14
+			]
+		});
+		$[36] = t10;
+		$[37] = t11;
+		$[38] = t12;
+		$[39] = t13;
+		$[40] = t14;
+		$[41] = t8;
+		$[42] = t9;
+		$[43] = t17;
+	} else t17 = $[43];
+	let t18;
+	if ($[44] !== t15 || $[45] !== t16 || $[46] !== t17) {
+		t18 = /* @__PURE__ */ jsxs("div", {
+			style: t15,
+			children: [t16, t17]
+		});
+		$[44] = t15;
+		$[45] = t16;
+		$[46] = t17;
+		$[47] = t18;
+	} else t18 = $[47];
+	return t18;
+}
+function _temp(target, index) {
+	return target.hovered || target.focused ? target.rects.map((rect, fragment) => /* @__PURE__ */ jsx("div", {
+		className: "camox-canvas-outline",
+		"data-camox-highlight-focused": target.focused || void 0,
+		"data-camox-inline": target.inline || void 0,
+		"data-camox-overlay-mode": target.synced ? "synced" : void 0,
+		style: canvasOverlayStyle(rect)
+	}, `${index}:${fragment}`)) : [];
+}
+
+//#endregion
+export { CanvasOverlays, CanvasOverlaysShownContext, canvasOverlayStyle };