storefront-layouts-staging 1.0.0-staging.0

package/dist/editor/payaza-form/ArrayItemManager.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SchemaField } from './engine';
+interface ArrayItemManagerProps {
+    items: any[];
+    itemSchema: Record<string, SchemaField>;
+    itemEditor?: string;
+    sectionKey?: string;
+    arrayFieldKey?: string;
+    minSlides?: number;
+    maxSlides?: number;
+    onItemChange: (index: number, itemValue: any) => void;
+    onItemAdd: () => void;
+    onItemRemove: (index: number) => void;
+    onItemReorder: (fromIndex: number, toIndex: number) => void;
+    onItemDuplicate: (index: number) => void;
+}
+export declare const ArrayItemManager: React.FC<ArrayItemManagerProps>;
+export {};
+//# sourceMappingURL=ArrayItemManager.d.ts.map

package/dist/editor/payaza-form/ArrayItemManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrayItemManager.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/ArrayItemManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,UAAU,qBAAqB;IAC7B,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACtD,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAQD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAsL3D,CAAC"}

package/dist/editor/payaza-form/ArrayItemManager.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, memo } from 'react';
+import { GripVertical, Plus, Copy, Trash2, ChevronUp, ChevronDown } from 'lucide-react';
+import { getFieldRenderer } from './field-renderer-ref.js';
+import { SliderArrayEditor } from './SliderArrayEditor.js';
+function isSliderMode(itemEditor, arrayFieldKey) {
+    if (itemEditor === 'slider')
+        return true;
+    if (arrayFieldKey === 'sliders')
+        return true;
+    return false;
+}
+export const ArrayItemManager = memo(({ items, itemSchema, itemEditor, sectionKey = '', arrayFieldKey = '', minSlides, maxSlides, onItemChange, onItemAdd, onItemRemove, onItemReorder, onItemDuplicate, }) => {
+    const FieldRenderer = getFieldRenderer();
+    const [draggedIndex, setDraggedIndex] = useState(null);
+    const [dragOverIndex, setDragOverIndex] = useState(null);
+    const count = items?.length ?? 0;
+    const canAdd = maxSlides === undefined ? true : count < maxSlides;
+    const canRemove = minSlides === undefined ? count > 0 : count > minSlides;
+    if (isSliderMode(itemEditor, arrayFieldKey) && sectionKey) {
+        return (_jsx(SliderArrayEditor, { sectionKey: sectionKey, arrayFieldKey: arrayFieldKey || 'sliders', items: (items || []), itemSchema: itemSchema, minSlides: minSlides, maxSlides: maxSlides, onItemChange: onItemChange, onItemAdd: onItemAdd, onItemRemove: onItemRemove, onItemReorder: onItemReorder, onItemDuplicate: onItemDuplicate }));
+    }
+    const handleDragStart = (index) => {
+        setDraggedIndex(index);
+    };
+    const handleDragOver = (e, index) => {
+        e.preventDefault();
+        setDragOverIndex(index);
+    };
+    const handleDragEnd = () => {
+        if (draggedIndex !== null && dragOverIndex !== null && draggedIndex !== dragOverIndex) {
+            onItemReorder(draggedIndex, dragOverIndex);
+        }
+        setDraggedIndex(null);
+        setDragOverIndex(null);
+    };
+    const handleItemFieldChange = (index, fieldKey, fieldValue) => {
+        const currentItem = items[index] || {};
+        const updatedItem = { ...currentItem, [fieldKey]: fieldValue };
+        onItemChange(index, updatedItem);
+    };
+    const getItemLabel = (item, index) => {
+        if (item.label)
+            return item.label;
+        if (item.title)
+            return item.title;
+        if (item.text)
+            return item.text;
+        if (item.name)
+            return item.name;
+        return `Item #${index + 1}`;
+    };
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "overflow-hidden rounded-md border border-black/[0.08] bg-[#fafafa] shadow-[0_1px_2px_rgba(27,0,41,0.04)]", children: items.map((item, index) => {
+                    const label = getItemLabel(item, index);
+                    return (_jsxs("div", { draggable: true, onDragStart: () => handleDragStart(index), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, className: `group/row border-b border-black/[0.06] transition-all duration-200 last:border-b-0 ${draggedIndex === index ? 'scale-[0.99] opacity-25 grayscale' : ''} ${dragOverIndex === index
+                            ? 'border-[#440066]/25 bg-[#440066]/06'
+                            : 'border-[#440066]/10 bg-white'}`, children: [_jsxs("div", { className: "relative flex min-h-[52px] items-center border-b border-black/[0.06] bg-white", children: [_jsx("div", { className: "cursor-grab px-3 py-3.5 text-[#1b0029]/25 transition-colors hover:text-[#1b0029]/55 active:cursor-grabbing", draggable: true, onDragStart: (e) => {
+                                            e.stopPropagation();
+                                            handleDragStart(index);
+                                        }, children: _jsx(GripVertical, { size: 14, strokeWidth: 2.5 }) }), _jsxs("div", { className: "flex flex-1 items-center justify-between py-3.5 pr-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-[#440066] shadow-[0_0_6px_rgba(68,0,102,0.35)]" }), _jsx("span", { className: "text-[12px] font-semibold tracking-tight text-[#1b0029]", children: label })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx("button", { type: "button", disabled: index === 0, onClick: () => onItemReorder(index, index - 1), className: "rounded p-1.5 text-[#1b0029]/40 transition-colors hover:bg-[#F7F5F0] hover:text-[#440066] disabled:pointer-events-none disabled:opacity-20", title: "Move up", children: _jsx(ChevronUp, { size: 14, strokeWidth: 2 }) }), _jsx("button", { type: "button", disabled: index === items.length - 1, onClick: () => onItemReorder(index, index + 1), className: "rounded p-1.5 text-[#1b0029]/40 transition-colors hover:bg-[#F7F5F0] hover:text-[#440066] disabled:pointer-events-none disabled:opacity-20", title: "Move down", children: _jsx(ChevronDown, { size: 14, strokeWidth: 2 }) }), _jsx("button", { type: "button", onClick: () => onItemDuplicate(index), className: "rounded p-1.5 text-[#1b0029]/35 transition-colors hover:bg-[#F7F5F0] hover:text-[#440066]", title: "Duplicate", children: _jsx(Copy, { size: 14, strokeWidth: 2 }) }), _jsx("button", { type: "button", onClick: () => onItemRemove(index), disabled: !canRemove, className: "rounded p-1.5 text-[#1b0029]/35 transition-colors hover:bg-[#D16253]/12 hover:text-[#D16253] disabled:pointer-events-none disabled:opacity-20", title: "Delete", children: _jsx(Trash2, { size: 14, strokeWidth: 2 }) })] })] })] }), _jsxs("div", { className: "relative space-y-6 bg-white px-5 pb-6 pt-4 md:px-6", children: [_jsx("div", { className: "absolute bottom-0 left-0 top-0 w-px bg-gradient-to-b from-[#440066]/15 via-[#440066]/08 to-transparent" }), Object.entries(itemSchema).map(([fieldKey, fieldSchema]) => (_jsx(FieldRenderer, { schemaField: fieldSchema, value: item[fieldKey], path: [index.toString(), fieldKey], onChange: (value) => handleItemFieldChange(index, fieldKey, value) }, fieldKey)))] })] }, index));
+                }) }), _jsxs("button", { type: "button", onClick: onItemAdd, disabled: !canAdd, className: "group flex h-11 w-full items-center justify-center gap-2.5 rounded-md border border-dashed border-black/[0.12] bg-white text-[11px] font-semibold uppercase tracking-[0.06em] text-[#1b0029]/45 shadow-[0_1px_2px_rgba(27,0,41,0.03)] transition-all duration-200 hover:border-[#440066]/35 hover:bg-[#F7F5F0]/80 hover:text-[#440066] active:scale-[0.99] disabled:pointer-events-none disabled:opacity-40", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-md border border-black/[0.06] bg-[#F7F5F0] text-[#440066] transition-colors group-hover:border-[#440066]/25", children: _jsx(Plus, { size: 14, strokeWidth: 2.5 }) }), "Add item"] })] }));
+});

package/dist/editor/payaza-form/AssetSelectionContext.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+interface AssetSelectionContextValue {
+    onOpenAssetSelect: (callback: (url: string) => void) => void;
+    assets?: string[];
+    isAssetLibraryAvailable: boolean;
+}
+interface AssetSelectionProviderProps {
+    children: ReactNode;
+    onOpenAssets?: () => void;
+    assets?: string[];
+}
+export declare const setGlobalAssetSelectionHandler: (handler: ((url: string) => void) | null) => void;
+export declare const getGlobalAssetSelectionHandler: () => ((url: string) => void) | null;
+export declare const AssetSelectionProvider: React.FC<AssetSelectionProviderProps>;
+export declare const useAssetSelection: () => AssetSelectionContextValue;
+export {};
+//# sourceMappingURL=AssetSelectionContext.d.ts.map

package/dist/editor/payaza-form/AssetSelectionContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetSelectionContext.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/AssetSelectionContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAoD,SAAS,EAAqB,MAAM,OAAO,CAAC;AAE9G,UAAU,0BAA0B;IAClC,iBAAiB,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,uBAAuB,EAAE,OAAO,CAAC;CAClC;AAID,UAAU,2BAA2B;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAKD,eAAO,MAAM,8BAA8B,GAAI,SAAS,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,SAErF,CAAC;AAEF,eAAO,MAAM,8BAA8B,QAAO,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAE3E,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAsExE,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO,0BAYpC,CAAC"}

package/dist/editor/payaza-form/AssetSelectionContext.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';
+const AssetSelectionContext = createContext(null);
+// Global handler that host app can call
+let globalAssetSelectionHandler = null;
+export const setGlobalAssetSelectionHandler = (handler) => {
+    globalAssetSelectionHandler = handler;
+};
+export const getGlobalAssetSelectionHandler = () => {
+    return globalAssetSelectionHandler;
+};
+export const AssetSelectionProvider = ({ children, onOpenAssets, assets, }) => {
+    const [pendingCallback, setPendingCallback] = useState(null);
+    const callbackRef = useRef(null);
+    // Update ref when callback changes
+    useEffect(() => {
+        callbackRef.current = pendingCallback;
+        console.log('[AssetSelectionContext] Callback ref updated:', {
+            hasCallback: !!pendingCallback,
+            hasRef: !!callbackRef.current,
+        });
+    }, [pendingCallback]);
+    // Set up global handler that host app can call
+    // The handler always reads from callbackRef.current to get the latest callback
+    useEffect(() => {
+        const handler = (url) => {
+            console.log('[AssetSelectionContext] Global handler called with URL:', url, {
+                hasCallbackRef: !!callbackRef.current,
+            });
+            if (callbackRef.current) {
+                console.log('[AssetSelectionContext] Invoking callback with URL:', url);
+                callbackRef.current(url);
+                setPendingCallback(null); // Clear callback after use
+                callbackRef.current = null; // Also clear ref
+            }
+            else {
+                console.warn('[AssetSelectionContext] No callback available when handler was called');
+            }
+        };
+        setGlobalAssetSelectionHandler(handler);
+        console.log('[AssetSelectionContext] Global handler registered');
+        return () => {
+            setGlobalAssetSelectionHandler(null);
+            console.log('[AssetSelectionContext] Global handler cleared');
+        };
+    }, []);
+    const onOpenAssetSelect = useCallback((callback) => {
+        if (onOpenAssets) {
+            console.log('[AssetSelectionContext] onOpenAssetSelect called, storing callback');
+            // Store the callback so the host app can call it when an asset is selected
+            setPendingCallback(() => callback);
+            // Also update ref immediately for synchronous access
+            callbackRef.current = callback;
+            // Open the asset library
+            onOpenAssets();
+            console.log('[AssetSelectionContext] Asset library opened, callback stored');
+        }
+        else {
+            console.warn('[AssetSelectionContext] onOpenAssets not available');
+        }
+    }, [onOpenAssets]);
+    const value = {
+        onOpenAssetSelect,
+        assets,
+        isAssetLibraryAvailable: !!onOpenAssets,
+    };
+    return (_jsx(AssetSelectionContext.Provider, { value: value, children: children }));
+};
+export const useAssetSelection = () => {
+    const context = useContext(AssetSelectionContext);
+    if (!context) {
+        // Return a no-op implementation if context is not available
+        return {
+            onOpenAssetSelect: () => {
+                console.warn('[AssetSelection] Asset library is not available');
+            },
+            isAssetLibraryAvailable: false,
+        };
+    }
+    return context;
+};

package/dist/editor/payaza-form/EditorCanvasPreview.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { PreviewZoom } from '../shared/preview-viewport';
+import { StoreConfig } from '../../lib/store-types';
+import type { InteractionMode } from '../document/types';
+import type { PayazaInlineFieldCommitPayload } from './IframePreviewMessageBridge';
+import type { PreviewElementFocusPayload } from '../../preview/canvas/preview-messages';
+import type { IframePreviewFlushHandle, PreviewFlushHandle } from '../../preview/canvas/preview-flush-handle';
+export interface EditorCanvasPreviewProps {
+    layoutId: string;
+    config: StoreConfig;
+    activePageId: string;
+    viewMode: 'desktop' | 'tablet' | 'mobile';
+    selectedSection?: string | null;
+    focusedField?: {
+        sectionKey: string;
+        fieldPath: string[];
+        elementKind: string;
+    } | null;
+    interactionMode?: InteractionMode;
+    slideIndexSync?: {
+        sectionKey: string;
+        arrayField: string;
+        index: number;
+    } | null;
+    flushRequestId?: number;
+    previewZoom?: PreviewZoom;
+    editorContext: {
+        layoutId: string;
+        activePageId: string;
+    };
+    onSectionSelected: (sectionKey: string) => void;
+    onFieldCommit: (payload: PayazaInlineFieldCommitPayload) => void;
+    onSectionReorder: (sectionKey: string, direction: 'up' | 'down') => void;
+    onFocusSidebarSection: (sectionKey: string) => void;
+    onPreviewElementFocus?: (payload: Omit<PreviewElementFocusPayload, 'type'>) => void;
+    onRouteChange?: (route: string) => void;
+    previewFlushRef?: React.MutableRefObject<PreviewFlushHandle | null>;
+    iframePreviewFlushRef?: React.MutableRefObject<IframePreviewFlushHandle | null>;
+}
+export declare function EditorCanvasPreview({ layoutId, config, activePageId, viewMode, selectedSection, focusedField, interactionMode, slideIndexSync, flushRequestId, previewZoom, editorContext, onSectionSelected, onFieldCommit, onSectionReorder, onFocusSidebarSection, onPreviewElementFocus, onRouteChange, previewFlushRef, iframePreviewFlushRef, }: EditorCanvasPreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditorCanvasPreview.d.ts.map

package/dist/editor/payaza-form/EditorCanvasPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorCanvasPreview.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/EditorCanvasPreview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIzD,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC;AACxF,OAAO,KAAK,EACV,wBAAwB,EACxB,kBAAkB,EACnB,MAAM,2CAA2C,CAAC;AAEnD,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,WAAW,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC1C,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,EAAE,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACvF,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,cAAc,CAAC,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAClF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,EAAE;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,iBAAiB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,CAAC,OAAO,EAAE,8BAA8B,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IACzE,qBAAqB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,0BAA0B,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACpF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;IACpE,qBAAqB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,wBAAwB,GAAG,IAAI,CAAC,CAAC;CACjF;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,eAAe,EACf,cAAc,EACd,cAAc,EACd,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,aAAa,EACb,eAAe,EACf,qBAAqB,GACtB,EAAE,wBAAwB,2CA+D1B"}

package/dist/editor/payaza-form/EditorCanvasPreview.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { IframePreview } from '../shared/IframePreview.js';
+import { InlineCanvasPreview } from '../shared/InlineCanvasPreview.js';
+import { shouldUseInlineEditorPreview } from '../../lib/utils/mobile-editor.js';
+import { useAssetSelection } from './AssetSelectionContext.js';
+import { processPreviewMessage } from './preview-message-handler.js';
+export function EditorCanvasPreview({ layoutId, config, activePageId, viewMode, selectedSection, focusedField, interactionMode, slideIndexSync, flushRequestId, previewZoom, editorContext, onSectionSelected, onFieldCommit, onSectionReorder, onFocusSidebarSection, onPreviewElementFocus, onRouteChange, previewFlushRef, iframePreviewFlushRef, }) {
+    const useInline = shouldUseInlineEditorPreview();
+    const { onOpenAssetSelect } = useAssetSelection();
+    const localIframeFlushRef = useRef(null);
+    const iframeRef = iframePreviewFlushRef ?? localIframeFlushRef;
+    const handlePreviewEvent = useCallback((payload) => {
+        processPreviewMessage(payload, {
+            editorContext,
+            onSectionSelected,
+            onFieldCommit,
+            onSectionReorder,
+            onFocusSidebarSection,
+            onPreviewElementFocus,
+            onRouteChange,
+            onOpenAssetSelect,
+        });
+    }, [
+        editorContext,
+        onFieldCommit,
+        onFocusSidebarSection,
+        onOpenAssetSelect,
+        onPreviewElementFocus,
+        onRouteChange,
+        onSectionReorder,
+        onSectionSelected,
+    ]);
+    const handleInlineReady = useCallback(() => {
+        if (typeof window !== 'undefined') {
+            window.postMessage({ type: 'PREVIEW_READY' }, '*');
+        }
+    }, []);
+    const commonProps = {
+        layoutId,
+        config,
+        activePageId,
+        viewMode,
+        selectedSection,
+        focusedField,
+        interactionMode,
+        slideIndexSync,
+        flushRequestId,
+        previewZoom,
+    };
+    if (useInline) {
+        return (_jsx(InlineCanvasPreview, { ...commonProps, className: "h-full", onPreviewEvent: handlePreviewEvent, onReady: handleInlineReady, previewFlushRef: previewFlushRef }));
+    }
+    return _jsx(IframePreview, { ref: iframeRef, ...commonProps });
+}

package/dist/editor/payaza-form/EditorLayoutContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface EditorLayoutContextValue {
+    layoutId: string;
+}
+export declare const EditorLayoutProvider: React.Provider<EditorLayoutContextValue>;
+export declare function useEditorLayout(): EditorLayoutContextValue;
+export {};
+//# sourceMappingURL=EditorLayoutContext.d.ts.map

package/dist/editor/payaza-form/EditorLayoutContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorLayoutContext.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/EditorLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,UAAU,wBAAwB;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAID,eAAO,MAAM,oBAAoB,0CAA+B,CAAC;AAEjE,wBAAgB,eAAe,IAAI,wBAAwB,CAE1D"}

package/dist/editor/payaza-form/EditorLayoutContext.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+const EditorLayoutContext = createContext({ layoutId: '' });
+export const EditorLayoutProvider = EditorLayoutContext.Provider;
+export function useEditorLayout() {
+    return useContext(EditorLayoutContext);
+}

package/dist/editor/payaza-form/FieldRenderer.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface FieldRendererProps {
+    schemaField: any;
+    value: any;
+    path: string[];
+    /** Section key for slider array editor context */
+    sectionKey?: string;
+    onChange: (value: any, fieldPath?: string[]) => void;
+    onArrayItemChange?: (index: number, itemValue: any) => void;
+    onArrayItemAdd?: () => void;
+    onArrayItemRemove?: (index: number) => void;
+    onArrayItemReorder?: (fromIndex: number, toIndex: number) => void;
+}
+export declare const FieldRenderer: React.FC<FieldRendererProps>;
+export {};
+//# sourceMappingURL=FieldRenderer.d.ts.map

package/dist/editor/payaza-form/FieldRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldRenderer.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/FieldRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAoBpC,UAAU,kBAAkB;IAC1B,WAAW,EAAE,GAAG,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC;IACX,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5D,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACnE;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4UrD,CAAC"}

package/dist/editor/payaza-form/FieldRenderer.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { generateArrayItem } from './engine.js';
+import { TextField } from './components/TextField.js';
+import { TextareaField } from './components/TextareaField.js';
+import { RichTextField } from './components/RichTextField.js';
+import { ToggleField } from './components/ToggleField.js';
+import { ImageField } from './components/ImageField.js';
+import { NumberField } from './components/NumberField.js';
+import { StarRatingField } from './components/StarRatingField.js';
+import { IconField } from './components/IconField.js';
+import { ButtonField } from './components/ButtonField.js';
+import { ArrayField } from './components/ArrayField.js';
+import { ObjectField } from './components/ObjectField.js';
+import { SectionField } from './components/SectionField.js';
+import { BlocksField } from './components/BlocksField.js';
+import { getWidget } from './widget-registry.js';
+import { PAYAZA_BLOCK_IDS } from '../blocks/types.js';
+import { registerFieldRenderer } from './field-renderer-ref.js';
+export const FieldRenderer = memo(({ schemaField, value, path, sectionKey, onChange, onArrayItemChange, onArrayItemAdd, onArrayItemRemove, onArrayItemReorder, }) => {
+    const rawEditor = schemaField.type ?? schemaField._editor;
+    // Normalize so persisted / hand-authored schemas ("Toggle") still resolve
+    const type = rawEditor === undefined || rawEditor === null
+        ? ''
+        : typeof rawEditor === 'string'
+            ? rawEditor.trim().toLowerCase()
+            : String(rawEditor).trim().toLowerCase();
+    const label = schemaField.label || schemaField._label || '';
+    const description = schemaField.description || schemaField._description;
+    // Handle array type
+    if (type === 'array') {
+        const schemaDefault = schemaField.defaultValue ?? schemaField._defaultValue;
+        const arrayValue = Array.isArray(value) ? value : (Array.isArray(schemaDefault) ? schemaDefault : []);
+        const itemSchema = schemaField.itemSchema || schemaField._itemSchema || {};
+        const handleItemChange = (index, itemValue) => {
+            const newArray = [...arrayValue];
+            newArray[index] = itemValue;
+            onChange(newArray, path);
+        };
+        const handleItemAdd = () => {
+            const max = schemaField.maxSlides ?? schemaField._maxSlides;
+            if (typeof max === 'number' && arrayValue.length >= max)
+                return;
+            const newItem = generateArrayItem(itemSchema);
+            if (newItem.order === 0 || newItem.order === undefined) {
+                newItem.order = arrayValue.length + 1;
+            }
+            onChange([...arrayValue, newItem], path);
+        };
+        const handleItemRemove = (index) => {
+            const min = schemaField.minSlides ?? schemaField._minSlides;
+            if (typeof min === 'number' && arrayValue.length <= min)
+                return;
+            const newArray = arrayValue.filter((_, i) => i !== index);
+            onChange(newArray, path);
+        };
+        const handleItemReorder = (fromIndex, toIndex) => {
+            const newArray = [...arrayValue];
+            const [removed] = newArray.splice(fromIndex, 1);
+            newArray.splice(toIndex, 0, removed);
+            onChange(newArray, path);
+        };
+        const arrayFieldKey = path[0] ?? 'items';
+        return (_jsx(ArrayField, { label: label, value: arrayValue, onChange: onChange, itemSchema: itemSchema, itemEditor: schemaField.itemEditor || schemaField._itemEditor, sectionKey: sectionKey, arrayFieldKey: arrayFieldKey, minSlides: schemaField.minSlides ?? schemaField._minSlides, maxSlides: schemaField.maxSlides ?? schemaField._maxSlides, onItemChange: handleItemChange, onItemAdd: handleItemAdd, onItemRemove: handleItemRemove, onItemReorder: handleItemReorder }));
+    }
+    if (type === 'blocks') {
+        const allowed = Array.isArray(schemaField.allowedBlockNames)
+            ? schemaField.allowedBlockNames
+            : [...PAYAZA_BLOCK_IDS];
+        return (_jsx(BlocksField, { label: label, description: description, value: Array.isArray(value) ? value : [], pathPrefix: path, allowedBlockNames: allowed, onChange: (next) => onChange(next, path) }));
+    }
+    // Handle section type
+    if (type === 'section') {
+        const sectionValue = value || {};
+        const children = [];
+        // Get fields from either 'fields' property (new) or direct properties (legacy)
+        const fields = schemaField.fields || schemaField;
+        Object.entries(fields).forEach(([key, field]) => {
+            // Legacy flat section: skip metadata keys. Only skip `description` when it's the section blurb (string), not a field object.
+            if (fields === schemaField && (key.startsWith('_') || key === 'type' || key === 'label' || key === 'fields'))
+                return;
+            if (fields === schemaField && key === 'description' && typeof field === 'string')
+                return;
+            // Check editor type (+ infer toggles saved without `type` but with boolean defaultValue)
+            const rawFt = field && typeof field === 'object' ? (field.type ?? field._editor) : null;
+            let fieldType = rawFt === undefined || rawFt === null
+                ? null
+                : typeof rawFt === 'string'
+                    ? rawFt.trim().toLowerCase()
+                    : String(rawFt).trim().toLowerCase();
+            if (!fieldType &&
+                field &&
+                typeof field === 'object' &&
+                typeof field.defaultValue === 'boolean') {
+                fieldType = 'toggle';
+            }
+            if (fieldType) {
+                children.push(_jsx(FieldRenderer, { schemaField: field, value: sectionValue[key], path: [...path, key], onChange: (newValue, fieldPath) => {
+                        if (fieldPath && fieldPath.length > path.length) {
+                            const pathMatches = path.every((p, i) => fieldPath[i] === p);
+                            if (pathMatches) {
+                                const relativePath = fieldPath.slice(path.length);
+                                onChange(newValue, relativePath);
+                            }
+                            else {
+                                onChange(newValue, [key]);
+                            }
+                        }
+                        else {
+                            onChange(newValue, [key]);
+                        }
+                    }, onArrayItemChange: onArrayItemChange, onArrayItemAdd: onArrayItemAdd, onArrayItemRemove: onArrayItemRemove, onArrayItemReorder: onArrayItemReorder }, key));
+            }
+        });
+        return (_jsx(SectionField, { label: label, description: description, children: children }));
+    }
+    // Handle button/object type (nested objects)
+    if (type === 'button' || type === 'object') {
+        const objectValue = value || {};
+        const children = [];
+        const fields = schemaField.fields || schemaField;
+        Object.entries(fields).forEach(([key, field]) => {
+            if (fields === schemaField && (key.startsWith('_') || key === 'type' || key === 'label' || key === 'fields'))
+                return;
+            if (fields === schemaField && key === 'description' && typeof field === 'string')
+                return;
+            const rawFt = field && typeof field === 'object' ? (field.type ?? field._editor) : null;
+            let fieldType = rawFt === undefined || rawFt === null
+                ? null
+                : typeof rawFt === 'string'
+                    ? rawFt.trim().toLowerCase()
+                    : String(rawFt).trim().toLowerCase();
+            if (!fieldType &&
+                field &&
+                typeof field === 'object' &&
+                typeof field.defaultValue === 'boolean') {
+                fieldType = 'toggle';
+            }
+            if (fieldType) {
+                children.push(_jsx(FieldRenderer, { schemaField: field, value: objectValue[key], path: [...path, key], onChange: (newValue, fieldPath) => {
+                        if (fieldPath && fieldPath.length > 0) {
+                            onChange(newValue, [key, ...fieldPath]);
+                        }
+                        else {
+                            onChange(newValue, [key]);
+                        }
+                    } }, key));
+            }
+        });
+        if (type === 'button') {
+            return (_jsx(ButtonField, { label: label, value: objectValue, onChange: onChange }));
+        }
+        return (_jsx(ObjectField, { label: label, children: children }));
+    }
+    if (schemaField._inlineRichText && (type === 'text' || type === 'multiline_text')) {
+        return (_jsx(RichTextField, { label: label, value: value, multiline: type === 'multiline_text', onChange: (next) => onChange(next, path) }));
+    }
+    // Check for custom registered widget first
+    const CustomWidget = getWidget(type);
+    if (CustomWidget) {
+        const widgetProps = {
+            label,
+            value,
+            onChange,
+            path,
+            schema: schemaField,
+        };
+        return _jsx(CustomWidget, { ...widgetProps });
+    }
+    // Handle primitive field types (default widgets)
+    switch (type) {
+        case 'text':
+            return (_jsx(TextField, { label: label, value: value || '', onChange: (newValue) => onChange(newValue, path) }));
+        case 'multiline_text':
+            return (_jsx(TextareaField, { label: label, value: value || '', onChange: (newValue) => onChange(newValue, path) }));
+        case 'toggle':
+            return (_jsx(ToggleField, { label: label, value: value, onChange: (newValue) => onChange(newValue, path) }));
+        case 'image':
+            return (_jsx(ImageField, { label: label, value: value || '', onChange: (newValue) => onChange(newValue, path) }));
+        case 'number':
+            return (_jsx(NumberField, { label: label, value: value ?? 0, onChange: (newValue) => onChange(newValue, path) }));
+        case 'rating':
+            return (_jsx(StarRatingField, { label: label, value: typeof value === 'number' ? value : Number(value) || 5, min: typeof schemaField.min === 'number' ? schemaField.min : 1, max: typeof schemaField.max === 'number' ? schemaField.max : 5, onChange: (newValue) => onChange(newValue, path) }));
+        case 'icon':
+            return (_jsx(IconField, { label: label, value: value || '', onChange: (newValue) => onChange(newValue, path) }));
+        case 'color':
+            return (_jsx(TextField, { label: label, value: value || '', type: "color", onChange: (newValue) => onChange(newValue, path) }));
+        default:
+            return (_jsxs("div", { className: "text-[10px] text-slate-400", children: ["Unknown editor type: ", type] }));
+    }
+});
+registerFieldRenderer(FieldRenderer);

package/dist/editor/payaza-form/IframePreviewMessageBridge.d.ts

@@ -0,0 +1,29 @@
+export interface PayazaInlineFieldCommitPayload {
+    sectionKey: string;
+    fieldPath: string[];
+    valueText: string;
+    richText?: import('../../preview/canvas/preview-messages').PreviewFieldCommitPayload['richText'];
+    elementKind?: import('../../preview/canvas/preview-messages').PreviewFieldCommitPayload['elementKind'];
+}
+export interface IframePreviewMessageBridgeProps {
+    /** Active editor layout id + overlay page — commits must match. */
+    editorContext: {
+        layoutId: string;
+        activePageId: string;
+    };
+    onSectionSelected: (sectionKey: string) => void;
+    onFieldCommit: (payload: PayazaInlineFieldCommitPayload) => void;
+    onSectionReorder: (sectionKey: string, direction: 'up' | 'down') => void;
+    onFocusSidebarSection: (sectionKey: string) => void;
+    onPreviewElementFocus?: (payload: Omit<import('../../preview/canvas/preview-messages').PreviewElementFocusPayload, 'type'>) => void;
+    /** Called when the preview navigates to a new route so the editor can sync its activePageId. */
+    onRouteChange?: (route: string) => void;
+}
+/**
+ * Handles postMessage from the layout preview iframe (field commit, image replace, reorder).
+ * Must render under AssetSelectionProvider for image replacement.
+ */
+export declare function IframePreviewMessageBridge({ editorContext, onSectionSelected, onFieldCommit, onSectionReorder, onFocusSidebarSection, onPreviewElementFocus, onRouteChange, }: IframePreviewMessageBridgeProps): any;
+/** Map host layout prop to canonical id for comparisons (iframe uses same). */
+export declare function editorContextLayoutId(layoutIdProp: string): string;
+//# sourceMappingURL=IframePreviewMessageBridge.d.ts.map

package/dist/editor/payaza-form/IframePreviewMessageBridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IframePreviewMessageBridge.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/IframePreviewMessageBridge.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,8BAA8B;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,uCAAuC,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAC;IACjG,WAAW,CAAC,EAAE,OAAO,uCAAuC,EAAE,yBAAyB,CAAC,aAAa,CAAC,CAAC;CACxG;AAED,MAAM,WAAW,+BAA+B;IAC9C,mEAAmE;IACnE,aAAa,EAAE;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,iBAAiB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,CAAC,OAAO,EAAE,8BAA8B,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IACzE,qBAAqB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,uCAAuC,EAAE,0BAA0B,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACpI,gGAAgG;IAChG,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,aAAa,GACd,EAAE,+BAA+B,OAqCjC;AAED,+EAA+E;AAC/E,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAElE"}

package/dist/editor/payaza-form/IframePreviewMessageBridge.js

@@ -0,0 +1,46 @@
+'use client';
+import { useEffect, useCallback } from 'react';
+import { useAssetSelection } from './AssetSelectionContext.js';
+import { processPreviewMessage } from './preview-message-handler.js';
+import { normalizeEditorLayoutId } from '../document/layout-id.js';
+/**
+ * Handles postMessage from the layout preview iframe (field commit, image replace, reorder).
+ * Must render under AssetSelectionProvider for image replacement.
+ */
+export function IframePreviewMessageBridge({ editorContext, onSectionSelected, onFieldCommit, onSectionReorder, onFocusSidebarSection, onPreviewElementFocus, onRouteChange, }) {
+    const { onOpenAssetSelect } = useAssetSelection();
+    const handleMessage = useCallback((event) => {
+        const d = event.data;
+        if (!d || typeof d !== 'object')
+            return;
+        processPreviewMessage(d, {
+            editorContext,
+            onSectionSelected,
+            onFieldCommit,
+            onSectionReorder,
+            onFocusSidebarSection,
+            onPreviewElementFocus,
+            onRouteChange,
+            onOpenAssetSelect,
+        });
+    }, [
+        editorContext.activePageId,
+        editorContext.layoutId,
+        onFieldCommit,
+        onFocusSidebarSection,
+        onOpenAssetSelect,
+        onPreviewElementFocus,
+        onRouteChange,
+        onSectionReorder,
+        onSectionSelected,
+    ]);
+    useEffect(() => {
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, [handleMessage]);
+    return null;
+}
+/** Map host layout prop to canonical id for comparisons (iframe uses same). */
+export function editorContextLayoutId(layoutIdProp) {
+    return normalizeEditorLayoutId(layoutIdProp) ?? String(layoutIdProp);
+}

package/dist/editor/payaza-form/PayazaFormEditor.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FullPageEditorProps } from '../types';
+import { WidgetComponent } from './widget-registry';
+export interface PayazaFormEditorProps extends FullPageEditorProps {
+    /**
+     * Custom widgets to register for specific editor types
+     * Maps `_editor` type strings to React components
+     */
+    customWidgets?: Record<string, WidgetComponent>;
+}
+export declare const PayazaFormEditor: React.FC<PayazaFormEditorProps>;
+//# sourceMappingURL=PayazaFormEditor.d.ts.map

package/dist/editor/payaza-form/PayazaFormEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayazaFormEditor.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/PayazaFormEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6E,MAAM,OAAO,CAAC;AAClG,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAoB/C,OAAO,EAA4B,eAAe,EAAgB,MAAM,mBAAmB,CAAC;AA0F5F,MAAM,WAAW,qBAAsB,SAAQ,mBAAmB;IAChE;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAqzD5D,CAAC"}