@questpie/admin 1.1.1 → 3.0.0

package/dist/client/lib/utils.mjs

@@ -0,0 +1,23 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region src/client/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+/**
+* Format a string for display by converting camelCase/PascalCase to Title Case with spaces.
+*
+* Use this for formatting field names, collection names, column headers, etc.
+*
+* @example
+* formatLabel("blogPosts") // "Blog Posts"
+* formatLabel("userSettings") // "User Settings"
+* formatLabel("firstName") // "First Name"
+*/
+function formatLabel(str) {
+	return str.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim();
+}
+
+//#endregion
+export { cn, formatLabel };

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

@@ -0,0 +1,73 @@
+import * as React from "react";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
+
+//#region src/client/preview/block-scope-context.d.ts
+
+type BlockScopeContextValue = {
+  /** Current block ID */
+  blockId: string;
+  /** Field path prefix (e.g., "content._values.abc123") */
+  fieldPrefix: string;
+};
+type BlockScopeProviderProps = {
+  /** Block ID for this scope */
+  blockId: string;
+  /** Base path for blocks field (e.g., "content._values") */
+  basePath?: string;
+  children: React.ReactNode;
+};
+/**
+ * Provides block scope context for field path resolution.
+ *
+ * Automatically wraps each block in BlockRenderer to enable
+ * PreviewField components to resolve full scoped paths.
+ *
+ * @example
+ * ```tsx
+ * <BlockScopeProvider blockId="abc123" basePath="content._values">
+ *   <PreviewField field="title">
+ *     {/* Auto-resolves to: content._values.abc123.title *\/}
+ *   </PreviewField>
+ * </BlockScopeProvider>
+ * ```
+ */
+declare function BlockScopeProvider({
+  blockId,
+  basePath,
+  children
+}: BlockScopeProviderProps): react_jsx_runtime22.JSX.Element;
+/**
+ * Get current block scope context.
+ *
+ * Returns null if not inside a BlockScopeProvider.
+ *
+ * @example
+ * ```tsx
+ * const scope = useBlockScope();
+ * if (scope) {
+ *   console.log(scope.blockId); // "abc123"
+ *   console.log(scope.fieldPrefix); // "content._values.abc123"
+ * }
+ * ```
+ */
+declare function useBlockScope(): BlockScopeContextValue | null;
+/**
+ * Resolve a field name to its full scoped path.
+ *
+ * If inside a BlockScopeProvider, prepends the field prefix.
+ * Otherwise, returns the field name as-is.
+ *
+ * @example
+ * ```tsx
+ * // Inside BlockScopeProvider with blockId="abc123"
+ * const fullPath = useResolveFieldPath("title");
+ * // Returns: "content._values.abc123.title"
+ *
+ * // Outside BlockScopeProvider
+ * const fullPath = useResolveFieldPath("title");
+ * // Returns: "title"
+ * ```
+ */
+declare function useResolveFieldPath(fieldName: string): string;
+//#endregion
+export { BlockScopeContextValue, BlockScopeProvider, BlockScopeProviderProps, useBlockScope, useResolveFieldPath };

package/dist/client/preview/block-scope-context.mjs

@@ -0,0 +1,116 @@
+"use client";
+
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/preview/block-scope-context.tsx
+/**
+* Block Scope Context
+*
+* Provides block context for field path resolution in preview mode.
+* Allows PreviewField components to auto-resolve full scoped paths
+* like "content._values.{blockId}.title" from simple field names.
+*/
+const BlockScopeContext = React.createContext(null);
+/**
+* Provides block scope context for field path resolution.
+*
+* Automatically wraps each block in BlockRenderer to enable
+* PreviewField components to resolve full scoped paths.
+*
+* @example
+* ```tsx
+* <BlockScopeProvider blockId="abc123" basePath="content._values">
+*   <PreviewField field="title">
+*     {/* Auto-resolves to: content._values.abc123.title *\/}
+*   </PreviewField>
+* </BlockScopeProvider>
+* ```
+*/
+function BlockScopeProvider(t0) {
+	const $ = c(6);
+	const { blockId, basePath: t1, children } = t0;
+	const basePath = t1 === void 0 ? "content._values" : t1;
+	const parentScope = React.useContext(BlockScopeContext);
+	let t2;
+	bb0: {
+		if (parentScope) {
+			t2 = `${parentScope.fieldPrefix}.${blockId}`;
+			break bb0;
+		}
+		t2 = `${basePath}.${blockId}`;
+	}
+	const fieldPrefix = t2;
+	let t3;
+	if ($[0] !== blockId || $[1] !== fieldPrefix) {
+		t3 = {
+			blockId,
+			fieldPrefix
+		};
+		$[0] = blockId;
+		$[1] = fieldPrefix;
+		$[2] = t3;
+	} else t3 = $[2];
+	const value = t3;
+	let t4;
+	if ($[3] !== children || $[4] !== value) {
+		t4 = /* @__PURE__ */ jsx(BlockScopeContext.Provider, {
+			value,
+			children
+		});
+		$[3] = children;
+		$[4] = value;
+		$[5] = t4;
+	} else t4 = $[5];
+	return t4;
+}
+/**
+* Get current block scope context.
+*
+* Returns null if not inside a BlockScopeProvider.
+*
+* @example
+* ```tsx
+* const scope = useBlockScope();
+* if (scope) {
+*   console.log(scope.blockId); // "abc123"
+*   console.log(scope.fieldPrefix); // "content._values.abc123"
+* }
+* ```
+*/
+function useBlockScope() {
+	return React.useContext(BlockScopeContext);
+}
+/**
+* Resolve a field name to its full scoped path.
+*
+* If inside a BlockScopeProvider, prepends the field prefix.
+* Otherwise, returns the field name as-is.
+*
+* @example
+* ```tsx
+* // Inside BlockScopeProvider with blockId="abc123"
+* const fullPath = useResolveFieldPath("title");
+* // Returns: "content._values.abc123.title"
+*
+* // Outside BlockScopeProvider
+* const fullPath = useResolveFieldPath("title");
+* // Returns: "title"
+* ```
+*/
+function useResolveFieldPath(fieldName) {
+	const scope = useBlockScope();
+	let t0;
+	bb0: {
+		if (!scope) {
+			t0 = fieldName;
+			break bb0;
+		}
+		t0 = `${scope.fieldPrefix}.${fieldName}`;
+	}
+	return t0;
+}
+
+//#endregion
+export { BlockScopeProvider, useBlockScope, useResolveFieldPath };

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

@@ -0,0 +1,5 @@
+import { BlockScopeContextValue, BlockScopeProvider, BlockScopeProviderProps, useBlockScope, useResolveFieldPath } from "./block-scope-context.mjs";
+import { PreviewBanner, PreviewBannerProps } from "./preview-banner.mjs";
+import { PreviewField, PreviewFieldProps, PreviewProvider, StandalonePreviewField, usePreviewContext } from "./preview-field.mjs";
+import { AdminToPreviewMessage, BlockClickedMessage, FieldClickedMessage, FocusFieldMessage, PreviewConfig, PreviewReadyMessage, PreviewRefreshMessage, PreviewToAdminMessage, RefreshCompleteMessage, SelectBlockMessage, isAdminToPreviewMessage, isPreviewToAdminMessage } from "./types.mjs";
+import { UseCollectionPreviewOptions, UseCollectionPreviewResult, useCollectionPreview } from "./use-collection-preview.mjs";

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

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime21 from "react/jsx-runtime";
+
+//#region src/client/preview/preview-banner.d.ts
+
+/**
+ * Preview Banner Component
+ *
+ * Displayed at the top of preview pages when in draft mode.
+ * Allows users to exit preview mode (clear __draft_mode cookie).
+ */
+type PreviewBannerProps = {
+  /** Whether we're in preview mode */
+  isPreviewMode: boolean;
+  /** Custom class name */
+  className?: string;
+  /** Custom exit preview URL (default: /api/preview?disable=true) */
+  exitPreviewUrl?: string;
+};
+/**
+ * Preview mode banner with exit button.
+ *
+ * Shows a sticky banner at the top of the page when in draft/preview mode.
+ * Clicking "Exit Preview" clears the draft mode cookie.
+ *
+ * @example
+ * ```tsx
+ * export default function RootLayout({ children }) {
+ *   const { isPreviewMode } = useCollectionPreview({ ... });
+ *
+ *   return (
+ *     <>
+ *       <PreviewBanner isPreviewMode={isPreviewMode} />
+ *       {children}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function PreviewBanner({
+  isPreviewMode,
+  className,
+  exitPreviewUrl
+}: PreviewBannerProps): react_jsx_runtime21.JSX.Element | null;
+//#endregion
+export { PreviewBanner, PreviewBannerProps };

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

@@ -0,0 +1,134 @@
+"use client";
+
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/preview/preview-banner.tsx
+/**
+* Preview Banner Component
+*
+* Displayed at the top of preview pages when in draft mode.
+* Allows users to exit preview mode (clear __draft_mode cookie).
+*/
+/**
+* Preview mode banner with exit button.
+*
+* Shows a sticky banner at the top of the page when in draft/preview mode.
+* Clicking "Exit Preview" clears the draft mode cookie.
+*
+* @example
+* ```tsx
+* export default function RootLayout({ children }) {
+*   const { isPreviewMode } = useCollectionPreview({ ... });
+*
+*   return (
+*     <>
+*       <PreviewBanner isPreviewMode={isPreviewMode} />
+*       {children}
+*     </>
+*   );
+* }
+* ```
+*/
+function PreviewBanner(t0) {
+	const $ = c(9);
+	const { isPreviewMode, className, exitPreviewUrl: t1 } = t0;
+	const exitPreviewUrl = t1 === void 0 ? "/api/preview?disable=true" : t1;
+	if (!isPreviewMode) return null;
+	let t2;
+	let t3;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			position: "sticky",
+			top: 0,
+			left: 0,
+			right: 0,
+			zIndex: 9999,
+			backgroundColor: "hsl(var(--primary))",
+			color: "hsl(var(--primary-foreground))",
+			padding: "0.5rem 1rem",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: "1rem",
+			fontSize: "0.875rem",
+			fontWeight: 500,
+			borderBottom: "1px solid var(--border)"
+		};
+		t3 = {
+			display: "flex",
+			alignItems: "center",
+			gap: "0.5rem"
+		};
+		$[0] = t2;
+		$[1] = t3;
+	} else {
+		t2 = $[0];
+		t3 = $[1];
+	}
+	let t4;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs("div", {
+			style: t3,
+			children: [/* @__PURE__ */ jsxs("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: "16",
+				height: "16",
+				viewBox: "0 0 256 256",
+				fill: "currentColor",
+				children: [/* @__PURE__ */ jsx("title", { children: "Eye icon" }), /* @__PURE__ */ jsx("path", { d: "M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z" })]
+			}), /* @__PURE__ */ jsx("span", { children: "Preview Mode" })]
+		});
+		$[2] = t4;
+	} else t4 = $[2];
+	let t5;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {
+			padding: "0.25rem 0.75rem",
+			backgroundColor: "rgba(255, 255, 255, 0.2)",
+			border: "1px solid rgba(255, 255, 255, 0.3)",
+			borderRadius: "4px",
+			color: "inherit",
+			textDecoration: "none",
+			fontWeight: 600,
+			fontSize: "0.875rem",
+			cursor: "pointer",
+			transition: "background-color 0.2s"
+		};
+		$[3] = t5;
+	} else t5 = $[3];
+	let t6;
+	if ($[4] !== exitPreviewUrl) {
+		t6 = /* @__PURE__ */ jsx("a", {
+			href: exitPreviewUrl,
+			style: t5,
+			onMouseEnter: _temp,
+			onMouseLeave: _temp2,
+			children: "Exit Preview"
+		});
+		$[4] = exitPreviewUrl;
+		$[5] = t6;
+	} else t6 = $[5];
+	let t7;
+	if ($[6] !== className || $[7] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className,
+			style: t2,
+			children: [t4, t6]
+		});
+		$[6] = className;
+		$[7] = t6;
+		$[8] = t7;
+	} else t7 = $[8];
+	return t7;
+}
+function _temp2(e_0) {
+	e_0.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+}
+function _temp(e) {
+	e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
+}
+
+//#endregion
+export { PreviewBanner };

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

@@ -0,0 +1,107 @@
+import * as React from "react";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
+
+//#region src/client/preview/preview-field.d.ts
+
+type PreviewFieldProps = {
+  /** Field name (for click-to-focus) - will be resolved with block scope if available */
+  field: string;
+  /** Field type for routing (regular, block, or relation) */
+  fieldType?: "regular" | "block" | "relation";
+  /** Content to render */
+  children: React.ReactNode;
+  /** HTML element type */
+  as?: React.ElementType;
+  /** Additional class names */
+  className?: string;
+  /** Click handler (uses context by default) */
+  onClick?: (fieldPath: string, context?: {
+    blockId?: string;
+    fieldType?: "regular" | "block" | "relation";
+  }) => void;
+};
+type PreviewContextValue = {
+  isPreviewMode: boolean;
+  handleFieldClick: (fieldPath: string, context?: {
+    blockId?: string;
+    fieldType?: "regular" | "block" | "relation";
+  }) => void;
+  focusedField: string | null;
+};
+/**
+ * Provider for preview mode context.
+ * Use this at the root of your preview page.
+ */
+declare function PreviewProvider({
+  isPreviewMode,
+  focusedField,
+  onFieldClick,
+  children
+}: {
+  isPreviewMode: boolean;
+  focusedField: string | null;
+  onFieldClick: (fieldPath: string, context?: {
+    blockId?: string;
+    fieldType?: "regular" | "block" | "relation";
+  }) => void;
+  children: React.ReactNode;
+}): react_jsx_runtime18.JSX.Element;
+/**
+ * Hook to access preview context.
+ */
+declare function usePreviewContext(): PreviewContextValue | null;
+/**
+ * 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>
+ * ```
+ */
+declare function PreviewField({
+  field,
+  fieldType,
+  children,
+  as: Component,
+  className,
+  onClick
+}: PreviewFieldProps): react_jsx_runtime18.JSX.Element;
+/**
+ * Standalone PreviewField that works without context.
+ * Useful when you can't use PreviewProvider.
+ */
+declare function StandalonePreviewField({
+  field,
+  fieldType,
+  children,
+  as: Component,
+  className,
+  isPreviewMode,
+  isFocused,
+  onFieldClick
+}: PreviewFieldProps & {
+  isPreviewMode: boolean;
+  isFocused?: boolean;
+  onFieldClick: (fieldPath: string, context?: {
+    blockId?: string;
+    fieldType?: "regular" | "block" | "relation";
+  }) => void;
+}): react_jsx_runtime18.JSX.Element;
+//#endregion
+export { PreviewField, PreviewFieldProps, PreviewProvider, StandalonePreviewField, usePreviewContext };