@questpie/admin 3.2.3 → 3.2.4

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

@@ -27,8 +27,12 @@ function getFocusStatePath(state) {
 	if (state.type === "block") return state.fieldPath ? `content._values.${state.blockId}.${state.fieldPath}` : `content._values.${state.blockId}`;
 	return null;
 }
+function isPreviewIframeFocused() {
+	const activeElement = document.activeElement;
+	return activeElement instanceof HTMLIFrameElement || activeElement?.tagName === "IFRAME";
+}
 function useResizablePane(t0, t1, t2) {
-	const $ = c(9);
+	const $ = c(11);
 	const defaultSize = t0 === void 0 ? 50 : t0;
 	const minSize = t1 === void 0 ? 30 : t1;
 	const enabled = t2 === void 0 ? true : t2;
@@ -36,22 +40,45 @@ function useResizablePane(t0, t1, t2) {
 	const isDragging = React.useRef(false);
 	const containerRef = React.useRef(null);
 	let t3;
-	if ($[0] !== enabled) {
-		t3 = (e) => {
+	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);
+		};
+		$[1] = t4;
+	} else t4 = $[1];
+	const restoreBodyStyle = t4;
+	let t5;
+	if ($[2] !== enabled) {
+		t5 = (e) => {
 			if (!enabled) return;
 			e.preventDefault();
 			isDragging.current = true;
-			document.body.style.cursor = "col-resize";
-			document.body.style.userSelect = "none";
+			previousBodyStyleRef.current = {
+				cursor: document.body.style.cursor,
+				userSelect: document.body.style.userSelect
+			};
+			Object.assign(document.body.style, {
+				cursor: "col-resize",
+				userSelect: "none"
+			});
 		};
-		$[0] = enabled;
-		$[1] = t3;
-	} else t3 = $[1];
-	const handleMouseDown = t3;
-	let t4;
-	let t5;
-	if ($[2] !== enabled || $[3] !== minSize) {
-		t4 = () => {
+		$[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;
@@ -62,8 +89,7 @@ function useResizablePane(t0, t1, t2) {
 			const handleMouseUp = () => {
 				if (isDragging.current) {
 					isDragging.current = false;
-					document.body.style.cursor = "";
-					document.body.style.userSelect = "";
+					restoreBodyStyle();
 				}
 			};
 			window.addEventListener("mousemove", handleMouseMove);
@@ -71,30 +97,38 @@ function useResizablePane(t0, t1, t2) {
 			return () => {
 				window.removeEventListener("mousemove", handleMouseMove);
 				window.removeEventListener("mouseup", handleMouseUp);
+				if (isDragging.current) {
+					isDragging.current = false;
+					restoreBodyStyle();
+				}
 			};
 		};
-		t5 = [enabled, minSize];
-		$[2] = enabled;
-		$[3] = minSize;
-		$[4] = t4;
-		$[5] = t5;
+		t7 = [
+			enabled,
+			minSize,
+			restoreBodyStyle
+		];
+		$[4] = enabled;
+		$[5] = minSize;
+		$[6] = t6;
+		$[7] = t7;
 	} else {
-		t4 = $[4];
-		t5 = $[5];
+		t6 = $[6];
+		t7 = $[7];
 	}
-	React.useEffect(t4, t5);
-	let t6;
-	if ($[6] !== handleMouseDown || $[7] !== previewPercent) {
-		t6 = {
+	React.useEffect(t6, t7);
+	let t8;
+	if ($[8] !== handleMouseDown || $[9] !== previewPercent) {
+		t8 = {
 			previewPercent,
 			containerRef,
 			handleMouseDown
 		};
-		$[6] = handleMouseDown;
-		$[7] = previewPercent;
-		$[8] = t6;
-	} else t6 = $[8];
-	return t6;
+		$[8] = handleMouseDown;
+		$[9] = previewPercent;
+		$[10] = t8;
+	} else t8 = $[10];
+	return t8;
 }
 function useLivePreviewRenderTelemetry(t0) {
 	const $ = c(4);
@@ -131,7 +165,7 @@ function useLivePreviewRenderTelemetry(t0) {
 	React.useEffect(t1);
 }
 function LivePreviewContent(t0) {
-	const $ = c(79);
+	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;
@@ -152,39 +186,25 @@ function LivePreviewContent(t0) {
 	} else t3 = $[3];
 	useLivePreviewRenderTelemetry(t3);
 	const { previewPercent, containerRef, handleMouseDown } = useResizablePane(defaultSize, minSize, open && !isMobile);
-	const focusContext = useFocus();
-	const focusState = focusContext.state;
+	const { state: focusState, focusField, focusBlock, focusRelation, requestBlockInsert } = useFocus();
 	let t4;
-	if ($[4] !== focusContext) {
+	if ($[4] !== focusBlock || $[5] !== focusField || $[6] !== focusRelation) {
 		t4 = (state) => {
-			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);
+			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] = focusContext;
-		$[5] = t4;
-	} else t4 = $[5];
+		$[4] = focusBlock;
+		$[5] = focusField;
+		$[6] = focusRelation;
+		$[7] = t4;
+	} else t4 = $[7];
 	const applyFocusState = t4;
 	const handleExitPreview = _temp;
 	let t5;
 	let t6;
-	if ($[6] !== open) {
+	if ($[8] !== focusState || $[9] !== open || $[10] !== previewRef) {
 		t5 = () => {
-			if (!open) setActiveTab("form");
-		};
-		t6 = [open];
-		$[6] = open;
-		$[7] = t5;
-		$[8] = t6;
-	} else {
-		t5 = $[7];
-		t6 = $[8];
-	}
-	React.useEffect(t5, t6);
-	let t7;
-	let t8;
-	if ($[9] !== focusState || $[10] !== open || $[11] !== previewRef) {
-		t7 = () => {
 			if (!open) return;
 			if (!previewRef.current) return;
 			if (focusState.type === "field" || focusState.type === "relation") previewRef.current.sendFocusToPreview(focusState.fieldPath);
@@ -196,25 +216,25 @@ function LivePreviewContent(t0) {
 				previewRef.current.sendFocusToPreview(fullPath_0);
 			}
 		};
-		t8 = [
+		t6 = [
 			focusState,
 			previewRef,
 			open
 		];
-		$[9] = focusState;
-		$[10] = open;
-		$[11] = previewRef;
-		$[12] = t7;
-		$[13] = t8;
+		$[8] = focusState;
+		$[9] = open;
+		$[10] = previewRef;
+		$[11] = t5;
+		$[12] = t6;
 	} else {
-		t7 = $[12];
-		t8 = $[13];
+		t5 = $[11];
+		t6 = $[12];
 	}
-	React.useEffect(t7, t8);
-	let t10;
-	let t9;
-	if ($[14] !== applyFocusState || $[15] !== focusState || $[16] !== open) {
-		t9 = () => {
+	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;
@@ -235,52 +255,52 @@ function LivePreviewContent(t0) {
 			window.addEventListener("keydown", handleKeyDown);
 			return () => window.removeEventListener("keydown", handleKeyDown);
 		};
-		t10 = [
+		t8 = [
 			focusState,
 			applyFocusState,
 			open
 		];
-		$[14] = applyFocusState;
-		$[15] = focusState;
-		$[16] = open;
-		$[17] = t10;
-		$[18] = t9;
+		$[13] = applyFocusState;
+		$[14] = focusState;
+		$[15] = open;
+		$[16] = t7;
+		$[17] = t8;
 	} else {
-		t10 = $[17];
-		t9 = $[18];
+		t7 = $[16];
+		t8 = $[17];
 	}
-	React.useEffect(t9, t10);
-	let t11;
-	if ($[19] !== applyFocusState) {
-		t11 = (fieldPath, context) => {
+	React.useEffect(t7, t8);
+	let t9;
+	if ($[18] !== applyFocusState) {
+		t9 = (fieldPath, context) => {
 			applyFocusState(parsePreviewFieldPath(fieldPath, context));
 		};
-		$[19] = applyFocusState;
-		$[20] = t11;
-	} else t11 = $[20];
-	const handlePreviewFieldClick = t11;
-	let t12;
-	if ($[21] !== focusContext) {
-		t12 = (blockId) => {
-			focusContext.focusBlock(blockId);
+		$[18] = applyFocusState;
+		$[19] = t9;
+	} else t9 = $[19];
+	const handlePreviewFieldClick = t9;
+	let t10;
+	if ($[20] !== focusBlock) {
+		t10 = (blockId) => {
+			focusBlock(blockId);
 		};
-		$[21] = focusContext;
-		$[22] = t12;
-	} else t12 = $[22];
-	const handlePreviewBlockClick = t12;
-	let t13;
-	if ($[23] !== focusContext) {
-		t13 = (message) => {
-			focusContext.requestBlockInsert(message.position, message.referenceBlockId);
+		$[20] = focusBlock;
+		$[21] = t10;
+	} else t10 = $[21];
+	const handlePreviewBlockClick = t10;
+	let t11;
+	if ($[22] !== requestBlockInsert) {
+		t11 = (message) => {
+			requestBlockInsert(message.position, message.referenceBlockId);
 		};
-		$[23] = focusContext;
-		$[24] = t13;
-	} else t13 = $[24];
-	const handlePreviewBlockInsertRequest = t13;
-	const t14 = open ? "bg-background fixed inset-0 z-50 flex flex-col" : "w-full";
-	let t15;
-	if ($[25] !== activeTab || $[26] !== isMobile || $[27] !== open || $[28] !== t) {
-		t15 = open && /* @__PURE__ */ jsxs("div", {
+		$[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", {
 			className: "flex shrink-0 items-center justify-between border-b px-4 py-2",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
@@ -329,46 +349,46 @@ function LivePreviewContent(t0) {
 				})
 			]
 		});
-		$[25] = activeTab;
-		$[26] = isMobile;
-		$[27] = open;
-		$[28] = t;
-		$[29] = t15;
-	} else t15 = $[29];
-	const t16 = open && !isMobile ? containerRef : void 0;
-	const t17 = open ? isMobile ? "min-h-0 flex-1" : "flex min-h-0 flex-1" : "w-full";
+		$[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 ($[30] !== activeTab || $[31] !== isMobile || $[32] !== open) {
-		t18 = 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";
-		$[30] = activeTab;
-		$[31] = isMobile;
-		$[32] = open;
-		$[33] = t18;
-	} else t18 = $[33];
-	let t19;
-	if ($[34] !== isMobile || $[35] !== open || $[36] !== previewPercent) {
-		t19 = open && !isMobile ? { width: `${100 - previewPercent}%` } : void 0;
-		$[34] = isMobile;
-		$[35] = open;
-		$[36] = previewPercent;
-		$[37] = t19;
-	} else t19 = $[37];
-	let t20;
-	if ($[38] !== children || $[39] !== t18 || $[40] !== t19) {
-		t20 = /* @__PURE__ */ jsx("div", {
+	if ($[37] !== children || $[38] !== t16 || $[39] !== t17) {
+		t18 = /* @__PURE__ */ jsx("div", {
 			"data-preview-form-scope": true,
-			className: t18,
-			style: t19,
+			className: t16,
+			style: t17,
 			children
 		});
-		$[38] = children;
-		$[39] = t18;
-		$[40] = t19;
-		$[41] = t20;
-	} else t20 = $[41];
-	let t21;
-	if ($[42] !== activeTab || $[43] !== handlePreviewBlockClick || $[44] !== handlePreviewBlockInsertRequest || $[45] !== handlePreviewFieldClick || $[46] !== isMobile || $[47] !== onFieldValueEdited || $[48] !== onPatchApplied || $[49] !== onResyncRequest || $[50] !== open || $[51] !== previewRef || $[52] !== previewUrl || $[53] !== t) {
-		t21 = open && isMobile && /* @__PURE__ */ jsx("div", {
+		$[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,
@@ -390,23 +410,23 @@ function LivePreviewContent(t0) {
 				})]
 			})
 		});
-		$[42] = activeTab;
-		$[43] = handlePreviewBlockClick;
-		$[44] = handlePreviewBlockInsertRequest;
-		$[45] = handlePreviewFieldClick;
-		$[46] = isMobile;
-		$[47] = onFieldValueEdited;
-		$[48] = onPatchApplied;
-		$[49] = onResyncRequest;
-		$[50] = open;
-		$[51] = previewRef;
-		$[52] = previewUrl;
-		$[53] = t;
-		$[54] = t21;
-	} else t21 = $[54];
-	let t22;
-	if ($[55] !== handleMouseDown || $[56] !== handlePreviewBlockClick || $[57] !== handlePreviewBlockInsertRequest || $[58] !== handlePreviewFieldClick || $[59] !== isMobile || $[60] !== onFieldValueEdited || $[61] !== onPatchApplied || $[62] !== onResyncRequest || $[63] !== open || $[64] !== previewPercent || $[65] !== previewRef || $[66] !== previewUrl || $[67] !== t) {
-		t22 = open && !isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+		$[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,
@@ -435,51 +455,51 @@ function LivePreviewContent(t0) {
 				})]
 			})
 		})] });
-		$[55] = handleMouseDown;
-		$[56] = handlePreviewBlockClick;
-		$[57] = handlePreviewBlockInsertRequest;
-		$[58] = handlePreviewFieldClick;
-		$[59] = isMobile;
-		$[60] = onFieldValueEdited;
-		$[61] = onPatchApplied;
-		$[62] = onResyncRequest;
-		$[63] = open;
-		$[64] = previewPercent;
-		$[65] = previewRef;
-		$[66] = previewUrl;
-		$[67] = t;
-		$[68] = t22;
-	} else t22 = $[68];
-	let t23;
-	if ($[69] !== t16 || $[70] !== t17 || $[71] !== t20 || $[72] !== t21 || $[73] !== t22) {
-		t23 = /* @__PURE__ */ jsxs("div", {
-			ref: t16,
-			className: t17,
+		$[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,
 			children: [
-				t20,
-				t21,
-				t22
+				t18,
+				t19,
+				t20
 			]
 		});
-		$[69] = t16;
-		$[70] = t17;
-		$[71] = t20;
-		$[72] = t21;
-		$[73] = t22;
-		$[74] = t23;
-	} else t23 = $[74];
-	let t24;
-	if ($[75] !== t14 || $[76] !== t15 || $[77] !== t23) {
-		t24 = /* @__PURE__ */ jsxs("div", {
-			className: t14,
-			children: [t15, t23]
+		$[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]
 		});
-		$[75] = t14;
-		$[76] = t15;
-		$[77] = t23;
-		$[78] = t24;
-	} else t24 = $[78];
-	return t24;
+		$[74] = t12;
+		$[75] = t13;
+		$[76] = t21;
+		$[77] = t22;
+	} else t22 = $[77];
+	return t22;
 }
 function _temp2(e_0) {
 	return e_0.preventDefault();
@@ -525,12 +545,19 @@ function LivePreviewMode(t0) {
 	return t1;
 }
 function _temp3(state) {
-	if (state.type === "field" || state.type === "relation") scheduleScrollFieldIntoView(state.fieldPath);
-	else if (state.type === "block") scheduleScrollFieldIntoView(state.fieldPath ? `content._values.${state.blockId}.${state.fieldPath}` : `content._values.${state.blockId}`, { fallbackToBlock: true });
+	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 });
+		scheduleScrollFieldIntoView(`content._values.${targetBlockId}`, {
+			fallbackToBlock: true,
+			focus: shouldFocusForm
+		});
 	}
 }
 

package/dist/client/components/primitives/asset-preview.mjs

@@ -411,7 +411,7 @@ function AssetPreview(t0) {
 		} else t16$1 = $[71];
 		let t17$1;
 		if ($[72] !== size) {
-			t17$1 = size && /* @__PURE__ */ jsx("p", {
+			t17$1 = size != null && /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground text-xs tabular-nums",
 				children: formatFileSize(size)
 			});

package/dist/client/contexts/focus-context.d.mts

@@ -92,6 +92,10 @@ declare function parsePreviewFieldPath(path: string, context?: {
 type ScrollFieldIntoViewOptions = {
   /** Scroll the owning block card if a nested block field is not rendered yet. */
   fallbackToBlock?: boolean;
+  /** Move DOM focus to the target form control. */
+  focus?: boolean;
+  behavior?: ScrollBehavior;
+  block?: ScrollLogicalPosition;
 };
 /**
  * Scroll a field into view and focus it.