@deneb-ui/ui 2.0.95 → 2.0.96

package/README.md

@@ -600,6 +600,125 @@ The engine automatically:
 
 ---
 
+### Modular Section Architecture (`<section>` & `<Section>`)
+
+DENEB UI introduces a modular `<section>` architecture designed specifically for visual website builders, enabling 1-click section deletion, full layout centering, and background styling.
+
+#### Key Features
+* **100% Contract Compliant**: Automatically sets `data-design-section`, `data-section-id`, and `id`.
+* **1-Click Delete / Hide**: Supports `hidden={true}` or visual editor hide toggle (`display: none`).
+* **Instant Centering**: One-prop horizontal and text centering with `center={true}` or `align="center"`.
+* **Responsive Container**: `container={true}` wraps children in a responsive, max-width contained inner wrapper (`1280px`).
+
+```tsx
+import { Section, EditableSection, Heading, Paragraph, Button } from "@deneb-ui/ui";
+
+export function PromoSection() {
+  return (
+    // Clean shorthand alias
+    <Section 
+      name="special-promo" 
+      center={true} 
+      container={true}
+      bg="#f8fafc"
+      padding="xl"
+    >
+      <Heading level={2} id="promo.title" defaultValue="Limited Time Offer" />
+      <Paragraph id="promo.subtitle" defaultValue="Get 20% off all handcrafted items." />
+      <Button id="promo.cta" defaultValue="Shop the Sale" />
+    </Section>
+  );
+}
+```
+
+---
+
+### Dual Product Pricing & Apparel Variants
+
+DENEB UI commerce components natively support both **Single Fixed Prices** and **Dynamic Price Ranges**, as well as apparel clothing options (color swatches with image swapping and size chips).
+
+#### 1. Single Fixed Price
+```tsx
+import { ProductCard } from "@deneb-ui/ui";
+
+<ProductCard
+  item={{
+    id: "prod-1",
+    name: "Classic Silk Shirt",
+    price: 3500,
+    compareAtPrice: 4500,
+    currency: "LKR",
+    imageUrl: "/images/shirt.jpg"
+  }}
+  itemPath="products[0]"
+/>
+```
+
+#### 2. Dynamic Price Range & Apparel Color Swatches
+```tsx
+import { ProductCard } from "@deneb-ui/ui";
+
+<ProductCard
+  item={{
+    id: "prod-2",
+    name: "Linen Summer Tunic",
+    minPrice: 2500,
+    maxPrice: 4500,
+    priceRange: "LKR 2,500 – LKR 4,500",
+    isPriceRange: true,
+    currency: "LKR",
+    imageUrl: "/images/tunic-navy.jpg",
+    colors: [
+      { name: "Navy Blue", hex: "#1e3a8a", imageUrl: "/images/tunic-navy.jpg" },
+      { name: "Olive Green", hex: "#3f6212", imageUrl: "/images/tunic-olive.jpg" },
+      { name: "Cream White", hex: "#f8fafc", imageUrl: "/images/tunic-white.jpg" }
+    ],
+    sizes: ["S", "M", "L", "XL"],
+    variants: [
+      { color: "Navy Blue", size: "S", price: 2500 },
+      { color: "Navy Blue", size: "XL", price: 3200 },
+      { color: "Olive Green", size: "L", price: 4500 }
+    ]
+  }}
+  itemPath="products[1]"
+  whatsappPhone="+94771234567"
+/>
+```
+* **Interactive Color Swatches**: Clicking a color automatically swaps the card's active product photo to that color's image.
+* **Variant Price Resolution**: Displays the range (`LKR 2,500 – LKR 4,500`) initially, then resolves to the exact variant price when a size/color is selected.
+* **Smart WhatsApp & Cart**: Automatically compiles `[Color: Navy Blue, Size: XL]` into the customer's WhatsApp order message and cart drawer line items.
+
+---
+
+## Reference Examples
+
+DENEB UI includes full, ready-to-run reference examples demonstrating modular layouts, dual pricing, and complete storefront architecture:
+
+```tsx
+import {
+  SectionLayoutExample,
+  ProductPricingExample,
+  CompleteStorefrontExample
+} from "@deneb-ui/ui";
+
+// 1. Modular section centering & hiding controls
+export function SectionDemo() {
+  return <SectionLayoutExample />;
+}
+
+// 2. Single price, price ranges, and apparel swatches with photo switching
+export function CommerceDemo() {
+  return <ProductPricingExample />;
+}
+
+// 3. Full production-ready Next.js storefront page
+export function FullStorefrontDemo() {
+  return <CompleteStorefrontExample />;
+}
+```
+
+---
+
 ## Related Packages
 
 | Package | Purpose |

package/dist/DenebComponentStyles.js

@@ -78,6 +78,13 @@ function DenebComponentStyles() {
       max-width: var(--deneb-section-max-w, inherit);
       background-color: var(--deneb-section-bg, inherit);
       background-image: var(--deneb-section-bg-image, none);
+      text-align: var(--deneb-section-align, inherit);
+      display: var(--deneb-section-display, block);
+      order: var(--deneb-section-order, 0);
+    }
+    body > main, main, [data-preview-page-key] {
+      display: flex;
+      flex-direction: column;
     }
   `;
     return (0, jsx_runtime_1.jsx)("style", { "data-deneb-component-styles": true, children: css });

package/dist/EditableCustomerReviews.d.ts

@@ -15,6 +15,7 @@ export interface EditableCustomerReviewsProps extends React.HTMLAttributes<HTMLE
      * Field path prefix for live Fivora Visual Editing synchronization (e.g. "home").
      */
     sectionPath?: string;
+    listPath?: string;
     /**
      * Title of the reviews section.
      */
@@ -44,5 +45,5 @@ export interface EditableCustomerReviewsProps extends React.HTMLAttributes<HTMLE
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-export declare function EditableCustomerReviews({ sectionPath, title, subtitle, averageRating, totalReviews, reviews, className, style, ...props }: EditableCustomerReviewsProps): React.JSX.Element;
+export declare function EditableCustomerReviews({ sectionPath, listPath, title, subtitle, averageRating, totalReviews, reviews, className, style, ...props }: EditableCustomerReviewsProps): React.JSX.Element;
 export declare const CustomerReviews: typeof EditableCustomerReviews;

package/dist/EditableCustomerReviews.js

@@ -44,7 +44,7 @@ const DEFAULT_REVIEWS = [
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-function EditableCustomerReviews({ sectionPath = 'home', title, subtitle, averageRating, totalReviews, reviews, className = '', style, ...props }) {
+function EditableCustomerReviews({ sectionPath = 'home', listPath = 'reviews', title, subtitle, averageRating, totalReviews, reviews, className = '', style, ...props }) {
     const [selectedStarFilter, setSelectedStarFilter] = (0, react_1.useState)(null);
     const liveReviews = (0, SiteDataProvider_1.useReviews)();
     const siteData = (0, SiteDataProvider_1.useSiteData)();
@@ -85,7 +85,7 @@ function EditableCustomerReviews({ sectionPath = 'home', title, subtitle, averag
             return normalizedReviews;
         return normalizedReviews.filter((r) => r.rating === selectedStarFilter);
     }, [normalizedReviews, selectedStarFilter]);
-    return ((0, jsx_runtime_1.jsxs)("section", { "data-preview-page-key": sectionPath, className: `editable-customer-reviews max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 ${className}`.trim(), style: style, ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center max-w-2xl mx-auto mb-12", children: [subtitle && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.reviewsSubtitle`, className: "text-xs font-black tracking-widest uppercase text-emerald-600 dark:text-lime-400 block mb-2", children: resolvedSubtitle })), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `${sectionPath}.reviewsTitle`, className: "text-3xl sm:text-4xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-tight", children: resolvedTitle }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex items-center justify-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex text-amber-500 dark:text-amber-400 text-lg", children: '★★★★★' }), (0, jsx_runtime_1.jsxs)("span", { className: "text-slate-900 dark:text-white font-extrabold text-lg", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.reviewsAverage`, children: resolvedAverageRating }), " / 5.0"] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-slate-500 dark:text-slate-400 text-sm", children: ["(", (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.reviewsCount`, children: resolvedTotalReviews }), " reviews)"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center gap-2 mb-8", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedStarFilter(null), className: `px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all ${selectedStarFilter === null
+    return ((0, jsx_runtime_1.jsxs)("section", { id: props.id || "customer-reviews", "data-design-section": "customer-reviews", "data-section-id": "customer-reviews", "data-preview-page-key": sectionPath, className: `editable-customer-reviews max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 ${className}`.trim(), style: style, ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center max-w-2xl mx-auto mb-12", children: [subtitle && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.reviewsSubtitle`, className: "text-xs font-black tracking-widest uppercase text-emerald-600 dark:text-lime-400 block mb-2", children: resolvedSubtitle })), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `${sectionPath}.reviewsTitle`, className: "text-3xl sm:text-4xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-tight", children: resolvedTitle }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex items-center justify-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex text-amber-500 dark:text-amber-400 text-lg", children: '★★★★★' }), (0, jsx_runtime_1.jsxs)("span", { className: "text-slate-900 dark:text-white font-extrabold text-lg", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.reviewsAverage`, children: resolvedAverageRating }), " / 5.0"] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-slate-500 dark:text-slate-400 text-sm", children: ["(", (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.reviewsCount`, children: resolvedTotalReviews }), " reviews)"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center gap-2 mb-8", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedStarFilter(null), className: `px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all ${selectedStarFilter === null
                             ? 'bg-slate-900 text-white dark:bg-lime-400 dark:text-slate-950 font-extrabold shadow-sm'
                             : 'bg-slate-100 text-slate-600 hover:text-slate-900 border border-slate-200 dark:bg-slate-900/60 dark:text-slate-400 dark:hover:text-white dark:border-slate-800'}`, children: "All Reviews" }), [5, 4, 3].map((stars) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setSelectedStarFilter(stars), className: `px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-1 ${selectedStarFilter === stars
                             ? 'bg-slate-900 text-white dark:bg-lime-400 dark:text-slate-950 font-extrabold shadow-sm'

package/dist/EditableFAQAccordion.d.ts

@@ -13,7 +13,8 @@ export interface EditableFAQItemProps extends React.HTMLAttributes<HTMLElement>
 export declare function EditableFAQItem({ itemPath, item, defaultOpen, className, style, ...props }: EditableFAQItemProps): React.JSX.Element;
 export interface EditableFAQAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
     listPath?: string;
-    items: FAQItem[];
+    items?: FAQItem[];
+    faqs?: FAQItem[];
     defaultOpenIndex?: number;
 }
-export declare function EditableFAQAccordion({ listPath, items, defaultOpenIndex, className, style, ...props }: EditableFAQAccordionProps): React.JSX.Element;
+export declare function EditableFAQAccordion({ listPath, items: itemsProp, faqs, defaultOpenIndex, className, style, ...props }: EditableFAQAccordionProps): React.JSX.Element;

package/dist/EditableFAQAccordion.js

@@ -53,7 +53,8 @@ function EditableFAQItem({ itemPath, item, defaultOpen = true, className = '', s
                         lineHeight: 1.6,
                     } }) })] }));
 }
-function EditableFAQAccordion({ listPath = 'home.faq', items = [], defaultOpenIndex = 0, className = '', style, ...props }) {
+function EditableFAQAccordion({ listPath = 'home.faq', items: itemsProp, faqs, defaultOpenIndex = 0, className = '', style, ...props }) {
+    const items = faqs || itemsProp || [];
     return ((0, jsx_runtime_1.jsx)("div", { "data-preview-list-path": listPath, style: {
             maxWidth: '800px',
             margin: '0 auto',

package/dist/EditableGoogleFeedback.js

@@ -153,7 +153,7 @@ function EditableGoogleFeedback({ heading, subheading, badgeTitle = 'Google Revi
     const effectiveSubheading = subheading ?? siteData?.content?.[basePath]?.subheading ?? 'Real stories and verified 5-star reviews from our official Google Business profile.';
     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, className: `editable-google-feedback w-full ${defaultPadding} ${className}`.trim(), style: style, ...props, children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-10", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-6 mb-6 sm:mb-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "max-w-2xl space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center gap-2.5 px-3.5 py-1.5 rounded-full bg-slate-100 border border-slate-200 dark:bg-slate-900/80 dark:border-slate-800 shadow-sm", children: [(0, jsx_runtime_1.jsx)("img", { src: badgeIcon || DEFAULT_GOOGLE_ICON, alt: "Google", "data-preview-field-path": `feedback.badgeIcon`, className: "w-4 h-4 object-contain" }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeTitle`, className: "text-xs uppercase tracking-widest font-black text-slate-800 dark:text-slate-200", children: badgeTitle }), (0, jsx_runtime_1.jsx)("span", { className: "w-1 h-1 rounded-full bg-slate-400 dark:bg-slate-600" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeRating`, className: "text-xs font-black text-amber-600 dark:text-amber-400", children: effectiveBadgeRating }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-[2px]", children: Array.from({ length: 5 }).map((_, sIdx) => ((0, jsx_runtime_1.jsx)(GoogleStarSvg, { filled: true, size: 14 }, sIdx))) })] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-[11px] text-slate-500 dark:text-slate-400 font-medium hidden sm:inline", children: ["(", (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeReviewsCount`, children: effectiveBadgeCount }), ")"] })] }), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `feedback.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": `feedback.subheading`, className: "text-xs sm:text-base text-slate-600 dark:text-slate-400 leading-relaxed", children: effectiveSubheading })] }), (0, jsx_runtime_1.jsx)("div", { className: "hidden md:flex flex-col items-end text-right", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeRating`, className: "font-heading text-4xl font-black text-amber-500 dark:text-amber-400", children: badgeRating }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-[2px]", children: Array.from({ length: 5 }).map((_, sIdx) => ((0, jsx_runtime_1.jsx)(GoogleStarSvg, { filled: true, size: 16 }, sIdx))) }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeReviewsCount`, className: "text-xs text-slate-500 dark:text-slate-400 font-bold", children: badgeReviewsCount })] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { "data-preview-list-path": `feedback.feedbacks`, className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(FeedbackCard, { item: item, index: index, maxStars: maxStars, badgeIcon: badgeIcon, badgeTitle: badgeTitle, cardClassName: cardClassName }, item.id || String(index)))) })] }) }));
+    return ((0, jsx_runtime_1.jsx)("section", { id: props.id || "google-feedback", "data-design-section": "google-feedback", "data-section-id": "google-feedback", "data-preview-page-key": basePath, className: `editable-google-feedback w-full ${defaultPadding} ${className}`.trim(), style: style, ...props, children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-10", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-6 mb-6 sm:mb-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "max-w-2xl space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center gap-2.5 px-3.5 py-1.5 rounded-full bg-slate-100 border border-slate-200 dark:bg-slate-900/80 dark:border-slate-800 shadow-sm", children: [(0, jsx_runtime_1.jsx)("img", { src: badgeIcon || DEFAULT_GOOGLE_ICON, alt: "Google", "data-preview-field-path": `feedback.badgeIcon`, className: "w-4 h-4 object-contain" }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeTitle`, className: "text-xs uppercase tracking-widest font-black text-slate-800 dark:text-slate-200", children: badgeTitle }), (0, jsx_runtime_1.jsx)("span", { className: "w-1 h-1 rounded-full bg-slate-400 dark:bg-slate-600" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeRating`, className: "text-xs font-black text-amber-600 dark:text-amber-400", children: effectiveBadgeRating }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-[2px]", children: Array.from({ length: 5 }).map((_, sIdx) => ((0, jsx_runtime_1.jsx)(GoogleStarSvg, { filled: true, size: 14 }, sIdx))) })] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-[11px] text-slate-500 dark:text-slate-400 font-medium hidden sm:inline", children: ["(", (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeReviewsCount`, children: effectiveBadgeCount }), ")"] })] }), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `feedback.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": `feedback.subheading`, className: "text-xs sm:text-base text-slate-600 dark:text-slate-400 leading-relaxed", children: effectiveSubheading })] }), (0, jsx_runtime_1.jsx)("div", { className: "hidden md:flex flex-col items-end text-right", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeRating`, className: "font-heading text-4xl font-black text-amber-500 dark:text-amber-400", children: badgeRating }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-[2px]", children: Array.from({ length: 5 }).map((_, sIdx) => ((0, jsx_runtime_1.jsx)(GoogleStarSvg, { filled: true, size: 16 }, sIdx))) }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeReviewsCount`, className: "text-xs text-slate-500 dark:text-slate-400 font-bold", children: badgeReviewsCount })] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { "data-preview-list-path": `feedback.feedbacks`, className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(FeedbackCard, { item: item, index: index, maxStars: maxStars, badgeIcon: badgeIcon, badgeTitle: badgeTitle, cardClassName: cardClassName }, item.id || String(index)))) })] }) }));
 }
 // Canonical alias
 exports.GoogleFeedback = EditableGoogleFeedback;

package/dist/EditableHero.js

@@ -33,7 +33,7 @@ function EditableHeroCentered({ pageKey = 'home', badgePath = 'home.heroEyebrow'
             window.location.href = `${cleanBase}${cleanPath}` || '/';
         }
     };
-    return ((0, jsx_runtime_1.jsx)("section", { "data-design-section": "hero", style: {
+    return ((0, jsx_runtime_1.jsx)("section", { id: props.id || "hero", "data-design-section": "hero", "data-section-id": "hero", style: {
             padding: '5rem 1.5rem',
             textAlign: 'center',
             position: 'relative',
@@ -112,7 +112,7 @@ function EditableHeroSplit({ pageKey = 'home', badgePath = 'home.heroEyebrow', t
             window.location.href = `${cleanBase}${cleanPath}` || '/';
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("section", { "data-design-section": "hero", style: {
+    return ((0, jsx_runtime_1.jsxs)("section", { id: props.id || "hero", "data-design-section": "hero", "data-section-id": "hero", style: {
             padding: '5rem 1.5rem',
             display: 'grid',
             gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',

package/dist/EditableProductCard.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MeasurementUnit } from './utils/productOptions';
+import { MeasurementUnit, ProductVariant } from './utils/productOptions';
 export interface ProductItem {
     id?: string | number;
     name?: string;
@@ -46,101 +46,45 @@ export interface ProductItem {
     colors?: Array<string | {
         name: string;
         hex?: string;
+        image?: string;
     }> | string;
     colorsText?: string;
     colorsLabel?: string;
+    variants?: ProductVariant[];
+    variantPrices?: Record<string, number | string>;
+    minPrice?: string | number;
+    maxPrice?: string | number;
+    priceMin?: string | number;
+    priceMax?: string | number;
+    priceRange?: [number | string, number | string] | string;
     [key: string]: unknown;
 }
 export type ProductCardVariant = 'modern-glass' | 'classic' | 'minimal' | 'horizontal';
 export interface EditableProductCardProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * The item path for the product, e.g. "products[0]" or "featuredProducts[1]".
-     */
     itemPath: string;
-    /**
-     * The product data object.
-     */
-    product: ProductItem;
-    /**
-     * Design variant: 'modern-glass' | 'classic' | 'minimal' | 'horizontal'
-     */
+    product?: ProductItem;
+    item?: ProductItem;
     cardVariant?: ProductCardVariant;
-    /**
-     * Fallback image URL if product image is empty.
-     */
     imageFallback?: string;
-    /**
-     * HTML wrapper tag (default: 'article').
-     */
     as?: React.ElementType;
-    /**
-     * Currency code or symbol (default: 'LKR').
-     */
     currency?: string;
-    /**
-     * Whether to display the brand tag (default: true).
-     */
     showBrand?: boolean;
-    /**
-     * Whether to display the price field (default: true).
-     */
     showPrice?: boolean;
-    /**
-     * Whether to display the description field (default: true).
-     */
     showDescription?: boolean;
-    /**
-     * Whether to display category pill (default: true if present).
-     */
     showCategory?: boolean;
-    /**
-     * Default WhatsApp account number for inquiries (e.g. '94771234567').
-     */
     whatsappNumber?: string;
-    /**
-     * Store name for WhatsApp message templates.
-     */
+    whatsappPhone?: string;
     storeName?: string;
-    /**
-     * Whether to display the WhatsApp contact button (default: true).
-     */
+    showOptions?: boolean;
+    allowInteractiveSwatches?: boolean;
     showWhatsAppButton?: boolean;
-    /**
-     * Whether to display the Add to Cart button (default: true).
-     */
     showAddToCartButton?: boolean;
-    /**
-     * Default label for the WhatsApp button (default: 'Inquire on WhatsApp').
-     */
     whatsappActionLabel?: string;
-    /**
-     * Default label for the Add to Cart button (default: 'Add to Cart').
-     */
     addToCartLabel?: string;
-    /**
-     * Optional custom action slot (overrides dual action buttons).
-     */
     actionSlot?: React.ReactNode;
-    /**
-     * Legacy action label fallback.
-     */
     actionLabel?: string;
-    /**
-     * Legacy action label path fallback.
-     */
     actionLabelPath?: string;
-    /**
-     * Optional callback when Add to Cart is clicked.
-     */
     onAddToCart?: (product: ProductItem) => void;
-    /**
-     * Optional callback when WhatsApp button is clicked.
-     */
     onWhatsAppClick?: (product: ProductItem, url: string) => void;
 }
-/**
- * EditableProductCard is an elite, auto-balancing commerce card featuring
- * Sri Lankan Rupee (LKR) pricing, dual WhatsApp + Add to Cart actions,
- * brand attribution, and strict Fivora visual editing synchronization.
- */
-export declare function EditableProductCard({ itemPath, product, cardVariant, imageFallback, as: Component, currency, showBrand, showPrice, showDescription, showCategory, whatsappNumber, storeName, showWhatsAppButton, showAddToCartButton, whatsappActionLabel, addToCartLabel, actionSlot, actionLabel, actionLabelPath, onAddToCart, onWhatsAppClick, className, style, ...props }: EditableProductCardProps): React.JSX.Element;
+export declare function EditableProductCard({ itemPath, product: productProp, item: itemProp, cardVariant, imageFallback, as: Component, currency, showBrand, showPrice, showDescription, showCategory, whatsappNumber: whatsappNumberProp, whatsappPhone: whatsappPhoneProp, showOptions, allowInteractiveSwatches, storeName, showWhatsAppButton, showAddToCartButton, whatsappActionLabel, addToCartLabel, actionSlot, actionLabel, actionLabelPath, onAddToCart, onWhatsAppClick, className, style, ...props }: EditableProductCardProps): React.JSX.Element;