storefront-layouts-staging 1.0.0-staging.0

package/dist/editor/shared/AIGenerateModal.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { X, Sparkles, Store, FileText, PlusCircle, Loader2, Image as ImageIcon } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+export const AIGenerateModal = ({ isOpen, onClose, onGenerate, initialContext, isGenerating }) => {
+    const [context, setContext] = useState({
+        storeName: initialContext.storeName || '',
+        storeDescription: initialContext.storeDescription || '',
+        additionalContext: '',
+        assets: initialContext.assets || [],
+    });
+    // Update context if initialContext changes
+    React.useEffect(() => {
+        setContext(prev => ({
+            ...prev,
+            storeName: initialContext.storeName || prev.storeName,
+            storeDescription: initialContext.storeDescription || prev.storeDescription,
+            assets: initialContext.assets || prev.assets,
+        }));
+    }, [initialContext.storeName, initialContext.storeDescription, initialContext.assets]);
+    if (!isOpen)
+        return null;
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onGenerate(context);
+    };
+    const hasDefaultContext = !!(initialContext.storeName && initialContext.storeDescription);
+    return (_jsx("div", { className: "fixed inset-0 z-[200] flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm animate-in fade-in duration-200", children: _jsxs("div", { className: "bg-white w-full max-w-xl rounded-3xl shadow-2xl border border-slate-200 overflow-hidden flex flex-col max-h-[90vh] relative animate-in zoom-in-95 duration-200", children: [_jsx(AnimatePresence, { children: isGenerating && (_jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "absolute inset-0 z-[210] bg-white/90 backdrop-blur-md flex flex-col items-center justify-center p-8 text-center", children: [_jsxs("div", { className: "relative", children: [_jsx(motion.div, { animate: {
+                                            scale: [1, 1.2, 1],
+                                            rotate: [0, 180, 360],
+                                            opacity: [0.3, 0.6, 0.3]
+                                        }, transition: { duration: 4, repeat: Infinity, ease: "linear" }, className: "absolute inset-[-40px] bg-gradient-to-tr from-blue-400 via-purple-400 to-pink-400 blur-3xl opacity-30 rounded-full" }), [...Array(6)].map((_, i) => (_jsx(motion.div, { animate: {
+                                            y: [0, -40, 0],
+                                            x: [0, (i % 2 === 0 ? 30 : -30), 0],
+                                            scale: [0, 1, 0],
+                                            opacity: [0, 1, 0]
+                                        }, transition: {
+                                            duration: 2 + Math.random(),
+                                            repeat: Infinity,
+                                            delay: i * 0.4,
+                                            ease: "easeInOut"
+                                        }, className: "absolute text-purple-400", style: {
+                                            top: '50%',
+                                            left: '50%',
+                                            marginTop: -8,
+                                            marginLeft: -8
+                                        }, children: _jsx(Sparkles, { size: 16, fill: "currentColor" }) }, i))), _jsx(motion.div, { animate: {
+                                            scale: [1, 1.05, 1],
+                                            y: [0, -10, 0]
+                                        }, transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }, className: "relative w-24 h-24 bg-slate-900 rounded-[2.5rem] flex items-center justify-center shadow-2xl shadow-purple-200", children: _jsx(Sparkles, { className: "w-10 h-10 text-white animate-pulse", strokeWidth: 2.5 }) })] }), _jsxs(motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.2 }, className: "mt-12 space-y-4", children: [_jsx("h3", { className: "text-2xl font-black text-slate-900 tracking-tight", children: "AI is crafting your store..." }), _jsx("p", { className: "text-slate-500 font-bold text-xs uppercase tracking-[0.2em]", children: "Writing copy \u2022 Sourcing assets \u2022 Designing sections" }), _jsx("div", { className: "w-64 h-1.5 bg-slate-100 rounded-full overflow-hidden mx-auto mt-6", children: _jsx(motion.div, { animate: {
+                                                x: [-256, 256]
+                                            }, transition: {
+                                                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 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/BlockOutlineTree.d.ts

@@ -0,0 +1,14 @@
+import type { OutlineBlockTreeNode } from '../blocks/nav-outline-utils';
+export interface BlockOutlineTreeProps {
+    nodes: OutlineBlockTreeNode[];
+    depth?: number;
+    /** Highlights rows when granular path edits this subtree */
+    granularityPath?: string[] | null;
+    onActivateNode?: (node: OutlineBlockTreeNode) => void;
+    onToggleNodeVisibility?: (node: OutlineBlockTreeNode) => void;
+    /** Default expand nesting up to this depth when no user toggles yet */
+    defaultExpandDepth?: number;
+    variant?: 'navigator' | 'inspector';
+}
+export declare function BlockOutlineTree({ nodes, depth, granularityPath, onActivateNode, onToggleNodeVisibility, defaultExpandDepth, variant, }: BlockOutlineTreeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BlockOutlineTree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockOutlineTree.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/BlockOutlineTree.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAoBxE,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,eAAe,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtD,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC9D,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,WAAW,GAAG,WAAW,CAAC;CACrC;AA0HD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAS,EACT,eAAe,EACf,cAAc,EACd,sBAAsB,EACtB,kBAAsB,EACtB,OAAqB,GACtB,EAAE,qBAAqB,2CAoBvB"}

package/dist/editor/shared/BlockOutlineTree.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { AlignLeft, ChevronDown, ChevronRight, Eye, EyeOff, Image as ImageIcon, Layers, MapPin, Minus, MousePointer2, Square, Star, Tag, Type, } from 'lucide-react';
+import { cn } from '../../lib/utils/index.js';
+import { isGranularPathUnderBlock } from '../blocks/nav-outline-utils.js';
+const BLOCK_ICON_MAP = {
+    'payaza/heading': Type,
+    'payaza/paragraph': AlignLeft,
+    'payaza/image': ImageIcon,
+    'payaza/button': MousePointer2,
+    'payaza/spacer': Minus,
+    'payaza/group': Layers,
+    'payaza/feature-item': Star,
+    'payaza/hotspot': MapPin,
+    'payaza/badge': Tag,
+};
+function BlockIcon({ typeId, className }) {
+    const Icon = BLOCK_ICON_MAP[typeId] ?? Square;
+    return _jsx(Icon, { className: className, strokeWidth: 2, "aria-hidden": true });
+}
+function TreeLevel({ nodes, depth, granularityPath, onActivateNode, onToggleNodeVisibility, defaultExpandDepth, variant, expandedById, setExpandedById, }) {
+    const nav = variant === 'navigator';
+    const textMain = nav ? 'text-[12px]' : 'text-[13px]';
+    const isOpen = (id) => expandedById[id] !== undefined ? expandedById[id] : depth < (defaultExpandDepth ?? 3);
+    return (_jsx("ul", { role: "tree", className: cn('space-y-0', depth > 0 && (nav ? 'ml-[10px] border-l border-[#ececec] pl-2' : 'ml-[12px] border-l border-[#e8e9ec] pl-2.5')), children: nodes.map((node) => {
+            const hasKids = node.children.length > 0;
+            const open = hasKids && isOpen(node.id);
+            const active = granularityPath ? isGranularPathUnderBlock(granularityPath, node.blockPathInSection) : false;
+            return (_jsxs("li", { role: "treeitem", "aria-expanded": hasKids ? open : undefined, className: "group select-none py-px", children: [_jsxs("div", { className: "flex items-stretch gap-0.5", children: [hasKids ? (_jsx("button", { type: "button", className: cn('flex h-[26px] w-7 shrink-0 items-center justify-center rounded-[2px] text-[#787c82] hover:bg-[#f6f7f7] hover:text-[#1b0029]', nav && 'h-6 w-6'), "aria-label": open ? `Collapse ${node.label}` : `Expand ${node.label}`, onClick: (e) => {
+                                    e.stopPropagation();
+                                    setExpandedById((prev) => ({ ...prev, [node.id]: !isOpen(node.id) }));
+                                }, children: open ? (_jsx(ChevronDown, { className: "h-4 w-4", strokeWidth: 2, "aria-hidden": true })) : (_jsx(ChevronRight, { className: "h-4 w-4", strokeWidth: 2, "aria-hidden": true })) })) : (_jsx("span", { className: cn('inline-flex w-7 shrink-0 items-center justify-center opacity-45', nav && 'w-6'), children: _jsx(BlockIcon, { typeId: node.typeId, className: "h-3.5 w-3.5" }) })), _jsxs("button", { type: "button", disabled: !onActivateNode, onClick: () => onActivateNode?.(node), className: cn('-ml-px min-w-0 flex-1 rounded-[2px] px-2 py-1 text-left leading-snug transition-colors', textMain, active
+                                    ? 'bg-[#ebe4f5] font-semibold text-[#440066]'
+                                    : 'text-[#2c3338] hover:bg-[#f6f7f7]', !onActivateNode && 'cursor-default hover:bg-transparent', variant === 'inspector' && 'py-1.5', !node.visible && 'opacity-50'), children: [_jsx("span", { className: "truncate", children: node.label }), _jsx("span", { className: cn('mt-px block truncate text-[10px] font-normal capitalize text-[#787c82]'), children: node.typeId.replace(/^payaza\//, '').replace(/-/g, ' ') })] }), onToggleNodeVisibility && (_jsx("div", { className: "flex shrink-0 flex-col justify-center pr-0.5 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100", children: _jsx("button", { type: "button", "aria-label": node.visible ? `Hide ${node.label}` : `Show ${node.label}`, onClick: (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        onToggleNodeVisibility(node);
+                                    }, className: "rounded-sm p-0.5 text-[#787c82] hover:bg-[#f0f0f1] hover:text-[#1b0029]", title: node.visible ? 'Hide block' : 'Show block', children: node.visible ? (_jsx(Eye, { className: "h-3.5 w-3.5", strokeWidth: 2 })) : (_jsx(EyeOff, { className: "h-3.5 w-3.5", strokeWidth: 2 })) }) }))] }), hasKids && open ? (_jsx(TreeLevel, { nodes: node.children, depth: depth + 1, granularityPath: granularityPath, onActivateNode: onActivateNode, onToggleNodeVisibility: onToggleNodeVisibility, defaultExpandDepth: defaultExpandDepth, variant: variant, expandedById: expandedById, setExpandedById: setExpandedById })) : null] }, node.id));
+        }) }));
+}
+export function BlockOutlineTree({ nodes, depth = 0, granularityPath, onActivateNode, onToggleNodeVisibility, defaultExpandDepth = 3, variant = 'inspector', }) {
+    const [expandedById, setExpandedById] = React.useState({});
+    if (!nodes.length)
+        return null;
+    return (_jsx("div", { className: "overflow-x-auto", children: _jsx(TreeLevel, { nodes: nodes, depth: depth, granularityPath: granularityPath, onActivateNode: onActivateNode, onToggleNodeVisibility: onToggleNodeVisibility, defaultExpandDepth: defaultExpandDepth, variant: variant, expandedById: expandedById, setExpandedById: setExpandedById }) }));
+}

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { type PreviewZoom } from './preview-viewport';
+interface EditorHeaderProps {
+    layoutName: string;
+    storeName?: string;
+    storeLogo?: string;
+    activePage: string;
+    isSaving?: boolean;
+    isPublishing?: boolean;
+    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: {
+        id: string;
+        name: string;
+    }[];
+    onPageSwitch: (pageId: string) => void;
+    viewMode?: 'desktop' | 'tablet' | 'mobile';
+    onViewModeChange?: (mode: 'desktop' | 'tablet' | 'mobile') => void;
+    previewZoom?: PreviewZoom;
+    onPreviewZoomChange?: (zoom: PreviewZoom) => void;
+    editorType?: 'payaza-form';
+    publishButtonText?: string;
+    centerTemplateLabel?: string;
+    showPageSwitcher?: boolean;
+    showPageContextCard?: boolean;
+    currentPageLabel?: string;
+    outlinePanelOpen?: boolean;
+    onToggleOutlinePanel?: () => void;
+    /** @deprecated Use outlinePanelOpen / onToggleOutlinePanel */
+    listViewOpen?: boolean;
+    /** @deprecated Use onToggleOutlinePanel */
+    onToggleListView?: () => void;
+    interactionMode?: 'edit' | 'preview';
+    onInteractionModeChange?: (mode: 'edit' | 'preview') => void;
+    /** When true, hide desktop-only toolbar clusters (real phones + narrow viewports). */
+    isMobileChrome?: boolean;
+    /** Ref for measuring header height (mobile overlay positioning). */
+    headerRef?: React.RefObject<HTMLElement | null>;
+    /** Short status note shown below toolbar on mobile. */
+    headerStatusNote?: string;
+    /** Blocking/informational banner below toolbar on mobile. */
+    mobileStatusBanner?: {
+        tone: 'info' | 'warning';
+        message: string;
+    };
+    /** Host draft save lifecycle for subtle status hints. */
+    draftSaveStatus?: 'idle' | 'dirty' | 'saving' | 'saved';
+}
+export declare const EditorHeader: React.FC<EditorHeaderProps>;
+export {};
+//# sourceMappingURL=EditorHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorHeader.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/EditorHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoE,MAAM,OAAO,CAAC;AA6BzF,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAsI5E,UAAU,iBAAiB;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,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,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAClD,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC7D,sFAAsF;IACtF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oEAAoE;IACpE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6DAA6D;IAC7D,kBAAkB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACzD;AA8ID,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4fpD,CAAC"}

package/dist/editor/shared/EditorHeader.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { cn } from '../../lib/utils/index.js';
+import { ArrowLeft, Layout, Save, Smartphone, Monitor, Tablet, Eye, Pencil, PanelLeft, ChevronDown, Home, ShoppingBag, ShoppingCart, FileText, Settings, Undo2, Redo2, Send, Sparkles, Image as ImageIcon, Palette, Check, ZoomIn, } from 'lucide-react';
+import { PREVIEW_ZOOM_OPTIONS } from './preview-viewport.js';
+const Tooltip = ({ text, children }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [coords, setCoords] = useState({ top: 0, left: 0 });
+    const showTimeoutRef = useRef(null);
+    const hideTimeoutRef = useRef(null);
+    const triggerRef = useRef(null);
+    const visibleRef = useRef(false);
+    const updatePosition = useCallback(() => {
+        const el = triggerRef.current;
+        if (!el)
+            return;
+        const r = el.getBoundingClientRect();
+        setCoords({ top: r.bottom + 8, left: r.left + r.width / 2 });
+    }, []);
+    useLayoutEffect(() => {
+        if (!isVisible)
+            return;
+        updatePosition();
+        const onReposition = () => updatePosition();
+        window.addEventListener('scroll', onReposition, true);
+        window.addEventListener('resize', onReposition);
+        return () => {
+            window.removeEventListener('scroll', onReposition, true);
+            window.removeEventListener('resize', onReposition);
+        };
+    }, [isVisible, text, updatePosition]);
+    useEffect(() => {
+        return () => {
+            if (showTimeoutRef.current)
+                clearTimeout(showTimeoutRef.current);
+            if (hideTimeoutRef.current)
+                clearTimeout(hideTimeoutRef.current);
+        };
+    }, []);
+    const cancelHide = () => {
+        if (hideTimeoutRef.current) {
+            clearTimeout(hideTimeoutRef.current);
+            hideTimeoutRef.current = null;
+        }
+    };
+    const scheduleHide = () => {
+        cancelHide();
+        hideTimeoutRef.current = setTimeout(() => {
+            visibleRef.current = false;
+            setIsVisible(false);
+        }, 140);
+    };
+    const onTriggerEnter = () => {
+        cancelHide();
+        if (showTimeoutRef.current)
+            clearTimeout(showTimeoutRef.current);
+        if (visibleRef.current) {
+            updatePosition();
+            return;
+        }
+        showTimeoutRef.current = setTimeout(() => {
+            updatePosition();
+            visibleRef.current = true;
+            setIsVisible(true);
+        }, 400);
+    };
+    const onTriggerLeave = () => {
+        if (showTimeoutRef.current) {
+            clearTimeout(showTimeoutRef.current);
+            showTimeoutRef.current = null;
+        }
+        scheduleHide();
+    };
+    const tooltipBubble = typeof document !== 'undefined' ? (createPortal(_jsx(AnimatePresence, { children: isVisible && (_jsx(motion.div, { initial: { opacity: 0, y: 6, scale: 0.97 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 6, scale: 0.97 }, transition: { duration: 0.15, ease: [0.23, 1, 0.32, 1] }, style: {
+                position: 'fixed',
+                top: coords.top,
+                left: coords.left,
+                transform: 'translateX(-50%)',
+                zIndex: 200000,
+            }, className: "pointer-events-auto", onMouseEnter: cancelHide, onMouseLeave: scheduleHide, children: _jsx("div", { "data-payaza-header-tooltip": true, className: "max-w-[min(92vw,22rem)] rounded-lg border border-white/12 border-l-[3px] border-l-shopaza-green bg-shopaza-ink px-3 py-2 text-left text-[12px] font-medium leading-relaxed tracking-tight text-white shadow-[0_12px_40px_rgba(27,0,41,0.38)] ring-1 ring-black/20", children: text }) }, text)) }), document.body)) : null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: "relative flex items-center justify-center", onMouseEnter: onTriggerEnter, onMouseLeave: onTriggerLeave, onFocusCapture: onTriggerEnter, onBlurCapture: onTriggerLeave, children: children }), tooltipBubble] }));
+};
+/* ─── Helpers ────────────────────────────────────────────────────────────── */
+const getPageIcon = (pageId) => {
+    switch (pageId) {
+        case 'home': return _jsx(Home, { className: "h-4 w-4" });
+        case 'products': return _jsx(ShoppingBag, { className: "h-4 w-4" });
+        case 'cart': return _jsx(ShoppingCart, { className: "h-4 w-4" });
+        default: return _jsx(FileText, { className: "h-4 w-4" });
+    }
+};
+/** Visually consistent icon-only toolbar button. */
+function IconBtn(props) {
+    const { className, active, disabled, compact, children, ...rest } = props;
+    return (_jsx("button", { type: "button", disabled: disabled, className: cn('flex shrink-0 items-center justify-center rounded-lg border border-transparent transition-colors', compact ? 'h-8 w-8' : 'h-9 w-9', !disabled && !active && 'text-[#5b6470] hover:border-[#e6e9ee] hover:bg-[#f8fafc] hover:text-[#1f2937]', active && !disabled && 'border-[#ece7f9] bg-[#f7f3ff] text-[#440066]', disabled && 'cursor-not-allowed text-[#c3c4c7]', className), ...rest, children: children }));
+}
+/** Pill/chip used to visually group a cluster of controls. */
+function Cluster({ children, className }) {
+    return (_jsx("div", { className: cn('flex items-center rounded-xl border border-[#e6e9ee] bg-white p-1 shadow-[0_1px_2px_rgba(15,23,42,0.05)]', className), children: children }));
+}
+/** Thin vertical divider for inside a cluster. */
+function Divider() {
+    return _jsx("span", { className: "mx-1 inline-block h-6 w-px shrink-0 bg-[#eef1f5]", "aria-hidden": true });
+}
+function PreviewZoomDropdown({ previewZoom, onPreviewZoomChange }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const activeLabel = PREVIEW_ZOOM_OPTIONS.find((option) => option.value === previewZoom)?.label ?? 'Fit';
+    useEffect(() => {
+        const onClickOutside = (e) => {
+            if (!e.target.closest('.zoom-dropdown-container')) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen)
+            document.addEventListener('mousedown', onClickOutside);
+        return () => document.removeEventListener('mousedown', onClickOutside);
+    }, [isOpen]);
+    return (_jsxs("div", { className: "zoom-dropdown-container relative", children: [_jsx(Tooltip, { text: "Preview zoom level", children: _jsxs("button", { type: "button", onClick: () => setIsOpen((v) => !v), "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-label": `Preview zoom: ${activeLabel}`, className: "flex h-8 min-w-[4.75rem] items-center gap-1.5 rounded-lg border border-[#e6e9ee] bg-white px-2.5 text-[12px] font-semibold text-[#374151] shadow-[0_1px_2px_rgba(15,23,42,0.05)] transition-colors hover:border-[#d4dae3] hover:bg-[#fcfdff]", children: [_jsx(ZoomIn, { className: "h-3.5 w-3.5 shrink-0 text-[#440066]", strokeWidth: 2 }), _jsx("span", { className: "tabular-nums", children: activeLabel }), _jsx(ChevronDown, { className: cn('ml-auto h-3.5 w-3.5 shrink-0 text-[#9aa3b2] transition-transform', isOpen && 'rotate-180'), strokeWidth: 2 })] }) }), _jsx(AnimatePresence, { children: isOpen && (_jsxs(motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 6 }, transition: { duration: 0.12 }, role: "listbox", "aria-label": "Preview zoom options", className: "absolute right-0 top-full z-[200] mt-1.5 w-[8.5rem] rounded-xl border border-[#e6e9ee] bg-white py-1 shadow-[0_12px_24px_rgba(15,23,42,0.08)]", children: [_jsx("div", { className: "border-b border-[#f3f4f6] px-3 py-2", children: _jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-[#8a94a5]", children: "Zoom" }) }), _jsx("div", { className: "py-1", children: PREVIEW_ZOOM_OPTIONS.map((option) => (_jsxs("button", { type: "button", role: "option", "aria-selected": previewZoom === option.value, onClick: () => {
+                                    onPreviewZoomChange(option.value);
+                                    setIsOpen(false);
+                                }, className: cn('flex w-full items-center gap-2 px-3 py-2 text-left text-[13px] transition-colors hover:bg-[#f8fafc]', previewZoom === option.value && 'bg-[#f5f0ff] font-medium text-[#440066] hover:bg-[#ede9ff]'), children: [_jsx("span", { className: "flex-1 tabular-nums", children: option.label }), previewZoom === option.value && (_jsx(Check, { className: "h-4 w-4 shrink-0 text-[#440066]", strokeWidth: 2.5 }))] }, String(option.value)))) })] })) })] }));
+}
+/* ─── Component ──────────────────────────────────────────────────────────── */
+export const EditorHeader = ({ layoutName, storeName, storeLogo, activePage, isSaving, isPublishing, onSave, onPublish, onBack, onBackToSettings, onOpenAssets, onBackToTheme, onUndo, onRedo, canUndo, canRedo, onGenerateAI, isGeneratingAI, pages, onPageSwitch, viewMode = 'desktop', onViewModeChange, previewZoom = 'fit', onPreviewZoomChange, publishButtonText = 'Publish', centerTemplateLabel, showPageSwitcher = true, showPageContextCard = true, currentPageLabel, outlinePanelOpen, onToggleOutlinePanel, listViewOpen = true, onToggleListView, interactionMode = 'edit', onInteractionModeChange, isMobileChrome = false, headerRef, headerStatusNote, mobileStatusBanner, draftSaveStatus = 'idle', }) => {
+    const navigatorOpen = outlinePanelOpen !== undefined ? outlinePanelOpen : listViewOpen;
+    const toggleNavigator = onToggleOutlinePanel ?? onToggleListView;
+    const [isPageDropdownOpen, setIsPageDropdownOpen] = useState(false);
+    const [logoError, setLogoError] = useState(false);
+    useEffect(() => {
+        const onClickOutside = (e) => {
+            if (!e.target.closest('.page-switcher-container')) {
+                setIsPageDropdownOpen(false);
+            }
+        };
+        if (isPageDropdownOpen)
+            document.addEventListener('mousedown', onClickOutside);
+        return () => document.removeEventListener('mousedown', onClickOutside);
+    }, [isPageDropdownOpen]);
+    useEffect(() => { setLogoError(false); }, [storeLogo]);
+    // isPublishing should NOT disable the button visually — it just shows the spinner while keeping
+    // the active purple styling so the loading state is visible against the colored background.
+    const publishDisabled = !onPublish;
+    const hasUtilityTools = onBackToSettings || onOpenAssets || onBackToTheme || onGenerateAI;
+    const draftStatusLabel = draftSaveStatus === 'saving'
+        ? 'Saving draft…'
+        : draftSaveStatus === 'saved'
+            ? 'Draft saved'
+            : draftSaveStatus === 'dirty'
+                ? 'Unsaved changes'
+                : null;
+    const showMobileStatusRow = isMobileChrome && (headerStatusNote || mobileStatusBanner);
+    return (_jsxs("header", { ref: headerRef, className: cn('sticky top-0 z-[100] flex shrink-0 flex-col border-b border-[#e6e9ee] bg-white/95 font-sans antialiased text-[#1f2937] backdrop-blur supports-[backdrop-filter]:bg-white/88', isMobileChrome ? 'min-h-0' : 'min-h-[52px] md:min-h-[72px]'), style: { paddingTop: 'env(safe-area-inset-top, 0px)' }, children: [_jsxs("div", { className: cn('flex w-full flex-1 items-center overflow-x-auto', isMobileChrome ? 'min-h-[48px] gap-2 px-3 py-1.5' : 'min-h-[52px] gap-3 px-3 py-2 md:min-h-[72px] md:px-5'), children: [_jsxs("div", { className: cn('flex min-w-0 shrink-0 items-center', isMobileChrome ? 'gap-1' : 'gap-1.5'), children: [onBack && (_jsx(Tooltip, { text: "Close editor and return to dashboard", children: _jsxs("button", { type: "button", onClick: onBack, "aria-label": "Close editor", className: cn('flex shrink-0 items-center gap-1.5 rounded-lg border border-transparent text-[12px] font-medium text-[#5b6470] transition-colors hover:border-[#e6e9ee] hover:bg-[#f4f5f7] hover:text-[#1f2937] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#440066]/35 focus-visible:ring-offset-2', isMobileChrome ? 'h-9 px-2' : 'h-9 px-2 min-[900px]:px-2.5'), children: [_jsx(ArrowLeft, { className: "h-4 w-4 shrink-0", strokeWidth: 2.25, "aria-hidden": true }), _jsx("span", { className: "hidden min-[900px]:inline", children: "Close" })] }) })), toggleNavigator && (_jsx(Tooltip, { text: navigatorOpen ? 'Hide outline panel' : 'Show outline panel', children: _jsx(IconBtn, { active: navigatorOpen, onClick: toggleNavigator, "aria-label": navigatorOpen ? 'Hide outline panel' : 'Show outline panel', children: _jsx(PanelLeft, { className: "h-4 w-4", strokeWidth: 2 }) }) })), (toggleNavigator || onUndo || onRedo) && (_jsx("span", { className: cn('inline-block w-px shrink-0 bg-[#eef1f5]', isMobileChrome ? 'mx-0.5 h-5' : 'mx-0.5 h-5'), "aria-hidden": true })), _jsx(Tooltip, { text: "Undo last change (Ctrl+Z)", children: _jsx(IconBtn, { onClick: onUndo, disabled: !canUndo, "aria-label": "Undo", children: _jsx(Undo2, { className: "h-4 w-4", strokeWidth: 2 }) }) }), _jsx(Tooltip, { text: "Redo last change (Ctrl+Y)", children: _jsx(IconBtn, { onClick: onRedo, disabled: !canRedo, "aria-label": "Redo", children: _jsx(Redo2, { className: "h-4 w-4", strokeWidth: 2 }) }) }), _jsxs("div", { className: "hidden min-w-0 items-center gap-2.5 min-[900px]:flex", children: [_jsx("span", { className: "h-7 w-px shrink-0 bg-[#e8ecf2]", "aria-hidden": true }), _jsx("div", { className: cn('flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-[#e6e9ee] bg-white shadow-sm', storeLogo && !logoError && storeLogo.trim() !== '' ? '' : 'bg-[#f6f7f7]'), children: storeLogo && !logoError && storeLogo.trim() !== '' ? (_jsx("img", { src: storeLogo, alt: "", className: "h-full w-full object-cover", onError: () => setLogoError(true) })) : (_jsx(Layout, { className: "h-4 w-4 text-[#9ca3af]", strokeWidth: 2 })) }), _jsxs("div", { className: "min-w-0 max-w-[11rem]", children: [_jsx("p", { className: "truncate text-[13px] font-semibold leading-tight text-[#1b0029]", children: storeName || layoutName }), _jsx("p", { className: "truncate text-[11px] leading-tight text-[#7b8492]", children: layoutName })] })] })] }), _jsx("div", { className: "hidden min-w-0 flex-1 items-center justify-center px-1 md:flex md:px-4", children: showPageSwitcher ? (_jsxs("div", { className: "page-switcher-container relative", children: [_jsxs("button", { type: "button", onClick: () => setIsPageDropdownOpen((v) => !v), className: "flex max-w-[min(92vw,360px)] items-center gap-2.5 rounded-xl border border-[#e6e9ee] bg-white px-3.5 py-2.5 text-left shadow-[0_1px_2px_rgba(15,23,42,0.05)] transition-colors hover:border-[#d4dae3] hover:bg-[#fcfdff]", children: [_jsx("span", { className: "shrink-0 text-[#440066]", children: getPageIcon(activePage) }), _jsx("span", { className: "truncate text-[13px] font-semibold text-[#1f2937]", children: pages.find((p) => p.id === activePage)?.name || activePage }), _jsx(ChevronDown, { className: cn('ml-auto h-4 w-4 shrink-0 text-[#9aa3b2] transition-transform', isPageDropdownOpen && 'rotate-180'), strokeWidth: 2 })] }), _jsx(AnimatePresence, { children: isPageDropdownOpen && (_jsxs(motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 6 }, transition: { duration: 0.12 }, className: "absolute left-1/2 top-full z-[200] mt-1.5 w-[min(calc(100vw-24px),17rem)] -translate-x-1/2 rounded-xl border border-[#e6e9ee] bg-white py-1 shadow-[0_12px_24px_rgba(15,23,42,0.08)]", children: [_jsx("div", { className: "border-b border-[#f3f4f6] px-3.5 py-2.5", children: _jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-[#8a94a5]", children: "Pages" }) }), _jsx("div", { className: "max-h-[280px] overflow-y-auto py-1", children: pages.map((page) => (_jsxs("button", { type: "button", onClick: () => { onPageSwitch(page.id); setIsPageDropdownOpen(false); }, className: cn('flex w-full items-center gap-3 px-3.5 py-2.5 text-left text-[13px] transition-colors hover:bg-[#f8fafc]', activePage === page.id && 'bg-[#f5f0ff] font-medium text-[#440066] hover:bg-[#ede9ff]'), children: [_jsx("span", { className: activePage === page.id ? 'text-[#440066]' : 'text-[#9ca3af]', children: getPageIcon(page.id) }), _jsx("span", { className: "flex-1", children: page.name }), activePage === page.id && (_jsx(Check, { className: "h-4 w-4 shrink-0 text-[#440066]", strokeWidth: 2.5 }))] }, page.id))) })] })) })] })) : showPageContextCard ? (_jsxs("div", { className: "flex max-w-[min(92vw,400px)] items-center gap-2.5 rounded-lg border border-[#e8ecf2] bg-white px-3 py-1.5 shadow-[0_1px_2px_rgba(15,23,42,0.04)]", children: [_jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-[#f7f3ff] text-[#440066]", children: getPageIcon(activePage) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-[9px] font-semibold uppercase tracking-[0.07em] text-[#8a94a5]", children: interactionMode === 'preview' ? 'Previewing page' : 'Current page' }), _jsx("p", { className: "truncate text-[12px] font-semibold text-[#1f2937]", children: centerTemplateLabel ||
+                                                currentPageLabel ||
+                                                pages.find((p) => p.id === activePage)?.name ||
+                                                activePage })] })] })) : null }), _jsxs("div", { className: cn('ml-auto flex shrink-0 items-center', isMobileChrome ? 'gap-1.5' : 'gap-2'), children: [!isMobileChrome && (_jsx("div", { className: "hidden md:block", children: onInteractionModeChange && (_jsxs(Cluster, { children: [_jsx(Tooltip, { text: "Edit mode \u2014 click elements on the canvas to edit them", children: _jsxs("button", { type: "button", onClick: () => onInteractionModeChange('edit'), "aria-pressed": interactionMode === 'edit', "aria-label": "Edit mode", className: cn('flex h-8 items-center gap-1.5 rounded-lg px-3 text-[12px] font-medium transition-colors', interactionMode === 'edit'
+                                                    ? 'bg-[#440066] text-white shadow-sm'
+                                                    : 'text-[#5b6470] hover:bg-[#f8fafc] hover:text-[#1f2937]'), children: [_jsx(Pencil, { className: cn('h-3.5 w-3.5 shrink-0', interactionMode === 'edit' && 'text-[#80FF73]'), strokeWidth: 2 }), _jsx("span", { className: "hidden min-[940px]:inline", children: "Edit" })] }) }), _jsx(Tooltip, { text: "Preview mode \u2014 browse your store as a visitor would", children: _jsxs("button", { type: "button", onClick: () => onInteractionModeChange('preview'), "aria-pressed": interactionMode === 'preview', "aria-label": "Preview mode", className: cn('flex h-8 items-center gap-1.5 rounded-lg px-3 text-[12px] font-medium transition-colors', interactionMode === 'preview'
+                                                    ? 'bg-[#440066] text-white shadow-sm'
+                                                    : 'text-[#5b6470] hover:bg-[#f8fafc] hover:text-[#1f2937]'), children: [_jsx(Eye, { className: cn('h-3.5 w-3.5 shrink-0', interactionMode === 'preview' && 'text-[#80FF73]'), strokeWidth: 2 }), _jsx("span", { className: "hidden min-[940px]:inline", children: "Preview" })] }) })] })) })), !isMobileChrome && (_jsx("div", { className: "hidden md:block", children: _jsxs(Cluster, { children: [_jsx(Tooltip, { text: "Desktop view", children: _jsx(IconBtn, { onClick: () => onViewModeChange?.('desktop'), active: viewMode === 'desktop', "aria-pressed": viewMode === 'desktop', "aria-label": "Desktop view", children: _jsx(Monitor, { className: "h-4 w-4", strokeWidth: 2 }) }) }), _jsx(Tooltip, { text: "Tablet view", children: _jsx(IconBtn, { onClick: () => onViewModeChange?.('tablet'), active: viewMode === 'tablet', "aria-pressed": viewMode === 'tablet', "aria-label": "Tablet view", children: _jsx(Tablet, { className: "h-4 w-4", strokeWidth: 2 }) }) }), _jsx(Tooltip, { text: "Mobile view", children: _jsx(IconBtn, { onClick: () => onViewModeChange?.('mobile'), active: viewMode === 'mobile', "aria-pressed": viewMode === 'mobile', "aria-label": "Mobile view", children: _jsx(Smartphone, { className: "h-4 w-4", strokeWidth: 2 }) }) })] }) })), !isMobileChrome && (_jsx("div", { className: "hidden md:block", children: viewMode === 'desktop' && onPreviewZoomChange && (_jsx(PreviewZoomDropdown, { previewZoom: previewZoom, onPreviewZoomChange: onPreviewZoomChange })) })), !isMobileChrome && (_jsx("div", { className: "hidden md:block", children: hasUtilityTools && (_jsxs(Cluster, { children: [onBackToSettings && (_jsx(Tooltip, { text: "Store settings", children: _jsx(IconBtn, { onClick: onBackToSettings, "aria-label": "Store settings", children: _jsx(Settings, { className: "h-4 w-4", strokeWidth: 2 }) }) })), onOpenAssets && (_jsx(Tooltip, { text: "Media library \u2014 browse and upload images", children: _jsx(IconBtn, { onClick: onOpenAssets, "aria-label": "Media library", children: _jsx(ImageIcon, { className: "h-4 w-4", strokeWidth: 2 }) }) })), onBackToTheme && (_jsx(Tooltip, { text: "Change template \u2014 switch to a different layout template", children: _jsx(IconBtn, { onClick: onBackToTheme, "aria-label": "Change template", children: _jsx(Palette, { className: "h-4 w-4", strokeWidth: 2 }) }) })), onGenerateAI && (onBackToSettings || onOpenAssets || onBackToTheme) && (_jsx(Divider, {})), onGenerateAI && (_jsx(Tooltip, { text: "AI assistant \u2014 generate and improve content with AI", children: _jsx(IconBtn, { id: "tour-ai-button", onClick: onGenerateAI, disabled: isGeneratingAI, "aria-label": "AI assistant", className: "text-[#440066] hover:bg-[#f5f0ff] hover:text-[#440066]", children: isGeneratingAI ? (_jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-[#440066]/25 border-t-[#440066]" })) : (_jsx(Sparkles, { className: "h-4 w-4", strokeWidth: 2 })) }) }))] })) })), _jsxs("div", { className: cn('flex shrink-0 items-center', isMobileChrome ? 'gap-1.5' : 'gap-2 pl-1'), children: [_jsx(Tooltip, { text: isMobileChrome && draftStatusLabel
+                                            ? draftStatusLabel
+                                            : 'Save your current changes as a draft (not yet live)', children: _jsxs("button", { type: "button", onClick: onSave, disabled: isSaving, "aria-label": draftStatusLabel ? `Save draft — ${draftStatusLabel}` : 'Save draft', className: cn('relative flex shrink-0 items-center gap-2 whitespace-nowrap rounded-xl border border-[#e6e9ee] bg-white text-[13px] font-semibold text-[#374151] shadow-[0_1px_2px_rgba(15,23,42,0.05)] transition-colors hover:border-[#d2d9e3] hover:bg-[#f8fafc] disabled:opacity-50', isMobileChrome ? 'h-9 px-2.5' : 'h-8 px-2 md:h-10 md:px-4'), children: [isMobileChrome && draftSaveStatus === 'dirty' && (_jsx("span", { className: "absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-amber-400 ring-2 ring-white", "aria-hidden": true })), isSaving ? (_jsx("span", { className: "h-3.5 w-3.5 animate-spin rounded-full border-2 border-[#d1d5db] border-t-[#6b7280]" })) : (_jsx(Save, { className: "h-3.5 w-3.5", strokeWidth: 2.5 })), _jsx("span", { className: isMobileChrome ? 'sr-only' : 'hidden md:inline', children: "Save draft" })] }) }), _jsx(Tooltip, { text: publishDisabled
+                                            ? 'No pending changes to publish'
+                                            : isPublishing
+                                                ? 'Publishing your changes…'
+                                                : publishButtonText === 'Update'
+                                                    ? 'Publish your latest changes — makes them live instantly'
+                                                    : 'Publish your store and make it live for visitors', children: _jsxs("button", { type: "button", id: "tour-launch-button", onClick: !publishDisabled && !isPublishing ? onPublish : undefined, disabled: publishDisabled, "aria-label": publishButtonText, className: cn('flex h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-xl px-2 text-[13px] font-semibold transition-colors', !isMobileChrome && 'md:h-10 md:px-4', publishDisabled
+                                                ? 'cursor-not-allowed border-2 border-[#c3c4c7] bg-[#e4e6ea] text-[#787c82] opacity-80'
+                                                : isPublishing
+                                                    ? 'cursor-wait border border-transparent !bg-shopaza-indigo !text-white shadow-[0_1px_3px_rgba(68,0,102,0.3),0_4px_12px_rgba(68,0,102,0.15)] opacity-90'
+                                                    : 'border border-transparent !bg-shopaza-indigo !text-white shadow-[0_1px_3px_rgba(68,0,102,0.3),0_4px_12px_rgba(68,0,102,0.15)] hover:!bg-[#370055] active:!bg-[#2d0044]'), children: [isPublishing ? (_jsx("span", { className: "h-3.5 w-3.5 animate-spin rounded-full border-2 border-white/30 border-t-white" })) : (_jsx(Send, { className: "h-3.5 w-3.5", strokeWidth: 2.5 })), _jsx("span", { className: isMobileChrome ? 'sr-only' : 'hidden md:inline', children: isPublishing ? (publishButtonText === 'Update' ? 'Updating…' : 'Publishing…') : publishButtonText })] }) })] })] })] }), showMobileStatusRow && (_jsx("div", { className: "border-t border-[#eef1f5] px-2 py-1", children: mobileStatusBanner ? (_jsx("p", { role: "status", className: cn('text-[11px] font-medium leading-snug', mobileStatusBanner.tone === 'warning'
+                        ? 'text-amber-800'
+                        : 'text-[#50575e]'), children: mobileStatusBanner.message })) : headerStatusNote ? (_jsx("p", { role: "status", className: "text-[11px] font-medium leading-snug text-[#50575e]", children: headerStatusNote })) : draftStatusLabel ? (_jsx("p", { role: "status", className: "text-[11px] font-medium leading-snug text-[#787c82]", children: draftStatusLabel })) : null })), _jsx("style", { dangerouslySetInnerHTML: {
+                    __html: `
+          .overflow-x-auto::-webkit-scrollbar { display: none; }
+          .overflow-x-auto { -ms-overflow-style: none; scrollbar-width: none; }
+        `,
+                } })] }));
+};

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { OutlineBlockTreeNode } from '../blocks/nav-outline-utils';
+export interface NavigatorSectionItem {
+    id: string;
+    label: string;
+    /** Whether this section is currently shown (show !== false in data). */
+    visible?: boolean;
+    /** Nested block / array slide tree under this section. */
+    nested?: OutlineBlockTreeNode[];
+}
+export interface OutlinePageGroup {
+    pageId: string;
+    pageLabel: string;
+    sections: NavigatorSectionItem[];
+}
+interface EditorNavigatorProps {
+    outlinePages: OutlinePageGroup[];
+    activePageId: string;
+    onSelectPage: (pageId: string) => void;
+    selectedSectionId: string | null;
+    onSelectSectionInPage: (pageId: string, sectionId: string) => void;
+    onHoverSection?: (id: string | null) => void;
+    onReorderSection?: (sectionId: string, direction: 'up' | 'down') => void;
+    onToggleSectionVisibility?: (sectionId: string) => void;
+    /** When set, granular field path can highlight nested block rows when it matches canvas focus. */
+    outlineGranularity?: {
+        pageId: string;
+        sectionKey: string;
+        fieldPath: string[];
+    } | null;
+    /** Click a nested block row (opens first editable attribute in the sidebar). */
+    onOutlineTreeActivate?: (pageId: string, sectionId: string, node: OutlineBlockTreeNode) => void;
+    /** Toggle visibility of a nested block node. */
+    onToggleNodeVisibility?: (pageId: string, sectionId: string, node: OutlineBlockTreeNode) => void;
+    className?: string;
+}
+/**
+ * Full-template outline (pages → blocks). Reorder controls apply to the active page only.
+ */
+export declare const EditorNavigator: React.FC<EditorNavigatorProps>;
+export {};
+//# sourceMappingURL=EditorNavigator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorNavigator.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/EditorNavigator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGxE,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,oBAAoB,EAAE,CAAC;CAClC;AAED,UAAU,oBAAoB;IAC5B,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,qBAAqB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IACzE,yBAAyB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,kGAAkG;IAClG,kBAAkB,CAAC,EAAE;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,EAAE,CAAC;KACrB,GAAG,IAAI,CAAC;IACT,gFAAgF;IAChF,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChG,gDAAgD;IAChD,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACjG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoL1D,CAAC"}

package/dist/editor/shared/EditorNavigator.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from '../../lib/utils/index.js';
+import { ChevronDown, ChevronRight, Eye, EyeOff, Layers, List } from 'lucide-react';
+import { BlockOutlineTree } from './BlockOutlineTree.js';
+/**
+ * Full-template outline (pages → blocks). Reorder controls apply to the active page only.
+ */
+export const EditorNavigator = ({ outlinePages, activePageId, onSelectPage, selectedSectionId, onSelectSectionInPage, onHoverSection, onReorderSection, onToggleSectionVisibility, outlineGranularity, onOutlineTreeActivate, onToggleNodeVisibility, className, }) => {
+    const [expandedOutlinePages, setExpandedOutlinePages] = useState({});
+    const isOutlineExpanded = (pageId) => expandedOutlinePages[pageId] !== undefined ? expandedOutlinePages[pageId] : pageId === activePageId;
+    const toggleOutlinePage = (pageId) => {
+        setExpandedOutlinePages((prev) => {
+            const open = prev[pageId] !== undefined ? prev[pageId] : pageId === activePageId;
+            return { ...prev, [pageId]: !open };
+        });
+    };
+    return (_jsxs("aside", { "data-payaza-sidebar": "navigator", className: cn('flex h-full w-[220px] min-w-[200px] shrink-0 flex-col border-r border-[#dcdcde] bg-[#fffefb]', '[contain:layout_style]', className), "aria-label": "Template outline", children: [_jsxs("div", { "data-payaza-sidebar-tabs": true, className: "flex shrink-0 items-center gap-2 border-b border-[#dcdcde] bg-[#f6f7f7] px-2.5 py-2", children: [_jsx(List, { className: "h-3.5 w-3.5 shrink-0 text-[#787c82]", strokeWidth: 2, "aria-hidden": true }), _jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.06em] text-[#646970]", children: "List View" })] }), _jsx("div", { className: "min-h-0 flex-1 bg-white", children: _jsx("nav", { className: "custom-scrollbar h-full overflow-y-auto px-1.5 py-2", "aria-label": "Template outline", children: _jsx("ul", { className: "space-y-0.5", children: outlinePages.map((page) => {
+                            const expanded = isOutlineExpanded(page.pageId);
+                            const pageActive = page.pageId === activePageId;
+                            const isCurrentPage = page.pageId === activePageId;
+                            return (_jsxs("li", { className: "select-none", children: [_jsxs("div", { className: "flex items-stretch gap-0.5", children: [_jsx("button", { type: "button", className: "flex h-9 w-8 shrink-0 items-center justify-center text-[#787c82] hover:text-[#1b0029]", "aria-expanded": expanded, onClick: () => toggleOutlinePage(page.pageId), children: expanded ? (_jsx(ChevronDown, { className: "h-4 w-4", strokeWidth: 2 })) : (_jsx(ChevronRight, { className: "h-4 w-4", strokeWidth: 2 })) }), _jsx("button", { type: "button", "data-selected": pageActive && !selectedSectionId ? 'page' : pageActive ? 'page-context' : undefined, onClick: () => onSelectPage(page.pageId), className: cn('min-w-0 flex-1 rounded-[2px] px-2 py-1.5 text-left text-[12px] font-semibold transition-colors', pageActive && !selectedSectionId
+                                                    ? 'bg-[#ebe4f5] text-[#440066]'
+                                                    : pageActive
+                                                        ? 'text-[#1b0029]'
+                                                        : 'text-[#50575e] hover:bg-[#f6f7f7]'), children: page.pageLabel })] }), expanded && (_jsx("ul", { className: "ml-5 border-l border-[#e8e8e8] pl-2", children: page.sections.map((s, index) => {
+                                            const active = selectedSectionId === s.id && activePageId === page.pageId;
+                                            const isVisible = s.visible !== false;
+                                            return (_jsxs("li", { className: "group", children: [_jsxs("div", { className: "flex items-stretch gap-0.5", children: [_jsx("span", { className: "w-5 shrink-0", "aria-hidden": true }), _jsx("button", { type: "button", "data-selected": active ? 'true' : undefined, onClick: () => onSelectSectionInPage(page.pageId, s.id), onMouseEnter: () => onHoverSection?.(s.id), onMouseLeave: () => onHoverSection?.(null), className: cn('min-w-0 flex-1 rounded-[2px] px-2 py-1 text-left text-[11px] leading-snug transition-colors', active
+                                                                    ? 'bg-[#e8ecf1] font-medium text-[#1b0029] shadow-[inset_3px_0_0_0_#440066]'
+                                                                    : 'text-[#2c3338] hover:bg-[#f6f7f7]', !isVisible && 'opacity-50'), children: _jsxs("span", { className: "flex items-start gap-2", children: [_jsx(Layers, { className: cn('payaza-nav-icon mt-0.5 h-4 w-4 shrink-0', active ? 'text-[#440066]' : 'text-[#787c82]'), strokeWidth: 2, "aria-hidden": true }), _jsx("span", { className: "line-clamp-2", children: s.label?.trim() || s.id })] }) }), onToggleSectionVisibility && (_jsx("div", { className: "flex shrink-0 flex-col justify-center pr-0.5 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100", children: _jsx("button", { type: "button", "aria-label": isVisible ? `Hide ${s.label}` : `Show ${s.label}`, onClick: (e) => {
+                                                                        e.preventDefault();
+                                                                        e.stopPropagation();
+                                                                        onToggleSectionVisibility(s.id);
+                                                                    }, className: "rounded-sm p-0.5 text-[#787c82] hover:bg-[#f0f0f1] hover:text-[#1b0029]", title: isVisible ? 'Hide section' : 'Show section', children: isVisible ? (_jsx(Eye, { className: "h-3.5 w-3.5", strokeWidth: 2 })) : (_jsx(EyeOff, { className: "h-3.5 w-3.5", strokeWidth: 2 })) }) }))] }), active && s.nested && s.nested.length > 0 && onOutlineTreeActivate && (_jsx("div", { className: "ml-5 border-l border-[#ececec] pl-1 pb-1", children: _jsx(BlockOutlineTree, { nodes: s.nested, variant: "navigator", defaultExpandDepth: 1, granularityPath: outlineGranularity?.sectionKey === s.id &&
+                                                                isCurrentPage &&
+                                                                outlineGranularity?.fieldPath?.length
+                                                                ? outlineGranularity.fieldPath
+                                                                : null, onActivateNode: (node) => onOutlineTreeActivate(page.pageId, s.id, node), onToggleNodeVisibility: onToggleNodeVisibility
+                                                                ? (node) => onToggleNodeVisibility(page.pageId, s.id, node)
+                                                                : undefined }) }))] }, `${page.pageId}-${s.id}`));
+                                        }) }))] }, page.pageId));
+                        }) }) }) })] }));
+};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { StoreConfig } from '../../lib/store-types';
+import type { InteractionMode } from '../document/types';
+import type { IframePreviewFlushHandle } from '../../preview/canvas/preview-flush-handle';
+import { type PreviewZoom } from './preview-viewport';
+export type { PreviewZoom } from './preview-viewport';
+export { DESKTOP_PREVIEW_WIDTH } from './preview-viewport';
+interface IframePreviewProps {
+    layoutId: string;
+    config: StoreConfig;
+    activePageId: string;
+    viewMode: 'desktop' | 'tablet' | 'mobile';
+    selectedSection?: string | null;
+    /** When set, tells the iframe to highlight this specific field element (List View click). */
+    focusedField?: {
+        sectionKey: string;
+        fieldPath: string[];
+        elementKind: string;
+    } | null;
+    /** edit = suppress link navigation in iframe; preview = browse-like */
+    interactionMode?: InteractionMode;
+    /** When set, syncs hero carousel in preview to this slide index */
+    slideIndexSync?: {
+        sectionKey: string;
+        arrayField: string;
+        index: number;
+    } | null;
+    /** Increment to flush in-flight canvas edits before slide navigation */
+    flushRequestId?: number;
+    /** Desktop canvas zoom — fit scales to available width; numeric values are 0–1.25+ */
+    previewZoom?: PreviewZoom;
+    desktopCanvasWidth?: number;
+    className?: string;
+}
+export declare const IframePreview: React.ForwardRefExoticComponent<IframePreviewProps & React.RefAttributes<IframePreviewFlushHandle>>;
+//# sourceMappingURL=IframePreview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IframePreview.d.ts","sourceRoot":"","sources":["../../../src/editor/shared/IframePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgF,MAAM,OAAO,CAAC;AACrG,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIzD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AAC1F,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,oBAAoB,CAAC;AAE5B,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,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,6FAA6F;IAC7F,YAAY,CAAC,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,EAAE,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACvF,uEAAuE;IACvE,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,mEAAmE;IACnE,cAAc,CAAC,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAClF,wEAAwE;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sFAAsF;IACtF,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,qGA6TxB,CAAC"}