@questpie/admin 1.1.1 → 3.0.0

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

@@ -0,0 +1,227 @@
+"use client";
+
+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";
+
+//#region src/client/preview/preview-field.tsx
+/**
+* PreviewField Component
+*
+* Wrapper component that makes fields clickable in preview mode.
+* When clicked, signals to admin to focus that field in the form.
+*/
+const PreviewContext = React.createContext(null);
+/**
+* Provider for preview mode context.
+* Use this at the root of your preview page.
+*/
+function PreviewProvider(t0) {
+	const $ = c(7);
+	const { isPreviewMode, focusedField, onFieldClick, children } = t0;
+	let t1;
+	if ($[0] !== focusedField || $[1] !== isPreviewMode || $[2] !== onFieldClick) {
+		t1 = {
+			isPreviewMode,
+			focusedField,
+			handleFieldClick: onFieldClick
+		};
+		$[0] = focusedField;
+		$[1] = isPreviewMode;
+		$[2] = onFieldClick;
+		$[3] = t1;
+	} else t1 = $[3];
+	const value = t1;
+	let t2;
+	if ($[4] !== children || $[5] !== value) {
+		t2 = /* @__PURE__ */ jsx(PreviewContext.Provider, {
+			value,
+			children
+		});
+		$[4] = children;
+		$[5] = value;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+}
+/**
+* Hook to access preview context.
+*/
+function usePreviewContext() {
+	return React.useContext(PreviewContext);
+}
+/**
+* Wrapper that makes a field clickable in preview mode.
+*
+* When clicked in preview, signals to admin to focus that field in the form.
+* Automatically resolves field paths using block scope context if available.
+*
+* @example
+* ```tsx
+* // Regular field
+* <PreviewField field="title" as="h1" className="text-4xl">
+*   {data.title}
+* </PreviewField>
+*
+* // Relation field
+* <PreviewField field="author" fieldType="relation">
+*   {data.author.name}
+* </PreviewField>
+*
+* // Inside a block (auto-resolves to content._values.{blockId}.title)
+* <PreviewField field="title">
+*   {values.title}
+* </PreviewField>
+* ```
+*/
+function PreviewField(t0) {
+	const $ = c(21);
+	const { field, fieldType: t1, children, as: t2, className, onClick } = t0;
+	const fieldType = t1 === void 0 ? "regular" : t1;
+	const Component = t2 === void 0 ? "div" : t2;
+	const context = usePreviewContext();
+	const blockScope = useBlockScope();
+	const fullPath = useResolveFieldPath(field);
+	if (!context?.isPreviewMode) {
+		let t3$1;
+		if ($[0] !== Component || $[1] !== children || $[2] !== className) {
+			t3$1 = /* @__PURE__ */ jsx(Component, {
+				className,
+				children
+			});
+			$[0] = Component;
+			$[1] = children;
+			$[2] = className;
+			$[3] = t3$1;
+		} else t3$1 = $[3];
+		return t3$1;
+	}
+	const { handleFieldClick, focusedField } = context;
+	const isFocused = focusedField === fullPath;
+	let t3;
+	if ($[4] !== blockScope?.blockId || $[5] !== fieldType || $[6] !== fullPath || $[7] !== handleFieldClick || $[8] !== onClick) {
+		t3 = (e) => {
+			e.stopPropagation();
+			if (onClick) onClick(fullPath, {
+				blockId: blockScope?.blockId,
+				fieldType
+			});
+			else handleFieldClick(fullPath, {
+				blockId: blockScope?.blockId,
+				fieldType
+			});
+		};
+		$[4] = blockScope?.blockId;
+		$[5] = fieldType;
+		$[6] = fullPath;
+		$[7] = handleFieldClick;
+		$[8] = onClick;
+		$[9] = t3;
+	} else t3 = $[9];
+	const handleClick = t3;
+	const t4 = blockScope?.blockId;
+	const t5 = isFocused && "outline-primary outline outline-2 outline-offset-2";
+	let t6;
+	if ($[10] !== className || $[11] !== t5) {
+		t6 = cn(className, "group relative cursor-pointer transition-all duration-150", "hover:outline-primary/60 hover:hover:outline hover:outline-2 hover:outline-offset-2 hover:outline-dashed", t5);
+		$[10] = className;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== Component || $[14] !== children || $[15] !== fieldType || $[16] !== fullPath || $[17] !== handleClick || $[18] !== t4 || $[19] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Component, {
+			"data-preview-field": fullPath,
+			"data-block-id": t4,
+			"data-field-type": fieldType,
+			onClick: handleClick,
+			className: t6,
+			children
+		});
+		$[13] = Component;
+		$[14] = children;
+		$[15] = fieldType;
+		$[16] = fullPath;
+		$[17] = handleClick;
+		$[18] = t4;
+		$[19] = t6;
+		$[20] = t7;
+	} else t7 = $[20];
+	return t7;
+}
+/**
+* Standalone PreviewField that works without context.
+* Useful when you can't use PreviewProvider.
+*/
+function StandalonePreviewField(t0) {
+	const $ = c(20);
+	const { field, fieldType: t1, children, as: t2, className, isPreviewMode, isFocused, onFieldClick } = t0;
+	const fieldType = t1 === void 0 ? "regular" : t1;
+	const Component = t2 === void 0 ? "div" : t2;
+	const blockScope = useBlockScope();
+	const fullPath = useResolveFieldPath(field);
+	if (!isPreviewMode) {
+		let t3$1;
+		if ($[0] !== Component || $[1] !== children || $[2] !== className) {
+			t3$1 = /* @__PURE__ */ jsx(Component, {
+				className,
+				children
+			});
+			$[0] = Component;
+			$[1] = children;
+			$[2] = className;
+			$[3] = t3$1;
+		} else t3$1 = $[3];
+		return t3$1;
+	}
+	let t3;
+	if ($[4] !== blockScope?.blockId || $[5] !== fieldType || $[6] !== fullPath || $[7] !== onFieldClick) {
+		t3 = (e) => {
+			e.stopPropagation();
+			onFieldClick(fullPath, {
+				blockId: blockScope?.blockId,
+				fieldType
+			});
+		};
+		$[4] = blockScope?.blockId;
+		$[5] = fieldType;
+		$[6] = fullPath;
+		$[7] = onFieldClick;
+		$[8] = t3;
+	} else t3 = $[8];
+	const handleClick = t3;
+	const t4 = blockScope?.blockId;
+	const t5 = isFocused && "outline-primary outline outline-2 outline-offset-2";
+	let t6;
+	if ($[9] !== className || $[10] !== t5) {
+		t6 = cn(className, "group relative cursor-pointer transition-all duration-150", "hover:outline-primary/60 hover:hover:outline hover:outline-2 hover:outline-offset-2 hover:outline-dashed", t5);
+		$[9] = className;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== Component || $[13] !== children || $[14] !== fieldType || $[15] !== fullPath || $[16] !== handleClick || $[17] !== t4 || $[18] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Component, {
+			"data-preview-field": fullPath,
+			"data-block-id": t4,
+			"data-field-type": fieldType,
+			onClick: handleClick,
+			className: t6,
+			children
+		});
+		$[12] = Component;
+		$[13] = children;
+		$[14] = fieldType;
+		$[15] = fullPath;
+		$[16] = handleClick;
+		$[17] = t4;
+		$[18] = t6;
+		$[19] = t7;
+	} else t7 = $[19];
+	return t7;
+}
+
+//#endregion
+export { PreviewField, PreviewProvider, StandalonePreviewField, usePreviewContext };

package/dist/client/preview/types.d.mts

@@ -0,0 +1,114 @@
+//#region src/client/preview/types.d.ts
+/**
+ * Collection Preview Types
+ *
+ * PostMessage protocol and types for live preview communication
+ * between admin and preview iframe.
+ */
+/**
+ * Signal preview to refresh (invalidate and re-run loader).
+ */
+type PreviewRefreshMessage = {
+  type: "PREVIEW_REFRESH";
+  /** Optional hint about which field changed */
+  changedField?: string;
+};
+/**
+ * Select a block in the preview.
+ */
+type SelectBlockMessage = {
+  type: "SELECT_BLOCK";
+  /** Block ID to select */
+  blockId: string;
+};
+/**
+ * Focus a field in the preview.
+ */
+type FocusFieldMessage = {
+  type: "FOCUS_FIELD";
+  /** Field path to focus (supports full scoped paths) */
+  fieldPath: string;
+};
+/**
+ * All messages from Admin to Preview.
+ */
+type AdminToPreviewMessage = PreviewRefreshMessage | SelectBlockMessage | FocusFieldMessage;
+/**
+ * Preview is ready to receive data.
+ */
+type PreviewReadyMessage = {
+  type: "PREVIEW_READY";
+};
+/**
+ * A field was clicked in the preview.
+ */
+type FieldClickedMessage = {
+  type: "FIELD_CLICKED";
+  /** Full scoped field path */
+  fieldPath: string;
+  /** Block context hint */
+  blockId?: string;
+  /** Field type for routing */
+  fieldType?: "regular" | "block" | "relation";
+};
+/**
+ * A block was clicked in the preview.
+ */
+type BlockClickedMessage = {
+  type: "BLOCK_CLICKED";
+  /** Block ID that was clicked */
+  blockId: string;
+};
+/**
+ * Preview refresh completed.
+ * Sent after preview successfully re-runs loader.
+ */
+type RefreshCompleteMessage = {
+  type: "REFRESH_COMPLETE";
+  /** Timestamp of completion */
+  timestamp: number;
+};
+/**
+ * All messages from Preview to Admin.
+ */
+type PreviewToAdminMessage = PreviewReadyMessage | FieldClickedMessage | BlockClickedMessage | RefreshCompleteMessage;
+/**
+ * Preview configuration for a collection.
+ */
+type PreviewConfig = {
+  /**
+   * URL builder for preview iframe.
+   * Receives current form values and locale.
+   */
+  url: (values: Record<string, unknown>, locale: string) => string;
+  /**
+   * Enable/disable preview.
+   * @default true if url is defined
+   */
+  enabled?: boolean;
+  /**
+   * Preview pane position.
+   * @default "right"
+   */
+  position?: "right" | "bottom" | "modal";
+  /**
+   * Default preview pane size (percentage).
+   * @default 50
+   */
+  defaultSize?: number;
+  /**
+   * Minimum pane size (percentage).
+   * @default 30
+   */
+  minSize?: number;
+};
+/**
+ * Check if a message is from admin to preview.
+ */
+declare function isAdminToPreviewMessage(data: unknown): data is AdminToPreviewMessage;
+/**
+ * Check if a message is from preview to admin.
+ */
+declare function isPreviewToAdminMessage(data: unknown): data is PreviewToAdminMessage;
+//#endregion
+export { AdminToPreviewMessage, BlockClickedMessage, FieldClickedMessage, FocusFieldMessage, PreviewConfig, PreviewReadyMessage, PreviewRefreshMessage, PreviewToAdminMessage, RefreshCompleteMessage, SelectBlockMessage, isAdminToPreviewMessage, isPreviewToAdminMessage };

package/dist/client/preview/types.mjs

@@ -0,0 +1,20 @@
+//#region src/client/preview/types.ts
+/**
+* Check if a message is from admin to preview.
+*/
+function isAdminToPreviewMessage(data) {
+	if (!data || typeof data !== "object") return false;
+	const msg = data;
+	return msg.type === "PREVIEW_REFRESH" || msg.type === "SELECT_BLOCK" || msg.type === "FOCUS_FIELD";
+}
+/**
+* Check if a message is from preview to admin.
+*/
+function isPreviewToAdminMessage(data) {
+	if (!data || typeof data !== "object") return false;
+	const msg = data;
+	return msg.type === "PREVIEW_READY" || msg.type === "FIELD_CLICKED" || msg.type === "BLOCK_CLICKED" || msg.type === "REFRESH_COMPLETE";
+}
+
+//#endregion
+export { isAdminToPreviewMessage, isPreviewToAdminMessage };

package/dist/client/preview/use-collection-preview.d.mts

@@ -0,0 +1,70 @@
+//#region src/client/preview/use-collection-preview.d.ts
+/**
+ * useCollectionPreview Hook
+ *
+ * Hook for frontend pages to receive live preview data from admin.
+ * Handles postMessage communication with the admin iframe parent.
+ */
+type UseCollectionPreviewOptions<TData> = {
+  /** Server-loaded data (from loader/SSR) */
+  initialData: TData;
+  /**
+   * Callback to refresh data (e.g., router.invalidate()).
+   * Required for preview functionality.
+   */
+  onRefresh: () => void | Promise<void>;
+};
+type UseCollectionPreviewResult<TData> = {
+  /** Current data (from initialData, refreshed via onRefresh) */
+  data: TData;
+  /** Whether we're in preview mode (inside admin iframe) */
+  isPreviewMode: boolean;
+  /** Currently selected block ID */
+  selectedBlockId: string | null;
+  /** Focused field path */
+  focusedField: string | null;
+  /** Call when a field is clicked in preview */
+  handleFieldClick: (fieldPath: string, context?: {
+    blockId?: string;
+    fieldType?: "regular" | "block" | "relation";
+  }) => void;
+  /** Call when a block is clicked in preview */
+  handleBlockClick: (blockId: string) => void;
+};
+/**
+ * Hook for receiving live preview data from admin.
+ *
+ * Use this in your frontend page components to enable live preview.
+ *
+ * @example
+ * ```tsx
+ * function PageRoute() {
+ *   const loaderData = Route.useLoaderData();
+ *   const router = useRouter();
+ *
+ *   const { data, isPreviewMode, selectedBlockId, handleBlockClick } =
+ *     useCollectionPreview({
+ *       initialData: loaderData.page,
+ *       onRefresh: () => router.invalidate(),
+ *     });
+ *
+ *   return (
+ *     <article>
+ *       <PreviewField field="title" as="h1">{data.title}</PreviewField>
+ *       <BlockRenderer
+ *         content={data.content}
+ *         blocks={blocks}
+ *         selectedBlockId={selectedBlockId}
+ *         onBlockClick={handleBlockClick}
+ *       />
+ *     </article>
+ *   );
+ * }
+ * ```
+ */
+declare function useCollectionPreview<TData extends Record<string, unknown>>({
+  initialData,
+  onRefresh
+}: UseCollectionPreviewOptions<TData>): UseCollectionPreviewResult<TData>;
+//#endregion
+export { UseCollectionPreviewOptions, UseCollectionPreviewResult, useCollectionPreview };

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

@@ -0,0 +1,163 @@
+"use client";
+
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+
+//#region src/client/preview/use-collection-preview.ts
+/**
+* useCollectionPreview Hook
+*
+* Hook for frontend pages to receive live preview data from admin.
+* Handles postMessage communication with the admin iframe parent.
+*/
+/**
+* Hook for receiving live preview data from admin.
+*
+* Use this in your frontend page components to enable live preview.
+*
+* @example
+* ```tsx
+* function PageRoute() {
+*   const loaderData = Route.useLoaderData();
+*   const router = useRouter();
+*
+*   const { data, isPreviewMode, selectedBlockId, handleBlockClick } =
+*     useCollectionPreview({
+*       initialData: loaderData.page,
+*       onRefresh: () => router.invalidate(),
+*     });
+*
+*   return (
+*     <article>
+*       <PreviewField field="title" as="h1">{data.title}</PreviewField>
+*       <BlockRenderer
+*         content={data.content}
+*         blocks={blocks}
+*         selectedBlockId={selectedBlockId}
+*         onBlockClick={handleBlockClick}
+*       />
+*     </article>
+*   );
+* }
+* ```
+*/
+function useCollectionPreview(t0) {
+	const $ = c(11);
+	const { initialData, onRefresh } = t0;
+	const [selectedBlockId, setSelectedBlockId] = React.useState(null);
+	const [focusedField, setFocusedField] = React.useState(null);
+	let t1;
+	bb0: {
+		if (typeof window === "undefined") {
+			t1 = false;
+			break bb0;
+		}
+		try {
+			t1 = window.self !== window.top;
+		} catch {
+			t1 = true;
+		}
+	}
+	const isPreviewMode = t1;
+	const onRefreshRef = React.useRef(onRefresh);
+	let t2;
+	let t3;
+	if ($[0] !== onRefresh) {
+		t2 = () => {
+			onRefreshRef.current = onRefresh;
+		};
+		t3 = [onRefresh];
+		$[0] = onRefresh;
+		$[1] = t2;
+		$[2] = t3;
+	} else {
+		t2 = $[1];
+		t3 = $[2];
+	}
+	React.useEffect(t2, t3);
+	let t4;
+	let t5;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => {
+			if (!isPreviewMode) return;
+			window.parent.postMessage({ type: "PREVIEW_READY" }, "*");
+			const handleMessage = async (event) => {
+				const message = event.data;
+				if (!message || typeof message !== "object" || !message.type) return;
+				bb32: switch (message.type) {
+					case "PREVIEW_REFRESH":
+						await onRefreshRef.current();
+						window.parent.postMessage({
+							type: "REFRESH_COMPLETE",
+							timestamp: Date.now()
+						}, "*");
+						break bb32;
+					case "SELECT_BLOCK":
+						setSelectedBlockId(message.blockId);
+						break bb32;
+					case "FOCUS_FIELD":
+						setFocusedField(message.fieldPath);
+						setTimeout(() => {
+							const element = document.querySelector(`[data-preview-field="${message.fieldPath}"]`);
+							if (element) element.scrollIntoView({
+								behavior: "smooth",
+								block: "center"
+							});
+						}, 150);
+				}
+			};
+			window.addEventListener("message", handleMessage);
+			return () => window.removeEventListener("message", handleMessage);
+		};
+		t5 = [isPreviewMode];
+		$[3] = t4;
+		$[4] = t5;
+	} else {
+		t4 = $[3];
+		t5 = $[4];
+	}
+	React.useEffect(t4, t5);
+	let t6;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (fieldPath, context) => {
+			if (isPreviewMode) window.parent.postMessage({
+				type: "FIELD_CLICKED",
+				fieldPath,
+				blockId: context?.blockId,
+				fieldType: context?.fieldType
+			}, "*");
+		};
+		$[5] = t6;
+	} else t6 = $[5];
+	const handleFieldClick = t6;
+	let t7;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = (blockId) => {
+			if (isPreviewMode) window.parent.postMessage({
+				type: "BLOCK_CLICKED",
+				blockId
+			}, "*");
+		};
+		$[6] = t7;
+	} else t7 = $[6];
+	const handleBlockClick = t7;
+	let t8;
+	if ($[7] !== focusedField || $[8] !== initialData || $[9] !== selectedBlockId) {
+		t8 = {
+			data: initialData,
+			isPreviewMode,
+			selectedBlockId,
+			focusedField,
+			handleFieldClick,
+			handleBlockClick
+		};
+		$[7] = focusedField;
+		$[8] = initialData;
+		$[9] = selectedBlockId;
+		$[10] = t8;
+	} else t8 = $[10];
+	return t8;
+}
+
+//#endregion
+export { useCollectionPreview };

package/dist/client/runtime/content-locales-provider.d.mts

@@ -0,0 +1 @@
+import { ReactElement, ReactNode } from "react";