payaza-storefront-layouts 1.1.76 → 1.1.78

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

@@ -0,0 +1,38 @@
+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';
+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;
+}
+export declare function EditorCanvasPreview({ layoutId, config, activePageId, viewMode, selectedSection, focusedField, interactionMode, slideIndexSync, flushRequestId, previewZoom, editorContext, onSectionSelected, onFieldCommit, onSectionReorder, onFocusSidebarSection, onPreviewElementFocus, onRouteChange, }: EditorCanvasPreviewProps): React.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,KAAsB,MAAM,OAAO,CAAC;AAG3C,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;AAExF,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;CACzC;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,GACd,EAAE,wBAAwB,qBA6D1B"}

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

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } 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, }) {
+    const useInline = shouldUseInlineEditorPreview();
+    const { onOpenAssetSelect } = useAssetSelection();
+    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 previewViewMode = useInline ? 'mobile' : viewMode;
+    const commonProps = {
+        layoutId,
+        config,
+        activePageId,
+        viewMode: previewViewMode,
+        selectedSection,
+        focusedField,
+        interactionMode,
+        slideIndexSync,
+        flushRequestId,
+        previewZoom,
+    };
+    if (useInline) {
+        return (_jsx(InlineCanvasPreview, { ...commonProps, onPreviewEvent: handlePreviewEvent, onReady: handleInlineReady }));
+    }
+    return _jsx(IframePreview, { ...commonProps });
+}

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

@@ -1,10 +1,9 @@
-import { type PreviewElementFocusPayload, type PreviewFieldCommitPayload } from '../../preview/canvas/preview-messages';
 export interface PayazaInlineFieldCommitPayload {
     sectionKey: string;
     fieldPath: string[];
     valueText: string;
-    richText?: PreviewFieldCommitPayload['richText'];
-    elementKind?: PreviewFieldCommitPayload['elementKind'];
+    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. */
@@ -16,7 +15,7 @@ export interface IframePreviewMessageBridgeProps {
     onFieldCommit: (payload: PayazaInlineFieldCommitPayload) => void;
     onSectionReorder: (sectionKey: string, direction: 'up' | 'down') => void;
     onFocusSidebarSection: (sectionKey: string) => void;
-    onPreviewElementFocus?: (payload: Omit<PreviewElementFocusPayload, 'type'>) => 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;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"IframePreviewMessageBridge.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/IframePreviewMessageBridge.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC/B,MAAM,uCAAuC,CAAC;AAI/C,MAAM,WAAW,8BAA8B;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAC;IACjD,WAAW,CAAC,EAAE,yBAAyB,CAAC,aAAa,CAAC,CAAC;CACxD;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,0BAA0B,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACpF,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,OAqIjC;AAED,+EAA+E;AAC/E,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAElE"}
+{"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

@@ -1,9 +1,8 @@
 'use client';
 import { useEffect, useCallback } from 'react';
 import { useAssetSelection } from './AssetSelectionContext.js';
-import { PREVIEW_MSG, } from '../../preview/canvas/preview-messages.js';
+import { processPreviewMessage } from './preview-message-handler.js';
 import { normalizeEditorLayoutId } from '../document/layout-id.js';
-import { previewCommitsMatchEditorContext } from '../../preview/canvas/preview-isolation.js';
 /**
  * Handles postMessage from the layout preview iframe (field commit, image replace, reorder).
  * Must render under AssetSelectionProvider for image replacement.
@@ -14,85 +13,16 @@ export function IframePreviewMessageBridge({ editorContext, onSectionSelected, o
         const d = event.data;
         if (!d || typeof d !== 'object')
             return;
-        if (d.type === 'SECTION_SELECTED') {
-            const sectionKey = d.section || d.sectionKey;
-            if (typeof sectionKey === 'string' && sectionKey) {
-                onSectionSelected(sectionKey);
-            }
-            return;
-        }
-        if (d.type === PREVIEW_MSG.ELEMENT_FOCUS) {
-            const payload = d;
-            const ok = previewCommitsMatchEditorContext({ layoutId: payload.layoutId, pageId: payload.pageId }, { layoutId: editorContext.layoutId, pageId: editorContext.activePageId });
-            if (!ok)
-                return;
-            onPreviewElementFocus?.({
-                layoutId: payload.layoutId,
-                pageId: payload.pageId,
-                sectionKey: payload.sectionKey,
-                fieldPath: payload.fieldPath,
-                elementKind: payload.elementKind,
-            });
-            return;
-        }
-        if (d.type === PREVIEW_MSG.FIELD_COMMIT) {
-            const payload = d;
-            const ok = previewCommitsMatchEditorContext({ layoutId: payload.layoutId, pageId: payload.pageId }, { layoutId: editorContext.layoutId, pageId: editorContext.activePageId });
-            if (!ok)
-                return;
-            onFieldCommit({
-                sectionKey: payload.sectionKey,
-                fieldPath: payload.fieldPath,
-                valueText: String(payload.value ?? ''),
-                richText: payload.richText,
-                elementKind: payload.elementKind,
-            });
-            return;
-        }
-        if (d.type === PREVIEW_MSG.SECTION_REORDER) {
-            const { sectionKey, direction, layoutId, pageId } = d;
-            const ok = layoutId &&
-                pageId &&
-                previewCommitsMatchEditorContext({ layoutId, pageId }, { layoutId: editorContext.layoutId, pageId: editorContext.activePageId });
-            if (!ok)
-                return;
-            if (sectionKey && (direction === 'up' || direction === 'down')) {
-                onSectionReorder(sectionKey, direction);
-            }
-            return;
-        }
-        if (d.type === PREVIEW_MSG.IMAGE_ACTIVATE) {
-            const { sectionKey, fieldPath, layoutId, pageId } = d;
-            const ok = layoutId &&
-                pageId &&
-                previewCommitsMatchEditorContext({ layoutId, pageId }, { layoutId: editorContext.layoutId, pageId: editorContext.activePageId });
-            if (!ok)
-                return;
-            if (sectionKey && Array.isArray(fieldPath)) {
-                onOpenAssetSelect((url) => {
-                    onFieldCommit({
-                        sectionKey,
-                        fieldPath,
-                        valueText: url,
-                        elementKind: 'image',
-                    });
-                });
-            }
-            return;
-        }
-        if (d.type === 'PREVIEW_FOCUS_SIDEBAR') {
-            const sk = d.sectionKey;
-            if (typeof sk === 'string' && sk) {
-                onFocusSidebarSection(sk);
-            }
-            return;
-        }
-        if (d.type === 'ROUTE_CHANGED') {
-            const route = d.route;
-            if (typeof route === 'string' && route) {
-                onRouteChange?.(route);
-            }
-        }
+        processPreviewMessage(d, {
+            editorContext,
+            onSectionSelected,
+            onFieldCommit,
+            onSectionReorder,
+            onFocusSidebarSection,
+            onPreviewElementFocus,
+            onRouteChange,
+            onOpenAssetSelect,
+        });
     }, [
         editorContext.activePageId,
         editorContext.layoutId,

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

@@ -1 +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;AAmB/C,OAAO,EAA4B,eAAe,EAAgB,MAAM,mBAAmB,CAAC;AAgC5F,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,CA4uD5D,CAAC"}
+{"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;AAkB/C,OAAO,EAA4B,eAAe,EAAgB,MAAM,mBAAmB,CAAC;AA2D5F,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,CAoxD5D,CAAC"}

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

@@ -3,7 +3,6 @@ import { useState, useMemo, useEffect, useLayoutEffect, useRef, useCallback } fr
 import { previewRouteToPageId } from '../../preview/canvas/preview-route.js';
 import { EditorHeader } from '../shared/EditorHeader.js';
 import { EditorNavigator } from '../shared/EditorNavigator.js';
-import { IframePreview } from '../shared/IframePreview.js';
 import { ResizableSidebar } from '../shared/ResizableSidebar.js';
 import { moveSectionKeyInPageOrder, normalizeEditorLayoutId, resolveSectionKeyOrderForPage, storeConfigToEnvelope, } from '../document/index.js';
 import { payazaSectionStyleKey, getPayazaSectionStyleEntries } from '../../lib/payaza-section-styles.js';
@@ -19,6 +18,7 @@ import { AIGenerateModal } from '../shared/AIGenerateModal.js';
 import { useAlertModal } from '../../components/ui/alert-modal.js';
 import { AssetSelectionProvider } from './AssetSelectionContext.js';
 import { IframePreviewMessageBridge } from './IframePreviewMessageBridge.js';
+import { EditorCanvasPreview } from './EditorCanvasPreview.js';
 import { BlockStylesInspector } from './components/BlockStylesInspector.js';
 import { CanvasGranularInspector } from './components/CanvasGranularInspector.js';
 import { SectionSchemaInspector } from './components/SectionSchemaInspector.js';
@@ -27,7 +27,34 @@ import { resolveCanvasInspectorLeaf } from '../alignment-schemas/resolve-canvas-
 import { granularPathForArrayItem, granularPathForBlockFirstAttr, outlineTreeForSectionPayload, } from '../blocks/nav-outline-utils.js';
 import { ActiveArrayFocusProvider, } from './ActiveArrayFocusContext.js';
 import { EditorLayoutProvider } from './EditorLayoutContext.js';
-import { isMobileEditorViewport } from '../../lib/utils/mobile-editor.js';
+import { isMobileEditorViewport, shouldUseInlineEditorPreview } from '../../lib/utils/mobile-editor.js';
+/** Lightweight fingerprint for undo history on mobile — avoids JSON.stringify on large configs. */
+function lightweightConfigFingerprint(config) {
+    try {
+        const layoutConfig = config.layoutConfig;
+        const pages = layoutConfig?.pages;
+        if (Array.isArray(pages)) {
+            return pages
+                .map((page) => {
+                const p = page;
+                const sections = p.sections;
+                if (!Array.isArray(sections))
+                    return '';
+                return sections
+                    .map((s) => {
+                    const sec = s;
+                    return String(sec.key ?? sec.id ?? '');
+                })
+                    .join(',');
+            })
+                .join('|');
+        }
+        return String(config.layout ?? '');
+    }
+    catch {
+        return '';
+    }
+}
 export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, onSave, onPublish, onBack, onBackToSettings, onOpenAssets, onBackToTheme, title, className = '', customWidgets, storeName, storeDescription, assets, publishButtonText, onEditorDocumentChange, initialDataIsPublished, onEditorHydrated, preloadedBaseRequirement, catalogOverlay, }) => {
     const [activePageId, setActivePageId] = useState('home');
     const [data, setData] = useState(initialData);
@@ -40,7 +67,8 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
     const [history, setHistory] = useState([initialData]);
     const [historyIndex, setHistoryIndex] = useState(0);
     const isInternalChange = useRef(false);
-    const MAX_HISTORY = 50;
+    const useInlinePreview = shouldUseInlineEditorPreview();
+    const MAX_HISTORY = useInlinePreview ? 8 : 50;
     // Track last published data to disable publish button if no changes.
     // When initialDataIsPublished is explicitly false (a draft was loaded), start with null
     // so hasChangesSincePublish is true immediately — the draft IS an unpublished change.
@@ -175,7 +203,11 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
             setHistory(prev => {
                 const newHistory = prev.slice(0, historyIndex + 1);
                 // Only add if data is different from the last entry
-                if (JSON.stringify(newHistory[newHistory.length - 1]) !== JSON.stringify(data)) {
+                const lastEntry = newHistory[newHistory.length - 1];
+                const isDuplicate = useInlinePreview
+                    ? lightweightConfigFingerprint(lastEntry) === lightweightConfigFingerprint(data)
+                    : JSON.stringify(lastEntry) === JSON.stringify(data);
+                if (!isDuplicate) {
                     const updatedHistory = [...newHistory, data];
                     if (updatedHistory.length > MAX_HISTORY) {
                         return updatedHistory.slice(1);
@@ -189,7 +221,7 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
             setHistoryIndex(prev => prev + 1);
         }
         isInternalChange.current = false;
-    }, [data]);
+    }, [data, historyIndex, MAX_HISTORY, useInlinePreview]);
     // Fix the history index after history update
     useEffect(() => {
         if (history.length > 0 && historyIndex >= history.length) {
@@ -947,6 +979,76 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
         // but it helps prevent state updates if the user closes the modal or navigates away.
         // In a real scenario, we might want to use AbortController.
     };
+    const previewEditorContext = useMemo(() => ({
+        layoutId: normalizedLayoutType ?? String(layoutId),
+        activePageId,
+    }), [normalizedLayoutType, layoutId, activePageId]);
+    const handlePreviewRouteChange = useCallback((route) => {
+        const editorLayoutId = normalizedLayoutType ?? String(layoutId);
+        const nextPageId = previewRouteToPageId(route, editorLayoutId);
+        if (nextPageId &&
+            nextPageId !== activePageId &&
+            isLayoutPageEditable(editorLayoutId, nextPageId)) {
+            setActivePageId(nextPageId);
+            setSelectedSection(null);
+            setCanvasElementFocus(null);
+            setActiveArrayFocus(null);
+        }
+    }, [normalizedLayoutType, layoutId, activePageId]);
+    const handlePreviewSectionSelected = useCallback((sectionKey) => {
+        setSelectedSection(sectionKey);
+        requestAnimationFrame(() => {
+            document
+                .querySelector(`[data-section-key="${sectionKey}"]`)
+                ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        });
+    }, []);
+    const handlePreviewFieldCommit = useCallback((payload) => {
+        let value = payload.richText ?? payload.valueText;
+        if (payload.elementKind === 'rating') {
+            const parsed = Number(payload.valueText);
+            value = Number.isFinite(parsed)
+                ? Math.min(5, Math.max(1, Math.round(parsed)))
+                : 5;
+        }
+        handleFieldChange(payload.sectionKey, payload.fieldPath, value);
+    }, 
+    // handleFieldChange is a stable-enough plain function defined above in this component.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const handlePreviewElementFocus = useCallback((p) => {
+        setCanvasElementFocus(p);
+        setSelectedSection(p.sectionKey);
+        setBlockSubTab('settings');
+        if (p.fieldPath[0] === 'items' && /^\d+$/.test(p.fieldPath[1] ?? '')) {
+            setActiveArrayFocus({
+                sectionKey: p.sectionKey,
+                fieldKey: 'items',
+                index: parseInt(p.fieldPath[1], 10),
+            });
+        }
+        else if (p.fieldPath[0] === 'sliders' && /^\d+$/.test(p.fieldPath[1] ?? '')) {
+            setActiveArrayFocus({
+                sectionKey: p.sectionKey,
+                fieldKey: 'sliders',
+                index: parseInt(p.fieldPath[1], 10),
+            });
+        }
+        requestAnimationFrame(() => {
+            document
+                .querySelector(`[data-section-key="${p.sectionKey}"]`)
+                ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        });
+    }, []);
+    const handlePreviewFocusSidebarSection = useCallback((sectionKey) => {
+        setSelectedSection(sectionKey);
+        setBlockSubTab('settings');
+        requestAnimationFrame(() => {
+            document
+                .querySelector(`[data-section-key="${sectionKey}"]`)
+                ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        });
+    }, []);
     if (loading) {
         return (_jsxs("div", { className: "flex h-full flex-col overflow-hidden bg-[#F7F5F0] font-sans", children: [_jsxs("div", { className: "flex min-h-[72px] shrink-0 items-center justify-between border-b border-[#e6e9ee] bg-white/95 px-4 py-2 md:px-5", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "h-10 w-10 animate-pulse rounded-xl bg-slate-100" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-3 w-28 animate-pulse rounded bg-slate-100" }), _jsx("div", { className: "h-2 w-20 animate-pulse rounded bg-slate-100" })] })] }), _jsxs("div", { className: "flex gap-3", children: [_jsx("div", { className: "h-10 w-24 animate-pulse rounded-xl bg-slate-100" }), _jsx("div", { className: "h-10 w-28 animate-pulse rounded-xl bg-slate-100" })] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsx("div", { className: "flex flex-1 items-center justify-center bg-[#e2e4e7] p-8", children: _jsx("div", { className: "h-full min-h-[200px] w-full max-w-4xl animate-pulse rounded-lg bg-white/60 shadow-inner ring-1 ring-[#e8e8e8]" }) }), _jsxs("div", { className: "w-[380px] space-y-8 border-l border-[#dcdcde] bg-white p-6", children: [_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "w-32 h-4 bg-slate-50 animate-pulse rounded" }), _jsx("div", { className: "w-full h-12 bg-slate-50 animate-pulse rounded-xl" })] }), _jsx("div", { className: "space-y-6", children: [1, 2, 3, 4].map(i => (_jsx("div", { className: "w-full h-20 bg-slate-50 animate-pulse rounded-2xl" }, i))) })] })] })] }));
     }
@@ -963,68 +1065,7 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
                             handleFieldChange(canvasElementFocus.sectionKey, [...canvasElementFocus.fieldPath, 'attributes', 'payazaStyle'], next);
                         }
                     } })) : (_jsxs(_Fragment, { children: [granularInspectorActive && (_jsx("div", { className: "border-b border-[#e8e9ec] bg-[#fafafa] px-4 py-2.5", children: _jsxs("p", { className: "text-[11px] text-[#787c82]", children: ["Styles apply to the ", _jsx("strong", { className: "font-medium text-[#1b0029]", children: selectedSectionLabel ?? 'section' }), " containing this element."] }) })), _jsx(BlockStylesInspector, { supports: selectedSectionStyleSupports, value: selectedBlockStyleEntries, onChange: (next) => selectedSection && handleBlockStylesChange(selectedSection, next) })] }))) : canvasElementFocus?.elementKind === 'group' ? (_jsxs("div", { className: "px-4 py-6", children: [_jsxs("div", { className: "mb-4 flex items-center gap-2", children: [_jsx(Layers, { className: "h-4 w-4 shrink-0 text-[#440066]", strokeWidth: 2, "aria-hidden": true }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-[13px] font-semibold text-[#1b0029]", children: "Group" }), _jsx("p", { className: "truncate text-[11px] text-[#787c82]", children: canvasElementFocus.fieldPath.join(' › ') })] })] }), _jsxs("p", { className: "text-[12px] text-[#646970]", children: ["Switch to the ", _jsx("strong", { className: "font-medium text-[#1b0029]", children: "Styles" }), " tab to edit group layout, spacing, and colors."] })] })) : granularInspectorActive && canvasElementFocus && layoutJson && pageSchema ? (_jsxs(_Fragment, { children: [granularBreadcrumbLabel ? (_jsxs("div", { className: "border-b border-[#e8e9ec] bg-[#fafafa] px-4 py-2.5", children: [_jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-[#1b0029]/40", children: "Editing" }), _jsx("p", { className: "mt-0.5 truncate text-[13px] font-semibold text-[#1b0029]", children: granularBreadcrumbLabel })] })) : null, _jsx(CanvasGranularInspector, { layoutJson: layoutJson, activePageId: activePageId, sectionKey: canvasElementFocus.sectionKey, fieldPath: canvasElementFocus.fieldPath, elementKind: canvasElementFocus.elementKind, pageSchemaRecord: pageSchema.schema, sectionData: pageSchema.data[canvasElementFocus.sectionKey], onChange: (sk, fp, val) => handleFieldChange(sk, fp, val) })] })) : selectedSection && pageSchema?.schema[selectedSection] ? (_jsx(SectionSchemaInspector, { sectionKey: selectedSection, sectionSchema: pageSchema.schema[selectedSection], sectionData: pageSchema.data[selectedSection], onFieldChange: (sk, fp, val) => handleFieldChange(sk, fp, val) })) : (_jsx("div", { className: "flex flex-col items-center justify-center px-5 py-12 text-center", children: _jsx("p", { className: "text-[13px] text-[#646970]", children: "Select a section in the List View or click the canvas to begin editing." }) })) })] }));
-    return (_jsx(EditorLayoutProvider, { value: { layoutId: normalizedLayoutType ?? String(layoutId) }, children: _jsxs(AssetSelectionProvider, { onOpenAssets: onOpenAssets, assets: assets, children: [_jsx(IframePreviewMessageBridge, { editorContext: {
-                        layoutId: normalizedLayoutType ?? String(layoutId),
-                        activePageId,
-                    }, onRouteChange: (route) => {
-                        const editorLayoutId = normalizedLayoutType ?? String(layoutId);
-                        const nextPageId = previewRouteToPageId(route, editorLayoutId);
-                        if (nextPageId &&
-                            nextPageId !== activePageId &&
-                            isLayoutPageEditable(editorLayoutId, nextPageId)) {
-                            setActivePageId(nextPageId);
-                            setSelectedSection(null);
-                            setCanvasElementFocus(null);
-                            setActiveArrayFocus(null);
-                        }
-                    }, onSectionSelected: (sectionKey) => {
-                        setSelectedSection(sectionKey);
-                        requestAnimationFrame(() => {
-                            document
-                                .querySelector(`[data-section-key="${sectionKey}"]`)
-                                ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                        });
-                    }, onFieldCommit: (payload) => {
-                        let value = payload.richText ?? payload.valueText;
-                        if (payload.elementKind === 'rating') {
-                            const parsed = Number(payload.valueText);
-                            value = Number.isFinite(parsed)
-                                ? Math.min(5, Math.max(1, Math.round(parsed)))
-                                : 5;
-                        }
-                        handleFieldChange(payload.sectionKey, payload.fieldPath, value);
-                    }, onSectionReorder: handleReorderSection, onPreviewElementFocus: (p) => {
-                        setCanvasElementFocus(p);
-                        setSelectedSection(p.sectionKey);
-                        setBlockSubTab('settings');
-                        if (p.fieldPath[0] === 'items' && /^\d+$/.test(p.fieldPath[1] ?? '')) {
-                            setActiveArrayFocus({
-                                sectionKey: p.sectionKey,
-                                fieldKey: 'items',
-                                index: parseInt(p.fieldPath[1], 10),
-                            });
-                        }
-                        else if (p.fieldPath[0] === 'sliders' && /^\d+$/.test(p.fieldPath[1] ?? '')) {
-                            setActiveArrayFocus({
-                                sectionKey: p.sectionKey,
-                                fieldKey: 'sliders',
-                                index: parseInt(p.fieldPath[1], 10),
-                            });
-                        }
-                        requestAnimationFrame(() => {
-                            document
-                                .querySelector(`[data-section-key="${p.sectionKey}"]`)
-                                ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                        });
-                    }, onFocusSidebarSection: (sectionKey) => {
-                        setSelectedSection(sectionKey);
-                        setBlockSubTab('settings');
-                        requestAnimationFrame(() => {
-                            document
-                                .querySelector(`[data-section-key="${sectionKey}"]`)
-                                ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                        });
-                    } }), _jsx(ActiveArrayFocusProvider, { sectionKey: selectedSection, focus: activeArrayFocus, onFocusChange: handleActiveArrayFocusChange, onBeforeIndexChange: flushPreviewEdits, children: _jsxs("div", { className: `flex h-full min-h-0 flex-col bg-[#F7F5F0] ${className} font-sans antialiased text-[#1b0029]`, children: [_jsx(EditorHeader, { layoutName: layoutJson.layoutName || layoutId, storeName: storeName, storeLogo: initialData?.branding?.logo, activePage: activePageId, pages: pages, onPageSwitch: setActivePageId, showPageSwitcher: false, showPageContextCard: false, currentPageLabel: currentPageLabel, onSave: handleSave, onPublish: onPublish && hasChangesSincePublish ? handlePublish : undefined, onBack: onBack, onBackToSettings: onBackToSettings, onOpenAssets: onOpenAssets, onBackToTheme: onBackToTheme, onUndo: handleUndo, onRedo: handleRedo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1, viewMode: viewMode, onViewModeChange: setViewMode, previewZoom: previewZoom, onPreviewZoomChange: setPreviewZoom, editorType: "payaza-form", isSaving: isSaving, isPublishing: isPublishing, onGenerateAI: () => setIsAIModalOpen(true), isGeneratingAI: isGeneratingAI, publishButtonText: publishButtonText, centerTemplateLabel: centerTemplateLabel, outlinePanelOpen: isMobileView ? mobilePanelView === 'outline' : outlinePanelOpen, onToggleOutlinePanel: handleToggleOutlinePanel, interactionMode: interactionMode, onInteractionModeChange: setInteractionMode, isMobileChrome: isMobileView }), _jsx(AIGenerateModal, { isOpen: isAIModalOpen, onClose: () => setIsAIModalOpen(false), onGenerate: handleAIGenerate, initialContext: {
+    return (_jsx(EditorLayoutProvider, { value: { layoutId: normalizedLayoutType ?? String(layoutId) }, children: _jsxs(AssetSelectionProvider, { onOpenAssets: onOpenAssets, assets: assets, children: [!useInlinePreview ? (_jsx(IframePreviewMessageBridge, { editorContext: previewEditorContext, onRouteChange: handlePreviewRouteChange, onSectionSelected: handlePreviewSectionSelected, onFieldCommit: handlePreviewFieldCommit, onSectionReorder: handleReorderSection, onPreviewElementFocus: handlePreviewElementFocus, onFocusSidebarSection: handlePreviewFocusSidebarSection })) : null, _jsx(ActiveArrayFocusProvider, { sectionKey: selectedSection, focus: activeArrayFocus, onFocusChange: handleActiveArrayFocusChange, onBeforeIndexChange: flushPreviewEdits, children: _jsxs("div", { className: `flex h-full min-h-0 flex-col bg-[#F7F5F0] ${className} font-sans antialiased text-[#1b0029]`, children: [_jsx(EditorHeader, { layoutName: layoutJson.layoutName || layoutId, storeName: storeName, storeLogo: initialData?.branding?.logo, activePage: activePageId, pages: pages, onPageSwitch: setActivePageId, showPageSwitcher: false, showPageContextCard: false, currentPageLabel: currentPageLabel, onSave: handleSave, onPublish: onPublish && hasChangesSincePublish ? handlePublish : undefined, onBack: onBack, onBackToSettings: onBackToSettings, onOpenAssets: onOpenAssets, onBackToTheme: onBackToTheme, onUndo: handleUndo, onRedo: handleRedo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1, viewMode: viewMode, onViewModeChange: setViewMode, previewZoom: previewZoom, onPreviewZoomChange: setPreviewZoom, editorType: "payaza-form", isSaving: isSaving, isPublishing: isPublishing, onGenerateAI: () => setIsAIModalOpen(true), isGeneratingAI: isGeneratingAI, publishButtonText: publishButtonText, centerTemplateLabel: centerTemplateLabel, outlinePanelOpen: isMobileView ? mobilePanelView === 'outline' : outlinePanelOpen, onToggleOutlinePanel: handleToggleOutlinePanel, interactionMode: interactionMode, onInteractionModeChange: setInteractionMode, isMobileChrome: isMobileView }), _jsx(AIGenerateModal, { isOpen: isAIModalOpen, onClose: () => setIsAIModalOpen(false), onGenerate: handleAIGenerate, initialContext: {
                                     storeName: storeName || data?.name || '',
                                     storeDescription: storeDescription || data?.description || '',
                                     assets: assets || [],
@@ -1070,7 +1111,7 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
                                                                     ? 'bg-white text-[#440066] shadow-sm'
                                                                     : 'text-[#5b6470]'}`, children: [_jsx(Pencil, { className: "h-3 w-3", strokeWidth: 2 }), "Edit"] }), _jsxs("button", { type: "button", onClick: () => setInteractionMode('preview'), "aria-pressed": interactionMode === 'preview', "aria-label": "Preview mode", className: `flex h-7 items-center gap-1 rounded-md px-2.5 text-[11px] font-medium transition-colors ${interactionMode === 'preview'
                                                                     ? 'bg-white text-[#440066] shadow-sm'
-                                                                    : 'text-[#5b6470]'}`, children: [_jsx(Eye, { className: "h-3 w-3", strokeWidth: 2 }), "Preview"] })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Smartphone, { className: "h-3.5 w-3.5 text-[#440066]", strokeWidth: 2, "aria-hidden": true }), _jsx("span", { className: "rounded-full bg-[#f3f0f7] px-2.5 py-0.5 text-[10px] font-semibold text-[#440066]", children: "Mobile" })] })] })), _jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden px-1", children: [_jsx(IframePreview, { layoutId: layoutId, config: data, activePageId: activePageId, viewMode: isMobileView ? 'desktop' : viewMode, previewZoom: previewZoom, selectedSection: selectedSection, focusedField: canvasElementFocus, interactionMode: interactionMode, slideIndexSync: slideIndexSync, flushRequestId: flushRequestId }), selectedSectionLabel && interactionMode === 'edit' && (_jsx("div", { className: "pointer-events-none absolute bottom-4 left-1/2 z-30 max-w-[min(100%-2rem,360px)] -translate-x-1/2", children: _jsxs("div", { className: "pointer-events-auto flex items-center gap-2 rounded-sm border border-[#dcdcde] bg-white px-2.5 py-1.5 shadow-sm", children: [_jsx(Box, { className: "h-3.5 w-3.5 shrink-0 text-[#1b0029]/45", strokeWidth: 2, "aria-hidden": true }), _jsx("span", { className: "truncate text-[12px] text-[#1b0029]", children: selectedSectionLabel })] }) }))] }), !isMobileView && (_jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-x-1 gap-y-1 border-t border-[#dcdcde] bg-[#eef0f3] px-3 py-2.5 text-[12px]", style: { contain: 'layout style' }, "aria-label": "Editing context", children: [_jsx("span", { className: "rounded-full border border-[#dcdcde] bg-white px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.08em] text-[#646970]", children: "Editing" }), _jsx("span", { className: "truncate font-medium text-[#1b0029]", children: currentPageLabel }), selectedSectionLabel && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[#1b0029]/25", "aria-hidden": true, children: "/" }), _jsx("span", { className: "max-w-[min(60vw,280px)] truncate text-[#1b0029]/72", children: selectedSectionLabel })] })), activeSlideBreadcrumbLabel && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[#1b0029]/25", "aria-hidden": true, children: "/" }), _jsx("span", { className: "max-w-[min(40vw,160px)] truncate font-medium text-[#440066]", children: activeSlideBreadcrumbLabel })] })), canvasElementFocus?.fieldPath?.length ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[#1b0029]/25", "aria-hidden": true, children: "/" }), _jsx("span", { className: "max-w-[min(72vw,360px)] truncate font-medium text-[#440066]", title: granularBreadcrumbLabel ?? canvasElementFocus.fieldPath.join(' › '), children: granularBreadcrumbLabel ?? canvasElementFocus.fieldPath.join(' › ') })] })) : null, canvasElementFocus?.elementKind && canvasElementFocus.elementKind !== 'section' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[#1b0029]/25", "aria-hidden": true, children: "/" }), _jsx("span", { className: "truncate text-[11px] text-[#1b0029]/45", children: canvasElementFocus.elementKind === 'richHtml'
+                                                                    : 'text-[#5b6470]'}`, children: [_jsx(Eye, { className: "h-3 w-3", strokeWidth: 2 }), "Preview"] })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Smartphone, { className: "h-3.5 w-3.5 text-[#440066]", strokeWidth: 2, "aria-hidden": true }), _jsx("span", { className: "rounded-full bg-[#f3f0f7] px-2.5 py-0.5 text-[10px] font-semibold text-[#440066]", children: "Mobile" })] })] })), _jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden px-1", children: [_jsx(EditorCanvasPreview, { layoutId: layoutId, config: debouncedData, activePageId: activePageId, viewMode: viewMode, previewZoom: previewZoom, selectedSection: selectedSection, focusedField: canvasElementFocus, interactionMode: interactionMode, slideIndexSync: slideIndexSync, flushRequestId: flushRequestId, editorContext: previewEditorContext, onRouteChange: handlePreviewRouteChange, onSectionSelected: handlePreviewSectionSelected, onFieldCommit: handlePreviewFieldCommit, onSectionReorder: handleReorderSection, onPreviewElementFocus: handlePreviewElementFocus, onFocusSidebarSection: handlePreviewFocusSidebarSection }), selectedSectionLabel && interactionMode === 'edit' && (_jsx("div", { className: "pointer-events-none absolute bottom-4 left-1/2 z-30 max-w-[min(100%-2rem,360px)] -translate-x-1/2", children: _jsxs("div", { className: "pointer-events-auto flex items-center gap-2 rounded-sm border border-[#dcdcde] bg-white px-2.5 py-1.5 shadow-sm", children: [_jsx(Box, { className: "h-3.5 w-3.5 shrink-0 text-[#1b0029]/45", strokeWidth: 2, "aria-hidden": true }), _jsx("span", { className: "truncate text-[12px] text-[#1b0029]", children: selectedSectionLabel })] }) }))] }), !isMobileView && (_jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-x-1 gap-y-1 border-t border-[#dcdcde] bg-[#eef0f3] px-3 py-2.5 text-[12px]", style: { contain: 'layout style' }, "aria-label": "Editing context", children: [_jsx("span", { className: "rounded-full border border-[#dcdcde] bg-white px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.08em] text-[#646970]", children: "Editing" }), _jsx("span", { className: "truncate font-medium text-[#1b0029]", children: currentPageLabel }), selectedSectionLabel && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[#1b0029]/25", "aria-hidden": true, children: "/" }), _jsx("span", { className: "max-w-[min(60vw,280px)] truncate text-[#1b0029]/72", children: selectedSectionLabel })] })), activeSlideBreadcrumbLabel && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[#1b0029]/25", "aria-hidden": true, children: "/" }), _jsx("span", { className: "max-w-[min(40vw,160px)] truncate font-medium text-[#440066]", children: activeSlideBreadcrumbLabel })] })), canvasElementFocus?.fieldPath?.length ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[#1b0029]/25", "aria-hidden": true, children: "/" }), _jsx("span", { className: "max-w-[min(72vw,360px)] truncate font-medium text-[#440066]", title: granularBreadcrumbLabel ?? canvasElementFocus.fieldPath.join(' › '), children: granularBreadcrumbLabel ?? canvasElementFocus.fieldPath.join(' › ') })] })) : null, canvasElementFocus?.elementKind && canvasElementFocus.elementKind !== 'section' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[#1b0029]/25", "aria-hidden": true, children: "/" }), _jsx("span", { className: "truncate text-[11px] text-[#1b0029]/45", children: canvasElementFocus.elementKind === 'richHtml'
                                                                     ? 'Rich text'
                                                                     : canvasElementFocus.elementKind === 'image'
                                                                         ? 'Image'

package/dist/editor/payaza-form/preview-message-handler.d.ts

@@ -0,0 +1,18 @@
+import { type PreviewElementFocusPayload } from '../../preview/canvas/preview-messages';
+import type { PayazaInlineFieldCommitPayload } from './IframePreviewMessageBridge';
+export interface PreviewMessageHandlerContext {
+    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;
+    onOpenAssetSelect?: (callback: (url: string) => void) => void;
+}
+/** Shared handler for iframe postMessage and inline preview events. */
+export declare function processPreviewMessage(d: Record<string, unknown>, ctx: PreviewMessageHandlerContext): void;
+//# sourceMappingURL=preview-message-handler.d.ts.map

package/dist/editor/payaza-form/preview-message-handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-message-handler.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/preview-message-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,0BAA0B,EAEhC,MAAM,uCAAuC,CAAC;AAE/C,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAEnF,MAAM,WAAW,4BAA4B;IAC3C,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,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;CAC/D;AAED,uEAAuE;AACvE,wBAAgB,qBAAqB,CACnC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC1B,GAAG,EAAE,4BAA4B,GAChC,IAAI,CA0GN"}

package/dist/editor/payaza-form/preview-message-handler.js

@@ -0,0 +1,84 @@
+import { PREVIEW_MSG, } from '../../preview/canvas/preview-messages.js';
+import { previewCommitsMatchEditorContext } from '../../preview/canvas/preview-isolation.js';
+/** Shared handler for iframe postMessage and inline preview events. */
+export function processPreviewMessage(d, ctx) {
+    if (d.type === 'SECTION_SELECTED') {
+        const sectionKey = d.section || d.sectionKey;
+        if (typeof sectionKey === 'string' && sectionKey) {
+            ctx.onSectionSelected(sectionKey);
+        }
+        return;
+    }
+    if (d.type === PREVIEW_MSG.ELEMENT_FOCUS) {
+        const payload = d;
+        const ok = previewCommitsMatchEditorContext({ layoutId: payload.layoutId, pageId: payload.pageId }, { layoutId: ctx.editorContext.layoutId, pageId: ctx.editorContext.activePageId });
+        if (!ok)
+            return;
+        ctx.onPreviewElementFocus?.({
+            layoutId: payload.layoutId,
+            pageId: payload.pageId,
+            sectionKey: payload.sectionKey,
+            fieldPath: payload.fieldPath,
+            elementKind: payload.elementKind,
+        });
+        return;
+    }
+    if (d.type === PREVIEW_MSG.FIELD_COMMIT) {
+        const payload = d;
+        const ok = previewCommitsMatchEditorContext({ layoutId: payload.layoutId, pageId: payload.pageId }, { layoutId: ctx.editorContext.layoutId, pageId: ctx.editorContext.activePageId });
+        if (!ok)
+            return;
+        ctx.onFieldCommit({
+            sectionKey: payload.sectionKey,
+            fieldPath: payload.fieldPath,
+            valueText: String(payload.value ?? ''),
+            richText: payload.richText,
+            elementKind: payload.elementKind,
+        });
+        return;
+    }
+    if (d.type === PREVIEW_MSG.SECTION_REORDER) {
+        const { sectionKey, direction, layoutId, pageId } = d;
+        const ok = layoutId &&
+            pageId &&
+            previewCommitsMatchEditorContext({ layoutId, pageId }, { layoutId: ctx.editorContext.layoutId, pageId: ctx.editorContext.activePageId });
+        if (!ok)
+            return;
+        if (sectionKey && (direction === 'up' || direction === 'down')) {
+            ctx.onSectionReorder(sectionKey, direction);
+        }
+        return;
+    }
+    if (d.type === PREVIEW_MSG.IMAGE_ACTIVATE) {
+        const { sectionKey, fieldPath, layoutId, pageId } = d;
+        const ok = layoutId &&
+            pageId &&
+            previewCommitsMatchEditorContext({ layoutId, pageId }, { layoutId: ctx.editorContext.layoutId, pageId: ctx.editorContext.activePageId });
+        if (!ok)
+            return;
+        if (sectionKey && Array.isArray(fieldPath)) {
+            ctx.onOpenAssetSelect?.((url) => {
+                ctx.onFieldCommit({
+                    sectionKey,
+                    fieldPath,
+                    valueText: url,
+                    elementKind: 'image',
+                });
+            });
+        }
+        return;
+    }
+    if (d.type === 'PREVIEW_FOCUS_SIDEBAR') {
+        const sk = d.sectionKey;
+        if (typeof sk === 'string' && sk) {
+            ctx.onFocusSidebarSection(sk);
+        }
+        return;
+    }
+    if (d.type === 'ROUTE_CHANGED') {
+        const route = d.route;
+        if (typeof route === 'string' && route) {
+            ctx.onRouteChange?.(route);
+        }
+    }
+}

package/dist/editor/shared/InlineCanvasPreview.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StoreConfig } from '../../lib/store-types';
+import type { InteractionMode } from '../document/types';
+import { type PreviewZoom } from './preview-viewport';
+interface InlineCanvasPreviewProps {
+    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;
+    desktopCanvasWidth?: number;
+    className?: string;
+    onPreviewEvent?: (payload: object) => void;
+    onReady?: () => void;
+}
+/**
+ * Same-document layout preview for mobile editors — avoids iframe memory overhead on WebKit.
+ */
+export declare const InlineCanvasPreview: React.FC<InlineCanvasPreviewProps>;
+export {};
+//# sourceMappingURL=InlineCanvasPreview.d.ts.map

package/dist/editor/shared/InlineCanvasPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineCanvasPreview.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/InlineCanvasPreview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAOpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,oBAAoB,CAAC;AAE5B,UAAU,wBAAwB;IAChC,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,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAkNlE,CAAC"}

package/dist/editor/shared/InlineCanvasPreview.js

@@ -0,0 +1,145 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { LayoutPreview } from '../../preview/LayoutPreview.js';
+import { PreviewCanvasEnhancer } from '../../preview/canvas/PreviewCanvasEnhancer.js';
+import { PreviewCanvasStyles } from '../../preview/canvas/PreviewCanvasStyles.js';
+import { previewPageIdToRoute } from '../../preview/canvas/preview-route.js';
+import { PREVIEW_MSG } from '../../preview/canvas/preview-messages.js';
+import { normalizeEditorLayoutId } from '../document/layout-id.js';
+import { DESKTOP_PREVIEW_WIDTH, resolvePreviewScale, } from './preview-viewport.js';
+/**
+ * Same-document layout preview for mobile editors — avoids iframe memory overhead on WebKit.
+ */
+export const InlineCanvasPreview = ({ layoutId, config, activePageId, viewMode, selectedSection, focusedField = null, interactionMode = 'edit', slideIndexSync = null, flushRequestId = 0, previewZoom = 'fit', desktopCanvasWidth = DESKTOP_PREVIEW_WIDTH, className = '', onPreviewEvent, onReady, }) => {
+    const viewportContainerRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [currentRoute, setCurrentRoute] = useState('/');
+    const readyFiredRef = useRef(false);
+    const canonicalLayoutId = useMemo(() => normalizeEditorLayoutId(String(layoutId)) ?? String(layoutId), [layoutId]);
+    const route = useMemo(() => previewPageIdToRoute(layoutId, activePageId, config), [layoutId, activePageId, config]);
+    useEffect(() => {
+        setCurrentRoute(route);
+    }, [route]);
+    const previewContext = useMemo(() => ({
+        layoutId: canonicalLayoutId,
+        pageId: activePageId,
+    }), [canonicalLayoutId, activePageId]);
+    const previewData = useMemo(() => {
+        const base = {
+            ...config,
+            isPreview: true,
+            headerConfig: {
+                ...config.headerConfig,
+                show: config.headerConfig?.show ?? true,
+            },
+        };
+        if (typeof window !== 'undefined') {
+            window.__IS_PREVIEW__ = true;
+        }
+        return base;
+    }, [config]);
+    useEffect(() => {
+        if (readyFiredRef.current)
+            return;
+        readyFiredRef.current = true;
+        onReady?.();
+    }, [onReady]);
+    const lastPostedFocusRef = useRef(null);
+    useEffect(() => {
+        const key = focusedField
+            ? `${focusedField.sectionKey}|${focusedField.fieldPath.join('|')}|${focusedField.elementKind}`
+            : null;
+        if (lastPostedFocusRef.current === key)
+            return;
+        lastPostedFocusRef.current = key;
+        window.postMessage({ type: PREVIEW_MSG.FIELD_SELECTED_SYNC, field: focusedField }, '*');
+    }, [focusedField]);
+    useEffect(() => {
+        window.postMessage({ type: 'SECTION_SELECTED_SYNC', section: selectedSection ?? null }, '*');
+    }, [selectedSection]);
+    const lastPostedSlideSyncRef = useRef(null);
+    useEffect(() => {
+        const key = slideIndexSync
+            ? `${slideIndexSync.sectionKey}|${slideIndexSync.arrayField}|${slideIndexSync.index}`
+            : null;
+        if (lastPostedSlideSyncRef.current === key)
+            return;
+        lastPostedSlideSyncRef.current = key;
+        if (!slideIndexSync)
+            return;
+        const payload = {
+            type: PREVIEW_MSG.SLIDE_INDEX_SYNC,
+            sectionKey: slideIndexSync.sectionKey,
+            arrayField: slideIndexSync.arrayField,
+            index: slideIndexSync.index,
+        };
+        window.postMessage(payload, '*');
+    }, [slideIndexSync]);
+    const lastFlushRef = useRef(0);
+    useEffect(() => {
+        if (flushRequestId <= 0)
+            return;
+        if (lastFlushRef.current === flushRequestId)
+            return;
+        lastFlushRef.current = flushRequestId;
+        window.postMessage({ type: PREVIEW_MSG.FLUSH_EDITS }, '*');
+    }, [flushRequestId]);
+    useEffect(() => {
+        if (viewMode !== 'desktop')
+            return;
+        const el = viewportContainerRef.current;
+        if (!el)
+            return;
+        const updateWidth = () => setContainerWidth(el.clientWidth);
+        updateWidth();
+        const observer = new ResizeObserver(updateWidth);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [viewMode]);
+    const desktopScale = useMemo(() => {
+        if (viewMode !== 'desktop')
+            return 1;
+        return resolvePreviewScale(previewZoom, containerWidth, desktopCanvasWidth);
+    }, [viewMode, previewZoom, containerWidth, desktopCanvasWidth]);
+    const scaledDesktopHeight = useMemo(() => {
+        if (viewMode !== 'desktop')
+            return 900;
+        const parent = viewportContainerRef.current?.parentElement;
+        const availableHeight = parent?.clientHeight ?? 0;
+        if (availableHeight <= 0)
+            return 900;
+        return Math.max(480, availableHeight / Math.max(desktopScale, 0.01));
+    }, [viewMode, desktopScale]);
+    const deviceDimensions = useMemo(() => {
+        switch (viewMode) {
+            case 'mobile':
+                return { width: 390, height: 844, rounded: 'rounded-[3.5rem]', border: 'border-[14px]' };
+            case 'tablet':
+                return { width: 768, height: 1024, rounded: 'rounded-2xl', border: 'border-[8px]' };
+            case 'desktop':
+            default:
+                return { width: '100%', height: '100%', rounded: '', border: '' };
+        }
+    }, [viewMode]);
+    const previewNode = (_jsx(PreviewCanvasEnhancer, { enabled: true, interactionMode: interactionMode, previewContext: previewContext, onPreviewEvent: onPreviewEvent, children: _jsx(LayoutPreview, { layout: layoutId, config: previewData, interactive: true, initialRoute: currentRoute, onRouteChange: (nextRoute) => {
+                setCurrentRoute(nextRoute);
+                onPreviewEvent?.({ type: 'ROUTE_CHANGED', route: nextRoute });
+            } }) }));
+    const chrome = (_jsxs(_Fragment, { children: [_jsx(PreviewCanvasStyles, {}), previewNode] }));
+    if (viewMode === 'desktop') {
+        return (_jsx("div", { ref: viewportContainerRef, className: `relative h-full w-full overflow-auto bg-[#e2e4e7] p-3 md:p-4 ${className}`, style: { WebkitOverflowScrolling: 'touch' }, children: _jsx("div", { className: "flex min-h-full justify-center py-1", children: _jsx("div", { className: "shrink-0 overflow-hidden rounded-lg bg-white shadow-[0_1px_2px_rgba(15,23,42,0.04),0_12px_32px_-8px_rgba(15,23,42,0.1)] transition-transform duration-200 ease-out", style: {
+                        width: desktopCanvasWidth,
+                        height: scaledDesktopHeight,
+                        minHeight: 480,
+                        transform: `scale(${desktopScale})`,
+                        transformOrigin: 'top center',
+                    }, children: _jsx("div", { className: "relative h-full w-full overflow-hidden rounded-lg", children: chrome }) }) }) }));
+    }
+    return (_jsx("div", { className: `relative flex h-full w-full items-start justify-center bg-[#dcdcde] p-2 ${className}`, children: _jsx("div", { className: `flex flex-col overflow-hidden bg-white shadow-2xl transition-all duration-500 ease-in-out ${deviceDimensions.rounded} ${deviceDimensions.border} border-[#c3c4c7]`, style: {
+                width: `${deviceDimensions.width}px`,
+                height: `${deviceDimensions.height}px`,
+                maxWidth: '100%',
+                maxHeight: '100%',
+            }, children: _jsx("div", { className: "relative min-h-0 flex-1 overflow-hidden bg-white", children: chrome }) }) }));
+};

package/dist/editor/shared/index.d.ts

@@ -1,6 +1,7 @@
 export * from './EditorHeader';
 export * from './EditorNavigator';
 export * from './IframePreview';
+export * from './InlineCanvasPreview';
 export * from './LayoutRenderer';
 export * from './PageTabs';
 export * from './ResizableSidebar';

package/dist/editor/shared/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC"}

package/dist/editor/shared/index.js

@@ -1,6 +1,7 @@
 export * from './EditorHeader.js';
 export * from './EditorNavigator.js';
 export * from './IframePreview.js';
+export * from './InlineCanvasPreview.js';
 export * from './LayoutRenderer.js';
 export * from './PageTabs.js';
 export * from './ResizableSidebar.js';

package/dist/lib/utils/mobile-editor.d.ts

@@ -3,4 +3,6 @@
  * Real phones stay in mobile mode in landscape — viewport width alone is unreliable (e.g. iPhone ~844px wide).
  */
 export declare function isMobileEditorViewport(): boolean;
+/** Inline same-document preview — avoids iframe double-runtime on mobile WebKit. */
+export declare function shouldUseInlineEditorPreview(): boolean;
 //# sourceMappingURL=mobile-editor.d.ts.map

package/dist/lib/utils/mobile-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-editor.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/mobile-editor.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,OAAO,CAUhD"}
+{"version":3,"file":"mobile-editor.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/mobile-editor.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,OAAO,CAUhD;AAED,oFAAoF;AACpF,wBAAgB,4BAA4B,IAAI,OAAO,CAEtD"}

package/dist/lib/utils/mobile-editor.js

@@ -15,3 +15,7 @@ export function isMobileEditorViewport() {
     }
     return false;
 }
+/** Inline same-document preview — avoids iframe double-runtime on mobile WebKit. */
+export function shouldUseInlineEditorPreview() {
+    return isMobileEditorViewport();
+}

package/dist/preview/canvas/PreviewCanvasEnhancer.d.ts

@@ -5,6 +5,8 @@ export interface PreviewCanvasEnhancerProps {
     interactionMode: 'edit' | 'preview';
     children: React.ReactNode;
     previewContext?: PayazaPreviewContext | null;
+    /** When set (inline mobile preview), dispatch events directly instead of postMessage to parent. */
+    onPreviewEvent?: (payload: object) => void;
 }
-export declare function PreviewCanvasEnhancer({ enabled, interactionMode, children, previewContext, }: PreviewCanvasEnhancerProps): React.JSX.Element;
+export declare function PreviewCanvasEnhancer({ enabled, interactionMode, children, previewContext, onPreviewEvent, }: PreviewCanvasEnhancerProps): React.JSX.Element;
 //# sourceMappingURL=PreviewCanvasEnhancer.d.ts.map

package/dist/preview/canvas/PreviewCanvasEnhancer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewCanvasEnhancer.d.ts","sourceRoot":"","sources":["../../../src/preview/canvas/PreviewCanvasEnhancer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAShE,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;CAC9C;AAeD,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,eAAe,EACf,QAAQ,EACR,cAAqB,GACtB,EAAE,0BAA0B,qBA2sB5B"}
+{"version":3,"file":"PreviewCanvasEnhancer.d.ts","sourceRoot":"","sources":["../../../src/preview/canvas/PreviewCanvasEnhancer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAShE,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC7C,mGAAmG;IACnG,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAeD,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,eAAe,EACf,QAAQ,EACR,cAAqB,EACrB,cAAc,GACf,EAAE,0BAA0B,qBAstB5B"}

package/dist/preview/canvas/PreviewCanvasEnhancer.js

@@ -18,7 +18,7 @@ function postToParent(payload) {
         window.parent.postMessage(payload, '*');
     }
 }
-export function PreviewCanvasEnhancer({ enabled, interactionMode, children, previewContext = null, }) {
+export function PreviewCanvasEnhancer({ enabled, interactionMode, children, previewContext = null, onPreviewEvent, }) {
     const [toolbarVisible, setToolbarVisible] = useState(false);
     const [toolbarRect, setToolbarRect] = useState(null);
     const [toolbarMode, setToolbarMode] = useState('text');
@@ -36,6 +36,14 @@ export function PreviewCanvasEnhancer({ enabled, interactionMode, children, prev
                 next;
         }
     }, [previewContext]);
+    const dispatchPreviewEvent = useCallback((payload) => {
+        if (onPreviewEvent) {
+            onPreviewEvent(payload);
+        }
+        else {
+            postToParent(payload);
+        }
+    }, [onPreviewEvent]);
     const resolveCtx = useCallback(() => {
         if (previewCtxRef.current?.layoutId && previewCtxRef.current.pageId)
             return previewCtxRef.current;
@@ -84,7 +92,7 @@ export function PreviewCanvasEnhancer({ enabled, interactionMode, children, prev
         const ctx = resolveCtx();
         if (!ctx)
             return;
-        postToParent({
+        dispatchPreviewEvent({
             type: PREVIEW_MSG.ELEMENT_FOCUS,
             layoutId: ctx.layoutId,
             pageId: ctx.pageId,
@@ -113,7 +121,7 @@ export function PreviewCanvasEnhancer({ enabled, interactionMode, children, prev
             setToolbarEditableActive(false);
             if (rich) {
                 const payload = buildPayazaRichCommitFromEditorHtml(inner, { keepRaw: true });
-                postToParent({
+                dispatchPreviewEvent({
                     type: PREVIEW_MSG.FIELD_COMMIT,
                     layoutId: ctx.layoutId,
                     pageId: ctx.pageId,
@@ -126,7 +134,7 @@ export function PreviewCanvasEnhancer({ enabled, interactionMode, children, prev
                 return;
             }
             const value = extractEditablePlainText(t);
-            postToParent({
+            dispatchPreviewEvent({
                 type: PREVIEW_MSG.FIELD_COMMIT,
                 layoutId: ctx.layoutId,
                 pageId: ctx.pageId,
@@ -213,12 +221,12 @@ export function PreviewCanvasEnhancer({ enabled, interactionMode, children, prev
                 const parsedIcon = iconKey ? parsePayazaFieldKey(iconKey) : null;
                 if (parsedIcon && ctx) {
                     postElementFocus(parsedIcon.sectionKey, parsedIcon.fieldPath, 'icon');
-                    postToParent({ type: 'SECTION_SELECTED', section: parsedIcon.sectionKey, sectionKey: parsedIcon.sectionKey });
+                    dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: parsedIcon.sectionKey, sectionKey: parsedIcon.sectionKey });
                 }
                 else {
                     const iconSk = schemaSectionKeyFromElement(iconEl);
                     if (iconSk)
-                        postToParent({ type: 'SECTION_SELECTED', section: iconSk, sectionKey: iconSk });
+                        dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: iconSk, sectionKey: iconSk });
                 }
                 return;
             }
@@ -240,7 +248,7 @@ export function PreviewCanvasEnhancer({ enabled, interactionMode, children, prev
                 const parsedRating = ratingKey ? parsePayazaFieldKey(ratingKey) : null;
                 const ratingSk = schemaSectionKeyFromElement(ratingEl);
                 if (ratingSk) {
-                    postToParent({ type: 'SECTION_SELECTED', section: ratingSk, sectionKey: ratingSk });
+                    dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: ratingSk, sectionKey: ratingSk });
                 }
                 if (parsedRating && ctx) {
                     postElementFocus(parsedRating.sectionKey, parsedRating.fieldPath, 'rating');
@@ -248,7 +256,7 @@ export function PreviewCanvasEnhancer({ enabled, interactionMode, children, prev
                         ? Number(ratingStarEl.getAttribute('data-payaza-rating-star'))
                         : NaN;
                     if (Number.isFinite(starValue) && starValue >= 1 && starValue <= 5) {
-                        postToParent({
+                        dispatchPreviewEvent({
                             type: PREVIEW_MSG.FIELD_COMMIT,
                             layoutId: ctx.layoutId,
                             pageId: ctx.pageId,
@@ -283,7 +291,7 @@ export function PreviewCanvasEnhancer({ enabled, interactionMode, children, prev
                 setToolbarVisible(true);
                 const imgSk = schemaSectionKeyFromElement(imgEl);
                 if (imgSk)
-                    postToParent({ type: 'SECTION_SELECTED', section: imgSk, sectionKey: imgSk });
+                    dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: imgSk, sectionKey: imgSk });
                 return;
             }
             if (textEl) {
@@ -303,7 +311,7 @@ export function PreviewCanvasEnhancer({ enabled, interactionMode, children, prev
                 const parsed = key ? parsePayazaFieldKey(key) : null;
                 const sk = schemaSectionKeyFromElement(textEl);
                 if (sk)
-                    postToParent({ type: 'SECTION_SELECTED', section: sk, sectionKey: sk });
+                    dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: sk, sectionKey: sk });
                 if (parsed && ctx) {
                     postElementFocus(parsed.sectionKey, parsed.fieldPath, richFmt ? 'richHtml' : 'plainText');
                 }
@@ -330,12 +338,12 @@ export function PreviewCanvasEnhancer({ enabled, interactionMode, children, prev
                 const parsedGroup = groupKey ? parsePayazaFieldKey(groupKey) : null;
                 if (parsedGroup && ctx) {
                     postElementFocus(parsedGroup.sectionKey, parsedGroup.fieldPath, 'group');
-                    postToParent({ type: 'SECTION_SELECTED', section: parsedGroup.sectionKey, sectionKey: parsedGroup.sectionKey });
+                    dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: parsedGroup.sectionKey, sectionKey: parsedGroup.sectionKey });
                 }
                 else {
                     const gs = schemaSectionKeyFromElement(groupEl);
                     if (gs)
-                        postToParent({ type: 'SECTION_SELECTED', section: gs, sectionKey: gs });
+                        dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: gs, sectionKey: gs });
                 }
                 return;
             }
@@ -353,7 +361,7 @@ export function PreviewCanvasEnhancer({ enabled, interactionMode, children, prev
                 setToolbarVisible(true);
                 const ss = schemaSectionKeyFromElement(sectionEl);
                 if (ss) {
-                    postToParent({ type: 'SECTION_SELECTED', section: ss, sectionKey: ss });
+                    dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: ss, sectionKey: ss });
                     if (ctx)
                         postElementFocus(ss, [], 'section');
                 }
@@ -454,7 +462,7 @@ export function PreviewCanvasEnhancer({ enabled, interactionMode, children, prev
         const sk = schemaSectionKeyFromElement(selectedElRef.current);
         if (!sk)
             return;
-        postToParent({
+        dispatchPreviewEvent({
             type: PREVIEW_MSG.SECTION_REORDER,
             layoutId: ctx.layoutId,
             pageId: ctx.pageId,
@@ -469,7 +477,7 @@ export function PreviewCanvasEnhancer({ enabled, interactionMode, children, prev
         const sk = schemaSectionKeyFromElement(selectedElRef.current);
         if (!sk)
             return;
-        postToParent({
+        dispatchPreviewEvent({
             type: PREVIEW_MSG.SECTION_REORDER,
             layoutId: ctx.layoutId,
             pageId: ctx.pageId,
@@ -482,7 +490,7 @@ export function PreviewCanvasEnhancer({ enabled, interactionMode, children, prev
         if (!imageFieldRef.current || !ctx?.layoutId)
             return;
         const { sectionKey, fieldPath } = imageFieldRef.current;
-        postToParent({
+        dispatchPreviewEvent({
             type: PREVIEW_MSG.IMAGE_ACTIVATE,
             layoutId: ctx.layoutId,
             pageId: ctx.pageId,
@@ -492,10 +500,10 @@ export function PreviewCanvasEnhancer({ enabled, interactionMode, children, prev
     }, [resolveCtx]);
     const onMore = useCallback(() => {
         const sk = schemaSectionKeyFromElement(selectedElRef.current);
-        if (sk && typeof window !== 'undefined' && window.parent !== window) {
-            window.parent.postMessage({ type: 'PREVIEW_FOCUS_SIDEBAR', sectionKey: sk }, '*');
+        if (sk) {
+            dispatchPreviewEvent({ type: 'PREVIEW_FOCUS_SIDEBAR', sectionKey: sk });
         }
-    }, []);
+    }, [dispatchPreviewEvent]);
     // Sync canvas selection when List View clicks a section or block element.
     // Refs and setState setters are stable so empty deps is correct.
     useEffect(() => {

package/dist/preview/canvas/PreviewCanvasStyles.d.ts

@@ -0,0 +1,4 @@
+/** Section highlight styles shared by iframe preview and inline mobile canvas. */
+export declare const PREVIEW_CANVAS_STYLES = "\n  [data-section] {\n    position: relative;\n    cursor: pointer !important;\n  }\n  [data-section-hover=\"true\"]:not([data-section-selected=\"true\"])::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border: 1px dashed rgba(68, 0, 102, 0.35);\n    pointer-events: none;\n    z-index: 50;\n    background: rgba(68, 0, 102, 0.02);\n    border-radius: 2px;\n  }\n  [data-section-selected=\"true\"]::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border: 1px solid #3858e9;\n    pointer-events: none;\n    z-index: 51;\n    background: rgba(56, 88, 233, 0.04);\n    box-shadow: inset 0 0 0 1px rgba(56, 88, 233, 0.12);\n    border-radius: 2px;\n  }\n  [data-section-selected=\"true\"]::before {\n    content: attr(data-section);\n    position: absolute;\n    top: -24px;\n    left: 0;\n    background: #1e1e1e;\n    color: #f0f0f0;\n    font-size: 11px;\n    font-weight: 600;\n    padding: 2px 8px;\n    border-radius: 2px;\n    text-transform: none;\n    z-index: 52;\n    max-width: 200px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n";
+export declare function PreviewCanvasStyles(): import("react").JSX.Element;
+//# sourceMappingURL=PreviewCanvasStyles.d.ts.map

package/dist/preview/canvas/PreviewCanvasStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewCanvasStyles.d.ts","sourceRoot":"","sources":["../../../src/preview/canvas/PreviewCanvasStyles.tsx"],"names":[],"mappings":"AAEA,kFAAkF;AAClF,eAAO,MAAM,qBAAqB,0mCA4CjC,CAAC;AAEF,wBAAgB,mBAAmB,gCAElC"}

package/dist/preview/canvas/PreviewCanvasStyles.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Section highlight styles shared by iframe preview and inline mobile canvas. */
+export const PREVIEW_CANVAS_STYLES = `
+  [data-section] {
+    position: relative;
+    cursor: pointer !important;
+  }
+  [data-section-hover="true"]:not([data-section-selected="true"])::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: 1px dashed rgba(68, 0, 102, 0.35);
+    pointer-events: none;
+    z-index: 50;
+    background: rgba(68, 0, 102, 0.02);
+    border-radius: 2px;
+  }
+  [data-section-selected="true"]::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: 1px solid #3858e9;
+    pointer-events: none;
+    z-index: 51;
+    background: rgba(56, 88, 233, 0.04);
+    box-shadow: inset 0 0 0 1px rgba(56, 88, 233, 0.12);
+    border-radius: 2px;
+  }
+  [data-section-selected="true"]::before {
+    content: attr(data-section);
+    position: absolute;
+    top: -24px;
+    left: 0;
+    background: #1e1e1e;
+    color: #f0f0f0;
+    font-size: 11px;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 2px;
+    text-transform: none;
+    z-index: 52;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+export function PreviewCanvasStyles() {
+    return _jsx("style", { dangerouslySetInnerHTML: { __html: PREVIEW_CANVAS_STYLES } });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payaza-storefront-layouts",
-  "version": "1.1.76",
+  "version": "1.1.78",
   "lts": true,
   "type": "module",
   "description": "Shared layout components for Storefront applications",