storefront-layouts-staging 1.0.0-staging.0

package/dist/editor/shared/IframePreview.js

@@ -0,0 +1,217 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useMemo, useRef, useState, forwardRef } from 'react';
+import { isDeepEqual } from '../../lib/utils/index.js';
+import { normalizeEditorLayoutId } from '../document/layout-id.js';
+import { previewPageIdToRoute } from '../../preview/canvas/preview-route.js';
+import { PREVIEW_MSG } from '../../preview/canvas/preview-messages.js';
+import { DESKTOP_PREVIEW_WIDTH, resolvePreviewScale, } from './preview-viewport.js';
+export { DESKTOP_PREVIEW_WIDTH } from './preview-viewport.js';
+export const IframePreview = forwardRef(function IframePreview({ layoutId, config, activePageId, viewMode, selectedSection, focusedField = null, interactionMode = 'edit', slideIndexSync = null, flushRequestId = 0, previewZoom = 'fit', desktopCanvasWidth = DESKTOP_PREVIEW_WIDTH, className = '', }, ref) {
+    const iframeRef = useRef(null);
+    const viewportContainerRef = useRef(null);
+    const [isReady, setIsReady] = useState(false);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const route = useMemo(() => previewPageIdToRoute(layoutId, activePageId, config), [layoutId, activePageId, config]);
+    useEffect(() => {
+        const handleMessage = (event) => {
+            if (event.data?.type === 'PREVIEW_READY') {
+                setIsReady(true);
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, []);
+    const lastSentConfigRef = useRef(null);
+    const lastPostedRouteRef = useRef(null);
+    const lastPostedViewModeRef = useRef(null);
+    const lastPostedInteractionRef = useRef(null);
+    const requestRef = useRef(null);
+    useEffect(() => {
+        if (isReady && iframeRef.current?.contentWindow) {
+            if (requestRef.current) {
+                cancelAnimationFrame(requestRef.current);
+            }
+            requestRef.current = requestAnimationFrame(() => {
+                if (!iframeRef.current?.contentWindow)
+                    return;
+                if (!lastSentConfigRef.current || !isDeepEqual(config, lastSentConfigRef.current)) {
+                    const previewConfig = {
+                        ...config,
+                        isPreview: true,
+                        headerConfig: {
+                            ...config.headerConfig,
+                            show: config.headerConfig?.show ?? true,
+                        },
+                    };
+                    iframeRef.current.contentWindow.postMessage({ type: 'UPDATE_CONFIG', config: previewConfig }, '*');
+                    lastSentConfigRef.current = config;
+                }
+                if (lastPostedRouteRef.current !== route) {
+                    iframeRef.current.contentWindow.postMessage({ type: 'UPDATE_ROUTE', route }, '*');
+                    lastPostedRouteRef.current = route;
+                }
+                if (lastPostedViewModeRef.current !== viewMode) {
+                    iframeRef.current.contentWindow.postMessage({ type: 'UPDATE_VIEW_MODE', viewMode }, '*');
+                    lastPostedViewModeRef.current = viewMode;
+                }
+                if (lastPostedInteractionRef.current !== interactionMode) {
+                    iframeRef.current.contentWindow.postMessage({ type: 'INTERACTION_MODE', mode: interactionMode }, '*');
+                    lastPostedInteractionRef.current = interactionMode;
+                }
+                const canonicalLayout = normalizeEditorLayoutId(String(layoutId));
+                iframeRef.current.contentWindow.postMessage({
+                    type: PREVIEW_MSG.CONTEXT,
+                    layoutId: canonicalLayout ?? String(layoutId),
+                    pageId: activePageId,
+                }, '*');
+            });
+        }
+        return () => {
+            if (requestRef.current) {
+                cancelAnimationFrame(requestRef.current);
+            }
+        };
+    }, [config, route, viewMode, interactionMode, layoutId, activePageId, isReady]);
+    useEffect(() => {
+        if (isReady && iframeRef.current?.contentWindow) {
+            iframeRef.current.contentWindow.postMessage({ type: 'SECTION_SELECTED_SYNC', section: selectedSection }, '*');
+        }
+    }, [selectedSection, isReady]);
+    const lastPostedFocusRef = useRef(null);
+    useEffect(() => {
+        if (!isReady || !iframeRef.current?.contentWindow)
+            return;
+        const key = focusedField
+            ? `${focusedField.sectionKey}|${focusedField.fieldPath.join('|')}|${focusedField.elementKind}`
+            : null;
+        if (lastPostedFocusRef.current === key)
+            return;
+        lastPostedFocusRef.current = key;
+        iframeRef.current.contentWindow.postMessage({ type: PREVIEW_MSG.FIELD_SELECTED_SYNC, field: focusedField }, '*');
+    }, [focusedField, isReady]);
+    const lastPostedSlideSyncRef = useRef(null);
+    useEffect(() => {
+        if (!isReady || !iframeRef.current?.contentWindow)
+            return;
+        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,
+        };
+        iframeRef.current.contentWindow.postMessage(payload, '*');
+    }, [slideIndexSync, isReady]);
+    const lastFlushRef = useRef(0);
+    useEffect(() => {
+        if (!isReady || !iframeRef.current?.contentWindow || flushRequestId <= 0)
+            return;
+        if (lastFlushRef.current === flushRequestId)
+            return;
+        lastFlushRef.current = flushRequestId;
+        iframeRef.current.contentWindow.postMessage({ type: PREVIEW_MSG.FLUSH_EDITS }, '*');
+    }, [flushRequestId, isReady]);
+    useImperativeHandle(ref, () => ({
+        flushEdits: () => {
+            const win = iframeRef.current?.contentWindow;
+            if (win) {
+                win.postMessage({ type: PREVIEW_MSG.FLUSH_EDITS }, '*');
+            }
+        },
+    }), []);
+    const previewUrl = useMemo(() => {
+        const params = new URLSearchParams({
+            route: '/',
+            iframe: 'true',
+            viewMode: 'desktop',
+        });
+        if (config?.id) {
+            params.set('storeId', config.id);
+        }
+        if (config?.slug) {
+            params.set('storeSlug', config.slug);
+        }
+        if (typeof window !== 'undefined') {
+            const pathname = window.location.pathname;
+            if (pathname.includes('/dashboard/store-setup')) {
+                params.set('includeDraft', 'true');
+            }
+        }
+        const basePath = '/dashboard/store-setup/preview';
+        return `${basePath}/${layoutId}?${params.toString()}`;
+    }, [layoutId, config?.id, config?.slug]);
+    useEffect(() => {
+        setIsReady(false);
+        lastPostedRouteRef.current = null;
+        lastPostedViewModeRef.current = null;
+        lastPostedInteractionRef.current = null;
+        lastSentConfigRef.current = null;
+        lastPostedFocusRef.current = null;
+    }, [previewUrl]);
+    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 iframeNode = (_jsxs(_Fragment, { children: [!isReady && (_jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] bg-white", children: _jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-[3px] border-[#F7F5F0] border-t-[#440066]" }), _jsx("p", { className: "text-[11px] font-medium text-[#1b0029]/70", children: "Loading preview\u2026" })] }) })), _jsx("iframe", { ref: iframeRef, src: previewUrl, className: "block h-full w-full rounded-[inherit] border-none", title: "Layout Preview", sandbox: "allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox", style: {
+                    width: '100%',
+                    height: '100%',
+                    border: 'none',
+                    margin: 0,
+                    padding: 0,
+                } })] }));
+    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: iframeNode }) }) }) }));
+    }
+    return (_jsx("div", { className: `relative flex h-full w-full items-start justify-center bg-[#dcdcde] p-4 md:p-8 ${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`,
+            }, children: _jsx("div", { className: "relative min-h-0 flex-1 overflow-hidden bg-white", children: iframeNode }) }) }));
+});

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { StoreConfig } from '../../lib/store-types';
+import type { PreviewFlushHandle } from '../../preview/canvas/preview-flush-handle';
+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;
+    previewFlushRef?: React.MutableRefObject<PreviewFlushHandle | null>;
+}
+/**
+ * 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;AAMpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAEpF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,oBAAoB,CAAC;AAM5B,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;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;CACrE;AAID;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA6PlE,CAAC"}

package/dist/editor/shared/InlineCanvasPreview.js

@@ -0,0 +1,174 @@
+'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';
+import { MOBILE_INLINE_DESKTOP_MAX_WIDTH, shouldUseInlineEditorPreview, } from '../../lib/utils/mobile-editor.js';
+const MOBILE_INLINE_MIN_LAYOUT_HEIGHT = 480;
+/**
+ * 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, previewFlushRef, }) => {
+    const viewportContainerRef = useRef(null);
+    const contentScrollRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [availableHeight, setAvailableHeight] = useState(0);
+    const [currentRoute, setCurrentRoute] = useState('/');
+    const readyFiredRef = useRef(false);
+    const isMobileInline = shouldUseInlineEditorPreview();
+    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 updateMetrics = () => {
+            setContainerWidth(el.clientWidth);
+            const parent = el.parentElement;
+            setAvailableHeight(parent?.clientHeight ?? 0);
+        };
+        updateMetrics();
+        const observer = new ResizeObserver(updateMetrics);
+        observer.observe(el);
+        const parent = el.parentElement;
+        if (parent)
+            observer.observe(parent);
+        return () => observer.disconnect();
+    }, [viewMode]);
+    const effectiveCanvasWidth = useMemo(() => {
+        if (viewMode !== 'desktop')
+            return desktopCanvasWidth;
+        if (isMobileInline) {
+            const w = containerWidth > 0 ? containerWidth : 390;
+            return Math.min(w, MOBILE_INLINE_DESKTOP_MAX_WIDTH);
+        }
+        return desktopCanvasWidth;
+    }, [viewMode, isMobileInline, containerWidth, desktopCanvasWidth]);
+    const effectiveZoom = isMobileInline && viewMode === 'desktop' ? 'fit' : previewZoom;
+    const desktopScale = useMemo(() => {
+        if (viewMode !== 'desktop')
+            return 1;
+        return resolvePreviewScale(effectiveZoom, containerWidth, effectiveCanvasWidth);
+    }, [viewMode, effectiveZoom, containerWidth, effectiveCanvasWidth]);
+    const scaledDesktopHeight = useMemo(() => {
+        if (viewMode !== 'desktop')
+            return 900;
+        if (availableHeight <= 0)
+            return 900;
+        return Math.max(MOBILE_INLINE_MIN_LAYOUT_HEIGHT, availableHeight / Math.max(desktopScale, 0.01));
+    }, [viewMode, availableHeight, 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 scrollRootRef = isMobileInline && viewMode === 'desktop' ? contentScrollRef : undefined;
+    const previewNode = (_jsx(PreviewCanvasEnhancer, { enabled: true, interactionMode: interactionMode, previewContext: previewContext, onPreviewEvent: onPreviewEvent, scrollRootRef: scrollRootRef, previewFlushRef: previewFlushRef, 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') {
+        const outerOverflowClass = isMobileInline
+            ? 'overflow-hidden'
+            : 'overflow-auto';
+        return (_jsx("div", { ref: viewportContainerRef, className: `relative h-full min-h-0 w-full ${outerOverflowClass} bg-[#e2e4e7] ${isMobileInline ? 'px-0.5 py-0' : 'p-3 md:p-4'} ${className}`, style: {
+                WebkitOverflowScrolling: 'touch',
+                overscrollBehavior: 'contain',
+                overscrollBehaviorY: 'contain',
+                touchAction: isMobileInline ? 'pan-y' : undefined,
+            }, children: _jsx("div", { className: `flex min-h-full justify-center ${isMobileInline ? 'py-0' : '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: effectiveCanvasWidth,
+                        height: scaledDesktopHeight,
+                        minHeight: MOBILE_INLINE_MIN_LAYOUT_HEIGHT,
+                        transform: `scale(${desktopScale})`,
+                        transformOrigin: 'top center',
+                    }, children: _jsx("div", { ref: contentScrollRef, className: "relative h-full w-full overflow-y-auto overflow-x-hidden rounded-lg", style: { WebkitOverflowScrolling: 'touch' }, 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-y-auto overflow-x-hidden bg-white", children: chrome }) }) }));
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StoreConfig } from '../../lib/store-types';
+interface LayoutRendererProps {
+    layoutId: string;
+    config: StoreConfig;
+    activePageId: string;
+    className?: string;
+}
+export declare const LayoutRenderer: React.FC<LayoutRendererProps>;
+export {};
+//# sourceMappingURL=LayoutRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutRenderer.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/LayoutRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,WAAW,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkBxD,CAAC"}

package/dist/editor/shared/LayoutRenderer.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LayoutPreview } from '../../preview/LayoutPreview.js';
+export const LayoutRenderer = ({ layoutId, config, activePageId, className = '', }) => {
+    // Map the pageId to a route for LayoutPreview
+    const route = activePageId === 'home' ? '/' : `/${activePageId}`;
+    return (_jsx("div", { className: `relative h-full overflow-auto bg-transparent ${className}`, children: _jsx(LayoutPreview, { layout: layoutId, config: config, initialRoute: route }) }));
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+interface PageTabsProps {
+    pages: {
+        id: string;
+        name: string;
+    }[];
+    activePageId: string;
+    onPageChange: (pageId: string) => void;
+    className?: string;
+}
+export declare const PageTabs: React.FC<PageTabsProps>;
+export {};
+//# sourceMappingURL=PageTabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageTabs.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/PageTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,aAAa;IACrB,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuB5C,CAAC"}

package/dist/editor/shared/PageTabs.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PageTabs = ({ pages, activePageId, onPageChange, className = '', }) => {
+    return (_jsx("div", { className: `flex border-b border-gray-200 bg-white sticky top-0 z-10 ${className}`, children: pages.map((page) => (_jsx("button", { onClick: () => onPageChange(page.id), className: `px-4 py-2 text-sm font-medium border-b-2 transition-colors ${activePageId === page.id
+                ? 'border-blue-500 text-blue-600'
+                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`, children: page.name }, page.id))) }));
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+interface ResizableSidebarProps {
+    children: React.ReactNode;
+    initialWidth?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    className?: string;
+    /** Which edge the resize handle sits on. 'right' = right sidebar (default), 'left' = left sidebar. */
+    side?: 'left' | 'right';
+    onWidthChange?: (width: number) => void;
+}
+export declare const ResizableSidebar: React.FC<ResizableSidebarProps>;
+export {};
+//# sourceMappingURL=ResizableSidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableSidebar.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/ResizableSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sGAAsG;IACtG,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAkG5D,CAAC"}

package/dist/editor/shared/ResizableSidebar.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { cn } from '../../lib/utils/index.js';
+import { GripVertical } from 'lucide-react';
+export const ResizableSidebar = ({ children, initialWidth = 400, minWidth = 300, maxWidth = 600, className = '', side = 'right', onWidthChange, }) => {
+    const [width, setWidth] = useState(initialWidth);
+    const [isResizing, setIsResizing] = useState(false);
+    const sidebarRef = useRef(null);
+    const startResizing = useCallback((e) => {
+        e.preventDefault();
+        setIsResizing(true);
+    }, []);
+    const stopResizing = useCallback(() => {
+        setIsResizing(false);
+    }, []);
+    const resize = useCallback((e) => {
+        if (sidebarRef.current) {
+            const sidebarRect = sidebarRef.current.getBoundingClientRect();
+            const newWidth = side === 'left'
+                ? e.clientX - sidebarRect.left
+                : sidebarRect.right - e.clientX;
+            if (newWidth >= minWidth && newWidth <= maxWidth) {
+                setWidth(newWidth);
+                onWidthChange?.(newWidth);
+            }
+        }
+    }, [side, minWidth, maxWidth, onWidthChange]);
+    useEffect(() => {
+        if (isResizing) {
+            window.addEventListener('mousemove', resize);
+            window.addEventListener('mouseup', stopResizing);
+        }
+        else {
+            window.removeEventListener('mousemove', resize);
+            window.removeEventListener('mouseup', stopResizing);
+        }
+        return () => {
+            window.removeEventListener('mousemove', resize);
+            window.removeEventListener('mouseup', stopResizing);
+        };
+    }, [isResizing, resize, stopResizing]);
+    return (_jsxs("div", { ref: sidebarRef, style: { width: `${width}px` }, className: cn('relative z-20 flex flex-col bg-white transition-shadow', isResizing && 'select-none', className), children: [_jsx("div", { className: "flex-1 overflow-hidden flex flex-col", children: children }), _jsxs("div", { onMouseDown: startResizing, className: cn('absolute top-0 h-full w-4 cursor-col-resize group z-30', side === 'left'
+                    ? 'right-0 translate-x-full flex justify-start'
+                    : 'left-0 -translate-x-full flex justify-end'), children: [_jsx("div", { className: cn('h-full w-px bg-[#dcdcde] transition-colors group-hover:bg-[#1b0029]/25', isResizing && 'w-0.5 bg-[#1b0029]/40') }), _jsx("div", { className: cn('absolute top-1/2 flex h-7 w-3 -translate-y-1/2 items-center justify-center rounded-sm border border-[#dcdcde] bg-white transition-opacity', side === 'left' ? 'left-0 -translate-x-1/2' : 'right-0 translate-x-1/2', isResizing ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'), children: _jsx(GripVertical, { className: cn('h-3 w-3 text-[#1b0029]/35', isResizing && 'text-[#1b0029]/60') }) })] })] }));
+};

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

@@ -0,0 +1,8 @@
+export * from './EditorHeader';
+export * from './EditorNavigator';
+export * from './IframePreview';
+export * from './InlineCanvasPreview';
+export * from './LayoutRenderer';
+export * from './PageTabs';
+export * from './ResizableSidebar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC"}

package/dist/editor/shared/index.js

@@ -0,0 +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/editor/shared/preview-viewport.d.ts

@@ -0,0 +1,9 @@
+/** Fixed design width for desktop preview canvas (true storefront desktop). */
+export declare const DESKTOP_PREVIEW_WIDTH = 1440;
+export type PreviewZoom = 'fit' | 0.5 | 0.75 | 1 | 1.25;
+export declare const PREVIEW_ZOOM_OPTIONS: {
+    value: PreviewZoom;
+    label: string;
+}[];
+export declare function resolvePreviewScale(previewZoom: PreviewZoom, containerWidth: number, canvasWidth?: number): number;
+//# sourceMappingURL=preview-viewport.d.ts.map

package/dist/editor/shared/preview-viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-viewport.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/preview-viewport.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,eAAO,MAAM,qBAAqB,OAAO,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;AAExD,eAAO,MAAM,oBAAoB,EAAE;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAMvE,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,MAAM,EACtB,WAAW,GAAE,MAA8B,GAC1C,MAAM,CAMR"}

package/dist/editor/shared/preview-viewport.js

@@ -0,0 +1,17 @@
+/** Fixed design width for desktop preview canvas (true storefront desktop). */
+export const DESKTOP_PREVIEW_WIDTH = 1440;
+export const PREVIEW_ZOOM_OPTIONS = [
+    { value: 'fit', label: 'Fit' },
+    { value: 0.5, label: '50%' },
+    { value: 0.75, label: '75%' },
+    { value: 1, label: '100%' },
+    { value: 1.25, label: '125%' },
+];
+export function resolvePreviewScale(previewZoom, containerWidth, canvasWidth = DESKTOP_PREVIEW_WIDTH) {
+    if (previewZoom === 'fit') {
+        if (containerWidth <= 0)
+            return 1;
+        return Math.min(1, containerWidth / canvasWidth);
+    }
+    return previewZoom;
+}

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

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+export interface EditorChromeMetricsRefs {
+    headerRef: RefObject<HTMLElement | null>;
+    controlsBarRef?: RefObject<HTMLElement | null>;
+    bottomNavRef?: RefObject<HTMLElement | null>;
+    /** Re-run observers when mobile chrome mounts/unmounts */
+    remountKey?: string | number | boolean;
+}
+/**
+ * Measures editor chrome heights and publishes CSS vars on the editor root
+ * so mobile overlays and chips align with real header / controls / footer sizes.
+ */
+export declare function useEditorChromeMetrics({ headerRef, controlsBarRef, bottomNavRef, remountKey, }: EditorChromeMetricsRefs): void;
+export declare const MOBILE_EDITOR_PANEL_TOP = "var(--payaza-editor-top-chrome-height, var(--payaza-editor-header-height, 52px))";
+//# sourceMappingURL=useEditorChromeMetrics.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useEditorChromeMetrics.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/useEditorChromeMetrics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,cAAc,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,cAAc,EACd,YAAY,EACZ,UAAU,GACX,EAAE,uBAAuB,GAAG,IAAI,CAwDhC;AAED,eAAO,MAAM,uBAAuB,qFAAqF,CAAC"}