@questpie/admin 3.2.1 → 3.2.3

package/dist/client/blocks/block-renderer.d.mts

@@ -1,6 +1,6 @@
 import { BlockContent } from "./types.mjs";
 import * as React from "react";
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/client/blocks/block-renderer.d.ts
 
@@ -50,6 +50,6 @@ declare function BlockRenderer({
   onBlockClick,
   onBlockInsert,
   className
-}: BlockRendererProps): react_jsx_runtime20.JSX.Element | null;
+}: BlockRendererProps): react_jsx_runtime19.JSX.Element | null;
 //#endregion
 export { BlockRenderer, BlockRendererProps };

package/dist/client/components/admin-link.d.mts

@@ -1,6 +1,6 @@
 import { CollectionNames, GlobalNames } from "../builder/index.mjs";
 import * as React from "react";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 import { QuestpieApp } from "questpie/client";
 
 //#region src/client/components/admin-link.d.ts
@@ -61,6 +61,6 @@ declare function AdminLink<TApp extends QuestpieApp>({
   children,
   onClick,
   ...rest
-}: AdminLinkProps<TApp>): react_jsx_runtime14.JSX.Element;
+}: AdminLinkProps<TApp>): react_jsx_runtime12.JSX.Element;
 //#endregion
 export { AdminLink };

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

@@ -4,7 +4,7 @@ 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 { FocusProvider, parsePreviewFieldPath, scrollFieldIntoView, useFocus } from "../../contexts/focus-context.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";
@@ -22,6 +22,11 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * Mobile: Tabs to switch between form and preview
 */
 const DEV_TELEMETRY = process.env.NODE_ENV === "development";
+function getFocusStatePath(state) {
+	if (state.type === "field" || state.type === "relation") return state.fieldPath;
+	if (state.type === "block") return state.fieldPath ? `content._values.${state.blockId}.${state.fieldPath}` : `content._values.${state.blockId}`;
+	return null;
+}
 function useResizablePane(t0, t1, t2) {
 	const $ = c(9);
 	const defaultSize = t0 === void 0 ? 50 : t0;
@@ -126,7 +131,7 @@ function useLivePreviewRenderTelemetry(t0) {
 	React.useEffect(t1);
 }
 function LivePreviewContent(t0) {
-	const $ = c(77);
+	const $ = c(79);
 	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;
@@ -149,29 +154,40 @@ function LivePreviewContent(t0) {
 	const { previewPercent, containerRef, handleMouseDown } = useResizablePane(defaultSize, minSize, open && !isMobile);
 	const focusContext = useFocus();
 	const focusState = focusContext.state;
-	const handleExitPreview = _temp;
 	let t4;
+	if ($[4] !== focusContext) {
+		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);
+		};
+		$[4] = focusContext;
+		$[5] = t4;
+	} else t4 = $[5];
+	const applyFocusState = t4;
+	const handleExitPreview = _temp;
 	let t5;
-	if ($[4] !== open) {
-		t4 = () => {
+	let t6;
+	if ($[6] !== open) {
+		t5 = () => {
 			if (!open) setActiveTab("form");
 		};
-		t5 = [open];
-		$[4] = open;
-		$[5] = t4;
-		$[6] = t5;
+		t6 = [open];
+		$[6] = open;
+		$[7] = t5;
+		$[8] = t6;
 	} else {
-		t4 = $[5];
-		t5 = $[6];
+		t5 = $[7];
+		t6 = $[8];
 	}
-	React.useEffect(t4, t5);
-	let t6;
+	React.useEffect(t5, t6);
 	let t7;
-	if ($[7] !== focusState || $[8] !== open || $[9] !== previewRef) {
-		t6 = () => {
+	let t8;
+	if ($[9] !== focusState || $[10] !== open || $[11] !== previewRef) {
+		t7 = () => {
 			if (!open) return;
 			if (!previewRef.current) return;
-			if (focusState.type === "field") previewRef.current.sendFocusToPreview(focusState.fieldPath);
+			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);
@@ -180,25 +196,25 @@ function LivePreviewContent(t0) {
 				previewRef.current.sendFocusToPreview(fullPath_0);
 			}
 		};
-		t7 = [
+		t8 = [
 			focusState,
 			previewRef,
 			open
 		];
-		$[7] = focusState;
-		$[8] = open;
-		$[9] = previewRef;
-		$[10] = t6;
-		$[11] = t7;
+		$[9] = focusState;
+		$[10] = open;
+		$[11] = previewRef;
+		$[12] = t7;
+		$[13] = t8;
 	} else {
-		t6 = $[10];
-		t7 = $[11];
+		t7 = $[12];
+		t8 = $[13];
 	}
-	React.useEffect(t6, t7);
-	let t8;
+	React.useEffect(t7, t8);
+	let t10;
 	let t9;
-	if ($[12] !== focusContext || $[13] !== focusState || $[14] !== open) {
-		t8 = () => {
+	if ($[14] !== applyFocusState || $[15] !== focusState || $[16] !== open) {
+		t9 = () => {
 			if (!open) return;
 			const handleKeyDown = (e) => {
 				if (e.key !== "Tab") return;
@@ -208,66 +224,63 @@ function LivePreviewContent(t0) {
 				if (fields.length === 0) return;
 				if (!formScope.contains(document.activeElement)) return;
 				e.preventDefault();
-				const currentPath = focusState.type === "field" ? focusState.fieldPath : null;
+				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) focusContext.focusField(nextPath);
+				if (nextPath) applyFocusState(parsePreviewFieldPath(nextPath));
 			};
 			window.addEventListener("keydown", handleKeyDown);
 			return () => window.removeEventListener("keydown", handleKeyDown);
 		};
-		t9 = [
+		t10 = [
 			focusState,
-			focusContext,
+			applyFocusState,
 			open
 		];
-		$[12] = focusContext;
-		$[13] = focusState;
-		$[14] = open;
-		$[15] = t8;
-		$[16] = t9;
+		$[14] = applyFocusState;
+		$[15] = focusState;
+		$[16] = open;
+		$[17] = t10;
+		$[18] = t9;
 	} else {
-		t8 = $[15];
-		t9 = $[16];
+		t10 = $[17];
+		t9 = $[18];
 	}
-	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;
+	React.useEffect(t9, t10);
 	let t11;
-	if ($[19] !== focusContext) {
-		t11 = (blockId) => {
-			focusContext.focusBlock(blockId);
+	if ($[19] !== applyFocusState) {
+		t11 = (fieldPath, context) => {
+			applyFocusState(parsePreviewFieldPath(fieldPath, context));
 		};
-		$[19] = focusContext;
+		$[19] = applyFocusState;
 		$[20] = t11;
 	} else t11 = $[20];
-	const handlePreviewBlockClick = t11;
+	const handlePreviewFieldClick = t11;
 	let t12;
 	if ($[21] !== focusContext) {
-		t12 = (message) => {
-			focusContext.requestBlockInsert(message.position, message.referenceBlockId);
+		t12 = (blockId) => {
+			focusContext.focusBlock(blockId);
 		};
 		$[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", {
+	const handlePreviewBlockClick = t12;
+	let t13;
+	if ($[23] !== focusContext) {
+		t13 = (message) => {
+			focusContext.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", {
 			className: "flex shrink-0 items-center justify-between border-b px-4 py-2",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
@@ -316,46 +329,46 @@ function LivePreviewContent(t0) {
 				})
 			]
 		});
-		$[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 ($[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];
+		$[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";
 	let t18;
-	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];
+	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 ($[36] !== children || $[37] !== t17 || $[38] !== t18) {
-		t19 = /* @__PURE__ */ jsx("div", {
+	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", {
 			"data-preview-form-scope": true,
-			className: t17,
-			style: t18,
+			className: t18,
+			style: t19,
 			children
 		});
-		$[36] = children;
-		$[37] = t17;
-		$[38] = t18;
-		$[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", {
+		$[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", {
 			className: activeTab === "preview" ? "h-full" : "hidden",
 			children: previewUrl ? /* @__PURE__ */ jsx(PreviewPane, {
 				ref: previewRef,
@@ -377,23 +390,23 @@ function LivePreviewContent(t0) {
 				})]
 			})
 		});
-		$[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", {
+		$[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", {
 			type: "button",
 			"aria-label": "Resize preview pane",
 			onMouseDown: handleMouseDown,
@@ -422,51 +435,51 @@ function LivePreviewContent(t0) {
 				})]
 			})
 		})] });
-		$[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,
+		$[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,
 			children: [
-				t19,
 				t20,
-				t21
+				t21,
+				t22
 			]
 		});
-		$[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]
+		$[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]
 		});
-		$[73] = t13;
-		$[74] = t14;
-		$[75] = t22;
-		$[76] = t23;
-	} else t23 = $[76];
-	return t23;
+		$[75] = t14;
+		$[76] = t15;
+		$[77] = t23;
+		$[78] = t24;
+	} else t24 = $[78];
+	return t24;
 }
 function _temp2(e_0) {
 	return e_0.preventDefault();
@@ -512,16 +525,12 @@ function LivePreviewMode(t0) {
 	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);
+	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 });
 	else if (state.type === "block-insert") {
 		const targetBlockId = state.referenceBlockId ?? state.position.parentId;
 		if (!targetBlockId) return;
-		setTimeout(() => {
-			scrollFieldIntoView(`content._values.${targetBlockId}`);
-		}, 150);
+		scheduleScrollFieldIntoView(`content._values.${targetBlockId}`, { fallbackToBlock: true });
 	}
 }
 

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

@@ -89,10 +89,14 @@ declare function parsePreviewFieldPath(path: string, context?: {
   fieldType?: "regular" | "block" | "relation";
   targetCollection?: string;
 }): FocusState;
+type ScrollFieldIntoViewOptions = {
+  /** Scroll the owning block card if a nested block field is not rendered yet. */
+  fallbackToBlock?: boolean;
+};
 /**
  * Scroll a field into view and focus it.
  * Finds the field wrapper by data-field-path within the preview form scope.
  */
-declare function scrollFieldIntoView(fieldPath: string): void;
+declare function scrollFieldIntoView(fieldPath: string, options?: ScrollFieldIntoViewOptions): boolean;
 //#endregion
 export { FocusContextValue, FocusProvider, FocusProviderProps, FocusState, parsePreviewFieldPath, scrollFieldIntoView, useFocus, useFocusOptional, useIsBlockFocused, useIsFieldFocused };

package/dist/client/contexts/focus-context.mjs

@@ -243,13 +243,35 @@ function extractRelativeField(path, blockId) {
 	if (path.startsWith(prefix)) return path.slice(prefix.length);
 	return path;
 }
+function getPreviewFormSearchRoot() {
+	return document.querySelector("[data-preview-form-scope]") ?? document;
+}
+function findExactFieldWrapper(searchRoot, fieldPath) {
+	for (const element of searchRoot.querySelectorAll("[data-field-path]")) if (element.getAttribute("data-field-path") === fieldPath) return element;
+	return null;
+}
+function getOwningBlockFieldPath(fieldPath) {
+	const blockMatch = fieldPath.match(/^content\._values\.([^.]+)/);
+	if (!blockMatch) return null;
+	return `content._values.${blockMatch[1]}`;
+}
+function findFieldWrapper(fieldPath, options) {
+	const searchRoot = getPreviewFormSearchRoot();
+	const exactWrapper = findExactFieldWrapper(searchRoot, fieldPath);
+	if (exactWrapper) return exactWrapper;
+	if (!options.fallbackToBlock) return null;
+	const owningBlockPath = getOwningBlockFieldPath(fieldPath);
+	if (!owningBlockPath) return null;
+	return findExactFieldWrapper(searchRoot, owningBlockPath);
+}
 /**
 * Scroll a field into view and focus it.
 * Finds the field wrapper by data-field-path within the preview form scope.
 */
-function scrollFieldIntoView(fieldPath) {
-	const wrapper = (document.querySelector("[data-preview-form-scope]") ?? document).querySelector(`[data-field-path="${fieldPath}"]`);
-	if (!wrapper) return;
+function scrollFieldIntoView(fieldPath, options = {}) {
+	if (typeof document === "undefined") return false;
+	const wrapper = findFieldWrapper(fieldPath, options);
+	if (!wrapper) return false;
 	const focusable = wrapper.querySelector("input:not([type=\"hidden\"]), textarea, button, select, [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]");
 	(focusable ?? wrapper).scrollIntoView({
 		behavior: "smooth",
@@ -261,7 +283,20 @@ function scrollFieldIntoView(fieldPath) {
 		window.focus();
 		focusable.focus();
 	});
+	return true;
+}
+function scheduleScrollFieldIntoView(fieldPath, options = {}) {
+	if (typeof window === "undefined") return;
+	const { attempts = 12, delayMs = 80, fallbackToBlock = false } = options;
+	let attempt = 0;
+	const tryScroll = () => {
+		attempt += 1;
+		const isLastAttempt = attempt >= attempts;
+		if (scrollFieldIntoView(fieldPath, { fallbackToBlock: fallbackToBlock && isLastAttempt }) || isLastAttempt) return;
+		window.setTimeout(tryScroll, delayMs);
+	};
+	tryScroll();
 }
 
 //#endregion
-export { FocusProvider, parsePreviewFieldPath, scrollFieldIntoView, useFocus, useFocusOptional, useIsBlockFocused, useIsFieldFocused };
+export { FocusProvider, parsePreviewFieldPath, scheduleScrollFieldIntoView, scrollFieldIntoView, useFocus, useFocusOptional, useIsBlockFocused, useIsFieldFocused };

package/dist/client/preview/block-scope-context.d.mts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/client/preview/block-scope-context.d.ts
 
@@ -35,7 +35,7 @@ declare function BlockScopeProvider({
   blockId,
   basePath,
   children
-}: BlockScopeProviderProps): react_jsx_runtime21.JSX.Element;
+}: BlockScopeProviderProps): react_jsx_runtime22.JSX.Element;
 /**
  * Get current block scope context.
  *

package/dist/client/preview/preview-banner.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 
 //#region src/client/preview/preview-banner.d.ts
 
@@ -40,6 +40,6 @@ declare function PreviewBanner({
   isPreviewMode,
   className,
   exitPreviewUrl
-}: PreviewBannerProps): react_jsx_runtime22.JSX.Element | null;
+}: PreviewBannerProps): react_jsx_runtime21.JSX.Element | null;
 //#endregion
 export { PreviewBanner, PreviewBannerProps };

package/dist/client/views/pages/reset-password-page.d.mts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/client/views/pages/reset-password-page.d.ts
 
@@ -58,6 +58,6 @@ declare function ResetPasswordPage({
   loginPath,
   minPasswordLength,
   getToken
-}: ResetPasswordPageProps): react_jsx_runtime13.JSX.Element;
+}: ResetPasswordPageProps): react_jsx_runtime14.JSX.Element;
 //#endregion
 export { ResetPasswordPage };

package/dist/client/views/pages/setup-page.d.mts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/client/views/pages/setup-page.d.ts
 
@@ -56,6 +56,6 @@ declare function SetupPage({
   redirectTo,
   loginPath,
   showLoginLink
-}: SetupPageProps): react_jsx_runtime12.JSX.Element;
+}: SetupPageProps): react_jsx_runtime15.JSX.Element;
 //#endregion
 export { SetupPage, SetupPageProps };

package/dist/components/rich-text/rich-text-renderer.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/components/rich-text/rich-text-renderer.d.ts
 /**
@@ -98,6 +98,6 @@ declare function RichTextRenderer({
   content,
   styles: customStyles,
   className
-}: RichTextRendererProps): react_jsx_runtime19.JSX.Element | null;
+}: RichTextRendererProps): react_jsx_runtime20.JSX.Element | null;
 //#endregion
 export { RichTextRenderer, RichTextStyles, TipTapDoc, TipTapNode };