@questpie/admin 3.2.0 → 3.2.1

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

@@ -4,8 +4,8 @@ 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 { useIsMobile } from "../../hooks/use-media-query.mjs";
 import { PreviewPane } from "./preview-pane.mjs";
 import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
@@ -126,8 +126,8 @@ function useLivePreviewRenderTelemetry(t0) {
 	React.useEffect(t1);
 }
 function LivePreviewContent(t0) {
-	const $ = c(68);
-	const { open, onClose, children, previewUrl, previewRef, defaultSize: t1, minSize: t2 } = t0;
+	const $ = c(77);
+	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;
 	const { t } = useTranslation();
@@ -255,10 +255,19 @@ function LivePreviewContent(t0) {
 		$[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", {
+	let t12;
+	if ($[21] !== focusContext) {
+		t12 = (message) => {
+			focusContext.requestBlockInsert(message.position, message.referenceBlockId);
+		};
+		$[21] = focusContext;
+		$[22] = t12;
+	} else t12 = $[22];
+	const handlePreviewBlockInsertRequest = t12;
+	const t13 = open ? "bg-background fixed inset-0 z-50 flex flex-col" : "w-full";
+	let t14;
+	if ($[23] !== activeTab || $[24] !== isMobile || $[25] !== open || $[26] !== t) {
+		t14 = open && /* @__PURE__ */ jsxs("div", {
 			className: "flex shrink-0 items-center justify-between border-b px-4 py-2",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
@@ -288,9 +297,9 @@ function LivePreviewContent(t0) {
 						})]
 					})
 				}),
-				/* @__PURE__ */ jsxs("div", {
+				/* @__PURE__ */ jsx("div", {
 					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ jsxs(Button, {
+					children: /* @__PURE__ */ jsxs(Button, {
 						variant: "ghost",
 						size: "sm",
 						onClick: handleExitPreview,
@@ -303,68 +312,60 @@ function LivePreviewContent(t0) {
 							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];
+		$[23] = activeTab;
+		$[24] = isMobile;
+		$[25] = open;
+		$[26] = t;
+		$[27] = t14;
+	} else t14 = $[27];
+	const t15 = open && !isMobile ? containerRef : void 0;
+	const t16 = open ? isMobile ? "min-h-0 flex-1" : "flex min-h-0 flex-1" : "w-full";
 	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];
+	if ($[28] !== activeTab || $[29] !== isMobile || $[30] !== open) {
+		t17 = 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";
+		$[28] = activeTab;
+		$[29] = isMobile;
+		$[30] = open;
+		$[31] = t17;
+	} else t17 = $[31];
 	let t18;
-	if ($[35] !== children || $[36] !== t16 || $[37] !== t17) {
-		t18 = /* @__PURE__ */ jsx("div", {
+	if ($[32] !== isMobile || $[33] !== open || $[34] !== previewPercent) {
+		t18 = open && !isMobile ? { width: `${100 - previewPercent}%` } : void 0;
+		$[32] = isMobile;
+		$[33] = open;
+		$[34] = previewPercent;
+		$[35] = t18;
+	} else t18 = $[35];
+	let t19;
+	if ($[36] !== children || $[37] !== t17 || $[38] !== t18) {
+		t19 = /* @__PURE__ */ jsx("div", {
 			"data-preview-form-scope": true,
-			className: t16,
-			style: t17,
+			className: t17,
+			style: t18,
 			children
 		});
-		$[35] = children;
-		$[36] = t16;
+		$[36] = children;
 		$[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", {
+		$[39] = t19;
+	} else t19 = $[39];
+	let t20;
+	if ($[40] !== activeTab || $[41] !== handlePreviewBlockClick || $[42] !== handlePreviewBlockInsertRequest || $[43] !== handlePreviewFieldClick || $[44] !== isMobile || $[45] !== onFieldValueEdited || $[46] !== onPatchApplied || $[47] !== onResyncRequest || $[48] !== open || $[49] !== previewRef || $[50] !== previewUrl || $[51] !== t) {
+		t20 = open && isMobile && /* @__PURE__ */ jsx("div", {
 			className: activeTab === "preview" ? "h-full" : "hidden",
 			children: previewUrl ? /* @__PURE__ */ jsx(PreviewPane, {
 				ref: previewRef,
 				url: previewUrl,
 				onFieldClick: handlePreviewFieldClick,
-				onBlockClick: handlePreviewBlockClick
+				onBlockClick: handlePreviewBlockClick,
+				onBlockInsertRequest: handlePreviewBlockInsertRequest,
+				onFieldValueEdited,
+				onPatchApplied,
+				onResyncRequest
 			}) : /* @__PURE__ */ jsxs("div", {
 				className: "flex h-full items-center justify-center",
 				children: [/* @__PURE__ */ jsx(Icon, {
@@ -376,19 +377,23 @@ function LivePreviewContent(t0) {
 				})]
 			})
 		});
-		$[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", {
+		$[40] = activeTab;
+		$[41] = handlePreviewBlockClick;
+		$[42] = handlePreviewBlockInsertRequest;
+		$[43] = handlePreviewFieldClick;
+		$[44] = isMobile;
+		$[45] = onFieldValueEdited;
+		$[46] = onPatchApplied;
+		$[47] = onResyncRequest;
+		$[48] = open;
+		$[49] = previewRef;
+		$[50] = previewUrl;
+		$[51] = t;
+		$[52] = t20;
+	} else t20 = $[52];
+	let t21;
+	if ($[53] !== handleMouseDown || $[54] !== handlePreviewBlockClick || $[55] !== handlePreviewBlockInsertRequest || $[56] !== handlePreviewFieldClick || $[57] !== isMobile || $[58] !== onFieldValueEdited || $[59] !== onPatchApplied || $[60] !== onResyncRequest || $[61] !== open || $[62] !== previewPercent || $[63] !== previewRef || $[64] !== previewUrl || $[65] !== t) {
+		t21 = open && !isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
 			type: "button",
 			"aria-label": "Resize preview pane",
 			onMouseDown: handleMouseDown,
@@ -401,7 +406,11 @@ function LivePreviewContent(t0) {
 				ref: previewRef,
 				url: previewUrl,
 				onFieldClick: handlePreviewFieldClick,
-				onBlockClick: handlePreviewBlockClick
+				onBlockClick: handlePreviewBlockClick,
+				onBlockInsertRequest: handlePreviewBlockInsertRequest,
+				onFieldValueEdited,
+				onPatchApplied,
+				onResyncRequest
 			}) : /* @__PURE__ */ jsxs("div", {
 				className: "flex h-full items-center justify-center",
 				children: [/* @__PURE__ */ jsx(Icon, {
@@ -413,47 +422,51 @@ function LivePreviewContent(t0) {
 				})]
 			})
 		})] });
-		$[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,
+		$[53] = handleMouseDown;
+		$[54] = handlePreviewBlockClick;
+		$[55] = handlePreviewBlockInsertRequest;
+		$[56] = handlePreviewFieldClick;
+		$[57] = isMobile;
+		$[58] = onFieldValueEdited;
+		$[59] = onPatchApplied;
+		$[60] = onResyncRequest;
+		$[61] = open;
+		$[62] = previewPercent;
+		$[63] = previewRef;
+		$[64] = previewUrl;
+		$[65] = t;
+		$[66] = t21;
+	} else t21 = $[66];
+	let t22;
+	if ($[67] !== t15 || $[68] !== t16 || $[69] !== t19 || $[70] !== t20 || $[71] !== t21) {
+		t22 = /* @__PURE__ */ jsxs("div", {
+			ref: t15,
+			className: t16,
 			children: [
-				t18,
 				t19,
-				t20
+				t20,
+				t21
 			]
 		});
-		$[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]
+		$[67] = t15;
+		$[68] = t16;
+		$[69] = t19;
+		$[70] = t20;
+		$[71] = t21;
+		$[72] = t22;
+	} else t22 = $[72];
+	let t23;
+	if ($[73] !== t13 || $[74] !== t14 || $[75] !== t22) {
+		t23 = /* @__PURE__ */ jsxs("div", {
+			className: t13,
+			children: [t14, t22]
 		});
-		$[64] = t12;
-		$[65] = t13;
-		$[66] = t21;
-		$[67] = t22;
-	} else t22 = $[67];
-	return t22;
+		$[73] = t13;
+		$[74] = t14;
+		$[75] = t22;
+		$[76] = t23;
+	} else t23 = $[76];
+	return t23;
 }
 function _temp2(e_0) {
 	return e_0.preventDefault();
@@ -462,13 +475,13 @@ 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 $ = c(11);
+	const { open, onClose, children, previewUrl, previewRef: previewRefProp, onFieldValueEdited, onPatchApplied, onResyncRequest, 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) {
+	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, {
@@ -476,6 +489,9 @@ function LivePreviewMode(t0) {
 				onClose,
 				previewUrl,
 				previewRef,
+				onFieldValueEdited,
+				onPatchApplied,
+				onResyncRequest,
 				defaultSize,
 				minSize,
 				children
@@ -485,11 +501,14 @@ function LivePreviewMode(t0) {
 		$[1] = defaultSize;
 		$[2] = minSize;
 		$[3] = onClose;
-		$[4] = open;
-		$[5] = previewRef;
-		$[6] = previewUrl;
-		$[7] = t1;
-	} else t1 = $[7];
+		$[4] = onFieldValueEdited;
+		$[5] = onPatchApplied;
+		$[6] = onResyncRequest;
+		$[7] = open;
+		$[8] = previewRef;
+		$[9] = previewUrl;
+		$[10] = t1;
+	} else t1 = $[10];
 	return t1;
 }
 function _temp3(state) {
@@ -497,6 +516,13 @@ function _temp3(state) {
 	else if (state.type === "block") setTimeout(() => {
 		scrollFieldIntoView(state.fieldPath ? `content._values.${state.blockId}.${state.fieldPath}` : `content._values.${state.blockId}`);
 	}, 150);
+	else if (state.type === "block-insert") {
+		const targetBlockId = state.referenceBlockId ?? state.position.parentId;
+		if (!targetBlockId) return;
+		setTimeout(() => {
+			scrollFieldIntoView(`content._values.${targetBlockId}`);
+		}, 150);
+	}
 }
 
 //#endregion