camox 0.71.0 → 0.72.0

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

@@ -1,314 +0,0 @@
-import { useProjectUuid } from "../../../lib/auth.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";
-import * as React from "react";
-import { generateUuidv7 } from "@camox/api-contract/ids";
-import { generateKeyBetween } from "fractional-indexing";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useSelector } from "@xstate/store-react";
-import { useMutation } from "@tanstack/react-query";
-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/AddBlockSheet.tsx
-const AddBlockSheet = ({ focusCreatedBlock = true }) => {
-	const [highlightedValue, setHighlightedValue] = React.useState("");
-	const [search, setSearch] = React.useState("");
-	const [error, setError] = React.useState(null);
-	const submitting = React.useRef(false);
-	const mounted = React.useRef(false);
-	React.useEffect(() => {
-		mounted.current = true;
-		return () => {
-			mounted.current = false;
-		};
-	}, []);
-	const gridRef = React.useRef(null);
-	const sheet = useSelector(previewStore, (state) => state.context.addBlockSheet);
-	const studioCache = useStudioCache();
-	const projectUuid = useProjectUuid();
-	const pathname = useLocalePath();
-	const createBlock = useMutation({
-		...blockMutations.create(),
-		onMutate: (variables) => {
-			const edit = studioCache.edit();
-			const page = reads.pageStructure({
-				path: pathname,
-				projectUuid
-			});
-			const previousPage = edit.get(page);
-			if (!previousPage) return { edit };
-			const blockIds = previousPage.page.blockIds;
-			const pageBlocks = blockIds.map((id) => edit.get(reads.blockBundle(id))?.block).filter((b) => b != null);
-			const { afterPosition } = variables;
-			let position;
-			if (afterPosition == null) {
-				const lastBlock = pageBlocks[pageBlocks.length - 1];
-				position = generateKeyBetween(lastBlock?.position ?? null, null);
-			} else if (afterPosition === "") {
-				const firstBlock = pageBlocks[0];
-				position = generateKeyBetween(null, firstBlock?.position ?? null);
-			} else {
-				let afterIndex = -1;
-				for (let i = pageBlocks.length - 1; i >= 0; i--) if (String(pageBlocks[i].position) <= afterPosition) {
-					afterIndex = i;
-					break;
-				}
-				const nextBlock = afterIndex >= 0 ? pageBlocks[afterIndex + 1] : pageBlocks[0];
-				position = generateKeyBetween(afterIndex >= 0 ? pageBlocks[afterIndex].position : null, nextBlock?.position ?? null);
-			}
-			const now = Date.now();
-			const optimisticId = variables.id ?? generateUuidv7();
-			const optimisticBlock = {
-				id: optimisticId,
-				pageId: variables.pageId,
-				layoutId: null,
-				type: variables.type,
-				content: variables.content,
-				settings: variables.settings ?? null,
-				slot: null,
-				summary: "",
-				title: "",
-				position,
-				createdAt: now,
-				updatedAt: now
-			};
-			edit.set(reads.blockBundle(optimisticId), {
-				block: optimisticBlock,
-				repeatableItems: [],
-				files: []
-			});
-			const insertIndex = pageBlocks.findIndex((b) => b.position > position);
-			const newBlockIds = [...blockIds];
-			if (insertIndex === -1) newBlockIds.push(optimisticId);
-			else newBlockIds.splice(insertIndex, 0, optimisticId);
-			edit.set(page, {
-				...previousPage,
-				page: {
-					...previousPage.page,
-					blockIds: newBlockIds
-				}
-			});
-			return { edit };
-		},
-		onError: (_error, _variables, context) => context?.edit.rollback(),
-		onSettled: (_data, _error, _variables, context) => context?.edit.settle()
-	});
-	const { data: project } = useReadQuery(reads.project({ projectUuid }));
-	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.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;
-		for (const block of pageBlocks) counts[block.type] = (counts[block.type] ?? 0) + 1;
-		return counts;
-	}, [page, pageBlocks]);
-	const [previousSheet, setPreviousSheet] = React.useState(sheet);
-	if (sheet !== previousSheet) {
-		setPreviousSheet(sheet);
-		setHighlightedValue("");
-		setSearch("");
-		setError(null);
-	}
-	const handleAddBlock = async (block) => {
-		if (!page || !sheet || submitting.current) return;
-		submitting.current = true;
-		setError(null);
-		const owner = {
-			kind: "page",
-			pageId: page.page.id
-		};
-		try {
-			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.id,
-				content: bundle.content,
-				settings: bundle.settings,
-				afterPosition: sheet.afterPosition,
-				repeatableItems: bundle.repeatableItems
-			});
-			const context = previewStore.getSnapshot().context;
-			if (!mounted.current) return;
-			if (focusCreatedBlock && !sameEditingOwner(context.editingContext, owner)) return;
-			if (context.addBlockSheet !== sheet) return;
-			previewStore.send({ type: "closeAddBlockSheet" });
-			if (focusCreatedBlock) previewStore.send({
-				type: "focusCreatedBlock",
-				...owner,
-				blockId
-			});
-		} catch {
-			if (previewStore.getSnapshot().context.addBlockSheet === sheet) setError("Could not add this block. Please try again.");
-		} finally {
-			submitting.current = false;
-		}
-	};
-	const displayCount = (blockId) => {
-		const total = totalCounts[blockId] ?? 0;
-		if (total === 0) return "Never used";
-		const page = pageCounts[blockId] ?? "none";
-		return `${total} use${total > 1 ? "s" : ""} (${page} here)`;
-	};
-	return /* @__PURE__ */ jsx(Sheet, {
-		open: sheet != null,
-		onOpenChange: (open) => {
-			if (!open && !submitting.current) previewStore.send({ type: "closeAddBlockSheet" });
-		},
-		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(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! px-4! pt-0! pb-0!",
-					onKeyDown: (e) => {
-						if (e.nativeEvent.isComposing || e.altKey || e.ctrlKey || e.metaKey) return;
-						if (![
-							"ArrowLeft",
-							"ArrowRight",
-							"ArrowUp",
-							"ArrowDown"
-						].includes(e.key)) return;
-						e.preventDefault();
-						const grid = gridRef.current?.querySelector("[cmdk-group-items]");
-						if (!grid || submitting.current) return;
-						const items = Array.from(grid.querySelectorAll("[cmdk-item]:not([data-disabled=\"true\"])"));
-						const columns = getComputedStyle(grid).gridTemplateColumns.split(" ").length;
-						const index = items.findIndex((item) => item.dataset.selected === "true");
-						const item = items[getGridNavigationIndex(index, items.length, columns, e.key)];
-						if (!item) return;
-						setHighlightedValue(item.dataset.value ?? "");
-						item.scrollIntoView({ block: "nearest" });
-					},
-					children: [/* @__PURE__ */ jsx(CommandInput, {
-						placeholder: "Search blocks...",
-						"aria-label": "Search blocks",
-						value: search,
-						onValueChange: (value) => {
-							setSearch(value);
-							setHighlightedValue("");
-						},
-						className: "px-0 pt-0",
-						autoFocus: true
-					}), /* @__PURE__ */ jsxs(CommandList, {
-						label: "Available blocks",
-						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: "@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.id,
-								keywords: [block.title, block.description],
-								disabled: createBlock.isPending,
-								hideCheck: true,
-								onSelect: () => {
-									handleAddBlock(block);
-								},
-								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, {
-									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",
-									children: [/* @__PURE__ */ jsxs("div", {
-										className: "flex items-center justify-between gap-2",
-										children: [/* @__PURE__ */ jsx("span", {
-											className: "min-w-0 leading-5 font-medium",
-											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.id)
-									})]
-								})]
-							}, block.id))
-						})]
-					})]
-				}),
-				(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
-					})]
-				})
-			]
-		})
-	});
-};
-/**
-* 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, INITIAL_BUNDLE_WAIT_MS };

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

@@ -1,66 +0,0 @@
-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 };

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

@@ -1,281 +0,0 @@
-import { cn } from "../../../lib/utils.js";
-import { useEditingFrame } from "../editingFrame.js";
-import { useRendererHost } from "../../renderer/RendererFrames.js";
-import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle } from "./previewStyles.js";
-import { FrameContext } from "./Frame.js";
-import { c } from "react/compiler-runtime";
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-
-//#region src/features/preview/components/BlockThumbnail.tsx
-const VIEWPORT_WIDTH = 1200;
-const VIEWPORT_HEIGHT = 800;
-const ThumbnailFrame = (t0) => {
-	const $ = c(26);
-	const { blockType, title, width } = t0;
-	const sourceDocument = useEditingFrame().document;
-	const [frame, setFrame] = React.useState(null);
-	const [root, setRoot] = React.useState(null);
-	const [content, setContent] = React.useState(null);
-	const [contentHeight, setContentHeight] = React.useState(VIEWPORT_HEIGHT);
-	const initialization = React.useRef(0);
-	let t1;
-	if ($[0] !== frame?.contentDocument || $[1] !== sourceDocument) {
-		t1 = () => {
-			const doc = frame?.contentDocument;
-			const mount = doc?.querySelector("[data-camox-preview-root]");
-			if (!doc || !mount) return;
-			const source = sourceDocument ?? document;
-			doc.head.replaceChildren();
-			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)) 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],
-				[source.body, doc.body],
-				[source.querySelector("[data-camox-preview-root]"), mount]
-			]) {
-				if (!from || !to) continue;
-				for (const attribute of Array.from(from.attributes)) if (!attribute.name.startsWith("on")) to.setAttribute(attribute.name, attribute.value);
-			}
-			const reset = doc.createElement("style");
-			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", "");
-			const generation = initialization.current = initialization.current + 1;
-			Promise.all(stylesheetsLoaded).then(() => {
-				if (initialization.current === generation) setRoot(mount);
-			});
-		};
-		$[0] = frame?.contentDocument;
-		$[1] = sourceDocument;
-		$[2] = t1;
-	} else t1 = $[2];
-	const initialize = t1;
-	let t2;
-	let t3;
-	if ($[3] !== initialize) {
-		t2 = () => {
-			initialize();
-		};
-		t3 = [initialize];
-		$[3] = initialize;
-		$[4] = t2;
-		$[5] = t3;
-	} else {
-		t2 = $[4];
-		t3 = $[5];
-	}
-	React.useEffect(t2, t3);
-	let t4;
-	let t5;
-	if ($[6] !== content) {
-		t4 = () => {
-			if (!content) return;
-			const observer = new ResizeObserver(() => {
-				setContentHeight(content.getBoundingClientRect().height);
-			});
-			observer.observe(content);
-			return () => observer.disconnect();
-		};
-		t5 = [content];
-		$[6] = content;
-		$[7] = t4;
-		$[8] = t5;
-	} else {
-		t4 = $[7];
-		t5 = $[8];
-	}
-	React.useEffect(t4, t5);
-	const t6 = contentHeight * width / VIEWPORT_WIDTH;
-	let t7;
-	if ($[9] !== t6) {
-		t7 = { height: t6 };
-		$[9] = t6;
-		$[10] = t7;
-	} else t7 = $[10];
-	const t8 = `${title} preview`;
-	const t9 = `scale(${width / VIEWPORT_WIDTH})`;
-	let t10;
-	if ($[11] !== t9) {
-		t10 = {
-			width: VIEWPORT_WIDTH,
-			height: VIEWPORT_HEIGHT,
-			transform: t9
-		};
-		$[11] = t9;
-		$[12] = t10;
-	} else t10 = $[12];
-	let t11;
-	if ($[13] !== initialize || $[14] !== t10 || $[15] !== t8) {
-		t11 = /* @__PURE__ */ jsx("iframe", {
-			ref: setFrame,
-			title: t8,
-			srcDoc: EMPTY_PREVIEW_DOCUMENT,
-			onLoad: initialize,
-			tabIndex: -1,
-			className: "pointer-events-none absolute top-0 left-0 origin-top-left border-0",
-			style: t10
-		});
-		$[13] = initialize;
-		$[14] = t10;
-		$[15] = t8;
-		$[16] = t11;
-	} else t11 = $[16];
-	let t12;
-	if ($[17] !== blockType || $[18] !== content || $[19] !== frame || $[20] !== root) {
-		t12 = root && createPortal(/* @__PURE__ */ jsx(FrameContext.Provider, {
-			value: {
-				window: frame?.contentWindow ?? null,
-				iframeElement: frame
-			},
-			children: /* @__PURE__ */ jsx("div", {
-				ref: setContent,
-				style: { display: "flow-root" },
-				children: content && /* @__PURE__ */ jsx(ThumbnailContent, {
-					blockType,
-					slot: content
-				})
-			})
-		}), root);
-		$[17] = blockType;
-		$[18] = content;
-		$[19] = frame;
-		$[20] = root;
-		$[21] = t12;
-	} else t12 = $[21];
-	let t13;
-	if ($[22] !== t11 || $[23] !== t12 || $[24] !== t7) {
-		t13 = /* @__PURE__ */ jsxs("div", {
-			className: "relative max-h-full w-full shrink-0 overflow-hidden",
-			style: t7,
-			children: [t11, t12]
-		});
-		$[22] = t11;
-		$[23] = t12;
-		$[24] = t7;
-		$[25] = t13;
-	} else t13 = $[25];
-	return t13;
-};
-/**
-* What the thumbnail shows: the block rendered into `slot` by the renderer frame, which runs the
-* draft's code.
-*/
-const ThumbnailContent = (t0) => {
-	const $ = c(6);
-	const { blockType, slot } = t0;
-	const host = useRendererHost();
-	const thumbnailId = React.useId();
-	let t1;
-	let t2;
-	if ($[0] !== blockType || $[1] !== host || $[2] !== slot || $[3] !== thumbnailId) {
-		t1 = () => {
-			if (!host) return;
-			host.showThumbnail(thumbnailId, slot, blockType);
-			return () => host.hideThumbnail(thumbnailId);
-		};
-		t2 = [
-			host,
-			thumbnailId,
-			slot,
-			blockType
-		];
-		$[0] = blockType;
-		$[1] = host;
-		$[2] = slot;
-		$[3] = thumbnailId;
-		$[4] = t1;
-		$[5] = t2;
-	} else {
-		t1 = $[4];
-		t2 = $[5];
-	}
-	React.useLayoutEffect(t1, t2);
-	return null;
-};
-/** A block's thumbnail, rendered by the renderer frame with the draft's code. */
-const BlockThumbnail = (t0) => {
-	const $ = c(13);
-	const { blockType, title, className } = t0;
-	const ref = React.useRef(null);
-	const [isVisible, setIsVisible] = React.useState(false);
-	const [width, setWidth] = React.useState(0);
-	const renderable = !!useRendererHost();
-	let t1;
-	let t2;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = () => {
-			const element = ref.current;
-			if (!element) return;
-			const intersectionObserver = new IntersectionObserver((t3) => {
-				const [entry] = t3;
-				setIsVisible(entry.isIntersecting);
-			});
-			const resizeObserver = new ResizeObserver((t4) => {
-				const [entry_0] = t4;
-				setWidth(entry_0.contentRect.width);
-			});
-			intersectionObserver.observe(element);
-			resizeObserver.observe(element);
-			return () => {
-				intersectionObserver.disconnect();
-				resizeObserver.disconnect();
-			};
-		};
-		t2 = [];
-		$[0] = t1;
-		$[1] = t2;
-	} else {
-		t1 = $[0];
-		t2 = $[1];
-	}
-	React.useEffect(t1, t2);
-	let t3;
-	if ($[2] !== 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] !== blockType || $[5] !== isVisible || $[6] !== renderable || $[7] !== title || $[8] !== width) {
-		t4 = renderable && isVisible && width > 0 && /* @__PURE__ */ jsx(ThumbnailFrame, {
-			blockType,
-			title,
-			width
-		});
-		$[4] = blockType;
-		$[5] = isVisible;
-		$[6] = renderable;
-		$[7] = title;
-		$[8] = width;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== t3 || $[11] !== t4) {
-		t5 = /* @__PURE__ */ jsx("div", {
-			ref,
-			className: t3,
-			"aria-hidden": "true",
-			children: t4
-		});
-		$[10] = t3;
-		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
-	return t5;
-};
-
-//#endregion
-export { BlockThumbnail };

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

@@ -1,15 +0,0 @@
-//#region src/features/preview/components/blockGridNavigation.ts
-/** Move within a non-wrapping grid, clamping down into a short final row. */
-function getGridNavigationIndex(index, count, columns, key) {
-	if (count === 0) return -1;
-	if (index < 0) return 0;
-	const column = index % columns;
-	if (key === "ArrowLeft") return column > 0 ? index - 1 : index;
-	if (key === "ArrowRight") return column < columns - 1 ? Math.min(index + 1, count - 1) : index;
-	if (key === "ArrowUp") return index >= columns ? index - columns : index;
-	if (key === "ArrowDown") return (Math.floor(index / columns) + 1) * columns < count ? Math.min(index + columns, count - 1) : index;
-	return index;
-}
-
-//#endregion
-export { getGridNavigationIndex };