camox 0.40.0 → 0.41.0

package/dist/features/preview/DerivedPreview.js

@@ -0,0 +1,137 @@
+import { useIsAuthenticated, useProjectSlug } from "../../lib/auth.js";
+import { getApiClient } from "../../lib/api-client.js";
+import { seedBlockCaches } from "../../lib/normalized-data.js";
+import { previewStore } from "./previewStore.js";
+import { PreviewShell } from "./CamoxPreview.js";
+import { DerivedPageContent } from "../page/DerivedPageContent.js";
+import { c } from "react/compiler-runtime";
+import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { jsx } from "react/jsx-runtime";
+import { useSelector } from "@xstate/store-react";
+import { queryKeys } from "@camox/api-contract/query-keys";
+
+//#region src/features/preview/DerivedPreview.tsx
+function DerivedPreview(props) {
+	const $ = c(5);
+	if ($[0] !== "261aac3044f545b5b17e0449fc914e6311b0108f3d16c419141b242a12b10dbe") {
+		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "261aac3044f545b5b17e0449fc914e6311b0108f3d16c419141b242a12b10dbe";
+	}
+	if (!useIsAuthenticated()) {
+		let t0;
+		if ($[1] !== props) {
+			t0 = /* @__PURE__ */ jsx(DerivedPageContent, { ...props });
+			$[1] = props;
+			$[2] = t0;
+		} else t0 = $[2];
+		return t0;
+	}
+	let t0;
+	if ($[3] !== props) {
+		t0 = /* @__PURE__ */ jsx(AuthenticatedDerivedPreview, { ...props });
+		$[3] = props;
+		$[4] = t0;
+	} else t0 = $[4];
+	return t0;
+}
+function AuthenticatedDerivedPreview(t0) {
+	const $ = c(26);
+	if ($[0] !== "261aac3044f545b5b17e0449fc914e6311b0108f3d16c419141b242a12b10dbe") {
+		for (let $i = 0; $i < 26; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "261aac3044f545b5b17e0449fc914e6311b0108f3d16c419141b242a12b10dbe";
+	}
+	const { camoxApp, derived, source } = t0;
+	const previewSource = useSelector(previewStore, _temp);
+	const projectSlug = useProjectSlug();
+	const queryClient = useQueryClient();
+	let t1;
+	if ($[1] !== derived.layout.id || $[2] !== previewSource || $[3] !== projectSlug) {
+		t1 = [
+			...queryKeys.layouts.all,
+			"get",
+			projectSlug,
+			derived.layout.id,
+			previewSource
+		];
+		$[1] = derived.layout.id;
+		$[2] = previewSource;
+		$[3] = projectSlug;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== derived.layoutId || $[6] !== previewSource || $[7] !== projectSlug || $[8] !== queryClient) {
+		t2 = async () => {
+			const result = await getApiClient().layouts.get({
+				projectSlug,
+				layoutId: derived.layoutId,
+				source: previewSource
+			});
+			seedBlockCaches(queryClient, result, previewSource);
+			return result.layout;
+		};
+		$[5] = derived.layoutId;
+		$[6] = previewSource;
+		$[7] = projectSlug;
+		$[8] = queryClient;
+		$[9] = t2;
+	} else t2 = $[9];
+	const t3 = previewSource === source ? derived.layout : void 0;
+	let t4;
+	if ($[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
+		t4 = {
+			queryKey: t1,
+			queryFn: t2,
+			initialData: t3,
+			staleTime: 0
+		};
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	const { data: layout } = useSuspenseQuery(t4);
+	const t5 = layout.livePublishedCheckpointId != null;
+	let t6;
+	if ($[14] !== derived || $[15] !== layout) {
+		t6 = {
+			...derived,
+			layout
+		};
+		$[14] = derived;
+		$[15] = layout;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== camoxApp || $[18] !== previewSource || $[19] !== t6) {
+		t7 = /* @__PURE__ */ jsx(DerivedPageContent, {
+			camoxApp,
+			derived: t6,
+			source: previewSource
+		});
+		$[17] = camoxApp;
+		$[18] = previewSource;
+		$[19] = t6;
+		$[20] = t7;
+	} else t7 = $[20];
+	let t8;
+	if ($[21] !== derived.layoutId || $[22] !== layout || $[23] !== t5 || $[24] !== t7) {
+		t8 = /* @__PURE__ */ jsx(PreviewShell, {
+			hasLiveVersion: t5,
+			derivedLayoutId: derived.layoutId,
+			derivedLayout: layout,
+			children: t7
+		});
+		$[21] = derived.layoutId;
+		$[22] = layout;
+		$[23] = t5;
+		$[24] = t7;
+		$[25] = t8;
+	} else t8 = $[25];
+	return t8;
+}
+function _temp(state) {
+	return state.context.previewSource;
+}
+
+//#endregion
+export { DerivedPreview };

package/dist/features/preview/EditablePageExperience.js

@@ -1,22 +1,39 @@
+import { STUDIO_CONTENT_PATH } from "../studio/routes.js";
 import { CamoxPreview, PageContent } from "./CamoxPreview.js";
+import { CamoxContent } from "../content/CamoxContent.js";
 import { AuthenticatedCamoxProvider } from "../provider/AuthenticatedCamoxProvider.js";
+import { CamoxStudio } from "../studio/CamoxStudio.js";
 import { CompleteBlockEditingRuntimeProvider } from "../../core/editing/CompleteBlockEditingRuntime.js";
+import { DerivedPreview } from "./DerivedPreview.js";
 import "./EditablePageContent.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/features/preview/EditablePageExperience.tsx
 function EditablePageExperience(t0) {
-	const $ = c(2);
-	if ($[0] !== "62fa8b2b4207f6a9197bd7473308418337b4719a942b8cb83f05f5f584c962c9") {
-		for (let $i = 0; $i < 2; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "62fa8b2b4207f6a9197bd7473308418337b4719a942b8cb83f05f5f584c962c9";
+	const $ = c(7);
+	if ($[0] !== "3e64bef83d2f73cbe404213f4d6ec47e2fdb910abb8eeca9c10b0045de454f73") {
+		for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "3e64bef83d2f73cbe404213f4d6ec47e2fdb910abb8eeca9c10b0045de454f73";
 	}
+	const { camoxApp, input } = t0;
 	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(AuthenticatedCamoxProvider, { children: /* @__PURE__ */ jsx(CompleteBlockEditingRuntimeProvider, { children: /* @__PURE__ */ jsx(CamoxPreview, { children: /* @__PURE__ */ jsx(PageContent, {}) }) }) });
-		$[1] = t1;
-	} else t1 = $[1];
+	if ($[1] !== camoxApp || $[2] !== input.derived || $[3] !== input.pathname || $[4] !== input.routeKind || $[5] !== input.source) {
+		t1 = /* @__PURE__ */ jsx(AuthenticatedCamoxProvider, { children: /* @__PURE__ */ jsx(CompleteBlockEditingRuntimeProvider, { children: input.routeKind ? /* @__PURE__ */ jsx(CamoxStudio, { children: input.pathname === STUDIO_CONTENT_PATH ? /* @__PURE__ */ jsx(CamoxContent, {}) : /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground p-6 text-sm",
+			children: "Studio page not found"
+		}) }) : input.derived ? /* @__PURE__ */ jsx(DerivedPreview, {
+			camoxApp,
+			derived: input.derived,
+			source: input.source
+		}) : /* @__PURE__ */ jsx(CamoxPreview, { children: /* @__PURE__ */ jsx(PageContent, {}) }) }) });
+		$[1] = camoxApp;
+		$[2] = input.derived;
+		$[3] = input.pathname;
+		$[4] = input.routeKind;
+		$[5] = input.source;
+		$[6] = t1;
+	} else t1 = $[6];
 	return t1;
 }
 

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

@@ -6,6 +6,7 @@ import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { trackClientEvent } from "../../../lib/telemetry-client.js";
 import { previewStore } from "../previewStore.js";
 import { useRequireDraftSource } from "../../../core/hooks/useRequireDraftSource.js";
+import { BlockThumbnail } from "./BlockThumbnail.js";
 import { usePreviewedPage } from "../CamoxPreview.js";
 import { c } from "react/compiler-runtime";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -16,20 +17,20 @@ import { useSelector } from "@xstate/store-react";
 import { queryKeys } from "@camox/api-contract/query-keys";
 import { Button } from "@camox/ui/button";
 import { ArrowLeft } from "lucide-react";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@camox/ui/command";
+import { Badge } from "@camox/ui/badge";
 import { PanelContent } from "@camox/ui/panel";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@camox/ui/command";
 
 //#region src/features/preview/components/AddBlockSidebar.tsx
 const AddBlockSidebar = () => {
 	const $ = c(58);
-	if ($[0] !== "e90c6519081e1159c7b7b2dea03fb3f0a6ad85218cb70141acd0c7462b3c8ff5") {
+	if ($[0] !== "0a9bbf9c6eddd22fc242436657c914b17db692a3ab0e958a7f9451a343536838") {
 		for (let $i = 0; $i < 58; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "e90c6519081e1159c7b7b2dea03fb3f0a6ad85218cb70141acd0c7462b3c8ff5";
+		$[0] = "0a9bbf9c6eddd22fc242436657c914b17db692a3ab0e958a7f9451a343536838";
 	}
 	const [highlightedValue, setHighlightedValue] = React.useState("");
 	const queryClient = useQueryClient();
 	const { pathname } = useLocation();
-	const pagePathname = useSelector(previewStore, _temp) ?? pathname;
 	const requireDraft = useRequireDraftSource();
 	let t0;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
@@ -37,15 +38,15 @@ const AddBlockSidebar = () => {
 		$[1] = t0;
 	} else t0 = $[1];
 	let t1;
-	if ($[2] !== pagePathname || $[3] !== queryClient) {
+	if ($[2] !== pathname || $[3] !== queryClient) {
 		t1 = {
 			...t0,
 			onMutate: (variables) => {
-				const pageQueryKey = queryKeys.pages.getByPath(pagePathname, "draft");
+				const pageQueryKey = queryKeys.pages.getByPath(pathname, "draft");
 				const previousPage = queryClient.getQueryData(pageQueryKey);
 				if (!previousPage) return {};
 				const blockIds = previousPage.page.blockIds;
-				const pageBlocks = blockIds.map((id) => queryClient.getQueryData(queryKeys.blocks.get(id, "draft"))?.block).filter(_temp2);
+				const pageBlocks = blockIds.map((id) => queryClient.getQueryData(queryKeys.blocks.get(id, "draft"))?.block).filter(_temp);
 				const { afterPosition } = variables;
 				let position;
 				if (afterPosition == null) {
@@ -101,14 +102,14 @@ const AddBlockSidebar = () => {
 				};
 			},
 			onError: (_error, _variables, context) => {
-				if (context?.previousPage) queryClient.setQueryData(queryKeys.pages.getByPath(pagePathname, "draft"), context.previousPage);
+				if (context?.previousPage) queryClient.setQueryData(queryKeys.pages.getByPath(pathname, "draft"), context.previousPage);
 				if (context?.optimisticId) queryClient.removeQueries({ queryKey: queryKeys.blocks.get(context.optimisticId, "draft") });
 			},
 			onSettled: () => {
-				queryClient.invalidateQueries({ queryKey: queryKeys.pages.getByPath(pagePathname, "draft") });
+				queryClient.invalidateQueries({ queryKey: queryKeys.pages.getByPath(pathname, "draft") });
 			}
 		};
-		$[2] = pagePathname;
+		$[2] = pathname;
 		$[3] = queryClient;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -121,7 +122,7 @@ const AddBlockSidebar = () => {
 		$[6] = t2;
 	} else t2 = $[6];
 	const { data: project } = useQuery(t2);
-	const availableBlocks = useCamoxApp().getBlocks().filter(_temp3);
+	const availableBlocks = useCamoxApp().getBlocks().filter(_temp2);
 	const page = usePreviewedPage();
 	const { pageBlocks: pageBlocks_0 } = usePageBlocks(page);
 	let t3;
@@ -165,8 +166,8 @@ const AddBlockSidebar = () => {
 		$[16] = t8;
 	} else t8 = $[16];
 	const pageCounts = t8;
-	const peekedBlockPosition = useSelector(previewStore, _temp4);
-	const addBlockSource = useSelector(previewStore, _temp5);
+	const peekedBlockPosition = useSelector(previewStore, _temp3);
+	const addBlockSource = useSelector(previewStore, _temp4);
 	let t9;
 	if ($[17] !== addBlockSource || $[18] !== createBlock || $[19] !== page || $[20] !== pageBlocks_0 || $[21] !== peekedBlockPosition || $[22] !== requireDraft) {
 		t9 = async (block_0) => {
@@ -242,7 +243,7 @@ const AddBlockSidebar = () => {
 			children: /* @__PURE__ */ jsxs(Button, {
 				variant: "ghost",
 				className: "w-full justify-start",
-				onClick: _temp6,
+				onClick: _temp5,
 				children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "text-muted-foreground" }), "Add new block"]
 			})
 		});
@@ -252,7 +253,7 @@ const AddBlockSidebar = () => {
 	const t13 = "flex grow basis-0 flex-col overflow-auto px-2 py-2";
 	const T1 = Command;
 	const t14 = "overflow-visible rounded-none! bg-transparent! p-0!";
-	const t15 = _temp7;
+	const t15 = _temp6;
 	let t16;
 	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
 		t16 = /* @__PURE__ */ jsx(CommandInput, {
@@ -279,19 +280,31 @@ const AddBlockSidebar = () => {
 	} else t20 = $[34];
 	let t21;
 	if ($[35] !== displayCount || $[36] !== handleAddBlock) {
-		t21 = (block_3) => /* @__PURE__ */ jsx(CommandItem, {
+		t21 = (block_3) => /* @__PURE__ */ jsxs(CommandItem, {
 			value: block_3._internal.title,
+			keywords: [block_3._internal.description ?? ""],
+			hideCheck: true,
 			onSelect: () => {
 				handleAddBlock(block_3);
 			},
-			className: "group flex items-center justify-between gap-2",
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "flex-1",
-				children: [/* @__PURE__ */ jsx("span", { children: block_3._internal.title }), /* @__PURE__ */ jsx("span", {
-					className: "text-muted-foreground block",
+			className: "group bg-card data-[selected=true]:border-primary data-[selected=true]:after:border-primary mb-3 flex flex-col items-stretch gap-0 overflow-hidden rounded-lg border p-0 after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] last:mb-0 data-[selected=true]:after:border",
+			children: [/* @__PURE__ */ jsx(BlockThumbnail, { block: block_3 }), /* @__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_3._internal.title
+					}), block_3._internal.synced && /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						size: "sm",
+						children: "Synced"
+					})]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-xs leading-4",
 					children: displayCount(block_3._internal.id)
 				})]
-			})
+			})]
 		}, block_3._internal.id);
 		$[35] = displayCount;
 		$[36] = handleAddBlock;
@@ -355,25 +368,22 @@ const AddBlockSidebar = () => {
 	} else t27 = $[57];
 	return t27;
 };
-function _temp(state) {
-	return state.context.peekedPagePathname;
-}
-function _temp2(b) {
+function _temp(b) {
 	return b != null;
 }
-function _temp3(b_1) {
+function _temp2(b_1) {
 	return !b_1._internal.layoutOnly;
 }
-function _temp4(state_0) {
-	return state_0.context.peekedBlockPosition;
+function _temp3(state) {
+	return state.context.peekedBlockPosition;
 }
-function _temp5(state_1) {
-	return state_1.context.addBlockSource;
+function _temp4(state_0) {
+	return state_0.context.addBlockSource;
 }
-function _temp6() {
+function _temp5() {
 	return previewStore.send({ type: "closeAddBlockSidebar" });
 }
-function _temp7(e) {
+function _temp6(e) {
 	if (e.key === "Escape") previewStore.send({ type: "closeAddBlockSidebar" });
 }
 

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

@@ -15,8 +15,8 @@ import { Check, Download, FileIcon, Info, Link, Loader2, Trash2, X } from "lucid
 import { toast } from "@camox/ui/toaster";
 import { Dialog, DialogContent, DialogTitle } from "@camox/ui/dialog";
 import { Label } from "@camox/ui/label";
-import { ButtonGroup } from "@camox/ui/button-group";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
+import { ButtonGroup } from "@camox/ui/button-group";
 import { Switch } from "@camox/ui/switch";
 
 //#region src/features/preview/components/AssetLightbox.tsx

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

@@ -0,0 +1,192 @@
+import { NormalizedDataProvider } from "../../../lib/normalized-data.js";
+import { BlockErrorBoundary } from "./BlockErrorBoundary.js";
+import { previewStore } from "../previewStore.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 { useSelector } from "@xstate/store-react";
+import { createPortal } from "react-dom";
+
+//#region src/features/preview/components/BlockThumbnail.tsx
+const VIEWPORT_WIDTH = 1200;
+const VIEWPORT_HEIGHT = 800;
+const ThumbnailFrame = ({ block, width }) => {
+	const sourceFrame = useSelector(previewStore, (state) => state.context.iframeElement);
+	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 bundle = React.useMemo(() => block._internal.getPeekBundle(), [block]);
+	const initialize = React.useCallback(() => {
+		const doc = frame?.contentDocument;
+		const mount = doc?.querySelector("[data-camox-preview-root]");
+		if (!doc || !mount) return;
+		const source = sourceFrame?.contentDocument ?? document;
+		doc.head.replaceChildren();
+		const base = doc.createElement("base");
+		base.href = source.baseURI;
+		doc.head.appendChild(base);
+		source.querySelectorAll("style, link[rel=\"stylesheet\"]").forEach((style) => {
+			if (isSiteStyle(style)) doc.head.appendChild(style.cloneNode(true));
+		});
+		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 = `
+      html, body { margin: 0 !important; overflow: hidden !important; }
+      *, *::before, *::after {
+        animation: none !important;
+        transition: none !important;
+        caret-color: transparent !important;
+      }
+    `;
+		doc.head.appendChild(reset);
+		doc.body.inert = true;
+		setRoot(mount);
+	}, [frame, sourceFrame]);
+	React.useEffect(() => {
+		initialize();
+	}, [initialize]);
+	React.useEffect(() => {
+		if (!content) return;
+		const observer = new ResizeObserver(() => {
+			setContentHeight(content.getBoundingClientRect().height);
+		});
+		observer.observe(content);
+		return () => observer.disconnect();
+	}, [content]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative max-h-full w-full shrink-0 overflow-hidden",
+		style: { height: contentHeight * width / VIEWPORT_WIDTH },
+		children: [/* @__PURE__ */ jsx("iframe", {
+			ref: setFrame,
+			title: `${block._internal.title} preview`,
+			srcDoc: EMPTY_PREVIEW_DOCUMENT,
+			onLoad: initialize,
+			tabIndex: -1,
+			className: "pointer-events-none absolute top-0 left-0 origin-top-left border-0",
+			style: {
+				width: VIEWPORT_WIDTH,
+				height: VIEWPORT_HEIGHT,
+				transform: `scale(${width / VIEWPORT_WIDTH})`
+			}
+		}), root && createPortal(/* @__PURE__ */ jsx(FrameContext.Provider, {
+			value: {
+				window: frame?.contentWindow ?? null,
+				iframeElement: frame
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				ref: setContent,
+				style: { display: "flow-root" },
+				children: /* @__PURE__ */ jsx(BlockErrorBoundary, {
+					blockId: 0,
+					blockType: block._internal.id,
+					children: /* @__PURE__ */ jsx(React.Suspense, {
+						fallback: null,
+						children: /* @__PURE__ */ jsx(NormalizedDataProvider, {
+							files: bundle.files,
+							repeatableItems: bundle.repeatableItems,
+							children: /* @__PURE__ */ jsx(block._internal.Component, {
+								blockData: {
+									_id: 0,
+									type: block._internal.id,
+									content: bundle.block.content,
+									settings: bundle.block.settings,
+									position: ""
+								},
+								mode: "peek"
+							})
+						})
+					})
+				})
+			})
+		}), root)]
+	});
+};
+const BlockThumbnail = (t0) => {
+	const $ = c(13);
+	if ($[0] !== "150232a0d21c91d8fa59376f05913c9b4e2cabef4981a57296ed2c5c473bef0b") {
+		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "150232a0d21c91d8fa59376f05913c9b4e2cabef4981a57296ed2c5c473bef0b";
+	}
+	const { block } = 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 ($[1] === 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 = [];
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	React.useEffect(t1, t2);
+	let t3;
+	if ($[3] !== checkerSize || $[4] !== width) {
+		t3 = width > 0 ? {
+			backgroundSize: `${checkerSize * 2}px ${checkerSize * 2}px`,
+			backgroundPosition: `0 0, 0 ${checkerSize}px, ${checkerSize}px ${-checkerSize}px, ${-checkerSize}px 0`
+		} : void 0;
+		$[3] = checkerSize;
+		$[4] = width;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== block || $[7] !== isVisible || $[8] !== width) {
+		t4 = isVisible && width > 0 && /* @__PURE__ */ jsx(ThumbnailFrame, {
+			block,
+			width
+		});
+		$[6] = block;
+		$[7] = isVisible;
+		$[8] = width;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t3 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			ref,
+			className: "checkered pointer-events-none relative flex h-28 w-full items-center overflow-hidden",
+			style: t3,
+			"aria-hidden": "true",
+			children: t4
+		});
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+};
+
+//#endregion
+export { BlockThumbnail };