storefront-layouts-staging 1.0.0-staging.0

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

@@ -0,0 +1,1226 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, useLayoutEffect, useRef, useCallback } from 'react';
+import { previewRouteToPageId } from '../../preview/canvas/preview-route.js';
+import { EditorHeader } from '../shared/EditorHeader.js';
+import { useEditorChromeMetrics } from '../shared/useEditorChromeMetrics.js';
+import { EditorNavigator } from '../shared/EditorNavigator.js';
+import { ResizableSidebar } from '../shared/ResizableSidebar.js';
+import { moveSectionKeyInPageOrder, normalizeEditorLayoutId, resolveSectionKeyOrderForPage, storeConfigToEnvelope, } from '../document/index.js';
+import { applyEditorCatalogOverlay } from '../../lib/utils/editor-preview.js';
+import { payazaSectionStyleKey, getPayazaSectionStyleEntries } from '../../lib/payaza-section-styles.js';
+import { getPageSchema } from './engine.js';
+import { loadLayoutJSON } from './layout-loader.js';
+import { transformToStoreConfig, updateOverlayData, addArrayItem, removeArrayItem, updateArrayItem, readOverlayFieldValue } from './data-transformer.js';
+import { generateArrayItem } from './engine.js';
+import { initializeWidgetRegistry, clearWidgets } from './widget-registry.js';
+import { mergeRequirementAllPagesWithActualData, mergeAllPagesWithActualData, } from './data-merger.js';
+import { Settings2, Box, Palette, Layers, Monitor, PanelLeft, ChevronLeft } from 'lucide-react';
+import { useDebounce } from '../../hooks/use-debounce.js';
+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 { awaitPreviewFlushAck } from '../../preview/canvas/preview-flush-await.js';
+import { BlockStylesInspector } from './components/BlockStylesInspector.js';
+import { CanvasGranularInspector } from './components/CanvasGranularInspector.js';
+import { SectionSchemaInspector } from './components/SectionSchemaInspector.js';
+import { isLayoutPageEditable } from '../alignment-schemas/metadata.js';
+import { resolveCanvasInspectorLeaf } from '../alignment-schemas/resolve-canvas-inspector-leaf.js';
+import { isInlineCanvasTextElementKind } from '../../lib/utils/mobile-editor.js';
+import { granularPathForArrayItem, granularPathForBlockFirstAttr, outlineTreeForSectionPayload, } from '../blocks/nav-outline-utils.js';
+import { ActiveArrayFocusProvider, } from './ActiveArrayFocusContext.js';
+import { EditorLayoutProvider } from './EditorLayoutContext.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 '';
+    }
+}
+function MobilePanelBackHeader({ title, onBack, }) {
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-[#dcdcde] bg-white px-2 py-2", children: [_jsxs("button", { type: "button", onClick: onBack, className: "flex shrink-0 items-center gap-0.5 rounded-lg px-1.5 py-1.5 text-[#440066] hover:bg-[#f4f5f7]", "aria-label": "Back to canvas", children: [_jsx(ChevronLeft, { className: "h-4 w-4", strokeWidth: 2, "aria-hidden": true }), _jsx("span", { className: "text-[13px] font-medium", children: "Back to canvas" })] }), _jsx("span", { className: "min-w-0 flex-1 truncate text-right text-[13px] font-semibold text-[#1b0029]", children: title })] }));
+}
+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, headerStatusNote, mobileStatusBanner, draftSaveStatus, }) => {
+    const editorHeaderRef = useRef(null);
+    const mobileBottomNavRef = useRef(null);
+    const mobileMainRegionRef = useRef(null);
+    const isMobileViewRef = useRef(false);
+    const [activePageId, setActivePageId] = useState('home');
+    const [data, setData] = useState(initialData);
+    const dataRef = useRef(initialData);
+    // Stable snapshot of initialData — captured once at mount, never updated.
+    // Prevents the loadLayout effect from re-running (and resetting editor state)
+    // every time the parent saves and passes a new initialData reference.
+    const mountInitialDataRef = useRef(initialData);
+    // Undo/Redo State
+    const [history, setHistory] = useState([initialData]);
+    const [historyIndex, setHistoryIndex] = useState(0);
+    const historyRef = useRef([initialData]);
+    const historyIndexRef = useRef(0);
+    historyRef.current = history;
+    historyIndexRef.current = historyIndex;
+    const isInternalChange = useRef(false);
+    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.
+    const [lastPublishedData, setLastPublishedData] = useState(initialDataIsPublished === false ? null : initialData);
+    // Debounce the data for preview to prevent excessive iframe updates and RAM spikes
+    const debouncedData = useDebounce(data, useInlinePreview ? 700 : 400);
+    const [viewMode, setViewMode] = useState('desktop');
+    const [previewZoom, setPreviewZoom] = useState('fit');
+    const [isSaving, setIsSaving] = useState(false);
+    const [isPublishing, setIsPublishing] = useState(false);
+    const [isAIModalOpen, setIsAIModalOpen] = useState(false);
+    const [isGeneratingAI, setIsGeneratingAI] = useState(false);
+    const [layoutJson, setLayoutJson] = useState(null);
+    const layoutJsonRef = useRef(null);
+    const [baseRequirement, setBaseRequirement] = useState(null);
+    const baseRequirementRef = useRef(null);
+    const activePageIdRef = useRef(activePageId);
+    const [loading, setLoading] = useState(true);
+    const [selectedSection, setSelectedSection] = useState(null);
+    const [canvasElementFocus, setCanvasElementFocus] = useState(null);
+    const [outlinePanelOpen, setOutlinePanelOpen] = useState(true);
+    /** Block inspector: Settings (fields) vs Styles (placeholder — theme-driven) */
+    const [blockSubTab, setBlockSubTab] = useState('settings');
+    const [interactionMode, setInteractionMode] = useState('edit');
+    const [activeArrayFocus, setActiveArrayFocus] = useState(null);
+    const [flushRequestId, setFlushRequestId] = useState(0);
+    const previewFlushRef = useRef(null);
+    const iframePreviewFlushRef = useRef(null);
+    const [mobilePanelView, setMobilePanelView] = useState('canvas');
+    const [isMobileView, setIsMobileView] = useState(false);
+    const { showAlert } = useAlertModal();
+    useEditorChromeMetrics({
+        headerRef: editorHeaderRef,
+        bottomNavRef: mobileBottomNavRef,
+        remountKey: isMobileView,
+    });
+    // Detect mobile viewport before first paint — UA for real phones + matchMedia for narrow desktop windows
+    useLayoutEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const syncMobileView = () => {
+            const mobile = isMobileEditorViewport();
+            setIsMobileView(mobile);
+            isMobileViewRef.current = mobile;
+        };
+        syncMobileView();
+        const mq = window.matchMedia('(max-width: 767px)');
+        const onMqChange = () => syncMobileView();
+        window.addEventListener('orientationchange', syncMobileView);
+        window.addEventListener('resize', syncMobileView);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const mqAny = mq;
+        if (typeof mqAny.addEventListener === 'function') {
+            mq.addEventListener('change', onMqChange);
+        }
+        else if (typeof mqAny.addListener === 'function') {
+            mqAny.addListener(onMqChange);
+        }
+        return () => {
+            window.removeEventListener('orientationchange', syncMobileView);
+            window.removeEventListener('resize', syncMobileView);
+            if (typeof mqAny.removeEventListener === 'function') {
+                mq.removeEventListener('change', onMqChange);
+            }
+            else if (typeof mqAny.removeListener === 'function') {
+                mqAny.removeListener(onMqChange);
+            }
+        };
+    }, []);
+    // Real phones always use fit-to-width desktop preview (lighter than 1440px inline canvas).
+    useEffect(() => {
+        if (!isMobileView)
+            return;
+        setViewMode('desktop');
+        setPreviewZoom('fit');
+        setInteractionMode('edit');
+    }, [isMobileView]);
+    // Mobile inspector exposes Settings only — reset if Styles was active (e.g. resize from desktop).
+    useEffect(() => {
+        if (isMobileView && blockSubTab === 'styles') {
+            setBlockSubTab('settings');
+        }
+    }, [isMobileView, blockSubTab]);
+    // Lock body scroll on mobile while editor is mounted — prevents dashboard page scroll bleed-through
+    useEffect(() => {
+        if (!isMobileView)
+            return;
+        isMobileViewRef.current = true;
+        const scrollY = window.scrollY;
+        document.body.style.overflow = 'hidden';
+        document.body.style.position = 'fixed';
+        document.body.style.top = `-${scrollY}px`;
+        document.body.style.width = '100%';
+        return () => {
+            isMobileViewRef.current = false;
+            document.body.style.overflow = '';
+            document.body.style.position = '';
+            document.body.style.top = '';
+            document.body.style.width = '';
+            window.scrollTo(0, scrollY);
+        };
+    }, [isMobileView]);
+    const openMobileInspector = useCallback(() => {
+        if (isMobileViewRef.current) {
+            setMobilePanelView('inspector');
+        }
+    }, []);
+    // Touch refs for swipe gestures between panels
+    const touchStartX = useRef(null);
+    const touchStartY = useRef(null);
+    const flushPreviewEdits = useCallback(() => {
+        previewFlushRef.current?.flushActiveEdits();
+        iframePreviewFlushRef.current?.flushEdits();
+        setFlushRequestId((n) => n + 1);
+    }, []);
+    const flushPreviewEditsAndWait = useCallback(async () => {
+        const ackPromise = awaitPreviewFlushAck();
+        flushPreviewEdits();
+        await ackPromise;
+    }, [flushPreviewEdits]);
+    const handleActiveArrayFocusChange = useCallback((next) => {
+        setActiveArrayFocus(next);
+        if (next) {
+            setCanvasElementFocus(null);
+            setBlockSubTab('settings');
+        }
+    }, []);
+    const handleToggleOutlinePanel = useCallback(() => {
+        if (isMobileView) {
+            setMobilePanelView(v => v === 'outline' ? 'canvas' : 'outline');
+        }
+        else {
+            setOutlinePanelOpen(v => !v);
+        }
+    }, [isMobileView]);
+    const slideIndexSync = useMemo(() => {
+        if (!activeArrayFocus || activeArrayFocus.fieldKey !== 'sliders')
+            return null;
+        return {
+            sectionKey: activeArrayFocus.sectionKey,
+            arrayField: 'sliders',
+            index: activeArrayFocus.index,
+        };
+    }, [activeArrayFocus]);
+    const normalizedLayoutType = useMemo(() => normalizeEditorLayoutId(String(layoutId)), [layoutId]);
+    useEffect(() => {
+        layoutJsonRef.current = layoutJson;
+    }, [layoutJson]);
+    useEffect(() => {
+        baseRequirementRef.current = baseRequirement;
+    }, [baseRequirement]);
+    useEffect(() => {
+        activePageIdRef.current = activePageId;
+    }, [activePageId]);
+    // Keep dataRef in sync with data state and append undo history on external edits.
+    // historyIndex must NOT be in deps — including it caused infinite setHistoryIndex loops (React #185).
+    useEffect(() => {
+        dataRef.current = data;
+        if (!isInternalChange.current) {
+            const prev = historyRef.current;
+            const idx = historyIndexRef.current;
+            const newHistory = prev.slice(0, idx + 1);
+            const lastEntry = newHistory[newHistory.length - 1];
+            const isDuplicate = useInlinePreview
+                ? lightweightConfigFingerprint(lastEntry) === lightweightConfigFingerprint(data)
+                : JSON.stringify(lastEntry) === JSON.stringify(data);
+            if (!isDuplicate) {
+                let updatedHistory = [...newHistory, data];
+                if (updatedHistory.length > MAX_HISTORY) {
+                    updatedHistory = updatedHistory.slice(updatedHistory.length - MAX_HISTORY);
+                }
+                const newIdx = updatedHistory.length - 1;
+                historyRef.current = updatedHistory;
+                historyIndexRef.current = newIdx;
+                setHistory(updatedHistory);
+                setHistoryIndex(newIdx);
+            }
+        }
+        isInternalChange.current = false;
+    }, [data, MAX_HISTORY, useInlinePreview]);
+    // Fix the history index after history trim (use ref to avoid React #185 loops)
+    useEffect(() => {
+        const idx = historyIndexRef.current;
+        if (history.length > 0 && idx >= history.length) {
+            const newIdx = history.length - 1;
+            historyIndexRef.current = newIdx;
+            setHistoryIndex(newIdx);
+        }
+    }, [history]);
+    const handleUndo = () => {
+        if (historyIndex > 0) {
+            isInternalChange.current = true;
+            const prevData = history[historyIndex - 1];
+            setHistoryIndex(historyIndex - 1);
+            setData(prevData);
+            onChange?.(prevData);
+        }
+    };
+    const handleRedo = () => {
+        if (historyIndex < history.length - 1) {
+            isInternalChange.current = true;
+            const nextData = history[historyIndex + 1];
+            setHistoryIndex(historyIndex + 1);
+            setData(nextData);
+            onChange?.(nextData);
+        }
+    };
+    // Keyboard Shortcuts
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            // Undo: Ctrl+Z or Cmd+Z
+            if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+                e.preventDefault();
+                handleUndo();
+            }
+            // Redo: Ctrl+Y or Cmd+Shift+Z
+            if (((e.ctrlKey || e.metaKey) && e.key === 'y') || ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z')) {
+                e.preventDefault();
+                handleRedo();
+            }
+            // Save: Ctrl+S or Cmd+S
+            if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+                e.preventDefault();
+                handleSave();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [historyIndex, history, data]); // Dependencies ensure latest state is used
+    // Initialize custom widgets if provided
+    useEffect(() => {
+        if (customWidgets) {
+            initializeWidgetRegistry({ widgets: customWidgets });
+        }
+        // Cleanup registry on unmount to prevent memory leaks and registry bloat
+        return () => {
+            clearWidgets();
+        };
+    }, [customWidgets]);
+    // Log store config data when editor opens
+    useEffect(() => {
+        if (process.env.NODE_ENV === 'development') {
+            console.log('[PayazaFormEditor] Store Config Data:', {
+                layoutId,
+                storeId: initialData?.id,
+                storeSlug: initialData?.slug,
+                storeName: initialData?.name,
+                hasLayoutConfig: !!initialData?.layoutConfig,
+            });
+        }
+    }, [layoutId, initialData]);
+    // Stable ref to onEditorHydrated — prevents the hydration effect from re-running on re-renders.
+    const onEditorHydratedRef = useRef(onEditorHydrated);
+    useEffect(() => { onEditorHydratedRef.current = onEditorHydrated; }, [onEditorHydrated]);
+    // One-shot: notify the host the moment loading transitions false for the first time.
+    const hydratedFiredRef = useRef(false);
+    useEffect(() => {
+        if (!loading && !hydratedFiredRef.current) {
+            hydratedFiredRef.current = true;
+            onEditorHydratedRef.current?.();
+        }
+    }, [loading]);
+    // Load layout JSON and merge with actual data
+    useEffect(() => {
+        let isMounted = true;
+        const loadLayout = async () => {
+            setLoading(true);
+            try {
+                const rawId = String(layoutId || '').trim().toLowerCase();
+                const normalizedId = normalizeEditorLayoutId(rawId) ?? rawId;
+                // Use preloaded requirement from the host when available — avoids a redundant
+                // synchronous schema-bridge call and eliminates the async microtask delay.
+                const layoutRequirement = preloadedBaseRequirement
+                    ? preloadedBaseRequirement
+                    : await loadLayoutJSON(normalizedId, inventory);
+                if (!isMounted)
+                    return;
+                if (layoutRequirement) {
+                    setBaseRequirement(layoutRequirement);
+                    // Merge all pages from persisted StoreConfig so cross-page content (e.g. home
+                    // hero sliders) stays hydrated even when the merchant edits another page header.
+                    const mergedLayout = mergeRequirementAllPagesWithActualData(layoutRequirement, mountInitialDataRef.current);
+                    setLayoutJson(mergedLayout);
+                    // Project every page into StoreConfig on first load — not only the active page.
+                    let storeConfig = mountInitialDataRef.current;
+                    for (const page of mergedLayout.pages) {
+                        storeConfig = transformToStoreConfig(mergedLayout, page.id, storeConfig);
+                    }
+                    setData(storeConfig);
+                    // Don't call onChange here to avoid loops on initial load
+                }
+                else {
+                    console.error(`[PayazaFormEditor] Failed to load layout requirement for: ${layoutId} (normalized: ${normalizedId})`);
+                }
+            }
+            catch (error) {
+                console.error('[PayazaFormEditor] Error loading layout:', error);
+            }
+            finally {
+                if (isMounted) {
+                    setLoading(false);
+                }
+            }
+        };
+        loadLayout();
+        return () => {
+            isMounted = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [layoutId, inventory]); // intentionally omit initialData/preloadedBaseRequirement — use mountInitialDataRef.current instead
+    // Merge host-injected catalog (products/categories/services) into preview data.
+    useEffect(() => {
+        if (!catalogOverlay)
+            return;
+        const hasCatalog = (catalogOverlay.products?.length ?? 0) > 0 ||
+            (catalogOverlay.categories?.length ?? 0) > 0 ||
+            (catalogOverlay.services?.length ?? 0) > 0;
+        if (!hasCatalog)
+            return;
+        setData((prev) => {
+            const next = applyEditorCatalogOverlay(prev, catalogOverlay, layoutId);
+            dataRef.current = next;
+            return next;
+        });
+    }, [catalogOverlay, layoutId]);
+    /**
+     * Build a full multi-page overlay for envelope compile, auto-save, and publish.
+     * Re-projects every page from StoreConfig so editing one page header cannot reset
+     * another page (e.g. home hero sliders while editing products header).
+     */
+    const resolveOverlayForPersist = useCallback(() => {
+        const base = baseRequirementRef.current;
+        const liveLayout = layoutJsonRef.current;
+        if (!base)
+            return liveLayout;
+        let overlay = mergeRequirementAllPagesWithActualData(base, dataRef.current);
+        const activeId = activePageIdRef.current;
+        // Preserve in-memory overlay edits for every hydrated page, not only the active one.
+        if (liveLayout) {
+            overlay = {
+                ...overlay,
+                pages: overlay.pages.map((p) => {
+                    const live = liveLayout.pages.find((lp) => lp.id === p.id);
+                    if (live?._hydrated === true && p.id !== activeId) {
+                        return { ...live, _hydrated: true };
+                    }
+                    return p;
+                }),
+            };
+        }
+        const livePage = liveLayout?.pages.find((p) => p.id === activeId);
+        if (livePage && activeId) {
+            overlay = {
+                ...overlay,
+                pages: overlay.pages.map((p) => p.id === activeId ? { ...livePage, _hydrated: true } : p),
+            };
+        }
+        return overlay;
+    }, []);
+    useEffect(() => {
+        if (!normalizedLayoutType || !onEditorDocumentChange)
+            return;
+        const t = window.setTimeout(() => {
+            try {
+                const overlay = resolveOverlayForPersist();
+                const doc = storeConfigToEnvelope(dataRef.current, {
+                    layoutType: normalizedLayoutType,
+                    templateType: 'home',
+                    templateId: `${activePageIdRef.current}-template`,
+                }, overlay);
+                onEditorDocumentChange(doc);
+            }
+            catch (e) {
+                if (process.env.NODE_ENV === 'development') {
+                    console.warn('[PayazaFormEditor] onEditorDocumentChange failed', e);
+                }
+            }
+        }, 400);
+        return () => window.clearTimeout(t);
+    }, [data, normalizedLayoutType, activePageId, layoutJson, onEditorDocumentChange, resolveOverlayForPersist]);
+    // Re-merge data when page changes
+    useEffect(() => {
+        // Only proceed if we have the base requirement
+        // Don't block on loading or initialData - use current data state instead
+        if (!baseRequirement) {
+            return;
+        }
+        // Get current data from ref to avoid dependency loop
+        const currentData = dataRef.current;
+        // Re-merge every page from StoreConfig so non-active pages (e.g. home hero) are not
+        // reset to schema defaults when the merchant switches to products or other headers.
+        const mergedLayout = mergeRequirementAllPagesWithActualData(baseRequirement, currentData);
+        setLayoutJson(mergedLayout);
+        // Project every page back into StoreConfig so switching pages never drops home hero
+        // or other previously edited page headers from the live editor state.
+        let mergedStoreConfig = currentData;
+        for (const page of mergedLayout.pages) {
+            mergedStoreConfig = transformToStoreConfig(mergedLayout, page.id, mergedStoreConfig);
+        }
+        if (process.env.NODE_ENV === 'development') {
+            console.log('[PayazaFormEditor] Page changed, setting merged StoreConfig for preview:', {
+                pageId: activePageId,
+                hasLayoutConfig: !!mergedStoreConfig.layoutConfig,
+            });
+        }
+        setData(mergedStoreConfig);
+        // Removed layoutJson from dependencies to avoid redundant loops
+    }, [activePageId, baseRequirement]);
+    // Keep a full page list for labels even when some pages are hidden from the editor UI.
+    const allPages = useMemo(() => {
+        if (layoutJson) {
+            return layoutJson.pages.map(p => ({ id: p.id, name: p.label }));
+        }
+        return [{ id: 'home', name: 'Home Page' }];
+    }, [layoutJson]);
+    // Hide pages that exist in the runtime router but are not meant to be edited from List View.
+    const pages = useMemo(() => {
+        const editorLayoutId = normalizedLayoutType ?? String(layoutId);
+        return allPages.filter((page) => isLayoutPageEditable(editorLayoutId, page.id));
+    }, [allPages, normalizedLayoutType, layoutId]);
+    const currentPageLabel = useMemo(() => {
+        return allPages.find((p) => p.id === activePageId)?.name || activePageId;
+    }, [allPages, activePageId]);
+    // Get current page schema and data
+    const pageSchema = useMemo(() => {
+        if (!layoutJson)
+            return null;
+        return getPageSchema(activePageId, layoutJson);
+    }, [layoutJson, activePageId]);
+    /** Block tree / outline order (optional `sectionOrder` on page). */
+    const navigatorSections = useMemo(() => {
+        if (!pageSchema || !layoutJson)
+            return [];
+        const page = layoutJson.pages.find((p) => p.id === activePageId);
+        if (!page)
+            return [];
+        const schema = pageSchema.schema;
+        const keys = resolveSectionKeyOrderForPage(page);
+        return keys
+            .filter((k) => schema[k])
+            .map((key) => {
+            const sch = schema[key];
+            return {
+                id: key,
+                label: sch?.label ?? sch?._label ?? key,
+            };
+        });
+    }, [pageSchema, layoutJson, activePageId]);
+    /** Full template outline: every page → ordered sections (left navigator). Excludes _nonEditable sections. */
+    const outlinePages = useMemo(() => {
+        if (!layoutJson)
+            return [];
+        const editorLayoutId = normalizedLayoutType ?? String(layoutId);
+        return layoutJson.pages
+            .filter((page) => isLayoutPageEditable(editorLayoutId, page.id))
+            .map((page) => {
+            const ps = getPageSchema(page.id, layoutJson);
+            if (!ps)
+                return { pageId: page.id, pageLabel: page.label, sections: [] };
+            const keys = resolveSectionKeyOrderForPage(page).filter((k) => {
+                if (!ps.schema[k])
+                    return false;
+                const sch = ps.schema[k];
+                return !sch._nonEditable;
+            });
+            const sections = keys.map((key) => {
+                const schemaNode = ps.schema[key];
+                const pdata = ps.data[key];
+                const nested = outlineTreeForSectionPayload(key, pdata);
+                return {
+                    id: key,
+                    label: schemaNode.label ?? schemaNode._label ?? key,
+                    nested,
+                    visible: pdata?.show !== false,
+                };
+            });
+            return { pageId: page.id, pageLabel: page.label, sections };
+        });
+    }, [layoutJson, normalizedLayoutType, layoutId]);
+    const applyOutlineBlockFocus = useCallback((targetPageId, sectionId, node) => {
+        if (!layoutJson)
+            return;
+        flushPreviewEdits();
+        if (targetPageId !== activePageId)
+            setActivePageId(targetPageId);
+        setSelectedSection(sectionId);
+        const ps = getPageSchema(targetPageId, layoutJson);
+        const payload = ps?.data[sectionId];
+        const path = node.blockPathInSection;
+        setBlockSubTab('settings');
+        if (path[0] === 'sliders' && path.length >= 2 && /^\d+$/.test(path[1] ?? '')) {
+            handleActiveArrayFocusChange({
+                sectionKey: sectionId,
+                fieldKey: 'sliders',
+                index: parseInt(path[1], 10),
+            });
+        }
+        else if (path[0] === 'sliders' && path.length === 1) {
+            handleActiveArrayFocusChange({ sectionKey: sectionId, fieldKey: 'sliders', index: 0 });
+        }
+        else {
+            const granular = granularPathForBlockFirstAttr(payload, path) ??
+                granularPathForArrayItem(payload, path);
+            if (granular) {
+                setCanvasElementFocus({
+                    layoutId: normalizedLayoutType ?? String(layoutId),
+                    pageId: targetPageId,
+                    sectionKey: sectionId,
+                    fieldPath: granular.path,
+                    elementKind: granular.elementKind,
+                });
+            }
+            else {
+                setCanvasElementFocus(null);
+            }
+        }
+        requestAnimationFrame(() => {
+            document
+                .querySelector(`[data-section-key="${sectionId}"]`)
+                ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            document
+                .querySelector(`[data-array-field="sliders"]`)
+                ?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        });
+    }, [layoutJson, activePageId, normalizedLayoutType, layoutId, flushPreviewEdits, handleActiveArrayFocusChange]);
+    const navigatorOutlineGranularity = useMemo(() => {
+        if (!canvasElementFocus?.fieldPath?.length)
+            return null;
+        return {
+            pageId: canvasElementFocus.pageId ?? activePageId,
+            sectionKey: canvasElementFocus.sectionKey,
+            fieldPath: canvasElementFocus.fieldPath,
+        };
+    }, [canvasElementFocus, activePageId]);
+    const handleSelectSectionInPage = useCallback((pageId, sectionId) => {
+        flushPreviewEdits();
+        setCanvasElementFocus(null);
+        setActiveArrayFocus(null);
+        if (pageId !== activePageId) {
+            setActivePageId(pageId);
+        }
+        setSelectedSection(sectionId);
+        setBlockSubTab('settings');
+        openMobileInspector();
+        requestAnimationFrame(() => {
+            document
+                .querySelector(`[data-section-key="${sectionId}"]`)
+                ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        });
+    }, [activePageId, flushPreviewEdits, openMobileInspector]);
+    const activeSlideBreadcrumbLabel = useMemo(() => {
+        if (!activeArrayFocus ||
+            activeArrayFocus.sectionKey !== selectedSection ||
+            activeArrayFocus.fieldKey !== 'sliders') {
+            return null;
+        }
+        return `Slide ${activeArrayFocus.index + 1}`;
+    }, [activeArrayFocus, selectedSection]);
+    const centerTemplateLabel = useMemo(() => {
+        return currentPageLabel;
+    }, [currentPageLabel]);
+    const selectedSectionLabel = useMemo(() => {
+        if (!selectedSection)
+            return null;
+        return navigatorSections.find((s) => s.id === selectedSection)?.label ?? selectedSection;
+    }, [selectedSection, navigatorSections]);
+    const selectedSectionStyleSupports = useMemo(() => {
+        if (!pageSchema || !selectedSection)
+            return undefined;
+        const sch = pageSchema.schema[selectedSection];
+        if (!sch || typeof sch !== 'object')
+            return undefined;
+        return sch._styleSupports;
+    }, [pageSchema, selectedSection]);
+    const selectedBlockStyleEntries = useMemo(() => selectedSection
+        ? getPayazaSectionStyleEntries(data, activePageId, selectedSection)
+        : {}, [data, activePageId, selectedSection]);
+    const granularInspectorActive = useMemo(() => Boolean(canvasElementFocus?.fieldPath?.length &&
+        canvasElementFocus.elementKind !== 'group' &&
+        canvasElementFocus.sectionKey === selectedSection &&
+        pageSchema &&
+        layoutJson), [canvasElementFocus, selectedSection, pageSchema, layoutJson]);
+    const granularBreadcrumbLabel = useMemo(() => {
+        if (!canvasElementFocus?.fieldPath?.length || !pageSchema)
+            return null;
+        const sk = canvasElementFocus.sectionKey;
+        const meta = resolveCanvasInspectorLeaf(pageSchema.schema, sk, canvasElementFocus.fieldPath, pageSchema.data[sk], canvasElementFocus.elementKind);
+        return meta?.breadcrumbLabel ?? null;
+    }, [canvasElementFocus, pageSchema]);
+    const rawGroupStyle = useMemo(() => {
+        if (!canvasElementFocus || canvasElementFocus.elementKind !== 'group' || !layoutJson)
+            return {};
+        const raw = readOverlayFieldValue(layoutJson, activePageId, canvasElementFocus.sectionKey, [...canvasElementFocus.fieldPath, 'attributes', 'payazaStyle']);
+        if (!raw || typeof raw !== 'object')
+            return {};
+        const out = {};
+        for (const [k, v] of Object.entries(raw)) {
+            if (typeof v === 'string')
+                out[k] = v;
+        }
+        return out;
+    }, [canvasElementFocus, layoutJson, activePageId]);
+    const handleBlockStylesChange = useCallback((sectionKey, styles) => {
+        const id = payazaSectionStyleKey(activePageId, sectionKey);
+        setData((prev) => {
+            const prevMap = { ...(prev.layoutConfig?.payazaSectionStyles || {}) };
+            if (!styles || Object.keys(styles).length === 0)
+                delete prevMap[id];
+            else
+                prevMap[id] = styles;
+            const nextData = {
+                ...prev,
+                layoutConfig: {
+                    ...prev.layoutConfig,
+                    payazaSectionStyles: prevMap,
+                },
+            };
+            onChange?.(nextData);
+            return nextData;
+        });
+    }, [activePageId, onChange]);
+    const handleReorderSection = useCallback((sectionId, direction) => {
+        if (!layoutJson)
+            return;
+        const nextOverlay = moveSectionKeyInPageOrder(layoutJson, activePageId, sectionId, direction);
+        setLayoutJson(nextOverlay);
+        const storeConfig = transformToStoreConfig(nextOverlay, activePageId, data);
+        setData(storeConfig);
+        onChange?.(storeConfig);
+    }, [layoutJson, activePageId, data, onChange]);
+    const handleToggleSectionVisibility = useCallback((sectionKey) => {
+        if (!layoutJson)
+            return;
+        const page = layoutJson.pages.find((p) => p.id === activePageId);
+        const currentShow = page?.data?.[sectionKey]?.show !== false;
+        handleFieldChange(sectionKey, ['show'], !currentShow);
+    }, [layoutJson, activePageId]);
+    const handleToggleNodeVisibility = useCallback((pageId, sectionId, node) => {
+        handleFieldChange(sectionId, [...node.blockPathInSection, 'attributes', 'show'], !node.visible);
+    }, [layoutJson, activePageId]);
+    // Handle field change — always read overlay/page/data from refs so iframe canvas commits
+    // stay current after async layout hydration (stable preview callbacks must not capture stale state).
+    const handleFieldChange = (sectionKey, fieldPath, value) => {
+        const currentLayoutJson = layoutJsonRef.current;
+        if (!currentLayoutJson)
+            return;
+        const pageId = activePageIdRef.current;
+        const currentData = dataRef.current;
+        // Normalize path from FieldRenderer:
+        // root-level fields may send ['sectionKey', ...]; strip duplicated root key.
+        const candidatePath = fieldPath || [];
+        const actualFieldPath = candidatePath.length > 0 && candidatePath[0] === sectionKey
+            ? candidatePath.slice(1)
+            : candidatePath;
+        // Direct section replacement (e.g. root array sections)
+        if (actualFieldPath.length === 0) {
+            const updatedJson = { ...currentLayoutJson };
+            const pageIndex = updatedJson.pages.findIndex((p) => p.id === pageId);
+            if (pageIndex === -1)
+                return;
+            const page = { ...updatedJson.pages[pageIndex], data: { ...updatedJson.pages[pageIndex].data } };
+            page.data[sectionKey] = value;
+            updatedJson.pages[pageIndex] = { ...page, _hydrated: true };
+            layoutJsonRef.current = updatedJson;
+            setLayoutJson(updatedJson);
+            const storeConfig = transformToStoreConfig(updatedJson, pageId, currentData);
+            dataRef.current = storeConfig;
+            setData(storeConfig);
+            onChange?.(storeConfig);
+            return;
+        }
+        const updatedLayout = updateOverlayData(currentLayoutJson, pageId, sectionKey, actualFieldPath, value);
+        const pageIndex = updatedLayout.pages.findIndex((p) => p.id === pageId);
+        const withHydrated = pageIndex === -1
+            ? updatedLayout
+            : {
+                ...updatedLayout,
+                pages: updatedLayout.pages.map((p, i) => i === pageIndex ? { ...p, _hydrated: true } : p),
+            };
+        layoutJsonRef.current = withHydrated;
+        setLayoutJson(withHydrated);
+        // Merge with existing data to preserve all StoreConfig properties
+        const storeConfig = transformToStoreConfig(withHydrated, pageId, currentData);
+        dataRef.current = storeConfig;
+        setData(storeConfig);
+        onChange?.(storeConfig);
+    };
+    const handleFieldChangeRef = useRef(handleFieldChange);
+    handleFieldChangeRef.current = handleFieldChange;
+    // Handle array item change
+    const handleArrayItemChange = (sectionKey, arrayPath, index, itemValue) => {
+        if (!layoutJson)
+            return;
+        const updatedLayout = updateArrayItem(layoutJson, activePageId, sectionKey, arrayPath, index, itemValue);
+        setLayoutJson(updatedLayout);
+        layoutJsonRef.current = updatedLayout;
+        // Merge with existing data to preserve all StoreConfig properties
+        const storeConfig = transformToStoreConfig(updatedLayout, activePageId, data);
+        dataRef.current = storeConfig;
+        setData(storeConfig);
+        onChange?.(storeConfig);
+    };
+    // Handle array item add
+    const handleArrayItemAdd = (sectionKey, arrayPath, itemSchema) => {
+        if (!layoutJson)
+            return;
+        const newItem = generateArrayItem(itemSchema);
+        const updatedLayout = addArrayItem(layoutJson, activePageId, sectionKey, arrayPath, newItem);
+        setLayoutJson(updatedLayout);
+        layoutJsonRef.current = updatedLayout;
+        // Merge with existing data to preserve all StoreConfig properties
+        const storeConfig = transformToStoreConfig(updatedLayout, activePageId, data);
+        dataRef.current = storeConfig;
+        setData(storeConfig);
+        onChange?.(storeConfig);
+    };
+    // Handle array item remove
+    const handleArrayItemRemove = (sectionKey, arrayPath, index) => {
+        if (!layoutJson)
+            return;
+        const updatedLayout = removeArrayItem(layoutJson, activePageId, sectionKey, arrayPath, index);
+        setLayoutJson(updatedLayout);
+        layoutJsonRef.current = updatedLayout;
+        // Merge with existing data to preserve all StoreConfig properties
+        const storeConfig = transformToStoreConfig(updatedLayout, activePageId, data);
+        dataRef.current = storeConfig;
+        setData(storeConfig);
+        onChange?.(storeConfig);
+    };
+    const flushEditorEnvelope = useCallback(() => {
+        // Flush synchronously from refs so Save/Publish always sees the latest overlay edits,
+        // even when React state from the most recent field change has not re-rendered yet.
+        if (!onEditorDocumentChange || !normalizedLayoutType)
+            return null;
+        const overlay = resolveOverlayForPersist();
+        if (!overlay)
+            return null;
+        try {
+            const doc = storeConfigToEnvelope(dataRef.current, {
+                layoutType: normalizedLayoutType,
+                templateType: 'home',
+                templateId: `${activePageIdRef.current}-template`,
+            }, overlay);
+            onEditorDocumentChange(doc);
+            return doc;
+        }
+        catch {
+            return null;
+        }
+    }, [normalizedLayoutType, onEditorDocumentChange, resolveOverlayForPersist]);
+    const resolveConfigForPersist = useCallback(() => {
+        const overlay = resolveOverlayForPersist();
+        if (!overlay)
+            return dataRef.current;
+        let config = dataRef.current;
+        for (const page of overlay.pages) {
+            config = transformToStoreConfig(overlay, page.id, config);
+        }
+        return config;
+    }, [resolveOverlayForPersist]);
+    const awaitPendingFieldCommits = useCallback(async () => {
+        await flushPreviewEditsAndWait();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        await new Promise((resolve) => {
+            if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+                window.requestAnimationFrame(() => resolve());
+            }
+            else {
+                setTimeout(resolve, 0);
+            }
+        });
+    }, [flushPreviewEditsAndWait]);
+    const handleSave = async () => {
+        setIsSaving(true);
+        try {
+            await awaitPendingFieldCommits();
+            const flushedDoc = flushEditorEnvelope();
+            const freshConfig = resolveConfigForPersist();
+            await onSave?.(freshConfig, flushedDoc ?? undefined);
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    const handlePublish = async () => {
+        setIsPublishing(true);
+        try {
+            await awaitPendingFieldCommits();
+            const flushedDoc = flushEditorEnvelope();
+            const freshConfig = resolveConfigForPersist();
+            await onPublish?.(freshConfig, flushedDoc ?? undefined);
+            setLastPublishedData(freshConfig);
+        }
+        finally {
+            setIsPublishing(false);
+        }
+    };
+    const hasChangesSincePublish = useMemo(() => {
+        return lastPublishedData === null || JSON.stringify(data) !== JSON.stringify(lastPublishedData);
+    }, [data, lastPublishedData]);
+    const handleAIGenerate = async (context) => {
+        if (!layoutJson)
+            return;
+        setIsGeneratingAI(true);
+        // Use a local variable to track if this specific request should still update state
+        let shouldUpdate = true;
+        try {
+            let response;
+            try {
+                response = await fetch('/api/ai/generate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        ...context,
+                        layoutId,
+                        alignmentSchema: layoutJson,
+                        existingData: data,
+                        assets: assets || context.assets
+                    })
+                });
+            }
+            catch (fetchError) {
+                // Handle network errors, CORS errors, etc.
+                throw new Error(fetchError.message || 'Network request failed. Please check your connection and try again.');
+            }
+            const contentType = response.headers.get('content-type');
+            if (!contentType || !contentType.includes('application/json')) {
+                const text = await response.text();
+                console.error('Non-JSON response received:', text);
+                throw new Error('The server returned an invalid response. Please ensure the AI endpoint is correctly configured.');
+            }
+            if (!response.ok) {
+                let errorMessage = 'Failed to generate content';
+                let errorDetails = '';
+                try {
+                    const error = await response.json();
+                    errorMessage = error.error || error.message || errorMessage;
+                    errorDetails = error.details || '';
+                    // Check if this is an API key configuration error
+                    if (errorMessage.includes('AI API key not configured') || errorMessage.includes('GEMINI_API_KEY')) {
+                        errorMessage = 'AI model configuration missing. The layout editor requires AI credentials to be configured in the host application (storefront-admin).';
+                        errorDetails = 'Please add GEMINI_API_KEY and GEMINI_MODEL to storefront-admin/.env or storefront-admin/.env.local';
+                    }
+                }
+                catch {
+                    // If response is not JSON, use status text
+                    errorMessage = response.statusText || `Server returned ${response.status} error`;
+                }
+                const fullErrorMessage = errorDetails
+                    ? `${errorMessage}\n\n${errorDetails}`
+                    : errorMessage;
+                throw new Error(fullErrorMessage);
+            }
+            const generatedData = await response.json();
+            if (!shouldUpdate)
+                return;
+            // Update layoutJson with generated data for each page
+            const updatedLayout = { ...layoutJson };
+            updatedLayout.pages = updatedLayout.pages.map(page => {
+                if (generatedData[page.id]) {
+                    return {
+                        ...page,
+                        data: generatedData[page.id]
+                    };
+                }
+                return page;
+            });
+            setLayoutJson(updatedLayout);
+            // CRITICAL: Merge ALL pages from the updated AI layout into the StoreConfig
+            // to ensure the StoreConfig is fully updated for all pages.
+            // We set actualDataPrecedence to false so AI data takes precedence.
+            const updatedStoreConfig = mergeAllPagesWithActualData(updatedLayout, data, { actualDataPrecedence: false });
+            setData(updatedStoreConfig);
+            onChange?.(updatedStoreConfig);
+            // Optional: Add a small delay and a "polishing" step for specific layouts like food
+            if (layoutId === 'food' || layoutId === 'food-modern') {
+                console.log('[PayazaFormEditor] Applying restaurant-specific content polishing...');
+                // In the future, we could add a second lighter AI pass here specifically for 
+                // appetizing adjectives and culinary context.
+            }
+            setIsAIModalOpen(false);
+            if (process.env.NODE_ENV === 'development') {
+                console.log('[PayazaFormEditor] AI Generation Successful:', updatedStoreConfig);
+            }
+        }
+        catch (error) {
+            if (shouldUpdate) {
+                console.error('AI Generation Error:', error);
+                // Determine error type and message
+                let errorTitle = 'AI Generation Failed';
+                let errorMessage = 'We encountered an issue while generating content.';
+                let actionableMessage = 'Please try again. If the problem persists, you can continue editing manually.';
+                // Extract error message from various error types
+                let errorText = '';
+                if (error instanceof Error) {
+                    errorText = error.message.toLowerCase();
+                }
+                else if (typeof error === 'string') {
+                    errorText = error.toLowerCase();
+                }
+                else if (error && typeof error === 'object' && 'message' in error) {
+                    errorText = String(error.message).toLowerCase();
+                }
+                // Handle specific error cases
+                if (errorText.includes('network') || errorText.includes('fetch') || errorText.includes('failed to fetch') ||
+                    errorText.includes('ai generation fetch failed') || errorText.includes('network request failed')) {
+                    errorTitle = 'Connection Problem';
+                    errorMessage = 'Unable to connect to the AI service.';
+                    actionableMessage = 'Please check your internet connection and try again.';
+                }
+                else if (errorText.includes('timeout') || errorText.includes('aborted')) {
+                    errorTitle = 'Request Timed Out';
+                    errorMessage = 'The AI service is taking longer than expected to respond.';
+                    actionableMessage = 'Please try again in a moment. The service may be experiencing high demand.';
+                }
+                else if (errorText.includes('500') || errorText.includes('server error') || errorText.includes('internal server')) {
+                    errorTitle = 'Service Temporarily Unavailable';
+                    errorMessage = 'The AI service is experiencing technical difficulties.';
+                    actionableMessage = 'Please try again in a few moments. If the issue continues, contact support.';
+                }
+                else if (errorText.includes('400') || errorText.includes('bad request')) {
+                    errorTitle = 'Invalid Request';
+                    errorMessage = 'There was an issue with the generation request.';
+                    actionableMessage = 'Please try again with different content or contact support if the issue persists.';
+                }
+                else if (errorText.includes('api key') || errorText.includes('ai api key not configured') || errorText.includes('gemini_api_key') ||
+                    errorText.includes('ai model configuration missing') || errorText.includes('unauthorized') || errorText.includes('403') || errorText.includes('401')) {
+                    errorTitle = 'AI Configuration Required';
+                    errorMessage = 'The AI service requires configuration in the host application.';
+                    actionableMessage = 'Please add GEMINI_API_KEY and GEMINI_MODEL to storefront-admin/.env or storefront-admin/.env.local. The layout editor uses the host application\'s environment variables for AI model configuration.';
+                }
+                else if (errorText.includes('quota') || errorText.includes('429') || errorText.includes('rate limit')) {
+                    errorTitle = 'Service Limit Reached';
+                    errorMessage = 'The AI service has reached its usage limit.';
+                    actionableMessage = 'Please try again later or contact support to increase your service limits.';
+                }
+                else if (error instanceof Error) {
+                    errorMessage = error.message || 'An unexpected error occurred.';
+                }
+                else if (typeof error === 'string') {
+                    errorMessage = error;
+                }
+                showAlert(`${errorMessage} ${actionableMessage}`, 'error', {
+                    title: errorTitle,
+                    confirmText: 'Try Again',
+                    cancelText: 'Continue Editing',
+                    showCancel: true,
+                    onConfirm: () => {
+                        setIsAIModalOpen(true);
+                    },
+                    onCancel: () => {
+                        setIsAIModalOpen(false);
+                    }
+                });
+            }
+        }
+        finally {
+            if (shouldUpdate) {
+                setIsGeneratingAI(false);
+            }
+        }
+        // This is a bit of a hack since handleAIGenerate is not an effect,
+        // 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);
+        openMobileInspector();
+        requestAnimationFrame(() => {
+            document
+                .querySelector(`[data-section-key="${sectionKey}"]`)
+                ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        });
+    }, [openMobileInspector]);
+    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;
+        }
+        handleFieldChangeRef.current(payload.sectionKey, payload.fieldPath, value);
+    }, []);
+    const handlePreviewElementFocus = useCallback((p) => {
+        const inlineTextEdit = isInlineCanvasTextElementKind(p.elementKind);
+        setCanvasElementFocus(p);
+        setSelectedSection(p.sectionKey);
+        setBlockSubTab('settings');
+        if (isMobileViewRef.current) {
+            if (inlineTextEdit) {
+                setMobilePanelView('canvas');
+            }
+            else {
+                openMobileInspector();
+            }
+        }
+        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),
+            });
+        }
+        if (!isMobileViewRef.current || !inlineTextEdit) {
+            requestAnimationFrame(() => {
+                document
+                    .querySelector(`[data-section-key="${p.sectionKey}"]`)
+                    ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            });
+        }
+    }, [openMobileInspector]);
+    const handlePreviewFocusSidebarSection = useCallback((sectionKey) => {
+        setSelectedSection(sectionKey);
+        setBlockSubTab('settings');
+        openMobileInspector();
+        requestAnimationFrame(() => {
+            document
+                .querySelector(`[data-section-key="${sectionKey}"]`)
+                ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        });
+    }, [openMobileInspector]);
+    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))) })] })] })] }));
+    }
+    if (!layoutJson || !pageSchema) {
+        return (_jsx("div", { className: "flex items-center justify-center h-full", children: _jsx("div", { className: "text-slate-400", children: "Layout not found" }) }));
+    }
+    // Inspector inner content — shared between desktop ResizableSidebar and mobile overlay
+    const inspectorContent = (_jsxs("div", { className: "relative flex h-full flex-col bg-[#fbfbfc]", id: "tour-editor-sidebar", children: [_jsxs("div", { "data-payaza-sidebar": "inspector", className: "sticky top-0 z-30 bg-[#fbfbfc]", children: [!isMobileView && (_jsxs("div", { className: "flex min-h-[48px] items-center gap-2 border-b border-[#dcdcde] px-3 py-2", children: [_jsx(Box, { className: `h-4 w-4 shrink-0 ${selectedSection ? 'text-[#440066]' : 'text-[#c3c4c7]'}`, strokeWidth: 2, "aria-hidden": true }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: `truncate text-[12px] font-semibold leading-tight ${selectedSection ? 'text-[#1b0029]' : 'text-[#787c82]'}`, children: selectedSection ? (selectedSectionLabel ?? selectedSection) : 'Block Inspector' }), selectedSection && (_jsx("p", { className: "truncate text-[11px] leading-tight text-[#787c82]", children: pages.find((p) => p.id === activePageId)?.name ?? activePageId }))] })] })), _jsxs("div", { "data-payaza-sidebar-tabs": true, className: "-mb-px flex border-b border-[#dcdcde]", role: "tablist", "aria-label": "Block inspector", children: [_jsxs("button", { type: "button", role: "tab", "aria-selected": blockSubTab === 'settings', title: "Settings", onClick: () => setBlockSubTab('settings'), className: `relative mb-[-1px] flex items-center justify-center gap-1.5 border-b-[3px] px-3 py-2.5 text-[12px] font-semibold transition-colors ${blockSubTab === 'settings'
+                                    ? 'border-[#440066] font-bold text-[#1b0029]'
+                                    : 'border-transparent font-medium text-[#646970] hover:bg-white/70 hover:text-[#1b0029]'}`, children: [_jsx(Settings2, { size: 17, strokeWidth: 2, "aria-hidden": true }), _jsx("span", { children: "Settings" })] }), !isMobileView && (_jsxs("button", { type: "button", role: "tab", "aria-selected": blockSubTab === 'styles', title: "Styles", onClick: () => setBlockSubTab('styles'), className: `relative mb-[-1px] flex items-center justify-center gap-1.5 border-b-[3px] px-3 py-2.5 text-[12px] font-semibold transition-colors ${blockSubTab === 'styles'
+                                    ? 'border-[#440066] font-bold text-[#1b0029]'
+                                    : 'border-transparent font-medium text-[#646970] hover:bg-white/70 hover:text-[#1b0029]'}`, children: [_jsx(Palette, { size: 17, strokeWidth: 2, "aria-hidden": true }), _jsx("span", { children: "Styles" })] }))] })] }), _jsx("div", { className: "payaza-form-editor custom-scrollbar isolate min-h-0 flex-1 overflow-y-auto scroll-pt-1 bg-white px-2 py-0", children: !selectedSection ? (_jsxs("div", { className: "flex flex-col items-center justify-center px-5 py-16 text-center", children: [_jsx(Box, { className: "mb-3 h-8 w-8 text-[#dcdcde]", strokeWidth: 1.5, "aria-hidden": true }), _jsx("p", { className: "text-[13px] font-semibold text-[#50575e]", children: "No block selected" }), _jsx("p", { className: "mt-1.5 max-w-[200px] text-[12px] leading-relaxed text-[#787c82]", children: "Click on any section in the canvas or select one from the List View." })] })) : blockSubTab === 'styles' && !isMobileView ? (canvasElementFocus?.elementKind === 'group' ? (_jsx(BlockStylesInspector, { supports: { spacing: true, colors: true, border: true, typography: true }, value: rawGroupStyle, onChange: (next) => {
+                        if (canvasElementFocus) {
+                            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: [!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, headerRef: editorHeaderRef, headerStatusNote: headerStatusNote, mobileStatusBanner: mobileStatusBanner, draftSaveStatus: draftSaveStatus }), _jsx(AIGenerateModal, { isOpen: isAIModalOpen, onClose: () => setIsAIModalOpen(false), onGenerate: handleAIGenerate, initialContext: {
+                                    storeName: storeName || data?.name || '',
+                                    storeDescription: storeDescription || data?.description || '',
+                                    assets: assets || [],
+                                }, isGenerating: isGeneratingAI }), _jsxs("div", { ref: mobileMainRegionRef, className: "relative flex min-h-0 flex-1 flex-col overflow-hidden", children: [_jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [!isMobileView && outlinePanelOpen && (_jsx(ResizableSidebar, { side: "left", initialWidth: 220, minWidth: 160, maxWidth: 400, children: _jsx(EditorNavigator, { className: "w-full min-w-0 border-r-0", outlinePages: outlinePages, activePageId: activePageId, onSelectPage: (pageId) => {
+                                                        setActivePageId(pageId);
+                                                        setSelectedSection(null);
+                                                    }, selectedSectionId: selectedSection, onSelectSectionInPage: handleSelectSectionInPage, onReorderSection: handleReorderSection, onToggleSectionVisibility: handleToggleSectionVisibility, outlineGranularity: navigatorOutlineGranularity, onOutlineTreeActivate: applyOutlineBlockFocus, onToggleNodeVisibility: handleToggleNodeVisibility }) })), _jsxs("div", { className: `flex min-w-0 flex-1 flex-col overflow-hidden bg-[#e2e4e7] ${isMobileView && mobilePanelView !== 'canvas' ? 'invisible' : ''}`, style: isMobileView ? { touchAction: 'pan-y' } : undefined, "aria-hidden": isMobileView && mobilePanelView !== 'canvas', onTouchStart: (e) => {
+                                                    if (e.touches.length === 0)
+                                                        return;
+                                                    touchStartX.current = e.touches[0].clientX;
+                                                    touchStartY.current = e.touches[0].clientY;
+                                                }, onTouchEnd: (e) => {
+                                                    if (!isMobileView || touchStartX.current === null || touchStartY.current === null)
+                                                        return;
+                                                    if (e.changedTouches.length === 0)
+                                                        return;
+                                                    const dx = e.changedTouches[0].clientX - touchStartX.current;
+                                                    const dy = e.changedTouches[0].clientY - touchStartY.current;
+                                                    touchStartX.current = null;
+                                                    touchStartY.current = null;
+                                                    if (Math.abs(dx) <= Math.abs(dy) || Math.abs(dx) < 60)
+                                                        return;
+                                                    if (dx > 0)
+                                                        setMobilePanelView('outline');
+                                                    else if (selectedSection)
+                                                        setMobilePanelView('inspector');
+                                                }, children: [_jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: [_jsx(EditorCanvasPreview, { layoutId: layoutId, config: debouncedData, activePageId: activePageId, viewMode: viewMode, previewZoom: previewZoom, selectedSection: selectedSection, focusedField: canvasElementFocus, interactionMode: isMobileView ? 'edit' : interactionMode, slideIndexSync: slideIndexSync, flushRequestId: flushRequestId, editorContext: previewEditorContext, onRouteChange: handlePreviewRouteChange, onSectionSelected: handlePreviewSectionSelected, onFieldCommit: handlePreviewFieldCommit, onSectionReorder: handleReorderSection, onPreviewElementFocus: handlePreviewElementFocus, onFocusSidebarSection: handlePreviewFocusSidebarSection, previewFlushRef: previewFlushRef, iframePreviewFlushRef: iframePreviewFlushRef }), selectedSectionLabel && interactionMode === 'edit' && mobilePanelView === 'canvas' && (_jsx("div", { className: "pointer-events-none absolute left-1/2 z-30 max-w-[min(100%-2rem,360px)] -translate-x-1/2", style: { bottom: 'calc(8px + env(safe-area-inset-bottom, 0px))' }, 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'
+                                                                                : canvasElementFocus.elementKind === 'icon'
+                                                                                    ? 'Icon'
+                                                                                    : canvasElementFocus.elementKind === 'rating'
+                                                                                        ? 'Star rating'
+                                                                                        : canvasElementFocus.elementKind === 'group'
+                                                                                            ? 'Group'
+                                                                                            : 'Plain text' })] })) : null] }))] }), !isMobileView && selectedSection && (_jsx(ResizableSidebar, { initialWidth: 280, minWidth: 220, maxWidth: 360, className: "border-l border-[#dcdcde] bg-[#fbfbfc]", children: inspectorContent }))] }), isMobileView && mobilePanelView === 'outline' && (_jsxs("div", { className: "absolute inset-0 z-[200] flex flex-col overflow-hidden bg-[#fffefb]", children: [_jsx(MobilePanelBackHeader, { title: "Layers", onBack: () => setMobilePanelView('canvas') }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(EditorNavigator, { className: "w-full min-w-0 border-r-0", outlinePages: outlinePages, activePageId: activePageId, onSelectPage: (pageId) => {
+                                                        setActivePageId(pageId);
+                                                        setSelectedSection(null);
+                                                        setMobilePanelView('canvas');
+                                                    }, selectedSectionId: selectedSection, onSelectSectionInPage: (pageId, sectionId) => {
+                                                        handleSelectSectionInPage(pageId, sectionId);
+                                                    }, onReorderSection: handleReorderSection, onToggleSectionVisibility: handleToggleSectionVisibility, outlineGranularity: navigatorOutlineGranularity, onOutlineTreeActivate: (targetPageId, sectionId, node) => {
+                                                        applyOutlineBlockFocus(targetPageId, sectionId, node);
+                                                        setMobilePanelView('canvas');
+                                                    }, onToggleNodeVisibility: handleToggleNodeVisibility }) })] })), isMobileView && mobilePanelView === 'inspector' && (_jsxs("div", { className: "absolute inset-0 z-[200] flex flex-col overflow-hidden border-l border-[#dcdcde] bg-[#fbfbfc]", children: [_jsx(MobilePanelBackHeader, { title: selectedSectionLabel ?? 'Inspect', onBack: () => setMobilePanelView('canvas') }), selectedSection ? (_jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: inspectorContent })) : (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-center px-6 py-12 text-center", children: [_jsx(Box, { className: "mb-3 h-8 w-8 text-[#dcdcde]", strokeWidth: 1.5, "aria-hidden": true }), _jsx("p", { className: "text-[13px] font-semibold text-[#50575e]", children: "No section selected" }), _jsx("p", { className: "mt-1.5 max-w-[240px] text-[12px] leading-relaxed text-[#787c82]", children: "Tap a section on the canvas to inspect and edit its settings." }), _jsx("button", { type: "button", onClick: () => setMobilePanelView('canvas'), className: "mt-4 rounded-lg border border-[#dcdcde] bg-white px-4 py-2 text-[13px] font-medium text-[#440066] hover:bg-[#f4f5f7]", children: "Back to canvas" })] }))] }))] }), isMobileView && (_jsx("div", { ref: mobileBottomNavRef, className: "z-[150] flex shrink-0 border-t border-[#dcdcde] bg-white", style: {
+                                    minHeight: '52px',
+                                    paddingBottom: 'env(safe-area-inset-bottom, 0px)',
+                                }, children: [
+                                    { view: 'outline', Icon: PanelLeft, label: 'Layers' },
+                                    { view: 'canvas', Icon: Monitor, label: 'Canvas' },
+                                    { view: 'inspector', Icon: Settings2, label: 'Inspect' },
+                                ].map(({ view, Icon, label }) => (_jsxs("button", { type: "button", onClick: () => {
+                                        if (view === 'outline') {
+                                            setMobilePanelView(v => v === 'outline' ? 'canvas' : 'outline');
+                                        }
+                                        else {
+                                            setMobilePanelView(view);
+                                        }
+                                    }, "aria-pressed": mobilePanelView === view, className: `relative flex flex-1 flex-col items-center justify-center gap-0.5 transition-colors ${mobilePanelView === view ? 'text-[#440066]' : 'text-[#787c82]'}`, children: [_jsx(Icon, { className: "h-5 w-5", strokeWidth: 2 }), _jsx("span", { className: "text-[10px] font-medium", children: label }), view === 'inspector' && selectedSection && mobilePanelView !== 'inspector' && (_jsx("span", { className: "absolute right-[calc(50%-20px)] top-2.5 h-1.5 w-1.5 rounded-full bg-[#440066]", "aria-hidden": true }))] }, view))) })), _jsx("style", { dangerouslySetInnerHTML: {
+                                    __html: `
+        /* Custom Scrollbar */
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 4px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+          background: #c3c4c7;
+          border-radius: 4px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+          background: #a7aaad;
+        }
+      `
+                                } })] }) })] }) }));
+};