storefront-layouts 1.0.18 → 1.0.19

package/dist/editor/alignment-schemas/clothing.js

@@ -4,6 +4,13 @@ const sectionStyleSupports = {
     border: true,
     typography: true,
 };
+/** About page blocks use field controls + layout classes; section CSS overrides are not applied. */
+const clothingAboutSectionStyleSupports = {
+    spacing: false,
+    colors: false,
+    border: false,
+    typography: false,
+};
 export const ClothingSchema = {
     home: {
         hero: {
@@ -279,46 +286,63 @@ export const ClothingSchema = {
             type: 'section',
             label: 'Mission Banner',
             description: 'The hero section of the about page with your brand mission statement.',
-            _styleSupports: sectionStyleSupports,
+            _styleSupports: clothingAboutSectionStyleSupports,
             _sourcePath: 'layoutConfig.pages.about.hero',
             fields: {
                 show: { type: 'toggle', label: 'Display Header', defaultValue: true },
+                badgeText: {
+                    type: 'text',
+                    label: 'Badge Text',
+                    description: 'Short label above the headline',
+                    defaultValue: 'Est. 2024',
+                },
+                badgeTextColor: {
+                    type: 'color',
+                    label: 'Badge Text Colour',
+                    defaultValue: '#ffffff',
+                },
                 heroImage: { type: 'image', label: 'Mission Image', description: 'Large inspirational image for the about page.', defaultValue: 'https://images.unsplash.com/photo-1558769132-cb1aea458c5e?q=80&w=2074&auto=format&fit=crop' },
+                imageOverlayColor: {
+                    type: 'color',
+                    label: 'Mission Image Overlay',
+                    description: 'Dark tint over the mission image behind the text.',
+                    defaultValue: '#000000',
+                },
                 title: { type: 'text', label: 'Mission Headline', defaultValue: 'Crafting Experiences, Delivering Joy.' },
-                missionStatement: { type: 'multiline_text', label: 'Core Mission', description: 'Your brand\'s reason for existence.', defaultValue: 'Empowering individuals through style.' }
+                titleColor: {
+                    type: 'color',
+                    label: 'Mission Headline Colour',
+                    defaultValue: '#ffffff',
+                },
+                missionStatement: { type: 'multiline_text', label: 'Core Mission', description: 'Your brand\'s reason for existence.', defaultValue: 'Empowering individuals through style.' },
+                missionStatementColor: {
+                    type: 'color',
+                    label: 'Core Mission Colour',
+                    defaultValue: '#e5e7eb',
+                },
             }
         },
         story: {
             type: 'section',
             label: 'Brand Journey',
             description: 'A detailed section for telling your brand\'s history and story.',
-            _styleSupports: sectionStyleSupports,
+            _styleSupports: clothingAboutSectionStyleSupports,
             _sourcePath: 'layoutConfig.pages.about.story',
             fields: {
                 show: { type: 'toggle', label: 'Display Story', defaultValue: true },
                 sectionLabel: { type: 'text', label: 'Section Label', description: 'Small label above the title (e.g. "Who We Are").', defaultValue: 'Who We Are' },
                 title: { type: 'text', label: 'Section Title', description: 'Main heading for the story section (e.g. "Our Journey").', defaultValue: 'Our Journey' },
                 content: { type: 'multiline_text', label: 'The Narrative', description: 'Your brand story text.', defaultValue: 'Fashion Hub was born from a desire to create clothing that looks good and feels even better. We believe in sustainable fashion and ethical production practices.' },
-                storyImage: { type: 'image', label: 'Story / Team Image', description: 'The image shown in the story section when no gallery images are set.', defaultValue: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=2071&auto=format&fit=crop' },
+                storyImage: { type: 'image', label: 'Story / Team Image', description: 'Image alongside your brand story.', defaultValue: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=2071&auto=format&fit=crop' },
                 teamTitle: { type: 'text', label: 'Image Caption Title', description: 'Bold caption over the story image (e.g. "The Dream Team").', defaultValue: 'The Dream Team' },
-                teamSubtitle: { type: 'text', label: 'Image Caption Subtitle', description: 'Subtitle caption beneath the team title.', defaultValue: 'Working together to serve you better' },
-                gallerySection: {
-                    type: 'array',
-                    label: 'Brand Gallery',
-                    description: 'A collection of images that represent your brand heritage or workspace. When set, replaces the single story image.',
-                    defaultValue: [],
-                    itemSchema: {
-                        image: { type: 'image', label: 'Gallery Image' },
-                        caption: { type: 'text', label: 'Brief Caption' }
-                    }
-                }
+                teamSubtitle: { type: 'text', label: 'Image Caption Subtitle', description: 'Subtitle caption beneath the team title.', defaultValue: 'Working together to serve you better' }
             }
         },
         stats: {
             type: 'section',
             label: 'Milestones & Impact',
             description: 'Numeric highlights of your brand\'s success and reach.',
-            _styleSupports: sectionStyleSupports,
+            _styleSupports: clothingAboutSectionStyleSupports,
             _sourcePath: 'layoutConfig.pages.about.stats',
             fields: {
                 show: { type: 'toggle', label: 'Display Metrics', defaultValue: true },
@@ -326,6 +350,7 @@ export const ClothingSchema = {
                     type: 'array',
                     label: 'Milestone Items',
                     description: 'Each milestone with a value and label.',
+                    maxSlides: 4,
                     defaultValue: [
                         { value: '20k+', label: 'Style Lovers' },
                         { value: '100+', label: 'New Arrivals' },
@@ -343,30 +368,60 @@ export const ClothingSchema = {
             type: 'section',
             label: 'Location & Availability',
             description: 'Quick reference cards for your store\'s physical presence and hours.',
-            _styleSupports: sectionStyleSupports,
+            _styleSupports: clothingAboutSectionStyleSupports,
             _sourcePath: 'layoutConfig.pages.about.contact-info',
             fields: {
-                show: { type: 'toggle', label: 'Display Section', defaultValue: true },
-                title: { type: 'text', label: 'Headline', defaultValue: 'Get in Touch' },
-                description: { type: 'multiline_text', label: 'Supporting Text', defaultValue: "Have questions? We'd love to hear from you. Reach out to our team via email, phone, or visit us at our store." },
-                visitTitle: { type: 'text', label: 'Visit Card Title', defaultValue: 'Visit Us' },
-                visitIcon: { type: 'icon', label: 'Visit Card Icon', defaultValue: 'MapPin' },
-                emailTitle: { type: 'text', label: 'Email Card Title', defaultValue: 'Email Us' },
-                emailIcon: { type: 'icon', label: 'Email Card Icon', defaultValue: 'Mail' },
-                hoursTitle: { type: 'text', label: 'Hours Card Title', defaultValue: 'Opening Hours' },
-                hoursIcon: { type: 'icon', label: 'Hours Card Icon', defaultValue: 'Clock' },
-                address: { type: 'multiline_text', label: 'Store Address', defaultValue: '123 Store Street\nCommerce City, ST 12345' },
-                email: { type: 'text', label: 'Primary Email' },
-                emailSecondary: { type: 'text', label: 'Support Email' },
-                phone: { type: 'text', label: 'Contact Phone' },
-                hours: { type: 'multiline_text', label: 'Business Hours', defaultValue: 'Mon - Fri: 9am - 6pm\nSat - Sun: 10am - 4pm' }
+                show: { type: 'toggle', label: 'Display section', defaultValue: true },
+                title: { type: 'text', label: 'Section headline', defaultValue: 'Get in Touch' },
+                description: {
+                    type: 'multiline_text',
+                    label: 'Section introduction',
+                    defaultValue: "Have questions? We'd love to hear from you. Reach out to our team via email, phone, or visit us at our store.",
+                },
+                visitCard: {
+                    type: 'object',
+                    label: 'Visit card',
+                    fields: {
+                        title: { type: 'text', label: 'Card title', defaultValue: 'Visit Us' },
+                        icon: { type: 'icon', label: 'Icon', defaultValue: 'MapPin' },
+                        address: {
+                            type: 'multiline_text',
+                            label: 'Address',
+                            defaultValue: '123 Store Street\nCommerce City, ST 12345',
+                        },
+                    },
+                },
+                emailCard: {
+                    type: 'object',
+                    label: 'Email card',
+                    fields: {
+                        title: { type: 'text', label: 'Card title', defaultValue: 'Email Us' },
+                        icon: { type: 'icon', label: 'Icon', defaultValue: 'Mail' },
+                        email: { type: 'text', label: 'Primary email' },
+                        emailSecondary: { type: 'text', label: 'Support email' },
+                        phone: { type: 'text', label: 'Phone number' },
+                    },
+                },
+                hoursCard: {
+                    type: 'object',
+                    label: 'Hours card',
+                    fields: {
+                        title: { type: 'text', label: 'Card title', defaultValue: 'Opening Hours' },
+                        icon: { type: 'icon', label: 'Icon', defaultValue: 'Clock' },
+                        hours: {
+                            type: 'multiline_text',
+                            label: 'Opening hours',
+                            defaultValue: 'Mon - Fri: 9am - 6pm\nSat - Sun: 10am - 4pm',
+                        },
+                    },
+                },
             }
         },
         values: {
             type: 'section',
             label: 'Brand Pillars',
             description: 'The core values that drive your business decisions.',
-            _styleSupports: sectionStyleSupports,
+            _styleSupports: clothingAboutSectionStyleSupports,
             _sourcePath: 'layoutConfig.pages.about.values',
             fields: {
                 show: { type: 'toggle', label: 'Display Values', defaultValue: true },

package/dist/editor/alignment-schemas/food.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"food.d.ts","sourceRoot":"","sources":["../../../src/editor/alignment-schemas/food.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAuB,MAAM,SAAS,CAAC;AASrE,eAAO,MAAM,UAAU,EAAE,qBAsexB,CAAC"}
+{"version":3,"file":"food.d.ts","sourceRoot":"","sources":["../../../src/editor/alignment-schemas/food.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAuB,MAAM,SAAS,CAAC;AAgBrE,eAAO,MAAM,UAAU,EAAE,qBAwhBxB,CAAC"}

package/dist/editor/alignment-schemas/food.js

@@ -4,6 +4,12 @@ const sectionStyleSupports = {
     border: true,
     typography: true,
 };
+const aboutSectionStyleSupports = {
+    spacing: false,
+    colors: false,
+    border: false,
+    typography: false,
+};
 export const FoodSchema = {
     home: {
         hero: {
@@ -329,49 +335,57 @@ export const FoodSchema = {
     about: {
         aboutHero: {
             type: 'section',
-            label: 'About Hero',
-            description: 'Top banner section of the About page.',
-            _styleSupports: sectionStyleSupports,
+            label: 'Mission banner',
+            description: 'Top banner on the about page.',
+            _styleSupports: aboutSectionStyleSupports,
             _sourcePath: 'layoutConfig.pages.about.aboutHero',
             fields: {
-                show: { type: 'toggle', label: 'Show Section', defaultValue: true },
-                title: { type: 'text', label: 'Page Title' },
-                subtitle: { type: 'multiline_text', label: 'Subtitle / Tagline' },
-                backgroundImage: { type: 'image', label: 'Hero Background Image' },
-                showBadge: { type: 'toggle', label: 'Show Badge', defaultValue: true },
-                badgeText: { type: 'text', label: 'Badge Text', defaultValue: 'Est. 2024' }
-            }
+                show: { type: 'toggle', label: 'Display header', defaultValue: true },
+                badgeText: {
+                    type: 'text',
+                    label: 'Badge text',
+                    description: 'Short label above the headline',
+                    defaultValue: 'Est. 2024',
+                },
+                badgeTextColor: { type: 'color', label: 'Badge text colour', defaultValue: '#ffffff' },
+                title: { type: 'text', label: 'Mission headline' },
+                subtitle: { type: 'multiline_text', label: 'Core mission' },
+                titleColor: { type: 'color', label: 'Headline colour', defaultValue: '#ffffff' },
+                subtitleColor: { type: 'color', label: 'Mission text colour', defaultValue: '#e5e7eb' },
+                backgroundImage: { type: 'image', label: 'Mission image' },
+                imageOverlayColor: {
+                    type: 'color',
+                    label: 'Image overlay',
+                    defaultValue: '#000000',
+                },
+                showBadge: { type: 'toggle', label: 'Show badge', defaultValue: true },
+            },
         },
         ourStory: {
             type: 'section',
-            label: 'Our Story',
-            description: 'Main narrative content for the About page.',
-            _styleSupports: sectionStyleSupports,
+            label: 'Brand journey',
+            description: 'Main narrative on the about page.',
+            _styleSupports: aboutSectionStyleSupports,
             _sourcePath: 'layoutConfig.pages.about.ourStory',
             fields: {
-                show: { type: 'toggle', label: 'Show Section', defaultValue: true },
-                label: { type: 'text', label: 'Section Label (e.g. Who We Are)' },
-                title: { type: 'text', label: 'Main Title' },
-                content: { type: 'multiline_text', label: 'Story Content' },
-                image: { type: 'image', label: 'Story / Team Image' },
-                showGallery: { type: 'toggle', label: 'Show Image Gallery (instead of single image)', defaultValue: false },
-                galleryImages: {
-                    type: 'array',
-                    label: 'Gallery Images',
-                    itemSchema: {
-                        image: { type: 'image', label: 'Gallery Image' },
-                        caption: { type: 'text', label: 'Caption (optional)' }
-                    }
+                show: { type: 'toggle', label: 'Display story', defaultValue: true },
+                label: { type: 'text', label: 'Section label', defaultValue: 'Who We Are' },
+                title: { type: 'text', label: 'Section title', defaultValue: 'Our Journey' },
+                content: { type: 'multiline_text', label: 'The narrative' },
+                image: { type: 'image', label: 'Story / team image' },
+                teamBadgeTitle: { type: 'text', label: 'Image caption title', defaultValue: 'The Dream Team' },
+                teamBadgeSubtitle: {
+                    type: 'text',
+                    label: 'Image caption subtitle',
+                    defaultValue: 'Working together to serve you better',
                 },
-                teamBadgeTitle: { type: 'text', label: 'Team Badge Title', defaultValue: 'The Dream Team' },
-                teamBadgeSubtitle: { type: 'text', label: 'Team Badge Subtitle', defaultValue: 'Working together to serve you better' }
-            }
+            },
         },
         values: {
             type: 'section',
-            label: 'Our Values',
-            description: 'Core pillars that define your restaurant brand.',
-            _styleSupports: sectionStyleSupports,
+            label: 'Brand pillars',
+            description: 'Core pillars beside your story.',
+            _styleSupports: aboutSectionStyleSupports,
             _sourcePath: 'layoutConfig.pages.about.values',
             fields: {
                 show: { type: 'toggle', label: 'Show Section', defaultValue: true },
@@ -394,15 +408,16 @@ export const FoodSchema = {
         },
         statsSection: {
             type: 'section',
-            label: 'Key Stats',
-            description: 'Numeric highlights such as happy customers, menu items, and years of experience.',
-            _styleSupports: sectionStyleSupports,
+            label: 'Milestones & impact',
+            description: 'Numeric highlights for your restaurant.',
+            _styleSupports: aboutSectionStyleSupports,
             _sourcePath: 'layoutConfig.pages.about.statsSection',
             fields: {
-                show: { type: 'toggle', label: 'Show Section', defaultValue: true },
+                show: { type: 'toggle', label: 'Display metrics', defaultValue: true },
                 items: {
                     type: 'array',
-                    label: 'Stat Items',
+                    label: 'Milestone items',
+                    maxSlides: 4,
                     defaultValue: [
                         { label: 'Happy Foodies', value: '15k+' },
                         { label: 'Menu Items', value: '40+' },
@@ -418,19 +433,59 @@ export const FoodSchema = {
         },
         contactInfoSection: {
             type: 'section',
-            label: 'Quick Contact',
-            description: 'Contact reference cards showing address, email, and opening hours.',
-            _styleSupports: sectionStyleSupports,
+            label: 'Location & availability',
+            description: 'Contact cards for address, email, and hours.',
+            _styleSupports: aboutSectionStyleSupports,
             _sourcePath: 'layoutConfig.pages.about.contactInfoSection',
             fields: {
-                show: { type: 'toggle', label: 'Show Section', defaultValue: true },
-                title: { type: 'text', label: 'Section Heading', defaultValue: 'Get in Touch' },
-                description: { type: 'multiline_text', label: 'Section Description', defaultValue: "Have questions? We'd love to hear from you. Reach out to our team via email, phone, or visit us at our store." },
-                showAddress: { type: 'toggle', label: 'Show Address Card', defaultValue: true },
-                showEmail: { type: 'toggle', label: 'Show Email / Phone Card', defaultValue: true },
-                showHours: { type: 'toggle', label: 'Show Opening Hours Card', defaultValue: true }
-            }
-        }
+                show: { type: 'toggle', label: 'Display section', defaultValue: true },
+                title: { type: 'text', label: 'Section headline', defaultValue: 'Get in Touch' },
+                description: {
+                    type: 'multiline_text',
+                    label: 'Section introduction',
+                    defaultValue: "Have questions? We'd love to hear from you. Reach out to our team via email, phone, or visit us at our store.",
+                },
+                visitCard: {
+                    type: 'object',
+                    label: 'Visit card',
+                    fields: {
+                        title: { type: 'text', label: 'Card title', defaultValue: 'Visit Us' },
+                        icon: { type: 'icon', label: 'Icon', defaultValue: 'MapPin' },
+                        address: {
+                            type: 'multiline_text',
+                            label: 'Address',
+                            defaultValue: '123 Store Street\nCommerce City, ST 12345',
+                        },
+                    },
+                },
+                emailCard: {
+                    type: 'object',
+                    label: 'Email card',
+                    fields: {
+                        title: { type: 'text', label: 'Card title', defaultValue: 'Email Us' },
+                        icon: { type: 'icon', label: 'Icon', defaultValue: 'Mail' },
+                        email: { type: 'text', label: 'Primary email' },
+                        emailSecondary: { type: 'text', label: 'Support email' },
+                        phone: { type: 'text', label: 'Phone number', defaultValue: '+1 (555) 123-4567' },
+                        ctaLabel: { type: 'text', label: 'Button text', defaultValue: 'Send a message' },
+                        ctaLink: { type: 'text', label: 'Button link', defaultValue: '/contact' },
+                    },
+                },
+                hoursCard: {
+                    type: 'object',
+                    label: 'Hours card',
+                    fields: {
+                        title: { type: 'text', label: 'Card title', defaultValue: 'Opening Hours' },
+                        icon: { type: 'icon', label: 'Icon', defaultValue: 'Clock' },
+                        hours: {
+                            type: 'multiline_text',
+                            label: 'Opening hours',
+                            defaultValue: 'Mon - Fri: 9am - 6pm\nSat - Sun: 10am - 4pm',
+                        },
+                    },
+                },
+            },
+        },
     },
     contact: {
         contactHeader: {

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,KAA6E,MAAM,OAAO,CAAC;AAClG,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAoB/C,OAAO,EAA4B,eAAe,EAAgB,MAAM,mBAAmB,CAAC;AA0F5F,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,CAqzD5D,CAAC"}
+{"version":3,"file":"PayazaFormEditor.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/PayazaFormEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6E,MAAM,OAAO,CAAC;AAClG,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAoB/C,OAAO,EAA4B,eAAe,EAAgB,MAAM,mBAAmB,CAAC;AA2F5F,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,CAi0D5D,CAAC"}

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

@@ -23,6 +23,7 @@ import { IframePreviewMessageBridge } from './IframePreviewMessageBridge.js';
 import { EditorCanvasPreview } from './EditorCanvasPreview.js';
 import { awaitPreviewFlushAck } from '../../preview/canvas/preview-flush-await.js';
 import { BlockStylesInspector } from './components/BlockStylesInspector.js';
+import { resolveStyleSupports } from './payaza-style-sanitize.js';
 import { CanvasGranularInspector } from './components/CanvasGranularInspector.js';
 import { SectionSchemaInspector } from './components/SectionSchemaInspector.js';
 import { isLayoutPageEditable } from '../alignment-schemas/metadata.js';
@@ -658,6 +659,17 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
             return undefined;
         return sch._styleSupports;
     }, [pageSchema, selectedSection]);
+    const selectedSectionHasStyleControls = useMemo(() => {
+        if (!selectedSection)
+            return false;
+        const sup = resolveStyleSupports(selectedSectionStyleSupports);
+        return Boolean(sup.spacing || sup.colors || sup.border || sup.typography);
+    }, [selectedSection, selectedSectionStyleSupports]);
+    useEffect(() => {
+        if (!selectedSectionHasStyleControls && blockSubTab === 'styles') {
+            setBlockSubTab('settings');
+        }
+    }, [selectedSectionHasStyleControls, blockSubTab]);
     const selectedBlockStyleEntries = useMemo(() => selectedSection
         ? getPayazaSectionStyleEntries(data, activePageId, selectedSection)
         : {}, [data, activePageId, selectedSection]);
@@ -1138,7 +1150,7 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
     // Inspector inner content — shared between desktop ResizableSidebar and mobile overlay
     const inspectorContent = (_jsxs("div", { className: "relative flex h-full flex-col bg-[#fbfbfc]", id: "tour-editor-sidebar", children: [_jsxs("div", { "data-payaza-sidebar": "inspector", className: "sticky top-0 z-30 bg-[#fbfbfc]", children: [!isMobileView && (_jsxs("div", { className: "flex min-h-[48px] items-center gap-2 border-b border-[#dcdcde] px-3 py-2", children: [_jsx(Box, { className: `h-4 w-4 shrink-0 ${selectedSection ? 'text-[#440066]' : 'text-[#c3c4c7]'}`, strokeWidth: 2, "aria-hidden": true }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: `truncate text-[12px] font-semibold leading-tight ${selectedSection ? 'text-[#1b0029]' : 'text-[#787c82]'}`, children: selectedSection ? (selectedSectionLabel ?? selectedSection) : 'Block Inspector' }), selectedSection && (_jsx("p", { className: "truncate text-[11px] leading-tight text-[#787c82]", children: pages.find((p) => p.id === activePageId)?.name ?? activePageId }))] })] })), _jsxs("div", { "data-payaza-sidebar-tabs": true, className: "-mb-px flex border-b border-[#dcdcde]", role: "tablist", "aria-label": "Block inspector", children: [_jsxs("button", { type: "button", role: "tab", "aria-selected": blockSubTab === 'settings', title: "Settings", onClick: () => setBlockSubTab('settings'), className: `relative mb-[-1px] flex items-center justify-center gap-1.5 border-b-[3px] px-3 py-2.5 text-[12px] font-semibold transition-colors ${blockSubTab === 'settings'
                                     ? 'border-[#440066] font-bold text-[#1b0029]'
-                                    : 'border-transparent font-medium text-[#646970] hover:bg-white/70 hover:text-[#1b0029]'}`, children: [_jsx(Settings2, { size: 17, strokeWidth: 2, "aria-hidden": true }), _jsx("span", { children: "Settings" })] }), !isMobileView && (_jsxs("button", { type: "button", role: "tab", "aria-selected": blockSubTab === 'styles', title: "Styles", onClick: () => setBlockSubTab('styles'), className: `relative mb-[-1px] flex items-center justify-center gap-1.5 border-b-[3px] px-3 py-2.5 text-[12px] font-semibold transition-colors ${blockSubTab === 'styles'
+                                    : 'border-transparent font-medium text-[#646970] hover:bg-white/70 hover:text-[#1b0029]'}`, children: [_jsx(Settings2, { size: 17, strokeWidth: 2, "aria-hidden": true }), _jsx("span", { children: "Settings" })] }), !isMobileView && selectedSectionHasStyleControls && (_jsxs("button", { type: "button", role: "tab", "aria-selected": blockSubTab === 'styles', title: "Styles", onClick: () => setBlockSubTab('styles'), className: `relative mb-[-1px] flex items-center justify-center gap-1.5 border-b-[3px] px-3 py-2.5 text-[12px] font-semibold transition-colors ${blockSubTab === 'styles'
                                     ? 'border-[#440066] font-bold text-[#1b0029]'
                                     : 'border-transparent font-medium text-[#646970] hover:bg-white/70 hover:text-[#1b0029]'}`, children: [_jsx(Palette, { size: 17, strokeWidth: 2, "aria-hidden": true }), _jsx("span", { children: "Styles" })] }))] })] }), _jsx("div", { className: "payaza-form-editor custom-scrollbar isolate min-h-0 flex-1 overflow-y-auto scroll-pt-1 bg-white px-2 py-0", children: !selectedSection ? (_jsxs("div", { className: "flex flex-col items-center justify-center px-5 py-16 text-center", children: [_jsx(Box, { className: "mb-3 h-8 w-8 text-[#dcdcde]", strokeWidth: 1.5, "aria-hidden": true }), _jsx("p", { className: "text-[13px] font-semibold text-[#50575e]", children: "No block selected" }), _jsx("p", { className: "mt-1.5 max-w-[200px] text-[12px] leading-relaxed text-[#787c82]", children: "Click on any section in the canvas or select one from the List View." })] })) : blockSubTab === 'styles' && !isMobileView ? (canvasElementFocus?.elementKind === 'group' ? (_jsx(BlockStylesInspector, { supports: { spacing: true, colors: true, border: true, typography: true }, value: rawGroupStyle, onChange: (next) => {
                         if (canvasElementFocus) {

package/dist/editor/payaza-form/components/ImageField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/ImageField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAiHhD,CAAC"}
+{"version":3,"file":"ImageField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/ImageField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4GhD,CAAC"}

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

@@ -19,7 +19,7 @@ export const ImageField = ({ label, value, onChange, placeholder, }) => {
                 onChange(url.trim());
         }
     }, [isAssetLibraryAvailable, onOpenAssetSelect, onChange]);
-    return (_jsxs("div", { className: "group/field flex flex-col gap-2.5", children: [_jsxs("div", { className: "flex items-center justify-between px-0.5", children: [_jsx("label", { className: "text-[11px] font-semibold uppercase tracking-[0.06em] text-[#1b0029]/45 transition-colors group-focus-within/field:text-[#1b0029]/70", children: label }), hasImage && (_jsx("span", { className: "rounded border border-[#440066]/20 bg-[#440066]/08 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-[#440066]", children: "Set" }))] }), _jsxs("div", { className: "space-y-3", children: [hasImage ? (_jsxs("div", { className: "group/img relative flex aspect-[16/9] items-center justify-center overflow-hidden rounded-md border border-black/[0.1] bg-[#fafafa] shadow-[0_1px_2px_rgba(27,0,41,0.04)] transition-colors hover:border-black/[0.14]", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("img", { src: value, alt: label, className: "h-full w-full object-cover transition-transform duration-500 group-hover/img:scale-[1.02]", onError: (e) => {
+    return (_jsxs("div", { className: "group/field flex flex-col gap-2.5", children: [_jsx("div", { className: "flex items-center justify-between px-0.5", children: _jsx("label", { className: "text-[11px] font-semibold uppercase tracking-[0.06em] text-[#1b0029]/45 transition-colors group-focus-within/field:text-[#1b0029]/70", children: label }) }), _jsxs("div", { className: "space-y-3", children: [hasImage ? (_jsxs("div", { className: "group/img relative flex aspect-[16/9] items-center justify-center overflow-hidden rounded-md border border-black/[0.1] bg-[#fafafa] shadow-[0_1px_2px_rgba(27,0,41,0.04)] transition-colors hover:border-black/[0.14]", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("img", { src: value, alt: label, className: "h-full w-full object-cover transition-transform duration-500 group-hover/img:scale-[1.02]", onError: (e) => {
                                     e.target.style.display = 'none';
                                 } }), _jsx("div", { className: `absolute inset-0 flex flex-col items-center justify-center gap-2 bg-[#1b0029]/45 backdrop-blur-[2px] transition-opacity duration-200 ${isHovered ? 'opacity-100' : 'opacity-0'}`, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: () => onChange(''), className: "flex h-9 w-9 items-center justify-center rounded-md border border-white/40 bg-white/15 text-white transition-colors hover:bg-[#D16253]/90", title: "Remove image", children: _jsx(X, { size: 16, strokeWidth: 2.5 }) }), _jsxs("button", { type: "button", onClick: handleReplace, className: "flex items-center gap-2 rounded-md bg-white px-4 py-2 text-[11px] font-semibold text-[#1b0029] shadow-sm transition-transform hover:scale-[1.02] active:scale-[0.98]", title: isAssetLibraryAvailable ? 'Replace from library' : 'Replace', children: [_jsx(Upload, { size: 14, strokeWidth: 2.5 }), "Replace"] })] }) })] })) : (_jsxs("button", { type: "button", onClick: () => {
                             if (isAssetLibraryAvailable)

package/dist/editor/payaza-form/components/ToggleField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/ToggleField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC;AAOD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqCjD,CAAC"}
+{"version":3,"file":"ToggleField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/ToggleField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC;AAOD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuCjD,CAAC"}

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useId } from 'react';
+import { cn } from '../../../lib/utils/index.js';
 function coerceBoolean(v) {
     if (v === true || v === 'true' || v === 1 || v === '1')
         return true;
@@ -11,5 +12,5 @@ function coerceBoolean(v) {
 export const ToggleField = memo(({ label, value, onChange }) => {
     const on = coerceBoolean(value);
     const id = useId();
-    return (_jsxs("div", { className: `flex w-full select-none items-center justify-between gap-4 rounded-md border px-3 py-3 transition-colors ${on ? 'border-[#440066]/25 bg-white' : 'border-black/[0.06] bg-[#fafafa] hover:border-black/[0.1]'}`, children: [_jsx("span", { className: "min-w-0 flex-1 text-[12px] font-medium leading-snug text-[#1b0029]", children: label }), _jsxs("label", { htmlFor: id, className: "relative inline-flex h-[22px] w-[38px] shrink-0 cursor-pointer rounded-full outline-none ring-offset-2 focus-within:ring-2 focus-within:ring-[#440066]/40", children: [_jsx("input", { id: id, type: "checkbox", className: "sr-only", checked: on, onChange: (e) => onChange(e.target.checked) }), _jsx("span", { className: `pointer-events-none absolute inset-0 rounded-full transition-colors ${on ? 'bg-[#440066]' : 'bg-[#1b0029]/15'}`, "aria-hidden": true }), _jsx("span", { className: `pointer-events-none absolute top-[2px] left-[3px] h-[18px] w-[18px] rounded-full bg-white shadow-sm transition-transform duration-200 ${on ? 'translate-x-[17px]' : 'translate-x-0'}`, "aria-hidden": true })] })] }));
+    return (_jsxs("div", { "data-payaza-toggle": true, className: `flex w-full select-none items-center justify-between gap-4 rounded-md border px-3 py-3 transition-colors ${on ? 'border-[#440066]/25 bg-white' : 'border-black/[0.06] bg-[#fafafa] hover:border-black/[0.1]'}`, children: [_jsx("span", { className: "min-w-0 flex-1 text-[12px] font-medium leading-snug text-[#1b0029]", children: label }), _jsxs("label", { htmlFor: id, "data-payaza-switch": true, className: cn('inline-flex h-6 w-11 shrink-0 cursor-pointer items-center overflow-hidden rounded-full p-0.5 transition-colors outline-none', 'ring-offset-2 focus-within:ring-2 focus-within:ring-[#440066]/40', on ? 'bg-[#440066]' : 'bg-[#1b0029]/15'), children: [_jsx("input", { id: id, type: "checkbox", className: "sr-only", checked: on, onChange: (e) => onChange(e.target.checked) }), _jsx("span", { "data-payaza-switch-thumb": true, className: cn('block h-5 w-5 shrink-0 rounded-full bg-white shadow-sm transition-[margin] duration-200 ease-out', on ? 'ml-auto' : 'ml-0'), "aria-hidden": true })] })] }));
 });

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;AA4TpD;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,WAAW,CAAC,EAAE,iBAAiB,GAC9B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAqerB;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,CAyLnB;AAED;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,WAAW,EAAE,iBAAiB,EAC9B,WAAW,EAAE,WAAW,EACxB,OAAO,GAAE;IAAE,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAAmC,GAC3E,iBAAiB,CAMnB;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"}
+{"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;AAoUpD;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,WAAW,CAAC,EAAE,iBAAiB,GAC9B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAqgBrB;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,CA6NnB;AAED;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,WAAW,EAAE,iBAAiB,EAC9B,WAAW,EAAE,WAAW,EACxB,OAAO,GAAE;IAAE,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAAmC,GAC3E,iBAAiB,CAMnB;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

@@ -2,7 +2,7 @@ import { deepClone } from '../../lib/utils/index.js';
 import { transformToStoreConfig } from './data-transformer.js';
 import { ensureClothingMinimalHomeBlocksInPageData } from '../blocks/migrate-clothing-minimal.js';
 import { BOOKING_DEFAULT_TESTIMONIALS, normalizeBookingTestimonialItems, } from '../../layouts/booking/components/booking-testimonial-defaults.js';
-import { BOOKING_DEFAULT_ABOUT_STATS, BOOKING_DEFAULT_ABOUT_VALUES, mergeBookingAboutItemsSection, } from '../../layouts/booking/components/booking-about-defaults.js';
+import { BOOKING_DEFAULT_ABOUT_STATS, BOOKING_DEFAULT_ABOUT_VALUES, CLOTHING_DEFAULT_ABOUT_STATS, CLOTHING_DEFAULT_ABOUT_VALUES, CLOTHING_MINIMAL_DEFAULT_ABOUT_STATS, CLOTHING_MINIMAL_DEFAULT_ABOUT_VALUES, FOOD_DEFAULT_ABOUT_STATS, FOOD_DEFAULT_ABOUT_VALUES, mergeBookingAboutItemsSection, normalizeAboutContactInfoCards, } from '../../layouts/booking/components/booking-about-defaults.js';
 import { mergeBookingFooterSection } from '../../layouts/booking/components/booking-footer-defaults.js';
 function sliderHasUsableContent(slider) {
     if (!slider)
@@ -307,6 +307,21 @@ export function extractActualPageData(storeConfig, pageId, requirement) {
                             (sectionKey === 'hero' || sectionKey === 'team' || sectionKey === 'promoBanner')) {
                             pageDataMap[sectionKey] = enrichBookingSectionImages(sectionKey, deepClone(value), layoutConfig);
                         }
+                        else if (pageId === 'about' &&
+                            sectionKey === 'contact-info' &&
+                            (requirement.layoutId === 'clothing' || requirement.layoutId === 'booking')) {
+                            pageDataMap[sectionKey] = normalizeAboutContactInfoCards(deepClone(value));
+                        }
+                        else if (pageId === 'about' &&
+                            sectionKey === 'contactInfoSection' &&
+                            requirement.layoutId === 'food') {
+                            pageDataMap[sectionKey] = normalizeAboutContactInfoCards(deepClone(value));
+                        }
+                        else if (pageId === 'about' &&
+                            sectionKey === 'contactSection' &&
+                            requirement.layoutId === 'clothing-minimal') {
+                            pageDataMap[sectionKey] = normalizeAboutContactInfoCards(deepClone(value));
+                        }
                         else {
                             pageDataMap[sectionKey] = deepClone(value);
                         }
@@ -605,10 +620,15 @@ export function extractActualPageData(storeConfig, pageId, requirement) {
         }
         // Contact-info section (note: key has hyphen, so use bracket notation)
         if (aboutPage['contact-info'] || layoutSections['contact-info']) {
-            pageDataMap['contact-info'] = {
+            const contactRaw = {
                 show: true,
-                ...(aboutPage['contact-info'] || layoutSections['contact-info'] || {}),
+                ...(layoutSections['contact-info'] || {}),
+                ...(aboutPage['contact-info'] || {}),
             };
+            pageDataMap['contact-info'] =
+                requirement?.layoutId === 'clothing' || requirement?.layoutId === 'booking'
+                    ? normalizeAboutContactInfoCards(contactRaw)
+                    : contactRaw;
         }
         // Values section
         if (aboutPage.values || layoutSections.values) {
@@ -629,7 +649,10 @@ export function extractActualPageData(storeConfig, pageId, requirement) {
             pageDataMap.statsSection = { show: true, ...aboutPage.statsSection };
         }
         if (aboutPage.contactInfoSection) {
-            pageDataMap.contactInfoSection = { show: true, ...aboutPage.contactInfoSection };
+            pageDataMap.contactInfoSection = normalizeAboutContactInfoCards({
+                show: true,
+                ...(aboutPage.contactInfoSection || {}),
+            });
         }
         // Clothing-minimal section keys
         if (aboutPage.aboutHeader || layoutSections.aboutHeader) {
@@ -647,11 +670,11 @@ export function extractActualPageData(storeConfig, pageId, requirement) {
             };
         }
         if (aboutPage.contactSection || layoutSections.contactSection) {
-            pageDataMap.contactSection = {
+            pageDataMap.contactSection = normalizeAboutContactInfoCards({
                 show: true,
                 ...(layoutSections.contactSection || {}),
                 ...(aboutPage.contactSection || {}),
-            };
+            });
         }
         // Legacy support for old structure
         if (layoutSections.aboutHeader)
@@ -771,14 +794,27 @@ export function mergeRequirementWithActualData(requirement, storeConfig, pageId,
                     typeof actualSection === 'object' &&
                     !Array.isArray(requirementSection) &&
                     !Array.isArray(actualSection)) {
-                    mergedPageData[sectionKey] = mergeBookingAboutItemsSection(actualSection, requirementSection, BOOKING_DEFAULT_ABOUT_VALUES);
+                    mergedPageData[sectionKey] = mergeBookingAboutItemsSection(actualSection, requirementSection, requirement.layoutId === 'clothing'
+                        ? CLOTHING_DEFAULT_ABOUT_VALUES
+                        : requirement.layoutId === 'food'
+                            ? FOOD_DEFAULT_ABOUT_VALUES
+                            : requirement.layoutId === 'clothing-minimal'
+                                ? CLOTHING_MINIMAL_DEFAULT_ABOUT_VALUES
+                                : BOOKING_DEFAULT_ABOUT_VALUES);
                 }
-                else if (sectionKey === 'stats' &&
+                else if ((sectionKey === 'stats' || sectionKey === 'statsSection') &&
                     typeof requirementSection === 'object' &&
                     typeof actualSection === 'object' &&
                     !Array.isArray(requirementSection) &&
                     !Array.isArray(actualSection)) {
-                    mergedPageData[sectionKey] = mergeBookingAboutItemsSection(actualSection, requirementSection, BOOKING_DEFAULT_ABOUT_STATS);
+                    const statDefaults = requirement.layoutId === 'clothing'
+                        ? CLOTHING_DEFAULT_ABOUT_STATS
+                        : requirement.layoutId === 'food'
+                            ? FOOD_DEFAULT_ABOUT_STATS
+                            : requirement.layoutId === 'clothing-minimal'
+                                ? CLOTHING_MINIMAL_DEFAULT_ABOUT_STATS
+                                : BOOKING_DEFAULT_ABOUT_STATS;
+                    mergedPageData[sectionKey] = mergeBookingAboutItemsSection(actualSection, requirementSection, statDefaults);
                 }
                 else if (sectionKey === 'footer' &&
                     typeof requirementSection === 'object' &&
@@ -794,6 +830,22 @@ export function mergeRequirementWithActualData(requirement, storeConfig, pageId,
                     !Array.isArray(actualSection)) {
                     mergedPageData[sectionKey] = mergeLookbookImagesWithDefaults(actualSection, requirementSection);
                 }
+                else if (sectionKey === 'contact-info' &&
+                    (requirement.layoutId === 'clothing' || requirement.layoutId === 'booking') &&
+                    typeof requirementSection === 'object' &&
+                    typeof actualSection === 'object' &&
+                    !Array.isArray(requirementSection) &&
+                    !Array.isArray(actualSection)) {
+                    mergedPageData[sectionKey] = normalizeAboutContactInfoCards(deepMerge(requirementSection, actualSection));
+                }
+                else if ((sectionKey === 'contactInfoSection' || sectionKey === 'contactSection') &&
+                    (requirement.layoutId === 'food' || requirement.layoutId === 'clothing-minimal') &&
+                    typeof requirementSection === 'object' &&
+                    typeof actualSection === 'object' &&
+                    !Array.isArray(requirementSection) &&
+                    !Array.isArray(actualSection)) {
+                    mergedPageData[sectionKey] = normalizeAboutContactInfoCards(deepMerge(requirementSection, actualSection));
+                }
                 else if (Array.isArray(requirementSection) && Array.isArray(actualSection)) {
                     // Merge arrays
                     mergedPageData[sectionKey] = mergeArrays(requirementSection, actualSection);