camox 0.45.0 → 0.47.0

package/dist/features/preview/CamoxPreview.js

@@ -17,10 +17,11 @@ import { canvasStore } from "../canvas/canvasStore.js";
 import { SHOW_WHOLE_CANVAS_SHORTCUT, TOGGLE_CANVAS_SHORTCUT } from "./previewConstants.js";
 import { CanvasSidebarSkeleton } from "../canvas/sidebar/CanvasSidebarSkeleton.js";
 import { DerivedPageContent } from "../page/DerivedPageContent.js";
+import { takeShowCanvasRequest } from "../provider/signInShortcut.js";
 import { STUDIO_CANVAS_PATH } from "../studio/routes.js";
 import { studioStore } from "../studio/studioStore.js";
 import { previewStore, selectIsCanvasShown } from "./previewStore.js";
-import { AddBlockDialog } from "./components/AddBlockDialog.js";
+import { AddBlockSheet } from "./components/AddBlockSheet.js";
 import { CanvasPreview, prefetchCanvas } from "./components/CanvasPreview.js";
 import { CreatePageModal } from "./components/CreatePageModal.js";
 import { PreviewEditingOwnerContext } from "./previewSelection.js";
@@ -617,7 +618,7 @@ function usePrefetchCanvas(enabled, projectUuid) {
 }
 /** Studio chrome is shared; only curated previews require a Camox page record. */
 const PreviewShell = (t0) => {
-	const $ = c(49);
+	const $ = c(53);
 	const { children, pageData, derivedLayout, pageLocation, canvasOnly, runtimeBasePath: t1 } = t0;
 	const runtimeBasePath = t1 === void 0 ? "" : t1;
 	const isAuthenticated = useIsAuthenticated();
@@ -663,26 +664,42 @@ const PreviewShell = (t0) => {
 	const editingOwner = t2;
 	let t3;
 	let t4;
-	if ($[4] !== isMobileStudio) {
+	if ($[4] !== isAuthenticated || $[5] !== isMobileStudio) {
 		t3 = () => {
-			if (!isMobileStudio) return;
-			previewStore.send({ type: "hideCanvas" });
-			previewStore.send({ type: "closeAddBlockDialog" });
+			if (isAuthenticated && takeShowCanvasRequest() && !isMobileStudio) previewStore.send({ type: "showCanvas" });
 		};
-		t4 = [isMobileStudio];
-		$[4] = isMobileStudio;
-		$[5] = t3;
-		$[6] = t4;
+		t4 = [isAuthenticated, isMobileStudio];
+		$[4] = isAuthenticated;
+		$[5] = isMobileStudio;
+		$[6] = t3;
+		$[7] = t4;
 	} else {
-		t3 = $[5];
-		t4 = $[6];
+		t3 = $[6];
+		t4 = $[7];
 	}
 	React.useEffect(t3, t4);
-	useCanvasOnlyLocation(!!canvasOnly && isAuthenticated, isCanvasShown, isMobileStudio, pageLocation);
 	let t5;
 	let t6;
-	if ($[7] !== isAuthenticated || $[8] !== isCanvasShown || $[9] !== isMobileStudio) {
+	if ($[8] !== isMobileStudio) {
 		t5 = () => {
+			if (!isMobileStudio) return;
+			previewStore.send({ type: "hideCanvas" });
+			previewStore.send({ type: "closeAddBlockSheet" });
+		};
+		t6 = [isMobileStudio];
+		$[8] = isMobileStudio;
+		$[9] = t5;
+		$[10] = t6;
+	} else {
+		t5 = $[9];
+		t6 = $[10];
+	}
+	React.useEffect(t5, t6);
+	useCanvasOnlyLocation(!!canvasOnly && isAuthenticated, isCanvasShown, isMobileStudio, pageLocation);
+	let t7;
+	let t8;
+	if ($[11] !== isAuthenticated || $[12] !== isCanvasShown || $[13] !== isMobileStudio) {
+		t7 = () => {
 			const actions = [
 				{
 					id: "hide-canvas",
@@ -732,140 +749,140 @@ const PreviewShell = (t0) => {
 				});
 			};
 		};
-		t6 = [
+		t8 = [
 			isCanvasShown,
 			isAuthenticated,
 			isMobileStudio
 		];
-		$[7] = isAuthenticated;
-		$[8] = isCanvasShown;
-		$[9] = isMobileStudio;
-		$[10] = t5;
-		$[11] = t6;
+		$[11] = isAuthenticated;
+		$[12] = isCanvasShown;
+		$[13] = isMobileStudio;
+		$[14] = t7;
+		$[15] = t8;
 	} else {
-		t5 = $[10];
-		t6 = $[11];
+		t7 = $[14];
+		t8 = $[15];
 	}
-	React.useEffect(t5, t6);
+	React.useEffect(t7, t8);
 	if (!isAuthenticated) {
-		let t7;
-		if ($[12] !== children) {
-			t7 = /* @__PURE__ */ jsx(Fragment, { children });
-			$[12] = children;
-			$[13] = t7;
-		} else t7 = $[13];
-		return t7;
+		let t9;
+		if ($[16] !== children) {
+			t9 = /* @__PURE__ */ jsx(Fragment, { children });
+			$[16] = children;
+			$[17] = t9;
+		} else t9 = $[17];
+		return t9;
 	}
-	const t7 = !isCanvasShown && "bg-black";
-	let t8;
-	if ($[14] !== t7) {
-		t8 = cn("bg-background relative flex h-full min-h-0 flex-1 flex-col overflow-hidden", t7);
-		$[14] = t7;
-		$[15] = t8;
-	} else t8 = $[15];
-	const t9 = pageLocation?.pathname;
-	const t10 = !canvasOnly;
-	const t11 = !!derivedLayout;
-	let t12;
-	if ($[16] !== t10 || $[17] !== t11) {
-		t12 = /* @__PURE__ */ jsx(CanvasSidebarSkeleton, {
-			page: t10,
-			layoutPage: t11
+	const t9 = !isCanvasShown && "bg-black";
+	let t10;
+	if ($[18] !== t9) {
+		t10 = cn("bg-background relative flex h-full min-h-0 flex-1 flex-col overflow-hidden", t9);
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	const t11 = pageLocation?.pathname;
+	const t12 = !canvasOnly;
+	const t13 = !!derivedLayout;
+	let t14;
+	if ($[20] !== t12 || $[21] !== t13) {
+		t14 = /* @__PURE__ */ jsx(CanvasSidebarSkeleton, {
+			page: t12,
+			layoutPage: t13
 		});
-		$[16] = t10;
-		$[17] = t11;
-		$[18] = t12;
-	} else t12 = $[18];
-	const t13 = !isCanvasEnabled;
-	const t14 = pageData?.page;
-	const t15 = derivedLayout?.layoutId;
-	const t16 = pageData?.projectName;
-	let t17;
-	if ($[19] !== children || $[20] !== isMobileStudio || $[21] !== pageLocation || $[22] !== t13 || $[23] !== t14 || $[24] !== t15 || $[25] !== t16) {
-		t17 = /* @__PURE__ */ jsx("div", {
+		$[20] = t12;
+		$[21] = t13;
+		$[22] = t14;
+	} else t14 = $[22];
+	const t15 = !isCanvasEnabled;
+	const t16 = pageData?.page;
+	const t17 = derivedLayout?.layoutId;
+	const t18 = pageData?.projectName;
+	let t19;
+	if ($[23] !== children || $[24] !== isMobileStudio || $[25] !== pageLocation || $[26] !== t15 || $[27] !== t16 || $[28] !== t17 || $[29] !== t18) {
+		t19 = /* @__PURE__ */ jsx("div", {
 			className: "flex min-h-0 flex-1 flex-row items-stretch",
 			children: /* @__PURE__ */ jsx(PreviewPanel, {
-				active: t13,
+				active: t15,
 				isMobileExperience: isMobileStudio,
-				page: t14,
-				layoutId: t15,
+				page: t16,
+				layoutId: t17,
 				pageLocation,
-				projectName: t16,
+				projectName: t18,
 				children
 			})
 		});
-		$[19] = children;
-		$[20] = isMobileStudio;
-		$[21] = pageLocation;
-		$[22] = t13;
-		$[23] = t14;
-		$[24] = t15;
-		$[25] = t16;
-		$[26] = t17;
-	} else t17 = $[26];
-	let t18;
-	if ($[27] !== isCanvasEnabled || $[28] !== pathname || $[29] !== runtimeBasePath || $[30] !== t12 || $[31] !== t17 || $[32] !== t9) {
-		t18 = /* @__PURE__ */ jsx(CanvasPreview, {
+		$[23] = children;
+		$[24] = isMobileStudio;
+		$[25] = pageLocation;
+		$[26] = t15;
+		$[27] = t16;
+		$[28] = t17;
+		$[29] = t18;
+		$[30] = t19;
+	} else t19 = $[30];
+	let t20;
+	if ($[31] !== isCanvasEnabled || $[32] !== pathname || $[33] !== runtimeBasePath || $[34] !== t11 || $[35] !== t14 || $[36] !== t19) {
+		t20 = /* @__PURE__ */ jsx(CanvasPreview, {
 			enabled: isCanvasEnabled,
 			pathname,
-			pagePathname: t9,
+			pagePathname: t11,
 			runtimeBasePath,
-			placeholder: t12,
-			children: t17
+			placeholder: t14,
+			children: t19
 		});
-		$[27] = isCanvasEnabled;
-		$[28] = pathname;
-		$[29] = runtimeBasePath;
-		$[30] = t12;
-		$[31] = t17;
-		$[32] = t9;
-		$[33] = t18;
-	} else t18 = $[33];
-	let t19;
-	if ($[34] !== isCanvasEnabled || $[35] !== pageId) {
-		t19 = !isCanvasEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), pageId != null && /* @__PURE__ */ jsx(AddBlockDialog, {})] });
-		$[34] = isCanvasEnabled;
-		$[35] = pageId;
+		$[31] = isCanvasEnabled;
+		$[32] = pathname;
+		$[33] = runtimeBasePath;
+		$[34] = t11;
+		$[35] = t14;
 		$[36] = t19;
-	} else t19 = $[36];
-	let t20;
-	if ($[37] !== t18 || $[38] !== t19 || $[39] !== t8) {
-		t20 = /* @__PURE__ */ jsxs("div", {
-			className: t8,
-			children: [t18, t19]
-		});
-		$[37] = t18;
-		$[38] = t19;
-		$[39] = t8;
-		$[40] = t20;
-	} else t20 = $[40];
+		$[37] = t20;
+	} else t20 = $[37];
 	let t21;
-	if ($[41] !== editingOwner || $[42] !== t20) {
-		t21 = /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
-			value: editingOwner,
-			children: t20
+	if ($[38] !== isCanvasEnabled || $[39] !== pageId) {
+		t21 = !isCanvasEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), pageId != null && /* @__PURE__ */ jsx(AddBlockSheet, {})] });
+		$[38] = isCanvasEnabled;
+		$[39] = pageId;
+		$[40] = t21;
+	} else t21 = $[40];
+	let t22;
+	if ($[41] !== t10 || $[42] !== t20 || $[43] !== t21) {
+		t22 = /* @__PURE__ */ jsxs("div", {
+			className: t10,
+			children: [t20, t21]
 		});
-		$[41] = editingOwner;
+		$[41] = t10;
 		$[42] = t20;
 		$[43] = t21;
-	} else t21 = $[43];
-	let t22;
-	if ($[44] !== projectUuid) {
-		t22 = /* @__PURE__ */ jsx(ContentCollectionItemSheet, { projectUuid });
-		$[44] = projectUuid;
-		$[45] = t22;
-	} else t22 = $[45];
+		$[44] = t22;
+	} else t22 = $[44];
 	let t23;
-	if ($[46] !== t21 || $[47] !== t22) {
-		t23 = /* @__PURE__ */ jsxs(CollectionItemSheetProvider, {
+	if ($[45] !== editingOwner || $[46] !== t22) {
+		t23 = /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
+			value: editingOwner,
+			children: t22
+		});
+		$[45] = editingOwner;
+		$[46] = t22;
+		$[47] = t23;
+	} else t23 = $[47];
+	let t24;
+	if ($[48] !== projectUuid) {
+		t24 = /* @__PURE__ */ jsx(ContentCollectionItemSheet, { projectUuid });
+		$[48] = projectUuid;
+		$[49] = t24;
+	} else t24 = $[49];
+	let t25;
+	if ($[50] !== t23 || $[51] !== t24) {
+		t25 = /* @__PURE__ */ jsxs(CollectionItemSheetProvider, {
 			onRouteTargetClose: _temp9,
-			children: [t21, t22]
+			children: [t23, t24]
 		});
-		$[46] = t21;
-		$[47] = t22;
-		$[48] = t23;
-	} else t23 = $[48];
-	return t23;
+		$[50] = t23;
+		$[51] = t24;
+		$[52] = t25;
+	} else t25 = $[52];
+	return t25;
 };
 /** Zooms out to the whole Canvas, from anywhere in the site or the Studio. */
 function useShowCanvasAction() {

package/dist/features/preview/components/{AddBlockDialog.js → AddBlockSheet.js}

@@ -14,12 +14,12 @@ import { generateKeyBetween } from "fractional-indexing";
 import { useSelector } from "@xstate/store-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMutation } from "@tanstack/react-query";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@camox/ui/dialog";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@camox/ui/sheet";
 import { Badge } from "@camox/ui/badge";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, commandFilter } from "@camox/ui/command";
 
-//#region src/features/preview/components/AddBlockDialog.tsx
-const AddBlockDialog = ({ focusCreatedBlock = true }) => {
+//#region src/features/preview/components/AddBlockSheet.tsx
+const AddBlockSheet = ({ focusCreatedBlock = true }) => {
 	const [highlightedValue, setHighlightedValue] = React.useState("");
 	const [search, setSearch] = React.useState("");
 	const [error, setError] = React.useState(null);
@@ -32,7 +32,7 @@ const AddBlockDialog = ({ focusCreatedBlock = true }) => {
 		};
 	}, []);
 	const gridRef = React.useRef(null);
-	const dialog = useSelector(previewStore, (state) => state.context.addBlockDialog);
+	const sheet = useSelector(previewStore, (state) => state.context.addBlockSheet);
 	const studioCache = useStudioCache();
 	const projectUuid = useProjectUuid();
 	const pathname = useLocalePath();
@@ -117,15 +117,15 @@ const AddBlockDialog = ({ focusCreatedBlock = true }) => {
 		for (const block of pageBlocks) counts[block.type] = (counts[block.type] ?? 0) + 1;
 		return counts;
 	}, [page, pageBlocks]);
-	const [previousDialog, setPreviousDialog] = React.useState(dialog);
-	if (dialog !== previousDialog) {
-		setPreviousDialog(dialog);
+	const [previousSheet, setPreviousSheet] = React.useState(sheet);
+	if (sheet !== previousSheet) {
+		setPreviousSheet(sheet);
 		setHighlightedValue("");
 		setSearch("");
 		setError(null);
 	}
 	const handleAddBlock = async (block) => {
-		if (!page || !dialog || submitting.current) return;
+		if (!page || !sheet || submitting.current) return;
 		submitting.current = true;
 		setError(null);
 		const owner = {
@@ -140,21 +140,21 @@ const AddBlockDialog = ({ focusCreatedBlock = true }) => {
 				type: block._internal.id,
 				content: bundle.content,
 				settings: bundle.settings,
-				afterPosition: dialog.afterPosition,
+				afterPosition: sheet.afterPosition,
 				repeatableItems: bundle.repeatableItems
 			});
 			const context = previewStore.getSnapshot().context;
 			if (!mounted.current) return;
 			if (focusCreatedBlock && !sameEditingOwner(context.editingContext, owner)) return;
-			if (context.addBlockDialog !== dialog) return;
-			previewStore.send({ type: "closeAddBlockDialog" });
+			if (context.addBlockSheet !== sheet) return;
+			previewStore.send({ type: "closeAddBlockSheet" });
 			if (focusCreatedBlock) previewStore.send({
 				type: "focusCreatedBlock",
 				...owner,
 				blockId
 			});
 		} catch {
-			if (previewStore.getSnapshot().context.addBlockDialog === dialog) setError("Could not add this block. Please try again.");
+			if (previewStore.getSnapshot().context.addBlockSheet === sheet) setError("Could not add this block. Please try again.");
 		} finally {
 			submitting.current = false;
 		}
@@ -165,24 +165,25 @@ const AddBlockDialog = ({ focusCreatedBlock = true }) => {
 		const page = pageCounts[blockId] ?? "none";
 		return `${total} use${total > 1 ? "s" : ""} (${page} here)`;
 	};
-	return /* @__PURE__ */ jsx(Dialog, {
-		open: dialog != null,
+	return /* @__PURE__ */ jsx(Sheet, {
+		open: sheet != null,
 		onOpenChange: (open) => {
-			if (!open && !submitting.current) previewStore.send({ type: "closeAddBlockDialog" });
+			if (!open && !submitting.current) previewStore.send({ type: "closeAddBlockSheet" });
 		},
-		children: /* @__PURE__ */ jsxs(DialogContent, {
-			className: "flex h-[min(85dvh,900px)] flex-col gap-4 overflow-hidden sm:max-w-6xl",
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side: "right",
+			className: "gap-0 overflow-hidden data-[side=right]:w-full data-[side=right]:sm:max-w-4xl",
 			children: [
-				/* @__PURE__ */ jsxs(DialogHeader, {
-					className: "pr-8",
-					children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Add a block" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Search blocks, use the arrow keys to browse, and press Enter to add." })]
+				/* @__PURE__ */ jsxs(SheetHeader, {
+					className: "pr-12",
+					children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Add a block" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Search blocks, use the arrow keys to browse, and press Enter to add." })]
 				}),
 				/* @__PURE__ */ jsxs(Command, {
 					label: "Search blocks",
 					shouldFilter: false,
 					value: selectedValue,
 					onValueChange: setHighlightedValue,
-					className: "h-0 min-h-0 flex-1 rounded-none! bg-transparent! p-0!",
+					className: "h-0 min-h-0 flex-1 rounded-none! bg-transparent! px-4! pt-0! pb-0!",
 					onKeyDown: (e) => {
 						if (e.nativeEvent.isComposing || e.altKey || e.ctrlKey || e.metaKey) return;
 						if (![
@@ -214,11 +215,11 @@ const AddBlockDialog = ({ focusCreatedBlock = true }) => {
 						autoFocus: true
 					}), /* @__PURE__ */ jsxs(CommandList, {
 						label: "Available blocks",
-						className: "mt-4 max-h-none min-h-0 flex-1 pb-2",
+						className: "mt-4 max-h-none min-h-0 flex-1 pb-4",
 						"aria-busy": createBlock.isPending,
 						children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No blocks found." }), /* @__PURE__ */ jsx(CommandGroup, {
 							ref: gridRef,
-							className: "p-0 [&>[cmdk-group-items]]:grid [&>[cmdk-group-items]]:grid-cols-1 [&>[cmdk-group-items]]:gap-4 sm:[&>[cmdk-group-items]]:grid-cols-2 lg:[&>[cmdk-group-items]]:grid-cols-3",
+							className: "@container p-0 [&>[cmdk-group-items]]:grid [&>[cmdk-group-items]]:grid-cols-1 [&>[cmdk-group-items]]:gap-4 @xl:[&>[cmdk-group-items]]:grid-cols-2 @3xl:[&>[cmdk-group-items]]:grid-cols-3",
 							children: filteredBlocks.map((block) => /* @__PURE__ */ jsxs(CommandItem, {
 								value: block._internal.id,
 								keywords: [block._internal.title, block._internal.description ?? ""],
@@ -252,14 +253,16 @@ const AddBlockDialog = ({ focusCreatedBlock = true }) => {
 						})]
 					})]
 				}),
-				createBlock.isPending && /* @__PURE__ */ jsx("p", {
-					role: "status",
-					children: "Adding block…"
-				}),
-				error && /* @__PURE__ */ jsx("p", {
-					role: "alert",
-					className: "text-destructive",
-					children: error
+				(createBlock.isPending || error) && /* @__PURE__ */ jsxs("div", {
+					className: "border-border border-t p-4",
+					children: [createBlock.isPending && /* @__PURE__ */ jsx("p", {
+						role: "status",
+						children: "Adding block…"
+					}), error && /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "text-destructive",
+						children: error
+					})]
 				})
 			]
 		})
@@ -267,4 +270,4 @@ const AddBlockDialog = ({ focusCreatedBlock = true }) => {
 };
 
 //#endregion
-export { AddBlockDialog };
+export { AddBlockSheet };

package/dist/features/preview/components/BlockActionsPopover.js

@@ -50,13 +50,13 @@ const BlockActionsPopover = ({ block, children, open, onOpenChange, align = "sta
 		const blockIndex = pageBlocks.findIndex((b) => b.id === block.id);
 		const afterPosition = blockIndex > 0 ? pageBlocks[blockIndex - 1].position : "";
 		previewStore.send({
-			type: "openAddBlockDialog",
+			type: "openAddBlockSheet",
 			afterPosition
 		});
 	};
 	const handleAddBlockBelow = (block) => {
 		previewStore.send({
-			type: "openAddBlockDialog",
+			type: "openAddBlockSheet",
 			afterPosition: block.position
 		});
 	};
@@ -104,7 +104,7 @@ const BlockActionsPopover = ({ block, children, open, onOpenChange, align = "sta
 					isLayoutBlock && layoutSlot === "before" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx(CommandItem, {
 						onSelect: () => {
 							previewStore.send({
-								type: "openAddBlockDialog",
+								type: "openAddBlockSheet",
 								afterPosition: ""
 							});
 							onOpenChange(false);
@@ -118,7 +118,7 @@ const BlockActionsPopover = ({ block, children, open, onOpenChange, align = "sta
 						onSelect: () => {
 							const lastPageBlock = pageBlocks[pageBlocks.length - 1];
 							previewStore.send({
-								type: "openAddBlockDialog",
+								type: "openAddBlockSheet",
 								afterPosition: lastPageBlock?.position
 							});
 							onOpenChange(false);
@@ -419,7 +419,7 @@ function useBlockActionsShortcuts() {
 						const block_2 = pageBlocks.find((b_6) => b_6.id === sel_7.blockId);
 						if (!block_2) return;
 						previewStore.send({
-							type: "openAddBlockDialog",
+							type: "openAddBlockSheet",
 							afterPosition: block_2.position
 						});
 					}
@@ -444,7 +444,7 @@ function useBlockActionsShortcuts() {
 						if (blockIndex === -1) return;
 						const afterPosition_1 = blockIndex > 0 ? pageBlocks[blockIndex - 1].position : "";
 						previewStore.send({
-							type: "openAddBlockDialog",
+							type: "openAddBlockSheet",
 							afterPosition: afterPosition_1
 						});
 					}

package/dist/features/preview/components/BlockThumbnail.js

@@ -27,6 +27,7 @@ const ThumbnailFrame = (t0) => {
 		$[1] = t1;
 	} else t1 = $[1];
 	const bundle = t1;
+	const initialization = React.useRef(0);
 	let t2;
 	if ($[2] !== frame?.contentDocument || $[3] !== sourceDocument) {
 		t2 = () => {
@@ -38,8 +39,15 @@ const ThumbnailFrame = (t0) => {
 			const base = doc.createElement("base");
 			base.href = source.baseURI;
 			doc.head.appendChild(base);
+			const stylesheetsLoaded = [];
 			source.querySelectorAll("style, link[rel=\"stylesheet\"]").forEach((style) => {
-				if (isSiteStyle(style)) doc.head.appendChild(style.cloneNode(true));
+				if (!isSiteStyle(style)) return;
+				const clone = style.cloneNode(true);
+				if (clone.localName === "link") stylesheetsLoaded.push(new Promise((resolve) => {
+					clone.addEventListener("load", resolve, { once: true });
+					clone.addEventListener("error", resolve, { once: true });
+				}));
+				doc.head.appendChild(clone);
 			});
 			if (source !== document) for (const [from, to] of [
 				[source.documentElement, doc.documentElement],
@@ -53,7 +61,10 @@ const ThumbnailFrame = (t0) => {
 			reset.textContent = "\n      html, body { margin: 0 !important; overflow: hidden !important; }\n      *, *::before, *::after {\n        animation: none !important;\n        transition: none !important;\n        caret-color: transparent !important;\n      }\n    ";
 			doc.head.appendChild(reset);
 			doc.body.setAttribute("inert", "");
-			setRoot(mount);
+			const generation = initialization.current = initialization.current + 1;
+			Promise.all(stylesheetsLoaded).then(() => {
+				if (initialization.current === generation) setRoot(mount);
+			});
 		};
 		$[2] = frame?.contentDocument;
 		$[3] = sourceDocument;
@@ -185,12 +196,11 @@ const ThumbnailFrame = (t0) => {
 	return t14;
 };
 const BlockThumbnail = (t0) => {
-	const $ = c(15);
+	const $ = c(11);
 	const { block, className } = t0;
 	const ref = React.useRef(null);
 	const [isVisible, setIsVisible] = React.useState(false);
 	const [width, setWidth] = React.useState(0);
-	const checkerSize = 8 * (1 + width / VIEWPORT_WIDTH);
 	let t1;
 	let t2;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -222,46 +232,34 @@ const BlockThumbnail = (t0) => {
 	React.useEffect(t1, t2);
 	let t3;
 	if ($[2] !== className) {
-		t3 = cn("checkered pointer-events-none relative flex h-28 w-full items-center overflow-hidden", className);
+		t3 = cn("bg-muted pointer-events-none relative flex h-28 w-full items-center overflow-hidden", className);
 		$[2] = className;
 		$[3] = t3;
 	} else t3 = $[3];
 	let t4;
-	if ($[4] !== checkerSize || $[5] !== width) {
-		t4 = width > 0 ? {
-			backgroundSize: `${checkerSize * 2}px ${checkerSize * 2}px`,
-			backgroundPosition: `0 0, 0 ${checkerSize}px, ${checkerSize}px ${-checkerSize}px, ${-checkerSize}px 0`
-		} : void 0;
-		$[4] = checkerSize;
-		$[5] = width;
-		$[6] = t4;
-	} else t4 = $[6];
-	let t5;
-	if ($[7] !== block || $[8] !== isVisible || $[9] !== width) {
-		t5 = isVisible && width > 0 && /* @__PURE__ */ jsx(ThumbnailFrame, {
+	if ($[4] !== block || $[5] !== isVisible || $[6] !== width) {
+		t4 = isVisible && width > 0 && /* @__PURE__ */ jsx(ThumbnailFrame, {
 			block,
 			width
 		});
-		$[7] = block;
-		$[8] = isVisible;
-		$[9] = width;
-		$[10] = t5;
-	} else t5 = $[10];
-	let t6;
-	if ($[11] !== t3 || $[12] !== t4 || $[13] !== t5) {
-		t6 = /* @__PURE__ */ jsx("div", {
+		$[4] = block;
+		$[5] = isVisible;
+		$[6] = width;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
 			ref,
 			className: t3,
-			style: t4,
 			"aria-hidden": "true",
-			children: t5
+			children: t4
 		});
-		$[11] = t3;
-		$[12] = t4;
-		$[13] = t5;
-		$[14] = t6;
-	} else t6 = $[14];
-	return t6;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	return t5;
 };
 
 //#endregion

package/dist/features/preview/components/Overlays.js

@@ -39,7 +39,7 @@ function CuratedAddBlockListener(t0) {
 						else if (blockIndex === 0) afterPosition = "";
 					}
 					previewStore.send({
-						type: "openAddBlockDialog",
+						type: "openAddBlockSheet",
 						afterPosition
 					});
 				}

package/dist/features/preview/components/PageTree.js

@@ -835,7 +835,7 @@ function _temp3(block_3) {
 	return /* @__PURE__ */ jsx(SortableBlock, { block: block_3 }, block_3.id);
 }
 function _temp4() {
-	previewStore.send({ type: "openAddBlockDialog" });
+	previewStore.send({ type: "openAddBlockSheet" });
 }
 
 //#endregion

package/dist/features/preview/components/PreviewPanel.js

@@ -478,7 +478,7 @@ const PreviewPanel = (t0) => {
 		$[43] = t19;
 	} else t19 = $[43];
 	const t20 = !placed && "inset-0";
-	const t21 = underCanvas && (!placed || placed.hidden) && "invisible";
+	const t21 = underCanvas && !placed && "invisible";
 	const t22 = device && "checkered flex items-center justify-center";
 	let t23;
 	if ($[44] !== t20 || $[45] !== t21 || $[46] !== t22) {