@questpie/admin 3.2.3 → 3.2.5

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

@@ -2,7 +2,6 @@
 
 import { cn } from "../lib/utils.mjs";
 import { useBlockScope, useResolveFieldPath } from "./block-scope-context.mjs";
-import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 
@@ -18,44 +17,27 @@ const PreviewContext = React.createContext(null);
 * Provider for preview mode context.
 * Use this at the root of your preview page.
 */
-function PreviewProvider(t0) {
-	const $ = c(8);
-	const { preview, isPreviewMode, focusedField, onFieldClick, onFieldValueEdited, children } = t0;
-	const t1 = preview?.isPreviewMode ?? isPreviewMode ?? false;
-	const t2 = preview?.focusedField ?? focusedField ?? null;
-	const t3 = preview?.handleFieldClick ?? onFieldClick ?? _temp;
-	const t4 = preview?.handleFieldValueEdited ?? onFieldValueEdited;
-	let t5;
-	if ($[0] !== t1 || $[1] !== t2 || $[2] !== t3 || $[3] !== t4) {
-		t5 = {
-			isPreviewMode: t1,
-			focusedField: t2,
-			handleFieldClick: t3,
-			handleFieldValueEdited: t4
-		};
-		$[0] = t1;
-		$[1] = t2;
-		$[2] = t3;
-		$[3] = t4;
-		$[4] = t5;
-	} else t5 = $[4];
-	const value = t5;
-	let t6;
-	if ($[5] !== children || $[6] !== value) {
-		t6 = /* @__PURE__ */ jsx(PreviewContext.Provider, {
-			value,
-			children
-		});
-		$[5] = children;
-		$[6] = value;
-		$[7] = t6;
-	} else t6 = $[7];
-	return t6;
+function PreviewProvider({ preview, isPreviewMode, focusedField, onFieldClick, onFieldValueEdited, children }) {
+	const value = React.useMemo(() => ({
+		isPreviewMode: preview?.isPreviewMode ?? isPreviewMode ?? false,
+		focusedField: preview?.focusedField ?? focusedField ?? null,
+		handleFieldClick: preview?.handleFieldClick ?? onFieldClick ?? (() => void 0),
+		handleFieldValueEdited: preview?.handleFieldValueEdited ?? onFieldValueEdited
+	}), [
+		preview,
+		isPreviewMode,
+		focusedField,
+		onFieldClick,
+		onFieldValueEdited
+	]);
+	return /* @__PURE__ */ jsx(PreviewContext.Provider, {
+		value,
+		children
+	});
 }
 /**
 * Hook to access preview context.
 */
-function _temp() {}
 function usePreviewContext() {
 	return React.useContext(PreviewContext);
 }
@@ -83,397 +65,172 @@ function usePreviewContext() {
 * </PreviewField>
 * ```
 */
-function PreviewField(t0) {
-	const $ = c(17);
-	const { field, fieldType: t1, editable, children, as: t2, className, style, onClick, onValueCommit } = t0;
-	const fieldType = t1 === void 0 ? "regular" : t1;
-	const Component = t2 === void 0 ? "div" : t2;
+function PreviewField({ field, fieldType = "regular", editable, children, as: Component = "div", className, style, onClick, onValueCommit }) {
 	const context = usePreviewContext();
 	const blockScope = useBlockScope();
 	const fullPath = useResolveFieldPath(field);
-	if (!context?.isPreviewMode) {
-		let t3$1;
-		if ($[0] !== Component || $[1] !== children || $[2] !== className || $[3] !== style) {
-			t3$1 = /* @__PURE__ */ jsx(Component, {
-				className,
-				style,
-				children
-			});
-			$[0] = Component;
-			$[1] = children;
-			$[2] = className;
-			$[3] = style;
-			$[4] = t3$1;
-		} else t3$1 = $[4];
-		return t3$1;
-	}
-	const t3 = blockScope?.blockId;
-	const t4 = context.focusedField === fullPath;
-	const t5 = onClick ?? context.handleFieldClick;
-	const t6 = onValueCommit ?? context.handleFieldValueEdited;
-	let t7;
-	if ($[5] !== Component || $[6] !== children || $[7] !== className || $[8] !== editable || $[9] !== fieldType || $[10] !== fullPath || $[11] !== style || $[12] !== t3 || $[13] !== t4 || $[14] !== t5 || $[15] !== t6) {
-		t7 = /* @__PURE__ */ jsx(PreviewFieldElement, {
-			Component,
-			blockId: t3,
-			className,
-			editable,
-			fieldType,
-			fullPath,
-			isFocused: t4,
-			onClick: t5,
-			onValueCommit: t6,
-			style,
-			children
-		});
-		$[5] = Component;
-		$[6] = children;
-		$[7] = className;
-		$[8] = editable;
-		$[9] = fieldType;
-		$[10] = fullPath;
-		$[11] = style;
-		$[12] = t3;
-		$[13] = t4;
-		$[14] = t5;
-		$[15] = t6;
-		$[16] = t7;
-	} else t7 = $[16];
-	return t7;
+	if (!context?.isPreviewMode) return /* @__PURE__ */ jsx(Component, {
+		className,
+		style,
+		children
+	});
+	return /* @__PURE__ */ jsx(PreviewFieldElement, {
+		Component,
+		blockId: blockScope?.blockId,
+		className,
+		editable,
+		fieldType,
+		fullPath,
+		isFocused: context.focusedField === fullPath,
+		onClick: onClick ?? context.handleFieldClick,
+		onValueCommit: onValueCommit ?? context.handleFieldValueEdited,
+		style,
+		children
+	});
 }
 /**
 * Standalone PreviewField that works without context.
 * Useful when you can't use PreviewProvider.
 */
-function StandalonePreviewField(t0) {
-	const $ = c(17);
-	const { field, fieldType: t1, editable, children, as: t2, className, style, isPreviewMode, isFocused, onFieldClick, onValueCommit } = t0;
-	const fieldType = t1 === void 0 ? "regular" : t1;
-	const Component = t2 === void 0 ? "div" : t2;
+function StandalonePreviewField({ field, fieldType = "regular", editable, children, as: Component = "div", className, style, isPreviewMode, isFocused, onFieldClick, onValueCommit }) {
 	const blockScope = useBlockScope();
 	const fullPath = useResolveFieldPath(field);
-	if (!isPreviewMode) {
-		let t3$1;
-		if ($[0] !== Component || $[1] !== children || $[2] !== className || $[3] !== style) {
-			t3$1 = /* @__PURE__ */ jsx(Component, {
-				className,
-				style,
-				children
-			});
-			$[0] = Component;
-			$[1] = children;
-			$[2] = className;
-			$[3] = style;
-			$[4] = t3$1;
-		} else t3$1 = $[4];
-		return t3$1;
-	}
-	const t3 = blockScope?.blockId;
-	const t4 = !!isFocused;
-	let t5;
-	if ($[5] !== Component || $[6] !== children || $[7] !== className || $[8] !== editable || $[9] !== fieldType || $[10] !== fullPath || $[11] !== onFieldClick || $[12] !== onValueCommit || $[13] !== style || $[14] !== t3 || $[15] !== t4) {
-		t5 = /* @__PURE__ */ jsx(PreviewFieldElement, {
-			Component,
-			blockId: t3,
-			className,
-			editable,
-			fieldType,
-			fullPath,
-			isFocused: t4,
-			onClick: onFieldClick,
-			onValueCommit,
-			style,
-			children
-		});
-		$[5] = Component;
-		$[6] = children;
-		$[7] = className;
-		$[8] = editable;
-		$[9] = fieldType;
-		$[10] = fullPath;
-		$[11] = onFieldClick;
-		$[12] = onValueCommit;
-		$[13] = style;
-		$[14] = t3;
-		$[15] = t4;
-		$[16] = t5;
-	} else t5 = $[16];
-	return t5;
+	if (!isPreviewMode) return /* @__PURE__ */ jsx(Component, {
+		className,
+		style,
+		children
+	});
+	return /* @__PURE__ */ jsx(PreviewFieldElement, {
+		Component,
+		blockId: blockScope?.blockId,
+		className,
+		editable,
+		fieldType,
+		fullPath,
+		isFocused: !!isFocused,
+		onClick: onFieldClick,
+		onValueCommit,
+		style,
+		children
+	});
 }
-function PreviewFieldElement(t0) {
-	const $ = c(66);
-	const { Component, blockId, children, className, editable, fieldType, fullPath, isFocused, onClick, onValueCommit, style } = t0;
+function PreviewFieldElement({ Component, blockId, children, className, editable, fieldType, fullPath, isFocused, onClick, onValueCommit, style }) {
 	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
+	const setEditorRef = React.useCallback((node) => {
+		if (!node) return;
+		node.focus({ preventScroll: true });
+		node.select();
+	}, []);
+	const startEditing = React.useCallback(() => {
+		if (!isEditable) return;
+		setDraftValue(childrenToEditableValue(children));
+		setIsEditing(true);
+	}, [children, isEditable]);
+	const routeClick = React.useCallback(() => {
+		onClick(fullPath, {
+			blockId,
+			fieldType
+		});
+	}, [
+		blockId,
+		fieldType,
+		fullPath,
+		onClick
+	]);
+	const commitEdit = React.useCallback(() => {
+		if (!isEditing || !editable) return;
+		const payload = {
+			path: fullPath,
+			value: draftValue,
+			inputKind: editable,
+			blockId,
+			fieldType
 		};
-		$[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();
+		if (onValueCommit) onValueCommit(payload);
+		else postFieldValueEdited(payload);
+		setIsEditing(false);
+	}, [
+		blockId,
+		draftValue,
+		editable,
+		fieldType,
+		fullPath,
+		isEditing,
+		onValueCommit
+	]);
+	const cancelEdit = React.useCallback(() => {
+		setIsEditing(false);
+		setDraftValue(childrenToEditableValue(children));
+	}, [children]);
+	const handleClick = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!isEditing) routeClick();
+	};
+	const handleDoubleClick = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		startEditing();
+	};
+	const handleKeyDown = (event) => {
+		event.stopPropagation();
+		if (!isEditing) {
+			if (event.key === "Enter" && isEditable) {
+				event.preventDefault();
+				routeClick();
+				startEditing();
 			}
-		};
-		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 = () => {
-			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 = () => {
-			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 = () => {
-			if (!isEditing || !editable) return;
-			const payload = {
-				path: fullPath,
-				value: draftValue,
-				inputKind: editable,
-				blockId,
-				fieldType
-			};
-			if (onValueCommit) onValueCommit(payload);
-			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 = () => {
-			setIsEditing(false);
-			setDraftValue(childrenToEditableValue(children));
-		};
-		$[24] = children;
-		$[25] = t10;
-	} else t10 = $[25];
-	const cancelEdit = t10;
-	let t11;
-	if ($[26] !== isEditing || $[27] !== routeClick) {
-		t11 = (event) => {
+			return;
+		}
+		if (event.key === "Escape") {
 			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) => {
-			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) => {
-			event_1.stopPropagation();
-			if (!isEditing) {
-				if (event_1.key === "Enter" && isEditable) {
-					event_1.preventDefault();
-					routeClick();
-					startEditing();
-				}
-				return;
-			}
-			if (event_1.key === "Escape") {
-				event_1.preventDefault();
-				cancelEdit();
-				return;
-			}
-			if (editable === "text" && event_1.key === "Enter") {
-				event_1.preventDefault();
-				commitEdit();
-				return;
-			}
-			if (editable === "textarea" && event_1.key === "Enter" && (event_1.metaKey || event_1.ctrlKey)) {
-				event_1.preventDefault();
-				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,
-			value: draftValue,
-			onChange: (event_2) => setDraftValue(event_2.target.value),
-			onBlur: commitEdit,
-			onClick: _temp2,
-			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,
-			type: "text",
-			value: draftValue,
-			onChange: (event_4) => setDraftValue(event_4.target.value),
-			onBlur: commitEdit,
-			onClick: _temp3,
-			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, {
-			"data-preview-field": fullPath,
-			"data-block-id": blockId,
-			"data-field-type": fieldType,
-			"data-preview-editable": editable,
-			"data-preview-editing": t15,
-			tabIndex: 0,
-			onClick: handleClick,
-			onDoubleClick: handleDoubleClick,
-			onKeyDown: handleKeyDown,
-			onMouseEnter: t16,
-			onMouseLeave: t17,
-			onFocus: t18,
-			onBlur: t19,
-			style: previewStyle,
-			className: t23,
-			children: t24
-		});
-		$[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;
-}
-function _temp3(event_5) {
-	return event_5.stopPropagation();
-}
-function _temp2(event_3) {
-	return event_3.stopPropagation();
+			cancelEdit();
+			return;
+		}
+		if (editable === "text" && event.key === "Enter") {
+			event.preventDefault();
+			commitEdit();
+			return;
+		}
+		if (editable === "textarea" && event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			commitEdit();
+		}
+	};
+	const editor = editable === "textarea" ? /* @__PURE__ */ jsx("textarea", {
+		ref: setEditorRef,
+		value: draftValue,
+		onChange: (event) => setDraftValue(event.target.value),
+		onBlur: commitEdit,
+		onClick: (event) => event.stopPropagation(),
+		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: setEditorRef,
+		type: "text",
+		value: draftValue,
+		onChange: (event) => setDraftValue(event.target.value),
+		onBlur: commitEdit,
+		onClick: (event) => event.stopPropagation(),
+		onKeyDown: handleKeyDown,
+		className: "w-full bg-transparent p-0 [letter-spacing:inherit] text-inherit outline-none [font:inherit]"
+	});
+	return /* @__PURE__ */ jsx(Component, {
+		"data-preview-field": fullPath,
+		"data-block-id": blockId,
+		"data-field-type": fieldType,
+		"data-preview-editable": editable,
+		"data-preview-editing": isEditing ? "true" : void 0,
+		tabIndex: 0,
+		onClick: handleClick,
+		onDoubleClick: handleDoubleClick,
+		onKeyDown: handleKeyDown,
+		style,
+		className: 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)]", isEditable && "cursor-text", isFocused && "outline-primary shadow-[0_0_0_4px_hsl(var(--primary)/0.14)]", isEditing && "outline-primary bg-background/80 shadow-[0_0_0_4px_hsl(var(--primary)/0.18)]"),
+		children: isEditing ? editor : children
+	});
 }
 function childrenToEditableValue(children) {
 	if (children === null || children === void 0 || typeof children === "boolean") return "";