@deneb-ui/ui 2.0.94 → 2.0.96

package/dist/EditableSection.js

@@ -7,25 +7,38 @@ const responsive_1 = require("./utils/responsive");
 const SECTION_PADDING_MAP = responsive_1.RESPONSIVE_SECTION_PADDING;
 /**
  * EditableSection standardizes section spacing and automatically applies the required
- * `data-design-section` marker for 100% fivora contract compliance.
+ * `data-design-section` and `data-section-id` markers for 100% fivora contract compliance,
+ * with first-class support for section deletion/hiding and instant centering.
  */
-function EditableSection({ as: Component = 'section', name, padding = 'lg', bg, color, maxWidth, border, className = '', style, children, ...props }) {
+function EditableSection({ as: Component = "section", name, padding = "lg", bg, color, maxWidth, border, align, center, hidden, order, container, containerClassName = "", className = "", style, id, children, ...props }) {
     const resolvedPadding = padding !== undefined ? (SECTION_PADDING_MAP[String(padding)] || String(padding)) : undefined;
     const resolvedBorder = border === true
-        ? '1px solid var(--border-color, rgba(226, 232, 240, 0.8))'
-        : typeof border === 'string'
+        ? "1px solid var(--border-color, rgba(226, 232, 240, 0.8))"
+        : typeof border === "string"
             ? border
             : undefined;
     const stylePath = `${name}.section`;
-    const { cssVars: styleVars } = (0, useComponentStyle_1.useComponentStyle)(stylePath, 'section');
+    const { cssVars: styleVars } = (0, useComponentStyle_1.useComponentStyle)(stylePath, "section");
+    const resolvedAlign = align || (center ? "center" : undefined);
     const sectionStyle = {
         ...(resolvedPadding ? { padding: resolvedPadding } : {}),
         ...(bg ? { background: bg } : {}),
         ...(color ? { color } : {}),
-        ...(maxWidth !== undefined ? { maxWidth, marginLeft: 'auto', marginRight: 'auto' } : {}),
+        ...(maxWidth !== undefined && !container ? { maxWidth, marginLeft: "auto", marginRight: "auto" } : {}),
         ...(resolvedBorder ? { borderBottom: resolvedBorder } : {}),
+        ...(resolvedAlign ? { textAlign: resolvedAlign } : {}),
+        ...(hidden ? { display: "none" } : {}),
+        ...(order !== undefined && order !== "" ? { order: Number(order) } : {}),
         ...styleVars,
         ...style,
     };
-    return ((0, jsx_runtime_1.jsx)(Component, { "data-design-section": name, "data-preview-style-target": stylePath, "data-preview-style-type": "section", className: `deneb-section editable-section ${className}`.trim(), style: sectionStyle, ...props, children: children }));
+    const content = container ? ((0, jsx_runtime_1.jsx)("div", { className: `deneb-section-container ${containerClassName}`.trim(), style: {
+            maxWidth: maxWidth !== undefined ? maxWidth : "1280px",
+            marginLeft: "auto",
+            marginRight: "auto",
+            paddingLeft: "1rem",
+            paddingRight: "1rem",
+            ...(resolvedAlign === "center" ? { display: "flex", flexDirection: "column", alignItems: "center" } : {}),
+        }, children: children })) : (children);
+    return ((0, jsx_runtime_1.jsx)(Component, { id: id || name, "data-design-section": name, "data-section-id": name, "data-section-visible": hidden ? "false" : "true", "data-preview-style-target": stylePath, "data-preview-style-type": "section", className: `deneb-section editable-section ${className}`.trim(), style: sectionStyle, ...props, children: content }));
 }

package/dist/EditableTestimonialSection.js

@@ -111,7 +111,7 @@ function EditableTestimonialSection({ basePath = 'testimonials', badge = 'WORDS
     const effectiveSubheading = subheading ?? contentRecord[basePath]?.subheading ?? 'Reflections and feedback from verified customers and dedicated regulars.';
     const hasCustomPy = /(^|\s)(p|py|pt)-/.test(className);
     const defaultPadding = hasCustomPy ? '' : 'py-6 sm:py-8';
-    return ((0, jsx_runtime_1.jsx)("section", { "data-preview-page-key": basePath, "data-design-section": basePath, className: `editable-testimonial-section w-full ${defaultPadding} px-3 sm:px-6 lg:px-8 ${className}`.trim(), style: style, ...props, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-full mx-auto", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center max-w-3xl mx-auto space-y-3 mb-6 sm:mb-8 px-2", children: [badge && ((0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-slate-100 text-slate-800 border border-slate-200 dark:bg-slate-800/80 dark:text-lime-400 dark:border-lime-400/20 text-xs uppercase tracking-widest font-black shadow-sm", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `testimonials.badge`, children: badge }) })), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `testimonials.heading`, className: "font-heading text-2xl xs:text-3xl sm:text-4xl lg:text-5xl font-black text-slate-900 dark:text-white tracking-tight", children: effectiveHeading }), (0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `testimonials.subheading`, className: "text-xs sm:text-base text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl mx-auto", children: effectiveSubheading })] }), (0, jsx_runtime_1.jsx)("div", { "data-preview-list-path": `testimonials.testimonials`, className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5 sm:gap-7 [grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))] w-full", children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(TestimonialCard, { item: item, index: index, maxStars: maxStars, cardClassName: cardClassName }, item.id || String(index)))) })] }) }));
+    return ((0, jsx_runtime_1.jsx)("section", { id: props.id || basePath || "testimonials", "data-section-id": props["data-section-id"] || basePath || "testimonials", "data-preview-page-key": basePath, "data-design-section": basePath, className: `editable-testimonial-section w-full ${defaultPadding} px-3 sm:px-6 lg:px-8 ${className}`.trim(), style: style, ...props, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-full mx-auto", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center max-w-3xl mx-auto space-y-3 mb-6 sm:mb-8 px-2", children: [badge && ((0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-slate-100 text-slate-800 border border-slate-200 dark:bg-slate-800/80 dark:text-lime-400 dark:border-lime-400/20 text-xs uppercase tracking-widest font-black shadow-sm", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `testimonials.badge`, children: badge }) })), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `testimonials.heading`, className: "font-heading text-2xl xs:text-3xl sm:text-4xl lg:text-5xl font-black text-slate-900 dark:text-white tracking-tight", children: effectiveHeading }), (0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `testimonials.subheading`, className: "text-xs sm:text-base text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl mx-auto", children: effectiveSubheading })] }), (0, jsx_runtime_1.jsx)("div", { "data-preview-list-path": `testimonials.testimonials`, className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5 sm:gap-7 [grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))] w-full", children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(TestimonialCard, { item: item, index: index, maxStars: maxStars, cardClassName: cardClassName }, item.id || String(index)))) })] }) }));
 }
 // Canonical alias
 exports.TestimonialSection = EditableTestimonialSection;

package/dist/EditableText.d.ts

@@ -27,6 +27,10 @@ export interface EditableTextProps extends React.HTMLAttributes<HTMLElement> {
      * Field path in siteData (e.g. "home.heroTitle").
      */
     id?: string;
+    /**
+     * Field path alias (e.g. "hero.title").
+     */
+    fieldPath?: string;
     /**
      * Explicit fivora visual editing attribute for strict static analysis.
      */
@@ -81,7 +85,7 @@ export interface EditableTextProps extends React.HTMLAttributes<HTMLElement> {
  * EditableText provides full typography controls (color, size, weight, line-height, alignment, transform, variants)
  * alongside strict Fivora visual editing bindings.
  */
-export declare function EditableText({ id, 'data-preview-field-path': previewFieldPath, defaultValue, placeholder, children, as: ComponentOverride, variant, color, size, weight, lineHeight, align, transform, letterSpacing, fontFamily, style, className, ...props }: EditableTextProps): React.JSX.Element;
+export declare function EditableText({ id, 'data-preview-field-path': previewFieldPath, fieldPath, defaultValue, placeholder, children, as: ComponentOverride, variant, color, size, weight, lineHeight, align, transform, letterSpacing, fontFamily, style, className, ...props }: EditableTextProps): React.JSX.Element;
 export interface EditableHeadingProps extends Omit<EditableTextProps, 'variant'> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
 }

package/dist/EditableText.js

@@ -106,8 +106,8 @@ function toCssUnit(value) {
  * EditableText provides full typography controls (color, size, weight, line-height, alignment, transform, variants)
  * alongside strict Fivora visual editing bindings.
  */
-function EditableText({ id, 'data-preview-field-path': previewFieldPath, defaultValue, placeholder, children, as: ComponentOverride, variant, color, size, weight, lineHeight, align, transform, letterSpacing, fontFamily, style, className = '', ...props }) {
-    const path = previewFieldPath || id;
+function EditableText({ id, 'data-preview-field-path': previewFieldPath, fieldPath, defaultValue, placeholder, children, as: ComponentOverride, variant, color, size, weight, lineHeight, align, transform, letterSpacing, fontFamily, style, className = '', ...props }) {
+    const path = previewFieldPath || fieldPath || id;
     const rawContent = children !== undefined ? children : defaultValue;
     const isContentEmpty = rawContent === undefined ||
         rawContent === null ||

package/dist/SiteDataProvider.js

@@ -718,11 +718,14 @@ function normalizeProductItem(p) {
                         : p.rate;
     let numPrice = rawPrice;
     if (typeof rawPrice === "string" && rawPrice.trim()) {
-        const match = rawPrice.match(/-?\d+(?:,\d{3})*(?:\.\d+)?|-?\d+(?:\.\d+)?/);
-        if (match) {
-            const parsed = parseFloat(match[0].replace(/,/g, ""));
-            if (!isNaN(parsed) && Number.isFinite(parsed)) {
-                numPrice = parsed;
+        const isRangeStr = rawPrice.includes("-") || rawPrice.includes("–") || rawPrice.includes("—") || /\bto\b/i.test(rawPrice);
+        if (!isRangeStr) {
+            const match = rawPrice.match(/-?\d+(?:,\d{3})*(?:\.\d+)?|-?\d+(?:\.\d+)?/);
+            if (match) {
+                const parsed = parseFloat(match[0].replace(/,/g, ""));
+                if (!isNaN(parsed) && Number.isFinite(parsed)) {
+                    numPrice = parsed;
+                }
             }
         }
     }
@@ -757,6 +760,10 @@ function normalizeProductItem(p) {
         (Array.isArray(p.images) ? p.images[0] : undefined);
     const badgeCandidate = p.badge ?? p.tag ?? p.label ?? p.badgeText ?? p.chip;
     const descCandidate = p.description ?? p.desc ?? p.details ?? p.shortDescription ?? p.subtitle;
+    const explicitMin = p.minPrice ?? customData.minPrice;
+    const explicitMax = p.maxPrice ?? customData.maxPrice;
+    const explicitRange = p.priceRange ?? customData.priceRange;
+    const isRange = Boolean(p.isPriceRange || customData.isPriceRange || (explicitMax && explicitMin));
     return {
         ...customData,
         ...p,
@@ -764,6 +771,10 @@ function normalizeProductItem(p) {
         title: titleCandidate,
         productName: (titleCandidate ?? nameCandidate),
         itemTitle: (titleCandidate ?? nameCandidate),
+        minPrice: explicitMin !== undefined ? explicitMin : undefined,
+        maxPrice: explicitMax !== undefined ? explicitMax : undefined,
+        priceRange: explicitRange !== undefined ? explicitRange : undefined,
+        isPriceRange: isRange,
         ...(numPrice !== undefined
             ? {
                 price: numPrice,

package/dist/TrustBadges.js

@@ -58,7 +58,7 @@ function TrustBadges({ fieldPath = 'content.trustBadges', title, subtitle, badge
                 return ((0, jsx_runtime_1.jsx)("svg", { className: "w-6 h-6 text-slate-700", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }));
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("section", { className: `w-full py-8 my-4 ${className}`, "data-preview-field-path": fieldPath, style: style, children: [(title || subtitle) && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-8", children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: "text-xl sm:text-2xl font-bold tracking-tight text-slate-900 dark:text-white", children: title })), subtitle && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-slate-600 dark:text-slate-400 max-w-xl mx-auto", children: subtitle }))] })), (0, jsx_runtime_1.jsx)("div", { className: variant === 'inline'
+    return ((0, jsx_runtime_1.jsxs)("section", { id: "trust-badges", "data-design-section": "trust-badges", "data-section-id": "trust-badges", className: `w-full py-8 my-4 ${className}`, "data-preview-field-path": fieldPath, style: style, children: [(title || subtitle) && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-8", children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: "text-xl sm:text-2xl font-bold tracking-tight text-slate-900 dark:text-white", children: title })), subtitle && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-slate-600 dark:text-slate-400 max-w-xl mx-auto", children: subtitle }))] })), (0, jsx_runtime_1.jsx)("div", { className: variant === 'inline'
                     ? 'flex flex-wrap items-center justify-around gap-6'
                     : 'deneb-trust-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6', children: badges.map((badge) => ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-start gap-4 p-5 rounded-2xl transition-all duration-200 hover:-translate-y-0.5 ${variant === 'cards'
                         ? 'bg-white border border-slate-200/80 shadow-sm hover:shadow-md dark:bg-slate-900/60 dark:border-slate-800 dark:hover:border-slate-700'

package/dist/cart/useCart.d.ts

@@ -19,6 +19,9 @@ export declare function getProductWhatsAppUrl(product: {
     title?: string;
     brand?: string;
     price?: string | number;
+    size?: string | number;
+    color?: string;
+    option?: string | number;
     [key: string]: unknown;
 }, whatsappNumber: string, options?: {
     storeName?: string;

package/dist/cart/useCart.js

@@ -31,19 +31,30 @@ function formatCurrency(amount, currency = 'LKR') {
     return `${currency} ${formatted}`;
 }
 function getProductWhatsAppUrl(product, whatsappNumber, options) {
-    const cleanNumber = (whatsappNumber || '').replace(/\D/g, '');
-    const title = product.name || product.title || 'Product';
-    const brand = product.brand ? ` (Brand: ${product.brand})` : '';
-    const priceNum = typeof product.price === 'number' ? product.price : parseFloat(String(product.price || '').replace(/[^0-9.]/g, '')) || 0;
-    const priceStr = priceNum > 0 ? `\nPrice: ${formatCurrency(priceNum, options?.currency || 'LKR')}` : '';
-    const store = options?.storeName ? ` at ${options.storeName}` : '';
+    const cleanNumber = (whatsappNumber || "").replace(/\D/g, "");
+    const title = product.name || product.title || "Product";
+    const brand = product.brand ? ` (Brand: ${product.brand})` : "";
+    const variantParts = [];
+    if (product.size)
+        variantParts.push(`Size: ${product.size}`);
+    if (product.color && product.color !== "Standard")
+        variantParts.push(`Color: ${product.color}`);
+    if (product.option && product.option !== product.size)
+        variantParts.push(`Option: ${product.option}`);
+    const variantStr = variantParts.length > 0 ? ` [${variantParts.join(", ")}]` : "";
+    const rawPriceStr = typeof product.price === "string" && product.price.trim() ? product.price.trim() : "";
+    const priceNum = typeof product.price === "number" ? product.price : parseNumericPrice(product.price);
+    const priceStr = rawPriceStr
+        ? `\nPrice: ${rawPriceStr}`
+        : (priceNum > 0 ? `\nPrice: ${formatCurrency(priceNum, options?.currency || "LKR")}` : "");
+    const store = options?.storeName ? ` at ${options.storeName}` : "";
     const message = [
         `Hello${store}! 👋`,
         `I am interested in this product:`,
-        `*${title}*${brand}${priceStr}`,
-        '',
+        `*${title}*${brand}${variantStr}${priceStr}`,
+        "",
         `Could you please share more details, availability, and ordering instructions? Thank you!`,
-    ].join('\n');
+    ].join("\n");
     return `https://wa.me/${cleanNumber}?text=${encodeURIComponent(message)}`;
 }
 const CartContext = (0, react_1.createContext)(null);

package/dist/examples/CompleteStorefrontExample.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * Complete Storefront Page Template Example.
+ *
+ * Demonstrates a fully modular, production-ready Fivora storefront layout where:
+ * 1. Every top-level block is wrapped in an `<EditableSection>` with `name`, `data-design-section`, and `data-section-id`.
+ * 2. Visual layout controls (center alignment, hide/delete section, background styling) work natively.
+ * 3. Products seamlessly handle both single fixed pricing and dynamic variant ranges with interactive apparel swatches.
+ */
+export declare function CompleteStorefrontExample(): React.JSX.Element;
+export default CompleteStorefrontExample;

package/dist/examples/CompleteStorefrontExample.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompleteStorefrontExample = CompleteStorefrontExample;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EditableSection_1 = require("../EditableSection");
+const EditableText_1 = require("../EditableText");
+const EditableProductGrid_1 = require("../EditableProductGrid");
+const EditableCustomerReviews_1 = require("../EditableCustomerReviews");
+const EditableFAQAccordion_1 = require("../EditableFAQAccordion");
+const TrustBadges_1 = require("../TrustBadges");
+/**
+ * Complete Storefront Page Template Example.
+ *
+ * Demonstrates a fully modular, production-ready Fivora storefront layout where:
+ * 1. Every top-level block is wrapped in an `<EditableSection>` with `name`, `data-design-section`, and `data-section-id`.
+ * 2. Visual layout controls (center alignment, hide/delete section, background styling) work natively.
+ * 3. Products seamlessly handle both single fixed pricing and dynamic variant ranges with interactive apparel swatches.
+ */
+function CompleteStorefrontExample() {
+    const sampleProducts = [
+        {
+            id: 'prod-1',
+            name: 'Structured Linen Overshirt',
+            minPrice: 3200,
+            maxPrice: 4600,
+            priceRange: 'LKR 3,200 – LKR 4,600',
+            isPriceRange: true,
+            currency: 'LKR',
+            imageUrl: '/images/linen-shirt.jpg',
+            badge: 'Bestseller',
+            colors: [
+                { name: 'Oatmeal', hex: '#e2d9cc', imageUrl: '/images/linen-shirt.jpg' },
+                { name: 'Forest Green', hex: '#2d4739', imageUrl: '/images/linen-shirt-green.jpg' },
+            ],
+            sizes: ['S', 'M', 'L', 'XL'],
+        },
+        {
+            id: 'prod-2',
+            name: 'Minimalist Silver Bangle',
+            price: 5200,
+            compareAtPrice: 6500,
+            currency: 'LKR',
+            imageUrl: '/images/silver-bangle.jpg',
+            badge: '925 Sterling',
+        },
+        {
+            id: 'prod-3',
+            name: 'Pleated Silk Scarf',
+            minPrice: 1900,
+            maxPrice: 2800,
+            priceRange: 'LKR 1,900 – LKR 2,800',
+            isPriceRange: true,
+            currency: 'LKR',
+            imageUrl: '/images/silk-scarf.jpg',
+            colors: [
+                { name: 'Crimson', hex: '#991b1b', imageUrl: '/images/silk-scarf.jpg' },
+                { name: 'Goldenrod', hex: '#d97706', imageUrl: '/images/silk-scarf-gold.jpg' },
+            ],
+            sizes: ['Standard', 'Oversized'],
+        },
+    ];
+    const sampleReviews = [
+        {
+            id: 'rev-1',
+            author: 'Dilshan Perera',
+            rating: 5,
+            comment: 'Exceptional linen quality and fast delivery. The color swatch matched reality perfectly.',
+            date: '2 days ago',
+        },
+        {
+            id: 'rev-2',
+            author: 'Ananya Sharma',
+            rating: 5,
+            comment: 'Super easy WhatsApp ordering process! Customer support replied within minutes.',
+            date: '1 week ago',
+        },
+    ];
+    const sampleFaqs = [
+        {
+            id: 'faq-1',
+            question: 'How do clothing size options and price ranges work?',
+            answer: 'Items with multiple materials or sizes display our transparent price range. Selecting your color swatch and size chip will immediately resolve the exact checkout price.',
+        },
+        {
+            id: 'faq-2',
+            question: 'Can I hide or reorder sections in the visual editor?',
+            answer: 'Yes! Every section in this template is annotated with data-design-section. Shop owners can center content, change colors, or hide unwanted sections with 1-click in the visual editor.',
+        },
+        {
+            id: 'faq-3',
+            question: 'What delivery options are supported?',
+            answer: 'We support island-wide tracked door-to-door courier delivery and prompt Cash-on-Delivery payment options.',
+        },
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "min-h-screen bg-white text-gray-900 font-sans", children: [(0, jsx_runtime_1.jsx)(EditableSection_1.EditableSection, { name: "announcement-bar", container: true, className: "bg-indigo-900 text-white text-xs py-2 px-4 text-center font-medium", children: (0, jsx_runtime_1.jsx)("span", { children: "Complimentary islandwide delivery on all orders above LKR 10,000" }) }), (0, jsx_runtime_1.jsx)(EditableSection_1.EditableSection, { name: "hero", align: "center", container: true, className: "py-20 px-6 bg-gradient-to-b from-indigo-50/50 via-white to-white", children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-3xl mx-auto text-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs uppercase font-bold tracking-widest text-indigo-600 bg-indigo-100/80 px-3 py-1 rounded-full", children: "Modern Ceylon Atelier" }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h1", fieldPath: "hero.title", className: "text-4xl sm:text-6xl font-extrabold text-gray-950 mt-5 tracking-tight leading-tight", children: "Timeless Apparel & Handcrafted Essentials" }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", fieldPath: "hero.subtitle", className: "text-base sm:text-lg text-gray-600 mt-4 max-w-xl mx-auto leading-relaxed", children: "Designed with natural fibers, organic silhouettes, and responsive interactive previewing." }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 flex flex-wrap justify-center gap-4", children: [(0, jsx_runtime_1.jsx)("a", { href: "#products", className: "px-6 py-3.5 bg-indigo-600 text-white font-semibold rounded-xl hover:bg-indigo-700 shadow-sm transition", children: "Shop New Arrivals" }), (0, jsx_runtime_1.jsx)("a", { href: "#reviews", className: "px-6 py-3.5 bg-white text-gray-700 border border-gray-200 font-semibold rounded-xl hover:bg-gray-50 transition", children: "Read Customer Stories" })] })] }) }), (0, jsx_runtime_1.jsx)(EditableSection_1.EditableSection, { name: "trust-badges", container: true, className: "border-y border-gray-100 bg-gray-50/60 py-6 px-6", children: (0, jsx_runtime_1.jsx)(TrustBadges_1.TrustBadges, {}) }), (0, jsx_runtime_1.jsx)(EditableSection_1.EditableSection, { name: "products", id: "products", container: true, className: "py-20 px-6", children: (0, jsx_runtime_1.jsx)(EditableProductGrid_1.EditableProductGrid, { products: sampleProducts, title: "Curated Seasonal Essentials", subtitle: "Explore garments with dynamic variant pricing, interactive color swatches, and instant WhatsApp checkout.", listPath: "products", whatsappPhone: "+94771234567", currency: "LKR" }) }), (0, jsx_runtime_1.jsx)(EditableSection_1.EditableSection, { name: "customer-reviews", id: "reviews", container: true, className: "py-16 px-6 bg-gray-50/70 rounded-3xl my-8 mx-auto max-w-7xl", children: (0, jsx_runtime_1.jsx)(EditableCustomerReviews_1.EditableCustomerReviews, { reviews: sampleReviews, title: "Loved by Discerning Shoppers", subtitle: "Verified feedback from boutique buyers across Colombo, Kandy, and Galle.", listPath: "reviews" }) }), (0, jsx_runtime_1.jsxs)(EditableSection_1.EditableSection, { name: "faq", container: true, className: "py-16 px-6 max-w-4xl mx-auto", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-10", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-3xl font-bold text-gray-900", children: "Frequently Asked Questions" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-500 text-sm mt-2", children: "Everything you need to know about our products and order process." })] }), (0, jsx_runtime_1.jsx)(EditableFAQAccordion_1.EditableFAQAccordion, { faqs: sampleFaqs, listPath: "faqs" })] }), (0, jsx_runtime_1.jsx)(EditableSection_1.EditableSection, { name: "footer", container: true, className: "border-t border-gray-200 bg-gray-950 text-gray-400 py-12 px-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-6 text-sm", children: [(0, jsx_runtime_1.jsx)("p", { children: "\u00A9 2026 Fivora Atelier Storefront. All rights reserved." }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-6", children: [(0, jsx_runtime_1.jsx)("a", { href: "#", className: "hover:text-white transition", children: "Privacy Policy" }), (0, jsx_runtime_1.jsx)("a", { href: "#", className: "hover:text-white transition", children: "Terms of Service" }), (0, jsx_runtime_1.jsx)("a", { href: "#products", className: "hover:text-white transition", children: "Shop All" })] })] }) })] }));
+}
+exports.default = CompleteStorefrontExample;

package/dist/examples/ProductPricingExample.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * Example demonstrating Deneb UI's Dual Product Pricing & Apparel Variants:
+ * 1. Single Fixed Price products (e.g. Handcrafted Leather Wallet).
+ * 2. Dynamic Price Range products (e.g. Linen Shirt with multiple tier options).
+ * 3. Interactive Color Swatches with instant photo-switching and size chips.
+ */
+export declare function ProductPricingExample(): React.JSX.Element;
+export default ProductPricingExample;

package/dist/examples/ProductPricingExample.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductPricingExample = ProductPricingExample;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EditableSection_1 = require("../EditableSection");
+const EditableProductCard_1 = require("../EditableProductCard");
+/**
+ * Example demonstrating Deneb UI's Dual Product Pricing & Apparel Variants:
+ * 1. Single Fixed Price products (e.g. Handcrafted Leather Wallet).
+ * 2. Dynamic Price Range products (e.g. Linen Shirt with multiple tier options).
+ * 3. Interactive Color Swatches with instant photo-switching and size chips.
+ */
+function ProductPricingExample() {
+    const sampleProducts = [
+        {
+            id: 'prod-fixed-1',
+            name: 'Artisan Leather Cardholder',
+            description: 'Hand-stitched full-grain Italian leather with RFID protection.',
+            price: 3800,
+            compareAtPrice: 4500,
+            currency: 'LKR',
+            imageUrl: '/images/leather-cardholder.jpg',
+            badge: 'Best Seller',
+            stock: 15,
+        },
+        {
+            id: 'prod-apparel-range-2',
+            name: 'Relaxed Linen Resort Shirt',
+            description: 'Pure organic French linen with pearl buttons. Available in 3 earth tones.',
+            minPrice: 2800,
+            maxPrice: 4800,
+            priceRange: 'LKR 2,800 – LKR 4,800',
+            isPriceRange: true,
+            currency: 'LKR',
+            imageUrl: '/images/linen-navy.jpg',
+            badge: 'New Season',
+            colors: [
+                {
+                    name: 'Midnight Navy',
+                    hex: '#0f2942',
+                    imageUrl: '/images/linen-navy.jpg',
+                },
+                {
+                    name: 'Olive Sage',
+                    hex: '#4d6840',
+                    imageUrl: '/images/linen-olive.jpg',
+                },
+                {
+                    name: 'Terracotta Sand',
+                    hex: '#c26d4f',
+                    imageUrl: '/images/linen-terracotta.jpg',
+                },
+            ],
+            sizes: ['S', 'M', 'L', 'XL'],
+            variants: [
+                { color: 'Midnight Navy', size: 'S', price: 2800 },
+                { color: 'Midnight Navy', size: 'M', price: 2800 },
+                { color: 'Midnight Navy', size: 'L', price: 3200 },
+                { color: 'Midnight Navy', size: 'XL', price: 3500 },
+                { color: 'Olive Sage', size: 'S', price: 3800 },
+                { color: 'Olive Sage', size: 'M', price: 3800 },
+                { color: 'Olive Sage', size: 'L', price: 4200 },
+                { color: 'Terracotta Sand', size: 'M', price: 4500 },
+                { color: 'Terracotta Sand', size: 'XL', price: 4800 },
+            ],
+        },
+        {
+            id: 'prod-apparel-range-3',
+            name: 'Merino Wool Knit Cardigan',
+            description: 'Ultra-soft extrafine Australian merino wool with ribbed cuffs.',
+            minPrice: 6500,
+            maxPrice: 8500,
+            priceRange: 'LKR 6,500 – LKR 8,500',
+            isPriceRange: true,
+            currency: 'LKR',
+            imageUrl: '/images/knit-charcoal.jpg',
+            colors: [
+                {
+                    name: 'Charcoal Grey',
+                    hex: '#334155',
+                    imageUrl: '/images/knit-charcoal.jpg',
+                },
+                {
+                    name: 'Cream Oatmeal',
+                    hex: '#f1f5f9',
+                    imageUrl: '/images/knit-cream.jpg',
+                },
+            ],
+            sizes: ['M', 'L', 'XL'],
+            variants: [
+                { color: 'Charcoal Grey', size: 'M', price: 6500 },
+                { color: 'Charcoal Grey', size: 'L', price: 7200 },
+                { color: 'Cream Oatmeal', size: 'L', price: 8500 },
+            ],
+        },
+    ];
+    return ((0, jsx_runtime_1.jsxs)(EditableSection_1.EditableSection, { name: "products", container: true, className: "py-16 px-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center max-w-xl mx-auto mb-12", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs uppercase font-bold tracking-widest text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full", children: "Live Storefront Products" }), (0, jsx_runtime_1.jsx)("h2", { className: "text-3xl font-extrabold text-gray-900 mt-3 tracking-tight", children: "Crafted For Longevity & Style" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-500 mt-2 text-sm leading-relaxed", children: "Select apparel colors to dynamically update product photos, view variant prices, or configure orders via direct WhatsApp checkout." })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", children: sampleProducts.map((product, index) => ((0, jsx_runtime_1.jsx)(EditableProductCard_1.EditableProductCard, { item: product, itemPath: `products[${index}]`, whatsappPhone: "+94771234567", currency: "LKR", showOptions: true, allowInteractiveSwatches: true }, product.id))) })] }));
+}
+exports.default = ProductPricingExample;

package/dist/examples/SectionLayoutExample.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * Example demonstrating how to use Deneb UI's `<EditableSection>`
+ * with full visual-editing annotations, 1-click centering, and hiding/deletion controls.
+ */
+export declare function SectionLayoutExample(): React.JSX.Element;
+export default SectionLayoutExample;

package/dist/examples/SectionLayoutExample.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionLayoutExample = SectionLayoutExample;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const EditableSection_1 = require("../EditableSection");
+const EditableText_1 = require("../EditableText");
+/**
+ * Example demonstrating how to use Deneb UI's `<EditableSection>`
+ * with full visual-editing annotations, 1-click centering, and hiding/deletion controls.
+ */
+function SectionLayoutExample() {
+    const [isPromoHidden, setIsPromoHidden] = (0, react_1.useState)(false);
+    const [heroAlign, setHeroAlign] = (0, react_1.useState)('center');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-12 py-8", children: [(0, jsx_runtime_1.jsxs)(EditableSection_1.EditableSection, { name: "hero", align: heroAlign, container: true, className: "py-16 px-6 bg-gradient-to-b from-gray-50 to-white rounded-2xl", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs uppercase font-bold tracking-wider text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full", children: "Featured Collection 2026" }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h1", fieldPath: "hero.title", className: "text-4xl md:text-5xl font-extrabold text-gray-900 mt-4 tracking-tight", children: "Curated Luxury & Tailored Aesthetics" }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", fieldPath: "hero.subtitle", className: "text-lg text-gray-600 max-w-2xl mx-auto mt-3 leading-relaxed", children: "Experience handcrafted garments and jewelry engineered with organic textures, responsive layouts, and precision styling." }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 flex gap-4 justify-center", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "px-6 py-3 bg-indigo-600 text-white font-medium rounded-xl hover:bg-indigo-700 transition", children: "Explore Catalogue" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setHeroAlign(current => current === 'center' ? 'left' : 'center'), className: "px-4 py-3 bg-white text-gray-700 border border-gray-300 font-medium rounded-xl hover:bg-gray-50 transition text-sm", children: ["Toggle Alignment (", heroAlign, ")"] })] })] }), (0, jsx_runtime_1.jsx)(EditableSection_1.EditableSection, { name: "promotions", hidden: isPromoHidden, container: true, className: "py-8 px-6 bg-amber-500 text-white rounded-2xl shadow-sm text-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-xl font-bold", children: "Limited Seasonal Clearance" }), (0, jsx_runtime_1.jsx)("p", { className: "text-amber-100 text-sm mt-1", children: "Save up to 40% on selected cashmere and silk silhouettes." })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setIsPromoHidden(true), className: "text-xs bg-white text-amber-900 font-semibold px-4 py-2 rounded-lg hover:bg-amber-100 transition", title: "In visual editor, this sets display: 'none' via section blueprint", children: "Hide This Section (Test)" })] }) }), isPromoHidden && ((0, jsx_runtime_1.jsx)("div", { className: "text-center py-4", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setIsPromoHidden(false), className: "text-sm text-indigo-600 underline font-medium hover:text-indigo-800", children: "\u21BA Restore Hidden Promotions Section" }) })), (0, jsx_runtime_1.jsxs)(EditableSection_1.EditableSection, { name: "features", container: true, className: "py-12 px-6", children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h2", fieldPath: "features.heading", className: "text-3xl font-bold text-gray-900 mb-8", children: "Why Choose Fivora Storefronts" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-6 bg-gray-50 rounded-xl border border-gray-100", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-semibold text-lg text-gray-900", children: "Live Visual Blueprint" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 mt-2", children: "Every section is targetable by ID or section name for instant styling, reordering, and centering." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-6 bg-gray-50 rounded-xl border border-gray-100", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-semibold text-lg text-gray-900", children: "Dual Pricing Engine" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 mt-2", children: "Supports both fixed prices and dynamic variant-driven ranges with interactive color swatches." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-6 bg-gray-50 rounded-xl border border-gray-100", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-semibold text-lg text-gray-900", children: "Zero-Config Static Export" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 mt-2", children: "Pre-rendered HTML output with strict contract verification and blazing-fast mobile response." })] })] })] })] }));
+}
+exports.default = SectionLayoutExample;

package/dist/examples/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SectionLayoutExample';
+export * from './ProductPricingExample';
+export * from './CompleteStorefrontExample';

package/dist/examples/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SectionLayoutExample"), exports);
+__exportStar(require("./ProductPricingExample"), exports);
+__exportStar(require("./CompleteStorefrontExample"), exports);

package/dist/index.d.ts

@@ -103,3 +103,4 @@ export declare const DENEB_FRAMEWORK_VERSION = "2.0.0";
 export declare const DENEB_AUTHOR = "Chamika Gayashan & Induranga Kawishwara";
 export { THEME_PALETTES, GLOBAL_FONT_OPTIONS, FONT_PAIRINGS, isDarkColor, getAutoContrastTextColor, toHexColor, normalizeHexColor, parseVisualCustomization, customizationToTheme, mergeVisualCustomizationIntoTheme, generateThemeVariables, } from '@deneb-ui/core';
 export type { ThemePalette, FontPairing, GlobalFontOption, VisualCustomization, VisualCustomizationColors, VisualCustomizationTypography, VisualCustomizationSpacing, VisualCustomizationLayout, VisualCustomizationComponents, VisualCustomizationSectionOverride, VisualCustomizationElementStyle, TemplateThemeShape, } from '@deneb-ui/core';
+export * from './examples';

package/dist/index.js

@@ -198,3 +198,5 @@ Object.defineProperty(exports, "parseVisualCustomization", { enumerable: true, g
 Object.defineProperty(exports, "customizationToTheme", { enumerable: true, get: function () { return core_3.customizationToTheme; } });
 Object.defineProperty(exports, "mergeVisualCustomizationIntoTheme", { enumerable: true, get: function () { return core_3.mergeVisualCustomizationIntoTheme; } });
 Object.defineProperty(exports, "generateThemeVariables", { enumerable: true, get: function () { return core_3.generateThemeVariables; } });
+// Export reference examples
+__exportStar(require("./examples"), exports);