@questpie/admin 3.2.4 → 3.2.5

package/dist/client/components/preview/live-preview-mode.mjs

@@ -7,7 +7,6 @@ import { Tabs, TabsList, TabsTrigger } from "../ui/tabs.mjs";
 import { FocusProvider, parsePreviewFieldPath, scheduleScrollFieldIntoView, useFocus } from "../../contexts/focus-context.mjs";
 import { useIsMobile } from "../../hooks/use-media-query.mjs";
 import { PreviewPane } from "./preview-pane.mjs";
-import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -31,276 +30,165 @@ function isPreviewIframeFocused() {
 	const activeElement = document.activeElement;
 	return activeElement instanceof HTMLIFrameElement || activeElement?.tagName === "IFRAME";
 }
-function useResizablePane(t0, t1, t2) {
-	const $ = c(11);
-	const defaultSize = t0 === void 0 ? 50 : t0;
-	const minSize = t1 === void 0 ? 30 : t1;
-	const enabled = t2 === void 0 ? true : t2;
+function useResizablePane(defaultSize = 50, minSize = 30, enabled = true) {
 	const [previewPercent, setPreviewPercent] = React.useState(defaultSize);
 	const isDragging = React.useRef(false);
 	const containerRef = React.useRef(null);
-	let t3;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = {
-			cursor: "",
-			userSelect: ""
-		};
-		$[0] = t3;
-	} else t3 = $[0];
-	const previousBodyStyleRef = React.useRef(t3);
-	let t4;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = () => {
-			Object.assign(document.body.style, previousBodyStyleRef.current);
+	const previousBodyStyleRef = React.useRef({
+		cursor: "",
+		userSelect: ""
+	});
+	const restoreBodyStyle = React.useCallback(() => {
+		Object.assign(document.body.style, previousBodyStyleRef.current);
+	}, []);
+	const handleMouseDown = React.useCallback((e) => {
+		if (!enabled) return;
+		e.preventDefault();
+		isDragging.current = true;
+		previousBodyStyleRef.current = {
+			cursor: document.body.style.cursor,
+			userSelect: document.body.style.userSelect
 		};
-		$[1] = t4;
-	} else t4 = $[1];
-	const restoreBodyStyle = t4;
-	let t5;
-	if ($[2] !== enabled) {
-		t5 = (e) => {
-			if (!enabled) return;
-			e.preventDefault();
-			isDragging.current = true;
-			previousBodyStyleRef.current = {
-				cursor: document.body.style.cursor,
-				userSelect: document.body.style.userSelect
-			};
-			Object.assign(document.body.style, {
-				cursor: "col-resize",
-				userSelect: "none"
-			});
+		Object.assign(document.body.style, {
+			cursor: "col-resize",
+			userSelect: "none"
+		});
+	}, [enabled]);
+	React.useEffect(() => {
+		if (!enabled) return;
+		const handleMouseMove = (e) => {
+			if (!isDragging.current || !containerRef.current) return;
+			const rect = containerRef.current.getBoundingClientRect();
+			const formPercent = (e.clientX - rect.left) / rect.width * 100;
+			setPreviewPercent(Math.min(100 - minSize, Math.max(minSize, 100 - formPercent)));
 		};
-		$[2] = enabled;
-		$[3] = t5;
-	} else t5 = $[3];
-	const handleMouseDown = t5;
-	let t6;
-	let t7;
-	if ($[4] !== enabled || $[5] !== minSize) {
-		t6 = () => {
-			if (!enabled) return;
-			const handleMouseMove = (e_0) => {
-				if (!isDragging.current || !containerRef.current) return;
-				const rect = containerRef.current.getBoundingClientRect();
-				const formPercent = (e_0.clientX - rect.left) / rect.width * 100;
-				setPreviewPercent(Math.min(100 - minSize, Math.max(minSize, 100 - formPercent)));
-			};
-			const handleMouseUp = () => {
-				if (isDragging.current) {
-					isDragging.current = false;
-					restoreBodyStyle();
-				}
-			};
-			window.addEventListener("mousemove", handleMouseMove);
-			window.addEventListener("mouseup", handleMouseUp);
-			return () => {
-				window.removeEventListener("mousemove", handleMouseMove);
-				window.removeEventListener("mouseup", handleMouseUp);
-				if (isDragging.current) {
-					isDragging.current = false;
-					restoreBodyStyle();
-				}
-			};
+		const handleMouseUp = () => {
+			if (isDragging.current) {
+				isDragging.current = false;
+				restoreBodyStyle();
+			}
 		};
-		t7 = [
-			enabled,
-			minSize,
-			restoreBodyStyle
-		];
-		$[4] = enabled;
-		$[5] = minSize;
-		$[6] = t6;
-		$[7] = t7;
-	} else {
-		t6 = $[6];
-		t7 = $[7];
-	}
-	React.useEffect(t6, t7);
-	let t8;
-	if ($[8] !== handleMouseDown || $[9] !== previewPercent) {
-		t8 = {
-			previewPercent,
-			containerRef,
-			handleMouseDown
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("mouseup", handleMouseUp);
+		return () => {
+			window.removeEventListener("mousemove", handleMouseMove);
+			window.removeEventListener("mouseup", handleMouseUp);
+			if (isDragging.current) {
+				isDragging.current = false;
+				restoreBodyStyle();
+			}
 		};
-		$[8] = handleMouseDown;
-		$[9] = previewPercent;
-		$[10] = t8;
-	} else t8 = $[10];
-	return t8;
+	}, [
+		enabled,
+		minSize,
+		restoreBodyStyle
+	]);
+	return {
+		previewPercent,
+		containerRef,
+		handleMouseDown
+	};
 }
-function useLivePreviewRenderTelemetry(t0) {
-	const $ = c(4);
-	const { open, isMobile, activeTab } = t0;
+function useLivePreviewRenderTelemetry({ open, isMobile, activeTab }) {
 	const renderCountRef = React.useRef(0);
 	const startAtRef = React.useRef(0);
 	const lastLogAtRef = React.useRef(0);
-	let t1;
-	if ($[0] !== activeTab || $[1] !== isMobile || $[2] !== open) {
-		t1 = () => {
-			if (!DEV_TELEMETRY) return;
-			if (!open) {
-				renderCountRef.current = 0;
-				startAtRef.current = 0;
-				lastLogAtRef.current = 0;
-				return;
-			}
-			const now = performance.now();
-			if (!startAtRef.current) startAtRef.current = now;
-			renderCountRef.current = renderCountRef.current + 1;
-			const shouldLogByCount = renderCountRef.current % 25 === 0;
-			const shouldLogByTime = now - lastLogAtRef.current >= 5e3;
-			if (!shouldLogByCount && !shouldLogByTime) return;
-			lastLogAtRef.current = now;
-			const elapsedMs = Math.max(1, now - startAtRef.current);
-			const rendersPerSecond = renderCountRef.current * 1e3 / elapsedMs;
-			console.debug(`[LivePreviewTelemetry] renders=${renderCountRef.current} rps=${rendersPerSecond.toFixed(2)} mobile=${isMobile} tab=${activeTab}`);
-		};
-		$[0] = activeTab;
-		$[1] = isMobile;
-		$[2] = open;
-		$[3] = t1;
-	} else t1 = $[3];
-	React.useEffect(t1);
+	React.useEffect(() => {
+		if (!DEV_TELEMETRY) return;
+		if (!open) {
+			renderCountRef.current = 0;
+			startAtRef.current = 0;
+			lastLogAtRef.current = 0;
+			return;
+		}
+		const now = performance.now();
+		if (!startAtRef.current) startAtRef.current = now;
+		renderCountRef.current += 1;
+		const shouldLogByCount = renderCountRef.current % 25 === 0;
+		const shouldLogByTime = now - lastLogAtRef.current >= 5e3;
+		if (!shouldLogByCount && !shouldLogByTime) return;
+		lastLogAtRef.current = now;
+		const elapsedMs = Math.max(1, now - startAtRef.current);
+		const rendersPerSecond = renderCountRef.current * 1e3 / elapsedMs;
+		console.debug(`[LivePreviewTelemetry] renders=${renderCountRef.current} rps=${rendersPerSecond.toFixed(2)} mobile=${isMobile} tab=${activeTab}`);
+	});
 }
-function LivePreviewContent(t0) {
-	const $ = c(78);
-	const { open, children, previewUrl, previewRef, onFieldValueEdited, onPatchApplied, onResyncRequest, defaultSize: t1, minSize: t2 } = t0;
-	const defaultSize = t1 === void 0 ? 50 : t1;
-	const minSize = t2 === void 0 ? 30 : t2;
+function LivePreviewContent({ open, children, previewUrl, previewRef, onFieldValueEdited, onPatchApplied, onResyncRequest, defaultSize = 50, minSize = 30 }) {
 	const { t } = useTranslation();
 	const isMobile = useIsMobile();
 	const [activeTab, setActiveTab] = React.useState("form");
-	let t3;
-	if ($[0] !== activeTab || $[1] !== isMobile || $[2] !== open) {
-		t3 = {
-			open,
-			isMobile,
-			activeTab
-		};
-		$[0] = activeTab;
-		$[1] = isMobile;
-		$[2] = open;
-		$[3] = t3;
-	} else t3 = $[3];
-	useLivePreviewRenderTelemetry(t3);
+	useLivePreviewRenderTelemetry({
+		open,
+		isMobile,
+		activeTab
+	});
 	const { previewPercent, containerRef, handleMouseDown } = useResizablePane(defaultSize, minSize, open && !isMobile);
 	const { state: focusState, focusField, focusBlock, focusRelation, requestBlockInsert } = useFocus();
-	let t4;
-	if ($[4] !== focusBlock || $[5] !== focusField || $[6] !== focusRelation) {
-		t4 = (state) => {
-			if (state.type === "field") focusField(state.fieldPath);
-			else if (state.type === "block") focusBlock(state.blockId, state.fieldPath);
-			else if (state.type === "relation") focusRelation(state.fieldPath, state.targetCollection);
-		};
-		$[4] = focusBlock;
-		$[5] = focusField;
-		$[6] = focusRelation;
-		$[7] = t4;
-	} else t4 = $[7];
-	const applyFocusState = t4;
-	const handleExitPreview = _temp;
-	let t5;
-	let t6;
-	if ($[8] !== focusState || $[9] !== open || $[10] !== previewRef) {
-		t5 = () => {
-			if (!open) return;
-			if (!previewRef.current) return;
-			if (focusState.type === "field" || focusState.type === "relation") previewRef.current.sendFocusToPreview(focusState.fieldPath);
-			else if (focusState.type === "block") if (focusState.fieldPath) {
-				const fullPath = `content._values.${focusState.blockId}.${focusState.fieldPath}`;
-				previewRef.current.sendFocusToPreview(fullPath);
-			} else {
-				const fullPath_0 = `content._values.${focusState.blockId}`;
-				previewRef.current.sendFocusToPreview(fullPath_0);
-			}
-		};
-		t6 = [
-			focusState,
-			previewRef,
-			open
-		];
-		$[8] = focusState;
-		$[9] = open;
-		$[10] = previewRef;
-		$[11] = t5;
-		$[12] = t6;
-	} else {
-		t5 = $[11];
-		t6 = $[12];
-	}
-	React.useEffect(t5, t6);
-	let t7;
-	let t8;
-	if ($[13] !== applyFocusState || $[14] !== focusState || $[15] !== open) {
-		t7 = () => {
-			if (!open) return;
-			const handleKeyDown = (e) => {
-				if (e.key !== "Tab") return;
-				const formScope = document.querySelector("[data-preview-form-scope]");
-				if (!formScope) return;
-				const fields = Array.from(formScope.querySelectorAll("[data-field-path]"));
-				if (fields.length === 0) return;
-				if (!formScope.contains(document.activeElement)) return;
-				e.preventDefault();
-				const currentPath = getFocusStatePath(focusState);
-				const currentIdx = currentPath ? fields.findIndex((el) => el.getAttribute("data-field-path") === currentPath) : -1;
-				let nextIdx;
-				if (e.shiftKey) nextIdx = currentIdx <= 0 ? fields.length - 1 : currentIdx - 1;
-				else nextIdx = currentIdx >= fields.length - 1 ? 0 : currentIdx + 1;
-				const nextPath = fields[nextIdx]?.getAttribute("data-field-path");
-				if (nextPath) applyFocusState(parsePreviewFieldPath(nextPath));
-			};
-			window.addEventListener("keydown", handleKeyDown);
-			return () => window.removeEventListener("keydown", handleKeyDown);
-		};
-		t8 = [
-			focusState,
-			applyFocusState,
-			open
-		];
-		$[13] = applyFocusState;
-		$[14] = focusState;
-		$[15] = open;
-		$[16] = t7;
-		$[17] = t8;
-	} else {
-		t7 = $[16];
-		t8 = $[17];
-	}
-	React.useEffect(t7, t8);
-	let t9;
-	if ($[18] !== applyFocusState) {
-		t9 = (fieldPath, context) => {
-			applyFocusState(parsePreviewFieldPath(fieldPath, context));
-		};
-		$[18] = applyFocusState;
-		$[19] = t9;
-	} else t9 = $[19];
-	const handlePreviewFieldClick = t9;
-	let t10;
-	if ($[20] !== focusBlock) {
-		t10 = (blockId) => {
-			focusBlock(blockId);
-		};
-		$[20] = focusBlock;
-		$[21] = t10;
-	} else t10 = $[21];
-	const handlePreviewBlockClick = t10;
-	let t11;
-	if ($[22] !== requestBlockInsert) {
-		t11 = (message) => {
-			requestBlockInsert(message.position, message.referenceBlockId);
+	const applyFocusState = React.useCallback((state) => {
+		if (state.type === "field") focusField(state.fieldPath);
+		else if (state.type === "block") focusBlock(state.blockId, state.fieldPath);
+		else if (state.type === "relation") focusRelation(state.fieldPath, state.targetCollection);
+	}, [
+		focusBlock,
+		focusField,
+		focusRelation
+	]);
+	const handleExitPreview = React.useCallback(() => {
+		window.location.href = "/api/preview?disable=true";
+	}, []);
+	React.useEffect(() => {
+		if (!open) return;
+		if (!previewRef.current) return;
+		if (focusState.type === "field" || focusState.type === "relation") previewRef.current.sendFocusToPreview(focusState.fieldPath);
+		else if (focusState.type === "block") if (focusState.fieldPath) {
+			const fullPath = `content._values.${focusState.blockId}.${focusState.fieldPath}`;
+			previewRef.current.sendFocusToPreview(fullPath);
+		} else {
+			const fullPath = `content._values.${focusState.blockId}`;
+			previewRef.current.sendFocusToPreview(fullPath);
+		}
+	}, [
+		focusState,
+		previewRef,
+		open
+	]);
+	React.useEffect(() => {
+		if (!open) return;
+		const handleKeyDown = (e) => {
+			if (e.key !== "Tab") return;
+			const formScope = document.querySelector("[data-preview-form-scope]");
+			if (!formScope) return;
+			const fields = Array.from(formScope.querySelectorAll("[data-field-path]"));
+			if (fields.length === 0) return;
+			if (!formScope.contains(document.activeElement)) return;
+			e.preventDefault();
+			const currentPath = getFocusStatePath(focusState);
+			const currentIdx = currentPath ? fields.findIndex((el) => el.getAttribute("data-field-path") === currentPath) : -1;
+			let nextIdx;
+			if (e.shiftKey) nextIdx = currentIdx <= 0 ? fields.length - 1 : currentIdx - 1;
+			else nextIdx = currentIdx >= fields.length - 1 ? 0 : currentIdx + 1;
+			const nextPath = fields[nextIdx]?.getAttribute("data-field-path");
+			if (nextPath) applyFocusState(parsePreviewFieldPath(nextPath));
 		};
-		$[22] = requestBlockInsert;
-		$[23] = t11;
-	} else t11 = $[23];
-	const handlePreviewBlockInsertRequest = t11;
-	const t12 = open ? "bg-background fixed inset-0 z-50 flex flex-col" : "w-full";
-	let t13;
-	if ($[24] !== activeTab || $[25] !== isMobile || $[26] !== open || $[27] !== t) {
-		t13 = open && /* @__PURE__ */ jsxs("div", {
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [
+		focusState,
+		applyFocusState,
+		open
+	]);
+	const handlePreviewFieldClick = React.useCallback((fieldPath, context) => {
+		applyFocusState(parsePreviewFieldPath(fieldPath, context));
+	}, [applyFocusState]);
+	const handlePreviewBlockClick = React.useCallback((blockId) => {
+		focusBlock(blockId);
+	}, [focusBlock]);
+	const handlePreviewBlockInsertRequest = React.useCallback((message) => {
+		requestBlockInsert(message.position, message.referenceBlockId);
+	}, [requestBlockInsert]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: open ? "bg-background fixed inset-0 z-50 flex flex-col" : "w-full",
+		children: [open && /* @__PURE__ */ jsxs("div", {
 			className: "flex shrink-0 items-center justify-between border-b px-4 py-2",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
@@ -348,217 +236,104 @@ function LivePreviewContent(t0) {
 					})
 				})
 			]
-		});
-		$[24] = activeTab;
-		$[25] = isMobile;
-		$[26] = open;
-		$[27] = t;
-		$[28] = t13;
-	} else t13 = $[28];
-	const t14 = open && !isMobile ? containerRef : void 0;
-	const t15 = open ? isMobile ? "min-h-0 flex-1" : "flex min-h-0 flex-1" : "w-full";
-	let t16;
-	if ($[29] !== activeTab || $[30] !== isMobile || $[31] !== open) {
-		t16 = open ? isMobile ? cn("h-full overflow-y-auto p-6", activeTab !== "form" && "hidden") : "bg-background h-full overflow-y-auto border-r p-6" : "w-full";
-		$[29] = activeTab;
-		$[30] = isMobile;
-		$[31] = open;
-		$[32] = t16;
-	} else t16 = $[32];
-	let t17;
-	if ($[33] !== isMobile || $[34] !== open || $[35] !== previewPercent) {
-		t17 = open && !isMobile ? { width: `${100 - previewPercent}%` } : void 0;
-		$[33] = isMobile;
-		$[34] = open;
-		$[35] = previewPercent;
-		$[36] = t17;
-	} else t17 = $[36];
-	let t18;
-	if ($[37] !== children || $[38] !== t16 || $[39] !== t17) {
-		t18 = /* @__PURE__ */ jsx("div", {
-			"data-preview-form-scope": true,
-			className: t16,
-			style: t17,
-			children
-		});
-		$[37] = children;
-		$[38] = t16;
-		$[39] = t17;
-		$[40] = t18;
-	} else t18 = $[40];
-	let t19;
-	if ($[41] !== activeTab || $[42] !== handlePreviewBlockClick || $[43] !== handlePreviewBlockInsertRequest || $[44] !== handlePreviewFieldClick || $[45] !== isMobile || $[46] !== onFieldValueEdited || $[47] !== onPatchApplied || $[48] !== onResyncRequest || $[49] !== open || $[50] !== previewRef || $[51] !== previewUrl || $[52] !== t) {
-		t19 = open && isMobile && /* @__PURE__ */ jsx("div", {
-			className: activeTab === "preview" ? "h-full" : "hidden",
-			children: previewUrl ? /* @__PURE__ */ jsx(PreviewPane, {
-				ref: previewRef,
-				url: previewUrl,
-				onFieldClick: handlePreviewFieldClick,
-				onBlockClick: handlePreviewBlockClick,
-				onBlockInsertRequest: handlePreviewBlockInsertRequest,
-				onFieldValueEdited,
-				onPatchApplied,
-				onResyncRequest
-			}) : /* @__PURE__ */ jsxs("div", {
-				className: "flex h-full 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")
-				})]
-			})
-		});
-		$[41] = activeTab;
-		$[42] = handlePreviewBlockClick;
-		$[43] = handlePreviewBlockInsertRequest;
-		$[44] = handlePreviewFieldClick;
-		$[45] = isMobile;
-		$[46] = onFieldValueEdited;
-		$[47] = onPatchApplied;
-		$[48] = onResyncRequest;
-		$[49] = open;
-		$[50] = previewRef;
-		$[51] = previewUrl;
-		$[52] = t;
-		$[53] = t19;
-	} else t19 = $[53];
-	let t20;
-	if ($[54] !== handleMouseDown || $[55] !== handlePreviewBlockClick || $[56] !== handlePreviewBlockInsertRequest || $[57] !== handlePreviewFieldClick || $[58] !== isMobile || $[59] !== onFieldValueEdited || $[60] !== onPatchApplied || $[61] !== onResyncRequest || $[62] !== open || $[63] !== previewPercent || $[64] !== previewRef || $[65] !== previewUrl || $[66] !== t) {
-		t20 = open && !isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
-			type: "button",
-			"aria-label": "Resize preview pane",
-			onMouseDown: handleMouseDown,
-			onClick: _temp2,
-			className: "bg-border hover:bg-border-strong w-1 shrink-0 cursor-col-resize appearance-none border-0 p-0 transition-colors"
-		}), /* @__PURE__ */ jsx("div", {
-			className: "bg-muted min-w-0",
-			style: { width: `${previewPercent}%` },
-			children: previewUrl ? /* @__PURE__ */ jsx(PreviewPane, {
-				ref: previewRef,
-				url: previewUrl,
-				onFieldClick: handlePreviewFieldClick,
-				onBlockClick: handlePreviewBlockClick,
-				onBlockInsertRequest: handlePreviewBlockInsertRequest,
-				onFieldValueEdited,
-				onPatchApplied,
-				onResyncRequest
-			}) : /* @__PURE__ */ jsxs("div", {
-				className: "flex h-full 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")
-				})]
-			})
-		})] });
-		$[54] = handleMouseDown;
-		$[55] = handlePreviewBlockClick;
-		$[56] = handlePreviewBlockInsertRequest;
-		$[57] = handlePreviewFieldClick;
-		$[58] = isMobile;
-		$[59] = onFieldValueEdited;
-		$[60] = onPatchApplied;
-		$[61] = onResyncRequest;
-		$[62] = open;
-		$[63] = previewPercent;
-		$[64] = previewRef;
-		$[65] = previewUrl;
-		$[66] = t;
-		$[67] = t20;
-	} else t20 = $[67];
-	let t21;
-	if ($[68] !== t14 || $[69] !== t15 || $[70] !== t18 || $[71] !== t19 || $[72] !== t20) {
-		t21 = /* @__PURE__ */ jsxs("div", {
-			ref: t14,
-			className: t15,
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: open && !isMobile ? containerRef : void 0,
+			className: open ? isMobile ? "min-h-0 flex-1" : "flex min-h-0 flex-1" : "w-full",
 			children: [
-				t18,
-				t19,
-				t20
+				/* @__PURE__ */ jsx("div", {
+					"data-preview-form-scope": true,
+					className: open ? isMobile ? cn("h-full overflow-y-auto p-6", activeTab !== "form" && "hidden") : "bg-background h-full overflow-y-auto border-r p-6" : "w-full",
+					style: open && !isMobile ? { width: `${100 - previewPercent}%` } : void 0,
+					children
+				}),
+				open && isMobile && /* @__PURE__ */ jsx("div", {
+					className: activeTab === "preview" ? "h-full" : "hidden",
+					children: previewUrl ? /* @__PURE__ */ jsx(PreviewPane, {
+						ref: previewRef,
+						url: previewUrl,
+						onFieldClick: handlePreviewFieldClick,
+						onBlockClick: handlePreviewBlockClick,
+						onBlockInsertRequest: handlePreviewBlockInsertRequest,
+						onFieldValueEdited,
+						onPatchApplied,
+						onResyncRequest
+					}) : /* @__PURE__ */ jsxs("div", {
+						className: "flex h-full 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")
+						})]
+					})
+				}),
+				open && !isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Resize preview pane",
+					onMouseDown: handleMouseDown,
+					onClick: (e) => e.preventDefault(),
+					className: "bg-border hover:bg-border-strong w-1 shrink-0 cursor-col-resize appearance-none border-0 p-0 transition-colors"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "bg-muted min-w-0",
+					style: { width: `${previewPercent}%` },
+					children: previewUrl ? /* @__PURE__ */ jsx(PreviewPane, {
+						ref: previewRef,
+						url: previewUrl,
+						onFieldClick: handlePreviewFieldClick,
+						onBlockClick: handlePreviewBlockClick,
+						onBlockInsertRequest: handlePreviewBlockInsertRequest,
+						onFieldValueEdited,
+						onPatchApplied,
+						onResyncRequest
+					}) : /* @__PURE__ */ jsxs("div", {
+						className: "flex h-full 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")
+						})]
+					})
+				})] })
 			]
-		});
-		$[68] = t14;
-		$[69] = t15;
-		$[70] = t18;
-		$[71] = t19;
-		$[72] = t20;
-		$[73] = t21;
-	} else t21 = $[73];
-	let t22;
-	if ($[74] !== t12 || $[75] !== t13 || $[76] !== t21) {
-		t22 = /* @__PURE__ */ jsxs("div", {
-			className: t12,
-			children: [t13, t21]
-		});
-		$[74] = t12;
-		$[75] = t13;
-		$[76] = t21;
-		$[77] = t22;
-	} else t22 = $[77];
-	return t22;
-}
-function _temp2(e_0) {
-	return e_0.preventDefault();
-}
-function _temp() {
-	window.location.href = "/api/preview?disable=true";
+		})]
+	});
 }
-function LivePreviewMode(t0) {
-	const $ = c(11);
-	const { open, onClose, children, previewUrl, previewRef: previewRefProp, onFieldValueEdited, onPatchApplied, onResyncRequest, defaultSize, minSize } = t0;
+function LivePreviewMode({ open, onClose, children, previewUrl, previewRef: previewRefProp, onFieldValueEdited, onPatchApplied, onResyncRequest, defaultSize, minSize }) {
 	const fallbackPreviewRef = React.useRef(null);
 	const previewRef = previewRefProp ?? fallbackPreviewRef;
-	const handleFocusChange = _temp3;
-	let t1;
-	if ($[0] !== children || $[1] !== defaultSize || $[2] !== minSize || $[3] !== onClose || $[4] !== onFieldValueEdited || $[5] !== onPatchApplied || $[6] !== onResyncRequest || $[7] !== open || $[8] !== previewRef || $[9] !== previewUrl) {
-		t1 = /* @__PURE__ */ jsx(FocusProvider, {
-			onFocusChange: handleFocusChange,
-			children: /* @__PURE__ */ jsx(LivePreviewContent, {
-				open,
-				onClose,
-				previewUrl,
-				previewRef,
-				onFieldValueEdited,
-				onPatchApplied,
-				onResyncRequest,
-				defaultSize,
-				minSize,
-				children
-			})
-		});
-		$[0] = children;
-		$[1] = defaultSize;
-		$[2] = minSize;
-		$[3] = onClose;
-		$[4] = onFieldValueEdited;
-		$[5] = onPatchApplied;
-		$[6] = onResyncRequest;
-		$[7] = open;
-		$[8] = previewRef;
-		$[9] = previewUrl;
-		$[10] = t1;
-	} else t1 = $[10];
-	return t1;
-}
-function _temp3(state) {
-	const shouldFocusForm = !isPreviewIframeFocused();
-	if (state.type === "field" || state.type === "relation") scheduleScrollFieldIntoView(state.fieldPath, { focus: shouldFocusForm });
-	else if (state.type === "block") scheduleScrollFieldIntoView(state.fieldPath ? `content._values.${state.blockId}.${state.fieldPath}` : `content._values.${state.blockId}`, {
-		fallbackToBlock: true,
-		focus: shouldFocusForm
+	return /* @__PURE__ */ jsx(FocusProvider, {
+		onFocusChange: React.useCallback((state) => {
+			const shouldFocusForm = !isPreviewIframeFocused();
+			if (state.type === "field" || state.type === "relation") scheduleScrollFieldIntoView(state.fieldPath, { focus: shouldFocusForm });
+			else if (state.type === "block") scheduleScrollFieldIntoView(state.fieldPath ? `content._values.${state.blockId}.${state.fieldPath}` : `content._values.${state.blockId}`, {
+				fallbackToBlock: true,
+				focus: shouldFocusForm
+			});
+			else if (state.type === "block-insert") {
+				const targetBlockId = state.referenceBlockId ?? state.position.parentId;
+				if (!targetBlockId) return;
+				scheduleScrollFieldIntoView(`content._values.${targetBlockId}`, {
+					fallbackToBlock: true,
+					focus: shouldFocusForm
+				});
+			}
+		}, []),
+		children: /* @__PURE__ */ jsx(LivePreviewContent, {
+			open,
+			onClose,
+			previewUrl,
+			previewRef,
+			onFieldValueEdited,
+			onPatchApplied,
+			onResyncRequest,
+			defaultSize,
+			minSize,
+			children
+		})
 	});
-	else if (state.type === "block-insert") {
-		const targetBlockId = state.referenceBlockId ?? state.position.parentId;
-		if (!targetBlockId) return;
-		scheduleScrollFieldIntoView(`content._values.${targetBlockId}`, {
-			fallbackToBlock: true,
-			focus: shouldFocusForm
-		});
-	}
 }
 
 //#endregion