@questpie/admin 1.1.1 → 3.0.0

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

@@ -0,0 +1,503 @@
+"use client";
+
+import { useTranslation } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { Button } from "../ui/button.mjs";
+import { Tabs, TabsList, TabsTrigger } from "../ui/tabs.mjs";
+import { useIsMobile } from "../../hooks/use-media-query.mjs";
+import { FocusProvider, parsePreviewFieldPath, scrollFieldIntoView, useFocus } from "../../contexts/focus-context.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";
+
+//#region src/client/components/preview/live-preview-mode.tsx
+/**
+* LivePreviewMode Component
+*
+* Fullscreen overlay for live preview editing.
+* Left side: Form panel (inline, not portal)
+* Right side: Preview iframe
+* Mobile: Tabs to switch between form and preview
+*/
+const DEV_TELEMETRY = process.env.NODE_ENV === "development";
+function useResizablePane(t0, t1, t2) {
+	const $ = c(9);
+	const defaultSize = t0 === void 0 ? 50 : t0;
+	const minSize = t1 === void 0 ? 30 : t1;
+	const enabled = t2 === void 0 ? true : t2;
+	const [previewPercent, setPreviewPercent] = React.useState(defaultSize);
+	const isDragging = React.useRef(false);
+	const containerRef = React.useRef(null);
+	let t3;
+	if ($[0] !== enabled) {
+		t3 = (e) => {
+			if (!enabled) return;
+			e.preventDefault();
+			isDragging.current = true;
+			document.body.style.cursor = "col-resize";
+			document.body.style.userSelect = "none";
+		};
+		$[0] = enabled;
+		$[1] = t3;
+	} else t3 = $[1];
+	const handleMouseDown = t3;
+	let t4;
+	let t5;
+	if ($[2] !== enabled || $[3] !== minSize) {
+		t4 = () => {
+			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;
+					document.body.style.cursor = "";
+					document.body.style.userSelect = "";
+				}
+			};
+			window.addEventListener("mousemove", handleMouseMove);
+			window.addEventListener("mouseup", handleMouseUp);
+			return () => {
+				window.removeEventListener("mousemove", handleMouseMove);
+				window.removeEventListener("mouseup", handleMouseUp);
+			};
+		};
+		t5 = [enabled, minSize];
+		$[2] = enabled;
+		$[3] = minSize;
+		$[4] = t4;
+		$[5] = t5;
+	} else {
+		t4 = $[4];
+		t5 = $[5];
+	}
+	React.useEffect(t4, t5);
+	let t6;
+	if ($[6] !== handleMouseDown || $[7] !== previewPercent) {
+		t6 = {
+			previewPercent,
+			containerRef,
+			handleMouseDown
+		};
+		$[6] = handleMouseDown;
+		$[7] = previewPercent;
+		$[8] = t6;
+	} else t6 = $[8];
+	return t6;
+}
+function useLivePreviewRenderTelemetry(t0) {
+	const $ = c(4);
+	const { open, isMobile, activeTab } = t0;
+	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);
+}
+function LivePreviewContent(t0) {
+	const $ = c(68);
+	const { open, onClose, children, previewUrl, previewRef, defaultSize: t1, minSize: t2 } = t0;
+	const defaultSize = t1 === void 0 ? 50 : t1;
+	const minSize = t2 === void 0 ? 30 : t2;
+	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);
+	const { previewPercent, containerRef, handleMouseDown } = useResizablePane(defaultSize, minSize, open && !isMobile);
+	const focusContext = useFocus();
+	const focusState = focusContext.state;
+	const handleExitPreview = _temp;
+	let t4;
+	let t5;
+	if ($[4] !== open) {
+		t4 = () => {
+			if (!open) setActiveTab("form");
+		};
+		t5 = [open];
+		$[4] = open;
+		$[5] = t4;
+		$[6] = t5;
+	} else {
+		t4 = $[5];
+		t5 = $[6];
+	}
+	React.useEffect(t4, t5);
+	let t6;
+	let t7;
+	if ($[7] !== focusState || $[8] !== open || $[9] !== previewRef) {
+		t6 = () => {
+			if (!open) return;
+			if (!previewRef.current) return;
+			if (focusState.type === "field") 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);
+			}
+		};
+		t7 = [
+			focusState,
+			previewRef,
+			open
+		];
+		$[7] = focusState;
+		$[8] = open;
+		$[9] = previewRef;
+		$[10] = t6;
+		$[11] = t7;
+	} else {
+		t6 = $[10];
+		t7 = $[11];
+	}
+	React.useEffect(t6, t7);
+	let t8;
+	let t9;
+	if ($[12] !== focusContext || $[13] !== focusState || $[14] !== open) {
+		t8 = () => {
+			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 = focusState.type === "field" ? focusState.fieldPath : null;
+				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) focusContext.focusField(nextPath);
+			};
+			window.addEventListener("keydown", handleKeyDown);
+			return () => window.removeEventListener("keydown", handleKeyDown);
+		};
+		t9 = [
+			focusState,
+			focusContext,
+			open
+		];
+		$[12] = focusContext;
+		$[13] = focusState;
+		$[14] = open;
+		$[15] = t8;
+		$[16] = t9;
+	} else {
+		t8 = $[15];
+		t9 = $[16];
+	}
+	React.useEffect(t8, t9);
+	let t10;
+	if ($[17] !== focusContext) {
+		t10 = (fieldPath, context) => {
+			const state = parsePreviewFieldPath(fieldPath, context);
+			if (state.type === "field") focusContext.focusField(state.fieldPath);
+			else if (state.type === "block") focusContext.focusBlock(state.blockId, state.fieldPath);
+			else if (state.type === "relation") focusContext.focusRelation(state.fieldPath, state.targetCollection);
+		};
+		$[17] = focusContext;
+		$[18] = t10;
+	} else t10 = $[18];
+	const handlePreviewFieldClick = t10;
+	let t11;
+	if ($[19] !== focusContext) {
+		t11 = (blockId) => {
+			focusContext.focusBlock(blockId);
+		};
+		$[19] = focusContext;
+		$[20] = t11;
+	} else t11 = $[20];
+	const handlePreviewBlockClick = t11;
+	const t12 = open ? "bg-background fixed inset-0 z-50 flex flex-col" : "w-full";
+	let t13;
+	if ($[21] !== activeTab || $[22] !== isMobile || $[23] !== onClose || $[24] !== open || $[25] !== t) {
+		t13 = open && /* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center justify-between border-b px-4 py-2",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:eye",
+						className: "text-muted-foreground h-4 w-4"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: t("preview.livePreview")
+					})]
+				}),
+				isMobile && /* @__PURE__ */ jsx(Tabs, {
+					value: activeTab,
+					onValueChange: (v) => setActiveTab(v),
+					className: "mx-4",
+					children: /* @__PURE__ */ jsxs(TabsList, {
+						className: "h-8",
+						children: [/* @__PURE__ */ jsx(TabsTrigger, {
+							value: "form",
+							className: "px-3 text-xs",
+							children: t("common.form")
+						}), /* @__PURE__ */ jsx(TabsTrigger, {
+							value: "preview",
+							className: "px-3 text-xs",
+							children: t("preview.title")
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: handleExitPreview,
+						className: "gap-1.5",
+						title: t("preview.exitTooltip"),
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:sign-out",
+							className: "h-4 w-4"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "hidden sm:inline",
+							children: t("preview.exitPreview")
+						})]
+					}), /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "icon",
+						onClick: onClose,
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:x",
+							className: "h-4 w-4"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: t("common.close")
+						})]
+					})]
+				})
+			]
+		});
+		$[21] = activeTab;
+		$[22] = isMobile;
+		$[23] = onClose;
+		$[24] = open;
+		$[25] = t;
+		$[26] = t13;
+	} else t13 = $[26];
+	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 ($[27] !== activeTab || $[28] !== isMobile || $[29] !== 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";
+		$[27] = activeTab;
+		$[28] = isMobile;
+		$[29] = open;
+		$[30] = t16;
+	} else t16 = $[30];
+	let t17;
+	if ($[31] !== isMobile || $[32] !== open || $[33] !== previewPercent) {
+		t17 = open && !isMobile ? { width: `${100 - previewPercent}%` } : void 0;
+		$[31] = isMobile;
+		$[32] = open;
+		$[33] = previewPercent;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] !== children || $[36] !== t16 || $[37] !== t17) {
+		t18 = /* @__PURE__ */ jsx("div", {
+			"data-preview-form-scope": true,
+			className: t16,
+			style: t17,
+			children
+		});
+		$[35] = children;
+		$[36] = t16;
+		$[37] = t17;
+		$[38] = t18;
+	} else t18 = $[38];
+	let t19;
+	if ($[39] !== activeTab || $[40] !== handlePreviewBlockClick || $[41] !== handlePreviewFieldClick || $[42] !== isMobile || $[43] !== open || $[44] !== previewRef || $[45] !== previewUrl || $[46] !== 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
+			}) : /* @__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")
+				})]
+			})
+		});
+		$[39] = activeTab;
+		$[40] = handlePreviewBlockClick;
+		$[41] = handlePreviewFieldClick;
+		$[42] = isMobile;
+		$[43] = open;
+		$[44] = previewRef;
+		$[45] = previewUrl;
+		$[46] = t;
+		$[47] = t19;
+	} else t19 = $[47];
+	let t20;
+	if ($[48] !== handleMouseDown || $[49] !== handlePreviewBlockClick || $[50] !== handlePreviewFieldClick || $[51] !== isMobile || $[52] !== open || $[53] !== previewPercent || $[54] !== previewRef || $[55] !== previewUrl || $[56] !== 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-primary/40 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
+			}) : /* @__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")
+				})]
+			})
+		})] });
+		$[48] = handleMouseDown;
+		$[49] = handlePreviewBlockClick;
+		$[50] = handlePreviewFieldClick;
+		$[51] = isMobile;
+		$[52] = open;
+		$[53] = previewPercent;
+		$[54] = previewRef;
+		$[55] = previewUrl;
+		$[56] = t;
+		$[57] = t20;
+	} else t20 = $[57];
+	let t21;
+	if ($[58] !== t14 || $[59] !== t15 || $[60] !== t18 || $[61] !== t19 || $[62] !== t20) {
+		t21 = /* @__PURE__ */ jsxs("div", {
+			ref: t14,
+			className: t15,
+			children: [
+				t18,
+				t19,
+				t20
+			]
+		});
+		$[58] = t14;
+		$[59] = t15;
+		$[60] = t18;
+		$[61] = t19;
+		$[62] = t20;
+		$[63] = t21;
+	} else t21 = $[63];
+	let t22;
+	if ($[64] !== t12 || $[65] !== t13 || $[66] !== t21) {
+		t22 = /* @__PURE__ */ jsxs("div", {
+			className: t12,
+			children: [t13, t21]
+		});
+		$[64] = t12;
+		$[65] = t13;
+		$[66] = t21;
+		$[67] = t22;
+	} else t22 = $[67];
+	return t22;
+}
+function _temp2(e_0) {
+	return e_0.preventDefault();
+}
+function _temp() {
+	window.location.href = "/api/preview?disable=true";
+}
+function LivePreviewMode(t0) {
+	const $ = c(8);
+	const { open, onClose, children, previewUrl, previewRef: previewRefProp, defaultSize, minSize } = t0;
+	const fallbackPreviewRef = React.useRef(null);
+	const previewRef = previewRefProp ?? fallbackPreviewRef;
+	const handleFocusChange = _temp3;
+	let t1;
+	if ($[0] !== children || $[1] !== defaultSize || $[2] !== minSize || $[3] !== onClose || $[4] !== open || $[5] !== previewRef || $[6] !== previewUrl) {
+		t1 = /* @__PURE__ */ jsx(FocusProvider, {
+			onFocusChange: handleFocusChange,
+			children: /* @__PURE__ */ jsx(LivePreviewContent, {
+				open,
+				onClose,
+				previewUrl,
+				previewRef,
+				defaultSize,
+				minSize,
+				children
+			})
+		});
+		$[0] = children;
+		$[1] = defaultSize;
+		$[2] = minSize;
+		$[3] = onClose;
+		$[4] = open;
+		$[5] = previewRef;
+		$[6] = previewUrl;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+}
+function _temp3(state) {
+	if (state.type === "field") scrollFieldIntoView(state.fieldPath);
+	else if (state.type === "block") setTimeout(() => {
+		scrollFieldIntoView(state.fieldPath ? `content._values.${state.blockId}.${state.fieldPath}` : `content._values.${state.blockId}`);
+	}, 150);
+}
+
+//#endregion
+export { LivePreviewMode };