payaza-storefront-layouts 1.0.38 → 1.0.40

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

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

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

@@ -5,7 +5,7 @@ import { IframePreview } from '../shared/IframePreview';
 import { ResizableSidebar } from '../shared/ResizableSidebar';
 import { getPageSchema } from './engine';
 import { FieldRenderer } from './FieldRenderer';
-import { loadLayoutJSON, loadLayoutJSONSync } from './layout-loader';
+import { loadLayoutJSON } from './layout-loader';
 import { transformToStoreConfig, updateOverlayData, addArrayItem, removeArrayItem, updateArrayItem } from './data-transformer';
 import { generateArrayItem } from './engine';
 import { initializeWidgetRegistry, clearWidgets } from './widget-registry';
@@ -13,10 +13,18 @@ import { mergeRequirementWithActualData, mergeAllPagesWithActualData } from './d
 import { Info, Search, X } from 'lucide-react';
 import { useDebounce } from '../../hooks/use-debounce';
 import { AIGenerateModal } from '../shared/AIGenerateModal';
-export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, onSave, onPublish, onBack, title, className = '', customWidgets, storeName, storeDescription, assets, }) => {
+import { useAlertModal } from '../../components/ui/alert-modal';
+export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, onSave, onPublish, onBack, onBackToSettings, onOpenAssets, onBackToTheme, title, className = '', customWidgets, storeName, storeDescription, assets, }) => {
     const [activePageId, setActivePageId] = useState('home');
     const [data, setData] = useState(initialData);
     const dataRef = useRef(initialData);
+    // Undo/Redo State
+    const [history, setHistory] = useState([initialData]);
+    const [historyIndex, setHistoryIndex] = useState(0);
+    const isInternalChange = useRef(false);
+    const MAX_HISTORY = 50;
+    // Track last published data to disable publish button if no changes
+    const [lastPublishedData, setLastPublishedData] = useState(initialData);
     // Debounce the data for preview to prevent excessive iframe updates and RAM spikes
     const debouncedData = useDebounce(data, 400);
     const [viewMode, setViewMode] = useState('desktop');
@@ -28,10 +36,79 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
     const [baseRequirement, setBaseRequirement] = useState(null);
     const [loading, setLoading] = useState(true);
     const [searchQuery, setSearchQuery] = useState('');
+    const [selectedSection, setSelectedSection] = useState(null);
+    const { showAlert } = useAlertModal();
     // Keep dataRef in sync with data state
     useEffect(() => {
         dataRef.current = data;
+        // Add to history if not an internal change (undo/redo)
+        if (!isInternalChange.current) {
+            setHistory(prev => {
+                const newHistory = prev.slice(0, historyIndex + 1);
+                // Only add if data is different from the last entry
+                if (JSON.stringify(newHistory[newHistory.length - 1]) !== JSON.stringify(data)) {
+                    const updatedHistory = [...newHistory, data];
+                    if (updatedHistory.length > MAX_HISTORY) {
+                        return updatedHistory.slice(1);
+                    }
+                    return updatedHistory;
+                }
+                return prev;
+            });
+            setHistoryIndex(prev => {
+                const newIndex = Math.min(historyIndex + 1, MAX_HISTORY - 1);
+                // We need to re-calculate based on what setHistory actually does
+                return historyIndex + 1;
+            });
+        }
+        isInternalChange.current = false;
     }, [data]);
+    // Fix the history index after history update
+    useEffect(() => {
+        if (history.length > 0 && historyIndex >= history.length) {
+            setHistoryIndex(history.length - 1);
+        }
+    }, [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) {
@@ -60,41 +137,39 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
         const loadLayout = async () => {
             setLoading(true);
             try {
-                // Load requirement (schema + defaults)
-                const syncLayout = loadLayoutJSONSync(layoutId, inventory);
-                let requirementLayout = syncLayout;
-                if (!requirementLayout) {
-                    requirementLayout = await loadLayoutJSON(layoutId, inventory);
+                // Normalization mapping
+                const layoutIdMap = {
+                    'fashion-hub': 'clothing',
+                    'savory-bites': 'food',
+                    'modern-eats': 'food-modern',
+                    'minimal-style': 'clothing-minimal',
+                    'fashion-minimal': 'clothing-minimal',
+                    'urban-retreat': 'booking',
+                    'agenda-book': 'booking-agenda',
+                    'grid-tech': 'electronics-grid',
+                    'mindset-mastery': 'motivational-speaker'
+                };
+                const rawId = String(layoutId || '').trim().toLowerCase();
+                const normalizedId = layoutIdMap[rawId] || rawId;
+                const layoutRequirement = await loadLayoutJSON(normalizedId, inventory);
+                if (!isMounted)
+                    return;
+                if (layoutRequirement) {
+                    setBaseRequirement(layoutRequirement);
+                    // Initial merge for the active page
+                    const mergedLayout = mergeRequirementWithActualData(layoutRequirement, initialData, activePageId);
+                    setLayoutJson(mergedLayout);
+                    // Merge with existing data to preserve all StoreConfig properties
+                    const storeConfig = transformToStoreConfig(mergedLayout, activePageId, initialData);
+                    setData(storeConfig);
+                    // Don't call onChange here to avoid loops on initial load
                 }
-                if (requirementLayout && isMounted) {
-                    // Store base requirement for re-merging on page changes
-                    setBaseRequirement(requirementLayout);
-                    if (initialData) {
-                        // CRITICAL: Merge ALL pages with actual data to ensure StoreConfig is fully populated
-                        // with defaults for all pages, not just the active one.
-                        // This ensures onSave/onPublish always receive a complete set of data.
-                        const fullyMergedStoreConfig = mergeAllPagesWithActualData(requirementLayout, initialData);
-                        // Also get the layout for the active page specifically
-                        const mergedLayout = mergeRequirementWithActualData(requirementLayout, fullyMergedStoreConfig, activePageId);
-                        setLayoutJson(mergedLayout);
-                        if (process.env.NODE_ENV === 'development') {
-                            console.log('[PayazaFormEditor] Setting fully merged StoreConfig for preview:', {
-                                pageId: activePageId,
-                                hasLayoutConfig: !!fullyMergedStoreConfig.layoutConfig,
-                            });
-                        }
-                        setData(fullyMergedStoreConfig);
-                    }
-                    else {
-                        // No actual data, use requirement as-is
-                        setLayoutJson(requirementLayout);
-                    }
+                else {
+                    console.error(`[PayazaFormEditor] Failed to load layout requirement for: ${layoutId} (normalized: ${normalizedId})`);
                 }
             }
             catch (error) {
-                if (isMounted) {
-                    console.error('Error loading layout:', error);
-                }
+                console.error('[PayazaFormEditor] Error loading layout:', error);
             }
             finally {
                 if (isMounted) {
@@ -103,8 +178,23 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
             }
         };
         loadLayout();
+        const handleMessage = (event) => {
+            if (event.data?.type === 'SECTION_SELECTED') {
+                const sectionKey = event.data.section || event.data.sectionKey;
+                if (sectionKey) {
+                    setSelectedSection(sectionKey);
+                    // Find and scroll to the section in the sidebar
+                    const element = document.querySelector(`[data-section-key="${sectionKey}"]`);
+                    if (element) {
+                        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    }
+                }
+            }
+        };
+        window.addEventListener('message', handleMessage);
         return () => {
             isMounted = false;
+            window.removeEventListener('message', handleMessage);
         };
     }, [layoutId, inventory, initialData]);
     // Re-merge data when page changes
@@ -219,11 +309,15 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
         setIsPublishing(true);
         try {
             await onPublish?.(data);
+            setLastPublishedData(data);
         }
         finally {
             setIsPublishing(false);
         }
     };
+    const hasChangesSincePublish = useMemo(() => {
+        return JSON.stringify(data) !== JSON.stringify(lastPublishedData);
+    }, [data, lastPublishedData]);
     const handleAIGenerate = async (context) => {
         if (!layoutJson)
             return;
@@ -231,20 +325,41 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
         // Use a local variable to track if this specific request should still update state
         let shouldUpdate = true;
         try {
-            const 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
-                })
-            });
+            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) {
-                const error = await response.json();
-                throw new Error(error.error || 'Failed to generate content');
+                let errorMessage = 'Failed to generate content';
+                try {
+                    const error = await response.json();
+                    errorMessage = error.error || error.message || errorMessage;
+                }
+                catch {
+                    // If response is not JSON, use status text
+                    errorMessage = response.statusText || `Server returned ${response.status} error`;
+                }
+                throw new Error(errorMessage);
             }
             const generatedData = await response.json();
             if (!shouldUpdate)
@@ -263,7 +378,8 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
             setLayoutJson(updatedLayout);
             // CRITICAL: Merge ALL pages from the updated AI layout into the StoreConfig
             // to ensure the StoreConfig is fully updated for all pages.
-            const updatedStoreConfig = mergeAllPagesWithActualData(updatedLayout, data);
+            // 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
@@ -280,7 +396,71 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
         catch (error) {
             if (shouldUpdate) {
                 console.error('AI Generation Error:', error);
-                alert(`AI Generation failed: ${error.message}`);
+                // 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('unauthorized') || errorText.includes('403') || errorText.includes('401')) {
+                    errorTitle = 'Service Unavailable';
+                    errorMessage = 'The AI service is temporarily unavailable.';
+                    actionableMessage = 'Please try again later or contact support for assistance.';
+                }
+                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 {
@@ -298,25 +478,25 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
     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" }) }));
     }
-    return (_jsxs("div", { className: `flex flex-col h-full bg-white ${className} font-sans antialiased text-slate-900`, children: [_jsx(EditorHeader, { layoutName: layoutJson.layoutName || layoutId, storeName: storeName, activePage: activePageId, pages: pages, onPageSwitch: setActivePageId, onSave: handleSave, onPublish: onPublish ? handlePublish : undefined, onBack: onBack, viewMode: viewMode, onViewModeChange: setViewMode, editorType: "payaza-form", isSaving: isSaving, isPublishing: isPublishing, onGenerateAI: () => setIsAIModalOpen(true), isGeneratingAI: isGeneratingAI }), _jsx(AIGenerateModal, { isOpen: isAIModalOpen, onClose: () => setIsAIModalOpen(false), onGenerate: handleAIGenerate, initialContext: {
+    return (_jsxs("div", { className: `flex flex-col h-full bg-white ${className} font-sans antialiased text-slate-900`, children: [_jsx(EditorHeader, { layoutName: layoutJson.layoutName || layoutId, storeName: storeName, activePage: activePageId, pages: pages, onPageSwitch: setActivePageId, 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, editorType: "payaza-form", isSaving: isSaving, isPublishing: isPublishing, onGenerateAI: () => setIsAIModalOpen(true), isGeneratingAI: isGeneratingAI }), _jsx(AIGenerateModal, { isOpen: isAIModalOpen, onClose: () => setIsAIModalOpen(false), onGenerate: handleAIGenerate, initialContext: {
                     storeName: storeName || data?.name || '',
                     storeDescription: storeDescription || data?.description || '',
                     assets: assets || [],
-                }, isGenerating: isGeneratingAI }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [_jsx("div", { className: "flex-1 overflow-hidden bg-[#f8f9fb] relative", children: _jsx(IframePreview, { layoutId: layoutId, config: data, activePageId: activePageId, viewMode: viewMode }) }), _jsx(ResizableSidebar, { initialWidth: 380, minWidth: 340, maxWidth: 500, className: "bg-white border-l border-slate-200 shadow-[-12px_0_32px_-4px_rgba(0,0,0,0.03)]", children: _jsxs("div", { className: "flex flex-col h-full bg-white relative", children: [_jsxs("div", { className: "bg-white/90 backdrop-blur-xl sticky top-0 z-30 border-b border-slate-100 px-6 pt-6 pb-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-6", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h3", { className: "text-[11px] font-black text-slate-900 uppercase tracking-[0.3em]", children: "Editor Panel" }), _jsxs("p", { className: "text-[9px] text-slate-400 font-bold uppercase tracking-widest flex items-center gap-1.5", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-900 shadow-[0_0_8px_rgba(0,0,0,0.2)]" }), "Customising ", activePageId] })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("div", { className: "p-2 rounded-xl bg-slate-50 text-slate-400 hover:text-slate-600 transition-all cursor-help", title: "Studio Info", children: _jsx(Info, { size: 14 }) }) })] }), _jsxs("div", { className: "relative group", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 transition-colors group-focus-within:text-slate-900", size: 14, strokeWidth: 2.5 }), _jsx("input", { type: "text", placeholder: "Search properties...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full h-12 pl-11 pr-10 bg-slate-50/50 border border-slate-200 rounded-xl text-[12px] font-bold text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900/20 focus:bg-white transition-all shadow-sm" }), searchQuery && (_jsx("button", { onClick: () => setSearchQuery(''), className: "absolute right-3 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center bg-slate-200 text-slate-500 hover:bg-slate-300 hover:text-slate-700 rounded-full transition-all", children: _jsx(X, { size: 12, strokeWidth: 3 }) }))] })] }), _jsx("div", { className: "flex-1 payaza-form-editor overflow-y-auto custom-scrollbar bg-[#fcfcfd] px-6 py-8", children: _jsx("div", { className: "space-y-6", children: filteredSchema.length > 0 ? (filteredSchema.map(([sectionKey, sectionSchema]) => {
+                }, isGenerating: isGeneratingAI }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [_jsx("div", { className: "flex-1 overflow-hidden bg-[#f8f9fb] relative", children: _jsx(IframePreview, { layoutId: layoutId, config: data, activePageId: activePageId, viewMode: viewMode, selectedSection: selectedSection }) }), _jsx(ResizableSidebar, { initialWidth: 380, minWidth: 340, maxWidth: 500, className: "bg-white border-l border-slate-200 shadow-[-12px_0_32px_-4px_rgba(0,0,0,0.03)]", children: _jsxs("div", { className: "flex flex-col h-full bg-white relative", children: [_jsxs("div", { className: "bg-white/90 backdrop-blur-xl sticky top-0 z-30 border-b border-slate-100 px-6 pt-6 pb-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-6", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h3", { className: "text-[11px] font-black text-slate-900 uppercase tracking-[0.3em]", children: "Editor Panel" }), _jsxs("p", { className: "text-[9px] text-slate-400 font-bold uppercase tracking-widest flex items-center gap-1.5", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-900 shadow-[0_0_8px_rgba(0,0,0,0.2)]" }), "Customising ", activePageId] })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("div", { className: "p-2 rounded-xl bg-slate-50 text-slate-400 hover:text-slate-600 transition-all cursor-help", title: "Studio Info", children: _jsx(Info, { size: 14 }) }) })] }), _jsxs("div", { className: "relative group", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 transition-colors group-focus-within:text-slate-900", size: 14, strokeWidth: 2.5 }), _jsx("input", { type: "text", placeholder: "Search properties...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full h-12 pl-11 pr-10 bg-slate-50/50 border border-slate-200 rounded-xl text-[12px] font-bold text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900/20 focus:bg-white transition-all shadow-sm" }), searchQuery && (_jsx("button", { onClick: () => setSearchQuery(''), className: "absolute right-3 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center bg-slate-200 text-slate-500 hover:bg-slate-300 hover:text-slate-700 rounded-full transition-all", children: _jsx(X, { size: 12, strokeWidth: 3 }) }))] })] }), _jsx("div", { className: "flex-1 payaza-form-editor overflow-y-auto custom-scrollbar bg-[#fcfcfd] px-6 py-8", children: _jsx("div", { className: "space-y-6", children: filteredSchema.length > 0 ? (filteredSchema.map(([sectionKey, sectionSchema]) => {
                                             const sectionData = pageSchema.data[sectionKey];
-                                            return (_jsx(FieldRenderer, { schemaField: sectionSchema, value: sectionData, path: [sectionKey], onChange: (value, fieldPath) => {
-                                                    // fieldPath from FieldRenderer is relative to the section
-                                                    // e.g., ['show'] for hero.show, ['sliders', 0, 'title'] for hero.sliders[0].title
-                                                    handleFieldChange(sectionKey, fieldPath, value);
-                                                }, onArrayItemChange: (index, itemValue) => {
-                                                    handleArrayItemChange(sectionKey, [], index, itemValue);
-                                                }, onArrayItemAdd: () => {
-                                                    if (sectionSchema._itemSchema) {
-                                                        handleArrayItemAdd(sectionKey, [], sectionSchema._itemSchema);
-                                                    }
-                                                }, onArrayItemRemove: (index) => {
-                                                    handleArrayItemRemove(sectionKey, [], index);
-                                                } }, sectionKey));
+                                            return (_jsx("div", { "data-section-key": sectionKey, className: selectedSection === sectionKey ? 'ring-2 ring-primary ring-inset rounded-xl bg-primary/5' : '', children: _jsx(FieldRenderer, { schemaField: sectionSchema, value: sectionData, path: [sectionKey], onChange: (value, fieldPath) => {
+                                                        // fieldPath from FieldRenderer is relative to the section
+                                                        // e.g., ['show'] for hero.show, ['sliders', 0, 'title'] for hero.sliders[0].title
+                                                        handleFieldChange(sectionKey, fieldPath, value);
+                                                    }, onArrayItemChange: (index, itemValue) => {
+                                                        handleArrayItemChange(sectionKey, [], index, itemValue);
+                                                    }, onArrayItemAdd: () => {
+                                                        if (sectionSchema._itemSchema) {
+                                                            handleArrayItemAdd(sectionKey, [], sectionSchema._itemSchema);
+                                                        }
+                                                    }, onArrayItemRemove: (index) => {
+                                                        handleArrayItemRemove(sectionKey, [], index);
+                                                    } }) }, sectionKey));
                                         })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-24 text-center px-6 bg-slate-50/50 rounded-3xl border border-dashed border-slate-200", children: [_jsx("div", { className: "w-20 h-20 bg-white rounded-full flex items-center justify-center mb-6 shadow-xl border border-slate-50", children: _jsx(Search, { size: 28, className: "text-slate-200", strokeWidth: 1.5 }) }), _jsx("p", { className: "text-[12px] font-black text-slate-500 uppercase tracking-widest mb-2", children: "No results found" }), _jsx("p", { className: "text-[10px] text-slate-400 font-bold uppercase tracking-widest max-w-[200px] leading-relaxed", children: "Try adjusting your search to find specific properties" })] })) }) }), _jsx("div", { className: "px-8 py-6 bg-white border-t border-slate-100 shadow-[0_-10px_40px_-10px_rgba(0,0,0,0.02)]", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.5)] animate-pulse" }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("p", { className: "text-[10px] font-black text-slate-900 uppercase tracking-[0.1em]", children: "Studio Status" }), _jsx("p", { className: "text-[8px] font-bold text-slate-400 uppercase tracking-widest", children: "Live Syncing Enabled" })] })] }), _jsx("div", { className: "flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-50 border border-slate-100 shadow-sm", children: _jsx("span", { className: "text-[9px] font-black text-slate-400 uppercase tracking-[0.1em]", children: "Build v1.0.32" }) })] }) })] }) })] }), _jsx("style", { dangerouslySetInnerHTML: { __html: `
         /* Custom Scrollbar */
         .custom-scrollbar::-webkit-scrollbar {

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import { PayazaFormEditorProps } from './PayazaFormEditor';
 export interface PayazaFormEditorFullPageProps extends PayazaFormEditorProps {
+    onBackToSettings?: () => void;
+    onOpenAssets?: () => void;
+    onBackToTheme?: () => void;
 }
 export declare const PayazaFormEditorFullPage: React.FC<PayazaFormEditorFullPageProps>;
 //# sourceMappingURL=PayazaFormEditorFullPage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PayazaFormEditorFullPage.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/PayazaFormEditorFullPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE7E,MAAM,WAAW,6BAA8B,SAAQ,qBAAqB;CAAG;AAE/E,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAQ5E,CAAC"}
+{"version":3,"file":"PayazaFormEditorFullPage.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/PayazaFormEditorFullPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAG7E,MAAM,WAAW,6BAA8B,SAAQ,qBAAqB;IAE1E,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAU5E,CAAC"}

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PayazaFormEditor } from './PayazaFormEditor';
+import { AlertModalProvider } from '../../components/ui/alert-modal';
 export const PayazaFormEditorFullPage = (props) => {
-    return (_jsx("div", { className: "fixed inset-0 z-50 flex flex-col bg-slate-50", children: _jsx("main", { className: "flex-1 overflow-hidden", children: _jsx(PayazaFormEditor, { ...props }) }) }));
+    return (_jsx(AlertModalProvider, { children: _jsx("div", { className: "fixed inset-0 z-50 flex flex-col bg-slate-50", children: _jsx("main", { className: "flex-1 overflow-hidden", children: _jsx(PayazaFormEditor, { ...props }) }) }) }));
 };

package/dist/editor/payaza-form/components/SectionField.js

@@ -15,7 +15,7 @@ export const SectionField = ({ label, description, children, defaultExpanded = f
     const isAllHidden = !visibility.desktop && !visibility.tablet && !visibility.mobile;
     return (_jsxs("div", { className: `mb-4 overflow-hidden rounded-2xl border transition-all duration-300 ${isExpanded
             ? 'border-slate-300 bg-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] scale-[1.01]'
-            : 'border-slate-200 bg-slate-50/50 hover:bg-white hover:border-slate-300 hover:shadow-[0_4px_20px_rgb(0,0,0,0.02)]'} ${isAllHidden ? 'opacity-60 grayscale' : 'opacity-100'}`, children: [_jsxs("div", { className: "flex items-center w-full relative", children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded(!isExpanded), className: "flex-1 flex items-center justify-between py-5 px-6 text-left transition-colors group", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `text-[12px] font-black tracking-tight transition-colors ${isExpanded ? 'text-slate-900' : 'text-slate-700'}`, children: label }), !isExpanded && (_jsxs("div", { className: "flex items-center gap-1.5 ml-1", children: [!isAllVisible && !isAllHidden && (_jsxs("div", { className: "flex items-center gap-1 p-1 bg-slate-100/50 rounded-md", children: [visibility.desktop && _jsx(Monitor, { size: 10, className: "text-slate-400" }), visibility.tablet && _jsx(Tablet, { size: 10, className: "text-slate-400" }), visibility.mobile && _jsx(Smartphone, { size: 10, className: "text-slate-400" })] })), isAllHidden && (_jsxs("div", { className: "flex items-center gap-1 px-1.5 py-0.5 bg-red-50 rounded-md", children: [_jsx(EyeOff, { size: 10, className: "text-red-400" }), _jsx("span", { className: "text-[8px] font-bold text-red-400 uppercase tracking-tighter", children: "Hidden" })] }))] }))] }), description && !isExpanded && (_jsx("span", { className: "text-[10px] text-slate-400 font-bold uppercase tracking-widest truncate max-w-[180px]", children: description }))] }), _jsx("div", { className: `transition-all duration-300 rounded-full p-1.5 ${isExpanded ? 'rotate-180 bg-slate-100 text-slate-900' : 'text-slate-300 group-hover:text-slate-500 bg-transparent'}`, children: _jsx(ChevronDown, { className: "w-4 h-4", strokeWidth: 2.5 }) })] }), !isExpanded && (_jsx("div", { className: "absolute right-[52px] top-1/2 -translate-y-1/2 flex items-center opacity-0 group-hover:opacity-100 transition-opacity pr-2 border-r border-slate-100 mr-2", children: _jsx("button", { onClick: (e) => {
+            : 'border-slate-200 bg-slate-50/50 hover:bg-white hover:border-slate-300/80 hover:shadow-sm'} ${isAllHidden ? 'opacity-60 grayscale' : 'opacity-100'}`, children: [_jsxs("div", { className: "flex items-center w-full relative", children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded(!isExpanded), className: "flex-1 flex items-center justify-between py-5 px-6 text-left transition-colors group", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `text-[11px] font-bold uppercase tracking-wider transition-colors ${isExpanded ? 'text-slate-900' : 'text-slate-900'}`, children: label }), !isExpanded && (_jsxs("div", { className: "flex items-center gap-1.5 ml-1", children: [!isAllVisible && !isAllHidden && (_jsxs("div", { className: "flex items-center gap-1 p-1 bg-slate-100/50 rounded-md", children: [visibility.desktop && _jsx(Monitor, { size: 10, className: "text-slate-400" }), visibility.tablet && _jsx(Tablet, { size: 10, className: "text-slate-400" }), visibility.mobile && _jsx(Smartphone, { size: 10, className: "text-slate-400" })] })), isAllHidden && (_jsxs("div", { className: "flex items-center gap-1 px-1.5 py-0.5 bg-red-50 rounded-md", children: [_jsx(EyeOff, { size: 10, className: "text-red-400" }), _jsx("span", { className: "text-[8px] font-bold text-red-400 uppercase tracking-tighter", children: "Hidden" })] }))] }))] }), description && !isExpanded && (_jsx("span", { className: "text-[10px] text-slate-400 font-bold uppercase tracking-widest truncate max-w-[180px]", children: description }))] }), _jsx("div", { className: `transition-all duration-300 rounded-full p-1.5 ${isExpanded ? 'rotate-180 bg-slate-100 text-slate-900' : 'text-slate-300 group-hover:text-slate-500 bg-transparent'}`, children: _jsx(ChevronDown, { className: "w-4 h-4", strokeWidth: 2.5 }) })] }), !isExpanded && (_jsx("div", { className: "absolute right-[52px] top-1/2 -translate-y-1/2 flex items-center opacity-0 group-hover:opacity-100 transition-opacity pr-2 border-r border-slate-100 mr-2", children: _jsx("button", { onClick: (e) => {
                                 e.stopPropagation();
                                 const nextHidden = !isAllHidden;
                                 setVisibility({

package/dist/editor/payaza-form/data-merger.d.ts

@@ -8,10 +8,14 @@ export declare function extractActualPageData(storeConfig: StoreConfig, pageId:
  * Merge requirement schema with actual layout data
  * Actual data takes precedence, but requirement provides structure and defaults
  */
-export declare function mergeRequirementWithActualData(requirement: OverlayLayoutJSON, storeConfig: StoreConfig, pageId: string): OverlayLayoutJSON;
+export declare function mergeRequirementWithActualData(requirement: OverlayLayoutJSON, storeConfig: StoreConfig, pageId: string, options?: {
+    actualDataPrecedence?: boolean;
+}): OverlayLayoutJSON;
 /**
  * Merge ALL pages in a requirement with actual data from StoreConfig
  * This ensures the StoreConfig is fully populated with defaults for all pages
  */
-export declare function mergeAllPagesWithActualData(requirement: OverlayLayoutJSON, storeConfig: StoreConfig): StoreConfig;
+export declare function mergeAllPagesWithActualData(requirement: OverlayLayoutJSON, storeConfig: StoreConfig, options?: {
+    actualDataPrecedence?: boolean;
+}): StoreConfig;
 //# sourceMappingURL=data-merger.d.ts.map

package/dist/editor/payaza-form/data-merger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-merger.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/data-merger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AA6GpD;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,WAAW,CAAC,EAAE,iBAAiB,GAC9B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAoLrB;AAED;;;GAGG;AACH,wBAAgB,8BAA8B,CAC5C,WAAW,EAAE,iBAAiB,EAC9B,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,GACb,iBAAiB,CAwFnB;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,WAAW,EAAE,iBAAiB,EAC9B,WAAW,EAAE,WAAW,GACvB,WAAW,CAWb"}
+{"version":3,"file":"data-merger.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/data-merger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AA6GpD;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,WAAW,CAAC,EAAE,iBAAiB,GAC9B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAoLrB;AAED;;;GAGG;AACH,wBAAgB,8BAA8B,CAC5C,WAAW,EAAE,iBAAiB,EAC9B,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,OAAO,GAAE;IAAE,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAAmC,GAC3E,iBAAiB,CAoGnB;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,WAAW,EAAE,iBAAiB,EAC9B,WAAW,EAAE,WAAW,EACxB,OAAO,GAAE;IAAE,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAAmC,GAC3E,WAAW,CAWb"}