@questpie/admin 3.2.0 → 3.2.2

package/dist/client/components/preview/preview-pane.mjs

@@ -4,7 +4,6 @@ import { useTranslation } from "../../i18n/hooks.mjs";
 import { cn } from "../../lib/utils.mjs";
 import { selectClient, useAdminStore } from "../../runtime/provider.mjs";
 import { isPreviewToAdminMessage } from "../../preview/types.mjs";
-import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
 import * as React from "react";
 import { useQuery } from "@tanstack/react-query";
@@ -24,9 +23,7 @@ const DEV_TELEMETRY = process.env.NODE_ENV === "development";
 * Renders an iframe with the preview page and handles
 * bidirectional communication via postMessage.
 */
-const PreviewPane = React.forwardRef((t0, ref) => {
-	const $ = c(59);
-	const { url, selectedBlockId, onFieldClick, onBlockClick, className, allowedOrigins } = t0;
+const PreviewPane = React.forwardRef(({ url, selectedBlockId, onFieldClick, onBlockClick, onBlockInsertRequest, onFieldValueEdited, onPatchApplied, onResyncRequest, className, allowedOrigins }, ref) => {
 	const { t } = useTranslation();
 	const client = useAdminStore(selectClient);
 	const iframeRef = React.useRef(null);
@@ -36,351 +33,309 @@ const PreviewPane = React.forwardRef((t0, ref) => {
 	const [isRefreshing, setIsRefreshing] = React.useState(false);
 	const isRefreshingRef = React.useRef(false);
 	const pendingRefreshRef = React.useRef(false);
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = {
-			startedAt: 0,
-			requested: 0,
-			queued: 0,
-			completed: 0,
-			lastLogAt: 0
-		};
-		$[0] = t1;
-	} else t1 = $[0];
-	const refreshMetricsRef = React.useRef(t1);
-	let t2;
-	if ($[1] !== url) {
-		t2 = [
+	const seqRef = React.useRef(0);
+	const pendingMessagesRef = React.useRef([]);
+	const refreshMetricsRef = React.useRef({
+		startedAt: 0,
+		requested: 0,
+		queued: 0,
+		completed: 0,
+		lastLogAt: 0
+	});
+	const { data: previewUrl, error: tokenQueryError, isLoading: isTokenLoading } = useQuery({
+		queryKey: [
 			"questpie",
 			"preview-token",
 			url
-		];
-		$[1] = url;
-		$[2] = t2;
-	} else t2 = $[2];
-	let t3;
-	if ($[3] !== client || $[4] !== url) {
-		t3 = async () => {
+		],
+		queryFn: async () => {
 			return `/api/preview?token=${(await client.routes.mintPreviewToken({
 				path: url,
-				ttlMs: 36e5
+				ttlMs: 3600 * 1e3
 			})).token}`;
-		};
-		$[3] = client;
-		$[4] = url;
-		$[5] = t3;
-	} else t3 = $[5];
-	const t4 = !!url && !!client;
-	let t5;
-	if ($[6] !== t2 || $[7] !== t3 || $[8] !== t4) {
-		t5 = {
-			queryKey: t2,
-			queryFn: t3,
-			enabled: t4,
-			staleTime: 3e6,
-			retry: false
-		};
-		$[6] = t2;
-		$[7] = t3;
-		$[8] = t4;
-		$[9] = t5;
-	} else t5 = $[9];
-	const { data: previewUrl, error: tokenQueryError, isLoading: isTokenLoading } = useQuery(t5);
+		},
+		enabled: !!url && !!client,
+		staleTime: 3e3 * 1e3,
+		retry: false
+	});
 	const previewUrlResolved = previewUrl ?? null;
-	let t6;
-	if ($[10] !== t || $[11] !== tokenQueryError) {
-		t6 = tokenQueryError instanceof Error ? tokenQueryError.message : tokenQueryError ? t("error.failedToGeneratePreviewToken") : null;
-		$[10] = t;
-		$[11] = tokenQueryError;
-		$[12] = t6;
-	} else t6 = $[12];
-	const tokenError = t6;
+	const tokenError = tokenQueryError instanceof Error ? tokenQueryError.message : tokenQueryError ? t("error.failedToGeneratePreviewToken") : null;
 	const isLoading = isTokenLoading || iframeLoading;
-	let t7;
-	if ($[13] !== allowedOrigins || $[14] !== url) {
-		t7 = (origin) => {
-			if (!allowedOrigins || allowedOrigins.length === 0) {
-				if (origin === window.location.origin) return true;
-				try {
-					return origin === new URL(url).origin;
-				} catch {
-					return false;
-				}
+	const resolveUrlOrigin = React.useCallback((candidate) => {
+		if (!candidate) return null;
+		try {
+			const base = typeof window === "undefined" ? "http://localhost" : window.location.href;
+			return new URL(candidate, base).origin;
+		} catch {
+			return null;
+		}
+	}, []);
+	const targetOrigin = React.useMemo(() => {
+		const resolvedPreviewOrigin = resolveUrlOrigin(previewUrlResolved);
+		if (resolvedPreviewOrigin) return resolvedPreviewOrigin;
+		const configuredPreviewOrigin = resolveUrlOrigin(url);
+		if (configuredPreviewOrigin) return configuredPreviewOrigin;
+		if (allowedOrigins?.length === 1) return allowedOrigins[0];
+		return typeof window === "undefined" ? "*" : window.location.origin;
+	}, [
+		allowedOrigins,
+		previewUrlResolved,
+		resolveUrlOrigin,
+		url
+	]);
+	const expectedOrigins = React.useMemo(() => {
+		const origins = /* @__PURE__ */ new Set();
+		if (typeof window !== "undefined") origins.add(window.location.origin);
+		const resolvedPreviewOrigin_0 = resolveUrlOrigin(previewUrlResolved);
+		if (resolvedPreviewOrigin_0) origins.add(resolvedPreviewOrigin_0);
+		const configuredPreviewOrigin_0 = resolveUrlOrigin(url);
+		if (configuredPreviewOrigin_0) origins.add(configuredPreviewOrigin_0);
+		for (const origin of allowedOrigins ?? []) origins.add(origin);
+		return origins;
+	}, [
+		allowedOrigins,
+		previewUrlResolved,
+		resolveUrlOrigin,
+		url
+	]);
+	const isValidOrigin = React.useCallback((origin_0) => {
+		return expectedOrigins.has(origin_0);
+	}, [expectedOrigins]);
+	const getNextSeq = React.useCallback(() => {
+		seqRef.current += 1;
+		return seqRef.current;
+	}, []);
+	const sendToPreview = React.useCallback((message, queueUntilReady = false) => {
+		const iframe = iframeRef.current;
+		if (!iframe?.contentWindow) {
+			if (queueUntilReady) pendingMessagesRef.current.push(message);
+			return;
+		}
+		if (queueUntilReady && !isReadyRef.current) {
+			pendingMessagesRef.current.push(message);
+			return;
+		}
+		iframe.contentWindow.postMessage(message, targetOrigin);
+	}, [targetOrigin]);
+	const flushPendingMessages = React.useCallback(() => {
+		const pending = pendingMessagesRef.current;
+		if (pending.length === 0) return;
+		pendingMessagesRef.current = [];
+		for (const message_0 of pending) sendToPreview(message_0);
+	}, [sendToPreview]);
+	const requestRefresh = React.useCallback(() => {
+		if (!isReady) return;
+		const metrics = refreshMetricsRef.current;
+		const now = performance.now();
+		if (!metrics.startedAt) metrics.startedAt = now;
+		metrics.requested += 1;
+		if (isRefreshingRef.current) {
+			pendingRefreshRef.current = true;
+			metrics.queued += 1;
+			if (DEV_TELEMETRY && now - metrics.lastLogAt >= 5e3) {
+				metrics.lastLogAt = now;
+				const elapsedSec = Math.max(1, (now - metrics.startedAt) / 1e3);
+				const refreshPerMinute = metrics.completed * 60 / elapsedSec;
+				console.debug(`[LivePreviewTelemetry] refresh requested=${metrics.requested} completed=${metrics.completed} queued=${metrics.queued} rpm=${refreshPerMinute.toFixed(1)}`);
 			}
-			return allowedOrigins.includes(origin);
-		};
-		$[13] = allowedOrigins;
-		$[14] = url;
-		$[15] = t7;
-	} else t7 = $[15];
-	const isValidOrigin = t7;
-	let t8;
-	if ($[16] !== url) {
-		t8 = (message) => {
-			const iframe = iframeRef.current;
-			if (!iframe?.contentWindow) return;
-			try {
-				const targetOrigin = new URL(url).origin;
-				iframe.contentWindow.postMessage(message, targetOrigin);
-			} catch {
-				iframe.contentWindow.postMessage(message, "*");
-			}
-		};
-		$[16] = url;
-		$[17] = t8;
-	} else t8 = $[17];
-	const sendToPreview = t8;
-	let t9;
-	if ($[18] !== isReady || $[19] !== sendToPreview) {
-		t9 = () => {
-			if (!isReady) return;
-			const metrics = refreshMetricsRef.current;
-			const now = performance.now();
-			if (!metrics.startedAt) metrics.startedAt = now;
-			metrics.requested = metrics.requested + 1;
-			if (isRefreshingRef.current) {
-				pendingRefreshRef.current = true;
-				metrics.queued = metrics.queued + 1;
-				if (DEV_TELEMETRY && now - metrics.lastLogAt >= 5e3) {
-					metrics.lastLogAt = now;
-					const elapsedSec = Math.max(1, (now - metrics.startedAt) / 1e3);
-					const refreshPerMinute = metrics.completed * 60 / elapsedSec;
-					console.debug(`[LivePreviewTelemetry] refresh requested=${metrics.requested} completed=${metrics.completed} queued=${metrics.queued} rpm=${refreshPerMinute.toFixed(1)}`);
-				}
-				return;
-			}
-			isRefreshingRef.current = true;
-			setIsRefreshing(true);
-			sendToPreview({ type: "PREVIEW_REFRESH" });
-		};
-		$[18] = isReady;
-		$[19] = sendToPreview;
-		$[20] = t9;
-	} else t9 = $[20];
-	const requestRefresh = t9;
-	let t10;
-	let t11;
-	if ($[21] !== isReady || $[22] !== requestRefresh || $[23] !== sendToPreview) {
-		t10 = () => ({
-			triggerRefresh: () => {
-				requestRefresh();
-			},
-			sendFocusToPreview: (fieldPath) => {
-				if (isReady) sendToPreview({
-					type: "FOCUS_FIELD",
-					fieldPath
-				});
-			}
-		});
-		t11 = [
-			isReady,
-			requestRefresh,
-			sendToPreview
-		];
-		$[21] = isReady;
-		$[22] = requestRefresh;
-		$[23] = sendToPreview;
-		$[24] = t10;
-		$[25] = t11;
-	} else {
-		t10 = $[24];
-		t11 = $[25];
-	}
-	React.useImperativeHandle(ref, t10, t11);
-	let t12;
-	let t13;
-	if ($[26] !== isValidOrigin || $[27] !== onBlockClick || $[28] !== onFieldClick || $[29] !== sendToPreview) {
-		t12 = () => {
-			const handleMessage = (event) => {
-				if (!isValidOrigin(event.origin)) return;
-				if (!isPreviewToAdminMessage(event.data)) return;
-				bb98: switch (event.data.type) {
-					case "PREVIEW_READY":
-						isReadyRef.current = true;
-						isRefreshingRef.current = false;
+			return;
+		}
+		isRefreshingRef.current = true;
+		setIsRefreshing(true);
+		sendToPreview({ type: "PREVIEW_REFRESH" });
+	}, [isReady, sendToPreview]);
+	React.useImperativeHandle(ref, () => ({
+		triggerRefresh: () => {
+			requestRefresh();
+		},
+		sendFocusToPreview: (fieldPath) => {
+			if (isReady) sendToPreview({
+				type: "FOCUS_FIELD",
+				fieldPath
+			});
+		},
+		sendInitSnapshot: (data) => {
+			const seq = getNextSeq();
+			sendToPreview({
+				type: "INIT_SNAPSHOT",
+				seq,
+				data
+			}, true);
+			return seq;
+		},
+		sendPatchBatch: (ops, snapshotVersion) => {
+			const seq_0 = getNextSeq();
+			sendToPreview({
+				type: "PATCH_BATCH",
+				seq: seq_0,
+				ops,
+				snapshotVersion
+			}, true);
+			return seq_0;
+		},
+		sendCommit: (data_0) => {
+			const seq_1 = getNextSeq();
+			sendToPreview({
+				type: "COMMIT",
+				seq: seq_1,
+				data: data_0
+			}, true);
+			return seq_1;
+		},
+		sendFullResync: (reason) => {
+			sendToPreview({
+				type: "FULL_RESYNC",
+				reason
+			}, true);
+		}
+	}), [
+		getNextSeq,
+		isReady,
+		requestRefresh,
+		sendToPreview
+	]);
+	React.useEffect(() => {
+		const handleMessage = (event) => {
+			if (!isValidOrigin(event.origin)) return;
+			if (event.source !== iframeRef.current?.contentWindow) return;
+			if (!isPreviewToAdminMessage(event.data)) return;
+			switch (event.data.type) {
+				case "PREVIEW_READY":
+					isReadyRef.current = true;
+					isRefreshingRef.current = false;
+					pendingRefreshRef.current = false;
+					refreshMetricsRef.current = {
+						startedAt: 0,
+						requested: 0,
+						queued: 0,
+						completed: 0,
+						lastLogAt: 0
+					};
+					setIsReady(true);
+					setIframeLoading(false);
+					setIsRefreshing(false);
+					flushPendingMessages();
+					break;
+				case "REFRESH_COMPLETE":
+					if (refreshMetricsRef.current.startedAt) refreshMetricsRef.current.completed += 1;
+					if (pendingRefreshRef.current) {
 						pendingRefreshRef.current = false;
-						refreshMetricsRef.current = {
-							startedAt: 0,
-							requested: 0,
-							queued: 0,
-							completed: 0,
-							lastLogAt: 0
-						};
-						setIsReady(true);
-						setIframeLoading(false);
+						sendToPreview({ type: "PREVIEW_REFRESH" });
+					} else {
+						isRefreshingRef.current = false;
 						setIsRefreshing(false);
-						break bb98;
-					case "REFRESH_COMPLETE":
-						if (refreshMetricsRef.current.startedAt) refreshMetricsRef.current.completed = refreshMetricsRef.current.completed + 1;
-						if (pendingRefreshRef.current) {
-							pendingRefreshRef.current = false;
-							sendToPreview({ type: "PREVIEW_REFRESH" });
-						} else {
-							isRefreshingRef.current = false;
-							setIsRefreshing(false);
-							if (DEV_TELEMETRY) {
-								const metrics_0 = refreshMetricsRef.current;
-								const now_0 = performance.now();
-								if (now_0 - metrics_0.lastLogAt >= 5e3 && metrics_0.startedAt) {
-									metrics_0.lastLogAt = now_0;
-									const elapsedSec_0 = Math.max(1, (now_0 - metrics_0.startedAt) / 1e3);
-									const refreshPerMinute_0 = metrics_0.completed * 60 / elapsedSec_0;
-									console.debug(`[LivePreviewTelemetry] refresh requested=${metrics_0.requested} completed=${metrics_0.completed} queued=${metrics_0.queued} rpm=${refreshPerMinute_0.toFixed(1)}`);
-								}
+						if (DEV_TELEMETRY) {
+							const metrics_0 = refreshMetricsRef.current;
+							const now_0 = performance.now();
+							if (now_0 - metrics_0.lastLogAt >= 5e3 && metrics_0.startedAt) {
+								metrics_0.lastLogAt = now_0;
+								const elapsedSec_0 = Math.max(1, (now_0 - metrics_0.startedAt) / 1e3);
+								const refreshPerMinute_0 = metrics_0.completed * 60 / elapsedSec_0;
+								console.debug(`[LivePreviewTelemetry] refresh requested=${metrics_0.requested} completed=${metrics_0.completed} queued=${metrics_0.queued} rpm=${refreshPerMinute_0.toFixed(1)}`);
 							}
 						}
-						break bb98;
-					case "FIELD_CLICKED":
-						onFieldClick?.(event.data.fieldPath, {
-							blockId: event.data.blockId,
-							fieldType: event.data.fieldType
-						});
-						break bb98;
-					case "BLOCK_CLICKED": onBlockClick?.(event.data.blockId);
-				}
-			};
-			window.addEventListener("message", handleMessage);
-			return () => window.removeEventListener("message", handleMessage);
-		};
-		t13 = [
-			isValidOrigin,
-			onFieldClick,
-			onBlockClick,
-			sendToPreview
-		];
-		$[26] = isValidOrigin;
-		$[27] = onBlockClick;
-		$[28] = onFieldClick;
-		$[29] = sendToPreview;
-		$[30] = t12;
-		$[31] = t13;
-	} else {
-		t12 = $[30];
-		t13 = $[31];
-	}
-	React.useEffect(t12, t13);
-	let t14;
-	let t15;
-	if ($[32] !== isReady || $[33] !== selectedBlockId || $[34] !== sendToPreview) {
-		t14 = () => {
-			if (isReady && selectedBlockId) sendToPreview({
-				type: "SELECT_BLOCK",
-				blockId: selectedBlockId
-			});
-		};
-		t15 = [
-			isReady,
-			selectedBlockId,
-			sendToPreview
-		];
-		$[32] = isReady;
-		$[33] = selectedBlockId;
-		$[34] = sendToPreview;
-		$[35] = t14;
-		$[36] = t15;
-	} else {
-		t14 = $[35];
-		t15 = $[36];
-	}
-	React.useEffect(t14, t15);
-	let t16;
-	if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = () => {
-			setTimeout(() => {
-				if (!isReadyRef.current) setIframeLoading(false);
-			}, 3e3);
+					}
+					break;
+				case "FIELD_CLICKED":
+					onFieldClick?.(event.data.fieldPath, {
+						blockId: event.data.blockId,
+						fieldType: event.data.fieldType
+					});
+					break;
+				case "BLOCK_CLICKED":
+					onBlockClick?.(event.data.blockId);
+					break;
+				case "BLOCK_INSERT_REQUESTED":
+					onBlockInsertRequest?.(event.data);
+					break;
+				case "PATCH_APPLIED":
+					onPatchApplied?.(event.data.seq);
+					break;
+				case "RESYNC_REQUEST":
+					onResyncRequest?.(event.data.reason);
+					sendToPreview({
+						type: "FULL_RESYNC",
+						reason: event.data.reason
+					}, true);
+					requestRefresh();
+					break;
+				case "FIELD_VALUE_EDITED":
+					onFieldValueEdited?.(event.data);
+					break;
+			}
 		};
-		$[37] = t16;
-	} else t16 = $[37];
-	const handleLoad = t16;
-	let t17;
-	if ($[38] !== className) {
-		t17 = cn("relative h-full w-full", className);
-		$[38] = className;
-		$[39] = t17;
-	} else t17 = $[39];
-	let t18;
-	if ($[40] !== isLoading || $[41] !== t) {
-		t18 = isLoading && /* @__PURE__ */ jsxs("div", {
-			className: "bg-muted absolute inset-0 z-10 flex items-center justify-center",
-			children: [/* @__PURE__ */ jsx(Icon, {
-				icon: "ph:spinner",
-				className: "text-muted-foreground h-6 w-6 animate-spin"
-			}), /* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground ml-2 text-sm",
-				children: t("preview.loadingPreview")
-			})]
+		window.addEventListener("message", handleMessage);
+		return () => window.removeEventListener("message", handleMessage);
+	}, [
+		flushPendingMessages,
+		isValidOrigin,
+		onFieldClick,
+		onBlockClick,
+		onBlockInsertRequest,
+		onFieldValueEdited,
+		onPatchApplied,
+		onResyncRequest,
+		requestRefresh,
+		sendToPreview
+	]);
+	React.useEffect(() => {
+		if (isReady && selectedBlockId) sendToPreview({
+			type: "SELECT_BLOCK",
+			blockId: selectedBlockId
 		});
-		$[40] = isLoading;
-		$[41] = t;
-		$[42] = t18;
-	} else t18 = $[42];
-	let t19;
-	if ($[43] !== t || $[44] !== tokenError) {
-		t19 = tokenError && /* @__PURE__ */ jsx("div", {
-			className: "bg-muted absolute inset-0 z-10 flex items-center justify-center",
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "bg-destructive/10 border-destructive text-destructive border px-4 py-3 text-sm",
-				children: [/* @__PURE__ */ jsx("p", {
-					className: "font-medium",
-					children: t("preview.previewError")
-				}), /* @__PURE__ */ jsx("p", { children: tokenError })]
+	}, [
+		isReady,
+		selectedBlockId,
+		sendToPreview
+	]);
+	const handleLoad = React.useCallback(() => {
+		setTimeout(() => {
+			if (!isReadyRef.current) setIframeLoading(false);
+		}, 3e3);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative h-full w-full", className),
+		children: [
+			isLoading && /* @__PURE__ */ jsxs("div", {
+				className: "bg-muted absolute inset-0 z-10 flex items-center justify-center",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:spinner",
+					className: "text-muted-foreground h-6 w-6 animate-spin"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground ml-2 text-sm",
+					children: t("preview.loadingPreview")
+				})]
+			}),
+			tokenError && /* @__PURE__ */ jsx("div", {
+				className: "bg-muted absolute inset-0 z-10 flex items-center justify-center",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "bg-destructive/10 border-destructive text-destructive border px-4 py-3 text-sm",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "font-medium",
+						children: t("preview.previewError")
+					}), /* @__PURE__ */ jsx("p", { children: tokenError })]
+				})
+			}),
+			isRefreshing && !isLoading && /* @__PURE__ */ jsxs("div", {
+				className: "bg-background absolute top-4 right-4 z-10 flex items-center gap-2 border px-3 py-2 shadow-md",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:spinner",
+					className: "text-muted-foreground h-4 w-4 animate-spin"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-sm",
+					children: t("preview.refreshing")
+				})]
+			}),
+			previewUrlResolved && /* @__PURE__ */ jsx("iframe", {
+				ref: iframeRef,
+				src: previewUrlResolved,
+				className: "h-full w-full border-0",
+				title: t("common.preview"),
+				onLoad: handleLoad,
+				sandbox: "allow-scripts allow-same-origin allow-forms"
 			})
-		});
-		$[43] = t;
-		$[44] = tokenError;
-		$[45] = t19;
-	} else t19 = $[45];
-	let t20;
-	if ($[46] !== isLoading || $[47] !== isRefreshing || $[48] !== t) {
-		t20 = isRefreshing && !isLoading && /* @__PURE__ */ jsxs("div", {
-			className: "bg-background absolute top-4 right-4 z-10 flex items-center gap-2 border px-3 py-2 shadow-md",
-			children: [/* @__PURE__ */ jsx(Icon, {
-				icon: "ph:spinner",
-				className: "text-muted-foreground h-4 w-4 animate-spin"
-			}), /* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground text-sm",
-				children: t("preview.refreshing")
-			})]
-		});
-		$[46] = isLoading;
-		$[47] = isRefreshing;
-		$[48] = t;
-		$[49] = t20;
-	} else t20 = $[49];
-	let t21;
-	if ($[50] !== previewUrlResolved || $[51] !== t) {
-		t21 = previewUrlResolved && /* @__PURE__ */ jsx("iframe", {
-			ref: iframeRef,
-			src: previewUrlResolved,
-			className: "h-full w-full border-0",
-			title: t("common.preview"),
-			onLoad: handleLoad,
-			sandbox: "allow-scripts allow-same-origin allow-forms"
-		});
-		$[50] = previewUrlResolved;
-		$[51] = t;
-		$[52] = t21;
-	} else t21 = $[52];
-	let t22;
-	if ($[53] !== t17 || $[54] !== t18 || $[55] !== t19 || $[56] !== t20 || $[57] !== t21) {
-		t22 = /* @__PURE__ */ jsxs("div", {
-			className: t17,
-			children: [
-				t18,
-				t19,
-				t20,
-				t21
-			]
-		});
-		$[53] = t17;
-		$[54] = t18;
-		$[55] = t19;
-		$[56] = t20;
-		$[57] = t21;
-		$[58] = t22;
-	} else t22 = $[58];
-	return t22;
+		]
+	});
 });
 PreviewPane.displayName = "PreviewPane";