@questpie/admin 1.1.0 → 2.0.0

package/dist/client/components/media/media-picker-dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-picker-dialog.mjs","names":["React","andConditions: any[]"],"sources":["../../../../src/client/components/media/media-picker-dialog.tsx"],"sourcesContent":["/**\n * MediaPickerDialog Component\n *\n * Dialog for searching and selecting existing assets from the media library.\n * Used in UploadField and UploadManyField to allow browsing existing files.\n *\n * Features:\n * - Search by filename\n * - MIME type filtering\n * - Responsive grid display\n * - Single/multiple selection modes\n * - Pagination support\n *\n * @example\n * ```tsx\n * <MediaPickerDialog\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n *   mode=\"single\"\n *   onSelect={(id) => field.onChange(id)}\n * />\n * ```\n */\n\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport { toast } from \"sonner\";\nimport { useCollectionList } from \"../../hooks/use-collection\";\nimport type { Asset } from \"../../hooks/use-upload\";\nimport { useUploadCollection } from \"../../hooks/use-upload-collection\";\nimport { AssetPreview } from \"../primitives/asset-preview\";\nimport { Button } from \"../ui/button\";\nimport { Input } from \"../ui/input\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"../ui/select\";\nimport {\n\tSheet,\n\tSheetContent,\n\tSheetDescription,\n\tSheetFooter,\n\tSheetHeader,\n\tSheetTitle,\n} from \"../ui/sheet\";\nimport { MediaGrid } from \"./media-grid\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface MediaPickerDialogProps {\n\t/**\n\t * Dialog open state\n\t */\n\topen: boolean;\n\n\t/**\n\t * Called when dialog open state changes\n\t */\n\tonOpenChange: (open: boolean) => void;\n\n\t/**\n\t * Selection mode\n\t * @default \"single\"\n\t */\n\tmode?: \"single\" | \"multiple\";\n\n\t/**\n\t * Accepted MIME types filter\n\t * @example [\"image/*\", \"video/*\"]\n\t */\n\taccept?: string[];\n\n\t/**\n\t * Called when assets are selected\n\t */\n\tonSelect: (ids: string | string[]) => void;\n\n\t/**\n\t * Maximum number of items (for multiple mode)\n\t */\n\tmaxItems?: number;\n\n\t/**\n\t * Target collection\n\t */\n\tcollection?: string;\n}\n\n// ============================================================================\n// MIME Type Filters\n// ============================================================================\n\nconst MIME_TYPE_FILTERS = [\n\t{ value: \"all\", label: \"All Files\", mimePattern: undefined },\n\t{ value: \"images\", label: \"Images\", mimePattern: \"image/\" },\n\t{ value: \"videos\", label: \"Videos\", mimePattern: \"video/\" },\n\t{ value: \"audio\", label: \"Audio\", mimePattern: \"audio/\" },\n\t{ value: \"documents\", label: \"Documents\", mimePattern: \"application/pdf\" },\n];\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function MediaPickerDialog({\n\topen,\n\tonOpenChange,\n\tmode = \"single\",\n\taccept,\n\tonSelect,\n\tmaxItems,\n\tcollection,\n}: MediaPickerDialogProps) {\n\tconst {\n\t\tcollection: resolvedCollection,\n\t\tcollections: availableUploadCollections,\n\t} = useUploadCollection(collection);\n\n\t// State\n\tconst [selectedIds, setSelectedIds] = React.useState<Set<string>>(new Set());\n\tconst [searchQuery, setSearchQuery] = React.useState(\"\");\n\tconst [mimeFilter, setMimeFilter] = React.useState(\"all\");\n\tconst [previewAssetId, setPreviewAssetId] = React.useState<string | null>(\n\t\tnull,\n\t);\n\n\t// Build where clause for query\n\tconst where = React.useMemo(() => {\n\t\tconst andConditions: any[] = [];\n\n\t\t// MIME type filter\n\t\tconst selectedFilter = MIME_TYPE_FILTERS.find(\n\t\t\t(f) => f.value === mimeFilter,\n\t\t);\n\t\tif (selectedFilter?.mimePattern) {\n\t\t\tandConditions.push({\n\t\t\t\tmimeType: { startsWith: selectedFilter.mimePattern },\n\t\t\t});\n\t\t}\n\n\t\t// Accept prop filter\n\t\tif (accept && accept.length > 0) {\n\t\t\tconst acceptPatterns = accept.map((pattern) => {\n\t\t\t\tif (pattern.startsWith(\".\")) {\n\t\t\t\t\treturn { filename: { endsWith: pattern } };\n\t\t\t\t}\n\t\t\t\tif (pattern.endsWith(\"/*\")) {\n\t\t\t\t\t// e.g., \"image/*\" -> \"image/\"\n\t\t\t\t\treturn { mimeType: { startsWith: pattern.slice(0, -1) } };\n\t\t\t\t}\n\t\t\t\t// Exact match\n\t\t\t\treturn { mimeType: pattern };\n\t\t\t});\n\n\t\t\tif (acceptPatterns.length === 1) {\n\t\t\t\tandConditions.push(acceptPatterns[0]);\n\t\t\t} else {\n\t\t\t\tandConditions.push({ OR: acceptPatterns });\n\t\t\t}\n\t\t}\n\n\t\tif (andConditions.length === 0) return undefined;\n\t\tif (andConditions.length === 1) return andConditions[0];\n\t\treturn { AND: andConditions };\n\t}, [mimeFilter, accept]);\n\n\tconst trimmedSearch = searchQuery.trim();\n\n\t// Fetch assets\n\tconst { data, isLoading } = useCollectionList(\n\t\tresolvedCollection || \"\",\n\t\t{\n\t\t\twhere,\n\t\t\tsearch: trimmedSearch || undefined,\n\t\t\tlimit: 50,\n\t\t\torderBy: { createdAt: \"desc\" },\n\t\t},\n\t\t{\n\t\t\tenabled: open && !!resolvedCollection,\n\t\t},\n\t);\n\n\tconst assets = React.useMemo(\n\t\t() => (data?.docs || []) as Asset[],\n\t\t[data?.docs],\n\t);\n\tconst previewAsset = React.useMemo(\n\t\t() => assets.find((asset) => asset.id === previewAssetId) ?? null,\n\t\t[assets, previewAssetId],\n\t);\n\n\t// Reset state when dialog closes\n\tReact.useEffect(() => {\n\t\tif (!open) {\n\t\t\tsetSelectedIds(new Set());\n\t\t\tsetSearchQuery(\"\");\n\t\t\tsetMimeFilter(\"all\");\n\t\t\tsetPreviewAssetId(null);\n\t\t\treturn;\n\t\t}\n\t}, [open]);\n\n\t// Auto-select first asset for preview\n\tReact.useEffect(() => {\n\t\tif (!open || assets.length === 0) return;\n\n\t\tif (!previewAssetId) {\n\t\t\tsetPreviewAssetId(assets[0].id);\n\t\t\treturn;\n\t\t}\n\n\t\tconst stillExists = assets.some((asset) => asset.id === previewAssetId);\n\t\tif (!stillExists) {\n\t\t\tsetPreviewAssetId(assets[0].id);\n\t\t}\n\t}, [open, assets, previewAssetId]);\n\n\t// Handle selection change\n\tconst handleSelectionChange = (ids: Set<string>) => {\n\t\t// Check maxItems for multiple mode\n\t\tif (mode === \"multiple\" && maxItems && ids.size > maxItems) {\n\t\t\ttoast.warning(`Maximum ${maxItems} items allowed`);\n\t\t\treturn;\n\t\t}\n\n\t\tsetSelectedIds(ids);\n\t};\n\n\t// Handle select button click\n\tconst handleSelect = () => {\n\t\tif (!resolvedCollection) {\n\t\t\ttoast.error(\n\t\t\t\tavailableUploadCollections.length > 1\n\t\t\t\t\t? `Multiple upload collections are available (${availableUploadCollections.join(\", \")}). Specify the collection for MediaPickerDialog.`\n\t\t\t\t\t: \"No upload collection is configured for media library.\",\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tif (selectedIds.size === 0) {\n\t\t\ttoast.error(\"Please select at least one asset\");\n\t\t\treturn;\n\t\t}\n\n\t\tif (mode === \"single\") {\n\t\t\tconst [id] = Array.from(selectedIds);\n\t\t\tonSelect(id);\n\t\t} else {\n\t\t\tonSelect(Array.from(selectedIds));\n\t\t}\n\n\t\tonOpenChange(false);\n\t};\n\n\t// Handle cancel\n\tconst handleCancel = () => {\n\t\tonOpenChange(false);\n\t};\n\n\treturn (\n\t\t<Sheet open={open} onOpenChange={onOpenChange}>\n\t\t\t<SheetContent\n\t\t\t\tside=\"right\"\n\t\t\t\tclassName=\"data-[side=right]:sm:max-w-6xl w-full p-0\"\n\t\t\t>\n\t\t\t\t<SheetHeader className=\"px-6 pt-6\">\n\t\t\t\t\t<SheetTitle>Browse Media Library</SheetTitle>\n\t\t\t\t\t<SheetDescription>\n\t\t\t\t\t\t{mode === \"single\"\n\t\t\t\t\t\t\t? \"Select an asset from your library\"\n\t\t\t\t\t\t\t: `Select up to ${maxItems || \"multiple\"} assets`}\n\t\t\t\t\t</SheetDescription>\n\t\t\t\t</SheetHeader>\n\n\t\t\t\t<div className=\"flex flex-1 flex-col gap-4 overflow-hidden px-6 pb-6\">\n\t\t\t\t\t{!resolvedCollection && (\n\t\t\t\t\t\t<div className=\"rounded-lg border border-warning/40 bg-warning/5 p-3 text-sm text-warning\">\n\t\t\t\t\t\t\t{availableUploadCollections.length > 1\n\t\t\t\t\t\t\t\t? `Multiple upload collections are available (${availableUploadCollections.join(\", \")}). Pass the collection prop to choose one.`\n\t\t\t\t\t\t\t\t: \"No upload collection is configured for media library.\"}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Filters */}\n\t\t\t\t\t<div className=\"flex flex-col gap-3 border-b pb-4 sm:flex-row\">\n\t\t\t\t\t\t{/* Search input */}\n\t\t\t\t\t\t<div className=\"relative flex-1\">\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon=\"ph:magnifying-glass-bold\"\n\t\t\t\t\t\t\t\tclassName=\"text-muted-foreground absolute left-3 top-1/2 size-4 -translate-y-1/2\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tplaceholder=\"Search by filename...\"\n\t\t\t\t\t\t\t\tvalue={searchQuery}\n\t\t\t\t\t\t\t\tonChange={(e) => setSearchQuery(e.target.value)}\n\t\t\t\t\t\t\t\tclassName=\"pl-9\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{/* MIME type filter */}\n\t\t\t\t\t\t{!accept && (\n\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\tvalue={mimeFilter}\n\t\t\t\t\t\t\t\tonValueChange={(value) => setMimeFilter(value || \"all\")}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<SelectTrigger className=\"w-full sm:w-[180px]\">\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:funnel-simple-bold\" className=\"size-4\" />\n\t\t\t\t\t\t\t\t\t\t<SelectValue />\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t{MIME_TYPE_FILTERS.map((filter) => (\n\t\t\t\t\t\t\t\t\t\t<SelectItem key={filter.value} value={filter.value}>\n\t\t\t\t\t\t\t\t\t\t\t{filter.label}\n\t\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Assets + Preview */}\n\t\t\t\t\t<div className=\"flex flex-1 gap-4 overflow-hidden\">\n\t\t\t\t\t\t<div className=\"flex-1 overflow-y-auto pr-1\">\n\t\t\t\t\t\t\t<MediaGrid\n\t\t\t\t\t\t\t\tassets={assets}\n\t\t\t\t\t\t\t\tselectedIds={selectedIds}\n\t\t\t\t\t\t\t\tonSelectionChange={handleSelectionChange}\n\t\t\t\t\t\t\t\tselectionMode={mode}\n\t\t\t\t\t\t\t\tloading={isLoading}\n\t\t\t\t\t\t\t\tcolumns={5}\n\t\t\t\t\t\t\t\tclassName=\"gap-2\"\n\t\t\t\t\t\t\t\tonAssetClick={(asset) => setPreviewAssetId(asset.id)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"hidden lg:flex w-80 xl:w-96 shrink-0 flex-col gap-3 border-l pl-4\">\n\t\t\t\t\t\t\t<p className=\"text-muted-foreground text-xs uppercase tracking-wide\">\n\t\t\t\t\t\t\t\tPreview\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t{previewAsset ? (\n\t\t\t\t\t\t\t\t<AssetPreview asset={previewAsset} variant=\"card\" />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div className=\"flex items-center justify-center rounded-lg border border-dashed p-6 text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t\tSelect an asset to preview\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"lg:hidden border-t pt-4\">\n\t\t\t\t\t\t{previewAsset ? (\n\t\t\t\t\t\t\t<AssetPreview asset={previewAsset} variant=\"compact\" />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-center rounded-lg border border-dashed p-4 text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\tSelect an asset to preview\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<SheetFooter className=\"border-t px-6 py-4\">\n\t\t\t\t\t<div className=\"flex w-full justify-end gap-2\">\n\t\t\t\t\t\t<Button variant=\"outline\" onClick={handleCancel}>\n\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={handleSelect}\n\t\t\t\t\t\t\tdisabled={selectedIds.size === 0 || isLoading}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tSelect {selectedIds.size > 0 && `(${selectedIds.size})`}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t</SheetFooter>\n\t\t\t</SheetContent>\n\t\t</Sheet>\n\t);\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,211 @@
+"use client";
+
+import { useTranslation } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { selectBasePath, selectNavigate, useAdminStore } from "../../runtime/provider.mjs";
+import { LocaleScopeProvider } from "../../runtime/locale-scope.mjs";
+import { Button } from "../ui/button.mjs";
+import { Tabs, TabsList, TabsTrigger } from "../ui/tabs.mjs";
+import { useIsMobile } from "../../hooks/use-media-query.mjs";
+import { FocusProvider, parsePreviewFieldPath, scrollFieldIntoView, useFocus } from "../../context/focus-context.mjs";
+import { PreviewPane } from "./preview-pane.mjs";
+import FormView from "../../views/collection/form-view.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/preview/live-preview-mode.tsx
+/**
+* LivePreviewMode Component
+*
+* Fullscreen overlay for live preview editing.
+* Left side: Form panel (inline, not portal)
+* Right side: Preview iframe
+* Mobile: Tabs to switch between form and preview
+*/
+const LivePreviewContext = React$1.createContext(null);
+function useLivePreviewContext() {
+	return React$1.useContext(LivePreviewContext);
+}
+function LivePreviewContent({ onClose, collection, itemId, config, allCollectionsConfig, registry, previewUrl, onSuccess, previewRef }) {
+	const { t } = useTranslation();
+	const isMobile = useIsMobile();
+	const navigate = useAdminStore(selectNavigate);
+	const basePath = useAdminStore(selectBasePath);
+	const [activeTab, setActiveTab] = React$1.useState("form");
+	const focusContext = useFocus();
+	const focusState = focusContext.state;
+	const handleExitPreview = React$1.useCallback(() => {
+		window.location.href = "/api/preview?disable=true";
+	}, []);
+	React$1.useEffect(() => {
+		if (!previewRef.current) return;
+		if (focusState.type === "field") 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);
+		} else {
+			const fullPath = `content._values.${focusState.blockId}`;
+			previewRef.current.sendFocusToPreview(fullPath);
+		}
+	}, [focusState, previewRef]);
+	const handlePreviewFieldClick = React$1.useCallback((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);
+	}, [focusContext]);
+	const handlePreviewBlockClick = React$1.useCallback((blockId) => {
+		focusContext.focusBlock(blockId);
+	}, [focusContext]);
+	const resolvedConfig = config;
+	const resolvedAllCollections = allCollectionsConfig;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fixed inset-0 z-50 bg-background flex flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between border-b px-4 py-2 shrink-0",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:eye",
+						className: "h-4 w-4 text-muted-foreground"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: t("preview.livePreview")
+					})]
+				}),
+				isMobile && /* @__PURE__ */ jsx(Tabs, {
+					value: activeTab,
+					onValueChange: (v) => setActiveTab(v),
+					className: "mx-4",
+					children: /* @__PURE__ */ jsxs(TabsList, {
+						className: "h-8",
+						children: [/* @__PURE__ */ jsx(TabsTrigger, {
+							value: "form",
+							className: "text-xs px-3",
+							children: t("common.form")
+						}), /* @__PURE__ */ jsx(TabsTrigger, {
+							value: "preview",
+							className: "text-xs px-3",
+							children: t("preview.title")
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: handleExitPreview,
+						className: "gap-1.5",
+						title: "Exit preview mode and clear draft cookie",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:sign-out",
+							className: "h-4 w-4"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "hidden sm:inline",
+							children: "Exit Preview"
+						})]
+					}), /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "icon",
+						onClick: onClose,
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:x",
+							className: "h-4 w-4"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: t("common.close")
+						})]
+					})]
+				})
+			]
+		}), isMobile ? /* @__PURE__ */ jsx("div", {
+			className: "flex-1 min-h-0",
+			children: activeTab === "form" ? /* @__PURE__ */ jsx("div", {
+				className: "h-full overflow-y-auto p-6",
+				"data-preview-form-scope": true,
+				children: /* @__PURE__ */ jsx(LocaleScopeProvider, { children: /* @__PURE__ */ jsx(FormView, {
+					collection,
+					id: itemId,
+					config: resolvedConfig,
+					allCollectionsConfig: resolvedAllCollections,
+					registry,
+					navigate,
+					basePath,
+					onSuccess,
+					showMeta: false
+				}) })
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "h-full",
+				children: /* @__PURE__ */ jsx(PreviewPane, {
+					ref: previewRef,
+					url: previewUrl,
+					onFieldClick: handlePreviewFieldClick,
+					onBlockClick: handlePreviewBlockClick
+				})
+			})
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 flex min-h-0",
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-preview-form-scope": true,
+				className: cn("h-full border-r bg-background shrink-0", "w-full sm:max-w-2xl", "overflow-y-auto p-6"),
+				children: /* @__PURE__ */ jsx(LocaleScopeProvider, { children: /* @__PURE__ */ jsx(FormView, {
+					collection,
+					id: itemId,
+					config: resolvedConfig,
+					allCollectionsConfig: resolvedAllCollections,
+					registry,
+					navigate,
+					basePath,
+					onSuccess,
+					showMeta: false
+				}) })
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex-1 min-w-0 bg-muted/30",
+				children: /* @__PURE__ */ jsx(PreviewPane, {
+					ref: previewRef,
+					url: previewUrl,
+					onFieldClick: handlePreviewFieldClick,
+					onBlockClick: handlePreviewBlockClick
+				})
+			})]
+		})]
+	});
+}
+function LivePreviewMode({ open, onClose, collection, itemId, config, allCollectionsConfig, registry, previewUrl, onSuccess }) {
+	const previewRef = React$1.useRef(null);
+	const contextValue = React$1.useMemo(() => ({ triggerPreviewRefresh: () => {
+		previewRef.current?.triggerRefresh();
+	} }), []);
+	const handleFocusChange = React$1.useCallback((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 (!open) return null;
+	return /* @__PURE__ */ jsx(LivePreviewContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(FocusProvider, {
+			onFocusChange: handleFocusChange,
+			children: /* @__PURE__ */ jsx(LivePreviewContent, {
+				open,
+				onClose,
+				collection,
+				itemId,
+				config,
+				allCollectionsConfig,
+				registry,
+				previewUrl,
+				onSuccess,
+				previewRef
+			})
+		})
+	});
+}
+
+//#endregion
+export { LivePreviewMode, useLivePreviewContext };
+//# sourceMappingURL=live-preview-mode.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"live-preview-mode.mjs","names":["React"],"sources":["../../../../src/client/components/preview/live-preview-mode.tsx"],"sourcesContent":["/**\n * LivePreviewMode Component\n *\n * Fullscreen overlay for live preview editing.\n * Left side: Form panel (inline, not portal)\n * Right side: Preview iframe\n * Mobile: Tabs to switch between form and preview\n */\n\n\"use client\";\n\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport type { CollectionBuilderState } from \"../../builder/types/collection-types.js\";\nimport type { ComponentRegistry } from \"../../builder/types/field-types.js\";\nimport {\n  FocusProvider,\n  type FocusState,\n  parsePreviewFieldPath,\n  scrollFieldIntoView,\n  useFocus,\n} from \"../../context/focus-context.js\";\nimport { useIsMobile } from \"../../hooks/use-media-query.js\";\nimport { useTranslation } from \"../../i18n/hooks.js\";\nimport { cn } from \"../../lib/utils.js\";\nimport {\n  LocaleScopeProvider,\n  selectBasePath,\n  selectNavigate,\n  useAdminStore,\n} from \"../../runtime/index.js\";\nimport FormView from \"../../views/collection/form-view.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Tabs, TabsList, TabsTrigger } from \"../ui/tabs.js\";\nimport { PreviewPane, type PreviewPaneRef } from \"./preview-pane.js\";\n\n// ============================================================================\n// Context\n// ============================================================================\n\ntype LivePreviewContextValue = {\n  triggerPreviewRefresh: () => void;\n};\n\nconst LivePreviewContext = React.createContext<LivePreviewContextValue | null>(\n  null,\n);\n\nexport function useLivePreviewContext() {\n  return React.useContext(LivePreviewContext);\n}\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface LivePreviewModeProps {\n  /** Whether preview mode is open */\n  open: boolean;\n  /** Callback to close preview mode */\n  onClose: () => void;\n  /** Collection name */\n  collection: string;\n  /** Item ID (for edit mode) */\n  itemId?: string;\n  /** Collection config */\n  config?: any;\n  /** All collections config (for embedded) */\n  allCollectionsConfig?: Record<string, any>;\n  /** Component registry */\n  registry?: ComponentRegistry;\n  /** Preview URL */\n  previewUrl: string;\n  /** Callback after successful save */\n  onSuccess?: (data: any) => void;\n}\n\n// ============================================================================\n// Inner Component (with FocusContext access)\n// ============================================================================\n\ntype LivePreviewContentProps = LivePreviewModeProps & {\n  previewRef: React.RefObject<PreviewPaneRef | null>;\n};\n\nfunction LivePreviewContent({\n  onClose,\n  collection,\n  itemId,\n  config,\n  allCollectionsConfig,\n  registry,\n  previewUrl,\n  onSuccess,\n  previewRef,\n}: LivePreviewContentProps) {\n  const { t } = useTranslation();\n  const isMobile = useIsMobile();\n  const navigate = useAdminStore(selectNavigate);\n  const basePath = useAdminStore(selectBasePath);\n  const [activeTab, setActiveTab] = React.useState<\"form\" | \"preview\">(\"form\");\n\n  // Access FocusContext\n  const focusContext = useFocus();\n  const focusState = focusContext.state; // Extract for effect dependency\n\n  // Handle exit preview (clear draft mode cookie)\n  const handleExitPreview = React.useCallback(() => {\n    // Redirect to exit preview endpoint\n    window.location.href = \"/api/preview?disable=true\";\n  }, []);\n\n  // Sync focus changes to preview iframe\n  React.useEffect(() => {\n    if (!previewRef.current) return;\n\n    if (focusState.type === \"field\") {\n      previewRef.current.sendFocusToPreview(focusState.fieldPath);\n    } else if (focusState.type === \"block\") {\n      // Send full block field path\n      if (focusState.fieldPath) {\n        const fullPath = `content._values.${focusState.blockId}.${focusState.fieldPath}`;\n        previewRef.current.sendFocusToPreview(fullPath);\n      } else {\n        // Just the block itself\n        const fullPath = `content._values.${focusState.blockId}`;\n        previewRef.current.sendFocusToPreview(fullPath);\n      }\n    }\n  }, [focusState, previewRef]);\n\n  // Preview click handlers - update FocusContext state\n  const handlePreviewFieldClick = React.useCallback(\n    (fieldPath: string, context?: any) => {\n      const state = parsePreviewFieldPath(fieldPath, context);\n\n      if (state.type === \"field\") {\n        focusContext.focusField(state.fieldPath);\n      } else if (state.type === \"block\") {\n        focusContext.focusBlock(state.blockId, state.fieldPath);\n      } else if (state.type === \"relation\") {\n        focusContext.focusRelation(state.fieldPath, state.targetCollection);\n      }\n    },\n    [focusContext],\n  );\n\n  const handlePreviewBlockClick = React.useCallback(\n    (blockId: string) => {\n      focusContext.focusBlock(blockId);\n    },\n    [focusContext],\n  );\n\n  // Use provided config or undefined (schema-driven)\n  const resolvedConfig = config;\n  const resolvedAllCollections = allCollectionsConfig;\n\n  return (\n    <div className=\"fixed inset-0 z-50 bg-background flex flex-col\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between border-b px-4 py-2 shrink-0\">\n        <div className=\"flex items-center gap-2\">\n          <Icon icon=\"ph:eye\" className=\"h-4 w-4 text-muted-foreground\" />\n          <span className=\"font-medium\">{t(\"preview.livePreview\")}</span>\n        </div>\n\n        {/* Mobile tabs in header */}\n        {isMobile && (\n          <Tabs\n            value={activeTab}\n            onValueChange={(v) => setActiveTab(v as \"form\" | \"preview\")}\n            className=\"mx-4\"\n          >\n            <TabsList className=\"h-8\">\n              <TabsTrigger value=\"form\" className=\"text-xs px-3\">\n                {t(\"common.form\")}\n              </TabsTrigger>\n              <TabsTrigger value=\"preview\" className=\"text-xs px-3\">\n                {t(\"preview.title\")}\n              </TabsTrigger>\n            </TabsList>\n          </Tabs>\n        )}\n\n        <div className=\"flex items-center gap-1\">\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={handleExitPreview}\n            className=\"gap-1.5\"\n            title=\"Exit preview mode and clear draft cookie\"\n          >\n            <Icon icon=\"ph:sign-out\" className=\"h-4 w-4\" />\n            <span className=\"hidden sm:inline\">Exit Preview</span>\n          </Button>\n          <Button variant=\"ghost\" size=\"icon\" onClick={onClose}>\n            <Icon icon=\"ph:x\" className=\"h-4 w-4\" />\n            <span className=\"sr-only\">{t(\"common.close\")}</span>\n          </Button>\n        </div>\n      </div>\n\n      {/* Content */}\n      {isMobile ? (\n        /* Mobile: Tabs content */\n        <div className=\"flex-1 min-h-0\">\n          {activeTab === \"form\" ? (\n            <div className=\"h-full overflow-y-auto p-6\" data-preview-form-scope>\n              <LocaleScopeProvider>\n                <FormView\n                  collection={collection}\n                  id={itemId}\n                  config={resolvedConfig}\n                  allCollectionsConfig={resolvedAllCollections}\n                  registry={registry}\n                  navigate={navigate}\n                  basePath={basePath}\n                  onSuccess={onSuccess}\n                  showMeta={false}\n                />\n              </LocaleScopeProvider>\n            </div>\n          ) : (\n            <div className=\"h-full\">\n              <PreviewPane\n                ref={previewRef}\n                url={previewUrl}\n                onFieldClick={handlePreviewFieldClick}\n                onBlockClick={handlePreviewBlockClick}\n              />\n            </div>\n          )}\n        </div>\n      ) : (\n        /* Desktop: Side by side */\n        <div className=\"flex-1 flex min-h-0\">\n          {/* Form panel - fixed width like sheet */}\n          <div\n            data-preview-form-scope\n            className={cn(\n              \"h-full border-r bg-background shrink-0\",\n              \"w-full sm:max-w-2xl\",\n              \"overflow-y-auto p-6\",\n            )}\n          >\n            <LocaleScopeProvider>\n              <FormView\n                collection={collection}\n                id={itemId}\n                config={resolvedConfig}\n                allCollectionsConfig={resolvedAllCollections}\n                registry={registry}\n                navigate={navigate}\n                basePath={basePath}\n                onSuccess={onSuccess}\n                showMeta={false}\n              />\n            </LocaleScopeProvider>\n          </div>\n\n          {/* Preview panel - fills remaining space */}\n          <div className=\"flex-1 min-w-0 bg-muted/30\">\n            <PreviewPane\n              ref={previewRef}\n              url={previewUrl}\n              onFieldClick={handlePreviewFieldClick}\n              onBlockClick={handlePreviewBlockClick}\n            />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport function LivePreviewMode({\n  open,\n  onClose,\n  collection,\n  itemId,\n  config,\n  allCollectionsConfig,\n  registry,\n  previewUrl,\n  onSuccess,\n}: LivePreviewModeProps) {\n  // Create ref for PreviewPane\n  const previewRef = React.useRef<PreviewPaneRef>(null);\n\n  // Create context value with refresh callback\n  const contextValue = React.useMemo(\n    () => ({\n      triggerPreviewRefresh: () => {\n        previewRef.current?.triggerRefresh();\n      },\n    }),\n    [],\n  );\n\n  // Handle focus changes from FocusContext - scroll to and focus the field\n  const handleFocusChange = React.useCallback((state: FocusState) => {\n    if (state.type === \"field\") {\n      scrollFieldIntoView(state.fieldPath);\n    } else if (state.type === \"block\") {\n      // Wait for block form to render before scrolling\n      setTimeout(() => {\n        const fullPath = state.fieldPath\n          ? `content._values.${state.blockId}.${state.fieldPath}`\n          : `content._values.${state.blockId}`;\n        scrollFieldIntoView(fullPath);\n      }, 150);\n    }\n  }, []);\n\n  if (!open) return null;\n\n  return (\n    <LivePreviewContext.Provider value={contextValue}>\n      <FocusProvider onFocusChange={handleFocusChange}>\n        <LivePreviewContent\n          open={open}\n          onClose={onClose}\n          collection={collection}\n          itemId={itemId}\n          config={config}\n          allCollectionsConfig={allCollectionsConfig}\n          registry={registry}\n          previewUrl={previewUrl}\n          onSuccess={onSuccess}\n          previewRef={previewRef}\n        />\n      </FocusProvider>\n    </LivePreviewContext.Provider>\n  );\n}\n\n// ============================================================================\n// Trigger Button Component\n// ============================================================================\n\nexport interface LivePreviewButtonProps {\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport function LivePreviewButton({\n  onClick,\n  disabled,\n}: LivePreviewButtonProps) {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon\"\n      className=\"size-9\"\n      onClick={onClick}\n      disabled={disabled}\n      title=\"Live Preview\"\n    >\n      <Icon icon=\"ph:eye\" className=\"size-4\" />\n      <span className=\"sr-only\">Live Preview</span>\n    </Button>\n  );\n}\n"],"mappings":"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"}

package/dist/client/components/preview/preview-pane.mjs

@@ -0,0 +1,179 @@
+"use client";
+
+import { cn } from "../../lib/utils.mjs";
+import { selectClient, useAdminStore } from "../../runtime/provider.mjs";
+import { isPreviewToAdminMessage } from "../../preview/types.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/preview/preview-pane.tsx
+/**
+* Preview Pane
+*
+* Admin-side component that renders the preview iframe
+* and handles postMessage communication with the preview page.
+*/
+/**
+* Preview pane component for admin.
+*
+* Renders an iframe with the preview page and handles
+* bidirectional communication via postMessage.
+*/
+const PreviewPane = React$1.forwardRef(({ url, selectedBlockId, onFieldClick, onBlockClick, className, allowedOrigins }, ref) => {
+	const client = useAdminStore(selectClient);
+	const iframeRef = React$1.useRef(null);
+	const [isReady, setIsReady] = React$1.useState(false);
+	const [isLoading, setIsLoading] = React$1.useState(true);
+	const [isRefreshing, setIsRefreshing] = React$1.useState(false);
+	const [previewUrl, setPreviewUrl] = React$1.useState(null);
+	const [tokenError, setTokenError] = React$1.useState(null);
+	React$1.useEffect(() => {
+		const mintToken = async () => {
+			if (!url) {
+				setPreviewUrl(null);
+				return;
+			}
+			setIsLoading(true);
+			setTokenError(null);
+			try {
+				setPreviewUrl(`/api/preview?token=${(await client.rpc.mintPreviewToken({
+					path: url,
+					ttlMs: 3600 * 1e3
+				})).token}`);
+			} catch (error) {
+				console.error("Failed to mint preview token:", error);
+				setTokenError(error instanceof Error ? error.message : "Failed to generate preview token");
+				setPreviewUrl(null);
+				setIsLoading(false);
+			}
+		};
+		mintToken();
+	}, [url, client]);
+	const isValidOrigin = React$1.useCallback((origin) => {
+		if (!allowedOrigins || allowedOrigins.length === 0) try {
+			const previewOrigin = new URL(url).origin;
+			return origin === window.location.origin || origin === previewOrigin;
+		} catch {
+			return origin === window.location.origin;
+		}
+		return allowedOrigins.includes(origin);
+	}, [url, allowedOrigins]);
+	const sendToPreview = React$1.useCallback((message) => {
+		const iframe = iframeRef.current;
+		if (!iframe?.contentWindow) return;
+		try {
+			const targetOrigin = new URL(url).origin;
+			iframe.contentWindow.postMessage(message, targetOrigin);
+		} catch {
+			iframe.contentWindow.postMessage(message, "*");
+		}
+	}, [url]);
+	React$1.useImperativeHandle(ref, () => ({
+		triggerRefresh: () => {
+			if (isReady) {
+				setIsRefreshing(true);
+				sendToPreview({ type: "PREVIEW_REFRESH" });
+			}
+		},
+		sendFocusToPreview: (fieldPath) => {
+			if (isReady) sendToPreview({
+				type: "FOCUS_FIELD",
+				fieldPath
+			});
+		}
+	}), [isReady, sendToPreview]);
+	React$1.useEffect(() => {
+		const handleMessage = (event) => {
+			if (!isValidOrigin(event.origin)) return;
+			if (!isPreviewToAdminMessage(event.data)) return;
+			switch (event.data.type) {
+				case "PREVIEW_READY":
+					setIsReady(true);
+					setIsLoading(false);
+					break;
+				case "REFRESH_COMPLETE":
+					setIsRefreshing(false);
+					break;
+				case "FIELD_CLICKED":
+					onFieldClick?.(event.data.fieldPath, {
+						blockId: event.data.blockId,
+						fieldType: event.data.fieldType
+					});
+					break;
+				case "BLOCK_CLICKED":
+					onBlockClick?.(event.data.blockId);
+					break;
+			}
+		};
+		window.addEventListener("message", handleMessage);
+		return () => window.removeEventListener("message", handleMessage);
+	}, [
+		isValidOrigin,
+		onFieldClick,
+		onBlockClick
+	]);
+	React$1.useEffect(() => {
+		if (isReady && selectedBlockId) sendToPreview({
+			type: "SELECT_BLOCK",
+			blockId: selectedBlockId
+		});
+	}, [
+		isReady,
+		selectedBlockId,
+		sendToPreview
+	]);
+	const handleLoad = () => {
+		setTimeout(() => {
+			if (!isReady) setIsLoading(false);
+		}, 3e3);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative h-full w-full", className),
+		children: [
+			isLoading && /* @__PURE__ */ jsxs("div", {
+				className: "absolute inset-0 z-10 flex items-center justify-center bg-muted/80",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:spinner",
+					className: "h-6 w-6 animate-spin text-muted-foreground"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "ml-2 text-sm text-muted-foreground",
+					children: "Loading preview..."
+				})]
+			}),
+			tokenError && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 z-10 flex items-center justify-center bg-muted/80",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "rounded-md bg-destructive/10 border border-destructive px-4 py-3 text-sm text-destructive",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "font-medium",
+						children: "Preview Error"
+					}), /* @__PURE__ */ jsx("p", { children: tokenError })]
+				})
+			}),
+			isRefreshing && !isLoading && /* @__PURE__ */ jsxs("div", {
+				className: "absolute top-4 right-4 z-10 flex items-center gap-2 rounded-md bg-background px-3 py-2 shadow-md border",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:spinner",
+					className: "h-4 w-4 animate-spin text-muted-foreground"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-sm text-muted-foreground",
+					children: "Refreshing..."
+				})]
+			}),
+			previewUrl && /* @__PURE__ */ jsx("iframe", {
+				ref: iframeRef,
+				src: previewUrl,
+				className: "h-full w-full border-0",
+				title: "Preview",
+				onLoad: handleLoad,
+				sandbox: "allow-scripts allow-same-origin allow-forms"
+			})
+		]
+	});
+});
+PreviewPane.displayName = "PreviewPane";
+
+//#endregion
+export { PreviewPane };
+//# sourceMappingURL=preview-pane.mjs.map

package/dist/client/components/preview/preview-pane.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-pane.mjs","names":["React"],"sources":["../../../../src/client/components/preview/preview-pane.tsx"],"sourcesContent":["/**\n * Preview Pane\n *\n * Admin-side component that renders the preview iframe\n * and handles postMessage communication with the preview page.\n */\n\n\"use client\";\n\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\nimport type {\n  AdminToPreviewMessage,\n  PreviewToAdminMessage,\n} from \"../../preview/types.js\";\nimport { isPreviewToAdminMessage } from \"../../preview/types.js\";\nimport { selectClient, useAdminStore } from \"../../runtime/index.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type PreviewPaneRef = {\n  triggerRefresh: () => void;\n  sendFocusToPreview: (fieldPath: string) => void;\n};\n\nexport type PreviewPaneProps = {\n  /** Preview URL */\n  url: string;\n  /** Selected block ID (for block editor integration) */\n  selectedBlockId?: string | null;\n  /** Field click handler */\n  onFieldClick?: (\n    fieldPath: string,\n    context?: {\n      blockId?: string;\n      fieldType?: \"regular\" | \"block\" | \"relation\";\n    },\n  ) => void;\n  /** Block click handler */\n  onBlockClick?: (blockId: string) => void;\n  /** Custom class name */\n  className?: string;\n  /** Allowed preview origins (for security) */\n  allowedOrigins?: string[];\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Preview pane component for admin.\n *\n * Renders an iframe with the preview page and handles\n * bidirectional communication via postMessage.\n */\nexport const PreviewPane = React.forwardRef<PreviewPaneRef, PreviewPaneProps>(\n  (\n    {\n      url,\n      selectedBlockId,\n      onFieldClick,\n      onBlockClick,\n      className,\n      allowedOrigins,\n    },\n    ref,\n  ) => {\n    const client = useAdminStore(selectClient);\n    const iframeRef = React.useRef<HTMLIFrameElement>(null);\n    const [isReady, setIsReady] = React.useState(false);\n    const [isLoading, setIsLoading] = React.useState(true);\n    const [isRefreshing, setIsRefreshing] = React.useState(false);\n    const [previewUrl, setPreviewUrl] = React.useState<string | null>(null);\n    const [tokenError, setTokenError] = React.useState<string | null>(null);\n\n    // Mint preview token when URL changes\n    React.useEffect(() => {\n      const mintToken = async () => {\n        if (!url) {\n          setPreviewUrl(null);\n          return;\n        }\n\n        setIsLoading(true);\n        setTokenError(null);\n\n        try {\n          // Use type assertion since the client type may not include mintPreviewToken\n          // depending on which modules are used\n          const result = await (client as any).rpc.mintPreviewToken({\n            path: url,\n            ttlMs: 60 * 60 * 1000, // 1 hour\n          });\n          setPreviewUrl(`/api/preview?token=${result.token}`);\n        } catch (error) {\n          console.error(\"Failed to mint preview token:\", error);\n          setTokenError(\n            error instanceof Error\n              ? error.message\n              : \"Failed to generate preview token\",\n          );\n          setPreviewUrl(null);\n          setIsLoading(false);\n        }\n      };\n\n      mintToken();\n    }, [url, client]);\n\n    // Validate origin for security\n    const isValidOrigin = React.useCallback(\n      (origin: string): boolean => {\n        if (!allowedOrigins || allowedOrigins.length === 0) {\n          // If no origins specified, allow same origin and preview URL origin\n          try {\n            const previewOrigin = new URL(url).origin;\n            return (\n              origin === window.location.origin || origin === previewOrigin\n            );\n          } catch {\n            return origin === window.location.origin;\n          }\n        }\n        return allowedOrigins.includes(origin);\n      },\n      [url, allowedOrigins],\n    );\n\n    // Send message to preview iframe\n    const sendToPreview = React.useCallback(\n      (message: AdminToPreviewMessage) => {\n        const iframe = iframeRef.current;\n        if (!iframe?.contentWindow) return;\n\n        try {\n          const targetOrigin = new URL(url).origin;\n          iframe.contentWindow.postMessage(message, targetOrigin);\n        } catch {\n          // If URL parsing fails, use wildcard (less secure)\n          iframe.contentWindow.postMessage(message, \"*\");\n        }\n      },\n      [url],\n    );\n\n    // Expose refresh and focus methods via imperative handle\n    React.useImperativeHandle(\n      ref,\n      () => ({\n        triggerRefresh: () => {\n          if (isReady) {\n            setIsRefreshing(true);\n            sendToPreview({ type: \"PREVIEW_REFRESH\" });\n          }\n        },\n        sendFocusToPreview: (fieldPath: string) => {\n          if (isReady) {\n            sendToPreview({ type: \"FOCUS_FIELD\", fieldPath });\n          }\n        },\n      }),\n      [isReady, sendToPreview],\n    );\n\n    // Listen for messages from preview\n    React.useEffect(() => {\n      const handleMessage = (event: MessageEvent<PreviewToAdminMessage>) => {\n        // Validate origin\n        if (!isValidOrigin(event.origin)) {\n          return;\n        }\n\n        // Validate message structure\n        if (!isPreviewToAdminMessage(event.data)) {\n          return;\n        }\n\n        switch (event.data.type) {\n          case \"PREVIEW_READY\":\n            setIsReady(true);\n            setIsLoading(false);\n            break;\n\n          case \"REFRESH_COMPLETE\":\n            setIsRefreshing(false);\n            break;\n\n          case \"FIELD_CLICKED\":\n            onFieldClick?.(event.data.fieldPath, {\n              blockId: event.data.blockId,\n              fieldType: event.data.fieldType,\n            });\n            break;\n\n          case \"BLOCK_CLICKED\":\n            onBlockClick?.(event.data.blockId);\n            break;\n        }\n      };\n\n      window.addEventListener(\"message\", handleMessage);\n      return () => window.removeEventListener(\"message\", handleMessage);\n    }, [isValidOrigin, onFieldClick, onBlockClick]);\n\n    // Send selected block updates\n    React.useEffect(() => {\n      if (isReady && selectedBlockId) {\n        sendToPreview({ type: \"SELECT_BLOCK\", blockId: selectedBlockId });\n      }\n    }, [isReady, selectedBlockId, sendToPreview]);\n\n    // Handle iframe load\n    const handleLoad = () => {\n      // Preview should signal PREVIEW_READY, but set a fallback timeout\n      setTimeout(() => {\n        if (!isReady) {\n          setIsLoading(false);\n        }\n      }, 3000);\n    };\n\n    return (\n      <div className={cn(\"relative h-full w-full\", className)}>\n        {/* Loading overlay */}\n        {isLoading && (\n          <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-muted/80\">\n            <Icon\n              icon=\"ph:spinner\"\n              className=\"h-6 w-6 animate-spin text-muted-foreground\"\n            />\n            <span className=\"ml-2 text-sm text-muted-foreground\">\n              Loading preview...\n            </span>\n          </div>\n        )}\n\n        {/* Error overlay */}\n        {tokenError && (\n          <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-muted/80\">\n            <div className=\"rounded-md bg-destructive/10 border border-destructive px-4 py-3 text-sm text-destructive\">\n              <p className=\"font-medium\">Preview Error</p>\n              <p>{tokenError}</p>\n            </div>\n          </div>\n        )}\n\n        {/* Refreshing indicator */}\n        {isRefreshing && !isLoading && (\n          <div className=\"absolute top-4 right-4 z-10 flex items-center gap-2 rounded-md bg-background px-3 py-2 shadow-md border\">\n            <Icon\n              icon=\"ph:spinner\"\n              className=\"h-4 w-4 animate-spin text-muted-foreground\"\n            />\n            <span className=\"text-sm text-muted-foreground\">Refreshing...</span>\n          </div>\n        )}\n\n        {/* Preview iframe */}\n        {previewUrl && (\n          <iframe\n            ref={iframeRef}\n            src={previewUrl}\n            className=\"h-full w-full border-0\"\n            title=\"Preview\"\n            onLoad={handleLoad}\n            sandbox=\"allow-scripts allow-same-origin allow-forms\"\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nPreviewPane.displayName = \"PreviewPane\";\n\n// ============================================================================\n// Preview Toggle Button\n// ============================================================================\n\nexport type PreviewToggleButtonProps = {\n  /** Whether preview is currently visible */\n  isPreviewVisible: boolean;\n  /** Toggle handler */\n  onToggle: () => void;\n  /** Custom class name */\n  className?: string;\n};\n\n/**\n * Button to toggle preview pane visibility.\n */\nexport function PreviewToggleButton({\n  isPreviewVisible,\n  onToggle,\n  className,\n}: PreviewToggleButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onToggle}\n      className={cn(\n        \"inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm\",\n        \"border transition-colors\",\n        isPreviewVisible\n          ? \"border-primary bg-primary/10 text-primary\"\n          : \"border-border hover:bg-muted\",\n        className,\n      )}\n    >\n      {isPreviewVisible ? \"Hide Preview\" : \"Show Preview\"}\n    </button>\n  );\n}\n"],"mappings":"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"}