@questpie/admin 3.2.2 → 3.2.4

package/dist/client/preview/preview-field.mjs

@@ -201,86 +201,42 @@ function StandalonePreviewField(t0) {
 	return t5;
 }
 function PreviewFieldElement(t0) {
-	const $ = c(66);
+	const $ = c(54);
 	const { Component, blockId, children, className, editable, fieldType, fullPath, isFocused, onClick, onValueCommit, style } = t0;
 	const [isEditing, setIsEditing] = React.useState(false);
 	const [draftValue, setDraftValue] = React.useState("");
-	const [isHovered, setIsHovered] = React.useState(false);
-	const [hasDomFocus, setHasDomFocus] = React.useState(false);
-	const inputRef = React.useRef(null);
 	const isEditable = editable === "text" || editable === "textarea";
-	const shouldShowAffordance = isHovered || hasDomFocus || isFocused || isEditing;
-	const t1 = shouldShowAffordance ? "var(--ring, var(--highlight, #b700ff))" : "transparent";
-	const t2 = shouldShowAffordance ? `0 0 0 ${isEditing ? 5 : 4}px color-mix(in srgb, var(--ring, var(--highlight, #b700ff)) ${isEditing ? 24 : 16}%, transparent)` : void 0;
-	const t3 = isEditable ? "text" : "pointer";
-	let t4;
-	if ($[0] !== style || $[1] !== t1 || $[2] !== t2 || $[3] !== t3) {
-		t4 = {
-			outlineColor: t1,
-			outlineOffset: "2px",
-			outlineStyle: "solid",
-			outlineWidth: "2px",
-			boxShadow: t2,
-			borderRadius: "2px",
-			cursor: t3,
-			transition: "outline-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease",
-			...style
-		};
-		$[0] = style;
-		$[1] = t1;
-		$[2] = t2;
-		$[3] = t3;
-		$[4] = t4;
-	} else t4 = $[4];
-	const previewStyle = t4;
-	let t5;
-	let t6;
-	if ($[5] !== isEditing) {
-		t5 = () => {
-			if (isEditing) {
-				inputRef.current?.focus();
-				inputRef.current?.select();
-			}
-		};
-		t6 = [isEditing];
-		$[5] = isEditing;
-		$[6] = t5;
-		$[7] = t6;
-	} else {
-		t5 = $[6];
-		t6 = $[7];
-	}
-	React.useEffect(t5, t6);
-	let t7;
-	if ($[8] !== children || $[9] !== isEditable) {
-		t7 = () => {
+	const setEditorRef = _temp2;
+	let t1;
+	if ($[0] !== children || $[1] !== isEditable) {
+		t1 = () => {
 			if (!isEditable) return;
 			setDraftValue(childrenToEditableValue(children));
 			setIsEditing(true);
 		};
-		$[8] = children;
-		$[9] = isEditable;
-		$[10] = t7;
-	} else t7 = $[10];
-	const startEditing = t7;
-	let t8;
-	if ($[11] !== blockId || $[12] !== fieldType || $[13] !== fullPath || $[14] !== onClick) {
-		t8 = () => {
+		$[0] = children;
+		$[1] = isEditable;
+		$[2] = t1;
+	} else t1 = $[2];
+	const startEditing = t1;
+	let t2;
+	if ($[3] !== blockId || $[4] !== fieldType || $[5] !== fullPath || $[6] !== onClick) {
+		t2 = () => {
 			onClick(fullPath, {
 				blockId,
 				fieldType
 			});
 		};
-		$[11] = blockId;
-		$[12] = fieldType;
-		$[13] = fullPath;
-		$[14] = onClick;
-		$[15] = t8;
-	} else t8 = $[15];
-	const routeClick = t8;
-	let t9;
-	if ($[16] !== blockId || $[17] !== draftValue || $[18] !== editable || $[19] !== fieldType || $[20] !== fullPath || $[21] !== isEditing || $[22] !== onValueCommit) {
-		t9 = () => {
+		$[3] = blockId;
+		$[4] = fieldType;
+		$[5] = fullPath;
+		$[6] = onClick;
+		$[7] = t2;
+	} else t2 = $[7];
+	const routeClick = t2;
+	let t3;
+	if ($[8] !== blockId || $[9] !== draftValue || $[10] !== editable || $[11] !== fieldType || $[12] !== fullPath || $[13] !== isEditing || $[14] !== onValueCommit) {
+		t3 = () => {
 			if (!isEditing || !editable) return;
 			const payload = {
 				path: fullPath,
@@ -293,52 +249,52 @@ function PreviewFieldElement(t0) {
 			else postFieldValueEdited(payload);
 			setIsEditing(false);
 		};
-		$[16] = blockId;
-		$[17] = draftValue;
-		$[18] = editable;
-		$[19] = fieldType;
-		$[20] = fullPath;
-		$[21] = isEditing;
-		$[22] = onValueCommit;
-		$[23] = t9;
-	} else t9 = $[23];
-	const commitEdit = t9;
-	let t10;
-	if ($[24] !== children) {
-		t10 = () => {
+		$[8] = blockId;
+		$[9] = draftValue;
+		$[10] = editable;
+		$[11] = fieldType;
+		$[12] = fullPath;
+		$[13] = isEditing;
+		$[14] = onValueCommit;
+		$[15] = t3;
+	} else t3 = $[15];
+	const commitEdit = t3;
+	let t4;
+	if ($[16] !== children) {
+		t4 = () => {
 			setIsEditing(false);
 			setDraftValue(childrenToEditableValue(children));
 		};
-		$[24] = children;
-		$[25] = t10;
-	} else t10 = $[25];
-	const cancelEdit = t10;
-	let t11;
-	if ($[26] !== isEditing || $[27] !== routeClick) {
-		t11 = (event) => {
+		$[16] = children;
+		$[17] = t4;
+	} else t4 = $[17];
+	const cancelEdit = t4;
+	let t5;
+	if ($[18] !== isEditing || $[19] !== routeClick) {
+		t5 = (event) => {
 			event.preventDefault();
 			event.stopPropagation();
 			if (!isEditing) routeClick();
 		};
-		$[26] = isEditing;
-		$[27] = routeClick;
-		$[28] = t11;
-	} else t11 = $[28];
-	const handleClick = t11;
-	let t12;
-	if ($[29] !== startEditing) {
-		t12 = (event_0) => {
+		$[18] = isEditing;
+		$[19] = routeClick;
+		$[20] = t5;
+	} else t5 = $[20];
+	const handleClick = t5;
+	let t6;
+	if ($[21] !== startEditing) {
+		t6 = (event_0) => {
 			event_0.preventDefault();
 			event_0.stopPropagation();
 			startEditing();
 		};
-		$[29] = startEditing;
-		$[30] = t12;
-	} else t12 = $[30];
-	const handleDoubleClick = t12;
-	let t13;
-	if ($[31] !== cancelEdit || $[32] !== commitEdit || $[33] !== editable || $[34] !== isEditable || $[35] !== isEditing || $[36] !== routeClick || $[37] !== startEditing) {
-		t13 = (event_1) => {
+		$[21] = startEditing;
+		$[22] = t6;
+	} else t6 = $[22];
+	const handleDoubleClick = t6;
+	let t7;
+	if ($[23] !== cancelEdit || $[24] !== commitEdit || $[25] !== editable || $[26] !== isEditable || $[27] !== isEditing || $[28] !== routeClick || $[29] !== startEditing) {
+		t7 = (event_1) => {
 			event_1.stopPropagation();
 			if (!isEditing) {
 				if (event_1.key === "Enter" && isEditable) {
@@ -363,118 +319,100 @@ function PreviewFieldElement(t0) {
 				commitEdit();
 			}
 		};
-		$[31] = cancelEdit;
-		$[32] = commitEdit;
-		$[33] = editable;
-		$[34] = isEditable;
-		$[35] = isEditing;
-		$[36] = routeClick;
-		$[37] = startEditing;
-		$[38] = t13;
-	} else t13 = $[38];
-	const handleKeyDown = t13;
-	let t14;
-	if ($[39] !== commitEdit || $[40] !== draftValue || $[41] !== editable || $[42] !== handleKeyDown) {
-		t14 = editable === "textarea" ? /* @__PURE__ */ jsx("textarea", {
-			ref: inputRef,
+		$[23] = cancelEdit;
+		$[24] = commitEdit;
+		$[25] = editable;
+		$[26] = isEditable;
+		$[27] = isEditing;
+		$[28] = routeClick;
+		$[29] = startEditing;
+		$[30] = t7;
+	} else t7 = $[30];
+	const handleKeyDown = t7;
+	let t8;
+	if ($[31] !== commitEdit || $[32] !== draftValue || $[33] !== editable || $[34] !== handleKeyDown) {
+		t8 = editable === "textarea" ? /* @__PURE__ */ jsx("textarea", {
+			ref: setEditorRef,
 			value: draftValue,
 			onChange: (event_2) => setDraftValue(event_2.target.value),
 			onBlur: commitEdit,
-			onClick: _temp2,
+			onClick: _temp3,
 			onKeyDown: handleKeyDown,
 			className: "min-h-[4lh] w-full resize-y bg-transparent p-0 [letter-spacing:inherit] text-inherit outline-none [font:inherit]"
 		}) : /* @__PURE__ */ jsx("input", {
-			ref: inputRef,
+			ref: setEditorRef,
 			type: "text",
 			value: draftValue,
 			onChange: (event_4) => setDraftValue(event_4.target.value),
 			onBlur: commitEdit,
-			onClick: _temp3,
+			onClick: _temp4,
 			onKeyDown: handleKeyDown,
 			className: "w-full bg-transparent p-0 [letter-spacing:inherit] text-inherit outline-none [font:inherit]"
 		});
-		$[39] = commitEdit;
-		$[40] = draftValue;
-		$[41] = editable;
-		$[42] = handleKeyDown;
-		$[43] = t14;
-	} else t14 = $[43];
-	const editor = t14;
-	const t15 = isEditing ? "true" : void 0;
-	let t16;
-	let t17;
-	let t18;
-	let t19;
-	if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = () => setIsHovered(true);
-		t17 = () => setIsHovered(false);
-		t18 = () => setHasDomFocus(true);
-		t19 = () => setHasDomFocus(false);
-		$[44] = t16;
-		$[45] = t17;
-		$[46] = t18;
-		$[47] = t19;
-	} else {
-		t16 = $[44];
-		t17 = $[45];
-		t18 = $[46];
-		t19 = $[47];
-	}
-	const t20 = isEditable && "cursor-text";
-	const t21 = isFocused && "outline-primary shadow-[0_0_0_4px_hsl(var(--primary)/0.14)]";
-	const t22 = isEditing && "outline-primary bg-background/80 shadow-[0_0_0_4px_hsl(var(--primary)/0.18)]";
-	let t23;
-	if ($[48] !== className || $[49] !== t20 || $[50] !== t21 || $[51] !== t22) {
-		t23 = cn(className, "group/preview-field relative rounded-[2px] transition-[box-shadow,outline-color,outline-offset] duration-150", "cursor-pointer outline outline-2 outline-offset-2 outline-transparent", "hover:outline-primary/50 hover:shadow-[0_0_0_4px_hsl(var(--primary)/0.10)]", "focus-visible:outline-primary/70 focus-visible:shadow-[0_0_0_4px_hsl(var(--primary)/0.12)]", t20, t21, t22);
-		$[48] = className;
-		$[49] = t20;
-		$[50] = t21;
-		$[51] = t22;
-		$[52] = t23;
-	} else t23 = $[52];
-	const t24 = isEditing ? editor : children;
-	let t25;
-	if ($[53] !== Component || $[54] !== blockId || $[55] !== editable || $[56] !== fieldType || $[57] !== fullPath || $[58] !== handleClick || $[59] !== handleDoubleClick || $[60] !== handleKeyDown || $[61] !== previewStyle || $[62] !== t15 || $[63] !== t23 || $[64] !== t24) {
-		t25 = /* @__PURE__ */ jsx(Component, {
+		$[31] = commitEdit;
+		$[32] = draftValue;
+		$[33] = editable;
+		$[34] = handleKeyDown;
+		$[35] = t8;
+	} else t8 = $[35];
+	const editor = t8;
+	const t9 = isEditing ? "true" : void 0;
+	const t10 = isEditable && "cursor-text";
+	const t11 = isFocused && "outline-primary shadow-[0_0_0_4px_hsl(var(--primary)/0.14)]";
+	const t12 = isEditing && "outline-primary bg-background/80 shadow-[0_0_0_4px_hsl(var(--primary)/0.18)]";
+	let t13;
+	if ($[36] !== className || $[37] !== t10 || $[38] !== t11 || $[39] !== t12) {
+		t13 = cn(className, "group/preview-field relative rounded-[2px] transition-[box-shadow,outline-color,outline-offset] duration-150", "cursor-pointer outline outline-2 outline-offset-2 outline-transparent", "hover:outline-primary/50 hover:shadow-[0_0_0_4px_hsl(var(--primary)/0.10)]", "focus-visible:outline-primary/70 focus-visible:shadow-[0_0_0_4px_hsl(var(--primary)/0.12)]", t10, t11, t12);
+		$[36] = className;
+		$[37] = t10;
+		$[38] = t11;
+		$[39] = t12;
+		$[40] = t13;
+	} else t13 = $[40];
+	const t14 = isEditing ? editor : children;
+	let t15;
+	if ($[41] !== Component || $[42] !== blockId || $[43] !== editable || $[44] !== fieldType || $[45] !== fullPath || $[46] !== handleClick || $[47] !== handleDoubleClick || $[48] !== handleKeyDown || $[49] !== style || $[50] !== t13 || $[51] !== t14 || $[52] !== t9) {
+		t15 = /* @__PURE__ */ jsx(Component, {
 			"data-preview-field": fullPath,
 			"data-block-id": blockId,
 			"data-field-type": fieldType,
 			"data-preview-editable": editable,
-			"data-preview-editing": t15,
+			"data-preview-editing": t9,
 			tabIndex: 0,
 			onClick: handleClick,
 			onDoubleClick: handleDoubleClick,
 			onKeyDown: handleKeyDown,
-			onMouseEnter: t16,
-			onMouseLeave: t17,
-			onFocus: t18,
-			onBlur: t19,
-			style: previewStyle,
-			className: t23,
-			children: t24
+			style,
+			className: t13,
+			children: t14
 		});
-		$[53] = Component;
-		$[54] = blockId;
-		$[55] = editable;
-		$[56] = fieldType;
-		$[57] = fullPath;
-		$[58] = handleClick;
-		$[59] = handleDoubleClick;
-		$[60] = handleKeyDown;
-		$[61] = previewStyle;
-		$[62] = t15;
-		$[63] = t23;
-		$[64] = t24;
-		$[65] = t25;
-	} else t25 = $[65];
-	return t25;
+		$[41] = Component;
+		$[42] = blockId;
+		$[43] = editable;
+		$[44] = fieldType;
+		$[45] = fullPath;
+		$[46] = handleClick;
+		$[47] = handleDoubleClick;
+		$[48] = handleKeyDown;
+		$[49] = style;
+		$[50] = t13;
+		$[51] = t14;
+		$[52] = t9;
+		$[53] = t15;
+	} else t15 = $[53];
+	return t15;
 }
-function _temp3(event_5) {
+function _temp4(event_5) {
 	return event_5.stopPropagation();
 }
-function _temp2(event_3) {
+function _temp3(event_3) {
 	return event_3.stopPropagation();
 }
+function _temp2(node) {
+	if (!node) return;
+	node.focus({ preventScroll: true });
+	node.select();
+}
 function childrenToEditableValue(children) {
 	if (children === null || children === void 0 || typeof children === "boolean") return "";
 	if (typeof children === "string" || typeof children === "number") return String(children);

package/dist/client/preview/use-collection-preview.mjs

@@ -57,6 +57,7 @@ function useCollectionPreview(t0) {
 	const [isPreviewMode, setIsPreviewMode] = React.useState(false);
 	const lastAppliedSeqRef = React.useRef(null);
 	const initialDataRef = React.useRef(initialData);
+	const focusScrollTimerRef = React.useRef(null);
 	let t2;
 	let t3;
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
@@ -113,10 +114,22 @@ function useCollectionPreview(t0) {
 		t8 = () => {
 			if (!isPreviewMode) return;
 			window.parent.postMessage({ type: "PREVIEW_READY" }, "*");
+			const scheduleFocusScroll = (fieldPath) => {
+				if (focusScrollTimerRef.current !== null) window.clearTimeout(focusScrollTimerRef.current);
+				focusScrollTimerRef.current = window.setTimeout(() => {
+					focusScrollTimerRef.current = null;
+					const element = findPreviewFieldElement(fieldPath);
+					if (!element || shouldSkipPreviewAutoScroll(element)) return;
+					if (!isElementNearViewport(element)) element.scrollIntoView({
+						behavior: "auto",
+						block: "nearest"
+					});
+				}, 80);
+			};
 			const handleMessage = async (event) => {
 				const message = event.data;
 				if (!isPreviewAdminMessage(message)) return;
-				bb24: switch (message.type) {
+				bb37: switch (message.type) {
 					case "PREVIEW_REFRESH":
 						await onRefreshRef.current();
 						setDraftData(cloneSnapshot(initialDataRef.current));
@@ -124,28 +137,24 @@ function useCollectionPreview(t0) {
 							type: "REFRESH_COMPLETE",
 							timestamp: Date.now()
 						}, "*");
-						break bb24;
+						break bb37;
 					case "SELECT_BLOCK":
-						setSelectedBlockId(message.blockId);
-						break bb24;
+						setSelectedBlockId((current_1) => current_1 === message.blockId ? current_1 : message.blockId);
+						break bb37;
 					case "FOCUS_FIELD":
-						setFocusedField(message.fieldPath);
-						setTimeout(() => {
-							const element = findPreviewFieldElement(message.fieldPath);
-							if (element) element.scrollIntoView({
-								behavior: "smooth",
-								block: "center"
-							});
-						}, 150);
-						break bb24;
+						setFocusedField((current_0) => current_0 === message.fieldPath ? current_0 : message.fieldPath);
+						scheduleFocusScroll(message.fieldPath);
+						break bb37;
 					case "INIT_SNAPSHOT":
 						lastAppliedSeqRef.current = message.seq;
 						setDraftData(cloneSnapshot(message.data));
-						break bb24;
+						break bb37;
 					case "PATCH_BATCH":
-						if (!shouldApplyPatchBatch(lastAppliedSeqRef.current, message.seq)) break bb24;
+						if (!shouldApplyPatchBatch(lastAppliedSeqRef.current, message.seq)) break bb37;
 						try {
-							setDraftData((current) => applyPatchBatchImmutable(current, message.ops));
+							React.startTransition(() => {
+								setDraftData((current) => applyPatchBatchImmutable(current, message.ops));
+							});
 							lastAppliedSeqRef.current = message.seq;
 							window.parent.postMessage({
 								type: "PATCH_APPLIED",
@@ -159,11 +168,11 @@ function useCollectionPreview(t0) {
 								reason: error instanceof Error ? error.message : "Failed to apply preview patch batch"
 							}, "*");
 						}
-						break bb24;
+						break bb37;
 					case "COMMIT":
 						lastAppliedSeqRef.current = message.seq;
 						setDraftData(cloneSnapshot(message.data));
-						break bb24;
+						break bb37;
 					case "FULL_RESYNC":
 						await onRefreshRef.current();
 						setDraftData(cloneSnapshot(initialDataRef.current));
@@ -174,7 +183,13 @@ function useCollectionPreview(t0) {
 				}
 			};
 			window.addEventListener("message", handleMessage);
-			return () => window.removeEventListener("message", handleMessage);
+			return () => {
+				window.removeEventListener("message", handleMessage);
+				if (focusScrollTimerRef.current !== null) {
+					window.clearTimeout(focusScrollTimerRef.current);
+					focusScrollTimerRef.current = null;
+				}
+			};
 		};
 		t9 = [isPreviewMode];
 		$[10] = isPreviewMode;
@@ -187,10 +202,10 @@ function useCollectionPreview(t0) {
 	React.useEffect(t8, t9);
 	let t10;
 	if ($[13] !== isPreviewMode) {
-		t10 = (fieldPath, context) => {
+		t10 = (fieldPath_0, context) => {
 			if (isPreviewMode) window.parent.postMessage({
 				type: "FIELD_CLICKED",
-				fieldPath,
+				fieldPath: fieldPath_0,
 				blockId: context?.blockId,
 				fieldType: context?.fieldType
 			}, "*");
@@ -282,6 +297,19 @@ function findPreviewFieldElement(fieldPath) {
 	const escaped = typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(fieldPath) : fieldPath.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
 	return document.querySelector(`[data-preview-field="${escaped}"]`);
 }
+function shouldSkipPreviewAutoScroll(element) {
+	const activeElement = document.activeElement;
+	if (activeElement && element.contains(activeElement)) return true;
+	return element instanceof HTMLElement && element.dataset.previewEditing === "true";
+}
+function isElementNearViewport(element) {
+	const rect = element.getBoundingClientRect();
+	const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+	const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+	const verticalMargin = Math.min(120, viewportHeight * .2);
+	const horizontalMargin = Math.min(120, viewportWidth * .2);
+	return rect.bottom >= -verticalMargin && rect.top <= viewportHeight + verticalMargin && rect.right >= -horizontalMargin && rect.left <= viewportWidth + horizontalMargin;
+}
 
 //#endregion
 export { useCollectionPreview };

package/dist/client/views/auth/accept-invite-form.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/client/views/auth/accept-invite-form.d.ts
 /**
@@ -67,6 +67,6 @@ declare function AcceptInviteForm({
   className,
   error,
   minPasswordLength
-}: AcceptInviteFormProps): react_jsx_runtime2.JSX.Element;
+}: AcceptInviteFormProps): react_jsx_runtime1.JSX.Element;
 //#endregion
 export { AcceptInviteForm };

package/dist/client/views/auth/auth-layout.d.mts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/client/views/auth/auth-layout.d.ts
 
@@ -26,7 +26,7 @@ declare function AuthDefaultLogo({
   brandName
 }: {
   brandName: string;
-}): react_jsx_runtime0.JSX.Element;
+}): react_jsx_runtime2.JSX.Element;
 /**
  * Minimal split layout for authentication pages (login, register, forgot password, etc.)
  *
@@ -50,6 +50,6 @@ declare function AuthDefaultLogo({
  * </AuthLayout>
  * ```
  */
-declare function AuthLayout(props: AuthLayoutProps): react_jsx_runtime0.JSX.Element;
+declare function AuthLayout(props: AuthLayoutProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 export { AuthDefaultLogo, AuthLayout, AuthLayoutProps };

package/dist/client/views/auth/forgot-password-form.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/client/views/auth/forgot-password-form.d.ts
 /**
@@ -53,6 +53,6 @@ declare function ForgotPasswordForm({
   defaultValues,
   className,
   error
-}: ForgotPasswordFormProps): react_jsx_runtime3.JSX.Element;
+}: ForgotPasswordFormProps): react_jsx_runtime4.JSX.Element;
 //#endregion
 export { ForgotPasswordForm };

package/dist/client/views/auth/reset-password-form.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/client/views/auth/reset-password-form.d.ts
 /**
@@ -60,6 +60,6 @@ declare function ResetPasswordForm({
   minPasswordLength,
   className,
   error
-}: ResetPasswordFormProps): react_jsx_runtime4.JSX.Element;
+}: ResetPasswordFormProps): react_jsx_runtime6.JSX.Element;
 //#endregion
 export { ResetPasswordForm };