payaza-storefront-layouts 1.0.39 → 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,CA+mB5D,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

@@ -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');
@@ -29,10 +37,78 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
     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) {
@@ -233,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;
@@ -245,17 +325,24 @@ 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();
@@ -263,8 +350,16 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
                 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)
@@ -283,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
@@ -300,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 {
@@ -318,7 +478,7 @@ 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 || [],

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"}

package/dist/editor/payaza-form/data-merger.js

@@ -281,7 +281,7 @@ export function extractActualPageData(storeConfig, pageId, requirement) {
  * Merge requirement schema with actual layout data
  * Actual data takes precedence, but requirement provides structure and defaults
  */
-export function mergeRequirementWithActualData(requirement, storeConfig, pageId) {
+export function mergeRequirementWithActualData(requirement, storeConfig, pageId, options = { actualDataPrecedence: true }) {
     // Find the page in requirement
     const requirementPage = requirement.pages.find(p => p.id === pageId);
     if (!requirementPage) {
@@ -292,60 +292,73 @@ export function mergeRequirementWithActualData(requirement, storeConfig, pageId)
     const actualPageData = extractActualPageData(storeConfig, pageId, requirement);
     // Create merged page data - start with requirement defaults
     const mergedPageData = { ...requirementPage.data };
-    // First, merge all sections that exist in requirement
-    for (const sectionKey in requirementPage.data) {
-        const requirementSection = requirementPage.data[sectionKey];
-        const actualSection = actualPageData[sectionKey];
-        if (actualSection) {
-            // Special handling for hero section to ensure sliders are preserved
-            if (sectionKey === 'hero' &&
-                typeof requirementSection === 'object' &&
-                typeof actualSection === 'object' &&
-                !Array.isArray(requirementSection) &&
-                !Array.isArray(actualSection)) {
-                // For hero section, start with actual data (it has the real values)
-                // Then merge requirement defaults for any missing properties
-                const mergedHero = {
-                    ...requirementSection, // Start with requirement defaults
-                    ...actualSection, // Override with actual data (takes precedence)
-                };
-                // Explicitly preserve sliders from actual data if they exist and have items
-                // Otherwise, use requirement sliders if actual has none
-                if (actualSection.sliders && Array.isArray(actualSection.sliders) && actualSection.sliders.length > 0) {
-                    mergedHero.sliders = [...actualSection.sliders]; // Deep copy
+    // If we want actual data to take precedence (normal loading)
+    if (options.actualDataPrecedence) {
+        // First, merge all sections that exist in requirement
+        for (const sectionKey in requirementPage.data) {
+            const requirementSection = requirementPage.data[sectionKey];
+            const actualSection = actualPageData[sectionKey];
+            if (actualSection) {
+                // Special handling for hero section to ensure sliders are preserved
+                if (sectionKey === 'hero' &&
+                    typeof requirementSection === 'object' &&
+                    typeof actualSection === 'object' &&
+                    !Array.isArray(requirementSection) &&
+                    !Array.isArray(actualSection)) {
+                    // For hero section, start with actual data (it has the real values)
+                    // Then merge requirement defaults for any missing properties
+                    const mergedHero = {
+                        ...requirementSection, // Start with requirement defaults
+                        ...actualSection, // Override with actual data (takes precedence)
+                    };
+                    // Explicitly preserve sliders from actual data if they exist and have items
+                    // Otherwise, use requirement sliders if actual has none
+                    if (actualSection.sliders && Array.isArray(actualSection.sliders) && actualSection.sliders.length > 0) {
+                        mergedHero.sliders = [...actualSection.sliders]; // Deep copy
+                    }
+                    else if (requirementSection.sliders && Array.isArray(requirementSection.sliders)) {
+                        // Use requirement sliders if actual has none
+                        mergedHero.sliders = [...requirementSection.sliders];
+                    }
+                    mergedPageData[sectionKey] = mergedHero;
                 }
-                else if (requirementSection.sliders && Array.isArray(requirementSection.sliders)) {
-                    // Use requirement sliders if actual has none
-                    mergedHero.sliders = [...requirementSection.sliders];
+                else if (Array.isArray(requirementSection) && Array.isArray(actualSection)) {
+                    // Merge arrays
+                    mergedPageData[sectionKey] = mergeArrays(requirementSection, actualSection);
+                }
+                else if (typeof requirementSection === 'object' &&
+                    requirementSection !== null &&
+                    !Array.isArray(requirementSection) &&
+                    typeof actualSection === 'object' &&
+                    actualSection !== null &&
+                    !Array.isArray(actualSection)) {
+                    // Deep merge objects
+                    mergedPageData[sectionKey] = deepMerge(requirementSection, actualSection);
+                }
+                else {
+                    // Use actual value
+                    mergedPageData[sectionKey] = actualSection;
                 }
-                mergedPageData[sectionKey] = mergedHero;
-            }
-            else if (Array.isArray(requirementSection) && Array.isArray(actualSection)) {
-                // Merge arrays
-                mergedPageData[sectionKey] = mergeArrays(requirementSection, actualSection);
-            }
-            else if (typeof requirementSection === 'object' &&
-                requirementSection !== null &&
-                !Array.isArray(requirementSection) &&
-                typeof actualSection === 'object' &&
-                actualSection !== null &&
-                !Array.isArray(actualSection)) {
-                // Deep merge objects
-                mergedPageData[sectionKey] = deepMerge(requirementSection, actualSection);
             }
-            else {
-                // Use actual value
-                mergedPageData[sectionKey] = actualSection;
+            // If no actual section, keep requirement default
+        }
+        // Also add any sections from actual data that don't exist in requirement
+        // This ensures we don't lose any sections that exist in the store but not in requirement
+        for (const sectionKey in actualPageData) {
+            if (!mergedPageData[sectionKey] && actualPageData[sectionKey]) {
+                // Section exists in actual data but not in requirement - add it
+                mergedPageData[sectionKey] = actualPageData[sectionKey];
             }
         }
-        // If no actual section, keep requirement default
     }
-    // Also add any sections from actual data that don't exist in requirement
-    // This ensures we don't lose any sections that exist in the store but not in requirement
-    for (const sectionKey in actualPageData) {
-        if (!mergedPageData[sectionKey] && actualPageData[sectionKey]) {
-            // Section exists in actual data but not in requirement - add it
-            mergedPageData[sectionKey] = actualPageData[sectionKey];
+    else {
+        // AI Precedence mode: requirementPage.data (AI data) already contains the updates.
+        // We just want to make sure we don't lose sections that WEREN'T updated by AI
+        // but exist in actualPageData.
+        for (const sectionKey in actualPageData) {
+            if (mergedPageData[sectionKey] === undefined && actualPageData[sectionKey]) {
+                mergedPageData[sectionKey] = actualPageData[sectionKey];
+            }
         }
     }
     // Create merged page - preserve schema from requirement
@@ -366,12 +379,12 @@ export function mergeRequirementWithActualData(requirement, storeConfig, pageId)
  * Merge ALL pages in a requirement with actual data from StoreConfig
  * This ensures the StoreConfig is fully populated with defaults for all pages
  */
-export function mergeAllPagesWithActualData(requirement, storeConfig) {
+export function mergeAllPagesWithActualData(requirement, storeConfig, options = { actualDataPrecedence: true }) {
     let currentStoreConfig = { ...storeConfig };
     // Iterate through all pages in the requirement and merge them one by one
     // transformToStoreConfig handles the projection back to StoreConfig
     requirement.pages.forEach(page => {
-        const mergedLayout = mergeRequirementWithActualData(requirement, currentStoreConfig, page.id);
+        const mergedLayout = mergeRequirementWithActualData(requirement, currentStoreConfig, page.id, options);
         currentStoreConfig = transformToStoreConfig(mergedLayout, page.id, currentStoreConfig);
     });
     return currentStoreConfig;

package/dist/editor/shared/AIGenerateModal.js

@@ -53,7 +53,7 @@ export const AIGenerateModal = ({ isOpen, onClose, onGenerate, initialContext, i
                                                 duration: 2,
                                                 repeat: Infinity,
                                                 ease: "easeInOut"
-                                            }, className: "w-full h-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500" }) }), _jsx("p", { className: "text-[10px] text-slate-400 font-bold uppercase tracking-widest animate-pulse mt-4", children: "This usually takes about 5-10 seconds" })] })] })) }), _jsxs("div", { className: "px-8 py-6 border-b border-slate-100 flex items-center justify-between bg-slate-50/50", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-12 h-12 bg-slate-900 rounded-2xl flex items-center justify-center shadow-lg shadow-slate-200", children: _jsx(Sparkles, { className: "w-6 h-6 text-white", strokeWidth: 2.5 }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-xl font-black text-slate-900 tracking-tight", children: "AI Magic Generator" }), _jsx("p", { className: "text-[11px] font-bold text-slate-400 uppercase tracking-widest mt-0.5", children: "Powered by Gemini AI" })] })] }), _jsx("button", { onClick: onClose, className: "w-10 h-10 flex items-center justify-center rounded-xl hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-all", children: _jsx(X, { size: 20, strokeWidth: 2.5 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-8", children: [_jsx("div", { className: "bg-blue-50/50 border border-blue-100 rounded-2xl p-5 mb-8", children: _jsxs("div", { className: "flex gap-4", children: [_jsx("div", { className: "w-10 h-10 bg-blue-100 rounded-xl flex-shrink-0 flex items-center justify-center", children: _jsx(Sparkles, { className: "w-5 h-5 text-blue-600" }) }), _jsx("p", { className: "text-[13px] text-blue-800 font-medium leading-relaxed", children: hasDefaultContext
+                                            }, className: "w-full h-full                     bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500" }) }), _jsx("p", { className: "text-[10px] text-slate-400 font-bold uppercase tracking-widest animate-pulse mt-4", children: "This may take a moment while AI crafts your store" })] })] })) }), _jsxs("div", { className: "px-8 py-6 border-b border-slate-100 flex items-center justify-between bg-slate-50/50", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-12 h-12 bg-slate-900 rounded-2xl flex items-center justify-center shadow-lg shadow-slate-200", children: _jsx(Sparkles, { className: "w-6 h-6 text-white", strokeWidth: 2.5 }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-xl font-black text-slate-900 tracking-tight", children: "AI Magic Generator" }), _jsx("p", { className: "text-[11px] font-bold text-slate-400 uppercase tracking-widest mt-0.5", children: "Powered by Gemini AI" })] })] }), _jsx("button", { onClick: onClose, className: "w-10 h-10 flex items-center justify-center rounded-xl hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-all", children: _jsx(X, { size: 20, strokeWidth: 2.5 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-8", children: [_jsx("div", { className: "bg-blue-50/50 border border-blue-100 rounded-2xl p-5 mb-8", children: _jsxs("div", { className: "flex gap-4", children: [_jsx("div", { className: "w-10 h-10 bg-blue-100 rounded-xl flex-shrink-0 flex items-center justify-center", children: _jsx(Sparkles, { className: "w-5 h-5 text-blue-600" }) }), _jsx("p", { className: "text-[13px] text-blue-800 font-medium leading-relaxed", children: hasDefaultContext
                                             ? "We've detected your store details. The AI will use these and your assets to populate your layout. You can add more context below."
                                             : "Our AI will use your store name, description, and assets to automatically populate your entire layout with high-quality content." })] }) }), _jsxs("form", { id: "ai-generate-form", onSubmit: handleSubmit, className: "space-y-6", children: [!hasDefaultContext && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "text-[11px] font-black text-slate-900 uppercase tracking-widest flex items-center gap-2", children: [_jsx(Store, { size: 14, className: "text-slate-400" }), "Store Name"] }), _jsx("input", { type: "text", value: context.storeName, onChange: (e) => setContext({ ...context, storeName: e.target.value }), placeholder: "e.g. Fashion Hub", className: "w-full h-12 px-4 bg-slate-50 border border-slate-200 rounded-xl text-sm font-bold text-slate-700 focus:outline-none focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900/20 transition-all", required: true })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "text-[11px] font-black text-slate-900 uppercase tracking-widest flex items-center gap-2", children: [_jsx(FileText, { size: 14, className: "text-slate-400" }), "Store Description"] }), _jsx("textarea", { value: context.storeDescription, onChange: (e) => setContext({ ...context, storeDescription: e.target.value }), placeholder: "Briefly describe what your store sells...", rows: 3, className: "w-full p-4 bg-slate-50 border border-slate-200 rounded-xl text-sm font-bold text-slate-700 focus:outline-none focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900/20 transition-all resize-none", required: true })] })] })), _jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "text-[11px] font-black text-slate-900 uppercase tracking-widest flex items-center gap-2", children: [_jsx(PlusCircle, { size: 14, className: "text-slate-400" }), "Additional Context (Optional)"] }), _jsx("textarea", { value: context.additionalContext, onChange: (e) => setContext({ ...context, additionalContext: e.target.value }), placeholder: "e.g. Target audience, preferred color scheme, specific sections to highlight...", rows: 4, className: "w-full p-4 bg-slate-50 border border-slate-200 rounded-xl text-sm font-bold text-slate-700 focus:outline-none focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900/20 transition-all resize-none" })] }), context.assets && context.assets.length > 0 && (_jsxs("div", { className: "flex items-center gap-3 p-4 bg-green-50 rounded-2xl border border-green-100", children: [_jsx(ImageIcon, { className: "w-5 h-5 text-green-600" }), _jsxs("div", { className: "flex-1", children: [_jsxs("p", { className: "text-[11px] font-black text-slate-900 uppercase tracking-tight", children: [context.assets.length, " Assets Detected"] }), _jsx("p", { className: "text-[10px] text-slate-500 font-bold uppercase tracking-widest", children: "AI will prioritize using your uploaded images" })] })] })), _jsxs("div", { className: "flex items-center gap-3 p-4 bg-slate-50 rounded-2xl border border-slate-100", children: [_jsx(Sparkles, { className: "w-5 h-5 text-slate-400" }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-[11px] font-black text-slate-900 uppercase tracking-tight", children: "Auto-Sourcing Enabled" }), _jsx("p", { className: "text-[10px] text-slate-400 font-bold uppercase tracking-widest", children: "AI will source high-quality images for missing assets" })] })] })] })] }), _jsxs("div", { className: "px-8 py-6 border-t border-slate-100 bg-slate-50/50 flex gap-4", children: [_jsx("button", { onClick: onClose, className: "flex-1 h-12 rounded-2xl border border-slate-200 bg-white font-black text-[12px] uppercase tracking-widest text-slate-600 hover:bg-slate-50 transition-all active:scale-[0.98]", disabled: isGenerating, children: "Cancel" }), _jsx("button", { type: "submit", form: "ai-generate-form", className: "flex-[2] h-12 rounded-2xl bg-slate-900 font-black text-[12px] uppercase tracking-widest text-white hover:bg-black transition-all shadow-xl shadow-slate-200 flex items-center justify-center gap-3 active:scale-[0.98] disabled:opacity-70", disabled: isGenerating, children: isGenerating ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), "Generating Magic..."] })) : (_jsxs(_Fragment, { children: [_jsx(Sparkles, { className: "w-4 h-4" }), "Generate Layout"] })) })] })] }) }));
 };

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

@@ -8,6 +8,13 @@ interface EditorHeaderProps {
     onSave: () => void;
     onPublish?: () => void;
     onBack?: () => void;
+    onBackToSettings?: () => void;
+    onOpenAssets?: () => void;
+    onBackToTheme?: () => void;
+    onUndo?: () => void;
+    onRedo?: () => void;
+    canUndo?: boolean;
+    canRedo?: boolean;
     onGenerateAI?: () => void;
     isGeneratingAI?: boolean;
     pages: {

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

@@ -1 +1 @@
-{"version":3,"file":"EditorHeader.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/EditorHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAsB3D,UAAU,iBAAiB;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACtC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC3C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,KAAK,IAAI,CAAC;IACnE,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAWD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyQpD,CAAC"}
+{"version":3,"file":"EditorHeader.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/EditorHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AA+ExE,UAAU,iBAAiB;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACtC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC3C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,KAAK,IAAI,CAAC;IACnE,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAWD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwWpD,CAAC"}

package/dist/editor/shared/EditorHeader.js

@@ -1,6 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useEffect, useState } from 'react';
-import { ChevronLeft, ChevronRight, Layout, Save, Smartphone, Monitor, Tablet, Eye, Home, ShoppingBag, ShoppingCart, FileText, Send, Sparkles } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronLeft, Layout, Save, Smartphone, Monitor, Tablet, ChevronDown, Home, ShoppingBag, ShoppingCart, FileText, Settings, Undo2, Redo2, Send, Sparkles, Image as ImageIcon, Palette, Check } from 'lucide-react';
+const Tooltip = ({ text, children }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const timeoutRef = useRef(null);
+    const showTooltip = () => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setIsVisible(true), 400);
+    };
+    const hideTooltip = () => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        setIsVisible(false);
+    };
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, []);
+    return (_jsxs("div", { className: "relative flex items-center justify-center", onMouseEnter: showTooltip, onMouseLeave: hideTooltip, children: [children, _jsx(AnimatePresence, { children: isVisible && (_jsx(motion.div, { initial: { opacity: 0, y: 8, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 8, scale: 0.95 }, transition: { duration: 0.15, ease: [0.23, 1, 0.32, 1] }, className: "absolute top-full pt-2 left-1/2 -translate-x-1/2 z-[9999] pointer-events-none", children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "bg-slate-900 text-white text-[10px] font-bold uppercase tracking-wider px-2.5 py-1.5 rounded-md shadow-2xl border border-white/10 whitespace-nowrap", children: text }), _jsx("div", { className: "absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-slate-900 rotate-45 border-l border-t border-white/10", style: { zIndex: -1 } })] }) })) })] }));
+};
 const getPageIcon = (pageId) => {
     switch (pageId) {
         case 'home': return _jsx(Home, { className: "w-3.5 h-3.5" });
@@ -9,7 +31,8 @@ const getPageIcon = (pageId) => {
         default: return _jsx(FileText, { className: "w-3.5 h-3.5" });
     }
 };
-export const EditorHeader = ({ layoutName, storeName, activePage, isSaving, isPublishing, onSave, onPublish, onBack, onGenerateAI, isGeneratingAI, pages, onPageSwitch, viewMode = 'desktop', onViewModeChange, editorType }) => {
+export const EditorHeader = ({ layoutName, storeName, activePage, isSaving, isPublishing, onSave, onPublish, onBack, onBackToSettings, onOpenAssets, onBackToTheme, onUndo, onRedo, canUndo, canRedo, onGenerateAI, isGeneratingAI, pages, onPageSwitch, viewMode = 'desktop', onViewModeChange, editorType }) => {
+    const [isPageSwitcherOpen, setIsPageSwitcherOpen] = useState(false);
     const scrollContainerRef = useRef(null);
     const [canScrollLeft, setCanScrollLeft] = useState(false);
     const [canScrollRight, setCanScrollRight] = useState(false);
@@ -20,6 +43,20 @@ export const EditorHeader = ({ layoutName, storeName, activePage, isSaving, isPu
         setCanScrollLeft(container.scrollLeft > 0);
         setCanScrollRight(container.scrollLeft < container.scrollWidth - container.clientWidth - 1);
     };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            if (!target.closest('.page-switcher-container')) {
+                setIsPageSwitcherOpen(false);
+            }
+        };
+        if (isPageSwitcherOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isPageSwitcherOpen]);
     useEffect(() => {
         checkScrollability();
         const container = scrollContainerRef.current;
@@ -64,13 +101,12 @@ export const EditorHeader = ({ layoutName, storeName, activePage, isSaving, isPu
             : container.scrollLeft + scrollAmount;
         container.scrollTo({ left: newScrollLeft, behavior: 'smooth' });
     };
-    return (_jsxs("div", { className: "border-b border-slate-200 bg-white sticky top-0 z-[100] h-16 shadow-[0_2px_8px_rgba(0,0,0,0.04)] font-sans", children: [_jsxs("div", { className: "flex items-center justify-between px-6 h-full w-full mx-auto gap-4", children: [_jsxs("div", { className: "flex items-center flex-shrink-0", children: [onBack && (_jsx("button", { onClick: onBack, className: "h-10 w-10 flex items-center justify-center rounded-xl hover:bg-slate-50 border border-slate-100 transition-all active:scale-95 shadow-sm", children: _jsx(ChevronLeft, { className: "h-5 w-5 text-slate-600", strokeWidth: 2.5 }) })), _jsx("div", { className: "h-8 w-px bg-slate-100 mx-3" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-10 h-10 bg-slate-900 flex items-center justify-center rounded-xl shadow-lg shadow-slate-200", children: _jsx(Layout, { className: "w-5 h-5 text-white", strokeWidth: 2.5 }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("h1", { className: "text-[12px] font-black leading-tight tracking-tight uppercase text-slate-900 whitespace-nowrap", children: storeName || layoutName }), _jsxs("div", { className: "flex items-center gap-1.5 mt-0.5", children: [_jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.5)] animate-pulse" }), _jsx("span", { className: "text-[9px] uppercase font-black text-slate-400 tracking-[0.15em]", children: "Live Studio" })] })] })] })] }), _jsxs("div", { className: "flex items-center gap-4 flex-1 min-w-0 justify-center max-w-[500px]", children: [_jsxs("div", { className: "flex items-center bg-slate-50/80 backdrop-blur-sm rounded-xl p-1 border border-slate-200/60 relative w-full max-w-[380px] shadow-inner", children: [canScrollLeft && (_jsx("button", { onClick: () => scroll('left'), className: "absolute left-1 z-10 h-6 w-6 flex items-center justify-center rounded-lg bg-white border border-slate-200 shadow-md hover:bg-slate-50 transition-all text-slate-600 hover:text-slate-900", "aria-label": "Scroll left", children: _jsx(ChevronLeft, { className: "w-3 h-3", strokeWidth: 3 }) })), _jsx("div", { ref: scrollContainerRef, className: "flex items-center gap-0.5 overflow-x-auto scroll-smooth flex-1 min-w-0 no-scrollbar", style: {
-                                            scrollbarWidth: 'none',
-                                            msOverflowStyle: 'none',
-                                            WebkitOverflowScrolling: 'touch'
-                                        }, children: _jsx("div", { className: "flex items-center gap-1 px-6", children: pages.map((page) => (_jsxs("button", { "data-page-id": page.id, onClick: () => onPageSwitch(page.id), className: `flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[10px] font-black transition-all whitespace-nowrap flex-shrink-0 ${activePage === page.id
-                                                    ? 'text-slate-900 bg-white shadow-sm border border-slate-100'
-                                                    : 'text-slate-400 hover:text-slate-600 hover:bg-white/50'}`, children: [_jsx("div", { className: activePage === page.id ? 'text-slate-900' : 'text-slate-300', children: getPageIcon(page.id) }), page.name] }, page.id))) }) }), canScrollRight && (_jsx("button", { onClick: () => scroll('right'), className: "absolute right-1.5 z-10 h-6 w-6 flex items-center justify-center rounded-lg bg-white border border-slate-200 shadow-md hover:bg-slate-50 transition-all text-slate-600 hover:text-slate-900", "aria-label": "Scroll right", children: _jsx(ChevronRight, { className: "w-3 h-3", strokeWidth: 3 }) }))] }), _jsx("div", { className: "h-4 w-px bg-slate-200" }), _jsxs("div", { className: "flex items-center bg-slate-50 rounded-lg p-0.5 border border-slate-100 shadow-sm", children: [_jsx("button", { onClick: () => onViewModeChange?.('desktop'), className: `p-1.5 rounded-md transition-all ${viewMode === 'desktop' ? 'bg-white shadow-sm text-slate-900 border border-slate-100' : 'text-slate-400 hover:text-slate-600'}`, title: "Desktop View", children: _jsx(Monitor, { size: 14, strokeWidth: 2.5 }) }), _jsx("button", { onClick: () => onViewModeChange?.('tablet'), className: `p-1.5 rounded-md transition-all ${viewMode === 'tablet' ? 'bg-white shadow-sm text-slate-900 border border-slate-100' : 'text-slate-400 hover:text-slate-600'}`, title: "Tablet View", children: _jsx(Tablet, { size: 14, strokeWidth: 2.5 }) }), _jsx("button", { onClick: () => onViewModeChange?.('mobile'), className: `p-1.5 rounded-md transition-all ${viewMode === 'mobile' ? 'bg-white shadow-sm text-slate-900 border border-slate-100' : 'text-slate-400 hover:text-slate-600'}`, title: "Mobile View", children: _jsx(Smartphone, { size: 14, strokeWidth: 2.5 }) })] })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [onGenerateAI && (_jsx("button", { onClick: onGenerateAI, disabled: isGeneratingAI, title: "AI Generate", className: "h-9 w-9 bg-gradient-to-r from-indigo-600 to-violet-600 text-white rounded-xl font-black flex items-center justify-center hover:from-indigo-700 hover:to-violet-700 transition-all shadow-md shadow-indigo-100 active:scale-[0.98] disabled:opacity-50", children: isGeneratingAI ? (_jsx("span", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" })) : (_jsx(Sparkles, { className: "w-3.5 h-3.5" })) })), _jsxs("button", { className: "h-9 px-4 flex items-center gap-2 rounded-xl text-slate-600 hover:bg-slate-50 transition-all font-black text-[9px] uppercase tracking-widest border border-transparent hover:border-slate-200", children: [_jsx(Eye, { className: "w-3.5 h-3.5", strokeWidth: 2.5 }), "Preview"] }), _jsxs("button", { onClick: onSave, disabled: isSaving, className: "h-9 px-4 bg-white text-slate-900 border border-slate-200 rounded-xl font-black text-[9px] uppercase tracking-[0.1em] flex items-center gap-2 hover:bg-slate-50 hover:shadow-md hover:shadow-slate-100 transition-all active:scale-[0.98] disabled:opacity-50", children: [isSaving ? (_jsx("span", { className: "w-3.5 h-3.5 border-2 border-slate-200 border-t-slate-800 rounded-full animate-spin" })) : (_jsx(Save, { className: "w-3.5 h-3.5", strokeWidth: 2.5 })), "Save Draft"] }), onPublish && (_jsxs("button", { onClick: onPublish, disabled: isPublishing, className: "h-9 px-5 bg-slate-900 text-white rounded-xl font-black text-[9px] uppercase tracking-[0.12em] flex items-center gap-2 hover:bg-black transition-all shadow-lg shadow-slate-200 active:scale-[0.98] disabled:opacity-50", children: [isPublishing ? (_jsx("span", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" })) : (_jsx(Send, { className: "w-3.5 h-3.5", strokeWidth: 2.5 })), "Publish"] }))] })] }), _jsx("style", { dangerouslySetInnerHTML: { __html: `
+    return (_jsxs("div", { className: "border-b border-slate-200 bg-white sticky top-0 z-[100] h-16 shadow-[0_2px_8px_rgba(0,0,0,0.04)] font-sans", children: [_jsxs("div", { className: "flex items-center justify-between px-6 h-full w-full mx-auto gap-4", children: [_jsxs("div", { className: "flex items-center flex-shrink-0 gap-2", children: [onBack && (_jsx(Tooltip, { text: "Go Back", children: _jsx("button", { onClick: onBack, className: "h-9 w-9 flex items-center justify-center rounded-xl hover:bg-slate-50 border border-slate-100 transition-all active:scale-95 shadow-sm", children: _jsx(ChevronLeft, { className: "h-4 w-4 text-slate-600", strokeWidth: 2.5 }) }) })), _jsx("div", { className: "h-8 w-px bg-slate-100 mx-1" }), _jsxs("div", { className: "flex items-center gap-3 ml-1", children: [_jsx(Tooltip, { text: "Layout Info", children: _jsx("div", { className: "w-10 h-10 bg-slate-900 flex items-center justify-center rounded-xl shadow-lg shadow-slate-200", children: _jsx(Layout, { className: "w-5 h-5 text-white", strokeWidth: 2.5 }) }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("h1", { className: "text-[12px] font-black leading-tight tracking-tight uppercase text-slate-900 whitespace-nowrap", children: storeName || layoutName }), _jsxs("div", { className: "flex items-center gap-1.5 mt-0.5", children: [_jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.5)] animate-pulse" }), _jsx("span", { className: "text-[9px] uppercase font-black text-slate-400 tracking-[0.15em]", children: "Live Studio" })] })] })] })] }), _jsx("div", { className: "flex items-center gap-4 flex-1 min-w-0 justify-center", children: _jsxs("div", { className: "relative page-switcher-container", children: [_jsxs("button", { onClick: () => setIsPageSwitcherOpen(!isPageSwitcherOpen), className: "flex items-center gap-2 px-4 py-2 bg-slate-50 hover:bg-slate-100 border border-slate-200 rounded-xl transition-all group", children: [_jsx("div", { className: "text-slate-900", children: getPageIcon(activePage) }), _jsx("span", { className: "text-[10px] font-black uppercase tracking-widest text-slate-900", children: pages.find(p => p.id === activePage)?.name || activePage }), _jsx(ChevronDown, { className: `w-3.5 h-3.5 text-slate-400 transition-transform duration-200 ${isPageSwitcherOpen ? 'rotate-180' : ''}`, strokeWidth: 3 })] }), _jsx(AnimatePresence, { children: isPageSwitcherOpen && (_jsxs(motion.div, { initial: { opacity: 0, y: 10, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 10, scale: 0.95 }, className: "absolute top-full left-0 mt-2 w-56 bg-white border border-slate-200 rounded-2xl shadow-2xl z-[200] p-2", children: [_jsx("div", { className: "px-3 py-2 border-b border-slate-50 mb-1", children: _jsx("span", { className: "text-[9px] font-black uppercase tracking-[0.2em] text-slate-400", children: "Switch Page" }) }), _jsx("div", { className: "space-y-0.5", children: pages.map((page) => (_jsxs("button", { onClick: () => {
+                                                        onPageSwitch(page.id);
+                                                        setIsPageSwitcherOpen(false);
+                                                    }, className: `w-full flex items-center justify-between px-3 py-2.5 rounded-xl transition-all ${activePage === page.id
+                                                        ? 'bg-slate-900 text-white shadow-lg shadow-slate-200'
+                                                        : 'text-slate-600 hover:bg-slate-50'}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: activePage === page.id ? 'text-white' : 'text-slate-400', children: getPageIcon(page.id) }), _jsx("span", { className: `text-[10px] font-black uppercase tracking-widest`, children: page.name })] }), activePage === page.id && _jsx(Check, { className: "w-3.5 h-3.5", strokeWidth: 3 })] }, page.id))) })] })) })] }) }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsxs("div", { className: "flex items-center mr-2", children: [_jsx(Tooltip, { text: "Desktop View", children: _jsx("button", { onClick: () => onViewModeChange?.('desktop'), className: `p-2 rounded-xl transition-all ${viewMode === 'desktop' ? 'bg-slate-100 text-slate-900' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50'}`, children: _jsx(Monitor, { size: 18, strokeWidth: 2.5 }) }) }), _jsx(Tooltip, { text: "Tablet View", children: _jsx("button", { onClick: () => onViewModeChange?.('tablet'), className: `p-2 rounded-xl transition-all ${viewMode === 'tablet' ? 'bg-slate-100 text-slate-900' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50'}`, children: _jsx(Tablet, { size: 18, strokeWidth: 2.5 }) }) }), _jsx(Tooltip, { text: "Mobile View", children: _jsx("button", { onClick: () => onViewModeChange?.('mobile'), className: `p-2 rounded-xl transition-all ${viewMode === 'mobile' ? 'bg-slate-100 text-slate-900' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50'}`, children: _jsx(Smartphone, { size: 18, strokeWidth: 2.5 }) }) })] }), _jsx("div", { className: "h-8 w-px bg-slate-100 mx-1" }), _jsxs("div", { className: "flex items-center mr-2", children: [_jsx(Tooltip, { text: "Undo (Ctrl+Z)", children: _jsx("button", { onClick: onUndo, disabled: !canUndo, className: `p-2 rounded-xl transition-all ${canUndo ? 'text-slate-600 hover:bg-slate-50 hover:text-slate-900' : 'text-slate-200 cursor-not-allowed'}`, children: _jsx(Undo2, { size: 18, strokeWidth: 2.5 }) }) }), _jsx(Tooltip, { text: "Redo (Ctrl+Y)", children: _jsx("button", { onClick: onRedo, disabled: !canRedo, className: `p-2 rounded-xl transition-all ${canRedo ? 'text-slate-600 hover:bg-slate-50 hover:text-slate-900' : 'text-slate-200 cursor-not-allowed'}`, children: _jsx(Redo2, { size: 18, strokeWidth: 2.5 }) }) })] }), _jsx("div", { className: "h-8 w-px bg-slate-100 mx-1" }), _jsxs("div", { className: "flex items-center mr-2", children: [onBackToSettings && (_jsx(Tooltip, { text: "Store Settings", children: _jsx("button", { onClick: onBackToSettings, className: "p-2 rounded-xl text-slate-600 hover:text-slate-900 hover:bg-slate-50 transition-all", children: _jsx(Settings, { size: 18, strokeWidth: 2.5 }) }) })), onOpenAssets && (_jsx(Tooltip, { text: "Assets Library", children: _jsx("button", { onClick: onOpenAssets, className: "p-2 rounded-xl text-slate-600 hover:text-slate-900 hover:bg-slate-50 transition-all", children: _jsx(ImageIcon, { size: 18, strokeWidth: 2.5 }) }) })), onBackToTheme && (_jsx(Tooltip, { text: "Theme Selector", children: _jsx("button", { onClick: onBackToTheme, className: "p-2 rounded-xl text-slate-600 hover:text-slate-900 hover:bg-slate-50 transition-all", children: _jsx(Palette, { size: 18, strokeWidth: 2.5 }) }) }))] }), _jsx("div", { className: "h-8 w-px bg-slate-100 mx-1" }), onGenerateAI && (_jsx(Tooltip, { text: "AI Magic Generator", children: _jsx("button", { onClick: onGenerateAI, disabled: isGeneratingAI, className: "h-9 w-9 bg-gradient-to-r from-indigo-600 to-violet-600 text-white rounded-xl font-black flex items-center justify-center hover:from-indigo-700 hover:to-violet-700 transition-all shadow-md shadow-indigo-100 active:scale-[0.98] disabled:opacity-50", children: isGeneratingAI ? (_jsx("span", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" })) : (_jsx(Sparkles, { className: "w-3.5 h-3.5" })) }) })), _jsx(Tooltip, { text: "Save Changes", children: _jsxs("button", { onClick: onSave, disabled: isSaving, className: "h-9 px-4 bg-white text-slate-900 border border-slate-200 rounded-xl font-black text-[9px] uppercase tracking-[0.1em] flex items-center gap-2 hover:bg-slate-50 hover:shadow-md hover:shadow-slate-100 transition-all active:scale-[0.98] disabled:opacity-50", children: [isSaving ? (_jsx("span", { className: "w-3.5 h-3.5 border-2 border-slate-200 border-t-slate-800 rounded-full animate-spin" })) : (_jsx(Save, { className: "w-3.5 h-3.5", strokeWidth: 2.5 })), "Save Draft"] }) }), _jsx(Tooltip, { text: !onPublish ? "No changes to publish" : "Publish to Store", children: _jsxs("button", { onClick: onPublish, disabled: isPublishing || !onPublish, className: "h-9 px-5 bg-slate-900 text-white rounded-xl font-black text-[9px] uppercase tracking-[0.12em] flex items-center gap-2 hover:bg-black transition-all shadow-lg shadow-slate-200 active:scale-[0.98] disabled:opacity-50 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none", children: [isPublishing ? (_jsx("span", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" })) : (_jsx(Send, { className: "w-3.5 h-3.5", strokeWidth: 2.5 })), "Publish"] }) })] })] }), _jsx("style", { dangerouslySetInnerHTML: { __html: `
         .overflow-x-auto::-webkit-scrollbar {
           display: none;
         }

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

@@ -1 +1 @@
-{"version":3,"file":"IframePreview.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/IframePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGpD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,WAAW,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC1C,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoLtD,CAAC"}
+{"version":3,"file":"IframePreview.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/IframePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGpD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,WAAW,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC1C,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwLtD,CAAC"}

package/dist/editor/shared/IframePreview.js

@@ -70,7 +70,11 @@ export const IframePreview = ({ layoutId, config, activePageId, viewMode, select
         // In standalone store-layout-preview, it's just /preview/
         let basePath = '/preview';
         if (typeof window !== 'undefined') {
-            if (window.location.pathname.includes('/dashboard/layout-content')) {
+            const pathname = window.location.pathname;
+            // Check for any dashboard route that uses the layout-content preview system
+            if (pathname.includes('/dashboard/layout-content') ||
+                pathname.includes('/dashboard/store-setup-v3') ||
+                pathname.includes('/dashboard/store-setup')) {
                 basePath = '/dashboard/layout-content/preview';
             }
         }

package/dist/editor/types.d.ts

@@ -70,6 +70,18 @@ export interface FullPageEditorProps extends BaseEditorProps {
      * Callback triggered when the back button is clicked
      */
     onBack?: () => void;
+    /**
+     * Callback triggered to go back to store settings step
+     */
+    onBackToSettings?: () => void;
+    /**
+     * Callback triggered to open assets library
+     */
+    onOpenAssets?: () => void;
+    /**
+     * Callback triggered to go back to theme selector set
+     */
+    onBackToTheme?: () => void;
     /**
      * Optional store name passed from host app
      */

package/dist/editor/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/editor/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAClC;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACnC;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,GAAG,EAAE,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/editor/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAClC;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACnC;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,GAAG,EAAE,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC"}

package/dist/layouts/shared/components/StoreHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoreHeader.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/components/StoreHeader.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AA4BvD,UAAU,gBAAgB;IACxB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,aAAiB,EAAE,EAAE,gBAAgB,2CAkb9F"}
+{"version":3,"file":"StoreHeader.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/components/StoreHeader.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AA4BvD,UAAU,gBAAgB;IACxB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,aAAiB,EAAE,EAAE,gBAAgB,2CA6d9F"}

package/dist/layouts/shared/components/StoreHeader.js

@@ -72,14 +72,31 @@ export function StoreHeader({ storeConfig: initialConfig, cartItemCount = 0 }) {
     const headerBg = isDarkTheme
         ? scrolled ? 'rgba(0, 0, 0, 0.9)' : 'rgba(0, 0, 0, 0.7)'
         : scrolled ? 'rgba(255, 255, 255, 0.98)' : 'rgba(255, 255, 255, 0.9)';
-    return (_jsxs(_Fragment, { children: [_jsx("header", { "data-section": "header", className: cn("sticky top-0 z-[60] w-full transition-all duration-500 backdrop-blur-xl border-b", scrolled ? "shadow-lg border-gray-100 dark:border-white/5 py-1" : "border-transparent py-2.5"), style: { backgroundColor: headerBg }, children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "relative flex h-16 items-center justify-between", children: [_jsx("div", { className: "flex items-center flex-shrink-0 z-20", children: _jsxs(Link, { href: `/${storeConfig.slug}`, className: "flex items-center gap-3 group", children: [_jsx(StoreLogo, { storeConfig: storeConfig, className: "h-10 w-10 transition-transform duration-500 group-hover:scale-105", alt: storeConfig.name }), !getLogoUrl(storeConfig) && (_jsx("span", { className: cn("text-xl font-bold tracking-tight transition-colors hidden sm:block", isDarkTheme ? "text-white" : "text-gray-900"), children: storeConfig.name }))] }) }), _jsxs("nav", { className: "hidden lg:flex items-center gap-1 absolute left-1/2 -translate-x-1/2", children: [storeConfig.navigation.main.map((item, index) => {
-                                        const Icon = item.icon ? (item.icon === 'BookOpen' ? BookOpen : item.icon === 'GraduationCap' ? GraduationCap : item.icon === 'Info' ? Info : getNavIcon(item.label)) : getNavIcon(item.label);
-                                        return (_jsxs(Link, { href: `/${storeConfig.slug}${item.href}`, className: cn("px-5 py-2.5 text-[11px] font-bold uppercase tracking-[0.15em] transition-all rounded-full flex items-center gap-2.5 group/nav", isDarkTheme
-                                                ? "text-gray-400 hover:text-white hover:bg-white/10"
-                                                : "text-gray-600 hover:text-black hover:bg-gray-100"), children: [Icon && _jsx(Icon, { className: "w-4 h-4 transition-transform group-hover/nav:scale-110" }), item.label] }, `${index}-${item.href}`));
-                                    }), parentCategories.length > 0 && (_jsxs("div", { className: "relative group", onMouseEnter: () => setIsCatalogueOpen(true), onMouseLeave: () => setIsCatalogueOpen(false), children: [_jsxs("button", { className: cn("px-5 py-2.5 text-[11px] font-bold uppercase tracking-[0.15em] transition-all rounded-full flex items-center gap-2 group/nav", isDarkTheme
+    return (_jsxs(_Fragment, { children: [_jsx("header", { "data-section": "header", className: cn("sticky top-0 z-[60] w-full transition-all duration-500 backdrop-blur-xl border-b", scrolled ? "shadow-lg border-gray-100 dark:border-white/5 py-1" : "border-transparent py-2.5"), style: { backgroundColor: headerBg }, children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "relative flex h-16 items-center justify-between", children: [_jsx("div", { className: "flex items-center flex-shrink-0 z-20", children: _jsxs(Link, { href: `/${storeConfig.slug}`, className: "flex items-center gap-3 group", children: [_jsx(StoreLogo, { storeConfig: storeConfig, className: "h-10 w-10 transition-transform duration-500 group-hover:scale-105", alt: storeConfig.name }), !getLogoUrl(storeConfig) && (_jsx("span", { className: cn("text-xl font-bold tracking-tight transition-colors hidden xl:block", isDarkTheme ? "text-white" : "text-gray-900"), children: storeConfig.name }))] }) }), _jsx("nav", { className: "hidden lg:flex items-center gap-1 absolute left-1/2 -translate-x-1/2", children: (() => {
+                                    const menuItems = storeConfig.navigation.main;
+                                    const categories = parentCategories;
+                                    // Logic to determine how many categories to show directly
+                                    // Max total top-level items (menu + categories)
+                                    const maxTotalItems = storeConfig.layout === 'motivational-speaker' ? 5 : 6;
+                                    // How many categories can we fit?
+                                    const categoriesToShowCount = Math.max(0, maxTotalItems - menuItems.length);
+                                    const categoriesToDisplay = categories.slice(0, categoriesToShowCount);
+                                    const overflowCategories = categories.slice(categoriesToShowCount);
+                                    return (_jsxs(_Fragment, { children: [menuItems.map((item, index) => {
+                                                const Icon = item.icon ?
+                                                    (item.icon === 'BookOpen' ? BookOpen :
+                                                        item.icon === 'GraduationCap' ? GraduationCap :
+                                                            item.icon === 'Info' ? Info : getNavIcon(item.label)) :
+                                                    getNavIcon(item.label);
+                                                return (_jsxs(Link, { href: `/${storeConfig.slug}${item.href}`, className: cn("px-4 py-2.5 text-[11px] font-bold uppercase tracking-[0.12em] transition-all rounded-full flex items-center gap-2 group/nav whitespace-nowrap", isDarkTheme
+                                                        ? "text-gray-400 hover:text-white hover:bg-white/10"
+                                                        : "text-gray-600 hover:text-black hover:bg-gray-100"), children: [Icon && _jsx(Icon, { className: "w-3.5 h-3.5 transition-transform group-hover/nav:scale-110" }), item.label] }, `nav-${index}-${item.href}`));
+                                            }), categoriesToDisplay.map((cat) => (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, className: cn("px-4 py-2.5 text-[11px] font-bold uppercase tracking-[0.12em] transition-all rounded-full flex items-center gap-2 group/nav whitespace-nowrap", isDarkTheme
                                                     ? "text-gray-400 hover:text-white hover:bg-white/10"
-                                                    : "text-gray-600 hover:text-black hover:bg-gray-100"), children: [_jsx(LayoutGrid, { className: "w-4 h-4 transition-transform group-hover/nav:scale-110" }), "Catalogue", _jsx(ChevronDown, { className: cn("w-3.5 h-3.5 transition-transform duration-300", isCatalogueOpen && "rotate-180") })] }), _jsx(AnimatePresence, { children: isCatalogueOpen && (_jsx(motion.div, { initial: { opacity: 0, y: 10, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 10, scale: 0.95 }, transition: { duration: 0.2 }, className: cn("absolute top-full left-1/2 -translate-x-1/2 mt-2 w-64 p-3 rounded-2xl shadow-2xl border backdrop-blur-2xl z-50", isDarkTheme ? "bg-black/90 border-white/10" : "bg-white/95 border-gray-100"), children: _jsx("div", { className: "grid gap-1", children: parentCategories.map((cat) => (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, className: cn("flex items-center justify-between px-4 py-3 rounded-xl transition-all group/item", isDarkTheme ? "hover:bg-white/5" : "hover:bg-gray-50"), onClick: () => setIsCatalogueOpen(false), children: [_jsx("span", { className: cn("text-sm font-medium", isDarkTheme ? "text-gray-300 group-hover/item:text-white" : "text-gray-600 group-hover/item:text-black"), children: cat.name }), _jsx(ChevronRight, { className: "w-4 h-4 opacity-0 -translate-x-2 group-hover/item:opacity-100 group-hover/item:translate-x-0 transition-all text-gray-400" })] }, cat.id))) }) })) })] }))] }), _jsxs("div", { className: "flex items-center gap-1 sm:gap-2 z-20", children: [_jsx(Button, { variant: "ghost", size: "icon", className: cn("h-10 w-10 rounded-full transition-all relative", isDarkTheme ? "hover:bg-white/10 text-gray-300" : "hover:bg-gray-100 text-gray-600", searchOpen && "bg-transparent shadow-none"), onClick: () => setSearchOpen(true), children: _jsx(Search, { className: "h-5 w-5" }) }), storeConfig.features.wishlist && (_jsx(Link, { href: `/${storeConfig.slug}/wishlist`, children: _jsxs(Button, { variant: "ghost", size: "icon", className: "h-10 w-10 relative rounded-full group hover:bg-red-50 dark:hover:bg-red-900/10", children: [_jsx(Heart, { className: cn("h-5 w-5 transition-all group-hover:scale-110", wishlistCount > 0 && "fill-red-500 text-red-500") }), wishlistCount > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 h-4 w-4 text-[9px] font-bold text-white rounded-full flex items-center justify-center shadow-lg", style: { backgroundColor: primaryColor }, children: wishlistCount }))] }) })), storeConfig.layout === 'motivational-speaker' && isAuthenticated && (_jsx(Link, { href: `/${storeConfig.slug}/account?tab=learning`, children: _jsxs(Button, { variant: "ghost", size: "icon", className: cn("h-10 w-10 relative rounded-full group transition-all", isDarkTheme ? "hover:bg-blue-900/20 text-blue-400" : "hover:bg-blue-50 text-blue-600"), children: [_jsx(BookOpen, { className: "h-5 w-5 transition-all group-hover:scale-110" }), _jsx("span", { className: "sr-only", children: "My Learning" })] }) })), storeConfig.features.cart && (_jsx(Link, { href: `/${storeConfig.slug}/cart`, children: _jsxs(Button, { variant: "ghost", size: "icon", className: "h-10 w-10 relative rounded-full group hover:bg-gray-100 dark:hover:bg-white/10", children: [_jsx(ShoppingCart, { className: "h-5 w-5 group-hover:scale-110 transition-all" }), cartItemCount > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 h-4 w-4 text-[9px] font-bold text-white rounded-full flex items-center justify-center shadow-lg", style: { backgroundColor: primaryColor }, children: cartItemCount }))] }) })), isAuthenticated ? (_jsx(Link, { href: `/${storeConfig.slug}/account`, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-10 w-10 rounded-full overflow-hidden border-2 border-transparent hover:border-gray-200 transition-all", children: _jsx(AvatarImage, { src: user?.avatar, alt: "User", size: 32 }) }) })) : (_jsx(Link, { href: `/auth/login?callbackUrl=/${storeConfig.slug}`, className: "ml-1 hidden sm:block", children: _jsx(Button, { className: "h-10 px-6 rounded-full font-bold text-xs uppercase tracking-widest transition-all shadow-md hover:shadow-lg active:scale-95", style: { backgroundColor: primaryColor, color: 'white' }, children: "Log In" }) })), _jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden h-10 w-10 rounded-full ml-1", onClick: () => setMobileMenuOpen(true), children: _jsx(Menu, { className: "h-6 w-6" }) })] })] }) }) }), _jsx(AnimatePresence, { children: searchOpen && (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 z-[100] flex flex-col items-center justify-start pt-24 px-4 bg-white/80 dark:bg-black/80 backdrop-blur-2xl", children: _jsxs(motion.div, { initial: { y: -20, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -20, opacity: 0 }, className: "w-full max-w-3xl relative", children: [_jsxs("div", { className: "relative flex items-center group", children: [_jsx(Search, { className: "absolute left-6 h-6 w-6 text-gray-400 group-focus-within:text-black dark:group-focus-within:text-white transition-colors" }), _jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search products, categories, guides...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: cn("w-full pl-16 pr-24 py-6 text-2xl md:text-3xl font-light bg-transparent border-b-2 border-gray-200 dark:border-white/10 focus:outline-none focus:border-black dark:focus:border-white transition-all", isDarkTheme ? "text-white placeholder-gray-600" : "text-black placeholder-gray-300"), onKeyDown: (e) => e.key === 'Escape' && setSearchOpen(false) }), _jsxs("div", { className: "absolute right-0 flex items-center gap-2", children: [searchQuery && (_jsx(Button, { variant: "ghost", size: "icon", onClick: () => setSearchQuery(''), className: "h-10 w-10 rounded-full", children: _jsx(X, { className: "h-5 w-5 text-gray-400" }) })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSearchOpen(false), className: "text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-black dark:hover:text-white", children: "Esc" })] })] }), _jsxs("div", { className: "mt-12 grid grid-cols-1 md:grid-cols-2 gap-12", children: [_jsxs("div", { className: "space-y-6", children: [_jsx("h4", { className: "text-[10px] font-black uppercase tracking-[0.3em] text-gray-400", children: "Quick Links" }), _jsx("div", { className: "flex flex-wrap gap-2", children: ['Courses', 'Mentorship', 'Free Guides', 'Memberships', 'Contact'].map((tag) => (_jsx("button", { className: cn("px-4 py-2 rounded-full text-sm border transition-all", isDarkTheme
+                                                    : "text-gray-600 hover:text-black hover:bg-gray-100"), children: [_jsx(LayoutGrid, { className: "w-3.5 h-3.5 transition-transform group-hover/nav:scale-110" }), cat.name] }, `cat-direct-${cat.id}`))), overflowCategories.length > 0 && (_jsxs("div", { className: "relative group", onMouseEnter: () => setIsCatalogueOpen(true), onMouseLeave: () => setIsCatalogueOpen(false), children: [_jsxs("button", { className: cn("px-4 py-2.5 text-[11px] font-bold uppercase tracking-[0.12em] transition-all rounded-full flex items-center gap-2 group/nav whitespace-nowrap", isDarkTheme
+                                                            ? "text-gray-400 hover:text-white hover:bg-white/10"
+                                                            : "text-gray-600 hover:text-black hover:bg-gray-100"), children: [_jsx(LayoutGrid, { className: "w-3.5 h-3.5 transition-transform group-hover/nav:scale-110" }), categoriesToDisplay.length > 0 ? "More" : "Catalogue", _jsx(ChevronDown, { className: cn("w-3.5 h-3.5 transition-transform duration-300", isCatalogueOpen && "rotate-180") })] }), _jsx(AnimatePresence, { children: isCatalogueOpen && (_jsx(motion.div, { initial: { opacity: 0, y: 10, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 10, scale: 0.95 }, transition: { duration: 0.2 }, className: cn("absolute top-full left-1/2 -translate-x-1/2 mt-2 w-64 p-3 rounded-2xl shadow-2xl border backdrop-blur-2xl z-50", isDarkTheme ? "bg-black/90 border-white/10" : "bg-white/95 border-gray-100"), children: _jsx("div", { className: "grid gap-1 overflow-y-auto max-h-[70vh]", children: overflowCategories.map((cat) => (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, className: cn("flex items-center justify-between px-4 py-3 rounded-xl transition-all group/item", isDarkTheme ? "hover:bg-white/5" : "hover:bg-gray-50"), onClick: () => setIsCatalogueOpen(false), children: [_jsx("span", { className: cn("text-sm font-medium", isDarkTheme ? "text-gray-300 group-hover/item:text-white" : "text-gray-600 group-hover/item:text-black"), children: cat.name }), _jsx(ChevronRight, { className: "w-4 h-4 opacity-0 -translate-x-2 group-hover/item:opacity-100 group-hover/item:translate-x-0 transition-all text-gray-400" })] }, `cat-overflow-${cat.id}`))) }) })) })] }))] }));
+                                })() }), _jsxs("div", { className: "flex items-center gap-1 sm:gap-2 z-20", children: [_jsx(Button, { variant: "ghost", size: "icon", className: cn("h-10 w-10 rounded-full transition-all relative", isDarkTheme ? "hover:bg-white/10 text-gray-300" : "hover:bg-gray-100 text-gray-600", searchOpen && "bg-transparent shadow-none"), onClick: () => setSearchOpen(true), children: _jsx(Search, { className: "h-5 w-5" }) }), storeConfig.features.wishlist && (_jsx(Link, { href: `/${storeConfig.slug}/wishlist`, children: _jsxs(Button, { variant: "ghost", size: "icon", className: "h-10 w-10 relative rounded-full group hover:bg-red-50 dark:hover:bg-red-900/10", children: [_jsx(Heart, { className: cn("h-5 w-5 transition-all group-hover:scale-110", wishlistCount > 0 && "fill-red-500 text-red-500") }), wishlistCount > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 h-4 w-4 text-[9px] font-bold text-white rounded-full flex items-center justify-center shadow-lg", style: { backgroundColor: primaryColor }, children: wishlistCount }))] }) })), storeConfig.layout === 'motivational-speaker' && isAuthenticated && (_jsx(Link, { href: `/${storeConfig.slug}/account?tab=learning`, children: _jsxs(Button, { variant: "ghost", size: "icon", className: cn("h-10 w-10 relative rounded-full group transition-all", isDarkTheme ? "hover:bg-blue-900/20 text-blue-400" : "hover:bg-blue-50 text-blue-600"), children: [_jsx(BookOpen, { className: "h-5 w-5 transition-all group-hover:scale-110" }), _jsx("span", { className: "sr-only", children: "My Learning" })] }) })), storeConfig.features.cart && (_jsx(Link, { href: `/${storeConfig.slug}/cart`, children: _jsxs(Button, { variant: "ghost", size: "icon", className: "h-10 w-10 relative rounded-full group hover:bg-gray-100 dark:hover:bg-white/10", children: [_jsx(ShoppingCart, { className: "h-5 w-5 group-hover:scale-110 transition-all" }), cartItemCount > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 h-4 w-4 text-[9px] font-bold text-white rounded-full flex items-center justify-center shadow-lg", style: { backgroundColor: primaryColor }, children: cartItemCount }))] }) })), isAuthenticated ? (_jsx(Link, { href: `/${storeConfig.slug}/account`, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-10 w-10 rounded-full overflow-hidden border-2 border-transparent hover:border-gray-200 transition-all", children: _jsx(AvatarImage, { src: user?.avatar, alt: "User", size: 32 }) }) })) : (_jsx(Link, { href: `/auth/login?callbackUrl=/${storeConfig.slug}`, className: "ml-1 hidden sm:block", children: _jsx(Button, { className: "h-10 px-6 rounded-full font-bold text-xs uppercase tracking-widest transition-all shadow-md hover:shadow-lg active:scale-95", style: { backgroundColor: primaryColor, color: 'white' }, children: "Log In" }) })), _jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden h-10 w-10 rounded-full ml-1", onClick: () => setMobileMenuOpen(true), children: _jsx(Menu, { className: "h-6 w-6" }) })] })] }) }) }), _jsx(AnimatePresence, { children: searchOpen && (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 z-[100] flex flex-col items-center justify-start pt-24 px-4 bg-white/80 dark:bg-black/80 backdrop-blur-2xl", children: _jsxs(motion.div, { initial: { y: -20, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -20, opacity: 0 }, className: "w-full max-w-3xl relative", children: [_jsxs("div", { className: "relative flex items-center group", children: [_jsx(Search, { className: "absolute left-6 h-6 w-6 text-gray-400 group-focus-within:text-black dark:group-focus-within:text-white transition-colors" }), _jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search products, categories, guides...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: cn("w-full pl-16 pr-24 py-6 text-2xl md:text-3xl font-light bg-transparent border-b-2 border-gray-200 dark:border-white/10 focus:outline-none focus:border-black dark:focus:border-white transition-all", isDarkTheme ? "text-white placeholder-gray-600" : "text-black placeholder-gray-300"), onKeyDown: (e) => e.key === 'Escape' && setSearchOpen(false) }), _jsxs("div", { className: "absolute right-0 flex items-center gap-2", children: [searchQuery && (_jsx(Button, { variant: "ghost", size: "icon", onClick: () => setSearchQuery(''), className: "h-10 w-10 rounded-full", children: _jsx(X, { className: "h-5 w-5 text-gray-400" }) })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSearchOpen(false), className: "text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-black dark:hover:text-white", children: "Esc" })] })] }), _jsxs("div", { className: "mt-12 grid grid-cols-1 md:grid-cols-2 gap-12", children: [_jsxs("div", { className: "space-y-6", children: [_jsx("h4", { className: "text-[10px] font-black uppercase tracking-[0.3em] text-gray-400", children: "Quick Links" }), _jsx("div", { className: "flex flex-wrap gap-2", children: ['Courses', 'Mentorship', 'Free Guides', 'Memberships', 'Contact'].map((tag) => (_jsx("button", { className: cn("px-4 py-2 rounded-full text-sm border transition-all", isDarkTheme
                                                         ? "border-white/10 hover:border-white text-gray-400 hover:text-white"
                                                         : "border-gray-200 hover:border-black text-gray-600 hover:text-black"), children: tag }, tag))) })] }), _jsxs("div", { className: "space-y-6", children: [_jsx("h4", { className: "text-[10px] font-black uppercase tracking-[0.3em] text-gray-400", children: "Popular Categories" }), _jsx("div", { className: "grid gap-3", children: parentCategories.map((cat) => (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, className: "flex items-center gap-3 group", onClick: () => setSearchOpen(false), children: [_jsx("div", { className: "w-10 h-10 rounded-lg bg-gray-100 dark:bg-white/5 flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(ChevronRight, { className: "w-4 h-4 text-gray-400" }) }), _jsx("span", { className: "text-lg font-medium text-gray-500 group-hover:text-black dark:group-hover:text-white transition-colors", children: cat.name })] }, cat.id))) })] })] })] }) })) }), _jsx(AnimatePresence, { children: mobileMenuOpen && (_jsxs("div", { className: "fixed inset-0 z-[100] lg:hidden", children: [_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "absolute inset-0 bg-black/60 backdrop-blur-md", onClick: () => setMobileMenuOpen(false) }), _jsxs(motion.nav, { initial: { x: '100%' }, animate: { x: 0 }, exit: { x: '100%' }, transition: { type: "spring", damping: 25, stiffness: 200 }, className: cn("absolute right-0 top-0 bottom-0 w-[300px] shadow-2xl p-8 flex flex-col", isDarkTheme ? "bg-black text-white" : "bg-white text-black"), children: [_jsxs("div", { className: "flex items-center justify-between mb-12", children: [_jsx(StoreLogo, { storeConfig: storeConfig, className: "h-8 w-8" }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setMobileMenuOpen(false), children: _jsx(X, { className: "h-6 w-6" }) })] }), _jsxs("div", { className: "flex flex-col gap-8", children: [storeConfig.navigation.main.map((item, i) => {
                                             const Icon = item.icon ? (item.icon === 'BookOpen' ? BookOpen : item.icon === 'GraduationCap' ? GraduationCap : item.icon === 'Info' ? Info : getNavIcon(item.label)) : getNavIcon(item.label);

package/dist/styles/index.css

@@ -513,9 +513,6 @@
   .right-1 {
     right: calc(var(--spacing) * 1);
   }
-  .right-1\.5 {
-    right: calc(var(--spacing) * 1.5);
-  }
   .right-1\/4 {
     right: calc(1/4 * 100%);
   }
@@ -762,9 +759,6 @@
   .mx-1 {
     margin-inline: calc(var(--spacing) * 1);
   }
-  .mx-3 {
-    margin-inline: calc(var(--spacing) * 3);
-  }
   .mx-4 {
     margin-inline: calc(var(--spacing) * 4);
   }
@@ -1188,6 +1182,9 @@
   .max-h-\[48px\] {
     max-height: 48px;
   }
+  .max-h-\[70vh\] {
+    max-height: 70vh;
+  }
   .max-h-\[85vh\] {
     max-height: 85vh;
   }
@@ -1428,12 +1425,6 @@
   .max-w-\[300px\] {
     max-width: 300px;
   }
-  .max-w-\[380px\] {
-    max-width: 380px;
-  }
-  .max-w-\[500px\] {
-    max-width: 500px;
-  }
   .max-w-\[1600px\] {
     max-width: 1600px;
   }
@@ -1848,6 +1839,13 @@
       margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-0\.5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -2818,12 +2816,6 @@
       background-color: color-mix(in oklab, var(--color-slate-50) 50%, transparent);
     }
   }
-  .bg-slate-50\/80 {
-    background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 80%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-slate-50) 80%, transparent);
-    }
-  }
   .bg-slate-100 {
     background-color: var(--color-slate-100);
   }
@@ -3485,9 +3477,6 @@
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
-  .p-0\.5 {
-    padding: calc(var(--spacing) * 0.5);
-  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -6063,6 +6052,16 @@
       }
     }
   }
+  .hover\:border-slate-300\/80 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 80%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-slate-300) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:border-slate-900 {
     &:hover {
       @media (hover: hover) {
@@ -6787,14 +6786,6 @@
       }
     }
   }
-  .hover\:shadow-\[0_4px_20px_rgb\(0\,0\,0\,0\.02\)\] {
-    &:hover {
-      @media (hover: hover) {
-        --tw-shadow: 0 4px 20px var(--tw-shadow-color, rgb(0,0,0,0.02));
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
   .hover\:shadow-\[0_20px_50px_rgba\(0\,0\,0\,0\.08\)\] {
     &:hover {
       @media (hover: hover) {
@@ -7236,6 +7227,16 @@
       cursor: not-allowed;
     }
   }
+  .disabled\:bg-slate-200 {
+    &:disabled {
+      background-color: var(--color-slate-200);
+    }
+  }
+  .disabled\:text-slate-400 {
+    &:disabled {
+      color: var(--color-slate-400);
+    }
+  }
   .disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;
@@ -7246,6 +7247,12 @@
       opacity: 70%;
     }
   }
+  .disabled\:shadow-none {
+    &:disabled {
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .disabled\:hover\:translate-y-0 {
     &:disabled {
       &:hover {
@@ -8265,6 +8272,11 @@
       line-height: var(--tw-leading, var(--text-9xl--line-height));
     }
   }
+  .xl\:block {
+    @media (width >= 80rem) {
+      display: block;
+    }
+  }
   .xl\:grid-cols-4 {
     @media (width >= 80rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payaza-storefront-layouts",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "type": "module",
   "description": "Shared layout components for StoreFront applications",
   "main": "dist/index.js",