camox 0.48.0 → 0.52.1

package/dist/features/preview/EditablePageContent.js

@@ -1,3 +1,245 @@
-import { PageContent } from "./CamoxPreview.js";
+import { useViewLocale } from "../../lib/view-locale-context.js";
+import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
+import { NormalizedDataProvider, usePageBlocks } from "../../lib/normalized-data.js";
+import { reads, useRead } from "../../lib/studio-reads.js";
+import { BlockErrorBoundary } from "./components/BlockErrorBoundary.js";
+import { usePreviewedPage } from "./CamoxPreview.js";
+import { curatedLayoutContext } from "../../core/layoutContext.js";
+import { RemovedBlockPlaceholder } from "./components/RemovedBlockPlaceholder.js";
+import { c } from "react/compiler-runtime";
+import "react";
+import { Fragment, jsx } from "react/jsx-runtime";
 
-export { PageContent as EditablePageContent };
+//#region src/features/preview/EditablePageContent.tsx
+const BlockRenderer = (t0) => {
+	const $ = c(28);
+	const { blockId, mode, showAddBlockTop, showAddBlockBottom } = t0;
+	let t1;
+	if ($[0] !== blockId) {
+		t1 = reads.blockBundle(blockId);
+		$[0] = blockId;
+		$[1] = t1;
+	} else t1 = $[1];
+	const data = useRead(t1);
+	const camoxApp = useCamoxApp();
+	let t2;
+	if ($[2] !== camoxApp || $[3] !== data.block.type) {
+		t2 = camoxApp.getBlockById(data.block.type);
+		$[2] = camoxApp;
+		$[3] = data.block.type;
+		$[4] = t2;
+	} else t2 = $[4];
+	const blockDef = t2;
+	if (!blockDef) {
+		let t3;
+		if ($[5] !== blockId || $[6] !== data.block.type || $[7] !== mode) {
+			t3 = /* @__PURE__ */ jsx(RemovedBlockPlaceholder, {
+				blockId,
+				type: data.block.type,
+				mode
+			});
+			$[5] = blockId;
+			$[6] = data.block.type;
+			$[7] = mode;
+			$[8] = t3;
+		} else t3 = $[8];
+		return t3;
+	}
+	const t3 = data.files;
+	const t4 = data.repeatableItems;
+	let t5;
+	if ($[9] !== data.block) {
+		t5 = [data.block];
+		$[9] = data.block;
+		$[10] = t5;
+	} else t5 = $[10];
+	const T0 = blockDef._internal.Component;
+	const t6 = data.block.id;
+	const t7 = data.block.type;
+	const t8 = data.block.content;
+	const t9 = data.block.settings;
+	const t10 = String(data.block.position);
+	let t11;
+	if ($[11] !== data.block.id || $[12] !== data.block.type || $[13] !== t10 || $[14] !== t8 || $[15] !== t9) {
+		t11 = {
+			_id: t6,
+			type: t7,
+			content: t8,
+			settings: t9,
+			position: t10
+		};
+		$[11] = data.block.id;
+		$[12] = data.block.type;
+		$[13] = t10;
+		$[14] = t8;
+		$[15] = t9;
+		$[16] = t11;
+	} else t11 = $[16];
+	let t12;
+	if ($[17] !== blockDef._internal.Component || $[18] !== mode || $[19] !== showAddBlockBottom || $[20] !== showAddBlockTop || $[21] !== t11) {
+		t12 = /* @__PURE__ */ jsx(T0, {
+			blockData: t11,
+			mode,
+			showAddBlockTop,
+			showAddBlockBottom
+		});
+		$[17] = blockDef._internal.Component;
+		$[18] = mode;
+		$[19] = showAddBlockBottom;
+		$[20] = showAddBlockTop;
+		$[21] = t11;
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== data.files || $[24] !== data.repeatableItems || $[25] !== t12 || $[26] !== t5) {
+		t13 = /* @__PURE__ */ jsx(NormalizedDataProvider, {
+			files: t3,
+			repeatableItems: t4,
+			blocks: t5,
+			children: t12
+		});
+		$[23] = data.files;
+		$[24] = data.repeatableItems;
+		$[25] = t12;
+		$[26] = t5;
+		$[27] = t13;
+	} else t13 = $[27];
+	return t13;
+};
+const EditablePageContent = () => {
+	const $ = c(34);
+	const pageData = usePreviewedPage();
+	const { pageBlocks, beforeBlocks, afterBlocks, layoutFiles, layoutItems } = usePageBlocks(pageData);
+	const camoxApp = useCamoxApp();
+	const { locale } = useViewLocale();
+	let layout;
+	let layoutBlocksMap;
+	let t0;
+	if ($[0] !== afterBlocks || $[1] !== beforeBlocks || $[2] !== camoxApp || $[3] !== pageBlocks || $[4] !== pageData) {
+		layout = pageData.layout ? camoxApp.getLayoutById(pageData.layout.layoutId) : void 0;
+		let t1;
+		bb0: {
+			if (!pageData.layout) {
+				t1 = null;
+				break bb0;
+			}
+			let blocks;
+			if ($[8] !== afterBlocks || $[9] !== beforeBlocks) {
+				const allLayoutBlocks = [...beforeBlocks, ...afterBlocks];
+				blocks = {};
+				for (const block of allLayoutBlocks) blocks[block.type] = {
+					_id: block.id,
+					type: block.type,
+					content: block.content,
+					settings: block.settings,
+					position: String(block.position)
+				};
+				$[8] = afterBlocks;
+				$[9] = beforeBlocks;
+				$[10] = blocks;
+			} else blocks = $[10];
+			t1 = blocks;
+		}
+		layoutBlocksMap = t1;
+		t0 = pageBlocks.map((blockData, index) => /* @__PURE__ */ jsx(BlockErrorBoundary, {
+			blockId: blockData.id,
+			blockType: blockData.type,
+			children: /* @__PURE__ */ jsx(BlockRenderer, {
+				blockId: blockData.id,
+				mode: "site",
+				showAddBlockTop: index === 0 ? layout?._internal.blockDefinitions.some(_temp) ?? false : true,
+				showAddBlockBottom: true
+			})
+		}, blockData.id));
+		$[0] = afterBlocks;
+		$[1] = beforeBlocks;
+		$[2] = camoxApp;
+		$[3] = pageBlocks;
+		$[4] = pageData;
+		$[5] = layout;
+		$[6] = layoutBlocksMap;
+		$[7] = t0;
+	} else {
+		layout = $[5];
+		layoutBlocksMap = $[6];
+		t0 = $[7];
+	}
+	let t1;
+	if ($[11] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Fragment, { children: t0 });
+		$[11] = t0;
+		$[12] = t1;
+	} else t1 = $[12];
+	const pageBlocksContent = t1;
+	if (layout && layoutBlocksMap) {
+		const ToReact = layout._internal.toReact;
+		let t2;
+		if ($[13] !== afterBlocks || $[14] !== beforeBlocks) {
+			t2 = [...beforeBlocks, ...afterBlocks];
+			$[13] = afterBlocks;
+			$[14] = beforeBlocks;
+			$[15] = t2;
+		} else t2 = $[15];
+		const T0 = layout._internal.Provider;
+		let t3;
+		if ($[16] !== locale || $[17] !== pageData) {
+			t3 = curatedLayoutContext(pageData, locale);
+			$[16] = locale;
+			$[17] = pageData;
+			$[18] = t3;
+		} else t3 = $[18];
+		let t4;
+		if ($[19] !== ToReact || $[20] !== pageBlocksContent || $[21] !== t3) {
+			t4 = /* @__PURE__ */ jsx(ToReact, {
+				...t3,
+				children: pageBlocksContent
+			});
+			$[19] = ToReact;
+			$[20] = pageBlocksContent;
+			$[21] = t3;
+			$[22] = t4;
+		} else t4 = $[22];
+		let t5;
+		if ($[23] !== layout._internal.Provider || $[24] !== layoutBlocksMap || $[25] !== t4) {
+			t5 = /* @__PURE__ */ jsx(T0, {
+				layoutBlocks: layoutBlocksMap,
+				children: t4
+			});
+			$[23] = layout._internal.Provider;
+			$[24] = layoutBlocksMap;
+			$[25] = t4;
+			$[26] = t5;
+		} else t5 = $[26];
+		let t6;
+		if ($[27] !== layoutFiles || $[28] !== layoutItems || $[29] !== t2 || $[30] !== t5) {
+			t6 = /* @__PURE__ */ jsx(NormalizedDataProvider, {
+				files: layoutFiles,
+				repeatableItems: layoutItems,
+				blocks: t2,
+				children: t5
+			});
+			$[27] = layoutFiles;
+			$[28] = layoutItems;
+			$[29] = t2;
+			$[30] = t5;
+			$[31] = t6;
+		} else t6 = $[31];
+		return t6;
+	}
+	let t2;
+	if ($[32] !== pageBlocksContent) {
+		t2 = /* @__PURE__ */ jsx("main", {
+			className: "flex min-h-screen flex-col",
+			children: pageBlocksContent
+		});
+		$[32] = pageBlocksContent;
+		$[33] = t2;
+	} else t2 = $[33];
+	return t2;
+};
+function _temp(b) {
+	return b.slot === "before";
+}
+
+//#endregion
+export { EditablePageContent };

package/dist/features/preview/EditablePageExperience.js

@@ -1,33 +1,39 @@
-import { CamoxPreview, PageContent } from "./CamoxPreview.js";
+import { CamoxPreview } from "./CamoxPreview.js";
 import { CamoxContent } from "../content/CamoxContent.js";
 import { AuthenticatedCamoxProvider } from "../provider/AuthenticatedCamoxProvider.js";
 import { CamoxStudio } from "../studio/CamoxStudio.js";
-import "./EditablePageContent.js";
 import { CompleteBlockEditingRuntimeProvider } from "../../core/editing/CompleteBlockEditingRuntime.js";
+import { CamoxSettings } from "../settings/CamoxSettings.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/features/preview/EditablePageExperience.tsx
+/** The studio section each studio route shows. */
+const STUDIO_SECTIONS = {
+	"studio-content": CamoxContent,
+	"studio-settings": CamoxSettings
+};
 function EditablePageExperience(t0) {
-	const $ = c(5);
+	const $ = c(6);
 	const { input } = t0;
+	const StudioSection = input.routeKind && STUDIO_SECTIONS[input.routeKind];
 	let t1;
-	if ($[0] !== input.canvasOnly || $[1] !== input.derived || $[2] !== input.routeKind || $[3] !== input.runtimeBasePath) {
-		t1 = /* @__PURE__ */ jsx(AuthenticatedCamoxProvider, { children: /* @__PURE__ */ jsx(CompleteBlockEditingRuntimeProvider, { children: input.routeKind ? /* @__PURE__ */ jsx(CamoxStudio, { children: input.routeKind === "studio-content" ? /* @__PURE__ */ jsx(CamoxContent, {}) : /* @__PURE__ */ jsx("div", {
+	if ($[0] !== StudioSection || $[1] !== input.canvasOnly || $[2] !== input.derived || $[3] !== input.routeKind || $[4] !== input.runtimeBasePath) {
+		t1 = /* @__PURE__ */ jsx(AuthenticatedCamoxProvider, { children: /* @__PURE__ */ jsx(CompleteBlockEditingRuntimeProvider, { children: input.routeKind ? /* @__PURE__ */ jsx(CamoxStudio, { children: StudioSection ? /* @__PURE__ */ jsx(StudioSection, {}) : /* @__PURE__ */ jsx("div", {
 			className: "text-muted-foreground p-6 text-sm",
 			children: "Studio page not found"
 		}) }) : /* @__PURE__ */ jsx(CamoxPreview, {
 			derived: input.derived,
 			canvasOnly: input.canvasOnly,
-			runtimeBasePath: input.runtimeBasePath,
-			children: /* @__PURE__ */ jsx(PageContent, {})
+			runtimeBasePath: input.runtimeBasePath
 		}) }) });
-		$[0] = input.canvasOnly;
-		$[1] = input.derived;
-		$[2] = input.routeKind;
-		$[3] = input.runtimeBasePath;
-		$[4] = t1;
-	} else t1 = $[4];
+		$[0] = StudioSection;
+		$[1] = input.canvasOnly;
+		$[2] = input.derived;
+		$[3] = input.routeKind;
+		$[4] = input.runtimeBasePath;
+		$[5] = t1;
+	} else t1 = $[5];
 	return t1;
 }
 

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

@@ -1,10 +1,11 @@
 import { useProjectUuid } from "../../../lib/auth.js";
-import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { usePageBlocks } from "../../../lib/normalized-data.js";
 import { reads, useReadQuery, useStudioCache } from "../../../lib/studio-reads.js";
 import { blockMutations } from "../../../lib/queries.js";
+import { useBlockDefinitions } from "../../../lib/studio-definitions.js";
 import { useLocalePath } from "../../../lib/view-locale.js";
 import { previewStore, sameEditingOwner } from "../previewStore.js";
+import { useRendererHost } from "../../renderer/RendererFrames.js";
 import { getGridNavigationIndex } from "./blockGridNavigation.js";
 import { BlockThumbnail } from "./BlockThumbnail.js";
 import { usePreviewedPage } from "../CamoxPreview.js";
@@ -103,15 +104,16 @@ const AddBlockSheet = ({ focusCreatedBlock = true }) => {
 		onSettled: (_data, _error, _variables, context) => context?.edit.settle()
 	});
 	const { data: project } = useReadQuery(reads.project({ projectUuid }));
-	const availableBlocks = useCamoxApp().getBlocks().filter((b) => !b._internal.layoutOnly);
+	const rendererHost = useRendererHost();
+	const availableBlocks = useBlockDefinitions().filter((block) => !block.layoutOnly);
 	const page = usePreviewedPage();
 	const { pageBlocks } = usePageBlocks(page);
 	const { data: totalCounts = {} } = useReadQuery(reads.blockUsageCounts({ projectId: project?.id ?? 0 }), { enabled: !!project });
 	const filteredBlocks = availableBlocks.map((block) => ({
 		block,
-		score: search.trim() ? commandFilter(block._internal.id, search.trim(), [block._internal.title, block._internal.description ?? ""]) : 1
-	})).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score || (totalCounts[b.block._internal.id] ?? 0) - (totalCounts[a.block._internal.id] ?? 0)).map(({ block }) => block);
-	const selectedValue = filteredBlocks.some((block) => block._internal.id === highlightedValue) ? highlightedValue : filteredBlocks[0]?._internal.id ?? "";
+		score: search.trim() ? commandFilter(block.id, search.trim(), [block.title, block.description]) : 1
+	})).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score || (totalCounts[b.block.id] ?? 0) - (totalCounts[a.block.id] ?? 0)).map(({ block }) => block);
+	const selectedValue = filteredBlocks.some((block) => block.id === highlightedValue) ? highlightedValue : filteredBlocks[0]?.id ?? "";
 	const pageCounts = React.useMemo(() => {
 		const counts = {};
 		if (!page) return counts;
@@ -134,11 +136,15 @@ const AddBlockSheet = ({ focusCreatedBlock = true }) => {
 			pageId: page.page.id
 		};
 		try {
-			const bundle = block._internal.getInitialBundle();
+			const bundle = (rendererHost ? await initialBundleFrom(rendererHost, block.id) : null) ?? {
+				content: block.defaultContent,
+				settings: block.defaultSettings,
+				repeatableItems: []
+			};
 			const { id: blockId } = await createBlock.mutateAsync({
 				id: generateUuidv7(),
 				pageId: page.page.id,
-				type: block._internal.id,
+				type: block.id,
 				content: bundle.content,
 				settings: bundle.settings,
 				afterPosition: sheet.afterPosition,
@@ -222,8 +228,8 @@ const AddBlockSheet = ({ focusCreatedBlock = true }) => {
 							ref: gridRef,
 							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 ?? ""],
+								value: block.id,
+								keywords: [block.title, block.description],
 								disabled: createBlock.isPending,
 								hideCheck: true,
 								onSelect: () => {
@@ -231,7 +237,8 @@ const AddBlockSheet = ({ focusCreatedBlock = true }) => {
 								},
 								className: "group bg-card data-[selected=true]:border-primary flex flex-col items-stretch gap-0 overflow-hidden rounded-lg border-2 p-0",
 								children: [/* @__PURE__ */ jsx(BlockThumbnail, {
-									block,
+									blockType: block.id,
+									title: block.title,
 									className: "h-44"
 								}), /* @__PURE__ */ jsxs("div", {
 									className: "border-border flex flex-col gap-1 border-t px-3 py-2",
@@ -239,18 +246,18 @@ const AddBlockSheet = ({ focusCreatedBlock = true }) => {
 										className: "flex items-center justify-between gap-2",
 										children: [/* @__PURE__ */ jsx("span", {
 											className: "min-w-0 leading-5 font-medium",
-											children: block._internal.title
-										}), block._internal.synced && /* @__PURE__ */ jsx(Badge, {
+											children: block.title
+										}), block.synced && /* @__PURE__ */ jsx(Badge, {
 											variant: "secondary",
 											size: "sm",
 											children: "Synced"
 										})]
 									}), /* @__PURE__ */ jsx("span", {
 										className: "text-muted-foreground text-xs leading-4",
-										children: displayCount(block._internal.id)
+										children: displayCount(block.id)
 									})]
 								})]
-							}, block._internal.id))
+							}, block.id))
 						})]
 					})]
 				}),
@@ -269,6 +276,39 @@ const AddBlockSheet = ({ focusCreatedBlock = true }) => {
 		})
 	});
 };
+/**
+* How long adding a block waits for the renderer frame to give the block's initial content
+* before it uses the synced defaults. A tuning value.
+*/
+const INITIAL_BUNDLE_WAIT_MS = 3e3;
+/**
+* The initial content a `blockType` block's code builds, asked of the renderer frame. Null,
+* for the synced defaults, when the renderer runs another SDK version, which answers nothing,
+* or hasn't answered within `INITIAL_BUNDLE_WAIT_MS`, as when it never connects.
+*/
+function initialBundleFrom(host, blockType) {
+	return new Promise((resolve, reject) => {
+		const settle = (bundle) => {
+			clearTimeout(timeout);
+			stopWatching();
+			resolve(bundle);
+		};
+		const timeout = setTimeout(() => settle(null), INITIAL_BUNDLE_WAIT_MS);
+		const watch = () => {
+			if (host.status() === "updating") settle(null);
+		};
+		const stopWatching = host.subscribeStatus(watch);
+		watch();
+		host.ask({
+			type: "initialBundle",
+			blockType
+		}).then(settle, (error) => {
+			clearTimeout(timeout);
+			stopWatching();
+			reject(error);
+		});
+	});
+}
 
 //#endregion
-export { AddBlockSheet };
+export { AddBlockSheet, INITIAL_BUNDLE_WAIT_MS };

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

@@ -1,8 +1,7 @@
 import { actionsStore } from "../../provider/actionsStore.js";
-import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { usePageBlocks } from "../../../lib/normalized-data.js";
-import { formatShortcut } from "../../../lib/utils.js";
 import { blockMutations, repeatableItemMutations } from "../../../lib/queries.js";
+import { formatShortcut } from "../../../lib/shortcuts.js";
 import { isBlockSelection, previewStore, selectionForPage, selectionItemId } from "../previewStore.js";
 import { entityName } from "../entityName.js";
 import { useUpdateBlockPosition } from "./useUpdateBlockPosition.js";
@@ -139,7 +138,7 @@ const BlockActionsPopover = ({ block, children, open, onOpenChange, align = "sta
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "flex items-center gap-2",
 								children: [/* @__PURE__ */ jsx("span", { className: "w-4" }), "Add block below"]
-							}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut({ key: "o" }) })]
+							}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut("O") })]
 						}), /* @__PURE__ */ jsxs(CommandItem, {
 							className: "justify-between",
 							onSelect: () => {
@@ -149,10 +148,7 @@ const BlockActionsPopover = ({ block, children, open, onOpenChange, align = "sta
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "flex items-center gap-2",
 								children: [/* @__PURE__ */ jsx("span", { className: "w-4" }), "Add block above"]
-							}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut({
-								key: "o",
-								withShift: true
-							}) })]
+							}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut("Shift+O") })]
 						})] }),
 						/* @__PURE__ */ jsx(CommandSeparator, {}),
 						/* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsxs(CommandItem, {
@@ -164,10 +160,7 @@ const BlockActionsPopover = ({ block, children, open, onOpenChange, align = "sta
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "flex items-center gap-2",
 								children: [/* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" }), "Duplicate block"]
-							}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut({
-								key: "d",
-								withMeta: true
-							}) })]
+							}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut("Mod+D") })]
 						}) }),
 						/* @__PURE__ */ jsx(CommandSeparator, {}),
 						/* @__PURE__ */ jsxs(CommandGroup, { children: [
@@ -196,10 +189,7 @@ const BlockActionsPopover = ({ block, children, open, onOpenChange, align = "sta
 								children: [/* @__PURE__ */ jsxs("div", {
 									className: "flex items-center gap-2",
 									children: [/* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }), "Delete block"]
-								}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut({
-									key: "Backspace",
-									withMeta: true
-								}) })]
+								}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut("Mod+Backspace") })]
 							})
 						] })
 					] })
@@ -235,8 +225,7 @@ function isLayoutBlockId(page, blockId) {
 	return (/* @__PURE__ */ new Set([...page.layout.beforeBlockIds, ...page.layout.afterBlockIds])).has(blockId);
 }
 function useBlockActionsShortcuts() {
-	const $ = c(24);
-	const camoxApp = useCamoxApp();
+	const $ = c(23);
 	const page = usePreviewedPage();
 	const { pageBlocks } = usePageBlocks(page);
 	let t0;
@@ -279,10 +268,7 @@ function useBlockActionsShortcuts() {
 					id: "delete-selected",
 					label: "Delete selected",
 					groupLabel: "Website",
-					shortcut: {
-						key: "Backspace",
-						withMeta: true
-					},
+					shortcut: "Mod+Backspace",
 					checkIfAvailable: () => {
 						const ctx = previewStore.getSnapshot().context;
 						if (ctx.view !== "canvas") return false;
@@ -320,10 +306,7 @@ function useBlockActionsShortcuts() {
 					id: "duplicate-selected",
 					label: "Duplicate selected",
 					groupLabel: "Website",
-					shortcut: {
-						key: "d",
-						withMeta: true
-					},
+					shortcut: "Mod+D",
 					checkIfAvailable: () => {
 						const ctx_0 = previewStore.getSnapshot().context;
 						if (ctx_0.view !== "canvas") return false;
@@ -348,10 +331,7 @@ function useBlockActionsShortcuts() {
 					id: "move-block-up",
 					label: "Move block up",
 					groupLabel: "Website",
-					shortcut: {
-						key: "ArrowUp",
-						withAlt: true
-					},
+					shortcut: "Alt+ArrowUp",
 					checkIfAvailable: () => {
 						const ctx_1 = previewStore.getSnapshot().context;
 						if (ctx_1.view !== "canvas") return false;
@@ -378,10 +358,7 @@ function useBlockActionsShortcuts() {
 					id: "move-block-down",
 					label: "Move block down",
 					groupLabel: "Website",
-					shortcut: {
-						key: "ArrowDown",
-						withAlt: true
-					},
+					shortcut: "Alt+ArrowDown",
 					checkIfAvailable: () => {
 						const ctx_2 = previewStore.getSnapshot().context;
 						if (ctx_2.view !== "canvas") return false;
@@ -409,7 +386,7 @@ function useBlockActionsShortcuts() {
 					id: "add-block-below",
 					label: "Add block below",
 					groupLabel: "Website",
-					shortcut: { key: "o" },
+					shortcut: "O",
 					checkIfAvailable: () => {
 						const ctx_3 = previewStore.getSnapshot().context;
 						if (ctx_3.view !== "canvas") return false;
@@ -430,10 +407,7 @@ function useBlockActionsShortcuts() {
 					id: "add-block-above",
 					label: "Add block above",
 					groupLabel: "Website",
-					shortcut: {
-						key: "o",
-						withShift: true
-					},
+					shortcut: "Shift+O",
 					checkIfAvailable: () => {
 						const ctx_4 = previewStore.getSnapshot().context;
 						if (ctx_4.view !== "canvas") return false;
@@ -473,29 +447,27 @@ function useBlockActionsShortcuts() {
 		$[13] = t5;
 	} else t5 = $[13];
 	let t6;
-	if ($[14] !== camoxApp || $[15] !== deleteBlock || $[16] !== deleteRepeatableItem || $[17] !== duplicateBlock || $[18] !== duplicateRepeatableItem || $[19] !== page || $[20] !== pageBlocks || $[21] !== selection || $[22] !== updatePosition) {
+	if ($[14] !== deleteBlock || $[15] !== deleteRepeatableItem || $[16] !== duplicateBlock || $[17] !== duplicateRepeatableItem || $[18] !== page || $[19] !== pageBlocks || $[20] !== selection || $[21] !== updatePosition) {
 		t6 = [
 			selection,
 			page,
 			pageBlocks,
-			camoxApp,
 			deleteBlock,
 			duplicateBlock,
 			updatePosition,
 			deleteRepeatableItem,
 			duplicateRepeatableItem
 		];
-		$[14] = camoxApp;
-		$[15] = deleteBlock;
-		$[16] = deleteRepeatableItem;
-		$[17] = duplicateBlock;
-		$[18] = duplicateRepeatableItem;
-		$[19] = page;
-		$[20] = pageBlocks;
-		$[21] = selection;
-		$[22] = updatePosition;
-		$[23] = t6;
-	} else t6 = $[23];
+		$[14] = deleteBlock;
+		$[15] = deleteRepeatableItem;
+		$[16] = duplicateBlock;
+		$[17] = duplicateRepeatableItem;
+		$[18] = page;
+		$[19] = pageBlocks;
+		$[20] = selection;
+		$[21] = updatePosition;
+		$[22] = t6;
+	} else t6 = $[22];
 	React.useEffect(t5, t6);
 }
 function _temp14(a) {

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

@@ -0,0 +1,66 @@
+import { NormalizedDataProvider } from "../../../lib/normalized-data.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/preview/components/BlockPeek.tsx
+/**
+* A block rendered by its code from its peek bundle: what its thumbnail shows. It catches no
+* error: a broken block shows no thumbnail, which is for the thumbnail to do.
+*/
+const BlockPeek = (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;
+	const t2 = bundle.block.content;
+	const t3 = bundle.block.settings;
+	let t4;
+	if ($[2] !== block._internal.id || $[3] !== t2 || $[4] !== t3) {
+		t4 = {
+			_id: "thumbnail",
+			type: block._internal.id,
+			content: t2,
+			settings: t3,
+			position: ""
+		};
+		$[2] = block._internal.id;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== block._internal.Component || $[7] !== t4) {
+		t5 = /* @__PURE__ */ jsx(block._internal.Component, {
+			blockData: t4,
+			mode: "peek"
+		});
+		$[6] = block._internal.Component;
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== bundle.files || $[10] !== bundle.repeatableItems || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(React.Suspense, {
+			fallback: null,
+			children: /* @__PURE__ */ jsx(NormalizedDataProvider, {
+				files: bundle.files,
+				repeatableItems: bundle.repeatableItems,
+				children: t5
+			})
+		});
+		$[9] = bundle.files;
+		$[10] = bundle.repeatableItems;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
+};
+
+//#endregion
+export { BlockPeek };