@questpie/admin 1.1.1 → 3.0.0

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

@@ -0,0 +1,388 @@
+"use client";
+
+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";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/preview/preview-pane.tsx
+/**
+* Preview Pane
+*
+* Admin-side component that renders the preview iframe
+* and handles postMessage communication with the preview page.
+*/
+const DEV_TELEMETRY = process.env.NODE_ENV === "development";
+/**
+* Preview pane component for admin.
+*
+* 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 { t } = useTranslation();
+	const client = useAdminStore(selectClient);
+	const iframeRef = React.useRef(null);
+	const [isReady, setIsReady] = React.useState(false);
+	const isReadyRef = React.useRef(false);
+	const [iframeLoading, setIframeLoading] = React.useState(true);
+	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 = [
+			"questpie",
+			"preview-token",
+			url
+		];
+		$[1] = url;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== client || $[4] !== url) {
+		t3 = async () => {
+			return `/api/preview?token=${(await client.routes.mintPreviewToken({
+				path: url,
+				ttlMs: 36e5
+			})).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);
+	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 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;
+				}
+			}
+			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;
+						pendingRefreshRef.current = false;
+						refreshMetricsRef.current = {
+							startedAt: 0,
+							requested: 0,
+							queued: 0,
+							completed: 0,
+							lastLogAt: 0
+						};
+						setIsReady(true);
+						setIframeLoading(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)}`);
+								}
+							}
+						}
+						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);
+		};
+		$[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")
+			})]
+		});
+		$[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 })]
+			})
+		});
+		$[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";
+
+//#endregion
+export { PreviewPane };